/* Account + public profile pages (doc/design/account-redesign.pdf).
Scoped under .acct-* so nothing here leaks into the rest of the site. */

.acct-page {
  --acct-bg: #0c0b10;
  --acct-card: #15141b;
  --acct-raised: #1c1b23;
  --acct-border: #26252e;
  --acct-border-strong: #3a3845;
  --acct-text: #f4f3ef;
  --acct-text-2: #b4b2bd;
  --acct-muted: #a3a1ad;
  --acct-accent: #7de2b8;
  --acct-warn: #f3c77a;
  --acct-danger: #f2a08a;
  background: var(--acct-bg);
}
.acct-page .ds-app { background: var(--acct-bg); }

/* Account pages keep a plain, solid, full-width header (as in the design)
instead of shrinking into the floating pill on scroll: the translucent
pill let content show through it and competed with the sticky tabs. */
.acct-page .ds-navwrap,
.acct-page .ds-navwrap.ds-navwrap-scrolled {
  background: var(--acct-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: 100;
  max-width: 100%;
  margin-top: 0;
  border-radius: 0;
  border-color: transparent;
  border-bottom-color: var(--acct-border);
}

/* "You are here": a ring on the avatar while in your account. */
.ds-navaccount-trigger.is-current { border-color: var(--acct-accent, #7de2b8); }
.ds-navaccount-menu a[aria-current="page"] { color: var(--color-ink); background: var(--color-fill-translucent); }

.acct-wrap { max-width: 1400px; margin: 0 auto; padding: 16px 40px 96px; color: var(--acct-text); }
@media (max-width: 900px) { .acct-wrap { padding: 12px 16px 72px; } }

/* A label for where you are, not a hero headline: account pages are
revisited constantly, so the space goes to content. */
.acct-title { font-size: 28px; line-height: 1.2; letter-spacing: -.01em; font-weight: 500; margin: 0; white-space: nowrap; }

/* Title + tabs share one row that sticks just under the 74px site header. */
.acct-head { display: flex; align-items: center; gap: 28px; position: sticky; top: 74px; z-index: 50; margin: 0 -40px 20px; padding: 10px 40px; background: var(--acct-bg); border-bottom: 1px solid transparent; transition: border-color .15s; }
.acct-head.is-stuck { border-bottom-color: var(--acct-border); }
@media (max-width: 900px) {
  .acct-head { margin: 0 -16px 16px; padding: 8px 16px; }
  /* Phones: the selected tab already names the section; keep the title
     for screen readers only. */
  .acct-head .acct-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Tabs */
.acct-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tab { min-height: 44px; padding: 0 20px; border-radius: 9999px; border: 1px solid var(--acct-border-strong); background: transparent; color: var(--acct-text); font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
.acct-tab[aria-selected="true"] { background: var(--acct-text); color: var(--acct-bg); border-color: var(--acct-text); font-weight: 500; }

/* Layout */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.acct-grid-single { grid-template-columns: minmax(0, 880px); }
.acct-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (max-width: 1100px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }
.acct-page [hidden] { display: none !important; }

/* Cards */
.acct-card { background: var(--acct-card); border: 1px solid var(--acct-border); border-radius: 20px; padding: 28px; }
@media (max-width: 900px) { .acct-card { padding: 20px; } }
.acct-card-dashed { background: transparent; border-style: dashed; }
.acct-card-danger { border-color: rgba(242, 160, 138, .35); }
.acct-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.acct-h2 { font-size: 20px; font-weight: 500; margin: 0; }
.acct-muted { color: var(--acct-text-2); font-size: 14px; line-height: 1.55; }
.acct-small { color: var(--acct-muted); font-size: 13px; }
.acct-link { background: none; border: none; padding: 0; color: var(--acct-text-2); text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; }
.acct-link:hover { color: var(--acct-text); }
.acct-error { color: var(--acct-danger); font-size: 13px; margin-top: 8px; }

/* Hero */
.acct-hero { display: flex; gap: 24px; align-items: center; }
.acct-hero-body { flex: 1; min-width: 0; }
.acct-hero-actions { display: flex; flex-direction: column; gap: 10px; min-width: 160px; }
@media (max-width: 700px) {
  .acct-hero { flex-wrap: wrap; }
  .acct-hero-actions { width: 100%; }
}
.acct-avatar { width: 56px; height: 56px; border-radius: 50%; background: #2a2933; color: var(--acct-text); display: flex; align-items: center; justify-content: center; font-weight: 500; flex-shrink: 0; }
.acct-avatar-lg { width: 92px; height: 92px; font-size: 28px; }
@media (max-width: 700px) { .acct-avatar-lg { width: 60px; height: 60px; font-size: 20px; } }
.acct-name { font-size: 28px; font-weight: 500; margin: 0; }
.acct-sub { color: var(--acct-text-2); font-size: 15px; margin-top: 6px; }
.acct-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.acct-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9999px; border: 1px solid rgba(125, 226, 184, .35); background: rgba(125, 226, 184, .07); color: var(--acct-accent); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.acct-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Buttons */
.acct-btn { min-height: 44px; padding: 0 20px; border-radius: 9999px; font: inherit; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.acct-btn:disabled { opacity: .55; cursor: default; }
.acct-btn-primary { background: var(--acct-text); color: var(--acct-bg); border: 1px solid var(--acct-text); font-weight: 500; }
.acct-btn-secondary { background: transparent; color: var(--acct-text); border: 1px solid var(--acct-border-strong); }
.acct-btn-secondary:hover { border-color: var(--acct-muted); }
.acct-btn-warn { background: transparent; color: var(--acct-warn); border: 1px solid rgba(243, 199, 122, .4); }
.acct-btn-danger { background: transparent; color: var(--acct-danger); border: 1px solid rgba(242, 160, 138, .5); }
.acct-btn-block { width: 100%; }
.acct-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 9999px; font-size: 15px; }
.acct-pill-open { color: var(--acct-text); border: 1px solid rgba(125, 226, 184, .45); background: rgba(125, 226, 184, .08); }
button.acct-pill { font: inherit; cursor: pointer; background: transparent; color: var(--acct-text-2); border: 1px solid var(--acct-border-strong); }
button.acct-pill[aria-pressed="true"] { color: var(--acct-text); border-color: rgba(125, 226, 184, .45); background: rgba(125, 226, 184, .08); }
.acct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acct-accent); }
button.acct-pill[aria-pressed="false"] .acct-dot { background: var(--acct-muted); }

/* Chips */
.acct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-chip { min-height: 36px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--acct-border-strong); background: transparent; color: var(--acct-text); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.acct-chip-static { cursor: default; }
.acct-chip.is-selected { background: var(--acct-text); color: var(--acct-bg); border-color: var(--acct-text); }
.acct-chip.is-selected::before { content: "✓"; }
.acct-chip-sm { min-height: 32px; padding: 0 12px; }
@media (pointer: coarse) { .acct-chip { min-height: 44px; } }

/* Application rows */
.acct-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.acct-apps { display: flex; flex-direction: column; }
.acct-app { border-top: 1px solid var(--acct-border); padding: 20px 0; }
.acct-app-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 250px 150px; gap: 16px; align-items: center; }
@media (max-width: 800px) {
  .acct-app-row { grid-template-columns: 44px minmax(0, 1fr); }
  .acct-app-stage, .acct-app-meta { grid-column: 1 / -1; }
  .acct-app-meta { text-align: left !important; }
}
.acct-logo { width: 44px; height: 44px; border-radius: 10px; background: var(--acct-raised); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 14px; color: var(--acct-text-2); }
.acct-app-title { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.acct-app-title a { color: inherit; text-decoration: none; }
.acct-app-title a:hover { text-decoration: underline; }
.acct-app-platform { color: var(--acct-text-2); font-size: 14px; margin-top: 2px; }
.acct-stagebar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.acct-stagebar span { height: 4px; border-radius: 2px; background: #2a2933; }
.acct-stagebar span.on { background: var(--acct-accent); }
.acct-stagebar.is-first span.on { background: var(--acct-text); }
.acct-stagebar.is-review span.on { background: var(--acct-warn); }
.acct-stagelabel { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--acct-text-2); }
.acct-stagelabel .stage { color: var(--acct-accent); }
.acct-stagelabel .stage.first { color: var(--acct-text); }
.acct-stagelabel .stage.review { color: var(--acct-warn); }
.acct-stagelabel .stage.rejected { color: var(--acct-danger); }
.acct-app-meta { text-align: right; font-size: 14px; }
.acct-app-meta .acct-small { margin-top: 2px; }
.acct-app-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0 60px; }
@media (max-width: 800px) { .acct-app-tools { margin-left: 0; } }
.acct-select { min-height: 44px; border-radius: 9999px; border: 1px solid var(--acct-border-strong); background: var(--acct-bg); color: var(--acct-text); padding: 0 14px; font: inherit; font-size: 14px; }
.acct-confirm { margin: 14px 0 0 60px; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(243, 199, 122, .35); background: rgba(243, 199, 122, .06); color: var(--acct-warn); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
@media (max-width: 800px) { .acct-confirm { margin-left: 0; } }
.acct-empty { border-top: 1px solid var(--acct-border); padding: 24px 0 4px; color: var(--acct-text-2); font-size: 14px; }

/* Key/value rows */
.acct-kv { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 15px; }
.acct-kv dt { color: var(--acct-text-2); }
.acct-kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

/* Profile strength */
.acct-meter { height: 4px; border-radius: 2px; background: #2a2933; margin: 4px 0 16px; overflow: hidden; }
.acct-meter span { display: block; height: 100%; background: var(--acct-accent); }
.acct-pct { font-family: var(--font-mono); font-size: 13px; color: var(--acct-accent); }
.acct-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.acct-checklist li { display: flex; align-items: center; gap: 12px; }
.acct-checklist li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--acct-text); flex-shrink: 0; }
.acct-checklist li.done { color: var(--acct-text-2); }
.acct-checklist li.done::before { content: "✓"; border: none; width: 14px; height: auto; border-radius: 0; font-size: 13px; color: var(--acct-text-2); }

/* Forms */
.acct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acct-form .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .acct-form { grid-template-columns: 1fr; } }
.acct-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--acct-text-2); }
.acct-input { min-height: 44px; border-radius: 12px; border: 1px solid var(--acct-border-strong); background: var(--acct-bg); color: var(--acct-text); padding: 0 14px; font: inherit; font-size: 15px; width: 100%; }
.acct-input:focus, .acct-select:focus { outline: 2px solid rgba(125, 226, 184, .6); outline-offset: 1px; }
.acct-hint { font-size: 12px; color: var(--acct-muted); }
.acct-formactions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* Dialog */
.acct-dialog { margin: auto; background: var(--acct-card); color: var(--acct-text); border: 1px solid var(--acct-border); border-radius: 20px; padding: 28px; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.acct-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.acct-dialog .acct-h2 { margin-bottom: 18px; }

/* Job alerts */
.acct-group { margin-top: 22px; }
.acct-grouplabel { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--acct-text-2); margin-bottom: 10px; }
.acct-search { margin-top: 18px; }
.acct-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--acct-accent); text-transform: uppercase; }
.acct-savebar { position: static; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--acct-raised); border: 1px solid var(--acct-border); border-radius: 9999px; padding: 10px 10px 10px 24px; }
.acct-savebar .acct-muted { font-size: 14px; }
.acct-segment { display: inline-flex; padding: 4px; border-radius: 9999px; border: 1px solid var(--acct-border); background: var(--acct-bg); }
.acct-segment span { min-height: 40px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 9999px; background: var(--acct-text); color: var(--acct-bg); font-weight: 500; font-size: 15px; }

