/* Hallmark · shape: app screen · genre: playful · theme: brand · redesign: full
 * paper: #F9F7F2 · accent: #2F4A3E (chalkboard green) · highlight: #F2D27A (chalk) · display: Newsreader · body: Figtree
 * nav: kept (the phone shell and its top row) · signature: the three make rows, each with a small copy of the page it prints (worksheet with its memo behind, lesson-plan table, named comments) · states: loading, empty, full, sending
 * axes: light/roman-serif/warm · posture: restrained · surface: absolute (print only) · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the three rows share one weight; the worksheet leads only by order. The ask box is one slim line under them, not the lead */
/* Hallmark · redesign: full · welcome, setup, worksheet chat · signature: Chalky at his chalkboard with the three pages he makes pinned beside him (welcome); in the chats the answers sit right under the question, Chalky once per run of lines · critique: P4 H4 E4 S5 R4 V4 · weakest: H, the welcome text and button are still a plain column */
/* Hallmark · redesign: restyle · whole app · colour roles: chalkboard green is the brand (buttons, your answers, selections, focus, done), chalk yellow marks only, red for errors only, Chalky's grape only around Chalky · neutrals cut from 13 to 7 · critique: P4 H5 E4 S4 R4 V4 · weakest: S, the chat is still one column of bubbles by nature */
/* Hallmark · waive 7b · --color-print is white only inside @media print · printed worksheets go on white paper and toner should not tint it */
/* Hallmark · waive 39b · the three make-something rows are 120 to 132px list rows with a page thumbnail, not toolbar controls · a teacher on an older phone taps the whole row, title and description together */
/* Hallmark · waive 72 · the box is the phone shell, clipping its own scrolling column · the column pads the dashboard 40px at its foot, so no text ever sits on the shell edge */
@import "tailwindcss";
@import "driver.js/dist/driver.css"; /* the first-visit spotlight tour (app/javascript/lib/tour.js), restyled below */

@theme {
  /* Neutrals: seven steps, each one a job. */
  --color-paper: #E9E4DA;        /* behind the phone shell */
  --color-surface: #F9F7F2;      /* the shell, bars, footers */
  --color-white: #FFFEFB;        /* bubbles, fields, cards (bg-white) */
  --color-wash: #F0EBE2;         /* quiet fills: chips, switch track, skeletons, table heads, hover */
  --color-line: #E2DBCF;         /* hairlines and card borders */
  --color-line-strong: #948C80;  /* control borders (3:1 on white) */
  --color-muted: #6B645B;        /* secondary text, placeholders */
  --color-ink: #1F1D1A;          /* text */

  /* Brand: chalkboard green. Buttons, your answers, selections, focus, done. */
  --color-brand: #2F4A3E;
  --color-brand-hover: #243B31;
  --color-brand-tint: #E6EEE8;   /* the suggested answer, and answers under the pointer */
  --color-on-brand: #F9F7F2;     /* text and icons on the brand */

  /* One highlight: chalk yellow. Small marks only, never text. */
  --color-chalk: #F2D27A;
  --color-selection: #F6E4A8;
  --color-edit: #FFF6D9;         /* text being edited on a document */
  --color-edit-hover: #FFFBEA;   /* editable text under the pointer */

  /* Errors only. */
  --color-error: #B3372F;

  /* Chalky's own colour: his glasses, his avatar ring, the frame of his board. Nothing else. */
  --color-grape: #7A5AD8;

  --color-print: #FFFFFF;        /* printed paper only (waive 7b, top of file) */
  --shadow-shell: 0 20px 60px rgb(31 29 26 / 0.12);
  --shadow-knob: 0 1px 3px rgb(31 29 26 / 0.15);
  --shadow-primary: 0 8px 20px rgb(47 74 62 / 0.22);
  --shadow-panel: 0 1px 2px rgb(31 29 26 / 0.05);
  --shadow-page: 0 2px 12px rgb(31 29 26 / 0.1);   /* a document page on screen */
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans: "Figtree", system-ui, sans-serif;
}

html { font-size: 17px; overflow-x: clip; scrollbar-color: var(--color-line) transparent; }
::selection { background: var(--color-selection); color: var(--color-ink); }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  caret-color: var(--color-brand);
}
input::placeholder, textarea::placeholder { color: var(--color-muted); }

