/* The menu's project rows: the bucket colour each row and dot wears, keyboard focus, the open project. */
html.ops-navy .pv-cat-get { --cat: var(--pv-c-get); }
html.ops-navy .pv-cat-serve { --cat: var(--pv-c-serve); }
html.ops-navy .pv-cat-ops { --cat: var(--pv-c-ops); }
html.ops-navy .pv-cat-grow { --cat: var(--pv-c-grow); }
html.ops-navy .pv-cat-none { --cat: var(--pv-c-none); }

html.ops-navy #pv-nav-projects button:focus-visible {
  outline: none;
  box-shadow: var(--pv-focus);
}

@media (min-width: 1440px) {
  html.ops-navy body.gated #pv-side { display: none; }
}
html.ops-navy #pv-nav-projects .pv-pj.is-here {
  background: var(--pv-raised);
  color: var(--pv-t1);
  font-weight: 600;
}
html.ops-navy #pv-nav-projects .pv-pj.is-here b { color: var(--pv-t2); }

/* Status colours and the attention dot (Red = danger, Yellow = warning, Green = on track).
   Shared by Projects (folders), Metrics and the menu. Colour never stands alone: the mark always sits beside its word.
   Two shapes that must never be confused:
     .st-mark  a 10px rounded SQUARE before the status word (at risk / warning / on track / parked / done)
     .att-dot  an 8px CIRCLE at the end of a row or the top-right of a tile: something is due or a comment is unread
   Loads after plan.css so the tokens sit on the same html.ops-navy scope. */
html.ops-navy {
  --st-ok: var(--ops-status-good);
  --st-warn: var(--ops-status-warn);
  --st-risk: var(--ops-status-bad);
  --st-park: var(--ops-text-tertiary);
  --att: var(--ops-status-bad);
}

html.ops-navy .st { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
html.ops-navy .st-mark { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--st-park); }
html.ops-navy .st.is-on_track { color: var(--st-ok); }
html.ops-navy .st.is-warning { color: var(--st-warn); }
html.ops-navy .st.is-at_risk { color: var(--st-risk); }
html.ops-navy .st.is-parked,
html.ops-navy .st.is-done { color: var(--pv-t3); }
html.ops-navy .st.is-on_track .st-mark { background: var(--st-ok); }
html.ops-navy .st.is-warning .st-mark { background: var(--st-warn); }
html.ops-navy .st.is-at_risk .st-mark { background: var(--st-risk); }

/* A 3px status rail on the left edge of a tile (tiles already carry the white 30% line). */
html.ops-navy .st-rail { box-shadow: inset 3px 0 0 var(--st-rail, transparent); }
html.ops-navy .st-rail.is-on_track { --st-rail: var(--st-ok); }
html.ops-navy .st-rail.is-warning { --st-rail: var(--st-warn); }
html.ops-navy .st-rail.is-at_risk { --st-rail: var(--st-risk); }

/* The attention dot. Its space is always reserved (visibility, not display), so a dot arriving never moves text. */
html.ops-navy .att-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--att); visibility: hidden; }
html.ops-navy .att-dot.is-on { visibility: visible; }

/* The notes bullet in plan.css belongs to notes lists only. These lists have their own marks, so that bullet is turned off. */
html.ops-navy .pv-sec :is(.pv-comments, .tx-list) > li { padding-left: 0; }
html.ops-navy .pv-sec :is(.pv-comments, .tx-list) > li::before { content: none; }
html.ops-navy .st.is-none { color: var(--pv-t3); }

html.ops-navy .ib-ta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--pv-r);
  background: none;
  color: var(--pv-t1);
  font: 600 13px/1.2 var(--pv-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
html.ops-navy .ib-ta:hover { background: var(--pv-raised); color: var(--pv-t1); }
html.ops-navy .ib-ta.is-quiet { color: var(--pv-t2); }
html.ops-navy .ib-ta.is-quiet:hover { color: var(--pv-t1); }
html.ops-navy .ib-ta:disabled,
html.ops-navy .ib-ta:disabled:hover { background: none; color: var(--pv-t3); cursor: default; }
html.ops-navy .ib-ta svg { flex: none; }
html.ops-navy .ib-ta .ib-plus { display: inline-grid; color: var(--pv-good); }
/* Doubled .ops-navy: the kit focus base is (0,4,0) and would otherwise win (and turn a focused <a> green). */
html.ops-navy.ops-navy :is(.ib-ta, .os-x):focus-visible { outline: none; box-shadow: var(--pv-focus); color: var(--pv-t1); text-decoration: none; }
html.ops-navy.ops-navy .ib-row:focus-visible { outline: none; box-shadow: none; background: var(--pv-raised2); }
html.ops-navy .ib-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (min-width: 1440px) {
  html.ops-navy header.topbar #search-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: -6px 0 10px;
    padding: 0 10px;
    flex: none;
    border: 0;
    border-radius: var(--pv-r);
    background: transparent;
    box-shadow: none;
    color: var(--pv-t3);
    font: 500 15px/1.2 var(--pv-font);
    text-align: left;
    cursor: pointer;
  }
  html.ops-navy header.topbar #search-btn:hover { color: var(--pv-t1); background: transparent; }
  html.ops-navy header.topbar #search-btn .tab-ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
  html.ops-navy header.topbar #search-btn .sb-kbd {
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--pv-t3);
    font: 400 13px/18px var(--pv-font);
    white-space: nowrap;
  }
  html.ops-navy header.topbar #search-btn:hover .sb-kbd { color: var(--pv-t2); }

  html.ops-navy header.topbar #tabs #inbox-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pv-t2);
    font: 600 13px/1 var(--pv-font);
    font-variant-numeric: tabular-nums;
  }
  html.ops-navy header.topbar #tabs #inbox-count::after {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--att, var(--ops-status-bad));
  }
  html.ops-navy header.topbar #tabs button.active #inbox-count { color: var(--pv-t1); }
}
html.ops-navy body.gated #search-btn,
html.ops-navy body.gated #inbox-btn { display: none !important; }
@media (min-width: 1440px) {
  html.ops-navy #inbox-btn { display: none !important; }
}

@media (max-width: 1439.98px) {
  /* Links lives in search and Inbox in the top row on the phone: the bar is Today, Plan, Add, Projects, Metrics, so Add
     sits in the middle. */
  html.ops-navy header.topbar #tabs button[data-view="links"],
  html.ops-navy header.topbar #tabs button[data-view="inbox"] { display: none !important; }
  html.ops-navy header.topbar #inbox-btn {
    pointer-events: auto;
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 56px;
    z-index: 35;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--pv-r);
    background: transparent;
    box-shadow: none;
    color: var(--pv-t2);
    cursor: pointer;
  }
  html.ops-navy header.topbar #inbox-btn[hidden] { display: none; }
  html.ops-navy header.topbar #inbox-btn .tab-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  html.ops-navy header.topbar #inbox-btn .att-dot { position: absolute; top: 9px; right: 8px; }
  html.ops-navy header.topbar #inbox-btn:hover,
  html.ops-navy header.topbar #inbox-btn.is-here { color: var(--pv-t1); }
  html.ops-navy header.topbar #inbox-btn.is-here .tab-ic { stroke: var(--pv-good); }
  html.ops-navy header.topbar #inbox-btn:focus-visible { outline: none; box-shadow: var(--pv-focus); }
  html.ops-navy header.topbar #tabs button[data-view="inbox"] { position: relative; }
  /* The phone bar has no room for a number: the attention dot at the icon's top-right corner. */
  html.ops-navy header.topbar #tabs #inbox-count {
    position: absolute;
    top: 7px;
    left: calc(50% + 6px);
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: var(--att, var(--ops-status-bad));
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }

  /* Search is the phone's top row: a search bar with the account button beside it, on every screen. The row has
     its own space (the screen starts under it), so it never sits on a view's own buttons. */
  html.ops-navy body:not(.gated) .shell { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
  html.ops-navy header.topbar #search-btn {
    pointer-events: auto;
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 16px;   /* the same 16px edge as the title, the toolbar rows and the grid */
    right: 104px;
    z-index: 35;
    width: auto;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: var(--pv-r);
    background: var(--pv-raised);
    box-shadow: inset 0 0 0 1px var(--pv-edge);
    color: var(--pv-t3);
    font: 400 15px/1.2 var(--pv-font);
    text-align: left;
  }
  html.ops-navy header.topbar #search-btn .tab-ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; }
  html.ops-navy header.topbar #search-btn .sb-kbd { display: none; }
  /* The bar owns the notch, so the account button does not sit over the headers. */
  html.ops-navy body:not(.gated) .shell > .hdr { padding-top: 8px; padding-right: 16px; }
}

@media (min-width: 1440px) {
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]):not(.gated) #view:has(> :is(.ib-main, .lk-main)) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]) #pv-side:has(> :is(.ib-side, .lk-side)) {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 12px;
    bottom: 12px;
    right: 12px;
    width: var(--pv-side-w);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--pv-panel);
    border-radius: var(--pv-r);
    box-shadow: inset 0 0 0 1px var(--ops-line-default);
    z-index: 2;
  }
  html.ops-navy #pv-side > :is(.ib-side, .lk-side) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]):has(#pv-side > :is(.ib-side, .lk-side)) #modal-root .overlay {
    position: fixed;
    top: 12px;
    bottom: 12px;
    left: auto;
    right: 12px;
    width: var(--pv-side-w);
    height: auto;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
    z-index: 60;
  }
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]):has(#pv-side > :is(.ib-side, .lk-side)) #modal-root .overlay > .modal {
    pointer-events: auto;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: var(--pv-r);
    box-shadow: none;
    outline: 1px solid var(--pv-edge);
    outline-offset: -1px;
  }
}
@media (max-width: 1439.98px) {
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]):has(#view > :is(.ib-main, .lk-main)) .shell > .hdr,
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]):has(#view > :is(.ib-main, .lk-main)) .install-wrap:not(:has(#install-card:not([hidden]))) {
    display: none;
  }
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]):not(.gated) #view:has(> :is(.ib-main, .lk-main)) {
    padding: 0 0 calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

html.ops-navy .ib-main,
html.ops-navy .lk-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font: 15px/1.45 var(--pv-font);
  color: var(--pv-t1);
}
html.ops-navy :is(.ib-head, .lk-head) {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--pv-div);
}
html.ops-navy :is(.ib-ttl, .lk-ttl) { min-width: 0; }
html.ops-navy :is(.ib-ttl, .lk-ttl) h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
html.ops-navy :is(.ib-ttl, .lk-ttl) p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 20px;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--pv-t2);
}
html.ops-navy .ib-ttl .ib-new { height: 20px; padding: 0 4px; margin-left: -4px; color: var(--pv-good); }
html.ops-navy .ib-ttl .ib-new:hover { color: var(--pv-green-hover); }
html.ops-navy .ib-tools { display: flex; align-items: center; gap: 16px; }
html.ops-navy .ib-seg button { min-width: 74px; }
html.ops-navy .ib-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 20px 24px;
  container-type: inline-size;
}
/* Space kept at all times, so the alerts line arriving never moves the list. Empty = nothing drawn. */
html.ops-navy .ib-foot {
  flex: none;
  min-height: 40px;
  padding: 10px 20px;
  border-top: 1px solid transparent;
  font-size: 13px;
  line-height: 20px;
  color: var(--pv-t3);
  overflow-wrap: break-word;
}
html.ops-navy .ib-foot:not(:empty) { border-top-color: var(--pv-div); }
html.ops-navy .ib-al { white-space: nowrap; }
html.ops-navy .ib-gh {
  margin: 18px 0 6px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--pv-t2);
}
html.ops-navy .ib-grp + .ib-grp .ib-gh { margin-top: 22px; }

html.ops-navy .ib-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 8px;
  grid-template-areas: "ic rt dot" "ic meta dot";
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  width: 100%;
  margin: 0 0 2px;
  padding: 11px 12px 11px 10px;
  border: 0;
  border-radius: var(--pv-r);
  background: none;
  color: var(--pv-t1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html.ops-navy .ib-row:hover { background: var(--pv-raised); }
html.ops-navy .ib-row.is-sel,
html.ops-navy .ib-row.is-sel:hover { background: var(--pv-raised2); }
html.ops-navy .ib-ic {
  grid-area: ic;
  width: 28px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--pv-t2);
}
html.ops-navy .ib-row.is-unread .ib-ic { color: var(--pv-t1); }
html.ops-navy .ib-ic.is-at_risk,
html.ops-navy .ib-row.is-unread .ib-ic.is-at_risk { color: var(--st-risk, var(--ops-status-bad)); }
html.ops-navy .ib-rt { grid-area: rt; display: grid; gap: 2px; min-width: 0; }
/* Two copies of the title in one cell: the bold one is invisible and sets the height, so read / unread never re-wraps. */
html.ops-navy .ib-tt { display: grid; }
html.ops-navy .ib-tt > * { grid-area: 1 / 1; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
html.ops-navy .ib-tt > b { visibility: hidden; font-weight: 600; }
html.ops-navy .ib-tt > span { font-weight: 400; color: var(--pv-t1); }
html.ops-navy .ib-row.is-unread .ib-tt > span { font-weight: 600; }
html.ops-navy .ib-bd { font-size: 13px; line-height: 19px; color: var(--pv-t2); overflow-wrap: anywhere; }
html.ops-navy .ib-meta { grid-area: meta; font-size: 13px; line-height: 20px; color: var(--pv-t3); overflow-wrap: anywhere; }
html.ops-navy .ib-row.is-done .ib-tt > span { color: var(--pv-t2); }
html.ops-navy .ib-row > .att-dot { grid-area: dot; margin-top: 7px; }
@container (min-width: 820px) {
  html.ops-navy .ib-row {
    grid-template-columns: 28px minmax(0, 640px) minmax(150px, auto) 8px;
    justify-content: start;
    grid-template-areas: "ic rt meta dot";
    column-gap: 20px;
  }
  html.ops-navy .ib-meta { padding-top: 1px; }
}
html.ops-navy .ib-row.is-skel { cursor: default; background: none; }
html.ops-navy .ib-row.is-skel .skel { display: block; }
html.ops-navy .ib-sk-h { width: 64px; height: 12px; }
html.ops-navy .ib-sk-t { width: min(360px, 60%); height: 15px; margin-top: 3px; }
html.ops-navy .ib-sk-b { width: min(520px, 85%); height: 12px; margin-top: 6px; }
html.ops-navy :is(.ib-empty, .lk-empty) {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 64px 16px;
  text-align: center;
}
html.ops-navy :is(.ib-empty, .lk-empty) p { margin: 0; font-size: 15px; color: var(--pv-t2); }

html.ops-navy .ib-side .pv-sh p { overflow-wrap: anywhere; }
html.ops-navy .ib-crumb { margin-top: 16px; }
html.ops-navy .ib-side h2.ib-name,
html.ops-navy #modal-root .ib-sheet h2.ib-name {
  margin: 6px 0 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
html.ops-navy .ib-side .pv-facts dd { flex-wrap: wrap; }
html.ops-navy .ib-late { color: var(--pv-late); }
html.ops-navy .ib-msg { margin-top: 16px; }
html.ops-navy .ib-msg p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
html.ops-navy .ib-msg .ib-msg-t { font-weight: 600; color: var(--pv-t1); }
html.ops-navy .ib-msg .ib-msg-b { color: var(--pv-t2); white-space: pre-wrap; }
html.ops-navy .ib-msg .ib-msg-t .st { margin-right: 4px; }
html.ops-navy .ib-msg .ib-msg-r { font-weight: 400; color: var(--pv-t2); }
/* Text actions line up on their words, not their hover boxes. */
html.ops-navy .ib-acts { margin-left: -8px; gap: 4px 6px; }
html.ops-navy .ib-acts .ib-ta { height: 38px; font-size: 15px; }
html.ops-navy .ib-thread .pv-cform .ib-ta { height: 40px; font-size: 15px; }
html.ops-navy .ib-tsk { display: grid; gap: 10px; min-height: 48px; }
html.ops-navy .ib-tsk .skel { display: block; width: 85%; height: 14px; }
html.ops-navy .ib-tsk .skel + .skel { width: 60%; }
html.ops-navy .ib-hint,
html.ops-navy .lk-hint { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--pv-t2); }

html.ops-navy #modal-root .overlay > .modal:has(> :is(.ib-sheet, .lk-sheet)) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
html.ops-navy #modal-root :is(.ib-sheet, .lk-sheet) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html.ops-navy #modal-root :is(.ib-sheet, .lk-sheet) > * { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html.ops-navy #modal-root :is(.ib-sheet, .lk-sheet) .pv-sh { padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 10px 16px; }
html.ops-navy #modal-root :is(.ib-sheet, .lk-sheet) .pv-sh h2 { font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: 0; }
html.ops-navy #modal-root :is(.ib-sheet, .lk-sheet) .pv-sb { padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
html.ops-navy #modal-root :is(.ib-sheet, .lk-sheet) .mclose { position: static; margin-left: auto; flex: none; width: 44px; height: 44px; }
html.ops-navy #modal-root :is(.ib-sheet, .lk-sheet) .ib-ta { height: 44px; font-size: 15px; }
html.ops-navy #modal-root :is(.ib-sheet, .lk-sheet) .pv-cin { height: 44px; font-size: 16px; }
html.ops-navy #modal-root .ib-sheet .pv-facts { grid-template-columns: 76px 1fr; }

html.ops-navy .os-back {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: var(--ops-scrim);
  font: 15px/1.45 var(--pv-font);
  color: var(--pv-t1);
}
html.ops-navy .os-panel {
  width: 640px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pv-panel);
  border: 1px solid var(--ops-line-default);
  border-radius: var(--pv-r);
}
html.ops-navy .os-in {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--pv-div);
}
html.ops-navy .os-lens { display: grid; place-items: center; color: var(--pv-t3); flex: none; }
html.ops-navy .os-q {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  outline: none;
  color: var(--pv-t1);
  font: 400 15px var(--pv-font);
}
html.ops-navy .os-q::placeholder { color: var(--pv-t3); }
html.ops-navy.ops-navy .os-back .os-q:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
html.ops-navy .os-x {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--pv-r);
  background: none;
  color: var(--pv-t2);
  cursor: pointer;
}
html.ops-navy .os-x:hover { background: var(--pv-raised); color: var(--pv-t1); }
/* A fixed height: typing changes the rows, never the panel's size. */
html.ops-navy .os-list {
  height: min(440px, 56vh);
  overflow: auto;
  padding: 6px 8px 10px;
  overscroll-behavior: contain;
}
html.ops-navy .os-gh {
  margin: 10px 10px 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--pv-t3);
}
html.ops-navy .os-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--pv-r);
  color: var(--pv-t1);
  cursor: pointer;
}
html.ops-navy .os-row.is-on { background: var(--pv-raised2); }
html.ops-navy .os-ic { display: grid; place-items: center; color: var(--pv-t2); }
html.ops-navy .os-ic.is-add { color: var(--pv-good); }
html.ops-navy .os-rt { display: grid; min-width: 0; }
html.ops-navy .os-t { font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
html.ops-navy .os-t b { font-weight: 600; color: var(--pv-t1); }
html.ops-navy .os-add .os-t { font-weight: 600; }
html.ops-navy .os-add.is-empty .os-t { font-weight: 400; color: var(--pv-t2); }
html.ops-navy .os-s { font-size: 13px; line-height: 19px; color: var(--pv-t3); overflow-wrap: anywhere; }
html.ops-navy .os-s b { font-weight: 600; color: var(--pv-t2); }
html.ops-navy .os-h { font-size: 13px; color: var(--pv-t3); white-space: nowrap; visibility: hidden; }
html.ops-navy .os-row.is-on .os-h { visibility: visible; }
html.ops-navy .os-k {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--pv-raised);
  color: var(--pv-t3);
  font: 500 13px/18px var(--pv-font);
  white-space: nowrap;
}
html.ops-navy .os-note { margin: 12px 10px 0; font-size: 13px; line-height: 20px; color: var(--pv-t2); overflow-wrap: anywhere; }
html.ops-navy .os-foot {
  flex: none;
  padding: 10px 16px;
  border-top: 1px solid var(--pv-div);
  font-size: 13px;
  line-height: 20px;
  color: var(--pv-t3);
}
@media (max-width: 1439.98px) {
  html.ops-navy .os-back { padding: 0; align-items: stretch; background: var(--pv-panel); }
  html.ops-navy .os-panel { width: 100%; height: 100%; border: 0; border-radius: 0; }
  html.ops-navy .os-in { height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 8px 0 16px; }
  /* 16px stops iOS zooming into the field. */
  html.ops-navy .os-q { font-size: 16px; }
  html.ops-navy .os-x { width: 44px; height: 44px; }
  /* 24px under the last row (plus the home bar), so it never sits on the screen edge. */
  html.ops-navy .os-list { flex: 1; height: auto; padding: 4px 8px calc(24px + env(safe-area-inset-bottom, 0px)); }
  html.ops-navy .os-row { min-height: 52px; }
  html.ops-navy .os-k,
  html.ops-navy .os-foot { display: none; }
  html.ops-navy .os-h { visibility: visible; }
}

