/* Phase 75 (stage 3, 2.7): every remaining screen on the new tokens (docs/design/NEW_LOOK.md →
   Stage 3): buttons, windows, cards, fields, the Settings window, chips and tabs, the sign-in,
   setup and AI-notice screens, and the small popups. Loaded last; colours, shapes, depth and
   motion come from theme.css, so Night and Day both follow. Nothing here changes what a screen
   says or does (the AI notice and every safety notice keep their place and words). */

/* ---------- Buttons ---------- */
button {
  border-radius: var(--r-control);
  background: var(--btn-fill);
  color: var(--on-btn);
  transition: filter var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
button:hover { background: var(--btn-fill); filter: brightness(1.1); }
button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
button.ghost {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px solid var(--hairline-strong);
  color: var(--text-2);
}
button.ghost:hover { filter: none; background: color-mix(in srgb, var(--surface-3) 80%, transparent); border-color: color-mix(in srgb, var(--accent-solid) 40%, var(--hairline-strong)); color: var(--text-1); }
button:disabled, button:disabled:hover { filter: none; }
.button-link { border-radius: var(--r-control); background: var(--btn-fill); color: var(--on-btn); font-weight: 600; }
.button-link:hover { filter: brightness(1.1); }
.button-link.ghost { background: color-mix(in srgb, var(--surface-2) 55%, transparent); border: 1px solid var(--hairline-strong); color: var(--text-1); }
button.linkish { background: none; border: 0; padding: 0; color: var(--accent-text); filter: none; }
button.linkish:hover { background: none; text-decoration: underline; }
a { color: var(--accent-text); }
dialog a:not([class]), .settings-pages a:not([class]), .help-menu a, .tip-card a, .studio h3 a.small, #login-paircode a { color: var(--accent-text); }

/* ---------- Fields ---------- */
input, select, textarea { border-color: var(--hairline-strong); background: color-mix(in srgb, var(--surface-0) 55%, var(--surface-2)); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent-solid) 65%, var(--hairline-strong)); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent-solid); }
input[type=checkbox]:focus, input[type=radio]:focus, input[type=range]:focus { box-shadow: none; }
/* Boxes that draw their own focus (the message box, the command bar's search) keep it. */
#composer #input:focus, .cmd-q:focus { box-shadow: none; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* ---------- Windows (dialogs) ---------- */
dialog {
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--surface-1) 94%, var(--accent-to)), var(--surface-1) 40%);
  box-shadow: var(--shadow-2), 0 30px 80px -40px var(--violet-glow);
}
dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog-top > .dialog-x { border: 1px solid var(--hairline-strong); background: var(--glass-strong); color: var(--text-2); }
.dialog-top > .dialog-x:hover { color: var(--text-1); }
.settings-body h2 { letter-spacing: var(--tracking-tight); font-weight: 650; }
.settings-body h3 { color: var(--text-1); font-weight: 600; letter-spacing: var(--tracking-tight); }
dialog .saved-tag { color: var(--success); }
.unsaved-bar { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }

/* ---------- Settings: the page list and its pages ---------- */
.settings-nav-item { border-radius: var(--r-control); }
.settings-nav-item:hover { background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.settings-nav-item[aria-current="true"] { background: var(--accent-soft); color: var(--text-1); box-shadow: inset 3px 0 0 var(--accent-solid); font-weight: 600; }
.settings-nav-item[aria-current="true"]:hover { background: var(--accent-soft); }

/* ---------- Cards, lists, chips, tabs ---------- */
.sub-card, .hist-card, .pick-card, .look-card, .gallery-cards > *, .cmp-card, .team-detail, .team-tasks li button, .start-item, .tool-perm, .dev-list li, .hh-models, .ssh-row {
  border-color: var(--hairline-strong);
}
.pick-card, .look-card, .gallery-cards > *, .cmp-card, .start-item {
  border-radius: var(--r-card);
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface-2) 94%, var(--accent-to)), var(--surface-1) 75%);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.pick-card:hover, .look-card:hover, .gallery-cards > *:hover, .start-item:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent-solid) 50%, var(--hairline-strong)); box-shadow: var(--glow-edge); filter: none; }
.pick-card[aria-checked="true"], .look-card.current { border-color: var(--accent-solid); box-shadow: inset 0 0 0 1px var(--accent-solid), var(--glow-edge); background: linear-gradient(165deg, var(--accent-soft), var(--surface-1) 80%); }
.chip, .tag-chip { border-color: var(--hairline-strong); }
.chip[aria-checked="true"], .chip.on, .tag-chip.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-solid) 60%, transparent); color: var(--text-1); }
.tabs .tab { border-color: var(--hairline-strong); }
.tabs .tab.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-solid) 60%, transparent); color: var(--text-1); box-shadow: inset 0 -2px 0 var(--accent-solid); }
.tab.active { border-bottom-color: var(--accent-solid); }
.start-item.done .start-tick { background: var(--accent-grad); border-color: transparent; color: var(--on-mine); }
.start-item.done { opacity: .72; }
.item .high, .today-row.overdue .today-side { color: var(--accent-text); }
.approval { border-color: color-mix(in srgb, var(--accent-solid) 55%, var(--hairline-strong)); }
.tip:hover, .tip:focus-visible, .tip.open { color: var(--accent-text); border-color: var(--accent-solid); }
.side-dot, .working-dot { background: var(--accent-grad); }
.empty-state, .emptystate { color: var(--text-2); }

/* Planner, Memory, Library, Moments, Your story, Team, Her page: lists and rows on the surfaces. */
.item, .task-row, .mem-item, .note-item, .lib-doc, .story-item, .team-steps > li {
  border-color: var(--hairline);
}
.team-steps > li, .team-tasks li button { border-radius: var(--r-control); }

/* ---------- Sign in, set up, the AI notice: one glass card on the page glow ---------- */
.card-screen { background: var(--page-glow), var(--surface-0); }
.card-screen .card {
  position: relative;
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-2), 0 40px 90px -50px var(--violet-glow);
}
.card-screen .card h1 { letter-spacing: -0.02em; font-weight: 650; }
.login-portrait { box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px color-mix(in srgb, var(--accent-solid) 70%, var(--accent-to)), 0 12px 36px -10px var(--accent-glow); }
.login-help summary, .claim-code-row { color: var(--text-2); }
#disclosure .card { border-color: color-mix(in srgb, var(--accent-solid) 40%, var(--hairline-strong)); }
#disclosure .card ul { color: var(--text-2); }
.claimed-token { border: 1px solid var(--hairline-strong); background: var(--surface-0); }

/* First-run setup (a window). */
#setup .setup-actions, .wizard .setup-actions { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); border-top-color: var(--hairline-strong); }
.setup-step { letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Small popups ---------- */
.pop-menu button, .companion-menu button { border-radius: var(--r-control); }
.tour-ring { border-color: var(--accent-solid); border-radius: 14px; }

/* ---------- Phones ---------- */
/* The drawer is solid when it slides over the chat (the chat's words never show through it). */
@media (max-width: 760px) { #sidebar { background: var(--surface-1); } }
@media (max-width: 720px) {
  dialog { border-radius: 18px; }
  .card-screen .card { border-radius: 18px; }
}