/* Event Transportation — the module subnav is the shared shell's dropdown
   menus with no toplinks row above it (Speaker Booking's rule). */
.transportation-page .campaign-subnav { margin-top: 0; padding-top: 0; border-top: 0; }

/* Bare links on the module's record pages are the text colour (the handoff:
   "links are --fg"); the indexes' cpv1-cell-link is slate-900 already.
   Buttons and chips that happen to be anchors keep their own (a selected
   chip is white on --fg), and so do the canon's own link classes, which
   look here as they do on every other page of the app: the section-head
   action, the link inside a field value (compact-link), the open arrow
   beside a field value (compact-link-open) and the arrow that ends a row
   (compact-coll-link). */
.transportation-page .compact-detail-page a:not(.cpv1-btn):not(.cpv1-btn-primary):not(.cpv1-empty-action):not(.tr-fch):not(.compact-eyebrow-action):not(.compact-link):not(.compact-link-open):not(.compact-coll-link) { color: var(--fg); }
.transportation-page .compact-detail-page a:not(.cpv1-btn):not(.cpv1-btn-primary):not(.cpv1-empty-action):not(.tr-fch):not(.compact-eyebrow-action):not(.compact-link):not(.compact-link-open):not(.compact-coll-link):hover { color: var(--fg); }

/* Event Transportation — the module's own column widths on the shared
   index engine (the Speaker Booking precedent: a module names the widths
   its data needs; every other class is the canon's). Tokens from
   design-tokens.css; no raw values beyond widths. */
.transportation-page .cpv1-tbl th.tr-col-date,    .transportation-page .cpv1-tbl td.tr-col-date    { width: 120px; } /* "Sep 21, 2026" at 13px + cell padding */
.transportation-page .cpv1-tbl th.tr-col-barcode, .transportation-page .cpv1-tbl td.tr-col-barcode { width: 140px; }
.transportation-page .cpv1-tbl td.tr-col-barcode { font-family: var(--font-mono); font-size: 12px; }   /* the value is mono; the header keeps the table's header type */

/* Case photos — a reference gallery on the case page (new chrome, agreed
 * with Nick 2026-09-22: the design system has no image component yet).
 * Thumbnails in a wrapping grid; the × is the canonical cpv1-detach-x. */
