/* ============================================================
   WARP mobile.

   A separate stylesheet for a separate surface. It deliberately
   shares nothing with styles.css: the desktop app is a different
   interface for a different device, and coupling the two would
   mean neither could change without risking the other.

   The palette is the one Roald picked -- the dark theme the
   desktop Overview and Style Summary sheet already use, restated
   here rather than imported, since this file has to stand alone.
     background   #0B0F1A
     card         #141A28
     card alt     #181F30
     line         #232B3D
     text         #F2F4F8
     muted        #8A93A6
     accent       #22C55E
   ============================================================ */
:root{
  --bg:#0B0F1A;
  --card:#141A28;
  --card-alt:#181F30;
  --line:#232B3D;
  --text:#F2F4F8;
  --muted:#8A93A6;
  --green:#22C55E;
  --green-dim:#1B9E4B;
  --amber:#FBBF24;
  --red:#F87171;
  --track:#1E2536;
  --radius:12px;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Century Gothic','Questrial',system-ui,sans-serif;
  font-size:14px; line-height:1.4;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}

/* ---- top bar ---- */
.m-top{
  display:flex; align-items:center; gap:11px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  background:#000; position:sticky; top:0; z-index:10;
}
.m-logo{width:32px; height:32px; flex:none; border-radius:50%;}
.m-brand h1{
  font-family:'Oswald',sans-serif; font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; margin:0; line-height:1.15;
}
.m-sub{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}

.m-screen{padding:14px 14px 40px;}

/* ---- home menu ---- */
.m-menu{display:flex; flex-direction:column;}
.m-menu-item{
  display:flex; align-items:center; gap:14px; width:100%;
  background:none; border:none; border-bottom:1px solid var(--line);
  padding:16px 2px; color:var(--text); text-align:left;
  font-family:inherit; font-size:15px; cursor:pointer;
}
.m-menu-item:last-child{border-bottom:none;}
.m-menu-item:active{background:var(--card-alt);}
.m-menu-icon{
  width:40px; height:40px; flex:none; border-radius:10px;
  background:var(--card-alt); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--green);
}
.m-menu-text{flex:1; min-width:0;}
.m-menu-text b{display:block; font-weight:700; font-size:15px;}
.m-menu-text span{display:block; font-size:11.5px; color:var(--muted); margin-top:2px;}
.m-menu-chev{color:var(--muted); font-size:18px; flex:none;}

/* ---- Footer: storage + Powered by BMA, on the home menu only ----
   Per Roald's own reference screenshot, adapted to mobile's own dark
   palette rather than copying the desktop version's light background --
   deliberately placed here on the menu screen only, not as a fixed bar
   pinned across every working screen: Feed, Despatch, Photos and the
   rest are already tight on real vertical space on a phone, and this is
   the kind of meta information that belongs with the app's own home/about
   area, not competing for room on every task screen. */
.m-footer{margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:8px;}
.m-footer-storage{display:flex; align-items:center; gap:6px; color:var(--muted);}
.m-footer-storage-label{font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:.05em; font-size:9.5px;}
.m-footer-storage-track{width:70px; height:5px; border-radius:3px; background:var(--track);
  overflow:hidden;}
.m-footer-storage-fill{display:block; height:100%; background:var(--green);
  border-radius:3px; width:0%; transition:width .3s ease;}
.m-footer-storage.m-footer-warn .m-footer-storage-fill{background:var(--red);}
.m-footer-storage-pct{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text);}
.m-footer-brand{font-size:10.5px; color:var(--muted); opacity:.85;
  display:flex; align-items:center; gap:6px;}
.m-footer-bma-chip{background:#fff; border-radius:4px; padding:2px 6px;
  display:inline-flex; align-items:center; line-height:0;}
