:root{
    /* ---- brand ---------------------------------------------------
       Spectrum Laundry: black and white as the primary scheme, with the
       colour wheel supplying accents. Green is reserved for good outcomes
       and red for bad ones, so neither is used decoratively.
       --------------------------------------------------------------- */
    --black:#000000;
    --off-black:#111214;
    --charcoal:#1D1F23;
    --paper:#ffffff;
    --shell:#F6F6F7;

    /* Interactive: BMA green. Deliberately darker than the positive green
       below so a button never reads as a success badge. */
    --brand:#006600;
    --brand-dark:#004d00;
    --brand-light:#E6F0E6;

    /* Status. Only these two carry meaning. */
    --ok:#43A047;
    --ok-bg:#E8F5E9;
    --ok-text:#1B5E20;
    --warn:#F58220;
    --warn-bg:#FFF1E0;
    --warn-text:#8A4500;
    --bad:#D32F2F;
    --bad-bg:#FDECEA;
    --bad-text:#8A1F1F;

    --ink:#17181A;
    --muted:#6B6E73;
    --line:#E2E3E6;
    --line-strong:#C9CBCF;
    --radius:10px;
    --shadow:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);

    /* Kept for older rules; both now point at the brand. */
    --purple:var(--brand);
    --purple-deep:var(--off-black);
    --purple-hero-dark:var(--black);
    --lime:var(--ok);
    --navy:#5B2A86;
    --denim:#0089D0;
    --denim-dark:#005E9E;
    --denim-light:#DCEAF5;
    --chambray:#F1F2F4;
    --rivet:#C68A00;
    --thread:#F58220;
    --hard-red:var(--bad);

    /* Wash metric, running as a traffic light. */
    --metric-easy:#43A047;        --metric-easy-text:#ffffff;
    --metric-medium:#FFD400;      --metric-medium-text:#5C4A00;
    --metric-hard:#F58220;        --metric-hard-text:#ffffff;
    --metric-veryhard:#D32F2F;    --metric-veryhard-text:#ffffff;

    /* Bar colours by kind of process. Wet blue, dry amber, laser pink. */
    --kind-wet:#0089D0;
    --kind-dry:#F58220;
    --kind-laser:#EC008C;

    /* Soft cards */
    --card-lavender:#EDE9F3;
    --card-gray-blue:#E4E9EE;
    --card-tan:#EFE3DA;
    --card-green:var(--ok-bg);
    --card-pink:var(--bad-bg);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    background-image:radial-gradient(circle at 1px 1px, rgba(61,90,128,0.06) 1px, transparent 0);
    background-size:22px 22px;
  }
  h1,h2,h3,.label-font{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em;}
  .mono{font-family:'JetBrains Mono',monospace;}

  /* ---------- Header (BD Portfolio style: purple bar + white tab strip) ---------- */
  header.top{background:transparent; box-shadow:var(--shadow); position:sticky; top:0; z-index:50;}
  .topbar{background:var(--black); color:#fff; padding:14px 28px; display:flex; align-items:center; justify-content:space-between;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand .wheel{width:36px; height:36px; flex:none; display:block;}
  .brand h1{margin:0; font-size:19px; color:#fff; letter-spacing:.04em;}
  .brand .sub{font-size:11px; color:rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.12em; margin-top:2px;}
  .status-pill{background:rgba(255,255,255,.15); padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.03em;}
  .admin-btn{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; padding:6px 14px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.03em; cursor:pointer; font-family:'Inter',sans-serif;}
  .admin-btn:hover{background:rgba(255,255,255,.22);}
  .pin-input{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:7px; font-size:20px; letter-spacing:.3em; text-align:center; font-family:'JetBrains Mono',monospace; background:var(--chambray);}
  .pin-error{color:var(--hard-red); font-size:12px; margin-top:8px; text-align:center; display:none;}
  .pin-error.show{display:block;}
  .deleted-list{display:flex; flex-direction:column; gap:10px;}
  .deleted-row{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:12px 14px; background:var(--chambray); border-radius:8px;}
  .deleted-row .info b{display:block; color:var(--navy); font-family:'Oswald',sans-serif; font-size:13px;}
  .deleted-row .info span{color:var(--muted); font-size:11px;}
  .deleted-row .actions{display:flex; gap:8px;}
  .btn-restore{background:var(--ok); color:#fff;}
  .btn-restore:hover{background:#3d7534;}
  .btn-purge{background:var(--hard-red); color:#fff;}
  .btn-purge:hover{background:var(--bad-text);}
  .status-pill.ok{background:rgba(67,160,71,.30); color:#D8F0DA;}
  .status-pill.warn{background:rgba(240,127,19,.32); color:#FFE3C2;}

  .tabbar{background:#fff; padding:0 28px; display:flex; gap:26px; border-bottom:1px solid var(--line);}
  .tab-link{background:none; border:none; padding:14px 2px; font-family:'Oswald',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; transition:.15s;}
  .tab-link.active{color:var(--brand); border-bottom-color:var(--brand); font-weight:600;}
  .tab-link:hover:not(.active){color:var(--ink);}

  main{padding:26px 28px 60px; max-width:1480px; margin:0 auto;}
  section.tab{display:none;}
  section.tab.active{display:block; animation:fade .25s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

  /* ---------- Card / tag ---------- */
  /* Padding lives on the base rule rather than being repeated inline on each
     card, because .section-title-bar bleeds to the card's edges with a
     matching negative margin (-20px -22px). A card that forgot the inline
     padding, or had none applied, left its header sitting flush against the
     rounded corner with no breathing room: exactly the "cut off" look Roald
     flagged on Production. One definition means the two can no longer drift
     apart. Anything needing different padding overrides it locally, as
     the step tracker's card already does. */
  .card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden; padding:20px 22px;}
  .tag-card{position:relative; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px 20px; border:2px dashed var(--denim-light);}
  .tag-card::before, .tag-card::after{content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--rivet); box-shadow:0 0 0 2px #fff, inset 0 -1px 1px rgba(0,0,0,.3); top:10px;}
  .tag-card::before{left:10px;}
  .tag-card::after{right:10px;}

  .section-title{display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:16px; color:var(--purple-deep);}
  .section-title .chip{background:var(--purple-deep); color:#fff; font-size:11px; font-family:'JetBrains Mono',monospace; padding:2px 8px; border-radius:20px; letter-spacing:0;}

  /* BD Portfolio-style bar header for plain cards */
  .section-title-bar{
    margin:-20px -22px 18px; padding:14px 22px;
    background:var(--purple-deep); color:#fff;
    font-family:'Oswald',sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
    display:flex; align-items:center; justify-content:space-between;
    /* A header with a search box and several buttons (Production, Forward
       plan) does not fit one row at every width. Wrapping lets the whole
       right-hand control group drop to its own row as a unit, evenly spaced,
       rather than the browser overflowing individual controls into an uneven
       stack. flex-wrap alone is not enough while the row still reports
       nowrap; row-gap gives the second row breathing room once it appears. */
    flex-wrap:wrap; row-gap:10px;
  }
  .section-title-bar .chip{background:rgba(255,255,255,.2); color:#fff; font-size:10.5px; padding:2px 9px; border-radius:20px; font-family:'JetBrains Mono',monospace; letter-spacing:0;}

  /* ---------- Job Card layout ---------- */
  /* Job card drawer (slides in from the left) */
  .drawer-overlay{position:fixed; inset:0; background:rgba(20,20,30,.45); z-index:150; opacity:0; pointer-events:none; transition:opacity .2s ease;}
  .drawer-overlay.open{opacity:1; pointer-events:auto;}
  .drawer-panel{position:fixed; top:0; left:0; height:100vh; width:100%; max-width:520px; background:#fff; box-shadow:10px 0 40px rgba(0,0,0,.3); transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto; z-index:151; display:flex; flex-direction:column;}
  .drawer-overlay.open .drawer-panel{transform:translateX(0);}
  .drawer-header{background:var(--purple-deep); color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:14px; letter-spacing:.05em; position:sticky; top:0; z-index:2;}
  .drawer-header .chip{background:rgba(255,255,255,.2); color:#fff;}
  .drawer-header button{background:rgba(255,255,255,.15); border:none; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:13px;}
  .drawer-header button:hover{background:rgba(255,255,255,.3);}
  .drawer-body{padding:22px 24px;}

  .field-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
  .field-grid .full{grid-column:1/-1;}
  label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px;}
  input[type=text], input[type=password], input[type=date], input[type=number], select, textarea{
    width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:7px;
    font-size:13.5px; font-family:'Inter',sans-serif; background:var(--chambray); transition:.15s;
  }
  textarea{resize:vertical; font-family:'Inter',sans-serif;}
  input:focus, select:focus, textarea:focus{outline:none; border-color:var(--denim); background:#fff; box-shadow:0 0 0 3px rgba(61,90,128,.12);}
  .radio-row{display:flex; gap:14px; padding:9px 2px;}
  .radio-row label{display:flex; align-items:center; gap:6px; font-size:12.5px; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink); margin:0;}
  .radio-row input{width:auto;}

  fieldset{border:1px solid var(--line); border-radius:8px; padding:12px 14px 14px; margin:0;}
  legend{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--purple-deep); padding:0 6px;}
  .balance-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}

  .btn{font-family:'Oswald',sans-serif; letter-spacing:.04em; text-transform:uppercase; border:none; border-radius:7px; padding:11px 20px; font-size:13px; cursor:pointer; transition:.15s;}
  .btn-primary{background:var(--brand); color:#fff;}
  .btn-primary:hover{background:var(--brand-dark);}
  .btn-ghost{background:transparent; border:1px solid var(--line); color:var(--muted);}
  .btn-ghost:hover{border-color:var(--purple-deep); color:var(--purple-deep);}
  .btn-sm{padding:7px 12px; font-size:11.5px;}
  .form-actions{display:flex; gap:10px; margin-top:18px;}

  /* Delivery planning / drops */
  .drops-table{display:flex; flex-direction:column; gap:6px;}
  .drops-head{display:grid; grid-template-columns:82px 1fr 1fr 28px; gap:8px; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:0 2px 2px;}
  .drop-row{display:grid; grid-template-columns:82px 1fr 1fr 28px; gap:8px; align-items:center;}
  .drop-row select, .drop-row input{padding:7px 8px; font-size:12.5px;}
  .remove-drop-btn{background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; padding:4px;}
  .remove-drop-btn:hover{color:var(--hard-red);}
  .drop-total{margin-top:10px; font-size:12.5px; font-weight:600; color:var(--purple-deep);}
  #addDropBtn{margin-top:10px;}
  .lead-last-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; max-width:420px;}

  /* ---------- Jobs table ---------- */
  .table-toolbar{display:flex; gap:10px; margin-bottom:14px; align-items:center; flex-wrap:wrap;}
  .table-toolbar input[type=text]{max-width:220px;}
  .table-toolbar select{max-width:170px;}
  .view-toggle{display:inline-flex; background:var(--chambray); border-radius:8px; padding:3px; gap:2px;}
  .view-toggle button{border:none; background:transparent; padding:7px 16px; border-radius:6px; font-family:'Oswald',sans-serif; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); cursor:pointer; transition:.15s;}
  .view-toggle button.active{background:var(--purple-deep); color:#fff; font-weight:600;}
  .view-toggle button:not(.active):hover{color:var(--purple-deep);}
  .table-wrap{overflow-x:auto; border-radius:0 0 var(--radius) var(--radius);}
  table{width:100%; border-collapse:collapse; font-size:13px;}
  /* Matches the section headers (--purple-deep, aliased to --off-black) rather than the old light blue, so every table in the tool reads consistently with the panel it sits inside. */
  thead th{background:var(--purple-deep); color:#fff; text-align:left; padding:11px 12px; font-family:'Oswald',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; position:sticky; top:0; z-index:3;}
  tbody td{padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
  tbody tr:hover{background:var(--chambray);}
  tbody tr.at-risk-row{background:rgba(179,69,44,.06);}
  tbody tr.at-risk-row:hover{background:rgba(179,69,44,.12);}
  thead th.actions-col, tbody td.actions-col{position:sticky; right:0; z-index:4; background:#fff; box-shadow:-3px 0 6px rgba(20,25,40,.08);}
  tbody tr:hover td.actions-col{background:var(--chambray);}
  tbody tr.at-risk-row td.actions-col{background:var(--bad-bg);}
  tbody tr.at-risk-row:hover td.actions-col{background:#f5d5cd;}
  .pill{padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700;}
  .pill-easy{background:var(--metric-easy); color:var(--metric-easy-text);}
  .pill-medium{background:var(--metric-medium); color:var(--metric-medium-text);}
  .pill-hard{background:var(--metric-hard); color:var(--metric-hard-text);}
  .pill-veryhard{background:var(--metric-veryhard); color:var(--metric-veryhard-text);}
  .icon-btn{background:none; border:none; cursor:pointer; font-size:17px; padding:5px 8px; border-radius:6px; color:var(--muted);}
  .icon-btn:hover{background:var(--chambray); color:var(--purple-deep);}
  .empty-row td{text-align:center; color:var(--muted); padding:30px; font-style:italic;}

  /* ---------- Dashboard ---------- */
  .hero-bar{
    background:linear-gradient(135deg,var(--purple-deep),var(--purple-hero-dark)); color:#fff;
    border-radius:var(--radius); padding:22px 26px; display:flex; justify-content:space-between; align-items:center;
    margin-bottom:22px; flex-wrap:wrap; gap:16px; box-shadow:var(--shadow);
  }
  .hero-date{font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; font-family:'JetBrains Mono',monospace;}
  .hero-title{font-family:'Oswald',sans-serif; font-size:22px; font-weight:600; margin-top:4px;}
  .hero-sub{font-size:12.5px; opacity:.85; margin-top:4px;}
  .hero-chips{display:flex; gap:10px; flex-wrap:wrap;}
  .hero-chip{background:rgba(255,255,255,.12); padding:8px 14px; border-radius:8px; min-width:190px;}
  .hero-chip .chip-lbl{font-size:10px; text-transform:uppercase; letter-spacing:.06em; opacity:.75; font-weight:700;}
  .hero-chip .chip-val{font-size:12.5px; margin-top:3px;}

  .kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px;}
  .kpi{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px;}
  .kpi .num{font-family:'Oswald',sans-serif; font-size:26px; font-weight:600; color:var(--navy);}
  .kpi .lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px;}
  .kpi .kpi-sub{font-size:11px; color:var(--purple-deep); font-weight:700; margin-top:4px;}
  .kpi.total{background:var(--purple-deep);}
  .kpi.total .num{color:#fff;}
  .kpi.total .lbl{color:rgba(255,255,255,.75);}
  .kpi.planned{background:var(--card-lavender);}
  .kpi.received{background:var(--card-green);}
  .kpi.despatched{background:var(--card-tan);}
  .kpi.late{background:var(--card-pink);}

  .dash-section{margin-bottom:26px;}

  /* Gantt */
  .gantt-legend{display:flex; gap:18px; margin-bottom:12px; font-size:12px; color:var(--muted); flex-wrap:wrap; align-items:center;}
  .legend-swatch{display:inline-flex; align-items:center; gap:6px;}
  .legend-swatch .sw{width:16px; height:10px; border-radius:2px; display:inline-block;}
  .legend-swatch .sw.line{height:2px; width:16px; margin-top:4px;}
  .gantt-scroll{overflow-x:auto; padding-bottom:6px;}
  .gantt-inner{position:relative; min-width:900px;}
  .gantt-header{display:flex; border-bottom:2px solid var(--purple-deep); position:relative; height:30px;}
  .gantt-month{position:absolute; top:0; height:100%; border-left:1px solid var(--line); font-size:11px; color:var(--muted); padding:6px 0 0 6px; font-family:'JetBrains Mono',monospace;}
  .gantt-body{position:relative;}
  .gantt-row{display:flex; align-items:center; height:50px; border-bottom:1px solid var(--line); position:relative;}
  .gantt-row.at-risk{background:rgba(179,69,44,.07); box-shadow:inset 3px 0 0 var(--hard-red);}
  .gantt-row.at-risk .gantt-row-label{background:var(--bad-bg);}
  .risk-flag{color:var(--hard-red); font-size:12px;}
  .inferred-flag{font-size:10px; opacity:.7;}
  .gantt-row-label{position:sticky; left:0; width:190px; min-width:190px; background:#fff; z-index:2; font-size:12px; padding-right:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .gantt-row-label b{display:block; color:var(--navy); font-size:12.5px;}
  .gantt-row-label span{color:var(--muted); font-size:10.5px;}
  .gantt-track{position:relative; flex:1; height:100%;}
  .gantt-gridline{position:absolute; top:0; bottom:0; border-left:1px solid var(--line);}
  .gantt-today{position:absolute; top:0; bottom:0; border-left:2px solid var(--thread); z-index:3;}
  .gantt-today::after{content:"TODAY"; position:absolute; top:-30px; left:-20px; font-size:9px; color:var(--thread); font-family:'JetBrains Mono',monospace; letter-spacing:.05em;}
  .bar{position:absolute; height:9px; border-radius:5px; top:6px;}
  .bar-plan{border:1px solid rgba(0,0,0,.25);}
  .bar-plan.wm-easy{background:var(--metric-easy);}
  .bar-plan.wm-medium{background:var(--metric-medium);}
  .bar-plan.wm-hard{background:var(--metric-hard);}
  .bar-plan.wm-veryhard{background:var(--metric-veryhard);}
  /* No progress overlay any more: the bar is wash metric colour only, so it
     is never disguised the way a near-opaque despatch fill used to turn red
     into purple and orange into brown. Three markers carry the schedule
     instead.

     Production start sits at exactly the same x position as the bar's own
     left edge and, on most jobs, the first drop too: three shapes stacked
     in the same few pixels read as nothing at all rather than three
     distinct things, which is what a small triangle there actually looked
     like. It is now a vertical flag standing taller than the bar itself, in
     a colour no other marker uses, so it reads as "this is where the bar
     begins" even sitting exactly on the bar's edge. Production finish gets
     the same treatment at the other end: a tall vertical line with a
     rounded head, not a 7px triangle at the row's bottom edge that a normal
     glance at a 50px row would miss entirely. */
  .gantt-prodstart-tick{position:absolute; top:-7px; bottom:-7px; width:3px;
    z-index:5; background:var(--navy); border-radius:2px; cursor:help;
    transform:translateX(-1.5px); box-shadow:0 0 0 1px #fff;}
  .gantt-drop-tick{position:absolute; top:-5px; width:0; height:0; z-index:4;
    border-left:5px solid transparent; border-right:5px solid transparent;
    border-top:8px solid var(--denim-dark); cursor:help; transform:translateX(-5px);}
  .gantt-finish-tick{position:absolute; top:-7px; bottom:-7px; width:3px;
    z-index:5; background:var(--lime); border-radius:2px; cursor:help;
    transform:translateX(-1.5px); box-shadow:0 0 0 1px #fff;}
  .gantt-finish-tick::after{content:''; position:absolute; top:-5px; left:50%;
    width:9px; height:9px; border-radius:50%; background:inherit;
    transform:translateX(-50%); box-shadow:0 0 0 1px #fff;}
  .gantt-finish-tick.late{background:var(--hard-red);}
  .gantt-prodstart-sample{display:inline-block; width:3px; height:12px;
    background:var(--navy); border-radius:2px; vertical-align:middle;}
  .gantt-tick-sample{color:var(--denim-dark); font-size:11px;}
  .gantt-desp-sample{display:inline-block; width:3px; height:12px;
    background:var(--lime); border-radius:2px; vertical-align:middle;}
  .gantt-today-sample{display:inline-block; width:2px; height:12px; background:var(--bad-text); vertical-align:middle;}

  .charts-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;}
  /* Live Machine Status: grouped by physical section (WIP's own names and
     order), one card per machine or operator. Colours match the tool's
     current palette: --purple-deep for headers (same as every section
     title bar), --brand green for a running state's progress fill, the
     line/shell tones already used for a resting/idle surface elsewhere. */
  .live-section{margin-bottom:22px;}
  .live-section:last-child{margin-bottom:0;}
  .live-section-head{display:flex; align-items:center; justify-content:space-between;
    background:var(--purple-deep); color:#fff; padding:9px 14px; border-radius:8px 8px 0 0;
    font-family:'Oswald',sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;}
  .live-section-count{font-size:11px; font-family:'JetBrains Mono',monospace;
    color:rgba(255,255,255,.75); text-transform:none; letter-spacing:normal;}
  .live-card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:12px; padding:14px; background:var(--shell); border:1px solid var(--line);
    border-top:none; border-radius:0 0 8px 8px;}
  .live-card{border-radius:9px; padding:12px 13px; border:1.5px solid var(--line);
    background:#fff;}
  .live-card.running{border-color:var(--brand); background:#F2F9EE;}
  .live-card-top{display:flex; align-items:center; justify-content:space-between;
    margin-bottom:6px;}
  .live-kind{font-size:9.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--muted); font-weight:600;}
  .live-state{font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; padding:1px 8px; border-radius:20px;}
  .live-state.idle{color:var(--muted); background:var(--shell);}
  .live-state.running{color:#fff; background:var(--brand);}
  .live-name{font-family:'Oswald',sans-serif; font-weight:600; font-size:13.5px;
    color:var(--navy);}
  .live-job{margin-top:7px; font-size:12.5px; color:var(--ink); font-weight:600;}
  .live-job span{font-weight:400; color:var(--muted); margin-left:4px;}
  .live-cmt{font-size:11px; color:var(--muted); margin-top:1px;}
  .live-process{font-size:11px; color:var(--purple-deep); margin-top:5px; font-weight:600;}
  .live-bar-bg{margin-top:8px; height:6px; border-radius:4px; background:var(--line);
    overflow:hidden;}
  .live-bar-fill{height:100%; background:var(--brand); border-radius:4px;}
  .live-time{margin-top:5px; font-size:10.5px; color:var(--muted);
    font-family:'JetBrains Mono',monospace;}
  .bd-list{display:flex; flex-direction:column; gap:14px;}
  .bd-item{display:flex; flex-direction:column; gap:6px;}
  .bd-item-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .bd-tag{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap;}
  .bd-count{font-family:'Oswald',sans-serif; font-weight:600; font-size:14px; color:var(--navy);}
  .bd-thin-bar-bg{height:5px; background:var(--chambray); border-radius:3px; overflow:hidden;}
  .bd-thin-bar-fill{height:100%; border-radius:3px;}

  /* Delivery progress */
  .progress-list{display:flex; flex-direction:column; gap:13px;}
  .progress-row{display:grid; grid-template-columns:170px 1fr 110px 150px; gap:12px; align-items:center; font-size:12.5px;}
  @media (max-width:820px){.progress-row{grid-template-columns:1fr; gap:5px;}}
  .progress-label b{display:block; color:var(--navy); font-family:'Oswald',sans-serif; font-size:12.5px;}
  .progress-label span{color:var(--muted); font-size:10.5px;}
  .progress-bar-bg{background:var(--chambray); border-radius:7px; height:14px; overflow:hidden;}
  .progress-bar-fill{height:100%; transition:width .3s;}
  .progress-pct{text-align:right; color:var(--purple-deep); font-weight:700;}
  .progress-last{color:var(--muted); font-size:11px;}
  .risk-badge{background:var(--hard-red); color:#fff; font-size:9px; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-left:6px; vertical-align:middle;}
  .risk-badge-atrisk{background:var(--warn-text);}
  .risk-badge-delayed{background:var(--bad);}
  .progress-legend{display:flex; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--muted);
    padding:0 0 10px; align-items:center;}
  .progress-legend .legend-swatch{display:flex; align-items:center; gap:5px;}
  .progress-legend .legend-swatch i{display:inline-block; width:9px; height:9px; border-radius:3px;}
  .completed-toggle{background:none; border:none; color:var(--purple-deep); font-size:12px; font-weight:600; cursor:pointer; padding:12px 0 0; text-decoration:underline;}
  #completedList{display:none; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);}
  #completedList.show{display:flex;}

  .empty-state{text-align:center; padding:50px 20px; color:var(--muted);}
  .empty-state .big{font-size:40px; margin-bottom:8px;}

  .toast{position:fixed; bottom:24px; right:24px; background:var(--navy); color:#fff; padding:12px 18px; border-radius:8px; font-size:13px; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:.25s; pointer-events:none; z-index:99;}
  .toast.show{opacity:1; transform:none;}
  .toast.err{background:var(--hard-red);}

  #configWarning{background:#fff2d6; border:1px solid #e0b050; color:var(--warn-text); padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:13px; display:none;}
  #configWarning code{background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px;}

  /* Import modal */
  .modal-overlay{position:fixed; inset:0; background:rgba(20,20,30,.55); display:none; align-items:center; justify-content:center; z-index:200; padding:20px;}
  .modal-overlay.show{display:flex;}
  .modal-box{background:#fff; border-radius:var(--radius); width:100%; max-width:840px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.35);}
  .modal-header{background:var(--purple-deep); color:#fff; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:13px; letter-spacing:.05em; position:sticky; top:0;}
  .modal-header button{background:none; border:none; color:#fff; font-size:16px; cursor:pointer; line-height:1;}
  .modal-body{padding:20px;}
  .modal-hint{font-size:12.5px; color:var(--muted); margin:0 0 14px;}
  .import-toolrow{display:flex; gap:12px; align-items:flex-end; margin-bottom:12px; flex-wrap:wrap;}
  .import-toolrow > div{max-width:130px;}
  .import-summary{margin-top:14px; font-size:12.5px; padding:10px 14px; border-radius:8px; background:var(--chambray);}
  .import-summary.ok{background:var(--card-green);}
  .import-summary.warn{background:var(--card-pink);}
  .import-preview-table{width:100%; border-collapse:collapse; font-size:11.5px; margin-top:10px;}
  .import-preview-table th{background:var(--denim); color:#fff; padding:6px 8px; text-align:left; font-weight:600;}
  .import-preview-table td{padding:6px 8px; border-bottom:1px solid var(--line);}

  /* ---- sign-in screen ---- */
  #loginOverlay{position:fixed; inset:0; z-index:9999; display:none;
    align-items:center; justify-content:center; background:var(--black);}
  #loginOverlay.show{display:flex;}
  body.locked main, body.locked .tabbar{visibility:hidden;}
  .login-card{width:100%; max-width:360px; background:#fff; border-radius:var(--radius);
    padding:30px 28px; box-shadow:0 18px 50px rgba(0,0,0,.35);}
  .login-wheel{width:52px; height:52px; display:block; margin:0 0 14px;}
  .login-card h2{font-family:'Oswald',sans-serif; font-size:21px; margin:0 0 4px;
    letter-spacing:.4px; text-transform:uppercase; color:var(--ink);}
  .login-card .login-sub{font-size:13px; color:var(--muted); margin:0 0 22px;}
  .login-card label{display:block; font-size:12px; font-weight:600;
    color:var(--ink); margin-bottom:5px;}
  .login-card input{width:100%; padding:10px 12px; margin-bottom:15px;
    border:1px solid var(--line); border-radius:7px; font-size:14px;
    font-family:inherit; box-sizing:border-box;}
  .login-card input:focus{outline:none; border-color:var(--brand);
    box-shadow:0 0 0 3px var(--brand-light);}
  .login-error{display:none; background:var(--bad-bg); color:var(--bad-text); font-size:13px;
    padding:9px 12px; border-radius:7px; margin-bottom:14px;}
  .login-error.show{display:block;}
  .user-chip{font-size:12px; color:rgba(255,255,255,.85); display:flex;
    align-items:center; gap:8px;}
  .user-chip .role-tag{background:rgba(255,255,255,.18); border-radius:20px;
    padding:2px 9px; text-transform:uppercase; letter-spacing:.5px; font-size:10px;
    font-weight:700;}
  .signout-btn{background:none; border:1px solid rgba(255,255,255,.3); color:#fff;
    border-radius:6px; padding:4px 10px; font-size:11px; cursor:pointer;
    font-family:inherit;}
  .signout-btn:hover{background:rgba(255,255,255,.15);}
  body.role-readonly .requires-edit{display:none !important;}

  /* ---- recipe page ---- */
  .rec-wrap{display:grid; grid-template-columns:290px 1fr; gap:18px; align-items:start;}
  @media(max-width:1100px){ .rec-wrap{grid-template-columns:1fr;} }
  .rec-list{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden;}
  .rec-list-head{padding:13px 15px; border-bottom:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center;}
  .rec-list-head h3{margin:0; font-family:'Oswald',sans-serif; font-size:13px;
    text-transform:uppercase; letter-spacing:.05em; color:var(--ink);}
  .rec-item{padding:11px 15px; border-bottom:1px solid var(--line); cursor:pointer;
    font-size:13px;}
  .rec-item:hover{background:var(--tint);}
  .rec-item.sel{background:var(--tint); border-left:3px solid var(--purple-deep);
    padding-left:12px;}
  .rec-item .rec-job{font-weight:600; color:var(--ink);}
  .rec-item .rec-meta{font-size:11px; color:var(--muted); margin-top:2px;}
  .vbadge{display:inline-block; background:var(--purple-deep); color:#fff;
    border-radius:10px; padding:1px 7px; font-size:10px; font-weight:700;
    margin-left:5px;}
  .vbadge.ok{background:#1B7A3D;}

  .rec-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:18px;}
  .rec-head{display:flex; justify-content:space-between; align-items:flex-start;
    gap:14px; flex-wrap:wrap; margin-bottom:6px;}
  .rec-head h2{margin:0; font-family:'Oswald',sans-serif; font-size:19px;
    text-transform:uppercase; letter-spacing:.04em; color:var(--ink);}
  .rec-sub{font-size:12px; color:var(--muted); margin:3px 0 0;}
  .vtabs{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0;}
  .vtab{background:#fff; border:1px solid var(--line); border-radius:6px;
    padding:6px 13px; font-size:12px; cursor:pointer; font-family:inherit;
    color:var(--muted);}
  .vtab.active{background:var(--purple-deep); border-color:var(--purple-deep);
    color:#fff; font-weight:600;}
  .vtab.locked::after{content:' (locked)'; font-size:10px; opacity:.8;}
  .vtab.missing{border-style:dashed; color:var(--muted);}

  .subs-box{background:#FFF6E5; border:1px solid #E8C87A; border-left:4px solid #D99500;
    border-radius:6px; padding:11px 13px; margin:12px 0; font-size:12px;}
  .subs-box h4{margin:0 0 6px; font-size:12px; font-family:'Oswald',sans-serif;
    text-transform:uppercase; letter-spacing:.04em; color:#8a5b00;}
  .subs-box div{margin:3px 0; color:#5c4400;}
  .subs-box code{background:rgba(0,0,0,.06); padding:1px 5px; border-radius:3px;}

  .rec-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media(max-width:1400px){ .rec-cols{grid-template-columns:1fr;} }
  .rec-cols.single{grid-template-columns:1fr;}
  .cx-na{display:inline-block; width:42px; text-align:center; color:var(--muted);
    font-size:11px;}
  /* A small target with nothing to see is easy to miss on first use, which is
     exactly what happened: it had to be found by guessing rather than seen.
     A blend-based background (rgba over whatever sits underneath) turned out
     to be nearly invisible against the near-white .proc-bar background used
     on every version but V0's TFG side (--tint is close to white), even
     though it read fine against the strong purple TFG bar where it was first
     checked. A solid background and a real border make the chip legible
     regardless of what is underneath, rather than depending on a blend that
     only works against one of the three surfaces this appears on. */
  .drag-handle{cursor:grab; color:#6B6E76; font-size:13px; letter-spacing:-2px;
    user-select:none; padding:3px 5px; margin:-3px -2px; flex:none;
    border-radius:5px; background:#E4E5E9; border:1px solid #D3D5DA;
    transition:background-color .12s ease, color .12s ease;}
  .drag-handle:hover{background:#CFE7F5; border-color:var(--denim); color:var(--denim);}
  .drag-handle:active{cursor:grabbing; background:#B8DBEF;}
  /* .proc-handle sits on a near-white background (--tint) on every version
     except V0's TFG side, which is dark purple. The plain .drag-handle rule
     above already gives it a visible grey chip that reads fine there; only
     the TFG-purple case needs an override, and that override already exists
     further down, scoped to .proc-tfg specifically. A second, unscoped
     .proc-handle rule here forced white text everywhere, including the
     Spectrum side, where it disappeared against the light background: this
     is exactly the bug Roald found. */
  .proc-block.drag-src, .step-row.drag-src{opacity:.4;}
  .step-row.drop-before{box-shadow:inset 0 2px 0 0 var(--purple);}
  .step-row.drop-after{box-shadow:inset 0 -2px 0 0 var(--purple);}
  .proc-block.drop-before{box-shadow:0 -3px 0 0 var(--purple);}
  .proc-block.drop-after{box-shadow:0 3px 0 0 var(--purple);}
  .proc-block.no-drop, .step-row.no-drop{cursor:not-allowed;}
  .rec-col h3 .carried{font-family:'Inter',sans-serif; font-size:10px;
    font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0;
    margin-left:7px;}
  .rec-col h3{margin:0 0 8px; font-family:'Oswald',sans-serif; font-size:12px;
    text-transform:uppercase; letter-spacing:.05em; color:var(--purple-deep);}
  .rec-col.tfg h3{color:var(--denim);}

  .proc-block{border:1px solid var(--line); border-radius:7px; margin-bottom:10px;
    overflow:hidden;}
  .proc-bar{background:var(--tint); padding:8px 11px; display:flex; gap:8px;
    align-items:center; border-bottom:1px solid var(--line); flex-wrap:wrap;}
  .proc-bar .pname{font-weight:700; font-size:12.5px; color:var(--ink);}
  .proc-bar .pfrom{font-size:10.5px; color:#8a5b00; background:var(--warn-bg);
    border:1px solid #E8C87A; border-radius:9px; padding:1px 7px;}
  .proc-bar .spacer{flex:1;}
  .step-row{display:flex; gap:5px; align-items:center; padding:5px 8px;
    border-bottom:1px solid var(--shell); flex-wrap:wrap;}
  .step-row:last-child{border-bottom:none;}
  .step-row .sname{flex:0 0 118px; font-size:11.5px; color:var(--ink);
    font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .step-row input, .step-row select{border:1px solid var(--line); border-radius:4px;
    padding:3px 5px; font-size:11px; font-family:inherit; background:#fff;
    min-width:0;}
  .step-row input.mini{width:52px;} .step-row input.chemq{width:52px;}
  .step-row select.chem{width:118px;} .step-row select.cx{width:44px;}
  .step-row input.tools{width:78px;}
  .step-row .noeq{color:var(--muted); font-size:11px;}
  .icon-mini{background:none; border:1px solid var(--line); border-radius:4px;
    width:21px; height:21px; line-height:1; cursor:pointer; color:var(--muted);
    font-size:11px; padding:0; font-family:inherit;}
  .icon-mini:hover{background:var(--tint); color:var(--ink);}
  .icon-mini.on{background:var(--purple-deep); color:#fff; border-color:var(--purple-deep);}
  .step-extra{display:none; padding:7px 10px 9px 126px; background:#FBFAFC;
    border-bottom:1px solid var(--shell); font-size:11px;}
  .step-extra.show{display:block;}
  .step-extra label{display:block; font-size:10px; text-transform:uppercase;
    letter-spacing:.04em; color:var(--muted); margin:5px 0 2px; font-weight:600;}
  .step-extra textarea{width:100%; min-height:44px; border:1px solid var(--line);
    border-radius:4px; padding:5px 6px; font-family:inherit; font-size:11.5px;
    box-sizing:border-box; resize:vertical;}
  .step-extra select{border:1px solid var(--line); border-radius:4px; padding:3px 5px;
    font-size:11px; font-family:inherit; margin-right:6px;}
  .mach-chips{display:flex; gap:5px; flex-wrap:wrap; margin-top:3px;}
  .mach-chip{font-size:10.5px; border:1px solid var(--line); border-radius:12px;
    padding:2px 9px; cursor:pointer; background:#fff; font-family:inherit;}
  .mach-chip.on{background:var(--purple-deep); color:#fff; border-color:var(--purple-deep);}
  .mach-cap{font-size:10px; color:var(--muted); margin-top:4px;}
  .rec-empty{text-align:center; color:var(--muted); font-size:13px; padding:36px 12px;
    font-style:italic;}
  .flag-unconf{background:var(--warn-bg) !important;}

  /* ---- recipe gantt ---- */
  .gantt-wrap{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 16px 18px; margin:14px 0 4px;}
  .gantt-head{display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-bottom:10px;}
  .gantt-head h3{margin:0; font-family:'Oswald',sans-serif; font-size:14px;
    letter-spacing:.6px; text-transform:uppercase;}
  .gantt-total{font-size:12px; color:var(--muted);}
  .gantt-total b{color:var(--ink); font-family:'JetBrains Mono',monospace;}
  .gantt-scroll{overflow-x:auto; padding-bottom:6px;}
  .gantt-grid{position:relative; min-width:640px;}
  .gantt-row{display:flex; align-items:center; height:30px; gap:8px;}
  .gantt-label{width:186px; min-width:186px; font-size:11px; line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .gantt-label b{font-weight:600;}
  .gantt-label span{color:var(--muted);}
  .gantt-track{position:relative; flex:1; height:22px; border-radius:4px;
    background:repeating-linear-gradient(90deg,#EFEFF1 0 1px,transparent 1px 100%);
    background-size:var(--daypx,80px) 100%;}
  .gantt-bar{position:absolute; top:2px; height:18px; border-radius:4px;
    background:var(--bar, var(--brand)); cursor:grab; display:flex; align-items:center;
    padding:0 6px; box-sizing:border-box; min-width:4px;}
  .gantt-bar:active{cursor:grabbing;}
  .gantt-bar.blocked{background:#C9CBCF; cursor:not-allowed;}
  /* Dark hatching over the section colour, rather than a second hue. Drying's
     section colour is the same orange as the warning, so an amber stripe was
     invisible on the bars most likely to stall. */
  .gantt-bar.starved{background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.34) 0 6px, rgba(0,0,0,0) 6px 13px),
    var(--bar, var(--brand));
    box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.45);}
  .gantt-bar.marker{background:var(--ink); min-width:3px; padding:0;}
  .gantt-swatch{display:inline-block; width:9px; height:9px; border-radius:2px;
    margin-right:6px; vertical-align:-1px; flex:none;}
  .ge-open{background:none; border:none; color:var(--muted); cursor:pointer;
    font-size:12px; padding:0 4px; flex:none; line-height:1;}
  .ge-open:hover{color:var(--brand);}
  .gantt-edit{background:var(--shell); border:1px solid var(--line-strong);
    border-radius:8px; padding:11px 13px; margin:6px 0 8px 194px;}
  .ge-head{font-size:12px; margin-bottom:9px;}
  .ge-head span{color:var(--muted); margin-left:8px;}
  .ge-row{display:flex; align-items:center; gap:14px; margin-bottom:9px;}
  .ge-field{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600;}
  .ge-field select{padding:3px 6px; border:1px solid var(--line); border-radius:5px;
    font-family:inherit; font-size:11px;}
  .ge-cap{font-size:11px; color:var(--muted); font-family:'JetBrains Mono',monospace;}
  .ge-note{font-size:11px; color:var(--muted);}
  .ge-machs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px;}
  .ge-mach{display:inline-flex; align-items:center; gap:5px; font-size:11px;
    border:1px solid var(--line); border-radius:20px; padding:3px 10px;
    background:#fff; cursor:pointer;}
  .ge-mach.on{border-color:var(--brand); background:var(--brand-light);
    font-weight:600;}
  .ge-mach input{margin:0;}
  .ge-actions{display:flex; align-items:center; gap:9px;}
  .gantt-bar-txt{font-size:10px; color:#fff; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; font-family:'JetBrains Mono',monospace;}
  .gantt-bar.blocked .gantt-bar-txt{color:#5A5D62;}
  .gantt-gap{position:absolute; top:2px; height:18px; border-radius:3px;
    background:repeating-linear-gradient(90deg,#E2E3E6 0 3px,transparent 3px 6px);}
  .gantt-axis{display:flex; margin-top:2px;}
  .gantt-axis .gantt-label{visibility:hidden;}
  .gantt-axis-inner{position:relative; flex:1; height:16px;}
  .gantt-tick{position:absolute; font-size:9px; color:var(--muted);
    font-family:'JetBrains Mono',monospace; transform:translateX(-50%);}
  .gantt-thresh{display:flex; align-items:center; gap:6px; font-size:10px;
    color:var(--muted); margin:1px 0 3px 194px;}
  .gantt-thresh input{width:66px; padding:2px 5px; font-size:10px;
    border:1px solid var(--line); border-radius:4px; font-family:'JetBrains Mono',monospace;}
  .gantt-warn{color:var(--bad-text); font-size:10px;}
  .gantt-empty{color:var(--muted); font-size:12px; padding:10px 0;}
  .gantt-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:10px;
    color:var(--muted); margin-top:10px;}
  .gantt-legend i{display:inline-block; width:20px; height:9px; border-radius:2px;
    margin-right:4px; vertical-align:middle;}

/* ---- lifecycle phase strip ---- */
.phase-strip{background:var(--shell); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 14px; margin:0 0 14px;}
.ph-row{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.ph-row2{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:7px; font-size:11.5px;}
.ph-pill{font-size:11px; font-weight:600; padding:3px 11px; border-radius:20px;
  background:#fff; border:1px solid var(--line-strong); color:var(--muted);}
.ph-pill.reached{color:var(--ink);}
.ph-pill.now{background:var(--brand); border-color:var(--brand); color:#fff;}
.ph-arrow{color:var(--line-strong); font-size:14px;}
.ph-count{font-size:11px; color:var(--muted); margin-left:4px;
  font-family:'JetBrains Mono',monospace;}
.ph-row .btn{margin-left:auto;}
.ph-next{color:var(--ink);}
.ph-next b{font-weight:600; color:var(--muted); margin-right:5px;
  text-transform:uppercase; font-size:10px; letter-spacing:.5px;}
.ph-risk{color:var(--bad-text); background:var(--bad-bg); border-radius:20px;
  padding:2px 10px; font-size:11px;}

/* ---- tracking ---- */
.track-tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
/* A <select> is a flex item like any other; without this it can stretch to
   fill a wrapped row on its own rather than sizing to its content, which is
   what made the Forward plan header's dropdowns look stretched once they
   wrapped onto their own line. */
.track-tools select{flex:0 0 auto; width:auto;}
.track-tools input[type="text"]{padding:6px 10px; border:1px solid var(--line);
  border-radius:7px; font-size:12px; font-family:inherit; min-width:200px;}
.track-toggle{font-size:11px; color:#fff; display:flex; align-items:center; gap:5px;}
.track-phases{display:flex; gap:7px; flex-wrap:wrap; padding:14px 18px 4px;}
.track-phase{background:#fff; border:1px solid var(--line-strong); color:var(--muted);
  border-radius:20px; padding:5px 13px; font-size:11px; font-weight:600;
  cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:7px;}
.track-phase span{background:var(--shell); border-radius:12px; padding:1px 7px;
  font-family:'JetBrains Mono',monospace; font-size:10px;}
.track-phase.on{background:var(--brand); border-color:var(--brand); color:#fff;}
.track-phase.on span{background:rgba(255,255,255,.22); color:#fff;}

.tk-job{border-bottom:1px solid var(--line);}
.tk-head{display:flex; align-items:center; gap:14px; padding:11px 18px;
  cursor:pointer;}
.tk-head:hover{background:var(--shell);}
.tk-job.open .tk-head{background:var(--shell);}
.tk-caret{color:var(--muted); font-size:11px; width:10px; flex:none;}
.tk-id{min-width:186px; flex:none; font-size:12px; line-height:1.35;}
.tk-id b{display:block;}
.tk-id span{color:var(--muted); font-size:11px;}
.tk-phase{font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; padding:3px 9px; border-radius:20px; flex:none;
  background:var(--shell); color:var(--muted); border:1px solid var(--line-strong);}
.tk-phase.ph-pre_pre{background:#E8F0F8; color:#1B5E86; border-color:#B9D4E8;}
.tk-phase.ph-pre{background:#FFF1E0; color:var(--warn-text); border-color:#F3D3AE;}
.tk-phase.ph-production{background:var(--ok-bg); color:var(--ok-text); border-color:#B7DCBA;}
.tk-phase.ph-complete{background:var(--shell); color:var(--muted);}
.tk-next{flex:1; font-size:12px; min-width:150px;}
.tk-due{color:var(--muted); font-size:11px;}
.tk-prog{display:flex; align-items:center; gap:8px; flex:none; width:132px;}
.tk-bar{flex:1; height:6px; background:var(--line); border-radius:4px; overflow:hidden;}
.tk-bar i{display:block; height:100%; background:var(--brand);}
.tk-prog span{font-size:10px; color:var(--muted);
  font-family:'JetBrains Mono',monospace;}
.tk-risk{background:var(--bad-bg); color:var(--bad-text); border-radius:20px;
  padding:3px 10px; font-size:11px; font-weight:600; flex:none;}

.tk-detail{padding:4px 18px 16px 42px; background:#fff;}
.tk-group{margin-top:12px;}
.tk-group h4{margin:0 0 6px; font-family:'Oswald',sans-serif; font-size:11px;
  letter-spacing:.6px; text-transform:uppercase; color:var(--muted);}
.tk-step{display:flex; align-items:center; gap:12px; padding:5px 8px;
  border-radius:6px; font-size:12px;}
.tk-step:nth-child(even){background:#FAFAFB;}
.tk-step.done{color:var(--muted);}
.tk-step.done .tk-act{text-decoration:line-through;}
.tk-step.late{background:var(--bad-bg);}
.tk-tick{margin:0; flex:none; cursor:pointer;}
.tk-auto{width:13px; text-align:center; flex:none; color:var(--ok);
  font-weight:700;}
.tk-no{width:16px; color:var(--muted); flex:none;
  font-family:'JetBrains Mono',monospace; font-size:11px;}
.tk-act{flex:1;}
.tk-act em{color:var(--muted); font-size:10.5px; font-style:normal; margin-left:7px;}
.tk-gate{background:var(--brand); color:#fff; font-size:9px; font-weight:700;
  text-transform:uppercase; padding:1px 6px; border-radius:10px; margin-left:7px;}
.tk-who{width:76px; color:var(--muted); font-size:11px; flex:none;}
.tk-plan{width:88px; flex:none; font-family:'JetBrains Mono',monospace; font-size:11px;}
.tk-actual{width:150px; flex:none; font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--ok-text);}
.tk-actual em{font-style:normal; color:var(--muted); font-size:10px;}
.tk-lateflag{color:var(--bad-text); font-weight:600;}

/* ---- dashboard sub-tabs ---- */
.dash-subtabs{display:flex; gap:8px; margin-bottom:14px;}
.dash-subtab{background:#fff; border:1px solid var(--line-strong); color:var(--muted);
  border-radius:20px; padding:6px 16px; font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit;}
.dash-subtab.active{background:var(--brand); border-color:var(--brand); color:#fff;}

/* ---- incoming feed schedule ---- */
.inc-wrap{padding:2px 0 8px;}
/* Each order is now a card: a summary line (job, first/last feed, deadline,
   scheduled, order returns) with its planned drops stacked below in full,
   readable rows rather than squeezed into one column of a wide table. That
   squeeze, not the widths themselves, was what made a drop's boxes
   unreadable: two full input pairs and a pill never had room competing
   against six fixed-width columns in one flex row. */
.inc-row{padding:14px 18px; border-bottom:1px solid var(--line); font-size:12px;}
.inc-row:last-child{border-bottom:none;}
.inc-head{background:var(--shell); font-weight:600; color:var(--muted);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  display:flex; align-items:center; gap:12px; padding:9px 18px;}
.inc-row-top{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;
  margin-bottom:10px;}
.inc-job{width:210px; flex:none; line-height:1.35;}
.inc-job b{display:block;}
.inc-job span{color:var(--muted); font-size:11px;}
.inc-cell{width:118px; flex:none;}
.inc-cell em, .inc-tot em{display:block; font-style:normal; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  margin-bottom:2px;}
.inc-cell input[type="date"]{width:100%; padding:4px 6px; border:1px solid var(--line);
  border-radius:6px; font-size:11px; font-family:inherit;}

/* The drops themselves: one full-width row per drop, planned on the left,
   delivered on the right, a clear gap and a labelled heading on each so
   there is no ambiguity about which box is which. */
.inc-drops{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.inc-drop{display:flex; align-items:center; gap:14px; background:var(--shell);
  border:1px solid var(--line); border-radius:8px; padding:8px 12px;
  flex-wrap:wrap;}
.inc-drop-block{display:flex; align-items:center; gap:6px;}
.inc-drop-label{font-size:9.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:600; width:52px; flex:none;}
.inc-drop-actual{padding-left:14px; border-left:1px dashed var(--line-strong);}
.inc-dropdate, .inc-actualdate{width:128px; padding:5px 7px; border:1px solid var(--line);
  border-radius:5px; font-size:11.5px; font-family:inherit;}
.inc-dropqty, .inc-actualqty{width:76px; padding:5px 7px; border:1px solid var(--line);
  border-radius:5px; font-size:11.5px; font-family:'JetBrains Mono',monospace;}
.inc-actualdate, .inc-actualqty{background:#FBFBFC;}
.inc-actualdate::placeholder, .inc-actualqty::placeholder{color:var(--line-strong);}
.inc-otif{font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; padding:3px 9px; border-radius:20px; white-space:nowrap;
  margin-left:auto;}
.inc-otif:empty{padding:0; margin-left:0;}
.inc-otif-ok{background:var(--ok-bg); color:var(--ok-text);}
.inc-otif-warn{background:var(--warn-bg); color:#8a5b00;}
.inc-otif-bad{background:var(--bad-bg); color:var(--bad-text);}
.inc-otif-overdue{background:var(--bad-bg); color:var(--bad-text);}
.inc-otif-pending{background:transparent;}
.inc-x{background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:16px; line-height:1; padding:0 3px;}
.inc-x:hover{color:var(--bad);}
.inc-add{align-self:flex-start; background:none; border:1px dashed var(--line-strong);
  color:var(--muted); border-radius:7px; padding:5px 12px; font-size:11px;
  cursor:pointer; font-family:inherit; margin-top:2px;}
.inc-add:hover{border-color:var(--brand); color:var(--brand);}
.inc-tot{width:118px; flex:none; font-family:'JetBrains Mono',monospace;
  font-size:11px; line-height:1.5;}
.inc-short{color:var(--warn-text); font-size:10px;}
.inc-over{color:var(--bad-text); font-size:10px; font-weight:600;}
.inc-ok{color:var(--ok-text); font-size:10px;}
.inc-return{font-family:'JetBrains Mono',monospace; font-size:11px;}
.inc-none{color:var(--line-strong); cursor:help;}

/* ---- daily throughput ---- */
#tpDate{padding:5px 9px; border:1px solid var(--line); border-radius:7px;
  font-size:12px; font-family:inherit;}
.tp-wrap{overflow-x:auto;}
.tp-row{display:flex; align-items:stretch; border-bottom:1px solid var(--line);
  min-width:1050px;}
.tp-row:last-child{border-bottom:none;}
.tp-head{background:var(--shell); font-weight:600; color:var(--muted);
  font-size:10px; text-transform:uppercase; letter-spacing:.4px;}
.tp-head .tp-cell, .tp-head .tp-job{padding:8px 6px; align-items:center;}
.tp-job{width:206px; flex:none; padding:8px 12px; line-height:1.4; font-size:12px;
  display:flex; flex-direction:column; justify-content:center;}
.tp-job b{display:block;}
.tp-job span{color:var(--muted); font-size:10.5px;}
.tp-fed{color:var(--brand) !important; font-family:'JetBrains Mono',monospace;
  font-size:10px !important;}
.tp-cell{flex:1; min-width:82px; padding:6px 5px; display:flex;
  flex-direction:column; gap:2px; border-left:1px solid var(--line);}
.tp-cell em{font-style:normal; font-size:9.5px; color:var(--muted);
  font-family:'JetBrains Mono',monospace; text-align:right; padding-right:3px;}
.tp-in{width:100%; padding:5px 6px; border:1px solid var(--line);
  border-radius:6px; font-size:12px; text-align:right; box-sizing:border-box;
  font-family:'JetBrains Mono',monospace;}
.tp-in:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-light);}
.tp-in.tp-saved{border-color:var(--ok); background:var(--ok-bg);}
.tp-in.tp-failed{border-color:var(--bad); background:var(--bad-bg);}
.tp-feed{background:#F3F8FC;}
.tp-day{background:var(--shell); align-items:flex-end; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; min-width:92px;}

/* ---- forward machine plan ---- */
.mb-subtab{background:#fff; border:1px solid var(--line-strong); color:var(--muted);
  border-radius:20px; padding:6px 16px; font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit;}
.mb-subtab.active{background:var(--brand); border-color:var(--brand); color:#fff;}
#planWeeks{padding:5px 9px; border:1px solid var(--line); border-radius:7px;
  font-size:12px; font-family:inherit;}
.plan-legend{display:flex; flex-wrap:wrap; gap:12px; padding:12px 18px 6px;
  font-size:11px; color:var(--muted); border-bottom:1px solid var(--line);}
.plan-key i{display:inline-block; width:11px; height:11px; border-radius:3px;
  margin-right:5px; vertical-align:-1px;}
.plan-key em{font-style:normal; color:var(--warn-text); font-size:10px;}
/* Matches the actual bar treatments exactly, rather than a generic sample
   swatch, so the key shows what a planner will really see. */
.plan-swatch-starved{background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.34) 0 5px, rgba(0,0,0,0) 5px 11px),
    var(--denim);}
.plan-swatch-nostock{background:var(--denim); opacity:.42;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);}
.plan-swatch-clash{background:var(--denim);
  box-shadow:inset 0 0 0 2px var(--bad), 0 0 0 1px var(--bad);}
.plan-swatch-today{background:var(--bad); opacity:.55; width:3px !important;
  border-radius:0 !important;}
.plan-scroll{overflow-x:auto; padding-bottom:8px;}
.plan-grid{min-width:900px;}
.plan-axis{display:flex; align-items:center; height:24px;
  border-bottom:1px solid var(--line); background:var(--shell);}
.plan-tick{position:absolute; top:5px; font-size:9.5px; color:var(--muted);
  font-family:'JetBrains Mono',monospace; transform:translateX(-50%);}
.plan-sec{padding:8px 18px 3px; font-family:'Oswald',sans-serif; font-size:10px;
  letter-spacing:.6px; text-transform:uppercase; color:var(--muted);
  background:#fff;}
.plan-row{display:flex; align-items:center; height:26px;}
.plan-row:hover{background:var(--shell);}
.plan-mlabel{width:168px; min-width:168px; padding:0 12px; font-size:11px;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.plan-track{position:relative; flex:1; height:100%; margin-right:14px;
  border-left:1px solid var(--line);
  background:repeating-linear-gradient(90deg,transparent 0 calc(100%/8 - 1px),
    var(--line) calc(100%/8 - 1px) calc(100%/8));}
.plan-bar{position:absolute; top:4px; height:17px; border-radius:4px;
  background:var(--bar); cursor:grab; display:flex; align-items:center;
  padding:0 5px; box-sizing:border-box; overflow:hidden;}
.plan-bar:active{cursor:grabbing;}
.plan-bar span{font-size:9px; color:#fff; white-space:nowrap;
  font-family:'JetBrains Mono',monospace;}
/* The stage badge: which run this bar is, out of how many, in the job's
   own recipe. A small pill rather than plain text, so it reads as a
   distinct piece of information from the job number next to it rather
   than more of the same label. */
.plan-stage{font-style:normal; font-size:8px; color:#fff; margin-left:4px;
  background:rgba(0,0,0,.28); border-radius:3px; padding:0 3px;
  font-family:'JetBrains Mono',monospace; flex:none;}
/* Hovering any one of a job's bars highlights that job's whole sequence and
   dims everything else, so the order across the board is visible at a
   glance without needing to check the recipe. */
.plan-bar.plan-dim{opacity:.22;}
.plan-bar.plan-highlight{box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--ink); z-index:5;}
.plan-bar.starved{background:
  repeating-linear-gradient(135deg, rgba(0,0,0,.34) 0 5px, rgba(0,0,0,0) 5px 11px),
  var(--bar);}
.plan-today{position:absolute; top:0; bottom:0; width:2px; background:var(--bad);
  opacity:.55;}
#planSnap{padding:5px 9px; border:1px solid var(--line); border-radius:7px;
  font-size:12px; font-family:inherit; flex:0 0 auto; width:auto;}
.plan-bar.clash{box-shadow:inset 0 0 0 2px var(--bad), 0 0 0 1px var(--bad);}
.plan-bar.clash span{text-shadow:0 0 3px rgba(0,0,0,.6);}
.plan-clashwarn{background:var(--bad-bg); color:var(--bad-text); border-radius:20px;
  padding:2px 11px; font-size:11px; font-weight:600;}

/* ---- work in progress ---- */
.wip-wrap{overflow-x:auto; padding-bottom:8px;}
.wip-row{display:flex; align-items:stretch; min-width:1150px;
  border-bottom:1px solid var(--line); font-size:11.5px;}
.wip-head{background:var(--shell); position:sticky; top:0; z-index:2;
  font-size:10px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); font-weight:600;}
.wip-job{width:210px; min-width:210px; padding:7px 12px; line-height:1.35;
  display:flex; flex-direction:column; justify-content:center;}
.wip-job b{display:block;}
.wip-job span{color:var(--muted); font-size:10px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;}
.wip-num{width:82px; min-width:82px; padding:7px 8px; text-align:right;
  font-family:'JetBrains Mono',monospace; display:flex; align-items:center;
  justify-content:flex-end; border-left:1px solid var(--line);}
.wip-strong{font-weight:700;}
.wip-owed{color:var(--warn-text); font-weight:600;}
.wip-cell{width:74px; min-width:74px; padding:5px 7px; text-align:right;
  border-left:1px solid var(--line); display:flex; flex-direction:column;
  justify-content:center; font-family:'JetBrains Mono',monospace;}
.wip-cell b{font-weight:600;}
.wip-cell em{font-style:normal; font-size:9.5px; color:var(--warn-text);}
.wip-cell.wip-done{background:var(--ok-bg);}
.wip-cell.wip-done em{color:var(--ok-text);}
.wip-cell.wip-na{color:var(--line-strong); justify-content:center;
  align-items:center;}
.wip-cmt{padding:9px 12px 5px; font-family:'Oswald',sans-serif; font-size:11px;
  letter-spacing:.6px; text-transform:uppercase; color:var(--ink);
  background:#fff; border-bottom:1px solid var(--line);}
.wip-sub{background:var(--shell); font-weight:600;}
.wip-total{background:var(--off-black); color:#fff; font-weight:700;}
.wip-total .wip-num, .wip-total .wip-cell{border-left-color:rgba(255,255,255,.15);}
.plan-bar.nostock{opacity:.42; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);}
.plan-stockwarn{background:var(--warn-bg); color:var(--warn-text); border-radius:20px;
  padding:2px 11px; font-size:11px; font-weight:600;}
#planZoom{padding:5px 9px; border:1px solid var(--line); border-radius:7px;
  font-size:12px; font-family:inherit; flex:0 0 auto; width:auto;}
.plan-when{color:#fff; font-size:11.5px; font-family:'JetBrains Mono',monospace;
  min-width:190px; text-align:center;}

/* ---- recipe reached from a job card row ---- */
.btn-recipe{background:var(--brand); color:#fff; border:none; border-radius:6px;
  padding:4px 12px; font-size:11px; font-weight:600; cursor:pointer;
  font-family:inherit; margin-right:8px;}
.btn-recipe:hover{background:var(--brand-dark);}
.rec-backbar{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.rec-backbar span{font-family:'JetBrains Mono',monospace; font-size:12px;
  color:var(--muted);}

/* ---- telling the two recipes apart on V0 ----
   TFG's colour is their dark purple; Spectrum's half is boxed in black. Only
   the surrounds are tinted: every input stays white so entered values read
   clearly against it. */
.side-tfg{color:#4B1D6E !important;}
.side-spectrum{color:var(--ink) !important;}

.proc-block.proc-tfg{background:#F3EDF8; border:1px solid #DCCBE8;
  border-radius:var(--radius); padding:2px; margin-bottom:10px;}
.proc-block.proc-tfg .proc-bar{background:#4B1D6E; border-bottom-color:#3A1656;}
/* The bar is dark purple, so the heading and its controls need to be light or
   they read as near-black on near-black. The base .drag-handle chip
   (#E4E5E9, a light grey) would look wrong sitting on dark purple, so this
   is overridden here rather than the base rule trying to suit every
   background at once. */
.proc-block.proc-tfg .proc-bar .pname{color:#fff;}
.proc-block.proc-tfg .proc-bar .drag-handle{color:#fff;
  background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.4);}
.proc-block.proc-tfg .proc-bar .drag-handle:hover{background:rgba(255,255,255,.34);}
.proc-block.proc-tfg .proc-bar .drag-handle:active{background:rgba(255,255,255,.44);}
.proc-block.proc-tfg .proc-bar .icon-btn{color:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.35);}
.proc-block.proc-tfg .proc-bar .icon-btn:hover{color:#fff;
  background:rgba(255,255,255,.15);}
.proc-block.proc-tfg .step-row{background:transparent;}
.proc-block.proc-tfg .step-row:nth-child(even){background:rgba(255,255,255,.55);}

.rec-col-spectrum{border:2px solid var(--black); border-radius:var(--radius);
  padding:14px 16px 16px; background:#fff;}
.rec-col-spectrum > h3{margin-top:0;}

/* Inputs stay white on both sides, whatever the surround. */
.rec-col .step-row input,
.rec-col .step-row select,
.rec-col .step-row textarea{background:#fff;}
.metric-set{display:inline-flex; align-items:center; gap:7px;}
.metric-set select{padding:3px 8px; border:1px solid var(--line);
  border-radius:6px; font-size:11px; font-family:inherit;}

/* ---- orders table ---- */
.btn-back{background:var(--black); color:#fff; border:1px solid var(--black);}
.btn-back:hover{background:var(--charcoal); color:#fff;}
.cell-none{color:var(--line-strong);}
.est-late{color:var(--bad-text); font-weight:600;}
.prog-col{width:150px;}
.prog{display:flex; flex-direction:column; gap:3px;}
.prog-bar{position:relative; height:8px; background:var(--line);
  border-radius:5px; overflow:hidden;}
.prog-bar i{position:absolute; left:0; top:0; height:100%; display:block;}
.prog-recv{background:#9EC9E6;}
.prog-desp{background:var(--brand);}
.prog-nums{font-size:10px; color:var(--muted);
  font-family:'JetBrains Mono',monospace; display:flex; gap:6px;}
.prog-nums em{font-style:normal; color:var(--brand); margin-left:auto;}
.next-col{width:230px;}
.next-cell{display:block; width:100%; text-align:left; background:none;
  border:1px solid transparent; border-radius:7px; padding:4px 7px;
  cursor:pointer; font-family:inherit; line-height:1.35;}
.next-cell:hover{background:var(--shell); border-color:var(--line);}
.next-name{display:block; font-size:11.5px; color:var(--ink);}
.next-due{color:var(--muted); font-size:10.5px;}
.next-count{display:block; font-size:10px; color:var(--muted);
  font-family:'JetBrains Mono',monospace;}
.next-cell.late .next-name{color:var(--bad-text); font-weight:600;}
.next-cell.late .next-count{color:var(--bad-text);}
.steps-head{display:flex; align-items:center; gap:14px; margin-bottom:10px;}
.steps-count{font-size:11px; color:var(--muted);
  font-family:'JetBrains Mono',monospace;}
.gantt-actions{display:flex; gap:8px; align-items:center;}
.inc-deadline{font-family:'JetBrains Mono',monospace; font-size:11px;}
.wip-frac{flex-direction:column; align-items:flex-end !important;
  justify-content:center; gap:1px; line-height:1.25;}
.wip-frac b{font-weight:700; font-size:12.5px; color:var(--ink);}
.wip-frac em{font-style:normal; color:var(--muted); font-weight:400;
  font-size:9.5px; white-space:nowrap;}
.wip-total .wip-frac b{color:#fff;}
.wip-total .wip-frac em{color:rgba(255,255,255,.6);}

/* ---- throughput folded into WIP ---- */
.wip-tp-btn{margin-top:4px; display:inline-block;}
.tp-confirm{width:88px; min-width:88px; justify-content:center;
  border-left:1px solid var(--line); padding:6px 5px;}
.tp-confirmbtn{background:var(--brand); color:#fff; border:none;
  border-radius:6px; padding:5px 10px; font-size:11px; font-weight:600;
  cursor:pointer; font-family:inherit; white-space:nowrap;}
.tp-confirmbtn:hover{background:var(--brand-dark);}
.tp-edit{background:none; border:1px solid var(--line-strong); color:var(--muted);
  border-radius:6px; padding:4px 9px; font-size:11px; cursor:pointer;
  font-family:inherit; white-space:nowrap;}
.tp-edit:hover{border-color:var(--brand); color:var(--brand);}
.tp-chip{display:inline-block; background:var(--ok-bg); color:var(--ok-text);
  border-radius:6px; padding:5px 9px; font-size:12px; font-weight:600;
  font-family:'JetBrains Mono',monospace; min-width:38px; text-align:center;}
.tp-row.tp-locked{background:#FAFEFB;}
.tp-row.tp-locked .tp-job b{color:var(--ok-text);}
.inc-derived{color:var(--ink); background:var(--shell); border-radius:6px;
  cursor:help;}

/* ---- short delivery ---- */
.short-closed-btn{color:var(--bad-text) !important; border-color:var(--bad) !important;}
.short-closed-btn:hover{background:var(--bad-bg) !important;}
.prog.prog-shortclosed .prog-bar{opacity:.7;}
.prog-short{font-size:9.5px; color:var(--bad-text); line-height:1.4;}

#shortDeliveryModal .modal-body label{display:block; font-size:11px;
  font-weight:600; color:var(--muted); margin:12px 0 4px;
  text-transform:uppercase; letter-spacing:.4px;}
#shortDeliveryModal .modal-body label:first-of-type{margin-top:0;}
#shortDeliveryModal .modal-body input,
#shortDeliveryModal .modal-body textarea{width:100%; box-sizing:border-box;
  padding:8px 10px; border:1px solid var(--line); border-radius:7px;
  font-size:13px; font-family:inherit;}
#shortDeliveryModal .modal-actions{display:flex; align-items:center;}

/* ---- add process, click-only ---- */
.addproc-select{margin-top:8px; padding:6px 10px; border:1px solid var(--line);
  border-radius:7px; font-size:12px; font-family:inherit; background:#fff;
  color:var(--muted); cursor:pointer;}
.addproc-select:hover{border-color:var(--brand); color:var(--ink);}

/* ---- complexity: make an unset value noticeable ---- */
.cx.cx-empty{background:var(--warn-bg); border:1px solid #F3D3AE;}

/* ---- add to plan (board segments) ---- */
.schedstep.on{color:var(--brand); border-color:var(--brand);}
.sched-machines{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.sched-machine{display:flex; align-items:center; gap:5px; font-size:12px;
  border:1px solid var(--line); border-radius:6px; padding:4px 9px; cursor:pointer;}
.sched-existing-list{display:flex; flex-direction:column; gap:5px; margin:6px 0 4px;}
.sched-existing-row{display:flex; align-items:center; justify-content:space-between;
  font-size:12px; background:var(--shell); border-radius:6px; padding:5px 9px;}
.sched-undo{background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px;}
.sched-undo:hover{color:var(--bad);}

/* ---- Forward Plan: edit mode ---- */
.plan-edit-toolbar{display:flex; align-items:center; gap:10px; padding:10px 18px;
  border-bottom:1px solid var(--line); background:#FBFBFC;}
.plan-editing-note{font-size:12px; color:var(--muted); flex:1;}
.plan-bar.editable{cursor:grab;}
.plan-bar.editable:active{cursor:grabbing;}
.plan-bar.pending{box-shadow:inset 0 0 0 2px var(--warn-text), 0 0 0 1px var(--warn-text);}
.plan-swatch-pending{background:var(--denim); box-shadow:inset 0 0 0 2px var(--warn-text);}

/* ---- position photo pack ---- */
.pos-jobinfo{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px; background:var(--shell); border-radius:8px; padding:12px 16px;}
.pos-jobinfo em{display:block; font-style:normal; font-size:10px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin-bottom:2px;}
.pos-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px; margin:14px 0;}
.pos-card{border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff;}
.pos-card-guide{background:var(--shell); border-bottom:1px solid var(--line);}
.pos-card-guide img{display:block; width:100%; height:150px; object-fit:contain;}
.pos-card-body{padding:10px 12px;}
.pos-card-title{font-weight:700; font-size:12.5px; color:var(--ink);}
.pos-card-detail{font-size:11px; color:var(--muted); margin-bottom:8px;}
.pos-upload-btn{display:inline-block; font-size:12px; font-weight:600; color:var(--brand);
  border:1.5px dashed var(--brand); border-radius:7px; padding:7px 12px; cursor:pointer;
  text-align:center; width:100%; box-sizing:border-box;}
.pos-upload-btn:hover{background:#F2F9EE;}
.pos-card-preview{position:relative;}
.pos-card-preview img{display:block; width:100%; height:140px; object-fit:cover; border-radius:6px;}
.pos-remove{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:none; cursor:pointer; font-size:14px; line-height:1;}
.pos-remove:hover{background:var(--bad-text);}
.pos-history-row{display:flex; align-items:center; justify-content:space-between;
  padding:8px 4px; border-bottom:1px solid var(--line); font-size:12.5px;}

/* ---- Settings ---- */
.settings-section-card{border:1px solid var(--line); border-radius:9px;
  padding:14px 16px; margin-bottom:14px; background:#fff;}
.settings-section-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.settings-section-name{font-weight:700; font-size:14px; flex:1 1 auto; min-width:0; max-width:260px;}
.settings-machine-head{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr 90px;
  gap:8px; font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding:0 2px 4px;}
.settings-row{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr 90px;
  gap:8px; align-items:center; padding:4px 2px;}
.settings-input{padding:5px 8px; border:1px solid var(--line); border-radius:6px;
  font-size:12.5px; font-family:inherit; width:100%; box-sizing:border-box;}
.settings-num{font-family:'JetBrains Mono',monospace;}
.settings-toggle{white-space:nowrap;}
.settings-row-archived{opacity:.45;}
.settings-hours-head{display:grid;
  grid-template-columns:100px 70px repeat(4,1fr); gap:10px;
  font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  padding:0 4px 6px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.settings-hours-row{display:grid;
  grid-template-columns:100px 70px repeat(4,1fr); gap:10px;
  align-items:center; padding:6px 4px; border-bottom:1px solid var(--line);}
.settings-step-row{display:grid; grid-template-columns:110px 2fr 1fr 80px 90px 90px;
  gap:8px; align-items:center; padding:6px 4px; border-bottom:1px solid var(--line);}
.settings-step-phase{font-size:11px; color:var(--muted);}
.settings-step-tag{font-size:10px; text-transform:uppercase; letter-spacing:.03em;
  font-weight:700; color:var(--muted); text-align:center;}
.user-create-grid{display:grid; grid-template-columns:1fr 1.4fr 1fr 1.4fr auto; gap:10px;
  align-items:end; padding:14px 0 18px; border-bottom:1px solid var(--line); margin-bottom:10px;}
.user-create-action{padding-bottom:1px;}
.user-account-head,.user-account-row{display:grid; grid-template-columns:1.4fr 120px 80px minmax(230px,1fr) 80px;
  gap:10px; align-items:center;}
.user-account-head{padding:4px 2px 6px; color:var(--muted); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;}
.user-account-row{padding:10px 2px; border-bottom:1px solid var(--line);}
.user-account-row strong{display:block; font-size:13px;}
.user-account-username{display:block; font-size:11px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere;}
.user-account-status{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--bad-text);}
.user-account-status.is-active{color:var(--ok-text);}
.user-password-reset{display:flex; gap:6px; align-items:center;}
.user-password-reset input{min-width:0;}
@media (max-width:900px){
  .user-create-grid{grid-template-columns:1fr 1fr;}
  .user-create-action{grid-column:1/-1;}
  .user-account-head{display:none;}
  .user-account-row{grid-template-columns:1fr 1fr; padding:14px 2px; gap:10px;}
  .user-account-row > :first-child,.user-password-reset{grid-column:1/-1;}
}