.transportation-page .tr-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 8px; }
.transportation-page .tr-photo { position: relative; margin: 0; }
.transportation-page .tr-photo-link { display: block; border: 1px solid var(--cp-border); border-radius: 6px; overflow: hidden; background: var(--color-slate-50, #f8fafc); aspect-ratio: 1; }
.transportation-page .tr-photo-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.transportation-page .tr-photo-file { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px; font-size: 12px; color: var(--cp-text-muted); word-break: break-all; }
.transportation-page .tr-photo-x { position: absolute; top: 6px; right: 6px; background: #fff; }
.transportation-page .tr-photo-meta { margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--cp-text-muted); }
.transportation-page .tr-photo-add { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 0; }
.transportation-page .tr-photo-upload { cursor: pointer; font-size: 13.5px; color: var(--cp-text-muted); }
.transportation-page .tr-photo-upload:hover .tr-photo-upload-label { color: var(--cp-text); }

/* ==========================================================================
   Shipments — the create page (design 01/02) and the shipment page
   (03/04/06/09). Values are the handoff's MEASUREMENTS.md, mapped to the
   app's tokens: --fg / --fg-muted / --fg-faint / --border / --border-strong
   / --surface-2 / --font-mono. Canon chrome (head, badge + menu, picker
   overlay, inline edit, detach ×, confirm modal) comes from campaign_page /
   compact_detail; the rules below are the module's own table, chips, cart
   and bar. */
/* The shipment page is the handoff's 1314 card at most and the app frame's
   column at least: it never scrolls sideways (Nick, 2026-09-25: "bars
   running over the edge of the page"). The table is fluid inside it, its
   columns in the handoff's proportions. The create page is the handoff's
   1180 card. */
.cpv1-body.compact-detail-page.tr-shipment { max-width: 1314px; }
.cpv1-body.compact-detail-page.tr-shipment--create { max-width: 1180px; }
/* the create page: the ghosted picker and cart sit a section below the required cluster's footer */
.tr-shipment--create .compact-create-footer { margin-bottom: 24px; }
.tr-shipment .cpv1-head-state { gap: 8px; }
.tr-inline-form { display: inline; margin: 0; }
.tr-hidden-form { display: none; }

.tr-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.tr-shipment:not(.tr-shipment--create) .tr-foot { margin-top: 22px; padding-top: 18px; }
.tr-foot form { margin: 0; }

/* ---- FROM sentence (create page) */
.tr-sent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; padding: 18px 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; position: relative; }
.tr-sent-w { color: var(--fg-muted); font-size: 15px; line-height: 34px; }
.tr-sent-v { font-size: 15px; line-height: 34px; }
.tr-sent turbo-frame:has(> .cpv1-picker) { flex-basis: 100%; }
.cpv1-body .cpv1-picker-row-form { display: contents; }
.transportation-page .cpv1-picker-create { color: var(--fg-muted); }
.transportation-page .cpv1-picker-create:hover { color: var(--fg); text-decoration: none; }
.cpv1-body .cpv1-picker-row-form .cpv1-picker-row { width: 100%; }

/* ---- the picker: search · chips · list (left) and the cart (right) */
.tr-create { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
.tr-find { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.tr-find input[type="text"] {
  flex: 1; height: 34px; border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 10px;
  font: inherit; font-size: 14px; color: var(--fg); background: #fff;
}
.tr-find input[type="text"]::placeholder { color: var(--fg-faint); }
.tr-find input[type="text"]:focus { outline: none; border-color: var(--fg); }
.tr-chipbar { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.cpv1-body .tr-fch {
  height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--fg); white-space: nowrap; text-decoration: none;
}
.cpv1-body .tr-fch:hover { text-decoration: none; background: var(--color-slate-50); color: var(--fg); }
.cpv1-body .tr-fch--on, .cpv1-body .tr-fch--on:hover { background: var(--fg); color: #fff; border-color: var(--fg); }
.cpv1-body .tr-fch--grp { border-style: dashed; color: var(--fg-muted); }
.cpv1-body .tr-fch--grp.tr-fch--on, .cpv1-body .tr-fch--grp.tr-fch--on:hover { background: #fff; color: var(--fg); border: 2px solid var(--fg); padding: 0 9px; }
.tr-chip-sep { width: 1px; height: 22px; background: var(--border-strong); margin: 0 6px; }
.tr-list { max-height: 440px; overflow: auto; border-top: 1px solid var(--border); }
.tr-list-loading, .tr-list-empty { padding: 14px 10px; color: var(--fg-faint); font-style: italic; font-size: 14px; }
.tr-li { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.tr-li-nm { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tr-li .cpv1-btn, .tr-li .tr-why { flex: 0 0 auto; margin-left: auto; }
.cpv1-body .tr-li form.button_to { display: inline-flex; width: auto; flex: 0 0 auto; margin: 0 0 0 auto; padding: 0; }
.cpv1-body .tr-li form.button_to .cpv1-btn { margin-left: 0; }
.tr-li--grp { background: var(--surface-2); font-weight: 600; height: 44px; }
.tr-grp-toggle { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tr-chev { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); width: 12px; display: inline-block; }
.tr-li--sub .tr-li-nm { padding-left: 22px; }
.tr-li--dis .tr-li-nm { color: var(--fg-faint); }
.tr-why { font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; }
/* A one-off box in the picker: its row, and the size line Add opens under it
   (what is in it, the three dimensions, the weight, Add box). In the cart a
   box reads its contents over its size line. */
.tr-box .tr-li-nm .tr-why { margin-left: 4px; }
.cpv1-body .tr-li--box-form { height: auto; padding: 8px 10px 10px 32px; gap: 14px; flex-wrap: wrap; background: var(--surface-2); margin: 0; }
.tr-box-f { display: inline-flex; flex-direction: column; gap: 3px; }
.tr-box-f--name { flex: 1 1 120px; min-width: 120px; }
.tr-box-l { font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .02em; }
.cpv1-body .tr-li--box-form .cpv1-inline-input { width: 56px; text-align: right; }
.cpv1-body .tr-li--box-form .tr-box-f--name .cpv1-inline-input { width: 100%; text-align: left; }
.cpv1-body .tr-li--box-form .cpv1-btn { margin-left: auto; align-self: flex-end; }
.tr-cart-li--box { height: auto; padding: 8px 10px; }
.tr-cart-li--box .tr-li-nm { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.tr-cart-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.tr-f-size { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.tr-f-size .cpv1-inline-field { min-width: 2ch; text-align: right; }
.cpv1-body .tr-why a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--border-strong); }
.tr-grp.cpv1-panel--collapsed > [data-cpv1-collapse-target="body"] { display: none; }

.tr-cart { border: 1px solid var(--border-strong); border-radius: 6px; padding: 16px; position: sticky; top: 12px; }
.tr-cart h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; }
.tr-cart h3 .n { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); font-weight: 400; }
.tr-cart-list { max-height: 392px; overflow: auto; }
.tr-cart-li { height: 36px; font-size: 14px; padding: 0 2px; }
.tr-cart .tr-x { margin-left: auto; font-size: 17px; }
.tr-cart-clear { display: block; margin-top: 10px; background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--fg-muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong); }
.tr-cart-none { color: var(--fg-faint); font-style: italic; padding: 8px 2px 12px; }

/* ---- shipment page: FROM as the label prints it */
.tr-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; padding: 14px 0 18px; border-bottom: 1px solid var(--border); position: relative; }
.tr-lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--fg); margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; }
/* a block's head: the mono word, then its badge and links in the page's face */
.tr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-height: 28px; }
.tr-head--place { grid-column: 1 / -1; margin-bottom: 14px; }
.tr-addr > turbo-frame, .tr-to > turbo-frame { grid-column: 1 / -1; }
.tr-head .tr-lab { margin: 0; display: inline; }
.tr-head .compact-link { font-size: 12.5px; font-weight: 500; text-decoration: none; }
.tr-head .compact-link:hover { text-decoration: underline; }
.tr-lab .cpv1-badge { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.tr-lines { font-size: 14.5px; line-height: 1.45; color: var(--fg); }
.tr-lines .nm { font-weight: 600; }
.tr-lines .ct { color: var(--fg-muted); }
.tr-lines--empty { color: var(--fg-muted); font-style: italic; }
.cpv1-body .tr-lines-link { display: block; color: var(--fg); text-decoration: none; margin: 0 -8px; padding: 0 8px; border-radius: 4px; }
.cpv1-body .tr-lines-link:hover { background: var(--surface-2); text-decoration: none; }
.cpv1-body .tr-lines--sealed, .cpv1-body .tr-lines--sealed .nm { color: var(--fg-muted); }
/* the label's lines, each edited where it prints (JC-4): the canon inline field */
.tr-lines .cpv1-inline-field { cursor: text; }
.tr-lines .cpv1-inline-field--blank { font-style: italic; }
.tr-lab-name { font-family: var(--font-sans); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; }
.tr-refs { margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--border); }
.tr-to--page { border: 0; padding: 8px 0 0; }
/* The create page's cluster: a picker badge in a field row (its overlay
 * anchored to the row), the events picked as chips beside their badge. */
