/* Feenstra Platform Survey — brand tokens match feenstra-survey (gold/navy). */
:root {
  --navy: #1c2333;
  --gold: #C9A94F;
  --gold-dark: #9A7A34;
  --paper: #faf9f6;
  --ink: #2c2c2c;
  --mid: #6b6b6b;
  --line: #e4e0d6;
  --ok: #2f6b2f;
  --bad: #a5453a;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.5; }

/* Brand header — logo + gold rule, ported from feenstra-review-local's
   manager.html (handoff/INSTRUMENT-REBUILD-SPEC.md's Branding section). */
.d-bar { background: #000; display: flex; align-items: center; gap: 18px; padding: 12px 22px; }
.d-bar img { height: 42px; display: block; }
.d-bar .hdiv { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.18); }
.d-bar .ttl { color: #ede9e0; font-family: var(--serif); font-weight: 400; font-size: 17px; }
.d-bar .ttl small { display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-top: 1px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.d-rule { height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-dark)); }

main.container { max-width: 880px; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; }

/* Focus rings — every interactive control gets the same visible gold ring;
   :focus-visible so it only shows for keyboard/AT users, not every click. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.notice { font-size: 0.82rem; color: #555; background: #fff; border-left: 3px solid var(--gold); padding: 0.8rem 1rem; margin-bottom: 1.2rem; }
.notice-ok { border-left-color: var(--ok); }
.notice-bad { border-left-color: var(--bad); color: var(--bad); }

/* Feedback box (2026-08-07) — a full gold border (not just the left rule
   .notice/.section-card use) so it reads as visually distinct and prominent,
   not just another form section, matching "feature prominently right at the
   top" of the request. */
.fb-box { background: #fff; border: 1px solid var(--gold); border-left-width: 4px; border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.fb-head { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-bottom: 0.25rem; }
.fb-sub { font-size: 0.78rem; color: var(--mid); margin-bottom: 0.8rem; }
.fb-flash { font-size: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 4px; margin-bottom: 0.8rem; }
.fb-flash.fb-ok { background: #eef3ea; color: var(--ok); }
.fb-flash.fb-bad { background: #f7e8e6; color: var(--bad); }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.fb-msg { margin-bottom: 0.8rem; }
.fb-msg textarea.min { width: 100%; }

.section-card, .subcard { background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 1rem; overflow: hidden; }
.section-card-header, .subcard-label { padding: 0.7rem 1rem; font-weight: 600; font-size: 0.8rem; background: #f4f1ea; border-bottom: 1px solid var(--line); }
.section-card-body, .subcard-body { padding: 1rem; }
.subcard { margin-top: 0.8rem; }
.subcard-desc { font-size: 0.76rem; color: var(--mid); margin-bottom: 0.7rem; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; }
/* Same trap as .f[hidden] / .reason-pop[hidden] below: .field sets a bare
   `display`, which beats the UA [hidden]{display:none} rule. Needed for the
   mandate group's mtypesplit reveal (handoff/MANDATE-SECTION-SPEC.md). */
.field[hidden] { display: none; }
.field label { font-size: 0.7rem; color: var(--mid); }
.field .req { color: var(--bad); margin-left: 2px; }
.field-span { grid-column: 1 / -1; }
.input-wrap input, .input-wrap select, .input-wrap textarea { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.82rem; background: #fff; }
/* Scoped to textarea only — a bare .input-wrap rule would silently restyle
   every pre-existing input/select's font-family too (mandate-section
   adversarial review, 2026-08-07). */
.input-wrap textarea { font-family: inherit; resize: vertical; }
.field.field-invalid .input-wrap input, .field.field-invalid .input-wrap select, .field.field-invalid .input-wrap textarea { border-color: var(--bad); }
.help { font-size: 0.66rem; color: #999; }
.error { font-size: 0.68rem; color: var(--bad); }

/* Mode toggle */
.mode-toggle { display: flex; align-items: center; gap: 0.8rem; margin: 1rem 0; }
.mode-label { font-size: 0.76rem; color: var(--mid); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: none; background: #fff; padding: 0.4rem 0.9rem; font-size: 0.76rem; cursor: pointer; color: var(--mid); }
.seg button.on { background: var(--navy); color: #fff; }
.seg button + button { border-left: 1px solid var(--line); }

/* Entity tabs */
.entity-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0 1rem; border-bottom: 1px solid var(--line); }
.etab { border: none; background: none; padding: 0.5rem 0.9rem; font-size: 0.78rem; color: var(--mid); cursor: pointer; border-bottom: 2px solid transparent; }
.etab.active { color: var(--navy); border-bottom-color: var(--gold); font-weight: 600; }
.etab.locked { color: #bbb; }
.locked-panel { padding: 1.2rem; text-align: center; color: var(--mid); font-size: 0.8rem; background: #f4f1ea; border-radius: 6px; }

/* Instrument grid */
.instr-table { display: flex; flex-direction: column; gap: 0.3rem; }
.instr-head, .instr-row { display: grid; grid-template-columns: 70px 90px 2fr 1.2fr 1.4fr 1fr; gap: 0.5rem; align-items: center; }
/* Defence-in-depth for the above: grid/flex children default to min-width:auto,
   so ANY wide child (a long account ref, a stray select) can force its track
   wider than its fr share and silently steal space from its neighbours. This
   pins every track to the declared ratio regardless of content. */
.instr-head > *, .instr-row > * { min-width: 0; }
.instr-head { font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: #999; padding: 0 0.2rem; }
.instr-row { padding: 0.4rem 0.2rem; border-bottom: 1px solid #f0ede3; }
.instr-row.removed { opacity: 0.5; }
.instr-row.removed input, .instr-row.removed select { text-decoration: line-through; }
.instr-cell input, .instr-cell select { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.78rem; }
.instr-account { font-size: 0.72rem; color: var(--mid); font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.src-badge { font-size: 0.58rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 6px; border-radius: 8px; text-align: center; }
.src-badge.supplied { background: #eef3ea; color: var(--ok); }
.src-badge.added { background: #f4ecd8; color: var(--gold-dark); }
.instr-action { display: flex; justify-content: flex-end; }
.instr-remove { display: flex; align-items: center; gap: 0.4rem; }
.reason-pop { display: flex; align-items: center; gap: 0.4rem; }
/* A bare author `display` beats the UA stylesheet's `[hidden]{display:none}`, so
   without this the removal-reason select renders on EVERY supplied row. Because
   grid `1fr` resolves to `minmax(auto,1fr)`, that stray select then forces the
   action track past its share and crushes the 2fr instrument-name column
   (measured: 215px header over a 75px input). Keep this rule next to the one above. */
.reason-pop[hidden] { display: none; }
.reason-pop select { padding: 0.3rem 0.4rem; font-size: 0.72rem; border: 1px solid #ccc; border-radius: 4px; }

.btn, button.btn { display: inline-block; padding: 0.6rem 1.4rem; background: var(--navy); color: #fff; border: none; border-radius: 5px; font-size: 0.82rem; cursor: pointer; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-secondary { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn-link { background: none; border: none; color: var(--gold-dark); font-size: 0.74rem; cursor: pointer; padding: 0.2rem 0.3rem; }
.btn-link.danger { color: var(--bad); }
.btn-icon { background: #fff; border: 1px solid var(--line); border-radius: 4px; font-size: 0.7rem; padding: 0.3rem 0.6rem; cursor: pointer; }

.actions.submit-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.save-status { font-size: 0.7rem; color: #999; }

.msg-card { max-width: 560px; margin: 3rem auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2rem; text-align: center; }
.msg-card h1 { font-size: 1.2rem; margin-bottom: 0.8rem; }
.msg-card p { font-size: 0.86rem; color: var(--mid); margin-bottom: 0.6rem; }

@media (max-width: 640px) {
  .instr-head, .instr-row { grid-template-columns: 50px 1fr; grid-auto-flow: row; }
}

/* ── Card layout: tier-1 sleeve cards + tier-2 CIS cards ─────────────────
   Ported from feenstra-review-local's manager.html (see
   handoff/INSTRUMENT-REBUILD-SPEC.md), adapted to this project's existing
   tokens. Name is display-only text with flex:1 — no max-width, no nowrap —
   so it wraps freely instead of truncating (the whole point of the rebuild:
   the old 215px table cell truncated 81% of instrument names). */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px 9px; align-items: start; }
.grid-sleeve { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.f { display: flex; flex-direction: column; gap: 3px; }
/* Same trap as .reason-pop above: a bare `display` on an element that can
   also carry the `hidden` attribute (ratioF's "describe the period" field,
   the related-party detail field) beats the UA [hidden]{display:none} rule.
   Keep this override next to any .f rule that sets `display`. */
.f[hidden] { display: none; }
.f label { font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--mid); }
.f .req { color: var(--bad); margin-left: 2px; }
/* Base rule for every card-layout control (cardInput() in render.ts) — no
   base rule existed anywhere, so these fell through the file's * reset to
   border-radius:0/padding:0 (mandate-section adversarial review, 2026-08-07).
   Matches .instr-cell input/select above for visual consistency.
   font-family:inherit added 2026-08-12 — a bare .min textarea (the feedback
   box's Message field; also cardInput()'s type:'textarea' branch) has no
   .input-wrap ancestor to inherit the page font from .input-wrap textarea's
   own font-family:inherit rule, so it fell through to the browser's textarea
   UA-default (monospace) instead — found live via getComputedStyle. */
.min { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.78rem; font-family: inherit; background: #fff; }
/* Instrument identity block — first thing in a tier-2 card's drawer. */
.idblk { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--line); }

/* The holdings a tier-1 sleeve card summarises: name + class + remove, and
   deliberately no fee fields (fees are given once for the sleeve above). */
.shwrap { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.shwrap > summary { font-size: 11.5px; color: var(--gold-dark); cursor: pointer; font-weight: 600; }
.shwrap > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.shrow { display: flex; gap: 9px; align-items: flex-end; padding: 7px 0; border-top: 1px solid #f0ede3; }
.shrow:first-of-type { border-top: 0; }
.shrow.removed { opacity: 0.5; }
.shrow.removed .min { text-decoration: line-through; }
.shrow .sh-nm { flex: 1 1 260px; min-width: 0; }
.shrow .sh-ac { flex: 0 1 210px; min-width: 0; }
.shrow .instr-action { flex: none; padding-bottom: 2px; }
@media (max-width: 640px) { .shrow { flex-wrap: wrap; } }

/* One objective block (handoff/MANDATE-SECTION-SPEC.md) — a repeatable card
   row, same flex-row-plus-remove shape as .shrow above. */
.obj-row { display: flex; gap: 9px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #f0ede3; }
.obj-row:first-of-type { border-top: 0; }
.obj-row .grid { flex: 1; }
.obj-row .instr-action { flex: none; padding-top: 15px; }
@media (max-width: 640px) { .obj-row { flex-wrap: wrap; } }
.f.field-invalid .min { border-color: var(--bad); }
.f .error { font-size: 0.68rem; color: var(--bad); margin: 0; }
.f-span { grid-column: 1 / -1; }
.fhint { display: block; font-size: 10px; color: #a79e8c; margin-top: 3px; }

.scard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.scard .sch { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; flex-wrap: wrap; }
.scard .snm { font-weight: 600; font-size: 15px; color: var(--ink); }
.scard .scount { font-size: 11px; color: var(--mid); }
.scard .snote { font-size: 12px; color: var(--mid); margin: 0 0 12px; line-height: 1.5; }

.mrow { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; background: #fff; }
.mrow.removed { opacity: 0.5; }
.mrh { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mrh .nm { flex: 1; min-width: 160px; font-size: 13px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cg { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 7px; align-items: start; }
.ident { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.mrow:not(.editing) .ident { display: none; }

.cb { width: 20px; height: 20px; border: 1.4px solid #ccc; border-radius: 4px; cursor: pointer; background: #fff; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; }
.cb:hover { border-color: var(--navy); }
.cb:disabled { cursor: default; opacity: 0.4; }
.cb.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Bulk-apply (CIS only) — sticky so it stays visible while working down a
   long fund list. No top nav bar in this app (unlike the reference), so a
   modest fixed offset rather than the reference's nav-clearing 52px. */
.bulk { position: sticky; top: 12px; z-index: 5; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); margin-bottom: 12px; }
.bulk .t { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 12.5px; }
.bulk .t b { color: var(--ink); }
.bulk .t .c { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; background: var(--navy); color: #fff; }
.bulk .t .c.z { background: #f4f1ea; color: var(--mid); }

.cx { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #f4f1ea; color: var(--mid); white-space: nowrap; }
.cx.isin { background: #ede4c9; color: var(--gold-dark); }
.cx.acct { font-family: ui-monospace, Menlo, monospace; }

.lnkb { background: none; border: 0; color: var(--gold-dark); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0; }
.lnkb:hover { text-decoration: underline; }
.lnkb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* P-CAP: a fee value paired with the window it was measured over, as one
   grid-spanning unit — see MEASURE_OPTS in definition.ts. */
.rf { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 7px; padding: 8px 9px; margin: 2px 0; background: #f8f6f0; border: 1px solid var(--line); border-radius: 7px; }

.pfblk { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cl { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid); margin-bottom: 6px; font-weight: 600; }

/* In-card note callout (issuer-note card) — same visual family as .notice
   but compact enough to sit inside a .mrow drawer. */
.m-note { background: #f8f6f0; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 13px; font-size: 12.5px; line-height: 1.5; color: var(--mid); margin: 8px 0; }

.attest { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.attest .af { display: flex; flex-direction: column; gap: 6px; }
.reb-more { display: flex; gap: 8px; margin-top: 6px; }
.reb-more[hidden] { display: none; } /* same [hidden] trap as .reason-pop / .f above */
.reb-more .f { flex: 1; }

@media (max-width: 640px) {
  .attest { grid-template-columns: 1fr; }
  .cg, .grid, .grid-sleeve, .rf { grid-template-columns: 1fr; }
}