/* Phrazo — Колоды (/decks/) list screen. Vanilla, no React/DS bundle.
   Ported minimal chrome from doc/koloda/ui_kits/decks/decks.css, mapped onto the
   landing's paper tokens (public/index.html :root). The kit references
   --font-*, --shadow-card, --hint, --warn, --dur-press; we alias them here. */

:root {
  --paper:   #f4efe4;
  --paper-2: #ebe4d3;
  --ink:     #1d1b16;
  --pencil:  #4a463c;
  --muted:   #8a8576;
  --accent:  #2f7a4f;
  --accent-soft: rgba(47,122,79,0.14);
  --hint:    #b08524;          /* user-deck spine */
  --warn:    #b3402f;
  --shadow:       rgba(29,27,22,0.20);
  --shadow-card:  4px 4px 0 rgba(29,27,22,0.10);
  --shadow-pop:   6px 6px 0 rgba(29,27,22,0.16);
  --dur-press: .12s;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-hand: "Caveat", cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 22px 22px, 11px 11px;
  background-position: 0 0, 5px 5px;
}
a { color: inherit; }

/* ---- topbar with section nav ---- */
.dk-topbar { display: flex; align-items: center; gap: 22px; padding: 12px 20px; border-bottom: 1px dashed var(--pencil); flex-wrap: wrap; }
.dk-brand { font-family: var(--font-hand); font-size: 26px; font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1; }
.dk-brand .dot { color: var(--accent); }
.dk-sections { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.dk-section-tab { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 6px 4px; border-bottom: 2px solid transparent; }
.dk-section-tab:hover { color: var(--ink); }
.dk-section-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.dk-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dk-user { font-family: var(--font-mono); font-size: .8rem; color: var(--pencil); }
.dk-user-lapsed { color: var(--warn); }

/* ---- page container ---- */
.dk-page { width: min(1080px, calc(100vw - 32px)); margin: 0 auto; padding: 26px 0 56px; }
.dk-page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.dk-page-title { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: 40px; line-height: .95; }
.dk-page-sub { color: var(--pencil); font-size: 14px; margin: 4px 0 0; }
.dk-spacer { flex: 1; }

/* ---- buttons ---- */
.dk-btn { appearance: none; cursor: pointer; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); padding: .5rem 1rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.dk-btn:hover { background: var(--accent-soft); }
.dk-btn-primary { background: var(--accent); border-color: var(--ink); color: var(--paper); }
.dk-btn-primary:hover { background: var(--ink); }
.dk-btn:disabled, .dk-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; background: var(--paper); }
.dk-btn[aria-disabled="true"]:hover { background: var(--paper); }
.dk-btn:disabled { cursor: not-allowed; opacity: .55; background: var(--paper); }
.dk-btn:disabled:hover { background: var(--paper); }
.dk-note { font-size: 13px; color: var(--pencil); margin: 0; }

/* ---- create-deck control (P3-02) ---- */
.dk-create { margin: 0 0 18px; }
.dk-create-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dk-create-input { appearance: none; font-family: var(--font-sans); font-size: .95rem; border: 1.5px solid var(--ink); padding: .5rem .8rem; background: var(--paper); color: var(--ink); min-width: 220px; flex: 1 1 220px; max-width: 360px; }
.dk-create-input:focus { outline: none; background: var(--paper-2); }
.dk-create-msg { font-size: 13px; color: var(--pencil); flex-basis: 100%; }

