/* Town Hall 3.0 · employee portal.
   Sits on top of exam.css: same palette, same chrome. The language here is a
   printed event programme: type and hairlines, almost no boxes, one accent at
   a time. Anything loud was removed on purpose. */

/* ---------------------------------------------------------------- shell */
.thpage{max-width:880px;margin:0 auto;padding:40px 24px 90px}
.thpage a{color:var(--green-d);text-decoration:none;border-bottom:1px solid var(--ln2)}
.thpage a:hover{border-bottom-color:var(--green-d)}

.thhead{padding:0 0 26px;border-bottom:2px solid var(--tx);margin-bottom:8px}
.thhead .ev{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--tx3);font-weight:700}
.thhead h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,40px);letter-spacing:-.02em;margin:10px 0 0;line-height:1.1}
.thhead .who{margin-top:12px;font-size:14.5px;color:var(--tx2)}
.thhead .who b{color:var(--tx);font-weight:600}

.facts{display:flex;gap:0;margin:26px 0 0;border:1px solid var(--ln);border-radius:12px;overflow:hidden;background:var(--s1)}
.fact{flex:1;padding:14px 18px;min-width:0}
.fact+.fact{border-left:1px solid var(--ln)}
.fact .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);font-weight:700}
.fact .v{font-size:14.5px;font-weight:600;margin-top:3px;line-height:1.45}
.fact .v.mono{font-family:var(--mono);font-size:13.5px}

/* ---------------------------------------------------------------- sections */
.sect{margin-top:46px}
.sect>h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 4px;letter-spacing:-.01em}
.sect>.sub{font-size:13.5px;color:var(--tx3);margin:0 0 18px}

/* ---------------------------------------------------------------- programme */
.dayttl{display:flex;align-items:baseline;gap:12px;margin:30px 0 4px;padding-top:22px;border-top:1px solid var(--ln);flex-wrap:wrap}
.sect .dayttl:first-of-type{border-top:0;padding-top:0;margin-top:14px}
.dayttl h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0}
.dayttl .badge{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 9px;border-radius:5px;background:var(--s3);color:var(--tx2)}
.dayttl .badge.today{background:var(--green);color:#06240F}
.dayttl .theme{font-size:12.5px;color:var(--tx3)}
.dayttl .live{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--green-d);display:flex;align-items:center;gap:7px}
.dayttl .live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:lp 1.6s ease-in-out infinite}
@keyframes lp{50%{opacity:.3}}

.prog{list-style:none;margin:0;padding:0}
.prog li{display:flex;gap:20px;padding:13px 12px;border-bottom:1px solid var(--ln);border-left:3px solid transparent}
.prog li:last-child{border-bottom:0}
.prog .t{flex:0 0 96px;font-family:var(--mono);font-size:12.5px;color:var(--tx3);padding-top:2px;white-space:nowrap}
.prog .t b{color:var(--tx);font-weight:600}
.prog .w{flex:1;min-width:0}
.prog .bt{font-size:15px;font-weight:600;line-height:1.45}
.prog .bn{font-size:13px;color:var(--tx2);margin-top:2px;line-height:1.6;max-width:62ch}
.prog li.done{opacity:.45}
.prog li.now{border-left-color:var(--green);background:var(--ok-bg)}
.prog li.next{border-left-color:var(--gold)}
.state{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-left:9px;vertical-align:2px}
.state.now{color:var(--green-d)}
.state.next{color:#8A6410}
@media(prefers-color-scheme:dark){.state.next{color:var(--gold)}}

/* ---------------------------------------------------------------- team */
.teambox{border:1px solid var(--ln);border-radius:12px;background:var(--s1);overflow:hidden}
.teambox .hd{display:flex;align-items:baseline;gap:14px;padding:18px 22px;border-bottom:1px solid var(--ln);flex-wrap:wrap}
.teambox .hd b{font-family:var(--serif);font-weight:400;font-size:24px}
.teambox .hd span{font-size:13px;color:var(--tx2)}
.teambox ul{list-style:none;margin:0;padding:14px 22px 18px;columns:2;column-gap:34px}
.teambox li{font-size:13.5px;line-height:2;break-inside:avoid}
.teambox li .d{color:var(--tx3);font-size:11.5px}
.teambox li.me{color:var(--green-d);font-weight:700}
@media(max-width:560px){.teambox ul{columns:1}}

/* ------------------------------------------------------------- the brief */
/* .asgn, not .brief: exam.css already owns .brief for the sitting pages, and
   both stylesheets load together on this page. */
.asgn{border:1px solid var(--ln);border-radius:12px;background:var(--s1);overflow:hidden}
.asgn>.hd{display:flex;align-items:baseline;gap:14px;padding:16px 22px;
  border-bottom:1px solid var(--ln);background:var(--s2);flex-wrap:wrap}
.asgn>.hd b{font-family:var(--serif);font-weight:400;font-size:21px}
.asgn>.hd span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-d)}
.asgn>.bd{padding:6px 26px 24px}
.asgn>.bd h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:26px 0 2px}
.asgn>.bd h3:first-child{margin-top:16px}
.asgn>.bd p{font-size:14.5px;line-height:1.72;margin:11px 0;max-width:74ch}
.asgn>.bd ul{margin:11px 0;padding-left:20px}
.asgn>.bd li{font-size:14.5px;line-height:1.7;margin:5px 0;max-width:72ch}
@media(max-width:560px){.asgn>.bd{padding:4px 17px 19px}}

/* ---------------------------------------------------------- how it is marked */
.score{list-style:none;margin:0;padding:0;counter-reset:s;
  border-top:2px solid var(--tx);border-bottom:1px solid var(--ln)}