/* Toggle row (settings) */
.acct-switch { position: relative; width: 44px; height: 26px; border-radius: 9999px; border: none; background: #3a3845; cursor: pointer; flex-shrink: 0; }
.acct-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--acct-text); transition: transform .15s; }
.acct-switch[aria-checked="true"] { background: var(--acct-accent); }
.acct-switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--acct-bg); }
.acct-settingrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; font-size: 15px; }
.acct-settingrow .acct-muted { font-size: 15px; }

@media (max-width: 700px) {
  .acct-hero { align-items: flex-start; }
  .acct-badge { border-radius: 14px; align-items: flex-start; line-height: 1.5; }
  .acct-badge svg { margin-top: 2px; }
  .acct-savebar { border-radius: 20px; padding: 12px 12px 12px 16px; }
}

/* Company logos: same treatment as the job board's .ds-logochip (white
chip with padding; "fill" logos cover the chip edge to edge). */
.acct-logo { overflow: hidden; flex-shrink: 0; }
.acct-logo.has-img { background: #fff; padding: 7px; }
.acct-logo.has-img.is-fill { background: transparent; padding: 0; }
.acct-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.acct-logo.is-fill img { object-fit: cover; }
.acct-logo-sm { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; }
.acct-logo-sm.has-img { padding: 5px; }
.acct-logo-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 18px; }
.acct-logo-lg.has-img { padding: 9px; }
.acct-inputlogo { display: flex; gap: 10px; align-items: center; }

