/* Pilara Platform - PIL-DES-001 v1.1
   Karbon density | monday.com status system | ClickUp crispness.
   Every colour traces to a S4 token. 8px grid. Figtree only.
   Branding hooks: --ink (firm primary -> sidebar), --oxblood (firm accent -> brand),
   --amber (firm highlight -> warning) are overridden by theme_css_vars(). */

:root{
  /* branding input hooks (overridable per firm) */
  --ink:#1C2433; --oxblood:#0E7C66; --stamp:#0E7C66; --amber:#F5A623;

  /* S4 core tokens */
  --bg-app:#F7F8FA; --bg-surface:#FFFFFF; --bg-sidebar:var(--ink);
  --border:#E4E7EC; --text-primary:#1A202C; --text-secondary:#5A6472;
  --text-inverse:#F4F6F9;
  --brand:var(--oxblood);
  --brand-hover:color-mix(in srgb, var(--brand) 85%, black);
  --brand-soft:color-mix(in srgb, var(--brand) 12%, white);
  --row-hover:#F2F4F7;

  /* S4 status pills - fixed, theme-independent. Values tuned so white pill text
     meets WCAG 2.2 AA (>=4.5:1); amber stays bright and uses dark text instead. */
  --st-done:#008857; --st-progress:#F5A623; --st-overdue:#D23F55;
  --st-planned:#6E7680; --st-awaiting:#4276C0; --st-review:#9858CF;

  /* S5 */
  --r-sm:6px; --r-lg:10px;
  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 12px 24px -6px rgba(16,24,40,.16);

  --font:'Figtree',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg-app);color:var(--text-primary);
  font-family:var(--font);font-size:14px;line-height:1.5;
  display:grid;grid-template-columns:240px 1fr;grid-template-rows:88px 1fr auto;
  grid-template-areas:"side top" "side main" "side foot";min-height:100vh}
a{color:var(--text-primary)}

/* --------- S6 shell: sidebar --------- */
.sidebar{grid-area:side;background:var(--bg-sidebar);color:var(--text-inverse);
  display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;
  height:100vh;overflow-y:auto}
.sidebar .brand{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  text-decoration:none;padding:4px 8px 16px;
  border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:12px}
