/* Record tabs: the D18/D22 navy record strip, its "+N" overflow menu and Recently viewed popover, the tab-limit
   toast and the refreshed/changed banner (D16). Markup from records-tabs.js (ProstarRecordsTabs).
   Port of the approved mockup (v2/src/screens.css .rstrip/.rtab/.rrecent, v2/src/records.css .pop/.toast/.banner).
   Values only through var(--ds-*)/var(--rt-*); every selector scoped under .rt. Status glyphs (.rt-st), avatar
   (.rt-av) and buttons (.rt-btn) come from records-base.css. Popover/toast placement: records-app sets
   style.left/top (viewport coordinates) on .rt-pop and style.left on its .rt-caret. */

/* ── D18 strip: same navy as the top bar, 30px, fused; only a 1px inner shadow separates them (D22a) ── */
.rt.rt-strip {
  height: var(--rt-strip-h); flex: none; position: relative; display: flex; align-items: center; gap: 2px;
  padding: 0 var(--ds-gutter) 0 calc(var(--ds-gutter) - var(--ds-s-2));
  background: var(--rt-strip-bg); box-shadow: inset 0 1px 0 var(--rt-tab-line);
  font-family: var(--ds-font); font-feature-settings: var(--ds-features); white-space: nowrap;
}

.rt .rt-tab, .rt .rt-rbtn {
  height: var(--rt-tab-h); position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--ds-s-2);
  border: 0; border-radius: var(--ds-r-md); background: transparent;
  font-family: var(--ds-font); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); font-weight: var(--ds-w-regular);
  color: var(--rt-tab-fg); white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
}
.rt .rt-tab { flex: none; min-width: 0; max-width: calc(var(--ds-s-12) * 6); }
.rt .rt-tab .rt-ico, .rt .rt-rbtn .rt-ico { color: var(--ds-chrome-fg-3); }
.rt .rt-tab-k { flex: none; font-weight: var(--ds-w-medium); color: var(--rt-tab-fg); font-variant-numeric: var(--ds-nums); }
.rt .rt-tab-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-tab-dirty { width: 6px; height: 6px; flex: none; margin-left: 2px; border-radius: var(--ds-r-full); background: var(--rt-dirty); }
.rt .rt-tab .rt-tab-peer {
  width: var(--ds-s-4); height: var(--ds-s-4); margin-left: 2px; letter-spacing: 0; line-height: 1;
  background: var(--ds-chrome-fg-2); color: var(--ds-chrome);
}
.rt .rt-tab-x { display: grid; place-items: center; flex: none; margin-right: -4px; border-radius: var(--ds-r-sm); color: var(--ds-chrome-fg-2); }
.rt .rt-tab .rt-tab-x .rt-ico { color: inherit; }
.rt .rt-tab-x:hover { color: var(--ds-chrome-fg); background: var(--ds-chrome-line); }
.rt .rt-tab:hover, .rt .rt-rbtn:hover { color: var(--ds-chrome-fg-2); background: var(--ds-chrome-field); }

/* the lit tab: the chrome's one active style (raised fill) + a 2px paper bar under the full tab width (D22a) */
.rt .rt-tab.rt-on, .rt .rt-tab.rt-on:hover { background: var(--ds-chrome-raise); color: var(--rt-tab-fg-on); }
.rt .rt-tab.rt-on .rt-tab-k { font-weight: var(--ds-w-semi); color: var(--rt-tab-fg-on); }
.rt .rt-tab.rt-on .rt-ico { color: var(--ds-chrome-fg-2); }
.rt .rt-tab.rt-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  border-radius: var(--ds-r-tag) var(--ds-r-tag) 0 0; background: var(--ds-brand-paper);
}

/* right end: "+N" overflow · separator · Recently viewed */
.rt .rt-strip-end { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--ds-s-2); }
.rt .rt-rbtn .rt-ico:last-child { margin-left: -2px; }
.rt .rt-rbtn .rt-ico:first-child { margin-left: 0; }
.rt .rt-more {
  gap: var(--ds-s-1); min-width: var(--ds-s-8); justify-content: center; font-weight: var(--ds-w-semi); color: var(--ds-chrome-fg-2);
  font-variant-numeric: var(--ds-nums); box-shadow: inset 0 0 0 1px var(--ds-chrome-edge);
}
.rt .rt-sep { width: 1px; height: var(--ds-s-4); flex: none; background: var(--ds-chrome-edge); }
.rt .rt-rbtn.rt-open, .rt .rt-rbtn.rt-open:hover { background: var(--ds-chrome-raise); color: var(--ds-chrome-fg); }
.rt .rt-rbtn.rt-open .rt-ico { color: var(--ds-chrome-fg-2); }
.rt .rt-more.rt-open { box-shadow: inset 0 0 0 1px var(--ds-chrome-fg-2); }

.rt .rt-tab:focus-visible, .rt .rt-rbtn:focus-visible, .rt .rt-tab-x:focus-visible, .rt .rt-pr:focus-visible,
.rt .rt-toast-b:focus-visible, .rt .rt-toast-x:focus-visible, .rt .rt-banner-x:focus-visible {
  outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off);
}

