/* Shared styles for the dashboard demos. Tokens match the main site (index.html). */
:root{
  --bg:#F6F8F7;
  --ink:#1C1D1B;
  --muted:#55534D;
  --faint:#77746C;
  --accent:#1F7A55;
  --accent-tint:#A8D5BC;
  --accent-wash:#DDF0E5;
  --hairline:#E1E0D9;
  --grid:#ECEBE6;
  --card:#FFFFFF;
  /* status palette (dataviz skill): always paired with a text label */
  --good:#0ca30c;
  --warning:#fab219;
  --serious:#ec835a;
  --critical:#d03b3b;
  color-scheme:light;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Figtree',system-ui,sans-serif;line-height:1.5;
}
a{color:var(--accent);}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip-link{position:absolute;left:12px;top:-100px;z-index:20;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:4px;text-decoration:none;font-weight:600;}
.skip-link:focus{top:12px;}
.num{font-variant-numeric:tabular-nums;}

/* ---------- page shell ---------- */
.dash-top{background:#FFFFFF;border-bottom:1px solid var(--hairline);}
.dash-top .inner{
  max-width:1120px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.back{font-size:.92rem;text-decoration:none;color:var(--ink);font-weight:600;}
.back:hover{color:var(--accent);}
.switch{display:flex;gap:4px;background:#F1F4F2;border-radius:999px;padding:4px;}
.switch a{padding:6px 14px;border-radius:999px;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--ink);}
.switch a[aria-current="page"]{background:var(--accent);color:#FFFFFF;}
.demo-flag{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}

main{max-width:1120px;margin:0 auto;padding:32px 20px 64px;}
main:focus{outline:none;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;}
h1{font-family:'Gabarito',sans-serif;font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin:0 0 10px;}
h2{font-family:'Gabarito',sans-serif;font-weight:600;font-size:1.1rem;margin:0 0 12px;}
h3{font-family:'Gabarito',sans-serif;font-weight:600;font-size:.98rem;margin:0;}
.intro{max-width:70ch;color:var(--muted);margin:0 0 6px;}
.asof{font-size:.85rem;color:var(--faint);margin:0 0 24px;}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 24px;}
.tile{background:var(--card);border:1px solid var(--hairline);border-radius:8px;padding:14px 16px;min-width:0;}
.tile .label{font-size:.82rem;color:var(--muted);margin:0 0 4px;}
.tile .value{font-weight:600;font-size:1.6rem;line-height:1.15;margin:0;}
.tile .sub{font-size:.82rem;color:var(--faint);margin:4px 0 0;}
.delta-up{color:#1f6b2f;} .delta-down{color:#a32e2e;}

/* ---------- tabs & filter row ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;}
[role="tablist"]{display:flex;gap:2px;border-bottom:1px solid var(--hairline);flex-wrap:wrap;}
[role="tab"]{
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:8px 14px;cursor:pointer;color:var(--muted);font-size:.95rem;
}
[role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600;}
[role="tab"]:hover{color:var(--ink);}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.filters label{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:6px;}
select,.btn{
  font:inherit;font-size:.88rem;border:1px solid var(--hairline);background:var(--card);
  border-radius:6px;padding:5px 10px;color:var(--ink);cursor:pointer;
}
.btn:hover{border-color:var(--accent-tint);}
.btn-primary{background:#121A16;border-color:#121A16;color:#fff;border-radius:999px;}
.btn-primary:hover{background:#2A352F;border-color:#2A352F;}
.btn-small{font-size:.8rem;padding:3px 9px;}
.linkish{background:none;border:0;padding:0;color:var(--ink);font-weight:600;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--accent-tint);text-underline-offset:3px;}
.linkish:hover{text-decoration-color:var(--accent);}

/* ---------- panels & tables ---------- */
.panel{background:var(--card);border:1px solid var(--hairline);border-radius:8px;padding:18px;}
.panel + .panel{margin-top:16px;}
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--hairline);border-radius:8px;}
table{border-collapse:collapse;width:100%;font-size:.92rem;}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--grid);vertical-align:top;white-space:nowrap;}
th{font-weight:600;font-size:.8rem;color:var(--muted);background:#FBFBF9;}
td.r,th.r{text-align:right;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:#FAFAF7;}
.cell-sub{display:block;font-size:.8rem;color:var(--faint);margin-top:2px;white-space:normal;}
.chip{display:inline-block;font-size:.72rem;font-weight:600;padding:1px 7px;border-radius:99px;background:var(--bg);border:1px solid var(--hairline);color:var(--muted);margin-left:6px;}

/* status label: colored dot carries the mark, text carries the meaning */
.status{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;white-space:nowrap;}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot);flex:none;box-shadow:0 0 0 2px var(--card);}
.status.good{--dot:var(--good);} .status.warning{--dot:var(--warning);}
.status.serious{--dot:var(--serious);} .status.critical{--dot:var(--critical);}

