/* ==========================================================================
   Catedra CRM — visual system

   Everything on screen is built from the tokens in the first block. The rules
   below only ever consume them, so a change there moves the whole app at once.

   Three decisions drive the look:
   1. One accent. Pipeline colours are four tints of that same accent, so the
      board, the dashboard and the reports read as one chart, not a rainbow.
   2. No monospace in the interface. Figures line up through tabular numerals
      in the UI face, which keeps columns aligned without the terminal look.
   3. Cards are drawn with a hairline, not a shadow. Shadows are reserved for
      things that genuinely float above the page: menus, the drawer, toasts.

   Layout: fixed rail on the left, a dark chrome band across the top, page
   content capped at --page and centred. A record sits in three columns:
   properties, activity thread, associations.
   ========================================================================== */

:root{
  color-scheme:light;

  /* ---- surfaces & text ----------------------------------------------------
     A cool-neutral grey ground with white cards on top. The greys carry a
     slight blue cast so they sit in the same temperature as the ink and the
     chrome band — the previous palette mixed warm chrome with cool content. */
  --bg:#F0F0F0; --surface:#FFFFFF; --surface-2:#EDF0F2; --surface-3:#DFE4E8;
  /* One secondary gray, not two: labels, timestamps, metadata and status
     text all read the same tone now. --faint used to sit lighter than
     --muted, which is what made the same kind of text (a field label here,
     a date there) look like it belonged to different hierarchies. */
  --ink:#1C2B36; --muted:#5E7384; --faint:#5E7384;
  --line:#E4E8EB; --line-strong:#CFD6DC;

  /* ---- accent & semantics -------------------------------------------------
     One accent, deep enough to pass AA as text on white (6.0:1). Status
     colours are muted on purpose: they mark state, they don't decorate. */
  --accent:#0F6E72; --accent-ink:#FFFFFF; --accent-soft:#E4EFEF; --accent-line:#A2C6C7;
  --good:#15704A; --warn:#8A5A09; --bad:#A33030;
  --good-soft:#E2F1E9; --warn-soft:#F6EEDC; --bad-soft:#F6E3E3;

  /* Pipelines: one hue, four tints, darkest first. The label already says
     which pipeline it is, so the colour only has to keep bars apart. */
  --p-lectori:#0F6E72; --p-b2b:#2E8D8F; --p-parteneri:#5CA9AB; --p-b2c:#8AC3C4;

  /* Finance reuses the semantic colours rather than owning a palette. */
  --fin-pos:var(--good); --fin-neg:var(--bad); --fin-warn:var(--warn);

  /* ---- chrome (top bar + rail) --------------------------------------------
     A constant dark band in both themes. Hover/active/line keep the same
     lightening steps the previous navy used, just carried over onto this
     neutral grey instead. */
  --chrome:#333333; --chrome-hover:#404040; --chrome-active:#4D4D4D;
  --chrome-line:#404040; --chrome-fg:#C9C9C9; --chrome-fg-strong:#FFFFFF;
  --chrome-accent:#5FB8BB; --chrome-faint:#999999;

  /* ---- spacing: strict 4px grid ------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  /* one padding for every panel, one gap between things inside one */
  --pad:16px; --gap:12px;

  /* ---- radius: 4 small, 6 controls, 8 surfaces ---------------------------- */
  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:8px; --r-corner:12px;

  /* ---- elevation: borders carry the structure, shadows only float --------- */
  --shadow-1:none;
  --shadow-2:0 2px 4px rgba(16,28,38,.06),0 8px 24px rgba(16,28,38,.12);

  /* ---- measurements ------------------------------------------------------- */
  --rail:184px; --ctrl:32px; --ctrl-sm:28px; --ctrl-xs:24px; --topbar:44px;
  /* the Finance ledger: one row height, one indent step per level of depth */
  --ledger-row:32px; --ledger-indent:20px;
  /* A record's two side columns. One value, used on both sides, because they are
     meant to be the same width — written as two numbers they had already drifted
     apart (320 and 340). The thread in the middle takes whatever is left. */
  --rec-side:380px;
  /* page content is capped so rows don't stretch to the width of the monitor;
     the board and the record page opt out (board-mode / wide-mode).
     1920 is a sanity ceiling for ultrawide monitors, not a reading measure: on
     any ordinary screen it never binds and the page uses the full width. The
     few places that genuinely need a measure cap themselves (forms, body copy). */
  --page:1920px;

  /* ---- typography ---------------------------------------------------------
     One family, Inter — built for UI rather than print, so it holds up at the
     11.5–13px most of this app runs at, with a full weight range and real
     tabular figures for amounts and dates. The system stack behind it is the
     fallback while the Google Fonts request is in flight, or if it fails.
     No separate display face: headings get weight and size, not a different
     font. --f-mono stays defined for code, but nothing in the UI uses it:
     .mono now means "tabular numerals", not "monospace". */
  --f-body:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --f-display:var(--f-body);
  --f-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --t-label:500 12px/1.35 var(--f-body);
  --t-xs:11.5px/1.45 var(--f-body);
  --t-sm:12px/1.45 var(--f-body);
  --t-md:13px/1.5 var(--f-body);
  --t-lg:14px/1.55 var(--f-body);

  --cw-head-bg:var(--chrome); --cw-head-fg:#FFFFFF; --cw-head-hover:rgba(255,255,255,.14);

  /* The ground under rendered email HTML — a signature in the composer, a sent
     message in the thread. That HTML is written for the white page of an inbox
     and carries its own hard-coded near-black text, so here it sits straight on
     the canvas behind it and reads as part of the message. In dark it can't: the
     canvas is near-black under near-black text, so the email gets the light sheet
     a mail client would give it — the same thing Gmail does in dark mode. */
  --email-sheet:transparent;
}

/* Dark theme: same structure, same accent family, cooler and lower contrast.
   Declared twice so the in-app toggle wins over the OS setting either way. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0E1419; --surface:#161D24; --surface-2:#1E262E; --surface-3:#2A343D;
  --ink:#E6ECF1; --muted:#92A2AE; --faint:#92A2AE;
  --line:#242D35; --line-strong:#323E48;
  --accent:#4FB5B8; --accent-ink:#06211F; --accent-soft:#143130; --accent-line:#2A5658;
  --good:#4FB885; --warn:#D1A75C; --bad:#DD8585;
  --good-soft:#132D20; --warn-soft:#2E2715; --bad-soft:#331D1D;
  --p-lectori:#4FB5B8; --p-b2b:#6AC3C5; --p-parteneri:#88D0D2; --p-b2c:#A6DDDE;
  --shadow-2:0 2px 4px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.45);
  --email-sheet:#FFFFFF;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1419; --surface:#161D24; --surface-2:#1E262E; --surface-3:#2A343D;
  --ink:#E6ECF1; --muted:#92A2AE; --faint:#92A2AE;
  --line:#242D35; --line-strong:#323E48;
  --accent:#4FB5B8; --accent-ink:#06211F; --accent-soft:#143130; --accent-line:#2A5658;
  --good:#4FB885; --warn:#D1A75C; --bad:#DD8585;
  --good-soft:#132D20; --warn-soft:#2E2715; --bad-soft:#331D1D;
  --p-lectori:#4FB5B8; --p-b2b:#6AC3C5; --p-parteneri:#88D0D2; --p-b2c:#A6DDDE;
  --shadow-2:0 2px 4px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.45);
  --email-sheet:#FFFFFF;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--t-md);overflow:hidden;
  display:flex;flex-direction:column;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Headings differ by weight, size and colour — never by family or by colouring
   one word inside them. Three steps are enough for an interface this dense. */
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.3;text-wrap:balance;letter-spacing:-.006em}
h1{font-size:18px;font-weight:600}
h2{font-size:15px;font-weight:600}
h3{font-size:13px;font-weight:600}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit;font-family:var(--f-body)}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:var(--r-1)}
[hidden]{display:none!important}
/* The browser's own date indicator is the one control we don't draw; tone it
   down so it doesn't outweigh the field it sits in, and flip it in dark mode. */
input[type=date]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.8}
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.85)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.85)}}
/* Only in dark does --email-sheet become a real surface, and a surface needs an
   inset: in light these are transparent and any padding here would just push the
   message out of line with everything else on the card. */