html.ops-navy .lk-ttl p { display: block; max-width: 72ch; }
html.ops-navy .lk-add { font-size: 15px; height: 38px; }
html.ops-navy .lk-tools { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
html.ops-navy .lk-note { flex: none; margin: 0; padding: 10px 20px; font-size: 13px; color: var(--pv-t2); border-bottom: 1px solid var(--pv-div); }
html.ops-navy .lk-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 2px 20px 24px;
  container-type: inline-size;
}
html.ops-navy .lk-sec { margin-top: 20px; }
html.ops-navy .lk-sh {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}
html.ops-navy .lk-sh span { font-size: 13px; font-weight: 400; color: var(--pv-t3); }
html.ops-navy .lk-none { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 4px; font-size: 13px; color: var(--pv-t3); }
html.ops-navy .lk-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 1440px) {
  html.ops-navy .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.ops-navy .lk-row {
  position: relative;
  display: block;
  margin: 0 0 8px;
  padding: 12px 14px;
  border-radius: var(--pv-r);
  background: var(--pv-raised);
  box-shadow: inset 0 0 0 1px var(--ops-line-default), var(--ops-shadow-card);
}
html.ops-navy .lk-row:hover,
html.ops-navy .lk-row.is-sel { background: var(--pv-raised2); }
html.ops-navy .lk-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 88px 0 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html.ops-navy .lk-pick::after { content: ""; position: absolute; inset: 0; border-radius: var(--pv-r); }
html.ops-navy.ops-navy .lk-pick:focus-visible { outline: none; box-shadow: none; }
html.ops-navy.ops-navy .lk-pick:focus-visible::after { box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .lk-copy {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 16px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ops-text-secondary);
  font: 600 14px/20px var(--pv-font);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}
html.ops-navy .lk-copy:hover { color: var(--ops-text-primary); }
html.ops-navy .lk-copy:disabled { color: var(--ops-text-tertiary); text-decoration: none; cursor: default; }
html.ops-navy.ops-navy .lk-copy:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .lk-name { font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
html.ops-navy .lk-url { font-size: 13px; line-height: 19px; color: var(--pv-t2); overflow-wrap: anywhere; }
html.ops-navy .lk-as { font-size: 13px; line-height: 19px; color: var(--pv-t3); overflow-wrap: anywhere; }
html.ops-navy .lk-as u { color: var(--pv-t2); text-decoration: none; }
html.ops-navy .lk-as small { font-size: 11px; line-height: 16px; color: var(--pv-t3); }
html.ops-navy .lk-notes { font-size: 13px; line-height: 19px; color: var(--pv-t2); overflow-wrap: anywhere; }
html.ops-navy .lk-row.is-skel { gap: 8px; }
html.ops-navy .lk-row.is-skel .skel { display: block; }
html.ops-navy .lk-sk-h { width: 120px; height: 14px; }
html.ops-navy .lk-sk-a { width: min(220px, 50%); height: 15px; }
html.ops-navy .lk-sk-b { width: min(420px, 80%); height: 12px; }

html.ops-navy .lk-how p { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--pv-t2); }
html.ops-navy .lk-how h3 { margin: 16px 0 0; font-size: 13px; font-weight: 600; color: var(--pv-t2); }
html.ops-navy .lk-how h3 + p { margin-top: 6px; }
/* Two lines of room at all times: a longer link text never pushes the form down while you type it. */
html.ops-navy .lk-prev {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--pv-r);
  background: var(--pv-raised);
  box-shadow: inset 0 0 0 1px var(--ops-line-default);
}
html.ops-navy .lk-prev-h { display: block; font-size: 13px; line-height: 20px; color: var(--pv-t3); }
html.ops-navy .lk-prev-t { margin: 4px 0 0; min-height: 44px; font-size: 15px; line-height: 22px; }
html.ops-navy .lk-prev-a { color: var(--pv-good); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
html.ops-navy .lk-form { margin-top: 6px; }
html.ops-navy .lk-form .pv-field { margin-top: 14px; }
html.ops-navy .lk-form .pv-field input,
html.ops-navy .lk-form .pv-field select.dpt-field,
html.ops-navy .lk-form .pv-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  border: 0;
  border-radius: var(--pv-r);
  box-shadow: inset 0 0 0 1px var(--pv-edge);
  background-color: var(--pv-raised);
  color: var(--pv-t1);
  font: 500 15px/1.4 var(--pv-font);
}
html.ops-navy .lk-form .pv-field input { height: 40px; padding: 0 12px; }
html.ops-navy .lk-form .pv-field textarea { min-height: 84px; padding: 9px 12px; resize: vertical; }
html.ops-navy .lk-form .pv-field select.dpt-field {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  padding: 0 34px 0 12px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pv-t2) 50%),
    linear-gradient(135deg, var(--pv-t2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
html.ops-navy .lk-form .pv-field :is(input, select, textarea):focus-visible { outline: none; box-shadow: var(--pv-focus); }
html.ops-navy .lk-form .pv-field :is(input, textarea)::placeholder { color: var(--pv-t3); }
html.ops-navy .lk-form .pv-field :is(input, select, textarea):disabled { color: var(--pv-t2); }
html.ops-navy .lk-err { min-height: 20px; margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--pv-late); }
html.ops-navy .lk-words { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 16px 0 0; }
html.ops-navy .lk-words.is-more { margin-top: 8px; }
html.ops-navy .lk-w {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ops-text-secondary);
  font: 600 14px/20px var(--pv-font);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}
html.ops-navy .lk-w:hover { color: var(--ops-text-primary); }
html.ops-navy .lk-w:disabled { color: var(--ops-text-tertiary); text-decoration: none; cursor: default; }
html.ops-navy .lk-w-bad { margin-left: auto; color: var(--ops-status-bad); }
html.ops-navy .lk-w-bad:hover { color: var(--ops-status-bad); filter: brightness(1.15); }
html.ops-navy.ops-navy .lk-w:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .lk-foot { flex: none; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ops-line-default); }
html.ops-navy .lk-save {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--ops-accent-primary);
  color: var(--ops-accent-on-primary);
  font: 600 15px/1 var(--pv-font);
  cursor: pointer;
}
html.ops-navy .lk-save:hover:not(:disabled) { background: var(--ops-accent-primary-hover); }
html.ops-navy .lk-save:active:not(:disabled) { background: var(--ops-accent-primary-press); }
html.ops-navy .lk-save:disabled { opacity: 0.5; cursor: default; }
html.ops-navy.ops-navy .lk-save:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }

#toolbar .lk-tbacts, #toolbar .ib-tbacts { display: flex; align-items: center; gap: 16px; margin-left: 8px; flex: none; }
#toolbar .lk-tw,
#toolbar .ib-tbacts .ib-ta {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ops-text-secondary);
  font: 600 14px/20px var(--pv-font);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}
#toolbar .lk-tw:hover,
#toolbar .ib-tbacts .ib-ta:hover:not(:disabled) { background: none; color: var(--ops-text-primary); }
#toolbar .lk-tw:disabled,
#toolbar .ib-tbacts .ib-ta:disabled { color: var(--ops-text-tertiary); text-decoration: none; cursor: default; }
#toolbar .ib-tbacts .ib-del:not(:disabled) { color: var(--ops-status-bad); }
#toolbar .sh-tbs .ib-new { height: auto; padding: 0; margin-left: 8px; background: none; color: var(--ops-status-good); font: 600 14px/20px var(--pv-font); text-decoration: underline; text-underline-offset: 2px; }
#toolbar .ib-tbacts .ib-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--ops-bg-surface); box-shadow: inset 0 0 0 1px var(--ops-line-default); }
#toolbar .ib-tbacts .ib-seg button { min-width: 64px; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--ops-text-primary); font: 600 14px/1 var(--pv-font); cursor: pointer; }
#toolbar .ib-tbacts .ib-seg button:hover { background: var(--ops-bg-surface-hover); }
#toolbar .ib-tbacts .ib-seg button[aria-pressed="true"] { background: var(--ops-selected-bg); color: var(--ops-selected-text); }
#toolbar :is(.lk-tw, .ib-ta, .ib-seg button):focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
#toolbar .ib-tbacts .ib-seg button[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ops-selected-text); }
html.ops-navy .lk-view { margin-top: 16px; }
html.ops-navy .lk-view dd { min-width: 0; }
html.ops-navy .lk-view .lk-url { font-size: 15px; }

@media (max-width: 1439.98px) {
  html.ops-navy :is(.ib-head, .lk-head) { padding: 12px 16px 14px; }
  html.ops-navy .ib-tools { width: 100%; justify-content: space-between; gap: 12px; }
  html.ops-navy .ib-seg { flex: 1; width: auto; }
  html.ops-navy .ib-seg button { flex: 1; height: 44px; min-height: 44px; }
  html.ops-navy .ib-tools .ib-ta,
  html.ops-navy .lk-add { height: 44px; font-size: 15px; }
  html.ops-navy .ib-body,
  html.ops-navy .lk-body { padding-left: 8px; padding-right: 8px; }
  html.ops-navy .ib-gh { margin-left: 6px; }
  html.ops-navy .ib-row { min-height: 56px; padding: 12px 10px 12px 6px; }
  html.ops-navy .ib-foot { padding: 10px 16px; }
  html.ops-navy .lk-row { padding: 14px 14px 8px; }
  html.ops-navy .lk-pick { min-height: 44px; }
  html.ops-navy .lk-none .ib-ta { height: 44px; }
  html.ops-navy .lk-form .pv-field input,
  html.ops-navy .lk-form .pv-field select.dpt-field { height: 44px; font-size: 16px; }
  html.ops-navy .lk-form .pv-field textarea { font-size: 16px; }
}

/* Mobile QA 2026-10-06 (OPS-18): the Links subtitle is one line on the phone band, and the full sentence was cut off
   with "..." there ("Copy link pastes a click..."). Under 768px a shorter sentence takes its place; nothing is cut. */
html.ops-navy .lk-ttl .lk-sub-short { display: none; }
@media (max-width: 767.98px) {
  html.ops-navy .lk-ttl .lk-sub-full { display: none; }
  html.ops-navy .lk-ttl .lk-sub-short { display: inline; }
}

/* Last in the file so it wins over the rules above and the phone block. */
html.ops-navy .ib-row { padding: 12px 16px; margin: 0 0 8px; row-gap: 4px; }
html.ops-navy .ib-tt > * { font-size: 14px; line-height: 20px; }
html.ops-navy .ib-ic { height: 20px; }
html.ops-navy .ib-bd { font-size: 12px; line-height: 16px; }
html.ops-navy .ib-meta { font-size: 12px; line-height: 16px; }
html.ops-navy .ib-row > .att-dot { margin-top: 6px; }
html.ops-navy .ib-gh { margin: 24px 0 8px 16px; font-size: 14px; line-height: 20px; }
html.ops-navy .ib-grp:first-child .ib-gh { margin-top: 12px; }
html.ops-navy .ib-grp + .ib-grp .ib-gh { margin-top: 24px; }
html.ops-navy .ib-body { padding: 8px 24px 32px; }
html.ops-navy .lk-body { padding: 8px 24px 32px; }
html.ops-navy .lk-sec { margin-top: 24px; }
html.ops-navy .lk-sec:first-child { margin-top: 12px; }
html.ops-navy .lk-sh { margin: 0 0 12px; font-size: 14px; line-height: 20px; }
html.ops-navy .lk-sh span { font-size: 12px; }
html.ops-navy .lk-row { padding: 12px 16px; margin: 0 0 8px; gap: 8px; }
html.ops-navy .lk-name { font-size: 14px; line-height: 20px; }
html.ops-navy .lk-url,
html.ops-navy .lk-as,
html.ops-navy .lk-notes { font-size: 13px; line-height: 19px; }
html.ops-navy .lk-url { color: var(--ops-text-tertiary); }
html.ops-navy .ib-gh,
html.ops-navy .ib-grp + .ib-grp .ib-gh { margin-left: 0; }
html.ops-navy #view .lk-body { margin: 0 24px 24px; padding: 16px 0; }
html.ops-navy #view .ib-body { margin: 0 24px 24px; padding: 0 0 16px; }
@media (max-width: 767.98px) {
  html.ops-navy #view .lk-body { margin: 0 16px; padding: 8px 0 16px; }
  html.ops-navy #view .ib-body { margin: 0 8px; }
  html.ops-navy .lk-pick { padding-right: 80px; }
}
html.ops-navy #view .ib-grp:first-child .ib-gh { margin-top: 24px; }
@media (min-width: 1800px) {
  html.ops-navy .ib-body,
  html.ops-navy .lk-body { padding: 12px 24px 40px; }
  html.ops-navy .ib-gh,
  html.ops-navy .ib-grp + .ib-grp .ib-gh { margin-top: 32px; }
  html.ops-navy .lk-sec { margin-top: 32px; }
  html.ops-navy .ib-grp:first-child .ib-gh,
  html.ops-navy .lk-sec:first-child { margin-top: 16px; }
}
@media (max-width: 1439.98px) {
  html.ops-navy .ib-body,
  html.ops-navy .lk-body { padding: 8px 8px 24px; }
  html.ops-navy .ib-gh,
  html.ops-navy .ib-grp + .ib-grp .ib-gh { margin: 16px 0 8px 16px; }
  html.ops-navy .ib-grp:first-child .ib-gh,
  html.ops-navy .lk-sec:first-child { margin-top: 8px; }
  html.ops-navy .lk-sec { margin-top: 16px; }
  html.ops-navy .ib-row { min-height: 56px; padding: 12px 16px; }
  html.ops-navy .lk-row { padding: 12px 16px 8px; }
}

@media (min-width: 1440px) {
  html.ops-navy body.restyle[data-view="links"]:has(#view > .lk-main) .shell { right: 0; }
  html.ops-navy body.restyle[data-view="links"] #pv-side:has(> .lk-side) {
    top: var(--sh-top) !important;
    right: 0;
    bottom: 0;
    width: var(--sh-drawer-w, 480px);
    border-radius: 0;
    z-index: 41;
  }
  html.ops-navy body.restyle[data-view="links"] #pv-side:has(> .lk-side:not([data-lk-open])) { display: none; }
  html.ops-navy body.restyle[data-view="links"] #pv-side .lk-side .pv-sh { background: transparent; }
  html.ops-navy body.restyle[data-view="inbox"]:has(#view > .ib-main) .shell { right: 0; }
  html.ops-navy body.restyle[data-view="inbox"] #pv-side:has(> .ib-side) {
    top: var(--sh-top) !important;
    right: 0;
    bottom: 0;
    width: var(--sh-drawer-w, 480px);
    border-radius: 0;
    z-index: 41;
  }
  html.ops-navy body.restyle[data-view="inbox"] #pv-side:has(> .ib-side:not([data-ib-open])) { display: none; }
  html.ops-navy body.restyle[data-view="inbox"] #pv-side .ib-side .pv-sh { background: transparent; }
}

/* Close control, Select mode and bulk Delete. */
html.ops-navy .ib-x { margin-left: 4px; }
html.ops-navy .ib-ta.ib-fl { background: var(--pv-raised2); }
html.ops-navy .ib-ta.ib-fl:hover { background: var(--pv-raised); }
html.ops-navy .ib-ta.ib-fl:disabled,
html.ops-navy .ib-ta.ib-fl:disabled:hover { background: var(--pv-raised2); color: var(--pv-t3); }
html.ops-navy .ib-ta.ib-del:not(:disabled) { background: var(--st-risk, var(--ops-status-bad)); color: var(--ops-text-on-status); }
html.ops-navy .ib-ta.ib-del:not(:disabled):hover { filter: brightness(1.08); }
html.ops-navy .ib-row.is-pick {
  grid-template-columns: 24px 28px minmax(0, 1fr) 8px;
  grid-template-areas: "pk ic rt dot" "pk ic meta dot";
}
html.ops-navy .ib-row.is-picked { background: var(--pv-raised2); }
html.ops-navy .ib-pk { grid-area: pk; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--pv-green); cursor: pointer; }
@container (min-width: 820px) {
  html.ops-navy .ib-row.is-pick {
    grid-template-columns: 24px 28px minmax(0, 1fr) minmax(170px, 28%) 8px;
    grid-template-areas: "pk ic rt meta dot";
  }
}
@media (max-width: 1439.98px) {
  html.ops-navy .ib-head .ib-x { order: 1; margin-left: auto; width: 44px; height: 44px; }
  html.ops-navy .ib-head .ib-tools { order: 2; flex-wrap: wrap; }
  html.ops-navy .ib-tools .ib-fl { flex: 1 1 auto; justify-content: center; }
  html.ops-navy .ib-pk { width: 24px; height: 24px; }
  html.ops-navy .ib-row.is-pick { grid-template-columns: 28px 28px minmax(0, 1fr) 8px; }
  html.ops-navy .ib-acts .ib-del { height: 44px; }
}

/* Desktop head: the tools sit against the close button, not mid-row. */
@media (min-width: 1440px) {
  html.ops-navy .ib-head .ib-tools { margin-left: auto; }
}

/* Phone: the Back arrow in the top bar leaves this screen, so the head needs no second close control. */
@media (max-width: 1439px) {
  html.ops-navy .ib-head .ib-x { display: none; }
}

/* Delete reads as the one that removes. #view out-ranks the band's shared control rule, which carries an id. */
html.ops-navy #view .ib-head .ib-tools .ib-ta.ib-del:not(:disabled) { background-color: var(--st-risk, var(--ops-status-bad)); color: var(--ops-text-on-status); box-shadow: none; }
html.ops-navy #view .ib-head .ib-tools .ib-ta.ib-del:not(:disabled):hover { background-color: var(--ops-status-bad); color: var(--ops-text-on-status); }

/* Phone band, two rows. Normal: name and Mark all read, then Open / All and Select. Selecting: name and Cancel, then Select all and Delete. */
@media (max-width: 1439px) {
  html.ops-navy body .ib-head [data-ib-select] { grid-area: u; justify-self: end; align-self: start; flex: none; }
  html.ops-navy body .ib-head:has([data-ib-select]) .ib-ttl p,
  html.ops-navy body .ib-head:has([data-ib-delsel]) .ib-ttl p,
  html.ops-navy body .ib-head:has([data-ib-delsel]) .ib-seg { display: none; }
  html.ops-navy body .ib-head [data-ib-selcancel] { grid-area: m; flex: none; }
  html.ops-navy body .ib-head [data-ib-pickall] { grid-area: s; justify-self: start; align-self: start; flex: none; }
  html.ops-navy body .ib-head [data-ib-delsel] { grid-area: u; justify-self: end; align-self: start; flex: none; }
}

/* Plan my week (review-view.js), the Today peek ("N tasks need a decision", plan-view.js) and the task extras
   (task-extras.js: checklist, waiting on, how-to link). Loads after inbox.css. Look C tokens only (plan.css,
   status.css). One filled button per screen stays the menu's Add task: every action here is plain text, with a
   16px icon at most, and a raised fill on hover. Nothing opening, closing or loading moves anything else. */

@media (min-width: 1440px) {
  html.ops-navy body[data-view="friday"]:has(#view > .fr-main) .shell {
    right: var(--pv-side-w);
    padding-right: 0;
  }
  html.ops-navy body[data-view="friday"]:has(#view > .fr-main) .shell > .hdr,
  html.ops-navy body[data-view="friday"]:has(#view > .fr-main) .install-wrap:not(:has(#install-card:not([hidden]))) {
    display: none;
  }
  html.ops-navy body[data-view="friday"]:not(.gated) #view:has(> .fr-main) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }
}

@media (max-width: 1439.98px) {
  html.ops-navy body[data-view="friday"]:has(#view > .fr-main) .shell > .hdr,
  html.ops-navy body[data-view="friday"]:has(#view > .fr-main) .install-wrap:not(:has(#install-card:not([hidden]))) {
    display: none;
  }
  html.ops-navy body[data-view="friday"]:not(.gated) #view:has(> .fr-main) {
    display: flex;
    flex-direction: column;
    padding: 0 0 calc(64px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }
}

html.ops-navy .fr-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font: 15px/1.45 var(--pv-font);
  color: var(--pv-t1);
}
html.ops-navy .fr-main button,
html.ops-navy .fr-main input { font-family: var(--pv-font); }
html.ops-navy .fr-x {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--pv-r);
  background: none;
  color: var(--ops-text-primary);
  font: 600 14px var(--pv-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
html.ops-navy .fr-x:hover { color: var(--ops-text-secondary); }
html.ops-navy .fr-x:focus-visible { outline: none; box-shadow: var(--pv-focus); }
html.ops-navy .fr-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px;
}
html.ops-navy .fr-col {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
html.ops-navy .fr-split {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 8fr);
  gap: 24px;
  align-items: start;
  max-width: 1584px;
}
html.ops-navy .fr-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* The list of what needs a decision: a raised card; the rows are the same items the card walks through. */
html.ops-navy .fr-list {
  min-width: 0;
  border-radius: var(--pv-r);
  background: var(--pv-raised);
  box-shadow: inset 0 0 0 1px var(--ops-line-default);
  overflow: hidden;
}
html.ops-navy .fr-lhd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 16px 16px 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--pv-t1);
}
html.ops-navy .fr-lc { font-size: 14px; font-weight: 400; color: var(--pv-t2); font-variant-numeric: tabular-nums; }
html.ops-navy .fr-lempty { margin: 0; padding: 0 16px 16px; font-size: 14px; color: var(--pv-t1); }
html.ops-navy .fr-lbody {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: calc(100vh - 64px - 48px - 48px);
  overflow-y: auto;
  position: relative;
}
html.ops-navy .fr-li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--pv-div);
  border-radius: 0;
  background: none;
  color: var(--pv-t1);
  font: 400 14px/20px var(--pv-font);
  text-align: left;
  cursor: pointer;
}
html.ops-navy .fr-li:hover { background: var(--pv-raised2); }
html.ops-navy .fr-li.is-cur { background: var(--pv-raised2); box-shadow: inset 3px 0 0 var(--ops-accent-primary); }
html.ops-navy .fr-li.is-decided { cursor: default; }
html.ops-navy .fr-li.is-decided:hover { background: none; }
html.ops-navy .fr-lt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ops-navy .fr-ln { font-weight: 600; overflow-wrap: anywhere; }
html.ops-navy .fr-li.is-decided .fr-ln { font-weight: 400; color: var(--pv-t2); }
html.ops-navy .fr-lm { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 13px; line-height: 18px; color: var(--pv-t2); }
html.ops-navy .fr-lr.is-decide { color: var(--st-warn); }
html.ops-navy .fr-lr.is-late { color: var(--pv-late); }
html.ops-navy .fr-lr.is-wait { color: var(--pv-t1); }
html.ops-navy .fr-lw { flex: none; max-width: 40%; font-size: 14px; font-weight: 600; text-align: right; color: var(--pv-t1); }
html.ops-navy .fr-li:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }

/* The card: a raised tile inside the main tile, as tall as its content. Its height never depends on which form is open:
   .fr-form keeps the tallest form's room (Smaller step), so opening one moves nothing outside the card. */
html.ops-navy .fr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 32px 24px;
  border-radius: var(--pv-r);
  background: var(--pv-raised);
  box-shadow: inset 0 0 0 1px var(--ops-line-default), var(--ops-shadow-card);
}
html.ops-navy .fr-card:focus,
html.ops-navy .fr-card:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--ops-line-default), var(--ops-shadow-card); }
html.ops-navy .fr-card.fr-slide { animation: fr-slide 0.18s ease-out; }
@keyframes fr-slide {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.ops-navy .fr-card.fr-slide { animation: none; }
}
html.ops-navy .fr-crumb {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pv-t2);
  overflow-wrap: break-word;
}
html.ops-navy .fr-name {
  margin: 8px 0 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
/* One line under the title: "Open 21 days · no date · no owner". An age at 15+ is the warning square + words (the words
   in --pv-t2); late is the late red; everything else --pv-t2. */
html.ops-navy .fr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--pv-t2);
}
html.ops-navy .fr-meta .fr-rs { font-weight: 600; }
html.ops-navy .fr-meta .st.fr-rs > span { color: var(--pv-t2); }
html.ops-navy .fr-meta .fr-rs.is-late { color: var(--pv-late); }
html.ops-navy .fr-meta .fr-rs.is-wait { color: var(--pv-t2); }
html.ops-navy .fr-sep { color: var(--pv-t3); }

html.ops-navy .fr-acts {
  display: block;
  margin-top: 20px;
  border-top: 1px solid var(--pv-div);
}
html.ops-navy .fr-acts .fr-act {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 16px;
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: 8px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--pv-div);
  background: none;
  text-align: left;
  white-space: normal;
}
html.ops-navy .fr-acts .fr-act:hover { background: none; }
html.ops-navy .fr-acts .fr-act:hover .fr-al { color: var(--pv-t2); }
html.ops-navy .fr-acts .fr-act .fr-al { font-size: 15px; font-weight: 600; line-height: 20px; text-decoration: underline; text-underline-offset: 3px; }
html.ops-navy .fr-acts .fr-act .fr-ah { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 400; line-height: 18px; color: var(--pv-t2); }
html.ops-navy .fr-acts .fr-act .fr-key { grid-column: 3; grid-row: 1; margin: 0; }
html.ops-navy .fr-acts .fr-act.is-on .fr-al { color: var(--pv-t2); }
html.ops-navy .fr-acts .fr-act[aria-disabled="true"]:hover { background: none; }
html.ops-navy .fr-act,
html.ops-navy .fr-pick,
html.ops-navy .fr-ta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--pv-r);
  background: none;
  color: var(--pv-t1);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
