/* SUMMOW Digital HQ — governance console.
   One signature element: the decision rail (brass seals for approval tiers). Everything else stays quiet. */
:root {
  --paper: #F3F5F6;      /* mineral white */
  --surface: #FFFFFF;
  --ink: #14232B;        /* slate ink */
  --muted: #5B6B73;
  --line: #D9E0E3;
  --indigo: #2B3A67;     /* Muscat indigo — primary */
  --indigo-soft: #E6E9F2;
  --brass: #A8842C;      /* decision seals */
  --brass-soft: #F4EEDD;
  --green: #2E7D5B; --yellow: #B07F0B; --orange: #C2571A; --red: #A4262C;
  --radius-s: 4px; --radius-m: 8px;
  --head: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", "Times New Roman", serif;
  --body: "Noto Sans Arabic", "Segoe UI", "Geeza Pro", Tahoma, "DejaVu Sans", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10171C; --surface: #172129; --ink: #E4EAEE; --muted: #97A6AE; --line: #2A3740;
    --indigo: #9FB0E6; --indigo-soft: #222D45; --brass: #D4B25A; --brass-soft: #2E2814;
    --green: #5FBF92; --yellow: #E0B23E; --orange: #EE8A4F; --red: #EE6B71; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.65; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.3; margin: 0 0 .5rem; }
h1 { font-size: 1.95rem; }
h2 { font-size: 1.4rem; margin-top: 1.75rem; }
h3 { font-size: 1.12rem; }
p { max-width: 72ch; }
small, .muted { color: var(--muted); }

/* ---------- shell */
.shell { display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh; }
.side { background: var(--indigo); color: #EEF1F8; padding: 1.25rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { padding: 0 1.25rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: .75rem; }
.brand b { font-family: var(--head); font-size: 1.35rem; display: block; color: #fff; }
.brand span { font-size: .8rem; opacity: .75; }
.side nav a, .side nav .soon { display: flex; justify-content: space-between; align-items: center; padding: .5rem 1.25rem; color: #E3E8F4; font-size: .95rem; }
.side nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.side nav a.on { background: rgba(255,255,255,.12); border-inline-start: 3px solid var(--brass); color: #fff; }
.side nav .soon { opacity: .5; cursor: not-allowed; }
.side nav .soon em { font-style: normal; font-size: .72rem; }
.side .count { background: var(--brass); color: #1a1406; border-radius: 99px; padding: 0 .5rem; font-size: .75rem; font-weight: 700; }
.main { padding: 1.5rem 2rem 4rem; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.who { font-size: .9rem; color: var(--muted); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.envtag { border: 1px solid var(--orange); color: var(--orange); border-radius: var(--radius-s); padding: 0 .4rem; font-size: .78rem; }
.inline { display: inline; }

/* ---------- content blocks */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.facts li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .7rem .9rem; }
.facts b { display: block; font-size: 1.35rem; font-family: var(--head); overflow-wrap: anywhere; }
.facts .warn b { color: var(--red); }
.facts .nc b { font-size: 1rem; color: var(--muted); font-family: var(--body); font-weight: 600; }

/* ---------- decision rail (signature) */
.rail { list-style: none; margin: 0; padding: 0; position: relative; }
.rail::before { content: ""; position: absolute; inset-inline-start: 1.15rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--brass-soft); }
.rail li { display: grid; grid-template-columns: 2.3rem 1fr; gap: .8rem; padding: .55rem 0; position: relative; }
.seal { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-weight: 700;
        color: #fff; border: 3px double rgba(255,255,255,.75); box-shadow: 0 0 0 2px var(--brass); font-size: .95rem; position: relative; z-index: 1; }
.seal.RED { background: var(--red); } .seal.ORANGE { background: var(--orange); } .seal.YELLOW { background: var(--yellow); }
.seal.GREEN { background: var(--green); } .seal.CONFIG { background: var(--indigo); } .seal.RACI_OWNER { background: var(--brass); }
.rail .what { font-weight: 600; }
.rail .meta { font-size: .85rem; color: var(--muted); }
.overdue { color: var(--red); font-weight: 600; }

/* ---------- tables */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: start; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); padding: .45rem .5rem; white-space: nowrap; }
td { border-bottom: 1px solid var(--line); padding: .5rem; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.scroll { overflow-x: auto; }
.num { font-variant-numeric: tabular-nums; }
code, .code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .82rem; direction: ltr; unicode-bidi: isolate; }

/* ---------- status marks (tier = coloured edge, not a pill soup) */
.tier { display: inline-block; padding: 0 .45rem; border-inline-start: 4px solid; border-radius: 2px; font-size: .82rem; background: var(--paper); white-space: nowrap; }
.tier.RED { border-color: var(--red); } .tier.ORANGE { border-color: var(--orange); } .tier.YELLOW { border-color: var(--yellow); } .tier.GREEN { border-color: var(--green); }
.st { font-size: .82rem; white-space: nowrap; }
.st.ACTIVE, .st.APPROVED, .st.COMPLETED, .st.SUCCEEDED, .st.RESPONDED { color: var(--green); }
.st.DISABLED, .st.CANCELLED, .st.NOT_APPLICABLE { color: var(--muted); }
.st.PAUSED, .st.PENDING, .st.PENDING_CONSULTATION, .st.WAITING_APPROVAL, .st.REQUESTED { color: var(--yellow); }
.st.REJECTED, .st.FAILED, .st.BLOCKED, .st.DENIED, .st.DEAD { color: var(--red); }
.prio { font-weight: 700; font-size: .82rem; }
.prio.P1 { color: var(--red); } .prio.P2 { color: var(--orange); } .prio.P3 { color: var(--ink); } .prio.P4 { color: var(--muted); }
.src { font-size: .78rem; color: var(--muted); }
.src.PROPOSED, .src.BUILD_PROMPT { color: var(--orange); }

/* ---------- forms & buttons */
label { display: block; font-size: .88rem; color: var(--muted); margin: .5rem 0 .2rem; }
input[type=text], input[type=search], select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: .45rem .6rem; }
textarea { min-height: 5.5rem; resize: vertical; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 10rem; }
.btn { font: inherit; font-size: .92rem; border: 1px solid var(--indigo); background: var(--indigo); color: #fff; border-radius: var(--radius-s);
       padding: .42rem .95rem; cursor: pointer; }
.btn.quiet { background: transparent; color: var(--indigo); }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn.approve { background: var(--green); border-color: var(--green); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.flash { border-inline-start: 4px solid var(--green); background: var(--surface); padding: .6rem .9rem; margin-bottom: 1rem; border-radius: var(--radius-s); }
.flash.error { border-color: var(--red); }
.note { border-inline-start: 4px solid var(--brass); background: var(--brass-soft); padding: .6rem .9rem; border-radius: var(--radius-s); margin: .75rem 0; font-size: .92rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: 1rem 0; flex-wrap: wrap; }
.tabs a { padding: .45rem .9rem; color: var(--muted); border-bottom: 3px solid transparent; }
.tabs a.on { color: var(--ink); border-color: var(--brass); font-weight: 600; }
details summary { cursor: pointer; color: var(--indigo); }
pre.prompt { white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line); padding: 1rem; border-radius: var(--radius-s); max-height: 32rem; overflow: auto; font-size: .85rem; }
.empty { color: var(--muted); padding: .75rem 0; }

/* ---------- login */
.login { max-width: 34rem; margin: 8vh auto; padding: 0 1rem; }
.login h1 { font-size: 2.1rem; }
.login .who-list button { width: 100%; text-align: start; margin: .3rem 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.login .who-list button:hover { border-color: var(--indigo); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; }
  .side nav { display: flex; overflow-x: auto; }
  .side nav a, .side nav .soon { white-space: nowrap; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .grid2 > * { min-width: 0; }
  .kv { grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); }
  .row input[type="search"], .row input:not([type]) { min-width: 0; width: 100%; }
  .main { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }

/* ---------- stores & catalogue */
.stack { display: grid; gap: .45rem; max-width: 26rem; }
.stack input, .stack select { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); }
.stack .btn { justify-self: start; margin-top: .4rem; }
.narrow { max-width: 34rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--paper); display: block; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); }
.secret { font-size: 1.25rem; letter-spacing: .04em; user-select: all; }
.row input[type="search"], .row input:not([type]) { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); min-width: 14rem; }
.decide { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.decide input { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); min-width: 10rem; flex: 1; }
.count-badge { background: var(--brass); color: #1a1406; border-radius: 99px; padding: 0 .55rem; font-size: .85rem; font-family: var(--body); }

/* ---- task result cards (task page) ---- */
.result { display: grid; gap: .9rem; margin-bottom: 1.25rem; }
.rcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .95rem 1.15rem; }
.rcard > h3 { font-size: 1.05rem; margin: 0 0 .55rem; display: flex; align-items: center; gap: .5rem; }
.rcard h4 { font-family: var(--body); font-size: .95rem; margin: .7rem 0 .3rem; color: var(--ink); }
.rcard ol, .rcard ul { margin: .2rem 0 .2rem; padding-inline-start: 1.4rem; }
.rcard li { margin: .3rem 0; }
.rcard p { margin: .3rem 0; }
.rcard .lead { color: var(--muted); font-size: .9rem; }
.rcard.rec { border-inline-start: 4px solid var(--brass); }
.chip { display: inline-block; font-size: .8rem; padding: .08rem .55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; font-family: var(--body); font-weight: 600; }
.tone-ok { color: var(--green); } .tone-bad { color: var(--red); } .tone-warn { color: var(--yellow); }
.tone-info { color: var(--indigo); } .tone-muted { color: var(--muted); }
.acts { list-style: none; padding: 0 !important; margin: 0; }
.acts li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.acts li:last-child { border-bottom: 0; }
.acts code { font-size: .78rem; color: var(--muted); }
.alerts { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .45rem; }
.alerts li { border-inline-start: 4px solid currentColor; padding: .45rem .8rem; border-radius: var(--radius-s); background: var(--paper); }
.alerts li > span { color: var(--ink); }
.alerts small { display: block; }
.statusline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
details.tech summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
details.tech pre { direction: ltr; text-align: left; unicode-bidi: plaintext; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28rem; overflow: auto; }

/* ---- projects & analytics ---- */
progress.meter, progress.bt { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: .45rem; border: 0;
  border-radius: 999px; background: var(--line); overflow: hidden; min-width: 5rem; margin: .25rem 0; color: var(--indigo); }
progress.meter::-webkit-progress-bar, progress.bt::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
progress.meter::-webkit-progress-value, progress.bt::-webkit-progress-value { background: var(--indigo); border-radius: 999px; }
progress.meter::-moz-progress-bar, progress.bt::-moz-progress-bar { background: var(--indigo); border-radius: 999px; }
progress.meter.big { height: .7rem; }
progress.meter.hot::-webkit-progress-value { background: var(--orange); }
progress.meter.hot::-moz-progress-bar { background: var(--orange); }
.smallb { font-size: 1rem !important; }
.preline { white-space: pre-line; }
.alerts.spaced { margin-top: .6rem; }
.health { font-size: .8rem; font-weight: 600; }
.health.h-GREEN { color: var(--green); } .health.h-AMBER { color: var(--yellow); } .health.h-RED { color: var(--red); }
tr.archived td { opacity: .6; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: .6rem .9rem; }
.formgrid .wide { grid-column: 1 / -1; }
.formgrid input, .formgrid select, .formgrid textarea { width: 100%; box-sizing: border-box; }
form.inline { display: inline; }
.btn.small { padding: .15rem .55rem; font-size: .8rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); gap: .55rem; margin: .4rem 0; }
.kpis > div { background: var(--paper); border-radius: var(--radius-s); padding: .45rem .6rem; }
.kpis small { display: block; color: var(--muted); font-size: .78rem; }
.kpis b { font-size: 1.1rem; }
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.budget { display: grid; gap: .6rem; margin-bottom: .5rem; }
.blabel { display: flex; justify-content: space-between; gap: .5rem; font-size: .88rem; flex-wrap: wrap; }
.bars { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .35rem; }
.bars li { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr 3rem; align-items: center; gap: .5rem; }
.bars progress.bt { height: .65rem; min-width: 0; margin: 0; }
.bars .bv { text-align: end; }
svg.spark { display: block; width: 100%; height: auto; max-height: 7rem; margin: .4rem 0 .8rem; direction: ltr; }
svg.spark .sb { fill: var(--brass); }
svg.spark .sbase { fill: var(--line); }
svg.spark text { font-size: 9px; fill: var(--muted); font-family: var(--body); }
table.mini { width: 100%; font-size: .88rem; }
table.mini th { font-weight: 600; color: var(--muted); }
.prog { display: flex; align-items: center; gap: .4rem; min-width: 8rem; }
.prog .meter { flex: 1; }
@media (max-width: 600px) { .bars li { grid-template-columns: 6.5rem 1fr 2.5rem; } }