:root[data-theme="dark"] .cw-sig,:root[data-theme="dark"] .emailhtml{padding:var(--sp-2) 0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cw-sig,
  :root:not([data-theme="light"]) .emailhtml{padding:var(--sp-2) 0}}

/* .mono used to switch to a monospace face. It now only turns on tabular
   figures, so amounts and dates stay in column without the terminal texture. */
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.sm{font-size:var(--t-sm)}
/* Sentence case, not tracked-out capitals: a label should recede, and small
   capitals at 12px with letter-spacing read louder than the value next to it. */
.label{font:var(--t-label);color:var(--muted)}
.grow{flex:1;min-width:0}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Rendered email HTML (see emailFrame in core.js). The height here is only what
   it stands at until the frame has measured its own content and grown to fit. */
.emailframe{display:block;width:100%;height:40px;border:0;background:transparent;color-scheme:light}

/* ---------- global top bar ---------- */
.gtop{flex:none;position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--sp-4);
  height:var(--topbar);min-height:var(--topbar);background:var(--chrome);
  padding:0 var(--sp-4);padding-top:env(safe-area-inset-top,0px);
  padding-left:max(var(--sp-4),env(safe-area-inset-left,0px));padding-right:max(var(--sp-4),env(safe-area-inset-right,0px))}
.gbrand{flex:none;display:flex;align-items:baseline;gap:6px;
  font:600 15px/1 var(--f-display);font-variation-settings:'wdth' 112;
  letter-spacing:-.012em;color:var(--chrome-fg-strong);white-space:nowrap}
.gbrand small{font:600 9.5px/1 var(--f-body);color:var(--chrome-faint);letter-spacing:.14em;text-transform:uppercase}

.gsearch{position:relative;flex:1 1 360px;max-width:460px;min-width:0;margin:0 auto;display:flex;align-items:center}
.gsearch>svg{position:absolute;left:10px;width:15px;height:15px;color:var(--chrome-faint);pointer-events:none}
.gsearch input{width:100%;height:var(--ctrl);border:1px solid var(--chrome-line);background:#121A21;color:#FFFFFF;
  border-radius:var(--r-2);padding:0 var(--sp-3) 0 32px;font-size:13px}
.gsearch input::placeholder{color:var(--chrome-faint)}
.gsearch input:focus{outline:none;background:#0E161C;border-color:var(--chrome-accent)}
.gres-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--shadow-2);
  max-height:70vh;overflow-y:auto;z-index:31;padding:var(--sp-1) 0}
.gres-empty{padding:var(--sp-3) var(--sp-4);color:var(--muted);font-size:var(--t-md)}
.gres-group-label{padding:var(--sp-2) var(--sp-4) var(--sp-1);font:600 11.5px/1.35 var(--f-body);color:var(--faint)}
.gres-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;background:none;border:0;
  padding:var(--sp-2) var(--sp-4);text-align:left;color:var(--ink)}
.gres-row:hover,.gres-row:focus-visible{background:var(--surface-2)}
.gres-row svg{color:var(--faint);flex:none}
.gres-main{display:flex;flex-direction:column;min-width:0;gap:1px}
.gres-label{font-size:var(--t-md);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gres-sub{font:var(--t-xs);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gright{flex:none;display:flex;align-items:center;gap:var(--sp-1)}
.gwrap{position:relative;display:flex}
.gicon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:var(--ctrl);height:var(--ctrl);
  border:0;border-radius:var(--r-2);background:none;color:var(--chrome-fg)}
.gicon-btn:hover{background:var(--chrome-hover);color:var(--chrome-fg-strong)}
.gbadge{position:absolute;top:3px;right:3px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  background:var(--bad);color:#FFFFFF;font:600 10px/1 var(--f-body);display:flex;align-items:center;justify-content:center}
.gavatar-btn{display:flex;align-items:center;border:0;background:none;border-radius:999px;padding:2px;margin-left:var(--sp-1)}
.gavatar-btn .av{background:var(--chrome-active);color:#FFFFFF}
.gavatar-btn:hover .av{background:var(--chrome-accent);color:var(--chrome)}

.gmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:224px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--shadow-2);
  z-index:31;padding:var(--sp-1) 0;display:flex;flex-direction:column}
.gmenu-wide{min-width:320px;max-width:380px}
.gmenu-head{padding:var(--sp-2) var(--sp-4);font-weight:600;font-size:var(--t-md);color:var(--ink)}
.gmenu-head .muted.sm{font-size:11.5px;font-weight:400}
.gmenu-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;background:none;border:0;
  padding:var(--sp-2) var(--sp-4);text-align:left;color:var(--ink);font-size:var(--t-md)}
.gmenu-item:hover{background:var(--surface-2)}
.gmenu-item svg{color:var(--faint);flex:none}
.gnotif-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;background:none;border:0;
  padding:var(--sp-2) var(--sp-4);text-align:left;color:var(--ink)}
.gnotif-row:hover{background:var(--surface-2)}

@keyframes gflash{0%{background:var(--accent-soft)}100%{background:transparent}}
.flash{animation:gflash 1.4s ease-out}

/* ---------- shell ----------
   The dark ground behind the grid fills the notch left by the rounded top-left
   corner of the content area, so the top bar and the rail read as one frame. */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);flex:1;min-height:0;background:var(--chrome)}
.shell>*{min-width:0}

.rail{background:var(--chrome);display:flex;flex-direction:column;min-height:0;
  padding-left:env(safe-area-inset-left,0px)}
.rail nav{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-2) 0;overflow-y:auto;flex:1;min-height:0}
.rail nav button{display:flex;align-items:center;gap:var(--sp-3);background:none;border:0;border-radius:var(--r-2);
  padding:0 var(--sp-3);height:36px;text-align:left;color:var(--chrome-fg);font-weight:500;font-size:var(--t-md);width:100%}
.rail nav button:hover{background:var(--chrome-hover);color:var(--chrome-fg-strong)}
/* The open page is a solid grey pill with white text — not the teal accent,
   which stays reserved for the few places that mean "this is live/selected
   data" elsewhere in the app (pipeline bars, chart lines). */
.rail nav button[aria-current="page"]{background:#666666;color:var(--chrome-fg-strong);font-weight:600}
.rail nav button svg{opacity:.9}
/* the count sits in its own column so the numbers line up down the rail */
.rail nav .n{margin-left:auto;font:500 11.5px/1 var(--f-body);color:var(--chrome-faint);font-variant-numeric:tabular-nums}
.rail nav button[aria-current="page"] .n{color:var(--chrome-fg-strong)}
.rail .foot{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--chrome-line);display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--t-sm);color:var(--chrome-faint)}
.rail .foot button{background:none;border:0;color:var(--chrome-faint);padding:var(--sp-1);border-radius:var(--r-1);display:flex;margin-left:auto}
.rail .foot button:hover{color:var(--chrome-fg-strong);background:var(--chrome-hover)}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);
  border-top-left-radius:var(--r-corner);
  padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px)}
.top{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;min-height:56px;
  padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line);background:var(--surface);
  border-top-left-radius:var(--r-corner)}
