/* HCCG Operating Portal design system */

:root {
  /* Brand */
  --navy-900: #0a1f44;
  --navy-800: #12295a;
  --navy-700: #1b3670;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-100: #dbeafe;
  --blue-50:  #eff6ff;
  --orange-600: #ea580c;
  --orange-100: #ffedd5;

  /* Neutrals */
  --ink:      #0f172a;
  --ink-2:    #334155;
  --ink-3:    #64748b;
  --ink-4:    #94a3b8;
  --line:     #e2e8f0;
  --line-2:   #f1f5f9;
  --surface:  #ffffff;
  --canvas:   #f8fafc;

  /* Status */
  --green-600: #16a34a;
  --green-100: #dcfce7;
  --amber-600: #d97706;
  --amber-100: #fef3c7;
  --red-600:   #dc2626;
  --red-100:   #fee2e2;
  --purple-600:#7c3aed;
  --purple-100:#ede9fe;

  /* Scale */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --sidebar-w: 236px;
  --header-h:  62px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Header ---------- */

.hdr {
  height: var(--header-h);
  background: var(--navy-900);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 40;
}

.hdr-brand {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: 100%;
  color: #fff;
}

.hdr-brand img { height: 30px; width: auto; }

.hdr-brand .mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: -.02em;
  flex-shrink: 0;
}

.hdr-brand .wordmark { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }

.hdr-title {
  color: #fff; font-weight: 600; font-size: 16px;
  padding-left: 8px; white-space: nowrap;
}

.hdr-spacer { flex: 1; }

.hdr-user {
  display: flex; align-items: center; gap: 9px;
  padding: 0 22px 0 14px; color: #fff; font-size: 14px;
}

.hdr-user .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}

.hdr-user a { color: rgba(255,255,255,.72); font-size: 13px; }
.hdr-user a:hover { color: #fff; text-decoration: none; }

/* ---------- Shell ---------- */

.shell { display: flex; min-height: calc(100vh - var(--header-h)); }

.side {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 12px 0 24px;
}

.side a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 18px;
  color: var(--ink-2); font-size: 14px;
  border-left: 3px solid transparent;
}
.side a:hover { background: var(--line-2); text-decoration: none; }
.side a.active {
  background: var(--blue-600); color: #fff;
  border-left-color: var(--navy-900); font-weight: 600;
}
.side a.child      { padding-left: 34px; font-size: 13.5px; color: var(--ink-2); }
.side a.grandchild { padding-left: 48px; font-size: 13px;   color: var(--ink-3); }
.side a.app::before { content: "\203A"; color: var(--ink-4); font-weight: 700; }
.side a.active.app::before { color: rgba(255,255,255,.7); }

.side .parent {
  padding: 12px 18px 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-4);
}

.main { flex: 1; padding: 26px 32px 48px; max-width: 1180px; min-width: 0; }

/* ---------- Typography ---------- */

h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; margin: 28px 0 10px; }
h3 { font-size: 14px; font-weight: 650; margin: 0 0 6px; }
.lede  { color: var(--ink-3); margin: 0 0 20px; }
.muted { color: var(--ink-3); }
.tiny  { font-size: 12.5px; }

