/* Ploa dashboard. Tokens and components follow design/prototype.html and docs/DESIGN.md. */
:root{
  --canvas:#f8f7ff; --surface:#ffffff; --sunken:#ebe8f6;
  --ink:#17181b; --ink-2:#4a4858; --ink-3:#67657a;
  --line:#e2def0; --line-soft:#ece9f7; --line-strong:#cbc5e2; --hover:#f1f0f5;
  --violet:#7c5cff; --violet-soft:#ece7ff; --violet-ink:#5a3fe0;
  --ok:var(--violet); --ok-soft:var(--violet-soft); --ok-ink:var(--violet-ink);
  --live:#1d9a6c; --live-soft:#daf4e8; --live-ink:#13734f;
  --sky:#2a62d4; --sky-soft:#e8eefc;
  --amber:#b14d08; --amber-soft:#fff0e4;
  --rose:#c8264f; --rose-soft:#fde8ee;
  --r-card:20px; --r-ctl:12px; --r-pill:999px;
  --shadow:0 1px 0 rgba(23,24,27,.03), 0 1px 3px rgba(23,24,27,.05);
  --font:"Google Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Google Sans Code",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0}
a{color:var(--violet-ink)}
code,.mono{font-family:var(--mono);font-size:.88em}
.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--ink-3)}
.hidden{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Buttons */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;white-space:nowrap;transition:transform .12s var(--ease),background .15s,opacity .15s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover:not(:disabled){background:#2b2a35}
.btn.quiet{background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.btn.quiet:hover:not(:disabled){background:var(--sunken)}
.btn.danger{color:var(--rose)}
.btn.quiet.danger:hover:not(:disabled){background:var(--rose-soft);box-shadow:0 0 0 1px var(--rose-soft)}
.btn.sm{height:32px;padding:0 13px;font-size:13.5px}
.btn.wide{width:100%;height:44px}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.field small{font-size:12.5px;color:var(--ink-3)}
/* Kit 7 · field: one look for every field a person types in or picks from, on every page. White,
   a thin ring, 12px corners; the ring darkens on hover, turns violet with a soft halo on focus, and
   rose once a value is wrong (after it was touched); read-only and disabled ones are grey. Two
   heights: --fh 42px in forms, 36px in compact rows (set --fh:36px on the row); a button beside a
   field takes the field's height. A select draws its own chevron, at the end in either direction. */
:where(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=password],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea){width:100%;height:var(--fh,42px);padding:0 14px;border:0;border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font-size:14.5px;box-shadow:inset 0 0 0 1px var(--line);outline:none;appearance:none;-webkit-appearance:none;transition:box-shadow .15s,background-color .15s}
:where(textarea){height:auto;min-height:96px;padding:11px 14px;line-height:1.5;resize:vertical}
::placeholder{color:var(--ink-3);opacity:1}
:where(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=password],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea):hover:not(:focus,:disabled,[readonly]){box-shadow:inset 0 0 0 1px var(--line-strong)}
:where(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=password],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea):focus{box-shadow:inset 0 0 0 1.5px var(--violet),0 0 0 4px var(--violet-soft)}
:where(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=password],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea):user-invalid{box-shadow:inset 0 0 0 1.5px var(--rose),0 0 0 4px var(--rose-soft)}
:where(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=password],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea):is(:disabled,[readonly]){background:var(--sunken);color:var(--ink-2);box-shadow:none}
:where(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=password],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea):disabled{cursor:not-allowed}
:where(select){padding-inline-end:38px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367657a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:right 12px center}
[dir=rtl] :where(select){background-position:left 12px center}
:where(select[multiple]){height:auto;padding:6px;background-image:none}
:where(input[type=number]){font-variant-numeric:tabular-nums}
:where(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=password],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea)+.btn.btn,.inline-form>.btn.btn,.field-row>.btn.btn{height:var(--fh,42px)}
.field-row{display:flex;gap:8px;align-items:center}
.field-row>:is(input,select){flex:1;min-width:0}
input[type=file]{font-size:13.5px}

/* Upload drop zone (upload.js): the real input lies invisibly over it */
.drop{position:relative;display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 14px;border-radius:14px;border:1.5px dashed var(--line);background:var(--surface);transition:border-color .15s,background-color .15s}
.drop:hover,.dragging-files .drop{border-color:var(--violet)}
.drop.over{border-style:solid;border-color:var(--violet);background:var(--violet-soft)}
.drop.refused{border-color:var(--rose);background:var(--rose-soft)}
.drop.has-file{border-style:solid;border-color:var(--line)}
.drop.has-file:hover{border-color:var(--violet)}
.drop:has(.drop-input:focus-visible){border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.drop .drop-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;font-size:0}
.drop-face{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.drop-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink);transition:transform .2s var(--ease)}
.drop.over .drop-ico{transform:translateY(-2px);background:var(--violet);color:#fff}
.drop.has-file .drop-ico{background:var(--ink);color:#fff}
.drop-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--ink-2);line-height:1.35}
.drop-txt b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-txt small{font-size:12.5px;color:var(--ink-3)}
.drop-txt .drop-act{color:var(--violet-ink);font-weight:500}
.drop-clear{position:relative;z-index:2;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.drop-clear:hover{background:var(--sunken);color:var(--ink)}
@media (hover:none){.drop-or{display:none}}
.shot.add.over,.dragging-files .shot.add{border-color:var(--violet);color:var(--violet-ink)}
.shot.add.over{background:var(--violet-soft)}
label.btn.over{background:var(--violet-soft);color:var(--violet-ink)}
.code-input{font-family:var(--mono);font-size:22px;letter-spacing:.3em;text-align:center;direction:ltr}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}.app.add{min-height:0;flex-direction:row;padding:16px}.item:has(> select){flex-wrap:wrap}.item > select{width:100%!important}}

/* Cards and chips */
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow),0 0 0 1px var(--line-soft)}
.pad{padding:20px}
/* Kit 1 · state: a dot and a word, six tones (done violet, live green, moving sky, a person amber,
   failed rose, quiet grey). Moving states ring their dot. */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);font-size:12.5px;font-weight:500;line-height:1.3;white-space:nowrap;vertical-align:middle}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.review::before,.chip.inProgress::before,.chip.processing::before{box-shadow:0 0 0 3px rgba(42,98,212,.18)}
.chip.ok,.chip.approved,.chip.completed{background:var(--ok-soft);color:var(--ok-ink)}
.chip.prod{background:var(--live-soft);color:var(--live-ink)}
.chip.review,.chip.inProgress,.chip.processing{background:var(--sky-soft);color:var(--sky)}
.chip.wait,.chip.pending,.chip.draft{background:var(--amber-soft);color:var(--amber)}
.chip.fail,.chip.rejected,.chip.halted{background:var(--rose-soft);color:var(--rose)}
.chip.quiet,.chip.expired,.chip.cancelled{background:var(--sunken);color:var(--ink-2)}

/* Centered auth pages */
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px}
.auth .card{width:min(400px,100%);padding:28px}
.auth .logo{display:block;margin:0 auto 18px;height:60px;width:auto}
.auth h1{font-size:24px;font-weight:600;letter-spacing:-.02em;text-align:center}
.auth .lead{margin-top:8px;text-align:center;color:var(--ink-2)}
.auth .or{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--ink-3);font-size:13px}
.auth .or::before,.auth .or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth .foot{margin-top:18px;text-align:center;font-size:13px;color:var(--ink-3)}
.auth .foot + .foot{margin-top:6px}
.auth .foot a{color:var(--violet-ink)}
/* /start, the getting-started page: one column of numbered cards, the kit's commands in them. */
.doc{width:min(720px,100%);margin:0 auto;padding:20px 16px 40px}
.doc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px}
.doc-logo img{display:block;height:40px;width:auto}
.doc-head nav a{color:var(--violet-ink);font-weight:500;text-decoration:none}
.doc h1{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.doc-lead{margin-top:10px;font-size:16.5px;color:var(--ink-2);line-height:1.55}
.doc h2{font-size:17px;font-weight:600}
.doc .card p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.doc .card a{color:var(--violet-ink)}
.doc-need{margin-top:22px}
.doc-need ul{margin:8px 0 0;padding-inline-start:20px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.doc-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:doc}
.doc-steps > li{counter-increment:doc;position:relative;padding-inline-start:62px}
.doc-steps > li::before{content:counter(doc);position:absolute;inset-inline-start:20px;top:20px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink);font-weight:600;font-size:14px}
.doc .doc-small{font-size:13px;color:var(--ink-3)}
.doc-foot{display:flex;justify-content:center;margin-top:28px}
.doc-foot .lang{width:200px}
@media (max-width:560px){.doc h1{font-size:25px}.doc-steps > li{padding-inline-start:52px}.doc-steps > li::before{inset-inline-start:14px}}
/* The sign-up form's field for bots: off screen, out of the tab order, silent to screen readers. */
.auth .hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
/* Kit 4 · notice: one shape for every message on a page; the tone says what kind. A round icon at
   the start, the words in ink, links in the tone's own color. .note is help (violet), .note.warn
   waits on a person (amber), .msg.err failed (rose), .msg.ok and .note.ok went well (green). */
.note,.msg{position:relative;display:block;min-height:44px;padding:11px 14px;padding-inline-start:46px;border-radius:14px;background:var(--violet-soft);color:var(--ink-2);font-size:13.5px;line-height:1.5;text-align:start;--n-tone:var(--violet);--n-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7v.5'/%3E%3C/svg%3E")}
.note::before,.msg::before{content:"";position:absolute;top:10px;inset-inline-start:11px;width:24px;height:24px;border-radius:50%;background:var(--n-tone) var(--n-ico) center/14px no-repeat}
.note b,.msg b{color:var(--ink);font-weight:600}
.msg{margin-top:14px}
.msg.err{background:var(--rose-soft);--n-tone:var(--rose);--n-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E")}
.msg.err a{color:var(--rose)}
.msg.ok,.note.ok{background:var(--live-soft);--n-tone:var(--live);--n-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E")}
.msg.ok a,.note.ok a{color:var(--live-ink)}
.note.warn{background:var(--amber-soft);--n-tone:var(--amber);--n-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M12 9v3.2l2 1.3'/%3E%3C/svg%3E")}
.note.warn a{color:var(--amber)}
small.msg{font-size:12.5px;min-height:38px;padding-block:9px}
small.msg::before{top:8px;width:22px;height:22px;background-size:12px}
/* A section's load errors, once, under its title */
.sec-alert{margin:0 0 16px}
.sec-alert .alert-said{color:var(--ink-3);font-size:12.5px;unicode-bidi:isolate}
.sec-alert ul{margin:4px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:2px}

/* Shell: one column, the island bar on top (see Island below) and the page under it */
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.isl-btn .count{position:absolute;top:1px;inset-inline-end:0;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:var(--r-pill);background:var(--amber-soft);color:var(--amber);font-size:11px;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.me{position:relative}
.me-pop{position:absolute;width:270px;z-index:40;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:14px;box-sizing:border-box;border-radius:18px;background:var(--surface);box-shadow:0 14px 36px rgba(23,24,27,.14),0 0 0 1px var(--line-soft)}
.who{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.who .av,.list .av{width:26px;height:26px;border-radius:8px;background:var(--violet-soft);color:var(--violet-ink);display:grid;place-items:center;font-weight:600;font-size:13px;flex:none;text-transform:uppercase}
.who span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.who small{display:block;color:var(--ink-3);font-size:12px}
.app-mode .main{min-width:0;display:flex;flex-direction:column}
.main>#track,.main>#live,.main>#view{width:100%;max-width:1120px;box-sizing:border-box;padding-inline:clamp(16px,3vw,40px)}
.main>#view{padding-top:14px;padding-bottom:64px}
.main>#live{margin-top:14px}
kbd{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--hover);border-radius:8px;padding:3px 7px}
.lang{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:var(--r-pill);background:var(--sunken)}
.lang button{padding:6px 0;border-radius:var(--r-pill);font-size:13px;color:var(--ink-2);transition:background .2s var(--ease),color .2s}
.lang button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.lang.short{grid-template-columns:auto auto}
.lang.short button{padding:6px 11px}
.auth .lang{width:200px;margin-top:22px}
.icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{background:var(--sunken)}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 20px}
.page-head h1{font-size:28px;font-weight:600;letter-spacing:-.025em}
.page-head p{color:var(--ink-3);margin-top:4px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 12px}
.sec-head h2{font-size:17px;font-weight:600}
.sec-head a{font-size:14px;color:var(--violet-ink);text-decoration:none}

/* Waiting for you */
.needs{padding:18px 20px 6px}
/* Waiting for you: an amber dot before the title while something waits, none when nothing does */
.needs.has-wait h2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:10px;vertical-align:2px;background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.req{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line-soft)}
.reject-form{flex-basis:100%;display:grid;gap:8px}
.reject-form label{font-size:13px;color:var(--ink-2)}
.reject-form .acts{justify-content:flex-end}
.btn.danger-solid{background:var(--rose);color:#fff;border-color:transparent}
.req:first-of-type{border-top:0}
.req .what{min-width:0;flex:1}
.req .what b{font-weight:500}
.req .what small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.req .acts{display:flex;gap:8px;flex:none}
/* Kit 5 · empty state: the jellyfish drawn in dots, then the words; a link in it is the next step. */
.empty{padding:28px 20px;text-align:center;color:var(--ink-3);font-size:14px}
.empty b{display:block;color:var(--ink);font-size:14.5px;font-weight:600;margin-bottom:2px}
p.empty::before,div.empty::before{content:"";display:block;width:40px;height:46px;margin:0 auto 10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 6 76 88'%3E%3Cg fill='none' stroke='%23c9c2e6' stroke-width='3.5' stroke-linecap='round' stroke-dasharray='1 7'%3E%3Cpath d='M16 50C16 26 32 10 50 10S84 26 84 50Q77.2 57 70.4 50Q63.6 57 56.8 50Q50 57 43.2 50Q36.4 57 29.6 50Q22.8 57 16 50Z'/%3E%3Cpath d='M29.6 56q-6 8 0 16t0 13M43.2 56q6 8 0 16t0 13M56.8 56q-6 8 0 16t0 13M70.4 56q6 8 0 16t0 13'/%3E%3C/g%3E%3Cg fill='%23c9c2e6'%3E%3Ccircle cx='41' cy='37' r='3'/%3E%3Ccircle cx='59' cy='37' r='3'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}

/* App cards */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.app{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .25s var(--ease),box-shadow .25s}
a.app:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(23,24,27,.06),0 0 0 1px var(--line)}
.app-top{display:flex;align-items:center;gap:12px;padding:18px 18px 0}
.app-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-weight:700;font-size:19px;flex:none;background:var(--ink);color:#fff}
.app-top h3{font-size:16.5px;font-weight:600}
.app-top .bid{color:var(--ink-3);font-size:12.5px}
.plats{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
.plat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13.5px;min-height:24px} /* a long state moves under the version rather than past the card's edge */
.plat .os{width:62px;color:var(--ink-3)}
.plat .ver{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.plat .chip{margin-inline-start:auto}
.app.add{align-items:center;justify-content:center;gap:8px;min-height:0;padding:24px;text-align:center;background:transparent;border:1.5px dashed var(--line);box-shadow:none;color:var(--ink-2)}
.app.add:hover{border-color:var(--violet);background:var(--surface)}
.app.add .plus{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}

/* Lists and tables */
.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--line-soft)}
.item:first-child{border-top:0}
.item .grow{flex:1;min-width:0}
.item .grow b{font-weight:500}
.item .grow small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:start;font-weight:500;color:var(--ink-3);font-size:12.5px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
td{padding:11px 16px;border-top:1px solid var(--line-soft);vertical-align:top}
.table-wrap{overflow-x:auto}
.seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--sunken)}
.seg button{padding:6px 14px;border-radius:var(--r-pill);font-size:14px;color:var(--ink-2)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--shadow)}
.secret-once{margin-top:12px;padding:12px;border-radius:var(--r-ctl);background:var(--ink);color:#ebe8f4;font-family:var(--mono);font-size:13px;word-break:break-all;direction:ltr;text-align:left}
details.card>summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:500}
details.card>summary::-webkit-details-marker{display:none}
details.card[open]>summary{border-bottom:1px solid var(--line-soft)}

/* Live releases: a strip above every page while something is on its way to a store */
.live{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.live:empty{display:none}
.live-item{position:relative;overflow:hidden;padding:16px 18px 14px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line-soft)}
.live-item::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--sky)}
.live-item.done::before{background:var(--ok)}
.live-item.failed::before{background:var(--rose)}
.live-head{display:flex;align-items:center;gap:12px}
.live-head .app-ico{width:38px;height:38px;border-radius:11px;font-size:16px}
.live-head .grow{flex:1;min-width:0}
.live-head b{font-weight:600}
.live-head .to{color:var(--ink-3);font-weight:400}
.live-head small{display:block;margin-top:2px;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.live-item.failed .live-head small{color:var(--rose)}
.live-item.done .live-head small{color:var(--ok-ink)}
.live-time{font-family:var(--mono);font-size:13px;color:var(--ink-3);direction:ltr}
.live-close{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3)}
.live-close:hover{background:var(--sunken)}
.live-lane{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:14px}
.live-step{position:relative;padding-top:13px;font-size:11.5px;color:var(--ink-3);min-width:0}
.live-step::before{content:"";position:absolute;inset-inline:0;top:0;height:7px;border-radius:var(--r-pill);background:var(--sunken)}
.live-step.done::before{background:var(--ok)}
.live-step.now{color:var(--ink);font-weight:500}
.live-step.now::before{background:var(--sky-soft)}
.live-step.now .fill{position:absolute;inset-inline-start:0;top:0;height:7px;border-radius:var(--r-pill);background:var(--sky);transition:width .3s var(--ease)}
.live-step.now.indeterminate .fill{width:35%;animation:live-run 1.4s var(--ease) infinite}
.live-step.fail{color:var(--rose);font-weight:500}
.live-step.fail::before{background:var(--rose)}
.live-step span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes live-run{0%{inset-inline-start:0;width:20%}50%{width:45%}100%{inset-inline-start:80%;width:20%}}
@media (max-width:560px){.live-step span{font-size:10.5px;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}}
@media (prefers-reduced-motion:reduce){.live-step.now.indeterminate .fill{animation:none;width:100%;opacity:.6}}

