/* Lensdump settings (owner brief, 2 Oct 2026; mock "Lensdump Settings" 1a desktop, 1b mobile; docs/settings-redesign.md).
 * Linked before Chevereto's theme CSS (head_open), so every rule is scoped under #ld-settings to stay ahead of it. */
#ld-settings { --set-bg: #0b0d13; --set-card: #0f1216; --set-line: rgba(255, 255, 255, .08); --set-text: #e8ebef; --set-muted: #9aa3ad;
  --set-green: #0ee59b; --set-amber: #fbb01f; display: grid; grid-template-columns: 196px minmax(0, 1000px); justify-content: center;
  /* The frame is sized for Membership's wide page on every section, so the sidebar stays in the same place (owner,
   * 2 Oct 2026). Membership uses the whole column; every other section is one 640px column of cards, centred in it (owner). */
  gap: 40px; max-width: 1240px; margin: 28px auto 72px; padding: 0 20px; box-sizing: border-box; color: var(--set-text);
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#ld-settings:not(.is-wide) > .ld-set-main { width: 100%; max-width: 640px; justify-self: center; } /* centred right of the sidebar (owner) */
#ld-settings *, #ld-settings *::before, #ld-settings *::after { box-sizing: border-box; }
#ld-settings .ld-set-ico { flex: none; }

/* The sidebar */
#ld-settings .ld-set-side { position: sticky; top: calc(var(--ld-top, 50px) + 20px); align-self: start; }
#ld-settings .ld-set-who { display: flex; flex-direction: column; margin: 0 0 14px 12px; }
#ld-settings .ld-set-who span { color: var(--set-muted); font-size: 12.5px; }
#ld-settings .ld-set-who strong { color: #fff; font: 700 20px/1.25 Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#ld-settings .ld-set-nav { display: flex; flex-direction: column; gap: 2px; }
#ld-settings .ld-set-link { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 12px; border-radius: 9px; color: #c3c9d0;
  font-weight: 500; text-decoration: none; }
#ld-settings .ld-set-link:hover { background: rgba(255, 255, 255, .04); color: #fff; }
#ld-settings .ld-set-link.is-current { background: rgba(255, 255, 255, .07); color: #fff; }
#ld-settings .ld-set-link.is-current .ld-set-ico { color: var(--set-green); }
#ld-settings .ld-set-dot { display: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--set-amber); }
#ld-settings .is-dirty > .ld-set-dot { display: inline-block; }

/* The column */
#ld-settings .ld-set-main { min-width: 0; }
#ld-settings .ld-set-pick { display: none; }
#ld-settings .ld-set-head { margin: 4px 0 20px; }
#ld-settings .ld-set-head h1 { margin: 0; color: #fff; font: 700 22px/1.25 Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#ld-settings .ld-set-head p { margin: 4px 0 0; color: var(--set-muted); font-size: 13.5px; }
#ld-settings .ld-set-form { margin: 0; overflow: visible; }
/* Membership keeps its own page inside the wider column (free of Peafowl's .content-width sizes: 970px min from 992px). */
#ld-settings .ld-subscription-page { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }

/* Buttons */
#ld-settings .ld-set-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--set-line);
  border-radius: 9px; background: transparent; color: var(--set-text); font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; text-decoration: none; }
#ld-settings .ld-set-btn:hover { border-color: rgba(255, 255, 255, .22); }
#ld-settings .ld-set-btn.is-primary { border-color: var(--set-green); background: var(--set-green); color: #06231a; }
#ld-settings .ld-set-btn.is-primary:hover { filter: brightness(1.06); }
#ld-settings .ld-set-btn.is-quiet { border-color: transparent; color: var(--set-muted); }
#ld-settings .ld-set-btn.is-quiet:hover { color: #fff; }
#ld-settings .ld-set-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* The save bar: only when something changed (settings.js). */
#ld-settings .ld-set-savebar { position: sticky; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 10px 10px 16px;
  border: 1px solid rgba(251, 176, 31, .35); border-radius: 12px; background: #12161c; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
