/* ============================================================================
   Shovl — application stylesheet
   ----------------------------------------------------------------------------
   The greyscale wireframe skinned with the Shovl design system. Every colour,
   size, radius, shadow and duration here is a token from ds/tokens/ — there are
   no literal colours below. If a value needs changing, change the token.

   The rules the system set, enforced here:
     · status colour is a SECOND channel — glyph + word always present
     · the six closing statuses share one quiet neutral; only Accepted keeps colour
     · rows, not cards, for lists; two card surfaces only
     · no truncation anywhere — everything wraps
     · light and dark from one set of tokens ([data-theme])
   ========================================================================== */

@import url("ds/styles.css");
@import url("icons.css");

/* ---------- app-level ---------------------------------------------------- */
:root { --row-y: 14px; --list-w: 360px; }
body.dense { --row-y: 9px; }

html, body { height: 100%; overflow: hidden; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-pill);
  border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes shovl-tl-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes shovl-fade  { from { opacity: 0; } }
@keyframes shovl-sheet { from { transform: translateY(14px); opacity: 0; } }

/* ---------- shell -------------------------------------------------------- */
#shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr;
         height: 100vh; background: var(--surface-page); overflow: hidden; }
body.is-mobile #shell { grid-template-columns: 1fr; }
body.frame-mobile { display: grid; place-items: center; background: var(--surface-sunken); }
body.frame-mobile #shell { width: 390px; height: 844px; max-height: calc(100vh - 40px);
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-2xl);
  overflow: hidden; box-shadow: var(--shadow-xl); }

/* ---------- sidebar ------------------------------------------------------ */
.rail { display: flex; flex-direction: column; background: var(--surface-card);
        border-right: var(--border-w) solid var(--border-subtle); overflow-y: auto; }
body.is-mobile .rail { display: none; }
.brand { height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-4);
         padding: 0 var(--space-6); flex: none; }
.brand .mark { width: 26px; height: 26px; border-radius: var(--radius-sm); flex: none; }
.brand .name { font-family: var(--font-display); font-size: var(--text-lg);
               font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight);
               color: var(--text-strong); }
.railacts { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.navgroup { padding: 0 var(--space-5); flex: 1; }
.navlink { display: flex; align-items: center; gap: var(--space-5); width: 100%;
           padding: var(--space-4) var(--space-5); border-radius: var(--radius-control);
           color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium);
           transition: var(--transition-control); }
.navlink .lbl { flex: 1; }
.navcount { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.navlink[aria-current="page"] .navcount { color: var(--text-brand); }
.navlink:hover { background: var(--action-ghost-hover); color: var(--text-body); }
.navlink[aria-current="page"] { background: var(--surface-brand-soft); color: var(--text-brand);
                                font-weight: var(--weight-semibold); }
.period { padding: var(--space-6); border-top: var(--border-w) solid var(--border-subtle);
          display: flex; flex-direction: column; gap: var(--space-2); }
.period .pmeta { font-size: var(--text-xs); color: var(--text-subtle); line-height: var(--leading-normal); }
.period button { font-size: var(--text-sm); color: var(--text-link); width: fit-content; }
.period button:hover { color: var(--text-link-hover); text-decoration: underline; }
.period .plinks { display: flex; gap: var(--space-6); margin-top: var(--space-1); }

/* ---------- top bar ------------------------------------------------------ */
.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; position: relative; }
.topbar { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: var(--space-5);
          padding: 0 var(--page-pad-desktop); border-bottom: var(--border-w) solid var(--border-subtle);
          background: color-mix(in oklab, var(--surface-page) 84%, transparent);
          backdrop-filter: var(--blur-panel); position: relative; z-index: var(--z-sticky); }
.topbar h1 { font-size: var(--text-2xl); }
.topbar .grow { flex: 1; }

/* the quick-copy pill: a search-shaped affordance, because it behaves like one */
.copypill { display: flex; align-items: center; gap: var(--space-4); height: 34px;
            padding: 0 var(--space-3) 0 var(--space-5); border-radius: var(--radius-pill);
            border: var(--border-w) solid var(--border-subtle); background: var(--surface-sunken);
            color: var(--text-muted); font-size: var(--text-sm); transition: var(--transition-control); }
.copypill:hover { border-color: var(--border-strong); background: var(--surface-card); color: var(--text-body); }
.copypill .lbl { flex: 1; }
.topbar .copypill { width: 230px; }
.railacts .copypill { width: 100%; }
.divider { width: 1px; height: 22px; background: var(--border-subtle); }

.surface { flex: 1; overflow: auto; min-height: 0; }
.pad { max-width: var(--content-max); margin: 0 auto; padding: 26px var(--page-pad-desktop) 80px; }
.limit { max-width: 1000px; }

