/* Hypatia Console: what the real app adds to the Open Design system (public/console.css, generated). Tokens only. */

/* Sign-in: one card on the surface, the mark on lime. */
.signin{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.signin-card{width:min(420px,100%);display:grid;gap:14px}
.signin-card h1{font-family:var(--font-display);font-weight:400;letter-spacing:-0.045em;line-height:1;font-size:40px}
.signin-card .sub{color:var(--muted);font-size:13.5px}
.signin-card .btn.wide{width:100%}
.signin-card .alert{display:grid;gap:8px;padding:12px 14px;border-radius:16px;background:var(--surface);font-size:13px}
.signin-card .dev{font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* A form's answer, under the form. */
.fmsg{font-size:12.5px;display:flex;align-items:center;gap:6px}
.fmsg.ok{color:var(--fg)}
.fmsg.ok svg{color:var(--accent-2)}
.fmsg.err{color:var(--red)}

/* A figure the console cannot read yet: says so instead of a number. */
.unmeasured{display:grid;gap:4px;place-items:start;padding:10px 12px;border-radius:14px;border:1px dashed var(--border);font-size:12px;color:var(--muted)}
.unmeasured b{font-family:var(--font-mono);font-weight:400;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}

/* Nav entries whose page lands in a later issue. */
.sb-link[aria-disabled="true"]{opacity:.55;cursor:default}
.sb-link[aria-disabled="true"]:hover{background:none}
@media (max-width:760px){
  .dock > span[aria-disabled="true"]{flex:1;display:grid;justify-items:center;gap:3px;padding:8px 0 6px;border-radius:18px;font-size:11px;color:color-mix(in srgb, var(--bg) 38%, transparent);position:relative;min-height:52px}
}

/* Run rows on the Overview: live (name · status · cap · who · age) and finished (name · status · cap · date). */
.lr.hy.run{grid-template-columns:minmax(0,1.5fr) 140px minmax(90px,1fr) minmax(110px,1fr) 44px}
.lr.hy.done{grid-template-columns:minmax(0,1.6fr) 120px minmax(90px,1fr) 64px}
.lr.hy .stc{min-width:0}
@media (max-width:760px){
  .lr.hy.run,.lr.hy.done{grid-template-columns:minmax(0,1fr) auto!important;row-gap:6px}
  .lr.hy .stc{display:block;grid-column:2;grid-row:1}
  .lr.hy .mbar{grid-column:1/-1}
  .lr.hy .age{display:none}
}

/* Stage durations on Runs: a p95 track with the p50 bar on top. */
.sdur{display:grid;gap:6px}
.sdur-r{display:grid;grid-template-columns:minmax(0,130px) minmax(60px,1fr) 64px 64px;gap:10px;align-items:center;font-size:12px}
.sdur-r .lab{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdur-r .n{font-size:11px;text-align:right;white-space:nowrap}
.sdur-t{position:relative;height:10px;border-radius:5px;background:var(--surface);overflow:hidden}
.sdur-t i{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.sdur-t .p95{background:color-mix(in srgb, var(--accent-2) 30%, var(--bg))}
.sdur-t .p50{background:var(--accent-2)}
@media (max-width:760px){.sdur-r{grid-template-columns:minmax(0,1fr) 56px 56px}.sdur-t{grid-column:1/-1;order:3}}

/* Run page: the stage waterfall (one row per stage, a bar per stage run), the events / decisions feeds, inline confirms. */
.swf{display:grid}
.swf-r{display:grid;grid-template-columns:minmax(0,150px) minmax(140px,1fr) 70px 80px;gap:12px;align-items:center;min-height:30px;border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent);font-size:12px}
.swf-h{font-family:var(--font-mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.swf-n{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swf-t,.swf-ax{position:relative;height:16px}
.swf-t{border-radius:5px;background:color-mix(in srgb, var(--surface) 80%, transparent);overflow:hidden}
.swf-t i{position:absolute;top:2px;bottom:2px;border-radius:3px;opacity:.85}
.swf-ax i{position:absolute;transform:translateX(-50%);font-style:normal;white-space:nowrap}
.swf-ax i:first-child{transform:none}.swf-ax i:last-child{transform:translateX(-100%)}
.swf-r .r{text-align:right}
.swf .fl,.proll .fl{color:var(--red);font-weight:500}
.feed{display:grid;max-height:420px;overflow:auto}
.feed-r{display:grid;grid-template-columns:96px auto minmax(0,1fr);gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent);font-size:12px}
.feed-r .mono{font-size:11px}
.feed-i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ract-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ract-form .inp{height:30px;width:min(260px,100%);font-size:12px}
@media (max-width:760px){
  .swf-r{grid-template-columns:minmax(0,1fr) 56px 64px}
  .swf-t{grid-column:1/-1;order:3}
  .swf-h .swf-ax{display:none}
  .feed-r{grid-template-columns:auto minmax(0,1fr)}
  .feed-r > :first-child{grid-column:1/-1}
}

/* Segmented tabs that navigate (links), styled as the design's buttons. */
.segtabs a{height:34px;padding:0 12px;border-radius:10px;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background-color .2s,color .2s}
.segtabs a:hover{color:var(--fg)}
.segtabs a[aria-current="page"]{background:var(--fg);color:var(--bg)}
.segtabs.soft a[aria-current="page"]{background:var(--bg);color:var(--fg);box-shadow:0 1px 3px color-mix(in srgb, var(--fg) 16%, transparent)}

/* Sources: the register per programme, intakes with their documents. */
.regs{display:grid;gap:14px}
.reg-r{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;align-items:start}
.reg-r > span:last-child{display:grid;gap:6px;min-width:0}
.reg-p{display:grid;line-height:1.2}
.reg-p b{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:-.03em}
.reg-p small{font-size:10.5px;color:var(--muted)}
.itab{display:grid}
.irow{display:grid;grid-template-columns:40px minmax(0,2fr) 48px 140px 70px minmax(110px,1fr) 100px;gap:12px;align-items:center;min-height:56px;padding:6px 4px;border-bottom:1px solid var(--border);font-size:12.5px}
.iblock.open .irow{border-bottom-color:transparent}
.iblock.open .pexb svg{transform:rotate(90deg)}
.idocs{display:grid;margin:0 0 10px 44px;padding:6px 10px;border-radius:16px;background:color-mix(in srgb, var(--surface) 55%, var(--bg))}
.idoc{display:grid;grid-template-columns:18px minmax(0,1fr) auto 130px 64px;gap:10px;align-items:center;min-height:44px;border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent);font-size:12.5px}
.idoc:last-child{border-bottom:0}
.idoc svg{color:var(--muted)}
@media (max-width:900px){
  .irow{grid-template-columns:40px minmax(0,1fr) auto;row-gap:6px}
  .irow > :nth-child(3),.irow > :nth-child(5),.irow > :nth-child(7){display:none}
  .irow .mbar{grid-column:2/-1}
  .idocs{margin-left:0}
  .idoc{grid-template-columns:18px minmax(0,1fr) auto}
  .idoc > :nth-child(3),.idoc > :nth-child(5){display:none}
  .reg-r{grid-template-columns:minmax(0,1fr)}
}

/* Long subjects: two lines, then an ellipsis (the full text is the title). */
.ptab .pnm b,.itab .nmcell b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cbar.wide{grid-template-columns:minmax(0,130px) minmax(0,1fr) 70px}
.cbar.wide > span:first-child{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Engine pages: spend chart, failure cards, provider grid, lanes, key/value lists. */
.schart svg{width:100%;display:block}
.schart-x{display:flex;font-family:var(--font-mono);font-size:9.5px;color:var(--muted);margin-top:4px}
.schart-x span{flex:1;text-align:left;white-space:nowrap;overflow:visible}
.cbars{display:grid;gap:2px}
.fgrid{display:grid;gap:8px}
.fcard{border:1px solid var(--border);border-radius:16px;background:var(--bg)}
.fcard[open]{box-shadow:0 1px 3px color-mix(in srgb, var(--fg) 8%, transparent)}
.fcard summary{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(120px,220px);gap:14px;align-items:center;padding:10px 14px;cursor:pointer;list-style:none}
.fcard summary::-webkit-details-marker{display:none}
.fc-n{font-family:var(--font-display);font-size:26px;letter-spacing:-.04em;color:var(--red);text-align:right}
.fc-t{display:grid;gap:4px;min-width:0}
.fc-t b{font-weight:500;font-size:13px;word-break:break-word}
.fc-t small{font-size:10.5px}
.fc-x{display:grid;gap:6px;padding:0 14px 14px 92px}
.fc-x code{font-size:11px;word-break:break-all}
.fc-x pre{font-size:11px;white-space:pre-wrap;word-break:break-word;margin:0;padding:10px;border-radius:12px;background:var(--surface);max-height:220px;overflow:auto}
.fc-x .btn{justify-self:start}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap)}
.route-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:3px 0}
.frow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lane{display:grid;gap:10px}
.lane-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lane-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--gap)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.kv > span{display:grid;gap:2px;padding:8px 10px;border-radius:12px;background:var(--surface);min-width:0}
.kv b{font-weight:400;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.facets a.fchip[aria-current="page"]{background:var(--fg);color:var(--bg)}
tr.undone td{opacity:.55}
@media (max-width:760px){
  .fcard summary{grid-template-columns:52px minmax(0,1fr)}
  .fc-c{grid-column:1/-1}
  .fc-x{padding-left:14px}
  .frow3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.kpi{overflow:hidden}
.kpi .row{min-width:0;flex-wrap:wrap;row-gap:4px}
/* A figure keeps its whole width: on a narrow card the chip beside it wraps below instead of eating it (HAL-3286). */
.kpi .row .delta2{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi .row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Content pages: releases grid, question items, worked answer, coverage table, intel. */
.relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap)}
.qitems-l{display:grid;gap:6px;padding:0;margin:12px 0;list-style:none}
.qitems-l li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;font-size:14px;padding:8px 10px;border-radius:12px;background:var(--surface)}
.solbox{margin-top:12px;border:1px dashed var(--border);border-radius:14px;padding:10px 12px}
.solbox summary{cursor:pointer;display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.kv.sol{margin-top:10px;grid-template-columns:minmax(0,1fr)}
.kv.sol pre{white-space:pre-wrap;word-break:break-word;margin:4px 0 0;font-size:12px;line-height:1.5}
.itop{display:grid}
.itop-r{border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent)}
.itop-r summary{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(120px,180px);gap:12px;align-items:center;padding:8px 0;cursor:pointer;list-style:none}
.itop-r summary::-webkit-details-marker{display:none}
.itop-k{font-size:12px;color:var(--muted)}
.itop-t{display:grid;gap:2px;min-width:0}
.itop-t b{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itop-t small{font-size:10.5px}
.itop-s{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:8px;align-items:center;font-size:11px}
.itop-x{display:grid;gap:6px;padding:0 0 10px 52px}
.itop-q{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;font-size:12.5px}
.mperiod .cbar.wide{grid-template-columns:70px minmax(0,1fr) 40px}
@media (max-width:760px){.itop-r summary{grid-template-columns:32px minmax(0,1fr)}.itop-s{grid-column:1/-1}.itop-x{padding-left:0}}
.chips.wrapchips .chip{white-space:normal;height:auto;min-height:24px;padding:3px 9px;line-height:1.35}
.feed-r.v2{grid-template-columns:auto minmax(0,1fr)}
.feed-r.v3{grid-template-columns:auto minmax(0,1fr) auto}
.feed-r.v4{grid-template-columns:auto auto minmax(0,1fr) auto}
.feed-r.v3 > *,.feed-r.v4 > *{min-width:0;overflow-wrap:anywhere}
@media (max-width:760px){
  .feed-r.v3,.feed-r.v4{grid-template-columns:auto minmax(0,1fr)}
  .feed-r.v2 > :first-child{grid-column:auto}
}

/* A run's name is a link: the link must shrink and truncate too, or a long name runs over the status and the meter. */
.lr .nm > a{display:block;min-width:0;overflow:hidden}
.lr .nm > a b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr > *{min-width:0}