.score li{counter-increment:s;display:grid;grid-template-columns:1fr auto;
  gap:2px 16px;padding:13px 4px;border-bottom:1px solid var(--ln)}
.score li:last-child{border-bottom:0}
.score b{font-size:14.5px;font-weight:600}
.score b::before{content:counter(s) ". ";font-family:var(--mono);font-size:11.5px;
  color:var(--tx3);font-weight:600}
.score .w{font-family:var(--mono);font-size:14px;color:var(--green-d);
  font-weight:700;text-align:right;align-self:start}
.score .w::after{content:"%";font-size:10px;color:var(--tx3);font-weight:400}
.score .l{grid-column:1/-1;font-size:13px;color:var(--tx2);line-height:1.6;max-width:70ch}

/* ---------------------------------------------------------------- modules */
.modlist{list-style:none;margin:0;padding:0;counter-reset:m}
.modlist li{counter-increment:m;border-bottom:1px solid var(--ln)}
.modlist li:last-child{border-bottom:0}
.modlist a{display:flex;gap:16px;align-items:baseline;padding:11px 8px;border-bottom:0;color:var(--tx)}
.modlist a:hover{background:var(--s2)}
.modlist a::before{content:counter(m,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--tx3);font-weight:600}
.modlist .mn{font-size:14px;font-weight:600;flex:0 0 auto}
.modlist .md{font-size:12.5px;color:var(--tx3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modlist .go{font-family:var(--mono);font-size:12px;color:var(--green-d)}
@media(max-width:640px){.modlist .md{display:none}}

/* ---------------------------------------------------------------- tables */
table.plain{border-collapse:collapse;width:100%;font-size:13.5px}
table.plain th{text-align:left;padding:8px 10px;font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--tx3);border-bottom:2px solid var(--tx);font-weight:700}
table.plain td{padding:9px 10px;border-bottom:1px solid var(--ln);vertical-align:top}
table.plain td.t{font-family:var(--mono);font-size:12.5px;white-space:nowrap;color:var(--tx2)}
table.plain tr.on td{background:var(--ok-bg)}
table.plain tr.on td:first-child{box-shadow:inset 3px 0 0 var(--green)}

.notecard{border:1px dashed var(--ln2);border-radius:12px;padding:20px 24px;font-size:14px;color:var(--tx2);line-height:1.7;background:var(--s1)}

/* ---------------------------------------------------------------- papers
   One person's papers as a numbered list, shared by the itinerary and the
   papers page so the two never disagree. The open one carries the only
   colour; everything else stays quiet. */
.plist{list-style:none;margin:6px 0 0;padding:0}
.plist li{display:flex;gap:16px;align-items:center;padding:15px 12px;border-bottom:1px solid var(--ln)}
.plist li:last-child{border-bottom:0}
.plist .pn{font-family:var(--mono);font-size:11px;color:var(--tx3);font-weight:600;align-self:flex-start;padding-top:3px}
.plist .pw{flex:1;min-width:0}
.plist .pt{display:block;font-size:15px;font-weight:600;line-height:1.45}
.plist .pm{display:block;font-family:var(--mono);font-size:12px;color:var(--tx3);margin-top:3px}
.plist .pm.pwarn{font-family:var(--sans);font-size:12.5px;color:#8A6410}
@media(prefers-color-scheme:dark){.plist .pm.pwarn{color:var(--gold)}}
.plist .pa{flex:none}
.plist .pa form{margin:0}
.plist .pst{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);font-weight:600;white-space:nowrap}
.plist .pst.ok{color:var(--green-d)}
.plist .pst.lk{color:var(--orange)}
.plist li.st-open,.plist li.st-late,.plist li.st-resume{background:var(--ok-bg);box-shadow:inset 3px 0 0 var(--green);border-radius:0 10px 10px 0}
.plist li.st-locked{background:rgba(228,72,36,.06);box-shadow:inset 3px 0 0 var(--orange);border-radius:0 10px 10px 0}
.plist li.st-submitted .pt{color:var(--tx2)}
.plist li.st-closed{opacity:.55}
@media(max-width:560px){
  .plist li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px 8px}
  .plist .pw{grid-column:2}
  .plist .pa{grid-column:2;justify-self:start;margin-top:6px}
}

/* One paper at a time. The card carries the whole moment, so it is allowed
   the weight a list row never had: a green rail when it is sittable, a quiet
   grey one while it is still counting down. */
.pnext{border:1px solid var(--ln);border-radius:12px;background:var(--s1);
  padding:20px 22px;box-shadow:inset 3px 0 0 var(--ln2)}
