/* The printed record's own styles. Lifted out of
   11_assignment_record.html on 23 Sep 2026 so the whole-course record
   (15_course_record.html) prints the same document rather than a
   look-alike: hubAssignmentRecordHTML builds the markup, this dresses it,
   and both screens link this one file. */
/* Orientation stated, not left to the print dialog. The four teaching-practice
   documents declare A4 landscape because they are wide tables; the records,
   the pack, the grades report and the final report are prose and a certificate
   and declared nothing at all -- so they printed in whatever the dialog was
   last set to, which after a TP record is landscape (25 Sep 2026). */
@page{ size:A4 portrait; margin:12mm; }

:root{
    /* The desk, not the sheet. The 26 Sep colour sweep lifted every other
       screen's ground from beige (92.5%) to ivory (98.8%) and the two record
       screens draw their ground from here, so they sat in a darker room than
       the rest of the site. The sheet itself stays --paper white: a record IS
       a sheet of paper, and that is the one place white is the right answer
       (Ramy, 26 Sep 2026: "lift the desk on 11 and 15 too"). */
    --sand:oklch(98.8% 0.006 85); --sand-line:oklch(85.5% 0.02 80);
    --paper:oklch(99.5% 0.004 90);
    /* --box: what a control is filled with -- every button, every field.
       It was --paper, stark white (Ramy, 21 Sep 2026: "I'm not a big fan of
       white... all those white boxes could turn into that sort of different
       beige colour"), and is now the tone Course links and the double-marking
       cards already used. Named for its job, not its look, so a control and a
       panel can part company later. --paper stays white for its own two jobs:
       text on a teal fill, and the arcs of the mark. */
    --box:oklch(91.2% 0.03 80); --ink:oklch(23.5% 0.017 65);
    --teal:oklch(37.5% 0.058 195); --grey:oklch(51% 0.017 70); --brick:oklch(45% 0.15 27);
  }
  *{box-sizing:border-box;}
  a{color:var(--teal);} a:hover{color:oklch(30% 0.06 195);}
  body{margin:0; font-family:'Karla',sans-serif; color:var(--ink); background:var(--sand); padding:32px 16px 80px; display:flex; flex-direction:column; align-items:center;}
  /* A sheet lying on the desk. On the old beige desk the white sheet read by
     contrast alone; on ivory (99.5% on 98.8%) it all but vanished, so it takes
     a hairline edge and the same two shadows the landing cards wear -- one
     tight contact shadow, one wide and soft. Flat white, no gradient: this is
     paper, not a pane. Print strips all of it (below). */
  .doc{max-width:760px; width:100%; background:var(--paper); padding:44px 52px; border-radius:6px;
    border:1px solid var(--sand-line);
    box-shadow:0 1px 2px oklch(58% 0.03 70 / 0.11), 0 7px 16px -7px oklch(58% 0.03 70 / 0.09);}
  .back{display:block; margin:0 auto 16px; max-width:760px; width:100%; font-size:0.85rem; font-weight:600; text-decoration:none;}
  .doc h1{font-family:'Newsreader',Georgia,serif; font-size:1.6rem; margin:0 0 2px;}
  .eyebrow{font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--grey); margin:0 0 6px;}
  .outcome-badge{display:inline-block; font-weight:700; font-size:0.9rem; padding:5px 14px; border-radius:12px; margin:10px 0 22px;}
  .outcome-badge.pass{background:oklch(93% 0.05 145); color:oklch(35% 0.08 145);}
  .outcome-badge.fail{background:oklch(92% 0.08 27); color:var(--brick);}
  .section{border-top:1px solid var(--sand-line); padding:20px 0;}
  .section:first-of-type{border-top:none;}
  .section h2{font-family:'Newsreader',Georgia,serif; font-size:1.15rem; margin:0 0 12px; color:var(--ink);}
  .roundlabel{font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--teal); margin:14px 0 6px;}
  .roundlabel:first-child{margin-top:0;}
  .readonly{white-space:pre-wrap; font-size:0.9rem; line-height:1.6; background:oklch(97.5% 0.008 85); border:1px solid var(--sand-line); border-radius:6px; padding:10px 12px; margin-bottom:8px;}
  table.crit{width:100%; border-collapse:collapse; font-size:0.87rem; margin-top:6px;}
  table.crit th{text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--grey); padding:6px 8px; border-bottom:1.5px solid var(--sand-line);}
  table.crit td{padding:8px; border-bottom:1px solid var(--sand-line); vertical-align:top;}
  table.crit td.mark{text-align:center; font-weight:700; white-space:nowrap;}
  /* The mark cell is nowrap so "Not met" never breaks across lines, but a
     criterion comment sitting under it inherits that and cannot wrap, which
     widens the column until the page scrolls sideways -- a Cambridge-facing
     record should not (21 Sep 2026). The note wraps and is left-aligned,
     since it is prose rather than a verdict. */
  table.crit td.mark .note{white-space:normal; text-align:left;}
  table.crit td.mark.met{color:oklch(35% 0.08 145);}
  table.crit td.mark.not{color:var(--brick);}
  .comment{font-size:0.9rem; line-height:1.6; background:oklch(97.8% 0.02 72); border-left:4px solid oklch(63% 0.096 72); padding:12px 16px; border-radius:6px; margin-top:10px;}
  .empty{text-align:center; color:var(--grey); padding:60px 20px;}
  .actions{max-width:760px; width:100%; display:flex; justify-content:center; margin-top:18px;}
  .actions button{font-family:'Karla',sans-serif; font-size:0.85rem; font-weight:600; padding:10px 22px; border-radius:20px;
    border:1.5px solid var(--teal); background:var(--box); color:var(--teal); cursor:pointer;}
  /* A phone: the stored plan and analysis tables are wider than 390px, and
     without a scroller of their own the whole page slid sideways (measured,
     24 Sep 2026). The document scrolls inside its own card instead. Print is
     untouched -- paper has no viewport. */
  @media screen and (max-width:640px){ .doc{overflow-x:auto; padding:22px 18px;} }
  @media print{ .back,.actions{display:none !important;} body{background:#fff; padding:0;} .doc{border-radius:0; padding:0; border:0; box-shadow:none;}  /* the page margin is the margin (Ramy, 24 Sep 2026) */ }