/* Ignite › Tickets, a ticket (the office's side) and Verify Day — 3.0. Their own looks only, every one built from
   tokens.css; the shared pieces (glass, strip, seg, subtabs, chip, status, pop, table.t, phone-cards, flags, src) come
   from components.css, and the filter rows and card tops reuse the projects list's .ih-row, .ih-search, .ih-tools,
   .ih-sort and .ih-cardtop. Every class here starts with tix- so nothing on another screen can pick it up. */

/* ---- the page: one column of blocks, the house's one vertical rhythm */
.tix { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.tix h2 { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-x); }
.tix h3 { margin: 0 0 10px; font-size: var(--fs-m); font-weight: var(--fw-bold); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tix h3 .hint, .tix h2 .hint { font-weight: var(--fw-semi); }
.tix p { margin: 0; }
.tix .ih-tools { grid-template-columns: minmax(0, 1fr); }   /* the views scroll inside their bar on a phone instead of widening the panel */
.tix .status { min-width: 128px; }
.tix a.name { font-weight: var(--fw-bold); color: var(--ink); }
.tix .subtabs em { font-style: normal; font-weight: var(--fw-semi); color: var(--faint); }
.tix .pad > .hint + *, .tix .pad > h2 + .hint { margin-top: 4px; }
.tix-who { display: inline-flex; color: inherit; text-decoration: none; }
.tix-who:hover { text-decoration: none; }
.tix-who:hover .who > span:last-child { text-decoration: underline; }
.tix-grow { flex: 1 1 220px; min-width: 0; }
.tix-bad { color: var(--bad); font-weight: var(--fw-semi); }
.tix-ok { color: var(--ok); font-weight: var(--fw-semi); }
.tix-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tix-quote { font-style: italic; color: var(--ink-2); margin-top: 4px; }
.tix-mount:empty, .tix #tkLineHist:empty { display: none; }
.tix-check { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 13px; cursor: pointer; }
.tix-check input { width: 16px; height: 16px; flex: none; margin: 2px 0 0; accent-color: var(--ink); }
.tix-busy { pointer-events: none; opacity: .5; }

/* ---- the list: filters, ticks and a row's own menu */
.tix-find { align-items: flex-end; }
.tix-find .ih-search { align-self: flex-end; }
.tix-date { flex: 0 0 158px; }
.tix-date .input { min-width: 0; }
.tix-bulk { min-height: 32px; }
.tix-tick { width: 40px; }
.tix-tick input, .tix-cardname input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.tix-cardname { display: inline-flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
.tix-cardrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.tix .cards .card { display: grid; gap: 6px; margin: 0; }
.tix-end { justify-content: flex-end; flex-wrap: nowrap; }
.tix-sechead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; }
.tix-fold { border-top: 1px solid var(--hair); padding: 12px 16px; }
.tix-fold summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.tix-fold .table-wrap { margin-top: 10px; }
@media (max-width: 1180px) { .tix th.tix-wide, .tix td.tix-wide { display: none; } }

/* ---- a list of rows with their actions at the end (crew asks, the Verify Day queues) */
.tix-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.tix-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--hair); }
.tix-row:first-child { border-top: 0; }
.tix-row-main { flex: 1 1 280px; min-width: 0; }
.tix-row-end { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.tix-queue { margin: 0; padding: 4px 16px; }
.tix-qnote { margin: 0; }

/* ---- Management Review */
.tix-rv .status { min-width: 92px; }
.tix-rv td, .tix-rv th { padding-left: 8px; padding-right: 8px; }
.tix-rvproj { min-width: 180px; }
.tix-rvnote { min-width: 140px; }
.tix-rvgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.tix-rvgrid .select-wrap, .tix-rvgrid .status { width: 100%; }
@media (min-width: 1181px) { .tix-side .tix-rvgrid { grid-template-columns: minmax(0, 1fr); } }   /* beside the ticket it is one narrow column; below it, two */
tr.tix-done td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.card.tix-done { box-shadow: inset 3px 0 0 var(--ok); }

/* ---- a coloured edge down a card's left side: what state it is in, readable stacked or side by side */
.tix-vc, .tix-rwc { position: relative; overflow: hidden; display: grid; gap: 8px; }
.tix-vc::before, .tix-rwc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tix-edge, var(--hair-2)); }
.tix-edge-ok { --tix-edge: var(--ok); } .tix-edge-warn { --tix-edge: var(--warn); } .tix-edge-bad { --tix-edge: var(--bad); } .tix-edge-info { --tix-edge: var(--info); }
.tix-cards { display: grid; gap: 10px; }
.tix-cards:has(> .tix-rwc) { gap: var(--gap); }   /* Rework's cards are the page's panels: 16 apart (K4 measured 10) */
.tix-rwtop, .tix-vctop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; }
.tix-rwtop > div:first-child, .tix-vctop > div:first-child { flex: 1 1 280px; min-width: 0; }
.tix-vcright { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tix-vcmeta { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tix-vc { gap: 6px; padding-top: 12px; padding-bottom: 12px; }
.tix-vc .flags li { padding: 6px 10px; }
.tix-tklink { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink); text-decoration: none; }
.tix-tklink:hover b { text-decoration: underline; }
.tix-tklink > .hint { flex: 1 1 14em; min-width: 0; }
.tix-issues { margin-top: 2px; }
.tix-rwwhat { font-size: 13.5px; }

/* ---- definition lists: a label over its value, as many across as fit */
.tix-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 20px; margin: 0; }
.tix-dl dt { font-size: 12px; font-weight: var(--fw-semi); color: var(--muted); margin-bottom: 3px; }
.tix-dl dd { margin: 0; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
/* a chip among the facts wraps inside its cell, never past the card: Rework's "Sin boleta de retrabajo vinculada" ran 46px
   over a 375 card's edge, and "No redo ticket linked" 6px over at 320 (w26fix; the kit's .sbe-gc chip, M4) */
.tix-dl dd > .chip { max-width: 100%; height: auto; min-height: 22px; padding-block: 3px; line-height: 1.3; white-space: normal; overflow-wrap: normal; }
.tix-faces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* ---- one ticket: head, the things to know, the five steps beside what was said about the day */
.tix-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 2px; }
.tix-title h1 { margin: 0; }
.tix-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.tix-meta a { color: var(--ink-2); font-weight: var(--fw-semi); }
.tix-meta b { color: var(--ink-2); }
.tix-lead { display: inline-flex; align-items: center; gap: 6px; }
.tix-th > div:first-child { flex: 1 1 420px; min-width: 0; }
.tix-flagacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.tix-flags .tix-check { margin-top: 8px; }
.tix-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.tix-main, .tix-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.tix-card { display: grid; gap: 8px; }
.tix-card .textarea { min-height: 84px; }
@media (max-width: 1180px) { .tix-body { grid-template-columns: minmax(0, 1fr); } }

