/* W-024 (WENH-001): the Darb CI dashboard on admin.darblabs.com. Darb Labs' own type and colours
   (DESIGN-SPEC section 3: Georgia serif headings and wordmark, system sans text, forest, ivory and
   brass), light and dark. No inline styles anywhere: the CSP allows none; bar widths are set from
   ci.js through the CSSOM. Readable from 320 px and at 200% text. */
:root{
  --bg:#FAF7EF;--surface:#FFFDF8;--ink:#173E34;--muted:#52645D;--line:#DDE2D9;--green:#124C3D;--deep:#0B3028;
  --gold:#AE8843;--goldink:#775C30;--goldsurf:#FBF1DC;--sage:#EAEBDC;--error:#9B3328;--errsurf:#F6E7DF;--focus:#875F17;
  --umrah:#124C3D;--family:#2F6F8F;--ramadan:#AE8843;--website:#6B4F8A;--track:#E3E6DA;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--serif:Georgia,"Times New Roman",serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0D221C;--surface:#132E27;--ink:#F2ECDD;--muted:#B9C6BE;--line:#2C4A40;--green:#8BD3B1;--deep:#081A15;
    --gold:#E6CC9E;--goldink:#E6CC9E;--goldsurf:#2E2817;--sage:#1A3A31;--error:#F4A49A;--errsurf:#3A1F1B;--focus:#E6CC9E;
    --umrah:#8BD3B1;--family:#8CC3DE;--ramadan:#E6CC9E;--website:#C9B2E6;--track:#24443A;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--sans);min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2,h3,p,ul,ol,dl{margin-top:0}
h1{font:400 clamp(2.25rem,5vw,3.25rem)/1.08 var(--serif);letter-spacing:-.03em;margin-bottom:.4rem}
h2{font:700 .8rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--goldink);margin:2.2rem 0 .8rem}
h3{font-size:1rem;margin:0}
.wrap{max-width:1220px;margin:0 auto;padding:0 40px}
.skip{position:absolute;top:-80px;left:16px;z-index:9;background:var(--surface);color:var(--ink);padding:12px}
.skip:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
[hidden]{display:none!important}
.fine{font-size:.875rem;color:var(--muted)}
.eyebrow{text-transform:uppercase;font-size:.75rem;letter-spacing:.16em;font-weight:700;color:var(--muted);margin-bottom:.6rem}
.lede{font-size:1.1rem;color:var(--muted);max-width:38rem}

/* Header: the Darb Labs mark (on its ivory tile, so it reads in dark mode too) and wordmark */
.top{border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;min-height:80px;padding-top:10px;padding-bottom:10px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand img{width:44px;height:44px;border-radius:11px;display:block}
.word{font:1.75rem/1 var(--serif);letter-spacing:-.05em;white-space:nowrap}
.word .labs{font-style:italic}
.tag{font:700 .75rem/1 var(--sans);letter-spacing:.12em;border:1px solid var(--gold);color:var(--goldink);background:var(--goldsurf);border-radius:999px;padding:5px 9px}
.account{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.account .fine{overflow-wrap:anywhere}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--green);border-radius:9px;padding:9px 17px;text-decoration:none;font:600 .95rem/1.2 var(--sans);background:var(--green);color:var(--bg);cursor:pointer}
.btn.ghost{background:transparent;color:var(--green);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--green)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:1.6rem 0}

.msg{padding-top:3rem;padding-bottom:3rem}
.ci{padding-top:1.8rem;padding-bottom:3rem}
.intro{margin-bottom:1rem}
.status-row{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.status{font-weight:600;margin:0}
.status::before{content:'';display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--muted);margin-right:.45em;vertical-align:.05em}
.status.live::before{background:var(--green)}
.status.bad{color:var(--error)}
.status.bad::before{background:var(--error)}
#fresh{margin:0}
.legend{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.875rem}
.legend li{display:inline-flex;align-items:center;gap:6px}
.dot{display:inline-block;width:.7em;height:.7em;border-radius:3px;flex:none;background:var(--muted)}
.app-umrah{--app:var(--umrah)}.app-family{--app:var(--family)}.app-ramadan{--app:var(--ramadan)}.app-website{--app:var(--website)}
.dot[class*=app-]{background:var(--app)}

/* Server numbers */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr));gap:10px;margin:0}
.stats div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:0}
.stats dt{font-size:.85rem;color:var(--muted);line-height:1.3}
.stats dd{margin:2px 0 0;font:600 1.45rem/1.25 var(--sans);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats .warn{border-color:var(--error);background:var(--errsurf)}
.flag{display:block;font:700 .75rem/1.3 var(--sans);color:var(--error);text-transform:uppercase;letter-spacing:.08em}

/* Slots */
.slots{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* Six slots: three columns on a wide screen, two on a tablet, one on a phone. */
@media (min-width:540px){.slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.slot{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 18px;min-width:0;overflow:hidden}
.slot::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--app,transparent)}
.slot.free{border-style:dashed;color:var(--muted);background:transparent}
.slot h3{font:600 .8rem/1.3 var(--sans);color:var(--muted);letter-spacing:.04em}
.slot .job{font-weight:600;margin:.35rem 0 .1rem;overflow-wrap:anywhere}
.slot p{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:.4rem}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;padding:1px 9px 1px 7px;border-radius:999px;border:1px solid var(--line);background:var(--bg);white-space:nowrap}
.chip::before{content:'';width:.6em;height:.6em;border-radius:2px;background:var(--app,var(--muted))}
.chip.fast{border-color:var(--gold);background:var(--goldsurf);color:var(--goldink)}
.chip.fast::before{display:none}
.big{font-weight:700;font-variant-numeric:tabular-nums}
.empty{color:var(--muted);padding:12px;border:1px dashed var(--line);border-radius:12px;list-style:none;background:transparent}

