:root{
  /* marble and brass as the working surface - light enough to read numbers on all day.
     the brand's dusty rose stays as the second accent, so it still reads as Gusto Nostro. */
  --cream:#F4F1EC;       /* page */
  --paper:#FFFFFF;       /* cards */
  --ink:#1F1B1C;         /* headers, primary text */
  --slate:#4E4749;       /* secondary text */
  --ash:#8E8688;         /* muted */
  --vein:#E4DED8;        /* borders - marble veining */
  --brass:#B8873B;       /* primary accent */
  --brass-l:#D4A960;
  --rose:#B4707A;        /* brand accent, used sparingly */
  --wine:#620A1E;        /* brand red, for emphasis only */
  --steel:#7C8A94;
  --forest:#3F6B54;      /* good */
  --clay:#A8452F;        /* alert */
  --olive:#7A7A47;
  --ui:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --display:'Didot','Bodoni 72','Playfair Display',Georgia,serif;
  --num:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:var(--ui);font-size:13px;-webkit-font-smoothing:antialiased}

/* ---------- side menu ----------
   Nine areas and 42 sub-areas do not fit across the top. Vertical space is
   cheap, horizontal is not: the menu goes down the side, everything is visible
   at once, and adding a tenth area costs nothing.

   Kept light rather than wine. Wine was drawn for a 58px bar; as a full-height
   column it becomes a wall and fights the page for attention. Here it stays as
   the brand mark and the active marker, and the area icons - which carry their
   own colours - are finally legible. */
.side{position:fixed;top:0;left:0;bottom:0;width:186px;background:#FAF8F4;
  border-right:1px solid var(--vein);display:flex;flex-direction:column;
  z-index:30;overflow-y:auto}
/* The brand mark is the real logo file, cropped from the artwork rather than
   rebuilt from lookalike fonts. Its own background is #620A1E, the same wine
   as the palette, so it sits flush in the tile. */
.sbrand{display:block;padding:16px 16px 14px;text-decoration:none;
  background:var(--wine);border-bottom:1px solid var(--vein)}
