/* ============================================================
   Academy Model Stations — sign on.
   Loaded after signalling-panel.css, which carries the palette and
   the page chrome. Only the gatehouse's own furniture is here, plus
   the few body rules the panels set that a full-height screen has
   to undo.
   ============================================================ */

/* the panels pad the page and cap it at 1360; the gate fills the glass */
body.login-page{padding:0;min-height:100vh;display:flex;}

.gatehouse{
  flex:1;display:grid;align-content:start;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.85fr);
  grid-template-areas:"brand gate" "services services" "colophon colophon";
  max-width:1280px;margin:auto;padding:26px 22px 32px;gap:0;
}
/* the panels space their reference sections with section{margin-top:44px};
   these are grid areas, and space themselves */
.brand,.gate,.services{margin-top:0;}
.brand{grid-area:brand;}
.gate{grid-area:gate;}
.services{grid-area:services;margin-top:16px;}
.colophon{grid-area:colophon;margin-top:16px;}

/* ---------------------------------------------------------------
   Left — identity plate
   --------------------------------------------------------------- */
.brand{
  display:flex;flex-direction:column;gap:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 28%),var(--case);
  border:1px solid var(--case-edge);border-right:0;border-radius:4px 0 0 4px;
  padding:38px 40px 32px;
  box-shadow:0 22px 60px -34px #000;
}
.brand-head h1{margin:10px 0 0;font-size:clamp(34px,4.4vw,56px);}
.brand-head h1 span{color:var(--rail-dim);}
.brand-head .strap{margin-top:12px;}

