/* FAI study app, client layer styles.
   Visual language of the pack: accent #173a5e, tier colours
   core #c62828, likely #e09b00, foundation #1565c0, context #757575,
   white background, dark ink. Every piece of app chrome carries the
   class fa_ui so one print rule can hide all of it.
   Nothing here restyles the chapters or the inlined interactive layer. */

:root{
  --fa-accent:#173a5e;
  --fa-accent-soft:#eef2f7;
  --fa-ink:#16191d;
  --fa-muted:#5a6472;
  --fa-rule:#d7dce3;
  --fa-core:#c62828;
  --fa-likely:#e09b00;
  --fa-foundation:#1565c0;
  --fa-context:#757575;
  --fa-ok:#2e7d32;
  --fa-shadow:0 6px 22px rgba(9,24,42,.18);
  --fa-font:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.fa_ui,.fa_ui *{box-sizing:border-box}
.fa_ui{font-family:var(--fa-font);color:var(--fa-ink)}

.fa_btn{
  font-family:var(--fa-font);font-size:14px;line-height:1.2;
  border:1px solid var(--fa-accent);background:#fff;color:var(--fa-accent);
  border-radius:5px;padding:7px 13px;cursor:pointer;text-decoration:none;
  display:inline-block;font-weight:600}
.fa_btn:hover{background:var(--fa-accent-soft)}
.fa_btn.fa_solid{background:var(--fa-accent);color:#fff}
.fa_btn.fa_solid:hover{background:#0f2a45}
.fa_btn.fa_quiet{border-color:var(--fa-rule);color:var(--fa-muted);font-weight:400}
.fa_btn:disabled{opacity:.5;cursor:default}
.fa_link{color:var(--fa-accent);text-decoration:underline;cursor:pointer;background:none;border:0;
  font:inherit;padding:0}

/* ------------------------------------------------ continue pill */
#fa_pill{
  position:fixed;left:14px;bottom:16px;z-index:1400;max-width:min(78vw,430px);
  background:var(--fa-accent);color:#fff;border-radius:22px;
  box-shadow:var(--fa-shadow);display:flex;align-items:center;gap:9px;
  padding:8px 8px 8px 15px;font-size:14px}
#fa_pill .fa_pill_txt{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fa_pill b{font-weight:700}
#fa_pill .fa_pill_x{
  border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:50%;
  width:24px;height:24px;line-height:22px;text-align:center;cursor:pointer;font-size:15px;flex:0 0 auto}
#fa_pill .fa_pill_x:hover{background:rgba(255,255,255,.34)}

/* ------------------------------------------------ selection toolbar */
#fa_tool{
  position:absolute;z-index:1500;background:#fff;border:1px solid var(--fa-accent);
  border-radius:7px;box-shadow:var(--fa-shadow);padding:5px;display:flex;gap:5px;align-items:center}
#fa_tool .fa_sw{
  width:26px;height:26px;border-radius:5px;border:1px solid #b9c2cd;cursor:pointer;padding:0}
#fa_tool .fa_sw:hover{outline:2px solid var(--fa-accent);outline-offset:1px}
#fa_tool .fa_sw_yellow{background:#ffe873}
#fa_tool .fa_sw_green{background:#b7e8b7}
#fa_tool .fa_sw_red{background:#ffc2ba}
#fa_tool .fa_tool_note{
  border:0;background:none;color:var(--fa-accent);font:600 13px var(--fa-font);
  cursor:pointer;padding:3px 7px;border-left:1px solid var(--fa-rule)}
#fa_tool .fa_tool_note:hover{text-decoration:underline}

