/* Tessera — 2026-05-16e · Polish: storage usage display in Data tab
 * Two top-level <main> elements share the body; visibility flipped by
 * body.t-screen-library / body.t-screen-editor. Editor layout (Phase 2)
 * is unchanged below; the new Library styles live in their own section.
 * All colors and type flow through tessera-tokens.css.
 */

/* ---------- Screen visibility ---------- */
body.t-screen-library #editor { display: none; }
body.t-screen-editor  #library { display: none; }

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body.t-app {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--app-font-family);
  font-size: 13px;
  overflow: hidden;
}

/* ---------- Library screen (Phase 3) ---------- */

#library {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

.t-library-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 32px;
  background: var(--panel-hi);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.t-library-spacer { flex: 1 1 auto; }

.t-library-tabs {
  display: flex;
  gap: 4px;
  margin-left: 18px;
}
.t-library-tab {
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.t-library-tab:hover { background: var(--panel-tint); color: var(--ink); }
.t-library-tab--active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
  cursor: default;
}

.t-library-body {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}
.t-library-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 32px 32px 32px;
}

/* Empty state */
.t-library-empty {
  max-width: 460px;
  margin: 80px auto 0 auto;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.t-library-empty-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 4px 0 0 0;
  line-height: 1.25;
}
.t-library-empty-body {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.5;
}
.t-library-empty .t-primary {
  width: auto;
  margin-top: 8px;
}

/* Project grid */
.t-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* Project card */
.t-project-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.t-project-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--ink-subtle);
}
.t-project-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.t-project-thumb {
  position: relative;
  height: 140px;
  background: var(--panel-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.t-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.t-project-thumb--empty {
  background: linear-gradient(135deg, var(--thumb-grad-start) 0%, var(--thumb-grad-end) 100%);
}
.t-project-thumb-initial {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  color: var(--accent-ink);
  opacity: 0.6;
}

.t-project-body {
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.t-project-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-project-meta-line {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-project-date {
  font-size: 10.5px;
  color: var(--ink-subtle);
  margin-top: 2px;
}

.t-project-kebab {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  backdrop-filter: blur(4px);
}
.t-project-card:hover .t-project-kebab { opacity: 1; }
.t-project-kebab:hover { background: var(--panel); }

/* Status pills (used both as inline brand-panel chip AND as project-card thumbnail overlay) */
.t-status-pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--panel);
  color: var(--ink-dim);
  border: 1px solid var(--border);
}
/* Absolute positioning only when overlaid on a project-card thumbnail. */
.t-project-thumb > .t-status-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}
.t-status-pill--draft    { background: var(--panel); color: var(--ink-mute); }
.t-status-pill--sliced   { background: var(--warn-soft); color: var(--warn-soft-ink); border-color: var(--warn); }
.t-status-pill--exported { background: var(--ok-soft-bg); color: var(--ok); border-color: var(--ok); }

/* Kebab dropdown menu */
.t-kebab-menu {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 4px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.t-kebab-menu-item {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--ink);
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s;
}
.t-kebab-menu-item:hover { background: var(--panel-tint); }
.t-kebab-menu-item--danger { color: var(--err); }
.t-kebab-menu-item--danger:hover { background: var(--err-soft-bg); }

/* ---------- Folder tree sidebar (Phase 3 Chunk B1) ---------- */

.t-library-sidebar {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  background: var(--panel-tint);
  border-right: 1px solid var(--border);
  padding: 12px 0;
  overflow: hidden;
}
.t-folder-tree {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 8px;
}
.t-folder-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 0;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  color: var(--ink-dim);
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.t-folder-row:hover { background: var(--panel); color: var(--ink); }
.t-folder-row--active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 500;
}
.t-folder-row--drop {
  background: var(--accent-softer);
  outline: 1px dashed var(--accent);
  outline-offset: -2px;
}
.t-folder-chev {
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: transform 0.15s;
}
.t-folder-chev--placeholder { visibility: hidden; }
.t-folder-chev--expanded { transform: rotate(90deg); }
.t-folder-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--ink-mute);
}
.t-folder-row--active .t-folder-icon { color: var(--accent); }
.t-folder-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-folder-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-subtle);
  margin-left: 4px;
  flex: 0 0 auto;
}
.t-folder-kebab {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-folder-row:hover .t-folder-kebab,
.t-folder-row--active .t-folder-kebab { opacity: 1; }
.t-folder-kebab:hover { background: var(--panel-hi); color: var(--ink); }

.t-folder-new {
  margin: 8px 12px 4px 12px;
  padding: 7px 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex: 0 0 auto;
}
.t-folder-new:hover {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--ink-subtle);
}

/* Inline new-folder input row (sits inside the tree under the selected parent) */
.t-folder-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 0;
}
.t-folder-input-row input {
  flex: 1 1 auto;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  background: var(--panel);
  color: var(--ink);
  outline: none;
}

/* ---------- Breadcrumb (Phase 3 Chunk B1) ---------- */

.t-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-bottom: 18px;
  min-height: 22px;
}
.t-breadcrumb-segment {
  background: transparent;
  border: 0;
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.t-breadcrumb-segment:hover { background: var(--panel); color: var(--ink); }
.t-breadcrumb-segment--current {
  color: var(--ink);
  font-weight: 500;
  cursor: default;
}
.t-breadcrumb-segment--current:hover { background: transparent; }
.t-breadcrumb-sep {
  color: var(--ink-subtle);
  font-size: 11px;
  user-select: none;
}

/* ---------- Library toolbar (Phase 3 Chunk B2) ---------- */

.t-library-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.t-library-toolbar-spacer { flex: 1 1 auto; }
.t-library-search {
  position: relative;
  flex: 0 1 300px;
  min-width: 180px;
}
.t-library-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-mute);
  pointer-events: none;
}
.t-library-search input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.t-library-search input:focus { border-color: var(--accent); }
.t-library-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--ink-subtle);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><line x1='3' y1='3' x2='13' y2='13' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='13' y1='3' x2='3' y2='13' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><line x1='3' y1='3' x2='13' y2='13' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='13' y1='3' x2='3' y2='13' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/contain no-repeat;
  cursor: pointer;
}

