/* The one right panel. Every sheet from modal(), every Shell.drawer and the Schedule Times panel share one box and one
   head. The box rules apply from 1440 up; the head rules apply at every width so a phone sheet has the same head. */

/* ---- head, all widths: 64px band, title 16px/24px on its centre line, 36px Close at the right, Back at the left ---- */
html.ops-navy #modal-root .modal {
  padding-top: 0 !important;
}
html.ops-navy #modal-root .modal > h2 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  margin: 0 0 8px !important;
  padding: 0 48px 0 0 !important;
  font: 700 16px/24px var(--dp5-font, Inter, system-ui, sans-serif) !important;
  overflow-wrap: anywhere;
}
html.ops-navy #modal-root .modal > h2 svg { flex: none; width: 20px; height: 20px; }
html.ops-navy #modal-root .modal > .mclose {
  position: absolute !important;
  top: 14px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
}
html.ops-navy #modal-root .modal > .mback {
  position: absolute !important;
  top: 14px !important;
  left: 12px !important;
  right: auto !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: none !important;
  color: var(--nv-text-2, var(--ops-text-secondary));
  font-size: 0 !important;
  cursor: pointer;
  z-index: 3;
}
html.ops-navy #modal-root .modal > .mback:hover { color: var(--nv-text, var(--ops-text-primary)); background: var(--hover, var(--ops-hover-wash)) !important; text-decoration: none; }
html.ops-navy #modal-root .modal > .mback:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px currentColor; }
html.ops-navy #modal-root .modal > .mback svg { width: 20px; height: 20px; }
html.ops-navy #modal-root .modal.has-back > h2 { padding-left: calc(56px - var(--mpad-x, 24px)) !important; }

/* ---- Shell.drawer head, all widths ---- */
html.ops-navy .sh-drawer .sh-dh {
  box-sizing: border-box;
  height: 64px;
  padding: 0 12px 0 24px;
  gap: 10px;
}
html.ops-navy .sh-drawer .sh-dh h2 { font: 700 16px/24px var(--dp5-font, Inter, system-ui, sans-serif); }
html.ops-navy .sh-drawer .sh-dh .sh-ct { font-size: 13px; line-height: 24px; font-weight: 600; }
html.ops-navy .sh-drawer .sh-dh .sh-ib { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; margin-left: auto; }

/* ---- task panel head: 64px band with the title on its centre line, Close at the left, a rule under it ---- */
html.ops-navy body .tc-head {
  position: relative;
  box-sizing: border-box;
  padding: 0 16px 12px 56px;
}
html.ops-navy body .tc-head .tc-close {
  position: absolute;
  top: 14px;
  left: 12px;
  right: auto;
  z-index: 2;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  border-radius: 8px;
}
html.ops-navy body .tc-head .tc-title {
  box-sizing: border-box;
  width: calc(100% + 72px);
  min-height: 64px;
  margin: 0 -16px 0 -56px;
  padding: 20px 16px 20px 56px;
  border-radius: 0;
  box-shadow: 0 1px 0 var(--ops-line-default);
  font: 700 16px/24px var(--dp5-font, Inter, system-ui, sans-serif);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html.ops-navy body .tc-head > .tc-in-line,
html.ops-navy body .tc-head > .tc-sub { margin: 12px 0 0 -36px; }

/* ---- the rule under every head ---- */
html.ops-navy #modal-root .modal::before {
  content: "";
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ops-line-default);
  pointer-events: none;
}
html.ops-navy .sh-drawer .sh-dh:has(> [data-sh-close]) { padding-left: 12px; }
html.ops-navy .sh-drawer .sh-dh { box-shadow: inset 0 -1px 0 var(--ops-line-default); }

/* ---- the box, desktop ---- */
@media (min-width: 1440px) {
  html.ops-navy { --sh-drawer-w: var(--pv-side-w); }
  html.ops-navy body #modal-root .overlay {
    position: fixed !important;
    top: var(--sh-top) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: var(--pv-side-w) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }
  html.ops-navy body #modal-root .overlay > .modal {
    --mpad-x: 24px;
    --mpad-y: 32px;
    box-sizing: border-box;
    pointer-events: auto;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 24px 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--fr-side) !important;
    overflow-y: auto;
  }
  /* Achieved: the panel scrolls, the list does not cap itself, so it runs to the panel bottom. */
  html.ops-navy body #modal-root .ach { max-height: none !important; overflow: visible !important; }
  html.ops-navy .sh-drawer {
    top: var(--sh-top);
    width: var(--pv-side-w);
    max-width: 100vw;
    background: var(--fr-side);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- one colour, one left edge: every right panel is --fr-side with a 1px rule where it meets the page ---- */
@media (min-width: 1440px) {
  html.ops-navy body #pv-side,
  html.ops-navy body #season-inspector {
    --pv-panel: var(--fr-side);
    background: var(--fr-side) !important;
    border: 0 !important;
    box-shadow: inset 1px 0 0 var(--line) !important;
  }
  html.ops-navy body #modal-root .overlay > .modal,
  html.ops-navy body .sh-drawer { box-shadow: inset 1px 0 0 var(--line) !important; }
  html.ops-navy body #pv-side :is(.pv-sh, .pp-sh, .tg-sh) { background: transparent; }
}

