/* Generated by design/build.py. Do not edit. */
@font-face{font-family:"Bricolage Grotesque";src:url("/static/fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("/static/fonts/figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"DM Mono";src:url("/static/fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
:root{--surface:#f6f8fc;--surface-raised:#ffffff;--surface-sunken:#eceff6;--line:#dce1ea;--line-strong:#76809a;--ink:#12161f;--ink-muted:#4a5468;--pod-blue:#0a5ff5;--pod-blue-end:#5a3df0;--on-pod-blue:#ffffff;--pod-blue-tint:#e4eeff;--spark:#ff6a1a;--on-spark:#12161f;--spark-tint:#ffe8da;--success:#117a43;--success-tint:#e1f5e9;--danger:#c5221a;--danger-tint:#fde9e7;--warning:#8f4f00;--warning-tint:#fff1d6;--focus-ring:#0a5ff5;--shadow-card:0 1px 2px rgba(16, 24, 48, 0.06), 0 8px 24px rgba(16, 24, 48, 0.07);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;--radius-pod:14px;--font-display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;--font-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"DM Mono", ui-monospace, Menlo, monospace;}
@media (prefers-color-scheme:dark){:root{--surface:#10141d;--surface-raised:#1a2030;--surface-sunken:#0a0d14;--line:#293146;--line-strong:#6c7892;--ink:#eef1f7;--ink-muted:#a6b0c3;--pod-blue:#5c9dff;--pod-blue-end:#9a94ff;--on-pod-blue:#04122e;--pod-blue-tint:#142547;--spark:#ff8a4d;--on-spark:#12161f;--spark-tint:#3a2113;--success:#62d894;--success-tint:#11301f;--danger:#ff8f88;--danger-tint:#3b1a1a;--warning:#ffc266;--warning-tint:#2f2610;--focus-ring:#a6c8ff;--shadow-card:0 1px 0 rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);}}
.display-xl{font-family:var(--font-display);font-size:56px;line-height:60px;font-weight:800;letter-spacing:-0.02em;}
.display-lg{font-family:var(--font-display);font-size:40px;line-height:44px;font-weight:700;letter-spacing:-0.015em;}
.display-md{font-family:var(--font-display);font-size:28px;line-height:32px;font-weight:700;letter-spacing:-0.01em;}
.title{font-family:var(--font-body);font-size:20px;line-height:28px;font-weight:600;}
.body{font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:400;}
.body-sm{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:400;}
.label{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:600;}
.caption{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.02em;}
.code-lg{font-family:var(--font-mono);font-size:32px;line-height:40px;font-weight:500;letter-spacing:0.14em;}
.code-sm{font-family:var(--font-mono);font-size:14px;line-height:20px;font-weight:500;}
/* Component styles from the StayPuller design system. Edit here, then run design/build.py. */

.sp-icon { flex: none; }

/* Button */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5);
  border: 1.5px solid transparent; border-radius: var(--radius-md); font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease; }
.sp-btn:active { transform: translateY(1px); }
.sp-btn:focus-visible, .sp-input:focus-visible, .sp-nav a:focus-visible, .sp-drop:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-btn--primary { background: linear-gradient(135deg, var(--pod-blue) 0%, var(--pod-blue-end) 135%); color: var(--on-pod-blue); box-shadow: 0 6px 16px -6px var(--pod-blue); }
.sp-btn--primary:hover { filter: brightness(1.1); }
.sp-btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.sp-btn--secondary:hover { background: var(--surface-sunken); }
.sp-btn--quiet { background: transparent; color: var(--pod-blue); }
.sp-btn--quiet:hover { background: var(--pod-blue-tint); }
.sp-btn--danger { background: transparent; color: var(--danger); border-color: var(--line-strong); }
.sp-btn--danger:hover { background: var(--danger-tint); }
.sp-btn[disabled], .sp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.sp-btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: 17px; width: 100%; }
.sp-btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; }

/* Field */
.sp-field { display: grid; gap: var(--space-1); }
.sp-label { font: 600 14px/20px var(--font-body); color: var(--ink); }
.sp-input { min-height: 44px; padding: 0 var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-body); }
.sp-input[aria-invalid="true"] { border-color: var(--danger); }
.sp-hint { font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.sp-error { display: flex; align-items: center; gap: var(--space-1); font: 600 14px/20px var(--font-body); color: var(--danger); }

/* Status pill: color AND icon AND word, always */
.sp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); font: 600 13px/20px var(--font-body); white-space: nowrap; }
.sp-pill--ok { background: var(--success-tint); color: var(--success); }
.sp-pill--warn { background: var(--warning-tint); color: var(--warning); }
.sp-pill--bad { background: var(--danger-tint); color: var(--danger); }
.sp-pill--neutral { background: var(--surface-sunken); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }

/* Card */
.sp-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); }

/* Header */
.sp-header { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-3) var(--space-5); background: var(--surface); border-bottom: 1px solid var(--line); }
.sp-brand { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto; color: var(--ink); text-decoration: none; font: 800 22px/1 var(--font-display); letter-spacing: -0.01em; }
.sp-nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.sp-nav a:not(.sp-btn) { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 600 15px/20px var(--font-body); }
.sp-nav a:not(.sp-btn):hover { background: var(--surface-sunken); }
.sp-nav a:not(.sp-btn)[aria-current="page"] { background: var(--pod-blue-tint); color: var(--pod-blue); }

@media (max-width: 560px) {
  .sp-header { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); }
  .sp-header > .sp-inline, .sp-header > .sp-btn { order: 2; }
  .sp-header > .sp-nav { grid-column: 1 / -1; order: 3; margin: 0 calc(-1 * var(--space-3)); }
  .sp-nav a:not(.sp-btn) { padding: var(--space-2); font-size: 14px; }
}

/* Connection card */
.sp-conn { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.sp-tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--pod-blue-tint); color: var(--ink); }
.sp-conn__title { font: 600 20px/28px var(--font-body); margin: 0; }
.sp-conn__text { font: 400 14px/20px var(--font-body); color: var(--ink-muted); margin: 0; }
.sp-conn__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
@media (max-width: 560px) {
  .sp-conn { grid-template-columns: auto 1fr; }
  .sp-conn__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
}

/* Drop zone */
.sp-drop { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center; color: var(--ink);
  background: var(--pod-blue-tint); border: 2px dashed var(--pod-blue); border-radius: var(--radius-lg); cursor: pointer; }
.sp-drop__icon { color: var(--pod-blue); }
.sp-drop__title { font: 700 20px/28px var(--font-display); margin: 0; }
.sp-drop__text { font: 400 14px/20px var(--font-body); color: var(--ink); margin: 0; }
.sp-drop--over { background: var(--surface-raised); border-style: solid; box-shadow: 0 0 0 4px var(--pod-blue-tint); }
.sp-drop--error { background: var(--danger-tint); border-color: var(--danger); }
.sp-drop--error .sp-drop__icon { color: var(--danger); }

/* Device code */
.sp-code { padding: var(--space-4) var(--space-5); text-align: center; background: var(--surface-sunken); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  font: 500 32px/40px var(--font-mono); letter-spacing: .14em; color: var(--ink); user-select: all; }

/* Quiet help and status. One pattern for explanations, tips and state: a small icon that opens a short note on hover, focus or tap.
   Information is still and quiet; something underway turns; something that needs attention pulses. Never the only place for something a person must act on. */
.sp-info { position: relative; display: inline-flex; vertical-align: middle; }
.sp-info__btn { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: help; }
.sp-info__btn:hover, .sp-info.is-open .sp-info__btn { background: var(--surface-sunken); color: var(--ink); }
.sp-info__btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.sp-info__pop { display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: 50%; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: var(--space-2) var(--space-3);
  background: var(--ink); color: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); font: 400 14px/20px var(--font-body); text-align: left; transform: translateX(-50%); white-space: normal; }
.sp-info:hover .sp-info__pop, .sp-info:focus-within .sp-info__pop, .sp-info.is-open .sp-info__pop { display: block; }
.sp-info__pop a { color: inherit; text-decoration: underline; }
.sp-state--busy .sp-info__btn { color: var(--pod-blue); }
.sp-state--busy .sp-icon { animation: sp-spin 1.1s linear infinite; }
.sp-state--attention .sp-info__btn, .sp-state--problem .sp-info__btn { color: var(--warning); animation: sp-attention 1.8s ease-out infinite; }
.sp-state--problem .sp-info__btn { color: var(--danger); }
.sp-state--ok .sp-info__btn { color: var(--success); }
.sp-statelabel { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 14px/20px var(--font-body); }
.sp-statelabel .sp-info__btn { margin: -4px 0 -4px -4px; }
@keyframes sp-attention { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .sp-state--busy .sp-icon { animation: none; } .sp-state--attention .sp-info__btn, .sp-state--problem .sp-info__btn { animation: none; box-shadow: 0 0 0 2px currentColor; } }

/* Help notes: text marked data-tip becomes an info icon once the script has run; until then (or with no script) it stays as text. */
.sp-js [data-tip] { display: none; }

/* The same two motions on status pills: underway turns, needs attention pulses. Done and informational pills stay still. */
.sp-pill--busy .sp-icon { animation: sp-spin 1.1s linear infinite; }
.sp-pill--attention { animation: sp-attention 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .sp-pill--busy .sp-icon { animation: none; } .sp-pill--attention { animation: none; } }

/* A warning or failure banner keeps its words (it says what to do); its icon pulses so the eye finds it. */
.sp-alert--warn > .sp-icon, .sp-alert--bad > .sp-icon { border-radius: 50%; animation: sp-attention 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .sp-alert--warn > .sp-icon, .sp-alert--bad > .sp-icon { animation: none; } }
/* Page-level styles: base, layout, and the few shapes the components don't cover. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; }
h1 { font: 700 40px/44px var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
h2 { font: 600 20px/28px var(--font-body); }
a { color: var(--pod-blue); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
code, .sp-mono { font: 500 14px/20px var(--font-mono); }
.muted { color: var(--ink-muted); }

.sp-skip { position: absolute; left: -9999px; top: 0; padding: var(--space-2) var(--space-3); background: var(--surface-raised); color: var(--ink); z-index: 10; }
.sp-skip:focus { left: var(--space-3); top: var(--space-3); }

.sp-main { width: 100%; max-width: 640px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); display: grid; gap: var(--space-5); align-content: start; }
.sp-main--wide { max-width: 960px; }
.sp-footer { border-top: 1px solid var(--line); }
.sp-footer .sp-nav { max-width: 960px; margin: 0 auto; padding: var(--space-3) var(--space-4); }
.sp-footer .sp-nav a:not(.sp-btn) { color: var(--ink-muted); font: 500 14px/20px var(--font-body); }
.sp-inline { display: inline; margin: 0; }
.sp-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sp-stack { display: grid; gap: var(--space-4); }
.sp-lead { font: 400 20px/30px var(--font-body); color: var(--ink-muted); max-width: 34ch; }
.sp-page-title { display: grid; gap: var(--space-1); }

/* Home */
.sp-hero { display: grid; gap: var(--space-5); padding-block: var(--space-6); }
.sp-hero h1 { font-size: clamp(36px, 8vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; max-width: 14ch; }
.sp-points { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sp-point { display: grid; gap: var(--space-2); align-content: start; }
.sp-point h2 { font-family: var(--font-display); font-weight: 700; }
.sp-point p { color: var(--ink-muted); font-size: 15px; line-height: 22px; }

/* Messages */
.sp-alert { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font: 600 15px/22px var(--font-body); }
.sp-alert .sp-icon { margin-top: 2px; }
.sp-alert--ok { background: var(--success-tint); color: var(--success); }
.sp-alert--bad { background: var(--danger-tint); color: var(--danger); }
.sp-alert--warn { background: var(--warning-tint); color: var(--warning); }
.sp-alert p + p { margin-top: var(--space-2); font-weight: 400; color: var(--ink); }
.sp-alert--warn a { color: inherit; }

/* Setup steps */
.sp-steps { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.sp-step { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; }
.sp-step__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); color: var(--ink-muted); font: 700 14px/1 var(--font-body); }
.sp-step--done .sp-step__mark { background: var(--success-tint); border-color: var(--success); color: var(--success); }
.sp-step__title { font: 600 16px/24px var(--font-body); }
.sp-step__text { color: var(--ink-muted); font-size: 15px; line-height: 22px; }

/* Devices */
.sp-device { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); }
.sp-device__name { font: 600 16px/24px var(--font-body); }

