/* =============================================================================
   Curriculum Crosswalk — stylesheet

   Plain CSS, no build step and no preprocessor: what is here is what ships.
   Ordered the way the page is read — tokens, base, shell, controls, results,
   then the two alternate presentations (narrow screens, then print).

   Two conventions worth knowing before editing:

   1. Colour only ever comes from a token in :root. If you need a new shade,
      add it there rather than inlining a hex, so contrast stays checkable in
      one place.
   2. The print block at the bottom is a real deliverable, not an afterthought.
      A facilitator prints the plan and writes on it. Anything you add to the
      screen layout should be considered there too.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Design tokens

   Brand palette sampled from the Technovation covers. The lime is genuinely
   light — it cannot carry text on white — so it is used as fill and highlight
   with indigo on top, and --lime-deep exists for the times we need lime-ish
   text that still passes contrast.
   -------------------------------------------------------------------------- */

:root{
  --indigo:#1D1349;         /* primary: headings, active states, ink on lime */
  --indigo-600:#3A2E72;     /* the hover step up from --indigo */
  --muted:#5F5980;          /* body text and secondary labels */

  --lime:#D8E583;           /* accent fill only — too light for text on white */
  --lime-tint:#F2F6DC;      /* the wash behind hovered and locked rows */
  --lime-deep:#5A6912;      /* darkened until it clears 4.5:1 on white AND on the tint */

  --paper:#Fbfaf5;          /* page ground: warm off-white, not pure #fff */
  --card:#FFFFFF;           /* raised surfaces sit brighter than the page */

  --line:#E7E4EF;           /* default border */
  --line-soft:#F0EEF6;      /* lighter divider, used between table rows */

  --r:12px;                 /* the one corner radius for cards and panels */
  --r-sm:6px;               /* the tighter radius, for pills inside a row */

  --cream:#Fbfaf5;          /* the row hover wash: warm, and quieter than lime */

  /* The form's blueprint accent. Blue marks the two decisions that reshape the
     plan - how long the season is, and which curriculum - against indigo for
     the rest. 6.98:1 on white, both as ink and as a fill. */
  --blue:#0038FF;
  --lime-hover:#C9D96F;      /* the lime pill, one step down, on hover */

  --ink:#0a0a0a;            /* body copy: near-black, not the indigo-grey */

  --warn-ink:#d90429;       /* the overage pill's text */
  --warn-bg:#FDECEF;        /* and its wash, kept light enough for 4.5:1 */

  /* The overage note. Text only — no fills — so it needs to hold up on
     white, where it measures 5.25:1. */
  --danger:#d90429;


  --shadow-sm: 0 2px 8px rgba(24, 21, 58, 0.04);
  --shadow-md: 0 8px 24px rgba(24, 21, 58, 0.06);
}


/* -----------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*{
  box-sizing:border-box;
}

/* The hidden attribute is how app.js collapses parts of the sentence, but the
   browser's [hidden]{display:none} is a UA rule and loses to any author
   display declaration — .sub-group{display:inline-flex} silently beat it.
   This makes the attribute mean what it says, everywhere. */
[hidden]{
  display:none !important;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#Fff;
  color:var(--ink);
  font:400 15px/1.6 Manrope,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Castoro for headings, Manrope for everything else.
   Castoro ships one weight, 400. The browser default for h1-h3 is bold, which
   it would have to synthesise - so the weight is declared here instead. Small
   uppercase labels stay on Manrope: a 10px letterspaced serif is neither
   readable nor available in the weight those labels need. */
h1,h2,h3{
  font-family:Castoro,Georgia,serif;
  font-weight:400;
  color:var(--indigo);
  margin:0;
  line-height:1.15;
}

/* Numbers that should line up in columns rather than shuffle as they change. */
.mono{
  font-variant-numeric:tabular-nums;
}

/* One focus ring for the whole page, so keyboard users get a consistent target. */
:focus-visible{
  outline:2.5px solid var(--indigo);
  outline-offset:2px;
  border-radius:4px;
}

@media(prefers-reduced-motion:reduce){
  *{
    animation:none !important;
    transition:none !important;
  }

  /* A ring that cannot turn reads as broken rather than busy, so it goes and
     the wording carries the wait on its own. */
  .spinner{
    display:none;
  }
}


/* -----------------------------------------------------------------------------
   3. Shell — page frame and header
   -------------------------------------------------------------------------- */

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 96px;
}