code {
  background: var(--line-2); padding: 1px 6px; border-radius: 4px;
  font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

.card-pad { padding: 18px 20px; }

.card-hd {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.card-hd h3 { margin: 0; font-size: 14.5px; }
.card-hd .spacer { flex: 1; }

.grid { display: grid; gap: 14px; }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-metrics { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Link card (the accent tiles) */
.tile {
  display: block; padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tile:hover {
  text-decoration: none; border-color: var(--blue-500);
  box-shadow: var(--shadow); transform: translateY(-1px);
}
.tile strong { display: block; font-size: 14.5px; margin-bottom: 3px; color: var(--ink); }
.tile span   { font-size: 13px; color: var(--ink-3); line-height: 1.45; }

/* Metric */
.metric { padding: 16px 18px; }
.metric .label {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.metric .value { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.metric .foot  { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.metric .up    { color: var(--green-600); font-weight: 600; }
.metric .down  { color: var(--red-600);   font-weight: 600; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }

thead th {
  text-align: left; padding: 10px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--canvas); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody td { padding: 11px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--blue-50); }

td.right, th.right { text-align: right; }

/* ---------- Badges / pills / dots ---------- */

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.badge.blue   { background: var(--blue-100);   color: var(--blue-600); }
.badge.green  { background: var(--green-100);  color: var(--green-600); }
.badge.amber  { background: var(--amber-100);  color: var(--amber-600); }
.badge.red    { background: var(--red-100);    color: var(--red-600); }
.badge.purple { background: var(--purple-100); color: var(--purple-600); }
.badge.orange { background: var(--orange-100); color: var(--orange-600); }
.badge.grey   { background: var(--line-2);     color: var(--ink-3); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot.green { background: var(--green-600); }
.dot.amber { background: var(--amber-600); }
.dot.grey  { background: var(--ink-4); }

/* ---------- Forms ---------- */

.field { margin-bottom: 13px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); margin-bottom: 4px;
}

input[type=text], input[type=email], input[type=search], input[type=tel],
input:not([type]), select, textarea {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-sm);
  font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  background: var(--blue-600); color: #fff;
  transition: background .12s;
}
.btn:hover { background: #1d4ed8; text-decoration: none; }
.btn.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn.ghost:hover { background: var(--line-2); }
.btn.sm { padding: 5px 11px; font-size: 13px; }

/* ---------- Bits ---------- */

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar input[type=search] { max-width: 300px; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.segmented a {
  padding: 6px 13px; font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: var(--surface);
  border-right: 1px solid var(--line);
}
.segmented a:last-child { border-right: none; }
.segmented a:hover { background: var(--line-2); text-decoration: none; }
.segmented a.on { background: var(--blue-600); color: #fff; }

.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); }
.empty .big { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }

.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.crumbs a { color: var(--ink-3); }
.crumbs .sep { padding: 0 6px; color: var(--ink-4); }

.avatar-sm {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue-100); color: var(--blue-600);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; flex-shrink: 0;
}

.row { display: flex; align-items: center; gap: 10px; }

.foot {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 14px 32px; font-size: 12.5px; color: var(--ink-3);
  display: flex; align-items: center;
}
.foot .spacer { flex: 1; }

@media (max-width: 860px) {
  .side { display: none; }
  .hdr-brand { width: auto; }
  .main { padding: 20px 18px 40px; }
}

/* ---------- Collapsible nav sections ---------- */

.nav-disc { display: block; }

.nav-disc > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 18px 8px 34px;
  font-size: 13.5px; color: var(--ink-2);
  border-left: 3px solid transparent;
  cursor: pointer; list-style: none; user-select: none;
}
.nav-disc > summary::-webkit-details-marker { display: none; }
.nav-disc > summary:hover { background: var(--line-2); }

.nav-disc > summary a { color: inherit; flex: 1; }
.nav-disc > summary a:hover { text-decoration: none; }

.nav-disc > summary.active {
  background: var(--blue-600); color: #fff;
  border-left-color: var(--navy-900); font-weight: 600;
}

.caret {
  width: 0; height: 0; flex-shrink: 0;
  border-left: 4.5px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  opacity: .45;
  transition: transform .15s ease;
}
.nav-disc[open] > summary .caret { transform: rotate(90deg); }
.nav-disc > summary:hover .caret { opacity: .8; }

.nav-disc > a.grandchild { padding-left: 52px; }

/* Active nav links: text must win over the depth-based color rules above. */
.side a.active,
.side a.child.active,
.side a.grandchild.active,
.nav-disc > summary.active,
.nav-disc > summary.active a {
  color: #fff;
}
.side a.active.app::before,
.nav-disc > summary.active .caret { color: rgba(255, 255, 255, .75); }

/* ---------- Accent palette ---------- */

.a-blue   { --a: #2563eb; --a-bg: #eff6ff; --a-br: #bfdbfe; }
.a-green  { --a: #16a34a; --a-bg: #f0fdf4; --a-br: #bbf7d0; }
.a-orange { --a: #ea580c; --a-bg: #fff7ed; --a-br: #fed7aa; }
.a-purple { --a: #7c3aed; --a-bg: #f5f3ff; --a-br: #ddd6fe; }
.a-red    { --a: #dc2626; --a-bg: #fef2f2; --a-br: #fecaca; }
.a-teal   { --a: #0d9488; --a-bg: #f0fdfa; --a-br: #99f6e4; }
.a-indigo { --a: #4f46e5; --a-bg: #eef2ff; --a-br: #c7d2fe; }
.a-slate  { --a: #475569; --a-bg: #f8fafc; --a-br: #cbd5e1; }

/* ---------- Icons ---------- */

.ico { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }
.ico-lg { width: 22px; height: 22px; }

.ico-box {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--a-bg); color: var(--a);
  display: grid; place-items: center; flex-shrink: 0;
}
.ico-box.sm { width: 30px; height: 30px; border-radius: 7px; }

.side .ico { width: 16px; height: 16px; opacity: .62; }
.side a.active .ico, .nav-disc > summary.active .ico { opacity: 1; }
.side a.child .ico, .nav-disc > summary .ico { color: var(--a, var(--ink-3)); opacity: .9; }
.nav-disc > summary.active .ico { color: #fff; }

/* ---------- Accented tiles ---------- */

.tile.accent {
  display: flex; align-items: flex-start; gap: 13px;
  border-left: 3px solid var(--a);
}
.tile.accent:hover { border-color: var(--line); border-left-color: var(--a); }
.tile.accent .body { min-width: 0; }

.card.accent { border-top: 3px solid var(--a); }
.card-hd .ico-box.sm { margin-right: 2px; }

/* ---------- Page head ---------- */

.page-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.page-head .ico-box { width: 46px; height: 46px; border-radius: var(--r); }
.page-head h1 { margin-bottom: 2px; }
.page-head .lede { margin: 0; }
.page-head .spacer { flex: 1; }
.page-head .date { color: var(--ink-3); font-size: 13.5px; white-space: nowrap; padding-top: 6px; }

/* ---------- Section list rows ---------- */

.rows { display: flex; flex-direction: column; }
.rows a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--line-2); color: inherit;
}
.rows a:last-child { border-bottom: none; }
.rows a:hover { background: var(--canvas); text-decoration: none; }
.rows .grow { flex: 1; min-width: 0; }
.rows .name { font-weight: 600; font-size: 14px; }
.rows .sub  { font-size: 12.5px; color: var(--ink-3); }
.rows .chev { color: var(--ink-4); }

/* ---------- Icon picker ---------- */

.icon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px; max-height: 190px; overflow-y: auto;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--canvas);
}

.icon-opt {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  cursor: pointer; padding: 0;
  transition: border-color .1s, color .1s, background .1s;
}
.icon-opt:hover { border-color: var(--blue-500); color: var(--blue-600); }
.icon-opt.on { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }

.icon-picked { gap: 9px; }
.icon-picked code { font-size: 12.5px; }

/* ---------- App activation picker ---------- */

.app-picks { display: flex; flex-wrap: wrap; gap: 8px; }

.app-pick {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: 13.5px; cursor: pointer;
}
.app-pick:hover { border-color: var(--blue-500); }
.app-pick input { width: auto; margin: 0; accent-color: var(--blue-600); }

/* Nav disclosure retired: sidebar now shows only the active branch. */
.nav-disc, .caret { display: none; }

/* ---------- Documentation ---------- */

.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; align-items: start; }
.doc-side { position: sticky; top: calc(var(--header-h) + 20px); }
.doc-toc { padding: 6px 4px 12px; max-height: 60vh; overflow-y: auto; }
.doc-toc ul { list-style: none; padding-left: 14px; margin: 0; }
.doc-toc > ul { padding-left: 12px; }
.doc-toc li { margin: 2px 0; }
.doc-toc a { font-size: 13px; color: var(--ink-2); line-height: 1.4; display: block; padding: 2px 0; }
.doc-toc a:hover { color: var(--blue-600); text-decoration: none; }

.prose { line-height: 1.65; }
.prose > *:first-child { margin-top: 0; }
.prose h1 { font-size: 25px; margin: 0 0 6px; }
.prose h2 {
  font-size: 19px; margin: 30px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.prose h3 { font-size: 15.5px; margin: 22px 0 6px; }
.prose p, .prose ul, .prose ol { margin: 0 0 13px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }

.prose code {
  background: var(--line-2); color: #b91c1c;
  padding: 1.5px 5px; border-radius: 4px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.prose pre {
  background: #0f172a; color: #e2e8f0;
  padding: 14px 16px; border-radius: var(--r-sm);
  overflow-x: auto; margin: 0 0 15px; font-size: 13px; line-height: 1.55;
}
.prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

.prose blockquote {
  margin: 0 0 14px; padding: 10px 16px;
  border-left: 3px solid var(--blue-500); background: var(--blue-50);
  color: var(--ink-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose table { margin: 0 0 15px; font-size: 13.5px; }
.prose table th { background: var(--canvas); }

.prose a { font-weight: 500; }
.prose strong { font-weight: 650; }

@media (max-width: 1100px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-side { position: static; }
}

/* Google profile photos in avatars */
.hdr-user .avatar { overflow: hidden; padding: 0; }
.hdr-user .avatar img,
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-sm { overflow: hidden; }

/* ---------- RegWatch ---------- */

.rw-item { padding: 16px 20px; border-bottom: 1px solid var(--line-2); border-left: 3px solid transparent; }
.rw-item:last-child { border-bottom: none; }
.rw-high   { border-left-color: var(--orange-600); }
.rw-medium { border-left-color: var(--blue-500); }
.rw-low    { border-left-color: var(--line); }

/* Metadata is docket numbers and CPT codes. Monospace is native to that world. */
.rw-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.rw-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .02em;
}
.rw-sep { color: var(--ink-4); font-size: 11px; }

.chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 3px;
  border: 1px solid var(--blue-500); color: var(--blue-600);
}

.rw-title {
  display: inline-block; font-size: 15px; font-weight: 650;
  color: var(--ink); line-height: 1.35; margin-bottom: 6px;
}
.rw-title:hover { color: var(--blue-600); text-decoration: none; }
.rw-ext { width: 13px; height: 13px; margin-left: 5px; opacity: .4; vertical-align: -1px; }

.rw-dek  { margin: 0 0 6px; font-size: 14.5px; color: var(--ink); font-weight: 500; }
.rw-body { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }

/* Everything above is context for this one line. */
.rw-sowhat {
  display: flex; gap: 10px; align-items: baseline;
  border-top: 1px solid var(--line); padding-top: 9px;
  font-size: 14px; color: var(--ink);
}
.rw-sowhat-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange-600); white-space: nowrap; padding-top: 2px;
}

.rw-quiet {
  display: flex; align-items: center; gap: 9px;
  padding: 22px 20px; color: var(--ink-3); font-size: 14px;
}
.rw-quiet .ico { color: var(--green-600); opacity: .7; }

.rw-more { font-size: 12.5px; margin-left: 12px; }

/* Build time sits quieter than the edition date it follows. */
.rw-built { opacity: .6; }
.rw-built::before { content: "\00b7"; margin: 0 6px 0 2px; opacity: .5; }

/* ---------- Projects ---------- */

/* Health colours are shared by dots, bars and rails so one glance reads
   consistently across the list and the tree. */
.h-on_track { --h: var(--blue-500); }
.h-at_risk  { --h: var(--amber-600); }
.h-overdue  { --h: var(--orange-600); }
.h-blocked  { --h: var(--red-600); }
.h-done     { --h: var(--green-600); }

/* Project list rows */
.pj-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--line-2); color: inherit;
}
.pj-row:last-child { border-bottom: none; }
.pj-row:hover { background: var(--canvas); text-decoration: none; }
.pj-row .grow { flex: 1; min-width: 0; }
.pj-row .name { display: block; font-weight: 600; font-size: 14px; }
.pj-row .sub  { display: block; font-size: 12.5px; color: var(--ink-3); }
.pj-row .chev { color: var(--ink-4); flex-shrink: 0; }

.pj-health {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--h, var(--ink-4)); flex-shrink: 0;
}

.pj-bar {
  display: block; width: 110px; height: 6px; flex-shrink: 0;
  background: var(--line); border-radius: 3px; overflow: hidden;
}
.pj-bar.wide { width: 100%; height: 8px; border-radius: 4px; }
.pj-fill { display: block; height: 100%; background: var(--h, var(--blue-500)); }
.pj-pct {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--ink-3); width: 38px; text-align: right; flex-shrink: 0;
}

/* Task tree. Indentation carries the hierarchy; the rail makes depth
   scannable without counting pixels. */
.tk-tree { padding: 4px 0; }

.tk {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; border-bottom: 1px solid var(--line-2);
}
.tk:last-child { border-bottom: none; }
.tk:hover { background: var(--canvas); }

.tk-l2 { padding-left: 20px; }
.tk-l3 { padding-left: 46px; background: #fcfdfe; }
.tk-l3::before {
  content: ""; position: absolute; margin-left: -18px;
  width: 1px; height: 20px; background: var(--line);
}

.tk-health { width: 7px; height: 7px; border-radius: 50%;
             background: var(--h, var(--ink-4)); flex-shrink: 0; }

.tk-main { flex: 1; min-width: 0; }
.tk-title { font-size: 14px; font-weight: 550; }
.tk-l3 .tk-title { font-weight: 450; font-size: 13.5px; color: var(--ink-2); }
.tk-notes { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }

.tk-warn { width: 14px; height: 14px; color: var(--amber-600); margin-left: 5px; vertical-align: -2px; }

.tk-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tk-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-3);
}

.tk-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; color: var(--ink-3);
}
.tk-chip .ico { width: 13px; height: 13px; }

.tk-due {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
}
.tk-due.is-late { color: var(--orange-600); font-weight: 600; }

.tk-unassigned { background: var(--line-2); color: var(--ink-4); }

/* Linked Drive documents sit under their item, indented to match. */
.tk-links { padding: 0 20px 9px 38px; display: flex; flex-wrap: wrap; gap: 8px; }
.tk-links.tk-l3 { padding-left: 64px; }
.tk-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
}
.tk-link:hover { border-color: var(--blue-500); color: var(--blue-600); text-decoration: none; }
.tk-link .ico { width: 13px; height: 13px; opacity: .6; }