/* Long text */
.sp-prose { display: grid; gap: var(--space-3); }
.sp-prose h2 { margin-top: var(--space-4); font: 700 22px/28px var(--font-display); }
.sp-prose ul { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.sp-prose .muted { font-size: 14px; }

.sp-conn__text ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.sp-card > h1 + *, .sp-card > h2 + * { margin-top: var(--space-2); }
.sp-code-wrap { display: grid; gap: var(--space-3); }

@media (max-width: 560px) {
  .sp-device { grid-template-columns: auto 1fr; }
  .sp-device > :last-child { grid-column: 1 / -1; }
  .sp-lead { font-size: 18px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .sp-btn { transition: none; } .sp-btn:active { transform: none; } }

[hidden] { display: none !important; }
.sp-qr { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.sp-qr canvas, .sp-qr img { background: #fff; padding: 10px; border-radius: var(--radius-sm); } /* a QR code needs a white ground */
.sp-meta { color: var(--ink-muted); font-size: 14px; line-height: 20px; text-align: center; overflow-wrap: anywhere; }
.sp-install { display: grid; gap: var(--space-3); }

/* Adding files from the browser */
.sp-drop__icon { display: inline-flex; color: var(--pod-blue); }
.sp-drop--over .sp-drop__icon { transform: translateY(2px); }
.sp-uploads { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.sp-uploads:empty { display: none; }
.sp-upload { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sp-upload__name { font: 600 15px/22px var(--font-body); overflow-wrap: anywhere; }
.sp-upload__meta { grid-column: 1; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.sp-upload--error .sp-upload__meta { color: var(--danger); }
.sp-upload progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: var(--pod-blue); }
.sp-upload .sp-btn { grid-column: 2; grid-row: 2; }
.sp-status { font: 600 15px/22px var(--font-body); min-height: 22px; }

/* Connections: how files flow from sources, around StayPuller, to the Storage Pod */
.sp-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sp-flowcard { display: grid; gap: var(--space-3); padding: var(--space-4); }
.sp-flowcard__note { font-size: 14px; line-height: 20px; text-align: center; max-width: 46ch; margin: 0 auto; }
.sp-flow { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; overflow: visible; }
.sp-flow text { font-family: var(--font-body); fill: var(--ink); }
.sp-flow a { cursor: pointer; }
.sp-flow a:focus-visible { outline: none; }
.sp-flow a:focus-visible .sp-flow__tile { stroke: var(--focus-ring); stroke-width: 3; }
.sp-flow__label { font: 700 11px/1 var(--font-body); letter-spacing: .12em; fill: var(--ink-muted); }
.sp-flow__label--pod { fill: var(--pod-blue); }
.sp-flow__tile { fill: var(--surface-raised); stroke: var(--line-strong); stroke-width: 1.5; }
.sp-flow__tile--primary { stroke: var(--pod-blue); stroke-width: 2.5; }
.sp-flow__node--off .sp-flow__tile { stroke-dasharray: 4 4; fill: var(--surface-sunken); }
.sp-flow__node--off .sp-flow__ico, .sp-flow__node--off .sp-flow__name { opacity: .6; }
.sp-flow__ico { color: var(--ink); }
.sp-flow__name { font: 600 12.5px/1 var(--font-body); }
.sp-flow__state { font: 600 11.5px/1 var(--font-body); fill: var(--ink-muted); }
.sp-flow__ok { color: var(--success); }
.sp-flow__ok .sp-flow__state { fill: var(--success); }
.sp-flow__wait { color: var(--ink-muted); }
.sp-flow__frame { fill: var(--pod-blue-tint); stroke: var(--pod-blue); stroke-width: 1.5; }
.sp-flow__hub { fill: var(--surface-raised); stroke: var(--pod-blue); stroke-width: 2; }
.sp-flow__hubname { font: 800 17px/1 var(--font-display); }
.sp-flow__hubsub { font: 500 12px/1 var(--font-body); fill: var(--ink-muted); }
.sp-flow__path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 7; }
.sp-flow__path--live { stroke: var(--spark); opacity: .6; }
.sp-flow__route { fill: none; stroke: none; }
.sp-flow__stub { fill: none; stroke: var(--pod-blue); stroke-width: 1.5; opacity: .5; }
.sp-flow__stubnode { fill: var(--surface-raised); stroke: var(--pod-blue); stroke-width: 1.5; }
.sp-flow__gate { fill: var(--spark); stroke: var(--surface-raised); stroke-width: 2; }
.sp-flow__sync { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 7; }
.sp-flow__sync--live { stroke: var(--pod-blue); }
.sp-flow__halo { fill: var(--spark); opacity: .28; }
.sp-flow__dot { fill: var(--spark); }
.sp-flow__pulse { fill: none; stroke: var(--pod-blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sp-pulse 3.4s ease-out infinite; }
@keyframes sp-pulse { 0% { opacity: .5; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .sp-flow__dots { display: none; } .sp-flow__pulse { animation: none; } }
.sp-conn__actions .sp-hint { max-width: 22ch; text-align: right; }
@media (max-width: 560px) { .sp-conn__actions { flex-wrap: wrap; } .sp-conn__actions .sp-hint { max-width: none; text-align: left; } .sp-flowcard { padding: var(--space-3); } }

/* Install */
.sp-platforms { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.sp-platform { display: grid; gap: var(--space-3); align-content: start; }
.sp-platform__head { display: flex; align-items: center; gap: var(--space-3); }
.sp-platform__title { font: 700 22px/28px var(--font-display); }
.sp-meta-line { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.sp-cmd { margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow-x: auto; user-select: all; }
.sp-cmd code { font: 500 14px/22px var(--font-mono); white-space: pre; }
.sp-details summary { cursor: pointer; font: 600 15px/24px var(--font-body); }
.sp-sums { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; }
.sp-sums dt { font: 600 14px/20px var(--font-body); }
.sp-sums dd { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.sp-sums code { font-size: 12px; line-height: 18px; }
.sp-badge { display: inline-block; vertical-align: middle; margin-left: var(--space-2); padding: 1px 10px; border-radius: var(--radius-pill); background: var(--warning-tint); color: var(--warning); font: 600 12px/20px var(--font-body); }

/* A card that lists things inside it (the USB drives in the USB drive card) */
.sp-subitems { grid-column: 1 / -1; list-style: none; margin: var(--space-2) 0 0; padding: 0; border-top: 1px solid var(--line); }
.sp-subitem { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.sp-subitem:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-subitem__icon { display: inline-flex; color: var(--ink-muted); }
.sp-subitem__text { display: grid; flex: 1; min-width: 0; }
.sp-subitem__name { font: 600 16px/24px var(--font-body); overflow-wrap: anywhere; }
.sp-subitem__meta { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.sp-subitem form { margin: 0; }

/* Home: a slow aurora behind the hero. Three soft blobs of light drift on different clocks, so the pattern never visibly repeats.
   Only transform and opacity animate (cheap on phones). Brand blues and a cool teal: Spark Orange stays reserved for connections. */
:root { --aurora-a: rgba(10, 95, 245, .28); --aurora-b: rgba(110, 70, 255, .22); --aurora-c: rgba(0, 190, 220, .22); }
@media (prefers-color-scheme: dark) { :root { --aurora-a: rgba(40, 110, 255, .50); --aurora-b: rgba(124, 86, 255, .42); --aurora-c: rgba(0, 200, 230, .30); } }
.sp-aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%); }
.sp-aurora span { position: absolute; border-radius: 50%; will-change: transform, opacity; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.sp-aurora__a { left: -12vw; top: -24vh; width: 78vmax; height: 52vmax; background: radial-gradient(closest-side, var(--aurora-a), transparent); animation-name: sp-aurora-a; animation-duration: 53s; }
.sp-aurora__b { right: -18vw; top: -14vh; width: 66vmax; height: 48vmax; background: radial-gradient(closest-side, var(--aurora-b), transparent); animation-name: sp-aurora-b; animation-duration: 67s; animation-delay: -21s; }
.sp-aurora__c { left: 22vw; top: 4vh; width: 60vmax; height: 34vmax; background: radial-gradient(closest-side, var(--aurora-c), transparent); animation-name: sp-aurora-c; animation-duration: 83s; animation-delay: -37s; }
@keyframes sp-aurora-a { from { transform: translate3d(-8vw, -4vh, 0) scale(1); opacity: .65; } 50% { opacity: 1; } to { transform: translate3d(18vw, 6vh, 0) scale(1.18); opacity: .8; } }
@keyframes sp-aurora-b { from { transform: translate3d(6vw, 2vh, 0) scale(1.1); opacity: .8; } 50% { opacity: .6; } to { transform: translate3d(-20vw, 10vh, 0) scale(.92); opacity: 1; } }
@keyframes sp-aurora-c { from { transform: translate3d(-14vw, 0, 0) scale(.9) rotate(-4deg); opacity: .55; } 50% { opacity: 1; } to { transform: translate3d(16vw, -3vh, 0) scale(1.12) rotate(5deg); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .sp-aurora span { animation: none; } }
@media (max-width: 560px) { .sp-aurora__c { display: none; } .sp-aurora__a { width: 120vmax; } }

/* Activity */
.sp-stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.sp-stat { display: grid; gap: var(--space-1); align-content: start; }
.sp-stat__label { color: var(--ink-muted); font: 600 13px/18px var(--font-body); text-transform: uppercase; letter-spacing: .06em; }
.sp-stat__value { font: 700 26px/32px var(--font-display); overflow-wrap: anywhere; }
.sp-stat__value--name { font-size: 18px; line-height: 24px; }
.sp-stat__note { color: var(--ink-muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.sp-log { list-style: none; margin: 0; padding: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.sp-log__row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) minmax(8em, 14em); gap: var(--space-4); align-items: start; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.sp-log__row:last-child { border-bottom: 0; }
.sp-log__time { color: var(--ink-muted); white-space: nowrap; }
.sp-log__what { display: grid; gap: 2px; min-width: 0; }
.sp-log__path { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); overflow-wrap: anywhere; }
.sp-log__meta { color: var(--ink-muted); text-align: right; overflow-wrap: anywhere; }
.sp-log__row--error .sp-log__what strong { color: var(--danger); }
.sp-live-note { font-size: 13px; text-align: right; }
@media (max-width: 640px) { .sp-log__row { grid-template-columns: 1fr; gap: 2px; } .sp-log__meta { text-align: left; } }
/* The activity check */
.sp-check__result { display: grid; gap: var(--space-4); }
.sp-finding { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-md); background: var(--surface); }
.sp-finding--problem { border-left-color: var(--danger); }
.sp-finding--watch { border-left-color: #d89b00; }
.sp-finding--note { border-left-color: var(--pod-blue); }
.sp-finding h3 { margin: 0; font: 700 16px/22px var(--font-body); }
.sp-finding p { margin: 0; }
.sp-finding ul { margin: 0; padding-left: var(--space-5); font-size: 14px; line-height: 20px; }
.sp-finding li { overflow-wrap: anywhere; }
.sp-finding__ask { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--pod-blue-tint); }
.sp-check__ai { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--pod-blue-tint); }
.sp-check__ai ul { margin: 0; padding-left: var(--space-5); }

/* ---- File sharing: the Shared Pod page, the share box and the drop tab on every page ---- */
.sp-files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.sp-file { display: grid; gap: var(--space-3); }
.sp-file__head { display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sp-file__name { display: flex; gap: var(--space-2); align-items: center; font: 600 16px/24px var(--font-body); min-width: 0; overflow-wrap: anywhere; }
.sp-file__meta { font: 500 14px/20px var(--font-body); color: var(--ink-muted); }
.sp-file__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.sp-file__note { margin: 0; padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; }
.sp-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sp-person { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.sp-section { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
.sp-section > h2 { margin: 0; }
.sp-banner { display: grid; gap: var(--space-3); background: var(--pod-blue-tint); border-radius: var(--radius-lg); padding: var(--space-5); }
.sp-banner h2 { margin: 0; }
.sp-form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; }
.sp-form-row .sp-field { flex: 1 1 260px; }
.sp-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sp-results:empty { display: none; }
.sp-result { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.sp-result__path { overflow-wrap: anywhere; min-width: 0; }
.sp-result__path small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.sp-limit { font: 500 14px/20px var(--font-body); color: var(--ink-muted); }

/* The share box (opened from the sidebar button, or by dropping a file on it) */
.sp-dialog { width: min(520px, calc(100vw - 2 * var(--space-4))); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-card); }
.sp-dialog::backdrop { background: rgba(6, 10, 22, .6); }
.sp-dialog h2 { margin: 0 0 var(--space-3); }
.sp-dialog form { display: grid; gap: var(--space-4); }
.sp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-chips:empty { display: none; }
.sp-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-1) 2px var(--space-3); background: var(--pod-blue-tint); color: var(--ink); border-radius: var(--radius-pill); font: 600 14px/22px var(--font-body); overflow-wrap: anywhere; }
.sp-chip button { border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; font: 700 16px/1 var(--font-body); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); }
.sp-chip button:hover { background: var(--surface-sunken); color: var(--ink); }
.sp-picked { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font: 500 14px/20px var(--font-body); max-height: 140px; overflow: auto; }
.sp-picked li { display: flex; gap: var(--space-2); align-items: center; }
.sp-textarea { min-height: 72px; padding: var(--space-2) var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-body); resize: vertical; }

/* A short list of good things, each with a check mark */
.sp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sp-checks li { display: flex; gap: var(--space-2); align-items: flex-start; }
.sp-checks .sp-icon { color: var(--success); margin-top: 2px; }

/* Ask StayPuller on the web */
.sp-meter { width: 100%; height: 10px; accent-color: var(--pod-blue); }
.sp-meter--over { accent-color: var(--warning); }
.sp-ask { display: grid; gap: var(--space-3); }
.sp-ask__row { display: flex; gap: var(--space-2); align-items: flex-start; }
.sp-ask__row .sp-textarea, .sp-ask__row .sp-input { flex: 1 1 auto; min-width: 0; }
.sp-ask__row .sp-textarea { min-height: 48px; }
.sp-ask__row { align-items: center; }
.sp-ask__row .sp-textarea ~ .sp-btn { align-self: flex-start; }
.sp-answers { display: grid; gap: var(--space-4); }
.sp-answers:empty { display: none; }
.sp-qa { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.sp-qa__q { font: 600 15px/22px var(--font-body); color: var(--ink-muted); overflow-wrap: anywhere; }
.sp-qa__a { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.sp-qa--pending .sp-qa__a { color: var(--ink-muted); }
.sp-sources { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.sp-sources a { display: inline-flex; gap: var(--space-1); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--pod-blue-tint); color: var(--ink); text-decoration: none; font: 600 14px/24px var(--font-body); }
.sp-sources a:hover { text-decoration: underline; }
.sp-tiers { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sp-tier { display: grid; gap: var(--space-3); align-content: start; }

/* Collections */
.sp-collections { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.sp-collection { display: flex; gap: var(--space-4); align-items: center; }
.sp-collection__icon { color: var(--pod-blue); }
.sp-collection__name { font: 600 18px/26px var(--font-display); color: var(--ink); text-decoration: none; }
.sp-collection__name:hover { text-decoration: underline; }
.sp-collection__text p { margin: 0; }
.sp-suggestion h3 { margin: 0; font: 600 18px/26px var(--font-display); }
.sp-suggestion .sp-sources li span { display: inline-flex; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-sunken); font: 500 14px/24px var(--font-body); }

/* A collection's page: the title you can edit in place, icon buttons, the delete link at the bottom */
.sp-titlerow { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sp-titlerow h1 { margin: 0; overflow-wrap: anywhere; }
.sp-title-edit[contenteditable="true"] { outline: 3px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-sm); min-width: 4ch; }
.sp-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); cursor: pointer; }
.sp-iconbtn:hover { background: var(--surface-sunken); color: var(--ink); }
.sp-iconbtn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-delete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-top: var(--space-6); }
.sp-linkbtn { border: 0; background: transparent; padding: 0; color: var(--danger); font: 600 15px/22px var(--font-body); cursor: pointer; text-decoration: underline; }
.sp-linkbtn:hover { text-decoration: none; }

/* The signed-in app shell: a sidebar on the left (an icon rail on tablets, a slide-in drawer on phones). Signed-out pages keep the top bar. */
.sp-navtoggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sp-app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sp-app__main { min-width: 0; display: flex; flex-direction: column; }
.sp-app__main > .sp-main { flex: 1 0 auto; }
.sp-app .sp-main { margin: 0; max-width: 760px; padding: var(--space-6) var(--space-6) var(--space-8); }
.sp-app .sp-main--wide { max-width: 1100px; }
.sp-app .sp-footer .sp-nav { margin: 0; max-width: 1100px; padding: var(--space-3) var(--space-6); }
.sp-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-3); background: var(--surface); border-right: 1px solid var(--line); }
.sp-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2); }
.sp-sidebar__head .sp-brand { margin: 0; }
.sp-sidebar__close, .sp-topbar, .sp-scrim { display: none; }
.sp-sidebar__share { display: grid; border-radius: var(--radius-md); }
.sp-sidebar__share .sp-btn { width: 100%; justify-content: center; }
.sp-sidebar__share.sp-sharetab--drag .sp-btn { box-shadow: 0 0 0 3px var(--pod-blue-tint); }
.sp-sidebar__share.sp-sharetab--over .sp-btn { box-shadow: 0 0 0 4px var(--pod-blue); }
.sp-sidenav { display: grid; gap: 2px; align-content: start; }
.sp-sidenav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sp-sidenav__group { margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-3); font: 700 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.sp-sidenav a, .sp-sidenav button { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); text-decoration: none; font: 600 15px/20px var(--font-body); cursor: pointer; text-align: left; }
.sp-sidenav a:hover, .sp-sidenav button:hover { background: var(--surface-sunken); }
.sp-sidenav a:focus-visible, .sp-sidenav button:focus-visible, .sp-topbar .sp-iconbtn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-sidenav a[aria-current="page"] { background: var(--pod-blue-tint); color: var(--pod-blue); }
.sp-sidenav .sp-icon { flex: none; }
.sp-sidenav__pill { margin-left: auto; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font: 600 12px/20px var(--font-body); box-shadow: inset 0 0 0 1px var(--line); }
.sp-sidenav__pill--new { background: var(--pod-blue); color: var(--on-pod-blue); box-shadow: none; }
.sp-sidebar__spacer { flex: 1 1 auto; }
.sp-sidebar__foot { display: grid; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.sp-sidebar__foot form { margin: 0; }
.sp-sidebar__who { padding: var(--space-2) var(--space-3); color: var(--ink-muted); font: 500 13px/18px var(--font-body); overflow-wrap: anywhere; }

/* Tablets: an icon rail. The words stay for screen readers and show as tooltips. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sp-app { grid-template-columns: 72px minmax(0, 1fr); }
  .sp-sidebar { align-items: stretch; padding: var(--space-4) var(--space-2); }
  .sp-sidebar__label, .sp-sidenav__pill, .sp-sidenav__group, .sp-sidebar__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sp-sidebar__head { justify-content: center; padding: 0; }
  .sp-sidenav a, .sp-sidenav button { justify-content: center; padding: var(--space-2); }
  .sp-sidenav__group { margin: 0; }
  .sp-sidebar__share .sp-btn { padding-left: 0; padding-right: 0; }
  .sp-sidenav li + li { margin: 0; }
}

/* Phones: a slim top bar, and the sidebar slides in over the page. Works without JavaScript. */
@media (max-width: 767px) {
  .sp-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } /* the bar keeps its own height on short pages; only the content row stretches */
  .sp-topbar { display: flex; align-items: center; gap: var(--space-2); position: sticky; top: 0; z-index: 20; padding: var(--space-2) var(--space-3); background: var(--surface); border-bottom: 1px solid var(--line); }
  .sp-topbar .sp-brand { margin-right: auto; font-size: 20px; }
  .sp-topbar .sp-iconbtn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
  .sp-navtoggle:focus-visible ~ .sp-app .sp-topbar__menu { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
  .sp-sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); height: 100dvh; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  .sp-sidebar__close { display: inline-flex; }
  .sp-navtoggle:checked ~ .sp-app .sp-sidebar { transform: none; visibility: visible; transition: transform .2s ease; }
  .sp-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(6, 10, 22, .6); }
  .sp-navtoggle:checked ~ .sp-app .sp-scrim { display: block; }
  .sp-app .sp-main { padding: var(--space-5) var(--space-4) var(--space-8); }
  .sp-app .sp-footer .sp-nav { padding: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .sp-sidebar { transition: none !important; } }

/* Home: the three status tiles */
.sp-tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sp-tilelink { display: grid; gap: var(--space-1); align-content: start; color: var(--ink); text-decoration: none; }
.sp-tilelink:hover { border-color: var(--line-strong); }
.sp-tilelink:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-tilelink__title { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font: 600 14px/20px var(--font-body); }
.sp-tilelink__value { font: 700 22px/28px var(--font-display); }
.sp-tilelink__sub { color: var(--ink-muted); font: 400 14px/20px var(--font-body); overflow-wrap: anywhere; }
.sp-tilelink--warn .sp-tilelink__value { color: var(--warning); }

/* The Files page */
.sp-drop--compact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; justify-items: initial; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); }
.sp-drop--compact .sp-drop__title { font-size: 16px; line-height: 24px; }
.sp-drop--compact .sp-drop__icon svg { width: 24px; height: 24px; }
.sp-filesbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sp-filesbar h2 { margin: 0; }
.sp-count { font: 500 14px/20px var(--font-body); margin-left: var(--space-2); }
.sp-filesbar__search { display: flex; gap: var(--space-2); flex: 1 1 280px; max-width: 460px; }
.sp-filesbar__search .sp-input { flex: 1 1 auto; min-width: 0; }
.sp-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font: 600 15px/22px var(--font-body); }
.sp-filelist { list-style: none; margin: 0; padding: 0; display: grid; }
.sp-filerow { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.sp-filerow:first-child { border-top: 0; }
.sp-filerow__icon { color: var(--ink-muted); flex: none; }
.sp-filerow__text { display: grid; min-width: 0; flex: 1 1 auto; }
.sp-filerow__name { font: 600 16px/22px var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.sp-filerow__meta { color: var(--ink-muted); font: 400 13px/18px var(--font-body); overflow-wrap: anywhere; }
.sp-filerow__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
@media (max-width: 640px) { .sp-filerow { flex-wrap: wrap; } .sp-filerow__actions { width: 100%; justify-content: flex-start; padding-left: 32px; } }

/* Tabs that are links to sibling pages (Devices and Activity) */
.sp-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); margin-top: calc(-1 * var(--space-2)); }
.sp-tabs a { padding: var(--space-2) var(--space-4); margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--ink-muted); text-decoration: none; font: 600 15px/22px var(--font-body); }
.sp-tabs a:hover { color: var(--ink); }
.sp-tabs a[aria-current="page"] { color: var(--pod-blue); border-bottom-color: var(--pod-blue); }
.sp-tabs a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