.top .right{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
#top[hidden]{display:none}

/* The "Back" row on a record isn't a separate breadcrumb bar: it sits directly
   on top of the identity card and shares its outline, divided by a hairline. */
.idgroup{display:flex;flex-direction:column;border-radius:var(--r-3)}
.back-link{display:flex;align-items:center;gap:var(--sp-1);align-self:stretch;
  background:var(--surface);border:1px solid var(--line-strong);border-bottom:1px solid var(--line);
  border-radius:var(--r-3) var(--r-3) 0 0;
  color:var(--muted);font-size:var(--t-sm);font-weight:500;padding:var(--sp-2) var(--pad)}
.back-link svg{width:14px;height:14px;flex:none}
.back-link:hover{color:var(--ink);background:var(--surface-2)}
.idgroup .idcard.panel{border-top:0;border-radius:0 0 var(--r-3) var(--r-3)}

.content{flex:1;min-height:0;overflow:auto;padding:var(--sp-5)}
/* Capping the measure is what removes the dead space: without it a task row
   put its due date a thousand pixels away from its title. */
.content>.inner{max-width:var(--page);margin:0 auto;min-width:0}
.content.board-mode{overflow:hidden;display:flex;flex-direction:column;padding-bottom:0}
.content.board-mode>.inner{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none}
.content.board-mode>.inner>div{display:flex;flex-direction:column;flex:1;min-height:0}
.content.wide-mode>.inner{max-width:none}

/* ---------- controls ----------
   Buttons, inputs, selects and the search field are all --ctrl tall with the
   same radius and the same border, so a toolbar lines up on both edges. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--ctrl);
  border:1px solid var(--line-strong);background:var(--surface);padding:0 var(--sp-3);border-radius:var(--r-2);
  font-weight:500;font-size:var(--t-md);white-space:nowrap;color:var(--ink)}
.btn:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.btn:active{background:var(--surface-3)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn .i{width:15px;height:15px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);filter:brightness(1.1)}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);border-color:transparent;color:var(--ink)}
.btn.danger{color:var(--bad);border-color:var(--line-strong)}
.btn.danger:hover{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.btn.sm{height:var(--ctrl-sm);padding:0 var(--sp-2);font-size:var(--t-sm);gap:var(--sp-1)}
.btn.sm .i{width:14px;height:14px}
.btn.icon{padding:0;width:var(--ctrl)}
.btn.sm.icon{width:var(--ctrl-sm)}

.pick{height:var(--ctrl);border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-2);
  padding:0 var(--sp-3);min-width:0;max-width:100%;color:var(--ink);font-size:var(--t-md)}
.pick:hover{border-color:var(--muted)}
.pick:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
select.pick{padding-right:var(--sp-2)}
input.pick::placeholder{color:var(--faint)}
.search{position:relative;display:flex;align-items:center;flex:1 1 220px;max-width:320px;min-width:0}
.search svg{position:absolute;left:10px;width:15px;height:15px;color:var(--faint);pointer-events:none}
.search input{width:100%;height:var(--ctrl);border:1px solid var(--line-strong);background:var(--surface);
  border-radius:var(--r-2);padding:0 var(--sp-3) 0 32px;font-size:var(--t-md)}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.toolbar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4)}

/* One segmented control for the rest of the app: an inset track, the active
   item lifted onto the card surface. .toggle and .ctabs share it; .rtabs (the
   record page's primary tab bar) is a full-width underline bar, styled on its
   own further down. */
/* width:max-content matters: as a block-level flex container the track would
   otherwise stretch across the page and read as a toolbar rather than a switch. */
.toggle,.ctabs{display:flex;gap:2px;align-items:center;align-self:flex-start;
  width:max-content;max-width:100%;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2);padding:2px}
.toggle{height:var(--ctrl);flex:none}
.toggle button,.ctabs button{background:none;border:0;border-radius:var(--r-1);
  height:var(--ctrl-sm);padding:0 var(--sp-3);display:flex;align-items:center;justify-content:center;gap:var(--sp-1);
  color:var(--muted);font-weight:500;font-size:var(--t-sm);white-space:nowrap}
.toggle button:hover,.ctabs button:hover{color:var(--ink)}
/* The lifted item needs its own hairline: white on the inset grey is a 2%
   step, which is not enough to tell a pressed state from an idle one. */
.toggle button[aria-pressed="true"],.ctabs button[aria-pressed="true"]{
  background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:0 0 0 1px var(--line-strong),0 1px 2px rgba(16,28,38,.08)}
.toggle button .i,.ctabs button .i{width:15px;height:15px}

/* ---------- panels ----------
   Every surface in the app is this: white, one hairline, 8px radius, 16px of
   padding. No exceptions and no shadow — that is what makes the screens line
   up with each other. */
.panel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-3);
  padding:var(--pad);min-width:0}
.panel>h2,.panel>h3{margin-bottom:var(--gap)}
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* KPI card: label, figure, one line of context. The figure is 24px — large
   enough to be the first thing read, small enough not to be a billboard. */
.kpi{display:block;text-align:left;width:100%;cursor:pointer;font:inherit}
.kpi:hover{border-color:var(--accent-line)}
.kpi .big{font:600 24px/1.15 var(--f-display);margin:var(--sp-2) 0 var(--sp-1);letter-spacing:-.018em;
  font-variant-numeric:tabular-nums}
.stack{display:flex;height:4px;border-radius:2px;overflow:hidden;background:var(--surface-2);margin-top:var(--gap);gap:1px}
.stack i{display:block;min-width:2px}

/* ---------- dashboard ----------
   Ordered by how soon you have to act. The vertical rhythm is one step:
   --sp-5 between blocks, --gap inside one, and nothing in between. */
.dash{display:flex;flex-direction:column;gap:var(--sp-5)}
.dash-block{display:flex;flex-direction:column;gap:var(--gap)}

/* The figures that open the screen. One panel divided by hairlines, not four
   cards: these are four readings of the same instrument, and four separate
   surfaces would say they were four separate things. */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);padding:0;overflow:hidden}
.stat{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:var(--sp-3) var(--pad);border:0;border-left:1px solid var(--line);
  background:none;font:inherit;cursor:pointer;min-width:0}
