/* Hallmark · genre: modern-minimal · macrostructure: Workbench-list (dashboard) + Workbench-inspector (project_detail) · theme: clean-saas (Miro-like, custom) · design-system: design.md · designed-as-app
 * stamp date: 2026-05-30 (v3)
 * accent hue: royal-blue · paper band: light (near-neutral) · display style: geometric-sans (Plus Jakarta Sans + Inter)
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * supersedes: v2 quiet-cool-indigo (Inter Tight + Geist Mono, mono-caps labels)
 * v3 (Miro-like): dropped mono labels (uppercase→normal sans), darker crisp ink, neutralised grays,
 *   royal-blue accent (≈ Miro primary), 8/10px radii, btn weight 600.
 */

/* ───────────────────────────────────── tokens */
:root {
  /* Colour — modern-minimal, Miro-like: near-neutral grays, crisp dark ink, royal-blue accent */
  --color-paper:         oklch(99% 0.002 264);
  --color-paper-2:       oklch(97% 0.003 264);     /* hover surface */
  --color-paper-3:       oklch(100% 0 0);          /* crisp white cards on faint bg */
  --color-paper-blur:    oklch(99% 0.002 264 / 0.85); /* sticky-nav translucent paper */
  --color-ink:           oklch(24% 0.012 266);     /* near-black, crisp */
  --color-ink-2:         oklch(45% 0.011 266);
  --color-ink-3:         oklch(56% 0.010 266);     /* quiet meta — WCAG AA ≥4.5:1 on paper */
  --color-rule:          oklch(90% 0.004 266);
  --color-rule-2:        oklch(94% 0.003 266);
  --color-accent:        oklch(55% 0.205 264);     /* royal blue (≈ Miro primary) */
  --color-accent-strong: oklch(49% 0.205 264);     /* accent hover/active */
  --color-accent-2:      oklch(96% 0.030 264);     /* accent tint bg */
  --color-accent-ink:    oklch(99% 0 0);
  --color-focus:         oklch(55% 0.205 264);
  --color-danger:        oklch(52% 0.190 25);
  --color-danger-2:      oklch(96% 0.025 25);

  /* Typography — Plus Jakarta Sans (UI/display) + Inter (body). No mono labels. */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --text-xs:      0.75rem;     /* 12px — labels, chips */
  --text-sm:      0.8125rem;   /* 13px — meta, small */
  --text-md:      0.9375rem;   /* 15px — body */
  --text-lg:      1.0625rem;   /* 17px — emphasised body */
  --text-xl:      1.375rem;    /* 22px — section heading */
  --text-2xl:     1.625rem;    /* 26px — page subhead */
  --text-display: clamp(1.875rem, 2.4vw + 1rem, 2.375rem);  /* page title */

  --tracking-display: -0.02em;
  --tracking-body:    -0.006em;
  --tracking-label:    0.005em;

  /* Spacing — 4pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Radius */
  --radius-input: 8px;
  --radius-card:  10px;
  --radius-pill:  999px;

  /* Motion */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-short:    140ms;
  --dur-base:     200ms;

  /* Layout */
  --measure: 68ch;
  --rule:    1px solid var(--color-rule);
  --rule-2:  1px solid var(--color-rule-2);
}

/* ───────────────────────────────────── reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { overflow-x: clip; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-md);
  line-height: 1.5;
  letter-spacing: var(--tracking-body);
  font-weight: 400;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

button { font: inherit; cursor: pointer; }

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

/* ───────────────────────────────────── nav (N9 edge-aligned minimal) */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-xl);
  border-bottom: var(--rule);
  position: sticky;
  top: 0;
  background: var(--color-paper-blur);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  z-index: 50;
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.nav__brand a { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.nav__brand-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  display: inline-block;
}
.nav__brand-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  letter-spacing: 0;
}
.nav__brand-sep { color: var(--color-rule); font-size: var(--text-sm); }
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-input);
  background: transparent;
  border: 0;
  transition: background var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.nav__link-ico { flex-shrink: 0; }
