/* GADGET UP - the idea box's mode menu, the mode pill, the mode sheets and
 * the Part panel (engine v3 step "modes", 2026-10-29; js/modes.js).
 * Brand (BRAND.md): blueprint blue only on things you press (the primary
 * button, the focus ring, the tick on the chosen mode); everything else is
 * graphite and ink; labels in Plex Mono; drawing marks grey.
 * Motion (rule 2s): entrances ease out, exits ease in, interface springs with
 * a slight overshoot, nothing linear. Transform and opacity only. */
:root {
  --gm-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
}

/* ---------- the 3-dots button ---------- */
.gm { position: relative; display: flex; align-items: center; gap: 8px; }
.gm-in-box { position: absolute; left: 12px; bottom: 10px; z-index: 3; }
.gm-in-bar { flex: none; }
#ideaInput.gm-has { padding-bottom: 62px; }
.gm-dots {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--hairline-strong); background: rgba(255,255,255,0.03); color: var(--ink-mute);
  transition: color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--gm-spring);
  touch-action: manipulation;
}
.gm-dots::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; }   /* a 46 px target */
.gm-ico { width: 20px; height: 20px; }
/* site.css gives every button on a phone min-height 44px, which turned these
 * two circles into ovals. Their ::before already makes a 44 px target. */
.gm-dots, .gm-pill-x { min-height: 0; }
.gm-dots:active { transform: scale(0.94); transition-duration: 90ms; }
.gm-dots:focus-visible { outline: none; box-shadow: var(--ring-focus); color: var(--ink); }
.gm-open .gm-dots, .gm-set .gm-dots { color: var(--ink); border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.07); }
@media (hover: hover) and (pointer: fine) {
  .gm-dots:hover { color: var(--ink); background: rgba(255,255,255,0.07); transition-duration: var(--t-quick); }
}
/* the tooltip: hover AND keyboard focus (an icon-only control must say what
 * it is to every hand), never while the menu is open */
.gm-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 4;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font: 500 var(--fs-label)/1.2 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-dim); background: var(--surface-3, #212325); border: 1px solid var(--hairline-strong);
  opacity: 0; transform: translate(-50%, 4px);
  transition: opacity 120ms var(--ease-in), transform 120ms var(--ease-in);
}
.gm-dots:focus-visible .gm-tip { opacity: 1; transform: translate(-50%, 0); transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .gm-dots:hover .gm-tip { opacity: 1; transform: translate(-50%, 0); transition: opacity 160ms var(--ease-out) 300ms, transform 220ms var(--ease-out) 300ms; }
}
.gm-open .gm-tip { opacity: 0 !important; }

/* ---------- the mode pill ---------- */
.gm-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 3px 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: var(--bg-2);
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-dim); white-space: nowrap;
  animation: gmPop 320ms var(--gm-spring);
}
.gm-pill[hidden] { display: none; }
.gm-pill-c { color: var(--ink-faint); }
@media (pointer: coarse) { .gm-dots { width: 44px; height: 44px; } .gm-dots::before { inset: 0; } .gm-pill-x { width: 44px; height: 44px; margin: -9px -9px -9px 0; } .gm-pill-x::before { inset: 0; } }
.gm-pill-x {
  position: relative; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-mute); background: transparent;
  transition: color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
}
.gm-pill-x::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }   /* 44 px target */
.gm-x-ico { width: 14px; height: 14px; }
.gm-pill-x:focus-visible { outline: none; box-shadow: var(--ring-focus); color: var(--ink); }
.gm-pill-x:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .gm-pill-x:hover { color: var(--ink); background: rgba(255,255,255,0.08); } }
/* on the home bar the pill hangs above the bar, on its left */
.gm-pill-float { position: absolute; left: 16px; bottom: calc(100% + 10px); background: rgba(19,20,21,0.94); box-shadow: 0 8px 22px rgba(3,3,4,0.5); }
@keyframes gmPop { from { opacity: 0; transform: scale(0.9); } }

