/* aqargo admin portal — Paper & Crimson, the shipped brand system.
   Red is a scalpel: one primary action per screen, under 10% of pixels.
   Never pure black. Latin numerals in both languages. Borders over shadows. */

:root{
  --paper:#FAFAF8; --soft:#F7F6F4; --raised:#FFFFFF;
  --ink:#171717; --muted:#707070; --dim:#8A8A88;
  --line:#E6E4E1; --line-soft:#EFEDEA;
  --red:#C0272D; --red-ink:#C0272D; --red-dk:#8E1F23; --red-tint:#FAE9E9;
  --ok-ink:#2A6B45; --ok-tint:#EAF3ED; --ok-line:#BFDCC9;
  --warn-ink:#8A5E0D; --warn-tint:#FBF3E2; --warn-line:#E7D6AC;
  --r-sm:12px; --r-md:14px; --r-lg:24px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#121212; --soft:#1A1A1A; --raised:#1E1E1E;
    --ink:#E8E8E6; --muted:#9A9A98; --dim:#7A7A78;
    --line:#2A2A2A; --line-soft:#242424;
    /* Brand red as text fails contrast on dark — #E8686C is the verified swap. */
    --red-ink:#E8686C; --red-dk:#A82228; --red-tint:#2A1618;
    --ok-ink:#7FC79B; --ok-tint:#15251B; --ok-line:#2C4735;
    --warn-ink:#DDB765; --warn-tint:#241E12; --warn-line:#463A22;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6;
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.num{direction:ltr; unicode-bidi:embed; font-variant-numeric:lining-nums tabular-nums;}

/* ------------------------------------------------------------------ shell */
.app{display:grid; grid-template-columns:216px 1fr; min-height:100vh;}
.side{
  background:var(--soft); border-inline-end:1px solid var(--line);
  padding:18px 12px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; height:100vh;
}
.brand{padding:0 8px; font-weight:700; font-size:1.02rem; letter-spacing:-.02em;
       text-decoration:none; direction:ltr;}
.brand i{font-style:normal; color:var(--red-ink);}
.nav{display:flex; flex-direction:column; gap:2px;}
.nav a{display:flex; align-items:center; justify-content:space-between; gap:8px;
       padding:9px 11px; border-radius:9px; color:var(--muted);
       text-decoration:none; font-size:.9rem;}
.nav a:hover{color:var(--ink);}
.nav a.on{background:var(--raised); color:var(--ink); font-weight:600;
          border:1px solid var(--line);}
.nav .ct{font-size:.75rem; color:var(--dim);}
.whoami{margin-top:auto; padding:11px; border:1px solid var(--line);
        border-radius:10px; font-size:.79rem; color:var(--muted); background:var(--raised);}
.whoami b{display:block; color:var(--ink); font-size:.87rem; font-weight:600;}
.linkish{background:none; border:0; padding:6px 0 0; color:var(--muted);
         font:inherit; font-size:.79rem; cursor:pointer; text-decoration:underline;}
.linkish:hover{color:var(--ink);}

.work{padding:24px clamp(16px,2.4vw,30px) 72px; display:flex; flex-direction:column;
      gap:20px; min-width:0;}
.worktop{display:flex; align-items:center; justify-content:space-between; gap:14px;
         flex-wrap:wrap;}
.worktop h1{margin:0; font-size:1.35rem; font-weight:700; letter-spacing:-.02em;}
.worktop .sub{margin:2px 0 0; font-size:.85rem; color:var(--muted);}

/* ------------------------------------------------------------------- bits */
h2.section{margin:6px 0 0; font-size:1.05rem; font-weight:700; letter-spacing:-.01em;}
.btn{font:inherit; font-weight:600; font-size:.88rem; border-radius:var(--r-sm);
     padding:10px 17px; border:1px solid var(--line); background:var(--raised);
     color:var(--ink); cursor:pointer; text-decoration:none;
     display:inline-flex; align-items:center; justify-content:center; gap:7px;}
.btn:hover{border-color:var(--dim);}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff;}
.btn.primary:hover{background:var(--red-dk); border-color:var(--red-dk);}
.btn.quiet{background:transparent;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.small{padding:6px 12px; font-size:.8rem;}

.pill{padding:4px 10px; border-radius:999px; font-weight:600; font-size:.68rem;
      letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
      border:1px solid transparent; display:inline-block;}
.pill.ok{background:var(--ok-tint); color:var(--ok-ink); border-color:var(--ok-line);}
.pill.warn{background:var(--warn-tint); color:var(--warn-ink); border-color:var(--warn-line);}
.pill.mute{background:var(--soft); color:var(--muted); border-color:var(--line);}
.pill.bad{background:var(--red-tint); color:var(--red-dk); border-color:var(--red-tint);}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:11px;}
.kpi{border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px;
     background:var(--raised); display:flex; flex-direction:column; gap:1px;}
