/* ============================================================================
   /learn: the manual.

   These pages are not blog posts, they are pages of a reference manual: they
   cite 7110.65 paragraph numbers, they are consulted rather than read through,
   and people arrive on one of them from a search engine knowing nothing about
   the rest. So they get the shape a manual has: contents on the left, the page
   in the middle, the page's own sections on the right. And the type rule finally
   does the thing it exists for. The prose is prose.
   ========================================================================== */

/* ------------------------------------------------------------ the index --- */
/* The article list is the bay again. An article's first column is the position
   it belongs to, so the manual can be scanned the way a controller thinks:
   "what do I need to know for Ground?" */
.strip .pos{
  display:grid;place-items:center;height:100%;border-right:1px solid var(--rule-soft);
}
.strip .pos i{
  font-style:normal;font-size:10px;font-weight:600;letter-spacing:.04em;
  padding:3px 5px;border:1px solid var(--cy-dim);background:var(--cy-bg);color:var(--cy);
}
.strip .pos i.note{border-color:var(--rule);background:var(--s3);color:var(--tx3);}
.strip .pos i.new{border-color:var(--gr-dim);background:var(--gr-bg);color:var(--gr);}

/* An article strip trades the runway schematic for the position it belongs to,
   and its summary is prose, so it is set in the prose face. */
.learn-strip{grid-template-columns:60px 104px minmax(0,1fr) 70px;min-height:58px;padding-right:16px;}
.learn-strip .date .code{font-size:11px;font-weight:400;color:var(--tx3);letter-spacing:.04em;}
.learn-strip .ttl{white-space:normal;}
.learn-strip .meta{
  display:block;margin-top:3px;font-family:var(--sans);font-size:12.5px;line-height:1.5;
  color:var(--tx3);white-space:normal;max-width:78ch;
}
.learn-strip .mins{font-size:10.5px;color:var(--tx4);}
.learn-strip:hover .mins{color:var(--cy);}

/* The list sits in a framed well, aligned with the page's measure, the same way
   the board does on the landing page. */
.listwell{border:1px solid var(--rule);border-top:none;background:var(--s2);}
.listwell .bay-grp:last-child{border-bottom:none;}

/* ---------------------------------------------------------- the article --- */
/* The 13 published guides keep the markup they shipped with. learn.js wraps it
   in the manual layout and this block maps the names they already use:
     .wrap → the sheet      .crumb → the kicker     .tldr → the summary panel
     .radio/.who → .xmit    .note → .aside          .diagram → .fig
     table → .ref           .practice → the CTA
   Nothing in an article's body had to be edited to move it into the system. */
.manual{
  display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr) 196px;
  min-height:calc(100vh - var(--band-h));
}
.manual .idx,
.manual .toc{
  position:sticky;top:var(--band-h);align-self:start;overflow:auto;
  height:calc(100vh - var(--band-h));background:var(--chrome);
}
.manual .idx{border-right:1px solid var(--rule-hard);}
.manual .toc{border-left:1px solid var(--rule-hard);background:var(--s1);}

.manual .idx .grp{padding:13px 0 5px;}
.manual .idx .grp + .grp{border-top:1px solid var(--rule-soft);}
.manual .idx .grp > b{
  display:block;padding:0 14px 7px;font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--tx4);font-weight:400;
}
.manual .idx a{
  display:block;padding:6px 14px 6px 11px;border-left:3px solid transparent;
  color:var(--tx2);font-size:11.5px;line-height:1.4;
}
.manual .idx a:hover{background:var(--s1);color:var(--tx);}
.manual .idx a.on{background:var(--s2);border-left-color:var(--cy);color:var(--tx);font-weight:500;}

.manual .toc .lbl{padding:16px 14px 8px;font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--tx4);}
.manual .toc a{
  display:flex;gap:8px;padding:6px 14px 6px 11px;border-left:3px solid transparent;
  color:var(--tx3);font-size:11px;line-height:1.4;
}
.manual .toc a .n{color:var(--tx4);}
.manual .toc a:hover{color:var(--tx);}
.manual .toc a.on{border-left-color:var(--cy);color:var(--tx);}
.manual .toc .foot{margin-top:10px;padding:12px 14px;border-top:1px solid var(--rule-soft);}

/* The article is a sheet on the console, not a full-bleed column: it stops at a
   readable width and the grey shows past its edge. */
.page{background:var(--s2);padding:32px 44px 72px;min-width:0;max-width:840px;
  border-right:1px solid var(--rule);}
.page > header{padding-bottom:22px;border-bottom:2px solid var(--rule-hard);margin-bottom:26px;}
.page h1{font-family:var(--sans);font-variation-settings:'wdth' 88;font-weight:700;
  font-size:clamp(26px,3vw,33px);line-height:1.08;letter-spacing:-.01em;margin:11px 0 10px;
  max-width:26ch;}
