/* Quilty application styles. Components consume semantic tokens only. */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(1000px 620px at 8% -8%, color-mix(in srgb, var(--lavender-100) 45%, transparent), transparent 65%),
    radial-gradient(900px 540px at 98% 3%, color-mix(in srgb, var(--blush-100) 35%, transparent), transparent 62%),
    var(--bg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(1000px 620px at 8% -8%, rgba(119, 92, 180, 0.16), transparent 65%),
    radial-gradient(900px 540px at 98% 3%, rgba(170, 91, 116, 0.12), transparent 62%),
    var(--bg);
}
:root[data-theme="contrast"] body { background: var(--bg); }

::selection { background: var(--selection-tint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, h4, p { margin-block-start: 0; }
h1, h2, h3, h4 { line-height: 1.16; }
a { color: var(--accent); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: -100px; z-index: 1000;
  padding: 0.7rem 1rem; background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.icon { display: inline-block; vertical-align: -0.16em; flex: none; }
[data-icon] { display: inline-flex; }

/* ── App shell ─────────────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-rows: var(--header-h) auto minmax(0, 1fr) var(--status-h);
  min-height: 100dvh;
}
.app-header {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 clamp(0.8rem, 2.5vw, 2rem);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(1.2);
  position: sticky; top: 0; z-index: 30;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none; border-radius: var(--radius);
  padding: 0.25rem 0.35rem; flex: none;
}
.brand:hover .brand-word { color: var(--accent); }
.brand-mark { display: inline-flex; filter: drop-shadow(0 2px 4px rgba(47,42,58,.08)); }
.brand-word {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
  letter-spacing: -0.04em; transition: color var(--motion-fast);
}
.header-project { min-width: 0; flex: 1; display: flex; align-items: center; gap: 0.65rem; }
.project-switcher {
  display: inline-flex; align-items: center; gap: 0.55rem;
  max-width: min(38vw, 30rem); padding: 0.45rem 0.75rem;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); font-weight: 650; font-size: var(--text-sm);
}
.project-switcher:hover { background: var(--surface-muted); border-color: var(--border); }
.project-switcher .project-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-switcher .project-kicker {
  font-size: 0.68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.project-switcher .icon { color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.history-actions { display: flex; align-items: center; padding-right: 0.4rem; margin-right: 0.3rem; border-right: 1px solid var(--border); }
.command-button { width: auto !important; padding-inline: 0.55rem !important; gap: 0.2rem; }
.keycap {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 0.3rem;
  padding: 0.06rem 0.3rem; color: var(--muted); background: var(--surface-muted);
}

.worktable-tabs {
  display: flex; align-items: stretch; gap: 0.2rem;
  padding: 0 clamp(0.7rem, 2.5vw, 2rem);
  min-height: var(--tabs-h);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-bottom: 1px solid var(--border);
  position: sticky; top: var(--header-h); z-index: 25;
  backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: thin;
}
.worktable-tab {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  border: 0; background: transparent; color: var(--muted);
  padding: 0.65rem 0.9rem; min-height: 44px; border-radius: var(--radius) var(--radius) 0 0;
  font-size: var(--text-sm); font-weight: 650; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.worktable-tab:hover { color: var(--ink); background: var(--surface-muted); }
.worktable-tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-softer); }
.worktable-tab .tab-count {
  font-size: 0.68rem; min-width: 1.3rem; padding: 0.05rem 0.32rem;
  border-radius: var(--radius-pill); background: var(--surface-muted);
  color: var(--muted); text-align: center; font-weight: 700;
}
.worktable-tab[aria-current="page"] .tab-count { background: var(--accent-soft); color: var(--accent); }
.tabs-spacer { flex: 1; }
.tab-action {
  align-self: center; display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); border-radius: var(--radius-pill); padding: 0.34rem 0.7rem;
  font-size: var(--text-xs); font-weight: 700; min-height: 30px;
}
.tab-action:hover { border-color: var(--border-strong); background: var(--surface-muted); }
.tab-action.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

main { min-width: 0; min-height: 0; outline: none; }

.statusbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 clamp(0.8rem, 2.5vw, 2rem);
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.68rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; z-index: 20;
}
.status-local { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; }
.status-dot { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--mint-soft); }
.status-message { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status-save { flex: none; color: var(--muted); }
.status-save[data-status="error"] { color: var(--danger); }
.status-save[data-status="dirty"], .status-save[data-status="saving"] { color: var(--butter); }

/* ── Controls ──────────────────────────────────────────────────────────── */
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0.35rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--ink-soft);
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.icon-button:hover { background: var(--surface-muted); color: var(--ink); border-color: var(--border); }
.icon-button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.icon-button:disabled { opacity: 0.36; }
.icon-button.small { min-width: 30px; min-height: 30px; padding: 0.2rem; border-radius: var(--radius-sm); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 40px; padding: 0.55rem 0.95rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-weight: 680; font-size: var(--text-sm); text-decoration: none;
  transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.button:hover { background: var(--surface-muted); border-color: var(--border-strong); }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 24%, transparent); }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.secondary { background: var(--surface); }
.button.ghost { border-color: transparent; background: transparent; }
.button.ghost:hover { background: var(--surface-muted); }
.button.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
:root[data-theme="contrast"] .button.danger { color: #fff; }
.button.small { min-height: 30px; padding: 0.3rem 0.62rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.button.wide { width: 100%; }
.button .icon { flex: none; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.button-row.end { justify-content: flex-end; }
.button-row.between { justify-content: space-between; }
.link-button {
  border: 0; background: none; padding: 0.1rem; color: var(--accent);
  font-size: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 0.15em;
}
.link-button:hover { color: var(--accent-hover); }

.field { display: grid; gap: 0.32rem; min-width: 0; }
.field > label, .field-label { font-size: var(--text-xs); font-weight: 720; color: var(--ink-soft); letter-spacing: 0.01em; }
.field-help { font-size: var(--text-xs); color: var(--muted); margin: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.field-row.three { grid-template-columns: repeat(3, 1fr); }
.input, .select, .textarea {
  width: 100%; min-height: 38px; padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-size: var(--text-sm);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-muted); color: var(--muted); }
.textarea { min-height: 72px; resize: vertical; }
.input[type="color"] { padding: 0.16rem; width: 2.9rem; min-height: 2.4rem; cursor: pointer; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-suffix {
  display: inline-flex; align-items: center; padding: 0 0.6rem;
  border: 1px solid var(--border-strong); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-muted); color: var(--muted); font-size: var(--text-xs); font-weight: 700;
}
.check-field { display: flex; align-items: flex-start; gap: 0.65rem; min-height: 38px; padding: 0.3rem 0; }
.check-field input[type="checkbox"], .check-field input[type="radio"] { width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; accent-color: var(--accent); flex: none; }
.check-field span { font-size: var(--text-sm); }
.check-field .field-help { display: block; }
.range-row { display: flex; align-items: center; gap: 0.65rem; }
.range-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.range-value { min-width: 3.8rem; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--muted); }

.segmented {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-muted);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.segmented button {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  border-radius: calc(var(--radius) - 3px); min-height: 32px; padding: 0.28rem 0.65rem;
  font-size: var(--text-xs); font-weight: 700;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--accent); border-color: var(--border); box-shadow: var(--shadow-sm); }

.swatch {
  width: 1.5rem; height: 1.5rem; flex: none; border-radius: 0.4rem;
  background: var(--swatch, #ccc);
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.swatch.large { width: 3.4rem; height: 3.4rem; border-radius: var(--radius); }
.swatch.xlarge { width: 100%; height: 11rem; border-radius: var(--radius-md); background-size: cover; }
.swatch-texture { background-image: var(--texture); background-size: var(--texture-size, 64px); }

/* ── Dashboard ─────────────────────────────────────────────────────────── */
.dashboard { min-height: 100%; padding: clamp(1.2rem, 4vw, 3.4rem) clamp(1rem, 4vw, 3rem) 4rem; overflow-y: auto; }
.dashboard-inner { max-width: 1220px; margin: 0 auto; }
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(1rem, 4vw, 4rem); align-items: center; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: clamp(1.6rem, 4vw, 3.5rem); box-shadow: var(--shadow-sm);
}
.hero::before {
  content: ""; position: absolute; width: 28rem; height: 28rem; right: 20%; top: -19rem;
  border-radius: 50%; background: var(--lavender-50); opacity: .9;
}
.hero-copy { position: relative; z-index: 1; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem;
  color: var(--mint); background: var(--mint-soft); border: 1px solid color-mix(in srgb, var(--mint) 22%, transparent);
  padding: .28rem .7rem; border-radius: var(--radius-pill); font-size: .7rem; font-weight: 750;
  letter-spacing: .08em; text-transform: uppercase;
}
.hero h1 {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 650;
  letter-spacing: -.045em; margin-bottom: 1rem; max-width: 13ch;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { max-width: 50ch; color: var(--muted); font-size: var(--text-md); margin-bottom: 1.6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.4rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: var(--text-xs); }
.hero-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.hero-meta .icon { color: var(--mint); }
.hero-art {
  position: relative; z-index: 1; display: grid; place-items: center;
  min-height: 300px; perspective: 1200px;
}
.quilt-collage {
  position: relative; width: min(100%, 360px); aspect-ratio: 1;
  transform: rotate(-4deg); filter: drop-shadow(0 24px 30px rgba(47,42,58,.16));
}
.quilt-collage img { width: 100%; height: 100%; display: block; border-radius: 1rem; border: 8px solid #fff; object-fit: cover; }
.quilt-collage .collage-back {
  position: absolute; inset: 1rem -1rem -1rem 1rem; border-radius: 1.1rem;
  background: var(--butter-100); z-index: -1; transform: rotate(7deg);
}
.collage-tag {
  position: absolute; right: -0.8rem; bottom: 1.1rem; transform: rotate(4deg);
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .45rem .7rem; box-shadow: var(--shadow-md);
  font-size: .72rem; font-weight: 750;
}
.collage-tag small { display: block; color: var(--muted); font-weight: 600; }
.dashboard-section { margin-top: clamp(2rem, 4vw, 3.5rem); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.section-heading h2 { font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 650; letter-spacing: -.03em; margin: 0; }
.section-heading p { color: var(--muted); margin: .25rem 0 0; font-size: var(--text-sm); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.project-card {
  position: relative; display: flex; flex-direction: column; min-height: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--motion), box-shadow var(--motion), border-color var(--motion);
}
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.project-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.project-preview {
  position: relative; aspect-ratio: 16/10; background:
    linear-gradient(135deg, var(--lavender-50), var(--blush-50));
  overflow: hidden; border-bottom: 1px solid var(--border);
}
.project-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.project-preview.blank { display: grid; place-items: center; color: var(--faint); }
.project-preview .project-badge {
  position: absolute; top: .7rem; left: .7rem; background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border); color: var(--ink-soft); border-radius: var(--radius-pill);
  padding: .2rem .55rem; font-size: .65rem; font-weight: 750; backdrop-filter: blur(8px);
}
.project-body { padding: 1rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.project-title-button { border: 0; background: none; padding: 0; color: var(--ink); text-align: left; font-size: 1.05rem; font-weight: 720; letter-spacing: -.015em; }
.project-title-button::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.project-title-button:focus-visible { outline: none; }
.project-title-button:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
.project-meta { color: var(--muted); font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: .35rem .8rem; }
.project-actions { display: flex; gap: .25rem; margin-top: auto; padding-top: .5rem; z-index: 2; position: relative; }
.project-actions .icon-button { min-width: 34px; min-height: 34px; border-color: var(--border); background: var(--surface); }
.dashboard-empty {
  text-align: center; padding: 3rem 1.5rem; border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 65%, transparent);
}
.dashboard-empty h3 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: .4rem; }
.dashboard-empty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.how-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem; }
.how-number {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: .8rem; margin-bottom: .8rem;
}
.how-card:nth-child(2) .how-number { background: var(--mint-soft); color: var(--mint); }
.how-card:nth-child(3) .how-number { background: var(--butter-soft); color: var(--butter); }
.how-card h3 { font-size: .98rem; margin-bottom: .3rem; }
.how-card p { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.dashboard-footer-note {
  margin-top: 2rem; display: flex; align-items: center; gap: .55rem;
  color: var(--muted); font-size: var(--text-xs);
}
.dashboard-footer-note .icon { color: var(--mint); }

/* ── Worktable layout ──────────────────────────────────────────────────── */
.worktable {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr) 318px;
  height: calc(100dvh - var(--header-h) - var(--tabs-h) - var(--status-h));
  min-height: 34rem; overflow: hidden;
  background: var(--bg);
}
.rail, .inspector {
  background: var(--surface);
  min-width: 0; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.rail { border-right: 1px solid var(--border); }
.inspector { border-left: 1px solid var(--border); }
.rail-inner, .inspector-inner { display: flex; flex-direction: column; min-height: 100%; }
.panel-section { padding: 1rem; border-bottom: 1px solid var(--border); }
.panel-section:last-child { border-bottom: 0; }
.panel-heading {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .7rem;
}
.panel-heading h2, .panel-heading h3 {
  margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.panel-heading .count { font-size: .68rem; color: var(--faint); font-weight: 700; }
.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.panel-title-row h2 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.02em; margin: 0; }
.inspector-section { padding: 1rem 1.05rem; border-bottom: 1px solid var(--border); }
.inspector-section h2 {
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .75rem;
}
.inspector-section .field + .field, .inspector-section .field + .field-row,
.inspector-section .field-row + .field, .inspector-section .field-row + .field-row,
.inspector-section .field + .check-field, .inspector-section .check-field + .field,
.inspector-section .check-field + .check-field { margin-top: .7rem; }
.stack { display: grid; gap: .7rem; }
.stack.tight { gap: .4rem; }
.stack.loose { gap: 1rem; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--text-xs); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider { height: 1px; background: var(--border); margin: .75rem 0; }

/* Lists in the rail */
.item-list { display: grid; gap: .3rem; }
.list-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  text-align: left; border: 1px solid transparent; background: transparent;
  border-radius: var(--radius); padding: .35rem; min-height: 3.2rem;
  color: var(--ink);
}
.list-item:hover { background: var(--surface-muted); border-color: var(--border); }
.list-item[aria-current="true"], .list-item.selected { background: var(--accent-softer); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.list-item .thumb {
  width: 2.6rem; height: 2.6rem; border-radius: .42rem; flex: none;
  border: 1px solid var(--border); background: var(--surface-muted); object-fit: cover;
}
.list-item .item-text { min-width: 0; flex: 1; display: grid; gap: .05rem; }
.list-item .item-name { font-size: var(--text-sm); font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .item-meta { font-size: .68rem; color: var(--muted); }
.list-item .item-end { color: var(--faint); flex: none; }
.list-item .swatch { width: 2rem; height: 2rem; }
.empty-note { color: var(--muted); font-size: var(--text-sm); border: 1px dashed var(--border); border-radius: var(--radius); padding: .75rem; text-align: center; }

/* Canvas area */
.canvas-panel {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--canvas);
}
.canvas-toolbar {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  min-height: 3.15rem; padding: .45rem .8rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-bottom: 1px solid var(--border); position: relative; z-index: 3;
}
.tool-group { display: inline-flex; align-items: center; gap: .15rem; padding-right: .4rem; margin-right: .2rem; border-right: 1px solid var(--border); }
.tool-group:last-child { border-right: 0; }
.toolbar-spacer { flex: 1; }
.tool-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-width: 36px; min-height: 36px; padding: .25rem .55rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-size: var(--text-xs); font-weight: 680;
}
.tool-button:hover { background: var(--surface-muted); color: var(--ink); }
.tool-button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.toolbar-label { font-size: .68rem; color: var(--faint); font-weight: 700; padding-inline: .25rem; }
.zoom-readout { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.4rem; text-align: right; }

.canvas-stage {
  position: relative; flex: 1; min-height: 300px; overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, var(--canvas-grid) 1.1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--canvas);
}
.canvas-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.canvas-stage canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.canvas-hint {
  position: absolute; left: .8rem; bottom: .75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .6rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--border); color: var(--muted); font-size: .68rem; font-weight: 650;
  backdrop-filter: blur(8px); pointer-events: none;
}
.canvas-hint .icon { color: var(--accent); }
.canvas-info {
  position: absolute; right: .8rem; bottom: .75rem; z-index: 2;
  padding: .35rem .6rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--border); color: var(--muted); font-size: .68rem; font-weight: 650;
  backdrop-filter: blur(8px); pointer-events: none;
}
.canvas-empty {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 2rem; pointer-events: none;
}
.canvas-empty > div { max-width: 30rem; background: color-mix(in srgb, var(--surface) 92%, transparent); padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.canvas-empty h2 { font-family: var(--font-display); font-size: 1.7rem; margin-bottom: .35rem; }
.canvas-empty p { color: var(--muted); }

/* Fabric palette / block palette */
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.35rem, 1fr)); gap: .35rem; }
.palette-swatch {
  position: relative; aspect-ratio: 1; min-width: 2.35rem; border-radius: .45rem;
  border: 2px solid transparent; background: var(--swatch); padding: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}