/* Whole card opens the detail view. */
.acct-app-open { cursor: pointer; border-radius: 12px; margin: 0 -10px; padding: 0 10px; }
.acct-app-open:hover { background: rgba(255, 255, 255, .025); }
.acct-app-open:focus-visible { outline: 2px solid rgba(125, 226, 184, .6); outline-offset: 2px; }

/* Detail dialog */
/* Centred card on desktop, bottom sheet on phones. X closes (top right);
tapping the backdrop closes too (account.js). */
.acct-detail { width: min(560px, calc(100vw - 32px)); padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.acct-detailhead { display: flex; gap: 14px; align-items: flex-start; }
.acct-detailhead .acct-logo-lg { width: 52px; height: 52px; }
.acct-detailhead-text { flex: 1; min-width: 0; padding-top: 2px; }
.acct-detail-title { margin: 0 0 4px; font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }
.acct-detail-title:focus { outline: none; }
.acct-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; color: var(--acct-text-2); font-size: 14px; }
.acct-detail-meta .acct-small { font-size: 14px; color: var(--acct-text-2); }
.acct-detail-dot { color: var(--acct-muted); }
.acct-dialog-x { flex-shrink: 0; width: 44px; height: 44px; margin: -10px -10px 0 0; border-radius: 50%; border: none; background: transparent; color: var(--acct-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.acct-dialog-x:hover { background: var(--acct-raised); color: var(--acct-text); }
.acct-dialog-x:focus-visible { outline: 2px solid rgba(125, 226, 184, .6); outline-offset: 0; }
.acct-dialog-x svg { width: 20px; height: 20px; }
.acct-detail-rows { margin: 20px 0 0; display: flex; flex-direction: column; gap: 4px; }
.acct-detail-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; min-height: 44px; }
.acct-detail-row dt { color: var(--acct-muted); font-size: 14px; }
.acct-detail-row dd { margin: 0; display: flex; align-items: center; gap: 12px; min-width: 0; }
.acct-detail-row .acct-select { width: 100%; max-width: 240px; min-height: 40px; }
.acct-detail-saved { color: var(--acct-accent); font-size: 13px; white-space: nowrap; }
.acct-detail-saved::before { content: "✓ "; }
.acct-detail-joblink { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--acct-text); font-size: 14px; text-decoration: underline; text-decoration-color: var(--acct-border-strong); text-underline-offset: 4px; }
.acct-detail-joblink:hover { text-decoration-color: currentColor; }
.acct-detail-joblink svg { width: 14px; height: 14px; }
.acct-detail-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--acct-border); }
.acct-detail-section .acct-grouplabel { margin-bottom: 4px; }
.acct-detail-foot { margin-top: 8px; }
.acct-detail-foot .acct-link { color: var(--acct-muted); }
.acct-detail-foot .acct-link:hover { color: var(--acct-danger); }
.acct-detail-confirm { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 44px; }
.acct-detail-confirm-btns { display: flex; gap: 8px; }
@media (max-width: 640px) {
  .acct-detail { width: 100%; max-width: 100%; max-height: 88dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: none; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); }
  .acct-detail::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 9999px; background: var(--acct-border-strong); margin: 0 auto 14px; }
  .acct-detail[open] { animation: acct-sheet-up .22s ease-out; }
  .acct-detail-title { font-size: 18px; }
}
@keyframes acct-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .acct-detail[open] { animation: none; } }
.acct-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acct-timeline li { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: baseline; padding: 8px 0; font-size: 14px; border-top: 1px solid var(--acct-border); }
.acct-timeline li:first-child { border-top: none; }
.acct-timeline li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acct-accent); transform: translateY(-1px); }
.acct-timeline li.rejected::before { background: var(--acct-danger); }
.acct-timeline .when { color: var(--acct-muted); font-size: 13px; white-space: nowrap; }
.acct-timeline .how { color: var(--acct-muted); font-size: 13px; }