.t-view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}
.t-view-toggle-btn {
  width: 32px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.t-view-toggle-btn:hover { background: var(--panel-tint); color: var(--ink); }
.t-view-toggle-btn--active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.t-view-toggle-btn--active:hover { background: var(--accent-soft); }
.t-view-toggle-btn + .t-view-toggle-btn { border-left: 1px solid var(--border); }

.t-library-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.t-library-sort select {
  padding: 6px 24px 6px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><polyline points='3,5 6,8 9,5' fill='none' stroke='%238E8478' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
}
.t-library-sort select:focus { outline: none; border-color: var(--accent); }

/* ---------- List view (Phase 3 Chunk B2) ---------- */

.t-library-grid--list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  overflow: hidden;
}
.t-library-grid--list .t-project-card {
  flex-direction: row;
  align-items: center;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: none;
  padding: 8px 14px 8px 8px;
  gap: 12px;
}
.t-library-grid--list .t-project-card:last-child { border-bottom: 0; }
.t-library-grid--list .t-project-card:hover {
  transform: none;
  box-shadow: none;
  background: var(--panel-tint);
}
.t-library-grid--list .t-project-thumb {
  flex: 0 0 56px;
  height: 42px;
  border-radius: 4px;
  overflow: hidden;
}
.t-library-grid--list .t-project-thumb > .t-status-pill { display: none; }
.t-library-grid--list .t-project-body {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 0;
  overflow: hidden;
}
.t-library-grid--list .t-project-name {
  flex: 1 1 220px;
  min-width: 0;
}
.t-library-grid--list .t-project-meta-line {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
}
.t-library-grid--list .t-project-date {
  flex: 0 0 110px;
  margin-top: 0;
  text-align: right;
}
.t-library-grid--list .t-project-list-status {
  flex: 0 0 78px;
  display: flex;
  justify-content: flex-end;
}
.t-library-grid--list .t-project-kebab {
  position: static;
  opacity: 1;
  flex: 0 0 auto;
}

/* ---------- Folder tiles in the main grid (Phase 3 Chunk B2) ---------- */

.t-folder-tile {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.t-folder-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--ink-subtle);
}
.t-folder-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.t-folder-tile-glyph {
  height: 140px;
  background: linear-gradient(135deg, var(--accent-softer) 0%, var(--accent-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-folder-tile-glyph svg { color: var(--accent-ink); opacity: 0.85; }
.t-folder-tile-body {
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.t-folder-tile-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-folder-tile-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}
.t-folder-tile.t-folder-tile--drop {
  background: var(--accent-softer);
  border-color: var(--accent);
}

/* List-view variant — collapse the glyph to a small leading icon. */
.t-library-grid--list .t-folder-tile {
  flex-direction: row;
  align-items: center;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: none;
  padding: 8px 14px 8px 8px;
  gap: 12px;
}
.t-library-grid--list .t-folder-tile:hover { transform: none; box-shadow: none; background: var(--panel-tint); }
.t-library-grid--list .t-folder-tile-glyph {
  flex: 0 0 56px;
  height: 42px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent-softer) 0%, var(--accent-soft) 100%);
}
.t-library-grid--list .t-folder-tile-glyph svg { transform: scale(0.5); }
.t-library-grid--list .t-folder-tile-body {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 0;
  overflow: hidden;
}
.t-library-grid--list .t-folder-tile-name { flex: 1 1 220px; }
.t-library-grid--list .t-folder-tile-meta { flex: 0 0 auto; margin: 0; }

/* ---------- Drag & drop targets (Phase 3 Chunk B2) ---------- */

.t-project-card[draggable="true"]:active { cursor: grabbing; }
.t-project-card.t-project-card--dragging { opacity: 0.4; }
.t-folder-row.t-folder-row--drop-invalid {
  outline-color: var(--err);
  background: var(--err-soft-bg);
}

/* ---------- Reusable modal shell (Phase 5) ---------- */

.t-modal.t-modal--wide {
  width: 880px;
  min-width: 0;
  max-width: calc(100vw - 48px);
  max-height: min(80vh, 720px);
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.t-modal.t-modal--with-sidebar {
  flex-direction: row;
  align-items: stretch;
}
.t-modal-sidebar {
  flex: 0 0 200px;
  background: var(--panel-tint);
  border-right: 1px solid var(--border-soft);
  padding: 22px 12px 18px 18px;
  display: flex;
  flex-direction: column;
}
.t-modal-sidebar-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
  padding-left: 8px;
}
.t-modal-tab {
  position: relative;
  padding: 8px 12px;
  text-align: left;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.15s, color 0.15s;
}
.t-modal-tab:hover { background: var(--panel); color: var(--ink); }
.t-modal-tab--active {
  background: var(--panel);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.t-modal-tab--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.t-modal-sidebar-version {
  font-size: 10.5px;
  color: var(--ink-mute);
  padding: 0 8px;
  margin-top: 12px;
  line-height: 1.5;
}
.t-modal-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;   /* allow body to shrink + scroll inside a max-heighted modal */
  background: var(--panel);
}
.t-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 24px 8px 28px;
}
.t-modal-h { margin-top: 0; }
.t-modal-h {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.t-modal-close {
  width: 28px;
  height: 28px;
  border: 0;
  background: var(--panel-tint);
  border-radius: 6px;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.t-modal-close:hover { background: var(--accent-softer); color: var(--accent-ink); }
.t-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.t-modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-tint);
}

/* Small button variants (used inside modals). Use chained selectors so the
 * width: auto beats .t-primary's default width: 100% even though that base
 * rule appears later in the file. */
.t-primary.t-primary--sm,
.t-ghost.t-ghost--sm {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 6px;
  width: auto;
}

/* ---------- Settings sections (Phase 5 Chunk 1) ---------- */

.t-settings-section {
  padding: 18px 28px 24px;
}
.t-settings-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.t-settings-section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.t-settings-section-intro {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 0 0 14px;
}

