/**
 * Flashcards.
 *
 * Its own stylesheet, the way the video and QR families each have one. Colours
 * are all custom properties from the site's scheme system, so light and dark
 * and every accent tint come along without a rule here having to know about
 * them.
 *
 * The one thing this file is careful about is the study card: the prompt is set
 * noticeably larger than body text and the answer is given room to breathe,
 * because a flashcard read at 16px on a phone is a worse flashcard. Contrast
 * and focus outlines are never removed, only restyled.
 */

.sk-fc-root {
  --sk-fc-radius: 18px;
  display: block;
  box-sizing: border-box;
  margin-top: 20px;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;

  /* The palette is declared here, scoped to this tool, rather than pulled from
     a global block. That is the convention every other tool family on the site
     follows and it is deliberate: color-scheme.css only carries the dark
     overrides, and the light values live on each tool's own root class. An
     earlier version of this file assumed a global palette existed, declared
     none, and rendered with no borders, no text colour and a dark-on-dark
     primary button. */
  --sk-ink: #28323a;
  --sk-muted: #66727b;
  --sk-accent: #68438b;
  --sk-accent-strong: #452b61;
  --sk-on-accent: #ffffff;
  --sk-accent-bg: #68438b;
  --sk-accent-hover: #5c3b7a;
  --sk-accent-line: rgba(104, 67, 139, 0.34);
  --sk-accent-soft: rgba(104, 67, 139, 0.12);
  --sk-line: #dfe3e8;
  --sk-surface: #ffffff;
  --sk-soft: #f7f5fa;
  --sk-bg: #ffffff;
  --sk-shadow: 0 1px 2px rgba(20, 24, 30, 0.06), 0 6px 18px rgba(20, 24, 30, 0.05);
}

html[data-sk-scheme="dark"] .sk-fc-root {
  --sk-ink: #e9edf2;
  --sk-muted: #aab5c1;
  --sk-accent: #c79bf0;
  --sk-accent-strong: #e6cbf8;
  --sk-on-accent: #1a1220;
  --sk-accent-bg: #a679dd;
  --sk-accent-hover: #b98ae4;
  --sk-accent-line: rgba(199, 155, 240, 0.34);
  --sk-accent-soft: rgba(199, 155, 240, 0.16);
  --sk-line: #333d48;
  --sk-surface: #222a33;
  --sk-soft: #1a2028;
  --sk-bg: #171d24;
  --sk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
}

.sk-fc-root *,
.sk-fc-root *::before,
.sk-fc-root *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- Layout */

.sk-fc-main {
  display: block;
}

.sk-fc-intro {
  max-width: 66ch;
  margin: 0 0 18px;
  color: var(--sk-muted);
  font-size: 1.02rem;
}

.sk-fc-h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--sk-ink);
}

.sk-fc-h2 {
  margin: 26px 0 8px;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--sk-ink);
}

.sk-fc-h3 {
  margin: 24px 0 8px;
  font-size: 1.05rem;
  color: var(--sk-ink);
}

/* A programmatic focus target should not draw a focus ring, but it must still
   be reachable by a keyboard user, so it keeps its outline and drops the
   offset that would ring the whole page. */
.sk-fc-h1:focus,
.sk-fc-h2:focus,
.sk-fc-h3:focus {
  outline: 2px solid var(--sk-accent);
  outline-offset: 3px;
}

.sk-fc-foot {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--sk-line);
  color: var(--sk-muted);
  font-size: 0.88rem;
}

.sk-fc-foot p {
  margin: 0;
  max-width: 70ch;
}

/* --------------------------------------------------------------- Banners */

.sk-fc-banner {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--sk-line);
  border-left: 4px solid var(--sk-accent);
  border-radius: 12px;
  background: var(--sk-soft);
}

