/* Accounts pages (sign in, sign up, recovery, settings). All values come from tokens.css; corners and chips are 3px. */
body[data-page^="account-"] main { max-width: 560px; padding-top: var(--space-8); }
.acct-card { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-card); border: var(--stroke-hairline) solid var(--border-subtle); border-radius: var(--radius-ui); }
.acct-card h1 { margin: 0; font: 600 clamp(1.5rem, 3vw, 1.9rem)/1.2 var(--font-display); text-wrap: balance; }
.acct-card h2 { margin: 0 0 var(--space-3); font: 600 17px/24px var(--font-ui); }
.acct-lead { margin: 0; color: var(--text-secondary); text-wrap: pretty; }
.acct-lead b, .acct-alt b { color: var(--text-primary); font-weight: 600; }
.acct-field { display: grid; gap: var(--space-1); }
.acct-f { font: var(--type-small); font-weight: 600; }
.acct-hint { font: var(--type-small); color: var(--text-secondary); text-wrap: pretty; }
.acct-in { display: block; width: 100%; min-height: var(--control-h); padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-page); color: var(--text-primary); font: var(--type-body); }
.acct-in:disabled { color: var(--text-disabled); }
.acct-pw { position: relative; }
.acct-pw .acct-in { padding-right: 64px; }
.acct-pw-toggle { position: absolute; top: 50%; right: 6px; translate: 0 -50%; min-height: 28px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-card); color: var(--text-secondary); font: 600 12px/20px var(--font-ui); cursor: pointer; }
.acct-pw-toggle:hover { color: var(--text-primary); }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.acct-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: transparent; color: var(--text-primary); font: 600 14px/20px var(--font-ui); cursor: pointer; transition: background var(--duration-fast) var(--ease); }
.acct-btn:hover { background: var(--surface-raised); }
.acct-btn:disabled { color: var(--text-disabled); cursor: not-allowed; }
.acct-btn-main { border-color: var(--text-primary); background: var(--text-primary); color: var(--surface-page); }
.acct-btn-main:hover { background: color-mix(in srgb, var(--text-primary) 86%, var(--accent)); }
.acct-btn-main:disabled { background: var(--text-disabled); border-color: var(--text-disabled); color: var(--surface-page); }
.acct-link { font: var(--type-small); }
.acct-alt, .acct-small, .acct-cancel { margin: 0; font: var(--type-small); color: var(--text-secondary); text-wrap: pretty; }
.acct-cancel { margin-top: var(--space-4); text-align: center; }
.acct-msg { border-left: var(--stroke-indicator) solid var(--border-strong); border-radius: var(--radius-ui); background: var(--surface-raised); font: var(--type-small); }
.acct-msg-error { border-left-color: var(--signal-red); }
.acct-msg-done { border-left-color: var(--verde); }
.acct-msg-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); }
.acct-msg-k { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.acct-msg-fold { min-height: 24px; padding: 0 8px; border: 0; border-radius: var(--radius-ui); background: transparent; color: var(--text-secondary); font: 600 12px/20px var(--font-ui); cursor: pointer; }
.acct-msg-fold:hover { background: var(--surface-card); color: var(--text-primary); }
.acct-msg-body { padding: 0 var(--space-3) var(--space-2); }
.acct-toggles { display: grid; gap: var(--space-2); }
.acct-toggle { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--stroke-hairline) solid var(--border-subtle); border-radius: var(--radius-ui); cursor: pointer; }
.acct-toggle:hover { background: var(--surface-raised); }
.acct-toggle input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--text-primary); }
.acct-toggle-tx { display: flex; flex-direction: column; gap: 2px; }
.acct-toggle-tx b { font-weight: 600; }
.acct-toggle-tx span { font: var(--type-small); color: var(--text-secondary); text-wrap: pretty; }
.acct-settings { gap: var(--space-6); }
.acct-sec { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--stroke-hairline) solid var(--border-subtle); }
.acct-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .acct-two { grid-template-columns: 1fr; } .acct-card { padding: var(--space-4); } }
.acct-card :is(button, a, input):focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* My collection */
.acct-coll-tool { --edge: var(--cobalt); display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: var(--stroke-hairline) solid var(--border-subtle); border-left: 3px solid var(--edge); border-radius: var(--radius-ui); }
.acct-coll-tool[data-accent="sky"] { --edge: var(--sky); } .acct-coll-tool[data-accent="amber"] { --edge: var(--amber); }
.acct-coll-tool[data-accent="verde"] { --edge: var(--verde); } .acct-coll-tool[data-accent="rose"] { --edge: var(--rose); }
.acct-coll-tool[data-accent="orchid"] { --edge: var(--orchid); }
.acct-coll-head { display: flex; align-items: center; gap: var(--space-3); margin: 0; font: 700 17px/24px var(--font-ui); }
.acct-coll-head img { flex: none; border-radius: var(--radius-ui); background: var(--surface-logo); }
.acct-coll-head a { text-decoration: none; }
.acct-coll-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.acct-coll-domain { font: 400 13px/20px var(--font-code); color: var(--text-secondary); }
.acct-coll-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.acct-coll-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h); padding: 0 var(--space-2); border-radius: var(--radius-ui); }
.acct-coll-item:hover { background: var(--surface-raised); }
.acct-coll-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.acct-coll-when { font: var(--type-small); color: var(--text-secondary); white-space: nowrap; }
.acct-coll-rm { min-height: 28px; padding: 0 var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: transparent; color: var(--text-secondary); font: 600 12px/20px var(--font-ui); cursor: pointer; }
.acct-coll-rm:hover { color: var(--text-primary); background: var(--surface-card); }
@media (max-width: 480px) { .acct-coll-item { flex-wrap: wrap; } .acct-coll-when { display: none; } }

