/* SPDX-FileCopyrightText: 2026 Christina Sørensen
 *
 * SPDX-License-Identifier: LicenseRef-proprietary
 *
 * Layered after wolpass.css: what the pages do not say for a narrow screen.
 * The pages' own sizes are inline, so what changes them here is
 * !important.
 */

/* The side menu, behind a button below 900 px, closed when a page opens:
 * the box before it is ticked by its label. */
.hd .menu-open{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.hd .menu-button{display:none}
@media (max-width:899px){
  .hd .menu-button{display:inline-flex;align-items:center;gap:10px;flex:1 1 100%;min-height:56px;padding:0 20px;border-bottom:1px solid var(--line);font-size:17px;font-weight:600;cursor:pointer}
  .hd .menu-button::before{content:"";width:18px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
  .hd .menu-open:focus-visible+.menu-button{outline:2px solid var(--wire);outline-offset:-4px}
  .hd .menu-open:checked+.menu-button::before{border:0;background:linear-gradient(45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%)}
  .hd nav.nav{display:none!important}
  .hd .menu-open:checked+.menu-button+nav.nav{display:flex!important;flex:1 1 100%!important;border-right:0!important;border-bottom:1px solid var(--line)}
}

/* Below 700 px a table is a list: a row is a block, and each cell says its
 * column (its data-label) above what it holds. */
@media (max-width:699px){
  .hd table:not(.vh),.hd table:not(.vh)>tbody,.hd table:not(.vh) tr,.hd table:not(.vh) td,.hd table:not(.vh) tbody th{display:block;width:100%!important}
  .hd table:not(.vh)>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hd table:not(.vh){min-width:0!important}
  .hd table:not(.vh) tr{height:auto!important;padding:10px 0;border-bottom:1px solid var(--line)}
  .hd table:not(.vh) td,.hd table:not(.vh) tbody th{padding:3px 20px!important;text-align:left!important;height:auto!important;border:0!important;white-space:normal!important}
  .hd table:not(.vh) td[data-label]:not([data-label=""])::before,.hd table:not(.vh) tbody th[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--ink2)}
  /* A line of facts says the short of it. */
  .hd .long{display:none}
  .hd .short{display:inline}
}
.hd .short{display:none}