/* Depot admin UI — design system on the blue-accent palette (DEP-49/DEP-89).
   Tokens are taken from the approved mockup (depot:mockups/depot-redesign-views-2026-07-28.html) rather than
   chosen here, so the running app and the mockup cannot drift apart. Two values deviate, both because the
   mockup's own value fails WCAG AA as body text; each is noted at the token.

   Dark-committed by design, matching Cockpit. There is deliberately no light theme: DEP-49 locked "dark
   committed", and a toggle that leaves the palette dark is the dead-control failure this codebase already
   shipped twice (DEP-50, DEP-118). AppCssTokenTests pins the absence. */
:root{
  color-scheme: dark;

  /* Surfaces, darkest to lightest: page ground, panel, topbar, nav rail, then the two inset levels used for
     controls and for what sits on top of a control. */
  --bg:#070809; --win:#0f1116; --top:#12141a; --rail:#0c0e12; --inset:#1a1d24; --inset2:#202430;
  --line:#2a2f39; --line-soft:#20242c;
  --hover:#ffffff05;

  /* Text tiers. --tx3 deviates from the mockup's #656c78, which measures 2.93:1 on --inset2 and 3.57:1 on
     --win — below the 4.5:1 AA floor on every surface it lands on, while carrying table headers, field labels
     and metadata. #868e9d is the smallest step that clears 4.5:1 against all four surfaces (4.70 on --inset2,
     5.86 on --rail). The cost is a narrower gap to --tx2; legibility wins over the extra tier of quiet. */
  --tx:#e8eaef; --tx2:#949aa5; --tx3:#868e9d;

  /* Accent — reserved for active nav, primary action and selection; never for status. */
  --blue:#3b82f6; --blue-soft:#1c3358; --blue-tx:#cfe0ff;
  /* Filled controls carry white text, and white on --blue is 3.68:1. --blue-deep is the deep end of the same
     gradient the mockup already uses for the brand glyph, so the accent keeps its identity while white reaches
     5.76:1 on the resting state and 4.79:1 on hover. */
  --blue-deep:#2b62c4; --blue-deep-hi:#2f6fd8;
  /* Text on a filled accent, and the accent's own badge pair. Named rather than repeated as literals so a
     palette change has one place to land — the reason the "teal" class name had to be renamed at all. */
  --on-accent:#ffffff; --accent-line:#394a6b; --accent-bg:#1b2540;

  /* Status — semantic, deliberately separate from the accent. */
  --good-bg:#17351f; --good-line:#2e5c3a; --good-tx:#8fd79f;
  --crit:#ef6a5c; --crit-bg:#45211c; --crit-line:#5c2f2a; --crit-tx:#ffbcb3;
  --amber:#d9a441; --amber-bg:#3a2c12; --amber-line:#6b5220; --amber-tx:#f0c778;
  --violet:#a78bda; --violet-bg:#332b47; --violet-line:#4a3f66;
  --pal-1:#3b82f6; --pal-2:#d9a441; --pal-3:#5fc58a; --pal-4:#a78bda; --pal-5:#ef6a5c; --pal-6:#3fb8c4; --pal-7:#e07bb0; --pal-8:#a3c94d;
  --c:var(--pal-1); /* the person colour of an avatar or a caret, set per person by script or [data-pal]; this is the default */
  --prof:#39415a; --prof-tx:#c3cde3;

  /* Borders that lift on hover. DEP-85: --sheen (the hairline highlight the brand glyph's gradient tile used
     to carry) was retired here — the glyph is now a plain Wispslate icon image, no tile, nothing to highlight. */
  --line-hi:#333a47;

  --r-win:14px; --r-ctl:9px;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Code","Cascadia Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --shadow:0 1px 3px rgba(0,0,0,.5),0 18px 44px -24px #000;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
code,kbd,pre{font-family:var(--mono)}
::selection{background:var(--blue-soft);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* .app is the full viewport, not the mockup's boxed card (no border/radius/shadow/min-height around it -
   those existed only because the mockup is a product photo). The rail runs the full height with the brand in
   its own head (DEP-126); the topbar used to span both columns but now lives inside the main column instead,
   so .rail is never interrupted by it. */
.app{display:grid;grid-template-columns:56px 212px 1fr;height:100vh;min-height:0}

.rail{background:var(--bg);display:flex;flex-direction:column;padding:14px 10px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:640;letter-spacing:-.01em;color:var(--tx)}
/* DEP-85: the Wispslate icon is a transparent render meant to sit directly on the dark chrome, not inside a
   tile — no background/radius/shadow here any more, just a fixed box so the wordmark next to it doesn't jump
   when the image loads. */
.brand .glyph{width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.brand .glyph img{width:22px;height:22px;object-fit:contain;display:block}
.brand .sub{color:var(--tx3);font-weight:500;font-size:12px}

.navgroup{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx3);margin:12px 10px 5px;font-weight:600}
.nav{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--tx2);font-weight:500;font-size:13.5px}
.nav a svg{width:16px;height:16px;flex:none;opacity:.85}
.nav a:hover{background:var(--hover);color:var(--tx)}
.nav a.active{background:var(--win);color:var(--tx)}
.nav a.active svg{opacity:1;color:var(--blue)}

/* DEP-313 (RD-2): the org-rail. A tile per organization, ringed in --blue when chosen; the amber badge marks a 2FA
   duty still in its grace, the blue one unread inbox items for that organization. Tile colours rotate over the
   avatar pairs, as in the mockup. */
.orgrail{background:var(--bg);border-right:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0;overflow-y:auto}
.orgrail .glyph{width:30px;height:30px;display:grid;place-items:center;margin-bottom:6px}
.orgrail .glyph img{width:22px;height:22px;object-fit:contain;display:block}
.ot{flex:none;position:relative;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--prof);color:var(--prof-tx);text-decoration:none}
.ot.accent{background:var(--blue-deep);color:var(--on-accent)}
.ot.violet{background:var(--violet-bg);color:var(--violet)}
.ot.amber{background:var(--amber-bg);color:var(--amber-tx)}
.ot.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--blue)}
.ot.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.ot.all{background:transparent;border:1px dashed var(--line-hi);color:var(--tx3);font-size:14px}
.ot i{position:absolute;right:-5px;bottom:-5px;min-width:16px;height:16px;border-radius:8px;padding:0 3px;font:700 10px/16px var(--mono);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.ot i.amb{background:var(--amber-tx);color:var(--bg)}
.ot i.cnt{background:var(--blue-deep);color:var(--on-accent)}
.orgrail .me-tile{margin-top:auto;width:30px;height:30px;padding:0;border:0;cursor:pointer;font-family:inherit}
.me-tile:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* DEP-383: the account menu, a native popover opening beside the rail avatar (centred where anchor positioning is missing). */
.acctpop{min-width:220px;padding:6px;border:1px solid var(--line-hi);border-radius:var(--r-ctl);background:var(--win);color:var(--tx);font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.acctpop .acctwho{display:flex;flex-direction:column;padding:6px 10px 8px;border-bottom:1px solid var(--line-soft);margin-bottom:4px;line-height:1.3;overflow-wrap:anywhere}
.acctpop .acctwho span{color:var(--tx3);font-size:11px}
.acctpop a,.acctpop button{display:block;width:100%;padding:7px 10px;border:0;border-radius:6px;background:none;color:var(--tx);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.acctpop a:hover,.acctpop button:hover,.acctpop a:focus-visible,.acctpop button:focus-visible{background:var(--inset);outline:0;color:var(--blue-tx)}
@supports (position-area:bottom){.acctpop{inset:auto;margin:0 8px;position-area:right span-top;position-try-fallbacks:flip-block}}
.orghead{display:flex;flex-direction:column;gap:2px;padding:6px 10px 12px;line-height:1.3;min-width:0}
.orghead b{font-size:14px;font-weight:640;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orghead span{font-size:11.5px;color:var(--tx3)}
.navgroup span{float:right;font-weight:500;letter-spacing:.04em}
.nav a .n{margin-left:auto;font:11px var(--mono);color:var(--tx3)}

/* Main column: a flex column so the topbar (fixed height) and the scrolling content area stack inside it,
   independently of the rail beside them. Both minimums are load-bearing and for the same reason - a grid
   item's automatic minimum is its min-content, so without them the 1fr track grows to whatever the longest
   unbreakable thing inside needs and overflows the viewport. min-height:0 answers the content area, and
   min-width:0 the breadcrumb's project slug, which has no break opportunity at all. */
.main{display:flex;flex-direction:column;min-height:0;min-width:0}
.topbar{flex:none;height:54px;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--bg)}
/* .crumb carries a project slug, so it is the one thing here that can outgrow the topbar. It shrinks and
   clips; the ellipsis has to sit on the label rather than on .crumb itself, because text-overflow applies to
   a block container's inline content and does nothing on a flex container. Without it a squeezed topbar
   pushes the identity block out of view instead of truncating the slug. */
.crumb{display:flex;align-items:center;gap:8px;color:var(--tx2);font-size:13px;min-width:0;overflow:hidden}
.crumb b{color:var(--tx);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb .sep{color:var(--tx3)}
.iconbtn{flex:none;background:var(--inset);border:1px solid var(--line);color:var(--tx2);width:34px;height:34px;border-radius:var(--r-ctl);cursor:pointer;font-size:15px;display:grid;place-items:center}
.iconbtn:hover{color:var(--blue);border-color:var(--blue)}
/* The free space in the topbar goes here, on the first element of the right-hand cluster. */
.topbar .crumb + .iconbtn{margin-left:auto}
.topbar .livewrap + .iconbtn{margin-left:0}
.mailbtn{position:relative;margin-right:8px;text-decoration:none}
.mailbtn .badge{position:absolute;top:-7px;right:-7px;padding:0 5px}
.avatar{width:26px;height:26px;border-radius:7px;background:var(--prof);color:var(--prof-tx);display:grid;place-items:center;font-size:11px;font-weight:700}
/* Solid --blue-deep rather than the brand glyph's gradient: this one carries a letter, and white over the
   light end of that gradient measures 3.68:1. The glyph beside it keeps the gradient because it holds no text. */
.avatar.accent{background:var(--blue-deep);color:var(--on-accent)}
.avatar.violet{background:var(--violet-bg);color:var(--violet)}
.avatar.amber{background:var(--amber-bg);color:var(--amber-tx)}

.content{overflow-y:auto;padding:26px 30px 60px}
.viewhead{margin-bottom:20px}
.viewhead h1{font-size:20px;margin:0 0 4px;font-weight:660;letter-spacing:-.02em}
.viewhead p{margin:0;color:var(--tx2);font-size:12.5px}

/* .headacts (DEP-128): the action slot of `.viewhead.row.between` when the action is a <details> panel rather
   than a link. Static SSR has no click handler to open a panel with, so the trigger is a <summary> styled as
   the primary button.

   All three rules are load-bearing, each measured against the rendered page:
   - the <details> is a column flex box aligned to its end, so the button keeps its place instead of sliding to
     the left edge of the 460px panel the moment it opens;
   - a bare <summary> is display:list-item and would stretch to that panel's width;
   - :has() lifts the whole head to the top, because the panel makes this flex item far taller than the title
     and .row would otherwise centre the title against it. Scoped to heads that carry a panel, so the other
     .viewhead.row.between (ProjectDetail) keeps its vertically centred actions. */
.viewhead.row:has(.headacts){align-items:flex-start}
.headacts details{display:flex;flex-direction:column;align-items:flex-end}
.headacts summary{list-style:none;display:inline-flex;align-items:center;gap:6px}
.headacts summary::-webkit-details-marker{display:none}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-family:var(--mono);padding:2px 8px;border-radius:6px;border:1px solid var(--line);color:var(--tx2);background:var(--inset)}
.badge.accent{color:var(--blue-tx);border-color:var(--accent-line);background:var(--accent-bg)}
.badge.amber{color:var(--amber-tx);border-color:var(--amber-line);background:var(--amber-bg)}
.badge.violet{color:var(--violet);border-color:var(--violet-line);background:var(--violet-bg)}
.badge.good{color:var(--good-tx);border-color:var(--good-line);background:var(--good-bg)}
.badge.crit{color:var(--crit-tx);border-color:var(--crit-line);background:var(--crit-bg)}

/* Two badge families (DEP-130, port-note DEP-87 — redesigned after adversarial review). A grey badge used to
   carry five different meanings across the admin UI (a module grant, a global role, a project role, a content
   kind, a change type) with no colour distinguishing any of them - worst at Editor, which read as "lowest"
   (bare grey) while Viewer, the tier actually below it, wore the exact same badge. `.bg.p-*` is the
   permission/role family: strictly ascending intensity, none < view < manage < admin/owner.

   The first attempt at this family used colour to carry the ranking - accent for Manage, amber for the global
   Admin bypass, green for an in-project Owner ceiling - and every one of those was wrong: amber and green are
   this app's reserved status colours (--amber = warning, --good = success, both used elsewhere on this exact
   page - the amber access callout, the green "Grants updated." banner), and DEP-49 reserves the accent (blue)
   for active nav/primary action/selection, not for a permission tier. Reusing a status or the accent as a rank
   colour is the one thing the palette rule never allows. What is left once those three are off the table is
   the neutral axis, which has four usable surfaces (--win/--inset/--inset2/--line-hi) and three text tiers
   (--tx3/--tx2/--tx) - enough steps for a real ramp without borrowing a reserved hue. Admin and Owner still
   share one step: both are "highest" on their own scale (server-wide bypass vs. in-project ceiling), and with
   colour off the table there is nothing left to tell them apart with except the label text, which already
   does that job (different columns, different words).

   Colour is also never the only signal now: font-weight climbs with the tier (480 -> 560 -> 640 -> 720), so the
   ranking survives a colourblind or grayscale rendering, the same principle the Insights chart already applies
   via legend + tooltip alongside colour. Every step below sets its own `background` next to its own `color` -
   including p-none, the tier that used to render with no background at all and inherit whatever surface the
   badge sat on. That worked until DEP-130 added a `tr.sel{background:var(--blue-soft)}` row highlight beside
   it: p-none's --tx3 text on --blue-soft was 3.83:1, an AA failure the derived contrast scan below could not
   see because it only checks a `color`+`background` pair declared in the *same* rule, and p-none's background
   was inherited rather than declared. Giving every tier its own opaque background closes that class of bug
   structurally - a badge can no longer fail contrast depending on what row it happens to render in, because it
   never shows the row's colour to begin with. All four steps are proven at 4.5:1 by
   EveryRuleSettingBothColourAndBackground_MeetsWcagAaContrast now that each one declares both halves of its
   own pair.

   `.bg.n` is the neutral family: a pill shape (not this ramp's 6px chip) so a type label reads as a different
   *kind* of badge rather than one more untitled rung on the ranking ladder - the bug an identical font-weight
   away from p-view actually caused. */
.bg{display:inline-flex;align-items:center;font-size:10.5px;letter-spacing:.02em;padding:2px 7px;border-radius:6px;border:1px solid var(--line);color:var(--tx2);background:var(--inset)}
.bg.p-none{border-color:var(--line);background:var(--win);color:var(--tx3);font-weight:480}
.bg.p-view{border-color:var(--line);background:var(--inset);color:var(--tx3);font-weight:560}
.bg.p-manage{border-color:var(--line-hi);background:var(--inset2);color:var(--tx2);font-weight:640}
.bg.p-admin,.bg.p-owner{border-color:var(--line-hi);background:var(--line-hi);color:var(--tx);font-weight:720}
.bg.n{border-radius:999px;border-color:var(--line);background:var(--inset);color:var(--tx2);font-weight:500}

.grid{display:grid;gap:16px}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
/* Vertical stack of cards inside one grid cell (DEP-130: the Users detail panel is grants + project access,
   two cards tall, sitting in .split's second column). */
.stack{display:flex;flex-direction:column;gap:16px}
/* DEP-142: .card raised to the mockup's .panel/.ph shape (header rule) without adding .panel as a second
   classname set - see the note above .actframe for why. No overflow:hidden: it caps a grid item's automatic
   minimum at 0 (CSS Grid §6.6), letting a narrow .split/.grid track clip a card's content with no scrollbar -
   don't re-add it for corner-clipping, Projects.razor's padding:0 card already clips its own corner via its
   own overflow-x:auto (computes to overflow-y:auto, CSS Overflow 3). */
.card{background:var(--win);border:0;border-radius:var(--r-win);padding:16px 18px}
.card h3{margin:0 0 12px;font-size:12px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
/* DEP-312 (RD-1, A1 "calm surfaces"): a surface separates by its tint (--bg -> --win -> --inset), not by a
   frame, so cards, rail and topbar carry no border and a card head no icon or rule. Borders stay where they carry
   information: table rows, inputs, focus. */
.card>:first-child:is(h2,h3,h4,.sechead){margin:0 0 8px}
.card h3 .ic{display:none}
/* Only the label itself is set in capitals; secondary text inside a head (slug, counts, a mono name) keeps its case. */
.card h3 :is(small,.dim,.faint,.mono,.subtle){text-transform:none;letter-spacing:0}
#branding{align-items:start;margin-bottom:16px}
.branding-logos{display:flex;gap:8px;flex-wrap:wrap}.branding-logo{display:grid;gap:4px;place-items:center;min-width:112px;padding:8px;border-radius:var(--r-ctl)}.branding-logo.light{background:var(--tx);color:var(--bg)}.branding-logo.dark{background:var(--bg);color:var(--tx)}.branding-logo img{display:block;max-width:140px;max-height:40px}.branding-logo small{font:10px var(--mono)}
.branding-icon{width:18px;height:18px;object-fit:contain;vertical-align:middle}.branding-swatches{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}.branding-swatch{width:16px;height:16px;border:1px solid var(--line-hi);border-radius:4px}.branding-mail-note{font-size:12px}.branding-links-intro{margin-bottom:12px}
.stat{background:var(--win);border:0;border-radius:var(--r-ctl);padding:16px 18px}
.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--tx3);font-weight:600}
.stat .v{font-size:24px;font-weight:660;margin:6px 0 2px;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .d{font-size:11px;color:var(--tx2)}
/* The unit rides alongside the figure, not against it: Razor strips the leading space in the template, and
   without this gap the small glyph sits flush on the numeral and reads as a subscript rather than a unit. */
.stat .v .u{font-size:12px;color:var(--tx3);font-weight:500;margin-left:.22em}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3);font-weight:640;padding:0 10px 8px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line-soft);color:var(--tx)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--hover)}
.mono{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.dim{color:var(--tx2)}
.faint{color:var(--tx3)}

/* .t modifier (DEP-128): the plain table{}/th{}/td{} rules above still have callers (Insights, ProjectDetail,
   Users, Tokens, Backups, Brain, Account all render a bare <table>), so this sits alongside them rather than
   replacing them - a sortable, denser table for the Projects list, ported from the mockup's own table.t. */
table.t th{padding:9px 13px;white-space:nowrap;background:var(--top)}
table.t td{padding:10px 13px;vertical-align:middle}
table.t th a{color:inherit;display:inline-flex;gap:4px;align-items:center}
table.t th a:hover{color:var(--tx2)}
table.t th .dir{color:var(--tx2)}
/* A numeric column aligns its header and its cells the same way, but only the cells take .num's monospace
   figures - a header carrying .num would render in Cascadia at --tx2 while the text headers beside it stay
   Segoe at --tx3, which reads as three of the six headers belonging to a different table. */
table.t th.numcol,table.t td.num{text-align:right}
/* Must be `anywhere`, not `break-word`: only `anywhere` shrinks a token's min-content width, and that is what
   keeps an unbroken project name or slug from pushing the table past its card. Measured: break-word left the
   table at 1339px in a 989px card, anywhere brought it back to 989px. */
table.t .nmcell,table.t td.mono{overflow-wrap:anywhere}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--tx2);white-space:nowrap}
.nmcell{font-weight:600}
.nmcell small{display:block;font-weight:400;color:var(--tx3);font-size:11.5px;margin-top:1px;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nmcell a{display:block}
tr:hover .nmcell a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--tx3)}
/* Selected row (DEP-130/DEP-88): the only signal that a ?user=… link is "open" is this background, since
   static SSR has no client-side highlight to fall back on. `table.t tbody tr.sel` (0,2,3) outranks
   `tbody tr:hover` (0,1,2) on specificity alone, regardless of source order, so a hover on the selected row
   never visually cancels the selection. */
