/* Home dashboard, after Nelson's reference: navy sidebar, light gray page,
   white cards with a hairline and a very soft shadow, Archivo only.
   The DOR board (?view=dor) keeps its own look in board.css. */

[data-view="home"] .app { display: none; }
[data-view="dor"] .home-app { display: none; }
html[data-view="home"], html[data-view="home"] body { background: #f2f4f7; }

.home-app {
  --h-bg: #f2f4f7;
  --h-card: #ffffff;
  --h-line: #e2e7ee;
  --h-line-2: #edf0f4;
  --h-head: #f5f7fa;
  --h-ink: #14233a;          /* 14.3:1 on the page */
  --h-ink-2: #56657a;        /* 5.4:1 on the page, 5.9:1 on cards */
  --h-icon: #3b5a7e;
  --h-blue: #1d5baa;         /* white text 6.7:1 */
  --h-blue-hover: #174d92;
  --h-green: #1a7336;        /* text 5.9:1 */
  --h-green-dot: #22a04b;    /* marks 3.4:1 */
  --h-red: #c42b2b;          /* text and marks 5.6:1 */
  --h-amber: #9a5b00;        /* text 5.4:1 */
  --h-amber-dot: #d98b00;
  --h-gray: #5f6b7a;         /* text 5.4:1 */
  --h-gray-mark: #7a8696;    /* rings and diamonds 3.7:1 */
  --h-side: #02274c;
  --h-side-active: #0e3a66;
  --h-side-hover: #0a3159;
  --h-side-ink: #ffffff;
  --h-side-ink-2: #c5d3e2;   /* 9.9:1 on the sidebar */
  --h-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06);
  --h-radius: 8px;
  --side-w: 168px;
  --focus: var(--h-blue);

  position: relative;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--h-bg);
  color: var(--h-ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
}
.home-app .i { width: 18px; height: 18px; flex: none; }
.home-app :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- Sidebar ---------- */

 /* The sidebar's navy runs the full page height; its contents stay sticky. */
.home-app::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--side-w); background: var(--h-side); }
.side {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 14px 10px 12px;
  overflow-y: auto;
  background: var(--h-side);
  color: var(--h-side-ink);
}
.side :focus-visible { outline-color: var(--lx-mint-400); }
.side-brand {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 8px 14px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.side-brand-icon { width: 26px !important; height: 26px !important; color: var(--h-side-ink-2); }
/* Plant name beside the icon; the system name runs the full width below. */
.side-brand-text { display: contents; }
.side-brand-sub { grid-column: 1 / -1; color: var(--h-side-ink-2); font-size: 12px; font-weight: 550; line-height: 1.25; }
.side-menu-btn { display: none; }
.side-nav { display: grid; align-content: start; gap: 0; }
.side-list { display: grid; gap: 0; }
.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--h-side-ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.side-link[aria-current="page"] { background: var(--h-side-active); color: var(--h-side-ink); font-weight: 650; }
.side-link--dept { min-height: 44px; font-size: 13.5px; }
/* Function icons draw at 16px inside the same 18px box as the page icons, so every label lines up. */
.side-link--dept .i { width: 16px; height: 16px; margin: 0 1px; }
@media (hover: hover) and (pointer: fine) {
  .side-link:hover { background: var(--h-side-hover); color: var(--h-side-ink); }
}
.side-group { margin: 10px 10px 2px; color: var(--h-side-ink-2); font-size: 12px; font-weight: 650; }
.side-bottom { display: grid; gap: 10px; margin-top: auto; padding-top: 12px; }
/* Mirrors the LinkedXL OS login page: a light panel with "Powered by" and the badge. */
.side-powered {
  --logo-ink: var(--lx-navy-950);
  --logo-navy: var(--lx-navy-800);
  --logo-mint: var(--lx-mint-400);
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 8px 10px;
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--lx-navy-900);
  text-decoration: none;
}
.side-powered-text { font-size: 11.5px; font-weight: 650; }
.side-badge { display: block; width: 74px; height: auto; }
/* Short laptop screens: the full sidebar (pages, tools, functions) fits without
   scrolling. Links stay 44px; only spacing, the subtitle and the badge panel tighten. */
@media (min-width: 1280px) and (max-height: 1000px) {
  .side { padding-top: 10px; }
  .side-brand { padding-bottom: 10px; }
  .side-brand-sub { font-size: 11px; white-space: nowrap; }
  .side-group { margin-top: 6px; }
  .side-bottom { gap: 4px; padding-top: 8px; }
  .side-powered { grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; padding: 6px 8px; }
  .side-powered .side-badge { width: 46px; }
}

/* Shorter still (1366x768, 1280x800): the links keep 44px, and the sidebar fits without
   scrolling. How it works and Settings sit side by side as icons (their names stay for
   screen readers and in the tooltip), so "Powered by LinkedXL OS" keeps one compact row
   under them. The spacing tightens and the plant name gets the room to stay on one line
   beside a smaller icon. */
@media (min-width: 1280px) and (max-height: 820px) {
  .side { padding-top: 6px; padding-bottom: 6px; }
  .side-brand { grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; padding: 2px 4px 6px 8px; }
  .side-brand-icon { width: 22px !important; height: 22px !important; }
  .side-brand-name { font-size: 14px; } /* a longer plant name wraps rather than being cut */
  .side-group { margin: 4px 10px 2px; }
  .side-bottom { grid-template-columns: 44px 44px minmax(0, 1fr); gap: 4px 8px; padding-top: 4px; }
  .side-bottom .side-link { justify-content: center; width: 44px; padding: 0; }
  .side-bottom .side-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-powered { grid-column: 1 / -1; grid-auto-flow: column; justify-content: center; align-items: center; gap: 10px; padding: 4px 8px; }
  .side-powered .side-badge { width: 40px; }
}
/* 768px tall: the sidebar's subtitle repeats the page title beside it, and a rule
   takes the "Functions" label's place (screen readers still hear both). */