.sidebar .brand .brand-word{color:#fff;font-weight:700;font-size:18px;letter-spacing:.01em}
.sidebar .brand .brand-sub{color:rgba(244,246,249,.72);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.10em}
.brand-logo{max-height:32px;width:auto;display:block}
.sidebar nav{display:flex;flex-direction:column;gap:1px;flex:1}
.sidebar nav a{display:flex;align-items:center;gap:11px;height:38px;padding:0 12px;
  border-radius:8px;text-decoration:none;font-size:14px;font-weight:500;
  color:rgba(244,246,249,.88);position:relative}
.sidebar nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar nav a:hover svg{opacity:1}
.sidebar nav a.on{background:color-mix(in srgb, var(--brand) 18%, transparent);color:#fff}
.sidebar nav a.on svg{opacity:1}
.sidebar nav a.on::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;
  width:3px;border-radius:0 2px 2px 0;background:var(--brand)}
.nav-section{color:rgba(244,246,249,.42);font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:14px 12px 4px}
.nav-section:first-of-type{padding-top:4px}
.sidebar .whoami{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:8px;
  display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(244,246,249,.8)}
.sidebar .whoami .avatar{width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600}
.sidebar .whoami .who-text{display:flex;flex-direction:column;line-height:1.25;flex:1}
.sidebar .whoami .who-name{color:#fff;font-weight:600;font-size:15px}
.sidebar .whoami .who-role{font-size:13px;color:rgba(244,246,249,.7)}

/* --------- S6 shell: top bar --------- */
.topbar{grid-area:top;background:var(--bg-surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:20px;padding:0 24px}
.topbar-logo{display:flex;align-items:center;height:100%}
.topbar-logo img{max-height:64px;max-width:300px;width:auto;display:block}
.topbar-firm{font-weight:700;font-size:18px;color:var(--text-primary);text-decoration:none;
  letter-spacing:-.01em}
.topnav{display:flex;align-items:center;gap:4px}
.topnav a{font-size:15px;font-weight:500;color:var(--text-secondary);text-decoration:none;
  padding:8px 14px;border-radius:6px;line-height:1;transition:background .15s ease-out}
.topnav a:hover{background:var(--row-hover);color:var(--text-primary)}
.topnav a.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.topbar .crumb{margin-left:auto;font-size:13px;color:var(--text-secondary);font-weight:500}
.topbar .date-stamp{font-size:12px;color:var(--text-secondary);
  font-variant-numeric:tabular-nums}

main{grid-area:main;padding:24px;max-width:1440px;width:100%}

footer{grid-area:foot;text-align:center;font-size:12px;color:var(--text-secondary);
  padding:16px 24px;border-top:1px solid var(--border);background:var(--bg-surface)}

/* --------- typography --------- */
h1{font-size:20px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:16px;font-weight:600;margin:32px 0 12px}
h2:first-of-type{margin-top:24px}
.kicker{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-secondary);margin-bottom:2px}
.muted{color:var(--text-secondary)}
.mono{font-variant-numeric:tabular-nums}
.strike{text-decoration:line-through;color:var(--text-secondary)}

/* --------- S7 data tables (Karbon) --------- */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  font-size:13px;box-shadow:var(--shadow-1);margin:8px 0 24px}
th{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  text-align:left;color:var(--text-secondary);padding:0 12px;height:40px;
  background:var(--bg-surface);border-bottom:1px solid var(--border);
  position:sticky;top:0}
td{padding:0 16px;height:48px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td, tr:hover td{background:var(--row-hover)}
td.num,th.num{font-variant-numeric:tabular-nums}
td a{font-weight:500;text-decoration:none}
td a:hover{color:var(--brand)}

/* --------- S4 status pills (monday) --------- */
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;
  padding:2px 10px;border-radius:4px;color:#fff;white-space:nowrap;line-height:1.5}
.chip.st-planned{background:var(--st-planned)}
.chip.st-progress{background:var(--st-progress)}
.chip.st-awaiting{background:var(--st-awaiting)}
.chip.st-review{background:var(--st-review)}
.chip.st-done{background:var(--st-done)}
.chip.st-overdue{background:var(--st-overdue)}
/* amber is too light for white text -> dark ink keeps it bright AND AA-legible */
.chip.st-progress, .chip.amber{color:#1A202C}
/* legacy colour aliases used by older templates */
.chip.green{background:var(--st-done)} .chip.red{background:var(--st-overdue)}
.chip.amber{background:var(--st-progress)} .chip.grey{background:var(--st-planned)}
.due-overdue{color:var(--st-overdue);font-weight:600}
.due-soon{color:var(--amber);font-weight:600}

/* --------- S7 cards / dashboard stats --------- */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;
  margin:16px 0 8px}
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:20px;font-size:13px;color:var(--text-secondary);
  font-weight:500}
.card .big{font-size:28px;font-weight:700;color:var(--text-primary);line-height:1.2;
  font-variant-numeric:tabular-nums;margin-bottom:4px}
.card.alert{border-top:3px solid var(--st-overdue)}
.card.alert .big{color:var(--st-overdue)}
.card.warn{border-top:3px solid var(--st-progress)}
a.card{display:block;text-decoration:none;color:var(--text-secondary);transition:box-shadow .15s ease-out}
a.card:hover{box-shadow:var(--shadow-2)}
.bar-row .rl a{color:inherit;text-decoration:none}
.bar-row .rl a:hover{color:var(--brand)}

/* --------- S7 kanban (ClickUp) --------- */
.colgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.col{background:transparent;padding:0}
.col h3{display:inline-flex;align-items:center;font-size:12px;font-weight:600;margin:0 0 12px;
  padding:2px 10px;border-radius:4px;background:var(--st-planned);color:#fff;
  text-transform:none;letter-spacing:0}
.jobcard{background:var(--bg-surface);border:1px solid var(--border);
  border-left:3px solid var(--st-planned);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:12px;margin-bottom:8px;font-size:13px}
.jobcard:hover{box-shadow:var(--shadow-2)}
.jobcard a{font-weight:600;text-decoration:none}
.jobcard .meta{font-size:12px;color:var(--text-secondary);margin-top:4px;
  font-variant-numeric:tabular-nums}
.jobcard.st-planned{border-left-color:var(--st-planned)}
.jobcard.st-progress{border-left-color:var(--st-progress)}
.jobcard.st-awaiting{border-left-color:var(--st-awaiting)}
.jobcard.st-review{border-left-color:var(--st-review)}
.jobcard.st-done{border-left-color:var(--st-done)}
.jobcard.st-overdue{border-left-color:var(--st-overdue)}

/* kanban drag-move: column header carries a status pill + live count; cards drag
   between columns. The base .col h3 grey pill is neutralised here so the inner
   coloured status chip reads cleanly. */
.kanban .col h3{background:transparent;color:var(--text-secondary);padding:0;gap:8px;
  font-size:12px;font-weight:600}
.kanban .col h3 .colcount{color:var(--text-secondary);font-variant-numeric:tabular-nums}
.kanban .col-cards{display:flex;flex-direction:column;gap:8px;min-height:48px}
.kanban .col-cards .jobcard{margin-bottom:0}
.jobcard[draggable=true]{cursor:grab}
.jobcard.dragging{opacity:.45;cursor:grabbing}
.col.drop-target{outline:2px dashed var(--brand);outline-offset:3px;
  border-radius:var(--r-lg);background:var(--brand-soft)}
.toast{position:fixed;right:16px;bottom:16px;background:var(--bg-surface);
  border:1px solid var(--border);border-left:3px solid var(--st-overdue);
  border-radius:var(--r-lg);padding:10px 14px;font-size:13px;box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(8px);transition:opacity .2s ease-out,transform .2s ease-out;z-index:50}
.toast.show{opacity:1;transform:none}

/* --------- flags & notes --------- */
.flag{background:color-mix(in srgb, var(--st-overdue) 8%, white);
  border-left:3px solid var(--st-overdue);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:8px 12px;margin:8px 0;font-size:13px}
.note{background:var(--bg-surface);border:1px solid var(--border);
  border-left:3px solid var(--text-secondary);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:8px 12px;margin:8px 0;font-size:13px}

/* --------- S7 buttons --------- */
form.inline{display:inline}
button,.btn{font-family:var(--font);font-size:13px;font-weight:500;height:36px;
  padding:0 14px;border-radius:var(--r-sm);border:none;cursor:pointer;
  background:var(--brand);color:#fff;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;transition:background .15s ease-out}
button:hover,.btn:hover{background:var(--brand-hover)}
button.ghost,.btn.ghost{background:var(--bg-surface);color:var(--text-primary);
  border:1px solid var(--border)}
button.ghost:hover,.btn.ghost:hover{background:var(--row-hover);color:var(--text-primary)}
button.tiny{height:28px;padding:0 10px;font-size:12px}
.sidebar button.tiny.ghost{background:transparent;color:rgba(244,246,249,.7);
  border:1px solid rgba(255,255,255,.2)}
.sidebar button.tiny.ghost:hover{color:#fff;border-color:rgba(255,255,255,.45);
  background:transparent}

/* --------- S7 forms --------- */
label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);
  margin:16px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],select,textarea{
  width:100%;height:36px;padding:0 10px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--bg-surface);font-family:var(--font);
  font-size:13px;color:var(--text-primary);transition:border-color .15s ease-out}