/* ---- same inset and same field fill in every right panel ---- */
@media (min-width: 1440px) {
  html.ops-navy body .sh-drawer .sh-db:has(> .tg-panel) { padding-left: 0; padding-right: 0; }
}
html.ops-navy body :is(#modal-root .overlay > .modal, .sh-drawer, #pv-side) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
  background-color: var(--field) !important;
}

/* ---- a detail panel never covers the page's own head tools or the right end of its rows ---- */
@media (min-width: 1440px) {
  html.ops-navy body.restyle[data-view="inbox"]:has(#pv-side > .ib-side[data-ib-open]) #view > .ib-main,
  html.ops-navy body.restyle[data-view="links"]:has(#pv-side > .lk-side[data-lk-open]) #view > .lk-main { padding-right: 0; }
}

/* Links: the tab row under the title row. One tab per group; the selected tab is a white fill with dark text (same recipe
   as the Open / All control in the Inbox), the others a filled dark chip. Wraps to more lines on desktop, scrolls
   sideways on the phone. */
html.ops-navy .lk-tabs {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--pv-div);
}
html.ops-navy .lk-tabs .lk-tab {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--pv-raised);
  color: var(--pv-t2);
  font: 600 13px/1 var(--pv-font);
  white-space: nowrap;
  cursor: pointer;
}
html.ops-navy .lk-main.is-bar .lk-tabs { padding: 24px 24px 0; border-bottom: 0; }
html.ops-navy .lk-tabs .lk-tab:hover { color: var(--pv-t1); }
html.ops-navy .lk-tabs .lk-tab[aria-selected="true"] {
  background: var(--ops-selected-bg);
  color: var(--ops-selected-text);
}
html.ops-navy .lk-tabs .lk-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
}
@media (max-width: 1439.98px) {
  html.ops-navy .lk-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html.ops-navy .lk-tabs::-webkit-scrollbar { display: none; }
  html.ops-navy .lk-tabs .lk-tab { flex: none; height: 44px; }
  html.ops-navy .lk-main.is-bar .lk-tabs { padding: 16px 24px 0; }
}

/* Notes editor: one box, the formatted text on top, a toolbar along the bottom edge. Field fill, one hairline, 8px corners,
   focus = an inset 1.5px line. Headings use the app's existing type sizes and colours. */
