/* ============================================================
   AI AD FILM Academy — application styles
   Imports tokens.css and defines no colour, font or spacing of its own.
   Every value below is a var() from the identity (PRD 8.1).
   Mobile first: the student screens are read on a phone (PRD 8.2).
   ============================================================ */

@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box }

html { direction: rtl }

body {
  margin: 0;
  background: var(--ink-800);
  color: var(--text-hi);
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}

/* Figures, dates, timecodes and tool names are set in mono (PRD 8.1). */
.mono, time, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums }

a { color: var(--accent); text-decoration: none }
a:hover { color: var(--accent-soft) }

h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 var(--s3) }
h1 { font-size: var(--fs-h3); font-weight: 800 }
h2 { font-size: var(--fs-lead); font-weight: 700 }
h3 { font-size: var(--fs-body); font-weight: 700 }
p  { margin: 0 0 var(--s3) }

img, svg { max-width: 100%; object-fit: contain }

/* Focus is visible everywhere — keyboard users are not a special case. */
:focus-visible {
  outline: none;
  box-shadow: var(--e-focus);
  border-radius: var(--r-chip);
}

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: var(--s2);
  background: var(--ink-600); color: var(--text-hi);
  padding: var(--s2) var(--s4); border-radius: var(--r-chip);
}
.skip-link:focus { inset-inline-start: var(--s2); z-index: 20 }

/* ---------------------------------------------------------- layout ------- */

.wrap { width: 100%; max-width: 880px; margin: 0 auto; padding: var(--s4) }
.wrap-wide { max-width: 1280px }

.site-header {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-500);
  flex-wrap: wrap;
}
.site-header .logo { height: 34px; width: auto; flex: 0 0 auto }
.site-header nav { display: flex; gap: var(--s3); flex-wrap: wrap; min-width: 0 }
.site-header nav a { color: var(--text-mid); font-size: var(--fs-small) }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--text-hi) }
.site-header .spacer { flex: 1 1 auto; min-width: 0 }
.site-header .who { color: var(--text-low); font-size: var(--fs-micro) }

/* ---------------------------------------------------------- surfaces ----- */

.card {
  background: var(--ink-700);
  border: 1px solid var(--ink-500);
  border-radius: var(--r-card);
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.panel {
  background: var(--ink-700);
  border: 1px solid var(--ink-500);
  border-radius: var(--r-panel);
  padding: var(--s5);
  margin-bottom: var(--s5);
}
/* Elevation on dark is a lighter border, never a drop shadow (PRD 8.1). */
.card-raised { background: var(--ink-600); border-color: var(--ink-400) }

.card-title { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap }
.muted { color: var(--text-mid) }
.dim   { color: var(--text-low); font-size: var(--fs-micro) }

.grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr) }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

.stack > * + * { margin-top: var(--s3) }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; min-width: 0 }

/* ---------------------------------------------------------- the banner --- */

/* The one question the dashboard answers: what do I do now (PRD 5.2). */
.now-banner {
  background: var(--ink-600);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-panel);
  padding: var(--s5);
  margin-bottom: var(--s5);
}
.now-banner .kicker {
  color: var(--accent);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: var(--s2);
}
.now-banner h2 { font-size: var(--fs-h3); margin-bottom: var(--s2) }
.now-banner .when { color: var(--text-mid); font-size: var(--fs-small) }

/* ---------------------------------------------------------- progress ----- */

.level-bar { margin-bottom: var(--s5) }
.level-track {
  display: flex; gap: var(--s1); height: 8px; margin: var(--s2) 0;
}
.level-seg {
  flex: 1 1 0; min-width: 0; border-radius: var(--r-pill);
  background: var(--ink-500);
}
.level-seg.done { background: var(--accent) }
.level-seg.current { background: var(--accent-soft) }

/* ---------------------------------------------------------- states ------- */

.chip {
  display: inline-block;
  padding: 2px var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  border: 1px solid var(--ink-400);
  color: var(--text-mid);
  background: var(--ink-600);
  white-space: nowrap;
}
/* State colour is for state only, never decoration (PRD 8.1). */
.chip-ok      { color: var(--ok);     border-color: var(--ok) }
.chip-warn    { color: var(--warn);   border-color: var(--warn) }
.chip-err     { color: var(--err);    border-color: var(--err) }
.chip-info    { color: var(--info);   border-color: var(--info) }
.chip-accent  { color: var(--accent); border-color: var(--accent-line) }

/* ---------------------------------------------------------- task list ---- */