.pnext .pnexthd{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--tx3);font-weight:700}
.pnext .pt{display:block;font-size:19px;font-weight:600;line-height:1.4;margin-top:8px}
.pnext .pm{display:block;font-family:var(--mono);font-size:12px;color:var(--tx3);margin-top:6px}
.pnext .pm.pwarn{font-family:var(--sans);font-size:12.5px;color:#8A6410}
.pnext .pnextft{display:flex;gap:14px;align-items:center;margin-top:18px;flex-wrap:wrap}
.pnext .pnextft form{margin:0}
.pnext .pst{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--tx3);font-weight:600;white-space:nowrap}
.pnext .pst.lk{color:var(--orange)}
.pnext .pcount{font-family:var(--mono);font-size:12px;color:var(--tx3)}
.pnext[data-mode=closes] .pcount{color:var(--green-d)}
.pnext:has(#pform:not([hidden])){background:var(--ok-bg);box-shadow:inset 3px 0 0 var(--green)}
.pnext:has(#plock:not([hidden])){background:rgba(228,72,36,.06);box-shadow:inset 3px 0 0 var(--orange)}
@media(prefers-color-scheme:dark){.pnext .pm.pwarn{color:var(--gold)}}

/* the book blocks on the programme read as their own thing, quietly gold */
.prog li.k-book:not(.now):not(.next){border-left-color:var(--gold)}
.prog li.k-film:not(.now):not(.next){border-left-color:var(--orange)}

/* ---------------------------------------------------------------- the book
   The one page on the portal allowed to look like a shop window, because it
   has one job: get a cover, a price and a Buy button in front of someone who
   has fifteen minutes and a phone. Gold is the book's colour everywhere else
   here, so it carries the accent. */

.bookpage .thhead{border-bottom-color:var(--gold)}

.bkhero{display:flex;gap:36px;align-items:flex-start;margin-top:34px}
.bkcov{flex:0 0 190px}
.bkcov img{display:block;width:100%;height:auto;border-radius:3px 8px 8px 3px;
  background:var(--s3);
  box-shadow:-4px 0 0 rgba(0,0,0,.10), 0 18px 40px -14px rgba(20,48,70,.55),
             0 2px 6px rgba(20,48,70,.18)}
@media(prefers-color-scheme:dark){
  .bkcov img{box-shadow:-4px 0 0 rgba(0,0,0,.35), 0 18px 44px -14px rgba(0,0,0,.8)}
}
.bkbuy{flex:1;min-width:0}
.bkmeta{font-size:14px;color:var(--tx2);line-height:1.7}
.bkmeta div:first-child{font-size:16px;color:var(--tx);font-weight:600}
.bkprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:20px 0 16px}
.bkprice b{font-family:var(--serif);font-size:34px;font-weight:400;letter-spacing:-.02em;line-height:1}
.bkprice s{font-size:15px;color:var(--tx3)}
.bkprice span{font-size:13px;color:var(--tx3)}

.bkcta{display:inline-block;padding:15px 30px;border-radius:11px;border:1px solid var(--tx);
  background:var(--tx);color:var(--bg)!important;font-size:16px;font-weight:700;
  letter-spacing:.01em;text-decoration:none;border-bottom:1px solid var(--tx)!important}
.bkcta:hover{opacity:.88}
.bkcta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.bkfine{font-size:13px;color:var(--tx2);line-height:1.7;margin:16px 0 0;max-width:52ch}
.bkalt{font-size:13px;color:var(--tx3);margin:10px 0 0}

/* "I have bought it", and the line that replaces it afterwards. Outlined and
   sized to its words on purpose: a second ink slab under Buy would read as two
   equal choices, and this one is only for someone who already bought it.
   (.btn-ink is deliberately not reused · it is full width by design.) */
.bkbtn{padding:12px 24px;border-radius:10px;border:1px solid var(--tx);
  background:transparent;color:var(--tx);font:inherit;font-size:14.5px;
  font-weight:700;letter-spacing:.01em;cursor:pointer}
.bkbtn:hover{background:var(--tx);color:var(--bg)}
.bkbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bkgot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 0}
.bkgot span{font-size:13px;color:var(--tx3);line-height:1.6}
.bkhas{font-size:13.5px;color:var(--tx2);margin-top:16px}
.bkhas b{color:var(--tx)}

/* ---------------------------------------------------------- reading tracker
   One number, three ways to set it. The bar is the loud one because dragging
   is what people will actually do; the two boxes are for the reader who knows
   they are on page 118 and would rather not do the arithmetic. */
/* .chrome is sticky, so an anchor jump would otherwise land the heading
   underneath it · both routes redirect to /book#reading. */
.bkreadsect{scroll-margin-top:96px}
.bkread{border:1px solid var(--ln);border-radius:12px;background:var(--s1);
  padding:22px 24px 20px;box-shadow:inset 3px 0 0 var(--gold)}
.rdtop{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.rdpct{display:flex;align-items:baseline;gap:3px}
.rdpct b{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;letter-spacing:-.02em}
.rdpct span{font-size:15px;color:var(--tx3)}
.rdmeta{display:flex;flex-direction:column;gap:3px}
.rdmeta b{font-size:14px;font-weight:600}
.rdmeta span{font-family:var(--mono);font-size:11px;color:var(--tx3)}
.rddone{margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:5px;
  background:var(--green);color:#06240F}

/* --v is the read position, set inline by the template and again by the page
   on every drag, so the filled part of the track is the percentage itself. */
.rdrange{-webkit-appearance:none;appearance:none;width:100%;height:10px;
  margin:22px 0 2px;border-radius:6px;cursor:pointer;
  background:linear-gradient(to right,var(--gold) var(--v,0%),var(--s3) var(--v,0%))}
.rdrange:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.rdrange::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;
  border-radius:50%;background:var(--tx);border:3px solid var(--s1);
  box-shadow:0 2px 8px rgba(20,48,70,.4);cursor:grab}
.rdrange::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--tx);
  border:3px solid var(--s1);box-shadow:0 2px 8px rgba(20,48,70,.4);cursor:grab}

.rdrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--ln)}
.rdrow label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--tx3);font-weight:700}
.rdrow input{width:82px;padding:9px 10px;border:1px solid var(--ln2);border-radius:8px;
  background:var(--s1);color:var(--tx);font-family:var(--mono);font-size:14px}
.rdrow input:focus{outline:2px solid var(--gold);outline-offset:1px}
.rdrow button{margin-left:auto}
@media(max-width:560px){
  .rdpct b{font-size:36px}
  .rdrow button{margin-left:0;width:100%}
}

/* ------------------------------------------------------- the reading room
   /book after somebody owns the book. Same page, same palette, no shop: the
   tracker stops being a section halfway down and becomes the hero, sitting in
   the slot the price and the Buy button used to occupy. */