/* the step bar: the crew's five steps, each a jump to its section */
.tix-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: var(--r-xl); background: var(--glass-b); border: 1px solid var(--hair); }
.tix-steps button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: var(--r-l); cursor: pointer; transition: background var(--t-quick); }
.tix-steps button:hover, .tix-steps button:focus-visible { background: var(--well); }
.tix-steps b { display: block; font-size: 13px; line-height: 1.25; color: var(--ink); }
.tix-steps small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tix-steps button > span:last-child { min-width: 0; }
.tix-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.tix-step { scroll-margin-top: 12px; }
.tix-stephead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.tix-stephead h2 { display: inline-flex; align-items: center; gap: 10px; }
.tix-stephead .actions { gap: 6px; }
.tix-sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.tix-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.tix-row2 .field .hint { margin-top: 2px; }
/* w45-13 (W43 design review): the kit holds a lone figure box to 12rem (192px), which cut "Leave blank to bill the lines" at 16px on a phone
   (195 of 168). Amount to bill for the day is a figure with a sentence in it, so it gets 16rem. */
.tix-row2 .field > .input.n.tix-billamt { max-width: 16rem; }
.tix-worktable { overflow-x: auto; }
.tix-step > .hint + .tix-worktable, .tix-step .card + .tix-worktable { margin-top: 10px; }
.tix-step > .actions { margin-top: 10px; align-items: center; }
.tix-value p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 12px; }
.tix-big { font-size: 22px; font-weight: var(--fw-x); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tix-step .card { margin: 12px 0 0; }   /* the 2.x cards a step still draws (hours check, materials, waiting, edits) */
.tix-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tix-photos figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.tix-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-m); border: 1px solid var(--hair); background: var(--well); }
.tix-photos figcaption { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.tix-photoline + .tix-photoline { margin-top: 14px; }
.tix-photoline .hint { margin-bottom: 6px; }
/* Time */
.tix-timewrap, .tix-rcwrap { margin: 0 -4px; }
.tix-time td, .tix-time th { white-space: nowrap; }
.tix-time td.tix-said { white-space: normal; min-width: 200px; }
.tix-time tfoot td { border-bottom: 0; padding-top: 8px; padding-bottom: 4px; }
.tix-said > div + div { margin-top: 4px; }
.tix-said .chip { margin-right: 4px; }
.tix-stamps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
/* a trip time a crew member took from the crew lead's row (w22lead): the same figure, quieter — muted ink, a dotted rule
   under it — so it reads as the lead's, not as something typed for that person; "their in / out" when cut to their clock */
.tix-inh { color: var(--muted); text-decoration: underline dotted var(--hair-2); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.tix-inh i { font-style: normal; font-size: 11.5px; font-weight: 650; }
.tix-preset { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.tix-inhnote .tix-inh, .tix-filed .tix-inh { text-decoration-color: var(--muted); }
/* in the Time table the "their in / out" goes under the time and the lead's chip under the name, so the table still fits
   at 1440 with the pencil in view (design review, w22lead) */
.tix-time .tix-inh i { display: block; line-height: 1.2; }
.tix-time td:first-child > .chip { display: block; width: max-content; margin-top: 2px; }
.tix-tfl { display: block; font-size: 12px; line-height: 1.3; }
.tix-time td:first-child .tix-tfl { white-space: normal; max-width: 220px; }   /* an exception's reason wraps under the name instead of widening the table (w53a) */
.tix-timewrap .ih-cardtop > span:last-child { flex: none; white-space: nowrap; }
.tix-inhf .input { color: var(--muted); border-style: dashed; }
.tix-filed b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tix-filed .tix-pair { white-space: nowrap; }
.tix-totals { display: flex !important; flex-wrap: wrap; gap: 6px 18px; }
.tix-totals .label { margin-right: 4px; }
.tix-step > .hint { margin-top: 10px; }
.strip.tix-numbers { border-radius: var(--r-l); border: 1px solid var(--hair); }
/* Receipts & dumps: one row a receipt — the photo, what and where, the money, the state */
.tix-rcl { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.tix-rcrow { display: grid; grid-template-columns: 52px minmax(0, 1.6fr) minmax(0, 1fr) 168px; gap: 6px 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hair); }
.tix-rcrow:first-child { border-top: 0; }
.tix-rcwhat { display: grid; gap: 4px; min-width: 0; }
.tix-rcmoney { font-size: 13px; font-variant-numeric: tabular-nums; display: grid; gap: 2px; }
.tix-rcst { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tix-rcph .hint { font-size: 11px; }
@media (max-width: 640px) {
  .tix-rcrow { grid-template-columns: 52px minmax(0, 1fr); }
  .tix-rcmoney, .tix-rcst { grid-column: 2; }
  .tix-rcst { justify-content: flex-start; }
}
.tix-rc td { vertical-align: top; }
.tix-rc td > div { margin-top: 4px; }
.tix-thumb { display: inline-block; line-height: 0; }
.tix-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--hair); }
.tix-thumb.lg img { width: auto; height: auto; max-width: min(260px, 100%); max-height: 240px; }
/* Send */
.tix-note { margin-top: 12px; display: grid; gap: 4px; }
.tix-note p { padding: 10px 12px; border-radius: var(--r-m); background: var(--well); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tix-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.tix-link:first-of-type { border-top: 0; padding-top: 0; }
.tix-link > div:first-child { flex: 1 1 280px; min-width: 0; }
.tix-link code { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.tix-sent { margin: 4px 0 10px; }
.tix-sent li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.tix-copyrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--hair); }
.tix-copyrow > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.tix-sub > .actions { margin-top: 10px; align-items: center; }
.tix-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tix-sendbar { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); align-items: center; }
/* beside the ticket */
.tix-stars { font-size: 18px; letter-spacing: 1px; color: var(--warn); display: flex; align-items: baseline; gap: 2px; }
.tix-stars span { color: var(--faint); }   /* empty stars are outlines (☆) at the hint colour, as Reviews (S7): 1.3:1 hairline grey read as no rating (B15) */
.tix-stars b { margin-left: 8px; font-size: 13.5px; letter-spacing: 0; color: var(--ink); }
.tix-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tix-chips .chip .i { width: 12px; height: 12px; }

/* the customer's copy: hidden on the office's screen until asked for, always on paper */
.tix-sheet, .tix-copybar { display: none; }
.tix-copyview .tix-sheet { display: block; overflow-x: auto; border-radius: var(--r-l); }
.tix-copyview .tix-copybar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 16px; border-radius: var(--r-xl); background: var(--glass-b); border: 1px solid var(--hair); }
.tix-copyview .tix-copybar .hint { flex: 1 1 320px; }
.tix-copyview .tix-body, .tix-copyview .tix-flags, .tix-copyview #sfyTicketStrip, .tix-copyview .tix-th .actions { display: none; }
@media print {
  .tix-sheet { display: block !important; }
  .tix-copybar { display: none !important; }
}