html.ops-navy .fr-act svg,
html.ops-navy .fr-ta svg { flex: none; color: var(--pv-t2); }
html.ops-navy .fr-act:hover,
html.ops-navy .fr-pick:hover,
html.ops-navy .fr-ta:hover { background: var(--pv-raised2); color: var(--pv-t1); }
html.ops-navy .fr-act[aria-disabled="true"] { opacity: 0.5; cursor: default; }
html.ops-navy .fr-ta.is-quiet { color: var(--pv-t2); }
html.ops-navy .fr-ta.is-quiet:hover { color: var(--pv-t1); }
html.ops-navy .fr-key {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--ops-bg-sunken); box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: var(--pv-t2);
}
html.ops-navy .fr-sub { font-size: 13px; font-weight: 400; color: var(--pv-t3); }
html.ops-navy :is(.fr-main) button:focus-visible,
html.ops-navy :is(.fr-main) input:focus-visible {
  outline: none;
  box-shadow: var(--pv-focus);
}

/* The form area: nothing when closed (the card ends under the decisions); the open form below a hairline. The card grows
   downward and nothing sits under it ("Finish later" is pinned to the tile's foot), so opening one moves nothing else. */
html.ops-navy .fr-form.is-open {
  margin-top: 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--pv-div);
}
html.ops-navy .fr-fhint { margin: 10px 0 8px; font-size: 13px; color: var(--pv-t3); }
html.ops-navy .fr-f { margin: 0; }
html.ops-navy .fr-fq {
  display: block;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pv-t1);
}
html.ops-navy .fr-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html.ops-navy .fr-picks .pv-avs { margin-right: -2px; }
html.ops-navy .fr-frow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}
html.ops-navy .fr-in {
  height: 44px;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--pv-r);
  background: var(--ops-bg-field);
  box-shadow: inset 0 0 0 1px var(--pv-edge);
  color: var(--pv-t1);
  font-size: 15px;
  font-weight: 400;
  color-scheme: var(--ops-color-scheme);
}
html.ops-navy .fr-in::placeholder { color: var(--pv-t3); }
html.ops-navy #fr-sname,
html.ops-navy .fr-oneform .fr-in { display: block; width: 100%; }
html.ops-navy .fr-date { width: 190px; }
html.ops-navy .fr-ferr { margin: 8px 0 0; min-height: 20px; font-size: 13px; color: var(--pv-late); }
html.ops-navy .fr-fmeta { font-size: 13px; color: var(--pv-t3); }
html.ops-navy .fr-oneform { margin-top: 20px; }
html.ops-navy .fr-one { padding-bottom: 24px; }
html.ops-navy .fr-pickd { margin-left: -12px; }

html.ops-navy .fr-sum { margin: 14px 0 0; font-size: 15px; color: var(--pv-t2); overflow-wrap: break-word; }
html.ops-navy .fr-line { margin: 12px 0 0; font-size: 15px; color: var(--pv-t2); overflow-wrap: break-word; }
html.ops-navy .fr-line b { color: var(--pv-t1); font-weight: 600; }
html.ops-navy .fr-streak { margin: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--pv-t1); }
html.ops-navy .fr-end { padding-top: 20px; }
html.ops-navy .fr-end .fr-ta:first-child { margin-left: -12px; }

html.ops-navy .fr-card.is-loading { gap: 14px; }
html.ops-navy .fr-card.is-loading .skel { display: block; }
html.ops-navy .fr-skel-a { width: 30%; height: 14px; }
html.ops-navy .fr-skel-b { width: 70%; height: 30px; }
html.ops-navy .fr-skel-c { width: 45%; height: 16px; }
html.ops-navy .tx-sec h3 { display: flex; align-items: baseline; gap: 8px; }
html.ops-navy .tx-count { font-weight: 400; color: var(--pv-t3); }
html.ops-navy .pv-sec .tx-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
html.ops-navy .tx-sec .tx-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 10px;
  min-height: 36px;
  padding: 0;
}
html.ops-navy .tx-sec .tx-row::before { content: none; }
html.ops-navy .tx-box {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 9px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--pv-t3);
  display: grid;
  place-items: center;
  cursor: pointer;
}
html.ops-navy .tx-box:hover { box-shadow: inset 0 0 0 1.5px var(--pv-t1); }
/* Ticked: the raised fill, the hairline and a white tick (a solid white square shouted louder than the task). */
html.ops-navy .tx-row.is-done .tx-box { background: var(--pv-raised2); box-shadow: inset 0 0 0 1px var(--pv-edge); }
html.ops-navy .tx-row.is-done .tx-box::after {
  content: "";
  width: 8px;
  height: 4px;
  border: solid var(--pv-t1);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px);
}
html.ops-navy #pv-side .tx-box:focus-visible,
html.ops-navy .tx .tx-box:focus-visible { box-shadow: inset 0 0 0 2px var(--ops-focus); background: var(--pv-raised2); }
html.ops-navy #pv-side .tx-row.is-done .tx-box:focus-visible,
html.ops-navy .tx .tx-row.is-done .tx-box:focus-visible { background: var(--pv-raised2); }
html.ops-navy .tx-text {
  min-width: 0;
  padding: 7px 0;
  border: 0;
  background: none;
  color: var(--pv-t1);
  font: 400 15px/22px var(--pv-font);
  text-align: left;
  overflow-wrap: break-word;
  cursor: text;
}
html.ops-navy .tx-row.is-done .tx-text { color: var(--pv-t3); text-decoration: line-through; }
html.ops-navy .tx-del {
  visibility: hidden;
  height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--pv-r);
  background: none;
  color: var(--pv-t2);
  font: 600 13px var(--pv-font);
  cursor: pointer;
}
html.ops-navy .tx-row:hover .tx-del,
html.ops-navy .tx-row:focus-within .tx-del { visibility: visible; }
html.ops-navy .tx-del:hover { color: var(--pv-t1); background: var(--pv-raised); }
@media (hover: none) {
  html.ops-navy .tx-del { visibility: visible; }
}
html.ops-navy .tx-in {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--pv-r);
  background: var(--pv-raised);
  box-shadow: inset 0 0 0 1px var(--pv-edge);
  color: var(--pv-t1);
  font: 400 15px/22px var(--pv-font);
  resize: none;
  overflow: hidden;
}
html.ops-navy .tx-in::placeholder { color: var(--pv-t3); }
html.ops-navy #pv-side .tx-in:focus-visible,
html.ops-navy .tx .tx-in:focus-visible { outline: none; box-shadow: var(--pv-focus); }
html.ops-navy .tx-addf,
html.ops-navy .tx-f { margin: 0; }
html.ops-navy .tx-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 6px;
  margin-left: -6px;
  border: 0;
  border-radius: var(--pv-r);
  background: none;
  color: var(--pv-t1);
  font: 600 15px var(--pv-font);
  white-space: nowrap;
  cursor: pointer;
}
html.ops-navy .tx-act + .tx-act { margin-left: 0; }
html.ops-navy .tx-act:hover { background: var(--pv-raised); color: var(--pv-t1); }
html.ops-navy .tx-act.is-quiet { color: var(--pv-t2); }
html.ops-navy .tx-act.is-quiet:hover { color: var(--pv-t1); }
html.ops-navy .tx-plus svg { color: var(--pv-good); }
html.ops-navy .tx-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  min-height: 36px;
}
html.ops-navy .tx-wtext { font-size: 15px; color: var(--pv-t1); overflow-wrap: break-word; min-width: 0; }
html.ops-navy .tx-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
html.ops-navy .tx-push { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
html.ops-navy .tx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: var(--pv-good);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--pv-r);
}
html.ops-navy .tx-link:hover { text-decoration: underline; }
html.ops-navy .tx-link:focus-visible { outline: none; box-shadow: var(--pv-focus); }
html.ops-navy .tx-meta { font-size: 13px; color: var(--pv-t3); overflow-wrap: anywhere; }

@media (max-width: 1439.98px) {
  /* Room for the search and account buttons that sit in the top right corner of every phone screen. */
  html.ops-navy .fr-body { padding: 16px 16px 24px; }
  html.ops-navy .fr-split { display: flex; flex-direction: column; gap: 16px; max-width: none; }
  html.ops-navy .fr-right { gap: 16px; }
  html.ops-navy .fr-lbody { max-height: 56vh; }
  html.ops-navy .fr-x { height: 44px; padding: 0 8px; }
  html.ops-navy .fr-card {
    flex: none;
    padding: 20px 16px 12px;
  }
  html.ops-navy .fr-acts { margin-top: 16px; }
  html.ops-navy .fr-acts .fr-act .fr-al,
  html.ops-navy .fr-acts .fr-act .fr-ah { grid-column: 1; grid-row: auto; }
  html.ops-navy .fr-acts .fr-act {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 2px;
    width: 100%;
    min-height: 44px;
    padding: 8px 4px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    border-bottom: 1px solid var(--pv-div);
  }
  html.ops-navy .fr-acts .fr-act:hover { background: none; }
  html.ops-navy .fr-acts .fr-act[aria-disabled="true"]:hover { background: none; }
  html.ops-navy .fr-acts .fr-act.is-on { background: var(--pv-raised2); }
  html.ops-navy .fr-pick { justify-content: flex-start; min-height: 44px; padding: 0 8px; }
  html.ops-navy .fr-key { display: none; }
  html.ops-navy .fr-form.is-open { margin-top: 0; border-top: 0; padding-top: 12px; }
  html.ops-navy .fr-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
  html.ops-navy .fr-pickd { margin-left: -8px; }
  html.ops-navy .fr-date { flex: 1 1 140px; width: auto; }
  html.ops-navy .fr-end .fr-ta:first-child { margin-left: 0; }
  html.ops-navy .tx-sec .tx-row { min-height: 44px; }
  html.ops-navy .tx-box { margin-top: 13px; }
  html.ops-navy .tx-box::before { content: ""; position: absolute; inset: -13px; }
  html.ops-navy .tx-text { padding: 11px 0; }
  html.ops-navy .tx-del,
  html.ops-navy .tx-act { height: 44px; }
  html.ops-navy .tx-link { min-height: 44px; }
  html.ops-navy .tx-in { min-height: 44px; padding: 11px 10px; }
  html.ops-navy .tx-line { min-height: 44px; }
}

/* Last in the file, so these insets win. */
html.ops-navy .fr-card { padding: 32px 32px 28px; }
html.ops-navy .fr-sum { margin-top: 16px; }
html.ops-navy .fr-line { margin-top: 16px; }
html.ops-navy .fr-streak { margin-top: 16px; }
@media (min-width: 1800px) {
  html.ops-navy .fr-card { padding: 40px 40px 32px; }
}
@media (max-width: 1439.98px) {
  html.ops-navy .fr-card { padding: 24px 16px 16px; }
}
html.ops-navy .fr-split .fr-card { padding: 24px; }
html.ops-navy .fr-split .fr-name { font-size: 22px; line-height: 28px; }
html.ops-navy .fr-split .fr-one .fr-name { margin: 0; font-size: 17px; line-height: 24px; }
html.ops-navy .fr-split .fr-oneform { margin-top: 16px; }
html.ops-navy .fr-oneform .fr-ta { height: 40px; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
html.ops-navy .fr-oneform .fr-ta:hover { background: none; color: var(--pv-t2); }
@media (max-width: 1439.98px) {
  html.ops-navy .fr-split .fr-card { padding: 20px 16px 8px; }
  html.ops-navy .fr-split .fr-name { font-size: 20px; line-height: 26px; }
  html.ops-navy .fr-split .fr-one { padding-bottom: 16px; }
}

@media (max-width: 767px) {
  html.ops-navy #toolbar .fr-tbid { flex: 1 1 0; }
  html.ops-navy #toolbar .fr-tbid .sh-tbs { white-space: normal; overflow: visible; text-overflow: clip; }
  html.ops-navy #toolbar .fr-x { margin-top: -7px; }
}

/* Week and day time grid + the block panel. Tokens only (plan.css --pv-*, navy.css --dp5-*).
   The grid fills the main tile and scrolls inside itself: opening the right panel does not move it.
   Container: .tg (named "tg") so a narrow main column swaps due-chips for "N not in a block". */

html.ops-navy {
  --tg-hour: 56px;
  --tg-gutter: 58px;
}

html.ops-navy .tg {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  container: tg / inline-size;
  font-family: var(--pv-font);
  color: var(--ops-text-primary);
}

html.ops-navy .tg-daywrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr);
}

html.ops-navy .tg-scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
}

html.ops-navy .tg-inner {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  --tg-days: 7;
}

html.ops-navy .tg-head,
html.ops-navy .tg-body {
  display: grid;
  grid-template-columns: var(--tg-gutter) repeat(var(--tg-days), minmax(0, 1fr));
  scrollbar-gutter: stable;
}

html.ops-navy .tg-head {
  overflow: hidden;
  border-bottom: 1px solid var(--ops-line-default);
  flex: none;
}

html.ops-navy .tg-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  position: relative;
}

html.ops-navy .tg-gutter {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ops-text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 6px 6px 0 0;
  text-align: right;
}

html.ops-navy .tg-day {
  padding: 10px 10px 6px;
  border-left: 1px solid var(--ops-line-default);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

html.ops-navy .tg-dn {
  font-size: 12px;
  color: var(--ops-text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

html.ops-navy .tg-dd {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

html.ops-navy .tg-day.is-today .tg-dd {
  background: var(--ops-status-good);
  color: var(--ops-text-on-status);
  border-radius: 4px;
  padding: 0 6px;
}

html.ops-navy .tg-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ops-text-tertiary);
  font-variant-numeric: tabular-nums;
}

html.ops-navy .tg-dlink {
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

html.ops-navy .tg-dlink:hover .tg-dd {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.ops-navy .tg-sea-row {
  border-left: 1px solid var(--ops-line-default);
  padding: 0 6px 4px;
  min-height: 8px;
}

html.ops-navy .tg-sea-band {
  display: grid;
  grid-template-columns: repeat(var(--tg-days), minmax(0, 1fr));
  grid-template-rows: repeat(var(--tg-sea-lanes, 1), auto);
  column-gap: 4px;
  row-gap: 4px;
  align-self: stretch;
  z-index: 2;
  pointer-events: none;
  padding: 4px 0 6px;
  min-width: 0;
}

html.ops-navy .tg-sea {
  border: 0;
  width: auto;
  min-width: 0;
  margin: 0 3px;
  pointer-events: auto;
  text-align: left;
  font: 600 11.5px/1.3 var(--pv-font);
  color: var(--ops-text-primary);
  /* Solid, not hatched (stripes made the names too hard to read). The light left edge is what
     marks a season event apart from a task chip or a block. */
  background: var(--ops-bg-surface-hover);
  box-shadow: inset 3px 0 0 var(--ops-status-info);
  border-radius: 4px;
  padding: 3px 7px 3px 10px;
  cursor: pointer;
  overflow-wrap: break-word;
}

html.ops-navy .tg-sea:hover { background: var(--ops-bg-surface-press); }

html.ops-navy .tg-due {
  border-left: 1px solid var(--ops-line-default);
  padding: 2px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

html.ops-navy .tg-due-n { display: none; }

html.ops-navy .tg-due-lab {
  font-size: 12px;
  font-weight: 600;
  color: var(--ops-text-tertiary);
  padding: 2px 0 4px;
}

html.ops-navy .tg-chips { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html.ops-navy .tg-due .pv-chip { cursor: grab; touch-action: none; }

html.ops-navy .tg-more,
html.ops-navy .tg-due-n {
  border: 0;
  background: none;
  font: 500 12px/1.3 var(--pv-font);
  color: var(--ops-text-secondary);
  text-align: left;
  padding: 2px 7px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ops-text-tertiary);
  cursor: pointer;
}

html.ops-navy .tg-more:hover,
html.ops-navy .tg-due-n:hover { color: var(--ops-text-primary); }

html.ops-navy .tg-hours { position: relative; }

html.ops-navy .tg-hr {
  height: var(--tg-hour);
  font-size: 11px;
  color: var(--ops-text-tertiary);
  text-align: right;
  padding-right: 8px;
  transform: translateY(-7px);
  font-variant-numeric: tabular-nums;
}

html.ops-navy .tg-col {
  position: relative;
  border-left: 1px solid var(--ops-line-default);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--tg-hour) - 1px),
    var(--ops-line-default) calc(var(--tg-hour) - 1px) var(--tg-hour)
  );
  cursor: cell;
  touch-action: none;
  user-select: none;
}

html.ops-navy .tg-col.is-today {
  background-color: color-mix(in srgb, var(--ops-status-good) 3.5%, transparent);
}

html.ops-navy .tg-col.is-drop {
  background-color: color-mix(in srgb, var(--ops-bucket-serve) 8%, transparent);
}

html.ops-navy .tg-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ops-status-bad);
  z-index: 5;
  pointer-events: none;
}

html.ops-navy .tg-now::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ops-status-bad);
}

html.ops-navy .tg-blk {
  --bc: var(--ops-bucket-none);
  position: absolute;
  border-radius: 6px;
  padding: 5px 8px 8px 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bc) 30%, var(--ops-bg-surface));
  border-left: 3px solid var(--bc);
  box-shadow: 0 6px 16px transparent;
  cursor: grab;
  z-index: 2;
  touch-action: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  user-select: none;
  color: var(--ops-text-primary);
}

html.ops-navy .tg-c-get { --bc: var(--ops-bucket-get); }
html.ops-navy .tg-c-serve { --bc: var(--ops-bucket-serve); }
html.ops-navy .tg-c-ops { --bc: var(--ops-bucket-ops); }
html.ops-navy .tg-c-grow { --bc: var(--ops-bucket-grow); }
html.ops-navy .tg-c-none { --bc: var(--ops-bucket-none); }

html.ops-navy .tg-blk:hover {
  background: color-mix(in srgb, var(--bc) 38%, var(--ops-bg-surface));
}

html.ops-navy .tg-blk.is-sel {
  box-shadow: inset 0 0 0 1.5px var(--ops-focus), 0 8px 20px transparent;
  z-index: 4;
}

html.ops-navy .tg-blk.is-ghost {
  opacity: .85;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
  z-index: 6;
  pointer-events: none;
}

html.ops-navy .tg-blk.is-dragging { opacity: .35; }

html.ops-navy .tg-bt {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
}

html.ops-navy .tg-bm {
  font-size: 11px;
  color: var(--ops-text-secondary);
  line-height: 1.3;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  overflow-wrap: break-word;
}

html.ops-navy .tg-time { font-variant-numeric: tabular-nums; }
html.ops-navy .tg-rep { width: 11px; height: 11px; flex: none; }

html.ops-navy .tg-btasks {
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

html.ops-navy .tg-btask {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 11.5px;
  color: var(--ops-text-primary);
  overflow-wrap: break-word;
}

html.ops-navy .tg-btask.is-done span { text-decoration: line-through; color: var(--ops-text-secondary); }

html.ops-navy .tg-h {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  cursor: ns-resize;
}

html.ops-navy .tg-h::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 22px;
  height: 3px;
  margin-left: -11px;
  border-radius: 2px;
  background: var(--ops-text-tertiary);
  opacity: 0;
}

html.ops-navy .tg-blk:hover .tg-h::after,
html.ops-navy .tg-blk.is-sel .tg-h::after { opacity: 1; }

html.ops-navy .tg-daylist {
  border-left: 1px solid var(--ops-line-default);
  overflow-y: auto;
  min-height: 0;
  padding: 14px 16px 24px;
}

html.ops-navy .tg-sec { margin-top: 18px; }
html.ops-navy .tg-daylist .tg-sec:first-child,
html.ops-navy .tg-panel .tg-sec:first-child { margin-top: 0; }

html.ops-navy .tg-sec h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ops-text-tertiary);
  display: flex;
  gap: 8px;
  align-items: center;
}

html.ops-navy .tg-sec h3 span {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ops-text-tertiary);
  font-variant-numeric: tabular-nums;
}

html.ops-navy .tg-sec h3.is-late { color: var(--ops-status-bad); }

html.ops-navy .tg-ilist { display: grid; gap: 6px; }

html.ops-navy .tg-irow,
html.ops-navy .tg-brow {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--ops-bg-surface);
  color: var(--ops-text-primary);
  text-align: left;
  width: 100%;
}

html.ops-navy .tg-brow {
  border: 0;
  cursor: pointer;
  font: inherit;
}

html.ops-navy .tg-irow:hover,
html.ops-navy .tg-brow:hover { background: var(--ops-bg-surface-hover); }

html.ops-navy .tg-iname { flex: 1; min-width: 0; overflow-wrap: break-word; line-height: 1.35; }
html.ops-navy .tg-iname small,
html.ops-navy .tg-brow small {
  display: block;
  color: var(--ops-text-tertiary);
  font-size: 11.5px;
  font-weight: 500;
}

html.ops-navy .tg-irow.is-done .tg-iname { text-decoration: line-through; color: var(--ops-text-secondary); }
html.ops-navy .tg-est {
  margin-left: auto;
  font-size: 11px;
  color: var(--ops-text-tertiary);
  white-space: nowrap;
  padding-left: 6px;
  font-variant-numeric: tabular-nums;
}

html.ops-navy .tg-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--bc, var(--ops-bucket-none));
  margin-top: 5px;
  flex: none;
}

html.ops-navy .tg-empty {
  margin: 0;
  color: var(--ops-text-tertiary);
  font-size: 13px;
  line-height: 1.45;
}

/* ---- block panel (right column) ---- */
html.ops-navy .tg-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: var(--pv-font);
  color: var(--ops-text-primary);
}

html.ops-navy .tg-ph {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

html.ops-navy .tg-ph h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

html.ops-navy .tg-x {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  border-radius: 6px;
  color: var(--ops-text-secondary);
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
}

html.ops-navy .tg-x:hover { background: var(--ops-bg-surface-hover); color: var(--ops-text-primary); }

html.ops-navy .tg-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--ops-text-tertiary);
  line-height: 1.45;
  background: var(--ops-bg-canvas);
  border-radius: 6px;
  padding: 10px 12px;
}

html.ops-navy .tg-note b { color: var(--ops-text-primary); font-weight: 700; }

html.ops-navy .tg-form { display: grid; gap: 12px; }

html.ops-navy .tg-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--ops-text-tertiary);
  font-weight: 600;
}

html.ops-navy .tg-form input,
html.ops-navy .tg-form textarea,
html.ops-navy .tg-form select,
html.ops-navy .tg-sec select {
  width: 100%;
  height: 38px;
  border: 0;
  border-radius: 6px;
  background: var(--ops-bg-surface);
  box-shadow: inset 0 0 0 1px var(--ops-line-strong);
  padding: 0 10px;
  font: 400 13.5px/1.3 var(--pv-font);
  color: var(--ops-text-primary);
}

html.ops-navy .tg-form textarea {
  height: 78px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.45;
}