.ne-box { position: relative; display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid var(--ops-line-default, var(--line)); border-radius: 8px; background: var(--ops-bg-field, var(--field)); overflow: hidden; }
.ne-box:focus-within { box-shadow: inset 0 0 0 1.5px var(--ops-focus, var(--t1)); }
.ne-edit { box-sizing: border-box; color: var(--ops-text-primary, var(--t1)); font: 400 15px/22px var(--dp5-font, Inter, system-ui, sans-serif); word-break: break-word; }
.ne-edit { position: relative; min-height: 120px; max-height: 360px; overflow-y: auto; padding: 10px 12px; outline: none; }
.ne-edit.ne-empty::before { content: attr(data-placeholder); position: absolute; left: 12px; top: 10px; right: 12px; color: var(--ops-text-placeholder, var(--t2)); pointer-events: none; }
.ne-edit p { margin: 0 0 8px; }
.ne-edit h2 { margin: 0 0 6px; font: 600 18px/24px var(--dp5-font, Inter, system-ui, sans-serif); }
.ne-edit h3 { margin: 0 0 6px; font: 600 16px/22px var(--dp5-font, Inter, system-ui, sans-serif); }
.ne-edit h4 { margin: 0 0 4px; font: 600 15px/22px var(--dp5-font, Inter, system-ui, sans-serif); }
.ne-edit ul, .ne-edit ol { margin: 0 0 8px; padding-left: 22px; }
.ne-edit li { margin: 0; padding-left: 2px; }
.ne-edit li.ne-task { list-style: none; margin-left: -22px; padding-left: 0; }
.ne-edit li.ne-task input { width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--ops-text-primary, var(--t1)); cursor: pointer; }
.ne-edit li.ne-task:has(input:checked) { color: var(--ops-text-secondary, var(--t2)); text-decoration: line-through; }
.ne-edit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ne-edit strong { font-weight: 700; }
.ne-tb { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 4px 6px; border-top: 1px solid var(--ops-line-default, var(--line)); background: var(--ops-bg-sunken, var(--field)); overflow-x: auto; }
.ne-b { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ops-text-secondary, var(--t2)); cursor: pointer; }
.ne-b:hover { color: var(--ops-text-primary, var(--t1)); }
.ne-b:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus, var(--t1)); }
.ne-b .ne-i { display: block; }
.ne-ask { display: flex; align-items: center; gap: 8px; padding: 6px; border-top: 1px solid var(--ops-line-default, var(--line)); background: var(--ops-bg-field, var(--field)); }
.ne-ask[hidden] { display: none; }
.ne-ask .ne-in { flex: 1 1 auto; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--ops-line-strong, var(--line)); border-radius: 6px; background: var(--ops-bg-field, var(--field)); color: var(--ops-text-primary, var(--t1)); font: 400 15px/22px var(--dp5-font, Inter, system-ui, sans-serif); outline: none; }
.ne-ask .ne-in:focus { box-shadow: inset 0 0 0 1.5px var(--ops-focus, var(--t1)); }
.ne-ask-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--ops-text-secondary, var(--t2)); font: 600 14px/20px var(--dp5-font, Inter, system-ui, sans-serif); cursor: pointer; }
.ne-ask-ok { flex: 0 0 auto; height: 32px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--ops-accent-link, var(--t1)); font: 600 14px/20px var(--dp5-font, Inter, system-ui, sans-serif); cursor: pointer; }

/* The capture sheet and the window-wide drop target. Existing tokens only. */
#modal-root .cap { display: grid; gap: 16px; }
#modal-root .cap .cap-row { display: grid; gap: 8px; }
#modal-root .cap label { display: block; margin-bottom: 6px; }
#modal-root .cap .cap-row > label { margin-bottom: 0; }

#modal-root .cap-drop {
  display: grid; gap: 6px; padding: 12px 14px;
  border: 1px dashed var(--ops-line-strong, var(--line)); border-radius: 8px; color: var(--ops-text-secondary, var(--t2));
}
#modal-root .cap-drop.over { border-color: var(--ops-accent-primary, var(--green)); border-style: solid; background: var(--ops-bg-sunken, var(--field)); }
#modal-root .cap-drop small { color: var(--ops-text-tertiary, var(--t3)); font-size: 12px; line-height: 16px; }
#modal-root .cap-drop-line { font-size: 14px; line-height: 20px; }

#modal-root .cap-word {
  display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#modal-root .cap-word:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus, var(--t1)); }

#modal-root .cap-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#modal-root .cap-files:empty { display: none; }
#modal-root .cap-files li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
#modal-root .cap-fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-root .cap-err { color: var(--ops-status-bad, var(--red)); font-size: 13px; line-height: 18px; }
#modal-root .cap-err:empty { display: none; }

#modal-root .cap-sub { display: grid; gap: 8px; }
#modal-root .cap-sub:empty { display: none; }
#modal-root .cap-pair { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#modal-root .cap-pair .cap-inl { margin: 0; }
#modal-root .cap-hint { color: var(--ops-text-tertiary, var(--t3)); font-size: 13px; line-height: 18px; }
#modal-root .cap-hint:empty { display: none; }
#modal-root .cap [hidden] { display: none !important; }

#modal-root .cap-lab { color: var(--ops-text-on-category, var(--ink)); border-radius: 4px; }
#modal-root .cap-lab i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--lab, currentColor); }
#modal-root .cap-newlabel { display: grid; gap: 8px; }
#modal-root .cap-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
#modal-root .cap-sw { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--sw); cursor: pointer; }
#modal-root .cap-sw.on { box-shadow: inset 0 0 0 2px var(--ops-bg-surface, var(--raised)), 0 0 0 2px var(--sw); }
#modal-root .cap-sw:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px currentColor; }

#modal-root .cap-more { display: grid; gap: 12px; }
#modal-root .cap-more > div { margin-top: 12px; }

.cap-veil {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; pointer-events: none;
  background: var(--ops-scrim, var(--dp5-scrim)); color: var(--ops-text-primary, var(--t1));
}
.cap-veil span {
  padding: 24px 40px; border: 2px dashed currentColor; border-radius: 8px; font-size: 20px; line-height: 28px; font-weight: 700;
}