/* the block of pages, read part gold, sitting under the cover where the
   fore-edge would be · the one place progress is a picture and not a number */
.yourhero .edge{margin-top:12px;height:9px;border-radius:5px;background:var(--s3);
  overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,48,70,.14)}
.yourhero .edge i{display:block;height:100%;border-radius:5px;background:var(--gold);
  transition:width .35s cubic-bezier(.2,.7,.2,1)}

/* takes the column the price and the Buy button used to hold */
.yourread{flex:1;min-width:0;border:1px solid var(--ln);border-radius:12px;
  background:var(--s1);padding:22px 24px 20px;box-shadow:inset 3px 0 0 var(--gold)}
.yourread .rdrange{margin-top:20px}

.yrpace{font-size:13.5px;color:var(--tx2);line-height:1.7;margin:14px 0 0}
.yrpace b{color:var(--tx);font-weight:700}
.yrpace.fin{color:var(--green-d)}

.yracts{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--ln)}
.yracts span{flex:1;min-width:200px;font-size:12.5px;color:var(--tx3);line-height:1.65}

/* the papers on the book, with the button on them · this is the only marked
   thing the reading room offers, so it gets a row each and no card chrome */
.bkpaps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.bkpaps li{display:flex;gap:18px 24px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:16px 14px;border-bottom:1px solid var(--ln);
  border-left:3px solid transparent}
.bkpaps li.live{border-left-color:var(--green);background:var(--ok-bg)}
.bkpaps li.done{opacity:.5}
.bkpaps .pw{min-width:0}
.bkpaps .pw b{display:block;font-size:15.5px;font-weight:600;line-height:1.4}
.bkpaps .pw span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--tx3);margin-top:4px}
.bkpaps .bkcta{padding:11px 22px;border-radius:9px;font-size:14.5px}
.bkpaps .chip{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:6px;
  background:var(--s3);color:var(--tx3);white-space:nowrap}