.tr-shipment--create .compact-row.tr-row--wide { grid-template-columns: 1fr; } /* a row that is all value, under its own eyebrow */
.tr-pickrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-evchips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tr-evchips:empty { display: none; }
.tr-notes { margin: 8px 0 24px; }

/* ---- section rule */
.tr-sec { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--fg); padding-bottom: 8px; border-bottom: 2px solid var(--fg); display: flex; justify-content: space-between; align-items: baseline; margin-top: 26px; }
.tr-sec .r { font-family: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--fg-muted); }
.tr-emp { padding: 38px; text-align: center; color: var(--fg-muted); border: 1px dashed var(--border-strong); border-radius: 5px; margin-top: 14px; font-size: 14px; }
.cpv1-body .tr-emp a { color: var(--fg); margin-left: 6px; }

/* ---- the packages table (one colgroup: 1238) */
.tr-packages { position: relative; }
/* The pickers open below their cells, inside this wrapper, and a wrapper that scrolls sideways clips downward
   too (the Speed picker lost its last rows, found 2026-10-01). So where the table fits its column nothing
   scrolls and nothing clips. The table needs 1,112px (its columns' floors, shipments/show: no header breaks
   in two, no date or amount ends in an ellipsis): where the column is narrower than that — the navigation
   open under 1540, collapsed under 1380 — the table scrolls here, never the page (the design system's
   column-resize: "a narrower window scrolls the table sideways instead of squeezing a column away"), and
   the wrapper makes room for an open picker. */
