/* ==========================================================================
   Toolbox section on the homepage (Option B from tools-options.html).
   Self-contained so it doesn't depend on the tools pages' stylesheets.
   ========================================================================== */

.toolbox { --mono: "IBM Plex Mono", ui-monospace, monospace; width: min(1240px, 100% - var(--gutter) * 2); margin: 0 auto; padding: 32vh 0 6vh; scroll-margin-top: 40px; }
.toolbox .kicker { margin-bottom: 4vh; }
.toolbox .more { display: inline-block; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .3s; }
.toolbox .more:hover { color: var(--blue-ink); }

/* Controls */
.toolbox .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.toolbox .chips button { font: 500 13px/1 var(--sans); color: var(--ink-soft); background: transparent; border: 1px solid rgba(22,21,20,.15);
  border-radius: 999px; padding: 8px 12px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.toolbox .chips button:hover { color: var(--ink); border-color: rgba(22,21,20,.4); }
.toolbox .chips button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Curve editor */
.toolbox .ease-graph { width: 100%; height: auto; overflow: visible; touch-action: none; }
.toolbox .g-linear { stroke: rgba(22,21,20,.12); stroke-dasharray: 4 5; }
.toolbox .g-arm { stroke: var(--blue-ink); stroke-width: 1.2; }
.toolbox .g-curve { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.toolbox .g-end { fill: var(--ink); }
.toolbox .g-handle { fill: var(--paper); stroke: var(--blue-ink); stroke-width: 2; cursor: grab; transition: r .2s; }
.toolbox .g-handle:hover, .toolbox .g-handle:focus { r: 13; outline: none; }
.toolbox .g-handle:focus-visible { fill: var(--blue-soft); stroke-width: 3; }   /* tabbed to: filled as well as bigger, so it reads as selected */
.toolbox .g-handle.drag { cursor: grabbing; fill: var(--blue-soft); }

/* Header + cards */

.b-head { display: flex; justify-content: space-between; align-items: end; gap: 48px; flex-wrap: wrap; margin-bottom: 7vh; }
.b-head .display { max-width: 8em; flex: 0 1 auto; }
.b-intro { flex: 0 1 21em; min-width: 16em; }
.b-intro p { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-soft); }
@media (min-width: 900px) { .b-intro .b-own { display: block; } }   /* on desktop the last sentence starts its own line */
.b-intro .more { margin-top: 2.5vh; }

.b-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.b-card h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; margin: 18px 0 8px; }
.b-card p { font-size: 15px; color: var(--ink-soft); }
.b-stage { position: relative; aspect-ratio: 5 / 4; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px rgba(22,21,20,.07); overflow: hidden; }
.b-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; color: #726d66;   /* instructions, so dark enough to read: 4.5:1 on the tile */ pointer-events: none; transition: opacity .4s; }

.b-ease { display: grid; grid-template-rows: 1fr auto; padding: 16px 18px 40px; gap: 6px; }
.b-ease-svg { width: 100%; height: 100%; }
.b-run { position: relative; height: 22px; border-radius: 999px; background: rgba(22,21,20,.06); }
.b-run i { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); }


.b-type { display: grid; place-items: center; cursor: crosshair; }
.b-type #b-aa { font-family: var(--serif); font-size: clamp(90px, 9vw, 130px); line-height: 1; font-optical-sizing: none;
  transition: font-variation-settings .25s var(--ease), font-weight .25s var(--ease); }

.b-corner { cursor: ew-resize; }
.b-corner svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-corner #b-shape { fill: var(--ink); }
.b-read { position: absolute; left: 16px; top: 14px; font: 500 12px/1 var(--mono); color: var(--ink-soft); opacity: 0; transition: opacity .3s var(--ease); }
.b-corner:hover .b-read { opacity: 1; }
.b-corner .b-hint { color: rgba(243,240,234,.7); }


@media (max-width: 960px) { .b-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .b-grid { grid-template-columns: 1fr; } }

/* Hint line doubles as the copy prompt once you've been playing with a tile */
.b-hint.copy { opacity: 1 !important; }

/* Touch: vertical swipes still scroll the page over the tiles; sideways drags play with them */
.b-type, .b-corner { touch-action: pan-y; }
.toolbox .ease-graph { touch-action: pan-y; }
.toolbox .g-handle { touch-action: none; }
@media (pointer: coarse) { .toolbox .g-handle { r: 15; } }
@media (max-width: 560px) {
  .b-grid { gap: 28px; }
  .b-stage:not(.tune-stage) { aspect-ratio: 6 / 5; }
  .b-card h3 { margin-top: 14px; }
}

/* Tiles arrive one after another */
.b-grid > .reveal:nth-child(2) { transition-delay: .08s; }
.b-grid > .reveal:nth-child(3) { transition-delay: .16s; }
.b-grid > .reveal:nth-child(4) { transition-delay: .24s; }

/* Springs tile */
.b-spring { touch-action: pan-y; }                       /* the tile scrolls the page; only the ball is grabbed (toolbox.js) */
.b-spring #b-ball { cursor: grab; touch-action: none; }
.b-spring:active #b-ball { cursor: grabbing; }
.b-feel { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 1; flex-wrap: nowrap; gap: 4px; }
/* Four equal pills that always share one row, shrinking with the tile */
.toolbox .b-feel button { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: clamp(10px, .8vw, 11.5px); text-align: center; white-space: nowrap; background: rgba(255,255,255,.6); }
.b-spring i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 12px 30px -10px rgba(22,21,20,.5); will-change: transform; }

/* A small aside under the intro paragraph, not a call to action */
.tiny-more { display: inline-block; margin-top: 14px; font: 500 13px/1 var(--sans); letter-spacing: 0; color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid rgba(22,21,20,.25); padding-bottom: 1px; white-space: nowrap; transition: color .2s, border-color .2s; }
.tiny-more:hover { color: var(--blue-ink); border-color: currentColor; }
.tiny-more .w { font: inherit; }

/* The switcher tile's dial is frosted (a backdrop blur). Chrome holds that blur back while anything around it is fading,
   so this card doesn't fade as a whole: it slides up solid, while its word, button and caption fade on their own and the
   tile's paper fills in behind. Nothing that holds the dial fades */
.b-card.reveal:has(.tune-stage) { opacity: 1; }
.b-card.reveal:has(.tune-stage) > :not(.b-stage) { opacity: 0; transition: opacity 1.1s var(--ease); }
.b-card.reveal:has(.tune-stage) .ts-word { opacity: 0; transition: opacity 1.1s var(--ease), box-shadow .3s, background .3s, color .4s var(--ease); }
.b-card.reveal.in:has(.tune-stage) > :not(.b-stage), .b-card.reveal.in:has(.tune-stage) .ts-word { opacity: 1; }
.b-card.reveal:has(.tune-stage):not(.in) .ts-try { opacity: 0; }
.b-card.reveal:has(.tune-stage) .b-stage { background: transparent; box-shadow: none; transition: background 1.1s var(--ease), box-shadow 1.1s var(--ease); }
.b-card.reveal.in:has(.tune-stage) .b-stage { background: var(--card); box-shadow: 0 0 0 1px rgba(22,21,20,.07); }

/* Dragging inside a tile (the ball, the curve's handles) shouldn't select the tile's text */
.b-stage { user-select: none; -webkit-user-select: none; }