.m-footer-bma-chip img{height:12px; width:auto; display:block;}
.m-soon{
  display:inline-block; width:auto; flex:none;
  font-size:9px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--amber); border:1px solid var(--amber); border-radius:20px;
  padding:1px 7px; margin-left:7px; vertical-align:1px;
}
.m-menu-text b{display:flex; align-items:center; font-weight:700; font-size:15px;}
.m-menu-icon svg{width:19px; height:19px; stroke:var(--green); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.m-whoami{
  margin-top:22px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  font-size:11.5px; color:var(--muted);
}

/* ---- view frame ---- */
.m-viewbar{
  display:flex; align-items:center; gap:6px; margin-bottom:14px;
}
.m-viewbar h2{
  flex:1; min-width:0; margin:0;
  font-family:'Oswald',sans-serif; font-size:17px; font-weight:600;
}
.m-back, .m-refresh{
  background:none; border:none; color:var(--green); cursor:pointer;
  font-size:22px; line-height:1; padding:6px 10px; flex:none;
  min-width:40px; min-height:40px;
}
.m-refresh{font-size:17px; color:var(--muted);}

.m-empty{color:var(--muted); text-align:center; padding:40px 10px; font-size:13px;}
.m-error{
  color:var(--red); border:1px solid var(--red); border-radius:8px;
  padding:9px 12px; font-size:12.5px; margin-top:12px;
}
.m-note{
  color:var(--muted); font-size:11.5px; line-height:1.45;
  border-left:2px solid var(--line); padding-left:10px; margin:0 0 14px;
}

/* ---- cards ---- */
.m-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:12px;
}
.m-card-label{
  font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
}
.m-card-num{font-size:30px; font-weight:700; line-height:1.05; margin-top:4px;}
.m-card-sub{font-size:11.5px; color:var(--muted); margin-top:4px;}