.sk-fc-banner p {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.sk-fc-banner p:last-child {
  margin-bottom: 0;
}

.sk-fc-banner-error {
  color: #b3261e;
  font-weight: 600;
}

html[data-sk-scheme="dark"] .sk-fc-banner-error {
  color: #ffb4a9;
}

/* ----------------------------------------------------------------- Notes */

.sk-fc-note,
.sk-fc-warn {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.93rem;
}

.sk-fc-note {
  border-left: 4px solid var(--sk-accent);
  background: var(--sk-soft);
  color: var(--sk-muted);
}

/* The ungrounded warning is the one place on the page that is not purely
   neutral, because it is about the trustworthiness of what is on screen. It
   takes its colour from the accent rather than hard-coding an amber, so it
   survives the accent tint being changed. */
.sk-fc-warn {
  border: 1px solid var(--sk-accent-line);
  background: var(--sk-accent-soft);
  color: var(--sk-ink);
  font-weight: 500;
}

/* --------------------------------------------------------------- Buttons */

.sk-fc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.sk-fc-actions-sticky {
  position: sticky;
  bottom: 0;
  padding: 12px 0;
  background: var(--sk-bg);
  border-top: 1px solid var(--sk-line);
}

.sk-fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--sk-line);
  border-radius: 12px;
  background: var(--sk-surface);
  color: var(--sk-ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.sk-fc-btn:hover:not(:disabled) {
  border-color: var(--sk-accent);
  background: var(--sk-accent-soft);
}

.sk-fc-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.sk-fc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sk-fc-btn:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
}

.sk-fc-btn-primary {
  border-color: var(--sk-accent);
  background: var(--sk-accent);
  color: var(--sk-on-accent);
}

.sk-fc-btn-primary:hover:not(:disabled) {
  background: var(--sk-accent-hover);
  border-color: var(--sk-accent-hover);
  color: var(--sk-on-accent);
}

.sk-fc-btn-large {
  min-height: 54px;
  padding: 14px 30px;
  font-size: 1.05rem;
}

.sk-fc-btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--sk-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sk-fc-btn-quiet:hover:not(:disabled) {
  background: var(--sk-soft);
  color: var(--sk-ink);
}

.sk-fc-btn-danger {
  color: #b3261e;
  border-color: #f0c4c0;
  background: #fff6f5;
}

html[data-sk-scheme="dark"] .sk-fc-btn-danger {
  color: #ffb4a9;
  border-color: #6b2a24;
  background: #2a1512;
}

.sk-fc-btn-danger:hover:not(:disabled) {
  border-color: #b3261e;
  background: #fde8e6;
}

html[data-sk-scheme="dark"] .sk-fc-btn-danger:hover:not(:disabled) {
  background: #3a1c18;
}

/* The three recall ratings are colour-coded, but never by colour alone: each
   one also carries its own word, so the distinction survives a monochrome
   screen or a colour vision difference. */
.sk-fc-btn-good {
  border-color: #2e7d32;
  background: #eef7ee;
  color: #1b5e20;
}

.sk-fc-btn-mid {
  border-color: #b26a00;
  background: #fdf4e6;
  color: #8a5200;
}

.sk-fc-btn-bad {
  border-color: #b3261e;
  background: #fdeceb;
  color: #8c1d18;
}

html[data-sk-scheme="dark"] .sk-fc-btn-good { background: #16301a; color: #a5d6a7; border-color: #2e5c33; }
html[data-sk-scheme="dark"] .sk-fc-btn-mid { background: #33260c; color: #ffcc80; border-color: #6b4a12; }
html[data-sk-scheme="dark"] .sk-fc-btn-bad { background: #331614; color: #ffb4a9; border-color: #6b2a24; }

/* ---------------------------------------------------------------- Fields */

.sk-fc-field {
  margin: 0 0 16px;
  max-width: 720px;
}

.sk-fc-fieldset {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--sk-line);
  border-radius: 14px;
}

.sk-fc-fieldset > .sk-fc-label {
  padding: 0 6px;
}

.sk-fc-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sk-ink);
}

.sk-fc-minilabel {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sk-muted);
}

.sk-fc-help {
  margin: 6px 0 0;
  color: var(--sk-muted);
  font-size: 0.86rem;
}

.sk-fc-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  background: var(--sk-surface);
  color: var(--sk-ink);
  font: inherit;
  font-size: 1rem;
}

.sk-fc-textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}

.sk-fc-count {
  max-width: 110px;
}

.sk-fc-input:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 1px;
  border-color: var(--sk-accent);
}

.sk-fc-radios {
  display: grid;
  gap: 8px;
}

.sk-fc-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  cursor: pointer;
}

.sk-fc-radio:hover {
  border-color: var(--sk-accent);
}

.sk-fc-radio input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--sk-accent);
}

.sk-fc-radio-body b {
  display: block;
  font-size: 0.95rem;
}

.sk-fc-radio-body small {
  display: block;
  color: var(--sk-muted);
  font-size: 0.84rem;
}

.sk-fc-status {
  margin: 10px 0 0;
  min-height: 1.4em;
  color: var(--sk-muted);
  font-size: 0.92rem;
}

.sk-fc-status-error {
  color: #b3261e;
  font-weight: 600;
}

