/* Pocket: Super Admin's look on a phone. Tokens and shapes copied from super_admin/public/assets/admin.css
   (colors, type, card, telemetry block, status dots) so Pocket never depends on Super Admin's files. */
:root{color-scheme:light;--color-canvas:#f3f2ef;--color-surface:#fff;--color-surface-muted:#f8f8f6;--color-border:#e5e7e6;--color-border-strong:#d4dadb;--color-text:#1a232b;--color-text-muted:#69747b;--color-accent:#bd2737;--color-success:#16805a;--color-warning:#ae741b;--color-danger:#b83b45;--faint:#9aa3a8;--accent-strong:#a91b2d;--amber-soft:#fff3db;--red-soft:#ffebed;--shadow:0 12px 36px rgba(18,35,43,.035);--surface-masthead:#171412;--shell-separator:#2d3a43;--sidebar-ink:#e8edee;--sidebar-muted:#88969d;--sidebar-accent:#ff7180;--telemetry-title:#7D1128;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--type-body-size:16px;--type-body-line:1.5;--type-small-size:14px;--type-small-line:1.45;--type-metadata-size:12px;--font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--control-radius:5px;--card-padding:20px;--card-radius:8px;--card-accent-width:3px}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--color-canvas:#10171d;--color-surface:#19232b;--color-surface-muted:#202c35;--color-border:#2d3b44;--color-border-strong:#40515a;--color-text:#eaf0f0;--color-text-muted:#a4b0b5;--color-accent:#e15c69;--color-success:#50c995;--color-warning:#e7ae4f;--color-danger:#f07179;--faint:#77878e;--accent-strong:#f07680;--amber-soft:#403425;--red-soft:#472c32;--shadow:0 16px 40px rgba(0,0,0,.11);--telemetry-title:var(--color-accent)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--color-canvas);color:var(--color-text);font-family:var(--font-ui);font-size:var(--type-body-size);line-height:var(--type-body-line);-webkit-font-smoothing:antialiased}

/* Masthead: the Super Admin header band, under the phone's status bar. */
.pocket-masthead{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:calc(var(--space-md) + env(safe-area-inset-top)) max(calc(var(--space-lg) + env(safe-area-inset-right)),calc((100% - 980px) / 2 + var(--space-md))) var(--space-md) max(calc(var(--space-lg) + env(safe-area-inset-left)),calc((100% - 980px) / 2 + var(--space-md)));background:var(--surface-masthead);color:var(--sidebar-ink);border-bottom:1px solid var(--shell-separator)}
.pocket-brand{display:grid;gap:2px;min-width:0}
.pocket-caption{color:var(--sidebar-accent);font-size:var(--type-metadata-size);font-weight:800;letter-spacing:.12em;line-height:1.2}
.pocket-name{margin:0;font-size:22px;font-weight:700;line-height:1.2}
.pocket-refresh{display:grid;justify-items:end;gap:2px;min-width:44px;min-height:44px;padding:var(--space-xs) var(--space-sm);border:1px solid transparent;border-radius:var(--control-radius);background:transparent;color:var(--sidebar-muted);font:inherit;font-size:var(--type-metadata-size);line-height:1.2;cursor:pointer}
.pocket-refresh__time{color:var(--sidebar-ink);font-size:var(--type-small-size);font-weight:600;font-variant-numeric:tabular-nums}
.pocket-refresh:focus-visible{outline:2px solid var(--sidebar-accent);outline-offset:2px}
.pocket-refresh[aria-busy=true]{opacity:.6}
html[data-offline=true] .pocket-refresh__time{color:var(--sidebar-accent)}

/* Content: one column on a phone, two from desktop width. */
.pocket-main{width:100%;max-width:980px;margin:0 auto;padding:var(--space-lg) calc(var(--space-md) + env(safe-area-inset-right)) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-left))}
.pocket-region{display:grid;gap:var(--space-md)}
@media (min-width:860px){.pocket-region{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--space-lg)}.pocket-banner,.pocket-card--attention{grid-column:1/-1}}
.pocket-footer{padding:0 var(--space-lg) calc(var(--space-xl) + env(safe-area-inset-bottom));color:var(--faint);font-size:var(--type-metadata-size);text-align:center}

/* Card: Super Admin's shape (accent top edge, 8px radius, 20px padding). */
.card{display:flex;flex-direction:column;min-width:0;padding:var(--card-padding);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-top:var(--card-accent-width) solid var(--color-accent);border-radius:var(--card-radius);box-shadow:var(--shadow)}
.pocket-card{gap:var(--space-sm)}
.pocket-card[data-state=stale]{border-top-color:var(--color-warning)}
.pocket-card[data-state=failed]{border-top-color:var(--color-danger)}