@media (max-width: 1539px) {
  .viewport:not(.gn-railed) .tr-packages { overflow-x: auto; }
  .viewport:not(.gn-railed) .tr-packages:has(turbo-frame > .cpv1-picker) { padding-bottom: 360px; }
}
@media (max-width: 1379px) {
  .tr-packages { overflow-x: auto; }
  .tr-packages:has(turbo-frame > .cpv1-picker) { padding-bottom: 360px; }
}
.tr-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tr-tbl col.tr-col-ck { width: 36px; }   /* 14px + the 16px box + 6px */
.tr-tbl col.tr-col-ctl { width: 34px; }
.tr-tbl col.tr-col-x { width: 56px; }    /* 8px + the 40px Void button (the cell's widest content) + 8px */
.tr-tbl col.tr-col-go { width: 34px; }   /* the row-end arrow + the table's 10px edge */
.tr-tbl th {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600;
  text-align: left; padding: 10px 10px 8px; border-bottom: 1px solid var(--border); vertical-align: bottom; background: none; position: relative;
}
.tr-tbl th .tr-all { display: block; margin-top: 5px; background: none; border: 0; padding: 0; font: inherit; font-family: var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg); text-decoration: underline; text-decoration-color: var(--border-strong); cursor: pointer; }
.tr-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--fg); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 32px; position: relative; }
.tr-tbl td.tr-ckc, .tr-tbl th.tr-ckc { padding: 9px 6px 9px 14px; text-overflow: clip; }
.tr-tbl td.tr-case { font-weight: 500; }
.tr-tbl td.tr-case--box { white-space: normal; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
/* A one-off box's name wherever a person reads it (package_name_tag): what is in it over what it is. */
.tr-nm, .tr-kind { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-kind { font-weight: 400; font-size: 12px; line-height: 1.25; color: var(--fg-muted); }
.tr-tbl tr.tr-on td { background: var(--color-slate-50); }
.tr-tbl tr.tr-sealed td { color: var(--fg-muted); }
.tr-ck { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--border-strong); border-radius: 3px; background: #fff; display: inline-block; vertical-align: middle; position: relative; cursor: pointer; }
.tr-ck:checked, .tr-ck:indeterminate { background: var(--fg); border-color: var(--fg); }
.tr-ck:checked::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tr-ck:indeterminate::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px; background: #fff; }
.tr-ck:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }
.tr-ed { display: inline-flex; align-items: center; max-width: 100%; background: none; border: 0; border-radius: 4px; padding: 0 4px; margin: 0 -4px; font: inherit; font-size: 14px; color: var(--fg); cursor: pointer; text-align: left; }
.tr-ed:hover { background: var(--surface-2); }
.tr-ed .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-ed .c { display: none; }
.tr-ed--empty .t { font-style: italic; color: var(--fg-muted); }
.tr-tbl td.tr-evc { white-space: normal; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.tr-evl { display: block; font-size: 12px; line-height: 15px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tr-evl .v { display: inline-block; width: 12px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted); }
.tr-evl .d { color: var(--fg-muted); }
.tr-evl + .tr-evl { margin-top: 2px; }
.tr-tbl tr.tr-sealed .tr-evl { color: var(--fg-muted); }
.tr-tbl td.tr-evc .tr-ed { gap: 0; position: relative; flex-direction: column; align-items: flex-start; font-size: 12px; }
.tr-tbl td.tr-evc .tr-ed .c { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); }
.cpv1-body .tr-trk { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); text-decoration: underline; text-decoration-color: var(--border-strong); }
.tr-rsn { font-size: 12.5px; font-style: italic; color: var(--fg-muted); white-space: normal; line-height: 1.3; }
.cpv1-body .tr-rsn-link { color: var(--fg-muted); text-decoration: underline; text-decoration-color: var(--border-strong); }
.cpv1-body .tr-rsn-link:hover { color: var(--fg); }
/* The row's two trailing cells: its action (× before a label, Void after) and the arrow to the package's page.
   The action is a 24px-high box centred on the row, so the cell adds nothing to the row's height and nothing is
   clipped: exactly Void's width plus 8px a side. The arrow is the canon's row-end arrow (compact-coll-link,
   compact_detail.css) as it is on every other page: nothing about it is restyled here. */
.tr-tbl td.tr-act { padding: 0 8px; text-align: center; }
.tr-tbl td.tr-go { padding: 0 10px 0 0; text-align: right; }
.cpv1-body .tr-x { font-size: 17px; }
.tr-tbl td.tr-act .tr-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; line-height: 1; vertical-align: middle; }
/* Cost: a column of amounts, right-aligned, figures in step; no left padding (the amount sits right), and an
   84px floor on its handle — "$1,234.56" at 14px and the 10px edge. */
