/* =====================================================
   Jigsy Daily Archive — shared styles
   Design tokens match newhomepage.htm — flat, no rounded
   corners except literal circles (spinner).
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:      #f8f7f3;
  --ink:        #17171a;
  --rule:       #e3e1d9;
  --muted:      #6e6a5e;
  --panel:      #f0efe9;
  --classic:    #de9236;
  --pro:        #6aaac6;
  --extreme:    #de3681;
  --classic-a:  #a8681f;
  --pro-a:      #3d7f9c;
  --extreme-a:  #b02762;
  --easy:       #3c9944;
  --medium:     #e08b00;
  --hard:       #d03030;
  --font:       "Momo Trust Display", Arial, sans-serif;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────── */
.archive-header {
  background: var(--ink);
  color: var(--paper);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.archive-header .logo-link {
  display: flex; align-items: center; text-decoration: none;
}
.archive-header .logo-link img {
  height: 28px;
}
.archive-header h1 {
  font-size: 18px;
  font-weight: normal;
  color: rgba(248,247,243,0.85);
  letter-spacing: 0.03em;
}
.archive-header .tier-pill {
  font-size: 11px;
  color: rgba(248,247,243,0.85);
  background: rgba(248,247,243,0.12);
  border: 1px solid rgba(248,247,243,0.2);
  padding: 2px 9px;
  white-space: nowrap;
}
.archive-header .tier-pill.premium {
  background: var(--classic);
  border-color: var(--classic);
  color: var(--ink);
}
.archive-header .spacer { flex: 1; }
.archive-header .header-link {
  color: rgba(248,247,243,0.55);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
}
.archive-header .header-link:hover { color: var(--paper); }

/* ── Toolbar ─────────────────────────────────────── */
/* Same max-width as .content so the tabs/table-wrap edges line up, and the
   keyline sits ABOVE the tabs (separating this whole block from the promo
   cards above) rather than below (which would visually cut the tabs off
   from the table they control). */
.toolbar {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Difficulty tabs */
.diff-tabs {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--rule);
  overflow: hidden;
}
.diff-tab {
  padding: 7px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  border-right: 1px solid var(--rule);
}
.diff-tab:last-child { border-right: none; }
.diff-tab:hover { background: var(--panel); }
.diff-tab.active[data-diff="classic"] { background: var(--classic); color: #fff; }
.diff-tab.active[data-diff="pro"]     { background: var(--pro);     color: #fff; }
.diff-tab.active[data-diff="extreme"] { background: var(--extreme);  color: #fff; }

/* Period nav */
.period-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.period-btn {
  padding: 7px 14px;
  background: none;
  border: 1.5px solid var(--rule);
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  transition: all 0.15s;
}
.period-btn:hover { border-color: var(--classic); color: var(--classic-a); }
.period-btn.active { background: var(--classic); border-color: var(--classic); color: #fff; }
.period-label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* Status + refresh */
.data-status {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.refresh-btn {
  background: none;
  border: 1px solid var(--rule);
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  color: var(--muted);
  transition: all 0.15s;
}
.refresh-btn:hover { border-color: var(--classic); color: var(--classic-a); }

/* ── Content area ────────────────────────────────── */
.content {
  padding: 20px 24px 40px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── State messages ──────────────────────────────── */
.state-msg {
  text-align: center;
  padding: 60px 24px;
  color: var(--muted);
  font-size: 15px;
}
.state-msg .spinner {
  display: inline-block;
  width: 32px; height: 32px;
  border: 3px solid var(--rule);
  border-top-color: var(--classic);
  border-radius: 50%; /* literal circle — kept round by design */
  animation: spin 0.7s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-msg .error-detail {
  font-size: 12px;
  color: var(--hard);
  margin-top: 8px;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
  word-break: break-all;
}

/* ── Table ───────────────────────────────────────── */
.archive-table-wrap {
  background: #fff;
  border: 1px solid var(--rule);
  overflow: hidden;
}

.archive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.archive-table thead tr {
  background: var(--panel);
  border-bottom: 2px solid var(--rule);
}

.archive-table th {
  padding: 11px 14px;
  text-align: left;
  font-weight: normal;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.archive-table th:hover { color: var(--ink); }
.archive-table th .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.4;
  font-size: 10px;
}
.archive-table th.sorted { color: var(--classic-a); }
.archive-table th.sorted .sort-arrow { opacity: 1; }

.archive-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.archive-table tbody tr:last-child td { border-bottom: none; }

.archive-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.archive-table tbody tr:hover { background: var(--panel); }
.archive-table tbody tr.no-puzzle { cursor: default; opacity: 0.45; }
.archive-table tbody tr.no-puzzle:hover { background: none; }
.archive-table tbody tr.today { background: rgba(222,146,54,0.09); }

/* Date cell */
.date-cell {
  font-weight: normal;
  font-size: 14px;
}
.date-cell .date-day {
  font-size: 11px;
  color: var(--muted);
  display: block;
}
.today-badge {
  display: inline-block;
  background: var(--classic);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Stars */
.stars-cell {
  color: #e8a800;
  letter-spacing: 1px;
  white-space: nowrap;
  font-size: 13px;
}
.stars-cell .star-num {
  color: var(--muted);
  font-size: 12px;
  margin-left: 3px;
}

/* Difficulty badge */
.diff-badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: normal;
}
.diff-badge.easy    { background: #e8f5e9; color: var(--easy); }
.diff-badge.medium  { background: #fff3e0; color: var(--medium); }
.diff-badge.hard    { background: #fce4e4; color: var(--hard); }
.diff-badge.none    { background: var(--panel); color: var(--muted); }

/* Muted/empty value */
.muted { color: var(--muted); }

/* ── Summary row ─────────────────────────────────── */
.table-footer {
  /* Plain inline flow on purpose — its content is one run of text with
     inline <strong> tags. display:flex here was fragmenting that into
     separate anonymous flex items (each <strong> + each text run), and
     `gap` then inserted 16px around every one of them, including around
     each number. */
  padding: 10px 14px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  background: var(--panel);
}
.table-footer strong { color: var(--ink); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 720px) {
  .toolbar { padding: 10px 14px; }
  .content { padding: 14px 14px 40px; }
  .archive-table th, .archive-table td { padding: 9px 10px; }
  .archive-table th.hide-sm,
  .archive-table td.hide-sm { display: none; }
  .data-status { margin-left: 0; }
  #rangeLabel { margin-left: 0 !important; width: 100%; }
  /* Header was cramming logo + title + status pill + promo link + the
     account buttons into one fixed-height row, so the right-hand items
     ran off-screen on phones. Let it wrap instead of clipping, and drop
     the status pill (duplicated by the promo card below it on this page)
     once space is tight. */
  .archive-header {
    height: auto;
    min-height: 56px;
    padding: 10px 14px;
    gap: 8px 10px;
    flex-wrap: wrap;
  }
  .archive-header h1 { font-size: 16px; }
  .archive-header .tier-pill { display: none; }
  #archAcctArea { gap: 8px; }

  /* Auth / Premium modals: reclaim every spare pixel on small screens so the
     embedded Stripe checkout (which has its own minimum comfortable width
     and a long payment-method list) has room to actually be usable. */
  #archModalOverlay { padding: 10px; }
  .arch-modal { padding: 20px 16px; max-height: calc(100vh - 20px); }
  .arch-modal-close { top: 8px; right: 10px; }
}

/* =====================================================
   Account gating, header CTAs, promo cards, modals
   (added alongside archive-account.js)
   ===================================================== */

/* ── Header account area ─────────────────────────── */
#archAcctArea {
  display: flex;
  align-items: center;
  gap: 10px;
}
.acct-cta-btn {
  background: var(--classic);
  color: #fff;
  border: none;
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.acct-cta-btn:hover { background: var(--classic-a); }
.acct-badge-premium {
  display: inline-block;
  background: var(--classic);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  vertical-align: middle;
  margin-left: 2px;
}
#archAcctBtn { cursor: pointer; }
.archive-header button.header-link {
  background: none;
  border: none;
  font-family: var(--font);
  padding: 0;
}

/* ── Promo cards (Free vs Premium) ───────────────── */
.promo-cards {
  max-width: 1100px;
  margin: 16px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.promo-card {
  flex: 1 1 260px;
  background: #fff;
  border: 1.5px solid var(--rule);
  padding: 20px 22px;
}
.promo-card.premium {
  border-color: var(--classic);
  background: var(--panel);
}
.promo-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.promo-card.premium .promo-eyebrow { color: var(--classic-a); }
.promo-headline {
  font-size: 26px;
  font-weight: normal;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 14px;
}
.promo-benefits {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  font-size: 13px;
  color: var(--ink);
}
.promo-benefits li { padding: 4px 0 4px 22px; position: relative; }
.promo-benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--classic-a); font-weight: bold; }
.promo-card .promo-btn {
  border: none;
  padding: 10px 18px;
  font-family: var(--font);
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}
.promo-card .promo-btn.primary { background: var(--classic); color: #fff; }
.promo-card .promo-btn.primary:hover { background: var(--classic-a); }
.promo-card .promo-btn.ghost { background: none; color: var(--ink); border: 1.5px solid var(--ink); }
.promo-card .promo-btn.ghost:hover { background: var(--ink); color: var(--paper); }
.promo-active-badge {
  display: block;
  border: 1.5px solid var(--easy);
  color: var(--easy);
  font-size: 13px;
  padding: 8px 14px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

#archCheckoutBanner {
  display: none;
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 12px 20px;
  background: var(--panel);
  border: 1.5px solid var(--easy);
  color: var(--ink);
  font-size: 13.5px;
  text-align: center;
}

/* ── Locked rows ──────────────────────────────────── */
.archive-table tbody tr.row-locked { color: var(--muted); }
.row-lock {
  display: inline-block;
  width: 13px; height: 11px;
  background: #8b8778;
  position: relative;
  margin-left: 8px;
  vertical-align: middle;
  top: -1px;
}
.row-lock::before {
  content: '';
  position: absolute;
  left: 2px; top: -6px;
  width: 9px; height: 7px;
  border: 2px solid #8b8778;
  border-bottom: none;
  border-radius: 5px 5px 0 0; /* literal arc for the shackle — not a UI corner */
}

/* ── Modals ───────────────────────────────────────── */
#archModalOverlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(23,23,26,0.6);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.arch-modal {
  background: #fff;
  border: 1.5px solid var(--rule);
  padding: 28px 26px;
  max-width: 460px;
  width: 100%;
  position: relative;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.arch-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 20px; color: var(--muted); cursor: pointer;
  line-height: 1;
}
.arch-modal-close:hover { color: var(--ink); }
.arch-modal h2 { font-size: 20px; font-weight: normal; margin-bottom: 6px; }
.arch-modal .arch-modal-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; line-height: 1.45; }
.arch-modal label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; margin-top: 12px; }
.arch-modal input[type="email"],
.arch-modal input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--rule);
  font-family: var(--font);
  font-size: 14px;
  background: #fff;
}
.arch-modal input:focus { outline: none; border-color: var(--classic); }
.arch-modal-submit {
  width: 100%;
  margin-top: 18px;
  background: var(--classic);
  color: #fff;
  border: none;
  padding: 11px;
  font-family: var(--font);
  font-size: 14.5px;
  cursor: pointer;
}
.arch-modal-submit:hover { background: var(--classic-a); }
.arch-modal-submit:disabled { opacity: 0.6; cursor: default; }
.arch-modal-switch { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }
.arch-modal-switch a { color: var(--classic-a); text-decoration: none; }
.arch-modal-error { color: var(--hard); font-size: 12.5px; margin-top: 10px; min-height: 1em; }
.arch-modal-features { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; color: var(--ink); }
.arch-modal-features li { padding: 5px 0 5px 22px; position: relative; }
.arch-modal-features li::before { content: '✓'; position: absolute; left: 0; color: var(--classic-a); font-weight: bold; }
.arch-modal-price { font-size: 26px; margin: 14px 0 2px; }
.arch-modal-price span { font-size: 13px; color: var(--muted); font-weight: normal; }
#archEmbeddedCheckout { width: 100%; min-height: 320px; }