/* FP&A Copilot — Dashboard kit styles */
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--canvas);color:var(--ink);font:var(--text-body);-webkit-font-smoothing:antialiased;}
#root{height:100vh;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--primary-soft-2);}

/* App shell */
.app{display:flex;height:100vh;overflow:hidden;}
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.content{flex:1;overflow-y:auto;padding:30px 34px 56px;}
.content-inner{max-width:1200px;margin:0 auto;}

/* Sidebar */
.sidebar{width:256px;flex:none;background:var(--navy-800);display:flex;flex-direction:column;padding:22px 16px 18px;gap:6px;}
.sb-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 22px;}
.sb-brand .mark{width:38px;height:38px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -2px rgba(47,98,232,.5);}
.sb-brand .wm{font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;letter-spacing:-.02em;}
.sb-brand .wm span{font-weight:800;color:var(--primary-on-navy);}
.sb-sec{margin:0;font:var(--text-label);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-on-dark-2);opacity:.55;padding:14px 12px 6px;}
.sb-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:var(--radius-sm);background:transparent;color:var(--fg-on-dark-2);font:var(--text-body-strong);font-size:13.5px;font-family:inherit;text-align:left;border:1px solid transparent;cursor:pointer;transition:background .12s;}
.sb-item:disabled{opacity:.4;cursor:default;}
.sb-item:disabled:hover{background:transparent;color:var(--fg-on-dark-2);}
.sb-home{display:block;width:100%;padding:0;background:transparent;border:none;cursor:pointer;text-align:left;}
.sb-item:hover{background:rgba(255,255,255,.06);color:var(--fg-on-dark);}
.sb-item.on{background:var(--navy-700);color:#fff;border-color:var(--navy-600);}
.sb-item.on .ic{color:var(--primary-on-navy);}
.sb-item .ic{color:var(--fg-on-dark-2);display:inline-flex;}
.sb-foot{margin-top:auto;padding:16px 8px 4px;border-top:1px solid rgba(255,255,255,.08);}
.sb-user{display:flex;align-items:center;gap:11px;}
.sb-user .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--navy-600),var(--navy-700));color:#fff;display:flex;align-items:center;justify-content:center;font:var(--text-label);font-size:12px;}
.sb-user .nm{font:var(--text-body-strong);font-size:13px;color:#fff;}
.sb-user .rl{font:var(--text-caption);font-size:11px;color:var(--fg-on-dark-2);}

/* Top bar */
.topbar{min-height:64px;flex:none;background:var(--topbar-bg,rgba(255,255,255,.88));backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 34px;position:sticky;top:0;z-index:5;}
.tb-title{margin:0;font:600 15px/1.25 var(--font-display);color:var(--ink);letter-spacing:-.01em;}
.tb-sub{font:var(--text-caption);font-size:11.5px;color:var(--fg-3);margin-top:1px;}
.tb-spacer{flex:1;}
.seg{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:var(--radius-sm);border:1px solid var(--border);}
.seg button{font:var(--text-body-strong);font-size:12.5px;color:var(--fg-2);padding:6px 13px;border-radius:6px;border:none;background:transparent;cursor:pointer;transition:color .12s;}
.seg button:hover{color:var(--ink);}
.seg button.on{background:var(--primary-soft);color:var(--primary-text);box-shadow:var(--shadow-xs);border:1px solid color-mix(in srgb, var(--primary) 20%, transparent);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:var(--text-body-strong);font-size:13.5px;border-radius:var(--radius-sm);padding:9px 15px;border:1px solid transparent;transition:background .13s,box-shadow .13s,transform .08s;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn.primary{background:var(--primary);color:var(--on-primary);}
.btn.primary:hover{background:var(--primary-hover);}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong);}
.btn.secondary:hover{background:var(--surface-2);}
.btn.ghost{background:transparent;color:var(--primary-text);}
.btn.ghost:hover{background:var(--primary-soft);}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.btn.sm{padding:7px 11px;font-size:12.5px;}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-card);}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--border);}
.card-h h3{font:var(--text-h3);color:var(--ink);}
.card-h .sub{font:var(--text-caption);color:var(--fg-3);margin-top:2px;}
.card-b{padding:20px 24px;}

