/* ============================================================
   ui-account.css — "Paper & Ink" account area: My CV
   (app-ui-manage.js), Settings and Credits (app-ui-account.js).
   Boards: docs/design/paper-ink/App-MyCV, Settings, App-Credits.
   Tokens: ui-tokens.css (--ui-*). Atoms (.ui-btn, .ui-card, .ui-pill,
   .ui-chip, .ui-segmented, .ui-input …) come from ui-base.css; page
   containers (.ap-wrap) from ui-app.css. Load after ui-app.css.
   No horizontal overflow at any width ≥ 360px.
   ============================================================ */

.ac-page { padding-top: 40px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ac-page * { min-width: 0; }
.ac-muted { color: var(--ui-ink-3); font-size: 13px; }
.ac-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius-control); color: var(--ui-ink-3); font-size: 14px; }
.ac-dot { color: var(--ui-ink-3); padding: 0 6px; }
.ac-linkbtn { font-size: 13px; align-self: flex-start; }
.ac-page .ui-eyebrow { margin: 0; }
.ac-page em { font-style: italic; color: var(--ui-accent); }
.ac-page [tabindex="-1"]:focus { outline: none; }

/* Danger buttons: outlined red (solid for the account delete) — only ever
   rendered inside Settings › Privacy & data › Danger zone. */
.ac-btn-danger { background: var(--ui-surface); border-color: var(--ui-red); color: var(--ui-red); }
.ac-btn-danger:hover { background: var(--ui-red-soft); color: var(--ui-red); }
.ac-btn-danger.is-solid { background: var(--ui-red); border-color: var(--ui-red); color: var(--ui-on-accent); }
.ac-btn-danger.is-solid:hover { filter: brightness(.92); background: var(--ui-red); color: var(--ui-on-accent); }

/* ── My CV: heading ── */
.ac-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ac-head-text { display: flex; flex-direction: column; gap: 6px; }
.ac-title { margin: 0; }
.ac-head-lead { margin: 0; max-width: 400px; font-size: 14px; line-height: 1.5; color: var(--ui-ink-3); text-align: right; }

/* ── My CV: file card ── */
.ac-file { display: flex; align-items: center; gap: 18px; padding: 20px 24px; }
.ac-file-thumb { width: 48px; height: 56px; flex-shrink: 0; border-radius: 8px; background: var(--ui-sunken); color: var(--ui-ink-2); display: flex; align-items: center; justify-content: center; }
.ac-file-main { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ac-file-name { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.ac-file-meta { display: flex; flex-wrap: wrap; font-size: 13px; color: var(--ui-ink-3); }
.ac-file-note { margin: 4px 0 0; font-size: 13px; color: var(--ui-ink-2); }
.ac-file-error { margin: 4px 0 0; font-size: 13px; color: var(--ui-red); }
.ac-file-status { flex-shrink: 0; }
.ac-file-actions { display: flex; gap: 10px; flex-shrink: 0; }

.ac-emptycv { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.ac-emptycv .ac-muted { margin: 0; font-size: 14px; max-width: 420px; }

/* ── My CV: rail · section · aside ── */
.ac-cvgrid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.ac-rail { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; position: sticky; top: calc(var(--ui-header-h) + 16px); }
.ac-rail-label { padding: 0 12px 8px; }
.ac-rail-list { display: flex; flex-direction: column; gap: 2px; }
.ac-rail-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-ink-2); font: 400 14px var(--ui-sans); text-align: left; cursor: pointer;
}
.ac-rail-item:hover { background: var(--ui-sunken); color: var(--ui-ink); }
.ac-rail-item[aria-current="true"] { background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-ink); font-weight: 500; }
.ac-rail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-rail-count { flex-shrink: 0; color: var(--ui-ink-3); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }

.ac-sec { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.ac-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-sec-title { margin: 0; font-family: var(--ui-serif); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: var(--ui-tracking-display); }
.ac-sec-meta { font-size: 13px; color: var(--ui-ink-3); }
.ac-items { display: flex; flex-direction: column; gap: 12px; }
.ac-item { border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.ac-item-head { display: flex; gap: 14px; align-items: flex-start; }
.ac-item-logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--ui-sunken); color: var(--ui-ink-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.ac-item-titles { flex: 1; }
.ac-item-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ac-item-sub { display: flex; flex-wrap: wrap; margin-top: 2px; font-size: 13px; color: var(--ui-ink-3); }
.ac-bullets { margin: 0; padding-left: 70px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--ui-ink-2); overflow-wrap: anywhere; }
/* source lines numbered by the CV itself ("1. …") carry no extra bullet */
.ac-bullets li.is-numbered { list-style: none; }
.ac-item-text { margin: 0 0 0 50px; font-size: 14px; line-height: 1.55; color: var(--ui-ink-2); overflow-wrap: anywhere; }
.ac-skillgroups { display: flex; flex-direction: column; gap: 16px; }
.ac-skillgroup { display: flex; flex-direction: column; gap: 8px; }
.ac-chips { margin: 0; padding: 0; list-style: none; }
.ac-chip { background: var(--ui-sunken); color: var(--ui-ink); overflow-wrap: anywhere; }
.ac-text { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--ui-ink-2); }
.ac-text p { margin: 0; overflow-wrap: anywhere; }
.ac-fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.ac-fields.is-stacked { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ac-field dt { font-family: var(--ui-mono); font-size: 12px; letter-spacing: var(--ui-tracking-label); text-transform: uppercase; color: var(--ui-ink-3); }
.ac-field dd { margin: 2px 0 0; font-size: 15px; color: var(--ui-ink); overflow-wrap: anywhere; }
.ac-summary { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--ui-line); }
.ac-summary p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ui-ink-2); overflow-wrap: anywhere; }