/* ---- Verify Day */
#tixVBody { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.tix-day { display: flex; flex-direction: column; gap: 10px; }
.tix-dayh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 6px; }
.tix .subtabs em.tix-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn);
  font-size: 11px; line-height: 18px; text-align: center; font-weight: var(--fw-bold); }
.tix-chain { display: inline-flex; align-items: center; }
.tix-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--well); color: var(--ink-2); font-size: 11px; font-weight: var(--fw-bold); }
.tix-dot .i { width: 12px; height: 12px; }
.tix-dot.approved { background: var(--ok-bg); color: var(--ok); }
.tix-dot.rejected { background: var(--bad-bg); color: var(--bad); }
.tix-dot.pending { background: var(--warn-bg); color: var(--warn); }
.tix-dotline { width: 10px; height: 2px; background: var(--hair-2); }

/* ---- pop-ups: two fields a row, the buttons at the foot */
.tix-modal { gap: 12px; }
.tix-modal h2 { font-size: var(--fs-xl); }
.tix-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.tix-form .wide { grid-column: 1 / -1; }
.tix-form [hidden] { display: none; }
.tix-form .seg { align-self: flex-start; }
.tix-modalacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.tix-modalacts .tix-grow { flex: 1 1 auto; }

/* ---- touch widths and phones */
@media (max-width: 1180px), (pointer: coarse) {
  .tix-tick input, .tix-cardname input, .tix-check input { width: 22px; height: 22px; }
}
@media (max-width: 1180px) {
  .tix-steps { display: flex; overflow-x: auto; scrollbar-width: none; }
  .tix-steps::-webkit-scrollbar { display: none; }
}
@media (max-width: 1180px), (pointer: coarse) {
  .tix-steps button { flex: 0 0 auto; min-height: var(--tap); }
}
@media (max-width: 1180px) {
  .tix-step { scroll-margin-top: 72px; }
}
@media (max-width: 640px) {
  .tix-date { flex: 1 1 140px; }
  .tix-find .ih-search { flex-basis: 100%; }
  .tix-row2, .tix-form, .tix-rvgrid { grid-template-columns: minmax(0, 1fr); }
  .tix-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tix-stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tix-steps small { display: none; }
  .tix-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head.tix-th .actions { width: 100%; }
  .tix-vcright { width: 100%; }
}
/* a one-column list grid keeps to its panel: an implicit auto column grows to a row's widest content otherwise */
.tix-rows, .tix-plain, .tix-cards, .tix-rcl, .tix-rcwhat, .tix-rcmoney, .tix-card, .tix-vc, .tix-rwc, .tix-note, .tix .cards .card { grid-template-columns: minmax(0, 1fr); }
/* the customer's copy on screen shows what prints: the office's columns and ticks off, the paper-only rows on */
.tix-copyview .tix-sheet .no-print { display: none !important; }
.tix-copyview .tix-sheet .print-only { display: block; }
.tix-copyview .tix-sheet tr.print-only { display: table-row; }
.tix-copyview .tix-sheet td.print-only, .tix-copyview .tix-sheet th.print-only { display: table-cell; }