/* ---------- charts ---------- */
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.chart-sub{font-size:.85rem;color:var(--faint);margin:2px 0 0;}
.chart svg{display:block;max-width:100%;height:auto;overflow:visible;}
.chart .gridline{stroke:var(--grid);stroke-width:1;}
.chart .axis-text{fill:var(--faint);font-size:11px;font-family:'Figtree',sans-serif;font-variant-numeric:tabular-nums;}
.chart .val-text{fill:var(--ink);font-size:12px;font-weight:600;font-family:'Figtree',sans-serif;}
.chart .bar{fill:var(--accent);pointer-events:none;}
.chart .bar.muted{fill:var(--accent-tint);}
.chart .hit{fill:transparent;cursor:default;}
.chart .hit:hover + .bar,.chart .hit:focus + .bar{filter:brightness(1.25);}
.chart .hit:focus{outline:none;}
.chart .hit:focus-visible{stroke:var(--accent);stroke-width:2;}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin:8px 0 0;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.key-bar{width:12px;height:10px;border-radius:2px;background:var(--accent);}
.key-tick{width:3px;height:14px;background:var(--ink);border-radius:1px;}
.key-band{width:14px;height:12px;background:var(--accent-wash);border:1px solid var(--accent-tint);border-radius:2px;}
.table-toggle{margin-top:10px;}
.chart-table{margin-top:10px;}

.tooltip{
  position:fixed;z-index:30;pointer-events:none;background:var(--card);border:1px solid var(--hairline);
  border-radius:6px;padding:7px 10px;font-size:.82rem;box-shadow:0 4px 14px rgba(28,29,27,.08);
  opacity:0;transition:opacity .08s;max-width:240px;
}
.tooltip.show{opacity:1;}
.tooltip strong{display:block;font-size:.95rem;}
.tooltip span{color:var(--muted);}

.chart text{pointer-events:none;}

/* meter: track is a lighter step of the same hue as the fill */
.meter{display:block;height:8px;border-radius:99px;background:var(--accent-wash);overflow:hidden;}
.meter > *{display:block;height:100%;border-radius:99px;background:var(--accent);}

/* ---------- services: account context ---------- */
.context{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:6px 0 0;font-size:.93rem;}
.context dt{font-weight:600;}
.context dd{margin:0;color:var(--muted);}

