/* scratchSheet.css — Scratch Sheet redesign design tokens (spec §D).
 *
 * P0: TOKENS ONLY. No component styles yet — the card/sheet/picks/gauge/
 * split-chip rules land in later phases. These custom properties are SCOPED
 * to the Scratch app and its body-mounted tray/dialog roots so nothing leaks to
 * the rest of the app. Consume them as var(--ss-…) inside Scratch selectors.
 *
 * <link>-loaded from src/index.html (served from public/css/, cache-busted).
 */

/* Shared filter action language used by Scratch Sheet and Crewbook Explorer.
 * Bulk selection is always All / None, a panel-level restore is Reset, and a
 * whole-surface restore is Reset All. Contextual Clear actions use the same
 * compact outline treatment without changing their more precise label. */
.lt-filter-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #CCD5DF;
  border-radius: 8px;
  background: #fff;
  color: #2F6FB0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
.lt-filter-action:hover:not(:disabled):not(.is-inactive) {
  border-color: #2F6FB0;
  background: #EEF5FC;
  color: #245C93;
}
.lt-filter-action:focus-visible {
  outline: 3px solid color-mix(in srgb, #2F6FB0 22%, transparent);
  outline-offset: 1px;
}
.lt-filter-action:disabled,
.lt-filter-action.is-inactive {
  opacity: .4;
  pointer-events: none;
  cursor: default;
}
.lt-filter-action .material-symbols-outlined { font-size: 16px; }
.lt-filter-action-reset {
  border-color: transparent;
  background: transparent;
}
.lt-filter-reset-all { color: #586470; }

@media (max-width: 768px) {
  .lt-filter-action { min-height: 36px; padding: 7px 12px; font-size: 12px; }
}

:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-surface-modal) {
  /* ── Fonts ─────────────────────────────────────────────────────────── */
  --ss-font-body: 'IBM Plex Sans', 'Open Sans', system-ui, sans-serif;
  --ss-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --ss-font-disp: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;

  /* ── Accent / brand ────────────────────────────────────────────────── */
  --ss-accent: #337ab7;
  --ss-accent-soft: rgba(51, 122, 183, 0.12);
  --ss-accent-hover: #285f90;
  --ss-brand-900: #0B2540;
  --ss-brand-950: #0A1B2E;
  --ss-brand-975: #0B1622;

  /* ── Text ──────────────────────────────────────────────────────────── */
  --ss-text: #1A2230;
  --ss-text-2: #3A4453;
  --ss-text-3: #5B6472;
  --ss-text-4: #6A7383;
  --ss-muted-1: #8A94A3;
  --ss-muted-2: #9AA3AF;
  --ss-muted-3: #B0B8C4;
  --ss-muted-4: #C4CCD6;

  /* ── Surfaces / borders ────────────────────────────────────────────── */
  --ss-page: #EEF1F5;
  --ss-card: #ffffff;
  --ss-fill-1: #F1F4F8;
  --ss-fill-2: #F7F9FB;
  --ss-fill-3: #FAFBFD;
  --ss-border-1: #E4E8EE;
  --ss-border-2: #DCE1E8;
  --ss-border-3: #EFF2F6;

  /* ── Report / release / day / viewing ──────────────────────────────── */
  --ss-report-green: #1B7A3D;
  --ss-release-red: #B3261E;
  --ss-effective-report-green: #14532d;
  --ss-effective-release-red: #7f1d1d;
  --ss-day-reg: #337ab7;
  --ss-day-relief: #178A4E;
  --ss-day-hol: #C79100;
  --ss-view-psgr: #2A6FDB;
  --ss-view-road: #B8791F;
  --ss-view-yard: #6B7280;

  /* ── Quality bands (CANONICAL — spec build decision) ───────────────── */
  --ss-qual-excellent: #388e3c; /* ≥80 */
  --ss-qual-good: #fbc02d;      /* 60–79 */
  --ss-qual-fair: #f57c00;      /* 40–59 */
  --ss-qual-poor: #d32f2f;      /* <40 */

  /* ── Probability bands ─────────────────────────────────────────────── */
  --ss-prob-high: #388e3c;   /* ≥60 */
  --ss-prob-mid: #fbc02d;    /* 40–59 */
  --ss-prob-low: #C64534;    /* <40 */
  --ss-prob-na: #9AA3AF;     /* N/A */

  /* ── Stars / badges / trackwork / rest ─────────────────────────────── */
  --ss-star-filled: #F5B301;
  --ss-star-empty: #D8DEE6;
  --ss-eff-fg: #8A5300;
  --ss-eff-bg: #FCEFD9;
  --ss-ot-fg: #178A4E;
  --ss-ot-bg: #E4F3EA;
  --ss-trackwork-fg: #ffffff;
  --ss-trackwork-bg: #c53030;
  --ss-trackwork-border: #c53030;
  --ss-rest-fg: #9A2B2B;
  --ss-rest-bg: #FBD9D9;
  --ss-rest-bg-soft: #FBEDED;

  /* ── Position / Service tints (chip bg / fg / row) ─────────────────── */
  --ss-pos-co-bg: #DCE7FF;  --ss-pos-co-fg: #234B9E;  --ss-pos-co-row: #F7F9FF; /* CO | Passenger */
  --ss-pos-ac-bg: #FCE7CB;  --ss-pos-ac-fg: #8A5300;  --ss-pos-ac-row: #FFF7EF; /* AC | Yard */
  --ss-pos-tc-bg: #FBD9D9;  --ss-pos-tc-fg: #9A2B2B;  --ss-pos-tc-row: #FFF1F1; /* TC | Road */

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --ss-radius-chip: 6px;
  --ss-radius-card: 14px;
  --ss-radius-sheet: 22px;
  --ss-radius-modal: 16px;
  --ss-radius-pill: 999px;
}

/* -------------------------------------------------------------------------
   Unified normal-DOM grid. Emulator-default, production preview (`?ssGrid=1`),
   with `?ssGrid=0` as the migration rollback.
   ------------------------------------------------------------------------- */
#scratch-sheet-app .ssu-grid-scroll {
  --ssu-grid-zoom: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  overflow: auto;
  background: var(--ss-page, #eef3f7);
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

#scratch-sheet-app .ssu-grid-scroll:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: -2px;
}

#scratch-sheet-app .ssu-grid {
  width: max(100%, var(--ssu-grid-min-width));
  min-height: 0;
  color: #243247;
  font-family: 'Open Sans', sans-serif;
  background: transparent;
}

#scratch-sheet-app .ssu-grid-header,
#scratch-sheet-app .ssu-grid-row {
  display: grid;
  grid-template-columns: var(--ssu-grid-columns);
  width: 100%;
}

#scratch-sheet-app .ssu-grid-header {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: clamp(14px, calc(42px * var(--ssu-grid-zoom)), 53px);
  background: #0b2540;
  color: #fff;
  box-shadow: 0 1px 0 rgba(11, 37, 64, 0.35);
}

#scratch-sheet-app .ssu-grid-row {
  min-height: clamp(9px, calc(42px * var(--ssu-grid-zoom)), 52px);
  background: var(--ssu-row-bg, #fff);
  border: 0;
}

#scratch-sheet-app .ssu-grid-row:hover {
  filter: brightness(0.985);
}

#ss-unified-grid-root .ssu-grid-row-picked {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#ss-unified-grid-root .ssu-grid-row-picked:active,
#ss-unified-grid-root .ssu-grid-row-dragging { cursor: grabbing; }
#ss-unified-grid-root .ssu-grid-row-chosen { box-shadow: 0 4px 14px rgba(11,37,64,.16); }
#ss-unified-grid-root .ssu-grid-row-ghost { opacity: .4; }

#scratch-sheet-app .ssu-grid-row-filtered,
#data-table .ssg-filtered-pick {
  filter: grayscale(.85);
  opacity: .62;
}

#scratch-sheet-app .ssu-grid-cell {
  min-width: 0;
  padding: clamp(1px, calc(6px * var(--ssu-grid-zoom)), 8px)
    clamp(1px, calc(7px * var(--ssu-grid-zoom)), 9px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
}

#scratch-sheet-app .ssu-grid-cell[data-field="specialInstructions"] {
  justify-content: flex-start;
}

#scratch-sheet-app .ssu-grid-cell[tabindex="0"]:focus-visible,
#scratch-sheet-app .ssu-grid-sort:focus-visible,
#scratch-sheet-app .ssu-grid-restore:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid #5aa9e6;
  outline-offset: -3px;
}

#scratch-sheet-app .ssu-grid-head-cell {
  padding: 0;
  font-size: clamp(4px, calc(12px * var(--ssu-grid-zoom)), 15px);
  font-weight: 700;
  text-align: center;
}

#scratch-sheet-app .ssu-grid-sort,
#scratch-sheet-app .ssu-grid-restore {
  position: relative;
  width: 100%;
  min-height: clamp(14px, calc(42px * var(--ssu-grid-zoom)), 53px);
  padding: clamp(1px, calc(4px * var(--ssu-grid-zoom)), 5px)
    clamp(1px, calc(5px * var(--ssu-grid-zoom)), 6px);
  border: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(0px, calc(2px * var(--ssu-grid-zoom)), 3px);
  background: transparent;
  color: inherit;
  font: inherit;
}

#scratch-sheet-app .ssu-grid-sort {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(5px, calc(14px * var(--ssu-grid-zoom)), 18px);
}

#scratch-sheet-app .ssu-grid-restore {
  display: inline-flex;
}

#scratch-sheet-app .ssu-grid-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

#scratch-sheet-app .ssu-grid-sort-icon {
  position: static;
  width: clamp(5px, calc(14px * var(--ssu-grid-zoom)), 18px);
  overflow: hidden;
  font-size: clamp(5px, calc(14px * var(--ssu-grid-zoom)), 18px);
  line-height: 1;
  transform: none;
  opacity: 0;
}

#scratch-sheet-app .ssu-grid-sort.is-active .ssu-grid-sort-icon {
  opacity: 1;
}

#scratch-sheet-app .ssu-grid-sort:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

#scratch-sheet-app .ssu-grid-sort:disabled .ssu-grid-sort-icon {
  opacity: 1;
}

#scratch-sheet-app .ssu-grid-restore .material-symbols-outlined {
  color: #13a35c;
  font-size: clamp(6px, calc(24px * var(--ssu-grid-zoom)), 30px);
}

#scratch-sheet-app .ssu-grid-restore-icon {
  position: relative;
  width: clamp(6px, calc(24px * var(--ssu-grid-zoom)), 30px);
  height: clamp(6px, calc(24px * var(--ssu-grid-zoom)), 30px);
  display: inline-grid;
  place-items: center;
}

#scratch-sheet-app .ssu-grid-restore-count {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(45%, -35%);
  min-width: clamp(5px, calc(14px * var(--ssu-grid-zoom)), 18px);
  height: clamp(5px, calc(14px * var(--ssu-grid-zoom)), 18px);
  padding: 0 clamp(1px, calc(3px * var(--ssu-grid-zoom)), 4px);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dc3545;
  color: #fff;
  font-size: clamp(3px, calc(9px * var(--ssu-grid-zoom)), 11px);
  line-height: 1;
}

#scratch-sheet-app .ssu-grid-restore-count[hidden] { display: none; }

#scratch-sheet-app .ssu-grid-separator {
  position: relative;
  z-index: 1;
  border-top: 2px solid #8da4ba;
  border-bottom: 1px solid #cbd6e0;
  background: #e8eef4;
  color: #536579;
  font-size: clamp(3px, calc(11px * var(--ssu-grid-zoom)), 14px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#scratch-sheet-app .ssu-grid-separator-content {
  min-height: clamp(8px, calc(28px * var(--ssu-grid-zoom)), 35px);
  padding: clamp(1px, calc(5px * var(--ssu-grid-zoom)), 7px)
    clamp(3px, calc(12px * var(--ssu-grid-zoom)), 15px);
  display: flex;
  align-items: center;
  gap: clamp(1px, calc(4px * var(--ssu-grid-zoom)), 5px);
  box-sizing: border-box;
}

#scratch-sheet-app .ssu-grid-separator-count {
  padding: clamp(1px, calc(3px * var(--ssu-grid-zoom)), 4px)
    clamp(2px, calc(9px * var(--ssu-grid-zoom)), 11px);
  border-radius: 999px;
  background: var(--ss-accent);
  color: #fff;
  white-space: nowrap;
}

#scratch-sheet-app .ssu-grid-separator-line {
  height: 1px;
  flex: 1 1 auto;
  background: var(--ss-border-2);
}

#scratch-sheet-app .ssu-grid-separator-remaining {
  color: var(--ss-muted-1);
  white-space: nowrap;
}

#scratch-sheet-app .ssu-grid-empty {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #6c7888;
}

#scratch-sheet-app .ssu-grid-cell .ssg-hide-btn {
  width: clamp(8px, calc(32px * var(--ssu-grid-zoom)), 36px);
  height: clamp(8px, calc(32px * var(--ssu-grid-zoom)), 36px);
}

#scratch-sheet-app .ssu-grid-cell .ssg-hide-icon {
  color: #c0455b;
  font-size: clamp(8px, calc(30px * var(--ssu-grid-zoom)), 32px);
  line-height: 1;
}

/* Pinch changes actual grid geometry—not a painted transform—so scrollWidth,
 * scrollHeight, hit targets, and the sticky header always describe the same
 * layout. Header typography stays screen-readable while row content becomes
 * denser. */
#scratch-sheet-app #ss-unified-grid-root .ssg-pick-cell {
  min-height: clamp(8px, calc(32px * var(--ssu-grid-zoom)), 38px);
}
#scratch-sheet-app #ss-unified-grid-root .ssg-pick {
  width: clamp(8px, calc(30px * var(--ssu-grid-zoom)), 36px);
  height: clamp(8px, calc(30px * var(--ssu-grid-zoom)), 36px);
  min-width: clamp(8px, calc(30px * var(--ssu-grid-zoom)), 36px);
  flex: 0 0 clamp(8px, calc(30px * var(--ssu-grid-zoom)), 36px);
  aspect-ratio: 1;
  box-sizing: border-box;
  font-size: clamp(3px, calc(13px * var(--ssu-grid-zoom)), 15px);
}
#scratch-sheet-app #ss-unified-grid-root .ssg-pick-off .ssg-pick-plus {
  font-size: clamp(5px, calc(19px * var(--ssu-grid-zoom)), 22px);
}
#scratch-sheet-app #ss-unified-grid-root .ssg-hide-btn .hide-icon {
  font-size: clamp(22px, calc(30px * var(--ssu-grid-zoom)), 32px) !important;
}
#scratch-sheet-app #ss-unified-grid-root .ssg-job-chip {
  box-sizing: border-box;
  min-width: clamp(10px, calc(40px * var(--ssu-grid-zoom)), 48px);
  padding: clamp(0px, calc(3px * var(--ssu-grid-zoom)), 4px)
    clamp(0px, calc(8px * var(--ssu-grid-zoom)), 10px);
  font-size: clamp(3px, calc(15px * var(--ssu-grid-zoom)), 17px);
}
#scratch-sheet-app #ss-unified-grid-root .ssg-pos-chip {
  padding: clamp(0px, calc(2px * var(--ssu-grid-zoom)), 3px)
    clamp(0px, calc(6px * var(--ssu-grid-zoom)), 8px);
  font-size: clamp(3px, calc(12px * var(--ssu-grid-zoom)), 14px);
}
#scratch-sheet-app #ss-unified-grid-root .ssg-star {
  font-size: clamp(3px, calc(14px * var(--ssu-grid-zoom)), 16px);
}
#scratch-sheet-app #ss-unified-grid-root .ssg-time,
#scratch-sheet-app #ss-unified-grid-root .ssg-band,
#scratch-sheet-app #ss-unified-grid-root .ssg-earnings,
#scratch-sheet-app #ss-unified-grid-root .ssg-special {
  font-size: clamp(3px, calc(14px * var(--ssu-grid-zoom)), 16px);
}

@media (max-width: 768px) {
  #scratch-sheet-app #table-wrapper.ssu-grid-active {
    height: max(220px, calc(100vh - var(--ss-fixed-header-height, 0px) - var(--ss-mobile-sticky-height, 0px) - var(--lt-bottom-nav-height, 0px)));
    height: max(220px, calc(100dvh - var(--ss-fixed-header-height, 0px) - var(--ss-mobile-sticky-height, 0px) - var(--lt-bottom-nav-height, 0px)));
    min-height: 0;
    overflow: hidden;
  }

  #scratch-sheet-app .ssu-grid-header {
    min-height: clamp(12px, calc(36px * var(--ssu-grid-zoom)), 45px);
  }

  #scratch-sheet-app .ssu-grid-sort,
  #scratch-sheet-app .ssu-grid-restore {
    min-height: clamp(12px, calc(36px * var(--ssu-grid-zoom)), 45px);
  }

  #scratch-sheet-app .ssu-grid-row {
    min-height: clamp(9px, calc(38px * var(--ssu-grid-zoom)), 44px);
  }

  #scratch-sheet-app .ssu-grid-cell {
    font-size: clamp(3px, calc(12px * var(--ssu-grid-zoom)), 13px);
  }

  #scratch-sheet-app .ssu-grid-sort {
    padding: clamp(1px, calc(3px * var(--ssu-grid-zoom)), 4px)
      clamp(0px, calc(2px * var(--ssu-grid-zoom)), 3px);
    font-size: clamp(3.5px, calc(10.5px * var(--ssu-grid-zoom)), 13px);
    line-height: 1.05;
  }

  #scratch-sheet-app .ssu-grid-label {
    overflow: hidden;
    white-space: normal;
  }
}

/* ==========================================================================
 * P1 — Mobile CardsView (spec §B, card variant A). Scoped under
 * #scratch-sheet-app so nothing leaks to the rest of the app.
 * ======================================================================== */

/* The Scratch Sheet header is fixed, so this screen—not the global <body>—owns
 * the normal-flow space beneath it. setBodyPadding.js keeps this value synced
 * to the complete fixed header (trial banner + navbar + desktop info/alerts). */
#scratch-sheet-app {
  padding-top: var(--ss-fixed-header-height, 0px);
}

#scratch-sheet-app #ssg-desktop-sticky-stack {
  display: none;
}

#scratch-sheet-app .ss-cards-root {
  font-family: var(--ss-font-body);
  background: var(--ss-page);
  padding: 0 12px 24px;
}

#scratch-sheet-app .mono {
  font-family: var(--ss-font-mono);
  font-variant-numeric: tabular-nums;
}
#scratch-sheet-app .disp {
  font-family: var(--ss-font-disp);
}

/* ── Mobile sticky chrome owner ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Mobile no longer uses the legacy collapsible info bar. The same controls
   * are exposed through the Filters/Columns mobile surfaces below. */
  #scratch-sheet-app #info-bar-main {
    display: none !important;
  }

  #scratch-sheet-app .ss-mobile-sticky-stack {
    position: sticky;
    top: var(--ss-fixed-header-height, 0px);
    z-index: 1025;
    background: var(--ss-page);
    border-bottom: 1px solid var(--ss-border-1);
    box-shadow: 0 2px 8px rgba(11, 37, 64, 0.08);
    padding: 0 0 8px;
  }

  /* The fixed navbar's painted edge can land a few device pixels below its
   * rounded DOMRect height on high-DPI mobile screens. Bleed the sticky
   * surface upward so that rounding seam stays opaque without changing the
   * measured layout or the requested gap above the Picks card. */
  #scratch-sheet-app .ss-mobile-sticky-stack::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 8px;
    background: var(--ss-page);
    pointer-events: none;
  }

  /* The Table header is a second sticky layer directly beneath the complete
   * mobile chrome stack. Tabulator normally clips its header inside the grid;
   * allow the root to participate in page scrolling while its tableholder
   * continues to own horizontal scrolling. */
  #scratch-sheet-app #data-table.tabulator {
    overflow: visible;
  }
  #scratch-sheet-app #data-table.tabulator .tabulator-header {
    position: sticky;
    top: calc(var(--ss-fixed-header-height, 0px) + var(--ss-mobile-sticky-height, 0px));
    z-index: 1024;
    box-shadow: 0 2px 5px rgba(11, 37, 64, 0.10);
  }

  /* Spacing above Picks belongs to the opaque sticky stack, not a child margin,
   * so page content cannot show through it while scrolling. */
  #scratch-sheet-app .ss-mobile-stack-picks .ss-picks-bar {
    margin-top: 0;
  }

  #scratch-sheet-app .ss-mobile-stack-slot:empty {
    display: none;
  }

  /* Picks owns this separator instead of the stack itself: when Relief Day
   * Count exists the gap sits between the two rows; when it is absent the
   * empty slot disappears and the same gap remains between the nav and Picks. */
  #scratch-sheet-app .ss-mobile-stack-picks {
    padding: 8px 12px 0;
  }

  #scratch-sheet-app .ss-mobile-stack-sort {
    padding: 0 12px;
  }

  #scratch-sheet-app .ss-mobile-sticky-stack[data-mode="cards"] .ss-mobile-stack-preset,
  #scratch-sheet-app .ss-mobile-sticky-stack[data-mode="tabulator"] .ss-mobile-stack-sort {
    display: none;
  }

  #scratch-sheet-app .ss-mobile-stack-preset #mobile-preset-bar {
    margin-top: 8px;
  }

  #scratch-sheet-app .ss-mobile-stack-dayCount #day-count-area:empty {
    display: none;
  }
}

/* ── Card/table segmented toggle (controls row) ─────────────────────────── */
#scratch-sheet-app .ss-view-toggle {
  display: flex;
  justify-content: center;
  margin: 10px 12px 0;
}
#scratch-sheet-app .ss-controls-row > .ss-view-toggle {
  flex: 0 0 80px;
  margin: 0;
}
#scratch-sheet-app .ss-seg {
  display: inline-flex;
  height: 34px;
  border: 1px solid var(--ss-border-2);
  border-radius: 9px;
  overflow: hidden;
  background: var(--ss-card);
}
#scratch-sheet-app .ss-controls-row > .ss-view-toggle .ss-seg {
  width: 100%;
  height: 32px;
}
#scratch-sheet-app .ss-seg-btn {
  border: 0;
  background: transparent;
  font-family: var(--ss-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-text-3);
  padding: 0 16px;
  cursor: pointer;
}
#scratch-sheet-app .ss-controls-row > .ss-view-toggle .ss-seg-btn {
  flex: 1 1 0;
  padding: 0;
}
#scratch-sheet-app .ss-seg-btn .material-symbols-outlined {
  font-size: 21px;
  line-height: 1;
  vertical-align: middle;
}
#scratch-sheet-app .ss-seg-btn.ss-seg-active {
  background: var(--ss-brand-900);
  color: #fff;
}

