/* ============================================================
   Quincy Portal — application styles
   Built on the Quincy Productions design tokens (var(--*)).
   Editorial monochrome: ink on warm paper, hairlines, square
   corners, Mazius display + Apfel sans.
   ============================================================ */

html, body { margin: 0; }
body { background: var(--bg-canvas); color: var(--text-primary); font: var(--type-body); }
* { box-sizing: border-box; }
img { display: block; max-width: 100%; }

.boot {
  min-height: 100vh; display: grid; place-items: center;
  font: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--text-muted);
}

/* tiny helpers --------------------------------------------------------- */
.ey { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-secondary); }
.muted { color: var(--text-muted); }
.serif { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
.nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; }
.spread { display: flex; align-items: center; justify-content: space-between; }
.gap2 { gap: var(--space-2); } .gap3 { gap: var(--space-3); } .gap4 { gap: var(--space-4); } .gap5 { gap: var(--space-5); }
.hairline { border: 0; border-top: 1px solid var(--border-hairline); margin: 0; }
.grow { flex: 1; }
button { font-family: var(--font-sans); }

/* ---------------------------------------------------------------------
   App shell + top bar
   --------------------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-6);
  padding: 0 var(--space-7); height: 64px;
  background: color-mix(in srgb, var(--paper-050) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}
.topbar.is-ink { background: color-mix(in srgb, var(--ink-900) 90%, transparent); border-bottom-color: rgba(246,244,239,.14); }
.topbar.is-ink .ey, .topbar.is-ink .topnav a { color: var(--text-on-inverse-muted); }
.topbar__brand { display: flex; align-items: center; gap: var(--space-4); cursor: pointer; }
.topbar__brand img { height: 18px; }
.topbar__divider { width: 1px; height: 22px; background: var(--border-hairline); }
.topnav { display: flex; align-items: center; gap: var(--space-6); }
.topnav a {
  font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-secondary); text-decoration: none; cursor: pointer; padding: 4px 0;
  border-bottom: 1.5px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast);
}
.topnav a:hover { color: var(--text-primary); }
.topnav a.is-active { color: var(--text-primary); border-bottom-color: var(--ink-900); }

.avatar {
  width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--ink-900); color: var(--paper-050); font: var(--type-label); font-size: 12px;
  letter-spacing: .02em; flex: none;
}

/* search ---------------------------------------------------------------- */
.search { position: relative; display: flex; align-items: center; }
.search input {
  font: var(--type-body); font-size: 14px; background: var(--paper-000);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  padding: 8px 12px 8px 34px; width: 230px; color: var(--text-primary);
  transition: border-color var(--dur-fast), width var(--dur-base) var(--ease-standard);
}
.search input:focus { outline: none; border-color: var(--ink-900); width: 280px; }
.search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }

/* ---------------------------------------------------------------------
   Icon buttons / chips
   --------------------------------------------------------------------- */
.icbtn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  background: transparent; border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.icbtn--lg { width: 42px; height: 42px; }
.icbtn:hover { background: var(--paper-100); border-color: var(--greige-300); }
.icbtn:active { transform: translateY(1px); }
.icbtn svg { width: 17px; height: 17px; }
.icbtn.is-on { background: var(--ink-900); color: var(--paper-050); border-color: var(--ink-900); }
.icbtn--ghost { border-color: transparent; }
.icbtn--ondark { color: var(--paper-050); border-color: rgba(246,244,239,.28); background: rgba(20,20,21,.35); backdrop-filter: blur(6px); }
.icbtn--ondark:hover { background: rgba(20,20,21,.6); border-color: rgba(246,244,239,.5); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--type-label); font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 7px 13px; border: 1px solid var(--border-hairline); background: var(--paper-000);
  border-radius: var(--radius-pill); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast);
}
.chip:hover { border-color: var(--greige-300); color: var(--text-primary); }
.chip.is-active { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-050); }
.chip .cnt { font-variant-numeric: tabular-nums; opacity: .6; }
.chip.is-active .cnt { opacity: .8; }

