/* Sentinel v2 - settings.css
   Routed Settings page with Appearance (theme, System, contrast, density) first.
   Owned by the 'settings' area of the v2 redesign; tokens come from v2/tokens.css. */

/* ---------- reader-wide switches this page owns ---------- */
/* High contrast: the generated variant in v2/tokens.css ([data-contrast="high"] deepens inks to 7:1, lines and the control
   outline on every theme root, body portals included). This page only adds the thicker focus ring. */
html[data-contrast="high"] :focus-visible { outline-width: 3px !important; }
/* Density: areas size rows and controls from these (Comfortable is the default; Compact trims ~20 %). */
:root { --density-row: 1; --density-pad: 1; }
html[data-density="compact"] { --density-row: .82; --density-pad: .75; }
html[data-density="compact"] .v2set-card { padding: 12px 14px; }
html[data-density="compact"] .v2set-row { padding: 8px 0; }

/* ---------- the page ---------- */
.v2set {
  --s-surface: var(--bg-doc, #ffffff);
  --s-raised: var(--bg-pane, #fcfaf6);
  --s-soft: var(--bg-soft, rgba(31, 41, 51, .05));
  --s-soft2: var(--bg-soft2, rgba(31, 41, 51, .08));
  --s-ink: var(--text-primary, #1a2330);
  --s-ink2: var(--text-secondary, #4f5764);
  --s-ink3: var(--ink-3, var(--text-secondary, #5f6874));
  --s-line: var(--border-subtle, #e6e0d2);
  --s-line2: var(--border-strong, #c8c0b1);
  --s-brand: var(--brand, #1a2fe6);
  --s-on-brand: var(--on-brand, #ffffff);
  --s-focus: var(--focus, #1a2fe6);
  --s-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  color: var(--s-ink);
  max-width: 1120px; margin: 0 auto; padding: 24px 32px 64px; box-sizing: border-box;
}
.app[data-theme="midnight"] .v2set, .app[data-theme="eclipse"] .v2set {
  --s-brand: var(--brand, #8ea0ff); --s-on-brand: var(--on-brand, #07080b); --s-focus: var(--focus, #8ea0ff);
}
.v2set-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.v2set-back {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px;
  border: 1px solid var(--s-line2); border-radius: 6px; background: var(--s-surface); color: var(--s-ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.v2set-back:hover { background: var(--s-soft); }
.v2set-titles { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.v2set-h1 { margin: 0; font-family: var(--font-doc, "Source Serif 4", Georgia, serif); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; }
.v2set-saved { margin: 0; font-size: 13px; line-height: 18px; color: var(--s-ink3); position: relative; }
.v2set-saved .v2set-saved-now { display: none; color: var(--severity-success, #15803d); font-weight: 600; }
.v2set-saved.is-now .v2set-saved-idle { display: none; }
.v2set-saved.is-now .v2set-saved-now { display: inline; }
.v2set-saved.is-now .v2set-saved-now::before { content: "✓ "; }

.v2set-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.v2set-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.v2set-nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 6px;
  color: var(--s-ink2); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 500;
}
.v2set-nav-item svg { flex: none; color: var(--s-ink3); }
.v2set-nav-item:hover { background: var(--s-soft); color: var(--s-ink); }
.v2set-nav-item[aria-current="page"] { background: var(--s-soft2); color: var(--s-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--s-brand); }
.v2set-nav-item[aria-current="page"] svg { color: var(--s-brand); }
.v2set-nav-item:focus-visible, .v2set-back:focus-visible { outline: 2px solid var(--s-focus); outline-offset: 2px; }

.v2set-main { min-width: 0; }
.v2set-sec-head { margin-bottom: 16px; }
.v2set-sec-head h2 { margin: 0; font-family: var(--font-doc, "Source Serif 4", Georgia, serif); font-size: 22px; line-height: 30px; font-weight: 600; outline: none; }
.v2set-sec-head p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--s-ink2); max-width: 64ch; }
.v2set-content { display: flex; flex-direction: column; gap: 16px; }
.v2set-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--s-line); font-size: 12px; color: var(--s-ink3); }

.v2set-card { border: 1px solid var(--s-line); border-radius: 10px; background: var(--s-surface); padding: 18px 20px; }
.v2set-card-head { margin-bottom: 12px; }
.v2set-card-head h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 650; }
.v2set-card-head p { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--s-ink2); max-width: 70ch; }
.v2set-note { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--s-ink2); max-width: 70ch; }
.v2set-rows { display: flex; flex-direction: column; }
.v2set-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; cursor: pointer; }
.v2set-row + .v2set-row { border-top: 1px solid var(--s-line); }
.v2set-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2set-row-label { font-size: 14px; line-height: 20px; font-weight: 550; }
.v2set-row-sub { font-size: 13px; line-height: 18px; color: var(--s-ink2); }
.v2set-switch {
  appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--s-line2); transition: background-color 160ms var(--s-ease);
}
.v2set-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform 160ms var(--s-ease);
}
.v2set-switch:checked { background: var(--s-brand); }
.v2set-switch:checked::after { transform: translateX(16px); }
.app[data-theme="midnight"] .v2set-switch:checked::after, .app[data-theme="eclipse"] .v2set-switch:checked::after { background: #07080b; }
.v2set-switch:focus-visible { outline: 2px solid var(--s-focus); outline-offset: 2px; }
.v2set-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.v2set-btn {
  appearance: none; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--s-line2); background: var(--s-surface);
  color: var(--s-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.v2set-btn:hover { background: var(--s-soft); }
.v2set-btn:focus-visible { outline: 2px solid var(--s-focus); outline-offset: 2px; }

/* segmented control */
.v2set-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px; background: var(--s-soft2); border: 1px solid var(--s-line); }
.v2set-seg button {
  appearance: none; height: 30px; min-width: 88px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent;
  color: var(--s-ink2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.v2set-seg button:hover { color: var(--s-ink); }
.v2set-seg button[aria-checked="true"] { background: var(--s-surface); color: var(--s-ink); box-shadow: 0 1px 2px rgba(20, 24, 31, .12), 0 0 0 1px var(--s-line); }
.v2set-seg button:focus-visible { outline: 2px solid var(--s-focus); outline-offset: 1px; }

/* theme cards */
.v2set-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.v2set-theme {
  appearance: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 8px 10px; text-align: start;
  border: 1px solid var(--s-line); border-radius: 10px; background: var(--s-raised); color: var(--s-ink); font: inherit; cursor: pointer;
  transition: border-color 120ms var(--s-ease), box-shadow 120ms var(--s-ease);
}
.v2set-theme:hover { border-color: var(--s-line2); }
.v2set-theme[aria-checked="true"] { border-color: var(--s-brand); box-shadow: 0 0 0 1px var(--s-brand); }
.v2set-theme:focus-visible { outline: 2px solid var(--s-focus); outline-offset: 2px; }
.v2set-theme-name { font-size: 13px; line-height: 18px; font-weight: 600; margin-top: 4px; }
.v2set-theme[aria-checked="true"] .v2set-theme-name::after { content: " ✓"; color: var(--s-brand); }
.v2set-theme-sub { font-size: 12px; line-height: 16px; color: var(--s-ink3); }
.v2set-mini {
  display: flex; height: 76px; border-radius: 6px; overflow: hidden; background: var(--m-page);
  border: 1px solid var(--m-line); box-sizing: border-box; flex: none;
}
.v2set-mini-pair { flex: none; }
.v2set-mini-pair .v2set-mini { flex: 1 1 0; min-width: 0; height: 100%; }
.v2set-mini .m-side { width: 26%; background: var(--m-pane); border-right: 1px solid var(--m-line); display: flex; flex-direction: column; gap: 5px; padding: 7px 5px; box-sizing: border-box; }
.v2set-mini .m-side i { display: block; height: 4px; border-radius: 2px; background: var(--m-ink); opacity: .18; }
.v2set-mini .m-side i.m-mark { width: 9px; height: 9px; border-radius: 2px; background: var(--m-brand); opacity: 1; clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); }
.v2set-mini .m-side i.is-on { opacity: .5; }
.v2set-mini .m-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.v2set-mini .m-bar { height: 13px; border-bottom: 1px solid var(--m-line); display: flex; align-items: center; justify-content: space-between; padding: 0 5px; }
.v2set-mini .m-bar i { width: 30%; height: 3px; border-radius: 2px; background: var(--m-ink); opacity: .3; }
.v2set-mini .m-bar b { width: 14px; height: 6px; border-radius: 2px; background: var(--m-brand); }
.v2set-mini .m-doc { position: relative; flex: 1; margin: 5px 7px 0; background: var(--m-doc); border: 1px solid var(--m-line); border-bottom: 0; border-radius: 3px 3px 0 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.v2set-mini .m-doc i { display: block; height: 3px; border-radius: 2px; background: var(--m-ink); opacity: .22; }
.v2set-mini .m-doc i.m-h { width: 55%; height: 4px; opacity: .55; }
.v2set-mini .m-doc i.m-short { width: 62%; }
.v2set-mini .m-sev { position: absolute; left: 0; top: 16px; width: 2px; height: 12px; background: #c2410c; }
.v2set-mini-pair { display: flex; gap: 0; height: 76px; border-radius: 6px; overflow: hidden; }
.v2set-mini-pair .v2set-mini { border-radius: 0; }
.v2set-mini-pair .v2set-mini:first-child { border-right: 0; border-radius: 6px 0 0 6px; }
.v2set-mini-pair .v2set-mini:last-child { border-radius: 0 6px 6px 0; }
.v2set-mini-pair .v2set-mini .m-side { display: none; }

/* the settings sheet's fade */
@keyframes v2set-fade { from { opacity: .4; } to { opacity: 1; } }

/* keyboard list */
.v2set-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 28px; }
.v2set-keys-group h4 { margin: 8px 0 4px; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--s-ink3); font-weight: 600; }
.v2set-keys-group dl { margin: 0; }
.v2set-keys-group dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--s-line); }
.v2set-keys-group dt { font-size: 13px; line-height: 18px; }
.v2set-keys-group dd { margin: 0; display: inline-flex; gap: 4px; flex: none; }
.v2set kbd {
  font: 600 11px/14px var(--font-ui, "Inter", system-ui, sans-serif); min-width: 18px; padding: 2px 5px; border-radius: 4px; text-align: center;
  border: 1px solid var(--s-line); border-bottom-width: 2px; background: var(--s-raised); color: var(--s-ink2);
}

/* the app's own panes (app.js renderAppSettingsPanes) inside the page */
.v2set-app.settings-panes { overflow: visible; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.v2set-app .settings-pane.is-active { animation: none; }
.v2set-app .set-pane-head { margin-bottom: 10px; }
.v2set-app .set-pane-title { font-size: 15px; line-height: 22px; font-weight: 650; }
.v2set-app .set-pane-sub { font-size: 13px; line-height: 18px; color: var(--s-ink2); }
.v2set-app .set-card { border-radius: 10px; background: var(--s-surface); border-color: var(--s-line); padding: 18px 20px; margin-bottom: 12px; }
.v2set-app .set-card-sub, .v2set-app .set-lang-note, .v2set-app .set-color-code, .v2set-app .set-range-value, .v2set-app .set-order-index { color: var(--s-ink2); }
.v2set-app .set-toggle-row input[type="checkbox"]:checked { background: var(--s-brand); }
.v2set-app .btn-primary, .v2set-app .btn-accent { background: var(--s-brand); border-color: var(--s-brand); color: var(--s-on-brand); }
.v2set-app .set-lang-mode.is-on, .v2set-app .set-mode.is-active { border-color: var(--s-brand); box-shadow: inset 0 0 0 1px var(--s-brand); background: color-mix(in srgb, var(--s-brand) 7%, transparent); }
.v2set-app .set-legal a:hover, .v2set-app .set-legal a:focus-visible { color: var(--s-brand); }

/* ---------- the sheet (the page in a full-screen dialog, until the shell routes mode 'settings') ---------- */
dialog.v2set-sheet {
  padding: 0; margin: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: auto;
  background: var(--bg-app, var(--bg-page, #faf8f3)); color: var(--text-primary, #1a2330);
}
dialog.v2set-sheet::backdrop { background: transparent; }
dialog.v2set-sheet[open] { animation: v2set-fade 160ms cubic-bezier(.22, 1, .36, 1) both; }

/* ---------- narrow ---------- */
@media (max-width: 860px) {
  .v2set { padding: 16px 16px 48px; }
  .v2set-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v2set-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; margin: 0 -16px; padding-inline: 16px; }
  .v2set-nav::-webkit-scrollbar { display: none; }
  .v2set-nav-item { flex: none; border: 1px solid var(--s-line); white-space: nowrap; }
  .v2set-nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--s-brand); }
  .v2set-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2set-h1 { font-size: 22px; line-height: 30px; }
  .v2set-card { padding: 14px 14px; }
  .v2set-seg { display: flex; }
  .v2set-seg button { flex: 1; min-width: 0; }
}
@media (pointer: coarse) {
  .v2set-nav-item, .v2set-back, .v2set-btn { min-height: 44px; }
  .v2set-seg button { height: 40px; }
}
@media print { dialog.v2set-sheet { display: none !important; } }