/* ==========================================================================
   BOARD-SKIN (2026-08-28): the approved full-app look, verbatim from the
   concept the rollout was approved against (concept A, this repo:
   concept-lab/2026-08-26-markcon-month-view/concepts/a-timetable.css).

   Scope: every rule applies only while boardHome is on, via the
   body.v2-boardhome class that applyWorkspaceLabels() toggles. Flag off,
   this file is completely inert and the pre-rollout look is untouched.

   Loaded after styles-v2.css so its !important declarations win ties.
   ========================================================================== */

/* ==========================================================================
   Concept A: TIMETABLE
   Tradition: Swiss information design. The railway timetable, the technical
   chart. The grid carries the meaning; hue is spent once and never again.

   Thesis: taxonomy gets no colour. Rank is encoded in VALUE (how dark a mark
   is), because a Marquee program outranks a Small one and darkness is the
   honest way to say so. One accent exists in the whole screen: JPSA blue.

   Status: DRAFT. Override layer only. Touches no production file.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

body.v2-boardhome {
  /* One neutral family. The old #143a44 teal ink is gone. */
  --tt-ink:      #16181c;
  --tt-ink-80:   #3b4046;
  --tt-ink-60:   #646b73;
  --tt-ink-40:   #9aa2aa;
  --tt-ink-20:   #c9ced3;
  --tt-rule:     #e2e5e8;
  --tt-rule-hard:#16181c;
  --tt-paper:    #ffffff;
  --tt-sunken:   #f7f8f9;

  /* The single accent. Nothing else in this concept is allowed a hue. */
  --tt-acc:      #00609C;
  --tt-acc-soft: #e8f0f6;

  /* Rank by value, not by hue. */
  --tt-rank-1:   #16181c;  /* Marquee  */
  --tt-rank-2:   #00609C;  /* Medium   */
  --tt-rank-3:   #aab2b9;  /* Small    */

  font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
  color: var(--tt-ink) !important;
  background: var(--tt-paper) !important;
  -webkit-font-smoothing: antialiased;
}

body.v2-boardhome *:not(.material-icons):not([class*="icon"]) {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   1. The leftover teal gradient banner. It is an inline style from the
   pre-repalette system, so it needs to be overridden explicitly.
   -------------------------------------------------------------------------- */

body.v2-boardhome #welcome-banner {
  background: var(--tt-sunken) !important;
  color: var(--tt-ink) !important;
  border-bottom: 1px solid var(--tt-rule) !important;
  border-top: 2px solid var(--tt-rule-hard) !important;
  padding: 14px 28px !important;
}
body.v2-boardhome #welcome-banner div { color: var(--tt-ink) !important; }
body.v2-boardhome #welcome-banner div[style*="font-size:28px"],
body.v2-boardhome #welcome-banner div[style*="font-size: 28px"] { display: none !important; }
body.v2-boardhome #welcome-banner button {
  background: transparent !important;
  border: 1px solid var(--tt-ink) !important;
  color: var(--tt-ink) !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
}

/* --------------------------------------------------------------------------
   2. Header. Flat, no wave ornament, no gradient. A masthead rule instead.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-header {
  background: var(--tt-paper) !important;
  background-image: none !important;
  border-bottom: 2px solid var(--tt-rule-hard) !important;
  box-shadow: none !important;
}
body.v2-boardhome .v2-header::before,
body.v2-boardhome .v2-header::after { display: none !important; }
body.v2-boardhome .v2-header-inner { padding-top: 18px !important; padding-bottom: 18px !important; }
body.v2-boardhome .v2-header-title {
  color: var(--tt-ink) !important;
  line-height: 1 !important;
  /* Family, size, weight, and optical grade live in the DISPLAY TIER
     section at the end of this file; keep one source of truth. */
}
body.v2-boardhome .v2-header-logo img { filter: none !important; }
body.v2-boardhome .v2-header-divider { background: var(--tt-ink-20) !important; }
body.v2-boardhome .v2-header-right,
body.v2-boardhome .v2-header-right * { color: var(--tt-ink-60) !important; }
body.v2-boardhome .v2-header-right button {
  border-radius: 0 !important;
  border: 1px solid var(--tt-ink-20) !important;
  background: transparent !important;
  color: var(--tt-ink) !important;
  font-size: 11px !important;
  letter-spacing: .09em !important;
}

/* --------------------------------------------------------------------------
   3. Tabs. Squared, underline-active. Pills read as consumer software.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-tab-bar {
  background: var(--tt-paper) !important;
  border-bottom: 1px solid var(--tt-rule) !important;
}
body.v2-boardhome .v2-tab-bar-inner { gap: 0 !important; }
body.v2-boardhome .v2-tab {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--tt-ink-60) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 14px 20px !important;
}
body.v2-boardhome .v2-tab.active,
body.v2-boardhome .v2-tab[aria-selected="true"] {
  background: transparent !important;
  color: var(--tt-ink) !important;
  border-bottom-color: var(--tt-acc) !important;
  font-weight: 600 !important;
}
body.v2-boardhome .v2-tab:focus-visible { outline: 2px solid var(--tt-acc) !important; outline-offset: -2px !important; }

/* --------------------------------------------------------------------------
   4. NEEDS ATTENTION. Promoted. In the current build this is 11px caps sitting
   under a 34px month title, which inverts the real priority. Here it becomes
   the first thing the eye lands on, with the numerals set in Plex Mono.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-attention-strip {
  display: grid !important;
  grid-template-columns: max-content 1fr !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: var(--tt-paper) !important;
  border: 0 !important;
  border-top: 2px solid var(--tt-rule-hard) !important;
  border-bottom: 1px solid var(--tt-rule) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 34px !important;
}
body.v2-boardhome .v2-strip-label {
  display: flex !important;
  align-items: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink-40) !important;
  padding: 0 26px 0 0 !important;
  border-right: 1px solid var(--tt-rule) !important;
  margin-right: 26px !important;
}
body.v2-boardhome .v2-strip-chips {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}
body.v2-boardhome .v2-strip-chip {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 32px 18px 0 !important;
  margin-right: 32px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink-60) !important;
  cursor: pointer;
}
body.v2-boardhome .v2-strip-num {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--tt-ink) !important;
  letter-spacing: -.02em !important;
  /* Plex Mono slashes its zero by default. In a stat readout that reads as a
     glyph error rather than a figure, so it is switched off. */
  font-feature-settings: "zero" 0 !important;
  font-variant-numeric: lining-nums !important;
}
/* At risk is the one place an alarm is honest, and it is a rule, not a fill. */
body.v2-boardhome .v2-strip-chip--risk {
  border-bottom: 3px solid var(--tt-acc) !important;
}
body.v2-boardhome .v2-strip-chip--risk .v2-strip-num { color: var(--tt-acc) !important; }
body.v2-boardhome .v2-strip-chip.is-zero { opacity: .32 !important; }
body.v2-boardhome .v2-strip-chip.is-zero .v2-strip-num { color: var(--tt-ink-40) !important; }
body.v2-boardhome .v2-strip-chip:hover:not(.is-zero) { color: var(--tt-ink) !important; }

