/* NSOffice Global Analytics dashboard - layout on top of tokens.css */

/* ---------- Shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-md);
  padding: 10px var(--space-lg);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.topbar .brand { display: flex; align-items: center; gap: var(--space-sm); }
.topbar .brand .mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--blue);
  display: grid; place-items: center; color: #fff;
}
.topbar .brand b { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.topbar .brand small { display: block; margin-top: -2px; }
.topbar .spacer { flex: 1; }
.freshness { display: inline-flex; align-items: center; gap: 6px; font: var(--text-caption); color: var(--slate); }
.freshness .dot { width: 8px; height: 8px; border-radius: 50%; background: #0B7A3E; }
.freshness .dot.stale { background: #B65C0A; }

.role-switch {
  display: inline-flex; border-radius: var(--radius-pill);
  background: var(--bg-alt); padding: 3px; border: 1px solid var(--line);
}
.role-switch button {
  border: none; cursor: pointer; background: transparent; color: var(--ink);
  font: var(--text-medium); font-weight: 700; padding: 8px 18px; min-height: 38px;
  border-radius: var(--radius-pill); transition: background var(--t-fast), color var(--t-fast);
}
.role-switch button.on { background: #fff; color: var(--blue); box-shadow: var(--shadow-card); }

/* ---------- Hero band: aurora + glass KPI tiles ---------- */
.hero-band { position: relative; overflow: hidden; padding: var(--space-xl) var(--space-lg); }
.hero-band .inner { position: relative; z-index: 1; max-width: var(--page-max); margin: 0 auto; }
.hero-band h1 { font: var(--text-title); font-size: 28px; letter-spacing: -0.01em; }
.hero-band .sub { margin-top: var(--space-xs); color: var(--slate); font: var(--text-medium); }

.kpis {
  display: grid; gap: var(--space-md); margin-top: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
@media (min-width: 981px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .kpis { grid-template-columns: repeat(6, 1fr); } }
.tile { padding: var(--space-lg); min-height: 118px; }
.tile .label { font: var(--text-caption); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); opacity: 0.62; }
.tile .value { font-weight: 800; font-size: 34px; line-height: 1.1; margin-top: var(--space-sm);
  letter-spacing: -0.01em; }
.tile .delta { margin-top: var(--space-xs); font: var(--text-caption); color: var(--ink); opacity: 0.72; }
/* the period a headline number covers; always occupies its line so the
   numbers across the KPI row share one baseline */
.tile .label-note { font: var(--text-caption); color: var(--ink); opacity: 0.5;
  min-height: 1.15em; margin-top: 2px; white-space: nowrap; }
.tile .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Main grid ---------- */
.main { max-width: var(--page-max); margin: 0 auto; padding: var(--space-lg) var(--space-lg) var(--space-2xl); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg); }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
@media (max-width: 980px) { .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; } }

.chart-card h3 { display: flex; align-items: baseline; gap: var(--space-sm); }
.info-i { font-size: 17px; color: var(--slate); cursor: help; align-self: center; transition: color var(--t-fast); }
.info-i:hover, .info-i:focus { color: var(--blue); outline: none; }
.chart-card .hint { font: var(--text-caption); color: var(--slate); margin-top: 2px; }
.chart-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.chart-body { margin-top: var(--space-md); position: relative; }
.chart-body.loading { opacity: 0.45; transition: opacity var(--t-med); }
svg text { font-family: var(--font); }

.table-toggle {
  border: none; background: transparent; cursor: pointer; color: var(--slate);
  width: 44px; height: 44px; margin: -8px -8px 0 0; border-radius: 50%;
  display: grid; place-items: center; transition: background var(--t-fast), color var(--t-fast);
}
.table-toggle:hover { background: var(--bg-alt); color: var(--blue); }

/* chart table twins */
.twin-table { width: 100%; border-collapse: collapse; font: var(--text-medium); }
.twin-table th { text-align: left; font: var(--text-caption); font-weight: 700; color: var(--slate);
  padding: 8px 12px; border-bottom: 1px solid var(--line); }
