/* deen-build: ted-style.css 2026-10-05a · SCOREBOARD STORE NAMES LINE UP WITH THE TOTAL'S LABEL.
   On Uptime Claims, Tech Alerts, Fleet Watch and the Lease board, each store
   column is a <button> (it filters the board), and browsers centre a button's
   contents vertically. The column stretches to the scoreboard's full height,
   so the taller the total on the left grew, the further the store names
   drifted down from "Downtime recovered" / "Alerts turned into work".
   (1) .score-st is now a top-aligned flex column, so its contents start at the
       top. It still stretches full height, so the orange "on" wash and the
       divider line are unchanged.
   (2) Where the total carries a period dropdown (.score-top), that line and the
       store-name line get the same 22px height, centred, so the names sit
       exactly level with the label. Scoped with :has(.score-top) so the Lease
       board, whose label has no dropdown, just pins to the top.
   Lives here, not in the four pages, because none of them declares display
   on .score-st; the phone fold (.score.score-collapsed .score-st) is more
   specific and still hides them. No page file changes. Previous header follows. */
/* deen-build: ted-style.css 2026-09-29a · GRID HEADINGS MAY WRAP SO GRIDS FIT THE PAGE.
   Every table heading was forced onto one line. On a DKGrid with many
   columns (sort arrow + filter caret on each), the headings alone added up
   wider than the page and the grid ran past its card's right edge - first
   seen on Land Pride Truckload Buckets (fixed there in landpride.html 29c).
   Now a DKGrid heading (a th holding .dkg-th) may wrap to two lines, but only
   when the table would otherwise not fit; on a wide screen nothing moves.
   Headings sit on the bottom line so one- and two-line headings align.
   Body cells are untouched: columns marked nowrap still never wrap.
   Plain (non-DKGrid) headings keep nowrap. Needs :has() - every current
   browser; an older one simply keeps today's one-line headings.
   Nothing else in this file changed. Previous header follows. */
/* deen-build: ted-style.css 2026-09-26e · SELECT ALL IS BACK ON PHONE CARD LISTS.
   The card rules hid the whole table heading on a phone, and on several lists
   the select-all checkbox lives IN the heading - Lot Watch, Market Activity,
   Monitored Groups suggestions, Customer Lookup's machine list, Terms Bank,
   Rent to Sell, LP E-Bill. Since the first card build (2026-09-26b) phones
   could only tick boxes one at a time. Now a header cell tagged
   data-ph="check" stays visible above the cards as "[ ] Select all"; every
   other heading stays hidden. The checkbox is the page's own element, so its
   existing select-all handler works untouched. Pages without one see nothing.
   Nothing else in this file changed. Previous header follows. */
/* deen-build: ted-style.css 2026-09-26d · CARDS NO LONGER REACH INTO NESTED TABLES.
   The phone-card rules used descendant selectors (table.ph-cards tbody td), so
   any table nested INSIDE a card - Kubota Share's county brand breakdown, the
   detail tables on Rent to Sell - had every one of its cells turned into a
   labelled card line too. Every rule is now a child selector
   (table.ph-cards > tbody > tr > td): it styles the card table's own rows and
   cells and nothing inside them. A nested table keeps the ordinary phone
   behaviour (a small table that scrolls if it must). Specificity is unchanged,
   so nothing that already worked moves.
   Nothing else in this file changed. Previous header follows. */
/* deen-build: ted-style.css 2026-09-26c · A LONG CARD TITLE NO LONGER GETS CRUSHED.
   On a phone card, the title cell had flex-basis 0, so a wide corner badge
   (Market Activity's Customer + Dealer pills) took its full width first and
   left a long customer name one word per line. The title now asks for 60% of
   the line: when title and badge both fit they share it, otherwise the badge
   drops to the next line and stays right-aligned. Title words also stop
   splitting mid-word unless a single word is wider than the card.
   Nothing else in this file changed. Previous header follows. */
/* deen-build: ted-style.css 2026-09-26b · PHONE RESULT CARDS.
   On a phone, a <table class="ph-cards"> draws each row as a card instead of
   the sideways-scrolling box every grid became under the 2026-08 table rule.
   ted-tablecards.js labels the cells; this is only the look. A page opts in
   with the class plus a data-ph role on each <th> (title / badge / sub / check
   / hide, or nothing for a "LABEL value" line) - see that file's header.
   The card is the <tr> itself, so every row click handler, checkbox and link a
   page already wired keeps working untouched. Desktop is unchanged: every rule
   sits inside max-width:700px and needs the ph-cards class.
   !important is deliberate here: page grids set padding, borders, white-space
   and backgrounds on their cells with id selectors and inline styles, and a
   card has to beat all of them on a phone without anyone editing those pages.
   ALSO: --surf2 (#FAFBFC, the row/detail wash) is now a canonical token in
   :root. Seven pages declared it as --surf2:var(--surf2), which is a
   self-reference and invalid, so it rendered as nothing on all of them:
   ask-kubota, assistant, lookup-customer, market-share, sales-kubota,
   ucc-data, warranty-intel. Each is fixed by deleting that one line from the
   page; sales-kubota is done in its 2026-09-26b build, the rest are not yet.
   Nothing else in this file changed. Previous header follows. */