/* Activity timeline. Comments and events in one stream. */
.tl { padding: 6px 0; }
.tl-row { display: flex; gap: 12px; padding: 10px 20px; }
.tl-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
  background: var(--blue-500);
}
.tl-dot.is-event { background: var(--line); border: 1px solid var(--ink-4); }
.tl-body { flex: 1; min-width: 0; }
.tl-head { display: block; font-size: 13px; }
.tl-when { color: var(--ink-4); font-size: 12px; margin-left: 8px; }
.tl-text { display: block; font-size: 14px; color: var(--ink-2); margin-top: 3px; }

/* ---------- Projects: editing controls ---------- */

/* Disclosure blocks used for forms that would otherwise crowd the page. */
.disc > summary { display: inline-flex; list-style: none; cursor: pointer; }
.disc > summary::-webkit-details-marker { display: none; }

/* Status select styled as a badge so it reads as state, not as a form control
   until you go to change it. */
.tk-statusform { margin: 0; }
.tk-status {
  width: auto; padding: 2px 22px 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
}
.tk-status:focus { box-shadow: 0 0 0 3px var(--blue-100); }
.s-not_started { background-color: var(--line-2);     color: var(--ink-3); }
.s-in_progress { background-color: var(--blue-100);   color: var(--blue-600); }
.s-blocked     { background-color: var(--red-100);    color: var(--red-600); }
.s-in_review   { background-color: var(--purple-100); color: var(--purple-600); }
.s-done        { background-color: var(--green-100);  color: var(--green-600); }
.s-cancelled   { background-color: var(--line-2);     color: var(--ink-4); }

