/* Connect Lite — the input session library, in the house.
 *
 * Ramy's own interactive input sessions were written one at a time for
 * Google Classroom in IH Istanbul's look (navy header, Playfair, Nunito, a
 * logo in the top bar). The copies under /input-sessions/ are the same
 * sessions on Lite's own desk: sand ground, the paper header, Newsreader
 * for what is read as a heading and Karla for everything else, one gold
 * edge per card, and the brand foot. The IH copies at the site root stay as
 * they are for Classroom; this folder never links to them.
 *
 * Every session keeps its own class names, so its script runs untouched.
 * This sheet carries what the sessions share (the header, the nav, cards,
 * stage titles, pills, buttons, the write boxes, the divider, the foot);
 * each page keeps a short <style> for the parts only it has. hub-tokens.css
 * is linked first, so a var() here always resolves. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--sand); color:var(--ink);
  font:400 15px/1.6 'Karla',system-ui,sans-serif; -webkit-font-smoothing:antialiased;}
.wrap{max-width:960px; margin:0 auto; padding:22px 20px 60px;}
@media(max-width:560px){ .wrap{padding:16px 16px 48px;} }

/* ---- the paper header ------------------------------------------------- */
.header{background:var(--surface); border-top:2px solid var(--teal); border-radius:var(--r-card);
  text-align:center; padding:24px 26px 22px; margin:0 0 16px;}
.eyebrow{font-family:'Instrument Sans','Karla',sans-serif; font-weight:600; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--grey); margin:0 0 6px;}
.header h1{font-family:'Newsreader',Georgia,serif; font-size:1.95rem; font-weight:700; color:var(--teal);
  line-height:1.2; margin:0; letter-spacing:-.01em;}
.header .sub{margin:10px auto 0; max-width:640px; font-size:.9rem; color:var(--grey); line-height:1.6;}
@media(max-width:560px){ .header{padding:20px 18px 18px;} .header h1{font-size:1.5rem;} }

/* ---- the nav: small tabs, underlined never ringed ------------------- */
nav.sticky-nav{position:sticky; top:0; z-index:20; display:flex; gap:20px; flex-wrap:wrap;
  background:var(--sand); border-bottom:1px solid var(--row-line); padding:10px 0 0; margin:0 0 18px;}
nav.sticky-nav a{text-decoration:none; font-size:.84rem; font-weight:600; color:var(--grey);
  padding:0 0 9px; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;}
nav.sticky-nav a:hover{border-bottom-color:var(--gold);}
nav.sticky-nav a.active, nav.sticky-nav a.on{color:var(--ink); border-bottom-color:var(--teal);}
nav.sticky-nav .print-btn{margin-left:auto; background:none; border:0; color:var(--grey);
  font:600 .82rem 'Karla',sans-serif; cursor:pointer; padding:0 0 9px;
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--gold);}
nav.sticky-nav .print-btn:hover{color:var(--ink-warm);}
@media(max-width:560px){
  nav.sticky-nav{gap:8px 16px;}
  nav.sticky-nav .print-btn{display:none;}
}

/* ---- cards and stages ------------------------------------------------ */
section{scroll-margin-top:56px;}
.card{background:var(--surface); border-radius:var(--r-control); border-left:5px solid var(--gold);
  padding:20px 22px; margin:0 0 14px;}
@media(max-width:560px){ .card{padding:16px 16px;} }
.stage-title{font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:1.18rem; color:var(--ink);
  margin:0 0 6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; line-height:1.3;}
.badge, .time{display:inline-flex; align-items:center; font-family:'Karla',sans-serif; font-size:.68rem;
  font-weight:700; letter-spacing:.02em; line-height:1.4; border-radius:999px; padding:2px 9px;
  background:var(--box); border:1px solid var(--sand-line); color:oklch(45% 0.02 70); text-transform:none;}
