/* Procurum panel. Tokens from the clinic prototype (v4, 23-set); English names; light and dark. */
:root{
  --paper:#F4F1E8; --paper-2:#EDE9DD; --paper-3:#E4DFD0; --line:#D6D1C2; --line-2:#B8B29F; --field:#827F76;
  --ink:#242624; --ink-2:#4C4E4A; --ink-3:#666862; --on-blue:#FFFFFF;
  --blue:#1D4ED8; --blue-2:#163FB0; --blue-bg:#E6EBFA;
  --green:#1F7A3F; --green-bg:#E2F0E6; --amber:#9A5B0C; --amber-bg:#F6E9D2; --purple:#5B3FB8; --purple-bg:#EBE6F8;
  --serif:"Source Serif 4",Georgia,serif; --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;
  --paper:#1A1B19; --paper-2:#222421; --paper-3:#2B2D29; --line:#3A3C37; --line-2:#4A4C46; --field:#6E7068; --on-blue:#1A1B19; --ink:#ECE8DC; --ink-2:#C3BFB1; --ink-3:#8F8C80;
  --blue:#8AA8F7; --blue-2:#A6BDF9; --blue-bg:#1F2A4A; --green:#79C892; --green-bg:#1B3324; --amber:#E2A85C; --amber-bg:#3B2C17; --purple:#B4A0F2; --purple-bg:#2B2444;}}
:root[data-theme="dark"]{color-scheme:dark;
  --paper:#1A1B19; --paper-2:#222421; --paper-3:#2B2D29; --line:#3A3C37; --line-2:#4A4C46; --field:#6E7068; --on-blue:#1A1B19; --ink:#ECE8DC; --ink-2:#C3BFB1; --ink-3:#8F8C80;
  --blue:#8AA8F7; --blue-2:#A6BDF9; --blue-bg:#1F2A4A; --green:#79C892; --green-bg:#1B3324; --amber:#E2A85C; --amber-bg:#3B2C17; --purple:#B4A0F2; --purple-bg:#2B2444;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--blue)}
button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:600} p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
form.inline{display:inline}

.app{min-height:100%;display:grid;grid-template-rows:auto 1fr auto}
@media (min-width:900px){.app{grid-template-columns:380px 1fr;grid-template-rows:auto 1fr;height:100vh}}
.top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;font-size:18px;color:inherit;text-decoration:none}
.top .clinic{color:var(--ink-2);font-size:14px}
.top .sp{flex:1}
.top .stale{flex-basis:100%;margin:0;padding:6px 0 0 12px;border-left:3px solid var(--amber);font-size:13.5px;color:var(--ink)}
.top .nav{display:none;gap:4px}
@media (min-width:900px){.top .nav{display:flex}}
.top .nav a,.foot a{padding:7px 12px;border-radius:999px;font-weight:500;color:var(--ink-2);text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
.top .nav a[aria-current="page"],.foot a[aria-current="page"]{background:var(--paper-3);color:var(--ink)}
.badge{font-size:12px;color:var(--amber);background:var(--amber-bg);border-radius:999px;padding:3px 10px;font-weight:500}
.who{font-size:13px;color:var(--ink-3)}
@media (max-width:899px){.who{display:none}}
.foot{display:flex;border-top:1px solid var(--line);padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));gap:6px;justify-content:space-around;background:var(--paper)}
.foot a{flex:1;justify-content:center;font-size:13px;border-radius:10px}
@media (min-width:900px){.foot{display:none}}

.col-l{overflow:auto;display:none}
.col-r{overflow:auto;display:block}
@media (min-width:900px){.col-l{display:block;border-right:1px solid var(--line)}}
.app[data-pane="l"] .col-l{display:block}.app[data-pane="l"] .col-r{display:none}
@media (min-width:900px){.app[data-pane="l"] .col-r{display:block}}
.pad{padding:18px 18px 28px}