.sbrand img{display:block;width:100%;height:auto}
.sbrand em{display:block;font-family:var(--ui);font-style:normal;font-size:8.5px;
  letter-spacing:.17em;text-transform:uppercase;color:#C09AA0;margin-top:10px}
.sareas{padding:6px 0;flex:1}
.sarea{border-left:2px solid transparent}
.sarea > summary{display:flex;align-items:center;gap:8px;padding:5px 13px;
  cursor:pointer;list-style:none;color:var(--slate);font-size:12px}
.sarea > summary::-webkit-details-marker{display:none}
.sarea > summary:hover{color:var(--ink);background:#F2EEE8}
.sarea.on{border-left-color:var(--brass)}
.sarea.on > summary{color:var(--ink);background:var(--cream);font-weight:600}
.sicon{width:19px;height:19px;flex:none;border-radius:2px;display:grid;place-items:center}
.sicon svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sname{flex:1;line-height:1.22}
.snum{font-family:var(--num);font-size:9px;color:#B6ADA6;letter-spacing:.06em}
.ssubs{padding:1px 0 5px;background:var(--cream);border-left:2px solid var(--brass);
  margin-left:0}
.ssub{display:block;padding:3px 13px 3px 37px;text-decoration:none;
  font-size:11px;color:var(--slate);line-height:1.28}
.ssub:hover{color:var(--ink);background:#F2EEE8}
.ssub.cur{color:var(--brass);font-weight:600}
.ssub.top{color:var(--ash);font-size:10.5px;letter-spacing:.04em}
/* Sub-areas that exist in the team's world but not yet in the hub are shown
   rather than hidden: the menu is then a true list of what there is. */
.ssub.off{color:#B6ADA6;cursor:default}
.sfoot{padding:13px 16px;border-top:1px solid var(--vein);background:#F2EEE8}
.swho{font-family:var(--num);font-size:10.5px;color:var(--slate);word-break:break-all;line-height:1.4}
.sacts{display:flex;gap:14px;margin-top:8px}
.sacts a{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);
  text-decoration:none}
.sacts a:hover{color:var(--ink)}

/* narrow screens: the menu lies down across the top instead */
@media(max-width:900px){
  .side{position:static;width:auto;flex-direction:column;border-right:0;
    border-bottom:1px solid var(--vein)}
  .sareas{display:flex;flex-wrap:wrap;padding:4px 8px}
  .sarea{border-left:0;border-bottom:2px solid transparent;padding:7px 10px}
  .sarea.on{border-left:0;border-bottom-color:var(--brass)}
  .snum,.ssubs{display:none}
  .sfoot{display:flex;align-items:center;gap:14px}
  .sacts{margin:0 0 0 auto}
}

.wrap{max-width:none;margin:0 0 0 186px;padding:0 18px 48px}
@media(max-width:900px){.wrap{margin:0 auto;padding:0 14px 40px}}
h1{font-family:var(--display);font-weight:400;font-size:25px;margin:0 0 2px;letter-spacing:.01em}
.lede{color:var(--slate);font-size:13.5px;margin:0 0 22px;line-height:1.55}
h2{font-family:var(--display);font-weight:400;font-size:21px;margin:30px 0 3px;letter-spacing:.01em}
.h2sub{font-size:12px;color:var(--ash);margin:0 0 12px}
.rule{height:1px;border:0;background:linear-gradient(90deg,var(--brass),var(--vein) 18%,var(--vein));margin:22px 0}

/* ---------- area grid ---------- */
.areagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1040px){.areagrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.areagrid{grid-template-columns:1fr}}
.area{background:var(--paper);border:1px solid var(--vein);cursor:pointer;display:flex;
  flex-direction:column;transition:transform .12s,box-shadow .12s,border-color .12s}
.area:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(31,27,28,.08);border-color:var(--brass)}
.areatop{display:flex;align-items:center;gap:11px;padding:15px 16px 13px;border-bottom:1px solid var(--vein)}
.areaicon{width:36px;height:36px;border-radius:2px;display:grid;place-items:center;flex:none}
.areaicon svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.areanum{font-family:var(--num);font-size:10px;color:var(--ash);letter-spacing:.08em}
.areaname{font-family:var(--display);font-size:17px;line-height:1.15;letter-spacing:.01em}
.arealist{list-style:none;margin:0;padding:12px 16px;flex:1}
.arealist li{font-size:12.5px;padding:4px 6px;margin:0 -6px;display:flex;align-items:center;gap:9px;
  color:var(--slate);cursor:pointer;border-radius:2px}
.arealist li:hover{background:#F4F1EC;color:var(--ink)}
.arealist li:hover .subname{text-decoration:underline;text-decoration-color:var(--brass);
  text-underline-offset:2px}
.areafoot{border-top:1px solid var(--vein);padding:9px 16px;font-size:10.5px;color:var(--ash);
  display:flex;justify-content:space-between;align-items:center}
.areafoot .go{color:var(--brass);letter-spacing:.04em}
.dot{width:6px;height:6px;border-radius:50%;flex:none}
.dot.ok{background:var(--forest)}.dot.wait{background:var(--brass)}.dot.off{background:#CFC9C1}

/* ---------- kpi ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  background:var(--paper);border:1px solid var(--vein)}
.kpi{background:var(--paper);padding:9px 12px 10px;
  border-right:1px solid var(--vein);border-bottom:1px solid var(--vein)}
.kpi:last-child{border-right:0}
.kpi .k{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:3px}
.kpi .v{font-family:var(--num);font-size:17px;letter-spacing:-.02em}
.kpi .d{font-family:var(--num);font-size:11px;margin-top:3px;display:block}
.up{color:var(--forest)}.down{color:var(--clay)}.flat{color:var(--ash)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:940px){.grid2,.grid3{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--vein);padding:16px 18px}
.card h3{font-family:var(--ui);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ash);font-weight:400;margin:0 0 9px;display:flex;justify-content:space-between;gap:10px}
.card h3 .src{color:var(--brass);letter-spacing:.06em;text-transform:none;font-size:9.5px;white-space:nowrap}
.big{font-family:var(--display);font-size:30px;margin:2px 0 5px;letter-spacing:.01em}
.sm{font-size:12px;color:var(--slate);line-height:1.5}
.subfoot{margin-top:11px;padding-top:9px;border-top:1px solid var(--vein);font-size:10.5px;
  color:var(--ash);display:flex;align-items:center;gap:8px}
.card.openable{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.card.openable:hover{border-color:var(--brass);box-shadow:0 4px 14px rgba(184,135,59,.12)}

/* ---------- status strip ---------- */
.status{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.pill{background:var(--paper);border:1px solid var(--vein);padding:8px 13px;font-size:11.5px;
  display:flex;align-items:center;gap:9px;color:var(--slate)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--vein)}
th{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);font-weight:400;
  text-align:right;padding:7px 5px;border-bottom:1px solid var(--vein);white-space:nowrap}
th:first-child{text-align:left}
th.grp,td.grp{border-left:1px solid var(--vein)}
td{padding:5px 5px;text-align:right;font-family:var(--num);font-size:11px;
  font-variant-numeric:tabular-nums;border-bottom:1px solid #F1EDE7}
td:first-child{text-align:left;font-family:var(--ui);font-size:11px}
tbody tr:hover{background:#FAF8F4}
tr.total td{border-top:1px solid var(--brass);border-bottom:0;font-weight:700;background:#FAF8F4}
.cell{display:inline-block;padding:2px 6px;border-radius:2px}
.tag{display:inline-block;margin-left:7px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 5px;border:1px solid var(--vein);color:var(--ash)}
.tag.warn{color:var(--clay);border-color:var(--clay)}

/* ---------- controls ---------- */
.filters{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:20px;align-items:flex-end}
.group{display:flex;flex-direction:column;gap:8px}
.glabel{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.tabs{display:flex;flex-wrap:wrap;border:1px solid var(--vein);background:var(--paper)}
.tabs button{font:inherit;font-size:12.5px;color:var(--ink);background:none;border:0;
  border-right:1px solid var(--vein);padding:8px 13px;cursor:pointer;white-space:nowrap}
.tabs button:last-child{border-right:0}
.tabs button:hover{background:#F7F4EF}
.tabs button[aria-pressed="true"]{background:var(--ink);color:#F4F1EC}
input.search{font:inherit;font-size:12.5px;padding:8px 11px;border:1px solid var(--vein);
  background:var(--paper);width:250px}
.crumb{font-size:11px;color:var(--ash);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.crumb button{font:inherit;font-size:11.5px;color:var(--brass);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline}
.todo{background:var(--paper);border-left:3px solid var(--brass);border-top:1px solid var(--vein);
  border-right:1px solid var(--vein);border-bottom:1px solid var(--vein);padding:20px 22px;
  color:var(--slate);font-size:12.5px;line-height:1.6}
.todo b{color:var(--ink);font-weight:600}
.todo ul{margin:10px 0 0;padding-left:19px}
.todo li{margin:5px 0}
footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--vein);font-size:11.5px;
  color:var(--ash);line-height:1.6}
footer b{color:var(--slate);font-weight:600}

/* ---------- additions for the live application ---------- */

/* sign in */
.loginpage{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--cream)}
.loginbox{background:var(--paper);border:1px solid var(--vein);padding:34px 36px;width:360px;
  box-shadow:0 10px 34px rgba(31,27,28,.10)}
.loginbox h1{font-size:26px;margin-bottom:2px}
.loginbox .lede{margin-bottom:20px}
.loginform{display:flex;flex-direction:column;gap:14px}
.loginform label{display:flex;flex-direction:column;gap:7px;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash)}
.loginform input{font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--vein);
  background:var(--cream);color:var(--ink)}
.loginform input:focus{outline:none;border-color:var(--brass);background:var(--paper)}
.btn{font:inherit;font-size:12.5px;letter-spacing:.04em;background:var(--ink);color:var(--cream);
  border:0;padding:10px 18px;cursor:pointer}
.btn:hover{background:var(--wine)}
.flash{border:1px solid var(--clay);border-left:3px solid var(--clay);background:#FBF3F1;
  color:var(--clay);padding:10px 13px;font-size:12px;margin-bottom:16px}
.flash p{margin:0}

/* who is signed in, sitting at the right of the top bar */
.topright{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none}
.whoami{text-align:right;line-height:1.25;white-space:nowrap}
.whoami .wn{font-size:12.5px;color:#FFF}
.whoami .wa{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#C09AA0}
.signout{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#D3AFB3;
  text-decoration:none;border:1px solid rgba(255,255,255,.22);padding:6px 11px;white-space:nowrap}
.signout:hover{color:#FFF;border-color:#E8C89A}

/* filters that submit */
.filters form{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end}
.tabs button.on{background:var(--ink);color:#F4F1EC}
.tabs label{font:inherit;font-size:12.5px;color:var(--ink);border-right:1px solid var(--vein);
  padding:8px 13px;cursor:pointer;white-space:nowrap}
.tabs label:last-of-type{border-right:0}
.tabs label:hover{background:#F7F4EF}
.tabs label.on{background:var(--ink);color:#F4F1EC}
.tabs input[type=radio]{position:absolute;opacity:0;pointer-events:none}
select.sel,input.dt{font:inherit;font-size:12.5px;padding:8px 11px;border:1px solid var(--vein);
  background:var(--paper);color:var(--ink)}

/* nesting in the product line table */
tr.lvl1 td{background:#FAF8F4;font-weight:600}
tr.lvl1 td:first-child{font-family:var(--display);font-size:15px;font-weight:400}
tr.lvl2 td:first-child{padding-left:26px}
tr.lvl3 td:first-child{padding-left:48px;color:var(--slate)}
tr.unmapped td{background:#FBF6F2}
.asin{display:block;font-family:var(--num);font-size:10px;color:var(--ash);margin-top:1px}

/* a bar row instead of a chart library */
.bars{display:flex;align-items:flex-end;gap:2px;height:104px;padding:14px 16px 0;
  background:var(--paper);border:1px solid var(--vein);border-bottom:0}
.bars .b{flex:1;min-width:2px;background:var(--brass);opacity:.62}
.bars .b:hover{opacity:1;background:var(--wine)}
.scrollx{overflow-x:auto}
.pend{color:#BDB6B0}
.muted{color:var(--ash)}
.empty{background:var(--paper);border:1px solid var(--vein);padding:30px 22px;color:var(--ash)}
.subnote{font-size:10.5px;color:var(--ash);margin-top:4px}

/* second sign-in step */
.loginbox.wide{width:560px}
.setuprow{display:flex;gap:22px;align-items:flex-start;margin:6px 0 20px}
.qr{flex:none;width:190px;height:190px;background:#fff;border:1px solid var(--vein);padding:6px}
.qr svg{width:100%;height:100%;display:block}
.setupsteps ol{margin:0;padding-left:19px;font-size:12.5px;color:var(--slate);line-height:1.65}
.setupsteps li{margin-bottom:5px}
.manual{font-size:11.5px;color:var(--ash);margin:12px 0 0;line-height:1.7}
code.secret{font-family:var(--num);font-size:12.5px;letter-spacing:.09em;color:var(--ink);
  background:var(--cream);border:1px solid var(--vein);padding:4px 7px;display:inline-block;margin-top:4px}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--vein);
  border:1px solid var(--vein)}
.codes span{background:var(--paper);padding:11px 14px;font-family:var(--num);font-size:14px;
  letter-spacing:.06em}

/* people and permissions */
.addform{background:var(--paper);border:1px solid var(--vein);padding:16px 18px;
  display:flex;flex-direction:column;gap:13px;align-items:flex-start;margin-bottom:8px}
.areaticks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 18px;width:100%}
.areaticks label{font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:8px;cursor:pointer}
.areaticks label.off{color:var(--ash);cursor:default}
.areaticks input{accent-color:var(--brass)}
.person{background:var(--paper);border:1px solid var(--vein);padding:15px 18px;margin-bottom:12px}
.phead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.pmail{font-family:var(--num);font-size:13px;color:var(--ink)}
.pdate{margin-left:auto;font-size:10.5px;color:var(--ash)}
.prow{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--vein)}
.prow form{margin:0}
.linkbtn{font:inherit;font-size:11.5px;color:var(--brass);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline}
.linkbtn.danger{color:var(--clay)}
.btn.small{font-size:11.5px;padding:7px 13px}

.ticktools{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 2px}
.ticktools button{font:inherit;font-size:11.5px;color:var(--brass);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline}
.ticktools button:hover{color:var(--ink)}


/* Status is the dot alone. The words repeated on every line drowned the names
   and wrapped badly on the long ones. Hover gives the full status. */
.arealist li{cursor:default}
.arealist li .subname{flex:1;line-height:1.35}
.arealist li.islive .subname{color:var(--ink)}
.arealist li.islive a.subname{text-decoration:none}
.arealist li.islive:hover a.subname{text-decoration:underline;
  text-decoration-color:var(--brass);text-underline-offset:2px}

/* the hub opens straight on the areas; freshness lives in the footer */
.areagrid{margin-top:4px}

/* narrowing inside an area */
.areablocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:12px 20px;width:100%}
.areablock{min-width:0}
.areahead{font-size:12.5px;color:var(--ink);display:flex;align-items:center;gap:8px;cursor:pointer}
.areahead.off{color:var(--ash);cursor:default}
.areahead input{accent-color:var(--brass)}
.narrowed{font-family:var(--num);font-size:9.5px;color:var(--clay);
  border:1px solid var(--clay);border-radius:2px;padding:0 4px}
.subpick{margin:4px 0 0 22px}
.subpick summary{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);
  cursor:pointer;list-style:none}
.subpick summary::-webkit-details-marker{display:none}
.subpick summary::before{content:"+ ";color:var(--brass)}
.subpick[open] summary::before{content:"\2212 "}
.subpick label{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--slate);
  padding:3px 0;cursor:pointer;line-height:1.3}
.subpick input{accent-color:var(--brass);margin-top:2px;flex:none}

/* ---------- marketplace and month picker ----------
   The boxes are visible and clickable, and any change submits at once. The
   first version hid them with pointer-events:none, which made picking more
   than one marketplace impossible while looking as though it should work. */
.picker{margin-bottom:10px}
.prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.preset{font-size:11.5px;color:var(--brass);text-decoration:none;border:1px solid var(--vein);
  padding:4px 10px;background:var(--paper);white-space:nowrap}
.preset:hover{border-color:var(--brass)}
.preset.on{background:var(--ink);color:#F4F1EC;border-color:var(--ink)}
.mkttabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--vein);border:1px solid var(--vein)}
.mkt{background:var(--paper);padding:6px 10px;color:var(--slate);font-size:12.5px;
  display:flex;align-items:center;gap:7px;cursor:pointer;min-width:80px}
.mkt:hover{background:#F7F4EF;color:var(--ink)}
.mkt.on{background:var(--ink);color:#F4F1EC}
.mkt.on .cur{color:#B9AFA6}
.mkt input{accent-color:var(--brass);margin:0;cursor:pointer;flex:none;width:auto}
.mkt .mname{flex:1}
.mkt .cur{font-family:var(--num);font-size:9px;color:var(--ash);letter-spacing:.04em}
.mkt.fromsheet .mname{color:var(--ash)}
.mkt.fromsheet.on .mname{color:#F4F1EC}
.mrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}
.mrow .tabs{display:flex;border:1px solid var(--vein);background:var(--paper)}
.mtab{font-size:12.5px;color:var(--ink);text-decoration:none;padding:6px 11px;
  border-right:1px solid var(--vein)}
.mtab:last-child{border-right:0}
.mtab:hover{background:#F7F4EF}
.mtab.on{background:var(--ink);color:#F4F1EC}
.inlinelbl{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.inlinelbl .dt{text-transform:none;letter-spacing:0;font-size:12px;padding:5px 8px}
.src-sheet{font-family:var(--num);font-size:9px;color:var(--brass);
  border:1px solid var(--brass);border-radius:2px;padding:0 4px;margin-left:6px}
/* The bar used to be an inline span whose width in pixels varied, so it wrapped
   onto a second line on some rows and left the percentages at different
   heights. A fixed track with a proportional fill cannot wrap. */
td.share{white-space:nowrap}
td.share .sharenum{display:inline-block;min-width:44px;text-align:right}
td.share .sharetrack{display:inline-block;width:54px;height:5px;background:var(--vein);
  vertical-align:middle;margin-left:8px;overflow:hidden}
td.share .sharetrack i{display:block;height:100%;background:var(--brass);opacity:.75}

.mktgroup{display:flex;align-items:stretch;gap:0;margin-bottom:1px}
.rlabel{font-family:var(--num);font-size:9px;letter-spacing:.12em;color:var(--ash);
  background:var(--paper);border:1px solid var(--vein);border-right:0;
  display:flex;align-items:center;padding:0 9px;flex:none;min-width:44px}
.mktgroup .mkttabs{flex:1}

/* month selection */
.pickcol{width:30px;text-align:center!important;padding-left:10px!important;padding-right:4px!important}
.pickcol input{accent-color:var(--brass);cursor:pointer;width:auto;margin:0}
tr.picked td{background:#F4EFE4;border-top:1px solid var(--brass);border-bottom:1px solid var(--brass);
  font-weight:600;font-family:var(--num);font-variant-numeric:tabular-nums}
tr.picked td:nth-child(2){font-family:var(--ui);font-weight:400;color:var(--slate)}

.ch2row{display:flex;align-items:baseline;gap:16px}
.ch2row h2{flex:1}
.ch2row .btn{text-decoration:none;flex:none}

/* a product line, then the kinds within it */
.lineblock{margin-bottom:26px}
.lineblock.rollup table{border-color:var(--brass)}
.lineblock.rollup .ch2row h2{color:var(--ink)}
.allmark{font-family:var(--ui);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);border:1px solid var(--brass);padding:1px 6px;vertical-align:middle;
  margin-left:8px}
.prow.lines{align-items:flex-start}
.prow.lines .preset{margin-bottom:2px}

/* a month, then what it is made of - smaller and quieter, so the eye reads
   the month first and the breakdown only when it wants it */
table.withsplits tbody tr.mainmonth td{border-top:1px solid var(--vein)}
table.withsplits tbody tr.mainmonth td:nth-child(2){font-weight:600}
tr.splitrow td{font-size:11px;color:var(--ash);padding-top:3px;padding-bottom:3px;
  border-bottom:0;background:#FBFAF7}
tr.splitrow td:nth-child(2){text-align:left;padding-left:26px;font-family:var(--ui)}
tr.splitrow:hover td{background:#F6F3EE;color:var(--slate)}
.subname{color:var(--slate)}
.subshare{font-family:var(--num);font-size:9.5px;color:var(--brass);margin-left:7px}

.inlineform{display:flex;align-items:center;gap:14px;margin:0}


/* ---------- charts ----------
   Drawn by static/chart.js from a JSON block the server renders. The axis type
   is small and monospaced so it lines up with the table underneath it. */
.chart{background:var(--paper);border:1px solid var(--vein);padding:7px 6px 2px;margin-bottom:12px}
.chart h3{font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);margin:2px 0 6px 10px}
.chart .legend{font-size:11px;color:var(--ash);margin:0 0 6px 10px;display:flex;gap:14px;flex-wrap:wrap}
.chart .legend span{display:flex;align-items:center;gap:5px}
.chart .legend i{width:11px;height:9px;display:inline-block;border-radius:1px}
text.cax{font-family:var(--num);font-size:9.5px;fill:var(--ash)}

/* ---------- pinned summary ----------
   The table runs to ninety rows; the figures that matter should not scroll
   away with the header. */
/* The sticky stack: the summary bar sits at the top, and the table header
   parks directly underneath it. --pinh is that bar's own height, so the two
   never overlap; it is a variable because the bar wraps to two lines on a
   narrow screen and the header has to follow it down. */
:root{--pinh:33px}
@media(max-width:1100px){:root{--pinh:56px}}
.pinbar{position:sticky;top:0;z-index:40;
  background:var(--paper);border:1px solid var(--vein);
  padding:6px 12px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
  margin:0}
.pinbar b{font:inherit;font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ash);margin-right:6px}
.pinbar span{font-family:var(--num);font-size:12px;white-space:nowrap}
.pinbar .who{font-family:var(--ui);font-size:11.5px;color:var(--slate);
  margin-right:auto;letter-spacing:.02em}
@media(max-width:900px){.pinbar{padding:6px 12px;gap:12px}}

/* ---------- the sheet's own colours ----------
   The Daily TACoS Tracker paints its computed columns green through amber to
   red. Same three stops here, so the two read alike. */
td.heat{position:relative}
td.heat span.hv{position:relative}
th.sheethead{background:#cee1f3;color:#000}
tr.sheetrow td.dim{color:var(--ash)}

/* ---------- the brand metrics report ----------
   Metrics down, periods across, the way the team's own tabs are laid out. The
   metric name stays put while the periods scroll sideways. */
.chartrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.chartrow{grid-template-columns:1fr}}
table.report td,table.report th{white-space:nowrap;text-align:right;font-size:11px;padding:5px 4px}
table.report th.metric,table.report td.metric{text-align:left;position:sticky;left:0;
  background:var(--paper);z-index:2;font-family:var(--ui);font-size:11.5px;
  border-right:1px solid var(--vein);min-width:120px}
table.report th.metric{background:#cee1f3}
table.report tr.gap td{height:9px;padding:0;background:var(--cream);border:0}
table.report tr.total td.metric{font-weight:600}

/* ---------- clicking a column ----------
   The chart points at a row that is already on the page, so the click reads
   that row rather than keeping a second copy of the figures. */
.readout{display:none;flex-wrap:wrap;gap:5px 20px;background:var(--paper);
  border:1px solid var(--vein);border-top:0;padding:9px 14px 10px;margin:-18px 0 18px}
.readout.on{display:flex}
.readout .ro{font-family:var(--num);font-size:12px;white-space:nowrap}
.readout .ro b{font-family:var(--ui);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ash);margin-right:6px;font-weight:400}
.readout .ash{color:var(--ash);font-size:12px}
tr.picked-row td,td.picked-row,th.picked-row{box-shadow:inset 0 0 0 2px var(--brass)}
svg .hit{cursor:pointer}

/* from / to beside the day presets, applying as soon as a date is picked */
.rangeform{display:flex;align-items:center;gap:7px;margin-left:14px}
.rangeform input[type=date]{font:inherit;font-size:12px;font-family:var(--num);
  padding:3px 6px;border:1px solid var(--vein);background:var(--paper);color:var(--ink)}

/* the readout sits above the chart, as a compact card of the period's own figures */
.readout{margin:0 0 10px;border:1px solid var(--vein);border-left:3px solid var(--brass)}

/* the figures written onto the chart at the clicked column */
text.cohead{font-family:var(--num);font-size:11px;fill:var(--brass);
  letter-spacing:.04em}
text.cok{font-family:var(--ui);font-size:9.5px;letter-spacing:.09em;fill:var(--ash)}
text.cov{font-family:var(--num);font-size:11.5px;fill:var(--ink)}

/* the picked period, carried along in the sticky bar */
.pinbar .pickset{font-family:var(--num);font-size:12.5px;white-space:nowrap;
  padding-left:14px;border-left:1px solid var(--vein);color:var(--ink)}
.pinbar .pickset i{font-family:var(--ui);font-style:normal;font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ash);margin:0 5px 0 10px}
.pinbar .pickset b{font-family:var(--ui);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brass);margin-right:6px;font-weight:400}

/* ---------- the notes behind a toggle ----------
   The caveats matter -- which figures come from where, and where two sources
   disagree -- but they were four lines of prose above every table. Kept, one
   click away, rather than deleted. */
details.notes{margin:0}
details.notes summary{font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ash);cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:6px;padding:2px 0}
details.notes summary::-webkit-details-marker{display:none}
details.notes summary::before{content:"+";font-family:var(--num);font-size:12px;
  color:var(--brass);width:11px;text-align:center}
details.notes[open] summary::before{content:"\2212"}
details.notes summary:hover{color:var(--slate)}
details.notes > div{color:var(--slate);font-size:13px;line-height:1.55;
  margin-top:8px;padding-left:17px;border-left:1px solid var(--vein)}


/* ---------- the column headings stay put ----------
   A long table loses its headings within one screen of scrolling, which is the
   point at which a column of numbers stops meaning anything.

   The headings could not simply be made sticky: the table sits in a box with
   overflow-x:auto so wide tables can scroll sideways, and that box is itself a
   scroll container -- sticky inside it is measured against the box, not the
   page, so the heading scrolled away with everything else. The box therefore
   gets its own height and its own vertical scrollbar, which is the scroll the
   heading can actually stick to. */
/* The sticky header runs to about 260px on the page with the most controls;
   the table takes what is left so the two together stay inside one screen and
   only one of them scrolls at a time. */
/* The pinned block is the summary bar and the cards, about 120px; the table
   takes what is left so the two together stay inside one screen. */
.scrollx.tall{max-height:calc(100vh - 210px);min-height:260px;overflow:auto}
.scrollx.tall thead th{position:sticky;top:0;z-index:20;
  background:var(--paper);box-shadow:inset 0 -1px 0 var(--vein)}
.scrollx.tall thead th.sheethead{background:#cee1f3}
.scrollx.tall tfoot td{position:sticky;bottom:0;z-index:20;background:var(--paper);
  box-shadow:inset 0 1px 0 var(--vein)}
/* The metric column is sticky sideways as well, so its corner cell has to beat
   both directions. */
.scrollx.tall table.report thead th.metric{z-index:30}
.scrollx.tall table.report td.metric{z-index:10}

/* ---------- the controls stay put ----------
   Marketplace, product line, the date range and the summary belong together:
   they are what you reach for while reading the table, and scrolling back up
   to change a marketplace is the thing that made the pages tiring. They are
   one sticky block so their combined height never has to be guessed -- the
   pieces cannot drift apart or overlap each other. */
/* The page itself carries no top padding: that padding was the reason the
   block came to rest 30px down the screen instead of at the very top, with a
   strip of the table sliding through the gap above it. The space lives here
   instead, inside the block that is pinned. */
.stickytop{position:sticky;top:0;z-index:50;background:var(--cream);
  padding:14px 0 8px;margin:0 0 12px;
  box-shadow:0 5px 10px -8px rgba(31,27,28,.18)}
.stickytop .crumb{margin-bottom:7px}
.stickytop .picker{margin-bottom:8px}
.stickytop .pinbar{margin:0;box-shadow:none;position:static;border-bottom:0}
.stickytop .kpis{margin-top:0}
.stickytop .titlerow{margin-bottom:10px}
.stickytop h1{font-size:26px}

/* the notes toggle sits beside the title rather than under it, so the numbers
   start one line higher */
.titlerow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 10px}
.titlerow h1{margin:0}
.titlerow details.notes{margin:0;flex:1 1 100%}
.titlerow details.notes:not([open]){flex:0 0 auto}
.titlerow details.notes summary{position:relative;top:-2px}

/* The partial-month marker was wrapping a word per line inside the date column
   and stretching the row to five times its height. */
table td .tag{white-space:nowrap}
table tbody td:nth-child(2){white-space:nowrap}


/* ---------- compact ----------
   Every page had generous air between blocks, which meant scrolling past
   headings to reach numbers. Halved throughout; the tables keep their row
   height, since that is what carries legibility. */
.kpis{margin-bottom:12px}
.ch2row{margin:12px 0 6px}
h2{margin:0}
.scrollx{margin-bottom:12px}
.todo{margin:10px 0;padding:10px 13px}
p.h2sub{margin:3px 0 7px}
footer{margin-top:22px;padding-top:12px}
.prow,.mrow{margin-bottom:5px}

/* A week heading reading "WEEK 22 (25/05-31/05)" set every column as wide as
   that string, which pushed eight weeks past the edge of the screen. The name
   and the dates stack instead. */
table.report th .pname{display:block}
table.report th .pdates{display:block;font-size:8px;letter-spacing:.02em;
  color:var(--ash);margin-top:1px}

/* ---------- links out ----------
   The places the team works all day, under the areas. Grouped with real space
   between the groups: eleven links in one column reads as a wall. */
.slinks{padding:10px 0 14px;border-top:1px solid var(--vein);margin-top:6px}
.sgroup{margin-bottom:14px}
.sgroup:last-child{margin-bottom:0}
.sglabel{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#B6ADA6;padding:0 14px;margin-bottom:4px}
.slink{display:flex;align-items:center;gap:8px;padding:3px 13px;
  text-decoration:none;color:var(--slate);font-size:11px;line-height:1.25}
.slink:hover{color:var(--ink);background:#F2EEE8}
/* The provider's own favicon, at the size the sidebar has room for. Data Dive
   publishes none, so it falls back to a monogram in the group's colour. */
.smark{width:16px;height:16px;flex:none;border-radius:2px;object-fit:contain}
.smark.mono{color:#fff;font-family:var(--num);font-size:7.5px;letter-spacing:.02em;
  display:grid;place-items:center}
.slabel{flex:1}

/* ---------- inbound shipments ---------- */
tr.shiprow a.shiplink{color:var(--brass);text-decoration:none;font-weight:600}
tr.shiprow a.shiplink:hover{text-decoration:underline}
tr.openrow td{background:#FAF6EE}
tr.shiplines > td{padding:0 0 0 26px;background:#FAF8F4}
table.inner{border:0;background:transparent;margin:6px 0 10px}
table.inner th{padding:4px 6px;border-bottom:1px solid var(--vein)}
table.inner td{padding:3px 6px;border-bottom:0}
table.gridview td.metric .pname2{display:block;font-size:9.5px;color:var(--ash);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
table.gridview td.metric{min-width:200px}
table.gridview .zero{color:#D8D2CB}

/* ---------- the sheet grid ----------
   Attributes sit in the header so the shipment they describe is still on
   screen when you are deep in the ASIN block. */
.scrollx.tall table.gridview thead tr.attr th{position:sticky;z-index:18;
  background:var(--paper);font-family:var(--num);font-size:11px;
  text-transform:none;letter-spacing:0;color:var(--ink);font-weight:400;
  text-align:right;border-bottom:0}
.scrollx.tall table.gridview thead tr.attr th.metric{font-family:var(--ui);
  color:var(--slate);text-align:left;z-index:28}
.scrollx.tall table.gridview thead tr:last-child th{border-bottom:1px solid var(--vein)}
/* A heavier rule where one product family ends and the next begins. */
table.gridview tbody tr.newfamily td{border-top:2px solid var(--ash)}
table.gridview td.metric{display:table-cell;min-width:210px}
.pimg{float:left;margin-right:7px;border-radius:2px;object-fit:contain;
  background:#fff;border:1px solid var(--vein)}
.pasin{font-family:var(--num);font-size:10.5px;display:block}

/* The family's name over its block of ASINs. */
table.gridview tbody tr.famhead td{background:#F2EEE8;border-bottom:1px solid var(--vein)}
table.gridview tbody tr.famhead td.metric{font-family:var(--ui);font-size:11.5px;
  font-weight:700;color:var(--ink);letter-spacing:.01em;background:#F2EEE8}
table.gridview tbody tr.newfamily td{border-top:2px solid var(--ash)}

/* ---------- entering a shipment ---------- */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px 14px;margin-bottom:16px}
.f{display:flex;flex-direction:column;gap:3px}
.f input{font:inherit;font-family:var(--num);font-size:12px;padding:5px 7px;
  border:1px solid var(--vein);background:var(--paper);color:var(--ink)}
.f input:focus{outline:2px solid var(--brass-l);outline-offset:-1px}
.f input[readonly]{background:#F2EEE8;color:var(--slate)}
.fhint{font-size:9.5px;color:var(--ash);letter-spacing:.02em}
input.qty{font:inherit;font-family:var(--num);font-size:11px;width:74px;
  padding:3px 5px;text-align:right;border:1px solid var(--vein);background:var(--paper)}
input.qty:focus{outline:2px solid var(--brass-l);outline-offset:-1px}
.formfoot{display:flex;gap:10px;align-items:center;margin-top:14px}
.btn.ghost{background:transparent;color:var(--slate);border:1px solid var(--vein)}
table tbody tr.famhead td{background:#F2EEE8;font-family:var(--ui);font-size:11.5px;
  font-weight:700;color:var(--ink);text-align:left}
/* the + that opens a new column */
/* The new-shipment column, at the end of the row of columns where a new one
   would be written in the sheet. Sits at the top of the block rather than
   floating in the middle of eleven header rows. */
.addship{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 4px 8px;border:1px dashed var(--brass);color:var(--brass);
  background:var(--paper);text-decoration:none;border-radius:2px}
.addship .plus{font-size:17px;line-height:1;font-family:var(--num)}
.addship .addlab{font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.25;text-align:center}
.addship:hover{background:var(--brass);color:#fff;border-style:solid}
th.addcol{background:var(--cream);border-left:1px solid var(--vein);width:58px;
  vertical-align:top;padding:6px 5px}

/* ---------- one shipment, opened in place ---------- */
.shippanel{background:var(--paper);border:1px solid var(--brass);
  border-left-width:3px;padding:11px 14px 12px;margin:0 0 12px}
.sptop{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.sptop b{font-family:var(--num);font-size:14px}
.sptag{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
  border:1px solid var(--vein);padding:1px 6px}
.spmeta{font-family:var(--num);font-size:11.5px;color:var(--slate);margin-right:auto}
.spclose{color:var(--ash);text-decoration:none;font-size:17px;line-height:1;padding:0 3px}
.spclose:hover{color:var(--ink)}
.spgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:6px 16px;margin-bottom:10px}
.spf{display:flex;flex-direction:column;gap:1px}
.spv{font-family:var(--num);font-size:12px}
.sphint{font-size:11px;color:var(--ash);margin:8px 0 0;line-height:1.45}
th.sheethead.openrow{background:var(--brass-l)}

/* filtering the product rows while entering a shipment */
.rowfilter{font:inherit;font-size:12px;padding:4px 8px;min-width:230px;
  border:1px solid var(--vein);background:var(--paper);color:var(--ink)}
.rowfilter:focus{outline:2px solid var(--brass-l);outline-offset:-1px}
.filtercount{font-family:var(--num);font-size:11px;color:var(--ash)}
td.perc{font-family:var(--num);color:var(--slate)}
td.cartons{font-family:var(--num);color:var(--slate)}
td.cartons.part{color:var(--clay);font-weight:600}
.tally{display:flex;gap:22px;align-items:baseline;background:var(--paper);
  border:1px solid var(--vein);padding:8px 13px;margin-top:10px}
.tally b{font:inherit;font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ash);margin-right:7px;font-weight:400}
.tally span span,.tally > span{font-family:var(--num);font-size:13px}
.tnote{font-family:var(--ui) !important;font-size:11.5px;color:var(--ash)}
.tnote.warn{color:var(--clay)}

/* the original spreadsheet, one click from the page that mirrors it */
/* Google Sheets' own green, so the link reads as "the spreadsheet" at a
   glance rather than as one more grey control. */
.sheetlink{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--slate);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.sheetlink svg.sheeticon{width:15px;height:15px;flex:none}
.sheeticon .page{fill:#0F9D58}
.sheeticon .fold{fill:#0B6E3F}
.sheeticon .grid{fill:#fff}
.sheeticon .rule{stroke:#0F9D58;stroke-width:.9;fill:none}
.sheetlink:hover{color:#0F9D58}

/* Filter groups share a line and wrap together, rather than taking a row each. */
.prow.fwrap{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center}
.fgroup{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.fgroup .glabel{margin-right:2px}

/* a filter that has too many values to be a row of buttons */
.inlineform{display:inline-flex;align-items:center;gap:6px}
.inlineform select{font:inherit;font-size:11.5px;padding:3px 6px;
  border:1px solid var(--vein);background:var(--paper);color:var(--ink);
  max-width:230px}
.inlineform select:focus{outline:2px solid var(--brass-l);outline-offset:-1px}

/* the sales filters on one wrapping line, like the pickers elsewhere */
form.oneline{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px}
form.oneline .fgroup{gap:3px}
form.oneline .glabel{font-size:8.5px;letter-spacing:.12em}
form.oneline .dt{font:inherit;font-family:var(--num);font-size:11px;padding:2px 4px;
  border:1px solid var(--vein);background:var(--paper);color:var(--ink)}
form.oneline .dt:focus{outline:2px solid var(--brass-l);outline-offset:-1px}
form.oneline button.preset{font:inherit}

/* ---------- shipment split planner ----------
   The tool generates its own markup, so its class names are styled here in the
   hub's palette and scoped to .planner: they are names like .card, .row and
   .btn that the hub already uses for other things, and scoping is what lets
   the tool's own code stay untouched. */
.planner{font-size:12.5px}
.planner .row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.planner .pcard{background:var(--paper);border:1px solid var(--vein);padding:11px 13px}
.planner .two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:900px){.planner .two{grid-template-columns:1fr}}
.planner .subh{font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);margin-bottom:6px}
.planner .msg{background:#FAF8F4;border:1px solid var(--vein);padding:11px 13px;
  font-family:var(--num);font-size:11.5px;line-height:1.6;white-space:pre-wrap;
  max-height:300px;overflow:auto;color:var(--ink)}
.planner textarea{width:100%;min-height:120px;font-family:var(--num);font-size:11.5px;
  padding:8px 10px;border:1px solid var(--vein);background:var(--paper);color:var(--ink);
  line-height:1.55;resize:vertical}
.planner textarea:focus{outline:2px solid var(--brass-l);outline-offset:-1px}
.planner .mono-sm{font-family:var(--num);font-size:11px;color:var(--ash)}
.planner .hint{font-size:11.5px;color:var(--ash);margin-top:7px}
.planner .src{font-family:var(--num);font-size:11px;color:var(--ash);max-width:320px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.planner .pname{font-weight:600}

/* The planner is a sequence, not a dashboard: you cannot price options before
   the rates are in, or pack before an option is chosen. Numbering the sections
   says so without a paragraph explaining it. Brass on the number, the heading
   left in the display face it already wears. */
.planner .stepn{font-family:var(--num);font-size:10.5px;letter-spacing:.06em;
  color:var(--brass);border:1px solid var(--vein);background:var(--paper);
  padding:2px 6px 1px;margin-right:11px;position:relative;top:-3px}
.planner p.h2sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planner .card.empty{background:var(--paper);border:1px solid var(--vein);
  padding:14px 16px;color:var(--slate);line-height:1.6;font-size:12px}
.planner .card.empty b{color:var(--ink);font-weight:600}
.planner .psku{font-family:var(--num);font-size:10px;color:var(--ash);display:block}
.planner .cell-in{width:58px;font-family:var(--num);font-size:11px;text-align:right;
  padding:2px 4px;border:1px solid var(--vein);background:var(--paper);color:var(--ink)}

/* the placement options */
.planner .opts{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.planner .ocard{background:var(--paper);border:1px solid var(--vein);
  border-left:3px solid var(--vein)}
.planner .ocard.win{border-left-color:var(--forest)}
.planner .ocard.sel{border-left-color:var(--forest);background:#FBFDFB}
.planner .ohead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 13px;border-bottom:1px solid var(--vein);background:#FAF8F4}
.planner .olab{font-family:var(--display);font-size:16px}
.planner .ometa{font-size:11.5px;color:var(--ash)}
.planner .ototal{margin-left:auto;display:flex;align-items:baseline;gap:11px}
.planner .ototal .big{font-family:var(--num);font-size:18px}
.planner .ototal .per{font-family:var(--num);font-size:11.5px;color:var(--ash)}
.planner .best{display:inline-block;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--forest);border:1px solid var(--forest);
  padding:0 4px;margin-left:7px;vertical-align:1px}
.planner select.svc-pick{font:inherit;font-family:var(--num);font-size:11px;
  min-width:96px;padding:2px 5px;border:1px solid var(--vein);background:var(--paper)}
.planner .uni{display:flex;gap:7px;flex-wrap:wrap;padding:8px 13px;
  border-top:1px solid var(--vein);background:#FAF8F4;align-items:center}
.planner .uni .u{font-family:var(--num);font-size:11px;border:1px solid var(--vein);
  padding:2px 8px;cursor:pointer;background:var(--paper)}
.planner .uni .u:hover{border-color:var(--ash)}
.planner .uni .u.on{border-color:var(--forest);color:var(--forest)}
.planner .uni .u.na{opacity:.4;cursor:not-allowed}

/* one warehouse's block on the packing list */
.planner .man-h{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:9px 13px;border-bottom:1px solid var(--vein);background:#FAF8F4}
.planner .man-h .fc{font-family:var(--num);font-size:14px;font-weight:600}
/* Pinned to the right edge this ran off the card once a fifth shipment
   appeared. It flows after the title instead, and wraps rather than clipping. */
.planner .man-h .meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  flex:1 1 auto;min-width:0}
.planner .man-h .meta .k{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);display:block}
.planner .man-h .meta .v{font-family:var(--num);font-size:12px}

/* the verdict under the options */
.planner .verdict{margin:10px 0 14px;padding:11px 14px;background:var(--paper);
  border:1px solid var(--vein);border-left:3px solid var(--forest)}
.planner .verdict.warn{border-left-color:var(--clay)}
.planner .verdict .h{font-weight:700;font-size:13px;margin-bottom:2px}
.planner .verdict .b{font-size:12px;color:var(--slate)}

.planner .chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--num);
  font-size:11px;background:#FAF8F4;border:1px solid var(--vein);padding:1px 7px}
.planner .chip.ok{border-color:var(--forest);color:var(--forest)}
.planner .chip.no{border-color:var(--clay);color:var(--clay)}
.planner .fxnote{font-family:var(--num);font-size:10px;color:var(--ash)}
.planner table.plt td:nth-child(-n+4),.planner table.plt th:nth-child(-n+4){text-align:left}
.planner .card,.planner .pad{background:transparent;border:0;padding:0}

/* vessels side by side, one button each, priced */
.planner .vpick{display:flex;gap:4px;flex-wrap:wrap}
.planner .vpick .v{font:inherit;font-size:10.5px;font-family:var(--ui);
  border:1px solid var(--vein);background:var(--paper);color:var(--slate);
  padding:2px 7px;cursor:pointer;display:inline-flex;align-items:baseline;gap:5px;
  line-height:1.35}
.planner .vpick .v em{font-style:normal;font-family:var(--num);font-size:10px;color:var(--ash)}
.planner .vpick .v:hover{border-color:var(--ash);color:var(--ink)}
/* the chosen vessel in green: it is a choice made, not a warning */
.planner .vpick .v.on{border-color:var(--forest);background:var(--forest);color:#fff}
.planner .vpick .v.on em{color:#fff;opacity:.85}
.planner .vpick .v.na{opacity:.35;cursor:not-allowed}

/* The label sheets, one block per destination, in the Labels tab's order:
   which warehouse, both of its Amazon identifiers, then the products with the
   pages of the label file they occupy. The tab's blue and green survive as
   the two band colours; everything else is the hub's own. */
.planner .lblock{border:1px solid var(--vein);background:var(--paper);margin-bottom:14px}
.planner .lhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:9px 13px;background:#CFE2F3;border-bottom:1px solid var(--vein)}
.planner .lhead .fc{font-family:var(--num);font-size:14px;font-weight:600}
.planner .lids{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.planner .lids .k{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);display:block}
.planner .lids .v{font-family:var(--num);font-size:12px}
.planner table.lblt{border:0}
.planner table.lblt tbody tr{background:#EDF7F1}
.planner table.lblt th.pg{background:#FF9900;color:var(--ink)}
.planner table.lblt td{vertical-align:middle}
.planner td.pgcell{white-space:nowrap}
.planner input.pg{width:110px;font-family:var(--num);font-size:11px;text-align:left;
  padding:2px 4px;border:1px solid var(--vein);background:var(--paper);color:var(--ink)}
.planner input.pg:focus{outline:2px solid var(--brass-l);outline-offset:-1px}

.planner .lform{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 13px;border-top:1px solid var(--vein)}
.planner .lform input[type=file]{font-size:11px;max-width:260px}
/* A product only one factory makes has nothing to choose, so it reads as a
   fact rather than offering a switch that would be wrong to use. */
.planner .fixedwho{font-size:11px;color:var(--slate)}

/* The Supply Master's two tabs. Both carry the sheet's own two-row header: a
   band naming the group, then the columns under it. Kept narrow enough that
   even the fourteen-column carton view fits without the page scrolling
   sideways - the table scrolls inside its own box if a screen is small. */
table.sm{font-size:11.5px}
table.sm th,table.sm td{padding:3px 7px}
table.sm tr.grp th{background:#F2EEE8;color:var(--slate);font-size:8.5px;
  letter-spacing:.12em;text-transform:uppercase;text-align:left;
  border-bottom:1px solid var(--vein)}
table.sm tr.grp th + th{border-left:1px solid var(--vein)}
table.sm thead tr:last-child th{font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ash);white-space:nowrap}
table.sm td.sup{color:var(--slate);white-space:nowrap}
table.sm td.pname{font-weight:600}
table.sm tr.nospec td{color:var(--ash)}
table.sm tbody tr:hover td{background:#FAF8F4}
input.find{width:210px}
.soplink{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--vein)}
.soplink:hover{color:var(--brass);border-bottom-color:var(--brass)}
/* What is still moving reads first; delivered shipments are history. */
table.sm tr.moving td:first-child{box-shadow:inset 2px 0 0 var(--brass)}
.opens{font-size:10.5px;color:var(--clay)}

/* The line of the day. One rule of brass and a serif face, so it reads as a
   note pinned to the wall rather than as another panel of numbers - and it
   goes away when you click it. */
.daily{position:relative;background:var(--paper);border:1px solid var(--vein);
  border-left:3px solid var(--brass);padding:13px 40px 13px 17px;margin-bottom:14px}
.daily blockquote{margin:0;font-family:var(--display);font-size:16px;
  line-height:1.45;color:var(--ink)}
.daily cite{display:block;margin-top:5px;font-style:normal;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}
.daily .x{position:absolute;top:8px;right:10px;border:0;background:none;
  color:var(--ash);font-size:17px;line-height:1;cursor:pointer;padding:2px 5px}
.daily .x:hover{color:var(--ink)}

/* Copy and open WeChat. It cannot send on its own -- see planner.js -- so the
   label says what it does rather than implying a send. */
.planner .preset.wechat{display:inline-flex;align-items:center;gap:6px}
.planner .preset.wechat img{border-radius:2px}
.planner .preset.wechat:hover{border-color:#07C160;color:#07C160}

/* a rate that applies to one option only, under its warehouse's row */
.planner tr.peropt td{background:#FAF8F4}
.planner tr.peropt td.pname{font-size:10.5px;color:var(--ash);padding-left:16px;font-weight:400}

/* the rate is typed by hand, so the place to check it is one click away */
.fxlink{font-size:10px;letter-spacing:.06em;color:var(--brass);text-decoration:none;
  white-space:nowrap}
.fxlink:hover{text-decoration:underline}