html.ops-navy .tg-form select,
html.ops-navy .tg-sec select {
  height: 36px;
  appearance: none;
  padding-right: 30px;
  background-image: var(--ops-icon-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

html.ops-navy .tg-form select:hover,
html.ops-navy .tg-sec select:hover { background-color: var(--ops-bg-surface-hover); }

html.ops-navy .tg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

html.ops-navy .tg-act {
  border: 0;
  background: none;
  padding: 4px 6px;
  border-radius: 5px;
  color: var(--ops-text-secondary);
  font: 600 12.5px/1.3 var(--pv-font);
  cursor: pointer;
  text-align: left;
}

html.ops-navy .tg-act:hover { background: var(--ops-bg-surface-hover); color: var(--ops-text-primary); }
html.ops-navy .tg-open { padding-left: 0; }
html.ops-navy .tg-open:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

html.ops-navy .tg-acts { display: flex; flex-wrap: wrap; gap: 4px 6px; }
html.ops-navy .tg-sec select { margin-top: 8px; }

html.ops-navy .tg-kv {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 12px;
  font-size: 13px;
  margin: 0;
}

html.ops-navy .tg-kv dt { color: var(--ops-text-tertiary); }
html.ops-navy .tg-kv dd { margin: 0; overflow-wrap: break-word; }

html.ops-navy .tg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

html.ops-navy .tg :focus-visible,
html.ops-navy .tg-panel :focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
}

html.ops-navy .tg-blk.is-sel:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--ops-focus), 0 8px 20px transparent;
}

/* Narrow main column: due chips become one "N not in a block" line so the week still fits. */
@container tg (max-width: 1180px) {
  html.ops-navy .tg-meta { margin-left: 0; width: 100%; }
  html.ops-navy .tg-inner.is-week .tg-chips,
  html.ops-navy .tg-inner.is-week .tg-more { display: none; }
  html.ops-navy .tg-inner.is-week .tg-due-n { display: block; }
}

/* Phone: the week scrolls sideways; the day list hides (the right column is the sheet). */
@media (max-width: 1439.98px) {
  html.ops-navy .tg-inner.is-week { min-width: calc(var(--tg-gutter) + 7 * 118px); }
  html.ops-navy .tg-daywrap { grid-template-columns: minmax(0, 1fr); }
  html.ops-navy .tg-daylist { display: none; }
  html.ops-navy .tg-x { width: 44px; height: 44px; }
  html.ops-navy .tg-act { min-height: 44px; display: inline-flex; align-items: center; }
  html.ops-navy .tg-dlink { min-height: 44px; }
}

@media (pointer: coarse) {
  html.ops-navy .tg-col,
  html.ops-navy .tg-blk { touch-action: pan-y; }
  html.ops-navy .tg-h { height: 18px; }
}

/* The phone week snaps to whole days, so a column is never left cut in half. */
@media (max-width: 1439.98px) {
  html.ops-navy .tg-scroll { scroll-snap-type: x proximity; scroll-padding-left: var(--tg-gutter); }
  html.ops-navy .tg-inner.is-week .tg-col { scroll-snap-align: start; }
}

html.ops-navy {
  --wk-page: var(--ops-bg-canvas);
  --wk-col: var(--ops-bg-plane);
  --wk-col-today: var(--ops-bg-surface);
  --wk-head: var(--ops-bg-surface);
  --wk-head-today: var(--ops-bg-surface-hover);
  --wk-hour: var(--ops-line-default);
  --wk-half: var(--ops-hover-wash);
  --wk-line: var(--ops-line-default);
}

html.ops-navy .tg-dn { font-size: 11.5px; letter-spacing: .06em; }
html.ops-navy .tg-dd { font-size: 20px; font-weight: 700; line-height: 26px; }
html.ops-navy .tg-day.is-today .tg-dd { border-radius: 6px; padding: 0 7px; }
html.ops-navy .tg-meta { font-size: 11.5px; font-weight: 500; }
html.ops-navy .tg-hr { color: var(--ops-text-tertiary); font-size: 11px; font-weight: 500; }
html.ops-navy .tg-gutter { color: var(--ops-text-tertiary); }

html.ops-navy .tg-inner { background: var(--wk-page); }
html.ops-navy .tg-head,
html.ops-navy .tg-body { column-gap: 4px; }
html.ops-navy .tg-head { border-bottom: 0; row-gap: 0; }
html.ops-navy .tg-day,
html.ops-navy .tg-sea-row,
html.ops-navy .tg-due,
html.ops-navy .tg-col { border-left: 0; }
html.ops-navy .tg-day {
  position: relative;
  background: var(--wk-head);
  border-radius: 8px 8px 0 0;
  padding: 12px 12px 10px;
  box-shadow: inset 0 1px 0 var(--ops-line-default);
}
html.ops-navy .tg-sea-row,
html.ops-navy .tg-due { background: var(--wk-head); }
html.ops-navy .tg-due { padding: 4px 8px 10px; border-bottom: 1px solid var(--wk-line); }
html.ops-navy .tg-col {
  background-color: var(--wk-col);
  border-radius: 0 0 8px 8px;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--tg-hour) - 1px), var(--wk-hour) calc(var(--tg-hour) - 1px) var(--tg-hour)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--tg-hour) / 2 - 1px), var(--wk-half) calc(var(--tg-hour) / 2 - 1px) calc(var(--tg-hour) / 2));
}
html.ops-navy .tg-day.is-today,
html.ops-navy .tg-sea-row.is-today,
html.ops-navy .tg-due.is-today { background: var(--wk-head-today); }
html.ops-navy .tg-day.is-today::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 8px 8px 0 0;
  background: var(--ops-status-good);
}
html.ops-navy .tg-col.is-today { background-color: var(--wk-col-today); }
html.ops-navy .tg-col.is-drop { background-color: var(--ops-bg-surface-press); }

html.ops-navy .tg-blk {
  background: var(--bc);
  border: 0;
  border-radius: 8px;
  padding: 6px 9px 8px;
  color: var(--ops-text-on-category);
  box-shadow: 0 1px 0 transparent inset, 0 10px 22px transparent;
}
html.ops-navy .tg-blk:hover { background: color-mix(in srgb, var(--bc) 88%, var(--ops-text-primary)); }
html.ops-navy .tg-blk .tg-bt { font-weight: 700; color: var(--ops-text-on-category); }
html.ops-navy .tg-blk .tg-bm,
html.ops-navy .tg-blk .tg-btask { color: var(--ops-text-on-category); font-weight: 600; }
html.ops-navy .tg-blk .pv-tick { box-shadow: inset 0 0 0 1.5px var(--ops-text-on-category); }
html.ops-navy .tg-blk.is-sel { box-shadow: inset 0 0 0 2px var(--ops-focus), 0 10px 22px transparent; }
html.ops-navy .tg-h::after { background: var(--ops-text-on-category); }

/* A block title too long for a narrow day (1440: "Weekly Programming" in a 92px block) breaks with a hyphen at a
   syllable, never mid-letter ("Programmin / g"). */
html.ops-navy .tg-bt { hyphens: auto; -webkit-hyphens: auto; }
@container tg (max-width: 900px) {
  html.ops-navy .tg-inner.is-week .tg-blk { padding-left: 7px; padding-right: 6px; }
}

/* Phone week fits all seven days, so no day is cut at the edge. */
@media (max-width: 1439.98px) {
  html.ops-navy .tg-inner.is-week { --tg-gutter: 40px; min-width: 0; }
  html.ops-navy .tg-inner.is-week .tg-head,
  html.ops-navy .tg-inner.is-week .tg-body { column-gap: 3px; }
  html.ops-navy .tg-inner.is-week .tg-day { flex-direction: column; align-items: center; padding: 9px 2px 6px; gap: 2px; text-align: center; }
  html.ops-navy .tg-inner.is-week .tg-dlink { flex-direction: column; align-items: center; gap: 2px; }
  html.ops-navy .tg-inner.is-week .tg-dn { font-size: 10.5px; letter-spacing: .04em; }
  html.ops-navy .tg-inner.is-week .tg-dd { font-size: 17px; line-height: 22px; }
  html.ops-navy .tg-inner.is-week .tg-day.is-today .tg-dd { padding: 0 5px; }
  html.ops-navy .tg-inner.is-week .tg-meta { margin: 0; width: auto; font-size: 10.5px; line-height: 1.25; }
  html.ops-navy .tg-inner.is-week .tg-due { padding: 2px 2px 6px; }
  html.ops-navy .tg-inner.is-week .tg-due-n { padding: 2px 0; font-size: 10.5px; line-height: 1.25; text-align: center; }
  html.ops-navy .tg-inner.is-week .tg-gutter { font-size: 9.5px; padding-right: 4px; }
  html.ops-navy .tg-inner.is-week .tg-hr { font-size: 9.5px; padding-right: 4px; }
  html.ops-navy .tg-inner.is-week .tg-blk { padding: 4px 3px 4px 4px; border-radius: 6px; }
  html.ops-navy .tg-inner.is-week .tg-bt { font-size: 10.5px; line-height: 1.2; }
  html.ops-navy .tg-inner.is-week .tg-bm,
  html.ops-navy .tg-inner.is-week .tg-btasks { display: none; }
  html.ops-navy .tg-scroll { scroll-snap-type: none; }
}

/* The day's count already sits under its date, so the Due row is omitted. A 40-60px day cannot hold a title whole, and a title broken into letters is worse than none. */
@media (max-width: 1439.98px) {
  html.ops-navy .tg-inner.is-week .tg-due,
  html.ops-navy .tg-inner.is-week .tg-gutter-due,
  html.ops-navy .tg-inner.is-week .tg-bt { display: none; }
}

html.ops-navy {
  --wk-head: var(--ops-bg-surface-hover);
  --wk-due: var(--ops-bg-plane);
  --wk-col: var(--ops-bg-plane);
  --wk-head-today: var(--ops-bg-surface-press);
  --wk-due-today: var(--ops-bg-surface);
  --wk-col-today: var(--ops-bg-surface);
}
html.ops-navy .tg-sea-row { background: var(--wk-head); }
html.ops-navy .tg-due { background: var(--wk-due); border-bottom-color: var(--wk-line); box-shadow: inset 0 1px 0 var(--ops-line-default); }
html.ops-navy .tg-due.is-today { background: var(--wk-due-today); }
html.ops-navy .tg-head > .tg-gutter-due { align-self: stretch; }

/* Under 1440 the season row is at least 44px so the event name has room. It broke into single letters in a 40px day. */
@media (max-width: 1439.98px) {
  html.ops-navy .tg-inner.is-week .tg-sea-band {
    column-gap: 3px;
    grid-template-rows: repeat(var(--tg-sea-lanes, 1), minmax(44px, auto));
  }
  html.ops-navy .tg-inner.is-week .tg-sea-row { min-height: 44px; }
}

html.ops-navy .tg-due { padding: 6px 8px 8px; gap: 6px; }
html.ops-navy .tg-due-tog {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 6px;
  background: var(--ops-btn-bg);
  box-shadow: inset 0 0 0 1px var(--ops-line-strong);
  color: var(--ops-text-primary);
  font: 700 13.5px/1 var(--pv-font);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
html.ops-navy .tg-due-tog:hover { background: var(--ops-btn-bg-hover); box-shadow: inset 0 0 0 1px var(--ops-line-strong); }
html.ops-navy .tg-due-tog:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .tg-due.is-open .tg-due-tog { background: var(--ops-btn-bg-press); }
html.ops-navy .tg-chev { width: 14px; height: 14px; flex: none; color: var(--ops-text-secondary); transition: transform .15s ease; }
html.ops-navy .tg-due.is-open .tg-chev { transform: rotate(90deg); }
html.ops-navy .tg-due-badge {
  margin-left: auto;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--ops-selected-bg);
  color: var(--ops-selected-text);
  font: 700 12.5px/22px var(--pv-font);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
html.ops-navy .tg-due-none {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ops-text-tertiary);
}
html.ops-navy .tg-due-body { display: none; flex-direction: column; gap: 4px; min-width: 0; }
html.ops-navy .tg-due.is-open .tg-due-body { display: flex; }
html.ops-navy .tg-dn-short { display: none; }
html.ops-navy .tg-head > .tg-gutter-due { padding-top: 17px; }
/* Narrow days (~96px): the count stays on the button and Due sits in the hour column. */
@container tg (max-width: 1180px) {
  html.ops-navy .tg-inner.is-week .tg-due { padding: 6px 6px 8px; }
  html.ops-navy .tg-inner.is-week .tg-due-tog { justify-content: center; gap: 6px; padding: 0 6px; }
  html.ops-navy .tg-inner.is-week .tg-due-tog .tg-due-lbl { display: none; }
  html.ops-navy .tg-inner.is-week .tg-due-tog .tg-due-badge { margin-left: 0; }
  html.ops-navy .tg-inner.is-week .tg-due-none { justify-content: center; padding: 0; }
  html.ops-navy .tg-inner.is-week .tg-dn-long { display: none; }
  html.ops-navy .tg-inner.is-week .tg-dn-short { display: inline; }
  html.ops-navy .tg-inner.is-week .tg-due.is-open .tg-chips { display: flex; }
  html.ops-navy .tg-inner.is-week .tg-due.is-open .tg-more { display: block; }
  html.ops-navy .tg-inner.is-week .tg-due.is-open .tg-due-n { display: none; }
  /* An opened narrow day stacks the tick over the name, so names wrap at spaces (no words broken mid-letter). */
  html.ops-navy .tg-inner.is-week .tg-due.is-open .pv-chip { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  html.ops-navy .tg-inner.is-week .tg-due.is-open .pv-chip .pv-cn {
    font-size: 12.5px;
    line-height: 1.3;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.ops-navy .tg-chev { transition: none; }
}

/* The day stretches to the canvas, never under 56px an hour. timegrid.js reads the drawn hour back for dragging, so rows, lines and blocks stay shares of the day. */
html.ops-navy .tg-hours { display: grid; grid-auto-rows: minmax(0, 1fr); }
html.ops-navy .tg-hr { height: auto; }
html.ops-navy .tg-col {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(100% / var(--tg-hours, 16) - 1px), var(--wk-hour) calc(100% / var(--tg-hours, 16) - 1px) calc(100% / var(--tg-hours, 16))),
    repeating-linear-gradient(to bottom, transparent 0 calc(50% / var(--tg-hours, 16) - 1px), var(--wk-half) calc(50% / var(--tg-hours, 16) - 1px) calc(50% / var(--tg-hours, 16)));
}

/* A season name wraps to two lines. The rest is hidden, with no ellipsis. The full name is the tooltip. */
html.ops-navy .tg-inner.is-week .tg-sea-n {
  display: block;
  max-height: 2.6em;
  overflow: hidden;
  overflow-wrap: break-word;
}
@media (max-width: 1439.98px) {
  html.ops-navy .tg-inner.is-week .tg-sea {
    margin: 0;
    padding: 2px 2px 2px 5px;
    font-size: 10px;
    line-height: 1.2;
    min-height: 44px;
  }
}

/* Block lines are chosen in timegrid.js from the drawn height. The time line never wraps and is dropped when the block is too narrow to hold it whole. */
html.ops-navy .tg-blk { container: blk / inline-size; }
html.ops-navy .tg-blk.tg-xs { padding: 0 8px; }
html.ops-navy .tg-blk.tg-sm { padding: 4px 8px; }
html.ops-navy .tg-blk.tg-md { padding: 8px; }
html.ops-navy .tg-blk.tg-xs,
html.ops-navy .tg-blk.tg-sm,
html.ops-navy .tg-blk.tg-md { gap: 0; }
html.ops-navy .tg-blk .tg-bt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
}
html.ops-navy .tg-blk.tg-xs .tg-bt { font-size: 11px; line-height: 12px; }
html.ops-navy .tg-blk.tg-sm .tg-bt { font-size: 12px; line-height: 16px; }
html.ops-navy .tg-blk.tg-md .tg-bt { font-size: 14px; line-height: 20px; }
html.ops-navy .tg-blk .tg-bm {
  display: block;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.ops-navy .tg-blk .tg-bm .tg-rep { display: inline-block; vertical-align: -2px; margin-left: 6px; }
html.ops-navy .tg-blk .tg-btasks { margin-top: 0; gap: 0; overflow: hidden; }
html.ops-navy .tg-blk .tg-btask {
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  align-items: center;
  overflow: hidden;
}
html.ops-navy .tg-blk .tg-btask span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.ops-navy .tg-blk .tg-btask .pv-tick { flex: none; }
/* Narrow block (a 92px day at 1440, or one of several side by side): the longest time line (12px, "10:30 – 11:30 AM" plus
   the repeat mark) needs 124px; under that it is not shown, and the title steps down to 12/16. */
@container blk (max-width: 123.98px) {
  html.ops-navy .tg-blk .tg-bm.tg-time { display: none; }
  html.ops-navy .tg-blk.tg-md .tg-bt { font-size: 12px; line-height: 16px; }
}

@media (max-width: 1439.98px) {
  html.ops-navy .tg-inner.is-week .tg-blk.tg-xs,
  html.ops-navy .tg-inner.is-week .tg-blk.tg-sm,
  html.ops-navy .tg-inner.is-week .tg-blk.tg-md { padding: 4px 3px 4px 4px; }
  html.ops-navy .tg-inner.is-week .tg-blk .tg-bt { font-size: 10.5px; line-height: 1.2; }
}

@media (min-width: 1440px) {
  html.ops-navy .tg-head,
  html.ops-navy .tg-body,
  html.ops-navy .tg-sea-band { column-gap: 8px; }
  html.ops-navy .tg-dn { font-size: 12px; line-height: 16px; }
  html.ops-navy .tg-dd { font-size: 20px; line-height: 28px; }
  html.ops-navy .tg-hr { font-size: 12px; line-height: 16px; transform: translateY(-8px); }
  html.ops-navy .tg-sea-row { padding: 0 8px 8px; }
  html.ops-navy .tg-due { padding: 8px; }
}

/* Remove from the card: a small x in the top-right corner, shown on hover or keyboard focus. It sits on
   the block's own fill, so it covers the title's last letters while shown and nothing re-wraps or moves. */
html.ops-navy .tg-blk .tg-rm {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: inherit;
  color: var(--ops-text-on-category);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
html.ops-navy .tg-blk:hover .tg-rm,
html.ops-navy .tg-blk:focus-within .tg-rm { opacity: 1; pointer-events: auto; }
html.ops-navy .tg-blk .tg-rm:hover { background: var(--ops-hover-wash); }
html.ops-navy .tg-blk .tg-rm:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-text-on-category); }
html.ops-navy .tg-blk.tg-xs .tg-rm { top: 0; height: 100%; max-height: 22px; }
@media (hover: none) {
  html.ops-navy .tg-blk.is-sel .tg-rm { opacity: 1; pointer-events: auto; }
}

html.ops-navy .tg-blk.tg-task {
  background: color-mix(in srgb, var(--bc) 30%, var(--ops-bg-surface));
  border-left: 3px solid var(--bc);
  box-shadow: none;
  cursor: pointer;
  color: var(--ops-text-primary);
}
html.ops-navy .tg-blk.tg-task:hover { background: color-mix(in srgb, var(--bc) 38%, var(--ops-bg-surface)); }
html.ops-navy .tg-blk.tg-task .tg-bt { color: var(--ops-text-primary); }
html.ops-navy .tg-blk.tg-task .tg-bm { color: var(--ops-text-secondary); }
html.ops-navy .tg-blk.tg-task:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .tg-blk.tg-task.is-sel,
html.ops-navy .tg-blk.tg-task.is-sel:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
@media (pointer: coarse) {
  html.ops-navy .tg-blk.tg-task { min-height: 44px; }
}

html.ops-navy .tg-hv { position: absolute; left: 0; right: 0; z-index: 3; background: var(--ops-hover-wash); pointer-events: none; }
html.ops-navy .tg-plus {
  position: absolute;
  left: calc(50% - 22px);
  top: calc(50% - 22px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ops-line-strong);
  border-radius: 6px;
  background: var(--ops-bg-surface);
  color: var(--ops-text-primary);
  cursor: pointer;
  pointer-events: auto;
}
html.ops-navy .tg-plus:hover { background: var(--ops-bg-surface-hover); }
html.ops-navy .tg-plus svg { width: 20px; height: 20px; }
html.ops-navy .tg-selslot {
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 4;
  box-sizing: border-box;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  overflow: hidden;
  border: 2px solid var(--ops-line-strong);
  border-radius: 4px;
  background: var(--ops-hover-wash);
  color: var(--ops-text-secondary);
  font: 600 12px/16px var(--pv-font);
  white-space: nowrap;
  cursor: pointer;
}
html.ops-navy .tg-selslot svg { flex: none; width: 14px; height: 14px; }
html.ops-navy .tg-panel.tg-draft > .tg-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: auto -24px -32px;
  padding: 12px 24px;
  border-top: 1px solid var(--ops-line-default);
  background: var(--fr-side, var(--ops-bg-surface));
}
html.ops-navy .tg-add {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: var(--ops-accent-primary);
  color: var(--ops-accent-on-primary);
  font: 600 14px/20px var(--pv-font);
  cursor: pointer;
}
html.ops-navy .tg-add:hover { background: var(--ops-accent-primary-hover); }
html.ops-navy .tg-add:active { background: var(--ops-accent-primary-press); }
html.ops-navy .tg-fw { display: flex; align-items: center; gap: 20px; min-height: 36px; margin-top: 4px; }
html.ops-navy .tg-fw .tg-act { padding: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--ops-text-primary); }
html.ops-navy .tg-fw .tg-act:hover { background: none; }
@media (pointer: coarse) {
  html.ops-navy .tg-add { height: 44px; }
  html.ops-navy .tg-fw { min-height: 44px; }
}

@media (min-width: 1440px) {
  html.ops-navy body[data-view="projects"]:not(.gated) #pv-side {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 12px;
    bottom: 12px;
    right: 12px;
    width: var(--pv-side-w, 404px);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--dp5-surface);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--dp5-line-card);
    z-index: 2;
  }
  html.ops-navy body[data-view="projects"]:not(.gated) #view:has(> .pt-root) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: transparent;
  }
}

html.ops-navy .pt-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font: 400 14px/1.45 var(--pv-font, Inter, system-ui, sans-serif);
  color: var(--dp5-text);
}
html.ops-navy .pt-root button,
html.ops-navy .pt-root select,
html.ops-navy #pv-nav-projects .ptn-p,
html.ops-navy .pt-side button { font-family: inherit; }

