/* The grown-up layer (WP3; core DESIGN §1, §7.3): sheets, the gate, the inline confirm and the break.
   Forked from demo app.css L569-594 (sheet, seg, gate), L595-631 (confirm row), L633-652 (the break) and L737-738 (the sheet
   centred on a wide screen) @7aafc93. Changes: sheets and the break sit in #layer-sheets at --z-sheet, so whatever opened
   last (the break, then its gate) is on top; the sheet body wrapper; a short rise when a sheet opens (none under reduced
   motion); press feedback on seg buttons; the button looks the sheets and the break use are scoped here, so the grown-up
   layer reads the same whatever page is under it. Plain, adult, non-enticing. */

/* Sheets */
.sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgba(24, 22, 18, .38); display: flex; align-items: flex-end; justify-content: center;
  animation: sheet-fade var(--t-card) ease both; }
.sheet { position: relative; inset: auto; width: min(640px, 100%); max-height: 90dvh; overflow: auto; overscroll-behavior: contain; background: var(--card); color: var(--ink);
  border-radius: 28px 28px 0 0; padding: 18px 22px calc(28px + env(safe-area-inset-bottom));
  font-family: var(--font); font-size: 17px; line-height: 1.5; box-shadow: 0 -10px 40px rgba(24, 22, 18, .18); animation: sheet-rise var(--t-card) var(--spring) both; }