.palette-swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.palette-swatch .check-mark {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.75); font-size: .8rem; font-weight: 800;
}
.palette-swatch.texture { background-size: cover; background-position: center; }
.palette-grid.blocks { grid-template-columns: repeat(auto-fill, minmax(4.1rem, 1fr)); }
.palette-block {
  border: 2px solid transparent; background: var(--surface); border-radius: var(--radius-sm);
  padding: 2px; display: grid; gap: .15rem; text-align: center;
}
.palette-block img { width: 100%; aspect-ratio: 1; border-radius: .3rem; object-fit: cover; border: 1px solid var(--border); display: block; }
.palette-block span { font-size: .62rem; color: var(--muted); font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-block[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-softer); }
.fabric-label { display: flex; align-items: center; gap: .55rem; margin-top: .55rem; font-size: var(--text-xs); color: var(--muted); }
.fabric-label strong { color: var(--ink); font-weight: 680; }

/* Structure, metrics, inspectors */
.structure-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; max-height: 14rem; overflow: auto; }
.structure-list li button {
  width: 100%; display: flex; align-items: center; gap: .45rem;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  border-radius: var(--radius-sm); padding: .32rem .4rem; text-align: left; font-size: var(--text-xs);
}
.structure-list li button:hover { background: var(--surface-muted); }
.structure-list li button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }
.structure-list .structure-meta { margin-left: auto; color: var(--faint); font-size: .62rem; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.metric {
  background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .55rem .65rem; min-width: 0;
}
.metric dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 750; }
.metric dd { margin: .08rem 0 0; font-size: .95rem; font-weight: 720; font-variant-numeric: tabular-nums; }
.note-box {
  padding: .65rem .75rem; border-radius: var(--radius); font-size: var(--text-xs);
  background: var(--butter-soft); border: 1px solid color-mix(in srgb, var(--butter) 25%, var(--border)); color: var(--butter);
}
.note-box.info { background: var(--sky-soft); border-color: color-mix(in srgb, var(--sky) 25%, var(--border)); color: var(--sky); }
.note-box.success { background: var(--mint-soft); border-color: color-mix(in srgb, var(--mint) 25%, var(--border)); color: var(--mint); }
.note-box.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, var(--border)); color: var(--danger); }
.badge {
  display: inline-flex; align-items: center; gap: .25rem; border-radius: var(--radius-pill);
  background: var(--surface-muted); border: 1px solid var(--border); color: var(--muted);
  font-size: .64rem; font-weight: 700; padding: .14rem .48rem;
}
.badge.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.badge.danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.progress {
  height: .45rem; background: var(--surface-sunken); border-radius: var(--radius-pill); overflow: hidden;
}
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--motion); }

