/* ============================================================
   IXD - Immersive Experience Design Taxonomy - styles.css

   Visual direction: a professional design methodology - deep
   green branding, off-white content, generous whitespace,
   rounded cards, soft shadows, and blue/purple used sparingly
   as the action color. The whole theme lives in the variables
   below.
   ============================================================ */

:root {
  /* Brand greens */
  --green-950: #0a1f19;
  --green-900: #0f2e25;
  --green-800: #14402f;
  --green-700: #1b5741;
  --green-100: #ddefe6;

  /* Content surfaces - a slightly darker, more grounded neutral
     palette. The green and purple brand colors above are unchanged
     and remain the most recognizable colors on the page. */
  --bg: #e4e6de;        /* page background - grounded warm neutral */
  --surface: #f2f3ed;   /* cards, modals, dropdowns - soft off-white */
  --cell: #e7e9e0;      /* unselected taxonomy cells, inset fields */
  --ink: #17241f;       /* primary text */
  --ink-soft: #4e5a53;  /* muted text - darker for contrast on the deeper bg */
  --line: #ccd1c6;      /* borders and dividers - stronger */

  /* Purple accent - actions, selection, focus */
  --grad-a: #4f46e5;
  --grad-b: #9333ea;
  --gradient: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  --grad-soft: linear-gradient(135deg, #eef2ff, #f6efff);

  --danger: #c0392b;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 32, 25, 0.05), 0 8px 24px rgba(16, 32, 25, 0.06);
  --shadow-lift: 0 2px 4px rgba(16, 32, 25, 0.08), 0 12px 32px rgba(16, 32, 25, 0.12);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* Available to assistive technology, invisible on screen. Used for
   page headings that the visual design carries in other ways. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Off-screen until a keyboard user tabs to it, then it drops into
   the top-left corner in the brand green. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--green-800);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  transition: top 0.15s ease;
}

.skip-link:focus { top: 10px; }
.skip-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The <main> elements take focus from the skip link but are not
   interactive, so they must not draw a focus ring. */
main:focus { outline: none; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

main {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.fade-in { animation: rise 0.25s ease both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Site header
   ------------------------------------------------------------ */
.site-header {
  background: linear-gradient(120deg, var(--green-950), var(--green-800));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(10, 31, 25, 0.35);
}

/* Three-column grid: branding left, nav truly centered on the
   viewport, account controls right. The center column is centered
   independently of the left/right widths, so a long display name or
   the Sign In / Sign Up pair never pushes the tabs off-center. */
.header-inner {
  width: 100%;
  margin: 0;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "brand nav actions";
  align-items: center;
  gap: 12px;
}

.brand {
  grid-area: brand;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  min-width: 0;
}

.brand-link { color: inherit; text-decoration: none; }

.site-nav { grid-area: nav; justify-self: center; min-width: 0; }
.header-actions { grid-area: actions; justify-self: end; min-width: 0; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--gradient);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Simple site navigation */
.site-nav {
  display: flex;
  gap: 4px;
}

.site-nav a {
  color: var(--green-100);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Current page */
.site-nav a.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.site-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

/* Account controls (upper right) */
.account-area { display: flex; align-items: center; gap: 8px; min-width: 0; }

#auth-buttons { display: flex; gap: 8px; min-width: 0; }

.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.account-btn:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }

.account-btn-solid { background: var(--gradient); border-color: transparent; }
.account-btn-solid:hover { filter: brightness(1.1); }

.account-initial {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gradient);
  font-size: 0.72rem;
  font-weight: 800;
}

.account-menu-wrap { position: relative; }

.account-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  min-width: 200px;
  padding: 6px;
  z-index: 50;
  animation: rise 0.18s ease both;
}

.account-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.account-dropdown button:hover { background: var(--green-100); }

/* ------------------------------------------------------------
   Landing page - a welcome and two choices
   ------------------------------------------------------------ */
.landing-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px;
  min-height: calc(100vh - 210px);
  display: grid;
  place-items: center;
  text-align: center;
}

.landing-hero {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 56px 40px;
  animation: rise 0.3s ease both;
}

.landing-question {
  margin: 6px 0 10px;
  font-size: 2.35rem;
  line-height: 1.18;
  letter-spacing: 0;
}

.landing-sub {
  margin: 0 0 28px;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.landing-choices {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.landing-choices .btn { min-width: 200px; }

/* ------------------------------------------------------------
   About page - informational hero + cards
   ------------------------------------------------------------ */
.about-main { max-width: 1180px; margin: 0 auto; padding: 0 24px 16px; }

.about-hero {
  text-align: center;
  padding: 52px 24px 8px;
  animation: rise 0.3s ease both;
}

.about-hero h1 {
  margin: 0 0 14px;
  font-size: 2.85rem;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

.about-hero .hero-sub {
  max-width: 56ch;
  margin-bottom: 0;
}

/* Two columns on desktop: the introduction reads at a comfortable
   measure on the left, the core-idea card anchors the right. */
.learn-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
  text-align: left;
}

@media (max-width: 900px) {
  .learn-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
  }
  .learn-hero-text h1 { margin-left: auto; margin-right: auto; max-width: 24ch; }
  .learn-hero-text .hero-sub { margin-left: auto; margin-right: auto; }
  .learn-hero-grid .learn-core { margin-top: 26px; }
}

.about-cta { display: flex; justify-content: center; margin: 26px 0 12px; }

.landing-framing {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  text-align: left;
  display: grid;
  gap: 10px;
}

.landing-framing li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  box-shadow: var(--shadow);
}