/* ---------- mobile chrome ------------------------------------------------ */
.mtop, .tabbar { display: none; }
body.is-mobile .topbar { display: none; }
body.is-mobile .mtop { display: flex; align-items: center; gap: var(--space-5); flex: none;
  padding: 10px var(--page-pad-mobile) var(--space-4);
  border-bottom: var(--border-w) solid var(--border-subtle);
  background: color-mix(in oklab, var(--surface-page) 88%, transparent);
  backdrop-filter: var(--blur-panel); position: relative; z-index: var(--z-sticky); }
body.is-mobile .mtop h1 { font-size: var(--text-xl); }
body.is-mobile .pad { padding: 18px var(--page-pad-mobile) 90px; }
body.is-mobile .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); flex: none;
  height: var(--tabbar-h); border-top: var(--border-w) solid var(--border-subtle);
  background: color-mix(in oklab, var(--surface-card) 88%, transparent);
  backdrop-filter: var(--blur-panel); }
.tabbar button { display: grid; justify-items: center; align-content: center; gap: var(--space-1);
  font-size: var(--text-2xs); color: var(--text-subtle); font-weight: var(--weight-medium); }
.tabbar button[aria-current="page"] { color: var(--text-brand); font-weight: var(--weight-semibold); }

/* ---------- buttons ------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
       height: var(--control-h-md); padding: 0 var(--space-6);
       border: var(--border-w) solid var(--border-default); border-radius: var(--radius-control);
       background: var(--action-secondary); color: var(--text-body);
       font-size: var(--text-sm); font-weight: var(--weight-medium);
       white-space: nowrap; text-decoration: none; transition: var(--transition-control); }
.btn:hover { background: var(--action-secondary-hover); border-color: var(--border-strong); }
.btn:active { transform: scale(var(--press-scale)); }
.btn.primary { background: var(--action-primary); border-color: var(--action-primary); color: var(--text-inverse); }
.btn.primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn.ghost:hover { background: var(--action-ghost-hover); color: var(--text-body); border-color: transparent; }
.btn.small { height: var(--control-h-sm); padding: 0 var(--space-5); font-size: var(--text-xs); }
.btn.wide { width: 100%; }
.btn.go { border-color: var(--border-strong); font-weight: var(--weight-semibold); }
.btn .lc { width: 15px; height: 15px; }
.btn.small .lc { width: 14px; height: 14px; }

.iconbtn { display: inline-grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm);
           border-radius: var(--radius-control); color: var(--text-muted); transition: var(--transition-control); }
.iconbtn:hover { background: var(--action-ghost-hover); color: var(--text-body); }
.moreb { composes: iconbtn; }
.moreb { display: inline-grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm);
         border-radius: var(--radius-control); color: var(--text-subtle); flex: none;
         transition: var(--transition-control); }
.moreb:hover { background: var(--action-ghost-hover); color: var(--text-body); }

.kbd { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle);
       border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-xs);
       padding: 1px var(--space-3); background: var(--surface-card); }
.btn.primary .kbd { border-color: transparent; background: rgba(255,255,255,.16); color: var(--text-inverse); }

.chip { display: inline-flex; align-items: center; gap: var(--space-3); height: 26px;
        padding: 0 var(--space-5); border-radius: var(--radius-pill);
        border: var(--border-w) solid var(--border-default); background: var(--surface-card);
        color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium);
        white-space: nowrap; transition: var(--transition-control); }
.chip:hover { border-color: var(--border-strong); color: var(--text-body); }
.chip.on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-inverse); }

.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-4);
       border-radius: var(--radius-sm); background: var(--surface-sunken);
       color: var(--text-muted); font-size: var(--text-2xs); font-weight: var(--weight-medium); white-space: nowrap; }

/* ---------- status, ball, activity — the signalling trio ----------------- */
.stag { display: inline-flex; align-items: center; gap: var(--space-3); height: 20px;
        padding: 0 var(--space-4) 0 7px; border-radius: var(--radius-pill);
        font-size: var(--text-2xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.stag .lc { width: 12px; height: 12px; }
.stag.md { height: 24px; padding: 0 var(--space-5) 0 var(--space-4); font-size: var(--text-xs); }
.stag.md .lc { width: 13px; height: 13px; }
/* one tone per status; the six closing ones deliberately share `closed` */
.stag.t-saved     { background: var(--status-saved-bg);     color: var(--status-saved-fg); }
.stag.t-applied   { background: var(--status-applied-bg);   color: var(--status-applied-fg); }
.stag.t-talking   { background: var(--status-talking-bg);   color: var(--status-talking-fg); }
.stag.t-interview { background: var(--status-interview-bg); color: var(--status-interview-fg); }
.stag.t-offer     { background: var(--status-offer-bg);     color: var(--status-offer-fg); }
.stag.t-accepted  { background: var(--status-accepted-bg);  color: var(--status-accepted-fg); }
.stag.t-closed    { background: var(--status-closed-bg);    color: var(--status-closed-fg); padding: 0; }

/* shape first, colour second — survives greyscale and colour-blindness */
.ball { width: 8px; height: 8px; flex: none; border-radius: var(--radius-circle); display: inline-block; }
.ball.you    { background: var(--ball-you); }
.ball.them   { background: var(--ball-them); box-shadow: inset 0 0 0 1.5px var(--ball-them-edge); }
.ball.sched  { background: var(--ball-sched); box-shadow: 0 0 0 3px var(--ball-sched-ring); }
.ball.closed { background: var(--ball-closed); opacity: .8; }

.actpill { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-4);
           border-radius: var(--radius-pill); font-size: var(--text-2xs);
           font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
           border: var(--border-w) solid; white-space: nowrap; }
.actpill.on       { color: var(--activity-active-fg);   background: var(--activity-active-bg);   border-color: var(--activity-active-border); }
.actpill.off      { color: var(--activity-inactive-fg); background: var(--activity-inactive-bg); border-color: var(--activity-inactive-border); }
.actpill.snoozed  { color: var(--activity-snoozed-fg);  background: var(--activity-snoozed-bg);  border-color: var(--activity-snoozed-border); }
.inact { display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
         border-radius: var(--radius-pill); font-size: var(--text-2xs);
         font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps);
         text-transform: uppercase; color: var(--activity-inactive-fg);
         border: var(--border-w) solid var(--activity-inactive-border); }