/* Per-item edit panel */
.tk-edit { position: relative; }
.tk-edit > summary {
  list-style: none; cursor: pointer; padding: 3px;
  border-radius: var(--r-sm); color: var(--ink-4); display: inline-flex;
}
.tk-edit > summary::-webkit-details-marker { display: none; }
.tk-edit > summary:hover { background: var(--line-2); color: var(--blue-600); }
.tk-edit[open] > summary { background: var(--blue-100); color: var(--blue-600); }

.tk-panel {
  position: absolute; right: 0; top: 28px; z-index: 20; width: 420px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  padding: 16px;
}
.tk-panel .field { margin-bottom: 10px; }
.tk-sub {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.tk-danger { display: flex; align-items: center; gap: 10px; }
.tk-danger .btn { color: var(--red-600); border-color: var(--red-100); }
.tk-danger .btn:hover { background: var(--red-100); }

/* Add-a-task bar at the foot of the tree */
.tk-addbar { border-top: 1px solid var(--line); padding: 12px 20px; background: var(--canvas); }
.tk-addbar form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-addbar input[name=title] { flex: 1; min-width: 220px; }
.tk-addbar input[name=assignee] { width: 210px; }
.tk-addbar input[type=date] { width: 150px; }

textarea { font: inherit; resize: vertical; }

/* ---------- Projects: task groups ---------- */
/* Each task and its subtasks render as one bounded block. The rail down the
   left carries the task's health colour, so the grouping and the status are a
   single signal rather than two competing ones. */

.tkg-head-bar { display: flex; align-items: baseline; margin: 0 0 12px; }

.tkg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--h, var(--line));
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  overflow: visible;
}

