/* Home-page newspaper theme. Loaded after styles.css on index.html only, so
   the archive and sensei pages keep the original look. Overrides the palette
   via the shared custom properties (the board, wheel, and dialogs pick the
   paper tones up automatically) and lays the front page out like a broadsheet:
   masthead, lead story with the keypad beside the grid, sidebar, and the
   editor's welcome to new readers. */

:root {
  --paper: #faf5ec;
  --bg: #faf5ec;
  --card: #fffdf8;
  --ink: #14140f;
  --muted: #6b6659;
  --line: #d8d2c2;
  --rule: #2a2a24;
  --grid-line: #cfc8b6;
  --grid-bold: #14140f;
  --accent: #1a5fc8;
  --accent-red: #b3261e;
  --shadow: 0 1px 2px rgba(40, 35, 20, 0.08);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --display: "Playfair Display", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1280px;
  padding: 0 28px 48px;
}

/* ---------- Masthead ---------- */

.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  text-align: initial;
  margin-bottom: 0;
  padding: 26px 0 0;
  border-bottom: none;
}

.masthead-nav {
  display: flex;
  gap: 26px;
}

.masthead-nav a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.masthead-nav a:hover,
.masthead-nav a[aria-current="page"] {
  color: var(--accent-red);
}

.masthead-center {
  text-align: center;
}

h1.masthead-title {
  margin: 0;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.masthead-date {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  min-height: 15px;
}

/* account controls ride the masthead's right column */
.account-bar {
  justify-content: flex-end;
  gap: 18px;
  margin: 0;
}

/* Settings / Sign In / Account read as menu items, like the section nav */
.masthead-btn {
  appearance: none;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none; /* the Stats item is a link */
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.masthead-btn:hover {
  color: var(--accent-red);
}

/* signed-in: the Account link opens a small drop-down */
#userButton {
  position: relative;
}

/* Fixed, not absolute: on phones the fold animation puts overflow:hidden on
   .header, which would clip an absolutely-positioned drop-down hanging below
   it (it opened invisibly). Fixed positioning escapes that clip — no ancestor
   has a transform — and account.js sets top/right from the button on open. */
.account-menu {
  position: fixed;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(40, 35, 20, 0.14);
}

.account-menu[hidden] {
  display: none;
}

.account-menu button {
  appearance: none;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.account-menu button:hover {
  background: #eef3fb;
}

/* Plan status line at the top of the account menu (#60) */
.account-plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.account-plan-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.account-plan-detail {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
}

/* One-line welcome after returning from a successful checkout (#60) */
.billing-banner {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 10px auto 0;
  padding: 8px 14px;
  max-width: 720px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.billing-banner button {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}

.double-rule {
  margin-top: 16px;
  border-top: 2.5px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  height: 5px;
}

/* ---------- House promo unit (#61) ---------- */

/* CTA under the promo copy, in the panel's small-caps voice */
.promo-cta {
  appearance: none;
  display: inline-block;
  margin-top: 14px;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.promo-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* quiet line on the pause overlay, signed-out only */
.pause-note {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  max-width: 240px;
}

/* ---------- Post-solve win card (#62) ---------- */

.win-card {
  margin-top: 26px;
  padding: 20px 24px 22px;
  background: var(--card);
  border-top: 2.5px solid var(--rule);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.win-card .kicker {
  margin-bottom: 6px;
}

.win-card-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
  margin: 0 0 8px;
}

.win-card-line {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--muted);
}

.win-card-pitch {
  margin: 14px 0 4px;
  font-size: 15px;
  font-style: italic;
}

.win-card .btn {
  margin-top: 10px;
}

/* ---------- Page grid ---------- */

/* The story head sits above the columns, so the sidebar's first panel tops
   out level with the board itself. */
.lead-head {
  padding-top: 38px;
}

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 44px;
  align-items: start;
}

/* ---------- Lead story ---------- */

.kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin: 0 0 10px;
}

.headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.05;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.story-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 22px;
  min-height: 16px;
}

.story-meta .badge {
  font-size: inherit;
  font-weight: inherit;
}

