/* ============================================================
   LEXICON — a vocabulary card catalog
   Design language: the reading room of a library. Oak drawers,
   manila index cards, brass fittings, an ink due-date stamp.
   ============================================================ */

:root{
  /* -- palette -- */
  --ink:        #1B2A22;   /* deep pine-ink, header / drawer rail */
  --ink-soft:   #24382D;
  --paper:      #F1E9D2;   /* aged manila card stock */
  --paper-deep: #E7D9AE;   /* shadowed paper / tab */
  --paper-line: #CBB98C;   /* rule lines on the card */
  --paper-text: #2A2117;   /* near-black warm ink for reading */
  --brass:      #A5762F;   /* brass fitting / primary accent */
  --brass-deep: #7E5A22;
  --teal:       #2F5D57;   /* secondary accent, links, progress */
  --stamp-green:#3E6B49;
  --stamp-red:  #A2402C;
  --paper-edge: rgba(42,33,23,0.14);

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius-card: 10px;
  --shadow-card: 0 18px 40px -14px rgba(27,42,34,0.45), 0 2px 8px rgba(27,42,34,0.18);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background:
    radial-gradient(ellipse at top, #24382D 0%, #16231B 55%, #101A14 100%);
  color: var(--paper-text);
  font-family: var(--font-ui);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* subtle wood-grain rail down the left on wide screens, purely atmospheric */
.drawer-rail{
  position: fixed;
  inset: 0 auto 0 0;
  width: 10px;
  background: linear-gradient(180deg, var(--brass), var(--brass-deep));
  opacity: .55;
}
@media (max-width: 720px){ .drawer-rail{ display:none; } }

/* ---------------- header ---------------- */
.site-header{
  padding: 28px clamp(16px, 4vw, 48px) 10px;
}
.header-inner{
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(241,233,210,0.18);
  padding-bottom: 18px;
}
.wordmark{ display: flex; align-items: center; gap: 14px; }
.wordmark-icon{
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--ink);
  background: var(--paper);
  width: 46px; height: 46px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 var(--brass-deep), 0 6px 14px rgba(0,0,0,0.35);
}
.wordmark-text{ display: flex; flex-direction: column; line-height: 1.15; }
.wordmark-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--paper);
  letter-spacing: 0.2px;
}
.wordmark-sub{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B9C7BB;
}
.btn-ghost{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #CFE0D2;
  background: transparent;
  border: 1px solid rgba(241,233,210,0.35);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-ghost:hover{ background: rgba(241,233,210,0.1); border-color: rgba(241,233,210,0.6); }
.btn-ghost:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------------- main stage ---------------- */
.stage{
  flex: 1;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 22px clamp(16px, 4vw, 48px) 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- fallback / diagnostic banner ---- */
.load-warning{
  background: #4A2A20;
  border: 1px solid var(--stamp-red);
  color: #F6E4DC;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 8px;
}

/* ---- catalog drawer tabs ---- */
.catalog-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tab{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: 9px 14px 8px;
  background: rgba(241,233,210,0.08);
  color: #D9E4DA;
  border: 1px solid rgba(241,233,210,0.16);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  position: relative;
  top: 1px;
  transition: background .15s ease, color .15s ease;
}
.tab:hover{ background: rgba(241,233,210,0.16); }
.tab.active{
  background: var(--paper);
  color: var(--paper-text);
  font-weight: 600;
  border-color: var(--paper);
}
.tab-review.active{ color: var(--stamp-red); }
.tab-count{
  display: inline-block;
  margin-left: 5px;
  font-size: 10.5px;
  background: var(--stamp-red);
  color: var(--paper);
  border-radius: 999px;
  padding: 1px 6px;
}
.tab:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---- toolbar ---- */
.deck-toolbar{
  background: var(--paper);
  border-radius: 0 8px 8px 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.shuffle-toggle{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper-text);
  cursor: pointer;
  user-select: none;
}
.shuffle-toggle input{ position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track{
  width: 34px; height: 19px;
  background: var(--paper-line);
  border-radius: 999px;
  position: relative;
  transition: background .15s ease;
  flex-shrink: 0;
}
.toggle-thumb{
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.shuffle-toggle input:checked + .toggle-track{ background: var(--teal); }
.shuffle-toggle input:checked + .toggle-track .toggle-thumb{ transform: translateX(15px); }
.shuffle-toggle input:focus-visible + .toggle-track{ outline: 2px solid var(--brass); outline-offset: 2px; }
.deck-position{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--brass-deep);
  font-weight: 600;
}

/* ---------------- card stage ---------------- */
.card-stage{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 340px;
  perspective: 1600px;
}

.index-card{
  width: min(100%, 520px);
  height: 320px;
  cursor: pointer;
  outline-offset: 6px;
  position: relative;
}
.index-card:focus-visible{ outline: 2px solid var(--brass); }

.card-flip{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.4,.2,.2,1);
}
.index-card.flipped .card-flip{ transform: rotateY(180deg); }

.card-face{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  background:
    repeating-linear-gradient(180deg, transparent 0 37px, var(--paper-line) 37px 38px),
    var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 34px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--paper-edge);
}
.card-back{ transform: rotateY(180deg); justify-content: center; align-items: center; text-align: center; }

.card-hole{
  position: absolute;
  top: 16px; left: 16px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d8cba0, #b6a370 70%, #96835a);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.35);
}
.card-tab{
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--brass);
  color: var(--paper);
  padding: 4px 12px;
  border-radius: 4px 4px 0 0;
  margin-top: -26px;
  margin-right: -10px;
}
.card-id{
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8B7A55;
  margin-top: 22px;
}
.card-word-wrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.card-word{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 7vw, 52px);
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
  word-break: break-word;
}
.card-pos{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--teal);
  margin: 0;
}
.card-hint{
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #9C8B64;
  margin: 0;
}
.card-back-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 14px;
}
.card-definition{
  font-family: var(--font-ui);
  font-size: clamp(16px, 3vw, 19px);
  line-height: 1.5;
  color: var(--paper-text);
  max-width: 400px;
  margin: 0 0 18px;
}