/* Cancel and Save stay at the foot of the sheet; the body scrolls above them. */
#modal-root .cap-sheet .cap > .mact {
  position: sticky; bottom: 0; z-index: 2; margin-top: 4px; padding: 12px 0;
  background: var(--ops-bg-surface, var(--panel));
}

/* The Schedule task panel and the week and month strips. Colours are the existing tokens only. */

/* ---- the panel: the right-panel plane beside the calendar, head on the page-title line ---- */
.st-row, .st-chip { --cc: var(--ops-category-grey, var(--c-none)); }
.st-row.k-get, .st-chip.k-get { --cc: var(--ops-category-green, var(--c-get)); }
.st-row.k-serve, .st-chip.k-serve { --cc: var(--ops-category-blue, var(--c-serve)); }
.st-row.k-ops, .st-chip.k-ops { --cc: var(--ops-category-purple, var(--c-ops)); }
.st-row.k-growth, .st-chip.k-growth { --cc: var(--ops-category-pink, var(--c-growth)); }
.st-row.k-none, .st-chip.k-none { --cc: var(--ops-category-grey, var(--c-none)); }

html.ops-navy body .st-panel { display: none; }
@media (min-width: 1440px) {
  html.ops-navy.s2-tk body:has(#view > .s2) #toolbar { padding-right: calc(var(--pv-side-w) + var(--sh-pad, 16px)); }
  html.ops-navy.s2-tk #toolbar .s2-words { display: none; }
}
/* With the panel open below 1800px the title row gives up the Filter word and some slack so nothing overlaps. */
@media (min-width: 1440px) and (max-width: 1799.98px) {
  html.ops-navy.s2-tk #toolbar .s2-filter span { display: none; }
  html.ops-navy.s2-tk #toolbar .s2-filter { padding: 0 8px; }
  html.ops-navy.s2-tk #toolbar .s2-title { min-width: 0; }
  html.ops-navy.s2-tk #toolbar .s2-tb2 { gap: 6px; }
}
@media (min-width: 1440px) {
  html.ops-navy body .st-panel {
    position: fixed;
    top: var(--sh-top, 0px);
    right: 0;
    bottom: 0;
    z-index: 36;
    box-sizing: border-box;
    width: var(--pv-side-w);
    display: flex;
    flex-direction: column;
    background: var(--ops-bg-panel, var(--fr-side));
    box-shadow: inset 1px 0 0 var(--ops-line-default);
    color: var(--ops-text-primary, var(--t1));
    font-family: var(--dp5-font, Inter, system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
  }
}
.st-panel button, .st-dr button { font: inherit; color: inherit; }
.st-panel button:focus-visible, .st-dr button:focus-visible, .st-row:focus-visible, .st-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus, var(--t1)); }
.st-head { flex: none; box-sizing: border-box; height: 64px; box-shadow: inset 0 -1px 0 var(--ops-line-default); display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.st-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ops-text-secondary, var(--t2)); cursor: pointer; }
.st-x:hover { background: var(--ops-hover-wash); color: var(--ops-text-primary, var(--t1)); }
.st-head h2 { margin: 0; font: 700 16px/24px var(--dp5-font, Inter, system-ui, sans-serif); color: var(--ops-text-primary, var(--t1)); }
.st-ct { font-size: 13px; line-height: 24px; font-weight: 600; color: var(--ops-text-secondary, var(--t2)); }

.st-ctl { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 24px 12px; }
.st-show { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--ops-line-strong, var(--line)); border-radius: 6px; background: var(--ops-bg-surface, transparent); color: var(--ops-text-primary, var(--t1)); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; }
.st-show:hover { background: var(--ops-bg-surface-hover, var(--hover)); }
.st-sort { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ops-text-secondary, var(--t2)); }
.st-sort select { height: 32px; min-width: 120px; max-width: 150px; display: inline-flex; align-items: center; box-sizing: border-box; padding-block: 0; line-height: 18px; }

.st-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 24px; }
.st-bh { box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 20px 0 24px; border: 0; background: transparent; font-size: 14px; line-height: 20px; font-weight: 600; text-align: left; cursor: pointer; }
.st-bh:hover { background: var(--ops-bg-surface-hover, var(--hover)); }
.st-bw { min-width: 0; }
.st-n { flex: none; min-width: 22px; height: 20px; box-sizing: border-box; padding: 0 6px; border-radius: 4px; background: var(--ops-hover-wash); font-size: 12px; line-height: 20px; font-weight: 600; text-align: center; color: var(--ops-text-primary, var(--t1)); }
.st-chev { margin-left: auto; flex: none; display: grid; place-items: center; color: var(--ops-text-secondary, var(--t2)); }
.st-box:not(.open) .st-chev .st-i { transform: rotate(-90deg); }
.st-rows { padding: 2px 16px 8px 20px; }
.st-empty { padding: 4px 4px 8px; font-size: 14px; line-height: 20px; color: var(--ops-text-tertiary, var(--t3)); }
.st-empty.st-none { padding: 8px 24px; }