/* reviewer application and the admin queue */
.acct-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.acct-chip { min-height: var(--control-h-sm); padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: transparent; color: var(--text-primary); font: 600 13px/20px var(--font-ui); cursor: pointer; }
.acct-chip:hover { background: var(--surface-raised); }
.acct-chip[aria-pressed="true"] { border-color: var(--text-primary); background: var(--text-primary); color: var(--surface-page); }
.acct-terms { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); font: var(--type-small); color: var(--text-secondary); }
.acct-terms b { color: var(--text-primary); font-weight: 600; }
select.acct-in { appearance: auto; }
.acct-app { border-left: 3px solid var(--border-strong); padding-left: var(--space-3); }
.acct-app[data-status="approved"] { border-left-color: var(--verde); }
.acct-app[data-status="rejected"] { border-left-color: var(--ember); }

/* institution suggestions */
.acct-inst { position: relative; }
.acct-inst-list { position: absolute; z-index: 3; top: calc(100% - 20px); left: 0; right: 0; margin: 0; padding: var(--space-1); list-style: none; max-height: 320px; overflow: auto; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); box-shadow: 0 8px 24px color-mix(in srgb, #000 18%, transparent); }
.acct-inst-item { display: flex; flex-direction: column; gap: 1px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-ui); cursor: pointer; }
.acct-inst-item:hover, .acct-inst-item[data-active="true"] { background: var(--surface-raised); }
.acct-inst-item b { font-weight: 600; }
.acct-inst-item span { font: var(--type-small); color: var(--text-secondary); }

/* the row of page buttons on settings, and the review dashboard */
.acct-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.acct-coll-item[data-stale="true"] .acct-coll-title { color: var(--ember); }
.acct-coll-item[data-waiting="true"] { color: var(--text-secondary); }

/* admin pages */
body[data-page^="account-admin"] main { max-width: 980px; }
.acct-admin .acct-nav a[aria-current="page"] { border-color: var(--text-primary); background: var(--text-primary); color: var(--surface-page); }
.acct-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.acct-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: var(--stroke-hairline) solid var(--border-subtle); border-left: 3px solid var(--cobalt); border-radius: var(--radius-ui); text-decoration: none; }
.acct-tile:hover { background: var(--surface-raised); }
.acct-tile b { font: 700 24px/28px var(--font-ui); font-variant-numeric: tabular-nums; }
.acct-tile span { font: var(--type-small); color: var(--text-secondary); }
.acct-in-sm { width: auto; min-height: var(--control-h-sm); padding: 4px 8px; display: inline-block; margin-left: var(--space-1); }
.acct-in-grow { flex: 1; min-width: 160px; }
.acct-link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.acct-report { border-left: 3px solid var(--border-strong); padding-left: var(--space-3); }
.acct-report[data-status="new"] { border-left-color: var(--amber); }
.acct-report[data-status="verified"] { border-left-color: var(--sky); }
.acct-report[data-status="fixed"] { border-left-color: var(--verde); }
.acct-report[data-status="rejected"], .acct-report[data-status="duplicate"] { border-left-color: var(--border-strong); opacity: .8; }
.acct-report-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.acct-report-text { margin: 0; white-space: pre-wrap; }
.acct-chip-static { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-ui); font: var(--type-small); color: var(--text-secondary); }
.acct-shot { max-width: 100%; border: var(--stroke-hairline) solid var(--border-subtle); border-radius: var(--radius-ui); }
.acct-pre { margin: 0; padding: var(--space-2) var(--space-3); overflow: auto; max-height: 240px; background: var(--surface-raised); border-radius: var(--radius-ui); font: 12px/18px var(--font-code); }
.acct-table-wrap { overflow: auto; }
.acct-table { width: 100%; border-collapse: collapse; font: var(--type-small); }
.acct-table th { text-align: left; font-weight: 600; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.acct-table td { padding: var(--space-1) var(--space-2); border-bottom: var(--stroke-hairline) solid var(--border-subtle); vertical-align: top; font-variant-numeric: tabular-nums; }
.acct-table td[data-warn="true"] { color: var(--ember); font-weight: 600; }
.acct-table code { font: 11px/16px var(--font-code); overflow-wrap: anywhere; }
.acct-bar { display: inline-block; width: 64px; height: 8px; vertical-align: middle; margin-right: 6px; background: var(--surface-raised); border-radius: var(--radius-ui); overflow: hidden; }
.acct-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--verde); }

