/* =====================================================================
   Likkle Coders — v16 ORGANIZED (v570)
   The EduFocal-inspired reorganisation: Today panel, Clubs hub,
   My Progress report (screen + print), NSC quiz review card.
   EASY REVERT: delete this file's <link> in index.html + SW entry.
   ===================================================================== */

/* ---- Today panel: the first card on the signed-in home ---- */
.lc-today{
  background: var(--lct-paper, #fff);
  border: 2px solid var(--lct-line, #e8e4da);
  border-radius: var(--lct-r-lg, 16px);
  padding: 1.1rem 1.2rem 1.2rem;
  margin: 0 0 1.1rem;
}
.lc-today-head{ display: flex; align-items: baseline; gap: .8rem; margin-bottom: .7rem; }
.lc-today-head h2{ margin: 0; border: 0; padding: 0; }
.lc-today-streak{
  margin-left: auto; font-weight: 800; font-size: var(--lct-t-sm);
  color: var(--lct-ink-2, #524d5e);
}
.lc-today-row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }
.lc-today-card{
  display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem 1rem; border-radius: var(--lct-r-md, 12px);
  border: 2px solid var(--lct-line, #e8e4da);
  text-decoration: none; color: inherit;
  transition: transform var(--lct-quick, .12s), border-color var(--lct-quick, .12s);
}
.lc-today-card:hover{ transform: translateY(-2px); border-color: var(--bh-purple, #6d28d9); }
.lc-today-focus{
  background: var(--bh-purple, #6d28d9); border-color: var(--bh-purple, #6d28d9); color: #fff;
}
.lc-today-kick{ font-size: .68rem; font-weight: 800; letter-spacing: .12em; opacity: .75; }
.lc-today-card strong{ font-family: var(--f-display); font-size: 1.15rem; line-height: 1.25; }
.lc-today-card span:last-child{ font-size: var(--lct-t-sm); opacity: .85; }

/* ---- Clubs hub ---- */
.lc-clubs-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .8rem; margin-top: 1.1rem;
}
.lc-club{
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.1rem 1.15rem; border-radius: var(--lct-r-lg, 16px);
  background: var(--lct-paper, #fff); border: 2px solid var(--lct-line, #e8e4da);
  text-decoration: none; color: inherit;
  transition: transform var(--lct-quick, .12s), border-color var(--lct-quick, .12s);
}
.lc-club:hover{ transform: translateY(-2px); border-color: var(--bh-purple, #6d28d9); }
.lc-club strong{ font-family: var(--f-display); font-size: 1.2rem; }
.lc-club span{ font-size: var(--lct-t-sm); color: var(--lct-ink-2, #524d5e); }

/* ---- My Progress report ---- */
.lc-report{ max-width: 720px; margin: 0 auto; }
.lc-report-tools{ display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.lc-report-table{ width: 100%; border-collapse: collapse; margin: .6rem 0 1.2rem; }
.lc-report-table th{
  text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lct-ink-2, #524d5e); border-bottom: 2px solid var(--lct-line, #e8e4da);
  padding: .35rem .6rem .35rem 0; font-family: var(--f-body);
}
.lc-report-table td{ border-bottom: 1px solid var(--lct-line, #e8e4da); padding: .55rem .6rem .55rem 0; }
.lc-report-chip{
  display: inline-block; padding: .25rem .8rem; border-radius: 99px;
  background: var(--lct-page-2, #f4f1ec); border: 1px solid var(--lct-line, #e8e4da);
  font-weight: 700; font-size: var(--lct-t-sm); margin: 0 .25rem .35rem 0;
}
.lc-report-foot{ margin-top: 2rem; font-size: var(--lct-t-xs); }

/* ---- NSC quiz missed-question review ---- */
.nsc-review{
  margin: 1.2rem 0 0; text-align: left;
  background: var(--lct-paper, #fff); border: 2px solid var(--lct-line, #e8e4da);
  border-radius: var(--lct-r-md, 12px); padding: .9rem 1.1rem;
}
.nsc-review summary{ cursor: pointer; font-weight: 800; font-family: var(--f-display); }
.nsc-review-item{ border-top: 1px solid var(--lct-line, #e8e4da); margin-top: .8rem; padding-top: .8rem; }
.nsc-review-q{ font-weight: 700; margin: 0 0 .3rem; }
.nsc-review-a{ margin: .15rem 0; color: var(--lct-success, #0a8a3a); }
.nsc-review-why{ margin: .3rem 0 0; color: var(--lct-ink-2, #524d5e); font-size: var(--lct-t-sm); line-height: 1.5; }

/* ---- Print: the report and the bank papers become clean handouts ---- */
@media print{
  header, .mobile-bar, .lc-noprint, .global-back, .lc-fab-toolbox, .lc-brain-fab,
  #globalLive, .nav-burger, .lc-a11y-fab, [id^="lcFab"]{ display: none !important; }
  body{ background: #fff !important; }
  .section{ padding: 0 !important; }
  .lc-report h1{ font-size: 24pt; }
  .lc-report-table td, .lc-report-table th{ padding: 6pt 8pt 6pt 0; }
  /* bank papers: hide the interactive chrome, keep questions + figures */
  .ppb-ans summary{ display: none; }
  .ppb-ans{ page-break-inside: avoid; }
  article.ppb-q{ page-break-inside: avoid; }
}

/* print: only the open paper(s) render; closed ones vanish */
@media print{
  details.ppb-paper:not([open]){ display: none !important; }
  .ppb-print-row{ display: none !important; }
  .ppq-opt, .ppb-opt{ break-inside: avoid; }
}
.ppb-print-row{ display: flex; gap: .7rem; align-items: center; margin: .3rem 0 .9rem; }
.ppb-print-hint{ font-size: var(--lct-t-xs); color: var(--lct-ink-2, #524d5e); }

/* the focus card is purple — nothing inside may inherit link colours */
.lc-today-focus, .lc-today-focus strong, .lc-today-focus span{ color:#fff !important; }
.lc-today-focus .lc-today-kick{ color:#fff !important; opacity:.75; }

/* ---- v572: Fun-activities grid, unified with the Clubs card language.
   The per-tile rainbow borders + drop shadows read as clutter; one
   quiet card, one hover accent, a consistent 5-across flow. ---- */
.bh-act-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: .7rem !important;
}
.bh-act{
  background: var(--lct-paper, #fff) !important;
  border: 2px solid var(--lct-line, #e8e4da) !important;
  border-radius: var(--lct-r-lg, 16px) !important;
  box-shadow: none !important;
  transition: transform var(--lct-quick,.12s), border-color var(--lct-quick,.12s) !important;
}
.bh-act:hover{ transform: translateY(-2px); border-color: var(--bh-purple, #6d28d9) !important; }
.bh-act strong{ font-family: var(--f-display); }

/* ---- v573: real code symbols on the Coding track ---- */
.lc-code-hero{
  font-family: var(--lct-f-mono, monospace); font-weight: 700;
  font-size: 2rem; letter-spacing: -.05em; color: #fff;
}
.lc-code-glyph{
  display: inline-block; font-family: var(--lct-f-mono, monospace);
  font-size: .78em; font-weight: 700; line-height: 1;
  padding: .22em .5em; border-radius: 6px; vertical-align: 2px;
  background: rgba(124, 58, 237, .12); color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, .28);
}

/* ---- v575: reading made friendly ----
   Children do not hate reading; they hate walls of small text. The
   passage sets in larger type with real air between lines, short
   paragraphs, a minutes chip that promises "this is quick", and a
   Listen button that reads it aloud. */
.ppq-passage{
  background: #fffdf5;
  border: 2px solid #f0e6c8;
  border-radius: var(--lct-r-md, 12px);
  padding: 1rem 1.2rem;
}
.ppq-passage p{
  font-size: 1.16rem !important;
  line-height: 1.85 !important;
  margin: .65rem 0 !important;
  max-width: 62ch;
}
.ppq-passage li{ font-size: 1.1rem; line-height: 1.7; }
.ppq-passage-head{
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-weight: 800; margin-bottom: .5rem;
}
.ppq-passage-tools{ margin-left: auto; display: inline-flex; gap: .5rem; align-items: center; }
.ppq-read-mins{
  font-size: .72rem; font-weight: 700; color: var(--lct-ink-2, #524d5e);
  background: #fff; border: 1px solid #e8dfc2; border-radius: 99px; padding: .18rem .6rem;
}
.ppq-read-btn{
  font-family: var(--f-body); font-size: .78rem; font-weight: 800; cursor: pointer;
  border: none; border-radius: 99px; padding: .32rem .85rem;
  background: var(--bh-purple, #6d28d9); color: #fff;
}
.ppq-read-btn:hover{ filter: brightness(1.12); }

/* Likkle Think challenge figures (the drawn pattern strips) */
.lt-fig{ margin: .6rem 0; }
.lt-fig img{ max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--lct-line, #e8e4da); background: #fff; }