/* ── Mobile Card-view sort tray ─────────────────────────────────────────── */
.ss-sort-sheet {
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 8px 16px 0;
  max-height: min(85dvh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ss-text);
  font-family: var(--ss-font-body);
}
.ss-sort-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  gap: 8px;
  padding: 2px 1px 14px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.ss-sort-option {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--ss-border-2);
  border-radius: 13px;
  background: var(--ss-fill-1);
  color: var(--ss-text-2);
  font-family: var(--ss-font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ss-sort-option:active:not(:disabled) { transform: scale(.98); }
.ss-sort-option-active {
  border-color: var(--ss-accent);
  background: var(--ss-accent-soft);
  box-shadow: inset 0 0 0 1px var(--ss-accent);
  color: var(--ss-brand-900);
}
.ss-sort-option-copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ss-sort-option-label { overflow: hidden; font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ss-sort-option-state { margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--ss-accent); }
.ss-sort-option .material-symbols-outlined { flex: 0 0 auto; font-size: 21px; }
.ss-sort-option-direction { color: var(--ss-accent); }
.ss-sort-option-next { color: var(--ss-muted-3); }
.ss-sort-option-lock { color: var(--ss-muted-1); }
.ss-sort-option-disabled { opacity: .48; cursor: not-allowed; }
.ss-sort-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0 -16px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ss-border-1);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 20px rgba(22, 39, 58, .06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ss-sort-apply {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  background: var(--ss-accent);
  color: #fff;
  font-family: var(--ss-font-body);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(35, 116, 171, .24);
}
.ss-sort-apply:active { transform: translateY(1px); }
.ss-sort-apply:focus-visible { outline: 2px solid var(--ss-brand-900); outline-offset: 2px; }
.ss-sort-apply .material-symbols-outlined { font-size: 20px; }

/* ── Card shell (stripe · body; swipe gestures replace the old action rail) ─ */
#scratch-sheet-app .ss-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#scratch-sheet-app .ss-cards-separator {
  min-height: 34px;
  margin: 1px -12px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  border-top: 2px solid #8da4ba;
  border-bottom: 1px solid #cbd6e0;
  background: #e8eef4;
  color: #536579;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#scratch-sheet-app .ss-cards-separator-count {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ss-accent);
  color: #fff;
  white-space: nowrap;
}
#scratch-sheet-app .ss-cards-separator-line {
  height: 1px;
  flex: 1 1 auto;
  background: var(--ss-border-2);
}
#scratch-sheet-app .ss-cards-separator-remaining {
  color: var(--ss-muted-1);
  white-space: nowrap;
}
/* ── Gesture wrapper + drag-reveal underlays ────────────────────────────── */
#scratch-sheet-app .ss-gcard {
  position: relative;
  border-radius: var(--ss-radius-card);
}
#scratch-sheet-app .ss-gunder {
  position: absolute;
  inset: 0;
  border-radius: var(--ss-radius-card);
  opacity: 0;
  display: flex;
  align-items: center;
  color: #fff;
  pointer-events: none;
}
#scratch-sheet-app .ss-gunder-pick {
  justify-content: flex-start;
  padding-left: 18px;
  background: #337AB7;
}
#scratch-sheet-app .ss-gunder-pick-picked {
  background: #C79100;
}
#scratch-sheet-app .ss-gunder-hide {
  justify-content: flex-end;
  padding-right: 18px;
  background: #C0455B;
}
#scratch-sheet-app .ss-gunder-hide-picked {
  background: #8A94A3;
}
#scratch-sheet-app .ss-gunder-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
#scratch-sheet-app .ss-gunder-glyph {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
#scratch-sheet-app .ss-gunder-pick-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px dashed currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
#scratch-sheet-app .ss-gunder-icon {
  font-size: 18px;
  line-height: 1;
}
#scratch-sheet-app .ss-gunder-word {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* One-time swipe demonstration. It moves the real top available card across
 * its existing underlays without committing either action. */
#scratch-sheet-app .ss-gcard.ss-gesture-demo {
  z-index: 5;
}
#scratch-sheet-app .ss-gcard.ss-gesture-demo .ss-card {
  animation: ss-gesture-demo-card 5.2s ease-in-out both;
  will-change: transform;
}
#scratch-sheet-app .ss-gcard.ss-gesture-demo .ss-gunder-pick {
  animation: ss-gesture-demo-pick 5.2s ease-in-out both;
}
#scratch-sheet-app .ss-gcard.ss-gesture-demo .ss-gunder-hide {
  animation: ss-gesture-demo-hide 5.2s ease-in-out both;
}
@keyframes ss-gesture-demo-card {
  0%, 7%, 34%, 43%, 70%, 100% { transform: translateX(0); }
  16%, 25% { transform: translateX(64px); }
  52%, 61% { transform: translateX(-64px); }
}
@keyframes ss-gesture-demo-pick {
  0%, 7%, 34%, 100% { opacity: 0; }
  16%, 25% { opacity: .9; }
}
@keyframes ss-gesture-demo-hide {
  0%, 43%, 70%, 100% { opacity: 0; }
  52%, 61% { opacity: .9; }
}

#scratch-sheet-app .ss-card {
  position: relative;
  display: flex;
  border: 1px solid var(--ss-border-1);
  border-radius: var(--ss-radius-card);
  overflow: hidden;
  background: var(--ss-card);
  touch-action: pan-y;
}
#scratch-sheet-app .ss-card.ss-gsnap {
  transition: transform .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  #scratch-sheet-app .ss-card.ss-gsnap {
    transition: none;
  }
}
#scratch-sheet-app .ss-card-filtered {
  filter: grayscale(.85);
  opacity: .68;
}
#scratch-sheet-app .ss-stripe {
  position: relative;
  overflow: hidden;
  width: 5px;
  flex: 0 0 5px;
}
#scratch-sheet-app .ss-stripe .ss-eff-band { height: 27%; }
#scratch-sheet-app .ss-stripe .ss-eff-band-top {
  clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
}
#scratch-sheet-app .ss-stripe .ss-eff-band-bot {
  clip-path: polygon(0 100%, 100% 100%, 100% 32%, 50% 0, 0 32%);
}
#scratch-sheet-app .ss-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 30px 8px 22px;
  background: var(--ss-card-surface, var(--ss-card));
}

/* ── Persistent swipe-pull affordances (edge tabs) ──────────────────────── */
#scratch-sheet-app .ss-pull {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
#scratch-sheet-app .ss-pull-left {
  left: 6px;
  border-radius: 0 9px 9px 0;
  background: rgba(51, 122, 183, .14);
  color: #2A6398;
}
#scratch-sheet-app .ss-pull-left-picked {
  background: rgba(199, 145, 0, .18);
  color: #8A6400;
}
#scratch-sheet-app .ss-pull-right {
  right: 0;
  border-radius: 9px 0 0 9px;
  background: rgba(192, 69, 91, .12);
  color: #B23B50;
}
#scratch-sheet-app .ss-pull-eye {
  font-size: 11px;
  line-height: 1;
}
#scratch-sheet-app .ss-pull-swipe {
  font-size: 15px;
  line-height: 1;
}
#scratch-sheet-app .ss-pull-pick-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1.5px dashed currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
#scratch-sheet-app .ss-pull-pick-circle .ss-pull-glyph {
  font-size: 14px;
  line-height: 1;
}

/* ── Corner rank ("1B" treatment) — picked cards only ───────────────────── */
#scratch-sheet-app .ss-rank-corner {
  position: absolute;
  top: -13px;
  right: -13px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ss-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 0 0;
  font-family: var(--ss-font-disp);
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(11, 37, 64, .25);
  pointer-events: none;
}

/* ── Header line ────────────────────────────────────────────────────────── */
#scratch-sheet-app .ss-card-header {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
#scratch-sheet-app .ss-id-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
#scratch-sheet-app .ss-chips {
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Stars sit as a second chips row directly under the fused badge. */
#scratch-sheet-app .ss-chips-stars {
  min-height: 13px;
}
/* Five-character identifiers such as PROT2 already need the compact identity
 * treatment. On genuinely narrow phones, keep the identity rigid and let the
 * metrics cluster wrap as one unit instead of allowing the fused badge to
 * overflow into it. Wider cards remain a single row. */
@media (max-width: 420px) {
  #scratch-sheet-app .ss-card-header-long-job {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  #scratch-sheet-app .ss-card-header-long-job > .ss-id-col,
  #scratch-sheet-app .ss-card-header-long-job > .ss-metrics {
    flex: 0 0 auto;
  }
  #scratch-sheet-app .ss-card-header-long-job > .ss-metrics {
    max-width: 100%;
    margin-left: auto;
  }
}
#scratch-sheet-app .ss-lock {
  font-size: 11px;
  line-height: 1;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal, .ssg-detail-modal) .ss-subscriber-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #60758A;
  font-size: 14px;
  line-height: 1;
  vertical-align: -0.12em;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal, .ssg-detail-modal) .ss-smartpick-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid #D8E2EA;
  border-radius: 8px;
  background: #F4F7F9;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal, .ssg-detail-modal) .ss-smartpick-locked-stars {
  display: inline-flex;
  align-items: center;
  opacity: .52;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal, .ssg-detail-modal) .ss-smartpick-locked > .ss-subscriber-lock-icon {
  margin-left: 1px;
  padding-left: 4px;
  border-left: 1px solid #D8E2EA;
}
#scratch-sheet-app .ss-stars {
  line-height: 1;
  letter-spacing: 1px;
}
#scratch-sheet-app .ss-star {
  font-size: 13px;
}
#scratch-sheet-app .ss-star-on { color: var(--ss-star-filled); }
#scratch-sheet-app .ss-star-off { color: var(--ss-star-empty); }

/* SmartPick + compact shift summary row */
#scratch-sheet-app .ss-card-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 22px;
  margin-top: 4px;
}
#scratch-sheet-app .ss-card-status-row .ss-shift-box {
  margin-left: auto;
}
#scratch-sheet-app .ss-shift-box {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 2px 6px;
  border: 1px solid var(--ss-border-1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  white-space: nowrap;
}
#scratch-sheet-app .ss-shift-length-locked {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
#scratch-sheet-app .ss-shift-clock {
  color: var(--ss-text-4);
  font-size: 12px;
  line-height: 1;
}
#scratch-sheet-app .ss-shift-divider {
  align-self: stretch;
  width: 1px;
  background: var(--ss-border-2);
}
#scratch-sheet-app .ss-shift-len {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ss-text-3);
}
#scratch-sheet-app .ss-shift-lock {
  color: var(--ss-text-3);
  font-size: 13px;
}
#scratch-sheet-app .ss-ot-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 700;
  padding: 1px 5px;
  line-height: 1.2;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-ot-bg);
  color: var(--ss-ot-fg);
  white-space: nowrap;
}
#scratch-sheet-app .ss-ot-pill-zero {
  background: var(--ss-fill-1);
  color: var(--ss-text-4);
}
#scratch-sheet-app .ss-ot-meal-icon {
  font-size: 11px;
  line-height: 1;
}
#scratch-sheet-app .ss-ot-pill-locked {
  color: var(--ss-ot-fg);
  background: var(--ss-ot-bg);
  border: 1px solid rgba(23, 138, 78, .22);
}
#scratch-sheet-app .ss-ot-lock {
  font-size: 11px;
}
#scratch-sheet-app .ss-ot-pill-locked .ss-subscriber-lock-icon {
  color: var(--ss-ot-fg);
}

/* Metrics cluster (right): gauges + earnings */
#scratch-sheet-app .ss-metrics {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: stretch;
  gap: 4px;
  margin-left: auto;
}
#scratch-sheet-app .ss-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#scratch-sheet-app .ss-gauge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#scratch-sheet-app .ss-gauge-inner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ss-text);
}
#scratch-sheet-app .ss-gauge-inner .ss-subscriber-lock-icon {
  color: var(--ss-text);
  font-size: 14px;
}
#scratch-sheet-app .ss-gauge-label { color: var(--ss-text-4); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-pay-box {
  display: grid;
  gap: 2px;
  min-width: 82px;
  padding: 4px 6px;
  border: 1px solid var(--ss-border-1, #D8E2EA);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}
#scratch-sheet-app .ss-pay-box-card .ss-pay-value-primary {
  width: 100%;
  justify-content: flex-end;
  color: var(--ss-brand-900);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
}
#scratch-sheet-app .ss-pay-box-card {
  align-content: center;
  min-height: 44px;
  box-sizing: border-box;
}
#scratch-sheet-app .ss-pay-box-card-locked .ss-pay-row {
  min-height: 26px;
}
#scratch-sheet-app .ss-pay-box-card-locked .ss-pay-value-primary {
  width: auto;
  margin-left: auto;
}
#scratch-sheet-app .ss-pay-box-card .ss-pay-value .ss-subscriber-lock-icon {
  color: var(--ss-brand-900);
  font-size: 12px;
}
#scratch-sheet-app .ss-pay-box-card .ss-pay-value-primary .ss-subscriber-lock-icon {
  font-size: 15px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
}
:is(.ss-overlay-scrim, .ssg-detail-modal) button.ss-pay-row-locked {
  width: 100%;
  padding: 1px 2px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
:is(.ss-overlay-scrim, .ssg-detail-modal) button.ss-pay-row-locked:hover {
  background: var(--ss-accent-soft, #eaf2fa);
}
:is(.ss-overlay-scrim, .ssg-detail-modal) button.ss-pay-row-locked:focus-visible {
  outline: 2px solid var(--ss-accent, #337ab7);
  outline-offset: 1px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-pay-label {
  color: var(--ss-text-4, #8A94A3);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-pay-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 14px;
  color: var(--ss-brand-900, #0B2540);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* A subscription dialog opened from desktop Job Details is intentionally
 * stacked without dismissing the underlying job. Its second backdrop belongs
 * between the two Bootstrap modals (Details 1055, Subscription 1060). */
.modal-backdrop.ss-subscription-detail-backdrop { z-index: 1058; }

/* ── Stacked Report / Release blocks ───────────────────────────────────── */
#scratch-sheet-app .ss-times {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
#scratch-sheet-app .ss-edge {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  min-width: 0;
}
#scratch-sheet-app .ss-edge-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ss-text-4);
}
#scratch-sheet-app .ss-edge-trackwork {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  color: var(--ss-trackwork-fg);
  background: var(--ss-trackwork-bg);
  border: 1px solid var(--ss-trackwork-border);
  border-radius: var(--ss-radius-pill);
}
#scratch-sheet-app .ss-edge-trackwork .material-symbols-outlined {
  font-size: 11px;
  line-height: 1;
}
#scratch-sheet-app .ss-edge-sched {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) max-content;
  align-items: start;
  gap: 4px;
  padding-right: 16px;
}
#scratch-sheet-app .ss-edge-eff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 5px;
  margin-left: 16px;
  padding-left: 7px;
  border-left: 2px solid var(--ss-border-2);
}
#scratch-sheet-app .ss-edge-eff-main {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  min-width: 0;
}
#scratch-sheet-app .ss-edge-eff-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  min-height: 14px;
}
#scratch-sheet-app .ss-edge-place {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
#scratch-sheet-app .ss-edge-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 8px;
}
#scratch-sheet-app .ss-edge-loc {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ss-text-2);
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
}
#scratch-sheet-app .ss-edge-loc-eff {
  color: var(--ss-text);   /* effective is the prominent one (spec §B) */
}
#scratch-sheet-app .ss-edge-time {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 1px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-surface-modal) .ss-effective-report-time {
  color: var(--ss-effective-report-green);
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-surface-modal) .ss-effective-release-time {
  color: var(--ss-effective-release-red);
}
#scratch-sheet-app .ss-edge-eff-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  height:14px;
  color:var(--ss-muted-2);
  font-size:16px;
  line-height:1;
  transform:translateY(-2px);
}
#scratch-sheet-app .ss-edge-eff .ss-eff-badge {
  flex:0 0 auto;
  font-size:7px;
  font-weight:800;
  color:var(--ss-eff-fg);
  background:var(--ss-eff-bg);
  border-radius:3px;
  padding:1px 3px;
  letter-spacing:.02em;
  white-space:nowrap;
}
/* ── Flags row ──────────────────────────────────────────────────────────── */
#scratch-sheet-app .ss-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
#scratch-sheet-app .ss-flag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--ss-radius-pill);
}
#scratch-sheet-app .ss-flag-rest {
  background: var(--ss-rest-bg);
  color: var(--ss-rest-fg);
}
/* ── Shared Pick / Hide controls ────────────────────────────────────────────
 * The in-card action rail was replaced by swipe gestures, but these .ss-pick /
 * .ss-hide class rules still paint the DETAIL SHEET and Hidden-Jobs list, so
 * they stay. (The card no longer emits an .ss-rail wrapper.) */
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #C0455B;
  font-size: 22px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-pick {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-pick-on {
  background: var(--ss-accent);
  color: #fff;
  font-size: 17px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-pick-off {
  border: 1.5px dashed var(--ss-muted-4);
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-pick-plus {
  color: var(--ss-accent);
  font-size: 22px;
  line-height: 1;
}

#scratch-sheet-app .ss-empty {
  text-align: center;
  color: var(--ss-text-3);
  font-size: 13px;
  padding: 32px 12px;
}

/* ==========================================================================
 * P2 — Mobile interactions: Your Picks mini-bar, hidden-jobs strip, detail
 * bottom-sheet, picks reorder tray, per-job restore list. The overlays render
 * on <body> (NOT scoped to #scratch-sheet-app) so their tokens are inlined /
 * self-contained. The picks bar + hidden strip render inside the card root.
 * ======================================================================== */

/* ── Your Picks mini-bar (in-card-root) ─────────────────────────────────── */
#scratch-sheet-app .ss-picks-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 11px 0 0;
  border-radius: 14px;
  background: linear-gradient(165deg, #0B2540, #0A1B2E);
  box-shadow: 0 6px 16px rgba(11, 37, 64, 0.2);
  padding: 8px 13px;
  cursor: pointer;
}
#scratch-sheet-app .ss-picks-empty { cursor: default; }
#scratch-sheet-app .ss-picks-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9EC5E6;
  white-space: nowrap;
}
#scratch-sheet-app .ss-picks-empty-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #B7D6F0;
  margin-left: 6px;
}
#scratch-sheet-app .ss-picks-pick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  box-sizing: border-box;
  border: 1.5px dashed #9EC5E6;
  border-radius: 50%;
  color: #DCEEFF;
  font: 700 17px/1 var(--ss-font-disp);
}
#scratch-sheet-app .ss-picks-bar-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}
#scratch-sheet-app .ss-picks-previews {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
#scratch-sheet-app .ss-pk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
#scratch-sheet-app .ss-pk-medallion,
#scratch-sheet-app .ss-tray-medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ss-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
#scratch-sheet-app .ss-pk-jobchip,
#scratch-sheet-app .ss-tray-jobchip,
#scratch-sheet-app .ss-restore-jobchip {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--ss-radius-chip);
}
#scratch-sheet-app .ss-picks-more {
  font-size: 11px;
  font-weight: 600;
  color: #B7D6F0;
}
#scratch-sheet-app .ss-picks-reorder {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #9EC5E6;
  white-space: nowrap;
}
#scratch-sheet-app .ss-picks-reorder .material-symbols-outlined { font-size: 17px; }

#scratch-sheet-app .ss-hidden-restore-all {
  border: 1px solid #8A5300;
  background: transparent;
  color: #8A5300;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--ss-radius-pill);
  cursor: pointer;
}

/* ── Shared Plain Sheet mobile shell (mounted on <body>) ──────────────────
 * Plain Sheet owns dragging, swipe-to-dismiss, outside-click, Escape, focus,
 * and animation. These classes keep the established Scratch visual language
 * and z-index contract: above the navbar, below Bootstrap image modals. */
.ss-overlay-scrim.pbs-root {
  max-height: 100dvh;
  font-family: 'IBM Plex Sans', 'Open Sans', system-ui, sans-serif;
}
.ss-overlay-backdrop.pbs-backdrop {
  background: rgba(11, 22, 34, 0.5);
}
.ss-overlay-container.pbs-container {
  --pbs-container-background-color: #fff;
  --ss-sheet-max-height: 84dvh;
  width: 100% !important;
  max-width: none;
  max-height: var(--ss-sheet-max-height);
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -12px 34px rgba(11, 37, 64, 0.18);
}
.ss-overlay-container.pbs-container .pbs-gap-filler { background: #fff; }
.ss-overlay-handle.pbs-handle {
  height: 30px;
  min-height: 30px;
  border-radius: 22px 22px 0 0;
  background: #fff;
  cursor: grab;
  touch-action: none;
}
.ss-overlay-handle.pbs-handle:active { cursor: grabbing; }
.ss-overlay-handle.pbs-handle:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: -3px;
}
.ss-overlay-handle.pbs-handle[data-ss-initial-focus]:focus {
  outline: none;
  box-shadow: none;
}
.ss-overlay-handle.pbs-handle .pbs-handle-bar {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #C4CCD6;
}
.ss-overlay-content.pbs-content-wrapper {
  width: 100%;
  max-height: calc(var(--ss-sheet-max-height) - 30px - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  overscroll-behavior: contain;
}
.ss-overlay-content.pbs-content-wrapper > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: inherit;
  min-height: 0;
}
.ss-overlay-content.pbs-content-wrapper > div > :first-child {
  width: 100%;
  max-height: 100%;
  min-height: 0;
}
/* Filters is a long, scroll-owned surface, so it should always open at the
 * established tray detent instead of deriving a new height from whichever
 * slider placeholders have finished initializing on that frame. */
.ss-filter-scrim .ss-overlay-container.pbs-container {
  height: var(--ss-sheet-max-height);
}
.ss-filter-scrim .ss-overlay-content.pbs-content-wrapper {
  flex: 1 1 auto;
  min-height: 0;
}
.ss-filter-scrim .ss-filter-sheet {
  height: 100%;
  max-height: none;
}
.ss-filter-scrim .ss-fsheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
}

/* Shared category-filter tray used by Crewbook Explorer on phones. */
.lt-category-overlay .ss-overlay-container.pbs-container {
  height: var(--ss-sheet-max-height);
}
.lt-category-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #fff;
}
/* App-wide tray-header standard (owner decision 2026-07-17): the Crewbook
 * Explorer mobile category-filter tray adopts the slim borderless Filters head —
 * no divider, slim padding, 17px display title, and a transparent muted × with
 * a 44px hit target (matching `.ss-overlay-scrim .ss-tray-header-close`). */
.lt-category-sheet-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 8px;
  touch-action: none;
}
.lt-category-sheet-head h2 {
  margin: 0;
  color: var(--ss-brand-900, #0B2540);
  font: 700 17px/1.2 'Space Grotesk', 'IBM Plex Sans', sans-serif;
}
.lt-category-sheet-head > h2 { pointer-events:none; }
.lt-category-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.lt-category-sheet-body > [data-pop] {
  display: block;
  min-width: 0;
  width: 100%;
}
/* Sheet dragging belongs only to the handle and noninteractive header chrome.
 * Disabling the browser's pan gesture here prevents Safari from moving the
 * page while Plain Sheet is transforming the tray. Header labels are
 * pointer-transparent so Plain Sheet consistently sees the registered header
 * itself as the touch target; close buttons remain normal interactive targets.
 * Job details expose separate tray chrome so their analytical header remains
 * outside the drag zone. */
.ss-overlay-scrim :is(
  .ss-detail-tray-head,
  .ss-fsheet-head,
  .ss-tray-head,
  .ss-board-head,
  .ss-loc-modal-head,
  .ss-column-settings-head
) {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.ss-overlay-scrim :is(
  .ss-detail-tray-head,
  .ss-fsheet-head,
  .ss-tray-head,
  .ss-board-head,
  .ss-loc-modal-head,
  .ss-column-settings-head
):active { cursor: grabbing; }
.ss-overlay-scrim :is(
  .ss-detail-tray-head,
  .ss-fsheet-head,
  .ss-tray-head,
  .ss-board-head,
  .ss-loc-modal-head,
  .ss-column-settings-head
) > :not(button) {
  pointer-events: none;
}
@media (max-width: 768px) and (orientation: landscape) {
  .ss-overlay-container.pbs-container {
    /* iOS doesn't offer the medium detent in compact-height environments. */
    --ss-sheet-max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)));
  }
}
.ss-overlay-scrim .mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.ss-overlay-scrim .disp { font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; }
.ss-overlay-scrim .ss-lock { font-size: 11px; }