.st-row { position: relative; display: flex; align-items: flex-start; gap: 4px; min-height: 44px; margin: 0 0 8px; padding: 8px 8px 8px 4px; box-sizing: border-box; background: var(--ops-bg-surface, var(--raised)); border: 1px solid var(--ops-line-default, var(--line)); border-left: 3px solid var(--cc); border-radius: 4px; cursor: pointer; text-align: left; user-select: none; -webkit-user-select: none; }
.st-row:hover { background: var(--ops-bg-surface-hover, var(--cardh)); }
.st-row[data-sdrag] { cursor: grab; }
.st-row.dragging { opacity: .45; }
.st-row.st-before::before, .st-row.st-after::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ops-text-primary, var(--t1)); }
.st-row.st-before::before { top: -6px; }
.st-row.st-after::after { bottom: -6px; }
.st-row.done .st-tn { color: var(--ops-text-secondary, var(--t2)); text-decoration: line-through; }
.st-row.s2-ghost { margin: 0; }
.st-tx { flex: 1; min-width: 0; padding-top: 1px; display: block; }
.st-tn { display: block; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.st-tm { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; line-height: 18px; color: var(--ops-text-secondary, var(--t2)); }
.st-tm .st-sep { white-space: pre; }
.st-dw.late { color: var(--ops-status-bad, var(--danger)); font-weight: 600; }
.st-iw { color: var(--ops-text-primary, var(--t1)); font-weight: 600; }
.st-dots { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.st-ld { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lc, var(--ops-category-grey, var(--c-none))); }
.st-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Show: checkbox popover ---- */
.st-pop { max-height: min(600px, calc(100vh - 120px)); overflow-y: auto; }
.st-pop .st-pi { gap: 10px; }
.st-cx { flex: none; width: 18px; height: 18px; box-sizing: border-box; display: grid; place-items: center; border: 1.5px solid var(--ops-line-strong, var(--line)); border-radius: 4px; color: var(--ops-accent-on-primary, var(--ink)); }
.st-cx.on { background: var(--ops-accent-primary, var(--green)); border-color: var(--ops-accent-primary, var(--green)); }
.st-pop .st-ld { width: 10px; height: 10px; }

/* ---- week and month strips ---- */
.st-strip { flex: none; display: flex; align-items: flex-start; gap: 12px; box-sizing: border-box; padding: 8px 16px; background: var(--ops-bg-panel, var(--fr-side)); border-bottom: 1px solid var(--ops-line-default, var(--line)); }
.s2-stripw > .st-strip { border-bottom: 0; }
.s2-stripw > .s2-strip + .st-strip { border-top: 1px solid var(--ops-line-default, var(--line)); }
.st-sl { flex: none; font-size: 13px; line-height: 28px; font-weight: 600; color: var(--ops-text-secondary, var(--t2)); white-space: nowrap; }
.st-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 96px; overflow-y: auto; }
.st-chip { display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; max-width: 100%; min-height: 28px; padding: 0 10px 0 2px; background: var(--ops-bg-surface, var(--raised)); border: 1px solid var(--ops-line-default, var(--line)); border-left: 3px solid var(--cc); border-radius: 4px; font-size: 13px; line-height: 18px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.st-chip:hover { background: var(--ops-bg-surface-hover, var(--cardh)); }
.st-chip[data-sdrag] { cursor: grab; }
.st-chip.dragging { opacity: .45; }
.st-chip.fade { opacity: .35; }
.st-chip.done .st-cn { color: var(--ops-text-secondary, var(--t2)); text-decoration: line-through; }
.st-chip .s2-cb { width: 24px; height: 24px; margin: 0; }
.st-chip .v-cb { margin: 0; }
.st-cn { min-width: 0; overflow-wrap: anywhere; }
.st-chip.s2-ghost { margin: 0; }
.s2-phone > .st-strip { flex-direction: column; gap: 4px; padding: 8px 12px; }
.s2-phone .st-sl { line-height: 24px; }
.v-month > .st-strip { position: relative; }

#toolbar .s2-tasks-b[aria-pressed="true"] { background: var(--ops-bg-surface-press, var(--edge)); }

/* ---- phone: the same list in the drawer ---- */
.sh-drawer.st-dr .sh-db { padding: 0; }
.st-dr .st-ctl { padding: 12px 16px; }
.st-dr .st-body { flex: none; overflow: visible; padding-bottom: 24px; }
.st-dr .st-bh { padding: 0 16px; }
.st-dr .st-rows { padding: 2px 16px 8px; }
.st-dr .st-row { min-height: 48px; }
.st-dr .st-sort select { max-width: 160px; }

/* Right panels from 1440 up: closed until something is picked, over the page with the veil, Close at the top left. */

/* Side panel head at every width: 64px band, Close first at 12px, title 16px/24px on the centre line, a rule under it. */
html.ops-navy body #pv-side :is(.pv-sh, .pp-sh) {
  box-sizing: border-box;
  min-height: 64px;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 12px;
  box-shadow: inset 0 -1px 0 var(--ops-line-default);
}
html.ops-navy body #pv-side :is(.pv-sh, .pp-sh) h2 { font: 700 16px/24px var(--dp5-font, Inter, system-ui, sans-serif); }
html.ops-navy body #pv-side .pv-sh > div:first-child { position: relative; min-width: 0; }
html.ops-navy body #pv-side .pv-sh > div:first-child > p { position: absolute; left: 0; top: 100%; margin: 0; font-size: 13px; line-height: 20px; white-space: nowrap; }
html.ops-navy body #pv-side .pp-side[data-pp-side="task"] > .pp-sh { align-items: flex-start; padding-top: 16px; padding-bottom: 16px; }
html.ops-navy body #pv-side .pp-side[data-pp-side] .pp-sh textarea.pp-task-name {
  box-sizing: border-box;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 6px;
  background-color: transparent !important;
  box-shadow: none;
  font: 700 16px/24px var(--dp5-font, Inter, system-ui, sans-serif);
  resize: none;
  overflow: hidden;
  field-sizing: fixed;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html.ops-navy body #pv-side .pp-sh h2.pp-task-name { margin: 0; padding: 4px 8px; overflow-wrap: anywhere; }