/* deen-build: ted-style.css 2026-09-26a · PHONE LAYOUT KIT. NO PAGE CAN SLIDE SIDEWAYS,
   AND THE SHARED SEARCH PARTS STACK CLEANLY ON A PHONE.
   Started from Jeff's phone screenshot of Sales > Kubota > Dealer Transfer: the
   page panned left and right under his thumb. Cause: the four sub-tabs were a
   fixed inline row 400px wide inside a 390px screen, which made the whole page
   441px wide. Every fix below is phone-only (max-width:700px); desktop is
   untouched.

   1. OVERFLOW NET. html and body clip anything wider than the screen, on every
      Ted page. overflow-x:clip, NOT hidden: hidden turns body into a scroll box
      and breaks position:sticky; clip does not. iOS before 16 ignores clip and
      simply behaves as before. The net stops the panning; it does not fix the
      element that was too wide, so still fix those at the source.

   2. SUB-TABS (.subtabs / .subtab, the gray segmented bar). Page-local classes
      on sales-kubota, lookup-customer and warranty, so the phone rules use
      div.subtabs to outrank each page's own single-class rule without touching
      the pages. Up to three segments share one row equally; four or more become
      an even two-column grid.

   3. SEARCH ROWS (.searchrow / .field). On a phone every field takes the full
      width, whatever max-width or flex a page wrote inline, and the primary
      button is a full-width orange bar at the bottom. Two short fields can share
      a line by adding class="ph-half" to both .field wrappers; add ph-narrow
      too for a tiny box such as a two-letter State. When a form is split over
      several .searchrow divs, wrap them in <div class="ph-merge"> so a phone
      reads them as one list with the primary button last. Pages that use
      .searchrow today: sales-kubota, lookup-customer, warranty, ucc-data.

   4. TOOL PICKER (opt-in). Put data-toolpick on a .modetabs bar and call
      tedToolPick(bar) (the helper lives on the page for now). On a phone the
      bar is replaced by one full-width "Tool" button; tapping it opens the same
      buttons as a bottom sheet (reuses .tsheet) with each button's data-desc
      shown as a one-line explanation. The original buttons and their click
      handlers are untouched - the sheet IS the bar, restyled - so nothing a
      page wired to them can break. A page without data-toolpick sees no change.

   Nothing else in this file changed. Previous header follows. */
/* deen-build: ted-style.css 2026-09-09a · A LONG OPTION CAN NO LONGER BLOW THE PAGE
   SIDEWAYS ON A PHONE.
   Board filter selects declare width:auto locally — they sit inline in a
   toolbar and must size to their content — and a select at width:auto sizes to
   its WIDEST OPTION. On the lease board that option is a 41-character customer
   name, which at the phone font measures about 386px inside a 350px slot. The
   control ran off the right edge, took the page width with it, and the customer
   filter became a sliver you could not use (Jeff flagged 2026-09-09).

   THIS FILE CAUSED IT. The 2026-09-07q zoom guard below forces every select to
   16px, because iOS zooms the page for anything smaller and does not reliably
   zoom back. At the previous 14px that same option measured roughly 344px and
   just fit; the 16px bump widened it about 14% and tipped it over. Fixing the
   zoom bug broke this one.

   The guard is one line: on phones a toolbar select may not exceed its slot.
   .toolbar .sel is two classes, so it outranks the element+class width:auto
   rules the boards declare locally without any page having to change. It is a
   CLAMP, NOT A LAYOUT — where the content already fits, which is every select
   on tech-alerts, fleet-watch and uptime today, nothing moves at all. Those
   three carry the identical width:auto rule and were only ever safe because
   their option text is short; the first long-text filter added to any of them
   would have failed exactly the same way.

   min-width:0 goes with it. A flex item defaults to min-width:auto, which
   refuses to shrink below its content, so max-width alone would have been
   overruled by the select's own intrinsic width.

   Nothing else in this file changed. Previous header follows. */