.nav__link:hover { color: var(--color-ink); background: var(--color-paper-2); }
.nav__link.is-super { color: var(--color-accent); }
.nav__chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  background: var(--color-danger-2);
  color: var(--color-danger);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-pill);
}
.nav__chip--btn {
  border: none;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.nav__chip--btn:hover { opacity: .85; }
.nav__chip--btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ───────────────────────────────────── page shell */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-xl) var(--space-3xl);
}

/* ───────────────────────────────────── section heading rhythm */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0 var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: var(--rule);
}
.section-head__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}
.section-head__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.section-head__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  color: var(--color-ink);
}
.section-head__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.6vw + 0.9rem, 1.875rem);
  letter-spacing: var(--tracking-display);
  line-height: 1.18;
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ───────────────────────────────────── label · value spec row */
.spec-row {
  display: grid;
  grid-template-columns: minmax(84px, 7rem) 1fr;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: var(--rule-2);
  align-items: baseline;
}
.spec-row__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.spec-row__value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.spec-row__value a {
  color: var(--color-accent);
  border-bottom: 1px solid color-mix(in oklch, var(--color-accent) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.spec-row__value a:hover { border-bottom-color: var(--color-accent); }
.spec-row--empty .spec-row__value { color: var(--color-ink-3); }

/* Figma multi-list inside spec row */
.figma-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.figma-list__item {
  display: grid;
  grid-template-columns: minmax(120px, 14rem) 1fr;
  gap: var(--space-md);
  align-items: baseline;
}
.figma-list__url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Figma edit list (modal) */
.figma-edit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}
.figma-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  gap: var(--space-2xs);
  align-items: center;
}
.figma-edit-row .input { padding: var(--space-3xs) var(--space-2xs); font-size: var(--text-sm); }

/* exhibit description */
.exhibit__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin-bottom: var(--space-2xs);
  max-width: var(--measure);
  line-height: 1.55;
}

/* Locked exhibit preview (per-upload PIN aktif) */
.exhibit.is-locked {
  border-color: color-mix(in oklch, var(--color-accent) 40%, transparent);
}
.exhibit__preview--locked {
  display: grid;
  place-items: center;
  background: var(--color-accent-2);
  text-align: center;
  padding: var(--space-md);
}
.exhibit__locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}
.exhibit__locked-icon {
  color: var(--color-ink-2);
  line-height: 0;
}
.exhibit__locked-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
}

/* Share modal extras */
.share-url-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xs);
  align-items: center;
}
.share-url-row .input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.share-note {
  background: var(--color-paper-2);
  border-radius: var(--radius-input);
  padding: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.55;
}
.share-note p { font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-3xs); }
.share-note ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.share-note ul li::before { content: "·  "; color: var(--color-ink-3); }
.share-note strong { color: var(--color-ink); }

/* ───────────────────────────────────── Workbench-list — dashboard */
/* dashboard layout — Tribe sidebar (Miro Spaces) + main */
.dash {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-xl) var(--space-3xl);
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}
.dash-main { flex: 1 1 0; min-width: 0; }
.dash-sidebar {
  flex: 0 0 196px;
  position: sticky;
  top: 92px;
  align-self: flex-start;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
}
.dash-sidebar__title {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  padding: 0 var(--space-xs) var(--space-2xs);
}
.tribe-nav { display: flex; flex-direction: column; gap: 2px; }
.tribe-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  text-align: left;
  padding: var(--space-2xs) var(--space-xs);
  border: none;
  background: none;
  border-radius: var(--radius-input);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.tribe-nav__item:hover { background: var(--color-paper-2); color: var(--color-ink); }
.tribe-nav__item.is-active { background: var(--color-accent-2); color: var(--color-accent-strong); }
.tribe-nav__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.tribe-nav__icon { display: inline-flex; color: var(--color-ink-3); flex-shrink: 0; }
.tribe-nav__item.is-active .tribe-nav__icon { color: var(--color-accent); }
.tribe-nav__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tribe-nav__muted { color: var(--color-ink-3); }
.tribe-nav__count { flex-shrink: 0; font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.tribe-nav__item.is-active .tribe-nav__count { color: var(--color-accent-strong); }

@media (max-width: 880px) {
  .dash { flex-direction: column; gap: var(--space-sm); padding: var(--space-sm) var(--space-md) var(--space-2xl); }
  .dash-sidebar { position: static; flex: none; width: 100%; max-height: none; overflow: visible; }
  .dash-sidebar__title { display: none; }
  .tribe-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-2xs); padding-bottom: var(--space-2xs); }
  .tribe-nav__item { width: auto; flex-shrink: 0; border: var(--rule); }
  .tribe-nav__item.is-active { border-color: transparent; }
}

