/* Al Mawarid — cost invoice control room.
   Graphite instrument panel, brand amber as the only accent, tabular numerals throughout. */

:root{
  --amber:#F9B233;
  --amber-dim:#C98B1F;
  --amber-glow:rgba(249,178,51,.14);
  --graphite:#58595B;
  --ink:#0E1013;
  --surface:#15181D;
  --surface-2:#1B1F26;
  --surface-3:#222731;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(249,178,51,.28);
  --text:#E8EAED;
  --text-dim:#9AA1AC;
  --text-faint:#6B7280;
  --block:#E5484D;
  --warn:#F9B233;
  --ok:#3FB07A;
  --info:#5B8DEF;
  --r:3px;
  --rail:5.5rem;
  --sans:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans Arabic",monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(120rem 60rem at 85% -20%,rgba(249,178,51,.07),transparent 60%),
    linear-gradient(180deg,#0E1013,#0B0D10);
}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ISO timestamps, ledger accounts and ids are LTR runs: without isolation the RTL
   paragraph direction reorders them into nonsense like "29T02:33:42 — system-08-2026" */
.mono,td.num,.num,.stamp,.frow-name small,.control-card .en,.policy-chip em{
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  direction:ltr;unicode-bidi:isolate;text-align:start;
}
.muted{color:var(--text-dim)}
h1{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;margin:0}
h2{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin:0}
.lede{color:var(--text-dim);margin:.35rem 0 0;max-width:62ch;font-size:.9rem}

/* ---------------- top bar ---------------- */
.topbar{
  height:4.25rem;display:flex;align-items:center;justify-content:space-between;
  padding:0 1.25rem;background:linear-gradient(180deg,#171A20,#121519);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
}
.topbar::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.brand{display:flex;align-items:center;gap:.9rem;min-width:0}
/* the wordmark is dark grey and would disappear on graphite, so it sits on its own
   light plate rather than being recoloured — the brand mark stays exactly as issued */
.brand img{height:2.1rem;width:auto;background:#FFFFFF;padding:.3rem .5rem;border-radius:var(--r)}
.brand-divider{width:1px;height:2rem;background:var(--line)}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-text strong{font-weight:600;font-size:.95rem}
.brand-text span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-family:var(--mono)}
.topbar-right{display:flex;align-items:center;gap:.7rem}

.field{display:flex;flex-direction:column;gap:.15rem}
.field>span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.field.compact select{min-width:11rem}
select,.input,textarea{
  background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  border-radius:var(--r);padding:.42rem .6rem;font-family:var(--sans);font-size:.85rem;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
select:focus,.input:focus,textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-glow)}

.btn{
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  padding:.5rem .95rem;border-radius:var(--r);font-family:var(--sans);font-size:.85rem;
  font-weight:500;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--line-strong);background:var(--surface-3)}