/* The public pricing page */
.sp-plans { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: stretch; }
.sp-plan { display: grid; gap: var(--space-3); align-content: start; }
.sp-plan--featured { border: 2px solid var(--pod-blue); }
.sp-plan__price { font: 800 34px/40px var(--font-display); }
.sp-plan__price small { font: 500 15px/20px var(--font-body); color: var(--ink-muted); }
.sp-plan__alt { color: var(--ink-muted); font: 400 14px/20px var(--font-body); }

/* The Files page: sort, choosing files */
.sp-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sp-sortbar .sp-label { margin: 0; }
.sp-sortbar__select { width: auto; min-width: 190px; }
.sp-selectall { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; font: 600 14px/20px var(--font-body); cursor: pointer; }
.sp-selectbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); position: sticky; top: 0; z-index: 5; padding: var(--space-3) var(--space-4); border: 1px solid var(--pod-blue); border-radius: var(--radius-md); background: var(--pod-blue-tint); font: 600 15px/22px var(--font-body); }
.sp-selectbar[hidden] { display: none; }
.sp-filerow__check { flex: none; width: 20px; height: 20px; accent-color: var(--pod-blue); cursor: pointer; }
.sp-picked--tall { max-height: 340px; }

/* Search or ask: the field in the sidebar and the overlay it opens */
.sp-searchbtn { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink-muted); font: 500 15px/20px var(--font-body); cursor: pointer; text-align: left; }
.sp-searchbtn:hover { border-color: var(--pod-blue); color: var(--ink); }
.sp-searchbtn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-searchbtn kbd { margin-left: auto; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; font: 600 12px/20px var(--font-body); color: var(--ink-muted); }
.sp-spot { width: min(680px, calc(100vw - 2 * var(--space-4))); max-height: 78vh; margin: 10vh auto 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-card); overflow: hidden; }
.sp-spot[open] { display: flex; flex-direction: column; }
.sp-spot::backdrop { background: rgba(6, 10, 22, .6); }
.sp-spot__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink-muted); }
.sp-spot__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 18px/28px var(--font-body); outline: none; }
.sp-spot__input::placeholder { color: var(--ink-muted); }
.sp-spot__chip { flex: none; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--pod-blue-tint); color: var(--pod-blue); font: 600 13px/20px var(--font-body); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-spot__chip[hidden] { display: none; }
.sp-spot__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-3); min-height: 80px; }
.sp-spot__group { display: grid; margin-top: var(--space-2); }
.sp-spot__h { margin: var(--space-2) var(--space-2) var(--space-1); color: var(--ink-muted); font: 700 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.sp-spot__item { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; cursor: pointer; }
.sp-spot__item:hover, .sp-spot__item--active { background: var(--pod-blue-tint); }
.sp-spot__item--pick { align-items: flex-start; }
.sp-spot__item--pick input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--pod-blue); }
.sp-spot__text { display: grid; min-width: 0; }
.sp-spot__title { font: 600 15px/22px var(--font-body); overflow-wrap: anywhere; }
.sp-spot__meta { color: var(--ink-muted); font: 400 13px/18px var(--font-body); overflow-wrap: anywhere; }
.sp-spot__item:not(.sp-spot__item--pick) .sp-spot__meta { margin-left: auto; text-align: right; max-width: 55%; }
.sp-spot__more { padding: var(--space-1) var(--space-3); font: 600 14px/20px var(--font-body); }
.sp-spot__empty { margin: var(--space-3); color: var(--ink-muted); font: 400 15px/22px var(--font-body); }
.sp-spot__answer { margin: var(--space-2) var(--space-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-spot__used { margin: var(--space-2) var(--space-3) 0; color: var(--ink-muted); font: 600 13px/18px var(--font-body); }
.sp-spot__actions { display: flex; gap: var(--space-2); padding: var(--space-3); position: sticky; bottom: 0; background: var(--surface-raised); }
.sp-spot__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); font: 400 13px/20px var(--font-body); }
.sp-spot__foot:empty { display: none; }
.sp-spot__ask { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border: 0; border-radius: var(--radius-sm); background: var(--pod-blue-tint); color: var(--pod-blue); font: 600 13px/20px var(--font-body); cursor: pointer; }
.sp-spot kbd { padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 5px; font: 600 11px/18px var(--font-body); }
.sp-spot .sp-stack { padding: var(--space-3); }
@media (max-width: 640px) { .sp-spot { margin-top: 0; max-height: 100vh; height: 100vh; width: 100vw; border-radius: 0; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .sp-searchbtn { justify-content: center; padding-left: 0; padding-right: 0; }
}
.sp-spot__input::-webkit-search-cancel-button { display: none; }

/* The Ask panel: Claude beside the page (docked on wide screens, a drawer over the page on narrower ones) */
.sp-searchrow { display: flex; align-items: center; gap: var(--space-2); }
.sp-searchrow .sp-searchbtn { flex: 1 1 auto; min-width: 0; }
.sp-askbtn { flex: none; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--pod-blue); }
.sp-askbtn:hover { border-color: var(--pod-blue); color: var(--pod-blue); }
.sp-askbtn[aria-pressed="true"] { background: var(--pod-blue-tint); border-color: var(--pod-blue); }
@media (min-width: 768px) and (max-width: 1023px) { .sp-searchrow { flex-direction: column; } .sp-askbtn { width: 100%; } }
.sp-askpanel { display: flex; flex-direction: column; min-width: 0; height: 100vh; position: sticky; top: 0; border-left: 1px solid var(--line); background: var(--surface); }
.sp-askpanel[hidden] { display: none; }
.sp-askpanel__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.sp-askpanel__head h2 { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: 700 18px/24px var(--font-display); color: var(--pod-blue); }
.sp-askpanel__used { margin-right: auto; color: var(--ink-muted); font: 500 12px/16px var(--font-body); }
.sp-askpanel__context { padding: var(--space-2) var(--space-4) 0; }
.sp-askpanel__context:empty { display: none; }
.sp-askpanel__thread { flex: 1 1 auto; overflow-y: auto; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-3) var(--space-4); }
.sp-askpanel__note { display: grid; gap: var(--space-2); justify-items: start; color: var(--ink-muted); font: 400 15px/22px var(--font-body); }
.sp-askpanel__note p { margin: 0; }
.sp-askpanel__try { padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 500 14px/20px var(--font-body); text-align: left; cursor: pointer; }
.sp-askpanel__try:hover { border-color: var(--pod-blue); }
.sp-askpanel__user { justify-self: end; max-width: 92%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--pod-blue-tint); }
.sp-askpanel__user p { margin: 0; overflow-wrap: anywhere; }
.sp-askpanel__ctx { display: block; margin-top: 2px; color: var(--ink-muted); font: 500 12px/16px var(--font-body); }
.sp-askpanel__ai { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); overflow-wrap: anywhere; }
.sp-askpanel__ai .sp-spot__used, .sp-askpanel__ai .sp-spot__answer { margin-left: 0; margin-right: 0; }
.sp-askpanel__ai .sp-stack { padding: 0; margin-top: var(--space-2); }
.sp-askpanel__form { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.sp-askpanel__form[hidden] { display: none; }
.sp-askpanel__form .sp-textarea { min-height: 60px; }
.sp-askpanel__form .sp-btn { justify-self: end; }
.sp-askpanel__foot { margin: 0; padding: 0 var(--space-4) var(--space-3); color: var(--ink-muted); font: 400 12px/16px var(--font-body); }
@media (min-width: 1280px) { .sp-app--panel { grid-template-columns: 248px minmax(0, 1fr) 390px; } }
@media (max-width: 1279px) {
  .sp-askpanel { position: fixed; z-index: 35; top: 0; bottom: 0; right: 0; width: min(430px, 100vw); height: 100dvh; box-shadow: var(--shadow-card); }
}
@media (min-width: 768px) and (max-width: 1023px) { .sp-app--panel { grid-template-columns: 72px minmax(0, 1fr); } }
.sp-searchrow .sp-searchbtn kbd { display: none; }
.sp-searchrow .sp-searchbtn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The low-credit gauge: a small icon that shows only when less than a fifth of the month's Ask credits is left, and leads to the plan page */
.sp-gauge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-pill); color: var(--warning); text-decoration: none; }
.sp-gauge:hover { background: var(--warning-tint); }
.sp-gauge:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-gauge[hidden] { display: none; }
.sp-planrow { display: flex; align-items: center; gap: var(--space-1); }
.sp-planrow > a:first-child { flex: 1 1 auto; min-width: 0; }
.sp-askpanel__spacer { margin-right: auto; }
.sp-spot__bar .sp-gauge { width: 32px; height: 32px; }
@media (min-width: 768px) and (max-width: 1023px) { .sp-planrow { flex-direction: column; } }
.sp-planrow > a:first-child .sp-sidebar__label { white-space: nowrap; }
.sp-askpanel__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.sp-ask__row .sp-gauge, .sp-spot__foot .sp-gauge { align-self: center; }
.sp-spot__foot .sp-gauge { width: 28px; height: 28px; }