.page .byline{font-size:11px;color:var(--tx3);letter-spacing:.04em;}
.page .byline b{color:var(--tx2);font-weight:400;}

/* Body copy. Archivo, 15.5/1.7, 68ch, which is the type rule's whole reason to
   exist.
   The old page set 1,200 words of prose in the data face. */
.page p,.page li{font-family:var(--sans);font-size:15.5px;line-height:1.7;color:var(--tx);
  max-width:68ch;}
.page p{margin:0 0 15px;}
.page strong,.page b{font-weight:600;}
.page em,.page i{font-style:italic;}
.page ul,.page ol{margin:0 0 16px;padding-left:0;list-style:none;max-width:68ch;}
.page ul li{position:relative;padding-left:20px;margin:0 0 9px;}
.page ul li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;
  background:var(--tx4);}
.page ol{counter-reset:s;}
.page ol li{position:relative;padding-left:26px;margin:0 0 9px;counter-increment:s;}
.page ol li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.14em;
  font-family:var(--mono);font-size:11px;color:var(--cy);}
.page a{color:var(--cy);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--cy-dim);}
.page a:hover{text-decoration-color:var(--cy);}
.page .btn{text-decoration:none;}

/* Numbered section heads, the same device the workspace uses. */
.page h2{
  display:flex;gap:13px;align-items:baseline;margin:38px 0 14px;scroll-margin-top:calc(var(--band-h) + 16px);
  font-family:var(--sans);font-variation-settings:'wdth' 88;font-weight:700;font-size:21px;
  line-height:1.15;color:var(--tx);
}
.page h2 .n{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--cy);flex:none;
  padding-top:.15em;}
.page h3{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--tx);margin:24px 0 7px;}
/* a guide that numbers its own sections keeps the author's numerals */
.page.self-numbered h2{gap:0;}

/* Inline codes stay mono: they are things you type. */
.page code{font-family:var(--mono);font-size:13px;background:var(--s1);
  border:1px solid var(--rule);padding:1px 5px;color:var(--tx);white-space:nowrap;}

/* ------------------------------------------------------------ the TL;DR --- */
.tldr{border:1px solid var(--rule-hard);background:var(--s1);margin:0 0 28px;max-width:68ch;}
.tldr > .h{
  display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--s3);
  border-bottom:1px solid var(--rule);
  font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--tx2);
}
.tldr > .b{padding:13px 15px;}
.tldr .row{display:grid;grid-template-columns:82px 1fr;gap:12px;padding:6px 0;
  border-bottom:1px dotted var(--rule);font-size:13.5px;}
.tldr .row:last-child{border-bottom:none;}
.tldr .row .k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);
  padding-top:.28em;}
.tldr .row .v{font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--tx);}
.tldr .row .v b{color:var(--tx);font-weight:600;}

/* ------------------------------------------------------- the transmission - */
/* The component this section owns. A line off the frequency, set the way the
   frequency log sets it, with the speaker in a square tag and a coloured edge
   that says whose it is and, in a phraseology guide, whether it is the right
   way or the wrong way. No other manual can show that at a glance. */
.xmit{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:baseline;
  margin:0 0 14px;max-width:68ch;padding:11px 14px;
  background:var(--s1);border:1px solid var(--rule);
}
.xmit .who{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);
  border:1px solid var(--cy-dim);background:var(--s2);padding:2px 0;text-align:center;
}
.xmit .say{font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--tx);}
.xmit .say b{font-weight:600;}
.xmit .note{display:block;margin-top:5px;font-family:var(--sans);font-size:12px;color:var(--tx3);}

/* Right and wrong are stamped, not ribboned: the speaker tag fills in, the way
   a document gets a rubber stamp. */
.xmit.pilot .who{color:var(--tx3);border-color:var(--rule);}
.xmit.good{background:var(--gr-bg);border-color:var(--gr-dim);}
.xmit.good .who{background:var(--gr);border-color:var(--gr);color:#fff;}
.xmit.bad{background:var(--rd-bg);border-color:var(--rd-dim);}
.xmit.bad .who{background:var(--rd);border-color:var(--rd);color:#fff;}
/* Only the wrong form is struck through. text-decoration propagates from an
   inline ancestor and cannot be switched off by a descendant, so the struck
   part is its own element and the explanation sits outside it. */
.xmit .line{display:block;}
.xmit.bad .line{text-decoration:line-through;text-decoration-color:var(--rd-dim);}
.xmit.bad .note{color:var(--tx2);}

/* ------------------------------------------------------------- the aside -- */
.aside{
  max-width:68ch;margin:0 0 18px;padding:12px 15px;background:var(--am-bg);
  border:1px solid var(--am-dim);
}
.aside p{font-size:13.5px;color:var(--tx2);margin:0;}
.aside p + p{margin-top:7px;}
.aside .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--am);margin-bottom:5px;}

