/* Shared styles for the Feelings and Needs reference pages
   (public/needs.html + public/feelings.html). */
:root {
  --primary: #4088c4;
  --primary-light: #5fa9e3;
  --primary-50: #f0f7fd;
  --met: #2e8b6a;
  --met-50: #eef7f3;
  --unmet: #c9544a;
  --unmet-50: #fdf2f0;
  --gold: #c9a227;
  --ink: #1c1917;
  --gray-700: #44403c;
  --gray-600: #57534e;
  --gray-500: #78716c;
  --gray-400: #a8a29e;
  --gray-300: #d6d3d1;
  --gray-200: #e7e5e4;
  --gray-100: #f5f5f4;
  --gray-50: #fafaf9;
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Playfair Display', Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--gray-700);
  background: var(--gray-50);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── sticky nav ── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--gray-200);
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.05rem; letter-spacing: .2px; text-decoration: none; }
.brand-logo { width: 26px; height: auto; }
.brand span { color: var(--primary); }
.tabs { display: flex; gap: 8px; }
.tabs a {
  text-decoration: none; font-weight: 600; font-size: .9rem;
  color: var(--gray-600); padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--gray-200); transition: all .15s ease;
}
.tabs a:hover { color: var(--primary); border-color: var(--primary-light); background: var(--primary-50); }
.tabs a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tabs a.active:hover { color: #fff; }

/* ── hero ── */
.hero { max-width: 1080px; margin: 0 auto; padding: 56px 24px 24px; text-align: center; }
.hero .eyebrow { display: inline-block; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px; }
.hero h1 { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 0 10px; }
.hero p { color: var(--gray-500); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }

/* ── sections ── */
.section { max-width: 1080px; margin: 0 auto; padding: 24px 24px 40px; }
.lede { color: var(--gray-600); font-style: italic; max-width: 760px; margin: 4px auto 28px; font-size: 1.02rem; text-align: center; }

.group-label {
  display: inline-block; margin: 12px 0 16px; padding: 6px 16px;
  font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px;
}
.group-label.met { color: var(--met); background: var(--met-50); }
.group-label.unmet { color: var(--unmet); background: var(--unmet-50); }
.group + .group { margin-top: 16px; }

/* ── card masonry ── */
.grid { column-width: 270px; column-gap: 16px; }
.card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
  padding: 16px 18px 18px; margin: 0 0 16px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
  border-left: 4px solid var(--primary); transition: box-shadow .15s ease;
  break-inside: avoid; -webkit-column-break-inside: avoid;
}
.card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.07); }
.card h3 {
  margin: 0 0 8px; font-size: .82rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--primary);
}
.card p { margin: 0; color: var(--gray-700); font-size: .98rem; }
.needs .card { border-left-color: var(--primary); }
.needs .card h3 { color: var(--primary); }
.feelings-met .card { border-left-color: var(--met); }
.feelings-met .card h3 { color: var(--met); }
.feelings-unmet .card { border-left-color: var(--unmet); }
.feelings-unmet .card h3 { color: var(--unmet); }

/* ── cross-page CTA ── */
.crosslink { max-width: 1080px; margin: 0 auto; padding: 12px 24px 8px; text-align: center; }
.crosslink small { display: block; color: var(--gray-500); font-weight: 600; font-size: .78rem; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .1em; }
.crosslink a {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px;
  border-radius: 14px; background: var(--primary-50); border: 1px solid var(--primary-light);
  color: var(--primary); font-weight: 700; font-size: 1.1rem; text-decoration: none;
  font-family: var(--display); transition: all .15s ease;
}
.crosslink a:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(64,136,196,.25); }
.crosslink a .arrow { font-size: 1.2em; line-height: 1; }