.twin-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.twin-table td.num, .twin-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Tooltip ---------- */
/* Above the drill-down modal (z-index 100): the charts inside a customer's
   panel have tooltips too, and at 90 they were drawn behind the modal - the
   hover worked, you just could not see what it said. Safe to put on top
   because the tip never takes pointer events. */
.viz-tip {
  position: fixed; z-index: 200; pointer-events: none; opacity: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float); padding: 10px 14px; max-width: 300px;
  transition: opacity 0.12s var(--ease);
}
.viz-tip.on { opacity: 1; }
.viz-tip .t-title { font: var(--text-caption); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.viz-tip .t-row { display: flex; align-items: center; gap: 8px; font: var(--text-caption); color: var(--slate); }
.viz-tip .t-row b { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.viz-tip .t-key { width: 10px; height: 3px; border-radius: 2px; flex: none; }

/* ---------- Renewals ---------- */
.renewals { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.renewal {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 16px; min-height: 44px; font: var(--text-medium); background: #fff;
  cursor: pointer; transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.renewal:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.renewal .due { font: var(--text-caption); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
.due.warn { background: #FDF1E3; color: #8A4507; }
.due.serious { background: #FCE9E9; color: #96201F; }
.due.ok { background: var(--bg-alt); color: var(--ink); }

/* ---------- Companies table ---------- */
.co-table-wrap { overflow-x: auto; margin-top: var(--space-md); }
.co-table { width: 100%; border-collapse: collapse; font: var(--text-medium); white-space: nowrap; }
.co-table th {
  text-align: left; font: var(--text-caption); font-weight: 700; color: var(--slate);
  padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none;
  position: sticky; top: 0; background: #fff;
}
.co-table th.num { text-align: right; }
.co-table th .arrow { font-size: 10px; opacity: 0.7; }
.co-table th.group-label {
  text-align: center; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px;
  color: var(--slate); background: var(--bg-alt); cursor: default;
}
.co-table th.group-end, .co-table td.group-end { border-right: 1px solid var(--line); }
.co-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.co-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.co-table tbody tr { cursor: pointer; transition: background var(--t-fast); }
.co-table tbody tr:hover { background: var(--bg-alt); }
.co-name { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.co-avatar { width: 30px; height: 30px; border-radius: 9px; background: var(--lavender);
  color: var(--blue); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: var(--text-caption); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill); }
.pill .p-dot { width: 7px; height: 7px; border-radius: 50%; }
.pill.active { background: #E7F5EC; color: #0B5C30; } .pill.active .p-dot { background: #0B7A3E; }
.pill.inactive { background: var(--bg-alt); color: var(--ink); } .pill.inactive .p-dot { background: var(--slate); }
.pill.paid { background: var(--blue-soft); color: var(--blue); }
.pill.trial { background: #FDF1E3; color: #8A4507; }
.pill.lapsed { background: var(--bg-alt); color: var(--ink); }

.searchbar {
  display: flex; align-items: center; gap: var(--space-sm);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 6px 8px 6px 18px; background: #fff; width: min(420px, 100%);
}
.searchbar input { flex: 1; border: none; outline: none; background: transparent;
  font: var(--text-medium); color: var(--ink); min-width: 0; }
.searchbar input::placeholder { color: var(--slate); }
.searchbar .material-symbols-rounded { color: var(--slate); font-size: 20px; }
.filters-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.seg { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 3px; }
.seg button { border: none; background: transparent; cursor: pointer; font: var(--text-medium); font-weight: 700;
  color: var(--slate); padding: 7px 16px; min-height: 36px; border-radius: var(--radius-pill);
  transition: background var(--t-fast), color var(--t-fast); }
.seg button.on { background: #fff; color: var(--blue); box-shadow: var(--shadow-card); }

/* ---------- Meters (seat adoption) ---------- */
.meter-row { display: grid; grid-template-columns: 170px 1fr 110px; gap: var(--space-md);
  align-items: center; padding: 7px 0; }
.meter-row .m-name { font: var(--text-medium); font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.meter { height: 10px; border-radius: 6px; background: var(--blue-soft); position: relative; overflow: hidden; }
.meter .fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: #2B2BFF; }
.meter .fill.over { background: #B65C0A; }
.meter-row .m-val { font: var(--text-caption); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Drill-down modal ---------- */
.modal-veil { position: fixed; inset: 0; z-index: 100; background: rgba(20, 24, 33, 0.45);
  backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 5vh var(--space-md); }
.modal-veil.on { display: flex; }
.modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
  width: min(880px, 100%); padding: var(--space-xl); animation: fadeUp 0.3s var(--ease) both; }
.modal .m-head { display: flex; align-items: flex-start; gap: var(--space-md); }
.modal .m-head .co-avatar { width: 48px; height: 48px; border-radius: 14px; font-size: 17px; }
.modal .m-close { margin-left: auto; border: none; background: var(--bg-alt); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  transition: background var(--t-fast); }
.modal .m-close:hover { background: var(--blue-soft); color: var(--blue); }
.modal .m-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md); margin-top: var(--space-lg); }
.modal .m-kpi { background: var(--bg-alt); border-radius: var(--radius-md); padding: var(--space-md); }
.modal .m-kpi .label { font: var(--text-caption); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--slate); }
.modal .m-kpi .value { font-weight: 800; font-size: 22px; margin-top: 4px; }
.modal h4 { font: var(--text-heading); font-size: 17px; margin-top: var(--space-xl); }
.modal .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm) var(--space-lg); margin-top: var(--space-md); }
.modal .fact { font: var(--text-medium); }
.modal .fact b { display: block; font: var(--text-caption); font-weight: 700; color: var(--slate);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.bee-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.bee-tag { font: var(--text-caption); font-weight: 500; background: var(--lavender); color: var(--ink);
  border-radius: var(--radius-pill); padding: 5px 12px; }

/* ---------- Admin panel ---------- */
.admin-panel { display: none; }
.admin-panel.on { display: block; }
.admin-card { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.admin-card .icon-chip { flex: none; }
.admin-card .grow { flex: 1; min-width: 240px; }
.admin-status { font: var(--text-caption); color: var(--slate); margin-top: 4px; }
.admin-status.err { color: #96201F; }
.admin-status.ok { color: #0B5C30; }
.progress { height: 8px; border-radius: 5px; background: var(--blue-soft); overflow: hidden; margin: var(--space-md) 0 4px; }
.progress-fill { height: 100%; width: 0; border-radius: 5px; background: var(--blue); transition: width 0.25s var(--ease); }
.btn .spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%; animation: rot 0.8s linear infinite; }
.btn.busy .spin { display: inline-block; }
@keyframes rot { to { transform: rotate(360deg); } }

.footer { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-lg) var(--space-xl);
  color: var(--slate); font: var(--text-caption); }

/* ---------- Admin: forms, upload, settings ---------- */
.upload-row { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; }
.finops-form { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-sm);
  margin-top: var(--space-md); align-items: center; }
.finops-form input[type="text"]:first-child { grid-column: span 2; }
.finops-form input, .settings-row input {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px;
  font: var(--text-medium); color: var(--ink); min-height: 44px; background: #fff; outline: none;
  transition: border-color var(--t-fast); width: 100%;
}
.finops-form input:focus, .settings-row input:focus { border-color: var(--blue); }
.settings-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.settings-row label { display: inline-flex; align-items: center; gap: 8px; font: var(--text-caption);
  font-weight: 700; color: var(--slate); white-space: nowrap; }
.settings-row input { width: 84px; min-height: 40px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.admin-item { display: flex; align-items: center; gap: var(--space-md); padding: 8px 0;
  border-bottom: 1px solid var(--line); font: var(--text-medium); }
.admin-item:last-child { border-bottom: none; }
.admin-item .grow2 { flex: 1; min-width: 0; }
.admin-item small { display: block; }
.admin-item .del { border: none; background: transparent; cursor: pointer; color: var(--slate);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  transition: background var(--t-fast), color var(--t-fast); }
.admin-item .del:hover { background: #FCE9E9; color: #96201F; }

/* ---------- Admin: company data editor ---------- */
.editor-toolbar { display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap; margin-top: var(--space-md); }
.editor-toolbar .admin-status { margin-top: 0; }
.manual-form { display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap; margin-top: var(--space-md); }
.manual-form input {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px;
  font: var(--text-medium); color: var(--ink); min-height: 40px; background: #fff;
  outline: none; transition: border-color var(--t-fast);
}
.manual-form input:focus { border-color: var(--blue); }
.manual-form input#man-name { flex: 1; min-width: 200px; }
.manual-form input[type="number"] { width: 110px; font-variant-numeric: tabular-nums; }
.manual-form input[type="month"] { width: 150px; }

.editor-wrap { overflow-x: auto; margin-top: var(--space-md); }
.editor-table { border-collapse: separate; border-spacing: 0; font: var(--text-medium); }
.editor-table th {
  text-align: left; font: var(--text-caption); font-weight: 700; color: var(--slate);
  padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.editor-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.editor-table .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
.editor-table th.sticky-col { z-index: 3; }
.editor-table tr:hover .sticky-col { background: var(--bg-alt); }
.editor-table input {
  width: 118px; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 7px 9px; font: var(--text-medium); color: var(--ink); background: var(--bg-alt);
  outline: none; transition: border-color var(--t-fast), background var(--t-fast);
  font-variant-numeric: tabular-nums;
}
.editor-table td:first-child input { width: 180px; font-weight: 700; }
.editor-table input.f-revenue { width: 150px; }   /* company revenue runs to 10 digits */
.editor-table input.f-notes { width: 200px; }
.editor-table input:hover:not(:disabled) { border-color: var(--line); }
.editor-table input:focus { border-color: var(--blue); background: #fff; }
.editor-table input::placeholder { color: var(--slate); font-weight: 400; }
.editor-table input.set { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.editor-table input.bad { border-color: #96201F; background: #FCE9E9; }
/* under a hand-typed headcount: the figure from the import it stands in for */
.editor-table .cell-note { display: block; margin-top: 2px; font: var(--text-caption);
  color: var(--slate); white-space: nowrap; }
.editor-table input.live, .editor-table input:disabled {
  background: transparent; color: var(--slate); cursor: not-allowed; border-color: transparent;
}
.editor-table .charges-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 150px; border: 1px dashed var(--line); background: transparent;
  border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer;
  font: var(--text-medium); color: var(--slate); text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.editor-table .charges-btn:hover { border-color: var(--blue); color: var(--blue); }
.editor-table .charges-btn.set { border-style: solid; background: var(--blue-soft);
  color: var(--blue); font-weight: 700; }
.editor-table .charges-btn small { font: var(--text-caption); color: var(--slate); font-weight: 400; }
.editor-table .charges-btn .material-symbols-rounded { font-size: 18px; }

.editor-table .derived-cell { min-width: 96px; padding: 7px 9px; font-variant-numeric: tabular-nums;
  color: var(--slate); }
.editor-table .derived-cell.set { color: var(--violet, #8A38F5); font-weight: 700; }
/* more active users than onboarded: the two typed figures disagree */
.editor-table .derived-cell.over { color: #96201F; }

.charge-list { display: grid; gap: var(--space-sm); margin: var(--space-md) 0; }
.charge-row { display: flex; align-items: center; gap: var(--space-sm); }
.charge-row input {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px;
  font: var(--text-medium); color: var(--ink); min-height: 42px; background: #fff;
  outline: none; font-variant-numeric: tabular-nums;
}
.charge-row input:focus { border-color: var(--blue); }
.charge-row input[type="number"] { width: 140px; }
.charge-row .charge-nu { flex: 1; font: var(--text-caption); color: var(--slate); }
.charge-row .del { border: none; background: transparent; cursor: pointer; color: var(--slate);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.charge-row .del:hover { background: #FCE9E9; color: #96201F; }
.btn-small { min-height: 38px; padding: 6px 16px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { transform: none; filter: none; }

.bulk-panel { margin-top: var(--space-lg); border-top: 1px solid var(--line); padding-top: var(--space-md); }
.bulk-panel summary { cursor: pointer; font: var(--text-medium); font-weight: 700; color: var(--blue); }
.bulk-panel textarea {
  width: 100%; margin-top: var(--space-sm); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 14px; font: var(--text-medium);
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12px;
  color: var(--ink); background: #fff; outline: none; resize: vertical;
}
.bulk-panel textarea:focus { border-color: var(--blue); }
#bulk-result .co-table { white-space: normal; }
#bulk-result tbody tr { cursor: default; }

.editor-table .act-cell { display: flex; gap: 2px; }
.editor-table .del { border: none; background: transparent; cursor: pointer; color: var(--slate);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  transition: background var(--t-fast), color var(--t-fast); }
.editor-table .del:hover:not(:disabled) { background: var(--bg-alt); color: var(--ink); }
.editor-table .del:disabled { opacity: 0.3; cursor: default; }
.editor-table .del.danger:hover:not(:disabled) { background: #FCE9E9; color: #96201F; }
/* Enable/Disable toggle and its "Disabled" tag - shared by the company data
   editor's rows and the Sonny/FinOps admin lists, so any row showing one of
   these knows it's the same state and the same fix (click to re-enable). */
.del.is-off { color: var(--amber, #B65C0A); }
.disabled-tag { font: var(--text-caption); color: var(--amber, #B65C0A);
  border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px; margin-left: 6px; white-space: nowrap; }
/* a deleted row is hidden, not merely quiet: say so in the colour too */
.disabled-tag.danger { color: #96201F; }
/* a disabled row is still fully editable, just visibly out of the CEO view */
.editor-table tr.row-disabled { opacity: 0.55; }
.editor-table tr.row-disabled .sticky-col { opacity: 1; }
.cell-sub { display: block; font: var(--text-caption); color: var(--slate); }
.co-table td.manual { position: relative; }
.co-table td.manual::after { content: ''; position: absolute; top: 8px; right: 4px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: 0.55; }

/* ---------- Source / plan pills for imported data ---------- */
.pill.think { background: var(--blue-soft); color: var(--blue); }
.pill.sonny { background: #F1E8FE; color: #5B21A8; }
.pill.finops { background: #E3F2EF; color: #0B5C4D; }

/* ---------- Think / Know / Do ---------- */
.tkd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md); margin-top: var(--space-md); }
.tkd-stats.tiers { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--space-sm); }
.tkd-stats.tiers .tkd-stat { padding: var(--space-sm) var(--space-md); }
.tkd-stat { background: var(--bg-alt); border-radius: var(--radius-md); padding: var(--space-md); }
.tkd-stat .label { display: inline-flex; align-items: center; gap: 8px; font: var(--text-caption);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
.tkd-stat .label .key { width: 10px; height: 10px; border-radius: 3px; }
.tkd-stat .value { font-weight: 800; font-size: 24px; margin-top: 4px; }
.tkd-stat .sub { font: var(--text-caption); color: var(--slate); }
.tkd-stat .tier-mom { font-weight: 800; }
.tkd-stat .tier-mom.up { color: #0B7A3E; } .tkd-stat .tier-mom.down { color: #96201F; } .tkd-stat .tier-mom.flat { color: var(--slate); }
.tkd-mini { display: flex; width: 84px; height: 8px; border-radius: 5px; overflow: hidden; gap: 2px; }
.tkd-mini span { height: 100%; }

/* ---------- Value-delivered banner ---------- */
.value-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg); align-items: stretch; padding: var(--space-lg) var(--space-xl); }
.value-cell { display: flex; flex-direction: column; gap: 4px; position: relative; }
.value-cell + .value-cell::before { content: ''; position: absolute; left: calc(var(--space-lg) * -0.5);
  top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.value-cell .vlabel { font: var(--text-caption); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--slate); }
.value-cell .vnum { font-weight: 800; font-size: 30px; line-height: 1.05; letter-spacing: -0.01em; }
.value-cell .vnum.accent { color: var(--blue); }
.value-cell .vnum.good { color: #0B7A3E; }
.value-cell .vsub { font: var(--text-caption); color: var(--slate); }
.value-cell .mom-banner { display: inline-flex; align-items: center; gap: 4px; font: var(--text-caption);
  font-weight: 800; font-variant-numeric: tabular-nums; }
.value-cell .mom-banner .material-symbols-rounded { font-size: 15px; }
.mom-banner.up { color: #0B7A3E; } .mom-banner.down { color: #96201F; } .mom-banner.flat { color: var(--slate); }
.mod-stack { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.mod-row { display: flex; align-items: center; gap: 7px; font: var(--text-caption); }
.mod-key { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.mod-rank { width: 16px; height: 16px; border-radius: 5px; background: var(--blue-soft); color: var(--blue);
  font-size: 10px; font-weight: 800; display: grid; place-items: center; flex: none; }
.mod-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.mod-num { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mod-mom { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.mod-mom.up { color: #0B7A3E; } .mod-mom.down { color: #96201F; } .mod-mom.flat { color: var(--slate); }

/* ---------- Small segmented toggle (in card head) ---------- */
.seg.small button { padding: 5px 12px; min-height: 30px; font-size: 12px; }
.head-controls { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Scrollable chip rail (a toggle with too many options for one
   row - the growth metric picker). One horizontal strip, not a wrapped pill:
   drag, wheel or arrow-key through it, with a soft fade at each edge that
   only shows while there is more to scroll to on that side. ---------- */
.chip-rail { position: relative; margin-top: var(--space-md); }
.chip-rail::before, .chip-rail::after {
  content: ''; position: absolute; top: 0; bottom: 10px; width: 32px; z-index: 1;
  pointer-events: none; opacity: 0; transition: opacity var(--t-fast);
}
.chip-rail::before { left: 0; background: linear-gradient(90deg, var(--bg), rgba(255, 255, 255, 0)); }
.chip-rail::after { right: 0; background: linear-gradient(270deg, var(--bg), rgba(255, 255, 255, 0)); }
.chip-rail.scroll-start::before, .chip-rail.scroll-end::after { opacity: 1; }
.chip-scroll {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 10px; margin-bottom: -10px;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--slate) transparent;
}
.chip-scroll::-webkit-scrollbar { height: 6px; }
.chip-scroll::-webkit-scrollbar-track { background: transparent; }
.chip-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-pill); }
.chip-scroll::-webkit-scrollbar-thumb:hover { background: var(--slate); }
.chip {
  flex: none; scroll-snap-align: start; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg-alt);
  color: var(--ink); opacity: 0.68; font: var(--text-medium); font-weight: 700;
  padding: 7px 16px; min-height: 34px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.chip:hover:not(.on) { background: #fff; opacity: 1; border-color: var(--slate); }
.chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; opacity: 1; }
.org-view { border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff;
  font: var(--text-caption); font-weight: 700; color: var(--ink); padding: 6px 12px; min-height: 30px;
  cursor: pointer; outline: none; max-width: 180px; }
.org-view:focus { border-color: var(--blue); }

/* ---------- Wider content shell (less left/right gap) ---------- */
.hero-band .inner, .main { max-width: 1400px; }

/* ---------- KPI delta chip (visible number, replaces sparkline) ---------- */
.tile .delta-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font: var(--text-caption); font-weight: 800; padding: 4px 11px; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums; }
.tile .delta-chip .material-symbols-rounded { font-size: 15px; }
.delta-chip.up { background: #E7F5EC; color: #0B5C30; }
.delta-chip.down { background: #FCE9E9; color: #96201F; }
.delta-chip.flat { background: var(--blue-soft); color: var(--blue); }
/* plain (non-shaded) month-on-month line */
.tile .mom { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font: var(--text-caption); font-weight: 800; font-variant-numeric: tabular-nums; }
.tile .mom .material-symbols-rounded { font-size: 15px; }
.tile .mom.up { color: #0B7A3E; }
.tile .mom.down { color: #96201F; }
.tile .mom.flat { color: var(--slate); }

/* ---------- Insights ---------- */
.insight-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.insight { display: flex; align-items: center; gap: var(--space-md); padding: 10px 0; border-bottom: 1px solid var(--line); }
.insight:last-child { border-bottom: none; }
.insight .ins-chip { width: 40px; height: 40px; border-radius: 12px; background: var(--lavender); color: var(--blue);
  display: grid; place-items: center; flex: none; }
.insight .ins-body { min-width: 0; }
.insight .ins-val { font-weight: 800; font-size: 17px; line-height: 1.15; }
.insight .ins-lab { font: var(--text-caption); color: var(--slate); }

/* ---------- Modal: richer detail ---------- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-lg); }
@media (max-width: 720px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-block h4 { font: var(--text-heading); font-size: 16px; margin-bottom: var(--space-sm); margin-top: 0; }
.mini-bars { display: flex; flex-direction: column; gap: 7px; }
.mini-bar-row { display: grid; grid-template-columns: 130px 1fr 58px; gap: var(--space-sm); align-items: center; }
.mini-bar-row .mb-name { font: var(--text-caption); font-weight: 600; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mini-bar-row .mb-track { height: 8px; border-radius: 5px; background: var(--bg-alt); overflow: hidden; }
.mini-bar-row .mb-fill { height: 100%; border-radius: 5px; }
.mini-bar-row .mb-val { font: var(--text-caption); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-sm); margin-top: var(--space-sm); }
.item-cell { background: var(--bg-alt); border-radius: var(--radius-sm); padding: 10px 12px; }
.item-cell .ic-num { font-weight: 800; font-size: 20px; }
.item-cell .ic-lab { font: var(--text-caption); color: var(--slate); }
.detail-full { grid-column: 1 / -1; }
.chip-legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm); }
.chip-legend span { display: inline-flex; align-items: center; gap: 6px; font: var(--text-caption); color: var(--ink); }
.chip-legend .k { width: 10px; height: 10px; border-radius: 3px; }

/* status of an organisation on the platform, as the monthly export reports it */
.status-pill { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font: var(--text-caption); font-weight: 800; letter-spacing: 0.02em;
  background: rgba(100, 116, 139, 0.14); color: var(--slate); }
.status-pill.good { background: rgba(11, 122, 62, 0.13); color: #0B7A3E; }
.status-pill.warn { background: rgba(182, 92, 10, 0.14); color: #B65C0A; }
.status-pill.bad { background: rgba(150, 32, 31, 0.13); color: #96201F; }
.co-table tr.clickable { cursor: pointer; }
.co-table tr.total-row td { font-weight: 800; border-top: 2px solid var(--line); }

/* A FinOps case, month by month: folded away until wanted, because a case
   running since last year has a lot of months and only a few need touching. */
.finops-months { margin-top: 6px; }
.finops-months > summary { display: flex; align-items: center; gap: 6px; cursor: pointer;
  font: var(--text-caption); color: var(--slate); padding: 4px 0; list-style: none; }
.finops-months > summary::-webkit-details-marker { display: none; }
.finops-months > summary:hover { color: var(--blue); }
.finops-months > summary .material-symbols-rounded { font-size: 17px; }
.finops-month-list { margin: 4px 0 6px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.finops-month { display: flex; align-items: center; gap: var(--space-sm);
  padding: 5px 10px; border-bottom: 1px solid var(--line); }
.finops-month:last-child { border-bottom: none; }
.finops-month .m-name { flex: 1; font: var(--text-caption); white-space: nowrap; }
.finops-month .m-now { margin-left: 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--blue); }
.finops-month input { width: 110px; min-height: 30px; padding: 3px 8px; text-align: right;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font: var(--text-medium);
  font-variant-numeric: tabular-nums; }
.finops-month input.set { border-color: var(--blue); font-weight: 700; }
.finops-month input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.finops-month .m-nu { width: 96px; text-align: right; font: var(--text-caption);
  color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Key insights, by severity. The chip carries the colour rather than the whole
   row: eight tinted rows in a column reads as decoration, one red chip in a
   list reads as something to look at. */
.insight.sev-critical .ins-chip { background: #FCE9E9; color: #96201F; }
.insight.sev-watch .ins-chip { background: #FDF1E3; color: #8A4507; }
.insight.sev-good .ins-chip { background: #E7F4EC; color: #0B7A3E; }
.insight .ins-val { font-size: 15px; }
.insight .ins-lab { margin-top: 2px; }