/* =========================================================
   Spelling Bee Pangram — "Bright Hive" theme (white bg)
   ========================================================= */

:root{
  /* surfaces */
  --bg:            #ffffff;
  --bg-elevated:   #f6f6f8;
  --bg-card:       #ffffff;
  --border:        #e7e7ec;
  --border-strong: #d6d6de;

  /* text */
  --ink:        #1a1a1f;
  --ink-muted:  #5c5c68;
  --ink-faint:  #8d8d99;

  /* brand */
  --gold:        #e8a723;
  --gold-bright: #f7ce29;
  --gold-deep:   #a8710e;
  --teal:        #1f8f63;
  --coral:       #d1573a;
  --red:         #c94a37;

  /* hex tiles (match the reference art) */
  --hex-fill:        #e9e9ec;
  --hex-fill-center: #f7d724;
  --hex-ink:         #1a1a1f;

  /* type */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* radii / shadow */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --shadow-card: 0 10px 30px -18px rgba(20,20,25,0.14);

  /* motion */
  --dur-fast: 160ms;
  --dur-normal: 260ms;
  --ease: cubic-bezier(.22,.9,.32,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); }
p{ margin: 0 0 1em; color: var(--ink-muted); }
a{ color: var(--gold-deep); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; }

:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{ max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ambient backdrop — very subtle, stays white */
.hive-bg{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 40% at 12% 0%, rgba(232,167,35,0.07), transparent 60%),
    radial-gradient(45% 35% at 100% 6%, rgba(31,143,99,0.06), transparent 60%),
    var(--bg);
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-row{ display:flex; align-items:center; justify-content:space-between; height: 68px; gap: 16px; }
.brand{ display:flex; align-items:center; gap:10px; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.brand:hover{ text-decoration:none; }
.brand-mark{ color: var(--gold-deep); display:inline-flex; }
.brand-mark.small{ color: var(--gold-deep); }
.brand-text em{ color: var(--gold-deep); font-style: normal; }

.main-nav{ display:flex; gap: 28px; }
.main-nav a{ color: var(--ink-muted); font-weight: 600; font-size: .95rem; padding: 6px 2px; border-bottom: 2px solid transparent; }
.main-nav a:hover{ color: var(--ink); text-decoration:none; }
.main-nav a.is-active{ color: var(--gold-deep); border-color: var(--gold); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer; }
.nav-toggle span{ width:22px; height:2px; background: var(--ink); display:block; }
.mobile-nav{ display:none; flex-direction:column; border-top:1px solid var(--border); background: var(--bg); }
.mobile-nav a{ padding:14px 20px; color: var(--ink-muted); font-weight:600; border-bottom:1px solid var(--border); }
.mobile-nav.is-open{ display:flex; }

@media (max-width: 760px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
}

/* =========================================================
   Hero / puzzle header
   ========================================================= */
.hero{ padding: 56px 0 24px; text-align:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--teal); background: rgba(31,143,99,0.08); border:1px solid rgba(31,143,99,0.25);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--teal); }
.hero h1{ font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 6px; }
.hero .hero-sub{ color: var(--ink-muted); font-size: 1.02rem; max-width: 560px; margin: 0 auto 36px; }

/* =========================================================
   Honeycomb letter cluster — exact flower layout:
   one hex on top, three across the middle, three across
   the bottom, tiled edge-to-edge like the reference art.
   ========================================================= */
.hive{
  --hexW: 96px;   /* point-to-point width */
  --hexH: 84px;   /* flat-to-flat height   */
  position: relative;
  width: calc(var(--hexW) * 2.55);
  height: calc(var(--hexH) * 3.05);
  margin: 0 auto 32px;
}
.hive-cell{
  position: absolute;
  top: 50%; left: 50%;
  width: var(--hexW);
  height: var(--hexH);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700;
  font-size: 1.55rem;
  color: var(--hex-ink);
  background: var(--hex-fill);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.hive-cell.is-center{
  background: var(--hex-fill-center);
  z-index: 2;
  font-size: 1.7rem;
}
.hive-cell:hover{ background: #dedee2; }
.hive-cell.is-center:hover{ background: var(--hex-fill-center); }

.hive-cell.pos-center     { transform: translate(-50%, -50%); }
.hive-cell.pos-top        { transform: translate(-50%, calc(-50% - var(--hexH))); }
.hive-cell.pos-bottom     { transform: translate(-50%, calc(-50% + var(--hexH))); }
.hive-cell.pos-upper-left { transform: translate(calc(-50% - (var(--hexW) * 0.75)), calc(-50% - (var(--hexH) / 2))); }
.hive-cell.pos-upper-right{ transform: translate(calc(-50% + (var(--hexW) * 0.75)), calc(-50% - (var(--hexH) / 2))); }
.hive-cell.pos-lower-left { transform: translate(calc(-50% - (var(--hexW) * 0.75)), calc(-50% + (var(--hexH) / 2))); }
.hive-cell.pos-lower-right{ transform: translate(calc(-50% + (var(--hexW) * 0.75)), calc(-50% + (var(--hexH) / 2))); }

@media (max-width: 480px){
  .hive{ --hexW: 66px; --hexH: 58px; }
  .hive-cell{ font-size: 1.15rem; }
  .hive-cell.is-center{ font-size: 1.3rem; }
}

/* stat pills */
.stat-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: 12px; margin-bottom: 8px; }
.stat-pill{
  background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 22px; min-width: 108px;
}
.stat-pill .num{ font-family: var(--font-display); font-weight:700; font-size: 1.5rem; color: var(--gold-deep); display:block; }
.stat-pill .lbl{ font-size: .78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }

/* =========================================================
   Section cards / accordion
   ========================================================= */
.section{ padding: 20px 0; }
.section-inner{ max-width: 760px; margin: 0 auto; }

.card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin-bottom: 20px;
}
.card h2{ font-size: 1.25rem; margin-bottom: 4px; }
.card .card-hint{ color: var(--ink-faint); font-size: .88rem; margin-bottom: 18px; }