/* The Ask tab on the right edge of the screen (the panel it opens docks there too), apart from search on the left. Hidden while the panel is open. */
.sp-asktab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: linear-gradient(160deg, var(--pod-blue), var(--pod-blue-end)); color: var(--on-pod-blue); font: 700 14px/18px var(--font-body); cursor: pointer; box-shadow: var(--shadow-card); }
.sp-asktab span { writing-mode: vertical-rl; letter-spacing: .06em; }
.sp-asktab:hover { padding-right: var(--space-3); }
.sp-asktab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-app--panel .sp-asktab { display: none; }
@media (max-width: 767px) { .sp-asktab { display: none; } .sp-topbar__ask { margin-left: var(--space-2); color: var(--pod-blue); } }
.sp-askpanel__undo { margin: 0; color: var(--ink); }
.sp-askpanel__undo .sp-linkbtn { color: var(--pod-blue); }

/* ---- Grouped lists: a heading, then rows in one panel (Connections, and anywhere a stack of cards would be noise) ---- */
.sp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.sp-summary__item { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--pod-blue-tint), var(--surface-raised)); border: 1px solid var(--line); }
.sp-summary__label { font: 600 12px/16px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.sp-summary__value { font: 700 20px/28px var(--font-display); }
.sp-group { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.sp-group__title { margin: 0; font: 700 22px/28px var(--font-display); letter-spacing: -0.01em; }
.sp-group__intro { margin: calc(-1 * var(--space-2)) 0 0; }
.sp-list { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.sp-li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.sp-li:last-child { border-bottom: 0; }
.sp-li--stack { grid-template-columns: 1fr; }
.sp-li__main { min-width: 0; display: grid; gap: 2px; }
.sp-li__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; font: 600 17px/24px var(--font-body); }
.sp-li__text { margin: 0; font: 400 14px/20px var(--font-body); color: var(--ink-muted); overflow-wrap: anywhere; }
.sp-li__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: flex-end; }
.sp-li:target { background: var(--pod-blue-tint); }
.sp-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.sp-copy { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.sp-copy code { padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.sp-more summary { cursor: pointer; font: 600 14px/20px var(--font-body); color: var(--pod-blue); margin-top: var(--space-2); }
.sp-more ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: 14px; line-height: 22px; }
.sp-more--card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); }
.sp-more--card summary { margin: 0; font-size: 16px; color: var(--ink); }
.sp-more--card[open] summary { margin-bottom: var(--space-4); }
@media (max-width: 640px) { .sp-li { grid-template-columns: auto 1fr; } .sp-li__actions { grid-column: 1 / -1; justify-content: flex-start; } .sp-li--stack { grid-template-columns: 1fr; } }

/* A "Manage" menu: a details element that opens a small panel of actions */
.sp-menu { position: relative; }
.sp-menu > summary { list-style: none; }
.sp-menu > summary::-webkit-details-marker { display: none; }
.sp-menu > summary::after { content: ""; width: 7px; height: 7px; margin-left: var(--space-1); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.sp-menu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 220px; padding: var(--space-2); display: grid; gap: 2px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(6, 10, 22, .22); }
.sp-menu__panel form { margin: 0; }
.sp-menu__item { width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 600 14px/20px var(--font-body); cursor: pointer; }
.sp-menu__item:hover { background: var(--surface-sunken); }
.sp-menu__item--danger { color: var(--danger); }
.sp-menu__item--danger:hover { background: var(--danger-tint); }
.sp-menu__note { margin: 0; padding: var(--space-2) var(--space-3); font: 400 13px/18px var(--font-body); color: var(--ink-muted); }

/* Shared: grouped by sender, empty states, and a count on a tab */
.sp-tabs__n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: var(--radius-pill); background: var(--pod-blue-tint); color: var(--pod-blue); font: 700 12px/20px var(--font-body); text-align: center; }
.sp-sender { display: grid; gap: var(--space-2); }
.sp-sender + .sp-sender { margin-top: var(--space-4); }
.sp-sender__name { display: flex; align-items: center; gap: var(--space-3); margin: 0; font: 600 16px/24px var(--font-body); }
.sp-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--pod-blue), var(--pod-blue-end)); color: var(--on-pod-blue); font: 700 15px/1 var(--font-body); text-transform: uppercase; }
.sp-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center; background: var(--surface-raised); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.sp-empty h3 { margin: 0; font: 700 20px/28px var(--font-display); }
.sp-empty p { margin: 0; max-width: 44ch; }
.sp-li__head { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: flex-start; }
.sp-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }

/* ---- Home: quick actions, "Coming up", and a main column beside a side column ---- */
.sp-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-quick__item { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font: 600 14px/20px var(--font-body); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-card); }
.sp-quick__item:hover { border-color: var(--pod-blue); color: var(--pod-blue); }
.sp-quick__item:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-quick__item .sp-icon { color: var(--pod-blue); }
.sp-home { display: grid; gap: var(--space-5); margin-top: var(--space-5); align-items: start; }
.sp-home__main, .sp-home__side { display: grid; gap: var(--space-5); min-width: 0; }
@media (min-width: 1100px) { .sp-home { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); } }
.sp-card__head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.sp-card__head h2 { margin: 0; }
.sp-remgroup { display: grid; gap: var(--space-1); }
.sp-remgroup__name { margin: var(--space-2) 0 0; font: 700 12px/16px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.sp-remgroup__name--late { color: var(--danger); }
.sp-reminders { list-style: none; margin: 0; padding: 0; display: grid; }
.sp-reminder { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.sp-reminder:first-child { border-top: 0; }
.sp-reminder form { margin: 0; }
.sp-reminder__text { display: grid; flex: 1; min-width: 0; }
.sp-reminder__what { font: 600 15px/22px var(--font-body); overflow-wrap: anywhere; }
.sp-reminder__meta { font: 400 13px/18px var(--font-body); color: var(--ink-muted); overflow-wrap: anywhere; }
.sp-reminder--late .sp-reminder__meta { color: var(--danger); }
.sp-check-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--line-strong); border-radius: 50%; background: transparent; color: transparent; cursor: pointer; }
.sp-check-btn:hover, .sp-check-btn:focus-visible { border-color: var(--success); color: var(--success); background: var(--success-tint); }
.sp-check-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-empty--flat { border: 0; padding: var(--space-2) 0; justify-items: start; text-align: left; background: transparent; }
.sp-tiles--home { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ---- Collections: a featured collection, tiles, suggestions and smart collections ---- */
.sp-page-title--row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; justify-content: space-between; }
.sp-page-title--row > div { max-width: 62ch; }
.sp-crumbs { margin: 0; font: 600 14px/20px var(--font-body); }
.sp-feature { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: center; padding: var(--space-6); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--pod-blue-tint), var(--surface-raised) 70%); border: 1px solid var(--line); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.sp-feature::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(180deg, var(--pod-blue), var(--pod-blue-end)); }
.sp-feature__body { display: grid; gap: var(--space-2); min-width: 0; }
.sp-feature__kicker { display: flex; align-items: center; gap: var(--space-1); margin: 0; font: 700 12px/16px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--pod-blue); }
.sp-feature__name { margin: 0; font: 800 32px/38px var(--font-display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.sp-feature__name a { color: var(--ink); text-decoration: none; }
.sp-feature__name a:hover { color: var(--pod-blue); }
.sp-feature__meta { margin: 0; color: var(--ink-muted); font: 500 14px/20px var(--font-body); }
.sp-feature__files { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: 4px; font: 500 14px/20px var(--font-body); }
.sp-feature__files li { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.sp-feature__files span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-feature__more { color: var(--ink-muted); }
.sp-feature__art { opacity: .9; }
.sp-feature__art svg { width: 120px; height: 120px; }
@media (max-width: 640px) { .sp-feature { grid-template-columns: 1fr; padding: var(--space-5); } .sp-feature__art { display: none; } .sp-feature__name { font-size: 26px; line-height: 32px; } }
.sp-ctiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sp-ctile { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4) var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.sp-ctile:hover { border-color: var(--pod-blue); }
.sp-ctile__icon { color: var(--pod-blue); }
.sp-ctile__name { font: 700 18px/24px var(--font-display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.sp-ctile__name::after { content: ""; position: absolute; inset: 0; } /* the whole tile is the link */
.sp-ctile { position: relative; }
.sp-ctile__meta, .sp-ctile__files { margin: 0; font: 400 13px/18px var(--font-body); color: var(--ink-muted); }
.sp-ctile__files { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-suggest { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font: 700 12px/20px var(--font-body); }
.sp-tag--share { background: var(--spark-tint); color: var(--ink); }
.sp-chip-row { margin: 0; }
.sp-smarts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sp-smart { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "icon count" "name name" "desc desc"; row-gap: var(--space-1); align-content: start; height: 100%; padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.sp-smart:hover { border-color: var(--pod-blue); }
.sp-smart:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-smart__icon { grid-area: icon; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-2); border-radius: var(--radius-sm); background: var(--pod-blue-tint); color: var(--pod-blue); }
.sp-smart__name { grid-area: name; font: 700 16px/22px var(--font-body); }
.sp-smart__desc { grid-area: desc; font: 400 13px/18px var(--font-body); color: var(--ink-muted); }
.sp-smart__count { grid-area: count; align-self: start; min-width: 28px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--pod-blue); color: var(--on-pod-blue); font: 700 13px/20px var(--font-body); text-align: center; }

/* ---- The notifications bell ---- */
.sp-bellbtn { position: relative; }
.sp-bellbtn--side { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; margin-left: auto; }
.sp-bellbtn--side:hover { background: var(--surface-sunken); }
.sp-topbar .sp-bellbtn { margin-left: 0; }
.sp-bell__badge { position: absolute; top: 2px; right: 2px; min-width: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--spark); color: var(--on-spark); font: 800 11px/18px var(--font-body); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.sp-bellpanel { position: fixed; z-index: 60; top: 60px; left: 12px; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 80px); display: grid; grid-template-rows: auto 1fr; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(6, 10, 22, .35); overflow: hidden; }
.sp-bellpanel[hidden] { display: none; }
.sp-bellpanel__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.sp-bellpanel__head h2 { margin: 0; font: 700 18px/24px var(--font-display); }
.sp-bellpanel__body { overflow-y: auto; padding: var(--space-2) var(--space-4) var(--space-4); display: grid; gap: var(--space-3); align-content: start; }
.sp-bellsec { display: grid; gap: var(--space-1); }
.sp-bellsec__title { margin: var(--space-2) 0 0; font: 700 12px/16px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.sp-bellsec__none, .sp-bellsec__more { margin: 0; font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.sp-bellist { list-style: none; margin: 0; padding: 0; display: grid; }
.sp-bellitem { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.sp-bellitem:first-child { border-top: 0; }
.sp-bellitem__main { display: grid; gap: 2px; flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.sp-bellitem__main:hover .sp-bellitem__text { color: var(--pod-blue); }
.sp-bellitem__text { font: 600 14px/20px var(--font-body); overflow-wrap: anywhere; }
.sp-bellitem__meta { font: 400 13px/18px var(--font-body); color: var(--ink-muted); overflow-wrap: anywhere; }
.sp-bellitem--warn .sp-bellitem__text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--spark); }
.sp-bellitem--late .sp-bellitem__meta { color: var(--danger); }
.sp-bellfoot { margin: 0; font: 600 14px/20px var(--font-body); }
@media (min-width: 1024px) { .sp-bellpanel { top: 56px; left: 16px; } }
@media (max-width: 1023px) { .sp-bellpanel { top: 64px; left: 12px; right: 12px; width: auto; } }

/* ---- Scan with your phone ---- */
.sp-scansteps { margin: 0 0 var(--space-3); padding-left: var(--space-5); font: 400 14px/22px var(--font-body); }
.sp-qr--big { display: grid; place-items: center; min-height: 240px; }
.sp-scanlink { text-align: center; overflow-wrap: anywhere; }
.sp-scanfine { font-size: 13px; line-height: 18px; }
.sp-phone { max-width: 520px; margin: 0 auto; }
.sp-scanthumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-scanthumbs li { position: relative; }
.sp-scanthumbs img { display: block; width: 72px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: #fff; }
.sp-scanthumbs button { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface-raised); background: var(--ink); color: var(--surface); font: 700 16px/1 var(--font-body); cursor: pointer; }
.sp-appprompt { background: linear-gradient(135deg, var(--pod-blue-tint), var(--surface-raised)); }
.sp-phone .sp-btn--lg { width: 100%; }

/* ---- File preview: a nearly full-window dialog ---- */
.sp-noscroll { overflow: hidden; }
.sp-preview { width: calc(100vw - 32px); height: calc(100vh - 32px); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgba(6, 10, 22, .5); overflow: hidden; }
.sp-preview[open] { display: grid; grid-template-rows: auto 1fr; }
.sp-preview::backdrop { background: rgba(6, 10, 22, .72); }
@media (max-width: 640px) { .sp-preview { width: 100vw; height: 100dvh; border-radius: 0; border: 0; } }
.sp-preview__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.sp-preview__bar .sp-iconbtn { width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; }
.sp-preview__bar .sp-iconbtn:hover:not(:disabled) { background: var(--surface-sunken); }
.sp-preview__bar .sp-iconbtn:disabled { opacity: .35; cursor: default; }
.sp-preview__title { flex: 1; min-width: 0; display: grid; }
.sp-preview__title h2 { margin: 0; font: 700 17px/24px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-preview__meta { margin: 0; font: 400 13px/18px var(--font-body); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-preview__actions { display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 760px) { .sp-preview__label { display: none; } .sp-preview__actions .sp-btn { padding: 0; width: 40px; } }
.sp-preview__stage { position: relative; display: flex; overflow: auto; padding: var(--space-4); background: var(--surface-sunken); touch-action: pan-x pan-y; overscroll-behavior: contain; outline: none; }
.sp-preview__stage.is-dragging { cursor: grabbing; user-select: none; }
.sp-zoomable { margin: auto; display: block; height: auto; max-width: none; flex: none; background: #fff; box-shadow: var(--shadow-card); cursor: zoom-in; }
.sp-pdf { margin: 0 auto; flex: none; display: grid; gap: var(--space-3); align-content: start; }
.sp-pdf__page { background: #fff; box-shadow: var(--shadow-card); width: 100%; }
.sp-pdf__page canvas { display: block; width: 100%; height: auto; }
.sp-text { margin: auto; align-self: flex-start; width: min(100%, 90ch); padding: var(--space-4); background: var(--surface-raised); border-radius: var(--radius-md); font: 400 14px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-media { margin: auto; max-width: 100%; max-height: 100%; }
audio.sp-media { width: min(100%, 520px); }
.sp-preview__none { margin: auto; display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.sp-preview__nonetext, .sp-preview__loading { margin: auto; color: var(--ink-muted); }
.sp-preview__tools { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(6, 10, 22, .3); z-index: 2; }
.sp-preview__tools[hidden] { display: none; }
.sp-preview__tools button { min-width: 40px; height: 36px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 700 16px/1 var(--font-body); cursor: pointer; }
.sp-preview__tools button:hover { background: var(--surface-sunken); }
.sp-preview__tools span { min-width: 52px; text-align: center; font: 600 13px/1 var(--font-body); color: var(--ink-muted); }
.sp-preview__collect { position: absolute; z-index: 5; top: 60px; right: 12px; width: min(340px, calc(100vw - 24px)); display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 16px 48px rgba(6, 10, 22, .35); }
.sp-preview__collect[hidden] { display: none; }
.sp-preview__collect h3 { margin: 0; font: 700 16px/22px var(--font-display); }
.sp-preview__colllist { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; display: grid; }
.sp-preview__none-note { padding: var(--space-2) var(--space-3); color: var(--ink-muted); font-size: 14px; }

/* ---- Files page: a slim add bar, Recent files, and tidy rows ---- */
.sp-addbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sp-addbar .sp-drop--bar { flex: 1 1 360px; }
.sp-addbar .sp-uploads, .sp-addbar .sp-status { flex: 1 1 100%; margin: 0; }
.sp-drop--bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-align: left; justify-items: unset; }
.sp-drop--bar .sp-drop__title { font-size: 16px; line-height: 22px; }
.sp-drop--bar .sp-drop__words { display: grid; gap: 2px; }
.sp-filesbar--wide { display: flex; gap: var(--space-2); }
.sp-filesbar--wide .sp-input { flex: 1; }
.sp-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sp-recentcard { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); row-gap: 2px; align-items: center; height: 100%; padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); }
.sp-recentcard:hover { border-color: var(--pod-blue); }
.sp-recentcard:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-recentcard .sp-ext { grid-row: 1 / span 2; }
.sp-recentcard__name { font: 600 14px/20px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-recentcard__meta { grid-column: 2; font: 400 12px/16px var(--font-body); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ext { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-muted); font: 800 11px/1 var(--font-body); letter-spacing: .03em; flex: none; }
.sp-ext--pdf { background: var(--danger-tint); color: var(--danger); }
.sp-ext--image { background: var(--pod-blue-tint); color: var(--pod-blue); }
.sp-ext--text { background: var(--success-tint); color: var(--success); }
.sp-ext--video, .sp-ext--audio { background: var(--spark-tint); color: var(--ink); }
.sp-ext--folder { background: var(--pod-blue-tint); color: var(--pod-blue); }
.sp-filelist { list-style: none; margin: 0; padding: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.sp-filerow { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.sp-filerow:last-child { border-bottom: 0; }
.sp-filerow:hover { background: var(--surface-sunken); }
.sp-filerow:not(:has(.sp-filerow__check)) { grid-template-columns: auto 1fr auto; padding-left: calc(var(--space-4) + 22px + var(--space-3)); }
.sp-filerow__text { display: grid; min-width: 0; }
.sp-filerow__name { font: 600 15px/22px var(--font-body); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-filerow__name:hover { color: var(--pod-blue); }
.sp-filerow__meta { font: 400 13px/18px var(--font-body); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-filerow__actions { display: flex; gap: var(--space-1); align-items: center; }
.sp-menu__item--link { display: block; text-decoration: none; }
@media (max-width: 640px) { .sp-filerow { grid-template-columns: auto 1fr auto; } .sp-filerow .sp-ext { display: none; } .sp-filerow__actions .sp-btn--secondary { display: none; } .sp-drop--bar { flex-direction: row; } }
.sp-addbar .sp-status:empty { display: none; }

/* ---- Drag a file onto something to put it there ---- */
.sp-dragging [data-drop] { outline: 2px dashed var(--pod-blue); outline-offset: 2px; border-radius: var(--radius-md); }
.sp-dragging [data-drop].sp-drop-hot { outline-style: solid; outline-width: 3px; background: var(--pod-blue-tint); box-shadow: 0 0 0 6px var(--pod-blue-tint); }
.sp-dragging .sp-sidenav [data-drop] { outline-offset: -2px; }
.sp-droptoast { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--ink); color: var(--surface); font: 600 14px/20px var(--font-body); box-shadow: 0 12px 36px rgba(6, 10, 22, .4); }
.sp-droptoast[hidden] { display: none; }
.sp-droptoast a { color: inherit; text-decoration: underline; }
.sp-droptoast--bad { background: var(--danger); color: #fff; }
.sp-droptoast__x { margin-left: auto; border: 0; background: transparent; color: inherit; font: 700 18px/1 var(--font-body); cursor: pointer; opacity: .8; }

/* ---- The loader: a bar across the top, and a spinning mark when something takes longer than a second ---- */
.sp-loadbar { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; opacity: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--pod-blue), var(--pod-blue-end), var(--spark)); box-shadow: 0 0 12px var(--pod-blue); }
.sp-loadbar.is-on { opacity: 1; animation: sp-bar 8s cubic-bezier(.1, .6, .2, 1) forwards; }
.sp-loadbar.is-done { animation: none; transform: scaleX(1); transition: transform .2s ease-out, opacity .3s .15s; opacity: 0; }
@keyframes sp-bar { from { transform: scaleX(.02); } to { transform: scaleX(.92); } }
.sp-loader { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; display: none; place-content: center; justify-items: center; gap: var(--space-4); background: rgba(246, 248, 252, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--ink); z-index: 99; }
@media (prefers-color-scheme: dark) { .sp-loader { background: rgba(10, 13, 20, .62); } }
.sp-loader.is-open, .sp-loader:popover-open { display: grid; animation: sp-fade .25s ease-out; }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
.sp-loader__wrap { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.sp-loader__wrap::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pod-blue) 38%, transparent), transparent); animation: sp-glow 1.8s ease-in-out infinite; }
.sp-loader__spin { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, var(--pod-blue) 40%, var(--pod-blue-end) 72%, var(--spark) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); animation: sp-spin 1s linear infinite; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pod-blue) 60%, transparent)); }
.sp-loader__spin--back { inset: 12px; background: conic-gradient(from 180deg, transparent 0 30%, var(--spark) 75%, var(--pod-blue-end) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: sp-spin 1.6s linear infinite reverse; filter: none; opacity: .9; }
.sp-loader__mark { position: relative; display: grid; place-items: center; animation: sp-pulse 1.4s ease-in-out infinite; }
.sp-loader__mark svg { width: 40px; height: 40px; }
.sp-loader__text { margin: 0; font: 600 15px/22px var(--font-body); color: var(--ink-muted); animation: sp-fadepulse 1.6s ease-in-out infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes sp-glow { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes sp-fadepulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-loader__spin, .sp-loader__spin--back, .sp-loader__mark, .sp-loader__wrap::before { animation: none; } .sp-loadbar.is-on { animation-duration: 20s; } .sp-spinner { animation-duration: 3s; } }
.sp-spinner { display: inline-block; width: 1em; height: 1em; margin-right: var(--space-2); border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; animation: sp-spin .7s linear infinite; vertical-align: -0.15em; flex: none; }
.sp-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.sp-btn[aria-busy="true"] { opacity: .85; cursor: progress; }
.sp-dropdone__tick { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--success-tint); color: var(--success); vertical-align: middle; }
.sp-dropdone__files { margin: 0 0 var(--space-2); padding-left: var(--space-5); font: 500 14px/22px var(--font-body); }
.sp-dropdone__collect { display: grid; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.sp-dropdone__collect h3 { margin: 0; font: 700 16px/22px var(--font-display); }

/* ---- Shared collections and requests ---- */
.sp-tabs__n--new { background: var(--spark); color: var(--on-spark); }
.sp-input--sm { min-height: 36px; padding: 0 var(--space-2); font-size: 14px; }
.sp-person .sp-row { align-items: center; }

.sp-conn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.sp-person .sp-row { align-items: center; }

/* Teams: the switcher at the top of the sidebar and the note that says whose files these are */
.sp-teambar { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 12px; border-radius: 12px; background: var(--pod-blue-tint); color: var(--ink); font-size: 14px; }
.sp-teambar svg { flex: none; }
.sp-teambar--quiet { background: var(--surface-sunken); color: var(--ink-muted); }

/* Stores that can be several (Drives, buckets, folders, accounts): a card with a row for each, and a form to add another */
.sp-subitem__name .sp-pill { margin-left: var(--space-2); vertical-align: 1px; }
.sp-subitem .sp-menu { margin-left: auto; }
.sp-menu__rename { display: grid; gap: var(--space-2); padding: var(--space-2); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.sp-more .sp-stack { margin-top: var(--space-3); max-width: 420px; }

/* The Storage Pod switcher at the top of the sidebar, and the account menu at the bottom (like Claude's) */
.sp-podmenu, .sp-acctmenu { position: relative; }
.sp-podmenu__btn { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; list-style: none; color: var(--ink); }
.sp-podmenu__btn::-webkit-details-marker { display: none; }
.sp-podmenu__btn:hover, .sp-podmenu[open] > .sp-podmenu__btn, .sp-acctmenu[open] > .sp-podmenu__btn { background: var(--surface-sunken); }
.sp-podmenu__btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-podmenu__text { display: grid; min-width: 0; flex: 1; font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.sp-podmenu__text strong { font: 700 15px/20px var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-podmenu__chev { display: inline-flex; color: var(--ink-muted); }
.sp-avatar { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--pod-blue), var(--pod-blue-end)); color: var(--on-pod-blue); font: 700 14px/1 var(--font-body); }
.sp-avatar--team { border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); box-shadow: inset 0 -3px 0 var(--spark); }
.sp-avatar--sm { width: 26px; height: 26px; font-size: 12px; }
.sp-podmenu__panel, .sp-acctmenu__panel { position: absolute; left: 0; right: 0; z-index: 30; display: grid; gap: 2px; padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(6, 10, 22, .22); }
.sp-podmenu__panel { top: calc(100% + 6px); }
.sp-acctmenu__panel { bottom: calc(100% + 6px); }
.sp-podmenu__panel form, .sp-acctmenu__panel form { margin: 0; }
.sp-podmenu__who { margin: 0; padding: var(--space-2) var(--space-3); color: var(--ink-muted); font: 500 13px/18px var(--font-body); overflow-wrap: anywhere; }
.sp-podmenu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 600 14px/20px var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.sp-podmenu__item:hover { background: var(--surface-sunken); }
.sp-podmenu__item[aria-current="page"] { color: var(--pod-blue); }
.sp-podmenu__item .sp-icon { flex: none; color: var(--ink-muted); }
.sp-podmenu__check { margin-left: auto; display: inline-flex; color: var(--pod-blue); }
.sp-podmenu__check .sp-icon { color: inherit; }
.sp-podmenu__tag { margin-left: var(--space-1); padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font: 600 11px/18px var(--font-body); box-shadow: inset 0 0 0 1px var(--line); }
.sp-sidebar .sp-podmenu { margin-top: calc(-1 * var(--space-1)); }
.sp-sidebar .sp-acctmenu { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.sp-acctmenu__panel { bottom: calc(100% + 2px); }
@media (min-width: 768px) and (max-width: 1023px) {
  .sp-podmenu__btn { justify-content: center; padding: var(--space-2) 0; }
  .sp-podmenu__panel, .sp-acctmenu__panel { position: fixed; left: 76px; right: auto; width: 260px; }
  .sp-podmenu__panel { top: 72px; }
  .sp-acctmenu__panel { bottom: 16px; }
}

/* Connection rows: the icon sits at the top of the row beside the title, not in the middle of it */
.sp-li { align-items: start; }
.sp-li > .sp-li__actions { align-self: center; }
.sp-li .sp-subitem { align-items: flex-start; }
.sp-li .sp-subitem__icon { margin-top: 2px; }
.sp-li .sp-subitem > .sp-menu, .sp-li .sp-subitem > form { align-self: center; margin-left: auto; }

/* The marketing home page */
.sp-main--landing { max-width: 1080px; gap: var(--space-8); padding-top: var(--space-5); }
.sp-landing-hero { display: grid; gap: var(--space-5); padding-block: var(--space-7) var(--space-5); justify-items: start; }
.sp-landing-hero h1 { font-size: clamp(40px, 7vw, 68px); line-height: 1.04; font-weight: 800; letter-spacing: -0.025em; max-width: 16ch; }
.sp-lead--wide { max-width: 46ch; }
.sp-hero__note { font-size: 14px; }
.sp-section { display: grid; gap: var(--space-4); align-content: start; }
.sp-section__title { font: 700 clamp(26px, 4vw, 36px)/1.15 var(--font-display); letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance; }
.sp-section__lead { color: var(--ink-muted); font-size: 18px; line-height: 28px; max-width: 62ch; }
.sp-statement { gap: var(--space-4); }
.sp-statement__text { font: 400 clamp(18px, 2.4vw, 22px)/1.5 var(--font-body); max-width: 60ch; }
.sp-statement__text + .sp-statement__text { color: var(--ink-muted); }
.sp-pill--soon { background: var(--pod-blue-tint); color: var(--pod-blue); }
.sp-inline-tag { display: inline-block; margin-right: var(--space-1); }
.sp-beats { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: none; }
.sp-beat { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.sp-beat h3 { font: 700 20px/28px var(--font-display); }
.sp-beat p { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.sp-beat__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--pod-blue), var(--pod-blue-end)); color: var(--on-pod-blue); font: 700 15px/1 var(--font-body); }
.sp-feeds { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sp-feed { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4) var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sp-feed > div { display: grid; gap: var(--space-2); justify-items: start; }
.sp-feed h3 { font: 700 17px/24px var(--font-body); }
.sp-feed p { color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.sp-split { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); align-items: start; }
.sp-split > .sp-card { align-self: stretch; }
.sp-card h3 { font: 700 18px/26px var(--font-body); }
.sp-checks li { color: var(--ink); }
.sp-own { padding: var(--space-6); background: var(--surface-sunken); border-radius: var(--radius-lg); }
.sp-own p { max-width: 62ch; }
.sp-horizons { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sp-horizons .sp-card h3 { margin: 0; }
.sp-plain { list-style: none; padding: 0; display: grid; gap: var(--space-2); color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.sp-plain li { padding-left: var(--space-4); position: relative; }
.sp-plain li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.sp-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sp-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-pill); font: 600 15px/22px var(--font-body); }
.sp-chip small { color: var(--ink-muted); font-weight: 500; }
.sp-faq { display: grid; gap: var(--space-2); max-width: 760px; }
.sp-faq details { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.sp-faq summary { cursor: pointer; font: 600 16px/24px var(--font-body); }
.sp-faq details[open] summary { margin-bottom: var(--space-2); }
.sp-faq p { color: var(--ink-muted); }
.sp-final { display: grid; gap: var(--space-5); justify-items: center; text-align: center; padding: var(--space-7) var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--pod-blue-tint), var(--surface-sunken)); }
.sp-final__title { font: 800 clamp(30px, 5vw, 48px)/1.1 var(--font-display); letter-spacing: -0.02em; }
.sp-row--center { justify-content: center; }
@media (max-width: 640px) { .sp-landing-hero { padding-block: var(--space-5) var(--space-3); } .sp-own { padding: var(--space-5); } }
.sp-landing-hero .sp-btn--lg, .sp-final .sp-btn--lg { width: auto; }

.sp-split > .sp-card, .sp-horizons > .sp-card { align-content: start; }

/* Marketing sub-pages */
.sp-landing-hero--page { padding-block: var(--space-6) var(--space-3); }
.sp-landing-hero--page h1 { max-width: 20ch; }
.sp-stage { grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.sp-stage__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--pod-blue), var(--pod-blue-end)); color: var(--on-pod-blue); font: 800 20px/1 var(--font-display); }
.sp-copy code { display: inline-block; padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-sm); overflow-wrap: anywhere; user-select: all; }
@media (max-width: 560px) { .sp-stage { grid-template-columns: 1fr; gap: var(--space-3); } }
.sp-point > .sp-pill, .sp-card > .sp-pill, .sp-stack > .sp-pill { justify-self: start; }
a.sp-chip { text-decoration: none; color: var(--ink); }
a.sp-chip:hover { border-color: var(--pod-blue); }
a.sp-chip[aria-current="page"] { color: var(--pod-blue); border-color: var(--pod-blue); }
.sp-point p a, .sp-section a { font-weight: 600; }

/* Stories: illustrative scenarios (docs/marketing/CASE-STUDIES.md) */
.sp-scenario { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-muted); font-weight: 600; }
.sp-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin: 0; }
.sp-glance dt { font-weight: 700; margin-bottom: var(--space-1); }
.sp-glance dd { margin: 0; color: var(--ink-muted); }
.sp-day { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.sp-day li { display: grid; gap: var(--space-2); justify-items: start; }
.sp-day p { margin: 0; }

.sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-prewrap { white-space: pre-wrap; }

/* The public footer: brand and three columns of links */
.sp-footer--site { margin-top: var(--space-7); padding: var(--space-7) var(--space-4) var(--space-5); background: var(--surface-sunken); }
.sp-footer__grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); }
.sp-footer__brand { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.sp-footer__brand p { margin: 0; color: var(--ink-muted); max-width: 28ch; }
.sp-footer--site h2 { font: 700 13px/18px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.sp-footer--site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sp-footer--site nav a { color: var(--ink); font: 500 15px/22px var(--font-body); text-decoration: none; }
.sp-footer--site nav a:hover { color: var(--pod-blue); text-decoration: underline; }
.sp-footer__legal { max-width: 1100px; margin: var(--space-6) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-muted); font: 400 14px/20px var(--font-body); }
@media (max-width: 760px) { .sp-footer__grid { grid-template-columns: 1fr 1fr; } .sp-footer__brand { grid-column: 1 / -1; } }
.sp-kicker { margin: 0; font: 700 12px/16px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pod-blue); }
.sp-feed h3 a { color: inherit; text-decoration: none; }
.sp-feed h3 a:hover { color: var(--pod-blue); text-decoration: underline; }

/* Support conversation: the solution and the request in the page, the chat floating at the right of the window */
.sp-support { display: block; }
.sp-support__main { display: grid; gap: var(--space-4); min-width: 0; }
.sp-pane { display: grid; gap: var(--space-3); align-content: start; }
.sp-pane h2 { margin: 0; font: 700 18px/24px var(--font-display); }
.sp-pane__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.sp-btn--sm { padding: 6px 12px; font-size: 14px; width: auto; }
.sp-dock { position: fixed; z-index: 30; right: var(--space-4); top: 76px; bottom: var(--space-4); width: 360px; max-width: calc(100vw - 2 * var(--space-4)); grid-template-rows: auto minmax(0, 1fr) auto; box-shadow: 0 18px 48px -12px rgba(16, 24, 40, 0.28); }
.sp-dock--min { top: auto; grid-template-rows: auto; }
.sp-dock--min > :not(.sp-pane__head) { display: none; }
.sp-chat { display: grid; gap: var(--space-2); align-content: start; overflow-y: auto; min-height: 0; padding-right: var(--space-1); }
.sp-bubble { max-width: 92%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.sp-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-bubble--bot { background: var(--surface-sunken); justify-self: start; }
.sp-bubble--me { background: var(--pod-blue-tint); justify-self: end; }
.sp-bubble--typing { color: var(--ink-muted); font-style: italic; }
.sp-chat__form { display: grid; gap: var(--space-2); }
.sp-chat__form .sp-btn { justify-self: end; width: auto; }
.sp-solution { display: grid; gap: var(--space-3); }
.sp-solution h3, .sp-solution h4, .sp-solution p { margin: 0; }
.sp-solution__steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-3); }
.sp-solution__steps li strong { display: block; }
.sp-solution__steps li span { display: block; color: var(--ink-muted); }
.sp-link-quiet { color: var(--ink-muted); font: 500 15px/22px var(--font-body); text-decoration: underline; align-self: center; }
.sp-link-quiet:hover { color: var(--ink); }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* While the chat is open, keep the page's content clear of it (only as much as the window's margin doesn't already) */
@media (min-width: 1001px) { .sp-support--open .sp-support__main { margin-right: max(0px, calc(392px - (100vw - 960px) / 2)); } }
@media (max-width: 1000px) {
  .sp-dock { left: var(--space-2); right: var(--space-2); top: auto; bottom: var(--space-2); width: auto; max-width: none; height: min(70vh, 560px); }
  .sp-dock--min { height: auto; }
  .sp-support--open .sp-support__main { margin-bottom: min(70vh, 560px); }
}

