/* Llwybr shared chrome and components.

   Linked by every page-shaped surface: landing, dashboard, certificate, and
   the auth / teacher / admin layouts. Pages keep only the rules that are
   genuinely theirs. The player has its own stylesheet (css/style.css) because
   it is an application layout rather than a page, but it reads the same
   tokens and uses the same .trail, .stars and button vocabulary.

   Requires tokens.css to be linked first. */

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img{max-width:100%}
code,kbd,samp,pre,.mono{font-family:var(--font-mono)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;width:100%}
.wrap.narrow{max-width:1080px}

/* Gold focus on the dark chrome, where the red ring would disappear into
   the plum. The base ring lives in parts.css. */
header :where(a,button,input,select):focus-visible,
footer :where(a,button):focus-visible,
.on-ink :where(a,button,input,select):focus-visible{outline:3px solid var(--bloom)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:.005em}
h1{font-size:var(--step-3)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1)}
.display{font-size:var(--step-4);font-weight:700}
.eyebrow{
  font-family:var(--font-body);font-weight:600;font-size:var(--step--1);
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.sub{color:var(--muted);font-size:var(--step-0);margin-top:6px;max-width:70ch}
.hint{font-weight:400;font-size:var(--step--1);color:var(--muted);margin-top:5px;line-height:1.45}
a{color:var(--draig)}
a:hover{color:var(--draig-deep)}

/* ---------- chrome ---------- */
header{background:var(--ink);color:#fff}
header .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
header .brand{
  color:#fff;text-decoration:none;font-family:var(--font-display);
  font-size:var(--step-2);font-weight:600;letter-spacing:.01em;
}
header .brand:hover{color:var(--path)}
header .tag{
  background:#ffffff1f;color:var(--path);border-radius:99px;padding:3px 10px;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
header nav.main{display:flex;gap:4px;margin-left:8px}
header nav.main a{
  color:#E3D2C6;text-decoration:none;font-weight:600;font-size:15px;
  padding:7px 12px;border-radius:var(--radius-sm);
}
header nav.main a.on,header nav.main a:hover{background:#ffffff1f;color:#fff}
header .right{margin-left:auto;display:flex;align-items:center;gap:6px}
header .right a{
  color:#E3D2C6;text-decoration:none;font-weight:600;font-size:14px;
  padding:6px 10px;border-radius:8px;
}
header .right a.on{background:#ffffff26;color:#fff}
header .right a:hover,header button.link:hover{color:#fff}
header .who{color:#fff;font-size:14px;font-weight:600;max-width:22ch;overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap}
header form{display:flex;margin:0}
header button.link{
  background:none;border:0;color:#E3D2C6;font:inherit;font-weight:600;font-size:14px;
  padding:6px 10px;border-radius:8px;cursor:pointer;
}
main{flex:1;padding:34px 0 64px}
footer{background:var(--ink);color:#D9C6BC;padding:26px 0;font-size:14px}
footer a{color:var(--path)}

/* ---------- surfaces ---------- */
.card{
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 24px;border-top:5px solid var(--grass);margin-top:22px;
}
.card.warn{border-top-color:var(--bloom)}
.card.plain{border-top-color:var(--rule)}
.card.bot{border-top-color:var(--steel)}
.card.hi{border-top-color:var(--draig)}
.card > h2:first-child,.card > h1:first-child{margin-bottom:4px}

/* ---------- forms ---------- */
label{display:block;font-weight:600;font-size:15px;margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=url],input[type=tel],input[type=date],input[type=number],
input[type=file],input:not([type]),select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--radius-sm);
  font-size:15px;font-family:inherit;color:inherit;background:var(--panel);
}
input:hover,select:hover,textarea:hover{border-color:var(--path-edge)}
textarea{min-height:90px;resize:vertical}
textarea.mono,input.mono{font-family:var(--font-mono);font-size:13px}
.fields{display:flex;gap:16px;flex-wrap:wrap}
.fields > div{flex:1 1 200px}
.row{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:14px;line-height:1.45}
.row label{margin:0;font-weight:400;font-size:14px}
.row input[type=checkbox]{width:auto;margin-top:3px}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%}
th,td{text-align:left;font-size:14px;padding:8px 10px;border-bottom:1px solid var(--rule)}
th{color:var(--muted);font-weight:600;font-size:var(--step--1);letter-spacing:.03em}
tbody tr:hover{background:#FBF6EE}

/* ---------- messages ---------- */
.flash,.errbox{border-radius:var(--radius-sm);padding:11px 13px;font-size:14px;
               margin-top:16px;line-height:1.45}
.flash{background:#E8F3E9;border:1px solid #BBDCC0;color:var(--grass-deep)}
.errbox{background:#FBEBEC;border:1px solid #EFC6CB;color:var(--danger)}
/* Caution sits between the two: something the reader must weigh before
   acting (this level has pupil progress on it), not something that failed. */
.flash.warn{background:#FDF2DE;border-color:#EBD09A;color:var(--bloom-deep)}
.err{color:var(--danger);font-size:13px;margin-top:5px}

/* ---------- utilities ---------- */
.stack > * + *{margin-top:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.center{text-align:center}

@media print{
  header,footer,.noprint{display:none !important}
  body{background:#fff}
  main{padding:0}
}