/* The brand (js/brand.js) and the entry screen (js/screens/setup.js): the mark, the wordmark, the opening moment,
   the hero and the first-class steps. Same tokens, easing and durations as app.css and motion.css. */

/* ---------- the mark and the wordmark ---------- */
.logo-mark { flex: none; display: block; overflow: visible; }
.logo-mark .mk-tile { stroke: rgba(12, 32, 26, .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
:root[data-theme="dark"] .logo-mark .mk-tile { stroke: rgba(255, 255, 255, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-mark .mk-tile { stroke: rgba(255, 255, 255, .14); } }
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.brand-word { font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1; white-space: nowrap; }

/* ---------- the opening ----------
   The first frame is the iPhone launch image: the mark alone, its centre 42% down the screen. Then (in a browser tab)
   the chalk writes the letter, the yellow stick drops in, the name is written right to left, the chalk line runs
   under it and the tagline rises. In the installed app the letter is already there and the stick gives one tap.
   .calm (reduced motion, motion switch off): the finished frame, nothing moves. */
.opening { position: fixed; inset: 0; z-index: 90; background: var(--paper); cursor: pointer; transition: opacity var(--t3) var(--ease); }
.opening.out { opacity: 0; pointer-events: none; }
.opening .op-mark { position: absolute; inset-inline: 0; inset-block-start: calc(42% - 56px); inline-size: 112px; block-size: 112px; margin-inline: auto; }
.opening .op-mark .logo-mark { filter: drop-shadow(0 10px 24px rgba(20, 44, 36, .22)); }
:root[data-theme="dark"] .opening .op-mark .logo-mark { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .opening .op-mark .logo-mark { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .28)); } }
.opening .op-text { position: absolute; inset-inline: 0; inset-block-start: calc(42% + 56px + 22px); text-align: center; padding-inline: 16px; }
.opening .op-word { font-family: var(--display); font-weight: 700; font-size: clamp(46px, 12vw, 64px); line-height: 1.1; }
.opening .op-line { display: block; inline-size: min(260px, 66vw); block-size: 28px; margin: 0 auto; overflow: visible; }
.opening .op-line .chalk-line { stroke-width: 4.5; }
.opening .op-tag { color: var(--muted); font-size: 18px; margin-block-start: 6px; }

.opening:not(.calm) .op-word { clip-path: inset(0 0 0 100%); animation: hh-write 800ms var(--ease) 300ms forwards; }
.opening:not(.calm) .op-line path { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: hh-draw 650ms var(--ease) 950ms forwards; }
.opening:not(.calm) .op-tag { opacity: 0; animation: hh-rise 400ms var(--ease) 1400ms forwards; }
.opening:not(.calm):not(.draw) .mk-stick rect { transform-box: fill-box; transform-origin: 50% 100%; animation: hh-tap 420ms var(--ease) 120ms; }
/* in a browser tab: the letter is written first, so everything after it starts 350ms later */
.opening.draw .mk-roof { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: hh-draw 420ms var(--ease) 60ms forwards; }
.opening.draw .mk-leg { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: hh-draw 320ms var(--ease) 400ms forwards; }
.opening.draw .mk-stick rect, .opening.draw .mk-stick path { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: hh-drop 380ms var(--ease) 640ms forwards; }
.opening.draw .op-word { animation-delay: 650ms; }
.opening.draw .op-line path { animation-delay: 1300ms; }
.opening.draw .op-tag { animation-delay: 1700ms; }
@keyframes hh-write { to { clip-path: inset(0 0 0 0); } }
@keyframes hh-draw { to { stroke-dashoffset: 0; } }
@keyframes hh-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hh-tap { 40% { transform: rotate(-9deg); } 75% { transform: rotate(3deg); } }
@keyframes hh-drop { 0% { opacity: 0; transform: translateY(-9px) rotate(-14deg); } 60% { opacity: 1; transform: translateY(1px) rotate(2deg); } 100% { opacity: 1; transform: none; } }

/* ---------- the entry screen ---------- */
.main.entry {
  display: flex; min-block-size: var(--app-h, 100dvh);
  padding-block: calc(40px + env(safe-area-inset-top)) calc(40px + env(safe-area-inset-bottom));
  padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
}
.entry-in { inline-size: 100%; max-inline-size: 1120px; margin: auto; }

/* the hero: the promise beside the board (on a phone the board comes first) */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.hero-copy h1 { font-size: clamp(36px, 4.3vw, 52px); line-height: 1.14; max-inline-size: 12em; text-wrap: balance; }
.hero-copy h1:focus { outline: none; }
.values { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
.values li { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.5; color: var(--muted); }
.values strong { color: var(--ink); font-weight: 700; }
.values .vi { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--board-soft); color: var(--board); margin-block-start: -6px; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 34px; }
.btn.go, .btn.go-2 { min-height: 54px; padding: 0 28px; font-size: 18px; font-weight: 700; }
.btn.go .ic { transition: transform var(--t2) var(--ease); }
.btn.go:hover .ic { transform: translateX(-3px); }
.hero-note { display: flex; align-items: center; gap: 8px; margin-block-start: 18px; font-size: 15px; color: var(--muted); }

/* the board: the brand in chalk, and an example of a teaching day written on it. A ledge with a stick of chalk
   holds it from below (the same stick as the mark). */
.hero-board {
  --b-bg: #23463b; --b-ink: #eef3f0; --b-dim: #b8cbc2;
  position: relative; margin-block-end: 12px; padding: 28px 30px 26px; border-radius: 22px; color: var(--b-ink);
  background-color: var(--b-bg);
  background-image: radial-gradient(120% 80% at 85% 0%, rgba(255, 255, 255, .075), transparent 60%),
    radial-gradient(70% 45% at 12% 96%, rgba(255, 255, 255, .04), transparent 70%);
  border: 1px solid rgba(0, 0, 0, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 0 rgba(0, 0, 0, .1), var(--shadow-2);
}
.hero-board::after {
  content: ""; position: absolute; inset-inline: 22px; inset-block-end: -11px; block-size: 11px; border-radius: 0 0 8px 8px;
  background: linear-gradient(#1b382f, #142b24); box-shadow: 0 6px 14px -6px rgba(10, 30, 24, .5);
}
.hero-board::before {
  content: ""; position: absolute; z-index: 1; inset-inline-end: 64px; inset-block-end: -6px; inline-size: 40px; block-size: 8px;
  border-radius: 3px; background: linear-gradient(#ffffff, #dfe6e2); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
:root[data-theme="dark"] .hero-board { --b-bg: #21392f; border-color: #2f4a3f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-board { --b-bg: #21392f; border-color: #2f4a3f; } }
.hb-brand { display: flex; align-items: center; gap: 16px; }
.hb-brand .logo-mark { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.hb-brand .logo-mark .mk-tile { stroke: rgba(255, 255, 255, .16); }
.hb-name { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1.05; }
.hb-tag { color: var(--b-dim); font-size: 15px; margin-block-start: 6px; text-wrap: balance; }
.hb-day { margin-block-start: 24px; padding-block-start: 18px; border-block-start: 1px dashed rgba(238, 243, 240, .2); }
.hb-date { font-size: 14px; font-weight: 700; color: var(--b-dim); margin-block-end: 10px; }
.hb-day ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hb-day li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "tm who st" "tm what st";
  column-gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .045);
  border-inline-start: 3px solid transparent;
}
.hb-day .tm { grid-area: tm; font-weight: 700; color: var(--b-dim); font-variant-numeric: tabular-nums; padding-block-start: 2px; }
.hb-day .who { grid-area: who; display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--b-dim); }
.hb-day .who i { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; }
/* The board is always dark: the class colors of the dark theme (app.css --k0, --k1). */
.hb-day .k0 { background: #93acd8; } .hb-day .k1 { background: #7cc2b1; }
.hb-day .what { grid-area: what; font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.3; }
.hb-day .st { grid-area: st; align-self: center; font-size: 13px; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: rgba(255, 255, 255, .09); color: var(--b-dim); }
.hb-day li.past .what { color: var(--b-dim); }
.hb-day li.now { background: rgba(233, 195, 91, .1); border-inline-start-color: #e9c35b; }
.hb-day li.now .st { background: #e9c35b; color: #1c2925; }
.hb-prep { display: flex; align-items: center; gap: 8px; margin-block-start: 14px; font-size: 15px; color: var(--b-dim); }

/* the hero comes in when the opening lifts: the copy rises line by line, the board after it, then its rows */
.hero-copy > * { animation: rise var(--t3) var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; } .hero-copy > :nth-child(3) { animation-delay: 120ms; } .hero-copy > :nth-child(4) { animation-delay: 180ms; }
.hero-board { animation: hh-board 520ms var(--ease) 120ms both; }
.hb-day li { animation: rise var(--t3) var(--ease) both; animation-delay: calc(420ms + var(--i, 0) * 90ms); }
.hb-day li.now { animation-name: rise, hh-now; animation-duration: var(--t3), 900ms; animation-delay: calc(420ms + var(--i, 0) * 90ms), 900ms; }
@keyframes hh-board { from { opacity: 0; transform: translateY(16px) scale(.985); } }
@keyframes hh-now { 30% { background: rgba(233, 195, 91, .2); } }
.hero.wait *, .hero.wait { animation-play-state: paused !important; }

/* ---------- the steps of the first class ---------- */
.wiz { max-inline-size: 640px; margin: 0 auto; display: flex; flex-direction: column; min-block-size: calc(var(--app-h, 100dvh) - 80px); }
.wiz > h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.2; }
.wiz > h1:focus { outline: none; }
.wiz > .lead { color: var(--muted); font-size: 18px; margin: 8px 0 30px; }
.wiz-head { display: flex; align-items: center; gap: 14px; margin-block-end: 32px; }
.btn.icon-only { min-width: 46px; padding: 0; }
.wiz-prog { flex: 1; max-inline-size: 200px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wiz-prog span { position: relative; block-size: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wiz-prog span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--board); transform: scaleX(0); transform-origin: 100% 50%; }
.wiz-prog span.done::after { transform: none; }
.wiz-prog span.on::after { animation: hh-fill 500ms var(--ease) 100ms forwards; }
@keyframes hh-fill { to { transform: none; } }
.wiz-of { font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.wiz-head .logo-mark { margin-inline-start: auto; }

.q { display: grid; gap: 8px; margin-block-end: 26px; }
.q .q-opt { font-weight: 400; color: var(--muted); margin-inline-start: 4px; }
.q-size .input { max-inline-size: 200px; }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); }
.kind {
  min-block-size: 46px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font-weight: 700; cursor: pointer; -webkit-touch-callout: none;
  transition: background var(--t2) var(--ease), color var(--t2) var(--ease), box-shadow var(--t2) var(--ease), transform var(--t1) var(--ease);
}
.kind:hover { color: var(--ink); }
.kind:active { transform: scale(.97); }
.kind[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-1), var(--hi); }
.hint { font-size: 15px; color: var(--muted); }
.grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.grade {
  min-block-size: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 19px; box-shadow: var(--shadow-1), var(--hi); -webkit-touch-callout: none;
  transition: background var(--t2) var(--ease), border-color var(--t2) var(--ease), color var(--t2) var(--ease), transform var(--t1) var(--ease);
}
.grade:hover { border-color: var(--board); }
.grade:active { transform: scale(.94); }
.grade[aria-pressed="true"] { background: var(--board); border-color: var(--board); color: var(--board-ink); animation: pop var(--t2) var(--ease); }
.hh-err { display: flex; align-items: center; gap: 6px; color: var(--danger); font-weight: 700; font-size: 15px; animation: rise var(--t2) var(--ease); }
.hh-err[hidden] { display: none; }
.shake { animation: shake .32s var(--ease); }

.subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.subj {
  display: flex; align-items: center; gap: 12px; min-block-size: 58px; padding: 8px 14px; text-align: start;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--shadow-1), var(--hi);
  cursor: pointer; -webkit-touch-callout: none;
  transition: background var(--t2) var(--ease), border-color var(--t2) var(--ease), transform var(--t1) var(--ease);
}
.subj:hover { border-color: color-mix(in srgb, var(--board) 50%, var(--line)); }
.subj:active { transform: scale(.98); }
.subj.new { animation: rise var(--t3) var(--ease); }
.subj .chk { flex: none; display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 7px; border: 1.5px solid var(--faint); transition: background var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.subj .chk .ic { opacity: 0; transform: scale(.5); transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease); stroke-width: 2.4; }
.subj .nm { flex: 1; font-weight: 700; }
.subj .tag { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.subj .tag.cur { color: var(--board); background: var(--board-soft); padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.subj[aria-pressed="true"] { border-color: var(--board); background: var(--board-soft); }
.subj[aria-pressed="true"] .chk { background: var(--board); border-color: var(--board); color: var(--board-ink); }
.subj[aria-pressed="true"] .chk .ic { opacity: 1; transform: none; }
.subj[aria-pressed="true"] .tag.cur { background: var(--surface-2); }
.hh-add { display: flex; gap: 8px; margin-block-start: 12px; }
.hh-add .input { flex: 1; min-inline-size: 0; }
.hh-add + .hh-err { margin-block-start: 12px; }
.note { display: flex; gap: 10px; align-items: flex-start; margin-block-start: 18px; font-size: 15px; color: var(--muted); }
.note .ic { margin-block-start: 3px; }
.where-q { margin-block-start: 36px; }
.where-q h2 { font-size: 24px; margin-block-end: 12px; }

.wiz-foot {
  position: sticky; inset-block-end: 0; z-index: 2; display: flex; justify-content: flex-end;
  margin-block-start: auto; padding-block: 28px calc(4px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 72%, transparent);
}
.wiz-foot .btn { min-width: 200px; }

/* the class is ready */
.wiz.rm { justify-content: center; }
.wiz .ready-moment { padding: 24px 0; }
.wiz .ready-moment h1 { margin-block-start: 12px; font-size: clamp(32px, 4vw, 42px); }
.ready-moment .rm-lead { color: var(--muted); font-size: 19px; margin: 10px 0 4px; }
.ready-moment .rm-line { color: var(--muted); margin-block-start: 6px; }
.ready-moment .rm-next { color: var(--ink); font-weight: 600; margin: 22px 0 18px; }

/* a step comes in from the side it is in: the next one from the left (Hebrew reads right to left) */
.wiz.in-fwd > :not(.wiz-head), .wiz.in-back > :not(.wiz-head) { animation: hh-step-fwd var(--t3) var(--ease) both; }
.wiz.in-back > :not(.wiz-head) { animation-name: hh-step-back; }
.wiz.in-fwd > :nth-child(3), .wiz.in-back > :nth-child(3) { animation-delay: 30ms; }
.wiz.in-fwd > :nth-child(4), .wiz.in-back > :nth-child(4) { animation-delay: 60ms; }
.wiz.in-fwd > :nth-child(5), .wiz.in-back > :nth-child(5) { animation-delay: 90ms; }
.wiz.in-fwd > :nth-child(n+6), .wiz.in-back > :nth-child(n+6) { animation-delay: 120ms; }
@keyframes hh-step-fwd { from { opacity: 0; transform: translateX(-28px); } }
@keyframes hh-step-back { from { opacity: 0; transform: translateX(28px); } }

/* wide screens: the steps sit at the top and the button follows the content */
@media (min-width: 861px) {
  .entry-in:has(.wiz:not(.rm)) { margin-block-start: 0; }
  .wiz:not(.rm) { min-block-size: 0; }
  .wiz-foot { position: static; margin-block-start: 36px; padding-block: 24px 0; background: none; border-block-start: 1px solid var(--line); }
}

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .main.entry { padding-block: calc(16px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-bottom)); padding-inline: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .entry-in { margin-block: 0; }
  .hero { grid-template-columns: 1fr; gap: 30px; }
  .hero-board { order: -1; padding: 20px 18px 18px; border-radius: 18px; }
  .hb-name { font-size: 30px; }
  .hb-tag { font-size: 14px; }
  .hb-brand { gap: 14px; }
  .hb-day { margin-block-start: 18px; padding-block-start: 14px; }
  .hb-day li { padding: 8px 12px; grid-template-columns: 46px minmax(0, 1fr) auto; }
  .hb-day li:nth-child(3) { display: none; }
  .hb-day .what { font-size: 17px; }
  .hero-copy h1 { font-size: 31px; }
  .values { margin-block-start: 20px; gap: 12px; }
  .values li { font-size: 16px; }
  .values .vi { inline-size: 36px; block-size: 36px; }
  .hero-acts { margin-block-start: 26px; flex-direction: column; }
  .hero-acts .btn { inline-size: 100%; }
  .hero-note { justify-content: center; }
  .wiz { min-block-size: calc(var(--app-h, 100dvh) - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .wiz-head { margin-block-end: 22px; }
  .wiz > .lead { font-size: 16px; margin-block-end: 24px; }
  .subjects { grid-template-columns: 1fr; }
  .wiz-foot .btn { inline-size: 100%; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hb-prep, .hb-tag { display: none; }
}