/* Preset rows */
.t-presets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t-presets-empty {
  padding: 18px 14px;
  background: var(--panel-tint);
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-mute);
  text-align: center;
}
.t-preset-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.t-preset-row:hover { border-color: var(--ink-subtle); }
.t-preset-row--editing { background: var(--panel-tint); border-color: var(--accent-soft); }
.t-preset-star {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--panel-tint);
  color: var(--ink-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  font-size: 14px;
}
.t-preset-star--active { background: var(--accent-soft); color: var(--accent); }
.t-preset-main { flex: 1 1 auto; min-width: 0; }
.t-preset-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.t-preset-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.t-preset-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-preset-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 6px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.t-preset-badge--modified {
  background: var(--warn-soft);
  color: var(--warn-soft-ink);
}
.t-preset-kebab {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.t-preset-kebab:hover { background: var(--panel-tint); }

/* Inline edit row */
.t-preset-edit-fields {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t-preset-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Save current form */
.t-presets-save-form {
  margin-bottom: 14px;
  padding: 14px 14px 12px;
  background: var(--panel-tint);
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t-presets-save-form-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.t-presets-save-form-label {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.t-presets-save-form .t-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
}
.t-presets-save-form .t-input:focus { border-color: var(--accent); }
.t-presets-save-form-summary {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.t-presets-save-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* I/O footer (Export all / Import) */
.t-presets-io {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 8px;
}

/* About tab */
.t-settings-about {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 24px 28px;
}
.t-settings-about-mark {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 80px;
  color: var(--accent);
}
.t-settings-about-body { flex: 1 1 auto; }
.t-settings-about-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.t-settings-about-build {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.t-settings-about-desc {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 12px 0 0;
}
.t-settings-about-links {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* Coming-soon tab placeholder */
.t-tab-coming-soon {
  padding: 80px 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ---------- Units & theme tab (Phase 5 SF1 Chunk 4) ---------- */

.t-segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--panel);
}
.t-segmented-btn {
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.t-segmented-btn:hover { background: var(--panel-tint); color: var(--ink); }
.t-segmented-btn--active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.t-segmented-btn--active:hover { background: var(--accent-soft); }
.t-segmented-btn + .t-segmented-btn { border-left: 1px solid var(--border); }

.t-coming-soon-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- Machine tab (Phase 5 SF1 Chunk 3) ---------- */

.t-machine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.t-machine-card {
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s, border-color 0.15s;
}
.t-machine-card:hover { background: var(--panel-hi); }
.t-machine-card--active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.t-machine-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.t-machine-card-label {
  font-size: 13px;
  font-weight: 500;
}
.t-machine-card-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.t-machine-card-specs {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.t-machine-card--active .t-machine-card-specs { color: var(--accent-ink); }

/* ---------- Defaults tab (Phase 5 SF1 Chunk 2) ---------- */

.t-defaults-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.t-defaults-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.t-defaults-label {
  flex: 1 1 auto;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.t-defaults-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.t-defaults-input,
.t-defaults-select {
  width: 90px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
}
.t-defaults-select { width: auto; min-width: 120px; cursor: pointer; }
.t-defaults-input:focus,
.t-defaults-select:focus { border-color: var(--accent); }
.t-defaults-suffix {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}

.t-defaults-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 8px 0 4px;
}

/* CSS-only iOS-style toggle. Hides the native checkbox + uses a sibling
 * <span> as the track. Used in Defaults + Data tabs. */
.t-defaults-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
  flex: 0 0 auto;
}
.t-defaults-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.t-defaults-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.15s;
}
.t-defaults-toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s;
}
.t-defaults-toggle input:checked + .t-defaults-toggle-slider { background: var(--accent); }
.t-defaults-toggle input:checked + .t-defaults-toggle-slider::before { transform: translateX(16px); }

.t-defaults-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}

/* ---------- Data tab (Phase 5 SF1 Chunk 2) ---------- */

.t-data-privacy-banner {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--accent-softer);
  color: var(--accent-ink);
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--accent-soft);
  margin-bottom: 16px;
}

.t-data-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.t-data-toggle-left { flex: 1 1 auto; }
.t-data-toggle-label {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
}
.t-data-toggle-hint {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}

.t-data-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 12px 0;
}

.t-data-storage-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.t-data-storage-text { flex: 1; min-width: 0; }
.t-data-storage-label { font-size: 12.5px; color: var(--ink); }
.t-data-storage-sub {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 1px;
  font-family: var(--font-mono);
}
.t-data-storage-bar {
  width: 140px;
  height: 6px;
  background: var(--panel-tint);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  overflow: hidden;
  flex: 0 0 auto;
}
.t-data-storage-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

.t-data-clear-row {
  display: flex;
  justify-content: flex-start;
}
.t-data-danger-btn {
  padding: 8px 14px;
  border: 1px solid var(--err-soft-border);
  border-radius: 6px;
  background: transparent;
  color: var(--err);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.t-data-danger-btn:hover {
  background: var(--err-soft-bg);
  border-color: var(--err);
}

/* ---------- Sheet preview modal (Phase 5 Chunk 2) ---------- */

.t-sheet-preview-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.t-sheet-preview-titles { min-width: 0; }
.t-sheet-preview-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 4px;
  white-space: nowrap;
}
.t-sheet-preview-sub {
  font-size: 12.5px;
  color: var(--ink-dim);
  margin: 4px 0 0;
}

.t-sheet-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  background: var(--panel-tint);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 3px;
  align-self: flex-start;
  max-width: 100%;
}
.t-sheet-selector-sep {
  width: 1px;
  height: 18px;
  background: var(--border-soft);
  margin: 0 2px;
}
.t-sheet-selector-btn {
  padding: 5px 10px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.t-sheet-selector-btn:hover { background: var(--panel); color: var(--ink); }
.t-sheet-selector-btn--active {
  background: var(--accent);
  color: #fff;
}
.t-sheet-selector-btn--active:hover { background: var(--accent); color: #fff; }

.t-sheet-preview-body {
  padding: 24px 28px;
  background: var(--panel-tint);
}

.t-sheet-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}
/* The sheet-preview modal is the only wide modal that benefits from filling the
 * screen vertically (so a single sheet renders large). Override the shared
 * .t-modal--wide cap of min(80vh, 720px) for it alone via :has() — the Settings
 * modal keeps the smaller cap. */
.t-modal--wide:has(.t-sheet-preview-header) {
  max-height: 88vh;
}
.t-sheet-single {
  max-width: min(100%, 840px);
  margin: 0 auto 18px;
  display: flex;
  justify-content: center;
}
.t-sheet-single .t-sheet-canvas {
  /* Definite height (not max-height) so aspect-ratio can resolve the width —
   * the placements are absolutely positioned and contribute no intrinsic size,
   * so without a definite dimension the canvas collapsed to 0 and the single
   * sheet rendered blank. min-height is the short-viewport floor; the 840px
   * ceiling matches the wrap's max-width so a square sheet stays square
   * (width = height ≤ 840) instead of stretching tall on big screens. ~220px
   * reserves the modal header (pill row), footer, validation row, and padding;
   * the modal is raised to 88vh (rule above) so this taller canvas isn't
   * clipped/scrolled. */
  height: min(840px, calc(88vh - 220px));
  min-height: 320px;
  width: auto;
  max-width: 100%;
}

.t-sheet-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t-sheet-canvas {
  position: relative;
  background: var(--sheet-paper);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(0deg, var(--border-soft) 0, var(--border-soft) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, var(--border-soft) 0, var(--border-soft) 1px, transparent 1px, transparent 20px);
}
.t-sheet-canvas-margin {
  position: absolute;
  border: 1px dashed var(--ink-subtle);
  border-radius: 3px;
  opacity: 0.5;
  pointer-events: none;
}
.t-sheet-placement {
  position: absolute;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-softer);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
}
.t-sheet-card--compact .t-sheet-placement {
  border-width: 1px;
  border-radius: 2px;
  box-shadow: none;
}
/* Show-cut-lines mode: multi-piece board pieces get a dashed blue outline so
 * the user can spot which tiles will mate with other tiles. Blue matches the
 * 3D preview's board-cut color (vs the red used for slice cuts). Outline
 * (not border) so it doesn't shift the rect's layout. */