/* -------------------------------------------------------------- the figure */
/* A diagram is a chart, and a chart belongs on the glass: the same dark well
   the airport schematics live in, the only dark surface on the page. */
/* A figure is allowed to break the measure. A diagram squeezed into a text
   column is a diagram nobody can read. */
.fig{margin:26px 0 22px;max-width:100%;}
.fig .well{background:var(--scope);border:1px solid var(--rule-hard);padding:16px;}
.fig svg{display:block;width:100%;height:auto;}
.fig figcaption{margin-top:9px;font-family:var(--sans);font-size:12px;color:var(--tx3);max-width:68ch;}

/* ------------------------------------------------------------- the table -- */
.ref{width:100%;border-collapse:collapse;margin:0 0 22px;table-layout:auto;}
.ref th{
  text-align:left;padding:8px 12px;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tx4);font-weight:400;background:var(--s1);
  border-top:1px solid var(--rule-hard);border-bottom:1px solid var(--rule-hard);
  white-space:nowrap;
}
.ref td{padding:9px 12px;border-bottom:1px solid var(--rule-soft);font-size:13px;
  color:var(--tx2);vertical-align:top;font-family:var(--sans);}
.ref td:nth-child(2){font-family:var(--mono);font-size:12px;color:var(--tx);}
.ref tr:hover td{background:var(--s1);}

/* -------------------------------------------------------------- the ends -- */
.related{max-width:68ch;margin:30px 0 0;padding-top:16px;border-top:1px solid var(--rule);}
.related .k{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--tx4);
  margin-bottom:9px;}
.related a{display:block;padding:7px 0;border-bottom:1px dotted var(--rule);
  font-family:var(--sans);font-size:13.5px;text-decoration:none;color:var(--tx2);}
.related a:hover{color:var(--cy);}
.related a .c{font-family:var(--mono);font-size:10px;color:var(--tx4);margin-right:9px;}

/* The end-of-article CTA is the strip that is about to be printed: the same
   object the setup screen shows before a session starts. */
.practice{
  max-width:68ch;margin:34px 0 0;background:var(--s2);
  border:1px solid var(--rule-hard);padding:18px 20px;
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
}
.practice h3{margin:7px 0 5px;font-size:16px;}
.practice p{font-size:13px;color:var(--tx2);margin:0;max-width:46ch;}

/* ------------------------------------------------------------- responsive - */
@media (max-width:1240px){
  .manual{grid-template-columns:var(--rail-w) minmax(0,1fr);}
  .manual .toc{display:none;}
}
@media (max-width:960px){
  .ref{display:block;overflow-x:auto;white-space:nowrap;}
  .ref td{white-space:normal;min-width:150px;}
  .manual{grid-template-columns:1fr;}
  .manual .idx{position:static;height:auto;border-right:none;
    border-bottom:1px solid var(--rule-hard);}
  .page{padding:24px 22px 56px;}
  .practice{grid-template-columns:1fr;}
  .learn-strip{grid-template-columns:54px minmax(0,1fr);}
  .learn-strip .date,.learn-strip .right{display:none;}
}


/* ============================================================================
   Published-markup shims. These map the live articles' class names onto the
   components above; they are not a second design, only a second set of names.
   ========================================================================== */
.page.wrap{max-width:840px;}
.page .crumb{
  display:flex;align-items:center;gap:8px;margin-bottom:2px;
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--tx3);
}
.page .crumb a{color:var(--cy);text-decoration:none;}
.page .byline{font-size:11px;color:var(--tx3);letter-spacing:.04em;margin:0;}
.page .muted{font-size:13px;color:var(--tx3);}

/* the TL;DR panel, from .tldr + .tldr .t */
.page .tldr{
  border:1px solid var(--rule-hard);background:var(--s1);margin:0 0 28px;max-width:68ch;
  padding:0 15px 14px;font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--tx);
}
.page .tldr .t{
  display:block;margin:0 -15px 13px;padding:8px 14px;background:var(--s3);
  border-bottom:1px solid var(--rule);
  font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--tx2);
}
.page .tldr b{font-weight:600;}
.page .tldr code{background:none;border:none;padding:0;color:var(--cy);white-space:normal;}