/* --------------------------------------------------------------------------
   5. Month navigation. The month name is context, not the headline. It gets
   demoted so that the data below it can be the subject of the screen.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-cal-nav {
  border-bottom: 1px solid var(--tt-rule-hard) !important;
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
  align-items: baseline !important;
}
body.v2-boardhome .v2-cal-nav-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink) !important;
}
body.v2-boardhome .v2-cal-nav-buttons button {
  background: transparent !important;
  border: 1px solid var(--tt-ink-20) !important;
  border-radius: 0 !important;
  width: 30px !important;
  height: 30px !important;
  color: var(--tt-ink) !important;
}
body.v2-boardhome .v2-cal-nav-buttons button:hover { border-color: var(--tt-ink) !important; }

/* --------------------------------------------------------------------------
   6. The calendar. Hairline grid, left-aligned content, real program names.
   The current build spends roughly 500px of height to convey seven facts.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-cal-header-cell {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink-40) !important;
  text-align: left !important;
  padding: 12px 8px 8px !important;
  border-bottom: 1px solid var(--tt-rule) !important;
}
body.v2-boardhome .v2-cal-grid {
  border: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
  background: transparent !important;
}
body.v2-boardhome .v2-cal-cell {
  min-height: 92px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 5px !important;
  padding: 8px 8px 10px !important;
  background: var(--tt-paper) !important;
  border: 0 !important;
  border-right: 1px solid var(--tt-rule) !important;
  border-bottom: 1px solid var(--tt-rule) !important;
  border-radius: 0 !important;
}
body.v2-boardhome .v2-cal-cell:nth-child(7n) { border-right: 0 !important; }
/* Weekend columns get a whisper of tint, not a colour. */
body.v2-boardhome .v2-cal-cell:nth-child(7n+1),
body.v2-boardhome .v2-cal-cell:nth-child(7n) { background: var(--tt-sunken) !important; }

body.v2-boardhome .fg-cal-num {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--tt-ink-60) !important;
  line-height: 1 !important;
}
body.v2-boardhome .v2-cal-cell.other-month { background: var(--tt-sunken) !important; }
body.v2-boardhome .v2-cal-cell.other-month .fg-cal-num { color: var(--tt-ink-20) !important; }
body.v2-boardhome .v2-cal-cell.is-past .fg-cal-num { color: var(--tt-ink-40) !important; }

/* Today: a rule across the top of the cell, not a filled disc that reads as
   an error state. */
body.v2-boardhome .v2-cal-cell.today {
  border-top: 3px solid var(--tt-acc) !important;
  background: var(--tt-paper) !important;
}
body.v2-boardhome .v2-cal-cell.today .fg-cal-num {
  color: var(--tt-acc) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Dots become square rank marks. Value, not hue. */
body.v2-boardhome .fg-cal-dots { gap: 3px !important; margin: 0 !important; }
body.v2-boardhome .fg-cal-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 0 !important;
}
body.v2-boardhome .fg-cal-dot.tier-marquee { background: var(--tt-rank-1) !important; }
body.v2-boardhome .fg-cal-dot.tier-medium  { background: var(--tt-rank-2) !important; }
body.v2-boardhome .fg-cal-dot.tier-small   { background: var(--tt-rank-3) !important; }
body.v2-boardhome .fg-cal-dot.tier-internal{ background: var(--tt-ink-20) !important; }

/* The program name is the point of the cell. Give it room to be read. */
body.v2-boardhome .fg-cal-event-name {
  font-size: 11.5px !important;
  line-height: 1.32 !important;
  font-weight: 450 !important;
  color: var(--tt-ink) !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  max-width: 100% !important;
}
body.v2-boardhome .v2-cal-cell:has(.tier-marquee) .fg-cal-event-name {
  font-weight: 600 !important;
}
body.v2-boardhome .v2-cal-cell.is-past .fg-cal-event-name { color: var(--tt-ink-60) !important; }

/* --------------------------------------------------------------------------
   7. Legend. Kept, because information scent is mandatory here, but set as a
   caption rather than a component.
   -------------------------------------------------------------------------- */

body.v2-boardhome .fg-legend {
  border: 0 !important;
  border-top: 1px solid var(--tt-rule) !important;
  padding: 10px 0 0 !important;
  margin-top: 0 !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink-40) !important;
  gap: 20px !important;
}
body.v2-boardhome .fg-legend .fg-cal-dot { border-radius: 0 !important; }
body.v2-boardhome .v2-legend-tiers-link { color: var(--tt-acc) !important; text-decoration: none !important; }

/* --------------------------------------------------------------------------
   8. The list below. In the current build it repeats the calendar verbatim.
   Here it earns its place by becoming a schedule: date in the margin, name,
   owner. Tabular, scannable, no coloured badge tiles.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-section-title {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink) !important;
}
body.v2-boardhome .v2-section-count {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  color: var(--tt-ink-40) !important;
}
body.v2-boardhome .v2-cal-list-range-toggle { gap: 0 !important; border: 1px solid var(--tt-ink-20) !important; }
body.v2-boardhome .v2-toggle-btn {
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--tt-ink-20) !important;
  background: transparent !important;
  color: var(--tt-ink-60) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  padding: 7px 14px !important;
}
body.v2-boardhome .v2-toggle-btn:last-child { border-right: 0 !important; }
body.v2-boardhome .v2-toggle-btn.active { background: var(--tt-ink) !important; color: #fff !important; }

body.v2-boardhome .fg-event-item {
  display: grid !important;
  grid-template-columns: 78px 1fr max-content !important;
  align-items: baseline !important;
  gap: 0 20px !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid var(--tt-rule) !important;
  border-left: 0 !important;
}
body.v2-boardhome .fg-date-badge {
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  color: var(--tt-ink-60) !important;
  text-align: left !important;
}
body.v2-boardhome .fg-date-badge-month,
body.v2-boardhome .fg-date-badge-day {
  display: inline !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
body.v2-boardhome .fg-date-badge-month::after { content: " "; }
/* Rank returns as a rule on the row, at the same three values as the grid. */
body.v2-boardhome .fg-event-item:has(.fg-date-badge.tier-marquee) { box-shadow: inset 3px 0 0 var(--tt-rank-1) !important; padding-left: 12px !important; }
body.v2-boardhome .fg-event-item:has(.fg-date-badge.tier-medium)  { box-shadow: inset 3px 0 0 var(--tt-rank-2) !important; padding-left: 12px !important; }
body.v2-boardhome .fg-event-item:has(.fg-date-badge.tier-small)   { box-shadow: inset 3px 0 0 var(--tt-rank-3) !important; padding-left: 12px !important; }

body.v2-boardhome .fg-event-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--tt-ink) !important;
  letter-spacing: -.005em !important;
}
body.v2-boardhome .fg-event-staff {
  font-size: 11px !important;
  color: var(--tt-ink-40) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
}
body.v2-boardhome .v2-week-links { display: flex !important; gap: 14px !important; }
body.v2-boardhome .v2-crosslink--inline {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--tt-acc) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
body.v2-boardhome .v2-crosslink--inline:hover { text-decoration: underline !important; }

/* ==========================================================================
   PART 2: the other three screens.
   Communications Calendar, Marketing Plans, Progress.

   Same law as part one. One accent in the whole product, and it means
   "look here". Category (which channel, which tier) is ranked in ink values
   and always carries a written label, never a hue on its own.
   ========================================================================== */

/* Channel tokens. The app sets these inline on every chip, so they have to be
   retuned at the token level rather than chip by chip. Ranked by how often
   the channel is actually used. */
