/* 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;
  /* What sits on an ink fill (the primary button, a picked tab), the bars that stay dark in both
     themes (the publish and send bars, the dock, code lines), glass over the canvas, a card's lift,
     the canvas's two soft lights and its dots, and the shade behind a window. */
  --on-ink:#ffffff; --on-ink-2:#cbc8d8; --ink-hover:#2b2a35; --raised:#ffffff;
  --deep:#17181b;--on-deep:#ffffff;--on-deep-ink:#17181b;--on-deep-hover:#ece8ff; --deep-2:#2b2c33; --deep-3:#3a3b44;
  --glass:rgba(255,255,255,.92); --glass-card:rgba(255,255,255,.95); --glass-faint:rgba(255,255,255,.55);
  --elev:0 1px 0 rgba(23,24,27,.03),0 12px 32px rgba(60,40,140,.10); --elev-2:0 1px 0 rgba(23,24,27,.03),0 12px 32px rgba(60,40,140,.08); --float:0 2px 6px rgba(23,24,27,.08),0 16px 40px rgba(60,40,140,.22); --content:1180px;
  --halo-a:#efeaff; --halo-b:#e9f0ff; --dots:rgba(124,92,255,.16);
  --violet-tint:#f6f3ff; --violet-line:#cfc4ff; --violet-line-2:#d9d0ff; --violet-mid:#b9a8ff; --violet-deep:#5a3fe0; --dash:#d8d2ee;
  --backdrop:rgba(23,24,27,.32); --sheen:rgba(255,255,255,.7);
  --jelly-ink:#17181b; --chevron: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");
  color-scheme:light;
  --r-card:24px;--r-tile:16px; --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);
  /* The page across the whole screen with one side gutter, and what's in it on one grid: a tile is
     at least --tile wide, cards pair up two to a row, and a window is small for a question, medium
     for one form, large for tiles or both stores. */
  --gutter:clamp(16px,2.5vw,32px); --tile:280px; --card:560px; --gap:18px;
  --dlg-s:440px; --dlg-m:600px; --dlg-l:840px; --dlg-edge:24px;
}
/* Dark: the person's choice in Settings sets data-theme on <html>; without one, the system's setting. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --canvas:#121118; --surface:#1c1b25; --sunken:#262433;
  --ink:#eceaf5; --ink-2:#c3c0d4; --ink-3:#9a97ad;
  --line:#2f2d3d; --line-soft:#272535; --line-strong:#45425a; --hover:#24222f;
  --violet:#7c5cff; --violet-soft:#2a2347; --violet-ink:#b6a4ff;
  --live:#27a876; --live-soft:#16352a; --live-ink:#6fdcaa;
  --sky:#5b8cf0; --sky-soft:#1b2744;
  --amber:#e07a2c; --amber-soft:#3a2617;
  --rose:#f0476f; --rose-soft:#3d1a26;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.3);
  --on-ink:#15141c; --on-ink-2:#4a4858; --ink-hover:#ffffff; --raised:#3a3750;
  --deep:#262433; --deep-2:#363347; --deep-3:#45425a;
  --glass:rgba(28,27,37,.88); --glass-card:rgba(28,27,37,.94); --glass-faint:rgba(28,27,37,.5);
  --elev:0 1px 0 rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.35); --elev-2:0 1px 0 rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.3); --float:0 2px 6px rgba(0,0,0,.35),0 18px 44px rgba(0,0,0,.55);
  --halo-a:rgba(124,92,255,.16); --halo-b:rgba(91,140,240,.07); --dots:rgba(182,164,255,.10);
  --violet-tint:#211c36; --violet-line:#4a3f82; --violet-line-2:#3b3366; --violet-mid:#6a58c8; --violet-deep:#6a4ff0; --dash:#3d3a52;
  --backdrop:rgba(6,5,12,.62); --sheen:rgba(255,255,255,.05);
  --jelly-ink:#e4def8; --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a97ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  color-scheme:dark;
}}
:root[data-theme=dark]{
  --canvas:#121118; --surface:#1c1b25; --sunken:#262433;
  --ink:#eceaf5; --ink-2:#c3c0d4; --ink-3:#9a97ad;
  --line:#2f2d3d; --line-soft:#272535; --line-strong:#45425a; --hover:#24222f;
  --violet:#7c5cff; --violet-soft:#2a2347; --violet-ink:#b6a4ff;
  --live:#27a876; --live-soft:#16352a; --live-ink:#6fdcaa;
  --sky:#5b8cf0; --sky-soft:#1b2744;
  --amber:#e07a2c; --amber-soft:#3a2617;
  --rose:#f0476f; --rose-soft:#3d1a26;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.3);
  --on-ink:#15141c; --on-ink-2:#4a4858; --ink-hover:#ffffff; --raised:#3a3750;
  --deep:#262433; --deep-2:#363347; --deep-3:#45425a;
  --glass:rgba(28,27,37,.88); --glass-card:rgba(28,27,37,.94); --glass-faint:rgba(28,27,37,.5);
  --elev:0 1px 0 rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.35); --elev-2:0 1px 0 rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.3); --float:0 2px 6px rgba(0,0,0,.35),0 18px 44px rgba(0,0,0,.55);
  --halo-a:rgba(124,92,255,.16); --halo-b:rgba(91,140,240,.07); --dots:rgba(182,164,255,.10);
  --violet-tint:#211c36; --violet-line:#4a3f82; --violet-line-2:#3b3366; --violet-mid:#6a58c8; --violet-deep:#6a4ff0; --dash:#3d3a52;
  --backdrop:rgba(6,5,12,.62); --sheen:rgba(255,255,255,.05);
  --jelly-ink:#e4def8; --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a97ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*{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:var(--on-ink)}
.btn.primary:hover:not(:disabled){background:var(--ink-hover)}
.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:var(--chevron);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:var(--on-ink)}
.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)}
/* A token's tier, changed right on its row: a chip that opens as a select. */
.tier-pick{width:auto;height:26px;padding-inline:10px 28px;border-radius:var(--r-pill);background-color:var(--sunken);background-size:13px;background-position:right 8px center;color:var(--ink-2);font-size:12.5px;font-weight:500;box-shadow:none;vertical-align:middle}
[dir=rtl] .tier-pick{background-position:left 8px center}
.tier-pick.auto{background-color:var(--amber-soft);color:var(--amber)}

/* 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)}
/* Changes Ploa keeps until App Review has decided: help's violet, with a clock. */
/* Changes kept for App Review: one calm line on the app's pages, and the review window behind it */
.held-line{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:10px 14px 10px 10px;padding-inline:10px 14px;border:0;border-radius:14px;background:var(--violet-soft);color:var(--violet-ink);font:inherit;font-size:13.5px;text-align:start;cursor:pointer;transition:box-shadow .15s var(--ease)}
.held-line:hover{box-shadow:0 0 0 1px var(--violet)}
.held-line:focus-visible{outline:none;box-shadow:0 0 0 1.5px var(--violet),0 0 0 4px rgba(124,92,255,.18)}
.held-ico{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--violet);color:#fff}
.held-ico .i{width:15px;height:15px}
.held-line .grow{flex:1;min-width:0;line-height:1.4}
.held-line b{font-weight:600}
.held-line small{color:var(--ink-2);font-size:12.5px}
.held-go{flex:none;display:inline-flex;align-items:center;gap:4px;font-weight:500}
.held-go .i{width:14px;height:14px}
.held-pop{display:flex;flex-direction:column;gap:18px}
.held-lead{margin:0;color:var(--ink-2);font-size:13.5px}
.held-lang{display:flex;flex-direction:column;gap:10px}
.held-lang h3{display:flex;align-items:baseline;gap:8px;margin:0;font-size:15px;font-weight:600}
.held-lang h3 .tb-n:last-child{margin-inline-start:auto}
.held-area{display:flex;flex-direction:column;gap:8px}
.held-area-h{color:var(--ink-3);font-size:12px;font-weight:500;letter-spacing:.02em}
.held-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.held-tile{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:10px;row-gap:10px;min-width:0;padding:12px 14px;border-radius:var(--r-tile);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.held-tile.failed{background:var(--rose-soft);box-shadow:none}
.held-kind{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.held-kind .i{width:14px;height:14px}
.held-main{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13.5px;font-weight:500;overflow-wrap:anywhere}
.held-main small{color:var(--ink-3);font-size:12px;font-weight:400;line-height:1.4}
.held-acts{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:6px;align-self:end}
.held-sure{flex:1 1 100%;font-size:12.5px;color:var(--ink-2)}
.held-foot{flex-wrap:wrap}
@media (max-width:560px){.held-foot .tb-count{flex:1 1 100%}.held-foot .btn.primary{flex:1}.held-line{align-items:flex-start}.held-go{align-self:center}}
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-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:var(--ink);font-size:14px;text-decoration:none;transition:background .15s}
.me-link:hover{background:var(--hover)}
.me-link .i{width:17px;height:17px;color:var(--ink-3)}
.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}
.who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}
.app-mode .main{min-width:0;display:flex;flex-direction:column}
.main>#track,.main>#live-appr,.main>#live,.main>.set-shell{width:100%;box-sizing:border-box;padding-inline:var(--gutter)}
.main>.set-shell{padding-top:14px;padding-bottom:64px}
.main>#live-appr,.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(--raised);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:30px;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:is(.danger-solid,.solid-danger){background:var(--rose);color:var(--on-deep);border-color:transparent}
.btn:is(.danger-solid,.solid-danger):hover:not(:disabled){background:#a81d40}
.btn:is(.danger-solid,.solid-danger):disabled{opacity:.4}
.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:var(--on-ink)}
.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}
/* One line a platform: mark and name, version, the state's word at the end (cut, never wrapped),
   and a thin bar under the line as far along as the version is, in the state's color. */
.plats .plat{position:relative;flex-wrap:nowrap;gap:10px;min-height:0;height:34px;padding-bottom:4px;box-sizing:border-box;--st:var(--ink-3)}
.plat .ver{white-space:nowrap}
.plat .plat-host{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.plat .ver:has(.plat-host){min-width:0;overflow:hidden}
.plat-st{margin-inline-start:auto;min-width:0;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:var(--st)}
.plat-bar{position:absolute;inset-inline:0;bottom:0;height:3px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.plat-bar::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p,0) * 100%);border-radius:2px;background:var(--st)}
.plat.t-prod{--st:var(--live)}
.plat.t-review,.plat.t-processing{--st:var(--sky)}
.plat.t-wait{--st:var(--amber)}
.plat.t-fail{--st:var(--rose)}
.plat.t-off,.plat.t-quiet{--st:var(--ink-3)}
.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);white-space:nowrap}
/* In a store column (a third of the page) the buttons share the width evenly and break only between
   words ("Anyone with the link" on two lines), never inside one ("Tester s", 2026-11-06). */
.store-col .seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:100%;border-radius:16px}
.store-col .seg button{white-space:normal;word-break:keep-all;overflow-wrap:normal;padding:6px 8px;line-height:1.25;border-radius:12px}
.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(--deep);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)}
.appr-item::before{background:var(--amber)}
.appr-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding-bottom:4px}
.appr-head .i{width:18px;height:18px;color:var(--amber)}
.appr-head b{font-weight:600}
.appr-head small{color:var(--ink-3);font-size:13px}
.appr-head .btn{margin-inline-start:auto}
.appr-item .req{padding-bottom:2px}
.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}
/* Which platform a build is for: Apple's mark or Android's robot, first in the card, the rest beside it. */
.live-item.has-plat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px}
.live-body{min-width:0}
.live-plat{display:grid;place-items:center;color:var(--ink)}
.live-plat svg{width:28px;height:28px}
.live:has(.live-item + .live-item) .live-plat svg{width:22px;height:22px}
.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.stopped::before{background:var(--ink-3)}
.live-item.stopped .live-head small{color:var(--ink-2)}
.live-item.stopped .live-step.fail{color:var(--ink-2)}
.live-item.stopped .live-step.fail::before{background:var(--ink-3)}
.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:auto 0 20px;width:auto;height:auto;margin:0;padding:0;border:0;background:none;overflow:visible;color:inherit;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:var(--on-ink);font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.toast.err{background:var(--rose)}
.toast.has-act{display:flex;align-items:center;gap:14px;padding-inline-end:8px;pointer-events:auto}
.toast.has-act button{height:28px;padding:0 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);color:inherit;font:inherit;font-weight:600}
.toast.has-act button:hover{background:rgba(255,255,255,.26)}

@media (max-width:860px){
  .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}
.board.board-now{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg.board-filter span.live-dot{padding:0;width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;margin-inline-end:6px;vertical-align:middle;box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 25%,transparent)}
.board-quiet{margin:-6px 0 14px;font-size:13.5px}
.board-log{margin-top:16px;padding:0}
.board-log>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none;font-weight:600}
.board-log>summary::-webkit-details-marker{display:none}
.board-log>summary .n{color:var(--ink-3);font-weight:500}
.board-log[open]>summary{border-bottom:1px solid var(--line)}
.board-log .empty{padding:14px 16px;margin:0}
.log-list{display:flex;flex-direction:column;padding:6px 8px}
.log-row{display:grid;grid-template-columns:10px minmax(0,32%) minmax(0,1fr) 120px 96px 64px;align-items:center;gap:12px;height:44px;padding:0 10px;border-radius:10px;font-size:13px}
.log-row+.log-row{border-top:1px solid var(--line-soft)}
.log-row:hover{background:var(--hover)}
.log-what{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
.log-what b{font-weight:600}
.log-what span{color:var(--ink-3)}
.log-line{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.log-who{min-width:0;overflow:hidden;text-align:end}
.log-who .who{background:var(--sunken);border-radius:var(--r-pill);padding:1px 8px;color:var(--ink-2);font-size:12px;white-space:nowrap}
.log-when{color:var(--ink-3);font-size:12px;white-space:nowrap;text-align:end}
.log-row .mark-acts{display:flex;gap:2px;justify-content:flex-end}
.log-row .mark-acts .icon-btn{width:28px;height:28px}
.log-dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.log-row.ok .log-dot{background:var(--live)}
.log-row.stuck .log-dot{background:var(--rose)}
.log-row.stuck .log-line{color:var(--rose)}
@media (max-width:640px){.log-row{grid-template-columns:10px minmax(0,1fr) auto;height:auto;min-height:44px;padding:8px 10px;row-gap:2px}.log-row .log-line{grid-column:2/4;grid-row:2}.log-row .log-who{display:none}.log-row .mark-acts{grid-column:3;grid-row:3}}
.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:var(--r-tile);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-top .chip{flex:none;align-self:flex-start}
.bc-top small[dir=auto]{font-size:13px;color:var(--ink-2);white-space:normal}
.bc-fail{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--rose-soft);color:var(--rose);font-size:13px}
.bc-fail p{margin:0;font-weight:500}
.bc-fail ul{margin:6px 0 0;padding-inline-start:18px;color:var(--ink-2)}
.bc-fail li+li{margin-top:2px}
.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)}
/* A failure's pin and hide: on the card's corner, shown on hover (always on touch screens) */
.bcard-wrap{position:relative}
.bcard-wrap .mark-acts{position:absolute;top:8px;inset-inline-end:8px;opacity:0;transition:opacity .15s}
.bcard-wrap:hover .mark-acts,.bcard-wrap:focus-within .mark-acts{opacity:1}
@media (hover:none){.bcard-wrap .mark-acts{opacity:1}}
.bcard-wrap .bc-top .grow{padding-inline-end:58px}
.bcard.pinned{box-shadow:0 0 0 1.5px var(--rose-soft),0 0 0 1px var(--rose)}
.mark-acts{display:inline-flex;gap:2px;flex:none}
.mark-acts .icon-btn{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;border:0;background:var(--surface);color:var(--ink-3);cursor:pointer}
.mark-acts .icon-btn:hover{background:var(--sunken);color:var(--ink)}
.mark-acts .icon-btn.on{color:var(--rose)}
.mark-acts .i{width:16px;height:16px}
.chip.pin{background:var(--rose-soft);color:var(--rose);display:inline-flex;align-items:center;gap:4px}
.chip.pin .i{width:12px;height:12px}
.chip.pin::before{display:none}
.bc-more{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--ink-3);padding:6px;text-decoration:none;border-radius:10px}
.bc-more:hover{background:var(--surface);color:var(--ink-2)}
.bc-more .i{width:14px;height:14px}
.bc-hidden{display:grid;gap:10px;opacity:.7}
@media (max-width:1100px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.board.board-now{display:grid;grid-template-columns:1fr;overflow:visible;margin-inline:0;padding-inline:0}}
/* 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 li.stopped::before{box-shadow:0 0 0 2px var(--ink-3);background:var(--sunken)}
.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(--deep);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:#17181b}
/* 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, on one line */
#track:empty{display:none}
.track{display:flex;align-items:center;gap:18px;min-height:52px;margin-top:16px;padding:8px;padding-inline-start:18px;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 store: its name, the version, a dot per step, then the step it's at; a line between the stores */
.tr-lane{position:relative;display:flex;align-items:center;gap:12px;min-width:0;white-space:nowrap}
.tr-lane+.tr-lane{padding-inline-start:18px}
.tr-lane+.tr-lane::before{content:"";position:absolute;inset-inline-start:0;top:50%;height:22px;transform:translateY(-50%);border-inline-start:1px solid var(--line)}
.tr-store{display:flex;align-items:center;gap:7px;min-width:0}
.tr-store .slogo{width:15px;height:15px;margin:0;flex:none}
.tr-store b{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis}
.tr-ver{font-size:12.5px;color:var(--ink-2)}
.tr-dots{display:flex;align-items:center;flex:none}
.tr-dots i{width:9px;height:9px;flex:none;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line)}
.tr-dots b{width:14px;height:2px;border-radius:2px;background:var(--line)}
.tr-dots .done{background:var(--violet);box-shadow:none}
.tr-dots i.now{width:11px;height:11px;box-shadow:inset 0 0 0 3px currentColor}
.tr-dots.on-air :is(i,b){background:var(--live)}
.tr-word{font-weight:500;overflow:hidden;text-overflow:ellipsis}
:is(.tr-dots i.now,.tr-word).processing{color:var(--sky)}
:is(.tr-dots i.now,.tr-word).wait{color:var(--amber)}
:is(.tr-dots i.now,.tr-word).fail{color:var(--rose)}
.tr-word.on-air{color:var(--live-ink)}
.tr-open{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px;border-radius:var(--r-pill);color:var(--violet-ink);font-weight:500;white-space:nowrap;transition:background-color .15s}
.track:hover .tr-open{background:var(--violet-soft)}
.tr-open .i{width:14px;height:14px}
/* Narrow: a line per store, their names give way to their logos, the link under them */
@media (max-width:860px){.track{flex-wrap:wrap;row-gap:4px;padding-inline-start:14px}.tr-lane{flex-basis:100%;min-height:30px}.tr-lane+.tr-lane{padding-inline-start:0}.tr-lane+.tr-lane::before{display:none}.tr-store b{display:none}}

/* Island: one floating bar on top: the jellyfish (home, the apps), the app, its stages as
   tabs and search; a jellyfish swims under the open tab (swim.js). */
.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-appr,.main>#live,.main>.set-shell{margin-inline:auto}
.main>.set-shell{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:var(--elev-2),0 0 0 1px var(--line-soft)}
.bell{height:44px;padding-inline:12px;border-radius:22px;display:grid;place-items:center;color:var(--ink);transition:background .15s}
.bell:hover{background:var(--violet-soft)}
.bell .logo-word{display:block;height:26px;width:auto;overflow:visible}
.island > .bell{margin-inline-start:6px}
.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:var(--on-ink);font-weight:500}
/* Changing tab, the dark pill glides from the old tab to the new one (swim.js), under its word. */
.isl-tabs{position:relative}
.isl-tabs a{position:relative;z-index:1}
.isl-glide{position:absolute;z-index:0;border-radius:var(--r-pill);background:var(--ink);pointer-events:none;transform-origin:0 50%}
.isl-tabs a.glided[aria-current]{background:transparent;color:var(--ink-2)}
/* The jellyfish under the open tab, and the one that swims between the bar and an app's map: its
   bell and tentacles over the page, under the bar (swim.js). It goes with the bar on a phone. */
.swim{position:fixed;inset:0;z-index:5;pointer-events:none;transition:opacity .25s}
body.bar-away .swim{opacity:0}
.swim-arms{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.swim-arms path{fill:none;stroke:var(--violet);stroke-linecap:round}
.swim-arms path.dashed{stroke:var(--dash)}
.swim-bell{position:absolute;left:0;top:0;width:100px;height:60px;overflow:visible;transform-origin:0 0;opacity:0}
.swim-body{transform-box:fill-box;transform-origin:50% 100%;animation:reef-breathe 4.5s ease-in-out infinite}
/* Changing page: the page's parts fade up and out, and the next page's swell in, one after another. */
#view>.pg-out{opacity:0;transform:translateY(-8px);filter:blur(3px);transition:opacity .17s ease-in,transform .17s ease-in,filter .17s}
body.page-in #view>:not(.reef,:has(.reef)){animation:page-in .6s cubic-bezier(.16,1,.3,1) backwards}
body.page-in #view>:nth-child(2){animation-delay:.05s}
body.page-in #view>:nth-child(3){animation-delay:.1s}
body.page-in #view>:nth-child(n+4){animation-delay:.15s}
@keyframes page-in{from{opacity:0;transform:translateY(16px);filter:blur(4px)}}
@media (prefers-reduced-motion:reduce){.swim-body,body.page-in #view>*{animation:none}}
.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)}
/* The account menu's tiles: a round violet icon over the name, three to a row */
.me-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.me-tiles a{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:var(--r-tile);background:var(--canvas);color:var(--ink);text-decoration:none;font-size:13.5px;transition:background .15s}
.me-tiles a:hover{background:var(--sunken)}
.me-tiles a[aria-current]{box-shadow:inset 0 0 0 1.5px var(--violet)}
.me-tiles span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.me-tiles .i{width:17px;height:17px}
.me-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 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}
}