html.ops-navy .pt-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 20px 12px;
  flex-wrap: wrap;
}
html.ops-navy .pt-fld {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dp5-text-3);
}
html.ops-navy :is(.pt-bar, #toolbar .pt-ctl) select.dpt-field {
  height: 36px;
  border-radius: 6px;
  border: 0;
  background-color: var(--dp5-raised);
  box-shadow: inset 0 0 0 1px var(--dp5-line-strong);
  color: var(--dp5-text);
  padding: 0 30px 0 10px;
  font-size: 13px;
  appearance: none;
  background-image: var(--ops-icon-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
}
html.ops-navy :is(.pt-bar, #toolbar .pt-ctl) select.dpt-field:hover { background-color: var(--dp5-raised-hover); }
html.ops-navy .pt-act {
  border: 0;
  background: none;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--dp5-text-2);
  font-weight: 500;
  font-size: 13px;
}
html.ops-navy .pt-act:hover { background: var(--dp5-raised-hover); color: var(--dp5-text); }
html.ops-navy .pt-range {
  width: 20ch;
  text-align: center;
  font-weight: 600;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

html.ops-navy .pt-frame {
  flex: 1;
  min-height: 0;
  margin: 0 16px 20px;
  background: var(--dp5-surface);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--dp5-line-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.ops-navy .pt-tl,
html.ops-navy .pt-lst { flex: 1; min-height: 0; overflow: auto; }
html.ops-navy .pt-in { min-width: 1040px; padding-bottom: 18px; }

html.ops-navy .pt-row {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 36px;
  border-bottom: 1px solid var(--dp5-line-canvas, var(--ops-line-default));
}
html.ops-navy .pt-hd {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--dp5-surface);
  border-bottom: 1px solid var(--dp5-line);
  min-height: 50px;
}
html.ops-navy .pt-grp {
  background: var(--ops-bg-surface);
  margin-top: 26px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid var(--ops-line-default);
  min-height: 44px;
}
html.ops-navy .pt-hd + .pt-grp { margin-top: 12px; }
html.ops-navy .pt-g-get { --gc: var(--pv-c-get); }
html.ops-navy .pt-g-serve { --gc: var(--pv-c-serve); }
html.ops-navy .pt-g-ops { --gc: var(--pv-c-ops); }
html.ops-navy .pt-g-grow { --gc: var(--pv-c-grow); }
html.ops-navy .pt-g-season,
html.ops-navy .pt-g-other { --gc: var(--ops-text-secondary); }

html.ops-navy .pt-lab {
  padding: 7px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  min-width: 0;
  font-size: 13px;
  border-right: 1px solid var(--dp5-line);
}
html.ops-navy .pt-hd .pt-lab {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dp5-text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}
html.ops-navy .pt-grp .pt-lab {
  font-weight: 700;
  font-size: 15px;
  color: var(--ops-text-primary);
  border-right: 0;
  padding-left: 18px;
  gap: 10px;
}
html.ops-navy .pt-gn { min-width: 0; }
html.ops-navy .pt-count {
  color: var(--dp5-text-2);
  font-size: 12px;
  font-weight: 600;
  background: var(--ops-hover-wash);
  border-radius: 4px;
  padding: 1px 7px;
  flex: none;
  letter-spacing: 0;
  text-transform: none;
}
html.ops-navy .pt-lab {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--dp5-surface);
}
html.ops-navy .pt-hd .pt-lab { top: 0; z-index: 5; }
html.ops-navy .pt-grp .pt-lab {
  z-index: 2;
  background: var(--ops-bg-surface);
  box-shadow: none;
}
html.ops-navy .pt-grp .pt-lab::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gc, var(--dp5-text-3));
  flex: none;
}
html.ops-navy .pt-in-g .pt-lab {
  padding-left: 18px;
  box-shadow: none;
}
html.ops-navy .pt-word.is-nodates { color: var(--dp5-text-3); }
html.ops-navy .pt-bare {
  margin: 8px 20px 24px;
  padding: 4px 4px 8px;
}
html.ops-navy .pt-bare h2 {
  margin: 18px 0 2px;
  font-size: 16px;
  font-weight: 700;
}
html.ops-navy .pt-bare > p {
  margin: 0 0 10px;
  color: var(--dp5-text-3);
  font-size: 13px;
}
html.ops-navy .pt-ndrow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px;
  border-top: 1px solid var(--ops-line-default);
}
html.ops-navy .pt-ndname { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
html.ops-navy .pt-ndname span { overflow-wrap: anywhere; }
html.ops-navy .pt-ndcat, html.ops-navy .pt-ndmeta { color: var(--dp5-text-3); font-size: 13px; }
html.ops-navy .pt-ndname .pt-dot { width: 9px; height: 9px; }
html.ops-navy .pt-ndadd {
  border: 0;
  background: none;
  color: var(--ops-text-primary);
  font: 600 14px/1 var(--pv-font, Inter, system-ui, sans-serif);
  padding: 0;
  cursor: pointer;
  min-height: 44px;
}
html.ops-navy .pt-ndadd:hover { color: var(--ops-text-primary); }
html.ops-navy .pt-click:hover .pt-lab {
  background: color-mix(in srgb, var(--dp5-raised-hover) 45%, var(--dp5-surface));
}
html.ops-navy .pt-in-g.is-last { border-radius: 0 0 8px 8px; }
html.ops-navy .pt-click { cursor: pointer; }
html.ops-navy .pt-click:hover { background: color-mix(in srgb, var(--dp5-raised-hover) 45%, transparent); }
html.ops-navy .pt-nm { flex: 1 1 8em; min-width: 6em; line-height: 1.35; overflow-wrap: break-word; }
html.ops-navy .pt-pg {
  font-size: 12px;
  color: var(--dp5-text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: none;
}
html.ops-navy .pt-sq {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
  background: var(--st-park);
}
html.ops-navy .pt-sq.is-on_track { background: var(--st-ok); }
html.ops-navy .pt-sq.is-warning { background: var(--st-warn); }
html.ops-navy .pt-sq.is-at_risk { background: var(--st-risk); }
html.ops-navy .pt-sq.is-parked,
html.ops-navy .pt-sq.is-done { background: var(--st-park); }
html.ops-navy .pt-word { font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: none; }
html.ops-navy .pt-word.is-on_track { color: var(--st-ok); }
html.ops-navy .pt-word.is-warning { color: var(--st-warn); }
html.ops-navy .pt-word.is-at_risk { color: var(--st-risk); }
html.ops-navy .pt-word.is-parked,
html.ops-navy .pt-word.is-done { color: var(--st-park); }
/* The bar fades. The status word stays at full strength so Parked is still readable. */
html.ops-navy .pt-row.is-parked .pt-gbar { opacity: .55; }

/* The track sits under the sticky names, so a scrolled today-line cannot cut through a word. */
html.ops-navy .pt-trk { position: relative; z-index: 1; min-width: 0; }
html.ops-navy .pt-mo { display: grid; height: 100%; }
html.ops-navy .pt-mo div {
  border-left: 1px solid var(--dp5-line-canvas, var(--ops-line-default));
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dp5-text-3);
  padding: 9px 8px;
  white-space: nowrap;
}
html.ops-navy .pt-grid {
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
}
html.ops-navy .pt-grid div { border-left: 1px solid var(--dp5-line-canvas, var(--ops-line-default)); }
html.ops-navy .pt-marks { position: absolute; inset: 0; }
html.ops-navy .pt-gbar {
  position: absolute;
  top: 9px;
  height: 18px;
  border-radius: 4px;
  background: var(--ops-bg-surface-hover);
  box-shadow: inset 0 0 0 1px var(--bc, var(--pv-c-none));
  overflow: hidden;
}
html.ops-navy .pt-gbar i { position: absolute; inset: 0 auto 0 0; background: var(--bc, var(--pv-c-none)); opacity: .9; }
html.ops-navy .pt-c-get { --bc: var(--pv-c-get); }
html.ops-navy .pt-c-serve { --bc: var(--pv-c-serve); }
html.ops-navy .pt-c-ops { --bc: var(--pv-c-ops); }
html.ops-navy .pt-c-grow { --bc: var(--pv-c-grow); }
html.ops-navy .pt-c-none { --bc: var(--pv-c-none); }
html.ops-navy .pt-tick {
  position: absolute;
  top: 6px;
  width: 3px;
  height: 24px;
  border-radius: 1px;
  background: var(--ops-text-primary);
  opacity: .9;
  transform: translateX(-1px);
}
html.ops-navy .pt-tick.is-open { background: none; box-shadow: inset 0 0 0 1.5px var(--ops-text-primary); opacity: .7; }
html.ops-navy .pt-tick.is-late { background: var(--pv-late); box-shadow: none; opacity: 1; }
html.ops-navy .pt-dia {
  position: absolute;
  top: 11px;
  width: 13px;
  height: 13px;
  transform: translateX(-6px) rotate(45deg);
  background: var(--ops-text-primary);
  border-radius: 2px;
}
html.ops-navy .pt-dia.pt-prep {
  width: 8px;
  height: 8px;
  top: 14px;
  transform: translateX(-4px) rotate(45deg);
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--dp5-text-3);
}
html.ops-navy .pt-dia.pt-prep.is-past { background: var(--dp5-text-3); }
html.ops-navy .pt-span {
  position: absolute;
  top: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--sea-fill, var(--ops-bg-surface-hover));
  box-shadow: inset 3px 0 0 var(--sea-edge, var(--ops-text-tertiary));
}
html.ops-navy .pt-sname {
  position: absolute;
  top: 8px;
  font-size: 12px;
  color: var(--dp5-text-2);
  white-space: nowrap;
}
html.ops-navy .pt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pv-late);
  z-index: 2;
  pointer-events: none;
}
html.ops-navy .pt-todaylab {
  position: absolute;
  top: 30px;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 700;
  background: var(--pv-late);
  color: var(--ops-text-on-status);
  padding: 0 5px;
  border-radius: 4px;
  z-index: 3;
  white-space: nowrap;
}

html.ops-navy .pt-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
html.ops-navy .pt-tbl th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--dp5-surface);
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dp5-text-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--dp5-line);
}
html.ops-navy .pt-tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--dp5-line-canvas, var(--ops-line-default));
  vertical-align: top;
}
html.ops-navy .pt-lname span { overflow-wrap: anywhere; }
html.ops-navy .pt-lane { white-space: nowrap; }
html.ops-navy .pt-tbl small { color: var(--dp5-text-3); }
html.ops-navy .pt-lrow { cursor: pointer; }
html.ops-navy .pt-lrow:hover td { background: color-mix(in srgb, var(--dp5-raised-hover) 45%, transparent); }
html.ops-navy .pt-lname { display: flex; gap: 10px; align-items: flex-start; }
html.ops-navy .pt-lname .pt-sq { margin-top: 4px; }
html.ops-navy .pt-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ops-navy .pt-nodate { color: var(--dp5-text-3); }
html.ops-navy .pt-cat { display: inline-flex; align-items: center; gap: 7px; color: var(--dp5-text-2); white-space: nowrap; }
html.ops-navy .pt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--pv-c-none); }
html.ops-navy .pt-d-get { background: var(--pv-c-get); }
html.ops-navy .pt-d-serve { background: var(--pv-c-serve); }
html.ops-navy .pt-d-ops { background: var(--pv-c-ops); }
html.ops-navy .pt-d-grow { background: var(--pv-c-grow); }
html.ops-navy .pt-who { display: inline-flex; gap: 4px; flex-wrap: wrap; }
html.ops-navy .pt-who i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  color: var(--dp5-ink);
  background: var(--pv-p-staff);
}
html.ops-navy .pt-who i.pt-p-jon { background: var(--pv-p-jon); }
html.ops-navy .pt-who i.pt-p-kendra { background: var(--pv-p-kendra); }
html.ops-navy .pt-lprog { display: flex; align-items: center; gap: 8px; }
html.ops-navy .pt-prog {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--dp5-line);
  overflow: hidden;
  min-width: 64px;
}
html.ops-navy .pt-prog i { display: block; height: 100%; background: var(--bc, var(--pv-c-none)); }
html.ops-navy .pt-empty { margin: 0; padding: 16px; color: var(--dp5-text-3); font-size: 13px; }

html.ops-navy .pt-skel { display: grid; gap: 10px; padding: 16px; }
html.ops-navy .pt-skel-row {
  height: 36px;
  border-radius: 8px;
  background: var(--dp5-skel, var(--dp5-raised));
}

html.ops-navy .pt-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  border: 0;
  background: var(--dp5-raised);
  color: var(--dp5-text);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--dp5-line-card);
  padding: 12px;
  min-height: 44px;
}
html.ops-navy .pt-card:hover { background: var(--dp5-raised-hover); }
html.ops-navy .pt-card-top { display: flex; align-items: flex-start; gap: 8px; }
html.ops-navy .pt-card-sub { color: var(--dp5-text-3); font-size: 12px; line-height: 1.4; overflow-wrap: break-word; }
html.ops-navy .pt-card-bot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.ops-navy .pt-cards { display: grid; gap: 10px; padding: 12px; align-content: start; }

html.ops-navy .pt-phone-nav { padding: 0 10px 16px; }
html.ops-navy .ptn-p {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--pv-font, Inter, system-ui, sans-serif);
}
html.ops-navy .ptn-p {
  min-height: 40px;
  padding: 10px 12px;
  border-radius: var(--pv-r, 6px);
  color: var(--dp5-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
html.ops-navy .ptn-p:hover { background: var(--fr-menu-hover, var(--dp5-raised-hover)); }
/* The dot and the square share one gutter so the names start at the same x. */
html.ops-navy .ptn-dot { width: 8px; height: 8px; margin: 0 1px; border-radius: 50%; flex: none; background: var(--pv-c-none); }
html.ops-navy .ptn-p span { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 0; }
html.ops-navy .ptn-p.is-parked { color: var(--dp5-text-off); }
html.ops-navy .ptn-p[aria-current="page"],
html.ops-navy .ptn-p[aria-current="page"]:hover { background: var(--fr-menu-active, var(--dp5-raised)); font-weight: 600; }
html.ops-navy .pt-phone-nav { display: none; }

html.ops-navy #pv-side > .pt-side { flex: 1; min-height: 0; overflow: auto; }
html.ops-navy .pt-coming {
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font: 400 14px/1.45 var(--pv-font, Inter, system-ui, sans-serif);
  color: var(--dp5-text);
}
html.ops-navy .pt-sh h2 { margin: 0; font-size: 16px; font-weight: 700; }
html.ops-navy .pt-block h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dp5-text-3);
  display: flex;
  gap: 8px;
  align-items: center;
}
html.ops-navy .pt-hint {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--dp5-text-off);
}
html.ops-navy .pt-cu {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 4px 10px;
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dp5-line-canvas, var(--ops-line-default));
}
html.ops-navy .pt-cud { color: var(--dp5-text-3); font-size: 12px; padding-top: 1px; font-variant-numeric: tabular-nums; }
html.ops-navy .pt-cu small { display: block; color: var(--dp5-text-3); font-size: 11.5px; overflow-wrap: anywhere; }
html.ops-navy .pt-link { align-self: flex-start; padding-left: 0; height: auto; min-height: 36px; text-align: left; white-space: normal; }

html.ops-navy .pt-root button:focus-visible,
html.ops-navy .pt-root select:focus-visible,
html.ops-navy .pt-side button:focus-visible,
html.ops-navy #pv-nav-projects .ptn-p:focus-visible,
html.ops-navy .pt-row:focus-visible,
html.ops-navy .pt-lrow:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-focus);
}

@media (max-width: 1439.98px) {
  /* The phone page scrolls. The timeline keeps its own frame so months scroll sideways, not the whole app. */
  html.ops-navy body[data-view="projects"] #view:has(> .pt-root) {
    display: block;
    overflow: auto;
    padding: 0 0 calc(72px + env(safe-area-inset-bottom, 0px));
  }
  html.ops-navy .pt-root { display: block; height: auto; }
  html.ops-navy .pt-frame { height: 70vh; min-height: 420px; }
  html.ops-navy .pt-bar { padding: 8px 16px 10px; gap: 8px; }
  html.ops-navy .pt-fld { flex: 1 1 140px; }
  html.ops-navy .pt-fld > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  html.ops-navy :is(.pt-bar, #toolbar .pt-ctl) select.dpt-field { width: 100%; height: 44px; min-height: 44px; font-size: 16px; }
  html.ops-navy .pt-act { min-height: 44px; height: 44px; }
  html.ops-navy .pt-range { width: 18ch; font-size: 12.5px; }
  html.ops-navy .pt-frame { margin: 0 8px 12px; }
  html.ops-navy .pt-in { min-width: 900px; }
  html.ops-navy .pt-row { grid-template-columns: 200px minmax(0, 1fr); min-height: 44px; }
  html.ops-navy .pt-phone-nav {
    display: block;
    max-height: none;
    overflow: visible;
    padding: 4px 8px 8px;
  }
  html.ops-navy .pt-phone-nav .ptn-p { min-height: 44px; }
  html.ops-navy .pt-card { min-height: 44px; }
}

@container (max-width: 1180px) {
  html.ops-navy .pt-in { min-width: 0; }
  html.ops-navy .pt-row { grid-template-columns: 240px minmax(0, 1fr); }
}

html.ops-navy .pt-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 20px 14px;
  flex-wrap: nowrap;
}
html.ops-navy .pt-dates { display: inline-flex; align-items: center; gap: 8px; flex: none; }
html.ops-navy .pt-obtn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: var(--ops-btn-bg);
  box-shadow: inset 0 0 0 1px var(--ops-line-strong);
  color: var(--dp5-text-2);
  cursor: pointer;
  position: relative;
}
html.ops-navy .pt-obtn:hover { background: var(--ops-btn-bg-hover); box-shadow: inset 0 0 0 1px var(--ops-text-tertiary); color: var(--dp5-text); }
html.ops-navy .pt-obtn[aria-expanded="true"] { background: var(--ops-bg-surface-hover); color: var(--dp5-text); }
html.ops-navy .pt-obtn:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .pt-range {
  width: 180px;
  text-align: center;
  font: 700 16px/1.2 var(--pv-font, Inter, system-ui, sans-serif);
  letter-spacing: -.01em;
  color: var(--dp5-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html.ops-navy .pt-tlink {
  border: 0;
  background: none;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  font: 600 14px/20px var(--dp5-font, Inter, system-ui, sans-serif);
  color: var(--ops-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
}
html.ops-navy .pt-tlink:hover { color: var(--ops-text-primary); }
html.ops-navy .pt-tlink:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .pt-todaybtn { width: 56px; }
html.ops-navy .pt-todaybtn.is-here { color: var(--dp5-text-3); }
html.ops-navy :is(.pt-bar, #toolbar .pt-ctl) select.pt-view {
  width: 124px;
  height: 36px;
  margin-right: 8px;
  padding-left: 12px;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--ops-line-strong);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dp5-text);
}
html.ops-navy :is(.pt-bar, #toolbar .pt-ctl) select.pt-view:hover { background-color: var(--ops-hover-wash); box-shadow: inset 0 0 0 1px var(--ops-text-tertiary); }
html.ops-navy .pt-fbtn.is-on::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--ops-text-primary);
}
html.ops-navy .sh-pop .pt-fpop {
  display: grid;
  gap: 12px;
  padding: 4px;
  color: var(--ops-text-primary);
}
html.ops-navy .pt-fpop .pt-fld { display: grid; gap: 6px; flex: none; }
html.ops-navy .pt-fpop .pt-fld > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--dp5-text-3);
}
html.ops-navy .pt-fpop select.dpt-field { width: 100%; height: 40px; }
html.ops-navy .pt-fpop .pt-addseason { justify-self: start; padding: 0; height: 36px; }
html.ops-navy .pt-todaylab { white-space: nowrap; }
html.ops-navy :is(#toolbar, .sh-pop) .pt-tlink { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 2px; color: var(--ops-text-secondary); }
html.ops-navy :is(#toolbar, .sh-pop) .pt-tlink:hover { color: var(--ops-text-primary); }
html.ops-navy #toolbar .pt-acts { display: flex; align-items: center; gap: 16px; margin-left: 8px; }
html.ops-navy #toolbar .pt-ctl { display: flex; align-items: center; gap: 8px; flex: none; }
html.ops-navy #toolbar .pt-tbid { flex: 0 1 auto; }
@media (min-width: 768px) {
  html.ops-navy .pt-root > .pt-frame:first-child { margin: var(--sh-pad, 24px); }
}

@media (max-width: 1439.98px) {
  html.ops-navy body[data-view="projects"] .shell > .hdr { display: none; }
  html.ops-navy .pt-bar.is-phone {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 10px;
    padding: 8px 16px 12px;
  }
  html.ops-navy .pt-r1,
  html.ops-navy .pt-r2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
  html.ops-navy .pt-title { margin: 0 auto 0 0; font: 700 24px/1.2 var(--pv-font, Inter, system-ui, sans-serif); color: var(--dp5-text); }
  html.ops-navy body[data-view="projects"] .pt-root > .pt-bar.is-phone .pt-r1 .pt-title { font-size: 24px; line-height: 30px; }
  html.ops-navy body[data-view="projects"] .pt-root > .pt-bar.is-phone .pt-r1 { position: relative; top: 3px; }
  html.ops-navy .pt-r2 .pt-dates { flex: 1 1 auto; min-width: 0; gap: 4px; }
  html.ops-navy .pt-r2 .pt-range { flex: 1 1 auto; width: auto; min-width: 0; font-size: 15px; }
  html.ops-navy .pt-obtn { width: 44px; height: 44px; }
  html.ops-navy .pt-tlink { height: 44px; }
  html.ops-navy :is(.pt-bar, #toolbar .pt-ctl) select.pt-view { width: 116px; height: 44px; font-size: 16px; margin-right: 0; }
  html.ops-navy .pt-fpop select.dpt-field { height: 44px; font-size: 16px; }
  html.ops-navy .pt-fpop .pt-addseason { height: 44px; }
  /* Today's label starts at its line. Centred, its left half hid under the sticky project column. */
  html.ops-navy .pt-todaylab { transform: none; margin-left: -1px; border-radius: 0 4px 4px 0; }
}

html.ops-navy .pt-bar { gap: 6px; }
html.ops-navy :is(.pt-bar, #toolbar .pt-ctl) select.pt-view { margin-right: 0; }
html.ops-navy .pt-dates { gap: 6px; }
html.ops-navy .pt-cap {
  display: inline-flex;
  align-items: center;
  height: 36px;
  flex: none;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--ops-line-strong);
}
html.ops-navy .pt-capb {
  width: 32px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--dp5-text-2);
  cursor: pointer;
}
html.ops-navy .pt-capb:hover { background: var(--ops-hover-wash); color: var(--dp5-text); }
html.ops-navy .pt-capb:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-focus); }
html.ops-navy .pt-cap .pt-range { width: 164px; font-size: 14px; }
html.ops-navy .pt-todaybtn { width: auto; padding: 0 12px; font: 600 13px/1 var(--pv-font, Inter, system-ui, sans-serif); color: var(--dp5-text); }
html.ops-navy .pt-todaybtn.is-here { color: var(--dp5-text-3); }
@media (max-width: 1439.98px) {
  html.ops-navy .pt-r2 { justify-content: flex-start; }
  html.ops-navy .pt-r2 .pt-dates { flex: none; }
  html.ops-navy .pt-cap { height: 44px; }
  html.ops-navy .pt-capb { width: 40px; height: 44px; }
  html.ops-navy .pt-r2 .pt-cap .pt-range { flex: none; width: 164px; font-size: 14px; }
  html.ops-navy .pt-todaybtn { height: 44px; }
}

/* The red today line ran through "No dates yet" and the season names ("Programs"). The words sit above
   the line on a patch of the row's own colour (hover tint included), so the line passes behind them. */
html.ops-navy .pt-trk :is(.pt-sname) {
  z-index: 3;
  margin-left: -4px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--fr-canvas, var(--ops-bg-canvas));
}
html.ops-navy .pt-click:hover .pt-trk :is(.pt-sname) {
  background:
    linear-gradient(color-mix(in srgb, var(--dp5-raised-hover) 45%, transparent), color-mix(in srgb, var(--dp5-raised-hover) 45%, transparent)),
    var(--fr-canvas, var(--ops-bg-canvas));
}

/* ------------------------------------------------------------------ Phone names (mobile QA 2026-10-06, OPS-14)
   On a phone the name shared its line with the status word and the count, so it was squeezed into about 108px and
   "DPT Blog: 12-month season calendar (24 posts)" ran to five lines (a 102px row). .pt-tx wraps the
   name, the word and the count: transparent from 768px up, so the wider layouts are exactly as they were; under
   768px it is one block, the name takes the column's width and the word and count follow it as text. The row is one
   grid row, so the bar still lines up with its name. */
