/* =====================================================================
   period.css: the den's paperwork and manners. The hint is a note on an index card (Dad's marker, a strip of
   masking tape), not a modern chat pill; nothing talks until the lamp is on; every control shows where focus is.
   Loaded after depth.css, before shell.css.
   ===================================================================== */

/* ---------- the hint: an index card taped down at the bottom of the den */
.bench:not(.open) .lap {
  background:
    linear-gradient(90deg, transparent 30px, rgba(206,58,58,.5) 30px 31.5px, transparent 31.5px),
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(70,110,190,.26) 23px 24px),
    linear-gradient(180deg, #fbf7e9, #efe7cf);
  color: #1d2a6b; border-radius: 2px; padding-left: 42px; padding-right: 16px;
  box-shadow: 0 8px 16px rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.18), inset 0 0 22px rgba(160,130,70,.14);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transform: rotate(-.5deg); }
.bench:not(.open) .lap::after { content: ''; position: absolute; top: -9px; left: 50%; width: 76px; height: 19px; margin-left: -38px;
  background: linear-gradient(90deg, rgba(0,0,0,.06), transparent 12%, transparent 88%, rgba(0,0,0,.06)), rgba(232,221,184,.88);
  clip-path: polygon(2% 8%, 98% 0, 100% 92%, 0 100%); transform: rotate(2.5deg); box-shadow: 0 1px 2px rgba(0,0,0,.2); pointer-events: none; }
.bench:not(.open) .hint { font: 400 17px/1.25 'Permanent Marker', 'Marker Felt', cursive; color: #1d2a6b; text-shadow: none; opacity: 1; letter-spacing: .01em; }
.bench:not(.open) .lap:has(.hint:empty) { transform: translateY(8px) rotate(-.5deg); }
/* phone held upright: an index card set into the bottom edge, not a full-width sheet */
@media (max-width: 820px) and (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
  .bench:not(.open) .lap { left: calc(10px + var(--sal, 0px)); right: calc(10px + var(--sar, 0px)); bottom: calc(6px + var(--sab, 0px));
    padding-top: 10px; padding-bottom: 10px; border-radius: 2px; overflow: visible; }
  .bench:not(.open) .hint { font-size: 15.5px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .bench:not(.open) .lap { right: calc(8px + var(--sar, 0px)); bottom: calc(6px + var(--sab, 0px)); width: calc(100vw - var(--avw) - var(--sal, 0px) - 20px); border-radius: 2px; }
  .bench:not(.open) .hint { font-size: 14.5px; }
}

/* ---------- nothing talks in the dark: the hint and the switches wait for the lamp */
html.cin-dark:not(.cin-on) .bench .lap { opacity: 0 !important; visibility: hidden; transition: none; }
html.cin-dark:not(.cin-on) .switches { opacity: .28; transition: opacity .6s ease; }
html.cin-on .bench .lap { transition: transform .38s cubic-bezier(.2,.9,.3,1), box-shadow .3s, background-color .3s, opacity .5s ease .2s; }

/* ---------- PUT IN VCR: the third hand button */
.hbtn-vcr { background: linear-gradient(180deg, #f3ead2, #ddd0b0); color: #2a2418; }

/* ---------- focus you can see, on every control (keyboard only) */
:is(button, [tabindex]):focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
.switch:focus-visible { outline-offset: 3px; border-radius: 4px; }
#holder:focus-visible { outline: 2px dashed #ffd27a; outline-offset: 6px; border-radius: 6px; }
/* a phone already has the swipe and the tap: PUT IN VCR stays there for screen readers and keyboards, but only shows
   when it has keyboard focus, so the hint keeps its width in the tray */
@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) {
  .hbtn-vcr:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ---------- the wall switches: fixed widths, the OFF on its own line under the name (three labels used to run
   together as "VIBRATE OFFAMBIENT OFF MUTED" on a phone) */
.switch small { display: block; margin-top: 2px; font-size: .92em; letter-spacing: .16em; color: rgba(243, 231, 211, .4); }
@media (max-width: 820px), (orientation: landscape) and (max-height: 500px) {
  .switches { gap: 4px; }
  .switch { width: 50px; min-width: 50px; letter-spacing: .1em; }
}

/* ---------- on a phone the hint card never lies over a tape: the shelves panel ends above it */
@media (max-width: 820px) and (orientation: portrait), (max-width: 820px) and (min-height: 501px) {
  body:not(.bench-open) .shelves { margin-bottom: calc(66px + var(--sab, 0px)); padding-bottom: 10px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body:not(.bench-open) .shelves { height: calc(100dvh - 62px - var(--sab, 0px)); }
  body:not(.bench-open) #collection { padding-bottom: 12px; }
}