.ask{border-bottom:1px solid var(--line);padding:18px 18px 16px}
.ask label{display:block;font-family:var(--serif);font-size:26px;line-height:1.15;font-weight:500;margin-bottom:10px;text-wrap:balance}
.ask textarea{width:100%;min-height:76px;resize:vertical;border:1px solid var(--field);border-radius:10px;background:var(--paper-2);padding:10px 12px;font:inherit;font-size:15px;line-height:1.45;color:var(--ink)}
.ask textarea::placeholder{color:var(--ink-3)}
.ask .row{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.ask small{color:var(--ink-3);font-size:12.5px;flex:1;min-width:180px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:10px;font-weight:600;font-size:14.5px;border:1.5px solid transparent;white-space:nowrap;text-decoration:none}
.btn.p{background:var(--blue);color:var(--on-blue);border-color:var(--blue)} .btn.p:hover{background:var(--blue-2)}
.btn.s{border-color:var(--line-2);color:var(--ink)} .btn.s:hover{background:var(--paper-2)}
.btn.t{color:var(--ink-2);padding:0 6px;min-height:32px;font-weight:500}
.btn[disabled]{opacity:.45;cursor:default}
.btn.ok{background:var(--green);border-color:var(--green);color:var(--paper)}

.month{padding:12px 18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline;font-size:13.5px;color:var(--ink-2)}
.month .v{font-family:var(--mono);text-align:right;white-space:nowrap}
.month .v.save{color:var(--green);font-weight:500}
.search{padding:10px 18px 0}
.search input{width:100%;font:inherit;border:1px solid var(--field);border-radius:8px;background:var(--paper-2);padding:7px 10px;color:var(--ink)}
.group{padding:12px 0 4px}
.group h2{font-size:12.5px;font-weight:600;color:var(--ink-3);padding:0 18px 6px}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 12px;width:100%;text-align:left;padding:11px 18px;border-top:1px solid var(--line);align-items:start;color:inherit;text-decoration:none}
.item:last-child{border-bottom:1px solid var(--line)}
.item:hover{background:var(--paper-2)}
.item[aria-current="true"]{background:var(--paper-3);box-shadow:inset 3px 0 0 var(--blue)}  /* the open one: darker than hover, the blue bar of "you are here" */
.item[aria-current="true"] .t{font-weight:600}
.item .t{font-family:var(--serif);font-size:16px;font-weight:500;line-height:1.3}
.item .m{grid-column:1;color:var(--ink-3);font-size:12.5px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;border:1px solid transparent;grid-column:2;grid-row:1/3;align-self:center}
.chip.act{background:var(--blue-bg);color:var(--blue)} .chip.run{background:var(--paper-3);color:var(--ink-2)} .chip.cmp{background:var(--purple-bg);color:var(--purple)}
.chip.done{background:var(--green-bg);color:var(--green)} .chip.warn{background:var(--amber-bg);color:var(--amber)}
.empty{padding:24px 18px;color:var(--ink-3);font-size:14px}

.det-top{position:sticky;top:0;background:var(--paper);z-index:2;padding:12px 18px 10px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.det-top .l1{display:flex;align-items:center;gap:10px}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);font-weight:500;min-height:32px;padding-right:8px;text-decoration:none}
@media (min-width:900px){.back{display:none}}
.det-top h2{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.2;flex:1}
.det-top .num{font-family:var(--mono);color:var(--ink-3);font-size:12.5px}
.tl{display:grid;grid-template-columns:repeat(5,1fr);margin-top:2px}
.tl div{position:relative;text-align:center;font-size:11.5px;color:var(--ink-3);padding-top:14px}
.tl div::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--line)}
.tl div:first-child::before{left:50%}.tl div:last-child::before{right:50%}
.tl div::after{content:"";position:absolute;left:50%;top:1px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2)}
.tl div.ok{color:var(--ink-2)} .tl div.ok::before{background:var(--ink-2)} .tl div.ok::after{background:var(--ink-2);border-color:var(--ink-2)}
.tl div.now{color:var(--blue);font-weight:600} .tl div.now::after{background:var(--blue);border-color:var(--blue)} .tl div.now::before{background:var(--ink-2)}
.ball{font-size:13.5px;color:var(--ink-2)} .ball b{color:var(--blue);font-weight:600} .ball .save{color:var(--green);font-weight:600}