/* ---------- the menu ---------- */
.gm-menu {
  position: absolute; z-index: 120; left: 0; top: calc(100% + 10px);
  width: min(420px, calc(100vw - 32px)); padding: 6px;
  border-radius: var(--r-lg); border: 1px solid var(--hairline-strong);
  background: radial-gradient(120% 100% at 50% 0%, var(--surface-3, #212325) 0%, var(--bg-1) 70%);
  box-shadow: inset 0 1px 0 var(--lip-strong), var(--e-4, 0 24px 60px rgba(0,0,0,0.6));
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: 20px 0;
  transition: opacity 120ms var(--ease-in), transform 120ms var(--ease-in);
}
.gm-menu.in { opacity: 1; transform: none; transition: opacity 180ms var(--ease-out), transform 320ms var(--gm-spring); }
.gm-menu[hidden] { display: none; }
/* the home bar sits at the foot of the screen, so its menu opens upward and
 * spans the bar */
.gm-up-menu { top: auto; left: 8px; right: 8px; width: auto; bottom: calc(100% + 12px); transform: translateY(6px) scale(0.98); transform-origin: 50% 100%; }
.gm-menu-h {
  padding: 10px 12px 6px; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint);
}
.gm-item {
  position: relative; display: grid; gap: 4px; width: 100%; min-height: 60px; padding: 11px 44px 11px 12px;
  border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font-family: var(--font-ui);
  transition: background-color var(--t-med) var(--ease-out), transform var(--t-med) var(--gm-spring);
  touch-action: manipulation;
}
.gm-item:focus-visible { outline: none; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 2px var(--accent-hot); }
.gm-item:active { transform: scale(0.985); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) { .gm-item:hover { background: rgba(255,255,255,0.06); transition-duration: var(--t-quick); } }
.gm-item[aria-checked="true"] { background: rgba(255,255,255,0.05); }
.gm-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gm-item-name { font-weight: 600; font-size: var(--fs-body); letter-spacing: -0.005em; }
.gm-item-cost { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.gm-item-line { font-size: 0.875rem; line-height: 1.45; color: var(--ink-mute); }
.gm-item-chat .gm-item-name { color: var(--ink-dim); }
.gm-check { position: absolute; right: 14px; top: 16px; width: 16px; height: 16px; color: var(--signal-hot); opacity: 0; transform: scale(0.6); transition: opacity 120ms var(--ease-in), transform 120ms var(--ease-in); }
.gm-item[aria-checked="true"] .gm-check { opacity: 1; transform: none; transition: opacity 160ms var(--ease-out), transform 300ms var(--gm-spring); }
.gm-menu-f { margin: 4px 6px 2px; padding: 10px 6px 6px; border-top: 1px solid var(--hairline-soft); font-size: 0.8125rem; line-height: 1.45; color: var(--ink-faint); }

/* ---------- the sheets (on the site's .gu-overlay / .gu-modal) ---------- */
.gu-overlay.out { opacity: 0; transition: opacity 140ms var(--ease-in); }
.gm-modal { width: min(460px, 100%); }
.gm-modal .gu-close { display: grid; place-items: center; padding: 0; line-height: 0; }
.gm-eyebrow { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.gm-modal-h { font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); padding-right: 36px; }
.gm-modal-p { margin-top: 10px; color: var(--ink-mute); line-height: 1.55; }
.gm-modal-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.gm-cost-note { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); }
.gm-choices { display: grid; gap: 10px; margin-top: 18px; }
.gm-choice {
  display: grid; gap: 4px; min-height: 64px; padding: 13px 16px; text-align: left; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--hairline-strong); background: var(--bg-2); color: var(--ink); font-family: var(--font-ui);
  transition: border-color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), transform var(--t-med) var(--gm-spring);
  touch-action: manipulation;
}
.gm-choice:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.gm-choice:active { transform: scale(0.985); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) { .gm-choice:hover { border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.05); transition-duration: var(--t-quick); } }
.gm-locked .gm-item-name { color: var(--ink-dim); }