.stat:first-child{border-left:0}
.stat:hover{background:var(--surface-2)}
.stat-fig{font:600 20px/1.2 var(--f-display);color:var(--ink);letter-spacing:-.018em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stat-label{font-size:var(--t-sm);color:var(--muted)}
/* The one place a third tone would creep in. It stays --muted and earns its
   quietness from size alone. */
.stat-sub{font-size:11.5px;color:var(--muted)}

.pipe-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.pipe-card{display:flex;flex-direction:column;gap:0}
/* The count leads; the value sits on its baseline rather than under it, so the
   card reads as one figure with its size attached, not as two statistics. */
.pipe-fig{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.pipe-card .big{margin:var(--sp-1) 0 0}
.pipe-val{font-size:var(--t-md);color:var(--muted);font-variant-numeric:tabular-nums}
.pipe-foot{margin-top:var(--sp-2);font-size:var(--t-sm);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The working half of the screen: what is due, beside what has gone quiet.
   Coming up carries longer titles, so it takes the wider column. */
.dash-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gap);align-items:start}
.dash-sec{display:flex;flex-direction:column}
.dash-sec .ov-head{margin-bottom:var(--sp-1)}
.dash-sec .row:first-of-type{border-top:0}
/* An empty section is an instruction, not a mood: it sits where the first row
   would have been, at the same size as one. */
.dash-empty{padding-top:var(--sp-2);font-size:var(--t-md)}
.sec-note{font-size:var(--t-sm);color:var(--muted);white-space:nowrap}
/* Same footprint as a task's checkbox (.check), so a row that can't be ticked
   still starts its title on the same left edge as one that can. */
.lead{width:15px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.lead svg{width:14px;height:14px}

@media (max-width:1000px){
  .dash-cols{grid-template-columns:1fr}
  .statbar{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .statbar{grid-template-columns:1fr}
  .stat{border-left:0}
  .stat+.stat{border-top:1px solid var(--line)}
}

.row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--line);min-width:0}
.row:first-of-type{border-top:0}
.row .sub{font-size:var(--t-sm);color:var(--muted);margin-top:1px}
/* The kind marker that opens an activity row is a column, not a tag: fixing its
   width puts every title below it on the same pixel. */
.row>.chip.plain:first-child{min-width:62px;justify-content:center}
/* A date is only a chip when it carries a status — overdue, due today. A plain
   timestamp is metadata, so it ends the row as text instead of as a pill. */
.row>.chip:last-child:not(.good):not(.warn):not(.bad):not(.plain){
  background:none;padding:0;color:var(--faint);font-size:var(--t-sm)}
.check{width:15px;height:15px;accent-color:var(--accent);flex:none;margin:0}
.done-t{text-decoration:line-through;color:var(--muted)}

/* One chip: same height, same radius, same face everywhere. Variants change
   only the two colours. */
.chip{display:inline-flex;align-items:center;gap:var(--sp-1);background:var(--surface-2);border-radius:var(--r-1);
  height:20px;padding:0 6px;font:500 11.5px/1 var(--f-body);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.chip.plain{background:var(--surface-2);color:var(--muted)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.good{background:var(--good-soft);color:var(--good)}

.av{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font:600 10px/1 var(--f-body);display:flex;align-items:center;justify-content:center;flex:none;letter-spacing:.02em}

.empty{text-align:center;padding:var(--sp-7) var(--sp-4);border:1px dashed var(--line-strong);border-radius:var(--r-3);background:var(--surface)}
.empty h2{font-size:17px;margin-bottom:var(--sp-2)}
.empty p{max-width:58ch;margin:0 auto var(--sp-5);color:var(--muted)}
.empty .btns{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}
.banner{background:var(--warn-soft);border:1px solid var(--warn-soft);border-left:3px solid var(--warn);color:var(--ink);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-2);margin-bottom:var(--sp-4);display:flex;gap:var(--sp-3);
  align-items:center;flex-wrap:wrap;font-size:var(--t-md)}

/* Bar list: label / track / value on a fixed grid so every value right-aligns
   on the same pixel. The track takes the remaining width instead of stopping
   half way across the panel. */
.barlist{max-width:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.bar-row{display:grid;grid-template-columns:minmax(104px,176px) minmax(0,1fr) 128px;gap:var(--sp-3);align-items:center;
  padding:0;font-size:var(--t-md)}
.bar-row>:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row>:last-child{text-align:right;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:560px){.bar-row{grid-template-columns:104px minmax(0,1fr) 96px}}
.bar-row .track,.track{background:var(--surface-2);border-radius:999px;height:6px;overflow:hidden}
.track i{display:block;height:100%;background:var(--accent);border-radius:999px}

/* ---------- board ---------- */
/* --surface-2 used to sit here, but once the page ground itself went to a
   plain grey (--bg), the two landed almost on top of each other — a column
   was only a 3-point difference from the gutter around it. --surface-3 is
   the next step down and reads as its own lane again, with a stronger
   border doing the rest; the deal cards inside stay white, so they still
   lift off the column the way they did before. */
.board{display:flex;gap:var(--gap);align-items:stretch;overflow-x:auto;overflow-y:hidden;flex:1;min-height:0;padding-bottom:var(--sp-3)}
.col{flex:0 0 272px;display:flex;flex-direction:column;background:var(--surface-3);border:1px solid var(--line-strong);
  border-radius:var(--r-3);min-height:0;min-width:0}
.col.over{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
/* Everything in a column starts on one vertical line, 17px in from its outer
   edge: the stage name, every card's text, the add button's label and the
   figures that foot it up. The three paddings below are what hold that line
   (1px column border + 16px here; 1px + 4px list inset + 12px card padding),
   which is also why a card draws its hairline as an inset ring rather than a
   border — a real border would take 1px of layout and push card text one
   pixel past the heading above it. */
.col-h{padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-2);
  border-bottom:1px solid var(--line-strong);min-height:40px}
.col-h h3{font-size:var(--t-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-h .n{font:500 11px/1 var(--f-body);color:var(--muted);background:var(--surface);border-radius:999px;
  padding:3px 6px;font-variant-numeric:tabular-nums}
.col-h .pct{margin-left:auto;font:500 11.5px/1 var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums}
.col-list{flex:1;overflow-y:auto;padding:var(--sp-2) var(--sp-1);display:flex;flex-direction:column;
  gap:var(--sp-2);min-height:48px}
.col-f{padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--line-strong);font:500 11.5px/1 var(--f-body);
  color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);
  font-variant-numeric:tabular-nums}
.col-f .wgt{display:flex;align-items:baseline;gap:4px;min-width:0}
.col-f .wgt-w{font-weight:400;overflow:hidden;text-overflow:ellipsis}
.col.won .col-h h3{color:var(--good)}
.col.lost .col-h h3{color:var(--bad)}

/* White on the column's grey, so the fill does most of the separating and the
   hairline only has to finish the edge. One bold thing per card — the title —
   which is why the amount sits at 500 rather than competing at 600. */
.dcard{background:var(--surface);border:0;border-radius:var(--r-3);padding:var(--sp-3);
  box-shadow:inset 0 0 0 1px var(--line);
  cursor:pointer;min-width:0;text-align:left;width:100%;display:flex;flex-direction:column;
  gap:var(--sp-2);font:inherit}
.dcard:hover{box-shadow:inset 0 0 0 1px var(--accent-line)}
.dcard:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--accent),0 0 0 2px var(--accent-soft)}
.dcard.dragging{opacity:.4}
/* Two lines, then it clips: one long title must not make its card twice the
   height of the ones around it, or the column stops reading as a column. */
.dcard .t{font-weight:600;font-size:var(--t-md);line-height:1.35;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcard-row{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.dcard-row.foot{padding-top:var(--sp-2);border-top:1px solid var(--line)}
.dcard-row>.chip{flex:none}
.dcard .amt{font:500 var(--t-md) var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums;
  margin-right:auto;white-space:nowrap}
/* A deal with no figure and no contact yet still holds its row, so the cards
   around it keep their shape — it just says plainly what is missing. */
.dcard .amt.none,.dcard .who.none{font-weight:400;color:var(--muted)}
.dcard .who{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--t-sm);color:var(--muted);
  min-width:0;margin-right:auto}
.dcard .prog{min-width:0}
.dcard .clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dcard .av{width:20px;height:20px;font-size:9px}

/* Adding a deal is an everyday action, not a call to action: it reads as a
   quiet line at the foot of the column and only takes a surface on hover. */
.addcard{border:0;border-radius:var(--r-2);background:none;color:var(--muted);
  height:var(--ctrl-sm);font-size:var(--t-sm);width:100%;display:flex;align-items:center;
  justify-content:flex-start;padding:0 var(--sp-3);gap:var(--sp-1)}
.addcard:hover{color:var(--ink);background:var(--surface)}
/* The segments already separate themselves with "·", and bare text nodes in
   here become flex items — a wide gap would split "3" from "deals". */
.bottombar{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;padding:var(--sp-3) 0;
  border-top:1px solid var(--line);background:var(--bg);font-size:var(--t-md);color:var(--muted);
  font-variant-numeric:tabular-nums}
.bottombar .right{margin-left:auto;display:flex;gap:var(--sp-2)}

/* ---------- tables ----------
   Headers are sentence case: a column header is a label, and small capitals
   with tracking shout over the data underneath them. */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-3)}
.tablewrap.narrow{max-width:none}
table{border-collapse:collapse;width:100%;min-width:700px}
table.narrow{min-width:420px}
th{text-align:left;padding:var(--sp-2) var(--sp-3);font:600 12px/1.35 var(--f-body);
  color:var(--muted);border-bottom:1px solid var(--line-strong);white-space:nowrap;background:var(--surface)}
td{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line);vertical-align:middle;font-size:var(--t-md)}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tr.tr-forecast{background:var(--surface-2)}
tr.tr-forecast td{color:var(--muted)}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
.cellmain{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.cellmain strong{font-weight:600}
.cellmain .sub{font-size:11.5px;color:var(--muted);line-height:1.3;margin-top:1px}

/* A table placed inside a panel drops its own frame — otherwise the panel
   border and the table border sit 16px apart and read as two boxes. */
.panel>.tablewrap,.panel .tablewrap{border:0;border-radius:0;background:none;overflow-x:auto;
  /* !important overrides per-table inline width caps that predate this system
     and left a report table stopping two thirds of the way across its panel */
  max-width:none!important}
.panel>.tablewrap th,.panel .tablewrap th{background:none}

/* Compact density for the Contacts / Deals lists. */
.tablewrap.compact th{padding:var(--sp-2) var(--sp-3);font-size:11.5px}
.tablewrap.compact td{padding:6px var(--sp-3);font-size:var(--t-md);line-height:1.35}
.tablewrap.compact .av{width:24px;height:24px;font-size:9px}
.listcount{margin-top:var(--sp-2);font-size:var(--t-sm);color:var(--muted)}
.strike{text-decoration:line-through;opacity:.6}

/* ---------- finance ----------
   The P&L page uses the same cards as everything else. The figure carries the
   colour; the card does not get a coloured edge, a tinted ground or a second
   kind of badge. */
.fin-sub{color:var(--muted);font-size:var(--t-md);margin:calc(var(--sp-1) * -1) 0 var(--sp-4)}
.fin-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.fin-label{font:var(--t-label);color:var(--muted)}
.fin-figure{font-family:var(--f-display);letter-spacing:-.018em;font-variant-numeric:tabular-nums}
.fin-accent-left{border-left:0}
.fin-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--muted);
  border-radius:var(--r-1);height:20px;padding:0 7px;font:500 11.5px/1 var(--f-body);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fin-chip .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.fin-chip.pos{color:var(--fin-pos)}
.fin-chip.neg{color:var(--fin-neg)}
.fin-chip.warn{color:var(--fin-warn)}
.fin-sum-card{min-width:0}