.segment { display: inline-flex; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-000); }
.segment button {
  font: var(--type-label); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 7px 14px; background: transparent; border: 0; border-left: 1px solid var(--border-hairline);
  color: var(--text-secondary); cursor: pointer; transition: all var(--dur-fast);
}
.segment button:first-child { border-left: 0; }
.segment button.is-active { background: var(--ink-900); color: var(--paper-050); }
.segment button:not(.is-active):hover { background: var(--paper-100); color: var(--text-primary); }

/* status dot */
.sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ---------------------------------------------------------------------
   Page scaffolding
   --------------------------------------------------------------------- */
.page { width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--space-7) var(--space-7) var(--space-10); }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); flex-wrap: wrap; }
.pagehead h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); }
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-hairline); background: var(--paper-000); margin-bottom: var(--space-7); }
.stat { padding: var(--space-5) var(--space-5); border-left: 1px solid var(--border-hairline); }
.stat:first-child { border-left: 0; }
.stat .v { font: var(--type-h2); font-size: 34px; letter-spacing: var(--tracking-tight); display: flex; align-items: baseline; gap: 8px; }
.stat .v small { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; color: var(--text-muted); }
.stat .l { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-secondary); margin-top: 8px; }

/* ---------------------------------------------------------------------
   Dashboard project cards
   --------------------------------------------------------------------- */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline); }
.proj { background: var(--paper-050); cursor: pointer; display: flex; flex-direction: column; transition: background var(--dur-base); }
.proj:hover { background: var(--paper-100); }
.proj__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-800); }
.proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal, 720ms) var(--ease-entrance); }
.proj:hover .proj__media img { transform: scale(1.045); }
.proj__badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.proj__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.proj__addr { font: var(--type-h3); font-size: 22px; letter-spacing: var(--tracking-tight); line-height: 1.12; text-wrap: pretty; }
.proj__meta { display: flex; flex-direction: column; gap: 3px; }
.proj__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--border-hairline); }

/* progress meter */
.meter { height: 3px; background: var(--paper-200); position: relative; overflow: hidden; flex: 1; }
.meter > i { position: absolute; inset: 0 auto 0 0; background: var(--ink-900); display: block; }
.meter--ondark { background: rgba(246,244,239,.18); }
.meter--ondark > i { background: var(--paper-050); }

/* list view */
.plist { border: 1px solid var(--border-hairline); background: var(--paper-000); }
.prow { display: grid; grid-template-columns: 72px 1.6fr 1fr 1fr 1.1fr 96px; align-items: center; gap: var(--space-4); padding: 12px var(--space-5); border-top: 1px solid var(--border-hairline); cursor: pointer; transition: background var(--dur-fast); }
.prow:first-child { border-top: 0; }
.prow:hover { background: var(--paper-100); }
.prow__thumb { width: 72px; height: 48px; object-fit: cover; background: var(--ink-800); }
.prow.head { cursor: default; background: var(--paper-100); }
.prow.head:hover { background: var(--paper-100); }
.prow.head > div { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-secondary); }