.btn.primary{background:var(--amber);color:#1A1408;border-color:var(--amber);font-weight:600}
.btn.primary:hover{background:#FFC352;box-shadow:0 0 0 3px var(--amber-glow)}
.btn.ghost{background:transparent}
.btn.sm{padding:.3rem .6rem;font-size:.78rem}
.btn:disabled{opacity:.4;cursor:not-allowed}
.icon-btn{background:none;border:0;color:var(--text-dim);font-size:1rem;cursor:pointer;padding:.25rem}
.icon-btn:hover{color:var(--amber)}

/* ---------------- shell + rail ---------------- */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:calc(100vh - 4.25rem)}
.rail{
  border-inline-start:1px solid var(--line);background:#111419;
  display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.2rem;
  position:sticky;top:4.25rem;height:calc(100vh - 4.25rem);
}
.rail-item{
  width:100%;background:none;border:0;color:var(--text-faint);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.7rem .25rem;
  font-family:var(--sans);font-size:.62rem;position:relative;transition:.15s;
}
.rail-item i{font-style:normal;font-size:1.15rem;line-height:1}
.rail-item:hover{color:var(--text)}
.rail-item.is-active{color:var(--amber)}
.rail-item.is-active::before{
  content:"";position:absolute;inset-inline-end:0;top:.5rem;bottom:.5rem;width:2px;
  background:var(--amber);box-shadow:0 0 12px var(--amber);
}
.rail-foot{margin-top:auto;text-align:center;color:var(--text-faint);padding:.5rem}
.rail-foot span{display:block;font-family:var(--mono);font-size:1.05rem;color:var(--amber);font-weight:600}
.rail-foot small{font-size:.55rem;letter-spacing:.1em}

main{padding:1.6rem 1.75rem 3rem;min-width:0;overflow-x:hidden}
.view{display:none}
.view.is-active{display:block;animation:rise .4s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap}
.filters .input{min-width:11rem}

/* ---------------- flow stepper ---------------- */
.flow{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.flow-step{
  display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem;font-size:.75rem;
  border:1px solid var(--line);background:var(--surface);color:var(--text-faint);
  border-radius:var(--r);
}
.flow-step.done{color:var(--text-dim);border-color:var(--line)}
.flow-step.now{color:#1A1408;background:var(--amber);border-color:var(--amber);font-weight:600}
.flow-sep{color:var(--text-faint);font-size:.7rem}

/* ---------------- kpis ---------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem;margin-bottom:1.1rem}
.kpi{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;position:relative;overflow:hidden;
  animation:rise .5s cubic-bezier(.16,1,.3,1) both;
}
.kpi::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;background:var(--tone,var(--line))}
.kpi-label{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.kpi-value{font-family:var(--mono);font-size:1.7rem;font-weight:600;line-height:1.15;margin-top:.3rem;color:var(--tone,var(--text))}
.kpi-sub{font-size:.72rem;color:var(--text-dim);margin-top:.15rem}

/* ---------------- panels ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:1100px){.split{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.panel-body{padding:.5rem}
.panel.flush .panel-body{padding:0}
.scroll{max-height:26rem;overflow:auto}

.frow{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.55rem .65rem;border-radius:var(--r);cursor:pointer;transition:background .12s}
.frow:hover{background:var(--surface-2)}
.frow-name{min-width:0}
.frow-name b{display:block;font-weight:500;font-size:.86rem}
.frow-name small{color:var(--text-faint);font-family:var(--mono);font-size:.68rem}
.frow-count{font-family:var(--mono);font-weight:600;font-size:.95rem}

.chip{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:600;
  padding:.16rem .5rem;border-radius:999px;border:1px solid currentColor;letter-spacing:.02em;
}
.chip.BLOCK,.chip.BLOCKED{color:var(--block);background:rgba(229,72,77,.1)}
.chip.WARN,.chip.REVIEW{color:var(--warn);background:rgba(249,178,51,.1)}
.chip.INFO,.chip.EXCLUDED{color:var(--info);background:rgba(91,141,239,.1)}
.chip.READY,.chip.OK{color:var(--ok);background:rgba(63,176,122,.1)}
.chip.AGREED{color:var(--ok);background:rgba(63,176,122,.1)}
.chip.OPEN{color:var(--block);background:rgba(229,72,77,.1)}
.chip.IN_PROGRESS{color:var(--warn);background:rgba(249,178,51,.1)}

/* ---------------- tables ---------------- */
.table-wrap{overflow:auto;max-height:calc(100vh - 17rem)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.82rem}
thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:start;
  padding:.6rem .7rem;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:.5rem .7rem;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:top}
tbody tr:hover{background:rgba(249,178,51,.04)}
tbody tr.clickable{cursor:pointer}
td.num{text-align:start;white-space:nowrap}
td.reasons{color:var(--text-dim);font-size:.76rem;max-width:26rem}
/* the row's actions must stay reachable however wide the rule table grows */
/* display:flex on a <td> breaks table row layout, so the buttons get their own wrapper */
.rule-actions{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1;
  white-space:nowrap;border-inline-end:1px solid var(--line)}
.rule-actions > div{display:flex;gap:.35rem}
#rulesTable thead th:first-child{position:sticky;inset-inline-start:0;background:var(--surface-2);z-index:3}
#rulesTable td .input{width:8.5rem}
#rulesTable td{vertical-align:middle}
#rulesTable .num{white-space:nowrap}
.pager{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.7rem;border-top:1px solid var(--line);background:var(--surface-2)}

.recon-banner{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem;padding:.85rem 1.1rem;
  border:1px solid rgba(229,72,77,.35);background:rgba(229,72,77,.07);border-radius:var(--r);
}
.recon-banner.ok{border-color:rgba(63,176,122,.35);background:rgba(63,176,122,.07)}
.recon-banner b{font-family:var(--mono);font-size:1.15rem}

/* ---------------- controls ---------------- */
.maturity{
  border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;margin-bottom:1rem;
  background:linear-gradient(120deg,var(--surface-2),var(--surface));
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);gap:1.4rem;
  align-items:center;overflow:hidden;
}
@media(max-width:1000px){.maturity{grid-template-columns:auto minmax(0,1fr)}}
.policy-now{min-width:0;border-inline-start:1px solid var(--line);padding-inline-start:1.2rem}
.policy-title{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.policy-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.policy-chip{
  display:inline-flex;align-items:baseline;gap:.35rem;background:var(--surface-3);
  border:1px solid var(--line);border-radius:var(--r);padding:.2rem .5rem;font-size:.7rem;
  max-width:100%;
}
.policy-chip b{font-weight:500;color:var(--text-dim)}
.policy-chip em{font-style:normal;font-family:var(--mono);color:var(--amber)}
.dial{--p:0;width:5.5rem;height:5.5rem;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--amber) calc(var(--p)*1%),rgba(255,255,255,.06) 0)}
.dial::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.dial b{position:relative;z-index:1;font-family:var(--mono);font-size:1.25rem;color:var(--amber)}
.maturity-copy h3{margin:0 0 .25rem;font-size:1rem;font-weight:600}
.maturity-copy{min-width:0}
.maturity-copy p{margin:0;color:var(--text-dim);font-size:.85rem;max-width:60ch;overflow-wrap:anywhere}