/* compact dashboard header — title + count (left) · search + view toggle (right) */
.page--index { padding-top: var(--space-sm); }
.index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-2xs) 0 var(--space-sm);
}
.index-head__lead {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  min-width: 0;
}
.index-head__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--color-ink);
}
.index-head__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
  white-space: nowrap;
}
.index-head__filtered:empty { display: none; }
.index-head__filtered { color: var(--color-accent); }
.index-head__tools {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1 1 320px;
  max-width: 600px;
  margin-left: auto;
}
.index-head__tools .dashboard-toolbar__search { flex: 1; min-width: 0; }

.dashboard-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  align-items: center;
  border-bottom: var(--rule);
}
.dashboard-toolbar__search {
  position: relative;
}
.dashboard-toolbar__search input {
  width: 100%;
  background: var(--color-paper-3);
  border: var(--rule);
  border-radius: var(--radius-input);
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) calc(var(--space-md) + 1.25rem);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-ink);
  transition: border-color var(--dur-short) var(--ease-out); /* focus ring (box-shadow) appears instantly */
}
.dashboard-toolbar__search input::placeholder { color: var(--color-ink-3); }
.dashboard-toolbar__search input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent);
}
.dashboard-toolbar__search::before {
  content: "";
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  /* stroke hex tracks --color-ink-3 (≈#6d6f78); cannot use var() inside a data-URI */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 7a4 4 0 11-8 0 4 4 0 018 0zm-.7 4.3l3.2 3.2' stroke='%236d6f78' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.dashboard-toolbar__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}

.filter-row {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-2);
  margin-bottom: var(--space-2xs);
  flex-wrap: wrap;
}
.filter-row__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.filter-row__items { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.filter-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  background: transparent;
  border: 0;
  color: var(--color-ink-2);
  padding: var(--space-3xs) var(--space-2xs);
  cursor: pointer;
  border-radius: var(--radius-input);
  transition: color var(--dur-short) var(--ease-out),
              background var(--dur-short) var(--ease-out);
}
.filter-item:hover { color: var(--color-ink); background: var(--color-paper-2); }
.filter-item.is-active {
  color: var(--color-accent);
  background: var(--color-accent-2);
}
.filter-sort {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.filter-sort select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: var(--rule);
  border-radius: var(--radius-input);
  padding: var(--space-3xs) var(--space-2xs);
  transition: border-color var(--dur-short) var(--ease-out);
}
.filter-sort select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent);
}

/* compact filter bar — Tribe · Tipe · Urut in a single row */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--rule);
  margin-bottom: var(--space-2xs);
}
.filter-field { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.filter-field--end { margin-left: auto; }
.filter-field__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.filter-field select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: var(--rule);
  border-radius: var(--radius-input);
  padding: var(--space-3xs) var(--space-2xs);
  transition: border-color var(--dur-short) var(--ease-out);
}
.filter-field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent);
}
@media (max-width: 720px) {
  .filter-field--end { margin-left: 0; }
}

/* project list — two modes: grid (cards) + list (rows), toggled on .entry-list */
.entry-list { list-style: none; }
.entry { min-width: 0; }

/* sub-view visibility */
.entry__card { display: none; }
.entry__row  { display: none; }
.entry-list.is-grid .entry__card { display: flex; }
.entry-list.is-list .entry__row  { display: grid; }

/* shared column template — list-head + rows must match to align */
.list-head,
.entry-list.is-list .entry__row {
  grid-template-columns: minmax(0, 1fr) 72px 48px 132px 104px 60px;
  gap: var(--space-sm);
  align-items: center;
}