table.t tbody tr.sel{background:var(--blue-soft)}
table.t tbody tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--blue)}
/* The row's own text still sits directly on --blue-soft (unlike the badges above, which now carry their own
   opaque background) - the name link's default --blue measures 3.43:1 there and the small line's --tx3 only
   3.83:1, both under the 4.5:1 AA floor. --blue-tx is the token this app already uses for text on --blue-soft
   (.callout, ::selection) - reused here instead of adding a new one. */
table.t tbody tr.sel .nmcell a{color:var(--blue-tx)}
table.t tbody tr.sel .nmcell small{color:var(--blue-tx)}

/* Artifact-quota bar (DEP-128). The mockup draws it as a gradient into --blue-hi/--amber-2 - both removed or
   never added by DEP-89 - so this uses solid fills instead: var(--blue) normally, var(--amber) once the
   project is over 80% of its quota. */
.bar{height:5px;border-radius:3px;background:var(--inset2);margin-top:5px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--blue)}
.bar i.warn{background:var(--amber)}

.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.btn{background:var(--inset);border:1px solid var(--line);color:var(--tx);padding:7px 12px;border-radius:var(--r-ctl);font-size:12.5px;cursor:pointer;font-weight:560;font-family:var(--sans)}
.btn:hover{background:var(--inset2);border-color:var(--line-hi)}
.btn.primary{background:var(--blue-deep);border-color:var(--blue-deep);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:var(--blue-deep-hi);border-color:var(--blue-deep-hi);color:var(--on-accent)}
.btn.danger{border-color:var(--crit-line);color:var(--crit)}
.btn.danger:hover{background:var(--crit-bg);border-color:var(--crit);color:var(--crit-tx)}
.btn.sm{padding:5px 9px;font-size:12px}
/* Native file input: restyle the browser's default button to match .btn; the "no file chosen" text stays dim. */
input[type=file]{color:var(--tx2);font-size:12.5px;font-family:var(--sans);max-width:100%}
input[type=file]::file-selector-button{background:var(--inset);border:1px solid var(--line);color:var(--tx);padding:7px 12px;border-radius:var(--r-ctl);font-size:12.5px;font-weight:560;font-family:var(--sans);cursor:pointer;margin-right:12px;transition:border-color .12s,color .12s}
input[type=file]::file-selector-button:hover{border-color:var(--blue);color:var(--blue)}

.sechead{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx3);margin:26px 0 12px;font-weight:600}
.split{display:grid;grid-template-columns:1fr 320px;gap:16px}
/* A grid item's automatic minimum is its min-content, same trap as .main (see the comment there) - the first
   column here holds a table, which on Users/ProjectDetail/Insights can carry an unbroken id, email or long
   value with no break opportunity, so without this the 1fr track grows past the card and the grid overflows
   the viewport. min-width:0 only lets the card shrink to the track - it does not stop the table inside from
   overflowing the now-narrower card, so every direct .card child of .split also gets its own scroll container
   rather than trusting each page to opt in individually (Users already did; ProjectDetail's members tab and
   Insights's per-tool table had the same trap without it). */
.split>.card{min-width:0;overflow-x:auto}
/* DEP-174: a column of cards sits in .split as a .stack; the same track trap applies, the cards inside scroll themselves. */
.split>.stack{min-width:0}
.subtle{font-size:11.5px;color:var(--tx3);margin-top:6px}
/* Body text takes the tinted text token rather than --tx2: --tx2 on --blue-soft measures 4.46:1, just under
   the AA floor. The tinted tokens also keep the callout reading as a note instead of as plain body copy. */
.callout{border-left:3px solid var(--blue);background:var(--blue-soft);padding:11px 14px;border-radius:0 8px 8px 0;font-size:12.5px;color:var(--blue-tx);margin:14px 0}
.callout.amber{border-left-color:var(--amber);background:var(--amber-bg);color:var(--amber-tx)}
.callout.green{border-left-color:var(--good-tx);background:var(--good-bg);color:var(--good-tx);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.callout.green .btn{margin-left:auto}
.callout b{color:var(--tx)}
.principle{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--tx2);padding:7px 0}
.principle .ic{color:var(--blue)}

.field{margin-bottom:13px}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:5px;font-weight:600}
.field input,.field select{width:100%;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 11px;color:var(--tx);font-size:13px;font-family:var(--sans)}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue)}
.field [aria-invalid="true"]{border-color:var(--crit)}
/* DEP-174: a select inside a table cell (the inline role change) gets the .field look, one size smaller for the row. */
table.t select{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:5px 9px;color:var(--tx);font-size:12.5px;font-family:var(--sans)}
table.t select:focus{outline:none;border-color:var(--blue)}
.field input::placeholder{color:var(--tx3)}
.formmsg{font-size:12.5px;padding:9px 12px;border-radius:var(--r-ctl);margin-bottom:14px}
.formmsg.ok{color:var(--good-tx);background:var(--good-bg);border:1px solid var(--good-line)}
.formmsg.err{color:var(--crit-tx);background:var(--crit-bg);border:1px solid var(--crit-line)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tab{padding:9px 14px;color:var(--tx2);cursor:pointer;font-weight:500;font-size:13px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--tx)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}

.filerow{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px}
.filerow:hover{background:var(--hover)}
.filerow .fic{width:20px;text-align:center}
.filerow .nm{font-family:var(--mono);font-size:12.5px}
.filerow .meta{margin-left:auto;font-size:11px;color:var(--tx3);font-family:var(--mono);font-variant-numeric:tabular-nums}

.hit{padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-ctl);margin-bottom:10px;background:var(--win)}
.hit .hitline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
/* min-width:0 is the flex-child counterpart to .main's min-height:0 (see the comment there) - without it the
   path never shrinks below its min-content and a long one pushes .hitline, and the row, past the card's edge.
   overflow-wrap:anywhere (not break-word) is what actually lowers that min-content width; break-word only
   breaks where the browser already would. */
.hit .path{font-family:var(--mono);font-size:12px;color:var(--blue);min-width:0;overflow-wrap:anywhere;flex:1}
.hit .snip{font-size:12.5px;color:var(--tx2)}
.hit .snip mark{background:var(--blue-soft);color:var(--blue-tx);padding:0 2px;border-radius:3px}
/* DEP-131: relevance bar/label semantics - see SearchRelevance's class comment (Depot.Api/Ui/SearchRelevance.cs)
   for what Score means and how it's normalized. Reuses the existing generic .bar/i fill rather than a new bar
   component; only the size/spacing needed inside a .hitline row is scoped here. margin-left is not set here -
   .hit .path is already flex:1, which pushes .rel to the row's end on its own. */
.hit .rel{display:flex;align-items:center;gap:7px;flex:none}
.hit .rel .reltx{font-size:10.5px;color:var(--tx3);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.hit .rel .bar{width:54px;margin-top:0}
.searchbar{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 11px;color:var(--tx);font-size:13px;font-family:var(--sans)}
.searchbar:focus{outline:none;border-color:var(--blue)}
.searchbar::placeholder{color:var(--tx3)}
pre{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:12px 14px;overflow-x:auto;font-size:12px;color:var(--tx);margin:8px 0 0;white-space:pre-wrap;word-break:break-word}
.doc-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}