/* Task header. Tinted so it reads as the head of a group, not another row. */
.tkg-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  background: linear-gradient(to right,
              color-mix(in srgb, var(--h, var(--line)) 7%, transparent), transparent 60%);
  border-bottom: 1px solid var(--line);
  border-radius: 0 var(--r) 0 0;
}

.tkg-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }

.tkg-prog { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tkg-bar {
  display: block; width: 74px; height: 5px;
  background: var(--line); border-radius: 3px; overflow: hidden;
}
.tkg-fill { display: block; height: 100%; background: var(--h, var(--blue-500)); }
.tkg-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-3);
}

.tkg-notes {
  padding: 10px 18px 0; font-size: 13.5px; color: var(--ink-2);
}

.tkg-links { padding: 10px 18px 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* Subtasks sit on a recessed panel, visually inside the task above them. */
.tkg-subs { background: var(--canvas); border-radius: 0 0 var(--r) 0; }

.tks {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 30px;
  border-bottom: 1px solid var(--line-2);
  position: relative;
}
.tks:hover { background: #fff; }
.tks.is-done .tks-title { color: var(--ink-3); text-decoration: line-through; }

/* Connector: a short tick joining each subtask to the group rail. */
.tks::before {
  content: ""; position: absolute; left: 16px; top: 50%;
  width: 8px; height: 1px; background: var(--line);
}

.tks-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--h, var(--ink-4)); flex-shrink: 0;
}
.tks-main { flex: 1; min-width: 0; }
.tks-title { font-size: 13.5px; color: var(--ink-2); }