/* ── view toggle (List / Grid) ── */
.viewbar { display: flex; justify-content: center; margin: 0 auto 4px; padding: 0 24px; }
.viewbar .seg { display: inline-flex; background: #fff; border: 1px solid var(--gray-200); border-radius: 999px; padding: 4px; gap: 4px; }
.viewbar button {
  border: none; background: transparent; font: inherit; font-weight: 600; font-size: .88rem;
  color: var(--gray-600); padding: 7px 18px; border-radius: 999px; cursor: pointer;
  transition: all .15s ease; display: inline-flex; align-items: center; gap: 7px;
}
.viewbar button:hover { color: var(--primary); }
.viewbar button.active { background: var(--primary); color: #fff; }

.view-grid { display: none; }
body[data-view="grid"] .view-list { display: none; }
body[data-view="grid"] .view-grid { display: block; }

/* ── word grid (definitions hidden until clicked) ── */
.view-grid .section { padding-top: 12px; }
/* Explicit columns: each column is its own vertical stack. Tiles are distributed
   into columns in order (see layoutColumns in JS), so reading order is preserved
   and an expanded tile only grows its own column — no row-gap dead space, and no
   reordering. */
.word-grid { display: flex; gap: 12px; align-items: flex-start; }
.wg-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.word-tile { background: #fff; border: 1px solid var(--gray-200); border-left: 4px solid var(--primary); border-radius: 12px; overflow: hidden; }
.word-tile { transition: box-shadow .15s ease; }
.word-tile:not([open]):hover { box-shadow: 0 7px 18px rgba(0,0,0,.08); }
.word-tile > summary {
  list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 700; color: var(--ink);
  font-size: .98rem; display: flex; align-items: center; gap: 10px;
  transition: background .12s ease;
}
.word-tile > summary::-webkit-details-marker { display: none; }
.wt-word { flex: 1; }
.wt-count { font-size: .72rem; font-weight: 700; color: var(--gray-400); }
.word-tile > summary::after {
  content: '+'; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-50); color: var(--primary); font-weight: 700; font-size: 1rem; line-height: 1;
}
.word-tile[open] > summary::after { content: '\2013'; }
.word-tile[open] > summary { background: var(--primary-50); }
.word-body { padding: 0 14px 14px; border-top: 1px solid var(--gray-100); }
.word-def { margin: 12px 0 10px; color: var(--gray-700); font-size: .92rem; line-height: 1.5; }
.word-syn { margin: 0; color: var(--gray-600); font-size: .88rem; line-height: 1.5; }
.word-syn b { color: var(--gray-500); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; display: block; margin-bottom: 3px; }
.word-grid.needs .word-tile { border-left-color: var(--primary); }
.word-grid.needs .syn[open] { border-left: 3px solid var(--primary); }
.word-grid.met .word-tile { border-left-color: var(--met); }
.word-grid.met .word-tile > summary::after { background: var(--met-50); color: var(--met); }
.word-grid.met .word-tile[open] > summary { background: var(--met-50); }
.word-grid.met .syn[open] { border-left: 3px solid var(--met); }
.word-grid.unmet .word-tile { border-left-color: var(--unmet); }
.word-grid.unmet .word-tile > summary::after { background: var(--unmet-50); color: var(--unmet); }
.word-grid.unmet .word-tile[open] > summary { background: var(--unmet-50); }
.word-grid.unmet .syn[open] { border-left: 3px solid var(--unmet); }

/* ── expandable related words (inside an open tile) ── */
.word-syn-head { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin: 12px 0 8px; }
.word-syn-list { display: flex; flex-direction: column; gap: 5px; }
.syn { border: 1px solid var(--gray-200); border-radius: 8px; background: var(--gray-50); overflow: hidden; }
.syn[open] { background: #fff; }
.syn > summary { list-style: none; cursor: pointer; padding: 7px 12px; font-size: .88rem; font-weight: 600; color: var(--gray-700); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.syn > summary::-webkit-details-marker { display: none; }
.syn > summary::after { content: '+'; color: var(--gray-400); font-weight: 700; font-size: 1rem; line-height: 1; flex: none; }
.syn[open] > summary { color: var(--ink); }
.syn[open] > summary::after { content: '\2013'; }
.syn > summary:hover { color: var(--ink); }
.syn-def { padding: 0 12px 9px; font-size: .84rem; color: var(--gray-600); line-height: 1.5; }

/* ── hover-to-define terms (List view) + tooltip ── */
.term { border-bottom: 1px dotted var(--gray-400); cursor: help; transition: color .12s ease, border-color .12s ease; }
.term:hover { color: var(--primary); border-bottom-color: var(--primary); }
/* heading terms: underline only on hover so the headings stay clean */
.term-head { border-bottom-color: transparent; }
.feelings-met .term:hover { color: var(--met); border-bottom-color: var(--met); }
.feelings-unmet .term:hover { color: var(--unmet); border-bottom-color: var(--unmet); }
.nf-tooltip {
  position: absolute; z-index: 100; max-width: 260px; pointer-events: none;
  background: var(--ink); color: #fff; padding: 9px 13px; border-radius: 9px;
  font-size: .82rem; line-height: 1.45; font-style: normal; font-family: var(--font); font-weight: 500;
  box-shadow: 0 10px 28px rgba(0,0,0,.2); opacity: 0; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.nf-tooltip.show { opacity: 1; transform: translateY(0); }
.nf-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); }
.nf-tooltip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }

/* ── definitions footnote ── */
.defs-footnote { max-width: 760px; margin: 30px auto 0; font-size: .8rem; color: var(--gray-500); line-height: 1.55; text-align: center; font-style: italic; }
.defs-footnote a { color: var(--primary); text-decoration: none; font-style: normal; }
.defs-footnote a:hover { text-decoration: underline; }

/* ── footer ── */
footer { background: #fff; border-top: 1px solid var(--gray-200); margin-top: 28px; }
.footer-inner { max-width: 1080px; margin: 0 auto; padding: 44px 24px 56px; text-align: center; }
.footer-logo { width: 46px; height: auto; opacity: .92; margin-bottom: 14px; }
.footer-note { color: var(--gray-500); font-size: .92rem; margin: 0 auto 6px; max-width: 540px; line-height: 1.6; }
.footer-note a { color: var(--primary); text-decoration: none; }
.footer-note a:hover { text-decoration: underline; }
.footer-brand { margin: 2px 0 22px; font-family: var(--display); font-size: 1.1rem; }
.footer-brand a { color: var(--ink); text-decoration: none; }
.footer-brand a:hover { color: var(--primary); }
.totop { display: inline-block; padding: 8px 18px; border: 1px solid var(--gray-300); border-radius: 999px; color: var(--gray-600); font-weight: 600; font-size: .85rem; text-decoration: none; transition: all .15s ease; }
.totop:hover { border-color: var(--primary-light); color: var(--primary); background: var(--primary-50); }

/* ── Save/Print as PDF button + print styles ── */
.pdf-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 9px 20px; border-radius: 999px; border: 1px solid var(--primary-light);
  background: var(--primary-50); color: var(--primary); font: inherit; font-weight: 600; font-size: .9rem;
  cursor: pointer; transition: all .15s ease; text-decoration: none;
}
.pdf-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }


@media print {
  .topbar, .viewbar, .crosslink, .pdf-btn, .hero .eyebrow, .hero p { display: none !important; }
  .view-grid { display: none !important; }
  .view-list { display: block !important; }
  body { background: #fff; }
  .hero { padding: 0 24px 6px; }
  .hero h1 { margin: 0; }
  .section { padding: 6px 24px 12px; }
  .lede { margin-top: 0; }
  .card { box-shadow: none; break-inside: avoid; }
  footer { margin-top: 14px; border-top: 1px solid var(--gray-300); }
  .footer-logo { display: none; }
}