/* The sign-in / create-account box on the support page: a friendly, hard-to-miss dialog rather than a form in the chat */
.sp-gate-dialog { border: 0; padding: 0; border-radius: var(--radius-lg); width: min(480px, calc(100vw - 2 * var(--space-4))); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(24, 40, 120, 0.55), 0 0 0 1px var(--line); overflow: auto; max-height: calc(100vh - 2 * var(--space-4)); }
.sp-gate-dialog::backdrop { background: rgba(20, 28, 70, 0.55); backdrop-filter: blur(4px); }
.sp-gate-dialog[open] { animation: sp-gate-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.sp-gate-dialog__top { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); background: var(--surface); }
.sp-gate-dialog__close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; }
.sp-gate-dialog__close:hover { background: var(--surface-sunken); color: var(--ink); }
.sp-gate-who { display: grid; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.sp-gate-who__line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.sp-gate-who__email { display: block; color: var(--ink-muted); overflow-wrap: anywhere; }
.sp-gate-who__fields { display: grid; gap: var(--space-3); padding: 0 var(--space-2) var(--space-2) 0; }
.sp-gate-who__fields[hidden] { display: none; }
.sp-gate-dialog__band { display: grid; place-items: center; padding: var(--space-5) var(--space-4); background: linear-gradient(135deg, var(--pod-blue) 0%, var(--pod-blue-end) 135%); }
.sp-gate-dialog__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: var(--on-pod-blue); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1); }
.sp-gate-dialog__body { display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-6); }
.sp-gate-dialog__body h2 { margin: 0; font: 800 24px/30px var(--font-display); letter-spacing: -0.01em; }
.sp-gate-dialog__body p { margin: 0; color: var(--ink-muted); }
.sp-gate-dialog__body .sp-btn--lg { width: 100%; }
.sp-input--lg { padding: 14px 16px; font-size: 17px; }
@keyframes sp-gate-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-gate-dialog[open] { animation: none; } }