/* ── Detail bottom-sheet ────────────────────────────────────────────────── */
.ss-detail-sheet {
  position: relative;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 0;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  color: #1A2230;
}
.ss-detail-sheet,
.ss-detail-sheet * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ss-detail-tray-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 52px;
  padding: 8px 16px 10px;
  border-bottom: 1px solid #E2E8F0;
  box-sizing: border-box;
}
/* Mobile trays and the desktop dialog share the same fixed identity/SmartPick/
 * pay summary beside the close action. Only terminal context and the remaining
 * job details scroll beneath it. */
.ss-ds-fixed-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
}
.ss-ds-fixed-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: start;
  min-width: 0;
  gap: 4px;
}
.ss-ds-identity-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.ss-overlay-scrim .ss-detail-tray-head {
  min-height: 0;
  gap: 4px;
  padding: 5px 12px 8px;
  border-bottom: 1px solid #E8EDF3;
}
.ss-ds-scroll {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 0;
}
.ss-overlay-scrim .ss-ds-fixed-summary {
  flex: 0 1 calc(100% - 48px);
  width: calc(100% - 48px);
  gap: 8px;
}
.ss-overlay-scrim .ss-ds-fixed-summary .ss-job-position-badge-detail .ss-job-position-number {
  padding: 4px 8px;
  font-size: 16px;
}
.ss-overlay-scrim .ss-ds-fixed-summary .ss-job-position-badge-detail .ss-job-position-code {
  padding: 4px 6px;
  font-size: 12px;
}
.ss-pay-summary-detail {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  min-width: 0;
}
.ss-pay-summary-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding: 1px 0 1px 11px;
}
.ss-pay-summary-primary { padding-right: 11px; padding-left: 0; }
.ss-pay-summary-metric + .ss-pay-summary-metric {
  border-left: 1px solid #D8E2EA;
}
.ss-pay-summary-label {
  color: var(--ss-text-4, #8A94A3);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
}
.ss-pay-summary-value {
  margin-top: 3px;
  color: var(--ss-brand-900, #0B2540);
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.ss-pay-summary-primary .ss-pay-summary-value {
  font-size: 22px;
  font-weight: 800;
}
button.ss-pay-summary-locked {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
button.ss-pay-summary-locked:first-child { border-left: 0; }
.ss-pay-summary-locked:hover { background: var(--ss-accent-soft, #eaf2fa); }
.ss-pay-summary-locked:focus-visible { outline: 2px solid var(--ss-accent, #337ab7); outline-offset: 2px; }
.ss-pay-summary-value .ss-subscriber-lock-icon { font-size: 17px; }
@media (max-width: 360px) {
  .ss-overlay-scrim .ss-detail-tray-head { padding-right: 8px; padding-left: 8px; }
  .ss-overlay-scrim .ss-ds-fixed-summary .ss-job-position-badge-detail .ss-job-position-number {
    padding-right: 6px;
    padding-left: 6px;
    font-size: 15px;
  }
  .ss-overlay-scrim .ss-pay-summary-metric { padding-left: 7px; }
  .ss-overlay-scrim .ss-pay-summary-primary { padding-right: 7px; padding-left: 0; }
  .ss-overlay-scrim .ss-pay-summary-primary .ss-pay-summary-value { font-size: 19px; }
  .ss-overlay-scrim .ss-pay-summary-value { font-size: 12px; }
}
.ss-ds-close {
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #6A7383;
  cursor: pointer;
  padding: 0 2px;
}
.ss-stars { line-height: 1; letter-spacing: 1px; }
.ss-star { font-size: 13px; }
.ss-star-on { color: #F5B301; }
.ss-star-off { color: #D8DEE6; }
.ss-eff-badge {
  display: inline-flex;
  align-items: center;
  min-height: 14px;
  box-sizing: border-box;
  font-size: 7px;
  font-weight: 800;
  color: #8A5300;
  background: #FCEFD9;
  border-radius: 3px;
  padding: 1px 3px;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Report / Release bordered card */
.ss-ds-times-card {
  border: 1px solid #E4E8EE;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-ds-scroll > :first-child { margin-top: 0; }
.ss-ds-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 82px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #C9D5E0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: var(--ss-accent, #337AB7);
  box-shadow: 0 3px 12px rgba(11, 37, 64, .2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 7px);
  transition: opacity .18s ease, transform .18s ease;
}
.ss-ds-scroll-cue .material-symbols-outlined { font-size: 24px; line-height: 1; }
.ss-ds-scroll-cue-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.ss-ds-edge { display: flex; flex-direction: column; gap: 4px; }
.ss-ds-edge-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6A7383;
  width: 52px;
}
.ss-ds-edge-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 8px;
  padding-right: 14px;
}
.ss-ds-edge-eff {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
  align-items: start;
  gap: 6px;
  margin-left: 14px;
}
.ss-ds-eff-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  color: #C4CCD6;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-2px);
}
.ss-ds-loc-chip {
  justify-self: start;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ss-ds-time {
  justify-self: end;
  padding-top: 1px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Details grid */
.ss-ds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-top: 12px;
}
.ss-ds-grid-secondary { grid-template-columns: 1fr 1fr; }
.ss-ds-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.ss-ds-score-grid .ss-ds-cell {
  position: relative;
  min-width: 0;
  min-height: 66px;
  padding: 6px;
  box-sizing: border-box;
}
.ss-ds-score-grid .ss-ds-cell-label {
  padding-right: 12px;
  font-size: 8.5px;
  white-space: nowrap;
}
.ss-ds-score-grid .ss-ds-analysis-btn {
  flex: 1 1 auto;
  justify-content: center;
  gap: 3px;
}
.ss-ds-score-grid .ss-ds-analysis-arrow {
  position: absolute;
  top: 3px;
  right: 2px;
  font-size: 16px;
}
.ss-ds-score-grid .ss-ds-qual { gap: 3px; }
.ss-ds-score-grid .ss-ds-qual-num { font-size: 18px; }
.ss-ds-score-grid .ss-ds-qual-badge { padding: 1px 4px; font-size: 8.5px; }
.ss-ds-score-grid .ss-ds-score-stars { display: inline-flex; }
.ss-ds-score-grid .ss-stars { letter-spacing: 0; white-space: nowrap; }
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-detail-modal) .ss-ds-score-grid .ss-star { font-size: 13px; }
.ss-ds-score-grid .ss-ds-locked-upgrade { margin: auto; }
.ss-ds-cell { display: flex; flex-direction: column; gap: 2px; }
.ss-ds-cell-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8A94A3;
  text-transform: uppercase;
}
.ss-ds-cell-value { font-size: 14px; font-weight: 600; color: #1A2230; }
.ss-ds-ot-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  padding: 2px 6px;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-ot-bg);
  color: var(--ss-ot-fg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.ss-ds-ot-meal-icon {
  font-size: 14px;
  line-height: 1;
}
.ss-ds-locked-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 24px;
  min-height: 24px;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ss-ds-locked-upgrade:hover { background: var(--ss-accent-soft, #eaf2fa); }
.ss-ds-locked-upgrade:focus-visible {
  outline: 2px solid var(--ss-accent, #337ab7);
  outline-offset: 1px;
}
.ss-ds-locked-upgrade .ss-subscriber-lock-icon { pointer-events: none; }
.ss-ds-cell-analytical {
  min-width:0; padding:5px 8px; border:1px solid var(--ss-border-1);
  border-radius:10px; background:var(--ss-fill-3);
}
.ss-ds-analysis-btn {
  display:flex; align-items:center; justify-content:space-between; gap:7px;
  width:100%; min-width:0; padding:0; border:0; background:transparent;
  color:var(--ss-text); text-align:left; cursor:pointer;
}
.ss-ds-analysis-btn:focus-visible {
  outline:2px solid var(--ss-accent); outline-offset:3px; border-radius:5px;
}
.ss-ds-analysis-arrow {
  flex:0 0 auto; color:var(--ss-muted-2); font-size:19px; line-height:1;
}
.ss-ds-cell-analytical {
  transition: border-color .15s ease, background-color .15s ease;
}
.ss-ds-cell-analytical:hover,
.ss-ds-cell-analytical:focus-within {
  border-color:var(--ss-accent);
  background:var(--ss-accent-soft);
}
.ss-ds-qual { display: inline-flex; align-items: center; gap: 6px; }
.ss-ds-qual-num { font-size: 20px; font-weight: 700; }
.ss-ds-qual-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

.ss-ds-special { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.ss-ds-special-text {
  color: #1A2230;
  font: 600 14px/1.35 var(--ss-font-body);
}
.ss-ds-crew {
  margin-top: 12px;
  padding: 9px 10px 8px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #F8FAFC;
}
.ss-ds-crew-title {
  margin-bottom: 4px;
  color: #64748B;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ss-ds-crew-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  padding: 3px 0;
  color: #334155;
  font-size: 13px;
}
.ss-ds-crew-role {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.ss-ds-crew-name { min-width: 0; overflow-wrap: break-word; font-weight: 600; color: #1A2230; }
.ss-ds-crew-id { color: #64748B; font-size: 11px; font-weight: 500; }
.ss-ds-crew-status,
.ss-ds-crew-unavailable { color: #7C8798; font-weight: 500; }
.ss-ds-crew-unavailable { padding: 3px 0; font-size: 12px; }
.ss-ds-crew-note {
  margin-top: 6px;
  color: #7C8798;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}
.ss-ds-crew-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7C8798;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ss-ds-crew-locked:hover { background: var(--ss-accent-soft, #eaf2fa); }
.ss-ds-crew-locked:focus-visible {
  outline: 2px solid var(--ss-accent, #337ab7);
  outline-offset: 1px;
}
.ss-ds-crew-locked .ss-lock { display: inline-flex; }
.ss-ds-crew-locked .ss-subscriber-lock-icon { font-size: 14px; }
.ss-ds-awardee { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.ss-ds-awardee-body { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ss-ds-awardee-name { font-size: 13px; font-weight: 600; color: #1A2230; }
.ss-ds-awardee-status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; background: #EAF2FA; color: var(--ss-accent);
}
.ss-ds-awardee-ibm { font-size: 11px; color: #8A94A3; }

.ss-ds-jobnums { list-style: none; margin: 12px 0 0; padding: 0; }
.ss-ds-jobnum { display: flex; flex-direction: column; margin-bottom: 6px; }
.ss-ds-jobnum-cap { font-size: 11px; color: #6A7383; }

.ss-ds-rest {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #FBEDED;
  border: 1px solid #F3CFCF;
  color: #9A2B2B;
  font-size: 12.5px;
  font-weight: 600;
}

.ss-ds-track {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #FFF1F1;
  border: 1px solid #F2B8B8;
}
.ss-ds-track-head {
  font-size: 12px;
  font-weight: 800;
  color: #B42323;
  margin-bottom: 2px;
  line-height: 1;
}
.ss-ds-track-item { margin: 0; line-height: 1; }
.ss-ds-track-item + .ss-ds-track-item { margin-top: 3px; }
.ss-ds-track-name { font-size: 12px; font-weight: 700; color: #B42323; display: block; line-height: 1; }
.ss-ds-track-details { font-size: 11px; color: #7F1D1D; line-height: 1; white-space: pre-line; }

.ss-detail-image {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #fff;
}
.ss-detail-image-title {
  padding: 8px 10px 7px;
  border-bottom: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #64748B;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ss-detail-image-content { background: #fff; }
.ss-detail-image .placeholder-glow {
  display: block;
  padding: 12px;
}
.ss-detail-image-sheet {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
.ss-detail-image-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--ss-fill-2);
  color: var(--ss-text-2);
}
.ss-detail-image-empty-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ss-fill-1);
  color: var(--ss-muted-1);
  font-size: 22px;
}
.ss-detail-image-empty-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-detail-image-empty-copy strong { color: var(--ss-text); font-size: 13px; line-height: 1.25; }
.ss-detail-image-empty-copy > span { color: var(--ss-text-4); font-size: 12px; line-height: 1.35; }

/* Actions (sticky footer of the sheet) */
.ss-ds-actions {
  display: flex;
  gap: 10px;
  padding: 12px 0 16px;
  flex: 0 0 auto;
  border-top: 1px solid #EFF2F6;
  margin: 8px 16px 0;
}
.ss-ds-action {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: #337ab7;
}
.ss-ds-action-pick {
  padding: 6px 12px;
  border: 1px solid #337ab7;
  background: transparent;
  color: #337ab7;
}
.ss-ds-action-picked { background: #178A4E; }
.ss-ds-hide-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #C0455B;
  background: transparent;
  color: #C0455B;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.ss-ds-hide-btn .ss-hide { width: 30px; height: 36px; }

/* ── Picks reorder tray + restore list (shared tray styling) ────────────── */
.ss-tray-scrim { justify-content: flex-end; }
.ss-tray,
.ss-restore-sheet {
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 14px 16px 20px;
  max-height: 85%;
  display: flex;
  flex-direction: column;
  color: #1A2230;
}
.ss-picks-tray,
.ss-picks-tray * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* App-wide tray-header standard (owner decision 2026-07-17): the Picks / Hidden
 * Jobs / Sort trays adopt the slim Filters header. The `.ss-tray`/`.ss-restore-
 * sheet` wrapper already supplies 14px top padding, so the head only needs the
 * slim bottom rhythm — no border, no heavy margin — and the fsheet display-font
 * title. Close look comes from the shared `.ss-tray-header-close` base rule. */
.ss-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  padding-bottom: 0;
}
.ss-tray-heading { display:flex; flex-direction:column; gap:2px; }
.ss-tray-title {
  font-family: var(--ss-font-disp);
  font-size:17px; font-weight:700; color: var(--ss-brand-900); line-height:1.2;
}
.ss-tray-subtitle { font-size:12px; color: var(--ss-muted-1); }
.ss-tray-close,
.ss-restore-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ss-muted-1);
  cursor: pointer;
}
.ss-tray-list,
.ss-restore-list {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-tray-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #E4E8EE;
  border-radius: 10px;
  background: #fff;
  touch-action: pan-y;
  cursor:grab;
  user-select:none;
}
.ss-tray-row:active { cursor:grabbing; }
.ss-tray-medallion {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:50%;
  background:#337ab7;
  color:#fff;
  font-size:13px;
  font-weight:700;
}
.ss-job-position-badge {
  display:inline-flex;
  align-items:stretch;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:5px;
}
.ss-job-position-number {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
  padding:2px 7px;
  line-height:1.2;
  font-size:12px;
  font-weight:700;
}
/* Sawtooth effective-edge bands — the Crewbook Explorer interlock seam,
 * miniaturized to a chip edge. Shared by the fused card badge AND the grid job
 * chip. Report band (top) teeth bite down; release band (bottom) teeth bite up.
 * Proportional height keeps the look across compact/card/detail chip sizes;
 * unaffected chips render byte-identical to plain chips (uniform footprint). */
.ss-eff-band {
  position:absolute;
  left:0;
  right:0;
  height:27%;
  z-index:1;
  pointer-events:none;
}
.ss-eff-band-top {
  top:0;
  clip-path:polygon(0 0,100% 0,100% 55%,93.75% 100%,87.5% 55%,81.25% 100%,75% 55%,68.75% 100%,62.5% 55%,56.25% 100%,50% 55%,43.75% 100%,37.5% 55%,31.25% 100%,25% 55%,18.75% 100%,12.5% 55%,6.25% 100%,0 55%);
}
.ss-eff-band-bot {
  bottom:0;
  clip-path:polygon(0 100%,100% 100%,100% 45%,93.75% 0,87.5% 45%,81.25% 0,75% 45%,68.75% 0,62.5% 45%,56.25% 0,50% 45%,43.75% 0,37.5% 45%,31.25% 0,25% 45%,18.75% 0,12.5% 45%,6.25% 0,0 45%);
}
.ss-job-position-number-banded { position:relative; overflow:hidden; }
.ss-job-position-num { position:relative; z-index:2; }
.ss-job-position-code {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:2px 6px;
  line-height:1.2;
  font-size:10px;
  font-weight:700;
}
.ss-job-position-badge-card { min-height:30px; border-radius:var(--ss-radius-chip, 6px); }
.ss-job-position-badge-card .ss-job-position-number { padding:4px 7px; font-size:18px; }
.ss-job-position-badge-card .ss-job-position-code { padding:4px 8px; font-size:13px; }
.ss-job-position-badge-card.ss-job-position-badge-long .ss-job-position-number {
  padding:4px 6px;
  font-size:13px;
  letter-spacing:-.03em;
}
.ss-job-position-badge-card.ss-job-position-badge-long .ss-job-position-code {
  padding:4px 6px;
  font-size:12px;
}
.ss-job-position-badge-detail { min-height:34px; border-radius:var(--ss-radius-chip, 6px); }
.ss-job-position-badge-detail .ss-job-position-number { padding:5px 11px; font-size:18px; }
.ss-job-position-badge-detail .ss-job-position-code { padding:4px 8px; font-size:13px; }
.ss-tray-row-chosen { border-color:#9EC5E6; box-shadow:0 5px 14px rgba(51,122,183,.16); }
.ss-tray-row-ghost { opacity:.35; background:#EAF2FA; }
.ss-tray-row-dragging { opacity:.8; background:#F1F4F8; cursor:grabbing; }
.ss-tray-handle {
  flex: 0 0 18px;
  cursor: grab;
  color: #B0B8C4;
  font-size: 16px;
  touch-action: none;
  user-select: none;
  pointer-events:none;
}
.ss-tray-jobchip { flex: 0 0 auto; }
.ss-tray-times { font-size: 11px; color: #5B6472; margin-left: auto; white-space: nowrap; }
.ss-tray-time-arrow { font-size:14px; vertical-align:-2px; color:var(--ss-muted-2); }
.ss-tray-remove,
.ss-restore-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ss-tray-remove { color: #9A2B2B; line-height: 1; }
.ss-tray-remove .material-symbols-outlined { font-size:20px; }
.ss-tray-indicator {
  height: 2px;
  background: #337ab7;
  border-radius: 2px;
  margin: -3px 0;
}
.ss-tray-empty {
  text-align: center;
  color: #5B6472;
  font-size: 13px;
  padding: 24px 12px;
}

.ss-restore-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #E4E8EE;
  border-radius: 10px;
  background: #fff;
}
.ss-restore-times {
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  white-space:nowrap;
}
.ss-restore-time { display:flex; flex-direction:column; gap:1px; white-space:nowrap; }
.ss-restore-time span { font-size:8px; letter-spacing:.06em; color:#8A94A3; font-weight:700; }
.ss-restore-time strong { font-size:12px; font-weight:700; }
.ss-restore-time-report strong { color:var(--ss-report-green, #1B7A3D); }
.ss-restore-time-release strong { color:var(--ss-release-red, #B42318); }
.ss-restore-btn {
  border: 1px solid #337ab7;
  color: #337ab7;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.ss-restore-footer {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
.ss-restore-footer .ss-hidden-restore-all {
  border: 1px solid #8A5300;
  color: #8A5300;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
}

@media (max-width: 359px) {
  .ss-restore-row { flex-wrap:wrap; }
  .ss-restore-times {
    order:3;
    flex:1 0 100%;
    margin-left:0;
  }
  .ss-restore-btn { margin-left:auto; }
}

/* Desktop Hidden Jobs uses the same content-owned, headerless dialog treatment
 * as Job Details. Only the job list scrolls. */
.ssg-hidden-jobs-panel {
  display:flex; flex-direction:column; min-height:0; max-height:min(78dvh, 680px);
  background:var(--ss-card, #fff); color:var(--ss-text, #1A2230);
  font-family:var(--ss-font-body);
}
.ssg-hidden-jobs-head {
  display:flex; align-items:flex-start; gap:16px; flex:0 0 auto;
  padding:18px 18px 8px;
}
.ssg-hidden-jobs-heading { min-width:0; flex:1 1 auto; }
.ssg-hidden-jobs-heading h2 {
  margin:0; color:var(--ss-brand-900, #0B2540);
  font:700 20px/1.2 var(--ss-font-disp);
}
.ssg-hidden-jobs-heading p {
  margin:4px 0 0; color:var(--ss-muted-1, #8A94A3); font-size:11px; line-height:1.4;
}
.ssg-hidden-jobs-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.ssg-hidden-jobs-scroll {
  min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:10px 18px 18px;
}
.ssg-hidden-jobs-scroll .ss-restore-list { overflow:visible; }
.ssg-hidden-restore-all {
  border:0; border-radius:999px; padding:7px 12px;
  background:var(--ss-accent, #337ab7); color:#fff; font-size:12px; font-weight:700;
}
.ssg-hidden-restore-all:disabled { opacity:.45; }
.ssg-hidden-jobs-close {
  display:inline-grid; place-items:center; width:32px; height:32px; min-width:32px;
  padding:0; border:0; border-radius:50%; background:var(--ss-fill-1, #F1F4F8);
  color:var(--ss-text-4, #6A7383); font:600 20px/1 var(--ss-font-body);
}
.ssg-hidden-jobs-close:focus-visible {
  outline:2px solid var(--ss-accent, #337ab7); outline-offset:2px;
}

/* ==========================================================================
 * P3 — Mobile filter surfaces (spec §B/§C): controls row, filter bottom-sheet,
 * Location modal. Scoped under #scratch-sheet-app.
 * ======================================================================== */

/* ── Available / Viewing count chips (spec §B / design) ────────────────── */
#scratch-sheet-app #ss-count-chips-host { margin: 11px 12px 0; }
#scratch-sheet-app .ss-count-chips {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  width: 100%;
}
#scratch-sheet-app .ss-count-chip {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(10.5px, 3.2vw, 13px);
  font-weight: 400;
  padding: 2px 4px;
  border-radius: 999px;
}
#scratch-sheet-app .ss-count-chip-label {
  margin-right: 0.38em;
  font-weight: 700;
}
#scratch-sheet-app .ss-count-chip-values { font-weight: 400; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-mobile-filter-lock {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px;
  border: 1px solid #D9E6F2; border-radius: 10px; background: #F4F8FC;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-mobile-filter-lock > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-mobile-filter-lock strong { color: var(--ss-brand-900); font-size: 12px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-mobile-filter-lock small { color: var(--ss-muted-1); font-size: 10px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-mobile-filter-lock button { border: 0; border-radius: 7px; padding: 7px 10px; background: var(--ss-brand-900); color: #fff; font-size: 10px; font-weight: 700; }

/* ── Controls row (view + Hidden Jobs + Filters + mode utility) ─────────── */
#scratch-sheet-app #ss-controls-host { margin: 8px 12px 0; }
#scratch-sheet-app .ss-controls-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
#scratch-sheet-app .ss-hidden-jobs-btn,
#scratch-sheet-app .ss-filters-btn,
#scratch-sheet-app .ss-card-sort-btn,
#scratch-sheet-app .ss-mobile-utilities-btn {
  flex: 1;
  height: 32px;
  border: 1px solid var(--ss-border-2);
  border-radius: 8px;
  background: #fff;
  font-family: var(--ss-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
#scratch-sheet-app .ss-filters-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 6px;
}
#scratch-sheet-app .ss-card-sort-btn {
  display: none;
  flex: 0 0 68px;
  min-width: 0;
  padding: 0 5px;
}
#scratch-sheet-app .ss-btn-icon {
  font-size: 18px;
  line-height: 1;
}
#scratch-sheet-app .ss-mobile-utilities-wrap {
  position: relative;
  flex: 0 0 34px;
  min-width: 34px;
}
#scratch-sheet-app .ss-mobile-utilities-btn {
  width: 100%;
  padding: 0 6px;
  font-weight: 800;
  letter-spacing: 1px;
}
#scratch-sheet-app .ss-mobile-utilities-menu {
  position: fixed;
  z-index: 1120;
  width: 220px;
  max-height: calc(100dvh - var(--lt-bottom-nav-height, 0px) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--ss-border-2);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(11,37,64,.22);
}
#scratch-sheet-app .ss-mobile-utilities-menu[hidden] { display: none !important; }
#scratch-sheet-app .ss-mobile-utilities-menu > button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ss-text-2);
  font-family: var(--ss-font-body);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
#scratch-sheet-app .ss-mobile-utilities-menu > button:active { background: #F1F5F8; color: var(--ss-accent); }
#scratch-sheet-app .ss-mobile-utilities-menu .material-symbols-outlined { font-size: 18px; }
#scratch-sheet-app .ss-mobile-utilities-divider { display: block; height: 1px; margin: 5px 3px; background: var(--ss-border-1); }
#scratch-sheet-app .ss-hidden-jobs-btn {
  position: relative;
  display: none;
  flex: 0 0 34px;
  padding: 0;
  color: #198754;
}
#scratch-sheet-app .ss-hidden-jobs-btn:hover { color: #12643e; }
#scratch-sheet-app .ss-hidden-jobs-btn:focus-visible {
  outline: 2px solid #198754;
  outline-offset: 1px;
}
#scratch-sheet-app .ss-hidden-jobs-btn-icon {
  font-size: 24px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
#scratch-sheet-app .ss-hidden-jobs-btn-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font: 700 9px/15px var(--ss-font-body);
  text-align: center;
}
#scratch-sheet-app .ss-hidden-jobs-btn-count[hidden] { display: none; }
#scratch-sheet-app #ss-controls-host.ss-mode-cards .ss-hidden-jobs-btn { display: inline-flex; }
#scratch-sheet-app #ss-controls-host.ss-mode-cards .ss-card-sort-btn { display: inline-flex; }
#scratch-sheet-app #ss-controls-host.ss-mode-cards .ss-mobile-utility-columns { display: none; }

@media (max-width: 360px) {
  #scratch-sheet-app .ss-controls-row { gap: 4px; }
  #scratch-sheet-app .ss-card-sort-btn { flex-basis: 58px; padding: 0 3px; font-size: 12px; }
  #scratch-sheet-app .ss-filters-btn { padding: 0 3px; gap: 3px; font-size: 12px; }
  #scratch-sheet-app .ss-btn-icon { font-size: 16px; }
  #scratch-sheet-app .ss-mobile-utilities-wrap { flex-basis: 32px; min-width: 32px; }
}
#scratch-sheet-app .ss-filter-badge {
  background: var(--ss-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Filter bottom-sheet ─────────────────────────────────────────────────── */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-sheet,
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-detail-sheet,
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-help-sheet {
  background: #fff;
  border-radius: 22px 22px 0 0;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  font-family: var(--ss-font-body);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fsheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 8px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fsheet-title {
  font-family: var(--ss-font-disp);
  font-size: 17px;
  font-weight: 700;
  color: var(--ss-brand-900);
  margin-right: auto;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fsheet-preferences {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ss-accent);
  font: 700 12px/1 var(--ss-font-body);
  white-space: nowrap;
  cursor: pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fsheet-preferences:hover,
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fsheet-preferences:focus-visible {
  background: var(--ss-accent-soft);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fsheet-preferences .material-symbols-outlined {
  font-size: 18px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fsheet-close {
  border: 0; background: transparent; font-size: 24px; line-height: 1;
  color: var(--ss-muted-1); cursor: pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fsheet-scroll {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0 16px 12px;
  -webkit-overflow-scrolling: touch;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  height:42px;
  box-sizing:border-box;
  margin:4px 0 2px;
  padding:0 11px;
  border:1px solid var(--ss-border-2);
  border-radius:11px;
  background:#fff;
  color:var(--ss-muted-1);
  transition:border-color .15s ease, box-shadow .15s ease;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search:focus-within,
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search.is-active {
  border-color:var(--ss-accent);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search:focus-within {
  box-shadow:0 0 0 3px rgba(51,122,183,.13);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search > .material-symbols-outlined {
  flex:0 0 auto;
  font-size:19px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search input {
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ss-text-2);
  font:500 14px/1 var(--ss-font-body);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search input::-webkit-search-cancel-button { display:none; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search button {
  display:grid;
  flex:0 0 auto;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ss-muted-1);
  cursor:pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search button:hover { background:var(--ss-accent-soft); color:var(--ss-accent); }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search button[hidden] { display:none; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-search button .material-symbols-outlined { font-size:18px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fgroup { padding: 12px 0; border-bottom: 1px solid var(--ss-border-3); }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fgroup-head { display: flex; align-items: center; justify-content: space-between; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fgroup-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ss-text-3);
  margin-bottom: 9px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fpills { display: flex; flex-wrap: wrap; gap: 8px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fpill {
  border: 1px solid var(--ss-border-2);
  background: #fff;
  color: var(--ss-text-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fpill-check { font-size: 11px; font-weight: 700; }
/* Position/Service choices retain their craft tones as variables so live taps
 * can switch cleanly between colored-selected and grey-unselected states. */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fpill-toned {
  background:#EEF1F5; color:#8793A3; border-color:#D8DEE6;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fpill-toned.ss-fpill-on {
  background:var(--ss-fpill-bg); color:var(--ss-fpill-fg); border-color:transparent;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fpill-on { border-color: transparent; }
/* One shared full-width Passenger/Road/Yard track across mobile filters,
 * desktop filters, and the desktop Change Craft dialog. */
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-service-track {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  width:100%;
  gap:3px;
  padding:3px;
  border-radius:12px;
  background:#E8ECF1;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-service-track-option {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  min-height:58px;
  padding:7px 4px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#8793A3;
  font:700 11.5px/1.15 var(--ss-font-body);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-service-track-option:hover:not(:disabled):not(.is-selected) {
  background:rgba(255,255,255,.55);
  color:var(--ss-text-2);
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-service-track-option.is-selected {
  background:var(--ss-service-bg);
  color:var(--ss-service-fg);
  box-shadow:0 1px 3px rgba(15,23,42,.14);
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-service-track-option:disabled {
  cursor:default;
  opacity:1;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-service-track-icon {
  font-size:21px;
  line-height:1;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-shift-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-shift-buttons .ss-fpill {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-content: flex-start;
  gap: 6px;
  border-radius: 9px;
  padding: 7px 8px;
  text-align: left;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-shift-buttons .ss-fpill-on {
  background: var(--ss-accent);
  color: #fff;
  border-color: var(--ss-accent);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-hos-buttons .ss-fpill { justify-content: center; }
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-option {
  position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 32px;
  align-items:center; gap:4px; min-width:0;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-option-icon {
  flex:0 0 auto; font-size:18px; line-height:1;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-option-label {
  flex:1 1 auto; min-width:0; line-height:1.15;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-option-check {
  flex:0 0 auto; margin-left:auto; font-size:16px; line-height:1;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-info-button {
  display:grid; place-items:center; width:32px; height:32px; padding:0;
  border:1px solid var(--ss-border-2); border-radius:9px; background:#fff;
  color:var(--ss-accent); cursor:pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-info-button:hover,
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-info-button[aria-expanded="true"] {
  border-color:var(--ss-accent); background:#EAF2FA;
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-info-button .material-symbols-outlined { font-size:17px; }
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-popover {
  position:absolute; z-index:12; top:calc(100% + 7px); left:0;
  width:220px; display:grid; gap:5px; padding:9px 10px;
  border:1px solid #CCDCEB; border-radius:9px; background:#fff;
  color:var(--ss-muted-1); font-size:10px; line-height:1.3;
  box-shadow:0 7px 20px rgba(11,37,64,.18);
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-popover::before {
  content:""; position:absolute; top:-5px; left:calc(100% - 24px);
  width:9px; height:9px; border-left:1px solid #CCDCEB; border-top:1px solid #CCDCEB;
  background:#fff; transform:rotate(45deg);
}
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-popover[hidden] { display:none; }
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-criteria span { display:grid; gap:1px; }
:is(#scratch-sheet-app, .ss-overlay-scrim, .ssg-scratch-modal) .ss-shift-criteria strong {
  color:var(--ss-text-2); font-size:9px; letter-spacing:.05em; text-transform:uppercase;
}
.ss-overlay-scrim .ss-shift-options .ss-shift-option:nth-child(even) .ss-shift-popover { right:0; left:auto; }
.ss-overlay-scrim .ss-shift-options .ss-shift-option:nth-child(even) .ss-shift-popover::before { right:11px; left:auto; }
.ss-overlay-scrim .ss-shift-options .ss-shift-filter-pill { position:relative; padding-right:17px; }
.ss-overlay-scrim .ss-shift-options .ss-shift-option-check {
  position:absolute; top:3px; right:3px; display:block; margin:0; font-size:12px;
}
.ss-overlay-scrim .ss-shift-options .ss-shift-option-label {
  display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  font-size:11px; line-height:1.1;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-filter-option-pill {
  border:1px solid; border-radius:999px; padding:8px 14px;
  font-size:12px; font-weight:700; cursor:pointer;
}

/* Board Awards group (engineer sheets). Its mode pills carry no inline colors
   (unlike the position/viewing pills), so they are colored here. */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fgroup-awards .ss-filter-option-pill {
  background: #fff; color: var(--ss-text-2); border-color: var(--ss-border-2);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fgroup-awards .ss-filter-option-on {
  background: var(--ss-accent); color: #fff; border-color: var(--ss-accent);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-awards-empty {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid #D9E6F2; border-radius: 11px; background: #F4F8FC;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-awards-empty .material-symbols-outlined { font-size: 22px; color: var(--ss-muted-1); }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-awards-empty > span:last-child { display: flex; flex-direction: column; gap: 2px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-awards-empty strong { color: var(--ss-brand-900); font-size: 13px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-awards-empty small { color: var(--ss-muted-1); font-size: 11px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-awards-meta {
  display: flex; align-items: center; gap: 10px; margin-top: 9px;
  font-size: 11px; color: var(--ss-muted-1);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-awards-meta .mono { color: var(--ss-text-2); font-weight: 700; }

/* Location summary + toggle + prior release. */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-summary {
  width: 100%;
  border: 1px solid var(--ss-border-2);
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ss-text);
  cursor: pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-text { flex: 1; text-align: left; font-weight: 600; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-chevron { color: var(--ss-muted-1); font-size: 18px; }

:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-toggle-track {
  width: 42px; height: 24px; border-radius: 999px;
  background: var(--ss-muted-4);
  position: relative;
  transition: background 0.15s;
  flex: 0 0 auto;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: left 0.15s;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-toggle-on .ss-toggle-track { background: var(--ss-day-relief); }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-toggle-on .ss-toggle-knob { left: 20px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-toggle-label { font-size: 13px; color: var(--ss-text); font-weight: 600; }

/* Engineer Pickable uses one three-mode segmented control on both surfaces. */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-pickable-choices {
  display:inline-flex; padding:2px; border-radius:9px; background:#EEF1F5;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-pickable-choices button {
  border:0; border-radius:7px; padding:10px 16px; background:transparent;
  color:var(--ss-muted-1); font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-pickable-choices button.is-selected {
  background:#fff; color:var(--ss-accent); box-shadow:0 1px 4px rgba(11,37,64,.12);
}
.ss-overlay-scrim .ss-pickable-choices { display:flex; width:100%; }
.ss-overlay-scrim .ss-pickable-choices button { flex:1 1 0; min-width:0; padding-right:6px; padding-left:6px; }

:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-prior-row { display: flex; gap: 8px; align-items: center; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-prior-input {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--ss-border-2);
  border-radius: 8px;
  background: #fff;
  color: var(--ss-text);
  -webkit-text-fill-color: var(--ss-text);
  padding: 8px 10px;
  font-family: var(--ss-font-mono);
  font-size: 16px;
  line-height: 1.2;
  color-scheme: light;
  cursor: pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-prior-input-set {
  border-color: var(--ss-accent);
  background: #eef6ff;
  color: var(--ss-brand-900);
  -webkit-text-fill-color: var(--ss-brand-900);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-prior-input::-webkit-date-and-time-value {
  color: inherit;
  -webkit-text-fill-color: inherit;
  text-align: left;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-prior-clear {
  flex: 0 0 auto;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-prior-clear:disabled { opacity: 0.4; cursor: default; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-prior-note { font-size: 11px; color: var(--ss-text-4); margin-top: 6px; }

/* SCHED/EFF segmented toggle. */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-schedeff {
  display: inline-flex;
  border: 1px solid var(--ss-border-2);
  border-radius: 8px;
  overflow: hidden;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-se-btn {
  border: 0; background: #fff; padding: 4px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--ss-text-3); cursor: pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-se-on { background: var(--ss-accent); color: #fff; }

/* Shared modern filter range. Crewbook Explorer mounts the same wrapper. */
.lt-range-slider {
  --lt-range-accent: var(--ss-accent, #337ab7);
  --lt-range-line: var(--ss-border-1, #dbe3ec);
  min-width: 0;
  width: 100%;
  padding: 4px 18px 2px;
  overflow: visible;
}
.lt-range-slider > input[type="text"] { visibility: hidden; }
.lt-range-slider:not(.is-ready):not(.is-unavailable)::after {
  content: "";
  display: block;
  min-height: 50px;
}
.lt-range-slider.is-unavailable::after {
  content: "Range unavailable";
  display: block;
  padding: 18px 0 0;
  color: var(--ss-muted-1, #8793a3);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.lt-range-slider .irs--round { width: 100%; margin: 0; }
.lt-range-slider .irs--round .irs-bar { background: var(--lt-range-accent); height: 6px; }
.lt-range-slider .irs--round .irs-line { background: var(--lt-range-line); height: 6px; }
.lt-range-slider .irs--round .irs-handle {
  border: 2px solid var(--lt-range-accent);
  background: #fff;
  width: 18px; height: 18px; top: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.lt-range-slider .irs--round .irs-from,
.lt-range-slider .irs--round .irs-to,
.lt-range-slider .irs--round .irs-single {
  max-width: calc(100% - 4px);
  background: var(--lt-range-accent);
  white-space: nowrap;
}
.lt-range-slider .irs--round .irs-from::before,
.lt-range-slider .irs--round .irs-to::before,
.lt-range-slider .irs--round .irs-single::before {
  border-top-color: var(--lt-range-accent);
}
.ce-browser-shell .lt-range-slider {
  --lt-range-accent: var(--ce-accent, #337ab7);
  --lt-range-line: var(--ce-line, #dbe3ec);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-na-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 14px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ss-text-2);
  cursor: pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-na-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--ss-accent);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-time-mode-note {
  margin: 3px 14px 0;
  color: var(--ss-text-4);
  font-size: 10.5px;
  line-height: 1.35;
}

/* Sticky footer. */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fsheet-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--ss-border-1);
  background: #fff;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-freset {
  flex: 0 0 auto;
  min-height: 42px;
  padding-inline: 16px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-fshow {
  flex: 1;
  border: 0;
  background: var(--ss-accent);
  color: #fff;
  border-radius: 9px;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ── Location modal (bottom-sheet on mobile) ─────────────────────────────── */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-modal {
  background: #fff;
  border-radius: 22px 22px 0 0;
  width: 100%;
  min-width: 0;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  font-family: var(--ss-font-body);
  padding-bottom: 4px;
  overflow-x: hidden;
}
/* App-wide tray-header standard (owner decision 2026-07-17): Location tray head
 * matches the slim Filters padding + 17px display title. */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-modal-head {
  display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 8px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-modal-title {
  font-family: var(--ss-font-disp); font-size: 17px; font-weight: 700; color: var(--ss-brand-900);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-modal-close { border: 0; background: transparent; font-size: 22px; color: var(--ss-muted-1); cursor: pointer; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-allnone { display: flex; gap: 8px; padding: 0 16px 10px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-all,
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-none {
  min-width: 64px;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-search {
  display:flex; align-items:center; gap:8px; margin:0 16px 10px; padding:7px 10px;
  border:1px solid var(--ss-border-2); border-radius:8px; background:#fff; color:var(--ss-muted-1);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-search .material-symbols-outlined { font-size:18px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-search input {
  flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ss-text); font:inherit;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-help {
  display:flex; align-items:flex-start; gap:7px; margin:0 16px 10px; color:var(--ss-muted-1);
  font-size:11px; line-height:1.35;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-help .material-symbols-outlined { flex:0 0 auto; font-size:16px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-includes { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 10px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-inc {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--ss-border-2); background: #fff; border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--ss-text-2); cursor: pointer;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-inc-check {
  width: 16px; height: 16px; border: 1px solid var(--ss-border-2); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ss-accent);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-inc-on { border-color: var(--ss-accent); color: var(--ss-accent); }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-inc-on .ss-loc-inc-check { border-color: var(--ss-accent); }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 0 16px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-locterm {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-width: 0; max-width: 100%;
  border: 1px solid var(--ss-border-2); background: #fff; border-radius: 10px;
  padding: 9px 10px; font-size: 12.5px; font-weight: 600; color: var(--ss-text); cursor: pointer;
  text-align: left;
  touch-action: pan-y;
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-locterm-on {
  background: var(--ss-loc-bg);
  color: var(--ss-loc-fg);
  border-color: var(--ss-loc-bg);
}
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-locterm-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-locterm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-locterm-count { font-size: 11px; color: var(--ss-muted-1); }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-locterm-on .ss-locterm-count { color: inherit; opacity: 0.85; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-locterm-check { font-size: 12px; font-weight: 700; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-empty { grid-column:1 / -1; padding:8px; color:var(--ss-muted-1); font-size:12px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-modal-footer { padding: 8px 16px 12px; }
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-loc-done {
  width: 100%; border: 0; background: var(--ss-accent); color: #fff;
  border-radius: 9px; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* APP-WIDE TRAY-HEADER STANDARD (owner decision 2026-07-17).
 * Every mobile tray/bottom-sheet close action shares one icon-button contract:
 * the SLIM Filters look — a borderless, transparent, muted × that keeps the
 * 44px hit target. The legacy per-tray classes remain in the markup because the
 * controllers delegate dismissal through those selectors; this base rule (which
 * every close carries via `ss-tray-header-close`) removes the old filled grey
 * circle chip so Picks / Hidden Jobs / Sort / Job Details / Location / Column
 * Settings all match the Filters/nav reference without touching their markup. */
.ss-overlay-scrim .ss-tray-header-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ss-muted-1);
  font: 600 20px/1 var(--ss-font-body);
  cursor: pointer;
}
.ss-overlay-scrim .ss-tray-header-close .material-symbols-outlined {
  font-size: 23px;
}
.ss-overlay-scrim .ss-tray-header-close:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 2px;
}

/* ── Column-settings TRAY (mobile) ─────────────────────────────────────────
 * Bottom-sheet frame for the reused buildSettingsContent() panel. The scrim is
 * mounted on <body> (a sibling of #scratch-sheet-app), so these rules are
 * body-level, not scoped, because the overlay is mounted outside the app root. The
 * panel brings its OWN "Column Settings" gradient header + close × + Reset/Save
 * footer; we host it AS the sheet (like the desktop modal) and only reshape it
 * into a rounded-top bottom-sheet. */
.ss-overlay-scrim .ss-columns-sheet {
  background: #fff;
  border-radius: 22px 22px 0 0;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 8px;
  font-family: 'IBM Plex Sans', 'Open Sans', system-ui, sans-serif;
}
.ss-overlay-scrim .ss-columns-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
/* Reshape the reused panel: edge-to-edge, rounded top only, no floating-card
 * box (shed its inline max-width / border-radius / shadow). Header/scroll/footer
 * stay intact. */
.ss-overlay-scrim .ss-columns-body > div {
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: 100%;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: none !important;
  flex: 1 1 auto;
}
.ss-column-settings-head .ss-popover-close-button { color: var(--ss-muted-1); }
/* App-wide tray-header standard (owner decision 2026-07-17): inside the mobile
 * Column Settings tray, shed the reused panel's heavy 2px divider so the head
 * reads as the slim borderless Filters header. Scoped to the overlay tray so
 * the desktop Bootstrap-modal reuse of the same panel keeps its own chrome. The
 * border-bottom is set inline on the header element, so !important is required
 * to beat it. The close × already picks up the shared muted-borderless base. */
.ss-overlay-scrim .ss-columns-sheet .ss-column-settings-head {
  border-bottom: 0 !important;
}

/* ==========================================================================
 * P4 — DESKTOP restyle (spec §C). Redesigned Tabulator cell formatters
 * (`ssg-*` markup from gridFormatters.js), the desktop Your Picks strip, the
 * Location/Reset filter affordance, and the job-details modal.
 *
 * SCOPING: grid formatters are styled ONLY under #data-table so admin tables
 * and every other Tabulator instance are untouched. Chrome is under
 * #scratch-sheet-app. The details modal (appended to <body>) is scoped by its
 * unique .ssg-detail-modal class.
 * ======================================================================== */

/* ── No vertical column dividers (spec §C) ────────────────────────────────
 * #data-table carries Bootstrap's `table table-bordered` classes, so the
 * bootstrap5 Tabulator theme's `.tabulator.table-bordered …` variant draws a
 * grey right-border (#dee2e6) on every header col AND body cell. The redesigned
 * grid is borderless — rows read as tinted bands, not a gridded spreadsheet.
 * We override with the SAME selectors the theme uses, prefixed by the #data-table
 * ID so specificity strictly wins; scoped to #data-table so admin tables keep
 * their dividers. Vendor theme lives in public/css/vendor (synced by
 * syncVendorAssets.js) so we override here rather than edit the generated file. */
#data-table.tabulator.table-bordered,
#data-table.tabulator.table-bordered .tabulator-header .tabulator-col,
#data-table.tabulator.table-bordered .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
  border-right: none;
  border-left: none;
}
/* Fallbacks in case the .table-bordered class is ever dropped from the div or
 * Tabulator hasn't applied .tabulator yet — plain #data-table descendant match. */
#data-table .tabulator-cell,
#data-table .tabulator-header .tabulator-col {
  border-right: none;
  border-left: none;
}

/* ── Pick medallion (rank column) ─────────────────────────────────────── */
#data-table .tabulator-cell[tabulator-field="rank"],
#data-table .tabulator-cell[tabulator-field="hideRow"] {
  text-align:center;
}
:is(#data-table, #ss-unified-grid-root) .ssg-pick-cell {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:32px; vertical-align:middle;
}
:is(#data-table, #ss-unified-grid-root) .ssg-pick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; min-width:30px; flex:0 0 30px; aspect-ratio:1;
  box-sizing:border-box; border-radius: 50%; font-size: 13px; line-height: 1;
  font-family: var(--ss-font-disp); font-weight: 700;
}
:is(#data-table, #ss-unified-grid-root) .ssg-pick-on { background: var(--ss-accent); color: #fff; }
:is(#data-table, #ss-unified-grid-root) .ssg-pick-off {
  border: 1.5px dashed var(--ss-muted-4); background: transparent; color: var(--ss-accent);
}
:is(#data-table, #ss-unified-grid-root) .ssg-pick-off .ssg-pick-plus { font-size: 19px; font-weight: 700; }
:is(#data-table, #ss-unified-grid-root) .ssg-row-grab { display:none; }

/* ── Hide eye button ──────────────────────────────────────────────────── */
:is(#data-table, #ss-unified-grid-root) .ssg-hide-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0 !important; vertical-align:middle;
  border:0 !important; border-radius:0; background:transparent !important;
  box-shadow:none !important; appearance:none; -webkit-appearance:none;
}
:is(#data-table, #ss-unified-grid-root) .ssg-hide-btn .hide-icon { font-size:30px !important; line-height:1; }
:is(#data-table, #ss-unified-grid-root) .ssg-hide-icon {
  display:inline-block; color:#C0455B; font-size:30px; line-height:1;
}
:is(#data-table, #ss-unified-grid-root, .ss-overlay-scrim, .ssg-surface-modal) .ssg-pickable-icon {
  display:inline-block; font-size:22px; font-weight:700; line-height:1;
}
.ssg-pickable-yes { color:#178A4E; }
.ssg-pickable-no { color:#C33D4F; }
#scratch-sheet-app .ssu-grid-cell .ssg-pickable-icon {
  font-size:clamp(7px, calc(22px * var(--ssu-grid-zoom)), 24px);
}

/* The boundary normally lives inside the final picked row so Tabulator's
 * virtual layout keeps it correctly positioned while scrolling. It is lifted
 * into a temporary sibling only during a Sortable drag. */
#data-table .ssg-picks-boundary {
  display:flex; align-items:center; gap:12px; box-sizing:border-box;
  width:100%; min-width:100%; height:36px; padding:6px 12px;
  border-top:1px solid var(--ss-border-1); border-bottom:1px solid var(--ss-border-1);
  background:var(--ss-fill-2); line-height:1; clear:both;
}
#data-table .ssg-picks-boundary-count {
  padding:3px 9px; border-radius:999px; background:var(--ss-accent); color:#fff;
  font:700 10px/1 var(--ss-font-disp); letter-spacing:.06em; white-space:nowrap;
}
#data-table .ssg-picks-boundary-line { height:1px; flex:1 1 auto; background:var(--ss-border-2); }
#data-table .ssg-picks-boundary-remaining {
  color:var(--ss-muted-1); font:700 10px/1 var(--ss-font-disp);
  letter-spacing:.06em; white-space:nowrap;
}

/* ── Job chip (single + split) ────────────────────────────────────────── */
:is(#data-table, #ss-unified-grid-root) .ssg-job-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 3px 8px; border-radius: var(--ss-radius-chip);
  font-family: var(--ss-font-mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 800; white-space: nowrap;
}
/* Banded job chip: the SAME scheduled-terminal chip every job wears, plus the
 * shared .ss-eff-band sawtooth edge band(s) when an effective end differs —
 * uniform footprint across split and non-split rows. */
:is(#data-table, #ss-unified-grid-root) .ssg-job-banded { position: relative; overflow: hidden; }
:is(#data-table, #ss-unified-grid-root) .ssg-job-num { position: relative; z-index: 2; }
/* NOTE: the Job cell (single OR split chip) now keeps the row position/picked
 * tint like every other cell — the opaque pill sits on top. No transparent
 * override; that used to leave effective-differs Job cells untinted. */

/* ── Position / Service chip ──────────────────────────────────────────── */
:is(#data-table, #ss-unified-grid-root) .ssg-pos-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 6px; border-radius: 5px;
  font-family: var(--ss-font-mono); font-size: 12px; font-weight: 700;
}

/* ── SmartPick / Scaled inline design stars (Batch 3) ─────────────────────
 * Same filled/empty tokens the mobile card stars use (--ss-star-filled #F5B301
 * / --ss-star-empty #D8DEE6), scoped to Scratch Sheet grids so admin / other
 * Tabulator instances are untouched. Replaces Tabulator's built-in star SVGs. */
:is(#data-table, #ss-unified-grid-root) .ssg-stars {
  display: inline-flex; line-height: 1; letter-spacing: 1px; white-space: nowrap;
}
:is(#data-table, #ss-unified-grid-root) .ssg-star { font-size: 14px; }
:is(#data-table, #ss-unified-grid-root) .ssg-star-on { color: var(--ss-star-filled); }
:is(#data-table, #ss-unified-grid-root) .ssg-star-off { color: var(--ss-star-empty); }

/* ── Report / Release times ───────────────────────────────────────────── */
:is(#data-table, #ss-unified-grid-root) .ssg-time {
  font-family: var(--ss-font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 14px;
}
:is(#data-table, #ss-unified-grid-root) .ssg-time-report { color: var(--ss-report-green); }
:is(#data-table, #ss-unified-grid-root) .ssg-time-release { color: var(--ss-release-red); }
:is(#data-table, #ss-unified-grid-root) .ssg-eff-badge {
  display: inline-block; margin-left: 3px; padding: 0 3px; border-radius: 3px;
  font-family: var(--ss-font-mono); font-size: 7px; font-weight: 800; line-height: 1.4;
  color: var(--ss-eff-fg); background: var(--ss-eff-bg); vertical-align: middle;
}

/* ── Overtime badge ───────────────────────────────────────────────────── */
:is(#data-table, #ss-unified-grid-root) .ssg-ot-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: var(--ss-radius-pill);
  background: var(--ss-ot-bg);
  color: var(--ss-ot-fg);
  font-family: var(--ss-font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
:is(#data-table, #ss-unified-grid-root) .ssg-ot-meal-icon {
  font-size: 12px;
  line-height: 1;
}
:is(#data-table, #ss-unified-grid-root) .ssg-ot-pill-locked {
  color: var(--ss-text-3);
  background: #F4F7F9;
  border: 1px solid #D8E2EA;
}
:is(#data-table, #ss-unified-grid-root) .ssg-ot-lock {
  font-size: 11px;
}
#scratch-sheet-app #ss-unified-grid-root .ssu-grid-cell .ssg-ot-pill {
  gap: clamp(1px, calc(3px * var(--ssu-grid-zoom)), 3px);
  padding: clamp(1px, calc(2px * var(--ssu-grid-zoom)), 2px)
    clamp(2px, calc(5px * var(--ssu-grid-zoom)), 5px);
  font-size: clamp(6px, calc(10px * var(--ssu-grid-zoom)), 10px);
}
#scratch-sheet-app #ss-unified-grid-root .ssu-grid-cell .ssg-ot-meal-icon {
  font-size: clamp(7px, calc(12px * var(--ssu-grid-zoom)), 12px);
}
#scratch-sheet-app #ss-unified-grid-root .ssu-grid-cell .ssg-ot-lock {
  font-size: clamp(7px, calc(11px * var(--ssu-grid-zoom)), 11px);
}

/* ── Earnings / bands / special ───────────────────────────────────────── */
:is(#data-table, #ss-unified-grid-root) .ssg-earnings {
  font-family: var(--ss-font-disp); font-size:14px; font-weight: 700; color: var(--ss-brand-900);
}
:is(#data-table, #ss-unified-grid-root) .ssg-band {
  font-family: var(--ss-font-mono); font-size:14px; font-variant-numeric: tabular-nums; font-weight: 700;
}
:is(#data-table, #ss-unified-grid-root) .ssg-special {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; color: var(--ss-text-2); font-size: 12px;
}
:is(#data-table, #ss-unified-grid-root) .ssg-special-empty { color: var(--ss-muted-3); }

/* Plain-value columns use the same table face as Job, Position, times and
 * score values. Keep this on the cell (not only a formatter wrapper) so the
 * unified grid and Tabulator fallback render the four fields identically. */
#data-table .tabulator-cell[tabulator-field="shiftLength"],
#data-table .tabulator-cell[tabulator-field="Overtime"],
#data-table .tabulator-cell[tabulator-field="shiftType"],
#data-table .tabulator-cell[tabulator-field="specialInstructions"],
#ss-unified-grid-root .ssu-grid-row .ssu-grid-cell[data-field="shiftLength"],
#ss-unified-grid-root .ssu-grid-row .ssu-grid-cell[data-field="Overtime"],
#ss-unified-grid-root .ssu-grid-row .ssu-grid-cell[data-field="shiftType"],
#ss-unified-grid-root .ssu-grid-row .ssu-grid-cell[data-field="specialInstructions"] {
  font-family: var(--ss-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
}
#data-table .tabulator-cell[tabulator-field="specialInstructions"] :is(.ssg-special, .ssg-special-empty),
#ss-unified-grid-root .ssu-grid-row .ssu-grid-cell[data-field="specialInstructions"] :is(.ssg-special, .ssg-special-empty) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
#scratch-sheet-app #ss-unified-grid-root .ssu-grid-row .ssu-grid-cell:is(
  [data-field="shiftLength"],
  [data-field="Overtime"],
  [data-field="shiftType"],
  [data-field="specialInstructions"]
) {
  font-size: clamp(3px, calc(14px * var(--ssu-grid-zoom)), 16px);
}

/* ── Desktop filter affordance (Location + active count + Reset) ───────── */
#scratch-sheet-app #ssg-filterbar-host {
  align-items:center; gap:8px; margin:0;
}
#scratch-sheet-app .ssg-fbar-loc,
#scratch-sheet-app .ssg-fbar-reset {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--ss-border-2); background: #fff; color: var(--ss-text-2);
  border-radius: 9px; padding: 6px 11px; font-size: 13px; font-weight: 600;
  font-family: var(--ss-font-body);
}
#scratch-sheet-app .ssg-fbar-loc:hover,
#scratch-sheet-app .ssg-fbar-reset:hover { border-color: var(--ss-accent); color: var(--ss-accent); }
#scratch-sheet-app .ssg-fbar-loc-active { border-color: var(--ss-accent); color: var(--ss-accent); }
#scratch-sheet-app .ssg-fbar-loc-count { font-size: 11px; color: var(--ss-muted-1); }
#scratch-sheet-app .ssg-fbar-active {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ss-muted-1);
}
#scratch-sheet-app .ssg-fbar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--ss-accent); color: #fff; font-size: 11px; font-weight: 700;
}

/* ── Desktop day-type buttons: pill restyle (existing DOM kept for the tour) ─ */
#scratch-sheet-app #dayTypeButtons .day-type-btn { border-radius: var(--ss-radius-pill); font-weight: 600; }
#scratch-sheet-app #dayTypeButtons .btn-group > .day-type-btn:not(:first-child) { margin-left: 4px; }

/* ── Shared headerless Scratch dialog frame ──────────────────────────────
 * Bootstrap owns the backdrop/focus; each body renders its own modern surface. */
.ssg-surface-modal {
  /* Bootstrap's outer modal normally becomes the scroll container and then
   * injects inline padding to compensate for its scrollbar. Scratch dialogs
   * already have an inner scroll region, so keep the outer viewport fixed and
   * centered instead of letting that compensation offset the dialog. */
  overflow: hidden !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ssg-surface-modal .modal-dialog {
  width: calc(100% - 32px);
  max-width: 560px;
  /* Bootstrap uses fixed .5rem margins below its sm breakpoint. Combined with
   * the explicit width above, that leaves the unused width on the right. */
  margin-left: auto;
  margin-right: auto;
}
.ssg-surface-modal .modal-content {
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 0;
  border-radius: var(--ss-radius-modal);
  background: var(--ss-card);
  box-shadow: 0 24px 64px rgba(11, 22, 34, 0.28);
}
.ssg-surface-modal .modal-body {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
/* The body is renderDetailSheetHTML(), shared byte-for-byte with mobile. */
.ssg-detail-modal .ss-detail-sheet {
  width: 100%;
  max-height: min(82dvh, 760px);
  padding: 0;
  border-radius: var(--ss-radius-modal);
  font-family: var(--ss-font-body);
}
.ssg-detail-modal .ss-ds-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 0;
}
.ssg-detail-modal .ss-ds-close {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ss-fill-1);
  color: var(--ss-text-4);
  font: 600 20px/1 var(--ss-font-body);
}
.ssg-detail-modal .ss-ds-close:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 2px;
}
.ssg-detail-modal .ss-ds-actions {
  margin-right: 18px;
  margin-left: 18px;
  padding-bottom: 16px;
}

/* Scroll remains fully functional by wheel, touch, trackpad and keyboard, but
 * tray/dialog-owned scrollbars do not consume inline layout width. This keeps
 * centered content from jumping left on systems configured to always show
 * classic scrollbars. Deliberately excludes the table scroll viewport. */
:is(
  .ssg-detail-modal .ss-ds-scroll,
  .ss-overlay-scrim .ss-ds-scroll,
  .ss-overlay-scrim .ss-fsheet-scroll,
  .ss-overlay-scrim .ss-sort-options,
  .ss-overlay-scrim .ss-tray-list,
  .ss-overlay-scrim .ss-restore-list,
  .ss-overlay-scrim .ss-loc-grid,
  .ss-overlay-scrim .ss-column-settings-scroll,
  .ssg-hidden-jobs-scroll,
  .ssg-scratch-modal .ssg-modal-scroll
) {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:is(
  .ssg-detail-modal .ss-ds-scroll,
  .ss-overlay-scrim .ss-ds-scroll,
  .ss-overlay-scrim .ss-fsheet-scroll,
  .ss-overlay-scrim .ss-sort-options,
  .ss-overlay-scrim .ss-tray-list,
  .ss-overlay-scrim .ss-restore-list,
  .ss-overlay-scrim .ss-loc-grid,
  .ss-overlay-scrim .ss-column-settings-scroll,
  .ssg-hidden-jobs-scroll,
  .ssg-scratch-modal .ssg-modal-scroll
)::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ── Generic headerless Scratch dialog content ───────────────────────────
 * Generated HTML receives this compact content-owned heading. Surfaces such as
 * Column Settings and Picks already own their heading and mount
 * directly into the same body-only shell. */
.ssg-scratch-modal .ssg-modal-surface {
  display:flex; flex-direction:column; min-height:0; max-height:min(82dvh, 760px);
  background:var(--ss-card); color:var(--ss-text); font-family:var(--ss-font-body);
}
.ssg-scratch-modal .ssg-modal-head {
  display:flex; align-items:center; gap:14px; flex:0 0 auto; padding:18px 18px 8px;
}
.ssg-scratch-modal .ssg-modal-title {
  min-width:0; flex:1 1 auto; margin:0; color:var(--ss-brand-900);
  font:700 20px/1.2 var(--ss-font-disp);
}
.ssg-scratch-modal .ssg-modal-close {
  display:inline-grid; place-items:center; width:32px; height:32px; min-width:32px;
  padding:0; border:0; border-radius:50%; background:var(--ss-fill-1);
  color:var(--ss-text-4); font:600 20px/1 var(--ss-font-body);
}
.ssg-scratch-modal .ssg-modal-close:focus-visible {
  outline:2px solid var(--ss-accent); outline-offset:2px;
}
.ssg-scratch-modal .ssg-modal-scroll {
  min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:10px 18px 18px;
}

/* Secondary desktop surfaces use centered Scratch dialogs. Their content
 * remains the same content mounted in mobile trays. */
.ssg-scratch-modal:has(.ssg-picks-dialog-body) .modal-dialog { max-width:500px; }
.ssg-scratch-modal .modal-body.ssg-picks-dialog-body { padding:0; }
.ssg-picks-dialog .ss-tray {
  max-height:min(62vh, 620px); border-radius:var(--ss-radius-modal, 16px);
  padding: 12px 16px 18px;
}
.ssg-picks-dialog .ss-tray-head { margin-bottom: 10px; }
.ssg-picks-dialog .ss-tray-close {
  display:grid; place-items:center; width:30px; height:30px; padding:0;
  border-radius:50%; background:#F1F4F8; color:#6A7383; font-size:17px;
}
.ssg-picks-dialog .ss-tray-row { padding: 9px 10px; }
.ssg-picks-dialog .ss-tray-handle { order: 20; margin-left: 2px; }
.ssg-picks-dialog .ss-tray-remove { order: 19; }
.ssg-scratch-modal .ss-column-settings-panel { max-width:none !important; max-height:min(70vh, 680px) !important; }
.ssg-scratch-modal .ss-column-settings-head { border-bottom:1px solid var(--ss-border-1) !important; }
.ssg-scratch-modal .ss-column-settings-head .ss-popover-close-button { color:var(--ss-muted-1); }
/* Detail popups host legacy popup HTML (inline widths); let it flow. */
.ssg-scratch-modal .modal-body.ssg-detailpopup-body img { max-width:100%; height:auto; }
/* ── Column-specific analytical details ─────────────────────────────────
 * SmartPick already uses compact score rows. Probability and Job Quality now
 * share its restrained card, typography, spacing, and score-pill language. */
.ssg-scratch-modal .ss-prob-detail {
  display:flex; flex-direction:column; gap:12px; color:var(--ss-text-2);
  font-size:12px; line-height:1.55;
}
.ssg-scratch-modal .ss-prob-hero {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 14px; border:1px solid var(--ss-border-1); border-radius:12px;
  background:linear-gradient(135deg, var(--ss-fill-2), #fff);
}
.ssg-scratch-modal .ss-prob-hero > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ssg-scratch-modal .ss-detail-eyebrow {
  color:var(--ss-muted-1); font-size:9px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
}
.ssg-scratch-modal .ss-prob-hero strong { color:var(--ss-brand-900); font:700 14px/1.25 var(--ss-font-disp); }
.ssg-scratch-modal .ss-prob-score {
  display:inline-grid; place-items:center; min-width:66px; padding:7px 10px;
  border-radius:999px; background:var(--ss-accent-soft); color:var(--ss-accent-hover);
  font:700 17px/1 var(--ss-font-mono); white-space:nowrap;
}
.ssg-scratch-modal .ss-prob-section {
  padding:12px 14px; border:1px solid var(--ss-border-1); border-radius:12px; background:#fff;
}
.ssg-scratch-modal .ss-prob-section h3 {
  margin:0 0 7px; color:var(--ss-brand-900); font:700 12px/1.3 var(--ss-font-disp);
}
.ssg-scratch-modal .ss-prob-section ul { margin:0; padding-left:18px; }
.ssg-scratch-modal .ss-prob-section li + li { margin-top:6px; }
.ssg-scratch-modal .ss-prob-caption { margin:0 0 7px; color:var(--ss-muted-1); font-size:10px; }
.ssg-scratch-modal .ss-prob-note {
  margin-top:10px; padding:9px 10px; border-radius:9px;
  background:var(--ss-accent-soft); color:var(--ss-text-3); font-size:11px;
}

.ssg-scratch-modal #job-quality-tippy-content .job-quality-popup-content {
  box-sizing:border-box; width:100%; min-width:0; max-width:100%; padding:0; color:var(--ss-text-2);
  font-family:var(--ss-font-body); font-size:12px; line-height:1.5;
}
.ssg-scratch-modal .modal-body.ssg-detailpopup-body,
.ssg-scratch-modal .modal-body.ssg-detailpopup-body .ssg-modal-surface,
.ssg-scratch-modal .modal-body.ssg-detailpopup-body .ssg-modal-scroll,
.ssg-scratch-modal #job-quality-tippy-content {
  box-sizing:border-box; width:100%; min-width:0; max-width:100%; overflow-x:hidden;
}
.ssg-scratch-modal #job-quality-tippy-content .job-quality-popup-content > div:first-child {
  padding:13px 14px; border:1px solid var(--ss-border-1); border-radius:12px;
  background:linear-gradient(135deg, var(--ss-fill-2), #fff);
}
.ssg-scratch-modal #job-quality-tippy-content .job-quality-popup-content > div:first-child strong {
  color:var(--ss-brand-900); font-family:var(--ss-font-disp); font-size:14px !important;
}
.ssg-scratch-modal #job-quality-tippy-content .job-quality-popup-content > div:first-child > span:last-child {
  display:inline-grid; place-items:center; min-width:48px; padding:7px 10px;
  border-radius:999px; background:var(--ss-fill-1); font-family:var(--ss-font-mono);
  font-size:17px !important; line-height:1;
}
.ssg-scratch-modal #job-quality-tippy-content .job-quality-popup-content > hr { display:none; }
.ssg-scratch-modal #job-quality-tippy-content .job-quality-popup-content > div:not(:first-child) {
  margin:12px 0 0 !important; padding:12px 14px; border:1px solid var(--ss-border-1);
  border-radius:12px; background:#fff;
}
.ssg-scratch-modal #job-quality-tippy-content table {
  width:100% !important; max-width:100%; overflow:hidden; border-collapse:separate !important; border-spacing:0;
  border:1px solid var(--ss-border-1); border-radius:10px;
}
.ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table {
  table-layout:fixed;
}
.ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table .jq-train-col { width:17%; }
.ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table .jq-time-col { width:33%; }
.ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table .jq-route-col { width:18%; }
.ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table .jq-score-col { width:16%; }
.ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table.is-engineer .jq-train-col { width:22%; }
.ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table.is-engineer .jq-time-col { width:46%; }
.ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table.is-engineer .jq-route-col { width:32%; }
.ssg-scratch-modal #job-quality-tippy-content th {
  padding:7px 8px !important; border:0 !important; background:var(--ss-fill-2) !important;
  color:var(--ss-muted-1); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
}
.ssg-scratch-modal #job-quality-tippy-content td {
  min-width:0; padding:7px 8px !important; border:0 !important;
  border-top:1px solid var(--ss-border-3) !important; word-break:break-word;
}
.ssg-scratch-modal #job-quality-tippy-content .jq-score-cell span[class^="job-quality-"] {
  display:inline-flex !important; align-items:center; justify-content:center;
  max-width:100%; white-space:nowrap;
}
.ssg-scratch-modal #job-quality-tippy-content .jq-score-cell .material-symbols-outlined {
  flex:0 0 auto; line-height:1;
}
.ssg-scratch-modal #job-quality-tippy-content .jq-inline-note-row > td {
  padding:0 8px 8px !important; border-top:0 !important; word-break:normal;
}
.ssg-scratch-modal #job-quality-tippy-content .jq-inline-note {
  box-sizing:border-box; display:block; width:100%; margin:8px 0 0; padding:9px 10px;
  border:1px solid var(--ss-border-1); border-radius:8px; background:var(--ss-fill-3);
  color:var(--ss-text-3); font-size:11px; line-height:1.55; text-align:left;
  overflow-wrap:break-word; word-break:normal;
}
.ssg-scratch-modal #job-quality-tippy-content button#jobQualitySettingsBtn {
  width:28px; height:28px; justify-content:center; margin-left:6px !important;
  border-radius:50% !important; background:var(--ss-fill-1) !important; color:var(--ss-text-4) !important;
}

/* Job Quality Preferences use the same quiet, content-owned Scratch dialog
 * language as the filter and column surfaces—not the retired gradient Tippy. */
.ssg-scratch-modal .modal-body.ssg-job-quality-settings-body .ssg-modal-surface {
  max-height:min(86dvh, 760px);
}
.ssg-scratch-modal .modal-body.ssg-job-quality-settings-body .ssg-modal-scroll {
  padding:8px 18px 18px;
}
.ss-jq-settings-panel { width:100%; min-width:0; color:var(--ss-text-2); font-family:var(--ss-font-body); }
.ss-jq-settings-content { display:flex; flex-direction:column; gap:12px; }
.ss-jq-settings-section {
  box-sizing:border-box; margin:0 !important; padding:14px !important;
  border:1px solid var(--ss-border-1) !important; border-radius:12px;
  background:var(--ss-fill-3);
}
.ss-jq-settings-section > label:first-child {
  margin-bottom:4px !important; color:var(--ss-brand-900) !important;
  font:700 13px/1.3 var(--ss-font-disp) !important;
}
.ss-jq-settings-section [style*="font-style: italic"] {
  color:var(--ss-muted-1) !important; font-style:normal !important; line-height:1.45;
}
.ss-jq-settings-section [style*="background-color: #f0f7ff"] {
  border:0 !important; border-radius:9px; background:var(--ss-accent-soft) !important;
  color:var(--ss-text-3); line-height:1.45;
}
.ss-jq-settings-save {
  display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:44px;
  margin-top:2px; padding:11px 16px; border:0; border-radius:10px;
  background:var(--ss-accent); color:#fff; font:700 14px/1 var(--ss-font-disp);
  cursor:pointer; transition:background-color .15s ease;
}
.ss-jq-settings-save:hover { background:var(--ss-accent-hover); }
.ss-jq-settings-save:focus-visible { outline:2px solid var(--ss-accent); outline-offset:2px; }

@media (max-width: 600px) {
  .ssg-scratch-modal .ss-prob-hero { align-items:flex-start; }
  .ssg-scratch-modal .modal-body.ssg-detailpopup-body .ssg-modal-head { padding:16px 14px 7px; }
  .ssg-scratch-modal .modal-body.ssg-detailpopup-body .ssg-modal-scroll { padding:8px 14px 16px; }
  .ssg-scratch-modal #job-quality-tippy-content .job-quality-popup-content > div:first-child {
    align-items:flex-start !important; gap:10px; flex-wrap:nowrap !important;
  }
  .ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table .jq-train-col { width:16%; }
  .ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table .jq-time-col { width:35%; }
  .ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table .jq-route-col { width:17%; }
  .ssg-scratch-modal #job-quality-tippy-content .job-quality-train-table .jq-score-col { width:16%; }
  .ssg-scratch-modal #job-quality-tippy-content th,
  .ssg-scratch-modal #job-quality-tippy-content td { padding:6px 4px !important; }
  .ssg-scratch-modal #job-quality-tippy-content .jq-time-cell {
    white-space:normal !important; line-height:1.35;
  }
  .ssg-scratch-modal #job-quality-tippy-content .jq-route-cell { line-height:1.35; }
  .ssg-scratch-modal #job-quality-tippy-content .jq-score-cell span[class^="job-quality-"] {
    padding:2px 4px !important; font-size:.78em !important;
  }
  .ssg-scratch-modal #job-quality-tippy-content .jq-score-cell .material-symbols-outlined {
    display:inline-block; width:13px; margin-right:2px !important;
    font-size:13px !important;
  }
  .ssg-scratch-modal #job-quality-tippy-content .job-quality-popup-content > div:not(:first-child) {
    overflow:hidden;
  }
  .ssg-scratch-modal #job-quality-tippy-content .job-quality-popup-content > div:last-child > div {
    flex-wrap:wrap !important;
  }
  .ssg-scratch-modal .modal-body.ssg-job-quality-settings-body .ssg-modal-head { padding:16px 14px 7px; }
  .ssg-scratch-modal .modal-body.ssg-job-quality-settings-body .ssg-modal-scroll { padding:8px 14px 16px; }
  .ss-jq-settings-section { padding:12px !important; }
}

/* ==========================================================================
 * NO-TIPPY REDESIGN: hide EVERY grid-header popup/menu button at ALL widths.
 * The per-column filter funnels, the SmartPick / Job-Quality settings gears, and
 * the Rank menu_open icon no longer anchor anything (filtering + rank + column +
 * restore all open as toolbar-driven MODALS, and mobile uses the filter tray),
 * so their header buttons are hidden on desktop AND the mobile classic table.
 * The per-row hide button (a cell, not a header button) is unaffected. Scoped to
 * #data-table so admin / other Tabulator instances are untouched.
 * ======================================================================== */
#data-table.tabulator .tabulator-header .tabulator-col .tabulator-header-popup-button,
#data-table.tabulator .tabulator-header .tabulator-col .tabulator-header-menu-button {
  display: none !important;
}

/* ==========================================================================
 * SCRATCH SHEET TABLE CHROME (desktop Tabulator + mobile table option).
 * The grid now uses flat field columns, so the header is one compact row instead
 * of Tabulator's old parent/child grouped header stack.
 * ======================================================================== */
#data-table.tabulator .tabulator-header {
  background: var(--ss-fill-2);
  border-bottom: 2px solid #EEF1F5;
  position: sticky; top: 0; z-index: 3;
}
#data-table.tabulator .tabulator-header .tabulator-col {
  background: var(--ss-fill-2);
  border-right: none;
}
#data-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 8px 2px;
}
#data-table.tabulator .tabulator-header .tabulator-col-group {
  max-height: none; min-height: 0;
}
#data-table.tabulator .tabulator-header .tabulator-col .tabulator-col-title,
#data-table.tabulator .tabulator-header .tabulator-col-group .tabulator-col-title {
  font-family: var(--ss-font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--ss-text-3);
  line-height: 1.25;
}
/* Sort controls are anchored independently from title flow. Every active
 * chevron occupies the same top-right corner on desktop, iPad, and mobile Table
 * mode, while titles retain a small protected inset beneath that corner. */
#data-table.tabulator .tabulator-header .tabulator-col .tabulator-col-title-holder {
  position: relative; display: block; width: 100%;
}
#data-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  width: 100%;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: normal;
  word-break: normal;
  text-overflow: clip !important;
  padding-right: 16px;
}
#data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable {
  cursor: pointer;
}
/* Only the active sort gets a glyph. It is a CSS triangle, not a Unicode arrow,
 * so iOS cannot substitute an emoji or give columns different font metrics. */
#data-table.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter {
  position: absolute; right: 0; top: 0; bottom: auto; width: 10px; height: 10px;
  display: flex; align-items: center; justify-content: center;
}
#data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter::after,
#data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter::after {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  pointer-events: none;
}
#data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter::after {
  border-bottom: 8px solid var(--ss-accent);
}
#data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter::after {
  border-top: 8px solid var(--ss-accent);
}
#data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"],
#data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] {
  box-shadow: inset 0 -2px 0 var(--ss-accent);
}
#data-table.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
  display: none;
}

/* Hide-column restore action: the production green eye, now opening the shared
 * desktop modal or mobile tray instead of Tabulator's legacy header menu. */
#data-table.tabulator .ss-hidden-jobs-header-button {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px; padding: 0; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: #198754; cursor: pointer; appearance: none;
}
#data-table.tabulator .ss-hidden-jobs-header-button:hover {
  color: #12643e;
}
#data-table.tabulator .ss-hidden-jobs-header-button:focus-visible {
  outline: 2px solid #198754; outline-offset: 1px; border-radius: 6px;
}
#data-table.tabulator .ss-hidden-jobs-header-icon {
  font-size: 27px; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
#data-table.tabulator .ss-hidden-jobs-header-count {
  position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; background: #dc3545; color: #fff;
  font: 700 9px/15px var(--ss-font-body); text-align: center;
}
#data-table.tabulator .ss-hidden-jobs-header-count[hidden] {
  display: none;
}
/* SmartPick is one unbroken word; give it a slightly deeper protected corner
 * so the top-right chevron never visually touches the final K. */
#data-table.tabulator .tabulator-col[tabulator-field="Scaled"] .tabulator-col-title {
  padding-right: 24px;
}
#data-table.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
  min-height: 40px;
}
#data-table.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
  font-size: 12.5px;
  padding: 4px 6px !important;
  line-height: 32px;
}

/* ==========================================================================
 * DESKTOP CHROME (spec §C, Batches 1 & 2). Everything below is gated to
 * @media (min-width: 769px) so the mobile table option is still owned by the
 * mobile surfaces. Scoped to
 * #data-table (grid) and #scratch-sheet-app / #ssg-filterbar-host (chrome) so
 * admin/other Tabulator instances and other apps never inherit any of it.
 * ======================================================================== */
@media (min-width: 769px) {
  /* Desktop context controls now live in the filter bar. Keep the legacy Day
   * Type buttons mounted as the state source, but remove their empty strip. */
  #scratch-sheet-app #info-bar-main {
    display: none !important;
  }

  /* Prior Release is already a first-class desktop filter category. Retain the
   * legacy button on mobile, where its existing flow remains available, but do
   * not duplicate it beside the desktop Viewing pills. */
  #scratch-sheet-app #prt-scale-row,
  #scratch-sheet-app #prt-scale-row + .vr {
    display: none !important;
  }


  #scratch-sheet-app #ss-unified-grid-root .ssu-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #scratch-sheet-app #ss-unified-grid-root.ssu-grid-scroll {
    overflow-x: hidden;
    overflow-y: auto;
  }

  #scratch-sheet-app #ss-unified-grid-root .ssu-grid-row .ssu-grid-cell {
    white-space: nowrap;
  }

  /* Shift Length keeps its compact 64px column, but unlike wider headers it
   * cannot afford a permanently reserved sort-icon lane. Let its two complete
   * words use the full header width and pin the active arrow in the corner. */
  #scratch-sheet-app #ss-unified-grid-root .ssu-grid-head-cell[data-field="shiftLength"] .ssu-grid-sort {
    display: flex;
    grid-template-columns: none;
    padding-left: 1px;
    padding-right: 1px;
    line-height: 1.05;
  }
  #scratch-sheet-app #ss-unified-grid-root .ssu-grid-head-cell[data-field="shiftLength"] .ssu-grid-label {
    width: 100%;
  }
  #scratch-sheet-app #ss-unified-grid-root .ssu-grid-head-cell[data-field="shiftLength"] .ssu-grid-sort-icon {
    position: absolute;
    top: 1px;
    right: 0;
  }

  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="shiftLength"] .tabulator-col-title {
    padding-right: 0;
    line-height: 1.05;
  }

  /* Every data row opens an interaction, and individual cells/header controls
   * own specific click actions. Preserve the picked-row grab cursor only in
   * the gaps where no cell action is under the pointer. */
  #scratch-sheet-app #ss-unified-grid-root .ssu-grid-row:not(.ssu-grid-row-picked),
  #scratch-sheet-app #ss-unified-grid-root [data-grid-cell-action],
  #scratch-sheet-app #ss-unified-grid-root .ssu-grid-sort:not(:disabled),
  #scratch-sheet-app #ss-unified-grid-root .ssu-grid-restore,
  #data-table.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell {
    cursor: pointer;
  }

  #ss-unified-grid-root .ssg-row-grab {
    position: static;
    width: clamp(6px, calc(18px * var(--ssu-grid-zoom)), 18px);
    flex: 0 0 clamp(6px, calc(18px * var(--ssu-grid-zoom)), 18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-text-3);
    font-size: clamp(6px, calc(18px * var(--ssu-grid-zoom)), 18px);
    line-height: 1;
    pointer-events: none;
  }
  #ss-unified-grid-root .ssg-pick-cell { column-gap:clamp(2px, calc(4px * var(--ssu-grid-zoom)), 4px); }
  #data-table .ssg-picked-row { cursor:grab; }
  #data-table .ssg-picked-row:active { cursor:grabbing; }
  #data-table .ssg-row-grab {
    position:static; width:18px; flex:0 0 18px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--ss-text-3); font-size:18px; line-height:1;
    pointer-events:none;
  }
  #data-table .ssg-pick-cell { column-gap:4px; }
  #data-table .ssg-picked-row-chosen { box-shadow:0 4px 14px rgba(11,37,64,.16); }
  #data-table .ssg-picked-row-ghost { opacity:.4; }
  #data-table .ssg-picked-row-dragging { cursor:grabbing; }

  /* Keep every desktop chrome row in view. The fixed navbar/context header owns
   * the first offset; the day-count and filter toolbar share
   * this second sticky owner. The table then consumes the remaining viewport,
   * so Tabulator's own header remains pinned above its internally-scrolling rows. */
  #scratch-sheet-app {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  #scratch-sheet-app #ssg-desktop-sticky-stack {
    display: block;
    position: sticky;
    /* #scratch-sheet-app already has padding-top equal to the fixed header.
     * This stack is sticky inside that constrained page box, so top:0 places it
     * directly below the header; adding the header value here would double it. */
    top: 0;
    z-index: 1025;
    width: 100%;
    background: var(--ss-page);
    box-shadow: 0 2px 8px rgba(11, 37, 64, 0.08);
  }
  #scratch-sheet-app #table-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: max(220px, calc(100vh - var(--ss-fixed-header-height, 0px) - var(--ss-desktop-sticky-height, 0px) - var(--lt-bottom-nav-height, 0px)));
    height: max(220px, calc(100dvh - var(--ss-fixed-header-height, 0px) - var(--ss-desktop-sticky-height, 0px) - var(--lt-bottom-nav-height, 0px)));
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }
  #scratch-sheet-app #data-table.tabulator {
    height: 100% !important;
    min-height: 0;
    padding-bottom: 0 !important;
  }

  /* ── Batch 1: sticky header restyle (spec §C: #F7F9FB, 10px UPPERCASE,
   *    letter-spacing .3, #5B6472, weight 700). The header is grouped columns
   *    (parent group title + child field). Override the tall 125px group height
   *    from table.css so the design's compact header reads correctly. ── */
  #data-table.tabulator .tabulator-header {
    background: var(--ss-fill-2);
    border-bottom: 2px solid #EEF1F5;
    position: sticky; top: 0; z-index: 3;
  }
  #data-table.tabulator .tabulator-header .tabulator-col {
    background: var(--ss-fill-2);
    border-right: none;
  }
  #data-table.tabulator .tabulator-header .tabulator-col-group {
    max-height: none; min-height: 0;
  }
  #data-table.tabulator .tabulator-header .tabulator-col .tabulator-col-title,
  #data-table.tabulator .tabulator-header .tabulator-col-group .tabulator-col-title {
    font-family: var(--ss-font-body);
    font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
    text-transform: uppercase; color: var(--ss-text-3);
    line-height: 1.25;
  }
  /* Titles may WRAP; the caret is pinned to the right edge (below), not appended
   * to the text. Reserve right padding so wrapped text clears the caret. */
  #data-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    width: 100%;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: normal;
    word-break: normal;
    text-overflow: clip !important;
    padding-right: 16px;
  }

  /* Active-only, CSS-drawn sort chevron (shared with mobile classic table). */
  #data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter::after,
  #data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter::after {
    content: "";
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    pointer-events: none;
  }
  #data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter::after {
    border-bottom: 8px solid var(--ss-accent);
  }
  #data-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter::after {
    border-top: 8px solid var(--ss-accent);
  }
  /* Tabulator's own sort-arrow glyph is redundant with the caret — hide it. */
  #data-table.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
    display: none;
  }

  /* ── Batch 1: remove the visible per-column FILTER FUNNEL + SETTINGS GEAR
   *    chrome from the header. The underlying icon elements (#<field>HeaderPopupIcon
   *    and #<field>-filter-count) REMAIN in the DOM — the Tippy filter popovers
   *    stay anchored to them and the login-tour target keeps resolving — but they
   *    are hidden here so the header matches the design. Filtering is driven from
   *    the desktop toolbar (Batch 2), which re-opens these same popovers.
   *    NOTE: the hideRow header green-eye "unhide" menu (headerMenuIcon) is NOT a
   *    filter gear — it is the hidden-jobs restore control the tour references —
   *    so it is deliberately left visible. ── */
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="reportTime"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="releaseTime"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="earnings"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="displayedProbability"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="Position"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="Class"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="Pickable"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="shiftType"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="Job"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="SmartPick"] .tabulator-header-popup-button,
  #data-table.tabulator .tabulator-header .tabulator-col[tabulator-field="jobQuality"] .tabulator-header-popup-button {
    /* Keep in the DOM (tour + Tippy anchor) but out of sight/layout. */
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: 0 !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
    opacity: 0 !important; pointer-events: none !important;
    top: 0 !important; left: 0 !important; transform: none !important;
  }

  /* ── Batch 1: row density (spec §C: min-height ~40px, ~12.5px text). ──
   * IMPORTANT: do NOT override `display` on .tabulator-cell — Tabulator lays
   * cells out horizontally with inline-block + explicit widths, and forcing
   * `display:flex` collapses every cell into a single stacked column. Center
   * content vertically with line-height instead, and keep the default display. */
  #data-table.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    min-height: 40px;
  }
  #data-table.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    font-size: 12.5px;
    padding: 4px 6px;
    line-height: 32px;
  }

  /* ── Batch 2: desktop context-bar day-type PILLS (spec §C). The #dayTypeButtons
   *    DOM + .day-type-btn classes are KEPT (login-tour targets #dayTypeButtons);
   *    this is a CSS-only restyle. Active = solid day color; inactive = outline.
   *    Bootstrap .btn-outline-* provide inactive; .active provides the fill. ── */
  #scratch-sheet-app #dayTypeButtons { gap: 4px; }
  #scratch-sheet-app #dayTypeButtons .day-type-btn {
    border-radius: var(--ss-radius-pill);
    border-width: 1.5px;
    padding: 5px 15px;
    font-size: 12px; font-weight: 600;
    font-family: var(--ss-font-body);
  }
  #scratch-sheet-app #dayTypeButtons .btn-group > .day-type-btn:not(:first-child) { margin-left: 4px; }
  /* Regular (blue) */
  #scratch-sheet-app #dayTypeButtons .day-type-btn.btn-outline-primary {
    color: var(--ss-day-reg); border-color: var(--ss-day-reg); background: #fff;
  }
  #scratch-sheet-app #dayTypeButtons .day-type-btn.btn-outline-primary.active,
  #scratch-sheet-app #dayTypeButtons .day-type-btn.btn-primary {
    color: #fff; background: var(--ss-day-reg); border-color: var(--ss-day-reg);
  }
  /* Relief (green) */
  #scratch-sheet-app #dayTypeButtons .day-type-btn.btn-outline-success {
    color: var(--ss-day-relief); border-color: var(--ss-day-relief); background: #fff;
  }
  #scratch-sheet-app #dayTypeButtons .day-type-btn.btn-outline-success.active,
  #scratch-sheet-app #dayTypeButtons .day-type-btn.btn-success {
    color: #fff; background: var(--ss-day-relief); border-color: var(--ss-day-relief);
  }
  /* Holiday (gold) */
  #scratch-sheet-app #dayTypeButtons .day-type-btn.btn-outline-warning {
    color: var(--ss-day-hol); border-color: var(--ss-day-hol); background: #fff;
  }
  #scratch-sheet-app #dayTypeButtons .day-type-btn.btn-outline-warning.active,
  #scratch-sheet-app #dayTypeButtons .day-type-btn.btn-warning {
    color: #fff; background: var(--ss-day-hol); border-color: var(--ss-day-hol);
  }

  /* Craft switching now lives in the desktop utility menu. Keep the original
   * select mounted as the source of truth, but remove its empty context-bar slot. */
  #scratch-sheet-app #currently-viewing-wrapper,
  #scratch-sheet-app #daytype-viewing-row > .vr,
  #scratch-sheet-app #daytype-viewing-row + .vr { display: none !important; }

  /* ── Batch 2: Available / Viewing count chips (spec §C: mono pills). ── */
  #scratch-sheet-app #badges-wrapper {
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
  }
  #scratch-sheet-app #badges-wrapper .job-count-badge .badge {
    border-radius: var(--ss-radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    height: clamp(28px, 2.2vw, 32px); box-sizing: border-box;
    padding: 0 10px; font-size: 11px; font-weight: 400;
    font-family: var(--ss-font-mono); font-variant-numeric: tabular-nums;
  }
  #scratch-sheet-app #badges-wrapper #blue-badge .badge {
    background-color: var(--ss-pos-co-bg) !important; color: var(--ss-pos-co-fg) !important;
  }
  #scratch-sheet-app #badges-wrapper #orange-badge .badge {
    background-color: var(--ss-pos-ac-bg) !important; color: var(--ss-pos-ac-fg) !important;
  }
  #scratch-sheet-app #badges-wrapper #red-badge .badge {
    background-color: var(--ss-pos-tc-bg) !important; color: var(--ss-pos-tc-fg) !important;
  }
  #scratch-sheet-app #badges-wrapper #total-badge-wrapper .badge {
    background-color: #E4F3EA !important; color: var(--ss-day-relief) !important;
  }
  /* ── Batch 2: FULL filter toolbar (#FBFCFD bar). desktopChrome.js renders the
   *    controls into #ssg-filterbar-host; here is its skin. ── */
  #scratch-sheet-app #ssg-filterbar-host {
    display: block;
    width:100%; margin:0; padding:0;
    background: transparent; border: 0;
  }
  #scratch-sheet-app .ssg-fbar-toolbar {
    display:flex; align-items:center; gap:clamp(4px, .4vw, 7px); flex-wrap:nowrap; overflow:hidden;
    width:100%; padding:2px clamp(9px, 1.1vw, 18px); box-sizing:border-box;
    background:#FBFCFD; border:0; border-bottom:1px solid #EEF1F5; border-radius:0;
  }
  #scratch-sheet-app .ssg-fbar-leading {
    display:flex; flex:0 0 auto; align-items:center;
  }
  #scratch-sheet-app .ssg-filter-search {
    display:flex; align-items:center; gap:5px;
    flex:0 1 165px; min-width:120px; height:clamp(28px, 2.2vw, 32px);
    box-sizing:border-box; padding:0 7px;
    border:1px solid var(--ss-border-2); border-radius:8px; background:#fff;
    color:var(--ss-muted-1); transition:border-color .15s ease, box-shadow .15s ease;
  }
  #scratch-sheet-app .ssg-filter-search:focus-within,
  #scratch-sheet-app .ssg-filter-search.is-active { border-color:var(--ss-accent); }
  #scratch-sheet-app .ssg-filter-search:focus-within { box-shadow:0 0 0 3px rgba(51,122,183,.12); }
  #scratch-sheet-app .ssg-filter-search > .material-symbols-outlined { flex:0 0 auto; font-size:15px; }
  #scratch-sheet-app .ssg-filter-search input {
    flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
    color:var(--ss-text-2); font:500 clamp(9px, .68vw, 12px)/1 var(--ss-font-body);
  }
  #scratch-sheet-app .ssg-filter-search input::-webkit-search-cancel-button { display:none; }
  #scratch-sheet-app .ssg-filter-search button {
    display:grid; flex:0 0 auto; place-items:center; width:22px; height:22px; padding:0;
    border:0; border-radius:50%; background:transparent; color:var(--ss-muted-1); cursor:pointer;
  }
  #scratch-sheet-app .ssg-filter-search button:hover { background:var(--ss-accent-soft); color:var(--ss-accent); }
  #scratch-sheet-app .ssg-filter-search button[hidden] { display:none; }
  #scratch-sheet-app .ssg-filter-search button .material-symbols-outlined { font-size:15px; }
  #scratch-sheet-app .ssg-fbar-badges-slot { min-height:clamp(28px, 2.2vw, 32px); }
  #scratch-sheet-app .ssg-fbar-badges-slot #badges-row { margin:0 !important; }
  #scratch-sheet-app .ssg-fbar-badges-slot #badges-wrapper { justify-content:flex-start !important; }
  #scratch-sheet-app .ssg-fbar-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--ss-muted-1); flex-shrink: 0;
  }
  #scratch-sheet-app .ssg-fbar-divider {
    width:1px; height:44px; margin-inline:4px; background:var(--ss-border-1); flex-shrink:0;
  }
  /* Dropdown-trigger + Location + Prior-Release + Reset buttons. */
  #scratch-sheet-app .ssg-fbar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 0 auto; white-space: nowrap;
    gap: clamp(3px, .3vw, 6px);
    height: clamp(28px, 2.2vw, 32px); box-sizing: border-box; padding: 0 clamp(6px, .62vw, 12px);
    border-radius: 8px; border: 1px solid var(--ss-border-2); background: #fff;
    font-size: clamp(9px, .68vw, 12px); font-weight: 600; color: var(--ss-text-3);
    font-family: var(--ss-font-body); cursor: pointer;
  }
  #scratch-sheet-app .ssg-fbar-btn:hover { border-color: var(--ss-accent); color: var(--ss-accent); }
  #scratch-sheet-app .ssg-fbar-btn.ssg-fbar-btn-active { border-color: var(--ss-accent); background: #EAF2FA; color: var(--ss-accent); }
  #scratch-sheet-app .ssg-fbar-daytype-reg { border-color:#9CC5EA; background:#EAF4FC; color:var(--ss-day-reg); }
  #scratch-sheet-app .ssg-fbar-daytype-rlf { border-color:#9ED7B7; background:#ECF8F1; color:var(--ss-day-relief); }
  #scratch-sheet-app .ssg-fbar-daytype-hol { border-color:#E8C978; background:#FFF8E5; color:var(--ss-day-hol); }
  #scratch-sheet-app .ssg-fbar-daytype .ssg-fbar-icon,
  #scratch-sheet-app .ssg-fbar-daytype .ssg-fbar-caret { color:currentColor; }
  #scratch-sheet-app .ssg-fbar-text { white-space: nowrap; }
  #scratch-sheet-app .ssg-fbar-icon { color: var(--ss-muted-1); font-size: clamp(13px, .92vw, 16px); }
  #scratch-sheet-app .ssg-fbar-lock { color: var(--ss-muted-1); font-size: clamp(11px, .8vw, 14px); }
  #scratch-sheet-app .ssg-fbar-caret { color: var(--ss-muted-2); font-size: clamp(12px, .86vw, 15px); }
  #scratch-sheet-app .ssg-fbar-btn:hover .ssg-fbar-icon,
  #scratch-sheet-app .ssg-fbar-btn.ssg-fbar-btn-active .ssg-fbar-icon { color: currentColor; }
  #scratch-sheet-app .ssg-fbar-reset { color: var(--ss-muted-1); margin-left: 0; }
  #scratch-sheet-app .ssg-fbar-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
  /* Prior-release "set" chip + location count chip. */
  #scratch-sheet-app .ssg-fbar-prt-chip {
    font-family: var(--ss-font-mono); font-variant-numeric: tabular-nums;
    background: #E4F3EA; color: var(--ss-day-relief);
    padding: 1px 7px; border-radius: var(--ss-radius-pill); font-weight: 700; font-size: 11px;
  }
  #scratch-sheet-app .ssg-fbar-loc-count {
    font-family: var(--ss-font-mono); font-variant-numeric: tabular-nums;
    font-size: 11px; color: var(--ss-muted-1);
  }
  #scratch-sheet-app .ssg-fbar-btn.ssg-fbar-btn-active .ssg-fbar-loc-count { color: inherit; opacity: 0.85; }

  /* Compact trigger-anchored category surface. It stays fixed so neither the
   * native grid nor an ancestor can clip it; categorySurface.js aligns each
   * category directly beneath the button that opened it. */
  #scratch-sheet-app .ssg-category-scrim {
    position: fixed; inset: 0; z-index: 1090; background: transparent;
  }
  #scratch-sheet-app .ssg-category-surface {
    position: fixed; z-index: 1100; display: flex; flex-direction: column;
    overflow: hidden; background: #fff; border: 1px solid var(--ss-border-2);
    border-radius: 14px; box-shadow: 0 18px 46px -12px rgba(11,37,64,0.36);
  }
  #scratch-sheet-app .ssg-category-scrim[hidden],
  #scratch-sheet-app .ssg-category-surface[hidden],
  #scratch-sheet-app .ssg-cat-panel[hidden],
  #scratch-sheet-app .ssg-overflow-menu[hidden] { display: none !important; }
  #scratch-sheet-app .ssg-category-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--ss-border-1); flex: 0 0 auto;
  }
  #scratch-sheet-app .ssg-category-head > div:first-child { display: flex; align-items: baseline; gap: 9px; }
  #scratch-sheet-app .ssg-category-kicker { color: var(--ss-muted-1); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
  #scratch-sheet-app .ssg-category-head strong { color: var(--ss-brand-900); font-family: var(--ss-font-disp); font-size: 17px; }
  #scratch-sheet-app .ssg-category-head .ssg-cat-visible {
    margin-left: 3px; padding-left: 12px; border-left: 1px solid var(--ss-border-1);
    color: var(--ss-muted-1); font-size: 11px;
  }
  #scratch-sheet-app .ssg-category-head .ssg-cat-visible strong {
    color: var(--ss-brand-900); font-family: var(--ss-font-mono); font-size: 11px;
  }
  #scratch-sheet-app .ssg-category-head button {
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--ss-muted-1);
    font-size: 24px; line-height: 1; cursor: pointer;
  }
  #scratch-sheet-app .ssg-category-head button:hover { background: var(--ss-surface-2, #F3F6F8); color: var(--ss-text); }
  #scratch-sheet-app .ssg-category-head-actions { display: flex; align-items: center; gap: 6px; }
  #scratch-sheet-app .ssg-category-head .ssg-category-head-reset {
    display: inline-flex; align-items: center; gap: 5px; width: auto; height: 30px;
    padding: 0 8px; color: var(--ss-accent); font-size: 11px;
  }
  #scratch-sheet-app .ssg-category-head .ssg-category-head-reset .material-symbols-outlined {
    font-size: 15px; line-height: 1;
  }
  #scratch-sheet-app .ssg-category-head .ssg-category-head-reset[hidden] { display: none !important; }
  #scratch-sheet-app .ssg-category-body { overflow: auto; min-height: 0; padding: 18px; }
  #scratch-sheet-app .ssg-cat-panel { min-width: 0; }
  #scratch-sheet-app .ssg-cat-trigger.is-open { border-color: var(--ss-accent); color: var(--ss-accent); background: #EAF2FA; }
  #scratch-sheet-app .ssg-cat-trigger.is-open .ssg-fbar-caret { transform: rotate(180deg); }
  #scratch-sheet-app .ssg-fbar-caret { transition: transform .16s ease; }
  #scratch-sheet-app .ssg-cat-locked { color: var(--ss-muted-1); }
  #scratch-sheet-app .ssg-panel-lead,
  #scratch-sheet-app .ssg-location-tools,
  #scratch-sheet-app .ssg-range-heading,
  #scratch-sheet-app .ssg-time-block-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  #scratch-sheet-app .ssg-panel-lead > div:first-child,
  #scratch-sheet-app .ssg-range-heading > div:first-child { display: flex; flex-direction: column; gap: 2px; }
  #scratch-sheet-app .ssg-panel-lead strong,
  #scratch-sheet-app .ssg-range-heading strong,
  #scratch-sheet-app .ssg-time-block strong { color: var(--ss-text); font-size: 13px; }
  #scratch-sheet-app .ssg-panel-lead span,
  #scratch-sheet-app .ssg-range-heading span { color: var(--ss-muted-1); font-size: 11px; }
  #scratch-sheet-app .ssg-cat-allnone { display: inline-flex; gap: 5px; }
  #scratch-sheet-app .ssg-cat-reset { flex: 0 0 auto; }
  #scratch-sheet-app .ssg-cat-reset .material-symbols-outlined { font-size: 15px; line-height: 1; }
  #scratch-sheet-app .ssg-panel-actions { display: inline-flex; align-items: center; gap: 6px; }
  #scratch-sheet-app .ssg-filter-chip-grid { display: flex; flex-wrap: wrap; gap: 9px; padding: 20px 0 6px; }
  #scratch-sheet-app .ssg-filter-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
    border: 1px solid var(--ss-border-2); border-radius: 9px; background: #fff;
    color: var(--ss-text-2); font-size: 12px; font-weight: 650; cursor: pointer;
  }
  #scratch-sheet-app .ssg-filter-chip.is-selected { border-color: var(--ss-accent); color: var(--ss-accent); background: #EAF2FA; }
  #scratch-sheet-app .ssg-filter-chip span { min-width: 10px; }
  #scratch-sheet-app .ssg-shift-options {
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px;
  }
  #scratch-sheet-app .ssg-shift-options .ss-shift-option > .ssg-filter-chip {
    width:100%; min-width:0; min-height:44px; justify-content:flex-start; padding:8px 10px;
  }
  #scratch-sheet-app .ssg-shift-options .ss-shift-option:nth-child(3n) .ss-shift-popover { right:0; left:auto; }
  #scratch-sheet-app .ssg-shift-options .ss-shift-option:nth-child(3n) .ss-shift-popover::before { right:11px; left:auto; }
  #scratch-sheet-app .ssg-service-track { margin-top:20px; }
  #scratch-sheet-app .ssg-shift-section + .ssg-shift-section {
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ss-border-1);
  }
  #scratch-sheet-app .ssg-cat-search {
    display: flex; align-items: center; gap: 7px; width: min(360px, 45%); padding: 7px 10px;
    border: 1px solid var(--ss-border-2); border-radius: 9px; background: #fff; color: var(--ss-muted-1);
  }
  #scratch-sheet-app .ssg-cat-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; }
  #scratch-sheet-app .ssg-cat-selected { margin-left: auto; color: var(--ss-muted-1); font-size: 11px; }
  #scratch-sheet-app .ssg-effective-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 0; }
  #scratch-sheet-app .ssg-location-help,
  #scratch-sheet-app .ssg-time-help {
    display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px;
    border-radius: 9px; background: #F4F7FA; color: var(--ss-muted-1);
    font-size: 10.5px; line-height: 1.4;
  }
  #scratch-sheet-app .ssg-location-help { margin-top: 12px; }
  #scratch-sheet-app .ssg-time-help { margin-bottom: 12px; }
  #scratch-sheet-app .ssg-location-help .material-symbols-outlined,
  #scratch-sheet-app .ssg-time-help .material-symbols-outlined { flex: 0 0 auto; color: var(--ss-accent); font-size: 16px; }
  #scratch-sheet-app .ssg-time-help strong { color: var(--ss-text-2); }
  #scratch-sheet-app .ssg-effective-options button {
    display:inline-flex; align-items:center; gap:7px; padding:6px 10px;
    border:1px solid transparent; border-radius:9px; background:#F1F5F9;
    color:var(--ss-text-2); font-size:11px; font-weight:700; cursor:pointer;
  }
  #scratch-sheet-app .ssg-checkbox { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--ss-border-2); border-radius: 4px; font-size: 10px; }
  #scratch-sheet-app .ssg-effective-options button.is-selected {
    background:color-mix(in srgb, var(--ss-accent) 15%, white); color:var(--ss-accent);
    box-shadow:0 1px 2px rgba(15,23,42,.10);
  }
  #scratch-sheet-app .ssg-effective-options button.is-selected .ssg-checkbox { color:#fff; background:var(--ss-accent); border-color:var(--ss-accent); }
  #scratch-sheet-app .ssg-location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  #scratch-sheet-app .ssg-location-token {
    display: grid; grid-template-columns: 10px minmax(0,1fr) auto 12px; align-items: center; gap: 7px;
    padding:8px 10px; border:1px solid rgba(15,23,42,.12); border-radius:9px;
    background:color-mix(in srgb, var(--terminal-bg) 25%, white); color:var(--terminal-fg);
    text-align:left; font-size:11px; font-weight:700; cursor:pointer;
    transition:background .15s ease,color .15s ease,box-shadow .15s ease;
  }
  #scratch-sheet-app .ssg-location-token.is-selected {
    background:var(--terminal-bg); color:var(--terminal-fg); border-color:transparent;
    box-shadow:0 6px 14px rgba(15,23,42,.12);
  }
  #scratch-sheet-app .ssg-location-dot { width:8px; height:8px; border-radius:3px; background:var(--terminal-bg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
  #scratch-sheet-app .ssg-location-token.is-selected .ssg-location-dot { background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
  #scratch-sheet-app .ssg-location-token > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #scratch-sheet-app .ssg-location-token:not(.is-selected) > span:nth-child(2) { color:#8B939D; }
  #scratch-sheet-app .ssg-location-token > .mono {
    padding:1px 6px; border-radius:999px; background:#F1F2F5; color:#AAB0B8;
    font-size:10px; font-weight:800;
  }
  #scratch-sheet-app .ssg-location-token.is-selected > .mono { background:rgba(255,255,255,.24); color:inherit; }
  #scratch-sheet-app .ssg-range-output { padding: 5px 9px; border-radius: 7px; background: #EEF4FA; color: var(--ss-accent); font-size: 12px; font-weight: 700; }
  #scratch-sheet-app .ssg-range-holder { min-height: 72px; padding: 10px 18px 0; }
  #scratch-sheet-app .ssg-na-option {
    display: inline-flex; align-items: center; gap: 8px; margin: 3px 18px 0;
    color: var(--ss-text-2); font-size: 11px; font-weight: 650; cursor: pointer;
  }
  #scratch-sheet-app .ssg-na-option input { width: 16px; height: 16px; accent-color: var(--ss-accent); }
  #scratch-sheet-app .ssg-times-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
  #scratch-sheet-app .ssg-time-block { min-width: 0; padding: 14px; border: 1px solid var(--ss-border-1); border-radius: 11px; background: #FBFCFD; }
  #scratch-sheet-app .ssg-time-block-head > div:first-child { display: flex; flex-direction: column; gap: 3px; }
  #scratch-sheet-app .ssg-time-block output { color: var(--ss-muted-1); font-size: 11px; }
  #scratch-sheet-app .ssg-time-block .irs-grid-text { white-space: nowrap; font-size: 9.5px; }
  #scratch-sheet-app .ssg-segment,
  #scratch-sheet-app .ssg-choice-cards { display: inline-flex; padding: 2px; border-radius: 9px; background: #EEF1F5; }
  #scratch-sheet-app .ssg-segment button,
  #scratch-sheet-app .ssg-choice-cards button {
    border: 0; border-radius: 7px; padding: 6px 10px; background: transparent; color: var(--ss-muted-1); font-size: 10px; font-weight: 700; cursor: pointer;
  }
  #scratch-sheet-app .ssg-segment button.is-selected,
  #scratch-sheet-app .ssg-choice-cards button.is-selected { background: #fff; color: var(--ss-accent); box-shadow: 0 1px 4px rgba(11,37,64,.12); }
  #scratch-sheet-app .ssg-cat-muted { color: var(--ss-muted-1); }
  #scratch-sheet-app .ssg-awards-empty {
    display: flex; align-items: center; gap: 14px; padding: 18px;
    border: 1px solid #D9E6F2; border-radius: 11px; background: #F4F8FC;
  }
  #scratch-sheet-app .ssg-awards-empty .material-symbols-outlined { font-size: 24px; color: var(--ss-muted-1); }
  #scratch-sheet-app .ssg-awards-empty > div { display: flex; flex: 1; flex-direction: column; gap: 3px; }
  #scratch-sheet-app .ssg-awards-empty strong { color: var(--ss-brand-900); font-size: 13px; }
  #scratch-sheet-app .ssg-awards-empty > div > span { color: var(--ss-muted-1); font-size: 11px; }
  #scratch-sheet-app .ssg-awards-meta {
    display: flex; align-items: center; gap: 12px; margin-top: 12px;
    font-size: 11px; color: var(--ss-muted-1);
  }
  #scratch-sheet-app .ssg-awards-meta .mono { color: var(--ss-text-2); font-weight: 700; }
  #scratch-sheet-app .ssg-choice-cards { gap: 3px; }
  #scratch-sheet-app .ssg-choice-cards button { min-width: 130px; padding: 10px 16px; font-size: 12px; }
  #scratch-sheet-app .ssg-prior-layout { display: grid; grid-template-columns: minmax(210px, .65fr) 1.35fr; gap: 24px; align-items: start; }
  #scratch-sheet-app .ssg-prior-layout label { display: block; margin-bottom: 7px; color: var(--ss-text); font-size: 12px; font-weight: 700; }
  #scratch-sheet-app .ssg-prior-control { display: flex; gap: 8px; }
  #scratch-sheet-app .ssg-prior-control input { flex: 1; border: 1px solid var(--ss-border-2); border-radius: 9px; padding: 8px 10px; font-family: var(--ss-font-mono); }
  #scratch-sheet-app .ssg-prior-control button { flex: 0 0 auto; }
  #scratch-sheet-app .ssg-prior-explain { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: #F4F7FA; }
  #scratch-sheet-app .ssg-prior-explain strong { color: var(--ss-brand-900); font-size: 12px; }
  #scratch-sheet-app .ssg-prior-explain span { color: var(--ss-muted-1); font-size: 11px; line-height: 1.45; }
  #scratch-sheet-app .ssg-dst-warning { color: #9A6200 !important; }
  #scratch-sheet-app .ssg-locked-panel { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #D9E6F2; border-radius: 11px; background: #F4F8FC; }
  #scratch-sheet-app .ssg-locked-panel > div { display: flex; flex: 1; flex-direction: column; gap: 3px; }
  #scratch-sheet-app .ssg-locked-panel strong { color: var(--ss-brand-900); font-size: 13px; }
  #scratch-sheet-app .ssg-locked-panel span { color: var(--ss-muted-1); font-size: 11px; }
  #scratch-sheet-app .ssg-locked-panel button { border: 0; border-radius: 8px; padding: 8px 14px; background: var(--ss-brand-900); color: #fff; font-size: 11px; font-weight: 700; }
  #scratch-sheet-app .ssg-overflow-wrap { position: relative; }
  #scratch-sheet-app .ssg-filter-more-wrap[hidden] { display:none !important; }
  #scratch-sheet-app .ssg-filter-more-trigger { min-width:64px; justify-content:center; }
  #scratch-sheet-app .ssg-overflow-trigger { min-width: 34px; justify-content: center; padding: 0 9px; font-weight: 800; letter-spacing: 1px; }
  #scratch-sheet-app .ssg-overflow-menu {
    position: fixed; z-index: 1120; width: 220px; padding: 6px;
    border: 1px solid var(--ss-border-2); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(11,37,64,.18);
  }
  #scratch-sheet-app .ssg-overflow-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ss-text-2); text-align: left; font-size: 12px; }
  #scratch-sheet-app .ssg-overflow-menu button:hover { background: #F1F5F8; color: var(--ss-accent); }
  #scratch-sheet-app .ssg-filter-more-menu .ssg-filter-more-item.is-active { background:#EAF2FA; color:var(--ss-accent); }
  #scratch-sheet-app .ssg-filter-more-menu .ssg-fbar-lock { margin-left:auto; }
  #scratch-sheet-app .ssg-overflow-menu button .material-symbols-outlined { font-size: 17px; }
  #scratch-sheet-app .ssg-overflow-divider { display: block; height: 1px; margin: 5px 3px; background: var(--ss-border-1); }
  #scratch-sheet-app .ssg-overflow-count { margin-left: auto; padding: 1px 6px; border-radius: 999px; background: #EAF2FA; color: var(--ss-accent); font-size: 10px; }
}