.kpi .n{font-size:1.45rem; font-weight:600; letter-spacing:-.02em; direction:ltr;}
.kpi .n.ok{color:var(--ok-ink);} .kpi .n.warn{color:var(--warn-ink);}
.kpi .l{font-size:.76rem; color:var(--muted); line-height:1.35;}

.tablewrap{border:1px solid var(--line); border-radius:var(--r-sm); overflow-x:auto;
           background:var(--raised);}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:.87rem;}
th{text-align:start; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
   color:var(--muted); font-weight:600; padding:11px 13px;
   border-bottom:1px solid var(--line); white-space:nowrap; background:var(--soft);}
td{padding:11px 13px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
tr:last-child td{border-bottom:0;}
td.num{direction:ltr; white-space:nowrap;}
tbody tr:hover{background:var(--soft);}
td a{font-weight:600; text-decoration:none;}
td a:hover{text-decoration:underline;}

.meter{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
       border:1px solid var(--line); border-radius:var(--r-sm); background:var(--raised);
       padding:14px 16px;}
.bar{flex:1 1 200px; height:7px; border-radius:99px; background:var(--soft);
     overflow:hidden; min-width:140px; border:1px solid var(--line);}
.bar i{display:block; height:100%; background:var(--ok-ink);}
.meter .txt{font-size:.85rem; color:var(--muted);}
.meter .txt b{color:var(--ink); font-weight:600;}
.meter .outstanding{flex:1 1 100%; font-size:.83rem; color:var(--muted);}

.note{border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 16px;
      font-size:.86rem; line-height:1.6; background:var(--raised);}
.note b{font-weight:600;}
.note.warn{background:var(--warn-tint); border-color:var(--warn-line); color:var(--warn-ink);}
.note.bad{background:var(--red-tint); border-color:var(--red-tint); color:var(--red-dk);}
.note.ok{background:var(--ok-tint); border-color:var(--ok-line); color:var(--ok-ink);}
.note ul{margin:6px 0 0; padding-inline-start:18px;}

.empty{border:1px dashed var(--line); border-radius:var(--r-md); padding:40px 24px;
       text-align:center; color:var(--muted); background:var(--raised);}
.empty h3{margin:0 0 6px; color:var(--ink); font-size:1rem;}
.empty p{margin:0 0 16px; font-size:.88rem;}

/* ------------------------------------------------------------------- form */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
fieldset{border:1px solid var(--line); border-radius:var(--r-sm); padding:0; margin:0;
         background:var(--raised);}
legend{margin-inline-start:14px; padding:0 8px; font-size:.68rem; font-weight:600;
       letter-spacing:.1em; text-transform:uppercase; color:var(--red-ink);}
.fields{padding:8px 16px 16px; display:flex; flex-direction:column; gap:12px;}
.f{display:flex; flex-direction:column; gap:5px;}
.f label{font-size:.77rem; color:var(--muted);}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.f3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], select, textarea{
  border:1px solid var(--line); border-radius:9px; background:var(--paper);
  padding:9px 11px; font:inherit; font-size:.87rem; color:var(--ink); width:100%;
  min-height:38px;
}
textarea{min-height:74px; resize:vertical; line-height:1.5;}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--red); outline-offset:1px;
}
.hint{font-size:.73rem; color:var(--dim); line-height:1.45;}
.req{color:var(--red-ink);}
.opt{color:var(--dim); font-size:.7rem;}
.calc{border:1px solid var(--ok-line); background:var(--ok-tint); color:var(--ok-ink);
      border-radius:9px; padding:9px 11px; font-size:.85rem; font-weight:600;
      min-height:38px; display:flex; align-items:center; direction:ltr;}
