/* AP® Human Geography entry pages and trainer, on top of pages.css: the justification
   trainer (pages/justify.js), the score calculator (pages/score.js), the
   equations-sheet walkthrough and the unit practice tests
   (scripts/lib/aphug-entry.mjs). Kept out of pages.css so the exams page
   does not carry them. */
.hug-js-how summary{cursor:pointer;font:900 16px var(--font-ui);color:var(--cink);min-height:44px;display:flex;align-items:center;}
.hug-js-how[open] summary{margin-bottom:6px;}
.hug-js-nav span{color:var(--muted);}
@media (max-width:640px){
  body[data-app="justify"] .hug-hero{margin-top:10px;padding:14px 16px;border-radius:16px;}
  body[data-app="justify"] .hug-hero .eyebrow{margin-bottom:4px;}
  body[data-app="justify"] .hug-hero h1{font-size:22px;line-height:1.2;margin:0;}
  body[data-app="justify"] .hug-hero .lede{display:none;}
}
.hug-js-steps{margin:0 0 8px;padding-left:22px;}
.hug-js-steps li{margin:4px 0;}
.hug-js-card .hug-js-title{margin:4px 0 12px;font-size:21px;}
.hug-js-card .hug-js-title:focus{outline:none;}
.hug-js-prompt{font-size:16px;margin:14px 0;}
.hug-js-check{margin:18px 0 0;}
.hug-js-check h2:focus{outline:none;}
.hug-js-yours{margin:0 0 12px;padding:10px 12px;border-radius:10px;border:2px dashed var(--line);}
.hug-js-yours p{margin:0;overflow-wrap:anywhere;}
.hug-js-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin:14px 0;}
.hug-js-model{padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--white);}
.hug-js-model.is-earns{border-color:var(--cink);background:var(--ctint);}
.hug-js-model p{margin:0 0 8px;}
.hug-js-model .hug-js-why{margin:0;font-size:14px;}
.hug-js-model .hug-fq-sample-k{font:900 11.5px var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--cink);}
.hug-js-model.is-misses .hug-fq-sample-k{color:var(--muted);}
.hug-js-empty{color:var(--ink);}
.hug-sc-form{display:grid;gap:16px;}
.hug-sc-part{border:0;margin:0;padding:0;min-width:0;}
.hug-sc-part legend{font:900 15px var(--font-ui);margin:0 0 8px;}
.hug-sc-mcq,.hug-sc-q{display:flex;flex-direction:column;gap:4px;font:800 13.5px var(--font-ui);}
.hug-sc-mcq input,.hug-sc-q input{min-height:44px;padding:8px 10px;font:700 16px var(--font-ui);border:2px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);max-width:100%;box-sizing:border-box;}
.hug-sc-mcq input{max-width:140px;}
.hug-sc-part input[type=range]{width:100%;min-height:44px;accent-color:var(--cink);}
.hug-sc-frq{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.hug-sc-q small{font-weight:600;color:var(--muted);}
.hug-sc-out{margin:16px 0;}
.hug-sc-formula{padding:10px 12px;border-radius:10px;background:var(--ctint);overflow-wrap:anywhere;}
.hug-eq{width:100%;border-collapse:collapse;font-size:14.5px;}
.hug-eq th,.hug-eq td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--line);}
.hug-eq thead th{font:900 12.5px var(--font-ui);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.hug-eq-f{font:700 15px var(--font-mono, monospace);white-space:normal;color:var(--cink);}
.hug-eq tbody th{min-width:150px;}
/* Fixed columns so a long formula cannot squeeze the words; MathML does not wrap, so it scrolls in its cell.
   From 720 px: below that the columns size to their content and the whole table scrolls in its (focusable) region. */
@media (min-width: 720px){
  .hug-eq{table-layout:fixed;}
  /* Four columns: the formula with its worked line under it, what and when, the trap, where it is taught. */
  .hug-eq thead th:nth-child(1){width:42%;} .hug-eq thead th:nth-child(2){width:26%;} .hug-eq thead th:nth-child(3){width:19%;} .hug-eq thead th:nth-child(4){width:13%;}
}
.hug-eq-f,.hug-eq-w{display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 0 4px;}
.hug-eq-w{font-size:14px;font-weight:400;margin-top:4px;}
@media (max-width: 719px){ .hug-eq-f,.hug-eq-w{max-width:none;overflow:visible;} }
@media (max-width: 560px){ .hug-eq-w{max-width:100%;overflow-x:auto;} }
.hug-eq-not li{margin:8px 0;}
.hug-entry .hug-qs{margin:16px 0;}
.hug-cards-row{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 12px;}
.hug-sample-done{margin:14px 0;}
@media (max-width:560px){
  .hug-eq thead{display:none;}
  .hug-eq tr{display:block;padding:8px 0;border-bottom:1px solid var(--line);}
  .hug-eq th,.hug-eq td{display:block;border:0;padding:3px 0;}
  .hug-eq tbody th{min-width:0;}
}
.hug-eq-tools{display:block;margin-top:6px;font-weight:700;}
.hug-eq-tools a{display:inline-block;min-height:24px;}

/* Justification trainer on the Tool Studio (justify.js studio()): the
   prompt and the answer box are the stage; no card inside the stage card. */
.ls-root .hug-ls-jcard{margin:0;padding:0;border:0;background:none;box-shadow:none;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;}
.ls-root .hug-ls-jcard .hug-js-title{margin:0;font:900 var(--ls-l)/1.25 var(--font-ui);letter-spacing:-.01em;}
.ls-root .hug-ls-jcard .hug-stim{margin:0;padding:12px 14px;border-radius:16px;background:var(--surface2);border:0;font-size:var(--ls-m);}
.ls-root .hug-ls-jcard .hug-stim-k{font:800 var(--ls-s) var(--font-ui);color:var(--muted);text-transform:none;letter-spacing:0;margin:0 0 4px;}
.ls-root .hug-ls-jcard .hug-js-prompt{margin:0;font:800 var(--ls-m)/1.45 var(--font-ui);}
.ls-root .hug-ls-jcard .hug-fq-alabel{font:800 var(--ls-s) var(--font-ui);color:var(--muted);}
.ls-root .hug-ls-jcard .hug-fq-answer{flex:1 0 120px;min-height:120px;border:0;border-radius:16px;box-shadow:inset 0 0 0 2px var(--line);font:600 var(--ls-m)/1.5 var(--font-ui);padding:12px 14px;resize:none;}
.ls-root .hug-ls-jcard .hug-fq-answer:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cink);}
.ls-root .hug-ls-jcard > .hug-small{margin:0;font-size:var(--ls-s);}
.ls-root .hug-pr-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0;}
.ls-root .hug-pr-actions > *{flex:1 1 auto;}
.ls-root .hug-ls-jnav{margin:0;}
.ls-root .hug-ls-jnav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:14px;background:var(--surface2);color:var(--ink);font:700 var(--ls-m) var(--font-ui);text-decoration:none;}
.ls-root .hug-ls-jnav span{display:none;}
.ls-sheet .hug-js-check{margin:0;}
.ls-sheet .hug-js-check h2{font:900 var(--ls-l)/1.25 var(--font-ui);margin:0 0 10px;}
.ls-sheet .hug-js-yours{border-radius:14px;}
.ls-sheet .hug-fq-sample-k,.ls-sheet .hug-js-model .hug-fq-sample-k{font:800 var(--ls-s) var(--font-ui);text-transform:none;letter-spacing:0;}
.ls-sheet .hug-js-models{grid-template-columns:1fr;}
.ls-sheet .hug-js-model{border-radius:16px;border:0;box-shadow:inset 0 0 0 1.5px var(--line);}
.ls-sheet .hug-js-model.is-earns{box-shadow:inset 0 0 0 2px var(--cink);}
.ls-sheet .hug-fq-rpart{margin:0;padding:0;border:0;}
.ls-sheet .hug-fq-rpart legend{font:800 var(--ls-s) var(--font-ui);color:var(--muted);padding:0;margin-bottom:6px;}
.ls-sheet .hug-js-how{margin:0;padding:14px 0 0;border:0;border-top:1px solid var(--line-soft);background:none;box-shadow:none;border-radius:0;}
.ls-sheet .hug-js-how summary{color:var(--ink);pointer-events:none;min-height:0;}
.ls-sheet .hug-js-check[hidden]{display:none;}
.ls-root .hug-ls-jlist{display:flex;flex-direction:column;gap:10px;}
.ls-root .hug-ls-jlist .hug-fq-card{border:0;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:16px;}
.ls-root .hug-ls-jlist .hug-fq-card-k{font:800 var(--ls-s) var(--font-ui);text-transform:none;letter-spacing:0;}
.ls-root .hug-ls-jlist #hug-js-count{margin:0;}
.ls-root .hug-fq-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;}
.ls-root .hug-fq-filters .hug-pr-field{display:flex;flex-direction:column;gap:4px;font:800 var(--ls-s) var(--font-ui);color:var(--muted);}
.ls-root .hug-fq-filters select{width:100%;min-height:48px;padding:0 12px;border:0;border-radius:14px;background:var(--surface2);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font:700 var(--ls-m) var(--font-ui);}