/* "Did you apply to these?" review of unanswered apply clicks */
.acct-review { margin-top: 18px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(243, 199, 122, .3); background: rgba(243, 199, 122, .05); }
.acct-review-title { font-size: 16px; font-weight: 500; color: var(--acct-warn); margin-bottom: 4px; }
.acct-review-list { display: flex; flex-direction: column; margin-top: 12px; }
.acct-reviewnote { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 36px; padding: 0 14px; border-radius: 9999px; border: 1px solid rgba(243, 199, 122, .4); background: rgba(243, 199, 122, .06); color: var(--acct-warn); font: inherit; font-size: 13px; cursor: pointer; }

/* Phones: compact cards like the mobile design ("Mercor · 2 days ago"),
the date/source column is folded into the platform line. */
.acct-app-when { display: none; }
@media (max-width: 800px) {
  .acct-app-when { display: inline; }
  .acct-app-meta { display: none; }
  .acct-app-row { row-gap: 10px; }
}

/* Review rows: logo, role, and an explicit answer per row. */
.acct-review-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--acct-border); }
.acct-review-item:first-child { border-top: none; }
.acct-review-text .t { font-size: 15px; overflow-wrap: anywhere; }
.acct-review-text .p { font-size: 13px; color: var(--acct-text-2); margin-top: 2px; }
.acct-review-actions { display: flex; gap: 8px; }
.acct-btn-sm { font-size: 14px; padding: 0 16px; }
.acct-review-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.acct-review-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 600px) {
  .acct-review-item { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
  .acct-review-actions { grid-column: 1 / -1; }
  .acct-review-actions .acct-btn { flex: 1; }
}

/* Undo bar after answering a review row. */
.acct-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 20px; border-radius: 9999px; background: var(--acct-text); color: var(--acct-bg); font-size: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.acct-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-toast-undo { min-height: 36px; padding: 0 16px; border-radius: 9999px; border: none; background: var(--acct-bg); color: var(--acct-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; flex-shrink: 0; }

/* Review: count, stepped "show more", scroll box for long backlogs, and
answer feedback (chosen button fills white with a tick, row slides away). */
.acct-review-count { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--acct-text-2); font-weight: 400; }
.acct-review-more { display: flex; gap: 18px; flex-wrap: wrap; }
.acct-review-list.is-scroll { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; margin-right: -6px; }
.acct-review-actions .acct-btn.is-chosen { background: var(--acct-text); color: var(--acct-bg); border-color: var(--acct-text); opacity: 1; }
.acct-review-actions .acct-btn.is-faded { opacity: .35; }
.acct-review-item { transition: opacity .25s ease, transform .25s ease; }
.acct-review-item.is-leaving { opacity: 0; transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .acct-review-item { transition: none; } }
.acct-review-count { display: inline-block; white-space: nowrap; }
@media (max-width: 600px) { .acct-review-list.is-scroll { max-height: 62vh; } }

/* Smooth removal: a row (or, after the last answer, the whole panel)
collapses its height so everything below moves up in one motion. */
.acct-review-item.is-collapsing,
.acct-review.is-collapsing {
  overflow: hidden;
  height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  opacity: 0;
  border-color: transparent;
  transition: height .25s ease, padding .25s ease, margin .25s ease, opacity .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .acct-review-item.is-collapsing, .acct-review.is-collapsing { transition: none; }
}

/* "Private · only you can see this": what's hidden from the public
profile. An eye-off icon rather than a padlock, which read as "locked". */
.acct-private { display: flex; align-items: center; gap: 6px; margin: -8px 0 12px; font-size: 13px; color: var(--acct-muted); }
.acct-private svg { flex-shrink: 0; }
.acct-link-add { min-height: 32px; font-size: 14px; color: var(--acct-accent); }

/* Job alerts: your picks as removable chips above the folded full list. */
.acct-chip-picked { background: var(--acct-text); color: var(--acct-bg); border-color: var(--acct-text); gap: 8px; }
.acct-chip-x { font-family: var(--font-body); font-size: 16px; line-height: 1; opacity: .6; }
.acct-chip-picked:hover .acct-chip-x { opacity: 1; }
.acct-savebar.is-dirty { position: sticky; z-index: 5; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }

/* Hero actions: an "Open to work" switch row above the two buttons.
Phones: the switch row, then Edit / View side by side, instead of three
full-width bars. */
.acct-otw { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 10px 0 16px; border-radius: 14px; border: 1px solid var(--acct-border); background: var(--acct-raised); }
.acct-otw-label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--acct-text-2); cursor: pointer; flex: 1; min-height: 44px; }
.acct-otw .acct-dot { background: var(--acct-muted); }
.acct-otw.is-on { border-color: rgba(125, 226, 184, .45); background: rgba(125, 226, 184, .08); }
.acct-otw.is-on .acct-otw-label { color: var(--acct-text); }
.acct-otw.is-on .acct-dot { background: var(--acct-accent); }
.acct-hero-btns { display: flex; flex-direction: column; gap: 10px; }
.acct-hero-actions { min-width: 210px; }
@media (max-width: 700px) {
  .acct-hero-btns { flex-direction: row; }
  .acct-hero-btns .acct-btn { flex: 1; min-width: 0; padding: 0 12px; font-size: 14px; }
}