.story-meta .cached-note {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* difficulty picker: a row of text links at the foot of Today's Edition */
.difficulty {
  display: flex;
  grid-template-columns: none;
  justify-content: flex-end;
  gap: 22px;
  margin: 0;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}

.diff-btn {
  appearance: none;
  flex: none;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}

.diff-btn:hover {
  background: none;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.diff-btn.active {
  background: none;
  border-color: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Result: board + keypad side by side ---------- */

.result {
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.play-area {
  display: flex;
  align-items: flex-start;
  gap: 34px;
}

.play-area .board-wrap {
  width: min(464px, 100%);
  flex-shrink: 0;
}

.board {
  border-width: 2.5px;
  border-radius: 0;
}

.pause-overlay {
  border-radius: 0;
}

.cell {
  font-family: var(--serif);
}

/* keypad column to the right of the grid */
.pad-col {
  flex: 1;
  min-width: 200px;
  max-width: 290px;
  display: flex;
  flex-direction: column;
}

.pad-col-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.pad-col .pad-head {
  margin-top: 0;
  margin-bottom: 12px;
}

.timer-pill {
  font-family: var(--sans);
  background: var(--card);
}

.notes-toggle {
  font-family: var(--sans);
}

.pad {
  margin-top: 0;
  grid-template-columns: repeat(3, 1fr);
}

.pad-btn {
  font-family: var(--serif);
  font-size: 22px;
  padding: 16px 0;
}

.pad-btn.erase {
  grid-column: span 3;
  padding: 11px 0;
  font-size: 18px;
}

.pad-col .status {
  margin-top: 14px;
  font-family: var(--sans);
}

/* ---------- Action row ---------- */

.actions {
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.btn {
  flex: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 4px;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn.primary:hover {
  background: #144ea6;
  filter: none;
}

.btn.ghost {
  border-color: var(--accent);
  color: var(--accent);
}

.btn.ghost:hover {
  background: #eef3fb;
  border-color: var(--accent);
}

.how-link {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
}

.how-link:hover {
  text-decoration: underline;
}

/* ---------- Sidebar ---------- */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  padding: 20px 22px;
}

.panel-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

/* variant picker dressed as the Today's Edition list */
.variant {
  display: block;
  justify-content: initial;
  gap: 0;
  margin-bottom: 0;
  box-shadow: none;
  border-radius: 6px;
}

.variant .var-btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  /* rows bleed a little into the panel padding so the active wash has air
     around its content without shifting the text alignment */
  width: calc(100% + 20px);
  max-width: none;
  margin: 0 -10px;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  padding: 13px 10px;
  cursor: pointer;
}

.variant .var-btn:last-of-type {
  border-bottom: none;
}

.variant .var-btn:hover {
  background: rgba(26, 95, 200, 0.05);
  color: var(--ink);
}

.variant .var-btn.active {
  background: #eef3fb;
  border-radius: 4px;
  color: var(--ink);
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot.blue { background: var(--accent); }
.dot.red { background: #9a1f1a; }
.dot.orange { background: #e07b1f; }
.dot.green { background: #2c6e49; }

.edition-name {
  font-weight: 600;
}

.edition-desc,
.edition-givens {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.edition-desc::before,
.edition-givens:not(:empty)::before {
  content: "· ";
}

/* tick marking the selected edition */
.edition-tag {
  display: none;
  margin-left: auto;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.variant .var-btn.active .edition-tag {
  display: inline;
}

.ad {
  background: #f6ecdd;
  border-color: #e3d5bd;
  text-align: center;
  padding: 26px 24px 30px;
}

.ad-label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.ad-name {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 14px 0 4px;
}

.ad-star {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  color: var(--ink);
  margin: 10px 0 14px;
  font-size: 13px;
}

.ad-star::before,
.ad-star::after {
  content: "";
  width: 64px;
  border-top: 1px solid var(--ink);
}

.ad-copy {
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
}

/* ---------- A word to new readers ---------- */

.welcome {
  margin-top: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  padding: 26px 30px 28px;
}

.welcome-title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 10px;
}

/* the paper's one-line promise, set as a standfirst under the headline */
.welcome-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

/* newspaper columns: the text flows down one and into the next */
.welcome-body {
  columns: 2;
  column-gap: 40px;
  column-rule: 1px solid var(--line);
  padding-top: 20px;
}

.welcome-body p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
  break-inside: avoid;
}

.welcome-close {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
}

.welcome-close p {
  margin: 0 0 10px;
}

.welcome-close p:last-child {
  margin-bottom: 0;
}

.welcome-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.welcome-join[hidden] {
  display: none;
}

.welcome-feedback a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* ---------- Footer ---------- */

.footer {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.footer a {
  font-family: var(--serif);
}

.loading,
.error {
  font-family: var(--sans);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  /* Single column. The sidebar dissolves into the page flow so its panels
     can be ordered individually: Today's Edition (with the difficulty
     links) comes before the puzzle, the rest follow it. */
  .page {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .sidebar {
    display: contents;
  }

  .sidebar .panel.variant {
    order: -1;
    /* match the board's width cap so the box and the grid line up */
    width: min(464px, 100%);
  }

  .play-area {
    flex-wrap: wrap;
  }

  .pad-col {
    max-width: min(464px, 100%);
  }

  .pad {
    grid-template-columns: repeat(5, 1fr);
  }

  .pad-btn.erase {
    grid-column: span 1;
    padding: 16px 0;
  }
}

@media (max-width: 720px) {
  .wrap {
    padding: 0 18px 40px;
  }

  .header {
    grid-template-columns: 1fr;
  }

  .masthead-nav,
  .account-bar {
    justify-content: center;
  }

  h1.masthead-title {
    white-space: normal;
  }

  .welcome {
    padding: 22px 20px 24px;
  }

  .welcome-title {
    font-size: 25px;
  }

  .welcome-body {
    columns: 1;
  }
}

/* the phone fold (app.js adds .folded to .wrap while solving) also tucks the
   newspaper furniture away, leaving the board and keypad the screen */
@media (max-width: 600px), (orientation: landscape) and (max-height: 520px) {
  .wrap.folded .double-rule,
  .wrap.folded .lead-head,
  .wrap.folded .sidebar,
  .wrap.folded .welcome,
  .wrap.folded .footer {
    display: none;
  }
}

/* short landscape screens: styles.css turns .result into a grid for the old
   markup — undo that; the play-area row already puts the pad beside the board */
@media (orientation: landscape) and (max-height: 520px) {
  .result {
    display: block;
  }

  .board-wrap,
  .wrap.folded .board-wrap {
    width: auto;
  }

  .play-area .board-wrap {
    width: min(calc(100vh - 120px), 100%);
  }

  .pad {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }

  .pad-btn.erase {
    grid-column: span 3;
  }
}

/* founder listing controls in Settings (#71) */
.founder-settings {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

.founder-name-row input[type="text"] {
  font-family: var(--serif);
  font-size: 14px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  width: 200px;
  max-width: 100%;
}

/* Weekend Edition (#68) */
.dot.purple { background: #6d4b9e; }

/* the X constraint drawn on the board: a soft band down both diagonals */
.board .diag-cell {
  background: #f2ecdd;
}