/*
 * /settings, on top of jobs.css: the Admin theme, the work layout (wide from
 * the left), panels without the lit edge, pills for every button, 12px
 * panels, 8px fields and rows. Only what this page adds lives here; every
 * margin, padding and gap is on the spacing scale (2 to 40).
 *
 * Control sizes (one list for the whole page, see settings/ui.js):
 *   46px  .btn (compact), the add-row fields next to it
 *   37px  .btn.small, .btn.small.ghost, compact choice pills
 *   32px  chips, icon buttons
 *   25px  status pills (read only)
 */

.toplinks a[aria-current="page"] { color: var(--ink); }

/* ---- header extras ---- */

/* ---- section nav: sticky on wide screens, a jump list on phones ---- */
.snav {
  position: sticky; top: 0; z-index: 6; margin: 0 0 8px; padding: 14px 0;
  background: var(--ground); border-bottom: 1px solid var(--line);
  /* The ground reaches the edges of the window, so content scrolls under it cleanly. */
  box-shadow: 0 0 0 100vmax var(--ground); clip-path: inset(0 -100vmax);
}
.snav-label { display: none; }
.snav ol { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.snav a {
  position: relative; display: inline-block; padding: 8px 0 12px;
  font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(169, 163, 184, .72); text-decoration: none; transition: color var(--dur-s) var(--ease-standard);
}
@media (hover: hover) { .snav a:hover { color: var(--ink); } }
/* Selected tab: full ink and a 2px accent bar sitting on the nav's bottom line. */
.snav a.is-current { color: var(--ink); }
.snav a::before {
  content: ''; position: absolute; left: 0; right: .08em; bottom: -15px; height: 2px; border-radius: 2px;
  background: var(--head); box-shadow: 0 0 10px rgba(159, 80, 255, .6);
  opacity: 0; transform: scaleX(.6); transition: opacity var(--dur-s) var(--ease-standard), transform var(--dur-sm) var(--ease-standard);
}
.snav a.is-current::before { opacity: 1; transform: none; }
.snav a.has-changes::after {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 6px; vertical-align: .15em;
  background: var(--accent-text); box-shadow: 0 0 8px rgba(199, 155, 255, .7);
}
@media (max-width: 720px) {
  .snav { position: static; padding: 0 0 18px; box-shadow: none; clip-path: none; margin-bottom: 8px; }
  .snav-label { display: block; font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
  .snav ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .snav a { display: block; padding: 12px 0; min-height: 44px; font-size: var(--fs-12); }
  .snav a::before { bottom: 6px; right: auto; width: 24px; }
}

/* ---- sections: one header recipe for all seven ----
   Mono title on the left, History (if any) on the right, centered on one
   37px line; the hint line under it; then the panel. */
.settings .sblock { margin-top: 56px; scroll-margin-top: 72px; }
.settings .sblock:first-child { margin-top: 40px; }
@media (max-width: 720px) { .settings .sblock { margin-top: 48px; scroll-margin-top: 12px; } }
.settings .block-head { align-items: center; min-height: 37px; margin: 0 0 6px; }
.block-tools { display: flex; gap: 8px; }
.block-head:has(+ .block-sub:empty) { margin-bottom: 18px; }
.settings .panel { position: relative; }
.settings .panel + .panel { margin-top: 12px; }

/* Titles inside a panel ("Where and what", "Add a company"), with an optional hint. */
.panel-title { margin: 0 0 22px; }
.panel-title + .group-sub { margin: -14px 0 22px; }
.settings .group { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 32px; }
.settings .group.first { border-top: 0; padding-top: 0; margin-top: 0; }
.settings .group > .group-title { margin: 0 0 14px; }
.settings .group-sub { margin: -6px 0 18px; }
.group-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 37px; margin: -11px 0 4px; }
.group-row .group-title { margin: 0; }
.empty { padding: 4px 0; }
.panel-alert { margin: 0 0 22px; }

/* ---- fields ----
   Fields side by side share one grid: each field is a subgrid two rows tall
   (title and hint, then the control), so titles, hints and controls line
   up across the columns. List fields are four rows: title, list, add row,
   note. */
.settings .form-panel > .field:first-child, .settings .form-panel > .fields-2.first > .field, .settings .fields-2.first > .field,
.settings .fields-3.first > .field { margin-top: 0; }
.settings .form-panel > .panel-title + .field, .settings .form-panel > .panel-title + .fields-2 > .field,
.settings .form-panel > .panel-title + .group-sub + .fields-2 > .field { margin-top: 0; }
.fields-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.settings :is(.fields-2, .fields-3) { align-items: start; }
.settings :is(.fields-2, .fields-3) > div.field { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
.settings :is(.fields-2, .fields-3) > div.field.chipfield { grid-row: span 4; }
@media (max-width: 720px) { .fields-3 { grid-template-columns: minmax(0, 1fr); } .settings :is(.fields-2, .fields-3).first > .field + .field { margin-top: 1.6rem; } }
/* jobs.css zeroes fieldset margins; pill groups here are fields like any other. */
.settings fieldset.q-group.field { margin-top: 1.6rem; }
.settings .first > fieldset.q-group.field, .settings .ach-filter { margin-top: 0; }
.settings .txt.is-error, .settings .is-error .txt { border-color: var(--err); }
.settings .is-error .pill { border-color: var(--err); }
.settings select.sel {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-text) 50%), linear-gradient(135deg, var(--accent-text) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.settings select.sel option { background: var(--panel); color: var(--ink); }

/* One checkbox on a line. */
.checkrow { display: flex; align-items: flex-start; gap: 12px; margin-top: 1.4rem; }
.checkrow input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cta); flex: none; cursor: pointer; }
.checkrow label { cursor: pointer; }
.cr-title { display: block; font-size: var(--fs-15); font-weight: 500; line-height: 1.4; }
.cr-sub { display: block; font-size: var(--fs-13); line-height: 1.45; color: var(--ink-soft); margin-top: 2px; }
/* "Current role" sits on the input row of the dates next to it. */
.settings .checkfield .checkrow { grid-row: 2; align-self: center; margin: 0; }
.now { margin: 0; padding: 12px 0; font-size: var(--fs-16); line-height: 1.5; color: var(--ink-soft); }

