/* ==========================================================================
   anywhere.css — homepage section 05, "Start in PlansFlow. Continue anywhere."
   (v1, 2026-10-01)
   --------------------------------------------------------------------------
   Loaded by index.html only, after folder.css. It uses the page's own tokens
   (swiss.css .sw: ink, paper, muted, accent, ease) and the owner's folder
   icon from section 04 (assets/project-folder/).

   THE FIGURE is the second half of 04's story. 04 gathers a canvas into the
   folder; here the folder is the source, and one line leaves it for each of
   fourteen tools, in three families that step outward and get quieter as
   they go: assistants, code tools, app builders. The lines are 04's flow curves
   run the other way, and the squares they end in are 04's file marks. The
   page's own paper and dot lattice carry the figure: no frame, no field.

   GEOMETRY. From 1120px the figure is a sheet in em (112 × 58.2) on the same
   em as 04's sheet (the column / 124): --x/--y place a tool's port, and the
   lines are a static SVG in the same units (viewBox = em × 10). From 860px to
   1119px a narrower sheet (86 em, --tx) keeps the left-to-right flow. Below
   860px the figure stands up: the folder on top, a rail out of it, and the
   families under it, in three columns on one bar from 600px and in one
   column on phones. Rows, lines and marks are generated by
   tools/assets/make-anywhere-figure.py, which also keeps the sheet's
   numbers here (67.5 em tall, centre 33.75) in step with its rows.

   MOTION is anywhere.js: the lines draw out of the folder once in view and
   each tool arrives at its line's end; pointing at a tool lights its own
   line and shows its brand's colours, the folder lights them all. This file holds the finished state; the
   script only moves the figure there (--seen, --ca-rail-draw, --ca-bus,
   stroke offsets) and marks what is lit (.has-active, .is-all, .is-on,
   .is-landed). No scripting, or reduced motion: the finished figure.

   Contents
     1 section · 2 figure and sheet · 3 lines · 4 the folder · 5 tools
     6 the narrow sheet · 7 standing up · 8 what is lit · 9 motion
   ========================================================================== */

/* ---------- 1. The section ---------------------------------------------------- */
/* The page's last product statement, so its heading is set a step larger
   than the sections before it; the supporting line stays one sentence. */
.anywhere .section-heading h2 { flex: none; font-size: clamp(48px, 5.9vw, 92px); line-height: 1; }
.anywhere .section-heading { display: block; }
.anywhere .section-heading p { max-width: 34ch; margin-top: 24px; padding-right: 0; }
/* phones: each sentence keeps its own line. The longer one, with the
   highlight's padding, measures 8.08 em in Plex Sans at this tracking. */
@media (max-width: 700px) {
  .anywhere .section-heading h2 { font-size: min(44px, calc((100vw - 2 * var(--sw-pad)) / 8.2)); }
}