/* ---------- the Finance ledger ----------
   Section › category › item, all on one grid. Every row — head, section,
   category, leaf — uses the same five columns, which is what keeps the
   amounts and statuses in a straight line however deep a row sits. Depth is
   carried by the indent, the label's weight and a hairline rail under the
   parent's caret; the type size never changes between levels. */
.ledger{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-3);overflow:hidden}
.lhead,.lrow{display:grid;grid-template-columns:minmax(0,1fr) 56px 140px 132px 112px;
  align-items:center;gap:var(--sp-3);
  padding-left:calc(var(--pad) + var(--d,0) * var(--ledger-indent));padding-right:var(--pad)}
.lhead{height:36px;border-bottom:1px solid var(--line-strong);
  font:600 12px/1.35 var(--f-body);color:var(--muted)}
.lhead>:nth-child(3){text-align:right}

.lrow{position:relative;min-height:var(--ledger-row);border-top:1px solid var(--line);
  font-size:var(--t-md);color:var(--ink);text-align:left}
.lrow:first-of-type{border-top:0}
.lrow[role="button"]{cursor:pointer}
.lrow:hover{background:var(--surface-2)}
.lrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0}

/* The rails tie a child to its parent: one at the parent's caret, and for a
   leaf a second one at the grandparent's. */
.lrow.lcat::before,.lrow.litem::before,.lrow.litem::after{content:"";position:absolute;top:0;bottom:0;
  width:1px;background:var(--line);pointer-events:none}
.lrow.lcat::before,.lrow.litem::after{left:calc(var(--pad) + 8px)}
.lrow.litem::before{left:calc(var(--pad) + var(--ledger-indent) + 8px)}

/* Level 1: a tinted band, so the three sections are findable at a glance. */
.lrow.lsection{background:var(--surface-2);min-height:36px;font-weight:600}
.lrow.lsection:hover{background:var(--surface-3)}
/* Depth is weight, not a different ink — section, category and item all sit
   on the same near-black; only 600/500/400 tells them apart. */
.lrow.lsection .ltext{font-weight:600;color:var(--ink)}
.lrow.lcat .ltext{font-weight:500;color:var(--ink)}
.lrow.litem .ltext{font-weight:400;color:var(--ink)}
.lrow.litem a.ltext{color:var(--accent)}
.lrow.lempty:hover{background:none}

.lname{min-width:0}
.lname-in{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.lcaret{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;color:var(--faint)}
.lcaret .i{width:13px;height:13px;transform:rotate(-90deg);transition:transform .12s ease}
.lcaret.open .i{transform:none}
.ltext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the cycle or the date, riding along with the name rather than taking a column */
.lsub{color:var(--faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.lmark{display:flex;color:var(--warn);flex:none}
.lmark .i{width:12px;height:12px}

.lcount{text-align:right;color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.lamount{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.lrow.lsection .lamount{font-weight:600}
.lrow.lcat .lamount{font-weight:500}
.lstatus{display:flex;align-items:center;justify-content:flex-start;min-width:0}
/* A group's qualifier ("per month", "+ RON 220 scheduled") rides in the status
   column, which is empty on group rows. Keeping it out of the amount cell is
   what lets every figure on the page share one right edge. */
.lnote{color:var(--faint);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Actions keep their column reserved at every depth — that is what holds the
   alignment — and only appear for the row under the pointer. */
.lactions{display:flex;justify-content:flex-end;gap:2px;opacity:0;transition:opacity .12s ease}
.lrow:hover .lactions,.lrow:focus-within .lactions{opacity:1}
.lrow.lsection .lactions{opacity:1}
@media (hover:none){.lactions{opacity:1}}
.lactions .btn.sm{height:var(--ctrl-xs);padding:0 var(--sp-2);font-size:11.5px}
.linline{display:flex;gap:2px}

@media (max-width:900px){
  .lhead,.lrow{grid-template-columns:minmax(0,1fr) 112px 96px;gap:var(--sp-2)}
  .lhead>:nth-child(2),.lcount,.lstatus{display:none}
  .lhead>:nth-child(3){grid-column:2}
  .lhead>:nth-child(4){display:none}
  .lactions{opacity:1}
}
.fin .panel>h3{margin-bottom:var(--sp-2)}
.fin .grid{gap:var(--gap)}
.fin .fin-head{margin-bottom:0}
.fin .ctabs{margin-bottom:var(--sp-2)}
.fin .row{padding:var(--sp-2) 0}
.fin .acard{padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2)}
.fin .barlist{gap:var(--sp-2)}
.fin .bar-row{padding:0}

/* ---------- record ----------
   Properties on the left, the thread in the middle, associations on the right.
   The two sides are equal and carry real content — a deal's fields and its
   associated records are read, not glanced at — so the thread gives up some
   width to them rather than running to half the monitor. All three columns are
   made of the same panels. */
.rec{display:grid;grid-template-columns:var(--rec-side) minmax(0,1fr) var(--rec-side);
  gap:var(--sp-4);align-items:start;max-width:var(--page);margin:0 auto}
.rec-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.idcard.panel,.sheet.panel{padding:var(--pad)}
.idrow{display:flex;gap:var(--sp-3);align-items:center;min-width:0}
.idrow h2{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.av.big{width:36px;height:36px;font-size:12px}

/* The record's facts, as a readout rather than a form: the labels take a column
   of their own so every value starts on the same line. HubSpot runs these
   inline ("Amount: RON 2,940"), which leaves each value beginning wherever its
   label happened to end; a column is quicker to read down and agrees with the
   single left edge the rest of this page is built on. The card below uses the
   opposite arrangement — label above the field — because that one is typed in,
   and the two should not look like the same thing twice. */
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-4);
  align-items:baseline;margin:var(--sp-3) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--line)}
.facts dt{font-size:var(--t-sm);color:var(--muted);white-space:nowrap}
.facts dd{margin:0;font-size:var(--t-md);color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A closed deal says so in the same two colours the board uses for its columns. */
.facts dd.good{color:var(--good)}
.facts dd.bad{color:var(--bad)}
.contactlines{margin-top:var(--sp-3);display:flex;flex-direction:column;
  border-top:1px solid var(--line);padding-top:var(--sp-2)}
.cl{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--t-md);min-width:0;min-height:26px}
.cl .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent)}
.cl .copybtn{opacity:0;transition:opacity .12s ease}
.cl:hover .copybtn,.cl:focus-within .copybtn{opacity:1}
@media (hover:none){.cl .copybtn{opacity:1}}
.copybtn .i{width:14px;height:14px}

.sheet{display:flex;flex-direction:column}
.sheet-section{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.sheet-section:first-child{margin-top:0;padding-top:0;border-top:0}
.sheet-section>h3{margin-bottom:var(--sp-2)}
.idcard .idrow{margin-bottom:0}

/* Label / value pairs. The hierarchy comes from colour and weight, not from a
   big jump in size, so the column stays dense and still scans. */
.props{display:flex;flex-direction:column}
.prop{display:grid;gap:0;padding:var(--sp-1) 0 0}
.prop .label{padding-left:var(--sp-2);font:var(--t-label);color:var(--muted)}
.props .pin{height:26px;font-size:var(--t-md);font-weight:500}
td select.pin{min-width:110px}
.pin{height:28px;border:1px solid transparent;background:none;border-radius:var(--r-1);padding:0 var(--sp-2);
  width:100%;min-width:0;font-size:var(--t-md);color:var(--ink)}
.pin::placeholder{color:var(--faint)}
.pin:hover{border-color:var(--line-strong);background:var(--surface)}
.pin:focus{border-color:var(--accent);background:var(--surface);outline:none;box-shadow:0 0 0 2px var(--accent-soft)}
.pin.good{color:var(--good)}
.pin.warn{color:var(--warn)}
.pin.bad{color:var(--bad)}
/* A value nothing can change still reads as one more row of the same card — same
   slot, same metrics — just without the hover/focus cues that invite editing. */
.pin.static{display:flex;align-items:center;color:var(--muted);cursor:default}
.pin.static:hover{border-color:transparent;background:none}
/* Stripping the native select chrome (appearance:none) is what actually fixes the
   misalignment: the OS's own select box has a text inset baked in on top of our
   padding, a few px past where an <input>'s text starts, so "Recrutare lectori"
   sat to the right of "Matematica" above it even though both share the same
   padding-left. Removing it also removes the OS arrow, so this draws its own. */
.selectwrap{position:relative;display:flex}
.selectwrap select.pin{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:26px}
.selectwrap .select-chevron{position:absolute;right:var(--sp-2);top:0;height:100%;display:flex;align-items:center;color:var(--muted);pointer-events:none}
.selectwrap .select-chevron svg{width:14px;height:14px}
.meta-foot{font-size:var(--t-sm);color:var(--faint)}

/* The record tab bar spans the full width of the middle column: three equal
   cells, each its own bordered rectangle sharing an edge with its neighbour —
   a strip of tiles, not an underline bar — with the active one lifted onto
   the page's white surface and the rest left on the grey of the inactive
   track. Nothing sits flush underneath it (the content below is plain
   sections, not one connected panel), so all four corners stay rounded. */
.rtabs{display:grid;grid-template-columns:repeat(3,1fr);align-self:stretch;
  width:100%;max-width:none;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-3);
  padding:0;overflow:hidden;margin-bottom:var(--gap)}
.rtabs button{background:var(--surface-2);border:0;border-right:1px solid var(--line-strong);border-radius:0;
  height:44px;padding:0 var(--sp-2);margin:0;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-1);
  color:var(--muted);font-weight:500;font-size:var(--t-md);white-space:nowrap}