/* ------------------------------------------------ highlights */
mark.fa_hl{
  background:#ffe873;color:inherit;padding:0 1px;border-radius:2px;cursor:pointer;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.fa_hl_green{background:#b7e8b7}
mark.fa_hl_red{background:#ffc2ba}
mark.fa_hl[data-note="1"]{border-bottom:2px solid var(--fa-accent)}
mark.fa_hl.fa_flash{animation:fa_flash 2.2s ease-out 1}
@keyframes fa_flash{
  0%{box-shadow:0 0 0 6px rgba(23,58,94,.45)}
  70%{box-shadow:0 0 0 6px rgba(23,58,94,.18)}
  100%{box-shadow:0 0 0 0 rgba(23,58,94,0)}
}

/* ------------------------------------------------ section jump links */
.fa_seclink{cursor:pointer}
.fa_flash_sec{animation:fa_flash 2.2s ease-out 1;border-radius:5px}

/* ------------------------------------------------ note editor */
#fa_note{
  position:absolute;z-index:1500;width:330px;max-width:92vw;background:#fff;
  border:1px solid var(--fa-accent);border-radius:8px;box-shadow:var(--fa-shadow);padding:12px 13px}
#fa_note .fa_note_quote{
  font-size:13.5px;color:var(--fa-muted);font-style:italic;border-left:3px solid var(--fa-rule);
  padding:2px 0 2px 8px;margin:0 0 9px;max-height:74px;overflow:auto}
#fa_note textarea{
  width:100%;min-height:78px;font:14px/1.45 var(--fa-font);color:var(--fa-ink);
  border:1px solid var(--fa-rule);border-radius:5px;padding:7px 8px;resize:vertical}
#fa_note .fa_note_row{display:flex;gap:6px;align-items:center;margin-top:9px;flex-wrap:wrap}
#fa_note .fa_sw{width:24px;height:24px;border-radius:5px;border:1px solid #b9c2cd;cursor:pointer;padding:0}
#fa_note .fa_sw.fa_on{outline:2px solid var(--fa-accent);outline-offset:1px}
#fa_note .fa_sw_yellow{background:#ffe873}
#fa_note .fa_sw_green{background:#b7e8b7}
#fa_note .fa_sw_red{background:#ffc2ba}
#fa_note .fa_spacer{flex:1 1 auto}
#fa_note .fa_del{color:var(--fa-core);border-color:#e9b8b5}
#fa_note .fa_del:hover{background:#fdf1f0}

/* ------------------------------------------------ gate quiz panel */
#fa_gate{
  border:2px solid var(--fa-accent);border-radius:9px;background:#fbfcfe;
  padding:16px 18px 18px;margin:38px 0 30px;font-family:var(--fa-font)}
#fa_gate h2.fa_gate_h{
  font-size:21px;margin:0 0 4px;border:0;padding:0;color:var(--fa-accent)}
#fa_gate .fa_gate_sub{margin:0 0 12px;font-size:14.5px;color:var(--fa-muted)}
#fa_gate .fa_gq{
  border:1px solid var(--fa-rule);border-radius:6px;background:#fff;padding:11px 13px;margin:11px 0}
#fa_gate .fa_gq_n{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fa-accent);
  display:block;margin-bottom:3px}
#fa_gate .fa_gq_q{margin:0 0 8px;font-size:16px;line-height:1.5}
#fa_gate .fa_gq_opt{
  display:block;width:100%;text-align:left;margin:5px 0;padding:8px 11px;
  border:1px solid #b5b5ae;border-radius:5px;background:#fff;cursor:pointer;
  font:15px/1.4 var(--fa-font);color:var(--fa-ink)}
#fa_gate .fa_gq_opt:hover{background:#f4f7fb}
#fa_gate .fa_gq_opt.fa_pick{border-color:var(--fa-accent);background:#eef2f7;font-weight:600}
#fa_gate .fa_gq_opt.fa_right{background:#e6f4e6;border-color:var(--fa-ok);font-weight:600}
#fa_gate .fa_gq_opt.fa_wrong{background:#fbe9e7;border-color:var(--fa-core)}
#fa_gate .fa_gq_why{
  margin-top:8px;padding:8px 11px;background:#eef4fb;border-left:3px solid var(--fa-foundation);
  font-size:14.5px;line-height:1.5}