/* ---------- 2. The figure and its sheet ---------------------------------------- */
.ca {
  --ca-line: rgb(var(--tint-rgb) / 0.36);          /* a line at rest */
  --ca-edge: rgb(var(--tint-rgb) / 0.5);           /* a port's edge: 3 : 1 against the paper */
  --ca-hot: var(--flow-strong);                    /* a lit line: the orange, one step deeper on light paper (3 : 1 for a thin line) */
  --ca-mono: #000;                                 /* a one-colour brand's own colour: black, white on dark */
  position: relative;
  margin: 0;
  container-type: inline-size;
}
:root[data-theme="dark"] .ca { --ca-hot: var(--sw-accent); --ca-mono: #fff; }
/* ⚠ Mirror of the rule above, for System without scripting. KEEP IN SYNC. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ca { --ca-hot: var(--sw-accent); --ca-mono: #fff; }
}
/* The em is 04's (the column / 124). Its floor keeps the 112 em sheet inside
   the column from 1120px, so nothing ever overflows the page. */
.ca-stage {
  position: relative;
  height: 67.5em;
  font-size: 10px;
  font-size: clamp(9px, calc(100cqw / 124), 11.8px);
}
.ca-sheet { --fs: 17; --cy: 33.75; position: absolute; left: 0; top: 0; width: 112em; height: 67.5em; }

/* ---------- 3. The lines --------------------------------------------------------- */
/* Flow curves, as on 04's canvas. pathLength is 1 on every path, so a dash of
   1 is the whole line and anywhere.js draws it by moving the offset. */
.ca-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.ca-lines--mid { display: none; }
.ca-line { stroke: var(--ca-line); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 0; transition: opacity 220ms var(--sw-ease); }

/* ---------- 4. The folder: the source --------------------------------------------- */
/* The owner's icon, unaltered, at its own proportions: the folder is
   optically centred 120.5px down its 256px square, so that point sits on the
   sheet's centre line, where the lines leave it. It is never recoloured; on
   the dark page a hairline of light keeps its outline, as in 04. With
   anywhere.js it is a button: it draws every line again. The entrance moves
   the button and its label, never their holder: a transform there would
   give the holder a stacking context of its own, and the lines would cross
   the folder instead of leaving from behind it. */
.ca-source { position: absolute; left: 0; top: calc((var(--cy) - var(--fs) * 120.5 / 256) * 1em); width: calc(var(--fs) * 1em); }
.ca-hinge {
  position: relative;
  z-index: 2;
  display: block;
  opacity: var(--seen, 1);
  transform: translateY(calc((1 - var(--seen, 1)) * 0.8em));
  width: calc(var(--fs) * 1em);
  height: calc(var(--fs) * 1em);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sw .ca-hinge:focus-visible { outline-offset: 2px; }
.ca-icon { display: block; width: 100%; height: 100%; max-width: none; }
:root[data-theme="dark"] .ca-icon { filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.42)); }
/* ⚠ Mirror of the rule above, for System without scripting. KEEP IN SYNC. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ca-icon { filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.42)); }
}
/* under the folder, from its artwork's left edge, one line. The label is an
   eyebrow with a font size of its own, so it is placed in shares of the
   folder's square (the artwork spans 3…251 across, 21…220 down), not in em. */
.sw .ca-source-label { position: absolute; left: calc(100% * 3 / 256); top: calc(100% * 220 / 256 + 14px); margin: 0; max-width: none; white-space: nowrap; color: var(--sw-muted); opacity: var(--seen, 1); }

/* ---------- 5. The tools ------------------------------------------------------------ */
/* Three families, three steps: the nearer the folder, the larger the mark
   and the name (--mk, --nm in em). A tool is its port on the line, then its
   mark and its name in the page's sans; marks take the ink (currentColor)
   and --ms evens out heavy and light shapes. The port sits on the line's end
   and never moves; the mark and the name lift when lit. */
.ca-fam { margin: 0; padding: 0; list-style: none; }
.ca-fam[data-tier='1'] { --mk: 3.5; --nm: 2.3; }
.ca-fam[data-tier='2'] { --mk: 2.95; --nm: 1.95; }
.ca-fam[data-tier='3'] { --mk: 2.55; --nm: 1.7; }

.ca-item {
  position: absolute;
  left: calc(var(--x) * 1em);
  top: calc(var(--y) * 1em);
  display: flex;
  align-items: center;
  opacity: var(--seen, 1);
  transform: translate(calc((var(--seen, 1) - 1) * 1.2em), -50%);
  -webkit-tap-highlight-color: transparent;
}
.ca-port { flex: none; width: 0.62em; height: 0.62em; background: var(--sw-paper); box-shadow: inset 0 0 0 1px var(--ca-edge); transition: background-color 160ms var(--sw-ease), box-shadow 160ms var(--sw-ease), opacity 220ms var(--sw-ease); }
.ca-label {
  display: flex;
  align-items: center;
  gap: calc(var(--mk) * 0.4em);
  padding: 0.5em 0.6em 0.5em 1.1em;
  color: var(--sw-ink);
  transition: opacity 220ms var(--sw-ease), transform 240ms var(--sw-ease);
}
.ca-mark { flex: none; width: calc(var(--mk) * 1em); height: calc(var(--mk) * 1em); fill: currentColor; transform: scale(var(--ms, 1)); transition: color 240ms var(--sw-ease); }
/* Each mark is drawn twice over one shape: in the page's ink, and in the
   brand's own colours (.ca-brand, from the brand's colour file), which wait
   unseen until the tool is lit (§8). A one-colour brand has no colour layer. */