/* Applications tab badge ("to check" count), both layouts. */
.acct-tab-badge { margin-left: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; background: #f3c77a; color: #0c0b10; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

/* ─────────── Left-menu layout (the account page's layout) ───────────
Desktop: a 220px menu of account sections on the left (who you are is
in the header's account menu and the profile card, not repeated here),
content on the right with the old side column folded into it, so it's
still two columns, not three. Phones: a slim underlined tab strip. */
@media (min-width: 901px) {
  .acct-layout-sidebar #acct-app { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
  .acct-layout-sidebar #acct-app[hidden] { display: none !important; }
  .acct-layout-sidebar .acct-head { grid-column: 1; grid-row: 1; position: sticky; top: 98px; display: block; margin: 8px 0 0; padding: 0; background: none; border: none; }
  .acct-layout-sidebar .acct-panel { grid-column: 2; grid-row: 1; margin-top: 8px; }
  .acct-layout-sidebar .acct-head .acct-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .acct-layout-sidebar .acct-tabs { flex-direction: column; gap: 2px; overflow: visible; }
  .acct-layout-sidebar .acct-tab { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; border-radius: 10px; padding: 0 12px; text-align: left; color: var(--acct-text-2); background: none; font-weight: 400; }
  .acct-layout-sidebar .acct-tab:hover { background: rgba(255, 255, 255, .04); color: var(--acct-text); }
  .acct-layout-sidebar .acct-tab[aria-selected="true"] { background: var(--acct-raised); color: var(--acct-text); font-weight: 500; box-shadow: inset 3px 0 0 var(--acct-accent); }

  /* Fold the old right column into the content: one grid per panel,
  full-width by default; the profile's side cards pair up two per row. */
  .acct-layout-sidebar .acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .acct-layout-sidebar .acct-grid > .acct-col { display: contents; }
  .acct-layout-sidebar .acct-grid > .acct-col > * { grid-column: 1 / -1; }
  .acct-layout-sidebar #panel-profile .acct-col + .acct-col > * { grid-column: auto; }
  .acct-layout-sidebar #panel-alerts .acct-grid,
  .acct-layout-sidebar #panel-settings .acct-grid { max-width: 820px; }
}
@media (max-width: 900px) {
  /* Underlined tabs: reads as a sub-section switcher, not a second menu. */
  .acct-layout-sidebar .acct-head { padding: 0 16px; border-bottom: 1px solid var(--acct-border); }
  .acct-layout-sidebar .acct-tabs { gap: 20px; }
  .acct-layout-sidebar .acct-tab { border: none; border-radius: 0; background: none; padding: 0 2px; min-height: 46px; color: var(--acct-text-2); font-weight: 400; box-shadow: inset 0 -2px 0 transparent; }
  .acct-layout-sidebar .acct-tab[aria-selected="true"] { color: var(--acct-text); font-weight: 500; box-shadow: inset 0 -2px 0 var(--acct-text); }
}

/* Sidebar layout: a compact profile card (it was ~230px tall and
repeated the identity the sidebar used to show). Actions sit in one row. */
@media (min-width: 901px) {
  .acct-layout-sidebar .acct-hero { padding: 20px 24px; gap: 18px; flex-wrap: wrap; }
  .acct-layout-sidebar .acct-hero .acct-avatar-lg { width: 56px; height: 56px; font-size: 18px; }
  .acct-layout-sidebar .acct-hero .acct-name { font-size: 22px; }
  .acct-layout-sidebar .acct-hero .acct-sub { font-size: 14px; margin-top: 2px; }
  .acct-layout-sidebar .acct-hero .acct-badges { flex-direction: row; flex-wrap: wrap; margin-top: 10px; }
  .acct-layout-sidebar .acct-hero-actions { flex-direction: row; align-items: center; min-width: 0; gap: 10px; }
  .acct-layout-sidebar .acct-hero-actions .acct-otw { min-height: 44px; }
  .acct-layout-sidebar .acct-hero-btns { flex-direction: row; }
}
@media (max-width: 900px) {
  .acct-layout-sidebar .acct-hero .acct-avatar-lg { width: 48px; height: 48px; font-size: 16px; }
  .acct-layout-sidebar .acct-hero .acct-name { font-size: 20px; }
  .acct-layout-sidebar .acct-hero .acct-sub { font-size: 14px; }
  .acct-layout-sidebar .acct-hero { align-items: center; }
}

.acct-slug-confirm { margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(243, 199, 122, .35); background: rgba(243, 199, 122, .06); }

/* "How your tracker works": three numbered steps, then the AI agent
preview in the site's accent (green glow, mono uppercase eyebrow). */
.acct-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acct-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--acct-text-2); }
.acct-steps strong { color: var(--acct-text); font-weight: 500; }
.acct-steps em { font-style: normal; color: var(--acct-text); }
.acct-step-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--acct-border-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--acct-text); margin-top: 1px; }
@media (max-width: 900px) { .acct-steps { grid-template-columns: 1fr; gap: 14px; } }