.landing-framing strong { color: var(--ink); }

.hero-eyebrow {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-700);
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin: 0 0 24px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.intro {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 24px 8px;
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.intro-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}

.intro-card h2 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
}

.intro-card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.intro-card em { color: var(--ink); font-style: italic; }

.video-section {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 24px 24px;
  text-align: center;
}

.video-section h2 { margin: 0 0 6px; font-size: 1.5rem; letter-spacing: 0; }

.section-sub { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.95rem; }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--green-900);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  color: var(--green-100);
}

.video-placeholder p { margin: 0; font-weight: 600; }

.video-placeholder-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 1.4rem;
}

/* ------------------------------------------------------------
   The design workspace
   ------------------------------------------------------------ */
.workspace-anchor { scroll-margin-top: 80px; }

/* The Design page hero - the same voice as Discover and Learn:
   green eyebrow, headline with the purple gradient accent, and a
   reading-width subtitle. Compact, because the workspace below is
   the point of the page. */
.design-hero {
  text-align: center;
  padding: 40px 24px 4px;
  animation: rise 0.3s ease both;
}

.design-hero h1 {
  margin: 0 0 10px;
  font-size: 2.6rem;
  line-height: 1.12;
  letter-spacing: 0;
}

.design-hero .hero-sub {
  max-width: 60ch;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .design-hero h1 { font-size: 2.1rem; }
}

@media (max-width: 480px) {
  .design-hero { padding: 30px 12px 0; }
  .design-hero h1 { font-size: 1.85rem; }
}

/* The taxonomy's attribution, quiet in the table panel's corner */
.table-credit {
  margin: 10px 4px 0;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  opacity: 0.8;
}

/* The Learn guide's attribution - same quiet treatment, sitting in
   the page corner beneath the closing panel. */
.learn-credit { margin: 12px 4px 0; }

.workspace-controls { margin-top: 30px; }

.topic-area { display: flex; flex-direction: column; gap: 4px; }

.topic-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.topic-help {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.topic-hint {
  margin: 8px 0 0;
  color: var(--grad-a);
  font-size: 0.92rem;
  font-weight: 600;
}

/* Standalone generation action - visually separate from the topic
   card above and the table controls, directly below the table. */
.generate-bar {
  display: flex;
  justify-content: center;
  margin: 6px 0 30px;
}

.generate-bar .btn { min-width: 260px; }

/* Note shown on a generated result when the inputs have changed
   since it was produced. */
.result-note {
  margin: 0 0 14px;
  padding: 9px 14px;
  border-left: 3px solid var(--grad-a);
  background: var(--grad-soft);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.scroll-cue {
  margin: 8px 4px 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-align: right;
}

@media (min-width: 1300px) {
  .scroll-cue { display: none; }   /* everything fits, no cue needed */
}

/* ------------------------------------------------------------
   Panels (edit toolbar) + shared bits
   ------------------------------------------------------------ */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin: 26px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  animation: rise 0.3s ease both;
}

/* Stacked panels must not wrap: a wrapped column flex container
   makes Chrome inflate the height of block-level items (the Add
   More Detail box gained ~80px of phantom space below its grid). */
.panel-stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toolbar-group { display: flex; flex-wrap: wrap; gap: 10px; }

.panel-note { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.15s ease, box-shadow 0.2s ease;
}

.btn:hover {
  border-color: var(--green-700);
  background: var(--green-100);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn:active { transform: translateY(0) scale(0.97); }

/* Anchors styled as buttons (landing/about calls to action) */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn:focus-visible { outline: 2px solid var(--grad-a); outline-offset: 2px; }

/* Buttons are disabled while a save or sign-in is in flight. Without
   this they kept their full-strength look and stayed hover-reactive,
   so a stalled request read as an unresponsive button. */
.btn:disabled,
.btn[disabled],
.account-btn:disabled,
.icon-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

.btn:disabled:hover,
.btn[disabled]:hover,
.account-btn:disabled:hover,
.icon-btn:disabled:hover {
  filter: none;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
}
.btn-primary:hover {
  background: var(--gradient);
  color: #fff;
  filter: brightness(1.08);
  box-shadow: var(--shadow-lift);
}

.btn-brand {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
}
.btn-brand:hover { background: var(--green-700); color: #fff; }

.btn-danger { color: var(--danger); }
.btn-danger:hover { background: #fdecea; border-color: var(--danger); }

/* Quiet buttons for secondary/low-emphasis actions */
.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
}
.btn-quiet:hover { background: var(--cell); border-color: var(--line); color: var(--ink); }

.btn-large {
  padding: 15px 32px;
  font-size: 1.05rem;
  border-radius: 14px;
}

/* Sync status (edit mode) */
.cloud-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.sync-status { font-size: 0.88rem; font-weight: 600; }
.sync-status.is-ok      { color: var(--green-700); }
.sync-status.is-info    { color: var(--ink-soft); }
.sync-status.is-local   { color: var(--ink-soft); }
.sync-status.is-pending { color: #b45309; }
.sync-status.is-error   { color: var(--danger); }

.save-status { color: var(--green-700); font-size: 0.85rem; font-weight: 700; }

.backup-tools { border-top: 1px solid var(--line); padding-top: 10px; }
.backup-tools summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.backup-tools summary:hover { color: var(--ink); }
.backup-tools .toolbar-group { margin-top: 12px; }

/* Topic input */
.topic-row { display: flex; align-items: center; gap: 10px; }

#topic-input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--cell);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#topic-input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--grad-a);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

/* ------------------------------------------------------------
   Taxonomy search
   ------------------------------------------------------------ */
.search-bar {
  position: relative;
  margin-bottom: 0;
  min-width: 0;
  flex: 1 1 420px;
  display: flex;
  align-items: center;
}

#taxonomy-filter {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--cell);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#taxonomy-filter:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--grad-a);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  z-index: 40;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  animation: rise 0.18s ease both;
}

.search-result {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 9px 12px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

.search-result:hover, .search-result:focus-visible { background: var(--grad-soft); }
.search-result strong { display: block; font-size: 0.95rem; }
.search-result small { color: var(--ink-soft); font-size: 0.8rem; }

.search-context {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-700);
}

.search-empty { margin: 8px 12px; color: var(--ink-soft); font-size: 0.88rem; }

/* ------------------------------------------------------------
   The taxonomy - a design rubric, not a spreadsheet.
   Columns are decisions; cells are open, borderless options that
   read as choices. Selection is unmistakable.
   ------------------------------------------------------------ */
.workspace { padding: 4px 0; }

.taxonomy-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 22px;
}

.table-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.table-tools .table-actions .btn {
  padding: 8px 13px;
  font-size: 0.88rem;
}

.table-actions { justify-content: flex-end; }

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}

table {
  border-collapse: separate;
  border-spacing: 8px 6px;
  width: max-content;
  min-width: 1720px;
  font-size: 0.88rem;
  table-layout: fixed;
}

th, td {
  width: 164px;
  max-width: 164px;
  padding: 10px;
  text-align: left;
  min-width: 164px;
  border-radius: var(--radius-sm);
}

/* Column headers: dimension name + one-line subtitle. */
thead th {
  background: var(--green-800);
  color: var(--green-100);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  vertical-align: top;
  z-index: 5;
}

.th-label {
  display: block;
  text-transform: uppercase;
}

.th-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
  line-height: 1.35;
}

