/* A2 Settings: the header gear and the full-screen sheet it opens (js/ui/settings-sheet.js),
   plus the Status tab's Vacation box that replaced the footer button. Loaded after style.css
   and mobile-native.css; every sheet rule is scoped to #settingsOverlay or the gear, so the
   moved controls keep their original rules and are only re-laid-out here. */

/* ---- the gear: mirrors the version pill (top-left vs top-right of the 560px column) ---- */
.settings-btn{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:max(14px,calc(50% - 264px));z-index:2;
  width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--muted);cursor:pointer;
  transition:border-color .15s,background-color .15s;}
.settings-icon{display:block;width:18px;height:18px;background:url('../assets/navigation/settings.svg') center/contain no-repeat;
  filter:invert(1);opacity:.72;transition:opacity .15s;}
.settings-btn:focus-visible{outline:2px solid var(--rank);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){.settings-btn:hover{border-color:var(--rank);}.settings-btn:hover .settings-icon{opacity:1;}}
/* In Home Screen mode the header runs under the clock (black-translucent status bar), so the
   gear and the pill both step down by the safe-area inset; in a browser tab it is 0. */
.ver-btn{top:calc(12px + env(safe-area-inset-top,0px));}
@media (pointer:coarse){.settings-btn::after{content:'';position:absolute;inset:-6px;}} /* 44px hit area */

/* ---- the sheet ---- */
.settings-overlay{position:fixed;inset:0;z-index:48;display:none;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(5,4,10,.72);-webkit-overflow-scrolling:touch;}
.settings-overlay.show{display:block;}
.settings-sheet{position:relative;max-width:560px;min-height:100%;margin:0 auto;box-sizing:border-box;
  padding:0 max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(900px 420px at 50% -120px,#171226 0%,var(--bg) 62%) var(--bg);}
.settings-overlay.show .settings-sheet{animation:setSheetIn .26s var(--ease-out,cubic-bezier(.23,1,.32,1)) both;}
@keyframes setSheetIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@media (min-width:600px){.settings-sheet{border-left:1px solid var(--line);border-right:1px solid var(--line);}}
/* Glass title bar, the pinned panel's material: content scrolls under it. */
.settings-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 -16px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;
  background:rgba(13,11,18,.69);-webkit-backdrop-filter:blur(16px) saturate(135%);backdrop-filter:blur(16px) saturate(135%);
  border-bottom:1px solid var(--line);}
.settings-title{margin:0;font:700 19px/1.2 'DM Sans',sans-serif;letter-spacing:.01em;color:var(--text);text-transform:none;}
.settings-done{min-height:36px;padding:7px 16px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);
  color:var(--text);font:600 13px 'DM Sans',sans-serif;cursor:pointer;}
.settings-done:focus-visible{outline:2px solid var(--rank);outline-offset:2px;}
.settings-scroll{padding-top:6px;}

/* a plain wrapper: the global section{} panel style belongs to the .set-card inside */
#settingsOverlay .set-group{margin:22px 0 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;}
.set-head{margin:0 4px 8px;font:600 11px/1.3 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.set-card{background:var(--card-grad);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--card-shadow);}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.set-row-stack{flex-direction:column;align-items:stretch;gap:12px;}
.set-text{min-width:0;}
.set-label{display:block;font-size:14px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:anywhere;}
.set-sub{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--muted);}
.set-actions{display:flex;flex-wrap:wrap;gap:8px;}

/* One button language for everything that moved in (footer, sync row, rollover pick). */
#settingsOverlay .set-actions button,#settingsOverlay .sync-controls button,#settingsOverlay .rollover-pick button{
  flex:1 1 0;min-width:0;min-height:40px;margin:0;padding:9px 12px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--text);
  font:600 13px 'DM Sans',sans-serif;cursor:pointer;transition:border-color .15s,background-color .15s;}
#settingsOverlay .set-actions button:focus-visible,#settingsOverlay .sync-controls button:focus-visible,
#settingsOverlay .rollover-pick button:focus-visible{outline:2px solid var(--rank);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  #settingsOverlay .set-actions button:hover,#settingsOverlay .sync-controls button:hover,
  #settingsOverlay .rollover-pick button:not(.on):hover{border-color:var(--muted);}
}

/* The app's 38x22 switch keeps its look; in the sheet its tap area grows to 44px tall. */
#settingsOverlay .switch::after{content:'';position:absolute;inset:-11px -6px;}