/* pangram spotlight */
.pangram-card{
  text-align:center;
  border-color: var(--border-strong);
  background: radial-gradient(120% 140% at 50% -20%, rgba(232,167,35,0.10), transparent 60%), var(--bg-card);
}
.pangram-card .tag{
  display:inline-block; font-family: var(--font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--coral); background: rgba(209,87,58,0.08); border:1px solid rgba(209,87,58,0.28);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.pangram-reveal{
  font-family: var(--font-display); font-weight:700; font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: .04em; color: var(--ink); margin: 6px 0 18px;
  filter: blur(9px); user-select:none; transition: filter var(--dur-normal) var(--ease);
}
.pangram-reveal.is-revealed{ filter: blur(0); user-select:text; color: var(--gold-deep); }
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-weight:700; font-size:.92rem; border-radius: 999px; border: 1px solid var(--border-strong);
  padding: 11px 22px; background: var(--bg-card); color: var(--ink);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover{ border-color: var(--gold); background: rgba(232,167,35,0.08); text-decoration:none; }
.btn:active{ transform: scale(.97); }
.btn-gold{ background: var(--gold-bright); color:#241b0a; border-color: transparent; }
.btn-gold:hover{ filter: brightness(0.97); background: var(--gold-bright); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding: 8px 16px; font-size: .82rem; }
.btn-danger{ border-color: rgba(201,74,55,0.4); color: var(--red); }
.btn-danger:hover{ background: rgba(201,74,55,0.08); }

/* accordion */
.accordion-item{ border-top: 1px solid var(--border); }
.accordion-item:first-child{ border-top: none; }
.accordion-trigger{
  width: 100%; display:flex; align-items:center; justify-content:space-between; gap: 12px;
  background: none; border: none; color: var(--ink); text-align:left;
  padding: 18px 4px; cursor: pointer; font-family: var(--font-display); font-weight:600; font-size: 1.02rem;
}
.accordion-trigger:hover{ color: var(--gold-deep); }
.accordion-trigger .chev{ transition: transform var(--dur-fast) var(--ease); color: var(--ink-faint); flex-shrink:0; }
.accordion-trigger[aria-expanded="true"] .chev{ transform: rotate(180deg); color: var(--gold-deep); }
.accordion-panel{ overflow:hidden; max-height:0; transition: max-height var(--dur-normal) var(--ease); }
.accordion-panel.is-open{ max-height: 3000px; }
.accordion-panel-inner{ padding: 0 4px 22px; }

/* letter groups (first letter hint) */
.letter-groups{ display:flex; flex-wrap:wrap; gap:10px; }
.letter-chip{
  font-family: var(--font-mono); font-weight:700; font-size:.92rem;
  background: var(--bg-elevated); border:1px solid var(--border); color: var(--ink);
  padding: 9px 14px; border-radius: var(--radius-sm); min-width: 52px; text-align:center;
}
.letter-chip .n{ display:block; color: var(--ink-faint); font-size:.7rem; font-weight:500; }

/* grid table (letter x length) */
.grid-table{ width:100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .88rem; }
.grid-table th, .grid-table td{ text-align:center; padding: 9px 6px; border: 1px solid var(--border); }
.grid-table th{ color: var(--gold-deep); font-weight:700; background: rgba(232,167,35,0.05); }
.grid-table td.rowhead{ color: var(--gold-deep); font-weight:700; text-align:left; padding-left: 12px; }
.grid-table td.tot{ color: var(--ink); font-weight:700; }

/* word list */
.filter-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.filter-chip{
  font-size:.82rem; font-weight:600; color: var(--ink-muted);
  background: var(--bg-elevated); border:1px solid var(--border);
  padding: 7px 14px; border-radius:999px; cursor:pointer;
}
.filter-chip:hover{ color: var(--ink); border-color: var(--border-strong); }
.filter-chip.is-active{ color: #241b0a; background: var(--gold-bright); border-color: transparent; }

.word-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.word-cell{
  font-family: var(--font-mono); font-weight:700; letter-spacing:.02em;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--ink);
  padding: 9px 14px; border-radius: var(--radius-sm); font-size: .92rem;
  display:inline-flex; align-items:center; gap:6px; cursor: pointer;
}
.word-cell .pts{ color: var(--ink-faint); font-size:.72rem; font-weight:500; }
.word-cell.is-pangram{ border-color: var(--coral); color: var(--coral); background: rgba(209,87,58,0.06); }
.word-cell.is-hidden .txt{ filter: blur(5px); }
.word-cloud.reveal-all .word-cell .txt{ filter: blur(0); }

.reveal-toggle-row{ display:flex; justify-content:flex-end; margin-bottom: 14px; }

/* not-published state */
.empty-state{ text-align:center; padding: 60px 20px; }
.empty-state .emoji{ font-size: 2.6rem; margin-bottom: 10px; }
.empty-state h2{ margin-bottom: 8px; }

/* =========================================================
   Archive page
   ========================================================= */
.archive-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.archive-card{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px; box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  color: var(--ink);
}
.archive-card:hover{ border-color: var(--border-strong); transform: translateY(-2px); text-decoration:none; }
.archive-card .d{ font-family: var(--font-mono); color: var(--teal); font-size: .78rem; margin-bottom: 8px; }
.archive-card .pg{ font-family: var(--font-display); font-weight:700; font-size: 1.15rem; color: var(--gold-deep); margin-bottom: 10px; }
.archive-card .meta{ display:flex; gap:14px; font-size: .8rem; color: var(--ink-muted); }
.month-heading{ font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; color: var(--ink-faint); margin: 32px 0 14px; }
.month-heading:first-child{ margin-top: 0; }

/* =========================================================
   Admin
   ========================================================= */
.admin-shell{ min-height: 100vh; }
.admin-bar{ background: var(--bg-elevated); border-bottom: 1px solid var(--border); padding: 16px 0; }
.admin-bar .wrap{ display:flex; align-items:center; justify-content:space-between; }
.admin-bar .title{ font-family: var(--font-display); font-weight:700; }
.admin-content{ max-width: 900px; margin: 0 auto; padding: 36px 20px 80px; }

.login-shell{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 20px; }
.login-card{ width: 100%; max-width: 380px; }

.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:.85rem; font-weight:600; color: var(--ink-muted); margin-bottom: 8px; }
.field input[type="text"], .field input[type="password"], .field input[type="date"], .field textarea{
  width:100%; background: var(--bg-elevated); border:1px solid var(--border); color: var(--ink);
  border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--font-body); font-size: .95rem;
}
.field textarea{ font-family: var(--font-mono); font-size:.82rem; min-height: 260px; resize: vertical; line-height:1.5; }
.field input:focus, .field textarea:focus{ border-color: var(--gold); outline: none; }
.field .hint{ font-size:.8rem; color: var(--ink-faint); margin-top:6px; }

.alert{ border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px; font-size:.92rem; border:1px solid; }
.alert-success{ background: rgba(31,143,99,0.07); border-color: rgba(31,143,99,0.3); color: var(--teal); }
.alert-error{ background: rgba(201,74,55,0.07); border-color: rgba(201,74,55,0.3); color: var(--red); }

.upload-table{ width:100%; border-collapse: collapse; font-size:.9rem; }
.upload-table th, .upload-table td{ text-align:left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.upload-table th{ color: var(--ink-faint); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.upload-table td.mono{ font-family: var(--font-mono); }
.row-actions{ display:flex; gap:10px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ border-top: 1px solid var(--border); padding: 32px 0; margin-top: 40px; }
.footer-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 14px; }
.footer-brand{ display:flex; align-items:center; gap:8px; font-family: var(--font-display); font-weight:700; color: var(--ink-muted); font-size:.92rem; }
.footer-nav{ display:flex; gap: 18px; }
.footer-nav a{ color: var(--ink-muted); font-size: .88rem; }
.footer-note{ color: var(--ink-faint); font-size: .78rem; width: 100%; text-align:center; }

@media (min-width: 760px){
  .footer-note{ width:auto; text-align:left; order:3; flex-basis: 100%; }
}