/* nec_lab -- the course palette, in a standalone page.
 *
 * Same tokens as book/_static/shell.css so the tool looks like the rest of
 * ECE 444, and the same dark-mode discipline: the complete light palette on
 * bare :root, only the tokens redefined under prefers-color-scheme, so a
 * student on a dark laptop does not get light cards with light text.
 */
:root {
  --blue:#0067b9; --blue-dark:#004a85; --red:#b01e24; --green:#3f7d34;
  --amber:#8a5a00;
  --ink:#15202b; --muted:#5b6573; --ground:#f5f9fc; --panel:#ffffff;
  --edge:#cddce9; --edge2:#b9d2e5; --soft:rgba(0,103,185,.07);
  --grid:#e4edf5; --trace2:#8a5a00; --trace3:#3f7d34;
  --sans:"Source Sans Pro","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blue:#58a7e5; --blue-dark:#8cc4ee; --red:#e4737a; --green:#8fce83;
    --amber:#e0ac54;
    --ink:#e9eef4; --muted:#93a3b5; --ground:#0d1826; --panel:#14243a;
    --edge:#22405f; --edge2:#2d5279; --soft:rgba(88,167,229,.10);
    --grid:#1d3350; --trace2:#e0ac54; --trace3:#8fce83;
  }
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--ground); color:var(--ink);
            font-family:var(--sans); font-size:15px; }
header { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
         padding:10px 16px; background:var(--panel);
         border-bottom:1px solid var(--edge); }
header h1 { margin:0; font-size:16px; letter-spacing:.02em; }
header .course { color:var(--blue-dark); font-weight:700; }
header .engine { margin-left:auto; font-size:12px; color:var(--muted);
                 font-family:var(--mono); }
main { display:grid; grid-template-columns:minmax(300px,360px) 1fr; gap:14px;
       padding:14px; align-items:start; }
@media (max-width:860px) { main { grid-template-columns:1fr; } }
.panel { background:var(--panel); border:1px solid var(--edge); border-radius:8px;
         padding:12px 14px; margin-bottom:14px; }
.panel h2 { margin:0 0 10px; font-size:12px; text-transform:uppercase;
            letter-spacing:.06em; color:var(--muted); }
label { display:block; font-size:12px; color:var(--muted); margin-bottom:3px; }
input,select,button { font-family:inherit; font-size:14px; color:var(--ink);
                      background:var(--panel); border:1px solid var(--edge2);
                      border-radius:5px; padding:5px 7px; }
input[type=number] { width:100%; font-variant-numeric:tabular-nums; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:9px; }
.row.three { grid-template-columns:1fr 1fr 1fr; }
.row.one { grid-template-columns:1fr; }
button { cursor:pointer; background:var(--blue); color:#fff; border-color:var(--blue);
         font-weight:600; padding:6px 10px; }
button:hover { background:var(--blue-dark); border-color:var(--blue-dark); }
button.ghost { background:transparent; color:var(--blue); }
button.ghost:hover { background:var(--soft); color:var(--blue-dark); }
button:disabled { opacity:.5; cursor:progress; }
.derived { font-size:12px; color:var(--muted); font-family:var(--mono);
           margin:-4px 0 10px; }
.readouts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px;
            margin-bottom:12px; }