/* deen-build: ted-style.css 2026-09-07q · TAPPING A SEARCH BOX NO LONGER ZOOMS THE PAGE.
   iOS Safari zooms the whole page whenever a text field it focuses has a
   font-size under 16px, and it does not reliably zoom back out — so opening the
   search on a board left the page scaled up and clipped at the right until it
   was pinched back by hand. Nothing was wrong with the layout; the search input
   is 15px and the day selects are 14px. Raised to 16px on phones only, which is
   the documented threshold and the entire fix.

   Portal-wide on purpose: the same sub-16px fields are on tech-alerts,
   fleet-watch, loaners and lifecycle, and any page added later inherits the
   guard rather than rediscovering the bug.

   ALSO: the board toolbars lose two near-empty rows. .tb-go carries
   margin-left:auto, which is right on a wide toolbar and wrong on a wrapping
   one — it pushed the destination buttons onto their own line and stranded the
   refresh button alone with the full width empty beside it. On phones the
   destinations become one row that scrolls sideways instead.

   BOTH USE !important, deliberately: these selectors are declared in each
   page's own <style>, which loads AFTER this file, so an ordinary rule here
   would lose every time — the same source-order trap that made half of
   dispatch 2026-09-07l do nothing.
   Previous header follows.
   deen-build: ted-style.css 2026-09-07p · A SHEET GETS ITS OWN BACKGROUND.
   .tsheet set position, size, radius and shadow but never a background colour.
   Every sheet shipped so far hid the gap because the element underneath already
   had one — the Dispatch menus are all .cmenu, and the Loaners filter shell was
   given one by hand. Dispatch's Find shell is a plain wrapper div, so it opened
   transparent: the header bar rendered, the rows rendered, and the map and
   schedule showed through everywhere between them.

   Set without !important, so any page that declares its own background on a
   sheet element still wins and nothing already live changes appearance.
   Previous header follows.
   deen-build: ted-style.css 2026-09-07l · SHORT SHEETS OPEN CENTRED.
   A bottom sheet earns its place when it is full of choices — the Dispatch
   Create menu, the Loaners filters. A two-item menu pinned to the bottom edge
   under a full-height scrim reads as unbalanced: almost the whole screen is
   dimmed backdrop and the content clings to the bottom.

   .tsheet-center is an opt-in variant for those. Same scrim, same Escape and
   tap-out, same ted-sheet.js — only the placement changes, so nothing about
   the module or the sheets already shipped is affected. A page opts in by
   adding the class; sheets that do not stay exactly as they were.
   Previous header follows.
   deen-build: ted-style.css 2026-09-07i · TWO MOBILE FIXES ON THE ALERT BOARDS.
   1. MODALS NO LONGER DRIFT. .modal is a fixed full-screen scrim and .modal-box
   sits inside it, but nothing stopped the board BEHIND from scrolling: touch
   scrolling chained straight through to the page, and opening the keyboard for
   a note field shoved the whole thing around, so the dialog appeared to slide
   and had to be pinched back. Below 700px the box now anchors to the bottom
   edge, caps its height in dvh (which tracks the keyboard rather than ignoring
   it) and scrolls internally, and the scrim contains its own overscroll so the
   page underneath stays put. No JS and no body-scroll lock needed.

   2. THE SCOREBOARD FOLDS TO ONE NUMBER. Its store blocks stack full width
   below 900px, putting three tall blocks between the heading and the first
   alert. They now collapse behind one line, driven by ted-score.js. They are
   BUTTONS that filter the board by store, not readouts, so they collapse
   rather than disappear — hiding them outright would delete store filtering
   for the lead standing in one store.

   Both blocks are inert above 700px. .modal / .modal-box stay declared locally
   on the pages that own them; this only adds mobile behaviour on top.
   Previous header follows.
   deen-build: ted-style.css 2026-09-07f · ALERT CARDS COLLAPSE ON A PHONE.
   The shared card from 2026-09-07c stacks to one column below 520px, so every
   card on fleet-watch, tech-alerts and uptime runs 500-700px tall on a phone.
   These are triage boards — the first question is always which alert matters,
   not the full contents of one. Below 700px a card now shows only its .tc-sum
   summary row until it is tapped, and .tc-sum is the ONLY thing that renders
   above the fold. Desktop is untouched: none of this bites above 700px, where
   .tc-sum is display:none and the four-column card is exactly as it was.

   The hidden state is expressed as :not(.tc-open) rather than by hiding
   everything and un-hiding on open — the children have three different display
   values (.gcols is grid, .gbar is flex, the rest block) and re-declaring them
   on open would mean this file quietly owning the card's whole layout.
   Previous header follows.
   deen-build: ted-style.css 2026-09-07c · THE ALERT CARD IS SHARED NOW.
   tech-alerts.html and fleet-watch.html are twins: all 187 CSS rules in
   tech-alerts were byte-for-byte identical to rules in fleet-watch, and both
   build the same four-column machine card from the same template. uptime.html
   is the same component, drifted. One component, three copies, maintained
   separately — which is how they drifted in the first place.

   This declares the fifteen rules the three genuinely agree on. It is INERT on
   arrival: all three pages link this stylesheet BEFORE their own <style>, so
   their local copies still win and nothing moves. The pages delete those local
   copies one at a time in later builds, and only then does this take over.

   TWO DELIBERATE DIFFERENCES from the tech-alerts/fleet-watch copies:
   .card-model, .ghrs and .sev asked for font-family:"Barlow Condensed" with no
   fallback. When that Google font fails to load, the model number, the hours
   and the severity pill fall back to the browser's default serif — the same
   bug fixed in lifecycle.html at 2026-08-16a. uptime.html already carried the
   corrected form; this adopts it, so both boards get the fix when they adopt.

   NOT EXTRACTED, on purpose:
   .gcols — the column ratios genuinely differ per board; they stay page-local.
   .loc   — loaners.html uses this class without styling it, so publishing a
            font-size here would silently restyle the fleet board.
   .btn / .card / .tabs / .toolbar / .pagechip — portal-wide chrome used on six
            other pages. Making those canonical is a real decision with a real
            blast radius, and it is not this one.

   DEPENDENCY: these rules read --ink3 and --surf2, which are declared in each
   page's own :root, not here. Custom properties resolve at the element, so
   this works — but a fourth page adopting the card must declare them too.
   Promoting both into the token block above is the obvious follow-up.
   Previous header follows.
   deen-build: ted-style.css 2026-09-07a · MENUS THAT CLIP ON A PHONE BECOME SHEETS.
   An anchored dropdown (position:absolute;right:0) cannot know its button sits
   near the right edge of a 390px screen, so it opens partly off-viewport and
   shears the first character off every label. Dispatch's + Create menu was
   doing exactly that. Widening or narrowing the box never fixes it — the
   anchor is the bug.

   .tsheet is the opt-in fix, driven by ted-sheet.js: below 700px the element
   becomes a bottom sheet — full width, pinned to the bottom edge, scrim
   behind, page scroll locked, safe-area padding under the home indicator.
   Above 700px every rule here is inert and the desktop menu is untouched.

   Declared here rather than in dispatch.html because this is not a dispatch
   problem: the loaner board, Tech Alerts, Truck Stock, My Day and the lookup
   facet pickers all open anchored panels on the same phones. Dispatch is the
   first adopter and the only page calling it today; nothing else changes
   until it does.
   Previous header follows.
   deen-build: ted-style.css 2026-08-16a · CLAIM DEEP DIVE IS SHARED NOW.
   The claim overlay (.dive-* chrome, plus .dcard / .mtile / .storyrow / .tline /
   .p-* content) lived inside warranty.html. uptime.html now opens the same
   overlay for the parent warranty claim and for the filed Uptime claim, so the
   component moved here rather than being pasted a second time. Nothing on
   warranty.html changes: it keeps its local copy until that page is next open.
   Previous header follows.
   deen-build: ted-style.css 2026-08-09c · PAGE HEADING IS CANONICAL NOW.
   .pagetitle / .pagesub — the name and the one-line "what this tool is for"
   at the top of a page — were invented on the four carved pages and copied
   between them, so the seven older tools simply never got one. Declared here
   once at the values those pages already use, so nothing shifts on them and
   the older pages get it by linking this sheet. The four local copies can be
   deleted whenever those pages are next open. This is the page's own heading
   and is NOT the same thing as the tool name in Ted's black bar: the bar is
   chrome that stays put and answers "where am I", the heading is content that
   scrolls and anchors the description. Both, on purpose. Previous header follows.
   deen-build: ted-style.css 2026-08-09b · TABLES SCROLL ON PHONES. A data table
   wider than the screen used to push the whole page sideways, slicing the card
   off (Jeff flagged the unit Warranty table on mobile, 2026-08-16). Fourteen
   tables across the four carved pages had the problem; the ones that behaved
   had a hand-added overflow wrapper, so the fix was inconsistent by page. Now
   handled once here for every table on every Ted page, present and future —
   see the block under "line-table pattern". Previous header follows.
   deen-build: ted-style.css 2026-08-09a · FAILURE STATES. "We couldn't check" and
   "we checked, there's nothing" now look different. They were both a grey centred
   .state line, so a lookup that errored read as a clean result — that is how a
   broken UCC financing check sat unnoticed and could have been taken as "no lien."
   Red tokens were being declared privately in eleven pages (--red-tx/--red-bg) and
   are now canonical here. Previous header follows.
   deen-build: ted-style.css 2026-08-08c · PAGE WIDTH STANDARD = 1440px. .container
   now carries the real page padding (18px 20px 60px) that every page was declaring
   locally, so pages can delete their own .container line and inherit. Change the
   portal's width for every Ted page by editing the one value below. Previous header follows.
   deen-build: ted-style.css 2026-08-08b · table{line-height:1.35} added — restores
   pre-Ted row density on all data tables portal-wide. Previous header follows.
   deen-build: ted-style.css 2026-08-08a · NEW — the single source of the Ted look.
   Tokens and components lifted from TED-STYLE-GUIDE.md (which was extracted from the
   Jeff-approved parts-store build 08l). Every new Ted page links this file; every
   existing page adopts it during its restyle pass and deletes its own copies.
   Rule: pages may ADD page-specific styles below this import in their own <style>,
   but tokens and these shared components are never re-declared. */