#ld-settings .ld-set-savebar[hidden] { display: none; }
#ld-settings .ld-set-savebar-n { flex: 1; min-width: 0; color: var(--set-amber); font-size: 13px; font-weight: 600; }
#ld-settings .ld-set-savebar-n::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--set-amber); vertical-align: 1px; }

/* Phones (1b): no sidebar; one button with the section and "All settings", which opens the sections as a sheet. */
@media (max-width: 720px) {
  #ld-settings, #ld-settings.is-wide { display: block; margin: 16px auto 96px; padding: 0 16px; }
  #ld-settings .ld-set-side { display: none; }
  #ld-settings .ld-set-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin: 0 0 18px; padding: 0 14px; border: 1px solid var(--set-line);
    border-radius: 12px; background: var(--set-card); color: #fff; font: 600 15px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; text-align: left; }
  #ld-settings .ld-set-pick .ld-set-ico:first-child { color: var(--set-green); }
  #ld-settings .ld-set-pick .ld-set-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #ld-settings .ld-set-pick .ld-set-dot { margin-left: 0; }
  #ld-settings .ld-set-pick-all { margin-left: auto; color: var(--set-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
  #ld-settings .ld-set-head { display: none; }
  #ld-settings .ld-set-savebar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); margin: 0; }
}

/* Cards, fields and switches (sections 2 onwards). Chevereto's own field markup inside them (.input-label, .text-input). */
#ld-settings .ld-set-card { margin: 0 0 16px; padding: 20px 22px; border: 1px solid var(--set-line); border-radius: 14px; background: var(--set-card); }
#ld-settings .ld-set-card-title { margin: 0 0 14px; color: #fff; font: 700 14.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
#ld-settings .input-label { margin: 0 0 16px; padding: 0; }
#ld-settings .input-label:last-child { margin-bottom: 0; }
#ld-settings .input-label > label { display: block; margin: 0 0 6px; color: #c3c9d0; font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#ld-settings .ld-set-input, #ld-settings .ld-set-field .text-input { width: 100%; max-width: 100%; height: 40px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px; background: #0b0d13; color: var(--set-text); font: 400 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: none; }
#ld-settings textarea.ld-set-input { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
#ld-settings .ld-set-input:focus { border-color: var(--set-green); outline: 0; }
#ld-settings .ld-set-hint { margin-top: 6px; color: var(--set-muted); font-size: 12.5px; }
#ld-settings .ld-set-hint a { color: var(--set-text); }
#ld-settings .ld-set-copyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#ld-settings .ld-set-copyrow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ld-settings .ld-set-btn.is-small { min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
#ld-settings .ld-set-note { margin-top: 8px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; }
#ld-settings .ld-set-note.is-info { border: 1px solid rgba(122, 162, 247, .3); background: rgba(122, 162, 247, .08); color: #c9d6f7; }
#ld-settings .ld-set-note[hidden] { display: none; }
#ld-settings .input-warning:empty { display: none; }
#ld-settings .ld-set-rows { margin-top: 4px; border-top: 1px solid var(--set-line); }
#ld-settings .ld-set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--set-line); }
#ld-settings .ld-set-row:last-child { border-bottom: 0; padding-bottom: 0; }
#ld-settings .ld-set-rows:first-child { margin-top: 0; border-top: 0; }
#ld-settings .ld-set-rows:first-child > .ld-set-row:first-child { padding-top: 0; }
#ld-settings .ld-set-row-text { display: flex; flex-direction: column; margin: 0; cursor: pointer; }
#ld-settings .ld-set-row-text b { color: var(--set-text); font-size: 13.5px; font-weight: 600; }
#ld-settings .ld-set-row-text small { color: var(--set-muted); font-size: 12px; }
#ld-settings .ld-set-switch { position: relative; flex: none; width: 42px; height: 24px; }
#ld-settings .ld-set-switch input[type=checkbox] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
#ld-settings .ld-set-switch span { position: absolute; inset: 0; border-radius: 999px; background: #2a3039; transition: background .15s ease; }
#ld-settings .ld-set-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
#ld-settings .ld-set-switch input:checked + span { background: var(--set-green); }
#ld-settings .ld-set-switch input:checked + span::after { transform: translateX(18px); }
#ld-settings .ld-set-switch input:focus-visible + span { outline: 2px solid var(--set-green); outline-offset: 2px; }
#ld-settings .ld-set-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#ld-settings .ld-set-pair .soft-hidden { display: none; }
/* The email module's section in its card: its heading as the card's, the unsubscribe a quiet link. */
#ld-settings #email .ld-ep { margin: 0; }
#ld-settings #email .ld-ep > label { margin: 0 0 4px; color: #fff; font: 700 14.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#ld-settings #email .ld-ep-off { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--set-muted); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
#ld-settings #email .ld-ep-off:hover { color: #e0707f; }
@media (max-width: 720px) {
  #ld-settings .ld-set-card { padding: 16px; }
  #ld-settings .ld-set-pair { grid-template-columns: 1fr; }
}