/* Border stack editor */
.border-list { display: grid; gap: .5rem; }
.border-item { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem; }
.border-item summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: var(--text-xs); font-weight: 700; list-style: none; }
.border-item summary::-webkit-details-marker { display: none; }
.border-item summary::before { content: "▸"; color: var(--faint); }
.border-item[open] summary::before { content: "▾"; }
.border-item .border-body { padding-top: .6rem; display: grid; gap: .55rem; }
.border-swatch { width: .9rem; height: .9rem; border-radius: .2rem; border: 1px solid var(--border-strong); background: var(--swatch); flex: none; }

/* Yardage / tables */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.data-table caption { text-align: left; color: var(--muted); font-size: .68rem; padding-bottom: .4rem; }
.data-table th, .data-table td { padding: .4rem .35rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.data-table thead th { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.data-table th[scope="row"] { font-weight: 680; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.total td, .data-table tr.total th { border-top: 2px solid var(--border-strong); font-weight: 750; }
.data-table .swatch { width: 1rem; height: 1rem; vertical-align: -.18rem; margin-right: .35rem; }

/* Toast */
.toast-region {
  position: fixed; right: clamp(.7rem, 2vw, 1.4rem); bottom: calc(var(--status-h) + 1rem);
  z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
  max-width: min(26rem, calc(100vw - 1.4rem)); pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: .7rem .85rem; box-shadow: var(--shadow-lg); color: var(--ink);
  font-size: var(--text-sm); pointer-events: auto; animation: toast-in var(--motion) var(--ease);
}
.toast.success { border-left-color: var(--mint); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--butter); }
.toast .toast-copy { flex: 1; min-width: 0; }
.toast .toast-title { font-weight: 720; }
.toast .toast-text { color: var(--muted); font-size: var(--text-xs); }
.toast .toast-action { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: var(--text-xs); padding: .15rem; text-decoration: underline; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Dialog */
.dialog {
  width: min(38rem, calc(100vw - 2rem)); max-height: min(88dvh, 52rem);
  padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dialog.wide { width: min(54rem, calc(100vw - 2rem)); }
.dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(120deg, var(--accent-softer), var(--surface));
}
.dialog-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.025em; }
.dialog-body { padding: 1.1rem; overflow-y: auto; max-height: calc(88dvh - 12rem); }
.dialog-actions {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem;
  padding: .8rem 1.1rem; border-top: 1px solid var(--border); background: var(--surface-muted);
}
.dialog-message { color: var(--ink-soft); max-width: 58ch; }
.command-dialog .dialog-body { padding: .5rem; }
.command-search {
  width: 100%; min-height: 46px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: .55rem .8rem; font-size: var(--text-base); background: var(--surface);
}
.command-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 2px; }
.command-list button {
  width: 100%; display: flex; align-items: center; gap: .65rem; text-align: left;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
  color: var(--ink); padding: .55rem .65rem; font-size: var(--text-sm); min-height: 42px;
}
.command-list button:hover, .command-list button.active { background: var(--accent-soft); color: var(--accent); }
.command-list .command-hint { margin-left: auto; font-size: .64rem; color: var(--faint); font-family: var(--font-mono); }
.command-empty { padding: 1.5rem; text-align: center; color: var(--muted); font-size: var(--text-sm); }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.2rem; }
.shortcut-row { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .32rem 0; border-bottom: 1px solid var(--border); font-size: var(--text-xs); }
.shortcut-row kbd { font-family: var(--font-mono); background: var(--surface-muted); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: .28rem; padding: .05rem .3rem; font-size: .66rem; color: var(--ink-soft); }
.help-copy h3 { margin-top: 1.2rem; font-size: .98rem; }
.help-copy p, .help-copy li { color: var(--muted); font-size: var(--text-sm); }
.help-copy ul { padding-left: 1.2rem; }
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.theme-option {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius);
  padding: .55rem; color: var(--ink); display: grid; gap: .45rem; text-align: left;
}
.theme-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-swatch { height: 2.4rem; border-radius: .4rem; border: 1px solid var(--border); }
.theme-option strong { font-size: var(--text-xs); }