.acct-agent { position: relative; margin-top: 22px; padding: 22px; border-radius: 16px; border: 1px solid rgba(125, 226, 184, .28); background: radial-gradient(120% 140% at 0% 0%, rgba(125, 226, 184, .10), rgba(125, 226, 184, .02) 55%, transparent 80%), var(--acct-raised); overflow: hidden; }
.acct-agent-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--acct-accent); padding: 5px 10px; border-radius: 9999px; border: 1px solid rgba(125, 226, 184, .3); background: rgba(125, 226, 184, .06); }
.acct-agent-eyebrow svg { width: 13px; height: 13px; }
.acct-agent-title { margin: 14px 0 6px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.acct-agent-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--acct-text-2); max-width: 720px; }

.acct-agent-demo { display: flex; align-items: center; gap: 14px; margin: 18px 0 16px; flex-wrap: wrap; }
.acct-agent-mail, .acct-agent-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--acct-border); background: var(--acct-card); }
.acct-agent-mail svg { width: 16px; height: 16px; color: var(--acct-text-2); flex-shrink: 0; }
.acct-agent-mail .from { display: block; font-size: 12px; color: var(--acct-muted); }
.acct-agent-mail .subj { display: block; font-size: 14px; color: var(--acct-text); }
.acct-agent-arrow { color: var(--acct-accent); font-size: 18px; }
.acct-agent-card { flex-direction: column; align-items: stretch; gap: 8px; min-width: 170px; }
.acct-agent-card .acct-stagebar span { height: 4px; }
.acct-agent-card .stage { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--acct-accent); }
@media (max-width: 600px) { .acct-agent-demo { flex-direction: column; align-items: stretch; gap: 6px; } .acct-agent-arrow { align-self: center; line-height: 1; transform: rotate(90deg); } }