/* Profile (section 3): the picture in the tier ring and emblem, the bio count, what visitors see first, the album view cards. */
#ld-settings .ld-set-avatar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
#ld-settings .ld-set-avatar-pic { position: relative; flex: none; width: 96px; height: 96px; line-height: 0; }
#ld-settings .ld-set-avatar-pic .user-image { display: block; width: 96px; height: 96px; margin: 0; border-radius: 50%; object-fit: cover; font-size: 34px; line-height: 1.5; }
#ld-settings .ld-set-avatar-pic img.user-image[src=""] { display: none; }
#ld-settings .ld-set-avatar-pic .user-image.hidden { display: none; }
#ld-settings .ld-set-avatar-pic .loading-placeholder { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
#ld-settings .ld-set-avatar-pic .loading-placeholder.hidden { display: none; }
#ld-settings .ld-set-avatar-side { flex: 1 1 220px; min-width: 0; }
#ld-settings .ld-set-avatar-side .ld-set-hint { margin: 0 0 10px; }
#ld-settings .ld-set-avatar-btns { display: flex; flex-wrap: wrap; gap: 8px; }
#ld-settings .ld-set-avatar-btns .soft-hidden { display: none; }
#ld-settings .hidden-visibility { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#ld-settings .input-label > label.ld-set-label-count { display: flex; justify-content: space-between; gap: 10px; }
#ld-settings .ld-set-count { color: var(--set-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
#ld-settings .ld-set-count.is-near { color: var(--set-amber); }
#ld-settings .ld-set-kicker { margin: 24px 0 10px; color: var(--set-muted); font: 600 10.5px ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
#ld-settings .ld-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
#ld-settings .ld-set-grid .input-label { margin: 0; }
#ld-settings .ld-set-views { margin: 0; padding: 0; border: 0; min-width: 0; }
#ld-settings .ld-set-views legend { margin: 0 0 8px; padding: 0; color: #c3c9d0; font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#ld-settings .ld-set-view-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#ld-settings .ld-set-views .ld-set-hint { margin: 10px 0 0; }
#ld-settings .ld-set-view { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px; border: 1.5px solid var(--set-line); border-radius: 10px;
  background: transparent; cursor: pointer; }
#ld-settings .ld-set-view:has(input:checked) { border-color: var(--set-green); background: rgba(14, 229, 155, .06); }
#ld-settings .ld-set-view:has(input:focus-visible) { outline: 2px solid var(--set-green); outline-offset: 2px; }
#ld-settings .ld-set-view input { position: absolute; opacity: 0; pointer-events: none; }
#ld-settings .ld-set-view b { margin-top: 6px; color: #fff; font-size: 13px; }
#ld-settings .ld-set-view small { color: var(--set-muted); font-size: 11.5px; line-height: 1.4; }
#ld-settings .ld-set-view-art { display: grid; gap: 4px; height: 104px; padding: 10px; border-radius: 8px; background: #050608; }
#ld-settings .ld-set-view-art.is-stream { grid-template-columns: 1fr; grid-template-rows: 4fr 1fr; padding: 10px 22%; }
#ld-settings .ld-set-view-art.is-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
#ld-settings .ld-set-view-art i { border-radius: 3px; background: #2a3038; }
#ld-settings .ld-set-view:has(input:checked) .ld-set-view-art i { background: #35505f; }