#fa_gate .fa_gate_act{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
#fa_gate .fa_gate_out{margin-top:14px}
#fa_gate .fa_verdict{
  border-radius:7px;padding:12px 14px;font-size:16px;line-height:1.5;border:1px solid var(--fa-rule)}
#fa_gate .fa_verdict.fa_pass{background:#e9f5ea;border-color:var(--fa-ok)}
#fa_gate .fa_verdict.fa_fail{background:#fdf3ef;border-color:#e6a08f}
#fa_gate .fa_verdict b{font-size:17px}
#fa_gate .fa_revisit{margin:8px 0 0 18px;font-size:15px}
#fa_gate .fa_revisit li{margin:4px 0}
#fa_gate .fa_next{
  display:inline-block;margin-top:11px;background:var(--fa-accent);color:#fff;border:0;
  border-radius:6px;padding:11px 18px;font-size:16px;font-weight:700;text-decoration:none}
#fa_gate .fa_next:hover{background:#0f2a45}
#fa_gate .fa_anyway{display:inline-block;margin-top:11px;font-size:13.5px;color:var(--fa-muted)}
#fa_gate .fa_anyway a{color:var(--fa-muted)}
#fa_gate .fa_summary{
  border:1px solid var(--fa-rule);border-radius:7px;background:#fff;padding:12px 14px;margin:6px 0 14px}
#fa_gate .fa_summary h3{margin:0 0 7px;font-size:16px;color:var(--fa-accent)}
#fa_gate .fa_chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px}
#fa_gate .fa_chip{
  font-size:11.5px;font-weight:700;color:#fff;background:var(--fa-context);
  border-radius:9px;padding:2px 8px;text-decoration:none}
#fa_gate .fa_chip.fa_done{background:var(--fa-ok)}
#fa_gate .fa_stat{font-size:15px;margin:4px 0}
#fa_gate .fa_stat b{color:var(--fa-accent)}

/* ------------------------------------------------ sync drawer */
#fa_gear{
  position:fixed;right:16px;bottom:16px;z-index:1400;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--fa-accent);background:var(--fa-accent);color:#fff;font-size:21px;
  line-height:1;cursor:pointer;box-shadow:var(--fa-shadow);padding:0}
#fa_gear:hover{background:#0f2a45}
#fa_gear.fa_on{background:#fff;color:var(--fa-accent)}
#fa_drawer{
  position:fixed;right:16px;bottom:72px;z-index:1401;width:392px;max-width:calc(100vw - 32px);
  max-height:78vh;overflow:auto;background:#fff;border:1px solid var(--fa-accent);
  border-radius:9px;box-shadow:var(--fa-shadow);padding:15px 16px 17px}
#fa_drawer[hidden]{display:none}
#fa_drawer h2{margin:0 0 3px;font-size:17px;color:var(--fa-accent);border:0;padding:0}
#fa_drawer h3{margin:15px 0 5px;font-size:14px;color:var(--fa-ink);border:0;padding:0}
#fa_drawer p{margin:5px 0;font-size:13.5px;line-height:1.5;color:var(--fa-muted)}
#fa_drawer textarea{
  width:100%;height:74px;font:12px/1.4 "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  border:1px solid var(--fa-rule);border-radius:5px;padding:6px 7px;resize:vertical;
  word-break:break-all;color:var(--fa-ink);background:#fbfbfb}
#fa_drawer .fa_row{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px;align-items:center}
#fa_drawer .fa_status{
  font-size:13px;border-left:3px solid var(--fa-foundation);background:#eef4fb;
  padding:6px 9px;border-radius:0 4px 4px 0;color:var(--fa-ink)}
