/* Job Thing -- 800x480 Car Thing kiosk.
   TARGET: Chromium 69 (2018). No flexbox `gap`, no `inset`, no `?.`.
   Type scale is the 1110px mockup divided by ~1.55 to land on a 800px screen. */

@font-face{
  font-family:'Inter';
  src:url('fonts/Inter.woff2') format('woff2');
  font-weight:100 900;            /* variable font -- one file, all weights */
  font-style:normal;
  font-display:block;
}

:root{
  --bg:#0E0E10;
  --card-dark:#1C1C1F;
  --card-light:#EDF1F5;
  --fg:#FFFFFF;
  --dim:#9B9BA3;
  --dim-on-light:#5A5A62;
  --accent:#3DDC6B;            /* nav underline */
  --pill:#4A4A50;
  --saved:#D5001C;             /* Porsche Guards Red */
  --ring:#0A0A0C;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* kiosk: no pointer, so a focus ring is only ever visual noise */
*:focus,*:focus-visible,button:focus,button::-moz-focus-inner{outline:0 !important;border-color:inherit}
html,body{width:800px;height:480px;overflow:hidden}
body{
  background:var(--bg); color:var(--fg);
  font-family:Inter,'Circular Sp UI v3 T','Noto Sans',DejaVu Sans,sans-serif;
  display:flex; flex-direction:column; user-select:none; cursor:none;
  -webkit-font-smoothing:antialiased;
}

/* ---- nav ---- */
#nav{display:flex;align-items:center;padding:16px 24px 0;flex:0 0 auto}
.tab{
  background:none;border:0;color:#FFFFFF;opacity:.62;
  font-family:inherit;font-size:29px;font-weight:600;line-height:1.2;
  letter-spacing:-.2px;
  display:flex;align-items:center;padding:2px 2px 10px;margin-right:36px;
  border-bottom:3px solid transparent;
}
.tab .ico{width:27px;height:27px;margin-right:11px;flex:0 0 auto}
.tab.is-active{opacity:1;border-bottom-color:var(--accent)}
#status{margin-left:auto;font-size:13px;font-weight:500;color:var(--dim);padding-bottom:10px}

/* ---- views ---- */
main{flex:1 1 auto;position:relative;overflow:hidden}
.view{position:absolute;top:0;right:0;bottom:0;left:0;display:none}
.view.is-active{display:block}

/* ---- carousel ---- */
/* Per the mockup the card grounds ALTERNATE -- odd cards light, even dark --
   and the ring is purely the selection indicator, independent of ground.
   So light/dark is nth-child, and .sel only draws the ring. */
#rail{
  display:flex;align-items:center;height:100%;padding:12px 24px 8px;
  transition:transform .2s cubic-bezier(.22,.61,.36,1);will-change:transform;
}
.card{
  flex:0 0 264px;width:264px;height:329px;margin-right:16px;   /* 182:227 */
  background:var(--card-dark);color:var(--fg);
  border-radius:16px;padding:20px 20px 18px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:background .16s,color .16s,box-shadow .16s;
}
.card:nth-child(odd){background:var(--card-light);color:#0D0D0F}

/* Selection ring, drawn INSIDE the card with a band of card colour outside it:
   white edge -> black line -> white face (and the inverse on dark cards).
   Two stacked inset shadows -- the first paints on top, so the outer 4px comes
   back as card colour over the 7px line beneath. A single inset shadow would
   put the line hard against the card edge, with nothing outside it. */
.card.sel{                                                    /* on a dark card */
  box-shadow:inset 0 0 0 4px var(--card-dark),
             inset 0 0 0 7px #FFFFFF;
}
.card:nth-child(odd).sel{                                     /* on a light card */
  box-shadow:inset 0 0 0 4px var(--card-light),
             inset 0 0 0 7px #0B0B0D;
}

.card .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.card .brand{position:relative;flex:0 0 auto}
.card .logo{width:80px;height:80px;object-fit:contain;border-radius:14px;flex:0 0 auto;display:block}
/* Strong match: a star on the company logo, ringed in the card colour */
.card .star{position:absolute;right:-7px;bottom:-7px;width:30px;height:30px;border-radius:15px;
  background:#1F9D55;color:#FFFFFF;box-shadow:0 0 0 3px var(--card-dark);
  display:flex;align-items:center;justify-content:center}
.card:nth-child(odd) .star{box-shadow:0 0 0 3px var(--card-light)}
.card .star svg{width:17px;height:17px;display:block}
.card .avatar{width:80px;height:80px;border-radius:16px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:38px;font-weight:700;
  background:#ffffff1a;color:#FFFFFF}
.card:nth-child(odd) .avatar{background:#0000000f;color:#0D0D0F}

/* Heart: the OUTLINE always takes the card's contrast colour (white on a dark
   card, black on a light one). Saving fills the interior red and leaves the
   outline alone -- `color` drives the stroke, `fill` drives the interior. */
.card .heart{width:64px;height:64px;flex:0 0 auto;margin-top:8px;
  color:var(--fg);fill:none}
.card:nth-child(odd) .heart{color:#0D0D0F}
.card .heart.on{fill:var(--saved)}

/* Two-line clamp. A max-height of exactly 2 x line-height clipped descenders
   (the g in "Engineer"): Inter's descent reaches below the line box. So clamp
   by lines, and pad the bottom so the clipping edge sits under the glyphs.
   The padding comes out of the margin, so the card layout does not move. */
.card .ttl{
  font-size:23px;font-weight:700;line-height:1.2;letter-spacing:-.45px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  padding-bottom:.15em;margin-bottom:8px;flex:0 0 auto;
}
/* company, then up to three tool logos (Playwright, Python...), bare, at text size.
   Brand colours come in as CSS variables (index.html) so each card ground can
   nudge the ones that would disappear on it; black marks follow the text colour. */
.card .co{font-size:19px;font-weight:400;line-height:1.3;color:var(--dim);margin-bottom:8px;
  display:flex;align-items:center;min-height:28px}
.card .coname{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .tech{flex:0 0 auto;width:26px;height:26px;margin-left:8px;color:#FFFFFF;
  --t-python:#5A9BE0;--t-cplusplus:#6BA5DE;--t-typescript:#5A9DE6;--t-jest:#EC5A68;--t-kotlin:#A78BFF}
.card:nth-child(odd) .tech{color:#0D0D0F;
  --t-python:#3776AB;--t-python-yellow:#E9B31A;--t-cypress:#14996A;--t-javascript:#E2C200;
  --t-go:#008FB5;--t-puppeteer:#2A9486;--t-selenium:#35961F;--t-pytest:#0A8CC4}
.card .tech svg{width:26px;height:26px;display:block}
.card:nth-child(odd) .co{color:var(--dim-on-light)}

.card .loc{
  font-size:18px;font-weight:400;line-height:1.28;color:var(--dim);
  display:flex;align-items:flex-start;overflow:hidden;white-space:nowrap;padding-bottom:.08em;
}
.card:nth-child(odd) .loc{color:var(--dim-on-light)}
.card .loc .ico{width:17px;height:17px;margin-right:6px;flex:0 0 auto;margin-top:3px}
.card .loc .place{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* pills read identically on both grounds, per the mockup */
/* margin-top:auto pins the pills to the bottom; padding-top is only the minimum
   gap, kept small so a two-line title plus a two-line location still fits */
.card .tags{display:flex;justify-content:flex-start;align-items:center;
  margin-top:auto;padding-top:6px;flex-wrap:nowrap;overflow:hidden}
/* pay is what people look for first: larger, bold, high contrast */
.card .tag.pay{background:#1D6B3C;color:#FFFFFF;font-size:16.5px;font-weight:750;letter-spacing:-.1px;
  padding:7px 12px}
.card .age{flex:0 0 auto;margin-left:auto;padding-left:10px;font-size:15px;font-weight:600;line-height:1.5;
  color:var(--dim);white-space:nowrap}
.card:nth-child(odd) .age{color:var(--dim-on-light)}
.card .age.new{color:var(--accent)}
.card:nth-child(odd) .age.new{color:#17803F}
/* Card pills share a 224px row. At the global size, "On-site" + "Strong match"
   needed ~233px and the centred row clipped both ends. Tighter on cards only. */
.card .tag{font-size:14px;padding:8px 12px;margin:0 6px 0 0}
.tag{
  font-size:15px;font-weight:600;letter-spacing:.1px;
  padding:9px 17px;border-radius:999px;
  background:var(--pill);color:#FFFFFF;margin:0 5px;white-space:nowrap;
}

/* ---- detail: full-screen reading view ---- */
/* Sized for reading at arm's length on a 4" panel: 20px body at 1.55 leading
   gives ~70 characters a line. The whole view scrolls as one, so the header
   goes away as you read instead of eating a third of the screen. */
body.in-detail #nav{display:none}
/* Its own compositor layer: the device's Chromium otherwise repaints the text on
   every scroll frame (measured: 6 of 220 frames late), where moving a painted
   layer is nearly free. Text is greyscale-antialiased either way on this panel. */
#detail{height:100%;overflow-y:auto;padding:20px 34px 36px;will-change:transform;background:var(--bg)}
#detail::-webkit-scrollbar{width:6px}
#detail::-webkit-scrollbar-thumb{background:#ffffff38;border-radius:3px}
#detail .d-co{font-size:19px;font-weight:600;color:#fff;line-height:1.3}
#detail .d-loc{color:var(--dim);font-weight:400;margin-left:12px}
#detail h1{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.6px;margin:6px 0 12px}
#detail .d-tags{margin-bottom:12px}
#detail .d-tags .tag{display:inline-block;font-size:15px;padding:6px 14px;margin:0 8px 0 0}
#detail .d-tags .tag.saved{background:var(--saved)}
#detail .skills{margin:0 0 6px}
#detail .skill{display:inline-block;font-size:17px;font-weight:600;line-height:1;padding:8px 14px;
  margin:0 8px 8px 0;border-radius:999px;background:#232327;border:1px solid #3C3C43;color:#fff}
#detail .skill.money{background:#0F2E1A;border-color:#23703F;color:#86F2A8}
#detail .why{font-size:16px;line-height:1.45;color:#C8C8D0;margin:4px 0 0}
#detail .why b{font-weight:700;margin-right:10px;color:#fff}
#detail .why.strong b{color:#86F2A8}
#detail .also{font-size:16px;line-height:1.45;color:var(--dim);margin:4px 0 0}
#detail .also b{color:#C8C8D0;font-weight:600;margin-right:6px}
#detail .d-body{margin-top:20px;border-top:1px solid #26262B;padding-top:6px}
#detail .d-body h3{font-size:22px;font-weight:700;line-height:1.25;color:#fff;margin:24px 0 10px}
#detail .d-body p{font-size:20px;line-height:1.55;color:#D6D6DD;margin:0 0 14px;word-wrap:break-word}
#detail .d-body p.none{color:var(--dim)}
/* bullets: marker in its own column, so wrapped lines align under the text */
#detail .li{display:flex;font-size:20px;line-height:1.5;color:#D6D6DD;margin:0 0 10px}
#detail .li .bul{flex:0 0 28px;color:var(--accent);font-weight:700}
#detail .li .bt{flex:1 1 auto;min-width:0;word-wrap:break-word}
#detail .li.d2{padding-left:28px}
#detail .li.d3{padding-left:56px}
#detail .li + p, #detail .li + h3{margin-top:18px}
#detail .d-end{margin-top:26px;padding-top:14px;border-top:1px solid #26262B;font-size:15px;color:var(--dim)}

/* ---- home: the market for the active preset ---- */
#home{padding:12px 24px 0}
.hm-head{display:flex;align-items:center;height:26px}
.hm-slot{flex:0 0 auto;width:24px;height:24px;border-radius:12px;background:var(--accent);color:#08130C;
  font-size:14px;font-weight:700;line-height:24px;text-align:center;margin-right:10px}
.hm-scope{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hm-meta{margin-left:auto;padding-left:16px;font-size:13px;font-weight:500;color:var(--dim);white-space:nowrap}
.hm-wait{padding-top:110px;text-align:center;color:var(--dim);font-size:17px}
.kpis{display:flex;margin-top:10px}
.kpi{flex:1 1 0;min-width:0;margin-right:12px;padding:9px 14px 10px;border-radius:14px;background:var(--card-dark)}
.kpi:last-child{margin-right:0}
.kpi b{display:block;font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.1}
.kpi .k,.kpi .s{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .k{font-size:14px;font-weight:600;margin-top:1px}
.kpi .s{font-size:12.5px;font-weight:500;color:var(--dim);margin-top:1px}
.hm-grid{display:flex;margin-top:12px}
.pnl{flex:1 1 0;min-width:0;margin-right:12px;padding:10px 14px 8px;border-radius:14px;background:var(--card-dark);
  height:232px;overflow:hidden}
.pnl:last-child{margin-right:0}
.pnl.chart{flex:0 0 328px}
.pnl h4{display:flex;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);
  margin-bottom:8px;white-space:nowrap}
.pnl h4 em{margin-left:auto;padding-left:6px;font-style:normal;text-transform:none;letter-spacing:0;color:var(--dim);font-weight:500}
.pnl h4 em:before{content:'';display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--accent);margin-right:5px;vertical-align:1px}
.bars{display:block}
.bars rect{fill:#5A5A62}
.bars rect.today{fill:var(--accent)}
.bars text{fill:#C9C9CF;font-size:11px;font-weight:600;text-anchor:middle}
.bars line{stroke:#34343A;stroke-width:1}
.axis{display:flex;justify-content:space-between;font-size:11.5px;font-weight:500;color:var(--dim);margin-top:4px}
.hr{margin-bottom:12px}
.hl{display:flex;align-items:baseline;font-size:15px;line-height:1.2}
.hl .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.hl .ct{margin-left:auto;padding-left:8px;color:var(--dim);font-size:13px;font-weight:600}
.hr i{display:block;height:4px;margin-top:4px;border-radius:2px;background:#8E8E96}
.hr.mine i{background:var(--accent)}
.hr.gap i{background:#5A5A62}
.hr.gap .nm{color:#C9C9CF}

.empty{position:absolute;top:0;right:0;bottom:0;left:0;display:none;
  align-items:center;justify-content:center;color:var(--dim);font-size:16px}
.empty.show{display:flex}

/* ---- preset strip: 4 chips under the 4 top buttons + the 5th (setup) ---- */
/* Glanceable in a car: 17px+ labels, one line, the active preset inverted
   rather than merely tinted so it reads at arm's length. */
#gear{background:none;border:0;color:var(--dim);width:48px;height:44px;margin-left:10px;
  display:flex;align-items:center;justify-content:center;padding-bottom:8px}
#gear .ico{width:26px;height:26px}
body.in-settings #nav{display:none}

.strip{display:flex;margin-top:26px}
.chip{flex:1 1 0;min-width:0;height:54px;margin-right:12px;border-radius:14px;
  background:var(--card-dark);display:flex;align-items:center;padding:0 12px 0 10px}
.chip .n{flex:0 0 auto;width:30px;height:30px;border-radius:15px;background:#ffffff1a;
  font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;
  margin-right:10px}
.chip .tx{min-width:0;display:flex;flex-direction:column}
.chip .t,.chip .t2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .t{font-size:17px;font-weight:600;line-height:1.15}
.chip .t2{font-size:14px;font-weight:500;line-height:1.2;color:var(--dim)}
.chip.on .t2{color:var(--dim-on-light)}
.chip.on{background:var(--card-light);color:#0D0D0F}
.chip.on .n{background:var(--accent);color:#08130C}
.chip.gear{flex:0 0 64px;margin-right:0;justify-content:center;padding:0;color:var(--dim)}
.chip.gear .ico{width:26px;height:26px}

#osd{position:absolute;top:0;left:0;right:0;z-index:85;display:none;pointer-events:none;
  padding:0 24px 22px;background:linear-gradient(#0E0E10 72%, rgba(14,14,16,0))}
#osd.show{display:block}
#osd .strip{margin-top:12px}

/* ---- settings ---- */
#settings{height:100%;padding:12px 24px 0;display:flex;flex-direction:column}
.set-head{display:flex;align-items:center;height:62px;flex:0 0 auto}
.set-back{flex:0 0 auto;width:48px;height:48px;border-radius:24px;border:0;
  background:var(--card-dark);color:#fff;font-family:inherit;font-size:32px;line-height:44px;
  margin-right:16px;padding-bottom:4px}
.set-title{min-width:0;flex:1 1 auto}
.set-title .eyebrow{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim)}
.set-title h2{font-size:28px;font-weight:700;letter-spacing:-.5px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-count{flex:0 0 auto;margin-left:20px;text-align:right}
.set-count b{display:block;font-size:34px;font-weight:700;letter-spacing:-.8px;line-height:1}
.set-count span{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim)}

/* slots: one tile per physical button, in the same left-to-right order */
.slots{display:flex;flex:1 1 auto;padding:10px 0 14px}
.slot{flex:1 1 0;min-width:0;margin-right:14px;border-radius:16px;padding:16px 16px 14px;
  background:var(--card-dark);display:flex;flex-direction:column;overflow:hidden}
.slot:last-child{margin-right:0}
.slot.sel{box-shadow:inset 0 0 0 4px var(--card-dark),inset 0 0 0 7px #FFFFFF}
.slot-num{width:40px;height:40px;border-radius:20px;background:#ffffff1a;font-size:21px;
  font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.slot.active .slot-num{background:var(--accent);color:#08130C}
.slot-name{font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.3px;
  margin:12px 0 3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  padding-bottom:.15em;flex:0 0 auto}
.slot dt{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);margin-top:10px}
.slot dd{font-size:15px;line-height:1.3;color:#C8C8D0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.slot-count{margin-top:auto;font-size:13px;font-weight:500;color:var(--dim)}
.slot-count b{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.6px;margin-right:4px}

/* menu and edit: up to five full-width 64px targets */
.erows{padding-top:8px}
.erow{display:flex;align-items:center;height:64px;padding:0 22px;margin-bottom:8px;
  border-radius:14px;background:var(--card-dark)}
.erow.sel{box-shadow:inset 0 0 0 3px #FFFFFF}
.erow .ek{flex:0 0 118px;font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim)}
.erow .ev{flex:1 1 auto;min-width:0;font-size:21px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.erow .ev.any{color:var(--dim);font-weight:500}
.erow .chev{flex:0 0 auto;font-size:32px;color:var(--dim);margin-left:14px}
.erow.reset{height:58px;background:none}
.erow.reset .ev{font-size:18px;font-weight:500;color:var(--dim)}

/* picker: ~6 rows visible, list slides to keep the selection centred */
.plist-wrap{flex:1 1 auto;position:relative;overflow:hidden;margin-top:6px}
/* fade only the edges that have more rows beyond them */
.plist-wrap.up{-webkit-mask-image:linear-gradient(transparent, #000 26px)}
.plist-wrap.down{-webkit-mask-image:linear-gradient(#000 calc(100% - 26px), transparent)}
.plist-wrap.up.down{-webkit-mask-image:linear-gradient(transparent, #000 26px, #000 calc(100% - 26px), transparent)}
.plist{will-change:transform}
.prow{display:flex;align-items:center;height:58px;margin-bottom:4px;padding:0 20px;
  border-radius:12px}
.prow.sel{background:var(--card-dark);box-shadow:inset 0 0 0 3px #FFFFFF}
.prow .box{flex:0 0 auto;width:28px;height:28px;border-radius:8px;margin-right:18px;
  border:2.5px solid #6E6E76;position:relative}
.prow.on .box{background:var(--accent);border-color:var(--accent)}
.prow.on .box:after{content:'';position:absolute;left:7px;top:2px;width:7px;height:14px;
  border:solid #08130C;border-width:0 3px 3px 0;transform:rotate(45deg)}
.prow .pl{flex:1 1 auto;min-width:0;font-size:22px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.prow .pc{flex:0 0 auto;margin-left:16px;font-size:18px;font-weight:500;color:var(--dim)}
.prow.zero .pl{color:#6E6E76}

.erow.warn .ev{color:#FFB547}

/* sources: two-line rows, status dot on the left, counts on the right */
.srow{display:flex;align-items:center;height:66px;margin-bottom:4px;padding:0 20px;border-radius:12px}
.srow.sel{background:var(--card-dark);box-shadow:inset 0 0 0 3px #FFFFFF}
.srow .dot{flex:0 0 auto;width:12px;height:12px;border-radius:6px;margin:0 18px 0 8px;
  background:var(--accent)}
.srow.bad .dot{background:#FF5A4F}
.srow.setup .dot{background:#FFB547}
.srow.setup .ss{color:#FFCF85}
.srow.off .dot{background:#4A4A50}
.srow.action .dot{width:28px;height:28px;margin:0 10px 0 0;background:none;color:var(--accent);
  font-size:26px;line-height:28px;text-align:center}
.srow .dot.spin{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}
@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.srow .sm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.srow .sn{font-size:21px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.srow .ss{font-size:13px;font-weight:500;line-height:1.3;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.srow.bad .ss{color:#FF8A80}
.srow.off .sn{color:#6E6E76}
.srow .sr{flex:0 0 auto;margin-left:16px;text-align:right;font-size:13px;color:var(--dim);line-height:1.25}
.srow .sr b{font-size:20px;font-weight:700;color:#fff;margin-right:3px}
.srow .sr span{display:block}
.srow .sr b.offlbl{color:#6E6E76;font-size:17px}

/* status: read-only key/value sheet */
.kv{padding:10px 4px 0}
.kv dt{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  margin-top:13px}
.kv dt:first-child{margin-top:0}
.kv dd{font-size:19px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}


/* ---- saved jobs + apply with Claude ---- */
/* Two action buttons share the top line; the saved jobs are a list below.
   (Chromium 69: no flex gap, so margins.) */
.acts{display:flex;margin:2px 0 6px}
.act{flex:1 1 0;min-width:0;display:flex;align-items:center;height:72px;padding:0 16px;margin-right:12px;
  border-radius:16px;background:#1C1C1F;border:1px solid #2C2C31}
.act:last-child{margin-right:0}
.act.sel{box-shadow:inset 0 0 0 3px #FFFFFF;border-color:transparent}
.act .aico{flex:0 0 auto;width:40px;height:40px;border-radius:12px;margin-right:12px;display:flex;
  align-items:center;justify-content:center;background:#26262B;color:var(--accent)}
.act .aico svg{width:22px;height:22px;display:block}
.act .aico .arrow{font-size:22px;font-weight:600;line-height:1}
.act .sm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.act .sn{font-size:18px;font-weight:650;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act .ss{font-size:12.5px;font-weight:500;line-height:1.3;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:2px}
.act.claude{background:#241A15;border-color:#4A2F22}
.act.claude .aico{background:#3A2A22;color:#D97757}
.act.claude .sn{color:#F9D9CB}
.act.claude.running .aico{-webkit-animation:pulse 1.4s ease-in-out infinite;animation:pulse 1.4s ease-in-out infinite}
.act .spark{width:22px;height:22px;display:block}
@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.sv-label{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  margin:12px 20px 6px}
.srow .avatar-s,.srow .logo-s{flex:0 0 auto;width:40px;height:40px;border-radius:10px;margin-right:14px}
.srow .avatar-s{background:#ffffff14;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center}
.srow .logo-s{object-fit:contain;background:#FFFFFF;padding:3px}
.srow .pill{flex:0 0 auto;margin-left:14px;font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;
  background:#2A2A2F;color:#C8C8D0;white-space:nowrap}
.srow .pill.busy{background:#3A2A22;color:#F4C7B5}
.srow .pill.good{background:#0F2E1A;color:#86F2A8}
.srow .pill.warn{background:#3A2E12;color:#FFCF85}
.srow .pill.bad{background:#3A1717;color:#FF8A80}
.srow .pill.done{background:#1E1E22;color:#7C7C85}
.srow.empty-row .sn{color:var(--dim)}
.sheet{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;background:rgba(8,8,10,.72);
  display:flex;align-items:center;justify-content:center}
/* The card never outgrows the screen: the text is capped at three lines and the
   options scroll (with the dial) inside what is left, the selected one kept in view. */
.sheet-card{width:600px;max-height:calc(100% - 20px);overflow:hidden;background:#17171A;border:1px solid #33333A;
  border-radius:18px;padding:16px 18px 10px;display:flex;flex-direction:column}
.sheet-title{flex:0 0 auto;font-size:22px;font-weight:700;line-height:1.2;margin:0 6px 6px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sheet-body{flex:0 0 auto;font-size:15px;line-height:1.45;color:#C8C8D0;margin:0 6px 10px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.sheet-opts{flex:1 1 auto;min-height:0;position:relative;overflow:hidden}
.sheet-opts-in{will-change:transform}
.sheet-opts.up{-webkit-mask-image:linear-gradient(transparent, #000 22px)}
.sheet-opts.down{-webkit-mask-image:linear-gradient(#000 calc(100% - 22px), transparent)}
.sheet-opts.up.down{-webkit-mask-image:linear-gradient(transparent, #000 22px, #000 calc(100% - 22px), transparent)}
.sheet-body em{color:#FFCF85;font-style:normal}
.sheet-opt{display:flex;align-items:center;height:50px;padding:0 16px;border-radius:12px;font-size:19px;font-weight:600;
  margin-bottom:6px;background:#202024}
.sheet-opt .spark{width:20px;height:20px;margin-right:10px;color:#D97757}
.sheet-opt.sel{box-shadow:inset 0 0 0 3px #FFFFFF}
.sheet-opt.go{background:#3A2A22;color:#FBE3D8}

/* ---- screenshot: shutter flash + toast (shown after the capture) ---- */
#shutter{position:absolute;top:0;right:0;bottom:0;left:0;z-index:98;background:#FFFFFF;
  opacity:0;pointer-events:none}
#shutter.flash{-webkit-animation:shutter .32s ease-out;animation:shutter .32s ease-out}
@-webkit-keyframes shutter{0%{opacity:.85}100%{opacity:0}}
@keyframes shutter{0%{opacity:.85}100%{opacity:0}}
#toast{position:absolute;top:14px;left:50%;z-index:99;display:none;max-width:720px;
  -webkit-transform:translateX(-50%);transform:translateX(-50%);
  background:rgba(22,22,25,.96);border:1px solid #3a3a40;border-radius:16px;
  padding:10px 18px;pointer-events:none;text-align:center}
#toast.show{display:block}
#toast b{display:block;font-size:18px;font-weight:700;color:#FFFFFF}
#toast span{display:block;font-size:14px;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-top:2px}
#toast.bad b{color:#FF8A80}

/* ---- footer ---- */
#hint{flex:0 0 auto;padding:4px 24px 10px;font-size:11.5px;font-weight:500;color:#62626B}

/* ---- save confirmation ---- */
#flash{
  position:absolute;left:50%;bottom:50px;transform:translateX(-50%);z-index:80;
  background:var(--accent);color:#08130C;font-weight:700;font-size:15px;
  padding:9px 20px;border-radius:999px;opacity:0;transition:opacity .18s;
  pointer-events:none;white-space:nowrap;
}

/* ---- input probe overlay (PROBE=true in app.js) ---- */
#probe{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:99;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(8,8,10,.94);text-align:center;padding:20px;
}
#probe .pmain{font-size:26px;font-weight:700;color:var(--accent);line-height:1.3;word-break:break-all}
#probe .plog{margin-top:16px;font-size:14px;color:#8D8D96;line-height:1.7}

/* ---- save burst: full-screen confirmation on the dial press ---- */
#saved-burst{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:90;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(8,8,10,.72);pointer-events:none;
}
#saved-burst.show{display:flex}
#saved-burst .burst-heart{
  width:132px;height:132px;color:var(--saved);
  animation:burst-pop 900ms cubic-bezier(.2,1.5,.4,1) both;
}
#saved-burst.removing .burst-heart{color:#6E6A74}
#saved-burst .burst-label{
  margin-top:18px;font-size:26px;font-weight:700;letter-spacing:-.4px;color:#FFFFFF;
  animation:burst-rise 900ms cubic-bezier(.2,.9,.3,1) both;
}
@keyframes burst-pop{
   0%{transform:scale(.35);opacity:0}
  45%{transform:scale(1.12);opacity:1}
  62%{transform:scale(.97)}
  78%{transform:scale(1.02);opacity:1}
 100%{transform:scale(1);opacity:0}
}
@keyframes burst-rise{
   0%{transform:translateY(14px);opacity:0}
  40%{transform:translateY(0);opacity:1}
  80%{opacity:1}
 100%{opacity:0}
}

/* ---- voice: hold Back for two seconds ---- */
#voice{position:fixed;top:0;left:0;width:800px;height:480px;z-index:60;pointer-events:none;
  opacity:0;transition:opacity 160ms ease-out,background-color 260ms ease-out;background-color:rgba(6,6,8,0)}
#voice.on{opacity:1}
#voice.open{background-color:rgba(6,6,8,.76)}
/* darker where the orb and the words sit, so they read over whatever card is behind */
#voice:before{content:'';position:absolute;top:0;left:0;width:800px;height:480px;opacity:0;transition:opacity 260ms ease-out;
  background:radial-gradient(ellipse 400px 270px at 400px 260px,rgba(6,6,8,.94),rgba(6,6,8,0))}
#voice.open:before{opacity:1}
/* the screen underneath eases back, like iOS lifting the content under Siri */
#nav,main,#hint{transition:transform 420ms cubic-bezier(.2,.8,.2,1),opacity 420ms ease-out}
body.voice-lift #nav,body.voice-lift main,body.voice-lift #hint{transform:scale(.955);will-change:transform}
body.voice-lift main{opacity:.9}
#voice canvas{position:absolute;top:0;left:0;width:800px;height:480px}
#voice .v-text{position:absolute;left:0;top:332px;width:800px;text-align:center}
#voice.arming .v-text{display:none}
#voice-title{font-size:30px;font-weight:800;letter-spacing:-.01em}
#voice-sub{font-size:16px;color:var(--dim);margin-top:8px}
#voice.thinking #voice-title{animation:v-shimmer 1.1s ease-in-out infinite}
@keyframes v-shimmer{0%,100%{opacity:1}50%{opacity:.55}}
#voice.error #voice-title{color:#FF8A8A}