dialog.viewer{background:var(--win);color:var(--tx);border:1px solid var(--line);border-radius:var(--r-win);padding:0;width:760px;max-width:92vw;box-shadow:var(--shadow)}
/* DEP-244: only the document viewer is large; the share dialog reuses dialog.viewer and keeps its 760px. */
#depot-file-viewer{width:90vw;max-width:90vw;height:90vh;max-height:90vh}
#depot-file-viewer[open]{display:flex;flex-direction:column}
#depot-file-viewer.fullscreen{width:100vw;max-width:none;height:100vh;max-height:none;border:0;border-radius:0}
dialog.viewer::backdrop{background:rgba(3,5,8,.65)}
.viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.viewer-head .nm{font-family:var(--mono);font-size:12.5px;color:var(--blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-body{padding:16px 18px;overflow:auto;max-height:66vh}
.viewer-body pre{white-space:pre-wrap;word-break:break-word;border:none;background:transparent;padding:0;margin:0}
/* DEP-256: back/forward, the connected-documents side panel and the hover preview card. */
.viewer-head .nm{flex:1;min-width:0}
.viewer-nav{display:flex;gap:6px;flex:none}
.viewer-nav .iconbtn{width:28px;height:28px}
.iconbtn:disabled{opacity:.4;cursor:default}
.iconbtn:disabled:hover{color:var(--tx2);border-color:var(--line)}
.iconbtn.inline{display:inline-grid;width:24px;height:24px;font-size:12px;margin-left:8px;vertical-align:middle}
.viewer-main{flex:1;min-height:0;display:flex}
.viewer-main .viewer-body{flex:1;min-width:0;max-height:none}
.viewer-side{flex:0 0 320px;border-left:1px solid var(--line);overflow:auto;background:var(--win)}
.side-sec{padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.side-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.viewer-side .formmsg{margin:12px 16px 0}
.viewer-graph{height:220px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl)}
.hops{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;text-transform:none;letter-spacing:0}
.hops button{background:var(--inset);border:0;color:var(--tx2);padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.hops button[aria-pressed=true]{background:var(--inset2);color:var(--tx)}
.side-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:12px}
.side-card{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 12px;margin-bottom:8px}
.side-sec .src{background:none;border:0;padding:0;font-family:var(--mono);font-size:12px;color:var(--blue);cursor:pointer;text-align:left;overflow-wrap:anywhere}
.side-sec .src.missing{color:var(--tx3);cursor:default}
.side-card .ctx{margin:6px 0 0;font-size:12.5px;color:var(--tx2);overflow-wrap:anywhere}
.side-card mark{background:var(--blue-soft);color:var(--blue-tx);padding:0 2px;border-radius:3px}
.side-action{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:11.5px}
.side-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0}
.side-row{flex-wrap:wrap}
.cands{flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cands p{margin:0 0 2px}
.viewer-preview:has(.cands){pointer-events:auto}
.dp-missing{background:var(--win);border:1px solid var(--line-hi);border-radius:var(--r-ctl);padding:8px 12px;box-shadow:var(--shadow)}
.side-empty{margin:0;font-size:12.5px}
.viewer-preview{position:fixed;z-index:1;width:440px;max-height:280px;overflow:hidden;background:var(--win);border:1px solid var(--line-hi);border-radius:var(--r-ctl);padding:12px 14px;box-shadow:var(--shadow);pointer-events:none}
.viewer-preview .pv-path{font-family:var(--mono);font-size:11.5px;color:var(--blue);margin-bottom:6px}
@media (max-width:900px){.viewer-main{flex-direction:column}.viewer-side{flex:none;border-left:0;border-top:1px solid var(--line);max-height:45%}}
.project-graph-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;margin-bottom:16px;align-items:start}
.project-graph-main{min-width:0}.graph-modes{display:flex;gap:4px;margin-bottom:14px}.project-graph-main>.depot-graph-canvas{min-height:420px;background:var(--bg);border-radius:var(--r-ctl)}
.project-graph-main>.depot-graph-shown-count{font-size:11.5px;margin:8px 0 0}.project-graph-links{display:flex;flex-direction:column;gap:9px}.project-graph-links h3{margin-bottom:4px;overflow-wrap:anywhere}.project-graph-links a{font:12px var(--mono);padding:7px 0;border-bottom:1px solid var(--line-soft);overflow-wrap:anywhere}
.graph-folders{margin-top:12px}.graph-folders>summary{cursor:pointer;font-size:12.5px;font-weight:600}.graph-folders>.dim{display:block;margin:9px 0}.graph-folders .depot-graph-community-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:4px 18px;max-height:220px;overflow:auto}.graph-folders .depot-graph-community-list label{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.graph-token-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.graph-token-head h3{margin:0}.graph-push-secret{padding:12px;border:1px solid var(--good-line);background:var(--good-bg);border-radius:var(--r-ctl)}.graph-push-secret p{margin:0 0 8px;color:var(--good-tx)}.graph-push-secret div{display:flex;gap:8px;align-items:center}.graph-push-secret code{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--tx)}.graph-push-actions{justify-content:flex-end;gap:8px}
@media(max-width:980px){.project-graph-layout{grid-template-columns:minmax(0,1fr)}.project-graph-links{order:2}}
.filerow .view{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}
.filerow .view:hover{color:var(--blue);background:var(--inset)}
.filerow .view.danger:hover{color:var(--crit-tx);background:var(--crit-bg)}

/* Files-tab treeview (DEP-24): native <details>/<summary> per folder, no JS for collapse. */
.tree details{margin:0}
.tree summary{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer;list-style:none}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{content:'▸';display:inline-block;width:10px;flex:none;color:var(--tx3);transition:transform .1s ease}
.tree details[open]>summary::before{transform:rotate(90deg)}
.tree summary:hover{background:var(--hover)}
.tree summary .fic{width:20px;text-align:center}
.tree summary .nm{font-family:var(--mono);font-size:12.5px}
.tree summary .zip{margin-left:auto;font-size:11px;color:var(--tx3);padding:2px 6px;border-radius:6px}
.tree summary .zip:hover{color:var(--blue);background:var(--inset)}
.tree-children{padding-left:19px;margin-left:9px;border-left:1px solid var(--line-soft)}

/* DEP-129/DEP-47: the Files-tab preview panel's canvas. Conceptually the same idea as SharedArtifact's
   .shared-stage/.shared-preview (DEP-111) but its own rule, not a reuse of those - that pair's own comment
   (further down, at .shared-wrap) explains why the share page doesn't reuse .app/.topbar/.sidebar, not that
   .shared-stage/.shared-preview are off-limits elsewhere. Kept separate here on its own merits: borrowing them
   would couple two otherwise-unrelated pages together to save a few lines. */
.preview-pane{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);padding:14px;display:grid;place-items:center;min-height:240px}
.preview-img{max-width:100%;max-height:480px;border-radius:8px;display:block}
.preview-frame{width:100%;height:70vh;border:none;border-radius:6px;background:var(--win)}

/* Insights (DEP-64): the two chart-ish widgets the mockup calls for, drawn with plain CSS (no chart library,
   per the DoD) rather than the concept mockup's own bespoke .tile/.mtable classes - those never shipped into
   app.css, this reuses .card/.stat/table instead and only adds what neither already covers. The third mockup
   class this could have reused, .panel, was a live option until DEP-142 settled it: one panel idiom, and it
   is .card raised to the mockup's .panel/.ph/.pb shape (see the .card rule above) rather than .panel shipping
   alongside it as a second classname set.

   Colour: --blue (MCP) vs --violet (HTTP) is a borderline pair under a CVD simulation (dataviz skill
   validator: ~7.8 ΔE, in the "legal only with secondary encoding" band) - amber/good/crit are ruled out
   entirely because this app already reserves them as status colours (warning/success/error), and reusing a
   status colour for a data series is the one thing the palette rule never allows. The mitigation is secondary
   encoding: a visible legend (never colour-only) plus a title tooltip with the exact numbers on every segment/
   bar, so identity never depends on distinguishing the two hues alone. */
.actframe{display:flex;gap:10px}
/* Read-off scale for the bar chart: max/half/0, geometry-matched (same 140px height, 14px/4px top/bottom
   padding) to .actbars below so each label sits level with what it labels - the max label with the top
   gridline, "0" with the baseline the bars rest on. Without this a bar height carried no unit. */
.actaxis{flex:none;display:flex;flex-direction:column;justify-content:space-between;height:140px;padding:14px 0 4px;box-sizing:border-box;font-size:10px;color:var(--tx3);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.actbars{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;gap:10px;height:140px;padding:14px 14px 4px;box-sizing:border-box}
/* The two gridlines .actaxis's labels correspond to: a solid line at the scale's max (top of the content
   box, where a bar at MaxDaily reaches) and a dashed line at the half mark. z-index keeps them behind the
   bars (position:absolute content paints above static in-flow content by default). */
.actbars::before,.actbars::after{content:'';position:absolute;left:14px;right:14px;z-index:0;pointer-events:none}
.actbars::before{top:14px;border-top:1px solid var(--line-soft)}
.actbars::after{top:75px;border-top:1px dashed var(--line-soft)}
.actcol{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;min-width:0}
.actstack{width:100%;max-width:34px;display:flex;flex-direction:column-reverse;border-radius:4px 4px 0 0;overflow:hidden}
.actseg{width:100%}
.actseg.mcp{background:var(--blue)}
.actseg.api{background:var(--amber);box-shadow:inset 0 2px 0 var(--win)}
/* 2px surface-colour gap between the two stacked segments (mark-spec: a visible seam, not a colour blend). */
.actseg.http{background:var(--violet);box-shadow:inset 0 2px 0 var(--win)}
.actcol .lbl{font-size:10px;color:var(--tx3);white-space:nowrap}
.actempty{width:100%;max-width:34px;height:2px;background:var(--line);border-radius:2px}

.rankrows{display:flex;flex-direction:column;gap:10px;padding:13px}
.rankrow{display:flex;align-items:center;gap:10px}
.rankrow .nm{width:168px;font-size:12.5px;display:flex;align-items:center;gap:7px;min-width:0}
.rankrow .nm .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rankrow .track{flex:1;height:8px;background:var(--inset2);border-radius:4px;overflow:hidden}
.rankrow .track i{display:block;height:100%;border-radius:4px;background:var(--blue)}
.rankrow .track i.brain{background:var(--violet)}
.rankrow .val{width:56px;text-align:right;font-size:12px;color:var(--tx2);font-variant-numeric:tabular-nums}

@media(max-width:860px){.g5,.g4,.g3,.g2,.split{grid-template-columns:1fr}}

/* Shared-artifact page (DEP-111): the one page that bypasses MainLayout, so nothing here reuses .app/
   .topbar/.sidebar — built from the existing tokens plus .card/.btn/.mono/.dim, with only what neither
   already covers added below. */
.shared-wrap{max-width:640px;margin:48px auto;padding:0 20px}
/* DEP-155: the column a rendered document gets. Wider and closer to the top than the download card's, which
   is centred in a way that only reads as deliberate while there is nothing much in it. */
.shared-wrap.wide{max-width:1120px;margin-top:28px}
.shared-topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
/* Same DEP-85 treatment as .brand .glyph above: a plain box, no tile — see that comment. */
.shared-glyph{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:none}
.shared-glyph img{width:22px;height:22px;object-fit:contain;display:block}
.shared-brand{font-weight:640;letter-spacing:-.01em;color:var(--tx)}
.shared-body{padding:22px}

.shared-stage{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);padding:18px;display:grid;place-items:center;min-height:220px}
.shared-preview{max-width:100%;max-height:420px;border-radius:8px;display:block}
/* DEP-155: a framed document brings its own background and its own margins, so the stage stops padding and
   centring around it and just holds the frame. 74vh rather than a fixed height: the frame scrolls internally,
   and a shared page is usually the only thing on screen. */
.shared-stage.framed{padding:0;min-height:0;display:block;overflow:hidden}
/* color-scheme is load-bearing, not a nicety: a framed document that brings no colours of its own - a
   text/plain file, rendered by the browser's own viewer - takes its scheme from this element, and under the
   viewer's dark default that is light text, which on the white background below is an empty frame. Found
   exactly that way. Pinning the frame to light makes the pair agree; a document with its own styling paints
   straight over both. */
.shared-frame{display:block;width:100%;height:74vh;min-height:420px;border:0;background:#fff;color-scheme:light}

.shared-fileline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.shared-fileline .shared-filename{font-size:14px;font-weight:600;color:var(--tx)}
.shared-fileline .btn{margin-left:auto}

.shared-dlcard{display:grid;place-items:center;text-align:center;gap:4px;padding:10px}
.shared-dlcard .btn{margin-top:12px}

/* DEP-156: the owner bar, below the file it belongs to and visually separated from it - these controls change
   who can reach the file, so they must never read as part of the viewer's own chrome. Reuses .share-badge from
   the Files tab on purpose: the same amber/blue distinction means the same thing on both screens. */
.shared-owner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.shared-owner-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;min-width:0}
.shared-owner-actions{margin-left:auto;display:flex;gap:8px}
.shared-owner .btn.danger{color:var(--tx2)}
.shared-owner .btn.danger:hover{border-color:var(--crit);color:var(--crit-tx)}

.shared-gate{display:grid;place-items:center;text-align:center;gap:6px;padding:36px 12px}
/* color, not fill/stroke: the svg inside draws with currentColor, so the .accent modifier below recolours it
   without needing a second rule. Icons are inline svg rather than unicode glyphs on purpose — this is the one
   page opened by people without an account, on devices we never see, and ⚿/⬇ either fall back to a tofu box
   or flip to emoji presentation depending on the font stack. */
.shared-icon{width:52px;height:52px;border-radius:14px;background:var(--inset);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:4px;color:var(--tx2)}
.shared-icon.accent{background:var(--accent-bg);border-color:var(--accent-line);color:var(--blue-tx)}
.shared-gate h2{font-size:16.5px;margin:0;font-weight:640;letter-spacing:-.01em;color:var(--tx)}
.shared-gate p{margin:0;color:var(--tx2);font-size:13px;max-width:420px}
.shared-gate .btn{margin-top:10px}

/* Artifact share links in the Files-tab tree (DEP-113). The row badge is the whole safety point of the
   design: a private/members-only link stays quiet (the same accent tokens the rest of the UI already uses for
   "active"), a public one uses amber, not blue — blue is this app's action/accent colour and would read as
   "selected", not "anyone with the link can open this". The management controls live in a native <details>
   under the row, never a floating popover, so opening one never overlays the tree and costs no JS.

   DEP-154 made the toggle an icon in the row's action column but kept it out of flow, absolutely positioned
   at .filerow's own padding-top so it would line up with the ⬇ and 🗑. That offset only holds while the row is
   exactly one line tall: a filename long enough to wrap left the icon stranded near the top of a row whose
   other icons had moved to the middle. It is a plain button among them now, so nothing has to agree about an
   offset, and the panel it opened inline has become the one .share-dialog below. */