html.ops-navy body #pv-side .pp-side[data-pp-side] .pp-sh textarea.pp-task-name:hover { background-color: var(--ops-hover-wash) !important; }
html.ops-navy body #pv-side .pp-side[data-pp-side="task"] > .pp-sh > .pp-x { align-self: flex-start; margin-top: -2px; }
html.ops-navy body #pv-side .pp-side[data-pp-side] .pp-sh textarea.pp-task-name:focus { outline: none; background-color: transparent !important; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy body #pv-side select.pp-input.dpt-field { height: 40px; background-color: var(--dp5-canvas); font-size: 14px; }
@media (max-width: 767px) {
  html.ops-navy body #pv-side select.pp-input.dpt-field { height: 44px; font-size: 16px; }
  html.ops-navy body #pv-side .pp-side[data-pp-side="task"] > .pp-sh > .pp-x { margin-top: -6px; }
}

/* Close first, at the left, at every width. */
html.ops-navy #pv-side .pv-sh > .pv-ib[aria-label^="Close"],
html.ops-navy .pp-sh > .pp-x,
html.ops-navy .sh-dh > [data-sh-close],
html.ops-navy .tg-ph > .tg-x { order: -1; margin-left: 0 !important; }
html.ops-navy .tg-ph > .tg-x { margin-left: -10px !important; }
html.ops-navy #modal-root .modal:not(:has(> .mback)) > .mclose { left: 12px !important; right: auto !important; }
html.ops-navy #modal-root .modal:not(:has(> .mback)):has(> .mclose) > h2 { padding: 0 0 0 34px !important; }
html.ops-navy #modal-root .modal:has(> .mback) > .mclose { left: 52px !important; right: auto !important; }
html.ops-navy #modal-root .modal:has(> .mback):has(> .mclose) > h2 { padding: 0 0 0 74px !important; }


