/* ================================================================================================
   TrendLine's look - chosen by Will, 25 Sep 2026: "the original, most like the current Warranty
   dashboard".

   A navy banner and navy section headings in Trendsetter's own colours - TS navy #1d3363 (dark
   #152548) and TS orange #f5a020 - as on the Warranty dashboard and the inspection forms. Picked on
   the laptop from five candidates (a flat navy band, a muted navy band, a pale blue band, clean
   white, and this one).

   PILLS - the menu and the filters:
       in the navy banner   selected = ORANGE, navy lettering; the rest = light, white lettering
       on the white page    selected = NAVY, ORANGE lettering (Will's rule, 25 Sep); the rest = white
   ORANGE FILLED otherwise means the main thing to do on a page (Inspect, Acknowledge, Save). Only the
   main one: if every button is orange, nothing stands out.

   HOW IT REACHES 26 PAGES WITHOUT REWRITING THEM: each page still carries its own <style>, and
   foundation/_head.html loads this file AFTER it, just before </head>. Every rule here is scoped to
   `html.tl`, which out-ranks the pages' own rules - so where the two disagree, this wins. A page's
   own layout stays in the page until that page is tidied.
   ================================================================================================ */
html.tl {
  --tsh-navy:#1d3363; --tsh-navy-dark:#152548; --tsh-orange:#f5a020;
  --tsh-orange-ink:#b36a00;          /* orange AS TEXT on white: TS orange itself is only ~2:1 */
  --bg:#f1f5f9; --card:#fff; --ink:#111827; --muted:#5b6474; --line:#e2e8f0;
  --accent:#1d3363; --current:#1d3363; --brand:#1d3363;
}
html.tl body { background:#f1f5f9; }

/* ---- the banner: navy, and the TH mark ------------------------------------------------------- */
/* The TH tile is what the dashboards and the inspection forms already carry. Drawn here in CSS:
   there is no logo file anywhere in the library. Navy on orange reads; white on orange does not. */
html.tl header {
  position:relative; padding-left:84px; border-bottom:0; color:#fff;
  background:linear-gradient(135deg,var(--tsh-navy-dark),var(--tsh-navy));
  box-shadow:0 4px 20px rgba(0,0,0,.28);
}
html.tl header::before {
  content:"TH"; position:absolute; left:24px; top:16px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; border-radius:10px;
  background:var(--tsh-orange); color:var(--tsh-navy);
  font:900 18px/1 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; letter-spacing:-.5px;
}
html.tl header h1 { color:#fff; font-weight:900; font-size:22px; letter-spacing:-.02em; }
html.tl header .sub, html.tl header .back, html.tl header nav:not(.nav) a { color:rgba(255,255,255,.7); }
html.tl header strong { color:#fff; }

/* ---- the menu on every page (foundation/_menu.html) ------------------------------------------- */
html.tl .nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px; }
html.tl .nav .grp { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
                    margin-left:10px; }
html.tl .nav .grp:first-child { margin-left:0; }
html.tl .nav a { font-size:12.5px; text-decoration:none; padding:4px 10px; border-radius:99px;
                 border:1px solid transparent; }
/* A phone gets a Menu button instead of the row - the row wrapped to seven lines before the page
   even began. Where you are stays on show beside the button. */
html.tl .trd-menu-phone { display:none; }
@media (max-width:700px) {
  html.tl .trd-menu { display:none; }
  html.tl .trd-menu-phone { display:block; margin:12px 0 0 -58px; }
  html.tl .trd-menu-phone > summary { list-style:none; display:flex; align-items:center;
    justify-content:space-between; gap:10px; cursor:pointer; }
  html.tl .trd-menu-phone > summary::-webkit-details-marker { display:none; }
  html.tl .trd-menu-phone .where { font-size:12.5px; font-weight:700; color:rgba(255,255,255,.85); }
  html.tl .trd-menu-phone .btn { background:var(--tsh-orange); color:var(--tsh-navy); font-weight:800;
    font-size:13.5px; padding:9px 16px; border-radius:99px; white-space:nowrap; }
  html.tl .trd-menu-phone[open] .btn { background:#fff; }
  html.tl .trd-menu-phone .panel { padding:4px 0 4px; }
  html.tl .trd-menu-phone .g { font-size:10.5px; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; color:rgba(255,255,255,.55); margin:12px 0 6px; }
  html.tl .trd-menu-phone .items { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  html.tl .trd-menu-phone .items a { display:flex; align-items:center; min-height:44px; padding:8px 12px;
    border-radius:10px; background:rgba(255,255,255,.12); color:#fff; text-decoration:none;
    font-weight:600; font-size:14.5px; }
  html.tl .trd-menu-phone .items a.on { background:var(--tsh-orange); color:var(--tsh-navy); font-weight:800; }
}
@media print { html.tl .trd-menu, html.tl .trd-menu-phone { display:none; } }

/* ---- pills in the banner: the menu ------------------------------------------------------------ */
html.tl .nav .grp { color:rgba(255,255,255,.55); }
html.tl .nav a { background:rgba(255,255,255,.12); color:#fff; border-color:transparent; font-weight:600; }
html.tl .nav a:hover { background:rgba(255,255,255,.22); }
html.tl .nav a.on { background:var(--tsh-orange); color:var(--tsh-navy); font-weight:700; }

/* ---- pills on the page: the filters ----------------------------------------------------------- */
html.tl .filter a {
  display:inline-block; padding:5px 12px; margin:0 6px 6px 0; border-radius:99px;
  background:#fff; color:var(--ink); border:1px solid var(--line); text-decoration:none; font-size:13px;
}
html.tl .filter a:hover { border-color:#b9c3d6; }
html.tl .filter a.on {
  background:var(--tsh-navy); border-color:var(--tsh-navy); color:var(--tsh-orange); font-weight:700;
}

/* ---- cards: navy headings with an orange rule, as on the dashboards and forms ------------------ */
html.tl main section, html.tl .attention { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
html.tl main section > h2 {
  margin:-16px -18px 14px; padding:10px 18px; background:var(--tsh-navy); color:#fff;
  font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:3px solid var(--tsh-orange);
}
html.tl main section > h2 .dim { color:rgba(255,255,255,.65); }
html.tl .attention { background:#fffbeb; border-left:5px solid var(--tsh-orange); }

/* ---- a table wider than its card scrolls INSIDE the card ---------------------------------------
   The cards clip at their rounded corners (overflow:hidden, above) - which also clipped every table
   wider than its card. On a phone that is most of them, and the right-hand column is where the
   buttons live: Will, 28 Sep 2026, could not pan across to a home's Inspect button. So on a narrow
   screen a table scrolls sideways inside its own card - the rule the visits board and People already
   kept: the TABLE scrolls, never the page. A table already in its own .scroll box is left alone.
   Narrow screens only: as a block a table shrinks to its content instead of filling the card.
   Screen only: a printed page cannot scroll, and the meeting sheet is printed. */
@media screen and (max-width:760px) {
  html.tl main table:not(.scroll > table) {
    display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  /* The same edge for a form field: a picker sizes itself to its longest option and pushed past the
     card (the per-home selections page's "Add one option"). */
  html.tl main :is(select, input, textarea) { max-width:100%; }
}

/* ---- numbers ---------------------------------------------------------------------------------- */
html.tl .tile { background:#fff; border:1px solid var(--line); border-left:5px solid var(--tsh-navy); border-radius:10px; }
html.tl .tile .n { color:var(--tsh-navy); font-size:26px; font-weight:900; }
html.tl .tile .l { font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; }
html.tl .tile.zero { border-left-color:#cbd5e1; }
html.tl .tile.zero .n { color:#b6c0cf; }

/* ---- tables and links ------------------------------------------------------------------------- */
html.tl th { background:#f8fafc; color:var(--tsh-navy); font-weight:800; }
html.tl a.jl, html.tl .job a { border-bottom-color:#b7c3dc; }

/* ---- the main action on a page ---------------------------------------------------------------- */
html.tl button.primary, html.tl button.ib, html.tl button.save {
  background:var(--tsh-orange); border-color:var(--tsh-orange); color:var(--tsh-navy); font-weight:800;
}

@media (max-width:600px) {
  html.tl header { padding-left:72px; }
  html.tl header::before { left:14px; width:40px; height:40px; font-size:16px; }
}