/* The Dopamine Menu (hyperfocus.life/learn/tools/dopamine-menu/). Without
   scripts the courses are plain lists (the sample menu); menu.js swaps each
   list item for an editable row. Tokens only; the print sheet is black on white. */

.menu-card {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line); border-radius: 18px; background: var(--abyss);
}
.menu-card .eyebrow { margin-bottom: 8px; }
.article .menu-title-static { color: var(--ink); font-size: clamp(24px, 4vw, 32px); font-weight: 200; margin: 0 0 6px; }
.menu-title-in {
  width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 4px 0;
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  color: var(--ink); font-family: var(--disp); font-size: clamp(24px, 4vw, 32px); font-weight: 200;
}
.menu-title-in:focus { outline: none; border-bottom-color: var(--glow); }
.menu-from-link[hidden] { display: none; }

/* Two columns only where each can hold a whole line: the article column is
   narrow, and an item cut off mid-word is worse than a longer page. */
.menu-courses { display: grid; gap: 22px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.menu-course { min-width: 0; }
.article .menu-course h3 {
  margin: 0; color: var(--glow);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
}
.article .menu-hint { margin: 2px 0 10px; color: var(--dim); font-size: 13px; }
.article .menu-items { list-style: none; margin: 0; padding: 0; }
.article .menu-items li { margin: 0 0 6px; color: var(--ink); }

/* The editable row: the item as plain-looking text, and three small buttons. */
.menu-row { display: flex; align-items: center; gap: 4px; border-radius: 10px; transition: background 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.menu-item-in {
  flex: 1; min-width: 0; min-height: 40px; padding: 6px 8px; box-sizing: border-box;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--ink); font-family: var(--disp); font-size: 16px; font-weight: 300;
}
.menu-item-in:hover { border-color: var(--line); }
.menu-item-in:focus { outline: none; border-color: rgba(199, 217, 209, 0.45); background: var(--surface); }
.menu-mini {
  flex: none; width: 36px; height: 40px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 10px;
  color: var(--dim); font-family: var(--disp); font-size: 16px; cursor: pointer;
}
.menu-mini:hover:not(:disabled) { color: var(--ink); border-color: var(--line); }
.menu-mini:disabled { opacity: 0.25; cursor: default; }
/* "Pick one for me": a soft glow on the chosen line, nothing that spins. */
.menu-row.picked { background: rgba(29, 181, 165, 0.1); box-shadow: inset 2px 0 0 var(--teal-bright); }
.menu-course-tools { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 2px; }
.menu-course-tools .tool-link[aria-disabled="true"] { opacity: 0.45; }

.menu-controls { margin-top: 16px; }
.menu-exports { margin-top: 22px; }
.menu-exports .tool-label { display: block; margin: 0 0 10px; }

/* Phones: the line gets the width. Move buttons appear on the row being
   edited (tapping into an item, or tabbing to it); remove stays visible. */
@media (max-width: 640px) {
  .article .tool { padding: 16px 14px; }
  .menu-card { padding: 14px 10px; }
  .menu-row .menu-mini.move { display: none; }
  .menu-row:focus-within .menu-mini.move { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-row { transition: none; }
}

/* The printed menu: a restaurant card, centred, one page for a typical menu. */
@media print {
  .print-sheet.menu-sheet { text-align: center; }
  .print-sheet.menu-sheet h1 { font-size: 24pt; font-weight: 300; margin: 0 0 16pt; letter-spacing: 0.02em; }
  .print-sheet.menu-sheet .menu-sheet-course { break-inside: avoid; margin: 0 0 14pt; }
  .print-sheet.menu-sheet h2 { margin: 0; font-size: 11pt; letter-spacing: 0.28em; }
  .print-sheet.menu-sheet .menu-sheet-hint { margin: 1pt 0 5pt; font-size: 9.5pt; font-style: italic; color: #444; }
  .print-sheet.menu-sheet ul { list-style: none; padding: 0; margin: 0; }
  .print-sheet.menu-sheet li { margin: 0 0 3pt; font-size: 12.5pt; }
}

/* ── The menu card, dressed like a menu (2026-10-18) ────────────────────── */
.menu-card {
  position: relative; padding: clamp(22px, 4vw, 40px) clamp(16px, 4vw, 40px);
  border-radius: 22px; border: 1px solid rgba(199, 217, 209, 0.14);
  background: radial-gradient(90% 60% at 50% 0%, rgba(183, 92, 232, 0.08), rgba(5, 5, 6, 0) 70%), rgba(8, 8, 10, 0.7);
}
.menu-card::after {
  content: ""; position: absolute; inset: 8px; border-radius: 16px; pointer-events: none;
  border: 1px solid rgba(199, 217, 209, 0.06);
}
.article .menu-kicker { margin: 0 0 6px; text-align: center; color: var(--dim); font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase; }
.menu-title { text-align: center; }
.article .menu-title-static, .menu-title-in { text-align: center; font-size: clamp(28px, 4.6vw, 40px); }
.menu-title-in { border-bottom-color: transparent; }
.menu-title-in:hover { border-bottom-color: var(--line); }
.menu-courses { gap: 28px 34px; margin-top: 26px; }
.article .menu-course h3 { display: flex; align-items: center; gap: 9px; }
.course-ico { width: 17px; height: 17px; color: var(--teal-bright); filter: drop-shadow(0 0 6px rgba(95, 224, 207, 0.5)); }
.menu-course { padding-top: 14px; border-top: 1px solid var(--line); }
.menu-course-tools .tool-link { font-size: 12.5px; }
/* In the console, the menu card is the frame: less padding around it, so two
   courses sit side by side on a computer. */
.tool-menu .tool-console > :not(.console-bar) { padding: clamp(14px, 2.4vw, 24px); }
/* With a mouse, the move arrows wait for the row you point at or edit, so
   the line itself gets the width (phones already work this way). */
@media (hover: hover) {
  /* Zero width, not display:none: still in the tab order and to screen readers. */
  .menu-row .menu-mini.move { width: 0; border-width: 0; overflow: hidden; }
  .menu-row:is(:hover, :focus-within) .menu-mini.move { width: 36px; border-width: 1px; }
}
@media (max-width: 640px) {
  .menu-card { padding: 18px 10px; }
  .menu-card::after { inset: 5px; }
}

/* ── Personal: styles, emoji, ideas, and the keep buttons up top (2026-11-01) ── */
.menu-tool { position: relative; }

/* The bar above the card: the four styles, then save and print. */
.menu-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
.menu-styles { display: flex; align-items: center; gap: 8px; }
.menu-bar-label { color: var(--dim); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; margin-right: 2px; }
.menu-swatch {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.menu-swatch:hover { border-color: rgba(199, 217, 209, 0.4); }
.menu-swatch[aria-pressed="true"] { border-color: var(--teal-bright); box-shadow: 0 0 0 1px var(--teal-bright), 0 0 14px rgba(95, 224, 207, 0.35); }
.menu-swatch:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.menu-swatch-dot { width: 22px; height: 22px; border-radius: 50%; }
.menu-swatch[data-style="midnight"] .menu-swatch-dot { background: radial-gradient(circle at 35% 30%, #5fe0cf 0 18%, #0b2a27 45%, #050506 75%); }
.menu-swatch[data-style="neon"] .menu-swatch-dot { background: conic-gradient(from 200deg, #ff3dc9, #5ff3ff, #8a5cff, #ff3dc9); }
.menu-swatch[data-style="paper"] .menu-swatch-dot { background: radial-gradient(circle at 70% 70%, #b5412e 0 20%, transparent 22%), #f5eddf; box-shadow: inset 0 0 0 2px #2b221e33; }
.menu-swatch[data-style="garden"] .menu-swatch-dot { background: radial-gradient(circle at 30% 30%, #ffd696 0 14%, transparent 16%), radial-gradient(circle at 60% 65%, #a9da9f 0 30%, #2c4a36 70%); }
.menu-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-quick-btn { padding-top: 9px; padding-bottom: 9px; }

/* Lines that look like something you can write on. */
.article .menu-howto { margin: 2px 0 0; text-align: center; color: var(--dim); font-size: 13px; }
.menu-item-in { border-bottom: 1px dashed rgba(199, 217, 209, 0.16); border-radius: 10px 10px 4px 4px; }
.menu-item-in::placeholder { color: var(--dim); opacity: 0.7; }

/* The dot before each line: its emoji, or a soft ring asking for one. */
.menu-dot {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 50%; cursor: pointer;
}
.menu-dot:hover, .menu-dot[aria-expanded="true"] { border-color: var(--line); background: rgba(255, 255, 255, 0.03); }
.menu-dot:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; }
.menu-dot-e { font-size: 18px; line-height: 1; }
.menu-dot-empty { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed rgba(199, 217, 209, 0.45); }
.menu-dot:hover .menu-dot-empty { border-color: var(--teal-bright); }

/* The picker. */
.menu-emoji-pop {
  position: absolute; z-index: 30; width: min(340px, 100%); box-sizing: border-box; padding: 10px;
  background: #121217; border: 1px solid rgba(199, 217, 209, 0.18); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.menu-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.menu-emoji {
  aspect-ratio: 1; min-width: 0; padding: 0; background: none; border: 1px solid transparent; border-radius: 9px;
  font-size: 19px; line-height: 1; cursor: pointer;
}
.menu-emoji:hover, .menu-emoji:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: var(--line); outline: none; }
.menu-emoji[aria-pressed="true"] { border-color: var(--teal-bright); }
.menu-emoji-none { display: block; margin: 8px auto 0; font-size: 12.5px; }

/* Ideas to tap in, under each course. */
.menu-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.menu-ideas:empty { display: none; }
.menu-ideas-label { color: var(--dim); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; margin-right: 2px; }
.menu-idea {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 11px 6px 9px;
  background: rgba(255, 255, 255, 0.025); border: 1px dashed rgba(199, 217, 209, 0.22); border-radius: 999px;
  color: var(--ink); font-family: var(--disp); font-size: 12.5px; cursor: pointer;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.menu-idea:hover, .menu-idea:focus-visible { border-style: solid; border-color: var(--teal-bright); background: rgba(29, 181, 165, 0.1); outline: none; }
.menu-idea:disabled { opacity: 0.4; cursor: default; }
.menu-idea-e { font-size: 14px; }
.menu-ideas-more { font-size: 12px; }

/* ── The four styles, on the card ─────────────────────────────────────── */
.menu-card { transition: background 0.8s var(--ease-out), border-color 0.8s var(--ease-out); }

.menu-tool[data-style="neon"] .menu-card {
  border-color: rgba(255, 61, 201, 0.35);
  background: radial-gradient(70% 50% at 15% 0%, rgba(255, 61, 201, 0.16), transparent 70%),
    radial-gradient(60% 50% at 95% 100%, rgba(0, 229, 255, 0.12), transparent 70%), #0b0614;
  box-shadow: 0 0 40px rgba(255, 61, 201, 0.08) inset;
}
.menu-tool[data-style="neon"] .menu-card::after { border-color: rgba(95, 243, 255, 0.18); }
.article .menu-tool[data-style="neon"] :is(.menu-title-static, .menu-title-in) { color: #ff8ae6; font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 0 18px rgba(255, 61, 201, 0.55); }
.article .menu-tool[data-style="neon"] .menu-course h3 { color: #5ff3ff; text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); }
.menu-tool[data-style="neon"] .course-ico { color: #ff8ae6; filter: drop-shadow(0 0 6px rgba(255, 61, 201, 0.6)); }
.menu-tool[data-style="neon"] .menu-course { border-top-color: rgba(255, 61, 201, 0.22); }
.menu-tool[data-style="neon"] .menu-item-in { color: #f6eeff; border-bottom-color: rgba(255, 138, 230, 0.2); }

.menu-tool[data-style="paper"] .menu-card {
  border-color: #d9ccb6;
  background: radial-gradient(80% 60% at 50% 0%, rgba(181, 65, 46, 0.05), transparent 70%), #f5eddf;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 20px 50px rgba(0, 0, 0, 0.35);
}
.menu-tool[data-style="paper"] .menu-card::after { inset: 10px; border: 3px double rgba(43, 34, 30, 0.4); border-radius: 12px; }
.menu-tool[data-style="paper"] .menu-card :is(input, button, p, h3, .menu-ideas-label) { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }
.article .menu-tool[data-style="paper"] :is(.menu-title-static, .menu-title-in) { color: #2b221e; font-weight: 600; }
.article .menu-tool[data-style="paper"] .menu-kicker, .article .menu-tool[data-style="paper"] .menu-hint, .article .menu-tool[data-style="paper"] .menu-howto { color: #7d7163; }
.article .menu-tool[data-style="paper"] .menu-course h3 { color: #b5412e; letter-spacing: 0.24em; }
.menu-tool[data-style="paper"] .course-ico { color: #b5412e; filter: none; }
.menu-tool[data-style="paper"] .menu-course { border-top-color: rgba(43, 34, 30, 0.18); }
.menu-tool[data-style="paper"] .menu-item-in { color: #2b221e; border-bottom-color: rgba(43, 34, 30, 0.22); }
.menu-tool[data-style="paper"] .menu-item-in:focus { background: #fffaf0; border-color: rgba(181, 65, 46, 0.5); }
.menu-tool[data-style="paper"] .menu-mini { color: #7d7163; }
.menu-tool[data-style="paper"] .menu-mini:hover:not(:disabled) { color: #2b221e; border-color: rgba(43, 34, 30, 0.2); }
.menu-tool[data-style="paper"] .menu-dot-empty { border-color: rgba(43, 34, 30, 0.4); }
.menu-tool[data-style="paper"] .menu-dot:hover { border-color: rgba(43, 34, 30, 0.2); background: rgba(43, 34, 30, 0.04); }
.menu-tool[data-style="paper"] .menu-idea { color: #2b221e; background: rgba(43, 34, 30, 0.03); border-color: rgba(43, 34, 30, 0.25); }
.menu-tool[data-style="paper"] .menu-idea:hover, .menu-tool[data-style="paper"] .menu-idea:focus-visible { border-color: #b5412e; background: rgba(181, 65, 46, 0.08); }
.menu-tool[data-style="paper"] .menu-course-tools .tool-link, .menu-tool[data-style="paper"] .menu-ideas-more { color: #6b5f52; }
.menu-tool[data-style="paper"] .menu-row.picked { background: rgba(181, 65, 46, 0.1); box-shadow: inset 2px 0 0 #b5412e; }

.menu-tool[data-style="garden"] .menu-card {
  border-color: rgba(169, 218, 159, 0.25);
  background: radial-gradient(70% 55% at 20% 0%, rgba(150, 214, 140, 0.14), transparent 70%),
    radial-gradient(50% 45% at 90% 100%, rgba(255, 214, 150, 0.07), transparent 70%), #0d1913;
}
.menu-tool[data-style="garden"] .menu-card::after { border-color: rgba(169, 218, 159, 0.12); border-radius: 24px; }
.article .menu-tool[data-style="garden"] :is(.menu-title-static, .menu-title-in) { color: #eaf4e5; font-weight: 300; }
.article .menu-tool[data-style="garden"] .menu-course h3 { color: #a9da9f; }
.menu-tool[data-style="garden"] .course-ico { color: #ffd696; filter: drop-shadow(0 0 6px rgba(255, 214, 150, 0.45)); }
.menu-tool[data-style="garden"] .menu-course { border-top-color: rgba(169, 218, 159, 0.16); }
.menu-tool[data-style="garden"] .menu-item-in { color: #e3efdd; border-bottom-color: rgba(169, 218, 159, 0.2); }
.menu-tool[data-style="garden"] .menu-idea:hover, .menu-tool[data-style="garden"] .menu-idea:focus-visible { border-color: #a9da9f; background: rgba(169, 218, 159, 0.1); }

@media (max-width: 640px) {
  .menu-bar { justify-content: center; }
  .menu-dot { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-card, .menu-swatch, .menu-idea { transition: none; }
}

/* ── The four styles, on paper ────────────────────────────────────────── */
@media print {
  .print-sheet.menu-sheet .menu-sheet-kicker { margin: 0 0 4pt; font-size: 8.5pt; letter-spacing: 0.5em; text-transform: uppercase; color: #777; }
  .print-sheet.menu-sheet .menu-sheet-e { margin-right: 6pt; }
  .print-sheet.menu-sheet-neon h1 { font-weight: 800; color: #c4128f; letter-spacing: 0.04em; }
  .print-sheet.menu-sheet-neon h2 { color: #007c8c; }
  .print-sheet.menu-sheet-paper { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; border: 3pt double #2b221e; padding: 22pt 26pt; }
  .print-sheet.menu-sheet-paper h1 { font-weight: 600; }
  .print-sheet.menu-sheet-paper h2 { color: #b5412e; }
  .print-sheet.menu-sheet-garden h1 { font-weight: 300; color: #2c4a36; }
  .print-sheet.menu-sheet-garden h2 { color: #3e7a3a; }
  .print-sheet.menu-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* The printed menu, two by two like the card, with HYPER at its foot (2026-11-01). */
@media print {
  .print-sheet.menu-sheet .menu-sheet-courses {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14pt 30pt; margin: 6pt 0 0; text-align: left;
  }
  .print-sheet.menu-sheet .menu-sheet-course { margin: 0; padding-top: 8pt; border-top: 0.75pt solid #c8c8c8; }
  .print-sheet.menu-sheet-paper .menu-sheet-course { border-top-color: #cdbfa8; }
  .print-sheet.menu-sheet .menu-sheet-brand {
    display: flex; align-items: center; justify-content: center; gap: 8pt;
    margin-top: 20pt; padding-top: 10pt; border-top: 0.75pt solid #c8c8c8; color: #555; font-size: 9.5pt;
  }
  .print-sheet.menu-sheet .menu-sheet-brand img { width: 18pt; height: 18pt; }
  .print-sheet.menu-sheet .menu-sheet-word { color: #111; font-weight: 600; letter-spacing: 0.3em; }
}