.tr-tbl th.tr-costc, .tr-tbl td.tr-costc { text-align: right; padding-left: 0; font-variant-numeric: tabular-nums; }
/* The Speed picker with UPS's cost and scheduled delivery beside each speed: three columns under one head. */
.cpv1-body turbo-frame > .tr-picker--rates { width: 500px; }
.tr-rate-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.tr-rate-head .tr-rate-speed { flex: 1 1 auto; }
.tr-picker--rates .cpv1-picker-row { gap: 12px; }
.tr-picker--rates .cpv1-picker-row-label { flex: 1 1 auto; }
.tr-rate-cost { flex: 0 0 76px; text-align: right; font-variant-numeric: tabular-nums; }
.tr-rate-when { flex: 0 0 196px; white-space: nowrap; color: var(--fg-muted); }
.tr-rate-head .tr-rate-when { color: var(--fg-muted); }
.tr-rate-error { padding: 8px 12px; font-size: 13px; line-height: 1.4; white-space: normal; max-width: 420px; color: var(--fg); border-bottom: 1px solid var(--border); }
.tr-rate-error .k { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin-right: 6px; }
/* an open editor: the cell shows it and lets the popover out */
.tr-tbl td:has(turbo-frame > .cpv1-picker), .tr-tbl th:has(turbo-frame > .cpv1-picker), .tr-addr:has(turbo-frame > .cpv1-picker) > div:first-child { overflow: visible; }
.tr-tbl td:has(turbo-frame > .cpv1-picker) { background: var(--color-slate-50); box-shadow: inset 0 0 0 1px var(--border-strong); }
.tr-tbl th turbo-frame:has(> .cpv1-picker) { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 400; }
.cpv1-body turbo-frame > .tr-picker { min-width: 250px; }
.cpv1-body turbo-frame > .tr-picker--events { width: 320px; }
.cpv1-body .tr-picker .cpv1-picker-row-subject { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--fg-muted); }
.tr-evrow-ck { width: 10px; flex-shrink: 0; font-size: 11px; color: var(--fg); visibility: hidden; margin-right: 8px; }
.tr-evrow--on .tr-evrow-ck { visibility: visible; }
.tr-evrow--on .cpv1-picker-row-label { font-weight: 500; }
.tr-date-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.tr-dt { height: 28px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); background: #fff; }
.tr-ok { height: 28px; padding: 0 10px; background: var(--fg); color: #fff; border: 0; border-radius: 4px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* ---- the row panel: the To address as it prints, and this package's own fields */
.tr-pkg.cpv1-panel--collapsed .tr-det { display: none; }
/* The box that opens a row's panel — the sidebar tree's control (+ closed,
 * − open; components/global_navigation.css .gn-ctl), in its own cell. */
.tr-tbl td.tr-ctlc { padding: 0; text-align: center; overflow: visible; cursor: pointer; }
.tr-tbl th.tr-ctlc { padding: 0; }
.tr-ctl { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; border: 1px solid var(--color-slate-300); border-radius: 3px; background: var(--paper); cursor: pointer; vertical-align: middle; }
.tr-ctl .tr-ctl-h { position: absolute; width: 6px; height: 1px; background: var(--fg-muted); }
.tr-ctl .tr-ctl-v { position: absolute; width: 1px; height: 6px; background: var(--fg-muted); transition: transform .2s, opacity .2s; }
.tr-pkg:not(.cpv1-panel--collapsed) .tr-ctl .tr-ctl-v { transform: scaleY(0); opacity: 0; }
.tr-tbl td.tr-ctlc:hover .tr-ctl { border-color: var(--color-slate-500); background: var(--color-slate-50); }
.tr-pkg:not(.cpv1-panel--collapsed) > tr:first-child td { background: var(--surface-2); border-bottom: none; }
.tr-tbl tr.tr-det td { background: var(--surface-2); padding: 4px 10px 18px; white-space: normal; overflow: visible; height: auto; }
.tr-to { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; background: #fff; border: 1px solid var(--border-strong); border-radius: 5px; padding: 14px 16px 16px; }
.tr-f { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.tr-f:last-child { border-bottom: none; }
.tr-f .k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.tr-f-v { font-size: 14px; color: var(--fg); overflow-wrap: anywhere; }
.tr-f-v--empty { font-style: italic; color: var(--fg-muted); }

/* ---- the bulk bar */
.tr-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-top: 14px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface-2); min-height: 36px; position: relative; flex-wrap: wrap; }
.tr-bar-n { font-weight: 600; margin-right: 6px; white-space: nowrap; font-size: 14px; }
.tr-bar-spacer { flex: 1; }
.tr-bar-menu { position: relative; display: inline-block; }
.tr-bar turbo-frame:has(> .cpv1-picker) { flex-basis: 0; }
.tr-bar .cpv1-inline-error { flex-basis: 100%; }
/* ---- the Configuration page's own bits on the canon config page */
.tr-config .tr-cfg-name { cursor: text; }
/* The scorecard's definition affordance (scorecard_board.css, canon P0.12):
   dotted label; hover or keyboard focus opens the overlay. Here the overlay
   carries the entry's description, editable in place. */
.tr-config .def { position: relative; display: inline-block; border-bottom: 1px dotted var(--border-strong); cursor: help; }
.tr-config .def:hover { border-bottom-color: var(--fg-muted); }
.tr-config .def .def-tip { position: absolute; left: 0; top: calc(100% + 5px); z-index: 60; width: 270px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 6px 20px rgba(15,23,42,.16); padding: 9px 11px; font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--fg); white-space: normal; visibility: hidden; opacity: 0; transition: visibility 0s linear .25s, opacity .12s linear .13s; }
.tr-config .def .def-tip::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; }
.tr-config .def:hover .def-tip, .tr-config .def:focus-within .def-tip { visibility: visible; opacity: 1; transition-delay: 0s; }
.tr-config .def .tr-cfg-desc-text { cursor: text; }
.tr-config .def .tr-cfg-desc-text--empty { font-style: italic; color: var(--fg-muted); }
.tr-config .tr-cfg-settings { padding: 4px 16px 16px; }
.tr-config .tr-cfg-setting { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.tr-config .tr-cfg-setting-l { font-size: 13px; color: var(--fg-muted); padding-top: 4px; }
.tr-config .tr-cfg-check { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 8px 0; font-size: 13.5px; }
.tr-config .tr-cfg-num { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.tr-config .tr-cfg-input { width: 72px; height: 30px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 8px; font: inherit; font-size: 13.5px; }
.tr-config .tr-cfg-actions { padding-top: 12px; display: flex; justify-content: flex-end; }

/* ---- tracking on the package page (chunk 3): the scan history and the delivery photo */
.tr-scans { margin-top: 10px; }
.tr-scan--delivery { font-weight: 700; }
.tr-scan--exception { font-weight: 600; }
.tr-delivery-photo { margin-top: 8px; }
.tr-delivery-photo img { display: block; max-width: 320px; max-height: 240px; border: 1px solid var(--border); border-radius: 4px; }

/* ---- In transit (chunk 3): one row per package, four named columns — Package ·
   Status · Last update · Expected (Delivered · Received by once delivered). Every
   row the same height; what is longer truncates and carries its full text on hover. */
.tr-transit .cpv1-head { padding: 22px 0 18px; margin-bottom: 26px; }  /* the index frame's full width, not the Compact Detail reading column */
.tr-transit .cpv1-head-name { font-size: 26px; }
.tr-transit-checked { font-size: 12.5px; color: var(--fg-muted); }
.tr-transit-sec { display: flex; align-items: baseline; gap: 10px; margin: 36px 0 10px; }
.tr-transit-sec:first-of-type { margin-top: 0; }
.tr-transit-sec h2 { font-size: 13px; font-weight: 600; margin: 0; }
.tr-transit-sec .n { font-size: 13px; color: var(--fg-muted); }
.tr-transit-sec--quiet h2 { color: var(--fg-muted); font-weight: 500; }
.tr-transit-cols { display: grid; grid-template-columns: minmax(190px, 27fr) minmax(165px, 21fr) minmax(210px, 40fr) minmax(120px, 17fr); column-gap: 28px; align-items: center; }
.tr-transit-th { padding-bottom: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 500; }
.tr-transit-row { height: 92px; border-top: 1px solid var(--border); overflow: hidden; }
.tr-transit-row:last-child { border-bottom: 1px solid var(--border); }
.tr-transit-name, .tr-transit-to, .tr-transit-ev, .tr-transit-exp, .tr-transit-qname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-transit-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tr-transit-name a, .tr-transit-qname a { color: inherit; text-decoration: none; }
.tr-transit-name a:hover, .tr-transit-qname a:hover { text-decoration: underline; }
.tr-transit-to, .tr-transit-ev { font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; }
.tr-transit-to { margin-top: 3px; }
.tr-transit-status { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tr-transit-text { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-transit-when { font-size: 12.5px; color: var(--fg-muted); margin-top: 3px; }
.tr-transit-when .sep { margin: 0 6px; color: var(--fg-faint); }
.tr-transit-exp { font-size: 14px; line-height: 1.4; }
.tr-transit-dash { color: var(--fg-faint); }
.tr-transit-flag { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); color: #fff; font-size: 13px; font-weight: 800; margin-right: 8px; vertical-align: -3px; }
.tr-track { position: relative; height: 10px; margin-top: 8px; width: 150px; }
.tr-track-rail { position: absolute; left: 4px; right: 4px; top: 4px; height: 2px; background: var(--border); }
.tr-track-done { position: absolute; left: 4px; top: 4px; height: 2px; background: var(--fg-faint); }
.tr-track-node { position: absolute; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--border-strong); transform: translateX(-50%); }
.tr-track-node--past { background: var(--fg-faint); border-color: var(--fg-faint); }
.tr-track-node--here { background: var(--color-blue-700); border-color: var(--color-blue-700); width: 12px; height: 12px; top: -1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blue-700) 18%, white); }
.tr-track-node--end { background: var(--fg); border-color: var(--fg); }
.tr-track-node--bang { background: #fff; border: 2px solid var(--fg); width: 14px; height: 14px; top: -2px; color: var(--fg); font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tr-transit-quiet { padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg-muted); align-items: baseline; }
.tr-transit-quiet:last-child { border-bottom: 1px solid var(--border); }
.tr-transit-qname { color: var(--fg); }
.tr-transit-qwhen { font-size: 12.5px; }

/* ---- labels (chunk 4): the row's Void, a small button in the action slot */
.tr-act .tr-void { height: 24px; min-width: 40px; padding: 0 6px; font-size: 12px; line-height: 1; vertical-align: middle; }

/* ---- the print page (chunk 4): the labels as they print under the module's head; the PDF is the sheet */
.tr-print-body { max-width: none; }
.tr-print .cpv1-head-state { gap: 8px; }
/* the paper trigger is as wide as its widest choice, so the copies beside it stay put when the paper changes */
.tr-print .cpv1-head-state [data-controller~="cpv1-state-menu"] .cpv1-btn { display: inline-flex; justify-content: space-between; align-items: center; width: 152px; text-align: left; }
.tr-print-form { display: inline-flex; margin: 0 4px 0 0; }
.tr-print-copies { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-muted); }
.tr-print-n { width: 52px; height: 28px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 6px; font: inherit; font-size: 13.5px; color: var(--fg); text-align: center; }
.tr-print-empty { padding: 28px 0; }
.tr-print-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; margin-top: 8px; }
/* UPS's image is landscape, 1400 × 800 (7 × 4 in at 200 dpi, the label's up pointing left): turned upright it is
   4 wide by 7 tall, and the 4 × 6 box shows the top 6 — the label. */