.ac-aside { display: flex; flex-direction: column; gap: 16px; }
.ac-how, .ac-meta { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ac-how-title { margin: 0; font-family: var(--ui-serif); font-weight: 400; font-size: 24px; line-height: 1.15; }
.ac-how-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ui-ink-2); }
.ac-how-list li { display: flex; gap: 10px; }
.ac-check { flex-shrink: 0; margin-top: 2px; color: var(--ui-accent); }
.ac-meta .ac-field dd { font-size: 14px; }
.ac-tips { background: var(--ui-sunken); border-radius: var(--ui-radius-card); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ac-tips-title { font-size: 14px; font-weight: 600; }
.ac-tips p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ui-ink-2); }
.ac-tips a { font-size: 13px; }

.ac-dangerlink { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); }
.ac-dangerlink-title { font-size: 14px; font-weight: 600; }
.ac-dangerlink p { margin: 2px 0 0; font-size: 13px; color: var(--ui-ink-3); }

/* ── Settings ── */
.ac-settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.ac-setnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--ui-header-h) + 24px); }
.ac-setnav-title { margin: 0 0 16px 12px; }
.ac-setnav-list { display: flex; flex-direction: column; gap: 2px; }
.ac-setnav-item {
  padding: 10px 12px; border: 1px solid transparent; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-ink-2); font: 400 14px var(--ui-sans); text-align: left; cursor: pointer; white-space: nowrap;
}
.ac-setnav-item:hover { background: var(--ui-sunken); color: var(--ui-ink); }
.ac-setnav-item[aria-current="true"] { background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-ink); font-weight: 500; }
.ac-set-col { display: flex; flex-direction: column; gap: 20px; }
.ac-set { padding: 24px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--ui-header-h) + 16px); }
.ac-set-h { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.ac-set-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ui-ink-3); }
.ac-set-headrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ac-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ac-set-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ui-ink-3); }
.ac-set-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.ac-set-foot .ac-muted { overflow-wrap: anywhere; }
.ac-readonly { background: var(--ui-sunken); color: var(--ui-ink-2); }
.ac-theme { align-items: flex-start; }
.ac-segmented { max-width: 100%; }

.ac-pklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ac-pkrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); }
.ac-pkicon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--ui-accent-soft); color: var(--ui-accent-ink); display: flex; align-items: center; justify-content: center; }
.ac-pkmain { flex: 1; }
.ac-pkname { font-size: 14px; font-weight: 600; }
.ac-pkmeta { font-size: 13px; color: var(--ui-ink-3); }

