/* swish-look.css
 *
 * SWISH IN THE OBSIDIAN EDITORIAL LOOK (round SWR, Sam, 13-Oct-2026).
 * The student side of SWISH wears the look of the Just Build design system
 * (public/jb-system.css). Look only: no word, question, answer, score, link
 * or field is decided here.
 *
 * Loaded by the three pages a student meets: index.html (the code, the form,
 * the ten questions, the report as cards), interest.html and
 * masterclass.html. The college dashboard and the ambassador page do not
 * load it and look as they did.
 *
 * WHY A SHEET OF ITS OWN. Every rule of jb-system.css begins with the opt in
 * of a route shell, and it is a large file written for a laptop; SWISH is
 * three small pages taken on a phone. So SWISH holds the same tokens, by the
 * same names and with the same values (test/swish-look.test.js holds the two
 * together), and only the components it draws.
 *
 * COLOURS (exact, as in the system)
 *   obsidian   #0B0B0C  the page ground
 *   surface    #141415  cards, panels, tiles
 *   raised     #1B1B1C  a thing on a surface
 *   porcelain  #F5F0E7  headlines, the primary button (obsidian words)
 *   text       #D9D4CB  body
 *   muted      #A7A29A  secondary text
 *   gold       #B69A70  small spaced capitals, progress, the chosen answer
 *   gold light #C9B48E  links
 *   bronze     #8B7660  the edge of a field and of an answer
 *   hairline   #2A2826  dividers
 *   OC orange  #E65B24  the brand dot, and nothing else
 *   terracotta #E3A07E  a refusal, always with its mark and its sentence
 *
 * TYPE. The three faces of the system, from the platform's own files
 * (public/fonts, with their licences). A SWISH name answers nothing of the
 * platform's own folder, so the same files are served at /swish-files/jb-fonts
 * (swish/lib/site-routes.js).
 *   DM Serif Display, upright: big headlines, the level name on the report
 *   Manrope: questions, answers, buttons, everything else
 *   Newsreader: the one lead line of a screen
 *
 * Radii 4 to 8 px. Everything pressed is at least 44 px high.
 */

@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/swish-files/jb-fonts/dm-serif-display-400.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/swish-files/jb-fonts/newsreader-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/swish-files/jb-fonts/manrope-variable.woff2") format("woff2"); }

/* ---------- the tokens ---------- */
:root {
  --jb-bg: #0B0B0C;
  --jb-surf: #141415;
  --jb-raised: #1B1B1C;
  --jb-porc: #F5F0E7;
  --jb-text: #D9D4CB;
  --jb-mute: #A7A29A;
  --jb-gold: #B69A70;
  --jb-gold-hi: #C9B48E;
  --jb-bronze: #8B7660;
  --jb-hair: #2A2826;
  --jb-oc: #E65B24;
  --jb-warn: #E3A07E;
  --jb-gold-wash: rgba(182, 154, 112, .10);
  --jb-gold-ring: rgba(182, 154, 112, .22);
  --jb-warn-wash: rgba(227, 160, 126, .07);
  --jb-disp: "DM Serif Display", Georgia, "Times New Roman", serif;
  --jb-read: "Newsreader", Georgia, "Times New Roman", serif;
  --jb-ui: "Manrope", "Segoe UI", Arial, sans-serif;
  --jb-r1: 4px;
  --jb-r2: 6px;
  --jb-r3: 8px;
  /* The pages' own older names, given the system's colours, so a colour
     written in a page's markup follows. */
  --orange: var(--jb-gold-hi);
  --ink: var(--jb-porc);
  --muted: var(--jb-mute);
  --card: var(--jb-surf);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--jb-bg); }
body {
  min-height: 100vh; background: var(--jb-bg); color: var(--jb-text);
  font-family: var(--jb-ui); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font-family: var(--jb-ui); }
a { color: var(--jb-gold-hi); text-underline-offset: 3px; }
a:hover { color: var(--jb-porc); }
:focus-visible { outline: 2px solid var(--jb-gold); outline-offset: 2px; }

/* ---------- the top bar: the OC dot, the name in spaced capitals ---------- */
header { padding: 16px 20px; border-bottom: 1px solid var(--jb-hair); }
.brand { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 9px;
         font: 600 12px/1.4 var(--jb-ui); letter-spacing: .2em; text-transform: uppercase;
         color: var(--jb-porc); }
.brand:before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--jb-oc); }
.brand b { font-weight: 600; color: var(--jb-porc); }
footer { border-top: 1px solid var(--jb-hair); background: var(--jb-bg); color: var(--jb-mute);
         font: 500 12px/1.4 var(--jb-ui); padding: 16px 20px; }

/* ---------- words ---------- */
h1 { font-family: var(--jb-disp); font-weight: 400; font-style: normal; color: var(--jb-porc);
     font-size: clamp(30px, 8.4vw, 44px); line-height: 1.1; letter-spacing: 0;
     margin: 0 0 14px; overflow-wrap: anywhere; }
