/* Hylē v4 · settings lane, Round 4B (settings, account, project-settings, share, billing).
   ONE navigation layer. Desktop: the app sidebar turns into the settings sidebar (built by pages/settings.js from one model:
   You → Preferences · Account · Plan & billing; Project → Project settings · Sharing). There is no in-page rail and no scrollspy.
   ≤1024px (no sidebar): the same model renders as one row of text tabs under the title. No native select is used as navigation.
   Sections are a two-column grid on wide screens (heading + description left, a raised card right).
   Members and the view-only link live only on Sharing; Project settings shows a read-only access summary that links there. */

/* ================= Settings sidebar (desktop, built in JS) ================= */
.app-side.is-settings > .ws-btn, .app-side.is-settings > #ws-menu, .app-side.is-settings > .side-actions,
.app-side.is-settings > .side-nav, .app-side.is-settings > .side-sec, .app-side.is-settings .side-foot > a[href="./settings.html"],
.app-side.is-settings .side-foot > .budget { display: none; }
.app-side.is-settings > .set-side { display: flex; flex-direction: column; gap: 2px; }
.set-side .side-back { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 10px 0 14px; padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); }
.set-side .side-back:hover { background: rgba(20,20,19,.045); color: var(--ink); }
.set-side .side-back svg { width: 16px; height: 16px; color: var(--ink-3); }
.set-side .set-side-title { padding: 0 10px 10px; font-size: var(--fs-row); font-weight: 600; color: var(--ink); letter-spacing: var(--ls-row); }
.set-side .side-sec { margin-top: 14px; }
.set-side .side-sec:first-of-type { margin-top: 0; }
.set-side .set-scope { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 10px 6px; font-size: var(--fs-small); color: var(--ink-2); }
.set-side .set-scope .dot { flex: none; }
.set-side .set-scope span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-side .side-link .count { margin-left: auto; }

/* ================= Page head + scope ================= */
.set-page .app-head { padding-bottom: 28px; }
.set-page .app-head-title { flex-direction: column; align-items: flex-start; gap: 10px; }
.set-page .app-head-lede { margin-top: 0; }
.set-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--fs-small); color: var(--ink-2); }
.set-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.set-meta .t-mono { font-size: var(--fs-mono); letter-spacing: 0; color: var(--ink-2); }
.set-meta b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* the one project switcher: a labelled scope control, not navigation */
.scope { position: relative; }
.scope .select-trigger { width: auto; min-width: 0; max-width: min(420px, 100%); min-height: 36px; gap: 8px; padding: 0 10px 0 12px; border-radius: var(--r-md); border: 0; background: var(--raised); box-shadow: var(--e-1); font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.scope .select-trigger .value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope .select-trigger .scope-k { font-weight: 500; color: var(--ink-2); }
.scope .listbox { min-width: 300px; }

/* tabs: only where the sidebar is gone (≤1024px) */
.set-tabs { display: none; }

/* ================= Sections: heading column + raised card ================= */
.set-body { display: flex; flex-direction: column; gap: 48px; min-width: 0; max-width: none; }
.set-sec { scroll-margin-top: calc(var(--topbar-h) + 24px); }
.set-sec-head { display: block; margin: 0 0 14px; }
.set-sec-head h2 { color: var(--ink); }
.set-sec-head .t-desc { margin-top: 4px; max-width: 46ch; color: var(--ink-2); }
@media (min-width: 1100px) {
  .set-sec { display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .set-sec-head { margin: 0; padding-top: 14px; }
  .set-sec > :not(.set-sec-head) { grid-column: 2; }
}
.set-card { position: relative; background: var(--raised); border-radius: var(--r-lg); box-shadow: var(--e-1); }
.set-card + .set-card { margin-top: 16px; }
.set-row { padding: 18px 22px; min-height: 72px; border-top: 1px solid var(--hairline); }
.set-row:first-child { border-top: 0; }
.set-row:not(.set-row-block):not(.set-row-stack):hover { background: transparent; }
.set-card .control { min-height: 40px; }
.set-card .control input { height: 38px; font-size: var(--fs-ui); }
.set-card .control textarea { font-size: var(--fs-ui); padding: 12px 14px; line-height: 1.5; }
.set-card .set-ctl > .select .select-trigger { min-height: 40px; min-width: 232px; font-size: var(--fs-ui); }
.set-card .fld { gap: 6px; }
.set-card .fld-hint { min-height: 0; }
.set-card .fld-hint:empty { display: none; }
.draft-fld { width: 100%; }
.static-val { color: var(--ink); font-weight: 500; text-align: right; }
.static-val.static-left { text-align: left; }
.row-ico { width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; border-radius: var(--r-md); background: var(--sunken); color: var(--ink-2); }
.row-ico svg { width: 16px; height: 16px; }
.set-label .row-ico { margin-right: 4px; }
.set-row-ico { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; }
.set-row-ico .set-text { min-width: 0; }

/* ================= Preferences: the composer preview (aria-hidden, reads as a picture of the composer) ================= */
.set-live { margin: 0; padding: 18px 22px 20px; border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, var(--sunken), rgba(243,241,234,.55)); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.set-live-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.set-live-cap span { font-weight: 400; }
.cp-box { position: relative; padding: 14px 14px 12px 16px; border-radius: 16px; background: var(--raised); box-shadow: 0 0 0 1px var(--hairline-strong), 0 12px 28px -18px rgba(20,20,19,.28); pointer-events: none; user-select: none; }
.cp-q { min-height: 24px; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-3); }
.cp-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cp-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--sunken); font-size: var(--fs-small); font-weight: 500; color: var(--ink); white-space: nowrap; }
.cp-chip svg { width: 14px; height: 14px; color: var(--ink-3); }
.cp-chip .t-mono { color: var(--ink-2); }
.cp-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--r-md); background: var(--sunken); isolation: isolate; }
.cp-seg > span:not(.cp-thumb) { position: relative; z-index: 1; display: grid; place-items: center; height: 28px; padding: 0 12px; border-radius: 7px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); transition: color var(--d-2); }
.cp-seg > span.is-on { color: var(--ink); }
.cp-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 7px; background: var(--raised); box-shadow: 0 1px 2px rgba(20,20,19,.1), 0 0 0 1px rgba(20,20,19,.05); transition: transform var(--d-4) var(--ease-out), width var(--d-4) var(--ease-out); }
.cp-go { margin-left: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--r-md); background: var(--ink); color: #fff; font-size: var(--fs-small); font-weight: 500; }
.src-count { white-space: nowrap; font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.src-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 22px 20px; }
.src-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 8px 8px 8px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); cursor: pointer; transition: box-shadow var(--d-2); }
.src-row:hover { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.src-row b { display: block; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.src-row span.d { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.src-row .switch { min-width: 44px; min-height: 44px; justify-content: center; gap: 0; }
.set-row-head { min-height: 0; padding-bottom: 14px; }

/* Shortcuts */
.keys { padding: 4px 22px; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; border-top: 1px solid var(--hairline); font-size: var(--fs-ui); color: var(--ink); }
.key-row:first-child { border-top: 0; }
.keycaps { display: inline-flex; gap: 4px; }
.keycaps .kbd { min-width: 26px; height: 26px; font-size: var(--fs-small); color: var(--ink-2); }

/* ================= Dialog extras ================= */
.dialog { max-height: calc(100dvh - 32px); overflow: auto; }
.sheet { overscroll-behavior: contain; }
.dlg-ico { width: 44px; height: 44px; margin-bottom: 16px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); }
.dlg-ico svg { width: 20px; height: 20px; }
.dlg-ico.is-danger { background: var(--danger-tint); color: var(--danger); }
.dlg-draft { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunken); border-left: 2px solid var(--brand-orange); color: var(--ink-2); }
.dlg-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.dlg-form .dialog-actions { margin-top: 8px; }
.reveal-btn { width: 44px; height: 44px; margin-right: 2px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-3); }
.reveal-btn:hover { color: var(--ink); background: var(--sunken); }
.reveal-btn svg { width: 18px; height: 18px; }
.dlg-form .fld-hint:empty { display: none; }
.dlg-form .control { min-height: 48px; }
.dlg-form .control input { height: 46px; font-size: var(--fs-body); }
.btn-danger:hover { background: #9c3b30; }
.btn-danger { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(181,71,58,.3); }
.btn-danger-quiet { background: var(--raised); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line); }
.btn-danger-quiet:hover { background: var(--danger-tint); }
.sheet .dlg-ico { margin-bottom: 12px; }
.sheet .dlg-form { margin-top: 16px; }
.sheet .dialog-actions { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin-inline: -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--raised); border-top: 1px solid var(--hairline); }
.sheet .dialog-actions .btn { flex: 1; }
.sheet .t-heading { margin-bottom: 4px; }