/* ---- deck grid + card ---- */
/* minmax floor is min(280px,100%): a track never exceeds the viewport on sub-280px folds (Galaxy Fold). */
.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; align-items: start; }
.dk-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--paper); border: 1.5px solid var(--ink); box-shadow: var(--shadow-card);
  padding: 16px 18px 16px 22px;
}
.dk-card-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.dk-card-spine[data-source="curated"], .dk-card-spine[data-source="system"] { background: var(--ink); }
.dk-card-spine[data-source="user"] { background: var(--hint); }
.dk-card-top { display: flex; align-items: baseline; gap: 8px; }
.dk-card-mark { font-family: var(--font-hand); font-size: 24px; line-height: 1; color: var(--accent); }
.dk-card-title { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.25; }
.dk-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dk-badge { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); border: 1px dashed var(--pencil); border-radius: 999px; padding: 1px 8px; }
.dk-badge[data-vis="public"] { color: var(--accent); border-color: var(--accent); }
.dk-card-foot { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.dk-count { font-family: var(--font-mono); font-size: 12px; color: var(--pencil); font-variant-numeric: tabular-nums; }

/* ---- guest "Мои фразы" locked list ---- */
.gk-mylist { border: 1.5px solid var(--ink); background: var(--paper); box-shadow: var(--shadow-card); margin: 4px 0 28px; }
.gk-mylist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 2px solid var(--ink); }
.gk-mylist-title { display: flex; gap: 12px; align-items: flex-start; }
.gk-inbox-mark { font-family: var(--font-hand); font-size: 30px; line-height: 1; color: var(--accent); }
.gk-mylist-title h2 { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: 26px; line-height: 1; }
.gk-mylist-title p { margin: 6px 0 0; color: var(--pencil); font-size: 13.5px; }
.gk-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.gk-mylist-body { padding: 22px 20px; color: var(--pencil); font-size: 14px; }
.gk-mylist-foot { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px dashed var(--pencil); }

/* ---- lock / nudge card ---- */
.dk-lock { max-width: 520px; margin: 6px 0 0; text-align: left; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-pop); padding: 22px 24px; display: grid; gap: 10px; }
.dk-lock-icon { font-size: 26px; }
.dk-lock h2 { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: 24px; line-height: 1.05; }
.dk-lock p { margin: 0; color: var(--pencil); font-size: 14px; line-height: 1.5; }
.dk-lock-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ---- collapsed (lapsed) note ---- */
.dk-collapse-note { margin: 0 0 16px; padding: 12px 14px; border: 1px dashed var(--warn); background: rgba(179,64,47,.06); color: var(--pencil); font-size: 13.5px; line-height: 1.5; }
.dk-collapse-note b { color: var(--ink); }