.th-info {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.th-info:hover, .th-info:focus-visible {
  background: var(--green-700);
  transform: translateY(-1px);
}

.th-info:focus-visible { outline: 2px solid var(--grad-a); outline-offset: 2px; }

/* Value cells: light, airy, no heavy borders */
tbody td {
  background: var(--cell);
  border: 1px solid transparent;
  height: 68px;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.12s ease;
}

.selectable { cursor: pointer; user-select: none; }

/* Keyboard focus uses the purple action color on unselected cells
   and the brand green on locked ones, so the ring never reads as a
   second selection state. */
.selectable:focus-visible {
  outline: 2px solid var(--grad-a);
  outline-offset: 2px;
  background: var(--surface);
}

.selectable.is-locked:focus-visible { outline-color: var(--green-700); }

/* The table itself is a scrollable, tabbable region. */
.table-wrap:focus-visible { outline: 2px solid var(--grad-a); outline-offset: 2px; border-radius: var(--radius-sm); }

.selectable:hover {
  background: var(--surface);
  border-color: var(--line);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Selection is unmistakable: color, border, weight, and a check
   marker (never color alone) */
.selectable.is-selected {
  background: var(--grad-soft);
  border-color: var(--grad-a);
  box-shadow: 0 0 0 1px var(--grad-a), var(--shadow);
  animation: pop 0.25s ease;
}

.selectable.is-selected .cell-text {
  font-weight: 700;
  color: var(--grad-a);
}

/* Locked dimensions get the brand-green treatment - clearly
   different from ordinary selection, never color alone (the
   closed padlock is always visible) */
.selectable.is-locked {
  background: var(--green-100);
  border-color: var(--green-700);
  box-shadow: 0 0 0 1px var(--green-700), var(--shadow);
}

.selectable.is-locked .cell-text { color: var(--green-800); }

@keyframes pop {
  0%   { transform: scale(0.94); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Cell internals: name plus compact controls */
.cell-top {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
}

.cell-num {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-right: auto;
}

.selectable.is-selected .cell-num { color: var(--grad-a); }
.selectable.is-locked .cell-num { color: var(--green-700); }

td .cell-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
  font-size: 0.9rem;
  line-height: 1.25;
}

/* The lock control on a selected element */
.cell-lock-btn {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cell-lock-btn:hover, .cell-lock-btn:focus-visible {
  border-color: var(--green-700);
  color: var(--green-700);
}

.cell-lock-btn:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }

.cell-lock-btn.is-on {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
}

.cell-info-btn {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

td:hover .cell-info-btn, .cell-info-btn:focus-visible { opacity: 1; }
.cell-info-btn:hover { background: var(--grad-soft); color: var(--grad-a); border-color: var(--grad-a); }
.cell-info-btn:focus-visible { outline: 2px solid var(--grad-a); outline-offset: 2px; }
.selectable.is-selected .cell-info-btn { color: var(--grad-a); }

/* An element at the top or bottom of its dimension keeps its arrow in
   place rather than removing it, so the row of controls does not
   reflow as elements move. The button stays legible but reads as
   unavailable, and browsers leave disabled buttons untabbable. */
.cell-info-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
td:hover .cell-info-btn:disabled { opacity: 0.3; }
.cell-info-btn:disabled:hover {
  background: var(--surface);
  color: var(--ink-soft);
  border-color: var(--line);
}

/* The icons stay 20px so the cells look unchanged, but each control
   claims a 24px pointer target (the WCAG 2.2 minimum) through an
   invisible ring. inset is measured from the padding box, and these
   buttons carry a 1px border, so -3px is what puts the ring 2px
   outside the 20px border box. .cell-top's 6px gap absorbs those
   2px per side and still leaves 2px clear between the Info and Lock
   targets, and the ring belongs to the button, so pressing it never
   selects the cell underneath. */
.cell-info-btn, .cell-lock-btn { position: relative; }

/* Exact optical centering for every tool icon, in both modes: the
   buttons are grids with no padding and no line box of their own,
   and the SVG glyphs are block-level, so place-items puts each
   icon dead center of its 20px target. */
.cell-info-btn, .cell-lock-btn, .cell-tool-btn, .header-tool-btn {
  padding: 0;
  line-height: 0;
}

.cell-info-btn svg, .cell-lock-btn svg,
.cell-tool-btn svg, .header-tool-btn svg {
  display: block;
}

.cell-info-btn::after, .cell-lock-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
}

/* Edit-mode grid controls */
[contenteditable="true"] { outline: none; cursor: text; min-height: 1em; }

.header-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

.header-name {
  display: block;
  min-height: 1.2em;
  line-height: 1.3;
  padding: 1px 2px;
}
.header-name:focus {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

/* The dedicated tool row: Left, Edit, Right, Delete. Fixed-size
   icon buttons in normal flow (no absolute positioning), 8px
   apart so their invisible 24px hit rings stay clear of each
   other and of the title above. */
.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-tool-btn {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--green-100);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

/* The same invisible 24px pointer target the cell controls use. */
.header-tool-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
}

.header-tool-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
}

.header-tool-btn:focus-visible {
  outline: 2px solid var(--grad-a);
  outline-offset: 2px;
}

.header-tool-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.header-delete-btn:hover:not(:disabled) {
  border-color: #f3b8b3;
  color: #ffd9d5;
}

/* Edit-mode cells mirror the header pattern: name row on top,
   compact tool row beneath. */
.edit-cell { vertical-align: top; }

.cell-name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.edit-cell .cell-text {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 40px;
}

.edit-cell .cell-text:focus {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--grad-a);
  border-radius: 4px;
}

/* The element tool row: Up, Edit, Down beneath the name - the
   same dedicated-row treatment as the dimension headers, in the
   cell's light theme. The 8px gap keeps the invisible 24px hit
   rings clear of each other and of the name above. */
.cell-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

/* Square tool buttons matching .header-tool-btn, on light cells:
   always visible (no hover-reveal fade), 6px radius, fixed 20px. */
.cell-tool-btn {
  border-radius: 6px;
  opacity: 1;
}
td:hover .cell-tool-btn, .cell-tool-btn { opacity: 1; }
.cell-tool-btn:disabled { opacity: 0.3; }
td:hover .cell-tool-btn:disabled { opacity: 0.3; }

.delete-btn {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.delete-btn:hover { opacity: 1; background: #fdecea; color: var(--danger); }

.row-tools {
  width: 38px;
  min-width: 38px;
  text-align: center;
  background: transparent !important;
}

/* ------------------------------------------------------------
   The generated experience - a structured report
   ------------------------------------------------------------ */
.recipe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.chip {
  background: var(--grad-soft);
  border: 1px solid #ddd9f8;
  color: var(--grad-a);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.76rem;
  font-weight: 600;
}

.report-title {
  margin: 4px 0 10px;
  font-size: 1.6rem;
  letter-spacing: 0;
}

.report-pitch {
  margin: 0 0 20px;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
  border-left: 4px solid var(--grad-a);
  padding-left: 16px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.report-card {
  background: var(--cell);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}

.report-card h3 {
  margin: 0 0 6px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
}

.report-card p { margin: 0; font-size: 0.94rem; }
.report-card ul { margin: 4px 0 0; padding-left: 20px; font-size: 0.94rem; }
.report-card li { margin-bottom: 5px; }

.report-rationale { margin-bottom: 14px; }

.report-group-label {
  margin: 18px 0 10px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-800);
}

.report-expansion {
  background: var(--grad-soft);
  border-color: #ddd9f8;
}

.rationale-role { color: var(--ink-soft); font-size: 0.86em; }

/* ------------------------------------------------------------
   Current report layout - one calm, shared format for every
   section. A header (eyebrow, title, selection chips) followed by
   numbered sections separated by hairlines: no nested boxes, one
   accent color per role, and a comfortable reading measure.
   Numbering lives in CSS counters so headings stay plain text.
   ------------------------------------------------------------ */
.idea-output, .lib-content { counter-reset: report-section; }

.report-head {
  padding-bottom: 16px;
  border-bottom: 2px solid var(--green-800);
  margin-bottom: 4px;
}

.report-eyebrow {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grad-a);
}

.report-head .report-title { margin: 0 0 12px; }
.report-head .recipe-chips { margin-bottom: 0; }

.report-section {
  counter-increment: report-section;
  padding: 20px 0 22px;
}

.report-section + .report-section { border-top: 1px solid var(--line); }

.report-section h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-800);
}