/* White rather than the page ground: with the square mark gone the wordmark
   needs its own surface. It sits outside .wrap so the bar runs edge to edge,
   and .brandmark repeats the page's own max-width so the wordmark still lines
   up with the columns below it. */
header{
  background:#fff;
  padding:22px 0;
  margin-bottom:28px;
}

.brandmark{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:12px;
}

/* Fluid between 30px and 46px so the title never wraps awkwardly on the way.
   The word "Technovation" is the wordmark SVG rather than type, so this is a
   flex row: the mark is sized in em and scales with the clamp alongside it.
   Weight 400 because Castoro ships only that - 700 here would be synthesised. */
.header-title{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.26em;
  font-size:clamp(30px,4.4vw,46px);
  font-weight:400;
  letter-spacing:-.025em;
}

/* viewBox is 1920x219, so height drives the width. Sized against the cap
   height of the italic beside it rather than the full em box. */
/* The SVG carries no fill, so it paints black - invisible on the bar. Inverting
   it is what turns it white; it is single-colour artwork, so nothing else in
   the file is affected. Set a fill in the SVG instead if it ever gains colour. */
.header-title .wordmark{
  height:.44em;
  width:auto;
  display:block;
  align-self:center;
}

/* The greeting. Centred and above the form: it names the action rather than
   the tool, so it belongs with the thing it introduces rather than in the bar,
   where it would compete with the wordmark for the same job. */
.greeting{
  text-align:center;
  margin:0 0 28px;
}

.greeting h1{
  margin:0 0 10px;
  font:400 2.5rem/1.25 Castoro,Georgia,serif;
  color:var(--indigo);
}

/* A highlight block rather than italics: the lime is a marker laid over the
   one word the facilitator is here to act on. */
.greeting h1 em{
  font-style:normal;
  background:#a7d3f0;
  padding:0 10px;
  border-radius:4px;
}

.greeting p{
  margin:0;
  font-size:1.05rem;
  color:var(--muted);
}

/* The submission deadline: a pill, because it is a fixed fact rather than
   something the facilitator controls. */
.deadline{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  padding:7px 14px 7px 12px;
  border-radius:99px;
  background:#d8e582;
  color:var(--indigo);
  font-size:16px;
  font-weight:500;
}

/* One uppercase string, not a label plus a chip: it reads as a single stated
   fact rather than two things sharing a pill. */
.deadline{
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:600;
  font-size:14px;
}

.layout{
  display:block;
}


/* -----------------------------------------------------------------------------
   4. Controls — the sentence card

   The form reads as a sentence a facilitator completes about their group,
   rather than a stack of labelled fields. Every value is a real <select> or
   <input>, so nothing is lost for keyboard or screen-reader users — it is
   still a form, just one that also reads as prose.

   Dark pills: a control shows only its chosen value, so a filled indigo pill
   is "your answer" and the surrounding text is the question. Values that are
   fixed rather than chosen render as outline pills (.static-text), which look
   related but clearly are not interactive.
   -------------------------------------------------------------------------- */

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px 32px;
  margin-bottom:28px;
}

/* The sentence card is a page of prose, not a form: cream on cream so it
   barely separates from the paper, a hairline edge, and a wide diffuse shadow
   doing the lifting instead of a border. */
.panel.sentence{
  background:var(--cream);
  border:1px solid rgba(29,19,73,.08);
  border-radius:24px;
  padding:40px 50px;
  box-shadow:0 12px 36px rgba(29,19,73,.05);
}



