/* Tekwani Grow styles: Thirsti Flow's app.css (5.82) with Tekwani Heritage Green #004B28 in place of Flow blue and
   Forest Green #2CA22C as the chrome accent. --blue keeps its name so the shared classes read the same in both apps.
   Grow-only rules are in grow.css. */
  :root{
    --red:#E02627; --accent:#2CA22C; --blue:#004B28; --grey:#D9D9D9;
    --ink:#101418; --ink-2:#5A6470; --ink-3:#8B939C;
    --line:#E4E7EA; --surface:#F3F5F7; --blue-tint:#E7F1EA; --red-tint:#FDECEC;
    --amber-tint:#FFF4E3; --amber:#8A5A00; --r-s:8px; --r-m:14px;
  }
  .logo-red{background-image:url("../../img/tekwani-h-green.png")}
  .logo-white{background-image:url("../../img/tekwani-h-white.png")}
  .logo-red,.logo-white{background-repeat:no-repeat;background-size:contain;
    background-position:left center;display:block}

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--surface);color:var(--ink);font-size:15px;line-height:1.45;
    font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  ::selection{background:var(--blue-tint)}
  ::-webkit-scrollbar{height:9px;width:9px}
  ::-webkit-scrollbar-thumb{background:#CED4DA;border-radius:9px}
  ::-webkit-scrollbar-track{background:transparent}
  .num{font-variant-numeric:tabular-nums}
  button{font:inherit;color:inherit;cursor:pointer}
  input,select,textarea{font:inherit;color:inherit}
  textarea{resize:vertical}
  :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  a{color:var(--blue)}

  /* ---- sign in ---- */
  #login{min-height:100vh;display:grid;place-items:center;padding:24px;
    background:linear-gradient(160deg,#00301A 0%,var(--blue) 46%,#002A16 100%)}
  #login .box{width:min(410px,100%);background:#fff;border-radius:18px;
    padding:34px 30px 30px;box-shadow:0 22px 60px rgba(0,30,15,.34);
    border-top:4px solid var(--accent)}
  #login .lg{width:150px;height:19px;margin-bottom:20px}
  #login h1{margin:0 0 3px;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
  #login .sub{color:var(--ink-2);font-size:13.5px;margin-bottom:22px}
  #login .foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
    font-size:11.5px;color:var(--ink-3);text-align:center;letter-spacing:.02em}

  .field{margin-bottom:13px}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
  /* Every field is a column, and the label reserves two lines whether or not it
     needs them. Without that, a label that wraps pushes its own input down and
     the field beside it no longer lines up \u2014 which is what made these forms
     look broken. */
  .field{margin-bottom:14px;display:flex;flex-direction:column;min-width:0}
  .field label{text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;
    font-weight:700;color:var(--ink-2);margin-bottom:6px;display:block;
    line-height:1.3;min-height:2.6em;display:flex;align-items:flex-end}
  /* a single field on its own row needs no reserved second line */
  .field.solo label{min-height:0}
  .two > .field,.three > .field{margin-bottom:0}
  .two,.three{margin-bottom:14px;align-items:start}
  /* 16px on the font is deliberate: anything smaller makes iOS zoom the page
     the moment a field is tapped, which is what made the forms feel squashed */
  .field input,.field select,.field textarea{width:100%;max-width:100%;
    border:1px solid #D7DDE3;border-radius:10px;padding:13px 14px;background:#fff;
    font-size:16px;line-height:1.35;min-height:48px;transition:.12s;-webkit-appearance:none}
  /* a date input carries its own picker button, so it needs less side padding
     or the value is pushed out of view */
  .field input[type=date]{padding:12px 8px 12px 12px;font-size:15px}
  .field input[type=date]::-webkit-calendar-picker-indicator{margin-left:0;padding:0}
  .field input[type=number]{padding-right:8px}
  .field textarea{min-height:88px;padding:12px 14px}
  .field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235A6470' stroke-width='2' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,75,40,.12);outline:none}
  .field input.num,.field input[type=number]{font-variant-numeric:tabular-nums}
  .field .hint{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.45}
  /* "required" sat hard against the label and read as one word. It is a quiet
     note beside the field name, not a shout. */
  .field label .rq{margin-left:6px;color:var(--red);font-weight:700;
    text-transform:none;letter-spacing:0;font-size:10.5px}
  .hint{font-size:12px;color:var(--ink-3);line-height:1.45}
  /* an input sitting next to a button */
  .inline{display:flex;gap:9px;align-items:stretch}
  .inline input,.inline select{flex:1;min-width:0}
  .inline .btn{white-space:nowrap;padding-left:16px;padding-right:16px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
  .cta{width:100%;max-width:100%;border:0;background:var(--red);color:#fff;font-weight:650;
    border-radius:10px;padding:15px;margin-top:10px;letter-spacing:.005em;font-size:15.5px;
    min-height:52px;
    box-shadow:0 6px 16px -8px rgba(224,38,39,.8);transition:.13s}
  .cta:hover{background:#C81F20}
  .cta:active{transform:translateY(1px)}
  .cta[disabled]{opacity:.45;cursor:default;box-shadow:none}
  .cta.ghost{background:#fff;color:var(--blue);border:1px solid var(--line);
    margin-top:8px;box-shadow:none}
  .cta.ghost:hover{background:var(--surface)}
  .btn{border:1px solid #D7DDE3;background:#fff;border-radius:9px;
    padding:11px 15px;font-weight:600;font-size:14px;min-height:44px;transition:.13s}
  .btn:hover{border-color:#C9D2DA;background:var(--surface)}
  .btn.primary{background:var(--red);border-color:var(--red);color:#fff}
  .btn.primary:hover{background:#C81F20;border-color:#C81F20}
  .btn.small{padding:7px 12px;font-size:13px;min-height:36px}
  .err{background:var(--red-tint);color:var(--red);border-radius:var(--r-s);
    padding:11px 12px;font-size:13.5px;margin-top:12px;display:none}
  .err.on{display:block}
  .ok{background:var(--okt,#E8F5EE);color:#1B7F4B;border-radius:var(--r-s);
    padding:11px 12px;font-size:13.5px;margin-top:12px;display:none}
  .ok.on{display:block}
  .linky{width:100%;background:none;border:0;color:var(--blue);font-size:13px;
    font-weight:600;padding:11px 0 2px;text-decoration:underline;text-underline-offset:3px}
  .linky:hover{color:var(--red)}

  /* ---- shell ---- */
  #app{display:none;min-height:100vh;flex-direction:column}
  #app.on{display:flex}
  header.top{background:var(--blue);color:#fff;border-bottom:3px solid var(--accent);
    position:sticky;top:0;z-index:30;box-shadow:0 1px 14px rgba(0,30,15,.2);
    /* saved to the home screen there is no Safari bar above this, so the header
       runs under the notch unless it is padded out of the way */
    padding-top:env(safe-area-inset-top, 0px)}
  header.top .brand{padding:11px 58px 12px;display:flex;flex-direction:column;align-items:center}
  header.top .lg{width:146px;height:19px;background-repeat:no-repeat;background-size:contain;
    background-position:center;display:block;opacity:.97}
  header.top .flowmark{font-size:10px;letter-spacing:.42em;text-transform:uppercase;
    margin-top:7px;opacity:.8;font-weight:600;text-indent:.42em}
  /* two chips on the left: back when there is somewhere to go back to, and
     refresh, which slides across to take its place when there is not */
  #refresh{left:55px}
  #refresh.alone{left:11px}
  #refresh svg{display:block}
  #refresh.spinning svg{animation:spinr .7s linear infinite}
  @keyframes spinr{to{transform:rotate(360deg)}}
  /* These sit absolutely inside the header. Padding on the header does not move
     an absolutely positioned child — its top is measured from the padding box
     edge — so the inset has to go into the offset itself, or they end up under
     the clock and the battery on a home-screen app. */
  .chip-btn{position:absolute;left:11px;top:calc(14px + env(safe-area-inset-top, 0px));
    width:36px;height:36px;border-radius:11px;
    background:rgba(255,255,255,.14);border:0;color:#fff;font-size:19px;line-height:1;
    display:grid;place-items:center;cursor:pointer;padding:0}
  .chip-btn:hover{background:rgba(255,255,255,.24)}
  .avatar{position:absolute;right:11px;top:calc(12px + env(safe-area-inset-top, 0px));
    width:40px;height:40px;border-radius:13px;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;
    display:grid;place-items:center;font-size:13.5px;font-weight:700;letter-spacing:.5px;
    cursor:pointer;padding:0}
  .avatar:hover{background:rgba(255,255,255,.26)}
  .avatar .dot{position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;padding:0 4px;
    border-radius:9px;background:var(--red);border:2px solid var(--blue);font-size:10px;
    display:grid;place-items:center;font-weight:700;letter-spacing:0}
  nav.modes{display:flex;gap:3px;background:rgba(0,0,0,.2);padding:3px;border-radius:9px;margin-top:10px}
  nav.modes button{background:none;border:0;color:#fff;font:inherit;font-size:11.5px;font-weight:650;
    padding:6px 15px;border-radius:7px;cursor:pointer;opacity:.72}
  nav.modes button.on{background:#fff;color:var(--blue);opacity:1}

  /* the screen title lives in the page now, not in the chrome */
  #pagehead{max-width:980px;margin:0 auto;width:100%;padding:15px 15px 0}
  @media (min-width:760px){ #pagehead{padding:18px 24px 0} }
  .pagetitle{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .pagetitle h1{margin:0;font-size:21px;font-weight:650;letter-spacing:-.02em}
  .pagetitle span{font-size:12.5px;color:var(--ink-2)}

  /* the six month run rate, above the tab bar */
  .runrate{background:#fff;border-top:1px solid var(--line);padding:7px 10px 5px;
    display:flex;gap:5px;align-items:flex-end;position:sticky;bottom:62px;z-index:24}
  .runrate .rr{flex:1;min-width:0;border:0;background:none;padding:0;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px}
  .runrate .rbar{width:100%;height:30px;display:flex;align-items:flex-end}
  .runrate .rbar i{display:block;width:100%;border-radius:4px 4px 0 0;background:#D3DAE1;
    transition:background .14s,height .2s}
  .runrate .rr.on .rbar i{background:linear-gradient(180deg,#2CA22C,#004B28)}
  .runrate .rl{font-size:9.5px;color:var(--ink-3)}
  .runrate .rr.on .rl{color:var(--blue);font-weight:700}
  .runrate .rv{font-size:9px;color:var(--ink-3)}
  .runrate .rr.on .rv{color:var(--blue);font-weight:650}
  .rrhead{display:flex;align-items:baseline;padding:8px 13px 0;background:#fff;
    border-top:1px solid var(--line);position:sticky;bottom:104px;z-index:24}
  .rrhead b{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
  .rrhead span{margin-left:auto;font-size:11px;color:var(--blue);font-weight:650}

  /* the raise sheet */
  .sheet{position:fixed;inset:0;background:rgba(16,20,24,.48);display:none;
    align-items:flex-end;z-index:40}
  .sheet.on{display:flex}
  /* the raise sheet slides to the very bottom of the screen, so the last row of
     buttons lands under the home indicator without this */
  .sheetcard{background:#fff;width:100%;max-width:560px;margin:0 auto;
    border-radius:20px 20px 0 0;
    padding:18px 15px calc(22px + env(safe-area-inset-bottom, 0px))}
  .sheetcard h3{margin:0 0 3px;font-size:17px}
  .sheetcard p{margin:0 0 14px;font-size:13px;color:var(--ink-2)}
  .acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .act{border:1px solid var(--line);border-radius:13px;padding:14px 5px;display:grid;
    justify-items:center;gap:7px;font-size:11.5px;font-weight:650;color:var(--ink-2);
    cursor:pointer;background:#fff}
  .act .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff}
  .rpills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rpill{display:flex;align-items:center;gap:10px;height:44px;border:1px solid var(--line);border-radius:22px;padding:0 14px;background:#fff;
    font-family:inherit;font-size:13.5px;font-weight:650;color:var(--ink);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rpill span{display:grid;place-items:center;flex:none} .rpill svg{display:block}
  .rpill:hover{border-color:var(--blue);background:var(--blue-tint)} .rpill.on{border-color:var(--blue);background:var(--blue-tint);font-weight:700}
  .sheetcard p{margin-bottom:10px}
  .act:hover{border-color:var(--blue);color:var(--blue)}

  main{flex:1;max-width:980px;width:100%;margin:0 auto;padding:4px 15px 96px;overflow-x:hidden}
  @media (min-width:760px){ main{padding:8px 24px 100px} .kpis{gap:11px} }
  /* Fixed to the window, not sticky in the page: sticky depends on nothing
     above it ever becoming a scroll box, and that has already broken once.
     main carries bottom padding so the last row is never underneath it. */
  /* ---- every figure strip in Office wears the dashboard's tiles ----
     The ten screens that open with a row of figures all use .kpis and .kpi, so
     the look is changed here once rather than screen by screen: a white tile,
     a large figure, its label under it and a small icon in the corner. The
     first tile of a strip is the navy one. A figure that is a warning (.bad)
     or is waiting on somebody (.wait) keeps its meaning in colour and icon. */
  body.office .kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:6px 0 16px}
  body.office .kpi{position:relative;background:#fff;border:1px solid #DDE1E6;border-left:1px solid #DDE1E6;border-radius:12px;
    padding:16px 62px 16px 18px;min-height:92px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:2px}
  body.office .kpi .v{font-size:26px;letter-spacing:-.02em;line-height:1.15}
  body.office .kpi .l{font-size:12.5px;margin-top:0;letter-spacing:0}
  body.office .kpi::after{content:"";position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:10px;
    background:var(--blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004B28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10M12 20V4M19 20v-7'/%3E%3C/svg%3E") center/20px no-repeat}
  body.office .kpis > .kpi:first-child:not(.bad):not(.wait){background:linear-gradient(135deg,#00341C,#004B28);border-color:#00341C;color:#fff}
  body.office .kpis > .kpi:first-child:not(.bad):not(.wait) .l{color:#CFE0D5}
  body.office .kpis > .kpi:first-child:not(.bad):not(.wait)::after{background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10M12 20V4M19 20v-7'/%3E%3C/svg%3E") center/20px no-repeat}
  body.office .kpi.bad{background:#FFF6F6;border-color:#F3B9B9}
  body.office .kpi.bad .v{color:#B01B1C}
  body.office .kpi.bad::after{background:#FDE7E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C81E1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 17V11a6 6 0 0 1 12 0v6l1.5 2h-15zM10 21h4'/%3E%3C/svg%3E") center/20px no-repeat}
  body.office .kpi.wait{background:#FFFBF0;border-color:#F0D48A}
  body.office .kpi.wait::after{background:#FDF1D3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6200' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/20px no-repeat}
  body.office button.kpi, body.office a.kpi{cursor:pointer;text-align:left;font-family:inherit}
  body.office button.kpi:hover, body.office a.kpi:hover{border-color:var(--blue);box-shadow:0 8px 22px -16px rgba(0,75,40,.6)}
  /* the search box and the tables under a strip, squared up to match */
  body.office .search{border-radius:10px;border:1px solid #DDE1E6;box-shadow:none;background:#fff}
  body.office .card.flat > .scroll > table th, body.office .card.flat table thead th{background:#EEF1F4;font-size:11px;letter-spacing:.3px}
  /* ---- Users: list and pane ---- */
  .pp-bar{display:flex;gap:10px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
  .pp-bar .search{flex:1 1 320px;margin:0;max-width:460px} .pp-bar .sp{flex:1}
  .pp-bar select{height:38px;border:1px solid #DDE1E6;border-radius:8px;padding:0 10px;font-family:inherit;font-size:13px;background:#fff}
  .pp{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:16px;align-items:start}
  @media (max-width:1250px){ .pp{grid-template-columns:minmax(0,1fr) 400px} }
  .pp-list table.ov-t tr.sel td{background:var(--blue-tint)} .pp-list table.ov-t tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
  .pp-list .chip{font-size:10.5px;margin-left:4px}
  /* main clips sideways with overflow-x:hidden, which makes it the sticky pane's scroll box and kills sticky; clip does not */
  main:has(.pp-pane){overflow-x:clip}
  .pp-pane{position:sticky;top:72px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;overflow:hidden}
  .pp-empty{padding:60px 30px;text-align:center;color:var(--ink-2);display:flex;flex-direction:column;gap:6px;font-size:13px}
  .pp-empty b{color:var(--ink);font-size:15px}
  .pp-hd{display:flex;gap:12px;align-items:center;padding:16px 18px 12px}
  .pp-hd h3{margin:0;font-size:16px} .pp-hd p{margin:2px 0 0;font-size:12px;color:var(--ink-2);line-height:1.45}
  .pp-av{width:42px;height:42px;border-radius:50%;background:#00341C;color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
  .pp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#DDE1E6;border-top:1px solid #DDE1E6;border-bottom:1px solid #DDE1E6}
  .pp-facts span{background:#FAFBFC;padding:9px 6px;text-align:center;font-size:10.5px;color:var(--ink-2);line-height:1.3}
  .pp-facts b{display:block;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
  .pp-tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid #DDE1E6}
  .pp-tabs button{border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:8px 10px;cursor:pointer;border-bottom:2px solid transparent}
  .pp-tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}
  .pp-body{padding:14px 18px;overflow:auto;flex:1}
  .pp-body .field{margin-bottom:11px} .pp-note{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--ink-2)}
  .pp-sec{border:1px solid #E3E7EC;border-radius:9px;margin-bottom:6px;background:#fff;overflow:hidden}
  .pp-sec.open{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
  .pp-sh{display:grid;grid-template-columns:150px minmax(0,1fr) 14px;gap:10px;align-items:center;width:100%;border:0;background:none;padding:10px 12px;
    font-family:inherit;text-align:left;cursor:pointer;color:var(--ink)}
  .pp-sh:disabled{cursor:default} .pp-sh:hover:not(:disabled){background:#F7F9FB}
  .pp-sh .l{font-size:11.5px;font-weight:650;color:var(--ink-2)} .pp-sh .v{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pp-sh svg{color:#9AA4AF;transition:transform .12s} .pp-sec.open .pp-sh svg{transform:rotate(90deg)} .pp-sec.open .pp-sh .v{white-space:normal}
  .pp-se{padding:4px 12px 12px;border-top:1px solid #EBEEF1;background:#FAFBFC}
  .pp-se .field{margin:10px 0 0} .pp-se .field input,.pp-se .field select{height:36px;font-size:13px;padding:0 10px}
  .pp-se .two{gap:10px} .pp-se .pp-note{margin:10px 0 0}
  .pp-sa{display:flex;gap:8px;margin-top:12px}
  .pp-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #EBEEF1}
  .pp-line b{display:block;font-size:12.5px} .pp-line em{font-style:normal;font-size:11px;color:var(--ink-2)}
  .pp-inline{display:flex;gap:8px;margin-top:6px} .pp-inline input{flex:1;min-width:0;height:34px;border:1px solid #DDE1E6;border-radius:7px;padding:0 10px;font-family:inherit;font-size:12.5px}
  .pp-chk{display:flex;gap:8px;align-items:center;font-size:12.5px;margin-top:10px}
  .btn.red{background:#C81E1F;border-color:#C81E1F;color:#fff}
  .pp-ft{padding:12px 18px;border-top:1px solid #DDE1E6;display:flex;gap:8px;background:#FAFBFC}
  .pp-area{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#56616E;margin:14px 0 4px}
  .pp-area:first-of-type{margin-top:0} .pp-area i{font-style:normal;letter-spacing:0;text-transform:none;font-weight:600}
  .pp-perm{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid #EBEEF1}
  .pp-perm .pd{width:9px;height:9px;border-radius:50%;background:#D5DAE0} .pp-perm .pd.on{background:#1B7A46}
  .pp-perm .pt b{display:block;font-size:12.5px;font-weight:600;line-height:1.35} .pp-perm .pt em{font-style:normal;font-size:11px;color:var(--ink-2)}
  .seg3{display:inline-flex;border:1px solid #DDE1E6;border-radius:7px;overflow:hidden;background:#fff}
  .seg3 button{border:0;background:none;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--ink-2);padding:5px 9px;cursor:pointer;border-left:1px solid #DDE1E6}
  .seg3 button:first-child{border-left:0}
  .seg3 button.on.inherit{background:#EEF1F4;color:var(--ink)} .seg3 button.on.allow{background:#1B7A46;color:#fff} .seg3 button.on.deny{background:#C81E1F;color:#fff}
  .pp-why{grid-column:2 / 4;display:flex;gap:6px;align-items:center;background:#FDF1D3;border-radius:8px;padding:6px}
  .pp-why input{flex:1;min-width:0;height:30px;border:1px solid #E0C36A;border-radius:6px;padding:0 8px;font-family:inherit;font-size:12px}
  .pp-open{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 0;color:var(--ink)}
  .pp-open .tick{color:#1B7A46;font-weight:700;width:13px;text-align:center} .pp-open.no{color:#7A8591} .pp-open em{font-style:normal;font-size:11px;margin-left:auto;color:#9A6200}
  .pp-orph{margin-top:16px;padding:0 16px 12px} .pp-orph summary{padding:14px 0;font-weight:650;font-size:13px;cursor:pointer} .pp-orph p{margin:0 0 8px;font-size:12px;color:var(--ink-2)}
  /* ---- every coloured tile in Office becomes a front-page tile ----
     Sales analysis, the drill-downs and anything else built from tile(): white,
     bordered, the figure carrying the colour instead of the whole box. Green,
     red and amber keep their meaning in the number and in the small square in
     the corner; blue, plum and slate were only ever decoration and go neutral.
     The first blue tile of a strip stays navy, as on Home. The customer report
     keeps its colours - that one goes to a buyer, not to a desk. */
  body.office .tiles:not(.c3){grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:14px}
  body.office .tiles:not(.c3) .tile{background:#fff;color:var(--ink);border:1px solid #DDE1E6;border-radius:12px;box-shadow:none;
    padding:14px 56px 14px 16px;min-height:92px;transform:none}
  body.office .tiles:not(.c3) .tile:hover{border-color:var(--blue);box-shadow:0 8px 22px -16px rgba(0,75,40,.6);transform:none}
  body.office .tiles:not(.c3) .tile .orb{display:none}
  body.office .tiles:not(.c3) .tile .v{font-size:26px;letter-spacing:-.02em;color:var(--ink)}
  body.office .tiles:not(.c3) .tile .l{font-size:12.5px;opacity:1;color:var(--ink-2);margin-top:2px;letter-spacing:0;font-weight:600}
  body.office .tiles:not(.c3) .tile .sub{font-size:12px;opacity:1;color:var(--ink-2);margin-top:3px}
  body.office .tiles:not(.c3) .tile .vs{opacity:1;color:var(--ink-2)}
  body.office .tiles:not(.c3) .tile .prog{background:#EEF1F4} body.office .tiles:not(.c3) .tile .prog i{background:var(--blue);opacity:1}
  body.office .tiles:not(.c3) .tile .go{right:14px;top:14px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
    opacity:1;font-size:17px;font-weight:700;background:var(--blue-tint);color:var(--blue)}
  body.office .tiles:not(.c3) .tile.t-green .v{color:#176B3C} body.office .tiles:not(.c3) .tile.t-green .go{background:#E2F3E9;color:#176B3C}
  body.office .tiles:not(.c3) .tile.t-green .prog i{background:#1B7A46}
  body.office .tiles:not(.c3) .tile.t-red{background:#FFF6F6;border-color:#F3B9B9}
  body.office .tiles:not(.c3) .tile.t-red .v{color:#B01B1C} body.office .tiles:not(.c3) .tile.t-red .go{background:#FDE7E7;color:#B01B1C}
  body.office .tiles:not(.c3) .tile.t-red .prog i{background:#C81E1F}
  body.office .tiles:not(.c3) .tile.t-amber{background:#FFFBF0;border-color:#F0D48A}
  body.office .tiles:not(.c3) .tile.t-amber .v{color:#7A4D00} body.office .tiles:not(.c3) .tile.t-amber .go{background:#FDF1D3;color:#7A4D00}
  body.office .tiles:not(.c3) .tile.t-amber .prog i{background:#E0A33D}
  body.office .tiles:not(.c3) > .tile.t-blue:first-child{background:linear-gradient(135deg,#00341C,#004B28);border-color:#00341C;color:#fff}
  body.office .tiles:not(.c3) > .tile.t-blue:first-child .v{color:#fff}
  body.office .tiles:not(.c3) > .tile.t-blue:first-child .l, body.office .tiles:not(.c3) > .tile.t-blue:first-child .sub{color:#CFE0D5}
  body.office .tiles:not(.c3) > .tile.t-blue:first-child .go{background:rgba(255,255,255,.14);color:#fff}
  /* the cut chips and tables on the same screens, squared up to match */
  body.office .quick button, body.office .cuts button{border-radius:8px}
  .fy{display:block;margin-top:7px;padding-top:7px;border-top:1px solid #DDE1E6;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
  .fy b{font-size:14px;color:var(--ink);font-weight:700}
  .fy.dark{border-top-color:rgba(255,255,255,.22);color:#CFE0D5} .fy.dark b{color:#fff}
  .ohm{display:flex;gap:4px}
  .ohm-c{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:4px 0 6px;border-radius:9px;
    font-family:inherit;cursor:pointer;min-width:0;color:var(--ink)}
  .ohm-c:hover{background:#F4F7FA} .ohm-c.on{background:var(--blue-tint)}
  .ohm-b{height:20px;display:flex;align-items:center}
  .ohm-b i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center} .ohm-b i.ok{background:#1B7A46} .ohm-b i.no{background:#C01F20}
  .ohm-g{border-bottom:3px solid transparent;padding-bottom:0}
  .ohm-c.miss .ohm-g{border-bottom-color:#C01F20}
  .ohm-c.miss .vl{color:#B01B1C;font-weight:700}
  .ohm-l i.ms{width:14px;height:3px;border-radius:2px;background:#C01F20}
  .ohm-g{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:130px;width:100%}
  .ohm-g > i, .ohm-g .bw{display:block;width:26%;max-width:24px;border-radius:3px 3px 0 0}
  .ohm-g i.py{background:#8C96A3} .ohm-g i.cy{background:#004B28} .ohm-g i.cy.run{background:#1B7A46}
  .ohm-g .bw{position:relative}
  .ohm-g .bw i.bud{position:absolute;left:0;right:0;bottom:0;background:#E0A33D;border-radius:3px 3px 0 0}
  .ohm-g .bw u{position:absolute;inset:0;border:1.5px dashed #E0A33D;border-bottom:0;border-radius:3px 3px 0 0;box-sizing:border-box;text-decoration:none}
  .ohm-c .lb{font-size:12px;font-weight:500} .ohm-c.on .lb{font-weight:700;color:var(--blue)}
  .ohm-c .vl{font-size:11px;color:var(--ink-2)} .ohm-c.on .vl{color:var(--blue);font-weight:700}
  .ohm-l{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;margin-top:8px;font-size:11.5px;color:var(--ink-2)}
  .ohm-l span{display:inline-flex;align-items:center;gap:6px} .ohm-l i{width:10px;height:10px;border-radius:2px;display:inline-block}
  .ohm-l i.py{background:#8C96A3} .ohm-l i.cy{background:#004B28} .ohm-l i.bud{background:#E0A33D} .ohm-l i.gh{border:1.5px dashed #E0A33D;box-sizing:border-box}
  /* ---- pricing workbench ---- */
  .pw{display:grid;grid-template-columns:286px minmax(0,1fr);gap:16px;align-items:start}
  .pw-side{position:sticky;top:72px;padding:14px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 116px);overflow:auto}
  .pw-seg{display:flex;border:1px solid #DDE1E6;border-radius:8px;overflow:hidden;background:#fff}
  .pw-seg button{flex:1 1 0;border:0;border-left:1px solid #DDE1E6;background:none;font-family:inherit;font-size:12px;font-weight:650;color:var(--ink-2);padding:7px 10px;cursor:pointer;white-space:nowrap}
  .pw-seg button:first-child{border-left:0} .pw-seg button.on{background:#00341C;color:#fff} .pw-seg button:disabled{opacity:.4;cursor:default}
  .pw-f{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:650;color:var(--ink-2);min-width:0}
  .pw-f input,.pw-f select{height:32px;border:1px solid #E0C36A;background:#FFF8E1;border-radius:6px;padding:0 8px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);width:100%;box-sizing:border-box;min-width:0}
  .pw-f input:disabled{background:#F4F5F7;border-color:#DDE1E6}
  .pw-f #pwfind, .pw-f input[data-pw="prospect"], .pl-box .pw-f input{background:#fff;border-color:#DDE1E6}
  .pw-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .pw-cap,.pl-cap{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#56616E;margin-top:4px}
  .pw-found{display:flex;flex-direction:column;border:1px solid #DDE1E6;border-radius:8px;overflow:hidden}
  .pw-found button{border:0;border-bottom:1px solid #EBEEF1;background:#fff;text-align:left;padding:7px 10px;font-family:inherit;cursor:pointer}
  .pw-found button:hover{background:var(--blue-tint)} .pw-found b{display:block;font-size:12.5px} .pw-found span{font-size:11px;color:var(--ink-2)}
  .pw-slide{border-top:1px solid #DDE1E6;padding-top:10px;display:flex;flex-direction:column;gap:4px}
  .pw-slide div{display:flex;justify-content:space-between;font-size:12px;font-weight:650} .pw-slide b{font-size:15px}
  .pw-slide input{width:100%;accent-color:var(--red);margin:0} .pw-slide em{font-style:normal;font-size:11px;color:var(--ink-2)}
  .pw-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid #DDE1E6;padding-top:10px;font-size:11px;color:var(--ink-2)}
  .pw-stats:empty{display:none} .pw-stats b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
  .pw-bar{display:flex;gap:8px;align-items:center;margin-bottom:10px} .pw-bar .sp{flex:1} .pw-bar .pw-seg{flex:none}
  .pw-cols{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}
  @media (max-width:1320px){ .pw-cols{grid-template-columns:1fr} .pw-insp{position:static !important} }
  table.pw-t td,table.pw-t th{padding:6px 9px;font-size:12px} table.pw-t .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  table.pw-t .cd{font-size:10.5px;color:var(--ink-2);white-space:nowrap} table.pw-t .ds{font-weight:500} table.pw-t .mut{color:var(--ink-2)}
  table.pw-t tr.sel td{background:var(--blue-tint)} table.pw-t .sub{display:block;font-size:10px;color:var(--ink-2)}
  tr.pw-brand td{background:#FAFBFC;padding:9px 10px !important;border-top:1px solid #DDE1E6} tr.pw-brand b{margin-left:10px;font-size:12px;color:var(--ink-2);vertical-align:middle} tr.pw-brand img{vertical-align:middle}
  .pw-d{width:52px;height:24px;border:1px solid #DDE1E6;border-radius:5px;text-align:right;padding:0 5px;font-family:inherit;font-size:12px;font-variant-numeric:tabular-nums;background:#fff}
  .pw-d.own{border-color:#E0C36A;background:#FFF8E1;font-weight:700}
  .pw-m{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 4px;border-radius:9px;font-weight:700;font-size:11.5px}
  .pw-m.g{background:#E2F3E9;color:#176B3C} .pw-m.a{background:#FDF1D3;color:#7A4D00} .pw-m.r{background:#FDE7E7;color:#B01B1C} .pw-m.n{background:#EEF1F4;color:#56616E;padding:1px 7px}
  .pw-insp{position:sticky;top:72px;padding:14px 16px}
  .pw-insp .hd span{font-size:11px;color:var(--ink-2)} .pw-insp .hd b{display:block;font-size:15px} .pw-insp .hd em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-2);margin-bottom:8px}
  .pw-w{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #EBEEF1;font-size:12.5px;color:var(--ink-2)}
  .pw-w span:last-child{font-variant-numeric:tabular-nums;color:var(--ink)} .pw-w.neg span:last-child{color:#B01B1C} .pw-w.tot{font-weight:700;color:var(--ink)}
  .pl-back{position:fixed;inset:0;z-index:70;background:rgba(14,20,28,.5);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
  .pl-box{width:min(780px,100%);background:#fff;border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;gap:8px}
  .pl-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .pl-hd h3{margin:0;font-size:18px} .pl-hd p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
  .pl-who{display:flex;flex-wrap:wrap;gap:6px}
  .pl-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .pl-g.four{grid-template-columns:repeat(4,minmax(0,1fr))} .pl-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pl-ck{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid #DDE1E6;border-radius:8px;cursor:pointer;font-size:12.5px}
  .pl-ck.on{border-color:var(--blue);background:var(--blue-tint)} .pl-ck input{margin-top:2px;accent-color:var(--blue)} .pl-ck b{display:block} .pl-ck em{display:block;font-style:normal;font-size:11px;color:var(--ink-2)}
  .pl-ft{display:flex;align-items:center;gap:8px;margin-top:8px;border-top:1px solid #DDE1E6;padding-top:12px} .pl-ft .hint{flex:1;font-size:11.5px;color:var(--ink-2);line-height:1.4}
  /* the printed price list */
  .plp{max-width:760px;margin:0 auto 24px;padding:8px 4px;font-family:inherit;color:#16202B;page-break-after:always;break-after:page}
  .plp:last-of-type{page-break-after:auto;break-after:auto}
  .plp-hd{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid #E02627;padding-bottom:12px}
  .wc{display:flex;flex-direction:column;gap:3px;line-height:1.25;white-space:nowrap;font-size:12.5px}
.wc>div{display:flex;align-items:center;gap:8px}
.wc .chip{margin:0} .wc .lnk{font-size:12.5px;padding:0} .wc .sub{font-size:12px} .wc .sub.bad{color:var(--red)}
.plp-hd .logo-red{display:block;width:170px;height:22px;background-repeat:no-repeat;background-size:contain;background-position:left center}
  .plp-hd span{display:block;font-size:10px;color:#56616E;margin-top:4px} .plp-hd .r{text-align:right} .plp-hd .r b{font-size:20px;letter-spacing:-.3px}
  .plp-band{margin-top:14px;padding:7px 10px;border-radius:4px;background:#00341C;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:1.4px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .plp-band.light{background:#F4F5F7} .plp-band img{height:20px !important;vertical-align:middle}
  table.plp-t{width:100%;border-collapse:collapse;background:none;page-break-inside:auto;table-layout:fixed}
  table.plp-t td{overflow:hidden;text-overflow:ellipsis} table.plp-t td:not(.r){white-space:normal;overflow-wrap:anywhere}
  table.plp-t th{font-size:8.5px;font-weight:700;letter-spacing:.5px;color:#56616E;text-align:left;padding:6px 10px 4px;border-bottom:1px solid #16202B;background:none}
  table.plp-t td{font-size:11px;padding:5px 10px;border-bottom:1px solid #E6E9ED;font-variant-numeric:tabular-nums;vertical-align:middle}
  table.plp-t tr{page-break-inside:avoid} table.plp-t .r{text-align:right;white-space:nowrap} table.plp-t .b{font-weight:700} table.plp-t .mut{color:#56616E} table.plp-t .cd{font-size:9.5px;color:#56616E}
  table.plp-t .deal{color:#E02627} table.plp-t td span{display:block;font-size:8.5px;color:#56616E}
  table.plp-t tr.plp-bandrow td{padding:14px 0 0 !important;border:0 !important} table.plp-t tr.plp-bandrow:first-child td{padding-top:12px !important}
  table.plp-t tr.plp-bandrow .plp-band{margin-top:0}
  table.plp-t tr.plp-h th{font-size:8.5px;font-weight:700;letter-spacing:.5px;color:#56616E;text-align:left;padding:6px 10px 4px;border-bottom:1px solid #16202B;background:none}
  table.plp-t tr.plp-h th.r{text-align:right}
  table.plp-t tr.plp-bandrow, table.plp-t tr.plp-h{page-break-after:avoid;break-after:avoid}
  .plp-ft{margin-top:14px;padding-top:10px;border-top:1px solid #DDE1E6;font-size:9px;color:#56616E;line-height:1.5}
  /* workbench, second pass: one narrow column on the left, the table gets the rest */
  .pw{grid-template-columns:232px minmax(0,1fr) !important;gap:14px !important}
  .pw-two{grid-template-columns:1fr !important;gap:7px !important}
  .pw-f input,.pw-f select{height:30px !important}
  .pw-stats{grid-template-columns:1fr 1fr}
  .pw-insp{position:static !important;padding:10px 0 0 !important;border-top:1px solid #DDE1E6}
  .pw-insp .hd b{font-size:13.5px !important} .pw-w{font-size:12px !important;padding:5px 0 !important}
  .pw-grid{overflow:hidden}
  table.pw-t{width:100%;min-width:0 !important;table-layout:fixed}
  table.pw-t th.c-code,table.pw-t td.cd{width:124px} table.pw-t th.c-un{width:84px} table.pw-t th.c-list{width:92px} table.pw-t th.c-disc{width:76px}
  table.pw-t th.c-price{width:128px} table.pw-t th.c-nsp{width:92px} table.pw-t th.c-gpr{width:92px} table.pw-t th.c-gp{width:84px} table.pw-t th.c-vs{width:72px} table.pw-t th.c-sh{width:104px}
  .pw-grid{max-width:1270px}
  .pw-uom{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;color:var(--ink-2)}
  .pw-uom select{height:32px;border:1px solid #DDE1E6;border-radius:7px;padding:0 8px;font-family:inherit;font-size:12.5px;font-weight:600;background:#fff;color:var(--ink)}
  table.pw-t td,table.pw-t th{padding:5px 7px !important} table.pw-t td.ds{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  table.pw-t td.cd{overflow:hidden;text-overflow:ellipsis}
  tr.pw-grp{cursor:pointer} tr.pw-grp:hover td{background:#E7F1EA}
  .pw-x{border:0;background:none;padding:0;margin:0 6px 0 0;width:20px;height:20px;border-radius:5px;color:var(--ink-2);cursor:pointer;vertical-align:middle;display:inline-grid;place-items:center}
  .pw-x svg{transition:transform .12s} tr.pw-grp.open .pw-x svg{transform:rotate(90deg)}
  tr.pw-grp td{font-variant-numeric:tabular-nums} tr.pw-grp td:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  tr.pw-grp + tr[data-pwrow] td{border-top:1px solid #DDE1E6}
  tr.pw-grp td{background:#F4F7FA;border-top:1px solid #DDE1E6;padding:6px 7px !important}
  tr.pw-grp b{font-size:12.5px} tr.pw-grp span{font-size:11px;color:var(--ink-2);margin-left:8px;font-weight:400}
  tr.pw-grp td.mut{font-size:10.5px;white-space:normal;line-height:1.2}
  .pw-d.grp{width:56px;height:26px;font-weight:700;border-color:#A9C2B2}
  .pw-d.grp.own{border-color:#E0C36A;background:#FFF8E1}
  @media (max-width:1180px){ table.pw-t th:nth-child(1),table.pw-t td.cd{display:none} }
  #pwwho{align-self:flex-start} .pl-box tr[data-whoopen]{cursor:pointer} .pl-box table .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .pw-seg.three button{font-size:11.5px;padding:7px 4px}
  .pw-more{display:flex;flex-wrap:wrap;gap:5px} .pw-more .mk-chip{font-size:11.5px;padding:3px 5px 3px 9px}
  .pw-note{font-style:normal;font-size:11px;color:var(--ink-2);line-height:1.4}
  .pw-fr{display:flex;border-bottom:1px solid #EBEEF1;background:#fff} .pw-fr:last-child{border-bottom:0}
  .pw-fr > button:first-child{flex:1;min-width:0;border:0 !important}
  .pw-fr .add{flex:none;border:0;border-left:1px solid #EBEEF1;background:#fff;color:var(--blue);font-family:inherit;font-size:11.5px;font-weight:700;padding:0 10px;cursor:pointer;white-space:nowrap}
  .pw-fr .add:hover{background:var(--blue-tint)}
  .pw-fr .add.off{display:flex;align-items:center;color:var(--ink-3);font-weight:600;cursor:default} .pw-fr .add.off:hover{background:#fff}
  table.pw-t th.c-sold{width:118px} .pw-grid{max-width:1380px !important}
  .pw-tot{max-width:1380px;margin-top:12px;background:#fff;border:1px solid #DDE1E6;border-radius:12px;padding:12px 16px;box-sizing:border-box}
  .pw-tot.none{font-size:12.5px;color:var(--ink-2)}
  .pw-tot .cap{font-size:11.5px;color:var(--ink-2);margin-bottom:9px}
  .pw-tot .g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .pw-tot .g span{display:block;font-size:11.5px;color:var(--ink-2);font-weight:600} .pw-tot .g b{display:block;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .pw-tot em{font-style:normal;font-size:11.5px;font-weight:700} .pw-tot em.dn{color:#B01B1C} .pw-tot em.up{color:#176B3C}
  .pw-tot .sub{margin-top:8px;font-size:11.5px;color:var(--ink-2)}
  .pw-left{align-self:stretch;display:flex;flex-direction:column;gap:12px;min-width:0}
  .pw-side{position:static !important;max-height:none !important;overflow:visible !important}
  .pw-left .pw-insp{position:sticky !important;top:70px;padding:12px 14px !important;border-top:1px solid #DDE1E6;max-height:calc(100vh - 110px);overflow:auto;box-sizing:border-box}
  .pw-w.sum{font-weight:700;color:var(--ink);border-bottom:1px solid #DDE1E6}
  .pw-w.sum span:first-child{color:var(--ink)}
  .rt-m{width:64px;height:30px;border:1px solid #DDE1E6;border-radius:6px;padding:0 6px;font-family:inherit;font-size:13px;font-weight:600;text-align:right}
  table.rt-t td{vertical-align:top;padding:10px 12px}
  .dz-days{float:right;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink-2)}
  .dz-fund{flex:none} .dz-fund button{padding:6px 12px}
  .dz-row.sal{display:flex;flex-wrap:wrap;gap:12px;align-items:end} .dz-row.sal .dz-in{width:150px}
  .dz-row.one{grid-template-columns:1fr}
  .dz-rsps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .dz-rsp{border:1px solid var(--line);border-radius:9px;padding:8px 12px;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:baseline}
  .dz-rsp span{font-size:11.5px;color:var(--ink-2);font-weight:600} .dz-rsp span i{font-style:normal;font-weight:400;color:var(--ink-3)}
  .dz-rsp b{font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;grid-row:span 2;align-self:center}
  .dz-rsp em{font-style:normal;font-size:11.5px;color:var(--ink-2)}
  .dz-rsp{grid-template-columns:1fr auto auto !important}
  .dz-rsp u.sg{text-decoration:none;grid-row:span 2;align-self:center;margin-right:14px;font-size:12px;color:var(--ink-2);background:#EEF1F4;border-radius:9px;padding:4px 10px;white-space:nowrap}
  .dz-rsp u.sg b{font-size:14px;color:var(--ink);grid-row:auto} .dz-rsp u.sg.dn{background:#FDE7E7;color:#B01B1C} .dz-rsp u.sg.dn b{color:#B01B1C}
  .dz-rsp u.sg.up{background:#E2F3E9;color:#176B3C} .dz-rsp u.sg.up b{color:#176B3C}
  .dz-rsp > b{grid-column:3} .dz-rsp > u.sg{grid-column:2;grid-row:1 / span 2}
  .dz-rsp.deal{border-color:#9AD0B1;background:#F3FAF6} .dz-rsp.deal b{color:#176B3C}
  .dz-up{margin-top:10px;padding:9px 12px;border-radius:9px;background:var(--surface)}
  .dz-up .lab{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;font-weight:600} .dz-up .lab b{font-size:15px}
  .dz-up .lab em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--ink-2)} .dz-up .lab a{color:var(--blue);font-weight:650;margin-left:6px}
  .dz-up input[type=range]{width:100%;accent-color:#176B3C;margin:6px 0 0}
  .dz-why{width:100%;box-sizing:border-box;margin-top:7px;height:32px;border:1px solid #E0C36A;background:#FFF8E1;border-radius:7px;padding:0 9px;font-family:inherit;font-size:12.5px}
  @media (max-width:760px){ .dz-rsps{grid-template-columns:1fr} .dz-row.sal .dz-in{width:calc(50% - 6px)} }
  .oh-prob.svc .svc-s{position:relative;display:flex;align-items:flex-end;gap:3px;height:44px;width:74px;flex:none;margin-right:6px}
  .oh-prob.svc .svc-s s{flex:1;border-radius:2px 2px 0 0;text-decoration:none;display:block;opacity:.55}
  .oh-prob.svc .svc-s s.on{opacity:1} .oh-prob.svc .svc-s s.sg{background:#1B7A46} .oh-prob.svc .svc-s s.sa{background:#E0A33D} .oh-prob.svc .svc-s s.sr{background:#C01F20}
  .oh-prob.svc .svc-s s{flex:1 1 0 !important;min-width:0;width:auto !important;padding:0 !important;border:0 !important}
  .oh-prob.svc .svc-s u{position:absolute;left:-3px;right:-3px;border-top:1.5px dashed #16202B;text-decoration:none;height:0}
  .oh-prob.svc i strong{font-weight:700}
  /* ---- sales analysis filters ---- */
  .an-bar{background:#fff;border:1px solid #DDE1E6;border-radius:10px;padding:10px 12px;margin-bottom:10px}
  .an-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:4px 0} .an-row .lab{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);width:64px}
  .an-row .segs{margin:0} .an-row select{height:32px;border:1px solid #DDE1E6;border-radius:7px;padding:0 8px;font-family:inherit;font-size:12.5px;background:#fff;max-width:200px}
  .an-picks{display:flex;flex-wrap:wrap;gap:6px}
  .an-pick{height:32px;border:1px solid #DDE1E6;border-radius:7px;padding:0 9px;font-family:inherit;font-size:12.5px;background:#fff;color:var(--ink);cursor:pointer;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .an-pick i{font-style:normal;color:var(--ink-3);margin-left:2px} .an-pick.on{border-color:var(--blue);background:var(--blue-tint);font-weight:650}
  .an-pop{width:min(520px,100%)} .an-list{max-height:52vh;overflow:auto;border:1px solid #DDE1E6;border-radius:9px}
  .an-list label{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid #EEF1F4;cursor:pointer;font-size:13px} .an-list label.on{background:var(--blue-tint)}
  .an-list label span{flex:1} .an-list label em{font-style:normal;font-size:11.5px;color:var(--ink-3)} .an-list input{width:16px;height:16px;accent-color:var(--blue)}
  /* ---- new product tracker ---- */
  .npd{padding:14px 16px !important} .npd-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
  .npd-top b{font-size:14.5px} .npd-top em{font-style:normal;font-size:12px;color:var(--ink-2)}
  .npd-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
  .npd-k > div{background:var(--surface);border-radius:9px;padding:9px 11px;min-width:0} .npd-k span{display:block;font-size:11.5px;color:var(--ink-2)}
  .npd-k b{display:block;font-size:20px;letter-spacing:-.02em;line-height:1.2} .npd-k em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-2)}
  .npd-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
  .npd-c{display:block;text-align:left;width:100%;background:#fff;border:1px solid #DDE1E6;border-radius:11px;padding:12px;font-family:inherit;cursor:pointer;color:var(--ink)}
  .npd-c:hover{border-color:var(--blue);background:var(--blue-tint)} .npd-c > span{display:block}
  .npd-c .hd{display:flex !important;gap:10px;align-items:center} .npd-c .hd svg{flex:none} .npd-c .hd b{display:block;font-size:14px}
  .npd-c .hd em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-2)} .npd-c .hd i{display:block;font-style:normal;font-size:11px;color:var(--ink-3)}
  .npd-c .big{display:flex !important;justify-content:space-between;align-items:baseline;margin-top:10px} .npd-c .big b{font-size:20px;letter-spacing:-.02em} .npd-c .big em{font-style:normal;font-size:11.5px;color:var(--ink-2)}
  .npd-c .sub2{font-size:11.5px;color:var(--ink-2);margin-top:1px} .npd-c .lab,.npd-w .lab{display:block;font-size:11.5px;color:var(--ink-2);margin-top:10px}
  .npd-c .bars{display:flex !important;gap:8px;margin-top:5px} .npd-c .bars > span{flex:1;text-align:center;display:block}
  .npd-c .bars u{display:flex;align-items:flex-end;height:42px;text-decoration:none} .npd-c .bars s{display:block;width:100%;border-radius:4px 4px 0 0;text-decoration:none}
  .npd-c .bars b{display:block;font-size:11.5px;font-weight:500;margin-top:2px} .npd-c .bars b.on{font-weight:700} .npd-c .bars i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3)}
  .npd-v{display:inline-block !important;margin-top:9px;font-size:11.5px;padding:3px 9px;border-radius:8px;background:#EEF1F4;color:var(--ink-2)}
  .npd-v.up{background:#E2F3E9;color:#176B3C} .npd-v.dn{background:#FFF1D6;color:#8A5A00}
  .npd-w{margin-top:12px;border-top:1px solid #DDE1E6;padding-top:2px} .npd-w > div{display:grid;grid-template-columns:110px minmax(0,1fr) 118px;gap:10px;align-items:center;font-size:12px;margin-top:6px}
  .npd-w u{display:block;height:8px;border-radius:4px;background:#EEF1F4;text-decoration:none} .npd-w s{display:block;height:8px;border-radius:4px;background:#2CA22C;text-decoration:none}
  .npd-w em{font-style:normal;color:var(--ink-2);text-align:right;white-space:nowrap} .npd-f{font-size:11.5px;color:var(--ink-3);margin-top:12px}
  @media (max-width:1300px){ .npd-g{grid-template-columns:1fr} }
  /* ---- the sync light ---- */
  .fsync{position:absolute;right:60px;left:auto;top:calc(26px + env(safe-area-inset-top, 0px));box-shadow:0 0 0 3px rgba(255,255,255,.18)}
  header.top{position:relative} body.office .fsync{display:none}
  body:not(.office) #refresh, body:not(.office) nav.modes{display:none}
  body:not(.office) header.top .brand{padding:13px 58px 13px}
  .me-sheet .me-row{text-decoration:none;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:13px 4px;border-bottom:1px solid #EEF1F4;font-family:inherit;font-size:14.5px;color:var(--ink);text-align:left;cursor:pointer}
  .me-sheet .me-row:last-child{border-bottom:0} .me-sheet .me-row svg{flex:none;color:var(--ink-2)} .me-sheet .me-row.red,.me-sheet .me-row.red svg{color:var(--red)}
  .me-sheet .me-row .osync{flex:none;margin:0 2px} .me-sheet .me-row span.sub{margin-left:auto;font-size:12px}
  .me-sheet .me-hd{display:flex;align-items:center;gap:12px;margin-bottom:8px} .me-sheet .me-hd .avatar{position:static;background:var(--blue);border:0;width:44px;height:44px;font-size:15px}
  .me-sheet .me-hd h3{margin:0;font-size:16px} .me-sheet .me-hd p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
  .oh-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);margin:12px 0 6px}
  .lnk{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer} .lnk:hover{color:var(--blue)}
  .lnk.syso{color:var(--blue);text-decoration:underline dotted;text-underline-offset:3px} .lnk.syso:hover{text-decoration-style:solid}
  .oreg-t tr.own td{background:#F1F7F3}
  .sopf-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
  .trend-t th,.trend-t td{padding:5px 8px;font-size:12.5px;white-space:nowrap} .trend-t td:first-child{min-width:96px}
  .so-page{display:grid;grid-template-columns:236px minmax(0,1fr);gap:14px;align-items:start}
  .so-rail{position:sticky;top:8px;display:grid;gap:8px;background:#fff;border:1px solid #E3E7EC;border-radius:14px;padding:12px}
  .so-rsec{display:grid;gap:5px;padding-bottom:8px;border-bottom:1px solid #EEF1F4} .so-rsec:last-of-type{border-bottom:0;padding-bottom:0}
  .so-rlbl{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);margin:2px 0}
  .so-rsegs{flex-wrap:wrap;gap:4px} .so-rsegs button{padding:4px 9px;font-size:12px}
  .so-rdates{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--ink-3)} .so-rdates select{flex:1;min-width:0;height:28px;font-size:11.5px;padding:0 4px}
  .so-rpick{display:flex;align-items:center;gap:6px;width:100%;border:1px solid #E3E7EC;background:#fff;border-radius:8px;padding:5px 8px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink);text-align:left}
  .so-rpick span{color:var(--ink-3);flex:none} .so-rpick b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} .so-rpick i{font-style:normal;color:var(--ink-3)}
  .so-rpick:hover{border-color:var(--blue)} .so-rpick.on{background:#E7F1EA;border-color:var(--blue)} .so-rpick.on b{color:var(--blue);font-weight:650}
  .so-rmore{display:flex;flex-wrap:wrap;gap:3px} .so-rchip{border:1px solid #E3E7EC;background:#F7F9FB;border-radius:10px;padding:2px 7px;font:inherit;font-size:11px;color:var(--ink-2);cursor:pointer}
  .so-rchip:hover{border-color:var(--blue);color:var(--blue);background:#fff} .so-rchip.on{background:var(--blue);border-color:var(--blue);color:#fff} .so-rcount{font-weight:500;text-transform:none;letter-spacing:0;color:var(--blue);margin-left:4px}
  .so-body{display:grid;gap:10px;min-width:0} .so-crumbs{font-size:12.5px}
  .so-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .so-tile{background:#fff;border:1px solid #E3E7EC;border-radius:12px;padding:10px 12px} .so-tile i{display:block;font-style:normal;font-size:11px;color:var(--ink-3)}
  .so-tile b{display:block;font-size:21px;line-height:1.2;margin:2px 0} .so-tile s{display:block;text-decoration:none;font-size:11px;color:var(--ink-2)} .so-tile em{font-style:normal;font-weight:600}
  .so-views{margin:0} .so-gridhd{padding:12px 14px 6px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .so-t{table-layout:auto;width:100%} .so-t th,.so-t td{padding:4px 7px;font-size:12px;line-height:1.25;overflow:visible;text-overflow:clip;white-space:nowrap;width:1%;max-width:none}
  .so-t th:first-child,.so-t td:first-child{width:auto;max-width:none;min-width:200px} .so-t td:first-child b{white-space:nowrap;overflow:visible;text-overflow:clip;display:inline}
  .so-t td:first-child .sub{font-size:10.5px} .so-t td .chip{padding:0 6px;font-size:10px} .so-t .so-mkt{min-width:0} .so-t .so-spk{width:76px} .so-t .so-spk svg{height:16px} .so-t tr.tot td{background:#F4F6F9;border-bottom:2px solid #D7DDE3;font-weight:600}
  .so-mkt{min-width:150px} .so-mktbar{display:inline-block;width:90px;height:7px;background:#EEF1F4;border-radius:4px;vertical-align:middle;margin-right:6px;overflow:hidden}
  .so-mktbar i{display:block;height:100%;background:#9AA5B1;border-radius:4px} .so-mktbar i.o{background:var(--blue)} .so-mktv{font-size:12px}
  .so-spk{width:80px} .so-t td.up{color:#1B7A46} .so-t td.down{color:#B01B1C}
  @media (max-width:1100px){ .so-page{grid-template-columns:1fr} .so-rail{position:static} .so-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .so-bar{margin-bottom:10px} .so-bar .an-row{flex-wrap:nowrap;align-items:flex-start} .so-bar .an-row .lab{width:78px;flex:none;padding-top:9px}
  .so-bar .an-row>.an-picks,.so-bar .an-row>.segs{flex:0 1 auto;min-width:0;flex-wrap:wrap} .so-bar .an-picks{display:flex;flex-wrap:wrap;gap:6px}
  .so-bar .an-row>.sub{padding-top:9px}
  /* ---- Fridges & POS: the module's screens share one rhythm with the rest of Office ----
     figures = .kpis/.kpi · bars = .pp-bar · lists = .card.flat > .scroll > table.ov-t ·
     a record = .fa-head card, then two columns of cards with key/value tables */
  .fa-head{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;padding:14px 16px}
  .fa-head h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
  .fa-head .meta{font-size:12.5px;color:var(--ink-2)}
  .fa-head .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .fa-cols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px;align-items:start}
  .fa-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .fa-cols>div,.fa-two>div{display:grid;gap:12px;min-width:0;align-content:start}
  .fa-cols .card,.fa-two .card{margin:0;min-width:0}
  .fa-cols .card.flat,.fa-two .card.flat{overflow:hidden}
  .fa-kv{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
  .fa-kv td{padding:7px 0;border-bottom:1px solid #EEF1F4;vertical-align:top;line-height:1.4}
  .fa-kv td:first-child{color:var(--ink-2);width:148px;padding-right:12px;white-space:nowrap}
  .fa-kv tr:last-child td{border-bottom:0}
  .fa-kv td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .fa-kv tr.tot td{font-weight:700;border-top:1px solid #DDE1E6}
  .fa-empty{color:var(--ink-3);font-size:13px;padding:8px 0 2px;line-height:1.45}
  .fa-tl{margin-top:8px}
  .fa-tl .ev{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid #EEF1F4;font-size:12.5px;line-height:1.4}
  .fa-tl .ev:last-child{border-bottom:0}
  .fa-tl .ev time{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
  .fa-tl .ev b{display:block;font-weight:650}
  .fa-tl .ev span{display:block;color:var(--ink-2);font-size:12px}
  .fa-acts{display:flex;flex-direction:column;gap:6px;align-items:stretch;margin-top:8px}
  .fa-acts .btn,.fa-acts label.btn{justify-content:flex-start;text-align:left;display:flex;align-items:center}
  .fa-acts .sub{padding:4px 0}
  .fa-form{margin-top:10px;padding-top:10px;border-top:1px solid #EEF1F4}
  .fa-form .dz-grid{margin-top:0}
  .fa-form .ft{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
  .fa-form .ft .sp{flex:1}
  .fa-note{font-size:12px;color:var(--ink-3);line-height:1.45;margin:8px 2px 14px}
  .fa-vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin-top:12px}
  .fa-vs-f label{font-weight:600}
  .fa-vs-in{display:flex;align-items:center;gap:10px}
  .fa-vs-in input{width:110px;height:38px}
  .fa-vs-in span{color:var(--ink-3);font-size:13px}
  .fa-vs-f .sub{font-size:12px;color:var(--ink-3);margin-top:4px}
  .fa-vs-ovr{display:flex;align-items:center;gap:14px;border:1px solid #E3E8ED;border-radius:10px;padding:12px 16px}
  .fa-vs-ovr>span{flex:1}
  .fa-vs-ovr .sub{display:block}
  .fa-vs-ovr input{width:46px;height:24px;padding:0 4px;font-size:12px}
  .fa-vs .ft{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
  @media (max-width:760px){ .fa-vs-grid{grid-template-columns:1fr} }
  .fm-wrap{padding:0;overflow:hidden}
  .fm-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:10px 12px;border-bottom:1px solid #EEF1F4;font-size:13px}
  .fm-legend .sp{flex:1}
  .fm-key{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
  .fm-key i{width:10px;height:10px;border-radius:50%;display:inline-block}
  .fm-lh{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3)}
  .fm-bang{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#1B1F24;color:#fff;font-size:11px}
  .fm-box{position:relative;isolation:isolate}  /* its own stacking context: the map's buttons stay under the menu and dialogs */
  .fm-map{height:calc(100vh - 240px);min-height:420px;z-index:0}
  .fm-tiles{position:absolute;top:10px;left:10px;z-index:500;display:flex;background:#fff;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.3);overflow:hidden}
  .fm-tiles button{border:0;background:#fff;padding:8px 14px;font:inherit;font-size:14px;color:#565656;cursor:pointer}
  .fm-tiles button.on{color:#000;font-weight:600}
  .fm-count{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:500;background:#fff;border-radius:16px;padding:5px 14px;font-size:12.5px;box-shadow:0 1px 4px rgba(0,0,0,.25);white-space:nowrap}
  .fm-float{position:absolute;left:10px;bottom:24px;z-index:500;background:#fff;border-radius:8px;padding:8px 12px;box-shadow:0 1px 4px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:5px;font-size:13px}
  .fm-float .fm-fh{font-size:12px;color:var(--ink-3)}
  .fm-float input{margin:0}
  .fm-pin{background:none;border:0}
  .fm-pin svg{display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
  .fm-pin .fm-n{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:#1B1F24;color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center}
  .fm-pop{max-height:260px;overflow-y:auto;font-size:13px}
  .fm-pop .fm-row{padding:6px 0;border-top:1px solid #EEF1F4}
  .fm-pop .fm-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}
  .fm-pop .sub{display:block;color:var(--ink-3);font-size:12px}
  .fm-pop .fm-c-over{color:#B42318}
  .fm-pop .fm-c-soon{color:#93600A}
  .fa-lines .ln{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #EEF1F4;font-size:13px}
  .fa-lines .ln:last-child{border-bottom:0}
  .fa-lines .ln .sub{display:block;font-size:12px}
  .fa-lines .ln .r{text-align:right;font-variant-numeric:tabular-nums}
  .fa-rcv{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:6px;margin-top:6px}
  .fa-rcv input,.fa-inl input,.fa-inl select{height:36px;border:1px solid #DDE1E6;border-radius:8px;padding:0 10px;font-family:inherit;font-size:13px;background:#fff;min-width:0}
  .fa-inl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .fa-steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:10px}
  .fa-st{font-size:12px;padding:4px 10px;border-radius:999px;background:#F1F3F5;color:#7A828C}
  .fa-st.done{background:#E6F4EA;color:#1E7B34}
  .fa-st.now{background:var(--blue);color:#fff;font-weight:600}
  .fa-st.bad{background:#FCE8E8;color:#B01B1C;font-weight:600}
  .fa-arr{color:#B5BBC2;font-size:13px}
  .fa-next{margin-top:12px;border:1px solid #CFE0F5;background:#F5F9FE;border-radius:10px;padding:12px 14px}
  .fa-next-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
  .fa-next-i{padding:8px 0}
  .fa-next-i+.fa-next-i{border-top:1px solid #DCE7F4}
  .fa-inl input{flex:1;min-width:120px}
  .pp-bar .segs{margin:0;padding:0}
  .pp-bar .note{font-size:12.5px;color:var(--ink-2);flex:1 1 300px}
  body.office .pp-bar{margin-bottom:12px}
  @media (max-width:1100px){ .fa-cols,.fa-two{grid-template-columns:1fr} .fa-kv td:first-child{width:120px} }
  /* ---- Store card (office + field) ---- */
  .sc-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
  .sc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .sc-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0}
  .sc-tile{background:#fff;border:1px solid #E3E7EC;border-radius:12px;padding:10px 12px}
  .sc-tile i{display:block;font-style:normal;font-size:11px;color:var(--ink-3)} .sc-tile b{display:block;font-size:20px;line-height:1.2;margin:2px 0} .sc-tile s{display:block;text-decoration:none;font-size:11px;color:var(--ink-2)}
  .sc-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;align-items:start} .sc-col{display:grid;gap:12px;min-width:0}
  .sc-t tr.sc-sec td{background:#F7F9FB;border-top:1px solid #E3E7EC;padding:6px 8px} .sc-sizes td.r,.sc-sizes th.r{padding-left:4px;padding-right:4px}
  .sc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .sc-two>.card{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch} .sc-two .sc-t{min-width:100%;width:max-content}
  .sc-win{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .sc-w{border:1px solid #E3E7EC;border-radius:10px;padding:10px} .sc-w .lbl{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3)} .sc-w b{display:block;font-size:18px;margin:2px 0}
  .sc-up{color:#0E7A46;font-style:normal;font-weight:600} .sc-dn{color:#B01B1C;font-style:normal;font-weight:600}
  .sc-bar{display:inline-block;height:7px;background:#EEF1F4;border-radius:4px;vertical-align:middle;overflow:hidden;margin-right:6px} .sc-bar i{display:block;height:100%;background:#9AA5B1;border-radius:4px} .sc-bar i.o{background:var(--blue)}
  .sc-t{width:100%;border-collapse:collapse;font-size:12.5px} .sc-t th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3);padding:6px 8px;border-bottom:1px solid #E3E7EC;background:#F7F9FB}
  .sc-t td{padding:7px 8px;border-bottom:1px solid #EEF1F4;vertical-align:middle} .sc-t .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .sc-t tr.own td{background:#F1F7F3}
  .sc-ins{display:grid;gap:6px} .sc-in{padding:8px 10px;border-radius:8px;font-size:12.5px;background:#F7F9FB;border:1px solid #E3E7EC}
  .sc-in.gap{background:#FFF8E1;border-color:#F3DFA0} .sc-in.oos{background:#FDECEC;border-color:#F3C1C1} .sc-in.won{background:#E2F3E9;border-color:#BFE3CC} .sc-in.lost{background:#FFF1D6;border-color:#F3DFA0}
  .sc-trend{display:flex;gap:4px;align-items:flex-end;height:64px} .sc-trend div{flex:1;display:flex;align-items:flex-end;gap:1px;height:100%} .sc-trend i{flex:1;background:#C9D1DA;border-radius:2px 2px 0 0;min-height:1px} .sc-trend i.o{background:var(--blue)}
  .sc-ph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .sc-ph a,.sc-ph div{display:block;aspect-ratio:4/3;border-radius:8px;background:#EEF1F4;overflow:hidden;position:relative;border:1px solid #E3E7EC} .sc-ph img{width:100%;height:100%;object-fit:cover;display:block}
  .sc-ph span{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;padding:1px 6px;border-radius:6px}
  .sc-acts{display:grid;gap:6px} .sc-act{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:6px 8px;border:1px solid #E3E7EC;border-radius:8px} .sc-act .ow{margin-left:auto}
  .sc-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
  .sc-cta .btn,.sc-cta a.btn{height:44px;font-size:13.5px;justify-content:center}
  .sc-f .fv-line{display:grid;grid-template-columns:24px minmax(0,1fr) 64px 84px;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid #EEF1F4} .sc-f .fv-line input[type=number]{height:36px;padding:0 6px;text-align:right}
  .sc-f .fv-line input[type=checkbox]{width:20px;height:20px}
  .fv-seg{display:flex;border:1px solid #C9D1DA;border-radius:8px;overflow:hidden;margin:4px 0} .fv-seg button{flex:1;height:38px;border:0;background:#fff;font:inherit;font-size:12px;color:var(--ink-2);border-right:1px solid #E3E7EC} .fv-seg button:last-child{border-right:0} .fv-seg button.on{background:var(--blue);color:#fff}
  .fv-asset{border:1px solid #E3E7EC;border-radius:8px;padding:8px;margin-bottom:8px}
  .fv-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .fv-photos label{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border:1.5px dashed #B9C3CE;border-radius:8px;font-size:11px;color:var(--ink-3);cursor:pointer;text-align:center;padding:4px} .fv-photos label input{display:none}
  @media (max-width:1500px){ .sc-two{grid-template-columns:1fr} }
  @media (max-width:1100px){ .sc-grid{grid-template-columns:1fr} .sc-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} .sc-win{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:600px){ .sc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .sc-t{font-size:12px} .sc-t td{padding:6px 4px} }
  .chip.off{background:#FDECEC;color:#B01B1C}
  .cat-hz{display:flex;border-bottom:1px solid #E3E7EC;margin-bottom:8px} .cat-hz button{flex:1;height:34px;border:0;background:none;font:inherit;font-size:12px;color:var(--ink-3);border-bottom:2px solid transparent;cursor:pointer} .cat-hz button.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:700}
  .cat-rule{font-size:11px;color:var(--ink-3);background:#F7F9FB;border-radius:8px;padding:6px 8px;margin:4px 0}
  .cat-vs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0} .cat-vs div{background:#F7F9FB;border-radius:8px;padding:6px 8px;min-width:0} .cat-vs i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cat-vs b{display:block;font-size:15px;white-space:nowrap}
  .cat-sc{border:1px solid #E3E7EC;border-radius:10px;padding:10px;margin-top:8px} .cat-sc.g{border-color:#BFE3CC} .cat-sc.r{border-color:#F3C1C1}
  .cat-t{font-size:11.5px} .wbar{display:inline-block;height:14px;border-radius:3px;flex:none}.wbar.g{background:#8A96A3}.wbar.r{background:var(--red)}.wt-t td,.wt-t th{vertical-align:top}
  .kd-btn{border:0;background:none;padding:6px 8px 6px 0;margin:-6px 0 -6px 0;cursor:pointer;vertical-align:middle;line-height:0} .kd.any{background:#9AA5B1} .cat-t td,.cat-t th{padding:5px 3px}
  .chip.cv-g{background:#E2F3E9;border-color:#BFE3CC;color:#0E7A46} .chip.cv-r{background:#FDECEC;border-color:#F3C1C1;color:#B01B1C} .chip.cv-a{background:#FFF8E1;border-color:#F3DFA0;color:#8A5A00} .chip.cv-n{background:#F3F5F7;color:var(--ink-3)}
  /* ---- store visit ---- */
  .vz-gl{display:flex;flex-direction:column;gap:4px;margin:6px 0} .vz-g{display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;font-size:12.5px;padding:4px 6px;border-radius:8px} .vz-g>span:first-child{font-weight:700;color:#8A8F98} .vz-g.ok>span:first-child{color:#0E7A46} .vz-g.cur{background:#F1F7F3} .vz-g.cur>span:first-child{color:#004B28} .vz-g .btn{grid-column:3}
  .vz-mode.three{grid-template-columns:1fr} .vz-mode.three button{text-align:left;display:flex;flex-direction:column;gap:2px;padding:10px 12px}
  .vz-sec{border:1px solid #E3E7EC;border-radius:10px;padding:10px;margin-top:8px} .vz-sec.need{border-color:#F3C1C1;background:#FFFBFB} .vz-sec.has{border-color:#BFE3CC} .vz-sec.off{opacity:.7}
  .vz-sec-hd{display:flex;gap:8px;align-items:center} .vz-sec-n{width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none} .vz-sec.has .vz-sec-n{background:#0E7A46} .vz-sec.off .vz-sec-n{background:#9AA5B1}
  .vz-sec-i{font-size:12.5px;color:var(--ink-2);margin:6px 0 8px;line-height:1.4} .vz-shoot.sm .btn{height:40px;font-size:12.5px} .vz-none{display:flex;gap:8px;align-items:center;font-size:12.5px;margin-top:6px;color:var(--ink-3)} .vz-none input{width:18px;height:18px}
  .vz-steps{display:flex;gap:4px;margin:2px 0 4px} .vz-steps span{flex:1;height:5px;border-radius:3px;background:#D9DEE4} .vz-steps span.on{background:var(--blue)} .vz-steps span.done{background:#0E7A46}
  .vz-stepnames{display:flex;gap:2px;margin-bottom:8px} .vz-stepnames button{flex:1;border:0;background:none;font:inherit;font-size:11px;color:var(--ink-3);padding:2px 0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vz-stepnames button.on{color:var(--blue);font-weight:700} .vz-stepnames button.off{opacity:.45;cursor:default}
  .vz-k{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);margin:8px 0 4px}
  .vz-item{border:1px solid #E3E7EC;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;margin-bottom:8px} .vz-item.rep{border-color:#F3C1C1;background:#FFF9F9} .vz-item.ok{opacity:.8}
  .vz-t{font-size:13px;line-height:1.4} .vz-tri{margin:2px 0 0} .vz-tri button.done{background:#0E7A46;color:#fff} .vz-tri button.no{background:#B01B1C;color:#fff} .vz-tri button.esc{background:#8A5A00;color:#fff}
  .vz-why{height:38px;font-size:12.5px}
  .vz-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .vz-mode button{border:2px solid #D9DEE4;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px;background:#fff;font:inherit;text-align:left;cursor:pointer} .vz-mode button.on{border-color:var(--blue);background:#F1F7F3} .vz-mode button:disabled{opacity:.5;cursor:default} .vz-mode b{font-size:14px}
  .vz-shoot{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin:8px 0} .vz-shoot .btn{height:60px;font-size:14px;gap:8px;cursor:pointer}
  .vz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px} .vz-grid .ph{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#EEF1F4;border:1px solid #E3E7EC;padding:0;font:inherit;cursor:pointer;display:block} .vz-grid .ph img{width:100%;height:100%;object-fit:cover;display:block} .vz-grid .ph span{position:absolute;left:3px;right:3px;bottom:3px;background:rgba(0,0,0,.6);color:#fff;font-size:9.5px;line-height:1.2;padding:2px 5px;border-radius:5px;text-align:left}
  .vz-grid .ph.bad{border:2px solid #B01B1C} .vz-grid .ph.drop{opacity:.4} .vz-grid .ph .x{position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:12px;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:24px;padding:0} .vz-grid .ph i{position:absolute;left:3px;right:3px;top:3px;background:#B01B1C;color:#fff;font-size:9px;font-style:normal;padding:2px 4px;border-radius:4px}
  .vz-decl{display:grid;grid-template-columns:minmax(0,1fr) 70px;gap:8px;align-items:center;font-size:12.5px} .vz-decl input{height:36px;text-align:center}
  .vz-rec{border:1px solid #E3E7EC;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;margin-bottom:8px} .vz-rec.rep{border-color:#F3C1C1;background:#FFF9F9} .vz-rec b{font-size:13px} .vz-rec p{margin:0;font-size:12.5px;line-height:1.4}
  .vz-pdf{border:1px solid #E3E7EC;border-radius:10px;padding:10px;display:flex;gap:10px;align-items:center;margin-bottom:6px} .vz-pdf .ic{width:38px;height:46px;border-radius:6px;background:#C01F20;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none} .vz-pdf .ic.l{background:var(--blue)} .vz-pdf b{font-size:13px}
  .vz-cyc{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12.5px} .vz-cyc label{display:flex;align-items:center;gap:6px} .vz-cyc input{width:58px;height:32px;text-align:center} .vz-cyc select{height:32px}
  .vz-shot{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap} .vz-shot .need{width:64px;height:64px;border-radius:8px;border:1.5px dashed #B01B1C;display:flex;align-items:center;justify-content:center;font-size:11px;color:#B01B1C;font-weight:700;text-align:center;flex:none} .vz-shot a.ok{width:64px;height:64px;border-radius:8px;overflow:hidden;display:block;flex:none;border:1px solid #E3E7EC} .vz-shot a.ok img{width:100%;height:100%;object-fit:cover;display:block}
  .fv-asset.need{border-color:#F3C1C1;background:#FFF9F9}
  .chip.cv-b{background:#E6EEF6;border-color:#B9CCE0;color:#004B28} .chip.cv-p{background:#EFE3F7;border-color:#D9C3EA;color:#6B3A94}
  .cat-ck{display:grid;gap:0} .cat-ck .ck{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;padding:7px 2px;border-bottom:1px solid #EEF1F4;font-size:12.5px;line-height:1.35} .cat-ck .ck>span:last-child{min-width:0;overflow-wrap:anywhere}
  .cat-ck .chip{justify-self:start;white-space:nowrap;padding:2px 8px;font-size:11px}
  .cat-sc .cat-hd{display:flex;flex-direction:column;gap:4px} .cat-sc .cat-hd .chip{align-self:flex-start;white-space:normal}
  .kd{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:5px} .kd.still{background:#C01F20} .kd.sparkling{background:#004B28}
  .cat-key{font-size:11px;color:var(--ink-3);margin:2px 0 4px}
  .socut{background:#fff;border:1px solid #E3E7EC;border-radius:12px;padding:8px 12px;margin-bottom:10px}
  .socut-row{display:flex;gap:10px;align-items:center;padding:4px 0} .socut-row+.socut-row{border-top:1px solid #EEF1F4}
  .socut-lbl{min-width:84px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3)}
  .socut-chips{display:flex;flex-wrap:wrap;gap:5px}
  .socut-chips button{border:1px solid #D7DDE3;background:#fff;border-radius:16px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
  .socut-chips button:hover{border-color:var(--blue)} .socut-chips button.on{background:var(--blue);border-color:var(--blue);color:#fff}
  .sopf{border:1px solid var(--line,#D7DDE3);background:#fff;border-radius:16px;padding:4px 11px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)} .sopf:hover{border-color:var(--blue)}
  .sopf.on{background:#E7F1EA;border-color:var(--blue);color:var(--blue)} .sopf i{font-style:normal;margin-left:4px;padding:0 3px;border-radius:8px} .sopf i:hover{background:#D3E2F4}
  #sopick{position:absolute;inset:0;z-index:60;min-height:100%} #sopick:empty{display:none} .sopk{position:absolute;width:330px;background:#fff;border:1px solid #D7DDE3;border-radius:12px;box-shadow:0 12px 32px rgba(15,30,50,.18);padding:10px}
  .sopk-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px} .sopk input#sopkq{width:100%;height:32px;margin-bottom:6px}
  .sopk-list{max-height:320px;overflow:auto;border-top:1px solid #EEF1F4;border-bottom:1px solid #EEF1F4}
  .sopk-row{display:flex;gap:8px;align-items:center;padding:5px 4px;font-size:12.5px;cursor:pointer} .sopk-row:hover{background:#F5F8FB} .sopk-row span{flex:1} .sopk-row input{width:15px;height:15px;margin:0}
  .sopk-row [data-only]{visibility:hidden;font-size:11px} .sopk-row:hover [data-only]{visibility:visible}
  .sopk-ft{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
  tr[data-uid] input.ai,tr[data-uid] select.ai{height:30px;font-size:12.5px;padding:0 6px;margin:0} tr[data-uid] input.num{text-align:right}
  body:not(.office) .oh-tile .v{font-size:20px} body:not(.office) .oh-tile.big .v{font-size:26px} body:not(.office) .oh-link{display:none}
  body:not(.office) .oh-bar{margin:0 0 10px}
  @media (max-width:600px){
    .oh-tile .t{flex-wrap:wrap;gap:4px 6px} .oh-tile .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .oh-tile .chip{flex:none}
    .oh-h{flex-wrap:wrap;gap:2px 8px} .oh-h span{font-size:11px}
    .oh-seg{max-width:100%;overflow-x:auto} .oh-seg button{padding:6px 10px;font-size:11.5px}
  }
  @media (max-width:760px){ .pl-box table.sync-t th:nth-child(4), .pl-box table.sync-t td:nth-child(4){display:none} }
  .obrand{position:relative}
  .osync{width:11px;height:11px;border-radius:50%;border:0;padding:0;cursor:pointer;background:#8C96A3;display:inline-block;vertical-align:middle;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
  .obrand .osync{position:absolute;right:16px;top:50%;margin-top:-6px}
  .osync.good{background:#2FBF71} .osync.late{background:#E0A33D} .osync.bad{background:#E5484D;animation:osyncp 1.6s ease-in-out infinite} .osync.unk{background:#8C96A3}
  .osync.big{width:13px;height:13px;margin-right:4px;box-shadow:none;cursor:default}
  @keyframes osyncp{0%,100%{box-shadow:0 0 0 3px rgba(229,72,77,.25)}50%{box-shadow:0 0 0 7px rgba(229,72,77,.05)}}
  @media (prefers-reduced-motion:reduce){ .osync.bad{animation:none} }
  table.sync-t td{vertical-align:middle;padding:9px 10px} table.sync-t .osync{box-shadow:none;cursor:default}
  #synchost .pl-back{z-index:95}
  .cb-search{flex:0 1 420px;min-width:260px;margin:0} .cb-search input{height:36px}
  .cb-found{background:#FFF8E1;border:1px solid #E0C36A;border-radius:9px;padding:7px 12px;font-size:12.5px;margin:0 0 10px} .cb-found a{color:var(--blue);font-weight:650;margin-left:4px}
  .cb-ports{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:0 0 10px} .cb-ports .pw-seg{flex:none} .cb-ports .pw-seg button{padding:6px 11px;font-size:11.5px}
  .cb-p{opacity:.55} .cb-p.on{opacity:1;border-color:var(--blue);background:var(--blue-tint);font-weight:650}
  .sv-wk.dist span i{left:12%;right:12%;background:#004B28}
  /* ---- service cube ---- */
  .sv-top{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:10px} .sv-m{flex:none} .sv-m button{padding:7px 12px}
  .sv-cuts{margin-bottom:12px;flex-wrap:wrap} .sv-cuts button:disabled{opacity:.35;cursor:default}
  .sv-k{grid-template-columns:repeat(6,minmax(0,1fr)) !important} @media (max-width:1200px){ .sv-k{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }
  .sv-wk{display:flex;gap:6px;align-items:flex-end;margin-top:8px} .sv-wk > div{flex:1 1 0;min-width:0;text-align:center}
  .sv-wk span{position:relative;display:block;height:70px} .sv-wk span i{position:absolute;left:18%;right:18%;bottom:0;border-radius:3px 3px 0 0;background:#8C96A3}
  .sv-wk span i.g{background:#1B7A46} .sv-wk span i.a{background:#E0A33D} .sv-wk span i.r{background:#C01F20}
  .sv-wk span u{position:absolute;left:0;right:0;border-top:1.5px dashed #16202B;height:0}
  .sv-wk b{display:block;font-size:11.5px;margin-top:3px} .sv-wk em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-2)}
  .sv-sort{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #DDE1E6} .sv-sort .pw-seg button{padding:5px 10px;font-size:11.5px}
  table.sv-t td,table.sv-t th{padding:7px 10px;font-size:12.5px} table.sv-t .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  table.sv-t tr[data-svrow]{cursor:pointer} table.sv-t tr[data-svrow]:hover td{background:var(--blue-tint)}
  .sv-bar{min-width:160px} .sv-bar span{display:inline-block;vertical-align:middle;width:calc(100% - 52px);height:8px;border-radius:4px;background:#EEF1F4}
  .sv-bar span i{display:block;height:8px;border-radius:4px;background:#C01F20} .sv-bar em{font-style:normal;font-size:11px;color:var(--ink-2);margin-left:6px}
  .st-row1{flex-wrap:wrap;align-items:center} .st-row1 .search{flex:1 1 260px;min-width:220px} .st-row1 .pw-seg{flex:none} .st-row1 select{flex:none}
  .st-row2{flex-wrap:wrap;margin-top:-2px} .st-row2 .btn{flex:none}
  /* ---- sales order capture v2 ---- */
  .so2-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px} @media (max-width:1180px){ .so2-grid{grid-template-columns:1fr} }
  .so2-h{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;margin-top:12px;align-items:end}
  .so2-h .field{margin:0} .so2-h .w2{grid-column:span 2} .so2-h .w4{grid-column:1/-1}
  .so2-col{display:flex;flex-direction:column;gap:10px;justify-content:space-between}
  .so2-h .field.tall{align-self:stretch} .so2-h .field textarea{min-height:0;height:100%;padding:8px 11px;font-size:13.5px;line-height:1.45;border-radius:8px;resize:none}
  .so2-doc .field.w2{grid-column:span 2}
  .oreg-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .oreg-bar input,.oreg-bar select{height:36px;margin:0;font-size:13px}
  .oreg-bar #oregq{flex:1 1 320px;min-width:220px} .oreg-bar select{flex:0 0 auto;width:auto;min-width:150px;padding-right:28px} .oreg-bar input[type=date]{flex:0 0 150px;width:150px;padding:0 8px}
  .oreg-t td{white-space:normal} .oreg-t td .sub{white-space:nowrap} .oreg-t tbody tr:hover td{background:#F4F7FB}
  .fta{display:flex;align-items:center;gap:12px;border:1px solid #DDE1E6;border-radius:8px;padding:9px 12px;font-size:13px;cursor:pointer;background:#fff}
  .fta input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--blue)} .fta span{display:flex;flex-direction:column;line-height:1.3;min-width:0} .fta .sub{font-size:11.5px}
  .fta.on{border-color:#A7D3B5;background:#F1FAF3} .fta.no{color:var(--ink-2);background:#FAFBFC;cursor:default} .fta.no input:disabled{opacity:.5}
  .podoc{display:flex;align-items:center;gap:10px;border:1px solid #DDE1E6;border-radius:8px;padding:9px 12px;font-size:13px;min-height:44px;box-sizing:border-box}
  .podoc.drop{border:1.5px dashed #B9C3CE;background:#FAFBFC;cursor:pointer;color:var(--ink-2)} .podoc.drop:hover,.podoc.drop.over{border-color:var(--blue);background:var(--blue-tint);color:var(--blue)}
  .podoc.drop.busy{cursor:progress;border-style:solid} .podoc.drop svg{flex:none;color:#7A8591} .podoc.drop:hover svg,.podoc.drop.over svg{color:var(--blue)}
  .podoc.has{background:#F7F8FA} .podoc-ic{flex:none;width:32px;height:32px;border-radius:8px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center}
  .podoc-nm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .podoc-nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .podoc-nm .sub{font-size:11.5px}
  .podoc.muted{color:var(--ink-3);background:#FAFBFC;border-style:dashed}
  .so2-ro{min-height:36px;box-sizing:border-box;padding:8px 11px;border:1px solid #EAEDF0;border-radius:8px;background:#F7F8FA;font-size:13.5px;line-height:1.45;color:var(--ink)}
  .so2-h .field.tall .so2-ro{height:100%}
  .so2-top{display:flex;flex-direction:column;gap:2px;margin-bottom:12px} .so2-top h2{margin:0;font-size:22px;display:inline} .so2-top .sub{margin-left:8px}
  .so2-x{width:28px;height:28px;border:1px solid #DDE1E6;border-radius:7px;background:#fff;color:var(--ink-2);font-size:16px;line-height:1;cursor:pointer;padding:0} .so2-x:hover{border-color:#C81E1F;color:#C81E1F}
  .so2-ov{display:block;font-size:10.5px;color:#8A5A00;text-align:right;margin-top:2px;line-height:1.2}
  /* the contract a line's price comes from; (i) lists the buying group and customer prices when both exist */
  .so2-src{display:block;font-size:10.5px;color:var(--ink-2,#5A6470);text-align:right;margin-top:2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;margin-left:auto;cursor:help}
  .so2-src i{font-style:normal;display:inline-grid;place-items:center;width:12px;height:12px;border:1px solid currentColor;border-radius:50%;font-size:9px;font-weight:700;margin-left:2px;vertical-align:1px}
  .so2-srcf{margin-top:6px;font-size:12px;border:1px solid var(--line,#E6E9EC);border-radius:8px;overflow:hidden}
  .so2-srcf>div{display:flex;justify-content:space-between;gap:8px;padding:5px 9px;color:var(--ink-2,#5A6470)} .so2-srcf>div+div{border-top:1px solid var(--line,#E6E9EC)}
  .so2-srcf>div.on{color:var(--ink,#1B2733);background:#EAF6EE} .so2-srcf>div.on b::after{content:" \2713";color:#1B7A46}
  .so2-h .field label{min-height:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;letter-spacing:.06em;margin-bottom:5px}
  .so2-h .field input,.so2-h .field select{height:36px;min-height:36px;padding:0 11px;font-size:13.5px;line-height:34px;border-radius:8px}
  .so2-h .field input[type=date]{padding:0 6px 0 10px;font-size:13px}
  .so2-h .field select{background-position:right 10px center;padding-right:30px}
  .so2-h .segs{margin:0;padding:0;overflow:visible;gap:0;border:1px solid #D7DDE3;border-radius:8px;height:36px;background:#fff}
  .so2-h .segs button{flex:1;height:34px;border:0;border-radius:7px;padding:0 10px;font-size:12.5px;box-shadow:none;margin:0}
  .so2-h .segs button.on{box-shadow:none}
  .so2-h .hint{margin:0;font-size:11.5px}
  .so2-wrap{overflow:visible} .card.flat.so2-card{overflow:visible}
  .so2-t{table-layout:fixed;width:100%}
  .so2-t th{white-space:nowrap;padding:9px 10px}
  .so2-t td{vertical-align:middle;padding:7px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .so2-t td.so2-code{position:relative;overflow:visible}
  .so2-t input,.so2-t select{height:34px;border:1px solid #DDE1E6;border-radius:7px;padding:0 9px;font-family:inherit;font-size:13.5px;background:#fff;width:100%;box-sizing:border-box}
  .so2-t input.num{text-align:right;font-variant-numeric:tabular-nums}
  .so2-t input:focus,.so2-t select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,75,40,.12);outline:none}
  .so2-t tr.over td{background:#FFF8E1} .so2-t tr.so2-new td{background:#F5F7FA}
  .so2-t td.r,.so2-t th.r{text-align:right}
  /* sell-out grid: beat the so2-t fixed layout and clipping so every column shows */
  table.so-t{table-layout:auto} table.so-t th,table.so-t td{overflow:visible;text-overflow:clip;padding:4px 7px} table.so-t td:first-child{overflow:visible}
  /* capture screen, condensed: the # and the whole stock code always show, the description wraps small over two lines */
  table.ov-t.so2-t td{padding:4px 8px} table.ov-t.so2-t th{padding:7px 8px}
  /* main clips sideways with overflow-x:hidden, which makes it a scroll box and stops position:sticky; clip does not */
  main:has(.so2-bar){overflow-x:clip}
  .so2-t input,.so2-t select{height:30px}
  .so2-t td.so2-n{overflow:visible;text-overflow:clip;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
  .so2-t td.so2-c{overflow:visible;text-overflow:clip}
  .so2-t td.so2-d{white-space:normal;font-size:12px;line-height:1.25}
  .so2-t td.so2-d>div{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .so2-t td.sub{line-height:1.2}
  /* the header folds into one line */
  .so2-fold{margin-bottom:10px} .so2-foldbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
  .so2-foldbar:hover{border-color:#C9D2DC} .so2-fold.open .so2-foldbar{border-radius:12px 12px 0 0;border-bottom-color:transparent}
  .so2-fold-ic{color:var(--ink-2);width:12px} .so2-fold-tx{margin-left:auto;color:var(--blue);font-size:12.5px;font-weight:600}
  .so2-chip{font-size:12px;background:#EEF3F8;color:#1E3D2C;border-radius:20px;padding:2px 9px;white-space:nowrap} .so2-chip.miss{background:#FFF1D6;color:#8A5A00;font-weight:600}
  .so2-fold .so2-foldbody{display:none} .so2-fold.open .so2-foldbody{display:block}
  .so2-fold .so2-grid .card{padding-top:12px;padding-bottom:12px}
  /* totals and actions stay on screen */
  .so2-bar{position:sticky;bottom:0;z-index:30;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 -6px 18px rgba(16,24,40,.08);padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
  .so2-bar-t{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;font-size:13px;color:var(--ink-2)} .so2-bar-t b{color:var(--ink);margin-left:4px}
  .so2-bar-v{font-size:14px;color:var(--ink)} .so2-bar-v b{font-size:16px} .so2-bar-v i{font-style:normal;font-size:11px;color:var(--ink-2);margin-left:6px}
  .so2-bar-a{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .so2-need{font-size:12.5px;font-weight:600;color:#8A5A00;background:#FFF1D6;border-radius:8px;padding:6px 10px;cursor:pointer}
  .so2-bar-h{flex-basis:100%;margin:0;font-size:11.5px;display:none} .so2-bar.review .so2-bar-h{display:block}
  .so2-room{height:240px}
  .so2-dd button b{white-space:nowrap}
  .so2-dd{position:absolute;left:10px;top:44px;z-index:40;background:#fff;border:1px solid #D7DDE3;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.12);min-width:460px;max-width:600px;display:none;white-space:normal;overflow:hidden}
  .so2-dd button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;background:#fff;padding:8px 10px;font-family:inherit;font-size:13px;cursor:pointer;border-bottom:1px solid #EEF1F4}
  .so2-dd button.on,.so2-dd button:hover{background:var(--blue-tint)} .so2-dd button span{color:var(--ink-2);white-space:nowrap}
  /* ---- store grid ---- */
  .sg-bar{display:flex;gap:8px;align-items:center;margin:0 0 8px;flex-wrap:wrap} .sg-scroll{max-height:70vh;overflow:auto;border:1px solid #DDE1E6;border-radius:10px;background:#fff}
  table.sg{border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:100%} table.sg th{position:sticky;top:0;background:#F5F7FA;text-align:left;padding:6px 6px;border-bottom:1px solid #DDE1E6;white-space:nowrap;font-size:11.5px;z-index:2}
  table.sg th:first-child,table.sg td:first-child{position:sticky;left:0;background:#fff;z-index:1} table.sg th:first-child{z-index:3;background:#F5F7FA}
  table.sg td{padding:2px 3px;border-bottom:1px solid #EEF1F4;white-space:nowrap} table.sg td.sg-ro{padding:6px 8px}
  table.sg input,table.sg select{height:28px;border:1px solid transparent;border-radius:5px;padding:0 6px;font-family:inherit;font-size:12.5px;background:transparent;min-width:70px}
  table.sg input:hover,table.sg select:hover{border-color:#DDE1E6;background:#fff} table.sg input:focus,table.sg select:focus{border-color:var(--blue);background:#fff;outline:0}
  table.sg .dirty{background:#FFF8E1 !important;border-color:#E0C36A !important}
  .sg-fill{margin-left:6px;border:0;background:transparent;color:var(--blue);font-family:inherit;font-size:11px;cursor:pointer;padding:0} .sg-fill:hover{text-decoration:underline}
  /* ---- price compliance ---- */
  .pc-head{overflow:visible !important;position:relative;z-index:7}
  .pc-find .pw-found{background:#fff;border:1px solid #DDE1E6;border-radius:10px;max-height:340px;overflow:auto}
  .pc-head{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:12px 14px;margin-bottom:12px}
  .pc-find{position:relative;flex:1 1 320px;max-width:460px} .pc-find input,.pc-find select{width:100%;height:36px;border:1px solid #DDE1E6;border-radius:8px;padding:0 10px;font-family:inherit;font-size:13px;box-sizing:border-box;background:#fff}
  .pc-find .pw-found{position:absolute;left:0;right:0;top:40px;z-index:8;box-shadow:0 14px 30px -18px rgba(0,75,40,.7)}
  table.pc-t td,table.pc-t th{padding:8px 10px;font-size:12.5px;vertical-align:middle} table.pc-t .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  table.pc-t tr.pc-deal td{background:#FFFBF0;border-top:0}
  .pc-sl{position:relative;min-width:190px;width:24%} .pc-sl input{width:100%;accent-color:var(--blue);margin:0;position:relative;z-index:1;display:block}
  .pc-sl .band{position:absolute;top:9px;height:12px;background:#CFE8D8;border-radius:3px;pointer-events:none}
  .pc-sl .sub{display:block;margin-top:2px}
  .pc-rsp{font-size:16px;letter-spacing:-.01em}
  .pc-in{width:82px;height:30px;border:1px solid #E0C36A;background:#FFF8E1;border-radius:6px;text-align:right;padding:0 7px;font-family:inherit;font-size:12.5px;font-weight:600}
  /* ---- sizing a deal: condensed ---- */
  .dz-top{display:flex;gap:10px;align-items:center}
  .dz-top > div:first-child{flex:1;min-width:0} .dz-top h3{margin:0} .dz-top p{margin:1px 0 0}
  .dz-top .pr{font-size:13px;color:var(--ink-2);white-space:nowrap;text-align:right} .dz-top .pr b{color:var(--ink);font-size:15px}
  .dz-top .pr .pu{display:block;font-size:11.5px;margin-top:2px} .dz-top .pr .pu b{font-size:12.5px}
  .dz-head,.dz-line{padding:13px 15px}
  .dz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px;margin-top:10px}
  .dz-grid .field{margin:0} .dz-grid .field.wide{grid-column:span 2}
  .dz-grid .field input,.dz-grid .field select{height:36px;padding:0 10px;font-size:13px}
  .dz-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 150px;gap:14px;align-items:end;margin-top:10px}
  .dz-row.all{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:center;border-top:1px solid var(--line);padding-top:10px}
  .dz-row.all > b{font-size:12.5px}
  .dz-sl{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ink-2);font-weight:600}
  .dz-sl span{display:flex;justify-content:space-between} .dz-sl b{color:var(--ink);font-size:13.5px;font-variant-numeric:tabular-nums}
  .dz-sl input{width:100%;accent-color:var(--red);margin:0;height:22px}
  .dz-sl input[data-store],.dz-sl input[data-allstore]{accent-color:var(--blue)}
  .dz-in{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ink-2);font-weight:600}
  .dz-in input{height:34px;border:1px solid var(--line);border-radius:7px;padding:0 9px;font-family:inherit;font-size:13px;text-align:right;width:100%;box-sizing:border-box}
  .dz-flow{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin-top:9px;font-size:12px;color:var(--ink-2)}
  .dz-flow .sh{font-size:13.5px;color:var(--ink)} .dz-flow .sh em{font-style:normal;color:var(--ink-2);font-size:12px}
  .dz-flow .sh b{font-size:15px} .dz-flow i{font-style:normal;color:var(--ink-3);font-size:11px;margin-left:4px}
  .dz-flow u{text-decoration:none;margin-left:7px;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:9px;background:#EEF1F4;color:var(--ink-2)}
  .dz-flow u.dn{background:#E2F3E9;color:#176B3C}
  .dz-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
  .dz-est{border-radius:var(--r-m);padding:12px 15px;margin-bottom:10px;color:#fff;background:#0E7A46}
  .dz-est.bad{background:#C01F20}
  .dz-est .hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.5px}
  .dz-est .hd b{font-size:24px;letter-spacing:-.02em}
  .dz-est .ft{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.25);font-size:12px;opacity:.95}
  .dz-est .ft b{margin-left:4px}
  @media (max-width:760px){
    .dz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dz-row{grid-template-columns:1fr 1fr} .dz-row .dz-in{grid-column:span 2}
    .dz-row.all{grid-template-columns:1fr} .dz-top .pr{display:none}
    .dz-est .hd{flex-direction:column;gap:2px}
  }
  /* ---- Home in Office: three questions ---- */
  .oh-bar{display:flex;align-items:center;gap:12px;margin:2px 0 14px;flex-wrap:wrap}
  .oh-hint{font-size:12px;color:var(--ink-2)}
  .oh-seg{display:inline-flex;border:1px solid #DDE1E6;border-radius:8px;overflow:hidden;background:#fff}
  .oh-seg button{border:0;border-left:1px solid #DDE1E6;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:7px 14px;cursor:pointer}
  .oh-seg button:first-child{border-left:0} .oh-seg button.on{background:#00341C;color:#fff}
  .oh-seg.small{align-self:flex-start} .oh-seg.small button{font-size:11.5px;padding:5px 11px}
  .oh{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
  @media (max-width:1180px){ .oh{grid-template-columns:1fr} }
  .oh-col{background:#fff;border:1px solid #DDE1E6;border-radius:14px;overflow:hidden}
  .oh-ch{padding:15px 18px 12px;border-bottom:1px solid #DDE1E6;border-top:4px solid #56616E}
  .oh-col.g .oh-ch{border-top-color:#1B7A46} .oh-col.b .oh-ch{border-top-color:#004B28} .oh-col.r .oh-ch{border-top-color:#C81E1F}
  .oh-ch h3{margin:0;font-size:17px} .oh-ch p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
  .oh-cb{padding:14px;display:flex;flex-direction:column;gap:10px;background:#F7F8FA}
  .oh-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .oh-tile{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid #DDE1E6;background:#fff;border-radius:11px;padding:12px 14px;
    font-family:inherit;color:var(--ink);cursor:pointer;min-width:0}
  .oh-tile:disabled{cursor:default} .oh-tile:hover:not(:disabled){border-color:var(--blue);box-shadow:0 8px 20px -16px rgba(0,75,40,.7)}
  .oh-tile .t{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:20px}
  .oh-tile .l{font-size:11.5px;font-weight:650;color:var(--ink-2)} .oh-tile .v{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
  .oh-tile .s{font-size:11.5px;color:var(--ink-2);line-height:1.4}
  .oh-tile.big .v{font-size:32px} .oh-tile.big{padding:16px 18px}
  .oh-tile.navy{background:linear-gradient(135deg,#00341C,#004B28);border-color:#00341C;color:#fff} .oh-tile.navy .l,.oh-tile.navy .s{color:#CFE0D5}
  .oh-tile .bar{display:block;height:6px;border-radius:3px;background:#EEF1F4;overflow:hidden;margin-top:6px}
  .oh-tile .bar i{display:block;height:100%;border-radius:3px;background:var(--blue)} .oh-tile .bar i.g{background:#1B7A46} .oh-tile .bar i.r{background:#C81E1F} .oh-tile .bar i.a{background:#E0A33D}
  .oh .chip.g{background:#E2F3E9;color:#176B3C} .oh .chip.a{background:#FDF1D3;color:#7A4D00} .oh .chip.r{background:#FDE7E7;color:#B01B1C}
  .oh .chip{font-size:10.5px;white-space:nowrap}
  .oh-card{background:#fff;border:1px solid #DDE1E6;border-radius:11px;padding:12px 14px}
  .oh-h{font-size:12.5px;font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between} .oh-h span{font-weight:500;color:var(--ink-2)}
  .oh-split{display:flex;height:28px;border-radius:7px;overflow:hidden;gap:2px}
  .oh-split button{border:0;background:#004B28;color:#fff;font-family:inherit;font-size:11px;font-weight:650;text-align:left;padding:0 9px;cursor:pointer;white-space:nowrap;overflow:hidden;min-width:6px}
  .oh-pb{display:block;width:100%;border:0;background:none;padding:0;margin:0 0 10px;font-family:inherit;text-align:left;cursor:pointer;color:var(--ink)}
  .oh-pb:last-child{margin-bottom:0}
  .oh-pb .hd{margin-bottom:4px !important}
  .oh-pb .rt{display:inline-flex;align-items:center;gap:8px;min-width:0}
  .oh-pb .bd{font-size:11.5px;color:var(--ink-2);white-space:nowrap} .oh-pb .bd b{color:var(--ink)}
  .oh-pb .track{height:24px !important;border-radius:6px !important}
  .oh-pb .track em{font-size:11px !important}
  .oh-pb .ft{margin-top:4px !important;gap:2px 14px !important;font-size:11px !important}
  .oh-card:has(.oh-pb){padding:10px 14px} .oh-card:has(.oh-pb) .oh-h{margin-bottom:8px}
  .oh-pb .pl{display:inline-flex;align-items:center;height:18px}
  .oh-pb .pl img{height:18px !important} .oh-pb .pl .logo-red{width:80px !important;height:11px !important}
  .oh-pb .pl .logo-red{display:block;width:96px;height:13px;background-repeat:no-repeat;background-size:contain;background-position:left center}
  .oh-pb .pl img{height:22px;width:auto;max-width:130px;object-fit:contain}
  .oh-pb .hd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:13px}
  .oh-pb .track{position:relative;display:flex;height:30px;border-radius:7px;background:#EEF1F4;overflow:hidden}
  .oh-pb .track i{display:flex;align-items:center;height:100%;font-style:normal;min-width:0;overflow:hidden}
  .oh-pb .track em{font-style:normal;font-size:11.5px;font-weight:700;padding-left:9px;white-space:nowrap;color:#fff}
  .oh-pb .track .rev{background:#004B28}
  .oh-pb .track .ord{background:repeating-linear-gradient(135deg,#4F9467 0 6px,#6FA584 6px 12px)}
  .oh-pb .track .over{background:#1B7A46}
  .oh-pb .track .mark{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px solid #E2231A;z-index:2} .oh-pb .track .mark.mtd{border-left-color:#16202B}
  .oh-pb .ft{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:11.5px;color:var(--ink-2)} .oh-pb .ft b{color:var(--ink)}
  .oh-pb .k{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
  .oh-pb .k.rev{background:#004B28} .oh-pb .k.ord{background:#6FA584}
  .oh-pb:hover .track{box-shadow:0 0 0 2px var(--blue-tint)}
  .oh-pb .hd .chip{white-space:nowrap;flex:none}
  @media (max-width:600px){
    .oh-pb .hd{flex-wrap:wrap;gap:4px 8px}
    .oh-pb .hd .pl{flex:1 1 auto} .oh-pb .hd .chip{margin-left:auto}
    .oh-pb .rt{flex:1 1 100%;justify-content:space-between;gap:6px}
    .oh-pb .bd{font-size:11px;white-space:normal}
    .oh-card:has(.oh-pb) .oh-h{flex-wrap:wrap;gap:2px 8px} .oh-card:has(.oh-pb) .oh-h span{white-space:nowrap;font-size:11px}
    .oh-pb .ft{flex-direction:column;gap:2px}
  }
  .oh-leg{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:11.5px;color:var(--ink-2)} .oh-leg b{color:var(--ink)}
  .oh-card .months{margin-top:0}
  .oh-prob{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;border:1px solid #DDE1E6;border-radius:11px;padding:14px 16px;
    font-family:inherit;cursor:pointer;background:#fff;color:var(--ink)}
  .oh-prob.flat{cursor:default}
  .oh-prob b{display:block;font-size:26px;letter-spacing:-.02em;line-height:1.1} .oh-prob em{display:block;font-style:normal;font-size:13px;font-weight:650;margin-top:2px}
  .oh-prob i{display:block;font-style:normal;font-size:12px;color:var(--ink-2)}
  .oh-prob.r{background:#FFF6F6;border-color:#F3B9B9} .oh-prob.r b,.oh-prob.r svg{color:#B01B1C}
  .oh-prob.a{background:#FFFBF0;border-color:#F0D48A} .oh-prob.a b,.oh-prob.a svg{color:#7A4D00}
  .oh-prob.ok b{color:#176B3C} .oh-prob svg{color:#9AA4AF;flex:none}
  .oh-prob:hover:not(.flat){border-color:var(--blue)}
  .oh-link{display:flex;justify-content:space-between;align-items:center;border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:650;color:var(--blue);
    cursor:pointer;padding:8px 4px;text-align:left}
  .sw .t .sub{display:block;margin-top:2px}
  .pick[data-code].on, .pick[data-code].on .t b{color:var(--ink) !important}
  #crout{margin-top:22px}
  .cr-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:12px;
    position:sticky;top:64px;z-index:5;scroll-margin-top:80px;box-shadow:0 6px 18px -14px rgba(0,75,40,.6)}
  body:not(.office) .cr-bar{top:8px}
  .cr-bar .lb{font-size:12.5px;font-weight:700;margin:0 6px 0 4px} .cr-bar .sp{flex:1}
  .cr-bar .hint{font-size:11.5px;color:var(--ink-2);margin:0 6px;max-width:420px;line-height:1.35}
  .cr-b{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:#fff;
    font-family:inherit;font-size:12.5px;font-weight:650;color:var(--ink);text-decoration:none;cursor:pointer}
  .cr-b i{font-style:normal;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:12px}
  .cr-b.wa i{background:#25D366} .cr-b.mail i{background:#C77C10} .cr-b.pdf i{background:#1E7A3C} .cr-b.close i{background:#56616E}
  .cr-b:hover{border-color:var(--blue);background:var(--blue-tint)}
  @media (max-width:700px){ .cr-bar .hint{display:none} }
  @media print{ .cr-bar{display:none} }
  .chip.go{background:var(--blue);color:#fff;border-color:var(--blue);display:inline-flex;align-items:center;gap:6px}
/* ---- customer report: the till-point view ---- */
.ct-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:7px;margin-bottom:12px}
.ct-t{background:#F7F9FB;border:1px solid #D9D9D9;border-top:3px solid var(--blue);border-radius:8px;padding:7px 9px;display:flex;flex-direction:column;gap:1px;min-width:0}
.ct-t i{font-style:normal;font-size:9px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ct-t b{font-size:17px;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1.15}.ct-t s{text-decoration:none;font-size:9.5px;color:var(--ink-3);line-height:1.25}
.ct-t.r{border-top-color:var(--red)}.ct-t.g{border-top-color:#0E7A46}.ct-t.k{border-top-color:#1F2933}
.ct-h{font-size:12.5px;margin:14px 0 6px;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.ct-tab{border-collapse:collapse;width:100%;font-size:11.5px;font-variant-numeric:tabular-nums}.ct-tab th{text-align:left;font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:4px 6px;border-bottom:1.5px solid var(--blue);white-space:nowrap}.ct-tab td{padding:4px 6px;border-bottom:1px solid #EEF1F4;white-space:nowrap}.ct-tab td.n,.ct-tab th.n{text-align:right}
.ct-p{display:inline-block;padding:1px 7px;border-radius:9px;font-size:10px;font-weight:700;white-space:nowrap}.ct-p.g{background:#E3F4EA;color:#0E7A46}.ct-p.b{background:#FBE9E9;color:#B01B1C}.ct-p.w{background:#FFF3D6;color:#7A5200}
.ct-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:640px){.ct-two{grid-template-columns:1fr}}
.ct-story{font-size:13px;line-height:1.5;background:#F7F9FB;border-left:4px solid var(--red);padding:9px 12px;border-radius:0 8px 8px 0;outline:none;min-height:60px}.ct-story:focus{box-shadow:0 0 0 2px rgba(0,75,40,.25)}
.ct-bars{display:grid;grid-template-columns:96px 1fr 46px;gap:5px 8px;align-items:center;font-size:12px}.ct-bar{height:8px;background:#EEF1F4;border-radius:4px;overflow:hidden}.ct-bar i{display:block;height:100%}.ct-bars .n{text-align:right;font-variant-numeric:tabular-nums}
.ct-chart{overflow-x:auto}.ct-k{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle}
/* ---- customer report: the market around them ---- */
  .mk-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .mk-chip{display:inline-flex;align-items:center;gap:6px;background:var(--blue);color:#fff;border-radius:999px;padding:5px 6px 5px 11px;font-size:12.5px;font-weight:600}
  .mk-chip em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;opacity:.7}
  .mk-chip button{border:0;background:rgba(255,255,255,.2);color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;padding:0}
  .mk-chip.more{background:#EEF1F4;color:var(--ink);padding:5px 11px}
  .mk-g{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
  .mk-k{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-2);width:96px;flex:none}
  .mk-o{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font-family:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
  .mk-o:hover{border-color:var(--blue);background:var(--blue-tint)} .mk-o i{font-style:normal;font-size:11px;color:var(--ink-3);margin-left:6px}
  .mk-say{font-size:13.5px;margin-bottom:10px} .mk-say b{color:var(--blue)}
  .mk-row{display:grid;grid-template-columns:90px 1fr 64px;gap:10px;align-items:center;margin-bottom:6px;font-size:12.5px}
  .mk-row .n{font-weight:650} .mk-row .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
  .mk-row .trk{position:relative;height:12px;border-radius:6px;background:var(--surface)}
  .mk-row .trk::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;border-left:1px solid var(--ink-3)}
  .mk-row .trk i{position:absolute;top:0;bottom:0;border-radius:6px}
  table.mk-t{width:100%;font-size:12px;margin-top:10px;border-collapse:collapse;background:none}
  table.mk-t th{font-size:10.5px;font-weight:700;letter-spacing:.3px;color:var(--ink-2);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
  table.mk-t th:first-child,table.mk-t td:first-child{text-align:left}
  table.mk-t td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
  /* ---- the overview: a control room ---- */
  .ov-heads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
  .ov-head{position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid #DDE1E6;background:#fff;border-radius:12px;
    padding:16px 18px;font-family:inherit;color:var(--ink);cursor:pointer;min-height:96px;box-sizing:border-box}
  div.ov-head{cursor:default}
  button.ov-head:hover{border-color:var(--blue);box-shadow:0 8px 22px -16px rgba(0,75,40,.6)}
  .ov-head .ic{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:10px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center}
  .ov-head b{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
  .ov-head em{font-style:normal;font-size:12.5px;color:var(--ink-2)}
  .ov-head i.bad{font-style:normal;color:var(--red);font-weight:700}
  .ov-head.navy{background:linear-gradient(135deg,#00341C,#004B28);border-color:#00341C;color:#fff}
  .ov-head.navy em{color:#CFE0D5} .ov-head.navy .ic{background:rgba(255,255,255,.14);color:#fff}
  .ov-head.alert{background:#FFF6F6;border-color:#F3B9B9} .ov-head.alert .ic{background:#FDE7E7;color:#C81E1F}
  .ov-head.calm .ic{background:#E2F3E9;color:#1B7A46}
  .ov-sech{display:flex;align-items:baseline;gap:12px;margin:22px 2px 10px}
  .ov-sech h3{margin:0;font-size:15px} .ov-sech span{font-size:12.5px;color:var(--ink-2)}
  .ov-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:6px}
  .ov-day{background:#fff;border:1px solid #DDE1E6;border-radius:10px;padding:9px 9px 10px;min-height:92px;display:flex;flex-direction:column;gap:4px;min-width:0}
  .ov-day.today{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
  .ov-day .dh{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:var(--ink-2);margin-bottom:2px}
  .ov-day .dh b{color:var(--ink);font-weight:650} .ov-day.today .dh b{color:var(--blue)}
  .ov-day button{display:flex;align-items:center;gap:6px;width:100%;border:0;background:#F4F5F7;border-radius:6px;padding:5px 7px;font-family:inherit;
    font-size:11.5px;color:var(--ink);cursor:pointer;text-align:left;min-width:0}
  .ov-day button:hover{background:#E9EDF1}
  .ov-day button i{width:7px;height:7px;border-radius:50%;background:var(--hue);flex:none}
  .ov-day button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ov-day em{font-style:normal;font-size:11px;color:var(--ink-3)} .ov-day em.free{color:#C5CCD4}
  table.ov-t td .sub{display:block;font-size:11px;color:var(--ink-2);font-weight:400}
  @media (max-width:900px){ .ov-week{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:14px}
  .ov-tile{display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid #DDE1E6;background:#fff;border-radius:12px;padding:14px 16px;
    font-family:inherit;color:var(--ink);cursor:pointer;min-height:148px;box-sizing:border-box;transition:box-shadow .12s,border-color .12s}
  .ov-tile:hover{border-color:var(--hue);box-shadow:0 10px 24px -18px var(--hue)}
  .ov-tile.on{border-color:var(--hue);box-shadow:0 0 0 2px var(--hue) inset}
  .ov-tile .top{display:flex;align-items:center;gap:9px}
  .ov-tile .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--hue);flex:none}
  .ov-tile .nm{font-size:13px;font-weight:650;flex:1}
  .ov-tile .hot{font-size:11px;font-weight:700;color:#B01B1C;background:#FDE7E7;border-radius:10px;padding:2px 8px;white-space:nowrap}
  .ov-tile .big{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
  .ov-tile .big small{font-size:13px;font-weight:600;color:var(--ink-2);margin-left:8px;letter-spacing:0}
  .ov-tile .bar{display:flex;gap:2px;height:7px;border-radius:4px;overflow:hidden}
  .ov-tile .bar i{display:block;background:var(--hue);min-width:4px}
  .ov-tile .leg{font-size:11.5px;color:var(--ink-2);line-height:1.35}
  .ov-tile .old{font-size:11px;color:var(--ink-3);margin-top:auto}
  .ov-tile.none{background:#FAFBFC} .ov-tile.none .ic{background:#C5CCD4} .ov-tile.none .big{color:#9AA4AF}
  .ov-tile .leg.clear{color:#1B7A46;font-weight:650}
  .ov-drill .hd{position:relative} .ov-drill .hd .btn{position:absolute;right:16px;top:14px}
  table.ov-t{width:100%;font-size:12.5px;background:none}
  table.ov-t th{font-size:11px;font-weight:650;letter-spacing:.3px;color:var(--ink-2);text-align:left;padding:8px 14px;background:#EEF1F4;border-bottom:1px solid #DDE1E6}
  table.ov-t td{padding:9px 14px;border-bottom:1px solid #EBEEF1;vertical-align:middle}
  table.ov-t tbody tr{cursor:pointer} table.ov-t tbody tr:hover td{background:#F4F7FA}
  table.ov-t tr.plain{cursor:default} table.ov-t tr.hot td:first-child{box-shadow:inset 3px 0 0 #E02627}
  .ov-rb{display:inline-block;vertical-align:middle;width:calc(100% - 80px);max-width:260px;height:8px;border-radius:4px;background:#EEF1F4;overflow:hidden}
  .ov-rb i{display:block;height:100%;background:var(--blue);border-radius:4px}
  .ov-rv{display:inline-block;width:72px;text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
  @media (max-width:900px){ .ov-heads{grid-template-columns:repeat(2,minmax(0,1fr))} .ov-head b{font-size:21px} }
  body.office main, body.office #pagehead{box-sizing:border-box;width:100%}
  /* ---- OFFICE ---------------------------------------------------------
     Three fixed pieces - module rail, module menu, top bar - and the same
     #main every Field screen draws into, moved over to make room. */
  #orail,#osub,#otop,#ostatus{display:none}
  #wschooser{position:fixed;inset:0;z-index:60;background:var(--surface);align-items:center;justify-content:center;padding:24px}
  .wsbox{width:min(640px,100%);background:#fff;border-radius:16px;padding:32px;box-shadow:0 18px 50px -24px rgba(0,75,40,.45)}
  .wsbox .lg{width:150px;height:19px;display:block;margin-bottom:18px}
  .wsbox h1{margin:0 0 4px;font-size:21px}
  .wsbox p{margin:0 0 18px;color:var(--ink-2);font-size:13.5px}
  .wscards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
  .wscards button{border:2px solid var(--line);background:#fff;border-radius:12px;padding:18px;text-align:left;
    font-family:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:var(--blue)}
  .wscards button:hover{border-color:var(--blue);background:var(--blue-tint)}
  .wscards b{font-size:16px;color:var(--ink)} .wscards span{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
  .wsbox label{display:flex;gap:9px;align-items:center;font-size:13px}
  .wsopt{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px;cursor:pointer}
  .wsopt.on{border-color:var(--blue);background:var(--blue-tint)}
  .wsopt b{display:block;font-size:13.5px} .wsopt em{display:block;font-style:normal;font-size:12px;color:var(--ink-2)}
  body.office{background:#F4F5F7}
  body.office header.top, body.office nav.tabs, body.office #runrate{display:none !important}
  body.office #app.on{display:block;min-height:100vh;padding:56px 0 28px 204px;box-sizing:border-box}
  body.office #pagehead{max-width:1500px;margin:0;padding:18px 24px 0}
  body.office main{max-width:1500px;margin:0;padding:8px 24px 40px}
  body.office .pagetitle h1{font-size:20px}
  body.office .card{border-radius:9px;box-shadow:none;border:1px solid #DDE1E6}
  body.office .cta{max-width:340px}
  /* In Office the typing box sits above the status line, inside the content
     column, on white like the top bar - not across the whole window and not
     underneath the status line, which is what was cutting it in half. */
  body.office .askdock{left:204px;bottom:28px;z-index:27;background:#fff;border-top:1px solid #DDE1E6;padding:12px 24px}
  body.office .askdock .askbar{max-width:1132px;margin:0}
  /* The typing box and the status line are fixed over the bottom of the page.
     Field leaves room for its own dock; Office's is taller, so the last rows of
     a long answer were scrolling underneath it with nowhere further to go. */
  body.office.fullscreen #main{padding-bottom:150px}
  body.office .anscard.open .gridwrap{max-height:calc(100vh - 330px)}
  /* the card module's question thread shares a class name with Lawrence's
     conversation and was drawing its blue rule down the side of this screen */
  body.fullscreen .thread{border-left:0;background:none;border-radius:0;margin-top:0;
    padding-left:0;padding-right:0}
  body.office .toast{left:218px}
  body.office #orail{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:204px;z-index:30;
    background:#00341C;color:#CFE0D5}
  .obrand{height:56px;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:6px 18px 0 22px;border-bottom:1px solid #0D4527}
  .obrand .logo-white{display:block;width:124px;height:16px}
  .obrand span{font-size:9.5px;letter-spacing:3px;color:#A9C7B4;width:124px;text-align:center}
  .omods{flex:1;display:flex;flex-direction:column;gap:2px;padding:12px 8px;overflow:auto}
  .omods button,.ofoot button{display:flex;align-items:center;gap:11px;height:40px;padding:0 14px;border:0;border-radius:6px;
    background:none;color:#CFE0D5;font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;text-align:left}
  .omods button:hover{background:#0A4A2A;color:#fff}
  .omods button.on{background:#11603A;color:#fff;font-weight:650}
  .ofoot{padding:10px 8px 12px;border-top:1px solid #0D4527;display:flex;flex-direction:column;gap:6px}
  .ofoot #oapps{color:#CFE0D5;font-size:12.5px;font-weight:650}
  .ofoot .oapps-a{display:flex;align-items:center;gap:11px;height:36px;padding:0 14px;border-radius:6px;color:inherit;text-decoration:none}
  .ofoot .oapps-a:hover{background:#0A4A2A;color:#fff}
  .ofoot #oapps .nfg-sw-home{gap:11px}
  .ofoot #otofield{height:36px;background:#00240F;color:#fff;font-size:12.5px;font-weight:650}
  .ofoot #ome{height:auto;padding:6px 14px}
  .ofoot #ome i{width:28px;height:28px;border-radius:50%;background:#11603A;color:#fff;font-style:normal;font-size:11px;font-weight:700;
    display:grid;place-items:center;flex:none}
  .ofoot #ome b{display:block;font-size:12.5px;color:#fff} .ofoot #ome em{display:block;font-style:normal;font-size:11px;color:#A9C7B4}
  body.office #osub{display:flex;flex-direction:column;position:fixed;left:204px;top:0;bottom:0;width:236px;z-index:29;
    background:#fff;border-right:1px solid #DDE1E6;box-shadow:12px 0 32px rgba(0,52,28,.14);
    transform:translateX(-240px);transition:transform .2s ease-out;pointer-events:none}
  body.office #osub.open{transform:none;pointer-events:auto}
  body.office.subpin #osub{transform:none;pointer-events:auto;box-shadow:none;transition:none}
  body.office.subpin #app.on{padding-left:440px} body.office.subpin #otop,body.office.subpin #ostatus,body.office.subpin .askdock{left:440px}
  body.office.subpin .toast{left:454px} body.office.subpin #oscrim{display:none !important} body.office.subpin #omenu{display:none}
  .osubhd #osubpin{margin-right:-6px} .osubhd #osubpin.on{background:var(--blue-tint);color:var(--blue)}
  #oscrim{display:none;position:fixed;inset:0;z-index:28;background:rgba(0,52,28,.10)} body.office #osub.open ~ #oscrim{display:block}
  .osubhd{gap:8px} .osubhd span{flex:1} .osubhd button{width:28px;height:28px;border:0;border-radius:6px;background:#F4F5F7;cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
  .ocrumbs #omenu{width:30px;height:30px;border:1px solid #DDE1E6;border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;margin-right:2px;color:var(--ink)}
  .ocrumbs .crumb-mod{cursor:pointer} .ocrumbs .crumb-mod:hover{color:var(--blue);text-decoration:underline}
  .osubhd{height:56px;box-sizing:border-box;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid #DDE1E6;font-size:15px;font-weight:700}
  .osubbody{padding:4px 8px 12px;overflow:auto}
  /* Menu sections fold (NFG standard): heading button with a down arrow that turns up when the section is open */
  .osubbody button.osech{height:auto;min-height:32px;margin-top:4px;padding:8px 12px;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#56616E}
  .osubbody button.osech:hover{color:var(--ink)}
  .osech svg{flex:none;transition:transform .15s}
  .osec.open .osech svg{transform:rotate(180deg)}
  .osec:not(.open) .osecit{display:none}
  .osec.open{margin-bottom:6px}
  .osubbody button{display:flex;align-items:center;justify-content:space-between;width:100%;height:32px;padding:0 12px;border:0;border-radius:5px;
    background:none;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
  .osubbody button:hover{background:#F4F5F7}
  .osubbody button.on{background:var(--blue-tint);color:var(--blue);font-weight:650}
  .osubbody button.lk{color:#7A8591}
  body.office #otop{display:flex;align-items:center;justify-content:space-between;gap:16px;position:fixed;left:204px;right:0;top:0;height:56px;z-index:28;
    box-sizing:border-box;padding:0 24px;background:#fff;border-bottom:1px solid #DDE1E6}
  .ocrumbs{display:flex;align-items:center;gap:7px;font-size:13px;color:#56616E;min-width:0}
  .ocrumbs .last{color:var(--ink);font-weight:650}
  .ocrumbs svg{color:#9AA4AF;flex:none}
  .ocrumbs #oback{width:30px;height:30px;border:1px solid #DDE1E6;border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;margin-right:6px}
  .ocrumbs #oback svg{color:var(--ink)}
  .otools{display:flex;gap:10px;align-items:center}
  .otools button{position:relative;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid #DDE1E6;border-radius:6px;
    background:#fff;font-family:inherit;font-size:12.5px;font-weight:650;color:var(--blue);cursor:pointer}
  .otools #oviewas{height:34px;border:1px solid #DDE1E6;border-radius:8px;padding:0 8px;font-family:inherit;font-size:12.5px;background:#fff;color:var(--ink);max-width:230px}
  .otools #oviewas.on{border-color:#E0A33D;background:#FFF8E1;font-weight:650}
  #viewasbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#FFF1D6;border-top:2px solid #E0A33D;color:#633806;font-size:13px;padding:9px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
  #viewasbar button{border:1px solid #E0A33D;background:#fff;border-radius:7px;padding:5px 12px;font-family:inherit;font-weight:650;color:#633806;cursor:pointer}
  .otools #osignout{color:var(--ink-2)} .otools #osignout:hover{color:var(--red);border-color:#F1CACA}
  /* Sudo (core/sudo.js): the bar in a sudo tab, the button and picker in your own */
  #sudobar{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;z-index:150;display:flex;gap:10px;align-items:center;max-width:calc(100% - 20px);
    padding:7px 8px 7px 14px;border-radius:10px;color:#fff;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.25);
    background:repeating-linear-gradient(135deg,#1B1B1B 0 14px,#2B2B2B 14px 28px);border:2px solid #F2B705}
  #sudobar b{color:#F2B705;letter-spacing:.08em} #sudobar #sudoleft{color:#F2B705;white-space:nowrap}
  #sudobar button{border:1px solid #F2B705;background:#F2B705;color:#1B1B1B;font:inherit;font-weight:700;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap}
  body.sudo #oviewas, body.sudo #osudo{display:none!important}
  body:not(.office) #sudobar{bottom:76px;font-size:12px}
  .otools #osudo{border-color:#F2B705;color:#7A5A00}
  .sudo-box{width:min(620px,100%);max-height:88vh;display:flex;flex-direction:column}
  .sudo-list{overflow:auto;max-height:46vh;margin-top:8px;border:1px solid var(--line,#E6E9EC);border-radius:8px}
  .sudo-p{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;border-bottom:1px solid var(--line,#E6E9EC);background:#fff;padding:8px 12px;font:inherit;cursor:pointer;text-align:left}
  .sudo-p span{font-size:12px;color:var(--ink-2,#5A6470)} .sudo-p:hover{background:#FFF8E1} .sudo-p.on{background:#FFF1C2}
  /* Tasks due (n): red, at the top, only when something is waiting (core/tasks-due.js) */
  .otools #otdue{background:var(--red,#C8102E);border-color:var(--red,#C8102E);color:#fff;font-weight:700;letter-spacing:.01em}
  .otools #otdue:hover{filter:brightness(.92)}
  .tdue-strip{display:block;width:100%;border:0;background:var(--red,#C8102E);color:#fff;font:inherit;font-weight:700;font-size:14px;padding:9px 16px;text-align:center;cursor:pointer;position:sticky;top:0;z-index:30}
  #app:not(.on) .tdue-strip, body.office .tdue-strip{display:none!important}
  .tdue-box{width:min(980px,100%);max-height:90vh;display:flex;flex-direction:column}
  .tdue-scroll{overflow:auto;margin-top:6px}
  .tdue-t{width:100%;border-collapse:collapse;font-size:13px}
  .tdue-t th{position:sticky;top:0;background:#F3F5F7;text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2,#5A6470);padding:7px 8px;cursor:pointer;user-select:none;white-space:nowrap}
  .tdue-t th.on{color:var(--ink,#1B2733)} .tdue-t th.r,.tdue-t td.r{text-align:right;white-space:nowrap}
  .tdue-t td{padding:8px;border-top:1px solid var(--line,#E6E9EC);vertical-align:top}
  .tdue-t td.m{white-space:nowrap;color:var(--ink-2,#5A6470)}
  .tdue-t tbody tr{cursor:pointer} .tdue-t tbody tr:hover{background:#FDF1F2}
  .tdue-t td.cr{white-space:nowrap;color:var(--ink-2,#5A6470);font-size:12px} .tdue-t td.x{width:1%;white-space:nowrap}
  .tdue-cx{border:1px solid #E7B8BF;background:#fff;color:var(--red,#C8102E);border-radius:6px;font:inherit;font-size:11.5px;padding:3px 9px;cursor:pointer;opacity:.75}
  .tdue-t tr:hover .tdue-cx,.tdue-t tr.asking .tdue-cx{opacity:1} .tdue-cx:hover{background:#FDF1F2}
  .tdue-t tr.asking td{background:#FDF1F2}
  .tdue-t tr.tdue-ask td{background:#FDF1F2;border-top:0;cursor:default}
  .tdue-ask>td>div{display:flex;flex-direction:column;gap:6px;max-width:640px} .tdue-ask .sub{font-size:12px}
  .tdue-ask textarea{min-height:60px;border:1px solid #E7B8BF;border-radius:8px;padding:8px;font:inherit;font-size:13px;resize:vertical}
  .tdue-ask .acts{display:flex;gap:6px;flex-direction:row} .tdue-ask [data-tdgo]{background:var(--red,#C8102E);border-color:var(--red,#C8102E);color:#fff}
  @media(max-width:700px){ .tdue-t td.sub,.tdue-t th[data-tds="detail"],.tdue-t td.cr,.tdue-t th.cr{display:none} }
  .otools #obell{width:34px;padding:0;justify-content:center;color:var(--ink)}
  .otools #orefresh{width:34px;padding:0;justify-content:center;color:var(--ink)} .otools #orefresh.spinning svg{animation:spin .7s linear}
  @keyframes spin{to{transform:rotate(360deg)}}
  .otools #obell b{font-size:12.5px;font-weight:700}
  .otools #obell.hot{width:auto;min-width:34px;padding:0 10px;gap:6px;background:var(--red,#C8102E);border-color:var(--red,#C8102E);color:#fff}
  .otools #obell.hot:hover{filter:brightness(.92)}
  .bellmenu{position:fixed;z-index:95;width:290px;background:#fff;border:1px solid #DDE1E6;border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.14);overflow:hidden;display:flex;flex-direction:column}
  .bellmenu button{border:0;border-bottom:1px solid #EBEEF1;background:#fff;text-align:left;padding:9px 12px;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;gap:2px}
  .bellmenu button:last-child{border-bottom:0} .bellmenu button:hover{background:var(--blue-tint,#F2F7FC)}
  .bellmenu b{font-size:13px;color:var(--ink,#1B2733)} .bellmenu span{font-size:11.5px;color:var(--ink-2,#5A6470)}
  .bellmenu button.hot b{color:var(--red,#C8102E)}
  body.office #ostatus{display:flex;align-items:center;justify-content:space-between;position:fixed;left:204px;right:0;bottom:0;height:28px;z-index:28;
    box-sizing:border-box;padding:0 24px;background:#fff;border-top:1px solid #DDE1E6;font-size:11.5px;color:#56616E}
  .olocked{max-width:520px;margin:60px auto 0;background:#fff;border:1px solid #DDE1E6;border-radius:10px;padding:36px 40px;text-align:center}
  .olocked .ring{width:56px;height:56px;border-radius:50%;background:#EEF1F4;color:#56616E;display:grid;place-items:center;margin:0 auto 12px}
  .olocked h2{margin:0 0 8px;font-size:19px} .olocked p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 12px}
  .olocked p b{color:var(--ink)} .olocked .acts{display:flex;gap:10px;justify-content:center;margin:16px 0 10px}
  .olocked .asked{background:#FDF1D3;color:#7A4D00;border-radius:8px;padding:10px}
  @media print{ #orail,#osub,#otop,#ostatus{display:none !important} body.office #app.on{padding:0} }
  #fbuild{text-align:center;font-size:10.5px;color:#8A94A0;margin:-70px 0 0;padding:0 0 78px;letter-spacing:.02em}
  body.office #fbuild, body.fullscreen #fbuild{display:none}
  nav.tabs{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);
    backdrop-filter:saturate(160%) blur(8px);border-top:1px solid var(--line);
    display:flex;z-index:25;box-shadow:0 -3px 16px rgba(16,20,24,.07);
    /* The home indicator sits over the tab bar without this. The max() keeps a
       few pixels of breathing room on phones where the inset is zero. */
    padding-bottom:max(6px, env(safe-area-inset-bottom, 0px))}
  nav.tabs button{flex:1;min-width:0;border:0;background:none;padding:8px 0 9px;
    display:grid;justify-items:center;gap:4px;font:inherit;font-size:10px;font-weight:650;
    color:var(--ink-3);cursor:pointer;position:relative;letter-spacing:.01em}
  nav.tabs button svg{display:block}
  nav.tabs button .ring{width:42px;height:30px;border-radius:11px;display:grid;place-items:center;
    transition:background .14s,color .14s}
  nav.tabs button.on{color:var(--blue)}
  nav.tabs button.on .ring{background:var(--blue-tint)}
  nav.tabs button.on::before{content:"";position:absolute;top:0;left:50%;
    transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--red)}
  nav.tabs button.raise{color:var(--red)}
  nav.tabs button.raise .ring{width:46px;height:34px;border-radius:12px;
    background:linear-gradient(135deg,#F0484A,#C01F20);color:#fff;
    box-shadow:0 5px 13px -5px rgba(192,31,32,.85);transition:.16s}
  nav.tabs button.raise::before{display:none}
  nav.tabs button.raise{justify-content:center;align-self:center}
  nav.tabs button.raise .ring{width:50px;height:38px;margin:0}
  nav.tabs button.raise.open{color:var(--ink-2)}
  nav.tabs button.raise.open .ring{background:linear-gradient(135deg,#4C5866,#2B333C);
    box-shadow:0 5px 13px -5px rgba(43,51,60,.85)}

  .card{background:#fff;border-radius:var(--r-m);padding:15px 16px;margin-bottom:12px;
    box-shadow:0 1px 2px rgba(16,20,24,.05),0 6px 18px -12px rgba(16,20,24,.18)}
  .card.flat{padding:0;overflow:hidden}
  .card h3{margin:0;font-size:15.5px;font-weight:650;letter-spacing:-.008em}
  .card p{margin:3px 0 0;font-size:13px;color:var(--ink-2);line-height:1.4}
  .hd{padding:12px 14px 3px}
  .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:11px}
  @media (min-width:520px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
  @media (min-width:760px){ .kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
  .kpi{background:var(--surface);border-radius:var(--r-s);padding:11px 12px;
    border-left:2px solid transparent}
  .kpi.wait{background:var(--amber-tint);border-left-color:#E0A33D}
  .kpi.bad{background:var(--red-tint);border-left-color:var(--red)}
  .kpi .v{font-size:17px;font-weight:700;letter-spacing:-.018em;font-variant-numeric:tabular-nums}
  .kpi .l{font-size:11px;color:var(--ink-2);margin-top:2px;letter-spacing:.01em}
  .hero{background:linear-gradient(135deg,#11603A 0%,var(--blue) 58%,#002A16 100%);
    color:#fff;border-radius:var(--r-m);padding:18px;margin-bottom:12px;position:relative;
    overflow:hidden;box-shadow:0 10px 26px -14px rgba(0,75,40,.7);
    /* it is a button now, so the browser's own button styling has to go */
    display:block;width:100%;text-align:left;border:0;font:inherit;cursor:pointer}
  button.hero::before{content:"\203a";position:absolute;right:16px;top:16px;
    font-size:20px;opacity:.55;line-height:1}
  button.hero:hover{box-shadow:0 12px 30px -12px rgba(0,75,40,.85)}
  .hero::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
    border-radius:50%;background:rgba(224,38,39,.14)}
  /* the updated stamp turns amber when it is reporting something old, so it
     reads as a warning rather than a reassurance */
  /* ---- the masterfile grid --------------------------------------------
     A spreadsheet, not a list of cards. It takes the whole width because
     nine hundred rows of stock need columns, and the header and the code
     column stay put while you scroll so you never lose which row you are on. */
  .gridpage{max-width:none;padding:0 10px}
  .gridbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:9px 11px;background:var(--surface);border:1px solid var(--line);
    border-radius:10px;margin-bottom:8px;position:sticky;top:0;z-index:6}
  .gridbar #gstat{font-size:13px;font-weight:600}
  .gridbar #gstat b{color:var(--red)}
  .gridhelp{font-size:11.5px;color:var(--ink-3);margin-left:auto}
  .gbtn{border:0;border-radius:8px;padding:8px 15px;font-weight:700;font-size:13px;
    background:var(--chip);color:var(--ink-2);cursor:pointer;font-family:inherit}
  .gbtn.hot{background:var(--red);color:#fff}
  /* a policy is a legal document: its line breaks and numbering carry meaning,
     so it is shown as written rather than reflowed into prose */
  .policytext{margin:0;white-space:pre-wrap;word-wrap:break-word;
    font-family:inherit;font-size:13.5px;line-height:1.6;color:var(--ink-2);
    max-height:60vh;overflow-y:auto}
  .gbtn.add{background:var(--law,#004B28);color:#fff}
  .gbtn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink-3)}
  .gbtn:disabled{opacity:.45;cursor:default}
  .gridwrap{overflow:auto;max-height:calc(100vh - 210px);
    border:1px solid var(--line);border-radius:10px;background:var(--card)}
  table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
  table.grid th{position:sticky;top:0;z-index:4;background:var(--surface);
    text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.05em;
    text-transform:uppercase;color:var(--ink-3);padding:8px 8px;
    border-bottom:1px solid var(--line);border-right:1px solid var(--line);
    white-space:nowrap}
  table.grid th.ro{background:var(--chip)}
  table.grid td{padding:0;border-bottom:1px solid var(--line);
    border-right:1px solid var(--line);background:var(--card)}
  table.grid td.ro{padding:5px 8px;color:var(--ink-2);font-weight:650;
    background:var(--surface);white-space:nowrap;
    position:sticky;left:0;z-index:2}
  table.grid th:first-child{position:sticky;left:0;z-index:5}
  table.grid td input,table.grid td select{width:100%;border:0;background:transparent;
    padding:5px 7px;font-size:12.5px;font-family:inherit;color:var(--ink);
    outline:none;border-radius:0;min-height:28px}
  table.grid td select{appearance:none;cursor:pointer}
  /* the filter row sits under the headings and stays with them, so on row
     600 you can still see and change what you filtered on */
  table.grid tr.frow th{position:sticky;top:30px;z-index:4;background:var(--chip);
    padding:3px 4px;border-bottom:1px solid var(--line)}
  table.grid tr.frow th:first-child{z-index:5}
  table.grid tr.frow input,table.grid tr.frow select{width:100%;border:1px solid var(--line);
    background:var(--card);border-radius:5px;padding:3px 6px;font-size:11.5px;
    font-family:inherit;color:var(--ink);outline:none;min-height:24px}
  table.grid tr.frow input:focus,table.grid tr.frow select:focus{
    border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
  table.grid tr.frow input::placeholder{color:var(--ink-3);opacity:.6;font-size:11px}
  /* a row with any pending change keeps a mark down its left edge, so an edit
     is still findable after the filter changes */
  table.grid tr.rdirty td:first-child{box-shadow:inset 3px 0 0 var(--amber,#C77C10)}
  td.nofilter{padding:22px 14px;text-align:center;color:var(--ink-3);font-size:13px}
  .gridbar #gstat .sub{color:var(--ink-3);font-weight:600;font-size:12px}
  table.grid td.sel{box-shadow:inset 0 0 0 2px var(--blue)}
  table.grid td.dirty{background:#FFF8E1}
  table.grid td.dirty input,table.grid td.dirty select{font-weight:700}
  table.grid tbody tr:hover td:not(.ro){background:var(--tint)}
  table.grid tbody tr:hover td.dirty{background:#FFF3C4}
  @media (prefers-color-scheme: dark){
    table.grid td.dirty{background:#3a3218}
    table.grid tbody tr:hover td.dirty{background:#463c1c}
  }
  /* ---- the Lawrence thread -------------------------------------------
     Chat shape, because a question usually has a follow-up and forcing the
     whole thing to be restated is what makes people stop asking. */
  .thread{display:flex;flex-direction:column;gap:9px;padding:4px 0 10px;
    min-height:40vh;max-height:calc(100vh - 230px);overflow-y:auto}
  .bub{max-width:88%;padding:10px 13px;border-radius:15px;font-size:14.5px;
    line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
  .bub.me{align-self:flex-end;background:var(--red);color:#fff;
    border-bottom-right-radius:5px}
  .bub.him{align-self:flex-start;background:var(--surface);color:var(--ink);
    border:1px solid var(--line);border-bottom-left-radius:5px}
  .bub.thinking{color:var(--ink-3);font-style:italic}
  .chips{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:92%}
  .chip.tap{background:var(--chip);border:1px solid var(--line);color:var(--ink-2);
    border-radius:14px;padding:6px 11px;font-size:12.5px;font-family:inherit;
    cursor:pointer;font-weight:650}
  .chip.tap:hover{background:var(--tint);color:var(--ink)}
  details.figs{align-self:flex-start;max-width:100%;width:100%}
  details.figs summary{cursor:pointer;font-size:12px;color:var(--ink-3);
    padding:5px 2px;font-weight:650;list-style:none}
  details.figs summary::-webkit-details-marker{display:none}
  details.figs summary:before{content:"\25B8 ";color:var(--ink-3)}
  details.figs[open] summary:before{content:"\25BE "}
  details.figs .gridwrap{margin-top:5px}
  /* the box you type in, held at the bottom */
  .askbar{display:flex;gap:8px;align-items:flex-end;padding:9px;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    position:sticky;bottom:0}
  .askbar textarea{flex:1;border:0;background:transparent;resize:none;
    font-family:inherit;font-size:15px;color:var(--ink);outline:none;
    line-height:1.4;padding:6px 4px;max-height:120px}
  .asksend{flex:none;width:38px;height:38px;border:0;border-radius:50%;
    background:var(--red);color:#fff;cursor:pointer;display:grid;place-items:center}
  .asksend:hover{filter:brightness(1.08)}
  /* ---- Lawrence, dressed ----------------------------------------------
     THIRSTI Blue #004B28 for Lawrence, red stays the person's own voice.
     Two colours doing two jobs rather than red everywhere. */
  .av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;
    place-items:center;background:var(--law,#004B28);color:#fff;margin-top:1px;
    box-shadow:0 1px 3px rgba(0,75,40,.28)}
  .av.big{width:54px;height:54px;border-radius:17px;margin:0 auto 11px;
    box-shadow:0 4px 14px rgba(0,75,40,.3)}
  .fromhim{display:flex;gap:9px;align-items:flex-start;max-width:93%;
    align-self:flex-start}
  .hello{text-align:center;padding:26px 16px 20px}
  .hello h2{margin:0 0 5px;font-size:20px;letter-spacing:-.01em}
  .hello p{margin:0 auto;max-width:330px;font-size:13.5px;color:var(--ink-3);
    line-height:1.5}

  /* bubbles: the person in THIRSTI red, Lawrence in paper white with a blue
     edge, so at a glance you can see who said what without reading */
  .bub{max-width:100%;padding:11px 14px;border-radius:16px;font-size:14.5px;
    line-height:1.5;white-space:pre-wrap;word-wrap:break-word;
    animation:rise .18s ease-out}
  .bub.me{align-self:flex-end;background:var(--red);color:#fff;
    border-bottom-right-radius:5px;max-width:82%;
    box-shadow:0 1px 3px rgba(224,38,39,.22)}
  .bub.him{background:var(--card);color:var(--ink);
    border:1px solid var(--line);border-left:3px solid var(--law,#004B28);
    border-bottom-left-radius:5px}
  .bub.him.capped{border-left-color:#C77C10;background:#FFF8E1;color:#5a4410}
  @keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

  /* three dots rather than the word "Looking", which sat there looking broken
     whenever a query took four seconds */
  .dots{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
  .dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);
    animation:blink 1.3s infinite}
  .dots i:nth-child(2){animation-delay:.18s}
  .dots i:nth-child(3){animation-delay:.36s}
  @keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:.9}}

  .chips{margin-left:39px}          /* line up under the bubble, not the mark */

  /* ---- the answer card -------------------------------------------------
     Sentence and figures as one object. It leads with the count, shows three
     rows, and keeps Excel, PDF and the query on its own foot — everything
     about an answer in one place you could hand to somebody. */
  .anscard{margin-left:39px;max-width:calc(100% - 39px);background:var(--card);
    border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:3px}
  .anshead{background:var(--law,#004B28);color:#fff;padding:11px 14px;
    display:flex;align-items:baseline;gap:9px}
  .ansn{font-size:25px;font-weight:800;line-height:1;letter-spacing:-.02em}
  .anslab{font-size:12px;opacity:.82;font-weight:600}
  .anscard .gridwrap{border:0;border-radius:0;max-height:none;overflow:auto}
  .anscard table.grid{font-size:12px}
  .anscard table.grid th,.anscard table.grid td{border-right:0}
  .anscard .sqlbox{margin:0;border:0;border-top:1px solid var(--line);
    border-radius:0;max-width:none}
  .moreRows{width:100%;border:0;border-top:1px solid var(--line);
    background:var(--surface);color:var(--law,#004B28);font-family:inherit;
    font-size:12.5px;font-weight:700;padding:10px;cursor:pointer}
  .moreRows:hover{background:var(--chip)}
  .ansfoot{display:flex;gap:6px;padding:9px 11px;border-top:1px solid var(--line);
    background:var(--surface)}
  .ansfoot .chip.tap{padding:5px 11px;font-size:11.5px}

  /* three rows until asked. The cap keeps the card from swallowing the thread
     even when the whole lot is open. */
  .anscard:not(.open) tbody tr:nth-child(n+4){display:none}
  .anscard .gridwrap{max-height:none}
  .anscard.open .gridwrap{max-height:52vh}

  .threadtop{display:flex;justify-content:flex-end;padding:0 0 2px}

  /* ---- the dock -------------------------------------------------------
     Fixed to the bottom of the window, not the end of the page, so it does
     not ride up as the conversation grows. The thread scrolls behind it and
     is padded so the last answer is never hidden underneath. */
  body.fullscreen nav.tabs{display:none}
  body.fullscreen #main{padding-bottom:0}
  /* WHY THE SCREEN WAS CUT OFF ON A PHONE
     .thread is a flex column, and a flex child will not shrink below its own
     content unless told to — min-width defaults to auto, not 0. An answer with
     eight columns made the card wider than the phone, which made the page
     wider than the phone, which pushed the header and the send button off the
     right edge. The table was never the problem; the card refusing to shrink
     around it was.

     min-width:0 lets the card shrink; the table scrolls inside its own box. */
  .thread{display:flex;flex-direction:column;gap:9px;
    padding:4px 0 96px;min-height:auto;max-height:none;overflow:visible;
    width:100%;min-width:0}
  .thread>*{min-width:0;max-width:100%}
  .fromhim{min-width:0}
  .fromhim>.bub{min-width:0}
  .anscard{min-width:0;box-sizing:border-box}
  .anscard .gridwrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* This was written for the Lawrence screen and applied to every screen.
     overflow-x:hidden on html and body turns the body into its own scroll
     box, and position:sticky then sticks to THAT, not to the window - so the
     tab bar stopped holding the bottom of the screen everywhere. It belongs to
     the conversation only, which hides the tab bar anyway. */
  body.fullscreen{max-width:100%;overflow-x:hidden}

  /* the dock spans the window, and keeps clear of the home indicator and of a
     landscape notch — safe-area on all three sides, not just the bottom */
  .askdock{position:fixed;left:0;right:0;bottom:0;z-index:20;box-sizing:border-box;
    padding:8px calc(14px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom))
            calc(14px + env(safe-area-inset-left));
    background:var(--bg,#F4F5F7);border-top:1px solid var(--line)}
  .askdock .askbar{max-width:860px;margin:0 auto;box-shadow:none;
    box-sizing:border-box;position:static}
  /* ---- the card screens ------------------------------------------------ */
  /* A label on the left and a figure on the right, the figure right-aligned so
     several rows line up as a column rather than floating wherever the label
     ends. .b was only ever styled inside .build, so every card using it ran the
     label and the number together. */
  /* the document, reachable wherever a figure is shown */
  .shotstrip{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
  .shotstrip button{background:var(--chip);border:1px solid var(--line);
    border-radius:9px;padding:7px 11px;font-family:inherit;font-size:11.5px;
    font-weight:650;color:var(--ink-2);cursor:pointer;display:inline-flex;
    align-items:center;gap:6px}
  .shotstrip button:active{background:var(--line)}
  .nodoc{font-size:11.5px;color:var(--ink-3);margin-top:6px;font-style:italic}
  .row .shotstrip{margin-top:5px}
  /* what happens to the VAT, said where it is captured */
  .vatnote{font-size:11.5px;line-height:1.45;margin:-2px 0 10px;padding:8px 10px;
    border-radius:8px;background:var(--chip);color:var(--ink-2)}
  .vatnote.ok{background:#E8F6EE;color:#0E6B40}
  .vatnote.warn{background:#FFF8E1;color:#8A6209}
  .vatnote.no{background:#FDECEC;color:#8A2E2E}
  @media (prefers-color-scheme: dark){
    .vatnote.ok{background:#16301f;color:#7fd3a5}
    .vatnote.warn{background:#2a2617;color:#e0b761}
    .vatnote.no{background:#2e1c1c;color:#e59a9a}
  }

  .shotstrip button{flex:1;background:var(--chip);border:1px solid var(--line);
    border-radius:10px;padding:11px;font-family:inherit;font-size:12.5px;
    font-weight:650;color:var(--ink-2);cursor:pointer}
  .card>.b{display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;padding:6px 0;font-size:13px}
  .card>.b+.b{border-top:1px solid var(--line)}
  .card>.b>span:first-child{color:var(--ink-2)}
  .card>.b>span:last-child{margin-left:auto;text-align:right;white-space:nowrap;
    font-variant-numeric:tabular-nums}

  /* ---- the manager's side ----------------------------------------------
     He is not checking arithmetic — the reconciliation proved itself or the
     period could not have been submitted. He is deciding the few lines
     somebody disagreed about, so those get the room and the rest gets a
     line. */
  .card.recon .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--line);margin:0 -13px -13px}
  .card.recon .three>div{padding:11px 13px;border-right:1px solid var(--line)}
  .card.recon .three>div:last-child{border-right:0}
  .card.recon .three b{display:block;font-size:18px;font-weight:800}
  .card.recon .three span{font-size:10.5px;color:var(--ink-3)}
  .card.recon.ok .hd h3{color:#0E7A46}
  .flagitem{padding:12px 14px;border-bottom:1px solid var(--line)}
  .flagitem:last-child{border-bottom:0}
  .flagitem .lr .nm{font-weight:700}
  .flagitem .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
  .flagitem .clause{border-color:var(--line);margin-top:8px}
  .flagitem .clause .ref{color:var(--ink-3)}
  /* the argument, shown rather than resolved */
  .changed{margin-top:8px;background:var(--chip);border-radius:8px;
    padding:8px 11px;font-size:12px;line-height:1.5}
  .changed .why{color:var(--ink-2);font-style:italic;margin-top:3px}
/* the two documents behind a transaction, as small coloured squares */
.docics{display:inline-flex;gap:4px;align-items:center;justify-content:flex-end;vertical-align:middle;flex:0 0 52px;width:52px;line-height:0}
.mc-tags .docics,.xr-t .docics{justify-content:flex-start}
.docic{position:relative;box-sizing:border-box;display:inline-block;flex:0 0 24px;width:24px;min-width:24px;max-width:24px;
  height:24px;min-height:24px;max-height:24px;border-radius:6px;border:0;padding:0;margin:0;overflow:hidden;
  font-size:0;line-height:0;vertical-align:middle;-webkit-appearance:none;appearance:none}
.docic svg{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;display:block}
button.docic{cursor:pointer}
.docic.slip{background:#E6EEF6;color:#004B28}
.docic.inv{background:#E2F3E9;color:#1B7A46}
.docic.bank{background:var(--chip);color:var(--ink-2)}
.docic.gone{background:#FDE7E7;color:#C81E1F}
.docic.miss{background:none;border:1.5px dashed var(--line);color:var(--ink-3);opacity:.75}
.row .rt .docics{display:flex;justify-content:flex-end;margin-top:3px;width:auto;flex:none}
.row .rt .docic{flex:0 0 18px;width:18px;min-width:18px;max-width:18px;height:18px;min-height:18px;max-height:18px;border-radius:5px}
.row .rt .docic svg{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
/* the expenditure report and My card: one list, led by the statement */
.xr-bar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--chip);margin:4px 0 0}
.xr-bar i{display:block}
.xr-bar .g{background:#1B7A46}.xr-bar .a{background:#F1B80E}.xr-bar .r{background:#E02627}
.xr-leg{display:flex;flex-wrap:wrap;gap:8px 22px;margin:10px 0 2px;font-size:12px;color:var(--ink-2)}
.xr-leg b{display:block;font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.xr-leg span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;background:var(--line)}
.xr-leg .g::before{background:#1B7A46}.xr-leg .a::before{background:#F1B80E}
.xr-leg .r::before{background:#E02627}.xr-leg .t::before{background:var(--ink)}
.xr-filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}
.xr-filters button{border:1px solid var(--line);background:none;border-radius:999px;padding:4px 11px;
  font-family:inherit;font-size:12px;font-weight:650;color:var(--ink-2);cursor:pointer}
.xr-filters button.on{background:var(--ink);color:var(--bg,#fff);border-color:var(--ink)}
table.xr-t{width:100%;min-width:760px;font-size:12.5px;background:none}
table.xr-t th{font-size:11px;font-weight:650;color:var(--ink-2);text-align:left;padding:7px 8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
table.xr-t td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.xr-row{cursor:pointer}
.xr-row.need td{background:rgba(241,184,14,.13)}
.xr-row.none td{background:rgba(224,38,39,.09)}
.xr-row.need td:first-child{box-shadow:inset 3px 0 0 #F1B80E}
.xr-row.none td:first-child{box-shadow:inset 3px 0 0 #E02627}
.xr-row.extra td:first-child{box-shadow:inset 3px 0 0 #004B28}
.xr-m{font-weight:650}
.xr-t .sub{display:block;font-size:11px;color:var(--ink-2)}
.xr-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#F1B80E;vertical-align:middle}
.xr-detail td{background:var(--chip);font-size:12px;line-height:1.5;color:var(--ink-2);padding:10px 12px 12px 30px}
.xr-detail b{color:var(--ink)}
.xr-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:3px 0}
.xr-ch{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.xr-ch .why{font-style:italic}
.xr-link{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.xr-link select{font-family:inherit;font-size:12px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;max-width:100%}
details.xr-d{border-top:1px solid var(--line);padding:2px 0}
details.xr-d summary{padding:10px 0;font-weight:650;font-size:12.5px;cursor:pointer}
.xr .chip.g,.mc .chip.g{background:#E2F3E9;color:#1B7A46}
.xr .chip.a,.mc .chip.a{background:#FDF1D3;color:#9A6200}
.xr .chip.b,.mc .chip.b{background:#E6EEF6;color:#004B28}
.mc-top h3{margin:0 0 2px}
.mc-tags{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:8px}
.mc-item .clause,.mc-item .changed,.mc-item .thread{margin-top:8px;background:rgba(255,255,255,.55);border-radius:8px}
.mc-acts.slim{margin-top:9px}
.mc-acts.slim button{flex:none;padding:6px 12px;font-size:12px;border-width:1px}
.mc-ask textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;padding:8px 10px;
  border:1px solid rgba(0,0,0,.25);border-radius:8px;background:#fff;color:#1a1a1a;resize:vertical}
.mc-quiet{padding:2px 0}
.mc-q{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--line);font-size:12.5px}
.mc-q:last-child{border-bottom:0}
.mc-q .d{color:var(--ink-2);font-size:11.5px;white-space:nowrap;min-width:52px}
.mc-q .m{flex:1;min-width:0}
.mc-q .m b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-q .m span{font-size:11px;color:var(--ink-2)}
.mc-q .a{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap;flex:0 0 84px;text-align:right}
.mc .chip.r{background:#FDE7E7;color:#C81E1F}
@media (min-width:900px){ .mc{max-width:760px;margin:0 auto} }
.mc-sec{display:flex;justify-content:space-between;font-size:12px;font-weight:700;padding:14px 4px 6px;color:var(--ink-2)}
.mc-sec.a{color:#9A6200}.mc-sec.r{color:#C81E1F}.mc-sec.g{color:#1B7A46}.mc-sec.b{color:#004B28}
.mc-item{border-radius:12px;padding:11px 13px;margin-bottom:8px;border:1px solid var(--line)}
.mc-item.need{background:#FDF1D3;border-color:#F1B80E;color:#3d2a00}
.mc-item.none{background:#FDE7E7;border-color:#E02627;color:#4a0d0d}
.mc-item .l1{display:flex;justify-content:space-between;gap:10px;font-weight:650;font-size:13.5px}
.mc-item .l1 span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.mc-item .l2{font-size:11.5px;opacity:.8;margin-top:2px}
.mc-acts{display:flex;gap:8px;margin-top:10px}
.mc-acts button{flex:1;border-radius:9px;padding:9px;font-family:inherit;font-weight:700;font-size:13px;
  border:1.5px solid #1a1a1a;cursor:pointer}
.mc-acts .p{background:#1a1a1a;color:#fff}
.mc-acts .p.red{background:#C81E1F;border-color:#C81E1F}
.mc-acts .s{background:transparent;color:#1a1a1a}
.mc-ask{margin-top:9px;font-size:12.5px;line-height:1.45}
.mc-ask p{margin:4px 0 0}
.mc-undo{border:0;background:none;color:#C81E1F;font-family:inherit;font-weight:700;font-size:11.5px;
  text-decoration:underline;cursor:pointer;padding:0 0 0 6px}
@media (prefers-color-scheme: dark){
  .docic.slip{background:#123524;color:#8FCB8F}
  .docic.inv{background:#143524;color:#5FD092}
  .docic.gone{background:#411A1B;color:#FF7F7F}
  .xr .chip.g,.mc .chip.g{background:#143524;color:#5FD092}
  .xr .chip.a,.mc .chip.a{background:#3A2E10;color:#F3C45A}
  .xr .chip.b,.mc .chip.b{background:#123524;color:#8FCB8F}
  .mc-sec.a{color:#F3C45A}.mc-sec.r{color:#FF7F7F}.mc-sec.g{color:#5FD092}.mc-sec.b{color:#8FCB8F}
}

  .thread{margin-top:8px;border-left:3px solid var(--law,#004B28);
    background:var(--surface);border-radius:0 8px 8px 0;padding:8px 11px}
  .thread .q{font-size:11.5px;font-weight:700;color:var(--law,#004B28)}
  .thread .a{font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:3px}

  .bignum{font-size:27px;font-weight:800;letter-spacing:-.02em;padding:2px 0 8px}
  .bignum span{display:block;font-size:12px;font-weight:600;color:var(--ink-3);
    letter-spacing:0;margin-top:2px}
  .pills{display:flex;gap:7px;margin-bottom:10px}
  .pill{flex:1;border-radius:9px;padding:8px 10px;font-size:10.5px;font-weight:650}
  .pill b{display:block;font-size:17px;font-weight:800;line-height:1.1}
  .pill.r{background:#FDECEC;color:#8A2E2E}
  .pill.a{background:#FFF8E1;color:#8A6209}
  .pill.g{background:var(--chip);color:var(--ink-2)}
  .card .hd p.warn{color:#C77C10;font-weight:700}
  .warn{color:#C77C10;font-weight:700}
  .ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--chip);
    display:grid;place-items:center;color:var(--ink-2)}
  .ic.red{background:var(--red);color:#fff}
  .card.tint{background:var(--blue-tint,#EDF3F9);border-color:#C3D6E8}
  .card.tint p{margin:0;font-size:13px;line-height:1.5}
  .card.warnbox{border-left:3px solid #C77C10;background:#FFF8E1}

  /* a slip row: the dot carries the state, so a list reads without words */
  .row.slip .dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:7px;
    background:var(--ink-3)}
  .row.slip.a .dot{background:#C77C10}
  .row.slip.r .dot{background:var(--red)}
  .row.slip.q .dot{background:var(--law,#004B28)}
  .row.slip.ok .dot{background:#0E7A46}
  .row.slip.n .dot{background:var(--line)}
  .row.slip.a{background:#FFFCF2}
  .row.slip.q{background:#F2F6FA}
  .row.slip[disabled]{opacity:.6}
  .row.slip[disabled]::after{content:none}

  /* The allocation picker. Two columns, left aligned, every cell the same
     size — a wrapping row of pills gave every line a different rhythm and made
     the short names hard to hit. 46px tall clears the 44px touch target. */
  /* Cindy works at a desk. The control table is wide on purpose — the whole
     month should be readable without opening anything. */
  .gridpage .tiles{margin-bottom:10px}
  #pbody .gridwrap{max-height:56vh;overflow:auto}
  #pbody table.grid td{white-space:nowrap}
  #pbody table.grid tr[data-per]:hover td{background:var(--chip)}

  .pickgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;margin-top:2px}
  .pick{display:flex;align-items:center;text-align:left;min-height:46px;
    padding:10px 13px;border:1px solid var(--line);border-radius:11px;
    background:var(--card);color:var(--ink);font-family:inherit;font-size:13.5px;
    font-weight:600;line-height:1.25;cursor:pointer;transition:background .12s}
  .pick:active{background:var(--blue-tint,#EDF3F9)}
  .pick.on{background:var(--law,#004B28);border-color:var(--law,#004B28);
    color:#fff;font-weight:700}
  /* an odd count leaves the last one alone on its row; let it take the width */
  .pickgrid .pick:last-child:nth-child(odd){grid-column:1 / -1}

  /* capture: the two photographs */
  .shots{display:flex;gap:10px;margin:0 0 10px}
  .shot{flex:1;background:var(--card);border:2px dashed var(--line);border-radius:14px;
    padding:17px 10px;font-family:inherit;cursor:pointer;display:flex;
    flex-direction:column;align-items:center;gap:6px}
  .shot .ring{width:38px;height:38px;border-radius:50%;background:var(--chip);
    display:grid;place-items:center;color:var(--ink-3)}
  .shot .nm{font-size:13px;font-weight:700;color:var(--ink)}
  .shot .sub{font-size:10.5px;color:var(--ink-3)}
  .shot.done{border-style:solid;border-color:#0E7A46}
  .shot.done .ring{background:#E8F6EE;color:#0E7A46}
  .shot.done .sub{color:#0E7A46;font-weight:700}
  .shot.off{opacity:.55;cursor:default}
  .chips.big .chip.tap{padding:9px 15px;font-size:13px}
  .chip.tap.on{background:var(--law,#004B28);color:#fff;border-color:var(--law,#004B28)}

  /* a line off the invoice, and the clause under it */
  .lineitem{padding:11px 14px;border-bottom:1px solid var(--line)}
  .lineitem:last-child{border-bottom:0}
  .lineitem.private{background:#FFF6F6}
  .lr{display:flex;align-items:center;gap:10px}
  .lr .nm{flex:1;font-size:13.5px}
  .lr .num{font-size:13.5px;font-variant-numeric:tabular-nums}
  .clause{margin-top:9px;background:var(--card);border:1px solid #F3C9C9;
    border-radius:9px;padding:9px 11px}
  .clause .ref{font-size:11px;font-weight:800;color:#8A2E2E;letter-spacing:.04em;
    text-transform:uppercase}
  .clause .words{font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:4px}
  .lineitem .chips{margin:9px 0 0}
  .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  @media (prefers-color-scheme: dark){
    .card.warnbox{background:#3a3218}
    .row.slip.a{background:#2a2617}
    .lineitem.private{background:#2e1c1c}
    .clause{border-color:#5a3232}
  }
  .allowline{font-size:11.5px;color:var(--ink-3);text-align:right;padding:0 4px 5px}
  .allowline .out{color:var(--red);font-weight:700}
  .acts{display:flex;gap:6px;align-self:flex-start;flex-wrap:wrap;margin-top:-2px}
  .sqlbox{align-self:flex-start;max-width:100%;overflow-x:auto;background:var(--chip);
    border:1px solid var(--line);border-radius:8px;padding:9px 11px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
    line-height:1.45;color:var(--ink-2);white-space:pre-wrap;margin:0}
  /* the Ask button, on every screen, top right of the heading */
  #pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .askbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink-2);border-radius:20px;
    padding:7px 13px;font-family:inherit;font-size:13px;font-weight:700;
    cursor:pointer;flex:none;margin-top:2px}
  .askbtn:hover{background:var(--chip);color:var(--ink)}
  .askbtn svg{width:15px;height:15px}
  @media (max-width:420px){ .askbtn span{display:none} .askbtn{padding:7px 9px} }
  #askbox{width:100%;border:1px solid var(--line);border-radius:10px;
    padding:11px 12px;font-family:inherit;font-size:15px;color:var(--ink);
    background:var(--card);resize:vertical;line-height:1.4}
  #askbox:focus{outline:none;border-color:var(--blue)}
  :root{--law:#004B28}
  #updated.stale{opacity:1;color:#FFD48A;font-weight:700}
  .hero .lbl{font-size:12.5px;opacity:.82}
  .hero .big{font-size:31px;font-weight:700;letter-spacing:-.028em;margin:2px 0 3px;
    font-variant-numeric:tabular-nums}
  .hero .delta{font-size:12.5px;opacity:.85}

  /* ---- the home tiles. Colour carries meaning: blue is money coming in,
         green is ahead, red is something wrong, amber is waiting on someone. */
  .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
  /* the account page runs three across and smaller: six full-size tiles pushed
     everything else below the fold */
  .tiles.c3{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:0}
  .tiles.c3 .tile{border-radius:11px;padding:9px 10px}
  .tiles.c3 .tile .v{font-size:17px}
  .tiles.c3 .tile .l{font-size:9.5px;line-height:1.25}
  .tiles.c3 .tile .sub{font-size:9px;margin-top:3px;line-height:1.25}
  .tiles.c3 .tile .go,.tiles.c3 .tile .orb{display:none}
  @media (max-width:380px){ .tiles.c3{grid-template-columns:repeat(2,minmax(0,1fr))} }

  /* month to date or year to date, and the whole page follows it */
  .basis{display:flex;gap:4px;background:var(--surface);padding:3px;border-radius:9px;
    margin:12px 0 4px}
  .basis button{flex:1;border:0;background:none;border-radius:7px;padding:8px 0;font:inherit;
    font-size:12.5px;font-weight:650;color:var(--ink-2);cursor:pointer}
  .basis button.on{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.1)}

  /* the buyer, and the three ways to reach him */
  .buyer{display:flex;gap:10px;align-items:center;margin-top:10px}
  .av2{width:38px;height:38px;border-radius:12px;background:var(--blue-tint);color:var(--blue);
    display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
  .buyer .who{min-width:0;flex:1}
  .buyer .who b{display:block;font-size:14px}
  .buyer .who span{display:block;font-size:12px;color:var(--ink-3);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .reach{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:12px}
  .reach a{border:1px solid var(--line);border-radius:11px;padding:11px 4px;text-align:center;
    font-size:11.5px;font-weight:650;color:var(--ink-2);text-decoration:none;display:block}
  .reach a i{display:block;width:30px;height:30px;border-radius:9px;margin:0 auto 5px;
    color:#fff;font-style:normal;font-size:15px;line-height:30px}
  .reach a.wa i{background:#25D366} .reach a.tel i{background:#2CA22C}
  .reach a.mail i{background:#C77C10}
  .trio.duo i{max-width:16px}

  /* the report builder */
  .pick{width:100%;text-align:left;border:1px solid var(--line);border-radius:11px;
    padding:10px 12px;margin-top:8px;display:flex;align-items:center;gap:10px;
    background:#fff;cursor:pointer;font:inherit}
  .pick.on{border-color:var(--blue);background:var(--blue-tint)}
  .pick .box{width:20px;height:20px;border-radius:6px;border:2px solid #C4CCD4;flex:none;
    display:grid;place-items:center;font-size:12px;color:#fff}
  .pick.on .box{background:var(--blue);border-color:var(--blue)}
  /* Two things in the app are called .pick. Lawrence's is a navy chip with white
     words; this one is a ticked row on a pale tint - and it was inheriting the
     white, so the name of a ticked account vanished into its own background. */
  .pick.on .t, .pick.on .t b{color:var(--ink);font-weight:650}
  .pick .t{flex:1;min-width:0;text-align:left}
  .pick .t b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pick .t span{display:block;font-size:11px;color:var(--ink-3);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .pick .n{font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}
  .quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
  .quick button{border:1px solid var(--line);background:#fff;border-radius:15px;padding:7px 12px;
    font:inherit;font-size:12px;font-weight:650;color:var(--ink-2);cursor:pointer}
  .quick button.on{background:var(--blue);border-color:var(--blue);color:#fff}
  .mgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:10px}
  .mgrid button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 0;
    font:inherit;font-size:11.5px;font-weight:650;color:var(--ink-2);cursor:pointer}
  .mgrid button.on{background:var(--blue);border-color:var(--blue);color:#fff}
  .mgrid button:disabled{opacity:.35;cursor:default}
  .sw{display:flex;align-items:center;gap:12px;margin-top:11px}
  .sw .t{flex:1;font-size:13.5px}
  .toggle{width:48px;height:28px;border-radius:14px;background:#C4CCD4;position:relative;
    cursor:pointer;flex:none;border:0}
  .toggle.on{background:#0E7A46}
  .toggle i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
    background:#fff;transition:left .16s;display:block}
  .toggle.on i{left:23px}
  .prodrow{display:flex;align-items:center;gap:9px;padding:7px 0;
    border-bottom:1px solid var(--line);font-size:12.5px}
  .prodrow:last-of-type{border-bottom:0}
  /* the review tables on the buyer report */
  table.tight{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:4px}
  table.tight th{text-align:left;padding:6px 7px;background:var(--surface);font-size:9px;
    text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);white-space:nowrap}
  table.tight th.n,table.tight td.n{text-align:right;font-variant-numeric:tabular-nums}
  table.tight td{padding:6px 7px;border-bottom:1px solid var(--line);white-space:nowrap}
  table.tight tr.tot td{font-weight:700;background:var(--surface);border-bottom:0}
  table.tight .nm-cell{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis}
  @media print{ table.tight{page-break-inside:auto} table.tight tr{page-break-inside:avoid} }
  @media (min-width:640px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
  .tile{border:0;border-radius:var(--r-m);padding:15px 15px 13px;text-align:left;color:#fff;
    position:relative;overflow:hidden;cursor:pointer;transition:transform .13s,box-shadow .13s}
  .tile:hover{transform:translateY(-2px)}
  .tile:active{transform:translateY(0)}
  .tile .v{font-size:24px;font-weight:700;letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;line-height:1.05}
  .tile .l{font-size:11.5px;opacity:.88;margin-top:4px;letter-spacing:.015em}
  .tile .sub{font-size:11.5px;opacity:.8;margin-top:5px}
  .tile .go{position:absolute;right:12px;top:13px;font-size:16px;opacity:.55}
  /* a budget tile carries a bar, because "R33,6m of R31,2m" reads faster as a shape */
  .tile .prog{height:5px;border-radius:4px;background:rgba(255,255,255,.26);
    margin-top:9px;overflow:hidden}
  .tile .prog i{display:block;height:100%;border-radius:4px;background:#fff;opacity:.92}
  .tile .vs{font-size:10.5px;opacity:.86;margin-top:6px;display:flex;gap:5px;flex-wrap:wrap}
  .tile .vs b{font-weight:700}
  .tile .orb{position:absolute;right:-26px;bottom:-30px;width:96px;height:96px;
    border-radius:50%;background:rgba(255,255,255,.13)}
  .t-blue{background:linear-gradient(135deg,#2CA22C,#004B28);box-shadow:0 10px 22px -14px rgba(0,75,40,.95)}
  .t-green{background:linear-gradient(135deg,#17A05A,#0C6B3C);box-shadow:0 10px 22px -14px rgba(12,107,60,.95)}
  .t-red{background:linear-gradient(135deg,#F0484A,#C01F20);box-shadow:0 10px 22px -14px rgba(192,31,32,.95)}
  .t-amber{background:linear-gradient(135deg,#F0A93A,#C77C10);box-shadow:0 10px 22px -14px rgba(199,124,16,.95)}
  .t-slate{background:linear-gradient(135deg,#4C5866,#2B333C);box-shadow:0 10px 22px -14px rgba(43,51,60,.95)}
  .t-plum{background:linear-gradient(135deg,#8E4FB5,#5E2E7E);box-shadow:0 10px 22px -14px rgba(94,46,126,.95)}

  /* ---- the six-month strip. Tap a month and the whole screen follows it. */
  /* Three bars a month: what was promised, what happened last year, what is
     happening now. Fat enough to read at arm's length, and three colours far
     enough apart that nobody has to consult the key twice. */
  .months{display:flex;gap:14px;align-items:flex-end;margin-top:16px}
  .mon .trio{height:112px;display:flex;align-items:flex-end;gap:3px;justify-content:center}
  .mon .trio i{display:block;flex:1;border-radius:4px 4px 0 0;transition:height .28s;
    min-height:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.06)}
  .mon .trio i.bud{background:#F0A93A}                       /* amber: the promise */
  .mon .trio i.py{background:#8B939C}                        /* grey: last year */
  .mon .trio i.cy{background:linear-gradient(180deg,#2CA22C,#004B28)}   /* blue: now */
  .mon.on .trio i.cy{background:linear-gradient(180deg,#17A05A,#0C6B3C)} /* green when picked */
  .legend{display:flex;gap:18px;justify-content:center;margin-top:14px;font-size:12px;
    color:var(--ink-2)}
  .legend span{display:flex;align-items:center;gap:6px}
  .legend i{width:12px;height:12px;border-radius:3px;display:block}
  .legend .k-bud{background:#F0A93A}
  .legend .k-py{background:#8B939C}
  .legend .k-cy{background:linear-gradient(180deg,#2CA22C,#004B28)}
  .mon{flex:1;border:0;background:transparent;padding:0;cursor:pointer;text-align:center}
  .mon .bar{height:76px;display:flex;align-items:flex-end}
  .mon .bar i{display:block;width:100%;border-radius:5px 5px 0 0;background:var(--grey);
    transition:background .13s,height .2s}
  .mon:hover .bar i{background:#B9C3CC}
  .mon.on .bar i{background:linear-gradient(180deg,#2CA22C,#004B28)}
  .mon .lb{font-size:12.5px;color:var(--ink-2);margin-top:9px;letter-spacing:.01em;
    font-weight:600;display:block}
  .mon.on .lb{color:var(--blue);font-weight:700}
  .mon .vl{font-size:11.5px;color:var(--ink-3);margin-top:3px;display:block;
    font-variant-numeric:tabular-nums}
  .mon.on .vl{color:var(--blue);font-weight:650}
  .growth{font-weight:700}
  .up{color:#0E7A46} .down{color:var(--red)}
  .barline{height:6px;border-radius:4px;background:var(--surface);overflow:hidden}
  .barline i{display:block;height:100%;background:var(--blue);border-radius:4px}

  .segs{display:flex;gap:5px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px}
  .segs button{border:1px solid var(--line);background:#fff;color:var(--ink-2);
    border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;white-space:nowrap;
    transition:.13s}
  .segs button:hover{border-color:#C9D2DA;color:var(--ink)}
  .segs button.on{background:var(--blue);border-color:var(--blue);color:#fff;
    box-shadow:0 2px 8px -3px rgba(0,75,40,.6)}

  .search{position:relative;margin-bottom:11px}
  .ob-f{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:12px 0 10px}
  .ob-f label{display:flex;flex-direction:column;gap:3px;flex:0 1 150px;min-width:120px} .ob-f label.w{flex:1 1 280px}
  .ob-f label span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
  .ob-f select,.ob-f input{width:100%;border:1px solid #D7DDE3;border-radius:8px;padding:8px 10px;background:#fff;font:inherit;font-size:13.5px;min-height:38px}
  .ob-f .btn{flex:none;margin-bottom:2px}
  .search input{width:100%;max-width:100%;border:1px solid #D7DDE3;border-radius:10px;
    padding:13px 40px 13px 14px;background:#fff;font-size:16px;min-height:48px}
  .search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,75,40,.12);outline:none}
  .search .clr{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    border:0;background:transparent;color:var(--ink-3);font-size:19px;padding:2px 7px}

  .row{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
    background:#fff;border:0;border-bottom:1px solid var(--line);padding:12px 15px;
    transition:background .12s}
  .row:last-child{border-bottom:0}
  button.row{cursor:pointer;position:relative}
  button.row:hover{background:#FAFBFC}
  button.row:active{background:var(--blue-tint)}
  button.row::after{content:"\203a";position:absolute;right:13px;top:50%;
    transform:translateY(-50%);color:var(--ink-3);font-size:19px;line-height:1}
  button.row .rt{padding-right:14px}
  .row .nm{display:block;font-weight:650;font-size:14.5px}
  .row .sub{display:block;font-size:12.5px;color:var(--ink-2)}
  .row .rt{margin-left:auto;text-align:right;white-space:nowrap}
  /* A chip should hug its word. As a flex child it was stretching to the height
     of the whole row, which left a loose bubble with the text floating in it. */
  .chip{display:inline-flex;align-items:center;align-self:center;flex:0 0 auto;
    font-size:11px;font-weight:700;letter-spacing:.015em;padding:0 9px;height:21px;
    line-height:1;border-radius:11px;background:var(--surface);color:var(--ink-2);
    margin-left:5px;white-space:nowrap}
  .chip.b{background:var(--blue-tint);color:var(--blue)}
  .chip.r{background:var(--red-tint);color:var(--red)}
  .chip.a{background:var(--amber-tint);color:var(--amber)}
  .brandhd{background:var(--surface);padding:7px 14px;font-size:12px;font-weight:700;
    color:var(--blue);border-left:3px solid var(--red);display:flex}
  .brandhd span{margin-left:auto;color:var(--ink-2);font-weight:600}
  .navgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .navtile{border:1px solid var(--line);background:#fff;border-radius:10px;
    padding:14px 6px;font-size:11.5px;font-weight:600;display:grid;gap:6px;
    justify-items:center;transition:.13s;color:var(--ink-2)}
  .navtile:hover{border-color:var(--blue);color:var(--blue);
    box-shadow:0 6px 16px -10px rgba(0,75,40,.6);transform:translateY(-1px)}
  .navtile i{font-style:normal;font-size:17px;color:var(--blue)}
  .navtile.alert i{color:var(--red)}

  .build{background:#fff;border-radius:var(--r-m);padding:13px 14px;margin-bottom:12px;
    font-size:13.5px;box-shadow:0 1px 2px rgba(16,20,24,.05)}
  .build h4{margin:0 0 8px;font-size:12.5px;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink-2)}
  .build .b{display:flex;justify-content:space-between;padding:4px 0;gap:12px}
  .build .b.tot{border-top:1px solid var(--line);margin-top:5px;padding-top:7px;font-weight:700}
  .build .b.neg{color:var(--red)}
  .gpbox{background:linear-gradient(135deg,#11603A,var(--blue));color:#fff;
    border-radius:var(--r-m);padding:15px 16px;margin-bottom:12px;
    box-shadow:0 10px 24px -14px rgba(0,75,40,.8)}
  .gpbox.warn{background:linear-gradient(135deg,#F04142,var(--red));
    box-shadow:0 10px 24px -14px rgba(224,38,39,.85)}
  .gpbox.dead{background:linear-gradient(135deg,#2A3038,var(--ink));box-shadow:none}
  .gpbox .big{font-size:29px;font-weight:700;letter-spacing:-.028em;font-variant-numeric:tabular-nums}
  .gpbox .was{font-size:12.5px;opacity:.85;margin-left:8px}
  .gpbox .sub{font-size:12.5px;opacity:.85;margin-top:4px}
  .banner{border-radius:var(--r-m);padding:11px 13px;font-size:13.5px;margin-bottom:12px}
  .banner b{display:block;margin-bottom:2px}
  .banner.b{background:var(--blue-tint);color:var(--blue)}
  .banner.r{background:var(--red-tint);color:var(--red)}
  .banner.a{background:var(--amber-tint);color:var(--amber)}

  /* the trail back up out of a drill */
  .crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 11px;
    font-size:12.5px}
  .crumb{border:0;background:var(--bt,var(--blue-tint));color:var(--blue);border-radius:8px;
    padding:6px 11px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;
    max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crumb.on{background:var(--blue);color:#fff;cursor:default}
  .crumbs .sep{color:var(--ink-3);font-size:15px}
  /* a pricing group row: the body selects for a deal, the arrow goes across to
     what is priced inside it */
  .row.grow{display:flex;align-items:stretch;padding:0}
  .row.grow .growbody{flex:1;display:flex;align-items:center;justify-content:space-between;
    gap:10px;background:none;border:0;font:inherit;text-align:left;padding:12px 13px;
    cursor:pointer}
  .row.grow .growbody:hover{background:var(--blue-tint)}
  .row.grow .growgo{width:46px;border:0;border-left:1px solid var(--line);background:none;
    color:var(--ink-3);font-size:19px;cursor:pointer;font:inherit;line-height:1}
  .row.grow .growgo:hover{background:var(--blue-tint);color:var(--blue)}
  .row.grow.picked{background:#E6EEF6}
  .row.grow.picked .growbody:hover{background:#DCE8F3}
  .row.grow .growbody{gap:14px;justify-content:flex-start !important}
  .row.grow .growbody > span:nth-child(2){flex:1;min-width:0;text-align:left}
  .growtick{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid #B4BDC7;background:#fff;display:grid;place-items:center}
  .row.grow.picked .growtick{background:var(--blue);border-color:var(--blue)}
  .row.grow .growbody:hover .growtick{border-color:var(--blue)}
  .pickbar{position:sticky;top:64px;z-index:6;display:flex;align-items:center;gap:12px;background:#00341C;color:#fff;border-radius:12px;padding:10px 12px 10px 14px;margin-bottom:10px;box-shadow:0 10px 24px -16px rgba(0,75,40,.9)}
  body:not(.office) .pickbar{top:8px}
  .pickbar .n{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:#00341C;font-weight:800;display:grid;place-items:center;font-size:14px}
  .pickbar .w{flex:1;min-width:0} .pickbar .w b{display:block;font-size:13.5px}
  .pickbar .w em{display:block;font-style:normal;font-size:11.5px;color:#CFE0D5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pickbar .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .pickbar .btn:not(.ghost){background:#E02627;border-color:#E02627;color:#fff}
  .pq-row{display:flex;gap:10px;align-items:stretch;margin-bottom:10px} .pq-row .search{flex:1;margin:0} .pq-row .btn{flex:none;white-space:nowrap}
  #plhost .pl-back{z-index:90}
  @media (max-width:700px){ .pq-row{flex-direction:column} .pl-back{padding:12px 8px} .pl-box{padding:16px 14px} .pl-g,.pl-g.four{grid-template-columns:1fr 1fr} .pl-two{grid-template-columns:1fr} .pl-ft{flex-wrap:wrap} .pl-ft .hint{flex-basis:100%} }
  .pickhint{font-size:12.5px;color:var(--ink-2);margin:0 2px 10px}
  /* a price that is a live discount rather than the list */
  .row.lit{background:#FFFCF4}

  /* building a free stock order: a pricing group, then its products */
  .grp{border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:9px}
  .grphd{background:var(--surface);padding:9px 12px;font-weight:700;font-size:13.5px;
    display:flex;justify-content:space-between;align-items:baseline}
  .grphd span{font-weight:650;color:var(--ink-2);font-size:12px}
  .fprod{display:flex;align-items:center;gap:10px;padding:10px 12px;
    border-top:1px solid var(--line)}
  .fprod.off{background:var(--surface);color:var(--ink-2)}
  .fprod .nm{flex:1;font-size:13.5px;font-weight:650}
  .fprod .sku{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400;margin-top:1px}
  .fprod .eq{font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap;
    font-variant-numeric:tabular-nums}
  .fqty{width:72px;text-align:right;border:1px solid var(--line);border-radius:8px;
    padding:7px 9px;font:inherit;font-variant-numeric:tabular-nums;flex:none}
  .fqty.has{border-color:var(--blue);background:#F7FAFD;font-weight:700}

  /* the customer list: a star, a balance, and totals you can sort by */
  .crow{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
  .crow:last-child{border-bottom:0}
  .crow.fav{background:#FFFDF5}
  .crow .star{flex:none;width:40px;border:0;background:none;cursor:pointer;
    font-size:17px;color:#C9CDD2;line-height:1;padding:0}
  .crow.fav .star{color:#E0A32B}
  .crow .star:hover{color:#E0A32B}
  .crow .row{flex:1;border-bottom:0}
  .rt .owe{color:var(--blue);font-weight:700;margin-top:3px;display:block}
  .rt .owe.late{color:var(--red)}

  .totbar{display:flex;gap:7px;margin:0 0 9px}
  .tot{flex:1;border:1px solid var(--line);background:#fff;border-radius:11px;
    padding:9px 11px;text-align:left;font:inherit;cursor:pointer;transition:.18s}
  .tot:hover{border-color:var(--blue)}
  .tot.on{border-color:var(--blue);background:var(--blue-tint)}
  .tot.bad .v{color:var(--red)}
  .tot .v{display:block;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
  .tot .l{display:block;font-size:9.5px;color:var(--ink-2);font-weight:650;margin-top:2px}

  /* the hero row: the year, and the two day tiles */
  .hero3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;margin-bottom:11px}
  .hero3 .hero{margin-bottom:0;width:100%}
  .hero.day{border-radius:16px;padding:15px 16px 14px;color:#fff;position:relative;
    overflow:hidden;text-align:left}
  .hero.day.purple{background:linear-gradient(135deg,#7C4DA8,#5E3583)}
  .hero.day.teal{background:linear-gradient(135deg,#0E8C86,#0A6B66)}
  .hero.day .big{font-size:30px}
  .hero.day .delta b{font-weight:800}
  /* the tile is the button now: tap anywhere to turn it over */
  .hero.day{cursor:pointer;border:0;width:100%;font:inherit;
    transform-style:preserve-3d;transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .hero.day.turn{animation:flipover .3s cubic-bezier(.4,0,.2,1)}
  @keyframes flipover{
    0%  {transform:perspective(700px) rotateY(0)}
    50% {transform:perspective(700px) rotateY(-90deg)}
    51% {transform:perspective(700px) rotateY(90deg)}
    100%{transform:perspective(700px) rotateY(0)}
  }
  /* which face you are on, without needing a label to say so */
  .pips{float:right;display:flex;gap:4px;align-items:center;padding-top:5px}
  .pips i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);
    display:block;transition:background .2s}
  .pips i.on{background:#fff}
  @media(prefers-reduced-motion:reduce){
    .hero.day.turn{animation:none}
  }
  .daybar{height:5px;border-radius:3px;background:rgba(255,255,255,.25);
    margin:9px 0 7px;overflow:hidden}
  .daybar i{display:block;height:100%;border-radius:3px;background:#fff}
  .tiny{display:block;opacity:.78;font-size:10px;margin-top:4px;line-height:1.4}
  @media(max-width:760px){
    .hero3{grid-template-columns:1fr 1fr}
    .hero3 > :first-child{grid-column:1 / -1}
  }

  /* open invoices: a card each, grouped by when they fall due */
  .sec{padding:9px 14px 7px;background:var(--surface);font-size:10px;font-weight:800;
    letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
    display:flex;justify-content:space-between;align-items:baseline;
    border-top:1px solid var(--line)}
  .sec.bad{background:var(--red-tint);color:var(--red)}
  .sec b{font-variant-numeric:tabular-nums;letter-spacing:0;font-size:11.5px}
  .inv{padding:11px 14px;border-top:1px solid var(--line)}
  .itop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .ino{font-size:13px;font-weight:800;letter-spacing:-.01em}
  .iamt{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
  .imid{display:flex;justify-content:space-between;align-items:center;gap:8px;
    margin-top:5px;flex-wrap:wrap}
  .idue{font-size:11.5px;color:var(--ink-2)}
  .iref{font-size:10.5px;color:var(--ink-3);margin-top:4px}

  /* credit: the headroom line */
  .hrow{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
  .hdays{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;
    letter-spacing:-.02em}
  .chip.g{background:#EAF7EF;color:#1B7A47}
  .chip.a{background:#FFF4E0;color:#8A5A00}
  a.chip{text-decoration:none}
  a.chip:hover{filter:brightness(.95)}
  /* a group heading is a button now: shut by default, open on a tap */
  .grphd{width:100%;border:0;font:inherit;cursor:pointer;text-align:left;
    align-items:center}
  .grphd:hover{background:#EAEFF4}
  .grphd .gnm{font-weight:700}
  .grphd .caret{display:inline-block;font-style:normal;margin-left:7px;
    transition:transform .12s;color:var(--ink-3)}
  .grp.open .grphd .caret{transform:rotate(90deg)}

  /* training */
  .trcard{background:var(--blue-tint);border-radius:12px;margin-bottom:10px;border:0}
  .trcard:hover{background:#DFE9F3}
  .trbar{height:7px;border-radius:5px;background:var(--surface);overflow:hidden;margin-top:11px}
  .trbar i{display:block;height:100%;background:var(--green,#1F9A5F);border-radius:5px;
    transition:width .6s cubic-bezier(.3,0,.2,1)}
  .trflow{display:flex;flex-direction:column;gap:9px}
  .trstep{display:flex;gap:11px;align-items:flex-start}
  .trstep .n{width:23px;height:23px;border-radius:50%;background:var(--blue-tint);
    color:var(--blue);font-size:12px;font-weight:700;display:flex;align-items:center;
    justify-content:center;flex:none}
  .trstep b{display:block;font-size:14px}
  .trstep .sub{display:block;margin-top:1px}
  .trsteps{margin:4px 0 0;padding-left:21px}
  .trsteps li{margin-bottom:9px;font-size:14.5px;line-height:1.5}
  .opt{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
    border-radius:10px;padding:12px 14px;font:inherit;font-size:14px;margin-bottom:7px;
    cursor:pointer;transition:.2s}
  .opt:hover:enabled{border-color:var(--blue);background:var(--blue-tint)}
  .opt:disabled{cursor:default}
  .opt.right{border-color:#1F9A5F;background:#EAF7EF;font-weight:700}
  .opt.wrong{border-color:var(--red);background:var(--red-tint)}

  /* minutes: the capture form, then the document itself */
  .ptrow{display:flex;gap:9px;align-items:flex-start;margin-bottom:9px}
  .ptrow .n{width:23px;height:23px;border-radius:50%;background:var(--blue-tint);
    color:var(--blue);font-size:12px;font-weight:700;display:flex;align-items:center;
    justify-content:center;flex:none;margin-top:8px}
  .ptrow textarea{flex:1}
  .ptrow .x,.promorow .x{border:0;background:none;color:var(--ink-3);font-size:19px;
    cursor:pointer;padding:0 4px;line-height:1;align-self:center}
  .ptrow .x:hover,.promorow .x:hover{color:var(--red)}
  .promorow{display:flex;gap:7px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
  .promorow input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;
    font:inherit;font-size:13px;min-width:0;flex:1}
  .promorow input[type=date]{flex:0 0 132px}
  .promorow input.num{flex:0 0 130px;text-align:right;font-variant-numeric:tabular-nums;
    font-weight:700}
  .chk{display:flex;gap:9px;align-items:center;padding:11px 15px;font-size:13px;
    border-top:1px solid var(--line);cursor:pointer}
  .chk input{width:17px;height:17px;accent-color:var(--blue)}

  .minhd{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;
    border-bottom:2px solid #DF2527;padding-bottom:12px}
  .minlogo{width:168px;height:auto;display:block;flex:none}
  @media print{ .minlogo{width:150px} }
  .minmeta{font-size:12.5px;line-height:1.75;text-align:right}
  .minmeta span{display:inline-block;min-width:44px;color:var(--ink-2);
    font-weight:650;text-align:left}
  .minpts{margin:10px 0 0;padding-left:20px}
  .minpts li{margin-bottom:8px;font-size:13.5px}
  /* the four figures at the head of a pricing group */
  .kvrow{display:flex;gap:20px;flex-wrap:wrap;margin-top:11px}
  .kvrow .l{display:block;font-size:11.5px;color:var(--ink-2)}
  .kvrow .v{display:block;font-size:15px;font-weight:700;margin-top:1px}

  .barrow{display:block;width:100%;text-align:left;background:none;border:0;padding:0 0 10px;
    cursor:pointer;font:inherit}
  .barhead{display:flex;gap:8px;align-items:baseline;font-size:10.5px;color:var(--ink-3);
    font-weight:650;letter-spacing:.04em;padding-bottom:7px;margin-bottom:9px;
    border-bottom:1px solid var(--line)}
  .barhead .nm-cell{flex:1}
  .barrow:hover .barline i{filter:brightness(1.15)}
  .tt-head,.tt-row{display:flex;align-items:center;gap:10px;width:100%}
  .tt-head{font-size:10.5px;color:var(--ink-3);font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .tt-head .tt-h,.tt-head .tt-num,.tt-head .tt-sp{text-align:center} .tt-head .tt-num{text-align:right}
  .tt-leg{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-3);margin-left:6px} .tt-leg i{display:inline-block;width:14px;height:6px;border-radius:2px;vertical-align:middle;margin:0 2px 0 6px} .tt-leg i.ghost{background:#D5DBE2} .tt-leg i.tick{width:2px;height:12px;background:#16202B}
  .tt-row{text-align:left;background:none;border:0;padding:2px 0;border-bottom:1px solid #EEF1F4;font-family:inherit;color:var(--ink);cursor:pointer;font-size:12.5px;min-height:30px}
  .tt-row:last-of-type{border-bottom:0} button.tt-row:hover{background:#F7F9FC}
  div.tt-row{cursor:default} .tt-row.tot{background:#F4F6F9;border-bottom:2px solid #D7DDE3;font-weight:650;min-height:34px} .tt-row.tot .tt-num{font-size:13.5px}
  .tt-row.oth{border-top:1px dashed #D7DDE3;color:var(--ink-2)} .tt-row.oth .tt-num{color:var(--ink)}
  .tt-share{display:flex;gap:14px;align-items:center;height:12px} .tt-share .sub{font-size:11px;font-weight:500;white-space:nowrap}
  .tt-name{flex:0 0 172px;display:flex;align-items:center;gap:8px;min-width:0} .tt-lbl{display:flex;flex-direction:column;min-width:0;line-height:1.25} .tt-lbl b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tt-lbl .sub{font-size:11px}
  .tt-bar{flex:1 1 auto;min-width:120px} .tt-num{flex:0 0 84px;text-align:right;font-weight:650;white-space:nowrap} .tt-h{flex:0 0 78px} .tt-sp{flex:0 0 110px;display:flex;justify-content:center}
  .bullet{position:relative;display:block;height:12px;background:#EEF1F4;border-radius:3px}
  .bullet i{position:absolute;left:0;display:block;border-radius:2px} .bullet .ghost{top:2px;height:8px;background:#D5DBE2} .bullet .cy{top:0;height:12px;background:var(--blue)} .bullet .due{top:0;height:12px;background:repeating-linear-gradient(135deg,#8DB09A 0 4px,#B9C9DD 4px 8px);border-radius:0 2px 2px 0} .bullet .tick{top:-3px;height:18px;width:2px;background:#16202B;border-radius:0} .bullet .tick.full{background:#E2231A}
  .tt-row:hover .bullet .cy{filter:brightness(1.15)}
  .hcell{display:inline-block;flex:0 0 78px;text-align:center;padding:3px 4px;border-radius:4px;font-weight:650;font-size:12px;white-space:nowrap;box-sizing:border-box;line-height:1.3}
  .hcell.h2{background:#9CCB80;color:#1F3F0A} .hcell.h1{background:#DCEFCF;color:#27500A} .hcell.h-1{background:#FCEBEB;color:#791F1F} .hcell.h-2{background:#F3B4B4;color:#5C1A1A} .hcell.hn{background:#F4F5F7;color:var(--ink-3);font-weight:500}
  .glogo{flex:none;width:44px;height:26px;display:grid;place-items:center;overflow:hidden} .glogo img{max-width:44px;max-height:26px;object-fit:contain;display:block} .glogo .logo-red{display:block;width:44px;height:7px}
  .glogo.big{width:120px;height:28px;justify-items:start} .glogo.big img{max-width:120px;max-height:28px} .glogo.big .logo-red{width:96px;height:13px}
  .glogo.mono{width:28px;height:28px;border-radius:7px;background:hsl(var(--h,210) 45% 92%);color:hsl(var(--h,210) 55% 30%);font-size:11px;font-weight:700;letter-spacing:.3px}
  .ttspark{display:block;height:22px;width:110px;margin:0}
  .dots6{display:flex;flex-direction:column;gap:3px;width:110px} .d6r{display:flex;align-items:center;gap:4px;height:11px}
  .d6l{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.3px;color:var(--ink-3);width:20px;text-align:right;margin-right:2px}
  .d6{display:inline-block;width:9px;height:9px;border-radius:50%;background:#E3E7EC;flex:none} .d6.g{background:#1B7A46} .d6.r{background:#C81E1F}
  .d6.cur{box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px currentColor} .d6.cur.g{color:#1B7A46} .d6.cur.r{color:#C81E1F} .d6.cur.n{color:#B9C3CE}
  @media (max-width:1100px){ .tt-head .tt-sp,.tt-row .tt-sp{display:none} }
  .barrow:hover .nm-cell{color:var(--blue)}
  .tile.picked{outline:3px solid rgba(255,255,255,.75);outline-offset:-3px}
  .drillable{color:var(--blue);cursor:pointer;text-decoration:underline;
    text-underline-offset:3px;text-decoration-color:#C7D7E6}

  .spark{display:flex;align-items:flex-end;gap:4px;height:64px;margin-top:9px}
  .spark div{flex:1;background:var(--grey);border-radius:3px 3px 0 0;min-height:2px}
  .spark div.now{background:var(--blue)}
  .sparkx{display:flex;gap:4px;margin-top:4px}
  .sparkx span{flex:1;text-align:center;font-size:10.5px;color:var(--ink-3)}
  .track{display:flex;gap:4px;margin-top:11px}
  .track div{flex:1;min-width:0;font-size:10px;text-align:center;padding:5px 3px;
    border-radius:6px;background:var(--surface);color:var(--ink-3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .track div.done{background:var(--blue-tint);color:var(--blue)}
  .track div.now{background:var(--blue);color:#fff;font-weight:650}

  .doc{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line)}
  .doc:last-child{border-bottom:0}
  .doc .ic{width:34px;height:42px;flex:none;border-radius:5px;background:var(--blue-tint);
    border:1px solid #C7D7E6;display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--blue)}
  .doc .mid{flex:1;min-width:0}
  .doc .nm{display:block;font-weight:650;font-size:14px}
  .doc .sub{display:block;font-size:12px;color:var(--ink-2)}
  .drop{border:2px dashed var(--line);border-radius:var(--r-m);padding:18px;text-align:center;
    color:var(--ink-2);font-size:13.5px;background:#fff;cursor:pointer}
  .drop.busy{opacity:.6;cursor:default}
  .note{padding:12px 14px;border-bottom:1px solid var(--line)}
  .note:last-child{border-bottom:0}
  .note .mt{font-size:12px;color:var(--ink-2);margin-top:3px}
  .pin{color:var(--red);font-weight:700}
  .perm{display:flex;gap:9px;align-items:center;padding:9px 14px;
    border-bottom:1px solid var(--line);font-size:13.5px}
  .perm:last-child{border-bottom:0}
  .perm .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--grey)}
  .perm .dot.on{background:var(--blue)}
  .perm .dot.ov{background:var(--red)}
  .perm .src{margin-left:auto;font-size:11.5px;color:var(--ink-2);white-space:nowrap}

  /* ---- TABLES ----------------------------------------------------------
     The rule that matters: cells never wrap, the table scrolls. Letting a cell
     wrap turns one record into four lines and the column edges stop lining up,
     which is what made these unreadable on a phone. Long names get an ellipsis
     instead; the full text is in the title attribute. */
  .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{border-collapse:collapse;font-size:13.5px;background:#fff;
    width:max-content;min-width:100%}
  th,td{white-space:nowrap}
  th{text-align:left;padding:10px 13px;font-size:10.5px;text-transform:uppercase;
    letter-spacing:.055em;color:var(--ink-2);border-bottom:1px solid var(--line);
    background:var(--surface);position:sticky;top:0}
  td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
  tr:last-child td{border-bottom:0}
  tr.tot td{background:var(--surface);font-weight:700}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
  /* a name column: one line, cut with an ellipsis rather than wrapped */
  .nm-cell{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-weight:650}
  /* where the full name matters more than a tidy single line, let it wrap to two
     and clip after that, so a row is never more than two lines deep */
  .nm-wrap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;white-space:normal;font-weight:650;font-size:12.5px;
    line-height:1.3;max-width:200px}
  td:has(.nm-wrap){white-space:normal}
  .tbl-tight table{font-size:12.5px}
  .tbl-tight td{padding:9px 10px}
  .tbl-tight th{padding:8px 10px;font-size:9.5px}
  .nm-sub{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:11.5px;color:var(--ink-3);margin-top:1px}
  @media (min-width:620px){ .nm-cell,.nm-sub{max-width:300px} }
  /* the first column stays put while the numbers scroll past it */
  .scroll table td:first-child,.scroll table th:first-child{position:sticky;left:0;
    background:#fff;z-index:1;box-shadow:1px 0 0 var(--line)}
  .scroll table th:first-child{background:var(--surface);z-index:2}
  .scroll table tr.tot td:first-child{background:var(--surface)}

  .muted{padding:22px 14px;color:var(--ink-2);font-size:13.5px;text-align:center}
  .toast{position:fixed;left:14px;right:14px;bottom:74px;max-width:520px;margin:0 auto;
    background:var(--ink);color:#fff;border-radius:11px;padding:13px 16px;font-size:14px;
    opacity:0;transform:translateY(12px);transition:.2s cubic-bezier(.2,.9,.3,1);
    pointer-events:none;z-index:200;box-shadow:0 14px 34px rgba(16,20,24,.34);
    border-left:3px solid var(--blue)}
  .toast.on{opacity:1;transform:none}
  .toast.bad{border-left-color:var(--red)}
  .spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);
    border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
  @keyframes sp{to{transform:rotate(360deg)}}

  /* handing the phone to a buyer: the app disappears and only the deal shows */
  body.present header.top, body.present nav.tabs, body.present .noprint{display:none !important}
  body.present main{padding:0;max-width:none}
  body.present main > *{display:none !important;animation:none !important}
  body.present main > .agr, body.present main > .signbar{display:block !important}
  .signbar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);
    padding:12px 16px 16px;box-shadow:0 -4px 18px rgba(16,20,24,.08);z-index:40}
  .padwrap{border:1px solid var(--line);border-radius:12px;background:#fff;position:relative;
    touch-action:none;overflow:hidden}
  .padwrap canvas{display:block;width:100%;height:190px;touch-action:none}
  .padwrap .hint{position:absolute;left:0;right:0;bottom:34px;text-align:center;
    font-size:12.5px;color:var(--ink-3);pointer-events:none}
  .padwrap .rule{position:absolute;left:24px;right:24px;bottom:28px;border-top:1px solid var(--line);
    pointer-events:none}

  /* the agreement, and only the agreement, is what prints */
  .agr{background:#fff;border-radius:var(--r-m);padding:24px 26px;margin-bottom:12px;
    box-shadow:0 1px 2px rgba(16,20,24,.05),0 6px 18px -12px rgba(16,20,24,.18)}
  .agr .ah{display:flex;align-items:flex-start;gap:16px;border-bottom:2px solid var(--red);
    padding-bottom:14px;margin-bottom:16px}
  .agr .ah .lg{width:128px;height:17px;background-repeat:no-repeat;background-size:contain;flex:none}
  .agr h1{margin:0;font-size:19px;letter-spacing:-.01em;color:var(--blue)}
  .agr .meta{margin-left:auto;text-align:right;font-size:12px;color:var(--ink-2)}
  .agr table{font-size:13px} .agr th{background:var(--surface)}
  .agr .sig{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
  .agr .sig .box{border-top:1px solid var(--ink);padding-top:7px;font-size:12px;color:var(--ink-2)}
  .agr .sig .line{height:46px}
  .agr .terms{font-size:11.5px;color:var(--ink-2);line-height:1.5;margin-top:18px;
    border-top:1px solid var(--line);padding-top:12px}
  @media print{
    body{background:#fff}
    header.top, nav.tabs, .toast, .noprint{display:none !important}
    main{max-width:none;padding:0}
    main > *{display:none !important; animation:none !important}
    main > .agr{display:block !important;box-shadow:none;padding:0;margin:0}
    .agr .ah{padding-bottom:10px;margin-bottom:12px}
    @page{margin:14mm}
  }
  .shot{border:1px dashed var(--line);background:var(--surface);border-radius:var(--r-s);
    padding:14px 10px;font-size:12px;color:var(--ink-2);text-align:center}
  .shot.has{background:var(--blue-tint);border-style:solid;border-color:#C7D7E6;color:var(--blue);font-weight:650}
  .photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* a Field rep raises store things from the store card; the Raise sheet keeps only their card */
body.fieldrep #raisesheet .rpill:not([data-raise="mycard"]):not([data-raise^="st:"]):not([data-raise^="fa:"]){display:none}
body.fieldrep #raisesheet .oh-sub:not(#raisestore .oh-sub){display:none}

/* Tables do not wrap and scroll sideways instead (see TABLES above), but a table placed
   straight in a flat card, without a .scroll wrapper, was clipped at the card's edge.
   It now scrolls like the rest, so no column is ever cut off. */
.card.flat:has(> table){overflow-x:auto}

/* task meta (core/tasks-due.js tmSlot): created / last / waiting under each task */
.tmeta{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:5px;font-size:11.5px;line-height:1.35;color:var(--muted,#6b7280);font-weight:400;text-align:left}
.tmeta:empty{display:none}
.tmeta span{white-space:normal}
.tmeta i{font-style:normal;font-weight:600;color:var(--ink2,#4b5563);margin-right:3px}
.tmeta .me i,.tmeta .me{color:var(--red,#C8102E)}
.card > .tmeta{padding-top:6px;border-top:1px dashed var(--line,#e5e7eb);margin-top:8px}
.tdue-t .tmeta{margin-top:3px;font-size:11px}
.tmeta .tm-cx{border:1px solid #E7B4BD;background:#fff;color:var(--red,#C8102E);font:inherit;font-size:11px;font-weight:600;padding:1px 8px;border-radius:10px;cursor:pointer;margin-left:auto}
.tmeta .tm-cx:hover{background:#FCEEF0}
.tdue-t .tmeta .tm-cx{display:none}   /* the popup has its own Cancel column */
.uomx{font-size:11px;font-weight:500;color:var(--ink-3,#6b7280);line-height:1.35;margin-top:2px;white-space:nowrap}
.uomx i{font-style:normal;color:var(--ink-3,#9ca3af)}
.req-for{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;padding:8px 10px;border-radius:8px;background:#EEF4FB;font-size:12.5px;color:var(--ink-2)}
.req-for i{font-style:normal;font-weight:700;color:var(--ink);margin-right:4px}
.req-for .btn{margin-left:auto}
.req-acc{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 14px;margin-top:8px;font-size:12px;color:var(--ink-2)}
.req-acc b{color:var(--ink);margin-right:4px}
/* free stock order sheet (free-stock-claims.js) */
.fsg-find{display:flex;gap:10px;align-items:center;margin:0 0 8px}
.fsg-find input{flex:1;max-width:320px}
.fsg{width:100%;border-collapse:collapse;font-size:13px}
.fsg th{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3,#6b7280);text-align:left;padding:6px 6px;border-bottom:1px solid var(--line,#e5e7eb)}
.fsg td{padding:5px 6px;border-bottom:1px solid var(--line,#eef0f3);vertical-align:middle}
.fsg .r{text-align:right}
.fsg small{display:block;font-size:11px;color:var(--ink-3,#6b7280);font-weight:400;line-height:1.25}
.fsg tr.fsg-g td{background:var(--surface,#f6f7f9);font-size:11px;font-weight:700;color:var(--ink-2,#4b5563);padding:4px 6px}
.fsg tr.on td{background:#EEF4FB}
.fsg .fqty{width:70px;text-align:right;padding:5px 7px;border:1px solid var(--line,#d1d5db);border-radius:7px;font:inherit}
.fsg tr.on .fqty{border-color:var(--blue,#0A5A32);font-weight:700}
.fsg-u{white-space:nowrap}
.fsg-sum{margin-bottom:10px}
.fsfloat{position:fixed;right:16px;bottom:76px;z-index:40;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.fsfloat button{border:1px solid var(--line,#d1d5db);background:#fff;border-radius:20px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer}
.fsfloat button.pri{background:var(--blue,#0A5A32);border-color:var(--blue,#0A5A32);color:#fff}
.dz-accs{display:flex;flex-wrap:wrap;gap:6px}
.dz-accs.ro{max-height:180px;overflow:auto;padding:6px;border:1px solid var(--line,#e5e7eb);border-radius:8px}
.dz-acc{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line,#d1d5db);border-radius:999px;padding:4px 10px;font-size:12px;background:#fff;color:var(--ink-2,#374151)}
.dz-acc b{color:var(--ink,#111);font-weight:700}
.dz-acc.on{background:#EEF4FB;border-color:#BFDCC6}
.dz-x{border:0;background:none;font-size:15px;line-height:1;cursor:pointer;color:var(--ink-3,#6b7280);padding:0 0 0 2px}
.dz-x:hover{color:var(--red,#C8102E)}
.dz-addacc{position:relative;display:flex;gap:10px;align-items:center;margin-top:8px}
.dz-addacc input{flex:1;max-width:420px}
.dz-dd{display:none;position:absolute;top:100%;left:0;z-index:20;width:min(420px,100%);max-height:280px;overflow:auto;background:#fff;border:1px solid var(--line,#d1d5db);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.dz-dd button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.dz-dd button:hover{background:#EEF4FB}
.pw-found .pw-fr .add.on{background:#E8F5EE;color:#176B3C;font-weight:700}
.pw-addbar{display:flex;gap:6px;justify-content:flex-end;margin:6px 0 4px}
/* Tasks due popup: wide enough for every column, the long ones wrap rather than scroll */
.tdue-box{width:min(1320px,96vw)}
.tdue-scroll{overflow-x:hidden}
.tdue-t{table-layout:fixed}
.tdue-t th[data-tds="mod"]{width:118px} .tdue-t th[data-tds="createdMs"]{width:118px} .tdue-t th[data-tds="days"]{width:74px} .tdue-t th:last-child{width:76px}
.tdue-t td{overflow-wrap:anywhere;word-break:normal;white-space:normal}   /* th, td are nowrap app-wide: a long Task or Detail ran into the next columns */
.tdue-t td.m{white-space:normal}
.tdue-t td.cr{white-space:normal}
.tdue-t .tmeta{display:flex;flex-wrap:wrap;gap:0 10px}
@media(max-width:700px){ .tdue-t{table-layout:auto} .tdue-scroll{overflow-x:auto} }
.uomx{font-size:11.5px;color:var(--ink-2,#4b5563)}
.uomcol{white-space:nowrap;font-size:12px}
/* Orders@ reading pane (ordermail.js omSplit*) */
body.office.om-split-on #osub{display:none}
body.office main:has(> .om-rp){max-width:none}
/* the sub menu folds away; the main rail (204px) stays, so the list starts beside it */
body.office.om-split-on.subpin #app.on{padding-left:204px}
body.office.om-split-on.subpin #otop,body.office.om-split-on.subpin #ostatus,body.office.om-split-on.subpin .askdock{left:204px}
body.office.om-split-on.subpin .toast{left:218px}
.om-rp{display:grid;grid-template-columns:minmax(300px,24%) minmax(0,1fr);gap:12px;align-items:start}
.om-rp-list,.om-rp-pane{position:sticky;top:64px;max-height:calc(100vh - 84px);overflow:auto}
.om-rp-list .om-bar{flex-wrap:wrap;gap:6px}
.om-rp-list .om-bar .om-teach{display:none}
.om-rp-list .om-t th:nth-child(4),.om-rp-list .om-t td:nth-child(4),.om-rp-list .om-t th:nth-child(5),.om-rp-list .om-t td:nth-child(5){padding:0;font-size:0;overflow:hidden;border-left:0;border-right:0}
.om-rp-list .om-t td:nth-child(4) *,.om-rp-list .om-t td:nth-child(5) *{display:none}
.om-rp-list .om-t td{padding-top:6px;padding-bottom:6px}
.om-rp-list .om-t .prev{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.om-rp-list .om-t tr.om-sel td{background:#E7F0FB}
.om-rp-list .om-t tr.om-sel td:first-child{box-shadow:inset 3px 0 0 var(--blue,#0A5A32)}
.om-empty{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-height:50vh;color:var(--ink-3,#6b7280);text-align:center}
.om-empty b{color:var(--ink-2,#374151);font-size:15px}
.om-rp-list,.om-rp-pane{min-width:0}
.om-rp-list .om-t{table-layout:fixed;width:100%}
.om-rp-list .om-t td{overflow-wrap:anywhere}
.om-rp-list .om-t td:first-child{font-size:11.5px}

/* Free stock tracker (app/modules/sales/free-stock-tracker.js) */
.fst-bar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end} .fst-bar .field{margin:0;min-width:150px} .fst-bar .sp{flex:1}
.mk-o.fst-on{background:var(--blue);border-color:var(--blue);color:#fff} .mk-o.fst-on i{color:rgba(255,255,255,.75)}
.fst-t th,.fst-t td{white-space:nowrap} .fst-t th.fst-grp{text-align:center;border-left:1px solid #DDE1E6}
.fst-t tr.tot td,.fst-d tr.tot td{background:#F4F6F9;font-weight:700;border-top:1px solid #D7DDE3}
.fst-neg{color:#B01B1C}
.fst-h{margin:18px 2px 8px}
.fst-rep>summary{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;list-style:none}
.fst-rep>summary::-webkit-details-marker{display:none}
.fst-rep[open]>summary{border-bottom:1px solid #DDE1E6}
.fst-sum{font-size:13px;color:var(--ink-2)} .fst-sum .chip{margin-left:6px}
.fst-d td,.fst-d th{white-space:nowrap} .fst-d tr.fst-mh td{background:#EEF3F8;font-weight:700;color:var(--ink)}
.fst-box{margin:10px 14px 14px auto;min-width:300px;max-width:100%;border:1px solid #DDE1E6;border-radius:8px}
.fst-box td{padding:6px 10px} .fst-box tr.tot td{font-weight:700;background:#F4F6F9}
/* order lines moved to today's price when the order opened (sales_order_reprice) */
.so2-l.so2-rpl td{background:#FFF8E6} .so2-ov.so2-rp{color:#8A5A00;font-weight:600}

/* Capture a sales order: All product list / One by one (4.49) */
.so2-lhd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.so2-mode{margin:0;padding:0;gap:0;border:1px solid var(--red,#E02627);border-radius:8px;height:34px;background:#fff;overflow:hidden;flex:0 0 auto}
.so2-mode button{height:32px;border:0;border-radius:0;padding:0 14px;font-size:12.5px;font-weight:600;box-shadow:none;margin:0;background:#fff;color:var(--red,#E02627);cursor:pointer}
.so2-mode button.on{background:var(--red,#E02627);color:#fff;box-shadow:none}
.so2-list{padding:4px 16px 16px}
.so2-lt td small{white-space:normal}
.so2-lt tr[hidden]{display:none}
.so2-lt tr.so2-gh td{cursor:pointer;user-select:none;padding:8px 6px;font-size:12px;color:var(--ink,#1B2733)}
.so2-lt tr.so2-gh:hover td{background:#E9EDF2}
.so2-lt tr.so2-gh:focus{outline:2px solid var(--blue,#004B28);outline-offset:-2px}
.so2-gi{display:inline-block;width:16px;color:var(--ink-3,#6b7280)}
.so2-gs{margin-left:10px;font-weight:400;color:var(--ink-3,#6b7280)} .so2-gs b{color:var(--blue,#004B28)}
.so2-gall{margin-left:auto;font-size:12px;white-space:nowrap}
.so2-gall .linkbtn{border:0;background:none;padding:0;color:var(--blue,#004B28);font:inherit;cursor:pointer;text-decoration:underline}

/* budget summary: cost detail rows (By month) and columns (Revenue to contribution) */
.pl-t tr.pl-kid td{color:var(--ink-2);font-size:12px} .pl-t tr.pl-kid td.l{padding-left:26px} .pl-t tr.pl-kid2 td.l{padding-left:44px}
.pl-t td.pl-kc,.pl-t th.pl-kc{color:var(--ink-2);font-size:12px;font-weight:400}
.pl-t .pl-tg{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;white-space:nowrap}
.pl-t .pl-tg:hover{color:var(--blue)}
/* a line where Flow assumed the unit reading an email (4.55) */
.so2-asm{display:inline-block;margin:0 6px 0 0;padding:1px 6px;border-radius:5px;background:#FFF1D6;color:#8A5A00;border:1px solid #F0C46A;font-size:10.5px;font-weight:700;cursor:help;vertical-align:1px}
.so2-lt .so2-asm{margin-left:6px}
.so2-asmb{margin-top:12px} .so2-asmb>div{margin-top:4px;font-size:12.5px} .so2-asmb .sub{font-size:11.5px}
/* Orders@Thirsti reading-pane list: one column, three lines, like Outlook (4.57) */
.om-tc{table-layout:fixed;width:100%}
.om-tc th.om-ch{font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-2,#5A6470);padding:6px 10px;white-space:normal}
.om-tc th.om-ch .om-ck{margin:0 8px 0 0;vertical-align:-2px}
.om-chs{border:0;background:none;padding:0 0 0 8px;font:inherit;color:var(--ink-2,#5A6470);cursor:pointer} .om-chs.on{color:var(--blue,#004B28);font-weight:700}
.om-rp-list .om-tc td,.om-rp-list .om-tc td:first-child{padding:7px 10px 8px!important;font-size:12.5px;line-height:1.3;overflow:hidden}
.om-c1,.om-c2,.om-c3{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.om-c1 .om-ck{margin:0;flex:0 0 auto}
.om-cfrom{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.om-cfu{flex:0 0 auto;font-size:9.5px;font-weight:700;color:var(--blue,#004B28);border:1px solid #BFD0E4;border-radius:4px;padding:0 3px}
.om-cwhen{flex:0 0 auto;font-size:11px;color:var(--ink-2,#5A6470)}
.om-c1 .om-flagbtn{flex:0 0 auto;padding:0 2px;font-size:12px;min-height:0;height:auto}
.om-csubj{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--blue,#004B28);font-weight:600}
.om-c2 > *:not(.om-csubj){flex:0 0 auto}
.om-catt{font-size:11px}
.om-cord{font-size:10.5px;font-weight:700;color:#1B7A46;background:#EAF6EE;border-radius:4px;padding:0 5px} .om-cord.d{color:#8A5A00;background:#FFF1D6}
.om-c3{color:var(--ink-2,#5A6470);font-size:12px;overflow:hidden;text-overflow:ellipsis;display:block}
.om-c3 .om-unseen,.om-c3 .om-seen{margin-right:6px}
.om-rp-list .om-t tr.om-cr.om-new .om-cfrom{color:var(--ink,#1B2733)}
.om-rp-list .om-t tr.om-cr:not(.om-new) .om-cfrom{font-weight:600}
.so2-chip.so2-rep{background:#EEF3F8;color:var(--blue,#004B28);border-color:#C9D7E6}
/* Quotations (4.64) */
.qt-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px} .qt-bar .segs{margin:0} .qt-q{flex:1 1 260px;margin:0}
.qt-bar select,.qt-bar input[type=date]{height:34px;border:1px solid #DDE1E6;border-radius:7px;padding:0 8px;font:inherit;font-size:12.5px;background:#fff}
.qt-d{font-size:12px;color:var(--ink-2,#5A6470);display:flex;gap:4px;align-items:center}
.qt-t td{vertical-align:middle} .qt-t tr[data-qtopen]{cursor:pointer} .qt-t tr[data-qtopen]:hover td{background:#F6F9FC}
.qt-t .sub{display:block} .qt-acts{white-space:nowrap} .qt-acts .btn{margin-left:4px}
.so2-chip.so2-quote{background:#FDECEC;color:#B01B1C;font-weight:700}
/* quotation line discount slider (4.74) */
.qld{display:flex;align-items:center;gap:3px;margin-top:3px;justify-content:flex-end} .qld input{width:44px;height:22px;padding:0 4px;margin:0;font-size:11.5px;text-align:right}
.qld span{font-size:10.5px;font-weight:700;color:#B01B1C}
.qt-apw{display:block;margin-top:2px}
.oo-st .chip{margin:0 4px 2px 0} .oo-st .sub{display:block}
.qll{font-size:10.5px;color:var(--ink-3,#6b7280);text-align:right;margin-top:2px}
.so2-t td:has(.qld){overflow:visible}
/* quotation discount approval: the approver's note + Approve / Decline inside the banner */
.qt-dec{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px} .qt-dec input{flex:1 1 220px;min-width:0;margin:0}
/* the Less % column on the lines (order-approval.js, quotations.js): the box is the same size as the price box; red above the approval line */
.so-dc{display:flex;align-items:center;gap:4px} .so-dc input{flex:1;min-width:0} .so-dc i{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-3,#6b7280)}
.so-dc.over input{border-color:#B01B1C;color:#B01B1C;font-weight:700} .so-dc.over i{color:#B01B1C}
.so2-t td.so2-dcc{overflow:visible}
.so2-t td.so2-lp{color:var(--ink-2,#4b5563);font-variant-numeric:tabular-nums}
.so2-t .qld.so-dc{margin:0;justify-content:flex-start} .so2-t .qld.so-dc input{height:30px;width:auto;padding:0 9px;font-size:13.5px;text-align:right}
/* Orders@ email opened from Action required (ordermail.js omWin): full screen, only the top banner */
body.office.om-focus #orail,body.office.om-focus #osub,body.office.om-focus #oscrim{display:none!important}
body.office.om-focus #app.on{padding-left:0!important}
body.office.om-focus #otop,body.office.om-focus #ostatus,body.office.om-focus .askdock{left:0!important}
body.office.om-focus .toast{left:14px!important}
body.office.om-focus #omenu{display:none}
.omfocusx{border:1px solid var(--red,#C8102E);background:var(--red,#C8102E);color:#fff;border-radius:6px;height:32px;padding:0 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;margin-right:10px;white-space:nowrap}
.omfocusx:hover{filter:brightness(.92)}
/* drop files onto Attach another file (5.24) */
.soc-drop.soc-dropon{outline:2px dashed var(--blue,#004B28);outline-offset:2px;background:#EEF3F8}
/* Order book: the total row under the list, one even shade across */
.ob-t tr.ob-tot td{background:#F3F6F9!important;border-top:2px solid #DDE1E6}

/* Orders@: the orders one email made (omSiblingsHtml) */
.om-sibs{margin-top:10px;border:1px solid #E3E7EC;border-radius:8px;padding:8px;display:flex;flex-wrap:wrap;gap:6px}
.om-sibh{flex-basis:100%;font-size:13px;margin-bottom:2px}
.om-sib{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid #DDE1E6;background:#fff;border-radius:7px;padding:5px 9px;cursor:pointer;font:inherit;font-size:12.5px;text-align:left}
.om-sib span{font-size:11px;color:var(--ink-3,#6b7280)} .om-sib:hover{border-color:var(--blue)}
.om-sib.on{border-color:var(--blue);background:#EEF4FA;cursor:default} .om-sib.done{opacity:.6}
/* the lines' number boxes (qty, price, less %) are narrow columns: less side padding so the figures fit */
.so2-t input.num{padding:0 6px}
.so2-t input.num::-webkit-inner-spin-button,.so2-t input.num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .so2-t input.num{-moz-appearance:textfield}