: on phones each row becomes a card, every cell labelled by its data-label (Adam's phone, 30 Oct 2026: the
five-column visit table ran off the screen and wrapped one word per line) */
@media (max-width:640px){
table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
table.cards tr.cards-head{display:none}
table.cards tr{padding:10px 14px;border-bottom:1px solid var(--line-soft)}
table.cards td{padding:3px 0;border:0}
table.cards td[data-label]::before{content:attr(data-label);display:inline-block;min-width:72px;margin-right:8px;font-size:var(--fs-xs);
text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted)}
table.cards td:empty{display:none}
table.cards tr:last-child{border-bottom:0}
table.cards tbody tr:hover td{background:transparent} /* a tap leaves :hover on; it would stripe the card */
/* any other wide table scrolls sideways inside its own box: the page is clipped (html overflow-x:clip), so columns past the
edge could not be reached at all (polish #69, 3 Nov 2026) */
table:not(.cards):not(.table-sticky){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table:not(.cards):not(.table-sticky)>tbody:only-child{display:table;width:100%} /* a narrow table still fills its box */
}
.empty p{margin:4px 0 12px}
#map{height:460px;border-radius:var(--radius);border:1px solid var(--line)}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px}
.pin{width:26px;height:26px;border-radius:50%;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 1px 4px #0006}
/* logo + wordmark lockup (templates/brand/_lockup.html) for public pages */
.lockup{display:inline-flex;align-items:center;gap:10px;font-size:18px}.lockup svg{width:36px;height:36px;flex:none}
.pub-head{display:flex;justify-content:center;padding:28px 16px 0}.legal-head{margin-bottom:18px}
/* signed-out pages (login, signup, MFA, password reset): brand panel + form */
.auth{max-width:420px;margin:8vh auto;padding:0 16px}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.auth-brand{position:relative;overflow:hidden;background:var(--panel-bg);color:var(--panel-ink);padding:44px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.auth-brand a{color:inherit}
.auth-logo{display:flex;align-items:center;gap:12px;font-size:22px;text-decoration:none!important}
.auth-logo svg{width:44px;height:44px;flex:none}
.auth-pitch{position:relative;z-index:1;max-width:440px}
.auth-pitch h2{font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;color:var(--panel-ink)}
.auth-pitch p{font-size:17px;color:var(--panel-sub);margin:0 0 18px}
.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--panel-ink);font-weight:500}
.auth-points li{display:flex;gap:10px;align-items:center}
.auth-points li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.auth-foot{position:relative;z-index:1;font-size:var(--fs-sm);color:var(--panel-sub)}
.auth-deco{position:absolute;right:-70px;bottom:-60px;width:360px;height:360px;opacity:.09;pointer-events:none}
.auth-main{display:flex;flex-direction:column;justify-content:center;padding:32px 20px;background:var(--bg)}
/* the logo ring (templates/brand/_orbit.html, 28 Oct): each platform pops up with its name, flies to its place clockwise from the top (2s each),
then the names take turns lighting up. CSS only. Reduced motion: the global rule below stops the animations, so the resting state IS the
finished ring, and the list of names shows instead. */
.orbit{margin:0;position:relative;z-index:1;align-self:center;width:min(100%,420px,50vh)}
.orbit-stage{position:relative;aspect-ratio:1/1}
.orbit-logo{--m1:#0B2A5B;--m2:#1D4ED8;--m3:#0EA5E9;--m4:#5CC4FA;position:absolute;inset:25%;border-radius:50%;background:#fff;display:grid;
place-items:center;animation:orbit-dim 17s ease both}
.orbit-logo svg{width:94%;height:94%}
.orbit-b{--x:calc(50% + 41% * cos(var(--i) * 45deg - 90deg));--y:calc(50% + 41% * sin(var(--i) * 45deg - 90deg));position:absolute;left:var(--x);top:var(--y);
width:14%;aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.16);
transform:translate(-50%,-50%);animation:orbit-fly 2s cubic-bezier(.3,0,.2,1) calc(.6s + var(--i) * 2s) both,
orbit-pulse 20s ease calc(17.2s + var(--i) * 2.5s) infinite}
.orbit-b:nth-of-type(4n+1){--c:#1D4ED8}.orbit-b:nth-of-type(4n+2){--c:#0EA5E9}.orbit-b:nth-of-type(4n+3){--c:#2F5FD6}.orbit-b:nth-of-type(4n){--c:#0284C7}
.orbit-b svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.orbit-names{position:relative;height:1.5em;margin-top:8px;text-align:center;font-size:22px;font-weight:750;letter-spacing:-.01em;color:#fff}
.orbit-names span{position:absolute;inset:0;opacity:0;animation:orbit-name 2s ease calc(.6s + var(--i) * 2s) both,
orbit-name-idle 20s ease calc(17.2s + var(--i) * 2.5s) infinite}
.orbit-names em{display:none;font-style:normal;font-size:var(--fs-sm);font-weight:500;color:var(--panel-sub)}
.orbit-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes orbit-fly{
0%{left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.3)}
10%,62%{left:50%;top:50%;opacity:1;transform:translate(-50%,-50%) scale(2.6)}
90%{left:var(--x);top:var(--y);opacity:1;transform:translate(-50%,-50%) scale(.92)}
100%{left:var(--x);top:var(--y);opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes orbit-pulse{0%,13%,100%{transform:translate(-50%,-50%) scale(1)}2%,10%{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 0 4px rgba(255,255,255,.55)}}
@keyframes orbit-dim{0%,94%{opacity:.2}100%{opacity:1}}
@keyframes orbit-name{0%{opacity:0;transform:translateY(6px)}10%,64%{opacity:1;transform:none}76%,100%{opacity:0}}
@keyframes orbit-name-idle{0%,12.5%,100%{opacity:0}2%,10%{opacity:1}}
@media (prefers-reduced-motion:reduce){.orbit-names{height:auto}.orbit-names em{display:block}}
@media (min-width:861px){
/* the panel stays in view while a long form (sign-up) scrolls, so there is no empty navy below the ring */
.auth-brand{justify-content:flex-start;position:sticky;top:0;height:100vh;align-self:start}
.auth-brand .auth-logo{justify-content:center;font-size:28px}
.auth-brand .auth-logo > svg{display:none} /* the big ring below is the logo here */
.auth-brand .auth-foot{margin-top:auto}
}
@media (min-width:861px) and (max-height:880px){
.auth-brand{padding:26px 40px;gap:16px}
.orbit{width:min(100%,340px,38vh)}
.orbit-names{font-size:18px;margin-top:4px}
.auth-pitch h2{font-size:26px;margin-bottom:8px}
.auth-pitch p{font-size:15px;margin-bottom:10px}
.auth-points{gap:6px;font-size:14px}
}
@media (max-width:860px){ /* phones: the finished ring, small and still, under the logo bar; the form stays near the top */
.auth-brand{flex-wrap:wrap;justify-content:center}
.orbit{flex:0 0 100%;width:auto;display:flex;justify-content:center}
.orbit-stage{width:150px}
.orbit-logo,.orbit-b,.orbit-names span{animation:none!important}
.orbit-names{display:none}
}
.auth-shell .auth{width:100%;max-width:440px;margin:0 auto;padding:0}
.auth-shell .auth h1{font-size:var(--fs-2xl);margin-bottom:6px}
.auth-shell .auth .card{padding:22px;box-shadow:var(--shadow-md)}
.auth-shell .auth .btn:not(.small){width:100%}
@media (max-width:860px){
main{padding:18px}
.auth-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.auth-brand{padding:18px 20px;flex-direction:row;align-items:center}
.auth-pitch,.auth-foot,.auth-deco{display:none}
.auth-main{justify-content:flex-start;padding:24px 16px 40px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* print stays plain: neutral light tokens, no shadows, no shell */
@media print{
:root{--bg:#fff;--card:#fff;--sunk:#f3f3f3;--hover:#fff;--line:#bbb;--line-soft:#ddd;--ink:#000;--muted:#444;--link:#000;--shadow-sm:none;--shadow-md:none;--panel-bg:#fff}
body{background:#fff;color:#000}
.noprint{display:none}main{padding:0}
.card,table{box-shadow:none}
a{color:#000;text-decoration:underline}
}
/* flag chips (apps.fields): colour + contrast-safe text are set inline from validated hex values */
.flagchips{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.flagchip{display:inline-block;padding:1px 7px;border-radius:var(--radius-pill,999px);font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.02em;white-space:nowrap;border:1px solid rgba(0,0,0,.12)}
.ca-flagwrap{display:inline-flex;align-items:center;gap:2px;margin-right:6px}
.ca-flagwrap .ca-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.flagrow{margin:0 0 8px}
.flagpicker summary{cursor:pointer;color:var(--link);font-size:var(--fs-sm)}
.flagpicker label{margin:4px 0}
.pv-row{margin-bottom:12px}
/* A setup step (or any link with #spot) lands on the exact field: keep it clear of the top bar and show it for a moment. */
:target{scroll-margin-top:90px;animation:pca-spot 2.4s ease-out 1}
@keyframes pca-spot{0%,40%{outline:3px solid #f59e0b;outline-offset:4px;border-radius:6px}100%{outline:3px solid transparent;outline-offset:4px}}
/* On/off switch (Peanut agents): green track = on, grey = off. A real