/* ink stamp feedback */
.stamp{
  position: absolute;
  top: 42%;
  left: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 22px;
  border: 5px solid currentColor;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) rotate(-18deg) scale(1.4);
  transition: none;
}
.stamp-known{ color: var(--stamp-green); }
.stamp-review{ color: var(--stamp-red); }
.stamp.stamp-fire{
  animation: stampThud 0.6s cubic-bezier(.2,.9,.3,1.1) forwards;
}
@keyframes stampThud{
  0%{ opacity: 0; transform: translate(-50%,-50%) rotate(-18deg) scale(1.8); }
  55%{ opacity: 0.92; transform: translate(-50%,-50%) rotate(-12deg) scale(0.96); }
  70%{ opacity: 0.92; transform: translate(-50%,-50%) rotate(-12deg) scale(1.04); }
  100%{ opacity: 0; transform: translate(-50%,-50%) rotate(-12deg) scale(1.04); }
}

.deck-complete{
  position: absolute; inset: 0;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  gap: 12px;
}
/* [hidden] and .deck-complete have identical CSS specificity, so without
   this rule, whichever is declared later in the stylesheet wins — which
   would be the `display: flex` above, permanently overriding the hidden
   attribute and leaving this panel visible on top of the flashcard at all
   times. Adding the attribute directly to the selector raises its
   specificity above the plain class rule, so hidden reliably means hidden. */
.deck-complete[hidden]{
  display: none;
}
.deck-complete-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  margin: 0;
}
.deck-complete-body{
  font-size: 14.5px;
  color: #4B4030;
  max-width: 360px;
  margin: 0;
  line-height: 1.55;
}

/* ---------------- controls ---------------- */
.controls{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.btn-control{
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .1s ease, filter .15s ease;
}
.btn-control:hover{ filter: brightness(1.08); }
.btn-control:active{ transform: translateY(1px); }
.btn-control:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }
.key-hint{
  font-family: var(--font-mono);
  font-size: 10.5px;
  opacity: 0.7;
  background: rgba(0,0,0,0.12);
  padding: 2px 6px;
  border-radius: 4px;
}
.btn-know-later{ background: #E4D3C4; color: var(--stamp-red); }
.btn-flip{ background: var(--ink); color: var(--paper); order: -1 ; }
.btn-know{ background: #CFE0D2; color: var(--stamp-green); }
@media (min-width: 560px){
  .controls{ grid-template-columns: 1fr 1.1fr 1fr; }
  .btn-flip{ order: 0; }
}

.btn-primary{
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  cursor: pointer;
}
.btn-primary:hover{ filter: brightness(1.15); }
.btn-primary:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------------- ledger ---------------- */
.ledger{
  background: rgba(241,233,210,0.08);
  border: 1px solid rgba(241,233,210,0.14);
  border-radius: 10px;
  padding: 16px 18px;
}
.ledger-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ledger-cell{ display: flex; flex-direction: column; align-items: center; }
.ledger-num{
  font-family: var(--font-mono);
  font-size: clamp(18px, 4vw, 24px);
  font-weight: 600;
  color: var(--paper);
}
.ledger-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9FB0A2;
  margin-top: 2px;
}
.progress-track{
  height: 6px;
  background: rgba(241,233,210,0.14);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--brass));
  border-radius: 999px;
  transition: width .3s ease;
}

/* ---------------- footer ---------------- */
.site-footer{
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #7C8C7F;
  padding: 8px 20px 30px;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------------- misc ---------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 460px){
  .card-word{ font-size: 30px; }
  .index-card{ height: 300px; }
  .card-face{ padding: 20px 20px; }
}