/* Fox Group contribution portal - design tokens.
   Served comment-free: the annotated original, including the design
   rationale, lives in design/tokens.css in the repo. */


:root{

  
  --fox-navy:      #24214A;   
  --fox-orange:    #EB941F;   
  --fox-green:     #94C21F;   
  --fox-blue:      #00579E;   

  
  --on-orange:     #24214A;

  
  --ink:           #24214A;   
  --ink-2:         #5A5A72;   
  --ink-3:         #6B6B80;   
  --line:          #E0E0E8;   
  --line-soft:     #EEEEF2;   
  --surface:       #FFFFFF;   
  --surface-2:     #F4F4F6;   
  --surface-3:     #EDEDF2;   

  
  --pos-strong:    #1B8553;   
  --pos-soft:      #E2F3E9;   
  --neg-strong:    #96190E;   
  --neg-soft:      #F2B8B0;   
  --zero:          #D9D9E0;   
  --nodata:        #EDEDF2;   
  --nodata-ink:    #5A5A72;

  
  --neg-offscale:  #5C0F06;   
  --pos-offscale:  #0E5C39;   
  

  
  --warn:          #B8860B;
  --warn-fill:     #FFF1D9;
  --warn-ink:      #8A5A00;   
  --warn-line:     #E0A93B;

  
  --info-fill:     #E8EEF6;
  --info-ink:      #0B3A66;   
  --info-line:     #B9CDE4;

  
  --sample-bg:     #2B2B33;   
  --sample-ink:    #FFFFFF;
  --sample-hatch:  rgba(255,255,255,.10);

  
  --cvd-pos-strong:#00579E;
  --cvd-pos-soft:  #D6E6F4;

  
  --chart-bar-pos: #1B8553;
  --chart-bar-neg: #96190E;
  --chart-trend:   #D0021B;   
  --chart-grid:    #E6E6EC;
  --chart-baseline:#9A9AAA;

  
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --num:  'SF Mono', 'Segoe UI Mono', 'Roboto Mono', ui-monospace, monospace;

  --t-micro:  11px;  
  --t-small:  13px;  
  --t-body:   15px;  
  --t-sub:    17px;  
  --t-title:  19px;  
  --t-big:    28px;  
  --t-huge:   34px;  

  
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  
  --r-sm:6px; --r-md:9px; --r-lg:14px; --r-xl:16px;

  
  --touch-min:44px;   
  --touch-pref:48px;  

  
  --reg-col-phone:   88px;
  --reg-col-desktop:150px;
  --daycell-desktop: 38px;   
  --daycell-week:    36px;   
  --row-h:           44px;

  --shadow-card: 0 1px 3px rgba(36,33,74,.10), 0 8px 24px rgba(36,33,74,.06);
  --shadow-sticky: 2px 0 6px rgba(36,33,74,.10);
  --focus: 0 0 0 3px rgba(0,87,158,.45);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--surface-2);color:var(--ink);
  font-size:var(--t-body);line-height:1.45;
  -webkit-font-smoothing:antialiased}

.num,td.num,.money{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.samplebar{background:var(--sample-bg);color:var(--sample-ink);
  background-image:repeating-linear-gradient(45deg,
    var(--sample-hatch) 0 6px, transparent 6px 12px);
  padding:5px var(--s3);display:flex;align-items:center;gap:8px;
  position:sticky;top:46px;z-index:58}
.samplebar b{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;flex-shrink:0}
.samplebar span{font-size:10.5px;line-height:1.3;color:rgba(255,255,255,.86)}
.samplebar .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex-shrink:0}

.completes{background:var(--info-fill);border-bottom:1px solid var(--info-line);
  padding:var(--s2) var(--s3)}
.completes .hd{font-size:var(--t-micro);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--info-ink);opacity:.8;margin-bottom:4px}
.completes .row{display:flex;align-items:baseline;gap:var(--s2);
  font-size:12px;color:var(--info-ink);padding:2px 0}