/* ── popovers (Recently viewed, "+N" more open tabs): white floating layer, the only shadow on the page ── */
.rt.rt-pop {
  position: fixed; z-index: 20; top: 0; left: 0; background: var(--ds-surface); border-radius: var(--ds-r-lg); box-shadow: var(--ds-e-pop);
  color: var(--ds-ink); font-family: var(--ds-font); font-feature-settings: var(--ds-features);
  font-size: var(--ds-text-base); line-height: var(--ds-lh-base); white-space: normal; text-align: left;
}
.rt.rt-pop-recent { width: calc(var(--ds-s-12) * 10); }
.rt.rt-pop-more { width: calc(var(--ds-s-8) * 10); padding-bottom: 6px; }
.rt .rt-caret {
  position: absolute; top: -6px; right: var(--ds-s-6); width: var(--ds-s-3); height: var(--ds-s-3);
  background: var(--ds-surface); transform: rotate(45deg); border-top-left-radius: var(--ds-r-tag);
  box-shadow: -1px -1px 0 0 var(--ds-pop-edge);
}

.rt .rt-psearch {
  margin: var(--ds-s-3); height: calc(var(--ds-control-h) + var(--ds-s-1)); display: flex; align-items: center; gap: var(--ds-s-2);
  padding: 0 var(--ds-s-3); border-radius: var(--ds-r-md); box-shadow: inset 0 0 0 1px var(--ds-field); cursor: text;
}
.rt .rt-psearch:focus-within { box-shadow: inset 0 0 0 2px var(--ds-focus); }
.rt .rt-psearch .rt-ico { color: var(--ds-icon); }
.rt .rt-psearch-in {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; appearance: none;
  font-family: var(--ds-font); font-size: var(--ds-text-base); color: var(--ds-ink);
}
.rt .rt-psearch-in::placeholder { color: var(--ds-ink-3); }
.rt .rt-psearch-in::-webkit-search-cancel-button { display: none; }

.rt .rt-plist { max-height: calc(100vh - var(--ds-s-12) * 4); overflow-y: auto; overscroll-behavior: contain; }
.rt .rt-pg {
  display: flex; align-items: center; gap: 6px; padding: var(--ds-s-2) var(--ds-s-4) var(--ds-s-1);
  font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); font-weight: var(--ds-w-semi); color: var(--ds-ink-3); white-space: nowrap;
}
.rt .rt-pg-next { margin-top: var(--ds-s-1); padding-top: var(--ds-s-3); box-shadow: inset 0 1px 0 var(--ds-hair); }
.rt .rt-pg-head { padding-top: var(--ds-s-3); }
.rt .rt-pg-n { font-weight: var(--ds-w-regular); font-variant-numeric: var(--ds-nums); }

.rt .rt-pr {
  display: grid; grid-template-columns: var(--ds-ico) minmax(0, 1fr) auto; column-gap: var(--ds-s-3); align-items: start;
  padding: 7px var(--ds-s-4); color: var(--ds-ink); text-decoration: none; cursor: pointer;
}
.rt .rt-pr:hover { background: var(--ds-paper-hover); }
.rt .rt-pr.rt-hl { background: var(--ds-sel-bg); }
.rt .rt-pr .rt-ico { grid-column: 1; grid-row: 1; margin-top: 2px; color: var(--ds-icon); }
.rt .rt-pr-p { grid-column: 2; grid-row: 1; min-width: 0; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-pr-k { margin-right: 6px; font-weight: var(--ds-w-semi); font-variant-numeric: var(--ds-nums); }
.rt .rt-pr-m { grid-column: 2; grid-row: 2; min-width: 0; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-pr-s { grid-column: 3; grid-row: 1; padding-top: 2px; white-space: nowrap; }
.rt .rt-pr-dirty { display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: 2px; border-radius: var(--ds-r-full); background: var(--rt-dirty); }
.rt .rt-pempty { padding: var(--ds-s-2) var(--ds-s-4) var(--ds-s-4); font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); }

.rt .rt-pf {
  display: flex; align-items: center; gap: var(--ds-s-4); padding: var(--ds-s-3) var(--ds-s-4); box-shadow: inset 0 1px 0 var(--ds-hair);
  font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); white-space: nowrap;
}
.rt .rt-pf > span { display: inline-flex; align-items: center; gap: 6px; }
.rt .rt-kb {
  display: inline-flex; align-items: center; height: var(--ds-tag-h); padding: 0 5px; border-radius: var(--ds-r-sm);
  box-shadow: inset 0 0 0 1px var(--ds-line), 0 1px 0 var(--ds-line); background: var(--ds-surface);
  font-family: var(--ds-font); font-size: var(--ds-text-caps); font-weight: var(--ds-w-medium); color: var(--ds-ink-2);
}