/* Search: one field over every page, app and app page */
.find{width:min(var(--dlg-m),calc(100% - var(--dlg-edge)));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:var(--backdrop)}
.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}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:13px;font-weight:500;line-height:20px;color:var(--ink-3);margin-bottom:6px}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs>span{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.crumbs .slogo{width:14px;height:14px;margin:0;vertical-align:0;color:currentColor}
.crumbs .crumb-sep{width:14px;height:14px;flex:none;opacity:.6}
.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}
/* The list runs to the card's edges for its rows' own padding; a line of text in it (an empty
   state) keeps the card's. */
.sec-card>.list>p{padding-inline:20px}
.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}
.terms-check{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:13.5px;line-height:1.45;color:var(--ink-2);cursor:pointer;text-align:start}
.terms-check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--violet)}

/* 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 */
.danger-dialog{border:0;padding:0;border-radius:var(--r-card);background:var(--surface);color:var(--ink);width:min(var(--dlg-s),calc(100% - var(--dlg-edge)));box-shadow:0 20px 60px rgba(23,24,27,.18),0 0 0 1px var(--line-soft)}
.danger-dialog::backdrop{background:var(--backdrop)}
.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}

/* Plan */
.plan-now{display:flex;align-items:center;gap:12px}
.plan-now .grow{flex:1;min-width:0}
.plan-now small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.plan-due{color:var(--rose)}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.plan-card{display:flex;flex-direction:column;gap:10px}
.plan-card.on{box-shadow:inset 0 0 0 2px var(--violet)}
.plan-card h2{font-size:17px;margin:0}
.plan-price b{font-size:30px;font-weight:600;letter-spacing:-.02em}
.plan-price small{color:var(--ink-3);font-size:13.5px;margin-inline-start:4px}
.plan-for{font-size:13.5px;line-height:1.45}
.plan-list{flex:1;margin:0;padding-inline-start:18px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.plan-list li+li{margin-top:4px}
@media (max-width:760px){.plan-grid{grid-template-columns:1fr}}
/* The plan you're on, and changing it in a window: the three plans to pick from, then what the
   change does (Paddle's proration, a checkout, Free at the period's end) and the button that does it */
.plan-mine{align-items:flex-start;flex-wrap:wrap}
.plan-mine small.plan-label{margin:0 0 2px;font-size:12.5px;font-weight:600}
.plan-name{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em}
.plan-mine .plan-list{margin-top:10px}
.plan-btns{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.plan-dlg{display:flex;flex-direction:column;gap:14px}
.plan-dlg .seg{align-self:flex-start}
.plan-opt{position:relative;cursor:pointer;transition:box-shadow .15s var(--ease)}
.plan-opt:hover{box-shadow:var(--shadow),0 0 0 1px var(--ink-3)}
.plan-opt.on{box-shadow:inset 0 0 0 2px var(--violet)}
.plan-opt input{position:absolute;opacity:0;pointer-events:none}
.plan-opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.plan-opt-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan-opt-name{font-size:17px;font-weight:600}
.plan-sum{min-height:44px;font-size:14px}
.plan-sum p+p{margin-top:6px}
.plan-sum small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.plan-sum .btn{margin-top:10px}
.plan-acts{display:flex;justify-content:flex-end;gap:8px;padding-top:12px;border-top:1px solid var(--line-soft)}
@media (prefers-reduced-motion:reduce){.plan-opt{transition:none}}
.plan-cloud .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan-meter{display:flex;align-items:center;gap:12px;font-size:13.5px;padding:6px 0}
/* What the plan includes: a label and what it says, side by side; the label never wraps under it. */
.plan-inc .plan-meter{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;align-items:baseline}
.plan-inc .plan-meter b{font-weight:500;text-align:end}
.plan-inc .plan-meter .grow{color:var(--ink-2)}
@media (max-width:640px){.plan-inc .plan-meter{grid-template-columns:1fr}.plan-inc .plan-meter b{text-align:start}}
.plan-meter .grow{flex:1;min-width:0;font-weight:500}
.plan-meter .meter{width:min(180px,32vw);height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.plan-meter .meter i{display:block;height:100%;border-radius:inherit;background:var(--violet)}
.plan-ov-head{font-size:13.5px;font-weight:600;margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--line-soft)}
.plan-cloud > .plan-ov-head:first-child{margin-top:0;padding-top:0;border-top:0}
.plan-ov{flex-wrap:wrap;row-gap:0}
.plan-ov small{white-space:nowrap}
@media (max-width:560px){.plan-ov small{flex-basis:100%}}

/* Vault › Encryption */
.enc-head{display:flex;align-items:flex-start;gap:12px}
.enc-head .grow{flex:1;min-width:0}
.enc-head small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.enc-ref{margin-top:10px;font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.enc .msg{margin-top:12px}
.enc-about{margin-top:12px;font-size:13.5px;line-height:1.5}
.enc-change{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.enc-change h3{font-size:15px;margin:0 0 10px}
.enc-change .seg{flex-wrap:wrap;margin-bottom:14px}
.enc-change form > .btn{margin-top:14px}
.enc-steps{margin:0 0 14px;padding-inline-start:20px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.enc-steps li+li{margin-top:8px}
.enc-code{position:relative;margin-top:8px;border-radius:var(--r-ctl);background:var(--deep);color:#ebe8f4}
.enc-code pre{margin:0;padding:12px 14px;padding-inline-end:76px;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-all;text-align:left}
.enc-code .btn{position:absolute;top:8px;right:8px;color:#ebe8f4;background:rgba(255,255,255,.12);box-shadow:none}
.enc-code .btn:hover{background:rgba(255,255,255,.2)}

/* 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:var(--surface);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-fail{display:block;max-width:56ch;font-size:13px;line-height:1.45;color:var(--rose);margin-top:4px}
.sub-fail ul{list-style:none;margin:2px 0 0;padding:0}
.sub-fail li::before{content:"• "}
.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) */
/* A store's column header (its logo, name and platforms), framed on the page; inside a card it stays plain. */
.store-col-h{display:flex;align-items:center;gap:10px;min-height:28px;padding:8px 12px;font-size:15px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.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:var(--on-ink)}
.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:var(--on-ink);box-shadow:none}
.sp-lang[aria-current="true"] small{color:var(--on-ink-2)}
.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;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-ready .msg{margin:0;flex:1 1 240px}
/* The store page on a phone (phoneview.js): the stores' look, kept plain, in the listing's language */
.phv-note{font-size:13px}
.phv-row{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.phv-fig{margin:0;display:grid;gap:8px;justify-items:center}
.phv-fig figcaption{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.phv-fig figcaption .slogo{width:15px;height:15px}
.phv-phone{width:300px;height:620px;border-radius:44px;padding:11px;background:#17181b;box-shadow:0 18px 40px rgba(23,24,27,.18)}
.phv-screen{height:100%;border-radius:34px;background:#fff;color:#111;overflow:auto;scrollbar-width:none;padding:44px 16px 20px;display:flex;flex-direction:column;gap:16px;font-family:-apple-system,"SF Pro Text","Google Sans",system-ui,sans-serif;text-align:start}
.phv-screen::-webkit-scrollbar{display:none}
.phv-phone .phv-screen [dir=auto]{text-align:match-parent}
.phv-head{display:flex;gap:12px;align-items:flex-start}
.phv-icon{flex:none;width:92px;height:92px;border-radius:21px;overflow:hidden;display:grid;place-items:center;background:#eef0f4;color:#555;font-size:34px;font-weight:600;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.phv-icon img{width:100%;height:100%;object-fit:cover}
.phv-id{min-width:0;display:flex;flex-direction:column;gap:3px}
.phv-id b{font-size:19px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.phv-id small{font-size:13px;color:#8a8a8e;line-height:1.3}
.phv-btn{align-self:flex-start;margin-top:auto;background:#0a84ff;color:#fff;font-weight:700;font-size:14px;padding:5px 20px;border-radius:999px}
.phv-screen section{display:flex;flex-direction:column;gap:6px;border-top:.5px solid #e2e2e6;padding-top:12px}
.phv-screen h4{margin:0;font-size:17px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.phv-sub{font-size:12.5px;color:#8a8a8e}
.phv-text{font-size:13.5px;line-height:1.45;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.phv-promo{font-size:13.5px;line-height:1.45;margin-bottom:6px}
.phv-more{align-self:flex-end;font-size:13px;color:#0a84ff;margin-top:-4px}
.phv-shots{flex:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;scroll-snap-type:x mandatory}
.phv-shots::-webkit-scrollbar{display:none}
.phv-shots img{flex:none;scroll-snap-align:start;border-radius:14px;box-shadow:0 0 0 .5px rgba(0,0,0,.12);object-fit:cover;background:#f2f2f5}
.phv-shots.tall img{height:330px;width:auto}
.phv-shots.wide img{height:200px;width:auto;border-radius:10px}
.phv-gap{display:flex;align-items:center;justify-content:center;min-height:30px;padding:6px 10px;border:1.5px dashed #c9cbd3;border-radius:10px;color:#8a8a8e;font-size:12.5px;text-align:center}
.phv-shots .phv-gap{flex:1;min-height:150px}
.phv-phone.google .phv-icon{width:64px;height:64px;border-radius:15px;font-size:26px}
.phv-phone.google .phv-head{align-items:center}
.phv-phone.google .phv-id b{font-size:21px;font-weight:500;font-family:"Google Sans",system-ui,sans-serif}
.phv-phone.google .phv-btn.wide{align-self:stretch;margin:0;text-align:center;background:#01875f;border-radius:20px;padding:8px;font-weight:500}
.phv-phone.google section{border-top:0;padding-top:0}
.phv-phone.google h4{font-size:16px;font-weight:500;font-family:"Google Sans",system-ui,sans-serif}
.phv-arrow{color:#5f6368}
.phv-feature{position:relative;margin-inline:-16px}
.phv-feature img{width:100%;display:block}
.phv-play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55)}
.phv-play::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;transform:translateX(2px)}
@media (max-width:640px){.phv-phone{width:272px;height:560px}}
.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:var(--r-tile);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:var(--on-ink);box-shadow:none}
.st-set[aria-selected=true] .st-count{color:var(--on-ink-2)}
.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:var(--hover);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:var(--glass);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(var(--dlg-m),calc(100% - var(--dlg-edge)));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:var(--backdrop)}
.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(var(--dlg-s),calc(100% - var(--dlg-edge)))}
.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(var(--dlg-l),calc(100% - var(--dlg-edge)))}
.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:var(--on-ink);box-shadow:none}
.sp-step[aria-current="step"] .sp-step-n{background:color-mix(in srgb,var(--on-ink) 16%,transparent);color:var(--on-ink)}
.sp-step[aria-current="step"] small{color:var(--on-ink-2)}
.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:4px;border-radius:var(--r-pill);background:var(--sunken)}
.as-seg label{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--r-pill);font-size:13.5px;color:var(--ink-2);cursor:pointer}
.as-seg label.on{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--shadow)}
.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:var(--on-ink);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:var(--on-ink);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:var(--r-tile);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:var(--r-pill);background:var(--sunken)}
.sp-store-tab{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-pill);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:500;box-shadow:var(--shadow)}
.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(--deep);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:#17181b}
.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 small{display:block;margin-top:2px;overflow-wrap:anywhere}
.send-results li.waiting{opacity:.55}
.send-bar .spin,.send-results .spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite}
.send-now{display:inline-flex;align-items:center;gap:8px}
@media (prefers-reduced-motion:reduce){.send-bar .spin,.send-results .spin{animation-duration:2.4s}}
.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.canceled .bar{background:var(--sunken)}.run-meter.canceled .bar i{background:var(--ink-3)}
.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}
.run-meter .meter-text{text-align:start;white-space:nowrap}
.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.stop .con-mark,.con-line.stop .con-text{color:var(--con-dim)}
.con-line.wait .con-mark,.con-line.wait .con-text,.con-line.attn .con-mark,.con-line.attn .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,var(--sheen),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,var(--surface) 62%,transparent);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}
}
/* Waiting (wait.js): words that say Ploa is waiting on something. A soft violet light passes through
   them in the reading direction every 2.6 seconds, painted in the words' own color so it reads on
   light and dark alike; where there's room, the jellyfish drifts beside them, its tentacles in the
   words' color. "big" is a wait that has a card or a page to itself. */
.wait{display:inline-flex;align-items:center;gap:.5em;max-width:100%;vertical-align:middle;--wait-glow:var(--violet)}
.wait-t{min-width:0;background:linear-gradient(90deg,currentColor 0 38%,var(--wait-glow) 50%,currentColor 62% 100%) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wait-shine 2.6s cubic-bezier(.45,.05,.55,.95) infinite}
[dir=rtl] .wait-t{animation-name:wait-shine-rtl}
@keyframes wait-shine{0%{background-position:100% 0}75%,100%{background-position:0 0}}
@keyframes wait-shine-rtl{0%{background-position:0 0}75%,100%{background-position:100% 0}}
.wait.calm .wait-t{animation:none;background:none;-webkit-text-fill-color:currentColor}
.wait ploa-jelly{width:1.3em;height:1.65em;margin-block:-.3em;--jelly-ink:currentColor}
.wait.big{gap:14px;font-size:15px;color:var(--ink-2)}
.wait.big ploa-jelly{width:40px;height:51px;margin:0}
/* On a dark ground the light is lilac, so it still shows against light words. */
.wait.on-dark,.seg.dark .wait,.term .wait,.console .wait{--wait-glow:#b6a4ff}
@media (prefers-reduced-motion:reduce){
  .wait-t{animation:none;background:none;-webkit-text-fill-color:currentColor}
  .wait ploa-jelly{animation:jelly-breathe 2.4s ease-in-out infinite}
}
@media (forced-colors:active){.wait-t{animation:none;background:none;-webkit-text-fill-color:currentColor}}
.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-team{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.tf-group-builds{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.tf-team-find{height:34px}
.tf-team-list{max-height:280px;overflow:auto}
.tf-team-list .item{padding-inline:0}
.tf-team-list .item.off b{color:var(--ink-3)}
.pt-others{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pt-others .as-chip{gap:5px}
.pt-others .as-chip .i{width:13px;height:13px}
.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}
/* 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(--raised);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-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}
.docs-link{display:inline-flex;align-items:center;gap:5px;margin-inline-start:4px;padding:1px 9px;border-radius:var(--r-pill);background:var(--violet-soft);color:var(--violet-ink);font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap;vertical-align:1px}
.docs-link:hover{background:var(--lilac);color:var(--ink)}
.docs-link .i{width:13px;height: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(--deep);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}
/* The two ways an agent works, side by side (stacked on a phone). */
.fr-acc{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:8px}
.fr-acc>div{padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r-ctl)}
.fr-acc b{font-size:13.5px}
.acc-ask h2{margin:0 0 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}
.crumbs:has(+.ev-wrap),.crumbs:has(+.note){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:var(--on-ink);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:var(--on-ink);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-wrap:anywhere}
.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,.rt-steps li.attn{background:var(--amber)}
.rt-steps li.failed{background:var(--rose)}
.run-tile.canceled .rt-steps li.failed{background:var(--ink-3)}
@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:7px;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}
/* A reversed column opens the terminal scrolled to its last line and keeps it there as lines come */
.term-body{padding:12px 14px 14px;max-height:340px;overflow:auto;display:flex;flex-direction:column-reverse;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3a3848 transparent}
.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}
.term.canceled .t-line.failed .t-end,.t-stop{color:#b9b4cc}
.t-line.waiting .t-end,.t-line.waiting .t-sym,.t-line.attn .t-end,.t-line.attn .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(var(--dlg-m),calc(100% - var(--dlg-edge)));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:var(--backdrop)}
.run-dlg[open]{display:flex;flex-direction:column}
/* The browser keeps a modal dialog 2em + 6px from the edges; Ploa's windows keep --dlg-edge instead. */
:is(.run-dlg,.danger-dialog,.st-dialog,.find){max-width:none}
.run-dlg.dlg-s{width:min(var(--dlg-s),calc(100% - var(--dlg-edge)))}
.run-dlg.dlg-l{width:min(var(--dlg-l),calc(100% - var(--dlg-edge)))}
.run-dlg.dlg-xl{width:min(1040px,calc(100% - var(--dlg-edge)));max-height:calc(100vh - 32px)}
.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-facts .rd-where{grid-column:1/-1}
.rd-body .term{flex:1 1 auto;min-height:220px;display:flex;flex-direction:column}
.rd-body .term-bar{flex:none}
.rd-body .term-body{max-height:none;flex:1 1 auto;min-height:0}
.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)}}
/* The build sheet (build-sheet.js) and its places: the Builds page's "On GitHub" tile as a third
   way, the overview's Build stage line, the sheet's fields. */
.bs-slot{display:contents}
@media (min-width:701px){.how-grid:has(> .bs-slot > .how){grid-template-columns:repeat(3,minmax(0,1fr))}}
.how .how-cmds .chip{font-size:12px}
.lf-gh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lf-gh .grow{flex:1;min-width:200px;color:var(--ink-2)}
.bs .bs-field{margin-top:0}
.bs .bs-label{font-size:13px;color:var(--ink-3)}
.bs .seg{align-self:flex-start}
.bs-states{display:flex;flex-direction:column;gap:8px}
.bs-states .note{margin:0}
.bs-minutes{font-size:13px;line-height:1.5}
.bs .cmd-line{margin-top:0}
/* Where it builds: a tile per way, with what it costs (free, or the person's minutes, plan or
   Apple hours) and whether it needs setting up first. */
.bs-ways{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bs-ways legend{font-size:13px;color:var(--ink-3);margin-bottom:8px;padding:0}
.bs-way{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .15s,background-color .15s;min-width:0}
.bs-way:hover{background:var(--hover)}
.bs-way input{position:absolute;opacity:0;pointer-events:none}
.bs-way:has(input:checked){background:var(--violet-soft);box-shadow:inset 0 0 0 1.5px var(--violet)}
.bs-way:has(input:focus-visible){outline:2px solid var(--violet);outline-offset:2px}
.bs-way[data-state=soon]{cursor:default;opacity:.62}
.bs-way[data-state=soon]:hover{background:var(--surface)}
.bs-way-ico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--sunken);color:var(--ink-2)}
.bs-way:has(input:checked) .bs-way-ico{background:var(--violet);color:#fff}
.bs-way-ico .i{width:19px;height:19px}
.bs-way-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.bs-way-body b{font-size:14.5px;font-weight:600}
.bs-way-body small{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.bs-way-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.bs-cost,.bs-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-pill);font-size:11.5px;font-weight:500;line-height:1.5;white-space:nowrap}
.bs-cost.free{background:var(--violet-soft);color:var(--violet-ink)}
.bs-cost.quota{background:var(--amber-soft);color:var(--amber)}
.bs-way:has(input:checked) .bs-cost.free{background:var(--surface)}
.bs-tag{background:var(--sunken);color:var(--ink-2)}
.bs-tag.warn{background:var(--amber-soft);color:var(--amber)}
.bs-body{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.bs-quota{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
@media (max-width:640px){.bs-ways{grid-template-columns:minmax(0,1fr)}}
/* The second step before a build starts, and the window that stops one: what it is, as label and
   value rows, then the one question. */
.bs-review,.stop-pop{display:flex;flex-direction:column;gap:14px}
.bs-rv-lead{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.bs-rv-lead b{color:var(--ink);font-weight:600}
.bs-rv-facts{margin:0;display:flex;flex-direction:column;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.bs-rv-fact{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:12px;padding:11px 14px;border-top:1px solid var(--line-soft)}
.bs-rv-fact:first-child{border-top:0}
.bs-rv-fact dt{font-size:13px;color:var(--ink-3)}
.bs-rv-fact dd{margin:0;font-size:14px;min-width:0;overflow-wrap:anywhere}
.bs-rv-way{display:inline-flex;align-items:center;gap:6px}
.bs-rv-way .i{width:16px;height:16px}
.bs-rv-fact .bs-cost{white-space:normal;max-width:100%}
.bs-review .acts-row,.stop-pop .acts-row{margin-top:2px}
.stop-pop .note{margin:0}
.stop-q{margin:0;font-size:15px;line-height:1.5}
.stop-sure .muted{margin:0;font-size:13.5px;line-height:1.5}
.rl-acts{gap:8px;margin-top:auto;flex-wrap:wrap}
.rl-acts .btn{margin-top:0}
.rd-stopped{margin:0}
@media (max-width:640px){.bs-rv-fact{grid-template-columns:minmax(0,1fr);gap:2px}}

/* 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:var(--r-tile);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;align-self:flex-start;max-width:100%;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:var(--on-ink);display:grid;place-items:center;font-size:13px;font-weight:600;text-transform:uppercase}
/* Its menu is a card of tiles, as big and round as the bar: who you are, then a tile per place. */
.isl-me-pop{top:calc(100% + 10px);bottom:auto;inset-inline-start:auto;inset-inline-end:-6px;width:340px;border-radius:26px;box-shadow:0 18px 48px rgba(60,40,140,.14),0 0 0 1px var(--line-soft)}
@media (max-width:860px){.isl-me{order:4}.isl-me-pop{position:fixed;top:70px;inset-inline:12px;width:auto}}
/* 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}
.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}
/* 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 */
/* Inline, not inline-flex: a flex box took its baseline from the icon, and its text rose above the line's. Isolated, so in Hebrew it stays one piece, icon and name. */
.src{display:inline;unicode-bidi:isolate;font-size:12.5px;font-weight:400;color:var(--ink-3);white-space:nowrap}
.src img{display:inline-block;width:11px;height:13px;vertical-align:-2px;margin-inline-end:4px}
.src .slogo{display:inline-block;width:12px;height:12px;margin:0;margin-inline-end:4px;color:currentColor;vertical-align:-1px}
.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:var(--r-tile);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}
/* Testers on the newest build: a strip under its row, and the window that chooses */
.tb-strip{display:flex;align-items:center;gap:12px;margin:2px 16px 14px;padding-block:12px;padding-inline:16px 12px;border-radius:14px;line-height:1.45;background:var(--violet-soft);color:var(--violet-ink);font-size:13px}
.tb-strip .grow{flex:1;min-width:0}
.tb-strip>.i{flex:none;width:16px;height:16px}
.tb-strip.quiet{background:var(--sunken);color:var(--ink-3);padding-inline-end:16px}
.tb-store{display:flex;flex-direction:column;gap:14px;padding-top:16px;border-top:1px solid var(--line-soft)}
.tb-lead{margin:0}
.tb-newest{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--sunken)}
.tb-newest .slogo{width:30px;height:30px;margin:0;flex:none}
.tb-newest .grow{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.tb-newest small{color:var(--ink-3);font-size:12.5px}
.tb-newest .vb{font-size:17px}
.tb-part{display:flex;flex-direction:column;gap:10px}
.tb-part .note{margin:2px 0 0}
.tb-part-h{display:flex;align-items:baseline;gap:8px}
.tb-part-h b{font-weight:600;font-size:14px}
.tb-n{color:var(--ink-3);font-size:12.5px;font-family:var(--mono)}
.tb-part-h button{margin-inline-start:auto;padding:2px 4px;border:0;background:none;color:var(--violet-ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.mem-perms{display:block;margin-top:2px;color:var(--ink-2)}
.mem-acts{display:flex;align-items:center;gap:8px;flex:none}
@media (max-width:520px){
  .item:has(> .mem-acts){flex-wrap:wrap}
  .item:has(> .mem-acts) > .grow{flex:1 1 calc(100% - 48px)}
  .mem-acts{width:100%;justify-content:flex-end}
}
.mem-pick{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.mem-pick-h{margin:0;font-size:14px}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tb-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:74px;padding:12px 14px;border-radius:var(--r-tile);background:var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .15s var(--ease),background-color .15s var(--ease)}
.tb-tile:hover{box-shadow:0 0 0 1px var(--line-strong)}
.tb-tile input{position:absolute;opacity:0;pointer-events:none}
.tb-tile:has(input:checked){background:var(--violet-soft);box-shadow:0 0 0 1.5px var(--violet)}
.tb-tile:has(input:focus-visible){box-shadow:0 0 0 1.5px var(--violet),0 0 0 4px var(--violet-soft)}
.tb-check{position:absolute;top:10px;inset-inline-end:10px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:transparent;transition:background-color .15s var(--ease)}
.tb-check .i{width:12px;height:12px;stroke-width:3}
.tb-tile:has(input:checked) .tb-check{background:var(--violet);box-shadow:none;color:#fff}
.tb-main{max-width:100%;padding-inline-end:24px;font-weight:500;font-size:14px;overflow-wrap:anywhere}
.tb-tile small{color:var(--ink-3);font-size:12px;line-height:1.4}
.tb-tile.fixed{cursor:default;background:transparent;box-shadow:none;outline:1px dashed var(--line-strong);outline-offset:-1px}
.tb-tile.fixed .tb-main{color:var(--ink-2);padding-inline-end:0}
.tb-foot{position:sticky;bottom:-18px;z-index:1;display:flex;align-items:center;gap:10px;margin:2px -18px -18px;padding:12px 18px;background:var(--surface);border-top:1px solid var(--line-soft)}
.tb-count{flex:1;min-width:0;color:var(--ink-2);font-size:13px}
.tb-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.tb-steps li{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:var(--sunken);font-size:13.5px}
.tb-steps li.warn{background:var(--amber-soft)}
.tb-steps .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tb-steps small{color:var(--ink-3);font-size:12px;overflow-wrap:anywhere}
.tb-steps .slogo{width:18px;height:18px;margin:1px 0 0;flex:none}
.tb-steps li>.i{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ok-ink)}
.tb-steps li.warn>.i{color:var(--amber)}
.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:var(--r-tile);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}
/* A product's editor in its window: the form fills it, its title row stays in view, ✕ closes */
.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 */
.ss-card>.store-col-h{background:none;border:0;border-radius:0}
.ss-card>.store-col-h{padding:0 4px}
/* 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:var(--on-ink);box-shadow:none}
.sp-step[aria-current="step"] .sp-step-ok{color:var(--on-ink)}
/* 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}
/* 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:var(--glass-faint)}

/* 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:var(--on-ink);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-door-hint{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;text-align:start}
.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:var(--elev-2),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}
/* The page itself (alone, or beside its group's menu) spaces its cards the same way. */
#page{display:flex;flex-direction:column;gap:16px;min-width:0}
.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-actions select.op-plan{width:auto;--fh:34px;padding-inline-end:28px}
.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:var(--backdrop)}
.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}
/* The panel's Telegram page: the dashboard's tile picker, a group under another, the save bar in view. */
.op-tg-form{display:flex;flex-direction:column;gap:18px;margin-top:10px}
.op-tg-part{display:flex;flex-direction:column;gap:8px}
.op-tg-part .op-meta{margin-top:0}
.op-tg-part .field{max-width:280px}
.op-tg-part .tb-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.op-tg-part .tb-tile{min-height:60px}
.op-tg-chat .op-kv>span{flex:none}
.op-tg-foot{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;gap:10px;margin:0 -22px -20px;padding:12px 22px;background:var(--surface);border-top:1px solid var(--line-soft);border-radius:0 0 var(--r-card) var(--r-card)}
.op-tg-link{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--sunken)}
.op-tg-link > p:first-child{margin:0 0 10px}
.op-steps{margin:10px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.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(--deep);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}
/* Support: the filters and search on one line, a request's facts, its messages (theirs at the start, ours at the end) and the answer box. */
/* Payments (admin-payments.js, admin-charts.js): the fetch from Paddle at the head's end; figures as tiles, the hero first;
   the chart, bar lists and meter; the purchases as a table, subscriptions as cards. Charts keep time left to right in Hebrew too. */
.op-pm-sync{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.op-pm-sync .op-meta{margin:0}
.op-pm-seg{flex-wrap:wrap;margin-bottom:4px}
.op-card .op-filters{margin:14px 0 0}
.op-filters + .op-title-line:not(:empty){margin-top:12px}
.op-filters input.op-pm-find{width:280px;max-width:100%}
.op-row small.op-error{color:var(--rose)}
.pm-glance{display:flex;flex-direction:column;gap:16px;container-type:inline-size}
.pm-cur{margin-bottom:-4px}
.pm-tiles{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px}
.pm-tile{display:flex;flex-direction:column;gap:4px;min-width:0;padding:18px 18px 16px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow),0 0 0 1px var(--line-soft)}
.pm-hero{background:linear-gradient(165deg,var(--surface) 35%,var(--violet-soft));box-shadow:var(--shadow),0 0 0 1px var(--violet-line)}
.pm-tile-label{font-size:13px;font-weight:500;color:var(--ink-2)}
.pm-tile-value{font-size:clamp(22px,3.4cqi,30px);font-weight:600;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
.pm-tile-value small{font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:0}
.pm-hero .pm-tile-value{font-size:clamp(30px,5cqi,48px);letter-spacing:-.03em}
.pm-tile-sub{font-size:12.5px;color:var(--ink-3)}
.pm-tile-chip{align-self:flex-start;max-width:100%;margin-top:6px;white-space:normal}
.pm-delta{display:inline-flex;align-items:baseline;gap:6px;align-self:flex-start;font-size:13px;font-weight:600}
.pm-delta small{font-weight:400;color:var(--ink-3)}
.pm-delta.up{color:var(--live-ink)}
.pm-delta.down{color:var(--rose)}
.ch-spark{margin-top:auto;padding-top:8px;height:48px}
.ch-spark svg{display:block}
.ch-wash{fill:var(--violet);opacity:.10}
.ch-trend{fill:none;stroke:#a9a6b8;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ch-dot{fill:var(--violet);stroke:var(--surface);stroke-width:2}
.pm-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pm-chart-head h2{font-size:17px;font-weight:600}
.pm-chart-tools{display:flex;align-items:center;gap:8px}
.pm-seg button{padding:5px 12px;font-size:13px}
.ch-cols{position:relative;margin-top:14px}
.ch-plot{width:100%}
.ch-svg{display:block;overflow:visible}
.ch-grid{stroke:var(--line-soft);stroke-width:1}
.ch-base{stroke:var(--line-strong);stroke-width:1}
.ch-y,.ch-x{fill:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}
.ch-cap{fill:var(--ink);font-size:12px;font-weight:600}
.ch-up{fill:var(--violet)}
.ch-down{fill:var(--rose)}
.ch-hover{fill:var(--hover);opacity:0;transition:opacity .12s}
.ch-hover.on{opacity:1}
.ch-hit{fill:transparent;outline:none;cursor:default}
.ch-hit:focus-visible{stroke:var(--violet);stroke-width:2}
.ch-tip{position:absolute;z-index:3;min-width:150px;padding:9px 12px;border-radius:12px;background:var(--deep);color:#fff;font-size:13px;box-shadow:0 10px 28px rgba(23,24,27,.22);pointer-events:none}
.ch-tip small{display:block;margin-bottom:4px;color:#c9c6d8;font-size:12px}
.ch-tip-row{display:flex;align-items:center;gap:7px;line-height:1.6}
.ch-tip-row b{font-weight:600}
.ch-tip-row span{color:#c9c6d8}
.ch-key{display:inline-block;flex:none;width:12px;height:2px;border-radius:2px;background:var(--ink-3)}
.ch-key.box{width:10px;height:10px;border-radius:3px}
.ch-key.ok{background:var(--violet)}
.ch-key.fail{background:var(--rose)}
.ch-key.trial{background:var(--live)}
.ch-key.wait{background:var(--amber)}
.ch-tip .ch-key:not(.ok):not(.fail){background:#fff}
.ch-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.ch-legend span{display:inline-flex;align-items:center;gap:6px}
.ch-legend b{font-weight:600;color:var(--ink)}
.ch-legend .ch-key:not(.box){width:8px;height:8px;border-radius:50%}
.ch-table{width:100%;margin-top:4px;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.ch-table th{padding:8px 6px;text-align:start;font-size:12.5px;font-weight:500;color:var(--ink-3);border-bottom:1px solid var(--line-soft)}
.ch-table td{padding:7px 6px;border-bottom:1px solid var(--line-soft)}
.ch-table td + td,.ch-table th + th{text-align:end}
.pm-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* The operator panel's Costs (admin-costs.js) */
.co-problems ul{margin:6px 0;padding-inline-start:18px}
.co-problems li{overflow-wrap:anywhere}
.co-steps{margin:12px 0 4px;padding-inline-start:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-2)}
.co-tiles-3{grid-template-columns:repeat(3,1fr)}
.co-server-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:12px}
.co-server .op-meta .mono{white-space:nowrap}
.co-total{font-weight:600}
.co-total b{font-weight:700}
.co-gauges{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.co-gauge{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 14px;border-radius:14px;background:var(--canvas,var(--hover))}
.co-gauge-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-2)}
.co-gauge-top b{font-size:22px;font-weight:600;color:var(--ink)}
.co-gauge .ch-spark{padding-top:4px}
.co-traffic-head{margin-top:18px}
.co-traffic-head h3{margin-top:0}
.co-bucket{align-items:center}
.co-bucket-spark{width:120px;flex:none}
.co-bucket-spark .ch-spark{height:32px;padding-top:0}
@media (max-width:760px){.co-server-grid,.co-gauges{grid-template-columns:1fr}.co-tiles-3{grid-template-columns:1fr}.co-bucket-spark{display:none}}
.ch-bars{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.ch-bar-top{display:flex;align-items:baseline;gap:8px;font-size:14px}
.ch-bar-label{display:inline-flex;align-items:center;gap:8px;min-width:0;flex:1;overflow-wrap:anywhere}
.ch-bar-label a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:500}
.ch-bar-label a:hover{color:var(--violet-ink)}
.ch-bar-top small{color:var(--ink-3);font-size:12px}
.ch-bar-top b{font-weight:600;font-variant-numeric:tabular-nums}
.ch-track{height:6px;margin-top:7px;border-radius:3px;background:var(--sunken);overflow:hidden}
.ch-fill{height:100%;border-radius:3px;background:var(--violet)}
.ch-meter{display:flex;gap:2px;height:8px;margin-top:12px;border-radius:4px;overflow:hidden;background:var(--surface)}
.ch-seg{min-width:4px;background:var(--sunken)}
.ch-seg.ok{background:var(--violet)}
.ch-seg.trial{background:var(--live)}
.ch-seg.wait{background:var(--amber)}
.ch-seg.empty{flex:1}
.pm-method{margin:-4px 4px 0;font-size:12.5px;color:var(--ink-3);max-width:90ch}
.pm-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--violet-soft);color:var(--violet-ink);font-size:12.5px;font-weight:600}
.pm-table{margin-top:14px;container-type:inline-size}
.pm-tr{display:grid;grid-template-columns:minmax(96px,1fr) minmax(130px,1.5fr) minmax(96px,1fr) minmax(84px,.8fr) minmax(120px,1.3fr) auto;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-soft);font-size:14px}
.pm-th{border-top:0;padding:4px 0 8px;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.pm-th span:nth-child(4){text-align:end}
.pm-when{color:var(--ink-2);font-size:13px}
.pm-who{display:flex;align-items:center;gap:8px;min-width:0}
.pm-who a{color:var(--ink);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.pm-who a:hover{color:var(--violet-ink)}
.pm-what{display:flex;flex-direction:column}
.pm-what small{font-size:12px;color:var(--ink-3)}
.pm-amount{display:flex;flex-direction:column;align-items:flex-end;font-weight:600;font-variant-numeric:tabular-nums}
.pm-amount small{font-size:12px;font-weight:500;color:var(--rose)}
.pm-state{display:flex;flex-wrap:wrap;gap:6px}
.pm-act{display:flex;justify-content:flex-end}
.pm-form{grid-column:1/-1}
.pm-form .op-actions{margin-top:0}
.pm-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:14px}
.pm-sub{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:16px;box-shadow:0 0 0 1px var(--line-soft);background:var(--surface)}
.pm-sub > .chip{align-self:flex-start;margin-top:6px}
.pm-sub-top{display:flex;align-items:center;gap:8px;min-width:0}
.pm-sub-top a{flex:1;min-width:0;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.pm-sub-top a:hover{color:var(--violet-ink)}
.pm-sub-price{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.pm-more{margin-top:12px}
.pm-sub small{font-size:12.5px;color:var(--ink-3)}
@media (max-width:900px){
  .pm-pair{grid-template-columns:1fr}
}
/* By the room the panel's column has, not the window's: beside the panel's sidebar a 1024px window
   leaves too little for four tiles or the purchases' six columns. */
@container (max-width:1000px){
  .pm-tiles{grid-template-columns:1fr 1fr}
}
@container (max-width:680px){
  .pm-th{display:none}
  .pm-tr{grid-template-columns:1fr auto;grid-template-areas:"who amount" "what state" "when act";gap:6px 12px}
  .pm-who{grid-area:who}.pm-amount{grid-area:amount}.pm-what{grid-area:what}.pm-state{grid-area:state;justify-content:flex-end}.pm-when{grid-area:when}.pm-act{grid-area:act}
  .pm-form{grid-column:1/-1}
}
@container (max-width:520px){
  .pm-tiles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ch-hover{transition:none}}
.op-refund{flex-wrap:wrap;align-items:center}
.op-refund select,.op-refund .op-amount{width:auto;min-width:120px;--fh:36px}
.op-check{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
.op-sp-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.op-sp-bar .op-search{flex:1;min-width:200px;margin:0}
.op-facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0;font-size:14px}
.op-facts dt{color:var(--ink-3)}
.op-facts dd{margin:0;overflow-wrap:anywhere}
.op-thread{display:grid;gap:12px}
.op-msg{max-width:min(720px,92%);padding:14px 18px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow)}
.op-msg.us{justify-self:end;background:var(--violet-soft)}
.op-msg header{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13.5px}
.op-msg header small{color:var(--ink-3)}
.op-msg p{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;line-height:1.55}
.op-sp-reply label{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.op-sp-reply label small{color:var(--ink-3);font-size:13px}
.op-sp-reply textarea{height:auto;min-height:150px;padding:12px 14px;line-height:1.5;resize:vertical}
.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%;flex-wrap:wrap;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%}
  .op-head-row{flex-wrap:wrap}
  .op-pm-sync{align-items:flex-start}
}

/* 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}
/* The app's GitHub card: the build files as small tags, each with its ×; the windows it opens. */
.gh-files{display:flex;flex-wrap:wrap;gap:6px}
.gh-file{display:inline-flex;align-items:center;gap:2px;height:26px;padding-inline:10px 3px;border-radius:var(--r-pill);background:var(--sunken);font-size:12.5px}
.gh-file-x{display:grid;place-items:center;width:20px;height:20px;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer}
.gh-file-x:hover{background:var(--hover);color:var(--rose)}
.gh-file-x .i{width:12px;height:12px}
.gh-pop{display:flex;flex-direction:column;gap:14px}
/* Found apps (the sheet back from GitHub): a tick, the folder and what it links to. */
.gh-found-sheet .gh-found{padding:0}
.gh-app input[type=checkbox]{flex:none;width:18px;height:18px;margin:0;accent-color:var(--violet)}
.gh-app select{--fh:34px;width:auto;max-width:220px;font-size:13.5px}
/* What each app is: its kind, its platforms and the stores it can go to; linked up front, on top. */
.gh-app .grow small.gh-what{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.gh-what .gh-kind{font-weight:500;color:var(--ink-2)}
.gh-what .gh-stores{display:inline-flex;gap:6px}
.gh-what .slogo{width:15px;height:15px}
.gh-app.auto{box-shadow:inset 0 0 0 1px var(--line)}
.gh-app .grow small.gh-refused{color:var(--rose)}
.gh-bare summary{cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.gh-bare p{margin-top:6px;font-size:13px;overflow-wrap:anywhere}
/* The workspace's defaults for new links, and the app card's folded automations. */
.gh-defs{display:flex;flex-direction:column;gap:14px}
.gh-def .grow{flex:1;min-width:0}
.gh-def b{font-weight:500}
.gh-def .gh-files{margin-top:8px}
.gh-src:disabled{cursor:default}
.gh-asws{margin-inline-start:6px;font-size:12px;color:var(--ink-3)}
.gh-more{border-top:1px solid var(--line-soft)}
.gh-more>summary{display:flex;align-items:center;gap:8px;min-height:46px;cursor:pointer;list-style:none;font-size:13px;color:var(--ink-2)}
.gh-more>summary::-webkit-details-marker{display:none}
.gh-more>summary::after{content:"";width:7px;height:7px;border-inline-end:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);margin-inline-start:4px;transition:transform .15s}
.gh-more[open]>summary::after{transform:rotate(225deg)}
.gh-more>summary .grow{flex:1}
.gh-more>.as2-rows>.as2-row:first-child{border-top:1px solid var(--line-soft)}
.prov-mark.gh{background:var(--violet-soft);color:var(--violet-ink)}
.prov-mark.gh .i{width:22px;height:22px}
.cx-gh{margin-top:16px}
.gh-push{flex-basis:100%;font-size:12.5px}
.gh-file-paths{display:flex;flex-direction:column;gap:10px}
.gh-file-paths:empty{display:none}
.gh-need{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.gh-need b{font-weight:500}
.gh-scan{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.gh-scan small{color:var(--ink-3);font-size:12.5px}
.gh-scanned{margin:12px 0 0;font-size:13px;overflow-wrap:anywhere}
[data-gh-scanned]:not(:empty)+.gh-file-paths{margin-top:6px}
.gh-file-row input[type=checkbox]{flex:none;width:18px;height:18px;margin:0;accent-color:var(--violet)}
.gh-file-row .dt-check{margin-bottom:6px}
.gh-file-row.off>input,.gh-file-row.off small{opacity:.55}
.oauth-card{max-width:560px;display:flex;flex-direction:column;gap:12px}
.oauth-who{font-size:16px}
.oauth-tiers{border:0;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:8px}
.oauth-tiers legend{font-size:13px;color:var(--ink-3);margin-bottom:6px}
.oauth-tiers label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.oauth-tiers:disabled label{cursor:default;opacity:.7}
.oauth-tiers label:has(input:checked){border-color:var(--violet);background:var(--violet-soft)}
.oauth-tiers label span{display:flex;flex-direction:column;gap:2px}
.oauth-tiers small{font-size:12.5px;color:var(--ink-3)}
.oauth-note{font-size:13px}
.oauth-acts{display:flex;gap:8px;flex-wrap:wrap}
.gh-src{display:inline-flex;align-items:center;gap:5px;height:26px;padding-inline:10px;border:1px solid var(--line);border-radius:var(--r-pill);background:none;color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer}
.gh-src::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line)}
.gh-src.on{border-color:transparent;background:var(--sunken);color:var(--ink)}
.gh-src.on::before{background:var(--ok)}
.gh-src:hover{background:var(--hover)}
.chg-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.chg-h h2{font-size:17px}
.chg-h small{font-size:13px;color:var(--ink-3)}
.chg-sum{margin-top:4px;font-size:13.5px;color:var(--ink-2)}
.chg-note{margin-top:8px;font-size:13.5px}
.chg-list{margin-top:6px}
.chg-list .item{padding-inline:0;align-items:flex-start}
.chg-list .item .grow{min-width:0;overflow-wrap:anywhere}
.chg-n{flex:none;min-width:58px;padding-top:2px;font-size:12.5px;color:var(--ink-3)}
.chg-commits{margin-top:10px}
.chg-commits summary{cursor:pointer;font-size:13.5px;color:var(--ink-2);padding-block:4px}
.chg-more{display:inline-block;margin-top:8px;font-size:13px}
.gh-acts{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gh-steps{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5}
.gh-pop .as2-form .field:first-child{margin-top:0}
.gh-yaml{margin:0;max-height:360px;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}

/* Where a part of a store's setup stands in the store: which store, whether Ploa updates it there or
   it's entered by hand, its state and the one thing to do. Its tone is the left (start) edge. */
.sync-bar{padding:14px 18px;margin-bottom:14px;border-inline-start:4px solid var(--line);display:flex;flex-direction:column;gap:10px}
.sync-bar.ok{border-inline-start-color:var(--ok)}
.sync-bar.warn{border-inline-start-color:var(--amber)}
.sync-bar.todo{border-inline-start-color:var(--ink-3)}
.sync-top{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.sync-store{display:inline-flex;align-items:center;gap:8px;font-size:14.5px}
.sync-store .slogo{width:16px;height:16px;margin:0}
.sync-state{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.sync-state>.grow{min-width:min(100%,260px)}
.sync-state b{display:block;font-size:14px}
.sync-state small{display:block;color:var(--ink-2);font-size:13px;margin-top:2px;max-width:70ch}
.sync-dot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--ink-3)}
.sync-bar.ok .sync-dot{background:var(--ok)}
.sync-bar.warn .sync-dot{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.sync-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sync-line{display:block;margin-top:6px;color:var(--ink-3);font-size:12.5px}
.sync-line .linkish{padding:0;border:0;background:none;color:var(--violet-ink);font:inherit;text-decoration:underline;cursor:pointer}
.sync-qhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 8px}
.sync-qhead h3{font-size:15px}
.sync-pop{display:flex;flex-direction:column;gap:14px}
.sync-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sync-steps li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.sync-steps li p{margin:0}
.sync-sum h4{font-size:13.5px;margin-bottom:6px}
.sync-pop-acts{justify-content:flex-start;gap:8px}
/* Privacy answers: what's answered, on the page; written step by step in a window. */
.wz-sum-h{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px}
.wz-sum-h h3{font-size:15px}
.wz-sec{margin-top:8px;font-size:13px}
.wz{display:flex;flex-direction:column;gap:12px}
.wz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink-3);font-size:12.5px}
.wz-dots{display:flex;gap:6px}
.wz-dots span{width:22px;height:4px;border-radius:2px;background:var(--line)}
.wz-dots span.done{background:var(--ok-soft)}
.wz-dots span.on{background:var(--violet)}
.wz h3{font-size:18px}
.wz-help{margin-top:-6px;font-size:13.5px}
.wz-q{display:flex;flex-direction:column;gap:4px;margin:0}
.wz-q small{color:var(--ink-2);font-size:13px}
.wz-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.wz-choice button{min-height:56px;padding:10px 14px;border-radius:var(--r-ctl);border:1.5px solid var(--line);background:var(--surface);font:inherit;font-weight:500;color:var(--ink);cursor:pointer;text-align:center}
.wz-choice button.on{border-color:var(--violet);background:var(--violet-soft);color:var(--violet-ink)}
.wz-choice.small button{min-height:38px}
.wz-type{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line-soft)}
.wz-type:first-child{border-top:0;padding-top:0}
.wz-type .as-chips{margin:0}
.wz-nav{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line-soft);position:sticky;bottom:0;background:var(--surface)}
.wz-nav .grow{text-align:center}
.send-fix{margin-top:6px}
.send-raw{margin-top:4px}
.send-raw summary{cursor:pointer;color:#cbc8d8;font-size:12px}
.send-bar .btn.xs{min-height:26px}
/* The store columns (Release and the pages like it), the country bar above them and every note:
   no text, however long (a store's answer, a URL, a name, a label), widens a column or the page.
   It wraps, a long word anywhere; labels that keep to one line elsewhere wrap here when they
   wouldn't fit. */
.store-tiles,.country-bar,.note,.msg{overflow-wrap:anywhere}
.country-bar > *{min-width:0}
.store-tiles :is(.btn,.chip,.src,.pl,.vb,.fresh,.who span,.live-step span,.sum-box span,.peek li .grow,.peek li small,.t-end,.tf-state,.notes summary){white-space:normal;max-width:100%}

/* Help (help.js): the requests beside the new-request form, then one request's messages, theirs (the person's) at the end, ours at the start. */
.hp-form h2{font-size:17px;font-weight:600}
.hp-form textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.5;resize:vertical}
.hp-more{margin-top:16px;font-size:13.5px}
.hp-thread{display:grid;gap:12px}
.hp-msg{max-width:min(720px,92%);padding:14px 18px;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow)}
.hp-msg.you{justify-self:end;background:var(--violet-soft)}
.hp-msg header{display:flex;gap:10px;align-items:baseline;font-size:13.5px}
.hp-msg header small{color:var(--ink-3)}
.hp-msg p{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
/* What to do about a failed request, under its row, in line with the row's text (20px pad + 20px mark + 14px gap). */
.sub-cause{margin:-4px 20px 14px;margin-inline-start:54px;padding:12px 14px;border-radius:12px;background:var(--sunken);font-size:13.5px;line-height:1.5;color:var(--ink-2);display:flex;flex-direction:column;gap:8px;max-width:64ch}
.sub-cause p{margin:0;color:var(--ink)}
.sub-cause ol{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.sub-cause-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
@media (max-width:640px){.sub-cause{margin-inline:16px}}
/* App Review on Release: what Apple's state means under the version, the phased release's day, and the next steps. */
.ar-says{display:block;max-width:60ch;font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:3px}
.ar-phase{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.ar-phase small{margin-top:8px;color:var(--ink-2)}
/* Builds on their way to testing, over the Testing page's store columns. */
.t-on-the-way{margin:0 0 16px}
/* The current build's block on the App Review and Google Play review cards: a framed white block,
   with its state's color (the chip's) only on the track of where the version is on its way.
   A block, whatever its tone: the tone "wait" is also the waiting line's class (.wait, inline-flex). */
.ar-now{display:flex;flex-direction:column;margin:10px -12px 0;padding:2px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);--st:var(--ink-3)}
.ar-now.processing,.ar-now.review{--st:var(--sky)}
.ar-now.ok{--st:var(--ok)}
.ar-now.prod{--st:var(--live)}
.ar-now.wait{--st:var(--amber)}
.ar-now.fail{--st:var(--rose)}
.ar-now .item,.ar-now .ship-row{background:transparent}
.ar-now a.item.linked:hover .grow>b .ltr{color:var(--violet-ink)}
/* Sent, in review, approved (or rejected), live: the stops before the current one filled, the current
   one ringed, all in the state's color; the line between two stops is the later one's. */
.ar-track{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:2px 0 12px;padding:0}
.ar-track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.ar-track li::before{content:"";position:absolute;top:6px;inset-inline-start:calc(-50% + 9px);inset-inline-end:calc(50% + 9px);height:2px;border-radius:2px;background:var(--line)}
.ar-track li:first-child::before{display:none}
.ar-track li:is(.done,.now)::before{background:var(--st)}
.ar-dot{box-sizing:border-box;width:10px;height:10px;margin-top:2px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink-3) 55%,transparent);background:var(--surface)}
.ar-track .done .ar-dot{background:var(--st);border-color:var(--st)}
.ar-track .now .ar-dot{width:14px;height:14px;margin-top:0;background:var(--st);border-color:var(--st);box-shadow:0 0 0 4px color-mix(in srgb,var(--st) 18%,transparent)}
.ar-track small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--ink-3)}
.ar-track .now small{color:var(--st);font-weight:500}
/* How it's released and the next steps, one line under a hairline at the block's foot. */
.ar-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:auto;padding:10px 0 12px;border-top:1px solid var(--line-soft);box-sizing:border-box}
.ar-now .ar-bottom .ar-rel{height:auto;margin:0;padding:0;gap:6px;min-width:0;overflow:visible}
.ar-now .ar-bottom .ar-acts{height:auto;padding:0;margin-inline-start:auto;justify-content:flex-end;overflow:visible}
.ar-now .ar-bottom .ar-acts:empty{display:none}
.ar-rel-pick{position:relative;display:inline-flex;align-items:center;min-width:0}
.ar-rel-pick select{appearance:none;-webkit-appearance:none;height:30px;min-height:0;line-height:20px;box-shadow:none;width:auto;min-width:0;max-width:100%;border:0;border-radius:8px;padding-block:5px;padding-inline:10px 28px;background:var(--sunken);color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer;text-overflow:ellipsis}
.ar-rel-pick select:hover{background:var(--hover)}
.ar-rel-pick .i{position:absolute;inset-inline-end:8px;width:14px;height:14px;color:var(--ink-3);pointer-events:none}
/* The usual review time, its own line; and how the version goes out once approved, the same row on both cards. */
.ar-time{display:block;margin-top:4px;color:var(--ink-3);font-size:12.5px}
.ar-rel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding-inline-start:34px;font-size:13.5px}
.ar-rel-l{color:var(--ink-3)}
.ar-rel b{font-weight:500}
.ar-rel small{color:var(--ink-3);font-size:12.5px}
.ar-rel .ar-rel-note{flex-basis:100%}
/* Google Play's release switch can't change from Ploa: shown as it is, not pressable. */
.ar-rel-seg.locked button{cursor:default}
.ar-rel-seg.locked button:not([aria-pressed=true]){opacity:.7}
.ar-rel-seg{padding:3px}
.ar-rel-seg button{padding:5px 12px;font-size:13px}
.ar-rel-seg{background:var(--sunken)}
.ar-rel-seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.ar-rel-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500}
.ar-rel-link .i{width:14px;height:14px}
@media (max-width:640px){.ar-rel{padding-inline-start:0}}
/* Every step's button the same: the main one solid, the rest quiet in ink, each with its icon. */
.ar-acts .btn.quiet{color:var(--ink)}
/* In line with the row's text: the state mark (20px) and its gap (14px). */
.ar-acts{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 16px;padding-inline-start:34px}
.ar-wait{margin:0;padding:0 0 16px;padding-inline-start:34px;font-size:13.5px;color:var(--ink-3)}
.sub-cause ul{margin:0;padding-inline-start:18px}
.ar-confirm-acts{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:4px}
@media (max-width:640px){.ar-acts,.ar-wait{padding-inline-start:0}}
/* A row and what belongs to that build under it (shipGroup), as one item of the list. */
.ship-group{border-top:1px solid var(--line-soft)}
.ship-group:first-child{border-top:0}
.ship-group>.item{border-top:0}
/* A store's rejection inside its build: what it did, the guidelines it named, the window's button. */
.rj-strip{background:var(--rose-soft);color:var(--ink)}
.rj-strip p b{font-weight:600;color:var(--rose)}
.rj-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rj-tags li{padding:3px 10px;border-radius:var(--r-pill);background:var(--surface);font-size:12.5px;color:var(--ink-2)}
.rj-tags bdi{font-weight:600;color:var(--ink);margin-inline-end:4px}
/* Its window: what it means, the guideline, the store's message as written (left to right). */
.rj-about{margin:0 0 18px;line-height:1.6;color:var(--ink-2)}
.rj-sec{margin-top:18px}
.rj-sec h3{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink)}
.rj-guide{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--sunken);margin-bottom:8px}
.rj-guide p{margin:4px 0 6px;line-height:1.55;color:var(--ink-2)}
.rj-guide a{font-size:13px}
.rj-num{flex:none;min-width:40px;padding:3px 8px;border-radius:8px;background:var(--rose-soft);color:var(--rose);font-weight:600;font-size:13px;text-align:center}
.rj-note{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.rj-note-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.rj-seg button{padding:4px 12px;font-size:13px}
.rj-msg{margin:10px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:14px}
.rj-msg[dir=ltr]{text-align:left}
.rj-msg[dir=rtl]{text-align:right}
.rj-hint{display:block;margin-top:8px}
.rj-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

/* Store connections (connect.js): a card per store, its accounts, and the steps to connect it. */
.cx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start}
.cx-card{padding:22px;display:flex;flex-direction:column;gap:16px}
.cx-card.on{box-shadow:var(--shadow),0 0 0 1px var(--line-soft),inset 0 3px 0 var(--violet)}
.cx-head{display:flex;gap:12px;align-items:flex-start}
.cx-head h2{font-size:18px}
.cx-head h3{font-size:16px}
.cx-head p{font-size:13.5px;color:var(--ink-3);margin-top:2px}
.cx-account{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-soft)}
.cx-acc-top{display:flex;gap:10px;align-items:flex-start}
.cx-acc-top small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
.cx-line{font-size:13px}
.cx-problem{font-size:13.5px;color:var(--rose);background:var(--rose-soft);padding:10px 12px;border-radius:10px;overflow-wrap:anywhere}
.cx-acts{display:flex;gap:8px;flex-wrap:wrap}
.cx-cert{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft)}
.cx-cert b{display:block;font-size:14px}
.cx-cert small{display:block;font-size:12.5px;color:var(--ink-3)}
.cx-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:cx}
.cx-step{display:flex;gap:12px;align-items:flex-start}
.cx-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink);font-weight:600;font-size:13px;margin-top:1px}
.cx-step.done .cx-n{background:var(--violet);color:#fff}
.cx-n .i{width:15px;height:15px;stroke-width:2.2}
.cx-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cx-body>b{font-size:14.5px}
.cx-body>p{font-size:13.5px}
.cx-body .field{width:100%;margin-top:6px}
.cx-out{font-size:12px;opacity:.7}
.cx-copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%}
.cx-copy code{flex:1;min-width:0;padding:8px 12px;border-radius:10px;background:var(--sunken);overflow-wrap:anywhere;font-size:13px}
.cx-submit{display:flex;justify-content:flex-end}
.cx-error{font-size:13.5px;color:var(--rose);background:var(--rose-soft);padding:10px 12px;border-radius:10px;overflow-wrap:anywhere}
.cx-alt{font-size:13.5px}
.cx-keyform{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--line-soft)}
.cx-more{font-size:13.5px}
.linkish{padding:0;border:0;background:none;color:var(--violet-ink);font:inherit;text-decoration:underline;cursor:pointer}
.cx-wait{display:flex;gap:8px;align-items:baseline}
.cx-pulse{flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber);animation:cx-pulse 1.6s ease-in-out infinite}
@keyframes cx-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.cx-pulse{animation:none}}
.cx-others{margin-top:16px;padding:16px 20px}
.cx-others summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cx-other-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px;margin-top:16px}
.cx-other{display:flex;flex-direction:column;gap:12px}
.cx-cert .grow{flex:1 1 220px;min-width:0}