/* Preserve a single compact toolbar even on 1024px-class desktop windows.
 * Labels and icons retain their readable floors; spacing gives way first. */
@media (min-width: 769px) and (max-width: 1100px) {
  #scratch-sheet-app .ssg-fbar-toolbar { gap: 3px; padding-inline: 6px; }
  #scratch-sheet-app .ssg-fbar-btn { gap: 2px; padding-inline: 5px; }
  #scratch-sheet-app .ssg-fbar-right { gap: 5px; }
}

/* The desktop filter toolbar host is created for all viewports but must only
 * show on desktop (mobile uses the bottom-sheet). Hide it ≤768px. */
@media (max-width: 768px) {
  #scratch-sheet-app #ssg-filterbar-host { display: none !important; }
}

:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-change-craft > p {
  margin:0 0 14px; color:var(--ss-text-3); font-size:13px; line-height:1.45;
}

/* Shared desktop/mobile Filter Preferences editor. */
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-panel {
  display:flex; flex-direction:column; width:100%; max-width:400px; max-height:min(680px, 82dvh);
  border-radius:16px; background:#fff; color:var(--ss-text-2); font-family:var(--ss-font-body); overflow:hidden;
}
.ss-overlay-scrim .ss-filter-preferences-panel { max-width:none; max-height:82dvh; border-radius:22px 22px 0 0; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-head {
  display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; padding:4px 14px 10px;
  border-bottom:1px solid var(--ss-border-3); background:#fff;
}
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-head > div { display:flex; flex-direction:column; gap:1px; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-head strong { color:var(--ss-brand-900); font:700 17px/1.25 var(--ss-font-disp); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-head span:not(.material-symbols-outlined) { color:var(--ss-muted-1); font-size:11px; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-close { border:0; background:transparent; color:var(--ss-muted-1); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-body {
  min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding:13px 14px; -webkit-overflow-scrolling:touch;
}
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-body > p { margin:0 0 12px; color:var(--ss-muted-1); font-size:12px; line-height:1.45; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-list { display:flex; flex-direction:column; gap:6px; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-item {
  display:grid; grid-template-columns:24px 24px minmax(0, 1fr); align-items:center; gap:8px;
  min-height:44px; padding:7px 10px; border:1px solid var(--ss-border-2); border-radius:10px;
  background:#fff; color:var(--ss-text-2); font-size:13px; font-weight:650;
}
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-handle { color:#8A98A8; cursor:grab; touch-action:none; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-handle:active { cursor:grabbing; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-icon { color:var(--ss-accent); font-size:19px; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-ghost { opacity:.4; background:#EAF2FA; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-drag { box-shadow:0 8px 20px rgba(11,37,64,.18); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-error { margin:10px 0 0 !important; color:#B42318 !important; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-footer {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex:0 0 auto;
  padding:10px 14px max(12px, env(safe-area-inset-bottom)); border-top:1px solid var(--ss-border-3); background:#fff;
}
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-footer button { min-height:38px; border-radius:9px; padding:8px 13px; font-size:12px; font-weight:700; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-reset { border:1px solid var(--ss-border-2); background:#fff; color:var(--ss-text-2); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-save { min-width:92px; border:0; background:var(--ss-brand-900); color:#fff; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-filter-preferences-footer button:disabled { opacity:.55; }
.ssg-filter-preferences-modal-body .modal-header { display:none; }
.ssg-filter-preferences-modal-body { padding:0 !important; }
.ssg-scratch-modal:has(.ssg-filter-preferences-modal-body) .modal-dialog { max-width:400px; }
.ss-filter-preferences-scrim .ss-overlay-content { overflow:hidden; }

:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-dialog > p {
  margin:0 0 14px; color:var(--ss-text-3); font-size:13px; line-height:1.5;
}
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-options { display:grid; gap:9px; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-option {
  display:grid; grid-template-columns:32px minmax(0, 1fr) 24px; align-items:center; gap:10px;
  width:100%; min-height:68px; padding:11px 13px; border:1px solid var(--ss-border-2);
  border-radius:12px; background:var(--ss-card); color:var(--ss-text-2); text-align:left; cursor:pointer;
}
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-option:hover:not(:disabled) { border-color:var(--ss-accent); background:var(--ss-fill-2); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-option.is-selected { border-color:currentColor; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-option:disabled { cursor:default; opacity:1; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-option > .material-symbols-outlined:first-child { font-size:24px; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-option-copy { display:flex; flex-direction:column; gap:3px; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-option-copy strong { font:700 14px/1.2 var(--ss-font-body); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-option-copy small { color:var(--ss-muted-1); font:600 11px/1.2 var(--ss-font-body); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-check { justify-self:end; font-size:20px; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-reg { color:var(--ss-day-reg); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-rlf { color:var(--ss-day-relief); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-hol { color:var(--ss-day-hol); }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-reg.is-selected { background:#EAF4FC; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-rlf.is-selected { background:#ECF8F1; }
:is(.ssg-scratch-modal, .ss-overlay-scrim) .ss-day-type-hol.is-selected { background:#FFF8E5; }

/* The mobile Filters tray keeps Day Type secondary to the actual filters. */
.ss-overlay-scrim .ss-fgroup-daytype { padding-top:8px; padding-bottom:9px; }
.ss-overlay-scrim .ss-day-type-dialog-compact .ss-day-type-options {
  grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px; padding:3px;
  border-radius:10px; background:#EEF1F5;
}
.ss-overlay-scrim .ss-day-type-dialog-compact .ss-day-type-option {
  grid-template-columns:18px minmax(0, auto); justify-content:center; gap:5px;
  min-height:44px; padding:5px 7px; border-color:transparent; border-radius:8px;
  background:transparent; box-shadow:none; text-align:left;
}
.ss-overlay-scrim .ss-day-type-dialog-compact .ss-day-type-option.is-selected {
  border-color:color-mix(in srgb, currentColor 28%, transparent);
  box-shadow:0 1px 3px rgba(11,37,64,.10);
}
.ss-overlay-scrim .ss-day-type-dialog-compact .ss-day-type-option > .material-symbols-outlined:first-child { font-size:18px; }
.ss-overlay-scrim .ss-day-type-dialog-compact .ss-day-type-option-copy { gap:1px; min-width:0; }
.ss-overlay-scrim .ss-day-type-dialog-compact .ss-day-type-option-copy strong { font-size:11px; white-space:nowrap; }
.ss-overlay-scrim .ss-day-type-dialog-compact .ss-day-type-option-copy small { font-size:9px; }
.ss-overlay-scrim .ss-day-type-dialog-compact .ss-day-type-check { display:none; }

/* ========================================================================== 
 * [SS-TRACE] CHROME BANNERS + TOP BAR (redesign spec §B).
 *
 * Subscription and nav selectors stay scoped to #scratch-sheet-app. Managed
 * admin banners deliberately share `.lt-managed-banner` between the Scratch
 * Sheet, launcher, and admin preview so their presentation cannot drift:
 *   1. Go-Pro / trial banner → `#scratch-sheet-app #trial-alert-area .alert`.
 *      createAndShowTrialAlert() (loginUtils.js) ALWAYS renders into the
 *      hardcoded #trial-alert-area, which lives ONLY inside #scratch-sheet-app
 *      (src/index.html). Other screens have NO #trial-alert-area, and the fn
 *      takes no container arg, so it cannot paint anywhere else.
 *   2. Managed banner → `.lt-managed-banner`. displayAlert() emits this unique
 *      class for both #scratch-sheet-app-alert-area and
 *      #launcher-screen-alert-area; the admin preview uses the same markup.
 *   3. Top bar → `#scratch-sheet-app #navbar`. loadNavbar() injects a fresh
 *      navbar into each screen's own .navbar-placeholder; the scratch sheet's
 *      placeholder (#ssa-navbar-placeholder) is INSIDE #scratch-sheet-app, so
 *      #scratch-sheet-app #navbar matches only this screen's navbar. Other
 *      screens' navbars live under #launcher-screen / #profile.
 * ======================================================================== */

/* ── 1a. Subscription banner (free tier: .ss-gopro from loginUtils.js) ───── */
#scratch-sheet-app #trial-alert-area .alert.ss-gopro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(100deg, #0B2540, #2b5f92);
  color: #fff;
  font-family: var(--ss-font-body);
}
/* loginUtils.js wraps the lock/copy/pill in a plain <span> (alertText), then
 * appends .btn-close as a sibling. display:contents dissolves that wrapper so
 * lock | copy | pill | × all become flex items of the .alert row. */
#scratch-sheet-app #trial-alert-area .alert.ss-gopro > span {
  display: contents;
}
#scratch-sheet-app #trial-alert-area .alert.ss-gopro .ss-gopro-lock {
  font-size: 17px;
  line-height: 1;
  flex: 0 0 auto;
}
#scratch-sheet-app #trial-alert-area .alert.ss-gopro .ss-gopro-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#scratch-sheet-app #trial-alert-area .alert.ss-gopro .ss-gopro-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
#scratch-sheet-app #trial-alert-area .alert.ss-gopro .ss-gopro-sub {
  font-size: 11px;
  color: #B7D6F0;
  line-height: 1.3;
}
/* The white subscription pill — this IS the #create-subscription-link anchor. */
#scratch-sheet-app #trial-alert-area .alert.ss-gopro .ss-gopro-pill,
#scratch-sheet-app #trial-alert-area .alert.ss-gopro a#create-subscription-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  padding: 7px 13px;
  background: #fff;
  color: #0B2540;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
#scratch-sheet-app #trial-alert-area .alert.ss-gopro .ss-gopro-pill:hover {
  background: #EAF2FA;
  color: #0B2540;
}
/* Close (×) — white on the navy gradient. Bootstrap's btn-close is a dark
 * SVG mask; invert it to white and lay it out inline (not absolute). */
#scratch-sheet-app #trial-alert-area .alert.ss-gopro .btn-close {
  position: static;
  flex: 0 0 auto;
  padding: 0 2px;
  margin: 0;
  width: 14px;
  height: 14px;
  opacity: 0.6;
  filter: invert(1) grayscale(1) brightness(2.4);
}
#scratch-sheet-app #trial-alert-area .alert.ss-gopro .btn-close:hover { opacity: 1; }

/* ── 1b. Trialing / pastDue states — cleaner themed restyle (spec §B pairs).
 *    Kept warning/danger-themed per task guidance; the inline link becomes a
 *    small themed pill. Markup is the original single-span sentence. ── */
#scratch-sheet-app #trial-alert-area .alert.ss-trial-warn,
#scratch-sheet-app #trial-alert-area .alert.ss-trial-danger {
  margin: 0;
  /* right padding leaves room for the absolutely-positioned .btn-close that
   * Bootstrap's .alert-dismissible places top-right (single-span markup). */
  padding: 9px 38px 9px 14px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0;
  font-family: var(--ss-font-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}
#scratch-sheet-app #trial-alert-area .alert.ss-trial-warn {
  background: #FCF1DD;   /* Warning bg (spec §B) */
  color: #8A5A00;        /* Warning fg */
}
#scratch-sheet-app #trial-alert-area .alert.ss-trial-danger {
  background: #FBE4E4;   /* Danger bg */
  color: #A02A2A;        /* Danger fg */
}
#scratch-sheet-app #trial-alert-area .alert.ss-trial-warn a,
#scratch-sheet-app #trial-alert-area .alert.ss-trial-danger a {
  display: inline-block;
  border-radius: var(--ss-radius-pill);
  padding: 2px 10px;
  margin-left: 2px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}
#scratch-sheet-app #trial-alert-area .alert.ss-trial-warn a { background: #8A5A00; }
#scratch-sheet-app #trial-alert-area .alert.ss-trial-danger a { background: #A02A2A; }
#scratch-sheet-app #trial-alert-area .alert.ss-trial-warn .btn-close,
#scratch-sheet-app #trial-alert-area .alert.ss-trial-danger .btn-close {
  opacity: 0.65;
}

/* ── 2. Managed banner (Scratch Sheet + launcher + admin preview) ──────────
 *    Map Bootstrap alert-* classes → the spec §B themed bg/fg pairs. The base
 *    .alert catch keeps padding/typography consistent for any class. ── */
.alert.lt-managed-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  /* right padding leaves room for Bootstrap's absolutely-positioned .btn-close
   * (displayAlert emits .alert-dismissible single-span markup). */
  padding: 9px 38px 9px 14px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0;
  font-family: var(--ss-font-body, 'IBM Plex Sans', 'Open Sans', system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  /* Neutral default (spec §B) until a themed class narrows it below. */
  background: #EEF1F5;
  color: #3A4453;
}
.alert.lt-managed-banner.alert-info,
.alert.lt-managed-banner.alert-primary {
  background: #E7F3FB; color: #1B4F72;   /* Info */
}
.alert.lt-managed-banner.alert-success {
  background: #E4F3EA; color: #17663C;   /* Success */
}
.alert.lt-managed-banner.alert-warning {
  background: #FCF1DD; color: #8A5A00;   /* Warning */
}
.alert.lt-managed-banner.alert-danger {
  background: #FBE4E4; color: #A02A2A;   /* Danger */
}
.alert.lt-managed-banner.alert-secondary,
.alert.lt-managed-banner.alert-light,
.alert.lt-managed-banner.alert-dark {
  background: #EEF1F5; color: #3A4453;   /* Neutral */
}
.alert.lt-managed-banner .lt-managed-banner-icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}
.alert.lt-managed-banner .lt-managed-banner-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.alert.lt-managed-banner a {
  color: inherit;
  font-weight: 700;
}
.alert.lt-managed-banner .btn-close {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translateY(-50%);
  background-position: center;
  background-size: 12px;
  opacity: 0.65;
}
.alert.lt-managed-banner .btn-close:hover {
  opacity: 1;
}

/* ── 3. App nav (appNav.js) — navy theme on the Scratch Sheet ───────────────
 *    The generic nav (public/css/appNav.css) is light grey/white chrome. On
 *    the Scratch Sheet we repaint it navy (#0B2540) to match this screen's
 *    world: the top brand strip (#navbar) and the mobile bottom tab bar
 *    (.lt-tabbar). The dark-grey logo SVG is inverted to read light. Desktop
 *    dropdown menus stay light popovers so their items remain legible — only
 *    the bar chrome goes dark. The mobile account/apps TRAYS are the shared
 *    .ss-tray Plain Sheet surface (white, like every other Scratch tray), so
 *    they get NO navy override here. All markup lives inside #scratch-sheet-app
 *    while active, so scoping to #scratch-sheet-app narrows every rule here. ── */

/* Top brand strip. */
#scratch-sheet-app #navbar.lt-topbar {
  background: var(--ss-brand-900);              /* #0B2540 */
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
#scratch-sheet-app #navbar .navbar-date {
  font-family: var(--ss-font-disp);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}
/* Dark-grey logo → light so it's visible on navy (CSS-only, no markup swap). */
#scratch-sheet-app #navbar .navbar-logo {
  filter: brightness(0) invert(1);
}
#scratch-sheet-app #navbar .lt-brand:hover { background: rgba(255, 255, 255, 0.08); }

/* Desktop inline items + account identity → light on the dark bar. */
#scratch-sheet-app #navbar .lt-topitem { color: rgba(255, 255, 255, 0.7); }
#scratch-sheet-app #navbar .lt-topitem:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
#scratch-sheet-app #navbar .lt-topitem.active {
  color: #7FB2E5;                               /* sky tint reads as active on navy */
  background: rgba(127, 178, 229, 0.16);
}
#scratch-sheet-app #navbar .lt-account-id .user-display-name { color: #fff; }
#scratch-sheet-app #navbar .lt-account-id .user-email { color: rgba(255, 255, 255, 0.62); }
/* Badge outline ring picks up the navy bar instead of white. */
#scratch-sheet-app #navbar .lt-nav-glyph .lt-nav-badge { border-color: var(--ss-brand-900); }

/* Mobile bottom tab bar → navy. */
#scratch-sheet-app .lt-tabbar {
  background: var(--ss-brand-900);
  border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.3);
}
#scratch-sheet-app .lt-tab { color: rgba(255, 255, 255, 0.62); }
#scratch-sheet-app .lt-tab.active { color: #7FB2E5; }
#scratch-sheet-app .lt-tab.active .lt-nav-glyph { background: rgba(127, 178, 229, 0.16); }
#scratch-sheet-app .lt-tab.active::before { background: #7FB2E5; }
#scratch-sheet-app .lt-tabbar .lt-nav-glyph .lt-nav-badge { border-color: var(--ss-brand-900); }

/* The mobile account/apps trays are the shared white .ss-tray surface (styled
 * generically in this file, ~1459+) — no navy override, matching every other
 * Scratch Sheet tray. */

/* Desktop account dropdown MENU stays a light popover with dark text. */
#scratch-sheet-app #navbar .lt-account-menu.dropdown-menu {
  background: #fff;
  color: var(--ss-text);
}

/* Desktop apps dropdown MENU stays a light popover with dark text (legibility). */
#scratch-sheet-app #navbar .lt-apps-menu.dropdown-menu {
  background: #fff;
  color: var(--ss-text);
}
#scratch-sheet-app #navbar .lt-apps-menu .lt-apps-tile,
#scratch-sheet-app #navbar .lt-apps-menu .lt-apps-tile-name { color: var(--ss-text); }

/* ── Scratch Sheet Help sheet ──────────────────────────────────────────────
 * Static help content, mounted in the desktop modal (#ssScratchModal) and the
 * body-mounted mobile bottom-sheet (.ss-overlay-scrim). Same scope so both
 * surfaces read identically. The mobile sheet gets its flex-column height
 * constraint from the .ss-help-sheet addition to the shared bottom-sheet rule
 * above (same as .ss-filter-sheet/.ss-detail-sheet) — without it the sheet
 * outgrows the viewport and the scroll region never activates. */
:is(#scratch-sheet-app, .ss-overlay-scrim) .ss-help-sheet .ss-fsheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
}
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-section { margin: 0 0 16px; }
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-section:last-child { margin-bottom: 0; }
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-section h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ss-text);
}
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-section p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ss-text-3);
}
/* Live UI samples inside help sections — real terminal chips (colors from the
 * live stations config) and an inert replica of the Cards/Table toggle. */
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-seg {
  display: inline-flex;
  height: 28px;
  border: 1px solid var(--ss-border-2);
  border-radius: 9px;
  overflow: hidden;
  background: var(--ss-card);
}
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-seg-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: var(--ss-text-3);
}
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-seg-btn .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-seg-btn.ss-help-seg-active {
  background: var(--ss-brand-900);
  color: #fff;
}
:is(#ssScratchModal, .ss-overlay-scrim) .ss-help-toggle-note {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ss-text-4);
}