/* Cloud sync: the moved .sync-row, left-aligned and full width instead of a centred footer line. */
#settingsOverlay .sync-row{display:grid;gap:12px;margin:0;justify-content:stretch;text-align:left;}
#settingsOverlay .sync-label{font-size:12px;line-height:1.45;color:var(--muted);}
#settingsOverlay .sync-controls{display:grid;gap:8px;}
/* Two lines that wrap on a phone: the code field takes a whole line, each button at least
   half of one, and nothing is ever squeezed below its label. */
#settingsOverlay .sync-mine,#settingsOverlay .sync-join{display:flex;flex-wrap:wrap;gap:8px;}
#settingsOverlay .sync-controls button{flex:1 1 auto;white-space:nowrap;}
#settingsOverlay #syncCodeDisplay{flex:1 1 100%;font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.02em;}
#settingsOverlay .sync-controls input{flex:1 1 180px;min-width:0;min-height:40px;padding:9px 12px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line2);color:var(--text);font:13px 'DM Sans',sans-serif;}
#settingsOverlay .sync-controls input:focus{outline:none;border-color:var(--rank);}
#settingsOverlay .sync-status{margin:0;font-size:12px;color:var(--muted);}
#settingsOverlay .sync-status:empty{display:none;}

/* Night owl: six equal hour cells on one line from 320px up. */
#settingsOverlay .rollover-row{margin:0;flex-wrap:nowrap;justify-content:stretch;}
#settingsOverlay .rollover-label{font-size:14px;color:var(--text);}
#settingsOverlay .rollover-pick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
#settingsOverlay .rollover-pick button{padding:9px 0;font-size:12px;}
#settingsOverlay .rollover-pick button.on{background:var(--rank);border-color:var(--rank);color:#0b0a10;}

/* Hero aura: the moved native select, unchanged except for spacing. */
#settingsOverlay .hero-aura-choice{margin:0;}
#settingsOverlay .hero-aura-choice label{font-size:14px;font-weight:600;color:var(--text);}

/* Danger zone: the button is full width, so "Reset rank" -> "Confirm wipe" never moves it,
   and the sentence appears on its own line underneath (the old FOOTER-ALIGN rule). */
.set-danger .set-card{border-color:rgba(239,68,68,.3);}
#settingsOverlay #resetBtn{flex:1 1 100%;background:transparent;border-color:rgba(239,68,68,.45);color:var(--loss);}
#settingsOverlay #resetBtn.danger{background:rgba(239,68,68,.14);border-color:var(--loss);font-weight:700;}
.set-confirm{margin-top:-4px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--loss);}
.set-confirm[hidden]{display:none;}

@media (pointer:coarse){
  #settingsOverlay .set-actions button,#settingsOverlay .sync-controls button,#settingsOverlay .rollover-pick button,
  .settings-done{min-height:44px;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.settings-top{background:#0d0b12;}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .settings-top{background:#0d0b12;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .settings-overlay{background:#05040a;}
}
@media (prefers-reduced-motion:reduce){.settings-overlay.show .settings-sheet{animation:none;}}

/* ---- Status tab: ONE "Pauses & excuses" card (batch 2 B, 2026-10-16) holding the Vacation row
   (moved out of the footer by A2; amber, the vacation banner's colour) above the Emergency day
   row, split by a hairline. ---- */
.status-pauses-head{margin-bottom:12px;}
.status-pauses .status-vacation,.status-pauses .status-emergency{margin-top:0;}
.status-vacation .se-pick button{border-color:rgba(212,160,23,.5);color:var(--gold);}
.status-vacation + .status-emergency{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}

/* ---- The System log, moved into the sheet as its last group (batch 2 B). The heading is the
   fold (toggleLog); #log itself is the card, so folding it hides the card too. ---- */
.set-log .log-h{display:flex;justify-content:space-between;align-items:center;min-height:32px;margin-bottom:4px;cursor:pointer;user-select:none;-webkit-user-select:none;border-radius:6px;}
.set-log .log-h:focus-visible{outline:2px solid var(--rank);outline-offset:2px;}
.set-log .log-arrow{font-size:12px;letter-spacing:0;transition:transform .2s;}
@media (prefers-reduced-motion:reduce){.set-log .log-arrow{transition:none;}}
.set-log-card{padding:8px 14px;}