.bkpaps .chip em{font-style:normal;color:var(--tx2)}
.bkpaps .chip.ok{background:var(--green);color:#06240F}
.bkpaps .chip.lk{background:var(--orange);color:#fff}

/* the way back to the shop for a misclick · deliberately the quietest thing
   on the page, one line above the fold nobody reads */
.bkundo{margin-top:22px}
.bkundo button{background:none;border:0;padding:0;font:inherit;font-size:12px;
  color:var(--tx3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bkundo button:hover{color:var(--tx2)}

/* the one paint straight after the button. It runs once, on the redirect that
   carries ?got=1, and never again · the page it lands on is the page they will
   open every day this week, so the moment has to be a moment and then stop. */
.gotline{margin:26px 0 0;padding:16px 20px;border-radius:11px;font-size:14px;
  line-height:1.7;color:var(--tx2);background:var(--s1);
  border:1px solid var(--ln);box-shadow:inset 3px 0 0 var(--gold)}
.gotline b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;
  color:var(--tx);letter-spacing:-.01em;margin-bottom:3px}
@keyframes gotin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.justgot .thhead,.justgot .gotline,.justgot .bkhero,.justgot .sect{
  animation:gotin .55s cubic-bezier(.2,.7,.2,1) both}
.justgot .gotline{animation-delay:.07s}
.justgot .bkhero{animation-delay:.15s}
.justgot .sect{animation-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .justgot .thhead,.justgot .gotline,.justgot .bkhero,.justgot .sect{animation:none}
  .yourhero .edge i{transition:none}
}

/* one card per device · the answer is meant to be found by scanning, so the
   device name is the loudest thing in each row */
.bkdev{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bkdev li{border:1px solid var(--ln);border-radius:12px;background:var(--s1);
  padding:18px 20px 16px;display:flex;flex-direction:column}
.bkdev .dh b{display:block;font-size:15.5px;font-weight:600}
.bkdev .dh span{display:block;font-family:var(--mono);font-size:11px;color:var(--tx3);
  margin-top:4px}
.bkdev p{font-size:13px;color:var(--tx2);line-height:1.65;margin:12px 0 14px;flex:1}
.bkdev a{font-family:var(--mono);font-size:12px;align-self:flex-start}
.bkapps{font-size:12.5px;color:var(--tx3);line-height:1.8;margin:16px 0 0}

.bkplan{list-style:none;margin:0;padding:0;counter-reset:bp;border-top:1px solid var(--ln)}
.bkplan li{counter-increment:bp;display:flex;gap:20px;align-items:baseline;
  padding:15px 8px;border-bottom:1px solid var(--ln)}
.bkplan li::before{content:counter(bp,decimal-leading-zero);font-family:var(--mono);
  font-size:11px;font-weight:700;color:var(--gold);flex:none}
.bkplan b{flex:0 0 210px;font-size:14.5px;font-weight:600;line-height:1.45}
.bkplan span{flex:1;min-width:0;font-size:13.5px;color:var(--tx2);line-height:1.7}

.bkback{margin-top:40px;padding-top:20px;border-top:1px solid var(--ln);font-size:13.5px}

/* ---------------------------------------------------------------- the film */
/* 16:9 held by aspect-ratio, so the player never letterboxes and never pushes
   the chapter list below the fold on a laptop. */
.vidwrap{margin-top:30px;border-radius:12px;overflow:hidden;background:#000;
  border:1px solid var(--ln);aspect-ratio:16/9}
.vidwrap iframe{display:block;width:100%;height:100%;border:0}
.vidfine{font-size:13px;color:var(--tx2);line-height:1.7;margin:14px 0 0;max-width:62ch}

/* Chapters are buttons, not links: they reload the player in place rather than
   navigating, and a link that does not navigate is a lie to a screen reader. */
.chaps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.chaps li{border-bottom:1px solid var(--ln)}
.chap{display:flex;gap:18px;align-items:baseline;width:100%;text-align:left;
  padding:13px 8px;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.chap:hover{background:var(--s2)}
.chap:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.chap .ct{flex:0 0 58px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--tx3)}
.chap .cw{flex:1;min-width:0;font-size:14px;line-height:1.55}
.chap.on{background:var(--s3)}
.chap.on .ct{color:var(--orange)}
.chap.on .cw{font-weight:600}

/* the itinerary's own book panel: the same cover and button, sized to sit
   inside a section rather than open a page */
.bkstrip{display:flex;gap:22px;align-items:center;border:1px solid var(--ln);
  border-radius:12px;background:var(--s1);padding:20px 22px;box-shadow:inset 3px 0 0 var(--gold)}
.bkstrip .c{flex:0 0 84px}
.bkstrip .c img{display:block;width:100%;height:auto;border-radius:2px 5px 5px 2px;
  background:var(--s3);box-shadow:-2px 0 0 rgba(0,0,0,.1), 0 8px 20px -8px rgba(20,48,70,.5)}
.bkstrip .w{flex:1;min-width:0}
/* direct child only · the paragraph below carries inline <b> for the price and
   the deadline, and they must stay inline body text, not 22px serif headings */
.bkstrip .w>b{font-family:var(--serif);font-weight:400;font-size:22px;display:block;line-height:1.2}
.bkstrip .w p b{color:var(--tx)}
.bkstrip .w .s{font-size:12.5px;color:var(--tx3);margin-top:5px;display:block}
.bkstrip .w p{font-size:13px;color:var(--tx2);line-height:1.7;margin:11px 0 0;max-width:56ch}
.bkstrip .a{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:15px}
.bkstrip .a .go{display:inline-block;padding:10px 20px;border-radius:9px;
  background:var(--tx);color:var(--bg)!important;border:1px solid var(--tx);
  border-bottom:1px solid var(--tx)!important;font-size:14px;font-weight:700;text-decoration:none}
.bkstrip .a .go:hover{opacity:.88}
.bkstrip .a .sec{font-size:13px}
/* how far in they are, on the itinerary's own strip */
.bkstrip .bkbar{height:6px;border-radius:4px;background:var(--s3);overflow:hidden;
  margin:15px 0 8px;max-width:340px}
.bkstrip .bkbar i{display:block;height:100%;border-radius:4px;background:var(--gold)}

/* On a phone the cover and the buying column stop competing for width: the
   cover sits above, centred, and everything that has to be read gets the full
   measure. Two columns at 375px turned the CTA into two lines. */
@media(max-width:640px){
  .bkhero{flex-direction:column;gap:26px;margin-top:28px}
  .bkcov{flex:none;width:160px;align-self:center}
  .bkprice{margin:16px 0 14px}
  .bkprice b{font-size:30px}
  .bkcta{display:block;text-align:center;padding:16px 20px}
  .bkfine{max-width:none}
  .bkplan li{flex-wrap:wrap;gap:6px 14px}
  .bkplan b{flex:1 0 100%}
  .bkplan span{flex:1 0 100%}
  .chap{flex-wrap:wrap;gap:3px 14px;padding:12px 6px}
  .chap .ct{flex:1 0 100%}
  .bkstrip{flex-direction:column;align-items:flex-start;gap:16px}
  .bkstrip .c{flex:none;width:96px}
  .bkstrip .a .go{display:block;width:100%;text-align:center}
}

.rules{font-size:13px;color:var(--tx2);line-height:1.9;margin:0;padding-left:18px}
.orgline{font-size:13px;color:var(--tx3);margin-top:14px}
.orgline b{color:var(--tx2)}

/* a locked or finished day is one quiet line, not a programme */
.dayhint{font-size:13px;color:var(--tx3);margin:10px 0 4px;padding:10px 12px;border:1px dashed var(--ln2);border-radius:10px;background:var(--s1)}

/* ---------------------------------------------------------------- nav
   Quiet text links in the chrome, not buttons. */
.qnav{display:flex;gap:28px;align-items:center}
.qnav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:#93A9BB;text-decoration:none;padding:21px 0 19px;border-bottom:2px solid transparent}
.qnav a:hover{color:#fff}
.qnav a:focus-visible{outline:2px solid var(--green-l);outline-offset:-6px}
.qnav a.on{color:#fff;border-bottom-color:var(--green-l)}
.qnav a.dim{color:#5F7488}
.qnav a.dim:hover{color:#93A9BB}

/* ---------------------------------------------------------------- landing
   The sign-in page runs without the navy chrome (base.html blanks it here), so
   it is paper from the top edge down. Two columns on a laptop · the event
   masthead reads left, the form is a card on the right, which is what fills a
   1280px window that a single 430px column used to leave empty. One column on
   a phone, and the card loses its box there so the page stays as airy as the
   rest of the portal. Light first: paper ground, ink type, the mark's colours
   doing the accents. */
/* Two washes off the mark, wide and faint, so a 1440px window is not a flat
   grey field behind one card. Under 4% ink each · at full strength this stops
   being a programme and starts being a marketing hero. */
.gate{min-height:100vh;min-height:100dvh;color:var(--tx);
  display:flex;align-items:center;justify-content:center;padding:56px 22px;
  background:
    radial-gradient(900px 620px at 8% 2%, rgba(96,168,108,.13), transparent 60%),
    radial-gradient(760px 600px at 96% 96%, rgba(240,180,48,.13), transparent 58%),
    var(--bg)}
@media(prefers-color-scheme:dark){
  .gate{background:
    radial-gradient(900px 620px at 8% 2%, rgba(124,196,136,.09), transparent 60%),
    radial-gradient(760px 600px at 96% 96%, rgba(245,197,90,.07), transparent 58%),
    var(--bg)}
}
.gate-in{width:100%;max-width:960px;display:grid;grid-template-columns:1fr minmax(340px,404px);
  gap:clamp(40px,5vw,64px);align-items:center}
/* the code step is one card, so it does not want the two-column split */
.gate-1 .gate-in{max-width:430px;grid-template-columns:1fr}

.gate .mark-lg{height:60px;margin:0 0 26px;display:block}
.gate .ev{font-size:10.5px;text-transform:uppercase;letter-spacing:.3em;color:var(--tx3);font-weight:700}
.gate h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.2vw,52px);letter-spacing:-.015em;margin:12px 0 0;color:var(--tx);line-height:1.05}
.gate .rule{height:3px;width:76px;margin:22px 0 0;border-radius:3px;
  background:linear-gradient(90deg,var(--green),var(--gold),var(--orange))}
.manif{margin:20px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,22px);letter-spacing:-.01em;line-height:1.6}
.manif .m1{color:var(--green-d)} .manif .m2{color:var(--navy)}
.manif .m3{color:#B8860B} .manif .m4{color:var(--orange)}
@media(prefers-color-scheme:dark){.manif .m2{color:#9FC0DA}.manif .m3{color:var(--gold)}}
.gate .about{margin:16px 0 0;font-size:15px;color:var(--tx2);line-height:1.75;max-width:42ch}

/* ---------------------------------------------------------------- the card */
.gate-card{background:var(--s1);border:1px solid var(--ln);border-radius:16px;
  padding:32px 34px 30px;text-align:left;
  box-shadow:0 28px 60px -34px rgba(20,48,70,.42), 0 2px 5px rgba(20,48,70,.05)}
@media(prefers-color-scheme:dark){.gate-card{box-shadow:0 28px 60px -30px rgba(0,0,0,.7)}}
.gate-card .mark-sm{height:38px;display:block;margin:0 0 20px}
.gate-card h2{font-family:var(--serif);font-weight:400;font-size:25px;letter-spacing:-.01em;margin:0}
.gate-card .cs{margin:8px 0 0;font-size:14px;color:var(--tx2);line-height:1.7}
.gate-card .cs strong{color:var(--tx);font-weight:600;overflow-wrap:anywhere}
.gate form{margin-top:24px}
.gate label.fld{margin-top:0}
.gate input.big{font-family:var(--sans);font-size:16px}
.gate input.big::placeholder{color:var(--tx3);opacity:.65}
.gate input.big:focus-visible{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.gate input.big.code{font-family:var(--mono);letter-spacing:.3em;text-align:center;font-size:20px}
.btn-ink{width:100%;margin-top:18px;padding:14px;font:inherit;font-size:15px;font-weight:600;letter-spacing:.01em;
  background:var(--tx);color:var(--bg);border:1px solid var(--tx);border-radius:10px;cursor:pointer}
.btn-ink:hover{opacity:.88}
.btn-ink:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.btn-ink:disabled{opacity:.55;cursor:default}
.gate .fine{border-top:1px solid var(--ln);margin:26px 0 0;padding-top:18px;font-size:12.5px;color:var(--tx3);line-height:1.7}

/* resend and the way out, one hairline row under the code field */
.gate-alt{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--ln)}
.gate-alt form{margin:0}
.gate-alt a{margin-left:auto;font-size:13px;color:var(--tx2);text-decoration:none;
  border-bottom:1px solid var(--ln2)}
.gate-alt a:hover{color:var(--tx);border-bottom-color:var(--tx)}

/* One column on a phone, centred, and the card gives up its box: a bordered
   panel edge to edge under a centred masthead reads as a second page. */
@media(max-width:880px){
  .gate{padding:44px 20px 56px;align-items:flex-start}
  .gate-in{max-width:440px;grid-template-columns:1fr;gap:22px;text-align:center}
  .gate .mark-lg{height:58px;margin:0 auto 24px}
  .gate h1{font-size:clamp(34px,11vw,44px)}
  .gate .rule{margin-left:auto;margin-right:auto}
  .gate .about{margin-left:auto;margin-right:auto}
  .gate-card{background:none;border:0;box-shadow:none;padding:0;text-align:center}
  .gate-card h2{font-size:22px}
  .gate-card .mark-sm{margin:0 auto 18px}
  /* the grid gap already separates the two, so the form does not add its own */
  .gate form{margin-top:8px;text-align:left}
  .gate-1 .gate form{margin-top:22px}
  .gate-alt{justify-content:center}
  .gate-alt a{margin-left:0}
  /* the masthead has already said it · the card would repeat the words */
  .gate-card>h2,.gate-card>.cs{display:none}
  .gate-1 .gate-card>h2,.gate-1 .gate-card>.cs{display:block}
  /* except on the closed card, where those two lines ARE the message */
  .gate-end>h2,.gate-end>.cs{display:block}
}

/* ---------------------------------------------------------------- profile
   Two registers on one page: the HR record reads as a record (hairline rows,
   label left, value right), and what the event derived from it reads as a
   consequence, each line carrying the field it came from. */
.recd{margin:0;border-top:1px solid var(--ln)}
.recd>div{display:flex;gap:24px;align-items:baseline;padding:12px 8px;border-bottom:1px solid var(--ln)}
.recd dt{flex:0 0 190px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);font-weight:700}
.recd dd{margin:0;flex:1;min-width:0;font-size:14.5px;font-weight:600;line-height:1.5}
.recd dd.mono{font-family:var(--mono);font-size:13px;font-weight:500}
.recd dd.brk{overflow-wrap:anywhere}
.pill.ok{background:var(--ok-bg);color:var(--green-d)}

/* A heading with one control on its right, which on a phone drops under it
   rather than squeezing the heading into two lines. */
.secth{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
.secth h2{margin-bottom:0}
.revbtn{background:none;border:1px solid var(--ln2);border-radius:8px;padding:6px 13px;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx3);cursor:pointer;white-space:nowrap}
.revbtn:hover{color:var(--tx);border-color:var(--tx2)}
.revbtn:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Masked by default so a script that never runs leaves the record covered
   rather than uncovered. .open is added by the button, nothing else. */
.privv .rl{display:none}
.privv.open .rl{display:inline}
.privv.open .mk{display:none}
.privv .mk{letter-spacing:.06em;color:var(--tx2)}

/* ------------------------------------------------------------- standing
   One seat's view of the board: a rank, the field it was measured against,
   and a score. The rank is the only large number on the page, because it is
   the one thing somebody opens this section to read. */
.stnd{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.st{border:1px solid var(--ln);border-radius:12px;background:var(--s1);
  padding:18px 20px 16px;box-shadow:inset 3px 0 0 var(--green)}
.st .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);font-weight:700}
.st .rk{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.st .rk b{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;letter-spacing:-.02em}
.st .rk span{font-size:14px;color:var(--tx3)}
.st .m{font-size:12.5px;color:var(--tx3);margin-top:5px;line-height:1.5}
.st .sc{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--ln)}
.st .sc span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);font-weight:700}
.st .sc b{font-family:var(--mono);font-size:16px;font-weight:700}
.st .sc i{flex:1 0 100%;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--tx3)}

/* ------------------------------------------------------- record + derived
   The two halves of the same idea, so on a laptop they sit next to each other
   and a consequence reads beside the field it came from. Each column is
   narrower than the full measure, so the labels stack above their values
   exactly as they do on a phone. */
.twocol{display:grid;gap:0}
@media(min-width:900px){
  .twocol{grid-template-columns:1fr 1fr;gap:44px}
  .twocol .recd>div,.twocol .derv li{flex-direction:column;gap:4px}
  .twocol .recd dt,.twocol .derv .dk{flex:none}
}

.derv{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.derv li{display:flex;gap:24px;align-items:baseline;padding:14px 8px;border-bottom:1px solid var(--ln)}
.derv .dk{flex:0 0 190px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);font-weight:700}
.derv .dv{flex:1;min-width:0}
.derv .dv b{display:block;font-size:15px;font-weight:600;line-height:1.45}
.derv .src{display:block;font-size:12.5px;color:var(--tx3);margin-top:3px;line-height:1.6}

.nowbox{display:flex;gap:14px;flex-wrap:wrap}
.nb{flex:1 1 220px;border:1px solid var(--ln);border-radius:12px;padding:16px 20px;background:var(--s1)}
.nb.on{border-color:var(--green);background:var(--ok-bg)}
.nb .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);font-weight:700}
.nb.on .k{color:var(--green-d)}
.nb .v{font-size:15.5px;font-weight:600;margin-top:6px;line-height:1.4}
.nb .t{font-family:var(--mono);font-size:12.5px;color:var(--tx3);margin-top:5px}

.notecard.ok{border-style:solid;border-color:var(--green);background:var(--ok-bg);color:var(--tx2)}
.notecard.ok b{color:var(--tx)}
.qt{font-size:12px;color:var(--tx3)}

/* 16px so iOS Safari does not auto-zoom when the correction form gets focus */
.corr select,.corr textarea{width:100%;max-width:560px;font:inherit;font-size:16px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--ln2);background:var(--s2);color:var(--tx)}
.corr textarea{resize:vertical;line-height:1.6;min-height:88px}
.corr select:focus-visible,.corr textarea:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.corr .fine{margin-top:14px;font-size:12px;color:var(--tx3);line-height:1.7}