/* line-height carries the pills: they are taller than the text around them,
   so wrapped lines need the room or the rows collide. */
/* Normal inline flow rather than a flex row: the pills are punctuation inside
   a sentence, so the text has to wrap around them the way prose does. The tall
   line-height is what stops the rows colliding once pills sit in the run. */
.clause{
  margin:0;
  font:400 1.3rem/2.15 Castoro,Georgia,serif;
  color:var(--indigo);
  line-height: 2.25;
}

/* The second clause is the one Core collapses, so it is set apart. */


/* The closing full stop. A bare "." after the span is its own flex item, so
   the row gap opens a space in front of it — the negative margin cancels
   exactly that gap and closes the sentence properly. */
.clause .stop{
  margin-left:-7px;
}

/* Keeps "with App Inventor" together when the sentence wraps, instead of
   stranding the preposition at the end of a line. */
/* Inline, so the clause it holds keeps flowing with the sentence around it. */
.sub-group{
  display:inline;
}


/* --- The pills ---------------------------------------------------------- */

.clause select,
.clause input{
  font-family:Manrope,system-ui,sans-serif;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  appearance:none;
  background-color:var(--card);
  color:var(--indigo);
  border:1px solid var(--line);
  border-radius:99px;
  padding:4px 32px 4px 16px;
  margin:0 3px;
  vertical-align:baseline;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:border-color .2s ease,background-color .2s ease;
}

/* Numbers are typed rather than picked, so no chevron and no room for one. */
/* Typed rather than picked, so they read as blanks in the sentence: pale fill,
   dashed edge, indigo text — the opposite of the solid pills either side.
   accent-color is the standards-based lever for the spin arrows. */
.clause input{
  width:70px;
  padding:5px 12px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  background-color:transparent;

  border:1.5px dashed;
  box-shadow:none;
  font-weight:600;
  /* The shared pill rule sets appearance:none, which drops the spinner
     entirely in Firefox. The fill and border above still win, so restoring
     the native widget only brings the arrows back. */
  appearance:auto;
}

/* Chrome and Safari ship the spinner at opacity:0 and fade it in on hover.
   Pin it visible so the field advertises that it steps. */
.clause input::-webkit-inner-spin-button,
.clause input::-webkit-outer-spin-button{
  opacity:1;
}

/* The dropdown the browser opens is the one part of a select we do not own:
   on macOS it is a native menu that ignores font, padding and colour. Two
   things help without replacing the control and its keyboard behaviour.
   base-select opts into the styleable picker where it exists (Chromium today)
   and is ignored everywhere else; color-scheme keeps that native menu light,
   so a viewer in dark mode does not get a dark popup under light pills. */
.clause select{
  color-scheme:light;
}

.clause select,
.clause select::picker(select){
  appearance:base-select;
}

/* base-select supplies its own arrow. We already draw one as a background
   image, so this suppresses the duplicate rather than dropping ours - the
   chevron has to stay for every browser that never reaches this rule. */
.clause select::picker-icon{
  display:none;
}

/* The picker itself, once it is ours to style: the pill's own surface and
   radius, and the sans face the closed control uses. */
.clause select::picker(select){
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px;
  font-family:Manrope,system-ui,sans-serif;
  font-size:14px;
  box-shadow:0 12px 36px rgba(29,19,73,.12);
}

.clause select option{
  padding:7px 12px;
  border-radius:9px;
  color:var(--indigo);
}

.clause select option:checked,
.clause select option:hover{
  background:var(--lime-tint);
}

/* appearance:none drops the native arrow, so the chevron is supplied as an
   inline SVG data URI — white, to sit on the indigo pill. */
.clause select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231D1349' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

/* Hover darkens the edge and nothing else. At this size a filling pill pulled
   the eye off the sentence it is part of. */