/* An app's setup steps that only the person can do (app.js storeSteps): a card per store. */
.ss{padding:20px 22px;margin-top:16px}
.ss h2{font-size:17px}
.ss header p{font-size:13.5px;margin-top:2px}
.ss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;margin-top:14px}
.ss-card{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:16px;border-radius:var(--r-tile);background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-soft)}
.ss-card>p{font-size:13.5px}
.ss-copy{margin:4px 0;display:flex;flex-direction:column;gap:6px;width:100%}
.ss-copy>div{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center}
.ss-copy dt{font-size:13px;color:var(--ink-3)}
.ss-copy dd{margin:0;display:flex;gap:8px;align-items:center;min-width:0}
.ss-copy code{flex:1;min-width:0;padding:6px 10px;border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft);overflow-wrap:anywhere;font-size:13px}
.ss-acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ss-watch{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-3)}
@media (max-width:520px){.ss-copy>div{grid-template-columns:1fr}}

/* Settings: a tile per part on the first page; a part's page has the parts in a menu beside it
   (a row of pills above it on narrow screens). */
.set-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.set-tile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:18px 20px 16px;color:inherit;text-decoration:none;transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.set-tile:hover{box-shadow:var(--shadow),0 0 0 1px var(--ink-3)}
.set-tile:active{transform:scale(.99)}
.set-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.set-tile .tile-ico{background:var(--violet-soft);color:var(--violet-ink)}
.set-tile-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.set-tile-txt b{font-size:16px;font-weight:600}
.set-tile-txt small{font-size:13px;color:var(--ink-3);line-height:1.45}
.set-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:24px}
/* Security's tiles sit under the alerts strip; a screen behind one leads back to it from above its title. */
.sec-tiles{margin-top:14px}
.set-up{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;font-size:13px;font-weight:500;color:var(--ink-3);text-decoration:none}
.set-up:hover{color:var(--ink)}
.set-up .i{width:16px;height:16px}
.set-sum{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.set-go{width:16px;height:16px;color:var(--ink-3);transition:transform .15s var(--ease)}
.set-tile:hover .set-go{transform:translateX(2px)}
[dir="rtl"] .set-tile:hover .set-go{transform:translateX(-2px) scaleX(-1)}
.set-shell.on{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.set-shell:not(.on)>.set-nav{display:none}
.set-shell>#view{min-width:0}
/* The panel's workspace parts (admin-workspaces.js): the same menu at the start (right in Hebrew), the part beside it. */
.op-parts{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start}
.op-parts>.op-part{min-width:0}
.set-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:96px;margin-top:8px}
.set-nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;color:var(--ink-2);font-size:14px;text-decoration:none;white-space:nowrap;transition:background .15s}
.set-nav a:hover{background:var(--hover)}
.set-nav a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow),0 0 0 1px var(--line-soft)}
.set-nav .i{width:17px;height:17px;color:var(--ink-3);flex:none}
.set-nav a[aria-current="page"] .i{color:var(--violet)}
.set-nav a.set-back{color:var(--ink-3);font-size:13px;margin-bottom:6px}
.set-grp{padding:12px 12px 4px;font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.set-who{display:flex;align-items:center;gap:14px}
.set-who .av{width:44px;height:44px;border-radius:14px;background:var(--violet-soft);color:var(--violet-ink);display:grid;place-items:center;font-weight:600;font-size:18px;flex:none;text-transform:uppercase}
.set-who b{display:block;font-size:15px;overflow-wrap:anywhere}
.set-who small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.set-lang{width:240px;max-width:100%}
.set-lang.three{grid-template-columns:repeat(3,1fr);width:360px}
.set-hub-grp{margin-top:28px}
.set-hub-grp:first-of-type{margin-top:0}
@media (max-width:900px){
  .set-shell.on{grid-template-columns:minmax(0,1fr);gap:8px}
  .op-parts{grid-template-columns:minmax(0,1fr);gap:8px}
  .set-nav{position:static;flex-direction:row;gap:4px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-inline:-4px;padding-inline:4px;margin-top:0}
  .set-nav a.set-back{margin-bottom:0}
  .set-grp{display:none}
  .set-nav::-webkit-scrollbar{display:none}
}
@media (max-width:640px){.set-tiles{grid-template-columns:minmax(0,1fr);gap:10px}.set-tile{padding:16px}}
@media (prefers-reduced-motion:reduce){.set-tile,.set-go{transition:none}}

/* Store details (details.js): a rail of steps beside the step's card. */
.dt{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start;margin-top:8px}
@media (max-width:900px){.dt{grid-template-columns:1fr}}
.dt-rail{display:flex;flex-direction:column;gap:4px;position:sticky;top:96px}
@media (max-width:900px){.dt-rail{position:static;flex-direction:row;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}}
.dt-step{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;color:var(--ink-2);font-size:14px;text-align:start;white-space:nowrap;transition:background .15s}
.dt-step:hover{background:var(--hover)}
.dt-step.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow),0 0 0 1px var(--line-soft)}
.dt-step .i{width:17px;height:17px;color:var(--ink-3)}
.dt-step.on .i{color:var(--violet)}
.dt-n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;background:var(--sunken);color:var(--ink-2);flex:none}
.dt-step.on .dt-n{background:var(--violet);color:#fff}
.dt-st{flex:1}
.dt-bad{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--rose-soft);color:var(--rose);font-size:11.5px;font-weight:600;display:inline-grid;place-items:center}
.dt-main{padding:24px 26px;min-width:0}
@media (max-width:560px){.dt-main{padding:18px 16px}}
.dt-head{margin-bottom:18px}
.dt-eyebrow{font-size:12.5px;color:var(--violet-ink);font-weight:600;letter-spacing:.02em}
.dt-head h2{font-size:22px;margin-top:2px;letter-spacing:-.01em}
.dt-head p{margin-top:4px;font-size:14px;max-width:62ch}
.dt-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line-soft)}
.dt-saved{font-size:13px}
.dt-form{display:flex;flex-direction:column;gap:16px}
.dt-lead{font-size:14px}
.dt-sub{font-size:15px;margin-top:10px;display:flex;gap:8px;align-items:center}
.dt-sub.dt-big{font-size:18px;margin-top:28px}
.dt-sub.sm{font-size:13px;margin:10px 0 6px;color:var(--muted)}
.dt-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.dt-label{display:flex;align-items:center;gap:8px}
.dt-label label{font-size:14px;font-weight:600}
.dt-stores{display:inline-flex;gap:4px;align-items:center}
.dt-store{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:var(--sunken)}
.dt-store .slogo{width:12px;height:12px}
.dt-count{margin-inline-start:auto;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.dt-count.over{color:var(--rose);font-weight:600}
.dt-field small{font-size:12.5px}
.dt-split{display:flex;flex-direction:column;gap:6px;margin-bottom:-8px}
.dt-split .dt-label .btn{margin-inline-start:auto}
.dt-split small{font-size:12.5px}
.dt-split-on{align-self:flex-start;margin-top:-8px}
.dt-notes:empty{display:none}
.dt-note{font-size:13px;padding:7px 10px;border-radius:9px;margin-top:2px}
.dt-note.error{background:var(--rose-soft);color:var(--rose)}
.dt-note.warn{background:var(--amber-soft);color:var(--amber)}
.dt-langs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.dt-default{max-width:360px;margin-bottom:22px}
.dt-lang{display:inline-flex;gap:6px;align-items:center;height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:14px}
.dt-lang small{color:var(--ink-3);font-size:11.5px}
.dt-lang.on{background:var(--ink);color:var(--on-ink);box-shadow:none}
.dt-lang.on small{color:var(--on-ink-2)}
.dt-add select{height:34px;--fh:34px;border-radius:var(--r-pill);width:auto;padding-inline:14px 34px;font-size:14px}
.dt-phones{margin-inline-start:auto}
.dt-switch{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--sunken);margin-bottom:14px}
.dt-switch button{display:inline-flex;gap:8px;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);font-size:14px;color:var(--ink-2)}
.dt-switch button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.dt-switch .slogo{width:15px;height:15px}
.dt-yn,.dt-q{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.dt-yn>span:first-child,.dt-q>span:first-child{flex:1 1 260px;font-size:14px}
.dt .seg{gap:2px;padding:3px;flex-wrap:wrap}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:inline-block;padding:5px 13px;border-radius:var(--r-pill);font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.seg input:checked+span{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.seg input:focus-visible+span{box-shadow:0 0 0 3px var(--violet-soft)}
.dt-chips{display:flex;gap:6px;flex-wrap:wrap}
.dt-chip{position:relative;cursor:pointer}
.dt-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.dt-chip span{display:inline-block;padding:6px 13px;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:13.5px}
.dt-chip.sm span{padding:4px 10px;font-size:12.5px}
.dt-chip input:checked+span{background:var(--violet-soft);color:var(--violet-ink);box-shadow:0 0 0 1.5px var(--violet);font-weight:500}
.dt-chip input:focus-visible+span{box-shadow:0 0 0 3px var(--violet-soft)}
.dt-countries{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto;padding:4px}
.dt-check{display:inline-flex;gap:8px;align-items:center;cursor:pointer;font-size:14px}
.dt-check.sm{font-size:13px;color:var(--ink-2)}
.dt-check input{width:17px;height:17px;accent-color:var(--violet);flex:none}
/* Export compliance, under the App Review step: one answer per line, its hint beside it. */
.dt-enc{margin-top:28px}
.dt-enc-kinds{display:flex;flex-direction:column;gap:10px}
.dt-enc-kinds .dt-check{align-items:flex-start;line-height:1.45}
.dt-enc-kinds .dt-check input{margin-top:2px}
.dt-enc-file{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.dt-ptypes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px}
.dt-ptype{padding:10px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-soft);display:flex;flex-direction:column;gap:8px}
.dt-ptype.on{background:var(--violet-soft);box-shadow:inset 0 0 0 1px var(--violet)}
.dt-pmore{display:flex;flex-direction:column;gap:6px}
.dt-policy{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.dt-policy p{font-size:14px;overflow-wrap:anywhere}
.dt-host{width:100%;padding:12px 14px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-soft)}
.dt-host summary{cursor:pointer;font-weight:600;font-size:14px}
.dt-send-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.dt-verdict{padding:14px 16px;border-radius:14px}
.dt-verdict b{font-size:15px}
.dt-verdict p{font-size:13.5px;margin-top:2px}
.dt-verdict.good{background:var(--live-soft);color:var(--live-ink)}
.dt-verdict.bad{background:var(--rose-soft);color:var(--rose)}
.dt-issues{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.dt-missing{margin:4px 0 14px;padding:14px 16px;border-radius:14px;background:var(--rose-soft);display:grid;gap:10px}
.dt-missing-h{font-size:14px;color:var(--rose)}
.dt-missing ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dt-missing li{display:flex;gap:10px;align-items:flex-start}
.dt-missing li b{display:block;font-size:14px}
.dt-missing li small{display:block;color:var(--ink-2);font-size:13px}
.dt-missing .ask-agent{justify-self:start}
.dt-issue{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-soft);font-size:14px}
.dt-issue.error{box-shadow:inset 3px 0 0 var(--rose),inset 0 0 0 1px var(--line-soft)}
.dt-issue.warn{box-shadow:inset 3px 0 0 var(--amber),inset 0 0 0 1px var(--line-soft)}
.dt-issue.ok{box-shadow:inset 3px 0 0 var(--live),inset 0 0 0 1px var(--line-soft)}
[dir=rtl] .dt-issue.error{box-shadow:inset -3px 0 0 var(--rose),inset 0 0 0 1px var(--line-soft)}
[dir=rtl] .dt-issue.warn{box-shadow:inset -3px 0 0 var(--amber),inset 0 0 0 1px var(--line-soft)}
[dir=rtl] .dt-issue.ok{box-shadow:inset -3px 0 0 var(--live),inset 0 0 0 1px var(--line-soft)}
.dt-issue-ico .slogo{width:16px;height:16px}
.dt-auto{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-radius:14px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-soft);margin:12px 0}
.dt-auto b{display:inline-flex;gap:8px;align-items:center}
.dt-auto p{font-size:13.5px}
/* Who does a part. The person's (by hand in a store's console, or a task an agent asked of them):
   warm, a dashed edge, a hand. Ploa's (filled here, sent by Ploa): violet, a spark. */