.sec{padding:16px 18px;border-bottom:1px solid var(--line)}
.sec h3{font-size:15px;font-weight:600;margin-bottom:8px}
.sec p.say{font-size:15.5px;line-height:1.5;max-width:60ch}
.sec p.note{font-size:13px;color:var(--ink-3);margin-top:6px;max-width:60ch}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.ln{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;padding:9px 0;border-top:1px solid var(--line);align-items:baseline}
.ln:first-child{border-top:0}
.ln .q{font-family:var(--mono);font-size:14px;white-space:nowrap;min-width:64px}
.ln .d{font-size:15px;min-width:0} .ln .d small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:1px} .ln .d small.q{color:var(--amber)}
/* W2-7: the question under a line we could not read is shown whole, at every width */
.ln .d small.q{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.fe{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 0;border-top:1px solid var(--line);align-items:center}
.fe:first-child{border-top:0} .fe b{font-weight:600} .fe small{grid-column:1;color:var(--ink-3);font-size:12.5px} .fe small.warn{grid-column:1/-1;color:var(--amber)}
.fe .st{font-size:13px;color:var(--ink-2)} .fe .st.ok{color:var(--green)} .fe .st.warn{color:var(--amber)}
.notice{margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:3px solid var(--amber);padding:9px 12px;font-size:14px;display:grid;gap:6px}
.notice.green{border-left-color:var(--green)}

.cmp-item{padding:14px 18px;border-bottom:1px solid var(--line)}
.cmp-item h3{font-family:var(--serif);font-size:17px;font-weight:600;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cmp-item h3 .q{font-family:var(--mono);font-size:13px;color:var(--ink-3);font-weight:400}
.cmp-item .prev{font-size:12.5px;color:var(--ink-3);margin:2px 0 8px}
.cmp-item .state{font-size:12.5px;color:var(--amber);font-weight:500;margin-bottom:6px}
/* W2: an option is one compact row (supplier, price per unit, the packs it means); its terms fold under "more" */
.op{padding:9px 0;border-top:1px solid var(--line)}
.op:first-of-type{border-top:0}
.op .row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 12px;align-items:start;cursor:pointer}
.op input{grid-column:1;grid-row:1;width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue)}
.op input:disabled{cursor:default}
.op .n{grid-column:2;grid-row:1;font-weight:600;font-size:15px;min-width:0;overflow-wrap:anywhere}
.op .n .rec{font-size:11.5px;font-weight:500;color:var(--blue);white-space:nowrap}
.op .n .dev{font-size:11.5px;font-weight:500;color:var(--amber)}
.op .pr{grid-column:3;grid-row:1;text-align:right;font-family:var(--mono);font-size:14.5px;white-space:nowrap}
.op .pr small{display:block;font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.op .pk{grid-column:2/-1;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.op .pk.warn,.op .more .warn{color:var(--amber)} .op .pk .extra{color:var(--amber)}
.op .more{margin:2px 0 0 34px;font-size:12.5px;color:var(--ink-3)}
.op .more>summary{display:inline-flex;align-items:center;gap:4px;min-height:32px;cursor:pointer;color:var(--ink-2);font-weight:500}
.op .more p{margin:0 0 4px;max-width:70ch} .op .more p.mono{font-size:12px} .op .more .terms{color:var(--ink-2)}
.op.nc{opacity:.7} .op.nc .row{cursor:default} .op.nc .pr{color:var(--ink-3)}
.op:hover:not(.nc){background:var(--paper-2);box-shadow:-8px 0 0 var(--paper-2),8px 0 0 var(--paper-2)}   /* no shift: the shadow widens the band */
.scen{margin:0 18px 12px;border-bottom:1px solid var(--line)}
.scen .fe{padding:7px 0} .scen .fe b{font-weight:500;font-size:14px} .scen .fe .v{font-family:var(--mono)}
.per{padding:12px 18px 4px} .per h3{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:2px}
.per .fe .v{font-family:var(--mono)} .per .amber{color:var(--amber)}
.total{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line-2);padding:12px 18px;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center}
.total .t1{font-family:var(--mono);font-size:16px;font-weight:500}
.total .t2{grid-column:1;font-size:12.5px;color:var(--ink-3)} .total .t2 .save{color:var(--green);font-weight:600}
.total .btn{grid-column:2;grid-row:1/3}

.order{border:1px solid var(--line-2);border-radius:10px;overflow:hidden;margin-top:10px}
.order .head{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 12px;background:var(--paper-2);align-items:center}
.order .head b{font-weight:600} .order .head small{grid-column:1;color:var(--ink-3);font-size:12.5px} .order .head .v{font-family:var(--mono);grid-column:2;grid-row:1/3}
.order pre{margin:0;padding:12px;font:13px/1.5 var(--sans);white-space:pre-wrap;color:var(--ink-2);border-top:1px solid var(--line);max-height:260px;overflow:auto}
.order .actions{padding:10px 12px;border-top:1px solid var(--line);margin-top:0}
.done{display:flex;gap:10px;align-items:center;color:var(--green);font-weight:600}
.hist{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.hist li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px} .hist li span:first-child{font-family:var(--mono);color:var(--ink-3);font-size:12px}
.hist li span:last-child{overflow-wrap:anywhere}
details.tech{margin-top:12px} details.fold>summary h4{margin:0;font-size:13px;font-weight:600;color:var(--ink-2)}   /* T9: the rest of the history, as stored */

.form{display:grid;gap:14px;max-width:560px}
.form .field{display:grid;gap:4px}
.form label{font-size:13px;color:var(--ink-2);font-weight:500}
.form .help{font-size:12.5px;color:var(--ink-3)}
.form input,.form select,.form textarea{font:inherit;border:1px solid var(--field);border-radius:8px;background:var(--paper-2);padding:7px 10px;color:var(--ink);width:100%}
.form textarea{min-height:140px;resize:vertical;line-height:1.45}
.form .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media (max-width:560px){.form .row3{grid-template-columns:1fr}}
.people div{display:grid;grid-template-columns:1fr auto;padding:8px 0;border-top:1px solid var(--line);font-size:14px;gap:2px 10px}
.people div small{grid-column:1;color:var(--ink-3);font-size:12.5px} .people div span:last-child{color:var(--ink-2);font-size:13px}
pre.charter{white-space:pre-wrap;font:12.5px/1.45 var(--mono);background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:12px;max-height:260px;overflow:auto;color:var(--ink-2)}
.enter{padding:40px 24px;max-width:440px;margin:0 auto;display:grid;gap:14px}
.enter h2{font-family:var(--serif);font-size:26px;font-weight:500;line-height:1.15}
.enter p{color:var(--ink-2);font-size:14.5px}
.enter input{font:inherit;border:1px solid var(--field);border-radius:10px;background:var(--paper-2);padding:10px 12px;color:var(--ink)}
.enter .ok{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;font-size:14px;display:grid;gap:8px;word-break:break-all}
.flash{margin:12px 18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;font-size:13.5px}
.flash.err{border-left:3px solid var(--amber);padding-left:12px}   /* amber only when it warns */

details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;min-height:32px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary h3{margin-bottom:0}
details.fold>summary .sum{font-size:13px;color:var(--ink-3)}
details.fold>summary::after{content:"+";margin-left:auto;color:var(--ink-3);font-family:var(--mono)}
details.fold[open]>summary{margin-bottom:8px} details.fold[open]>summary::after{content:"−"}
.form label.check{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:14px}
.form label.check input{width:auto}
/* the unresolved queue (Requests) and the suppliers screen */
a.flash { display:block; text-decoration:none; color:inherit; }
.queue .qm { padding:11px 18px; border-top:1px solid var(--line); display:grid; gap:4px; }
.queue .qm p { margin:0; }
.queue .qm .t { font-weight:500; }
.queue .qm .m { font-size:12.5px; color:var(--ink-3); }
.queue .qm .why { font-size:13.5px; color:var(--amber); }
.queue .qm .effect { font-size:13.5px; color:var(--ink); }
.queue .qm pre { white-space:pre-wrap; font-family:var(--sans); font-size:13px; margin:6px 0 0; color:var(--ink-2); }
.queue .qm .actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.supplier h4 { margin:12px 0 4px; font-size:13px; color:var(--ink-2); }
.supplier .terms { color:var(--ink-2); }
.bought { width:100%; border-collapse:collapse; font-size:13px; }
.bought th, .bought td { text-align:left; padding:6px 8px 6px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.bought th { font-weight:600; color:var(--ink-3); font-size:12px; }
.form .families { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13.5px; }
.form .families label { display:inline-flex; align-items:center; gap:6px; font-weight:400; }
.form .families input { width:auto; }
.supplier h3 { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.supplier h3 .chip { width:auto; }
@media (max-width:899px) { .every .bought th:nth-child(3), .every .bought td:nth-child(3) { display:none; } }   /* every line: the pack price is enough on a phone */
/* the suppliers screen in two columns (the list's head is the requests screen's "Ask" block) */
.sup-head h1{font-family:var(--serif);font-size:26px;line-height:1.15;font-weight:500}
.sup-head .lead{color:var(--ink-3);font-size:13px;margin-top:4px}
.sup-head .row{margin-top:10px}
details.group>summary{list-style:none;cursor:pointer}
details.group>summary::-webkit-details-marker{display:none}
details.group>summary h2::after{content:" +";font-family:var(--mono)}
details.group[open]>summary h2::after{content:" −"}
details.group h2 .n{font-family:var(--mono);font-weight:400}
.det-top.supplier{grid-template-columns:1fr auto;align-items:center}
.det-top.supplier .l1 .chip{grid-column:auto;grid-row:auto}
.sec .flash{margin:0 0 10px}
.rfq .doubts{grid-column:1/-1;margin:4px 0 0 18px;font-size:12.5px;color:var(--ink-2)}
.rfq a{color:inherit}
details.every{margin-top:10px} details.every>summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
/* U7: the queue folds on a phone and fills the right pane on a wide screen with no request open */
details.queue>summary{list-style:none;cursor:pointer}
details.queue>summary::-webkit-details-marker{display:none}
details.queue>summary h2::after{content:" +";font-family:var(--mono)}
details.queue[open]>summary h2::after{content:" −"}
details.queue h2 .n{font-family:var(--mono);font-weight:400}
details.queue.in-pane{padding-top:18px}
details.queue.in-pane>summary h2{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)}
details.queue.in-pane>summary h2::after{content:""}
details.queue.in-pane .qm{max-width:760px}
/* /ops, the operator's read-only screen: plain tables in the panel's own type and colours */
.ops .pad{padding:18px}
.ops .ops-h{font-family:var(--serif);font-size:22px;font-weight:500}
.ops .ops-h .mono,.ops-table .mono{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.ops .notice{margin:12px 0 4px} .ops .notice ul{margin:4px 0 0 18px} .ops .notice .reasons{font-size:12px;color:var(--ink-3)}
.ops .lines{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:13.5px;color:var(--ink-2)}
.ops .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ops-table{border-collapse:collapse;font-size:13px;width:100%}
.ops-table.wide{min-width:640px}
.ops-table th,.ops-table td{text-align:left;padding:7px 10px 7px 0;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.ops-table th{font-size:12px;font-weight:600;color:var(--ink-3)}
.ops-table .n{text-align:right;font-variant-numeric:tabular-nums}
.ops-table tr.warn td{background:var(--amber-bg)} .ops-table td.bad,.ops .bad{color:var(--amber);font-weight:600}
.ops-table tfoot td{font-weight:600;border-top:1px solid var(--line-2)}
.ops .choose a[aria-current]{font-weight:600;color:var(--ink);text-decoration:none}
.ops-table td.wrap{white-space:normal;min-width:140px;max-width:190px}
/* G8: an order's warnings next to its draft */
.order p.warn{margin:6px 0 0;font-size:13.5px;color:var(--amber)} .order p.warn b{font-weight:600}