.report-section h3::before {
  content: counter(report-section, decimal-leading-zero);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--grad-a);
  letter-spacing: 0;
}

.report-section p {
  margin: 0;
  max-width: 74ch;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink);
}

.report-section p + p { margin-top: 10px; }

/* ------------------------------------------------------------
   The two-report tabs: Design Report (short, design language)
   and Full Report (the whole analysis + build estimates). Each
   pane restarts the section numbering.
   ------------------------------------------------------------ */
.report-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 4px;
  border-bottom: 1px solid var(--line);
}

.report-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 8px 14px 10px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}

.report-tab:hover { color: var(--ink); }

.report-tab.is-active {
  color: var(--grad-a);
  border-bottom-color: var(--grad-a);
}

.report-tab:focus-visible { outline: 2px solid var(--grad-a); outline-offset: 2px; border-radius: 4px; }

.report-pane { counter-reset: report-section; }

/* Lists and tables inside report sections */
.report-list {
  margin: 10px 0 0;
  padding-left: 20px;
  max-width: 80ch;
  font-size: 0.95rem;
  line-height: 1.65;
}

.report-list li { margin-bottom: 9px; }
.report-list strong { color: var(--green-800); }

.report-table-wrap { margin-top: 10px; overflow-x: auto; }

/* The taxonomy grid styles bare `table`/`th, td` selectors with
   fixed 164px columns and a 1720px minimum - every report-table
   property below that looks redundant is undoing that. */