/* Reference pages on the calm layout (pages/calm-ref.js): the slim bar,
   then the page in calm type (13 / 16 / 22), no caps kickers, no hero. */
body.hug-calm-ref main.hug-entry{max-width:760px;margin:0 auto;padding:4px 16px 32px;font:600 16px/1.6 var(--font-ui);color:var(--ink);}
body.hug-calm-ref main.hug-entry .hug-ref-lede{margin:8px 0 20px;font:700 22px/1.35 var(--font-ui);letter-spacing:-.01em;color:var(--ink);}
body.hug-calm-ref main.hug-entry .xsection{margin:0;padding:22px 0 0;border:0;background:none;box-shadow:none;border-radius:0;}
body.hug-calm-ref main.hug-entry .xsection + .xsection{margin-top:22px;border-top:1px solid var(--line-soft);}
body.hug-calm-ref main.hug-entry h2{margin:0 0 10px;font:900 22px/1.25 var(--font-ui);letter-spacing:-.01em;text-transform:none;color:var(--ink);}
body.hug-calm-ref main.hug-entry p,body.hug-calm-ref main.hug-entry li{font-size:16px;line-height:1.6;}
body.hug-calm-ref main.hug-entry .hug-small{font-size:13px;}
body.hug-calm-ref main.hug-entry table{font-size:13px;}
body.hug-calm-ref main.hug-entry th{text-transform:none;letter-spacing:0;}
body.hug-calm-ref main.hug-entry .hug-ex-band-warn{border-radius:16px;}
body.hug-calm-ref .hug-foot{max-width:760px;margin:0 auto;padding:0 16px 24px;}
@media (min-width:1000px){ body.hug-calm-ref main.hug-entry{padding-top:8px;} }
.ls-root .hug-ls-jcard .hug-js-prompt{color:var(--ink);} .ls-root .hug-ls-jcard .hug-stim{box-shadow:none;}
/* "Make it specific": the builder under the checklist (pages/justify.js). */
.hug-js-build{margin-top:14px;}
.hug-js-build .hug-cl-slot select{max-width:100%;}
.hug-js-bact{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.hug-js-bfb:empty{display:none;}
.hug-js-bfb{margin-top:8px;}
/* "Models you must know" (models.html). Pictures reuse Model Studio's figure
   styles (assets/tools/model-studio.css): a white card in both themes, every
   number and word in HTML. The numbered key sits beside the picture on a
   wide screen and under it on a phone. */
.hug-mdl-jump ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.hug-mdl-jump a{display:inline-block;padding:6px 10px;border:1.5px solid var(--line);border-radius:999px;font:600 14px/1.3 var(--font-ui);text-decoration:none;color:var(--ink);}
.hug-mdl-jump a:hover,.hug-mdl-jump a:focus-visible{border-color:var(--cink);color:var(--cink);}
.hug-mdl-unit > h2{margin-bottom:4px;}
.hug-mdl{padding:16px 0 20px;border-top:1px solid var(--line);scroll-margin-top:120px;}
.hug-mdl:first-of-type{border-top:0;}
.hug-mdl h3{margin:0 0 4px;}
.hug-mdl-meta{margin:0 0 10px;}
.hug-mdl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start;}
.hug-mdl-pic{min-width:0;}
.hug-mdl-key{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.hug-mdl-key li{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border:1.5px solid var(--line);border-radius:10px;}
.hug-mdl-key li > span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0;}
.hug-mdl-n{flex:none;width:26px;height:26px;border-radius:50%;background:#1B1B1B;color:#fff;font:800 13px/26px var(--font-ui);text-align:center;}
.hug-mdl-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:14px 0 0;}
.hug-mdl-facts dt{font-weight:800;}
.hug-mdl-facts dd{margin:0;}
.hug-mdl-facts ul{margin:0;padding-left:18px;}
.hug-mdl-confuse{margin:10px 0 0;padding:10px 12px;border-left:4px solid var(--cink);border-radius:0 10px 10px 0;background:var(--ctint);}
@media (max-width:720px){
  .hug-mdl-grid{grid-template-columns:1fr;}
  .hug-mdl-facts{grid-template-columns:1fr;gap:2px;}
  .hug-mdl-facts dd{margin-bottom:8px;}
}