/* ---------- section heads, health line ----------------------------------- */
.sechead { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
           margin: 34px 0 var(--space-6); }
.sechead .eyebrow { font-size: var(--text-2xs); font-weight: var(--weight-bold);
                    letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.sechead .count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-disabled); }
.sechead .aside { font-size: var(--text-xs); color: var(--text-subtle); margin-left: auto; }
.sechead .lc { width: 14px; height: 14px; }
.i-clay { color: var(--activity-quiet-fg); }
.i-brand { color: var(--text-brand); }
.i-subtle { color: var(--text-subtle); }

.dateheading { display: flex; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.dateheading h2 { font-family: var(--font-display); font-size: var(--text-3xl);
                  font-weight: var(--weight-bold); letter-spacing: var(--tracking-tighter); }
.dateheading .gloss { font-size: var(--text-sm); color: var(--text-subtle); padding-bottom: var(--space-2); }

.health { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
          margin-top: var(--space-5); font-size: var(--text-sm); color: var(--text-muted); }
.health b { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--text-strong); }
.health .sep { color: var(--text-disabled); }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.spark i { width: 4px; background: var(--indigo-200); border-radius: 1px; display: block; }
.spark i.now { background: var(--action-primary); }

/* ---------- worklist rows (the Dashboard's row-cards) -------------------- */
.work { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
        padding: var(--row-y) var(--space-6); margin-bottom: var(--space-4);
        background: var(--surface-card); border: var(--border-w) solid var(--border-subtle);
        border-radius: var(--radius-card); cursor: pointer;
        transition: border-color var(--dur-fast) var(--ease-standard),
                    background var(--dur-fast) var(--ease-standard); }
.work:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.work.gone { opacity: .86; }
.work .body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.work .t, .work .s, .work .sub2 { display: block; }
.work .sub2 { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.work .meta .txt { font-size: var(--text-xs); color: var(--text-subtle); }
.topbar .btn.primary.small { height: 32px; }
.work .t { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong);
           letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; text-wrap: pretty; }
.work .s { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.work .meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: 7px; }
.work .meta .txt { font-size: var(--text-xs); color: var(--text-subtle); }
.work .acts { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; position: relative; }
body.is-mobile .work .acts { width: 100%; justify-content: flex-end; }

/* the one Dashboard card that is a card — because it is the thing happening next */
.herocard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--card-pad);
            margin-bottom: var(--space-4); background: var(--surface-card);
            border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-card);
            box-shadow: var(--shadow-sm); }
.herocard .when { font-family: var(--font-mono); font-size: var(--text-xs);
                  letter-spacing: var(--tracking-caps); text-transform: uppercase;
                  color: var(--activity-quiet-fg); font-weight: var(--weight-medium); }
.herocard h3 { font-family: var(--font-display); font-size: var(--text-xl);
               font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight);
               margin-top: 2px; text-wrap: pretty; }