/* Support inside the app: a box like the file preview, which can be minimized to a chip above the account menu */
.sp-supportbox { border: 0; padding: 0; width: min(1240px, calc(100vw - 32px)); height: calc(100vh - 32px); max-width: none; max-height: none; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(16, 24, 40, 0.5); overflow: hidden; }
.sp-supportbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.sp-supportbox::backdrop { background: rgba(16, 24, 40, 0.5); backdrop-filter: blur(3px); }
.sp-supportbox__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.sp-supportbox__bar h2 { margin: 0; font: 700 20px/26px var(--font-display); }
.sp-supportbox__body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-4); padding: var(--space-4); min-height: 0; background: var(--surface-sunken); }
.sp-supportbox .sp-support__main { overflow-y: auto; min-height: 0; align-content: start; padding-right: var(--space-1); }
.sp-supportbox .sp-dock { position: static; height: auto; max-height: none; width: auto; max-width: none; box-shadow: none; min-height: 0; }
.sp-bubble--action .sp-row { margin-top: var(--space-2); }
@media (max-width: 900px) {
  .sp-supportbox { width: 100vw; height: 100vh; border-radius: 0; }
  .sp-supportbox__body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .sp-supportbox .sp-dock { order: -1; height: 60vh; }
  .sp-supportbox .sp-support__main { overflow: visible; }
}
.sp-supportchip { position: relative; margin: 0 var(--space-2) var(--space-2); }
.sp-supportchip[hidden] { display: none; }
.sp-supportchip__open { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--pod-blue-tint); color: var(--ink); font: 600 15px/22px var(--font-body); cursor: pointer; text-align: left; }
.sp-supportchip__open:hover { box-shadow: 0 4px 14px -6px var(--pod-blue); }
.sp-supportchip__close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: none; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-muted); cursor: pointer; }
.sp-supportchip:hover .sp-supportchip__close, .sp-supportchip:focus-within .sp-supportchip__close { display: grid; }
.sp-supportchip__close:hover { color: var(--ink); background: var(--surface-sunken); }
@media (hover: none) { .sp-supportchip__close { display: grid; } }
.sp-supportbox .sp-support--open .sp-support__main { margin-right: 0; margin-bottom: 0; }

/* "Still need help?" folds away until it's wanted */
.sp-help { padding: 0; }
.sp-help__summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; }
.sp-help__summary::-webkit-details-marker { display: none; }
.sp-help__summary h2 { margin: 0; font: 700 18px/24px var(--font-display); }
.sp-help__chev { display: grid; place-items: center; color: var(--ink-muted); transition: transform 160ms ease; }
.sp-help[open] .sp-help__chev { transform: rotate(180deg); }
.sp-help__summary:hover .sp-help__chev { color: var(--ink); }
.sp-help__body { display: grid; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.sp-help__body p { margin: 0; }
/* a button that looks like a quiet link */
button.sp-link-quiet { background: none; border: 0; padding: 0; cursor: pointer; }

/* The offer to log a question Ask couldn't help with */
.sp-improve { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); display: grid; gap: var(--space-2); }
.sp-improve p { margin: 0; }

/* The one search for adding files to a collection: it opens the same search as the sidebar, for this collection */
.sp-addsearch { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 16px 18px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); font: 400 17px/24px var(--font-body); text-align: left; cursor: pointer; }
.sp-addsearch:hover { border-color: var(--pod-blue); color: var(--ink); box-shadow: 0 4px 14px -8px var(--pod-blue); }
.sp-addsearch:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* The preview eye on a row of files to pick: on hover or keyboard focus, and always on touch screens */
.sp-spot__preview { margin-left: auto; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-muted); opacity: 0; transition: opacity 120ms ease; flex: none; }
.sp-spot__item--pick:hover .sp-spot__preview, .sp-spot__item--pick:focus-within .sp-spot__preview, .sp-spot__item--active .sp-spot__preview, .sp-spot__preview:focus-visible { opacity: 1; }
.sp-spot__preview:hover { background: var(--surface-sunken); color: var(--pod-blue); }
@media (hover: none) { .sp-spot__preview { opacity: 1; } }

/* File preview: text files drawn the StayPuller way (Markdown, plain text, JSON, CSV, simple HTML), with a switch to the source */
.sp-viewwrap { margin: 0 auto; align-self: flex-start; width: min(100%, 90ch); display: grid; gap: var(--space-3); min-width: 0; }
.sp-viewwrap .sp-text { margin: 0; width: auto; }
.sp-viewbar { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); }
.sp-viewbar__note { color: var(--ink-muted); font: 400 14px/20px var(--font-body); }
.sp-viewtoggle { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); }
.sp-viewtoggle button { padding: 6px 16px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); font: 600 14px/20px var(--font-body); cursor: pointer; }
.sp-viewtoggle button[aria-pressed="true"] { background: var(--pod-blue); color: var(--on-pod-blue); }
.sp-viewtoggle button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.sp-rendered { padding: var(--space-6) var(--space-6); background: var(--surface-raised); border-radius: var(--radius-md); color: var(--ink); font: 400 16px/1.65 var(--font-body); overflow-wrap: anywhere; min-width: 0; }
.sp-rendered > :first-child { margin-top: 0; }
.sp-rendered > :last-child { margin-bottom: 0; }
.sp-rendered h1, .sp-rendered h2, .sp-rendered h3, .sp-rendered h4, .sp-rendered h5, .sp-rendered h6 { font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.2; margin: 1.6em 0 0.5em; }
.sp-rendered h1 { font-size: 2em; font-weight: 800; }
.sp-rendered h2 { font-size: 1.5em; font-weight: 700; }
.sp-rendered h3 { font-size: 1.2em; font-weight: 700; }
.sp-rendered h4, .sp-rendered h5, .sp-rendered h6 { font-size: 1em; font-weight: 700; }
.sp-rendered p { margin: 0 0 1em; }
.sp-rendered a { color: var(--pod-blue); text-decoration: underline; text-underline-offset: 2px; }
.sp-rendered ul, .sp-rendered ol { margin: 0 0 1em; padding-left: 1.5em; }
.sp-rendered li { margin: 0.25em 0; }
.sp-rendered li > ul, .sp-rendered li > ol { margin: 0.25em 0 0; }
.sp-rendered blockquote { margin: 0 0 1em; padding: 0.25em 1em; border-left: 4px solid var(--pod-blue); background: var(--pod-blue-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); }
.sp-rendered hr { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }
.sp-rendered code { font: 400 0.9em/1.4 var(--font-mono); padding: 0.1em 0.35em; border-radius: 4px; background: var(--surface-sunken); }
.sp-rendered pre { margin: 0 0 1em; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); overflow-x: auto; font: 400 0.9em/1.5 var(--font-mono); white-space: pre; }
.sp-rendered pre code { padding: 0; background: none; font-size: 1em; }
.sp-md-front { opacity: 0.8; }
.sp-md-table { overflow-x: auto; }
.sp-md-table table { border-collapse: collapse; margin: 0 0 1em; font-size: 0.95em; }
.sp-md-table th, .sp-md-table td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.sp-md-table th { background: var(--surface-sunken); font-weight: 700; position: sticky; top: 0; }
.sp-md-more, .sp-md-img { color: var(--ink-muted); font-style: italic; }
.sp-md-task { list-style: none; margin-left: -1.3em; display: flex; gap: 0.5em; align-items: baseline; }
.sp-md-check { display: inline-grid; place-items: center; width: 1em; height: 1em; border: 1.5px solid var(--line-strong); border-radius: 4px; font-size: 0.85em; line-height: 1; flex: none; }
.sp-md-check.is-done { background: var(--pod-blue); border-color: var(--pod-blue); color: var(--on-pod-blue); }
.sp-plain p { max-width: 70ch; }
.sp-json { margin: 0; white-space: pre-wrap; font: 400 14px/1.6 var(--font-mono); }
.sp-j-key { color: var(--pod-blue); font-weight: 600; }
.sp-j-str { color: var(--success); }
.sp-j-num { color: var(--warning); }
.sp-j-bool { color: var(--pod-blue-end); font-weight: 600; }
.sp-j-null { color: var(--ink-muted); font-style: italic; }

/* Connections: grouped, with a tile color per kind of connection */
.sp-tile--storage { background: var(--pod-blue-tint); color: var(--pod-blue); }
.sp-tile--account { background: var(--spark-tint); color: var(--spark); }
.sp-tile--notes { background: var(--success-tint); color: var(--success); }
.sp-tile--meetings { background: var(--warning-tint); color: var(--warning); }
.sp-tile--assistant { background: linear-gradient(135deg, var(--pod-blue-tint), var(--surface-sunken)); color: var(--pod-blue-end); }
.sp-tile--soon { background: var(--surface-sunken); color: var(--ink-muted); }
.sp-titlebar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.sp-titlebar .sp-btn { width: auto; }
.sp-acct { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.sp-acct:last-child { border-bottom: 0; }
.sp-acct__head { display: flex; align-items: center; gap: var(--space-3); }
.sp-acct__head h3 { margin: 0; font: 700 17px/24px var(--font-display); }
.sp-acct__head p { margin: 0; color: var(--ink-muted); }
.sp-svcs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sp-svc { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.sp-svc--off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-muted); }
.sp-svc__icon { display: grid; place-items: center; color: var(--ink-muted); }
.sp-svc__text { flex: 1 1 auto; min-width: 0; display: grid; }
.sp-svc__name { font-weight: 600; }
.sp-svc__meta { color: var(--ink-muted); font-size: 14px; overflow-wrap: anywhere; }
.sp-addgrid { display: grid; gap: var(--space-4); }
.sp-search { max-width: 480px; }
.sp-add[hidden] { display: none; }
.sp-attn { margin-bottom: var(--space-4); }

/* The setup guide: the first-run choice, the floating "Getting started" assistant, the highlight and the cursor that does things while the person watches */
.sp-guide-offer { background: linear-gradient(135deg, var(--pod-blue-tint), var(--surface-raised)); border: 1px solid var(--line); }
.sp-guide-offer[hidden] { display: none; }
.sp-guide-offer__choices .sp-btn { width: auto; }
.sp-guide { position: fixed; z-index: 70; right: var(--space-4); bottom: var(--space-4); width: min(360px, calc(100vw - 2 * var(--space-3))); display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink); box-shadow: 0 20px 60px -16px rgba(16, 24, 60, 0.45), 0 0 0 1px var(--line); }
.sp-guide[hidden] { display: none; }
.sp-guide__head { display: flex; justify-content: space-between; align-items: center; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(135deg, var(--pod-blue), var(--pod-blue-end)); color: var(--on-pod-blue); }
.sp-guide__hb { display: flex; gap: var(--space-1); }
.sp-guide__x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.sp-guide__x:hover { background: rgba(255, 255, 255, 0.3); }
.sp-guide__msg { margin: 0; font: 400 16px/24px var(--font-body); }
.sp-guide.is-busy .sp-guide__msg { color: var(--ink-muted); font-style: italic; }
.sp-guide__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sp-guide__actions .sp-btn { width: auto; }
.sp-guide__ask { display: flex; gap: var(--space-2); }
.sp-guide__ask .sp-input { flex: 1 1 auto; min-width: 0; padding: 8px 12px; font-size: 14px; }
.sp-guide__skip { border: 0; background: none; padding: 0; color: var(--ink-muted); font: 500 13px/18px var(--font-body); text-decoration: underline; cursor: pointer; justify-self: start; }
.sp-guide.is-min > :not(.sp-guide__head) { display: none; }
.sp-guide__spot { position: fixed; z-index: 65; pointer-events: none; border-radius: 12px; box-shadow: 0 0 0 3px var(--spark), 0 0 0 9999px rgba(12, 18, 40, 0.28); transition: left 200ms, top 200ms, width 200ms, height 200ms; animation: sp-guide-pulse 1.6s ease-in-out infinite; }
.sp-guide__spot[hidden] { display: none; }
@keyframes sp-guide-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--spark), 0 0 0 9999px rgba(12, 18, 40, 0.28); } 50% { box-shadow: 0 0 0 7px rgba(255, 106, 26, 0.45), 0 0 0 9999px rgba(12, 18, 40, 0.28); } }
.sp-guide__cursor { position: fixed; z-index: 75; left: 0; top: 0; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
.sp-guide__cursor[hidden] { display: none; }
.sp-guide__ripple { position: absolute; left: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--spark); opacity: 0; }
.sp-guide__cursor.is-click .sp-guide__ripple { animation: sp-guide-ripple 450ms ease-out; }
@keyframes sp-guide-ripple { from { opacity: 0.8; transform: scale(0.4); } to { opacity: 0; transform: scale(3.2); } }
@media (prefers-reduced-motion: reduce) { .sp-guide__spot { animation: none; } }
@media (max-width: 700px) { .sp-guide { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); width: auto; } }
.sp-svc label.sp-svc__text { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.sp-svc label.sp-svc__text > span { display: grid; gap: 2px; }
.sp-svc label input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--pod-blue); }
.sp-svc label .sp-svc__name { display: flex; align-items: center; gap: var(--space-2); }
.sp-guide-offer .sp-linkbtn { color: var(--pod-blue); }