.share-badge{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--accent-line);background:var(--accent-bg);color:var(--blue-tx);white-space:nowrap}
.share-badge.public{border-color:var(--amber-line);background:var(--amber-bg);color:var(--amber-tx)}
/* The badge is in the markup on every artifact row so depot.js has a node to flip after a share action; this
   is what keeps it invisible until there is a link to report. */
.share-badge.none{display:none}
/* Keeps dialog.viewer's own 760px: narrower puts the share URL's GUID onto a second line for no gain. The
   element selector is not decoration - dialog.viewer outranks a bare .share-dialog, so a width override here
   would silently do nothing. */
dialog.viewer.share-dialog .viewer-body{display:flex;flex-direction:column;gap:12px}
.share-urlbox{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);padding:7px 10px}
/* The GUID is the whole point of the link — it must stay fully visible/selectable rather than clip, so it
   wraps at any character instead of overflowing the box. */
.share-url{font-size:11.5px;color:var(--tx2);word-break:break-all;user-select:text}
.share-actions{display:flex;gap:8px;flex-wrap:wrap}
.share-copy-status{font-size:11px;color:var(--tx3)}
/* At narrow widths a share-badge alongside a longer filename can overflow .filerow's single line - .filerow
   predates this ticket and is shared by the memory rows too, so wrapping is scoped to this breakpoint rather
   than changed unconditionally. */
@media(max-width:640px){
  .filerow{flex-wrap:wrap}
  .filerow .meta{margin-left:0}
}

/* DEP-122: the History mode of the preview dialog, the confirmation dialogs and the Trash tab. Tokens only. */
.hist-modes{display:inline-flex}
.hist-modes .btn{border-radius:0;margin-left:-1px}
.hist-modes .btn:first-child{border-radius:var(--r-ctl) 0 0 var(--r-ctl);margin-left:0}
.hist-modes .btn:last-child{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.btn.active{background:var(--accent-bg);border-color:var(--accent-line);color:var(--blue-tx)}
.btn:disabled{opacity:.45;cursor:default}
.viewer-history{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.viewer-history[hidden]{display:none}
.hist{flex:1;display:flex;min-width:0;min-height:0}
.hist-list{list-style:none;margin:0;padding:0;flex:0 0 380px;border-right:1px solid var(--line);overflow:auto}
.hist-day{padding:7px 14px;font-family:var(--mono);font-size:11px;color:var(--tx3);background:var(--rail);border-bottom:1px solid var(--line-soft)}
.hist-row{display:flex;gap:10px;width:100%;padding:10px 14px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line-soft);color:var(--tx);font:inherit;font-size:13px}
button.hist-row{cursor:pointer}
button.hist-row:hover{background:var(--inset)}
.hist-row.sel{background:var(--accent-bg)}
.hist-row.muted,.hist-row.event{color:var(--tx2)}
.hist-av{flex:none;width:22px}
.hist-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hist-who b{font-weight:600}
.hist-meta{font-family:var(--mono);font-size:11.5px;color:var(--tx3);overflow-wrap:anywhere}
.hist-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-family:var(--mono);font-size:11.5px;color:var(--tx3)}
.hist-delta .add{color:var(--good-tx)}
.hist-delta .del{color:var(--crit-tx)}
.hist-preview{flex:1;min-width:0;display:flex;flex-direction:column}
.hist-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
.hist-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hist-body{flex:1;min-height:0;overflow:auto;padding:16px 18px}
.hist-body .preview-img{max-width:100%}
.hist-body .preview-frame{width:100%;height:100%;min-height:320px;border:1px solid var(--line);border-radius:var(--r-ctl)}
.hist-note{margin:0;padding:10px 18px 0;font-size:12.5px;color:var(--tx2)}
.hist-body .hist-note{padding:10px 0 0}
.hist-ro{font-size:12.5px;color:var(--tx2)}
.hist-empty{padding:18px}
.hist-notice{margin:12px 18px 0}
.hist-diff{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
.hist-diff td{padding:1px 8px;vertical-align:top}
.hist-diff td.ln{width:44px;text-align:right;color:var(--tx3);user-select:none}
.hist-diff td.sg{width:18px}
.hist-diff td.tx{white-space:pre-wrap;overflow-wrap:anywhere}
.hist-diff tr.add{background:var(--good-bg);color:var(--good-tx)}
.hist-diff tr.del{background:var(--crit-bg);color:var(--crit-tx)}
.hist-diff tr.gap td{padding:4px 12px;background:var(--inset);color:var(--tx2)}
dialog.viewer.confirm-dialog{width:520px}
.confirm-dialog .viewer-body{display:flex;flex-direction:column;gap:10px;max-height:none}
.confirm-dialog .viewer-body p{margin:0}
@media (max-width:900px){.hist{flex-direction:column}.hist-list{flex:none;max-height:40%;border-right:0;border-bottom:1px solid var(--line)}}

/* DEP-258: the Activity tab, built from the History panel's rows and panel. Tokens only. */
.act{padding:0;overflow:hidden}
.act .hist{min-height:480px;max-height:75vh}
.act-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:18px;border-bottom:1px solid var(--line)}
.act-head .hist-row{flex:1;width:auto;border-bottom:0}
.hist-path{font-family:var(--mono);font-size:12px;color:var(--tx2);overflow-wrap:anywhere}

/* DEP-259: the Ctrl+K palette, the Recent and Tags cards of the Files tab, and the tag filter chip. Tokens only.
   Every [hidden] used by these gets its own display rule below: a class that sets display wins over the
   attribute, which is how the mockup's tag filter left rows showing. */
.palette-kbd{font-size:10.5px;padding:0 5px;border:1px solid var(--line);border-radius:4px;color:var(--tx3);background:var(--inset)}
dialog.palette{background:var(--win);color:var(--tx);border:1px solid var(--line);border-radius:var(--r-win);padding:0;width:640px;max-width:92vw;max-height:70vh;margin:12vh auto 0;box-shadow:var(--shadow)}
dialog.palette[open]{display:flex;flex-direction:column}
dialog.palette::backdrop{background:rgba(3,5,8,.65)}
.palette-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.palette-glass{color:var(--tx3)}
.palette-input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font:inherit;font-size:15px}
.palette-input::placeholder{color:var(--tx3)}
.palette-scope{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--blue-tx);background:var(--accent-bg);border:1px solid var(--accent-line);border-radius:6px;padding:2px 8px}
.palette-list{overflow:auto;padding:6px}
.palette-section{padding:10px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.palette-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--tx);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.palette-row.active{background:var(--accent-bg)}
.palette-icon{flex:none;width:18px;text-align:center;color:var(--tx3)}
.palette-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-label b{color:var(--blue)}
.palette-detail{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11.5px;color:var(--tx3)}
.palette-empty{padding:18px 12px;color:var(--tx3);font-size:13px}
.palette-status{margin:0 10px 8px;padding:8px 12px;border-radius:var(--r-ctl);font-size:12.5px}
.palette-status.ok{color:var(--good-tx);background:var(--good-bg);border:1px solid var(--good-line)}
.palette-status.err{color:var(--crit-tx);background:var(--crit-bg);border:1px solid var(--crit-line)}
.palette-status[hidden]{display:none}
.palette-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--tx3)}
.palette-foot kbd{font-size:10.5px;padding:1px 6px;border:1px solid var(--line);border-radius:4px;background:var(--inset);color:var(--tx2)}
.palette-hint{margin-right:6px}

/* DEP-261: the document page (tabs, split right, modes, outline, properties). Own section; tokens only. */
.docpage{display:flex;flex-direction:column;gap:10px;height:calc(100vh - 215px);min-height:420px}
.dp-head-actions{display:flex;align-items:center;gap:8px}
.dp-panes{flex:1;min-height:0;display:flex;gap:12px}
.dp-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--win);border:1px solid var(--line);border-radius:var(--r-win);overflow:hidden}
.dp-pane.active{border-color:var(--accent-line)}
.dp-tabs{display:flex;align-items:center;gap:4px;margin:0;padding:0 8px;background:var(--top);overflow-x:auto}
.dp-tab{display:flex;align-items:center;gap:6px;padding:0 4px 0 0;margin-bottom:-1px}
.dp-tab-l{background:none;border:0;color:inherit;font:inherit;padding:9px 0 9px 14px;cursor:pointer;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-dot{color:var(--amber);font-size:10px}
.dp-chip-x{background:none;border:0;color:var(--tx3);cursor:pointer;font-size:11px;padding:2px 4px;border-radius:4px}
.dp-chip-x:hover{color:var(--tx);background:var(--inset2)}
.dp-plus{background:none;border:0;color:var(--tx2);cursor:pointer;font-size:16px;padding:4px 8px}
.dp-plus:hover{color:var(--tx)}
.dp-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line-soft)}
.dp-path{flex:1;min-width:0;font-family:var(--mono);font-size:12px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-msg{padding:16px}
.dp-pane>.formmsg{margin:10px 14px 0}
.dp-conflict{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.dp-conflict-actions{display:inline-flex;gap:8px;margin-left:auto}
.dp-theirs{flex:1 1 100%;min-height:90px;max-height:30vh;resize:vertical;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);color:var(--tx);font-family:var(--mono);font-size:12px;padding:8px 10px}
.dp-body{flex:1;min-height:0;display:flex}
.dp-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dp-content{flex:1;min-height:0;display:flex}
.dp-content.edit>*{flex:1 1 50%;min-width:0}
.dp-content.edit .dp-rendered{border-left:1px solid var(--line-soft)}
.dp-src{resize:none;border:0;outline:none;background:var(--bg);color:var(--tx);font-family:var(--mono);font-size:13px;line-height:1.55;padding:14px 16px;tab-size:4}
.dp-src:focus-visible{box-shadow:inset 0 0 0 1px var(--blue)}
.dp-rendered{flex:1;min-width:0;overflow:auto;padding:16px 22px}
.dp-rendered .toc,.dp-rendered .fm{display:none}
.dp-rendered .reader{display:block}
.dp-outline{flex:0 0 190px;border-left:1px solid var(--line-soft);overflow:auto;padding:14px 12px;font-size:12.5px}
.dp-outline-h{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx3);font-weight:600;margin-bottom:8px}
.dp-outline a{display:block;color:var(--tx2);text-decoration:none;padding:3px 6px;border-radius:6px;border-left:2px solid transparent;overflow-wrap:anywhere}
.dp-outline a:hover{color:var(--tx);background:var(--hover)}
.dp-outline a.active{color:var(--blue-tx);border-left-color:var(--blue);background:var(--accent-bg)}
.dp-outline a.lvl2{padding-left:14px}
.dp-outline a.lvl3{padding-left:22px}
.dp-outline a.lvl4,.dp-outline a.lvl5,.dp-outline a.lvl6{padding-left:30px}
.dp-props{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--inset)}
.dp-prop{display:flex;align-items:center;gap:10px}
.dp-prop-k{flex:0 0 100px;display:flex;align-items:center;gap:7px;color:var(--tx3);font-size:12px}
.dp-prop-i{width:16px;text-align:center;color:var(--tx2);font-family:var(--mono);font-size:11px}
.dp-prop-v{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dp-prop-t{color:var(--tx);font-size:13px}
.dp-prop-in,.dp-chip-add,.dp-addprop{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);padding:5px 9px;color:var(--tx);font-size:12.5px;font-family:var(--sans)}
.dp-prop-in{flex:1}
.dp-prop-in:focus,.dp-chip-add:focus,.dp-addprop:focus{outline:none;border-color:var(--blue)}
.dp-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 4px 1px 9px;border-radius:999px;background:var(--accent-bg);border:1px solid var(--accent-line);color:var(--blue-tx);font-size:11.5px}
.dp-addprop{align-self:flex-start;color:var(--tx2)}
.dp-prop-note{color:var(--amber-tx);font-size:12px}
.dp-status{padding:7px 14px;border-top:1px solid var(--line-soft);color:var(--tx3);font-size:11.5px;font-family:var(--mono);font-variant-numeric:tabular-nums}
@media (max-width:900px){.dp-panes{flex-direction:column}.dp-outline{display:none}}

/* DEP-312 (RD-1): shared components for the redesign. Tokens only. .toggle styles a real checkbox, so a form
   still posts it and it stays a plain checkbox without this stylesheet. */
input[type=checkbox].toggle,button.toggle{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:34px;height:20px;border-radius:999px;border:1px solid var(--line-hi);background:var(--inset2) radial-gradient(circle,var(--tx3) 6px,transparent 7px) no-repeat 0 50%/18px 18px;cursor:pointer;transition:background-position .12s}
input[type=checkbox].toggle:checked,button.toggle[aria-checked=true]{border-color:var(--blue-deep);background-color:var(--blue-deep);background-image:radial-gradient(circle,var(--on-accent) 6px,transparent 7px);background-position:100% 50%}
input[type=checkbox].toggle:disabled{opacity:.45;cursor:default}
button.toggle{padding:0;display:block}
.radio{display:flex;flex-direction:column;gap:8px}
.radio label{display:flex;gap:10px;align-items:flex-start;font-size:13px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--inset);color:var(--tx);cursor:pointer}
.radio label:has(input:checked){box-shadow:inset 0 0 0 1px var(--accent-line)}
.radio input{margin:3px 0 0;flex:none;accent-color:var(--blue)}
.radio label span{display:block;color:var(--tx3);font-size:12px}
.stack-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--inset2)}
.stack-bar i{display:block;height:100%}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 24px;color:var(--tx2)}
.empty .big{width:56px;height:56px;border-radius:16px;background:var(--win);display:grid;place-items:center;font-size:24px;color:var(--blue)}
.empty h2{margin:4px 0 0;color:var(--tx);font-size:18px}
.empty p{margin:0;max-width:460px}
.note{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;margin-bottom:16px;border-radius:var(--r-ctl);font-size:13px}
.note[hidden],.formmsg[hidden]{display:none}
.note.info{background:var(--accent-bg);color:var(--blue-tx);border:1px solid var(--accent-line)}
.note.warn{background:var(--amber-bg);color:var(--amber-tx);border:1px solid var(--amber-line)}
.note.crit{background:var(--crit-bg);color:var(--crit-tx);border:1px solid var(--crit-line)}
.note.ok{background:var(--good-bg);color:var(--good-tx);border:1px solid var(--good-line)}
.note b{color:inherit}
.note a{color:inherit;text-decoration:underline}
.note .btn{margin-left:auto;flex:none}

