/* noiro.dev · the Shoo page: Space, Shoo's map of the disk, as the hero (shoo.js) */

@property --sp-charge { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ---------- Colours ---------- */
/* Shoo's own: the Space page's mint (Theme.space), the canvas it washes over, panels and Liquid Glass. */
.space {
  --sp-mint: 31 184 153;
  --sp-mint-ink: 12 134 110;
  --sp-partner: 31 149 184;
  --sp-sky: #1c94ff;
  --sp-canvas: #f7f8fa;
  --sp-panel: rgb(255 255 255 / .9);
  --sp-panel-line: rgb(0 0 0 / .06);
  --sp-ink: #1d1d1f;
  --sp-ink-2: rgb(60 60 67 / .66);
  --sp-ink-3: rgb(60 60 67 / .36);
  --sp-fill: rgb(0 0 0 / .045);
  --sp-fill-2: rgb(0 0 0 / .1);
  --sp-hover: rgb(0 0 0 / .06);
  --sp-glass: rgb(255 255 255 / .68);
  --sp-glass-line: rgb(255 255 255 / .85);
  --sp-glass-edge: rgb(0 0 0 / .08);
  --sp-menu: rgb(246 246 248 / .9);
  --sp-ring: rgb(255 255 255 / .95);
  --sp-box: #fff;
  --sp-box-line: rgb(0 0 0 / .26);
  --sp-dots: rgb(0 0 0 / .15);
  --sp-dots-lit: rgb(0 0 0 / .24);
  --sp-free: rgb(0 0 0 / .06);
  --sp-purge: rgb(0 0 0 / .15);
  --sp-stripe: rgb(255 255 255 / .65);
  --sp-stripe-wash: rgb(255 255 255 / .2);
  --sp-w1: .2; --sp-w2: .12; --sp-w3: .17;
  --sp-cont: .16; --sp-cont-lit: .24; --sp-cont-line: .3;
  --sp-hi: .4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .space {
    --sp-mint-ink: 74 214 184;
    --sp-sky: #3aa3ff;
    --sp-canvas: #111217;
    --sp-panel: rgb(255 255 255 / .06);
    --sp-panel-line: rgb(255 255 255 / .08);
    --sp-ink: #f5f5f7;
    --sp-ink-2: rgb(235 235 245 / .62);
    --sp-ink-3: rgb(235 235 245 / .32);
    --sp-fill: rgb(255 255 255 / .06);
    --sp-fill-2: rgb(255 255 255 / .13);
    --sp-hover: rgb(255 255 255 / .08);
    --sp-glass: rgb(46 48 56 / .62);
    --sp-glass-line: rgb(255 255 255 / .14);
    --sp-glass-edge: rgb(0 0 0 / .5);
    --sp-menu: rgb(40 41 48 / .9);
    --sp-ring: rgb(255 255 255 / .75);
    --sp-box: rgb(255 255 255 / .12);
    --sp-box-line: rgb(255 255 255 / .2);
    --sp-dots: rgb(255 255 255 / .2);
    --sp-dots-lit: rgb(255 255 255 / .3);
    --sp-free: rgb(255 255 255 / .08);
    --sp-purge: rgb(255 255 255 / .2);
    --sp-stripe: rgb(255 255 255 / .5);
    --sp-stripe-wash: rgb(255 255 255 / .12);
    --sp-w1: .42; --sp-w2: .24; --sp-w3: .34;
    --sp-cont: .22; --sp-cont-lit: .3; --sp-cont-line: .32;
    --sp-hi: .28;
  }
}
:root[data-theme="dark"] .space {
  --sp-mint-ink: 74 214 184;
  --sp-sky: #3aa3ff;
  --sp-canvas: #111217;
  --sp-panel: rgb(255 255 255 / .06);
  --sp-panel-line: rgb(255 255 255 / .08);
  --sp-ink: #f5f5f7;
  --sp-ink-2: rgb(235 235 245 / .62);
  --sp-ink-3: rgb(235 235 245 / .32);
  --sp-fill: rgb(255 255 255 / .06);
  --sp-fill-2: rgb(255 255 255 / .13);
  --sp-hover: rgb(255 255 255 / .08);
  --sp-glass: rgb(46 48 56 / .62);
  --sp-glass-line: rgb(255 255 255 / .14);
  --sp-glass-edge: rgb(0 0 0 / .5);
  --sp-menu: rgb(40 41 48 / .9);
  --sp-ring: rgb(255 255 255 / .75);
  --sp-box: rgb(255 255 255 / .12);
  --sp-box-line: rgb(255 255 255 / .2);
  --sp-dots: rgb(255 255 255 / .2);
  --sp-dots-lit: rgb(255 255 255 / .3);
  --sp-free: rgb(255 255 255 / .08);
  --sp-purge: rgb(255 255 255 / .2);
  --sp-stripe: rgb(255 255 255 / .5);
  --sp-stripe-wash: rgb(255 255 255 / .12);
  --sp-w1: .42; --sp-w2: .24; --sp-w3: .34;
  --sp-cont: .22; --sp-cont-lit: .3; --sp-cont-line: .32;
  --sp-hi: .28;
}

/* ---------- The window ---------- */
/* The canvas with the page's wash across the top: mint at the left, a cooler neighbour at the right. */
.space {
  width: 100%; max-width: 680px; margin-left: auto;
  /* Its long one-line rows (legend, readout) mustn't widen the hero's column on a phone, and the list beside the
     map comes and goes with the window's own width. */
  container: space / inline-size;
  color: var(--sp-ink); font-size: 13px; line-height: 1.3; letter-spacing: -.006em;
  background:
    radial-gradient(70% 34% at 0% 0%, rgb(var(--sp-mint) / var(--sp-w1)), transparent),
    radial-gradient(60% 30% at 55% 0%, rgb(var(--sp-mint) / var(--sp-w2)), transparent),
    radial-gradient(55% 32% at 100% 0%, rgb(var(--sp-partner) / var(--sp-w3)), transparent),
    var(--sp-canvas);
}
.space:not(.is-charging) { transition: --sp-charge .32s cubic-bezier(.3, .7, .1, 1); }
.space .win__bar.sp-toolbar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 18px; }
.sp-toolbar .lights { margin-right: 8px; }
.sp-tool, .sp-diskname {
  height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px;
  background: var(--sp-glass); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px var(--sp-glass-line), 0 0 0 .5px var(--sp-glass-edge), 0 1px 3px rgb(0 0 0 / .06);
}
.sp-tool { width: 30px; font-size: 12px; color: var(--sp-ink); transition: color .15s, opacity .15s; }
.sp-tool:disabled { color: var(--sp-ink-3); cursor: default; }
.sp-diskname { margin-left: auto; padding: 0 13px 0 11px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.sp-diskname .ico { font-size: 15px; }

.sp-body { position: relative; display: flex; flex-direction: column; padding: 2px 18px 0; }
/* Without scripts: the app's own Space page, cut to the part beside its sidebar, in place of the live map. */
.sp-nojs { display: none; }
html:not(.js) .sp-body, html:not(.js) .sp-tool { display: none; }
html:not(.js) .sp-nojs { --cx: 360; --cy: 84; --cw: 1520; --ch: 1260; display: block; position: relative; overflow: hidden; aspect-ratio: var(--cw) / var(--ch); }
html:not(.js) .sp-nojs img {
  position: absolute; max-width: none; height: auto;
  width: calc(100% * 1880 / var(--cw)); left: calc(-100% * var(--cx) / var(--cw)); top: calc(-100% * var(--cy) / var(--ch));
}
.sp-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Header ---------- */
.sp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; }
/* GlyphTile: the tint lightened at the top and deepened at the bottom, light along its top edge, a white glyph. */
.sp-glyph {
  --rgb: var(--sp-mint);
  width: 46px; height: 46px; border-radius: 23.5%; display: grid; place-items: center; flex: none; color: #fff; font-size: 21.5px;
  background: linear-gradient(color-mix(in srgb, rgb(var(--rgb)) 86%, #fff), color-mix(in srgb, rgb(var(--rgb)) 94%, #000));
  box-shadow: inset 0 .75px 0 rgb(255 255 255 / .42), 0 1.5px 3px rgb(0 0 0 / .16);
}
.sp-glyph--small { --rgb: var(--rgb-day); width: 24px; height: 24px; font-size: 11.5px; box-shadow: inset 0 .5px 0 rgb(255 255 255 / .4), 0 .5px 1px rgb(0 0 0 / .1); }
.sp-head__title { font: 700 22px/1.1 var(--font-display); letter-spacing: -.02em; }
.sp-head__sub { margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--sp-ink-2); }
.sp-head__free { text-align: right; white-space: nowrap; }
.sp-head__free b { display: block; font: 600 30px/1 var(--font-display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.sp-head__free span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--sp-ink-2); }

/* ---------- The disk bar ---------- */
.sp-diskbar { display: flex; gap: 2px; height: 12px; margin-top: 16px; border-radius: 999px; overflow: hidden; }
.sp-seg { position: relative; flex: none; height: 100%; overflow: hidden; transition: opacity .14s ease-out; }
.sp-seg--kind { background: linear-gradient(rgb(var(--top)), rgb(var(--bot))); cursor: pointer; }
.sp-seg--purgeable { background: var(--sp-purge); }
.sp-seg--free { background: var(--sp-free); }
.sp-seg.is-dim { opacity: .35; }
/* The part of a kind Shoo can clear: lighter, finely lined, set off by a hairline where it starts. */
.sp-seg__clear {
  position: absolute; top: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, var(--sp-stripe) 0 .8px, transparent .8px 2.5px), var(--sp-stripe-wash);
  box-shadow: inset 1px 0 0 rgb(255 255 255 / .9);
}

