/* ============================================================
   PASSAGE — APPLICATION TYPES, the firm's own handbook.

   An RCIC wrote down how he actually runs eight application types: the forms
   each one needs, the documents he collects, and the qualifier he writes
   beside an item that is not always required ("if applicable", "where
   required"). This screen is that handbook, inside the app, editable by the
   firm — and marked, row by row, with where each line came from and whether
   a human has checked it.

   Since CONTRACT9 (23 Sep 2026) a line can come from three places, not two:
   the handbook (solid green), the firm (solid grey), or PASSAGE'S OWN
   PROPOSAL (dashed blue, pencil). The dash is the point — it is the only
   dashed edge on this screen, so "provisional" survives greyscale and a
   colour-blind reader. Removed lines, which used to be invisible with no way
   back, are struck through in their own block behind a toggle.

   Everything here is prefixed `at-`. It consumes styles.css tokens only and
   reuses the shared shell classes — .panel, .panel-title, .btn, .pill,
   .chip, .frow/.fld, .empty, .emp-card-head/.emp-ava/.emp-id — so a change
   to the house look reaches this screen without being copied into it.

   Cards follow the v103 restack (updates.js v103): head, status, labelled
   facts, foot — in that order, the name at full width, nothing beside it.
   ============================================================ */

/* ---------- page shell ---------- */

.at-page { display: block; }