.herocard .who { font-size: var(--text-sm); color: var(--text-muted); }
.herocard .acts { display: flex; gap: var(--space-4); margin-top: var(--space-5); flex-wrap: wrap; }

.dashgrid { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(0,1fr);
            gap: 0 44px; align-items: start; }
.dashgrid > .quietcol { padding-left: 44px; }
body.is-mobile .dashgrid, body.narrow .dashgrid { display: block; }
body.is-mobile .dashgrid > .quietcol, body.narrow .dashgrid > .quietcol { padding-left: 0; border-left: 0; }
.dashacts { display: flex; gap: var(--space-4); margin-bottom: var(--space-6); }
.dashacts .btn { flex: 1; height: var(--control-h-lg); }

/* ---------- jobs: list + record ------------------------------------------ */
.split { display: flex; flex: 1; min-height: 0; position: relative; }
.listcol { width: var(--list-w); flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0;
           border-right: var(--border-w) solid var(--border-subtle); background: var(--surface-card); }
body.is-mobile .listcol { flex: 1; width: auto; border-right: 0; }
.listtools { padding: var(--space-5) var(--space-5) 10px; display: flex; flex-direction: column;
             gap: 10px; border-bottom: var(--border-w) solid var(--border-subtle); flex: none; }
.jobsbar { display: flex; gap: var(--space-4); align-items: center; }
.search { flex: 1; display: flex; align-items: center; gap: var(--space-4); height: var(--control-h-md);
          padding: 0 var(--space-5); border-radius: var(--radius-pill);
          border: var(--border-w) solid var(--border-default); background: var(--surface-sunken);
          color: var(--text-muted); transition: var(--transition-control); }
.search:focus-within { border-color: var(--border-focus); background: var(--surface-card); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
                font-size: var(--text-sm); color: var(--text-body); }
.search input::placeholder { color: var(--text-subtle); }
.filterrow { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: 2px; }
.filterrow::-webkit-scrollbar { height: 0; }
.listscroll { flex: 1; overflow: auto; padding: var(--space-3) var(--space-4) var(--space-8); }

.row { display: flex; flex-direction: column; width: 100%; margin-bottom: var(--space-3);
       padding: 13px 15px; border-radius: var(--radius-card);
       border: var(--border-w) solid transparent; background: transparent;
       cursor: pointer; transition: var(--transition-control); }
body.dense .row { padding: 11px 13px; }
.row:hover { background: var(--action-ghost-hover); }
.row[aria-selected="true"] { background: var(--surface-brand-soft); border-color: var(--border-brand); }
.row .co { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong);
           letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; text-wrap: pretty; }
.row .ro { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.row .st { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.row .stx { font-size: var(--text-xs); color: var(--text-subtle); }
.row.inactive { opacity: .72; }

.detail { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.dhead { position: sticky; top: 0; z-index: 5; padding: var(--space-8) var(--page-pad-desktop) 18px;
         background: color-mix(in oklab, var(--surface-page) 92%, transparent);
         backdrop-filter: var(--blur-panel); border-bottom: var(--border-w) solid var(--border-subtle); }
body.is-mobile .dhead { position: static; padding: var(--space-2) var(--page-pad-mobile) var(--space-6);
                        backdrop-filter: none; }
.dhead h2 { font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-bold);
            letter-spacing: -0.025em; text-wrap: pretty; overflow-wrap: anywhere; }
.dhead .role { font-size: var(--text-md); color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.dhead .metaline { font-size: var(--text-xs); color: var(--text-subtle); margin-top: 5px; }
.dstate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--space-6); }
.statusbtn { display: inline-flex; align-items: center; gap: var(--space-3);
             border: var(--border-w) solid var(--border-default); border-radius: var(--radius-pill);
             padding: 3px 10px 3px 6px; transition: var(--transition-control); }
.statusbtn:hover { background: var(--action-secondary-hover); }
.dacts { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }

.dbody { flex: 1; overflow: auto; min-height: 0; display: grid;
         grid-template-columns: minmax(0,1fr) 260px; gap: 36px;
         padding: 26px var(--page-pad-desktop) 80px; align-items: start; }
body.narrow .dbody, body.is-mobile .dbody { display: flex; flex-direction: column-reverse; gap: 26px; }
body.is-mobile .dbody { padding: 22px var(--page-pad-mobile) 90px; }
.glance { position: sticky; top: var(--space-6); display: flex; flex-direction: column; min-width: 0;
          padding: var(--space-6) 18px; background: var(--surface-card);
          border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-card); }
body.narrow .glance, body.is-mobile .glance { position: static; }
.glance .gh { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: 0.09em;
              text-transform: uppercase; color: var(--text-muted); padding-bottom: var(--space-4); }