.t-sheet-placement--cut-line {
  outline: 2px dashed #3B82F6;
  outline-offset: -1px;
}
.t-sheet-card--compact .t-sheet-placement--cut-line {
  outline-width: 1.5px;
}
/* Real-outline mode (Show outlines toggle): an SVG overlay drawing each
 * placement's true cut silhouette + holes, plus centered number labels. */
.t-sheet-outline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.t-sheet-outline-outer {
  fill: var(--accent-softer);
  stroke: var(--accent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.t-sheet-outline-hole {
  fill: var(--sheet-paper);
  stroke: var(--accent);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
  opacity: 0.75;
}
.t-sheet-outline-engrave {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.t-sheet-outline-num {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.t-sheet-card--compact .t-sheet-outline-num {
  font-size: 8px;
  padding: 0 3px;
}
.t-sheet-outline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-dim);
  cursor: pointer;
  margin-left: 14px;
  white-space: nowrap;
}
.t-sheet-outline-toggle input { accent-color: var(--accent); cursor: pointer; }

.t-sheet-placement-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
  background: rgba(255,255,255,0.85);
  padding: 2px 6px;
  border-radius: 3px;
  /* Tile labels can be longer (#12-R3C2) than non-tile (#3); contain them. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-sheet-card--compact .t-sheet-placement-num {
  font-size: 8px;
  padding: 0 3px;
}
.t-sheet-card-caption {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}

.t-sheet-validation-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  padding-top: 6px;
}
.t-sheet-validation-sep { color: var(--ink-subtle); }

.t-sheet-oversized-banner {
  background: var(--warn-soft);
  color: var(--warn-soft-ink);
  border: 1px solid var(--warn);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 16px;
}

.t-sheet-preview-empty {
  padding: 40px 14px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
}

.t-sheet-preview-footer-stats {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-dim);
}

/* ---------- Export done modal (Phase 5 Chunk 2) ---------- */

.t-export-done-hero {
  padding: 32px 32px 8px;
  text-align: center;
}
.t-export-done-check {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.t-export-done-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}
.t-export-done-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.t-export-done-desc {
  font-size: 13.5px;
  color: var(--ink-dim);
  margin: 8px auto 0;
  max-width: 380px;
  line-height: 1.55;
}

.t-export-done-filecard {
  margin: 20px 24px 0;
  padding: 14px 16px;
  background: var(--panel-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.t-export-done-zip {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--accent);
  flex: 0 0 44px;
}
.t-export-done-file-meta { flex: 1 1 auto; min-width: 0; }
.t-export-done-file-name {
  font-size: 13px;
  font-weight: 500;
  word-break: break-all;
  line-height: 1.35;
}
.t-export-done-file-line {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.t-export-done-dl {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.t-export-done-tip {
  margin: 14px 24px 24px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--accent-softer);
  border: 1px solid var(--accent-soft);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.t-export-done-tip-star {
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}
.t-export-done-tip-body {
  font-size: 11.5px;
  color: var(--accent-ink);
  line-height: 1.5;
}

/* ---------- BadSTL modal (Phase 5 Sub-Feature 3) ---------- */

.t-badstl-hero {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 32px 18px;
}
.t-badstl-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--err-soft-bg);
  color: var(--err);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
}
.t-badstl-titles { flex: 1; min-width: 0; }
.t-badstl-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--err);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}
.t-badstl-h {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.t-badstl-h em {
  font-style: italic;
  color: var(--accent);
}
.t-badstl-body {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 8px 0 0;
}

.t-badstl-diag {
  background: var(--panel-tint);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 32px 18px;
}
.t-badstl-diag-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.t-badstl-diag-empty {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.t-badstl-diag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.t-badstl-issue {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.t-badstl-issue-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  flex: 0 0 8px;
  margin-top: 7px;
}
.t-badstl-issue--high   .t-badstl-issue-dot { background: var(--err); }
.t-badstl-issue--medium .t-badstl-issue-dot { background: var(--warn); }
.t-badstl-issue--low    .t-badstl-issue-dot { background: var(--ink-mute); }
.t-badstl-issue-main { flex: 1; min-width: 0; }
.t-badstl-issue-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.t-badstl-issue-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.t-badstl-issue-count {
  font-family: var(--font-mono);
  font-size: 11px;
}
.t-badstl-issue--high   .t-badstl-issue-count { color: var(--err); }
.t-badstl-issue--medium .t-badstl-issue-count { color: var(--warn); }
.t-badstl-issue--low    .t-badstl-issue-count { color: var(--ink-mute); }
.t-badstl-issue-detail {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 1px;
  line-height: 1.5;
}
.t-badstl-issue-sev {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  flex: 0 0 auto;
}
.t-badstl-issue--high   .t-badstl-issue-sev { color: var(--err); }
.t-badstl-issue--medium .t-badstl-issue-sev { color: var(--warn); }
.t-badstl-issue--low    .t-badstl-issue-sev { color: var(--ink-mute); }

.t-badstl-repair {
  background: var(--accent-softer);
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 32px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.t-badstl-repair-star {
  font-size: 18px;
  color: var(--accent);
}
.t-badstl-repair-body {
  flex: 1;
  font-size: 13px;
  color: var(--accent-ink);
  line-height: 1.5;
}

.t-badstl-text-btn {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.t-badstl-text-btn:hover { background: var(--panel-tint); color: var(--ink); }

/* ---------- ScaleAssistant modal (Phase 5 Sub-Feature 3) ---------- */

.t-scale-hero {
  padding: 24px 28px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.t-scale-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}
.t-scale-h {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.t-scale-h em {
  color: var(--accent);
  font-style: italic;
}
.t-scale-body {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 6px 0 0;
}
.t-scale-dims { font-family: var(--font-mono); }

.t-scale-strategies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 28px 18px;
}
.t-scale-strategy {
  padding: 12px 14px;
  text-align: left;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-tint);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: var(--font-body);
}
.t-scale-strategy:hover { background: var(--panel-hi); }
.t-scale-strategy--active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.t-scale-strategy-label { font-size: 13px; font-weight: 500; }
.t-scale-strategy-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.t-scale-strategy--active .t-scale-strategy-hint { color: var(--accent-ink); }

.t-scale-body-region {
  padding: 0 28px 4px;
}
.t-scale-slider-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
/* value + Fit button group on the right, label stays left */
.t-scale-slider-row .t-scale-slider-value { margin-left: auto; }
.t-scale-slider-label { font-size: 12.5px; color: var(--ink-dim); }
.t-scale-slider-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-ink);
  font-weight: 600;
}
.t-scale-slider {
  width: 100%;
  accent-color: var(--accent);
  margin-bottom: 6px;
}
.t-scale-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
}

.t-scale-visual {
  margin-top: 12px;
  background: var(--panel-tint);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 12px;
}
.t-scale-visual svg {
  width: 100%;
  height: 200px;
  display: block;
}

.t-scale-fit {
  margin: 10px 0 16px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--accent-softer);
  border: 1px solid var(--accent-soft);
  color: var(--accent-ink);
  font-size: 12px;
  line-height: 1.5;
}
.t-scale-fit--no {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: var(--warn-soft-ink);
}