/* ================= Account: the identity card is the page's object ================= */
.id-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 24px; }
.avatar-xl { width: 72px; height: 72px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.id-who { min-width: 0; }
.id-name { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--fs-heading); font-weight: 500; letter-spacing: var(--ls-heading); color: var(--ink); }
.id-name .save { font-size: var(--fs-small); }
.id-edit { display: flex; align-items: flex-start; gap: 8px; }
.id-edit[hidden], .id-name[hidden] { display: none; }
.id-card.is-editing .id-actions { display: none; }
.id-card.is-editing .id-mail { margin-top: 10px; }
.id-card.is-editing { align-items: start; }
.id-edit .fld { width: min(300px, 100%); }
.id-mail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: var(--fs-ui); color: var(--ink-2); }
.id-mail .t-mono { font-size: var(--fs-mono); letter-spacing: 0; color: var(--ink); }
.id-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px -24px -24px; border-top: 1px solid var(--hairline); }
.id-facts > div { padding: 14px 24px 16px; border-left: 1px solid var(--hairline); min-width: 0; }
.id-facts > div:first-child { border-left: 0; }
.id-facts dt { font-size: var(--fs-small); color: var(--ink-2); }
.id-facts dd { margin-top: 2px; font-size: var(--fs-ui); font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-actions { display: flex; align-items: center; gap: 8px; }
.conn-g { width: 16px; height: 16px; }
.set-danger .set-sec-head h2 { color: var(--danger); }
.set-danger .set-card { box-shadow: 0 0 0 1px var(--danger-line); background: var(--raised); }
.set-layout.is-deleted > .set-body { display: none; }
.acct-deleted { padding: 72px 24px; }
.acct-deleted h2 { font-family: var(--font-brand); font-weight: 500; font-size: var(--fs-title); letter-spacing: var(--ls-title); line-height: var(--lh-title); }
.deleted-actions { margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.deleted-actions .btn { margin-top: 0; }

/* ================= Project settings ================= */
.viewer-banner { margin-bottom: 24px; }
.proj-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; padding: 22px 22px 20px; border-bottom: 1px solid var(--hairline); }
.proj-card .field-tile { --tile: 48px; grid-row: span 2; }
.proj-q { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); letter-spacing: -.005em; max-width: 60ch; }
.proj-q-k { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.id-chip { padding: 4px 8px; border-radius: var(--r-xs); background: var(--sunken); color: var(--ink-2); font-size: var(--fs-mono); }
.field-val { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--fs-ui); }
.ptitle-fld .control { min-height: 44px; }
.set-ctl-wide { width: min(380px, 100%); }
.set-ctl-wide .ptitle-fld { width: 100%; }
body.is-viewer [data-edit-only] { display: none !important; }
body:not(.is-viewer) [data-view-only] { display: none !important; }
/* access summary: read-only, the controls live on Sharing */
.acc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.av-stack { display: inline-flex; padding-left: 6px; }
.av-stack .avatar { width: 34px; height: 34px; margin-left: -6px; box-shadow: 0 0 0 2px var(--raised); font-size: 11px; letter-spacing: -.02em; }
.acc-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.acc-link .t-mono { font-size: var(--fs-mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--success); }
.acc-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.acc-state.is-off { color: var(--ink-2); }

/* ================= Sharing: the viewer lens ================= */
.lens-wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.lens { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0 0 18px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-2); overflow: hidden; }
.lens > :not(.lens-bar):not(.lens-off) { margin-inline: 20px; }
.lens [data-lens-body] { display: flex; flex-direction: column; gap: 14px; }
.lens-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sunken); border-bottom: 1px solid var(--hairline); }
.lens-dots { display: inline-flex; gap: 5px; }
.lens-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); }
.lens-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-sm); background: var(--raised); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-2); overflow: hidden; white-space: nowrap; }
.lens-url svg { width: 12px; height: 12px; flex: none; color: var(--ink-3); }
.lens-title { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.lens-title b { font-size: var(--fs-row); font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lens-title .t-mono { font-size: var(--fs-mono); color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.lens-claim { font-size: var(--fs-ui); line-height: 1.55; color: var(--ink); }
.lens-claim .cite { margin: 0 2px; }
.lens-note { font-size: var(--fs-desc); color: var(--ink-2); }
.lens .fp { width: 100%; height: auto; }
.lens-off { position: absolute; inset: 49px 0 0; z-index: 2; display: none; place-items: center; align-content: center; gap: 6px; padding: 24px; text-align: center; background: var(--raised); }
.lens.is-off .lens-off { display: grid; }
.lens-off b { font-size: var(--fs-ui); font-weight: 600; }
.lens-off span { font-size: var(--fs-desc); color: var(--ink-2); max-width: 30ch; }
.lens-off svg { width: 22px; height: 22px; color: var(--ink-3); }
.caps { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.caps-h { margin-bottom: 4px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.caps li { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--fs-ui); }
.caps svg { width: 16px; height: 16px; flex: none; }
.caps .can { color: var(--ink); } .caps .can svg { color: var(--success); }
.caps .cannot { color: var(--ink-2); } .caps .cannot svg { color: var(--ink-3); }
.set-card .linkbox { padding: 20px 22px; }
.set-card .minvite { padding: 18px 22px; }

/* ================= Billing ================= */
/* current plan: a night instrument whose main object is the run budget; the field is its top edge only */
.plan-now { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); align-items: end; gap: 32px; padding: 26px 28px 24px; border-radius: var(--r-xl); background: radial-gradient(120% 140% at 0% 0%, rgba(18,117,216,.32), rgba(18,117,216,0) 55%), var(--brand-night); color: #fff; box-shadow: inset 0 0 0 1px var(--night-edge), 0 24px 60px -32px rgba(5,15,40,.6); overflow: hidden; }
.plan-now::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #1275d8, #4f9cf0 45%, #e19136); }
.pn-plan { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-self: stretch; }
.pn-plan .pn-sub { margin-top: auto; }
.pn-k { font-size: var(--fs-small); font-weight: 600; color: var(--on-dark-2); }
.pn-name { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.pn-sub { font-size: var(--fs-desc); color: var(--on-dark-2); }
.pn-meter { min-width: 0; }
.pn-num { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.pn-num .t-stat { color: #fff; font-size: 44px; line-height: 1; }
.pn-num span:last-child { font-size: var(--fs-ui); color: var(--on-dark-2); }
.ph-units { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 22px; }
.ph-units i { position: relative; display: block; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.14); }
.ph-units b { position: absolute; inset: 0; width: calc(var(--f) * 100%); border-radius: inherit; background: linear-gradient(180deg, #fff, var(--brand-glow)); }
.pp-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--fs-small); color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.pp-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--night-edge); font-size: var(--fs-small); color: var(--on-dark-2); }
.pp-foot a { color: #fff; font-weight: 500; }
.pp-foot .t-mono { color: var(--on-dark-2); font-size: var(--fs-mono); letter-spacing: 0; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; animation: pulse-w 1.8s var(--ease-in-out) infinite; }
@keyframes pulse-w { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* plans: three cards, one shared terms ledger (the terms are the same for every plan, so they are said once) */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 18px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); transition: box-shadow var(--d-3); }
.plan-card.is-selected { box-shadow: 0 0 0 1.5px var(--ink), var(--e-2); }
.plan-card::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-gradient); opacity: 0; transition: opacity var(--d-3); }
.plan-card.is-selected::before { opacity: 1; }
.plan-pick { display: flex; flex-direction: column; gap: 4px; text-align: left; border-radius: var(--r-md); }
.plan-pick::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.plan-pick:focus-visible { outline: none; }
.plan-card:has(.plan-pick:focus-visible) { box-shadow: 0 0 0 3px var(--focus-ring), var(--e-2); }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-row); font-weight: 600; color: var(--ink); }
.plan-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hairline-strong); transition: box-shadow var(--d-2); }
.is-selected .plan-radio { box-shadow: inset 0 0 0 5px var(--ink); }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price .t-stat { font-size: 32px; line-height: 1.1; }
.plan-price .t-small { color: var(--ink-2); }
.plan-card .btn { position: relative; z-index: 1; width: 100%; }
.terms { margin-top: 16px; }
.terms .set-row { min-height: 60px; padding-block: 14px; }
.terms .set-ctl .badge svg { width: 13px; height: 13px; }
.terms-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 22px 16px; border-top: 1px solid var(--hairline); background: var(--surface); border-radius: 0 0 var(--r-lg) var(--r-lg); font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.terms-note svg { width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--warning); }

