/* ==========================================================================
   FILLING A TREC FORM, IN THE FORM.  (txn_trec_fill)

   Paired with trec-worksheet.js. Its own file because styles.css is written by
   several sessions at once and a separate file has no collision window.
   STAGING ONLY -- not present in outputs/theboundarystone/.

   ⚠⚠ THIS REPLACED THE QUESTIONNAIRE'S STYLES. The screen now renders the real
   official PDF page and floats one input over each mapped box, so these rules
   are doing something they were not before: they sit on top of a rasterised
   legal document. Two consequences run through everything below.

   1. THE INPUTS MUST NOT HIDE THE FORM. A box is a transparent cell with a
      faint tint -- enough that an agent can see at a glance which boxes are
      fillable, never enough to obscure the printed sentence around it. Do not
      give these a solid background, a border-radius or padding to "tidy them
      up": the printed rule line under the box IS the form's own styling.

   2. ⚠⚠ THE GLOBAL INPUT RULE WOULD DESTROY THE PAGE, AND IT IS THE SINGLE
      MOST LIKELY THING TO BE "SIMPLIFIED" BACK. styles.css carries a GROUPED
      rule -- input, select, textarea { width: 100%; padding: 12px 13px;
      background: var(--white); border-radius: 8px } -- which hits every box on
      this page. Unoverridden, each one renders as an opaque white rounded slab
      with 12px of padding, covering the printed text it is supposed to sit
      inside, and every checkbox becomes a full-width bar. CLAUDE.md records
      this costing hours once, and notes the selector is a grouped multi-line
      one, so grepping for the checkbox type does NOT find it -- grep for a
      line beginning "input," instead. The width / height / padding /
      background overrides below are load-bearing.

   ⚠ Every class named here is asserted to exist by
   outputs/meridian/trec-worksheet-regression.js, because CSS has no
   missing-symbol error: a deleted rule is invisible to every other check and
   the feature simply renders with browser defaults.
   ========================================================================== */

#trecWorksheetHost { display: none; }
#trecWorksheetHost.is-open { display: block; }

.tw-shade {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.62);
  z-index: 4000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 10px;
}

.tw-panel {
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(10, 22, 40, 0.4);
}

/* The document view fills the screen: an agent is reading a contract, not
   peering at it through a dialog. ⚠ THE WIDTH IS LOAD-BEARING, not taste --
   the opening zoom is computed to fit the page into THIS box, so narrowing it
   shrinks the rendered contract. It was 1180px and a letter page came out about
   two thirds of the width of a laptop screen, which is unreadable. */
.tw-panel-doc { width: 100%; max-width: min(1600px, 97vw); overflow: hidden; }

/* Loading, refusals and the form picker stay small and centred. */
.tw-panel-msg {
  width: min(680px, 100%);
  align-self: flex-start;
  margin-top: 8vh;
  max-height: 80vh;
  overflow: auto;
}