.report-table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  width: 100%;
  min-width: 0;
  max-width: 860px;
  font-size: 0.92rem;
}

.report-table th,
.report-table td {
  width: auto;
  min-width: 0;
  max-width: none;
  text-align: left;
  vertical-align: top;
  padding: 8px 12px;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
}

.report-table thead th {
  background: none;
  color: var(--green-700);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.report-table tbody td {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  height: auto;
}

.report-table tbody th {
  font-weight: 700;
  color: var(--green-800);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .report-table tbody th { white-space: normal; }
}

.report-note {
  margin-top: 12px;
  padding: 8px 14px;
  border-left: 3px solid var(--grad-a);
  background: var(--grad-soft);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.85rem;
  max-width: 74ch;
}

.idea-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer {
  background: var(--green-950);
  color: var(--green-100);
  text-align: center;
  padding: 30px 24px;
  font-size: 0.82rem;
  margin-top: 40px;
}

.site-footer p { margin: 4px 0; opacity: 0.85; }
.site-footer a { color: var(--green-100); }
.site-footer a:hover { color: #fff; }

/* Two quiet lines under a small purple rule: the partnership
   leads, the open-access note supports. */
.site-footer::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--gradient);
  opacity: 0.85;
}

.footer-partnership {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  opacity: 1 !important;
}

/* The partner names link out; a quiet underline keeps the line
   reading as one sentence until hovered. */
.footer-partnership a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}

.footer-partnership a:hover { text-decoration-color: #fff; color: #fff; }
.footer-partnership a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* The ticket entry point - a footer line with a link-styled button */
.footer-support { font-size: 0.82rem; }

.footer-ticket-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--green-100);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.footer-ticket-btn:hover { color: #fff; }
.footer-ticket-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.footer-open-access {
  font-size: 0.78rem;
  opacity: 0.75 !important;
}

/* ------------------------------------------------------------
   Dialogs
   ------------------------------------------------------------ */
.modal {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 26px 28px;
  width: calc(100vw - 32px);
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  color: var(--ink);
}

.modal::backdrop {
  background: rgba(10, 31, 25, 0.45);
  backdrop-filter: blur(2px);
}

.modal[open] { animation: rise 0.22s ease both; }

.modal-wide { max-width: 760px; }

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.modal-head h2 { margin: 0; font-size: 1.3rem; letter-spacing: 0; }

.modal-context {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
}

.modal-close {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.modal-close:hover { background: #fdecea; border-color: var(--danger); }

.modal-lead {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--green-800);
}

.modal h3 {
  margin: 18px 0 4px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
}

.modal p { margin: 0; }

.field { display: block; margin: 14px 0 0; }

.field span {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.field small { font-weight: 400; color: var(--ink-soft); }

.field input,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  background: var(--cell);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--grad-a);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.editor-form {
  display: block;
  margin-top: 6px;
}

/* Account settings: section dividers, read-only email, status line */
.modal h3.settings-section-title {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.modal h3.settings-section-title:first-of-type {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}

.field input[readonly] {
  color: var(--ink-soft);
  background: var(--cell);
  cursor: default;
}

.settings-status { margin: 12px 0 0; }

.login-error {
  margin: 12px 0 0;
  color: var(--danger);
  font-size: 0.88rem;
  font-weight: 600;
}

.auth-info {
  margin: 12px 0 0;
  color: var(--green-700);
  font-size: 0.88rem;
  font-weight: 600;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 0;
}

.link-btn {
  border: none;
  background: transparent;
  color: var(--grad-a);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.link-btn:hover { color: var(--grad-b); }

/* ------------------------------------------------------------
   Saved experiences library
   ------------------------------------------------------------ */
.library-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 8px 0 14px;
}

.library-controls input[type="search"] {
  flex: 1;
  min-width: 160px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  background: var(--cell);
}

.library-controls select {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  background: var(--surface);
}

.lib-filter { font-size: 0.88rem; font-weight: 600; }

.lib-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; }

.lib-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--cell);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.lib-item:hover { background: var(--grad-soft); transform: translateY(-1px); box-shadow: var(--shadow); }

.lib-item-fav { color: #7a4700; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; min-width: 54px; }
.lib-item-main { flex: 1; min-width: 0; }
.lib-item-main strong { display: block; font-size: 0.95rem; }
.lib-item-main small { color: var(--ink-soft); font-size: 0.8rem; }

.lib-detail-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }

.lib-title-input {
  flex: 1;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cell);
}

.icon-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover { border-color: var(--green-700); transform: translateY(-1px); }