body.v2-boardhome {
  --ch-email:          #16181c;
  --ch-email-bg:       #f0f1f2;
  --ch-email-border:   #c9ced3;
  --ch-text:           #4d565e;
  --ch-text-bg:        #f2f3f4;
  --ch-text-border:    #c9ced3;
  --ch-snail-mail:     #7d868e;
  --ch-snail-mail-bg:  #f4f5f6;
  --ch-snail-mail-border: #d5d9dd;
  --ch-social-media:   #a9b1b8;
  --ch-social-media-bg: #f7f8f9;
  --ch-social-media-border: #dfe3e6;
  --ch-ajp:            #646b73;
  --ch-ajp-bg:         #f4f5f6;
  --ch-leadership:     #646b73;
  --ch-leadership-bg:  #f4f5f6;
  --ch-community:      var(--tt-acc);
  --ch-community-bg:   var(--tt-acc-soft);
  --ch-other:          #9aa2aa;
  --ch-other-bg:       #f7f8f9;
}

/* --------------------------------------------------------------------------
   Shared furniture: eyebrows, section heads, buttons, selects, panels.
   -------------------------------------------------------------------------- */

body.v2-boardhome .pp-eyebrow {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink-40) !important;
}
body.v2-boardhome .mp-section-heading h3,
body.v2-boardhome .mp-workspace-header h2,
body.v2-boardhome .mp-progress-hero h1 {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  color: var(--tt-ink) !important;
}
body.v2-boardhome .mp-progress-hero h1,
body.v2-boardhome .mp-workspace-header h2 { font-size: 26px !important; }
body.v2-boardhome .mp-section-heading h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
body.v2-boardhome .mp-workspace-header p,
body.v2-boardhome .mp-progress-hero p {
  font-size: 13px !important;
  color: var(--tt-ink-60) !important;
}

body.v2-boardhome .ds-btn,
body.v2-boardhome .v2-filter-select,
body.v2-boardhome .mp-search input {
  border-radius: 0 !important;
  border: 1px solid var(--tt-ink-20) !important;
  background: var(--tt-paper) !important;
  color: var(--tt-ink) !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 12px !important;
}
body.v2-boardhome .ds-btn {
  font-size: 11px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
body.v2-boardhome .ds-btn:hover { border-color: var(--tt-ink) !important; }
/* 2026-09-25, Guy's review: buttons without a size class (for example "Find a program",
   "Create program") had no horizontal padding, so their tracked uppercase labels
   touched the border. Every button now shares one height and one padding. */
body.v2-boardhome .ds-btn {
  padding: 7px 16px !important;
  min-height: 36px !important;
  height: auto !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  transform: none !important;
}
body.v2-boardhome .ds-btn:hover, body.v2-boardhome .ds-btn:active { box-shadow: none !important; transform: none !important; }
body.v2-boardhome .ds-btn.ds-btn-sm { padding: 7px 14px !important; }
body.v2-boardhome .v2-board-tools { justify-content: flex-start !important; gap: 10px !important; }
body.v2-boardhome .v2-board-search { margin-right: auto !important; }
body.v2-boardhome .v2-board-controls .v2-board-search { margin-left: auto !important; margin-right: 0 !important; }
body.v2-boardhome .v2-comms-tools { margin-bottom: 14px !important; }
body.v2-boardhome .v2-comms-toolbar { justify-content: flex-start !important; }
body.v2-boardhome .v2-board-tools .v2-search-input { box-sizing: border-box !important; min-height: 36px !important; height: 36px !important; }
@media (max-width: 600px) {
  body.v2-boardhome .ds-btn,
  body.v2-boardhome .ds-btn.ds-btn-sm,
  body.v2-boardhome .v2-comms-toolbar-right .ds-btn { min-height: 44px !important; }
  body.v2-boardhome .v2-cal-nav-buttons button.ds-btn,
  body.v2-boardhome .v2-cal-nav-buttons button.fg-nav-btn { min-height: 44px !important; height: 44px !important; }
  body.v2-boardhome .v2-board-tools .v2-search-input { min-height: 44px !important; height: 44px !important; }
}
/* 2026-09-25, Guy: "add some color to the buttons so we know they are buttons".
   The skin's own accent (--tt-acc, JPSA blue) carries the actions: filled for the
   primary action, outlined for the secondary, text-only for the ghost. Filters and
   segmented controls stay ink so they read as toggles, not actions. */
body.v2-boardhome .ds-btn-primary {
  background: var(--tt-acc) !important;
  border-color: var(--tt-acc) !important;
  color: #ffffff !important;
}
body.v2-boardhome .ds-btn-primary:hover { background: #005480 !important; border-color: #005480 !important; color: #ffffff !important; }
body.v2-boardhome .ds-btn-secondary {
  background: #ffffff !important;
  border-color: var(--tt-acc) !important;
  color: var(--tt-acc) !important;
}
body.v2-boardhome .ds-btn-secondary:hover { background: var(--tt-acc-soft) !important; border-color: #005480 !important; color: #005480 !important; }
body.v2-boardhome .ds-btn-ghost { color: var(--tt-acc) !important; border-color: transparent !important; }
body.v2-boardhome .ds-btn-ghost:hover { background: var(--tt-acc-soft) !important; border-color: transparent !important; color: #005480 !important; }
body.v2-boardhome .ds-btn:focus-visible { outline: 2px solid var(--tt-acc) !important; outline-offset: 2px !important; }
body.v2-boardhome .ds-btn[disabled], body.v2-boardhome .ds-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }
body.v2-boardhome .mp-search-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink-40) !important;
}

body.v2-boardhome .mp-workspace,
body.v2-boardhome .mp-plan-programs,
body.v2-boardhome .mp-progress-programs,
body.v2-boardhome .mp-progress-detail {
  background: var(--tt-paper) !important;
  border: 1px solid var(--tt-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.v2-boardhome .mp-workspace-header {
  background: var(--tt-paper) !important;
  border-bottom: 2px solid var(--tt-rule-hard) !important;
}
body.v2-boardhome .mp-progress-hero {
  background: var(--tt-paper) !important;
  border-bottom: 2px solid var(--tt-rule-hard) !important;
}

/* --------------------------------------------------------------------------
   Status. In this concept the accent means one thing: look here. So overdue
   takes the accent and nothing else competes with it.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-send-status {
  border-radius: 0 !important;
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 4px 9px !important;
  box-shadow: none !important;
}
body.v2-boardhome .v2-send-status.v2-st-overdue {
  background: var(--tt-acc) !important;
  color: #fff !important;
}
body.v2-boardhome .v2-send-status.v2-st-planned {
  background: transparent !important;
  color: var(--tt-ink-60) !important;
  box-shadow: inset 0 0 0 1px var(--tt-ink-20) !important;
}
body.v2-boardhome .v2-send-status-glyph { display: none !important; }

body.v2-boardhome .mp-card-status {
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  padding: 2px 0 !important;
}
body.v2-boardhome .mp-card-status--overdue,
body.v2-boardhome .mp-card-status--attention,
body.v2-boardhome .mp-card-status--soon { color: var(--tt-acc) !important; background: transparent !important; }
body.v2-boardhome .mp-card-status--calm { color: var(--tt-ink-40) !important; background: transparent !important; }

body.v2-boardhome .mp-pace {
  border-radius: 0 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 5px 11px !important;
}
body.v2-boardhome .mp-pace--attention,
body.v2-boardhome .mp-pace--risk { background: var(--tt-acc) !important; color: #fff !important; }
body.v2-boardhome .mp-pace--on,
body.v2-boardhome .mp-pace--complete { background: transparent !important; color: var(--tt-ink-60) !important; box-shadow: inset 0 0 0 1px var(--tt-ink-20) !important; }

/* --------------------------------------------------------------------------
   Programme cards in the left rail of Marketing Plans and Progress.
   -------------------------------------------------------------------------- */

body.v2-boardhome .mp-plan-program,
body.v2-boardhome .mp-progress-program {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tt-rule) !important;
  background: var(--tt-paper) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
body.v2-boardhome .mp-plan-program.is-selected,
body.v2-boardhome .mp-progress-program.is-selected,
body.v2-boardhome .mp-plan-program[aria-pressed="true"],
body.v2-boardhome .mp-progress-program[aria-pressed="true"] {
  background: var(--tt-sunken) !important;
  box-shadow: inset 3px 0 0 var(--tt-acc) !important;
  border-color: var(--tt-rule) !important;
}
body.v2-boardhome .mp-plan-program-heading strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--tt-ink) !important;
}
body.v2-boardhome .mp-plan-program span,
body.v2-boardhome .mp-progress-program span { color: var(--tt-ink-60) !important; font-size: 12px !important; }
body.v2-boardhome .mp-plan-program small,
body.v2-boardhome .mp-progress-program small { color: var(--tt-ink-40) !important; font-size: 11px !important; }

/* --------------------------------------------------------------------------
   Snapshot grid: a specification table, which is what it actually is.
   -------------------------------------------------------------------------- */

body.v2-boardhome .mp-snapshot-grid span {
  border-left: 1px solid var(--tt-rule) !important;
  padding-left: 14px !important;
}
body.v2-boardhome .mp-snapshot-grid small {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink-40) !important;
}
body.v2-boardhome .mp-snapshot-grid strong {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tt-ink) !important;
}