/* Password (section 4): four strength bars, the mismatch line, the button. */
#ld-settings .ld-set-label-count a { color: var(--set-green); font-weight: 500; text-decoration: none; }
#ld-settings .ld-set-label-count a:hover { text-decoration: underline; }
#ld-settings .ld-set-pw-lead { margin: 0 0 16px; }
#ld-settings .ld-set-pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
#ld-settings .ld-set-pw-bars i { height: 4px; border-radius: 2px; background: #232831; }
#ld-settings [data-score="1"] .ld-set-pw-bars i.is-on { background: #ff8a9c; }
#ld-settings [data-score="2"] .ld-set-pw-bars i.is-on { background: var(--set-amber); }
#ld-settings [data-score="3"] .ld-set-pw-bars i.is-on, #ld-settings [data-score="4"] .ld-set-pw-bars i.is-on { background: var(--set-green); }
#ld-settings [data-score="0"] [data-ld-set-pw-label], #ld-settings [data-score="1"] [data-ld-set-pw-label] { color: #ff8a9c; }
#ld-settings [data-score="2"] [data-ld-set-pw-label] { color: var(--set-amber); }
#ld-settings [data-score="3"] [data-ld-set-pw-label], #ld-settings [data-score="4"] [data-ld-set-pw-label] { color: var(--set-green); }
#ld-settings .ld-set-hint.is-bad { color: #ff8a9c; }
#ld-settings .ld-set-hint[hidden] { display: none; }
#ld-settings .ld-set-input.is-bad { border-color: rgba(255, 138, 156, .6); }
#ld-settings .ld-set-actions { display: flex; gap: 10px; margin-top: 18px; }
#ld-settings .ld-set-btn.is-primary:disabled { border-color: #1c2028; background: #1c2028; color: #6b7279; cursor: not-allowed; filter: none; }

/* Saved: Chevereto's own message after a save, which its theme never showed. */
#ld-settings .ld-set-note.is-ok { margin: 0 0 16px; border: 1px solid rgba(14, 229, 155, .35); background: rgba(14, 229, 155, .07); color: #c9f7e5; }

/* Security (section 5): two-factor (Chevereto's own) and the signed-in devices. */
#ld-settings .ld-set-tfa-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#ld-settings .ld-set-tfa-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: #1a1e24; color: var(--set-muted); }
#ld-settings .ld-set-tfa.is-on { border-color: rgba(14, 229, 155, .4); }
#ld-settings .ld-set-tfa.is-on .ld-set-tfa-ico { background: #0c1d17; color: var(--set-green); }
#ld-settings .ld-set-tfa-text { display: flex; flex: 1 1 200px; flex-direction: column; min-width: 0; }
#ld-settings .ld-set-tfa-text b { color: #fff; font-size: 14px; }
#ld-settings .ld-set-tfa-text small { color: var(--set-muted); font-size: 12.5px; }
#ld-settings .ld-set-tfa.is-on .ld-set-tfa-text small { color: var(--set-green); }
#ld-settings .ld-set-tfa-head [hidden] { display: none; }
#ld-settings .ld-set-tfa-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--set-line); }
#ld-settings .ld-set-tfa-setup[hidden] { display: none; }
#ld-settings .ld-set-tfa-step { min-width: 0; }
#ld-settings .ld-set-tfa-n { display: block; margin: 0 0 10px; color: #fff; font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#ld-settings .ld-set-tfa-qr { display: block; width: 168px; height: 168px; padding: 8px; border-radius: 10px; background: #fff; }
#ld-settings .ld-set-tfa-key { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--set-line); border-radius: 9px; background: #0b0d13; }
#ld-settings .ld-set-tfa-key code { min-width: 0; color: var(--set-text); font: 500 13px ui-monospace, Menlo, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
#ld-settings .ld-set-tfa-code { max-width: 180px; font: 600 20px ui-monospace, Menlo, monospace; letter-spacing: .3em; text-align: center; }
#ld-settings .ld-set-tfa-step .ld-set-actions { margin-top: 14px; flex-wrap: wrap; }
#ld-settings .ld-set-device-list { margin: 0; padding: 0; list-style: none; }
#ld-settings .ld-set-device { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--set-line); }
#ld-settings .ld-set-device:first-child { padding-top: 0; }
#ld-settings .ld-set-device-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: #1a1e24; color: var(--set-muted); }
#ld-settings .ld-set-device.is-current .ld-set-device-ico { color: var(--set-green); }
#ld-settings .ld-set-device-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
#ld-settings .ld-set-device-text b { color: #fff; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
#ld-settings .ld-set-device-text small { color: var(--set-muted); font-size: 12px; }
#ld-settings .ld-set-device-me { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(14, 229, 155, .12); color: var(--set-green);
  font: 600 10px ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