/* ---------------------------------------------------------------- mobile */
@media(max-width:640px){
  .recd>div,.derv li{flex-direction:column;gap:4px}
  .recd dt,.derv .dk{flex:none}
  /* townhall.css loads only on portal pages, so this leaves exam pages alone:
     the mark carries the brand and the nav gets the width */
  .wordmark{display:none}
  /* up to five links, and "Sign out" was clipping on 360-375px phones; the
     tighter row padding and gaps buy the width back, nowrap keeps each link
     whole, and the admin five-link case wraps onto its own row cleanly */
  .crow{padding:0 14px;gap:12px}
  .qnav{gap:10px}
  .qnav a{font-size:10px;letter-spacing:.08em;padding:21px 0 19px;white-space:nowrap}
  .thpage{padding:28px 18px 70px}
  .facts{flex-direction:column}
  .fact+.fact{border-left:0;border-top:1px solid var(--ln)}
  /* the profile carries two short facts, not the itinerary's three, so they
     stay a row on a phone instead of becoming two full-width bars */
  .facts.tight{flex-direction:row}
  .facts.tight .fact{padding:12px 14px}
  .facts.tight .fact+.fact{border-left:1px solid var(--ln);border-top:0}
  .st .rk b{font-size:38px}
  /* a textarea the full width of a phone is fine; on a laptop it was a field
     the length of the page for a two-line note */
  .corr select,.corr textarea{max-width:none}
  .prog li{flex-direction:column;gap:3px;padding:12px 10px}
  .prog .t{flex:none}
  .dayttl .live{margin-left:0;flex-basis:100%}
}