textarea{height:auto;padding:8px 10px;min-height:80px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;
  border-color:var(--brand)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:8px 24px 24px;margin:16px 0}
.formgrid .full{grid-column:1/-1}
.checks{display:flex;gap:24px;flex-wrap:wrap;margin-top:8px}
.checks label{display:flex;align-items:center;gap:6px;margin:0;text-transform:none;
  font-size:13px;color:var(--text-primary);font-weight:400}

/* --------- toolbar --------- */
.toolbar{display:flex;gap:8px;align-items:center;margin:12px 0 20px;flex-wrap:wrap}
details{margin:12px 0} summary{cursor:pointer;font-weight:600;font-size:13px}

/* --------- outbox mail cards --------- */
.mailcard{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);margin-bottom:16px;overflow:hidden}
.mailcard .head{display:flex;gap:16px;align-items:baseline;background:var(--bg-app);
  padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px}
.mailcard pre{white-space:pre-wrap;font-family:var(--font);font-size:13px;
  padding:12px 16px;margin:0}

/* --------- insights --------- */
.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;margin-top:8px}
.panel{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:16px}
.panel h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-secondary);margin:0 0 12px}
.headline{display:flex;align-items:baseline;gap:16px;padding:16px 20px;margin:8px 0;
  background:var(--bg-surface);border:1px solid var(--border);
  border-left:4px solid var(--st-done);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.headline.bad{border-left-color:var(--st-overdue)}
.headline .num{font-size:28px;font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums}
.headline.bad .num{color:var(--st-overdue)}
.headline .lbl{font-size:13px;color:var(--text-secondary)}
.bars{display:flex;flex-direction:column;gap:8px}
.bar-row{display:grid;grid-template-columns:120px 1fr 42px;align-items:center;gap:12px;
  font-size:13px}
.bar-row .rl{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.bar-track{height:12px;background:var(--bg-app);border:1px solid var(--border);
  border-radius:6px;overflow:hidden}
.bar-fill{height:100%;background:var(--st-progress);min-width:2px;border-radius:6px}
.bar-fill.st-planned{background:var(--st-planned)} .bar-fill.st-progress{background:var(--st-progress)}
.bar-fill.st-awaiting{background:var(--st-awaiting)} .bar-fill.st-review{background:var(--st-review)}
.bar-fill.st-done{background:var(--st-done)} .bar-fill.st-overdue{background:var(--st-overdue)}
.bar-fill.accent{background:var(--brand)}
.bar-row .rv{font-variant-numeric:tabular-nums;text-align:right;font-weight:500}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.stat-row:last-child{border-bottom:none}
.stat-row .v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.stat-row .v.muted{font-size:13px;font-weight:400}

/* --------- branding settings page --------- */
.swatch{display:inline-block;width:100%;height:48px;border:1px solid var(--border);
  border-radius:var(--r-sm)}
.swatchrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:12px 0}
.swatchrow label{margin-top:8px}
.colorpick{display:flex;align-items:center;gap:8px}
.colorpick input[type=color]{width:46px;height:36px;padding:2px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:#fff;cursor:pointer}
.colorpick input[type=text]{width:110px;font-size:12px;
  font-variant-numeric:tabular-nums}
.preview-frame{border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--bg-app);padding:16px;margin:8px 0}
.logo-current{display:flex;align-items:center;gap:16px;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 16px;margin:8px 0}
.logo-current img{max-height:54px;max-width:240px}

/* ---- desk: stacked insights divider + entity identity accent ---- */
.desk-insights{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.ent-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;
  vertical-align:middle;flex:none}

/* --------- search + filter (PIL-DES-001 inputs; lucide search glyph) --------- */
.filterbar{display:flex;gap:10px;align-items:center;margin:12px 0 16px;flex-wrap:wrap}
.searchbox{position:relative;display:inline-flex;align-items:center;flex:1 1 260px;
  min-width:220px;max-width:440px}
.searchbox svg{position:absolute;left:10px;width:16px;height:16px;color:var(--text-secondary);
  pointer-events:none}
.searchbox input[type=search],.searchbox input[type=text]{height:36px;width:100%;
  padding:0 10px 0 34px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--bg-surface);font-family:var(--font);font-size:13px;color:var(--text-primary);
  transition:border-color .15s ease-out}