#ld-settings .ld-set-devices-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#ld-settings .ld-set-devices-foot .ld-set-hint { margin: 0; flex: 1 1 240px; }
@media (max-width: 720px) {
  #ld-settings .ld-set-tfa-setup { grid-template-columns: 1fr; }
  #ld-settings .ld-set-tfa-qr { margin: 0 auto; }
}

/* Connections (section 6): a quiet row per login provider; Chevereto's scripts swap a row's two states. */
#ld-settings .ld-set-conns { padding-top: 8px; padding-bottom: 8px; }
#ld-settings .ld-set-conn { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--set-line); }
#ld-settings .ld-set-conns > :last-child .ld-set-conn, #ld-settings .ld-set-conns > .ld-set-conn:last-child { border-bottom: 0; }
#ld-settings .ld-set-conn-glyph { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: #1a1e24; color: var(--ld-conn);
  font: 800 16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#ld-settings .ld-set-conn-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
#ld-settings .ld-set-conn-text b { color: #fff; font-size: 13.5px; font-weight: 600; }
#ld-settings .ld-set-conn-text small { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--set-muted); font-size: 12px; overflow-wrap: anywhere; }
#ld-settings .ld-set-conn.is-on .ld-set-conn-text small { color: var(--set-green); }
#ld-settings .ld-set-conn-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--set-green); }
#ld-settings .ld-set-conns-note { margin: 0 4px 16px; }

/* Membership (section 7): the page is kept as it is, but its two-column grids follow the window, and between the phone
 * layout and a wide window the frame's column is too narrow for them (768: 492px). One column there. */
@media (min-width: 721px) and (max-width: 1040px) {
  #ld-settings .ld-active-grid, #ld-settings .ld-free2-grid, #ld-settings .ld-free2-hero { grid-template-columns: minmax(0, 1fr) !important; }
  #ld-settings .ld-active-grid > * { min-width: 0; max-width: 100%; }
}