.who-strip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 14px;padding:8px 12px;border-radius:12px;font-size:13px}
.who-strip .i{width:16px;height:16px;flex:none}
.who-strip b{font-weight:600}
.who-strip span{color:var(--ink-2)}
.who-strip.ploa{background:var(--violet-soft);color:var(--violet-ink)}
.who-strip.person{background:var(--amber-soft);color:var(--amber);border:1.5px dashed color-mix(in srgb,var(--amber) 55%,transparent)}
.dt-person{margin-top:22px;padding:16px;border-radius:16px;border:1.5px dashed color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber-soft) 45%,transparent)}
.dt-person .dt-sub.dt-big{margin-top:0}
.dt-person .dt-hand{background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 30%,transparent)}
.dt-who-bar{display:flex;justify-content:flex-end;margin:0 0 12px}
.dt-who-bar .seg button{display:inline-flex;align-items:center;gap:6px}
.dt-who-bar .seg .i{width:15px;height:15px}
/* The count sits centered: the font's line box set it low (2026-11-06), so the box is flex, the line 1 and a little room under it. */
/* The count of what's yours: a small soft pill, the same in light and dark (.seg span's own padding
   and colour made it a big brown blob with a grey number, 2026-11-06). */
.who-n,.seg .who-n{min-width:20px;height:20px;box-sizing:border-box;padding:0 6px;border-radius:10px;background:var(--amber-soft);color:var(--amber);font-size:12px;font-weight:600;line-height:20px;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;white-space:nowrap}
.dt[data-show=person] [data-who=ploa],.dt[data-show=ploa] [data-who=person]{display:none}
.dt-none{display:none;padding:18px;border-radius:14px;background:var(--canvas);text-align:center}
.dt-none p{margin:0 0 10px}
.dt[data-show=person] .dt-body:not(:has([data-who=person])) .dt-none,.dt[data-show=ploa] .dt-body:not(:has([data-who=ploa])) .dt-none{display:block}
.dt[data-show=person] .dt-step:not([data-step=privacy]){opacity:.5}
.dt-hand-dot{margin-inline-start:auto;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:var(--amber-soft);color:var(--amber)}
.dt-hand-dot .i{width:13px;height:13px}
.req.person-task{margin:8px 0;padding:14px;border:1.5px dashed color-mix(in srgb,var(--amber) 55%,transparent);border-radius:14px;background:var(--amber-soft)}
.req.person-task+.req,.req+.req.person-task{border-top:0}
.pt-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--amber);color:#fff;flex:none}
.pt-ico .i{width:19px;height:19px}
.pt-tag{color:var(--amber);font-weight:600}
.pt-pop{display:grid;gap:10px}
.pt-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pt-steps li{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-soft)}
.pt-text{margin:0;font-size:14px;line-height:1.5;white-space:pre-wrap;text-align:start}
.pt-body{display:grid;gap:6px;justify-items:start;min-width:0}
.pt-pop[dir=rtl] .pt-text,.pt-pop[dir=rtl] .pt-lead,.pt-pop[dir=rtl] .pt-after{text-align:right}
.pt-n{flex:none;width:22px;height:22px;font-size:12px!important;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--amber);color:#fff;font-size:13px;font-weight:700;line-height:1}
.pt-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line-soft)}
.pt-lead{display:flex;gap:8px;align-items:center;margin:0;padding:8px 12px;border-radius:12px;background:var(--amber-soft);color:var(--amber);font-size:13.5px}
.pt-lead .i{width:16px;height:16px;flex:none}
.pt-what{white-space:pre-wrap;font-size:14.5px;line-height:1.55}
.pt-after{margin:0;font-size:13px}
.dt-hands{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dt-hand{padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-soft);display:flex;flex-direction:column;gap:8px}
.dt-hand.done{background:var(--canvas);order:1;padding:10px 14px}
.dt-hand.done .dt-hand-body{display:none}
.dt-hand.done .dt-check b{font-weight:500;color:var(--ink-2)}
.dt-ds-done{margin:12px 0 0}
.dt-ds-done .dt-check{display:flex;gap:8px;align-items:center}
.dt-ds-done .dt-check>.i{width:16px;height:16px;color:var(--live)}
/* Nothing left by hand: a calm, finished section, not the person's amber task. */
.dt-person.all-done{border:1px solid var(--line-soft);background:var(--surface)}
.dt-person.all-done .dt-hand{box-shadow:inset 0 0 0 1px var(--line-soft)}
.dt-person.all-done .dt-big{display:flex;align-items:center;gap:8px}
.dt-done-ico{width:18px;height:18px;color:var(--live)}
.dt-hand-body{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding-inline-start:25px;font-size:13.5px}
.dt-hand-body code{padding:6px 10px;border-radius:8px;background:var(--sunken);overflow-wrap:anywhere}
.dt-hand-body ol{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.dt-answers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;width:100%}
.dt-answers li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--line-soft)}
.dt-answers li span{color:var(--ink-2)}
.dt-answers li b{font-weight:600;text-align:end}
.dt-console{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.dt-console label{font-weight:600;font-size:14px}
.dt-banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-radius:14px;background:var(--violet-soft);color:var(--violet-ink);margin-bottom:12px}
.dt-banner.wait{background:var(--sky-soft);color:var(--sky)}
.dt-banner p{font-size:14px;flex:1 1 280px}
.dt-banner input{width:110px;--fh:34px;height:34px}
.dt-op{align-items:flex-start;flex-wrap:nowrap;background:var(--hover);color:inherit}
.dt-op .grow{min-width:0}
.dt-op-f p{text-align:start}
.dt-op>.i{margin-top:2px;flex:none}
.dt-op-p{margin-top:8px;font-size:13.5px}
.dt-op-p summary{cursor:pointer}
.dt-op-l{margin:10px 0 0;padding-inline-start:12px;border-inline-start:2px solid var(--line)}
.dt-op-f small{display:block;color:var(--muted);margin-top:6px}
.dt-op-f p{white-space:pre-wrap;margin:2px 0 0;font-size:13.5px}
.cx-two{gap:10px;flex-wrap:wrap;align-items:center}
.cx-g svg.i{stroke:none;width:17px;height:17px;background:#fff;border-radius:50%;padding:1px}
.cx-console{padding:14px;border-radius:14px;background:var(--violet-soft);gap:8px}
.cx-console .field-row input{--fh:36px}
/* The way to connect, inside a store's card: its parts spaced; another account set apart. */
.cx-form{display:flex;flex-direction:column;gap:14px}
.cx-form>p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.cx-submit.cx-two{justify-content:flex-start;gap:12px;margin-top:2px}
.cx-alt{margin-top:2px}
.cx-add{display:flex;flex-direction:column;gap:14px;margin-top:6px;padding-top:20px;border-top:1px solid var(--line-soft)}
.cx-add>h3{font-size:15px;font-weight:600}
.cx-banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px}
.cx-banner .i{margin-top:2px;flex:none}
.cx-banner b{display:block;font-size:14.5px}
.cx-banner p{font-size:13.5px;margin-top:2px;overflow-wrap:anywhere}
.cx-banner.ok{background:var(--live-soft);color:var(--live-ink)}
.cx-banner.bad{background:var(--rose-soft);color:var(--rose)}
.cx-via{display:flex;gap:6px;align-items:center;color:var(--live-ink)}
.cx-via .i{width:15px;height:15px}
.cx-pending{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--amber-soft);color:var(--amber)}
.cx-pending b{display:block;font-size:14.5px}
.cx-pending p{font-size:13.5px;margin-top:2px;color:var(--ink-2)}
/* An account connected by signing in with Google (connect.js signedIn). */
.cx-signed{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.cx-who{display:flex;gap:12px;align-items:center}
.cx-gmark{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.cx-gmark .g-logo{width:22px;height:22px;stroke:none}
.cx-who b{display:block;font-size:14.5px}
.cx-email{display:block;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.cx-who small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.cx-tech{font-size:12.5px;color:var(--ink-3)}
.cx-tech summary{cursor:pointer}
.cx-tech-v{display:block;margin-top:4px;overflow-wrap:anywhere}
.g-logo{stroke:none}

/* GitHub's own button (its mark, black), for connecting an account. */
.gh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border-radius:var(--r-pill);background:#1f2328;color:#fff;font-weight:600;font-size:15px;transition:background .15s,transform .1s}
.gh-btn:hover{background:#000}
.gh-btn:active{transform:scale(.98)}
.gh-btn svg.i{width:20px;height:20px}
.gh2-title{display:flex;align-items:center;gap:12px}
.gh2-title svg.i{width:30px;height:30px}
.gh2-acct-mark{background:#1f2328!important;color:#fff!important}
.prov-mark.gh{background:#1f2328;color:#fff}

/* The app's GitHub card: the repo, then one tile per task, each with its agent ask under it. */
.gh2{padding:18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.gh2-h{display:flex;align-items:flex-start;gap:12px}
.gh2-h .grow{flex:1;min-width:0}
.gh2-h h2{font-size:16px;font-weight:600}
.gh2-h p{margin-top:3px;font-size:13px;color:var(--ink-2);line-height:1.45}
.gh2-mark{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#1f2328;color:#fff}
.gh2-mark svg.i{width:20px;height:20px}
.gh2-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--live-ink);white-space:nowrap;margin-top:4px}
.gh2-live i{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 50%,transparent);animation:gh2-pulse 2.4s var(--ease) infinite}
@keyframes gh2-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 45%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.gh2-live i{animation:none}}
.gh2-repo{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 12px 10px 14px;border-radius:14px;background:var(--canvas)}
.gh2-repo-link{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--ink);text-decoration:none;font-size:14px;overflow-wrap:anywhere}
.gh2-repo-link:hover{color:var(--violet-ink)}
.gh2-repo-link svg.i{width:16px;height:16px}
.gh2-repo-acts{display:flex;align-items:center;gap:6px}
.gh2-places{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.gh2-place{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:12.5px;text-decoration:none;overflow-wrap:anywhere}
.gh2-place:hover{border-color:var(--violet);color:var(--violet-ink)}
.gh2-place.fail{border-color:var(--rose);color:var(--rose)}
.gh-pf-row{display:grid;grid-template-columns:minmax(110px,150px) 1fr auto;gap:8px;align-items:center;margin-top:8px}
.gh-pf-row select,.gh-pf-row input{min-width:0}
@media (max-width:560px){.gh-pf-row{grid-template-columns:1fr auto}.gh-pf-row input{grid-column:1/-1;grid-row:2}}
.gh2-tasks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.gh2-repo + .gh2-tasks,.gh2-repo + .gh2-wait,.gh2-wait + .gh2-tasks{margin-top:14px}
.gh-more .gh2-tasks{padding-bottom:4px}
.gh2-task{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.gh2-task.todo{border-color:color-mix(in srgb,var(--violet) 45%,var(--line))}
.gh2-task:has(> button.gh2-main:hover){border-color:var(--violet);box-shadow:0 2px 10px rgba(124,92,255,.10)}
.gh2-main{display:flex;flex-wrap:wrap;align-items:flex-start;gap:11px;width:100%;padding:14px 14px 12px;text-align:start;color:inherit;flex:1;align-content:flex-start}
button.gh2-main{cursor:pointer}
button.gh2-main:focus-visible{outline:2px solid var(--violet);outline-offset:-2px;border-radius:16px}
.gh2-ico{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-ink)}
.gh2-ico svg.i{width:17px;height:17px}
.gh2-t{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.gh2-t b{font-size:14px;font-weight:600}
.gh2-s{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.gh2-go{flex-basis:100%;display:flex;padding-inline-start:43px;font-size:13px;font-weight:600;color:var(--violet-ink);white-space:nowrap}
.gh2-go-in{display:inline-flex;align-items:center}
.gh2-task.todo .gh2-go-in{padding:5px 14px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink)}

.gh2-dot{display:inline-flex;align-items:center;gap:6px}
.gh2-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
.gh2-dot.ok::before{background:var(--ok)}
.gh2-dot.wait::before{background:var(--amber)}
.gh2-dot.fail::before{background:var(--rose)}
.gh2-dot.fail{color:var(--rose)}
.gh2-switch{display:inline-block;width:36px;height:22px;border-radius:var(--r-pill);background:var(--line-strong);position:relative;transition:background .15s}
.gh2-switch i{position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:inset-inline-start .15s var(--ease)}
.gh2-switch.on{background:var(--violet)}
.gh2-switch.on i{inset-inline-start:17px}
.gh2-extra{padding:0 14px 12px;display:flex;flex-wrap:wrap;gap:6px}
.gh2-extra .gh-push{display:block;width:100%}
.gh2-ask{display:flex}
.gh2-task .gh2-ask{border-top:1px dashed var(--line-soft);padding:6px 10px 10px}
.gh2-connect{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:18px 12px 6px}
.gh2-connect>p{max-width:460px;color:var(--ink-2);font-size:14px}
.gh2-connect .gh2-ask{justify-content:center;padding:0}
.gh2-lead{font-size:14px;color:var(--ink-2)}
.gh2-link .gh2-ask{padding:10px 0 0}

/* Ask your agent (agent-ask.js): the small button under a task, and its window. */
.ask-agent{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:30px;padding:0 13px 0 11px;border-radius:var(--r-pill);background:var(--violet-soft);color:var(--violet-ink);font-size:12.5px;font-weight:600;white-space:nowrap;transition:background .15s,transform .12s var(--ease)}
.ask-agent:hover{background:var(--violet-line-2);color:var(--violet-ink)}
.ask-agent:active{transform:scale(.97)}
.ask-agent:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.ask-agent svg.i{width:15px;height:15px;stroke-width:1.8}
.ask-pop{display:flex;flex-direction:column;gap:14px}
.ask-prompt{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:14px;background:var(--canvas);border:1px solid var(--line)}
.ask-prompt p{font-size:15px;line-height:1.55;white-space:pre-wrap}
.ask-prompt .btn{align-self:flex-start}
.ask-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ask-tools small{color:var(--ink-3);font-size:12.5px;margin-inline-end:4px}
.ask-tools code{padding:3px 9px;border-radius:var(--r-pill);background:var(--sunken);font-size:12px}
.ask-setup summary{cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.ask-ways{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ask-ways>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--canvas)}
.ask-ways b{font-size:13.5px}
.ask-ways small{font-size:12.5px;color:var(--ink-3)}
.ask-ways .btn{max-width:100%}
.ask-ways code{overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.ask-ways{grid-template-columns:1fr}.gh2-tasks{grid-template-columns:1fr}.gh2-repo-link{flex-basis:100%}.gh2-live{display:none}}
.gh2-wait{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--violet-soft);color:var(--ink);text-decoration:none;font-size:13.5px}
.gh2-wait .grow{flex:1;min-width:0}
.gh2-wait svg.i{width:16px;height:16px;color:var(--violet-ink)}
.gh2-wait .gh2-go-in{padding:5px 14px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-weight:600;font-size:13px;flex:none}
.gh-group{display:flex;align-items:center;gap:8px;padding:12px 20px 8px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line-soft)}
.gh-group:first-child{border-top:0}
.gh-group b{font-weight:600;color:var(--ink-2)}
.gh-group span{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--sunken);display:inline-grid;place-items:center;font-size:11.5px;font-weight:600}
.gh-group.on b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);margin-inline-end:7px;vertical-align:middle}
.gh-group+.item{border-top:0}
.gh-ship{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--canvas)}
.gh-ship small{color:var(--ink-3);font-size:12px}
.gh-ship p{font-size:13.5px;color:var(--ink-2)}
.gh-ship .btn{max-width:100%}
.gh-ship code{overflow:hidden;text-overflow:ellipsis}

