/* Arc Reactor: shared tokens and components. */
@font-face{font-family:'Space Grotesk';font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/SpaceGrotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/SpaceGrotesk-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/IBMPlexMono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/IBMPlexMono-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-500.woff2) format('woff2')}

:root{
  --bg:#0B0F14;--pn:#111820;--ln:#1F2A36;--ln2:#2E3E52;--tx:#E6EDF3;--mu:#8B98A5;
  --cy:#5FE3FF;--ok:#3DDC97;--wa:#FFB454;--fa:#FF5D5D;
  --sans:Inter,system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--head:'Space Grotesk',Inter,sans-serif;
  --r:12px;--pad:16px;--gap:12px;  /* the card system: radius, inner padding, gap between cards */
  color-scheme:dark;  /* native menus, scrollbars and pickers stay dark */
}
@media (min-width:768px){:root{--gap:16px}}
body{background:var(--bg);color:var(--tx);font:15px/22px var(--sans);max-width:none;margin:0;padding:0 0 calc(72px + env(safe-area-inset-bottom))}
a{color:var(--cy)}
h1,h2,h3{font-family:var(--head);font-weight:500;color:var(--tx)}
h1{font-size:24px;line-height:32px;margin:16px 0 12px}
.mono{font-family:var(--mono)}
.muted{color:var(--mu)}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--cy)}
.btn.f:focus-visible,.btn.danger:focus-visible{box-shadow:none;outline:2px solid var(--tx);outline-offset:2px}