h2 { font-family: var(--jb-disp); font-weight: 400; color: var(--jb-porc); font-size: 26px; line-height: 1.15; margin: 0 0 8px; }
h3 { font-family: var(--jb-ui); font-weight: 700; color: var(--jb-porc); font-size: 17px; line-height: 1.35; margin: 0 0 6px; }
.lede { font-family: var(--jb-read); font-weight: 400; color: var(--jb-text);
        font-size: 18px; line-height: 1.5; margin: 0 0 26px; }
.eyebrow { font: 600 11px/1.5 var(--jb-ui); letter-spacing: .2em; text-transform: uppercase;
           color: var(--jb-gold); margin-bottom: 12px; overflow-wrap: anywhere; }
.note, .hint { color: var(--jb-mute); font-size: 13.5px; line-height: 1.5; }

/* ---------- fields: a bronze edge; in use, a gold edge and a soft ring ---------- */
label { display: block; font: 600 13.5px/1.4 var(--jb-ui); color: var(--jb-porc); margin: 18px 0 6px; }
label .opt { font-weight: 400; color: var(--jb-mute); }
input, select {
  width: 100%; min-height: 46px; border: 1px solid var(--jb-bronze); border-radius: var(--jb-r2);
  padding: 11px 13px; font: 500 16px/1.4 var(--jb-ui);
  background: var(--jb-bg); color: var(--jb-porc);
}
select option { background: var(--jb-surf); color: var(--jb-porc); }
input::placeholder { color: var(--jb-mute); opacity: 1; }
input:focus, select:focus { outline: none; border-color: var(--jb-gold); box-shadow: 0 0 0 3px var(--jb-gold-ring); }
/* a box the browser filled in keeps the page's colours */
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--jb-porc); caret-color: var(--jb-porc);
  box-shadow: 0 0 0 100px var(--jb-bg) inset; transition: background-color 9999s;
}
input:-webkit-autofill:focus { box-shadow: 0 0 0 100px var(--jb-bg) inset, 0 0 0 3px var(--jb-gold-ring); }
/* a field the form could not take: its sentence is drawn under it */
[aria-invalid="true"] { outline: none; border-color: var(--jb-warn); box-shadow: 0 0 0 3px var(--jb-warn-wash); }

/* the tick boxes, and the box no person sees */
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; flex: none; margin: 1px 0 0; padding: 0;
                         accent-color: var(--jb-gold); box-shadow: none; }
.tick { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 0;
        font: 400 15px/1.5 var(--jb-ui); color: var(--jb-text); margin: 12px 0 0; cursor: pointer; }
/* Off the screen and not display none: a script that skips hidden boxes
   would skip that too. A person using a keyboard or a screen reader never
   reaches it. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- buttons: one porcelain button with obsidian words ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
       background: var(--jb-porc); color: var(--jb-bg); border: 1px solid var(--jb-porc);
       border-radius: var(--jb-r2); padding: 11px 24px; font: 700 15px/1.2 var(--jb-ui);
       text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--jb-gold); box-shadow: 0 0 0 3px var(--jb-gold-ring); color: var(--jb-bg); }
.btn:disabled { background: var(--jb-raised); border-color: var(--jb-hair); color: var(--jb-mute);
                box-shadow: none; opacity: 1; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--jb-porc); border-color: var(--jb-bronze); }
.btn.ghost:hover { border-color: var(--jb-gold); color: var(--jb-porc); }

/* ---------- a refusal: its mark and one plain sentence, in terracotta ---------- */
.err { position: relative; background: var(--jb-warn-wash); color: var(--jb-warn);
       border-left: 2px solid var(--jb-warn); border-radius: 0 var(--jb-r2) var(--jb-r2) 0;
       padding: 12px 14px 12px 42px; font: 500 14px/1.5 var(--jb-ui); margin: 14px 0 0; }
.err:before { content: "!"; position: absolute; left: 14px; top: 13px; width: 17px; height: 17px;
              border-radius: 50%; border: 1.5px solid var(--jb-warn); display: grid; place-items: center;
              font: 700 11px/1 var(--jb-ui); }
.err b { color: var(--jb-warn); }
/* a line that is not a refusal */
.ok { background: var(--jb-gold-wash); color: var(--jb-text); border-left: 2px solid var(--jb-gold);
      border-radius: 0 var(--jb-r2) var(--jb-r2) 0; padding: 12px 14px;
      font: 500 14px/1.5 var(--jb-ui); margin: 14px 0 0; }