.rtabs button:last-child{border-right:0}
.rtabs button:hover{color:var(--ink)}
.rtabs button[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--surface)}
.rtabs button:disabled{color:var(--faint);cursor:default}
.rtabs button:disabled:hover{color:var(--faint)}

/* Overview pane: sections sit directly on the page ground, not inside their
   own white panel — the cards already carry a white surface each, so a
   panel around them too just meant white-on-white with a border for no
   reason. The gray page is the background; the cards are what floats. */
.overview{display:flex;flex-direction:column;gap:var(--sp-5)}
.ov-sec{display:flex;flex-direction:column;gap:var(--sp-2)}
.ov-head{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:0}
.ov-head h3{flex:1;min-width:0}

/* Activity thread: the tab strip and the tool bar beneath it form one panel
   head, and the cards below are flat and close together. */
.rec-col.mid{gap:0}
/* overflow-x alone leaves the y-axis at its spec-mandated "auto" (an unset axis next
   to a non-visible one can't stay visible), and this row sits a hair taller than its
   box, so a vertical scrollbar would otherwise appear on its own and nudge the row
   out of line. overflow-y:hidden keeps scrolling to the x-axis only; both bars are
   hidden outright since the row scrolls by wheel/touch/arrow-key without needing one. */
.tabs{display:flex;gap:var(--sp-4);overflow-x:auto;overflow-y:hidden;border:1px solid var(--line-strong);border-bottom:0;
  background:var(--surface);border-radius:var(--r-3) var(--r-3) 0 0;padding:0 var(--pad);
  scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;height:40px;padding:0;margin-bottom:-1px;
  color:var(--muted);font-weight:500;font-size:var(--t-md);white-space:nowrap;display:flex;align-items:center;gap:5px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.tabs .n{font:500 11.5px/1 var(--f-body);color:var(--faint);font-variant-numeric:tabular-nums}
.tabs button[aria-current="page"] .n{color:var(--muted)}
.ctabs{margin-bottom:var(--gap);flex-wrap:nowrap;overflow-x:auto;max-width:100%}

.tabbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-strong);border-top:0;
  border-radius:0 0 var(--r-3) var(--r-3);padding:var(--sp-3) var(--pad);margin-bottom:var(--gap)}
.tb-search{position:relative;display:flex;align-items:center;flex:0 1 260px;min-width:0}
.tb-search .i{position:absolute;left:9px;width:14px;height:14px;color:var(--faint);pointer-events:none}
.tb-search input{width:100%;padding:0 var(--sp-2) 0 29px;height:var(--ctrl-sm);font-size:var(--t-md);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-2);color:var(--ink)}
.tb-search input::placeholder{color:var(--faint)}
.tb-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.tabbar .ctabs{margin:0;flex:0 0 auto}
.tabbar>.btn{margin-left:auto}

.tempty{text-align:center;padding:var(--sp-6) var(--sp-4);display:flex;flex-direction:column;
  align-items:center;gap:var(--sp-2);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-3)}
.te-title{font-weight:600;color:var(--ink)}
.te-hint{font-size:var(--t-md);color:var(--muted);max-width:42ch}
.te-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-1)}

/* ---------- compose window ---------- */
#compose-host{position:fixed;inset:auto var(--sp-5) 0 auto;z-index:60;display:flex;justify-content:flex-end;pointer-events:none}
/* Sized for the signature at its preview zoom (see PREVIEW_ZOOM in core.js): a
   pasted signature's own table runs to about 400px at full size, which is ~320px
   once the preview shrinks it, so the window only needs to clear that by a
   working margin — wider than this just left empty space either side of it. */
.cw{pointer-events:auto;width:460px;max-width:calc(100vw - var(--sp-5)*2);background:var(--surface);
  border:1px solid var(--line-strong);border-bottom:0;border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;max-height:calc(100vh - var(--sp-6));overflow:hidden}
.cw-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  background:var(--cw-head-bg);color:var(--cw-head-fg);border-radius:var(--r-3) var(--r-3) 0 0;
  font:500 var(--t-md) var(--f-body);min-height:40px}
.cw.min .cw-head{border-radius:var(--r-3) var(--r-3) 0 0}
.cw-ico{display:flex;opacity:.85}
.cw-ico .i{width:15px;height:15px}
.cw-btn{width:var(--ctrl-xs);height:var(--ctrl-xs);border-radius:var(--r-1);border:0;background:transparent;color:var(--cw-head-fg);
  opacity:.75;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cw-btn:hover{opacity:1;background:var(--cw-head-hover)}
.cw-body{padding:var(--pad);display:flex;flex-direction:column;gap:var(--sp-2);overflow-y:auto}
.cw-row{display:flex;align-items:center;gap:var(--sp-3);border-bottom:1px solid var(--line);padding-bottom:var(--sp-2)}
.cw-label{font:var(--t-label);color:var(--faint)}
.cw-row>.cw-label{flex:0 0 56px}
.cw-row .cw-input{flex:1;border:0;height:var(--ctrl-sm);padding:0;background:transparent;font:var(--t-md);min-width:0;color:var(--ink)}
.cw-row .cw-input:focus{outline:none}
.cw-to{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
.cw-pair{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.cw-small{flex:1 1 140px;display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.cw-small .cw-input{height:var(--ctrl);border:1px solid var(--line-strong);background:var(--bg);
  border-radius:var(--r-2);padding:0 var(--sp-2);font:var(--t-md);width:100%}
.cw-text{width:100%;border:1px solid var(--line-strong);background:var(--bg);border-radius:var(--r-2);
  padding:var(--sp-2) var(--sp-3);resize:vertical;min-height:120px;font:var(--t-lg);color:var(--ink)}
.cw-text:focus,.cw-small .cw-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cw-text::placeholder,.cw-input::placeholder,.cw-editor-input::placeholder{color:var(--faint)}
.cw-foot{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding-top:var(--sp-1)}
.cw-foot .hint{font-size:var(--t-sm);color:var(--faint);flex:1 1 180px}
.cw-foot .btn:disabled{opacity:.5;cursor:default}
.cw-link{margin-left:auto;background:none;border:0;color:var(--accent);font-size:var(--t-sm);font-weight:500;padding:0}
.cw-link:hover{text-decoration:underline}
.cw-check{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--t-md);cursor:pointer;padding:2px 0}
/* One message canvas. What you type and the signature under it share the same
   ground and the same left edge; only the space between them says where your
   words stop, the way they're set apart in a mail client. A rule across the
   middle would make the signature look like a separate attached thing. */
.cw-editor{width:100%;border:1px solid var(--line-strong);background:var(--bg);border-radius:var(--r-2);overflow:hidden}
.cw-editor:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cw-editor-input{display:block;width:100%;border:0;border-radius:0;background:transparent;
  resize:vertical;min-height:90px;padding:var(--sp-2) var(--sp-3);font:var(--t-lg);color:var(--ink)}
.cw-editor-input:focus{outline:none}
.cw-sig{margin:var(--sp-2) 0 var(--sp-3);background:var(--email-sheet)}
.cw-error{background:var(--bad-soft);color:var(--bad);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3);font-size:var(--t-md)}

/* ---------- activity thread ----------
   Each entry is a card: a soft shadow lifts it a hair off the page, on top
   of the hairline border that does the structural work. Padding is tight
   enough that a screen of cards doesn't turn into a screen of white space —
   the border and shadow already separate them, the gap doesn't have to. */
.timeline{display:flex;flex-direction:column;gap:var(--sp-2)}
.tgroup{font:600 11.5px/1.35 var(--f-body);color:var(--faint);margin:var(--sp-3) 0 var(--sp-1);padding-left:2px}
.tgroup:first-child{margin-top:0}
.titem{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-3);padding:var(--sp-3);min-width:0;
  box-shadow:0 1px 2px rgba(16,28,38,.04),0 1px 6px rgba(16,28,38,.05)}
.thead{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-1)}
.thead time{font:var(--t-xs);color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
/* The whole header is the click target that expands the card — a wider
   hit area than just the chevron, with its own hover so it reads as one. */
.thead.istoggle{cursor:pointer;margin:calc(-1*var(--sp-1)) calc(-1*var(--sp-1)) var(--sp-1);
  padding:var(--sp-1);border-radius:var(--r-2)}
.thead.istoggle:hover{background:var(--surface-2)}
.thead.istoggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tcaret{display:flex;align-items:center;justify-content:center;width:14px;height:14px;flex:none;color:var(--faint)}
.tcaret .i{width:12px;height:12px;transform:rotate(-90deg);transition:transform .12s ease}
.tcaret.open .i{transform:none}
.ticon{display:flex;color:var(--muted);flex:none}
.ticon .i{width:14px;height:14px}
/* The kind is the card's headline — bold and the same ink as the content
   below it, not a label — so "Email"/"Call"/"Note" reads as a title, with
   only the timestamp and the detail lines a step quieter. */
.tkind{font:600 12.5px/1.35 var(--f-body);color:var(--ink)}
.tctx{font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%}
.tsubject{font-weight:600;font-size:var(--t-md);line-height:1.4;margin-bottom:var(--sp-1);overflow-wrap:anywhere}
.tmeta{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-bottom:var(--sp-1)}
.tbody{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--t-lg);color:var(--ink);max-width:72ch}
/* An opened email shows the message that was actually sent, signature included,
   on the card's own ground — the same treatment as the composer. */