/* ---- states ---- */
.dk-state { padding: 40px 8px; text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.dk-state-err { color: var(--warn); }

/* ---- footer ---- */
.dk-foot { border-top: 1px dashed var(--pencil); padding: 1.6rem 1.5rem; text-align: center; font-family: var(--font-mono); font-size: .78rem; color: var(--pencil); }
.dk-foot a { color: var(--pencil); }

/* ---- single-deck screen (P3-04) ---- */
.dk-card-link { text-decoration: none; color: inherit; transition: transform var(--dur-press), box-shadow var(--dur-press); }
.dk-card-link:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 0 var(--shadow); }
.dk-back { display: inline-block; font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--pencil); padding: 0 0 1px; }
.dk-back:hover { color: var(--ink); border-color: var(--ink); }
.dk-deck-head { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); margin: 8px 0 4px; }
.dk-deck-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.dk-phrase-list { list-style: none; margin: 8px 0 0; padding: 0; }
.dk-phrase-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px dashed var(--pencil); }
.dk-phrase-row:hover { background: var(--paper-2); }
.dk-ord { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: right; }
.dk-phrase-text { min-width: 0; }
.dk-phrase-en { font-family: var(--font-mono); font-size: 15px; color: var(--ink); word-break: break-word; }
.dk-phrase-ru { font-size: 13px; color: var(--muted); margin-top: 2px; }
.dk-lvl { font-family: var(--font-mono); font-size: 10px; color: var(--pencil); border: 1px dashed var(--pencil); border-radius: 999px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.dk-audio { appearance: none; border: 1px solid var(--pencil); background: var(--paper); cursor: pointer; width: 32px; height: 32px; border-radius: 999px; color: var(--ink); font-size: 13px; }
.dk-audio:hover { border-color: var(--ink); background: var(--paper-2); }
/* «Готовим озвучку…»: ▶ pulses while a clip bakes (aria-busy set by audio-player.js). */
.dk-audio[aria-busy="true"] { cursor: progress; animation: dkAudioPulse 1s ease-in-out infinite; }
@keyframes dkAudioPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.dk-audio-empty { display: inline-block; width: 32px; height: 32px; }

@media (max-width: 560px) {
  .dk-page-title { font-size: 34px; }
  .dk-topbar { gap: 14px; padding: 10px 14px; }
  .dk-sections { gap: 2px 8px; }
  .dk-section-tab { font-size: 13px; }
  /* iOS Safari force-zooms the page when a focused input computes <16px; pin mobile text inputs to 16px. */
  .dk-create-input { font-size: 16px; }
  .dk-audio { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .dk-audio[aria-busy="true"] { animation: none; }
}

/* ---- AI deck-builder wizard (/decks/ai/) ---- */
.db-page-head { align-items: flex-start; margin-bottom: 18px; }
.db-page-head .dk-back { margin-bottom: 12px; }
.db-shell { display: grid; gap: 18px; max-width: 760px; }
.db-form {
  display: grid;
  gap: 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-pop);
  padding: 18px;
}
.db-field { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.db-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--pencil);
}
.db-query,
.db-select {
  appearance: none;
  width: 100%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
}
.db-query { min-height: 148px; padding: 13px 14px; resize: vertical; line-height: 1.5; }
.db-query:focus,
.db-select:focus { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--paper-2); }
.db-query::placeholder { color: var(--muted); }
.db-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.db-chip {
  appearance: none;
  cursor: pointer;
  min-height: 38px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  padding: .42rem .72rem;
  box-shadow: 2px 2px 0 rgba(29,27,22,.12);
}
.db-chip:hover { background: var(--accent-soft); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(29,27,22,.16); }
.db-controls { display: grid; gap: 14px; }
.db-select { min-height: 44px; padding: 0 42px 0 12px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 12px) 19px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.db-size-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.db-size-option { position: relative; min-width: 0; }
.db-size-option input { position: absolute; opacity: 0; pointer-events: none; }
.db-size-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .9rem;
  cursor: pointer;
}
.db-size-option input:checked + span { background: var(--accent); color: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.db-size-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.db-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-msg { min-height: 20px; color: var(--pencil); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.db-msg-error { color: var(--warn); }
.db-msg a { color: var(--accent); font-weight: 700; }
.db-gate { margin: 0; }
.db-upsell { max-width: 620px; }
.db-error {
  display: grid;
  gap: 10px;
  align-items: start;
  border: 1.5px dashed var(--warn);
  background: rgba(179,64,47,.06);
  color: var(--pencil);
  padding: 14px;
}
.db-error p { margin: 0; }
.db-wait {
  display: grid;
  gap: 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-pop);
  padding: 18px;
}
.db-stages {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.db-stage { display: inline-flex; align-items: center; gap: 7px; }
.db-stage::before { content: ''; width: 9px; height: 9px; border: 1.5px solid currentColor; background: var(--paper); }
.db-stage:not(:last-child)::after { content: '→'; color: var(--muted); }
.db-stage.done { color: var(--ink); }
.db-stage.done::before { background: var(--ink); }
.db-stage.active { color: var(--accent); }
.db-stage.active::before { background: var(--accent); }
.db-skeleton-grid { display: grid; gap: 12px; }
.db-skeleton-group {
  display: grid;
  gap: 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  box-shadow: var(--shadow-card);
  padding: 14px;
  animation: dbSkeletonPulse 1.2s ease-in-out infinite;
  animation-delay: var(--db-delay, 0ms);
}
.db-skeleton-line,
.db-skeleton-card {
  background: rgba(29,27,22,.13);
  border: 1px solid rgba(29,27,22,.12);
}
.db-skeleton-line { height: 13px; width: 76%; }
.db-skeleton-title { width: 48%; height: 17px; background: rgba(47,122,79,.18); }
.db-skeleton-line.short { width: 58%; }
.db-skeleton-card { height: 64px; }
.db-ready { max-width: 680px; }
.db-ready-card { max-width: 620px; }

@keyframes dbSkeletonPulse {
  0%, 100% { opacity: .68; }
  50% { opacity: 1; }
}

@media (min-width: 720px) {
  .db-form { padding: 22px; }
  .db-controls { grid-template-columns: minmax(160px, 220px) minmax(260px, 1fr); align-items: end; }
  .db-skeleton-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .db-form,
  .db-wait { padding: 14px; }
  .db-actions .dk-btn { width: 100%; justify-content: center; }
  .db-msg { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .db-chip:hover { transform: none; }
  .db-skeleton-group { animation: none; }
}

/* ---- AI deck-builder curation (Turn B) ---- */
.db-results { display: grid; gap: 18px; padding-bottom: 96px; }
.db-degraded { margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.db-groups { display: grid; gap: 18px; }
.db-group { display: grid; gap: 10px; }
.db-group-title { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ink); }
.db-phrase-grid { display: grid; gap: 10px; }
.db-phrase-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding: 12px;
}
.db-phrase-check { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; cursor: pointer; }
.db-phrase-check input { position: absolute; opacity: 0; pointer-events: none; }
.db-phrase-check span { width: 22px; height: 22px; border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 2px 2px 0 rgba(29,27,22,.12); }
.db-phrase-check input:checked + span { background: var(--accent); box-shadow: 2px 2px 0 var(--ink); }
.db-phrase-check input:checked + span::after { content: ''; display: block; width: 10px; height: 5px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg) translate(3px, 7px); }
.db-phrase-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.db-phrase-copy { min-width: 0; }
.db-phrase-en { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.db-phrase-ru { margin: 4px 0 0; color: var(--pencil); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.db-cefr { display: inline-flex; margin-left: 4px; padding: 1px 6px; border: 1px dashed var(--pencil); color: var(--muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.2; vertical-align: middle; }
.db-phrase-audio { border-radius: 0; }
.db-create-panel,
.db-create-upsell {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 10px;
  align-items: end;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-pop);
  padding: 12px;
}
.db-create-count { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.db-create-title-field { display: grid; gap: 5px; min-width: 0; }
.db-create-title { width: 100%; min-height: 42px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: .95rem; padding: .48rem .7rem; }
.db-create-title:focus { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--paper-2); }
.db-create-title[aria-invalid="true"] { border-color: var(--warn); }
.db-title-error,
.db-create-msg { min-height: 18px; color: var(--pencil); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.db-title-error { color: var(--warn); }
.db-create-msg-error { color: var(--warn); }
.db-create-upsell { align-items: center; }
.db-create-upsell h2 { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: 24px; line-height: 1; }
.db-create-upsell p { margin: 5px 0 0; color: var(--pencil); font-size: 13px; line-height: 1.4; }
.db-empty { max-width: 680px; }

@media (min-width: 760px) {
  .db-phrase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-create-panel { grid-template-columns: auto minmax(260px, 1fr) auto; }
  .db-create-msg { grid-column: 2 / 4; }
  .db-create-upsell { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 560px) {
  .db-results { padding-bottom: 140px; }
  .db-phrase-card { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 10px; }
  .db-phrase-check { width: 30px; height: 30px; }
  .db-create-title { font-size: 16px; }  /* iOS zoom guard */
  .db-create-panel,
  .db-create-upsell { margin-left: -6px; margin-right: -6px; }
  .db-create-panel .dk-btn,
  .db-create-upsell .dk-btn { width: 100%; justify-content: center; }
}