@media (max-width:700px) { .readouts { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ro { border:1px solid var(--edge2); border-radius:6px; background:var(--soft);
      padding:6px 6px 7px; text-align:center; min-width:0; }
.ro .k { display:block; font-size:10px; font-weight:700; letter-spacing:.05em;
         text-transform:uppercase; color:var(--muted); white-space:nowrap;
         overflow:hidden; text-overflow:ellipsis; }
.ro .v { display:block; font-size:15px; font-weight:700; color:var(--blue-dark);
         font-variant-numeric:tabular-nums; white-space:nowrap; }
.ro.ok .v { color:var(--green); } .ro.warn .v { color:var(--amber); }
.ro.bad .v { color:var(--red); }
.ro.off { background:transparent; }
.ro.off .v { color:var(--muted); font-size:12px; font-weight:600; }
canvas { display:block; width:100%; height:auto; background:var(--panel);
         border:1px solid var(--edge); border-radius:6px; }
/* Auto-fit rather than two fixed columns: the number of plots depends on the
   antenna (a grounded model has two cut planes plus the sweep), so the row
   packs itself and stacks on a phone. */
.plots { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
         gap:12px; }
@media (max-width:700px) { .plots { grid-template-columns:1fr; } }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px;
          color:var(--muted); margin-top:6px; }
.legend i { display:inline-block; width:14px; height:3px; border-radius:2px;
            vertical-align:middle; margin-right:5px; }
table { width:100%; border-collapse:collapse; font-size:13px;
        font-variant-numeric:tabular-nums; }
th { background:var(--blue); color:#fff; font-weight:600; text-align:right;
     padding:5px 7px; font-size:12px; }
th:first-child, td:first-child { text-align:left; }
td { padding:4px 7px; text-align:right; border-bottom:1px solid var(--edge); }
tr.flag td { color:var(--amber); }
pre.deck { margin:0; padding:10px; background:var(--ground); border:1px solid var(--edge);
           border-radius:6px; font-family:var(--mono); font-size:12.5px;
           overflow-x:auto; color:var(--ink); }
ul.rules { list-style:none; margin:0; padding:0; font-size:12.5px; }
ul.rules li { display:flex; gap:7px; padding:3px 0; border-bottom:1px solid var(--edge);
              align-items:baseline; }
ul.rules li:last-child { border-bottom:0; }
ul.rules .mark { font-weight:700; font-family:var(--mono); }
ul.rules .ok .mark, .ok-text { color:var(--green); }
ul.rules .bad .mark { color:var(--red); }
ul.rules .detail { color:var(--muted); margin-left:auto; text-align:right; }
.status { font-size:12.5px; color:var(--muted); min-height:18px; margin-top:8px; }
.status.err { color:var(--red); }
.note { font-size:12px; color:var(--muted); margin:8px 0 0; line-height:1.45; }

/* ---- the deck editor and its gloss ---------------------------------- */
.deckgrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
@media (max-width:980px) { .deckgrid { grid-template-columns:1fr; } }
textarea.deck { width:100%; min-height:210px; resize:vertical; padding:10px;
                background:var(--ground); color:var(--ink);
                border:1px solid var(--edge); border-radius:6px;
                font-family:var(--mono); font-size:12.5px; line-height:1.55;
                white-space:pre; overflow-x:auto; }
.badge { font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px 6px;
         border-radius:10px; background:var(--soft); color:var(--blue-dark);
         border:1px solid var(--edge2); text-transform:none; }
.badge.cards { background:rgba(138,90,0,.12); color:var(--amber);
               border-color:rgba(138,90,0,.35); }
.fieldhelp { margin-top:7px; min-height:32px; font-size:12.5px; color:var(--muted);
             border-left:3px solid var(--edge2); padding-left:8px; }
.fieldhelp b { color:var(--ink); }
.gloss { font-size:12.5px; max-height:340px; overflow-y:auto; }
.gloss .line { padding:4px 0; border-bottom:1px solid var(--edge); }
.gloss .line:last-child { border-bottom:0; }
.gloss .cardtext { font-family:var(--mono); font-size:12px; }
.gloss .tok { padding:0 2px; border-radius:3px; cursor:help; }
.gloss .tok:hover, .gloss .tok.lit { background:var(--soft); color:var(--blue-dark); }
.gloss .tok.card { font-weight:700; color:var(--blue-dark); }
.gloss .say { display:block; color:var(--muted); padding-left:2px; }
.gloss .line.bad .cardtext { color:var(--red); }
.errors { margin-top:8px; font-size:12.5px; }
.errors .e { padding:6px 8px; margin-bottom:6px; border-radius:5px;
             background:rgba(176,30,36,.08); border:1px solid rgba(176,30,36,.3); }
.errors .e b { color:var(--red); }
.errors .e .hint { display:block; color:var(--muted); margin-top:2px; }
label.check { display:flex; align-items:flex-start; gap:7px; font-size:12px;
              color:var(--muted); line-height:1.35; }
label.check input { margin-top:1px; }
label.check code { font-family:var(--mono); font-size:11px; }
canvas#geom { margin-bottom:10px; }

/* ---- the antenna catalog form ---------------------------------------- */
.typenote { font-size:12px; color:var(--muted); margin:-4px 0 10px; line-height:1.4; }
.typenote b { color:var(--blue-dark); }
#params .row { margin-bottom:8px; }
.punit { font-size:11px; color:var(--muted); }

/* One dial per plane. `display: contents` lets each dial be a grid item of
   .plots, so two cuts and the sweep share one row on a desktop and stack on a
   phone, without a nested grid fighting the outer one. */
.cutwrap { display:contents; }
.dial figcaption { font-size:11.5px; color:var(--muted); margin-top:5px;
                   line-height:1.4; }
.dial figcaption b { color:var(--ink); font-weight:600; }
.dial { margin:0; min-width:0; }

/* ---- the hosted build's start-up card -------------------------------- */
/* Only ever seen on the site build: the local tool has nothing to boot. */
#boot { position:fixed; inset:0; display:grid; place-items:center;
        background:var(--ground); z-index:50; }
#boot .boot-card { max-width:420px; padding:22px 24px; text-align:center;
                   background:var(--panel); border:1px solid var(--edge);
                   border-radius:10px; box-shadow:0 8px 28px rgba(0,30,60,.08); }
#boot b { display:block; font-size:15px; margin-bottom:8px; color:var(--ink); }
#boot .boot-step { font-size:13px; color:var(--blue-dark); min-height:20px; }
#boot .boot-note { font-size:11.5px; color:var(--muted); margin-top:12px;
                   line-height:1.5; }
#boot.failed .boot-step { color:var(--red); }