.tks-links { padding: 0 18px 9px 38px; background: var(--canvas); }

/* Inline add row, styled to sit quietly until used. */
.tks-add {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 9px 18px 11px 30px;
}
.tks-add input {
  font-size: 13px; padding: 5px 9px;
  background: transparent; border-color: transparent;
}
.tks-add input:hover { border-color: var(--line); background: var(--surface); }
.tks-add input:focus { background: var(--surface); }
.tks-add input[name=title] { flex: 1; min-width: 180px; }
.tks-add input[name=assignee] { width: 180px; }
.tks-add input[type=date] { width: 140px; }
.tks-add .btn { opacity: .55; }
.tks-add:hover .btn, .tks-add:focus-within .btn { opacity: 1; }

/* New-task bar at the foot of the project */
.tkg-newtask form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tkg-newtask input[name=title] { flex: 1; min-width: 220px; }
.tkg-newtask input[name=assignee] { width: 210px; }
.tkg-newtask input[type=date] { width: 150px; }

/* The edit popover opens leftward inside a group so it never clips. */
.tkg .tk-panel { right: 0; left: auto; }

/* Subtasks read as white rows; hover supplies the position cue. */
.tkg-subs { background: var(--surface); }
.tks { background: var(--surface); }
.tks:hover { background: var(--line-2); }
.tks-links { background: var(--surface); }
.tks-add input:hover { background: var(--canvas); }

/* Page canvas a step darker so white cards lift off it. Applied to body only:
   --canvas is also used for table headers and inline hover states, which
   should stay near-white. */
body { background: #eaeef3; }
.tkg { box-shadow: 0 1px 3px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06); }

/* Assignee pickers in the inline add rows keep the quiet treatment. */
.tks-add select, .tkg-newtask select {
  font-size: 13px; padding: 5px 9px; width: 190px;
}
.tks-add select { background: transparent; border-color: transparent; }
.tks-add select:hover { border-color: var(--line); background: var(--surface); }

/* ---------- My work ---------- */

.mw-sec {
  padding: 10px 20px 4px; background: var(--canvas);
  border-bottom: 1px solid var(--line-2);
}
.mw-sec-name {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.mw-sec-name:hover { color: var(--blue-600); text-decoration: none; }

.mw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; border-bottom: 1px solid var(--line-2);
  color: inherit; border-left: 3px solid transparent;
}
.mw-row:last-child { border-bottom: none; }
.mw-row:hover { background: var(--line-2); text-decoration: none; }
.mw-row.is-late { border-left-color: var(--orange-600); }

.mw-level {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-4); width: 54px; flex-shrink: 0;
}
.mw-title { font-size: 14px; font-weight: 500; }

.mw-due {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
}
.mw-due.is-soon { color: var(--amber-600); }
.mw-due.is-late { color: var(--orange-600); font-weight: 600; }

.mw-clear {
  display: flex; align-items: center; gap: 9px;
  padding: 22px 20px; color: var(--ink-3); font-size: 14px;
}
.mw-clear .ico { color: var(--green-600); opacity: .7; }

/* ---------- Home: two-column widget row ---------- */

.home-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; align-items: start; margin-bottom: 20px;
}
@media (max-width: 1000px) { .home-cols { grid-template-columns: 1fr; } }

/* Truncate to two lines. The full text is one click away rather than gone. */
.clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-cols .rw-item { padding: 12px 16px; }
.home-cols .rw-title { font-size: 13.5px; }
.home-cols .rw-dek { font-size: 13px; margin-bottom: 4px; }
.home-cols .rw-body { font-size: 13px; }
.home-cols .card-hd { padding: 11px 16px; }

