/* settings: the Settings page (js/pages/settings.js) and the backups panel and sheets (js/backup.js). Theme tokens only. */

/* sections: twirl-downs on cards, one under the other */
.se-list { display: grid; gap: 10px; }
.se-sec { background: var(--card); border-radius: var(--radius); margin-bottom: 0; }
.se-sec > summary { padding: 12px 14px; }
.se-sec > summary .twirl-name { font-size: 1.02rem; }
.se-sec > summary .twirl-sub { overflow-wrap: anywhere; }
.se-sec[open] > summary { border-bottom: 1px solid var(--line); }
.se-body { padding: 12px 14px 16px; gap: 10px; }
.se-body > p, .se-body .stack > p, .se-body .card > p { margin: 0; }
.se-body h3 { margin: 10px 0 0; }
.se-sec .card { background: var(--bg2); margin-bottom: 0; }
.se-sec .twirl { background: var(--bg2); margin-bottom: 0; } /* the colour theme inside Display & accessibility */
.se-sec .actions { margin-top: 0; }
@media (min-width: 1000px) { .se-list { max-width: 780px; } }

/* your details */
.se-kv { margin: 0; }
.se-kv > div { align-items: baseline; }
.se-kv > div > span:first-child { flex: none; min-width: 6.5rem; }
.se-kv .se-val { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.se-kv .se-val a { min-height: 0; display: inline; }
.se-bio { color: var(--muted); }
.se-empty { padding: 18px 12px; }
.se-contact { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 4px; margin-top: 4px; }
.se-contact > p { margin: 0; }
@media (min-width: 760px) { .se-kv { max-width: 560px; } }

/* about */
.se-where { display: grid; gap: 4px; }
.se-where p { margin: 0; }

/* backups panel (Settings → Backups and the ☁ sheet) */
.se-bk, .se-bk > .stack { display: grid; gap: 10px; }
.se-bk > .stack > p { margin: 0; }
.se-bk-status { margin: 0; font-weight: 600; }
.se-bk-status[data-level=ok] { color: var(--ok); }
.se-bk-status[data-level=old], .se-bk-status[data-level=none] { background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid var(--danger); border-radius: 10px; padding: 8px 12px; }
.se-bk-actions { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.se-bk-actions .btn { width: 100%; }
@media (min-width: 560px) { .se-bk-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .se-bk-actions .se-bk-save { grid-column: 1 / -1; } }
.se-bk-file { margin: 0; gap: 8px; }
.se-bk-file > p { margin: 0; }
.se-bk-file-line { overflow-wrap: anywhere; }
.se-bk-file-line[data-state=saved] { color: var(--ok); }
.se-bk-file-line[data-state=needs-permission], .se-bk-file-line[data-state=error] { color: var(--danger); }
.se-bk-file .actions { margin-top: 0; }
.se-bk-file .actions .btn, .se-bk-file > .btn { width: auto; flex: 1 1 0; }
.se-bk-file > .btn { justify-self: start; min-width: 12rem; }
@media (max-width: 480px) { .se-bk-file > .btn { justify-self: stretch; } }

/* Google Drive: its card at the top of the backups panel, the connect sheet and the daily copies */
.se-bk-drive { margin: 0; gap: 8px; }
.se-bk-drive > p { margin: 0; }
.se-bk-drive[data-state=unset], .se-bk-drive[data-state=away] { color: var(--muted); border: 1px dashed var(--line); }
.se-bk-drive[data-state=unset] strong, .se-bk-drive[data-state=away] strong { color: color-mix(in srgb, var(--muted) 70%, var(--text)); }
.se-bk-drive-head { display: grid; gap: 2px; min-width: 0; }
.se-bk-drive-who { overflow-wrap: anywhere; }
.se-bk-drive-line, .se-bk-drive-copy, .se-bk-drive-clock { overflow-wrap: anywhere; }
.se-bk-drive-line[data-state=synced] { color: var(--ok); }
.se-bk-drive-line[data-state=needs-permission], .se-bk-drive-line[data-state=error], .se-bk-drive-copy[data-state=error], .se-bk-drive-clock { color: var(--danger); }
.se-bk-drive-actions { margin-top: 0; }
.se-bk-drive .se-bk-drive-actions .btn { flex: 1 1 10rem; }
.se-bk-drive > .se-bk-drive-connect { justify-self: start; width: auto; min-width: 12rem; }
.se-bk-drive > .se-bk-drive-delete { justify-self: start; width: auto; } /* rarely wanted: small, never a main button */
@media (max-width: 480px) { .se-bk-drive > .se-bk-drive-connect { justify-self: stretch; width: 100%; } }
.se-bk-connect > p { margin: 0; }
.se-bk-connect-actions { margin-top: 4px; }
.se-bk-connect-actions .btn { flex: 1 1 10rem; }
.se-bk-copy { overflow-wrap: anywhere; }
.se-bk-copies > p { margin: 0; }

/* bringing a backup back, and the messages around it */
.se-imp .card { margin: 0; display: grid; gap: 4px; }
.se-imp .card p { margin: 0; }
.se-imp-name { overflow-wrap: anywhere; }
.se-imp > p { margin: -4px 0 4px; }
.se-refuse p { margin: 0; }
.se-pass .check { padding-left: 0; }
.se-pass > p { margin: 0; }