html[data-sk-scheme="dark"] .sk-fc-status-error {
  color: #ffb4a9;
}

/* ------------------------------------------------------------------ Home */

.sk-fc-search {
  margin: 20px 0 14px;
  max-width: 420px;
}

.sk-fc-decks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.sk-fc-deck {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-fc-radius);
  background: var(--sk-surface);
  box-shadow: var(--sk-shadow);
}

.sk-fc-deckhead h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.sk-fc-deckmeta {
  margin: 0;
  color: var(--sk-muted);
  font-size: 0.85rem;
}

.sk-fc-decktopic {
  margin: 8px 0 0;
  color: var(--sk-muted);
  font-size: 0.9rem;
}

.sk-fc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}

.sk-fc-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sk-soft);
  color: var(--sk-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.sk-fc-chip-due {
  background: var(--sk-accent-soft);
  color: var(--sk-accent-strong);
}

.sk-fc-chip-known {
  background: #eef7ee;
  color: #1b5e20;
}

html[data-sk-scheme="dark"] .sk-fc-chip-known { background: #16301a; color: #a5d6a7; }

.sk-fc-chip-new { background: var(--sk-accent-bg); color: var(--sk-accent-strong); }
.sk-fc-chip-learning { background: var(--sk-soft); color: var(--sk-muted); }
.sk-fc-chip-due { background: var(--sk-accent-soft); color: var(--sk-accent-strong); }

.sk-fc-deckactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.sk-fc-deckactions .sk-fc-btn {
  flex: 1 1 auto;
  min-width: 0;
}

/* ------------------------------------------------------------------ Bars */

.sk-fc-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--sk-soft);
  overflow: hidden;
}

.sk-fc-bar > i {
  display: block;
  height: 100%;
  background: var(--sk-accent);
  border-radius: 999px;
}

.sk-fc-progress-label {
  margin: 6px 0 0;
  color: var(--sk-muted);
  font-size: 0.86rem;
}

/* --------------------------------------------------------------- Preview */

.sk-fc-report {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--sk-line);
  border-radius: 12px;
  background: var(--sk-soft);
}

.sk-fc-reporthead {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
}

.sk-fc-preview {
  display: grid;
  gap: 12px;
}

.sk-fc-pcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  background: var(--sk-surface);
}

.sk-fc-pnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--sk-soft);
  color: var(--sk-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.sk-fc-pbody .sk-fc-textarea {
  margin-bottom: 10px;
}

.sk-fc-ptools,
.sk-fc-etools {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sk-fc-ptools .sk-fc-btn,
.sk-fc-etools .sk-fc-btn {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 0.86rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------- Study card */

.sk-fc-studyhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.sk-fc-studyhead .sk-fc-h2 {
  margin: 0;
}

.sk-fc-card {
  margin: 16px 0;
  padding: 28px 24px;
  border: 1px solid var(--sk-accent-line);
  border-radius: 22px;
  background: var(--sk-surface);
  box-shadow: var(--sk-shadow);
}

.sk-fc-cardlabel {
  margin: 0 0 12px;
  color: var(--sk-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sk-fc-front {
  margin: 0 0 4px;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--sk-ink);
  /* Long prompts are questions someone wrote badly, not a reason to let the
     card overflow. */
  overflow-wrap: break-word;
}

.sk-fc-answerzone {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--sk-line);
}

.sk-fc-back {
  margin: 0 0 12px;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--sk-ink);
  overflow-wrap: break-word;
}

.sk-fc-source {
  margin: 0 0 12px;
  color: var(--sk-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.sk-fc-rating {
  margin-top: 18px;
}

.sk-fc-ratebuttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.sk-fc-ratebuttons .sk-fc-btn {
  flex: 1 1 150px;
}

/* ----------------------------------------------------------------- Editor */

.sk-fc-editor-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.sk-fc-ecard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  background: var(--sk-surface);
}

.sk-fc-ecard > .sk-fc-chip {
  margin-top: 2px;
}

.sk-fc-ebody .sk-fc-textarea {
  margin-bottom: 8px;
}

.sk-fc-add {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--sk-line);
  border-radius: 16px;
  background: var(--sk-soft);
}

.sk-fc-add .sk-fc-field {
  max-width: none;
}

/* --------------------------------------------------------------- Progress */

.sk-fc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}

.sk-fc-tile {
  padding: 16px;
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  background: var(--sk-surface);
  text-align: center;
}

.sk-fc-tile b {
  display: block;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--sk-ink);
}