/* Target-dimension boxes (X/Y/Z) inside the scale modal */
.t-scale-dims-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
  flex-wrap: wrap;
}
.t-scale-dims-label { font-size: 12.5px; color: var(--ink-dim); flex: 0 0 auto; }
.t-scale-dim-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
}
.t-scale-dim-field .t-input { width: 64px; }
.t-scale-dim-unit { color: var(--ink-mute); font-size: 11px; }

/* "Fit model to sheet" + "Scale…" buttons inside the Sheet & material card */
.t-scale-fit-row {
  display: flex;
  gap: 8px;
  padding: 6px 0 2px;
}
.t-scale-fit-row .t-ghost { flex: 1 1 auto; }

.t-scale-coming-soon {
  margin: 0 0 16px;
  padding: 18px 16px;
  border-radius: 8px;
  background: var(--panel-tint);
  border: 1px dashed var(--border);
  color: var(--ink-mute);
  text-align: center;
}
.t-scale-coming-soon-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.t-scale-coming-soon-body {
  font-size: 12.5px;
  line-height: 1.5;
}

.t-scale-footer-hint {
  font-size: 11.5px;
  color: var(--ink-mute);
}
.t-scale-footer-mono { font-family: var(--font-mono); }

/* ---------- Slicing progress modal (Phase 5 Sub-Feature 4) ---------- */

.t-progress-hero {
  padding: 24px 28px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.t-progress-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 6px;
}
.t-progress-h {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.t-progress-h em {
  font-style: italic;
  color: var(--accent);
}
.t-progress-sub {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 6px 0 0;
}

.t-progress-block {
  padding: 20px 28px 26px;
}
.t-progress-numbers {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.t-progress-pct {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.t-progress-pct-n { font-size: 32px; }
.t-progress-pct-mark {
  font-size: 20px;
  color: var(--ink-mute);
  margin-left: 2px;
}
.t-progress-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.t-progress-bar {
  height: 6px;
  background: var(--panel-tint);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  overflow: hidden;
}
.t-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 3px;
  transition: width 0.15s linear;
}

/* ---------- Folder delete modal (Phase 3 Chunk B1) ---------- */

.t-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 21, 18, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
}
.t-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px 26px;
  min-width: 380px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.t-modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.t-modal-body {
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0;
  line-height: 1.5;
}
.t-modal-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t-modal-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-tint);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.t-modal-option:hover { background: var(--panel-hi); border-color: var(--ink-subtle); }
.t-modal-option input[type="radio"] { margin-top: 3px; }
.t-modal-option-label { font-size: 13px; color: var(--ink); font-weight: 500; }
.t-modal-option-hint  { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.t-modal-confirm-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 7px 9px;
  font-family: var(--font-body);
  font-size: 13px;
  background: var(--panel);
  color: var(--ink);
  outline: none;
}
.t-modal-confirm-input:focus { border-color: var(--accent); }
.t-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}


/* ---------- Editor shell ---------- */

#editor {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#viewport {
  position: absolute;
  inset: 0;
  background: var(--viewport-bg);
  overflow: hidden;
  z-index: 0;
}
#viewport canvas { display: block; }

/* Custom scrollbar everywhere inside the app */
.t-app ::-webkit-scrollbar { width: 8px; height: 8px; }
.t-app ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.t-app ::-webkit-scrollbar-thumb:hover { background: var(--ink-subtle); }
.t-app ::-webkit-scrollbar-track { background: transparent; }

/* Native form widgets inherit family by default */
.t-app input,
.t-app select,
.t-app button,
.t-app option { font-family: inherit; }

/* Focus rings */
.t-app input:focus,
.t-app select:focus,
.t-app button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Left column (brand / preset / issues stack) ---------- */

.t-left-column {
  position: absolute;
  top: 16px;
  left: 16px;
  bottom: 116px;    /* leaves room for the action bar (Chunk C) */
  width: 400px;     /* widened so brand panel filename + dims + build chip fit on one row */
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
  pointer-events: none;     /* allows clicks to pass through gaps to viewport */
}
.t-left-column > * { pointer-events: auto; }