@media (min-width: 1440px) {
  html.ops-navy body[data-view="friday"]:has(#view > .fr-main) .shell { right: 0; }
  html.ops-navy body[data-view="friday"] #pv-side { display: none !important; }

  html.ops-navy body[data-view="projects"]:has(#view > .pp) .shell { right: 0; }
  html.ops-navy body[data-view="projects"]:has(#view > .pp) #pv-side:has(> .pp-side) {
    top: var(--sh-top, 0px);
    right: 0;
    bottom: 0;
    border-radius: 0;
    background: var(--ops-bg-panel);
    box-shadow: inset 1px 0 0 var(--ops-line-default);
    z-index: 41;
  }
  html.ops-navy body[data-view="projects"]:has(#view > .pp) #pv-side:not(:has(> .pp-side:is([data-pp-side="task"], [data-pp-notes-on]))) { display: none; }
  html.ops-navy body:is(
    [data-view="projects"]:has(#view > .pp):has(#pv-side > .pp-side:is([data-pp-side="task"], [data-pp-notes-on])),
    [data-view="inbox"]:has(#pv-side > .ib-side[data-ib-open]),
    [data-view="links"]:has(#pv-side > .lk-side[data-lk-open])
  )::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background: linear-gradient(to right, var(--ops-veil-far), var(--ops-veil-near));
    animation: ops-veil-in 220ms ease-out;
  }



}

.pr-root { box-sizing: border-box; min-height: 100%; padding: var(--sh-pad, 24px) var(--sh-pad, 24px) 64px; color: var(--ops-text-primary); font: 400 14px/20px "InterVar", Inter, system-ui, sans-serif; font-feature-settings: "tnum" 1; }
.pr-root *, .pr-root *::before, .pr-root *::after { box-sizing: border-box; }
.pr-root button { font: inherit; color: inherit; }
.pr-root :focus-visible, #toolbar .pr-acts :focus-visible, .sh-pop .pr-np :focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }

.pr-ph { display: flex; align-items: flex-start; gap: 16px; min-height: 64px; margin-bottom: 20px; }
.pr-id { flex: 1; min-width: 0; }
.pr-t { margin: 0; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
.pr-s { margin-top: 4px; min-height: 20px; font-size: 14px; line-height: 20px; color: var(--ops-text-tertiary); }
.pr-r { display: flex; align-items: center; gap: 16px; padding-top: 2px; }

#toolbar .pr-acts { display: flex; align-items: center; gap: 16px; margin-left: 8px; }
.pr-root .act, .sh-pop .pr-np .act, #toolbar .pr-acts .act {
  padding: 0; border: 0; background: none;
  color: var(--ops-text-secondary); font-size: 14px; line-height: 20px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap;
}
.pr-root .act:hover, .sh-pop .pr-np .act:hover, #toolbar .pr-acts .act:hover { color: var(--ops-text-primary); }

.pr-card { min-width: 0; background: var(--ops-bg-surface); border: 1px solid var(--ops-line-default); border-radius: 8px; box-shadow: var(--ops-shadow-card); }
.pr-lbl { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ops-text-tertiary); }
.pr-big { margin-top: 2px; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; color: var(--ops-text-primary); }
.pr-big .pr-of { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ops-text-tertiary); }
.pr-sub { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ops-text-secondary); }
.pr-cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-u { white-space: nowrap; }
.pr-good { color: var(--ops-status-good); }
.pr-warn { color: var(--ops-status-warn); }
.pr-bad { color: var(--ops-status-bad); }
.pr-meta { color: var(--ops-text-tertiary); }
.pr-track { display: block; flex: none; width: 120px; height: 6px; border-radius: 2px; background: var(--ops-bg-sunken); overflow: hidden; }
.pr-track > i { display: block; height: 100%; border-radius: 2px; background: var(--c, var(--ops-status-good)); }

.pr-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pr-n { display: flex; flex-direction: column; padding: 16px 20px; }
.pr-nb { margin-top: auto; padding-top: 10px; }
.pr-nb .pr-track { width: 100%; }

.pr-blocks { display: flex; flex-direction: column; gap: 16px; }
.pr-box { position: relative; overflow: hidden; }
.pr-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.pr-k-get { --c: var(--ops-bucket-get); }
.pr-k-serve { --c: var(--ops-bucket-serve); }
.pr-k-ops { --c: var(--ops-bucket-ops); }
.pr-k-grow { --c: var(--ops-bucket-grow); }
.pr-k-none { --c: var(--ops-bucket-none); }
.pr-bh { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; }
.pr-bt { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ops-text-primary); }
.pr-bt small { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--ops-text-tertiary); }
.pr-tot { margin-left: auto; font-size: 13px; line-height: 18px; white-space: nowrap; }
.pr-empty { padding: 12px 16px; border-top: 1px solid var(--ops-line-default); }