.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(23rem,1fr));gap:.9rem}
.control-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden;
  animation:rise .45s cubic-bezier(.16,1,.3,1) both;
}
.control-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--tone,var(--block))}
.control-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.control-card h3{margin:0;font-size:.95rem;font-weight:600}
.control-card .en{font-size:.68rem;color:var(--text-faint);font-family:var(--mono);letter-spacing:.03em}
.control-q{color:var(--text-dim);font-size:.85rem;margin:0}
.control-impact{font-size:.75rem;color:var(--amber-dim);border-inline-start:2px solid var(--line-strong);padding-inline-start:.6rem}
.control-form{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.control-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.68rem;color:var(--text-faint)}
.control-form .wide{grid-column:1/-1}
.control-actions{display:flex;gap:.5rem;align-items:center;justify-content:space-between}
.stamp{font-size:.68rem;color:var(--text-faint);font-family:var(--mono);overflow-wrap:anywhere}

/* ---------------- drawer ---------------- */
.drawer{position:fixed;inset:0;z-index:60}
.drawer-scrim{position:absolute;inset:0;background:rgba(6,8,10,.6);backdrop-filter:blur(2px);animation:fade .2s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer-panel{
  position:absolute;inset-block:0;inset-inline-start:0;width:min(34rem,92vw);
  background:var(--surface);border-inline-end:1px solid var(--line-strong);
  display:flex;flex-direction:column;animation:slide .28s cubic-bezier(.16,1,.3,1) both;
  box-shadow:0 0 60px rgba(0,0,0,.5);
}
@keyframes slide{from{transform:translateX(-100%)}to{transform:none}}
[dir=rtl] .drawer-panel{animation-name:slideR}
@keyframes slideR{from{transform:translateX(100%)}to{transform:none}}
.drawer-panel header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.drawer-panel header h2{color:var(--text);text-transform:none;font-size:1rem;letter-spacing:0}
.drawer-body{padding:1.1rem;overflow:auto;display:flex;flex-direction:column;gap:1rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.83rem}
.kv dt{color:var(--text-faint)}
.kv dd{margin:0;font-family:var(--mono)}
.finding{border:1px solid var(--line);border-radius:var(--r);padding:.7rem .8rem;background:var(--surface-2)}
.finding b{display:block;font-size:.85rem;margin:.3rem 0}
.finding pre{margin:.4rem 0 0;font-family:var(--mono);font-size:.72rem;color:var(--text-dim);white-space:pre-wrap;word-break:break-word}
.decide{display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--line);padding-top:.9rem}
.decide-row{display:flex;gap:.5rem}

