/* settings screen (Settings board): tabs on the left, one card on the right, the close-house dialogs on top */

/* no subtitle here: the title sits level with the back button, as on the board */
[data-screen="settings"] .titleblock { top: 17px; }

/* ---------------------------------------------------------------- tabs */
.st-nav { position: absolute; left: 48px; top: 60px; width: 180px; bottom: 21px; display: flex; flex-direction: column; gap: 8px; }
.st-tab {
  height: 46px; border-radius: 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 14px; font-weight: 800; text-align: left;
}
.st-tab.on { background: var(--honey); box-shadow: 0 3px 0 var(--ink); }

/* ---------------------------------------------------------------- the card and its rows */
/* one size for what sits on the right of a row, in every tab: Privacy's 14 (owner, 6 Oct 2026; it was 11 to 16) */
/* the five rows of You fit (owner, 6 Oct 2026); if a card ever runs long it scrolls, with no bar, like the game's other lists */
.st-panel { position: absolute; left: 242px; right: 16px; top: 60px; bottom: 21px; padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.st-panel::-webkit-scrollbar { display: none; }
.st-h { margin: 0; font-size: 17px; font-weight: 800; flex: none; }
.st-row { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 1px 0; border-bottom: 1.5px dashed var(--dots); box-sizing: content-box; }
.st-l { flex: 1; min-width: 0; }
.st-lab { font-size: 14px; font-weight: 800; line-height: 1.2; }
.st-sub { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.2; }
.st-together { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: #8E5E3B; line-height: 1.2; }

/* a value set once that can't change (sex): plain words, no pill (owner, 5 Oct 2026) */
.st-fixed { flex: none; padding: 0 2px; font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--ink); }
/* a text field */
.st-pill {
  height: 30px; padding: 0 12px; border-radius: 10px; background: #FFFFFF; border: 1.5px solid var(--ink);
  display: inline-flex; align-items: center; font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--ink); flex: none;
}
/* the field grows with its text: a hidden copy of the text (data-val) sizes the cell the input fills */
.st-grow { display: inline-grid; flex: none; max-width: 240px; }
.st-grow::before {
  content: attr(data-val) " "; grid-area: 1 / 1; visibility: hidden; white-space: pre; overflow: hidden;
  padding: 0 12px; border: 1.5px solid transparent; font-size: 14px; font-weight: 800; min-width: 64px;
}
.st-grow > input { grid-area: 1 / 1; width: 100%; min-width: 0; position: relative; z-index: 1; font-family: inherit; text-align: center; outline: none; }
.st-grow > input:focus { box-shadow: 0 0 0 3px var(--honey); }
/* the date: the pill shows it and opens our own calendar (src/ui/pickers.js) */
.st-date { position: relative; cursor: pointer; }

.st-choices { display: flex; gap: 6px; flex: none; }
.st-choice {
  height: 30px; padding: 0 12px; border-radius: 15px; border: 2px solid var(--ink); background: #FFFFFF; color: var(--ink);
  font-size: 14px; font-weight: 800; white-space: nowrap;
}
.st-choice.on { background: var(--honey); }
.st-btn {
  height: 30px; padding: 0 12px; border-radius: 15px; background: var(--card); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  color: var(--ink); font-size: 14px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; flex: none;
}
.st-btn.honey { background: var(--honey); }
.st-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.st-look { display: flex; align-items: center; gap: 8px; flex: none; }
.st-sounds { display: flex; align-items: center; gap: 10px; flex: none; font-size: 14px; font-weight: 800; color: var(--muted); }
.st-snd { display: flex; align-items: center; gap: 4px; }
.st-partner { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; flex: none; }
.st-row .coinchip { height: auto; padding: 0; border: none; background: none; gap: 4px; font-size: 14px; flex: none; }
.st-row .coinchip svg { width: 18px; height: 18px; }
.st-dl { height: 34px; padding: 0 16px; flex: none; }