@keyframes lkUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes lkPulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-brand) 45%, transparent) } 100% { box-shadow: 0 0 0 18px color-mix(in oklch, var(--color-brand) 0%, transparent) } }
@keyframes lkDot { 0%,80%,100% { opacity: .25; transform: translateY(0) } 40% { opacity: 1; transform: translateY(-3px) } }
@keyframes lkSpin { to { transform: rotate(360deg) } }
/* Chalky (app/javascript/ui/Mascot.jsx) */
@keyframes chBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes chHop { 0%,100% { transform: translateY(0) } 40%,60% { transform: translateY(-12px) } }
@keyframes chTwinkle { 0%,100% { opacity: .2; transform: scale(.6) rotate(45deg) } 50% { opacity: 1; transform: scale(1) rotate(45deg) } }
@keyframes chWave { 0%,100% { transform: rotate(-8deg) } 50% { transform: rotate(14deg) } }
@keyframes chSway { 0%,100% { transform: rotate(-5deg) } 50% { transform: rotate(5deg) } }
@keyframes chThink { 0%,80%,100% { opacity: .25 } 40% { opacity: 1 } }
.lk-up { animation: lkUp .35s ease both; }
/* Moving between learner cards: a barely-there drift, only enough to see the card changed. */
@keyframes lkFromRight { from { opacity: .4; transform: translateX(6px) } to { opacity: 1; transform: none } }
@keyframes lkFromLeft { from { opacity: .4; transform: translateX(-6px) } to { opacity: 1; transform: none } }
.lk-card-next { animation: lkFromRight .18s ease-out both; }
.lk-card-prev { animation: lkFromLeft .18s ease-out both; }
@media (prefers-reduced-motion: reduce) { .lk-card-next, .lk-card-prev { animation: none; } }

/* Tailwind v4 gives buttons the arrow cursor; a teacher's mouse should see they can click. No double-tap zoom delay on taps. */
:where(button, [role="button"], [role="switch"], label[for], summary):not(:disabled) { cursor: pointer; }
:where(button, a, input, textarea, select, [role="button"]) { touch-action: manipulation; }

/* Keyboard focus shows instantly on every control. In the base layer, so a control on the green
   (the side menu) can swap the ring colour with a utility such as focus-visible:outline-on-brand;
   unlayered, this rule would beat every utility and draw a dark ring on dark green. */
@layer base {
  :where(button, a, [tabindex]):focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; transition: none; }
}
/* Text fields show focus through their own border, so the cursor's box doesn't get a second ring. */
:where(input, textarea, select):focus-visible { outline: none; border-color: var(--color-brand); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Printing: only the document pages, A4, memo on its own page. */
@media print {
  /* No page margin, so the browser has nowhere to print its date, title and URL; the page pads itself.
     clone repeats the padding on every printed page when a document runs over more than one. */
  @page { size: A4; margin: 0; }
  @page landscape { size: A4 landscape; margin: 0; }
  .lk-landscape { page: landscape; overflow: visible !important; }
  html, body { background: var(--color-print) !important; }
  body * { visibility: hidden; }
  .lk-print-area, .lk-print-area * { visibility: visible; }
  /* Block, not flex: Chrome ignores forced page breaks between flex items, which let the memo start on the worksheet's last page. */
  .lk-print-area { display: block !important; position: absolute; left: 0; top: 0; width: 100%; gap: 0 !important; }
  [data-page-fit] { zoom: 1 !important; width: auto !important; } /* the on-screen A4 preview prints at full size */
  .lk-page { width: auto !important; }
  .lk-page { box-shadow: none !important; max-width: none !important; padding: 15mm !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .lk-memo { break-before: page; page-break-before: always; }
  .lk-memo h2 { break-after: avoid; page-break-after: avoid; }
  .lk-q { break-inside: avoid; }
  html, body, body * { overflow: visible !important; }
  .h-dvh, .h-full { height: auto !important; }
  [contenteditable] { background: transparent !important; }
}

/* The first-visit tour (driver.js): its popover in the app's own type and colours, buttons big enough for a thumb. */
.driver-popover.lk-tour {
  background: var(--color-surface); color: var(--color-ink); font-family: var(--font-sans);
  border-radius: 20px; padding: 18px 18px 14px; max-width: min(340px, calc(100vw - 32px)); box-shadow: 0 10px 30px rgb(31 29 26 / .18);
}
.driver-popover.lk-tour .driver-popover-title { font-family: var(--font-serif); font-size: 21px; font-weight: 500; line-height: 1.2; }
.driver-popover.lk-tour .driver-popover-description { font-family: var(--font-sans); font-size: 16px; line-height: 1.45; color: var(--color-ink); margin-top: 6px; }
.driver-popover.lk-tour .driver-popover-progress-text { font-family: var(--font-sans); font-size: 14px; color: var(--color-muted); }
.driver-popover.lk-tour .driver-popover-footer { margin-top: 14px; gap: 8px; }
.driver-popover.lk-tour .driver-popover-navigation-btns { gap: 8px; }
.driver-popover.lk-tour .driver-popover-footer button {
  font: 600 15px var(--font-sans); text-shadow: none; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--color-line-strong); background: white; color: var(--color-ink);
}
.driver-popover.lk-tour .driver-popover-footer button.driver-popover-next-btn { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.driver-popover.lk-tour .driver-popover-footer button:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 2px; }
.driver-popover.lk-tour .driver-popover-close-btn { width: 44px; height: 44px; color: var(--color-muted); font-size: 22px; }
.driver-popover.lk-tour .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--color-surface); }
.driver-popover.lk-tour .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--color-surface); }
.driver-popover.lk-tour .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--color-surface); }
.driver-popover.lk-tour .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--color-surface); }
.driver-popover.lk-tour .driver-popover-footer button.lk-tour-skip { border: 0; background: transparent; color: var(--color-muted); padding: 0 6px; text-decoration: underline; text-underline-offset: 4px; margin-right: auto; }