.badge{color:var(--gold-deep);}
.lead{color:var(--grey); margin:0 0 14px; font-size:.92rem; line-height:1.55;}
.lead b{color:var(--ink);}
.label{font-family:'Instrument Sans','Karla',sans-serif; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grey); font-weight:600; margin:0 0 6px;}
.divider{display:flex; align-items:center; gap:12px; margin:26px 0 14px;}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--row-line);}
.divider span{font-family:'Newsreader',Georgia,serif; font-style:italic; color:var(--grey); font-size:.95rem;}

/* ---- buttons: a hierarchy, not a palette ----------------------------- */
button{font-family:inherit;}
.btn{display:inline-flex; align-items:center; justify-content:center; font-family:'Karla',sans-serif;
  font-size:.84rem; font-weight:600; padding:8px 16px; border-radius:var(--r-control); cursor:pointer;
  background:none; color:var(--grey); border:1.5px solid var(--sand-line); min-height:38px;
  transition:border-color .12s ease, color .12s ease, background .12s ease;}
.btn:hover{border-color:var(--grey); color:var(--ink);}
.btn.teal, .btn.primary{background:var(--teal); color:var(--paper); border-color:var(--teal);}
.btn.teal:hover, .btn.primary:hover{background:var(--teal-lifted); border-color:var(--teal-lifted); color:var(--paper);}
.btn.gold{background:var(--gold); color:var(--ink-warm); border-color:var(--gold); font-weight:700;}
.btn.gold:hover{background:var(--gold-lifted); border-color:var(--gold-lifted); color:var(--ink-warm);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; align-items:center;}
.feedback{font-weight:600; font-size:.88rem; min-height:1.2em;}
.feedback.good{color:var(--teal);}
.feedback.bad{color:var(--brick);}
@media(max-width:560px){ .btn{min-height:44px;} }

/* ---- what a trainee writes ------------------------------------------- */
.write-area, textarea.write-area, input.write-area{width:100%; border:1.5px solid var(--sand-line);
  border-radius:var(--r-control); padding:10px 12px; font-family:'Karla',sans-serif; font-size:.9rem;
  color:var(--ink); resize:vertical; margin-top:6px; background:var(--field); line-height:1.5;}
.write-area:focus{outline:none; border-color:var(--gold); background:var(--field-focus);}
.write-area::placeholder{color:var(--field-ph); opacity:1;}

/* ---- a block of text, and a card that opens ------------------------- */
.text-block{background:var(--paper); border:1px solid var(--sand-line); border-radius:var(--r-strip);
  padding:12px 16px; margin:10px 0; font-size:.9rem; line-height:1.6;}
.text-block b{color:var(--teal);}
.reveal-card{background:var(--paper); border:1.5px solid var(--sand-line); border-radius:var(--r-strip);
  padding:12px 16px; margin:8px 0; cursor:pointer; transition:border-color .12s ease;}
.reveal-card:hover{border-color:var(--gold);}
.reveal-card .q{font-weight:600; font-size:.9rem; color:var(--ink);}
.reveal-card .a{display:none; margin-top:8px; font-size:.88rem; color:var(--teal); font-weight:600; line-height:1.55;}
.reveal-card.open{border-color:var(--teal);}
.reveal-card.open .a{display:block;}
.reveal-card .hint{font-size:.74rem; color:var(--grey); font-weight:600;}

/* ---- match the pairs ------------------------------------------------- */
.pill-match-wrap{display:grid; grid-template-columns:1fr 1.3fr; gap:14px; margin:12px 0;}
@media(max-width:640px){ .pill-match-wrap{grid-template-columns:1fr;} }
.pill-col{display:flex; flex-direction:column; gap:8px;}
.pill{background:var(--field); border:1.5px solid var(--sand-line); border-radius:var(--r-control);
  padding:9px 12px; font-size:.86rem; font-weight:500; color:var(--ink); cursor:pointer; line-height:1.4;
  transition:border-color .12s ease, background .12s ease;}