/* Tidbits: the board and the public page */
.sp-tbadd__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sp-tbadd__or { color: var(--ink-muted); font: 500 14px/20px var(--font-body); padding: 0 var(--space-1); }
.sp-tbadd .sp-status { min-height: 20px; margin: 0; }
.sp-tidbits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.sp-tidbit { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); }
.sp-tidbit__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sp-tidbit__age { margin-left: auto; font-size: 13px; white-space: nowrap; }
.sp-tidbit__title { margin: 0; font: 600 18px/26px var(--font-display); overflow-wrap: anywhere; }
.sp-tidbit__text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font: 400 15px/22px var(--font-body); display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sp-tidbit__pre, .sp-tbview__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/22px var(--font-body); }
.sp-tidbit__pre { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); font-family: var(--font-mono); font-size: 14px; max-height: 60vh; overflow: auto; }
.sp-tidbit__file { margin: 0; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sp-tidbit__file .muted { white-space: nowrap; }
.sp-tidbit__filename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tidbit__domain { margin: 0; display: flex; align-items: center; gap: var(--space-1); }
.sp-tidbit__thumb { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); overflow: hidden; cursor: zoom-in; }
.sp-tidbit__thumb img { display: block; width: 100%; height: 180px; object-fit: contain; background: #fff; }
.sp-tidbit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; }
.sp-tidbit__more { margin-left: auto; }
.sp-tidbit__img, .sp-tbview__img { max-width: 100%; max-height: 62vh; border-radius: var(--radius-md); background: #fff; }
.sp-tbview { width: min(720px, calc(100vw - 2 * var(--space-4))); }
.sp-tbview__body { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); justify-items: start; }
.sp-tbview__actions { flex-wrap: wrap; }

.sp-tbscribble__sep { width: 1px; height: 24px; background: var(--line); margin: 0 var(--space-1); }
.sp-tbscribble__color { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--surface-raised); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.sp-tbscribble__color--ink { background: #12161f; }
.sp-tbscribble__color--blue { background: #0a5ff5; }
.sp-tbscribble__color--orange { background: #ff6a1a; }
.sp-tbscribble__color--green { background: #117a43; }
.sp-tbscribble__color--red { background: #c5221a; }
.sp-tbscribble__color.is-on { box-shadow: 0 0 0 3px var(--pod-blue); }

.sp-tbscribble { width: min(1100px, calc(100vw - 2 * var(--space-4))); padding: var(--space-4) var(--space-5); gap: var(--space-3); }
.sp-tbscribble[open] { display: grid; } /* only while open: a display on the dialog itself would keep it showing after it is closed */
.sp-tbscribble__head { display: flex; align-items: center; gap: var(--space-4); }
.sp-tbscribble__head h2 { margin: 0; white-space: nowrap; }
.sp-tbscribble__title { flex: 1 1 auto; min-width: 0; }
.sp-tbscribble__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.sp-tbtool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 36px; height: 36px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; list-style: none; }
.sp-tbtool::-webkit-details-marker { display: none; }
.sp-tbtool:hover { background: var(--surface-sunken); }
.sp-tbtool.is-on { background: var(--pod-blue-tint); color: var(--pod-blue); border-color: var(--pod-blue); }
.sp-tbscribble__dot { display: block; border-radius: 50%; background: currentColor; }
.sp-tbscribble__dot--s { width: 5px; height: 5px; }
.sp-tbscribble__dot--m { width: 10px; height: 10px; }
.sp-tbscribble__dot--l { width: 17px; height: 17px; }
.sp-tbscribble__count { font: 600 12px/1 var(--font-body); color: var(--ink-muted); }
.sp-tbscribble__layersmenu { margin-left: auto; }
.sp-tbscribble__layersmenu > summary::after { display: none; }
.sp-tbscribble__panel { right: 0; left: auto; min-width: 240px; }
.sp-tbscribble__layerhead { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-1) var(--space-1); }
.sp-tbscribble__layerhead .sp-label { margin: 0; }
.sp-tbscribble__layer { display: flex; align-items: center; gap: 2px; padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.sp-tbscribble__layer.is-on { background: var(--pod-blue-tint); }
.sp-tbscribble__pad { width: 100%; aspect-ratio: 5 / 3; max-height: calc(100vh - 230px); object-fit: contain; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: #fff; touch-action: none; cursor: crosshair; }
.sp-tbscribble__status { min-height: 0; margin: 0; }
.sp-tbscribble__status:empty { display: none; }

.sp-tbscribble__layername { flex: 1 1 auto; min-width: 0; text-align: left; padding: var(--space-2); border: 0; background: transparent; color: var(--ink); font: 600 14px/20px var(--font-body); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tidbit[data-tb-kind] { cursor: pointer; }
.sp-tidbit button, .sp-tidbit a { cursor: pointer; }
.sp-tidbit__actions { gap: var(--space-1); }
.sp-tidbit__trash { margin-left: auto; }
.sp-tidbit__shared { display: inline-flex; align-items: center; gap: var(--space-1); border: 0; font: inherit; cursor: pointer; }
.sp-header--minimal { justify-content: center; }

/* Contact card, in the file preview */
.sp-contact { max-width: 480px; margin: var(--space-6) auto; padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; gap: var(--space-4); }
.sp-contact__head { display: flex; align-items: center; gap: var(--space-4); }
.sp-contact__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--pod-blue-tint); color: var(--pod-blue); display: grid; place-items: center; font-size: 24px; font-weight: 600; }
.sp-contact__name { margin: 0; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.sp-contact__org { margin: 2px 0 0; color: var(--ink-soft); }
.sp-contact__row { display: grid; grid-template-columns: 76px 1fr; gap: var(--space-3); align-items: baseline; }
.sp-contact__label { color: var(--ink-soft); font-size: 13px; }
.sp-contact__values { display: grid; gap: 4px; overflow-wrap: anywhere; }
.sp-contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.sp-contact__note { color: var(--ink-soft); font-size: 13px; }
.sp-contact__qr { display: grid; justify-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.sp-contact__qrcode { background: #fff; padding: 10px; border-radius: var(--radius-sm); line-height: 0; }
.sp-contact__qrnote { margin: 0; color: var(--ink-soft); font-size: 13px; }

/* People & projects: tabs, merge-by-drag cards, compact lists, status line */
.sp-group--tight { margin-top: var(--space-4); }
.sp-statusline { margin-top: var(--space-8); }
.sp-linkbtn--plain { color: var(--pod-blue); font-weight: 400; }
.sp-tab-count { margin-left: var(--space-1); }
[data-card][draggable="true"] { cursor: grab; }
[data-card].is-dragging { opacity: 0.45; }
[data-card].is-target { outline: 3px solid var(--pod-blue); outline-offset: 2px; background: var(--pod-blue-tint); }
.sp-rows { list-style: none; margin: var(--space-3) 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.sp-rows__row { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-top: 1px solid var(--line); }
.sp-rows__row:first-child { border-top: 0; }
.sp-rows__row[hidden] { display: none; }
.sp-rows__main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; color: var(--ink); text-decoration: none; }
.sp-rows__main:hover .sp-rows__name { text-decoration: underline; }
.sp-rows__name { font-weight: 600; white-space: nowrap; }
.sp-rows__sub { color: var(--ink-soft); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp-rows__tag { flex: none; color: var(--ink-soft); font-size: 12px; }
.sp-tabbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--line); margin-top: var(--space-3); }
.sp-tabbar .sp-tabs { border-bottom: 0; margin-top: 0; }
.sp-tabbar .sp-linkbtn { margin-bottom: var(--space-2); white-space: nowrap; }
.sp-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.sp-pager button:disabled { opacity: 0.35; cursor: default; }
[data-panel] > [data-cards], [data-list] { margin-top: var(--space-4); }
.sp-smart__type { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: 999px; background: var(--pod-blue-tint); color: var(--pod-blue); font: 600 12px/20px var(--font-body); vertical-align: middle; }
.sp-tabbar__right { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.sp-tabbar__right .sp-linkbtn { margin-bottom: 0; }
.sp-pdlg { width: min(560px, calc(100vw - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-6)); padding: 0; overflow: hidden; }
.sp-pdlg[open] { display: flex; flex-direction: column; }
.sp-pdlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); }
.sp-pdlg__who { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.sp-pdlg__who h2 { margin: 0; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.sp-pdlg__who p { margin: 2px 0 0; }
.sp-pdlg__body { overflow: auto; padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-4); }
.sp-pdlg__facts { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.sp-pdlg__h { margin: 0; font: 700 15px/22px var(--font-body); }
.sp-pdlg__qr { display: grid; justify-items: center; gap: var(--space-2); }
.sp-pdlg__qr .sp-contact__qrcode { background: #fff; padding: 10px; border-radius: var(--radius-sm); line-height: 0; }
.sp-check > .sp-row { justify-content: space-between; align-items: flex-start; }
.sp-check > .sp-row > .sp-stack { flex: 1 1 24em; }
/* Business admin (/admin): the pages use no inline styles, so bars are <progress> and an inline SVG. */
.sp-admin__line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: 0; }
.sp-admin__line + .sp-admin__line { margin-top: var(--space-2); }
.sp-admin__bar { display: grid; gap: var(--space-1); }
.sp-admin__bar + .sp-admin__bar { margin-top: var(--space-3); }
.sp-admin__bar progress { width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; accent-color: var(--pod-blue); }
.sp-admin__bar progress::-webkit-progress-bar { background: var(--surface-sunken); }
.sp-admin__bar progress::-webkit-progress-value { background: var(--pod-blue); border-radius: 4px; }
.sp-admin__bar progress::-moz-progress-bar { background: var(--pod-blue); border-radius: 4px; }
.sp-admin__chart { width: 100%; height: 120px; display: block; }
.sp-admin__chart rect { fill: var(--pod-blue); }
.sp-admin__chart rect.is-zero { fill: var(--line); }
.sp-admin__find { flex-wrap: wrap; }
.sp-admin__find input[type="search"] { flex: 1 1 220px; }
.sp-admin__link { text-decoration: none; color: inherit; }
.sp-admin__ask summary { list-style: none; cursor: pointer; }
.sp-admin__ask summary::-webkit-details-marker { display: none; }
.sp-admin__ask[open] { display: grid; gap: var(--space-2); }
.sp-admin__ask form { display: grid; gap: var(--space-2); justify-items: start; }
.sp-admin__table { width: 100%; border-collapse: collapse; }
.sp-admin__table th, .sp-admin__table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); font: 400 15px/22px var(--font-body); overflow-wrap: anywhere; }
.sp-admin__table thead th { color: var(--ink-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.sp-admin__table tbody th { font-weight: 600; }

/* First-time setup: one choice at a time, one narrow column, big touch targets. */
.sp-start { display: grid; justify-items: center; gap: var(--space-4); text-align: center; max-width: 480px; margin: 0 auto; padding-block: var(--space-7); }
.sp-start h1 { font-size: clamp(28px, 7vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }
.sp-start__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--pod-blue-tint); color: var(--pod-blue); }
.sp-start__lede { color: var(--ink-muted); font-size: 17px; line-height: 26px; margin: 0; }
.sp-start .sp-btn--lg { height: auto; padding-block: var(--space-3); line-height: 24px; }
.sp-setup { display: grid; gap: var(--space-5); max-width: 520px; margin: 0 auto; }
.sp-setup h1 { font-size: clamp(26px, 6vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.sp-setup p { margin: 0; }
.sp-progress { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-4); font: 600 14px/20px var(--font-body); color: var(--ink-muted); }
.sp-progress__step { display: flex; align-items: center; gap: var(--space-2); }
.sp-progress__mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); font: 700 12px/1 var(--font-body); }
.sp-progress__step--now { color: var(--ink); }
.sp-progress__step--now .sp-progress__mark { border-color: var(--pod-blue); color: var(--pod-blue); }
.sp-progress__step--done .sp-progress__mark { background: var(--success-tint); border-color: var(--success); color: var(--success); }
.sp-choices { display: grid; gap: var(--space-3); }
.sp-choice { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; width: 100%; min-height: 72px; padding: var(--space-3) var(--space-4); text-align: left; font: inherit; color: inherit; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); cursor: pointer; }
.sp-choice:hover { border-color: var(--pod-blue); }
.sp-choice__text { display: grid; gap: 2px; }
.sp-choice__name { font: 700 17px/24px var(--font-body); }
.sp-choice__blurb { font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.sp-choice__go { color: var(--ink-muted); }
.sp-done { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.sp-done__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success-tint); color: var(--success); }
.sp-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.sp-check-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sp-check-row > div { display: grid; gap: var(--space-1); justify-items: start; }
.sp-check-row .sp-step__text { overflow-wrap: anywhere; }
.sp-admin__ask form .sp-input { width: 100%; max-width: 560px; }

/* People popover: three icon actions under the contact details, and what the files say set apart in its own tinted box. */
.sp-pdlg__actions { display: flex; gap: var(--space-2); }
.sp-iconbtn--ring { border: 1.5px solid var(--line-strong); color: var(--ink); text-decoration: none; }
.sp-pdlg__box { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.sp-pdlg__box .sp-pdlg__facts a { overflow-wrap: anywhere; }