.sheet:focus { outline: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet h2 { font-size: 26px; margin: 0; letter-spacing: 0; line-height: 1.2; }
.sheet h3 { font-size: 17px; margin: 18px 0 6px; }
.sheet p { margin: 0 0 8px; }
.sheet .muted, .break .muted { color: var(--muted); }
@keyframes sheet-rise { from { transform: translateY(24px); opacity: .6; } }
@keyframes sheet-fade { from { background: rgba(24, 22, 18, 0); } }

/* The sheets' buttons (the demo's .btn-quiet, .btn.round, .btn.link and .danger) */
.sheet .btn, .break .btn { appearance: none; border: 0; margin: 0; font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; text-decoration: none; transition: transform var(--t-micro) var(--spring), opacity var(--t-micro); }
.sheet .btn:active:not(:disabled), .break .btn:active:not(:disabled), .seg button:active { transform: scale(.96); }
.sheet .btn-quiet, .break .btn-quiet { min-height: var(--tap); border-radius: 999px; background: var(--card); box-shadow: var(--shadow), var(--press);
  padding: 0 22px; font-weight: 750; font-size: var(--body); display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.sheet .btn-quiet { margin-top: 4px; }
.sheet .btn-quiet:disabled, .break .btn-quiet:disabled { opacity: .45; cursor: default; }
.sheet .btn.round { width: var(--tap); height: var(--tap); min-width: 0; padding: 0; border-radius: 50%; background: var(--card); box-shadow: var(--shadow), var(--press);
  display: grid; place-items: center; flex: none; }
.sheet .btn.link, .break .btn.link { width: fit-content; background: transparent; box-shadow: none; color: var(--muted); font-weight: 700; font-size: var(--muted-size);
  min-height: var(--tap); display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; margin: 10px auto 0; }
.sheet .btn.danger { min-height: 52px; border-radius: 999px; background: var(--coral-deep); color: #fff; padding: 0 20px; font-weight: 750; display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--shadow); }
.sheet .btn .ico, .break .btn .ico { width: 24px; height: 24px; }
:where(.sheet, .break) :where(button, a, input, [tabindex]):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* seg(): a radiogroup of buttons */
.seg { display: inline-flex; background: var(--sand); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { min-height: 44px; min-width: 96px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
  touch-action: manipulation; transition: transform var(--t-micro) var(--spring), background-color var(--t-micro); }
.seg button[aria-checked="true"] { background: var(--card); box-shadow: var(--shadow); }
.seg-many { display: flex; flex-wrap: wrap; border-radius: 22px; }
.seg-many button { min-width: 0; flex: 1 1 64px; padding: 0 10px; }

/* confirmRow(): the inline confirm, no confirm() */
.g-confirm { width: 100%; }
.confirm-row { display: flex; gap: 12px; margin-top: 8px; }
.sheet .confirm-row > .btn { flex: 1 1 0; min-height: 52px; justify-content: center; margin: 0; }

/* The grown-up gate: plain ink, nothing enticing. */
.gate p { font-size: 18px; }
.gate-row { display: flex; gap: 12px; margin: 8px 0 6px; }
.gate-input { width: 120px; min-height: 56px; border-radius: 16px; border: 2px solid var(--ink); background: var(--card); font: inherit; font-size: 26px; font-weight: 800; text-align: center; color: var(--ink); }
.gate-input:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.sheet .gate-go { min-height: 56px; border-radius: 999px; background: var(--ink); color: var(--paper); padding: 0 26px; font-weight: 750; font-size: 18px; box-shadow: var(--shadow); }
.gate-msg { min-height: 1.5em; display: flex; align-items: center; gap: 8px; }
.gate-msg .ico { width: 22px; height: 22px; flex: none; }
.gate .gate-why { font-size: 16px; background: var(--paper); border-radius: 14px; padding: 10px 14px; margin: 12px 0 4px; }
.gate .gate-forgot { font-size: 15px; margin-top: 6px; }
.gate-input.ok { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 107, 69, .25); }
.gate-input.nope { animation: gate-nope var(--t-micro) ease-in-out 2; }
@keyframes gate-nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.gate.locked .gate-msg { color: var(--ink); font-weight: 700; }
.sheet .gate-go:disabled, .gate-input:disabled { opacity: .5; cursor: default; }

/* The break: the calm paper canvas with the hero tucked in asleep. No timer; the grown-ups key sits clear of the bottom edge. */
.break { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--paper); color: var(--ink); display: grid; place-items: center; overflow: auto;
  padding: calc(24px + env(safe-area-inset-top)) var(--gutter) calc(var(--edge) + 96px); text-align: center; font-family: var(--font);
  animation: break-in var(--t-layout) ease both; }
.break:focus { outline: none; }
.break-in { width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.break h1.title { font-size: 38px; line-height: 1.1; font-weight: 850; margin: 8px 0 6px; letter-spacing: 0; }
.break h2 { font-size: 26px; line-height: 1.2; margin: 4px 0; }
.break .say { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--ink); font-size: var(--body); margin: 0 0 18px; line-height: 1.35; }
.break-bed { position: relative; width: 240px; height: 190px; margin-bottom: 4px; }
.break-hero { position: absolute; left: 50%; bottom: 8px; width: 150px; height: 150px; object-fit: contain; transform: translateX(-50%) rotate(-82deg); animation: snooze 4.2s ease-in-out infinite; }
/* Head on the pillow, the rest under the blanket. */
.break-bed::before { content: ""; position: absolute; left: 4px; bottom: 0; width: 46%; height: 40px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.break-blanket { position: absolute; left: 40%; right: 4px; bottom: 0; height: 92px; border-radius: 46px 44px 22px 22px; background: var(--sand); box-shadow: inset 0 -8px 0 var(--sand-deep); }
.break-zz { position: absolute; right: 14px; top: 0; color: var(--ink); }
.break-zz .ico { width: 44px; height: 44px; }
@keyframes snooze { 50% { transform: translateX(-50%) rotate(-82deg) scale(1.04); } }
@keyframes break-in { from { opacity: 0; } }
.break .break-key { position: fixed; right: var(--gutter); bottom: calc(var(--edge) + 8px); min-height: 60px; min-width: 60px; padding: 0 18px; border-radius: 999px;
  background: var(--card); color: var(--muted); box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.break-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 8px; }
.break-choices .btn-quiet { min-height: 64px; padding: 10px 14px; white-space: normal; line-height: 1.2; }

@media (min-width: 960px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 28px; max-height: 86dvh; width: min(640px, 92vw); padding-bottom: 28px; }
}

/* Reduced motion: the same information without movement. */
@media (prefers-reduced-motion: reduce) {
  .sheet-backdrop, .sheet, .break, .break-hero, .gate-input.nope { animation: none; }
  .sheet .btn:active:not(:disabled), .break .btn:active:not(:disabled), .seg button:active { transform: none; filter: brightness(.92); }
}