/* ---- buttons this page adds ----
   Row actions (Edit, Done, Remove, Delete) are small ghost pills: the
   .btn.small size with no border until hover. Remove and Delete turn the
   error color only on hover; the confirm that follows is red. */
.settings .btn.small.ghost { border-color: transparent; color: var(--ink-soft); padding: 8px 12px; }
@media (hover: hover) {
  .settings .btn.small.ghost:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); background: rgba(242, 238, 247, .04); }
  .settings .btn.small.ghost.is-remove:hover:not(:disabled) { border-color: rgba(255, 167, 154, .42); color: var(--err); background: rgba(255, 167, 154, .06); }
}
.settings .btn.small.ghost:disabled { opacity: .32; }

/* Icon buttons (Figma "Icon button"): 32px round, a 44px touch target. */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-s) var(--ease-standard), color var(--dur-s) var(--ease-standard), background var(--dur-s) var(--ease-standard), transform 150ms var(--ease-press);
}
.icon-btn::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; }
@media (hover: hover) { .icon-btn:hover:not(:disabled) { border-color: var(--ink); } }
.icon-btn:active:not(:disabled) { transform: scale(.96); }
.icon-btn:disabled { opacity: .32; cursor: default; }
.icon-btn:focus-visible { border-radius: 999px; }
.row-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.acts-pair { display: flex; align-items: center; gap: 6px; }

/* A compact choice pill on its own (achievement toggles): the size of .pills.compact. */
.settings .pill.is-compact { font-size: var(--fs-14); padding: 8px 14px; }