.emailhtml{background:var(--email-sheet);border-radius:var(--r-2);max-width:72ch}
/* The collapsed preview: one line, cut off rather than wrapped — the full
   text is one click away, so this is a taste of it, not a summary of it. */
.tprev{font-size:var(--t-md);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:72ch}
.titem .trow{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.titem .trow .grow{font-size:var(--t-md)}
.titem>:last-child{margin-bottom:0}
/* The auto margin sits on this wrapper, not on the actions button — the
   wrapper is always rendered, so the date stays the last, rightmost thing
   in the row whether or not the actions menu is showing (a conditionally-
   rendered child can't be relied on to carry it). On an openable card the
   actions button only renders once the card is open (see actHead), so a
   closed row shows only the date. */
.thead-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-1);flex:none}
.tactions{position:relative;display:inline-flex}
.tactions-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  color:var(--faint);background:none;border:0;border-radius:var(--r-1);flex:none;padding:0}
.tactions-btn:hover,.tactions-btn[aria-expanded="true"]{color:var(--ink);background:var(--surface-2)}
.tactions-menu{min-width:160px}
.gmenu-item.danger:hover{color:var(--bad)}
.gmenu-item.danger:hover svg{color:var(--bad)}

/* Automatic changes are rows against a rule, not cards — they shouldn't carry
   the same weight as something a person wrote. */
.sysrun{display:flex;flex-direction:column;gap:2px;margin:var(--sp-1) 0}
.sysline{display:flex;align-items:center;gap:var(--sp-2);padding:3px var(--sp-3);font-size:var(--t-sm);
  color:var(--muted);border-left:2px solid var(--line-strong);margin-left:var(--sp-1);min-width:0}
.sysline .dotm{width:4px;height:4px;border-radius:50%;background:var(--line-strong);flex:none}
.sysline .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sysline time{margin-left:auto;font:var(--t-xs);color:var(--faint);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.sysmore{align-self:flex-start;margin-left:var(--sp-5);margin-top:2px;background:none;border:0;color:var(--muted);
  font-size:var(--t-sm);padding:2px 0;text-decoration:underline}
.sysmore:hover{color:var(--ink)}

/* ---------- associations ----------
   A collapsed panel stays at the height of its head; an open one grows by
   exactly the rows inside it. */
.assoc{padding:var(--sp-3) var(--pad)}
.assoc .ahead{display:flex;align-items:center;gap:var(--sp-2);min-height:26px}
.assoc.collapsed .ahead{margin-bottom:0}
.assoc:not(.collapsed) .ahead{margin-bottom:var(--sp-2)}
.assoc .ahead h3{margin:0;flex:1;min-width:0}
.assoc .ahead .btn.sm{height:var(--ctrl-xs);font-size:11.5px;padding:0 var(--sp-2)}
.achev{background:none;border:0;color:var(--muted);display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:var(--r-1);flex:none;padding:0;margin-left:-4px}
.achev:hover{background:var(--surface-2);color:var(--ink)}
.achev .i{width:14px;height:14px;transition:transform .12s ease}
.assoc.collapsed .achev .i{transform:rotate(-90deg)}
.abody{display:flex;flex-direction:column;gap:var(--sp-2)}
.acard{border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3);min-width:0}
.acard>a{font-weight:600;font-size:var(--t-md);overflow-wrap:anywhere;display:block;margin-bottom:var(--sp-1)}
.arow{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-3);
  padding:1px 0;font-size:var(--t-sm);min-width:0;min-height:22px}
.arow>:last-child{justify-self:end;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.arow .label{font:500 11.5px/1.35 var(--f-body);color:var(--faint)}
.arow.full{grid-template-columns:minmax(0,1fr) auto}
.arow.full>:last-child{justify-self:end}
.arow select.pin{height:22px;font-size:var(--t-sm);text-align:right;text-align-last:right;max-width:100%;padding-right:0}
.assoc .row{padding:var(--sp-2) 0}
.assoc p.muted{font-size:var(--t-sm);line-height:1.5;margin:0}

/* ---------- settings: pipeline & stage rows ---------- */
/* Settings keeps a measure: a text input stretched to 1500px is harder to use,
   not easier. These are the only screens that stay narrower than the window. */
.setwrap{max-width:900px}
.pipehead{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.pipehead input{flex:1 1 auto;max-width:320px;height:var(--ctrl);border:1px solid var(--line-strong);
  background:var(--bg);border-radius:var(--r-2);padding:0 var(--sp-3);font-weight:600;min-width:0;color:var(--ink)}
.pipehead .chip{margin-left:auto;flex:none}
.stagerow{display:grid;grid-template-columns:18px minmax(0,1fr) 84px 136px var(--ctrl-sm);gap:var(--sp-2);
  align-items:center;padding:2px 0}
.stagerow input,.stagerow select,.catrow input{height:var(--ctrl);border:1px solid var(--line-strong);background:var(--bg);
  border-radius:var(--r-2);padding:0 var(--sp-2);min-width:0;width:100%;font-size:var(--t-md);color:var(--ink)}
.stagerow input:focus,.stagerow select:focus,.catrow input:focus,.pipehead input:focus,.newpipe input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.stagerow .del,.catrow .del{height:var(--ctrl-sm);width:var(--ctrl-sm);border:1px solid transparent;background:none;
  border-radius:var(--r-1);color:var(--faint);display:flex;align-items:center;justify-content:center;font-size:15px;padding:0}
.stagerow .del:hover:not(:disabled),.catrow .del:hover:not(:disabled){color:var(--bad);border-color:var(--line-strong)}
.stagerow .del:disabled,.catrow .del:disabled{opacity:.3;cursor:not-allowed}
.stagerow .grip,.catrow .grip{cursor:grab;color:var(--faint);font-size:13px;text-align:center;user-select:none;line-height:var(--ctrl)}
.stagerow .grip:active,.catrow .grip:active{cursor:grabbing}
.stagehead{display:grid;grid-template-columns:18px minmax(0,1fr) 84px 136px var(--ctrl-sm);gap:var(--sp-2);
  margin-bottom:var(--sp-1)}
.newpipe{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.newpipe input{flex:1 1 220px;max-width:320px;height:var(--ctrl);border:1px solid var(--line-strong);
  background:var(--surface);border-radius:var(--r-2);padding:0 var(--sp-3);min-width:0;color:var(--ink)}
@media (max-width:560px){
  .stagerow,.stagehead{grid-template-columns:16px minmax(0,1fr) 64px 110px var(--ctrl-sm)}
}

/* ---------- settings: expense categories ---------- */
.catrow{display:grid;grid-template-columns:18px minmax(0,1fr) 92px var(--ctrl-sm);gap:var(--sp-2);
  align-items:center;padding:2px 0}
.cathead{display:grid;grid-template-columns:18px minmax(0,1fr) 92px var(--ctrl-sm);gap:var(--sp-2);margin-bottom:var(--sp-1)}
@media (max-width:560px){
  .catrow,.cathead{grid-template-columns:16px minmax(0,1fr) 74px var(--ctrl-sm)}
}

/* ---------- settings: the screen itself ---------- */
.set2col{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp-5);align-items:start}
.setnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.setnav button{text-align:left;height:36px;padding:0 var(--sp-3);border:0;border-radius:var(--r-2);
  background:none;color:var(--muted);font-weight:500;font-size:var(--t-md)}
.setnav button:hover{background:var(--surface-2);color:var(--ink)}
.setnav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.setbody{display:flex;flex-direction:column;gap:var(--gap);min-width:0;max-width:780px}
.setcard{display:flex;flex-direction:column}
.setfoot{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap}
.setmsg{font-size:var(--t-md)}
.setmsg.good{color:var(--good)}
.setmsg.bad{color:var(--bad)}
.togrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;
  border-top:1px solid var(--line);cursor:pointer}
.togrow:first-of-type{border-top:0}
.switch{appearance:none;width:34px;height:20px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-strong);
  position:relative;flex:none;cursor:pointer;transition:background .12s ease}
