/* The first minutes of a case (round 11, owner, 25 October 2026: "efficiency, ease of use, appearance … so clear at every
   step … a breeze"). js/views/intake.js: New enquiry (the card is New case's, app.css "Round 8 L" and newcase.css), the
   instruction box on a case with what is picked from it, the group a case is part of, the Cases list's groups, and the
   onboarding list on a client's page. Colours are the theme's tokens only, so light and dark both follow. */

/* The big box the instruction is pasted into: room to read it, 16px so a phone never zooms. */
.ix-big { display: block; width: 100%; min-height: 220px; resize: vertical; font: 400 16px/1.5 var(--f-body); padding: 12px 14px;
  border-radius: 10px; }
.ix-box .ix-big { min-height: 180px; }

/* What is picked from it: each a line saying what it is, the words it came from, and where it would go. */
.ix-picks { margin-top: 14px; }
.ix-picks:empty { display: none; }
.ix-picks-h { margin: 0 0 8px; font: 700 14px/1.35 var(--f-display); color: var(--ink); }
.ix-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ix-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); min-width: 0; }
.ix-pick.used { border-left-color: var(--good); background: var(--sunk); }
.ix-pick.ix-noted { border-left-color: var(--line); background: var(--sunk); }
.ix-pick-t { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.ix-pick-l { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ix-what { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
/* What each part is saved as (walkthrough, 29 October 2026): "Agency: Morgan Homes · Contact: Sasha Morgan". */
.ix-parts { display: block; color: var(--muted); overflow-wrap: anywhere; }
.ix-parts b { color: var(--ink); font-weight: 600; }
.ix-words { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; quotes: "“" "”"; }
.ix-pick-b { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 0; }
.ix-pick-b .btn { white-space: normal; text-align: left; }
.ix-used { white-space: nowrap; }

/* The properties: each its own case. */
.ix-props { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
/* As many boxes a line as fit, each wide enough for a postcode or "135,000" (review, 28 October 2026: six fixed columns
   cut them off once a row had its price, rent and loan); the first line of the address takes two. */
.ix-prop { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 10px;
  align-items: end; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunk); }
.ix-pf { min-width: 0; }
.ix-pf-wide { grid-column: span 2; }
.ix-pc-note { grid-column: 1 / -1; margin: 0; }
.ix-pf input { width: 100%; }
.ix-prop-x span { display: none; }
.ix-group-note { margin: 0 0 10px; display: flex; gap: 8px; align-items: flex-start; }
.ix-group-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* What the case starts with: label, then what is chosen (or what isn't yet). */
.ix-sum { margin: 0; display: grid; }
.ix-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-2); }
.ix-row:first-child { border-top: 0; }
.ix-row dt { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ix-row dd { margin: 0; display: flex; align-items: flex-start; gap: 8px; min-width: 0; flex-wrap: wrap; }
.ix-row-v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* A figure said once for an instruction with several properties: it belongs to none of them until each has its own. */
.ix-warn { display: block; margin-top: 2px; color: var(--warn); font-weight: 600; }
.ix-types { gap: 6px; }
.ix-types .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.ix-sum-help { margin: -4px 0 8px; }
.ix-chosen { max-width: 560px; }
.ix-fresh { max-width: 640px; margin-bottom: 8px; }
.ix-onboard { gap: 8px; align-items: center; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--ink-2); }

/* On the case: the instruction, open at the start; its words as they were pasted. */
.ix-box { margin: 0; }
.ix-box-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; cursor: pointer; list-style: none; }
.ix-box-h::-webkit-details-marker { display: none; }
.ix-box-h::before { content: "▸"; color: var(--muted); }
.ix-box[open] > .ix-box-h::before { content: "▾"; }
.ix-box-h h3 { margin: 0; }
#ix-box-sub { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-box[open] #ix-box-sub { display: none; }
.ix-box-b { display: grid; gap: 12px; }
.ix-kept { border: 1px solid var(--line); border-radius: 10px; background: var(--sunk); }
.ix-kept-text { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; max-height: 320px; overflow: auto; font-size: 14px; line-height: 1.55; color: var(--ink); }
.ix-kept-foot { padding: 6px 10px 8px 14px; border-top: 1px solid var(--line-2); }
.ix-kept > label, .ix-kept > textarea, .ix-kept > .row { margin: 10px 12px; width: auto; }
.ix-box-acts { justify-content: flex-start; }
.ix-done > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--good); padding: 4px 0; }
.ix-done > .ix-pick-list { margin-top: 8px; }

/* The group a case is part of: "Part of: 5 Invented Street West — 3 flats", each case with its step and lender. */
.ix-group { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface); padding: 10px 14px; }
.ix-group-h { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.ix-group-h svg { flex: none; width: 16px; height: 16px; color: var(--accent-2); }
.ix-group-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ix-sib { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 8px; border-radius: 8px; min-width: 0; }
.ix-sib.me { background: var(--accent-soft); }
.ix-sib-t { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
a.ix-sib-t { display: inline-flex; align-items: center; min-height: 32px; }
.ix-sib-l { color: var(--ink-2); }

/* The Cases list: a group's cases sit together, joined by a line down their left. */
.tbl tr.in-group > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.list-card.in-group { border-left: 3px solid var(--accent); }
.ix-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: var(--accent-2); overflow-wrap: anywhere; }
.ix-tag svg { flex: none; width: 12px; height: 12px; }

/* A client's page and a case: the property's items still to come, and the onboarding email. */
.ask-prow { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.ask-prow:last-child { border-bottom: 0; }
.ask-prow .badge { flex: none; margin-top: 2px; }
.ask-prow .ask-words { font-size: 13px; flex-basis: 160px; }
.ask-ob { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); display: grid; gap: 10px; }
.ask-ob-acts { align-items: center; }

@media (max-width: 760px) {
  .ix-prop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ix-pf-wide { grid-column: 1 / -1; }
  .ix-prop-x { grid-column: 1 / -1; justify-self: start; }
  .ix-prop-x span { display: inline; }
}
@media (max-width: 640px) {
  /* Every control at least 44px to press with a finger, whatever the device says about its pointer. */
  .ix-card .btn, .ix-card .chip, #p-instruction .btn, .ask-ob .btn, .dialog #ixg-line1 ~ .btn { min-height: 44px; }
  .ix-row { grid-template-columns: minmax(0, 1fr); }
  .ix-pick { padding: 10px; }
  .ix-pick-b { flex: 1 1 100%; justify-content: stretch; }
  .ix-pick-b .btn { flex: 1 1 auto; justify-content: center; }
  .ix-foot .btn { flex: 1 1 auto; }
  .ix-onboard { flex-basis: 100%; }
}