/* Export dialog */
.export-preview {
  background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius);
  min-height: 10rem; display: grid; place-items: center; padding: .6rem;
}
.export-preview img { max-height: 14rem; object-fit: contain; }
.export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.export-progress { display: grid; gap: .35rem; }
.export-progress progress { width: 100%; accent-color: var(--accent); }

/* Fabric worktable */
.fabric-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(16rem, .9fr); gap: 1rem; padding: 1rem; overflow: auto; }
.fabric-hero {
  min-height: 22rem; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--surface); padding: 1rem; display: grid; gap: 1rem; align-content: start;
}
.fabric-hero .swatch.xlarge { height: min(24rem, 45vh); }
.fabric-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.fabric-meta h1 { font-family: var(--font-display); font-size: 2rem; margin: 0; letter-spacing: -.03em; }
.fabric-audit { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; }
.fabric-audit h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: .6rem; }
.audit-strip { display: flex; height: 3rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-block: .6rem; }
.audit-strip span { flex: 1; background: var(--swatch); }
.audit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.audit-list li { display: flex; align-items: center; gap: .55rem; font-size: var(--text-xs); color: var(--muted); }
.upload-drop {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  padding: 1.5rem; text-align: center; color: var(--muted); background: var(--surface-muted);
}
.upload-drop.dragging { border-color: var(--accent); background: var(--accent-softer); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; }
.image-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); padding: 0; text-align: left; }
.image-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.image-card span { display: block; padding: .35rem .5rem; font-size: .68rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Block canvas specific */
.block-canvas-badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border);
  padding: .38rem .65rem; border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700;
  color: var(--muted); backdrop-filter: blur(8px); pointer-events: none;
}
.block-canvas-badge strong { color: var(--ink); }
.seam-key { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .68rem; }
.seam-key::before { content: ""; width: 1.2rem; border-top: 2px dashed var(--accent); }
.cell-inspector {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem;
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--text-xs); color: var(--muted);
}
.cell-inspector strong { color: var(--ink); }

