/* appearance.css — per-person looks (accent, text size, high contrast). Looks only; safe to delete along with
   app/appearance.py (see the notes there). The 90s theme is in retro.css. */

/* Accent: the selection ring, the selected tab and hover tint. Blue is the normal look and sets nothing. */
html[data-accent="red"]    { --focus: #D62828; }
html[data-accent="green"]  { --focus: #2E9E5B; }
html[data-accent="purple"] { --focus: #7C4DDB; }
html[data-accent="orange"] { --focus: #E07A1F; }
/* the picked color as a straight line under the active tab (not a curved edge that follows the tab's corners) */
html[data-accent] .tabs a.on { position: relative; }
html[data-accent] .tabs a.on::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 4px; height: 3px;
  border-radius: 3px; background: var(--focus); }
html[data-accent] .row-link:hover { background: color-mix(in srgb, var(--focus) 7%, transparent); }
html[data-accent] input[type="checkbox"], html[data-accent] input[type="radio"] { accent-color: var(--focus); }

/* Larger text */
html[data-text="large"] body { zoom: 1.12; }

/* High contrast: darker text, stronger lines, outlined panels — handy in bright sun */
html[data-contrast="high"] { --ink: #000; --ink-2: #1E1E1E; --ink-3: #3A3A3A; --line: #5A5A5A; --line-2: #BDBDBD; }
html[data-contrast="high"][data-scheme="dark"] { --ink: #FFF; --ink-2: #E6E6E6; --ink-3: #C8C8C8; --line: #9A9A9A; --line-2: #4A4A4A; }
@media (prefers-color-scheme: dark) {
  html[data-contrast="high"]:not([data-theme]) {
    --ink: #FFF; --ink-2: #E6E6E6; --ink-3: #C8C8C8; --line: #9A9A9A; --line-2: #4A4A4A; }
}
html[data-contrast="high"] .panel { outline: 1px solid var(--line); }
html[data-contrast="high"] .btn.ghost { border-width: 2px; }

/* the swatches on the Account page */
.swatches { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; }
.swatch span { display: block; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }
.swatch input:checked + span { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
.swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 4px; }
.theme-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.theme-pick label { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius);
  background: var(--line-2); cursor: pointer; font-weight: 600; font-size: 15px; }
.acct-sec > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.acct-sec > summary::-webkit-details-marker { display: none; }
.acct-sec > summary .grow { flex: 1; }
.acct-sec > summary::after { content: '›'; display: inline-block; width: 14px; text-align: center; font-size: 22px;
  line-height: 1; color: var(--ink-3); transition: transform .15s; }
.acct-sec[open] > summary::after { transform: rotate(90deg); }
.acct-sec[open] > summary { margin-bottom: 12px; }

/* Brightness slider: Light · Soft · Dark · Darker, brightest to darkest. Dimmed while Auto or a More theme decides. */
.bright { margin: 4px 0 6px; transition: opacity .15s; }
.bright.is-off { opacity: .45; }
.bright input[type="range"] { width: 100%; margin: 6px 0 0; height: 30px; background: transparent; accent-color: var(--focus);
  -webkit-appearance: none; appearance: none; }
.bright input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #FFFFFF 0%, #DCDDE5 33%, #2A2A2F 67%, #000 100%); box-shadow: inset 0 0 0 1px var(--line); }
.bright input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #FFFFFF 0%, #DCDDE5 33%, #2A2A2F 67%, #000 100%); box-shadow: inset 0 0 0 1px var(--line); }
.bright input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px;
  border-radius: 50%; background: #fff; border: 3px solid var(--focus); box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; }
.bright input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid var(--focus); box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; }
.bright-stops { position: relative; height: 46px; margin: 2px 0 0; }
.bright-stops button { position: absolute; top: 0; transform: translateX(-50%); font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--ink-2); background: none; border: 0; padding: 4px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* under each stop of the slider (the thumb travels 14px in from each end) */
.bright-stops button:nth-child(2) { left: calc(14px + (100% - 28px) / 3); }
.bright-stops button:nth-child(3) { left: calc(14px + (100% - 28px) * 2 / 3); }
.bright-stops button:first-child { left: 0; transform: none; }
.bright-stops button:last-child { right: 0; left: auto; transform: none; }
.bright-stops button.on { color: var(--ink); }
.bright-stops button.on .sw { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--focus); }
.bright-note { margin: 2px 0 0; }
.bright input[type="range"]:focus, .bright input[type="range"]:focus-visible { outline: none; box-shadow: none; border: 0; }
.bright input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 35%, transparent); }
.bright input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 35%, transparent); }
.sw { display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128,128,128,.5);
  vertical-align: -3px; flex: none; }
.sw-light { background: #FFFFFF; } .sw-soft { background: #CDD0D9; } .sw-dark { background: #1D1D20; } .sw-darker { background: #000; }

/* Theme info: a small "Theme info ›" link that opens a quiet list explaining each theme */
.theme-info { margin: 6px 0 4px; }
.theme-info > summary { list-style: none; cursor: pointer; display: inline-flex; font-size: 13px; color: var(--ink-3); }
.theme-info > summary::-webkit-details-marker { display: none; }
.theme-info .ti-link { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--ink-2); }
.theme-info .ti-link::after { content: '›'; font-size: 16px; line-height: 1; transition: transform .15s; }
.theme-info[open] .ti-link::after { transform: rotate(90deg); }
.theme-info > summary:hover .ti-link { color: var(--ink); }
.theme-info dl { margin: 8px 0 0; padding: 10px 0 0 12px; border-left: 2px solid var(--line-2); display: grid;
  grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 13px; }
.theme-info dt { font-weight: 650; display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.theme-info dd { margin: 0; color: var(--ink-3); }
.theme-info > p { margin: 8px 0 0 14px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 420px) { .theme-info dl { grid-template-columns: 1fr; gap: 1px; } .theme-info dd { margin-bottom: 7px; } }
/* a special theme's colors, as a small row of overlapping dots */
.sw-set { display: inline-flex; flex: none; }
.sw-set i { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--card), inset 0 0 0 1px rgba(128,128,128,.35); }
.sw-set i + i { margin-left: -4px; }