/* About Lensdump (section 8): promises, the latest newsletters, links, and Chevereto's credit, faded. */
#ld-settings .ld-set-kicker-first { margin-top: 0; }
#ld-settings .ld-set-promises { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
#ld-settings .ld-set-promise { display: flex; gap: 12px; min-width: 0; }
#ld-settings .ld-set-promise-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: #0c1d17; color: var(--set-green); }
#ld-settings .ld-set-promise b { display: block; color: #fff; font-size: 13.5px; }
#ld-settings .ld-set-promise small { display: block; margin-top: 2px; color: var(--set-muted); font-size: 12.5px; line-height: 1.45; }
#ld-settings .ld-set-letters { padding: 20px 12px 8px; }
#ld-settings .ld-set-letters .ld-set-card-title { margin: 0 10px 8px; }
#ld-settings .ld-set-letter { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 10px; color: inherit; text-decoration: none; }
#ld-settings .ld-set-letter:hover { background: #141820; }
#ld-settings .ld-set-letter img, #ld-settings .ld-set-letter-art { flex: none; width: 64px; height: 48px; border-radius: 7px; object-fit: cover; background: linear-gradient(135deg, #12352a, #1a1e24); }
#ld-settings .ld-set-letter-text { display: flex; flex-direction: column; min-width: 0; }
#ld-settings .ld-set-letter-text small { color: var(--set-muted); font: 600 10.5px ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
#ld-settings .ld-set-letter-text b { color: #fff; font-size: 13.5px; overflow-wrap: anywhere; }
#ld-settings .ld-set-letter-text span { overflow: hidden; color: var(--set-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
#ld-settings .ld-set-letters-all { display: inline-block; margin: 6px 10px 6px; color: var(--set-green); font-size: 13px; font-weight: 600; text-decoration: none; }
#ld-settings .ld-set-links { padding: 6px 22px; }
#ld-settings .ld-set-links a { display: flex; align-items: center; justify-content: space-between; min-height: 46px; border-bottom: 1px solid var(--set-line); color: var(--set-text); text-decoration: none; }
#ld-settings .ld-set-links a:last-child { border-bottom: 0; }
#ld-settings .ld-set-links a span:last-child { color: var(--set-muted); }
#ld-settings .ld-set-links a:hover span:first-child { color: #fff; }
#ld-settings .ld-set-credit { margin: 8px 4px 0; color: var(--set-muted); font-size: 11.5px; line-height: 1.55; opacity: .6; }
#ld-settings .ld-set-credit p { margin: 0 0 6px; }
#ld-settings .ld-set-credit a { color: inherit; text-decoration: underline; }
@media (max-width: 720px) {
  #ld-settings .ld-set-promises { grid-template-columns: 1fr; }
  #ld-settings .ld-set-grid { grid-template-columns: 1fr; }
  #ld-settings .ld-set-links { padding: 4px 16px; }
}

#ld-settings .ld-set-facts { margin: 0; padding: 0 0 0 18px; list-style: disc; color: var(--set-muted); font-size: 13px; line-height: 1.55; }
#ld-settings .ld-set-facts li { display: list-item; }
#ld-settings .ld-set-facts li + li { margin-top: 8px; }
#ld-settings .ld-set-facts li::marker { color: var(--set-green); }
#ld-settings .ld-set-facts a { color: var(--set-green); text-decoration: none; }
#ld-settings .ld-set-card > .ld-set-conns-note { margin: 0; }
#ld-settings #email .ld-ep { max-width: none; } /* the email module's own 560px cap: the card sets the width here */
/* The picture's emblem sits on the accent ring at the lower right, as on the header's avatar and elsewhere (owner,
 * 2 Oct 2026), not inside the picture as badges.css places it on large avatars: its centre on the ring's 45° point. */
#ld-settings .ld-set-avatar-pic.ld-avatar.is-large .ld-avatar-emblem { right: -4px; bottom: -4px; width: 32px; height: 32px; }

/* Membership inside Settings (owner, 2 Oct 2026: "the banner at the top is wider than the membership area"): the plan's
   cards fill the same width as the notes and banners above them, so their edges line up. The page's own 40px side
   padding was made for the standalone page. */
#ld-settings .ld-subscription-page .ld-active-page,
#ld-settings .ld-subscription-page .ld-cancelled-body { padding-left: 0 !important; padding-right: 0 !important; }

/* Membership's plan picker in the Settings column (owner, 2 Oct 2026: "the desktop view looks cramped on this page"):
 * the picker's phone layout whenever the column is narrower than five cards need (1100px), whatever the window. These
 * are registration.css's own two max-width: 720px blocks, unchanged but for the #ld-settings prefix. registration.css
 * is pinned: at the next re-publication its picker rules become a container query and this copy goes
 * (runtime-change-runbook.md, "Pending for the next re-publication"). */