.use-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--hairline); }
.use-filter { display: flex; align-items: center; gap: 8px; }
.usage-table { margin: 0; }
.usage-table th { color: var(--ink-2); font-weight: 500; }
.usage-table th:first-child, .usage-table td:first-child { padding-left: 22px; white-space: nowrap; }
.usage-table th:last-child, .usage-table td:last-child { padding-right: 22px; }
.usage-table td { color: var(--ink-2); }
.usage-table tr:last-child td { border-bottom: 0; }
.ut { display: flex; align-items: flex-start; gap: 12px; }
.ut .dot { margin-top: 7px; }
.ut-text { display: flex; flex-direction: column; gap: 2px; }
.ut-text .id { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-2); }
.ut .cell-title { color: var(--ink); font-weight: 500; }
.ut:hover .cell-title { text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.usage-sk { display: flex; flex-direction: column; gap: 16px; padding: 24px 22px; }
.usage-sk .w70 { width: 70%; } .usage-sk .w40 { width: 40%; }
[data-usage] .state { padding: 40px 22px; }
.pay-row .none { font-size: var(--fs-ui); color: var(--ink-2); }

/* ================= Loading skeleton for any card ================= */
.set-sk { display: flex; flex-direction: column; gap: 22px; padding: 22px; }
.set-sk .sk-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0; border: 0; }
.set-sk .sk-col { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.set-sk .sk-pill { width: 120px; height: 36px; border-radius: var(--r-md); }
.is-sk > :not(.set-sk) { display: none !important; }

/* ================= ≤1024: no sidebar → the same model as one row of tabs ================= */
@media (max-width: 1024px) {
  .set-tabs { position: relative; display: flex; gap: 4px; margin: -6px calc(var(--gutter) * -1) 24px; padding: 0 var(--gutter); border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-tabs a { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
  .set-tabs a:first-child { margin-left: -10px; }
  .set-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .set-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
  .set-tabs .tab-sep { flex: none; align-self: center; width: 1px; height: 18px; margin: 0 6px; background: var(--hairline-strong); }
  .plan-now { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lens-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .set-page .app-head { padding-bottom: 18px; gap: 8px; }
  .set-tabs { margin-bottom: 20px; gap: 0; justify-content: space-between; }
  .set-tabs a { padding: 0 8px; }
  .set-tabs a:first-child { margin-left: -8px; }
  .set-tabs a:last-child { margin-right: -8px; }
  .set-tabs a[aria-current="page"]::after { left: 8px; right: 8px; }
  .set-tabs .tab-sep { display: none; }
  .set-body { gap: 36px; }
  .set-sec-head { margin-bottom: 12px; }
  .set-row { padding: 16px; min-height: 0; }
  .set-card .set-ctl > .select, .set-card .set-ctl > .select .select-trigger { min-width: 0; width: 100%; }
  .set-card .control { min-height: 48px; }
  .set-card .control input { font-size: var(--fs-body); height: 46px; }
  .set-card .control textarea { font-size: var(--fs-body); }
  .set-card .select-trigger, .set-card .set-ctl > .select .select-trigger { min-height: 44px; }
  .scope .select-trigger { min-height: 44px; max-width: 100%; }
  .set-live { display: none; }
  .src-list { grid-template-columns: minmax(0, 1fr); padding: 0 16px 16px; }
  .keys { padding: 0 16px; }
  .id-card { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 18px; }
  .avatar-xl { width: 56px; height: 56px; font-size: 20px; }
  .id-actions { grid-column: 1 / -1; }
  .id-actions .btn { flex: 1; }
  .id-edit { flex-wrap: wrap; }
  .id-edit .fld { width: 100%; }
  .id-facts { grid-template-columns: minmax(0, 1fr); margin: 0 -18px -18px; }
  .id-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-left: 0; border-top: 1px solid var(--hairline); }
  .id-facts > div:first-child { border-top: 0; }
  .set-row-ico { grid-template-columns: auto minmax(0, 1fr); }
  .set-row-ico > .set-ctl { grid-column: 1 / -1; }
  .set-row-ico > .set-ctl .btn { flex: 1; }
  .proj-card { padding: 18px 16px; gap: 4px 14px; }
  .proj-card .field-tile { --tile: 40px; }
  .proj-q { font-size: var(--fs-body); }
  .acc-row { grid-template-columns: auto minmax(0, 1fr); }
  .acc-row > .btn { grid-column: 1 / -1; }
  .set-card .linkbox { padding: 16px; }
  .set-card .minvite { padding: 16px; }
  .plan-now { padding: 22px 18px 18px; border-radius: var(--r-lg); }
  .pn-name { font-size: 22px; }
  .pn-sub { display: none; }
  .pn-num .t-stat { font-size: 36px; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px 16px; }
  .plan-card .btn { grid-column: 1 / -1; display: none; }
  .plan-card.is-selected .btn { display: inline-flex; }
  .plan-pick { display: contents; }
  .plan-name { grid-column: 1; justify-content: flex-end; flex-direction: row-reverse; gap: 12px; }
  .plan-price { grid-column: 2; grid-row: 1; }
  .plan-price .t-stat { font-size: 24px; }
  .terms-note { padding: 14px 16px; }
  .terms .set-row, .set-row-ico.pay-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .set-row-ico.pay-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .set-row-ico.pay-row > .set-ctl { grid-column: 3; }
  .id-facts > div { align-items: center; }
  .use-sum { padding: 14px 16px; }
  .use-filter { overflow-x: auto; }
  .usage-table thead { display: none; }
  .usage-table, .usage-table tbody { display: block; }
  .usage-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "study status" "date bill"; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
  .usage-table tr:last-child { border-bottom: 0; }
  .usage-table td, .usage-table td:first-child, .usage-table td:last-child { padding: 0; border: 0; }
  .usage-table td:nth-child(1) { grid-area: date; padding-left: 24px; }
  .usage-table td:nth-child(2) { grid-area: study; }
  .usage-table td:nth-child(3) { display: none; }
  .usage-table td:nth-child(4) { grid-area: status; align-self: center; }
  .usage-table td:nth-child(5) { grid-area: bill; text-align: right; }
  .ut { min-height: 44px; align-items: center; }
  .ut .dot { margin-top: 0; }
  .dialog { padding: 20px; }
}

.set-page .set-layout { display: block; }
@media (max-width: 640px) { .plan-now { box-shadow: inset 0 0 0 1px var(--night-edge), 0 14px 30px -22px rgba(5,15,40,.6); } }

/* billing: the run budget is the main object (left, wide); the plan is a quiet block on the right */
.plan-now { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); align-items: stretch; }
.plan-now .pn-meter { order: -1; }
.plan-now .pn-plan { padding-left: 28px; border-left: 1px solid var(--night-edge); }
.pn-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; font-size: var(--fs-ui); font-weight: 500; color: #fff; }
.pn-link svg { width: 16px; height: 16px; }
.pn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.set-card #inbox { background: var(--surface); border-radius: 0 0 var(--r-lg) var(--r-lg); scroll-margin-top: calc(var(--topbar-h) + 24px); }
@media (max-width: 1024px) {
  .plan-now { grid-template-columns: minmax(0, 1fr); }
  .plan-now .pn-meter { order: 0; }
  .plan-now .pn-plan { padding-left: 0; border-left: 0; }
  .pn-link { display: none; }
}

/* =====================================================================================================
   Award fix · settings. The preview shows where a new question goes: an evidence thread runs from the Sources chip to
   every index that is switched on (system/atmosphere.js scene, on paper). A switched-off source keeps a dashed ochre gap.
   The tiles below are the controls; the ports in the preview mirror them. Reduced motion: the final threads, no packets.
   ===================================================================================================== */
[data-page="settings"] .set-live { position: relative; padding-bottom: 22px; }
[data-page="settings"] .lp-svg { z-index: 0; }
[data-page="settings"] .set-live-cap, [data-page="settings"] .cp-box, [data-page="settings"] .lp-ports { position: relative; z-index: 1; }
[data-page="settings"] .cp-src { box-shadow: inset 0 0 0 1px rgba(16,108,202,.28); background: rgba(16,108,202,.07); }
[data-page="settings"] .cp-src svg { color: var(--accent); }
.lp-ports { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 60px; }
.lp-port { display: flex; align-items: center; gap: 10px; min-width: 0; height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--raised); box-shadow: 0 0 0 1px var(--hairline-strong), 0 8px 18px -14px rgba(20,20,19,.3); transition: box-shadow var(--d-3), background var(--d-3), opacity var(--d-3); }
.lp-port b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.lp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(16,108,202,.14); transition: background var(--d-3), box-shadow var(--d-3); }
.lp-off { display: none; margin-left: auto; color: var(--warning); }
.lp-port.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px transparent; outline: 1.5px dashed var(--warning-line); outline-offset: -1.5px; }
.lp-port.is-off b { color: var(--ink-2); }
.lp-port.is-off .lp-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brand-orange); }
.lp-port.is-off .lp-off { display: inline; }
.lp-port.is-hot { box-shadow: 0 0 0 1.5px var(--accent), 0 8px 18px -14px rgba(20,20,19,.3); }
.lp-svg .atmo-t.is-hot .atmo-line { stroke-width: 2.6; }
.lp-svg .atmo-line { stroke-width: 1.8; }
.lp-svg .atmo-packet { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(16,108,202,.55)); }
.lp-svg .atmo-packet.is-gap { fill: var(--brand-orange); }
.lp-svg .atmo-ping { fill: none; stroke: var(--accent); stroke-width: 1.5; }
@media (max-width: 640px) {
  [data-page="settings"] .set-live { display: block; padding: 16px 16px 18px; }
  [data-page="settings"] .set-live-cap span { display: none; }
  [data-page="settings"] .cp-seg, [data-page="settings"] .cp-go { display: none; }
  .lp-ports { gap: 4px; margin-top: 44px; }
  .lp-port { flex-direction: column; justify-content: flex-start; gap: 8px; height: auto; padding: 0; background: none; box-shadow: none; text-align: center; }
  .lp-port b { white-space: normal; line-height: 1.25; }
  .lp-port.is-off { outline: 0; }
  .lp-port.is-hot { box-shadow: none; }
  .lp-dot { width: 12px; height: 12px; }
  .lp-off { margin: -4px 0 0; }
}
.lp-svg .atmo-t.is-gap .atmo-end.is-on { fill: var(--paper); stroke: var(--brand-orange); }