/* ---------- the Part panel (invent page, under the idea box) ---------- */
.gm-part {
  position: relative; margin-top: var(--sp-6, 32px); padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--surface);
  box-shadow: var(--shadow-card); text-align: left; scroll-margin-top: 92px;   /* just under the floating nav */
}
.gm-part[hidden] { display: none; }
.gm-part.gm-enter { animation: gmRise 460ms var(--ease-out); }
@keyframes gmRise { from { opacity: 0; transform: translateY(14px); } }
.gm-part-h { font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.12; letter-spacing: var(--ls-title); color: var(--ink); margin-bottom: 18px; }
.gm-part-h:focus { outline: none; }
.gm-part-p { color: var(--ink-dim); line-height: 1.55; }
.gm-wait { display: flex; align-items: center; gap: 12px; color: var(--ink-mute); min-height: 44px; }
.gm-conf { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.gm-fig {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md);
  border: 1px solid var(--hairline-soft); background: var(--bg-2); display: grid; place-items: center;
}
.gm-fig img { width: 100%; height: 100%; object-fit: contain; transition: opacity 300ms var(--ease-out); }
.gm-canvas { position: absolute; inset: 0; }
.gm-stage.gm-live .gm-poster { opacity: 0; }
.gm-stage-st { position: absolute; left: 12px; bottom: 10px; z-index: 2; font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); }
.gm-stage-st:empty { display: none; }
.gm-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gm-info .gu-tag { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gm-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: baseline; }
.gm-dl dt { font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); }
.gm-dl dd { color: var(--ink-dim); line-height: 1.5; font-size: 0.9375rem; min-width: 0; overflow-wrap: anywhere; }
.gm-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gm-act .btn { min-height: 44px; }
.gm-fine { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint); margin-top: 6px; }
.gm-said { font-weight: 600; color: var(--ink); }
.gm-err { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hairline-strong); background: rgba(255,255,255,0.04); color: var(--ink); font-size: 0.9375rem; line-height: 1.5; }
.gm-err[hidden] { display: none; }
.gm-alts { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline-soft); }
.gm-alts-h { font-size: 0.875rem; color: var(--ink-mute); margin-bottom: 10px; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.gm-chips-q { margin-top: 16px; }
.gm-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; cursor: pointer;
  border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: var(--bg-2); color: var(--ink);
  font: 600 0.9375rem/1.2 var(--font-ui); text-align: left;
  transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--gm-spring);
  touch-action: manipulation;
}
.gm-chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.gm-chip:active { transform: scale(0.97); transition-duration: 90ms; }
.gm-chip[aria-busy="true"] { cursor: progress; opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { .gm-chip:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.3); transition-duration: var(--t-quick); } }
.gm-chip-c { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); }
.gm-chip-out { border-style: dashed; color: var(--ink-dim); font-weight: 500; }
.gm-cols { columns: 2 260px; column-gap: 16px; margin-top: 28px; }
.gm-block { padding: 18px; border-radius: var(--r-md); border: 1px solid var(--hairline-soft); background: var(--bg-1); min-width: 0; break-inside: avoid; margin-bottom: 16px; }
.gm-block:last-child { margin-bottom: 0; }
.gm-block-h { font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.gm-block .gm-part-p + .gm-part-p { margin-top: 8px; }
.gm-list { list-style: none; display: grid; gap: 8px; }
.gm-list li { display: flex; gap: 10px; font-size: 0.875rem; line-height: 1.45; color: var(--ink-dim); min-width: 0; }
.gm-list li > span:last-child, .gm-list li > a { min-width: 0; overflow-wrap: anywhere; }
.gm-k { flex: none; min-width: 3.4em; font: 500 var(--fs-label)/1.6 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); }
.gm-list a { color: var(--accent-hot); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gm-list a:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }
.gm-checks { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline-soft); }
.gm-coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); border: 1px dashed var(--hairline-strong); }
.gm-coupon .gm-part-p { flex: 1 1 260px; }
.gm-part > .gm-act { margin-top: 22px; }
.gm-part-body > .gm-act:last-child { margin-top: 22px; }