.tr-print-img { position: relative; aspect-ratio: 4 / 6; background: #fff; border: 1px solid var(--border-strong); overflow: hidden; }
.tr-print-img img { position: absolute; width: 175%; max-width: none; height: auto; left: -37.5%; top: 25%; transform: rotate(90deg); transform-origin: center; }
.tr-print-pending { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.tr-print-cap { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px 0; font-size: 12.5px; }
.tr-print-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tr-print-trk { color: var(--fg-muted); font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }

/* ==========================================================================
   The phone (chunk 5, design 08): one column inside the app's frame. Below
   768 px the page fills the screen under the mobile top bar; on a desktop it
   reads at a phone's width. The frames' measurements: a 52 px top bar, 56 px
   rows, 52 px buttons, 16 px padding. Signs carry the outcome (✓ ✕), never
   colour. */
.tr-ph { display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; min-height: 70vh; border: 1px solid var(--border); border-radius: 6px; background: #fff; overflow: hidden; }
@media (max-width: 767px) { .tr-ph { max-width: none; margin: 0 calc(-1 * var(--s-6)) calc(-1 * var(--s-6)); min-height: calc(100vh - 52px); border: 0; border-radius: 0; } }
/* the undo card (its phone form: one header row) sits over the bottom edge; the page keeps its foot above it */
@media (max-width: 767px) { body:has(.undo-card-slot:not(:empty)) .tr-ph { padding-bottom: 84px; } }
.tr-ph-top { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); min-height: 52px; box-sizing: border-box; }
.tr-ph-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--fg); text-decoration: none; }
.tr-ph-t:hover { text-decoration: none; color: var(--fg); }
.tr-ph-chev { color: var(--fg-muted); margin-right: 2px; }
.tr-ph-n { margin-left: auto; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.tr-ph-body { flex: 1; }
.tr-ph-sec { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); padding: 14px 16px 6px; }
.tr-ph-none { padding: 10px 16px 14px; font-size: 14px; color: var(--fg-faint); font-style: italic; }
.tr-ph-actions { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tr-ph-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--fg); text-decoration: none; }
.tr-ph-card:hover { text-decoration: none; color: var(--fg); background: var(--surface-2); }
.tr-ph-card .t { font-size: 15px; font-weight: 600; display: flex; align-items: center; }
.tr-ph-card .go, .tr-ph-li .go { margin-left: auto; color: var(--fg-faint); }
.tr-ph-card .m { font-size: 13.5px; color: var(--fg-muted); }
.tr-ph-card .m b { color: var(--fg); font-weight: 600; }
.tr-ph-bar { height: 4px; background: var(--border); margin-top: 4px; }
.tr-ph-bar span { display: block; height: 100%; background: var(--fg); }
.tr-ph-list .tr-ph-li { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--fg); text-decoration: none; width: 100%; box-sizing: border-box; }
.tr-ph-li:hover { text-decoration: none; color: var(--fg); }
.tr-ph-li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tr-ph-li .s { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); white-space: nowrap; }
.tr-ph-li--done .nm { color: var(--fg-faint); font-weight: 400; }
.tr-ph-li--cur { background: var(--surface-2); }
.tr-ph-li--btn { background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.tr-ph-rowform { margin: 0; display: contents; }
.tr-ph-chk { width: 26px; height: 26px; border: 2px solid var(--border-strong); border-radius: 5px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; box-sizing: border-box; }
.tr-ph-chk.on { background: var(--fg); border-color: var(--fg); color: #fff; }
.tr-ph-foot { margin-top: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }
.tr-ph-btn { height: 52px; border-radius: 5px; border: 1px solid var(--border-strong); background: #fff; font: inherit; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--fg); text-decoration: none; cursor: pointer; width: 100%; box-sizing: border-box; }
.tr-ph-btn:hover { text-decoration: none; color: var(--fg); }
.tr-ph-btn--p { background: var(--fg); color: #fff; border-color: var(--fg); }
.tr-ph-btn--p:hover { color: #fff; }
.tr-ph-btn--ghost { border-color: transparent; font-weight: 500; color: var(--fg-muted); }
.tr-ph-btn--ghost:hover { color: var(--fg); }
.tr-ph-steps { display: flex; gap: 6px; padding: 12px 16px 0; }
.tr-ph-steps span { flex: 1; height: 3px; background: var(--border); border-radius: 2px; }
.tr-ph-steps span.on { background: var(--fg); }
.tr-ph-pad { padding: 16px; }
.tr-ph-center { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.tr-ph-st { display: flex; flex-direction: column; gap: 6px; }
.tr-ph-st .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.tr-ph-st .v { font-size: 17px; font-weight: 600; }
.tr-ph-st .v.mono, .tr-ph-st .mono { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.tr-ph-st .v.sub { color: var(--fg-muted); font-weight: 400; font-size: 15px; }
.tr-ph-big { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.tr-ph-big .glyph { font-size: 26px; line-height: 1; }
.tr-ph-cam { position: relative; flex: 1; min-height: 320px; background: #0f172a; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tr-ph-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tr-ph-ret { position: absolute; inset: 18% 12%; border: 2px solid rgba(255,255,255,.7); border-radius: 6px; pointer-events: none; }
.tr-ph-line { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #ef4444; pointer-events: none; }
.tr-ph-nocam { position: relative; font-size: 14px; color: rgba(255,255,255,.75); }
.tr-ph-hidden { display: none; }
.tr-ph-typed { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.tr-ph-typed .row { display: flex; gap: 8px; }
.tr-ph-typed .row .tr-ph-btn { width: 84px; flex: none; }
.tr-ph-btn--onDark { color: rgba(255,255,255,.85); }
.tr-ph-btn--onDark:hover { color: #fff; }
/* a read: the picture freezes, the reticle goes solid, the readout (kind · code) sits over it */
.tr-ph-cam.read .tr-ph-ret { border-color: #fff; border-width: 3px; }
.tr-ph-cam.read .tr-ph-line { display: none; }
.tr-ph-read { position: absolute; left: 16px; right: 16px; bottom: 16px; background: #fff; border-radius: 5px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; color: var(--fg); }
.tr-ph-read .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.tr-ph-read .v { font-family: var(--font-mono); font-size: 17px; font-weight: 600; word-break: break-all; }
/* what the earlier steps read, above the step: a row per step, label then code */
.tr-ph-st--row { flex-direction: row; align-items: baseline; gap: 12px; }
.tr-ph-st--row .k { width: 64px; flex: none; }
.tr-ph-obj { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.tr-ph-obj .ok { font-family: var(--font-sans); font-weight: 600; }
.tr-ph-st--row.now .k { color: var(--fg); font-weight: 600; }
.tr-ph-st--row.now .v { font-size: 20px; }
.tr-ph-st--row.wait .k, .tr-ph-st--row.wait .v { color: var(--fg-faint); }
.tr-ph-inp { height: 52px; width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 14px; font-family: var(--font-mono); font-size: 16px; color: var(--fg); background: #fff; }
.tr-ph-inp::placeholder { color: var(--fg-faint); font-family: var(--font-sans); }
.tr-ph-snap { flex: 1; display: flex; flex-direction: column; margin: 0; }
.tr-ph-photo-area { flex: 1; min-height: 320px; background: #334155; color: rgba(255,255,255,.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer; font-size: 14px; }
.tr-ph-shutter { width: 68px; height: 68px; border-radius: 50%; border: 4px solid #fff; box-shadow: inset 0 0 0 3px #334155; background: #fff; }
.tr-ph-sending { padding: 12px 16px; font-size: 14px; color: var(--fg-muted); }
.tr-ph-photo { display: block; }
.tr-ph-photo-img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); }

/* ==========================================================================
   Pickups (chunk 6, design 07): the booking page's rows are the Compact
   Detail's k/v rows with native date and time inputs; the shipments to
   collect are check rows; the quote sits in the foot before the buttons. */
.tr-pickup .tr-pickup-row { align-items: center; }
.tr-pickup .tr-pickup-row--top { align-items: flex-start; }
/* the canon inline input is 100% wide for a field alone on its line; these are sized to what they hold */
.cpv1-body.compact-detail-page.tr-pickup .compact-row-v .tr-pickup-inp { width: 128px; height: 30px; padding: 2px 8px; font-size: 13.5px; }
.cpv1-body.compact-detail-page.tr-pickup .compact-row-v .tr-pickup-inp--date { width: 160px; }
.cpv1-body.compact-detail-page.tr-pickup .compact-row-v .tr-pickup-inp--text { width: 320px; }
.cpv1-body.compact-detail-page.tr-pickup .compact-row-v .tr-pickup-inp--short { width: 160px; }
.cpv1-body.compact-detail-page.tr-pickup .compact-row-v .tr-pickup-notes { width: 480px; max-width: 100%; font-size: 13.5px; }
.tr-pickup-window { display: flex; align-items: center; gap: 8px; }
.tr-pickup-to { color: var(--fg-muted); font-size: 13px; }
.tr-pickup-lines { margin-left: 12px; color: var(--fg-muted); font-size: 13.5px; }
.tr-pickup-list { display: flex; flex-direction: column; gap: 6px; }
.tr-pk { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.tr-pk-name { font-weight: 500; }
.tr-pk-who { color: var(--fg-muted); font-size: 13px; }
.tr-pickup-foot { align-items: center; }
.tr-pickup-foot .cpv1-btn, .tr-pickup-foot .cpv1-btn-primary { white-space: nowrap; }
.tr-pickup-quote { margin-right: auto; font-size: 13.5px; color: var(--fg-muted); }
.tr-pickup-warning { font-size: 13.5px; max-width: 640px; }
/* the outcome dialog's readback: the compact page's label · value rows inside the confirm dialog */
.sef-confirm.tr-outcome { max-width: 640px; width: calc(100% - 32px); }
.tr-outcome-rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 12px 0 4px; }
.tr-outcome-rows dt { font-family: "IBM Plex Mono", Menlo, Monaco, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); padding-top: 2px; }
.tr-outcome-rows dd { margin: 0; font-size: 14px; }

/* A typed value keeps its line breaks (contents, notes). */
.transportation-page .compact-row-v .cpv1-inline-field { white-space: pre-line; }