:root{
  --orange:#F36F21; --orange-dark:#D95B0F; --orange-soft:#FFF3EA;
  --ink:#1C1E21; --steel:#5A6069; --mist:#F4F5F7; --line:#E3E5E9; --white:#FFF;
  --green:#1E8E3E; --green-soft:#E8F5EC;
  --amber:#B26A00; --amber-soft:#FFF6E5;
  --blue:#2A5CBF; --blue-soft:#EAF0FB;
  --red:#A32D2D; --red-soft:#FBE4E4;
  /* Legacy names. Eleven pages declared these in their own :root before the
     stylesheet existed; kept as aliases so those pages keep working while they
     delete their local copies. Use --red / --red-soft in anything new. */
  --red-tx:#A32D2D; --red-bg:#FBE4E4;
  --radius:10px;
  /* Row / detail wash. Added 2026-09-26b: seven pages declared it as
     --surf2:var(--surf2), a self-reference, which is invalid CSS - so every
     var(--surf2) on those pages (sub-tab tracks, total bars, row hovers)
     silently rendered transparent. Canonical here now; a page fixes itself by
     deleting its own --surf2 line. */
  --surf2:#FAFBFC;
  --shadow:0 1px 3px rgba(20,22,25,.07),0 4px 14px rgba(20,22,25,.05);
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--mist);font-size:15px;line-height:1.5}
/* Data tables run denser than prose. Without this, table cells inherit the
   body 1.5 line-height and every row grows ~25% taller than the pre-Ted pages
   (Jeff flagged 2026-08-08). Applies to every table on every Ted page. */
table{line-height:1.35}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
h1,h2,h3,.disp{font-family:'Barlow Condensed',sans-serif;letter-spacing:.01em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* ---------- surfaces ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.accent{border-left:4px solid var(--orange)}
.container{max-width:1440px;margin:0 auto;padding:18px 20px 60px}
/* black context strip: cross-page working context (machine, serial, location, user) */
.ctxstrip{background:var(--ink);color:#fff;padding:8px 20px;font-size:13.5px;position:sticky;top:0;z-index:15}
.ctxstrip b{color:var(--orange)}

/* ---------- buttons ---------- */
.btn-pri{background:var(--orange);color:#fff;border:none;border-radius:9px;padding:11px 18px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.btn-pri:hover{background:var(--orange-dark)}
.btn-dark{background:var(--ink);color:#fff;border:none;border-radius:9px;padding:11px 18px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.btn-dark:hover{background:var(--orange)}
.btn-quiet{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:10px 14px;font-size:13px;font-weight:600}
.btn-quiet:hover{border-color:var(--orange);color:var(--orange-dark)}
.btn-done{background:var(--green-soft);color:var(--green);border:none;border-radius:9px;padding:11px 18px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
button:disabled{opacity:.5;cursor:default}

/* ---------- pills & tags ---------- */
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;white-space:nowrap}
.pl-green{background:var(--green-soft);color:var(--green)}
.pl-blue{background:var(--blue-soft);color:var(--blue)}
.pl-amber{background:var(--amber-soft);color:var(--amber)}
.pl-orange{background:var(--orange-soft);color:var(--orange-dark)}
.pl-gray{background:var(--mist);color:var(--steel)}
.pl-red{background:var(--red-soft);color:var(--red)}
.roletag{display:inline-block;background:var(--mist);color:var(--steel);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border-radius:6px}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--mist);border:1px solid var(--line);
  border-radius:999px;padding:3px 11px;font-size:11.5px;color:var(--steel)}
a.chip,button.chip{text-decoration:none;cursor:pointer}
a.chip:hover,button.chip:hover{border-color:var(--orange);color:var(--orange-dark);background:var(--orange-soft)}

/* ---------- the shared line-table pattern ---------- */
.ltable{width:100%;border-collapse:collapse}
.ltable thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);font-weight:700;
  text-align:left;padding:9px 12px;background:#EFF1F4;white-space:nowrap}
.ltable thead th.r{text-align:right}
/* DKGrid headings wrap only when the grid would not fit otherwise (2026-09-29a) */
table thead th:has(> .dkg-th){white-space:normal;vertical-align:bottom}
.dkg-th{line-height:1.25}
.ltable tbody td{padding:11px 12px;border-top:1px solid var(--line);font-size:14px;vertical-align:middle}
.ltable tbody td.r{text-align:right;font-variant-numeric:tabular-nums}
.ltable tbody tr:hover{background:#FAFBFC}
.ltable tbody tr.sel{background:var(--orange-soft);box-shadow:inset 3px 0 0 var(--orange)}
.ltable .subrow{background:#FAFBFC}
.ltable .subrow .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);font-weight:700}
/* bulk action bar (sticky at panel bottom; render only when something is selected) */
.bulkbar{position:sticky;bottom:0;background:#FAFBFC;border-top:1px solid var(--line);
  padding:11px 14px;display:flex;align-items:center;gap:12px}
.bulkbar .total{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px}
.bulkbar .count{color:var(--steel);font-size:13px}
.bulkbar .act{margin-left:auto}

/* ---------- page heading ----------------------------------------------------
   Every tool page opens with its name and one plain-English line saying what
   the tool is for — a service writer who has never opened it should know what
   it does without clicking anything. Voice: second person, no system talk.     */
.pagetitle{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 2px}
.pagesub{font-size:14px;color:var(--steel);margin:0 0 16px;max-width:78ch}

/* ---------- wide tables on phones ------------------------------------------
   Below tablet width a data table that will not fit gets its OWN sideways
   scroll instead of dragging the page with it. Without this the table's
   minimum width becomes the page's width, the card is cut off at the right
   edge, and the header sits over content that has slid out from under it.

   display:block turns the table into its own scroll box. It is deliberately
   screen-only and phone-only — on desktop tables stay real tables so column
   widths keep filling the card, and print is untouched.

   Applies to any table inside a .card plus the data-table classes the carved
   pages use by name. Tables that already sit in a hand-added overflow wrapper
   are unaffected in practice — the inner table just takes over the scrolling.

   The scrollbar is forced visible and slightly thicker than the phone default:
   counter staff do not discover a sideways scroll on their own, so the bar is
   the affordance that says "there is more to the right." Do not hide it.       */
@media screen and (max-width:820px){
  .card table,
  table.ltable, table.tbl, table.custtable, table.wwtable, table.shiptable,
  table.mhtable, table.fleet, table.jc, table.u, table.ck, table.raw2{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  table::-webkit-scrollbar{height:7px;-webkit-appearance:none}
  table::-webkit-scrollbar-track{background:transparent}
  table::-webkit-scrollbar-thumb{background:#C4C8CE;border-radius:4px}
}

/* ---------- forms ---------- */
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);
  font-weight:600;margin-bottom:5px}
.inp,.sel{width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:9px;
  padding:12px 14px;font-size:15px;color:var(--ink)}
.inp:focus,.sel:focus{border-color:var(--orange);outline:none}
.inp.hero{border-width:2px;border-color:var(--ink)}
.inp.hero:focus{border-color:var(--orange)}
input[type=checkbox],input[type=radio]{accent-color:var(--orange)}

/* ---------- timeline (order/return progress) ---------- */
.tl{display:flex;align-items:flex-start}
.tl .step{flex:1;text-align:center;position:relative}
.tl .dot{width:15px;height:15px;border-radius:50%;background:var(--line);margin:0 auto 7px;position:relative;z-index:1}
.tl .bar{position:absolute;top:6px;left:50%;width:100%;height:3px;background:var(--line)}
.tl .step:last-child .bar{display:none}
.tl .step.done .dot,.tl .step.done .bar{background:var(--green)}
.tl .step.cur .dot{background:var(--orange);box-shadow:0 0 0 4px var(--orange-soft)}
.tl .lab{font-size:12.5px;color:var(--steel)}
.tl .step.cur .lab{color:var(--ink);font-weight:600}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:13.5px;padding:11px 18px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.25);z-index:100}
.toast b{color:var(--orange)}

