/* =====================================================================
   FARM theme (app/farm-theme.css), shared by both banks: the STAAR Item Bank (index.html, quiz.html) and the
   TSIA2 Practice Bank (tsia2/index.html, tsia2/essays.html, which load it as ../app/farm-theme.css).
   Loaded after each bank's own stylesheet, so it wins where they differ.

   The look comes from the home screen: a deep purple gradient, glass panels with faint gold edges, gold used as
   light (gold-gradient buttons, a gold glow on whatever is selected), Raleway for big numbers and headings.

   Two looks, chosen with the header button and kept in this browser as "fisd-look":
     purple (standard)  :root[data-theme="purple"]  the purple page described above
     light              :root[data-theme="light"]   the light page, with the same shapes, glows, and buttons
   Purple applies to the screen only (@media screen), so printing always uses the light colors.

   "Paper" stays white in both looks: question cards, dialogs, the presentation question area, the booklet
   preview, and the print area. Those are listed under PAPER below, and they get the light colors back.
   ===================================================================== */

/* ---------- shared pieces ---------- */
:root{--fx-grad:radial-gradient(ellipse at 50% -8%,#5b3796 0,#3d2168 44%,#1f1038 100%);
  --fx-band:linear-gradient(120deg,#5b3796,#3d2168 60%,#2e1a4f);
  --fx-gold:linear-gradient(145deg,#ffe08a,#fdb61c 55%,#e09a00);
  --fx-shadow:0 14px 34px rgba(8,2,20,.28);
  --fx-glow:0 0 0 2px #fdb61c,0 0 26px rgba(253,182,28,.45)}

/* ---------- PURPLE: the page ---------- */
@media screen{
  :root[data-theme="purple"]{color-scheme:dark;background:#1f1038 var(--fx-grad) fixed;
    --ink:#f4f0fb;--muted:#c9bce4;--page:#24133f;--panel:rgba(255,255,255,.06);--line:rgba(255,255,255,.15);--sel:rgba(255,255,255,.1);--gold-soft:rgba(253,182,28,.16);--purple:#7550c0;
    --bg:#24133f;--panel-2:rgba(255,255,255,.1);--text:#f4f0fb;--text-2:#c9bce4}
  :root[data-theme="purple"] body{background:transparent;color:var(--ink)}
  :root[data-theme="purple"] select option{background:#fff;color:#1d1a24}
  :root[data-theme="purple"] input[type=checkbox],:root[data-theme="purple"] input[type=radio]{accent-color:#fdb61c}

  /* header: glass over the gradient, with a gold hairline */
  :root[data-theme="purple"] header.top{background:linear-gradient(180deg,rgba(43,22,78,.94),rgba(36,18,66,.86));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(253,182,28,.6);box-shadow:0 1px 0 rgba(253,182,28,.18),0 10px 30px rgba(8,2,20,.35)}
  :root[data-theme="purple"] .pickers select{background:rgba(255,255,255,.08);border-color:rgba(253,182,28,.45)}
  :root[data-theme="purple"] body.menu-open .tmenu{background:#2a1748}

  /* filter panel */
  :root[data-theme="purple"] #side,:root[data-theme="purple"] .side{background:rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.09)}
  :root[data-theme="purple"] body.show-filters #side,:root[data-theme="purple"] .side-head{background:#24133f}
  :root[data-theme="purple"] details.ms{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
  :root[data-theme="purple"] details.ms[open]{border-color:#fdb61c;box-shadow:0 8px 24px rgba(8,2,20,.4)}
  :root[data-theme="purple"] details.ms.has>summary{background:var(--fx-gold);color:#2e1a4f}
  :root[data-theme="purple"] .side-reset,:root[data-theme="purple"] .side .clear{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
  :root[data-theme="purple"] .side-reset:hover,:root[data-theme="purple"] .side .clear:hover{background:#b3261e;border-color:#b3261e}
  :root[data-theme="purple"] #ftoggle{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(253,182,28,.5)}

  /* buttons on the page: glass with gold edges; the active one turns gold */
  :root[data-theme="purple"] .ghost,:root[data-theme="purple"] .hbtn2,:root[data-theme="purple"] .pg{background:rgba(255,255,255,.07);border:1.5px solid rgba(253,182,28,.42);color:var(--ink)}
  :root[data-theme="purple"] .ghost:hover:not(:disabled),:root[data-theme="purple"] .hbtn2:hover:not(:disabled),:root[data-theme="purple"] .pg:hover:not(:disabled){background:rgba(253,182,28,.15)}
  :root[data-theme="purple"] .rbar .ghost.on,:root[data-theme="purple"] #onlysel[aria-pressed="true"],:root[data-theme="purple"] .pg.on{background:var(--fx-gold);border-color:#fdb61c;color:#2e1a4f}
  :root[data-theme="purple"] .sort select,:root[data-theme="purple"] .sortl select,:root[data-theme="purple"] .pg-per select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--ink)}
  :root[data-theme="purple"] .link{color:#fdb61c}
  :root[data-theme="purple"] .calc-btn{color:#fff;border-color:rgba(253,182,28,.5);background:rgba(255,255,255,.06)}
  :root[data-theme="purple"] .empty{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
  :root[data-theme="purple"] .prbig b{color:#7ddc9c}
  :root[data-theme="purple"] .prscore a{color:#fdb61c}
  :root[data-theme="purple"] .qz-stats b{color:#fdb61c}
  :root[data-theme="purple"] .prfoot,:root[data-theme="purple"] .ew-set,:root[data-theme="purple"] .qz-stats>div{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
  :root[data-theme="purple"] .ew-set input{background:#fff;color:#1d1a24}

  /* ---------- PAPER: white areas keep the light colors ---------- */
  :root[data-theme="purple"] .card,:root[data-theme="purple"] .ew-card,:root[data-theme="purple"] dialog,:root[data-theme="purple"] .tmodal-box,:root[data-theme="purple"] .sx-box,
  :root[data-theme="purple"] .modal-box,:root[data-theme="purple"] #show,:root[data-theme="purple"] #print,:root[data-theme="purple"] body.printview,:root[data-theme="purple"] body.es-printpage{
    color-scheme:light;--ink:#1d1a24;--muted:#5f586f;--page:#f4f2f8;--panel:#fff;--line:#dcd6e6;--sel:#ece6f6;--gold-soft:#fff2d1;--purple:#442872;
    --bg:#f4f2f8;--panel-2:#ece6f6;--text:#1d1a24;--text-2:#5f586f}
  :root[data-theme="purple"] .card,:root[data-theme="purple"] .ew-card,:root[data-theme="purple"] dialog,:root[data-theme="purple"] .sx-box,:root[data-theme="purple"] .modal-box{color:#1d1a24}
  :root[data-theme="purple"] .card .link,:root[data-theme="purple"] dialog .link,:root[data-theme="purple"] .modal-box .link{color:#442872}
  :root[data-theme="purple"] .card input[type],:root[data-theme="purple"] dialog input[type],:root[data-theme="purple"] .tmodal-box input[type],:root[data-theme="purple"] .sx-box input[type],:root[data-theme="purple"] .modal-box input[type]{accent-color:#442872}
  :root[data-theme="purple"] dialog .ghost,:root[data-theme="purple"] .card .ghost,:root[data-theme="purple"] .tmodal-box .hbtn2{background:#fff;border:2px solid #dcd6e6;color:#1d1a24}
  :root[data-theme="purple"] .card .calc-btn{color:#442872;border-color:#442872;background:#fff}
  :root[data-theme="purple"] body.printview,:root[data-theme="purple"] body.es-printpage{background:#e9e6ef}
}

/* ---------- BOTH LOOKS: shapes, glows, and the bars ---------- */
@media screen{
  /* question cards: rounder, lifted; a selected card glows gold */
  .card{border-radius:16px;border-color:transparent;box-shadow:var(--fx-shadow)}
  :root[data-theme="light"] .card{border-color:var(--line);box-shadow:0 6px 18px rgba(46,26,79,.08)}
  .card.picked{outline:none;box-shadow:var(--fx-glow),var(--fx-shadow)}
  .cbar,.card-h{border-bottom:1px solid #e6e1ee}
  :root[data-theme="purple"] .cbar,:root[data-theme="purple"] .card-h{background:#faf8fd}

  /* big numbers and section labels in the home screen's fonts */
  .rcount b,#count b{font-family:Raleway,"Barlow Semi Condensed",Arial,sans-serif;font-weight:800}
  .fg h3{font:800 .76rem/1.2 Raleway,"Barlow Semi Condensed",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin-bottom:8px}
  :root[data-theme="purple"] .fg h3{color:#fdb61c}

  /* gold-gradient buttons */
  .primary.gold,.hbtn2.gold,:root[data-theme="purple"] .hbtn2.gold:not(:disabled),.tb.g,#tray .tb:not(.alt):not(.plain),.showCtl button.k{background:var(--fx-gold);border:1.5px solid #fdb61c;color:#2e1a4f;box-shadow:0 6px 16px rgba(253,182,28,.28),inset 0 1px 0 rgba(255,255,255,.5)}

  /* the selection bar at the bottom: dark glass with a gold glow */
  #tray,.tbar-sel{background:linear-gradient(135deg,rgba(46,26,79,.94),rgba(31,16,56,.94));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(253,182,28,.45);border-bottom:3px solid #fdb61c;border-radius:16px;box-shadow:0 16px 40px rgba(8,2,20,.5),0 0 32px rgba(253,182,28,.18)}
  #tray .tb,.tbar-sel .tb{border-radius:9px}

  /* dialogs: white body under a purple title band */
  dialog{border-radius:18px;border-top:0;overflow:hidden;box-shadow:0 30px 80px rgba(8,2,20,.55)}
  dialog::backdrop{background:rgba(16,6,32,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  dialog .dl>h2:first-child{margin:-20px -22px 16px;padding:16px 22px 14px;background:var(--fx-band);color:#fff;border-bottom:3px solid #fdb61c;font:800 1.45rem/1.2 Raleway,"Barlow Semi Condensed",Arial,sans-serif}
  .tmodal,.sx-modal,.modal{background:rgba(16,6,32,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .tmodal-box,.sx-modal .sx-box,.modal-box{border-radius:18px;border-top:0;box-shadow:0 30px 80px rgba(8,2,20,.55);background:#fff}
  .tmodal-box>h2,.sx-modal .sx-box>h2{margin:-20px -22px 16px;padding:16px 50px 14px 22px;background:var(--fx-band);color:#fff;border-bottom:3px solid #fdb61c;font:800 1.45rem/1.2 Raleway,"Barlow Semi Condensed",Arial,sans-serif}
  .sx-modal .sx-box>h2{margin:-22px -26px 16px;padding-left:26px}
  #covbody>h2:first-child{margin:-20px -24px 12px;padding:16px 50px 14px 24px;background:var(--fx-band);color:#fff;border-bottom:3px solid #fdb61c;font:800 1.45rem/1.2 Raleway,"Barlow Semi Condensed",Arial,sans-serif}
  .tmodal-x,.sx-modal .sx-x,.modal-x{color:#fff!important;z-index:2;top:14px}

  /* present on screen: a purple title bar and a dark control bar; the questions stay on white */
  #showBar,.tp-head{background:var(--fx-band);border-bottom:3px solid #fdb61c}
  .showCtl,.tp-nav{background:linear-gradient(180deg,#2e1a4f,#1f1038);border-top:1px solid rgba(253,182,28,.45);color:#fff}
  .showCtl button,.tp-nav .tb,.tp-nav .tn{background:rgba(255,255,255,.07);border:1.5px solid rgba(253,182,28,.5);color:#fff}
  .showCtl button:hover:not(:disabled),.tp-nav .tb:hover:not(:disabled),.tp-nav .tn:hover{background:rgba(253,182,28,.18)}
  .showCtl button.chk,.tp-nav .tb.p{background:#6c45b5;border-color:#8f6ad6;color:#fff}
  .showCtl .pper button.on,.tp-nav .tn.on{background:var(--fx-gold);border-color:#fdb61c;color:#2e1a4f}
  .tp-nav .tb.g{background:var(--fx-gold);border-color:#fdb61c;color:#2e1a4f}
  .showCtl button.mk{background:rgba(253,182,28,.16);border-color:#fdb61c;color:#fff}
  .tp-nav .tb.tmk{background:rgba(253,182,28,.16);border-color:#fdb61c;color:#fff}
  .showCtl .pper>span,.tp-per b,.showCtl .pscore{color:#ddd2f2}
}

/* the header's look button: a sun offers Light mode, a moon offers Purple mode */
.hbtn.theme::before{content:"☀"}
.hbtn.theme[aria-pressed="true"]::before{content:"☾"}

/* a header with only buttons (the TSIA2 essay page) keeps a simple row instead of the aligned bank layout */
.top-in.plain{display:flex!important;flex-wrap:wrap}
.top-in.plain>.brand{margin-right:auto!important}