/* ── tab-limit toast: navy floating layer with one outlined action; no auto-hide ── */
.rt.rt-toast {
  position: fixed; z-index: 30; left: 50%; bottom: var(--ds-s-4); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--ds-s-3); height: var(--ds-s-12); padding: 0 var(--ds-s-2) 0 var(--ds-s-4);
  border-radius: var(--ds-r-md); background: var(--ds-chrome); color: var(--ds-chrome-fg);
  box-shadow: var(--ds-e-pop), var(--ds-e-toast);
  font-family: var(--ds-font); font-feature-settings: var(--ds-features); font-size: var(--ds-text-base); line-height: var(--ds-lh-base); white-space: nowrap;
}
.rt.rt-toast > .rt-ico { color: var(--ds-chrome-fg-2); }
.rt .rt-toast-t b { color: var(--ds-chrome-fg); font-weight: var(--ds-w-semi); font-variant-numeric: var(--ds-nums); }
.rt .rt-toast-b {
  height: var(--ds-control-h); display: inline-flex; align-items: center; gap: var(--ds-s-2); padding: 0 var(--ds-s-3);
  border: 0; border-radius: var(--ds-r-sm); background: transparent; box-shadow: inset 0 0 0 1px var(--ds-chrome-edge);
  font-family: var(--ds-font); font-size: var(--ds-text-base); font-weight: var(--ds-w-semi); color: var(--ds-chrome-fg); cursor: pointer;
}
.rt .rt-toast-b .rt-ico { color: var(--ds-chrome-fg-2); }
.rt .rt-toast-b:hover { background: var(--ds-chrome-raise); }
.rt .rt-toast-x {
  width: var(--ds-control-h); height: var(--ds-control-h); display: grid; place-items: center; margin-left: calc(var(--ds-s-2) * -1); padding: 0;
  border: 0; border-radius: var(--ds-r-sm); background: transparent; color: var(--ds-chrome-fg-3); cursor: pointer;
}
.rt .rt-toast-x .rt-ico { color: inherit; }
.rt .rt-toast-x:hover { background: var(--ds-chrome-raise); color: var(--ds-chrome-fg); }

/* ── refreshed / changed banner (D16): neutral tint, the colour lives only in the icon ── */
.rt.rt-banner {
  display: flex; align-items: center; gap: var(--ds-s-3); margin: var(--ds-s-3) var(--ds-gutter) 0;
  padding: 6px var(--ds-s-2) 6px var(--ds-s-4); border-radius: var(--ds-r-md); background: var(--rt-banner-bg);
  font-family: var(--ds-font); font-feature-settings: var(--ds-features);
  font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); white-space: nowrap;
}
.rt.rt-banner > .rt-banner-i { flex: none; color: var(--ds-st-done); }
.rt.rt-banner-warn > .rt-banner-i { color: var(--ds-st-route); }
.rt .rt-banner-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rt .rt-banner-t b { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rt .rt-banner-end { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--ds-s-2); }
.rt .rt-banner-x {
  width: var(--ds-control-h); height: var(--ds-control-h); display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--ds-r-md); background: transparent; color: var(--ds-icon); cursor: pointer;
}
.rt .rt-banner-x .rt-ico { color: inherit; }
.rt .rt-banner-x:hover { background: var(--ds-paper-hover); color: var(--ds-ink-2); }

/* the hidden icon sprite the shell mounts once (ICON_SPRITE) */
.rt.rt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── viewport-sized pages under the strip ──
   The Schedules planner (maintenance-scheduling.css), its quick-add state (quick-add.css) and Materials (app.css)
   are sized as 100dvh minus the 59px top bar. The record strip adds var(--ds-rec-h) under the top bar, so while it
   is mounted those pages take it off too; otherwise the page scrolls and the planner's bottom row is cut off.
   A shown refresh banner (.rt-banner, one line, nowrap) takes its own block height off as well. */
#app:has(.rt-strip) { --rt-under: var(--ds-rec-h); }
/* banner block = its top margin + 6px + 6px padding + the dismiss control (the tallest child) */
#app:has(.rt-chrome > .rt-banner) { --rt-under: calc(var(--ds-rec-h) + var(--ds-s-3) + 12px + var(--ds-control-h)); }
/* Record tabs are desktop-only (decision 2A). Below the planner's 821px breakpoint the strip is hidden: one tab plus
   Recently viewed is wider than a phone and scrolled the whole console sideways (live audit mat-stock-phone). The
   chrome wrapper stays, so the refresh banner and the tab-limit toast still show; the pages under it stop reserving
   the strip's height. */
@media (max-width: 820px) {
  .rt.rt-strip { display: none; }
  #app:has(.rt-strip) { --rt-under: 0px; }
  #app:has(.rt-chrome > .rt-banner) { --rt-under: calc(var(--ds-s-3) + 12px + var(--ds-control-h)); }
}
@media (min-width: 821px) {
  #app:has(.rt-strip) .maintenance-planner {
    height: calc(100dvh - 59px - var(--rt-under)); max-height: calc(100dvh - 59px - var(--rt-under));
  }
}
body.qa-open #app:has(.rt-strip) .maintenance-planner {
  height: calc(100dvh - 59px - var(--rt-under) - var(--qa-sheet)); max-height: calc(100dvh - 59px - var(--rt-under) - var(--qa-sheet));
}
#app:has(.rt-strip) .matview { height: calc(100dvh - 118px - var(--rt-under)); }