/* ---------- states ----------------------------------------------------------
   THREE states, and they must never look alike:

     .state            we are working on it        (also .state.load)
     .state.empty      we asked, the answer is no  (the default look)
     .state.fail       we could not ask            <- must not read as an answer

   The distinction is not decoration. A grey "Couldn't reach Texas UCC data"
   sitting where "No filings found" normally sits tells a writer the machine is
   clear when we never actually checked. A failure is red, left-aligned, marked,
   and offers a way to try again — it should never be mistaken for a result.

   Emit these through Ted.stateFail() / Ted.stateEmpty() in portal-common.js so
   the wording stays consistent too; the helpers also inline the colours, which
   keeps them correct on pages that have not adopted this stylesheet yet.       */
.muted{color:var(--steel)}
.state{padding:48px 20px;text-align:center;color:var(--steel);font-size:15px}
.state.empty{}                       /* explicit alias for the default look */
.state.load{color:var(--steel)}
.state.load::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;
  border-radius:50%;background:var(--orange);vertical-align:middle;animation:tedpulse 1.1s ease-in-out infinite}
@keyframes tedpulse{0%,100%{opacity:.25}50%{opacity:1}}

.state.fail{background:var(--red-soft);color:var(--red);border-left:3px solid var(--red);
  border-radius:var(--radius);padding:14px 16px;text-align:left;font-size:14.5px;line-height:1.5}
.state.fail::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-right:9px;border-radius:50%;background:var(--red);color:#fff;
  font-size:12px;font-weight:700;vertical-align:-3px}
.state.fail b{color:var(--red)}
.state.fail .why{display:block;margin-top:5px;color:var(--red);opacity:.8;font-size:13px}
.state.fail .act{margin-top:10px}
.state.fail .act button{background:var(--white);color:var(--red);border:1px solid var(--red);
  border-radius:8px;padding:7px 14px;font-size:13.5px;font-weight:600;cursor:pointer}
.state.fail .act button:hover{background:var(--red);color:var(--white)}
.state.fail .act button[disabled]{opacity:.55;cursor:default}

.errbox{background:var(--red-soft);color:var(--red);border-radius:10px;padding:12px 14px;font-size:14px}
/* GPS/location values render as links opening Google Maps in a new tab (standing rule) */
a.loc{color:var(--orange-dark);font-weight:500;text-decoration:none}
a.loc:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }

/* ---------- claim deep dive (shared) ----------
   The claim overlay that claim-dive.js renders. Lived inside warranty.html
   until a second page needed it (uptime.html, 2026-08-16); a component used by
   two pages belongs here, not copy-pasted a third time.

   Written against the canonical tokens, NOT the legacy bridge aliases, so any
   page can link this sheet and get a working dive without declaring --surf,
   --ink3, --kubota and friends first.

   NOTE on names: the overlay chrome is .dive-* here. warranty.html still carries
   its own .dlg-* copy of the same rules, because uptime.html already uses .dlg
   for its native <dialog> bodies and a shared .dlg would collide. When warranty
   is next open, switch its dive markup to .dive-* and delete its local block. */
.dive-back{position:fixed;inset:0;background:rgba(28,27,26,.45);z-index:60;display:none;
  align-items:flex-start;justify-content:center;padding:26px 14px;overflow-y:auto}