/* ---------------------------------------------------------------- dry run */
/* The desk walking the event with nothing shut. Gold, sticky and unmissable,
   because the one thing that must never happen is mistaking a rehearsal for
   the real portal. */
.dryban{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:center;padding:9px 24px;font-size:13px;line-height:1.5;
  background:var(--gold);color:#3D2E05;border-bottom:1px solid rgba(0,0,0,.14)}
.dryban b{font-weight:700;white-space:nowrap}
.dryban span{color:#4A3A08}
.dryban a{color:#3D2E05;font-weight:600;border-bottom:1px solid rgba(61,46,5,.4);text-decoration:none}
.dryban form{margin:0 0 0 auto}
.dryban .btn{padding:4px 12px;font-size:12.5px;background:rgba(255,255,255,.7);
  border-color:rgba(61,46,5,.3);color:#3D2E05}
@media(max-width:640px){.dryban form{margin-left:0}}

.dgrp{margin-top:26px}
.dgrp .dgh{display:flex;align-items:baseline;gap:10px;padding-bottom:6px;
  border-bottom:1px solid var(--ln);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--tx2)}
.dgrp .dgh span{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--tx3);margin-left:auto}
.dgrp .plist .pn{font-size:10px;letter-spacing:.04em}
.dgrp .plist .pa{display:flex;gap:8px;align-items:center}
/* One person's papers carry no code, so the row reads title first. What it
   gains instead is the truth about that person: handed in, missed, or the
   time it opens. The button beside it is the dry run and is always live, so
   these words are the only thing on the row saying where they actually are. */
.plist.own li{padding-left:14px}
.plist.own .pst{margin-left:auto;padding-left:12px}
.plist.own .pst.rs-submitted{color:var(--green-d)}
.plist.own .pst.rs-resume,.plist.own .pst.rs-open{color:var(--green-d)}
.plist.own .pst.rs-missed{color:var(--orange)}
.plist.own .pst.rs-locked{color:var(--orange)}
.plist.own .pst.rs-early{color:var(--tx3)}
.plist li.st-missed{opacity:.72;box-shadow:inset 3px 0 0 var(--orange);border-radius:0 10px 10px 0}
.plist li.st-submitted{opacity:.72}
.plist li.st-early .pt{color:var(--tx2)}
@media(max-width:560px){
  .plist.own .pst{grid-column:2;margin-left:0;padding-left:0;margin-top:5px}
}

/* ---------------------------------------------------------------- print
   The page is set like a printed programme, so let it print as one: the
   chrome stays on screen, the content takes the full sheet, and the status
   marks hold up in black and white. Declared last so these beat the screen
   rules they override at equal specificity. */
@media print{
  body{background:#fff;color:#000}
  .chrome,.qnav{display:none}
  .thpage{max-width:none;padding:0}
  .prog li,.teambox,.dayttl{break-inside:avoid}
  .dayttl .badge,.dayttl .badge.today,.state,.state.now,.state.next{color:#000;background:none}
  .dayttl .badge{border:1px solid #000}
  .prog li.now,.plist li.st-open,.plist li.st-late,.plist li.st-resume,
  .plist li.st-locked{background:none;box-shadow:none}
  /* the dry run bar is the one piece of chrome that has to survive printing:
     a rehearsal on paper must still say it is a rehearsal. It gives up the
     gold and the buttons and keeps the words. */
  .dryban{position:static;background:none;color:#000;border:1px solid #000;
    padding:8px 12px;margin-bottom:16px}
  .dryban form{display:none}
}

/* One thing at a time. On the live day the programme collapses to whatever is
   running right now: a single card, said large, with the one action it needs.
   Nothing ahead of it is rendered, so nobody reads about the next session
   during the one they are in. */
.onecard{position:relative;overflow:hidden;background:#0E1620;color:#F4F3EF;
  border-radius:18px;padding:34px 32px 28px;margin:6px 0 4px;
  box-shadow:0 18px 44px -22px rgba(14,22,32,.55)}
.onecard::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:150%;
  background:radial-gradient(60% 55% at 18% 0%,rgba(122,196,140,.20),transparent 70%),
             radial-gradient(50% 50% at 88% 12%,rgba(224,184,119,.16),transparent 72%);
  pointer-events:none}
.onecard>*{position:relative}
.oc-eyebrow{display:flex;align-items:center;gap:8px;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#9fb0a6;margin:0 0 14px}
.oc-eyebrow i{width:7px;height:7px;border-radius:50%;background:#7AC48C;
  box-shadow:0 0 0 0 rgba(122,196,140,.7);animation:ocp 2.4s infinite}
@keyframes ocp{70%{box-shadow:0 0 0 9px rgba(122,196,140,0)}
               100%{box-shadow:0 0 0 0 rgba(122,196,140,0)}}
.oc-title{font-size:31px;line-height:1.14;margin:0 0 12px;font-weight:600;letter-spacing:-.015em}
.oc-note{font-size:15.5px;line-height:1.62;color:#c9d2cd;margin:0 0 22px;max-width:62ch}
.oc-btn{display:inline-block;background:#F4F3EF;color:#0E1620;font-weight:600;
  font-size:15px;padding:13px 26px;border-radius:11px;text-decoration:none;
  transition:transform .14s ease,box-shadow .14s ease}
.oc-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.oc-foot{font-size:12.5px;color:#7f8c86;margin:20px 0 0}
.onecard.waiting{background:#141d16}
.onecard.waiting .oc-eyebrow i{background:#e0b877;animation:none}
@media(max-width:640px){.onecard{padding:26px 20px 22px;border-radius:15px}
  .oc-title{font-size:25px}.oc-note{font-size:15px}}