/* DEP-314 (RD-3): the hand-rendered auth pages (AuthPageLayout), layout B in the style of A. Brand panel on --rail with
   blue only as soft light and text accent (DEP-49 keeps --blue for action); below 900px only the logo stays. */
.lsplit{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--bg)}
.lart{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:56px 64px;background:var(--rail);border-right:1px solid var(--line)}
.lart::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 520px at 85% 15%,color-mix(in srgb,var(--blue-soft) 40%,transparent) 0,transparent 65%)}
.lart>*{position:relative}
.lart .brand{font-size:15px}
.lart .brand small{display:block;font-size:11.5px;font-weight:500;color:var(--tx3)}
.lart .claim{margin:auto 0 16px;font-size:40px;font-weight:660;line-height:1.15;letter-spacing:-.025em;color:var(--tx);max-width:520px}
.lart .claim span{color:var(--blue-tx)}
.lart p{margin:0;max-width:460px;color:var(--tx2);font-size:14.5px;line-height:1.6}
.lart .facts{display:flex;gap:22px;margin-top:26px;font-size:12.5px;color:var(--tx3)}
.lart .facts span+span::before{content:"·";margin-right:8px;color:var(--line-hi)}
.lform{display:grid;place-items:center;padding:40px 24px;background:var(--bg)}
.lform .in{width:380px;max-width:100%}
.lform .lform-logo{display:none;margin-bottom:28px}
.lform h1{font-size:26px;font-weight:660;letter-spacing:-.02em;margin:0 0 6px}
.lform .sub{color:var(--tx2);margin:0 0 28px;font-size:14px}
.lform .stepnote{font-size:11.5px;font-family:var(--mono);color:var(--tx3);margin-bottom:10px}
.lform .field{margin-bottom:16px}
.lform .field label{display:flex;justify-content:space-between;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--tx2);margin-bottom:6px}
.lform .field label a{font-weight:500}
.lform .searchbar{width:100%;height:44px;padding:0 14px;font-size:14px}
.lform .searchbar:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.lform .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;font-size:14px}
.lform .btn[hidden]{display:none}
.lform .btn+.btn{margin-top:10px}
.lform .div{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--tx3);font-size:12.5px}
.lform .div::before,.lform .div::after{content:"";flex:1;border-top:1px solid var(--line)}
.lform .fine{margin-top:26px;font-size:12.5px;color:var(--tx3);text-align:center}
.lform .back{display:inline-block;margin-top:18px;font-size:13px}
.lform .scope{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.lform .scope small{display:block;color:var(--tx3);font-size:12px}
.lform .scope code{flex:none;font-size:11.5px;color:var(--tx3)}
.lform .langswitch{display:flex;justify-content:flex-end;gap:6px;margin-bottom:18px;font-size:12px;font-family:var(--mono);color:var(--tx3)}
.lform .langswitch a{color:var(--tx3);text-decoration:none}
.lform .langswitch a[aria-current]{color:var(--tx);font-weight:600}
/* DEP-354: the invitation a sign-up link joins, and the address it is bound to, read-only. */
.lform .invchip{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:16px;border-radius:var(--r-ctl);background:var(--inset);border:1px solid var(--line)}
.lform div.invchip{flex-direction:column;gap:2px}
.lform .invchip b{display:block;font-size:14px}
.lform .invchip small{display:block;color:var(--tx3);font-size:12px}
.lform .searchbar[readonly]{color:var(--tx3);background:var(--inset2)}
.lform .scopes{margin-bottom:14px}
.lform .note{margin-top:14px}
.lform .consent-actions{display:flex;gap:10px;margin-top:18px}
.lform .consent-actions .btn+.btn{margin-top:0}
.field.login-remember{display:flex;align-items:center;gap:8px}
.field.login-remember input{width:auto;margin:0;accent-color:var(--blue)}
.lform .field.login-remember label{display:inline;margin:0;font-size:12px;font-weight:500;color:var(--tx2);cursor:pointer}
/* The form's first submit button decides what Enter does, so the password sign-in leads the form unseen. */
.default-submit{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.msq{display:grid;grid-template-columns:9px 9px;gap:2px}
.msq i{width:9px;height:9px}
.msq i:nth-child(1){background:#f25022}.msq i:nth-child(2){background:#7fba00}.msq i:nth-child(3){background:#00a4ef}.msq i:nth-child(4){background:#ffb900}
.gmark{width:18px;height:18px}
@media(max-width:900px){.lsplit{grid-template-columns:1fr}.lart{display:none}.lform .lform-logo{display:flex}}

/* DEP-315 (RD-4): the dashboard. One line of figures, the resume cards, and Needs you as the only coloured place. */
.dash-head{align-items:flex-end;margin-bottom:24px}
.dash-head h1{font-size:24px}
.summary{color:var(--tx2);font-size:13.5px;margin-top:6px}
.summary b{color:var(--tx);font-weight:600;font-family:var(--mono);font-size:13px}
.summary .sep{color:var(--line-hi);margin:0 8px}
.resume{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
.rc{background:var(--win);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;color:var(--tx);min-width:0}
.rc:hover{text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-hi)}
.rc .p{font:11px var(--mono);color:var(--tx3)}
.rc b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.rc>span:last-child{font-size:12px;color:var(--tx2)}
/* DEP-174: the "new in" badge gets a gap from the text it follows, beside it or wrapped under it (Razor trims the space). */
.rc>span:last-child:has(.badge){display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rc.hot{box-shadow:inset 0 0 0 1px var(--accent-line)}
.sechead.row a{text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px}
.dash-split .sechead{margin-top:0}
/* DEP-320: the organization pages: rows of a list card, the "needs" list, a feed, a legend and key-value pairs. */
.dlrow{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.dlrow:last-child{border:0}
.dlrow .t{flex:1;min-width:0}
.dlrow .t small{display:block;color:var(--tx3);font-size:12px}
details.dlrow{display:block}
details.dlrow>summary{cursor:pointer;list-style:none}
details.dlrow[open]>summary{margin-bottom:8px}
.needs .it{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.needs .it:last-child{border:0}
.needs .it[hidden]{display:none}
.needs .it .t{flex:1}
.needs .it .t span{display:block;color:var(--tx3);font-size:12px}
/* DEP-407: live notes. Green dot and badge, the top bar's pill with its popover list, the project's bar, the Start cards. */
.live-dot{color:var(--good-tx)}
.live-badge{display:inline-flex;align-items:center;margin-left:8px;padding:1px 7px;border-radius:6px;border:1px solid var(--good-line);background:var(--good-bg);color:var(--good-tx);font:11px var(--mono);white-space:nowrap}
.livewrap{margin-left:auto;display:flex}
.livepill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:14px;border:1px solid var(--good-line);background:var(--good-bg);color:var(--good-tx);font:600 12px var(--mono);cursor:pointer}
.livepill[hidden]{display:none}
.livepop{inset:auto;position:fixed;top:54px;right:130px;min-width:300px;max-width:420px}
.livepop:not(:popover-open){display:none}
.liverow{display:flex;align-items:center;gap:12px;padding:7px 10px}
.liverow .t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.liverow .t small{color:var(--tx3);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.liverow .btn{width:auto}
.livebar{align-items:center}
.livebar .liv-people{margin-left:auto}
.livebar .btn{margin-left:0;text-decoration:none}
.liv-people{display:flex;align-items:center;gap:6px}
.liv-avatars{display:inline-flex;gap:3px}
.avatar.sm{width:20px;height:20px;border-radius:6px;font-size:10px}
.rc[data-live-note] .btn{align-self:flex-start;margin-top:6px}
@media(max-width:860px){.resume{grid-template-columns:1fr}}

/* DEP-316 (RD-5): the Files tab as a browser. Tree | folder | properties, every link a plain href; .fb-hit stretches over
   a row or tile to select it, while the name link above it opens the item. */
.fb-quota{font-size:12px;margin:-4px 0 12px}
.fb{display:grid;grid-template-columns:260px minmax(0,1fr) 280px;gap:16px;align-items:start}
.fb-tree{display:flex;flex-direction:column;font-size:13px;padding:8px 0}
.fb-tree-head{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);font-weight:600;padding:0 8px 8px}
.fb-node{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--r-ctl);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-node:hover{background:var(--win);color:var(--tx);text-decoration:none}
.fb-node.on{background:var(--accent-bg);color:var(--tx)}
.fb-node.folder{color:var(--tx)}
.fb-node .tw{width:10px;flex:none;font-size:10px;color:var(--tx3)}
/* DEP-174: the name is its own flex item, so the ellipsis lands on it (a bare text node in a flex row is cut, not
   ellipsed); the full name rides along as the link's title. */
.fb-node .nm,.fb-name .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-main,.fb-props{background:var(--win);border-radius:12px;min-width:0}
/* DEP-174: the folder is a size container, so the list drops its By column on its own width rather than the window's. */
.fb-main{container-type:inline-size}
/* DEP-174: the crumb keeps at least 260px; below that the filter and the view switch wrap under it rather than
   squeezing it to "a…". */
.fb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
/* The markup already folds a deep path to "root / … / parent / current"; if that still does not fit, the links give way
   and the current folder never does. */
.fb-crumb{font:12.5px var(--mono);color:var(--tx2);flex:1 1 260px;min-width:0;display:flex;align-items:baseline;white-space:nowrap}
.fb-crumb>a{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fb-crumb .sep{margin:0 6px;color:var(--tx3);flex:none}
.fb-crumb b{color:var(--tx);flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fb-filter .searchbar{width:220px}
.seg{display:inline-flex;background:var(--inset);border-radius:var(--r-ctl);padding:2px}
.seg a{padding:4px 10px;border-radius:6px;font-size:12px;color:var(--tx2)}
.seg a.on{background:var(--inset2);color:var(--tx)}
.seg a:hover{text-decoration:none;color:var(--tx)}
.fb-list{display:flex;flex-direction:column}
/* DEP-174: the name takes all the width that is left; Kind, Size and Changed are narrow and fixed, By drops out below
   820px of folder (container query further down) and carries the full address as its title. */
.fb-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 68px 64px 88px 150px;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line-soft);font-size:13px}
.fb-row:last-child{border-bottom:0}
.fb-row.fb-head{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);font-weight:600;padding-top:8px;padding-bottom:8px}
.fb-row:not(.fb-head):hover,.fb-tile:hover{background:var(--inset)}
.fb-row.on,.fb-tile.on{background:var(--accent-bg)}
.fb-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-row>span.num{text-align:right}
.fb-hit{position:absolute;inset:0;z-index:0}
.fb-name{position:relative;z-index:1;color:var(--tx);font-weight:600;display:inline-flex;gap:8px;align-items:center;max-width:100%}
.fb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:14px}
.fb-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 10px;border-radius:10px;background:var(--inset);font-size:12px;min-width:0}
.fb-tile .big{font-size:28px}
.fb-tile .fb-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-empty{padding:48px 24px}
.fb-props{padding:16px}
.fb-props .fb-props-head{margin:0 0 12px}
.fb-props .card{background:var(--inset);margin-bottom:14px}
.fb-none{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 0;color:var(--tx3)}
.fb-none .big{font-size:28px}
.fb-none p{margin:0}
.fb-thumb{display:grid;place-items:center;height:110px;border-radius:10px;background:var(--inset);font-size:34px;margin-bottom:14px}
.fb-title{display:block;font-size:14px;overflow-wrap:anywhere}
.fb-path{font-size:11px;margin:2px 0 14px;overflow-wrap:anywhere}
.fb-facts{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px 10px;margin:0 0 14px;font-size:12.5px}
.fb-facts dt{color:var(--tx3);min-width:0}
.fb-facts dd{margin:0;display:flex;flex-wrap:wrap;gap:4px;min-width:0}
/* DEP-174: a list of people (Access): the name takes the whole line, on one line, cut with an ellipsis and whole in the title. */
.fb-facts.stacked{grid-template-columns:minmax(0,1fr);gap:2px 0}
.fb-facts.stacked dt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-facts.stacked dd{margin-bottom:8px}
.fb-props .sechead{margin:6px 0 8px}
.fb-links{display:flex;flex-direction:column;gap:6px;font-size:12.5px;margin-bottom:14px}
.fb-actions{display:flex;flex-wrap:wrap;gap:8px}
/* DEP-174: the properties column drops below the browser up to 1600px, not 1180px - below that, three columns left
   the folder too narrow for a full file name. */
@media(max-width:1600px){.fb{grid-template-columns:260px minmax(0,1fr)}.fb-props{grid-column:1/-1}}
@container (max-width:820px){.fb-row{grid-template-columns:minmax(0,1fr) 68px 64px 88px}.fb-row>span:nth-of-type(5){display:none}}
@media(max-width:860px){.fb{grid-template-columns:1fr}.fb-row{grid-template-columns:minmax(0,1fr) auto}.fb-row>span:nth-of-type(n+2):not(:nth-of-type(4)){display:none}}
.feed .it{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.feed .it:last-child{border:0}
.feed .it .w{color:var(--tx3);font:11px var(--mono);margin-left:auto;white-space:nowrap}
.legend{display:flex;gap:14px;font-size:12px;color:var(--tx2);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.kv2{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;font-size:13px;margin:12px 0 0}
.kv2 dt{color:var(--tx3)}
.kv2 dd{margin:0}
/* DEP-384: .kv2 rows whose value is a control (Account › Profile) centre on the label and keep the select a sensible width. */
.kv2-ctl{align-items:center}
.kv2-ctl select{width:100%;max-width:280px}
.pgroup{border:0;padding:0;margin:0;min-width:0}
.pgroup legend{float:left;width:100%;padding:0;margin:14px 0 0}
.pgroup legend+*{clear:both}
.pgroup+button{margin-top:8px}
.tablecard{padding:0;overflow:hidden}
.tablecard h3{margin:0;padding:14px 18px 8px}
/* DEP-389: the backup page. The overview tiles, the two layers and the destination list reuse .stat/.card/.badge/.toggle. */
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 10px}
.cardhead h3{margin:0;padding:0}
.card:not(.tablecard)>.cardhead{padding:0 0 10px}
.tablecard>.subtle,.tablecard>.formmsg,.tablecard form>:not(table){margin-left:18px;margin-right:18px}
.stat .v.txt{font-family:var(--sans);font-size:19px}
.stat .v .ok{color:var(--good-tx)}
.layer{display:flex;flex-direction:column;gap:10px}
.layer .lhead{display:flex;align-items:center;gap:10px}
.layer .lhead .num{width:22px;height:22px;border-radius:7px;background:var(--inset2);color:var(--tx2);font:600 11px/22px var(--mono);text-align:center;flex:none}
.layer p{margin:0;color:var(--tx2);font-size:13px}
.layer .facts{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--tx2)}
.layer .facts b{color:var(--tx);font-weight:600}
.layer summary{display:inline-block;cursor:pointer;list-style:none}
.dname{display:flex;gap:11px;align-items:center;min-width:0}
.dname b{display:block;font-weight:600;font-size:13px}
.dname small{display:block;color:var(--tx3);font-size:12px}
table.t td .why{display:block;font-size:12px;color:var(--tx3);margin-top:3px;max-width:300px;white-space:normal}
table.t td .why.crit{color:var(--crit-tx)}
table.t td .why.amber{color:var(--amber-tx)}
table.t tr.off td:not(:last-child){opacity:.55}
table.t td :is(span,time).mono{white-space:nowrap}
/* DEP-395: the row menu is an .acctpop (native popover) hung under its button. */
.menu{margin:4px 0;min-width:230px}
@supports (position-area:bottom){.menu{inset:auto;margin:4px 0;position-area:bottom span-left;position-try-fallbacks:flip-block}}
.menu .danger{color:var(--crit-tx);margin-top:4px;border-top:1px solid var(--line-soft)}
a.card.stat{color:inherit;text-decoration:none}
a.card.stat:hover{background:var(--hover)}

/* DEP-317 (RD-6): the overlay on /projects/{org}/{slug}/view/{path}, drawn over the Files browser. */
body:has(.ov){overflow:hidden}
.ov-backdrop{position:fixed;inset:0;z-index:40;background:var(--bg);opacity:.72}
.ov{position:fixed;inset:28px;z-index:41;display:flex;flex-direction:column;background:var(--win);border:1px solid var(--line);border-radius:var(--r-win);overflow:hidden}
.ov-head{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.ov-icon{font-size:22px}
.ov-title{display:flex;flex-direction:column;min-width:0;flex:1 1 220px}
.ov-title b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-title .mono{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-nav,.ov-tools{display:flex;align-items:center;gap:8px}
.ov-nav [aria-disabled="true"]{opacity:.4;cursor:default}
.ov-seg{display:inline-flex;background:var(--inset);border-radius:var(--r-ctl);padding:2px}
.ov-seg a{padding:4px 10px;border-radius:6px;font-size:12px;color:var(--tx2)}
.ov-seg a[aria-current]{background:var(--inset2);color:var(--tx)}
.ov-seg a:hover{text-decoration:none;color:var(--tx)}
.ov-menu{position:relative}
.ov-menu>summary{list-style:none;cursor:pointer}
.ov-menu>summary::-webkit-details-marker{display:none}
.ov-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:2;min-width:180px;display:flex;flex-direction:column;padding:6px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl)}
.ov-menu-list button{background:transparent;border:0;color:var(--tx);text-align:left;padding:7px 10px;border-radius:6px;font:inherit;font-size:12.5px;cursor:pointer}
.ov-menu-list button:hover{background:var(--inset2)}
.ov-menu-list button.danger{color:var(--crit-tx)}
.ov-status{margin:0;padding:8px 16px;border-radius:0}
.ov-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0}
.ov-main{padding:16px 20px;overflow:auto;min-width:0}
.ov-side{padding:16px;border-left:1px solid var(--line-soft);overflow:auto;background:var(--inset)}
/* DEP-446: the note alone in Cockpit's webview (?embed=cockpit). The pane is the frame, so no inset, border or side column; the
   colours are these same tokens, set by the host over the bridge (theme), never a second palette here. */
.app.embed{display:block}
.app.embed .content{height:100vh;padding:0;overflow-y:auto}
.ov.ov-embed{inset:0;border:0;border-radius:0}
.ov.ov-embed .ov-body{grid-template-columns:minmax(0,1fr)}
.ov-side .sechead{margin:6px 0 8px}
.ov-missing{grid-template-columns:minmax(0,1fr)}
.ov-note{margin:0 0 12px}
.ov-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.ov-source{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px}
.ov-fallback{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 0}
.ov-fallback .big{font-size:42px}
.ov-zip{width:100%;border-collapse:collapse;font-size:12.5px}
.ov-zip th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);text-align:left;padding:6px 8px}
.ov-zip td{padding:5px 8px;border-top:1px solid var(--line-soft);overflow-wrap:anywhere}
.ov-zip .num{text-align:right;white-space:nowrap}
.ov-diff-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.ov-diff-actions{display:flex;align-items:center;gap:8px}
.ov-doc .dp-pane{height:100%}
.ov-versions{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.ov-versions li{border-radius:6px}
.ov-versions li.sel{background:var(--accent-bg)}
.ov-versions li>a,.ov-versions li>span{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 8px;color:var(--tx)}
.ov-versions .faint{font:11px var(--mono);white-space:nowrap;flex-shrink:0}
.ov-versions li>a:hover{text-decoration:none;background:var(--win);border-radius:6px}
.ov-versions .ov-sub{padding:0 8px 6px}
.ov-versions .ov-sub summary{cursor:pointer;color:var(--tx3);font-size:11.5px}
.ov-versions .ov-sub ol{list-style:none;margin:4px 0 0;padding:0 0 0 12px}
@media(max-width:860px){.ov{inset:0;border-radius:0}.ov-body{grid-template-columns:minmax(0,1fr)}.ov-side{border-left:0;border-top:1px solid var(--line-soft)}}

/* DEP-398 (NT-2): the live editor in the overlay (Read and Edit together). The look is mockup screens 1, 4, 7a and 7b. */
.ov-seg .off{padding:4px 10px;border-radius:6px;font-size:12px;color:var(--tx3);cursor:not-allowed}
.ov-off{font-size:11.5px;white-space:nowrap}
.ov-menu-list a{display:block;color:var(--tx);padding:7px 10px;border-radius:6px;font-size:12.5px}
.ov-menu-list a:hover{background:var(--inset2);text-decoration:none}
.ov-menu-list a[aria-current]{background:var(--accent-bg);color:var(--blue-tx)}
.ov-status.note{display:flex;gap:10px;align-items:center;margin:0;padding:8px 16px;border-radius:0;border-width:0 0 1px}
.ov-status.note[hidden]{display:none}
.ov-status.note .btn{margin-left:auto;text-decoration:none}
.nt-ro{display:inline-flex;align-items:center;gap:6px}
.nt-note{position:relative}
.nt-tb{position:sticky;top:-16px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:5px 6px;margin:-4px auto 18px;max-width:37rem;background:var(--inset);border-radius:var(--r-ctl);box-shadow:0 0 0 6px var(--win)}
.nt-tb button{background:none;border:0;color:var(--tx2);min-width:30px;height:28px;padding:0 7px;border-radius:6px;font:600 12.5px var(--sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.nt-tb button:hover{background:var(--inset2);color:var(--tx)}
.nt-tb button.on{background:var(--accent-bg);color:var(--blue-tx)}
.nt-tb button:disabled{opacity:.4;cursor:default;background:none}
.nt-tb select{background:none;border:0;color:var(--tx2);height:28px;padding:0 6px;border-radius:6px;font:600 12.5px var(--sans);cursor:pointer}
.nt-tb select:hover{background:var(--inset2);color:var(--tx)}
.nt-tb .sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.nt-tb .grow{flex:1}
.nt-tb .hint{font:11px var(--mono);color:var(--tx3);padding-right:6px}
.nt-doc .nt-pm{outline:none;min-height:240px;padding-bottom:60px}
.nt-doc .ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;font-variant-ligatures:none}
.nt-doc .ProseMirror pre{white-space:pre-wrap}
.nt-doc .nt-code{max-width:37rem;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--rail);overflow:hidden}
.nt-doc .nt-code-bar{display:flex;justify-content:space-between;align-items:center;padding:5px 8px 5px 12px;border-bottom:1px solid var(--line-soft);font-size:11px;color:var(--tx3)}
.nt-doc .nt-code-toggle{background:none;border:0;color:var(--tx2);padding:2px 8px;border-radius:5px;font:11px var(--sans);cursor:pointer}
.nt-doc .nt-code-toggle:hover{background:var(--inset2);color:var(--tx)}
.nt-doc .nt-code-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.nt-doc .nt-code pre{margin:0;padding:11px 14px;overflow-x:auto;white-space:pre;word-break:normal;font:12.5px/1.55 var(--mono);font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0;tab-size:4}
.nt-doc .nt-code code{white-space:pre}
.nt-doc .tk-k{color:var(--violet)} .nt-doc .tk-t{color:var(--blue-tx)} .nt-doc .tk-s{color:var(--good-tx)} .nt-doc .tk-c{color:var(--tx3);font-style:italic} .nt-doc .tk-n{color:var(--amber-tx)} .nt-doc .tk-f{color:#9cc4ff}
.nt-doc .ProseMirror [contenteditable=false]{white-space:normal}
.nt-doc img.ProseMirror-separator{display:inline!important;border:none!important;margin:0!important;width:0!important;height:0!important}
.nt-doc .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute;margin:0}
.nt-doc .ProseMirror-gapcursor:after{content:"";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid var(--tx);animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}
.nt-doc .ProseMirror-focused .ProseMirror-gapcursor{display:block}
@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}
.nt-doc .ProseMirror-hideselection *::selection{background:transparent}
.nt-doc .ProseMirror-hideselection *{caret-color:transparent}
.nt-doc ul[data-type=taskList]{list-style:none;padding-left:.2em}
.nt-doc ul[data-type=taskList]>li{display:flex;gap:9px;align-items:baseline}
.nt-doc ul[data-type=taskList]>li>div{flex:1;min-width:0}
.nt-doc li>p,.nt-doc ul[data-type=taskList]>li>div>p{margin:0}
.nt-doc ul[data-type=taskList]>li input{appearance:none;flex:none;width:15px;height:15px;margin:0;border:1.5px solid var(--line-hi);border-radius:4px;background:var(--inset);position:relative;top:2px;cursor:pointer}
.nt-doc ul[data-type=taskList]>li input:checked{background:var(--blue-deep);border-color:var(--blue-deep)}
.nt-doc ul[data-type=taskList]>li input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.nt-doc li[data-checked=true]>div{color:var(--tx3);text-decoration:line-through}
/* DEP-405, scherm 6: what a writer outside the session just changed, with the flag of who did it on the first block. */
.nt-doc .nt-ext{position:relative;border-left:3px solid var(--violet);background:var(--violet-bg);border-radius:0 var(--r-ctl) var(--r-ctl) 0;padding:6px 12px;margin-left:-15px}
.nt-doc .nt-ext[data-nt-flag]::after{content:attr(data-nt-flag);position:absolute;top:-10px;right:-8px;transform:translateX(100%);padding:1px 6px;border-radius:4px;background:var(--violet);color:#14101f;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none}
.nt-outside .btn{margin-left:auto}
.nt-doc .tableWrapper{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r-ctl)}
.nt-doc .tableWrapper table{border-collapse:collapse;width:100%;table-layout:auto;font-size:13px}
.nt-doc th,.nt-doc td{border-top:1px solid var(--line-soft);padding:6px 10px;text-align:left;vertical-align:top;min-width:3em}
.nt-doc th{background:var(--inset);border-top:0;font-weight:600}
.nt-doc td>p,.nt-doc th>p{margin:0}
.nt-doc .selectedCell{background:var(--accent-bg)}
.nt-doc[contenteditable=false] li[data-type=taskItem] input,.nt-doc .nt-pm[contenteditable=false] li[data-type=taskItem] input{cursor:default}
/* DEP-401: images in a note: the drop state (3a), the upload placeholder (3b) and the placed image with its line (3c). */
.nt-note.nt-dropping{outline:1.5px dashed var(--blue-deep);outline-offset:4px;border-radius:var(--r-ctl)}
.nt-drop-hint{position:sticky;bottom:24px;margin:16px auto 0;width:max-content;max-width:90%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 30px;border-radius:var(--r-ctl);border:1px solid var(--line-hi);background:var(--win);box-shadow:var(--shadow);font-size:12.5px;color:var(--tx2);pointer-events:none}
.nt-drop-hint b{color:var(--tx);font-size:13.5px}
.nt-drop-hint[hidden]{display:none}
.nt-doc .nt-upload{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--inset)}
.nt-upload-thumb{flex:none;width:54px;height:38px;border-radius:6px;background:var(--inset2) center/cover no-repeat}
.nt-upload-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:13px}
.nt-upload-text .mono{font-size:11px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-upload-bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.nt-upload-bar i{display:block;height:100%;width:0;background:var(--blue-deep);transition:width .2s}
.nt-doc .nt-img{margin:0 0 16px}
.nt-doc .nt-img img{display:block;max-width:100%;border-radius:var(--r-ctl);border:1px solid var(--line)}
.nt-doc .nt-img.ProseMirror-selectednode img{outline:2px solid var(--blue-deep);outline-offset:1px}
.nt-img-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--tx3)}
.nt-img-where{flex:1;min-width:0;line-height:1.5}
.nt-img-where b{color:var(--tx2)}
.nt-hint{font-size:11.5px;line-height:1.5;margin:-8px 0 18px}
.dp-status .live{color:var(--good-tx)}
.dp-status [data-state=reconnecting]{color:var(--amber-tx)}
.dp-status [data-state=refused]{color:var(--crit-tx)}
.nt-saved{margin:0 10px;font:12px var(--sans);color:var(--tx2);white-space:nowrap}
.nt-saved[data-state=saving]{color:var(--tx3)}
.nt-saved[data-state=saved]{color:var(--tx2)}
.nt-saved[data-state=held],.nt-saved[data-state=offline]{color:var(--amber-tx)}
.nt-saved[data-state=failed]{color:var(--crit-tx)}
/* DEP-406 (NT-10): offline, back online, session expired (scherm 5a-5c) */
.nt-doc .nt-local{border-left:3px solid var(--amber);background:var(--amber-bg);border-radius:0 var(--r-ctl) var(--r-ctl) 0;padding:2px 10px;margin-left:-13px}
.nt-away-next{opacity:.75}
.nt-away-hint{font-size:11.5px;margin:-8px 0 18px}
dialog.nt-expired{width:500px}
.nt-expired-head{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:650}
.nt-expired-body{padding:16px 18px 4px}
.nt-expired-body>p:first-child{margin:0 0 12px}
.nt-expired-body .field{margin-bottom:12px}
.nt-expired-body .field label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-bottom:4px}
.nt-expired-body .field input{width:100%}
.nt-expired-hint{font-size:12px}
.nt-expired-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.dp-status [data-notes-finish]{margin-left:10px}
.dp-status [data-notes-count]::before{content:" · ";color:var(--tx3)}
dialog.viewer.new-dialog{width:480px}
dialog.viewer.new-dialog .viewer-body{display:flex;flex-direction:column;gap:12px}
dialog.viewer.new-dialog .field{margin:0}
dialog.viewer.new-dialog progress{width:100%;accent-color:var(--blue)}
/* DEP-402: the quick start of a meeting note: a project picker with search, the path with its folder chip, and the amber "already exists" choice. */
dialog.viewer.meeting-dialog{width:640px;max-height:94vh;overflow:auto}
dialog.viewer.meeting-dialog .viewer-body{max-height:none;overflow:visible}
dialog.viewer.meeting-dialog .dialog-foot{align-items:center}
.mn-h{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:5px;font-weight:600}
.mn-pick{background:var(--inset);border-radius:var(--r-ctl);border:1px solid var(--line)}
.mn-pick>summary{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;list-style:none;font-size:13px}
.mn-pick>summary::-webkit-details-marker{display:none}
.mn-pick>summary::after{content:"▾";margin-left:auto;color:var(--tx3)}
.mn-pick[data-fixed]>summary{cursor:default;pointer-events:none}
.mn-pick[data-fixed]>summary::after{content:none}
.mn-pick[data-fixed] .mn-pick-body{display:none}
.mn-pick-body{padding:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.mn-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-ctl);background:none;color:var(--tx);font:inherit;font-size:13px;text-align:left;cursor:pointer;text-decoration:none}
.mn-row:hover{background:var(--accent-bg)}
.mn-row .badge{margin-left:auto}
.mn-rname{font-weight:600}
.mn-group{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);padding:6px 10px 2px}
.mn-empty{padding:8px 10px;color:var(--tx3);font-size:12.5px}
.mn-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--inset);border-radius:var(--r-ctl);padding:8px 10px;font-size:12.5px}
.mn-path select,.mn-path input{width:auto;min-width:0;max-width:190px}
.mn-path .btn{margin-left:auto}
.mn-name{flex:1;min-width:120px;overflow-wrap:anywhere}
.mn-full{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--tx3)}
.mn-preview summary{cursor:pointer;color:var(--tx3);font-size:12.5px;margin-top:8px}
.mn-preview pre{white-space:pre-wrap;margin:8px 0 0;font-size:12px;color:var(--tx2)}
.palette-row.palette-off{opacity:.55}
/* DEP-174: add/edit goes through a dialog; .wide for forms with many fields, .dialog-foot keeps the buttons out of the scroll, a refused save shows its error above the form. */
dialog.viewer.new-dialog.wide{width:640px}
.dialog-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
/* DEP-386: the add-a-destination dialog. .pv is one tile to choose (aria-disabled when it cannot be), .steps the step bar, .pgrp a group of tiles. */
dialog.viewer.new-dialog.wide:has(.pv-grid){width:820px}
dialog.viewer.new-dialog.wide:has(.pv-grid) .viewer-body{max-height:80vh}
.logo{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font:700 11px/1 var(--sans);color:var(--on-accent);letter-spacing:-.02em}
.logo svg{width:18px;height:18px}
.logo.lg{width:38px;height:38px;border-radius:10px;font-size:13px}
.logo.lg svg{width:22px;height:22px}
.offer{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.offer .plus{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--inset2);color:var(--tx);font-size:22px}
.offer .body{flex:1}
.offer .body p{margin:4px 0 10px;max-width:640px}
.pgrp{margin-bottom:18px}
.pgrp h4{margin:0;font-size:13px;font-weight:600;color:var(--tx)}
.pgrp>p{margin:2px 0 10px;color:var(--tx3);font-size:12px}
.pv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pv{display:flex;gap:11px;align-items:flex-start;text-align:left;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:11px 12px;color:var(--tx);font:inherit;cursor:pointer;min-height:64px}
.pv:hover:not([aria-disabled=true]){border-color:var(--blue);background:var(--inset2)}
.pv b{display:block;font-size:13px;font-weight:600}
.pv small{display:block;color:var(--tx3);font-size:11.5px;line-height:1.35;margin-top:2px}
.pv[aria-disabled=true]{cursor:default;background:var(--win);border-style:dashed}
.pv[aria-disabled=true] .logo{filter:grayscale(1);opacity:.45}
.pv[aria-disabled=true] b{color:var(--tx2)}
.pv .na{display:block;margin-top:5px;font-size:11.5px;color:var(--tx2);line-height:1.35}
.pv .na a{color:var(--blue-tx);text-decoration:underline}
.steps{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--tx3);padding:10px 18px;border-bottom:1px solid var(--line-soft)}
.steps span{display:flex;align-items:center;gap:6px}
.steps i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:600 10px/1 var(--mono);background:var(--inset2);color:var(--tx3)}
.steps .on{color:var(--tx)}
.steps .on i{background:var(--blue-deep);color:var(--on-accent)}
.steps .done i{background:var(--good-bg);color:var(--good-tx)}
.steps .sep{color:var(--line-hi)}
.lock{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--tx3);margin-top:4px}
/* DEP-390: the connect step. .explain numbers its three steps, .connected is the bar once back (amber when the first test failed), .keep is how much to keep. */
.explain{margin:0 0 14px;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:8px}
.explain li{counter-increment:s;display:flex;gap:10px;font-size:13px;color:var(--tx2)}
.explain li::before{content:counter(s);flex:none;width:20px;height:20px;border-radius:50%;background:var(--inset2);color:var(--tx2);font:600 11px/20px var(--mono);text-align:center}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.field .hint{font-size:12px;color:var(--tx3);margin-top:5px}
.keep{display:grid;grid-template-columns:110px 110px 1fr;gap:10px;align-items:end}
.keep .field{margin:0}
.keep .calc{font-size:12px;color:var(--tx2);padding-bottom:9px}
.connected{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-ctl);background:var(--good-bg);border:1px solid var(--good-line);color:var(--good-tx);font-size:13px;margin-bottom:14px}
.connected b{color:var(--tx)}
.connected .btn{margin-left:auto}
.connected.amber{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-tx)}
.lock svg{width:14px;height:14px;flex:none;color:var(--good-tx)}
/* DEP-433: the account wizard reuses the destination wizard primitives inline. */
.ai-setup{max-width:820px;padding:0}
.ai-setup .viewer-body{padding:18px}
.ai-setup .steps button{display:flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.ai-setup .steps button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-ctl)}
.ai-setup .pv[aria-pressed=true]{border-color:var(--blue);background:var(--blue-soft)}
.ai-brainpick{margin-top:16px}
.ai-brainpick select{width:100%}
.ai-setup .subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.account-tabs{flex-wrap:wrap}
.ai-instruction-head{margin-bottom:6px;font-size:12px}
.ai-setup .charcount.over{color:var(--crit)}
.ai-setup .lg-proj{background:var(--inset2);color:var(--tx2)}
.ai-setup .lg-brain{background:var(--violet-bg);color:var(--violet)}
.ai-setup .lg-both{background:var(--pal-6)}
.ai-tool-note{font-size:12px;margin:0 0 8px}
.ai-verification-code{margin-bottom:14px}
.ai-verification-note{font-size:12px;margin:0}
.checks{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.checks li{display:flex;align-items:center;gap:10px;color:var(--tx3);font-size:13px}
.checks li i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--inset2);font:600 11px var(--mono);font-style:normal}
.checks li.wait{color:var(--tx)}
.checks li.ok{color:var(--good-tx)}
.pulse{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 var(--amber);animation:ai-pulse 1.5s infinite}
.summ{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;font-size:13px}
.summ dt{color:var(--tx3)}
.summ dd{margin:0;color:var(--tx)}
@keyframes ai-pulse{70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ai-setup .lg-anthropic{background:var(--pal-5)}
.ai-setup .lg-openai{background:var(--pal-6)}
.ai-setup .lg-cursor{background:var(--pal-4)}
.ai-setup .lg-gemini{background:var(--pal-1)}
@media(max-width:640px){.ai-setup .pv-grid{grid-template-columns:1fr}.ai-setup .steps{overflow-x:auto}.ai-setup .steps button{white-space:nowrap}}
/* The installation-set editor (js/cockpit-set-editor.js): grid rows of plain .searchbar controls. */
dialog.viewer.new-dialog.wide:has([data-cockpit-set-editor]){width:900px}
/* Spacing: a pane is a column of sections 18px apart; inside a section, rows sit 10px apart and nothing ends in a margin. */
.cse-tabs{align-items:center;margin-bottom:18px}
.cse-tabs .cse-adv{margin-left:auto}
.cse-pane{display:flex;flex-direction:column;gap:18px}
.cse-sec>:last-child,.cse-sec .field{margin-bottom:0}
.cse-row{display:grid;gap:8px;align-items:center;margin-bottom:10px}
.cse-row>*{min-width:0}
.cse-headrow{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);font-weight:600;margin-bottom:6px}
.cse-stores{grid-template-columns:150px 1fr 220px 34px}
.cse-plugins{grid-template-columns:1fr 110px 150px 120px 110px 34px}
.cse-settings{grid-template-columns:1fr 190px 200px 34px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cse-pick{position:relative}
.cse-suggest{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;min-width:260px;max-height:240px;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--win);border:1px solid var(--line);border-radius:var(--r-ctl);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.cse-suggest li{display:flex;flex-direction:column;gap:1px;padding:7px 10px;border-radius:6px;cursor:pointer}
.cse-suggest li+li{border-top:1px solid var(--line-soft)}
.cse-suggest li:hover,.cse-suggest li.active{background:var(--inset2);border-top-color:transparent}
.cse-suggest li:hover+li,.cse-suggest li.active+li{border-top-color:transparent}
.cse-sid{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--blue)}
.cse-sname{font-size:12px;color:var(--tx2)}
.cse-row select:disabled,.cse-row input:disabled{opacity:.45}
.cse-actions{margin:0}
.cse-actions select{flex:1;max-width:380px}
.cse-actions .btn{white-space:nowrap}
.cse-help{font-size:12.5px;line-height:1.5;margin:0 0 10px}
.cse-name{display:flex;flex-direction:column;gap:2px}
.cse-key{font-size:11px;color:var(--tx3)}
.cse-desc{font-size:12px;line-height:1.45;color:var(--tx2)}
.cse-newhelp{margin-top:10px;padding:10px 12px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl)}
.cse-nav{justify-content:space-between;border-top:1px solid var(--line);padding-top:14px}
.field label.cse-check{display:flex;font-size:13px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--tx);cursor:pointer}
.cse-inline{max-width:340px}
.viewer-body pre.cse-preview,.cse-preview{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:10px 12px;max-height:260px;overflow:auto;white-space:pre-wrap;margin:0}
dialog.viewer>.formmsg{margin:14px 18px 0}