/* ---- the Save bar: sticks to the bottom of the screen while there are unsaved edits ---- */
.savebar { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.savebar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.savebar-row .note { margin: 0; flex: 0 1 auto; max-width: 64ch; }
.savebar-row .note:empty { display: none; }
.savebar-extra { display: flex; align-items: center; gap: 14px; }
.savebar-extra:empty { display: none; }
.savebar .note.is-dirty { color: var(--ink); }
/* Success reads in ink with a small live dot; signal green stays a dot (design.md 2.1). */
.settings .note.is-ok { color: var(--ink); }
.settings .note.is-ok::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: .12em;
  background: var(--ok); box-shadow: 0 0 8px rgba(170, 255, 0, .55);
}
.savebar.is-dirty {
  position: sticky; bottom: 0; z-index: 4; margin: 28px -32px -28px; padding: 16px 32px 18px;
  background: var(--panel-hi); border-top-color: var(--line-strong); border-radius: 0 0 12px 12px;
  box-shadow: 0 -12px 28px rgba(0, 0, 0, .35);
}
@media (max-width: 600px) { .savebar.is-dirty { margin: 24px -20px -22px; padding: 14px 20px 16px; } }
.savebar .confirm { margin-top: 14px; }
.confirm.stale { border-color: rgba(255, 167, 154, .5); }
.apply-link { font-size: var(--fs-14); color: var(--accent-text); }

/* ---- history ---- */
.history { margin: 0 0 12px; padding: 20px 24px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; }
@media (max-width: 600px) { .history { padding: 18px 16px; } }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.history .group-sub { margin: 0 0 12px; }
.hlist { list-style: none; margin: 0; padding: 0; }
.hrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.hmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hwhen { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hsum { font-size: var(--fs-13); color: var(--ink-soft); }
.hrow .confirm { flex: 1 1 100%; margin-top: 4px; }

/* ---- lists you add to: label, list, add row, note ---- */
.chipfield .chips, .chipfield .lrows { margin: 0 0 12px; }
.chipfield .chip-note { margin: 0; }
.chipfield .chip-note:not(:empty) { margin-top: 8px; }
/* Removable chips: 32px, 14px text, field ground, line-strong edge, a 24px remove. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chipx {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 32px;
  padding: 3px 3px 3px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--field);
  font-size: var(--fs-14); line-height: 1.3; color: var(--ink);
}
.chipx-text { overflow-wrap: anywhere; }
.icon-btn.chipx-x { width: 24px; height: 24px; border: 0; color: var(--ink-soft); }
.icon-btn.chipx-x::after { inset: -4px; }
@media (hover: hover) { .icon-btn.chipx-x:hover:not(:disabled) { background: rgba(255, 167, 154, .14); color: var(--err); } }
.chips-empty, .lrows-empty { display: flex; align-items: center; min-height: 32px; font-size: var(--fs-14); color: var(--ink-soft); }
/* Rows for long entries (education): the file-row look, with a ghost Remove. */
.lrows { display: grid; gap: 8px; list-style: none; padding: 0; }
.row.lrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 55px; padding: 8px 8px 8px 16px; }
/* On a narrow screen the tag and Remove drop under the text instead of squeezing it. */
.lrow-text { flex: 1 1 160px; min-width: 0; font-size: var(--fs-15); line-height: 1.4; overflow-wrap: break-word; }
.lrow .status-pill { flex: none; }
.lrow > .btn { margin-left: auto; }
/* An input and its Add button, both 46px. */
.addrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 520px; }
.addrow.is-two { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto; max-width: 760px; }
.addrow > .txt { height: 46px; padding: 0 16px; }
.addrow > .btn { height: 46px; padding: 0 22px; }
.fields-2 .addrow, .row .addrow { max-width: none; }