.clause select:hover,
.clause input:hover{
  border-color:var(--indigo);
}

.clause select.mode:hover{
  background-color:var(--lime-hover);
  border-color:var(--lime-hover);
}

/* outline-offset leaves a gap of the card behind the pill, so the site's
   usual indigo ring stays visible even against an indigo fill. */
.clause select:focus-visible,
.clause input:focus-visible{
  outline:2.5px solid var(--blue);
  outline-offset:2px;
}

/* The one decision that changes what the rest of the sentence means, so it is
   the one pill carrying a fill. */
.clause select.mode{
  background-color:var(--lime);
  border-color:var(--lime);
  color:var(--indigo);
  font-weight:600;
  box-shadow:none;
}

/* The Core explainer. It is part of the sentence, not a note about it, so it
   inherits the clause's size and colour and reads continuously with "We will
   follow". The only job here is letting it shrink and wrap in the flex row
   rather than pushing the clause wider. */
.aside{
  flex:0 1 auto;
}

/* A value the facilitator did not choose: 8-12 only builds mobile, so it is
   stated rather than offered. Outline, muted, no pointer. */
.static-text{
  border:1px solid var(--line);
  border-radius:99px;
  padding:5px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--muted);
}


/* -----------------------------------------------------------------------------
   5. Engine notes
   -------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   6. The summary line

   One sentence where there used to be three stacked blocks — a banner, a
   count line, and a list of notes. Weekly homework time is the only figure a
   facilitator can act on; the rest followed from what they had already chosen.

   Castoro rather than Manrope: this is the one piece of prose on the page that
   is a finding rather than an instruction, and the heading face marks it.
   -------------------------------------------------------------------------- */

/* Screen-reader-only. Used for column headings whose cells carry no text. */
.sr{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.lede{
  margin:0 0 20px;
  font:400 18px/1.4 Castoro,Georgia,serif;
  color:var(--indigo);
  max-width:60ch;
}

.lede strong{
  font-weight:600;
}

/* Heavy: the figure inverts to a solid chip. The only escalation on the page,
   so it has to be unmistakable without a second colour. */
.lede.heavy strong{
  color:#fff;
  background:var(--indigo);
  padding:2px 7px;
  border-radius:4px;
}

/* The overrun banner. Same shape as the summary sentence, in the red the
   table already uses for the per-week note, so the two obviously refer to
   the same thing — this one just says how widespread it is. */
/* No 60ch measure here. The sentence is a single instruction and the wrap
   landed mid-clause, which read as two half-thoughts. */
.lede.over-note{
  margin-top:-8px;
  max-width:none;
}

.lede.over-note strong{
  color:var(--danger);
  font-weight:600;
}


/* -----------------------------------------------------------------------------
   6b. Loading

   The live endpoint takes about five seconds, so the first paint has to say
   something. Shaped like the plan card that replaces it — same border, same
   radius — so the layout does not jump when the plan arrives.
   -------------------------------------------------------------------------- */

.loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:13px;
  padding:64px 24px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--card);
}

.spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--indigo);
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(1turn); }
}

.loading h2{
  font-size:17px;
}

.loading p{
  margin:0;
  max-width:44ch;
  font-size:13.5px;
  color:var(--muted);
}


/* -----------------------------------------------------------------------------
   7. The plan card

   One bordered card holding a header, the week table, and a sticky footer.
   Columns stay split — In class and At home side by side — so a facilitator
   can scan down the At home column and see the load building. Under 768px
   every cell goes full width and the row becomes a stacked card.
   -------------------------------------------------------------------------- */

.plan-card{
  border-radius:16px;
  border:1px solid rgba(29,19,73,.08);
  box-shadow: var(--shadow-md);
  background:var(--card);
  margin-top:4px;
  /* No overflow:hidden — it would break position:sticky on the footer. */
}

.plan-head{
  background:#1d1349;
  color:#fff;
  padding:20px 24px;
  text-align:center;
  border-radius:10px 10px 0 0;
}