/* DEP-322: the platform's organization table; a name cell with initials, like the org rail's tiles. */
.pname{display:flex;align-items:center;gap:10px}
.pname small{display:block;font-family:var(--mono);color:var(--tx3)}
.mono-av{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--inset2);color:var(--tx)}
table.t .badge{white-space:nowrap}
/* Sits on a <td>: display:flex would take it out of the table layout, so it would stop stretching to the row's
   height and draw its border-bottom at its own height, off the line of the other cells. */
.rowacts{text-align:right;white-space:nowrap}
.rowacts>*+*{margin-left:6px}
/* DEP-324 (RD-13): the search page's big field, with the scope as segments below it. */
.search-big{display:flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 14px;margin-bottom:12px;background:var(--inset);border-radius:var(--r-ctl);font-size:15px}
.search-big:focus-within{box-shadow:0 0 0 2px var(--blue-soft)}
.search-big input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--tx);font:inherit}
/* DEP-325 (RD-14): the inbox list reads as text, as in the mockup; the row link keeps the hover. */
.inbox-list .nmcell a{color:inherit}
.inbox-list .nmcell a:hover{color:var(--blue-tx)}

/* DEP-365: the help book. The "?" is a native popover (no script); with anchor positioning it opens under its button,
   without it the browser centres it. */