#ld-settings .ld-subscription-page { container: ldplans / inline-size; }
@container ldplans (max-width: 1099.98px) { /* a full 1100px window is the desktop picker (above), as on /signup */
  /* A phone-width column, in line with the page title, rather than phone rows stretched across the whole column; and the desktop price cell's
     size containment (registration.css, min-width: 721px) undone, or the price collapses onto the radio. */
  #ld-settings .ld-registration .ld-wrap { max-width: 760px; margin-left: 0; margin-right: auto; }
  #ld-settings .ld-registration .ld-card-price { container-type: normal; }
  #ld-settings .ld-registration .ld-card-price .ld-price { white-space: nowrap; }
  /* The prefix lifts the copied "every bar button full width" rule above registration.css's later small-button rules for
     the deal pill and the code box; they get their own sizes back here. */
  #ld-settings .ld-registration .ld-checkout-bar .ld-bar-deal-change { flex: none; width: auto; height: auto; min-height: 26px; }
  #ld-settings .ld-registration .ld-checkout-bar .ld-bar-deal-remove { flex: none; width: 26px; height: 26px; min-height: 26px; }
  #ld-settings .ld-registration .ld-checkout-bar .ld-bar-code-apply { flex: none; width: auto; height: 40px; }
  #ld-settings .ld-registration .ld-checkout-bar .ld-bar-offers { width: auto; height: auto; }
  #ld-settings .ld-registration .ld-wrap { padding: 0 16px; }
  #ld-settings .ld-registration .ld-picker-hero { margin: 0 -16px; padding: 0 20px 18px; border-bottom: 0; }
  #ld-settings .ld-registration .ld-picker-art { left: 0; bottom: auto; height: 140px; }
  #ld-settings .ld-registration .ld-picker-art svg { top: -50px; right: -250px; height: 340px; transform: none; opacity: .85; }
  #ld-settings .ld-registration .ld-picker-shade { bottom: auto; height: 140px; background: linear-gradient(180deg, rgba(5, 6, 8, .35) 0%, rgba(5, 6, 8, .25) 45%, #050608 100%); }
  #ld-settings .ld-registration .ld-picker-aside { height: 82px; margin: 0; padding-top: 18px; font-size: 13px; }
  #ld-settings .ld-registration .ld-picker-header { display: block; }
  #ld-settings .ld-registration .ld-picker-intro .ld-progress { display: none; }
  #ld-settings .ld-registration .ld-picker-intro .ld-progress-compact { display: block; margin: 0 0 10px; font: 600 10px ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #0ee59b; }
  #ld-settings .ld-registration .ld-picker-intro .ld-progress-compact-bars { display: none; }
  #ld-settings .ld-registration .ld-picker-intro h1 { margin-bottom: 8px; font-size: 27px; letter-spacing: -.6px; }
  #ld-settings .ld-registration .ld-picker-intro .ld-title-sub { display: block; }
  #ld-settings .ld-registration .ld-sub-long { display: none; }
  #ld-settings .ld-registration .ld-sub-short { display: inline; }
  #ld-settings .ld-registration .ld-picker-intro .ld-title-sub { margin-bottom: 18px; font-size: 13.5px; }
  #ld-settings .ld-registration #registration-term-group, #ld-settings .ld-registration #membership-term-group { display: flex; align-items: center; gap: 12px; }
  #ld-settings .ld-registration .ld-term-toggle { flex: 1; display: flex; border-radius: 11px; }
  #ld-settings .ld-registration .ld-term-toggle label { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; }
  #ld-settings .ld-registration .ld-save-hint { flex: none; margin: 0; }
  #ld-settings .ld-registration .ld-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  #ld-settings .ld-registration .ld-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 20px; column-gap: 12px; align-items: center; padding: 14px; min-height: 44px; }
  #ld-settings .ld-registration .ld-most-chosen { display: block; padding: 3px 8px; border-radius: 0 0 6px 6px; font-size: 9px; }
  #ld-settings .ld-registration .ld-emblem { grid-column: 1; grid-row: 1; height: 40px; }
  #ld-settings .ld-registration .ld-animation { width: 40px; height: 40px; }
  #ld-settings .ld-registration .ld-card-body { grid-column: 2; grid-row: 1; text-align: left; }
  #ld-settings .ld-registration .ld-card-name { margin: 0; font-size: 16px; text-align: left; }
  #ld-settings .ld-registration .ld-card-tagline { display: block; margin-top: 2px; font-size: 11.5px; text-align: left; }
  #ld-settings .ld-registration .ld-card-price { grid-column: 3; grid-row: 1; margin: 0; text-align: right; }
  #ld-settings .ld-registration .ld-price { text-align: right; }
  #ld-settings .ld-registration .ld-price-big { font-size: 19px; letter-spacing: -.5px; }
  #ld-settings .ld-registration .ld-price-period { display: block; margin: 0; font-size: 10.5px; color: #6f7883; }
  #ld-settings .ld-registration .ld-card .ld-price-sub { display: none; }
  #ld-settings .ld-registration .ld-card-radio { display: flex; grid-column: 4; grid-row: 1; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); }
  #ld-settings .ld-registration .ld-card:has(input:checked) .ld-card-radio { border-color: rgb(var(--tier)); }
  #ld-settings .ld-registration .ld-card:has(input:checked) .ld-card-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--tier)); }
  #ld-settings .ld-registration .ld-card:has(input:checked) { box-shadow: none; }
  #ld-settings .ld-registration .ld-card-details { display: none; grid-column: 1 / -1; grid-row: 2; }
  #ld-settings .ld-registration .ld-card:has(input:checked) .ld-card-details { display: block; padding-top: 12px; }
  #ld-settings .ld-registration .ld-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 12px 0; }
  #ld-settings .ld-registration .ld-specs .ld-spec-role { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }
  #ld-settings .ld-registration .ld-perks { margin-top: 0; padding-top: 12px; }
  #ld-settings .ld-registration .ld-picker-foot { gap: 6px 14px; margin-top: 18px; font-size: 11.5px; }
  #ld-settings .ld-registration .ld-picker-foot span + span::before { display: none; }
  #ld-settings .ld-registration .ld-checkout-bar { flex-direction: column; align-items: stretch; gap: 10px; margin: 22px -16px 0; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
  #ld-settings .ld-registration .ld-bar-actions { display: block; }
  #ld-settings .ld-registration .ld-checkout-bar button { width: 100%; height: 50px; }
  #ld-settings .ld-registration .ld-bar-emblem { width: 32px; height: 32px; }
  #ld-settings .ld-membership-plans .ld-bar-actions, #ld-settings #registration-picker .ld-bar-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  #ld-settings .ld-membership-plans .ld-bar-offers, #ld-settings #registration-picker .ld-bar-offers { width: auto; align-self: flex-start; }
  #ld-settings .ld-registration .ld-bar-code input { flex: 1; min-width: 0; width: auto; }
  #ld-settings .ld-registration .ld-bar-msg { left: 0; right: auto; max-width: 100%; }
  #ld-settings .ld-registration .ld-bar-next-line { display: none; }
  #ld-settings .ld-membership-plans .ld-checkout-bar #membership-checkout, #ld-settings #registration-picker .ld-checkout-bar #registration-checkout { height: auto; min-height: 50px; padding: 10px 16px; white-space: normal; line-height: 1.3; }
  #ld-settings .ld-registration .ld-card .ld-price-deal { display: none; }
}

/* Choosing a plan on a desktop (owner, 3 Oct 2026: "revert to the desktop view … it can be wider than the membership
   width"): from 1100px the plans take the whole Settings frame (the sections list steps aside; "Back to membership" is
   on the plans), wide enough for the five cards side by side, so the phone layout above (the ldplans container under
   1100px) no longer applies. Tablets and phones keep it. */
@media (min-width: 1100px) {
  #ld-settings:has(#ld-membership-plans) { grid-template-columns: minmax(0, 1fr); max-width: 1320px; }
  #ld-settings:has(#ld-membership-plans) > .ld-set-side { display: none; }
  /* The same width as /signup's picker (owner, 3 Oct 2026): its 1520px frame with 40px inside each side, and no Settings
     padding around it, so the five cards span the same at every width (1440px at most). */
  #ld-settings:has(#ld-membership-plans) { max-width: 1520px; padding-left: 0; padding-right: 0; }
  #ld-settings .ld-membership-plans .ld-wrap { max-width: 1520px; }
}