html.ops-navy .pt-tx { display: contents; }
@media (max-width: 767.98px) {
  html.ops-navy .pt-in-g .pt-lab .pt-tx { display: block; flex: 1 1 0; min-width: 0; line-height: 1.35; }
  html.ops-navy .pt-in-g .pt-tx .pt-nm { display: inline; margin-right: 8px; }
  html.ops-navy .pt-in-g .pt-tx :is(.pt-word, .pt-pg) { display: inline-block; white-space: nowrap; }
  html.ops-navy .pt-in-g .pt-tx .pt-word { margin-right: 8px; }
}

html.ops-navy .ptn-p { align-items: flex-start; }
html.ops-navy .ptn-p.is-parked { color: var(--dp5-text-3); }

html.ops-navy .pt-phone-nav { padding: 8px 10px 16px; }

@media (min-width: 1440px) {
  html.ops-navy body.restyle[data-view="projects"]:not(.gated):has(#view > :is(.pt-root, .pr-root)) .shell { right: 0; }
  html.ops-navy body.restyle[data-view="projects"]:not(.gated):has(#view > :is(.pt-root, .pr-root)) #pv-side { display: none; }
}
html.ops-navy .pt-cdrawer .pt-sh { display: none; }
html.ops-navy .pt-cdrawer .pt-block { padding: 8px 12px 24px; }

html.ops-navy .pp,
html.ops-navy .pp-side {
  font: 400 14px/1.45 var(--pv-font);
  color: var(--dp5-text);
}

html.ops-navy .pp button:focus-visible,
html.ops-navy .pp a:focus-visible,
html.ops-navy .pp input:focus-visible,
html.ops-navy .pp textarea:focus-visible,
html.ops-navy .pp select:focus-visible,
html.ops-navy .pp-side button:focus-visible,
html.ops-navy .pp-side input:focus-visible,
html.ops-navy .pp-side textarea:focus-visible,
html.ops-navy .pp-side select:focus-visible {
  outline: none;
  box-shadow: var(--dp5-focus);
}

@media (min-width: 1440px) {
  html.ops-navy body[data-view="projects"]:not(.gated) #view:has(> .pp) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }
}

@media (max-width: 1439.98px) {
  html.ops-navy body[data-view="projects"]:has(#view > .pp) .shell > .hdr .screen-id { display: none; }
  html.ops-navy body[data-view="projects"]:has(#view > .pp) .shell > .hdr:not(:has(#bell-btn:not([hidden]))) { display: none; }
  html.ops-navy body[data-view="projects"]:has(#view > .pp) .install-wrap:not(:has(#install-card:not([hidden]))) { display: none; }
  html.ops-navy body[data-view="projects"]:not(.gated) #view:has(> .pp) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }
  html.ops-navy body.pv-sheet #pv-side > .pp-side { min-height: 0; }
}

html.ops-navy .pp {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  container-type: inline-size;
  container-name: pp;
  background: transparent;
}
html.ops-navy .pp-in { padding: 16px 16px 28px; }
html.ops-navy .pp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
html.ops-navy .pp-num { font-variant-numeric: tabular-nums; }

html.ops-navy .pp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--dp5-text-3);
}
html.ops-navy .pp-crumbs button {
  border: 0;
  background: none;
  padding: 2px 0;
  color: var(--dp5-text-2);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ops-line-strong);
}
html.ops-navy .pp-crumbs button:hover { color: var(--dp5-text); }
html.ops-navy .pp-title {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

html.ops-navy .pp-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  padding: 2px 0 16px;
  color: var(--dp5-text-2);
  font-size: 13px;
}
html.ops-navy .pp-cat,
html.ops-navy .pp-status,
html.ops-navy .pp-meta-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
html.ops-navy .pp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--pv-c-none);
}
html.ops-navy .pp-dot.is-get { background: var(--pv-c-get); }
html.ops-navy .pp-dot.is-serve { background: var(--pv-c-serve); }
html.ops-navy .pp-dot.is-ops { background: var(--pv-c-ops); }
html.ops-navy .pp-dot.is-grow { background: var(--pv-c-grow); }
html.ops-navy .pp-reason { color: var(--dp5-text-2); }
html.ops-navy .pp-status { gap: 8px; }
html.ops-navy .pp-head b { color: var(--dp5-text); font-weight: 700; }
html.ops-navy .pp-own {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 1px 7px;
  border-radius: 4px;
  color: var(--dp5-ink);
  background: var(--pv-p-staff);
}
html.ops-navy .pp-own.is-jon { background: var(--pv-p-jon); }
html.ops-navy .pp-own.is-kendra { background: var(--pv-p-kendra); }
html.ops-navy .pp-head .pp-own + .pp-own { margin-left: 4px; }

html.ops-navy .pp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@container pp (min-width: 680px) {
  html.ops-navy .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.ops-navy .pp-wide { grid-column: 1 / -1; }

html.ops-navy .pp-sec {
  background: var(--dp5-raised);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--dp5-line-card);
  padding: 16px 18px 18px;
  min-width: 0;
}
html.ops-navy .pp-sec h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-wrap: anywhere;
}
html.ops-navy .pp-sec h2 .pp-act { margin-left: auto; }
html.ops-navy .pp-count {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dp5-text-3);
}
html.ops-navy .pp-act {
  border: 0;
  background: none;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--dp5-text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
html.ops-navy .pp-act:hover { background: var(--dp5-raised-hover); color: var(--dp5-text); }
html.ops-navy .pp-del { color: var(--pv-late); }
html.ops-navy .pp-empty {
  margin: 0;
  color: var(--dp5-text-3);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
html.ops-navy .pp-err {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
}

html.ops-navy .pp-rpm {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px 14px;
  margin: 0;
  font-size: 13.5px;
}
html.ops-navy .pp-rpm dt {
  color: var(--dp5-text-3);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: 2px;
}
html.ops-navy .pp-rpm dd { margin: 0; line-height: 1.45; overflow-wrap: anywhere; min-height: 1.45em; }
html.ops-navy .pp-rpm ul { margin: 0; padding-left: 18px; }
html.ops-navy .pp-rpm textarea.is-result { min-height: 3.2em; }
html.ops-navy .pp-rpm textarea.is-why { min-height: 4.6em; }
html.ops-navy .pp-rpm textarea.is-route { min-height: 7em; }

html.ops-navy .pp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
html.ops-navy .pp-kpi {
  background: var(--dp5-canvas);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
  min-width: 0;
  cursor: pointer;
}
html.ops-navy .pp-kpi.is-on { box-shadow: inset 0 0 0 1.5px var(--dp5-text); }
html.ops-navy .pp-kpi-v,
html.ops-navy button.pp-kpi-v {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  text-align: left;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  cursor: pointer;
}
html.ops-navy .pp-kpi-v small,
html.ops-navy button.pp-kpi-v small {
  font-size: 13px;
  font-weight: 500;
  color: var(--dp5-text-3);
}
html.ops-navy .pp-kpi-l {
  margin-top: 2px;
  font-size: 12px;
  color: var(--dp5-text-3);
  overflow-wrap: anywhere;
}
html.ops-navy .pp-kpi-s { margin-top: 6px; }
html.ops-navy .pp-curf { margin: 0; }
html.ops-navy .pp-curin {
  width: 100%;
  height: 36px;
  font-size: 20px;
  font-weight: 700;
}

html.ops-navy .pp-chart svg { display: block; width: 100%; height: auto; }
html.ops-navy .pp-chart text {
  font-size: 11px;
  fill: var(--dp5-text-3);
  font-family: var(--pv-font);
}
html.ops-navy .pp-chart text.pp-tgt { fill: var(--st-warn); }
html.ops-navy .pp-chart-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--dp5-text-3);
}

html.ops-navy .pp-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@container pp (max-width: 760px) {
  html.ops-navy .pp-lanes { grid-template-columns: minmax(0, 1fr); }
}
html.ops-navy .pp-lane {
  background: var(--dp5-canvas);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
html.ops-navy .pp-lane h3 {
  margin: 2px 4px 4px;
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
}
html.ops-navy .pp-lane h3 span { color: var(--dp5-text-3); font-weight: 600; font-size: 12px; }
html.ops-navy .pp-lane .pp-addbtn,
html.ops-navy .pp-lane .pp-add { margin-top: auto; align-self: flex-start; }
html.ops-navy .pp-lane .tcard { width: 100%; cursor: pointer; }

html.ops-navy .pp-tcard {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  background: var(--dp5-raised);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--dp5-line-card);
  padding: 10px 12px;
  text-align: left;
}
html.ops-navy .pp-tcard:hover { background: var(--dp5-raised-hover); }
html.ops-navy .pp-tcard.is-sel { box-shadow: inset 0 0 0 1.5px var(--dp5-text); }
html.ops-navy .pp-tcard.is-late { box-shadow: inset 0 0 0 1px var(--ops-status-bad); }
html.ops-navy .pp-tcard.is-done .pp-tc-t { text-decoration: line-through; color: var(--dp5-text-3); }
html.ops-navy .pp-tcard .pp-tick { grid-column: 1; grid-row: 1; margin-top: 2px; }
html.ops-navy .pp-tc-t {
  grid-column: 2;
  grid-row: 1;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
html.ops-navy .pp-tc-m {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12px;
  color: var(--dp5-text-3);
  overflow-wrap: anywhere;
}
html.ops-navy .pp-tc-m .is-late { color: var(--pv-late); font-weight: 600; }

html.ops-navy .pp-tick {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  border: 0;
  border-radius: 3px;
  padding: 0;
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--ops-text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
}
html.ops-navy .pp-tick.is-on { background: var(--dp5-green); box-shadow: none; }
html.ops-navy .pp-tick.is-on::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--dp5-ink);
  border-bottom: 2px solid var(--dp5-ink);
  transform: rotate(-45deg) translate(1px, -1px);
}

html.ops-navy .pp-lnk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--dp5-line-canvas, var(--ops-line-default));
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
}
html.ops-navy .pp-sec .pp-lnk:last-child { border-bottom: 0; }
html.ops-navy .pp-lnk-a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
html.ops-navy a.pp-lnk-a:hover .pp-lnk-n { text-decoration: underline; text-underline-offset: 3px; }
html.ops-navy .pp-lnk-n { overflow-wrap: anywhere; min-width: 0; }
html.ops-navy .pp-lnk-k {
  margin-left: auto;
  flex: none;
  font-size: 11.5px;
  color: var(--dp5-text-3);
  padding-top: 2px;
}
html.ops-navy .pp-ic { flex: none; margin-top: 2px; color: var(--dp5-text-3); }
html.ops-navy button.pp-block { cursor: pointer; border-radius: 6px; }
html.ops-navy button.pp-block:hover { background: var(--dp5-raised-hover); }

html.ops-navy .pp-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
html.ops-navy .pp-form label,
html.ops-navy .pp-field {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dp5-text-3);
  min-width: 0;
}
html.ops-navy .pp-form-acts { display: flex; align-items: flex-end; gap: 6px; }
html.ops-navy .pp-input,
html.ops-navy .pp-area,
html.ops-navy .pp-curin {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: var(--ops-bg-field);
  box-shadow: inset 0 0 0 1px var(--dp5-line-strong);
  color: var(--dp5-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
}
html.ops-navy .pp-input { height: 38px; padding: 0 10px; }
html.ops-navy .pp-area { min-height: 78px; padding: 8px 10px; resize: vertical; line-height: 1.45; font-weight: 400; }
html.ops-navy select.pp-input {
  appearance: none;
  padding-right: 30px;
  background-image: var(--ops-icon-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
}
html.ops-navy .pp-sk { height: 72px; margin-bottom: 12px; }
html.ops-navy .pp-sk-lg { height: 180px; }

html.ops-navy .pp-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
html.ops-navy .pp-sh {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px 12px 20px;
}
html.ops-navy .pp-sh h2,
html.ops-navy .pp-task-name {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
html.ops-navy textarea.pp-task-name {
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: var(--dp5-raised);
  box-shadow: inset 0 0 0 1px var(--dp5-line-strong);
  border-radius: 6px;
  color: var(--dp5-text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  resize: vertical;
}
html.ops-navy .pp-x {
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--dp5-text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
html.ops-navy .pp-x:hover { background: var(--dp5-raised-hover); color: var(--dp5-text); }
html.ops-navy .pp-sb {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
html.ops-navy .pp-side-sec h3,
html.ops-navy .pp-field > span {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dp5-text-3);
}
html.ops-navy .pp-cu {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 4px 10px;
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dp5-line-canvas, var(--ops-line-default));
}
html.ops-navy .pp-d { color: var(--dp5-text-3); font-size: 12px; padding-top: 2px; }
html.ops-navy .pp-d.is-late,
html.ops-navy small.is-late { color: var(--pv-late); font-weight: 600; }
html.ops-navy .pp-cu-n { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
html.ops-navy .pp-cu-n small { display: block; font-size: 11.5px; }
html.ops-navy .pp-cu.is-done .pp-cu-n span span { text-decoration: line-through; color: var(--dp5-text-3); }
html.ops-navy .pp-notes { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
html.ops-navy .pp-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html.ops-navy .pp-comments li { font-size: 13px; overflow-wrap: anywhere; }
html.ops-navy .pp-comments b { font-weight: 700; }
html.ops-navy .pp-cform { display: flex; gap: 8px; align-items: center; }
html.ops-navy .pp-cform .pp-input { flex: 1; }
html.ops-navy .pp-owners { display: flex; flex-wrap: wrap; gap: 6px; }
html.ops-navy .pp-ownb {
  border: 0;
  border-radius: 4px;
  background: var(--dp5-raised);
  box-shadow: inset 0 0 0 1px var(--dp5-line-strong);
  color: var(--dp5-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}
html.ops-navy .pp-ownb.is-on { background: var(--pv-p-staff); color: var(--dp5-ink); box-shadow: none; }
html.ops-navy .pp-ownb[data-pp-own="Jon Drees"].is-on,
html.ops-navy .pp-ownb[data-pp-own^="Jon "].is-on { background: var(--pv-p-jon); }
html.ops-navy .pp-ownb[data-pp-own="Kendra Hemme"].is-on,
html.ops-navy .pp-ownb[data-pp-own^="Kendra "].is-on { background: var(--pv-p-kendra); }
html.ops-navy .pp-phone-side { display: none; }

@media (max-width: 1439.98px) {
  html.ops-navy .pp-in { padding: 12px 8px 24px; }
  html.ops-navy .pp { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  html.ops-navy .pp-title { font-size: 19px; }
  html.ops-navy .pp-phone-side { display: block; margin-top: 16px; }
  html.ops-navy .pp-phone-side .pp-side {
    height: auto;
    background: var(--dp5-raised);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--dp5-line-card);
  }
  html.ops-navy .pp-act,
  html.ops-navy .pp-ownb,
  html.ops-navy .pp-x,
  html.ops-navy .pp-crumbs button { min-height: 44px; }
  html.ops-navy .pp-tick::before { content: ""; position: absolute; inset: -13px; }
  html.ops-navy .pp-input,
  html.ops-navy select.pp-input { height: 44px; }
}

/* Nobody assigned reads grey, not the Staff colour. */
html.ops-navy .pp-own.is-none { background: var(--st-park, var(--ops-text-tertiary)); }

html.ops-navy .pp-in { padding: 24px 24px 40px; }
html.ops-navy .pp-grid { gap: 16px; }
html.ops-navy .pp-sec { padding: 20px; }
html.ops-navy .pp-sec h2 { margin: 0 0 16px; font-size: 14px; line-height: 20px; font-weight: 600; }
html.ops-navy .pp-kpis { gap: 12px; margin-bottom: 16px; }
html.ops-navy .pp-kpi { padding: 12px 16px; }
html.ops-navy .pp-lanes { gap: 16px; }
html.ops-navy .pp-lane { padding: 12px; gap: 8px; }
html.ops-navy .pp-lane h3 { margin: 4px 4px 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
html.ops-navy .pp-lane h3 span { font-size: 12px; }
html.ops-navy .pp-tcard { padding: 12px 16px; column-gap: 12px; row-gap: 4px; box-shadow: none; }
html.ops-navy .pp-tcard.is-sel { box-shadow: inset 0 0 0 1.5px var(--dp5-text); }
html.ops-navy .pp-tcard.is-late { box-shadow: inset 0 0 0 1px var(--ops-status-bad); }
html.ops-navy .pp-tcard .pp-tick { margin-top: 1px; }
html.ops-navy .pp-tc-t { font-size: 14px; line-height: 20px; }
html.ops-navy .pp-tc-m { font-size: 12px; line-height: 16px; gap: 4px 12px; }
html.ops-navy .pp-lnk { padding: 12px 0; font-size: 14px; line-height: 20px; }
html.ops-navy .pp-lnk-k { font-size: 12px; line-height: 16px; }
@media (min-width: 1800px) {
  html.ops-navy .pp-in { padding: 32px 32px 48px; }
  html.ops-navy .pp-grid,
  html.ops-navy .pp-lanes { gap: 24px; }
  html.ops-navy .pp-sec { padding: 24px; }
  html.ops-navy .pp-lane { padding: 16px; }
}
@media (max-width: 1439.98px) {
  html.ops-navy .pp-in { padding: 16px 16px 32px; }
  html.ops-navy .pp-grid,
  html.ops-navy .pp-lanes { gap: 12px; }
  html.ops-navy .pp-sec { padding: 16px; }
  html.ops-navy .pp-lane { padding: 12px; }
}

@media (min-width: 1800px) {
  html.ops-navy .pp > .pp-in { padding-left: 24px; padding-right: 24px; }
}
@container pp (min-width: 680px) {
  html.ops-navy .pp-rpm { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; grid-auto-flow: column; gap: 4px 32px; }
  html.ops-navy .pp-rpm dt { padding-top: 0; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ops-text-tertiary); }
}
html.ops-navy .pp-head { padding: 0 0 16px; gap: 8px 20px; }
html.ops-navy .pp-head .pp-fullname { flex: 1 0 100%; margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ops-text-secondary); overflow-wrap: anywhere; }
html.ops-navy .pp-who { display: inline-flex; align-items: center; gap: 4px; }
html.ops-navy .pp-nums { margin-bottom: 16px; }
html.ops-navy .pp-strip { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 16px; padding: 14px 20px; }
html.ops-navy .pp-strip > .pr-lbl { flex: none; width: 104px; padding-top: 1px; }
html.ops-navy .pp-strip-in { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; line-height: 20px; color: var(--ops-text-primary); }
html.ops-navy .pp-bylist .pp-bl + .pp-bl::before { content: "\00b7"; margin-right: 12px; color: var(--ops-text-tertiary); }
html.ops-navy .pp-bl b { font-weight: 700; }
html.ops-navy .pp-quiet { color: var(--ops-text-tertiary); }
html.ops-navy .pp-checks-strip .pp-strip-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; }
html.ops-navy .pp-nc { display: flex; flex-direction: column; min-width: 0; }
html.ops-navy .pp-ncd { font-size: 13px; line-height: 18px; color: var(--ops-text-tertiary); }
html.ops-navy .pp-ncn { overflow-wrap: anywhere; }
html.ops-navy .pp-checks-strip .pp-quiet { grid-column: 1 / -1; }
html.ops-navy .pp-acts { display: inline-flex; align-items: center; gap: 16px; }
html.ops-navy .pp-acts .pp-act { padding: 0; border-radius: 0; background: none; font-size: 14px; line-height: 20px; color: var(--ops-text-secondary); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
html.ops-navy .pp-acts .pp-act:hover { background: none; color: var(--ops-text-primary); }
html.ops-navy .pp-acts .pp-del { color: var(--ops-status-bad); }
html.ops-navy .pp-in > .pp-acts { margin: 0 0 12px; }
html.ops-navy #toolbar .pp-tb-back { padding: 0; border: 0; background: none; color: var(--ops-text-secondary); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
html.ops-navy #toolbar .pp-tb-back:hover { color: var(--ops-text-primary); }
html.ops-navy #toolbar .pp-tb-sep { margin: 0 4px; }
html.ops-navy #toolbar .sh-tbid.pp-tb { min-width: 0; flex: 0 1 auto; }
@media (min-width: 768px) {
  html.ops-navy .pp > .pp-in { background: none; padding-top: 24px; }
}
html.ops-navy #toolbar .pp-tb .sh-tbt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ops-navy #toolbar .pp-tb .sh-tbs { flex: none; white-space: nowrap; }
html.ops-navy #toolbar span.pp-tb { flex: none; }
html.ops-navy .pp-side .pp-field,
html.ops-navy .pp-side .pp-fl,
html.ops-navy .pp-side .pp-field > span,
html.ops-navy .pp-side .pp-side-sec h3 { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ops-text-tertiary); }
html.ops-navy .pp-sb > .pp-act, html.ops-navy .pp-fv > .pp-act { align-self: flex-start; padding-left: 0; }
html.ops-navy .pp-fv { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html.ops-navy .pp-fd { font-size: 14px; line-height: 20px; color: var(--ops-text-primary); overflow-wrap: anywhere; }
html.ops-navy .pp-in-w { margin: 0 2px; color: var(--ops-text-tertiary); }
html.ops-navy .pp-cl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html.ops-navy .pp-cl li { display: flex; align-items: center; gap: 10px; }
html.ops-navy .pp-cb { flex: none; width: 20px; height: 20px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ops-line-strong); }
html.ops-navy .pp-cl .is-done .pp-cb { background: var(--ops-status-good); box-shadow: none; }
html.ops-navy .pp-cl .is-done span { text-decoration: line-through; color: var(--ops-text-tertiary); }
@media (max-width: 767px) {
  html.ops-navy .pp-title { font-size: 24px; line-height: 32px; }
  html.ops-navy .pp-strip { flex-direction: column; gap: 8px; }
  html.ops-navy .pp-strip > .pr-lbl { width: auto; }
  html.ops-navy .pp-checks-strip .pp-strip-in { grid-template-columns: minmax(0, 1fr); }
  html.ops-navy .pp-nc { flex-direction: row; gap: 16px; }
  html.ops-navy .pp-ncd { width: 48px; flex: none; }
  html.ops-navy .pp-acts .pp-act { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Loads after every screen sheet so these rules win ties. fields.css still loads after this file. Desktop only; phones keep their bar and sheet. */

html.ops-navy {
  --fr-page: var(--ops-bg-canvas);
  --fr-menu: var(--ops-bg-canvas);
  --fr-menu-hover: var(--ops-hover-wash);
  --fr-menu-active: var(--ops-nav-active-bg);
  --fr-canvas: var(--ops-bg-canvas);
  --fr-side: var(--ops-bg-panel);
  --fr-rule: var(--ops-nav-line);
  --fr-r: 12px;
}

/* Menu, page gutter and side column are one chrome colour at every width. The main panel stays --fr-canvas. */
html.ops-navy #pv-side,
html.ops-navy #season-inspector {
  --pv-panel: var(--fr-side);
  background-color: var(--fr-side);
}

@media (min-width: 1440px) {
  html.ops-navy,
  html.ops-navy body { background: var(--fr-page); }

  /* Menu. Colour alone separates it from the canvas (a rule here read as a line around the panel). */
  html.ops-navy header.topbar {
    background: var(--ops-bg-canvas);
    box-shadow: none;
  }
  html.ops-navy header.topbar #tabs button:hover { background: var(--fr-menu-hover); }
  html.ops-navy header.topbar #tabs button.active,
  html.ops-navy header.topbar #tabs button.active:hover { background: var(--fr-menu-active); }

  /* Colour is the only separator, so there is no rule. */
  html.ops-navy .shell {
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--pv-nav-w);
    background: var(--fr-canvas);
    border-radius: 0;
    box-shadow: none;
  }

  /* Side panel: every screen's right column, flush to the window's right edge as the menu is to its left, and like the
     menu it has no rule of its own. Width is --pv-side-w, the same distance the canvas keeps clear on its right, so
     the two meet with no gap and no overlap. */
  html.ops-navy body[data-view="today"] #pv-side,
  html.ops-navy body[data-view="calendar"] #pv-side,
  html.ops-navy body[data-view="plan"] #pv-side,
  html.ops-navy body[data-view="season"] #season-inspector,
  html.ops-navy body[data-view="projects"]:not(.gated) #pv-side {
    --pv-panel: var(--fr-side);
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--pv-side-w);
    background: var(--fr-side);
    border-radius: 0;
    box-shadow: none;
  }
  /* :has() selectors never share a list with plain ones: one unsupported selector drops the whole rule. */
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]) #pv-side:has(> :is(.ib-side, .lk-side)),
  html.ops-navy body[data-view="projects"]:has(#view > .pp) #pv-side:has(> .pp-side) {
    --pv-panel: var(--fr-side);
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--pv-side-w);
    background: var(--fr-side);
    border-radius: 0;
    box-shadow: none;
  }
  /* Every side panel's head: the panel and the canvas both start at the window's top, so the head is the mast's
     64px and its words sit on the same line as the page title. No rule under it: the panel is one slab, like the menu. */
  html.ops-navy #pv-side :is(.pv-sh, .pp-sh) {
    box-sizing: border-box;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    margin: 0;
    padding: 0 12px 0 20px;
    background: var(--fr-side);
    border-bottom: 0;
    border-radius: 0;
  }
  html.ops-navy #pv-side :is(.pv-sh, .pp-sh) h2 {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
  }
  html.ops-navy #pv-side :is(.pv-sh) > div:first-child:has(> h2:first-child) {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }
  html.ops-navy #pv-side :is(.pv-sh) > div:first-child:has(> h2:first-child) > p {
    min-width: 0;
    margin: 0;
    font-size: 13px;
    color: var(--pv-t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* A task or block sheet docks exactly over the side panel, so it is the same slab. */
  html.ops-navy body[data-view="today"] #modal-root .overlay,
  html.ops-navy body[data-view="calendar"] #modal-root .overlay,
  html.ops-navy body[data-view="plan"] #modal-root .overlay,
  html.ops-navy body[data-view="season"] #modal-root .overlay {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--pv-side-w);
  }
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]):has(#pv-side > :is(.ib-side, .lk-side)) #modal-root .overlay {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--pv-side-w);
  }
  html.ops-navy body[data-view="today"] #modal-root .overlay > .modal,
  html.ops-navy body[data-view="calendar"] #modal-root .overlay > .modal,
  html.ops-navy body[data-view="plan"] #modal-root .overlay > .modal,
  html.ops-navy body[data-view="season"] #modal-root .overlay > .modal {
    background: var(--fr-side);
    border-radius: 0;
    outline: 0;
    border-left: 0;
  }
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]):has(#pv-side > :is(.ib-side, .lk-side)) #modal-root .overlay > .modal {
    background: var(--fr-side);
    border-radius: 0;
    outline: 0;
    border-left: 0;
  }
}