/* --------------------------------------------------------------------------
   Communications rows, shared by Marketing Plans, Progress and the Comms week
   list. Squared, ruled, no card stack.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-drawer-comm,
body.v2-boardhome .v2-send-row {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tt-rule) !important;
  background: var(--tt-paper) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}
body.v2-boardhome .v2-drawer-comm.v2-st-row--overdue,
body.v2-boardhome .v2-send-row.v2-st-row--overdue {
  background: var(--tt-paper) !important;
  box-shadow: inset 3px 0 0 var(--tt-acc) !important;
}
body.v2-boardhome .v2-drawer-comm-title { font-size: 14px !important; font-weight: 500 !important; color: var(--tt-ink) !important; }
body.v2-boardhome .v2-drawer-comm-sub { font-size: 11.5px !important; color: var(--tt-ink-40) !important; }
body.v2-boardhome .v2-send-chip {
  border-radius: 0 !important;
  width: 22px !important;
  height: 22px !important;
}
body.v2-boardhome .v2-send-campaign { font-size: 14px !important; font-weight: 500 !important; color: var(--tt-ink) !important; }
body.v2-boardhome .v2-send-meta { font-size: 11.5px !important; color: var(--tt-ink-40) !important; }

/* --------------------------------------------------------------------------
   Progress: milestones and responsibilities.
   -------------------------------------------------------------------------- */

body.v2-boardhome .pp-workflow-row {
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tt-rule) !important;
  background: var(--tt-paper) !important;
  padding: 13px 14px !important;
}
body.v2-boardhome .pp-workflow-row.overdue { background: var(--tt-paper) !important; box-shadow: inset 3px 0 0 var(--tt-acc) !important; }
body.v2-boardhome .pp-workflow-mark {
  border-radius: 0 !important;
  width: 9px !important;
  height: 9px !important;
  background: var(--tt-paper) !important;
  border: 1.5px solid var(--tt-ink-20) !important;
}
body.v2-boardhome .pp-workflow-mark.done { background: var(--tt-ink) !important; border-color: var(--tt-ink) !important; }
body.v2-boardhome .pp-workflow-mark.scheduled { background: var(--tt-ink-20) !important; border-color: var(--tt-ink-40) !important; }
body.v2-boardhome .pp-workflow-mark.waived { background: var(--tt-ink-40) !important; border-color: var(--tt-ink-40) !important; }
body.v2-boardhome .pp-workflow-main strong { font-size: 14px !important; font-weight: 500 !important; color: var(--tt-ink) !important; }
body.v2-boardhome .pp-workflow-main span { font-size: 11.5px !important; color: var(--tt-ink-40) !important; }
body.v2-boardhome .pp-workflow-state {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--tt-ink-60) !important;
  letter-spacing: 0 !important;
}
body.v2-boardhome .pp-workflow-row.overdue .pp-workflow-state { color: var(--tt-acc) !important; font-weight: 600 !important; }

body.v2-boardhome .v2-resp-row {
  border-bottom: 1px solid var(--tt-rule) !important;
  padding: 11px 2px !important;
}
body.v2-boardhome .v2-resp-check { accent-color: var(--tt-acc) !important; }
body.v2-boardhome .v2-resp-title { font-size: 13.5px !important; color: var(--tt-ink) !important; }
body.v2-boardhome .v2-resp-owner {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  color: var(--tt-ink-40) !important;
}

/* --------------------------------------------------------------------------
   Communications Calendar: toolbar, legend and the chip grid.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-chan-chip {
  border-radius: 0 !important;
  border: 1px solid var(--tt-ink-20) !important;
  border-right: 0 !important;
  background: var(--tt-paper) !important;
  color: var(--tt-ink-60) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  padding: 7px 15px !important;
}
body.v2-boardhome .v2-chan-filter .v2-chan-chip:last-child { border-right: 1px solid var(--tt-ink-20) !important; }
body.v2-boardhome .v2-chan-chip.active { background: var(--tt-ink) !important; color: #fff !important; border-color: var(--tt-ink) !important; }

/* 2026-09-25, Guy's review of the real-data preview: the filters read as loose,
   tall boxes with missing edges, the month arrows were faint, and the toolbar
   rows did not align. One joined filter bar, one compact height, visible arrows. */