.t-brand-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.t-brand-filename {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 4px;
  margin: -1px -4px;
  border-radius: 4px;
  outline: none;
}
.t-brand-filename--editable {
  cursor: text;
  transition: background 0.15s;
}
.t-brand-filename--editable:hover {
  background: var(--panel-tint);
}
.t-brand-filename--editable:focus {
  background: var(--panel-tint);
  box-shadow: 0 0 0 2px var(--accent);
}

/* Project + size card under the logo. Stacks a project header (name + status +
 * Scale…), a sub-row (build + last-updated), and the overall-piece size readout
 * (slices / width / height / depth) as four compact stat cells in a row. */
.t-size-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 10px 12px;
}
.t-project-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.t-project-head .t-brand-filename {
  flex: 1 1 0;        /* grow + ellipsize the name; pills/button stay at natural size */
}
.t-project-head .t-status-pill,
.t-project-head #brand-scale-btn {
  flex: 0 0 auto;
}
.t-project-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.t-project-updated {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}
.t-size-stats {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
}
.t-size-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}
.t-size-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.t-size-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.t-size-material {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
}
.t-size-material-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-size-material-stats {
  display: flex;
  gap: 6px;
}

/* ---------- Top-right toolbar (Library / New / Settings) ---------- */

.t-toolbar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.t-toolbar-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.t-toolbar-btn:hover { background: var(--panel-tint); color: var(--ink); }
.t-toolbar-btn svg { width: 18px; height: 18px; stroke-width: 1.8; }
.t-toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border-soft);
  margin: 0 2px;
}

/* ---------- Right rail ---------- */

.t-rail {
  position: absolute;
  top: 64px;             /* below the toolbar */
  right: 16px;
  bottom: 116px;         /* above the action bar (Chunk C) */
  width: 340px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
}

/* Sticky chip strip at top of rail. Click a chip → scroll to + open that card.
 * Wraps to a second row when more chips than fit on one line (with 6+ chips
 * + longer labels like "Calibrate", a single row clips on a 340px rail). */
.t-section-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex: 0 0 auto;
}
.t-section-chip {
  /* Allow chips to size to content + grow to fill leftover row space, but
   * not shrink below a readable minimum (forces wrap before clipping). */
  flex: 1 1 auto;
  min-width: 56px;
  padding: 6px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.t-section-chip:hover { background: var(--panel-tint); color: var(--ink); }
.t-section-chip svg { width: 12px; height: 12px; stroke-width: 2; color: var(--accent); flex: 0 0 12px; }

/* The action button stack at the bottom of the rail (Chunk A puts Slice + Export here;
   Chunk C moves them to the bottom action bar). */
.t-rail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

/* ---------- Preset panel (segmented control + advanced toggle) ---------- */

.t-preset-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

.t-preset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.t-preset-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.t-preset-options {
  display: flex;
  background: var(--panel-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.t-preset-option {
  flex: 1;
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.t-preset-option:hover { color: var(--ink); }
.t-preset-option--active {
  background: var(--accent);
  color: #fff;
}

.t-adv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.t-adv-label {
  font-size: 12px;
  color: var(--ink);
}
.t-adv-label small {
  display: block;
  font-size: 10.5px;
  color: var(--ink-mute);
  margin-top: 1px;
}

.t-preset-tip {
  background: var(--accent-softer);
  color: var(--accent-ink);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.5;
}
.t-preset-tip em { font-style: normal; font-weight: 600; }

/* ---------- Issues banner ---------- */

.t-issues-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.t-issues-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.t-issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: 12px;
  line-height: 1.4;
}
.t-issue--info  { background: var(--panel); border-color: var(--border); color: var(--ink); }
.t-issue--warn  { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-soft-ink); }
.t-issue--error { background: var(--err-soft-bg); border-color: var(--err); color: var(--err-soft-ink); }

.t-issue-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: rgba(0,0,0,0.06);
  margin-top: 1px;
}
.t-issue--warn  .t-issue-icon { background: rgba(201, 122, 45, 0.20); }
.t-issue--error .t-issue-icon { background: rgba(178, 58, 44, 0.18); }

.t-issue-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.t-issue-title {
  font-size: 12.5px;
  font-weight: 600;
}
.t-issue-body {
  font-size: 11.5px;
  opacity: 0.85;
}
.t-issue-action {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 2px;
}

.t-issue-dismiss {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.t-issue-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* ---------- Toast (transient status) ---------- */

.t-toast {
  position: fixed;
  bottom: 112px;   /* clear the bottom action bar (~86px tall at bottom:16px) */
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 200;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  max-width: 80vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.t-toast--warn { background: var(--warn); }
.t-toast--error { background: var(--err); }
.t-toast--success { background: var(--ok); }

/* ---------- Cards ---------- */

.t-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow 0.18s;
}
.t-card.t-card--open { box-shadow: var(--shadow); }

.t-card--accent {
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--accent-softer);
}

/* Card title row — also the clickable expand/collapse handle. */
.t-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  outline-offset: -2px;
}
.t-card-title:hover { background: var(--panel-tint); }

.t-card-title-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}
.t-card-title-icon svg { width: 16px; height: 16px; stroke-width: 2; }
.t-card-title-label {
  flex: 1;
  /* min-width:0 lets the label shrink in the flex row instead of pushing
   * the pin button + chevron off the right edge when the title is long. */
  min-width: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.005em;
  line-height: 1.15;
}
/* Subtitle drops to its own line below the main title so longer descriptors
 * (e.g. "flat backing board") never crowd the title or get truncated by the
 * adjacent pin / chevron buttons. */
.t-card-title-label small {
  display: block;
  margin-left: 0;
  margin-top: 1px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 400;
  line-height: 1.2;
}