.grid-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px;}
.grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:18px;}
.grid-2b{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}

/* KPI card */
.kpi{padding:22px 22px 20px;}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;}
.kpi .lbl{font:var(--text-label);text-transform:uppercase;letter-spacing:.07em;color:var(--fg-3);}
.kpi-ic{width:36px;height:36px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:none;}
.kpi .val{font:600 34px/1 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:18px 0 12px;word-break:break-all;}
.card.kpi{transition:transform .18s ease,box-shadow .18s ease;}
.card.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
/* Hero KPI — dark navy gradient for the profit card */
.kpi-hero{background:linear-gradient(160deg,var(--navy-700),var(--navy-900));border-color:transparent;box-shadow:0 12px 30px -10px rgba(12,23,38,.55);}
.kpi-hero .lbl{color:var(--fg-on-dark-2);}
.kpi-hero .val{color:#fff;}
.kpi-hero .kpi-ic{background:rgba(255,255,255,.12);color:#fff;}
.kpi-hero .delta.fav{background:rgba(34,196,126,.16);color:#5BE0A2;}
.kpi-hero .delta.adv{background:rgba(240,80,100,.16);color:#FFA0AC;}
.kpi-hero .delta.neu{background:rgba(255,255,255,.1);color:var(--fg-on-dark-2);}
/* In dark mode every card is already dark navy, so the hero card needs its own
   treatment to stay the focal point: primary-tinted gradient + blue inner ring */
[data-theme="dark"] .kpi-hero{
  background:linear-gradient(160deg,#1D3157,#0F1B33);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(76,124,240,.35);
}
.kpi-hero:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(12,23,38,.7);}
.delta{display:inline-flex;align-items:center;gap:5px;font:500 12px/1 var(--font-mono);font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:var(--radius-pill);}
.delta.fav{background:var(--favourable-soft);color:var(--favourable-text);}
.delta.adv{background:var(--adverse-soft);color:var(--adverse-text);}
.delta.neu{background:var(--surface-2);color:var(--fg-2);}

/* Editorial headline — large display heading above KPI row */
.editorial-header{margin-bottom:34px;}
.editorial-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;}
.editorial-eyebrow .e-label{font:600 11.5px var(--font-sans);text-transform:uppercase;letter-spacing:.14em;color:var(--primary-text);}
.editorial-eyebrow .e-sep{width:4px;height:4px;border-radius:50%;background:var(--border-strong);}
.editorial-eyebrow .e-period{font:600 11.5px var(--font-sans);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);}
.editorial-h1{font:800 clamp(28px,3.8vw,48px)/1.06 var(--font-display);letter-spacing:-.025em;color:var(--ink);margin:0;text-wrap:balance;}

/* AI commentary card tinted blue */
.card-ai{background:var(--primary-soft);border-color:var(--primary-soft-2);}
.card-ai .card-h{border-bottom-color:var(--primary-soft-2);}
.card-ai .ai-badge{background:var(--primary);color:var(--on-primary);padding:5px 11px;}
.card-ai .ai-list li .ic{width:26px;height:26px;border-radius:8px;background:var(--surface);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;flex:none;margin-top:0;}

/* Variance table */
table.var{width:100%;border-collapse:collapse;}
table.var th{font:var(--text-label);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-3);text-align:right;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);position:sticky;top:0;}
table.var th.l{text-align:left;}
table.var td{font:var(--text-data);color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;padding:10px 14px;border-bottom:1px solid var(--border);}
table.var td.l{text-align:left;font:var(--text-body);font-size:13.5px;}
table.var tr:last-child td{border-bottom:none;}
table.var tbody tr:hover{background:var(--surface-2);}
.fav{color:var(--favourable-text);}
.adv{color:var(--adverse-text);}
/* higher specificity than `table.var td` so variance cells actually colour */
table.var td.fav{color:var(--favourable-text);}
table.var td.adv{color:var(--adverse-text);}
.cat-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:9px;vertical-align:middle;}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:6px;font:var(--text-body-strong);font-size:11.5px;padding:3px 10px;border-radius:var(--radius-pill);border:1px solid transparent;}
.chip.fav{background:var(--favourable-soft);color:var(--favourable-text);border-color:var(--favourable-border);}
.chip.adv{background:var(--adverse-soft);color:var(--adverse-text);border-color:var(--adverse-border);}
.chip.cau{background:var(--caution-soft);color:var(--caution-text);border-color:var(--caution-border);}
.chip.info{background:var(--primary-soft);color:var(--primary-text);border-color:var(--primary-soft-2);}