/* ---------- Legend ---------- */
.sp-legend { position: relative; z-index: 8; display: flex; align-items: center; gap: 6px 12px; margin-top: 9px; font-size: 12px; color: var(--sp-ink-2); }
.sp-legend.is-stacked { flex-wrap: wrap; }
.sp-chips { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; margin-left: -8px; }
.sp-legend.is-stacked .sp-chips { flex-basis: 100%; }
.sp-chip, .sp-more, .sp-total--clear {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 999px; flex: none; white-space: nowrap;
  transition: background-color .14s ease-out;
}
.sp-chip[hidden] { display: none; }
.sp-chip:hover, .sp-total--clear:hover, .sp-total--clear[aria-expanded="true"] { background: var(--sp-hover); }
.sp-chip.is-chosen { color: var(--sp-ink); background: rgb(var(--rgb) / .2); box-shadow: inset 0 0 0 1px rgb(var(--rgb) / .55); }
.sp-chip b, .sp-total b, .sp-menu__item b { font-weight: 500; font-variant-numeric: tabular-nums; }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: linear-gradient(rgb(var(--top)), rgb(var(--bot))); }
.sp-more { gap: 3px; padding: 0 6px; font-weight: 500; color: rgb(var(--sp-mint-ink)); }
.sp-more:hover { background: var(--sp-hover); }
.sp-more__chev { font-size: 8px; transform: rotate(90deg); }
.sp-totals { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 12px; flex: none; }
.sp-legend.is-stacked .sp-totals { flex: 1 1 100%; justify-content: flex-start; margin-left: -8px; }
.sp-total { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sp-total--clear { color: var(--sp-ink); }
.sp-dot--clear { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .95) 0 .8px, transparent .8px 2.4px), color-mix(in srgb, var(--sp-ink) 40%, transparent); }
.sp-dot--purge { background: var(--sp-purge); }
.sp-dot--free { background: none; box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--sp-ink) 30%, transparent); }