.m-hero{margin-bottom:14px;}
.m-hero-date{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.m-hero-title{font-family:'Oswald',sans-serif; font-size:21px; font-weight:600; margin-top:4px;}

.m-pair{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
.m-pair .m-card{margin-bottom:0;}
.m-pair .m-card-num{font-size:24px;}

/* ---- bars ---- */
.m-bar{background:var(--track); border-radius:5px; height:8px; overflow:hidden; margin-top:10px;}
.m-bar-fill{height:100%; border-radius:5px; background:var(--green);}
.m-bar-fill.is-atrisk{background:var(--amber);}
.m-bar-fill.is-delayed{background:var(--red);}
.m-bar-fill.is-muted{background:var(--muted);}

/* ---- period selector ----
   Two compact rows rather than the desktop's single wide one: a
   three-way granularity control, then the period itself with a step
   either side. Tapping the label jumps back to today, which saves a
   fourth control competing for the same 390px. */
.m-period{margin-bottom:14px;}
.m-seg{
  display:flex; background:var(--card-alt); border:1px solid var(--line);
  border-radius:9px; overflow:hidden; margin-bottom:8px;
}
.m-seg button{
  flex:1; background:none; border:none; color:var(--muted);
  font-family:'Oswald',sans-serif; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  padding:9px 4px; cursor:pointer; min-height:38px;
}
.m-seg button.is-on{background:var(--green); color:#06210F;}
.m-period-nav{display:flex; align-items:stretch; gap:8px;}
.m-step{
  flex:none; width:44px; min-height:38px;
  background:var(--card-alt); border:1px solid var(--line); border-radius:9px;
  color:var(--text); font-size:19px; line-height:1; cursor:pointer;
}
.m-period-label{
  flex:1; min-width:0; min-height:38px;
  background:var(--card-alt); border:1px solid var(--line); border-radius:9px;
  color:var(--text); font-family:inherit; font-size:12.5px; font-weight:700;
  padding:8px 6px; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- section heading ---- */
.m-section-title{
  font-family:'Oswald',sans-serif; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  padding-bottom:8px; border-bottom:1px solid var(--line); margin:22px 0 12px;
}
.m-section-title:first-child{margin-top:0;}

/* ---- department balances ---- */

/* ---- progress rows: Feed and Despatch ----
   Mirrors the desktop Overview's own progress tables, stacked so the
   label, the bar and the figures each get their own real line rather
   than four columns fighting over 390px. */
.m-prog{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; margin-bottom:10px;
}
.m-prog-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.m-prog-style{font-family:'Oswald',sans-serif; font-size:15px; font-weight:600;}
.m-prog-cmt{font-size:11.5px; color:var(--muted);}
.m-prog-pct{font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; flex:none;}
.m-prog-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:8px; font-size:11.5px; color:var(--muted);
}
.m-badge{
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-radius:20px; padding:2px 8px; border:1px solid currentColor; flex:none;
}
.m-badge-atrisk{color:var(--amber);}
.m-badge-delayed{color:var(--red);}

.m-toggle{
  width:100%; background:var(--card-alt); border:1px solid var(--line);
  border-radius:var(--radius); color:var(--text); font-family:inherit;
  font-size:12.5px; padding:11px; cursor:pointer; margin-bottom:10px;
}

/* ---- incoming schedule cards ----
   Nine fields per drop. A wide table would hide Status, which is the
   one thing this screen is opened for, so each drop is its own card
   with every field labelled. */
.m-drop{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 14px; margin-bottom:10px;
}
.m-drop-order{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:7px; margin-bottom:5px; border-bottom:1px solid var(--line);
}
.m-drop-order b{font-family:'Oswald',sans-serif; font-size:16px; font-weight:700;}
.m-field{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:3px 0; font-size:12.5px; text-align:right;
}
.m-field-label{
  flex:none; text-align:left; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
}
.m-pill{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-radius:20px; padding:3px 10px; border:1px solid currentColor;
}
.m-pill-okay{color:var(--green);}
.m-pill-due{color:var(--amber);}
.m-pill-late{color:var(--red);}
.m-pill-at_risk{color:var(--red);}
.m-pill-complete{color:var(--muted);}

/* ---- job picker, used by Photos and Recipe Capture ---- */
.m-job{
  display:flex; align-items:center; gap:12px; width:100%;
  background:none; border:none; border-bottom:1px solid var(--line);
  padding:14px 2px; color:var(--text); text-align:left;
  font-family:inherit; cursor:pointer;
}
.m-job-text{flex:1; min-width:0;}
.m-job-text b{font-family:'Oswald',sans-serif; font-size:14.5px;}
.m-job-text i{font-style:normal; color:var(--muted); font-size:13px;}
.m-job-text span{display:block; font-size:11.5px; color:var(--muted); margin-top:2px;}

/* ---- login ---- */
.m-login{text-align:center;}
.m-login-bma{display:block; width:min(240px, 72vw); height:auto; margin:0 auto 18px;}
.m-login h2{font-family:'Oswald',sans-serif; font-size:19px; font-weight:600; margin:0 0 14px;}
.m-login-copy{color:var(--muted); font-size:12.5px; margin:0 0 12px;}
.m-login-recovery{margin:10px auto 16px;}
.m-clerk-mount{width:100%; min-height:280px;}
.m-login label{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; margin:12px 0 5px;
}
.m-login input{
  width:100%; background:var(--card-alt); border:1px solid var(--line);
  border-radius:8px; color:var(--text); font-family:inherit;
  font-size:16px; padding:11px 12px;   /* 16px stops iOS zooming the page on focus */
}
.m-btn{
  width:100%; border-radius:8px; font-family:inherit; font-size:14px;
  font-weight:700; padding:13px; cursor:pointer; margin-top:18px;
  border:1px solid var(--line); background:var(--card-alt); color:var(--text);
}
.m-btn-primary{background:var(--green); border-color:var(--green); color:#06210F;}
.m-signout{
  background:none; border:1px solid var(--line); border-radius:20px;
  color:var(--muted); font-family:inherit; font-size:11.5px;
  padding:5px 12px; cursor:pointer;
}

/* ---- Photos: position capture ----
   One card per position, each pairing the reference diagram with what
   was actually shot, so the person holding the phone can see the two
   side by side without leaving the screen. */
.m-pos{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; margin-bottom:10px;
}
.m-pos.is-done{border-color:var(--green-dim);}
.m-pos-head{display:flex; align-items:baseline; gap:8px; margin-bottom:8px;}
.m-pos-no{
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:700;
  color:var(--green); flex:none;
}
.m-pos-title{font-family:'Oswald',sans-serif; font-size:14.5px; font-weight:600; flex:1; min-width:0;}
.m-pos-detail{font-size:11.5px; color:var(--muted); line-height:1.4; margin-bottom:10px;}
.m-pos-imgs{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.m-pos-slot{
  position:relative; aspect-ratio:3/4; border-radius:9px; overflow:hidden;
  background:var(--card-alt); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.m-pos-slot img{width:100%; height:100%; object-fit:contain; display:block;}
.m-pos-slot.is-empty{border-style:dashed;}
.m-pos-cap{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(11,15,26,.82); color:var(--muted);
  font-size:9px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; text-align:center; padding:3px 2px;
}
.m-pos-take{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:9px; min-height:42px;
  background:var(--card-alt); border:1px solid var(--line); border-radius:9px;
  color:var(--text); font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer;
}
.m-pos-take.is-retake{color:var(--muted); font-weight:400;}
.m-pos-take:disabled{opacity:.45;}
.m-pos-busy{color:var(--green); font-size:12px; text-align:center; padding:9px;}

.m-progress-line{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:12px; font-size:12px; color:var(--muted);
}
.m-finalise{
  width:100%; min-height:48px; margin:6px 0 30px;
  background:var(--green); border:1px solid var(--green); border-radius:10px;
  color:#06210F; font-family:inherit; font-size:14.5px; font-weight:700;
  cursor:pointer;
}
.m-finalise:disabled{
  background:var(--card-alt); border-color:var(--line);
  color:var(--muted); cursor:default;
}
.m-done-note{
  border:1px solid var(--green-dim); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:12px; font-size:12.5px;
}
.m-done-note b{display:block; color:var(--green); font-family:'Oswald',sans-serif;
  font-size:14px; margin-bottom:4px;}
.m-link{
  display:inline-block; margin-top:8px; color:var(--green);
  font-size:12.5px; font-weight:700; text-decoration:none;
  border:1px solid var(--green); border-radius:20px; padding:6px 14px;
}

/* ---- Recipe Capture ----
   Quick adjustments from the floor: time, temp, water, pH, chemicals
   and a comment. Step names, machines and sections are shown but not
   editable -- changing the shape of a recipe is planning work, not a
   floor correction. */
.m-proc{margin-bottom:16px;}
.m-proc-name{
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--green);
  padding-bottom:7px; border-bottom:1px solid var(--line); margin-bottom:10px;
}
/* Named m-rstep, not m-step: the period selector already owns .m-step for
   its prev/next buttons, and sharing the name made these cards inherit a
   44px width. */
.m-rstep{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; margin-bottom:10px;
}
.m-rstep-name{font-family:'Oswald',sans-serif; font-size:14.5px; font-weight:600; margin-bottom:10px;}
.m-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.m-fld label{
  display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; margin-bottom:4px;
}
.m-fld input, .m-fld textarea{
  width:100%; background:var(--card-alt); border:1px solid var(--line);
  border-radius:8px; color:var(--text); font-family:inherit;
  font-size:16px; padding:9px 10px; min-height:40px;
}
.m-fld textarea{min-height:64px; resize:vertical; line-height:1.4;}
.m-fld.is-wide{grid-column:1 / -1;}
.m-fld input.is-dirty, .m-fld textarea.is-dirty{border-color:var(--green);}
.m-chem{display:grid; grid-template-columns:1fr 84px; gap:8px; margin-bottom:8px;}
/* These inputs sit directly in .m-chem rather than inside a .m-fld, so they
   need the dark field styling naming them explicitly. Without it they fall
   back to the browser default and render white on a dark card. */
.m-chem input{
  width:100%; background:var(--card-alt); border:1px solid var(--line);
  border-radius:8px; color:var(--text); font-family:inherit;
  font-size:16px; padding:9px 10px; min-height:40px;
}
.m-chem input::placeholder{color:var(--muted);}
.m-chem input.is-dirty{border-color:var(--green);}
.m-sub-label{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; margin:12px 0 6px;
}

/* ---- save bar ---- */
.m-savebar{
  position:sticky; bottom:0; z-index:5;
  background:var(--bg); border-top:1px solid var(--line);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  margin-top:14px;
}
.m-savebar .m-save{
  width:100%; min-height:48px; border-radius:10px;
  background:var(--green); border:1px solid var(--green);
  color:#06210F; font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
}
.m-savebar .m-save:disabled{
  background:var(--card-alt); border-color:var(--line); color:var(--muted); cursor:default;
}
.m-savestate{font-size:11.5px; text-align:center; padding:7px 4px 0;}
.m-savestate.is-ok{color:var(--green);}
.m-savestate.is-bad{color:var(--red);}
.m-savestate.is-busy{color:var(--muted);}

.m-inline-btn{
  display:inline-block; margin-left:6px;
  background:none; border:1px solid currentColor; border-radius:20px;
  color:inherit; font-family:inherit; font-size:11px; font-weight:700;
  padding:3px 11px; cursor:pointer;
}

/* Wash by complexity: a pie with its legend beside it, as on the desktop Overview. */
.m-pie-row{display:flex; align-items:center; gap:20px; padding:10px 0 4px;}
.m-pie-row svg{flex-shrink:0;}
.m-pie-legend{display:flex; flex-direction:column; gap:9px; flex:1; min-width:0;}
.m-pie-legend-row{display:flex; align-items:center; gap:8px; font-size:12.5px;}
.m-pie-swatch{width:11px; height:11px; border-radius:3px; flex-shrink:0;}
.m-pie-label{flex:1; min-width:0;}
.m-pie-value{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); white-space:nowrap;}

/* ---- headline tiles: compact, per Roald (the full-width cards took a lot of room for no real reason) ---- */
.m-tiles{display:grid; gap:10px; margin-bottom:10px;}
.m-tiles.is-two{grid-template-columns:1fr 1fr;}
.m-tiles.is-three{grid-template-columns:repeat(3, 1fr);}
.m-card.m-card-compact{padding:10px 12px; margin-bottom:0; min-width:0; text-align:left; color:var(--text);
  font-family:inherit; width:100%;}
.m-card-compact .m-card-label{font-size:9.5px; letter-spacing:.06em; line-height:1.25; margin-bottom:3px;}
.m-card-compact .m-card-num{font-size:22px; margin-top:0;}
.m-card-compact .m-bar{height:4px; margin-top:7px;}
.m-card-compact .m-card-sub{font-size:10.5px; margin-top:5px; line-height:1.3;}
.m-tiles.is-three .m-card-num{font-size:20px;}
/* On the very smallest phones the labels are tightened a little so "Despatched this week" stays on one line. */
@media (max-width:340px){.m-card-compact .m-card-label{font-size:8.5px; letter-spacing:.02em;}}
button.m-card-compact{cursor:pointer; display:block; appearance:none; -webkit-appearance:none;}
button.m-card-compact:active{background:var(--card-alt);}
.m-card-compact.has-risk .m-card-num{color:var(--red);}

/* ---- the charts: each in its own card and drawn larger, per Roald ---- */
.m-chart{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px 18px; margin-bottom:14px;}
.m-chart .m-section-title{margin:0 0 12px;}
.m-chart .m-empty{padding:26px 10px;}
/* Jobs by lead time: a tile per band, three across, the count above the band. Bands with a job are lit with a green edge;
   empty ones are dimmed. */
.m-lt-tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
.m-lt-tile{display:flex; flex-direction:column; gap:3px; padding:10px 11px; background:var(--card-alt); border:1px solid var(--line);
  border-radius:10px; opacity:.5; min-width:0;}
.m-lt-tile.is-on{opacity:1; border-color:var(--green-dim); box-shadow:inset 3px 0 0 var(--green);}
.m-lt-count{font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:700; line-height:1;}
.m-lt-label{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.m-lt-tile.is-on .m-lt-label{color:var(--text);}
/* On the very smallest screens the tiles go two across (three down), so no band's name is cut off. */
@media (max-width:340px){.m-lt-tiles{grid-template-columns:repeat(2, 1fr);}}
.m-chart .m-note{margin:14px 0 0;}
/* The pie sits above its legend with the whole width of the card, and is only scaled by CSS, so its wedges
   are still the very ones the desktop draws (a 120-unit drawing). */
.m-chart .m-pie-row{flex-direction:column; align-items:center; gap:20px; padding:6px 0 2px;}
.m-chart .m-pie-row svg{width:min(240px, 78%); height:auto; aspect-ratio:1;}
.m-chart .m-pie-legend{width:100%; flex:none; gap:12px;}
.m-chart .m-pie-legend-row{font-size:15px; gap:10px;}
.m-chart .m-pie-swatch{width:15px; height:15px; border-radius:4px;}
.m-chart .m-pie-value{font-size:14px;}
.m-chart .m-pie-label, .m-chart .m-pie-value{white-space:nowrap;}
.m-chart .m-pie-label{overflow:hidden; text-overflow:ellipsis;}

/* ---- the Jobs at risk sheet ---- */
.m-sheet{position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:60; display:flex; align-items:flex-end;}
.m-sheet[hidden]{display:none;}
.m-sheet-panel{background:var(--card); border:1px solid var(--line); border-bottom:0; width:100%; max-height:82vh;
  border-radius:16px 16px 0 0; display:flex; flex-direction:column;}
.m-sheet-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px;
  border-bottom:1px solid var(--line); flex:none;}
.m-sheet-head h3{margin:0; font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;}
.m-sheet-close{background:none; border:0; color:var(--muted); font-size:28px; line-height:1; padding:0 4px; cursor:pointer;}
.m-sheet-body{padding:6px 18px 22px; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.m-sheet-body .m-note{margin:12px 0 0;}
.m-risk-row{padding:13px 0; border-bottom:1px solid var(--line);}
.m-risk-row:last-of-type{border-bottom:0;}
.m-risk-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.m-risk-top b{font-size:15px;}
.m-risk-over{color:var(--red); font-weight:700; font-size:13px; white-space:nowrap;}
.m-risk-sub{color:var(--muted); font-size:12.5px; margin-top:2px;}
.m-risk-dates{font-size:12.5px; margin-top:5px;}
.m-risk-est{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}