.glance .grow { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; }
.glance .k { font-size: var(--text-2xs); color: var(--text-subtle); letter-spacing: var(--tracking-wide); }
.glance .v { font-size: var(--text-sm); color: var(--text-body); overflow-wrap: anywhere; text-wrap: pretty; }
.glance .tags { display: flex; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-5); }

/* ---------- timeline ----------------------------------------------------- */
.tl { margin-top: var(--space-6); }
.tlitem { display: grid; grid-template-columns: 26px 1fr; gap: var(--space-5);
          position: relative; padding-bottom: var(--space-7); }
.tlitem::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 1px;
                  background: var(--border-subtle); }
.tlitem.last::before { display: none; }
.tlitem .dot { width: 26px; height: 26px; border-radius: var(--radius-circle); display: grid;
               place-items: center; background: var(--surface-brand-soft); color: var(--text-brand);
               border: var(--border-w) solid var(--activity-active-border); }
.tlitem.soft .dot { background: var(--surface-sunken); color: var(--text-subtle); border-color: var(--border-subtle); }
.tlitem .dot .lc { width: 13px; height: 13px; }
.tlitem .d { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.tlitem .h { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-strong); margin-top: 1px; }
.tlitem .n { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2);
             max-width: var(--prose-max); text-wrap: pretty; }
.tlitem.new { animation: shovl-tl-in var(--dur-slow) var(--ease-out) both; }
.tlmore { font-size: var(--text-xs); color: var(--text-link); padding-left: 32px; }

.expander { display: flex; align-items: center; justify-content: center; gap: var(--space-4);
            width: 100%; margin-top: 18px; height: var(--control-h-md);
            border: var(--border-w) dashed var(--border-default); border-radius: var(--radius-control);
            font-size: var(--text-sm); color: var(--text-muted); transition: var(--transition-control); }
.expander:hover { background: var(--action-ghost-hover); color: var(--text-body); border-style: solid; }
.adfull { margin-top: var(--space-5); padding: var(--space-6); background: var(--surface-inset);
          border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-card);
          font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-body);
          max-width: var(--prose-max); white-space: pre-wrap; text-wrap: pretty; }

.facts { margin-top: var(--space-4); }
.fact { display: grid; grid-template-columns: minmax(96px,148px) 1fr; gap: var(--space-6);
        align-items: baseline; padding: 9px 0; }
.fact .k { font-size: var(--text-sm); color: var(--text-subtle); font-weight: var(--weight-medium); }
.fact .v { font-size: var(--text-sm); color: var(--text-body); overflow-wrap: anywhere; }
.fact.long .v { white-space: pre-wrap; max-width: var(--prose-max); }
.editable { border-bottom: 1px dashed var(--border-strong); cursor: text; }
.editable:hover { border-bottom-color: var(--text-subtle); background: var(--surface-scrim); }
.editable:focus { outline: none; border-bottom: 1px solid var(--border-focus); background: var(--surface-scrim); }
.editable:empty::before { content: attr(data-ph); color: var(--text-disabled); }
.addrow { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-6); }

/* ---------- my profile — copy cards --------------------------------------- */
.clipcols { margin-top: 30px; column-count: 2; column-gap: 26px; }
body.is-mobile .clipcols, body.narrow .clipcols { column-count: 1; }
.clipgroup { min-width: 0; padding-bottom: 30px; break-inside: avoid; }
.copyrow { display: flex; gap: 13px; width: 100%; padding: var(--space-6) 15px var(--space-6) var(--space-6);
           margin-bottom: 10px; background: var(--surface-card);
           border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-card);
           cursor: pointer; transition: var(--transition-control); text-align: left; }
.copyrow:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.copyrow:active { transform: scale(var(--press-scale)); }
.copyrow .tile { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
                 border-radius: var(--radius-md); background: var(--surface-brand-soft); color: var(--text-brand); }
.copyrow .tile .lc { width: 17px; height: 17px; }
.copyrow .body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.copyrow .k { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em;
              text-transform: uppercase; color: var(--text-subtle); }
.copyrow .v { font-size: var(--text-md); color: var(--text-strong); overflow-wrap: anywhere; }
.copyrow .v.longv { font-size: var(--text-sm); color: var(--text-body); white-space: pre-wrap;
                    line-height: var(--leading-relaxed); }
.copyrow .desc { font-size: var(--text-xs); color: var(--text-subtle); text-wrap: pretty; }
.copyrow .ic { display: flex; align-items: center; flex: none; color: var(--text-disabled); }
.copyrow:hover .ic { color: var(--text-brand); }
.copyrow .varpick { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 5px; }
.varpick span { font-size: var(--text-2xs); color: var(--text-subtle); border: var(--border-w) solid var(--border-subtle);
                border-radius: var(--radius-pill); padding: 1px var(--space-4); cursor: pointer; }