.searchbox input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.searchbox input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filter-chips .fc{font-size:12px;font-weight:600;height:28px;padding:0 10px;border-radius:4px;
  border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1;
  transition:background .15s ease-out}
.filter-chips .fc:hover{background:var(--row-hover)}
.filter-chips .fc.on{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
/* Category / inbox filter tabs: the WHOLE tab is shaded its own identity colour
   (PIL-DES-001 s4a identity palette). Unselected tabs sit dimmed; the active tab is
   full strength. Kept distinct from the status pills, which carry status meaning. */
.filter-chips .fc[data-tint]{background:var(--tint);color:#fff;border-color:var(--tint);opacity:.5}
.filter-chips .fc[data-tint]:hover{opacity:.78;background:var(--tint);color:#fff}
.filter-chips .fc[data-tint].on{opacity:1;background:var(--tint);color:#fff;border-color:var(--tint)}
.filter-count{font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
tr[data-href],.jobcard[data-href]{cursor:pointer}
.no-results td{text-align:center;color:var(--text-secondary);font-style:italic;height:56px}

/* --------- top-bar global search --------- */
.topsearch{position:relative;display:flex;align-items:center;flex:0 1 300px;min-width:180px}
.topsearch svg{position:absolute;left:10px;width:16px;height:16px;color:var(--text-secondary);
  pointer-events:none}
.topsearch input{height:36px;width:100%;padding:0 44px 0 34px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--bg-app);font-size:13px;font-family:var(--font);
  color:var(--text-primary);transition:border-color .15s ease-out}
.topsearch input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand);
  background:#fff}
.topsearch kbd{position:absolute;right:8px;font-size:11px;color:var(--text-secondary);
  border:1px solid var(--border);border-radius:4px;padding:1px 5px;background:var(--bg-surface);
  font-family:var(--font)}

/* live typeahead dropdown under the global search (popover: shadow-2, 10px radius) */
.gs-suggest{position:absolute;top:42px;left:0;right:0;z-index:60;display:none;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);overflow:hidden;max-height:64vh;overflow-y:auto}
.gs-suggest.open{display:block}
.gs-item{display:flex;align-items:center;gap:10px;padding:8px 12px;text-decoration:none;
  border-bottom:1px solid var(--border);font-size:13px;color:var(--text-primary)}
.gs-item:last-child{border-bottom:none}
.gs-item:hover,.gs-item.on{background:var(--brand-soft)}
.gs-item .gs-type{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-secondary);min-width:74px;flex:none}
.gs-item .gs-label{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-item .gs-sub{margin-left:auto;color:var(--text-secondary);font-size:12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:42%}
.gs-empty{padding:10px 12px;color:var(--text-secondary);font-size:13px;font-style:italic}

.filterbar .facetlabel{font-size:12px;color:var(--text-secondary);font-weight:600;
  margin:0 2px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.filterbar .sep{width:1px;align-self:stretch;background:var(--border);margin:0 2px}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--text-primary)}
th[data-dir=asc]::after{content:" ^";color:var(--brand);font-weight:700}
th[data-dir=desc]::after{content:" v";color:var(--brand);font-weight:700}

/* --------- search results page --------- */
.res-group{margin:20px 0}
.res-empty{color:var(--text-secondary);font-style:italic;margin:24px 0}

/* --------- documents browser --------- */
.doclist{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);overflow:hidden;margin:8px 0 24px}
.doc-row{display:flex;align-items:center;gap:10px;padding:0 14px;height:40px;
  border-bottom:1px solid var(--border);font-size:13px}