.plan-head h2{
  margin:0;
  color:#fff;
  font-size:30px;
  font-weight:500;
}

/* Reuses the .deadline pill from the page header so the same fact is stated
   the same way in both places. Its indigo fill matches the header behind it,
   so what reads is the lime date chip. */
.plan-head .deadline{
  margin-top:11px;
}

/* Only appears for 8-12 on AI in Action. Sits under the deadline rather than
   in the plan itself: it is a caution about the choice, not about a week. */
.plan-head .head-note{
  margin:12px auto 0;
  max-width:56ch;
  font-size:12.5px;
  line-height:1.5;
  color:#E6E2F2;
}


/* --- The table ------------------------------------------------------------ */

table.plan{
  width:100%;
  border-collapse:collapse;
  text-align:left;
}

table.plan thead th{
  background:var(--card);
  color:var(--muted);
  font:600 11px/1.4 Manrope,system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:11px 20px;
  border-bottom:1px solid var(--line);
}

table.plan tr{
  border-bottom:1px solid var(--line-soft);
}

/* Lesson rows only. A unit band is a row too, but it is a label rather than
   something you act on, so it does not light up under the cursor. */
table.plan tbody tr:not(:has(th.phase)):hover{
  background:var(--cream);
}

table.plan td{
  padding:20px 20px;
  vertical-align:top;
}

/* Unit bands. The heading is a <th scope="rowgroup"> spanning the row, so the
   grouping is announced rather than only drawn. */
th.phase{
  background:var(--lime-tint);
  color:var(--indigo);
  font:600 11px/1.4 Manrope,system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:10px 20px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:left;
}

/* Spare weeks handed back as build and feedback time. */
tr.slack td{
  color:var(--muted);
}


/* --- Column 1: week number and total time --------------------------------- */

.c-wk{
  width:104px;
  text-align:center;
  background:var(--paper);
  border-right:1px solid var(--line-soft);
}

.c-wk b{
  display:block;
  font:400 2.7rem/1 Castoro,Georgia,serif;
  color:var(--indigo);
  font-variant-numeric:tabular-nums;
  margin-bottom:4px;
}

.c-wk .wtime{
  display:block;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}


/* --- Over-capacity weeks -------------------------------------------------- */

/* No row or week-cell fill: a whole pink row for a lesson that is simply
   longer than one session reads as an error, when it is really a note. The
   red line under the lessons carries it, and on white it clears 4.5:1. */
.overage{
  display:inline-block;
  margin-top:8px;
  padding:4px 10px;
  border-radius:var(--r-sm);
  background:var(--warn-bg);
  color:var(--warn-ink);
  font-size:.75rem;
  font-weight:600;
}


/* --- Column 4: the done tick ---------------------------------------------- */

.c-done{
  width:76px;
  text-align:center;
  vertical-align:middle;
  border-left:1px dashed var(--line);
  border-radius: 6px;
}

/* Drawn rather than native: a native checkbox renders its own box and ignores
   border-radius, so the corners only round once we own the painting. */
.c-done input{
  appearance:none;
  -webkit-appearance:none;
  width:22px;
  height:22px;
  border:1.5px solid var(--line);
  border-radius:6px;
  background:var(--card);
  cursor:pointer;
  display:grid;
  place-content:center;
  transition:background .15s ease, border-color .15s ease;
}

.c-done input:hover{
  border-color:var(--indigo);
}

.c-done input:checked{
  background:var(--indigo);
  border-color:var(--indigo);
}

/* The tick itself: two borders of an empty box, rotated. */
.c-done input:checked::after{
  content:"";
  width:10px;
  height:5px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-2px);
}

/* Work-time weeks hold no lessons, so there is nothing to mark done. */
.c-done .none{
  color:var(--line);
}


/* --- Lesson items inside a cell ------------------------------------------- */

.c-home{
  width:30%;
}