/* close our house: a button of its own under Delete my account, no title (owner, 6 Oct 2026) */
.st-closerow { display: flex; padding-top: 8px; }
.st-closebtn {
  height: 36px; padding: 0 16px; border-radius: 18px; border: 2px solid #B55A3C; background: #FFFFFF; color: #B55A3C;
  font-size: 14px; font-weight: 800; white-space: nowrap; flex: none;
}

/* ---------------------------------------------------------------- the dialogs */
.st-overlay { position: absolute; inset: 0; background: rgba(43, 38, 34, 0.4); z-index: 10; animation: fadeIn .2s ease-out both; }
.st-dialog {
  position: absolute; left: 150px; top: 18px; width: 560px; height: 354px; border-radius: 20px; padding: 16px 22px; z-index: 11;
  display: flex; flex-direction: column; gap: 7px; animation: stDialogIn .26s cubic-bezier(.2, .9, .3, 1) both; outline: none;
}
.st-dialog:focus-visible { box-shadow: var(--edge) !important; }
@keyframes stDialogIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-dialog { animation: fadeIn .15s both; } }
.st-dtitle { font-size: 22px; font-weight: 800; line-height: 1.1; }
.st-fact { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; line-height: 1.25; }
.st-fic { width: 24px; height: 24px; flex: none; border-radius: 12px; background: #FFFFFF; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.st-keep {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--ink);
  background: #FFF6D9; text-align: left; color: var(--ink);
}
.st-keept { font-size: 13px; font-weight: 800; white-space: nowrap; }
.st-box { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid var(--ink); background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.st-box.on { background: var(--sage); }
.st-dbtns { margin-top: auto; display: flex; gap: 10px; }
.btn.st-danger { color: #B55A3C; border-color: #B55A3C; box-shadow: 0 3px 0 #B55A3C; padding: 0 16px; }
.st-confirm { align-items: center; justify-content: center; text-align: center; gap: 12px; }
.st-hold {
  position: relative; overflow: hidden; width: 320px; height: 52px; border-radius: 26px; border: 2px solid #B55A3C; background: #FFFFFF;
  color: #B55A3C; font-size: 15px; font-weight: 800; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.st-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #F6D5CD; transition: width .2s ease-out; }
.st-hold.holding .st-fill { width: 100%; transition: width var(--hold, 1500ms) linear; }
.st-holdt { position: relative; }

/* ---------------------------------------------------------------- at night (18:00 to 06:00), dark like the house (owner, 6 Oct 2026) */
.screen.st-night {
  --paper: #232B45; --dots: #333D5E; --card: #2E3858; --ink: #11152B; --muted: #B6BDD4; --label: #9DA5C2; --disabled: #3B4568;
  --edge: 0 3px 0 #11152B; color: #F5F0E6;
}
.st-night .round-btn, .st-night .st-tab, .st-night .st-pill, .st-night .st-choice, .st-night .st-btn, .st-night .st-fixed,
.st-night .btn, .st-night .st-keep, .st-night .pk-title, .st-night .pk-day { color: #F5F0E6; }
.st-night .st-tab.on, .st-night .st-choice.on, .st-night .st-btn.honey, .st-night .btn.primary { color: #2B2622; }
.st-night .st-pill, .st-night .st-choice, .st-night .st-night .st-choice.on { background: var(--honey); }
.st-night .st-row { border-bottom-color: #47527A; }
.st-night .st-together { color: #F2C9A0; }
.st-night .st-dialog .body { color: #DCD6CB; }
.st-night .toggle::before { background: #F5F0E6; }
.st-night .st-closebtn, .st-night .st-hold { background: transparent; border-color: #E8957A; color: #F2A88F; }
.st-night .st-hold .st-fill { background: rgba(232, 149, 122, 0.3); }
.st-night .btn.st-danger { color: #F2A88F; border-color: #E8957A; box-shadow: 0 3px 0 #E8957A; }
.st-night .st-fic, .st-night .st-box { background: #3B4669; }
.st-night .st-keep { background: #3A4466; }
.st-night .pk-day[aria-disabled="true"] { color: #5C6688; }
.st-night .pk-day.today { box-shadow: inset 0 0 0 2px #5C6688; }
.st-night .pk-day.on { color: #2B2622; }