/* ── Card-view nudge — one-time spotlight on the Cards/Table toggle ────────
 * Glow pulses on the segmented control; the callout is body-mounted (floats
 * over the sticky stack) so the --ss-* tokens scoped to #scratch-sheet-app
 * are unavailable — brand hexes are hardcoded to match. */
#scratch-sheet-app .ss-seg.ss-nudge-glow {
  animation: ss-nudge-pulse 1.6s ease-in-out 4;
}
@keyframes ss-nudge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(51, 122, 183, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(51, 122, 183, 0.35); }
}
.ss-onboarding-blocker {
  position: fixed;
  inset: 0;
  z-index: 1079;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.ss-nudge-callout {
  position: fixed;
  z-index: 1080;
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #0B2540;
  color: #fff;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  box-shadow: 0 6px 24px rgba(11, 37, 64, 0.35);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.ss-nudge-callout-interactive {
  pointer-events: auto;
}
.ss-nudge-callout::before {
  content: '';
  position: absolute;
  top: -5px;
  left: var(--ss-nudge-arrow-x, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: #0B2540;
  transform: rotate(45deg);
}
.ss-nudge-callout-in {
  opacity: 1;
  transform: translateY(0);
}
.ss-nudge-callout-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.ss-nudge-callout-body {
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.92;
}
.ss-nudge-callout-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.ss-nudge-callout-dismiss {
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 7px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.ss-nudge-callout-dismiss:hover,
.ss-nudge-callout-dismiss:focus-visible {
  background: rgba(255,255,255,.22);
}
.ss-gesture-nudge-callout {
  max-width: 290px;
}
.ss-gesture-nudge-callout.ss-gesture-nudge-callout-above::before {
  top: auto;
  bottom: -5px;
}
@media (prefers-reduced-motion: reduce) {
  #scratch-sheet-app .ss-seg.ss-nudge-glow {
    animation: none;
    box-shadow: 0 0 0 4px rgba(51, 122, 183, 0.35);
  }
  #scratch-sheet-app .ss-gcard.ss-gesture-demo .ss-card,
  #scratch-sheet-app .ss-gcard.ss-gesture-demo .ss-gunder-pick,
  #scratch-sheet-app .ss-gcard.ss-gesture-demo .ss-gunder-hide {
    animation: none;
  }
  #scratch-sheet-app .ss-gcard.ss-gesture-demo .ss-card {
    box-shadow: 0 0 0 4px rgba(51, 122, 183, 0.28);
  }
  .ss-nudge-callout {
    transition: none;
  }
}