/* ── GRID mode: cards ── */
.entry-list.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-sm);
  align-items: stretch;
}
.entry__card {
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  height: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-3);
  border: var(--rule);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.entry-list.is-grid .entry:hover .entry__card {
  border-color: var(--color-accent);
  box-shadow: 0 1px 2px oklch(20% 0.02 255 / 0.04), 0 4px 12px oklch(20% 0.02 255 / 0.06);
  transform: translateY(-1px);
}

/* ── LIST mode: rows ── */
.entry-list.is-list { display: flex; flex-direction: column; }
.list-head { display: none; }
.page:has(.entry-list.is-list) .list-head {
  display: grid;
  padding: 0 var(--space-sm) var(--space-2xs);
  border-bottom: var(--rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.list-head--num { text-align: right; }
.entry__row {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule-2);
  color: var(--color-ink);
  transition: background var(--dur-short) var(--ease-out);
}
.entry__row:hover { background: var(--color-paper-2); }
.entry__row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-input); }
.erow__name { display: flex; align-items: center; gap: var(--space-2xs); min-width: 0; font-weight: 500; }
.erow__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-accent); flex-shrink: 0; }
.erow__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erow__tipe, .erow__date {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-ink-3); text-transform: none; letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
}
.erow__file {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-ink-2); text-align: right; font-variant-numeric: tabular-nums;
}
.erow__tribe { font-size: var(--text-sm); color: var(--color-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erow__muted { color: var(--color-ink-3); }
.erow__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2xs); }
.erow__chev { color: var(--color-ink-3); transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.entry__row:hover .erow__chev { transform: translateX(2px); color: var(--color-accent); }
.erow__del {
  display: flex; align-items: center; justify-content: center;
  opacity: 0; border: none; background: none; color: var(--color-ink-3);
  cursor: pointer; padding: 4px; border-radius: var(--radius-input);
  transition: opacity var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out);
}
.entry__row:hover .erow__del, .erow__del:focus-visible { opacity: 1; }
.erow__del:hover { color: var(--color-danger); background: var(--color-danger-2); }
.erow__del:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* view toggle (grid / list) */
.view-toggle { display: inline-flex; border: var(--rule); border-radius: var(--radius-input); overflow: hidden; background: var(--color-paper-3); }
.view-toggle__btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; border: none; background: none;
  color: var(--color-ink-3); cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.view-toggle__btn + .view-toggle__btn { border-left: var(--rule); }
.view-toggle__btn:hover { color: var(--color-ink); }
.view-toggle__btn.is-active { background: var(--color-accent); color: var(--color-accent-ink); }
.view-toggle__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.entry__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
}
.entry__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry__badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border: var(--rule-2);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.entry__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  line-height: 1.3;
  color: var(--color-ink);
  margin-bottom: 0;
  overflow-wrap: anywhere;
}
.entry__title a { transition: color var(--dur-short) var(--ease-out); }
.entry__title a:hover { color: var(--color-accent); }
.entry__title .entry__lock {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  vertical-align: middle;
  color: var(--color-accent);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  margin-left: var(--space-2xs);
  padding: 2px 6px;
  background: var(--color-accent-2);
  border-radius: var(--radius-pill);
}
.entry__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}
.entry__meta .meta-sep { color: var(--color-rule); }
.entry__meta .meta-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  text-transform: none;
  letter-spacing: var(--tracking-label);
}
.entry__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
  line-height: 1.55;
}
.entry__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
}
.entry__links a {
  color: var(--color-ink-2);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 1px;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.entry__links a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.entry__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-2xs);
}
.entry__actions .btn { font-size: var(--text-sm); }

/* ───────────────────────────────────── file-replace-zone */
.file-replace-zone {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1.5px dashed var(--color-rule);
  border-radius: var(--radius-input);
  cursor: pointer;
  font-size: var(--text-sm); color: var(--color-ink-3);
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
  user-select: none;
}
.file-replace-zone:hover, .file-replace-zone:focus-visible {
  border-color: var(--color-accent); color: var(--color-ink);
  outline: none;
}
.file-replace-zone.has-file {
  border-style: solid; border-color: var(--color-accent); color: var(--color-ink);
}