.completes .row .fl{font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.completes .row .gap{flex:1 1 4px;min-width:4px}
.completes .row .dt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
  flex-shrink:0}
.completes .row .lag{font-size:11px;opacity:.78;white-space:nowrap;flex-shrink:0}
.completes .note{font-size:11px;color:var(--info-ink);opacity:.85;margin-top:4px;
  line-height:1.4}

.completes .row.late{color:var(--warn-ink)}
.completes .row.late .dt{color:var(--warn-ink)}

.datechip{background:rgba(255,255,255,.16);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums;
  border-radius:var(--r-sm);padding:3px 7px;white-space:nowrap}
.datechip.late{background:var(--warn-fill);color:var(--warn-ink)}

.dq{background:var(--surface);border-bottom:1px solid var(--line);
  padding:var(--s2) var(--s3);display:flex;flex-wrap:wrap;gap:6px var(--s4);
  align-items:center}
.dq .m{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2)}
.dq .m b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.dq .meter{width:52px;height:6px;border-radius:3px;background:var(--surface-3);
  overflow:hidden;flex-shrink:0}
.dq .meter i{display:block;height:100%;background:var(--pos-strong);border-radius:3px}
.dq .m.low{color:var(--warn-ink)}
.dq .m.low b{color:var(--warn-ink)}
.dq .m.low .meter i{background:var(--warn)}
.dq .verdict{font-size:11px;font-weight:700;border-radius:var(--r-sm);padding:3px 7px;
  background:var(--pos-soft);color:#14532D}
.dq .verdict.low{background:var(--warn-fill);color:var(--warn-ink);
  border:1px solid var(--warn-line)}
.dq .expl{flex-basis:100%;font-size:11px;line-height:1.4;color:var(--warn-ink)}

.indic{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;background:var(--warn-fill);color:var(--warn-ink);
  border:1px solid var(--warn-line);border-radius:3px;padding:1px 4px;
  vertical-align:middle}

.offmark{position:relative}
.offmark::after{content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-top:8px solid rgba(255,255,255,.92);border-left:8px solid transparent;
  pointer-events:none}

.offmark.onlight::after{border-top-color:var(--ink)}

.scalekey{display:flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.scalekey .st{flex:1;min-height:26px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center;
  line-height:1.15;padding:2px 3px}
.scalekey .st.off{flex:0 0 30px}
.scalekey .st.negoff{background:var(--neg-offscale);color:#fff}
.scalekey .st.negs{background:var(--neg-strong);color:#fff}
.scalekey .st.negw{background:var(--neg-soft);color:var(--ink)}
.scalekey .st.zero{background:var(--zero);color:var(--ink-2);flex:0 0 44px}
.scalekey .st.posw{background:var(--pos-soft);color:var(--ink)}
.scalekey .st.poss{background:var(--pos-strong);color:#fff}
.scalekey .st.posoff{background:var(--pos-offscale);color:#fff}
.scaleanchors{display:flex;justify-content:space-between;gap:var(--s2);margin-top:4px;
  font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.scaleanchors b{color:var(--ink);font-weight:700}

.basisnote{background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--fox-blue);border-radius:var(--r-sm);
  padding:var(--s2) var(--s3);font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.basisnote+.basisnote{margin-top:var(--s2)}
.basisnote b{color:var(--ink);font-weight:700}

.foot{background:var(--fox-navy);color:rgba(255,255,255,.80);padding:var(--s4) var(--s3);
  font-size:11.5px;line-height:1.55}
.foot .caveat{margin-bottom:var(--s2)}
.foot .vat{margin-bottom:var(--s2);color:rgba(255,255,255,.66)}
.foot .credit{color:#fff;font-weight:600}

.foot a{color:var(--fox-orange);text-decoration:none;font-weight:700;
  display:inline-block;padding:14px 6px;margin:-14px -6px}