/* Unique ARF Training Services — shared design system.
 *
 * Linked by every page. Page-specific rules stay inline in the page that needs
 * them; anything that appears twice belongs here.
 */

/* ── the hidden guard ──────────────────────────────────────────────────────
 *
 * This must come first, and it must carry !important.
 *
 * The `hidden` attribute works only because the browser's own stylesheet says
 * [hidden]{display:none}. Author stylesheets beat the browser's stylesheet in
 * the cascade no matter how weak the selector — so a single rule like
 *
 *     form{display:grid}
 *
 * silently defeats `hidden` on every form on the page. That is exactly how the
 * sign-in page came to show two stacked forms, with two email fields, two
 * password fields and two submit buttons.
 *
 * !important here so that a page rule written later cannot bring it back.
 */
[hidden]{display:none !important}

/* ── tokens ──────────────────────────────────────────────────────────────── */

:root{
  --ink:#14120F; --ink2:#3D3934; --ink3:#6C655C; --faint:#9A9289;
  --canvas:#FCFBF8; --card:#FFFFFF; --sand:#F2EFE8; --line:#E4E0D7; --hair:#D8D3C8;
  --forest:#174035; --forest2:#0D2A22; --moss:#2E6E58; --wash:#E6EFE9;
  --clay:#9A4E2E; --claywash:#F7EAE3;
  --brass:#8B6A1E; --brasswash:#F7F1DE;
  --disp:"Fraunces",ui-serif,Georgia,serif;
  --ui:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Consolas,monospace;
}

/* ── base ────────────────────────────────────────────────────────────────── */

*{box-sizing:border-box}

body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--ui);font-size:16px;line-height:1.6;font-weight:380;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  margin:0;font-family:var(--disp);font-weight:500;letter-spacing:-.02em;
  text-wrap:balance;font-variation-settings:"SOFT" 24,"WONK" 1;
}

p,ul,ol{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:2px}

.wrap{max-width:74rem;margin:0 auto;padding:0 1.8rem}

/* Small uppercase mono label. Both class names exist because index.html called
   it .lbl and the newer pages call it .mono. */
.lbl,.mono{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);font-weight:500;
}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ── top bar ─────────────────────────────────────────────────────────────── */

.top{background:#0B0F0D;color:#B9C9C2}
.top .wrap,.top .in{
  max-width:74rem;margin:0 auto;padding:0 1.8rem;
  display:flex;align-items:center;gap:2rem;height:3.7rem;
}
.brand{display:flex;flex-direction:column;line-height:1;flex-shrink:0}
.brand b{
  font-family:var(--disp);font-size:1.02rem;color:#EAF2EE;
  font-weight:600;letter-spacing:-.018em;
}
.brand span{
  font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;
  text-transform:uppercase;color:#5F7168;margin-top:.28rem;
}

.tnav{display:none;gap:1.7rem;font-size:.87rem;margin-left:1rem}
.tnav a{color:#8B9A93;padding:.2rem 0;border-bottom:1.5px solid transparent}
.tnav a.on{color:#EAF2EE;border-color:var(--moss)}
.tnav a:hover{color:#EAF2EE}

.acct{margin-left:auto;display:flex;align-items:center;gap:.7rem}
.avatar{
  width:1.95rem;height:1.95rem;border-radius:50%;background:var(--moss);color:#fff;
  display:grid;place-items:center;font-size:.72rem;font-weight:700;
  font-family:var(--mono);letter-spacing:.02em;
}
.acct .who{display:none;font-size:.82rem;color:#B9C9C2}
.acct .out{font-size:.8rem;color:#8B9A93}
.acct .out:hover{color:#EAF2EE}

@media(min-width:56rem){.tnav{display:flex}.acct .who{display:block}}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--moss);color:#fff;padding:.72rem 1.3rem;border-radius:4px;
  font-size:.92rem;font-weight:650;transition:background .18s;
}
.btn:hover{background:#256050}
.btn[disabled]{opacity:.55;cursor:default}
.btn[disabled]:hover{background:var(--moss)}
.btn.o{background:transparent;color:var(--moss);border:1px solid var(--hair)}
.btn.o:hover{background:transparent;border-color:var(--moss)}
.btn.wide{width:100%}

/* ── messages ────────────────────────────────────────────────────────────── */

.msg{padding:.75rem .9rem;border-radius:4px;font-size:.88rem;display:none}
.msg.err{display:block;background:var(--claywash);color:#7A3C22;border:1px solid #E8C9B8}
.msg.ok {display:block;background:var(--wash);color:var(--forest);border:1px solid #BFD8CC}

/* ── forms ───────────────────────────────────────────────────────────────── */

.field{display:grid;gap:.34rem}
.field .t{font-size:.83rem;font-weight:600;color:var(--ink2)}
.field .h{font-size:.76rem;color:var(--ink3);line-height:1.45}
.field .opt{font-weight:400;color:var(--faint)}

input[type=text],input[type=email],input[type=password],input[type=search],
input[type=tel],textarea,select{
  font:inherit;padding:.68rem .8rem;border:1px solid var(--hair);border-radius:4px;
  background:var(--card);color:var(--ink);width:100%;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--moss);box-shadow:0 0 0 3px var(--wash);
}

/* ── tags ────────────────────────────────────────────────────────────────── */

.tag{
  font-family:var(--mono);font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.24rem .5rem;border:1px solid var(--hair);color:var(--ink3);border-radius:2px;
}
.tag.go{border-color:var(--moss);color:var(--moss)}
.tag.warn{border-color:var(--brass);color:var(--brass)}

/* ── footer ──────────────────────────────────────────────────────────────── */

.foot{padding:1.6rem;text-align:center;font-size:.78rem;color:var(--faint)}