.lib-fav-btn { color: #7a4700; font-weight: 800; }

.lib-actions { margin: 14px 0; }

.lib-content { border-top: 1px solid var(--line); padding-top: 14px; }

/* ------------------------------------------------------------
   Responsiveness
   ------------------------------------------------------------ */
/* Below this width, show only the account avatar (not the display
   name) so a long name can never widen the right column enough to
   push the centered navigation off-center. */
@media (max-width: 900px) {
  .account-name { display: none; }
}

@media (max-width: 720px) {
  .topic-row { flex-direction: column; align-items: stretch; }
  th, td { padding: 9px 10px; }

  .account-btn { padding: 8px 10px; }
  .site-nav a { padding: 8px 12px; font-size: 0.86rem; }
  thead th { position: static; }   /* the wrapped header is taller here */
  .library-controls { flex-direction: column; align-items: stretch; }
  .lib-actions .btn { flex: 1; }
  .idea-actions .btn { flex: 1; }
  .generate-bar .btn { width: 100%; min-width: 0; }
  .landing-question { font-size: 2rem; }
  .about-hero h1 { font-size: 2.35rem; }
}

/* Narrow screens: brand + account on the top row, centered nav on
   its own row below, so the tabs never overlap the logo or account. */
@media (max-width: 600px) {
  .header-inner {
    grid-template-columns: auto auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    justify-content: space-between;
    row-gap: 8px;
  }
  .site-nav { justify-self: center; }
}

@media (max-width: 480px) {
  .landing-choices { flex-direction: column; align-items: stretch; }
  .landing-choices .btn { width: 100%; }
  .landing-hero { padding: 40px 22px; }
  .landing-question { font-size: 1.72rem; }
  .about-hero { padding: 38px 12px 8px; }
  .about-hero h1 { font-size: 2rem; }
  .site-nav { width: 100%; justify-content: center; }
  .site-nav a { padding: 7px 10px; }
}

/* ------------------------------------------------------------
   Reduced motion
   Everyone else keeps the rise, pop, and hover transitions. For
   readers who ask the OS for less movement, every animation lands
   on its final state immediately - nothing is removed, only the
   travel between states. script.js honours the same preference for
   scrollIntoView(), whose behavior argument CSS cannot override.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   Build Your Experience - Add More Detail (collapsed by default)
   ------------------------------------------------------------ */
.detail-box {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.detail-box > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--green-800);
}

.detail-summary-note {
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin-top: 12px;
}

.detail-grid .field { margin: 0; }
.detail-grid .detail-wide { grid-column: 1 / -1; }

.detail-grid input,
.detail-grid select,
.detail-grid textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  background: var(--cell);
}

.detail-grid input:focus,
.detail-grid select:focus,
.detail-grid textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--grad-a);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

/* ------------------------------------------------------------
   Guidance search label (newcomer wording above the input)
   ------------------------------------------------------------ */
/* On narrow screens the action buttons wrap under the search
   input cleanly; the input itself always takes the full row. */
@media (max-width: 720px) {
  .search-bar { flex-wrap: wrap; }
}

.col-move-btn { line-height: 0; }

/* Header names and one-sentence text follow the same wrapping
   policy as element names: whole words only, no auto-hyphenation,
   one consistent size per role. */
.th-label, .th-sub, .header-name {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ------------------------------------------------------------
   Learn page - the IXD foundations guide (about.html only).
   Everything reuses the theme tokens above; the learn- prefix
   keeps these rules away from the workspace and dialogs.
   ------------------------------------------------------------ */
.learn-section {
  padding: 46px 0 44px;
  scroll-margin-top: 92px;   /* anchors land below the sticky header */
}

/* The same hairline rhythm the generated report uses between its
   numbered sections, at page scale. */
.learn-section + .learn-section { border-top: 1px solid var(--line); }

.learn-section h2 {
  margin: 0 0 14px;
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: 0;
}

/* A short gradient rule under each section title - the page's one
   recurring purple flourish, echoing the brand mark. */
.learn-section h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--gradient);
}

.learn-section h3 {
  margin: 34px 0 12px;
  font-size: 1.2rem;
  letter-spacing: 0;
}

/* Section eyebrows carry their guide number in the action purple,
   the same pairing the generated report uses for its numbering. */
.learn-eyebrow-num {
  color: var(--grad-a);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
}

.learn-intro {
  margin: 0 0 22px;
  max-width: 76ch;
  color: var(--ink-soft);
}

/* Jump links under the hero stand in for the standalone guide's
   own navigation without duplicating the site header. */
.learn-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
  max-width: 900px;
}

.learn-toc a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--green-800);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.learn-toc a:hover {
  border-color: var(--green-700);
  background: var(--green-100);
  transform: translateY(-1px);
}

.learn-toc a:focus-visible { outline: 2px solid var(--grad-a); outline-offset: 2px; }

/* The hero's core-idea card wears the site header's deep green,
   with the formula on the purple action gradient - the same
   pairing as the IXD brand mark. */
.learn-core {
  max-width: 680px;
  margin: 0 auto;
  background: linear-gradient(120deg, var(--green-950), var(--green-800));
  border: 1px solid var(--green-700);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 22px 26px;
  text-align: left;
}

.learn-core .hero-eyebrow { color: var(--green-100); opacity: 0.85; }

.learn-formula {
  margin: 0 0 12px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--gradient);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

.learn-core p { margin: 0; color: var(--green-100); font-size: 0.95rem; }

/* Content cards - the same surface treatment as .intro-card, with
   a visible title instead of an eyebrow-style heading. */
/* 300px tracks keep every card family in even rows on a wide
   screen: the trios sit 3-up, the six immersion forms 3x2, the
   nine taxonomy dimensions 3x3. */
