/* grownups.css - gear, gate, corner (ui-spec 4.2/4.4/4.5). Text >= 16px, --c-adult-* palette, targets >= 64px. */
.gear{position:absolute;top:var(--keep-t);right:var(--keep-r);width:64px;height:64px;display:grid;place-items:center;padding:0;background:0;border:0;color:inherit;cursor:pointer;touch-action:manipulation}
.app[data-hand=left] .gear{right:auto;left:var(--keep-l)}
.gear>svg{width:30px;height:30px;opacity:.75}
.gear.is-wiggle{animation:gw .6s ease-in-out}
@keyframes gw{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
html[data-reduced-motion=true] .gear.is-wiggle{animation:none}
.gate,.settings,.confirm{font:400 var(--text-m)/1.4 var(--font-ui);color:var(--c-adult-ink);background:var(--c-adult-surface);border:0;padding:0}
.gate::backdrop,.settings::backdrop,.confirm::backdrop{background:var(--c-scrim)}
.gate:not([open]),.settings:not([open]),.confirm:not([open]){display:none}
:where(.gate,.settings) button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.gate[open]{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100dvh - 16px);overflow:auto;width:min(100%,26rem);padding:24px;border-radius:var(--radius-xl);box-shadow:var(--shadow-dialog);display:grid;gap:16px}
.gate-title{margin:0;font-size:var(--text-l);padding-right:64px}
.gate-instruction{margin:0}
.gate-word{font-size:var(--text-l)}
.gate-close{position:absolute;top:8px;right:8px;width:64px;height:64px;background:0;border:0;font-size:36px;line-height:1;color:var(--c-adult-muted)}
.gate-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.key{min-height:64px;font-size:var(--text-xl);font-weight:700;background:var(--c-adult-bg);border:2px solid var(--c-adult-border);border-radius:var(--radius-m)}
.key:active{transform:translateY(1px)}
@media (orientation:landscape) and (max-height:479px){
.gate[open]{width:min(100%,38rem);grid-template-columns:1fr 14rem;align-items:center}
.gate-text{padding-top:40px}.gate-title{padding:0}
.gate-close{right:auto;left:8px}
}
.settings[open]{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;overflow-y:auto;background:var(--c-adult-bg)}
.settings-col{box-sizing:border-box;width:min(100%,var(--measure));margin:0 auto;display:grid;gap:16px;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(24px + var(--safe-b)) calc(16px + var(--safe-l))}
.settings-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.settings-title{margin:0;font-size:var(--text-xl)}
.group{background:var(--c-adult-surface);border-radius:var(--radius-m);padding:16px;display:grid;gap:8px}
.group-title{margin:0 0 4px;font-size:var(--text-l)}
.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:8px 0;border-top:1px solid var(--c-adult-border)}
.group-title+.row{border-top:0}
.row-label{font-weight:700}
.seg{display:flex;flex-wrap:wrap;border:2px solid var(--c-adult-border);border-radius:var(--radius-m);overflow:hidden;max-width:100%}
.seg-btn{min-width:64px;min-height:64px;padding:8px 16px;font-size:var(--text-s);background:var(--c-adult-surface);border:0}
.seg-btn[aria-pressed=true]{background:var(--c-adult-accent);color:var(--c-adult-on-accent);font-weight:700}
.slider{display:flex;align-items:center;gap:12px;flex:1 1 12rem;max-width:16rem}
.volume{flex:1;min-height:64px;accent-color:var(--c-adult-accent)}
.volume-out{min-width:4ch;text-align:right;font-size:var(--text-s)}
.btn{min-height:64px;padding:8px 24px;font-weight:700;border-radius:999px;background:var(--c-adult-surface);border:2px solid var(--c-adult-border)}
.btn-primary{background:var(--c-adult-accent);color:var(--c-adult-on-accent);border-color:var(--c-adult-accent)}
.btn-outline{color:var(--c-adult-accent);border-color:var(--c-adult-accent)}
.btn-danger-outline{color:var(--c-adult-danger);border-color:var(--c-adult-danger)}
.btn-danger{background:var(--c-adult-danger);color:var(--c-adult-on-accent);border-color:var(--c-adult-danger)}
.status,.tip{margin:0;font-size:var(--text-s);color:var(--c-adult-muted)}
.status{min-height:1.4em}
.about-text{margin:0}
.confirm[open]{position:fixed;inset:0;margin:auto;height:fit-content;width:min(calc(100% - 32px),24rem);padding:24px;border-radius:var(--radius-l);box-shadow:var(--shadow-dialog)}
.confirm-text{margin:0 0 16px}
.confirm-buttons{display:flex;gap:12px;justify-content:flex-end}
:is(.gate,.settings) :focus-visible,.gear:focus-visible{outline:var(--focus-width) solid var(--c-focus);outline-offset:var(--focus-offset);box-shadow:0 0 0 var(--focus-offset) var(--c-focus-halo)}