/* AI commentary */
.ai-badge{display:inline-flex;align-items:center;gap:6px;font:var(--text-label);text-transform:uppercase;letter-spacing:.04em;color:var(--primary-text);background:var(--primary-soft);padding:4px 10px;border-radius:var(--radius-pill);}
.ai-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.ai-list li{display:flex;gap:11px;font:var(--text-body);font-size:13.5px;color:var(--fg-2);line-height:1.5;}
.ai-list li .ic{flex:none;margin-top:1px;}
.ai-list li b{color:var(--ink);font-weight:600;}
/* Inline commentary editor */
.comm-row{position:relative;align-items:flex-start !important;}
.comm-row:hover .comm-del{opacity:1;}
.comm-textarea{flex:1;resize:none;overflow:hidden;background:transparent;border:none;outline:none;font:var(--text-body);font-size:13.5px;color:var(--fg-2);line-height:1.5;padding:0;min-height:1.5em;border-radius:var(--radius-xs);transition:background .1s;}
.comm-textarea:focus{background:var(--surface-2);outline:2px solid var(--primary);outline-offset:2px;}
.comm-del{opacity:0;flex:none;display:inline-flex;align-items:center;padding:3px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-xs);transition:opacity .15s;margin-top:2px;}
.comm-del:hover{background:var(--adverse-soft);}
.comm-add{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:4px 10px;border:1px dashed var(--border);background:transparent;border-radius:var(--radius-xs);font:var(--text-label);font-size:11px;color:var(--fg-3);cursor:pointer;transition:border-color .15s,color .15s;}
.comm-add:hover{border-color:var(--primary);color:var(--primary);}

/* Legend */
.legend{display:flex;flex-direction:column;gap:9px;}
.legend .lg{display:flex;align-items:center;gap:9px;font:var(--text-body);font-size:13px;color:var(--fg-2);}
.legend .lg .sw{width:10px;height:10px;border-radius:3px;flex:none;}
.legend .lg .v{margin-left:auto;font:var(--text-data);font-size:12.5px;color:var(--ink);flex-shrink:0;padding-left:6px;}
.legend .lg .pct{font:var(--text-data);font-size:11.5px;color:var(--fg-3);width:36px;text-align:right;flex-shrink:0;}

/* Upload screen */
/* align-items:flex-start + margin:auto centres the card when it fits but lets it
   scroll from the top when taller than the viewport — align-items:center would
   clip the top (the hero badge) and make it unreachable. */