.toasts{position:fixed;inset-inline:0;bottom:20px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:50;pointer-events:none}
.toast{padding:10px 16px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.toast.err{background:var(--rose)}

@media (max-width:860px){
  .tr-steps li:not(.now):not(.at-end) .tr-name{display:none}
  .req{flex-wrap:wrap}
  .req .acts{width:100%}
  .req .acts .btn{flex:1}
}
.switching *{transition:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Agents card (overview) */
.agents{margin-top:14px;padding:18px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.agents .txt{flex:1;min-width:220px}
.agents h2{font-size:15.5px;font-weight:600}
.agents p{color:var(--ink-3);font-size:13.5px;margin-top:2px}
.agent-list{display:flex;gap:8px;flex-wrap:wrap}
.agent{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);background:var(--sunken);font-size:13px;color:var(--ink-2)}
.agent.on{background:var(--ok-soft);color:var(--ok-ink)}
.agent svg{width:14px;height:14px}
.list .app-ico .i{width:20px;height:20px}
.list .app-ico:has(.i){background:var(--sunken);color:var(--ink-2)}
/* Store icons and the store card */
/* A store icon sits in a frame: a hairline, a little paper around it, and corners that follow its size */
.app-ico.img{background:var(--surface);padding:3px;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(23,24,27,.06)}
.app-ico.img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:22%}
.app-ico.lg{width:56px;height:56px;border-radius:15px;font-size:24px}
.app-head{align-items:center;gap:14px}
.app-head .grow{min-width:0;flex:1}
.store-h{font-size:13px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.plat-tags{display:flex;gap:6px;flex:none}
.item:has(.plat-tags){flex-wrap:wrap}
@media (max-width:640px){.plat-tags{order:5;flex-basis:100%;padding-inline-start:58px}}
/* Distribution certificate, under an App Store connection */
.ident{flex-basis:100%;margin-top:4px;padding:12px 14px;border-radius:var(--r-ctl);background:var(--canvas)}
.ident b{font-weight:500}
.ident small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.ident-form{margin-top:12px}
.ident-form .acts{display:flex;gap:8px;justify-content:flex-end}
.item:has(> .ident){flex-wrap:wrap}
/* Agents board */
.board-filter{margin-bottom:16px;flex-wrap:wrap}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.col{background:var(--sunken);border-radius:var(--r-card);padding:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
.col h2{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;padding:2px 6px 4px}
.col h2 .n{font-size:12px;color:var(--ink-3);background:var(--surface);border-radius:var(--r-pill);padding:1px 9px}
/* A part whose read failed (unread): the empty state's shape, a red mark, a short reason */
p.empty.failed::before{width:34px;height:34px;border-radius:50%;background:var(--rose-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8264f' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7.5v6M12 16.5v.5'/%3E%3C/svg%3E") center/18px no-repeat}
p.empty.failed{color:var(--ink-2);font-size:13.5px}
.col .empty{padding:18px 8px;font-size:13px}
.col p.empty::before{width:28px;height:32px;margin-bottom:6px}
.col-waiting h2 span:first-child{color:var(--amber)}
.col-stuck h2 span:first-child{color:var(--rose)}
.bcard{display:block;background:var(--surface);border-radius:14px;padding:12px;box-shadow:0 0 0 1px var(--line-soft);color:inherit;text-decoration:none;transition:box-shadow .15s}
.bcard:hover{box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(0,0,0,.05)}
.bc-top{display:flex;gap:10px;align-items:center}
.bc-top .app-ico{width:34px;height:34px;border-radius:10px;font-size:15px}
.bc-top .grow{min-width:0}
.bc-top b{display:block;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-top small{display:block;color:var(--ink-3);font-size:12px}
.bc-what{font-size:13.5px;font-weight:500;margin-top:8px}
.bc-line{font-size:13px;color:var(--ink-2);margin-top:6px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bc-bar{height:5px;border-radius:var(--r-pill);background:var(--sky-soft);margin-top:8px;overflow:hidden}
.bc-bar i{display:block;height:100%;background:var(--sky);border-radius:inherit}
.bc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--ink-3)}
.bc-foot>span:last-child{white-space:nowrap;flex:none}
.bc-foot .who{min-width:0;background:var(--sunken);border-radius:var(--r-pill);padding:1px 8px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-foot .who.agent{background:var(--violet-soft);color:var(--violet-ink)}
@media (max-width:1100px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phones: columns side by side, swiped one at a time */
@media (max-width:640px){
  .board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .board::-webkit-scrollbar{display:none}
  .col{flex:0 0 86%;scroll-snap-align:center}
}
.seg a{padding:6px 14px;border-radius:var(--r-pill);font-size:14px;color:var(--ink-2);text-decoration:none}
.seg a[aria-current=true]{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--shadow)}
/* Release page */
a.plain{color:inherit;text-decoration:none}
a.plain:hover{text-decoration:underline}
a.item.linked{color:inherit;text-decoration:none}
a.item.linked:hover{background:var(--hover)}
.rel-hero{margin-top:4px}
.rel-hero .live-lane{margin-top:0}
.rel-hero .live-step{font-size:12.5px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{position:relative;padding-block:0 16px;padding-inline-start:22px;border-inline-start:2px solid var(--line-soft);margin-inline-start:6px}
.timeline li:last-child{padding-bottom:0;border-color:transparent}
.timeline li::before{content:"";position:absolute;inset-inline-start:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--ink-3)}
.timeline li.good::before{box-shadow:0 0 0 2px var(--violet);background:var(--violet-soft)}
.timeline li.bad::before{box-shadow:0 0 0 2px var(--rose);background:var(--rose-soft)}
.timeline b{display:block;font-weight:500;font-size:14px}
.timeline small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
/* Board cards: the state reads from a mark on the status line, not a side stripe */
.bcard.failed .bc-line,.bcard.pending .bc-line{display:flex;gap:7px;align-items:baseline}
.bcard.failed .bc-line{color:var(--rose)}
.bcard.pending .bc-line{color:var(--amber)}
.bcard.failed .bc-line::before,.bcard.pending .bc-line::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;transform:translateY(-1px)}

/* Several releases at once: the strip tightens so the page stays the page */
.live:has(.live-item + .live-item) .live-item{padding:10px 14px}
.live:has(.live-item + .live-item) .live-head .app-ico{width:30px;height:30px;border-radius:9px;font-size:13px}
.live:has(.live-item + .live-item) .live-head small{font-size:12.5px;margin-top:0}
.live:has(.live-item + .live-item) .live-lane{margin-top:8px}
.live:has(.live-item + .live-item) .live-step{padding-top:9px}
.live:has(.live-item + .live-item) .live-step::before,.live:has(.live-item + .live-item) .live-step.now .fill{height:5px}
.live:has(.live-item + .live-item) .live-step:not(.now):not(.fail) span{visibility:hidden}

/* Browser surfaces in the palette */
html{accent-color:var(--violet);caret-color:var(--violet);scrollbar-color:var(--line) transparent}
::selection{background:var(--violet-soft);color:var(--violet-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,.bcard:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.live-time,.col h2 .n,.count,.mono,td,.bc-foot{font-variant-numeric:tabular-nums}
/* Phones: the strip says what and where in two lines; the header wraps its status chip */
@media (max-width:640px){
  .live:has(.live-item + .live-item) .live-head .to,.live:has(.live-item + .live-item) .live-step span{display:none}
  .live:has(.live-item + .live-item) .live-step{padding-top:0}
  .app-head{flex-wrap:wrap}
  .app-head h1{font-size:24px}
}
.bc-foot{flex-wrap:wrap}
.bc-foot .who{flex:0 1 auto}
.chip.placeholder{color:transparent;background:var(--sunken)}
/* Store page editor */
html[dir=rtl] .flip{transform:scaleX(-1)}
.lbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.lang-seg{flex-wrap:wrap}
.seg .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-inline-start:4px;vertical-align:middle}
.note{margin-bottom:14px}
.lform{display:grid;gap:18px}
.lfield{display:grid;gap:6px}
.lf-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lf-head label{font-weight:500;font-size:14px}
.lfield .count{font-size:12px;color:var(--ink-3)}
.lfield .count.over{color:var(--rose);font-weight:600}
.lfield.changed textarea,.lfield.changed input{box-shadow:inset 0 0 0 1.5px var(--amber),0 0 0 4px var(--amber-soft)}
.lfield .was{font-size:13px;color:var(--ink-3)}
.lfield .was summary{cursor:pointer;color:var(--amber)}
.lfield .was p{margin-top:6px;white-space:pre-wrap;color:var(--ink-2)}
.shots-group+.shots-group{margin-top:18px}
.shots-group h3{font-size:14px;font-weight:600;margin-bottom:10px}
.shots{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.shot{flex:none;width:118px;margin:0;scroll-snap-align:start;display:grid;gap:6px}
.shots.wide .shot{width:240px}
.shot img{width:100%;aspect-ratio:auto;border-radius:12px;box-shadow:0 0 0 1px var(--line-soft);display:block;background:var(--sunken)}
.shot .processing{display:grid;place-items:center;aspect-ratio:9/19.5;border-radius:12px;background:var(--sunken);color:var(--ink-3);font-size:12px;text-align:center;padding:8px}
.shot figcaption{display:flex;justify-content:center;gap:2px}
.shot.add{cursor:pointer;place-content:center;justify-items:center;aspect-ratio:9/19.5;border-radius:12px;border:1.5px dashed var(--line);color:var(--ink-2);font-size:13px}
.shots.wide .shot.add{aspect-ratio:2/1}
.shot.add:hover{border-color:var(--violet);color:var(--violet-ink)}
/* App previews play in place, with their poster; Play's promo video shows its YouTube thumbnail. */
.shot.preview{width:150px}
.shot.preview video{width:100%;max-height:340px;border-radius:12px;background:#000;display:block;box-shadow:0 0 0 1px var(--line-soft)}
.shot.preview .processing{position:relative;overflow:hidden}
.shot.preview .processing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;border-radius:0;box-shadow:none}
.shot.preview .processing span{position:relative}
.shot.preview.failed .processing{color:var(--rose)}
.shot.preview a.processing{aspect-ratio:9/19.5;color:var(--violet-ink)}
.shot.preview .btn.xs{justify-self:center}
.pv-note{font-size:11.5px;color:var(--ink-3);text-align:center;overflow-wrap:anywhere}
.pv-note.err{color:var(--rose);text-align:start}
.sp-thumbs{display:flex;gap:6px;height:56px;overflow:hidden}
.sp-thumbs img{height:100%;width:auto;border-radius:8px;box-shadow:0 0 0 1px var(--line-soft);background:var(--sunken)}
.sp-yt{position:relative;display:block;width:min(320px,100%);aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line-soft);background:var(--sunken)}
.sp-yt img{width:100%;height:100%;object-fit:cover;display:block}
.sp-yt-play{position:absolute;left:50%;top:50%;width:52px;height:36px;margin:-18px 0 0 -26px;border-radius:10px;background:rgba(23,24,27,.75)}
.sp-yt-play::after{content:"";position:absolute;left:21px;top:11px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff}
.icon-btn.sm{width:30px;height:30px}
.icon-btn.sm .i{width:16px;height:16px}
.icon-btn:disabled{opacity:.35;cursor:default}
.publish-bar{position:sticky;bottom:14px;z-index:5;margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r-card);background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.publish-bar small{color:#d9d6e6}
.publish-bar .btn.quiet{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.publish-bar .btn.primary{background:#fff;color:var(--ink)}
/* A card can be removed from the apps page; the button sits over the link, not inside it */
.app-wrap{position:relative;display:flex}
.app-wrap>.app{flex:1}
.app-remove{position:absolute;inset-block-start:12px;inset-inline-end:12px;opacity:0;transition:opacity .15s}
.app-wrap:hover .app-remove,.app-remove:focus-visible{opacity:1}
@media (hover:none){.app-remove{opacity:1}}
.chip.off{background:var(--amber-soft);color:var(--amber)}
/* Store connections: one card per provider */
.providers{display:grid;gap:14px}
/* Store connections: a tile per store on top, connected or not, the chosen one outlined */
.conn-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:16px}
.conn-tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:14px 16px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line-soft);color:var(--ink);text-decoration:none;transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.conn-tile:hover{box-shadow:var(--shadow),0 0 0 1px var(--ink-3)}
.conn-tile:active{transform:scale(.985)}
.conn-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.conn-tile[aria-current="true"]{box-shadow:0 0 0 2px var(--ink)}
.conn-tile.off .prov-mark{opacity:.55}
.conn-tile-top{display:flex;align-items:center;gap:10px;min-width:0;width:100%}
.conn-tile-top b{font-size:15px;font-weight:600;line-height:1.25;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.conn-tiles .conn-tile .prov-mark{width:34px;height:34px;border-radius:10px;padding:8px}
.conn-tile-who{font-size:12px;color:var(--ink-3);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conn-pick{font-size:13.5px;padding:6px 2px}
@media (max-width:640px){.conn-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.conn-tile{padding:12px}}
.provider{padding:0;overflow:hidden}
.prov-head{display:flex;align-items:center;gap:14px;padding:18px 20px}
.prov-head h2{font-size:17px;font-weight:600}
.prov-head p{color:var(--ink-2);font-size:13.5px;margin-top:2px}
.prov-mark{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-weight:700;font-size:19px;flex:none;color:#fff}
.prov-list{border-top:1px solid var(--line-soft)}
.prov-item{flex-wrap:wrap;padding-inline:20px}
.prov-item small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.prov-item .acts{display:flex;gap:8px;flex:none}
.prov-foot{padding:12px 20px;border-top:1px solid var(--line-soft)}
.prov-form{padding:16px 20px 20px;border-top:1px solid var(--line-soft);background:var(--surface)}
.prov-form h3{font-size:14px;font-weight:600}
.prov-form .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.steps{margin:8px 0 14px;padding-inline-start:20px;display:grid;gap:6px;color:var(--ink-2);font-size:13.5px}
.steps li::marker{color:var(--violet);font-weight:600}
.vault-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;color:var(--ink-3);font-size:13px}
.vault-note .i{width:16px;height:16px;flex:none;margin-top:1px}
@media (max-width:640px){.prov-head{flex-wrap:wrap}.prov-head .grow{flex-basis:calc(100% - 58px)}.prov-head .chip{order:3;margin-inline-start:58px}.prov-item .acts{width:100%}.prov-item .acts .btn{flex:1}}
.prov-head .grow{flex:1;min-width:0}
@media (max-width:640px){.prov-head .grow{flex:1 1 calc(100% - 58px)}.prov-head .btn{order:3;margin-inline-start:58px}}
/* In-app purchases card */
.findings{display:grid;gap:8px;margin-top:8px}
.finding{padding:10px 12px;border-radius:var(--r-ctl);background:var(--canvas)}
.finding b{display:flex;gap:8px;align-items:baseline;font-weight:500;font-size:13.5px}
.finding b::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;transform:translateY(-1px);background:var(--ink-3)}
.finding.error b::before{background:var(--rose)}
.finding.warning b::before{background:var(--amber)}
.finding small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px;padding-inline-start:15px}
.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:12px}
.metric{padding:10px 12px;border-radius:var(--r-ctl);background:var(--canvas)}
.metric b{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.metric small{color:var(--ink-3);font-size:12.5px}
/* Downloads and sales: totals with their change, and 30 days of bars drawn by our own code */
.sl-stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.sl-stat .chip{margin-top:4px;font-size:12px;padding:1px 8px}
.sl-change::before{display:none}
.sl-chart{margin:16px 0 0}
.sl-bars{display:flex;align-items:flex-end;gap:2px;height:96px;padding-bottom:1px;border-bottom:1px solid var(--line)}
.sl-bar{flex:1;min-width:0;height:var(--h);background:var(--violet);border-radius:2px 2px 0 0;opacity:.85;transition:opacity .15s var(--ease)}
.sl-bar:hover{opacity:1}
.sl-bar.neg{background:var(--rose)}
.sl-bar.none{height:100%;background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line-soft) 3px 5px);opacity:1}
.sl-axis{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:4px}
.sl-foot{font-size:12.5px;margin:10px 0 0}
.sl-more{font-size:12.5px;margin:8px 0 0}
.sl-owners{font-size:12.5px;margin-top:14px}
.sl-sub{margin:18px 0 6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.sl-sources{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sl-sources li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(40px,1fr) auto;align-items:center;gap:10px;font-size:13.5px}
.sl-sources li>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-share{height:6px;border-radius:var(--r-pill);background:linear-gradient(to var(--end,right),var(--violet) var(--w),var(--line-soft) var(--w))}
[dir=rtl] .sl-share{--end:left}
.sl-start{margin-inline-start:4px}
.subjects{display:flex;flex-wrap:wrap;gap:6px}
.finding .subjects{margin-top:6px;padding-inline-start:15px}
.subjects code{font-family:var(--mono);font-size:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line-soft);border-radius:6px;padding:1px 6px}
.item .subjects code{background:var(--canvas)}

/* The release track: the newest version's path in each store, on every page of an app */
#track:empty{display:none}
.track{position:relative;display:flex;flex-direction:column;gap:2px;margin-top:16px;padding:8px 16px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line-soft);color:var(--ink);text-decoration:none;font-size:13px;transition:box-shadow .15s}
.track:hover{box-shadow:var(--shadow),0 0 0 1px var(--line)}
/* A row per store: its name, the version, then its steps; the rows' columns line up */
.tr-lane{display:grid;grid-template-columns:150px 120px minmax(0,1fr);align-items:center;gap:14px;min-height:34px;padding-inline-end:80px}
.tr-lane{position:relative}
/* The line between the stores' rows stops before the link to Release at the end */
.tr-lane+.tr-lane::before{content:"";position:absolute;top:0;inset-inline-start:0;inset-inline-end:80px;border-top:1px solid var(--line-soft)}
.tr-store{display:flex;align-items:center;gap:8px;min-width:0}
.tr-store .slogo{width:15px;height:15px;margin:0;flex:none}
.tr-store b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-ver{font-family:var(--mono);font-weight:500;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.tr-ver small{color:var(--ink-3);font-size:11.5px}
.tr-steps{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex:1;min-width:0}
.tr-steps li{display:flex;align-items:center;gap:6px;flex:1;min-width:0;color:var(--ink-3)}
.tr-steps li:last-child{flex:none}
.tr-steps li:not(:last-child)::after{content:"";flex:1;min-width:10px;height:2px;margin-inline:4px;border-radius:2px;background:var(--line)}
.tr-steps li.done:not(:last-child)::after{background:var(--violet)}
.tr-dot{width:12px;height:12px;flex:none;box-sizing:border-box;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.tr-steps .done .tr-dot{background:var(--violet);border-color:var(--violet)}
.tr-steps .done.at-end{color:var(--live-ink);font-weight:500}
.tr-steps .done.at-end .tr-dot{background:var(--live);border-color:var(--live)}
.tr-steps .now{font-weight:500}
.tr-steps .now .tr-dot{border:3px solid currentColor}
.tr-steps .now.processing{color:var(--sky)}
.tr-steps .now.wait{color:var(--amber)}
.tr-steps .now.fail{color:var(--rose)}
.tr-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-open{position:absolute;top:50%;inset-inline-end:16px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:4px;color:var(--violet-ink);font-weight:500;white-space:nowrap}
.tr-open .i{width:14px;height:14px}

/* Island: one floating bar on top: the jellyfish (the workspace sheet), the app, its stages as
   tabs, search, approvals and the account; the open tab's pages hang under it as tentacles. */
.island-at{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;align-self:center;max-width:calc(100% - 32px);margin-top:20px}
.main>#track,.main>#live,.main>#view{margin-inline:auto}
.main>#view{padding-top:22px}
.island{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:6px;border-radius:30px;background:var(--surface);box-shadow:0 1px 0 rgba(23,24,27,.03),0 12px 32px rgba(60,40,140,.08),0 0 0 1px var(--line-soft)}
.bell{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .15s}
.bell:hover,.bell[aria-expanded=true]{background:var(--violet-soft)}
.bell img{display:block}
/* When it hides, it goes under the bar's lower edge and peeks out from it: jelly.js sets --edge. */
.bell ploa-jelly{display:block;width:24px;height:28px;clip-path:inset(-16px -16px calc(-1 * var(--edge, 14px)))}
/* The bar's end is a half circle 28px across; the logo sits 13px further in, over a straight stretch of
   the bar's lower edge, so that's the line it dives under and peeks over. */
.island > .bell{margin-inline-start:13px}
.isl-sep{width:1px;height:24px;margin:0 4px;background:var(--line)}
.isl-app:empty{display:none}
.isl-appbtn{display:flex;align-items:center;gap:9px;height:44px;padding-inline:6px 12px;border-radius:var(--r-pill);transition:background .15s}
.isl-appbtn:hover{background:var(--sunken)}
.isl-appbtn .app-ico{width:32px;height:32px;border-radius:10px;font-size:15px}
.isl-appbtn b{max-width:180px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.isl-appbtn .i{width:15px;height:15px;color:var(--ink-3)}
.isl-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.isl-tabs a{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:var(--r-pill);color:var(--ink-2);text-decoration:none;font-size:14.5px;white-space:nowrap;transition:background .15s,color .15s}
.isl-tabs a:hover{background:var(--sunken);color:var(--ink)}
.isl-tabs a[aria-current]{background:var(--ink);color:#fff;font-weight:500}
.isl-btn{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background .15s}
.isl-btn:hover{background:var(--sunken)}
.isl-btn[aria-current]{background:var(--violet-soft);color:var(--violet-ink)}
.tentacles{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tentacles:empty{display:none}
.tentacles li{display:flex;flex-direction:column;align-items:center}
/* The stems: curves from the bar's lower edge to each pill (drawStems), under both. */
.stems{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden}
.stems path{fill:none;stroke:color-mix(in srgb,var(--violet) 32%,var(--line));stroke-width:1.8;stroke-linecap:round}
.stems path.on{stroke:var(--violet);stroke-width:2.2}
.tentacles a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--ink-2);text-decoration:none;font-size:13.5px;white-space:nowrap;transition:box-shadow .15s,color .15s}
.tentacles a:hover{box-shadow:0 0 0 1px var(--violet);color:var(--ink)}
.tentacles a[aria-current]{background:var(--violet-ink);color:#fff;font-weight:500;box-shadow:0 6px 16px rgba(90,63,224,.25)}
.tent-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--line)}
.tent-dot.ok{background:var(--violet)}
.tent-dot.prod{background:var(--live)}
.tent-dot.review,.tent-dot.processing{background:var(--sky)}
.tent-dot.wait{background:var(--amber)}
.tent-dot.fail{background:var(--rose)}
.tentacles a[aria-current] .tent-dot{box-shadow:0 0 0 2px #fff}
.sheet{position:absolute;top:calc(100% + 10px);inset-inline-start:0;z-index:30;width:340px;display:flex;flex-direction:column;gap:12px;padding:14px;box-sizing:border-box;border-radius:26px;background:var(--surface);box-shadow:0 18px 48px rgba(60,40,140,.14),0 0 0 1px var(--line-soft)}
.sheet-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sheet-tiles a{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:16px;background:var(--canvas);color:var(--ink);text-decoration:none;font-size:13.5px;transition:background .15s}
.sheet-tiles a:hover{background:var(--sunken)}
.sheet-tiles a[aria-current]{box-shadow:inset 0 0 0 1.5px var(--violet)}
.sheet-tiles span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.sheet-tiles .i{width:17px;height:17px}
.sheet-tiles b{font-weight:500}
/* On a phone the island is two rows: the jellyfish, the app, search and approvals, then the tabs;
   the tabs and the tentacles scroll sideways instead of wrapping. */
@media (max-width:860px){
  .island-at{align-self:stretch;max-width:none;margin-top:10px;padding-inline:12px}
  .island{align-self:stretch;flex-wrap:wrap;justify-content:flex-start;border-radius:24px}
  /* On a phone it hides under its own row, inside the bar, away from the corners. */
  .island > .bell{margin-inline-start:0}
  .isl-sep{display:none}
  .isl-app{flex:1;min-width:0}
  .isl-appbtn{max-width:100%}
  .isl-tabs{order:5;flex:1 1 100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .tentacles{align-self:stretch;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .sheet{position:fixed;top:70px;inset-inline:12px;width:auto}
}

/* Search: one field over every page, app and app page */
.find{width:min(560px,calc(100% - 32px));max-height:min(70vh,560px);margin-top:12vh;padding:0;border:0;border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 24px 64px rgba(23,24,27,.22)}
.find[open]{display:flex;flex-direction:column}
.find::backdrop{background:rgba(23,24,27,.25)}
.find-in{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line-soft)}
.find-in .i{color:var(--ink-3)}
.find-in input[type=search],.find-in input[type=search]:focus{flex:1;height:38px;padding:0;background:none;box-shadow:none}
.find-list{display:flex;flex-direction:column;gap:6px;padding:6px;overflow-y:auto;overscroll-behavior:contain}
.find-group{display:flex;flex-direction:column;gap:1px}
.find-group+.find-group{padding-top:6px;border-top:1px solid var(--line-soft)}
.find-list a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;color:var(--ink);text-decoration:none}
.find-list a[hidden],.find-group[hidden]{display:none}
.find-list a:hover,.find-list a:focus-visible{background:var(--sunken);outline:none}
.find-list .grow{flex:1;min-width:0}
.find-list b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.find-list small{display:block;font-size:12px;color:var(--ink-3)}
.find-list .app-ico{width:30px;height:30px;border-radius:9px;font-size:13px}
.find-ico{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.find-ico .i{width:16px;height:16px}
.find .sw-none{padding:12px 16px}

/* Settings › Layout: a card per layout, with a small picture of it */

/* A section: its store above the title, its own refresh at the end */
.sec-page .grow{flex:1 1 320px;min-width:0}
.sec-page p{max-width:64ch}
.eyebrow{display:inline-flex;align-items:center;font-size:12.5px;font-weight:500;color:var(--ink-3);margin-bottom:6px}
.eyebrow .i{width:14px;height:14px;margin-inline-end:4px}
.sec-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Kit 6 · refresh that knows its age (freshControl): the dot is green under an hour, amber after,
   sky while asking again */
.fresh{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 4px;padding-inline-start:12px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:13px;color:var(--ink-2);white-space:nowrap;transition:box-shadow .15s,color .15s}
.fresh:hover:not(:disabled){box-shadow:0 0 0 1px var(--violet)}
.fresh:disabled{cursor:default}
.fresh-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--line)}
.fresh[data-age=none] .fresh-dot{display:none}
.fresh[data-age=new] .fresh-dot{background:var(--live);box-shadow:0 0 0 3px var(--live-soft)}
.fresh[data-age=old] .fresh-dot{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.fresh[data-age=busy]{color:var(--sky)}
.fresh[data-age=busy] .fresh-dot{background:var(--sky);box-shadow:0 0 0 3px var(--sky-soft)}
.fresh-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--sunken);color:var(--ink)}
.fresh[data-age=busy] .fresh-ico{background:var(--sky-soft);color:var(--sky)}
.fresh-ico .i{width:14px;height:14px;stroke-width:2}
.spinning .i{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#sec-body>:first-child{margin-top:0}
.sec-card{padding:18px 20px;margin-top:14px}
.sec-card.flush{padding:4px 0}
.sec-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:32px}
.sec-card-h h2{font-size:16px;font-weight:600}
.sec-card>.list{margin:6px -20px -6px}
.sec-card.flush>.list{margin:0}
.sec-card>.empty{padding:20px 0 8px}
.sec-card>.msg,.sec-card>.note{margin:10px 0 0}
.sec-card .help{font-size:13.5px;margin-top:4px;max-width:70ch}
.acts-row{margin-top:16px;gap:8px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px 20px;margin-top:12px}
.fact{min-width:0}
.fact>small{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:3px}
.fact>span{display:block;overflow-wrap:anywhere}
.fact .fp{font-size:12px}
.item-stack{flex-wrap:wrap;row-gap:8px}
.check-msg{display:block;margin-top:2px}

/* Long lists and texts open on demand */
.more-rest{display:contents}
.more-rest[hidden]{display:none}
.more-rest>.item:first-child{border-top:1px solid var(--line-soft)}
.more-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:11px 20px;border-top:1px solid var(--line-soft);font-size:13.5px;font-weight:500;color:var(--violet-ink)}
.more-btn:hover{background:var(--hover)}
.more-btn.inline{display:inline;width:auto;padding:0;border:0;margin-inline-start:4px;background:none}
.more-btn.inline:hover{text-decoration:underline}
.findings .more-btn,.used-by .more-btn{border:0;border-radius:var(--r-ctl);padding:8px 12px}
.used-by .more-btn{width:auto;padding:3px 10px}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.clamp.open{display:block;-webkit-line-clamp:unset}

/* Overview: a card per store, each section with its line */
/* Cards side by side are level: each spans two of the grid's rows (head, list) as a subgrid, so the
   heads share a height, the rows start together and the cards end together. Two to a row, half the
   width each (the last one, "Both stores", on its own row below); one to a row once half would be
   under 300px. */
.ov-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(300px,calc(50% - 7px)),1fr));column-gap:14px;row-gap:0}
.ov-card{overflow:hidden;display:grid;grid-row:span 2;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0;margin-bottom:14px}
.ov-card .list{align-self:start}
/* One line per row: the section's name stays whole, its chip gives way with an ellipsis */
.ov-card .item>.grow{flex:1 0 auto;white-space:nowrap}
.ov-card .item>.chip{display:block;flex:0 1 auto;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-card .item>.chip::before{display:inline-block;vertical-align:middle;margin-inline-end:6px;margin-top:-2px}
.ov-head{display:flex;align-items:center;gap:12px;padding:16px 20px 12px}
.ov-head-top{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.ov-head h2{font-size:16px;font-weight:600}
.ov-head .prov-mark{width:32px;height:32px;border-radius:10px;font-size:15px}
.ov-card .list{border-top:1px solid var(--line-soft)}
.ov-card .item{height:48px;padding:0 20px;gap:12px}
.ov-card .item>.i:first-child{color:var(--ink-3)}
.ov-card .chip{max-width:58%;overflow:hidden;text-overflow:ellipsis}
.ov-card .chev{width:16px;height:16px;color:var(--ink-3)}
/* Three stores or more: the stores' card is a table across the whole width, a column per store
   under its name; the other cards fill in two to a row above it */
.ov-groups.dense{grid-auto-flow:row dense}
.ov-card.wide{grid-column:1/-1;--min:150px}
.ov-card.wide .ov-head{flex-direction:column;align-items:stretch;gap:10px;padding-bottom:10px}
.ov-card.wide .pager{margin:0}
.ov-card.wide .item,.ov-cols-row{display:grid;grid-template-columns:18px 190px minmax(0,1fr) 16px;column-gap:12px}
.ov-cols-row .ov-cols{grid-column:3}
.ov-card.wide .ov-parts{display:grid;justify-content:stretch;--g:10px;column-gap:var(--g)}
.ov-card.wide .ov-part{min-width:0}
.ov-card.wide .item>.grow{overflow:hidden;text-overflow:ellipsis}
.ov-card.wide .ov-part .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block}
.ov-col{display:inline-flex;align-items:center;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-col .slogo{width:14px;height:14px;margin-inline-end:6px}
@media (max-width:640px){.ov-card.wide .item,.ov-cols-row{grid-template-columns:18px 110px minmax(0,1fr) 16px}}

/* Settings: groups of rows, label and help at the start, the control at the end */
.settings{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;align-items:start}
.settings:not(:has(.set-index)){display:block}
.set-index{position:sticky;top:20px;display:flex;flex-direction:column;gap:2px}
.set-index a{padding:7px 10px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-size:14px}
.set-index a:hover{background:var(--sunken);color:var(--ink)}
.set-groups{display:grid;gap:14px}
.set-group{padding:4px 20px;margin-top:14px;scroll-margin-top:16px}
.set-groups .set-group{margin-top:0}
.set-group h2{font-size:16px;font-weight:600;padding:14px 0 8px}
.set-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line-soft)}
.set-row .grow{flex:1;min-width:0}
.set-row label,.set-row .grow>b{display:block;font-weight:500;font-size:14.5px}
.set-row .grow>small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px;max-width:62ch}
.set-ctl{flex:none;max-width:50%;text-align:end;overflow-wrap:anywhere}
.set-ctl{--fh:36px}
.set-ctl select{width:auto;min-width:200px}