/* ---------- services: project cards ---------- */
details.project{background:var(--card);border:1px solid var(--hairline);border-radius:8px;margin-bottom:10px;}
details.project > summary{
  list-style:none;cursor:pointer;padding:14px 16px;display:flex;justify-content:space-between;
  align-items:center;gap:12px 20px;flex-wrap:wrap;
}
details.project > summary::-webkit-details-marker{display:none;}
details.project > summary::after{content:"▾";color:var(--faint);transition:transform .15s;}
details.project[open] > summary::after{transform:rotate(180deg);}
details.project[open] > summary{border-bottom:1px solid var(--grid);}
.proj-title{flex:1 1 240px;min-width:0;}
.proj-meta{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;font-size:.88rem;}
.proj-progress{display:inline-flex;align-items:center;gap:8px;}
.proj-progress .meter{width:90px;}
.proj-body{padding:14px 16px 16px;}
.proj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.proj-grid h4{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;}
.proj-grid h4:not(:first-child){margin-top:16px;}
.margin-line{margin:0 0 8px;font-size:.92rem;}
.mini-margin{position:relative;display:block;height:14px;background:var(--bg);border-radius:3px;}
.mini-margin .band{position:absolute;top:0;bottom:0;background:var(--accent-wash);border-left:1px solid var(--accent-tint);border-right:1px solid var(--accent-tint);}
.mini-margin .fill{position:absolute;left:0;top:3px;height:8px;background:var(--accent);border-radius:0 4px 4px 0;}
.mini-margin .tick{position:absolute;top:-2px;width:3px;height:18px;margin-left:-1.5px;background:var(--ink);border-radius:1px;}
.pills,.dims,.checks,.risks{list-style:none;margin:0;padding:0;font-size:.88rem;}
.pills li{margin-bottom:4px;}
.dims li{display:grid;grid-template-columns:64px 1fr 28px;align-items:center;gap:8px;margin-bottom:6px;}
.dims li > span:last-child{text-align:right;}
.checks li{display:flex;gap:8px;margin-bottom:3px;}
.checks li.yes > span:first-child{color:#1f6b2f;font-weight:600;}
.checks li.no{font-weight:600;}
.checks li.no > span:first-child{color:#a32e2e;}
.risks li{position:relative;padding-left:14px;margin-bottom:5px;}
.risks li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--serious);}
@media (max-width:860px){.proj-grid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){details.project > summary::after{transition:none;}}

/* ---------- account switcher (segmented) ---------- */
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;}
.seg button{border:1px solid var(--hairline);background:var(--card);border-radius:99px;padding:5px 12px;font-size:.88rem;cursor:pointer;}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ---------- renewal cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px;}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px;}
.card .countdown{font-weight:600;font-size:1.5rem;line-height:1;}
.card .countdown small{font-size:.85rem;font-weight:400;color:var(--muted);margin-left:4px;}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0;font-size:.88rem;}
.card dt{color:var(--muted);} .card dd{margin:0;}
.card .next{font-size:.88rem;border-top:1px solid var(--grid);padding-top:8px;margin:0;}
.empty-note{color:var(--faint);font-size:.9rem;margin:12px 0 0;}

/* ---------- brief dialog ---------- */
dialog.brief{
  border:1px solid var(--hairline);border-radius:10px;padding:0;max-width:620px;width:calc(100% - 32px);
  background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(28,29,27,.18);
}
dialog.brief::backdrop{background:rgba(28,29,27,.35);}
.brief-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--grid);}
.brief-head p{margin:2px 0 0;font-size:.85rem;color:var(--muted);}
.brief-body{padding:14px 20px 20px;font-size:.95rem;}
.brief-body h4{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:14px 0 6px;}
.brief-body h4:first-child{margin-top:0;}
.brief-body p,.brief-body ul{margin:0 0 6px;}
.brief-body ul{padding-left:18px;}
.brief-note{font-size:.8rem;color:var(--faint);background:var(--bg);border-radius:6px;padding:8px 10px;margin-top:14px;}
.close{border:0;background:none;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--muted);padding:2px 6px;}

footer.dash-foot{max-width:1120px;margin:0 auto;padding:0 20px 40px;font-size:.82rem;color:var(--faint);}

@media (max-width:760px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tile .value{font-size:1.3rem;}
  main{padding-top:24px;}
}
@media (prefers-reduced-motion:reduce){.tooltip{transition:none;}}

/* inside the main site's demo window */
.embedded .dash-top,.embedded .skip-link{display:none;}
.embedded main{padding-top:24px;}