.learn-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* The five LXD lenses read as one spectrum, so they get narrower
   tracks and a single row on desktop. */
.learn-grid-5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.learn-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}

.learn-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.learn-card p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }

/* The nine dimensions as one contained panel of miniature table
   columns - each card is a green header over stacked element
   cells, the exact anatomy of the Design page's taxonomy table. */
.learn-taxonomy-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.learn-dim-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.learn-dim {
  display: flex;
  flex-direction: column;
}

.learn-dim-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--green-800);
  color: var(--green-100);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  margin-bottom: 10px;
}

.learn-dim-num {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.75;
  margin-top: 2px;
}

.learn-dim-head h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The dimension's subtitle, exactly as the table header shows it */
.learn-dim-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.75;
}

.learn-dim > p {
  margin: 0 2px 10px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.learn-dim ul {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  counter-reset: learn-element -1;
  display: grid;
  gap: 6px;
}

.learn-dim li {
  counter-increment: learn-element;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--cell);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 0.86rem;
  color: var(--ink);
}

.learn-dim li::before {
  content: counter(learn-element);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.learn-card .chip { margin-bottom: 10px; display: inline-block; }

.learn-num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad-soft);
  border: 1px solid #ddd9f8;
  color: var(--grad-a);
  font-weight: 800;
  margin-bottom: 10px;
}

/* Key-point asides in the .result-note treatment: a purple-tinted
   highlight rather than yet another boxed card. */
.learn-callout {
  margin: 22px 0 0;
  max-width: 76ch;
  padding: 14px 18px;
  background: var(--grad-soft);
  border: 1px solid #ddd9f8;
  border-left: 4px solid var(--grad-a);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.learn-callout strong { color: var(--ink); }

/* The quiet ring motif on the SCG presence trio */
.learn-card-ring {
  position: relative;
  overflow: hidden;
}

.learn-card-ring::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 16px solid rgba(79, 70, 229, 0.08);
}

/* The ISD/LXD comparison table. The bare `table`/`th, td` rules
   above are sized for the taxonomy grid (fixed 164px cells, huge
   min-width), so every one of those properties is re-declared here. */
.learn-table {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.learn-table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  min-width: 620px;
  table-layout: auto;
  font-size: 0.92rem;
}

.learn-table th,
.learn-table td {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 12px 16px;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.learn-table thead th {
  background: var(--green-800);
  color: var(--green-100);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.learn-table td { color: var(--ink-soft); }
.learn-table td:first-child { color: var(--ink); font-weight: 700; }
.learn-table tbody tr:nth-child(even) td { background: var(--cell); }
.learn-table tbody tr:last-child td { border-bottom: 0; }

/* The Presence-Immersion map */
.learn-map {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: 1fr auto;
  gap: 10px;
  margin-top: 20px;
}

.learn-map-y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-800);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}

.learn-map-x {
  grid-column: 2;
  text-align: center;
  color: var(--green-800);
  font-weight: 700;
  font-size: 0.85rem;
}

.learn-quadrants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.learn-quadrant { padding: 18px 20px; }

.learn-quadrant:nth-child(1),
.learn-quadrant:nth-child(2) { border-bottom: 1px solid var(--line); }
.learn-quadrant:nth-child(odd) { border-right: 1px solid var(--line); }

.learn-quadrant small {
  display: block;
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
}

.learn-quadrant h3 { margin: 0 0 6px; font-size: 1rem; }
.learn-quadrant p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* Never color alone: the quadrant labels carry the meaning, the
   tints only echo it (purple = selection-grade, green = brand). */
.learn-quadrant.is-best { background: var(--grad-soft); }
.learn-quadrant.is-good { background: var(--green-100); }
.learn-quadrant.is-flat { background: var(--cell); }

/* Theory accordions */
.learn-details {
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.learn-details summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--green-800);
  transition: background 0.15s ease;
}

.learn-details summary:hover { background: var(--green-100); }
.learn-details summary:focus-visible { outline: 2px solid var(--grad-a); outline-offset: -2px; }
.learn-details summary::marker { color: var(--green-700); }