/* One title row on every screen so every page sits on the same canvas and nothing jumps. Before: Home's title 28px in and everything else 20px; Home and Schedule
   22px titles in a 64px row, Projects a 26px title with the subtitle underneath (80px row); Metrics, Inbox, Links and
   Plan my week drew their own 26px headers 18px down with no bell; the project page had an empty row with the bell and
   its name 100px down. Now every screen has the same row: 64px tall, the title 26px and --pg-edge in (one value with --sh-pad: 24, 16 on a phone), any subtitle on the same line after it, the bell --pg-edge from the right edge. What sits under the row (Schedule's and Projects' toolbar,
   Home's tiles) starts in the same place because of it. */
@media (min-width: 1440px) {
  html.ops-navy body[data-view] .shell > .hdr:not([hidden]) {
    box-sizing: border-box;
    height: 64px;
    min-height: 64px;
    padding: 0 var(--pg-edge);
    align-items: center;
    gap: 12px;
    border-bottom: 0;
  }
  html.ops-navy body[data-view] .shell > .hdr .screen-id {
    flex: 0 1 auto;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
  }
  html.ops-navy body[data-view] .shell > .hdr .screen-title {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  html.ops-navy body[data-view] .shell > .hdr .screen-sub {
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--pv-t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.ops-navy body[data-view] .shell > .hdr #bell-btn { margin-left: auto; flex: none; }

  /* Screens that draw their own row: same height, inset, title and subtitle, with room kept for the bell. */
  html.ops-navy :is(.ib-head, .lk-head, .fr-head) {
    box-sizing: border-box;
    height: 64px;
    min-height: 64px;
    padding: 0 calc(var(--pg-edge) + 48px) 0 var(--pg-edge);
    align-items: center;
    flex-wrap: nowrap;
    border-bottom: 0;
  }
  html.ops-navy :is(.ib-ttl, .lk-ttl, .fr-head .pv-ttl) {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
  }
  html.ops-navy :is(.ib-ttl, .lk-ttl, .fr-head .pv-ttl) h1 {
    margin: 0;
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  html.ops-navy :is(.ib-ttl, .lk-ttl, .fr-head .pv-ttl) p {
    min-width: 0;
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--pv-t3);
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* On those screens the shared row keeps only the bell, laid over their own row in the same place. */
  html.ops-navy body:is([data-view="inbox"], [data-view="links"]):has(#view > :is(.ib-main, .lk-main)) .shell > .hdr,
  html.ops-navy body[data-view="friday"]:has(#view > .fr-main) .shell > .hdr,
  html.ops-navy body[data-view="projects"]:has(#view > .pp) .shell > .hdr,
  html.ops-navy body[data-view="projects"]:has(#view > .pp) .shell > .hdr:not(:has(#bell-btn:not([hidden]))) {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    height: 64px;
    min-height: 64px;
    padding: 0 var(--pg-edge);
    background: transparent;
    box-shadow: none;
    border: 0;
    z-index: 4;
    pointer-events: none;
  }
  html.ops-navy body:is([data-view="charts"], [data-view="inbox"], [data-view="links"], [data-view="friday"], [data-view="projects"]):has(#view > :is(.ib-main, .lk-main, .fr-main, .pp)) .shell > .hdr > :not(#bell-btn) {
    display: none;
  }
  html.ops-navy body:is([data-view="charts"], [data-view="inbox"], [data-view="links"], [data-view="friday"], [data-view="projects"]):has(#view > :is(.ib-main, .lk-main, .fr-main, .pp)) #bell-btn {
    pointer-events: auto;
  }

  html.ops-navy .pp-in {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    padding: 16px var(--pg-edge) 28px;
  }
  html.ops-navy .pp-in > * { flex: 1 0 100%; order: 3; min-width: 0; }
  html.ops-navy .pp-in > .pp-title {
    flex: 0 1 auto;
    order: 1;
    margin: 0 0 16px;
    font-size: 26px;
    line-height: 32px;
  }
  html.ops-navy .pp-in > .pp-crumbs {
    flex: 1 1 0;
    order: 2;
    flex-wrap: nowrap;
    margin: 0 48px 0 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
  }
}

/* These dock over the side panel, including on a project page. The Quick add form's 15px title rule is out-ranked on purpose. */
@media (min-width: 1440px) {
  html.ops-navy body[data-view="projects"]:has(#pv-side > :is(.pp-side)) #modal-root .overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: var(--pv-side-w);
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
    z-index: 60;
  }
  html.ops-navy body[data-view="projects"]:has(#pv-side > :is(.pp-side)) #modal-root .overlay > .modal {
    pointer-events: auto;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    background: var(--fr-side);
  }

  html.ops-navy body:is([data-view="today"], [data-view="calendar"], [data-view="plan"], [data-view="season"]) #modal-root .overlay > .modal > h2:first-of-type {
    margin: 0 44px 20px 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0;
  }
  html.ops-navy body:is([data-view="today"], [data-view="calendar"], [data-view="plan"], [data-view="season"]) #modal-root .overlay > .modal > .mclose {
    top: 14px;
    right: 12px;
  }
  html.ops-navy body:is([data-view="today"], [data-view="calendar"], [data-view="plan"], [data-view="season"]) #modal-root .overlay > .modal:has(#te-form) > h2:first-of-type {
    font-size: 16px;
    line-height: 24px;
  }
  html.ops-navy body:is([data-view="charts"], [data-view="inbox"], [data-view="links"], [data-view="projects"]):has(#pv-side > :is(.ib-side, .lk-side, .pp-side)) #modal-root .overlay > .modal > h2:first-of-type {
    margin: 0 44px 20px 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0;
  }
  html.ops-navy body:is([data-view="charts"], [data-view="inbox"], [data-view="links"], [data-view="projects"]):has(#pv-side > :is(.ib-side, .lk-side, .pp-side)) #modal-root .overlay > .modal > .mclose {
    top: 14px;
    right: 12px;
  }
  html.ops-navy body:is([data-view="charts"], [data-view="inbox"], [data-view="links"], [data-view="projects"]):has(#pv-side > :is(.ib-side, .lk-side, .pp-side)) #modal-root .overlay > .modal:has(#te-form) > h2:first-of-type {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Schedule's and Projects' toolbars stay inside #view because their clicks are handled there. The shared title row is laid over the empty left side. */
html.ops-navy {
  --mast-bg: var(--ops-bg-surface);
  --mast-rule: var(--ops-nav-marker);
  --mast-t1: var(--ops-text-primary);
  --mast-t2: var(--ops-text-secondary);
  --mast-t3: var(--ops-text-secondary);
  --mast-ctl: var(--ops-bg-field);
  --mast-ctl-hover: var(--ops-bg-surface-hover);
  --mast-ctl-edge: var(--ops-line-strong);
}
@media (min-width: 1440px) {
  /* The band: the shared title row (Home, Season, All tasks), each screen's own head, Schedule's and
     Projects' toolbar rows. */
  html.ops-navy body[data-view] .shell > .hdr:not([hidden]),
  html.ops-navy :is(.ib-head, .lk-head, .fr-head),
  html.ops-navy .pt-root > .pt-bar {
    box-sizing: border-box;
    height: 64px;
    min-height: 64px;
    margin: 0;
    background: var(--mast-bg);
    box-shadow: inset 0 -2px 0 var(--mast-rule);
    border: 0;
    border-radius: 0;
  }
  html.ops-navy .pt-root > .pt-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 calc(var(--pg-edge) + 48px) 0 var(--pg-edge);
  }

  /* Schedule and Projects: the title row is laid over the band's empty left side. */
  html.ops-navy body:is([data-view="calendar"], [data-view="plan"]) .shell > .hdr:not([hidden]) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    box-shadow: none;
    z-index: 4;
    pointer-events: none;
  }
  html.ops-navy body[data-view="projects"]:has(#view > .pt-root) .shell > .hdr:not([hidden]) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    box-shadow: none;
    z-index: 4;
    pointer-events: none;
  }
  html.ops-navy .shell > .hdr > * { pointer-events: auto; }
  /* Projects' "Name · Mon, Sep 28" would run under its toolbar on a laptop; it only shows where there is room. */
  @media (max-width: 1799.98px) {
    html.ops-navy body[data-view="projects"] .shell > .hdr .screen-sub { display: none; }
  }

  /* Words on the band. The band gets dark text tokens; pop-overs opened from it get the light ones back. */
  html.ops-navy :is(.pt-root > .pt-bar, .ib-head, .lk-head, .fr-head, .shell > .hdr) {
    color: var(--mast-t1);
    --pv-t1: var(--mast-t1);
    --pv-t2: var(--mast-t2);
    --pv-t3: var(--mast-t3);
    --dp5-text: var(--mast-t1);
    --dp5-text-2: var(--mast-t2);
    --dp5-text-3: var(--mast-t3);
  }
  html.ops-navy :is(.pt-root > .pt-bar) :is(.pop, .pt-fpop) {
    color: var(--ops-text-primary);
    --pv-t1: var(--ops-text-primary);
    --pv-t2: var(--ops-text-secondary);
    --pv-t3: var(--ops-text-tertiary);
    --dp5-text: var(--ops-text-primary);
    --dp5-text-2: var(--ops-text-secondary);
    --dp5-text-3: var(--ops-text-tertiary);
  }
  html.ops-navy body[data-view] .shell > .hdr .screen-title,
  html.ops-navy :is(.ib-ttl, .lk-ttl, .fr-head .pv-ttl) h1,
  html.ops-navy .pp-in > .pp-title { color: var(--mast-t1); }
  html.ops-navy body[data-view] .shell > .hdr .screen-sub,
  html.ops-navy :is(.ib-ttl, .lk-ttl, .fr-head .pv-ttl) p,
  html.ops-navy .pp-in > .pp-crumbs { color: var(--mast-t3); }
  html.ops-navy .pp-in > .pp-crumbs button { color: var(--mast-t2); text-decoration-color: var(--ops-line-strong); }

  /* Text actions on the band are boxed, so nothing on the band is bare text. */
  html.ops-navy :is(.pt-root > .pt-bar, .ib-head, .lk-head, .fr-head, .shell > .hdr)
    :is(.pt-cap, select.pt-view, #bell-btn, .pt-obtn, .pt-newp, .ib-tools .ib-ta, .lk-add) {
    background-color: var(--mast-ctl);
    color: var(--mast-t1);
    box-shadow: inset 0 0 0 1px var(--mast-ctl-edge);
  }
  html.ops-navy :is(.pt-root > .pt-bar, .ib-head, .lk-head, .fr-head, .shell > .hdr)
    :is(select.pt-view, #bell-btn, .pt-obtn, .pt-capb, .pt-newp, .ib-tools .ib-ta, .lk-add):hover:not(:disabled) {
    background-color: var(--mast-ctl-hover);
    color: var(--mast-t1);
  }
  html.ops-navy :is(.pt-root > .pt-bar, .ib-head, .lk-head, .fr-head, .shell > .hdr)
    :is(.pt-capb, .pt-range, .pt-newp, .ib-tools .ib-ta, .lk-add) { color: var(--mast-t1); }
  html.ops-navy :is(.pt-newp, .ib-tools .ib-ta, .lk-add) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
  }
  html.ops-navy :is(.ib-tools .ib-ta):disabled { color: var(--mast-t3); }
  html.ops-navy :is(.ib-head) :is(.ib-seg) {
    background: var(--mast-ctl);
    box-shadow: inset 0 0 0 1px var(--mast-ctl-edge);
    border-radius: 8px;
    padding: 3px;
  }
  html.ops-navy :is(.ib-head) :is(.ib-seg) button { color: var(--ops-text-primary); border-radius: 6px; }
  html.ops-navy :is(.ib-head) :is(.ib-seg) button:hover { color: var(--ops-text-primary); background: var(--mast-ctl-hover); }
  html.ops-navy :is(.ib-head) :is(.ib-seg) button[aria-pressed="true"] { background: var(--ops-selected-bg); color: var(--ops-selected-text); }

  /* The project page: its name and crumbs are the band (it scrolls with the page, as the name always has). */
  html.ops-navy .pp-in {
    padding-top: 16px;
    background: linear-gradient(to bottom, var(--mast-bg) 0 62px, var(--mast-rule) 62px 64px, transparent 64px) no-repeat;
  }
  html.ops-navy .pp-in > .pp-title { margin-bottom: calc(16px + var(--pg-edge)); }
  html.ops-navy .tg-inner { background: transparent; }
  html.ops-navy .pt-frame { margin: var(--pg-edge); border-radius: 0; box-shadow: none; background: transparent; }
  html.ops-navy :is(.ib-body, .lk-body) > :first-child { margin-top: 0; }

  /* Where a page scrolls (Metrics scrolled the whole
     page, so its bar ran up beside the mast at the canvas edge). Only the content under the mast scrolls, in a box 20px
     in from the canvas on every side, so every page's scrollbar sits where Projects' and Schedule's do. */
  html.ops-navy :is(.ib-body, .lk-body) { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: var(--pg-edge); padding: 0; }
}

/* An open list inherited the mast's dark text, so the options were dark on a dark list. A white box opens a white list. */
@media (min-width: 1440px) {
  html.ops-navy :is(.pt-root > .pt-bar) :is(select.pt-view) {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding-block: 0;
    font: 600 14px/1 var(--pv-font);
    color: var(--mast-t1);
  }
  html.ops-navy :is(.pt-root > .pt-bar, .ib-head, .lk-head, .fr-head)
    :is(.pt-todaybtn, .pt-newp, .ib-tools .ib-ta, .lk-add, .ib-seg button) {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  }
  html.ops-navy :is(.pt-root > .pt-bar) :is(.pt-range) {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
  }
}
@supports (appearance: base-select) {
  /* Every width: the phone's view dropdowns sit on the band too. */
  html.ops-navy :is(.pt-root > .pt-bar) select:not([multiple]):not([size])::picker-icon {
    background-image: var(--ops-icon-chevron-strong);
  }
  html.ops-navy :is(.pt-root > .pt-bar) select:not([multiple]):not([size])::picker(select) {
    border: 1px solid var(--ops-line-default);
    background: var(--ops-bg-surface);
    color: var(--ops-text-primary);
    box-shadow: 0 12px 28px var(--ops-shadow-over);
    font: 500 14px/1.35 var(--pv-font);
  }
  html.ops-navy :is(.pt-root > .pt-bar) select:not([multiple]):not([size]) option {
    color: var(--ops-text-primary);
    background-color: transparent;
  }
  html.ops-navy :is(.pt-root > .pt-bar) select:not([multiple]):not([size]) option:hover,
  html.ops-navy :is(.pt-root > .pt-bar) select:not([multiple]):not([size]) option:focus-visible {
    background-color: var(--ops-bg-surface-hover);
    color: var(--ops-text-primary);
  }
  html.ops-navy :is(.pt-root > .pt-bar) select:not([multiple]):not([size]) option:checked {
    background-color: transparent;
    color: var(--ops-text-primary);
    font-weight: 600;
  }
  html.ops-navy :is(.pt-root > .pt-bar) select:not([multiple]):not([size]) option:checked:hover,
  html.ops-navy :is(.pt-root > .pt-bar) select:not([multiple]):not([size]) option:checked:focus-visible {
    background-color: var(--ops-bg-surface-hover);
  }
  html.ops-navy :is(.pt-root > .pt-bar) select:not([multiple]):not([size]) option::checkmark { color: var(--ops-text-primary); }
}

/* Pages with no side panel (All tasks; Win-Back and Trends when switched on). The canvas kept 520px of padding on its right for the kit panel (#dp5-panel),
   which is mounted but never opened, so a third of the page stood empty. The room is kept only while that panel is
   open. Their content sits on the same 20px frame as every other page. */
@media (min-width: 1440px) {
  html.ops-navy .shell:not(:has(#dp5-panel:not([hidden]))) { padding-right: 0; }
  html.ops-navy body:is([data-view="winback"], [data-view="trends"], [data-view="season"]) #view { padding: var(--pg-edge); }
  html.ops-navy body:is([data-view="winback"], [data-view="trends"], [data-view="season"]) #view > :first-child { margin-top: 0; }
}

/* The phone mast. Under the navy search row every page has the same
   navy band, 108px in two rows, so content starts at the same height on every page:
     row 1 (56px)  the title (22px) and up to three of the page's buttons
     row 2 (52px)  the page's range or view (Schedule's and Projects' dates, Inbox's Open / All), or its one-line
                   subtitle (Metrics' month, Links, Plan my week), or Home's jumps to its three lanes
   The search row and the tab bar stay navy. */
@media (max-width: 1439.98px) {
  html.ops-navy {
    --mast-row1: 56px;
    --mast-row2: 52px;
  }

  html.ops-navy :is(.pt-root > .pt-bar.is-phone, .ib-head, .lk-head, .fr-head),
  html.ops-navy body:is([data-view="today"], [data-view="season"], [data-view="winback"], [data-view="trends"]) .shell > .hdr:not([hidden]) {
    box-sizing: border-box;
    height: calc(var(--mast-row1) + var(--mast-row2));
    min-height: 0;
    margin: 0;
    padding: 0 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--mast-row1) var(--mast-row2);
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    background: var(--mast-bg);
    box-shadow: inset 0 -2px 0 var(--mast-rule);
    border: 0;
    border-radius: 0;
    color: var(--mast-t1);
    --pv-t1: var(--mast-t1);
    --pv-t2: var(--mast-t2);
    --pv-t3: var(--mast-t3);
    --dp5-text: var(--mast-t1);
    --dp5-text-2: var(--mast-t2);
    --dp5-text-3: var(--mast-t3);
  }
  html.ops-navy :is(.pt-root > .pt-bar.is-phone) :is(.pop, .pt-fpop) {
    color: var(--ops-text-primary);
    --pv-t1: var(--ops-text-primary);
    --pv-t2: var(--ops-text-secondary);
    --pv-t3: var(--ops-text-tertiary);
    --dp5-text: var(--ops-text-primary);
    --dp5-text-2: var(--ops-text-secondary);
    --dp5-text-3: var(--ops-text-tertiary);
  }
  /* One canvas colour under the band on every page. */
  html.ops-navy body[data-view] .shell { background: var(--fr-canvas); }
  /* Nothing may sit between the search row and the band. An empty wrapper here opens a gap. */
  html.ops-navy .install-wrap:not(:has(#install-card:not([hidden]))) { display: none; }

  html.ops-navy :is(.pv-main > .bar.is-phone .pv-title, .pt-bar.is-phone .pt-title, .ib-ttl h1, .lk-ttl h1, .fr-head .pv-ttl h1),
  html.ops-navy body:is([data-view="today"], [data-view="season"], [data-view="winback"], [data-view="trends"]) .shell > .hdr .screen-title {
    margin: 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mast-t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.ops-navy :is(.ib-ttl p, .lk-ttl p, .fr-head .pv-ttl p),
  html.ops-navy body:is([data-view="today"], [data-view="season"], [data-view="winback"], [data-view="trends"]) .shell > .hdr .screen-sub {
    min-width: 0;
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--mast-t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html.ops-navy :is(.pt-bar.is-phone > .pt-r1) { grid-column: 1 / -1; grid-row: 1; }
  html.ops-navy :is(.pt-bar.is-phone > .pt-r2) { grid-column: 1 / -1; grid-row: 2; align-self: start; }

  html.ops-navy .lk-head { grid-template-areas: "t a" "p p"; }
  html.ops-navy .lk-head .lk-ttl { display: contents; }
  html.ops-navy .lk-head .lk-ttl h1 { grid-area: t; }
  html.ops-navy .lk-head .lk-ttl p { grid-area: p; display: block; align-self: start; padding-top: 6px; }
  html.ops-navy .lk-head .lk-tools { display: contents; }
  html.ops-navy .lk-head .lk-add { grid-area: a; margin: 0; }
  html.ops-navy .ib-head { grid-template-areas: "t m" "s u"; }
  html.ops-navy .ib-head :is(.ib-ttl, .ib-tools) { display: contents; }
  html.ops-navy .ib-head .ib-ttl h1 { grid-area: t; }
  html.ops-navy .ib-head .ib-ttl p { grid-area: u; justify-self: end; align-self: start; padding-top: 12px; }
  html.ops-navy .ib-head .ib-seg { grid-area: s; justify-self: start; align-self: start; }
  html.ops-navy .ib-head [data-ib-readall] { grid-area: m; }

  /* Plan my week: title, then the week it plans. */
  html.ops-navy .fr-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "p"; padding: 0 16px; }

  /* The shared row, on the pages that show it on the phone (Home, Season, All tasks; Schedule, Projects
     and the rest hide it there and draw their own): title, then its subtitle. Home: the title row only; its second
     row is the jump row at the top of the page. */
  html.ops-navy body:is([data-view="today"], [data-view="season"], [data-view="winback"], [data-view="trends"]) .shell > .hdr .screen-id { display: contents; }
  html.ops-navy body:is([data-view="today"], [data-view="season"], [data-view="winback"], [data-view="trends"]) .shell > .hdr .screen-title { grid-column: 1; grid-row: 1; }
  html.ops-navy body:is([data-view="today"], [data-view="season"], [data-view="winback"], [data-view="trends"]) .shell > .hdr .screen-sub { grid-column: 1 / -1; grid-row: 2; align-self: start; padding-top: 6px; }
  html.ops-navy body[data-view="today"] .shell > .hdr:not([hidden]) {
    height: var(--mast-row1);
    grid-template-rows: var(--mast-row1);
    box-shadow: inset 0 -2px 0 var(--mast-rule);
  }

  /* A project page: its name in the phone title row (the one every page uses), then "Projects / category". */
  html.ops-navy .pp-in { display: flex; flex-direction: column; padding-top: 16px; }
  html.ops-navy .pp-in > * { order: 3; }
  html.ops-navy .pp-in > .pp-title {
    order: 1;
    box-sizing: border-box;
    height: 30px;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--ops-text-primary);
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.ops-navy .pp-in > .pp-crumbs {
    order: 2;
    margin: -10px 0 4px;
    padding: 0;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    color: var(--ops-text-tertiary);
  }
  html.ops-navy .pp-in > .pp-crumbs button { color: var(--ops-text-secondary); text-decoration-color: var(--ops-line-strong); }

  /* 44px is the phone touch size. */
  html.ops-navy :is(.pt-root > .pt-bar.is-phone, .ib-head, .lk-head)
    :is(.pt-cap, select.pt-view, .pt-obtn, .ib-tools .ib-ta, .lk-add) {
    background-color: var(--mast-ctl);
    color: var(--mast-t1);
    box-shadow: inset 0 0 0 1px var(--mast-ctl-edge);
    border: 0;
  }
  html.ops-navy :is(.pt-root > .pt-bar.is-phone)
    :is(.pt-capb, .pt-range) { color: var(--mast-t1); }
  html.ops-navy :is(.ib-tools .ib-ta, .lk-add) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  html.ops-navy :is(.ib-head) :is(.ib-seg) {
    background: var(--mast-ctl);
    box-shadow: inset 0 0 0 1px var(--mast-ctl-edge);
    border-radius: 8px;
    padding: 3px;
  }
  html.ops-navy :is(.ib-head) :is(.ib-seg) button { color: var(--mast-t2); border-radius: 6px; height: 38px; min-height: 38px; }
  html.ops-navy :is(.ib-head) :is(.ib-seg) button[aria-pressed="true"] { background: var(--ops-selected-bg); color: var(--ops-selected-text); }
}

/* Mobile QA 2026-10-06 (OPS-10): All tasks and Season gave the band's whole second row to a one-line
   subtitle ("Name · Tue, Oct 6"), so with the search row 160px of a phone was header. Under 768px the subtitle sits
   beside the title and the band is one row, as it already is on Home. Schedule and Projects keep their two rows
   (the toolbar rule); Metrics, Inbox and Links use the second row for controls and are untouched. */
@media (max-width: 767.98px) {
  html.ops-navy body:is([data-view="season"]) .shell > .hdr:not([hidden]) {
    height: var(--mast-row1);
    grid-template-rows: var(--mast-row1);
  }
  html.ops-navy body:is([data-view="season"]) .shell > .hdr .screen-id {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }
  html.ops-navy body:is([data-view="season"]) .shell > .hdr .screen-title { flex: none; }
  html.ops-navy body:is([data-view="season"]) .shell > .hdr .screen-sub {
    flex: 0 1 auto;
    align-self: baseline;
    padding-top: 0;
    font-size: 13px;
  }
}

/* Phone: Links and Notifications print the title where every page does (24px, 72px down, 16px in), buttons centred on it. */
@media (max-width: 767.98px) {
  html.ops-navy #view :is(.ib-head, .lk-head) {
    height: auto;
    padding: 16px 16px 12px;
    grid-template-rows: 30px auto;
    row-gap: 8px;
    align-items: start;
  }
  html.ops-navy #view :is(.ib-head .ib-ttl h1, .lk-head .lk-ttl h1) { font-size: 24px; line-height: 30px; }
  html.ops-navy #view .lk-head .lk-ttl p { padding-top: 0; }
  html.ops-navy #view :is(.lk-head .lk-add, .ib-head [data-ib-readall]) { margin: -7px 0; align-self: start; }
}

/* Dropdowns, app-wide. Before this, the Category list opened as the plain Windows list: square corners, no gap, a
   green bar on the chosen row, the OS blue on hover.

   ONE recipe for every <select> in Ops, dark variant of the site's select.dpt-field recipe:
   - closed field: each screen keeps its own size and fill; the chevron is the same 12px slate chevron everywhere.
   - open list (Chrome, appearance: base-select): a raised panel 4px under the field, 1px card edge, 8px corners, the
     card shadow; rows 36px (44 under a finger), 6px corners; hover = the hover fill with white text; the chosen row =
     white 600 with a tick at its end. Green is not used: hover is white, selected is white.
   - Safari and Firefox keep their own native list; only its colours are set here.

   THIS SHEET LOADS LAST on purpose. Chrome draws the styled list only while `appearance` is base-select, and every screen
   sheet resets it to none for its closed-field look (an ordering trap). The !important on
   `appearance`, the chevron and the end padding is what keeps one recipe winning over those screen rules. */

html.ops-navy select option {
  background-color: var(--ops-bg-surface);
  color: var(--ops-text-secondary);
}
html.ops-navy select option:checked {
  background-color: var(--ops-bg-surface-hover);
  color: var(--ops-text-primary);
}

@supports (appearance: base-select) {
  html.ops-navy select:not([multiple]):not([size]) {
    appearance: base-select !important;
    /* The chevron is drawn once, by ::picker-icon below; the screens' background chevrons would double it. */
    background-image: none !important;
    padding-inline-end: 10px !important;
    gap: 8px;
    cursor: pointer;
  }
  html.ops-navy select:not([multiple]):not([size])::picker-icon {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    margin-inline-start: auto;
    background: var(--ops-icon-chevron) center / 12px 12px no-repeat;
    transition: transform .12s ease;
  }
  html.ops-navy select:not([multiple]):not([size]):open::picker-icon { transform: rotate(180deg); }
  html.ops-navy select:not([multiple]):not([size]):disabled::picker-icon { opacity: .45; }

  html.ops-navy select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
    margin-block: 4px;
    padding: 4px;
    border: 1px solid var(--ops-line-default);
    border-radius: 8px;
    background: var(--ops-bg-surface);
    color: var(--ops-text-primary);
    box-shadow: 0 1px 0 transparent inset, 0 14px 34px var(--ops-shadow-over);
    font: 500 13px/1.35 var(--pv-font, Inter, -apple-system, "Segoe UI", system-ui, sans-serif);
    max-block-size: min(420px, 70vh);
    overflow-y: auto;
  }

  html.ops-navy select:not([multiple]):not([size]) option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: transparent;
    color: var(--ops-text-secondary);
    font: inherit;
    white-space: normal;
    overflow-wrap: break-word;
    cursor: pointer;
  }
  html.ops-navy select:not([multiple]):not([size]) option:hover,
  html.ops-navy select:not([multiple]):not([size]) option:focus-visible {
    background-color: var(--ops-bg-surface-hover);
    color: var(--ops-text-primary);
    outline: none;
  }
  html.ops-navy select:not([multiple]):not([size]) option:checked {
    background-color: transparent;
    color: var(--ops-text-primary);
    font-weight: 600;
  }
  html.ops-navy select:not([multiple]):not([size]) option:checked:hover,
  html.ops-navy select:not([multiple]):not([size]) option:checked:focus-visible { background-color: var(--ops-bg-surface-hover); }
  html.ops-navy select:not([multiple]):not([size]) option:disabled { color: var(--ops-text-disabled); cursor: default; }
  html.ops-navy select:not([multiple]):not([size]) option::checkmark {
    order: 1;
    margin-inline-start: auto;
    color: var(--ops-text-primary);
  }

  @media (pointer: coarse), (max-width: 1439.98px) {
    html.ops-navy select:not([multiple]):not([size]) option { min-height: 44px; }
  }
}

/* ------------------------------------------------------------------ Mobile QA 2026-10-06
   Phone-layout rules that must out-rank every screen sheet, so they live here (this sheet loads last). The phone
   layout in Ops is everything under 1440px; 1440 and wider is untouched by this block. */
@media (max-width: 1439.98px) {
  /* An iPhone zooms the page when a focused field is under 16px, and a fixed frame then misaligns the search row and the bottom bar. */
  html.ops-navy :is(#view, #pv-side) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { font-size: 16px; }
  /* Text fields only: a dropdown or a date picker brings no keyboard, so the bar stays. --dpm-kb is the keyboard height; 0 where the browser resizes the page. !important because the phone bar's own display is !important. */
  html.ops-navy body.pv-sheet:has(#pv-side :is(textarea, input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="tel"], input[type="number"]):focus) #tabs { display: none !important; }
  html.ops-navy body.pv-sheet:has(#pv-side :is(textarea, input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="tel"], input[type="number"]):focus) #pv-side { bottom: var(--dpm-kb, 0px); }
  /* A percentage min-height has nothing to measure against once the gated body is height: auto. */
  html.ops-navy body.gated .shell { min-height: 100vh; min-height: 100dvh; }
}

/* The error line keeps one line of height so a wrong PIN does not shift the form. */
html.ops-navy .pin-gate .pin-mark { display: block; width: 35px; height: 40px; margin: 0 auto 14px; }
html.ops-navy .pin-gate .pin-err { min-height: 22px; }
/* The lock-out screen: its field and its Sign in button are switched off, and now look it. The button kept its full
   green and a hand cursor, so it read as a live button that did nothing. Dimmed the way the app's other filled
   buttons are when off (navy.css, .btn.primary:disabled), and a mouse over it changes nothing. Lock-out only: while
   the button reads "Signing in..." it keeps its colour, so a quick sign-in does not flicker. */
html.ops-navy .pin-gate.is-locked :is(.btn.primary, input):disabled { opacity: .45; cursor: default; }
html.ops-navy .pin-gate.is-locked .btn.primary:disabled:hover { background: var(--nv-green); }

/* The shared mobile helper (public/vendor/dp-mobile.css, loaded after this sheet) takes its colours from these four.
   The pull-to-refresh disc is a raised navy tile with the field edge and a white mark. Never green: green is the
   selected tab and the Add button. Its place and size are the helper's; nothing in the page moves while it shows. */
html.ops-navy {
  --dpm-surface: var(--ops-bg-surface);
  --dpm-line: var(--ops-line-strong);
  --dpm-ink: var(--ops-text-primary);
  --dpm-ink-2: var(--ops-text-secondary);
}

/* Desktop and tablet only. Loads after the screen sheets and fields.css; phone sheets already use 44px rows. */
@media (min-width: 768px) {
  html.ops-navy .pt-row { min-height: 48px; }
  html.ops-navy .pt-lab { padding-top: 12px; padding-bottom: 12px; font-size: 14.5px; }
  html.ops-navy .pt-lab .pt-nm { font-size: 14.5px; line-height: 1.4; }
  /* Marks stay in a 36px band, centred in the taller row. */
  html.ops-navy .pt-row .pt-marks { inset: 6px 0 auto 0; height: 36px; }
}

/* --pv-side-w is also the canvas inset, so the page and the panel stay flush. Metrics sheets are styled in metrics.css. */
@media (min-width: 1800px) {
  html.ops-navy { --pv-side-w: 440px; }
}
@media (min-width: 1441px) and (max-width: 1799.98px) {
  html.ops-navy { --pv-side-w: 404px; }
}
@media (min-width: 1440px) and (max-width: 1440.98px) {
  html.ops-navy { --pv-side-w: 360px; }
}

@media (min-width: 1440px) {
  html.ops-navy #pv-side :is(.pv-sh, .pp-sh) { padding: 0 24px; gap: 12px; }
  html.ops-navy #pv-side :is(.pv-sh, .pp-sh) h2 { font-size: 20px; line-height: 28px; }
  html.ops-navy #pv-side .pv-sh > div:first-child:has(> h2:first-child) > p,
  html.ops-navy #pv-side .pv-sh :is(.pv-sub, p) { font-size: 14px; line-height: 20px; color: var(--ops-text-secondary); }
  html.ops-navy #pv-side .pv-sb,
  html.ops-navy #pv-side .pp-sb { padding-left: 24px; padding-right: 24px; }

  html.ops-navy #pv-side :is(.pp-side-sec h3, .hv-side h3, .tg-sec h3, .fv-side .pv-sec h3) {
    margin: 24px 0 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ops-text-primary);
  }
  html.ops-navy #pv-side :is(.tg-sec:first-child h3) { margin-top: 0; }
  html.ops-navy #pv-side :is(.pp-side-sec h3, .tg-sec h3) :is(span, .pv-hint) {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ops-text-secondary);
  }

  html.ops-navy #pv-side .pv-tk h2 { font-size: 20px; line-height: 28px; letter-spacing: 0; }
  html.ops-navy #pv-side .pv-sec h3 { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ops-text-primary); }

  html.ops-navy .tg-panel { padding: 0 24px 32px; gap: 0; }
  html.ops-navy .tg-ph { min-height: 64px; align-items: center; }
  html.ops-navy .tg-ph h2 { font-size: 20px; line-height: 28px; }
  html.ops-navy .tg-panel > :not(.tg-ph) { margin-top: 16px; }
  html.ops-navy .tg-form { gap: 16px; }
  html.ops-navy .tg-sec { margin-top: 24px; }
  html.ops-navy .tg-panel .tg-sec:first-of-type { margin-top: 24px; }
  html.ops-navy .tg-note { font-size: 14px; line-height: 20px; }
  html.ops-navy .tg-kv { font-size: 14px; line-height: 20px; gap: 12px; }
  html.ops-navy .tg-row2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  html.ops-navy #pv-side :is(.tg-form label, .pv-field, .pp-field, .pp-form label, .si-pf),
  html.ops-navy #season-inspector :is(.si-pf) {
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ops-text-secondary);
  }
  html.ops-navy #pv-side .pp-field > span { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ops-text-secondary); margin: 0; }
  html.ops-navy #pv-side :is(.pv-field, .pp-field) { margin-top: 16px; }
  html.ops-navy #pv-side .pv-facts dt { font-size: 12px; line-height: 16px; color: var(--ops-text-secondary); }

  html.ops-navy #pv-side :is(.tg-form :is(input, select), .pv-field :is(input, select), .pp-input, select.pp-input, .si-pf :is(input, select), .fr-in, .lk-form .pv-field :is(input, select.dpt-field), .pv-cin) {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    padding-top: 0;
    padding-bottom: 0;
  }
  html.ops-navy #pv-side :is(.tg-form textarea, .pp-area, .lk-form .pv-field textarea, .si-pf textarea) {
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    font-size: 14px;
    line-height: 20px;
  }
  html.ops-navy #pv-side .tg-form textarea { height: 96px; }
  html.ops-navy #pv-side .tg-sec select { height: 40px; font-size: 14px; }

  html.ops-navy #pv-side .fr-in.fr-date { width: 190px; }
  html.ops-navy #pv-side .fr-fq { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ops-text-primary); }

  html.ops-navy #pv-side :is(.tg-act, .tg-open) {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
  }
  html.ops-navy #pv-side .tg-acts { gap: 0 20px; }

  html.ops-navy #season-inspector { padding-left: 24px; padding-right: 24px; }
  html.ops-navy #season-inspector h2 { font-size: 20px; line-height: 28px; }

  html.ops-navy :is(body[data-view="today"], body[data-view="calendar"], body[data-view="plan"], body[data-view="season"], body[data-view="inbox"]:has(#pv-side > .ib-side), body[data-view="links"]:has(#pv-side > .lk-side), body[data-view="projects"]:has(#pv-side > :is(.pp-side))) #modal-root .overlay > .modal { --mpad-x: 24px; padding-left: 24px; padding-right: 24px; padding-top: 18px; }
  html.ops-navy :is(body[data-view="today"], body[data-view="calendar"], body[data-view="plan"], body[data-view="season"], body[data-view="inbox"]:has(#pv-side > .ib-side), body[data-view="links"]:has(#pv-side > .lk-side), body[data-view="projects"]:has(#pv-side > :is(.pp-side))) #modal-root .overlay > .modal > h2:first-of-type { font-size: 20px; line-height: 28px; margin: 0 48px 16px 0; }
  html.ops-navy :is(body[data-view="today"], body[data-view="calendar"], body[data-view="plan"], body[data-view="season"], body[data-view="inbox"]:has(#pv-side > .ib-side), body[data-view="links"]:has(#pv-side > .lk-side), body[data-view="projects"]:has(#pv-side > :is(.pp-side))) #modal-root .overlay > .modal:has(#te-form) > h2:first-of-type { font-size: 20px; line-height: 28px; }
  html.ops-navy :is(body[data-view="today"], body[data-view="calendar"], body[data-view="plan"], body[data-view="season"], body[data-view="inbox"]:has(#pv-side > .ib-side), body[data-view="links"]:has(#pv-side > .lk-side), body[data-view="projects"]:has(#pv-side > :is(.pp-side))) #modal-root .overlay > .modal :is(label, .msub) { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ops-text-secondary); margin: 16px 0 4px; }
  html.ops-navy :is(body[data-view="today"], body[data-view="calendar"], body[data-view="plan"], body[data-view="season"], body[data-view="inbox"]:has(#pv-side > .ib-side), body[data-view="links"]:has(#pv-side > .lk-side), body[data-view="projects"]:has(#pv-side > :is(.pp-side))) #modal-root .overlay > .modal :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="date"][hidden]) { box-sizing: border-box; height: 40px; font-size: 14px; line-height: 20px; padding-top: 0; padding-bottom: 0; }
  html.ops-navy :is(body[data-view="today"], body[data-view="calendar"], body[data-view="plan"], body[data-view="season"], body[data-view="inbox"]:has(#pv-side > .ib-side), body[data-view="links"]:has(#pv-side > .lk-side), body[data-view="projects"]:has(#pv-side > :is(.pp-side))) #modal-root .overlay > .modal .season-weeks { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.ops-navy :is(body[data-view="today"], body[data-view="calendar"], body[data-view="plan"], body[data-view="season"], body[data-view="inbox"]:has(#pv-side > .ib-side), body[data-view="links"]:has(#pv-side > .lk-side), body[data-view="projects"]:has(#pv-side > :is(.pp-side))) #modal-root .overlay > .modal .se-wk { min-width: 0; flex-wrap: wrap; }
  html.ops-navy :is(body[data-view="today"], body[data-view="calendar"], body[data-view="plan"], body[data-view="season"], body[data-view="inbox"]:has(#pv-side > .ib-side), body[data-view="links"]:has(#pv-side > .lk-side), body[data-view="projects"]:has(#pv-side > :is(.pp-side))) #modal-root .overlay > .modal textarea { box-sizing: border-box; min-height: 96px; font-size: 14px; line-height: 20px; }
}

/* Starts / Ends and Category / Repeats sit side by side only where each field is 180px or wider (the 440px panel). */
@media (min-width: 1800px) {
  html.ops-navy .tg-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
}

@media (max-width: 1439.98px) {
  html.ops-navy :is(#pv-side .tg-form label, #pv-side .pv-field, #pv-side .pp-field, #pv-side .pp-form label, #pv-side .si-pf, #modal-root .modal label, #modal-root .modal .msub) {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ops-text-secondary);
  }
  html.ops-navy #pv-side .pp-field > span { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ops-text-secondary); }
}

/* A sheet can stay open across screens, so these rules are not scoped to one view. */
@media (min-width: 1440px) {
  html.ops-navy #modal-root .overlay > .modal .season-weeks { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.ops-navy #modal-root .overlay > .modal .se-wk { min-width: 0; flex-wrap: wrap; }
  html.ops-navy #modal-root .overlay > .modal > h2:first-of-type { margin-bottom: 16px; }
}
@media (max-width: 1439.98px) {
  html.ops-navy #modal-root .modal .season-weeks { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.ops-navy #modal-root .modal .se-wk { min-width: 0; flex-wrap: wrap; }
}

/* A selected control is filled with the focus colour, so its focus line takes the selected text colour to stay visible. */
html.ops-navy :is(#modal-root, body) :is(.lk-tab[aria-selected="true"], .pchip.on, .pchip.is-on, .dp5-fchip.is-on, .dp5-fchip[aria-pressed="true"], .bv-seg button.on):focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--ops-selected-text); }

html.ops-navy :is(.tg-day, .tg-due, .tg-sea-row).is-today :is(.tg-dn, .tg-meta) { color: var(--ops-text-secondary); }

html.ops-navy:has(#view.bd-on) #toolbar .sh-ib { color: var(--ops-text-on-gradient); }
html.ops-navy:has(#view.bd-on) #toolbar .sh-ib:hover { background: var(--ops-board-shade); }

/* Right panels slide in over the page from the right edge; the page under them keeps its width. */
@keyframes ops-panel-in { from { transform: translateX(100%); } to { transform: none; } }
@media (min-width: 1440px) {
  html.ops-navy body .st-panel,
  html.ops-navy body .sh-drawer,
  html.ops-navy body .sh-dialog.tc-dialog,
  html.ops-navy body #modal-root .overlay > .modal { animation: ops-panel-in 220ms cubic-bezier(.2, .8, .2, 1); }
  html.ops-navy body .sh-scrim:not(.sh-dl) { background: linear-gradient(to right, var(--ops-veil-far), var(--ops-veil-near)); animation: ops-veil-in 220ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  html.ops-navy body :is(.st-panel, .sh-drawer, .sh-dialog, .sh-scrim, #modal-root .overlay > .modal) { animation: none; }
}

@keyframes ops-veil-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1440px) {
  html.ops-navy body:has(#modal-root .overlay > .modal)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    background: linear-gradient(to right, var(--ops-veil-far), var(--ops-veil-near));
    animation: ops-veil-in 220ms ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.ops-navy body::after { animation: none; }
}
@media (min-width: 1440px) {
  html.ops-navy.s2-tk body:has(#view > .s2)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 35;
    pointer-events: none;
    background: linear-gradient(to right, var(--ops-veil-far), var(--ops-veil-near));
    animation: ops-veil-in 220ms ease-out;
  }
}