/* visits charts: one hue for one measure; the dark step is set below once validated */
:root { --viz: var(--cobalt); --viz-soft: color-mix(in srgb, var(--cobalt) 70%, var(--surface-card)); }
:root[data-theme="dark"] { --viz: var(--viz-dark); --viz-soft: color-mix(in srgb, var(--viz-dark) 70%, var(--surface-card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --viz: var(--viz-dark); --viz-soft: color-mix(in srgb, var(--viz-dark) 70%, var(--surface-card)); } }
:root { --viz-dark: #1F93D1; }
.viz { margin: 0; display: grid; gap: var(--space-2); }
.viz-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font: var(--type-small); }
.viz-head b { font: 600 15px/20px var(--font-ui); }
.viz-plot { position: relative; }
.viz-plot svg { display: block; width: 100%; height: auto; }
.viz-grid { stroke: var(--border-subtle); stroke-width: 1; }
.viz-tick { fill: var(--text-secondary); font: 11px var(--font-ui); }
.viz-bar { fill: var(--viz); }
.viz-bar[data-hover="true"] { fill: var(--viz-soft); }
.viz-cross { stroke: var(--text-secondary); stroke-width: 1; pointer-events: none; }
.viz-tip { position: absolute; top: 4px; transform: translateX(-50%); padding: var(--space-1) var(--space-2); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); font: var(--type-small); color: var(--text-secondary); pointer-events: none; white-space: nowrap; }
.viz-tip b { color: var(--text-primary); font-weight: 600; }
.viz-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-5); }
.viz-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.viz-row { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; align-items: center; gap: var(--space-2); font: var(--type-small); }
.viz-row:hover .viz-track i { background: var(--viz-soft); }
.viz-key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-key small { color: var(--text-secondary); }
.viz-track { height: 10px; background: var(--surface-raised); border-radius: var(--radius-ui); overflow: hidden; }
.viz-track i { display: block; height: 100%; background: var(--viz); border-radius: 0 var(--radius-ui) var(--radius-ui) 0; }
.viz-val { font-variant-numeric: tabular-nums; }
.acct-btn[aria-pressed="true"] { border-color: var(--text-primary); background: var(--text-primary); color: var(--surface-page); }

/* credit: tiers in one hue with pips, chips, boards, progress */
body[data-page="account-credits"] main { max-width: 760px; }
.acct-tier { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--cobalt); border-radius: var(--radius-ui); color: var(--cobalt); font: 600 12px/20px var(--font-ui); white-space: nowrap; }
.acct-pips { display: inline-flex; gap: 3px; }
.acct-pips i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid currentColor; }
.acct-pips i[data-on="true"] { background: currentColor; }
.acct-chip-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.acct-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acct-board-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-2); border-radius: var(--radius-ui); }
.acct-board-row[data-you="true"] { background: var(--surface-raised); }
.acct-board-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.acct-board-pts { font: 600 15px/20px var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct-board-chips:empty { display: none; }
.acct-board-chips { grid-column: 1 / -1; }
.acct-prog { display: grid; gap: 4px; }
.acct-prog-bar { display: block; height: 8px; background: var(--surface-raised); border-radius: var(--radius-ui); overflow: hidden; }
.acct-prog-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--cobalt); }
.acct-contrib { display: grid; gap: 2px; padding: var(--space-2) 0; }
.acct-contrib b { font-weight: 600; }
.acct-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.acct-credits h3 { margin: 0; }
.acct-board-name a, .acct-contrib a { color: inherit; text-decoration: none; }
.acct-board-name a:hover, .acct-contrib a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* profiles */
.acct-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-ui); background: var(--surface-raised); object-fit: cover; }
.acct-avatar-initials { color: var(--text-secondary); font-weight: 700; font-family: var(--font-ui); letter-spacing: .02em; }
.acct-person-head { display: flex; gap: var(--space-4); align-items: flex-start; }
.acct-person-head > div { display: grid; gap: var(--space-2); min-width: 0; }
.acct-person-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acct-person-deg { font: 600 clamp(1.1rem, 2.2vw, 1.3rem)/1.3 var(--font-ui); color: var(--text-secondary); }
.acct-verified { display: inline-flex; color: var(--cobalt); }
.acct-person-bio { margin: 0; white-space: pre-wrap; text-wrap: pretty; }
.acct-person-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
textarea.acct-in { resize: vertical; min-height: 96px; }
.acct-captcha:empty { display: none; }
.acct-captcha { min-height: 65px; }
.acct-btn input[type="file"] { display: none; }
@media (max-width: 480px) { .acct-person-head { flex-direction: column; } }