.sk-fc-tile span {
  color: var(--sk-muted);
  font-size: 0.85rem;
}

.sk-fc-activity {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.sk-fc-actrow {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
}

.sk-fc-actday {
  color: var(--sk-muted);
}

.sk-fc-actbar {
  height: 10px;
  border-radius: 999px;
  background: var(--sk-soft);
  overflow: hidden;
}

.sk-fc-actbar > i {
  display: block;
  height: 100%;
  background: var(--sk-accent);
}

.sk-fc-actnum {
  color: var(--sk-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sk-fc-shaky {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.sk-fc-shaky li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  background: var(--sk-surface);
}

.sk-fc-shaky small {
  color: var(--sk-muted);
}

/* ------------------------------------------------------------ Empty state */

.sk-fc-empty {
  grid-column: 1 / -1;
  padding: 32px 24px;
  border: 1px dashed var(--sk-line);
  border-radius: 16px;
  background: var(--sk-soft);
  text-align: center;
}

.sk-fc-empty h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.sk-fc-empty p {
  max-width: 52ch;
  margin: 0 auto 16px;
  color: var(--sk-muted);
  font-size: 0.93rem;
}

.sk-fc-tally {
  margin: 12px 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  color: var(--sk-muted);
}

.sk-fc-summary {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--sk-line);
  border-radius: 18px;
  background: var(--sk-surface);
}

/* ----------------------------------------------------------- Narrow view */

@media (max-width: 640px) {
  .sk-fc-root {
    margin-top: 12px;
    /* On a narrow screen the root was sitting flush against the edge of the
       viewport, so body text touched the screen edge and read as clipped even
       though it was only touching it. The other tool families carry their own
     * padding at this width for the same reason. */
    padding-left: 4px;
    padding-right: 4px;
  }

  .sk-fc-card {
    padding: 20px 16px;
    border-radius: 16px;
  }

  /* The three-column card rows fold to one, because a card with a question and
     an answer squeezed into two thirds of a phone width is unusable. */
  .sk-fc-pcard,
  .sk-fc-ecard {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sk-fc-ptools,
  .sk-fc-etools {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sk-fc-decks {
    grid-template-columns: 1fr;
  }

  .sk-fc-actions-sticky {
    position: static;
  }

  .sk-fc-ratebuttons .sk-fc-btn {
    flex: 1 1 100%;
  }

  .sk-fc-actrow {
    grid-template-columns: 74px minmax(0, 1fr) 48px;
    font-size: 0.8rem;
  }
}

/* ---------------------------------------------------------- Larger text */

/* The site lets a visitor set a reading scale in the Appearance control, keyed
   off data-sk-text-scale with the ids normal, large and xlarge. Two things
   break at the top end and are put back here: the three-column card rows and the
   activity rows. A font scale is the most common accessibility setting on the
   site, so it is worth the rules. These sit outside the media query on purpose
   -- they have to win over the base grid declaration, which is why the base
   rows are written with a single-column-safe template rather than relying on
   cascade order. */
html[data-sk-text-scale="large"] .sk-fc-pcard,
html[data-sk-text-scale="large"] .sk-fc-ecard,
html[data-sk-text-scale="xlarge"] .sk-fc-pcard,
html[data-sk-text-scale="xlarge"] .sk-fc-ecard {
  grid-template-columns: auto minmax(0, 1fr);
}

html[data-sk-text-scale="large"] .sk-fc-ptools,
html[data-sk-text-scale="large"] .sk-fc-etools,
html[data-sk-text-scale="xlarge"] .sk-fc-ptools,
html[data-sk-text-scale="xlarge"] .sk-fc-etools {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
}

html[data-sk-text-scale="large"] .sk-fc-actrow,
html[data-sk-text-scale="xlarge"] .sk-fc-actrow {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

html[data-sk-text-scale="large"] .sk-fc-actnum,
html[data-sk-text-scale="xlarge"] .sk-fc-actnum {
  text-align: left;
}

html[data-sk-text-scale="large"] .sk-fc-ratebuttons,
html[data-sk-text-scale="xlarge"] .sk-fc-ratebuttons {
  flex-direction: column;
  align-items: stretch;
}

/* --------------------------------------------------------------- Printing */

@media print {
  .sk-fc-actions,
  .sk-fc-ptools,
  .sk-fc-etools,
  .sk-fc-ratebuttons,
  .sk-fc-search {
    display: none;
  }

  .sk-fc-card {
    border: 1px solid #999;
    box-shadow: none;
  }
}