/* Settings › Security's sections (passkeys, devices): a line under each heading. Plan and billing's invoices. */
.set-sec-about{font-size:13.5px;margin:-4px 0 12px}
.bill-row .chip{margin-inline-start:6px}
.bill-docs{gap:6px;flex-wrap:wrap}

/* Permissions (permissions.js): what an owner didn't give a member goes from the page. A control
   that needs one says so (data-need); a build's start and stop buttons are the apps permission's
   wherever they are; a part for looking at only (data-lock) keeps its fields, unchangeable, and
   loses its buttons, with a line at its top saying which permission it takes. */
html.no-apps [data-need~="apps"], html.no-store [data-need~="store"], html.no-release [data-need~="release"], html.no-reviews [data-need~="reviews"],
html.no-keys [data-need~="keys"], html.no-sales [data-need~="sales"], html.no-agents [data-need~="agents"], html.no-billing [data-need~="billing"],
html.no-security [data-need~="security"], html.no-autonomous [data-need~="autonomous"],
html.no-apps [data-build-sheet], html.no-apps [data-build-stop]{display:none !important}
.perm-locked :is(button.btn, label.btn, input[type="file"], [data-need]){display:none !important}
.perm-note{display:flex;align-items:center;gap:8px}

/* An app's map (reef.js): the app as the jellyfish, an arm for each store and its website, the
   release's or deploy's steps as beads down it. It takes the whole screen; the island floats at its corner. */