/* ---------- Popovers and menus ---------- */
.sp-popwrap { position: relative; display: inline-flex; flex: none; }
.sp-popwrap[hidden] { display: none; }
.sp-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; padding: 5px; border-radius: 12px;
  color: var(--sp-ink); font-size: 13px; text-align: left;
  background: var(--sp-menu); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--sp-glass-line), 0 0 0 .5px var(--sp-glass-edge), 0 14px 36px rgb(0 0 0 / .2);
  animation: sp-pop-in .16s ease-out;
}
.sp-pop[hidden] { display: none; }
.sp-totals .sp-pop { left: auto; right: 0; }
/* The context menu opens where it was asked for (shoo.js sets left and top). */
.sp-ctx { min-width: 190px; }
.sp-menu--up { top: auto; bottom: calc(100% + 10px); }
.sp-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 10px; border-radius: 6px; white-space: nowrap; text-align: left; }
.sp-menu__item b { margin-left: auto; padding-left: 18px; color: var(--sp-ink-2); }
.sp-menu__item:hover, .sp-menu__item:focus-visible { background: var(--sp-sky); color: #fff; outline: none; }
.sp-menu__item:hover b, .sp-menu__item:focus-visible b { color: rgb(255 255 255 / .85); }
.sp-menu__item[aria-checked="true"] span { font-weight: 600; }
.sp-pages { width: 280px; padding: 12px 6px 10px; }
.sp-pages__title { display: block; padding: 0 8px 6px; font-size: 13px; font-weight: 700; }
.sp-pages__row { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.sp-pages__row b { margin-left: auto; font-weight: 400; color: var(--sp-ink-2); font-variant-numeric: tabular-nums; }
.sp-pages__note { display: block; padding: 8px 8px 0; font-size: 11.5px; line-height: 1.4; color: var(--sp-ink-2); white-space: normal; }

/* ---------- The map card ---------- */
.sp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.sp-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 18px; background: var(--sp-panel); box-shadow: inset 0 0 0 .5px var(--sp-panel-line); }
.sp-trail { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 4px; font-size: 12.5px; white-space: nowrap; min-width: 0; }
.sp-trail__path { display: flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* Short of room, the crumbs give way long before the open folder does, and each name ends in an ellipsis. */
.sp-crumb { display: inline-flex; align-items: center; gap: 6px; flex: 0 10 auto; min-width: 0; overflow: hidden; color: rgb(var(--sp-mint-ink)); border-radius: 5px; }
.sp-crumb:hover { text-decoration: underline; }
.sp-trail__here { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; font-weight: 600; min-width: 0; overflow: hidden; }
.sp-trail__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-trail__disk { flex: none; font-size: 15px; color: currentColor; }
.sp-trail__here .sp-trail__disk { color: var(--sp-ink-2); }
.sp-trail__sep { flex: none; font-size: 7.5px; color: var(--sp-ink-3); }
.sp-trail__gap { flex: none; color: var(--sp-ink-3); }
.sp-trail__size { margin-left: auto; flex: none; font-size: 13px; font-weight: 600; color: var(--sp-ink-2); font-variant-numeric: tabular-nums; }
.sp-trail__note { color: var(--sp-ink-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.sp-trail__x { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 14px; color: var(--sp-ink-3); }
.sp-trail__x:hover { color: var(--sp-ink-2); }

/* ---------- The map ---------- */
.sp-map {
  position: relative; height: clamp(240px, 35vh, 360px); border-radius: 12px; overflow: hidden; isolation: isolate;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.sp-layer { position: absolute; inset: 0; transform-origin: 0 0; }
.sp-layer.is-leaving { pointer-events: none; }
.sp-t { position: absolute; overflow: hidden; cursor: pointer; transition: opacity .14s ease-out; -webkit-tap-highlight-color: transparent; }
.sp-t.is-dim { opacity: .22; }
/* Solid tiles: a gradient of the kind's colour, light catching the top edge, white words. */
.sp-t--solid, .sp-t--system { color: #fff; background: linear-gradient(rgb(var(--top)), rgb(var(--bot))); }
.sp-t--solid::before, .sp-t--system::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / var(--sp-hi)), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sp-t.is-pale { color: rgb(31 31 31 / .86); }
/* Folders shown with what's inside them: a tray of their colour with a name strip. */
.sp-t--container { color: var(--sp-ink); background: rgb(var(--rgb) / var(--sp-cont)); box-shadow: inset 0 0 0 .5px rgb(var(--rgb) / var(--sp-cont-line)); }
.sp-t--container.is-lit { background: rgb(var(--rgb) / var(--sp-cont-lit)); }
/* Many small things counted together: a scatter of dots. */
.sp-t--smaller {
  color: var(--sp-ink-2); background-color: var(--sp-fill); box-shadow: inset 0 0 0 .5px var(--sp-fill-2);
  background-image: radial-gradient(circle at 3.5px 3.05px, var(--sp-dots) 1.1px, transparent 1.6px), radial-gradient(circle at 3.5px 3.05px, var(--sp-dots) 1.1px, transparent 1.6px);
  background-size: 7px 12.18px; background-position: 0 0, 3.5px 6.09px;
}
.sp-t--smaller.is-lit { --sp-dots: var(--sp-dots-lit); }

.sp-t__label { display: flex; flex-direction: column; gap: 1px; height: 100%; min-width: 0; text-shadow: 0 .5px 1px rgb(0 0 0 / .18); }
.sp-t__label.is-big { gap: 3px; }
.sp-t.is-pale .sp-t__label { text-shadow: none; }
.sp-t__name { display: block; min-width: 0; font-weight: 600; line-height: 1.22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-t__name.is-two { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.sp-t__label .sp-t__size { line-height: 1.2; font-weight: 500; opacity: .82; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-t__label.is-big .sp-t__size { font-weight: 600; opacity: 1; letter-spacing: -.015em; }
.sp-t__label--quiet { text-shadow: none; }
.sp-t__label--quiet .sp-t__name { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; }
.sp-t__label--quiet .sp-t__name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp-t:has(> .sp-t__pick) .sp-t__label .sp-t__name { margin-right: 21px; }
.sp-t__label--quiet .sp-t__size { font-size: 10.5px; opacity: 1; }
.sp-t__head { display: flex; align-items: center; gap: 6px; padding: 0 9px; font-weight: 600; white-space: nowrap; }
.sp-d2 .sp-t__head, .sp-d3 .sp-t__head { padding: 0 7px; }
.sp-t__head .sp-t__name { flex: 0 1 auto; }
.sp-t__head .sp-t__size { margin-left: auto; flex: none; font-weight: 500; color: var(--sp-ink-2); font-variant-numeric: tabular-nums; }
.sp-t__chev { flex: none; font-size: 8.5px; color: var(--sp-ink-3); }
.sp-t__name + .sp-t__chev { margin-left: auto; }
.sp-t.is-lit .sp-t__chev { color: var(--sp-ink-2); }
.sp-t--container:has(.sp-t__pick) .sp-t__head { padding-right: 27px; }

/* Pointed at: a white ring and a little light, or for a folder a ring of its own colour. Picked: ringed in the
   page's colour with a check, the way a selected photo is. Inside something picked: a wash of the same colour. */
.sp-t::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; transition: background-color .14s ease-out, box-shadow .14s ease-out; }
.sp-t.is-lit::after { background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 2px var(--sp-ring); }
.sp-t--container.is-lit::after { background: none; box-shadow: inset 0 0 0 1.5px rgb(var(--rgb)); }
.sp-t.is-covered::after { background: rgb(var(--sp-mint) / .22); }
.sp-t.is-picked::after { background: rgb(var(--sp-mint) / .16); box-shadow: inset 0 0 0 3px rgb(var(--sp-mint)), inset 0 0 0 4px rgb(255 255 255 / .85); }
.sp-t.is-picked.is-lit::after { background: rgb(var(--sp-mint) / .16) linear-gradient(rgb(255 255 255 / .1), rgb(255 255 255 / .1)); }
.sp-t:focus-visible { outline: 2px solid var(--sp-sky); outline-offset: -4px; }
.sp-t.is-picked:focus-visible { outline-offset: -7px; }

/* The circle in a tile's corner that picks it. It shows while the tile is pointed at or focused. */
.sp-t__pick {
  position: absolute; z-index: 1; top: 8px; right: 8px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(0 0 0 / .16); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .96), 0 .5px 2px rgb(0 0 0 / .3);
  opacity: 0; pointer-events: none; transition: opacity .14s ease-out, scale .2s var(--spring);
}
.sp-t__pick::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.sp-t--container .sp-t__pick { top: 4px; right: 5px; background: var(--sp-panel); box-shadow: inset 0 0 0 1.5px var(--sp-ink-3); }
.sp-t__pick .ico { font-size: 17px; color: rgb(var(--sp-mint)); opacity: 0; transition: opacity .14s; }
.sp-t.can-pick.is-lit .sp-t__pick, .sp-t.can-pick:focus-visible .sp-t__pick { opacity: 1; pointer-events: auto; }
.sp-t.can-pick .sp-t__pick:hover { scale: 1.12; }
.sp-t.is-picked .sp-t__pick { opacity: 1; pointer-events: auto; background: #fff; box-shadow: 0 .5px 1.5px rgb(0 0 0 / .22); }
.sp-t.is-picked .sp-t__pick .ico { opacity: 1; }

/* Picked things shiver as the hold charges: a lift and a flutter that grow with the ring. */
.space.is-charging .sp-t.is-picked, .space.is-charging .sp-t.is-covered { animation: sp-flutter .18s ease-in-out infinite alternate; }
@keyframes sp-flutter {
  from { translate: calc(var(--sp-charge) * -.65px) calc(var(--sp-charge) * -1.5px); rotate: calc(var(--sp-charge) * -.25deg); }
  to { translate: calc(var(--sp-charge) * .65px) calc(var(--sp-charge) * -1.5px); rotate: calc(var(--sp-charge) * .25deg); }
}

/* ---------- The readout under the map ---------- */
.sp-readout { display: flex; align-items: center; gap: 10px; min-height: 20px; padding: 0 4px; font-size: 13px; white-space: nowrap; }
.sp-readout__icon { flex: none; font-size: 14px; color: var(--sp-ink-3); }
.sp-readout__idle { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--sp-ink-2); }
.sp-readout__what { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.sp-readout__what b { min-width: 3em; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sp-readout__dot { width: 10px; height: 10px; flex: none; border-radius: 3px; background: linear-gradient(rgb(var(--top)), rgb(var(--bot))); }
.sp-readout__dot.is-quiet { background: var(--sp-fill-2); }
.sp-readout__size { flex: none; font-variant-numeric: tabular-nums; }
.sp-readout__share { flex: none; color: var(--sp-ink-2); font-variant-numeric: tabular-nums; }
.sp-readout__where { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--sp-ink-3); }
.sp-readout__hint { flex: none; margin-left: auto; color: var(--sp-ink-2); }

/* ---------- The list beside the map ---------- */
/* SpaceExplorer: a panel as tall as the map card, with the rows scrolling inside it. Windows under 760 px leave it
   out, as the map would get too small beside it. */
.sp-list { display: none; position: relative; min-width: 0; border-radius: 18px; background: var(--sp-panel); box-shadow: inset 0 0 0 .5px var(--sp-panel-line); }
@container space (min-width: 760px) {
  .sp-main { grid-template-columns: minmax(0, 1fr) clamp(250px, 31cqw, 320px); }
  .sp-list { display: block; }
}
.sp-list__in { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sp-list__top { display: grid; justify-items: stretch; gap: 9px; padding: 11px 11px 9px; }
.sp-modes { justify-self: center; display: inline-flex; padding: 2px; border-radius: 999px; background: var(--sp-fill); box-shadow: inset 0 0 0 .5px var(--sp-fill-2); }
.sp-modes button { height: 24px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--sp-ink); transition: background-color .15s, color .15s; }
.sp-modes button[aria-checked="true"] { color: #fff; background: rgb(var(--sp-mint)); box-shadow: 0 1px 2px rgb(0 0 0 / .14), inset 0 .5px 0 rgb(255 255 255 / .3); }
.sp-modes button:focus-visible { outline-offset: 1px; }
.sp-filter { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 3px 0 9px; border-radius: 8px; font-size: 12.5px; color: var(--sp-ink-2); background: var(--sp-fill); }
.sp-filter:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-sky) 45%, transparent); }
.sp-filter > .ico { flex: none; font-size: 12.5px; }
.sp-filter input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--sp-ink); }
.sp-filter input::placeholder { color: var(--sp-ink-3); }
.sp-filter input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.sp-filter__clear, .sp-filter__sort { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; font-size: 12.5px; color: var(--sp-ink-3); }
.sp-filter__clear[hidden] { display: none; }
.sp-filter__sort { color: rgb(var(--sp-mint-ink)); }
.sp-filter__clear:hover, .sp-filter__sort:hover { background: var(--sp-hover); }
.sp-rows { flex: 1; min-height: 0; margin: 0; padding: 0 6px 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sp-rows__none { display: grid; place-items: center; height: 100%; font-size: 12.5px; color: var(--sp-ink-2); }
.sp-row { position: relative; border-radius: 10px; transition: background-color .12s ease-out; }
.sp-row + .sp-row { margin-top: 1px; }
.sp-row.is-lit { background: var(--sp-hover); }
.sp-row__main {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 9px; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px 7px 33px; border-radius: 10px; text-align: left; color: var(--sp-ink);
}
.sp-row__main:focus-visible { outline: 2px solid var(--sp-sky); outline-offset: -2px; }
.sp-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.2; }
.sp-row__text b, .sp-row__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row__text b { font-size: 13px; font-weight: 500; }
.sp-row__text small { font-size: 11px; color: var(--sp-ink-2); }
.sp-row__size { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sp-row__size b { font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-row__size i { width: 18px; height: 4px; border-radius: 2px; background: var(--sp-fill-2); }
.sp-row__chev { width: 9px; font-size: 8.5px; color: var(--sp-ink-3); }
/* The checkbox, as AppKit draws one: white with a hairline, or the page's colour with a white tick. */
.sp-check {
  position: absolute; z-index: 1; left: 9px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; border-radius: 4.5px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--sp-box); box-shadow: inset 0 0 0 .5px var(--sp-box-line), 0 .5px 1px rgb(0 0 0 / .08);
}
.sp-check:checked {
  background: rgb(var(--sp-mint)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.5l2.5 2.5 5.1-5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .1), inset 0 .5px 0 rgb(255 255 255 / .25);
}
.sp-check:disabled { opacity: .45; cursor: default; }
.sp-check:focus-visible { outline: 2px solid var(--sp-sky); outline-offset: 1px; }
.sp-check--none { pointer-events: none; background: none; box-shadow: none; }
/* Finder's icons, drawn: a folder, a page, or a tile of the kind's colour. */
.sp-ico { position: relative; display: grid; place-items: center; width: 26px; height: 26px; }
.sp-ico--tile { width: 22px; height: 22px; margin: 2px; border-radius: 6px; color: #fff; font-size: 11.5px; background: linear-gradient(rgb(var(--top)), rgb(var(--bot))); box-shadow: inset 0 .5px 0 rgb(255 255 255 / .35), 0 .5px 1px rgb(0 0 0 / .12); }
.sp-ico--folder svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-folder__back { fill: #5ea4e3; }
.sp-folder__front { fill: #8cc8f6; }
.sp-ico__glyph { position: relative; font-size: 9.5px; }
.sp-ico--folder .sp-ico__glyph { top: 2.5px; color: #3f8acb; }
.sp-ico--doc { width: 19px; height: 24px; margin: 1px 3.5px; border-radius: 2px 6px 2px 2px; background: #fdfdfe; box-shadow: 0 0 0 .5px rgb(0 0 0 / .2), 0 1px 1.5px rgb(0 0 0 / .1); }
.sp-ico--doc::before { content: ""; position: absolute; top: 0; right: 0; width: 6px; height: 6px; border-radius: 0 5px 0 1px; background: linear-gradient(225deg, transparent 48%, #dfe2e8 52%); }
.sp-ico--doc .sp-ico__glyph { top: 2px; color: #8d929c; }
.sp-list__foot { flex: none; padding: 8px 14px 9px; font-size: 11px; color: var(--sp-ink-2); border-top: .5px solid var(--sp-panel-line); }

/* ---------- The bar along the bottom ---------- */
.sp-foot { position: relative; display: flex; align-items: center; height: 74px; margin: 0 -18px; padding: 9px 16px 13px; }
.sp-foot__hint { flex: 1; text-align: center; font-size: 12.5px; color: var(--sp-ink-2); transition: opacity .2s; }
.sp-pickbar {
  position: absolute; inset: 9px 16px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .2s, transform .32s cubic-bezier(.3, 1.25, .5, 1), visibility 0s .32s;
}
.sp-foot.has-picks .sp-pickbar { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .32s cubic-bezier(.3, 1.25, .5, 1), visibility 0s; }
.sp-foot.has-picks .sp-foot__hint { opacity: 0; }
.sp-glass {
  background: var(--sp-glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px var(--sp-glass-line), 0 0 0 .5px var(--sp-glass-edge), 0 6px 20px rgb(0 0 0 / .1);
}
.sp-picked { display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 18px; border-radius: 999px; }
.sp-picked__menu { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: rgb(var(--sp-mint-ink)); }
.sp-picked__sep { width: 1px; height: 16px; background: var(--sp-fill-2); }
.sp-picked__none { font-size: 14px; color: rgb(var(--sp-mint-ink)); }
.sp-picked__menu:hover, .sp-picked__none:hover { opacity: .8; }

/* The Shoo button: Liquid Glass tinted with the page's colour, and a ring that closes around the wind. */
.sp-shoo {
  position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 10px; overflow: hidden;
  border-radius: 999px; color: #fff; text-align: left;
  background: linear-gradient(180deg, rgb(var(--sp-mint) / .9), rgb(20 154 127 / .94));
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 0 0 .5px rgb(255 255 255 / .28), inset 0 -10px 18px rgb(0 0 0 / .06),
    0 0 0 .5px rgb(0 0 0 / .08), 0 8px 22px rgb(var(--sp-mint) / .36);
  user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none;
  transition: transform .32s cubic-bezier(.3, 1.25, .5, 1), filter .2s;
}
.sp-shoo:focus-visible { outline-offset: 3px; }
.space.is-charging .sp-shoo { transform: scale(.985); }
.sp-foot.is-busy .sp-shoo { cursor: default; filter: saturate(.85); }
/* Light gathers in the glass as you hold. */
.sp-shoo__light {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(56px + (100% - 56px) * var(--sp-charge)); border-radius: 999px;
  background: rgb(255 255 255 / .22); opacity: min(1, calc(var(--sp-charge) * 60)); pointer-events: none;
}
.sp-shoo__ring { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; }
.sp-shoo__ring svg:not(.ico) { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.sp-shoo__ring circle { fill: none; stroke-width: 2.5; }
.sp-shoo__track { stroke: rgb(255 255 255 / .3); }
.sp-shoo__fill { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--sp-charge) * 100); opacity: min(1, calc(var(--sp-charge) * 100)); }
.sp-shoo__wind { position: relative; font-size: 17px; }
.space.is-charging .sp-shoo__wind { animation: sp-stir .42s ease-in-out infinite alternate; }
.sp-shoo.is-nudged .sp-shoo__wind { animation: sp-wiggle .5s ease-in-out; }
.sp-shoo.is-fired .sp-shoo__wind { animation: sp-leap .5s cubic-bezier(.3, 1.6, .5, 1); }
.sp-shoo__text { position: relative; display: flex; flex-direction: column; min-width: 128px; line-height: 1.25; }
.sp-shoo__text b { font-size: 15px; font-weight: 600; }
.sp-shoo__text small { font-size: 12.5px; opacity: .88; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes sp-stir { from { opacity: .55; } to { opacity: 1; } }
@keyframes sp-wiggle { 20% { rotate: -14deg; } 45% { rotate: 10deg; } 70% { rotate: -5deg; } 100% { rotate: 0deg; } }
@keyframes sp-leap { 40% { translate: 0 -5px; } 100% { translate: 0 0; } }
@keyframes sp-pop-in { from { opacity: 0; translate: 0 -4px; } }

/* What a cleanup says when it's done, with Undo. */
.sp-toast {
  position: absolute; left: 50%; bottom: 50%; z-index: 9; translate: -50% 50%;
  display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 7px; border-radius: 999px; white-space: nowrap;
}
.sp-toast[hidden] { display: none; }
.sp-toast.is-on { animation: sp-toast-in .38s cubic-bezier(.3, 1.25, .5, 1); }
.sp-toast__tile { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7.5px; color: #fff; font-size: 14px; background: linear-gradient(#5ad67a, #2cb150); box-shadow: inset 0 .75px 0 rgb(255 255 255 / .42); }
.sp-toast.is-on .sp-toast__tile { animation: sp-bounce .5s .12s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.sp-toast__text { display: flex; flex-direction: column; line-height: 1.25; }
.sp-toast__text b { font-size: 13.5px; font-weight: 600; }
.sp-toast__text span { font-size: 12px; color: var(--sp-ink-2); font-variant-numeric: tabular-nums; }
.sp-toast__undo { padding: 0 4px 0 8px; font-size: 13.5px; font-weight: 600; color: rgb(var(--sp-mint-ink)); }
.sp-toast__x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 9px; color: var(--sp-ink-2); background: var(--sp-fill); }
@keyframes sp-toast-in { from { opacity: 0; translate: -50% calc(50% + 16px); scale: .96; } }
/* The toast takes the hint's place while it's up. */
.sp-foot:has(.sp-toast:not([hidden])) .sp-foot__hint { opacity: 0; }
@keyframes sp-bounce { from { scale: .4; } }

/* The gust and its motes, drawn past the window's edges. */
.sp-air { position: absolute; left: -80px; top: -40px; z-index: 6; width: calc(100% + 220px); height: calc(100% + 80px); pointer-events: none; }

/* Full screen, from the green light. */
.space:fullscreen { max-width: none; }
.space:fullscreen .sp-body { flex: 1; min-height: 0; width: min(100%, 1180px); margin: 0 auto; }
.space:fullscreen .sp-card { flex: 1; min-height: 0; }
.space:fullscreen .sp-map { flex: 1; height: auto; min-height: 260px; }

/* ---------- The hero's layout ---------- */
/* Side by side, the window's bottom bar (where Hold to shoo is) and the note under it end about 80 px from the bottom
   of the screen: the map gives up height on short screens, down to 200 px. 590 px is the rest of the window, the note,
   the hero's top padding and some air below. */
@media (min-width: 1001px) {
  .apphero--shoo .apphero__inner { padding-top: clamp(72px, 9vh, 112px); }
  .sp-map { height: clamp(200px, 100vh - 590px, 440px); height: clamp(200px, 100svh - 590px, 440px); }
}
/* Up to 1180 px the window is narrower, so its header and legend wrap onto more lines and the map gives up 30 px more. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .sp-map { height: clamp(180px, 100vh - 620px, 440px); height: clamp(180px, 100svh - 620px, 440px); }
}
/* Wide screens give the window room for the list beside the map, as the app has it. */
@media (min-width: 1181px) {
  .apphero--shoo .apphero__inner {
    width: min(1400px, 100% - 64px); grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: clamp(36px, 3.6vw, 60px);
  }
  .apphero--shoo .wordmark--app { font-size: clamp(4.5rem, 9vw, 9rem); }
  .apphero--shoo .apphero__lede { font-size: clamp(1.3rem, 1.75vw, 1.7rem); }
  .space { max-width: 1000px; }
}
/* Stacked, the window can take the column's whole width, and Shoo's cloud floats at its right corner, clear of the
   button above it (the shared rule leaves it on the left until phones). */
@media (max-width: 1000px) {
  .space { max-width: 920px; margin-inline: auto; }
  .apphero--shoo .apphero__stage { margin-top: 22px; }
  .apphero__stage .mascot--map { width: 140px; left: auto; right: -14px; top: -58px; }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .space { max-width: none; }
  .space .win__bar.sp-toolbar { height: 48px; padding: 0 12px 0 14px; }
  .sp-body { padding: 0 12px; }
  .sp-head { gap: 6px 12px; }
  /* The sentence goes under the title and the number, across the window. */
  .sp-head__text { display: contents; }
  .sp-head__free { grid-column: 3; grid-row: 1; }
  .sp-head__sub { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  /* Shoo's cloud floats above the window rather than over its toolbar, clear of the button above it. */
  .apphero__stage .mascot--map { width: 116px; top: -70px; right: 2px; }
  .sp-glyph { width: 38px; height: 38px; font-size: 18px; }
  .sp-head__title { font-size: 19px; }
  .sp-head__free b { font-size: 23px; }
  .sp-head__free span { font-size: 11px; }
  .sp-diskbar { margin-top: 12px; height: 11px; }
  .sp-card { padding: 8px; border-radius: 16px; margin-top: 10px; }
  .sp-map { height: 300px; border-radius: 10px; }
  .sp-readout { flex-wrap: wrap; align-content: center; row-gap: 1px; min-height: 38px; font-size: 12.5px; }
  .sp-readout__what { flex: 1 1 100%; }
  .sp-readout__hint { margin-left: 0; }
  .sp-readout__idle { white-space: normal; }
  .sp-foot { height: 72px; margin: 0 -12px; padding: 10px 10px 12px; }
  .sp-pickbar { inset: 10px 10px 12px; gap: 8px; }
  .sp-picked { gap: 9px; height: 42px; padding: 0 13px; }
  .sp-picked__menu, .sp-picked__none { font-size: 13px; }
  .sp-narrow-hide { display: none; }
  .sp-shoo { gap: 9px; height: 50px; padding: 0 16px 0 7px; }
  .sp-shoo__text { min-width: 0; }
  .sp-shoo__text b { font-size: 14px; }
  .sp-shoo__text small { font-size: 12px; }
  .sp-toast { gap: 9px; }
  .sp-pages { width: min(280px, calc(100vw - 48px)); }
  .sp-trail { gap: 6px; }
}

/* "Coming soon" is a status in the meta line rather than a pill that looks like a button, so the email button is the
   hero's one call to action. */
.apphero__soon { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink); }
.apphero__soon .soon__dot { flex: none; }

/* Reduce Motion: the ring still fills, since it's the hold's progress, but nothing else moves. */
@media (prefers-reduced-motion: reduce) {
  .space.is-charging .sp-shoo { transform: none; }
}

/* =====================================================================================================================
   Below the hero: the bands (shoo/index.html, "Headline bands"). Site parts use the site's tokens; the mockups of the
   app's own parts (the confidence meter, the AI tools card, the menu bar graph) follow Shoo's Theme.swift.
   ===================================================================================================================== */

/* ---------- Colours ---------- */
/* --shoo-eb-*: each band's page colour as eyebrow text, deepened by day and lightened at night to read at 4.5:1 or more. */
:root {
  --shoo-certain: #34c759; --shoo-likely: #1c94ff; --shoo-off: rgb(0 0 0 / .16);
  --shoo-cursor: #4c5973; --shoo-no: #e0454c;
  --mbx-tint: rgb(255 255 255 / .55); --mbx-ink: rgb(0 0 0 / .85);
  --shoo-eb-apps: #2f5be8; --shoo-eb-ai: #a84f2c; --shoo-eb-history: #5c6789; --shoo-eb-activity: #6a45e6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shoo-certain: #30d158; --shoo-likely: #3aa3ff; --shoo-off: rgb(255 255 255 / .16);
    --shoo-cursor: #9eadc7; --shoo-no: #ff6961;
    --mbx-tint: rgb(28 28 34 / .62); --mbx-ink: rgb(255 255 255 / .92);
    --shoo-eb-apps: #8aa4ff; --shoo-eb-ai: #ec8f6c; --shoo-eb-history: #a3adc9; --shoo-eb-activity: #b39dff;
  }
}
:root[data-theme="dark"] {
  --shoo-certain: #30d158; --shoo-likely: #3aa3ff; --shoo-off: rgb(255 255 255 / .16);
  --shoo-cursor: #9eadc7; --shoo-no: #ff6961;
  --mbx-tint: rgb(28 28 34 / .62); --mbx-ink: rgb(255 255 255 / .92);
  --shoo-eb-apps: #8aa4ff; --shoo-eb-ai: #ec8f6c; --shoo-eb-history: #a3adc9; --shoo-eb-activity: #b39dff;
}

/* ---------- Bands ---------- */
/* Text on one side, something from the app on the other, swapping sides down the page. Each band takes its page's
   colour from the app: Apps for the proof, Claude for the AI tools, History for undo, Activity for the last. */
.band {
  --band-tint: #3d6bff; --band-ink: var(--shoo-eb-apps);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 34px clamp(32px, 5vw, 72px); align-items: start;
  margin-top: 150px;
}
#ai-rules { --band-tint: #d97757; --band-ink: var(--shoo-eb-ai); }
#undo { --band-tint: #6e7a9e; --band-ink: var(--shoo-eb-history); }
#right-now { --band-tint: #805cff; --band-ink: var(--shoo-eb-activity); }
.band--flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.band--flip > .band__text { grid-column: 2; grid-row: 1; }
.band--flip > .band__visual { grid-column: 1; grid-row: 1; }
.band__wide { grid-column: 1 / -1; }
/* The heading, lede and facts are set as Weir's bands are (weir.css, .wband), in Shoo's colours. */
.band__text { padding-top: 8px; }
.band__eyebrow { font-size: 15px; font-weight: 600; color: var(--band-ink); }
.band .band__title { margin-top: 10px; font-size: clamp(1.75rem, 2.9vw, 2.5rem); line-height: 1.08; font-weight: 700; }
/* Three levels, so the band can be skimmed: the lede makes the point in one sentence, the body explains it, and the
   facts below the hairline give the specifics. */
.band__lede { margin-top: 18px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.42; color: var(--ink); }
.band__body { margin-top: 12px; font-size: clamp(15.5px, 1.15vw, 16.5px); line-height: 1.55; color: var(--ink-2); }
.band__facts { display: grid; gap: 12px; margin: 24px 0 0; padding: 22px 0 0; list-style: none; border-top: .5px solid var(--line); }
.band__facts li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.band__facts li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--band-tint); opacity: .8; }
.band code, .never code { font: 13px/1.4 var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--fill); color: var(--ink); }
.band__visual { min-width: 0; }

/* A screenshot cut to one part of the window. --cx/--cy/--cw/--ch are the part, in the screenshot's pixels. */
.crop { --w: 1880; --h: 1344; position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--cw) / var(--ch); border-radius: 20px; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-lg); }
.crop img { position: absolute; max-width: none; height: auto; width: calc(100% * var(--w) / var(--cw)); left: calc(-100% * var(--cx) / var(--cw)); top: calc(-100% * var(--cy) / var(--ch)); }

/* ---------- Uninstall with proof ---------- */
.proof__table { padding: 6px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); }
.proof__head, .proof__row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 100px; align-items: center; gap: 18px; padding: 12px 16px 14px; }
.proof__head { padding-block: 10px 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.proof__head > :nth-child(2) { text-align: right; }
.proof__row { position: relative; font-size: 15px; border-radius: 12px; }
.proof__row:nth-child(even) { background: var(--fill); }
/* Each weight as a bar along the bottom of its row, in its label's colour, filled in as the band arrives. */
.proof__row::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 3px; border-radius: 2px;
  background: var(--shoo-certain); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease);
}
.proof__row:has(.meter--2)::after { background: var(--shoo-likely); }
.proof__row:has(.meter--1)::after { background: var(--ink-3); }
.band.is-in .proof__row::after { transform: scaleX(calc(var(--w) / 100)); }
.proof__row:nth-child(n+4)::after { transition-delay: .06s; } .proof__row:nth-child(n+6)::after { transition-delay: .12s; }
.proof__row:nth-child(n+8)::after { transition-delay: .18s; } .proof__row:nth-child(n+10)::after { transition-delay: .24s; }
.proof__w { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The top four show until the button opens the rest (shoo.js, "The evidence weights"); without scripts, all 17 do. */
.js .proof:not(.is-all) .proof__more { display: none; }
html:not(.js) .proof__toggle { display: none; }
.proof__toggle {
  margin-top: 12px; height: 32px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--ink); background: var(--fill-2); transition: background-color .15s;
}
.proof__toggle:hover { background: color-mix(in srgb, var(--fill-2) 100%, var(--ink) 6%); }
.proof__note { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.proof__tiers { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.proof__tiers li { display: inline-flex; align-items: center; gap: 10px; }
/* Shoo's ConfidencePill: a little signal meter, three bars for Certain, two for Likely, one for Possible. */
.meter {
  --m1: var(--shoo-off); --m2: var(--shoo-off); --m3: var(--shoo-off);
  display: inline-flex; align-items: center; justify-self: start; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--ink-2); background: var(--fill);
}
.meter::before {
  content: ""; flex: none; width: 12px; height: 11px;
  background: linear-gradient(var(--m1), var(--m1)) 0 100% / 3px 6px no-repeat, linear-gradient(var(--m2), var(--m2)) 4.5px 100% / 3px 8.5px no-repeat,
    linear-gradient(var(--m3), var(--m3)) 9px 100% / 3px 11px no-repeat;
}
.meter--3 { --m1: var(--shoo-certain); --m2: var(--shoo-certain); --m3: var(--shoo-certain); }
.meter--2 { --m1: var(--shoo-likely); --m2: var(--shoo-likely); }
.meter--1 { --m1: var(--ink-2); }

/* ---------- Tidies up after AI tools ---------- */
/* The AI tools card on Shoo's Overview, with a chip for every AI page. */
.aicard { padding: 22px 24px 24px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-md); }
.aicard__head { display: flex; align-items: center; gap: 14px; font-size: 19px; }
.aicard__head b { font-weight: 600; }
.aicard__tile {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 23.5%; color: #fff; font-size: 22px;
  background: linear-gradient(140deg, #34c48c, #f0a43a 40%, #d65c8f 68%, #5c66f2);
  box-shadow: inset 0 .75px 0 rgb(255 255 255 / .42), 0 1.5px 3px rgb(0 0 0 / .16);
}
.aicard__total { margin-top: 18px; color: var(--ink-2); }
.aicard__total b { margin-right: 6px; font: 600 34px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.aicard__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.aicard__chips a {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink); background: var(--fill); transition: background-color .15s;
}
.aicard__chips a:hover { background: var(--fill-2); }
.aicard__chips .ico { font-size: 15px; color: var(--tint); }
.aicard__chips span { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.aicard__cursor { --tint: var(--shoo-cursor); }
.never { margin-top: 16px; padding: 18px 22px; border-radius: 18px; background: var(--fill); }
.never__title { font-size: 15px; font-weight: 600; }
.never p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
/* Short names, so each stays on one line: output-styles would otherwise break at its hyphen. */
.never code { white-space: nowrap; }
/* Every AI tool Shoo knows, one row per family: the family's page and colour, then its tools. */
.aitools { padding: 22px 24px 10px; border-radius: 20px; box-shadow: inset 0 0 0 .5px var(--line); }
.aitools__title { font-size: 17px; font-weight: 600; }
.aitools__sub { margin-top: 2px; font-size: 14.5px; color: var(--ink-2); }
.aitools__list { margin: 14px 0 0; }
.aitools__list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 11px 0 12px; border-top: .5px solid var(--line); }
.aitools__list dt { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; }
.aitools__list dt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tint); }
.aitools__list dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.aitools__cursor { --tint: var(--shoo-cursor); }

/* ---------- Nothing is gone until you empty the Trash ---------- */
/* The gate's answers: each path, and under it what the gate says. */
.gate { padding-top: 8px; }
.gate__title { font-size: 19px; font-weight: 600; }
.gate__lede { margin: 6px 0 16px; font-size: 15px; color: var(--ink-2); }
.gate__table { overflow: hidden; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); }
.gate__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gate__row { display: grid; gap: 3px; padding: 11px 20px 12px; font-size: 14.5px; }
.gate__row + .gate__row { border-top: .5px solid var(--line); }
.gate__row > :last-child { display: flex; gap: 8px; font-size: 14px; color: var(--ink-2); }
.band > .crop.band__wide { margin-top: 10px; }
/* A small no-entry sign: the gate said no. */
.gate__row > :last-child::before {
  content: ""; flex: none; align-self: center; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  border: 1.6px solid var(--shoo-no); background: linear-gradient(45deg, transparent 43%, var(--shoo-no) 43% 57%, transparent 57%);
}

/* ---------- The menu bar graph ---------- */
.mbx { margin-bottom: 18px; padding: 16px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-md); }
/* A stretch of menu bar over a wallpaper, with Shoo's item at its right. */
.mbx__bar {
  display: flex; justify-content: flex-end; align-items: center; height: 32px; padding: 0 10px; border-radius: 10px; overflow: hidden; color: var(--mbx-ink);
  background: linear-gradient(var(--mbx-tint), var(--mbx-tint)), linear-gradient(100deg, #8fb9ee, #b9aef0 55%, #f0bfd3);
  box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .06);
}
/* Like the real menu bar, what doesn't fit slips off the left. */
.mbx__item { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 24px; padding: 0 7px; }
.mbx__seg { display: inline-flex; align-items: center; gap: 4px; }
.mbx__graph { flex: none; width: 24px; height: 13px; overflow: visible; }
.mbx__graph .mbx__base { fill: currentColor; opacity: .4; }
.mbx__graph .mbx__area { fill: currentColor; opacity: .35; }
.mbx__graph .mbx__line { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.mbx__num { font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mbx__num--two { display: flex; flex-direction: column; gap: 1px; font-size: 9px; }
.mbx__picks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 14px; }
.mbx__metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.mbx__metrics button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--fill); transition: background-color .15s, color .15s;
}
.mbx__metrics button .ico { font-size: 14px; color: var(--m); opacity: .55; }
.mbx__metrics button[aria-pressed="true"] { color: var(--ink); background: var(--bg-raised); box-shadow: 0 0 0 .5px var(--line), 0 1px 3px rgb(0 0 0 / .1); }
.mbx__metrics button[aria-pressed="true"] .ico { opacity: 1; }
:root[data-theme="dark"] .mbx__metrics button[aria-pressed="true"] { background: rgb(255 255 255 / .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mbx__metrics button[aria-pressed="true"] { background: rgb(255 255 255 / .14); } }
/* A switch, the way AppKit draws a small one. */
.mbx__graphs { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.mbx__graphs input {
  position: relative; width: 30px; height: 18px; margin: 0; border-radius: 999px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--fill-2); transition: background-color .2s;
}
.mbx__graphs input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: translate .2s var(--spring);
}
.mbx__graphs input:checked { background: #805cff; }
.mbx__graphs input:checked::after { translate: 12px 0; }
.mbx__note { margin-top: 12px; font-size: 12px; color: var(--ink-3); }

@media (max-width: 900px) {
  .band, .band--flip { grid-template-columns: minmax(0, 1fr); margin-top: 110px; }
  .band--flip > .band__text, .band--flip > .band__visual { grid-column: auto; grid-row: auto; }
}
@media (max-width: 760px) {
  .band { margin-top: 90px; gap: 26px; }
  .proof__table { padding: 4px; }
  .proof__head { display: none; }
  .proof__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 12px 12px 15px; font-size: 14.5px; }
  .proof__row > :first-child { grid-column: 1 / -1; }
  .proof__w { text-align: left; }
  .proof__row .meter { justify-self: end; }
  .proof__row::after { left: 12px; right: 12px; }
  .gate__row { padding: 11px 16px 12px; }
  .aicard { padding: 18px; }
  .aitools { padding: 18px 18px 6px; }
  .aitools__list > div { grid-template-columns: minmax(0, 1fr); }
  /* Too narrow for six readings in a row: the strip wraps onto a second line, so a reading switched on never slips
     out of sight. */
  .mbx__bar { height: auto; min-height: 32px; padding: 4px 10px; }
  .mbx__item { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; height: auto; min-height: 24px; }
}

/* ---------- Under the hood ---------- */
/* The specs fold away behind one row, drawn like the questions' rows. */
.specs__more { border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 .5px var(--line), var(--shadow-sm); }
.specs__more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px;
  font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; transition: background-color .15s;
}
.specs__more > summary::-webkit-details-marker { display: none; }
.specs__more > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease);
}
.specs__more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.specs__more > summary:hover { background: var(--fill); }
.specs__more .specs__list { border-radius: 0; background: none; box-shadow: none; border-top: .5px solid var(--line); }

/* The link from the More assistants caption down to the list of every AI tool. */
.tour[data-tour="shoo"] p a { color: var(--link); }
.tour[data-tour="shoo"] p a:hover { text-decoration: underline; }

/* ---------- The tour's sidebar ---------- */
/* Shoo's sidebar badges are set a little smaller than Weir's (calibrated over the screenshots at 2x). */
@media (min-width: 1001px) { .tour[data-tour="shoo"] .tour__badge { font-size: calc(10.4 * var(--u)); } }