/* vela-hub — Velella Purple #4B4E9B, Pacific Blue #0B3A5B.
   Local assets only, no CDN: the data-boundary story has to hold on the
   sign-in page too, not only once you are inside. */
:root{
  --purple:#4B4E9B; --blue:#0B3A5B; --ink:#12212b; --muted:#5b6b78;
  --page:#f3f6f8; --card:#fff; --line:#dde5ea; --sail:#7c80c9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--page);
}
a{color:var(--purple)}
.muted{color:var(--muted);font-size:.92em}
.centred{max-width:38rem;margin:14vh auto;padding:0 1.5rem}

/* ---------- masthead ---------- */
header.top{
  background:linear-gradient(160deg,var(--blue) 0%,#14496e 55%,var(--purple) 160%);
  color:#fff; padding:3.5rem 1.5rem 3rem;
}
.wrap{max-width:62rem;margin:0 auto}
.brand{display:flex;align-items:center;gap:.8rem;margin-bottom:2rem}
.brand img{width:34px;height:34px;flex:none}
/* The mark is navy-on-transparent, which vanishes against the dark hero. Render
   it as a white monochrome silhouette there — the shape is the identity, and a
   navy logo on a navy field is not a logo. Inner pages keep it full-colour on
   their light headers. */
.top .brand img{filter:brightness(0) invert(1);opacity:.95}
.brand b{font-size:1.15rem;font-weight:600;letter-spacing:.02em}
h1{font-size:2.4rem;line-height:1.2;margin:0 0 1rem;font-weight:650;letter-spacing:-.02em}
header.top p.lede{font-size:1.15rem;max-width:34rem;margin:0;color:#dce8f2}

/* ---------- body ---------- */
main{max-width:62rem;margin:0 auto;padding:3rem 1.5rem 5rem}
section+section{margin-top:3rem}
h2{font-size:1.25rem;margin:0 0 .8rem;font-weight:620}
/* ONE VELA PER ROW, STACKED (founder, 2026-09-21: "placing them horizontally does
   not make sense ... present vertically stacked in rows").

   It was auto-fit minmax(15rem,1fr), so three courses became three 15rem columns.
   Nothing on this card is 15rem-shaped: each one carries a title, a blurb, an Open
   button and a Session tools box whose two rows each put a 9rem button beside a
   sentence explaining what it does. In a 15rem column that leaves about 4rem for
   the sentence, which wrapped to two words a line and ran the card to three
   screens — while a course with a shorter blurb left a hand's-breadth of white
   space, because grid rows stretch to the tallest cell.

   A row does not have that problem: the explanation gets the width it needs, the
   cards are as tall as their own content, and a fourth course does not make
   everything narrower. */
.grid{display:flex;flex-direction:column;gap:1.1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.3rem}
.card h3{margin:.1rem 0 .5rem;font-size:1rem;font-weight:620}
.card p{margin:0;color:var(--muted);font-size:.94rem}

/* ---------- sign-in ---------- */
.signin{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1.6rem;max-width:24rem}
.btn{display:flex;align-items:center;gap:.7rem;width:100%;padding:.7rem .9rem;margin:.5rem 0;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  font:inherit;font-weight:520;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--sail);background:#fbfcfd}
.btn svg{width:19px;height:19px;flex:none}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn .tag{margin-left:auto;font-size:.75rem;color:var(--muted);font-weight:400}

/* ---------- vela chooser ---------- */
.vela{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:1.3rem;gap:.5rem}
.vela .arch{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sail);
  font-weight:640}
.vela h3{margin:0;font-size:1.08rem}
.vela p{margin:0;color:var(--muted);font-size:.94rem;max-width:62ch}
/* The action sits at its own size now rather than filling the row. At column
   width a stretched button was fine; at 62rem it would be a stripe. */
.vela > button{align-self:flex-start;min-width:11rem}
.vela button{margin-top:.9rem;padding:.6rem 1rem;border:0;border-radius:7px;
  background:var(--purple);color:#fff;font:inherit;font-weight:560;cursor:pointer}
.vela button:hover{background:#40437f}
.vela button:disabled{background:var(--muted);cursor:default}

.bar{display:flex;align-items:center;gap:1rem;padding:.8rem 1.5rem;background:var(--card);
  border-bottom:1px solid var(--line)}
.bar .who{margin-left:auto;color:var(--muted);font-size:.9rem}
.status{margin:1.2rem 0;padding:.8rem 1rem;border-radius:8px;background:#eef2f6;
  border:1px solid var(--line);font-size:.94rem}
.status.err{background:#fdf0ef;border-color:#f0c9c4}
footer{max-width:62rem;margin:0 auto;padding:2rem 1.5rem 4rem;color:var(--muted);font-size:.88rem;
  border-top:1px solid var(--line)}
@media (max-width:640px){h1{font-size:1.9rem}header.top{padding:2.5rem 1.2rem 2rem}}

/* Teaching / Research sections on the chooser. A teaching vela and a research
   vela differ in what they are FOR, and a flat list said so only in a small chip.
   The blurb is about the user's purpose, not our taxonomy — nobody arrives
   wanting "the ACADEMIC archetype", they arrive wanting to do a course. */
.arch-group { margin-top: 2rem; }
.arch-group:first-of-type { margin-top: 1rem; }
.arch-head {
  font-size: 1.05rem; margin: 0 0 .2rem;
  padding-bottom: .35rem; border-bottom: 1px solid rgba(127,127,127,.25);
}
.arch-blurb { margin: .45rem 0 1rem; max-width: 42rem; font-size: .93rem; }
.arch-group .grid { margin-top: 0; }

/* Tester tools on the chooser card — two operations that are easy to confuse and
   differ in whether your work survives, so each states its consequence NEXT TO
   the button rather than in a title attribute nobody hovers. Ruling, 2026-08-10:
   "There also needs to be an explanation of what is what and what each does." */
.testertools{margin-top:.8rem;padding:.65rem .75rem;border:1px solid var(--line,#3a3a3a);
             border-radius:6px;background:rgba(255,255,255,.02)}
.tt-head{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;opacity:.55;
         margin-bottom:.5rem}
.tt-row{display:flex;gap:.7rem;align-items:flex-start;margin:.45rem 0}
.tt-row button{flex:0 0 auto;min-width:9rem}
/* On a phone the row cannot hold a 9rem button AND a sentence: that is the same
   squeeze the column layout produced on a desktop, and the honest fix is to stop
   asking for two things side by side. Below this width the button sits above the
   text it explains, which keeps them associated without competing for the line. */
@media (max-width:34rem){
  .tt-row{flex-direction:column;gap:.35rem}
  .tt-row button{width:100%;min-width:0}
  .tt-what{max-width:none}
  .vela > button{width:100%}
}
/* Capped, because the fix for "too narrow" is not "as wide as the page". A row
   gives these sentences 47rem if nothing stops them, which is twice a comfortable
   measure. */
.tt-what{font-size:.8rem;line-height:1.4;opacity:.85;max-width:52ch}
.tt-what b{opacity:1}
.tt-what i{opacity:.7}
button.danger{border-color:#a4443a;color:#e6a49c}
button.danger:hover:not(:disabled){background:#a4443a;color:#fff}
button:disabled{opacity:.45;cursor:not-allowed}

/* A vela that is not ready to be used says so on its own card, above the blurb.
   Amber rather than red: this is "know what you are opening", not an error. */
.vela .vstatus {
  display: inline-block;
  margin: 0 0 .55rem;
  padding: .3rem .6rem;
  border-left: 3px solid #c9922b;
  background: #fdf6e6;
  color: #6b4e12;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 3px;
}