@media (min-width: 761px) and (max-height: 790px) {
  .side-brand-sub, .side-group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-group + .side-list { margin-top: 4px; padding-top: 4px; border-top: 1px solid #1c4570; }
}
/* The LinkedXL OS badge in the brand's place, for the icons-only sidebar on a short screen
   (below): hidden everywhere else. */
.side-lx {
  --logo-ink: var(--lx-navy-950);
  --logo-navy: var(--lx-navy-800);
  --logo-mint: var(--lx-mint-400);
  display: none;
  place-items: center;
  padding: 2px 3px;
  border-radius: 6px;
  background: #fbfcfd;
}
.side-lx .side-badge { width: 38px; }

/* Every function removed in Board setup: no empty "Functions" heading or list (sidebar and drawer). */
.side-group:not(:has(+ .side-list > li)), .side-list:not(:has(li)) { display: none; }

/* Functions added in Board setup can make the list longer than the screen (home.js fitSide):
   the "Powered by" panel goes first, then How it works and Settings sit side by side as icons.
   Links keep 44px. The icons-only sidebar (below 1280px) has no room for two in a row. */
.side.is-tight .side-powered { display: none; }
@media (min-width: 1280px) {
  .side.is-tighter .side-bottom { grid-template-columns: repeat(2, 44px); gap: 0 8px; padding-top: 4px; }
  .side.is-tighter .side-bottom .side-link { justify-content: center; width: 44px; padding: 0; }
  .side.is-tighter .side-bottom .side-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Header ---------- */

.h-wrap { min-width: 0; padding: 8px 18px 4px; }
.h-header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "titles date . actions chip";
  align-items: center;
  gap: 10px 16px;
}
.h-titles { grid-area: titles; }
.h-date { grid-area: date; }
.h-actions { grid-area: actions; }
.h-chip { grid-area: chip; }
@media (max-width: 1599px) {
  .h-header {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "titles date . chip" "actions actions actions actions";
  }
  .h-actions { justify-self: end; }
}
.h-titles { min-width: 0; margin-right: 12px; }
.h-title { font-size: 25px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
/* 1600 to 1639 wide the header is one row, and at 25px the title broke after the dot
   ("… plant ·" / "Daily Operating Review"): a step smaller keeps it on one line. */
@media (min-width: 1600px) and (max-width: 1639px) { .h-title { font-size: 22px; } }
/* No functions on the board: the one way back, under the line that says so. */
.h-needs .h-setup-btn { margin-top: 6px; }
.h-sub { color: var(--h-ink-2); font-size: 13.5px; }
/* The one-line answer: count first (ink), then who is off goal, each a link to Detail. */
.h-summary { margin-top: 2px; line-height: 1.35; }
.h-summary strong { color: var(--h-ink); font-weight: 700; }
.h-sum-link { color: var(--h-ink); font-weight: 600; text-decoration: underline; text-decoration-color: #b8c3d1; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .h-sum-link:hover { text-decoration-color: currentColor; } }
/* The board's needs line under the answer: red with the off glyph, or the green all-clear. */
.h-needs { margin-top: 2px; line-height: 1.35; }
.h-needs[hidden] { display: none; }
.h-needs-lead { font-weight: 700; }
.h-needs .mdot { width: 13px; height: 13px; margin-right: 5px; vertical-align: -0.15em; }
.h-date {
  display: flex;
  align-items: center;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  background: var(--h-card);
  box-shadow: var(--h-shadow);
}
.h-date-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--h-ink);
  cursor: pointer;
}
.h-date-btn:first-child { border-right: 1px solid var(--h-line); border-radius: var(--h-radius) 0 0 var(--h-radius); }
.h-date-btn:last-child { border-left: 1px solid var(--h-line); border-radius: 0 var(--h-radius) var(--h-radius) 0; }
.h-date-btn:disabled { color: #b4bfcc; cursor: not-allowed; }
.h-date-pick { position: relative; display: flex; align-self: stretch; }
.h-date-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 196px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .h-date-label:hover { background: #f6f8fb; } }
/* The native picker sits under the button so it opens there; on touch screens it
   covers the button, so a tap opens the phone's own date wheel or calendar. */
.h-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
@media (pointer: coarse) { .h-date-input { pointer-events: auto; opacity: 0.011; } }
/* Only a tap target: no native text ("02/27/2026"), segment highlight, caret or calendar
   glyph shows through behind the button's own date. The invisible calendar indicator
   covers the whole box, so a tap anywhere on it opens the picker. */
.h-date-input { background: transparent; color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent; }
.h-date-input::-webkit-datetime-edit,
.h-date-input::-webkit-datetime-edit-fields-wrapper,
.h-date-input::-webkit-datetime-edit-text,
.h-date-input::-webkit-datetime-edit-month-field,
.h-date-input::-webkit-datetime-edit-day-field,
.h-date-input::-webkit-datetime-edit-year-field { background: transparent; color: transparent; }
.h-date-input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.h-date-label .i { color: var(--h-icon); }
.h-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.hbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--h-line);
  border-radius: 6px;
  background: var(--h-card);
  color: var(--h-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--h-shadow);
  transition: transform 140ms var(--ease-out), background-color 120ms ease, border-color 120ms ease;
}
.hbtn:active { transform: scale(0.97); }
.hbtn--primary { border-color: var(--h-blue); background: var(--h-blue); color: #fff; }
.hbtn .i--chev { width: 16px; height: 16px; margin-left: -2px; }
@media (hover: hover) and (pointer: fine) {
  .hbtn:hover { border-color: #c9d3df; }
  .hbtn--primary:hover { background: var(--h-blue-hover); border-color: var(--h-blue-hover); }
}
.h-filter { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.h-filter .i { color: var(--h-icon); }
.h-select {
  min-width: 156px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--h-line);
  border-radius: 6px;
  background: var(--h-card);
  color: var(--h-ink);
  font: inherit;
  font-weight: 500;
  box-shadow: var(--h-shadow);
}
.h-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px 0 4px;
  border: 0;
  border-radius: 24px;
  background: none;
  color: var(--h-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.chip-initials {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--h-side);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.chip-initials .i { width: 18px; height: 18px; }
.chip-initials--none { background: #e7ecf3; color: var(--h-icon); }
.chip-chev { width: 16px !important; height: 16px !important; color: var(--h-ink-2); }

/* ---------- Main ---------- */

.h-main { outline: none; }
.print-meta { display: none; }
.h-date-note { margin-top: 8px; }

.h-kpis {
  display: grid;
  /* One column per card: Board setup can hide a function, and its cards with it. */
  grid-template-columns: repeat(var(--kpi-n, 8), minmax(0, 1fr));
  /* Each card spans four rows (name, tag, number, status) shared across the row of
     cards, so every big number sits at the same height however its name wraps. */
  grid-template-rows: repeat(4, auto);
  gap: 8px;
  margin-top: 8px;
}
.kcard, .tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 9px 10px 8px;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  background: var(--h-card);
  box-shadow: var(--h-shadow);
}
.kcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 1px; min-height: 0; }
.kcard > .kc-tag, .kcard > .kc-value { align-self: end; }
/* "Goal 89" under the figure: only when the row of cards stacks its goals (below 1600px,
   or .is-stacked), where it replaces "/ 89". */
.kc-under { display: none; }
.kc-head, .tile-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kc-icon .i, .tile-icon .i { width: 22px; height: 22px; }
.kc-icon, .tile-icon, .panel-icon { display: inline-flex; flex: none; } /* icon boxes are the icon's size, not a text line */
.kc-icon { color: var(--h-icon); }
.kc-icon--on { color: var(--h-green); }
.kc-icon--off { color: var(--h-red); }
.tile-icon { color: var(--h-icon); }
/* The name and its "What does it mean?" button share one text flow beside the icon (the button
   follows the last word), so the name has the card's whole width. A long name from Board setup
   wraps inside the card; a word longer than the card breaks rather than being cut off. */
.kc-name { flex: 1 1 auto; min-width: 0; font-size: 12.75px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.kc-label, .tile-label { display: inline; font: inherit; line-height: inherit; }
.kc-head .kc-icon .i, .tile-head .tile-icon .i { width: 22px; height: 22px; }
.kc-head, .tile-head { min-height: 24px; }
.kc-link { color: inherit; text-decoration: none; }
.kc-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--h-radius); }
.kc-link:focus-visible { outline: none; }
.kcard:has(.kc-link:focus-visible), .tile:has(.kc-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.kcard .term-btn, .tile .term-btn { margin-left: 3px; color: var(--h-ink-2); vertical-align: -5px; }
@media (hover: hover) and (pointer: fine) {
  .kcard:hover, .tile:hover { border-color: #c9d3df; }
}
.kc-tag { min-width: 0; color: var(--h-ink-2); font-size: 11.75px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
/* A card's one column is never wider than the card: a long name or tag wraps inside it
   (Board setup allows 80-character KPI names and 60-character function names). */
.kcard { grid-template-columns: minmax(0, 1fr); }
.kcard > * { min-width: 0; }
.kc-value { margin-top: 1px; font-size: 30px; font-weight: 750; line-height: 1.05; white-space: nowrap; }
.kc-value strong { font-weight: 750; }
.kc-of { color: var(--h-ink-2); font-size: 18px; font-weight: 550; white-space: nowrap; }
.kc-value:has(.kc-goal) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
/* Below 1600px (and on paper) the cards are too narrow for "1.19% Goal 1.13%" on one
   line: every card puts its goal on its own line under the figure, the same way.
   Wider, home.js adds .is-stacked when any one card's goal would wrap. */
@media (max-width: 1599px), print {
  .kcard .kc-value:not(.kc-value--empty) { display: grid; justify-items: start; gap: 1px; }
  .kcard .kc-value--of .kc-of { display: none; }
  .kcard .kc-under { display: block; }
}
.h-kpis.is-stacked .kcard .kc-value:not(.kc-value--empty) { display: grid; justify-items: start; gap: 1px; }
.h-kpis.is-stacked .kcard .kc-value--of .kc-of { display: none; }
.h-kpis.is-stacked .kcard .kc-under { display: block; }
.kc-under { color: var(--h-ink-2); font-size: 11.75px; font-weight: 500; }
/* Nothing entered: one honest line in the value's place, never a goal posing as a number. */
.home-app .kc-value.kc-value--empty { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: auto; padding: 4px 0 2px; font-size: 13px; font-weight: 650; white-space: normal; }
.kc-value--empty .kc-goal { font-weight: 500; }
/* The glyph keeps to its words (they wrap beside it); the goal takes its own line, under the words.
   In a row of cards, the line starts where the figures start. */
.kc-value--empty .kc-empty { flex: 1 1 0; min-width: 0; }
.kc-value--empty .kc-goal { flex-basis: 100%; padding-left: 20px; }
.home-app .kcard > .kc-value.kc-value--empty { align-self: start; margin-top: 0; padding-top: 2px; }
.kc-goal { color: var(--h-ink-2); font-size: 11.75px; font-weight: 500; }
.hs-note { margin-left: 4px; color: var(--h-ink-2); font-weight: 500; }
.hs { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 2px; font-size: 12.75px; font-weight: 650; }
.hs--on { color: var(--h-green); }
.hs--off { color: var(--h-red); }
.hs--not-entered, .hs--no-goal, .hs--no-production, .hs--not-tracked { color: var(--h-gray); }
.mdot { width: 14px; height: 14px; flex: none; }
.mdot--on { color: var(--h-green-dot); }
.mdot--off { color: var(--h-red); }
.mdot--not-entered, .mdot--no-goal, .mdot--no-production, .mdot--not-tracked { color: var(--h-gray-mark); }

.h-row { display: grid; gap: 8px; margin-top: 8px; }
.h-row--2 { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); }
.h-row--3 { grid-template-columns: minmax(0, 2.45fr) minmax(0, 1fr); }
.panel {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--h-line);
  border-radius: var(--h-radius);
  background: var(--h-card);
  box-shadow: var(--h-shadow);
}
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-bottom: 8px; }
.panel-icon { color: var(--h-icon); }
.panel-icon .i { width: 22px; height: 22px; }
.panel-title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.panel-sub { color: var(--h-ink-2); font-size: 12.5px; }
.panel-aside { margin-left: auto; color: var(--h-ink-2); font-size: 12.5px; }
/* Narrower panels: the aside starts its own line under the title (past the 22px icon
   and its 10px gap), instead of floating right on a line of its own. */
@media (max-width: 1599px) { .panel-aside { margin-left: 0; width: 100%; padding-left: 32px; } }

/* Department × area matrix */
.mx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: auto; font-size: 12.5px; }
.mx-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mx-scroll { overflow-x: auto; container-type: inline-size; }
/* "Comp." and its screen-reader twin are hidden by default. This rule sits before the
   @container rule below on purpose: same specificity, so the later rule wins in a narrow grid. */
.mx .col-abbr, .mx .col-abbr-sr { display: none; }
/* A narrow grid (1280 with the full sidebar, small phones) shortens Compounding to "Comp."; screen readers still hear the full word. */
@container (max-width: 580px) {
  .mx .col-full { display: none; }
  .mx .col-abbr, .mx .col-abbr-sr { display: inline; }
}
@container (max-width: 340px) {
  .mx th, .mx td { padding-left: 2px !important; padding-right: 2px !important; }
}
.mx { width: 100%; border: 1px solid var(--h-line-2); border-radius: 6px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.mx th, .mx td { padding: 0 8px; border-bottom: 1px solid var(--h-line-2); }
.mx th + th, .mx td, .mx th + td { border-left: 1px solid var(--h-line-2); }
.mx thead th { padding: 5px 8px; background: var(--h-head); font-weight: 650; text-align: center; white-space: nowrap; }
.mx thead th:first-child, .mx thead th.mx-owner { text-align: left; }
.mx thead th.mx-wrap { white-space: normal; line-height: 1.2; } /* "Plant total" / "Month so far" may take two lines in a narrow grid */
.mx tbody tr:last-child > * { border-bottom: 0; }
.mx tbody th { text-align: left; font-weight: 650; }
.mx-link { color: inherit; text-decoration: none; }
/* Board setup allows long names (function 60, owner 80 characters). Each name keeps its own
   width up to about 14ch and wraps past it (a long word breaks anywhere); the workbook's names
   are all shorter, so they stay on one line. When the grid still wouldn't fit its panel,
   home.js adds .mx--fit: the names give way (they may wrap narrower), and the status columns
   keep their own width (width: 1px is the table idiom for "fit the content"), so Plant total
   and Month so far always show without scrolling. */
.mx tbody th, .mx td.mx-owner { padding-top: 3px; padding-bottom: 3px; line-height: 1.25; }
.mx-cap { display: inline-block; width: max-content; max-width: 14ch; overflow-wrap: anywhere; vertical-align: middle; }
.mx--fit .mx-cap { width: auto; }
.mx--fit thead th.mx-st { width: 1px; }
.mcell { text-align: center; }
.mcell-in { display: inline-grid; place-items: center; width: 24px; height: 29px; vertical-align: middle; }
.mx .mdot { width: 15px; height: 15px; }
/* A function added in Board setup has a plant total only: one quiet line across the area columns. */
.mx .mcell--untracked { color: var(--h-ink-2); font-size: 12px; font-style: normal; }
.mcell-none { display: inline-block; line-height: 1.2; }
/* No area numbers that day: one line in place of the four area columns, spanning every row. */
.mx thead th.mx-areas-gap-head { text-align: left; }
/* The areas line's own row (home.js areaGapRow): no height, so the grid looks the same;
   it only puts "See that day" before the function links in reading and Tab order. */
.mx tbody tr.mx-gaprow > td.mx-gaprow-pad { height: 0; padding: 0; border-bottom: 0; }
.mx tbody tr.mx-gaprow { cursor: default; }
.mx .mcell--areas-gap { padding: 8px 14px; text-align: left; vertical-align: middle; background: var(--h-head); cursor: default; }
.mx-gap { max-width: 34ch; color: var(--h-ink-2); font-size: 13px; line-height: 1.45; }
.mx-gap-link { display: inline-flex; align-items: center; min-height: 24px; color: var(--h-blue); font-weight: 600; text-decoration: underline; text-decoration-color: #b8c3d1; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .mx-gap-link:hover { text-decoration-color: currentColor; } }
/* A function with several KPIs is off goal when any of them is: the KPI that missed is named under the dot. */
.mcell-kpi { display: block; margin: -4px auto 3px; max-width: 8em; color: var(--h-red); font-size: 11px; font-weight: 600; line-height: 1.15; }
.mx tbody th, .mx tbody td { height: 29px; }
.mx .is-area { background: #eef4fb; }
.mx tbody tr { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .mx tbody tr:hover > * { background: #f6f8fb; }
  .mx tbody tr:hover > .is-area { background: #e6eef8; }
  .mx tbody tr:hover > .mcell--areas-gap { background: var(--h-head); } /* it spans every row: not part of the first row's hover */
}
.mx-tip {
  position: absolute;
  z-index: 70;
  max-width: 300px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--lx-navy-950);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.35;
  pointer-events: none;
}
.mx-tip[hidden] { display: none; }

/* Trends & key metrics */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { min-height: 0; padding: 8px 10px; box-shadow: none; }
/* "14,736 of 16,980": "of 16,980" wraps under the number when the tile is narrow. */
.tile .kc-value { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-size: clamp(22px, 1.6vw, 28px); }
.buf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; }
.buf-pct { color: var(--h-ink-2); font-size: 12.5px; white-space: nowrap; }
.buf-pct strong { color: var(--h-ink); font-weight: 700; }
.bar { height: 8px; margin-top: 6px; border-radius: 4px; background: #e6ebf1; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--h-gray-mark); }
.bar-fill--on { background: var(--h-green-dot); }
.bar-fill--off { background: var(--h-red); }
/* About 80px of plot, plus the day labels under it. */
.mini { position: relative; height: 112px; margin: 2px 0 0; }
.mini-key { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--h-ink-2); font-size: 11.75px; }
.mk { display: inline-block; width: 14px; height: 0; }
.mk--line { border-top: 2px solid var(--h-icon); }
.mk--goal { margin-left: 6px; border-top: 2px dashed var(--h-ink-2); }
.mini svg { display: block; overflow: visible; }
.mini-grid { stroke: var(--h-line-2); stroke-width: 1; }
.mini-goal { fill: none; stroke: var(--h-ink-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mini-line { fill: none; stroke: var(--h-icon); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mini-pt--on { fill: var(--h-green-dot); stroke: #fff; stroke-width: 2; }
.mini-pt--off circle:first-child { fill: var(--h-red); stroke: #fff; stroke-width: 1.5; }
.mini-pt--off .mini-pt-mark { fill: #fff; }
.mini-pt--no-goal { fill: var(--h-gray-mark); }
.mini-label { fill: var(--h-ink-2); font-family: var(--font-ui); }
.mini-label.is-strong { fill: var(--h-ink); font-weight: 700; }
.mini-value { fill: var(--h-ink); font-family: var(--font-ui); font-weight: 700; }
.mini-empty { color: var(--h-ink-2); font-size: 13px; }

/* Issues and actions */
.iss-scroll { overflow-x: auto; }
.iss { width: 100%; border: 1px solid var(--h-line-2); border-radius: 6px; border-collapse: separate; border-spacing: 0; font-size: 12px; line-height: 1.34; }
.iss th, .iss td { height: 28px; padding: 2px 8px; border-bottom: 1px solid var(--h-line-2); vertical-align: middle; text-align: left; }
.iss thead th { padding: 5px 8px; background: var(--h-head); font-weight: 650; white-space: nowrap; }
.iss tbody tr:last-child > * { border-bottom: 0; }
.iss thead th:nth-child(1) { width: 104px; }
.iss thead th:nth-child(3) { width: 27%; }
.iss thead th:nth-child(4) { width: 104px; }
.iss thead th:nth-child(5) { width: 92px; }
/* A long name from Board setup (up to 60 characters) wraps in its column; it never pushes the table sideways. */
.iss-dept { position: relative; padding-left: 16px !important; font-weight: 650; overflow-wrap: anywhere; }
.iss-dept a { color: inherit; text-decoration: none; }
/* The bar runs the full height of the row, so a department's rows read as one block. */
.iss-bar { position: absolute; top: 0; bottom: 0; left: 5px; width: 4px; background: var(--h-gray-mark); }
.iss-row.is-first .iss-bar { top: 3px; border-radius: 2px 2px 0 0; }
.iss-row:not(:has(+ .iss-row:not(.is-first))) .iss-bar { bottom: 3px; border-radius: 0 0 2px 2px; }
.iss-row.is-first:not(:has(+ .iss-row:not(.is-first))) .iss-bar { border-radius: 2px; }
.iss-link { display: inline-flex; align-items: center; min-height: 24px; }
/* An issue with no status: one quiet "Set status" link (Enter numbers, on the status control). */
.set-status { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 24px; color: var(--h-ink-2); font-size: 11.75px; font-weight: 550; white-space: nowrap; text-decoration: underline; text-decoration-color: #b8c3d1; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .set-status:hover { color: var(--h-blue); text-decoration-color: currentColor; } }
.iss-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.iss-key-item { display: inline-flex; align-items: center; gap: 5px; }
.iss-key-bar { display: inline-block; width: 4px; height: 14px; border-radius: 2px; background: var(--h-gray-mark); }
.iss-bar--on { background: var(--h-green-dot); }
.iss-bar--off { background: var(--h-red); }
.iss .is-empty { color: var(--h-ink-2); }
/* A function with several KPIs names each row's KPI under the function. */
.iss-link--kpi { flex-direction: column; align-items: flex-start; justify-content: center; padding: 2px 0; }
.iss-kpi { display: block; max-width: 11em; color: var(--h-ink-2); font-size: 11.5px; font-weight: 550; line-height: 1.25; white-space: normal; }
/* Open actions from the Action register, when the note has no action of its own. */
.iss-reg { display: grid; gap: 4px; padding: 2px 0; }
.iss-reg-text { display: block; }
.iss-reg-meta { display: block; color: var(--h-ink-2); font-size: 11.5px; }
.iss-over { display: inline-flex; align-items: center; gap: 3px; color: var(--h-red); font-weight: 650; }
.iss-over .mdot { width: 11px; height: 11px; }
/* A register action closed that day or later: "Done:" with the on-track glyph. */
.iss-done { color: var(--h-green); font-weight: 700; white-space: nowrap; }
.iss-done .mdot { width: 11px; height: 11px; margin-right: 4px; vertical-align: -0.1em; }
/* Off goal with no action yet: the board's "Needs an action", word + glyph + red. */
.iss-needs { display: inline-flex; align-items: flex-start; gap: 5px; color: var(--h-red); font-weight: 700; }
.iss-needs .mdot { width: 13px; height: 13px; margin-top: 0.15em; }
.iss-needs-why { font-weight: 550; }
/* The board's Add action after "Needs an action": it opens the Action register on that KPI.
   Drawn 24px tall so the dense row keeps its height; the hit area is 44px. */
.iss-needs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.home-app .iss-add {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--h-blue);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.home-app .iss-add::before { content: ""; position: absolute; inset: -10px -8px; }
.iss-entered { margin-top: 2px; color: var(--h-ink-2); font-size: 11.5px; }
/* Off goal, something recorded, no issue written: a red line under the owner's muted words. */
.iss-gap { display: flex; align-items: flex-start; gap: 5px; margin-top: 2px; color: var(--h-red); font-weight: 700; }
.iss-gap .mdot { width: 13px; height: 13px; margin-top: 0.1em; }
.is-gap > .iss-gap { margin-top: 0; }
.home-app .undo-link { margin-left: 4px; color: var(--h-blue); font-size: 11.5px; }
/* Problem status on the dashboard (the base look is in components.css). */
.home-app .ist-dot { width: 9px; height: 9px; }
.home-app .ist--open { color: var(--h-red); }
.home-app .ist--in-progress { color: var(--h-amber); }
.home-app .ist--in-progress .ist-dot { background: var(--h-amber-dot); }
.home-app .ist--closed { color: var(--h-green); }
.home-app .ist--closed .ist-dot { background: var(--h-green-dot); }
.home-app .ist--unset { color: var(--h-gray); }

/* Daily questions */
.kbi-q { display: grid; }
.kbi-q li + li { border-top: 1px solid var(--h-line-2); }
.kbi-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 2px 4px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .kbi-link:hover { background: #f6f8fb; }
}
.kbi-n { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #e7ecf3; font-size: 13px; font-weight: 700; }
.kbi-question { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3; }
.kbi-question.is-empty { color: var(--h-ink-2); }
/* The function and its status on the right. A long name from Board setup wraps here, within
   45% of the row, so the question beside it keeps its room and the page never scrolls sideways. */
.kbi-meta { display: grid; justify-items: end; flex: 0 1 auto; min-width: 0; max-width: 45%; gap: 1px; text-align: right; }
.kbi-dept { max-width: 100%; color: var(--h-ink-2); font-size: 11.75px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.kbi-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.kbi-st .mdot { width: 12px; height: 12px; }
.kbi-which { max-width: 10em; color: var(--h-red); font-size: 11.5px; font-weight: 600; line-height: 1.2; }

.h-foot { margin-top: 4px; color: var(--h-ink-2); font-size: 11.5px; }

/* Menus: Export, Settings / identity */
.hmenu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--h-line, #e2e7ee);
  border-radius: 8px;
  background: #fff;
  color: #14233a;
  font-family: var(--font-ui);
  font-size: 14px;
  box-shadow: 0 10px 28px -8px rgb(16 24 40 / 0.22);
}
.menu-title { padding: 6px 10px 2px; font-weight: 700; }
.menu-text { padding: 0 10px 8px; color: #56657a; font-size: 13px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}
.menu-item .i { width: 18px; height: 18px; color: #3b5a7e; flex: none; }
.menu-item:hover, .menu-item:focus-visible { background: #f2f5f9; outline: none; }
.menu-item:focus-visible { box-shadow: inset 0 0 0 2px #1d5baa; }

/* Phone drawer */
.drawer {
  --h-side-ink-2: #c5d3e2;
  --h-side-active: #0e3a66;
  --h-side-hover: #0a3159;
  position: fixed;
  inset: 0 auto 0 0;
  width: min(300px, 86vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: #02274c;
  color: #fff;
  font-family: var(--font-ui);
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 240ms var(--ease-drawer), overlay 240ms allow-discrete, display 240ms allow-discrete;
}
.drawer:not([open]) { transform: translateX(-100%); transition-duration: 180ms; }
@starting-style { .drawer[open] { transform: translateX(-100%); } }
.drawer::backdrop { background: rgb(1 20 37 / 0.45); }
.drawer[open] { display: flex; flex-direction: column; }
.drawer .i { width: 18px; height: 18px; flex: none; }
.drawer :focus-visible { outline: 3px solid var(--lx-mint-400); outline-offset: 2px; border-radius: 4px; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px 8px; font-weight: 700; }
/* The menu has room for a long plant name (Board setup allows 60 characters): it wraps
   beside the close button instead of running under it. */
.drawer-head .side-brand-text { display: grid; gap: 2px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.drawer-head .side-brand-sub { grid-column: auto; }
.drawer-head .drawer-close { flex: none; }
.drawer-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer:not([open]) { transform: none; } }

/* Shared overlays keep their structure; on the home they speak Archivo. */
[data-view="home"] .sheet-title,
[data-view="home"] .enter-title {
  font-family: var(--font-ui);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
}
[data-view="home"] .kpi-num { font-family: var(--font-ui); font-size: 2.5rem; font-weight: 750; }
[data-view="home"] .who-fn { font-family: var(--font-ui); font-size: 0.875rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
[data-view="home"] .btn--primary { background: #1d5baa; }

/* ---------- Responsive ---------- */

/* Medium: sidebar collapses to icons */
@media (max-width: 1279px) {
  .home-app { --side-w: 68px; }
  .side { padding: 12px 8px; }
  .side-brand { display: flex; justify-content: center; padding: 4px 0 14px; }
  .side-brand-text { display: block; }
  .side-brand-text, .side-text, .side-group, .side-powered-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-link { justify-content: center; padding: 0; min-height: 44px; }
  .side-link--dept { min-height: 44px; }
  .side-group + .side-list { margin-top: 10px; padding-top: 10px; border-top: 1px solid #1c4570; }
  .side-powered { padding: 6px 4px; }
  .side-badge { width: 44px; }
  .h-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h-row--2, .h-row--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Icons-only sidebar on a short screen (1024x768): 44px links kept and no scrolling. Two
   icons can't sit side by side in 68px, so the "Powered by" panel can't stay at the bottom:
   the LinkedXL OS badge takes the plant glyph's place at the top instead (the page title
   already names the plant). Screen readers hear "Powered by LinkedXL OS" there. */
@media (min-width: 761px) and (max-width: 1279px) and (max-height: 820px) {
  .side { padding-top: 6px; padding-bottom: 6px; }
  .side-brand { padding: 2px 0 4px; }
  .side-brand-icon { display: none; }
  .side-lx { display: grid; }
  .side-group + .side-list { margin-top: 3px; padding-top: 3px; }
  .side-bottom { gap: 0; padding-top: 2px; }
  .side-powered { display: none; }
}

/* Phone: the sidebar becomes a top bar with a menu button and a drawer */
@media (max-width: 760px) {
  /* Focus scrolled into view stays clear of the two sticky bars (heights measured in home.js
     watchBars; home.js also nudges a control that's on screen but under a bar). */
  html[data-view="home"] {
    scroll-padding-top: calc(var(--home-top-h, 56px) + 8px);
    scroll-padding-bottom: calc(var(--home-bar-h, 68px) + 8px);
  }
  /* Top bar, page, Enter numbers bar: a short page (every function hidden) gives its spare
     height to the page, never to the two bars. */
  .home-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .side {
    position: sticky;
    z-index: 30;
    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 6px 8px 6px 14px;
    overflow: visible;
  }
  .home-app::before { display: none; }
  /* A long plant name (Board setup allows 60 characters) ends in an ellipsis, so the menu
     button always stays on screen; the page title under it shows the whole name. */
  .side-brand { flex: 1; min-width: 0; justify-content: flex-start; padding: 0; }
  .side-menu-btn { flex: none; margin-left: auto; }
  .side-brand-text { position: static; width: auto; height: auto; clip: auto; min-width: 0; }
  .side .side-brand-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The shared link opens here: the LinkedXL OS badge (on its light tile) stands in for the
     plant glyph, so the brand is on screen without opening the menu. */
  .side .side-brand-icon { display: none; }
  .side .side-lx { display: grid; flex: none; }
  .side .side-brand-sub { display: none; }
  .side-menu-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; }
  .side .side-nav, .side .side-bottom { display: none; }
  .drawer .side-text, .drawer .side-group, .drawer .side-powered-text { position: static; width: auto; height: auto; clip: auto; }
  .drawer .side-group + .side-list { margin-top: 0; padding-top: 0; border-top: 0; }
  .drawer .side-link { justify-content: flex-start; padding: 0 10px; }
  .drawer .side-badge { width: 74px; }
  .drawer .side-bottom { margin-top: auto; padding-top: 16px; }
  .h-wrap { padding: 12px 14px 16px; }
  .h-title { font-size: 22px; }
  .h-header { gap: 10px; }
  .h-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titles chip" "date date" "actions actions";
  }
  .h-titles { margin-right: 0; }
  .h-chip .chip-name, .h-chip .chip-chev { display: none; }
  .h-date-pick { flex: 1; min-width: 0; }
  .h-date-label { flex: 1; min-width: 0; }
  .h-actions { justify-self: stretch; margin-left: 0; }
  .h-actions > .hbtn--primary { display: none; }
  .h-actions > .hbtn { flex: none; }
  .h-filter { flex: 1; min-width: 0; }
  .h-select { flex: 1; min-width: 0; }
  .h-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kc-value { font-size: 24px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles > .tile--wide { grid-column: 1 / -1; }
  .tile .kc-value { white-space: normal; }
  .panel-aside { margin-left: 0; width: 100%; }
  .mx-legend { margin-left: 0; width: 100%; }
  .mx .mx-owner { display: none; }
  .mx .col-full { display: none; }
  .mx .col-abbr, .mx .col-abbr-sr { display: inline; }
  .mx th, .mx td { padding: 3px 4px; }
  .mx tbody th, .mx tbody td { height: 44px; } /* each row is a 44px target on a phone */
  .mx-link { display: inline-flex; align-items: center; min-height: 44px; }
  .mx thead th { padding: 6px 3px; font-size: 11.5px; white-space: normal; }
  /* Issues become stacked cards */
  .iss, .iss tbody, .iss tr, .iss th, .iss td { display: block; border: 0; }
  .iss { border: 0; }
  .iss thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .iss tbody { display: grid; gap: 8px; }
  .iss tr { position: relative; padding: 10px 12px 10px 18px; border: 1px solid var(--h-line); border-radius: 8px; }
  .iss th, .iss td { padding: 2px 0; }
  .iss-dept { padding-left: 0 !important; position: static; }
  .iss th, .iss td { height: auto; }
  .iss-bar, .iss-row.is-first .iss-bar, .iss-row:not(:has(+ .iss-row:not(.is-first))) .iss-bar { top: 10px; bottom: 10px; left: 7px; border-radius: 2px; }
  /* The whole card is one link to the department; Set status and Undo sit above it. */
  .iss-link { position: static; }
  .iss-link::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
  .iss-link:focus-visible { outline: none; }
  .iss tr:has(.iss-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .set-status, .home-app .undo-link { position: relative; z-index: 1; min-height: 44px; }
  .set-status { min-width: 44px; }
  /* Add action sits above the card's link, a full 44px tall. */
  .home-app .iss-add { min-height: 44px; font-size: 13px; }
  .home-app .iss-add::before { inset: 0 -8px; }
  .mx-gap-link { min-height: 44px; }
  .iss-status.is-blank { display: none !important; }
  .iss-key > span:first-child { width: 100%; }
  .iss td[data-label]::before { content: attr(data-label); display: block; color: var(--h-ink-2); font-size: 11.5px; font-weight: 650; }
  .iss-owner, .iss-status { display: inline-block !important; margin-top: 4px; margin-right: 12px; }
  .iss-action:has(> .is-empty), .iss-action:empty { display: none; }
  .iss-owner::before, .iss-status::before { display: none !important; }
  .h-mobilebar {
    position: sticky;
    bottom: 0;
    z-index: 25;
    display: flex;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--h-side);
  }
  .h-mobilebar .hbtn { flex: 1; justify-content: center; min-height: 48px; box-shadow: none; }
}
@media (min-width: 761px) { .h-mobilebar { display: none; } }

/* ---------- Print or save as PDF ---------- */

@media print {
  @page { size: landscape; margin: 10mm; }
  [data-view="home"], [data-view="home"] body { background: #fff !important; }
  [data-view="home"] .side,
  [data-view="home"] .h-actions,
  [data-view="home"] .h-chip,
  [data-view="home"] .h-date-btn,
  [data-view="home"] .h-mobilebar,
  [data-view="home"] .h-date-note,
  [data-view="home"] .skip-link,
  [data-view="home"] .term-btn,
  [data-view="home"] .undo-link,
  [data-view="home"] .iss-add,
  [data-view="home"] .h-setup-btn,
  [data-view="home"] .toasts,
  [data-view="home"] .hmenu,
  [data-view="home"] .mx-tip,
  [data-view="home"] dialog,
  [data-view="home"] .popover { display: none !important; }
  [data-view="home"] .home-app { display: block; background: #fff; }
  [data-view="home"] .home-app::before { display: none; }
  [data-view="home"] .h-wrap { padding: 0; }
  [data-view="home"] .h-date { border: 0; box-shadow: none; }
  [data-view="home"] .print-meta { display: block; margin: 4px 0 0; color: #56657a; font-size: 12px; }
  [data-view="home"] .h-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  [data-view="home"] .kcard, [data-view="home"] .tile, [data-view="home"] .panel { box-shadow: none; break-inside: avoid; }
  [data-view="home"] .h-row--2 { grid-template-columns: 1.04fr 0.96fr; }
  [data-view="home"] .h-row--3 { grid-template-columns: 1.7fr 1fr; }
  [data-view="home"] .mx-scroll, [data-view="home"] .iss-scroll { overflow: visible; }
  [data-view="home"] a { color: inherit; text-decoration: none; }
  /* Two pages on Letter or A4 landscape, each panel kept whole. Page 1 = numbers, the
     function grid and trends. Page 2 = issues and questions, with the source line. */
  [data-view="home"] .h-row--2, [data-view="home"] .h-row--3 { grid-template-columns: minmax(0, 1fr); }
  [data-view="home"] .h-row--3 { break-before: page; }
  [data-view="home"] .h-foot { break-before: avoid; margin-top: 4px; }
  [data-view="home"] .tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  [data-view="home"] .tiles > .tile:nth-child(2) { grid-column: span 2; }
  [data-view="home"] .tile .kc-value { white-space: normal; font-size: 20px; }
  [data-view="home"] .mini svg { max-width: 100%; height: auto; }
  [data-view="home"] .iss tr { break-inside: avoid; }
  [data-view="home"] .kbi-q { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  [data-view="home"] .kbi-q li + li { border-top: 0; }
  [data-view="home"] .kbi-q li { border-bottom: 1px solid var(--h-line-2); }
  /* Paper isn't tapped: dense rows and a shorter chart keep the day on two pages. */
  [data-view="home"] .mx tbody th, [data-view="home"] .mx tbody td { height: 20px; }
  [data-view="home"] .mcell-in { height: 18px; }
  [data-view="home"] .iss th, [data-view="home"] .iss td { height: auto; padding-top: 1px; padding-bottom: 1px; }
  [data-view="home"] .set-status { display: none; }
  [data-view="home"] .mini { height: 74px; }
  [data-view="home"] .kc-value { font-size: 24px; }
  [data-view="home"] .kbi-link { min-height: 30px; }
  [data-view="home"] .panel { padding: 8px 10px; }
  [data-view="home"] .h-row, [data-view="home"] .h-kpis { margin-top: 6px; gap: 6px; }
  [data-view="home"] .h-date-input { display: none; }
  /* Tighter on paper than on screen, so A4 (the shorter page) also fits the day on two pages. */
  [data-view="home"] .kcard { padding: 6px 8px; }
  [data-view="home"] .h-kpis .kc-value { font-size: 20px; }
  [data-view="home"] .mini { height: 52px; }
  [data-view="home"] .mx tbody th, [data-view="home"] .mx tbody td { height: 18px; }
  [data-view="home"] .mcell-in { height: 16px; }
  [data-view="home"] .panel { padding: 6px 8px; }
  [data-view="home"] .iss th, [data-view="home"] .iss td { font-size: 11px; line-height: 1.25; }
  [data-view="home"] .kbi-link { min-height: 26px; }
  [data-view="home"] .mx tbody th, [data-view="home"] .mx td.mx-owner { padding-top: 1px; padding-bottom: 1px; line-height: 1.15; }
  [data-view="home"] .panel-head { margin-bottom: 4px; }
  [data-view="home"] .kc-head { font-size: 11.5px; line-height: 1.2; }
  [data-view="home"] .kc-head .i { display: none; }
}

/* Sidebar and drawer: a long plant name or function name stops at two lines with an ellipsis.
   The whole name stays for screen readers and shows on hover (title, set in js/shell.js).
   The phone's top bar keeps its one-line plant name (more specific rule above). */
.side-brand-name, .side-link--dept .side-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  min-width: 0; overflow: hidden; overflow-wrap: anywhere;
}
.drawer .side-link--dept .side-text { white-space: normal; }