/* Get Less Chaos: A Place for Everything. Support page only (r05-support-c), on top of pages.css.

   THE SHADOW BOARD. The three things to include in a message are a foam insert, like a tool case: each has a pocket
   cut to its shape, green underneath (the system's slot floor), with a finger notch beside it. A missing piece shows
   its green, so the board says at a glance what's missing, which is what a good support message needs. The pieces
   are pressed home as the board arrives. The third pocket ("what you expected") is round, and its piece ("what
   happened instead") is square: it tries, it doesn't fit, and it settles crooked over the hole. At rest that green
   crescent is the only green left on the board.

   Composition: on wide screens the help block is a spread, the sentence (with its copy piece and the reply-time
   tape) on the left and the board on the right, one row per thing, like the homepage's address tray. Narrower, it
   stacks: words, board, tape.

   Layers of a piece: .sb__cut (the pocket and its notch) > .sb__pocket (the cut) > .sb__pc (travel: GSAP moves it;
   at rest it has no transform) > .sb__pose (the square's crooked rest, in % of its own size) > .sb__obj (what you
   see; hover lifts it). Sizes scale with --u (1 on wide screens), so a resize mid-animation never strands anything. */

@property --sbh { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------------------------------------------------------------- the spread (wide screens) */
@media (min-width: 1001px) {
  .sb-kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 5.4vw, 88px); }
  .sb-kit > .say { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-5); align-self: start; container-type: inline-size; }
  .sb-kit > .say .copy { justify-self: start; margin-top: 0; }
  .sb-kit > .sb { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .sb-kit > .sb-note { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--space-6); }
  /* the address stays whole on its line: the sentence's size follows its column (the address and its full stop
     are about 14.7 of their own ems) */
  .sb-kit .help__lead { font-size: min(1.75rem, 6.4cqi); }
  .sb-kit .help__lead .addr { white-space: nowrap; }
}