.pr-th, .pr-row {
  display: grid; align-items: center; column-gap: 12px; padding: 0 16px;
  grid-template-columns: minmax(0, 3fr) 68px minmax(80px, 0.6fr) 88px minmax(188px, 1fr) minmax(146px, 0.9fr) minmax(72px, 0.5fr);
}
.pr-th {
  min-height: 32px; border-top: 1px solid var(--ops-line-default);
  font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ops-text-tertiary);
}
.pr-row {
  width: 100%; min-height: 52px; padding-top: 8px; padding-bottom: 8px; border: 0; border-top: 1px solid var(--ops-line-row); border-radius: 0;
  background: none; text-align: left; cursor: pointer;
}
.pr-th + .pr-row { border-top-color: var(--ops-line-default); }
.pr-row:hover { background: var(--ops-bg-surface-hover); }
.pr-row:active { background: var(--ops-bg-surface-press); }
.pr-nm {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 14px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere;
}
.pr-own { display: flex; align-items: center; gap: 4px; width: 68px; font-size: 13px; line-height: 18px; white-space: nowrap; }
.pr-av {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--p); color: var(--ops-text-on-category); font-size: 12px; font-weight: 700; line-height: 1;
}
.pr-p-jon { --p: var(--ops-person-jon); }
.pr-p-kendra { --p: var(--ops-person-kendra); }
.pr-p-staff { --p: var(--ops-person-staff); }
.pr-lane { font-size: 14px; line-height: 20px; color: var(--ops-text-secondary); }
.pr-hl { width: 88px; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.pr-pg { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 13px; line-height: 18px; white-space: nowrap; }
.pr-dt, .pr-nx { font-size: 13px; line-height: 18px; white-space: nowrap; }
.pr-nx { color: var(--ops-text-secondary); }
.pr-nx.pr-bad { color: var(--ops-status-bad); }
.pr-nx.pr-meta { color: var(--ops-text-tertiary); }
.pr-more { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-top: 1px solid var(--ops-line-default); }
.pr-err { padding: 16px 0; color: var(--ops-text-secondary); }

@media (max-width: 1419px) and (min-width: 1260px) {
  .pr-th, .pr-row { grid-template-columns: minmax(0, 3fr) 68px minmax(80px, 0.6fr) 88px minmax(188px, 1fr) minmax(72px, 0.5fr); }
  .pr-th .pr-h-dt, .pr-row .pr-dt { display: none; }
}
@media (max-width: 1100px) {
  .pr-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1259px) {
  .pr-th { display: none; }
  .pr-row {
    grid-template-columns: 64px 60px minmax(0, 1fr) auto;
    grid-template-areas: "nm nm nm hl" "ln own pg pg";
    column-gap: 12px; row-gap: 0; height: 44px; min-height: 44px; padding: 3px 16px; overflow: hidden;
  }
  .pr-row .pr-nm { grid-area: nm; -webkit-line-clamp: 1; }
  .pr-row .pr-hl { grid-area: hl; width: auto; text-align: right; }
  .pr-row .pr-lane { grid-area: ln; font-size: 13px; line-height: 18px; }
  .pr-row .pr-own { grid-area: own; width: 60px; line-height: 18px; }
  .pr-row .pr-pg { grid-area: pg; justify-content: flex-end; }
  .pr-row .pr-pg .pr-track { width: 96px; }
  .pr-row .pr-pg .pr-cnt { flex: none; width: 56px; text-align: right; }
  .pr-row .pr-dt, .pr-row .pr-nx { display: none; }
}
@media (max-width: 767px) {
  .pr-root { padding-top: 16px; padding-left: 16px; padding-right: 16px; }
  .pr-id { display: contents; }
  .pr-t { grid-column: 1; grid-row: 1; }
  .pr-s { grid-column: 1 / -1; grid-row: 2; }
  .pr-r { grid-column: 2; grid-row: 1; align-self: center; margin: -7px 0; gap: 0; padding-top: 0; }
  .pr-root .act { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
  .pr-nums { gap: 12px; margin-bottom: 12px; }
  .pr-n { padding: 16px 12px; }
  .pr-blocks { gap: 12px; }
  .pr-more { min-height: 56px; }
}

.sh-pop .pr-np { display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.sh-pop .pr-nl { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ops-text-secondary); }
.sh-pop .pr-nl.pr-meta { color: var(--ops-text-tertiary); }
.sh-pop .pr-ni { height: 36px; padding: 0 10px; border: 1px solid var(--ops-line-default); border-radius: 6px; background: var(--ops-bg-field); color: var(--ops-text-primary); font: 400 16px/22px "InterVar", Inter, system-ui, sans-serif; }
.sh-pop .pr-ni::placeholder { color: var(--ops-text-placeholder); }
.sh-pop .pr-create { align-self: flex-end; height: 36px; }