/* The Handloom Quiz: web edition overrides.
   ------------------------------------------------------------------
   Loaded AFTER app.css, and it only re-states what a browser needs
   differently from a sealed panel. Everything not mentioned here is
   inherited from the gallery build on purpose, so the two stay one
   design rather than drifting into two.

   The four things a kiosk assumes and a website cannot:

     1. THE PANEL IS THE PAGE. app.css positions every .screen at
        inset: 0 and never scrolls, because a 1920x1080 panel always has
        room. A 360px phone does not, so screens here participate in
        normal document flow and the page scrolls.
     2. THERE IS NO MOUSE. cursor: none is right on glass and wrong in a
        browser.
     3. THE VISITOR LEAVES. The kiosk resets to the attract loop after
        120s idle so the next person meets a clean station. A reader on
        their sofa is not idle, they are reading, so the idle reset is
        disabled in app.js's web branch and the attract layer becomes an
        ordinary start screen.
     4. THE LAYOUT IS LANDSCAPE. The question composition is cloth on the
        left, question on the right. Below 800px that becomes a thin
        cloth band above the question, and the cloth is dropped entirely
        on the shortest screens where it would eat the answers. */

/* ---------- 1. document flow, not fixed layers ---------- */
html, body { height: auto; overflow: visible; overflow-x: hidden; }

#saver, .screen {
  /* relative, NOT static. The screensaver's own layers (the weave canvas and
     the .weave-labels caption layer) are position: absolute with inset: 0 and
     resolve against their nearest positioned ancestor. Making #saver static
     sent them looking further up the tree, and the caption layer, which is
     half the panel wide plus its indent, escaped the viewport: 507px of
     scrollWidth on a 390px phone, a horizontal scrollbar on every screen.
     Keeping the element positioned contains them exactly as the panel did. */
  position: relative;
  inset: auto;
  min-height: 100svh;          /* svh, not vh: mobile browser chrome must not clip the answers */
  overflow: hidden;            /* the cloth is a background, it never scrolls the page sideways */
}
/* 17 Aug 2026 (Bob II): !important + :not(.active), because app.css carries
   id-specificity display rules (#cert at :640 sets display:flex) that beat a
   bare .screen class from this later sheet. On the panel, kiosk.css does the
   hiding and never loses this fight; on the web this sheet must win it. The
   symptom was the certificate stacked as a full-height black block under the
   attract screen, making the page scroll into darkness. */
.screen:not(.active) { display: none !important; }
.screen.active { display: flex; }
/* Same fight, second front: weave-saver.js appends a .brand-watermarks layer
   that kiosk.css would pin as a fixed ghost overlay. Without kiosk.css it
   flows as a ~1900px raw block below the saver. The website carries its own
   branding; the kiosk's watermark furniture stays off the web page. */
.brand-watermarks { display: none !important; }
#saver.hidden { display: none; }

/* ---------- 2. a browser has a pointer ---------- */
body, button, .touchable, .btn, .key, .lb-tab, [data-act], [data-k] { cursor: auto; }
button, .touchable, .btn, .key, .lb-tab, a, [data-act], [data-k] { cursor: pointer; }

/* ---------- 3. the attract layer is a start screen ---------- */
#saver {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 6vw, 4rem) var(--gutter);
}
/* "Touch to start" is a lie on a laptop. app.js swaps the string for the
   web build; this only makes it look like the button it now is. */
#saver .pulse {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: .85rem 2.2rem; margin-top: 1.4rem;
  border-radius: 999px; background: var(--gold); color: var(--bg);
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  box-shadow: 0 0 34px rgba(201,162,75,.28);
  animation: none;             /* the gallery pulse reads as impatience on a page */
}
#saver .pulse:hover { transform: translateY(-2px); }

/* ---------- 4. the question composition ---------- */
.qbody { flex-wrap: wrap; }

@media (max-width: 800px) {
  /* Cloth becomes a band across the top: it still says "this is woven",
     which is the whole point of it, without taking half the reading width. */
  .qbody { flex-direction: column; align-items: stretch; }
  .qmedia { flex: 0 0 auto; height: clamp(90px, 22vw, 150px); width: 100%; }
  /* A gutter, NOT zero. Removing the panel's generous side padding outright
     put the question and every answer flush against the glass edge, which
     reads as broken and is uncomfortable to hold: a thumb rests exactly there.
     The site gutter is the same measure the rest of the pages use, so the quiz
     lines up with the header and footer above and below it. */
  .qmain { padding-inline: var(--gutter); }
  .qbar { flex-wrap: wrap; gap: .4em; }
  .qplayer { text-align: left; }
}

/* Below this the cloth costs more than it gives: on a small phone in
   landscape the answers must win. */
@media (max-height: 520px) and (max-width: 900px) {
  .qmedia { display: none; }
}

/* Answers are full-width rows on a phone, which is both easier to hit and
   easier to read than a grid of short options. */
@media (max-width: 640px) {
  .opts { grid-template-columns: 1fr; }
  .opts .opt { text-align: left; }
}

/* ---------- results ---------- */
@media (max-width: 900px) {
  .res-wrap { flex-direction: column; }
  .res-plate { flex: 0 0 auto; min-height: 40svh; }
  .res-right { padding-inline: 0; }
}

/* ---------- the certificate ---------- */
/* On the panel the certificate is photographed off the screen, which is
   why it is a fixed sheet sized to a 1080 panel. In a browser a reader can
   save or print it, so it scrolls and it prints clean. */
@media (max-width: 900px) {
  #cert-sheet { width: min(100%, 34rem); max-height: 84svh; overflow-y: auto; }
}
@media print {
  .site-head, .site-foot, .langpill, .homepill, #cert-close, .btn { display: none !important; }
  body, #cert, #cert-sheet { background: #fff !important; color: #16130f !important; }
  #cert-sheet { box-shadow: none; border: 1px solid #c9a24b; }
}

/* ---------- site chrome on the quiz page ---------- */
/* The quiz is a page of the website, so it carries the site header. It must
   sit above the quiz's own layers without covering the framework's Home
   pill, which lives top-right at z-index 55. */
.site-head { z-index: 200; }
#saver, .screen { z-index: 1; }
.homepill { top: calc(4.4rem + .8em); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #saver .pulse, .screen, .qfill { transition: none !important; animation: none !important; }
}