/* ---------------------------------------------------------------- the board: one row per thing */
.sb {
  --u: 1; --k: 2px;
  list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.sb__place {
  position: relative; display: grid; grid-template-columns: calc(var(--u) * 150px) minmax(0, 1fr); align-items: center;
  column-gap: clamp(14px, 2.6vw, 36px); padding: clamp(10px, 1.1vw, 14px) 0; min-width: 0;
}
.sb__place:first-child { padding-top: 0; }
.sb__place:last-child { padding-bottom: 0; }
/* a milled groove between the rows: a shadowed wall and a lit lip (the homepage's rules bar) */
.sb__place + .sb__place { box-shadow: inset 0 1px 0 var(--kerf), inset 0 2px 0 var(--lip-a); }
.sb__place.is-busy { z-index: 5; }   /* a piece on its way somewhere passes over the others */
.sb__place.is-held { z-index: 6; }
.sb__stage { position: relative; display: flex; align-items: center; justify-content: center; height: calc(var(--u) * 124px + 26px); }
.sb__words { display: block; color: var(--ink); font-size: var(--text-lg); font-weight: 560; line-height: 1.4; max-width: 24ch; text-wrap: pretty; }

/* a pocket and its finger notch: a small neutral cut on its right, where a finger goes to lift the piece out, as in
   any tool case. The pocket is drawn over the notch */
.sb__cut { position: relative; display: block; flex: none; }
.sb__notch {
  position: absolute; top: 50%; right: calc(var(--u) * -14px); width: calc(var(--u) * 30px); height: calc(var(--u) * 30px); margin-top: calc(var(--u) * -15px);
  border-radius: 50%; background: linear-gradient(var(--cut-floor-top), var(--cut-floor-bot));
  box-shadow: inset 1px 5px 0 -1px color-mix(in srgb, var(--cut-edge) 34%, transparent), inset 2px 10px 10px -4px color-mix(in srgb, var(--cut-edge) 22%, transparent), 0 1px 0 var(--lip-a);
}

/* ---------------------------------------------------------------- the pockets: green floor, deep cut, a 2 px kerf wall
   while the piece is home (never green at rest, as every seated piece on the site) */
.sb__pocket {
  position: relative; display: block; flex: none;
  background: var(--board-grain), linear-gradient(var(--floor-top), var(--floor-bot));
  box-shadow: inset 0 0 0 var(--k) var(--kerf), var(--z-sunk-2);
  transition: box-shadow .16s var(--ease-settle);
}
.sb__pocket--tile { width: calc(var(--u) * 96px + 2 * var(--k)); height: calc(var(--u) * 96px + 2 * var(--k)); border-radius: calc(var(--u) * 24px + var(--k)); }
.sb__pocket--phone { width: calc(var(--u) * 66px + 2 * var(--k)); height: calc(var(--u) * 124px + 2 * var(--k)); border-radius: calc(var(--u) * 16px + var(--k)); }
.sb__pocket--round { width: calc(var(--u) * 96px); height: calc(var(--u) * 96px); border-radius: 50%; box-shadow: var(--z-sunk-2); }
/* out of its pocket (arriving, or in the hand): the green shows, and the cut's wall is the shadow alone */
html.js.motion .sb__place:not(.is-home) .sb__pocket, .sb__place.is-held .sb__pocket { box-shadow: var(--z-sunk-2); }
/* the foam pushes back as a piece goes home: a ring spreads and fades (the homepage's glc-rim, same timing and
   spread: 300ms, 3px; seams pass 2026-10-25, was .34s and 4px) */
.sb__pocket::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.sb__pocket.is-ring::after { animation: sb-rim 300ms var(--ease-settle); }
@keyframes sb-rim { from { box-shadow: 0 0 0 0 var(--rim); } 40% { box-shadow: 0 0 0 2px var(--rim); } to { box-shadow: 0 0 0 3px transparent; } }

/* ---------------------------------------------------------------- the pieces */
.sb__pc { position: absolute; z-index: 1; inset: var(--k); display: block; transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sb__pocket--round .sb__pc { inset: 0; }
.sb__pose { position: absolute; inset: 0; display: block; }
.sb__obj {
  --zz: calc(var(--z, 0) + var(--sbh, 0) + var(--sbr, 0));
  position: absolute; inset: 0; display: block; overflow: hidden;
  background: linear-gradient(170deg, color-mix(in oklab, var(--ink) 90%, #fff) 0%, var(--ink) 46%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1.5px 0 rgba(0,0,0,.3),
    0 calc(var(--zz) * .7px) calc(var(--zz) * 1.2px) calc(var(--zz) * -.25px) var(--lift-a),
    0 calc(var(--zz) * .22px) calc(var(--zz) * .4px) 0 var(--lift-a-2);
  transform-origin: calc(50% - var(--side, -1) * 30%) 100%;
  /* the site's hover timing (--dur-hover, as the cards, copy pieces and buttons; seams pass, was .34s / .3s) */
  transition: transform var(--dur-hover) var(--ease-spring), --sbh var(--dur-hover) var(--ease-settle);
}
/* the app (or game): a tile with a strip of label tape (its version) across one corner */
.sb__obj--tile { border-radius: calc(var(--u) * 24px); }
.sb__label {
  position: absolute; left: -7%; bottom: 16%; width: 68%; height: 17%; border-radius: 1.5px; transform: rotate(-8deg);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--ink) 62%, transparent) 0 14%, transparent 14% 20%, color-mix(in oklab, var(--ink) 62%, transparent) 20% 30%, transparent 30% 36%, color-mix(in oklab, var(--ink) 62%, transparent) 36% 58%, transparent 58% 64%, color-mix(in oklab, var(--ink) 62%, transparent) 64% 74%, transparent 74%) 66% 52% / 50% 22% no-repeat,
    var(--board);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.28);
}
/* the phone: a screen and a camera */
.sb__obj--phone { border-radius: calc(var(--u) * 16px); }
.sb__screen { position: absolute; inset: calc(var(--u) * 4.5px); border-radius: calc(var(--u) * 11.5px); background: linear-gradient(170deg, color-mix(in oklab, var(--ink) 74%, var(--board)) 0%, color-mix(in oklab, var(--ink) 86%, var(--board)) 60%); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.sb__cam { position: absolute; left: 50%; top: calc(var(--u) * 11px); width: calc(var(--u) * 6px); height: calc(var(--u) * 6px); margin-left: calc(var(--u) * -3px); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 60%, var(--board)); }
/* what happened instead: square, over the round pocket of what you expected. It rests crooked on the rim, a little
   off the foam (--sbr), so the green shows on one side */
.sb__obj--square { border-radius: calc(var(--u) * 13px); --sbr: 5; }
.sb__place--odd { --ox: 20; --oy: -17; --or: -12; }
.sb__place--odd .sb__pose { transform: translate(calc(var(--ox) * 1%), calc(var(--oy) * 1%)) rotate(calc(var(--or) * 1deg)); }