#fa_drawer .fa_status.fa_live{border-left-color:var(--fa-ok);background:#e9f5ea}
#fa_drawer .fa_msg{font-size:13px;margin-top:6px}
#fa_drawer .fa_msg.fa_good{color:var(--fa-ok)}
#fa_drawer .fa_msg.fa_bad{color:var(--fa-core)}
#fa_drawer .fa_close{position:absolute;right:11px;top:10px;border:0;background:none;
  font-size:19px;line-height:1;color:var(--fa-muted);cursor:pointer}

/* ------------------------------------------------ passcode screen */
#fa_lock{
  position:fixed;inset:0;z-index:1900;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.74);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  padding:20px}
#fa_lock .fa_lock_card{
  width:340px;max-width:100%;background:#fff;border:1px solid var(--fa-accent);border-radius:10px;
  box-shadow:var(--fa-shadow);padding:22px 22px 18px;text-align:center}
#fa_lock h2{margin:0 0 4px;font-size:19px;color:var(--fa-accent);border:0;padding:0}
#fa_lock p{margin:4px 0 12px;font-size:14px;color:var(--fa-muted);line-height:1.5}
#fa_lock input{
  width:100%;font:16px var(--fa-font);padding:9px 11px;border:1px solid var(--fa-rule);
  border-radius:6px;text-align:center;letter-spacing:.06em}
#fa_lock input:focus{outline:2px solid var(--fa-accent);outline-offset:1px}
#fa_lock .fa_btn{width:100%;margin-top:9px;padding:10px}
#fa_lock .fa_lock_msg{min-height:18px;margin:8px 0 0;font-size:13.5px;color:var(--fa-core)}
#fa_lock .fa_lock_note{margin:9px 0 0;font-size:12px;color:var(--fa-context)}
html.fa_locked,body.fa_locked{overflow:hidden}

/* ------------------------------------------------ small screens */
@media (max-width:620px){
  #fa_drawer{right:8px;left:8px;width:auto;bottom:66px}
  #fa_gear{right:10px;bottom:10px}
  #fa_pill{left:8px;right:66px;max-width:none;bottom:12px}
  #fa_gate{padding:13px 12px 15px}
  #fa_note{width:290px}
}

/* ------------------------------------------------ print: no app chrome */
@media print{
  .fa_ui{display:none !important}
  #fa_pill,#fa_tool,#fa_note,#fa_gate,#fa_gear,#fa_drawer,#fa_lock{display:none !important}
  html.fa_locked,body.fa_locked{overflow:visible !important}
  .fa_flash_sec{animation:none !important;box-shadow:none !important}
  html.fa_prelock body{visibility:visible !important}
  mark.fa_hl{background:none !important;border-bottom:1.5px solid #000;box-shadow:none !important;
    animation:none !important}
  mark.fa_hl[data-note="1"]{border-bottom:2.5px double #000}
}


/* ------------------------------------------------ phone: nothing clipped off the right edge
   Added for phone revision. Every rule below is additive and lives inside
   max-width:560px, so tablet and desktop rendering is unchanged.
   Two defects it closes, both measured at 390x844:
     1. .masthead dl was display:grid with 11.5em + 1fr, i.e. ~503px of
        columns inside a 303px box, so every <dd> value ran off-screen.
     2. wide tables (.terms/.term/.trace and unclassed ones) and wide <pre>
        blocks overflowed the document, and the page does not pan sideways
        under a mobile viewport, so that content was unreachable.
   Technique: collapse the fixed grid to one column, and let the section
   wrapper scroll horizontally. No table is resized by any of this. */
@media (max-width:560px){
  .masthead dl{grid-template-columns:minmax(0,1fr)}
  .masthead dd{margin:0 0 .5em;overflow-wrap:anywhere}
  .sec{overflow-x:auto;-webkit-overflow-scrolling:touch}
  details > div{overflow-x:auto;-webkit-overflow-scrolling:touch}
  pre{overflow-x:auto;-webkit-overflow-scrolling:touch}
}