.dive-back.open{display:flex}
.dive{background:var(--mist);border-radius:16px;width:100%;max-width:880px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;margin-bottom:26px}
.dive-head{position:sticky;top:0;z-index:2;background:var(--white);border-bottom:1px solid var(--line);
  padding:14px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dive-head .t{font-family:'Barlow Condensed';font-weight:700;font-size:17px}
.dive-x{margin-left:auto;background:#FAFBFC;border:none;border-radius:8px;width:32px;height:32px;
  font-size:16px;color:var(--steel);cursor:pointer;line-height:1}
.dive-x:hover{background:var(--line)}
.dive-body{padding:16px 20px 22px}
.dive-body table.tbl{font-size:13px}
.dive-body table.tbl td{padding:7px 10px 7px 0}

.dcard{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.dcard h4{font-family:'Barlow Condensed';font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--steel);font-weight:700;margin:0 0 10px}
.moneytiles{display:flex;gap:10px;flex-wrap:wrap}
/* Row/detail wash — no canonical token for it yet, same literal the pages use. */
.mtile{background:#FAFBFC;border-radius:10px;padding:9px 14px;min-width:110px}
.mtile .ml{font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:3px}
.mtile .mv{font-family:'Barlow Condensed';font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.mtile.hero{background:var(--orange-soft)}
.mtile.hero .mv{color:var(--orange-dark)}
.storyrow{margin-bottom:10px}
.storyrow .sk{font-size:11.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:2px}
.storyrow .sv{font-size:14px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.tline{border-left:2.5px solid var(--line);margin-left:7px;padding-left:16px}
.tstep{position:relative;padding-bottom:12px}
.tstep:last-child{padding-bottom:2px}
.tstep::before{content:"";position:absolute;left:-22.5px;top:4px;width:10px;height:10px;
  border-radius:50%;background:var(--orange);border:2px solid var(--mist)}
.tstep .ta{font-weight:600;font-size:13.5px}
.tstep .tm{font-size:12.5px;color:var(--steel)}
.tstep .tr{font-size:13px;color:var(--steel);margin-top:2px;white-space:pre-wrap}
.metaline{font-size:12px;color:var(--steel);margin-top:4px}
.dstate{padding:40px 16px;text-align:center;color:var(--steel);font-size:14.5px}

/* Status pills the dive emits (pill p-green / p-red / p-amber / p-blue / p-gray).
   Distinct from the .pill.green form some pages use locally — both are live, so
   neither name can be dropped yet. */
.p-green{background:var(--green-soft);color:var(--green)}
.p-amber{background:var(--amber-soft);color:var(--amber)}
.p-red{background:var(--red-soft);color:var(--red)}
.p-blue{background:var(--blue-soft);color:var(--blue)}
.p-gray{background:var(--mist);color:var(--steel)}

/* ============================================================
   BOTTOM SHEET (.tsheet) — see the 2026-09-07a header note.
   Opt in from JS: TedSheet.attach(el, {onClose, label}).
   Every rule below 700px uses !important on purpose: the elements this wraps
   are anchored panels whose pages set top/left/width as inline styles while
   measuring and clamping them to the viewport. That measuring code stays in
   place for desktop, so the sheet has to outrank it rather than fight it.
   ============================================================ */
.tsheet-scrim{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:69;
  opacity:0;pointer-events:none;transition:opacity .18s ease}
.tsheet-scrim.on{opacity:1;pointer-events:auto}
.tsheet-head{display:none}

@media screen and (max-width:700px){
  /* A sheet needs its own background. Every sheet up to now got away without
     one because the element underneath already had it - #createMenu, #slotPick
     and #moreMenu are all .cmenu, and the Loaners filter shell was given one by
     hand. Dispatch's Find shell is a plain wrapper div with nothing of its own,
     so the sheet rendered see-through and the page showed between its rows.
     Declared WITHOUT !important on purpose: a page that sets its own background
     on the element still wins, so nothing already shipped changes colour. */
  .tsheet{background:var(--white);}
  .tsheet{position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    top:auto!important;width:auto!important;max-width:none!important;
    max-height:86vh;overflow-y:auto!important;overflow-x:hidden!important;
    border-radius:14px 14px 0 0!important;
    border-left:none!important;border-right:none!important;border-bottom:none!important;
    box-shadow:0 -8px 30px rgba(16,24,40,.22)!important;z-index:70!important;
    padding-bottom:calc(6px + env(safe-area-inset-bottom))!important}

  /* Heading + grab handle. A dropdown is explained by the button it hangs off;
     a sheet covers that button, so it has to name itself and offer a way out. */
  .tsheet-head{display:flex;align-items:center;justify-content:space-between;
    padding:16px 16px 10px;border-bottom:1px solid var(--line);background:var(--white);
    position:sticky;top:0;z-index:1;
    font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;
    font-size:17px;font-weight:700;color:var(--ink)}
  .tsheet-head::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:34px;height:4px;border-radius:2px;background:var(--line)}
  .tsheet-x{background:none;border:none;font-size:26px;line-height:1;color:var(--steel);
    cursor:pointer;padding:0 2px;font-family:inherit}

  /* The page behind a sheet must not scroll — that is what put the sticky nav
     over a half-scrolled heading on the phone screenshot this started from. */
  body.tsheet-open{overflow:hidden}
}


/* ============================================================
   SHARED ALERT CARD — see the 2026-09-07c header note.
   Used by tech-alerts.html, fleet-watch.html, uptime.html.
   ============================================================ */
.gcol{padding:13px 15px;border-right:1px solid var(--line);min-width:0;}
.glbl{font-size:11px;color:var(--ink3);letter-spacing:0.06em;text-transform:uppercase;font-weight:700;margin-bottom:7px;}
.glbl-row{display:flex;align-items:baseline;gap:10px;margin-bottom:7px;}
.model-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.card-serial{font-size:12.5px;color:var(--ink3);font-variant-numeric:tabular-nums;word-break:break-all;margin-top:2px;}
.gcust-name{font-size:13.5px;font-weight:600;line-height:1.3;}
.ghrs{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;margin-top:8px;}
.card-model{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;line-height:1.2;}
.gline{margin-top:5px;font-size:13.5px;}
.gwhen{font-size:14px;font-weight:600;color:var(--ink);margin-top:10px;line-height:1.3;font-variant-numeric:tabular-nums;}
.gfault-desc{font-size:14px;font-weight:600;line-height:1.3;margin:7px 0 6px;}
.gtelem{font-size:12.5px;color:var(--ink3);margin-top:8px;}
.sev{display:inline-flex;align-items:center;justify-content:center;min-width:38px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;padding:4px 9px;border-radius:8px;}
.gbar{display:flex;align-items:center;gap:8px;padding:10px 15px;border-top:1px solid var(--line);background:var(--surf2);flex-wrap:wrap;}
.gbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* ============================================================
   COLLAPSING ALERT CARD (.tc / .tc-sum) — see the 2026-09-07f header note.
   Driven by ted-card.js. Used by the fleet-watch / tech-alerts / uptime cards.
   ============================================================ */
.tc-sum{display:none;}

@media screen and (max-width:700px){
  .tc-sum{display:block;padding:11px 13px;cursor:pointer;position:relative;}
  .tc:not(.tc-open) > *:not(.tc-sum){display:none;}
  .tc.tc-open > .tc-sum{border-bottom:1px solid var(--line);}

  .tc-idrow{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;}
  .tc-idrow .card-model{font-size:15.5px;}
  /* The row is a tap target, so the chevron is the affordance that says so. */
  .tc-sum::after{content:"\25BE";position:absolute;right:13px;bottom:10px;
    font-size:12px;color:var(--ink3);line-height:1;}
  .tc.tc-open > .tc-sum::after{content:"\25B4";color:var(--kubota);}

  .tc-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
    margin-top:7px;padding-right:20px;font-size:13px;color:var(--ink3);}
  .tc-meta .who{color:var(--ink);font-weight:600;}
  .tc-meta .sep{color:var(--line);}
  /* Location stays reachable WITHOUT opening the card - ted-card.js lets
     clicks on anchors through for exactly this reason. */
  .tc-meta a.loc{color:var(--kubota-dk);font-weight:600;text-decoration:none;}
  .tc-gap{font-weight:700;}
  .tc-gap.over{color:var(--red-tx);}
}


/* ============================================================
   SCOREBOARD STORE COLUMNS PIN TO THE TOP — see the 2026-10-05a header note.
   ============================================================ */
.score-st{display:flex;flex-direction:column;justify-content:flex-start;}
.score-top{min-height:22px;}
.score:has(.score-top) .score-stname{min-height:22px;display:flex;align-items:center;}


/* ============================================================
   MOBILE MODAL + FOLDING SCOREBOARD — see the 2026-09-07i header note.
   ============================================================ */
.score-more{display:none;}

@media screen and (max-width:700px){
  /* Anchored to the bottom, capped in dvh, scrolling inside itself. dvh rather
     than vh on purpose: vh is the pre-keyboard viewport, which is exactly the
     measurement that made the dialog drift once the keyboard opened. */
  .modal{padding:0;align-items:flex-end;overscroll-behavior:contain;}
  .modal-box{max-height:92dvh;overflow-y:auto;border-radius:16px 16px 0 0;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));}

  /* The toggle is appended last but ordered directly under the total, so it
     never reads as sitting below the blocks it controls. */
  .score-more{display:block;order:1;width:100%;margin-top:9px;padding:9px 0 0;
    background:none;border:none;border-top:1px solid var(--line);text-align:left;
    font-family:inherit;font-size:13px;font-weight:600;color:var(--kubota-dk);cursor:pointer;}
  .score-st{order:2;}
  .score.score-collapsed .score-st{display:none;}
}