.map-mode{overflow:hidden}
.map-mode .main>#track,.map-mode .main>#live-appr,.map-mode .main>#live,.map-mode .set-nav{display:none}
.map-mode .main>.set-shell{padding:0;max-width:none}
.map-mode .island-at{position:fixed;top:18px;inset-inline-start:18px;margin:0;align-items:flex-start;max-width:calc(100% - 280px)}
.map-mode .island{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.map-mode .island a[data-view=approvals]{display:none}

.reef{position:fixed;inset:0;z-index:1;overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(1100px 700px at 50% 16%,var(--halo-a) 0,transparent 60%),radial-gradient(900px 600px at 85% 92%,var(--halo-b) 0,transparent 60%),var(--canvas)}
.reef.drag{cursor:grabbing}
.reef-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 80%)}
.reef-plankton{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.reef-plankton i{position:absolute;bottom:-10px;width:var(--w);height:var(--w);border-radius:50%;background:var(--violet);opacity:.16;animation:reef-rise var(--t) linear infinite}
@keyframes reef-rise{to{transform:translate(var(--dx),-110vh);opacity:0}}
.reef-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.reef-svg{position:absolute;left:0;top:0;overflow:visible}

/* Tentacles and beads */
.reef-t{transition:opacity .35s var(--ease)}
.reef.dim .reef-t:not(.hot):not(.rest){opacity:.2}
.reef-stem{fill:none;stroke:url(#reef-stem-g);stroke-width:5;stroke-linecap:round}
.reef-stem.low{stroke:var(--violet-line);stroke-width:4}
.reef-stem.rest{stroke:var(--violet-line-2);stroke-width:4.5}
.reef-stem.dashed{stroke:var(--dash);stroke-width:4;stroke-dasharray:.004 .03}
.reef-flow{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:18 150;filter:drop-shadow(0 0 4px rgba(255,255,255,.9));animation:reef-flow 2.2s linear infinite}
@keyframes reef-flow{to{stroke-dashoffset:-168}}
.reef-hang{transform-box:fill-box;transform-origin:50% 0;animation:reef-sway 6s ease-in-out infinite alternate}
@keyframes reef-sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.reef-bead{stroke-width:3}
.reef-ring{transform-box:fill-box;transform-origin:center;animation:reef-ring 1.8s ease-out infinite}
@keyframes reef-ring{from{transform:scale(1);opacity:.5}to{transform:scale(2.8);opacity:0}}
.reef-lbl{font:500 15px var(--font);fill:var(--ink-3)}
.reef-lbl.now{fill:var(--ink);font-weight:600}
.reef-lbl.sub{font-size:13px;font-weight:400;fill:var(--ink-3)}
.reef-bell{transform-box:fill-box;transform-origin:50% 100%;animation:reef-breathe 4.5s ease-in-out infinite}
@keyframes reef-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.035,.965)}}
.reef-eye{transform-box:fill-box;transform-origin:center;animation:reef-blink 5s infinite}
@keyframes reef-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}

/* Cards on the tentacles */
.reef-name{position:absolute;top:8px;width:520px;text-align:center;pointer-events:none}
.reef .reef-name b[dir=auto],.reef .rc-top b[dir=auto]{text-align:center}
.reef-name b{display:block;font-size:30px;font-weight:600;letter-spacing:-.035em}
.reef-name small{font-size:14.5px;color:var(--ink-3)}
.reef-slot{position:absolute}
.reef-node{position:relative;display:flex;flex-direction:column;width:100%;padding:16px;border-radius:24px;background:var(--glass-card);box-shadow:var(--elev),0 0 0 1px var(--line-soft);color:var(--ink);text-align:start;text-decoration:none;cursor:pointer;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.reef-node:hover,.reef-node:focus-visible{box-shadow:0 0 0 1.5px var(--violet),0 20px 44px rgba(124,92,255,.18);transform:translateY(-3px);outline:none}
.reef-node.sel{box-shadow:0 0 0 2px var(--violet),0 0 0 8px rgba(124,92,255,.14),0 20px 44px rgba(124,92,255,.2)}
.rn-h{display:flex;align-items:center;gap:12px;min-width:0}
.rn-h .app-ico{width:46px;height:46px;border-radius:13px;font-size:20px}
.rn-t{display:flex;flex-direction:column;min-width:0}
.rn-t b{font-size:16px;font-weight:600;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn-t small{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn-t small .slogo{width:12px;height:12px}
.rn-lane{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.reef-node.ghost{background:var(--glass-faint);box-shadow:inset 0 0 0 1.5px var(--line);backdrop-filter:blur(6px)}
.reef-node.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--violet),0 14px 30px rgba(124,92,255,.12)}
.reef-node.ghost.sel{box-shadow:inset 0 0 0 2px var(--violet),0 0 0 8px rgba(124,92,255,.14)}
.reef-node.ghost .rn-t b{white-space:normal;font-size:15px;line-height:1.3}
.reef-node.ghost .rn-t small{white-space:normal;line-height:1.35}
.rn-mark{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--canvas);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-soft)}
.rn-mark .slogo{width:22px;height:22px;margin:0;color:var(--ink)}
svg.slogo.web{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rn-when{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.rn-go{margin-top:12px;font-size:13.5px;font-weight:500;color:var(--violet-ink)}
.rn-rows{display:flex;flex-direction:column;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.rn-row{display:grid;grid-template-columns:72px auto minmax(0,1fr);align-items:center;gap:8px;min-height:24px;font-size:12.5px}
.rn-row small{color:var(--ink-3)}
.rn-row .chip{justify-self:end;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rn-row>.muted{grid-column:2/-1}
/* In an arm's panel the store's step stands alone: no card around it, and the arm carries its mark. */
.reef .rp-setup .ss{margin:0;padding:0;background:none;box-shadow:none}
.reef .rp-setup .ss>header{display:none}
.reef .rp-setup .ss-grid{margin:0}
.reef .rp-setup [data-mark]{outline:none}
.reef .rp-setup [data-mark]::after{display:none}
.rn-plus{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--violet-soft);color:var(--violet-ink)}
.rn-plus .slogo{width:20px;height:20px;margin:0}

/* What the jellyfish says */
.reef-say{position:absolute;top:150px;display:flex;flex-direction:column;gap:3px;width:300px;padding:14px 16px;border-radius:20px 20px 20px 6px;background:var(--surface);box-shadow:0 0 0 1px var(--line-soft),0 18px 40px rgba(60,40,140,.12);color:var(--ink);text-align:start;text-decoration:none;font-size:13.5px;cursor:pointer;animation:reef-bob 4.8s ease-in-out infinite}
[dir=rtl] .reef-say{border-radius:20px 20px 6px 20px}
.reef-say.ask{box-shadow:0 0 0 1.5px var(--violet),0 18px 40px rgba(124,92,255,.18)}
.reef-say.quiet{cursor:default}
.reef-say b{font-size:14.5px;font-weight:600}
.reef-say span{color:var(--ink-2);line-height:1.45}
.reef-say em{font-style:normal;margin-top:6px;font-weight:500;color:var(--violet-ink)}
@keyframes reef-bob{50%{transform:translateY(-8px)}}

/* Over the map: the waiting count */
.reef-ctl{position:absolute;z-index:3}
.reef-corner{top:88px;inset-inline-end:18px;transition:inset-inline-end .5s var(--ease)}
.reef.open .reef-corner{inset-inline-end:calc(var(--rp, 420px) + 30px)}
.reef-orb{display:flex;align-items:center;gap:9px;height:46px;padding:0 18px 0 8px;border-radius:var(--r-pill);background:var(--glass);backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line-soft),0 12px 32px rgba(60,40,140,.08);font-size:14px;font-weight:500}
.reef-orb b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--violet);color:#fff;font-size:13px;box-shadow:0 0 0 0 rgba(124,92,255,.5);animation:reef-orb 2s infinite}
@keyframes reef-orb{70%{box-shadow:0 0 0 10px rgba(124,92,255,0)}}

/* The app's panel at the side */
.reef-panel{position:absolute;z-index:4;top:12px;bottom:12px;inset-inline-end:12px;width:var(--rp,420px);overflow:auto;overscroll-behavior:contain;padding:22px 24px 24px;border-radius:28px;background:var(--surface);box-shadow:0 0 0 1px var(--line-soft),0 30px 80px rgba(40,30,90,.18);cursor:auto;user-select:text;-webkit-user-select:text;transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
[dir=rtl] .reef-panel{transform:translateX(calc(-100% - 24px))}
.reef.open .reef-panel{transform:none;visibility:visible;transition:transform .6s var(--ease)}
.reef-x{position:absolute;top:18px;inset-inline-end:18px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);color:var(--ink-2)}
.rp-h{display:flex;align-items:center;gap:14px;padding-inline-end:40px}
.rp-h .app-ico.lg{display:grid;width:60px;height:60px;border-radius:17px}
.rp-h h2{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.rp-h small{font-size:12.5px;color:var(--ink-3)}
.rp-mark{width:60px;height:60px;border-radius:17px;display:grid;place-items:center;flex:none;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-soft)}
.rp-mark .slogo{width:28px;height:28px;margin:0;color:var(--ink)}
.rp-web p{margin:0 0 12px;line-height:1.55;color:var(--ink-2)}
.reef .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line)}
.reef .dot.moving{background:var(--violet)}.reef .dot.live{background:var(--live)}.reef .dot.fail{background:var(--rose)}.reef .dot.wait{background:var(--amber)}.reef .dot.done{background:var(--ink-3)}
.rp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.rp-tabs a{height:32px;padding:0 13px;border-radius:var(--r-pill);display:inline-flex;align-items:center;font-size:13px;color:var(--ink-2);text-decoration:none;box-shadow:0 0 0 1px var(--line)}
.rp-tabs a:hover{box-shadow:0 0 0 1px var(--violet);color:var(--ink)}
.rp-sec{margin-top:22px}
.rp-sec h4{margin:0 0 10px;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.rp-asks .req{flex-direction:column;align-items:stretch;gap:12px;padding:16px;border-radius:18px;background:linear-gradient(160deg,var(--violet-tint),var(--surface));box-shadow:0 0 0 1.5px var(--violet)}
.rp-asks .req>.app-ico{display:none}
.rp-asks .req .what b{font-size:15px;line-height:1.35}
.rp-asks .req .acts{display:grid;grid-template-columns:1fr 1.4fr}
.rp-asks .req .acts.hidden{display:none}
.rp-store{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:var(--canvas);margin-bottom:8px}
.rp-store .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.rp-store b{font-size:14px;font-weight:500}
.rp-store small{font-size:12.5px;color:var(--ink-3)}
.rp-store .chip{max-width:130px;overflow:hidden;text-overflow:ellipsis}
.rp-run{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--canvas);color:var(--ink);text-decoration:none;margin-bottom:6px}
.rp-run small{display:block;font-size:12.5px;color:var(--ink-3)}
.reef-panel>.btn.wide{margin-top:24px}

/* Coming in: the jellyfish settles, the tentacles grow, the cards arrive */
.reef-world.enter .reef-bell{animation:reef-drop 1.1s var(--ease) both,reef-breathe 4.5s ease-in-out 1.1s infinite}
@keyframes reef-drop{from{transform:translateY(-60px);opacity:0}}
.reef-world.enter .reef-stem{stroke-dasharray:1;animation:reef-grow 1.3s var(--ease) .3s both}
.reef-world.enter .reef-stem.dashed{animation:none}
@keyframes reef-grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.reef-world.enter .reef-slot{animation:reef-pop .8s var(--ease) var(--d,.5s) both}
@keyframes reef-pop{from{opacity:0;transform:translateY(24px) scale(.94)}}
.reef-world.enter .reef-bead,.reef-world.enter .reef-lbl{animation:reef-fade .6s ease .9s both}
@keyframes reef-fade{from{opacity:0}}
/* Leaving the map the swimmer takes the jellyfish's place and lets go of the cards while the whole map
   fades; coming to it, it brings its tentacles to the cards, each coming up as one touches it, and
   the strands under them once it's there (swim.js). */
.reef.swim-out{opacity:0;transition:opacity .26s ease-in}
.reef:is(.swim-out,.swim-in) :is(.reef-bell,.reef-stem.top,.reef-flow){visibility:hidden}
.reef :is(.reef-slot,.reef-hang,.reef-say){transition:opacity .4s var(--ease)}
.reef.swim-in :is(.reef-slot,.reef-hang,.reef-say){opacity:0}
.reef.swim-in.r0 .reef-slot[data-i="0"],.reef.swim-in.r1 .reef-slot[data-i="1"],.reef.swim-in.r2 .reef-slot[data-i="2"],.reef.swim-in.r3 .reef-slot[data-i="3"]{opacity:1}

/* A phone: the jellyfish on top, a card per tentacle down the page, its steps across it */
@media (max-width:760px){
  .map-mode .island-at{inset-inline:0;top:10px;max-width:none}
  .reef{overflow-y:auto;cursor:auto;touch-action:pan-y;user-select:auto}
  .reef-dots{display:none}
  .reef-world{position:relative;transform:none!important;padding:150px 16px 120px;width:auto!important;height:auto!important}
  .rc-top{display:flex;flex-direction:column;align-items:center;text-align:center}
  .rc-bell{width:120px;height:90px}
  .rc-top b{text-align:center;font-size:22px;font-weight:600;letter-spacing:-.03em;margin-top:6px}
  .rc-top small{font-size:13.5px;color:var(--ink-3)}
  .reef-world .reef-say{position:relative;top:auto;width:auto;margin:16px 0 4px;animation:none}
  .rc-list{position:relative;display:flex;flex-direction:column;gap:14px;margin-top:18px;padding-inline-start:22px}
  .rc-list::before{content:"";position:absolute;inset-inline-start:6px;top:-18px;bottom:20px;width:4px;border-radius:2px;background:linear-gradient(var(--violet),var(--violet-line-2))}
  .rc-row{position:relative}
  .rc-row::before{content:"";position:absolute;inset-inline-start:-18px;top:34px;width:18px;height:4px;border-radius:2px;background:var(--violet-line)}
  .rc-beads{display:grid;grid-template-columns:repeat(var(--n,4),1fr);margin:10px 4px 0;position:relative}
  .rc-beads::before{content:"";position:absolute;top:7px;left:12%;right:12%;height:3px;border-radius:2px;background:var(--line)}
  .rc-b{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
  .rc-b i{width:17px;height:17px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 3px var(--line-strong)}
  .rc-b small{font-size:11.5px;color:var(--ink-3);text-align:center}
  .rc-b.done i{background:var(--ink);box-shadow:none}
  .rc-b.live i{background:var(--live);box-shadow:none}
  .rc-b.moving i{background:var(--violet);box-shadow:0 0 0 5px var(--violet-soft)}
  .rc-b.wait i{background:var(--amber);box-shadow:0 0 0 5px var(--amber-soft)}
  .rc-b.fail i{background:var(--rose);box-shadow:0 0 0 5px var(--rose-soft)}
  .rc-b:is(.moving,.wait,.fail) small{color:var(--ink);font-weight:500}
  .rc-beads.dashed{opacity:.45}
  .reef-corner{display:none}
  .reef-panel{position:fixed;top:auto;bottom:0;inset-inline:0;width:auto;max-height:86vh;border-radius:28px 28px 0 0;transform:translateY(105%)}
  [dir=rtl] .reef-panel{transform:translateY(105%)}
  .reef.open .reef-panel{transform:none}
}
@media (prefers-reduced-motion:reduce){.reef *{animation:none!important}}

/* Versions (an app's Versions page and one version's page): a version is every build of one version
   number; each store of it is a lane of four stations, built, with testers, the store's review, live. */
.vp-dots{display:inline-flex;align-items:center;flex:none}
.vp-dots i{width:10px;height:10px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);flex:none}
.vp-dots b{width:13px;height:2px;border-radius:2px;background:var(--line)}
.vp-dots b.on{background:var(--ink)}
.vp-dots i.done{background:var(--ink);box-shadow:none}
.vp-dots i.now{background:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.vp-dots i.ask{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.vp-dots i.fail{background:var(--rose);box-shadow:0 0 0 3px var(--rose-soft)}
.vp-dots i.stop{background:var(--ink-3);box-shadow:none}
.vp-dots.air :is(i,b){background:var(--live);box-shadow:none}
.vp-dots.sm i{width:8px;height:8px}
.vp-dots.sm b{width:9px}
.plat .vp-dots{margin-inline-start:auto}
.plat .vp-dots+.chip{margin-inline-start:auto}

.vfs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:14px}
.vf{display:flex;flex-direction:column;gap:6px;min-width:150px;--fh:40px}
.vf.grow{flex:1;min-width:220px}
.vf>span{font-size:12.5px;color:var(--ink-3);padding-inline-start:4px}
.vlist{overflow:hidden;margin-bottom:16px}
.vr{display:grid;grid-template-columns:26px minmax(120px,1.1fr) 120px minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,auto);align-items:center;gap:14px;min-height:72px;padding:10px 20px;border-top:1px solid var(--line-soft);color:var(--ink);text-decoration:none;font-size:14px;transition:background .15s}
.vr:hover{background:var(--hover)}
.vr.vh{min-height:42px;border-top:0;font-size:12.5px;color:var(--ink-3)}
.vr.vh:hover{background:none}
.vlist .empty{padding:24px 20px;border-top:1px solid var(--line-soft)}
.vr-st{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--ink-4)}
.vr-st .i{width:13px;height:13px;stroke-width:2.6}
.vr-st.ok,.vr-st.prod{background:var(--live)}
.vr-st.processing{background:var(--violet);box-shadow:0 0 0 4px var(--violet-soft)}
.vr-st.review{background:var(--sky);box-shadow:0 0 0 4px var(--sky-soft)}
.vr-st.wait{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.vr-st.fail{background:var(--rose)}
.vr-name{min-width:0}
.vr-name b{display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px}
.vr-name small,.vr-from small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.vr-path{display:flex;flex-direction:column;gap:6px}
.vr-lane{display:flex;align-items:center;gap:7px}
.vr-lane .slogo{width:13px;height:13px;color:var(--ink-3)}
.vr-from{display:flex;align-items:center;gap:8px;min-width:0}
.vr-from .i{width:16px;height:16px;color:var(--ink-2)}
.vr-from .grow{min-width:0}
.vr-from b{display:block;font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vr-where{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);min-width:0}
.vr-ico{width:26px;height:26px;border-radius:8px;background:var(--sunken);display:grid;place-items:center;flex:none}
.vr-ico .i{width:14px;height:14px}
.vr-who{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vr-chip{justify-self:end}
.vr-chip .chip{max-width:180px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.vr{grid-template-columns:26px minmax(0,1fr) 110px minmax(0,auto)}.vr-from,.vr-where,.vr-who{display:none}}
@media (max-width:640px){.vr{grid-template-columns:24px minmax(0,1fr) minmax(0,auto);padding:10px 14px}.vr-path{display:none}.vf{min-width:calc(50% - 5px)}}

.ver-h1 .ltr{font-family:var(--mono);font-size:.8em;font-weight:500;color:var(--ink-2)}
.vhead{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding:18px 22px}
.vfact small{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:5px}
.vfact b{font-weight:500;font-size:14.5px;display:block;overflow:hidden;text-overflow:ellipsis}
.vfact a{color:var(--violet-ink);text-decoration:none}
.vpath{container:vpath/inline-size;margin-top:14px;padding:26px 24px;background-image:radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:22px 22px}
.vp-in{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);align-items:center;gap:0}
.vp-commit{position:relative;display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);min-width:0}
.vp-commit .i{width:20px;height:20px;color:var(--ink-2);flex:none}
.vp-commit .grow{min-width:0}
.vp-commit b{font-weight:500;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.vp-commit small{font-size:12px;color:var(--ink-3)}
.vp-lanes{display:flex;flex-direction:column;gap:20px;padding-inline-start:44px;position:relative}
.vp-lanes::before{content:"";position:absolute;inset-inline-start:0;top:46px;bottom:28px;width:2px;border-radius:2px;background:var(--line-strong)}
.vp-lane{position:relative}
.vp-lane::before{content:"";position:absolute;inset-inline-start:-44px;top:46px;width:44px;height:2px;background:var(--line-strong)}
.vp-store{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink-3);margin-bottom:8px}
.vp-store .slogo{width:13px;height:13px}
.vp-nodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.vnode{position:relative;display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 14px 8px 10px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow);min-width:0}
.vnode+.vnode::before{content:"";position:absolute;inset-inline-end:100%;top:50%;width:26px;height:2px;background:var(--line-strong)}
.vnode.done+.vnode::before{background:var(--ink)}
.vp-lane.air .vnode::before{background:var(--live)!important}
.vnode b{display:block;font-weight:500;font-size:14px}
.vnode small{display:block;font-size:12px;line-height:1.3;color:var(--ink-3);overflow-wrap:anywhere}
.vnode .grow{min-width:0}
.vn-ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);color:#fff}
.vn-ico .i{width:13px;height:13px;stroke-width:2.6}
.vnode.done .vn-ico{background:var(--live);box-shadow:none}
.vnode.fail .vn-ico{background:var(--rose);box-shadow:none}
.vnode.stop .vn-ico{background:var(--ink-3);box-shadow:none}
.vnode.now .vn-ico{background:var(--violet);box-shadow:0 0 0 4px var(--violet-soft)}
.vnode.ask .vn-ico{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.vn-ico i{width:8px;height:8px;border-radius:50%;background:#fff;animation:vn-pulse 1.6s ease-in-out infinite}
@keyframes vn-pulse{50%{opacity:.35}}
.vnode.now{box-shadow:0 0 0 1.5px var(--violet),0 10px 24px rgba(124,92,255,.12)}
.vnode.ask{box-shadow:0 0 0 1.5px var(--amber),0 10px 24px rgba(177,77,8,.10)}
.vnode.fail{box-shadow:0 0 0 1.5px var(--rose)}
.vnode.next{background:var(--glass-faint);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-3)}
.vp-lane.air .vnode{box-shadow:0 0 0 1px color-mix(in srgb,var(--live) 35%,var(--line)),var(--shadow)}
.ver-calm{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:16px 18px;border-radius:20px;background:linear-gradient(90deg,var(--violet-soft),var(--violet-tint) 60%,var(--surface));box-shadow:0 0 0 1px var(--violet-line)}
.ver-calm img{flex:none}
.ver-calm b{font-weight:600}
.ver-calm p{font-size:13.5px;color:var(--ink-2)}
.ver-asks{margin-top:14px;padding:18px 20px;box-shadow:0 0 0 1.5px var(--violet),var(--shadow)}
.ver-asks h2{font-size:16px;font-weight:600}
.ver-store{margin-top:14px;padding:18px 20px}
.ver-store .sec-card-h{margin-bottom:12px}
.ver-store .sec-card-h h2{display:flex;align-items:center;gap:8px}
.ver-earlier{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:10px}
.ver-earlier summary{cursor:pointer;font-size:13.5px;color:var(--ink-2);padding:4px 0}
@media (max-width:860px){
  .vhead{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vpath{padding:18px 14px}
}
/* The path's first card goes above the stations once they no longer fit beside it, and the stations
   go two to a row once four no longer fit side by side. */
@container vpath (max-width:1040px){
  .vp-in{grid-template-columns:minmax(0,1fr);gap:18px}
  .vp-commit{justify-self:start;max-width:min(520px,100%)}
  .vp-lanes{padding-inline-start:0}
  .vp-lanes::before,.vp-lane::before{display:none}
}
@container vpath (max-width:600px){
  .vp-nodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vnode+.vnode::before{display:none}
}

/* ---- Ploa Aio: the Web page (web.js) and the Plan page's hosting ---- */
.web-ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--violet-soft);color:var(--violet-ink)}
.web-ico .i{width:18px;height:18px}
.web-pkg{margin-top:14px}
.web-empty h2{margin:0 0 6px}
.web-steps{margin:12px 0 0;padding-inline-start:20px;display:grid;gap:6px;color:var(--ink-2)}
.web-addr{display:flex;align-items:center;border-radius:12px;box-shadow:0 0 0 1px var(--line);background:var(--surface);overflow:hidden}
.web-addr span{padding:0 10px;color:var(--ink-3);font-size:14px;white-space:nowrap}
.web-addr input{flex:1;min-width:0;border:0;box-shadow:none;padding-inline:0;background:transparent}
.web-addr:focus-within{box-shadow:0 0 0 2px var(--violet)}
.ok-text{color:var(--ok-ink)}
.web-how p code,.web-cmd code{font-size:13px}
.web-cmd{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--sunken)}
.web-cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap}
.web-cmd .btn{flex:none}
.web-zip{cursor:pointer}
.web-zip.busy{opacity:.6;pointer-events:none}
.pad-x{padding:16px 20px 4px;margin:0}
.web-danger .danger{flex:none}
.plan-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.plan-tile{display:flex;flex-direction:column;gap:6px;align-items:flex-start;box-shadow:0 0 0 1px var(--line)}
.plan-tile small{line-height:1.35}
@media (max-width:640px){.plan-tiles{grid-template-columns:1fr}}