/* Queues */
.queue{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.queue li.item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.pos{font:700 1.15rem/1 var(--sans);text-align:center;font-variant-numeric:tabular-nums}
.what{min-width:0;overflow-wrap:anywhere}
.when{font-variant-numeric:tabular-nums;white-space:nowrap}
.note{background:var(--goldsurf);border:1px solid var(--gold);border-radius:12px;padding:10px 14px;margin:0 0 10px}
.note.bad{background:var(--errsurf);border-color:var(--error)}

/* Runs */
.runs{display:grid;gap:10px}
.run{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.run h3{font-size:1rem;overflow-wrap:anywhere;margin-top:.35rem}
.run .meta{margin:.15rem 0 0}
.bar{height:12px;border-radius:999px;background:var(--track);overflow:hidden;margin:.7rem 0 .5rem}
.bar span{display:block;height:100%;width:0;background:var(--green);transition:width .6s}
.bar.failed span{background:var(--error)}
.facts{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0;font-size:.9rem;color:var(--muted)}
.facts b{color:var(--ink)}
.err{color:var(--error);font-weight:600}
.jobs{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:5px}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;padding:3px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg);text-decoration:none;min-height:30px;overflow-wrap:anywhere}
.pill .mark{font-weight:700}
.pill.success{border-color:var(--green)}.pill.success .mark{color:var(--green)}
.pill.failure,.pill.cancelled,.pill.timed_out{border-color:var(--error);color:var(--error)}
.pill.in_progress{background:var(--goldsurf);border-color:var(--gold)}.pill.in_progress .mark{color:var(--goldink)}
.pill.queued,.pill.waiting,.pill.pending,.pill.requested{color:var(--muted);border-style:dashed}

/* Recently finished */
.table{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
caption{text-align:left}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.8rem;color:var(--muted);font-weight:600}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td{font-variant-numeric:tabular-nums}
td.job{overflow-wrap:anywhere;min-width:9rem}

/* W-026 (WENH-002): failures. A card per failed job: the icon and headline say what happened, the
   colour family repeats it (red: fix in the code; amber: the CI system or a service; grey: no verdict). */
.icon{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}
.fail-count{margin:0;font-weight:600}
.fail-count a,.fail-count span{display:inline-flex;align-items:center;gap:6px}
.fail-count span{color:var(--green)}
.fail-count.has a{color:var(--error);border:1px solid var(--error);background:var(--errsurf);border-radius:999px;padding:2px 12px 2px 9px;text-decoration:none}
.fail-count.has a:hover{text-decoration:underline}
.fail-runs{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.fail-run{min-width:0}
.fail-run h3{font-size:1rem;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.fail-run > .fine{margin:.2rem 0 .5rem}
.fails{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.fails{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fail{--fam:var(--muted);--famsurf:var(--sage);position:relative;display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--fam);border-radius:12px;padding:12px 14px;min-width:0}
.fail.fam-red{--fam:var(--error);--famsurf:var(--errsurf)}
.fail.fam-amber{--fam:var(--goldink);--famsurf:var(--goldsurf)}
.fail-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:10px;background:var(--famsurf);color:var(--fam)}
.fail-icon .icon{width:26px;height:26px}
.fail-body{min-width:0;flex:1}
.fail h4{font:700 1.1rem/1.25 var(--sans);margin:0 0 .2rem;color:var(--ink)}
.fail-where{margin:0;font-size:.9rem;overflow-wrap:anywhere}
.fail-where .step{color:var(--muted)}
.fail-lines{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:4px}
.fail-lines code{display:block;font:.8rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:4px 8px;overflow-wrap:anywhere;white-space:pre-wrap}
.fail-hint{margin:.45rem 0 0;font-size:.875rem;color:var(--muted)}
.fail-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:.4rem 0 0;font-size:.9rem;font-weight:600}
.fail-links a{display:inline-flex;align-items:center;min-height:32px}
.badge-failed{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:700;padding:1px 9px 1px 6px;border-radius:999px;border:1px solid var(--error);background:var(--errsurf);color:var(--error);text-decoration:none;white-space:nowrap}
.badge-failed .icon{width:1.1em;height:1.1em}
@media (max-width:420px){.fail{padding:10px 10px;gap:10px}.fail-icon{width:36px;height:36px}.fail-icon .icon{width:22px;height:22px}}

.foot{border-top:1px solid var(--line);padding:18px 0 calc(28px + env(safe-area-inset-bottom));font-size:.875rem;color:var(--muted)}
.foot p{margin:0}

@media (max-width:760px){.wrap{padding:0 20px}.word{font-size:1.5rem}}
@media (max-width:420px){
  .wrap{padding:0 16px}
  .queue li.item{grid-template-columns:2em minmax(0,1fr)}
  .queue li.item .when{grid-column:2}
  /* The finished jobs become one card each. */
  .table{border:0;background:transparent}
  .table table,.table tbody,.table tr,.table th,.table td{display:block;width:100%}
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .table tr{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:8px;background:var(--surface)}
  .table th,.table td{border:0;padding:2px 0}
  .table [data-label]::before{content:attr(data-label) ': ';font-size:.8rem;color:var(--muted);font-weight:600}
}
@media (prefers-reduced-motion:reduce){.bar span{transition:none}}