/* layout: phone <768 (tabs, one column), tablet 768-1199 (same, max 720), laptop >=1200 (rail) */
.main{max-width:760px;margin:0 auto;padding:8px 20px 24px;box-sizing:border-box}
.statusline .crumb,.statusline .meta{display:none}
.statusline{position:sticky;top:0;z-index:5;max-width:760px;margin:0 auto;height:40px;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--bg);border-bottom:1px solid var(--ln);color:var(--mu);font-size:14px}
.statusline .sp{flex:1}
/* the command-bar opener: an icon on the phone, a search box on the laptop */
.cmd{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:32px;min-width:32px;padding:0 8px;box-sizing:border-box;border:1px solid var(--ln2);border-radius:8px;background:transparent;color:var(--mu);font-size:14px;white-space:nowrap;cursor:pointer}
.cmd .ic{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cmd .ct,.cmd .sp,.cmd kbd{display:none}
.cmd{overflow:hidden}
.cmd .ct{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cmd kbd{flex-shrink:0}
.rail{display:none}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;height:calc(60px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:var(--bg);border-top:1px solid var(--ln)}
.tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;color:var(--mu);text-decoration:none;font-size:14px;line-height:16px}
.tab .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tab .badge{position:absolute;top:2px;left:50%;margin-left:6px}
.tab.on{color:var(--cy)}
.tab.on::before{content:'';position:absolute;top:-1px;left:50%;width:28px;margin-left:-14px;height:2px;background:var(--cy)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--cy);color:var(--bg);font:500 14px/20px var(--mono);text-align:center;vertical-align:baseline;margin-left:4px}
@media (min-width:1200px){
  body{padding:0 0 0 88px}
  .main{max-width:1164px;margin:0;padding:24px 32px 32px}
  /* the top bar spans exactly the content column: 1100 + 2 x 32 */
  .statusline{max-width:1164px;margin:0;height:72px;padding:24px 32px 0;box-sizing:border-box;gap:24px;border-bottom:0}
  .statusline .crumb{display:block;flex:0 0 240px;font:500 20px/28px var(--head);color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .statusline .crumb a{text-decoration:none}
  .statusline .crumb .cn{font-weight:500}
  .cmd{justify-content:flex-start;width:420px;padding:0 12px}
  .cmd .ct{display:inline}
  .cmd .sp{display:block;flex:1}
  .cmd kbd{display:inline-block;margin:0}
  .statusline .pill{height:32px;padding:0 14px}
  .statusline .meta{display:block;white-space:nowrap}
  .main .pt h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}  /* the top bar names the page */
  .main .pt{justify-content:flex-end;min-height:24px;margin:0 0 8px}
  .main .back{display:none}  /* the top bar crumb links back */
  .tabs{display:none}
  .rail{display:flex;flex-direction:column;align-items:center;gap:4px;position:fixed;left:0;top:0;bottom:0;width:88px;padding:16px 0 20px;border-right:1px solid var(--ln);background:var(--bg)}
  .mark{width:32px;height:32px;border:1.5px solid var(--ln2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
  .mark i{width:8px;height:8px;border-radius:50%;background:var(--cy);display:block}
  .ri{width:76px;height:62px;display:flex;align-items:center;justify-content:center;gap:2px;position:relative;border-radius:8px;color:var(--mu);text-decoration:none;font-size:14px}
  .ri{flex-direction:column;gap:4px;position:relative}
  .ri .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .ri .badge{position:absolute;top:4px;right:6px;margin:0}
  .rk{margin-top:auto;font-size:14px}
  .ri:hover{background:var(--pn)}
  .ri.on{color:var(--cy)}
  .ri.on::before{content:'';position:absolute;left:-6px;top:15px;width:2px;height:32px;background:var(--cy)}
}

/* command bar (every width) */
.cmdk{display:none}
.cmdk:not([hidden]){display:flex;position:fixed;inset:0;z-index:20;align-items:flex-start;justify-content:center;padding-top:8vh;background:rgba(5,8,11,.86)}
.cbox{width:560px;max-width:92vw;max-height:80vh;box-sizing:border-box;display:flex;flex-direction:column;background:var(--pn);border:1px solid var(--ln2);border-radius:10px;padding:16px}
.clbl{display:block;font:500 14px/20px var(--head);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
#cmdk-in{width:100%;box-sizing:border-box;height:40px;margin:0;padding:0 12px;background:var(--bg);color:var(--tx);border:1px solid var(--ln2);border-radius:8px;font:15px var(--mono)}
.cres{margin-top:8px;overflow-y:auto;min-height:0}
.cr{display:flex;justify-content:space-between;align-items:center;gap:12px;height:36px;padding:0 12px;border-radius:6px;border-left:2px solid transparent;cursor:pointer}
.cr.on{background:var(--bg);border-left-color:var(--cy)}
.cmsg{margin:8px 0 0;font-size:14px}
.cmsg:empty{display:none}
.chint{margin:8px 0 0;font-size:14px}
@media (min-width:1200px){.cmdk:not([hidden]){padding-top:14vh}}

/* Cards: ONE card system on every page and width. Same radius, border, padding and header row (title left, meta
   right); cards stack with the same gap. .p is the card; .c is the same card for a question/task/instruction item. */
.p,.c{background:var(--pn);border:1px solid var(--ln);border-radius:var(--r);padding:var(--pad);margin:0 0 var(--gap);transition:border-color .15s;box-sizing:border-box;min-width:0}
.p:hover,.c:hover{border-color:var(--ln2)}
.p h4,.sh{margin:0 0 12px;font:500 14px/20px var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--mu);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.p h4 span,.sh span{letter-spacing:0;text-transform:none;font-family:var(--sans);font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.p h4 .ph{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p>p:first-of-type:not(:first-child){margin-top:0}
.p>p:last-child,.p>.row:last-child{margin-bottom:0}
.p .row:last-child,.p .ar:last-child,.p .mr:last-child,.p .pr:last-child{border-bottom:0}
.p>.row:first-of-type,.p>.ar:first-of-type,.p>.mr:first-of-type,.p>.pr:first-of-type{padding-top:0}
.p>.mr:first-of-type,.p>.pr:first-of-type{padding-top:0}
.p>.ub:last-child{margin-bottom:0}
.p .note{margin:12px 0 0;font-size:14px;color:var(--mu)}
.p .acts-r{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.cols{display:block}
@media (min-width:1200px){
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
  .cols.side{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
  .cols>.col{min-width:0}
}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ln)}
.row:last-child,.row.nb{border-bottom:0}
.row p{margin:0}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--mu)}
.dot.busy{background:var(--cy)}.dot.ok{background:var(--ok)}.dot.wait{background:var(--wa)}.dot.fail{background:var(--fa)}
.pill{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid var(--ln);border-radius:999px;white-space:nowrap;font:14px var(--sans);color:var(--tx)}
kbd{font:14px/18px var(--mono);display:inline-block;padding:0 6px;border:1px solid var(--ln2);border-radius:4px;color:var(--tx);margin-right:4px}
.empty{margin:0;text-align:left;color:var(--mu)}
.main>.empty{margin:8px 0 var(--gap)}
.main>.sh{margin:20px 0 10px}
.main>.sh:first-child,.pt+.sh{margin-top:4px}
.pt{margin-bottom:4px}
.empty::before{content:'\2713';color:var(--ok);margin-right:8px}

/* buttons: filled cyan for the main action, outline for the rest */
.btn,button{font:500 15px var(--sans)}
.btn{display:inline-flex;align-items:center;justify-content:center;width:auto;height:40px;margin:0;padding:0 16px;border-radius:8px;border:1px solid var(--ln2);background:transparent;color:var(--tx);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn.f{background:var(--cy);border-color:var(--cy);color:var(--bg)}
.btn.l{background:transparent;border-color:var(--ln2);color:var(--tx)}
.btn.danger{background:transparent;border-color:var(--fa);color:var(--fa)}
.btn.sm{height:32px;padding:0 12px;font-size:14px;border-radius:6px}


/* Page head, forms, items (Questions, Tasks, Projects), sign-in and error pages */
.pt{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pt .muted{white-space:nowrap}
.c .src{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--mu);margin-bottom:4px;font-size:14px}
.c .src .mono{white-space:nowrap}
.c .txt{font-size:16px;line-height:24px;overflow-wrap:anywhere}
.c .sub{color:var(--mu);margin-top:2px}
.c .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.c form.acts .btn{flex:1 1 auto}
.c .acts form{margin:0;flex:1 1 auto;display:flex}
.c .acts form .btn{flex:1}
.c.done{border-style:dashed;color:var(--mu)}
.c.done .txt{font-size:15px}
.c form.own{display:flex;gap:8px;margin-top:8px;align-items:center}
.c form.own input{margin:0}
.c form.own .btn{flex:none}
.c details{margin-top:4px}
.c pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0 0}
input,textarea,select{width:100%;box-sizing:border-box;padding:10px 12px;margin:4px 0;border:1px solid var(--ln2);border-radius:8px;background:var(--bg);color:var(--tx);font:15px/22px var(--sans)}
select{width:auto;height:40px;padding:0 10px;cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--mu)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cy)}
textarea{resize:vertical}
.fm .btn{margin-top:8px}
.fm .fl{margin-top:8px}
details summary{color:var(--mu);cursor:pointer;margin:8px 0 0}
.msg{color:var(--mu);min-height:22px}
.auth{max-width:400px;margin:12vh auto 0}
.auth .mark{width:32px;height:32px;border:1.5px solid var(--ln2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.auth .mark i{width:8px;height:8px;border-radius:50%;background:var(--cy);display:block}
.auth h1{margin:0 0 8px}
.auth .btn{margin-top:12px}
.auth .sub{color:var(--mu);margin:0}
.auth.err{margin:16px 0 0;max-width:560px}
.auth.err .sh{margin:0 0 4px}

/* Deadline control (Tasks): a dark day picker and 24 h hour/minute selects. Without JS the raw field still posts
   the same YYYY-MM-DDTHH:MM value. */
.dl{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0}
.dl .dl-raw{margin:0}
.dl-day{display:inline-flex;align-items:center;gap:10px;height:40px;flex:1 1 128px;max-width:220px;min-width:0;padding:0 12px;box-sizing:border-box;border:1px solid var(--ln2);border-radius:8px;background:var(--bg);color:var(--tx);font:15px var(--sans);cursor:pointer;text-align:left}
.dl-day .ic{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--mu);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dl-day.empty-v span{color:var(--mu)}
.dl-time{display:inline-flex;align-items:center;gap:4px;color:var(--mu)}
.dl-time select{margin:0;padding:0 6px;font-family:var(--mono);text-align:center}
.dl-x{height:40px;width:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--mu);font:20px/1 var(--sans);cursor:pointer}
.dl-x:hover{color:var(--tx)}
.dl-x[hidden]{display:none}
.dl-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:15;width:300px;max-width:calc(100vw - 40px);box-sizing:border-box;padding:12px;background:var(--pn);border:1px solid var(--ln2);border-radius:var(--r)}
.dl-pop[hidden]{display:none}
.dl-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font:500 15px/22px var(--head)}
.dl-hd button{width:32px;height:32px;padding:0;border:1px solid var(--ln2);border-radius:6px;background:transparent;color:var(--tx);font:18px/1 var(--sans);cursor:pointer}
.dl-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.dl-grid .wd{font-size:14px;color:var(--mu);line-height:28px}
.dl-grid button{height:36px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--tx);font:14px var(--mono);cursor:pointer}
.dl-grid button:hover{background:var(--bg);border-color:var(--ln2)}
.dl-grid button.out{color:var(--mu);opacity:.55}
.dl-grid button.past{color:var(--mu)}
.dl-grid button.today{border-color:var(--ln2)}
.dl-grid button.on{background:var(--cy);border-color:var(--cy);color:var(--bg)}
.dl-ft{display:flex;gap:8px;margin-top:10px}
.dl-ft .btn{flex:1}