/* The dashed frame and its label (markNext in app.js): what waits for the person now, and only
   that: the launch path's next step, a store's step only they can do, a request to approve. */
[data-mark]{position:relative;outline:2px dashed #b9a8ff;outline-offset:5px}
/* The dashed mark has round corners: what's marked keeps its own radius (a card's, which the
   outline follows), and anything without one gets this (zero specificity, so it never wins). */
:where([data-mark]){border-radius:16px}
[data-mark]::after{content:attr(data-mark);position:absolute;top:-16px;inset-inline-end:16px;z-index:2;height:24px;padding:0 11px;border-radius:var(--r-pill);background:var(--violet);color:#fff;font-size:12px;font-weight:600;line-height:24px;white-space:nowrap;box-shadow:0 6px 14px rgba(124,92,255,.3);pointer-events:none}
.lf-link[data-mark]{outline-offset:4px}
.reef-say[data-mark]{outline-offset:6px}

/* An app's pages and the Apps page sit on the map's canvas (body.canvas): its colors and dots, the
   bar fixed at the corner as on the map, the page under it across the whole width, its cards the
   map's tiles. The release track is the map's to show. */
body.canvas{background:radial-gradient(1100px 700px at 50% 16%,var(--halo-a) 0,transparent 60%) fixed,radial-gradient(900px 600px at 85% 92%,var(--halo-b) 0,transparent 60%) fixed,var(--canvas)}
body.canvas::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 85%);mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 85%)}
.canvas .shell{position:relative;z-index:1}
.canvas .island-at{position:fixed;top:18px;inset-inline-start:18px;margin:0;align-items:flex-start;max-width:calc(100% - 36px)}
.canvas .island{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* A little room between the header and the first cards (Yoni, 2026-11-06). */
.canvas .main{padding-top:calc(var(--isl-h, 96px) + 64px)}
.canvas .main>#track{display:none}
.canvas .card,.canvas .ss-card{border-radius:var(--r-card);background:var(--glass-card);box-shadow:var(--elev),0 0 0 1px var(--line-soft)}
.canvas a.app:hover{transform:translateY(-3px);box-shadow:0 0 0 1.5px var(--violet),0 20px 44px rgba(124,92,255,.18)}
.canvas .apps{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
/* Once the page moves (app.js sets .scrolled), nothing is drawn behind the bar and the corner: they
   float over the page with a heavier shadow (Yoni, 2026-11-06; the frosted band behind them is gone). */
.canvas :is(.island,.corner){transition:box-shadow .2s}
.canvas.scrolled:not(.map-mode) :is(.island,.corner){box-shadow:var(--float),0 0 0 1px var(--line-soft)}
/* Whatever a link or a step scrolls to lands under the bar, not behind it. */
html:has(body.canvas){scroll-padding-top:calc(var(--isl-h, 96px) + 16px)}
/* The bar's tabs, when they don't fit, scroll sideways, each end fading out while there's more
   beyond it (app.js sets .past and .over). */
.canvas .isl-tabs:is(.past,.over){-webkit-mask-image:linear-gradient(to var(--fade-to, right),transparent,#000 var(--fade-s, 0%),#000 var(--fade-e, 100%),transparent);mask-image:linear-gradient(to var(--fade-to, right),transparent,#000 var(--fade-s, 0%),#000 var(--fade-e, 100%),transparent)}
.canvas .isl-tabs.past{--fade-s:14%}
.canvas .isl-tabs.over{--fade-e:86%}
[dir=rtl] .canvas .isl-tabs{--fade-to:left}
/* The bar ends where the corner starts (app.js measures it as --corner-w); its tabs scroll. */
@media (min-width:861px){
  .canvas .island-at{max-width:calc(100% - var(--corner-w, 170px) - 50px)}
  .canvas .island{flex-wrap:nowrap;max-width:100%}
  .canvas .isl-tabs{flex:0 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .canvas .isl-tabs::-webkit-scrollbar{display:none}
}
/* On a phone the bar is one sheet across the top: the app with the corner in its first row, the
   stages under it. It slides away as the page goes down
   and comes back as soon as it goes up (app.js sets .bar-away). */
@media (max-width:860px){
  .canvas .island-at{inset-inline:0;top:0;max-width:none;padding:max(8px,env(safe-area-inset-top)) 10px 10px;border-radius:0 0 24px 24px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--elev-2),0 0 0 1px var(--line-soft);transition:transform .3s var(--ease),box-shadow .2s}
  .canvas.scrolled .island-at{box-shadow:var(--float),0 0 0 1px var(--line-soft)}
  .canvas.scrolled:not(.map-mode) .island{box-shadow:none}
  .canvas.scrolled:not(.map-mode) .corner{box-shadow:none}
  .canvas .island{padding:0;gap:2px;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .canvas .island > .isl-btn[data-find]{margin-inline-end:90px}
  body.canvas:has(#corner-fresh:not(:empty)) .island > .isl-btn[data-find]{margin-inline-end:134px}
  .canvas .isl-appbtn b{max-width:none}
  .canvas .isl-tabs{margin-top:4px}
  .canvas .isl-tabs a{height:36px;padding:0 14px}
  .canvas.bar-away .island-at,.canvas.bar-away .corner{transform:translateY(calc(-1 * var(--isl-h, 160px) - 16px))}
  .canvas .page-head h1{font-size:26px}
}

/* Setup's launch path at the top of its page, until the app is out. */
#sec-tiles:empty{display:none}
#sec-tiles{margin-bottom:22px}
#sec-tiles>.card+.card{margin-top:18px}
/* The stage's pages as one selector in the title row; it scrolls sideways when it doesn't fit. */
.stage-switch{max-width:100%;overflow-x:auto;scrollbar-width:none}
.stage-switch::-webkit-scrollbar{display:none}
.stage-switch a{white-space:nowrap}
.st-tile{display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px;border-radius:24px;background:var(--glass-card);box-shadow:var(--elev),0 0 0 1px var(--line-soft);color:var(--ink);text-decoration:none;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.st-tile:hover{box-shadow:0 0 0 1.5px var(--violet),0 20px 44px rgba(124,92,255,.18);transform:translateY(-3px)}
.st-tile[aria-current]{box-shadow:0 0 0 2px var(--violet),0 0 0 8px rgba(124,92,255,.14),0 20px 44px rgba(124,92,255,.16)}
.st-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--violet-soft);color:var(--violet-ink)}

/* The mockup's pieces, in more places: copy rows (a field and its Copy button), a command as a dark
   pill with a violet Copy, and page switches as a dark pill bar with the chosen one violet. */
.canvas .ss-copy code{padding:8px 12px;border-radius:12px;background:var(--canvas);box-shadow:none}
.cmd-line{border-radius:var(--r-pill);padding:6px;padding-inline:18px 6px}
.cmd-line .btn{border-radius:var(--r-pill);background:var(--violet);color:#fff}
.cmd-line .btn:hover{background:var(--violet-deep)}
.seg.dark{gap:4px;padding:5px;background:var(--deep);box-shadow:0 12px 30px rgba(23,24,27,.18)}
.seg.dark :is(button,a){padding:7px 15px;color:#d9d7e3;background:var(--deep-2)}
.seg.dark :is(button,a):hover{color:#fff}
.seg.dark :is(button[aria-pressed=true],a[aria-current=true]){background:var(--on-deep);color:var(--on-deep-ink);box-shadow:none}
.fr-steps li[data-mark]{margin:14px 0 8px;padding:12px;border-top:0;border-radius:16px}
.fr-steps li[data-mark]+li{border-top:0}
/* The request waiting for you, above every page, carries the mark: its side stripe gives way to it. */
.appr-item[data-mark]{overflow:visible;margin-top:12px}
.appr-item[data-mark]::before{display:none}

/* The far corner (top left in Hebrew): an app page's refresh, the approvals and the account, apart
   from the bar, on every screen; on the canvas it stays put as the page moves. On the map it gives
   way to an open panel. No backdrop blur here: it would hold the account menu's phone sheet. */
.corner{position:absolute;z-index:7;top:20px;inset-inline-end:20px;display:flex;align-items:center;gap:4px;padding:6px;border-radius:30px;background:var(--glass);box-shadow:var(--elev-2),0 0 0 1px var(--line-soft);transition:inset-inline-end .5s var(--ease)}
.canvas .corner{position:fixed;top:18px;inset-inline-end:18px}
#corner-fresh:empty{display:none}
#corner-fresh .fresh{height:44px;box-shadow:none;background:var(--canvas);padding-inline-start:14px;padding-inline-end:6px}
#corner-fresh .fresh-ico{width:32px;height:32px;background:var(--surface)}
.corner .isl-me{margin:0}
@media (min-width:761px){body:has(.reef.open) .corner{inset-inline-end:calc(var(--rp, 420px) + 30px)}}
@media (max-width:860px){
  .corner{top:16px;inset-inline-end:18px;padding:0;background:none;box-shadow:none}
  .canvas .corner{top:max(8px,env(safe-area-inset-top));inset-inline-end:10px;transition:transform .3s var(--ease)}
  .island-at{padding-inline-end:122px}
  #corner-fresh .fresh-text,#corner-fresh .fresh-dot{display:none}
  #corner-fresh .fresh{padding:0 6px;background:none}
  body:has(#corner-fresh:not(:empty)) .island-at{padding-inline-end:166px}
  body.canvas:has(#corner) .island-at{padding-inline-end:10px}
}
@media (min-width:861px) and (max-width:1240px){
  #corner-fresh .fresh-text,#corner-fresh .fresh-dot{display:none}
  #corner-fresh .fresh{padding:0 6px}
}
@media (prefers-reduced-motion:reduce){.canvas :is(.island-at,.corner){transition:none}}

/* An app's buttons at the bottom of its pages: a dark pill bar, the build violet. */
.dock:empty{display:none}
.dock{position:fixed;z-index:8;bottom:18px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);transition:left .5s var(--ease)}
.dock-bar{display:flex;align-items:center;gap:6px;padding:6px;border-radius:var(--r-pill);background:var(--deep);box-shadow:0 16px 40px rgba(23,24,27,.25)}
.dock-bar :is(.btn,.ask-agent){height:40px;padding:0 16px;border-radius:var(--r-pill);border:0;background:var(--deep-2);color:#fff;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:none;text-decoration:none}
.dock-bar :is(.btn,.ask-agent):hover{background:var(--deep-3)}
.dock-bar .btn.primary{background:var(--on-deep);color:var(--on-deep-ink);font-weight:600}
.dock-bar .btn.primary:hover{background:var(--on-deep-hover)}
.dock-bar .i{width:16px;height:16px}
body:has(#dock:not(:empty)) .main>.set-shell{padding-bottom:110px}
@media (min-width:761px){body:has(.reef.open) .dock{left:calc((100% - var(--rp, 420px) - 24px) / 2)}[dir=rtl] body:has(.reef.open) .dock{left:calc(var(--rp, 420px) + 24px + (100% - var(--rp, 420px) - 24px) / 2)}}
@media (max-width:760px){body:has(.reef.open) .dock{display:none}.dock{bottom:12px}}
/* On a phone the bar takes the width, the build and the release sharing it, the agent a round button. */
@media (max-width:600px){
  .dock{left:12px;right:12px;transform:none;max-width:none}
  .dock-bar :is(.btn,.ask-agent){flex:1;justify-content:center;min-width:0;padding:0 10px}
  .dock-bar .ask-agent{flex:0 0 40px;padding:0;gap:0;font-size:0}
}
/* Settings' menu, the store details' steps and an event's side stay under the fixed bar as the page moves. */
.canvas :is(.set-nav,.dt-rail,.ev-side){top:calc(var(--isl-h, 96px) + 16px)}

/* The Agents board on the canvas: each column a tile with its sign and count, its cards soft rows
   inside it; the column waiting for you carries the step's mark. */
.col h2 .col-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--violet-soft);color:var(--violet-ink)}
.col h2 .col-ico .i{width:17px;height:17px}
.col h2 .grow{min-width:0}
.col-waiting h2 .col-ico{background:var(--amber-soft);color:var(--amber)}
.col-stuck h2 .col-ico{background:var(--rose-soft);color:var(--rose)}
.col-working h2 .col-ico{background:var(--sky-soft);color:var(--sky)}
.col-waiting h2 span.grow,.col-stuck h2 span.grow{color:var(--ink)}
.canvas .board{gap:18px}
.canvas .board-filter{margin-bottom:22px}
.canvas .col{gap:10px;padding:16px;border-radius:24px;background:var(--glass-card);box-shadow:var(--elev),0 0 0 1px var(--line-soft);min-height:180px;align-content:start}
.canvas .col[data-mark]{outline-offset:6px}
.canvas .col h2{gap:10px;justify-content:flex-start;font-size:15.5px;letter-spacing:-.01em;padding:0 0 10px;margin-bottom:2px;border-bottom:1px solid var(--line-soft)}
.canvas .col h2 .n{margin-inline-start:auto;background:var(--canvas);color:var(--ink-2);font-weight:600;padding:2px 10px}
.canvas .bcard{border-radius:var(--r-tile);background:var(--canvas);box-shadow:none;padding:12px 13px;transition:box-shadow .2s var(--ease),transform .2s var(--ease),background .2s var(--ease)}
.canvas .bcard:hover{background:var(--surface);box-shadow:0 0 0 1.5px var(--violet),0 10px 24px rgba(124,92,255,.14);transform:translateY(-2px)}
.canvas .bcard .bc-foot .who{background:var(--surface)}
.canvas .bcard .bc-foot .who.agent{background:var(--violet-soft)}
.canvas .bcard.pinned{background:var(--surface);box-shadow:0 0 0 1.5px var(--rose)}
.canvas .col .empty{padding:22px 8px 10px}
.canvas .mark-acts .icon-btn{background:transparent}
.canvas .bc-more:hover{background:var(--canvas)}
@media (max-width:640px){
  .canvas .board{margin-inline:-16px;padding:14px 16px 8px}
  .canvas .col{flex:0 0 86%;min-height:0}
}

/* An app's Website page: no site yet, its address and the button on one row, the agent as the other
   way; with one, its address at the top as a tile's head. */
.web-start{display:grid;gap:10px;justify-items:start}
.web-start h2{font-size:20px;letter-spacing:-.02em}
.web-start>p{max-width:640px;margin:0}
.web-start .web-new{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;width:100%;margin-top:4px}
.web-start .web-new .field{flex:1 1 320px;margin:0}
.web-start .web-new>.btn{margin-top:27px}
.web-or{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;width:100%;margin-top:6px;padding-top:14px;border-top:1px solid var(--line-soft)}
.web-or p{margin:0}
/* A site's addresses: its free one and the domains connected to it (web.js › domainsCard) */
.web-doms .item{padding:12px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}
.web-doms .item .grow{flex:1;min-width:0}
.web-doms .item b{display:block;overflow-wrap:anywhere}
.web-doms .item small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.web-dom summary{list-style:none;cursor:pointer}
.web-dom summary::-webkit-details-marker{display:none}
.web-dom-body{padding:0 0 14px;display:grid;gap:8px}
.web-dom-body p{margin:0;font-size:14px}
.web-rec{width:100%;border-collapse:collapse;font-size:13px}
.web-rec th{text-align:start;font-weight:600;color:var(--ink-3);padding:6px 8px 6px 0;white-space:nowrap}
.web-rec td{padding:6px 8px 6px 0;border-top:1px solid var(--line);vertical-align:middle}
.web-rec td:last-child{text-align:end;padding-inline-end:0}
.web-rec-val{overflow-wrap:anywhere;word-break:break-all}
.web-dom-probs{margin:0;padding-inline-start:18px;font-size:13.5px;color:var(--warn-ink,var(--ink-2))}
.web-dom-probs li+li{margin-top:4px}
/* "Set it up in Cloudflare" (web.js cfBlock): an inset block in the domain's card, the manual records
   under it; its window lists each change with its action as a chip. */
.web-cf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-tile);background:var(--violet-tint);border:1px solid var(--violet-line)}
.web-cf b{display:block;font-size:14px}
.web-cf small{display:block;color:var(--ink-2);font-size:13px;line-height:1.45;margin-top:2px}
.web-cf .st-ico{width:38px;height:38px;border-radius:11px;background:var(--card)}
.web-cf-plan{display:grid;gap:12px}
.web-cf-plan p{margin:0}
.web-cf-plan .web-rec td small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.web-cf-plan .web-rec del{color:var(--ink-3)}
.web-cf-plan .web-rec td:last-child{text-align:start}
@media (max-width:560px){.web-cf{grid-template-columns:auto minmax(0,1fr);align-items:start}.web-cf .btn{grid-column:1/-1}.web-cf-plan .web-rec th:first-child,.web-cf-plan .web-rec td:first-child{padding-inline-end:6px}}
.web-dom-add{margin-top:12px;display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.web-dom-add label{font-weight:600;font-size:14px}
.web-dom-add input{min-width:0;flex:1 1 220px}
.web-addr-card{display:flex;align-items:center;gap:14px}
/* The web as a platform (webver.js, web.js): its rows, what it is, Ploa's review, its windows. */
.web-row{display:flex;align-items:center;gap:12px;padding:12px 0;flex-wrap:wrap}
.web-row+.web-row{border-top:1px solid var(--line-soft)}
.web-row>.grow{flex:1 1 220px;min-width:0}
.web-row .grow small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px;line-height:1.45}
.web-row .cmd-line{flex:1 1 100%;margin:0}
.web-side .web-row{padding:8px 0}
.web-side .web-row>.grow{flex-basis:120px}
.web-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;padding:0;margin:8px 0 6px}
.web-kinds .bs-way{margin:0}
.wv-checks{display:grid}
.wv-ck{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:14px}
.wv-ck:first-child{border-top:0}
.wv-ck b{font-weight:500}
.wv-ck .grow{min-width:0}
.wv-ck small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:1px;overflow-wrap:anywhere}
.wv-ck .ck{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--live-soft);color:var(--live-ink);font-weight:700;font-size:12px}
.wv-ck .ck .i{width:12px;height:12px}
.wv-ck.warn .ck{background:var(--amber-soft);color:var(--amber)}
.wv-ck.block .ck{background:var(--rose-soft);color:var(--rose)}
.wv-steps{display:flex;gap:6px;margin:0 0 14px;font-size:12.5px;color:var(--ink-3)}
.wv-steps b{font-weight:500;color:var(--violet)}
.wv-tbl,.host-tbl{width:100%;border-collapse:collapse;font-size:14px}
.wv-tbl td{padding:9px 6px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.wv-tbl td:first-child{color:var(--ink-3);width:30%}
.wv-tbl tr:last-child td,.host-tbl tr:last-child td{border-bottom:0}
.host-tbl th{font-weight:500;color:var(--ink-3);font-size:12.5px;text-align:start;padding:6px 8px;border-bottom:1px solid var(--line-soft)}
.host-tbl td{padding:10px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.host-tbl td small{display:block;color:var(--ink-3);font-size:12.5px}
.wv-area{width:100%;min-height:80px;border-radius:12px;border:1px solid var(--line);padding:10px 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);resize:vertical}
.wv-note{font-size:13px;margin-top:8px}
.wv-row{gap:10px}
.wv-row .grow small{display:block;color:var(--ink-3);font-size:12.5px}
.vfact b .vr-ico{display:none}
.store-col[data-store=web] .sec-card-h h2 .i{margin-inline-end:6px}
@media (max-width:760px){.web-kinds{grid-template-columns:1fr}.wv-tbl td:first-child{width:auto}}

.web-addr-card .grow{flex:1;min-width:0}
.web-addr-card b{display:block;font-size:17px;letter-spacing:-.015em}
.web-addr-card small{display:block;margin-top:2px}
.web-addr-card+.web-how,.web-addr-card~.msg,.web-addr-card~.note{margin-top:14px}
/* App settings › Web: one even gap between its cards, whatever each says (some sat flush, 2026-11-06). */
[data-web-part]{display:flex;flex-direction:column;gap:14px}
[data-web-part] > *{margin-top:0!important;margin-bottom:0!important}
@media (max-width:640px){.web-start .web-new>.btn{margin-top:0;width:100%}.web-addr-card{flex-wrap:wrap}.web-addr-card .grow{flex:1 1 55%}}
/* A store's app that is one already here, under another ID: joined to it from its tile. */
.found-join{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-8px 18px 18px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-3)}
.found-join select{flex:1 1 120px;min-width:0;height:34px;font-size:13.5px}
.found-join label{width:100%}
/* The app's own website: its address, with the store details' website offered above the field. */
.web-own{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;width:100%;margin-top:4px}
.web-own .field{flex:1 1 320px;margin:0}
.web-suggest{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.web-suggest[hidden]{display:none}
.web-suggest-pick{border:0;cursor:pointer;font:inherit;font-size:13px}
.web-suggest-pick:hover{box-shadow:0 0 0 1.5px var(--violet)}
.web-own-card{margin-top:14px}
.web-own-set{display:grid;gap:14px;margin-top:0;margin-bottom:14px}
.web-own-set .web-own{padding-top:14px;border-top:1px solid var(--line-soft)}

/* One layout inside every page (not on the map). The page and its bodies are a flow: lists, tables,
   boards and notes take a whole row, and cards (.card.pad, a form or a summary) pair up two to a row
   once there's room for two, a later one coming up beside an earlier one; a card left without a
   partner keeps the same width. Tiles, whatever they are, sit on one grid: a fixed set (a stage's pages,
   Security's parts, the store connections) shares one row while it fits, a collection (apps, the
   Settings hub) keeps its tiles at one size and adds them to the row as the screen widens. */
:is(#view,#set-body,#sec-body,#view>div:not([class]):not([id]):not([hidden])){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(var(--card),calc((100% - var(--gap)) / 2))),1fr));grid-auto-flow:row dense;gap:var(--gap);align-items:stretch}
:is(#view,#set-body,#sec-body,#view>div:not([class]):not([id]):not([hidden]))>:is(.btn,button,a:not(.card)){justify-self:start}
:is(#view,#set-body,#sec-body,#view>div:not([class]):not([id]):not([hidden]))>*{grid-column:1/-1;min-width:0;margin-block:0}
:is(#view,#set-body,#sec-body,#view>div:not([class]):not([id]):not([hidden]))>.card.pad{grid-column:1/-1}
.map-mode #view{display:block}
.main :is(.st-tiles,.sec-tiles,.cx-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tile)),1fr));gap:var(--gap)}
.main :is(.apps,.set-tiles:not(.sec-tiles)){grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tile)),1fr));gap:var(--gap)}
/* Get started's steps are tiles on the same grid, once there's room: the next step, then the rest,
   a row at a time. On a phone they stay a list. */
@media (min-width:701px){
  .main .fr-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tile)),1fr));gap:12px;margin-top:14px}
  .main .fr-steps li,.main .fr-steps li[data-mark]{flex-direction:column;gap:10px;margin:0;padding:16px;border:0;border-radius:18px;background:var(--canvas)}
  .main .fr-steps li[data-mark]{background:var(--surface)}
  .main .fr-steps li.done{opacity:.8}
  .main .fr-steps li .cmd-line{max-width:100%}
}
/* A page's own arrangement (app.js SIDES): one column, the rest of the page and then its side part,
   or the side part first where it's the first thing to do (side-first). The side's cards share a row
   when there's room. Half and half (2026-11-06) looked odd to Yoni the same day: every page is one
   column now, in the content's frame (--content). */