.upload-wrap{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:32px 20px;overflow-y:auto;}
.upload-card{width:580px;max-width:100%;margin:auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-card);padding:48px 52px 44px;text-align:center;}
.upload-card .hero-mark{width:68px;height:68px;border-radius:18px;background:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 8px 24px -6px rgba(47,98,232,.45);}
.upload-card h1{font:var(--text-h1);color:var(--ink);margin:0 0 10px;letter-spacing:-.02em;}
.upload-card p.sub{font:var(--text-body);color:var(--fg-2);margin:0 auto 28px;max-width:440px;line-height:1.6;}
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-2);padding:38px 28px;transition:border-color .15s,background .15s;cursor:pointer;}
.dropzone:hover,.dropzone.drag{border-color:var(--primary);background:var(--primary-soft);}
.dropzone .dz-ic{color:var(--primary);margin-bottom:12px;display:inline-flex;}
.dropzone .dz-t{font:var(--text-body-strong);font-size:15px;color:var(--ink);}
.dropzone .dz-s{font:var(--text-caption);color:var(--fg-3);margin-top:5px;}
.demo-card{width:100%;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin-bottom:10px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-2);cursor:pointer;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s;}
.demo-card:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface);box-shadow:var(--shadow-xs);}
.demo-card.active{border-color:var(--primary);background:var(--primary-soft);}
.demo-card:disabled:not(.active){opacity:0.5;cursor:default;}
.sample-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font:var(--text-caption);color:var(--fg-3);}
.sample-pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 12px;font:var(--text-body-strong);font-size:12.5px;color:var(--ink);}
.upload-err{margin-top:14px;font:var(--text-body-strong);font-size:13px;color:var(--adverse-text);background:var(--adverse-soft);border:1px solid var(--adverse-border);border-radius:var(--radius-sm);padding:10px 14px;text-align:left;}

/* Q&A copilot */
.qna{display:flex;flex-direction:column;height:calc(100vh - 64px);max-width:820px;margin:0 auto;width:100%;padding:0 4px;}
.qna-scroll{flex:1;overflow-y:auto;padding:24px 4px 16px;display:flex;flex-direction:column;gap:18px;}
.msg{display:flex;gap:12px;max-width:100%;}
.msg .av{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;}
.msg.user{flex-direction:row-reverse;}
.msg .bubble{padding:12px 15px;border-radius:var(--radius-md);font:var(--text-body);font-size:14px;line-height:1.55;}
.msg.ai .av{background:var(--primary-soft);color:var(--primary);}
.msg.ai .bubble{background:var(--surface);border:1px solid var(--border);color:var(--fg-1);box-shadow:var(--shadow-sm);border-radius:4px var(--radius-md) var(--radius-md) var(--radius-md);}
.msg.user .av{background:var(--navy-700);color:#fff;}
.msg.user .bubble{background:var(--primary);color:#fff;border-radius:var(--radius-md) 4px var(--radius-md) var(--radius-md);}
.msg .bubble b{font-weight:600;}
.msg .bubble .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.msg:hover .msg-copy-btn{opacity:1!important;}
.qna-suggest{display:flex;gap:8px;flex-wrap:wrap;padding:4px 4px 12px;}
.suggest{font:var(--text-body-strong);font-size:12px;color:var(--fg-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 13px;transition:border-color .12s,background .12s;}
.suggest:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft-2);}
.composer{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:8px 8px 8px 15px;box-shadow:var(--shadow-sm);margin:0 4px 8px;}
.composer input{flex:1;border:none;outline:none;font:var(--text-body);font-size:14px;color:var(--ink);background:transparent;}
.composer input::placeholder{color:var(--fg-3);}
.composer .send{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;flex:none;}
.composer .send:hover{background:var(--primary-hover);}

/* Period selector (topbar-native) */
.tb-period-wrap{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:0 10px;height:36px;}
.tb-period-wrap select{font:var(--text-body-strong);font-size:13px;color:var(--ink);background:transparent;border:none;outline:none;cursor:pointer;padding:0 2px;}
.tb-period-wrap select:focus{box-shadow:none;}

/* Modal */
.scrim{position:fixed;inset:0;background:rgba(12,23,38,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;padding:24px;}
.modal{width:460px;max-width:100%;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);}
.modal-h h3{font:var(--text-h2);color:var(--ink);}
.modal-h .x{width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--fg-3);display:flex;align-items:center;justify-content:center;}
.modal-h .x:hover{background:var(--surface-2);color:var(--ink);}
.modal-b{padding:20px 22px;}
.opt{display:flex;align-items:center;gap:13px;padding:14px 15px;border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:11px;cursor:pointer;}
.opt:hover{border-color:var(--border-strong);background:var(--surface-2);}
.opt.on{border-color:var(--primary);background:var(--primary-soft);}
.opt .oic{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--primary);flex:none;}
.opt.on .oic{background:#fff;}
.opt .ot{font:var(--text-body-strong);font-size:13.5px;color:var(--ink);}
.opt .os{font:var(--text-caption);color:var(--fg-3);margin-top:1px;}
.opt .rad{margin-left:auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong);flex:none;}
.opt.on .rad{border-color:var(--primary);background:radial-gradient(circle,var(--primary) 0 5px,transparent 6px);}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--border);background:var(--surface-2);}