/* Store connections: the apps each one serves */
.used-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.prov-item .used-by>small{display:inline;margin:0;margin-inline-end:2px}
.app-chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 10px;border-radius:var(--r-pill);background:var(--canvas);box-shadow:0 0 0 1px var(--line-soft);color:var(--ink);text-decoration:none;font-size:13px}
.app-chip:hover{box-shadow:0 0 0 1px var(--line)}
.app-chip .app-ico{width:20px;height:20px;border-radius:6px;font-size:11px}
.app-chip .app-ico.img{padding:1px}

@media (max-width:640px){
  .settings{display:block}
  .set-index{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:12px}
  .set-index a{padding:5px 12px;font-size:13px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
  .set-row{flex-wrap:wrap;gap:10px}
  .set-ctl{max-width:100%;width:100%;text-align:start}
  .set-ctl select{width:100%}
  .sec-tools{width:100%;justify-content:space-between}
  .ov-groups{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.spinning .i{animation:none}}

/* Releases: a store row Ploa made links to it */
a.chip.ploa{background:var(--surface);color:var(--violet-ink);box-shadow:0 0 0 1px var(--violet-soft);text-decoration:none}
a.chip.ploa::before{background:var(--violet)}
a.chip.ploa:hover{background:var(--violet-soft)}
.notes{margin-top:6px;font-size:13px;color:var(--ink-2)}
.notes summary{cursor:pointer;color:var(--violet-ink);width:max-content}
.notes p{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.notes .mono{color:var(--ink-3);margin-inline-end:6px}

/* Deleting something that matters: a modal that asks for the word */
.btn.solid-danger{background:var(--rose);color:#fff}
.btn.solid-danger:hover:not(:disabled){background:#a81d40}
.btn.solid-danger:disabled{opacity:.4}
.danger-dialog{border:0;padding:0;border-radius:var(--r-card);background:var(--surface);color:var(--ink);width:min(440px,calc(100vw - 32px));box-shadow:0 20px 60px rgba(23,24,27,.18),0 0 0 1px var(--line-soft)}
.danger-dialog::backdrop{background:rgba(23,24,27,.32)}
.danger-dialog form{display:flex;flex-direction:column;gap:10px;padding:22px}
.danger-dialog p{font-size:15px;line-height:1.5;font-weight:500}
.danger-dialog label{font-size:13px;color:var(--ink-2);margin-top:4px}
.danger-dialog .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* Store and company marks: filled, gray, inline before the name */
svg.slogo{width:16px;height:16px;flex:none;margin-inline-end:6px;vertical-align:-3px;color:var(--ink-3)}
.prov-mark.apple,.prov-mark.google,.prov-mark.samsung,.prov-mark.microsoft{background:var(--sunken);padding:11px}
.ov-head h2 .slogo{width:18px;height:18px;vertical-align:-3px;margin-inline-end:7px}
.prov-mark .slogo{width:100%;height:100%;margin:0}
.chip.store{display:inline-flex;align-items:center}
.chip.store .slogo{width:13px;height:13px;margin-inline-end:5px;color:currentColor}
.bc-top small .slogo{width:13px;height:13px;margin-inline-end:4px;vertical-align:-2px}
.plist{display:inline-flex;flex-wrap:wrap;gap:4px 12px}
.plist .pl{display:inline-flex;flex-direction:row;align-items:center;gap:5px;margin:0;white-space:nowrap}
.plist .pl .i{width:15px;height:15px;color:var(--ink-3)}
.ov-head .plist{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.plat .os{width:auto;min-width:96px;max-width:46%;display:inline-flex;align-items:center;overflow:hidden}
.plat .os span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plat .os .slogo{width:15px;height:15px}
.chip.store::before{display:none}

/* Settings › Security */
.sec-alerts p{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.sec-alerts .i{flex:none;margin-top:1px;color:var(--ink-3)}
.switch-row{display:flex;align-items:center;gap:14px;cursor:pointer}
.switch-row small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px;line-height:1.45}
.switch{appearance:none;flex:none;width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .15s;margin:0}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(23,24,27,.2);transition:inset-inline-start .15s}
.switch:checked{background:var(--ink)}
.switch:checked::after{inset-inline-start:21px}
.switch:disabled{opacity:.45;cursor:not-allowed}
.switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Done: a pale green circle with a green check (build and submission rows) */
.done-mark{width:20px;height:20px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:inline-grid;place-items:center;flex:none}
.done-mark .i{width:12px;height:12px;stroke-width:2.4}
.tf-setup{display:flex;gap:20px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
.tf-qr{flex:none;width:180px;padding:8px;background:#fff;border-radius:var(--r-ctl);box-shadow:0 0 0 1px var(--line)}
.tf-qr .qr{display:block;width:100%;height:auto}
.tf-setup .grow{min-width:220px}
.recovery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px 16px;margin:12px 0 14px;padding:14px;background:var(--sunken);border-radius:var(--r-ctl);font-size:14px;list-style:none}

/* Shipping: build, submission and run rows. A status circle, the mark, the title, then who, when,
   how long and the commit. */
.ship-row{align-items:flex-start}
.ship-row>.done-mark,.ship-row>.state-mark{margin-top:1px}
.ship-row>.chip{margin-top:1px}
.ship-row .grow b .slogo{width:14px;height:14px;margin-inline-end:6px;vertical-align:-2px}
.state-mark{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;flex:none;background:var(--sunken);color:var(--ink-3)}
.state-mark .i{width:12px;height:12px;stroke-width:2.4}
.state-mark.quiet::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.state-mark.wait{background:var(--amber-soft);color:var(--amber)}
.state-mark.wait::after{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.state-mark.fail{background:var(--rose-soft);color:var(--rose)}
.state-mark.processing{background:none;border:2px solid var(--sky-soft);border-top-color:var(--sky);animation:spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.state-mark.processing{animation:none;border-color:var(--sky)}}
.commit .mono{font-size:12px;background:var(--sunken);padding:1px 5px;border-radius:5px}
.sub-what{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px}
.sub-h{font-size:13px;font-weight:600;color:var(--ink-2);margin:16px 0 0}
.sec-card .sub-h+.help{margin-top:2px}
.sec-card .list+.help{margin-top:10px}
.rollout{display:block;width:160px;max-width:100%;height:5px;border-radius:var(--r-pill);background:var(--sky-soft);margin-top:8px;overflow:hidden}
.rollout i{display:block;height:100%;background:var(--sky);border-radius:inherit}
.run-steps{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12px;color:var(--ink-3)}
.run-steps li{display:flex;align-items:baseline;gap:5px}
.run-steps li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);align-self:center}
.run-steps li.done::before{background:var(--ok);box-shadow:none}
.run-steps li.running::before{background:var(--sky);box-shadow:none}
.run-steps li.waiting::before{background:var(--amber);box-shadow:none}
.run-steps li.failed{color:var(--rose)}
.run-steps li.failed::before{background:var(--rose);box-shadow:none}
.run-steps li.pending,.run-steps li.skipped{opacity:.7}
.run-steps li small{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.run-steps li.done span,.run-steps li.running span{color:var(--ink-2)}
.run-err{display:block;margin-top:6px;font-size:12.5px;color:var(--rose);overflow-wrap:anywhere}
.wf-def .grow b .slogo{width:14px;height:14px;margin-inline-end:6px;vertical-align:-2px}
.wf-chain{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:10px;font-size:12.5px}
.wf-chain li{position:relative;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink-2)}
/* The arrow sits in the gap between two steps; "›" is a mirrored character, so it points the
   reading direction on its own in Hebrew. */
.wf-chain li+li::before{content:"›";position:absolute;inset-inline-start:-13px;color:var(--ink-3);pointer-events:none}
.wf-chain li.gate{background:var(--amber-soft);color:var(--amber)}
.wf-chain li .i{width:13px;height:13px}
@media (max-width:640px){.ship-row{flex-wrap:wrap;row-gap:6px}.ship-row>.grow{flex:1 1 calc(100% - 34px)}.ship-row>.chip{order:3;margin-inline-start:34px}}
/* The shipping hub: a tile per page, its line, and its latest rows. The tiles share the grid's
   rows (subgrid), so headers, descriptions, row lines and "Open" sit level across a row of tiles. */
.ship-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));column-gap:14px;row-gap:0}
.ship-tile{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0;align-content:start;margin-bottom:14px;padding:18px 20px 14px;color:inherit;text-decoration:none;transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.ship-tile:hover{box-shadow:0 0 0 1px var(--line),0 6px 18px rgba(20,20,20,.06)}
.ship-tile:active{transform:scale(.995)}
/* The icon beside the name, the chip always on its own line under it */
.ship-tile header{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:5px;align-items:center;align-self:start;min-height:36px}
.ship-tile h2{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ship-tile header .chip{grid-column:2;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tile-ico{grid-row:span 2;align-self:start;width:36px;height:36px;border-radius:10px;background:var(--sunken);display:grid;place-items:center;color:var(--ink-2)}
.tile-ico .i{width:17px;height:17px}
.tile-about{font-size:13px;color:var(--ink-3);margin-top:10px;line-height:1.45;align-self:start}
.peek{list-style:none;padding:0;margin:12px 0 0;border-top:1px solid var(--line-soft);align-self:start}
.peek li{display:flex;align-items:center;gap:8px;height:36px;border-bottom:1px solid var(--line-soft);font-size:13.5px;min-width:0}
.peek li .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek li small{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.peek li .slogo{width:14px;height:14px;margin:0}
.peek li .done-mark,.peek li .state-mark{width:18px;height:18px}
.peek li.none{color:var(--ink-3);font-size:13px}
.peek.placeholder li{border-bottom-style:dashed}
.tile-more{display:inline-flex;align-items:center;gap:2px;align-self:end;padding-top:12px;font-size:13px;font-weight:500;color:var(--violet-ink)}
.tile-more .i{width:14px;height:14px}
@media (max-width:640px){.ship-tiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ship-tile{transition:none}}
/* Web: deployments carry a globe; the address form sits under the site's facts */
svg.env-mark{width:15px;height:15px;color:var(--ink-3);margin-inline-end:6px;vertical-align:-2px;flex:none}
.peek li .env-mark{width:14px;height:14px;margin:0}
.inline-form{margin-top:14px}
.inline-form input{flex:1;min-width:0}
.inline-form{flex-wrap:nowrap;gap:8px}
.snippet{margin-top:10px;padding:12px 14px;border-radius:var(--r-ctl);background:var(--sunken);font-size:13px;overflow-x:auto;white-space:pre}

/* Store pages: the App Store and Google Play side by side, in the same order */
.store-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;--g:16px;--min:320px}
.store-tiles[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.store-col{min-width:0;display:flex;flex-direction:column;gap:12px}
.store-col > div{display:flex;flex-direction:column;gap:12px;min-width:0}
.store-col > div > *{margin-top:0!important}
/* Kit 3 · store head: the one header above a store's column on every page (storeHead) */
.store-col-h{display:flex;align-items:center;gap:10px;min-height:28px;padding:0 4px;font-size:15px}
.store-col-h b{font-weight:600}
.smark{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--ink);color:#fff}
.smark .slogo{width:16px;height:16px;margin:0;color:currentColor;vertical-align:0}
.store-col-h .plist{margin-inline-start:auto;color:var(--ink-3);font-size:12.5px}
@media (max-width:860px){.store-tiles{grid-template-columns:minmax(0,1fr)}}
.store-tiles.aligned{align-items:stretch}
.store-tiles.aligned > .store-col,.store-tiles.aligned > .set-group{display:grid;grid-row:span var(--rows,1);grid-template-rows:subgrid;align-content:start;row-gap:0}
.store-tiles.aligned > .store-col{row-gap:12px}
.store-tiles.aligned > .store-col > [data-col]{display:contents}
/* A card marked data-span="3" (a summary, the store now) puts its heading, middle and foot each on a
   row of the shared grid, so those parts line up with the other store's whatever either says. */
.store-tiles.aligned > .store-col > [data-col] > [data-span="3"]{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.store-tiles.aligned > .set-group > .set-row{align-self:stretch}
.store-tiles.aligned > .sec-card{margin-top:0}
.ship-extra{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px}
.ship-extra.notes{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tf-state{white-space:nowrap}
.prod-id{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.iap-ends{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rc-badge::before{display:none}
.btn.xs{height:26px;padding:0 10px;font-size:12.5px}
.pair{position:relative}
.pair summary{list-style:none;cursor:pointer}
.pair summary::-webkit-details-marker{display:none}
.pair-pop{position:absolute;inset-inline-end:0;top:32px;z-index:5;width:min(300px,80vw);padding:12px;border-radius:var(--r-ctl);background:var(--surface);box-shadow:var(--shadow),0 8px 24px rgba(23,24,27,.12),0 0 0 1px var(--line-soft)}
.pair-list{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:8px}
.pair-list .btn{justify-content:flex-start;font-family:var(--mono)}
.warn-text{color:var(--amber)}
.ov-parts{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.ov-part{display:inline-flex;align-items:center;gap:4px}
.ov-part .slogo{width:13px;height:13px;color:var(--ink-3)}
.ov-marks{display:inline-flex;gap:6px;margin-inline-start:8px;vertical-align:-2px;color:var(--ink-3)}
.ov-marks .slogo{width:15px;height:15px}

/* Store page: a flow of rows, each with a tile per store that opens in place */
.sp-langs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center}
.sp-lang{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;border:0;font-family:inherit}
.sp-lang small{color:var(--ink-3);font-weight:400}
.sp-lang[aria-current="true"]{background:var(--ink);color:#fff;box-shadow:none}
.sp-lang[aria-current="true"] small{color:#cbc8d8}
.sp-lang .dot{width:7px;height:7px;border-radius:50%;background:var(--line)}
.sp-lang .dot.ok{background:var(--ok)}
.sp-lang .dot.wait{background:var(--amber)}
.sp-lang.add{color:var(--ink-2);background:transparent;box-shadow:0 0 0 1px var(--line) inset}
.sp-lang.add .i{width:15px;height:15px}
.sp-add{position:relative}
.sp-add-pop{position:absolute;z-index:20;top:40px;inset-inline-start:0;width:280px;max-width:calc(100vw - 32px);padding:8px;border-radius:var(--r-ctl);background:var(--surface);box-shadow:0 14px 40px rgba(23,24,27,.16),0 0 0 1px var(--line-soft)}
.sp-add-list{max-height:300px;overflow-y:auto;margin-top:6px}
.sp-add-list a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:14px}
.sp-add-list a:hover,.sp-add-list a:focus-visible{background:var(--sunken)}
.sp-add-list .slogo{width:12px;height:12px;margin-inline-start:4px}
.sp-note{margin-bottom:14px}
.sp-note .slogo{width:14px;height:14px;vertical-align:-2px}
.sp-todo{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:16px;flex-wrap:wrap}
.sp-todo b{font-size:14.5px}
.sp-todo-list{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:8px}
.sp-todo-store{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.sp-todo-store .slogo{width:15px;height:15px;color:var(--ink-3)}
.sp-ready{margin-bottom:16px}
.sp-head,.sp-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:8px 18px}
.sp-head{padding:0 0 8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.sp-head-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;--g:10px}
[data-n="1"] .sp-head-cols{grid-template-columns:minmax(0,1fr)}
.sp-col{display:inline-flex;align-items:center;gap:7px}
.sp-col .slogo{width:15px;height:15px}
.sp-flow{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.sp-row{padding:14px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.sp-row h3{font-size:14px;font-weight:600;padding-top:12px;color:var(--ink)}
.sp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;--g:10px}
[data-n="1"] .sp-tiles{grid-template-columns:minmax(0,1fr)}
/* One store: its tiles have the row to themselves, so they show more of what's written */
[data-n="1"] .sp-val{-webkit-line-clamp:4}
[data-n="1"] [data-row="description"] .sp-val{-webkit-line-clamp:8}
[data-n="1"] .sp-tile{padding:13px 18px}
.sp-cols{--min:240px}
.sp-pager{display:flex;justify-content:flex-end}
.sp-pager .pager{margin-bottom:12px}
.sp-edit{grid-column:2}
.sp-tile{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;min-width:0;padding:11px 14px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .15s,transform .15s}
.sp-tile:hover{box-shadow:0 0 0 1px var(--ink-3),0 2px 8px rgba(23,24,27,.06)}
.sp-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sp-tile.off{cursor:default;background:transparent;box-shadow:0 0 0 1px var(--line-soft) inset}
.sp-tile.off:hover{box-shadow:0 0 0 1px var(--line-soft) inset}
.sp-row.open .sp-tiles{display:none}
.sp-store{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);font-weight:500}
.sp-store .slogo{width:13px;height:13px}
.sp-val{font-size:14.5px;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.sp-val.empty{color:var(--ink-3)}
.sp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.sp-meta .dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}
.sp-meta .chip{font-size:11.5px;padding:1px 8px}
.sp-editor{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1.5px var(--ink),0 8px 24px rgba(23,24,27,.08)}
.sp-ed-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sp-input{display:block;font-size:15.5px;line-height:1.55;padding:10px 14px;resize:none;min-height:var(--fh,42px)}
textarea.sp-input{min-height:96px}
.sp-ed-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp-meter{flex:1;min-width:80px;height:4px;border-radius:999px;background:var(--sunken);overflow:hidden}
.sp-meter i{display:block;height:100%;background:var(--ok);border-radius:inherit;transition:width .15s}
.sp-meter.over i{background:var(--rose)}
.sp-count{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.sp-count.over{color:var(--rose);font-weight:600}
.sp-editor h4{font-size:13.5px;margin:6px 0 8px}
.sp-publish{gap:10px 18px}
.sp-pub{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-pub .slogo{width:15px;height:15px;color:#fff}
@media (max-width:760px){
  .sp-head{display:none}
  .sp-row{grid-template-columns:minmax(0,1fr)}
  .sp-row h3{padding-top:0}
  .sp-edit{grid-column:1}
  .sp-tiles{grid-template-columns:minmax(0,1fr)}
}

/* The screenshot studio (shots.js): in the store page like an open editor, or over the whole
   screen (.full). A grid of thumbnails per store, language and device set; dialogs for the viewer,
   fit to size and copying, inside the studio so they show over the browser's full screen too. */
.studio{display:block;padding:14px 16px 16px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1.5px var(--ink),0 8px 24px rgba(23,24,27,.08)}
.studio.full{position:fixed;inset:0;z-index:45;overflow-y:auto;overscroll-behavior:contain;border-radius:0;box-shadow:none;background:var(--canvas);padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.studio.full .st-body{max-width:1240px;margin:0 auto}
.studio:fullscreen{background:var(--canvas)}
html:has(.studio.full){overflow:hidden}
.st-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.st-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.studio.full .st-head{position:sticky;top:calc(-1 * max(16px,env(safe-area-inset-top)));z-index:3;margin:calc(-1 * max(16px,env(safe-area-inset-top))) -16px 0;padding:max(14px,env(safe-area-inset-top)) 16px 10px;background:var(--canvas)}
.st-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.st-title h3{font-size:16px;font-weight:600}
.st-title small{font-size:13px;color:var(--ink-3)}
.st-head-acts{display:flex;align-items:center;gap:8px}
.st-pickers{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.st-stores button{display:inline-flex;align-items:center;gap:7px}
.st-stores .slogo{width:15px;height:15px}
.st-lang{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);--fh:36px}
.st-lang select{width:auto;min-width:150px}
.st-sets{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.st-set{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:13.5px;color:var(--ink-2);transition:box-shadow .15s,background .15s}
.st-set:hover{box-shadow:0 0 0 1px var(--ink-3)}
.st-set[aria-selected=true]{background:var(--ink);color:#fff;box-shadow:none}
.st-set[aria-selected=true] .st-count{color:#d9d6e6}
.st-set:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.st-count{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.st-set .chip{font-size:11px;min-height:20px;padding:1px 8px}
.st-more{--fh:36px}
.st-more select{width:auto;max-width:220px;color:var(--ink-2)}
.st-note{margin:0}
.st-version{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-width:420px;--fh:36px}
.st-version label{font-size:13px;color:var(--ink-2)}
.st-version input{max-width:140px}
.st-set-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.st-rule{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.st-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st-picked{font-size:13.5px;font-weight:600;margin-inline-end:4px}
.st-hint{font-size:12.5px;color:var(--ink-3);margin-inline-start:4px}
.st-msg{display:flex;align-items:center;gap:8px;margin:0}
.st-msg span{flex:1}
.st-msg-x{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.st-msg-x:hover{background:rgba(23,24,27,.06);color:var(--ink)}
.st-msg-x .i{width:15px;height:15px}
.st-drop{position:relative;border-radius:14px;min-height:120px;transition:background .15s,box-shadow .15s}
.st-drop .empty{padding:26px 16px}
.st-drop-hint{position:absolute;inset:0;display:none;place-content:center;justify-items:center;gap:6px;border-radius:inherit;color:var(--violet-ink);font-size:14px;font-weight:500;pointer-events:none;text-align:center;padding:12px}
.st-drop.over{background:var(--violet-soft);box-shadow:0 0 0 2px var(--violet)}
.st-drop.over .st-drop-hint{display:grid}
.st-drop.over > :not(.st-drop-hint){opacity:.25}
.dragging-files .st-drop:not(.over){box-shadow:0 0 0 1.5px var(--violet) inset}
.st-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px 12px}
.studio.full .st-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.st-grid.wide,.studio.full .st-grid.wide{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.st-tile{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.st-tile.sk{aspect-ratio:9/19.5;border-radius:12px}
.st-thumb{display:grid;place-items:center;width:100%;aspect-ratio:var(--ar,9/19.5);border-radius:12px;overflow:hidden;background:var(--sunken);box-shadow:0 0 0 1px var(--line-soft);cursor:zoom-in;transition:box-shadow .15s,transform .15s var(--ease)}
.st-thumb:hover{box-shadow:0 0 0 1px var(--ink-3),0 4px 14px rgba(23,24,27,.1)}
.st-thumb:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.st-thumb img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none;pointer-events:none}
.st-proc{padding:8px;font-size:12px;color:var(--ink-3);text-align:center}
.st-tile.picked .st-thumb{box-shadow:0 0 0 2.5px var(--violet)}
.st-n{position:absolute;top:6px;inset-inline-end:6px;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);display:grid;place-items:center;background:rgba(23,24,27,.72);color:#fff;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none}
.st-pick{position:absolute;top:4px;inset-inline-start:4px;width:32px;height:32px;display:grid;place-items:center;cursor:pointer}
.st-pick input{appearance:none;-webkit-appearance:none;margin:0;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 1.5px var(--ink-3),0 1px 3px rgba(0,0,0,.15);cursor:pointer;display:grid;place-items:center}
.st-pick input:checked{background:var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 0 1.5px var(--violet)}
.st-pick input:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.st-moves{display:flex;justify-content:center;gap:4px}
.st-tile.st-place .st-thumb{opacity:.3;box-shadow:0 0 0 2px var(--violet) inset;outline:2px dashed var(--violet);outline-offset:2px}
.st-tile.st-place > :not(.st-thumb){visibility:hidden}
.st-ghost{position:fixed;z-index:60;margin:0;pointer-events:none;transform:scale(1.05) rotate(-1.5deg);filter:drop-shadow(0 14px 22px rgba(23,24,27,.25))}
.st-ghost .st-moves,.st-ghost .st-pick{visibility:hidden}
.st-queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.st-q{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px;padding:10px 12px;border-radius:12px;background:var(--hover);font-size:13.5px}
.st-q .grow{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:3px}
.st-q b{font-weight:600;overflow-wrap:anywhere}
.st-q small{font-size:12.5px;color:var(--ink-3)}
.st-q small.err{color:var(--rose)}
.st-q-ico{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--sky-soft);color:var(--sky)}
.st-q-ico .i{width:15px;height:15px}
.st-q.done .st-q-ico{background:var(--ok-soft);color:var(--ok-ink)}
.st-q.problem,.st-q.failed{background:var(--rose-soft)}
.st-q.problem .st-q-ico,.st-q.failed .st-q-ico{background:var(--rose);color:#fff}
.st-q .btn{flex:none}
.st-probs{margin:2px 0 0;padding-inline-start:18px;color:var(--ink-2);font-size:13px;line-height:1.5}
.st-bar{display:block;height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:3px}
.st-bar i{display:block;height:100%;background:var(--violet);border-radius:inherit;transition:width .2s}
.st-unread{padding:4px 0}
.st-hide-sm{display:inline}
/* Dialogs */
.st-dialog{border:0;padding:0;border-radius:var(--r-card);background:var(--surface);color:var(--ink);width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:0 20px 60px rgba(23,24,27,.22),0 0 0 1px var(--line-soft)}
.st-dialog::backdrop{background:rgba(23,24,27,.45)}
.st-dialog form{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px}
.st-dialog .acts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.st-ask{width:min(440px,calc(100vw - 32px))}
.st-ask p{font-size:15px;line-height:1.5;font-weight:500}
.st-v-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.st-v-top > .icon-btn{margin-inline-start:auto}
.st-v-pos{font-weight:600;font-variant-numeric:tabular-nums}
.st-v-meta{font-size:13px;color:var(--ink-3);min-width:0;overflow-wrap:anywhere}
.st-viewer{width:min(1000px,calc(100vw - 24px));height:min(940px,calc(100dvh - 24px));background:var(--surface)}
.st-viewer[open]{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px}
.st-v-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.st-v-stage img{max-width:100%;max-height:100%;min-width:0;object-fit:contain;border-radius:14px;box-shadow:0 0 0 1px var(--line-soft);background:var(--sunken);-webkit-user-drag:none}
.st-v-nav{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 2px 8px rgba(23,24,27,.08);color:var(--ink)}
.st-v-nav:hover:not(:disabled){background:var(--sunken)}
.st-v-nav:disabled{opacity:.3;cursor:default}
.st-v-acts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.st-v-note{text-align:center;font-size:12.5px;color:var(--ink-3)}
.st-fit{width:min(860px,calc(100vw - 24px))}
.st-fit-body{display:grid;grid-template-columns:minmax(0,auto) minmax(220px,1fr);gap:18px;align-items:start}
.st-fit-stage{display:grid;place-items:center;padding:12px;border-radius:14px;background:repeating-conic-gradient(var(--sunken) 0 25%,var(--surface) 0 50%) 0 0/16px 16px;min-height:200px}
.st-fit-stage canvas{display:block;max-width:100%;border-radius:6px;box-shadow:0 2px 10px rgba(23,24,27,.15);touch-action:none;cursor:grab}
.st-fit-ctl .field:first-child{margin-top:0}
.st-flabel{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.st-fit-ctl input[type=color]{width:64px;height:36px;padding:2px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.st-fit-ctl input[type=range]{width:100%;accent-color:var(--violet)}
.st-copy-langs{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;max-height:40dvh;overflow-y:auto}
.st-copy-langs label,.st-copy-replace{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font-size:14px;cursor:pointer}
.st-copy-langs label:hover,.st-copy-replace:hover{background:var(--hover)}
.st-copy-langs small{margin-inline-start:auto;font-size:12px}
.st-copy-langs input,.st-copy-replace input{accent-color:var(--violet);width:17px;height:17px;flex:none}
.st-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.st-results li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.st-results small{display:block;color:var(--ink-3);font-size:12.5px}
.st-results .tick{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok-ink)}
.st-results .fail .tick{background:var(--rose-soft);color:var(--rose)}
.st-results .tick .i{width:13px;height:13px}
@media (max-width:640px){
  .studio{padding:12px}
  .st-hide-sm{display:none}
  .st-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px 10px}
  .studio.full .st-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .st-grid.wide,.studio.full .st-grid.wide{grid-template-columns:minmax(0,1fr)}
  .st-lang{flex:1}
  .st-lang select{flex:1;min-width:0}
  .st-viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .st-viewer[open]{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
  .st-v-nav{position:absolute;z-index:1;top:50%;transform:translateY(-50%)}
  .st-v-nav.prev{inset-inline-start:2px}
  .st-v-nav.next{inset-inline-end:2px}
  .st-fit-body{grid-template-columns:minmax(0,1fr)}
  .st-dialog form{padding:16px}
}
@media (prefers-reduced-motion:reduce){.st-ghost{transform:none}}

/* Languages */
.lang-table{display:flex;flex-direction:column}
.lang-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) 20px;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--line-soft);color:var(--ink);text-decoration:none}
.lang-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;--g:12px;align-items:center}
.lang-table{--min:120px}
.lang-table[data-n="1"] .lang-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 20px}
.lang-table[data-n="1"] .lang-cells{grid-template-columns:minmax(0,1fr)}
.lang-table[data-many] .lang-row{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) 20px}
.lang-row.head{border-top:0;font-size:12.5px;color:var(--ink-3);font-weight:600;padding-top:4px}
.lang-row.head .lang-cells > span{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.lang-row.head .slogo{width:13px;height:13px}
.lang-row:not(.head):hover{background:var(--hover)}
.lang-row > span:first-child{display:flex;flex-direction:column;min-width:0}
.lang-row small{font-size:12px}
@media (max-width:600px){.lang-row,.lang-table[data-n="1"] .lang-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 16px}.lang-row.head .lang-cells > span{font-size:0}.lang-row.head .slogo{width:15px;height:15px}}

/* Getting ready */
.ready-head{display:flex;align-items:center;gap:18px;padding:18px 20px;margin-bottom:16px}
.ready-head h2{font-size:18px}
.ready-head p{font-size:13.5px;margin-top:4px}
.ring{--p:0;flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--sunken) 0)}
.ring b{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--surface);font-size:14px}
.ready-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;--min:320px}
.ready-cols[data-n="1"]{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){.ready-cols{grid-template-columns:minmax(0,1fr)}}
.ready-cols .sec-card-h h2{display:inline-flex;align-items:center;gap:8px}
.ready-cols .slogo{width:17px;height:17px}
.ready-steps{list-style:none;display:flex;flex-direction:column}
.ready-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line-soft)}
.ready-steps li:first-child{border-top:0}
.ready-steps .tick{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1.5px var(--line) inset;margin-top:1px}
.ready-steps li.done .tick{background:var(--ok-soft);box-shadow:none;color:var(--ok-ink)}
.ready-steps .tick .i{width:14px;height:14px}
.ready-steps li.blocked{opacity:.55}
.ready-steps b{font-size:14px}
.ready-steps small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px;line-height:1.45}
/* Two stores' parts on one line in a 48px row: each shrinks with an ellipsis, the full text on hover */
.ov-card .ov-parts{display:flex;flex:0 1 auto;flex-wrap:nowrap;gap:8px;min-width:0;overflow:hidden}
.ov-card .ov-part{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:4px}
.ov-card .ov-part .slogo{flex:none;width:12px;height:12px}
.ov-card .ov-part .chip{display:block;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-card .ov-part .chip::before{display:inline-block;vertical-align:middle;margin-inline-end:6px;margin-top:-2px}
.ov-card .ov-part .chip.store::before{display:none}
.ov-card .ov-part .chip.store .slogo{display:inline-block;width:12px;height:12px;color:currentColor;vertical-align:-2px;margin-inline-end:5px}
.ready-steps{padding:0;margin:0}

/* Store page steps: one tab per part, in order, each saying whether it's done */
.sp-steps{margin-bottom:18px}
.sp-steps-count{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:8px}
.sp-steps-list{display:flex;flex-wrap:wrap;gap:8px;padding:2px}
.sp-step{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding-block:0;padding-inline:8px 14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--ink-2);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.sp-step small{display:inline-flex;color:var(--ink-3)}
.sp-step small .slogo{width:12px;height:12px}
.sp-step-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sunken);font-size:12px;font-weight:600;color:var(--ink-2)}
.sp-step-n .i{width:14px;height:14px}
.sp-step.done .sp-step-n{background:var(--ok-soft);color:var(--ok-ink)}
.sp-step.locked .sp-step-n{background:var(--sunken);color:var(--ink-3)}
.sp-step[aria-current="step"]{background:var(--ink);color:#fff;box-shadow:none}
.sp-step[aria-current="step"] .sp-step-n{background:rgba(255,255,255,.16);color:#fff}
.sp-step[aria-current="step"] small{color:#cbc8d8}
.sp-next{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.sp-next .btn{display:inline-flex;align-items:center;gap:6px}

/* App Store forms */
.as-form{display:flex;flex-direction:column;gap:14px}
.as-form > .card{margin:0}
.as-form h3,.as-pv h3{font-size:15px}
.as-save{display:flex;justify-content:flex-end;margin-top:4px}
.as-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:12px;background:var(--sunken)}
.as-seg label{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:9px;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.as-seg label.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(23,24,27,.1)}
.as-seg input{position:absolute;opacity:0;pointer-events:none}
.as-seg label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:1px}
.as-seg label:has(input:disabled){cursor:default;opacity:.7}
.as-group{display:flex;flex-direction:column}
.as-q{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding:11px 0;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.as-group h3 + .as-q,.card > .as-q:first-child{border-top:0}
.as-q > span{display:flex;flex-direction:column;gap:2px;font-size:14px;min-width:200px;flex:1}
.as-q small{font-size:12.5px;line-height:1.45}
.as-rating{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:14px}
.as-badge{flex:none;display:grid;place-items:center;min-width:52px;height:52px;padding:0 8px;border-radius:14px;background:var(--ink);color:#fff;font-weight:700;font-size:18px}
.as-rating small{display:block;margin-top:2px}
.as-guide p{font-size:14px;margin-top:-4px}
.as-steps{counter-reset:s;list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column}
.as-steps li{counter-increment:s;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 0 14px 40px;border-top:1px solid var(--line-soft)}
[dir="rtl"] .as-steps li{padding:14px 40px 14px 0}
.as-steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:13px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sunken);font-size:13px;font-weight:600}
.as-steps small{color:var(--ink-3);font-size:13px}
.as-copy{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:4px}
.as-copy-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--canvas)}
.as-copy-row small{color:var(--ink-3)}
.as-copy-row span{overflow-wrap:anywhere;font-weight:500}
.as-pv-group{padding:12px 0;border-top:1px solid var(--line-soft)}
.as-pv-group:first-of-type{border-top:0}
.as-pv-group h4{font-size:13px;color:var(--ink-3);font-weight:600;margin-bottom:6px}
.as-pv-types{display:flex;flex-direction:column;gap:4px}
.as-pv-type{border-radius:10px;padding:2px 8px}
.as-pv-type.on{background:var(--canvas);padding:8px 10px}
.as-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;min-height:30px}
.as-check input{width:17px;height:17px;accent-color:var(--ink)}
.as-pv-more{display:flex;flex-direction:column;gap:6px;margin:6px 0 2px;padding-inline-start:25px}
.as-chips{display:flex;flex-wrap:wrap;gap:6px}
.as-chip{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:12.5px;cursor:pointer}
.as-chip.on{background:var(--ink);color:#fff;box-shadow:none}
.as-chip input{position:absolute;opacity:0;pointer-events:none}
.as-enter h3{display:flex;align-items:center;gap:8px;font-size:15px}
.as-enter .slogo{width:16px;height:16px}
.as-summary{margin:10px 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px}

/* App Privacy as the App Store shows it */
.pv-preview{margin-top:16px}
.pv-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pv-head h3{font-size:15px}
.pv-head small{color:var(--ink-3);font-size:12.5px}
.pv-store{padding:18px;border-radius:var(--r-card);background:#fff;box-shadow:0 0 0 1px var(--line);font-family:-apple-system,"SF Pro Text","Helvetica Neue",var(--sans,inherit)}
.pv-title{font-size:20px;font-weight:700;color:#000}
.pv-lead{font-size:13px;color:#6e6e73;margin:4px 0 12px}
.pv-store{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pv-store .pv-title,.pv-store .pv-lead{grid-column:1/-1}
.pv-card{padding:16px;border-radius:14px;background:#f5f5f7;color:#1d1d1f}
.pv-card h4{font-size:15px;font-weight:600}
.pv-card p{font-size:12.5px;color:#6e6e73;margin:4px 0 10px}
.pv-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.pv-card li{display:flex;flex-direction:column;font-size:13.5px}
.pv-card li small{color:#6e6e73;font-size:12px}
.pv-how h3{font-size:16px;margin:0 0 14px}
.pv-how h4{font-size:13px;font-weight:600;color:var(--ink-3);margin:0 0 12px}
.pv-how-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px}
@media (max-width:860px){.pv-how-grid{grid-template-columns:minmax(0,1fr);gap:20px}}
.pv-how p{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.pv-num{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--violet-soft);color:var(--violet-ink);font-size:13px;font-weight:600}
.pv-flow,.pv-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pv-flow li,.pv-steps li{position:relative;display:flex;gap:12px;padding-bottom:16px}
/* The line that joins one question (or step) to the next */
.pv-flow li:not(:last-child)::after,.pv-steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:12px;top:30px;bottom:2px;width:2px;border-radius:2px;background:var(--line)}
.pv-q-body{min-width:0}
.pv-outs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pv-out{display:inline-flex;flex-direction:column;padding:4px 10px;border-radius:10px;font-size:12.5px;font-weight:500;background:var(--sunken);color:var(--ink-2)}
.pv-out small{font-weight:400;font-size:11.5px;opacity:.85}
.pv-out.go{background:var(--violet-soft);color:var(--violet-ink)}
.pv-out.linked{background:var(--sky-soft);color:var(--sky)}
.pv-out.track{background:var(--amber-soft);color:var(--amber)}
.pv-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px}
@media (max-width:560px){.pv-tips{grid-template-columns:minmax(0,1fr)}}
.pv-tip{padding:10px 12px;border-radius:var(--r-ctl);background:var(--sunken)}
.pv-tip b{font-size:13.5px}
.pv-steps li p{margin-top:3px}
.pv-asc-btn{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:var(--r-pill);background:#0a66d8;color:#fff;font-size:12px;font-weight:500}
@media (max-width:600px){.as-copy-row{grid-template-columns:minmax(0,1fr) auto}.as-copy-row small{grid-column:1/-1}}

/* Store page: App Store or Google Play, then that store's steps */
.sp-stores{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:4px;padding:4px;margin-bottom:14px;border-radius:14px;background:var(--sunken)}
.sp-store-tab{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none}
.sp-store-tab .slogo{width:15px;height:15px}
.sp-store-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(23,24,27,.1)}
.pl-intro{font-size:14px;margin:-2px 0 12px;line-height:1.5}
.pl-steps{margin:8px 0 12px;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5}
/* Getting ready, across the overview: a percentage and a bar for all of it, then each store's steps
   as a track (done ones filled, the next one in sky, the ones waiting on it faint) and its next step */
.rdy{padding:20px 22px;margin-bottom:14px}
.rdy-head{display:flex;align-items:flex-end;gap:16px}
.rdy .grow{flex:1;min-width:0}
.rdy-head h2{font-size:18px}
.rdy-head p{font-size:13.5px;margin-top:4px}
.rdy-head p a{font-weight:500;white-space:nowrap}
.rdy-pct{direction:ltr;display:flex;align-items:baseline;gap:1px;line-height:1;font-variant-numeric:tabular-nums}
.rdy-pct b{font-size:40px;font-weight:600;letter-spacing:-.03em}
.rdy-pct span{font-size:18px;font-weight:500;color:var(--ink-3)}
.rdy-bar{height:10px;border-radius:var(--r-pill);background:var(--sunken);margin:16px 0 18px;overflow:hidden}
.rdy-bar i{display:block;height:100%;min-width:10px;border-radius:inherit;background:var(--ok);transition:width .3s}
.rdy-stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;--g:14px;--min:350px}
/* One store: the card's width is its own, the track wider and bigger, the next step beside it */
.rdy-stores[data-n="1"] .rdy-store{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);column-gap:28px;align-items:center;padding:18px 22px}
.rdy-stores[data-n="1"] .rdy-store-h{grid-column:1/-1}
.rdy-stores[data-n="1"] .rdy-track{margin:20px 0 6px}
.rdy-stores[data-n="1"] .rdy-node{width:34px;height:34px;font-size:13.5px}
.rdy-stores[data-n="1"] .rdy-node .i{width:17px;height:17px}
.rdy-stores[data-n="1"] .rdy-track li+li::before{top:16px;inset-inline-start:calc(-50% + 22px);inset-inline-end:calc(50% + 22px)}
.rdy-stores[data-n="1"] .rdy-label{font-size:13px}
.rdy-stores[data-n="1"] .rdy-next{border-top:0;padding-top:0;border-inline-start:1px solid var(--line-soft);padding-inline-start:22px;align-self:stretch}
@media (max-width:760px){
  .rdy-stores[data-n="1"] .rdy-store{grid-template-columns:minmax(0,1fr);padding:16px}
  .rdy-stores[data-n="1"] .rdy-next{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line-soft);padding-top:12px}
}
.rdy-store{background:var(--canvas);border-radius:16px;padding:16px 16px 14px;box-shadow:0 0 0 1px var(--line-soft)}
.rdy-store-h{display:flex;align-items:center;gap:8px}
.rdy-store-h .slogo{width:17px;height:17px}
.rdy-store-h b{font-size:14.5px}
.rdy-store-n{margin-inline-start:auto;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rdy-track{list-style:none;padding:0;margin:18px 0 14px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.rdy-track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.rdy-track li+li::before{content:"";position:absolute;top:13px;height:2px;border-radius:2px;inset-inline-start:calc(-50% + 18px);inset-inline-end:calc(50% + 18px);background:var(--line)}
.rdy-track li.done::before{background:var(--ok)}
.rdy-node{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-3);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.rdy-node .i{width:15px;height:15px}
.rdy-track li.done .rdy-node{background:var(--ok);color:var(--surface);box-shadow:none}
.rdy-track li.next .rdy-node{background:var(--sky-soft);color:var(--sky);box-shadow:inset 0 0 0 2px var(--sky),0 0 0 4px var(--sky-soft)}
.rdy-track li.blocked{opacity:.5}
.rdy-track li.blocked .rdy-node{box-shadow:none;outline:1.5px dashed var(--line);outline-offset:-1.5px}
.rdy-label{font-size:12px;line-height:1.3;color:var(--ink-2);overflow-wrap:anywhere;padding:0 2px}
.rdy-track li.next .rdy-label{color:var(--ink);font-weight:600}
.rdy-next{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line-soft);padding-top:12px}
.rdy-next small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sky)}
html[dir=rtl] .rdy-next small{letter-spacing:0}
.rdy-next b{display:block;font-size:14px;margin-top:2px}
.rdy-next p{font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rdy-next .btn{flex:none}
.rdy-next.warn small{color:var(--amber)}
.rdy-next.warn p{-webkit-line-clamp:3}
.rdy-track li.unknown .rdy-node{background:var(--amber-soft);color:var(--amber);box-shadow:none}
.ready-steps li.unknown .tick{background:var(--amber-soft);color:var(--amber);box-shadow:none;font-size:12px;font-weight:600}
.rdy-next.ok{color:var(--ok-ink);gap:8px}
.rdy-next.ok .i{width:16px;height:16px;flex:none}
.rdy-next.ok b{margin:0}
.rdy.done{display:flex;align-items:center;gap:14px;padding:14px 20px}
.rdy.done h2{font-size:16px}
.rdy.done p{font-size:13px;margin-top:2px}
.rdy-ok{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok-ink)}
.rdy-ok .i{width:18px;height:18px}
.rdy-all{font-size:13.5px;font-weight:500}
.rdy-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:640px){
  .rdy{padding:16px}
  .rdy-pct b{font-size:32px}
  .rdy-store{padding:14px 12px 12px}
  .rdy-node{width:26px;height:26px}
  .rdy-track li+li::before{top:12px;inset-inline-start:calc(-50% + 16px);inset-inline-end:calc(50% + 16px)}
  .rdy-label{font-size:11px}
}
/* The send bar: drafts waiting, reviewed, sent once */
.send-bar{position:sticky;bottom:14px;z-index:6;margin-top:18px;border-radius:var(--r-card);background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2);overflow:hidden}
.send-row{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:12px 16px}
.send-row .grow{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;min-width:0}
.send-row small{color:#cbc8d8;font-size:12.5px;flex-basis:100%}
.send-stores{display:inline-flex;gap:10px}
.send-stores span{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:#e3e0ee}
.send-stores .slogo,.send-list .slogo{width:13px;height:13px;color:#fff}
.send-bar .btn.quiet{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.send-bar .btn.primary{background:#fff;color:var(--ink)}
.send-bar .btn.danger{color:#ffa8bd}
.send-list{max-height:min(46vh,420px);overflow-y:auto;padding:14px 16px 4px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px}
.send-store-block h4{display:flex;align-items:center;gap:6px;font-size:13.5px;margin-bottom:6px}
.send-store-block ul,.send-results{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.send-store-block li{display:flex;flex-direction:column;font-size:13.5px}
.send-store-block li small,.send-results small{color:#cbc8d8;font-size:12.5px}
.send-results li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.send-results .tick{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.14)}
.send-results li.ok .tick{background:var(--ok);color:#fff}
.send-results li.fail .tick{background:var(--rose);color:#fff}
.send-results .tick .i{width:12px;height:12px}
.send-results b{display:inline-flex;align-items:center;gap:6px}
.pl-console{display:flex;flex-direction:column;gap:6px;margin:10px 0;padding:12px;border-radius:var(--r-ctl);background:var(--canvas)}
.pl-console label{font-size:13.5px;font-weight:500}
.pl-console input{flex:1}
/* A run's meter: the bar, then the percentage, the time it's taken and about how long is left */
.run-meter{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.run-meter .bar{flex:0 1 220px;min-width:80px;height:6px;border-radius:var(--r-pill);background:var(--sky-soft);overflow:hidden}
.run-meter .bar i{display:block;height:100%;border-radius:inherit;background:var(--sky);transition:width 1s linear}
.run-meter.waiting .bar{background:var(--amber-soft)}.run-meter.waiting .bar i{background:var(--amber)}
.run-meter.done .bar i{background:var(--ok)}
.run-meter.failed .bar{background:var(--rose-soft)}.run-meter.failed .bar i{background:var(--rose)}
.run-meter.running .bar i{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);background-size:60px 100%;background-repeat:no-repeat;animation:meter-sheen 1.6s linear infinite}
@keyframes meter-sheen{from{background-position:-60px 0}to{background-position:calc(100% + 60px) 0}}

/* The run page's console: dark, monospaced, the run's story printed in as it happens */
.console{--con-bg:#131219;--con-head:#1c1a26;--con-ink:#e4e1f0;--con-dim:#8d89a3;--con-ok:#b4a2ff;--con-fail:#ff8fa8;--con-wait:#ffb27a;--con-run:#8fb0ff;
  margin-top:4px;border-radius:var(--r-card,16px);background:var(--con-bg);color:var(--con-ink);overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px rgba(17,19,22,.12)}
.con-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:12px 16px;background:var(--con-head);border-bottom:1px solid rgba(255,255,255,.06)}
.con-dots{display:flex;gap:6px}.con-dots i{width:10px;height:10px;border-radius:50%;background:#3a3748}
.con-title{font-family:var(--mono);font-size:12.5px;color:var(--con-dim);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.con-head .run-meter{margin:0;color:var(--con-ink);flex:0 1 auto}
.con-head .run-meter .bar{flex-basis:160px;background:rgba(255,255,255,.1)}
.con-head .run-meter.running .bar i{background-color:var(--con-run)}
.con-head .run-meter.done .bar i{background:var(--con-ok)}
.con-head .run-meter.failed .bar i{background:var(--con-fail)}
.con-head .run-meter.waiting .bar i{background:var(--con-wait)}
.con-body{font-family:var(--mono);font-size:12.5px;line-height:1.75;padding:12px 16px 14px;max-height:440px;overflow:auto;scrollbar-color:#3a3748 transparent}
.con-line{display:flex;gap:10px;align-items:baseline;min-width:0}
.con-at{flex:none;color:#77738c;font-size:11.5px;width:58px}
.con-mark{flex:none;width:12px;text-align:center;color:var(--con-dim)}
.con-text{flex:1;min-width:0;overflow-wrap:anywhere}
.con-line.cmd .con-text{color:#fff;font-weight:600}
.con-line.dim .con-text,.con-line.part .con-text{color:var(--con-dim)}
.con-line.part .con-text{padding-inline-start:12px}
.con-line.step .con-text{color:#fff}
.con-line.ok .con-mark,.con-line.ok .con-text{color:var(--con-ok)}
.con-line.fail .con-mark,.con-line.fail .con-text{color:var(--con-fail)}
.con-line.wait .con-mark,.con-line.wait .con-text{color:var(--con-wait)}
.con-line.active .con-text{color:var(--con-run)}
.con-clock{flex:none;color:var(--con-dim);font-variant-numeric:tabular-nums}
.con-line .spin{flex:none;width:12px;height:12px;align-self:center;border-radius:50%;border:2px solid rgba(121,177,255,.25);border-top-color:var(--con-run);animation:spin .8s linear infinite}
.caret{display:inline-block;width:8px;height:15px;background:var(--con-ink);vertical-align:-3px;animation:caret 1.05s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* New lines type in, one after another */
.con-line.new{animation:con-type .45s steps(18,end) var(--d,0ms) both}
@keyframes con-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:640px){.con-body{font-size:11.5px;padding:10px 12px}.con-at{display:none}.con-head .run-meter{flex-basis:100%}.con-head .run-meter .bar{flex:1}}
@media (prefers-reduced-motion:reduce){.con-line.new,.caret,.con-line .spin,.run-meter.running .bar i{animation:none}.run-meter .bar i{transition:none}}
.wide-facts{grid-template-columns:minmax(0,1fr)}
.wide-facts .fact{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line-soft)}
.wide-facts .fact:first-child{border-top:0}
.wide-facts .fact>small{margin:0}
.wide-facts .fact>span{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.set-groups > .store-tiles{margin:0}
.store-tiles .set-group{margin:0}
.store-tiles .set-row{flex-wrap:wrap}
.store-tiles .set-row .set-ctl{max-width:100%;overflow-wrap:anywhere}
.set-group h2 .slogo{width:16px;height:16px;vertical-align:-2px;color:var(--ink-3)}
/* What's loading, in words, with three dots that breathe */
/* Loading (skeleton.js): the screen's own shape in grey on white cards, a soft shimmer passing over */
.sk-wrap{display:flex;flex-direction:column;gap:14px}
.sk{display:block;flex:none;max-width:100%;border-radius:6px;background:var(--sunken);position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:sk-shine 1.4s ease-in-out infinite}
@keyframes sk-shine{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none;display:none}}
.sk-card{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.sk-card .sk-rows{margin:0 -20px -6px}
.sk-title{padding-bottom:2px}
.sk-rows{display:flex;flex-direction:column}
.sk-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line-soft)}
.sk-row:first-child{border-top:0}
.sk-card > .sk-row{padding:0;border:0}
.sk-head{display:flex;align-items:center;gap:10px;padding:0 4px;min-height:28px}
.sk-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.sk-cols .sk-rows{margin:0}
.sk-tile{gap:10px}
.sk-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:4px}
.sk-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.sk-page-head .grow{display:flex;flex-direction:column}

/* The jellyfish (jelly.js). Over a page or window that's slow to fill it swims above the grey shape,
   held in view as the page scrolls; it comes in only after a pause, so a quick answer never shows it. */
ploa-jelly{display:inline-block;flex:none}
ploa-jelly svg{display:block;width:100%;height:100%;overflow:visible}
ploa-jelly > img{display:block;width:100%;height:100%}
.sk-wrap{position:relative}
.sk-jelly{position:absolute;inset:0;z-index:2;display:flex;justify-content:center;pointer-events:none}
.sk-jelly[data-inline]{display:none}
dialog .sk-jelly[data-inline]{display:flex}
.sk-jelly ploa-jelly{position:sticky;top:calc(50vh - 60px);align-self:flex-start;margin-top:min(12vh,110px);width:96px;height:112px;padding:10px 16px 6px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.94) 62%,rgba(255,255,255,0));opacity:0;transform:scale(.96);animation:jelly-in .32s var(--ease) .45s forwards}
dialog .sk-jelly ploa-jelly{top:24px;margin-top:20px}
.jelly-warm .sk-jelly ploa-jelly{animation-delay:0s}
@keyframes jelly-in{to{opacity:1;transform:none}}
@keyframes jelly-breathe{50%{opacity:.5}}
/* The splash: the canvas over everything until the first page is up. */
.splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--canvas);transition:opacity .3s var(--ease),visibility 0s .3s}
.splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.splash ploa-jelly{width:104px;height:132px;opacity:0;transform:scale(.96);animation:jelly-in .45s var(--ease) .25s forwards}
.splash img{opacity:0;animation:jelly-in .45s var(--ease) .4s forwards}
/* Sign-in: it floats over the card, its shadow on the canvas just above it. */
.auth-jelly{width:76px;height:97px;margin-bottom:6px}
.auth .logo.wordmark{height:34px;margin-bottom:14px}
@media (prefers-reduced-motion:reduce){
  .sk-jelly ploa-jelly,.splash ploa-jelly{transform:none;animation:jelly-in .2s ease .45s forwards,jelly-breathe 2.4s ease-in-out .65s infinite}
  .splash img{animation:jelly-in .2s ease .25s forwards}
}
.prov-bm{margin:12px 20px 18px}
.bookmarklet{cursor:grab;border:1px dashed var(--line)}

/* TestFlight inside the builds pages: one build's side, tester groups, beta information */
.tf-build{display:flex;flex-direction:column;gap:14px;margin-top:4px;padding:14px 0 6px;border-top:1px solid var(--line-soft)}
.tf-build-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tf-pick{display:inline-flex;align-items:center;gap:8px;font-size:13.5px}
.tf-pick{--fh:36px}
.tf-field{position:relative;display:flex;flex-direction:column;gap:6px}
.tf-field > label,.tf-label{font-weight:500;font-size:14px}
.tf-field textarea{width:100%;resize:vertical}
.tf-field small,.tf-group small{font-size:12.5px}
.as-chip small{margin-inline-start:3px}
.as-chip.on small{color:inherit;opacity:.75}
.tf-send{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-ctl);background:var(--sunken)}
.tf-send .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.tf-ask{padding:12px 14px;border-radius:var(--r-ctl);background:var(--amber-soft)}
/* Saving and saved, on the field being saved */
.tf-field[data-saving]::after,.tf-info .field[data-saving]::after{position:absolute;inset-inline-end:2px;top:0;font-size:12px;color:var(--ink-3)}
.tf-info .field{position:relative}
.tf-field[data-saving="1"]::after,.tf-info .field[data-saving="1"]::after{content:"…"}
.tf-field[data-saving="done"]::after,.tf-info .field[data-saving="done"]::after{content:"✓";color:var(--ok-ink)}
.tf-head{margin-top:22px}
.tf-head h2 .slogo{width:16px;height:16px;vertical-align:-2px;margin-inline-end:4px;color:var(--ink-3)}
.tf-groups{display:flex;flex-direction:column}
.tf-group{border-top:1px solid var(--line-soft)}
.tf-group summary{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;list-style:none}
.tf-group summary::-webkit-details-marker{display:none}
.tf-group summary .grow{display:flex;flex-direction:column;min-width:0}
.tf-group summary .chev{width:16px;height:16px;color:var(--ink-3);transition:transform .15s var(--ease)}
.tf-group[open] summary .chev{transform:rotate(90deg)}
[dir=rtl] .tf-group summary .chev{transform:scaleX(-1)}
[dir=rtl] .tf-group[open] summary .chev{transform:rotate(90deg)}
.tf-group-body{display:flex;flex-direction:column;gap:10px;padding:0 0 14px}
.tf-link{display:flex;flex-direction:column;gap:6px}
.tf-link-row{gap:8px;justify-content:flex-start;flex-wrap:wrap}
.tf-link-row code{font-size:12.5px;padding:3px 8px;border-radius:6px;background:var(--sunken);overflow-wrap:anywhere}
.tf-testers .item{padding-inline:0}
.tf-new{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pt-track .pt-add input{flex:1 1 220px;min-width:0}
.pt-track > small{display:block;margin-top:12px;font-size:12.5px}
.pt-link{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.pt-about{margin:4px 0 12px;font-size:13.5px;max-width:80ch}
.tf-new{--fh:36px}
.tf-new input{flex:1 1 160px;min-width:0;width:auto}
.tf-new select{flex:0 0 auto;width:auto}
.tf-new .btn{height:36px}
.tf-group-acts{justify-content:flex-end}
.tf-rel .tf-build{border-top:0;padding-top:0}

/* Creating and changing an in-app product, inside the store's purchases tile */
.pe{display:flex;flex-direction:column;gap:12px;margin:2px 0 14px;padding:16px;border-radius:var(--r-ctl);background:var(--sunken)}
.pe-h{display:flex;align-items:center;gap:10px}
.pe-h h3{font-size:15px;margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.pe .field{margin:0}
.pe-kind{align-self:flex-start}
.pe-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.pe-money{position:relative}
.pe-money span{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.pe-money input{padding-inline-start:26px}
[dir=rtl] .pe-money span{inset-inline-start:auto;right:auto;left:12px}
[dir=rtl] .pe-money input{padding-inline-start:13px;padding-left:26px}
.pe-langs{display:flex;flex-direction:column;gap:10px}
.pe-lang{padding:12px;border-radius:var(--r-ctl);background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
.pe-lang-h{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:13.5px}
.pe-lang label{display:flex;justify-content:space-between;gap:8px}
.pe-lang .count{font-size:12px;font-weight:400}
.pe-add{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;max-width:100%}
.pe-add > span{white-space:nowrap}
.pe-add{--fh:36px}
.pe-add select{width:auto;max-width:100%;min-width:0} /* long language names stay inside a narrow form */
.pe-more summary{cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.pe-more[open]{display:flex;flex-direction:column;gap:10px}
.pe-note{margin:0;font-size:13.5px}
/* A long write's meter: the product, what's happening, the bar and how far it got */
.pj{display:flex;flex-direction:column;gap:2px}
[data-jobs] .pj{margin:2px 0 14px;padding:14px 16px;border-radius:var(--r-ctl);background:var(--sunken)}
.pj-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14px}
.pj .run-meter{flex-wrap:wrap;row-gap:4px}
.pj .run-meter .bar{flex:1 1 160px}
.pj .meter-text{white-space:nowrap}
.pe-acts{justify-content:flex-end}

.pe-rc{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-ctl);background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
.pe-review{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-ctl);background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
.pe-review-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pe-missing{margin:0;padding-inline-start:18px;font-size:13.5px;color:var(--amber)}
.pe-shot{display:flex;align-items:center;gap:10px}
.pe-shot .grow{display:flex;flex-direction:column;min-width:0}
/* A product's App Store image, at the top of its form */
.pe-img{display:flex;align-items:center;gap:12px}
.pe-img .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.pe-img small.bad{color:var(--rose)}
.pe-img-box{flex:none;width:64px;height:64px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--surface);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-soft)}
.pe-img-box img{width:100%;height:100%;object-fit:cover}
.pe-img-box .i{width:22px;height:22px}
.btn.solid-ok{background:var(--ok-ink);color:#fff}
/* A subscription's offers, below its form or on their own in the purchases tile */
.pe-offers .of-list{border-radius:var(--r-ctl);background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
.of-row{flex-wrap:wrap;row-gap:8px;padding:12px 14px}
.of-row .grow{flex:1 1 200px}
.of-row .iap-ends{margin-inline-start:auto}
.of-box{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-ctl);background:var(--surface);box-shadow:0 0 0 1px var(--line-soft)}
.of-box .of-list{padding:0;box-shadow:none}
.of-box .as-seg{align-self:flex-start}
.of-phase{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border-radius:var(--r-ctl);background:var(--sunken)}
.of-phase .pe-row{align-self:stretch}
.of-phases{display:flex;flex-direction:column;gap:8px}
.of-add{align-self:flex-start}
.of-checks{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;border:0}
.of-checks legend{width:100%;margin-bottom:4px;font-size:13.5px;font-weight:600}
.of-codes-new{display:flex;flex-direction:column;gap:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.auto-note{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:14px 16px;border-radius:var(--r-ctl);background:var(--amber-soft);color:var(--ink)}
.auto-note.hidden{display:none}
.auto-note p{margin:0;font-size:13.5px;line-height:1.5}
.auto-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.auto-cols{grid-template-columns:minmax(0,1fr)}}
.auto-cols small{display:block;font-weight:600;color:var(--amber);margin-bottom:4px}
.auto-cols ul{margin:0;padding-inline-start:18px;font-size:13px;line-height:1.5}

/* Store columns for three stores or more (pager.js): as many as fit side by side, the rest out of
   view along the row, every row of the page moved together by the arrows. A little padding keeps
   the cards' edges and focus rings inside the clip. */
[data-many] [data-track],[data-many][data-track]{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per,2) - 1) * var(--g,16px)) / var(--per,2));column-gap:var(--g,16px);overflow:clip;padding:4px;margin:-4px}
[data-many] [data-track] > *,[data-many][data-track] > *{--dir:-1;transform:translateX(calc(var(--at,0) * (100% + var(--g,16px)) * var(--dir)))}
html[dir=rtl] [data-many] [data-track] > *,html[dir=rtl] [data-many][data-track] > *{--dir:1}
@media (prefers-reduced-motion:no-preference){[data-many].paging [data-track] > *,[data-many].paging[data-track] > *{transition:transform .38s var(--ease),box-shadow .15s}}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-bottom:10px;min-width:0}
.pager[hidden]{display:none}
.pager-btn{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;border:0;background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:background .15s,opacity .15s,transform .12s var(--ease)}
.pager-btn:hover:not(:disabled){background:var(--sunken)}
.pager-btn:active:not(:disabled){transform:scale(.94)}
.pager-btn:disabled{opacity:.35;cursor:default}
.pager-btn .i{width:16px;height:16px}
.pager-marks{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--sunken);max-width:min(60vw,420px);overflow:hidden}
.pager-mark{width:30px;height:26px;flex:none;border-radius:var(--r-pill);display:grid;place-items:center;border:0;background:transparent;color:var(--ink-3);cursor:pointer;font:inherit;font-size:12px;transition:background .15s,color .15s}
.pager-mark[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(23,24,27,.08)}
.pager-mark .slogo{width:14px;height:14px;margin:0;color:currentColor;vertical-align:0}
.pager-count{min-width:4.6em;text-align:center;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pager-btn:focus-visible,.pager-mark:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:640px){.pager{max-width:100%}.pager-count{display:none}.pager-marks{flex:0 1 auto;min-width:0}.pager-mark{width:26px}}
.gd-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.gd-toc a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--ink);text-decoration:none;font-size:13.5px}
.gd-toc a.dim{opacity:.55}
.gd-toc .slogo,.gd-section h2 .slogo{width:15px;height:15px;color:var(--ink-3)}
.gd-section{margin-bottom:14px;scroll-margin-top:16px}
.gd-section h2{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 4px}
.gd-section > p{margin:0 0 12px;font-size:13.5px}
.gd-steps{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.55}
.gd-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.gd-link{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);background:var(--violet-soft);color:var(--violet-ink);text-decoration:none;font-size:13px;font-weight:500}
.gd-out{font-size:11px}
.gd-perms{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.gd-perms li{display:flex;flex-direction:column;padding:8px 12px;border-radius:var(--r-ctl);background:var(--sunken)}
.gd-perms b{font-size:13.5px;font-weight:600}
.gd-perms span{font-size:12.5px}
.gd-more{margin:4px 0 0;font-size:13px}
/* A command to type, with its copy button: the guide's CLI steps, the first run, /start. */
.cmd-line{display:flex;align-items:center;gap:8px;margin-top:8px;padding:5px;padding-inline:14px 5px;border-radius:var(--r-ctl);background:var(--ink);min-width:0}
.cmd-line code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;color:#ebe8f4;font-family:var(--mono);font-size:13px;text-align:left;scrollbar-width:none}
.cmd-line .btn{flex:none;background:rgba(255,255,255,.1);color:#ebe8f4;box-shadow:none}
.cmd-line .btn:hover{background:rgba(255,255,255,.18)}

/* The first run: the overview's checklist while a workspace is new. Done is violet, as everywhere. */
.fr{margin-bottom:14px;padding:20px}
.fr-head{display:flex;align-items:center;gap:10px}
.fr-head .grow{flex:1;min-width:0}
.fr-head h2{font-size:17px}
.fr-lead{font-size:13.5px;margin-top:4px}
.fr-head .chip{flex:none}
.fr-head .icon-btn{flex:none;width:32px;height:32px;margin-inline:0 -6px}
.fr-head .icon-btn svg{width:16px;height:16px}
.fr-bar{height:6px;margin:14px 0 4px;border-radius:var(--r-pill);background:var(--sunken);overflow:hidden}
.fr-bar i{display:block;height:100%;border-radius:inherit;background:var(--ok);transition:width .4s var(--ease)}
.fr-steps{list-style:none;margin:0;padding:0}
.fr-steps li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft)}
.fr-steps li:first-child{border-top:0}
.fr-mark{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);color:var(--ink-2);font-size:13px;font-weight:600}
.fr-steps li.now .fr-mark{background:var(--violet);color:#fff}
.fr-steps li.done .fr-mark{background:var(--ok-soft);color:var(--ok-ink)}
.fr-mark svg{width:15px;height:15px}
.fr-body{flex:1;min-width:0;padding-top:3px}
.fr-body b{font-weight:600;font-size:14.5px}
.fr-steps li.done .fr-body b{font-weight:500;color:var(--ink-3)}
.fr-body p{font-size:13.5px;margin-top:2px}
.fr-more{font-size:13px;align-self:center;margin-inline-start:4px}
.fr-foot{font-size:13px;margin-top:6px}
/* App settings › Stores: one more store, in one line where it fits */
.add-store{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.add-store{--fh:36px}
.add-store input,.add-store select{width:auto;min-width:150px}
/* Reviews: each store's ratings, then every review with its reply and the reply editor */
.rv-sum{display:flex;align-items:center;gap:22px;margin-top:12px;flex-wrap:wrap}
.rv-avg{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:110px}
.rv-avg b{font-size:34px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.rv-avg small{color:var(--ink-3);font-size:12.5px}
.rv-stars{display:inline-flex;color:var(--amber);font-size:14px;letter-spacing:1px;white-space:nowrap}
.rv-stars .off{color:var(--line)}
.rv-bars{flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.rv-bar{display:flex;align-items:center;gap:8px;padding:2px 4px;margin:0 -4px;border:0;border-radius:6px;background:none;font-size:12.5px;color:var(--ink-2);cursor:pointer;text-align:start}
.rv-bar:hover{background:var(--hover)}
.rv-bar-n{width:2.4em;flex:none;font-variant-numeric:tabular-nums}
.rv-track{flex:1;height:7px;border-radius:var(--r-pill);background:var(--sunken);overflow:hidden}
.rv-track i{display:block;height:100%;border-radius:inherit;background:var(--amber)}
.rv-bar-c{min-width:2.5em;text-align:end;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rv-link{border:0;background:none;padding:0;color:var(--violet-ink);font:inherit;cursor:pointer}
.rv-link:hover{text-decoration:underline}
.sec-card .rv-sum+.help{margin-top:12px}
.sec-card .help+.note{margin:10px 0 0}
.rv-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.rv-filters .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.rv-filters .seg button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rv-filters .seg .slogo{width:14px;height:14px}
.rv-filters .btn[aria-pressed=true]{background:var(--violet-soft);color:var(--violet-ink);box-shadow:0 0 0 1px var(--violet)}
.rv-list{margin-top:12px!important}
.rv{padding:14px 20px;border-top:1px solid var(--line-soft)}
.rv-h{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.rv-h .slogo{width:16px;height:16px;flex:none}
.rv-h b{font-weight:600;overflow-wrap:anywhere}
.rv-meta{display:block;margin-top:3px;color:var(--ink-3);font-size:12.5px}
.rv-text{margin-top:8px;font-size:14px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.rv-reply{margin-top:10px;padding:10px 14px;border-radius:var(--r-ctl);background:var(--sunken);border-inline-start:3px solid var(--violet)}
.rv-reply small{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:12.5px;font-weight:500}
.rv-reply p{margin-top:4px;font-size:13.5px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.rv-acts{display:flex;gap:8px;margin-top:10px}
.rv:has([data-editor] form) .rv-acts{display:none}
.rv-edit{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.rv-edit label{font-size:13px;font-weight:500}
.rv-edit-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-edit-f .muted{flex:1;min-width:180px;font-size:12.5px}
.rv-count{color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.rv{padding:14px 16px}.rv-sum{gap:14px}.rv-filters .seg button{padding:6px 11px}}
/* App quality: rates against Play's thresholds, top issues, Apple's metrics and diagnostics */
.metric.bad{background:var(--rose-soft)}
.metric.bad b{color:var(--rose)}
.metric .chip{margin-top:6px}
.metric .q-was{display:block;margin-top:4px}
.q-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.q-cause{display:block;overflow-wrap:anywhere}
.q-cause.mono{font-size:12.5px;font-weight:500}
.q-versions .item{flex-wrap:wrap;row-gap:6px}
.q-versions .grow{min-width:9em}
/* Product pages: custom product pages and A/B tests (App Store), Play Console's in Google Play's column */
.mk-list{display:flex;flex-direction:column;margin:12px -20px 0}
.mk-row{display:flex;flex-direction:column;gap:3px;padding:11px 20px;border:0;border-top:1px solid var(--line-soft);background:none;font:inherit;color:inherit;text-align:start;cursor:pointer}
.mk-row:hover{background:var(--hover)}
.mk-row.on{background:var(--violet-soft);box-shadow:inset 3px 0 0 var(--violet)}
html[dir=rtl] .mk-row.on{box-shadow:inset -3px 0 0 var(--violet)}
.mk-row-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.mk-row-h b{font-weight:600;overflow-wrap:anywhere}
.mk-row-meta{color:var(--ink-3);font-size:12.5px}
.sec-card .mk-list+.note,.sec-card .empty+.note{margin:14px 0 0}
.mk-path{margin-top:10px;font-size:13px;color:var(--ink-2);direction:ltr;text-align:start;unicode-bidi:plaintext}
.mk-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.mk-acts .grow{flex:1}
.note .btn{margin-inline-start:6px;vertical-align:middle}
.mk-form{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--canvas)}
.mk-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500}
.mk-form .muted{font-size:12.5px}
.mk-tr-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk-pct{display:flex;align-items:center;gap:6px;max-width:140px}
.mk-open{margin-top:18px}
.mk-open:empty{display:none}
.mk-open .sec-card-h h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mk-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:12px}
.mk-url{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;word-break:break-all}
.mk-switch{display:inline-flex;align-items:center;gap:8px;font-weight:400;cursor:pointer}
.mk-switch input{width:auto;height:auto}
.mk-loc,.mk-tr{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.mk-loc h3{font-size:14px;font-weight:600;margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.mk-tr .mk-loc{border-top:0;padding-top:4px;margin-top:10px}
.mk-lang{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.mk-lang label{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:500}
.mk-lang .mk-acts{margin-top:0}
.mk-count{color:var(--ink-3);font-weight:400;font-variant-numeric:tabular-nums}
.mk-previews{margin-top:14px}
.mk-previews summary{cursor:pointer;font-size:13.5px;font-weight:500;color:var(--ink-2);margin-bottom:10px}
.mk-tr-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mk-tr-h b{font-weight:600}
.mk-tr-acts{display:flex;gap:6px;margin-inline-start:auto}
.mk-icon{width:40px;height:40px;border-radius:10px;box-shadow:0 0 0 1px var(--line-soft);flex:none}
.mk-icon.none{background:var(--sunken)}
.mk-add-lang{margin-top:12px}
.mk-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mk-inline{--fh:36px}
.mk-inline select{width:auto;min-width:180px}
.mk-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft)}
@media (max-width:640px){.mk-list{margin:12px -16px 0}.mk-row{padding:11px 16px}.mk-tr-fields{grid-template-columns:1fr}.mk-tr-acts{margin-inline-start:0}.mk-foot .btn{flex:1 1 auto}}
/* In-app events: the list, the editor beside its App Store preview, media slots, dates */
.ev-list{margin:12px -20px -20px}
.ev-row{gap:14px;color:inherit;text-decoration:none}
.ev-row .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.ev-row b{font-weight:600;overflow-wrap:anywhere}
.ev-row small{font-size:12.5px}
.ev-needs{color:var(--amber)}
.ev-thumb{width:96px;aspect-ratio:16/9;flex:none;border-radius:10px;overflow:hidden;background:var(--sunken);display:grid;place-items:center;color:var(--ink-3)}
.ev-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ev-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px}
.ev-edit{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.ev-side{order:2;position:sticky;top:16px;display:flex;flex-direction:column;gap:12px}
.ev-side-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ev-side-h .seg button{padding:5px 12px;font-size:13px}
.ev-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.ev-form .sec-card{margin:0}
.ev-state{margin:0}
/* The App Store's look: a rounded picture with the badge, name and description on a dark fade, the app below. */
.ev-pv{display:flex;flex-direction:column;gap:6px}
.ev-pv-when{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ev-pv-box{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 18px rgba(23,24,27,.12),0 0 0 1px var(--line-soft)}
.ev-pv-media{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--violet-soft),var(--sunken));overflow:hidden}
.ev-pv.ev-pv--details{max-width:290px;width:100%;margin-inline:auto}
.ev-pv.ev-pv--details .ev-pv-media{aspect-ratio:9/16}
.ev-pv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-pv-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:13px}
.ev-pv-shade{position:absolute;inset:40% 0 0;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.62))}
.ev-pv-text{position:absolute;inset-inline:14px;bottom:12px;display:flex;flex-direction:column;gap:1px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ev-pv-text small{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.ev-pv-text b{font-size:19px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.ev-pv-text span{font-size:13px;line-height:1.3;opacity:.92;overflow-wrap:anywhere}
.ev-pv-app{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ev-pv-app b{font-size:13.5px;font-weight:600}
.ev-pv-ico{width:34px;height:34px;flex:none;border-radius:9px;overflow:hidden;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:0 0 0 1px var(--line-soft)}
.ev-pv-ico img{width:100%;height:100%;object-fit:cover}
.ev-pv-get{padding:4px 16px;border-radius:var(--r-pill);background:var(--sunken);color:#0a66d8;font-size:13.5px;font-weight:700}
.ev-langs{margin:12px 0 0}
.ev-langs .sp-lang.add{position:relative}
.ev-langs .sp-lang.add select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ev-rmlang{margin-top:12px}
.lfield .count,.field .count{font-size:12px;color:var(--ink-3);font-weight:400}
.field .count.over{color:var(--rose);font-weight:600}
.ev-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px;align-items:start}
.ev-slot{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-ctl);background:var(--sunken)}
.ev-slot.busy{opacity:.7}
.ev-slot-pic{height:132px;max-width:100%;border-radius:10px;overflow:hidden;background:var(--surface);display:grid;place-items:center;color:var(--ink-3)}
.ev-slot.slot-card .ev-slot-pic{aspect-ratio:16/9}
.ev-slot.slot-details .ev-slot-pic{aspect-ratio:9/16}
.ev-slot-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ev-slot-body{display:flex;flex-direction:column;gap:3px}
.ev-slot-body b{font-size:14px;font-weight:600}
.ev-slot-body small{font-size:12.5px}
.ev-slot-acts{gap:8px;margin-top:6px;flex-wrap:wrap}
.ev-sched{border:0;margin:0 0 12px;padding:0}
.ev-sched+.ev-sched{padding-top:12px;border-top:1px solid var(--line-soft)}
.ev-sched legend{font-size:13px;font-weight:600;color:var(--ink-2);padding:0}
.ev-sched input[data-s=territories]{margin-top:8px}
.ev-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 12px}
.ev-dates input{min-width:0}
.ev-date-err{display:block;margin-top:8px}
.ev-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ev-acts .danger{margin-inline-start:auto}
.ev-acts+.help{margin-top:8px}
.ev-wrap{container-type:inline-size}
@container (max-width:780px){.ev-edit{grid-template-columns:minmax(0,1fr)}.ev-side{order:0;position:static}.ev-pv{max-width:420px}}
@media (max-width:640px){.ev-list{margin-inline:-16px}.ev-thumb{width:72px}.ev-row .chip{align-self:flex-start}}

/* ------------------------------ The launch path (app overview) ------------------------------
   Five stages on a line, each a column: its node on the line, its name, what it is, each store's
   state, and on the stage the app is at, what to do there. The columns share rows (subgrid), so
   names, lines and store rows sit level. The line fills up to the last stage done. On a narrow
   screen the line runs down the side and each stage is a row. */
.lf{padding:22px 24px 20px;margin-bottom:14px}
.lf-head{display:flex;align-items:flex-start;gap:20px}
.lf-head h2{font-size:18px;font-weight:600}
.lf-head p{margin-top:4px;color:var(--ink-3);font-size:13.5px;max-width:68ch}
.lf-head p a{font-weight:500;white-space:nowrap;text-decoration:none}
.lf-count{display:flex;align-items:baseline;line-height:1;font-variant-numeric:tabular-nums;direction:ltr}
.lf-count b{font-size:34px;font-weight:600;letter-spacing:-.03em}
.lf-count span{font-size:17px;color:var(--ink-3);font-weight:500}
.lf-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto auto 1fr auto;column-gap:12px;position:relative}
.lf-step{display:grid;grid-row:span 5;grid-template-rows:subgrid;min-width:0;position:relative}
.lf-link{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;padding:0 2px 2px;color:inherit;text-decoration:none;border-radius:16px;min-width:0}
.lf-link:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
/* The line through the nodes: a segment from each node to the next, filled once the stage is done. */
.lf-step:not(:last-child)::after{content:"";position:absolute;top:17px;inset-inline-start:42px;inset-inline-end:-10px;height:3px;border-radius:3px;background:var(--line);z-index:0}
.lf-step.done:not(:last-child)::after{background:var(--violet)}
.lf-step.now:not(:last-child)::after{background:linear-gradient(to var(--fwd,right),var(--violet) 0 30%,var(--line) 30%)}
[dir=rtl] .lf-step{--fwd:left}
.lf-node{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:14.5px;font-weight:600;background:var(--surface);color:var(--ink-3);box-shadow:inset 0 0 0 2px var(--line);font-variant-numeric:tabular-nums;transition:transform .2s var(--ease)}
.lf-node .i{width:17px;height:17px;stroke-width:2.2}
.lf-step.done .lf-node{background:var(--violet);color:#fff;box-shadow:none}
.lf-step.now .lf-node{background:var(--ink);color:#fff;box-shadow:0 0 0 5px var(--violet-soft)}
.lf-link:hover .lf-node{transform:scale(1.06)}
.lf-title{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:15px;min-width:0}
.lf-title .i{width:16px;height:16px;color:var(--ink-3)}
.lf-title b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-step.todo .lf-title b{color:var(--ink-2);font-weight:500}
.lf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lf-about{margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--ink-3);padding-inline-end:6px}
.lf-stores{display:flex;flex-direction:column;gap:6px;margin-top:12px;align-self:start}
.lf-store{display:flex;align-items:center;gap:7px;min-width:0;height:26px;padding:0 9px;border-radius:9px;background:var(--canvas);font-size:12.5px;color:var(--ink-2)}
.lf-store .slogo{width:13px;height:13px;flex:none;color:var(--ink-3)}
.lf-st{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-store.done{background:var(--ok-soft);color:var(--ok-ink)}
.lf-store.done .slogo{color:var(--ok-ink)}
.lf-store.unknown{background:var(--amber-soft);color:var(--amber)}
.lf-store .pl-wait{flex:1}
.lf-next{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--violet-soft);color:var(--violet-ink);font-size:12.5px;line-height:1.4}
.lf-next.lf-blank{background:none;padding:0}
.lf-go{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13px}
.lf-go .i{width:14px;height:14px;transition:transform .15s var(--ease)}
.lf-link:hover .lf-go .i{transform:translateX(2px)}
[dir=rtl] .lf-link:hover .lf-go .i{transform:translateX(-2px) scaleX(-1)}
.lf-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:13px}
.lf-foot a{text-decoration:none;font-weight:500}
@media (max-width:980px){
  .lf-steps{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0;margin-top:16px}
  .lf-step,.lf-link{grid-row:auto;grid-template-rows:none}
  .lf-link{grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding-bottom:18px}
  .lf-node{grid-row:1/span 4}
  .lf-title,.lf-about,.lf-stores,.lf-next{grid-column:2}
  .lf-title{margin-top:7px}
  .lf-stores{flex-direction:row;flex-wrap:wrap;margin-top:8px}
  .lf-next{margin-top:8px}
  .lf-next.lf-blank{display:none}
  .lf-step:not(:last-child)::after{top:40px;bottom:-2px;inset-inline-start:16.5px;inset-inline-end:auto;width:3px;height:auto}
  .lf-step.now:not(:last-child)::after{background:linear-gradient(to bottom,var(--violet) 0 30%,var(--line) 30%)}
}

/* ------------------------------ Builds: a tile per build, a terminal each ------------------------------ */
.run-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:16px}
.run-tiles>.run-more{display:contents}
.run-tiles>.run-more[hidden]{display:none}
.run-tiles>.run-more-btn{grid-column:1/-1;justify-self:center}
.run-tile{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:16px 16px 14px;text-align:start;cursor:pointer;transition:box-shadow .15s,transform .15s var(--ease)}
.run-tile:hover{box-shadow:var(--shadow),0 0 0 1px var(--violet);transform:translateY(-1px)}
.run-tile:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.rt-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rt-plat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.rt-plat .slogo{width:15px;height:15px;color:var(--ink-2)}
.rt-title{font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:-.01em;margin-top:4px}
.rt-when{font-size:13px;color:var(--ink-2)}
.rt-meta{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-meta .commit{font-size:12px}
.rt-steps{list-style:none;display:flex;gap:4px;margin:6px 0 0;padding:0}
.rt-steps li{flex:1;height:4px;border-radius:2px;background:var(--line)}
.rt-steps li.done{background:var(--violet)}
.rt-steps li.running{background:var(--sky);animation:rt-pulse 1.2s ease-in-out infinite}
.rt-steps li.waiting{background:var(--amber)}
.rt-steps li.failed{background:var(--rose)}
@keyframes rt-pulse{50%{opacity:.4}}
.run-empty{display:flex;align-items:center;gap:16px;padding:22px;margin-bottom:16px}
.run-empty p{font-size:13.5px;margin-top:2px}
/* The build on its way: its facts beside its terminal, moving. */
.run-live{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:20px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow),0 0 0 1.5px color-mix(in srgb,var(--sky) 45%,transparent)}
.rl-side{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.rl-side .run-meter{flex-wrap:wrap;margin-top:8px}
.rl-side .btn{align-self:flex-start;margin-top:auto}
.rl-pulse{position:absolute;top:2px;inset-inline-end:0;width:10px;height:10px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 0 color-mix(in srgb,var(--sky) 50%,transparent);animation:rl-ping 1.6s ease-out infinite}
.rl-side .rt-top{padding-inline-end:18px}
@keyframes rl-ping{to{box-shadow:0 0 0 12px transparent}}
@media (max-width:760px){.run-live{grid-template-columns:minmax(0,1fr)}}
/* The terminal: dark in both looks, the CLI's own commands, left to right. */
.term{--t-bg:#15141c;--t-ink:#e7e5f2;--t-dim:#8c89a3;border-radius:14px;background:var(--t-bg);color:var(--t-ink);overflow:hidden;font-family:var(--mono);font-size:12.5px;line-height:1.55;text-align:left;min-width:0}
.term-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1e1d27;color:var(--t-dim);font-size:11.5px}
.term-bar i{width:9px;height:9px;border-radius:50%;background:#3a3848}
.term-bar span{margin-inline-start:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-body{padding:12px 14px 14px;max-height:340px;overflow:auto}
.t-line{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:8px;align-items:baseline;padding:1px 0}
.t-sym{color:#a993ff}
.t-cmd{overflow-wrap:anywhere}
.t-end{color:#6fdcaa;white-space:nowrap;font-size:12px}
.t-note{grid-column:2/-1;color:var(--t-dim);font-family:var(--font);font-size:12px}
.t-line.failed .t-end,.t-err{color:#ff8fab}
.t-line.waiting .t-end,.t-line.waiting .t-sym{color:#ffc27a}
.t-line.running .t-cmd{color:#fff}
.t-start .t-cmd{color:#fff;font-weight:500}
.t-ok .t-cmd{color:#6fdcaa;font-family:var(--font)}
.t-line.new{animation:t-type .7s steps(28,end) both;clip-path:inset(0 100% 0 0)}
@keyframes t-type{to{clip-path:inset(0 0 0 0)}}
.t-spin{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid #6c8cff;border-inline-end-color:transparent;animation:t-spin .8s linear infinite;vertical-align:-1px}
@keyframes t-spin{to{transform:rotate(360deg)}}
.t-caret{display:inline-block;width:8px;height:15px;background:var(--t-ink);vertical-align:-3px;animation:t-blink 1s steps(1) infinite}
@keyframes t-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.t-line.new{animation:none;clip-path:none}.t-spin,.t-caret,.rl-pulse,.rt-steps li.running{animation:none}}
/* A build's window */
.run-dlg{width:min(720px,calc(100% - 32px));max-height:min(86vh,760px);padding:0;border:0;border-radius:22px;background:var(--surface);color:var(--ink);box-shadow:0 24px 64px rgba(23,24,27,.22)}
.run-dlg::backdrop{background:rgba(23,24,27,.3)}
.run-dlg[open]{display:flex;flex-direction:column}
.rd-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.rd-head .rt-plat{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--canvas)}
.rd-head .rt-plat .slogo{width:19px;height:19px;margin:0}
.rd-head .grow{flex:1;min-width:0}
.rd-head h2{font-family:var(--mono);font-size:18px;font-weight:500}
.rd-head small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.rd-body{padding:16px 18px 18px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.rd-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rd-facts .fact>span{display:flex;align-items:center;gap:6px;font-size:13.5px}
.rd-facts .slogo{width:14px;height:14px}
.rd-body .run-meter{margin:0}
.rd-body .term-body{max-height:none}
.rd-page{align-self:flex-start}
@media (max-width:620px){.rd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* How to make a build */
.how-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.how{display:flex;gap:12px;padding:14px;border-radius:14px;background:var(--canvas);min-width:0}
.how b{font-weight:600;font-size:14px}
.how p{font-size:13px;color:var(--ink-3);margin-top:3px}
.how-ico{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.how-cmds{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.how-cmd{display:inline-block;padding:4px 10px;border-radius:8px;background:#15141c;color:#e7e5f2;font-size:12.5px}
@media (max-width:700px){.how-grid{grid-template-columns:minmax(0,1fr)}}

/* Two cards side by side (RevenueCat's offering and entitlements) */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;align-items:start}
.duo>.sec-card{margin-top:14px}
.rc-block{margin-top:8px}
.sec-lead{font-size:13.5px;margin:-6px 0 12px}
/* A lone card in the overview's grid takes the whole row */
.ov-groups>.ov-card:only-child{grid-column:1/-1}

/* In-app purchases: a summary line on top, then each store's products as tiles. A tile: its kind
   and state, its name, its ID on a line of its own, RevenueCat's word, and its buttons last. */
.iap-sum{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:12px 16px;margin-bottom:14px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line-soft);font-size:13.5px}
.iap-sum b{font-weight:500}
.iap-sum .muted{margin-inline-start:auto}
.iap-sum-ok{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok-ink)}
.iap-sum-ok .i{width:14px;height:14px;stroke-width:2.4}
.count-pill{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;margin-inline-start:6px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink-2);font-size:12px;font-weight:600;vertical-align:2px}
.iap-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.iap-grid>.run-more{display:contents}
.iap-grid>.run-more[hidden]{display:none}
.iap-grid>.run-more-btn{align-self:center}
.iap-tile{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:12px 14px;border-radius:14px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-soft)}
.iap-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.iap-ico .i{width:16px;height:16px}
.iap-ico.has-img{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft);overflow:hidden}
.iap-ico img{width:100%;height:100%;object-fit:cover}
.iap-tile.consumable .iap-ico{background:var(--sky-soft);color:var(--sky)}
.iap-tile.non_consumable .iap-ico{background:var(--live-soft);color:var(--live-ink)}
.iap-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.iap-name{font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.iap-kind{font-size:12.5px;color:var(--ink-2)}
.iap-id{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iap-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.iap-tag,.iap-tags .chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:11.5px;font-weight:500}
.iap-tag.dim{color:var(--ink-3)}
.iap-tags .rc-badge{background:var(--ok-soft);color:var(--ok-ink);box-shadow:none}
.iap-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.iap-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.iap-acts:empty{display:none}
.iap-acts .btn{background:var(--surface)}
@media (max-width:520px){.iap-tile{flex-wrap:wrap}.iap-side{flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding-inline-start:46px}}
/* A page's own cards above a row of store columns keep a gap from the columns' headings */
#sec-body > [data-top] > :last-child, #sec-body > .note:has(+ .store-tiles){margin-bottom:22px}
/* The account at the island bar's end: the avatar, and its menu under it */
.isl-me{margin:0 0 0 2px}
.isl-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .15s}
.isl-av:hover,.isl-av[aria-expanded=true]{background:var(--sunken)}
.isl-av .av{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;text-transform:uppercase}
.isl-me-pop{top:calc(100% + 10px);bottom:auto;inset-inline-start:auto;inset-inline-end:-6px}
@media (max-width:860px){.isl-me{order:4}}
/* Apps in the store accounts, not in Ploa yet: the apps' tiles in a pale, muted tint, an Add at the
   bottom; and the tile that opens the form for one more */
.found-apps{margin-bottom:6px}
.app.found{background:color-mix(in srgb,var(--violet-soft) 45%,var(--canvas));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 14%,var(--line-soft))}
.app.found .app-ico{background:var(--surface);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.app.found h3{color:var(--ink-2)}
.app.found .plats{padding-bottom:12px}
.app.found .plat .os{flex:1}
.found-add{align-self:stretch;margin:auto 18px 18px}
.app.add.new-app{min-height:180px;cursor:pointer;font:inherit}
.app.add.new-app small{font-size:12.5px;color:var(--ink-3);max-width:24ch}
.found-none{font-size:13.5px;margin-top:10px}
.new-app-dlg{width:min(620px,calc(100% - 32px))}
.na-stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.na-store{margin:0;padding:12px 14px 14px;border:0;border-radius:14px;background:var(--canvas);min-width:0}
.na-store legend{float:left;display:flex;align-items:center;gap:7px;width:100%;padding:0;font-weight:600;font-size:14px}
.na-store legend .slogo{width:16px;height:16px}
.na-store .field{clear:both;margin-top:10px}
.isl-me-pop .lang{width:100%}
.isl-me-pop .who{padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.isl-me-pop .btn{align-self:flex-start}
@media (max-width:860px){.tr-lane{grid-template-columns:auto auto minmax(0,1fr);gap:10px;padding-inline-end:0}.tr-store b{display:none}.tr-open{position:static;transform:none;align-self:flex-end;margin-top:4px}}
/* Where a build or a row came from: Ploa, or a store's console */
/* Where something came from: a quiet line with the maker's mark, never a chip */
.src{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:400;color:var(--ink-3);white-space:nowrap;vertical-align:baseline}
.src img{width:11px;height:13px}
.src .slogo{width:12px;height:12px;margin:0;color:currentColor;vertical-align:0}
.src.ploa{color:var(--violet-ink);font-weight:500}
.rt-meta .src{margin-inline-end:6px}
.run-tile.outside{background:color-mix(in srgb,var(--sunken) 35%,var(--surface))}
/* The store page's source line: per store, the last change through Ploa, or none yet */
.src-strip{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 14px;padding:10px 14px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line-soft);font-size:13px;color:var(--ink-2)}
.src-line{display:inline-flex;align-items:center;gap:8px;min-width:0}
.src-line>.slogo{width:14px;height:14px;margin:0}
.src-line>b{font-weight:600;color:var(--ink)}
.ev-row small .src{margin-inline-end:6px}
/* On the store now: the app as the store shows it, then two even boxes, the same for every store */
.now-app{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px;border-radius:16px;background:var(--canvas)}
.now-app .app-ico{width:52px;height:52px;border-radius:14px;font-size:20px;flex:none}
.now-app .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.now-app b{font-size:16px;font-weight:600;line-height:1.3}
.now-sub{font-size:13.5px;color:var(--ink-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.now-sub.none{color:var(--ink-3);font-style:italic}
.now-lang{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:12px;color:var(--ink-3)}
.now-lang .i{width:13px;height:13px}
.now-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.now-box{display:flex;flex-direction:column;gap:6px;min-width:0;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-soft)}
.now-box>small{font-size:12px;color:var(--ink-3)}
.now-box>span{display:flex;align-items:baseline;gap:4px;min-height:24px}
.now-box b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.now-box small.ltr{color:var(--ink-3);font-size:12.5px}
.now-more{margin-top:10px;font-size:13px;color:var(--ink-2)}
/* Builds: each store's newest as one big tile, then the rest as rows, six to a page */
.run-tiles.top1{grid-template-columns:minmax(0,1fr);margin:0}
.top1 .run-tile{gap:8px;padding:22px 22px 20px}
.top1 .rt-plat{font-size:13.5px}
.top1 .rt-title{font-size:26px;margin-top:8px}
.top1 .rt-when{font-size:14.5px}
.top1 .rt-meta{font-size:13.5px}
.bld-cols{margin-bottom:16px}
.bld-cols .bld-row small{white-space:normal}
.bld-list .bld-row{width:100%;text-align:start;font:inherit;color:inherit;background:none;cursor:pointer;gap:12px}
.bld-row .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bld-row b{align-self:flex-start;font-family:var(--mono);font-weight:500;font-size:14px}
.bld-row small{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bld-os{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--canvas);flex:none}
.bld-os .slogo{width:15px;height:15px;margin:0}
.bld-row .chip{flex:none}
.is-new-row{box-shadow:inset 3px 0 0 var(--violet)}
html[dir=rtl] .is-new-row{box-shadow:inset -3px 0 0 var(--violet)}
.new-pill.inline{position:static;flex:none}
.pager-ctl{display:flex;align-items:center;gap:6px;font-size:12.5px}
.pager-ctl .icon-btn{width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 1px var(--line);background:var(--surface)}
.pager-ctl .icon-btn:disabled{opacity:.35;cursor:default}
@media (max-width:620px){.bld-row .src{display:none}}
/* A build this browser hasn't shown before */
.is-new{position:relative;border-radius:var(--r-card);box-shadow:0 0 0 2px var(--violet);animation:new-in .6s var(--ease)}
.is-new>.run-tile{width:100%;height:100%}
.new-pill{position:absolute;z-index:1;top:-9px;inset-inline-end:12px;height:18px;padding:0 8px;border-radius:var(--r-pill);background:var(--violet);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
@keyframes new-in{from{box-shadow:0 0 0 6px var(--violet-soft)}}
@media (prefers-reduced-motion:reduce){.is-new{animation:none}}
/* Testing: short rows per store, then a card that sums it up with buttons for the rest */
.t-list .t-row{gap:12px;padding-block:10px}
.t-row .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.t-row b{align-self:flex-start;font-family:var(--mono);font-weight:500;font-size:14px}
.t-row small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);min-width:0;white-space:nowrap;overflow:hidden}
.t-row .chip{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.sum-card .sec-card-h h2{display:flex;align-items:center;gap:8px}
.sum-card .sec-card-h .slogo{width:16px;height:16px;margin:0}
/* The summary's boxes split their shared row evenly (data-span): a box is as tall as its neighbour
   in the other store's card, whatever either one says. */
.sum-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;margin-top:12px}
.sum-box{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;border-radius:14px;background:var(--canvas)}
.sum-box small{font-size:12px;color:var(--ink-3)}
.sum-box b{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.sum-box span:not(.ltr){font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sum-box.good{background:var(--live-soft)}.sum-box.good b{color:var(--live-ink)}
.sum-box.warn{background:var(--amber-soft)}.sum-box.warn b{color:var(--amber)}
.sum-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sum-acts .i{width:16px;height:16px}
.pop-dlg{width:min(860px,calc(100% - 32px))}
/* A product's editor in its window: the form fills it, its title row stays in view, ✕ closes */
.product-dlg{width:min(760px,calc(100% - 32px))}
.product-dlg .rd-body{padding:0}
.product-dlg .rd-body > .pe{margin:0;padding:18px;border-radius:0;background:none}
.product-dlg .rd-body > .pe > .pe-h{position:sticky;top:0;z-index:1;margin:-18px -18px 0;padding:16px 60px 14px 18px;background:var(--surface);border-bottom:1px solid var(--line-soft)}
[dir="rtl"] .product-dlg .rd-body > .pe > .pe-h{padding:16px 18px 14px 60px}
.product-dlg .rd-body > .pe > .pe-h h3{font-size:17px}
.product-dlg .rd-body > .pe > .pe-h > :is([data-cancel],[data-close]){display:none}
.product-dlg .pd-x{position:absolute;top:12px;inset-inline-end:12px;z-index:2}
.pop-dlg .rd-body .store-tiles{margin:0}
.pop-dlg .tf-head,.pop-dlg .pt-about{display:none}
.pop-dlg .rd-head h2{font-family:var(--font);font-size:17px;font-weight:600}
/* Text in either language (dir=auto) keeps its own reading order but lines up with the page: on
   the right in Hebrew, on the left in English, like everything around it. Fields keep theirs. */
html[dir=rtl] :is(b,span,small,p,h1,h2,h3,div,a,li)[dir=auto]{text-align:right}
html[dir=ltr] :is(b,span,small,p,h1,h2,h3,div,a,li)[dir=auto]{text-align:left}
/* The overview of an app that's out: its updates, a column per store */
.up{padding:22px 24px 20px;margin-bottom:14px}
.up .lf-head{align-items:center;flex-wrap:wrap}
.up-acts{display:flex;gap:8px;flex-wrap:wrap}
.up-acts .i{width:16px;height:16px}
.up-stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:18px}
.up-store{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:var(--canvas)}
.up-store>.store-col-h{padding:0 2px 6px}
.up-row{display:grid;grid-template-columns:110px auto minmax(0,1fr);align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:12px;background:var(--surface);color:inherit;text-decoration:none;box-shadow:0 0 0 1px var(--line-soft);transition:box-shadow .15s}
.up-row:hover{box-shadow:0 0 0 1px var(--violet)}
.up-row small{font-size:12.5px;color:var(--ink-3)}
.up-row b{font-family:var(--mono);font-weight:500;font-size:14px}
.up-row .chip{justify-self:end;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.up-row>.muted{grid-column:2/-1;font-size:13px}
/* The release page's country: the stores as they look there */
.country-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:14px;padding:10px 14px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line-soft);font-size:13.5px}
.country-bar .i{width:16px;height:16px;color:var(--violet-ink)}
.country-bar label{font-weight:500}
/* The picker (picker.js): a field that narrows a long list as you type */
.picker{position:relative;display:inline-block;width:220px;max-width:100%}
.picker{--fh:36px}
.picker input{padding-inline-start:36px}
.picker-ico{position:absolute;top:9px;inset-inline-start:11px;width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.country-bar .picker-ico{color:var(--ink-3)}
.picker-list{position:absolute;z-index:30;top:calc(100% + 6px);inset-inline:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style:none;border-radius:14px;background:var(--surface);box-shadow:0 14px 36px rgba(23,24,27,.14),0 0 0 1px var(--line-soft)}
.picker-list li{padding:8px 10px;border-radius:9px;font-size:14px;cursor:pointer}
.picker-list li[aria-selected=true]{background:var(--violet-soft);color:var(--violet-ink)}
.picker-list li.picker-none{color:var(--ink-3);cursor:default}
.country-bar small{margin-inline-start:auto}
.name-form{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.name-form{--fh:36px}
.name-form input{width:220px}
.set-row .src{margin-inline-end:4px}
/* Store setup: the version the store pages are at, for both stores, and what each mark means */
.sp-version{display:flex;flex-direction:column;gap:14px;padding:18px 20px;margin-bottom:16px;background:var(--surface)}
.sp-vtop{display:flex;align-items:flex-start;gap:14px}
.sp-vtop .grow{flex:1;min-width:0}
.sp-vico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.sp-vico .i{width:19px;height:19px}
.sp-version.open .sp-vico{background:var(--sky-soft);color:var(--sky)}
.sp-version.locked .sp-vico{background:var(--sunken);color:var(--ink-2)}
.sp-version b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16px;font-weight:600}
.sp-version p{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:72ch}
.sp-vstores{flex:none;display:inline-flex;gap:6px;padding:6px 10px;border-radius:var(--r-pill);background:var(--canvas)}
.sp-vstores .slogo{width:15px;height:15px;margin:0}
/* The new version: its number in a field with a "v" before it, and the button beside */
.sp-vform{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;border-radius:14px;background:var(--canvas)}
.sp-vform label{font-size:13px;font-weight:500;color:var(--ink-2)}
.sp-vfield{display:inline-flex;align-items:center;height:40px;padding-inline:12px 4px;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line);direction:ltr;transition:box-shadow .15s}
.sp-vfield:focus-within{box-shadow:0 0 0 2px var(--violet)}
.sp-vfield span{font-family:var(--mono);font-size:14px;color:var(--ink-3)}
.sp-vfield input[type=text],.sp-vfield input[type=text]:focus{width:84px;height:38px;padding:0 6px;border-radius:0;background:none;box-shadow:none;font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.02em}
.sp-vform .btn{height:40px;margin-inline-start:auto}
.sp-vform .i{width:16px;height:16px}
.sp-legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-3)}
.sp-legend span{display:inline-flex;align-items:center;gap:7px}
.sp-legend .i{width:13px;height:13px}
.lg{width:11px;height:11px;border-radius:3px;display:inline-block}
.lg.saved{box-shadow:inset 0 0 0 1.5px var(--line)}
.lg.draft{background:var(--sky)}
.lock-chip .i{width:12px;height:12px}
@media (max-width:620px){.sp-vstores{display:none}.sp-vform .btn{margin-inline-start:0;width:100%}}
/* A step: its number first; done ones violet (done, as everywhere) with a check after the name; the
   open one in ink */
.sp-step.done{color:var(--ok-ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent);background:var(--ok-soft)}
.sp-step.done .sp-step-n{background:var(--surface);color:var(--ok-ink)}
.sp-step-ok{width:15px;height:15px;stroke-width:2.4;color:var(--ok)}
.sp-step[aria-current="step"].done{background:var(--ink);color:#fff;box-shadow:none}
.sp-step[aria-current="step"] .sp-step-ok{color:#fff}
/* The steps in an even grid, four to a row at most, each as wide as the others */
.sp-steps-list{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.sp-steps-list .sp-step{min-width:0;height:38px;gap:8px;padding-inline:6px 12px;font-size:13.5px}
.sp-steps-list .sp-step>span:not(.sp-step-n){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:620px){.sp-steps-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-steps-list .sp-step-n{width:22px;height:22px;font-size:11.5px}
.sp-steps-list .sp-step-ok{width:14px;height:14px}
/* A toggle is as wide as its choices, never stretched to the edge of its column */
.as-seg,.seg{align-self:flex-start;justify-self:start;width:fit-content;max-width:100%}
/* App Privacy: marking the step done, since Ploa can't read it in App Store Connect */
.pv-mark{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;margin-bottom:12px}
.pv-mark .grow{flex:1;min-width:220px}
.pv-mark b{font-size:15px;font-weight:600}
.pv-mark p{margin-top:3px;font-size:13px;color:var(--ink-2)}
.pv-mark-ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.pv-mark-ico .i{width:18px;height:18px}
.pv-mark.done{background:var(--ok-soft);box-shadow:none}
.pv-mark.done .pv-mark-ico{background:var(--surface);color:var(--ok-ink)}
.pv-mark.done b{color:var(--ok-ink)}
.pv-mark .btn .i{width:15px;height:15px}
/* A note or message next to a card keeps its distance from it, above or below */
:is(.card,section) + :is(.note,.msg,.help,p.muted),:is(.note,.msg) + :is(.card,section){margin-top:12px}
@media (max-width:860px){.tr-lane+.tr-lane::before{inset-inline-end:0}}
/* The release track's steps as pills: a check for each done (live in green), the current one in
   its state's color, the ones ahead dashed */
.tr-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.tr-pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border:1px solid transparent;border-radius:var(--r-pill);font-size:12.5px;white-space:nowrap}
.tr-pill .i{width:13px;height:13px;stroke-width:2.4}
.tr-pill.done{background:var(--violet-soft);color:var(--violet-ink)}
.tr-pill.on-air{background:var(--live-soft);color:var(--live-ink);font-weight:500}
.tr-pill.now{background:var(--sky-soft);color:var(--sky);font-weight:500}
.tr-pill.now.wait{background:var(--amber-soft);color:var(--amber)}
.tr-pill.now.fail{background:var(--rose-soft);color:var(--rose)}
.tr-pill.todo{color:var(--ink-3);background:none;border:1px dashed color-mix(in srgb,var(--ink-3) 45%,transparent)}
@media (max-width:860px){.tr-pill:not(.now):not(.on-air){padding:0 7px;font-size:0;gap:0}.tr-pill:not(.now):not(.on-air) .i{width:13px;height:13px}.tr-pill.todo{width:22px;padding:0}}
/* App settings: a card per subject, the same shape for each */
.as2-page{display:flex;flex-direction:column;gap:14px}
.as2-page>.sec-head{margin:16px 0 0}
.as2-page>.store-tiles{margin:0}
.as2{padding:18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.as2-h{display:flex;align-items:flex-start;gap:12px}
.as2-h .grow{flex:1;min-width:0}
.as2-h h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16px;font-weight:600}
.as2-h h2 .slogo{width:17px;height:17px;margin:0}
.as2-h p{margin-top:3px;font-size:13px;color:var(--ink-2);line-height:1.45}
.as2-h .plist{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.as2-ico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.as2-ico .i{width:18px;height:18px}
.as2-field{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:var(--canvas)}
.as2-field label{font-size:13px;font-weight:600}
.as2-field small{font-size:12.5px;color:var(--ink-3)}
.as2-inline{display:flex;gap:8px;align-items:center}
.as2-inline input[type=text]{flex:1;max-width:360px}
.as2-inline .btn{height:40px}
.as2-rows{display:flex;flex-direction:column}
.as2-row{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr) auto;align-items:center;gap:12px;min-height:46px;padding:6px 0;border-top:1px solid var(--line-soft)}
.as2-row:first-child{border-top:0}
.as2-k{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);min-width:0}
.as2-k .slogo,.as2-k .i{width:14px;height:14px;margin:0;flex:none;color:var(--ink-3)}
.as2-v{min-width:0;font-size:14px;overflow-wrap:anywhere}
.as2-v{--fh:36px}
.as2-v select{width:auto;max-width:100%}
.as2-a{justify-self:end}
.as2-foot{display:flex;justify-content:flex-end;padding-top:10px;border-top:1px solid var(--line-soft)}
.as2-danger{background:color-mix(in srgb,var(--rose-soft) 35%,var(--surface))}
.as2-danger .as2-ico{background:var(--rose-soft);color:var(--rose)}
.as2-form .field{margin-top:12px}
.store-tiles.aligned > .as2{display:flex}
@media (max-width:620px){.as2-row{grid-template-columns:minmax(0,1fr) auto}.as2-row .as2-v{grid-column:1/-1;grid-row:2}}
/* A card shown in a window: the window has its title and frame, so the card drops its own */
.pop-dlg .rd-body > .sec-card{margin:0;padding:0;box-shadow:none;background:none}
.pop-dlg .rd-body > .sec-card > .sec-card-h > h2{display:none}
.pop-dlg .rd-body > .sec-card > .sec-card-h:not(:has(> :not(h2))){display:none}
/* A version and its build, the same everywhere: the version, then the build in brackets, quieter */
/* Kit 2 · version plate (vb): the version in code type, the build in a soft tag beside it */
.vb{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--mono);font-weight:500;white-space:nowrap;letter-spacing:-.01em}
.vb-b{align-self:center;padding:0 6px;border-radius:6px;background:var(--sunken);color:var(--ink-3);font-size:.78em;font-weight:500;line-height:1.55;letter-spacing:0}
.chip .vb,.chip .vb-b{color:inherit}
.chip .vb-b{background:rgba(255,255,255,.55)}

/* The operator's announcement above every dashboard page (app.html #ploa-notice). */
.notice-strip{align-self:center;width:min(960px,calc(100% - 32px));margin:12px auto 0;padding:9px 16px;border-radius:14px;background:var(--violet-soft);color:var(--ink);font-size:14px;text-align:center}
.notice-strip.warn{background:var(--amber-soft);color:var(--ink)}

/* The operator panel (admin.html, docs/ADMIN.md). Its own origin and its own bar, so it never looks
   like a workspace: an ink "Operator" badge sits by the mark everywhere. */
.op-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em}
.op-badge-center{display:flex;width:max-content;margin:0 auto 12px}
.op-door-btn{margin-top:22px}
.op-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;max-width:1040px;margin:16px auto 0;padding:8px 10px 8px 14px;padding-inline:14px 10px;border-radius:30px;background:var(--surface);box-shadow:0 1px 0 rgba(23,24,27,.03),0 12px 32px rgba(60,40,140,.08),0 0 0 1px var(--line-soft)}
.op-brand{display:flex;align-items:center;gap:8px}
.op-name{font-weight:600;font-size:16px}
.op-tabs{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.op-tab{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);font:inherit;font-size:14px;text-decoration:none;white-space:nowrap;cursor:pointer}
.op-tab:hover,.op-tab[aria-expanded=true]{background:var(--hover)}
.op-tab[aria-current=page],.op-group.current > .op-tab{background:var(--violet-soft);color:var(--violet-ink);font-weight:500}
.op-chev{width:15px;height:15px;margin-inline-end:-4px;transition:transform .15s var(--ease)}
.op-tab[aria-expanded=true] .op-chev{transform:rotate(180deg)}
/* A group's pages: a card under its button, each page with a line on what it's for. */
.op-group{position:relative}
.op-menu{position:absolute;top:calc(100% + 10px);inset-inline-start:-6px;z-index:40;display:flex;flex-direction:column;gap:2px;width:310px;padding:6px;border-radius:18px;background:var(--surface);box-shadow:0 14px 36px rgba(23,24,27,.14),0 0 0 1px var(--line-soft)}
.op-menu a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:12px;color:var(--ink);text-decoration:none}
.op-menu a:hover,.op-menu a:focus-visible{background:var(--hover)}
.op-menu a b{font-size:14px;font-weight:500}
.op-menu a small{font-size:12.5px;color:var(--ink-3)}
.op-menu a[aria-current=page]{background:var(--violet-soft)}
.op-menu a[aria-current=page] b{color:var(--violet-ink)}
.op-account{display:flex;align-items:center}
/* The dashboard's account classes (.isl-me) move it last on phones; in the panel it stays in the first row. */
.op-bar .op-account{order:0;margin:0}
.op-account .isl-av{width:40px;height:40px}
.op-main{max-width:1040px;margin:0 auto;padding:28px 16px 64px;display:flex;flex-direction:column;gap:16px}
.op-head h1{font-size:30px;font-weight:600;letter-spacing:-.02em}
.op-about{margin-top:6px;color:var(--ink-2);max-width:68ch}
.op-card{padding:20px 22px}
.op-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.op-card-head h2{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.op-card h3{margin-top:16px;font-size:13px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
:lang(he) .op-card h3{letter-spacing:0}
.op-meta{margin-top:4px;font-size:13.5px;color:var(--ink-3)}
.op-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft)}
.op-card h3 + .op-row{border-top:0}
.op-row .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.op-row small{font-size:12.5px;color:var(--ink-3)}
.op-actions{display:flex;gap:8px;margin-top:12px}
.op-card .note{margin:12px 0 0}
.op-confirm{width:min(460px,calc(100% - 32px));padding:24px;border:0;border-radius:var(--r-card);background:var(--surface);color:var(--ink);box-shadow:0 24px 64px rgba(60,40,140,.22)}
.op-confirm::backdrop{background:rgba(23,24,27,.32)}
.op-confirm h2{font-size:19px;font-weight:600}
.op-summary{margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--sunken);color:var(--ink);font-size:14.5px}
.op-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.op-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.op-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.op-tile{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line-soft);text-align:start;transition:transform .12s var(--ease),box-shadow .15s}
.op-tile:hover{transform:translateY(-2px)}
.op-tile.open{box-shadow:0 0 0 2px var(--violet),0 8px 24px rgba(60,40,140,.10)}
.op-tile-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.op-tile-top b{font-size:15px;font-weight:600}
.op-tile small{font-size:13px;color:var(--ink-2)}
.op-kv{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:14px}
.op-kv span{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.op-kv b{font-weight:500;text-align:end;min-width:0;overflow-wrap:anywhere}
.op-card-head + .op-kv,.op-card h3 + .op-kv,.op-meta + .op-kv{border-top:0}
.op-card .op-card-head + *{margin-top:12px}
.op-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));column-gap:24px}
.op-tables .op-kv{font-size:13px}
.op-table{display:flex;flex-direction:column;margin-top:8px;font-size:14px}
.op-tr{display:grid;grid-template-columns:minmax(120px,2fr) repeat(3,minmax(70px,1fr));gap:12px;padding:9px 0;border-top:1px solid var(--line-soft)}
.op-th{border-top:0;font-size:12.5px;color:var(--ink-3);font-weight:500}
.op-error{color:var(--rose);font-size:12.5px;overflow-wrap:anywhere}
.op-check:empty{display:none}
.op-search{width:100%;max-width:420px}
.op-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.op-wrap{flex-wrap:wrap}
.op-wrap input{min-width:200px;flex:1}
.op-tr3{grid-template-columns:minmax(140px,2fr) repeat(2,minmax(60px,1fr))}
.op-stats{display:flex;gap:16px}
.op-form .field:first-child{margin-top:4px}
.op-form .op-inline .field{margin-top:0}
.op-code{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--ink);color:#f4f2ff;font-family:var(--mono);font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.op-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:8px;--fh:36px}
.op-filters input[type=search]{width:170px}
.op-filters label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
.op-stats .op-kv{border-top:0;padding:0;gap:10px}
.op-card .msg{margin:0}
.op-list{padding-top:6px;padding-bottom:6px}
.op-list .op-row:first-child{border-top:0}
.op-row a,.op-back a{color:var(--violet-ink);text-decoration:none}
.op-row a:hover,.op-back a:hover{text-decoration:underline}
.op-back{font-size:14px;margin-bottom:-8px}
.op-id{font-size:12.5px;color:var(--ink-3)}
.op-person{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid var(--line-soft)}
.op-card-head + .op-person{border-top:0}
.op-person small{font-size:12.5px;color:var(--ink-3);overflow-wrap:anywhere}
.op-person .op-actions{margin-top:8px;flex-wrap:wrap}
.op-inline{align-items:flex-end}
.op-inline label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2);--fh:36px}
.op-num{width:96px}
.op-detail{color:var(--ink-3);font-size:12px}
.op-audit b{font-size:13px;font-weight:500}
@media (prefers-reduced-motion:reduce){.op-tile{transition:none}.op-tile:hover{transform:none}.op-chev{transition:none}}
@media (max-width:640px){
  .op-bar{margin:8px 8px 0;border-radius:22px}
  .op-tiles{grid-template-columns:1fr 1fr;gap:8px}
  .op-tile{padding:12px}
  .op-tr{grid-template-columns:minmax(90px,1.4fr) repeat(3,minmax(44px,1fr));gap:8px;font-size:13px}
  /* The four places get a row of their own; a group's menu spans the bar instead of hanging off its button. */
  .op-tabs{order:3;flex-basis:100%;gap:2px}
  .op-tab{padding:7px 10px;font-size:13.5px}
  .op-bar .op-account{margin-inline-start:auto}
  .op-group{position:static}
  .op-menu{inset-inline:0;width:auto;top:calc(100% + 8px)}
  .op-main{padding-top:20px}
  .op-row{flex-wrap:wrap}
  .op-row > .op-inline{flex-basis:100%}
  .op-actions{flex-wrap:wrap}
  .op-inline select{min-width:0;max-width:100%}
}

/* GitHub (github.js): repos with the apps found in them, and an app's workflow file */
.gh-repo{border-top:1px solid var(--line-soft)}
.gh-repo:first-child{border-top:0}
.gh-repo>.item{border-top:0}
.gh-found{display:flex;flex-direction:column;gap:8px;padding:0 20px 16px}
.gh-app{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 14px;border-radius:14px;background:var(--canvas)}
.gh-app .grow{flex:1;min-width:200px}
.gh-app .grow b{font-weight:500}
.gh-app .grow small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.gh-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.gh-acts select{--fh:34px;width:auto;max-width:200px;font-size:13.5px}
.gh-wf{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--line-soft)}
.gh-wf h3{font-size:14.5px;font-weight:600}
.gh-wf p{font-size:13px;line-height:1.5}
.gh-wf summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.gh-yaml{margin-top:8px;max-height:320px;overflow:auto;padding:12px 14px;border-radius:12px;background:var(--canvas);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;text-align:left}
.op-github-register{display:grid;place-items:center;min-height:100vh;padding:16px;background:var(--canvas)}
.op-github-register-card{max-width:520px;padding:24px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line-soft)}
.op-github-register-card h1{font-size:20px;margin-bottom:8px}
.op-github-register-card p{margin-bottom:16px;color:var(--ink-2);line-height:1.5}
.gh-acct{flex-wrap:wrap}
.gh-acct .grow{min-width:160px}