/* =====================================================================================================
   AUDIT FIX · STAGE B · settings lane (settings, account, project-settings, billing, share)
   One override layer on top of Round 4B + Award fix. Shared rules first, then page blocks, then phone.
   ===================================================================================================== */

/* ---------- Sidebar: project context row (not a switcher: no hover, glyph + code + title) ---------- */
.set-side .set-scope { align-items: center; gap: 10px; margin: 2px 4px 6px; padding: 8px 10px; border-radius: var(--r-md); background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(20,20,19,.06); }
.set-side .set-scope .field-glyph { --s: 30px; border-radius: 9px; }
.set-side .set-scope .sc-t { white-space: normal; overflow: visible; }
.set-side .sc-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.set-side .sc-k { font-size: 12px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-side .sc-n { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.set-side .set-side-title { padding: 0 10px 8px; font-family: var(--font-brand); font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }

/* ---------- Section rail: icon + title + caption; sticky beside long cards; sections divided by a hairline ---------- */
.set-body { gap: 0; }
.set-body > .set-sec, .set-body > .plan-now { margin-top: 40px; }
.set-body > :first-child { margin-top: 0; }
.set-body > .set-sec + .set-sec { padding-top: 40px; border-top: 1px solid rgba(20,20,19,.07); }
.sec-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 10px; background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px rgba(20,20,19,.07), 0 6px 14px -10px rgba(20,20,19,.35); }
.sec-ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
.set-danger .sec-ico { background: #fdf3f1; color: var(--danger); box-shadow: 0 0 0 1px rgba(181,71,58,.22); }
.set-sec-head h2, .set-page .set-sec-head .t-heading { font-family: var(--font-sans); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.set-sec-head .t-desc { margin-top: 6px; max-width: 28ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 1100px) {
  .set-sec { grid-template-columns: 216px minmax(0, 1fr); column-gap: 40px; }
  .set-sec-head { position: sticky; top: calc(var(--topbar-h) + 28px); padding-top: 4px; }
}
.set-danger .set-sec-head h2 { color: var(--ink); }

/* ---------- One card recipe ---------- */
.set-page .set-card { border-radius: 14px; box-shadow: 0 0 0 1px rgba(20,20,19,.075), 0 1px 2px rgba(20,20,19,.04), 0 12px 28px -24px rgba(20,20,19,.3); }
.set-page .set-row { border-top-color: rgba(20,20,19,.07); }
.set-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.set-desc { text-wrap: pretty; }

/* ---------- Controls: off switches and segmented controls meet 3:1 and read enabled ---------- */
.set-page .switch .track { width: 40px; height: 24px; background: #dcd8ce; box-shadow: inset 0 0 0 1px rgba(20,20,19,.42); }
.set-page .switch .track::after { top: 3px; left: 3px; width: 18px; height: 18px; box-shadow: 0 1px 2px rgba(20,20,19,.3); }
.set-page .switch input:checked + .track { background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.set-page .switch input:checked + .track::after { transform: translateX(16px); }
.set-page .switch input:focus-visible + .track { box-shadow: inset 0 0 0 1px rgba(20,20,19,.42), var(--focus-ring); }
.set-page .segmented { background: #ebe8e0; box-shadow: inset 0 0 0 1px rgba(20,20,19,.08); }
.set-page .segmented button { color: #3f3e39; }
.set-page .segmented button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.set-page .segmented .thumb { box-shadow: 0 0 0 1px rgba(20,20,19,.1), 0 1px 2px rgba(20,20,19,.12); }
.set-page .segmented button:lang(ko) { font-weight: 600; min-width: 84px; }
.set-page .segmented button[aria-pressed="true"]:lang(ko) { font-weight: 700; }
.set-page .segmented button[data-value="en"] { min-width: 84px; }
.set-page .control { box-shadow: inset 0 0 0 1px rgba(20,20,19,.24); }

/* ---------- Identifiers: email is text; IDs and URLs are one mono token (13px, ink, no tracking) ---------- */
.email { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.set-page .t-mono { letter-spacing: 0; }
.id-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--sunken); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.id-tag.is-dark { background: rgba(255,255,255,.12); color: rgba(255,255,255,.88); }
.id-field { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; height: 36px; padding: 0 2px 0 12px; border-radius: 9px; background: var(--sunken); box-shadow: inset 0 0 0 1px rgba(20,20,19,.08); }
.id-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 20px; color: var(--ink); background: none; padding: 0; }
.id-field .icon-btn { flex: none; width: 32px; height: 32px; border-radius: 7px; color: var(--ink-2); }
.id-field .icon-btn:hover { background: rgba(20,20,19,.06); color: var(--ink); }
.id-field .icon-btn svg { width: 16px; height: 16px; }

/* ---------- Status chips: one spec (24px, icon slot, AA) ---------- */
.conn-st, .term-st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--sunken); font-size: 12px; font-weight: 600; color: #4e4b45; white-space: nowrap; }
.conn-st svg, .term-st svg { width: 13px; height: 13px; }
.conn-st.is-on, .term-st.is-ok { background: #e3f3ea; color: #0f5e3c; }
.conn-st.is-lock, .term-st.is-lock { background: #efede7; color: #4e4b45; }
.term-st.is-wait { background: #f8efd8; color: #7a4d0e; }

/* ---------- Avatars (people): muted per-person hue ---------- */
.avatar.av-p { background: var(--av); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.av-stack .avatar { width: 32px; height: 32px; margin-left: -6px; font-size: 12px; font-weight: 600; box-shadow: 0 0 0 2px var(--raised); }
.av-stack .avatar.av-more { background: var(--sunken); color: var(--ink-2); }

/* ---------- Phone: page head keeps its lede; tabs scroll with snap and an edge fade ---------- */
@media (max-width: 1024px) {
  .set-page .app-head-lede { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; max-width: 40ch; }
  .set-tabs { gap: 2px; padding: 0 calc(var(--gutter) - 12px); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .set-tabs a { padding: 0 12px; scroll-snap-align: start; }
  .set-tabs a:first-child { margin-left: 0; }
  .set-tabs a[aria-current="page"]::after { left: 12px; right: 12px; }
  .set-tabs .tab-sep { display: block; margin: 0 4px; }
}
@media (max-width: 640px) {
  .set-page .app-head { padding-bottom: 16px; }
  .set-tabs { justify-content: flex-start; gap: 2px; margin-bottom: 24px; }
  .set-tabs a, .set-tabs a:first-child, .set-tabs a:last-child { margin: 0; padding: 0 12px; }
  .set-tabs a:last-child { margin-right: 24px; }
  .set-body > .set-sec, .set-body > .plan-now { margin-top: 28px; }
  .set-body > .set-sec + .set-sec { padding-top: 28px; }
  .sec-ico { width: 32px; height: 32px; margin-bottom: 10px; border-radius: 9px; }
  .sec-ico svg { width: 16px; height: 16px; }
  .set-sec-head .t-desc { max-width: 40ch; }
  .set-sec-head { margin-bottom: 14px; }
}

/* ================================== Preferences ================================== */
[data-page="settings"] .set-live { margin: 0; padding: 16px 22px 20px; border-top: 1px solid rgba(20,20,19,.07); border-bottom: 1px solid rgba(20,20,19,.07); border-radius: 0; background: radial-gradient(circle at 1px 1px, rgba(20,20,19,.07) 1px, transparent 1.4px) 0 0 / 16px 16px, #fbfaf6; }
.set-live-cap { margin-bottom: 10px; color: var(--ink-2); font-weight: 500; }
.lp-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: rgba(20,20,19,.06); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.lp-tag svg { width: 13px; height: 13px; }
.set-live-cap > span:last-child { font-size: 13px; }
[data-page="settings"] .cp-box { box-shadow: 0 0 0 1px rgba(20,20,19,.1), 0 2px 8px rgba(20,20,19,.05); cursor: default; }
[data-page="settings"] .cp-go { background: #e7e4dc; color: var(--ink-2); }
[data-page="settings"] .cp-seg { background: #ebe8e0; }
[data-page="settings"] .cp-seg > span.is-on { font-weight: 600; }
[data-page="settings"] .lp-ports { margin-top: 68px; gap: 10px; }
.lp-hub { position: absolute; z-index: 1; left: 50%; margin-top: 18px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(16,108,202,.14), 0 0 0 1px #fff; pointer-events: none; }
[data-page="settings"] .lp-port { justify-self: center; width: auto; max-width: 100%; height: 36px; padding: 0 12px 0 10px; gap: 8px; box-shadow: 0 0 0 1px rgba(20,20,19,.12); }
.lp-mk { width: 15px; height: 15px; flex: none; color: var(--ink-2); }
.lp-port .lp-dot { display: none; }
.lp-port.is-off .lp-mk { color: var(--ink-3); }
.lp-port.is-off { outline: 1.5px dashed var(--warning-line); outline-offset: -1.5px; box-shadow: none; background: transparent; }
/* sources: one flat 2×2 list split by hairlines; every tile is a label so the whole tile toggles */
[data-page="settings"] .src-list { gap: 0; padding: 0; margin: 0 22px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(20,20,19,.08); overflow: hidden; }
[data-page="settings"] .src-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; min-height: 68px; padding: 10px 8px 10px 14px; border-radius: 0; background: transparent; box-shadow: none; }
[data-page="settings"] .src-row:nth-child(2n) { box-shadow: inset 1px 0 0 rgba(20,20,19,.08); }
[data-page="settings"] .src-row:nth-child(n+3) { border-top: 1px solid rgba(20,20,19,.08); }
[data-page="settings"] .src-row:hover { background: rgba(20,20,19,.025); }
[data-page="settings"] .src-row:focus-within { background: rgba(16,108,202,.04); }
.src-mk { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--sunken); color: var(--ink); }
.src-mk svg { width: 17px; height: 17px; }
.src-row:has(input:not(:checked)) .src-mk { color: var(--ink-3); }
.src-t { min-width: 0; }
[data-page="settings"] .set-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 18px; }
.src-count { display: inline-block; line-height: 24px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--sunken); font-size: 13px; font-weight: 600; color: #4e4b45; }
/* email: where mail goes is the first row of the card */
.set-row-to { min-height: 0; padding-block: 14px; background: #fbfaf6; border-radius: 14px 14px 0 0; }
.set-row-to .set-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.set-row-to .set-desc { margin-top: 2px; font-size: 15px; }
.btn-ghost.btn-sm .arrow { width: 14px; height: 14px; }
/* inbox: a footer note, text on the shared column */
.set-card #inbox { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; padding: 14px 22px 16px; min-height: 0; background: #fbfaf6; border-radius: 0 0 14px 14px; }
#inbox .row-ico { width: 28px; height: 28px; margin-top: 1px; border-radius: 8px; background: #ebe8e0; color: #3f3e39; }
#inbox .row-ico svg { width: 15px; height: 15px; }
#inbox .set-label { font-size: 14px; }
#inbox .set-desc { max-width: 60ch; font-size: 14px; }
#inbox .set-ctl { align-self: center; }
/* session draft: an editor with its own actions */
.draft-fld .control { box-shadow: inset 0 0 0 1px rgba(20,20,19,.24); border-radius: 10px; }
.draft-fld .control:focus-within { box-shadow: inset 0 0 0 1px var(--accent), var(--focus-ring); }
.set-card .draft-fld .control textarea { padding: 12px 14px; font-size: 15px; line-height: 1.5; resize: none; }
.draft-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.draft-note { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; color: var(--ink-2); }
.draft-note svg { width: 14px; height: 14px; color: var(--ink-3); }
.btn.is-disabled { opacity: .45; pointer-events: none; }
/* shortcuts: icon keycaps (⌘ ↵ drawn, not font fallbacks) */
.keycaps .kbd { min-width: 26px; height: 26px; padding: 0 7px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink); }
.kbd-ico svg { width: 14px; height: 14px; stroke-width: 2; }
@media (hover: none) and (pointer: coarse) { .set-keys { display: none; } }

/* ================================== Account ================================== */
.id-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.avatar-xl { width: 64px; height: 64px; font-size: 22px; }
.id-mail { font-size: 15px; }
.id-mail .badge-success { height: 22px; padding: 0 8px; font-size: 12px; font-weight: 600; color: #0f5e3c; background: #e3f3ea; }
.id-facts > div { padding: 14px 24px; }
.id-facts dt { font-size: 13px; }
.id-facts dd { font-size: 15px; }
.fact-link { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink); font-weight: 500; border-radius: 6px; }
.fact-link .fact-sub { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.fact-link svg { width: 14px; height: 14px; align-self: center; color: var(--ink-3); transition: transform var(--d-2); }
.fact-link:hover svg { transform: translateX(2px); color: var(--ink); }
.set-row-ico .row-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(20,20,19,.1); }
.set-row-ico .row-ico svg { width: 18px; height: 18px; }
.set-row-ico .row-ico .conn-g { width: 18px; height: 18px; }
.set-row-ico { align-items: center; }
.set-row-ico .set-ctl { display: flex; align-items: center; gap: 10px; }
.set-row-ico.is-unavail .set-label { color: var(--ink-2); }
.set-row-ico.is-unavail .row-ico { color: var(--ink-3); background: transparent; }
#data .set-row-ico { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; align-items: start; }
#data .set-row-ico > .set-ctl { grid-column: 2; justify-content: flex-start; }
#data .set-desc { max-width: 64ch; }
#data .btn .file-badge { --s: 18px; transform: scale(.72); margin: -6px -4px -6px -6px; }
.set-danger .set-card { background: #fdf7f5; box-shadow: 0 0 0 1px rgba(181,71,58,.38); }
.set-danger .set-row { border: 0; }
.set-danger .set-desc { color: #4a3f3c; max-width: 60ch; }

/* ================================== Project settings ================================== */
.set-meta { gap: 8px; }
.set-meta > .meta-f { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.set-meta > .meta-f svg { width: 14px; height: 14px; color: var(--ink-3); }
.set-meta > .meta-f b { font-weight: 600; }
.set-meta > * + .meta-f::before { content: ""; width: 3px; height: 3px; margin-right: 4px; border-radius: 50%; background: var(--ink-3); }
.set-meta .role-chip { height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--sunken); color: #4e4b45; }
.set-meta .role-chip::before { display: none; }
.scope .select-trigger { box-shadow: 0 0 0 1px rgba(20,20,19,.12); }
.proj-card { grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; padding: 20px 22px; background: #fbfaf6; border-radius: 14px 14px 0 0; border-bottom: 1px solid rgba(20,20,19,.07); }
.proj-card .field-glyph { grid-row: span 2; }
.proj-q-k { font-size: 13px; color: var(--ink-2); }
.proj-q { font-size: 17px; line-height: 1.45; max-width: 64ch; text-wrap: balance; }
.set-ctl-wide { flex: none; width: min(360px, 100%); }
.ptitle-fld .control { min-height: 40px; }
.ro-val { gap: 8px; height: 36px; padding: 0 12px; border-radius: 9px; background: var(--sunken); font-weight: 500; }
.ro-lock { width: 14px; height: 14px; color: var(--ink-3); }
.acc-row { grid-template-columns: 96px minmax(0, 1fr) auto; }
.acc-row .av-stack { justify-self: start; }
.acc-row .acc-ico { justify-self: start; width: 36px; height: 36px; border-radius: 10px; background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(20,20,19,.1); }
.acc-link { margin-top: 6px; }
.acc-link .id-field { max-width: 360px; }

/* ================================== Sharing ================================== */
.set-meta .link-st::before { content: ""; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; background: var(--success); }
.set-meta .link-st { color: #0f5e3c; }
.set-card .linkbox { gap: 14px; padding: 20px 22px 0; }
.linkbox-url { font-size: 14px; font-weight: 500; letter-spacing: 0; }
.linkbox-host { color: var(--ink-2); }
.linkbox-foot { justify-content: space-between; }
.linkbox-foot .link-btn { color: var(--ink); }
.linkbox-reset { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px -22px 0; padding: 14px 22px 16px; border-top: 1px solid rgba(20,20,19,.07); background: #fbfaf6; border-radius: 0 0 14px 14px; }
.lr-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lr-text b { font-size: 14px; font-weight: 600; color: var(--ink); }
.lr-text .note { font-size: 13px; color: var(--ink-2); }
.minvite { grid-template-columns: minmax(0, 1fr) 132px auto; }
.inv-lab { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.minvite > .select, .minvite > .btn { margin-top: 25px; }
.minvite .btn:disabled { background: #e6e3db; color: #8a877f; box-shadow: none; }
.lens-bar { gap: 10px; }
.lens-url { height: 28px; line-height: 20px; font-size: 12px; color: var(--ink-2); }
.lens-url-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 2px; }
.lens-tag { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--raised); box-shadow: inset 0 0 0 1px rgba(20,20,19,.08); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.lens .cite { cursor: default; }
.lens-wrap { grid-template-columns: minmax(0, 1fr) 260px; }
.caps { align-self: start; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(20,20,19,.07); }
.caps-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #4e4b45; }
.caps-h svg { width: 14px; height: 14px; color: var(--ink-3); }
.caps-h.is-2 { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(20,20,19,.07); }
.caps li:not(.caps-h) { min-height: 32px; font-size: 14px; }
.caps .cannot { color: var(--ink); }

/* ================================== Billing ================================== */
.plan-now { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); row-gap: 0; padding: 26px 28px 0; box-shadow: inset 0 0 0 1px var(--night-edge), inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -26px rgba(5,15,40,.55); }
.plan-now::before { display: none; }
.pn-k { color: rgba(255,255,255,.74); font-size: 13px; }
.pn-meter .pn-k { margin-bottom: 8px; }
.pn-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.pn-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); font-size: 12px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.9); }
.pn-sub { color: rgba(255,255,255,.76); line-height: 1.5; max-width: 34ch; }
.pn-num .t-stat { font-family: var(--font-brand); font-weight: 500; font-size: 48px; font-variant-numeric: tabular-nums; }
.pn-num span:last-child { font-size: 15px; color: rgba(255,255,255,.8); }
.ph-units { height: 16px; gap: 4px; }
.ph-units i { border-radius: 4px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ph-units b { border-radius: 0; background: #f3e6c8; }
.ph-units b[style*="--f:.8"] { box-shadow: 1px 0 0 #fff; }
.pp-scale { color: rgba(255,255,255,.76); font-size: 13px; }
.pn-link { align-self: flex-start; min-height: 36px; margin-top: 10px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.pn-link:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.pn-link svg { transition: transform var(--d-2); }
.pn-link:hover svg { transform: translateY(2px); }
a.pp-foot { grid-column: 1 / -1; order: 2; display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 22px -28px 0; padding: 0 28px; border-top: 1px solid var(--night-edge); font-size: 14px; color: rgba(255,255,255,.8); border-radius: 0 0 var(--r-xl) var(--r-xl); transition: background var(--d-2); }
a.pp-foot b { color: #fff; font-weight: 600; }
a.pp-foot:hover { background: rgba(255,255,255,.05); }
.pp-foot-t { min-width: 0; }
.pp-chev { width: 16px; height: 16px; margin-left: auto; color: rgba(255,255,255,.7); }
/* plans: one radio-card group, one action below */
.plans { gap: 12px; }
.plan-card { padding: 18px 20px 20px; box-shadow: 0 0 0 1px rgba(20,20,19,.1), 0 1px 2px rgba(20,20,19,.04); cursor: pointer; }
.plan-card:hover { box-shadow: 0 0 0 1px rgba(20,20,19,.22), 0 8px 18px -14px rgba(20,20,19,.4); }
.plan-card::before { display: none; }
.plan-card.is-selected { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 5px rgba(20,20,19,.06); background: #fffefb; }
.plan-name { justify-content: flex-start; gap: 10px; font-size: 16px; }
.plan-radio { width: 20px; height: 20px; box-shadow: inset 0 0 0 1.5px #8a867c; }
.is-selected .plan-radio { box-shadow: inset 0 0 0 1.5px var(--ink), inset 0 0 0 5.5px #fff, inset 0 0 0 10px var(--ink); }
.plan-cur { margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: #e3f3ea; font-size: 12px; font-weight: 600; color: #0f5e3c; }
.plan-price { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 10px; padding-left: 30px; }
.plan-price .t-stat { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-k { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b675e; }
.plan-go { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 12px 12px 18px; border-radius: 12px; background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(20,20,19,.07); }
.plan-go-t { font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.plan-go .btn { flex: none; }
.terms { margin-top: 16px; padding: 18px 22px 0; }
.terms-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.terms-h span { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.terms-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ts { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 16px 18px 0; }
.ts:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: 36px; right: 8px; height: 1px; background: rgba(20,20,19,.12); }
.ts-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sunken); color: #4e4b45; }
.ts-ico svg { width: 14px; height: 14px; stroke-width: 2.2; }
.ts.is-ok .ts-ico { background: #e3f3ea; color: #0f5e3c; }
.ts.is-wait .ts-ico { background: #f8efd8; color: #7a4d0e; }
.ts-t { display: flex; flex-direction: column; gap: 2px; }
.ts-t b { font-size: 15px; font-weight: 600; color: var(--ink); }
.ts-t span { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ts .term-st { align-self: flex-start; margin-top: auto; }
.terms-note { align-items: flex-start; margin: 0 -22px; padding: 12px 22px 14px; border-top: 1px solid rgba(20,20,19,.07); background: #fbfaf6; font-size: 13px; line-height: 1.5; }
.terms-note svg { color: var(--ink-3); margin-top: 2px; }
/* usage */
.use-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #0f5e3c; }
.use-note svg { width: 15px; height: 15px; }
.usage-table th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b675e; }
.ut { align-items: center; gap: 12px; border-radius: 8px; }
.ut .field-glyph { --s: 32px; border-radius: 9px; }
.ut-text .id { font-size: 13px; color: #5c5952; letter-spacing: 0; }
.ut-date { display: none; }
.ut-chev { width: 15px; height: 15px; margin-left: 4px; color: var(--ink-3); opacity: 0; transition: opacity var(--d-2), transform var(--d-2); }
.ut:hover .ut-chev, .ut:focus-visible .ut-chev { opacity: 1; transform: translateX(2px); }
.usage-table tbody tr { transition: background var(--d-2); }
.usage-table tbody tr:hover { background: rgba(20,20,19,.025); }
.u-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.u-bar { position: relative; width: 48px; height: 6px; border-radius: 3px; background: #ebe8e0; overflow: hidden; }
.u-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--u) * 100%); border-radius: inherit; background: var(--ink); }
.u-bar.is-live i { background: var(--accent); }
.u-n { min-width: 34px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.u-n small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); line-height: 1.2; }
.usage-table tfoot td { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid rgba(20,20,19,.1); font-size: 14px; color: var(--ink-2); }
.usage-table tfoot td:first-child { padding-left: 22px; }
.usage-table tfoot td:last-child { padding-right: 22px; }
.usage-table tfoot b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* payment: the same methods checkout will offer, as a preview */
.pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 14px; }
.pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 22px 20px; }
.pay-m { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'marks radio' 'label label'; align-items: center; gap: 10px 12px; min-height: 64px; padding: 12px 14px 14px; border-radius: 10px; background: var(--raised); box-shadow: inset 0 0 0 1px #e3ded3; cursor: default; }
.pay-marks { grid-area: marks; display: inline-flex; gap: 4px; }
.pay-radio { grid-area: radio; }
.pay-l { grid-area: label; }
.pm { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,20,19,.12); }
.pm svg { display: block; width: 32px; height: 14px; overflow: visible; }
.pm-mc svg { width: 26px; height: 16px; }
.pm-pp { width: 58px; } .pm-pp svg { width: 46px; }
.pm-toss { width: 50px; } .pm-toss svg { width: 36px; }
.pay-l { display: flex; flex-direction: column; min-width: 0; }
.pay-l b { font-size: 15px; font-weight: 600; color: var(--ink); }
.pay-l span { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-radio { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #b9b4a8; }
.pay-row { min-height: 0; padding-block: 14px; }
.pay-row .none { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--sunken); font-size: 12px; font-weight: 600; color: #4e4b45; }

/* ================================== ≤1100 / phone page blocks ================================== */
@media (max-width: 1099px) {
  .terms-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .ts:nth-child(2)::after { display: none; }
  .pay-methods { grid-template-columns: minmax(0, 1fr); }
  .lens-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* preferences */
  [data-page="settings"] .set-live { padding: 14px 16px 16px; }
  [data-page="settings"] .lp-ports { margin-top: 56px; gap: 4px; }
  [data-page="settings"] .lp-port { height: auto; padding: 0; gap: 6px; box-shadow: none; background: none; }
  .lp-port .lp-dot { display: block; }
  .lp-mk { display: none; }
  [data-page="settings"] .lp-port b { overflow: visible; white-space: nowrap; font-size: 12px; line-height: 1.3; letter-spacing: -.01em; }
  [data-page="settings"] .src-list { grid-template-columns: minmax(0, 1fr); margin: 0 16px 16px; }
  [data-page="settings"] .src-row:nth-child(2n) { box-shadow: none; }
  [data-page="settings"] .src-row:nth-child(n+2) { border-top: 1px solid rgba(20,20,19,.08); }
  .set-row-to { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .set-row-to .set-ctl { width: auto; }
  .set-row-to .btn { --btn-h: 44px; padding-inline: 10px; }
  .set-card #inbox { grid-template-columns: 28px minmax(0, 1fr); padding: 14px 16px 16px; }
  #inbox > .set-ctl { grid-column: 1 / -1; margin-top: 12px; }
  .set-page .set-row:has(> .set-ctl > .switch:only-child) { align-items: start; }
  .set-page .set-row:has(> .set-ctl > .switch:only-child) .set-ctl { margin-top: -10px; }
  .draft-foot { flex-wrap: wrap; }
  .draft-note { flex-basis: 100%; margin-bottom: 4px; }
  .draft-foot .btn { --btn-h: 44px; }
  .draft-foot .btn-secondary { flex: 1; }
  /* account */
  .id-card { grid-template-columns: 56px minmax(0, 1fr); }
  .avatar-xl { width: 56px; height: 56px; font-size: 20px; }
  .id-who { align-self: center; }
  .id-mail { font-size: 14px; }
  .id-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .id-actions .btn { --btn-h: 44px; padding-inline: 8px; }
  .id-facts > div { min-height: 52px; padding: 12px 18px; }
  .set-row-ico { grid-template-columns: 36px minmax(0, 1fr); align-items: start; padding: 16px; }
  .set-row-ico > .set-ctl { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .set-row-ico > .set-ctl .btn { flex: none; --btn-h: 40px; }
  .set-row-ico .row-ico { margin-top: 1px; }
  #data .set-row-ico > .set-ctl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #data .set-row-ico > .set-ctl .btn { --btn-h: 44px; }
  .set-danger .set-row { padding: 16px; }
  /* project */
  .set-meta { gap: 8px 10px; }
  .scope { flex-basis: 100%; }
  .scope .select-trigger { width: 100%; max-width: none; justify-content: space-between; }
  .proj-card { padding: 16px; grid-template-columns: minmax(0, 1fr); }
  .proj-card .field-glyph { --s: 36px; grid-row: auto; margin-bottom: 6px; }
  .proj-q { font-size: 16px; }
  .set-ctl-wide { width: 100%; }
  .ro-val { height: 32px; }
  .acc-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .acc-row > .btn { grid-column: 1; --btn-h: 44px; justify-content: space-between; }
  .acc-link .id-field { max-width: 100%; height: 44px; }
  .id-field .icon-btn { width: 40px; height: 40px; }
  /* share */
  .linkbox-field { padding: 12px 12px 12px 14px; }
  .linkbox-foot { flex-wrap: nowrap; }
  .linkbox-reset { flex-direction: column; align-items: stretch; margin-inline: -16px; padding: 14px 16px 16px; }
  .linkbox-reset .btn { --btn-h: 44px; }
  .set-card .linkbox { padding: 16px 16px 0; }
  .minvite { grid-template-columns: minmax(0, 1fr) 104px; row-gap: 8px; }
  .minvite .fld { grid-column: 1 / -1; }
  .minvite > .select, .minvite > .btn { margin-top: 0; }
  .minvite > .select { grid-column: 1; }
  .minvite > .btn { grid-column: 2; --btn-h: 44px; }
  .lens-dots { display: none; }
  .lens-bar { padding: 8px 12px; }
  .caps { padding: 14px 16px; }
  .caps li:not(.caps-h) { min-height: 36px; }
  /* billing */
  .plan-now { padding: 20px 18px 0; }
  .pn-num .t-stat { font-size: 40px; }
  .pn-sub { display: block; font-size: 13px; }
  a.pp-foot { margin: 18px -18px 0; padding: 0 18px; min-height: 52px; font-size: 13px; }
  .plans { gap: 8px; }
  .plan-card { display: block; padding: 14px 16px; }
  .plan-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 32px; }
  .plan-name { grid-column: 1; flex-direction: row; justify-content: flex-start; }
  .plan-cur { margin-left: 4px; }
  .plan-price { grid-column: 2; grid-row: 1; flex-direction: row; align-items: baseline; gap: 6px; margin: 0; padding: 0; }
  .plan-price .t-stat { font-size: 22px; }
  .plan-k { display: none; }
  .plan-go { flex-direction: column; align-items: stretch; padding: 14px; }
  .plan-go .btn { --btn-h: 48px; justify-content: center; }
  .terms { padding: 16px 16px 0; }
  .terms-steps { grid-template-columns: minmax(0, 1fr); }
  .ts { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 0 0 14px; }
  .ts::after { display: none; }
  .ts .term-st { grid-column: 2; }
  .terms-note { margin: 0 -16px; padding: 12px 16px 14px; }
  .use-sum { flex-direction: column; align-items: flex-start; }
  .usage-table tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "study status" "study bill"; padding: 12px 16px; row-gap: 4px; }
  .usage-table td:nth-child(1) { display: none; }
  .usage-table td:nth-child(5) { grid-area: bill; justify-self: end; }
  .ut-date { display: inline; }
  .ut-chev { display: none; }
  .ut { min-height: 44px; }
  .usage-table tfoot { display: block; }
  .usage-table tfoot tr { display: flex; justify-content: space-between; padding: 12px 16px; border-top: 1px solid rgba(20,20,19,.1); }
  .usage-table tfoot td, .usage-table tfoot td:first-child, .usage-table tfoot td:last-child { padding: 0; border: 0; }
  .pay-head { padding: 16px; }
  .pay-methods { padding: 0 16px 16px; }
  .pay-row.set-row-ico { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; }
  .pay-row.set-row-ico > .set-ctl { grid-column: 3; }
}


/* audit fix B · phone/tablet corrections after iteration 2 */
@media (max-width: 1024px) {
  .plan-now { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .plan-now .pn-meter { order: 0; }
  .plan-now .pn-plan { order: 1; margin-top: 20px; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--night-edge); }
  .pn-link { display: inline-flex; }
  .set-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 640px) {
  .ts .term-st { justify-self: start; }
  .usage-table tfoot td:nth-child(1) { display: block; }
  .set-row-to { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .set-row-to .set-ctl { justify-content: flex-start; margin-left: -10px; }
  .pn-sub { max-width: none; }
}


@media (max-width: 640px) {
  .linkbox-field { flex-direction: row; align-items: center; min-height: 52px; padding: 4px 4px 4px 14px; gap: 8px; }
  .linkbox-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .linkbox-copy { --btn-h: 44px; width: auto; min-width: 0; padding-inline: 14px; }
}


/* audit fix B · gate pass: one size scale, 44px phone targets */
.pn-name { font-size: 32px; }
[data-page="settings"] .btn.is-disabled { opacity: 1; background: #ebe8e0; color: #8a867c; box-shadow: none; }
@media (max-width: 640px) {
  .pn-name { font-size: 22px; }
  .id-field .icon-btn { width: 44px; height: 44px; }
  .id-field { height: 46px; }
  .fact-link { display: inline-flex; align-items: center; min-height: 44px; }
  .set-row-ico > .set-ctl .btn, .set-row-ico > .set-ctl .btn-sm { --btn-h: 44px; }
  #inbox .btn, .set-row .set-ctl > .btn { --btn-h: 44px; }
  .pn-link { min-height: 44px; }
  .plan-pick { min-height: 44px; }
  .mrow .icon-btn.rm { width: 44px; height: 44px; }
}

/* audit fix B · ink: no clipping box around the source list; corners carried by the rows */
[data-page="settings"] .src-list { overflow: visible; }
[data-page="settings"] .src-row:nth-child(1) { border-top-left-radius: 12px; }
[data-page="settings"] .src-row:nth-child(2) { border-top-right-radius: 12px; }
[data-page="settings"] .src-row:nth-child(3) { border-bottom-left-radius: 12px; }
[data-page="settings"] .src-row:nth-child(4) { border-bottom-right-radius: 12px; }
@media (max-width: 640px) {
  [data-page="settings"] .src-row:nth-child(n) { border-radius: 0; }
  [data-page="settings"] .src-row:first-child { border-radius: 12px 12px 0 0; }
  [data-page="settings"] .src-row:last-child { border-radius: 0 0 12px 12px; }
  .linkbox-url { line-height: 1.6; padding-block: 2px; }
}
/* audit fix B · the settings sidebar keeps the run budget (status, not navigation) except on Billing, where the hero is that budget */
.app-side.is-settings .side-foot > .budget { display: block; }
[data-page="billing"] .app-side.is-settings .side-foot > .budget { display: none; }
.set-page .app-head-lede { max-width: 64ch; text-wrap: pretty; }
/* audit fix B · iteration 4 */
.set-ctl-wide { width: 360px; max-width: 100%; }
.set-side .set-scope .sc-n { white-space: normal; text-overflow: clip; }
.lens .fp { max-width: 460px; }
@media (max-width: 640px) { .set-ctl-wide { width: 100%; } }
.app-side.is-settings .set-side .set-scope .sc-t > .sc-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }
@media (max-width: 640px) {
  .linkbox-url { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .mrow-who > span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
.set-page .app-head-lede { flex: 0 0 100%; max-width: none; padding-right: max(0px, calc(100% - 66ch)); }
@media (max-width: 640px) {
  .mrow-who > span { overflow-wrap: normal; font-size: 13px; }
  .mrow { column-gap: 10px; padding: 10px 4px 10px 14px; }
  .mrow .avatar { width: 36px; height: 36px; font-size: 13px; }
  .mrow { grid-template-columns: 36px minmax(0, 1fr) auto 44px; }
  .mrow-role .select-trigger { padding: 0 6px 0 10px; }
}