/* An open theory reads as header + body, not one undivided box. */
.learn-details[open] summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.learn-details > div {
  padding: 0 18px 16px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.learn-details strong { color: var(--ink); }
.learn-details p { margin: 10px 0 0; }
.learn-details p:first-child { margin-top: 0; }
.learn-details ol { margin: 10px 0 0; padding-left: 22px; }
.learn-details ol li { margin-bottom: 4px; }

/* The ten-step workflow as a connected timeline - numbered circles
   on a hairline spine instead of ten more boxes. */
.learn-steps {
  counter-reset: learn-step;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  max-width: 76ch;
}

.learn-steps li {
  counter-increment: learn-step;
  position: relative;
  padding: 3px 0 26px 52px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.learn-steps li:last-child { padding-bottom: 0; }

.learn-steps li strong { color: var(--ink); }

.learn-steps li::before {
  content: counter(learn-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  box-shadow: var(--shadow);
}

.learn-steps li::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 38px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}

.learn-steps li:last-child::after { display: none; }

/* The closing invitation: the site header's deep green, the final
   question at reading width, and the one primary action. */
.learn-closing {
  padding: 6px 0 30px;
}

.learn-closing-panel {
  background: linear-gradient(120deg, var(--green-950), var(--green-800));
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 46px 32px;
  text-align: center;
}

.learn-closing-panel p {
  margin: 0 auto 24px;
  max-width: 56ch;
  color: var(--green-100);
  font-size: 1.1rem;
  line-height: 1.6;
}

.learn-closing-panel strong { color: #fff; }

@media (max-width: 480px) {
  .learn-closing-panel { padding: 34px 20px; }
}

/* ------------------------------------------------------------
   Discover - the guided question flow (discover.html only).
   One question per screen inside a calm card; selection reuses
   the workspace's purple selection language.
   ------------------------------------------------------------ */
.discover-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 40px;
  /* Short screens (the intro, a short question) must not leave the
     footer floating mid-viewport - the same treatment as the
     landing page. */
  min-height: calc(100vh - 230px);
}

.dq-screen { padding-top: 28px; animation: rise 0.25s ease both; }

.dq-intro-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 40px;
  margin-top: 24px;
  text-align: center;
}

.dq-intro-card h2 {
  margin: 6px 0 12px;
  font-size: 2.3rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.dq-intro-sub {
  margin: 0 auto 18px;
  max-width: 56ch;
  color: var(--ink-soft);
}

.dq-intro-points {
  list-style: none;
  margin: 0 auto 26px;
  padding: 0;
  max-width: 46ch;
  text-align: left;
  display: grid;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.dq-intro-points li {
  padding-left: 22px;
  position: relative;
}

.dq-intro-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient);
}

.dq-intro-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.dq-intro-note {
  margin: 18px 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* In-card links to the Learn page take the action purple */
.dq-intro-note a,
.dq-learn-note a {
  color: var(--grad-a);
  font-weight: 600;
}

.dq-intro-note a:hover,
.dq-learn-note a:hover { color: var(--grad-b); }

.dq-learn-note { margin-top: 12px; }

/* Progress */
.dq-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.dq-progress-text {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green-800);
}

.dq-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--cell);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 18px;
}

.dq-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gradient);
  transition: width 0.25s ease;
}

/* The question card */
.dq-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 32px;
}

.dq-card h2 {
  margin: 0 0 8px;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.dq-card h2:focus { outline: none; }

.dq-help {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

/* Answer choices - radio/checkbox behavior with the workspace's
   selection treatment; the check mark keeps it non-color-only. */
.dq-options {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
}

.dq-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  background: var(--cell);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.12s ease;
}

.dq-option:hover {
  background: var(--surface);
  border-color: var(--line);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.dq-option:focus-visible { outline: 2px solid var(--grad-a); outline-offset: 2px; }

.dq-option-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid var(--line);
  background: var(--surface);
  display: inline-grid;
  place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dq-option[aria-pressed="true"] {
  background: var(--grad-soft);
  border-color: var(--grad-a);
  box-shadow: 0 0 0 1px var(--grad-a);
  font-weight: 600;
}

.dq-option[aria-pressed="true"] .dq-option-mark {
  background: var(--grad-a);
  border-color: var(--grad-a);
}

.dq-option[aria-pressed="true"] .dq-option-mark::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dq-text-wrap { margin-top: 14px; }

/* Controls */
.dq-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.dq-controls-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Review */
.dq-review-list {
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.dq-review-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cell);
  padding: 12px 16px;
}

.dq-review-item dt {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 2px;
}

.dq-review-item dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.dq-review-empty { font-style: italic; opacity: 0.7; }

/* Result */
.dq-profile {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.dq-profile-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--cell);
  border-radius: var(--radius-sm);
}

.dq-profile-dim {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-800);
}

.dq-profile-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dq-profile-why {
  grid-column: 2;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.dq-considerations {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.dq-result-actions { align-items: center; }
.dq-result-actions .dq-controls-right { margin-left: 0; margin-right: auto; }

@media (max-width: 600px) {
  .dq-card { padding: 22px 18px; }
  .dq-intro-card { padding: 32px 22px; }
  .dq-intro-card h2 { font-size: 1.8rem; }
  .dq-profile-row { grid-template-columns: 1fr; }
  .dq-profile-why { grid-column: 1; }
  .dq-controls .btn { flex: 1 1 auto; }
  .dq-controls-right { width: 100%; }
  .dq-controls-right .btn-primary { flex: 2 1 auto; }
}

/* Design tools: checklist + quick plot */
.learn-tools-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.learn-checklist {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.learn-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.learn-check:hover { border-color: var(--green-700); }

.learn-check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--grad-a);
}

/* A ticked item takes the workspace's selection treatment - the
   checkmark itself stays the non-color signal. */
.learn-check:has(input:checked) {
  background: var(--grad-soft);
  border-color: var(--grad-a);
  color: var(--ink);
}

.learn-tools-grid h3 { margin-top: 0; }

.learn-tool {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}

.learn-tool h3 { margin: 0 0 6px; font-size: 1.05rem; }
.learn-tool > p { margin: 0 0 14px; font-size: 0.93rem; color: var(--ink-soft); }
.learn-tool label { font-weight: 700; font-size: 0.9rem; }

.learn-range-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 4px 0 14px;
}

.learn-tool input[type="range"] { width: 100%; accent-color: var(--grad-a); }

.learn-score {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--grad-soft);
  border: 1px solid #ddd9f8;
  color: var(--grad-a);
  font-weight: 800;
}

.learn-plot-result {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--grad-a);
  background: var(--grad-soft);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.learn-plot-result strong { color: var(--ink); }

@media (min-width: 721px) {
  .learn-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .learn-section h2 { font-size: 1.55rem; }
}

@media (max-width: 600px) {
  .learn-map { grid-template-columns: 30px 1fr; }
  .learn-quadrants { grid-template-columns: 1fr; }
  .learn-quadrant { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .learn-quadrant:last-child { border-bottom: 0; }
}