/* AI Narrative prose rendering */
.ai-narrative h4{font:var(--text-body-strong);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin:18px 0 6px;}
.ai-narrative h4:first-child{margin-top:0;}
.ai-narrative p{margin:0 0 2px;color:var(--fg-2);}
.ai-narrative ul{margin:6px 0 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px;}
.ai-narrative li{color:var(--fg-2);}

/* Misc */
.section-title{font:var(--text-label);text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3);margin:2px 0 12px;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy-800);color:#fff;font:var(--text-body-strong);font-size:13px;padding:12px 18px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;z-index:80;}
.toast .ic{color:var(--favourable);}
.loading{display:flex;align-items:center;justify-content:center;height:200px;color:var(--fg-3);font:var(--text-body);gap:10px;}
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.stream-cursor{display:inline-block;color:var(--primary);animation:blink .7s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:meiq-rise .5s cubic-bezier(.2,.7,.3,1);}
}
@keyframes meiq-rise{from{transform:translateY(14px);opacity:.6;}to{transform:none;opacity:1;}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (max-width:1080px){
  .grid-kpi{grid-template-columns:repeat(2,1fr);}
  .grid-2,.grid-2b{grid-template-columns:1fr;}
  .content{padding:24px 24px 48px;}
  .sidebar{width:220px;}
}
@media (max-width:640px){
  /* Upload card — tighter padding on small screens */
  .upload-wrap{padding:16px 12px 80px;}
  .upload-card{padding:28px 20px 24px;border-radius:16px;}
  /* Layout */
  .content{padding:14px 14px 80px;}          /* bottom pad = bottom-nav height */
  .topbar{padding:0 14px;min-height:52px;}
  .tb-sub{display:none;}                      /* hide subtitle — too cramped */
  .tb-title{font-size:15px;}
  /* Editorial headline — smaller on mobile */
  .editorial-h1{font-size:24px !important;}
  .editorial-header{margin-bottom:20px;}
  /* Disable card hover lift on touch screens */
  .card.kpi:hover,.kpi-hero:hover{transform:none;box-shadow:var(--shadow-card);}
  /* Hide topbar controls on small screens — bottom-nav handles view switching */
  .tb-controls-hide{display:none !important;}
  /* KPI: 2-up on mobile */
  .grid-kpi{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;}
  .kpi{padding:13px 14px;}
  .kpi .val{font-size:18px;margin:8px 0 6px;}
  /* Donut: stack chart above legend */
  .donut-wrap{flex-direction:column !important;align-items:center !important;}
  .donut-wrap .legend{width:100%;margin-top:10px;}
  /* Movements table — hide low-priority columns, let card width breathe */
  .col-prior{display:none;}
  .col-varpct{display:none;}
  .col-sparkline{display:none;}
  /* Tab strip: allow horizontal scroll so tabs don't clip */
  .tab-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap !important;}
  .tab-strip button{flex-shrink:0;}
  /* BvA: hide the 6-card Actual/Budget/Variance grid — KPI row already has the same numbers */
  .bva-summary-grid{display:none;}
}
/* Mobile bottom navigation */
.mobile-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;height:60px;
  background:var(--surface);border-top:1px solid var(--border);
  z-index:20;padding:0 4px;
}
.mobile-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;border:none;background:transparent;
  font-size:10px;font-family:inherit;color:var(--fg-3);cursor:pointer;
  padding:6px 2px;min-width:0;
}
.mobile-nav-item.on{color:var(--primary-text);}
.mobile-nav-item span{font:500 10px var(--font-sans);line-height:1;white-space:nowrap;}
@media (max-width:560px){
  .grid-kpi{grid-template-columns:repeat(2,1fr);}
  .sidebar{display:none;}
  .mobile-nav{display:flex;}
  /* Portfolio client row: stack figures below name on mobile */
  .portfolio-row{flex-wrap:wrap !important;}
  .portfolio-row-rag{display:none !important;}
  .portfolio-row-figures{flex-wrap:wrap;gap:12px !important;}
  .portfolio-row-figures > div{min-width:56px;}
}


