/* =========================================================================
   NAAM JAP · LEKHAN MODULES (naam lekhan, notebook, challenges)
   Reuses tokens + components. Writing canvas is DPI-aware.
   ========================================================================= */

/* ---- Naam Lekhan stage ------------------------------------------------------ */
.lekhan-stage { max-width: 720px; margin-inline: auto; }
.lekhan-modes { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-3); }
.lekhan-modes .chip.is-selected { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.lekhan-modes .chip.is-selected:hover { background: var(--accent-strong); color: var(--on-accent); }
.lekhan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.lekhan-head .count { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); color: var(--primary-ink); }
.lekhan-head .count small { font-family: var(--font-body); font-size: var(--text-base); color: var(--ink-faint); }
.lekhan-head .page { color: var(--accent-strong); font-weight: var(--label-weight); }
.lekhan-naam { font-family: var(--font-dev); font-size: clamp(1.8rem, 6vw, 2.6rem); text-align: center; color: var(--primary-ink); margin-top: var(--space-3); }
.lekhan-instruct { margin-top: var(--space-2); text-align: center; color: var(--ink-muted); font-size: var(--text-sm); letter-spacing: 0.03em; }
.lekhan-instruct b { color: var(--accent-strong); font-weight: var(--label-weight); font-variant-numeric: tabular-nums; }

/* ---- Writing canvas --------------------------------------------------------- */
.canvas-sheet {
  position: relative; margin-top: var(--space-5);
  background: var(--surface-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  overflow: hidden; touch-action: none;  /* JS handles pointer capture */
  height: clamp(360px, 60vh, 540px);
}
.canvas-sheet.is-writing { box-shadow: var(--shadow-lg); border-color: var(--accent); }
.canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.canvas--hand { cursor: pointer; }

/* One-naam writing: a single faint manuscript reference on its own layer,
   never part of the ink canvas, so it can never be counted as writing. */
.lekhan-guide { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.canvas-sheet--one-naam .page-sheet__ruled {
  background-image: repeating-linear-gradient(transparent, transparent calc(var(--lh-snug) * 1.6em - 1px),
    color-mix(in srgb, var(--line) 55%, transparent) calc(var(--lh-snug) * 1.6em - 1px),
    color-mix(in srgb, var(--line) 55%, transparent) calc(var(--lh-snug) * 1.6em));
}
.lek-sheet--guided { height: 432px; }
.lek-sheet--guided .canvas { cursor: crosshair; }
.lek-sheet--free { background: var(--surface-raised); }
.lek-sheet--free .canvas { cursor: crosshair; }
/* Sections keep writing spots comfortably large on small screens */
.guided-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.guided-nav__label { font-size: var(--text-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.guided-nav .btn[disabled] { opacity: 0.35; pointer-events: none; }

.canvas-toolbar { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: var(--space-3); }
.canvas-toolbar .group { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.canvas-toolbar .btn--sm { font-size: var(--text-xs); }

.canvas-hint { margin-top: var(--space-3); text-align: center; color: var(--ink-faint); font-size: var(--text-xs); letter-spacing: 0.04em; }

/* ---- Completion & page-turn ------------------------------------------------- */
.lekhan-done { text-align: center; padding: var(--space-9) var(--space-5); }
.lekhan-done__glyph { font-family: var(--font-dev); font-size: 3.4rem; color: var(--accent-strong); display: block; }
.lekhan-done h2 { font-family: var(--font-display); font-size: var(--text-2xl); margin-top: var(--space-4); }
.lekhan-done .done-sub { margin-top: var(--space-2); color: var(--ink-muted); }

.page-wrap { perspective: 1200px; }
.page-turn { transform-origin: left center; animation: pg-turn var(--dur-slow) var(--ease-inout); }
@keyframes pg-turn { 0% { transform: rotateY(0); opacity: 1; } 60% { transform: rotateY(-72deg); } 100% { transform: rotateY(0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .page-turn { animation: none; }
}

/* ---- Notebook ---------------------------------------------------------------- */
.nb-tools { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: space-between; align-items: center; margin: var(--space-5) 0; }
.nb-tools .group { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.nb-grid { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; }
.nb-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-xs);
}
.nb-card__thumb { height: 120px; background: var(--accent-soft); border-bottom: 1px solid var(--line); display: grid; place-items: center; color: var(--accent-strong); font-family: var(--font-dev); font-size: 1.6rem; }
.nb-card__body { padding: var(--space-4); }
.nb-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nb-card h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--display-weight); }
.nb-card p { margin-top: var(--space-1); color: var(--ink-muted); font-size: var(--text-xs); }
.nb-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.nb-card__actions .btn { flex: 1; }
@media (min-width: 620px) { .nb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .nb-grid { grid-template-columns: repeat(3, 1fr); } }
.nb-empty { text-align: center; padding: var(--space-9) var(--space-5); color: var(--ink-muted); }

/* ---- Challenges --------------------------------------------------------------- */
.chall-grid { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; }
.chall-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); }
.chall-card h3 { font-family: var(--font-display); font-size: var(--text-lg); }
.chall-card .days { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--text-xl); color: var(--primary-ink); }
.chall-card .days small { font-size: var(--text-base); color: var(--ink-faint); }
.chall-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.chall-actions .btn { flex: 1; min-width: 120px; }
.pct { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-2); }
.day-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 4px; margin-top: var(--space-4); }
.day-cell { aspect-ratio: 1; border-radius: var(--radius-xs); background: var(--surface-sunken); }
.day-cell.is-done { background: var(--success); }
.day-cell.is-today { outline: 2px solid var(--accent); }
@media (min-width: 620px) { .chall-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .chall-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Privacy note -------------------------------------------------------------- */
.lekhan-privacy { text-align: center; color: var(--ink-muted); font-size: var(--text-xs); max-width: 52ch; margin: var(--space-5) auto 0; }