/* ============================================================
   CENTRED SHEET VARIANT (.tsheet-center) — see the 2026-09-07l header note.
   Opt in per element: el.classList.add("tsheet-center").
   ============================================================ */
@media screen and (max-width:700px){
  .tsheet.tsheet-center{
    top:50%!important;bottom:auto!important;left:14px!important;right:14px!important;
    transform:translateY(-50%);
    width:auto!important;max-height:78dvh;
    border-radius:14px!important;border:1px solid var(--line)!important;
    box-shadow:0 12px 40px rgba(16,24,40,0.28)!important;
    padding-bottom:0!important;}
  /* The grab handle means "drag me up from the bottom". A centred box does not
     do that, so it would be a lie about how the thing behaves. */
  .tsheet.tsheet-center .tsheet-head::before{display:none;}
  .tsheet.tsheet-center .tsheet-head{padding-top:13px;}
}


/* ============================================================
   PHONE INPUT ZOOM GUARD + BOARD TOOLBAR — see the 2026-09-07q header note.
   ============================================================ */
@media screen and (max-width:700px){
  /* 16px is iOS Safari's threshold, not a design choice: below it the page is
     zoomed on focus and not reliably restored. */
  input[type="text"],input[type="search"],input[type="number"],input[type="tel"],
  input[type="email"],input[type="date"],input[type="password"],
  select,textarea,.search input,.inp,.sel{font-size:16px!important;}

  /* margin-left:auto is right on a wide toolbar and wrong on a wrapping one. */
  .tb-go{margin-left:0!important;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;
    gap:7px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tb-go::-webkit-scrollbar{display:none;}
  .tb-go .btn{flex:0 0 auto;}
  .toolbar .search{flex:1 1 58%;min-width:0;}

  /* THE OVERFLOW CLAMP — see the 2026-09-09a header note. A select at
     width:auto sizes to its widest OPTION, not to its slot, so one long
     customer name is enough to push the control past the viewport and drag
     the whole page sideways with it. Two classes, so this outranks the
     element+class `select.sel{width:auto}` every board declares locally and
     no page has to change. Where the content already fits this does nothing. */
  .toolbar .sel{max-width:100%;min-width:0;}
}

/* ============================================================
   PHONE LAYOUT KIT — see the 2026-09-26a header note.
   ============================================================ */
.toolpick{display:none;}

@media screen and (max-width:700px){
  /* 1. Overflow net. */
  html,body{overflow-x:clip;}

  /* 2. Sub-tabs: equal segments, never wider than the screen. */
  div.subtabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;}
  div.subtabs:has(> :nth-child(4)){grid-auto-flow:row;grid-template-columns:1fr 1fr;}
  div.subtabs > *{min-height:44px;padding-left:6px;padding-right:6px;text-align:center;line-height:1.2;}

  /* 3. Search rows: one field per line, primary button full width. */
  div.searchrow{gap:12px 10px;}
  div.searchrow > .field,
  div.searchrow > input.inp,
  div.searchrow > select.inp{flex:1 1 100% !important;max-width:none !important;min-width:0 !important;}
  div.searchrow > .field.ph-half{flex:1 1 calc(50% - 5px) !important;}
  div.searchrow > .field.ph-half.ph-narrow{flex:0 0 96px !important;}
  /* .ph-merge wraps two or more search rows so a phone treats them as one
     list and the primary button always lands last. The rows keep their DOM
     and desktop layout; display:contents only dissolves their boxes here. */
  .ph-merge{display:flex;flex-wrap:wrap;gap:12px 10px;}
  .ph-merge > div.searchrow{display:contents;}
  .ph-merge .btn.pri{order:1;}
  div.searchrow > .field .inp{width:100% !important;}
  div.searchrow > .btn.pri{flex:1 1 100%;min-height:48px;}

  /* 4. Tool picker. */
  .modetabs[data-toolpick]:not(.tp-open){display:none !important;}
  .toolpick{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;margin:0 0 14px;
    padding:8px 14px;background:var(--orange-soft);border:1.5px solid var(--orange);border-radius:10px;
    color:var(--orange-dark);font-family:inherit;text-align:left;cursor:pointer;}
  .toolpick .tp-txt{flex:1 1 auto;min-width:0;}
  .toolpick .tp-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--steel);line-height:1.2;}
  .toolpick .tp-name{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;
    letter-spacing:.02em;text-transform:uppercase;line-height:1.1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .toolpick .tp-badge{background:var(--orange);color:#fff;border-radius:999px;padding:2px 8px;
    font-size:12px;font-weight:700;}
  .toolpick .tp-chev{font-size:13px;}

  .modetabs[data-toolpick].tp-open{display:flex !important;flex-direction:column;flex-wrap:nowrap;gap:0;
    margin:0 !important;padding:0 0 calc(10px + env(safe-area-inset-bottom)) !important;}
  .modetabs[data-toolpick].tp-open .modetab{display:block;width:100%;text-align:left;margin:0;
    background:var(--white);border:0;border-bottom:1px solid var(--line);border-radius:0;
    padding:13px 18px;font-size:16px;font-weight:600;color:var(--ink);}
  .modetabs[data-toolpick].tp-open .modetab::after{content:attr(data-desc);display:block;margin-top:2px;
    font-size:13px;font-weight:400;color:var(--steel);line-height:1.35;}
  .modetabs[data-toolpick].tp-open .modetab.on{background:var(--orange-soft);color:var(--orange-dark);
    box-shadow:inset 4px 0 0 var(--orange);}
}