.ca-ink { transition: opacity 140ms var(--sw-ease); }
.ca-brand { opacity: 0; transition: opacity 240ms var(--sw-ease); }
.ca-name { font-size: calc(var(--nm) * 1em); line-height: 1.15; letter-spacing: -0.03em; white-space: nowrap; }

/* ---------- 6. The narrow sheet: tablets on their side --------------------------------- */
@media (max-width: 1119px) and (min-width: 860px) {
  .ca-stage { font-size: clamp(9px, calc(100cqw / 86), 10.2px); }
  .ca-sheet { --fs: 13; width: 86em; }
  .ca-item { left: calc(var(--tx) * 1em); }
  .ca-lines--wide { display: none; }
  .ca-lines--mid { display: block; }
}

/* ---------- 7. Standing up: below the sheets ------------------------------------------- */
/* The folder on top with its label beside it; the rail leaves the folder's
   middle and runs down. From 600px it meets one bar, and the three families
   hang from it in three columns, each on its own spine; on phones the
   families follow one another down the one rail. Each tool joins its spine
   with one rounded elbow, as the files do in 04's folder. Every row draws
   its own length of the spine, so a name that wraps never breaks it. */
@media (max-width: 859px) {
  .ca-stage { height: auto; font-size: 10.4px; }
  /* the rail runs through the middle of the folder's artwork (127 of 256) */
  .ca-sheet {
    --fs: 9.4;
    --ca-rail: calc(var(--fs) * 1em * 127 / 256);
    --ca-gap: 2.6em;
    --ca-elbow: 1.5em;
    position: relative;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--ca-gap);
    align-items: start;
  }
  .ca-lines--wide, .ca-lines--mid { display: none; }

  .ca-source { position: relative; top: auto; grid-column: 1 / -1; display: flex; align-items: center; gap: 1.6em; width: auto; }
  .ca-hinge { flex: none; }
  .sw .ca-source-label { position: static; white-space: normal; }
  /* the rail, out of the folder's middle and down to the families */
  .ca-source::after { content: ''; position: absolute; z-index: 1; left: var(--ca-rail); top: 50%; bottom: calc(-1 * var(--ca-gap)); width: 1px; margin-left: -0.5px; background: var(--ca-line); transform: scaleY(var(--ca-rail-draw, 1)); transform-origin: 50% 0; }

  .ca-fam { position: relative; min-width: 0; }
  .ca-fam[data-tier='1'] { --mk: 2.7; --nm: 1.85; }
  .ca-fam[data-tier='2'] { --mk: 2.4; --nm: 1.65; }
  .ca-fam[data-tier='3'] { --mk: 2.15; --nm: 1.5; }
  /* the bar: from this family's spine to the next one's */
  .ca-fam:not(:last-of-type)::after { content: ''; position: absolute; left: var(--ca-rail); top: 0; width: 100%; height: 1px; margin-left: -0.5px; background: var(--ca-line); transform: scaleX(var(--ca-bus, 1)); transform-origin: 0 50%; }

  .ca-item {
    position: relative;
    left: auto;
    top: auto;
    min-height: 4.4em;
    padding-left: calc(var(--ca-rail) + var(--ca-elbow) - 0.5px);
    transform: translateX(calc((var(--seen, 1) - 1) * 1.2em));
  }
  /* the spine down to this row's middle, and the elbow into its port */
  .ca-item::before { content: ''; position: absolute; left: calc(var(--ca-rail) - 0.5px); top: 0; width: var(--ca-elbow); height: 50%; border-left: 1px solid var(--ca-line); border-bottom: 1px solid var(--ca-line); border-bottom-left-radius: 0.55em; transition: opacity 220ms var(--sw-ease); }
  /* the spine carries on to the next row from where the elbow leaves it */
  .ca-item:not(:last-child)::after { content: ''; position: absolute; left: calc(var(--ca-rail) - 0.5px); top: calc(50% - 0.55em); bottom: 0; width: 1px; background: var(--ca-line); transition: opacity 220ms var(--sw-ease); }
  .ca-label { min-width: 0; gap: calc(var(--mk) * 0.34em); padding: 0.7em 0 0.7em 0.9em; }
  .ca-name { white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
}