.rw-more-d > summary {
  list-style: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--blue-600);
  padding: 2px 0;
}
.rw-more-d > summary::-webkit-details-marker { display: none; }
.rw-more-d > summary::after { content: "\2026"; margin-left: 3px; letter-spacing: 1px; }
.rw-more-d[open] > summary::after { content: ""; }
.rw-more-d[open] > summary { color: var(--ink-3); }
.rw-more-d > summary:hover { text-decoration: underline; }

/* Compact My work rows */
.mw-row.is-compact { padding: 9px 16px; gap: 8px; align-items: flex-start; }
.mw-body { flex: 1; min-width: 0; }
.mw-row.is-compact .mw-title { font-size: 13.5px; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mw-sub { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.mw-row.is-compact .badge { flex-shrink: 0; margin-top: 1px; }

/* Granted project view: the viewer's own items are picked out. */
.gt-note { display: flex; align-items: flex-start; gap: 10px;
           font-size: 13px; color: var(--ink-2); }
.gt-note .ico { color: var(--blue-600); flex-shrink: 0; margin-top: 2px; }
.tks.is-mine { background: var(--blue-50); }
.tks.is-mine:hover { background: var(--blue-100); }
.tks.is-mine .tks-title { font-weight: 600; color: var(--ink); }

/* Assignee type-ahead in the compact add rows keeps the quiet treatment. */
.tks-add input[name=assignee], .tkg-newtask input[name=assignee] { width: 190px; }

/* ---------- Section project rollup ---------- */

.sr-strip {
  display: flex; gap: 26px; padding: 14px 20px;
  border-bottom: 1px solid var(--line); background: var(--canvas);
}
.sr-stat { display: flex; flex-direction: column; }
.sr-num { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.sr-num.is-bad  { color: var(--red-600); }
.sr-num.is-warn { color: var(--orange-600); }
.sr-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}

.sr-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 20px; border-bottom: 1px solid var(--line-2); color: inherit;
}
.sr-row:last-child { border-bottom: none; }
.sr-row:hover { background: var(--canvas); text-decoration: none; }
.sr-row .grow { flex: 1; min-width: 0; }
.sr-row .name { display: block; font-weight: 600; font-size: 13.5px; }
.sr-row .sub  { display: block; font-size: 12px; color: var(--ink-3); }

.sr-more { padding: 10px 20px; border-top: 1px solid var(--line-2); font-size: 12.5px; }

/* Per-project stats replace the section-wide strip. */
.sr-strip { display: none; }

.sr-stats { display: flex; gap: 14px; margin-top: 2px; }
.sr-s {
  font-size: 12px; color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sr-s b { font-weight: 700; color: var(--ink-2); font-size: 12.5px; }
.sr-s.is-bad, .sr-s.is-bad b { color: var(--red-600); }
.sr-s.is-warn, .sr-s.is-warn b { color: var(--orange-600); }

/* A zero count still reports, but recedes: present without competing for
   attention with the counts that carry a number worth acting on. */
.sr-s.is-nil, .sr-s.is-nil b { color: var(--ink-4); font-weight: 500; }

/* Drive attachments: detach sits inside the chip, revealed on hover. */
.tk-linkwrap { display: inline-flex; align-items: stretch; }
.tk-linkwrap .tk-link { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: none; }
.tk-linkwrap form { display: flex; }
.tk-detach {
  border: 1px solid var(--line); border-left: none;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface); color: var(--ink-4);
  cursor: pointer; padding: 0 7px; font-size: 14px; line-height: 1;
}
.tk-detach:hover { background: var(--red-100); color: var(--red-600); border-color: var(--red-100); }

/* File input in the edit panel */
.tk-panel input[type=file] {
  width: 100%; font-size: 12.5px; padding: 6px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: var(--canvas); cursor: pointer;
}
.tk-panel input[type=file]:hover { border-color: var(--blue-500); }

/* Group badges take the accent of the department they grant, so a badge and
   that department's tile below read as the same thing. */
.badge.grp {
  background: var(--a-bg, var(--blue-50));
  color: var(--a, var(--blue-600));
  border: 1px solid var(--a-br, var(--blue-100));
}
.badge.grp.is-admin {
  background: var(--red-100); color: var(--red-600);
  border-color: var(--red-600); font-weight: 800;
}

/* ---------- Landing page ---------- */
/* Standalone: no nav, no user. The navy carries the brand, the card carries
   the one action. */

body.lp {
  background:
    radial-gradient(1100px 520px at 50% -12%, #1b3670 0%, transparent 62%),
    var(--navy-900);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.lp-wrap { width: 100%; max-width: 480px; }

.lp-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 34px 34px 26px;
  box-shadow: 0 18px 50px rgba(6, 15, 38, .40), 0 2px 6px rgba(6, 15, 38, .22);
}

.lp-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.lp-brand img { height: 38px; width: auto; }
.lp-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.lp-sub {
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}

.lp-h1 { font-size: 27px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 8px; }
.lp-lede { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; margin: 0 0 24px; }

/* The single action on the page. */
.lp-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 13px 18px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.lp-btn:hover {
  text-decoration: none; border-color: var(--blue-500);
  box-shadow: 0 3px 10px rgba(37, 99, 235, .16); transform: translateY(-1px);
}
.lp-btn:active { transform: none; }

.lp-note {
  font-size: 12.5px; color: var(--ink-3); text-align: center;
  margin: 12px 0 0; line-height: 1.5;
}
.lp-note strong { color: var(--ink-2); font-weight: 600; }

.lp-feats {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 15px;
}
.lp-feat { display: flex; align-items: flex-start; gap: 12px; }
.lp-feat strong { display: block; font-size: 13.5px; margin-bottom: 1px; }
.lp-feat span { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

.lp-foot {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-3); text-align: center;
}

.lp-tag {
  text-align: center; margin-top: 18px;
  font-size: 12px; color: rgba(255, 255, 255, .45); letter-spacing: .02em;
}

@media (max-width: 420px) {
  .lp-card { padding: 26px 22px 20px; }
  .lp-h1 { font-size: 23px; }
}

/* Denied page: reuses the landing card, with a mark that signals a stop
   without being alarming. Being refused is usually an administrative gap,
   not a mistake the person made. */
.dn-mark {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--amber-100); color: var(--amber-600);
  display: grid; place-items: center; margin-bottom: 18px;
}
.lp-btn .ico { color: var(--ink-3); }

/* ---------- Document library ---------- */

.lb-path {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  margin-bottom: 12px; font-size: 13.5px;
}
.lb-path a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.lb-path a:hover { color: var(--blue-600); text-decoration: none; }
.lb-path .ico { width: 15px; height: 15px; opacity: .6; }
.lb-sep { color: var(--ink-4); padding: 0 6px; }
.lb-here { font-weight: 600; }

.lb-name { display: inline-flex; align-items: center; gap: 9px; color: inherit; font-size: 14px; }
.lb-name:hover { color: var(--blue-600); text-decoration: none; }
.lb-ico { width: 17px; height: 17px; color: var(--ink-3); flex-shrink: 0; }
.lb-ico.is-folder { color: var(--blue-500); }
.lb-ext { width: 12px; height: 12px; opacity: .35; }

table.lb tbody td { padding: 9px 16px; }

.lb-actions { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.lb-actions form { display: flex; gap: 8px; align-items: center; }
.lb-actions input[type=file] {
  font-size: 12.5px; padding: 6px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: var(--canvas); cursor: pointer; width: 260px;
}
.lb-actions input[name=name] { width: 200px; }

/* Accent palette, extended to 20. Each is distinguishable from every other at
   the size these actually render: an 8px dot and a 3px rail. */
.a-cyan     { --a: #0891b2; --a-bg: #ecfeff; --a-br: #a5f3fc; }
.a-sky      { --a: #0284c7; --a-bg: #f0f9ff; --a-br: #bae6fd; }
.a-emerald  { --a: #059669; --a-bg: #ecfdf5; --a-br: #a7f3d0; }
.a-lime     { --a: #65a30d; --a-bg: #f7fee7; --a-br: #d9f99d; }
.a-amber    { --a: #d97706; --a-bg: #fffbeb; --a-br: #fde68a; }
.a-rose     { --a: #e11d48; --a-bg: #fff1f2; --a-br: #fecdd3; }
.a-pink     { --a: #db2777; --a-bg: #fdf2f8; --a-br: #fbcfe8; }
.a-fuchsia  { --a: #c026d3; --a-bg: #fdf4ff; --a-br: #f5d0fe; }
.a-violet   { --a: #6d28d9; --a-bg: #f5f3ff; --a-br: #ddd6fe; }
.a-brown    { --a: #92400e; --a-bg: #fef3e2; --a-br: #fcd9a5; }
.a-olive    { --a: #4d7c0f; --a-bg: #f4f9e8; --a-br: #cbe58f; }
.a-steel    { --a: #0f766e; --a-bg: #f0fdfa; --a-br: #99f6e4; }

/* Compact document rows on a department page. */
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; border-bottom: 1px solid var(--line-2); color: inherit;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--canvas); text-decoration: none; }
.lb-row .grow { flex: 1; min-width: 0; }
.lb-row .name { font-size: 13.5px; }