/* Offline banner */
.connectivity-banner {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--butter-soft); color: var(--butter); border-bottom: 1px solid color-mix(in srgb, var(--butter) 25%, var(--border));
  font-size: var(--text-xs); font-weight: 700; padding: .35rem 1rem;
}
.connectivity-banner .icon { color: currentColor; }

@media (max-width: 1230px) {
  .worktable { grid-template-columns: 244px minmax(0, 1fr) 288px; }
  .panel-section, .inspector-section { padding-inline: .8rem; }
}
@media (max-width: 1080px) {
  .worktable { grid-template-columns: 230px minmax(0, 1fr); position: relative; }
  .inspector {
    position: fixed; z-index: 45; top: var(--header-h); bottom: var(--status-h);
    right: 0; width: min(22rem, 92vw); border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg); transform: translateX(105%);
    transition: transform var(--motion) var(--ease);
  }
  .inspector.is-open { transform: translateX(0); }
  .inspector-toggle { display: inline-flex !important; }
  .inspector-backdrop { position: fixed; inset: var(--header-h) 0 var(--status-h) 0; background: var(--scrim); z-index: 44; display: none; }
  .inspector-backdrop.is-open { display: block; }
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 240px; }
}
@media (min-width: 1081px) { .inspector-toggle, .inspector-backdrop { display: none; } }
@media (max-width: 760px) {
  :root { --header-h: 3.75rem; --tabs-h: 3rem; --status-h: 1.8rem; }
  .app-shell { grid-template-rows: var(--header-h) auto minmax(0, 1fr) var(--status-h); }
  .brand-word { display: none; }
  .project-switcher .project-kicker { display: none; }
  .project-switcher { max-width: 48vw; }
  .command-button .keycap { display: none; }
  .worktable { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); height: calc(100dvh - var(--header-h) - var(--tabs-h) - var(--status-h)); }
  .rail {
    max-height: 13.5rem; border-right: 0; border-bottom: 1px solid var(--border);
    display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0;
  }
  .rail-inner { display: contents; }
  .rail .panel-section { border-bottom: 0; border-right: 1px solid var(--border); }
  .rail .panel-section:nth-child(n+3) { display: none; }
  .canvas-stage { min-height: 19rem; }
  .status-message { display: none; }
  .dashboard { padding: 1rem 1rem 3rem; }
  .hero { padding: 1.4rem; border-radius: var(--radius-lg); }
  .hero h1 { font-size: 2.5rem; }
  .how-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .fabric-stage { grid-template-columns: 1fr; }
  .shortcut-grid { grid-template-columns: 1fr; }
  .theme-options { grid-template-columns: 1fr; }
  .dialog-actions .button { flex: 1; }
  .toast-region { left: .7rem; right: .7rem; align-items: stretch; }
}
@media (max-width: 460px) {
  .header-actions .history-actions { display: none; }
  .project-switcher { max-width: 40vw; }
  .worktable-tabs { padding-inline: .4rem; }
  .worktable-tab { padding-inline: .65rem; }
  .worktable-tab .tab-count { display: none; }
  .rail { display: block; max-height: 12rem; overflow: auto; }
  .rail .panel-section:nth-child(n+2) { display: none; }
  .field-row { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .project-card, .panel-section, .inspector-section, .button, .input, .select, .dialog, .toast { border: 1px solid CanvasText; }
  .swatch, .palette-swatch, .border-swatch { forced-color-adjust: none; }
  .worktable-tab[aria-current="page"] { border-bottom-color: Highlight; color: Highlight; }
  .button.primary, .segmented button[aria-pressed="true"], .tool-button[aria-pressed="true"] { border: 2px solid Highlight; }
}