/* ---------------- toasts ---------------- */
.toasts{position:fixed;inset-block-end:1.25rem;inset-inline-start:1.25rem;z-index:80;display:flex;flex-direction:column;gap:.5rem}
.toast{
  background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:.65rem .95rem;font-size:.85rem;max-width:26rem;animation:rise .3s both;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.toast.err{border-color:rgba(229,72,77,.5);color:#FFC9CB}
.toast.ok{border-color:rgba(63,176,122,.5)}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--text-faint)}
.spin{display:inline-block;width:.85rem;height:.85rem;border:2px solid var(--line);border-top-color:var(--amber);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------------- identity + gate ---------------- */
.who{display:flex;align-items:center;gap:.6rem;padding-inline-start:.6rem;border-inline-start:1px solid var(--line)}
.who-text{display:flex;flex-direction:column;line-height:1.2}
.who-text strong{font-size:.85rem;font-weight:600}
.who-text span{font-size:.66rem;color:var(--amber-dim);font-family:var(--mono)}
.gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:radial-gradient(60rem 40rem at 50% 0%,rgba(249,178,51,.09),transparent 65%),#0B0D10}
/* a display value beats the UA rule for [hidden], so state it explicitly */
.gate[hidden],.drawer[hidden],.who[hidden]{display:none}
.gate-card{
  width:min(24rem,92vw);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:2rem 1.75rem;display:flex;flex-direction:column;gap:.9rem;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:rise .45s cubic-bezier(.16,1,.3,1) both;
}
.gate-card::before{content:"";height:2px;background:linear-gradient(90deg,transparent,var(--amber),transparent);margin:-2rem -1.75rem 0}
.gate-card img{height:2.4rem;width:auto;align-self:flex-start;margin-top:.5rem;background:#FFFFFF;padding:.35rem .6rem;border-radius:var(--r)}
.gate-card h2{color:var(--text);text-transform:none;letter-spacing:0;font-size:1.05rem}
.gate-card .btn{margin-top:.4rem}
.gate-err{color:#FFA8AB;font-size:.82rem;margin:0;min-height:1.2em}

.chain{display:inline-flex;gap:.4rem;align-items:center}

/* ---------------- intake ---------------- */
.intake-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:.9rem;margin-bottom:1rem}
.intake-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;position:relative;
  overflow:hidden;animation:rise .45s cubic-bezier(.16,1,.3,1) both;
}
.intake-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--line)}
.intake-card.has::before{background:var(--ok)}
.intake-card.need::before{background:var(--block)}
.intake-card header{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.intake-card h3{margin:0;font-size:.95rem;font-weight:600}
.intake-card p{margin:0;font-size:.8rem}
.intake-card .btn{align-self:flex-start;margin-top:auto}
.intake-meta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.intake-meta .field>span{font-size:.62rem}

/* ---------------- corrections ---------------- */
.corr-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem;padding:.7rem}
.corr-form .wide{grid-column:1/-1}
.corr-form .tall{grid-row:span 2}
.corr-form select[multiple]{min-height:7rem}
.corr-actions{display:flex;gap:.5rem;padding:0 .6rem .6rem}
.preview{border:1px solid var(--line);border-radius:var(--r);margin:.6rem;padding:.9rem;background:var(--surface-2)}
.preview.big{border-color:rgba(229,72,77,.45);background:rgba(229,72,77,.06)}
.preview-head{display:flex;align-items:center;gap:.6rem;font-size:.9rem;margin-bottom:.6rem}
.preview-head b{font-family:var(--mono);font-size:1.2rem;color:var(--amber)}
.preview-money{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;margin-bottom:.7rem;
  padding:.5rem .7rem;background:var(--surface);border-radius:var(--r)}
.preview-money b{color:var(--text)}
.preview-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.2rem;margin-bottom:.7rem}
.preview h4{margin:.2rem 0 .4rem;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}
.prow{display:flex;justify-content:space-between;gap:.6rem;font-size:.8rem;padding:.15rem 0;
  border-bottom:1px solid rgba(255,255,255,.04)}
.num.good{color:var(--ok)}
.num.bad{color:var(--block)}

.chip.INFERENCE{color:#B58BFF;background:rgba(181,139,255,.1)}
.inferred{color:#B58BFF;font-size:.72rem;margin-top:.2rem}
.finding.inferred-box{border-color:rgba(181,139,255,.3);background:rgba(181,139,255,.05)}

/* ---- completion bar (dashboard) ---------------------------------------- */
.bar {
  display: flex;
  height: 22px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line, #e6e9ef);
}
.bar-seg { display: block; height: 100%; transition: width .35s ease; }
.bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted, #667);
}
.bar-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-inline-end: 6px;
}

/* ---- project master table ---------------------------------------------- */
.input.sm { padding: 4px 6px; font-size: 12px; min-width: 110px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.note { margin: 0 0 12px; font-size: 13px; }
.bad { color: var(--block, #c0392b); }

/* ---- reconciliation: lost credit signs ---------------------------------- */
.recon-sign {
  flex-basis: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--block, #c0392b) 8%, transparent);
  border-inline-start: 3px solid var(--block, #c0392b);
  font-size: 13px;
  line-height: 1.7;
}
.recon-sign b { color: var(--block, #c0392b); }
.cell-wrap {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 320px;
  font-size: 12px;
}

/* ---- archive: raw sheet grid ------------------------------------------- */
table.grid { border-collapse: collapse; font-size: 12px; width: max-content; }
table.grid td {
  border: 1px solid var(--line, #e6e9ef);
  padding: 3px 8px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.grid td.rownum {
  background: var(--line, #f2f4f8);
  color: var(--muted, #667);
  text-align: center;
  position: sticky;
  inset-inline-start: 0;
  font-variant-numeric: tabular-nums;
}
table.grid tr:first-child td { font-weight: 600; background: color-mix(in srgb, var(--line, #e6e9ef) 40%, transparent); }
#arcSheets { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#arcSheetData { max-height: 60vh; overflow: auto; }

/* ---- intake: uploaded files and their removal ---------------------------- */
.intake-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--line, #e6e9ef) 45%, transparent);
  font-size: 12px;
}
.intake-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: start;
}
.btn.danger {
  border-color: color-mix(in srgb, var(--block, #c0392b) 45%, transparent);
  color: var(--block, #c0392b);
  background: transparent;
}
.btn.danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--block, #c0392b) 12%, transparent);
}

/* ---- month file: upload and its removal, side by side ------------------- */
.upload-group { display: inline-flex; align-items: center; gap: 8px; }