/* ---------------------------------------------------------------------
   Photo grid + tiles (shared by review & client)
   --------------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap, 14px); grid-template-columns: repeat(var(--cols, 4), 1fr); }
.tile {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-800);
  cursor: pointer; outline: 0; --ring: transparent;
  box-shadow: inset 0 0 0 2px var(--ring);
  transition: box-shadow var(--dur-fast);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-reveal, 720ms) var(--ease-entrance), opacity var(--dur-base); }
.tile:hover img { transform: scale(1.04); }
.tile__ph { position: absolute; inset: 0; display: grid; place-items: center; opacity: .25; }
.tile__ph img { width: 40px; height: auto; }
.tile__cap { position: absolute; left: 10px; bottom: 9px; right: 10px; z-index: 2; font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #fff; opacity: 0; transform: translateY(4px); transition: all var(--dur-base); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.tile:hover .tile__cap { opacity: .92; transform: none; }
.tile__scrim { position: absolute; inset: 0; z-index: 1; background: var(--scrim-bottom, linear-gradient(to top, rgba(10,10,10,.55), transparent 45%)); opacity: 0; transition: opacity var(--dur-base); pointer-events: none; }
.tile:hover .tile__scrim, .tile.has-state .tile__scrim { opacity: 1; }
.tile__tools { position: absolute; top: 9px; right: 9px; z-index: 3; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: all var(--dur-base); }
.tile:hover .tile__tools, .tile.is-selected .tile__tools { opacity: 1; transform: none; }
.tile__num { position: absolute; top: 9px; left: 11px; z-index: 3; font: var(--type-mono); font-size: 11px; color: #fff; opacity: .55; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* selection + review states */
.tile.is-selected { --ring: var(--ink-900); }
.tile.st-approved { --ring: var(--signal-positive); }
.tile.st-flagged  { --ring: var(--signal-critical); }
.tile.is-dim img { opacity: .4; filter: grayscale(.3); }
.statetag { position: absolute; left: 9px; bottom: 9px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--radius-xs); font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #fff; background: rgba(20,20,21,.6); backdrop-filter: blur(6px); }
.statetag.st-approved { background: color-mix(in srgb, var(--signal-positive) 82%, #000); }
.statetag.st-flagged { background: color-mix(in srgb, var(--signal-critical) 82%, #000); }

/* corner select checkbox */
.selbox { position: absolute; top: 9px; left: 9px; z-index: 4; width: 22px; height: 22px; border-radius: var(--radius-xs); border: 1.5px solid rgba(255,255,255,.85); background: rgba(20,20,21,.32); backdrop-filter: blur(4px); display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-fast); }
.tile:hover .selbox, .tile.is-selected .selbox { opacity: 1; }
.tile.is-selected .selbox { background: var(--ink-900); border-color: var(--ink-900); }
.selbox svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.tile.is-selected .selbox svg { opacity: 1; }

/* favourite heart pulse (client) */
.tile__heart.is-on svg { fill: #fff; }

/* rating stars on tile */
.tstars { position: absolute; right: 9px; bottom: 9px; z-index: 3; display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-base); }
.tile:hover .tstars, .tile.has-rating .tstars { opacity: 1; }
.tstars svg { width: 13px; height: 13px; color: #fff; }
.tstars .on svg { fill: #fff; }
.tstars .off svg { opacity: .45; }

/* comment count pin on tile */
.cbubble { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-pill); background: rgba(20,20,21,.6); backdrop-filter: blur(6px); color: #fff; font: var(--type-mono); font-size: 11px; }
.cbubble svg { width: 12px; height: 12px; }

/* label dot */
.ldot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

/* ---------------------------------------------------------------------
   Review workspace layout
   --------------------------------------------------------------------- */
.work { display: grid; grid-template-columns: 288px 1fr; flex: 1; min-height: 0; }
.rail { border-right: 1px solid var(--border-hairline); padding: var(--space-6); background: var(--paper-000); position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow: auto; }
.rail h2 { font: var(--type-h3); font-size: 24px; letter-spacing: var(--tracking-tight); line-height: 1.1; text-wrap: pretty; }
.rail__sec { padding: var(--space-5) 0; border-top: 1px solid var(--border-hairline); }
.rail__sec:first-of-type { border-top: 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.kv .k { color: var(--text-muted); font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.kv .vv { text-align: right; }
.filterlist { display: flex; flex-direction: column; gap: 2px; }
.frow { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; margin: 0 -10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; transition: background var(--dur-fast); }
.frow:hover { background: var(--paper-100); }
.frow.is-active { background: var(--ink-900); color: var(--paper-050); }
.frow .cnt { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 13px; }
.frow.is-active .cnt { color: var(--text-on-inverse-muted); }

.workmain { min-width: 0; display: flex; flex-direction: column; }
.worktools { position: sticky; top: 64px; z-index: 20; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: color-mix(in srgb, var(--paper-050) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-hairline); flex-wrap: wrap; }
.worktools .prog { font: var(--type-label); font-size: 13px; color: var(--text-secondary); }
.worktools .prog b { color: var(--text-primary); font-weight: 400; }
.workgrid { padding: var(--space-6); }

/* selection action bar */
.actionbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(0); z-index: 60; display: flex; align-items: center; gap: var(--space-4); padding: 10px 12px 10px 20px; background: var(--ink-900); color: var(--paper-050); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); }
.actionbar .n { font: var(--type-h3); font-size: 18px; font-family: var(--font-display); }
.actionbar .lbl { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-on-inverse-muted); }
.actionbar .vline { width: 1px; height: 22px; background: rgba(246,244,239,.2); }
.barbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(246,244,239,.24); background: transparent; color: var(--paper-050); font: var(--type-label); font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide); cursor: pointer; transition: background var(--dur-fast); }
.barbtn:hover { background: rgba(246,244,239,.12); }
.barbtn svg { width: 15px; height: 15px; }
.barbtn--solid { background: var(--paper-050); color: var(--ink-900); border-color: var(--paper-050); }
.barbtn--solid:hover { background: var(--greige-100); }

/* ---------------------------------------------------------------------
   Image viewer (lightbox)
   --------------------------------------------------------------------- */
.viewer { position: fixed; inset: 0; z-index: 80; background: var(--ink-900); display: grid; grid-template-columns: 1fr var(--panel, 380px); grid-template-rows: 1fr auto; }
.viewer.no-panel { grid-template-columns: 1fr; }
.viewer__stage { grid-row: 1 / 2; position: relative; display: grid; place-items: center; overflow: hidden; min-width: 0; }
.viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.viewer__imgwrap { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 28px 28px 84px; }
.viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.viewer__nav.prev { left: 18px; } .viewer__nav.next { right: 18px; }
.viewer__close { position: absolute; top: 16px; left: 16px; z-index: 5; }
.viewer__meta { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 4; text-align: center; color: var(--paper-050); }
.viewer__meta .a { font-family: var(--font-display); font-size: 18px; }
.viewer__meta .b { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); margin-top: 3px; }

/* drawing markup layer */
.canvasframe { position: relative; display: inline-block; line-height: 0; max-width: 100%; max-height: 100%; }
.canvasframe .viewer__img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 230px); object-fit: contain; }
.canvasframe.is-plan { width: min(70%, 620px); aspect-ratio: 3 / 2; background: var(--paper-100); }
.markup-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pin { position: absolute; z-index: 4; width: 24px; height: 24px; border-radius: 50% 50% 50% 2px; background: var(--paper-050); color: var(--ink-900); display: grid; place-items: center; font: var(--type-mono); font-size: 12px; transform: translate(-50%, -100%); box-shadow: var(--shadow-md); }