.switch::after{content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:var(--surface);
  box-shadow:0 1px 2px rgba(16,28,38,.25);transition:transform .12s ease}
.switch:checked{background:var(--accent);border-color:var(--accent)}
.switch:checked::after{transform:translateX(14px);background:var(--accent-ink)}
.avrow{display:flex;align-items:center;gap:var(--sp-3)}
.avpick{width:64px;height:64px;flex:none;border-radius:var(--r-3);object-fit:cover;background:var(--surface-2);border:1px solid var(--line-strong)}
.avpick.round{border-radius:50%}
/* The placeholder also carries the global .empty class, whose 48px of vertical
   padding overflows the 64px box and stretched the circle into an ellipse.
   Resetting padding and border here outranks that rule on specificity. */
.avpick.empty{display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:18px;
  padding:0;border:1px solid var(--line-strong);text-align:center}
/* The HTML source is monospace, like any code field, so tags are easy to scan. */
.sigsrc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;min-height:160px}
/* Here, unlike in the composer, the preview keeps a white page in both themes:
   this one answers "how will it land in someone's inbox", so it should look like
   the inbox rather than like the panel around it. */
.sigpreview-frame{border:1px solid var(--line-strong);border-radius:var(--r-2);overflow-x:auto;background:#FFFFFF}
@media (max-width:760px){
  .set2col{grid-template-columns:1fr}
  .setnav{position:static;flex-direction:row;flex-wrap:wrap}
}

/* ---------- login ---------- */
#login-screen{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5)}
.login-card{width:100%;max-width:320px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-3);
  padding:var(--sp-6) var(--sp-5);box-shadow:var(--shadow-2);text-align:left}
.login-card .brand{font:600 17px/1 var(--f-display);letter-spacing:-.012em}
.login-card .brand small{font:600 9.5px/1 var(--f-body);color:var(--faint);letter-spacing:.14em;text-transform:uppercase;margin-left:6px}
.login-card input{width:100%;height:var(--ctrl);border:1px solid var(--line-strong);background:var(--bg);
  border-radius:var(--r-2);padding:0 var(--sp-3);color:var(--ink)}
.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.login-card .btn{width:100%}

/* ---------- create drawer ---------- */
#veil{position:fixed;inset:0;background:rgba(16,28,38,.45);z-index:32}
#drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surface);z-index:33;
  box-shadow:var(--shadow-2);overflow-y:auto;
  padding:calc(var(--sp-5) + env(safe-area-inset-top,0px)) calc(var(--sp-5) + env(safe-area-inset-right,0px))
          calc(var(--sp-6) + env(safe-area-inset-bottom,0px)) var(--sp-5)}
.dh{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-5)}
.dh h2{font-size:17px;margin-top:2px}
.fields{display:grid;gap:var(--sp-3);grid-template-columns:1fr 1fr}
.fld{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.fld.full{grid-column:1/-1}
.fld>.label,.fld>label{font:var(--t-label);color:var(--muted)}
.fld input,.fld select{height:var(--ctrl);border:1px solid var(--line-strong);background:var(--bg);
  border-radius:var(--r-2);padding:0 var(--sp-3);width:100%;min-width:0;font-size:var(--t-md);color:var(--ink)}
.fld textarea{border:1px solid var(--line-strong);background:var(--bg);border-radius:var(--r-2);
  padding:var(--sp-2) var(--sp-3);width:100%;resize:vertical;min-height:72px;font:var(--t-md);color:var(--ink)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.sec{margin-top:var(--sp-5)}
.sec h3{margin-bottom:var(--sp-2)}
.inline{display:flex;gap:var(--sp-2);min-width:0;flex-wrap:wrap;align-items:center}
.inline input,.inline select{height:var(--ctrl);border:1px solid var(--line-strong);background:var(--bg);
  border-radius:var(--r-2);padding:0 var(--sp-3);min-width:0;font-size:var(--t-md);color:var(--ink)}
.inline input[type=text]{flex:1 1 160px}
.inline input:focus,.inline select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sp-5) + env(safe-area-inset-bottom,0px));
  background:var(--chrome);color:#FFFFFF;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-2);z-index:40;
  font-size:var(--t-md);max-width:calc(100% - 32px);box-shadow:var(--shadow-2)}

/* ---------- small screens ---------- */
/* Raised from 1460 when the sides went to --rec-side: two columns of 380 leave
   the thread under 450px on a 1500px screen, narrower than the compose window it
   mirrors. Below this the right column drops under the thread instead of
   squeezing it, and the properties column gives back a little width, since it is
   then sharing the row with the thread alone. */
@media (max-width:1580px){
  .rec{grid-template-columns:340px minmax(0,1fr);gap:var(--sp-4)}
  .rec-col:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:var(--gap);align-items:start}
}
@media (max-width:900px){
  body{overflow:auto}
  .gtop{gap:var(--sp-2);padding:0 var(--sp-3);padding-top:env(safe-area-inset-top,0px)}
  .gbrand small{display:none}
  .gsearch{flex:1 1 auto;max-width:none}
  .shell{grid-template-columns:1fr;height:auto;background:none}
  .rail{border-bottom:1px solid var(--chrome-line);position:sticky;top:var(--topbar);z-index:10}
  .rail nav{flex-direction:row;overflow-x:auto;padding:var(--sp-2);min-width:0;flex:none;gap:var(--sp-1)}
  .rail nav button{width:auto;white-space:nowrap}
  .rail nav .n{margin-left:var(--sp-1)}
  .rail .foot{display:none}
  /* the cut corner belongs to the desktop arrangement only */
  .main{padding-right:0;border-top-left-radius:0}
  .main>.top{border-top-left-radius:0}
  .top{min-height:52px;padding:var(--sp-3) var(--sp-4)}
  .content{padding:var(--sp-4)}
  .content.board-mode{overflow:visible}
  .rec{grid-template-columns:1fr}
  .rec-col:last-child{grid-column:auto;display:flex}
  .col{flex-basis:82vw;max-height:70vh}
}
@media (max-width:560px){
  .gbrand{font-size:14px}
  .gsearch input{padding-left:30px;font-size:12.5px}
  .fields{grid-template-columns:1fr}
  .top .right{width:100%;margin-left:0}
  .top .right .btn{flex:1 1 auto}
  .rec{gap:var(--gap)}
}
@media (prefers-reduced-motion:no-preference){
  #drawer{animation:slide .16s ease-out}
  @keyframes slide{from{transform:translateX(20px);opacity:.6}}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}