body.v2-boardhome .mp-search { margin-bottom: 12px !important; }
body.v2-boardhome .v2-comms-toolbar { row-gap: 12px !important; column-gap: 16px !important; margin-bottom: 14px !important; }
body.v2-boardhome .v2-chan-filter { gap: 0 !important; margin: 0 !important; }
body.v2-boardhome .v2-chan-chip {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-right: 1px solid var(--tt-ink-20) !important;
  margin-left: -1px !important;
  line-height: 1 !important;
}
body.v2-boardhome .v2-chan-chip:first-child { margin-left: 0 !important; }
body.v2-boardhome .v2-chan-chip.active { position: relative; z-index: 1; }
body.v2-boardhome .v2-comms-toolbar .v2-filter-select { height: 36px !important; min-height: 36px !important; padding: 0 30px 0 10px !important; font-size: 12px !important; }
body.v2-boardhome .v2-comms-toolbar-right { margin-left: auto !important; gap: 12px !important; }
body.v2-boardhome .v2-comms-toolbar-right .ds-btn { padding: 7px 14px !important; }
body.v2-boardhome .v2-cal-nav-buttons { gap: 0 !important; }
body.v2-boardhome .v2-cal-nav-buttons button {
  width: auto !important;
  min-width: 36px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  margin-left: -1px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.v2-boardhome .v2-cal-nav-buttons button:first-child { margin-left: 0 !important; }
body.v2-boardhome .v2-cal-nav-buttons button.ds-btn-primary { position: relative; z-index: 1; }
body.v2-boardhome .v2-cal-nav-buttons svg { width: 18px !important; height: 18px !important; stroke: var(--tt-ink) !important; stroke-width: 2.25 !important; }
body.v2-boardhome .v2-cal-nav-buttons .fg-nav-btn { font-size: 16px !important; font-weight: 600 !important; color: var(--tt-ink) !important; }

body.v2-boardhome .v2-legend-chip {
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--tt-ink-60) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
}
body.v2-boardhome .v2-comm-chip {
  border-radius: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

/* The comms calendar cells. Same law as the events grid. */
body.v2-boardhome .v2-cal-comms .v2-cal-cell,
body.v2-boardhome #tab-panel-comms .v2-cal-cell {
  align-items: stretch !important;
  text-align: left !important;
  min-height: 96px !important;
  padding: 7px 7px 9px !important;
}
body.v2-boardhome .v2-cal-day-num {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--tt-ink-60) !important;
  text-align: left !important;
}
body.v2-boardhome .v2-comm-cell-item {
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 3px solid var(--tt-ink-20) !important;
  background: transparent !important;
  padding: 2px 0 2px 7px !important;
  box-shadow: none !important;
}
body.v2-boardhome .v2-comm-cname {
  font-size: 11px !important;
  font-weight: 450 !important;
  color: var(--tt-ink) !important;
  letter-spacing: 0 !important;
}
body.v2-boardhome .v2-comm-cell-item.channel-email        { border-left-color: var(--tt-ink) !important; }
body.v2-boardhome .v2-comm-cell-item.channel-text         { border-left-color: #4d565e !important; }
body.v2-boardhome .v2-comm-cell-item.channel-snail-mail   { border-left-color: #7d868e !important; }
body.v2-boardhome .v2-comm-cell-item.channel-social-media { border-left-color: #a9b1b8 !important; }
/* Overdue is the one thing allowed to shout, and it shouts in the accent. */
body.v2-boardhome .v2-comm-cell-item.v2-st-row--overdue,
body.v2-boardhome .v2-comm-cell-item.overdue { border-left-color: var(--tt-acc) !important; }
body.v2-boardhome .v2-comm-cell-item.v2-st-row--overdue .v2-comm-cname,
body.v2-boardhome .v2-comm-cell-item.overdue .v2-comm-cname { color: var(--tt-acc) !important; font-weight: 600 !important; }

body.v2-boardhome .v2-week-item { border-bottom: 1px solid var(--tt-rule) !important; }
body.v2-boardhome .v2-week-event-name { font-size: 14px !important; font-weight: 500 !important; color: var(--tt-ink) !important; }

/* --------------------------------------------------------------------------
   PART 3: three defects found by looking at the Communications Calendar.

   1. Today in the comms grid is a separate element from the events grid
      (.v2-cal-day-num, not .fg-cal-num) and kept its berry disc.
   2. Overdue sends are drawn with an OUTLINE on a class called is-overdue,
      which no border or box-shadow rule can reach.
   3. The legend marks took their colour from the chip's own background, so
      zeroing that background left white icons on white.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-cal-cell.today .v2-cal-day-num {
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  color: var(--tt-acc) !important;
  font-weight: 600 !important;
}
body.v2-boardhome .v2-comm-cell-item.is-overdue {
  outline: none !important;
  border-left-color: var(--tt-acc) !important;
}
body.v2-boardhome .v2-comm-cell-item.is-overdue .v2-comm-cname {
  color: var(--tt-acc) !important;
  font-weight: 600 !important;
}
body.v2-boardhome .v2-legend-chip.channel-email .v2-comm-chip        { background: var(--ch-email) !important; }
body.v2-boardhome .v2-legend-chip.channel-text .v2-comm-chip         { background: var(--ch-text) !important; }
body.v2-boardhome .v2-legend-chip.channel-snail-mail .v2-comm-chip   { background: var(--ch-snail-mail) !important; }
body.v2-boardhome .v2-legend-chip.channel-social-media .v2-comm-chip { background: var(--ch-social-media) !important; }
body.v2-boardhome .v2-legend-chip .v2-comm-chip { color: #fff !important; }

/* --------------------------------------------------------------------------
   PART 4: layout defects found on Marketing Plans.

   The programme card heading is a flex ROW, so once the status label lost its
   pill and became wider tracked caps, it squeezed the title into one word per
   line. Stacking the two is both the fix and the better reading order: name
   first, state underneath.
   -------------------------------------------------------------------------- */

body.v2-boardhome .mp-plan-program-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
}
body.v2-boardhome .mp-plan-program-heading strong {
  display: block !important;
  width: 100% !important;
  line-height: 1.25 !important;
}
body.v2-boardhome .mp-plan-count {
  background: transparent !important;
  color: var(--tt-ink-40) !important;
  border-radius: 0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  font-feature-settings: "zero" 0 !important;
}
body.v2-boardhome .mp-support-promise {
  background: var(--tt-sunken) !important;
  border-radius: 0 !important;
  box-shadow: inset 3px 0 0 var(--tt-acc) !important;
  border: 0 !important;
}

/* Two tinted panels left over from the previous system (#eef2ff, a lavender
   that belongs to neither the old palette nor the new one). */
body.v2-boardhome .mp-plan-summary,
body.v2-boardhome .mp-next-action {
  background: var(--tt-sunken) !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: inset 3px 0 0 var(--tt-acc) !important;
}
body.v2-boardhome .mp-plan-summary strong,
body.v2-boardhome .mp-plan-summary b { color: var(--tt-acc) !important; }

/* The app hides the legend icons (a deliberate "label only" decision from the
   previous repalette). That was fine while the legend explained nothing, but
   these concepts encode channel as a left rule on each send, so the legend has
   to show that rule. A vertical mark, never a horizontal one. */
body.v2-boardhome .v2-legend-chip { display: inline-flex !important; align-items: center !important; gap: 7px !important; }
body.v2-boardhome .v2-legend-chip::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 12px;
  background: var(--tt-ink-20);
  flex: 0 0 auto;
}
body.v2-boardhome .v2-legend-chip.channel-email::before        { background: var(--ch-email); }
body.v2-boardhome .v2-legend-chip.channel-text::before         { background: var(--ch-text); }
body.v2-boardhome .v2-legend-chip.channel-snail-mail::before   { background: var(--ch-snail-mail); }
body.v2-boardhome .v2-legend-chip.channel-social-media::before { background: var(--ch-social-media); }
body.v2-boardhome .v2-legend-chip.v2-legend-overdue::before    { background: var(--tt-acc); }

/* #wip-banner carries a cream #FEF3C7 inline style. It ships hidden, so it is
   never painted today, but it would reappear cream the moment anyone toggles
   it on. Neutralised here rather than left as a trap. */
body.v2-boardhome #wip-banner {
  background: var(--tt-sunken) !important;
  color: var(--tt-ink) !important;
  border-bottom: 1px solid var(--tt-rule) !important;
}

/* --------------------------------------------------------------------------
   DISPLAY TIER (Guy's pick, 2026-08-28): Source Serif 4 carries the product
   name and the top screen titles, and nothing else. One serif voice over a
   quiet working sans; data surfaces are untouched. Serif tracking is near
   neutral on purpose, and font-synthesis is disabled so the browser never
   fakes a weight.
   -------------------------------------------------------------------------- */