.pill:hover{border-color:var(--gold);}
.pill.selected{border-color:var(--gold); background:var(--field-focus);}
.pill.matched{background:color-mix(in oklab, var(--teal) 11%, transparent);
  border-color:color-mix(in oklab, var(--teal) 30%, transparent); color:var(--teal); font-weight:600;}
.pill.wrong{border-color:var(--brick);}

/* ---- a card that turns over ------------------------------------------- */
.flip-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 0;}
@media(max-width:640px){ .flip-grid{grid-template-columns:1fr;} }
.flip-card{border-radius:var(--r-strip); border:1.5px solid var(--sand-line); background:var(--paper);
  overflow:hidden; cursor:pointer; transition:border-color .12s ease;}
.flip-card:hover{border-color:var(--gold);}
.flip-front{padding:12px 14px; font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:1.02rem; color:var(--ink); line-height:1.3;}
.flip-front div{font-family:'Karla',sans-serif; font-weight:400; font-size:.86rem; line-height:1.55; margin-top:6px; color:var(--ink);}
.flip-back{display:none; padding:11px 14px 13px; font-size:.86rem; line-height:1.55; border-top:1px solid var(--row-line); color:var(--ink);}
.flip-back b{color:var(--teal);}
.flip-card.open{border-color:var(--teal);}
.flip-card.open .flip-front{color:var(--teal);}
.flip-card.open .flip-back{display:block;}
.flip-example{font-style:italic; color:var(--grey); margin-top:6px;}

/* ---- one chip, the neutral pill, and its done tone -------------------- */
.chip{display:inline-flex; align-items:center; gap:5px; border-radius:999px; border:1px solid var(--sand-line);
  padding:3px 10px; font-family:'Karla',sans-serif; font-size:.72rem; font-weight:700; line-height:1.4;
  background:var(--box); color:oklch(45% 0.02 70);}
.chip.done{background:color-mix(in oklab, oklch(34% 0.09 155) 10%, transparent); border-color:color-mix(in oklab, oklch(34% 0.09 155) 26%, transparent); color:oklch(34% 0.09 155);}

/* ---- a blank to fill, a row of them, a table of them ------------------ */
.fill-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--row-line); font-size:.92rem;}
.fill-row:first-child{border-top:0; padding-top:0;}
.fill-row .lbl{min-width:110px; font-weight:600;}
input.blank, select.blank{border:1.5px solid var(--sand-line); border-radius:var(--r-control); padding:6px 10px; font-family:'Karla',sans-serif;
  font-weight:500; font-size:.9rem; color:var(--ink); background:var(--field); min-height:38px; max-width:100%;}
select.blank{appearance:none; -webkit-appearance:none; border-left:4px solid var(--gold); padding-right:30px; font-weight:600; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%), linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%);
  background-position:calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size:5px 5px; background-repeat:no-repeat;}
input.blank:focus, select.blank:focus{outline:none; border-color:var(--gold); background-color:var(--field-focus);}
input.blank.ok, select.blank.ok{border-color:var(--teal); background-color:color-mix(in oklab, var(--teal) 9%, var(--field));}
input.blank.no, select.blank.no{border-color:var(--brick); background-color:color-mix(in oklab, var(--brick) 8%, var(--field));}
table.grid{width:100%; border-collapse:collapse; margin:12px 0; font-size:.88rem;}
table.grid th, table.grid td{border:1px solid var(--sand-line); padding:8px 10px; text-align:left; vertical-align:middle; background:var(--paper);}
table.grid th{background:var(--gold-wash); color:var(--gold-deep); font-family:'Instrument Sans','Karla',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;}
table.grid input.blank{width:100%;}