@media (max-width: 720px) {
  .gm-conf { grid-template-columns: minmax(0, 1fr); }
  .gm-modal-h { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .gm-in-bar .gm-dots { width: 44px; height: 44px; }
  .gm-in-bar .gm-dots::before { inset: 0; }
  .gm-menu:not(.gm-up-menu) { width: 100%; }
  .gm-act .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-dots, .gm-item, .gm-choice, .gm-chip, .gm-menu, .gm-menu.in, .gm-check, .gm-tip, .gm-fig img { transition: none !important; }
  .gm-menu, .gm-up-menu { transform: none; }
  .gm-pill, .gm-part.gm-enter { animation: none; }
}

/* the box whose menu is open sits above everything after it: the invent
 * page gives every child of .input-inner its own z-index 1, and the menu
 * painted under the Build button and the spark chips (rig, 375 px) */
body .input-inner > .gm-host-open, .gm-host-open { position: relative; z-index: 60; }
/* a question is a sentence, not a title: smaller, so it fits a phone */
.gm-part-h.gm-q { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); line-height: 1.25; letter-spacing: -0.008em; max-width: 40ch; text-wrap: balance; }
.gm-chip-c { white-space: nowrap; }
.gm-modal-fine { margin-top: 12px; font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); }
/* Part mode on the invent page: a machine's limits and machine sparks step out */
.gm-part-on .spark-row, .gm-part-on .bf-fold { display: none; }
/* the part stays in view while the longer column beside it is read */
@media (min-width: 721px) { .gm-conf > .gm-fig { position: sticky; top: 92px; } }
/* the announcer for screen readers (index.html has its own .sr-only; the
 * invent page does not) */
.gm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- look-v4 menu step (2026-11-11, docs/LOOK_V4.md 7 and 8) ----------
 * FITTS: the dots are a 44 px circle on every box, because a 40 px circle
 *   with a hidden halo read as small and missed on a phone.
 * VISIBLE LABEL: the tooltip is a plain sentence in the body face, because a
 *   mono caps "MODE" chip was one of the drafting tells we are removing.
 * EXITS EASE IN: the menu leaves in 160 ms on an ease-in (enters on the
 *   ease-out spring above), because a leaving thing should get out of the way.
 * REDUCED MOTION: a plain 160 ms fade, no scale, so the reveal still says
 *   something happened without moving anything. */
.gm-dots { width: 44px; height: 44px; }
.gm-dots::before { inset: 0; }
.gm-tip {
  font: 500 0.8125rem/1.2 var(--font-ui); letter-spacing: 0.01em; text-transform: none;
  color: var(--ink); border-radius: 8px;
}
.gm .gm-tip { left: 0; transform: translate(0, 4px); }
.gm .gm-dots:focus-visible .gm-tip { transform: none; }
@media (hover: hover) and (pointer: fine) { .gm .gm-dots:hover .gm-tip { transform: none; } }
.gm-menu { transition: opacity 160ms var(--ease-in), transform 160ms var(--ease-in); }
@media (prefers-reduced-motion: reduce) {
  .gm-menu, .gm-menu.in { transform: none !important; transition: opacity 160ms var(--ease-out) !important; }
}

/* look-v4 menu, every page (was only in direction.css, so /invent still showed
   the mono "WHAT TO MAKE" eyebrow and uppercase mono prices). Same surface and
   rows as the home bar's menu. */
.gm-menu { background: var(--surface-3); border: 1px solid rgba(255, 236, 220, 0.08); border-radius: 20px; padding: 8px; box-shadow: inset 0 1px 0 rgba(255, 240, 225, 0.06), 0 24px 60px rgba(0, 0, 0, 0.6); }
.gm-menu-h, .gm-menu-f { display: none; }
.gm-item { border-radius: 14px; padding: 12px 14px; gap: 4px; }
.gm-item-name { font-size: 1rem; color: var(--ink); }
.gm-item-cost { font: 600 0.8125rem/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.gm-item-line { font-size: 0.875rem; color: var(--ink-dim); }
.gm-item-chat { padding-block: 10px; }
.gm-item-chat .gm-item-name { color: var(--ink-dim); }
.gm-item-chat .gm-item-line { font-size: 0.8125rem; color: var(--ink-mute); }
.gm-item-build { background: rgba(255, 240, 225, 0.04); }