body.v2-boardhome .v2-header-title {
  font-family: 'Source Serif 4', Georgia, serif !important;
  /* Guy 2026-08-30: the wordmark wears the serif's display grade ('opsz' 60),
     larger and lighter, an editorial masthead rather than enlarged body text.
     Picked from a 3-option dial on the live app; 22px/600 in the text grade
     read heavy and subordinate to the logo. */
  font-weight: 480 !important;
  font-size: 27px !important;
  letter-spacing: -0.015em !important;
  font-variation-settings: 'opsz' 60;
  font-synthesis-weight: none;
}
body.v2-boardhome .v2-cal-nav-title {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  font-synthesis-weight: none;
}
body.v2-boardhome .mp-workspace-header h2,
body.v2-boardhome .mp-progress-hero h1,
body.v2-boardhome .mp-progress-programs > h1 {
  font-family: 'Source Serif 4', Georgia, serif !important;
  /* Same display grade as the masthead so the serif speaks in one voice;
     a touch more weight than the wordmark because these run smaller.
     The bare listing <h1> in the Marketing Plans / Progress asides carries
     no class of its own; it was missed in the first port and stayed navy
     bold sans (caught 2026-08-30). */
  font-weight: 560 !important;
  letter-spacing: -0.01em !important;
  color: var(--tt-ink) !important;
  font-variation-settings: 'opsz' 60;
  font-synthesis-weight: none;
}
body.v2-boardhome .mp-section-heading h2 {
  /* Old Cobalt navy headings inside the panels; ink only, color = state. */
  color: var(--tt-ink) !important;
  font-weight: 600 !important;
}
body.v2-boardhome .mp-progress-program,
body.v2-boardhome .mp-progress-program strong,
body.v2-boardhome .mp-program-information > summary {
  /* Program cards and the program-information disclosure in Marketing
     Plans / Progress still carried old Cobalt slate/navy text; align to
     the system ink. */
  color: var(--tt-ink) !important;
}

/* 2026-09-25, Guy: buttons carry the accent everywhere, including the month
   controls and the header controls, so that a button is recognizable as one.
   Filled = creates or saves; outlined = opens or navigates; text-only = removes.
   These sit last so they win over the earlier month-control and header rules. */