.helpbtn{margin-right:8px;text-decoration:none}
.helpq{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;padding:0;vertical-align:1px;border:1px solid var(--line);border-radius:50%;background:var(--inset);color:var(--tx3);font-size:10px;font-weight:600;cursor:pointer}
.helpq:hover,.helpq:focus-visible{color:var(--blue);border-color:var(--blue)}
.helppop{width:300px;padding:12px 14px;border:1px solid var(--line-hi);border-radius:var(--r-ctl);background:var(--win);color:var(--tx);font-size:12.5px;line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.helppop p{margin:6px 0 10px;color:var(--tx2)}
.helppop .row{border-top:1px solid var(--line-soft);padding-top:8px;font-size:12px}
@supports (position-area:bottom){.helppop{inset:auto;margin:6px 0;position-area:bottom span-right;position-try-fallbacks:flip-block,flip-inline}}
.helphero{padding:28px 30px;margin-bottom:16px}
.helphero h1{margin:0 0 4px;font-size:22px;font-weight:660;letter-spacing:-.02em}
.helphero .search-big{max-width:640px;margin:16px 0 10px}
.helppopular{flex-wrap:wrap;gap:6px;font-size:12px}
.helpchapters .dlrow{display:block;color:var(--tx);text-decoration:none}
.helpchapters .dlrow:hover{color:var(--blue-tx)}
.helpsplit{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.helpsplit>.dp-outline{border-left:0;padding:0}
.help-article{grid-template-columns:minmax(0,60rem) 200px;gap:40px;justify-content:space-between}
.help-article>.dp-outline{border-left:1px solid var(--line-soft);padding:0 0 0 12px;position:sticky;top:12px}
.help-article .md ol{counter-reset:step;list-style:none;padding-left:0}
.help-article .md ol>li{counter-increment:step;position:relative;padding-left:34px;margin-bottom:10px}
.help-article .md ol>li::before{content:counter(step);position:absolute;left:0;top:-1px;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line-hi);border-radius:50%;font-size:11px;font-weight:600;color:var(--tx2)}
.help-article .md h2{scroll-margin-top:12px}
.help-article a.card{display:block;color:var(--tx);text-decoration:none}
@media (max-width:900px){.helpsplit,.help-article{grid-template-columns:minmax(0,1fr)}}
/* DEP-391: the destination form's fields side by side; the server row is address, port, folder. */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:2fr 90px 2fr;gap:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}