/* ---- design review (10/22): orphans, lines that sit off, dark patches, reach */
.tix-rwc .tix-dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .tix-rwc .tix-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tix-dl > :last-child:nth-child(odd) { grid-column: 1 / -1; } }   /* an odd last fact takes the row: 2 + 2 + 1 never */
.tix-find .field { margin-bottom: 0; }                                     /* 2.x's .field margin pushed the dates 10px off the search */
.tix-form .tix-span { grid-column: 1 / -1; }
.tix .cards .ih-cardtop { align-items: center; }
.tix .rt-stars-cell { color: var(--warn); }                                /* 2.x's #f0a92b was 1.9:1 */
.tix-narrow { display: none; margin-top: 4px; }
@media (max-width: 1180px) { .tix-narrow { display: block; } }
/* the 2.x pieces a ticket still draws (the work table, Ask the crew, Resources, Waiting, Equipment) take the kit's look */
.tix-worktable table { background: transparent; }
.tix-worktable th { text-transform: none; letter-spacing: 0; font-size: 11.5px; background: transparent; color: var(--muted); }
:root .tix.tix :is(input, select, textarea):not(.input, .select, .textarea, .status, [type=checkbox], [type=radio], [type=file]) { background: var(--glass-a); border-color: var(--hair-2); color: var(--ink); }   /* outranks 2.x's dark-theme box fill (styles.css :root[data-theme="dark"] :is(input…)) */
.tix-side .tix-mount > .card { padding: var(--pad); border-radius: var(--r-xl); }
.tix-side .tix-mount h3, .tix-side .tix-mount .card > .row b:first-child { font-size: var(--fs-l); font-weight: var(--fw-x); }
.tix-mount textarea { min-height: 84px; }
/* reach on touch widths: tick boxes, the views and sortable heads are 44px to the thumb */
.tix-hit { display: inline-grid; place-items: center; cursor: pointer; }
@media (max-width: 1180px), (pointer: coarse) {
  .tix-hit { min-width: 44px; min-height: 44px; margin: -10px; }
  .tix .seg button { min-width: 44px; }
  .tix th .ih-sort { min-height: 44px; min-width: 44px; }
}
/* the ticket's head on a phone: Send across the top, the copy and the menu under it, the menu opening inside the screen */
@media (max-width: 640px) {
  /* spelled with .tix .page-head so they outrank the kit's phone rule for a page head's buttons (flex 1 1 auto): in Spanish
     "Enviar al cliente" and "La copia del cliente" shared one row and the "…" menu wrapped alone (w29d 097) */
  .tix .page-head.tix-th .actions > .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
  .tix .page-head.tix-th .actions > .btn.primary { flex-basis: 100%; }
  .tix .page-head.tix-th > .actions > .anchor:has(> .btn.icon) { flex: 0 0 auto; margin-left: auto; }   /* :has() so it weighs what the kit's :is(.anchor:not(:has(> .btn.icon:only-child))) does */
}
/* the step bar: every step in view, the numbers over their names on a phone */
@media (max-width: 1180px) { .tix-steps button { flex: 1 0 auto; } }
@media (max-width: 640px) {
  .tix-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
  .tix-steps button { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; text-align: center; }
  .tix-steps b { font-size: 11.5px; }
}