/* date input */
input[type="date"].input { color-scheme: light; }

/* ───────────────────────────────────── Workbench-inspector — project detail */
.page--detail { padding-top: var(--space-md); }
.proj-head {
  padding: var(--space-2xs) 0 var(--space-sm);
  margin-bottom: 0;
}
.proj-head__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: start;
  margin-bottom: var(--space-sm);
}
.proj-head__desc {
  font-size: var(--text-md);
  color: var(--color-ink-2);
  max-width: var(--measure);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}
.proj-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.proj-head__meta .meta-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.proj-head__actions { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.proj-spec {
  display: flex;
  flex-direction: column;
  border-top: var(--rule);
}

/* Tabs — Detail | Prototype */
.tabs {
  display: flex;
  gap: var(--space-xs);
  border-bottom: var(--rule);
  margin-bottom: var(--space-md);
}
.tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-xs) var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.tab:hover { color: var(--color-ink); }
.tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-input); }
.tab__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border: var(--rule-2);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.proto-search {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-paper-3);
  border: var(--rule);
  border-radius: var(--radius-input);
  padding: var(--space-3xs) var(--space-2xs);
  min-width: 180px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.proto-search::placeholder { color: var(--color-ink-3); }
.proto-search:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent);
}

/* Upload list — Workbench exhibits */
.upload-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); }
.exhibit {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-lg);
  padding: var(--space-md);
  border: var(--rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-3);
  align-items: start;
  transition: border-color var(--dur-short) var(--ease-out);
}
.exhibit:hover { border-color: var(--color-rule); }
.exhibit__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}
.exhibit__pinned-mark {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  padding: 2px 6px;
  background: var(--color-accent-2);
  border-radius: var(--radius-pill);
}
.exhibit__body { min-width: 0; }
.exhibit__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  line-height: 1.3;
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
  overflow-wrap: anywhere;
}
.exhibit__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
  margin-bottom: var(--space-md);
}
.exhibit__meta strong {
  color: var(--color-ink);
  font-weight: 500;
}
.exhibit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.exhibit__preview {
  position: relative;
  background: var(--color-paper-2);
  border: var(--rule);
  border-radius: var(--radius-input);
  height: 180px;
  overflow: hidden;
  transition: border-color var(--dur-short) var(--ease-out);
}
.exhibit__preview:hover { border-color: var(--color-accent); }
.exhibit__preview iframe {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  border: 0;
  pointer-events: none;
  background: white;
}
.exhibit__preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: var(--color-paper-2);
}
.exhibit__preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--space-xs);
  background: linear-gradient(180deg, transparent 70%, color-mix(in oklch, var(--color-ink) 20%, transparent));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.exhibit__preview:hover .exhibit__preview-overlay { opacity: 1; }
.exhibit__preview-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink);
  background: var(--color-paper-3);
  padding: 4px 8px;
  border-radius: var(--radius-input);
  text-transform: none;
  letter-spacing: var(--tracking-label);
}

/* ───────────────────────────────────── buttons */
.btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-body);
  border: 1px solid transparent;
  padding: var(--space-2xs) var(--space-md);
  background: transparent;
  color: var(--color-ink);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.btn--primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }

.btn--outline {
  border-color: var(--color-rule);
  color: var(--color-ink);
}
.btn--icon { padding: var(--space-2xs); }
.btn--icon svg { display: block; }
.btn--outline:hover { background: var(--color-paper-2); border-color: var(--color-ink-3); }

.btn--ghost {
  color: var(--color-ink-2);
  padding: var(--space-3xs) var(--space-2xs);
}
.btn--ghost:hover { background: var(--color-paper-2); color: var(--color-ink); }

.btn--text {
  padding: var(--space-3xs) 0;
  color: var(--color-ink-2);
}
.btn--text:hover { color: var(--color-accent); }

.btn--accent-text {
  padding: var(--space-3xs) 0;
  color: var(--color-accent);
  font-weight: 500;
}
.btn--accent-text:hover { color: var(--color-accent-strong); }