/* markup toolbar */
.drawbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; background: var(--ink-800); border: 1px solid rgba(246,244,239,.18); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); color: var(--paper-050); max-width: calc(100vw - 32px); flex-wrap: wrap; }
.drawbar__lbl { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); }
.drawbar__grp { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
.swatch { width: 19px; height: 19px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink-800), 0 0 0 4px var(--paper-050); }
.wbtn { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 1px solid rgba(246,244,239,.22); border-radius: var(--radius-sm); cursor: pointer; }
.wbtn span { background: var(--paper-050); border-radius: 50%; display: block; }
.wbtn.on { background: rgba(246,244,239,.16); }

/* viewer side panel */
.vpanel { grid-row: 1 / 3; background: var(--paper-050); border-left: 1px solid rgba(246,244,239,.14); display: flex; flex-direction: column; min-height: 0; }
.vpanel__head { padding: var(--space-6) var(--space-6) var(--space-5); border-bottom: 1px solid var(--border-hairline); }
.vpanel__addr { font: var(--type-h3); font-size: 20px; letter-spacing: var(--tracking-tight); line-height: 1.15; }
.vpanel__scroll { overflow: auto; flex: 1; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.vpanel__sec .eylab { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-secondary); margin-bottom: var(--space-3); }
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.dbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-hairline); background: var(--paper-000); cursor: pointer; font: var(--type-label); font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide); border-radius: var(--radius-sm); transition: all var(--dur-fast); }
.dbtn svg { width: 16px; height: 16px; }
.dbtn:hover { background: var(--paper-100); }
.dbtn.on-approve.is-on { background: var(--signal-positive); border-color: var(--signal-positive); color: #fff; }
.dbtn.on-flag.is-on { background: var(--signal-critical); border-color: var(--signal-critical); color: #fff; }

.starpick { display: flex; gap: 4px; }
.starpick button { background: none; border: 0; cursor: pointer; padding: 2px; color: var(--text-muted); }
.starpick button svg { width: 22px; height: 22px; }
.starpick button.on { color: var(--ink-900); } .starpick button.on svg { fill: var(--ink-900); }

.labels { display: flex; gap: var(--space-3); }
.labelpick { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-hairline); cursor: pointer; position: relative; }
.labelpick.is-on { box-shadow: 0 0 0 2px var(--paper-050), 0 0 0 4px var(--ink-900); }

/* comments thread */
.thread { display: flex; flex-direction: column; gap: var(--space-4); }
.cmt { display: flex; gap: var(--space-3); }
.cmt__pin { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-900); color: var(--paper-050); display: grid; place-items: center; font: var(--type-mono); font-size: 11px; margin-top: 2px; }
.cmt__pin.unpinned { background: var(--paper-200); color: var(--text-muted); }
.cmt__b { flex: 1; }
.cmt__who { font: var(--type-label); font-size: 13px; }
.cmt__who span { color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-left: 6px; }
.cmt__txt { font-size: 14.5px; line-height: 1.5; margin-top: 3px; color: var(--text-secondary); }
.cmt__role { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.composer { border-top: 1px solid var(--border-hairline); padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: 10px; background: var(--paper-000); }
.composer textarea { width: 100%; resize: none; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 10px 12px; font: var(--type-body); font-size: 14px; min-height: 60px; background: var(--paper-000); }
.composer textarea:focus { outline: none; border-color: var(--ink-900); }
.composer .hint { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

/* filmstrip */
.strip { grid-column: 1 / 2; grid-row: 2 / 3; display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; background: rgba(10,10,10,.6); border-top: 1px solid rgba(246,244,239,.1); }
.strip.full { grid-column: 1 / -1; }
.strip__t { flex: none; width: 84px; height: 56px; object-fit: cover; opacity: .5; cursor: pointer; outline: 2px solid transparent; transition: opacity var(--dur-fast), outline-color var(--dur-fast); background: var(--ink-700); }
.strip__t:hover { opacity: .85; }
.strip__t.is-active { opacity: 1; outline-color: var(--paper-050); }

/* compare mode */
.compare { position: fixed; inset: 0; z-index: 85; background: var(--ink-900); display: flex; flex-direction: column; }
.compare__pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-height: 0; }
.compare__cell { position: relative; display: grid; place-items: center; overflow: hidden; padding: 28px; }
.compare__cell img { max-width: 100%; max-height: 100%; object-fit: contain; }
.compare__tag { position: absolute; top: 16px; left: 16px; color: var(--paper-050); font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.compare__pickbtn { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); }

/* ---------------------------------------------------------------------
   Client gallery
   --------------------------------------------------------------------- */
.chero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink-900); }
.chero__bg { position: absolute; inset: 0; }
.chero__bg img { width: 100%; height: 100%; object-fit: cover; }
.chero__scrim { position: absolute; inset: 0; background: var(--scrim-full, linear-gradient(to top, rgba(10,10,10,.78), rgba(10,10,10,.12) 55%, rgba(10,10,10,.32))); }
.chero__inner { position: relative; z-index: 2; width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--space-9) var(--space-7) var(--space-8); color: var(--paper-050); }
.chero__eyebrow { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); margin-bottom: var(--space-4); }
.chero__title { font: var(--type-display); font-size: clamp(40px, 6vw, 84px); line-height: .98; letter-spacing: var(--tracking-tightest); max-width: 14ch; text-wrap: balance; }
.chero__sub { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); font: var(--type-body-lg); }
.chero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }
.chero__credit { position: absolute; top: var(--space-7); right: var(--space-7); z-index: 2; }
.chero__credit img { height: 30px; }