/* Summary chip (one-line status snippet shown in collapsed cards). */
.t-card-title-summary {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Pin button — keeps the card open across sibling-card open events.
   Filled accent when active, faded ink-mute outline otherwise. */
.t-card-pin {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  opacity: 0.45;
}
.t-card-title:hover .t-card-pin { opacity: 0.8; }
.t-card-pin:hover { background: var(--panel-tint); opacity: 1; }
.t-card-pin svg { width: 12px; height: 12px; stroke-width: 2; }
.t-card--pinned .t-card-pin {
  color: var(--accent);
  opacity: 1;
}
.t-card--pinned .t-card-pin svg { fill: var(--accent); }

/* Chevron — rotates 180° when card is open. */
.t-card-chevron {
  color: var(--ink-mute);
  transition: transform 0.18s;
  flex: 0 0 14px;
  transform: rotate(180deg);   /* collapsed = chevron points UP */
}
/* Direct-child path so an open card only rotates ITS OWN chevron — not the
 * chevrons of nested sub-cards (e.g. Receiver Board inside Mounting), which
 * would otherwise flip whenever the parent card is open. Open = points DOWN
 * (toward the revealed body). */
.t-card--open > .t-card-title > .t-card-chevron { transform: rotate(0deg); }

/* Card body — visible when card is open, hidden when collapsed. */
.t-card-body {
  padding: 4px 14px 14px 14px;
  border-top: 1px solid var(--border-soft);
  animation: t-fade-in 0.2s ease-out both;
}
.t-card--collapsed .t-card-body { display: none; }

@keyframes t-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Helper paragraph inside a card body. Smaller, muted, sits above the first
 * field/button without bumping into the card top. */
.t-card-help {
  margin: 4px 0 10px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft, var(--ink));
  opacity: 0.85;
}

/* Calibration card SVG preview frame — fills the card width, scales SVG to fit. */
.t-calibration-preview {
  margin: 0 0 10px 0;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm, 6px);
  background: #FFFFFF;
  overflow: hidden;
  line-height: 0;
}
.t-calibration-preview svg {
  width: 100%;
  height: auto;
  max-height: 240px;
  display: block;
}

/* Nested card (Keyhole inside Mounting). Smaller scope. */
.t-card .t-card {
  margin-top: 10px;
  box-shadow: none;
  background: var(--panel-tint);
}
.t-card .t-card .t-card-title { padding: 10px 12px; }
.t-card .t-card .t-card-body { padding: 4px 12px 12px 12px; }

/* ---------- Fields ---------- */

.t-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
}
.t-field-label {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.t-field-label small {
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 400;
}

.t-hint {
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.4;
  margin: 6px 0 0 0;
}

/* Thin horizontal divider between subsections inside a card body. */
.t-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 10px 0 4px 0;
}

/* ---------- Inputs ---------- */

.t-input {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  text-align: right;
  width: 76px;
}
.t-input--text {
  font-family: var(--font-body);
  font-size: 12px;
  text-align: left;
  width: 140px;
}

.t-input-suffix {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel);
}
.t-input-suffix .t-input {
  border: 0;
  border-radius: 0;
  width: 64px;
}
.t-input-suffix-tag {
  padding: 5px 7px;
  background: var(--panel-tint);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 10.5px;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--border-soft);
}

.t-input::-webkit-outer-spin-button,
.t-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.t-input[type="number"] { -moz-appearance: textfield; }

/* ---------- Select ---------- */

.t-select {
  padding: 5px 24px 5px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--panel);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><polyline points='2,4 5,7 8,4' fill='none' stroke='%238E8478' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 7px center;
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 96px;
}

/* ---------- Toggle ---------- */

.t-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  width: 30px;
  height: 18px;
}
.t-toggle input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.t-toggle-track {
  width: 30px;
  height: 18px;
  border-radius: 10px;
  background: var(--border);
  display: flex;
  align-items: center;
  padding: 2px;
  transition: background 0.18s;
}
.t-toggle-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 0.18s;
}
.t-toggle input:checked ~ .t-toggle-track { background: var(--accent); }
.t-toggle input:checked ~ .t-toggle-track .t-toggle-thumb { transform: translateX(12px); }

/* ---------- File input ---------- */

.t-file {
  font-size: 11px;
  color: var(--ink-dim);
  font-family: var(--font-body);
  max-width: 180px;
}
.t-file::-webkit-file-upload-button {
  background: var(--panel-tint);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-family: inherit;
  font-size: 11px;
  margin-right: 6px;
  cursor: pointer;
}

/* ---------- Buttons ---------- */

.t-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-press);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  width: 100%;
}
.t-primary:hover { background: var(--accent-hi); }
.t-primary:active { transform: scale(0.98); }
.t-primary:disabled {
  background: var(--border);
  color: var(--ink-mute);
  cursor: not-allowed;
  box-shadow: none;
}

.t-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel-tint);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.t-ghost:hover { background: var(--panel-hi); border-color: var(--ink-subtle); }
.t-ghost:active { transform: scale(0.98); }
.t-ghost:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Pills ---------- */

.t-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.t-pill--mono {
  font-family: var(--font-mono);
  background: var(--accent-softer);
  font-size: 10.5px;
}
.t-pill--neutral {
  background: var(--panel-tint);
  color: var(--ink-dim);
}

/* ---------- Wordmark (used inside brand panel) ---------- */

.t-wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.t-wordmark-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--ink);
}
.t-wordmark-sub {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 3px;
}

/* ---------- Bottom action bar + slice scrubber (Chunk C) ---------- */

.t-action-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.t-action-bar--busy .t-scrub-meta-count::after {
  content: ' · slicing…';
  color: var(--accent);
  font-weight: 500;
}

.t-action-bar-scrubber {
  flex: 1;
  min-width: 0;
}

.t-scrub-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.t-scrub-meta-count {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.t-scrub-meta-each,
.t-scrub-meta-total {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}

.t-scrubber {
  position: relative;
}

.t-scrub-track {
  position: relative;
  height: 42px;
  cursor: pointer;
  touch-action: none;     /* prevent scrolling while dragging on touch */
}

.t-scrub-track-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 4px;
  background: var(--border-soft);
  border-radius: 2px;
}

.t-scrub-fill {
  position: absolute;
  left: 0;
  width: 0%;
  top: 11px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.15s;
  pointer-events: none;
}

.t-scrub-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 14px;
  pointer-events: none;
}
.t-scrub-tick {
  position: absolute;
  top: 0;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: var(--border);
  transform: translateX(-50%);
}
.t-scrub-tick--active { background: var(--accent); }
.t-scrub-tick.t-scrub-tick--major { height: 18px; }
.t-scrub-tick-label {
  position: absolute;
  top: 18px;
  transform: translateX(-50%);
  font-size: 9px;
  line-height: 1;
  color: var(--ink-mute);
  white-space: nowrap;
  pointer-events: none;
}

.t-scrub-thumb {
  position: absolute;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-soft);
  transform: translateX(-50%);
  transition: left 0.1s;
  pointer-events: none;
}