/* the three model stations, dimmed almost to the ground colour */
.brand-art{flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px;min-height:150px;}
.brand-art figure{margin:0;display:flex;flex-direction:column;gap:6px;}
.brand-art figcaption{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#3d5b70;
}
.brand-art svg{display:block;width:100%;height:auto;}
.art-rail{fill:none;stroke:#2a4152;stroke-width:8;stroke-linecap:round;}
.art-diag{fill:none;stroke:#223a4c;stroke-width:7;stroke-linecap:round;}
.art-stop{stroke:#2f4a5c;stroke-width:7;}
.art-pf{fill:#16242e;stroke:#213544;}

.notice{
  margin:0;padding:16px 20px;border:1px solid var(--case-edge);
  border-left:3px solid var(--amber);background:var(--plate);border-radius:0 3px 3px 0;
  font-size:13px;line-height:1.55;color:var(--ink-2);
}
.notice b{display:block;color:var(--ink);font-family:"Barlow Condensed",sans-serif;
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;}

/* ---------------------------------------------------------------
   Right — the credential gate
   --------------------------------------------------------------- */
.gate{
  display:flex;flex-direction:column;gap:20px;
  background:var(--plate);border:1px solid var(--case-edge);border-radius:0 4px 4px 0;
  padding:38px 34px 32px;
  box-shadow:0 22px 60px -34px #000;
}
.gate-eyebrow{margin:0 0 4px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass);}
.gate-title{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:30px;
  letter-spacing:.1em;text-transform:uppercase;margin:0;line-height:1;}
/* the panels give every h2 a brass dash and a top margin; not here */
.gate-title::before{content:none;}

.gate-form{display:flex;flex-direction:column;gap:16px;}

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);}
.field input,.field select{
  width:100%;font:inherit;font-size:15px;background:#0f1a23;color:var(--ink);
  border:1px solid #2c4557;border-radius:2px;padding:11px 12px;
}
.field input::placeholder{color:var(--ink-3);}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.field.bad input{border-color:var(--red);}

/* ---- the ten cubicle plates ---- */
.desks{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.desks legend{padding:0;font-family:"Barlow Condensed",sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);}
.desks-hint{margin:0;font-size:12px;color:var(--ink-3);}
.desks.bad .desks-hint{color:#ff9a91;}
.desk-plates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
.desk-plates.wide{grid-template-columns:minmax(0,1fr);}

.plate-btn{
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-2);background:#16252f;border:1px solid #2c4557;border-radius:2px;
  padding:10px 4px;cursor:pointer;text-transform:none;
  transition:background .15s,border-color .15s,color .15s;
}
.plate-btn:hover{background:#1d3243;color:var(--ink);}
.plate-btn[aria-pressed="true"]{background:#1d3243;border-color:var(--cyan);color:#eaf6ff;}
.plate-btn[disabled]{opacity:.45;cursor:not-allowed;}
.desks[hidden]{display:none;}

/* ---- error, submit, footnote ---- */
.gate-error{
  margin:0;padding:11px 14px;border:1px solid #5a2620;border-left:3px solid var(--red);
  background:#1a1113;border-radius:0 3px 3px 0;font-size:13px;color:#ffb4ad;
}
.gate-error b{color:var(--ink);}

.signon{width:100%;padding:13px 16px;font-size:16px;letter-spacing:.18em;
  background:#1d3243;border-color:#3d5b70;}
.signon:hover{background:#264257;}
.signon[disabled]{opacity:.5;cursor:not-allowed;}

.gate-foot{margin:0;font-size:12px;line-height:1.5;color:var(--ink-3);}

/* ---- already signed on ---- */
.resume{
  padding:14px 16px;border:1px solid var(--case-edge);border-left:3px solid var(--cyan);
  background:#132833;border-radius:0 3px 3px 0;display:flex;flex-direction:column;gap:10px;
}
/* an author display: wins over the browser's [hidden] rule, so say it again */
.resume[hidden]{display:none;}
.resume-line{margin:0;font-size:13px;color:var(--ink-2);}
.resume-line b{color:var(--ink);}
.resume-acts{display:flex;gap:8px;}
.ghost{background:transparent;}
.ghost:hover{background:#1a2b38;}

/* ---- demo accounts ---- */
.accounts{margin-top:auto;border-top:1px solid var(--case-edge);padding-top:16px;}
.accounts h3{margin:0 0 9px;font-family:"Barlow Condensed",sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}
.accounts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.accounts li{display:flex;align-items:center;gap:10px;}
.accounts button{
  flex:1;display:flex;justify-content:space-between;gap:12px;text-align:left;
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:400;letter-spacing:.04em;
  text-transform:none;background:#0f1a23;border-color:#22384a;color:var(--ink-2);padding:8px 11px;
}
.accounts button:hover{background:#16252f;color:var(--ink);border-color:#2c4557;}
.accounts em{font-style:normal;color:var(--ink-3);}

/* ---------------------------------------------------------------
   Service strip
   --------------------------------------------------------------- */
.services ul{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.services li{
  display:flex;align-items:flex-start;gap:11px;
  background:var(--case);border:1px solid var(--case-edge);border-radius:3px;padding:11px 14px;
}
.services .lamp{
  flex:none;width:10px;height:10px;border-radius:50%;margin-top:5px;
  background:var(--ink-3);box-shadow:0 0 0 3px rgba(255,255,255,.03);
}
.services li.ok    .lamp{background:var(--green);box-shadow:0 0 8px rgba(34,197,94,.55);}
.services li.warn  .lamp{background:var(--amber);box-shadow:0 0 8px rgba(255,176,32,.55);}
.services li.fail  .lamp{background:var(--red);  box-shadow:0 0 8px rgba(255,68,56,.55);}
.services li.probe .lamp{animation:blink 1s steps(2,end) infinite;}
@keyframes blink{50%{opacity:.25;}}

.services b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:13px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.services .svc-note{display:block;font-size:12px;line-height:1.45;color:var(--ink-2);margin-top:2px;}

/* ---------------------------------------------------------------
   Colophon — the design the build is being made from
   --------------------------------------------------------------- */
.colophon{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;}

.book{
  flex:1;min-width:280px;display:grid;gap:2px;text-decoration:none;
  grid-template-areas:"eyebrow go" "name go" "strap go";
  grid-template-columns:minmax(0,1fr) auto;align-items:center;
  background:var(--case);border:1px solid var(--case-edge);
  border-left:3px solid var(--brass);border-radius:0 3px 3px 0;
  padding:13px 18px;transition:border-color .18s,background .18s;
}
.book:hover{background:#111d26;border-color:#3d5b70;border-left-color:var(--brass);}
.book:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

.book-eyebrow{grid-area:eyebrow;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass);}
.book-name{grid-area:name;font-family:"Barlow Condensed",sans-serif;font-size:20px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);line-height:1.15;}
.book-strap{grid-area:strap;font-size:12.5px;color:var(--ink-2);line-height:1.45;}
.book-go{grid-area:go;padding-left:20px;white-space:nowrap;
  font-family:"Barlow Condensed",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);}
.book:hover .book-go{color:#c7ecff;}

.colophon-built{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;
}
.colophon-built b{font-family:"Barlow Condensed",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-right:2px;}
.colophon-built span{border:1px solid var(--case-edge);border-radius:2px;padding:3px 8px;
  color:var(--ink-2);letter-spacing:.06em;background:var(--plate);white-space:nowrap;}

@media (max-width:760px){
  .book{grid-template-areas:"eyebrow" "name" "strap" "go";grid-template-columns:minmax(0,1fr);}
  .book-go{padding-left:0;margin-top:6px;}
}

@media (prefers-reduced-motion:reduce){
  .services .lamp{animation:none;}
  .plate-btn,.field input,.field select,.book{transition:none;}
}

/* ---------------------------------------------------------------
   Narrow
   --------------------------------------------------------------- */
@media (max-width:940px){
  /* every area the page places has to be named here too: an item whose
     grid-area is missing from the template is not dropped, it is given
     an implicit track of its own — which took the whole width and left
     the single 1fr column at 0, squeezing the plate and the gate into
     their own padding */
  .gatehouse{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"brand" "gate" "services" "colophon";}
  .brand{border-right:1px solid var(--case-edge);border-bottom:0;border-radius:4px 4px 0 0;
    padding:30px 26px 26px;gap:20px;}
  .brand-art{min-height:110px;}
  .gate{border-radius:0 0 4px 4px;padding:28px 26px 26px;}
}
@media (max-width:520px){
  .gatehouse{padding:14px 12px 20px;}
  .desk-plates{grid-template-columns:repeat(4,minmax(0,1fr));}
}