.main .lay{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);align-items:start}
.main .lay.side-first .lay-side{order:-1}
.main .lay-side{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))!important}
.main .lay-side>*{grid-column:auto!important}
/* The content in a frame narrower than the screen, centered; the bar and the corner stay at the
   screen's edges, and the map takes the whole screen. */
.canvas:not(.map-mode) .main>:is(#live-appr,#live,#set-shell){width:100%;max-width:var(--content);margin-inline:auto}
.main .lay-main,.main .lay-side{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);align-content:start;min-width:0}
.main .lay-main{container:lay/inline-size}
.main .lay-main>*,.main .lay-side>*{grid-column:1/-1;margin-block:0;min-width:0}
.main .lay-main :is(.apps,.set-tiles,.st-tiles,.cx-grid){grid-template-columns:repeat(3,minmax(0,1fr))}
@container lay (min-width:521px){
  .main .lay-main .set-tiles:has(>:nth-child(4):last-child),.main .lay-main .cx-grid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container lay (max-width:820px){.main .lay-main :is(.apps,.set-tiles,.st-tiles,.cx-grid){grid-template-columns:repeat(2,minmax(0,1fr))}}
@container lay (max-width:520px){.main .lay-main :is(.apps,.set-tiles,.st-tiles,.cx-grid){grid-template-columns:minmax(0,1fr)}}
/* In the long column a group of tiles is a column of rows, and Get started a list again. */
.main .lay-side .set-tiles{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.main .lay-side .set-tile{min-height:0}
.main .lay-side .fr-steps{display:block;margin-top:0}
.main .lay-side .fr-steps li,.main .lay-side .fr-steps li[data-mark]{flex-direction:row;padding:12px 0;border-radius:0;background:none;border-top:1px solid var(--line-soft);opacity:1}
.main .lay-side .fr-steps li[data-mark]{padding:12px;border:0;border-radius:16px;margin:8px 0}
@media (max-width:1100px){
  .main .lay{grid-template-columns:minmax(0,1fr)}
  .main .lay.side-first .lay-side{order:-1}
}
.main .lay-side :is(.how-grid,.halves,.grid2){grid-template-columns:minmax(0,1fr)}

/* Dark: the logo's tentacles and wordmark in light ink, the build terminal ringed so it parts from
   the dark canvas. */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  & img[src^="/mark.svg"]{content:url(/mark-dark.svg)}
  & img[src^="/logo.svg"]{content:url(/logo-dark.svg)}
  & img[src^="/wordmark.svg"]{content:url(/wordmark-dark.svg)}
  & :is(.term,.console){box-shadow:0 0 0 1px var(--line)}
}}
:root[data-theme=dark]{
  & img[src^="/mark.svg"]{content:url(/mark-dark.svg)}
  & img[src^="/logo.svg"]{content:url(/logo-dark.svg)}
  & img[src^="/wordmark.svg"]{content:url(/wordmark-dark.svg)}
  & :is(.term,.console){box-shadow:0 0 0 1px var(--line)}
}

/* What now, the top of the home page (flows review, 2026-11-06): what waits for you beside what's on
   its way; one column on a phone. */
.now-grid{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gap);margin-bottom:28px;align-items:start}
.now-grid.one{grid-template-columns:minmax(0,1fr)}
.now-col .col-h{display:flex;align-items:center;gap:8px;margin:0 2px 10px}
.now-col .count{font-size:13px;color:var(--ink-3)}
.now-list .req{padding:14px 16px}
.now-cards{display:grid;gap:10px;margin-top:10px}
.now-col .now-cards:first-of-type{margin-top:0}
.now-more{display:inline-block;margin-top:10px;font-size:13.5px;color:var(--violet-ink)}
@media (max-width:900px){.now-grid{grid-template-columns:1fr}}

/* A platform's or agent's mark beside its name (web/brands.svg), in the text's own color. */
.bi{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.14em;margin-inline-end:.35em;fill:currentColor}
.bn{white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.agent .bi{margin-inline-end:0}

/* Fixed slots (app.js slotList, slotRow): the store cards on Release and Testing are the same for
   every app. A list keeps room for its rows whatever it holds, each row is one height with its two
   lines cut to fit, and the foot ("All (n)", a card's one other link) is always there. A row opens
   its window; what it needs said is one short link in its second line. */
:root{--slot-h:62px}
.slot-list{display:flex;flex-direction:column}
.sec-card .slot-list>.list{margin:6px -20px 0}
.slot-list.slots-2>:is(.list,.slot-empty){height:calc(2 * var(--slot-h))}
.slot-list.slots-3>:is(.list,.slot-empty){height:calc(3 * var(--slot-h))}
.slot-list.slots-5>:is(.list,.slot-empty){height:calc(5 * var(--slot-h))}
.slot-list>.list{box-sizing:border-box}
.slot-empty{display:grid;place-items:center;margin:6px 0 0;padding:0 20px;box-sizing:border-box}
.slot-row{height:var(--slot-h);box-sizing:border-box;overflow:hidden;cursor:pointer;align-items:center}
.slot-row.ship-row{align-items:center}
.slot-row>.done-mark,.slot-row>.state-mark,.slot-row>.chip{margin-top:0}
.slot-row .grow>b,.slot-row .grow>small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-row>.chip{flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-row{border-radius:12px}
.slot-row:hover{background:var(--hover)}
/* Inside a coloured block (the version with App Review or Play: blue, green, amber, red) a row's hover
   is a soft white over the block's colour, rounded, not the page's grey square (Yoni, 2026-11-07). */
.ar-now .slot-row,.ar-now .item.linked{position:relative}
.ar-now .slot-row>*,.ar-now .item.linked>*{position:relative;z-index:1}
.ar-now .slot-row:hover,.ar-now .item.linked:hover{background:transparent}
.ar-now .slot-row:hover::before,.ar-now .item.linked:hover::before{content:"";position:absolute;inset:4px 6px;border-radius:12px;background:var(--hover);z-index:0}
.slot-row:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.slot-foot{display:flex;align-items:center;gap:10px;height:34px;padding-top:4px}
.slot-all{margin-inline-start:auto;font-size:13px;font-weight:600;color:var(--violet-ink)}
.slot-all:hover{text-decoration:underline}
.slot-why{font-size:12.5px;font-weight:600;color:var(--violet-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.slot-why.fail{color:var(--rose)}
.slot-why.wait{color:var(--amber)}
button.slot-why:hover{text-decoration:underline}
.slot-i{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;color:var(--violet-ink)}
.slot-i:hover{background:var(--hover)}
.slot-i .i{width:16px;height:16px}
.slot-full{margin:0 -20px}
.slot-full .item{border-top:0}
.slot-acts{display:flex;gap:8px;margin-top:14px}
/* A row's window: the row in a framed block, what belongs to it under it at the body's width, then
   the way to its build; the body's gap is the only space between them. */
.pop-dlg .rd-body>.slot-full{margin:0;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
.pop-dlg .rd-body>.slot-full>.item{padding:14px 16px}
.pop-dlg .rd-body>.sub-cause{margin:0;max-width:none}
.pop-dlg .rd-body>.slot-acts{margin-top:0}
.slot-says{margin:0;color:var(--ink-2);line-height:1.5}
.slot-none{height:var(--slot-h);box-sizing:border-box;align-items:center}

/* The review card's parts, each as tall in every state: the version, its status (two lines and one
   short line), how it's released (one line, its note behind ⓘ), the buttons (two rows' room). */
.ar-now>.list{margin:0 -12px}
.ar-status{display:flex;flex-direction:column;gap:2px;height:64px;overflow:hidden;padding-inline-start:34px;box-sizing:border-box}
.ar-status .ar-says{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;max-width:none}
.ar-status .ar-time{margin:0;min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-rel{flex-wrap:nowrap;height:40px;margin:0;overflow:hidden;white-space:nowrap}
.ar-rel-seg{min-width:0;flex:0 1 auto}
.ar-rel-seg button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-rel-when{overflow:hidden;text-overflow:ellipsis}
.ar-acts{height:84px;box-sizing:border-box;flex-wrap:wrap;align-content:center;align-items:center;overflow:hidden;padding-block:6px 10px}
.ar-idle{font-size:13px;color:var(--ink-2)}
.ar-pending{text-decoration:none}
.ar-foot{display:flex;flex-direction:column}
.ar-foot>.sub-h{margin-top:14px}

/* Testing: the status line at the top of each list, always there and as tall. */
.t-list{--slot-h:58px}
.tb-slot{display:flex;align-items:center;gap:12px;height:52px;box-sizing:border-box;margin-top:12px;padding-inline:14px 10px;border-radius:14px;font-size:13px;line-height:1.4;background:var(--sunken);color:var(--ink-3);overflow:hidden}
.tb-slot.act{background:var(--violet-soft);color:var(--violet-ink)}
.tb-slot.ok{background:var(--live-soft);color:var(--live-ink)}
.tb-slot>.i{flex:none;width:16px;height:16px}
.tb-slot .grow{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tb-slot .btn{flex:none}
.sum-box>span{min-height:16px}
.tst-link{overflow-wrap:anywhere;padding:10px 12px;border-radius:10px;background:var(--canvas)}

/* The store's card on top: its name, two lines under it and the language line, always there. */
.now-sub{min-height:2.8em}
.now-lang{min-height:17px}
.now-app{height:114px;box-sizing:border-box}
.now-app b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-box{height:88px;box-sizing:border-box;overflow:hidden}
.sum-box b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-acts{flex-wrap:nowrap;overflow:hidden}
.sum-acts .btn{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* These rows clip what overflows, so a white button's frame is drawn inside it: drawn outside (the
   usual ring), the row cut it on the button at its edge. */
.sum-acts .btn.quiet,.ar-acts .btn.quiet{box-shadow:inset 0 0 0 1px var(--line)}
/* A label too long for the row ends in an ellipsis inside its frame, at its own end (Play Console in
   Hebrew too); the first, main action keeps its whole label. */
.sum-acts .btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.sum-acts .btn.primary{flex-shrink:0}
/* In narrow columns (three stores side by side) nothing wraps to a second line: it is cut instead. */
.store-tiles .store-col .sec-card-h{flex-wrap:nowrap}
.store-tiles .store-col .sec-card-h h2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-tiles .store-col .sec-card-h>:not(h2){flex:none}
.store-tiles .store-col .sum-card .sum-acts .btn,.store-tiles .store-col .ar-card .ar-acts .btn{white-space:nowrap}
.store-tiles .store-col .sum-card .sum-box span{white-space:nowrap}
.now-box{height:72px;box-sizing:border-box;overflow:hidden}
/* A store's column is as wide as its share: text cut to one line never widens it. */
.store-tiles.aligned > .store-col{grid-template-columns:minmax(0,1fr)}
.slot-row{padding-block:10px}
.store-tiles .store-col .slot-row :is(.src,.chip,.vb,.tf-state,bdi),.store-tiles .store-col .t-row :is(.src,.chip,.vb,bdi){white-space:nowrap}
.store-tiles .store-col .slot-row>.chip{max-width:42%;overflow:hidden;text-overflow:ellipsis}
.store-tiles .store-col .ar-rel .ar-rel-seg button{white-space:nowrap;padding-inline:10px}
.slot-row,.slot-row.ship-row{flex-wrap:nowrap}
@media (max-width:640px){.slot-row,.slot-row.ship-row{flex-wrap:nowrap;padding-inline:16px}.store-tiles .store-col .ar-rel .ar-rel-seg button{padding-inline:8px}}
@media (max-width:640px){.slot-row>.grow{flex:1 1 auto;min-width:0}.slot-row>.chip{order:0;margin-inline-start:0}}

/* Notices (with the approvals): the same rows as a request, read-only. The state mark leads the
   title, the store's or builder's own words sit under it, and an unread one carries "New". */
.req.notice .what b{display:flex;align-items:flex-start;gap:8px}
.req.notice .what b>:is(.state-mark,.done-mark){margin-top:1px}
.req.notice .nt-body{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.req.notice .what small{margin-top:4px}
.req.notice:not(.unread) .what b{font-weight:400;color:var(--ink-2)}
.req.notice .acts{align-items:center}
/* The whole row opens what it's about; the tick at its start closes it for this person. */
.req.notice.nt-link{cursor:pointer}
.req.notice.nt-link:hover .what b{color:var(--violet)}
.req.notice.nt-link:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.req.notice .nt-tick{flex:none;align-self:center;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-strong);background:var(--surface);color:transparent;transition:background .15s,color .15s,border-color .15s}
.req.notice .nt-tick .i{width:15px;height:15px}
.req.notice .nt-tick:hover,.req.notice .nt-tick:focus-visible{border-color:var(--live);color:var(--live)}
.notices.card.pad{padding-block:4px}
.nt-push{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.nt-push>.i{flex:none;color:var(--violet-ink)}
.nt-email{margin-top:16px}
.nt-email h3{margin:0 0 4px;font-size:16px}
.nt-email .tb-grid{margin-top:14px}
@media (max-width:640px){.req.notice .acts{width:100%;justify-content:flex-end}}

/* The release switch is a pill wherever it is: never stretched by the store columns' wide switches
   (.store-col .seg), and set apart from the block's own colour. */
.store-tiles .store-col .ar-rel .ar-rel-seg{display:inline-grid;grid-template-columns:repeat(2,minmax(0,max-content));width:auto;min-width:0;max-width:100%;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.ar-now .ar-rel-seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
/* The store's card is a grid of one column: sized by its content, the release switch's chosen option
   (which doesn't shrink) made the column, and the colored block in it, wider than the card. */
.store-tiles .store-col :is(.ar-card,.sum-card){grid-template-columns:minmax(0,1fr)}
/* In the colored block, the lines under the build start at the block's own edge, under the build's
   mark, not indented to its text: the indent was empty space, and the release switch needs it. */
.ar-now :is(.ar-status,.ar-rel,.ar-acts,.ar-wait){padding-inline-start:0}

/* No version with the store's review yet: one designed block in place of the version's parts. Beside
   another store's column it is as tall as those parts; alone, it is as tall as it needs. */
.ar-empty{display:flex;align-items:center;gap:14px;min-height:calc(var(--slot-h) + 64px + 40px + 84px);padding:16px 6px;box-sizing:border-box}
.ar-empty-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.ar-empty-ico .slogo{width:20px;height:20px;margin:0}
.ar-empty .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ar-empty b{font-size:15px;font-weight:600;color:var(--ink)}
.ar-empty p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:62ch}
.ar-empty-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}

/* One store's column alone (app.js alignTiles data-stores): the same parts, without the room kept to
   line up with another store's column. Lists hold what they have, empty states are one line. */
.store-tiles[data-stores="1"] .slot-list>:is(.list,.slot-empty){height:auto}
.store-tiles[data-stores="1"] .slot-empty{padding:14px 20px;text-align:start;place-items:start}
.store-tiles[data-stores="1"] .slot-empty::before{display:none}
.store-tiles[data-stores="1"] .slot-foot:not(:has(*)){height:0;padding:0}
.store-tiles[data-stores="1"] .ar-status{height:auto;min-height:0;padding-block:2px 6px}
.store-tiles[data-stores="1"] .ar-rel{height:auto;padding-block:4px}
.store-tiles[data-stores="1"] .ar-acts{height:auto;padding-block:6px 14px}
.store-tiles[data-stores="1"] .ar-empty{min-height:0}
.store-tiles[data-stores="1"] .now-sub{min-height:0}
/* A store's column header opens the store's own page of Testing or Release (app.js storeHead). */
.store-col-h:has(> .store-col-a){padding:0}
.store-col-a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:8px 12px;border-radius:13px;color:inherit;text-decoration:none}
.store-col-a:hover{background:var(--hover)}
.store-col-a .plist{margin-inline-start:auto}
.store-col-fit{width:16px;height:16px;flex:none;color:var(--ink-3)}
.store-col-a:not(:has(.plist)) .store-col-fit{margin-inline-start:auto}
/* The same, as a small button at the end of each card's heading in those columns (app.js platLinks). */
.sec-card-h:has(> .sec-fit){justify-content:flex-start}
.sec-card-h:has(> .sec-fit) > h2{margin-inline-end:auto}
.sec-fit{width:32px;height:32px;border-radius:10px;flex:none}
.sec-fit .i{width:16px;height:16px}
/* A store's own page: every row in its lists; a full card takes the whole width (data-wide, app.js
   platFit), light ones share a row in halves, filling gaps; one column on a phone. */
.plat-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense;gap:14px;align-items:stretch}
.plat-page > *{margin-top:0!important;min-width:0}
.plat-page > [data-wide]{grid-column:1 / -1}
@media (max-width:860px){.plat-page{grid-template-columns:minmax(0,1fr)}}
/* The agent's button under content (a form, a list, a paragraph, a button) keeps room above it and never
   touches what's over it; in a heading or a row of buttons it sits beside them as before. */
* + .gh2-ask:not(.gh2-task .gh2-ask, .gh2-connect .gh2-ask, .gh2-link .gh2-ask){margin-top:14px}
:is(p, form, ul, ol, .list, .field, details, table, textarea, section, a.btn.wide) + .ask-agent{margin-top:14px}