.acct-agent-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.acct-agent-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--acct-text-2); }
.acct-agent-trust li::before { content: "✓"; color: var(--acct-accent); font-size: 12px; }

/* Signed-out /account: the sign-in page. Benefits beside the form on
desktop; the form first on phones. Tall enough that the footer doesn't
ride up under a short card. */
.acct-signin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 72px; align-items: center; min-height: calc(100vh - 74px - 260px); padding: 56px 0 72px; max-width: 1100px; margin: 0 auto; }
.acct-signin-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--acct-accent); }
.acct-signin-title { margin: 14px 0 28px; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; letter-spacing: -.02em; font-weight: 500; max-width: 520px; }
.acct-signin-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; max-width: 480px; }
.acct-signin-benefits li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--acct-text-2); }
.acct-signin-benefits strong { display: block; color: var(--acct-text); font-weight: 500; margin-bottom: 2px; }
.acct-signin-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--acct-accent); background: rgba(125, 226, 184, .08); border: 1px solid rgba(125, 226, 184, .25); }
.acct-signin-icon svg { width: 18px; height: 18px; }
.acct-signin-form .ds-card { padding: 28px; border-radius: 20px; background: var(--acct-card); border: 1px solid var(--acct-border); }
.acct-signin-form .ds-ttitle { font-size: 22px; }
.acct-signin-legal { margin: 14px 4px 0; font-size: 12px; line-height: 1.6; color: var(--acct-muted); }
.acct-signin-legal a { color: var(--acct-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(125, 226, 184, .7); }
.acct-signin-legal a:hover { color: var(--acct-accent); }
@media (max-width: 900px) {
  .acct-signin { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 20px 0 48px; min-height: 0; }
  .acct-signin-form { order: -1; }
  .acct-signin-title { font-size: 28px; margin: 10px 0 20px; }
  .acct-signin-form .ds-card { padding: 22px; }
}
.acct-signin-form .ds-devemailrow { flex-direction: column; align-items: stretch; gap: 10px; }
.acct-signin-form .ds-devemailrow .ds-input, .acct-signin-form .ds-devemailrow .ds-btn { width: 100%; min-height: 46px; }

/* Job alert categories: long names ("Life, Physical, and Social Science"),
so normal case in Inter rather than the uppercase mono of short chips,
and your picks as calm outlined chips, not solid white bars (owner's
call, 2026-09-26). Phones: the full list is a checklist, one row per
category with the tick on the right. */
.acct-catchips .acct-chip { font-family: var(--font-body, Inter, sans-serif); font-size: 14px; letter-spacing: 0; text-transform: none; }
.acct-catchips .acct-chip-picked { background: var(--acct-raised); color: var(--acct-text); border-color: var(--acct-border-strong); }
.acct-catchips .acct-chip-picked .acct-chip-x { opacity: .7; }
@media (max-width: 700px) {
  .acct-catchips .acct-chip-picked { min-height: 44px; padding: 0 12px 0 14px; }
  .acct-catlist { flex-direction: column; flex-wrap: nowrap; gap: 0; border: 1px solid var(--acct-border); border-radius: 16px; overflow: hidden; }
  .acct-catlist .acct-chip { width: 100%; min-height: 52px; padding: 0 16px; border: none; border-radius: 0; justify-content: space-between; text-align: left; font-size: 15px; }
  .acct-catlist .acct-chip + .acct-chip { border-top: 1px solid var(--acct-border); }
  .acct-catlist .acct-chip.is-selected { background: rgba(125, 226, 184, .06); color: var(--acct-text); }
  .acct-catlist .acct-chip::before { content: none; }
  .acct-catlist .acct-chip::after { content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--acct-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
  .acct-catlist .acct-chip.is-selected::after { content: "✓"; background: var(--acct-accent); border-color: var(--acct-accent); color: var(--acct-bg); }
  .acct-catlist > .acct-muted { padding: 16px; }
}

/* Job alert picker: the categories under their group headings. */
.acct-catgroups { display: flex; flex-direction: column; gap: 20px; }
.acct-catgroup-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--acct-muted); margin-bottom: 10px; }

/* "Via Gradient / Via Claude / Via ChatGPT" on application cards: a tiny
logo the height of the text. */
.acct-via { display: inline-flex; align-items: center; gap: 6px; }
.acct-via-icon { width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px; object-fit: contain; }
.acct-via-generic { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--acct-text-2); }
.acct-app-meta .acct-via { justify-content: flex-end; }
.acct-app-via { display: inline-flex; gap: 4px; vertical-align: -2px; }
#app-dialog-title:focus { outline: none; }
.acct-timeline .acct-via { gap: 5px; vertical-align: middle; }