.doc-row:last-child{border-bottom:none}
.doc-row:hover{background:var(--row-hover)}
.doc-row .path{color:var(--text-secondary);font-size:12px;margin-left:auto;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.doc-row svg{width:15px;height:15px;color:var(--text-secondary);flex:none}

/* Search boxes: keep the feature, drop the magnifier/file glyph (Principal pref). */
.searchbox svg,.topsearch svg,.doc-row svg{display:none !important}
.searchbox input[type=search],.searchbox input[type=text]{padding-left:10px}
.topsearch input{padding-left:12px}

/* ========================================================================
   PIL-UX-001 blueprint components — client header, tab bar, KPI metrics,
   action-row panels. Built from PIL-DES-001 tokens only. Used by the
   client cockpit, practice dashboard and (later) the review queue.
   ======================================================================== */

/* client header: avatar + identity (name, badges, facts) + primary action */
.client-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin:4px 0 4px}
.client-head .avatar-lg{width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;
  justify-content:center;font-size:16px;font-weight:600}
.client-head .ch-id{flex:1;min-width:240px}
.client-head .ch-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.client-head .ch-name h1{margin:0}
.client-head .ch-meta{font-size:12px;color:var(--text-secondary);margin-top:3px;
  font-variant-numeric:tabular-nums}