/* ---- what opens at the end: a key, a list, a door elsewhere ----------- */
.reveal-block{display:none; margin-top:14px; padding:14px 18px; border-radius:var(--r-strip); background:var(--gold-wash); border:1px solid var(--amber-edge); font-size:.9rem; line-height:1.6;}
.reveal-block.shown{display:block;}
.reveal-block h4{margin:0 0 6px; font-family:'Newsreader',Georgia,serif; font-weight:600; color:var(--gold-deep); font-size:1rem;}
.checklist{list-style:none; margin:0; padding:0;}
.checklist li{display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--row-line); font-size:.9rem; line-height:1.5;}
.checklist li:last-child{border-bottom:none;}
.checklist li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; margin-top:9px;}
.link-card{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--paper); border:1px solid var(--sand-line); border-radius:var(--r-strip); padding:12px 16px; margin:12px 0; flex-wrap:wrap;}
.link-card .lc-text{font-size:.88rem; line-height:1.5;}
.link-card a{display:inline-flex; align-items:center; font-family:'Karla',sans-serif; font-size:.84rem; font-weight:600; padding:8px 16px; border-radius:var(--r-control);
  text-decoration:none; border:1.5px solid var(--teal); color:var(--teal); white-space:nowrap; min-height:38px;}
.link-card a:hover{background:var(--teal); color:var(--paper);}
.quote{font-family:'Newsreader',Georgia,serif; font-size:1.2rem; color:var(--teal); margin:6px 0 12px; font-weight:600;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:600px){ .two-col{grid-template-columns:1fr;} }
@media print{ .reveal-block{display:none !important;} .link-card{display:none;} }

/* ---- put these in order --------------------------------------------- */
.order-line{background:var(--paper); border:1.5px solid var(--sand-line); border-radius:var(--r-control); padding:10px 14px; margin:0 0 8px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; font-weight:500; font-size:.9rem; transition:border-color .12s ease;}
.order-line:hover{border-color:var(--gold);}
.order-line .num{color:var(--teal); font-weight:700; min-width:22px; text-align:right; font-variant-numeric:tabular-nums;}

/* ---- where the material comes from ------------------------------------ */
/* Ramy, 13 Oct 2026: "if any of those come from anything online or
   published, we should source it." One quiet line above the foot. */
.sources{margin:26px 0 0; padding:12px 16px; background:var(--paper); border:1px solid var(--sand-line); border-radius:var(--r-strip); font-size:.8rem; color:var(--grey); line-height:1.55;}
.sources b{color:var(--ink); font-weight:600;}
.sources a{color:var(--teal);}
/* an embedded film: the frame, and a link under it for the phone */
.film{position:relative; width:100%; aspect-ratio:16/9; background:var(--ink-warm); border-radius:var(--r-strip); overflow:hidden; margin:10px 0 8px;}
.film iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
/* Ramy, 14 Oct 2026: "once they open, there should be a way to hide them."
   A film starts closed: the dark frame with one button. Watch loads the
   player; Hide takes it out again (which also stops the sound) and the
   frame returns. Nothing from YouTube loads until someone asks for it. */