/* DEP-399: presence. --c is the person's colour from the hub's stamp (a Depot token); the selection is 28% of it. */
.nt-stack{display:inline-flex;align-items:center}
.nt-av{flex:none;width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:700;color:var(--c);background:var(--inset);border:2px solid var(--c)}
.nt-stack .nt-av+.nt-av{margin-left:-7px}
.nt-av[data-pal="1"]{--c:var(--pal-1)}
.nt-av[data-pal="2"]{--c:var(--pal-2)}
.nt-av[data-pal="3"]{--c:var(--pal-3)}
.nt-av[data-pal="4"]{--c:var(--pal-4)}
.nt-av[data-pal="5"]{--c:var(--pal-5)}
.nt-av[data-pal="6"]{--c:var(--pal-6)}
.nt-av[data-pal="7"]{--c:var(--pal-7)}
.nt-av[data-pal="8"]{--c:var(--pal-8)}
.nt-lastsession{margin-bottom:18px}
.nt-lastsession .dim{font-size:11.5px;margin:2px 0 8px}
.nt-people{margin-bottom:18px}
.nt-who{display:flex;align-items:center;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:var(--r-ctl);transition:background .4s}
.nt-who.new{background:var(--good-bg);box-shadow:inset 0 0 0 1px var(--good-line)}
.nt-who-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.nt-who-text b{font-size:13px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-who-text small{color:var(--tx3);font-weight:500;font-size:11px}
.nt-who-text span{color:var(--tx3);font-size:11.5px}
.nt-caret{position:relative;margin-left:-1px;margin-right:-1px;border-left:2px solid var(--c);word-break:normal;pointer-events:none}
.nt-caret::after{content:attr(data-name);position:absolute;bottom:100%;left:-2px;white-space:nowrap;padding:0 5px;border-radius:4px 4px 4px 0;background:var(--c);color:#0b0d12;font:600 10.5px/16px var(--sans);user-select:none}
.nt-doc .ProseMirror :is(p,h1,h2,h3):has(> .nt-caret:first-child + br.ProseMirror-trailingBreak) .nt-caret::after{bottom:auto;top:2px;left:6px;border-radius:4px}
.nt-sel{border-radius:2px}
.nt-toast{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:5;padding:9px 14px;border-radius:var(--r-ctl);border:1px solid var(--line-hi);background:var(--win);color:var(--tx);font-size:12.5px;box-shadow:var(--shadow)}
.nt-toast[hidden]{display:none}
.mn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.mn-chip{display:inline-flex;align-items:center;gap:6px;background:var(--inset);border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 10px;font-size:12.5px}
.mn-chip-x{border:0;background:none;color:var(--tx3);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.mn-people{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:140px;overflow:auto}
.nt-who.away{opacity:.6}
/* DEP-411 (NT-14): invite from an open note (prefix ni-, from the notes-inbox mockup) */
.ni-pop{position:absolute;right:150px;top:58px;z-index:20;width:440px;background:var(--win);border:1px solid var(--line-hi);border-radius:var(--r-ctl);padding:12px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.ni-head{display:flex;flex-direction:column;gap:2px;margin:0 2px 10px}.ni-head .mono{font-size:11px}
.ni-list{display:flex;flex-direction:column;gap:2px}
.ni-row{display:flex;align-items:flex-start;gap:10px;padding:7px 8px;border-radius:8px;font-size:12.5px}
.ni-row.on{background:var(--inset)}
.ni-row.off{opacity:.55}
.ni-row .avatar{width:22px;height:22px;font-size:10px;border-radius:6px;background:var(--inset2);color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c);flex:none}
.ni-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ni-who .mono{font-size:11px}
.ni-why{font-size:11.5px;color:var(--tx3)}.ni-why.amber{color:var(--amber-tx)}
.ni-grant{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:11.5px;color:var(--amber-tx);background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:7px;padding:6px 8px}
.ni-seg{display:inline-flex;gap:10px;color:var(--tx)}.ni-seg input{accent-color:var(--blue);margin:0 4px 0 0}
.ni-row .badge{flex:none}
.ni-pop .nt-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:5px 6px;cursor:text;margin-bottom:8px}
.ni-pop .nt-chip{display:inline-flex;align-items:center;gap:6px;background:var(--inset2);border-radius:7px;padding:2px 6px 2px 2px;font-size:12.5px}
.ni-pop .nt-chip button{background:none;border:0;color:var(--tx3);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.ni-pop .nt-chips:focus-within{border-color:var(--blue)}
.ni-pop .nt-chips input{flex:1;min-width:120px;border:0;background:none;color:var(--tx);font:13px var(--sans);outline:none;padding:4px}
.ni-pop .nt-chip .avatar{width:20px;height:20px;font-size:10px;border-radius:5px;background:var(--win);color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c);flex:none}
.ni-row .avatar{width:22px;height:22px;font-size:10px;border-radius:6px;background:var(--inset2);color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c);flex:none}
.ni-again{align-self:flex-start;border:0;background:none;padding:0;color:var(--blue-tx);font-size:11.5px;cursor:pointer;text-decoration:underline}
.ni-row[role=button]{cursor:pointer}
.ni-mail{display:flex;align-items:center;gap:4px;margin:0 2px 12px;font-size:12.5px}
.ni-acts{display:flex;gap:8px;justify-content:flex-end}

/* DEP-443: the share dialog (colleagues, external by mail, link, validity, message) and its Active links tab. Scoped to .share2. */
dialog.viewer.share2{width:820px}
.share2 .viewer-body{display:flex;flex-direction:column;gap:14px;padding:16px 18px 18px;max-height:78vh}
.share2 [data-pane]{display:flex;flex-direction:column;gap:14px}
.share2 [hidden]{display:none!important}
.share2 .seg button{background:none;border:0;padding:5px 12px;border-radius:6px;font-size:12.5px;color:var(--tx2);cursor:pointer;font-family:var(--sans)}
.share2 .seg button.on{background:var(--inset2);color:var(--tx)}
.share2 .how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.share2 .how label{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--inset);cursor:pointer;font-size:12.5px;position:relative}
.share2 .how label b{font-weight:600;color:var(--tx)}
.share2 .how label span{color:var(--tx3);font-size:11.5px;line-height:1.35}
.share2 .how input{position:absolute;opacity:0;pointer-events:none}
.share2 .how label:has(input:checked){border-color:var(--blue);background:var(--accent-bg)}
.share2 .how label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.share2 .how label.dis{opacity:.5;cursor:not-allowed}
.share2 .how label .bg.n{align-self:flex-start;margin-top:4px}
.share2 .flabel{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);margin-bottom:6px;font-weight:600}
.share2 .picker .nt-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:5px 6px;cursor:text;margin-bottom:6px}
.share2 .picker .nt-chips:focus-within{border-color:var(--blue)}
.share2 .picker .nt-chip{display:inline-flex;align-items:center;gap:6px;background:var(--inset2);border-radius:7px;padding:2px 6px 2px 2px;font-size:12.5px}
.share2 .picker .nt-chip.amber{box-shadow:inset 0 0 0 1px var(--amber-line)}
.share2 .picker .nt-chip button{background:none;border:0;color:var(--tx3);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.share2 .picker .nt-chip .avatar{width:20px;height:20px;font-size:10px;border-radius:5px;background:var(--win);color:var(--c);box-shadow:inset 0 0 0 1.5px var(--c);flex:none;display:grid;place-items:center}
.share2 .picker .nt-chips input{flex:1;min-width:140px;border:0;background:none;color:var(--tx);font:13px var(--sans);outline:none;padding:4px}
.share2 .picker .ni-list{max-height:196px;overflow:auto}
.share2 .ni-row .avatar{display:grid;place-items:center}
.share2 .ni-row:hover{background:var(--hover)}
.share2 .exp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.share2 .exp label{padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--inset);font-size:12.5px;cursor:pointer;color:var(--tx2);position:relative}
.share2 .exp label:has(input:checked){border-color:var(--blue);background:var(--accent-bg);color:var(--blue-tx)}
.share2 .exp label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.share2 .exp label.dis{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.share2 .exp input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.share2 .exp .custom{display:inline-flex;gap:6px;align-items:center}
.share2 .exp .custom input,.share2 .exp .custom select{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:5px 8px;color:var(--tx);font:12.5px var(--sans);width:70px}
.share2 .exp .custom select{width:auto}
.share2 .hint{font-size:11.5px;color:var(--tx3);margin:6px 0 0}
.share2 textarea{width:100%;min-height:62px;resize:vertical;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 11px;color:var(--tx);font:13px var(--sans)}
.share2 textarea:focus{outline:none;border-color:var(--blue)}
.share2 .managed{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--tx2);background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 10px}
.share2 .managed svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--tx3)}
.share2 .managed .bg.n{margin-left:auto;flex:none}
.share2 .foot{display:flex;gap:8px;justify-content:flex-end;align-items:center;border-top:1px solid var(--line-soft);padding-top:12px;position:sticky;bottom:-18px;background:var(--win);padding-bottom:18px;margin-bottom:-18px}
[data-share-chip]{white-space:nowrap;cursor:pointer}
[data-share-chip][hidden]{display:none}
.share2 .foot .dim{margin-right:auto;font-size:12px}
.share2 .links{width:100%}
.share2 .links td,.share2 .links th{font-size:12.5px;vertical-align:middle;padding:9px 8px}
.share2 .links tr.gone td{opacity:.5}
.share2 .links tr.fresh td{background:var(--accent-bg)}
.share2 .links .who{display:flex;flex-direction:column;min-width:0}
.share2 .links .who small{color:var(--tx3);font-size:11px;font-family:var(--mono);overflow-wrap:anywhere}
.share2 .linkbtn{background:none;border:0;color:var(--blue-tx);cursor:pointer;font:12px var(--sans);padding:0}
.share2 .links .acts{white-space:nowrap;text-align:right}
.share2 .links .acts .linkbtn{margin-right:10px}
@media(max-width:640px){dialog.viewer.share2{width:100vw;max-width:100vw;max-height:100vh;border-radius:0}.share2 .how{grid-template-columns:1fr}.share2 .links thead{display:none}.share2 .links,.share2 .links tbody,.share2 .links tr,.share2 .links td{display:block;width:100%}.share2 .links tr{border-bottom:1px solid var(--line-soft);padding:6px 0}.share2 .links td{padding:3px 8px;border:0}.share2 .links .acts{text-align:left}}
/* DEP-444: the opened-link page - owner bar details, the validity chips and the kind rows of its dialogs. */
.exp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.exp label{padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--inset);font-size:12.5px;cursor:pointer;color:var(--tx2)}
.exp label:has(input:checked){border-color:var(--blue);background:var(--accent-bg);color:var(--blue-tx)}
.exp label.dis{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.exp input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.exp .custom{display:inline-flex;gap:6px;align-items:center}
.exp .custom input,.exp .custom select{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:5px 8px;color:var(--tx);font:12.5px var(--sans);width:70px}
.exp .custom select{width:auto}
.managed{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--tx2);background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:8px 10px}
.managed svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--tx3)}
.managed .bg.n{margin-left:auto;flex:none}
.shared-owner-state.stack{flex-direction:column;align-items:flex-start;gap:6px}
.owner-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.owner-meta{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:12px;color:var(--tx3)}
.owner-meta b{color:var(--tx2);font-weight:500}
.shared-owner-actions{flex-wrap:wrap}
.shared-callout{margin:0 0 14px}
.conv{display:flex;flex-direction:column;gap:6px}
.conv label{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--inset);cursor:pointer;font-size:12.5px}
.conv label > span:first-of-type{display:flex;flex-direction:column;gap:3px;flex:1}
.conv label small{color:var(--tx3);font-size:11.5px}
.conv label:has(input:checked){border-color:var(--blue);background:var(--accent-bg)}
.conv label.dis{opacity:.5;cursor:not-allowed}
.conv input[type=radio]{accent-color:var(--blue);margin-top:3px}
.conv select,.conv input[type=email]{margin-top:4px;align-self:flex-start}
.shared-note{margin:14px 0 0;font-size:12px}
.shared-notice{margin:14px 0 0}
.shared-callout:has(.btn){display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.shared-callout .btn{margin-left:auto}
.shared-owner form{display:contents}
.conv select,.conv input[type=email],.exp input[type=datetime-local]{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-ctl);padding:4px 8px;color:var(--tx);font:12.5px var(--sans)}
.exp label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:1px}
.exp input[type=datetime-local]{margin-left:8px}