/* GoFlow's internal system. The website's look carried into a working tool: charcoal and amber on white and a pale tint,
   IBM Plex Sans Arabic, logical properties throughout so right-to-left is designed rather than flipped.
   Amber marks the moments that change the work, such as turning a request into a project. */

@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/static/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/static/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(/static/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(/static/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/static/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/static/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#fff; --page:#F3F3F0; --line:#E4E4E1;
  --ink:#202226; --ink-2:#444649; --ink-3:#5F6164;
  --rule:rgba(32,34,38,.14); --rule-2:rgba(32,34,38,.3);
  --h:#2F343B; --h2:#14171B; --p:#F7BE4B; --p-soft:#FCEFD2; --p-deep:#7A5200;
  --err:#A8321E; --err-bg:#F9E9E3;
  --r:10px; --fil:18px;
  --f:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --sh:0 1px 2px rgba(32,34,38,.05),0 10px 26px -16px rgba(32,34,38,.22);
  --side:248px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--page)}
body{margin:0;font-family:var(--f);font-size:16px;line-height:1.75;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset,legend{margin:0;padding:0;border:0}
ul,ol{list-style:none}
a{color:var(--h2);text-decoration-color:var(--p);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-color:var(--h2)}
:focus-visible{outline:3px solid var(--h2);outline-offset:2px;border-radius:4px}
.i{inline-size:20px;block-size:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-60px;z-index:20;background:var(--p);color:var(--h2);padding:8px 16px;border-radius:var(--r);font-weight:600}
.skip:focus{inset-block-start:12px}
.muted{color:var(--ink-3)}
time{white-space:nowrap}
code{font-family:'IBM Plex Mono',Consolas,monospace;font-size:.92em}

/* ---------- the shell ---------- */
body.with-side{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-block-size:100vh}
.side{position:sticky;inset-block-start:0;block-size:100vh;display:flex;flex-direction:column;gap:28px;padding:26px 18px;
  background:linear-gradient(160deg,var(--h),var(--h2));color:#fff;overflow-y:auto}
.brand{display:flex;flex-direction:column;gap:8px;padding-inline:10px;text-decoration:none;color:#fff}
.brand img{inline-size:132px;block-size:auto}
.brand span{font-size:13.5px;color:#D5D7DA}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a,.me-name,.link-btn{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r);color:#E9EAEC;text-decoration:none;font-weight:600;font-size:15.5px}
.nav a:hover,.me-name:hover,.link-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a[aria-current=page]{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 3px 0 0 var(--p)}
[dir=rtl] .nav a[aria-current=page]{box-shadow:inset -3px 0 0 var(--p)}
.nav .count{margin-inline-start:auto;min-inline-size:24px;padding:0 7px;border-radius:999px;background:var(--p);color:var(--h2);font-size:13px;line-height:22px;text-align:center}
.side :focus-visible{outline-color:var(--p)}
.me{margin-block-start:auto;border-block-start:1px solid rgba(255,255,255,.16);padding-block-start:16px;display:flex;flex-direction:column;gap:2px}
.me-name span{display:flex;flex-direction:column;line-height:1.4}
.me-name small{font-weight:400;font-size:13px;color:#C4C7CB}
.me-name[aria-current=page]{background:rgba(255,255,255,.12)}
.link-btn{inline-size:100%;border:0;background:none;font:inherit;font-weight:600;cursor:pointer;text-align:start}
.main{min-inline-size:0;padding:36px clamp(16px,3.4vw,48px) 64px;display:flex;flex-direction:column;gap:22px;outline:none}
body.bare .main{padding:0}

/* ---------- headings ---------- */
.head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px}
.head>div{display:flex;flex-direction:column;gap:4px;min-inline-size:0}
.head h1{font-size:clamp(24px,2.4vw,31px);line-height:1.35;font-weight:700;color:var(--h2);text-wrap:balance}
.sub{color:var(--ink-2);font-size:15.5px;max-inline-size:72ch;text-wrap:pretty}
.eyebrow{font-size:13.5px;font-weight:600;color:var(--ink-3)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}
.flash{background:var(--h2);color:#fff;padding:11px 16px;border-radius:var(--r);border-end-end-radius:var(--fil);font-weight:600;box-shadow:inset 4px 0 0 var(--p)}
[dir=rtl] .flash{box-shadow:inset -4px 0 0 var(--p)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:42px;padding:8px 18px;border-radius:var(--r);border:1.5px solid transparent;
  font:inherit;font-weight:600;font-size:15px;line-height:1.3;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn--primary{background:var(--h);color:#fff}
.btn--primary:hover{background:var(--h2)}
.btn--key{background:var(--p);color:var(--h2);border-color:var(--p)}
.btn--key:hover{background:#F2AE24;border-color:#F2AE24}
.btn--quiet{background:var(--paper);color:var(--h2);border-color:var(--rule-2)}
.btn--quiet:hover{border-color:var(--h2)}
.btn--plain{background:none;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule-2)}
.btn--small{min-block-size:36px;padding:5px 12px;font-size:14px}
.btn--wide{inline-size:100%}
.icon-btn{display:inline-grid;place-items:center;inline-size:34px;block-size:34px;border-radius:8px;border:1px solid var(--rule);background:var(--paper);color:var(--ink-2);cursor:pointer;vertical-align:middle;margin-inline-start:6px}
.icon-btn:hover{color:var(--h2);border-color:var(--rule-2)}
.icon-btn .i{inline-size:17px;block-size:17px}

/* ---------- tabs and filters ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tabs--scroll{flex-wrap:nowrap;overflow-x:auto;padding-block-end:4px}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--rule);color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap}
.tabs a:hover{border-color:var(--rule-2);color:var(--h2)}
.tabs a[aria-current=page]{background:var(--h);border-color:var(--h);color:#fff}
.tabs .n{font-size:12.5px;min-inline-size:22px;padding:0 6px;border-radius:999px;background:var(--page);color:var(--ink-2);text-align:center;line-height:20px}
.tabs a[aria-current=page] .n{background:rgba(255,255,255,.18);color:#fff}
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.filter{display:flex;flex-direction:column;gap:4px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.filter--grow{flex:1 1 260px}

/* ---------- form controls ---------- */
input,select,textarea{font:inherit;font-size:15.5px;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule-2);border-radius:8px;padding:8px 12px;min-block-size:42px;inline-size:100%;max-inline-size:100%}
textarea{resize:vertical;line-height:1.7}
select{padding-inline-end:28px}
input[type=checkbox],input[type=radio]{inline-size:18px;block-size:18px;min-block-size:0;margin:0;accent-color:var(--h);flex:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--h2);outline-offset:1px;border-color:var(--h2)}
[aria-invalid=true]{border-color:var(--err)}
.form{display:flex;flex-direction:column;gap:16px}
.form--wide{max-inline-size:960px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-inline-size:0}
.field>label,.field>legend,fieldset.panel>legend{font-weight:600;font-size:15px;color:var(--ink)}
fieldset.panel>legend{float:inline-start;inline-size:100%;font-size:17px;margin-block-end:12px}
fieldset.panel>legend+*{clear:both}
.hint{font-size:13.5px;color:var(--ink-3);line-height:1.6}
.error{font-size:14px;color:var(--err);font-weight:600}
.field--bad>label,.field--bad>legend{color:var(--err)}
.choices{display:flex;flex-wrap:wrap;gap:8px 18px}
.choice{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.choices--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:10px}
.choice--card{align-items:flex-start;padding:12px 14px;border:1.5px solid var(--rule);border-radius:var(--r);background:var(--paper)}
.choice--card:has(input:checked){border-color:var(--h);box-shadow:inset 0 0 0 1px var(--h)}
.choice--card input{margin-block-start:4px}
.choice--card>span{display:flex;flex-direction:column;gap:2px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.inline-form{display:flex;flex-direction:column;gap:6px}
.inline-form>label{font-weight:600;font-size:14.5px}
.inline-row{display:flex;gap:8px}
.inline-row select{flex:1}
.code-input{font-size:24px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.problems{background:var(--err-bg);border:1px solid rgba(168,50,30,.35);border-radius:var(--r);padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.problems h2{font-size:16px;color:var(--err)}
.problems ul{display:flex;flex-direction:column;gap:2px;padding-inline-start:18px;list-style:disc}
.problems a{color:var(--err)}
.problems--quiet{background:var(--paper);border-color:var(--line)}
.problems--quiet h2{color:var(--ink)}
.problem{background:var(--err-bg);color:var(--err);border-radius:8px;padding:10px 14px;font-weight:600;font-size:15px}
.note{background:var(--p-soft);border-radius:var(--r);border-end-end-radius:var(--fil);padding:12px 16px;color:var(--ink);font-size:15px}
.disclose{border-block-start:1px solid var(--line);padding-block-start:12px}
.disclose>summary{cursor:pointer;font-weight:600;color:var(--h2);font-size:15px}
.disclose>summary:hover{text-decoration:underline;text-decoration-color:var(--p);text-underline-offset:4px}
.disclose[open]>summary{margin-block-end:14px}

/* ---------- panels and layout ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);border-end-end-radius:var(--fil);padding:20px 22px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:14px;min-inline-size:0}
.panel>h2{font-size:17.5px;line-height:1.45;font-weight:700;color:var(--h2);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:20px;align-items:start}
.split--even{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.stack{display:flex;flex-direction:column;gap:20px;min-inline-size:0}
.message{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.85;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px 20px}
.facts>div{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.facts dt{font-size:13px;font-weight:600;color:var(--ink-3)}
.facts dd{font-size:15px;overflow-wrap:anywhere}
.facts dd .meta{white-space:nowrap}
.facts--tight{grid-template-columns:minmax(0,1fr)}
.files,.rows,.people{display:flex;flex-direction:column;gap:2px}
.files li,.rows li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 0;border-block-start:1px solid var(--line)}
.files li:first-child,.rows li:first-child{border-block-start:0}
.files .i{color:var(--ink-3);inline-size:18px;block-size:18px}
.meta{font-size:13.5px;color:var(--ink-3)}
.rows .pill{margin-inline-start:auto}
.people li{display:flex;flex-direction:column;align-items:flex-start;padding:8px 0;border-block-start:1px solid var(--line)}
.people li:first-child{border-block-start:0}
.copyable{user-select:all}
.empty{color:var(--ink-3);font-size:15px}
.empty--panel{background:var(--paper);border:1px dashed var(--rule-2);border-radius:var(--r);padding:28px;text-align:center}
.foot-note{font-size:14px;color:var(--ink-3);display:flex;flex-direction:column;gap:10px}
.problem-page{max-inline-size:640px}
.problem-page h1{font-size:24px;color:var(--h2)}

/* ---------- pills, chips, tags ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 12px;border-radius:999px;font-size:13.5px;font-weight:600;white-space:nowrap;border:1.5px solid transparent;line-height:1.6}
.pill--new{background:var(--p);color:var(--h2)}
.pill--reviewing{background:var(--paper);border-color:var(--h);color:var(--h2)}
.pill--contacted{background:#E2E4E7;color:var(--h2)}
.pill--converted{background:var(--h);color:#fff}
.pill--closed{background:transparent;border-color:var(--rule-2);color:var(--ink-3)}
.pill--stage{background:#E2E4E7;color:var(--h2)}
.pill--stage.pill--estimating{background:var(--p-soft);color:var(--p-deep);border-color:#EED59A}
.pill--stage.pill--active,.pill--stage.pill--delivery{background:var(--h);color:#fff}
.pill--stage.pill--delivered{background:var(--paper);border-color:var(--h);color:var(--h2)}
.pill--stage.pill--closed,.pill--stage.pill--lost{background:transparent;border-color:var(--rule-2);color:var(--ink-3)}
.head>.pill{margin-block-start:6px}
.chips{display:inline-flex;flex-wrap:wrap;gap:4px}
.chip{font-size:12.5px;padding:1px 9px;border-radius:999px;background:var(--page);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.tag{display:inline-block;font-size:12.5px;font-weight:600;padding:1px 9px;border-radius:6px;background:var(--page);color:var(--ink-2)}
.tag--outside{background:var(--p-soft);color:var(--p-deep)}
.tag--ai{background:var(--h);color:#fff}

/* ---------- the list table ---------- */
.table-wrap{position:relative;overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);border-end-end-radius:var(--fil);box-shadow:var(--sh)}
.list{inline-size:100%;border-collapse:collapse;font-size:15px}
.list th{text-align:start;font-size:13px;font-weight:600;color:var(--ink-3);padding:12px 14px;border-block-end:1px solid var(--line);white-space:nowrap}
.list td{padding:12px 14px;border-block-end:1px solid var(--line);vertical-align:middle}
.list tbody tr:last-child td{border-block-end:0}
.list tbody tr{position:relative}
.list tbody tr:hover{background:#FAFAF8}
.list tr.is-new td:first-child{box-shadow:inset -4px 0 0 var(--p)}
[dir=ltr] .list tr.is-new td:first-child{box-shadow:inset 4px 0 0 var(--p)}
.cell-main{min-inline-size:220px}
.cell-main strong{font-weight:600;color:var(--h2)}
.cell-main .has-file{display:inline-flex;vertical-align:middle;margin-inline-start:6px;color:var(--ink-3)}
.nowrap{white-space:nowrap}
.cell-main .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.cell-main .i{inline-size:15px;block-size:15px}
.row-link{text-decoration:none}
.row-link::after{content:'';position:absolute;inset:0}
.row-link:focus-visible{outline:none}
.row-link:focus-visible::after{outline:3px solid var(--h2);outline-offset:-3px;border-radius:4px}
.list td .meta{display:block}

/* ---------- the record ---------- */
.timeline{display:flex;flex-direction:column;position:relative}
.timeline li{position:relative;padding-block:10px;padding-inline-start:26px;display:flex;flex-direction:column;gap:3px}
.timeline li::before{content:'';position:absolute;inset-inline-start:6px;inset-block:0;inline-size:2px;background:var(--line)}
.timeline li::after{content:'';position:absolute;inset-inline-start:1px;inset-block-start:17px;inline-size:12px;block-size:12px;border-radius:50%;background:var(--paper);border:2.5px solid var(--h)}
.timeline li.t-event::after{inline-size:8px;block-size:8px;inset-inline-start:3px;inset-block-start:19px;border:0;background:var(--rule-2)}
.timeline li:first-child::before{inset-block-start:18px}
.timeline li:last-child::before{inset-block-end:auto;block-size:18px}
.timeline li:only-child::before{display:none}
.t-event p:first-child{font-size:14.5px;color:var(--ink-2)}
.t-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600;font-size:14.5px}
.t-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15.5px}
.t-meta{font-size:13px;color:var(--ink-3)}
.note-form{display:flex;flex-direction:column;gap:8px;padding-block-end:14px;border-block-end:1px solid var(--line)}
.note-row{display:flex;gap:8px}
.note-row select{inline-size:auto}
.note-form .btn{align-self:flex-start}

/* ---------- signing in ---------- */
.gate{min-block-size:100vh;display:grid;place-items:center;padding:32px 16px;background:linear-gradient(150deg,var(--h),var(--h2))}
.gate-card{inline-size:min(100%,440px);background:var(--paper);border-radius:var(--r);border-end-end-radius:36px;padding:32px clamp(20px,5vw,36px);display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.gate-logo{inline-size:150px;block-size:auto}
.gate-card h1{font-size:24px;line-height:1.4;color:var(--h2)}
.gate-alt{display:flex;justify-content:center}
.gate-alt .link-btn{color:var(--ink-2);font-weight:400;justify-content:center;inline-size:auto;text-decoration:underline}
.gate-alt .link-btn:hover{background:none;color:var(--h2)}
.steps{list-style:decimal;padding-inline-start:22px;display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--ink-2)}
.qr{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:14px;color:var(--ink-2)}
.qr svg{inline-size:200px;block-size:200px;border:1px solid var(--line);border-radius:8px;background:#fff}
.qr code{display:inline-block;margin-block-start:6px;padding:4px 10px;border-radius:6px;background:var(--page);color:var(--ink);font-size:15px;letter-spacing:.06em;line-height:1.8;max-inline-size:20em}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  body.with-side{grid-template-columns:minmax(0,1fr)}
  .side{position:static;block-size:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px}
  .brand{padding:0;flex-direction:row;align-items:center;gap:10px}
  .brand img{inline-size:104px}
  .brand span{display:none}
  .nav{flex-direction:row;flex-wrap:wrap;gap:4px;order:3;inline-size:100%}
  .nav a{padding:6px 10px;font-size:14.5px}
  .nav a[aria-current=page],[dir=rtl] .nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--p)}
  .me{margin:0;margin-inline-start:auto;border:0;padding:0;flex-direction:row;gap:4px}
  .me-name small{display:none}
  .me .link-btn span,.me-name span{font-size:14px}
  .main{padding-block-start:22px}
}
@media (max-width:560px){
  .me .link-btn span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .list thead{display:none}
  .list,.list tbody,.list tr,.list td{display:block}
  .list tr{padding:12px 14px;border-block-end:1px solid var(--line)}
  .list tbody tr:last-child{border-block-end:0}
  .list td{padding:2px 0;border:0}
  .list tr.is-new td:first-child{box-shadow:none}
  .list tr.is-new{box-shadow:inset -4px 0 0 var(--p)}
  .cell-main{min-inline-size:0}
  .inline-row{flex-wrap:wrap}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media print{html,body,body.sheet-page{background:#fff}.side,.note-form,.disclose,.actions{display:none}body.with-side{display:block}}

/* ---------- phase 1 additions: boards, next step, quick search, today, visits ---------- */
.head-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.segmented{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.segmented a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14.5px;min-block-size:40px}
.segmented a+a{border-inline-start:1px solid var(--rule)}
.segmented a:hover{color:var(--h2);background:var(--page)}
.segmented a[aria-current=page]{background:var(--h);color:#fff}
.segmented .i{inline-size:18px;block-size:18px}
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:14.5px;color:var(--ink-2)}
.strip b{color:var(--h2);font-variant-numeric:tabular-nums}
.strip a{color:var(--ink-2)}
.more{font-size:14px;font-weight:600}
.chip--warn{background:var(--p-soft);border-color:#EED59A;color:var(--p-deep);font-weight:600}

/* the next step: what to do now, and the button that does it */
.next{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;background:linear-gradient(130deg,var(--h),var(--h2));color:#fff;border-radius:var(--r);border-end-end-radius:var(--fil);padding:16px 20px;box-shadow:inset -4px 0 0 var(--p),var(--sh)}
[dir=ltr] .next{box-shadow:inset 4px 0 0 var(--p),var(--sh)}
.next-text{flex:1 1 320px;display:flex;flex-direction:column;gap:2px}
.next-text h2{font-size:13.5px;font-weight:600;color:#D5D7DA}
.next-text p{font-size:16.5px;font-weight:600;line-height:1.7}
.next-actions{display:flex;flex-wrap:wrap;gap:10px}
.next :focus-visible{outline-color:var(--p)}
.btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--light:hover{background:#fff;color:var(--h2);border-color:#fff}

/* boards */
.board{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;align-items:start;overflow-x:auto;padding-block-end:6px}
.board--wide{grid-template-columns:repeat(5,minmax(210px,1fr))}
.column{background:#E8E8E5;border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:10px;min-block-size:120px}
.column.is-over{box-shadow:inset 0 0 0 2px var(--h)}
.column-h{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700;color:var(--h2);padding:2px 4px}
.column-h .n{font-size:12.5px;min-inline-size:24px;padding:0 7px;border-radius:999px;background:var(--paper);color:var(--ink-2);text-align:center;line-height:22px}
.column-empty{font-size:14px;color:var(--ink-3);padding:4px}
.cards{display:flex;flex-direction:column;gap:8px}
.card{position:relative;background:var(--paper);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 2px rgba(32,34,38,.08)}
.card--new{box-shadow:inset -3px 0 0 var(--p),0 1px 2px rgba(32,34,38,.08)}
[dir=ltr] .card--new{box-shadow:inset 3px 0 0 var(--p),0 1px 2px rgba(32,34,38,.08)}
.card[draggable=true]{cursor:grab}
.card.is-dragging{opacity:.5}
.card-link{text-decoration:none;color:var(--h2);padding-inline-end:30px}
.card-link strong{font-weight:600}
.card-link::after{content:'';position:absolute;inset:0;border-radius:inherit}
.card-link:focus-visible{outline:none}
.card-link:focus-visible::after{outline:3px solid var(--h2);outline-offset:-3px}
.card .meta{font-size:13px}
.card-foot{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-3)}
.card-foot .i{inline-size:16px;block-size:16px}
.card-menu{position:absolute;inset-block-start:6px;inset-inline-end:6px;z-index:2}
.card-menu>summary{list-style:none;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:8px;color:var(--ink-3);cursor:pointer}
.card-menu>summary::-webkit-details-marker{display:none}
.card-menu>summary:hover,.card-menu[open]>summary{background:var(--page);color:var(--h2)}
.card-menu-list{position:absolute;inset-inline-end:0;inset-block-start:34px;min-inline-size:220px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 40px -18px rgba(32,34,38,.35);padding:4px;display:flex;flex-direction:column;z-index:5}
.card-menu-list form{margin:0}
.card-menu-list button,.card-menu-list a{display:block;inline-size:100%;text-align:start;padding:8px 10px;border:0;border-radius:6px;background:none;font:inherit;font-size:14.5px;color:var(--ink);text-decoration:none;cursor:pointer}
.card-menu-list button:hover,.card-menu-list a:hover,.card-menu-list button:focus-visible,.card-menu-list a:focus-visible{background:var(--p-soft);outline:none}

/* quick search in the side bar and its window */
.find-btn{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r);background:rgba(255,255,255,.08);color:#E9EAEC;text-decoration:none;font-size:14.5px;border:1px solid rgba(255,255,255,.14)}
.find-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.find-btn kbd{margin-inline-start:auto}
kbd{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:11.5px;line-height:1.6;padding:0 6px;border-radius:5px;border:1px solid currentColor;white-space:nowrap}
.finder{inline-size:min(640px,calc(100vw - 32px));max-block-size:min(620px,calc(100vh - 64px));padding:0;border:0;border-radius:14px;box-shadow:0 30px 70px -20px rgba(0,0,0,.55);margin-block-start:10vh;color:var(--ink);background:var(--paper)}
.finder::backdrop{background:rgba(20,23,27,.55)}
.finder-form{display:flex;align-items:center;gap:10px;padding:12px 16px;border-block-end:1px solid var(--line)}
.finder-form .i{color:var(--ink-3)}
.finder-form input{border:0;font-size:18px;padding:6px 0;min-block-size:40px}
.finder-form input:focus-visible{outline:none}
.finder-results{overflow-y:auto;max-block-size:430px;padding:6px 8px}
.finder-results h3{font-size:12.5px;font-weight:700;color:var(--ink-3);padding:8px 8px 2px}
.finder-results a{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.finder-results a strong{font-weight:600;color:var(--h2)}
.finder-results a span{font-size:13px;color:var(--ink-3)}
.finder-results a:hover,.finder-results a:focus-visible{background:var(--p-soft);outline:none}
.finder-results .finder-empty{padding:12px 10px;color:var(--ink-3);font-size:14.5px}
.finder-keys{display:flex;flex-wrap:wrap;gap:6px 16px;border-block-start:1px solid var(--line);padding:9px 16px;font-size:12.5px;color:var(--ink-3)}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}

/* today */
.today-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.today-group h2 .n{font-size:12.5px;min-inline-size:24px;padding:0 7px;border-radius:999px;background:var(--p);color:var(--h2);text-align:center;line-height:22px}
.rows li .chip{margin-inline-start:auto}

/* visits */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh)}
.tile span{font-size:13.5px;color:var(--ink-3)}
.tile b{font-size:30px;line-height:1.3;font-weight:600;color:var(--h2)}
.chart{overflow-x:auto}
.viz{display:block;inline-size:100%;min-inline-size:520px;block-size:auto;direction:ltr}
.viz .grid line{stroke:var(--line);stroke-width:1}
.viz .grid line.base{stroke:#B9BBBE}
.viz .bar{fill:var(--h)}
.viz .today{fill:var(--p)}
.viz .hit{fill:transparent}
.viz .hit:hover{fill:rgba(32,34,38,.06)}
.viz text{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:10.5px;fill:var(--ink-3)}
.viz text.val{fill:var(--h2);font-weight:600}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.bars{display:flex;flex-direction:column;gap:9px}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name value" "track track";column-gap:10px;row-gap:3px;font-size:14px}
.bars-name{grid-area:name;overflow-wrap:anywhere}
.bars-value{grid-area:value;font-weight:600;color:var(--h2);font-variant-numeric:tabular-nums}
.bars-track{grid-area:track;display:block;block-size:8px}
.bars-track span{display:block;block-size:8px;background:var(--h);border-start-end-radius:4px;border-end-end-radius:4px}
.table-wrap--flat{box-shadow:none;margin-block-start:10px}

/* scripts on: buttons that only save a choice give way to saving on change */
.js [data-js-hide]{display:none}

@media (max-width:1100px){
  .trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .today-grid{grid-template-columns:minmax(0,1fr)}
  .board,.board--wide{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(250px,82%);scroll-snap-type:x mandatory}
  .column{scroll-snap-align:start}
  .find-btn{order:2;padding:6px 10px}
  .find-btn kbd{display:none}
  .find-btn span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:560px){
  .trio,.tiles{grid-template-columns:minmax(0,1fr)}
  /* on a phone the sections sit in a bar along the bottom, within thumb reach */
  body.with-side{padding-block-end:calc(64px + env(safe-area-inset-bottom,0px))}
  .nav{position:fixed;inset-inline:0;inset-block-end:0;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:var(--h2);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px -10px rgba(0,0,0,.45)}
  .nav a{flex-direction:column;gap:2px;padding:6px 2px;font-size:11.5px;justify-content:center;text-align:center;position:relative}
  .nav a .i{inline-size:22px;block-size:22px}
  .nav .count{position:absolute;inset-block-start:2px;inset-inline-start:calc(50% + 4px);margin:0;min-inline-size:18px;line-height:18px;font-size:11px;padding:0 4px}
  .nav a[aria-current=page],[dir=rtl] .nav a[aria-current=page]{box-shadow:inset 0 3px 0 var(--p);background:rgba(255,255,255,.08)}
  .next{padding:14px 16px}
  .next-actions{inline-size:100%}
  .next-actions .btn,.next-actions form{flex:1}
  .next-actions form .btn{inline-size:100%}
}
/* bar widths for the visits lists, in steps of 2% (the security policy allows no inline styles) */
.w-2{inline-size:2%}.w-4{inline-size:4%}.w-6{inline-size:6%}.w-8{inline-size:8%}.w-10{inline-size:10%}.w-12{inline-size:12%}.w-14{inline-size:14%}.w-16{inline-size:16%}.w-18{inline-size:18%}.w-20{inline-size:20%}.w-22{inline-size:22%}.w-24{inline-size:24%}.w-26{inline-size:26%}.w-28{inline-size:28%}.w-30{inline-size:30%}.w-32{inline-size:32%}.w-34{inline-size:34%}.w-36{inline-size:36%}.w-38{inline-size:38%}.w-40{inline-size:40%}.w-42{inline-size:42%}.w-44{inline-size:44%}.w-46{inline-size:46%}.w-48{inline-size:48%}.w-50{inline-size:50%}.w-52{inline-size:52%}.w-54{inline-size:54%}.w-56{inline-size:56%}.w-58{inline-size:58%}.w-60{inline-size:60%}.w-62{inline-size:62%}.w-64{inline-size:64%}.w-66{inline-size:66%}.w-68{inline-size:68%}.w-70{inline-size:70%}.w-72{inline-size:72%}.w-74{inline-size:74%}.w-76{inline-size:76%}.w-78{inline-size:78%}.w-80{inline-size:80%}.w-82{inline-size:82%}.w-84{inline-size:84%}.w-86{inline-size:86%}.w-88{inline-size:88%}.w-90{inline-size:90%}.w-92{inline-size:92%}.w-94{inline-size:94%}.w-96{inline-size:96%}.w-98{inline-size:98%}.w-100{inline-size:100%}
.head>.head-actions{flex-direction:row;align-items:center}
.quiet{font-size:14px;color:var(--ink-3)}
/* the clear button inside search boxes, in the theme's grey instead of the browser's blue */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;inline-size:16px;block-size:16px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444649' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/16px no-repeat}

/* ---------- phase 2: items, prices, factories, templates, files ---------- */
fieldset{min-inline-size:0}
.nav-more{display:none!important}
.tabs--project{border-block-end:1px solid var(--line);padding-block-end:10px;gap:4px}
.tabs--project a{border-radius:8px}
.tabs--chips{margin-block-end:-8px}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.panel-head h2{font-size:17.5px;line-height:1.45;font-weight:700;color:var(--h2)}
.subhead{display:flex;flex-direction:column;gap:4px}
.h1-sub{font-size:clamp(20px,2vw,25px);line-height:1.4;font-weight:700;color:var(--h2);text-wrap:balance}
.en{font-size:.82em;font-weight:500;color:var(--ink-3);unicode-bidi:isolate}
.req{font-size:11.5px;font-weight:600;color:var(--p-deep);background:var(--p-soft);border-radius:5px;padding:0 6px;margin-inline-start:6px;white-space:nowrap}
.tag--ok{display:inline-flex;align-items:center;gap:4px;background:var(--h);color:#fff}
.tag--ok .i{inline-size:13px;block-size:13px}
.list .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.list tfoot td{padding:12px 14px;background:#F7F7F5;font-weight:600;color:var(--h2)}
.list tr.is-chosen td{background:#FFF8E6}
.list tr.is-off td{color:var(--ink-3)}
.table-wrap--flat{box-shadow:none;border-radius:8px}
.split--item{grid-template-columns:minmax(0,1fr) minmax(300px,370px)}
.changes{display:flex;flex-direction:column;margin-block-start:4px;font-size:14px;color:var(--ink-2)}

/* the specification table, typed into in place */
.specs{inline-size:100%;border-collapse:collapse}
.specs th,.specs td{padding:8px 10px;border-block-end:1px solid var(--line);text-align:start;vertical-align:middle}
.specs thead th{font-size:13px;font-weight:600;color:var(--ink-3)}
.specs tbody th{font-weight:600;font-size:15px;color:var(--ink);inline-size:38%}
.specs tbody th .en{display:block;font-size:12.5px;text-align:end}
.specs td>.en{display:block;margin-block-start:2px;text-align:end}
.two-langs{display:flex;flex-direction:column;gap:6px}
.two-langs input[lang=en]{font-size:14.5px;min-block-size:34px;background:#FCFCFB}
.cert-more{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px;grid-column:1 / -1;font-size:14px;color:var(--ink-2)}
.form--narrow{max-inline-size:520px}
.specs tbody tr:last-child>*{border-block-end:0}
.specs td input,.specs td select{min-block-size:38px;padding-block:6px}
.specs tr.is-bad td input,.specs tr.is-bad td select{border-color:var(--err)}
.specs .error{display:block;margin-block-start:4px}
.with-unit{display:flex;align-items:center;gap:8px}
.with-unit input{max-inline-size:160px}
.unit{font-size:14px;color:var(--ink-3);white-space:nowrap}
.save-state{font-size:14px;color:var(--ink-3)}
.approve{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-block-start:1px solid var(--line);padding-block-start:12px}
.approve .btn[disabled]{opacity:.5;cursor:not-allowed}
.inline-form--wrap{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px}
.inline-form--wrap .field{flex:1 1 160px}

/* prices and their cost */
.list--prices td{padding:10px 12px}
.list--prices .chips{margin-inline-start:4px}
.choose{position:relative}
.choose>summary{list-style:none}
.choose>summary::-webkit-details-marker{display:none}
.choose[open]>form{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 6px);z-index:5;inline-size:280px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:14px;box-shadow:0 16px 30px -14px rgba(32,34,38,.35)}
.cost{display:flex;flex-direction:column}
.cost>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:6px;border-block-start:1px solid var(--line)}
.cost>div:first-child{border-block-start:0}
.cost dt{font-size:14.5px;color:var(--ink-2)}
.cost dd{font-variant-numeric:tabular-nums;font-weight:600;color:var(--h2);white-space:nowrap}
.cost .cost-total{border-block-start:1.5px solid var(--h)}
.cost .cost-total dt{font-weight:700;color:var(--h2)}
.certs{display:flex;flex-direction:column;gap:12px}
.cert{display:flex;flex-direction:column;gap:6px}
.cert legend{font-weight:600;font-size:14.5px;margin-block-end:4px}
.cert-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.disclose--danger>summary{color:var(--ink-2)}

/* files */
.thumb{inline-size:44px;block-size:33px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:none;background:var(--page)}
.file-type{display:inline-grid;place-items:center;inline-size:44px;block-size:33px;border-radius:5px;border:1px solid var(--line);background:var(--page);font-size:10.5px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;flex:none}
.file-name{display:flex;align-items:center;gap:10px}
.file-name>span{display:flex;flex-direction:column;min-inline-size:0;overflow-wrap:anywhere}
.file-list{display:flex;flex-direction:column}
.file-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-block-start:1px solid var(--line)}
.file-list li:first-child{border-block-start:0}
.file-list li>span{display:flex;flex-direction:column;min-inline-size:0;overflow-wrap:anywhere}
.versions summary{cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.upload{display:flex;flex-direction:column;gap:12px}
.drop{position:relative;display:flex;align-items:center;gap:14px;padding:18px;border:1.5px dashed var(--rule-2);border-radius:var(--r);background:var(--page);cursor:pointer}
.drop:hover,.drop.is-over{border-color:var(--h);background:#FBFAF6}
.drop.is-over{box-shadow:inset 0 0 0 2px var(--p)}
.drop .i{inline-size:24px;block-size:24px;color:var(--ink-3)}
.drop-text{display:flex;flex-direction:column}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;min-block-size:0;block-size:100%}
.drop:focus-within{outline:3px solid var(--h2);outline-offset:2px}
.drop-names{font-size:14px;font-weight:600;color:var(--h2);margin-inline-start:auto}
.upload-meta{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.upload-meta .field{flex:1 1 180px}
.upload--compact .drop{padding:12px}

/* price requests and replies */
.recipients{display:flex;flex-direction:column}
.recipient{display:flex;flex-direction:column;gap:10px;padding-block:14px;border-block-start:1px solid var(--line)}
.recipient:first-child{border-block-start:0;padding-block-start:0}
.recipient-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.recipient-actions,.recipient-marks{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.recipient-marks .inline-row{align-items:center;font-size:14px}
.recipient-marks select{min-block-size:36px;padding-block:4px;inline-size:auto}
.recipient-marks .link-btn{color:var(--ink-2);inline-size:auto;font-weight:400;text-decoration:underline;padding:6px}
.recipient-marks .link-btn:hover{background:none;color:var(--h2)}
.message-box summary{cursor:pointer;font-size:14px;color:var(--ink-2)}
.message-box pre{margin:8px 0 0;padding:12px 14px;background:var(--page);border-radius:8px;font:inherit;font-size:14px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.form-grid--three{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.reply-lines{inline-size:100%;border-collapse:collapse;min-inline-size:860px}
.reply-lines th,.reply-lines td{padding:6px;border-block-end:1px solid var(--line);text-align:start;vertical-align:middle}
.reply-lines thead th{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.reply-lines tbody th{font-weight:600;font-size:14.5px;min-inline-size:170px}
.reply-lines tbody th .meta{display:block;font-weight:400}
.reply-lines input{min-block-size:38px;padding:6px 8px;font-size:15px}
.reply-lines tr.is-bad input{border-color:var(--err)}

/* factories */
.pill--supplier.pill--approved{background:var(--h);color:#fff}
.pill--supplier.pill--trial{background:var(--p-soft);color:var(--p-deep);border-color:#EED59A}
.pill--supplier.pill--stopped{background:transparent;border-color:var(--rule-2);color:var(--ink-3)}
.contact-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.contact-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--rule);font-size:14px}
.facts--grid{padding:16px 20px}
.tiles--five{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.people form{margin-block-start:2px}
.people .link-btn{color:var(--ink-3);font-weight:400;font-size:13.5px;padding:2px 0;inline-size:auto;text-decoration:underline}
.people .link-btn:hover{background:none;color:var(--h2)}

/* product templates */
.field-list{display:flex;flex-direction:column}
.field-list>li{display:flex;flex-direction:column;gap:8px;padding-block:12px;border-block-start:1px solid var(--line)}
.field-list>li:first-child{border-block-start:0}
.field-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px}
.field-row>div:first-child{display:flex;flex-direction:column;gap:2px}
.field-tools{display:flex;gap:2px}
.field-tools .icon-btn{margin:0}
.field-tools .icon-btn[disabled]{opacity:.35;cursor:not-allowed}
.choice--inline{align-self:end;min-block-size:42px}
.more-list .rows a{display:flex;align-items:center;gap:12px;text-decoration:none}

/* the price-request sheet: its own page, made to print */
.sheet-page{background:#D9DADC;margin:0}
.sheet-bar{display:flex;justify-content:center;padding:16px}
.sheet{inline-size:min(100% - 32px,210mm);margin:0 auto 32px;background:#fff;padding:18mm 16mm;display:flex;flex-direction:column;gap:18px;box-shadow:0 18px 40px -20px rgba(0,0,0,.5);font-size:14px;line-height:1.6}
.sheet-head{display:flex;justify-content:space-between;align-items:center;border-block-end:2.5px solid var(--h);padding-block-end:10px}
.sheet-head h1{font-size:20px;color:var(--h2)}
.sheet-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
.sheet-meta div{display:flex;gap:8px}
.sheet-meta dt{font-weight:600;color:var(--ink-3)}
.sheet-items{inline-size:100%;border-collapse:collapse}
.sheet-items th,.sheet-items td{border:1px solid #C9CBCE;padding:8px 10px;text-align:start;vertical-align:top}
.sheet-items thead th{background:#F3F3F0;font-size:13px}
.sheet-items .num{text-align:end;white-space:nowrap}
.sheet-items ul{display:flex;flex-direction:column;gap:2px}
.sheet-items li span{color:var(--ink-3)}
.sheet-ask ul{list-style:disc;padding-inline-start:20px;columns:2;gap:24px}
.sheet-ask h2{font-size:15px;margin-block-end:6px}
.sheet-foot{margin-block-start:auto;border-block-start:1px solid var(--line);padding-block-start:10px;color:var(--ink-3);font-size:12.5px;text-align:center}
@media print{
  .sheet-page{background:#fff}
  .sheet-bar{display:none}
  .sheet{box-shadow:none;margin:0;inline-size:auto;padding:0}
  @page{size:A4;margin:16mm}
}

@media (max-width:1100px){
  .split--item{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .nav-desk{display:none!important}
  .nav-more{display:flex!important}
  .specs,.specs tbody,.specs tr,.specs th,.specs td{display:block}
  .specs thead{display:none}
  .specs tbody th{inline-size:auto}
  .specs tbody tr{padding-block:8px;border-block-end:1px solid var(--line)}
  .specs tbody th,.specs td{border:0;padding:2px 0}
  .cert-row{grid-template-columns:minmax(0,1fr)}
  .sheet{padding:16px}
  .sheet-meta{grid-template-columns:minmax(0,1fr)}
  .sheet-ask ul{columns:1}
  .drop{flex-wrap:wrap}
  .drop-names{margin-inline-start:0;inline-size:100%}
}

/* ---------- phase 3: quotations and the document the customer receives ---------- */
.pill--quote{background:var(--paper);border-color:var(--rule-2);color:var(--ink-2)}
.pill--quote.pill--sent{background:var(--p-soft);border-color:#EED59A;color:var(--p-deep)}
.pill--quote.pill--accepted{background:var(--h);border-color:var(--h);color:#fff}
.pill--quote.pill--expired{background:var(--err-bg);border-color:rgba(168,50,30,.35);color:var(--err)}
.pill--quote.pill--replaced,.pill--quote.pill--cancelled,.pill--quote.pill--declined{color:var(--ink-3)}
.split--quote{grid-template-columns:minmax(0,1fr) minmax(300px,340px)}
.quote-lines{inline-size:100%;border-collapse:collapse;min-inline-size:600px}
.quote-lines th,.quote-lines td{padding:8px 6px;border-block-end:1px solid var(--line);text-align:start;vertical-align:top}
.quote-lines thead th{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.quote-lines .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;padding-block-start:16px}
.quote-lines input,.quote-lines select{min-block-size:38px;padding:6px 8px;font-size:15px}
.quote-lines tr.is-bad input{border-color:var(--err)}
.ql-desc{display:flex;flex-direction:column;gap:6px;min-inline-size:210px}
.ql-row{display:flex;align-items:center;gap:4px}
.ql-row .icon-btn{margin:0;flex:none}
.ql-qty-cell{display:flex;flex-direction:column;gap:6px;inline-size:104px}
.quote-lines td .meta{display:block}
.ql-desc input[lang=en]{font-size:14px;min-block-size:34px;background:#FCFCFB}
.ql-qty{max-inline-size:84px}
.ql-price{max-inline-size:130px}
.ql-more summary{cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.ql-more[open]{display:flex;flex-direction:column;gap:4px}
.ql-more label{font-size:13px;color:var(--ink-3)}
.quote-pay{inline-size:100%;border-collapse:collapse}
.quote-pay th,.quote-pay td{padding:6px;text-align:start}
.quote-pay thead th{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.add-line{align-items:center;flex-wrap:wrap;font-size:14.5px}
.add-line select{inline-size:auto;flex:1 1 220px}
.stack-tight{display:flex;flex-direction:column;gap:10px}

/* the document: one design for the preview, the printable page, and the PDF */
.qdoc{--q-ink:#202226;--q-soft:#5F6164;--q-line:#D9DADC;--q-band:#F3F3F0;--q-char:#2F343B;--q-amber:#F7BE4B;
  inline-size:100%;max-inline-size:794px;background:#fff;color:var(--q-ink);font-size:12.5px;line-height:1.6;display:flex;flex-direction:column;gap:14px;position:relative}
.qdoc [lang=en]{font-family:'IBM Plex Sans Arabic','Segoe UI',Arial,sans-serif}
.qdoc .en{display:block;font-size:.88em;color:var(--q-soft)}
.qd-draft{position:absolute;inset-block-start:-4px;inset-inline-start:50%;transform:translateX(50%);background:var(--q-amber);color:#14171B;font-weight:700;padding:2px 14px;border-radius:999px;font-size:12px}
.qd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-block-end:3px solid var(--q-char);padding-block-end:12px}
.qd-from{display:flex;flex-direction:column;gap:4px;max-inline-size:52%}
.qd-logo{inline-size:150px;block-size:auto}
.qd-name{font-weight:700;font-size:14px}
.qd-ids{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--q-soft);font-size:11.5px}
.qd-ids b{color:var(--q-ink);font-weight:600}
.qd-title{display:flex;flex-direction:column;gap:6px;min-inline-size:42%}
.qd-title h1{font-size:22px;line-height:1.3;color:var(--q-char)}
.qd-title h1 span{font-size:.6em;color:var(--q-soft);font-weight:600;margin-inline-start:6px}
.qd-title dl{display:flex;flex-direction:column;gap:2px}
.qd-title dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px}
.qd-title dt{color:var(--q-soft);font-size:11.5px}
.qd-title dt span,.qd-label span,.qd-lines th span,.qd-totals th span,.qd-block h2 span,.qd-sign span span{font-weight:400;color:var(--q-soft);font-size:.9em}
.qd-title dd span{display:block;font-size:11px;color:var(--q-soft)}
.qd-to{background:var(--q-band);border-radius:6px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.qd-label{color:var(--q-soft);font-size:11.5px}
.qd-customer strong{font-size:14px}
.qd-customer span{display:block;font-size:12px;color:var(--q-soft)}
.qd-subject{margin-block-start:4px;font-weight:600}
.qd-lines{inline-size:100%;border-collapse:collapse}
.qd-lines thead{display:table-header-group}
.qd-lines th{background:var(--q-char);color:#fff;font-size:11.5px;font-weight:600;text-align:start;padding:7px 8px}
.qd-lines th span{color:#D5D7DA}
.qd-lines td{border-block-end:1px solid var(--q-line);padding:8px;vertical-align:top}
.qd-lines tr{break-inside:avoid}
.qd-lines .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.qd-details{display:block;white-space:pre-line;font-size:11.5px;color:var(--q-soft);margin-block-start:4px}
.qd-unit{display:block;font-size:11px;color:var(--q-soft)}
.qd-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,46%);gap:16px;align-items:start;break-inside:avoid}
.qd-words{background:var(--q-band);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-weight:600}
.qd-words p[lang=en]{font-weight:500;color:var(--q-soft)}
.qd-totals{inline-size:100%;border-collapse:collapse}
.qd-totals th,.qd-totals td{padding:5px 8px;border-block-end:1px solid var(--q-line);text-align:start;font-weight:500}
.qd-totals td{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.qd-grand th,.qd-grand td{background:var(--q-char);color:#fff;font-weight:700;font-size:13.5px;border:0}
.qd-grand th span{color:#D5D7DA}
.qd-currency{font-size:11px;color:var(--q-soft)}
.qd-block{display:flex;flex-direction:column;gap:6px;break-inside:avoid}
.qd-block h2{font-size:13px;color:var(--q-char)}
.qd-pay{inline-size:100%;border-collapse:collapse}
.qd-pay td{padding:5px 8px;border-block-end:1px solid var(--q-line)}
.qd-pay .num{text-align:end;font-variant-numeric:tabular-nums}
.qd-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px}
.qd-terms p{white-space:pre-line}
.qd-sign{border:1px dashed var(--q-line);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:20px;break-inside:avoid}
.qd-sign>p{font-weight:600}
.qd-sign div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.qd-sign div span{border-block-start:1px solid var(--q-soft);padding-block-start:4px;font-size:11px;color:var(--q-soft)}
.qd-foot{border-block-start:1px solid var(--q-line);padding-block-start:8px;display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;font-size:11px;color:var(--q-soft)}
.qd-not{color:#A8321E;font-weight:700;font-size:12px}
.qd-not span{color:#A8321E}
.qdoc-frame{overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0}
.qdoc-frame .qdoc{inline-size:794px;max-inline-size:none;padding:28px;zoom:.34}
.qdoc-frame--large .qdoc{zoom:.86}
.sheet--quote{padding:14mm 13mm;overflow-x:auto}
@media print{
  .sheet--quote{padding:0}
  .qd-lines th,.qd-grand th,.qd-grand td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (max-width:1280px){
  .split--quote{grid-template-columns:minmax(0,1fr)}
  .qdoc-frame .qdoc{zoom:.72}
}
@media (max-width:1100px){
  .qdoc-frame .qdoc,.qdoc-frame--large .qdoc{zoom:.6}
}
@media (max-width:560px){
  .qdoc-frame .qdoc,.qdoc-frame--large .qdoc{zoom:.38}
  .sheet--quote{padding:12px}
  .qd-head{flex-direction:column}
  .qd-from,.qd-title{max-inline-size:none}
  .qd-sum{grid-template-columns:minmax(0,1fr)}
  .qd-sign div{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* phase 4: the project's money, claims, purchase orders and their stages */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px}
.figs>div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh);min-inline-size:0}
.figs dt{font-size:13px;font-weight:600;color:var(--ink-3)}
.figs dd{font-size:clamp(18px,1.7vw,22px);font-weight:700;color:var(--h2);font-variant-numeric:tabular-nums;direction:ltr;text-align:end;white-space:nowrap;overflow-wrap:anywhere}
.figs dd small{display:block;font-size:13px;font-weight:600;color:var(--ink-3)}
.figs .figs-key{background:var(--h);border-color:var(--h)}
.figs .figs-key dt,.figs .figs-key dd small{color:#D5D7DA}
.figs .figs-key dd{color:#fff}
.figs--quiet>div{box-shadow:none;background:var(--page)}
.figs--quiet .figs-key{background:var(--h)}
.figs-note{margin-block-start:-10px}
.pill--claim,.pill--po{background:var(--paper);border-color:var(--rule-2);color:var(--ink-2)}
.pill--claim.pill--ready,.pill--claim.pill--drafted,.pill--claim.pill--draft,.pill--po.pill--draft{background:var(--p-soft);border-color:#EED59A;color:var(--p-deep)}
.pill--claim.pill--claimed,.pill--claim.pill--sent,.pill--claim.pill--part,.pill--po.pill--sent,.pill--po.pill--making,.pill--po.pill--shipping{background:#E2E4E7;color:var(--h2)}
.pill--claim.pill--paid,.pill--po.pill--done{background:var(--h);border-color:var(--h);color:#fff}
.pill--claim.pill--overdue{background:var(--err-bg);border-color:rgba(168,50,30,.35);color:var(--err)}
.pill--claim.pill--waiting,.pill--claim.pill--cancelled,.pill--po.pill--cancelled{color:var(--ink-3)}
.chip--done{background:var(--h);border-color:var(--h);color:#fff}
.meta--warn{color:var(--p-deep);font-weight:600}
.schedule .btn{white-space:nowrap}
.list tfoot th,.list tfoot td{padding:12px 14px;border-block-start:1.5px solid var(--h);font-weight:700;color:var(--h2);text-align:start}
.list tfoot .num{text-align:end;font-variant-numeric:tabular-nums}
.costs td.up{color:var(--err)}
.retention{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;border-block-start:1px solid var(--line);padding-block-start:12px}
.retention>p{flex:1 1 320px}
.retention .mini{flex-basis:100%}
.mini>summary{cursor:pointer;font-size:13.5px;color:var(--ink-2);font-weight:600}
.mini[open]{display:flex;flex-direction:column;gap:8px}
.mini[open]>summary{margin-block-end:4px}
.mini .inline-row{flex-wrap:wrap;align-items:center}
.mini .inline-row input{flex:1 1 180px}
.when-cell{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.when-cell select{inline-size:auto;flex:1 1 170px}
.when-cell input{inline-size:auto}
.schedule-edit td{vertical-align:middle}
.rows--tight li{padding:7px 0;flex-direction:column;align-items:flex-start;gap:2px}
.rows li.is-off,.rows--tight li.is-off{color:var(--ink-3)}
.rows li.is-off strong{font-weight:600;text-decoration:line-through;text-decoration-color:var(--rule-2)}
.todo{display:flex;flex-direction:column}
.todo li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 0;border-block-start:1px solid var(--line)}
.todo li:first-child{border-block-start:0}
.todo li>div{display:flex;flex-direction:column;gap:2px;min-inline-size:0;flex:1 1 300px}
.track{display:flex;flex-direction:column;position:relative}
.track-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;position:relative;padding-block-end:16px}
.track-step::before{content:'';position:absolute;inset-block:26px 0;inset-inline-start:13px;inline-size:2px;background:var(--line)}
.track-step:last-child::before{display:none}
.track-step.is-done::before{background:var(--h)}
.track-dot{inline-size:28px;block-size:28px;border-radius:50%;border:2px solid var(--rule-2);background:var(--paper);display:grid;place-items:center;position:relative;z-index:1}
.track-dot .i{inline-size:16px;block-size:16px;stroke-width:2.4;color:#fff}
.is-done>.track-dot{background:var(--h);border-color:var(--h)}
.is-current>.track-dot{border-color:var(--p);box-shadow:0 0 0 4px var(--p-soft)}
.is-late>.track-dot,.is-failed>.track-dot{border-color:var(--err);box-shadow:0 0 0 4px var(--err-bg)}
.is-skipped>.track-dot{border-style:dashed}
.track-body{display:flex;flex-direction:column;gap:4px;min-inline-size:0;padding-block-start:2px}
.track-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.track-head strong{font-weight:600;color:var(--h2)}
.is-skipped .track-head strong,.is-waiting .track-head strong{color:var(--ink-2);font-weight:500}
.track-body .meta a{display:inline-flex;align-items:center;gap:3px}
.track-body .meta .i{inline-size:15px;block-size:15px}
.track-edit{margin-block-start:4px}
.stage-form{gap:12px}
.cdoc .cd-bank dl{display:flex;flex-wrap:wrap;gap:6px 24px;background:var(--q-band);border-radius:6px;padding:10px 12px}
.cdoc .cd-bank dl>div{flex:1 1 auto}
.cdoc .cd-bank dt{color:var(--q-soft);font-size:11.5px}
.cdoc .cd-bank dd{font-weight:600}
.cdoc .cd-bank dt span{font-weight:400;color:var(--q-soft)}
.cdoc .iban{font-variant-numeric:tabular-nums;letter-spacing:.04em;text-align:start;white-space:nowrap}
.cdoc .qd-pay td span{color:var(--q-soft);font-size:.9em}
.cdoc .qd-sum{grid-template-columns:minmax(0,1fr) minmax(280px,52%)}
.qdoc[dir=rtl] .qd-name .en,.qdoc[dir=rtl] .qd-customer span[lang=en],.qdoc[dir=rtl] .qd-title dd span[lang=en]{text-align:right}
.qd-addr{color:var(--q-soft);font-size:11.5px;white-space:pre-line}
.podoc{font-family:'IBM Plex Sans Arabic','Segoe UI',Arial,sans-serif}
.podoc .qd-title h1{text-transform:none}
.po-confirm{font-weight:600}
.po-sign{flex-direction:row;gap:24px}
.po-sign>div{flex:1;display:flex;flex-direction:column;gap:18px}
.po-sign>div>p{font-weight:600}
.po-sign span{border-block-start:1px solid var(--q-soft);padding-block-start:4px;font-size:11px;color:var(--q-soft)}
@media (max-width:560px){
  .po-sign{flex-direction:column}
  .cdoc .qd-sum{grid-template-columns:minmax(0,1fr)}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figs .figs-key{grid-column:1/-1}
}

/* phase 5: the assistant's keys, its page for the admin, and follow-ups */
.new-key{background:var(--p-soft);border-radius:var(--r);border-end-end-radius:var(--fil);padding:14px 18px;display:flex;flex-direction:column;gap:8px;box-shadow:inset -4px 0 0 var(--p)}
.new-key h3{font-size:16px;color:var(--h2)}
.copy-row{display:flex;align-items:flex-start;gap:6px}
.copy-row code{flex:1;min-inline-size:0;background:var(--h2);color:#F2F2F0;border-radius:8px;padding:8px 12px;font-family:Consolas,'Courier New',monospace;font-size:13.5px;line-height:1.6;overflow-wrap:anywhere;text-align:left}
.copy-row .icon-btn{margin:0;flex:none}
.pill--key{background:var(--paper);border-color:var(--rule-2);color:var(--ink-3)}
.list tr.is-flag td{background:#FFF8E6}
.fu-list li{flex-wrap:wrap}
.fu-text{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-inline-size:0}
.fu-text strong{font-weight:600}
.fu-text .tag{align-self:flex-start}
.fu-actions{display:flex;align-items:center;gap:10px;flex-basis:100%;justify-content:flex-end}
.fu-skip{inline-size:auto;font-size:13.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.fu-skip:hover{color:var(--h2)}

/* phase 6: the reports, their period picker and month chart, and the page where Claude is approved */
.period{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.period .segmented{flex-wrap:wrap;max-inline-size:100%}
.period .hint{margin:0}
.period-custom{border:0;padding:0}
.period-custom>summary{font-size:14px}
.period-custom[open]>summary{margin-block-end:8px}
.period-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.period-form label{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:600;color:var(--ink-3)}
.period-form input{inline-size:auto;min-block-size:38px}
.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px;align-items:start}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--ink-2)}
.legend>span{display:inline-flex;align-items:center;gap:6px}
.swatch{display:inline-block;inline-size:11px;block-size:11px;border-radius:3px}
.swatch--in{background:var(--h)}
.swatch--out{background:var(--p)}
.viz .in{fill:var(--h)}
.viz .out{fill:var(--p)}
.list tfoot th{background:#F7F7F5}
.figs dd small{direction:rtl;text-align:start}
.viz--fit{min-inline-size:0}
@media (max-width:560px){.viz--fit text{font-size:15px}}
.list tbody th{text-align:start;font-weight:600;color:var(--h2);padding:12px 14px;border-block-end:1px solid var(--line)}
.consent{max-inline-size:640px;margin-inline:auto}
.consent h1{font-size:clamp(21px,2.2vw,26px);line-height:1.45;color:var(--h2);text-wrap:balance}
.push-here{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.push-here p{margin:0;font-weight:600;color:var(--h2)}
.row-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0 16px}
.pill--ok{background:var(--h);color:#fff}
.pill--warn{background:var(--p);color:var(--h2)}
/* The team: each person on a few short lines, with what can be done to their account folded away. */
.people li{display:grid;gap:3px;justify-items:start;padding:12px 0}
.people .person-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.people .person-head .chip{margin-inline-start:0}
.people .person-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.people .disclose{justify-self:stretch;margin-block-start:8px}