.task {
  display: block;
  background: var(--ink-700);
  border: 1px solid var(--ink-500);
  border-radius: var(--r-card);
  padding: var(--s4);
  margin-bottom: var(--s3);
  color: var(--text-hi);
}
a.task:hover { background: var(--ink-600); border-color: var(--ink-400); color: var(--text-hi) }
.task.is-locked { opacity: .55 }
.task.is-open   { border-color: var(--accent-line) }
.task h3 { margin-bottom: var(--s2) }
.task .meta { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center }

/* ---------------------------------------------------------- criteria ----- */

/* Acceptance criteria are a vertical list, never a table (PRD 8.1). */
.criteria { list-style: none; padding: 0; margin: 0 }
.criteria li {
  position: relative;
  padding-inline-start: var(--s5);
  margin-bottom: var(--s2);
  color: var(--text-mid);
}
.criteria li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 11px;
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--accent);
}
.criteria-check li { padding-inline-start: 0 }
.criteria-check li::before { content: none }
.criteria-check label { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer }

.driving-question {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--text-hi);
  margin-bottom: var(--s4);
}
@media (min-width: 720px) { .driving-question { font-size: var(--fs-h2) } }

/* ---------------------------------------------------------- lock notice -- */

/* A written sentence, never a silent padlock icon (PRD 5.4). */
.lock-note {
  background: var(--ink-600);
  border: 1px dashed var(--ink-400);
  border-radius: var(--r-card);
  padding: var(--s4);
  color: var(--text-mid);
}

/* ---------------------------------------------------------- notices ------ */

.notice {
  border: 1px solid var(--ink-400);
  border-inline-start-width: 3px;
  border-radius: var(--r-chip);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  background: var(--ink-600);
}
.notice-ok   { border-inline-start-color: var(--ok) }
.notice-warn { border-inline-start-color: var(--warn) }
.notice-err  { border-inline-start-color: var(--err) }
.notice-info { border-inline-start-color: var(--info) }

/* ---------------------------------------------------------- forms -------- */

label { display: block; margin-bottom: var(--s1); color: var(--text-mid); font-size: var(--fs-micro) }

input[type="text"], input[type="password"], input[type="url"], input[type="date"],
input[type="datetime-local"], input[type="number"], select, textarea {
  width: 100%;
  background: var(--ink-800);
  color: var(--text-hi);
  border: 1px solid var(--ink-400);
  border-radius: var(--r-chip);
  padding: var(--s3);
  font-family: var(--font);
  font-size: var(--fs-small);
  min-width: 0;
}
input[type="date"], input[type="datetime-local"], input[type="number"] { font-family: var(--font-mono) }
textarea { min-height: 110px; line-height: var(--lh-body); resize: vertical }
select { appearance: none }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: var(--e-focus);
}

.field { margin-bottom: var(--s4) }
.field-hint { color: var(--text-low); font-size: var(--fs-micro); margin-top: var(--s1) }

.check { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3) }
.check input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent) }
.check label { margin: 0; color: var(--text-hi); font-size: var(--fs-small) }

.btn {
  display: inline-block;
  background: var(--ink-600);
  color: var(--text-hi);
  border: 1px solid var(--ink-400);
  border-radius: var(--r-chip);
  padding: var(--s3) var(--s5);
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  /* 44px minimum touch target — this is a phone product */
  min-height: 44px;
  transition: background var(--t-ui), border-color var(--t-ui);
}
.btn:hover { background: var(--ink-500); color: var(--text-hi) }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--ink-900); font-weight: 700 }
.btn-accent:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink-900) }
.btn-quiet { background: transparent }
.btn-danger { border-color: var(--err); color: var(--err) }
.btn-danger:hover { background: var(--ink-600); color: var(--err) }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn-block { display: block; width: 100% }

/* ---------------------------------------------------------- misc --------- */

.divider { height: 1px; background: var(--ink-500); border: 0; margin: var(--s5) 0 }

details.collapse > summary {
  cursor: pointer;
  color: var(--text-mid);
  padding: var(--s3) 0;
  list-style: none;
}
details.collapse > summary::-webkit-details-marker { display: none }
details.collapse > summary::before { content: "▾ "; color: var(--accent) }
details.collapse[open] > summary::before { content: "▴ " }

.empty {
  color: var(--text-low);
  text-align: center;
  padding: var(--s7) var(--s4);
}

.login-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4);
  background: var(--ink-900);
}
.login-card { width: 100%; max-width: 380px }
.login-card .logo { display: block; margin: 0 auto var(--s6); height: 56px; width: auto }

/* The attendance tally on a parent report (PRD 5.22). Present, absent and
   excused are state, which is the one thing tokens.css allows those colours
   for. */
.attend-tally {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}