/* ---------------------------------------------------------------- before the board arrives (motion only): the pieces
   lie tipped out over their pockets, every pocket green. support.js presses them home (and takes over these numbers,
   so keep them here: --tx/--ty in --u px, --tr in degrees) */
.sb__place--tile { --tx: 20; --ty: -16; --tr: 17; }
.sb__place--phone { --tx: -14; --ty: 6; --tr: -21; }
.sb__place--odd { --tx: -26; --ty: -14; --tr: -22; }
html.js.motion .sb__place:not(.is-taken) .sb__pc { transform: translate(calc(var(--tx) * var(--u) * 1px), calc(var(--ty) * var(--u) * 1px)) rotate(calc(var(--tr) * 1deg)); }
html.js.motion .sb__place:not(.is-taken) .sb__obj, .sb__place.is-lying .sb__obj { --sbr: 4; }
html.failsafe .sb__pc { transform: none !important; }
html.failsafe .sb__place:not(.sb__place--odd) .sb__pocket { box-shadow: inset 0 0 0 var(--k) var(--kerf), var(--z-sunk-2); }

/* ---------------------------------------------------------------- hand: hover lifts a seated piece, the side you touch
   first (the green shows under it); the square tries its hole instead (support.js) */
@media (hover: hover) and (pointer: fine) {
  html.js.motion .sb__pc { cursor: grab; }
  html.js.motion .sb__place.is-home:not(.is-busy) .sb__pc:hover .sb__obj { transform: translateY(calc(var(--u) * -6px)) rotate(calc(var(--side, -1) * -2deg)); --sbh: 7; }
}
html.js.motion .sb__place.is-held .sb__pc { cursor: grabbing; }
.sb__place.is-held .sb__obj { transition: none; }

/* ---------------------------------------------------------------- how soon: label-maker tape, one strip per line as a
   label maker prints it (side by side when there's room), stuck on as the board completes */
.help__note.sb-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-top: clamp(26px, 3vw, 40px); color: inherit; font-size: inherit; }
.sb-tape {
  --r: -1.2deg;
  height: auto; min-height: 28px; max-width: 100%; padding: 6px .8em;   /* the Privacy and Terms date tape's size and */
  font-size: 12px; line-height: 1.3; white-space: normal;               /* spacing (seams pass, was .85em/.9em and .09em) */
  transform: rotate(var(--r)); transform-origin: 0 50%;
}
.sb-tape + .sb-tape { --r: .8deg; }
@keyframes sb-tape-on { from { transform: translate(-6px, -14px) rotate(-6deg); opacity: 0; } 40% { opacity: 1; } to { transform: rotate(var(--r)); } }
html.js.motion .sb-note:not(.is-stuck) .sb-tape { opacity: 0; }
html.js.motion .sb-note.is-stuck .sb-tape { animation: sb-tape-on .42s var(--ease-seat) both; }
html.js.motion .sb-note.is-stuck .sb-tape + .sb-tape { animation-delay: .16s; }
html.failsafe .sb-tape { opacity: 1 !important; }

/* ---------------------------------------------------------------- sizes */
@media (max-width: 1000px) { .sb { --u: .8; } .sb__place { grid-template-columns: calc(var(--u) * 150px) minmax(0, 1fr); } }
@media (max-width: 760px) {
  .sb { --u: .6; }
  .sb__place { grid-template-columns: calc(var(--u) * 140px) minmax(0, 1fr); column-gap: clamp(12px, 3.6vw, 18px); padding: 12px 0; }
  .sb__place:first-child { padding-top: 2px; }
  .sb__place:last-child { padding-bottom: 4px; }
  .sb__stage { height: calc(var(--u) * 124px + 22px); }
  .sb__words { font-size: var(--text-md); max-width: 30ch; }
}
/* the smallest phones: each strip of tape stays on one line */
@media (max-width: 400px) { .sb-tape { font-size: 10.5px; letter-spacing: .05em; padding-inline: .7em; } }

/* ---------------------------------------------------------------- reduced motion: the rest state, still and complete
   (the square still rests crooked: that is the picture, not a motion) */
@media (prefers-reduced-motion: reduce) {
  .sb__obj { transition: none; }
  .sb-tape { opacity: 1 !important; animation: none !important; }
}