body.v2-boardhome .v2-cal-nav-buttons button,
body.v2-boardhome .v2-cal-nav-buttons button.ds-btn-primary,
body.v2-boardhome .v2-cal-nav-buttons button.ds-btn-ghost {
  background: #ffffff !important;
  border: 1px solid var(--tt-acc) !important;
  color: var(--tt-acc) !important;
}
body.v2-boardhome .v2-cal-nav-buttons button:hover { background: var(--tt-acc-soft) !important; border-color: #005480 !important; color: #005480 !important; }
body.v2-boardhome .v2-cal-nav-buttons button:hover svg { stroke: #005480 !important; }
body.v2-boardhome .v2-header-right .v2-header-sync,
body.v2-boardhome .v2-header-right .v2-signout-btn,
body.v2-boardhome #welcome-banner button {
  border-color: var(--tt-acc) !important;
  color: var(--tt-acc) !important;
  background: #ffffff !important;
}
body.v2-boardhome .v2-header-right .v2-header-sync:hover,
body.v2-boardhome .v2-header-right .v2-signout-btn:hover,
body.v2-boardhome #welcome-banner button:hover { background: var(--tt-acc-soft) !important; border-color: #005480 !important; color: #005480 !important; }
body.v2-boardhome .v2-cal-nav-buttons svg { stroke: var(--tt-acc) !important; }
body.v2-boardhome .v2-cal-nav-buttons .fg-nav-btn { color: var(--tt-acc) !important; }

/* --------------------------------------------------------------------------
   Communications calendar, five rolling weeks (2026-10-27). Structure only:
   the approved neutral family and single accent are unchanged. Weekdays are
   wide because the plan never sends on a weekend; each day reads as program
   lines, and color marks state (late = accent, sent = quiet).
   -------------------------------------------------------------------------- */
body.v2-boardhome .v2-comms-toolbar--compact { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; }
body.v2-boardhome .v2-cweeks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 6px 0 12px; }
body.v2-boardhome .v2-cweeks-head .v2-cal-nav-title { margin: 0 !important; font-size: 22px !important; letter-spacing: 0 !important; text-transform: none !important; }
body.v2-boardhome .v2-cweeks-grid {
  display: grid;
  grid-template-columns: minmax(44px, .42fr) repeat(5, minmax(0, 1fr)) minmax(44px, .42fr);
  border-top: 2px solid var(--tt-rule-hard);
}
body.v2-boardhome .v2-cweeks-dow { padding: 8px 10px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--tt-ink-60); border-bottom: 1px solid var(--tt-rule); }
body.v2-boardhome .v2-cweeks-day {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px;
  min-height: 112px; padding: 8px 10px 10px; cursor: pointer;
  border-bottom: 1px solid var(--tt-rule); border-right: 1px solid var(--tt-rule);
  background: var(--tt-paper);
}
body.v2-boardhome .v2-cweeks-day:hover { background: var(--tt-sunken); }
body.v2-boardhome .v2-cweeks-day:focus-visible { outline: 2px solid var(--tt-acc); outline-offset: -2px; }
body.v2-boardhome .v2-cweeks-day.is-weekend { background: var(--tt-sunken); min-height: 0; }
body.v2-boardhome .v2-cweeks-day.is-past { opacity: .55; }
body.v2-boardhome .v2-cweeks-num { font-size: 12px; font-weight: 600; color: var(--tt-ink-60); font-variant-numeric: tabular-nums; }
body.v2-boardhome .v2-cweeks-day.is-today { box-shadow: inset 0 3px 0 var(--tt-acc); }
body.v2-boardhome .v2-cweeks-day.is-today .v2-cweeks-num { color: var(--tt-acc); }
body.v2-boardhome .v2-cweeks-prog { display: flex; flex-direction: column; gap: 1px; padding-left: 8px; border-left: 2px solid var(--tt-ink); }
body.v2-boardhome .v2-cweeks-prog-name {
  font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--tt-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.v2-boardhome .v2-cweeks-prog-what { font-size: 11.5px; line-height: 1.3; color: var(--tt-ink-60); }
body.v2-boardhome .v2-cweeks-prog.is-late { border-left-color: var(--tt-acc); }
body.v2-boardhome .v2-cweeks-prog.is-late .v2-cweeks-prog-what { color: var(--tt-acc); font-weight: 600; }
body.v2-boardhome .v2-cweeks-prog.is-sent { border-left-color: var(--tt-ink-20); }
body.v2-boardhome .v2-cweeks-prog.is-sent .v2-cweeks-prog-name { color: var(--tt-ink-60); font-weight: 500; }
body.v2-boardhome .v2-cweeks-more { font-size: 11.5px; font-weight: 600; color: var(--tt-acc); }
body.v2-boardhome .v2-cweeks-general {
  margin-top: auto; font-size: 11.5px; line-height: 1.3; color: var(--tt-ink-60);
  padding-top: 6px; border-top: 1px dotted var(--tt-rule);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The list under the calendar (2026-10-27): by day, then by program, plain lines. */
body.v2-boardhome .v2-cagenda { margin-top: 36px; }
body.v2-boardhome .v2-cagenda-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--tt-rule-hard); }
body.v2-boardhome .v2-cagenda-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--tt-ink); }
body.v2-boardhome .v2-cagenda-title span { font-weight: 400; color: var(--tt-ink-60); margin-left: 6px; }
body.v2-boardhome .v2-cagenda-empty { color: var(--tt-ink-60); font-size: 14px; padding: 16px 0; }
body.v2-boardhome .v2-cagenda-day { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--tt-rule); }
body.v2-boardhome .v2-cagenda-date { font-size: 13px; font-weight: 600; color: var(--tt-ink-80); font-variant-numeric: tabular-nums; padding-top: 1px; }
body.v2-boardhome .v2-cagenda-progs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 24px; }
body.v2-boardhome .v2-cagenda-prog { padding-left: 10px; border-left: 2px solid var(--tt-ink); }
body.v2-boardhome .v2-cagenda-prog.is-general { border-left-color: var(--tt-ink-20); }
body.v2-boardhome .v2-cagenda-prog-name { font-size: 14px; font-weight: 600; color: var(--tt-ink); margin-bottom: 4px; }
body.v2-boardhome .v2-cagenda-prog.is-general .v2-cagenda-prog-name { color: var(--tt-ink-60); font-weight: 500; }
body.v2-boardhome .v2-cagenda-item {
  all: unset; box-sizing: border-box; display: flex; justify-content: space-between; gap: 12px; width: 100%;
  font-size: 13px; line-height: 1.35; padding: 2px 0; color: var(--tt-ink-80);
}
body.v2-boardhome button.v2-cagenda-item { cursor: pointer; }
body.v2-boardhome button.v2-cagenda-item:hover .v2-cagenda-what { text-decoration: underline; }
body.v2-boardhome button.v2-cagenda-item:focus-visible { outline: 2px solid var(--tt-acc); outline-offset: 2px; }
body.v2-boardhome .v2-cagenda-meta { flex: none; font-size: 12px; color: var(--tt-ink-60); white-space: nowrap; }
body.v2-boardhome .v2-cagenda-item.is-late .v2-cagenda-meta { color: var(--tt-acc); font-weight: 600; }
body.v2-boardhome .v2-cagenda-item.is-sent { color: var(--tt-ink-40); }
@media (max-width: 640px) {
  body.v2-boardhome .v2-cagenda-day { grid-template-columns: 1fr; gap: 8px; }
  body.v2-boardhome .v2-cagenda-progs { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   One control system (2026-10-27, Guy: "look at the buttons, the search bar,
   the whole finish of the pages"). Every button, search field, select and
   segmented switch shares one height (36px, 44px on a phone), one 4px corner,
   one border weight, sentence-case 13px labels and the single accent. Buttons
   keep their color (Guy, 2026-09-25) through a soft accent outline. Filter
   labels move to screen readers: each control already names itself.
   -------------------------------------------------------------------------- */
body.v2-boardhome { --tt-acc-line: #99bfd7; --tt-ctl-h: 36px; --tt-ctl-r: 4px; }

/* Buttons */
body.v2-boardhome .ds-btn,
body.v2-boardhome .ds-btn.ds-btn-sm,
body.v2-boardhome .v2-header-right .v2-header-sync,
body.v2-boardhome .v2-header-right .v2-signout-btn,
body.v2-boardhome #welcome-banner button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: var(--tt-ctl-h) !important;
  min-height: var(--tt-ctl-h) !important;
  padding: 0 14px !important;
  border-radius: var(--tt-ctl-r) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body.v2-boardhome .ds-btn-secondary,
body.v2-boardhome .v2-header-right .v2-header-sync,
body.v2-boardhome .v2-header-right .v2-signout-btn,
body.v2-boardhome #welcome-banner button {
  background: #ffffff !important;
  border: 1px solid var(--tt-acc-line) !important;
  color: var(--tt-acc) !important;
}
body.v2-boardhome .ds-btn-secondary:hover,
body.v2-boardhome .v2-header-right .v2-header-sync:hover,
body.v2-boardhome .v2-header-right .v2-signout-btn:hover,
body.v2-boardhome #welcome-banner button:hover { background: var(--tt-acc-soft) !important; border-color: var(--tt-acc) !important; color: #005480 !important; }
body.v2-boardhome .ds-btn-ghost { padding: 0 10px !important; }

/* The settings gear: the same outline and height, square. */
body.v2-boardhome .v2-header-right .v2-header-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--tt-ctl-h) !important;
  height: var(--tt-ctl-h) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: var(--tt-ctl-r) !important;
  border: 1px solid var(--tt-acc-line) !important;
  background: #ffffff !important;
}
body.v2-boardhome .v2-header-right .v2-header-icon-btn svg { width: 18px !important; height: 18px !important; color: var(--tt-acc) !important; }
body.v2-boardhome .v2-header-right .v2-header-icon-btn:hover { background: var(--tt-acc-soft) !important; border-color: var(--tt-acc) !important; }
body.v2-boardhome .v2-header-right { gap: 12px !important; align-items: center !important; }

/* Previous / This week / Next: one joined group in the button style. */
body.v2-boardhome .v2-cal-nav-buttons { display: inline-flex !important; gap: 0 !important; }
body.v2-boardhome .v2-cal-nav-buttons button,
body.v2-boardhome .v2-cal-nav-buttons button.ds-btn-primary,
body.v2-boardhome .v2-cal-nav-buttons button.ds-btn-ghost {
  height: var(--tt-ctl-h) !important;
  min-height: var(--tt-ctl-h) !important;
  min-width: var(--tt-ctl-h) !important;
  padding: 0 12px !important;
  margin-left: -1px !important;
  border: 1px solid var(--tt-acc-line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--tt-acc) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.v2-boardhome .v2-cal-nav-buttons button:first-child { margin-left: 0 !important; border-radius: var(--tt-ctl-r) 0 0 var(--tt-ctl-r) !important; }
body.v2-boardhome .v2-cal-nav-buttons button:last-child { border-radius: 0 var(--tt-ctl-r) var(--tt-ctl-r) 0 !important; }
body.v2-boardhome .v2-cal-nav-buttons button:hover { position: relative; z-index: 1; background: var(--tt-acc-soft) !important; border-color: var(--tt-acc) !important; }
body.v2-boardhome .v2-cal-nav-buttons svg { width: 16px !important; height: 16px !important; stroke-width: 2 !important; }

/* Segmented switches (Today / This week / This month, Month / Quarter / Rest of Year). */
body.v2-boardhome .v2-cal-list-range-toggle,
body.v2-boardhome .v2-chan-filter {
  display: inline-flex !important;
  gap: 0 !important;
  border: 1px solid var(--tt-ink-20) !important;
  border-radius: var(--tt-ctl-r) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
body.v2-boardhome .v2-cal-list-range-toggle[hidden] { display: none !important; }
body.v2-boardhome .v2-toggle-btn,
body.v2-boardhome .v2-chan-chip {
  height: calc(var(--tt-ctl-h) - 2px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-right: 1px solid var(--tt-ink-20) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tt-ink-60) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
}
body.v2-boardhome .v2-toggle-btn:last-child,
body.v2-boardhome .v2-chan-chip:last-child { border-right: 0 !important; }
body.v2-boardhome .v2-toggle-btn:hover,
body.v2-boardhome .v2-chan-chip:hover { background: var(--tt-sunken) !important; color: var(--tt-ink) !important; }
body.v2-boardhome .v2-toggle-btn.active,
body.v2-boardhome .v2-chan-chip.active { background: var(--tt-acc-soft) !important; color: var(--tt-acc) !important; font-weight: 600 !important; }

/* Search fields and selects */
body.v2-boardhome .v2-search-input,
body.v2-boardhome .mp-search input,
body.v2-boardhome .v2-filter-select,
body.v2-boardhome .v2-cat-select {
  box-sizing: border-box !important;
  height: var(--tt-ctl-h) !important;
  min-height: var(--tt-ctl-h) !important;
  border: 1px solid var(--tt-ink-20) !important;
  border-radius: var(--tt-ctl-r) !important;
  color: var(--tt-ink) !important;
  font-size: 13px !important;
  line-height: normal !important;
  box-shadow: none !important;
  outline: none !important;
}
body.v2-boardhome .v2-search-input,
body.v2-boardhome .mp-search input {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0 12px 0 34px !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23646b73' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.75'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E") no-repeat 11px center / 15px 15px !important;
}
body.v2-boardhome .v2-filter-select,
body.v2-boardhome .v2-cat-select {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0 32px 0 12px !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23646b73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 11px center / 12px 12px !important;
  cursor: pointer;
}
body.v2-boardhome .v2-search-input::placeholder,
body.v2-boardhome .mp-search input::placeholder { color: var(--tt-ink-40) !important; opacity: 1 !important; }
body.v2-boardhome .v2-search-input:hover,
body.v2-boardhome .mp-search input:hover,
body.v2-boardhome .v2-filter-select:hover,
body.v2-boardhome .v2-cat-select:hover { border-color: var(--tt-ink-40) !important; }
body.v2-boardhome .v2-search-input:focus,
body.v2-boardhome .mp-search input:focus,
body.v2-boardhome .v2-filter-select:focus,
body.v2-boardhome .v2-cat-select:focus { border-color: var(--tt-acc) !important; box-shadow: 0 0 0 3px rgba(0, 96, 156, .16) !important; }

/* Filter labels: kept for screen readers, removed from view. */
body.v2-boardhome .mp-search-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* Filter rows: one line, aligned on the control height. */
body.v2-boardhome .v2-board-tools { align-items: center !important; }
body.v2-boardhome .v2-board-category,
body.v2-boardhome .v2-board-search { gap: 0 !important; }
body.v2-boardhome .v2-board-category { flex: 0 1 220px !important; min-width: 170px !important; }
body.v2-boardhome .v2-board-tier { flex: 0 1 150px !important; min-width: 130px !important; }
body.v2-boardhome .v2-comms-toolbar--compact { gap: 10px !important; margin-bottom: 18px !important; }
body.v2-boardhome .v2-comms-toolbar--compact .v2-board-search { flex: 0 1 300px !important; max-width: 300px !important; }
body.v2-boardhome .v2-comms-toolbar--compact .v2-search-input { width: 100% !important; }
body.v2-boardhome .v2-comms-toolbar--compact .v2-filter-select { flex: 0 0 auto; }
body.v2-boardhome .mp-plan-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 4px; }
body.v2-boardhome .mp-plan-filters .mp-search { flex: 1 1 260px; max-width: 380px; margin: 0 !important; }
body.v2-boardhome .mp-plan-filters .mp-search input { width: 100% !important; }
body.v2-boardhome .mp-plan-filters .mp-plan-filter { flex: 0 1 240px; width: auto !important; margin: 0 !important; }

/* Text actions and links: the accent, sentence case. */
body.v2-boardhome .v2-comms-social-link { color: var(--tt-acc) !important; font-size: 13px !important; font-weight: 500 !important; }
body.v2-boardhome .v2-crosslink--inline { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
body.v2-boardhome .v2-board-pasttoggle { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tt-acc) !important; border-bottom: 0 !important; }
body.v2-boardhome .v2-board-pasttoggle:hover { text-decoration: underline !important; }

@media (max-width: 600px) {
  body.v2-boardhome { --tt-ctl-h: 44px; }
  body.v2-boardhome .v2-comms-toolbar--compact .v2-board-search,
  body.v2-boardhome .mp-plan-filters .mp-search { flex: 1 1 100% !important; max-width: none !important; }
  body.v2-boardhome .v2-comms-toolbar--compact .v2-filter-select,
  body.v2-boardhome .mp-plan-filters .mp-plan-filter { flex: 1 1 140px !important; }
}

/* A control the app hides (hidden attribute or inline display:none, for
   example Sync and "Find a program") stays hidden under the rules above. */
body.v2-boardhome .ds-btn[hidden],
body.v2-boardhome .ds-btn[style*="display:none"],
body.v2-boardhome .ds-btn[style*="display: none"],
body.v2-boardhome .v2-header-right button[hidden],
body.v2-boardhome .v2-header-right button[style*="display:none"],
body.v2-boardhome .v2-header-right button[style*="display: none"],
body.v2-boardhome #welcome-banner button[hidden] { display: none !important; }

/* Communications toolbar: search and filters start left, links end right, one row. */
body.v2-boardhome .v2-comms-toolbar--compact .v2-board-search { flex: 1 1 200px !important; max-width: 300px !important; margin: 0 !important; }
body.v2-boardhome .v2-comms-toolbar--compact .v2-filter-select { max-width: 190px !important; }
body.v2-boardhome .v2-comms-toolbar--compact .v2-comms-toolbar-right { margin-left: auto !important; gap: 14px !important; }
body.v2-boardhome .v2-cal-list-range-toggle { padding: 0 !important; align-items: stretch !important; }
@media (max-width: 600px) {
  body.v2-boardhome .v2-comms-toolbar--compact .v2-board-search { flex: 1 1 100% !important; max-width: none !important; }
  body.v2-boardhome .v2-comms-toolbar--compact .v2-filter-select { flex: 1 1 140px !important; max-width: none !important; }
  body.v2-boardhome .v2-board-category,
  body.v2-boardhome .v2-board-tier { flex: 1 1 140px !important; min-width: 0 !important; max-width: none !important; }
  body.v2-boardhome .v2-board-controls .v2-board-search { flex: 1 1 100% !important; max-width: none !important; }
}
body.v2-boardhome .v2-comms-toolbar .v2-filter-select { font-size: 13px !important; padding: 0 32px 0 12px !important; }

/* Leftover colors from the retired Cobalt + Berry and teal looks (pink notice,
   cobalt links, teal labels), moved onto the approved neutrals and accent. */
body.v2-boardhome .mp-plan-empty { background: var(--tt-sunken) !important; border-left-color: var(--tt-acc) !important; }
body.v2-boardhome .mp-plan-empty span,
body.v2-boardhome .mp-plan-footer span,
body.v2-boardhome .mp-plan-summary span,
body.v2-boardhome .mp-support-promise span,
body.v2-boardhome .mp-field-help { color: var(--tt-ink-60) !important; }
body.v2-boardhome .mp-plan-footer a,
body.v2-boardhome .mp-support-promise small { color: var(--tt-acc) !important; }
body.v2-boardhome .v2-size-guide summary,
body.v2-boardhome .v2-size-guide-body p,
body.v2-boardhome .v2-reference-table caption,
body.v2-boardhome .v2-plan-val { color: var(--tt-ink) !important; }
body.v2-boardhome .v2-reference-table th,
body.v2-boardhome .v2-plan-label,
body.v2-boardhome .v2-drawer-section-head,
body.v2-boardhome .fg-event-cat { color: var(--tt-ink-60) !important; }
body.v2-boardhome .v2-reference-table td { color: var(--tt-ink-80) !important; }
body.v2-boardhome .v2-reference-table thead th { background: var(--tt-sunken) !important; }
body.v2-boardhome .v2-legend-tiers-link { letter-spacing: 0 !important; text-transform: none !important; font-size: 13px !important; color: var(--tt-acc) !important; }