/* ============================================================
   Nathu Blended Learning - shared stylesheet
   London / Transport-for-London inspired heritage system.
   Token names kept from the original build; values re-mapped:
     --red   = Central-line red   (primary action, School theme)
     --navy  = Piccadilly navy     (structure, links, City theme)
     --green = District green      (correct / done)
     --brown = Bakerloo brown      (gentle "try again")
   Surfaces are warm Portland stone, not pure white.
   ============================================================ */

@import url('fonts.css'); /* self-hosted Cabin + Lexend - no external calls */

:root {
  /* Central-line red - primary action */
  --red:        #E32017;
  --red-deep:   #B5160F;
  --red-soft:   #F6DAD7;

  /* Ink (warm near-black) */
  --ink:          #1C1A17;
  --ink-soft:     #56524A;
  --ink-faint:    #8B867B;

  /* Surfaces - Portland stone */
  --paper:        #F3EFE7;
  --card:         #FBF9F3;
  --line:         #DED7C8;
  --line-strong:  #C7BFAD;

  /* District green - correct / done */
  --green:         #00782A;
  --green-deep:    #005C20;
  --green-soft:    #DFEBDD;
  /* Piccadilly navy - structure, links, City theme */
  --navy:          #003688;
  --navy-deep:     #00235A;
  --navy-soft:     #DCE3F0;
  /* Bakerloo brown - gentle "try again" */
  --brown:        #8E5A1E;
  --brown-deep:   #6B4314;
  --brown-soft:   #EEE4D2;

  /* Theme accents */
  --theme-school: var(--red);
  --theme-city:   var(--navy);

  /* Type - Cabin (Johnston/Underground lineage) + Lexend (reading fluency) */
  --font-display: 'Cabin', 'Gill Sans', system-ui, sans-serif;
  --font-body:    'Lexend', system-ui, sans-serif;

  --t-hero: 2.75rem; --t-h1: 2rem; --t-h2: 1.5rem; --t-h3: 1.2rem;
  --t-body: 1.0625rem; --t-small: 0.875rem; --t-tag: 0.75rem;

  /* Spacing */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  /* Radius - signage panels, not lozenges */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* Elevation - soft, warm, restrained */
  --shadow-sm: 0 1px 2px rgba(28,26,23,0.05);
  --shadow-md: 0 4px 14px rgba(28,26,23,0.08);
  --shadow-lg: 0 12px 34px rgba(28,26,23,0.12);
  --ring: 0 0 0 3px rgba(0,54,136,0.28);

  --maxw: 72rem;
  --readw: 42rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.005em; line-height: 1.12; margin: 0; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--navy-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
@media (min-width: 768px) { .wrap { padding-inline: var(--s-7); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 0.75rem 1.5rem; border-radius: var(--r-md);
  border: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: var(--s-2); transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn--primary { background: var(--red); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--red-deep); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--red); color: var(--red-deep); text-decoration: none; }
.btn--quiet { background: var(--green-soft); color: var(--green-deep); }
.btn--quiet:hover { background: #d2e6d2; text-decoration: none; }
.btn--sm { padding: 0.5rem 1rem; font-size: var(--t-small); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Activity-type tags (plain text, colour-coded rule) ---------- */
.chip {
  display: inline-flex; align-items: center;
  padding: .1rem 0 .1rem .55rem; border-left: 3px solid var(--ink-faint);
  font-size: var(--t-tag); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; color: var(--ink-soft);
  line-height: 1.15;
}
.chip--video  { color: var(--navy-deep);  border-color: var(--navy); }
.chip--vocab  { color: var(--red-deep);    border-color: var(--red); }
.chip--gap    { color: var(--green-deep);  border-color: var(--green); }
.chip--puzzle { color: var(--brown-deep);  border-color: var(--brown); }
.chip--speak  { color: var(--red-deep);    border-color: var(--red-deep); }

.level-pill {
  font-size: var(--t-tag); font-weight: 700; padding: .2rem .55rem;
  border-radius: var(--r-sm); background: transparent; color: var(--navy);
  border: 1.5px solid var(--navy); letter-spacing: .06em;
}

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.card__kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-tag); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--red-deep);
  border-left: 3px solid var(--red); padding: .1rem 0 .1rem .55rem;
}
.card__title { font-size: var(--t-h3); margin: var(--s-3) 0 var(--s-2); font-weight: 600; }
.card__instructions { color: var(--ink-soft); }

/* ---------- Speech bubbles ---------- */
.bubbles { display: flex; flex-direction: column; gap: var(--s-2); }
.bubble {
  align-self: flex-start; max-width: 82%;
  background: var(--red-soft); color: var(--ink);
  padding: .55rem .9rem; border-radius: 12px 12px 12px 3px;
  font-weight: 500;
}
.bubble:nth-child(even) {
  align-self: flex-end; background: var(--navy-soft);
  border-radius: 12px 12px 3px 12px;
}