.cbar { position: sticky; top: 64px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-7); background: color-mix(in srgb, var(--paper-050) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-hairline); flex-wrap: wrap; }
.ctabs { display: flex; gap: var(--space-5); }
.ctab { font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); cursor: pointer; padding: 6px 0; border-bottom: 1.5px solid transparent; display: flex; align-items: center; gap: 8px; }
.ctab:hover { color: var(--text-primary); }
.ctab.is-active { color: var(--text-primary); border-bottom-color: var(--ink-900); }
.ctab .cnt { font-variant-numeric: tabular-nums; color: var(--text-muted); }

.cgallery { max-width: 1480px; margin: 0 auto; padding: var(--space-7); }
.cfoot { background: var(--ink-900); color: var(--text-on-inverse-muted); padding: var(--space-8) var(--space-7) var(--space-6); margin-top: var(--space-9); }
.cfoot__top { max-width: 1480px; margin: 0 auto; display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; align-items: flex-end; }
.cfoot img { height: 22px; }
.cfoot a { color: var(--text-on-inverse-muted); text-decoration: none; }
.cfoot a:hover { color: var(--paper-050); }

/* ---------------------------------------------------------------------
   Modals + toasts
   --------------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(10,10,10,.5); backdrop-filter: blur(3px); display: grid; place-items: center; padding: var(--space-6); animation: fade var(--dur-base) var(--ease-standard); }
.modal { background: var(--paper-050); width: 100%; max-width: 460px; border: 1px solid var(--border-hairline); box-shadow: var(--shadow-lg); animation: pop var(--dur-slow) var(--ease-entrance); }
.modal--wide { max-width: 560px; }
.modal__head { padding: var(--space-6) var(--space-6) var(--space-4); }
.modal__head h3 { font: var(--type-h2); font-size: 30px; letter-spacing: var(--tracking-tight); text-wrap: pretty; }
.modal__body { padding: 0 var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.modal__foot { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-hairline); display: flex; justify-content: flex-end; gap: var(--space-3); }
.optrow { display: flex; flex-direction: column; gap: var(--space-2); }
.optcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.optcard { border: 1px solid var(--border-hairline); padding: var(--space-4); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--dur-fast); }
.optcard:hover { background: var(--paper-100); }
.optcard.is-on { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.optcard .t { font: var(--type-label); font-size: 14px; }
.optcard .d { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--ink-900); color: var(--paper-050); padding: 13px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 14px; animation: slidein var(--dur-slow) var(--ease-entrance); max-width: 380px; }
.toast svg { width: 17px; height: 17px; flex: none; }
.toast .sub { color: var(--text-on-inverse-muted); font-size: 12.5px; }

/* progress bar (zip prep) */
.zipbar { height: 4px; background: var(--paper-200); overflow: hidden; }
.zipbar > i { display: block; height: 100%; background: var(--ink-900); width: 0; transition: width var(--dur-base) linear; }