.varpick span.on { color: var(--text-brand); border-color: var(--border-brand); background: var(--surface-brand-soft); }
.secret { filter: blur(5px); user-select: none; }
.grip { color: var(--text-disabled); cursor: grab; display: flex; align-items: center; }
.copyrow.edit { cursor: grab; }
.copyrow.edit.dragging { opacity: .4; }
.copyrow.edit.dropon { border-color: var(--border-brand); box-shadow: inset 0 2px 0 var(--action-primary); }
.linkish { font-size: var(--text-xs); color: var(--text-link); }
.linkish:hover { text-decoration: underline; }

/* the second card surface: a paragraph needs a container to be readable */
.answer { padding: var(--card-pad-compact); margin-bottom: 10px; background: var(--surface-card);
          border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-card); }
.answer .q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
             font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); }
.answer .a { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-4);
             max-width: var(--prose-max); line-height: var(--leading-relaxed); text-wrap: pretty; }

/* ---------- files -------------------------------------------------------- */
.filerow { display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto auto; gap: var(--space-5);
           align-items: center; padding: var(--space-6); margin-bottom: var(--space-4);
           background: var(--surface-card); border: var(--border-w) solid var(--border-subtle);
           border-radius: var(--radius-card); transition: var(--transition-control); }
.filerow:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.filerow .tile { display: inline-grid; place-items: center; width: 40px; height: 40px;
                 border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-muted); }
.filerow .fn { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-strong);
               overflow-wrap: anywhere; }
.filerow .desc { font-size: var(--text-xs); color: var(--text-subtle); }
.filerow .ftags { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.filerow .mono { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
body.is-mobile .filerow { grid-template-columns: 40px minmax(0,1fr) auto; }
body.is-mobile .filerow .ftags, body.is-mobile .filerow .mono { grid-column: 2 / -1; }

/* ---------- dialogs, menus, toast ---------------------------------------- */
.scrim { position: absolute; inset: 0; z-index: var(--z-overlay); background: var(--surface-overlay);
         backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center;
         padding: var(--space-9); animation: shovl-fade var(--dur-base) var(--ease-out) both; }
body.is-mobile .scrim { align-items: flex-end; padding: 0; }
.dialog { width: 520px; max-width: 100%; max-height: 88%; display: flex; flex-direction: column;
          background: var(--surface-card); border: var(--border-w) solid var(--border-subtle);
          border-radius: var(--radius-sheet); box-shadow: var(--shadow-xl); overflow: hidden;
          z-index: var(--z-modal); }
.dialog.wide { width: 620px; }
body.is-mobile .dialog { width: 100%; max-height: 92%; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
                         animation: shovl-sheet var(--dur-slower) var(--ease-out) both; }
.dialog header { display: flex; align-items: flex-start; gap: var(--space-5); padding: 22px var(--space-8) var(--space-6); }
.dialog header h2 { font-family: var(--font-display); font-size: var(--text-xl);
                    font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.dialog header p { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
.dialog .body { padding: 0 var(--space-8) var(--space-7); overflow: auto; flex: 1; min-height: 0; }
.dialog footer { display: flex; align-items: center; gap: 10px; padding: var(--space-6) var(--space-8);
                 border-top: var(--border-w) solid var(--border-subtle); background: var(--surface-inset); }

.field { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--control-h-md); padding: var(--space-4) var(--space-5);
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-field);
  background: var(--surface-card); color: var(--text-body); font-size: var(--text-sm);
  transition: var(--transition-control); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--border-focus); }
.field textarea { min-height: 80px; resize: vertical; line-height: var(--leading-normal); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
body.is-mobile .grid2 { grid-template-columns: 1fr; }
.hint { font-size: var(--text-xs); color: var(--text-subtle); }
.statgrid { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.statopt { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 10px;
           border: var(--border-w) solid var(--border-default); border-radius: var(--radius-control);
           font-size: var(--text-sm); background: var(--surface-card); transition: var(--transition-control); }
.statopt:hover { background: var(--action-secondary-hover); border-color: var(--border-strong); }
.statopt.on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-inverse); }
.statopt.closes { border-style: dashed; }
.statopt .lc { width: 14px; height: 14px; }
.portal { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-5);
          border-radius: var(--radius-control); font-size: var(--text-xs);
          background: var(--status-info-bg); color: var(--status-info-fg);
          border: var(--border-w) solid var(--status-info-border); }
.portal.unknown { background: var(--status-warning-bg); color: var(--status-warning-fg);
                  border-color: var(--status-warning-border); }