.survey-missing{border-color:var(--warn-line); background:var(--warn-tint);}

.uses{display:flex; flex-direction:column; gap:14px; padding:14px 16px 16px;}
.usegroup h4{margin:0 0 8px; font-size:.78rem; font-weight:600; color:var(--muted);}
.chips{display:flex; flex-wrap:wrap; gap:7px;}
.chip{display:inline-flex; align-items:center; gap:7px; font-size:.83rem;
      padding:6px 12px; border-radius:9px; border:1px solid var(--line);
      background:var(--paper); cursor:pointer;}
.chip input{margin:0; accent-color:var(--red);}
.chip:has(input:checked){border-color:var(--ok-line); background:var(--ok-tint);
                         color:var(--ok-ink); font-weight:600;}
.chip .prov{color:var(--dim); font-size:.7rem;}

.stickybar{position:sticky; bottom:0; display:flex; gap:10px; align-items:center;
           flex-wrap:wrap; background:var(--paper); border-top:1px solid var(--line);
           padding:14px 0 0; margin-top:4px;}
.stickybar .spacer{flex:1 1 auto;}

.docrow{display:grid; grid-template-columns:1.1fr .9fr .8fr .8fr auto; gap:10px;
        align-items:center; padding:11px 0; border-bottom:1px solid var(--line-soft);
        font-size:.86rem;}
.docrow:last-of-type{border-bottom:0;}
.docrow .k{font-weight:600;}
.docadd{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:end;
        padding-top:14px; border-top:1px solid var(--line);}

/* ------------------------------------------------------------------ intake */
/* The owner conversation, nine steps. One page; the script only hides the steps
   that are not current, so with it off the whole form is still there. */
.intake{display:flex; flex-direction:column; gap:18px;}
.intake .worktop{align-items:flex-start;}
.lbl-primary{color:var(--ink); font-weight:600;}
.lbl-second{color:var(--dim); font-size:.72rem; margin-inline-start:6px;}
.qtext{margin:0; font-size:.98rem; font-weight:600; line-height:1.5;}
.qwhy{margin:0 0 4px; font-size:.81rem; color:var(--muted); line-height:1.6;}
legend .qn{color:var(--dim); margin-inline-end:6px;}

.steplist{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.steplist li{display:inline-flex; align-items:center; gap:7px; font-size:.78rem;
             color:var(--muted); border:1px solid var(--line); border-radius:999px;
             padding:5px 12px; background:var(--raised); cursor:pointer;}
.steplist li .num{color:var(--dim); font-size:.72rem;}
.steplist li.on{border-color:var(--red); color:var(--ink); font-weight:600;}
.steplist li.done{color:var(--ok-ink); border-color:var(--ok-line); background:var(--ok-tint);}
.step{display:block;}
.step[hidden]{display:none;}

/* An internal field is marked at the point of entry, not only in a comment. */
.f.internal input, .f.internal select{border-color:var(--warn-line); background:var(--warn-tint);}
.internal-mark{color:var(--warn-ink);}

/* ------------------------------------------------------------------ signin */
.signin{min-height:100vh; display:flex; align-items:center; justify-content:center;
        padding:24px;}
.signin form{width:100%; max-width:360px; border:1px solid var(--line);
             border-radius:var(--r-md); background:var(--raised); padding:28px;
             display:flex; flex-direction:column; gap:14px;}
.signin .brand{padding:0; font-size:1.3rem;}
.signin p.lead{margin:0; font-size:.86rem; color:var(--muted);}

@media (max-width:980px){
  .app{grid-template-columns:1fr;}
  .side{position:static; height:auto; border-inline-end:0;
        border-bottom:1px solid var(--line);}
  .formgrid{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr 1fr;}
  .docadd{grid-template-columns:1fr 1fr;}
}