/* ---------------------------------------------------------------------
   Persona / prototype switcher
   --------------------------------------------------------------------- */
.persona { position: fixed; left: 18px; bottom: 18px; z-index: 70; background: var(--ink-900); color: var(--paper-050); border-radius: var(--radius-pill); display: flex; align-items: center; padding: 5px 6px 5px 16px; box-shadow: var(--shadow-lg); gap: 10px; }
.persona__lbl { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); font-size: 10px; }
.persona__opts { display: flex; background: rgba(246,244,239,.1); border-radius: var(--radius-pill); padding: 3px; }
.persona__opts button { font: var(--type-label); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-on-inverse-muted); background: transparent; border: 0; padding: 6px 13px; border-radius: var(--radius-pill); cursor: pointer; transition: all var(--dur-fast); }
.persona__opts button.is-on { background: var(--paper-050); color: var(--ink-900); }

/* ---------------------------------------------------------------------
   Guest reviewer banner
   --------------------------------------------------------------------- */
.guestbar { background: var(--ink-900); color: var(--paper-050); padding: 10px var(--space-7); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 13px; }
.guestbar .eyl { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-on-inverse-muted); }

/* empty states */
.empty { padding: var(--space-9) var(--space-6); text-align: center; color: var(--text-muted); }
.empty .serif { font: var(--type-h2); color: var(--text-secondary); display: block; margin-bottom: var(--space-3); }