/* ---------- an answer: a quiet tile; chosen is a gold edge, a faint gold fill and a tick ---------- */
.rung, .doorpick, .stream, .pick {
  position: relative; display: block; width: 100%; min-height: 48px; text-align: left; cursor: pointer;
  background: var(--jb-surf); border: 1px solid var(--jb-bronze); border-radius: var(--jb-r2);
  padding: 13px 16px; font: 500 15px/1.5 var(--jb-ui); color: var(--jb-text); text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.rung:hover, .doorpick:hover, .stream:hover, .pick:hover { border-color: var(--jb-gold-hi); color: var(--jb-porc); }
.rung.on, .doorpick.on { border-color: var(--jb-gold); background: var(--jb-gold-wash); color: var(--jb-porc);
                         box-shadow: inset 0 0 0 1px var(--jb-gold); padding-right: 58px; }
.rung.on:after, .doorpick.on:after { content: ""; position: absolute; right: 32px; top: 50%; width: 7px; height: 13px;
                                     margin-top: -9px; border: solid var(--jb-gold); border-width: 0 2px 2px 0;
                                     transform: rotate(45deg); }
.rung:focus-visible, .doorpick:focus-visible, .stream:focus-visible, .pick:focus-visible { outline: 2px solid var(--jb-gold); outline-offset: 2px; }

/* ---------- the helper (public/helper.js draws it; here it wears the look) ---------- */
html .oh-btn { background: var(--jb-surf); color: var(--jb-porc); border-color: var(--jb-bronze); border-radius: var(--jb-r2) 0 0 var(--jb-r2); font-family: var(--jb-ui); box-shadow: none; }
html .oh-btn.oh-new:after { background: var(--jb-gold); border-color: var(--jb-bg); }
html .oh-ov { background: rgba(0, 0, 0, .7); font-family: var(--jb-ui); }
html .oh-box { background: var(--jb-surf); color: var(--jb-text); border: 1px solid var(--jb-hair); border-radius: var(--jb-r3); font-family: var(--jb-ui); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
html .oh-box:focus, html .oh-box:focus-visible { outline: none; }
html .oh-head, html .oh-foot { border-color: var(--jb-hair); }
html .oh-title, html .oh-q { font-family: var(--jb-disp); font-style: normal; font-weight: 400; color: var(--jb-porc); }
html .oh-title { font-size: 20px; line-height: 1.2; }
html .oh-q { font-size: 19px; line-height: 1.25; }
html .oh-where, html .oh-reply { color: var(--jb-mute); font: 400 12.5px/1.4 var(--jb-ui); }
html .oh-x { color: var(--jb-mute); }
html .oh-search input, html .oh-fin { background: var(--jb-bg); border: 1px solid var(--jb-bronze); border-radius: var(--jb-r2); color: var(--jb-porc); min-height: 44px; font: 500 16px/1.45 var(--jb-ui); }
html .oh-search input:focus, html .oh-fin:focus { border-color: var(--jb-gold); outline: none; box-shadow: 0 0 0 3px var(--jb-gold-ring); }
html .oh-search input::placeholder, html .oh-fin::placeholder { color: var(--jb-mute); opacity: 1; }
html .oh-fin.oh-bad { border-color: var(--jb-warn); outline: 0; box-shadow: 0 0 0 3px var(--jb-warn-wash); }
html .oh-lab { font: 600 10.5px/1.4 var(--jb-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--jb-gold); }
html .oh-chip { background: var(--jb-raised); border: 1px solid var(--jb-hair); border-radius: var(--jb-r1); color: var(--jb-text); font: 500 14.5px/1.4 var(--jb-ui); }
html .oh-chip:hover { border-color: var(--jb-gold); color: var(--jb-porc); }
html .oh-a, html .oh-none { color: var(--jb-text); font: 400 14.5px/1.6 var(--jb-ui); }
html .oh-flab { color: var(--jb-porc); font: 600 13.5px/1.4 var(--jb-ui); }
html .oh-say { color: var(--jb-warn); font: 500 13px/1.45 var(--jb-ui); }
html .oh-act { background: var(--jb-porc); color: var(--jb-bg); border: 1px solid var(--jb-porc); border-radius: var(--jb-r2); font: 700 14.5px/1.2 var(--jb-ui); }
html .oh-act:hover { border-color: var(--jb-gold); box-shadow: 0 0 0 3px var(--jb-gold-ring); }
html .oh-act:disabled { opacity: 1; background: var(--jb-raised); border-color: var(--jb-hair); color: var(--jb-mute); }
html .oh-back { color: var(--jb-gold-hi); font: 600 13.5px/1.3 var(--jb-ui); }
html .oh-back:hover { color: var(--jb-porc); }
html .oh-person { border: 1px solid var(--jb-bronze); color: var(--jb-porc); border-radius: var(--jb-r2); background: none; font: 600 14.5px/1.2 var(--jb-ui); }
html .oh-person:hover { background: var(--jb-raised); border-color: var(--jb-gold); }
html .oh-mark { outline-color: #B69A70 !important; box-shadow: 0 0 0 7px rgba(182, 154, 112, .28) !important; }
@media (max-width: 560px) { html .oh-box { border-radius: var(--jb-r3) var(--jb-r3) 0 0; } }