.warn { font-size: var(--text-xs); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
        background: var(--status-warning-bg); color: var(--status-warning-fg);
        border: var(--border-w) solid var(--status-warning-border); width: fit-content; }

.menu { position: absolute; top: 34px; right: 0; z-index: var(--z-dropdown); min-width: 210px;
        padding: var(--space-2); background: var(--surface-card);
        border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-control);
        box-shadow: var(--shadow-lg); }
.menu button { display: flex; align-items: center; gap: var(--space-4); width: 100%;
               padding: var(--space-4) 10px; border-radius: var(--radius-xs);
               font-size: var(--text-sm); color: var(--text-body); }
.menu button:hover { background: var(--action-ghost-hover); }

.palette { width: 560px; }
.palette .pq { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-8);
               border-bottom: var(--border-w) solid var(--border-subtle); color: var(--text-subtle); }
.palette .pq input { flex: 1; border: 0; background: none; outline: none;
                     font-size: var(--text-lg); color: var(--text-body); }
.presults { max-height: 380px; overflow: auto; padding: var(--space-3); }
.presult { display: flex; align-items: center; gap: var(--space-5); width: 100%;
           padding: 10px var(--space-5); border-radius: var(--radius-control); font-size: var(--text-sm); }
.presult:hover, .presult[aria-selected="true"] { background: var(--action-ghost-hover); }
.presult .pl { flex: 1; min-width: 0; color: var(--text-strong); }
.presult .pv { color: var(--text-subtle); font-size: var(--text-xs); overflow-wrap: anywhere; }
.presult .lc { color: var(--text-subtle); }

.toast { position: absolute; left: 50%; bottom: var(--space-8); transform: translateX(-50%);
         z-index: var(--z-toast); display: flex; align-items: center; gap: var(--space-6);
         padding: var(--space-5) 18px; background: var(--surface-inverse); color: var(--text-inverse);
         border-radius: var(--radius-control); box-shadow: var(--shadow-lg);
         font-size: var(--text-sm); animation: shovl-tl-in var(--dur-base) var(--ease-out) both; }
body.is-mobile .toast { bottom: calc(var(--tabbar-h) + var(--space-5)); }
.toast button { color: var(--text-inverse); text-decoration: underline; font-size: var(--text-sm); }

/* ---------- banners, empty states, brief, summary ------------------------ */
.banner { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-5) var(--space-6);
          margin-bottom: 18px; border-radius: var(--radius-card); font-size: var(--text-sm);
          background: var(--archive-bg); color: var(--archive-fg);
          border: var(--border-w) solid var(--archive-border); }
.banner b { font-weight: var(--weight-semibold); }
.ribbon { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-4);
          border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
          letter-spacing: var(--tracking-wide); background: var(--archive-bg); color: var(--archive-fg);
          border: var(--border-w) solid var(--archive-border); white-space: nowrap; }
.empty { display: grid; justify-items: center; gap: var(--space-4); padding: 56px var(--space-6);
         text-align: center; }
.empty .tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-lg);
               background: var(--surface-sunken); color: var(--text-subtle); }
.empty .tile .lc { width: 24px; height: 24px; }
.empty b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold);
           letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.empty span { font-size: var(--text-sm); color: var(--text-muted); max-width: 42ch; }

.brief { max-width: 760px; margin: 0 auto; padding: 40px var(--page-pad-desktop) 90px; }
.brief .bh { border-bottom: var(--border-w-thick) solid var(--text-strong); padding-bottom: var(--space-6); }
.brief h1 { font-size: var(--text-4xl); }
.brief .bsub { font-size: var(--text-md); color: var(--text-muted); margin-top: var(--space-3); }
.brief section { margin-top: var(--space-9); }
.brief h2 { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: 0.09em;
            text-transform: uppercase; color: var(--text-muted); font-family: var(--font-sans);
            margin-bottom: var(--space-4); }
.brief p, .brief li { font-size: var(--text-md); max-width: var(--prose-max); text-wrap: pretty; }
.brief li { padding: var(--space-2) 0 var(--space-2) var(--space-6); position: relative; }
.brief li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 1px;
                    background: var(--border-strong); }
.brief .adtext { font-size: var(--text-sm); color: var(--text-muted); white-space: pre-wrap;
                 border-left: var(--border-w-thick) solid var(--border-default); padding-left: var(--space-6); }
@media print {
  .rail, .topbar, .mtop, .tabbar, .reviewdock, .briefback { display: none !important; }
  body, #shell { display: block; height: auto; overflow: visible; }
  .brief { padding: 0; }
}

.funnel { margin-top: var(--space-5); }
.frow { display: grid; grid-template-columns: 118px 1fr 92px; gap: var(--space-5);
        align-items: center; padding: var(--space-3) 0; font-size: var(--text-sm); }