/* phones: one column, one rail. The families follow one another; the rail
   crosses the space between them. */
@media (max-width: 599px) {
  .ca-sheet { --fs: 7.8; --ca-gap: 2.2em; --ca-family: 1.6em; grid-template-columns: minmax(0, 1fr); }
  .ca-fam + .ca-fam { margin-top: calc(var(--ca-family) - var(--ca-gap)); }
  /* the rail carries on past a family's last tool, across the space, into
     the next family. That length belongs to the last tool, so it arrives
     with it; the bar of the wider layout is not needed. */
  .ca-fam:not(:last-of-type) .ca-item:last-child::after { content: ''; position: absolute; left: calc(var(--ca-rail) - 0.5px); top: calc(50% - 0.55em); bottom: calc(-1 * var(--ca-family)); width: 1px; background: var(--ca-line); transition: opacity 220ms var(--sw-ease); }
  .ca-fam:not(:last-of-type)::after { content: none; }
}
/* a fingertip needs a taller row than a pointer does */
@media (pointer: coarse) and (max-width: 859px) {
  .ca-item { min-height: 4.6em; }
}

/* ---------- 8. What is lit ------------------------------------------------------------- */
/* anywhere.js marks the tools and lines that are lit (.is-on) on a figure
   that has some (.has-active); everything else steps back. Pointing at the
   folder lights every line (.is-all): nothing steps back, nothing lifts.
   The lit line itself is drawn in the overlay (.ca-hot), and a port takes
   the accent when its square arrives (.is-landed). */
.ca.has-active .ca-lines g:not(.is-on) .ca-line { opacity: 0.3; }
.ca.has-active .ca-item:not(.is-on) .ca-label,
.ca.has-active .ca-item:not(.is-on) .ca-port { opacity: 0.42; }
.ca.has-active .ca-item:not(.is-on)::before,
.ca.has-active .ca-item:not(.is-on)::after { opacity: 0.4; }
.ca:not(.is-all) .ca-item.is-on .ca-label { transform: translateY(-3px); }
.ca-item.is-landed .ca-port { background: var(--ca-hot); box-shadow: none; }
/* A lit tool shows its brand's own colours: the colour layer comes up over
   the ink, and the ink goes once the colour covers it, so no dark rim is left
   at the edges. A one-colour brand takes its own black (white on dark).
   Pointing at the folder lights every tool, so every brand shows its colours
   at once. */
.ca-item.is-on .ca-brand { opacity: 1; }
.ca-item.is-on .ca-mark[data-brand='colour'] .ca-ink { opacity: 0; transition-delay: 160ms; }
.ca-item.is-on .ca-mark[data-brand='mono'] { color: var(--ca-mono); }

.ca-hot { position: absolute; z-index: 1; left: 0; top: 0; overflow: visible; fill: none; pointer-events: none; }
.ca-hot path { stroke: var(--ca-hot); stroke-width: 1.75px; stroke-linejoin: round; transition: opacity 200ms var(--sw-ease); }
/* fourteen lit lines at once stay as fine as the lines at rest */
.ca.is-all .ca-hot path { stroke-width: 1.25px; }
.ca-hot rect { fill: var(--ca-hot); }
.ca-hot .is-gone { opacity: 0; }

/* ---------- 9. Motion -------------------------------------------------------------- */
/* anywhere.js holds the clock: while the figure waits for its entrance the
   folder is down, the lines are undrawn and the tools are away; the script
   moves all three to the finished state above and then removes its own
   properties. No scripting, or reduced motion: the finished state, at once. */
@media (prefers-reduced-motion: reduce) {
  .ca-line, .ca-port, .ca-label, .ca-hot path, .ca-item::before, .ca-item::after, .ca-mark, .ca-ink, .ca-brand { transition: none; }
}