/* ---------- Embed frame ---------- */
.embed {
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--navy-soft);
  position: relative; aspect-ratio: 16 / 9;
}
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Photo placeholder (drop real London photos here) ---------- */
.photo-slot {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(0,54,136,.07) 0 10px, rgba(0,54,136,0) 10px 20px),
    var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  display: grid; place-items: center; min-height: 160px;
}
.photo-slot__tag {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: var(--t-small); color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: .35rem .6rem; text-align: center;
  max-width: 80%;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Word bank & gap-fill ---------- */
.wordbank {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-4); background: var(--paper);
  border: 1px dashed var(--line); border-radius: var(--r-md);
}
.wordbank__item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .4rem .9rem; font-weight: 500;
  box-shadow: var(--shadow-sm); cursor: grab; user-select: none;
  transition: transform .12s ease, opacity .15s ease, background .15s ease;
}
.wordbank__item:active { cursor: grabbing; }
.wordbank__item.is-dragging { opacity: .4; }
.wordbank__item.is-used { opacity: .35; pointer-events: none; text-decoration: line-through; }
.wordbank__item.is-selected { background: var(--red); color: #fff; border-color: var(--red); }

.blank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 6ch; min-height: 1.9em; padding: 0 .4rem; margin: 0 .1rem;
  border: 2px dashed var(--red); border-radius: var(--r-sm);
  background: var(--red-soft); color: var(--red-deep);
  font-weight: 600; cursor: pointer; vertical-align: middle;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.blank[data-filled] { border-style: solid; background: var(--card); color: var(--ink); }
.blank.is-correct { color: var(--green-deep); border-color: var(--green); background: var(--green-soft); }
.blank.is-retry   { color: var(--brown-deep); border-color: var(--brown); background: var(--brown-soft); }
.blank.is-target  { box-shadow: var(--ring); }

/* ---------- Feedback ---------- */
.feedback {
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  font-weight: 500; display: flex; gap: var(--s-2); align-items: flex-start;
  margin-top: var(--s-4);
}
.feedback[hidden] { display: none; }
.feedback--ok    { background: var(--green-soft);  color: var(--green-deep); }
.feedback--retry { background: var(--brown-soft); color: var(--brown-deep); }

/* ---------- Progress ---------- */
.progress { height: 8px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.progress__bar { height: 100%; width: 0; background: var(--green); border-radius: var(--r-pill); transition: width .4s ease; }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,239,231,0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-4);
  height: 68px;
}
.brand { display: flex; align-items: center; gap: var(--s-3); margin-right: auto; }
.brand:hover { text-decoration: none; }
/* Roundel-inspired transit mark: red ring with english on a navy bar */
.brand__mark {
  width: 46px; height: 46px; border-radius: 50%;
  border: 5px solid var(--red); box-sizing: border-box;
  background: linear-gradient(var(--navy), var(--navy)) center / 100% 14px no-repeat;
  display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: 7px; letter-spacing: 0; line-height: 1;
}
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); line-height: 1.05; }
.brand__sub { font-size: var(--t-tag); color: var(--ink-faint); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.site-header__nav { display: flex; align-items: center; gap: var(--s-4); }
.nav-link { color: var(--ink-soft); font-weight: 600; font-size: var(--t-small); }
.nav-link:hover { color: var(--navy-deep); text-decoration: none; }
@media (max-width: 640px) { .site-header__nav .nav-link { display: none; } }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--s-9); border-top: 1px solid var(--line);
  background: var(--card); padding-block: var(--s-7);
}
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); }
@media (max-width: 700px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.site-footer h4 { font-family: var(--font-body); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: var(--s-3); }
.site-footer p { color: var(--ink-soft); font-size: var(--t-small); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer a { color: var(--ink-soft); font-size: var(--t-small); }
.tool-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.tool-tags span { font-size: var(--t-tag); font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); padding: .25rem .6rem; border-radius: var(--r-sm); }

.footer-contact { margin-top: var(--s-4); }
.footer-contact__label { display: block; font-size: var(--t-small); color: var(--ink-faint); }
.footer-contact__email { display: inline-block; margin-top: var(--s-1); font-size: var(--t-body); font-weight: 600; color: var(--red-deep); border-bottom: 1.5px solid var(--red-soft); }
.footer-contact__email:hover { color: var(--red-deep); border-bottom-color: var(--red); text-decoration: none; }

/* ---------- Motion ---------- */
@keyframes pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Student name modal + control ---------- */
.name-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(28,26,23,0.45); padding: var(--s-4); }
.name-modal__box { background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s-6);
  max-width: 28rem; width: 100%; }
.name-modal__title { font-family: var(--font-display); margin: 0 0 var(--s-2); }
.name-modal__hint { color: var(--ink-soft); font-size: var(--t-small); margin: 0 0 var(--s-4); }
.name-modal__input { width: 100%; box-sizing: border-box; padding: .6rem .8rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 1rem; background: var(--paper); color: var(--ink); }
.name-modal__input:focus { outline: none; box-shadow: var(--ring); border-color: var(--navy); }
.name-modal__actions { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-5); }

.name-control { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4); font-size: var(--t-small); color: var(--ink-soft); }
.name-control__value { font-weight: 700; color: var(--ink); }
.name-control__btn { background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; color: var(--navy); text-decoration: underline; }
.name-control__btn:hover { color: var(--navy-deep); }