.tw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid #e3e8ef;
}
.tw-head h2 { margin: 0 0 3px; font-size: 1rem; color: #14243d; }
.tw-prov { margin: 0; font-size: 0.76rem; color: #5a6b83; }

.tw-close {
  width: auto;
  min-width: 0;
  padding: 7px 14px;
  border: 1px solid #c8d2e0;
  border-radius: 8px;
  background: #fff;
  color: #14243d;
  cursor: pointer;
}

/* ---- the toolbar over the document ------------------------------------- */

.tw-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 18px;
  border-bottom: 1px solid #e3e8ef;
  background: #f4f7fb;
}
.tw-bar-spacer { flex: 1 1 auto; }
.tw-progress-chip { font-size: 0.8rem; color: #14243d; font-weight: 600; }

.tw-zoom { display: inline-flex; align-items: center; gap: 6px; }
.tw-zoom-label { font-size: 0.76rem; color: #5a6b83; min-width: 42px; text-align: center; }
.tw-zoom-btn {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #c8d2e0;
  border-radius: 6px;
  background: #fff;
  color: #14243d;
  cursor: pointer;
  line-height: 1;
}

.tw-banner { font-size: 0.78rem; color: #5a6b83; }
.tw-banner.is-ok { color: #1c5132; }
.tw-banner.is-error { color: #8a1c1c; }

.tw-produce {
  width: auto;
  min-width: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: #14243d;
  color: #fff;
  cursor: pointer;
}
.tw-produce[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Taking a working copy is the quieter of the two actions, and looks it: it
   files nothing, starts no retention clock and can be pressed all day. The
   filled button is the one that writes a record.
   ⚠ EXPLICIT width/min-width/padding LIKE EVERY CONTROL ON THIS PAGE. styles.css
   carries a GLOBAL grouped rule beginning "input," plus button rules, and
   without these a button in this bar renders full width. */
.tw-secondary {
  width: auto;
  min-width: 0;
  padding: 8px 14px;
  border: 1px solid #c8d2e0;
  border-radius: 8px;
  background: #fff;
  color: #14243d;
  cursor: pointer;
}
.tw-secondary:hover { border-color: #14243d; }
.tw-secondary[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---- the pages ---------------------------------------------------------- */

.tw-doc {
  flex: 1 1 auto;
  overflow: auto;
  background: #55617a;      /* the grey a document reader puts behind paper */
  padding: 18px 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.tw-page {
  position: relative;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  flex: 0 0 auto;
}
.tw-page canvas { display: block; }

.tw-page-label {
  position: absolute;
  left: 0;
  bottom: -17px;
  font-size: 0.68rem;
  color: #d7dded;
}

/* The overlay must not eat clicks meant for the page; only the cells do. */
.tw-layer { position: absolute; inset: 0; pointer-events: none; }

/* ⚠ THE TINT LIVES ON THE CELL, NOT ON THE INPUT, and that split is deliberate.
   The cell is exactly the widget rectangle, so the highlight shows the box the
   form actually has. The input inside it is TRANSLATED to put the typed
   baseline on the printed rule -- if the tint travelled with it, the highlight
   would drift off the box it is meant to mark. */
.tw-cell {
  position: absolute;
  pointer-events: auto;
  background: rgba(37, 99, 235, 0.09);
  box-shadow: inset 0 -1px 0 rgba(37, 99, 235, 0.35);
}

/* ⚠ See point 2 in the header. These overrides are what stop the global input
   rule covering the printed form with opaque rounded slabs. */
.tw-box {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  /* Transparent: the cell behind it carries the tint. See the note on .tw-cell. */
  background: transparent;
  box-shadow: none;
  color: #10233f;
  /* Stated rather than inherited, so height:100% cannot mean "100% plus
     whatever padding a global rule adds". */
  box-sizing: border-box;
}
/* ⚠ AN EXPLICIT FACE, NOT `inherit`. Where the baseline of a typed value lands
   depends on the font's ascent, so inheriting whatever the app's body font
   happens to be makes the alignment against the printed rule vary with an
   unrelated design decision. TREC sets these forms in Helvetica/Arial, so the
   typed text uses the same and sits in the same place. line-height: 1 keeps the
   line box equal to the type size, which is what the baseline arithmetic in
   buildControl assumes. */
.tw-box-text { line-height: 1; font-family: Arial, Helvetica, sans-serif; }
.tw-box-check {
  /* A checkbox still needs a real glyph, so it keeps the browser's own control
     and loses only the global rule's padding and rounding. */
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
}
.tw-cell:hover { background: rgba(37, 99, 235, 0.17); }
.tw-cell:focus-within { background: rgba(37, 99, 235, 0.05); outline: 2px solid #2563eb; }
.tw-box:focus { outline: none; }

.tw-cell.is-filled { background: rgba(28, 122, 68, 0.10); box-shadow: inset 0 -1px 0 rgba(28, 122, 68, 0.45); }
.tw-cell.is-saving { background: rgba(120, 130, 150, 0.18); }
.tw-cell.has-error { background: rgba(200, 30, 30, 0.14); box-shadow: inset 0 -1px 0 rgba(160, 20, 20, 0.6); }

/* A PROPOSED value (2026-10-10): read by the server from the linked listing, the
   client record, the county appraisal roll or the deal's title company, shown on
   the line where it will print, and NOT counted as filled until the person clicks
   the tick or types over it. Amber, so it can never be mistaken for the green of
   a confirmed box. The tick sits outside the box so it covers no printed text. */
.tw-cell.is-proposed { background: rgba(217, 119, 6, 0.16); box-shadow: inset 0 -1px 0 rgba(180, 83, 9, 0.7); }
.tw-cell.is-proposed .tw-box-text { color: #7c2d12; }
.tw-cell.is-proposed .tw-mark { display: none; }
.tw-confirm {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 4px;
  /* Beats the global button/input rules the same way .tw-box does. */
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 2px 5px;
  font: 600 10px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid #b45309;
  border-radius: 4px;
  background: #fff7ed;
  color: #9a3412;
  cursor: pointer;
  z-index: 2;
}
.tw-confirm:hover { background: #ffedd5; }
.tw-cell.is-saving .tw-confirm { opacity: 0.5; pointer-events: none; }

.tw-mark {
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  line-height: 1;
  color: #1c7a44;
  pointer-events: none;
}
.tw-cell.has-error .tw-mark { color: #b02020; }

/* The server's refusal, against the box it refused. Positioned out of flow so a
   long sentence never reflows the page it is sitting on. */
.tw-cell-error {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  margin: 3px 0 0;
  min-width: 220px;
  max-width: 340px;
  padding: 6px 8px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #fff;
  background: #8a1c1c;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tw-foot-note {
  margin: 0;
  padding: 9px 18px;
  font-size: 0.73rem;
  color: #5a6b83;
  border-top: 1px solid #e3e8ef;
  background: #fafcfe;
}

/* ---- picker, loading, refusals ------------------------------------------ */

.tw-picklist { list-style: none; margin: 0; padding: 8px 18px 18px; overflow: auto; }
.tw-picklist li { margin: 0 0 8px; }
.tw-pick {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #c8d2e0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.tw-pick strong { color: #14243d; font-size: 0.9rem; }
.tw-pick span { color: #5a6b83; font-size: 0.78rem; }

/* Shown when the screen was opened for a form that is NOT active for filling:
   the refusal, above the forms that ARE. */
.tw-pick-notice {
  margin: 0;
  padding: 10px 18px;
  font-size: 0.8rem;
  color: #6b4a12;
  background: #fdf5e4;
  border-bottom: 1px solid #efe1c2;
}

.tw-empty, .tw-loading { padding: 24px 18px; color: #5a6b83; font-size: 0.85rem; }
.tw-fail { padding: 16px 18px; color: #8a1c1c; font-size: 0.85rem; }

/* ---- the two ways in, rendered by app.js -------------------------------- */

/* Styled HERE rather than in styles.css on purpose: styles.css is written by
   several sessions at once, and this feature keeps its whole footprint in its
   own files apart from the two lines that render these. */
.txn-doc-fillin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.txn-doc-fillin small { color: #5a6b83; font-size: 0.74rem; }
.txn-doc-fill {
  width: auto;
  min-width: 0;
  padding: 8px 16px;
  border: 1px solid #14243d;
  border-radius: 8px;
  background: #14243d;
  color: #fff;
  cursor: pointer;
}

/* Per-card "Fill this in". The cards name a form, so they read as the way in --
   Matt tried clicking them before finding the panel-level button. */
.txn-doc-row-fill {
  width: auto;
  min-width: 0;
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid #c8d2e0;
  border-radius: 999px;
  background: #fff;
  color: #14243d;
  font-size: 0.74rem;
  cursor: pointer;
}
/* A deal nobody may write to offers no fill button. The server refuses the
   write anyway (meridian_txn_require_write), so this is the visible half of a
   gate that is already closed -- never the gate itself. */
[data-txn-doc-readonly] .txn-doc-row-fill { display: none; }

@media (max-width: 720px) {
  .tw-shade { padding: 0; }
  .tw-panel-doc { border-radius: 0; }
  .tw-doc { padding: 10px 0 24px; }
}

/* A page that would not draw says so, rather than presenting as blank -- a
   blank page and a page of unseen contract terms look identical. */
.tw-page-failed {
  position: absolute;
  inset: 40% 12% auto;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e0c8c8;
  border-radius: 8px;
  background: #fff;
  color: #8a1c1c;
  font-size: 0.85rem;
  text-align: center;
}

/* ==========================================================================
   A CONTRACT AND ITS ADDENDA IN ONE SCROLL, AND AN EMPTY SHEET AT THE END.
   Matt, 2026-09-18: "if I check boxes in the contract that there are additional
   documents, it automatically adds them to the bottom of the contract to fill
   out and leaves button at the end, centered as if it were on a page of it's own
   that was fully transparent except for the button that says 'add document'".

   ⚠ .tw-doc IS A CENTRED FLEX COLUMN, so each document block is itself a
   centred column rather than a full-width band -- otherwise the pages inside it
   would left-align against the grey while the contract's pages sit centred.
   ========================================================================== */

.tw-docblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

/* The strip above each document: what it is, how full it is, and -- for
   anything after the contract -- how to take it off. */
.tw-docblock-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  max-width: 900px;
  padding: 2px 4px;
  color: #eef1f6;
}
.tw-docblock-name { font-size: 0.92rem; }
.tw-docblock-name strong { color: #fff; }
.tw-docblock-title {
  color: #c6cfe0;
  font-size: 0.82rem;
}
.tw-docblock-count {
  margin-left: auto;
  font-size: 0.76rem;
  color: #c6cfe0;
  white-space: nowrap;
}
.tw-docblock-drop {
  padding: 4px 10px;
  border: 1px solid #8d97ad;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #eef1f6;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}
.tw-docblock-drop:hover { background: rgba(255, 255, 255, 0.16); }

/* ⚠ A FORM THE CONTRACT NAMES THAT WE CANNOT FILL IN HERE YET. It renders where
   the form would have gone, as a card that is plainly NOT a page -- an empty
   sheet with boxes on it would claim to be a promulgated form, which 22 TAC
   537.11(h) is precisely about. */
.tw-docblock-notice {
  width: 100%;
  max-width: 900px;
  align-items: stretch;
  padding: 12px 14px;
  border: 1px dashed #97a2b8;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  gap: 6px;
}
.tw-docblock-notice .tw-docblock-head { padding: 0; }
.tw-notice-body {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #e4e9f3;
}

/* "+ 2 more in this set", in the title bar. */
.tw-setcount {
  font-weight: 400;
  font-size: 0.8rem;
  color: #5a6b83;
}

/* ⚠ THE SHEET AT THE END IS TRANSPARENT ON PURPOSE -- no white page, no border,
   nothing but the button, centred, in the same column the pages occupy. It is
   INSIDE the scroll because the gesture is "I have reached the end of what I am
   writing, and there is another document to write". */
.tw-addpage {
  flex: 0 0 auto;
  width: 100%;
  max-width: 900px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
}
.tw-addbtn {
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.tw-addbtn:hover { background: rgba(255, 255, 255, 0.2); }

/* Pressed, the sheet becomes the list of what can be added. */
.tw-addlist {
  width: 100%;
  padding: 16px 18px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.tw-addlist h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: #14243d;
}
.tw-addpicklist { list-style: none; margin: 0 0 10px; padding: 0; }
.tw-addpicklist li { margin: 0 0 8px; }
.tw-addpick {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #c8d2e0;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.tw-addpick strong { color: #14243d; font-size: 0.9rem; }
.tw-addpick span { color: #5a6b83; font-size: 0.78rem; }
/* A form already in the set is SHOWN, greyed, rather than hidden: an agent
   looking for it needs to learn it is above them, not that it vanished. */
.tw-addpick.is-already {
  cursor: default;
  background: #f4f6fa;
  color: #5a6b83;
}
.tw-addcancel {
  padding: 8px 14px;
  border: 1px solid #c8d2e0;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* A form this brokerage has not authorised: readable, not producible. Said in
   the provenance line where the broker's name would otherwise be, because that
   is exactly the claim being withdrawn. */
.tw-unauthorised {
  color: #8a1c1c;
  background: #fdeaea;
  border-radius: 6px;
  padding: 1px 7px;
}

/* ⚠ A VALUE LONGER THAN ITS PRINTED LINE. Until 2026-09-18 the overflow was
   silently dropped when the form was produced -- 270 characters in, 124 out, no
   error anywhere. The worker refuses now; this is what says so while somebody is
   still typing, which is the only moment the warning helps. */
.tw-cell.is-overflow .tw-box-text {
  background: #fdeaea;
  box-shadow: inset 0 -2px 0 #c0392b;
}
.tw-cell-overflow {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 3;
  margin: 2px 0 0;
  padding: 4px 8px;
  max-width: 420px;
  border-radius: 6px;
  background: #8a1c1c;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.35;
  pointer-events: none;
}