/* ---- roles ---- */
.roles { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.row.role { padding: 8px 8px 8px 16px; }
.role-head { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; min-height: 37px; }
.role-sum { display: flex; flex-direction: column; min-width: 0; }
.role-title { font-size: var(--fs-15); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.role-meta { font-size: var(--fs-13); color: var(--ink-soft); line-height: 1.45; }
.role-body { border-top: 1px solid var(--line); margin-top: 8px; padding: 0 8px 12px 0; }
.row.role .confirm { margin: 12px 8px 4px 0; }
.bullets { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.bullets li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bullets .txt { height: 46px; padding: 0 16px; }
.bullets-add { margin-top: 0; }
@media (max-width: 720px) {
  .role-head { grid-template-columns: 20px minmax(0, 1fr); }
  .role-acts { grid-column: 2 / -1; justify-content: flex-start; margin-bottom: 4px; }
}

/* ---- achievements ---- */
/* Toolbar: the count pills on the left, the filter pills on the right, one line. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.toolbar .status-pills { margin: 0; }
.toolbar-sub { margin: 14px 0 0; }
.settings .group-sub.toolbar-sub { margin: 14px 0 0; }
.ach-actions { margin-top: 18px; }
.ach-list { display: grid; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.ach-empty { margin-top: 18px; }
/* A card in the list: the row look (8px, field ground, hairline). No colored edge: state is a status pill. */
.row.ach { display: block; padding: 14px 12px 12px 16px; }
.ach-text { margin: 0; font-size: var(--fs-15); line-height: 1.5; overflow-wrap: anywhere; max-width: 76ch; }
/* The meta wraps in its own column so the controls always sit at the right. */
.ach-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; margin-top: 12px; }
.ach-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.ach-info { font-family: var(--font-mono); font-size: var(--fs-12); line-height: 1.4; letter-spacing: .04em; color: var(--ink-soft); }
.ach-edit { padding-right: 4px; }
.ach-edit > .field:first-child { margin-top: 0; }
.ach-edit .txt { font-size: var(--fs-16); }
.ev-control .pills { margin-top: 0; }
.ev-control .txt { margin-top: 10px; }
.row.ach .confirm { margin-top: 12px; }
.ach-filter { margin: 0; }

/* ---- rules ---- */
.rule-lock { margin-top: 1.4rem; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--field); max-width: 72ch; }
.rule-lock p { margin: 0; font-size: var(--fs-14); line-height: 1.5; }
.rule-lock .rule-sub { margin-top: 4px; font-size: var(--fs-13); color: var(--ink-soft); }
.lock-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.lock-tag::before {
  content: ''; width: 9px; height: 7px; border: 1.5px solid currentColor; border-radius: 2px; position: relative; top: 1px;
  box-shadow: 0 -3px 0 -1.5px var(--field), 0 -4px 0 -1px currentColor;
}
.money { position: relative; }
.money-sign { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.money .txt { padding-left: 30px; font-variant-numeric: tabular-nums; }

/* Excluded companies and the To check list: rows like the education rows. */
.xlist, .fams { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.row.xrow { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(0, 1.4fr) auto; align-items: center; gap: 8px 16px; min-height: 55px; padding: 8px 8px 8px 16px; }
.row.xrow.tc { grid-template-columns: minmax(0, 1fr) auto; }
.xname { font-size: var(--fs-15); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.xwhy { display: block; font-size: var(--fs-13); line-height: 1.45; color: var(--ink-soft); margin-top: 2px; }
.xrow .inline-edit-btn { color: var(--ink-soft); }
.tc-said { margin: 0; font-size: var(--fs-14); color: var(--ink-soft); }
.row.xrow.tc.decided { border-style: dashed; }
.row.fam { padding: 14px 16px 16px; }
.fam-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fam-head .field { margin: 0; flex: 1 1 260px; max-width: 420px; }
.fam-head .q { margin-bottom: 8px; }
.fam-head .q-title, .row.fam .chipfield .q-title { font-size: var(--fs-15); }
.fam-head > .btn { margin-bottom: 6px; }
.row.fam .chipfield { margin-top: 14px; }
.row.fam .addrow { max-width: 420px; }
@media (max-width: 720px) {
  .row.xrow, .addrow.is-two { grid-template-columns: minmax(0, 1fr); }
  .row.xrow { padding: 12px 8px 12px 16px; gap: 4px; }
  .row.xrow > .btn, .row.xrow .row-acts { justify-self: start; margin-left: -12px; }
  .row.xrow.tc .row-acts { margin-left: 0; margin-top: 6px; }
  .addrow.is-two > .btn { justify-self: start; }
}

/* Text that turns into an input in place (watchlist segment, exclusion reason). */
.inline-edit { min-width: 0; }
.inline-edit-btn {
  display: inline-block; max-width: calc(100% + 16px); margin: 0 -8px; padding: 6px 8px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: var(--fs-14); line-height: 1.45; text-align: left;
  transition: background var(--dur-s) var(--ease-standard), color var(--dur-s) var(--ease-standard);
}
.inline-edit-btn svg { display: inline; vertical-align: -2px; margin-left: 6px; color: var(--ink-soft); opacity: .6; transition: opacity var(--dur-s) var(--ease-standard), color var(--dur-s) var(--ease-standard); }
.inline-edit-btn.is-empty { color: #8A8499; }
.inline-edit-text { overflow-wrap: break-word; }
@media (hover: hover) {
  .inline-edit-btn:hover { background: rgba(242, 238, 247, .06); color: var(--ink); }
  .inline-edit-btn:hover svg { opacity: 1; color: var(--accent-text); }
}
.inline-edit-btn:focus-visible { border-radius: 8px; outline-offset: 0; }
.inline-edit-btn.is-error { box-shadow: inset 0 0 0 1px var(--err); }
.txt.is-inline { height: 40px; padding: 0 12px; }
.txt.is-inline::-webkit-calendar-picker-indicator { display: none !important; }
.inline-edit-text .nowrap { white-space: nowrap; }

/* ---- watchlist: one grid template for the column heads and every row ---- */
.wtable { --wl-cols: minmax(0, 1.2fr) 108px minmax(0, 1fr) 222px 80px; }
.whead, .wrow { display: grid; grid-template-columns: var(--wl-cols); align-items: center; column-gap: 12px; }
/* The heads get the rows' padding and a clear 1px edge, so every left edge matches. */
.whead { padding: 0 8px 10px 16px; border: 1px solid transparent; border-bottom: 0; }
.whead span { font-family: var(--font-mono); font-size: var(--fs-10); line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.row.wrow { min-height: 58px; padding: 8px 8px 8px 16px; }
.row.wrow.removed { display: flex; align-items: center; border-style: dashed; }
.wrow.removed p { margin: 0; font-size: var(--fs-14); color: var(--ink-soft); }
.wcell { min-width: 0; }
.wname { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.wtitle { font-size: var(--fs-15); font-weight: 500; line-height: 1.35; overflow-wrap: break-word; text-wrap: pretty; }
.wsub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.wsub:empty { display: none; }
.wsub .status-pill { margin: 2px 0; }
.wlink { font-size: var(--fs-13); line-height: 1.4; padding: 0; }
.wlabel { display: none; }
.wval { min-width: 0; }
.wact { justify-self: end; }
/* While a segment is being edited, its input takes the Feed column too, so it isn't cramped. */
@media (min-width: 1081px) {
  .wrow:has(.wseg input) .wseg { grid-column: 3 / 5; }
  .wrow:has(.wseg input) .wfeed { display: none; }
  .wrow:has(.wseg input) .wact { grid-column: 5; }
}
.txt.sel.is-row { height: 40px; padding: 0 34px 0 12px; font-size: var(--fs-15); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; }
@media (max-width: 1080px) {
  .whead { display: none; }
  .row.wrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "tier" "seg" "feed" "act"; row-gap: 8px; padding: 14px 16px 10px; }
  .wname { grid-area: name; margin-bottom: 4px; }
  .wtier { grid-area: tier; } .wseg { grid-area: seg; } .wfeed { grid-area: feed; } .wact { grid-area: act; justify-self: start; margin-left: -12px; }
  .wtier, .wseg { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
  .wtier .wval { max-width: 200px; }
  .wlabel { display: block; font-family: var(--font-mono); font-size: var(--fs-10); line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
  .wfeed .wlabel { display: none; }
  .wfeed { padding-top: 2px; }
}

/* ---- import ---- */
.dropzone {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; padding: 22px 20px;
  border: 1.5px dashed var(--line-strong); border-radius: 10px; background: var(--field);
  transition: border-color var(--dur-s) var(--ease-standard), background var(--dur-s) var(--ease-standard);
}
.dropzone.drop { border-color: var(--accent-text); background: var(--field-focus); }
.dropzone.has-file { border-style: solid; }
.dz-text { margin: 0; font-size: var(--fs-14); color: var(--ink-soft); overflow-wrap: anywhere; }
.dropzone.has-file .dz-text { color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-13); }
.dropzone:has(input:focus-visible) label.btn { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.imp-note { margin: 0; }
#import-panel > .actions .note, #apply-panel > .actions .note { margin: 0; }
#import-panel > .result.working { margin-top: 18px; }
.props { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.row.prop { padding: 16px; }
.row.prop.is-skip { opacity: .6; }
.prop-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; }
.prop-cols .mini { margin-top: 0; }
.prop-old { border-left: 1px solid var(--line); padding-left: 24px; }
.prop-title { margin: 0; font-size: var(--fs-15); font-weight: 500; }
.prop-text { margin: 0; font-size: var(--fs-15); line-height: 1.5; overflow-wrap: anywhere; }
.prop-meta { margin: 4px 0 0; font-size: var(--fs-13); color: var(--ink-soft); }
.prop-none { margin: 0; font-size: var(--fs-14); color: #8A8499; }
.prop-quote { margin: 8px 0 0; font-size: var(--fs-13); line-height: 1.45; color: var(--ink-soft); font-style: italic; overflow-wrap: anywhere; }
.prop-flag { margin: 8px 0 0; font-size: var(--fs-13); color: var(--err); }
.prop-bullets { margin: 8px 0 0; padding-left: 1.1em; font-size: var(--fs-14); line-height: 1.5; display: grid; gap: 4px; }
.prop-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.prop-pick .field { margin: 0; }
.prop-pick .q { margin-bottom: 6px; }
.prop-pick .q-title { font-size: var(--fs-14); }
.prop-which { flex: 1 1 260px; max-width: 460px; }
.prop-which .txt { padding: 8px 40px 8px 12px; font-size: var(--fs-14); }
.imp-bar.savebar.is-dirty { margin-top: 24px; }
@media (max-width: 720px) {
  .prop-cols { grid-template-columns: minmax(0, 1fr); }
  .prop-old { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
}

/* ---- apply and account ---- */
.settings .actions.first { margin-top: 0; }
.pw-form { max-width: 820px; }

/* ---- phones: 44px targets everywhere you tap ---- */
@media (max-width: 720px) {
  .settings .btn, .settings .pill, .settings .linkbtn { min-height: 44px; }
  .settings .checkrow input { width: 24px; height: 24px; }
  .settings .actions .btn { flex: 0 1 auto; }
  .settings .pills.compact { display: flex; flex-wrap: wrap; }
  .settings .pills.compact .pill { justify-content: flex-start; padding: 8px 14px; }
  .settings .pills.compact .pill span { min-width: 1ch; text-align: center; }
  .txt.sel.is-row, .txt.is-inline { font-size: var(--fs-16); }
  .block-head { flex-wrap: wrap; }
  .ach-foot { grid-template-columns: minmax(0, 1fr); }
  .ach-acts { justify-content: flex-start; gap: 8px 12px; }
}

/* ---- fit scores: the color scale, the bands, what goes into a score ---- */
.fit-scale { position: relative; margin: 4px 0 40px; }
.fit-bar { height: 12px; border-radius: 999px; }
.fit-ticks { list-style: none; margin: 0; padding: 0; position: relative; height: 0; }
.fit-tick {
  position: absolute; top: 10px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .04em; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.fit-tick::before { content: ''; position: absolute; left: 50%; top: -10px; width: 1px; height: 6px; background: var(--line-strong); }
.fit-tick.is-first { transform: none; }
.fit-tick.is-first::before { left: 0; }
.fit-tick.is-last { transform: translateX(-100%); }
.fit-tick.is-last::before { left: auto; right: 0; }
.fit-bands { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.row.fit-band { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 16px; }
.fit-sample .fit-big { display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap; }
.fit-sample .fit-num { font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.fit-sample .fit-of { font-size: var(--fs-13); }
.fit-band-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 2px; }
.fit-band-name { font-size: var(--fs-15); font-weight: 500; line-height: 1.35; }
.fit-band-range { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .04em; color: var(--ink-soft); }
.fit-band-text { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-soft); max-width: 72ch; text-wrap: pretty; }
.fit-note { margin-top: 14px; max-width: 72ch; }
.fit-lead { margin: 0 0 18px; font-size: var(--fs-16); line-height: 1.5; max-width: 72ch; text-wrap: pretty; }
.group > .fit-lead:last-child { margin-bottom: 0; }
.fit-factors { margin: 0; display: grid; }
.fit-factor { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.fit-factor:last-child { padding-bottom: 0; }
.fit-factor dt { font-size: var(--fs-15); font-weight: 500; line-height: 1.5; }
.fit-factor dd { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-soft); max-width: 72ch; text-wrap: pretty; }
@media (max-width: 600px) {
  .row.fit-band { grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 12px; }
  .fit-sample .fit-num { font-size: 1.5rem; }
  .fit-factor { grid-template-columns: minmax(0, 1fr); }
}