.client-head .ch-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:500;
  padding:2px 8px;border-radius:4px;background:var(--bg-app);color:var(--text-secondary);
  border:1px solid var(--border);white-space:nowrap}

/* tab bar: underlined active tab (PIL-UX-001 §4 client workspace) */
.tabbar{display:flex;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--border);
  margin:16px 0 20px}
.tabbar a{padding:0 0 10px;font-size:14px;font-weight:500;color:var(--text-secondary);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s ease-out}
.tabbar a:hover{color:var(--text-primary)}
.tabbar a.on{color:var(--text-primary);border-bottom-color:var(--text-primary)}

/* KPI metric cards: label on top, headline number below (cockpit/dashboard) */
.metricrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:16px;margin:16px 0}
.metric{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:16px 20px}
.metric .ml{font-size:13px;color:var(--text-secondary)}
.metric .mv{font-size:24px;font-weight:600;color:var(--text-primary);line-height:1.25;
  margin-top:2px;font-variant-numeric:tabular-nums}
.metric.alert .mv{color:var(--st-overdue)}
a.metric{display:block;text-decoration:none;transition:box-shadow .15s ease-out}
a.metric:hover{box-shadow:var(--shadow-2)}

/* light panel: titled card holding action/deadline rows (cockpit/dashboard) */
.panelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.lpanel{background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:14px 16px}
.lpanel .lp-title{font-size:13px;font-weight:600;color:var(--text-primary);
  margin:0 0 4px}
.lpanel .lp-empty{padding:14px 0 6px;color:var(--text-secondary);font-style:italic;
  font-size:13px}

/* action row: leading icon + text + trailing status pill (the triage primitive) */
.arow{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-top:1px solid var(--border);font-size:13px}
.arow:first-of-type{border-top:none}
.arow .ar-ico{width:17px;height:17px;color:var(--text-secondary);flex:none}
.arow .ar-text{flex:1;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis}
.arow a{text-decoration:none;font-weight:500;color:var(--text-primary)}
.arow a:hover{color:var(--brand)}
.arow .ar-date{font-size:12px;color:var(--text-secondary);min-width:50px;
  font-variant-numeric:tabular-nums;flex:none}

/* ---- responsive ---- */
@media (max-width: 980px){
  body{grid-template-columns:200px 1fr}
  .topnav a{padding:8px 10px;font-size:14px}
  .topbar{gap:12px}
  .topsearch{flex-basis:160px}
}

/* Start-engagement chooser cards + engagement-run checklist (PIL-REP-001) */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px}
.pickcard{display:block;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:20px;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:border-color .15s ease}
.pickcard:hover{border-color:var(--brand)}
.pc-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.pc-blurb{font-size:13px;line-height:1.4}
.pc-go{margin-top:14px;color:var(--brand);font-weight:500;font-size:13px}
.steplist{list-style:none;padding:0;margin:16px 0}
.steprow{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:var(--bg-surface)}
.stepnum{flex:0 0 26px;height:26px;border-radius:50%;background:var(--bg-app);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-secondary)}
.steprow.done .stepnum{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.stepbody{flex:1}
.stepbody .lbl{font-weight:500;font-size:14px;color:var(--text-primary)}
.stepbody .dsc{font-size:12px;color:var(--text-secondary);margin-top:2px}
.stepgo{flex:0 0 auto;align-self:center}

.vat-total td{background:var(--bg-app)}

/* Drive folder browser (Documents tab) */
details.folder{border:1px solid var(--border);border-radius:8px;margin:8px 0;padding:10px 14px;background:var(--bg-surface)}
details.folder>summary{cursor:pointer;font-size:14px;list-style:none}
details.folder>summary::-webkit-details-marker{display:none}
details.folder>summary::before{content:"\25B8";color:var(--text-secondary);margin-right:8px;font-size:11px}
details.folder[open]>summary::before{content:"\25BE"}
details.folder table td{padding:5px 8px;font-size:13px}