.at-head {
  display: flex; align-items: flex-end; gap: 14px;
  flex-wrap: wrap; margin: 4px 0 14px;
}
.at-head .at-h-txt { min-width: 0; flex: 1 1 320px; }
.at-h1 {
  font-family: var(--disp, sans-serif); font-weight: 700;
  font-size: 26px; line-height: 1.15; letter-spacing: -.01em;
  color: var(--ink, #1A1B18); margin: 0;
}
.at-sub {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft, #6A685F);
  margin-top: 5px; max-width: 62ch;
}
.at-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- the "what has been checked" banner ----------
   The seeded handbook is somebody's typing until BRC has read it back. The
   banner says so in one sentence and never pretends a count is progress
   the firm made — it is work still owed. */
.at-vet-banner {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--stroke, rgba(26,27,24,.12));
  border-left: 3px solid var(--gold, #A9824C);
  background: rgba(169, 130, 76, .07);
  border-radius: var(--r-md, 16px);
  padding: 12px 14px; margin-bottom: 14px;
}
.at-vet-banner.at-all-done {
  border-left-color: var(--green, #1E3A33);
  background: rgba(30, 58, 51, .06);
}
/* The proposed banner sits above the vetting one and says the louder thing:
   some of what is on this screen is Passage's suggestion, not the firm's. */
.at-vet-banner.at-prop-banner {
  border-left: 3px dashed #7189B5;
  background: rgba(43, 68, 105, .05);
  border-color: rgba(43,68,105,.18);
  border-left-color: #7189B5;
}
.at-prop-banner .at-vet-orb { background: rgba(43,68,105,.12); color: #2B4469; }
.at-vet-orb {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(169, 130, 76, .16); color: var(--gold-deep, #8A6634);
}
.at-all-done .at-vet-orb { background: rgba(30,58,51,.12); color: var(--green, #1E3A33); }
.at-vet-orb svg { width: 15px; height: 15px; }
.at-vet-txt { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--ink, #1A1B18); }
.at-vet-txt b { font-weight: 700; }
.at-vet-txt .at-vet-sub { display: block; color: var(--ink-soft, #6A685F); font-size: 12px; margin-top: 2px; }

/* ---------- filter row ---------- */

.at-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.at-search {
  flex: 1 1 240px; min-width: 0; max-width: 360px;
  border: 1px solid var(--stroke, rgba(26,27,24,.12));
  background: rgba(255,255,255,.6);
  border-radius: var(--r-sm, 10px);
  padding: 8px 12px; font: inherit; font-size: 13px; color: var(--ink, #1A1B18);
}
.at-search:focus { outline: none; border-color: var(--gold, #A9824C); }
.at-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- the library ---------- */

.at-fam-panel { margin-bottom: 14px; }
.at-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px; align-items: stretch;
}

.at-card {
  display: flex; flex-direction: column;
  text-align: left; width: 100%;
  border: 1px solid var(--stroke, rgba(26,27,24,.12));
  background: rgba(255,255,255,.55);
  border-radius: var(--r-md, 16px);
  padding: 14px; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.at-card:hover, .at-card:focus-visible {
  border-color: var(--gold, #A9824C);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft, 0 10px 30px -18px rgba(60,46,20,.35));
  outline: none;
}
/* v103: cards in one row line up block-for-block. Four blocks, so span 4. */
@supports (grid-template-rows: subgrid) {
  .at-grid { grid-auto-rows: auto; }
  .at-grid > .at-card { display: grid; grid-row: span 4; grid-template-rows: subgrid;
                        grid-template-columns: minmax(0, 1fr); row-gap: 0; align-content: start; }
}
.at-card > .at-foot { margin-top: auto; }

/* 1. head — the name runs the full width, nothing sits beside it */
.at-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.at-orb {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-sm, 10px);
  display: grid; place-items: center;
  background: rgba(169,130,76,.14); color: var(--gold-deep, #8A6634);
  font-family: var(--disp, sans-serif); font-weight: 700; font-size: 11px;
  letter-spacing: .02em;
}
/* v103, literally: the name runs the full width and the sub-line goes
   UNDER it. These are spans inside a button, so they need display:block —
   left inline, the summary sits beside the name and squeezes it, which is
   the exact fault v103 was written to fix. */
.at-card-id { display: block; min-width: 0; }
.at-card-name {
  display: block;
  font-family: var(--disp, sans-serif); font-weight: 700; font-size: 14px;
  line-height: 1.3; color: var(--ink, #1A1B18); overflow-wrap: break-word;
}
.at-card-sub { display: block; font-size: 11.5px; line-height: 1.35; color: var(--ink-faint, #9B988D); margin-top: 2px; }

/* 2. status — pills on their own line */
.at-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* 3. facts — label | value, same lines on every card, a gap keeps its line */
.at-facts { margin-top: 10px; }
.at-line {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 10px; align-items: start;
  font-size: 12px; line-height: 1.45; color: var(--ink-soft, #6A685F); margin-top: 4px;
}
.at-line > .k { color: var(--ink-faint, #9B988D); white-space: nowrap; }
.at-line > .v { min-width: 0; overflow-wrap: break-word; }

/* 4. foot */
.at-foot {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--stroke-soft, rgba(26,27,24,.07));
}

/* ---------- provenance + vetting marks ----------
   Two different questions, so two different marks. WHERE a row came from is
   permanent (the handbook, or the firm). WHETHER it has been checked is a
   state that an edit resets. They must never look like one another. */
.at-src {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.at-src-brc  { background: rgba(47,82,73,.10); color: var(--green, #1E3A33); border-color: rgba(47,82,73,.22); }
.at-src-firm { background: rgba(26,27,24,.05); color: var(--ink-soft, #6A685F); border-color: var(--stroke, rgba(26,27,24,.12)); }

/* The third state. It is told apart three ways at once, not one: a DASHED
   edge (nothing else on this screen is dashed), a pencil, and the sentence
   itself. A reader who cannot separate the blue from the green, or who prints
   the page, still sees that this line is provisional. */
.at-src-prop {
  background: rgba(43,68,105,.07); color: #2B4469;
  border-color: rgba(43,68,105,.40); border-style: dashed;
}
.at-src-prop svg { width: 11px; height: 11px; }
.at-src-mostly { border-style: solid; background: rgba(43,68,105,.14); }
/* A line the firm removed: kept, not destroyed, and now visible again. */
.at-src-gone { background: rgba(26,27,24,.05); color: var(--ink-faint, #9B988D); border-color: var(--stroke, rgba(26,27,24,.12)); }

.at-vet {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.at-vet svg { width: 11px; height: 11px; }
.at-vet-yes { background: rgba(30,58,51,.10); color: var(--green, #1E3A33); border-color: rgba(30,58,51,.22); }
.at-vet-no  { background: rgba(169,130,76,.12); color: var(--gold-deep, #8A6634); border-color: rgba(169,130,76,.28); }
/* There is no green tick on a proposed line, ever. */
.at-vet-prop { background: rgba(43,68,105,.07); color: #2B4469; border-color: rgba(43,68,105,.28); border-style: dashed; }

/* A whole card that nobody has checked gets a quiet gold edge, so the
   library answers "what still needs reading?" without being read. */
.at-card.at-unvetted { border-left: 3px solid var(--gold-hi, #D8B877); }
/* Proposed outranks unvetted on the edge: "this is not ours yet" is the more
   important of the two things the card is saying. */
.at-card.at-card-prop { border-left: 3px dashed #7189B5; }
.at-card.at-card-prop .at-orb-prop { background: rgba(43,68,105,.12); color: #2B4469; }
.at-prop-n { color: #2B4469; font-weight: 700; }

/* ---------- the type page ---------- */

.at-detail-head { margin-bottom: 14px; }
.at-detail-head .at-status { margin-top: 8px; }
.at-summary { font-size: 13px; line-height: 1.55; color: var(--ink-soft, #6A685F); margin-top: 8px; max-width: 70ch; }

.at-sec-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* A row in the forms / documents / notes list */
.at-rows { display: flex; flex-direction: column; }
.at-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px; align-items: start;
  padding: 11px 2px;
  border-top: 1px solid var(--stroke-soft, rgba(26,27,24,.07));
}
.at-row:first-child { border-top: 0; }
.at-row.at-row-unvetted { background: linear-gradient(90deg, rgba(169,130,76,.06), transparent 55%); }
.at-row.at-row-prop { background: linear-gradient(90deg, rgba(43,68,105,.055), transparent 55%); }

/* ---------- lines the firm removed ----------
   Archiving a handbook line is what stops the seed putting it back. Until
   this build the line then had nowhere to be: it was not on the page, it was
   not in any count, and nothing could undo it. It is now listed, plainly,
   behind a toggle — quiet enough not to compete with the live list, loud
   enough to be findable by somebody who removed the wrong thing. */
.at-removed-wrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.at-removed-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600;
  border: 1px dashed var(--stroke, rgba(26,27,24,.12));
  background: rgba(255,255,255,.55); color: var(--ink-soft, #6A685F);
  border-radius: 999px; padding: 4px 11px; cursor: pointer;
}
.at-removed-toggle:hover { border-color: var(--gold, #A9824C); color: var(--gold-deep, #8A6634); }
.at-removed-toggle.on { border-style: solid; border-color: var(--gold, #A9824C); color: var(--gold-deep, #8A6634); background: rgba(169,130,76,.08); }
.at-removed-toggle svg { width: 12px; height: 12px; }
.at-removed-note { font-size: 11.5px; line-height: 1.45; color: var(--ink-faint, #9B988D); flex: 1 1 260px; min-width: 0; }

.at-removed-list { margin-top: 10px; border-top: 1px dashed var(--stroke, rgba(26,27,24,.12)); }
.at-removed-head {
  font-family: var(--disp, sans-serif); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint, #9B988D); padding: 12px 2px 2px;
}
.at-removed-panel { opacity: .92; }

/* A removed row has no arrows, so it is two columns, not three — and it
   reads as struck through, which is what it is. */
.at-row.at-row-removed {
  grid-template-columns: minmax(0, 1fr) auto;
  background: rgba(26,27,24,.025);
}
.at-row-removed .at-row-title,
.at-row-removed .at-code,
.at-row-removed .at-note-body { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-soft, #6A685F); }
.at-row-removed .at-code { background: rgba(26,27,24,.06); color: var(--ink-soft, #6A685F); }
.at-row-removed .pill { opacity: .6; }
.at-row-removed .btn svg { width: 12px; height: 12px; margin-right: 2px; }

.at-move { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.at-mbtn {
  width: 22px; height: 18px; line-height: 1; font-size: 9px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--stroke, rgba(26,27,24,.12));
  background: rgba(255,255,255,.7); color: var(--ink-soft, #6A685F);
  border-radius: 5px; padding: 0;
}
.at-mbtn:hover:not([disabled]) { border-color: var(--gold, #A9824C); color: var(--gold-deep, #8A6634); }
.at-mbtn[disabled] { opacity: .35; cursor: default; }

.at-row-body { min-width: 0; }
.at-row-main {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; line-height: 1.4; color: var(--ink, #1A1B18);
}
.at-code {
  font-family: var(--disp, sans-serif); font-weight: 700; font-size: 12.5px;
  letter-spacing: .01em; color: var(--gold-deep, #8A6634);
  background: rgba(169,130,76,.10); border-radius: 6px; padding: 1px 7px;
  white-space: nowrap;
}
.at-row-title { font-weight: 600; overflow-wrap: break-word; min-width: 0; }
.at-row-title.at-untitled { font-weight: 500; color: var(--ink-faint, #9B988D); font-style: italic; }

/* The condition, shown AS WRITTEN. It is in quotation marks because it is a
   quotation: the handbook's own words, not a status this app invented. */
.at-when {
  display: block; margin-top: 3px;
  font-size: 12px; line-height: 1.45; color: var(--ink-soft, #6A685F);
}
.at-when .at-when-q { color: var(--ink, #1A1B18); font-style: italic; }

.at-row-marks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.at-row-ctl { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.at-note-body {
  font-size: 13px; line-height: 1.6; color: var(--ink, #1A1B18);
  overflow-wrap: break-word; white-space: pre-wrap;
}

/* A heading the handbook itself wrote over part of a checklist
   (LMIA-exempt splits its documents into two named groups). */
.at-group-head {
  font-family: var(--disp, sans-serif); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint, #9B988D);
  padding: 14px 2px 4px;
  border-top: 1px solid var(--stroke-soft, rgba(26,27,24,.07));
}
.at-rows > .at-group-head:first-child { border-top: 0; padding-top: 2px; }
.at-group-head + .at-row { border-top: 0; }

.at-count { font-weight: 400; color: var(--ink-faint, #9B988D); }
/* Keeps "seeded from the handbook 23 Sep 2026" from wrapping between the
   phrase and its date, which read like two separate facts. */
.at-nb { white-space: nowrap; }

.at-tick-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--stroke, rgba(26,27,24,.12));
  background: rgba(255,255,255,.7); color: var(--ink-soft, #6A685F);
  border-radius: 999px; padding: 3px 9px; cursor: pointer; font-family: inherit;
}
.at-tick-btn:hover { border-color: var(--green, #1E3A33); color: var(--green, #1E3A33); }
.at-tick-btn svg { width: 11px; height: 11px; }
/* Confirming a proposal is not the same act as vetting a handbook line, so
   it is not the same button. */
.at-tick-btn.at-tick-prop { border-style: dashed; border-color: rgba(43,68,105,.40); color: #2B4469; }
.at-tick-btn.at-tick-prop:hover { border-style: solid; border-color: #2B4469; color: #2B4469; }

/* A warning inside a modal — used where signing off or editing would
   otherwise quietly pass a proposal off as the firm's own. */
.at-m-warn {
  border-left: 3px dashed #7189B5; background: rgba(43,68,105,.05);
  border-radius: var(--r-sm, 10px); padding: 9px 11px;
}

.chip.chip-prop.on { border-style: dashed; }

.at-quiet { font-size: 12.5px; color: var(--ink-faint, #9B988D); padding: 10px 2px; }
.at-flag {
  font-size: 12.5px; color: var(--red, #8C3B2E);
  background: rgba(140,59,46,.07); border: 1px solid rgba(140,59,46,.18);
  border-radius: var(--r-sm, 10px); padding: 10px 12px;
}

/* Modal helpers — the house .frow/.fld do the work; this only adds the
   explanatory line under a field. */
.at-hint { font-size: 11.5px; line-height: 1.45; color: var(--ink-faint, #9B988D); margin-top: 4px; }
.at-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink, #1A1B18); }
.at-check input { width: auto; margin: 0; }

/* ---------- phone ---------- */

@media (max-width: 760px) {
  .at-h1 { font-size: 21px; }
  .at-grid { grid-template-columns: 1fr; }
  .at-head { align-items: flex-start; }
  .at-head-actions { width: 100%; }
  .at-head-actions .btn { flex: 1 1 auto; }
  .at-search { max-width: none; flex-basis: 100%; }

  /* The row goes to two lines rather than squeezing the label into a
     column one letter wide — the mistake v103 was written to fix. */
  .at-row { grid-template-columns: auto minmax(0, 1fr); }
  .at-row.at-row-removed { grid-template-columns: minmax(0, 1fr); }
  .at-row-ctl { grid-column: 1 / -1; justify-content: flex-start; padding-left: 32px; }
  .at-row-removed .at-row-ctl { padding-left: 0; }
  .at-removed-wrap { gap: 6px; }
  .at-removed-note { flex-basis: 100%; }
  .at-line { grid-template-columns: 88px minmax(0, 1fr); }
  .at-vet-banner { border-radius: var(--r-sm, 10px); }
}