/* ── Pick / hide motion feedback ──────────────────────────────────────────
 * One named View Transition carries the selected job between the available
 * and picked partitions. This works even when a renderer replaces its DOM;
 * browsers without View Transitions use the FLIP fallback in jobMotion.js. */
::view-transition-group(ss-job-motion) {
  z-index: 1200;
  animation-duration: var(--ss-job-motion-duration, 560ms);
  animation-timing-function: cubic-bezier(.18, .82, .2, 1);
}
html.ss-job-motion-up::view-transition-old(ss-job-motion) {
  animation: ss-job-whoosh-old-up var(--ss-job-motion-old-duration, 260ms) ease-in both;
}
html.ss-job-motion-up::view-transition-new(ss-job-motion) {
  animation: ss-job-whoosh-new-up var(--ss-job-motion-new-duration, 440ms) cubic-bezier(.18, .82, .2, 1) both;
}
html.ss-job-motion-down::view-transition-old(ss-job-motion) {
  animation: ss-job-whoosh-old-down var(--ss-job-motion-old-duration, 260ms) ease-in both;
}
html.ss-job-motion-down::view-transition-new(ss-job-motion) {
  animation: ss-job-whoosh-new-down var(--ss-job-motion-new-duration, 440ms) cubic-bezier(.18, .82, .2, 1) both;
}
@keyframes ss-job-whoosh-old-up {
  to { opacity: .12; filter: blur(2px); transform: translateY(-18px) scale(.98); }
}
@keyframes ss-job-whoosh-new-up {
  from { opacity: .25; filter: blur(2px); transform: translateY(24px) scale(.98); }
  78% { opacity: 1; filter: blur(0); transform: translateY(-2px) scale(1.006); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes ss-job-whoosh-old-down {
  to { opacity: .12; filter: blur(2px); transform: translateY(18px) scale(.98); }
}
@keyframes ss-job-whoosh-new-down {
  from { opacity: .25; filter: blur(2px); transform: translateY(-24px) scale(.98); }
  78% { opacity: 1; filter: blur(0); transform: translateY(2px) scale(1.006); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

/* The hide effect is body-mounted and viewport-positioned so it stays aligned
 * with Cards and both Table renderers through scrolling and zoom. */
.ss-job-poof {
  position: fixed;
  z-index: 2000;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ss-job-poof::before {
  content: '';
  position: absolute;
  left: -28px;
  top: -28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0 14%, rgba(192,210,226,.9) 36%, rgba(115,143,168,.42) 62%, transparent 72%);
  opacity: 0;
}
.ss-job-poof.ss-job-poof-active::before {
  animation: ss-job-poof-cloud 380ms cubic-bezier(.2, .72, .3, 1) both;
}
.ss-job-poof > span {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  width: var(--ss-poof-size);
  height: var(--ss-poof-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 16%, #d5e1eb 55%, #91a9bd 100%);
  box-shadow: 0 2px 5px rgba(11, 37, 64, .18);
  opacity: 0;
}
.ss-job-poof.ss-job-poof-active > span {
  animation: ss-job-poof-particle 430ms cubic-bezier(.2, .68, .25, 1) var(--ss-poof-delay) both;
}
@keyframes ss-job-poof-cloud {
  0% { opacity: 0; transform: scale(.2) rotate(-8deg); }
  34% { opacity: 1; transform: scale(1.25) rotate(3deg); }
  100% { opacity: 0; transform: scale(1.7) rotate(8deg); }
}
@keyframes ss-job-poof-particle {
  0% { opacity: 0; transform: translate(0, 0) scale(.35); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ss-poof-x), var(--ss-poof-y)) scale(.75); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(ss-job-motion),
  ::view-transition-old(ss-job-motion),
  ::view-transition-new(ss-job-motion),
  .ss-job-poof::before,
  .ss-job-poof > span {
    animation: none !important;
  }
}