/* FISD TSIA2 Practice Bank: the question bank (index.html) and essay page (essays.html).
   Matches FARM, the STAAR item bank: the same colors, header, fonts, filter menus, question cards, and buttons.
   Light unless dark mode is chosen in this browser; questions stay black on white either way. */
:root{--purple:#442872;--deep:#2e1a4f;--gold:#fdb61c;--gold-soft:#fff2d1;--ink:#1d1a24;--muted:#5f586f;--page:#f4f2f8;--panel:#fff;--line:#dcd6e6;--sel:#ece6f6;
  --ok:#1b7a43;--bad:#b3261e;
  --chrome:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;--item:Verdana,Geneva,"DejaVu Sans",sans-serif;
  /* older names, still used by essay.css and the coverage table */
  --bg:var(--page);--panel-2:var(--sel);--text:var(--ink);--text-2:var(--muted);
  color-scheme:light}
:root[data-theme="purple"]{color-scheme:dark;--ink:#ece8f4;--muted:#b5adc7;--page:#16131d;--panel:#211c2c;--line:#3a3350;--sel:#322845;--gold-soft:#3a2f14}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--chrome);font-size:17px;-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- header ---------- */
header.top{background:var(--purple);color:#fff;border-bottom:5px solid var(--gold);position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;gap:14px 18px;padding:10px 22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;margin-right:auto;min-width:0}
.wordmark{margin:0;font-family:Raleway,"Barlow Semi Condensed",Arial,sans-serif;color:#fff;line-height:1}
.wordmark .wm1{display:block;font-weight:800;font-size:1.65rem;letter-spacing:.24em;text-transform:uppercase}
.wordmark .wm-rule{display:block;height:2px;background:linear-gradient(90deg,var(--gold),rgba(253,182,28,0));margin:7px 0}
.wordmark .wm2{display:block;font-family:Montserrat,Raleway,Arial,sans-serif;font-weight:200;font-size:1rem;letter-spacing:.22em;text-transform:uppercase}
.tmenu{display:contents}
.pickers{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pickers label{display:flex;flex-direction:column;gap:8px;font-size:.8rem;font-weight:700;line-height:1.1;color:#ddd2f2}
.pickers select{background:var(--deep);color:#fff;border:1.5px solid #6d56a0;border-radius:6px;padding:6px 10px;font-weight:700;font-size:1rem;min-width:120px}
@media (max-width:1199px){#hcat{min-width:210px}}
.defbtn{align-self:flex-end;background:none;border:1.5px solid #6d56a0;color:#ddd2f2;border-radius:6px;padding:6px 10px;font-weight:700;font-size:.85rem;white-space:nowrap}
.defbtn:hover{border-color:var(--gold);color:#fff}.defbtn.on{border-color:var(--gold);color:var(--gold)}
.toolbtn{white-space:nowrap}
.srch{flex:1 1 280px;max-width:420px}
.srch input{width:100%;padding:9px 14px;border-radius:7px;border:0;font-family:var(--chrome);font-size:1.05rem;background:#fff;color:#1d1a24}
.hbtn{background:none;border:2px solid var(--gold);color:#fff;border-radius:7px;padding:6px 12px;font-weight:700;text-decoration:none;display:inline-block}
.hbtn:hover{background:var(--gold);color:var(--deep)}
.hbtn.theme{display:inline-flex;align-items:center;gap:6px}
.hbtn.theme::before{content:"☾";font-size:1.05em;line-height:1}
.hbtn.theme[aria-pressed="true"]::before{content:"☀"}
@media (max-width:700px){.wordmark .wm1{font-size:1.2rem;letter-spacing:.16em}.wordmark .wm2{font-size:.72rem;letter-spacing:.14em}}

/* ---------- layout and filter panel ---------- */
.wrap{display:grid;grid-template-columns:330px minmax(0,1fr);align-items:start}
.side{position:sticky;top:var(--hdr,84px);max-height:calc(100vh - var(--hdr,84px));overflow:auto;background:var(--panel);border-right:1px solid var(--line);padding:14px 16px 90px;align-self:stretch}
.side .clear{width:100%;margin:0 0 10px;padding:7px 10px;border-radius:7px;border:2px solid #c0392b;background:var(--panel);color:#b3261e;font-weight:800}
.side .clear:hover{background:#b3261e;color:#fff}
:root[data-theme="purple"] .side .clear{color:#fff;border-color:#6d56a0;background:var(--sel)}:root[data-theme="purple"] .side .clear:hover{background:#b3261e;border-color:#b3261e}
#ftoggle{display:none}
#total{margin:0 0 2px;color:var(--muted);font-weight:600}
.covlink{display:block;margin:0 0 12px;padding:2px 0}
.summary{color:var(--muted);font-size:.95rem}
.fg{margin:0 0 16px}.fg h3{margin:0 0 7px;font-size:1rem;font-weight:800}
/* one drop-down menu with checkboxes per section (as in FARM) */
details.ms{border:1.5px solid var(--line);border-radius:7px;background:var(--panel)}
details.ms>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 10px;font-weight:700}
details.ms>summary::-webkit-details-marker{display:none}
details.ms>summary::after{content:"";margin-left:auto;flex:none;width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
details.ms[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
details.ms>summary .ms-sum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
details.ms.has>summary{background:var(--purple);color:#fff;border-radius:5px}
details.ms[open]{border-color:var(--purple);box-shadow:0 4px 14px rgba(20,10,40,.15)}
.ms-pop{border-top:1px solid var(--line);padding:6px 8px 8px}
.ms-acts{display:flex;gap:10px;margin:0 0 4px}.ms-acts .link{font-size:.9rem}
.ms-list{max-height:280px;overflow:auto;display:grid;gap:1px}
.ms-grp{margin:6px 6px 2px;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ms-opt{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:start;padding:5px 6px;border-radius:5px;cursor:pointer;line-height:1.25}
.ms-opt:hover{background:var(--sel)}.ms-opt input{accent-color:var(--purple);width:16px;height:16px;margin:1px 0 0}
.ms-opt.none{opacity:.55;cursor:default}
.ms-n{font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap}

/* ---------- results bar and pages ---------- */
main{padding:18px 26px 120px;max-width:1040px;min-width:0}
.bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:14px}
.bar h2{margin:0 auto 0 0;font-size:1.15rem;font-weight:400}
#count b{font-weight:800}
.hbtn2{background:var(--panel);border:2px solid var(--line);border-radius:7px;padding:5px 12px;font-weight:700}
.hbtn2.gold{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.hbtn2:disabled{opacity:.45;cursor:default}
#onlysel[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.sortl{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--muted)}
.sortl select{border:1.5px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--panel);color:var(--ink);font-weight:600}
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:4px 0 14px}
.pg-info{color:var(--muted);margin-right:auto}
.pg{min-width:38px;height:34px;padding:0 10px;border-radius:7px;border:2px solid var(--line);background:var(--panel);font-weight:700}
.pg.on{background:var(--purple);border-color:var(--purple);color:#fff}
.pg:disabled{opacity:.4;cursor:default}
.pg-gap{padding:0 2px;color:var(--muted)}
.pg-per{color:var(--muted);font-weight:700;margin-left:8px}
.pg-per select{margin-left:4px;padding:4px 6px;border:1.5px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}

/* ---------- question cards (as in FARM; a selected card has a gold outline) ---------- */
.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px;background:#fff}
.card.picked{outline:3px solid var(--gold);outline-offset:-1px}
.card-h{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;padding:7px 12px;background:var(--panel);border-bottom:1px solid var(--line);color:var(--ink)}
.sel{display:flex;align-items:center;gap:6px;font-weight:800;margin-right:6px;cursor:pointer}.sel input{width:18px;height:18px;accent-color:var(--purple)}
.tag{font-size:.86rem;font-weight:700;padding:1px 8px;border-radius:4px;border:1px solid var(--line)}
.tag.t1{border-color:#8fc9a5}.tag.t2{border-color:#e6c36a}.tag.t3{border-color:#e39a93}
.calc-btn{font-size:.86rem;font-weight:700;padding:1px 8px;border-radius:4px;border:1.5px solid var(--purple);background:var(--panel);color:var(--purple)}
:root[data-theme="purple"] .calc-btn{color:#fff;border-color:#6d56a0}
.card-h .id{color:var(--muted);font-size:.82rem;margin-left:auto}
.link{background:none;border:0;color:var(--purple);font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:2px 4px}
:root[data-theme="purple"] .link{color:var(--gold)}
.card-h .link{white-space:nowrap}
.card-h .rp-link{color:var(--muted);font-weight:600;font-size:.86rem;opacity:1}

/* the question itself */
.item{padding:16px 22px 4px;color:#000;font-family:var(--item);font-size:16px;line-height:1.5}
.item .stem p{margin:0 0 10px;max-width:740px}
.item .stem img{display:block;max-width:100%;margin:6px 0 12px}
.item .m,.choice .m{font-family:"Cambria Math","Times New Roman",serif}
.choices{display:grid;gap:8px;margin-top:6px;max-width:740px}
.choice{display:flex;align-items:center;gap:12px;padding:4px 10px;margin:0 -10px;border:2px solid transparent;border-radius:8px;background:none;text-align:left;color:#000;font:inherit}
.choice:hover{background:#f3effa}
.choice .L{flex:none;width:26px;height:26px;border:1.6px solid #000;border-radius:50%;display:inline-grid;place-items:center;font-size:13px;font-weight:700}
.choice.sel{background:#ece6f6;border-color:var(--purple)}.choice.sel .L{background:var(--purple);border-color:var(--purple);color:#fff}
.choice.right{background:#e3f4ea;border-color:var(--ok);box-shadow:0 0 0 1px var(--ok)}.choice.right .L{background:var(--ok);border-color:var(--ok);color:#fff}
.choice.wrong{background:#fdecea;border-color:var(--bad)}.choice.wrong .L{background:var(--bad);border-color:var(--bad);color:#fff}
.mk{margin-left:6px;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font:700 13px Arial,sans-serif;color:#fff;flex:none}
.mk.y{background:var(--ok)}.mk.n{background:var(--bad)}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 22px 18px;background:#fff;font-size:16px}
.btn{font-weight:800;border-radius:7px;padding:5px 14px;border:2px solid var(--purple);background:#fff;color:var(--purple)}
.btn.p{background:var(--purple);color:#fff}
.fb{font-size:17px;font-weight:700}
/* the answer and explanations (FARM's answer box) */
.rat{margin:0 22px 20px;padding:8px 12px;background:#fff6dc;border-left:4px solid var(--gold);font:14px/1.5 var(--item);color:#1d1a24}
.ans-badge{display:inline-block;margin:0 0 6px;padding:5px 10px;border:1.5px solid var(--ok);border-radius:6px;background:#e3f4ea;color:#0f5130;font-weight:700}
.why{list-style:none;margin:6px 0 0;padding:0}
.why .w{margin:2px 0;padding:2px 0}
.why .w>b{margin-right:6px}
.why .w.ok{background:#e3f4ea;border-left:5px solid var(--ok);border-radius:4px;padding:5px 9px;margin:4px 0;font-weight:600}
.why .w.picked{background:#fdecea;border-left:5px solid var(--bad);border-radius:4px;padding:5px 9px;margin:4px 0}
.okt{display:inline-block;background:var(--ok);color:#fff;border-radius:4px;padding:0 7px;font-size:.88em;font-weight:700;margin-right:2px}
.teks{margin-top:8px;font-size:13px;color:#555}
/* small data tables inside questions */
table.t{border-collapse:collapse;margin:8px 0 14px;font-size:.95em}
table.t td,table.t th{border:1px solid #888;padding:4px 12px;text-align:center}
table.t tr:first-child td,table.t th{background:rgba(127,127,127,.12);font-weight:700}
/* fractions */
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.9em;margin:0 2px}
.fr>span:first-child{border-bottom:1px solid currentColor;padding:0 2px}

/* ELAR: directions and the passage above the question */
.einst{margin:12px 22px 6px;font:italic 14px/1.4 var(--item);color:#4a4560}
.pbox{margin:6px 22px 4px;border:1px solid #ddd6ea;border-radius:8px;background:#fbfaff;color:#000}
.pbox>summary{padding:8px 12px;font-weight:700;cursor:pointer;color:var(--purple);font-family:var(--chrome);font-size:17px}
.pbox>summary small{font-weight:500;color:#6b6680;margin-left:6px;font-size:14px}
.pwrap{max-height:380px;overflow:auto;padding:4px 18px 12px}
.psg{font:15px/1.6 var(--item);color:#1d1a24}
.psg p{margin:0 0 9px;text-indent:0}
.psg.k-set p,.psg.k-essay p{text-indent:2em}
.psg .psg-intro{font-style:italic;text-indent:0}
.psg .psg-fn,.psg .psg-src{text-indent:0;font-size:13px;color:#555}
.psg .psg-sub{margin:10px 0 6px;font-size:15px}
.stem .quote{font-style:italic;margin-left:6px}
.stem u{text-underline-offset:3px}

/* watermark: a light district "F" behind each question and passage */
.wm{position:relative;isolation:isolate}
.wm::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:24px;top:0;bottom:0;margin:auto 0;width:160px;height:min(196px,90%);
  background:url("../assets/brand/fisd-f.png") center/contain no-repeat;opacity:.07;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pbox.wm::after{right:0;left:0;margin:auto}

/* ---------- the shared dialogs (Report a problem) in FARM's style on these pages ---------- */
.sx-modal{background:rgba(20,10,40,.55)}
.sx-modal .sx-box{border-radius:12px;border-top:6px solid var(--purple);background:var(--panel);color:var(--ink);font:17px/1.45 var(--chrome)}
.sx-modal .sx-box h2{font-size:1.6rem;font-weight:800}
.sx-modal .sx-n{color:var(--muted);font-size:.95rem}
.sx-modal .sx-f input,.sx-modal .sx-f textarea{border:1.5px solid var(--line);border-radius:6px;background:var(--page);color:var(--ink);font:500 16px var(--chrome)}
.sx-modal .sx-iss{border:1.5px solid var(--line);border-radius:8px}.sx-modal .sx-iss legend{font-weight:800}.sx-modal .sx-iss input{accent-color:var(--purple)}
.sx-modal .sx-box .big{background:var(--purple);color:#fff;border:0;border-radius:7px;font:800 17px var(--chrome);padding:9px 16px}
.sx-modal .sx-box .gbtn{background:var(--panel);border:2px solid var(--line);border-radius:7px;color:var(--ink);font:700 16px var(--chrome);padding:7px 12px}
.sx-modal .sx-x{color:var(--ink)}.sx-modal .sx-fb{color:var(--ok)}

/* ---------- skill coverage ---------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(20,10,40,.55);display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-box{position:relative;background:var(--panel);color:var(--ink);border-top:6px solid var(--purple);border-radius:12px;max-width:820px;width:100%;max-height:85vh;overflow:auto;padding:20px 24px}
.modal-box h2{margin:0 0 8px;font-size:1.6rem;font-weight:800}
.modal-x{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--ink);font-size:18px}
.cov{width:100%;border-collapse:collapse;font-size:16px}
.cov th,.cov td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center}
.cov td:first-child,.cov th:first-child{text-align:left}
.cov tr.cat td{background:var(--sel);font-weight:800;text-align:left}
.cov .bar{display:inline-block;height:8px;border-radius:4px;background:var(--gold);vertical-align:middle}

/* ---------- 4-function calculator (TI-108 style) ---------- */
.c108{position:fixed;right:24px;top:110px;z-index:50;width:196px;background:#2f5683;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.45);padding:0 12px 12px;font-family:Arial,sans-serif;outline:none}
.c108-bar{display:flex;justify-content:space-between;align-items:center;cursor:move;padding:6px 0;color:#dce6f3;font-size:11px}
.c108-x{background:none;border:0;color:#fff;font-size:15px}
.c108-brand{display:flex;justify-content:space-between;align-items:baseline;color:#fff;font-size:9px;letter-spacing:.06em;margin-bottom:4px}
.c108-brand b{font:700 17px Georgia,serif;letter-spacing:.02em}
.c108-disp{background:#fff;border-radius:2px;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;margin-bottom:10px}
.c108-m{font-size:10px;font-weight:700;visibility:hidden}
.c108-num{font:28px "Courier New",monospace;letter-spacing:1px;color:#111}
.c108-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.c108-k{height:26px;border:0;border-radius:3px;background:#edf0f4;color:#333;font-weight:700;font-size:14px;box-shadow:0 2px 0 #9aa8bb}
.c108-k.r{background:#e3262f;color:#fff;box-shadow:0 2px 0 #8d1218}
.c108-k.sm{font-size:10.5px}
.c108-k.eq{grid-row:span 2;height:auto}
.c108-k:active{transform:translateY(1px);box-shadow:none}

/* ---------- phones and narrow screens ---------- */
@media (max-width:900px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .side{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);padding:12px 14px}
  #ftoggle{display:block;width:100%;margin:0 0 8px;padding:8px;border-radius:7px;border:2px solid var(--purple);background:var(--panel);color:var(--purple);font-weight:800}
  :root[data-theme="purple"] #ftoggle{color:#fff}
  .side:not(.open) #filters,.side:not(.open) #total,.side:not(.open) .covlink{display:none}
  main{padding:14px 12px 120px}
  .top-in{padding:10px 14px}
  .pickers{width:100%}.pickers label{flex:1 1 140px}.pickers select{width:100%;min-width:0}#hcat{min-width:0}
  .defbtn{display:none}
  .srch{flex:1 1 100%;max-width:none}
  .item{padding:14px 14px 4px}.actions{padding:10px 14px 14px}
  .card-h .id{margin-left:0;flex-basis:100%}
  .pbox,.einst{margin-left:12px;margin-right:12px}.pwrap{padding:4px 10px 10px;max-height:300px}
  .rat{margin:0 12px 16px}
  .wm::after{width:110px;right:10px}
  .pg-info{flex-basis:100%}.pg-per{margin-left:auto}
  .c108{right:8px;top:auto;bottom:90px}
  .gc{right:4px;left:4px;width:auto;top:70px}.gc canvas{width:100%}
}

/* ---------- header layout, shared with the other FARM bank ----------
   The same block is in site/app/styles.css (STAAR) and site/tsia2/css/bank.css (TSIA2), so the two headers line up:
   the wordmark column, the two menus, Make default, the search box, and the four buttons sit in the same places.
   1200px and wider: buttons on a second row under the menus. 1880px and wider: everything on one row.
   Narrower screens keep each bank's own wrapping (and STAAR's phone Menu). */
.hbtns{display:contents}
@media (min-width:1200px){
  .top-in{display:grid;grid-template-columns:457px auto minmax(0,1fr);grid-template-areas:"brand pick srch" "brand btns btns";column-gap:18px;row-gap:10px;align-items:center}
  .top-in>.brand{grid-area:brand;margin:0}
  .top-in .pickers{grid-area:pick;flex-wrap:nowrap}
  .top-in .pickers label:nth-of-type(1) select,.top-in .pickers label:nth-of-type(2) select{width:180px;min-width:0}
  .top-in .defbtn{min-width:112px}
  .top-in .srch{grid-area:srch;max-width:none}
  .top-in .hbtns{grid-area:btns;display:flex;gap:10px}
  .top-in .hbtns>*{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
  .top-in .hbtns>:nth-child(1){width:140px}.top-in .hbtns>:nth-child(2){width:150px}.top-in .hbtns>:nth-child(3){width:125px}.top-in .hbtns>:nth-child(4){width:195px}
}
@media (min-width:1880px){
  .top-in{grid-template-columns:457px auto minmax(0,1fr) auto;grid-template-areas:"brand pick srch btns"}
}

/* ---------- phones (760px and narrower): slim header with a Menu panel, as in the STAAR bank ----------
   The wordmark and a Menu button (subject and number of filters on) stay; the menus, search, Make default, and the
   header buttons open in a panel under the header. Tapping outside it, or Enter in search, closes it. */
.mbtn{display:none}
.tmenu{display:contents}
@media (max-width:760px){
  header.top{border-bottom-width:4px}
  .top-in{flex-wrap:nowrap;padding:8px 12px;gap:10px;position:relative}
  .wordmark .wm1{font-size:1.02rem;letter-spacing:.16em}
  .wordmark .wm-rule{margin:4px 0}
  .wordmark .wm2{font-size:.55rem;letter-spacing:.1em;white-space:nowrap}
  .brand{flex:none}
  .mbtn{display:flex;align-items:center;gap:9px;margin-left:auto;min-width:0;max-width:55%;background:none;border:2px solid var(--gold);color:#fff;border-radius:8px;padding:7px 10px;font-weight:700;cursor:pointer}
  .mb-ctx{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .mb-badge{display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;margin-left:4px;padding:0 4px;border-radius:999px;background:var(--gold);color:var(--deep);font-size:.78rem;font-weight:800}
  .mb-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mb-ico{flex:none;width:18px;height:2px;background:#fff;border-radius:2px;box-shadow:0 -6px 0 #fff,0 6px 0 #fff;margin:6px 0}
  body.menu-open .mb-ico{background:transparent;box-shadow:none;position:relative}
  body.menu-open .mb-ico::before,body.menu-open .mb-ico::after{content:"";position:absolute;left:0;top:0;width:18px;height:2px;background:#fff;border-radius:2px;transform:rotate(45deg)}
  body.menu-open .mb-ico::after{transform:rotate(-45deg)}
  .tmenu{display:none}
  body.menu-open .tmenu{display:flex;flex-wrap:wrap;gap:12px 8px;position:absolute;z-index:40;left:0;right:0;top:100%;background:var(--purple);padding:12px 14px 16px;border-bottom:4px solid var(--gold);box-shadow:0 14px 28px rgba(20,10,40,.35);max-height:calc(100vh - 70px);overflow:auto}
  .tmenu .pickers{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tmenu .pickers label{min-width:0}
  .tmenu .pickers select{width:100%;min-width:0}
  .tmenu .defbtn{display:inline-block;grid-column:1/-1;justify-self:start}
  .tmenu .srch{flex:1 1 100%;max-width:none}
  .tmenu .hbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1 1 100%}
  .tmenu .hbtn{display:flex;align-items:center;justify-content:center;padding:9px 6px;white-space:nowrap;text-align:center}
  /* results bar: count and sort on one row, the four buttons two to a row */
  main .bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
  main .bar h2{margin:0}
  main .bar .sortl{justify-self:end;min-width:0}
  main .bar .sortl select{max-width:150px}
  main .bar .hbtn2{padding:7px 6px;font-size:.86rem;line-height:1.2}
}

/* essays.html on phones: the wordmark and "Question bank" on the first row, the other header buttons two to a row */
@media (max-width:760px){
  .top-in.plain{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .top-in.plain>.brand{margin:0!important}
  .top-in.plain>a.hbtn{justify-self:end;align-self:center}
  .top-in.plain>button.hbtn{display:flex;align-items:center;justify-content:center;padding:7px 6px;font-size:.86rem;line-height:1.2;text-align:center}
}