.btn--danger {
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-danger);
}
.btn--danger:hover { background: var(--color-danger-2); }

.back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-3);
  padding: var(--space-xs) 0;
  transition: color var(--dur-short) var(--ease-out);
}
.back:hover { color: var(--color-ink); }

/* ───────────────────────────────────── forms */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.field__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.field__label .req { color: var(--color-accent); }
.field__hint {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  font-weight: 400;
}
.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-md);
  background: var(--color-paper-3);
  border: var(--rule);
  border-radius: var(--radius-input);
  padding: var(--space-2xs) var(--space-sm);
  color: var(--color-ink);
  letter-spacing: var(--tracking-body);
  transition: border-color var(--dur-short) var(--ease-out); /* focus ring (box-shadow) appears instantly */
}
.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent);
}
textarea.input { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
.field--inline { flex-direction: row; align-items: center; gap: var(--space-2xs); }
.check { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); cursor: pointer; padding: var(--space-2xs) 0; }
.check input { width: 14px; height: 14px; accent-color: var(--color-accent); }

.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.error {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-danger);
  margin: var(--space-2xs) 0;
  min-height: 1.2em;
}

/* ───────────────────────────────────── modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in oklch, var(--color-ink) 30%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  z-index: 100;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.modal-overlay.is-open { display: flex; }
.modal {
  position: relative;
  background: var(--color-paper-3);
  border: var(--rule);
  border-radius: var(--radius-card);
  max-width: 540px;
  width: 100%;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 12px 32px -8px color-mix(in oklch, var(--color-ink) 20%, transparent);
}
.modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: transparent;
  border: 0;
  color: var(--color-ink-3);
  font-size: var(--text-lg);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-input);
  transition: background var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.modal__close:hover { background: var(--color-paper-2); color: var(--color-ink); }
.modal__head {
  margin-bottom: var(--space-md);
}
.modal__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
  margin-bottom: var(--space-3xs);
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
}
.modal__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  margin-top: var(--space-2xs);
  max-width: var(--measure);
  line-height: 1.55;
}

.file-drop {
  border: 1.5px dashed var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  margin-bottom: var(--space-md);
  background: var(--color-paper-2);
  transition: border-color var(--dur-short) var(--ease-out),
              background var(--dur-short) var(--ease-out);
}
.file-drop:hover { border-color: var(--color-accent); background: var(--color-accent-2); }
.file-drop__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--color-ink);
  margin-bottom: var(--space-3xs);
}
.file-drop__hint {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
.selected-files {
  margin-bottom: var(--space-md);
  border: var(--rule);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
  overflow: hidden;
}
.selected-files__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: var(--rule-2);
  font-size: var(--text-sm);
}
.selected-files__row:last-child { border-bottom: 0; }
.selected-files__row .size {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* ───────────────────────────────────── gate (login / project pin) */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-xl) var(--space-md);
  background: var(--color-paper);
}
.gate__box {
  max-width: 380px;
  width: 100%;
  text-align: left;
  background: var(--color-paper-3);
  border: var(--rule);
  border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: 0 8px 24px -8px color-mix(in oklch, var(--color-ink) 12%, transparent);
}
.gate__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
  margin-bottom: var(--space-md);
}
.gate__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  margin-bottom: var(--space-2xs);
}
.gate__tag {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-ink-2);
  margin-bottom: var(--space-2xs);
  line-height: 1.4;
  max-width: 32ch;
}
.gate__sub {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  margin-bottom: var(--space-md);
  max-width: 38ch;
  line-height: 1.55;
}
.gate__hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-md);
}
.gate__input-wrap {
  position: relative;
  margin-bottom: var(--space-2xs);
}
.gate__input {
  width: 100%;
  background: var(--color-paper-2);
  border: var(--rule);
  border-radius: var(--radius-input);
  padding: var(--space-sm) var(--space-md);
  padding-right: 56px;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  letter-spacing: 0.15em;
  color: var(--color-ink);
  transition: border-color var(--dur-short) var(--ease-out); /* focus ring (box-shadow) appears instantly */
}
.gate__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 15%, transparent);
}
.gate__eye {
  position: absolute;
  right: var(--space-2xs);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  text-transform: none;
  letter-spacing: var(--tracking-label);
  padding: var(--space-2xs);
  border-radius: var(--radius-input);
}
.gate__eye:hover { color: var(--color-ink); background: var(--color-paper-2); }
.gate__submit {
  margin-top: var(--space-sm);
  width: 100%;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
}
.gate__back-link {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-3);
  transition: color var(--dur-short) var(--ease-out);
}
.gate__back-link:hover { color: var(--color-ink); }

