/* THE BOX GRAMMAR (moved out of setup.html on 11 Oct 2026, unchanged, so the benefits page can be laid out the same
 * way; Sean: "lets use the box method from the quick setup … vs the stupid wall of text"). A .node is one box: a lamp
 * top right (magenta until the record says done, green on, blue busy, amber warn), an icon and a title on one line,
 * a status line (.st) and an action (.act). A .link is the track between two boxes; .flow sends a dot along it.
 * Page-specific grid shapes (which box sits in which column) stay in each page. */
  .node.held { opacity: .55; }
  .node { cursor: pointer; }
  .chips span { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-fg-default) 8%, transparent); color: var(--color-fg-default); margin: 6px 4px 0 0; }
  .node { border: 1px solid color-mix(in srgb, var(--x-magenta) 53%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--color-fg-default) 2%, transparent); padding: 14px 16px 14px; position: relative; min-height: 120px; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; transition: border-color .4s, box-shadow .4s; }
  .node.on { border-color: color-mix(in srgb, var(--x-green) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--x-green) 33%, transparent), 0 0 24px color-mix(in srgb, var(--x-green) 20%, transparent); }
  .node.busy { border-color: var(--x-blue); box-shadow: 0 0 0 1px color-mix(in srgb, var(--x-blue) 27%, transparent); }
  .node.warn { border-color: var(--x-amber); }
  /* icon and title on one line (Sean, 7 Sep 2026) */
  .node .ico { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--color-fg-default) 6%, transparent); display: flex; align-items: center; justify-content: center; font-size: 18px; position: absolute; left: 16px; top: 14px; }
  .node.on .ico { background: color-mix(in srgb, var(--x-green) 20%, transparent); }
  .node h2 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; margin: 0 0 6px; color: var(--color-fg-default); line-height: 34px; padding: 0 24px 0 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 1500px) { .node h2 { font-size: 14px; } .node { padding: 12px 14px 12px; } .node h2 { padding-left: 42px; } }
  .node .st { font-size: 12.5px; color: var(--color-fg-muted); line-height: 1.45; min-height: 36px; }
  .node .adv { margin-top: auto; padding-top: 8px; text-align: right; font-size: 11.5px; } .node .adv a { color: var(--color-fg-muted); text-decoration: none; } .node .adv a:hover { color: var(--x-blue); }
  .node.on .st { color: var(--color-fg-muted); }
  .node.busy .st { color: var(--x-blue); }
  .node .lamp { position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--x-magenta); box-shadow: 0 0 8px color-mix(in srgb, var(--x-magenta) 40%, transparent); }
  .node.held { border-color: color-mix(in srgb, var(--x-magenta) 27%, transparent); } .node.held .lamp { background: color-mix(in srgb, var(--x-magenta) 40%, transparent); box-shadow: none; }
  .node.on .lamp { background: var(--x-green); box-shadow: 0 0 10px var(--x-green); }
  .node.busy .lamp { background: var(--x-blue); animation: pulse 1.2s ease-in-out infinite; }
  .node.warn .lamp { background: var(--x-amber); }
  @keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; box-shadow: 0 0 12px var(--x-blue); } }
  .bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--color-fg-default) 8%, transparent); overflow: hidden; margin: 10px 0 6px; }
  .bar i { display: block; height: 100%; width: 0; background: var(--x-magenta); transition: width .8s ease; }
  .node.on .bar i { background: var(--color-btn-primary-bg); }
  .mono { font-family: 'Courier New', monospace; font-size: 12px; color: var(--color-fg-default); }
  .act { margin-top: 0; padding-top: 10px; }
  /* the lines: a track with a dot that travels when something is flowing */
  .link { position: relative; align-self: center; height: 2px; background: color-mix(in srgb, var(--color-fg-default) 12%, transparent); }
  .link.v { width: 2px; height: 100%; justify-self: center; align-self: stretch; }
  .link.on { background: color-mix(in srgb, var(--x-green) 53%, transparent); }
  .link .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--x-blue); box-shadow: 0 0 10px var(--x-blue); top: -4px; left: -5px; opacity: 0; }
  .link.v .dot { left: -4px; top: -5px; }
  .link.flow .dot { opacity: 1; animation: travel 1.4s linear infinite; }
  .link.v.flow .dot { animation: travelv 1.4s linear infinite; }
  /* a working line: the amber underline runs while the machine installs */
  /* while the machine installs, the divider bar itself sweeps, in purple */
  .bar.sweeping { background: color-mix(in srgb, var(--x-magenta) 12%, transparent); }
  .bar.sweeping i { width: 100% !important; background: linear-gradient(90deg, transparent 0, var(--x-magenta) 35%, var(--color-canvas-default) 50%, var(--x-magenta) 65%, transparent 100%); background-size: 200% 100%; animation: sweep 1.6s linear infinite; }
  @keyframes sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .bar.sweeping i { animation: none; background: var(--x-magenta); } }
  @keyframes travel { from { left: -5px; } to { left: calc(100% - 5px); } }
  @keyframes travelv { from { top: -5px; } to { top: calc(100% - 5px); } }
  .link.on .dot { background: var(--x-green); box-shadow: 0 0 8px var(--x-green); }