/* ── Focus visibility ──────────────────────────────────────────────────────
   Keyboard operability is worthless if you cannot see what has focus
   (WCAG 2.4.7). :focus-visible keeps the ring off mouse clicks. */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-xs);}
.sidebar :focus-visible{outline-color:#fff;}

/* Skip link — first tab stop, so a keyboard user can jump the nav (WCAG 2.4.1) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;
  background:var(--primary);color:var(--on-primary);font:var(--text-body-strong);font-size:13.5px;
  border-radius:0 0 var(--radius-sm) 0;text-decoration:none;}
.skip-link:focus{left:0;}

/* main takes the layout the old div had */
main.main{display:flex;flex-direction:column;min-width:0;flex:1;}

/* ── Range sliders (dashboard builder slicers) ─────────────────────────────
   accent-color only paints the filled portion and the thumb; the rest of the
   track keeps the UA default, which is near-white and glares on the dark
   canvas. Paint both halves from tokens instead. */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:18px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:5px;border-radius:999px;
  background:var(--surface-3);border:1px solid var(--border);
}
input[type=range]::-moz-range-track{
  height:5px;border-radius:999px;
  background:var(--surface-3);border:1px solid var(--border);
}
input[type=range]::-moz-range-progress{
  height:5px;border-radius:999px;background:var(--primary);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;margin-top:-6px;
  background:var(--primary);border:2px solid var(--surface);
  box-shadow:var(--shadow-xs);
}
input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--primary);border:2px solid var(--surface);
}
input[type=range]:focus-visible{outline:none;}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus);}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--shadow-focus);}

@media print{
  .sidebar,.topbar,.mobile-nav,.tb-controls-hide,
  .suggest,.ai-badge,.seg,.composer,.qna-suggest,
  button[title="Export management pack"],
  .content-inner > div:first-child > div:last-child{display:none!important;}
  body,html{background:#fff!important;color:#000!important;}
  .layout,.main{display:block!important;}
  .main{margin:0!important;padding:0!important;}
  .content{margin:0!important;padding:0 16px!important;}
  .content-inner{max-width:100%!important;padding:0!important;}
  .card{border:1px solid #e2e8f0!important;box-shadow:none!important;break-inside:avoid;margin-bottom:12pt!important;}
  .card-h{border-bottom:1px solid #e2e8f0!important;}
  .kpi{break-inside:avoid;}
  .grid-kpi{grid-template-columns:repeat(4,1fr)!important;}
  .grid-2,.grid-2b{grid-template-columns:1fr 1fr!important;}
  table{width:100%!important;}
  a{text-decoration:none!important;color:inherit!important;}
  @page{margin:16mm 12mm;size:A4;}
}