.film.closed{display:flex; align-items:center; justify-content:center;}
.film.closed .film-btn{margin:0;}
.film-acts{margin:0 0 8px;} .film-acts .btn{margin:0;}
.film-link{font-size:.82rem; color:var(--grey);}
.film-link a{color:var(--teal); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold);}
/* the voice a page speaks with */
.voice{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px; padding:10px 14px; background:var(--paper); border:1px solid var(--sand-line); border-radius:var(--r-strip); font-size:.84rem; color:var(--grey);}
.voice select{appearance:none; -webkit-appearance:none; border:1.5px solid var(--sand-line); border-left:4px solid var(--gold); border-radius:var(--r-control); padding:6px 30px 6px 10px; font-family:'Karla',sans-serif; font-weight:600; font-size:.84rem; color:var(--ink); background:var(--field); min-height:36px; max-width:100%;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%), linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%); background-position:calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size:5px 5px; background-repeat:no-repeat;}
.voice button{margin:0;}
@media print{ .sources{border-color:#bbb; color:#444;} .film, .voice{display:none !important;} }

/* ---- the end of the page --------------------------------------------- */
footer.note{text-align:center; color:var(--faint); font-size:.78rem; margin:26px 0 0;}
.hub-brand-foot{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:30px 0 0; padding:18px 0 0; border-top:1px solid var(--row-line); font-size:11px; color:oklch(50% 0.09 62);}
.hub-brand-foot b{font-weight:700;}
.hub-lockup{display:inline-flex; align-items:center; gap:7px; color:var(--ink);}
.hub-lockup-tile{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:18px; height:18px; border-radius:4px; background:var(--ink-warm);}
.hub-lockup-c{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:17px; line-height:.85; color:var(--gold);}
.hub-lockup-l{font-family:'Instrument Sans','Karla',sans-serif; font-weight:500; font-size:8px; letter-spacing:.24em; text-transform:uppercase; margin-left:-3px;}

/* ---- print: the handout, not the screen ------------------------------
   Ramy, 13 Oct 2026: "will it print as if it's a face-to-face course, not
   show the reveal answer part, like Connect does?" Yes. Print gives the
   trainee the tasks on paper: every answer stays hidden whether or not it
   was opened on screen, the write boxes become ruled space, the buttons
   and the nav go. The answer keys print only from the tutor's view (the
   trainer notes pass adds that). */
@media print{
  body{background:#fff; font-size:11pt;}
  .wrap{max-width:none; padding:0;}
  nav.sticky-nav, .btn, .btn-row, .feedback, .print-btn{display:none !important;}
  /* The mark and the credit stay on the paper (Ramy, 13 Oct 2026: the library
     is open; authorship travels with every page and every print). */
  .hub-brand-foot{margin-top:22px; padding-top:10px; border-top:1px solid #999; font-size:9pt; color:#444; justify-content:flex-start; break-inside:avoid;}
  .hub-brand-foot .hub-lockup-c{color:#000;} .hub-brand-foot .hub-lockup-l{color:#000;}
  .hub-brand-foot .hub-lockup-tile{background:#333;}
  .header{background:none; border:0; border-bottom:1.5px solid #333; border-radius:0; padding:0 0 10px; text-align:left;}
  .header h1{color:#000; font-size:20pt;}
  .header .sub{margin:4px 0 0; max-width:none; color:#444;}
  .card{background:none; border:1px solid #bbb; border-left:4px solid #888; border-radius:0; break-inside:avoid; padding:12px 14px;}
  .badge, .time{border-color:#999; background:none; color:#333;}
  .reveal-card .a, .answer-key, .flip-back, .why{display:none !important;}
  .reveal-card, .flip-card, .flash{border-color:#bbb !important; color:#000 !important;}
  .flip-card.open .flip-front{color:#000;}
  textarea.write-area, .write-area{background:none !important; border:1px solid #999; min-height:64px; resize:none; color:#000;}
  textarea.write-area::placeholder{color:transparent;}
  .divider span{color:#444;}
  a[href]::after{content:"";}
}

/* ---- the top: the mark, the name and the role ------------------------
   Ramy, 13 Oct 2026: "why don't I see the Connect Lite logo on top of the
   input session?" The same chrome as the trainee home and the tutor
   dashboard: the tile, Connect Lite, and the role on the right. The gate
   turns the role to Tutor. The foot keeps the credit, as everywhere. */
.chrome{display:flex; align-items:center; justify-content:space-between; gap:24px; height:64px; margin:0 0 6px;}
.lockup{display:flex; align-items:center; gap:9px; text-decoration:none;}
.lockup .tile{width:30px; height:30px; border-radius:7px; background:var(--ink-warm); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.lockup .word{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:21px; line-height:0.85; letter-spacing:-0.012em; color:var(--gold);}
.hub-pair{display:inline-flex; align-items:baseline; gap:4px;}
.hub-word{font-family:'Instrument Sans','Karla',sans-serif; font-weight:500; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink); line-height:1; margin-left:1px;}
.chrome .role{font-family:'Instrument Sans','Karla',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--grey);}
.back{display:inline-block; margin:0 0 16px; font-size:.84rem; font-weight:600; color:var(--teal); text-decoration:none;} .back:hover{text-decoration:underline; text-underline-offset:3px;}
@media print{ .back{display:none;} .chrome{height:auto; margin:0 0 10px;} .chrome .role{color:#444;} .lockup .word{color:#000;} .lockup .tile{background:#333;} }

/* ---- the trainer's side ------------------------------------------------
   Ramy, 13 Oct 2026: "trainer notes that only trainers can see, obviously",
   "gated by the tutor link checked against the store". Every page carries
   its notes in <section id="trainer" class="trainer-notes" hidden>; the gate
   at the foot of the page asks the store (op ping) whether the key this
   browser holds is a tutor's, and only then unhides the section and marks
   <body class="tutor">. A trainee link, an assessor link, a saved copy or no
   link at all never reaches the store as a tutor, so the section stays
   hidden and prints nothing. The notes are in the page source: that is the
   open-library decision of 13 Oct (authorship, not a lock); the gate is who
   sees the tutor's side on the day, not who may read the file. */
.trainer-notes .card{border-left-color:var(--teal); background:color-mix(in oklab, var(--teal) 7%, var(--surface));}
.trainer-notes .stage-title{color:var(--teal);}
.trainer-notes .badge{color:var(--teal);}
.trainer-notes h4{margin:18px 0 6px; font-family:'Newsreader',Georgia,serif; font-weight:600; color:var(--teal); font-size:1.02rem;}
.trainer-notes h4:first-of-type{margin-top:6px;}
.trainer-notes p, .trainer-notes li{font-size:.92rem; line-height:1.6;}
.trainer-notes ul{margin:6px 0; padding-left:22px;} .trainer-notes li{margin:5px 0;}
table.tn-time{width:100%; border-collapse:collapse; margin:8px 0 4px; font-size:.86rem;}
table.tn-time th, table.tn-time td{border:1px solid var(--sand-line); padding:7px 10px; text-align:left; vertical-align:top; background:var(--paper); line-height:1.5;}
table.tn-time th{background:color-mix(in oklab, var(--teal) 10%, var(--paper)); color:var(--teal); font-family:'Instrument Sans','Karla',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;}
table.tn-time td:first-child{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--teal); font-weight:700;}
@media(max-width:560px){ table.tn-time{font-size:.8rem;} table.tn-time th, table.tn-time td{padding:6px 7px;} }
nav.sticky-nav a.tn-link{color:var(--teal);}
/* The tutor's print carries the trainee's handout first, then the answers
   the page keeps from the trainee, then the notes on a page of their own. */
@media print{
  body.tutor .reveal-card .a, body.tutor .answer-key, body.tutor .why{display:block !important;}
  body.tutor .reveal-block{display:block !important;}
  body.tutor .trainer-notes{display:block !important; break-before:page;}
  body.tutor .trainer-notes .card{border-left-color:#333;}
  body.tutor table.tn-time th{background:none; color:#000;}
  body.tutor table.tn-time td:first-child, body.tutor .trainer-notes h4{color:#000;}
}

/* ---- the gate: a trainee is not shown a session the timetable has not given ----
   library.js puts `gating` on <html> until it has decided, so a page that is
   about to be shut is never shown first; `sealed` keeps the chrome and a notice
   and hides the rest. If the script cannot decide, the page opens. */
.gating .wrap{visibility:hidden;}
.sealed .wrap > *:not(.chrome):not(a.back):not(.seal):not(.hub-brand-foot){display:none !important;}
.seal{display:none;} .sealed .seal{display:block;}