.li{
  display:flex;
  gap:10px;
  font-size:15px;
  padding:3px 0;
  align-items:baseline;
}

/* The duration, held to a fixed width so titles start on a common left edge. */
.li .t{
  font-size:11.5px;
  color:var(--muted);
  min-width:44px;
  padding-top:2px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Placeholder text: an empty homework cell, or a work-time week. */
.li.muted{
  color:var(--muted);
  font-size:13px;
}

/* A quiet grey rule rather than a lime one: at this size the lime read as a
   highlight across the whole column. It darkens to indigo on hover, so the
   affordance arrives on approach instead of shouting from rest. */
.li a{
  color:var(--indigo);
  text-decoration:none;
  display:inline;
  padding-bottom:2px;
  border-bottom:1px solid #D0D0D0;
  transition:border-color .2s ease;
}

.li a:hover{
  border-color:var(--indigo);
}

.tag{
  display:inline-block;
  font:600 10px/1.6 Manrope,system-ui,sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:0 7px;
  border-radius:4px;
  background:var(--lime-tint);
  color:var(--lime-deep);
  margin-left:7px;
}


/* --- The sticky footer ---------------------------------------------------- */

.plan-foot{
  position:sticky;
  bottom:0;
  z-index:10;
  background:var(--lime-tint);
  border-top:1.3px solid var(--indigo);
  border-radius:0 0 10px 10px;
  padding:13px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  box-shadow:0 -10px 20px rgba(0,0,0,.05);
}

.plan-foot .progress{
  font:400 14px/1.3 Castoro,Georgia,serif;
  color:var(--indigo);
  font-variant-numeric:tabular-nums;
}

.plan-foot .actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.plan-foot button{
  padding:8px 16px;
  border-radius:99px;
  border:2px solid var(--indigo);
  background:transparent;
  color:var(--indigo);
  font:500 13px Manrope,system-ui,sans-serif;
  cursor:pointer;
}

.plan-foot button:hover{
  background:var(--card);
}

.plan-foot button.primary{
  background:var(--indigo);
  color:var(--lime);
}

.plan-foot button.primary:hover{
  background:var(--indigo-600);
}


/* -----------------------------------------------------------------------------
   8. Secondary blocks — "Not included" and "Other tool options"
   -------------------------------------------------------------------------- */

.block{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:17px 19px;
  margin-top:16px;
}

.block h3{
  font-size:14px;
  margin-bottom:5px;
}

.block p{
  margin:0 0 11px;
  font-size:13px;
}

.block ul{
  margin:0;
  padding-left:18px;
  font-size:13.5px;
}

.block li{
  margin-bottom:5px;
}


/* -----------------------------------------------------------------------------
   9. The refusal state

   Shown when no plan fits. The engine returns structured fixes, so this is a
   set of buttons that apply themselves rather than a paragraph of advice.
   -------------------------------------------------------------------------- */

.nofit{
  background:var(--card);
  border:1px solid var(--line);
  border-top:4px solid var(--lime);
  border-radius:var(--r);
  padding:26px;
}

.nofit h2{
  font-size:20px;
  margin-bottom:9px;
}

.nofit p{
  margin:0;
  font-size:14.5px;
}

.fixes{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* The first fix is the recommended one and gets the solid indigo treatment. */
.fixes button{
  padding:10px 16px;
  border:0;
  border-radius:9px;
  background:var(--indigo);
  color:#fff;
  font:500 13.5px Manrope,system-ui,sans-serif;
  cursor:pointer;
}

.fixes button:hover{
  background:var(--indigo-600);
}

/* Alternatives after the first, in lime. */
/* The escape hatch is an <a>, not a button, because it leaves the page. It
   takes the same shape so the two read as equal-weight choices. */
.fixes a{
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  border-radius:9px;
  font:500 13.5px Manrope,system-ui,sans-serif;
  text-decoration:none;
}

.fixes button.alt,
.fixes a.alt{
  background:var(--lime);
  color:var(--indigo);
}

.fixes a.alt:hover{
  background:#CBDA6C;
}

/* The sentence that explains where the link goes. Full width of the card —
   the refusal above it already runs the full width, and a narrower measure
   here made the two look unrelated. */
.alt-route{
  margin:14px 0 0;
  font-size:13.5px;
  color:var(--muted);
}

.fixes button.alt:hover{
  background:#CBDA6C;
}


/* =============================================================================
   10. Responsive

   Two steps, each doing one job:
     900px — the sentence tightens
     768px — the table restructures into one card per week

   Both are scoped to `screen` deliberately. A4 inside the 15mm page margin is
   680 CSS pixels and US Letter is 703, so an unscoped max-width query fires on
   paper too — which silently gave the printed sheet the phone layout, one
   stacked card per week. Widening the page margin narrows that figure, so it
   moves further under 768px rather than out of range: keep the `screen` scope.
   ============================================================================= */

@media screen and (max-width:900px){

  header{
    padding:16px 0;
    margin-bottom:20px;
  }

  .greeting h1{
    font-size:1.9rem;
  }

  .panel{
    padding:18px 20px;
  }

  /* The sentence steps down a size and loses some of the line-height that
     the pills needed at desktop width, so it stays a paragraph rather than
     a very tall column of wrapped fragments. */
  .clause{
    font-size:16px;
    line-height:1.9;
  }

  .clause select,
  .clause input,
  .static-text{
    font-size:13.5px;
  }

  .c-home{
    width:34%;
  }

}

@media screen and (max-width:768px){

  /* One card per week. Four columns cannot be read at phone width, so every
     cell goes full width and the row becomes the card. */
  table.plan,table.plan tbody{
    display:block;
    width:100%;
  }

  table.plan thead{
    display:none;
  }

  table.plan tr{
    display:flex;
    flex-wrap:wrap;
    position:relative;
    border-bottom:1px solid var(--line);
  }

  table.plan td{
    width:100%;
    padding:10px 18px;
  }

  th.phase{
    display:block;
    width:100%;
  }

  /* Week number and time become a header strip across the top of the card. */
  .c-wk{
    width:100%;
    text-align:left;
    display:flex;
    align-items:baseline;
    gap:11px;
    border-right:0;
    border-bottom:1px solid var(--line-soft);
    padding:11px 18px;
  }

  .c-wk b{
    display:inline;
    font-size:19px;
    margin:0;
  }

  .c-wk .wtime{
    display:inline;
  }

  /* Replaces the lost column headers, from the data-label attribute. */
  .c-in::before,.c-home::before{
    content:attr(data-label);
    display:block;
    font:600 10px/1.5 Manrope,system-ui,sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:3px;
  }

  /* The tick moves to its own strip at the foot of the card. */
  .c-done{
    width:100%;
    text-align:left;
    border-left:0;
    border-top:1px dashed var(--line);
    background:var(--paper);
    padding:10px 18px;
    border-radius: 6px;
  }

  .plan-foot{
    justify-content:center;
    text-align:center;
  }

}


/* =============================================================================
   11. Print

   The printed plan is a physical tracker, so this is a real layout rather
   than a stripped screen. Everything interactive is removed, colour drops to
   black on white, and the tick column — hidden on screen — appears here.
   ============================================================================= */

/* Populated by src/ui/render.js and shown only when printing: title and
   configuration, since the on-screen header is hidden below. */
.printhead{
  display:none;
}

/* Page margins sit at the top level, NOT inside the @media print block below.
   @page is already print-only by definition, and Safari has historically
   ignored an @page nested inside @media print - which printed the plan edge to
   edge on a Mac while Chrome honoured it. Nesting it buys nothing and costs
   that. 15mm rather than 12mm: the tick column is meant to be written in, and
   12mm left no room for a hole punch or a binder clip. */
@page{
  margin:15mm;
}

@media print{

  body{
    background:#fff;
    font-size:9pt;
    color:#000;
  }

  /* Everything the reader cannot act on from paper. The summary line stays:
     it is one sentence and it carries the homework figure, which is exactly
     what the printed sheet used to be missing. */
  header,.greeting,.panel,.actions,.plan-foot{
    display:none !important;
  }

  /* The card border and its indigo header are screen furniture; on paper the
     printhead does that job. */
  .plan-card{
    border:0;
  }

  .plan-head{
    display:none;
  }

  .printhead{
    display:block;
    border-bottom:2px solid var(--indigo);
    padding-bottom:6px;
    margin-bottom:9px;
  }

  .printhead h1{
    font-size:14pt;
  }

  .printhead p{
    margin:3px 0 0;
    font-size:9pt;
    color:#000;
  }

  .wrap{
    max-width:none;
    padding:0;
  }

  .layout{
    display:block;
  }

  .lede{
    font-size:9pt;
    margin-bottom:6px;
  }

  /* The indigo chip is screen emphasis; on paper it just costs ink, and red
     prints as an indeterminate grey. Both drop to plain black. */
  .lede.heavy strong{
    background:transparent;
    color:#000;
    padding:0;
  }

  .lede.over-note strong{
    color:#000;
  }

  table.plan{
    border:1px solid #000;
    border-radius:0;
  }

  table.plan th{
    background:#fff;
    color:#000;
    border-bottom:1.5px solid #000;
    padding:3px 6px;
    font-size:7pt;
  }

  table.plan td{
    border-bottom:1px solid #999;
    padding:4px 6px;
  }

  /* Column widths have to be stated for print: the screen values are relative
     to a viewport the printer does not have. */
  .c-wk{
    width:52px;
  }

  .c-in{
    width:auto;
  }

  .c-home{
    width:32%;
  }

  /* Lesson rows carry most of the page, so this is where compactness pays. */
  .li{
    font-size:8pt;
    padding:1px 0;
    gap:6px;
  }

  .li .t{
    font-size:7pt;
    min-width:32px;
    padding-top:0;
  }

  .tag{
    font-size:6.5pt;
    padding:0 4px;
    margin-left:4px;
  }

  .overage{
    font-size:7pt;
    margin-top:3px;
  }

  /* Tints do not survive printing reliably, and cost ink. */
  tr.slack td{
    background:#fff !important;
  }

  /* Never split a week across a page break. */
  tr{
    break-inside:avoid;
  }

  .c-wk{
    background:#fff !important;
    border-right:1px solid #999;
  }

  .c-wk b{
    font-size:10pt;
    margin-bottom:1px;
  }

  .c-wk .wtime{
    font-size:7pt;
  }

  /* Red does not survive a mono printer, so the note drops to plain weight. */
  .overage{
    color:#000;
  }

  th.phase{
    background:#fff;
    border-top:1.5px solid #000;
    border-bottom:1px solid #000;
    font-size:7pt;
    padding:3px 6px;
  }

  /* A printed plan is a tracker, so the box has to be big enough for a pen.
     The live checkbox prints as a tiny control, so it is replaced by a drawn
     square — and a week already ticked on screen prints ticked. */
  .c-done{
    display:table-cell;
    width:34px;
    text-align:center;
    border-left:1px solid #999;
    border-radius: 6px;
  }

  .c-done input{
    appearance:none;
    width:18px;
    height:18px;
    border:1.25px solid #000;
    border-radius: 6px;
    background:#fff;
  }

  .c-done input:checked::after{
    content:"\2713";
    display:block;
    font-size:14px;
    line-height:16px;
    text-align:center;
    color:#000;
  }

  /* Underline properly on paper — a lime border prints as nothing useful. */
  .li a{
    border:0;
    color:#000;
    text-decoration:underline;
  }

  .block{
    break-inside:avoid;
    border-color:#999;
  }

}