/* ============================================================
   PHONE RESULT CARDS (table.ph-cards) — see the 2026-09-26b header note.
   ============================================================ */
@media screen and (max-width:700px){
  table.ph-cards{display:block !important;overflow:visible !important;width:100%;
    border-collapse:separate;font-size:14px;}
  /* The heading row is hidden on a card list - EXCEPT a select-all checkbox
     (a header cell tagged data-ph="check"), which stays as a "Select all" line
     above the cards. Added 2026-09-26e: hiding the whole heading had taken
     select-all away on phones wherever it lived in the header. */
  table.ph-cards > thead{display:block;}
  table.ph-cards > thead > tr{display:flex;align-items:center;border:0;background:none;}
  table.ph-cards > thead > tr > th{display:none !important;}
  table.ph-cards > thead > tr > th[data-ph="check"]{display:flex !important;align-items:center;gap:9px;
    width:auto !important;position:static !important;padding:2px 0 10px 14px !important;
    border:0 !important;background:none !important;cursor:pointer;}
  table.ph-cards > thead > tr > th[data-ph="check"]::after{content:"Select all";font-size:13.5px;
    font-weight:600;color:var(--steel);text-transform:none;letter-spacing:0;}
  table.ph-cards > thead > tr > th[data-ph="check"] input{width:20px;height:20px;margin:0;}
  table.ph-cards > tbody{display:block;}
  table.ph-cards > tbody > tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;
    background:var(--white);border:1px solid var(--line);border-radius:10px;
    padding:11px 13px;margin:0 0 8px;}
  /* A label line: the header text sits in a fixed 104px gutter on the left,
     the cell's own content - however many elements it holds - flows on the
     right. Absolute label rather than grid/flex, because a grid would split a
     cell holding "Central Kubota" + "#23210" into two columns. */
  table.ph-cards > tbody > tr > td{display:block;position:relative;flex:1 1 100%;order:5;min-width:0;
    padding:2px 0 2px 112px !important;border:0 !important;min-height:20px;
    background:transparent !important;text-align:left !important;white-space:normal !important;
    overflow-wrap:anywhere;}
  table.ph-cards > tbody > tr > td::before{content:attr(data-label);position:absolute;left:0;top:5px;
    width:104px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--steel);line-height:1.2;}

  table.ph-cards > tbody > tr > td[data-ph]{display:block;padding:0 !important;min-height:0;}
  table.ph-cards > tbody > tr > td[data-ph]::before{content:none;}
  table.ph-cards > tbody > tr > td[data-ph="check"]{order:0;flex:0 0 auto;}
  table.ph-cards > tbody > tr > td[data-ph="check"] input{width:20px;height:20px;}
  /* flex-basis 60%, not 0: a badge only shares the title's line when both
     fit. A wide badge (two or three pills) drops to its own line instead of
     squeezing a long name into a one-word column - found on Market Activity.
     break-word, not anywhere, so names only split when one word is wider
     than the whole card. */
  table.ph-cards > tbody > tr > td[data-ph="title"]{order:1;flex:1 1 60%;overflow-wrap:break-word;
    font-family:'Barlow Condensed',sans-serif !important;font-size:19px !important;
    font-weight:700 !important;line-height:1.15;}
  table.ph-cards > tbody > tr > td[data-ph="badge"]{order:2;flex:0 0 auto;margin-left:auto;}
  table.ph-cards > tbody > tr > td[data-ph="sub"]{order:3;color:var(--steel);font-size:13.5px;line-height:1.35;}
  table.ph-cards > tbody > tr > td[data-ph="full"]{order:6;}
  table.ph-cards > tbody > tr > td[data-ph="hide"],
  table.ph-cards > tbody > tr > td[data-empty]:not([data-ph="title"]):not([data-ph="check"]){display:none !important;}
}