/* a transmission, from .radio + .who */
.page .radio{
  margin:0 0 14px;max-width:68ch;padding:11px 14px;
  background:var(--s1);border:1px solid var(--rule);
  font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--tx);
}
.page .radio .who{
  display:block;width:64px;margin:0 0 7px;padding:2px 0;text-align:center;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);
  border:1px solid var(--cy-dim);background:var(--s2);
}
.page .radio b{font-weight:600;}

/* an aside, from .note */
.page .note{
  max-width:68ch;margin:0 0 18px;padding:12px 15px;background:var(--am-bg);
  border:1px solid var(--am-dim);font-family:var(--sans);font-size:13.5px;
  line-height:1.6;color:var(--tx2);
}

/* a figure, from .diagram */
.page .diagram{
  margin:26px 0 22px;max-width:100%;background:var(--scope);
  border:1px solid var(--rule-hard);padding:16px;
}
.page .diagram svg{display:block;width:100%;height:auto;}
.page .diagram figcaption{
  margin:11px 0 0;font-family:var(--sans);font-size:12px;color:var(--scope-dim);max-width:68ch;
}

/* the quick-reference table */
.page table{width:100%;border-collapse:collapse;margin:0 0 22px;display:block;overflow-x:auto;}
.page th{
  text-align:left;padding:8px 12px;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tx4);font-weight:400;background:var(--s1);white-space:nowrap;
  border-top:1px solid var(--rule-hard);border-bottom:1px solid var(--rule-hard);
}
.page td{
  padding:9px 12px;border-bottom:1px solid var(--rule-soft);font-size:13px;
  color:var(--tx2);vertical-align:top;font-family:var(--sans);
}
.page td code{font-family:var(--mono);font-size:12px;}
.page tr:hover td{background:var(--s1);}

/* the end-of-article CTA, from .practice */
.page .practice{
  max-width:68ch;margin:34px 0 0;background:var(--s2);
  border:1px solid var(--rule-hard);padding:18px 20px;
}
.page .practice h2{margin:0 0 6px;font-size:16px;}
.page .practice h2::before{content:none;}
.page .practice p{font-size:13px;color:var(--tx2);margin:0 0 12px;max-width:52ch;}
.page .practice a{
  display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;
  border:1px solid var(--gr-dim);background:var(--gr-bg);color:var(--gr);border-radius:2px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
}
.page .practice a:hover{background:#d6ecdb;border-color:var(--gr);}

/* ------------------------------------------------------------- the index -- */
/* The manual's contents page. Each guide is a strip, and its first column is the
   position it belongs to, so the list can be scanned the way a controller thinks
   about their own job. */
.learnlist{border:1px solid var(--rule);background:var(--s2);}
.learnlist .lgrp{border-top:1px solid var(--rule-hard);}
.learnlist .lgrp:first-child{border-top:none;}
.learnlist .gh{
  display:flex;align-items:center;gap:11px;padding:9px 16px 8px;background:var(--s1);
  border-bottom:1px solid var(--rule-hard);
}
.learnlist .gh .t{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--tx2);}
.learnlist .gh .r{flex:1;height:1px;background:var(--rule-soft);}
.learnlist .gh .m{font-size:10px;color:var(--tx4);}

.learnlist .card{
  display:grid;grid-template-columns:58px 104px minmax(0,1fr) 60px;gap:16px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--rule);border-left:3px solid var(--rule);
  background:var(--s2);text-decoration:none;
}
.learnlist .card:last-child{border-bottom:none;}
.learnlist .card:hover{background:var(--s3);border-left-color:var(--cy);}
.learnlist .pos i{
  display:inline-block;font-style:normal;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.04em;padding:3px 5px;border:1px solid var(--cy-dim);
  background:var(--cy-bg);color:var(--cy);
}
.learnlist .pos i.note{border-color:var(--rule);background:var(--s3);color:var(--tx3);}
.learnlist .pos i.new{border-color:var(--gr-dim);background:var(--gr-bg);color:var(--gr);}
.learnlist .when{
  font-family:var(--mono);font-size:11px;color:var(--tx3);letter-spacing:.04em;white-space:nowrap;
}
.learnlist .card .h{
  display:block;font-family:var(--sans);font-variation-settings:'wdth' 92;
  font-weight:600;font-size:14px;line-height:1.3;color:var(--tx);
}
.learnlist .card .d{
  display:block;margin-top:3px;font-family:var(--sans);font-size:12.5px;line-height:1.5;
  color:var(--tx3);
}
.learnlist .read{
  font-family:var(--mono);font-size:10px;color:var(--tx4);text-align:right;letter-spacing:.1em;
  text-transform:uppercase;
}
.learnlist .card:hover .read{color:var(--cy);}

@media (max-width:760px){
  .learnlist .card{grid-template-columns:52px minmax(0,1fr);gap:12px;}
  .learnlist .when,.learnlist .read{display:none;}
}