/* ---- the parts of one ticket that 2.x builders drew (ticket-parts.js, 3.0): the work lines and Edit lines, the hours
   billed, Additional materials, Line history, Resources today, Time changes, Waiting, Ask the crew, Customer queries and
   Equipment. Kit pieces (table.t, phone-cards, field, input, select-wrap, status, chip, flags, src) do the work; these
   only place them. */
.tix-linkbtn { all: unset; color: var(--accent-ink); font-weight: var(--fw-semi); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tix-linkbtn:hover, .tix-linkbtn:focus-visible { color: var(--ink); }
.tix button.src { border: 0; background: none; cursor: pointer; font-family: inherit; }
.tix-nowrap { white-space: nowrap; }
/* the work lines */
.tix-wk { margin: 0 -4px; }
table.t.tix-wkt td { vertical-align: top; }
.tix-wkt td.tix-wkitem { min-width: 220px; }
.tix-wkitem { display: grid; gap: 6px; min-width: 0; }
.tix-wkitem > a.name, .tix-wkitem > b { overflow-wrap: anywhere; }
.tix-wkchips, .tix-wkmedia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tix-wkmedia .btn.sm { height: 28px; padding: 0 8px; }
.tix-wkmedia .btn.sm.icon { width: 28px; padding: 0; }
/* w28seg: the runs worked under an hourly line, under its item */
.tix-segl { list-style: none; margin: 0; padding: 0 0 0 10px; display: grid; gap: 6px; border-left: 3px solid var(--accent); }
.tix-segl li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; min-width: 0; overflow-wrap: anywhere; }
.tix-segl li > div.hint { flex-basis: 100%; }
.tix-segl .tix-segh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tix-wkdup { display: flex; gap: 6px; align-items: flex-start; }
.tix-wkdup .i { flex: none; margin-top: 2px; }
.tix-wknum { font-variant-numeric: tabular-nums; }
.tix-wkqty, .tix-xin { display: inline-flex; align-items: center; gap: 6px; }
.tix-wkqty .input { width: 92px; }
.tix-wkt .tix-wkamt { width: 112px; }
.tix-wkt td.tix-wkplace { min-width: 64px; }
.tix-wk.editing .tix-wkt td.tix-wkplace { min-width: 128px; }
.tix-wk.editing .tix-wkt td.tix-wkcmt { min-width: 150px; }
.tix-wk.editing .tix-wkt td.tix-wkitem { min-width: 240px; }
.tix-wkcomment { color: var(--ink-2); }
.tix-wkbill .tix-check { margin: 4px 0 0; white-space: nowrap; }
.tix-check.tix-off { opacity: .55; cursor: not-allowed; }
tr.tix-wk-miss td, .card.tix-wk-miss { background: var(--well); }
.tix .cards .card.tix-wkcard { gap: 8px; }
.tix .cards .tix-wkcard .ih-cardtop { align-items: flex-start; }
.tix-wkfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.tix-wkcardnote { font-size: 13px; color: var(--ink-2); }
.tix-wkcardfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tix-wkcard .tix-form .tix-wkqty .input, .tix-wkcard .tix-form .tix-wkamt { width: 100%; }
/* on a touch iPad the lines edit as cards too: a row of ten boxes is a mouse's job */
@media (max-width: 1000px) {
  .tix-wk.editing table.t { display: none; }
  .tix-wk.editing .cards { display: flex; flex-direction: column; gap: 8px; }
}
.tix-wksrc { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13px; }
.tix-wksrc li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.tix-wksrcv { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tix-wkhours { margin-bottom: 12px; }
.tix-wkhours > li > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tix-wkhourswhy { flex-basis: 100%; color: var(--ink-2); }
.tix-wkhours .tix-check { margin: 0; }
.tix-qyline { margin-top: 2px; }
/* Additional materials */
.tix-xs { margin: 0 -4px; }
.tix-xin .input { width: 96px; }
.tix-xs + .hint { margin-top: 10px; }
/* Line history and Time changes: closed until asked for */
.tix-log { margin-top: 14px; border-top: 1px solid var(--hair); padding-top: 12px; }
.tix-log summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; min-height: 32px; }
.tix-log[open] summary { margin-bottom: 8px; }
.tix-log .phone-cards { margin: 0 -4px; }
/* Waiting: ours and theirs side by side, never added together */
.tix-wt { display: grid; gap: 10px; align-content: start; padding: 12px 14px; border-radius: var(--r-l); border: 1px solid var(--hair); background: var(--glass-b); }
.tix-wthead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tix-wt .input.n { max-width: 140px; }
/* Resources today */
.tix-rs > .hint { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: 10px; }
.tix-rsl { margin: 0 -4px; }
.tix-rsl td { vertical-align: top; }
.tix-rsl .select-wrap { min-width: 180px; }
.tix-rscost { min-height: var(--ctl); display: flex; align-items: center; }
.tix-rsbid { display: grid; gap: 6px; margin-top: 12px; }
.tix-rsadd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 14px; }
.tix-rsadd .tix-grow { flex: 1 1 240px; }
.tix-rsadd > .tix-grow:empty { flex: 1 1 0; min-width: 0; }
.tix-rsqty { flex: 0 0 110px; }
/* beside the ticket: Ask the crew, Customer queries */
.tix-asks { gap: 0; }
.tix-askrow { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--hair); min-width: 0; }
.tix-askrow:first-child { border-top: 0; padding-top: 4px; }
.tix-askrow p { overflow-wrap: anywhere; }
.tix-asktop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.tix-asktop b { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tix-answer { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--well); }
.tix-answer .tix-photos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tix-askform { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hair); }
.tix-qy h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
@media (max-width: 640px) {
  .tix-rsadd .field.tix-grow, .tix-rsadd .tix-rscheck { flex: 1 1 100%; justify-content: center; }
  .tix-rsadd .tix-rsqty { flex: 1 1 0; }
  .tix-rsadd > .tix-grow:empty { display: none; }
}
.tix-rsbid .btn { white-space: normal; height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; text-align: left; }
/* review of the first pictures: 2.x's .field margin out of the parts' rows; numbers on one line; Edit lines as cards */
.tix-rsadd .field, .tix-wt .field, .tix-askform .field, .tix-wkform .field, .tix-xs .field, .tix-rs .field { margin-bottom: 0; }
.tix-wkqtycell, .tix-wkamtcell .hint, .tix-xin .hint { white-space: nowrap; }
a.tix-name { color: inherit; font-weight: var(--fw-semi); text-decoration: none; }
a.tix-name:hover { text-decoration: underline; }
.tix-wkedit { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.tix-wkedit > .card { margin: 0; display: grid; gap: 10px; }
.tix-wkedit .ih-cardtop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.tix-wkcardacts { display: flex; align-items: center; gap: 8px; }
.tix-wkcardacts .tix-check { margin: 0; }
.tix-wkcardacts .hint { display: none; }
.tix-wkform { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tix-wkform .tix-span2 { grid-column: span 2; }
.tix-wkform .tix-wkqty { display: flex; }
.tix-wkform .tix-wkqty .input, .tix-wkform .tix-wkamt { width: 100%; }
.tix-wkedit .tix-wkfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tix-wkform, .tix-wkedit .tix-wkfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tix-wkform { grid-template-columns: minmax(0, 1fr); } .tix-wkform .tix-span2 { grid-column: 1 / -1; } }
.tix-wkro { min-height: var(--ctl); display: flex; flex-direction: column; justify-content: center; }
/* the rework pop-up: the crew responsible as ticks (a long multi-select was a mouse's job), and the pricing choices */
.tix-rwcrew { border: 0; margin: 0; padding: 0; min-width: 0; }
.tix-rwcrew legend { padding: 0; margin-bottom: 6px; }
.tix-rwpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; max-height: 196px; overflow: auto; padding: 8px 10px; border: 1px solid var(--hair-2); border-radius: var(--r-m); background: var(--glass-a); }
.tix-rwpick .tix-check { margin: 4px 0; }
.tix-rwprice { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .tix-rwpick { grid-template-columns: minmax(0, 1fr); } .tix-rwprice .btn { flex: 1 1 100%; justify-content: center; } }
@media (max-width: 640px) { .tix-rsl .cards .tix-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* Qty beside its cost: a card a line stays short */

/* ---- Ignite office pieces (3.0, w9ignite office): the printed sheets' own looks (tkp-). The customer's copy of a ticket and
   the RFI are the 3.0 paper (print.css; w20print); these are the declarations that were written inline on them, under
   .q-sheet so they outrank the sheet's .sub and .row as the inline style did, in the paper's colours. */
.q-sheet .tkp-r { text-align: right; }
.q-sheet .tkp-mt6 { margin-top: 6px; }
.q-sheet .tkp-mt8 { margin-top: 8px; }
.q-sheet .tkp-note { font-size: 11px; }
.q-sheet .tkp-sub500 { font-weight: 500; }
.q-sheet .tkp-grey { color: var(--paper-faint, #5D6679); }
.q-sheet .tkp-rework { color: var(--paper-bad, #B42318); font-weight: 700; }
.q-sheet .tkp-rfih { align-items: baseline; flex-wrap: wrap; gap: 6px; }

/* ---- SewerAI's footage flags on a Verify Day card (3.0, w9ignite side; public/sewerai-ui.js). The kit's .flags list; a
   footage problem turns the card's edge red (tix-edge-bad). .swr-link and .swr-run come from project.css. */
.swr-vd:empty { display: none; }
.swr-vnote { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.swr-vnote .i { flex: none; margin-top: 2px; }
.swr-flag { min-width: 0; }
.swr-flaghead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.swr-miss { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.swr-vflags .swr-miss li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; background: none; border: 0;
  border-top: 1px solid var(--bad-line); border-radius: 0; }   /* rows inside the flag, not flags of their own */
.swr-vflags .swr-miss li:first-child { border-top: 0; }
.swr-exc { white-space: nowrap; }
/* touch reach (w15polish K3): a crew list's names wrap 6px apart, so each name's 44px reach landed on the next one (22px
   tall, 23–28 reachable) — on touch each name is a 44px row of its own height and the rows close up */
@media (max-width: 1180px), (pointer: coarse) {
  .tix-faces { row-gap: 0; }
  .tix-faces > a { display: inline-flex; align-items: center; min-height: var(--tap); }
}
/* a unit on the ticket that a lock-out still holds (LN-15): said under the chips, never a block */
.tix-lockwarn { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: var(--bad); }
.tix-lockwarn .i { margin-top: 2px; flex: none; }

/* Extra work's one tap (wave 18): the button (and, when several Master Items fit, the pick) on its own row under the flag's words */
.tix-xwflag { display: block; min-width: 0; }
.tix-xwgo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; }
.tix-xwgo .select-wrap { flex: 0 1 420px; min-width: 0; }
.tix-xwgo .btn .i { color: currentColor; margin-top: 0; }   /* the flag's own icon colour must not reach the button's plus */
/* w17-ask-reasons: the numbers beside a crew's ask to reopen (the flags list the time-off asks use, app.js askFlagsHTML) */
.tix-row-main > .ask-flags, .tix-row-main > .ask-facts { margin: 6px 0 0; }
.tix-row-main > .ask-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.tix-row-main > .ask-flags > li { padding: 6px 10px; font-size: 12.5px; }
/* touch reach (wave 18, the site-wide sweep's leftovers): a rework's crew — names side by side in one fact, wrapping one under
   the other in a phone's half-width column — each a thumb tall, so stacked names no longer share one reach (23px). Tickets ›
   Rework and the project's Field › Rework draw the same list. Nothing moves for a mouse. */
@media (max-width: 1180px), (pointer: coarse) {
  .tix-dl dd:has(> a.tix-who) { display: flex; flex-wrap: wrap; column-gap: 10px; }
  .tix-dl dd > a.tix-who { min-height: var(--tap); align-items: center; }
}

/* ig-ipad-tables (Jordan, 10/26 evening: "Show the customer and crew lead only in their own columns on touch iPads"). On a
   touch screen the list's job cell stacked the job's name, its number · customer and the crew lead about 19px apart, too
   close to tap one without the other; making each a thumb tall would have doubled every row. With a finger (any width the
   table shows at, 641 up — an iPad from the mini to the Pro, either way round) the customer and the crew lead each have a
   column of their own and leave the job cell, which keeps the job's name over its number (words, not a target). Rating and
   Hours still fold away at 1180 and under. A mouse in a narrowed window keeps the stacked cell. */
.tix th.tix-col-cust, .tix td.tix-col-cust { display: none; }   /* tix-col-: the bare .tix-lead is the ticket's "Lead …" span (above) */
@media (pointer: coarse) {
  .tix th.tix-col-cust, .tix td.tix-col-cust, .tix th.tix-col-lead, .tix td.tix-col-lead { display: table-cell; }
  .tix .tix-custin, .tix .tix-narrow { display: none; }
}
/* …and the eight columns fit a portrait iPad without the table scrolling sideways: the cells close up (12px → 6px a side; 4px
   on an iPad mini's 744), and a crew lead's name may take two lines under its face. Measured: the table is the panel's width at
   744, 768, 820, 1024 and 1180 (with the 2.x padding it was 872 wide in 786 at 820). */
@media (max-width: 1180px) and (pointer: coarse) {
  .tix table.tix-list > :is(thead, tbody) > tr > :is(th, td) { padding-left: 6px; padding-right: 6px; }
  .tix td.tix-col-lead .who > span:last-child { white-space: normal; }
}
@media (max-width: 760px) and (pointer: coarse) {
  .tix table.tix-list > :is(thead, tbody) > tr > :is(th, td) { padding-left: 4px; padding-right: 4px; }
  /* an iPad mini's 744 (design review 10/26): a job number stays one piece (26-C02-MHR09 broke at its hyphen in 22 of 25 rows),
     paid for by the ••• cell's left padding — its button keeps its 44px and 4px from the edge; the table is still 710 of 710 */
  .tix .tix-jobno { white-space: nowrap; }
  .tix table.tix-list > :is(thead, tbody) > tr > :is(th, td):last-child { padding-left: 0; }
}
/* the Work step's buttons (Refresh video, Add a test, Edit lines — 2.4.1 added the third): two across on a phone, an odd last one
   the whole row, never a lone button wrapped under two */
@media (max-width: 640px) { .tix-stephead .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .tix-stephead .actions > :last-child:nth-child(odd) { grid-column: 1 / -1; } .tix-stephead .actions .btn { justify-content: center; } }
/* a rate-book day's resources, split from the crew's clock (w43c) */
.tix-splitgroups { flex-basis: 100%; margin: 4px 0 0; }