/* ───────────────────────────────────── empty state */
.empty {
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
}
.empty__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-2xs);
  color: var(--color-ink);
}
.empty__body {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: var(--measure);
  margin: 0 auto;
  line-height: 1.55;
}
.empty__body em { font-style: normal; color: var(--color-accent); font-weight: 500; }

/* ───────────────────────────────────── toast */
.toast-wrap {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  z-index: 200;
  max-width: min(92vw, 380px);
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-input);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.4;
  box-shadow: 0 8px 24px -8px color-mix(in oklch, var(--color-ink) 45%, transparent);
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast.is-leaving { opacity: 0; transition: opacity 160ms var(--ease-in-out); }
.toast__msg { flex: 1; min-width: 0; }
.toast__action {
  flex-shrink: 0;
  white-space: nowrap;
  background: transparent;
  border: 0;
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-input);
}
.toast__action:hover { background: color-mix(in oklch, var(--color-paper) 18%, transparent); }
.toast__action:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───────────────────────────────────── numeric alignment */
.entry__meta, .exhibit__meta, .spec-row__value, .dashboard-toolbar__count,
.meta-mono, .selected-files__row .size, .figma-list__url {
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────── touch: reveal preview caption (no hover) */
@media (hover: none) {
  .exhibit__preview-overlay { opacity: 1; }
}

/* ───────────────────────────────────── responsive */
@media (max-width: 720px) {
  .page { padding: var(--space-lg) var(--space-md) var(--space-2xl); }
  .nav { padding: var(--space-sm) var(--space-md); gap: var(--space-2xs); }
  .nav__brand-sub, .nav__brand-sep { display: none; }
  .nav__brand { font-size: var(--text-md); }
  .nav__brand a, .nav__brand span { white-space: nowrap; }
  .nav__actions { gap: var(--space-3xs); flex-shrink: 0; }
  /* Project baru → icon-only on mobile (full label overflows the bar) */
  .nav .btn--primary .btn__label { display: none; }
  .nav .btn--primary { padding: var(--space-2xs); }
  .nav__link { padding: var(--space-2xs) var(--space-xs); }
  .entry__card { padding: var(--space-sm); }
  .entry__actions { justify-content: flex-start; }
  /* list rows: drop tribe + date columns on mobile (no horizontal scroll) */
  .page:has(.entry-list.is-list) .list-head { display: none; }
  .entry-list.is-list .entry__row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .erow__tribe, .erow__date { display: none; }
  .exhibit { grid-template-columns: minmax(0, 1fr); }
  .exhibit__preview {
    aspect-ratio: 16 / 10;
  }
  .field-grid-2 { grid-template-columns: 1fr; }
  .proj-head__top { grid-template-columns: 1fr; }
  .figma-list__item { grid-template-columns: 1fr; gap: 0; }
  .figma-edit-row { grid-template-columns: 1fr auto; }
  .figma-edit-row .figma-url { grid-column: 1 / -1; }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .section-head__meta { display: none; }
  .spec-row { grid-template-columns: 1fr; gap: 0; padding: var(--space-2xs) 0; }
  .modal { padding: var(--space-lg) var(--space-md); }
  .dashboard-toolbar { grid-template-columns: 1fr; }
}

/* very small phones — collapse nav actions to icon-only so nothing clips */
@media (max-width: 480px) {
  .nav__link-label { display: none; }
  .nav__link { padding: var(--space-2xs); gap: 0; }
}

/* ───────────────────────────────────── reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}