.t-scrub-tooltip {
  position: absolute;
  bottom: 30px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

.t-action-bar-divider {
  width: 1px;
  height: 44px;
  background: var(--border);
  flex: 0 0 1px;
}

.t-action-bar-sheets {
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
  margin-right: 8px;
}

.t-action-bar-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.t-action-bar-buttons .t-primary,
.t-action-bar-buttons .t-ghost {
  width: auto;
}

.t-action-bar-explode {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-sub);
}
.t-action-bar-explode-label {
  font-weight: 500;
}
.t-action-bar-explode input[type="range"] {
  width: 120px;
}
.t-action-bar-explode-value {
  font-family: var(--font-mono);
  min-width: 44px;
  text-align: right;
}

.t-action-bar-cutlines {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-sub);
}
.t-action-bar-cutlines-label {
  font-weight: 500;
}

/* Inline-size toggle variant (smaller than the in-card toggle, sits next to
 * a label on the same line). Used in the bottom action bar. */
.t-toggle.t-toggle--inline { transform: scale(0.85); transform-origin: left center; }

/* ---------- Mobile drawers (FAB-triggered side sheets) ---------- */
/* Desktop: FABs + backdrop are hidden; the rail and left column stay as the
 * always-visible floating panels defined above. Under the breakpoint they
 * become full-height side sheets that slide in from each edge. */
.t-fab { display: none; }
.t-drawer-backdrop { display: none; }

@media (max-width: 768px) {
  /* Left column + right rail become full-height side sheets. They keep their
   * absolute positioning but pin to the screen edges and slide off-screen via
   * transform until their drawer class is set on #editor. */
  .t-left-column,
  .t-rail {
    top: 0;
    bottom: 0;
    width: min(360px, 88vw);
    z-index: 7;
    background: var(--bg);
    box-shadow: var(--shadow);
    padding: 14px 12px;
    overflow-y: auto;
    pointer-events: auto;
    transition: transform 0.28s ease;
  }
  .t-left-column { left: 0; transform: translateX(-100%); }
  .t-rail        { right: 0; transform: translateX(100%); }
  #editor.t-drawer-left  .t-left-column { transform: translateX(0); }
  #editor.t-drawer-right .t-rail        { transform: translateX(0); }

  /* Dim backdrop behind an open drawer; tapping it closes the drawer (JS). */
  .t-drawer-backdrop {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: rgba(0, 0, 0, 0.45);
  }
  #editor.t-drawer-left  .t-drawer-backdrop,
  #editor.t-drawer-right .t-drawer-backdrop { display: block; }

  /* Floating buttons centered on each side edge. Each opens the drawer that
   * slides from its side. They sit below the backdrop, so an open drawer's
   * backdrop covers them — close via the backdrop, then open the other side. */
  .t-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    z-index: 5;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
  }
  .t-fab svg { width: 20px; height: 20px; stroke-width: 1.8; }
  .t-fab--left  { left: 12px; }
  .t-fab--right { right: 12px; }

  /* Let the bottom action-bar controls wrap instead of overflowing a phone. */
  .t-action-bar { flex-wrap: wrap; gap: 10px; }
}

/* ---------- Drop overlay ---------- */

#dropOverlay {
  position: fixed;
  inset: 0;
  background: var(--accent-softer);
  border: 4px dashed var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--accent-ink);
  z-index: 100;
  pointer-events: none;
}
#dropOverlay[hidden] { display: none; }

/* ---------- Reduce motion (Phase 5 SF1 Chunk 4) ---------- */
/* User toggle in Settings → Units & theme. Explicit ON forces reduce;
 * explicit OFF forces normal; absent attribute = follow OS via the
 * @media (prefers-reduced-motion: reduce) block below. */

:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after {
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduce-motion="false"]) *,
  :root:not([data-reduce-motion="false"]) *::before,
  :root:not([data-reduce-motion="false"]) *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ScaleAssistant — Keep-size strategy panel (Polish 2026-05-16f) */
.t-scale-keep-grid {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.t-scale-keep-grid svg {
  width: 100%;
  max-width: 360px;
  height: auto;
}
.t-scale-keep-callout {
  margin-top: 12px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-mute);
}
.t-scale-keep-callout strong {
  color: var(--ink);
  font-weight: 600;
}

/* Export / import bundle row in Data tab (Polish 2026-05-16i) */
.t-data-backup-row {
  display: flex;
  gap: 8px;
  padding: 0 0 12px 0;
}
.t-data-backup-row .t-ghost { flex: 0 0 auto; }

/* Tile joinery subsection in Settings → Machine (Phase 2 2026-05-17) */
.t-settings-subhead {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.t-settings-subhead-intro {
  margin: 4px 0 8px 0;
  font-size: 12px;
  color: var(--ink-mute);
}

/* Tessera Phase 4a — Receiver Board / Mounting mode UI */

.t-mounting-mode-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--panel-tint));
  border: 1px solid var(--border-soft));
}

.t-mounting-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ink);
  transition: background 80ms ease;
}

.t-mounting-radio:hover {
  background: var(--accent-softer));
}

.t-mounting-radio input[type="radio"] {
  accent-color: var(--accent);
}

.t-mounting-radio-icon {
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.t-mounting-radio-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }

.t-mounting-radio-label {
  flex: 1;
}

.t-mounting-branch {
  margin-top: 8px;
}

.t-receiver-info-pill {
  display: block;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 5px;
  background: var(--accent-softer));
  border: 1px solid var(--accent-soft));
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
}

.t-receiver-warning-pill {
  display: block;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 5px;
  background: var(--warn-soft);
  border: 1px solid #E8C797;
  color: #7A4310;
  font-size: 11.5px;
  line-height: 1.45;
}

/* Material-driven thickness: read-only when a material is selected. */
.t-input--locked { opacity: 0.6; cursor: not-allowed; }

/* Viewer background picker (Workspace card) — single-purpose classes (no base/modifier chaining) */
.t-bg-controls { display: inline-flex; align-items: center; gap: 6px; }
.t-bg-color { width: 28px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: none; cursor: pointer; }
.t-bg-swatch { width: 18px; height: 18px; padding: 0; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.t-bg-reset { font-size: 11px; line-height: 1; padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; background: none; color: inherit; cursor: pointer; }