/* Block titles and rows: the masthead Telemetry Block. */
.pocket-title{margin:0;color:var(--telemetry-title);font-size:var(--type-small-size);font-weight:800;letter-spacing:.12em;line-height:1.2}
.pocket-head{display:grid;grid-template-columns:minmax(0,1fr) 6.5em 3.2em;align-items:baseline;gap:var(--space-md)}
.pocket-column{color:var(--faint);font-size:var(--type-metadata-size);font-weight:600;text-align:right;white-space:nowrap}
.pocket-rows{display:grid;gap:4px;margin:0}
.pocket-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--space-md);font-size:var(--type-body-size);line-height:1.35}
.pocket-rows--columns .pocket-row{grid-template-columns:minmax(0,1fr) 6.5em 3.2em}
.pocket-row dt{color:var(--color-text-muted);font-weight:500}
.pocket-row dd{margin:0;min-width:0;font-variant-numeric:tabular-nums;font-weight:600;text-align:right;overflow-wrap:anywhere}
.pocket-asof{margin:var(--space-xs) 0 0;color:var(--faint);font-size:var(--type-metadata-size);letter-spacing:.04em}
.pocket-badge{display:inline-block;margin-right:var(--space-xs);padding:1px 6px;border-radius:999px;background:var(--amber-soft);color:var(--color-warning);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pocket-empty,.pocket-note{margin:0;color:var(--color-text-muted);font-size:var(--type-small-size)}

/* Status lights: the Domain Health dots. */
.pocket-light{display:flex;align-items:flex-start;gap:9px;margin:0;font-size:var(--type-body-size);line-height:1.35}
.pocket-light .dot{display:inline-block;width:9px;height:9px;margin-top:6px;border-radius:50%;flex:none;background:var(--faint)}
.pocket-light[data-state=healthy] .dot{background:var(--color-success)}
.pocket-light[data-state=warning] .dot{background:var(--color-warning)}
.pocket-light[data-state=failed] .dot{background:var(--color-danger)}
.pocket-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.pocket-list--detail{padding-left:18px}
.pocket-list--detail .pocket-light{color:var(--color-text-muted);font-size:var(--type-small-size)}
.pocket-list--detail .pocket-light .dot{width:7px;height:7px;margin-top:6px}

.pocket-banner{margin:0;padding:var(--space-md) var(--space-lg);border:1px solid var(--color-danger);border-radius:var(--control-radius);background:var(--red-soft);color:var(--color-text);font-size:var(--type-small-size)}

/* By site and all pages: native disclosure, a plain compact table. */
.pocket-details{margin-top:var(--space-xs);border-top:1px solid var(--color-border);padding-top:var(--space-sm)}
.pocket-details summary{min-height:32px;padding:4px 0;color:var(--color-text);font-size:var(--type-small-size);font-weight:600;cursor:pointer}
.pocket-details[open] summary{margin-bottom:var(--space-sm)}
.pocket-table{width:100%;border-collapse:collapse;font-size:var(--type-small-size);font-variant-numeric:tabular-nums}
.pocket-table th,.pocket-table td{padding:5px 0 5px var(--space-sm);border-bottom:1px solid var(--color-border);text-align:right;white-space:nowrap}
.pocket-table th:first-child{padding-left:0;text-align:left;font-weight:500;color:var(--color-text-muted);white-space:normal;overflow-wrap:anywhere}
.pocket-table thead th{color:var(--faint);font-size:var(--type-metadata-size);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pocket-table tr:last-child>*{border-bottom:0}

/* Sign in: Super Admin's field and primary button shapes, sized for a thumb. */
.pocket-login{max-width:420px;margin:0 auto;gap:var(--space-md)}
.pocket-field{display:grid;gap:var(--space-xs);font-size:15px;font-weight:600}
.pocket-field input{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--color-border-strong);border-radius:var(--control-radius);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:16px;font-weight:400}
.pocket-field input:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px;border-color:var(--color-accent)}
.pocket-button{min-height:44px;margin-top:var(--space-xs);padding:9px 16px;border:1px solid var(--color-accent);border-radius:var(--control-radius);background:var(--color-accent);color:#fff;font:inherit;font-size:16px;font-weight:750;cursor:pointer}
.pocket-button:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.pocket-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}