.frow .fb { height: 16px; border-radius: var(--radius-xs); background: var(--action-primary);
            transition: width var(--dur-slow) var(--ease-out); }
.frow .fn { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); }

/* ---------- sign in ------------------------------------------------------ */
.signin { grid-column: 1 / -1; display: grid; place-items: center; height: 100%; overflow: auto;
          background: var(--surface-page); }
.sbox { width: min(380px, calc(100vw - 40px)); padding: var(--space-10) var(--space-9);
        background: var(--surface-card); border: var(--border-w) solid var(--border-subtle);
        border-radius: var(--radius-xl); box-shadow: var(--shadow-md); text-align: center; }
.sbox .mark { width: 52px; height: 52px; margin: 0 auto var(--space-5); border-radius: var(--radius-lg); }
.sbox h1 { font-size: var(--text-3xl); }
.sbox .tagline { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
.sbox .field { text-align: left; margin-top: var(--space-6); }
.orline { display: flex; align-items: center; gap: var(--space-5); margin: var(--space-6) 0;
          font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
          color: var(--text-subtle); }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* ---------- review dock (not part of the product) ------------------------ */
.reviewdock { position: fixed; z-index: var(--z-tooltip); right: var(--space-6); bottom: var(--space-6);
              display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
              max-width: calc(100vw - 32px); padding: var(--space-3);
              background: var(--surface-card); border: var(--border-w) solid var(--border-default);
              border-radius: var(--radius-control); box-shadow: var(--shadow-lg); font-size: var(--text-xs); }
body.is-mobile:not(.frame-mobile) .reviewdock { bottom: calc(var(--tabbar-h) + var(--space-4)); }
.reviewdock .lbl { color: var(--text-subtle); padding: 0 var(--space-2);
                   font-family: var(--font-mono); font-size: var(--text-2xs);
                   letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.reviewdock button { padding: var(--space-2) var(--space-4); border-radius: var(--radius-xs); color: var(--text-muted); }
.reviewdock button:hover { background: var(--action-ghost-hover); }
.reviewdock button.on { background: var(--action-primary); color: var(--text-inverse); }
.warnlbl { font-size: var(--text-2xs); color: var(--text-subtle); padding: 0 var(--space-2); }

/* ---------- annotations -------------------------------------------------- */
.note { display: none; }
body.show-notes .note { display: inline-grid; place-items: center; position: relative;
  width: 16px; height: 16px; border-radius: var(--radius-circle); margin-left: var(--space-3);
  background: var(--action-primary); color: var(--text-inverse);
  font-size: 9px; font-weight: var(--weight-bold); cursor: help; vertical-align: middle; flex: none; }
body.show-notes .note::after { content: attr(data-note); position: absolute; left: 22px; top: -4px;
  width: 260px; padding: 10px var(--space-5); background: var(--surface-inverse); color: var(--text-inverse);
  font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: var(--leading-normal);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: var(--z-tooltip);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); text-align: left; }
body.show-notes .note:hover::after, body.show-notes .note:focus::after { opacity: 1; }
body.show-notes .note.left::after { left: auto; right: 22px; }

.muted { color: var(--text-subtle); }
.tiny { font-size: var(--text-xs); }
.mono { font-family: var(--font-mono); }

/* ---------- toolbars, group tones, file cards ---------------------------- */
.toolrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
           margin-top: 18px; position: sticky; top: 0; z-index: 4;
           padding: 10px 0; background: var(--surface-page); }
.toolrow .search { flex: 0 1 260px; }
.search .lbl { display: flex; color: var(--text-subtle); }

/* Group tile tones — a colour you can find without reading. Nothing else
   uses these, so "the green one" stays unambiguous. */
.clipgroup.g-0 .copyrow .tile { background: var(--surface-brand-soft);   color: var(--text-brand); }
.clipgroup.g-1 .copyrow .tile { background: var(--status-info-bg);       color: var(--status-info-fg); }
.clipgroup.g-2 .copyrow .tile { background: var(--archive-bg);           color: var(--archive-fg); }
.clipgroup.g-3 .copyrow .tile { background: var(--status-success-bg);    color: var(--status-success-fg); }
.clipgroup.g-4 .copyrow .tile { background: var(--status-warning-bg);    color: var(--status-warning-fg); }

.filerow { display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto; gap: var(--space-5);
           align-items: center; }
.filerow .body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filerow .ftags { margin-top: 2px; }
body.is-mobile .filerow { grid-template-columns: 40px minmax(0,1fr) auto; }
body.is-mobile .filerow .mono { grid-column: 2 / -1; }