/* Rows inside cards: Agents, Usage, System, More, Devices, Finances and views */
.back{display:inline-block;color:var(--cy);text-decoration:none;font-size:15px;margin-top:8px}
.grow{flex:1;min-width:0}
.two{display:flex;flex-direction:column;min-width:0}
.two>span:first-child{overflow-wrap:anywhere}
.two .mono{font-size:14px}
.ar{display:grid;grid-template-columns:minmax(80px,auto) 1fr auto;align-items:baseline;gap:12px;min-height:44px;padding:10px 0;border-bottom:1px solid var(--ln);margin:0}
.ar .an{font-weight:500;white-space:nowrap}
.ar .al{color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar .at{color:var(--mu);white-space:nowrap}
.ar.bad .al{color:var(--wa)}
.ar.off .an{color:var(--mu)}
.ar.ag{grid-template-columns:minmax(120px,auto) 1fr auto auto;align-items:center}
.ar form{margin:0}
.tog{display:inline-flex;align-items:center;gap:8px;height:32px;min-width:72px;box-sizing:border-box;padding:0 12px;border:1px solid var(--ln2);border-radius:999px;background:transparent;color:var(--mu);font:500 14px var(--sans);cursor:pointer;justify-content:center;white-space:nowrap}
.tog i{width:8px;height:8px;border-radius:50%;background:var(--mu)}
.tog.on{color:var(--tx);border-color:var(--ok)}
.tog.on i{background:var(--ok)}
.tog.fixed{cursor:default;border-style:dashed;min-width:0}
@media (max-width:600px){.ar.ag{grid-template-columns:1fr auto;row-gap:2px}.ar.ag .al{grid-column:1/3;grid-row:2;white-space:normal}.ar.ag .at{display:none}}
.mr{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;box-sizing:border-box;border-bottom:1px solid var(--ln);color:var(--tx);text-decoration:none;font-size:16px}
.mr:hover .l>span:first-child{color:var(--cy)}
.mr .l{flex:1;display:flex;flex-direction:column;line-height:22px;min-width:0}
.mr .sub{color:var(--mu);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr .chev{color:var(--mu);font-size:22px}
.so{margin:0}
.rings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.ring{min-width:0;text-align:center;padding:4px 0 0}
.ring svg{display:block;margin:0 auto;width:min(88px,100%);height:auto}
.ring .lbl{font:500 14px/20px var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-top:6px}
.ring .rs{font-size:14px;line-height:20px;color:var(--mu)}
.ring .rs .mono{color:var(--tx)}
.ub{display:grid;grid-template-columns:minmax(64px,max-content) 1fr 64px;align-items:center;gap:12px;min-height:32px}
.ub>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.trk{height:4px;background:var(--ln);border-radius:2px;overflow:hidden;display:block}
.trk i{display:block;height:100%;background:var(--cy)}
.ub .v{text-align:right;font-family:var(--mono);color:var(--tx);white-space:nowrap}
.row .mono.over{color:var(--wa)}
.row .tm{min-width:92px}
.days{display:flex;align-items:flex-end;gap:5px;height:72px}
.days i{flex:1;min-height:2px;background:var(--cy);opacity:.75;border-radius:2px 2px 0 0}
.days-l{display:flex;justify-content:space-between;margin-top:6px;font-size:14px}
.p.warn{border-left:3px solid var(--wa)}
.qr svg{width:100%;height:auto;display:block}
.text{white-space:pre-wrap}
.link{word-break:break-all}

/* Projects */
.pr{display:grid;grid-template-columns:8px 1fr auto;column-gap:12px;row-gap:2px;align-items:center;min-height:64px;box-sizing:border-box;padding:10px 0;border-bottom:1px solid var(--ln);color:var(--tx);text-decoration:none;overflow:hidden}
.pr:hover .nm{color:var(--cy)}
.pr .dot{grid-column:1;grid-row:1}
.pr .nm{grid-column:2;grid-row:1;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr .ago{grid-column:3;grid-row:1;color:var(--mu);white-space:nowrap;font-size:14px}
.pr .ds{grid-column:2/4;grid-row:2;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:22px}
.ib textarea{margin:0}
.ib .row{border-bottom:0;padding-bottom:0}
.src .fail{color:var(--fa)}

/* Dashboard. Phone: one column. 768+: two columns, cards keep their natural height (page scrolls).
   1400+ wide and 820+ high: one screen, no page scroll; rows are 280/224/212 fr so they equal px at 900 high. */
.dash .main{max-width:760px;margin:0 auto;padding:0 20px 24px}
.dashwrap{display:flex;flex-direction:column;gap:var(--gap)}
.dash .top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0 0;min-width:0}
.dash .top .hi{font:500 20px/28px var(--head);flex:1 1 auto;min-width:0}
.dash .top .sp,.dash .top #slot-next:empty,.dash .top #slot-weather:empty{display:none}
.dash .top .slot{min-width:0;max-width:100%}
.dash .top #slot-next{flex:1 1 100%;order:3}
.dash .top #slot-weather{order:4;white-space:nowrap}
.dash .top .meta{order:5;white-space:nowrap}
.dash .top .pill{order:6}
.dash .top .meta [data-clock],.dash .top .meta .mono{font-family:var(--mono)}
.dgrid{display:flex;flex-direction:column;gap:var(--gap)}
.dgrid .p{margin:0;min-width:0;display:flex;flex-direction:column;container-type:inline-size}
.dgrid .p p{margin:0}
.p h4 .ph{color:inherit;text-decoration:none}
.p h4 .ph::after{content:' \203A';opacity:0;transition:opacity .15s}
.p h4 .ph:hover{color:var(--cy)}
.p h4 .ph:hover::after,.p h4 .ph:focus-visible::after{opacity:1}
.bal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;flex-shrink:0;min-height:32px}
.inv{display:flex;align-items:center;gap:10px;font-size:14px}
.inv form{margin:0}
@media (min-width:768px){
  .dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--gap)}
  .pn-agenda,.pn-questions,.pn-finances{grid-column:1/-1}
  /* row 1: greeting, status, search; row 2: Next on the left, weather and date on the right */
  .dash .top .pill{order:1}
  .dash .top .cmd{order:2}
  .dash .top #slot-next{flex:0 1 auto;order:3}
  .dash .top .sp{display:block;flex:1 0 0;order:4}
  .dash .top #slot-weather{order:5}
  .dash .top .meta{order:6}
  .dash .top::after{content:'';order:2;flex-basis:100%;height:0}
}
@media (min-width:1200px){
  .dash .main{max-width:1164px;margin:0;padding:0 32px 32px}
  .dash .top{flex-wrap:nowrap;gap:16px;height:72px;padding:24px 0 0;box-sizing:border-box;white-space:nowrap}
  .dash .top .hi{flex:0 0 auto}
  .dash .top .cmd{flex:0 1 300px;width:auto;min-width:160px}
  .dash .top #slot-next{flex:0 1 auto;overflow:hidden}
  .dash .top .sp{order:0}
  .dash .top .cmd,.dash .top #slot-next,.dash .top #slot-weather,.dash .top .meta,.dash .top .pill{order:0;flex-shrink:0}
  .dash .top .cmd,.dash .top #slot-next{flex-shrink:1}
  .dash .top::after{display:none}
}
@media (min-width:1200px) and (max-width:1599px){
  .dash .top .cmd{flex:0 0 auto;min-width:0}
  .dash .top .cmd .ct,.dash .top .cmd .sp{display:none}  /* not enough room: icon + shortcut, like the phone */
  .dash .top .pill{height:32px;padding:0 14px}
}
@media (min-width:1400px) and (min-height:820px){
  body.dash{height:100vh;overflow:hidden;box-sizing:border-box;padding-bottom:0}
  .dash .main{max-width:none;height:100%;margin:0;padding:0;box-sizing:border-box}
  .dashwrap{height:100%;box-sizing:border-box;padding:0 32px 32px}
  .dash .top{flex-shrink:0}
  .dgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,280fr) minmax(0,224fr) minmax(0,212fr);gap:var(--gap);align-items:stretch}
  .dgrid .p{margin:0;min-height:0;overflow:hidden}
  .dgrid .p h4{flex-shrink:0}
  .pn-agenda{grid-column:1/5;grid-row:1/4}
  .pn-questions{grid-column:5/10;grid-row:1}
  .pn-usage{grid-column:10/13;grid-row:1}
  .pn-finances{grid-column:5/9;grid-row:2}
  .pn-agents{grid-column:9/13;grid-row:2}
  .pn-vps{grid-column:5/8;grid-row:3}
  .pn-log{grid-column:8/13;grid-row:3}
  .pn-finances .fitx{flex:1 1 auto;min-height:0;overflow:hidden}
  .pn-log .lgl{flex:1 1 auto;min-height:0;overflow:hidden}
  .dgrid .agfoot{margin-top:auto}
  .dgrid .links{margin-top:auto}
}
.dgrid .row{min-height:28px;padding:2px 0;border:0;justify-content:space-between;gap:12px;flex-shrink:0}
.dgrid .row .nm{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dgrid .row .nm>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dgrid .row .rt{flex:0 0 auto;white-space:nowrap;color:var(--mu);font-variant-numeric:tabular-nums}
.dgrid .row .mono{white-space:nowrap}
.dgrid .links{margin-top:12px;border-top:1px solid var(--ln);padding-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.dgrid .links .tx{color:var(--tx)}
.dgrid .links .bad{color:var(--fa)}
.vrow{display:grid;grid-template-columns:44px 1fr 48px;align-items:center;gap:12px;height:40px}
.vrow svg{display:block;width:100%;height:32px}
.vrow .trk{height:6px;border-radius:3px}
.vrow .val{text-align:right}

/* Agenda panel and top-bar Next slot */
.dash .top .next{display:flex;align-items:center;gap:10px;padding:0 14px;height:32px;box-sizing:border-box;max-width:100%;border:1px solid var(--ln);border-radius:8px;white-space:nowrap;min-width:0}
.dash .top .next b{font-weight:500;color:var(--tx);font-family:var(--sans);min-width:0;overflow:hidden;text-overflow:ellipsis}
.dash .top .next .cy{color:var(--cy);font-family:var(--mono);flex-shrink:0}
.dgrid .ev{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px;align-items:baseline;padding:8px 10px 8px 12px;margin:0 0 6px;border-left:2px solid var(--cy);border-radius:0 6px 6px 0;flex-shrink:0}
.dgrid .ev.plan{border-left-style:dashed}
.dgrid .ev.work{background:rgba(95,227,255,.08)}
.dgrid .ev.past{opacity:.5}
.dgrid .ev .t{white-space:nowrap;font-size:14px}
.dgrid .ev .n{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:12px;min-width:0}
.dgrid .ev .n .ti{flex:1 1 12em;min-width:0;overflow-wrap:anywhere}
.dgrid .ev .n .muted{white-space:nowrap;font-size:14px}
.dgrid .agnow{display:flex;align-items:center;gap:12px;margin:4px 0 10px;flex-shrink:0;font-size:14px}
.dgrid .agnow .mono{color:var(--cy);white-space:nowrap}
.dgrid .agnow i{flex:1 1 16px;min-width:16px;height:1px;background:var(--cy);opacity:.6}
.dgrid .agnow .muted{text-align:right}
.dgrid .agfoot{margin-top:12px;border-top:1px solid var(--ln);padding-top:12px;flex-shrink:0;font-size:14px;line-height:22px}
@container (max-width:380px){
  .dgrid .ev{grid-template-columns:1fr;gap:2px}
  .dgrid .ev .t{order:0}
}

/* questions: selection, key bar, dashboard panel rows */
.c.sel{border-color:var(--cy)}
.keys{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--mu);position:relative;font-size:14px}
.main>.keys{margin:4px 0 var(--gap)}
.keys .qhint{color:var(--wa)}
.keymap{position:absolute;right:0;bottom:36px;background:var(--bg);border:1px solid var(--ln2);border-radius:8px;padding:12px 14px;display:none;grid-template-columns:auto auto;gap:6px 16px;color:var(--tx);white-space:nowrap;z-index:5}
.keymap.show{display:grid}
.pn-questions .qlist{flex:1;min-height:0;overflow:hidden}
.pn-questions .c{display:flex;align-items:center;gap:14px;height:52px;box-sizing:border-box;padding:0 8px 0 14px;margin-bottom:8px;overflow:hidden;background:var(--bg);border-radius:8px}
.pn-questions .c.nofit{display:none}
.pn-questions .c .src{margin:0;white-space:nowrap;flex-shrink:0}
.pn-questions .c .src span:nth-child(2){display:none}
.pn-questions .c .txt,.pn-questions .c .sub{flex:1;min-width:0;margin:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-questions .c details.sub{display:none}
.pn-questions .c .acts{margin:0;flex-wrap:nowrap;gap:8px;flex-shrink:0}
.pn-questions .c form.acts .btn{flex:none;height:32px;padding:0 14px;font-size:14px;border-radius:6px}
.pn-questions .qmore{flex-shrink:0;height:24px;line-height:24px;padding-top:4px;font-size:14px;white-space:nowrap}
.pn-questions .qmore[style*=hidden]{display:none}
.pn-questions .empty{margin:0}
@container (max-width:460px){
  .pn-questions .c{height:auto;min-height:52px;flex-wrap:wrap;gap:4px 12px;padding:10px 12px}
  .pn-questions .c .txt{flex:1 1 60%}
  .pn-questions .c .acts{margin-left:auto}
}

/* Usage panel: small rings when the card is narrow */
@container (max-width:250px){
  .p .ring svg{width:68px}
  .p .rings{gap:8px}
}

/* Log panel */
.pn-log .le{display:grid;grid-template-columns:44px minmax(0,96px) minmax(0,1fr);gap:12px;min-height:28px;align-items:baseline;padding:3px 0}
.pn-log .le .w{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn-log .le .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-log .le .ok{color:var(--ok)}.pn-log .le .fail{color:var(--fa)}
@container (max-width:420px){
  .pn-log .le{grid-template-columns:44px minmax(0,1fr);row-gap:0}
  .pn-log .le .who{grid-column:2}
  .pn-log .le .w{grid-column:2}
}
.dgrid .big{font:500 28px/36px var(--mono);flex-shrink:0}
.pn-finances .fitx{margin-top:10px}
.pn-finances .fitx .row .rt .tx{color:var(--tx)}
.lbl-form{display:flex;gap:12px;align-items:center}
.lbl-form select{flex-shrink:0;max-width:44%;margin:0}
.pn-finances .ok{color:var(--ok)}
.cy{color:var(--cy)}
.nw{white-space:nowrap}
.row .ok{color:var(--ok)}
.btn.push{margin:0}
.fl{display:block;font-size:14px;margin:8px 0 0}
.dot.idle{background:transparent;border:1px solid var(--ln2);box-sizing:border-box}
.pn-finances .fitx .row.nofit{display:none}