/* ---- tweak: olive accent variant ---- */
.app.acc-olive { --accent: var(--signal-positive); }
.app.acc-olive .chip.is-active,
.app.acc-olive .segment button.is-active,
.app.acc-olive .frow.is-active { background: var(--signal-positive); border-color: var(--signal-positive); }
.app.acc-olive .meter > i { background: var(--signal-positive); }
.app.acc-olive .topnav a.is-active,
.app.acc-olive .ctab.is-active { border-bottom-color: var(--signal-positive); }
.app.acc-olive .tile.is-selected { --ring: var(--signal-positive); }

/* ---- tweak: client gallery ink theme ---- */
.client--ink { background: var(--ink-900); }
.client--ink .cbar { background: color-mix(in srgb, var(--ink-900) 92%, transparent); border-bottom-color: rgba(246,244,239,.14); }
.client--ink .ctab { color: var(--text-on-inverse-muted); }
.client--ink .ctab:hover { color: var(--paper-050); }
.client--ink .ctab.is-active { color: var(--paper-050); border-bottom-color: var(--paper-050); }
.client--ink .ctab .cnt { color: var(--greige-400); }
.client--ink .chip { background: transparent; color: var(--text-on-inverse-muted); border-color: rgba(246,244,239,.22); }
.client--ink .chip:hover { color: var(--paper-050); border-color: rgba(246,244,239,.45); }
.client--ink .chip.is-active { background: var(--paper-050); color: var(--ink-900); border-color: var(--paper-050); }
.client--ink .icbtn { color: var(--paper-050); border-color: rgba(246,244,239,.22); }
.client--ink .icbtn:hover { background: rgba(246,244,239,.1); border-color: rgba(246,244,239,.45); }
.client--ink .cgallery { background: var(--ink-900); }
.client--ink .empty { color: var(--text-on-inverse-muted); }
.client--ink .empty .serif { color: var(--greige-200); }

/* animations */
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .projects { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .work { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--border-hairline); }
  .viewer { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .vpanel { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 90vw); z-index: 6; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-entrance); }
  .vpanel.open { transform: none; }
}
@media (max-width: 720px) {
  .page { padding: var(--space-6) var(--space-4) var(--space-9); }
  .topbar { padding: 0 var(--space-4); gap: var(--space-4); height: 58px; }
  .topnav, .search, .topbar__divider { display: none; }
  .projects { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .grid { --cols: 2 !important; --gap: 8px; }
  .chero__inner { padding: var(--space-7) var(--space-4) var(--space-6); }
  .chero__credit { display: none; }
  .prow { grid-template-columns: 56px 1fr 84px; }
  .prow__c-agency, .prow__c-date, .prow__c-status { display: none; }
  .persona { left: 10px; right: 10px; bottom: 10px; justify-content: center; }
  .compare__pair { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .cbar { top: 58px; }
  .worktools { top: 58px; }
}