.ac-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ac-stat { background: var(--ui-sunken); border-radius: var(--ui-radius-control); padding: 14px 16px; }
.ac-stat-val { margin-top: 4px; font-size: 24px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.ac-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); }
.ac-row-text { flex: 1; }
.ac-row-title { font-size: 14px; font-weight: 600; }
.ac-row-sub { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ui-ink-3); }
.ac-row .ui-btn { flex-shrink: 0; }
.ac-danger { border: 1px solid var(--ui-red); border-radius: var(--ui-radius-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ac-danger .ac-row { border: 0; padding: 0; }
.ac-danger-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ac-danger-h { margin: 0; font-family: var(--ui-mono); font-size: 12px; font-weight: 400; letter-spacing: var(--ui-tracking-label); text-transform: uppercase; color: var(--ui-red); }
.ac-danger-sep { height: 1px; background: var(--ui-line); }

.ac-signedout { padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: var(--ui-ink-2); }
.ac-signedout p { margin: 0; }

/* ── Credits ("Keep tailoring") ── */
.ac-credits { align-items: center; padding-top: 32px; }
.ac-back { align-self: flex-start; }
.ac-topup { width: 100%; max-width: 560px; padding: 28px; display: flex; flex-direction: column; gap: 20px; border-radius: var(--ui-radius-modal); box-shadow: var(--ui-shadow-overlay); }
.ac-topup-head { display: flex; flex-direction: column; gap: 6px; }
.ac-topup-title { margin: 0; font-family: var(--ui-serif); font-weight: 400; font-size: 34px; line-height: 1.05; letter-spacing: var(--ui-tracking-display); }
.ac-topup-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ui-ink-2); }
.ac-balance { padding: 14px 16px; background: var(--ui-paper); box-shadow: none; display: flex; flex-direction: column; gap: 6px; }
.ac-balance.is-out { background: var(--ui-amber-soft); border-color: transparent; }
.ac-balance-val { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ac-balance-note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ui-ink-2); }
.ac-warn { flex-shrink: 0; color: var(--ui-amber); margin-top: 1px; }
.ac-plans { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ac-plan {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; cursor: pointer;
  border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-card); background: var(--ui-surface);
}
.ac-plan:hover { border-color: var(--ui-ink-3); }
.ac-plan.is-checked { border: 2px solid var(--ui-accent); padding: 15px 17px; background: var(--ui-accent-soft); }
.ac-plan input { margin: 4px 0 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--ui-accent); }
.ac-plan input:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ac-plan-main { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ac-plan-namerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-plan-name { font-size: 16px; font-weight: 600; color: var(--ui-ink); }
.ac-plan-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--ui-radius-pill); background: var(--ui-surface); color: var(--ui-accent-ink); font-size: 12px; font-weight: 500; }
.ac-plan-desc { font-size: 13px; line-height: 1.45; color: var(--ui-ink-2); }
.ac-plan-price { flex-shrink: 0; text-align: right; }
.ac-plan-amount { display: block; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-ink); }
.ac-plan-per { display: block; font-size: 12px; color: var(--ui-ink-3); }
.ac-topup-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ac-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--ui-ink-3); text-align: center; }
.ac-secure svg { flex-shrink: 0; }
.ac-compare { font-size: 13px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ac-cvgrid { grid-template-columns: 200px minmax(0, 1fr); }
  .ac-aside { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .ac-settings { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 860px) {
  .ac-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ac-head-lead { text-align: left; }
  .ac-file { flex-wrap: wrap; }
  .ac-file-main { flex-basis: calc(100% - 66px); }
  .ac-file-status { order: 3; }
  .ac-file-actions { order: 4; width: 100%; }
  .ac-file-actions .ui-btn { flex: 1; }
  .ac-aside { grid-template-columns: minmax(0, 1fr); }
  .ac-settings { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ac-setnav { position: static; }
  .ac-setnav-title { margin: 0 0 12px; }
  .ac-setnav-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .ac-setnav-item { padding: 8px 12px; border-color: var(--ui-line); background: var(--ui-surface); font-size: 13px; }
  .ac-setnav-item[aria-current="true"] { border-color: var(--ui-ink-3); }
}
@media (max-width: 760px) {
  .ac-cvgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ac-rail { position: static; padding-top: 0; }
  .ac-rail-label { padding: 0 0 8px; }
  .ac-rail-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .ac-rail-item { width: auto; padding: 7px 12px; border-color: var(--ui-line); background: var(--ui-surface); font-size: 13px; }
  .ac-rail-item[aria-current="true"] { border-color: var(--ui-ink-3); }
  .ac-rail-name { max-width: 180px; }
}
@media (max-width: 600px) {
  .ac-page { padding-top: 24px; gap: 16px; }
  .ac-file { padding: 16px; gap: 14px; }
  .ac-file-thumb { width: 40px; height: 48px; }
  .ac-sec { padding: 18px 16px; }
  .ac-sec-title { font-size: 26px; }
  .ac-item { padding: 14px; }
  .ac-bullets { padding-left: 18px; }
  .ac-item-text { margin-left: 0; }
  .ac-fields { grid-template-columns: minmax(0, 1fr); }
  .ac-dangerlink { flex-direction: column; align-items: flex-start; }
  .ac-set { padding: 18px 16px; }
  .ac-set-grid { grid-template-columns: minmax(0, 1fr); }
  .ac-set-headrow { flex-wrap: wrap; }
  .ac-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ac-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; }
  .ac-stat-val { margin-top: 0; font-size: 17px; text-align: right; }
  .ac-row { flex-wrap: wrap; }
  .ac-row .ui-btn { width: 100%; }
  .ac-pkrow { flex-wrap: wrap; }
  .ac-topup { padding: 20px 16px; box-shadow: var(--ui-shadow-card); }
  .ac-topup-title { font-size: 30px; }
  .ac-plan { padding: 14px; gap: 12px; }
  .ac-plan.is-checked { padding: 13px; }
  .ac-plan-amount { font-size: 20px; }
}