/* Regular serif text and Capacity's approved gold control treatment. */
@font-face {
  font-family: "Pondera App Serif";
  src: url("../living/fonts/EBGaramond-normal-400_800.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Pondera App Serif";
  src: url("../living/fonts/EBGaramond-italic-400_800.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
}
/* Canvas font strings use an unquoted single-word alias of the same face. */
@font-face {
  font-family: PonderaAppSerif;
  src: url("../living/fonts/EBGaramond-normal-400_800.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
:root, :host {
  font-synthesis: none;
  --control-ink: #153650;
  --control-gold: linear-gradient(110deg,#d9bd85,#f1e3be,#d9bd85);
  --control-gold-soft: linear-gradient(110deg,rgba(217,189,133,.16),rgba(241,227,190,.34),rgba(217,189,133,.16));
  --control-gold-hairline: inset 0 0 0 1px rgba(185,140,73,.34);
  --control-border: #b98c49;
}
body { font-family: "Pondera App Serif",Georgia,serif; }
/* Retain semantic emphasis without the browser's default bold rendering. */
:where(h1,h2,h3,h4,h5,h6,b,strong,th) { font-weight:400; }
button,input,select,textarea,summary { font-family:inherit; }
svg text { font-family:inherit; }
/* Gold hover does not replace the selected marker or keyboard focus ring. */
:is(button,.btn,[role="button"]):not(:disabled,[aria-disabled="true"],.btn-danger,.danger,.nav-item,.course-target,.living-session-replay,.living-session-pause,:is(.cap-team,.br-team,.dp-team-work)[aria-pressed="true"]):hover {
  background:var(--control-gold);
  border-color:var(--control-border);
  color:var(--control-ink);
}
:is(button,.btn,[role="button"],a,input,select,textarea,summary):focus-visible {
  outline:2px solid #153650;
  outline-offset:3px;
}
/* Drawer reading roles set text color with !important. Override that role at
   the control boundary so foreground and gold background cannot disagree. */
#sl-panel#sl-panel .content :is(button,.chip):not(:disabled,[aria-disabled="true"],.cap-team,.br-team,.dp-team-work,.dp-team-row):hover,
#sl-panel#sl-panel .content .chip[aria-pressed="true"] {
  --sl-role-color:var(--control-ink);
  background:var(--control-gold);
  border-color:var(--control-border);
  color:var(--control-ink)!important;
}
#sl-panel#sl-panel .content :is(button,.chip)[aria-pressed="true"] {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
#sl-panel#sl-panel .content .chip[aria-pressed="true"] {
  box-shadow:inset 0 1px 7px #b78a4940;
}
#sl-panel#sl-panel .content :is(button,.chip):focus-visible {
  outline:2px solid #153650;
  outline-offset:3px;
}

/* Drawer list rows take a soft gold wash with a hairline instead of the control gradient.
   Christopher, 2026-09-17, choosing between three treatments: "wife likes number 2 - we can
   apply to all areas with gold bars", and list rows in every view when asked how wide to go.
   Buttons, chips, pressed markers and focus rings are unchanged. */
#sl-panel#sl-panel .content :is(.cap-team,.br-team,.dp-team-work,.dp-team-row,.course-option summary) {
  border-radius:3px;
  transition:background-color .2s ease,box-shadow .2s ease;
}
@media (hover:hover) {
  #sl-panel#sl-panel .content :is(.cap-team,.br-team,.dp-team-work,.dp-team-row,.course-option summary):not(:disabled,[aria-disabled="true"],[aria-pressed="true"]):hover {
    --sl-role-color:initial;
    background:var(--control-gold-soft);
    box-shadow:var(--control-gold-hairline);
    border-color:var(--control-border);
  }
}

/* Team tabs take the same soft wash. Christopher, asked in Living 03 on 2026-09-17 whether the
   gold block behind the team tabs should be softened like the rows, answered "yes". Selected tabs
   keep their own marker and take no fill; other chips, buttons and map pins are unchanged. */
#sl-panel#sl-panel .content :is(.capacity-inner .chip,.resilience-inner .chip,.dp-mast-teams button,.dp-modes button,.dp-weeks button) {
  transition:background-color .2s ease,box-shadow .2s ease;
}
@media (hover:hover) {
  #sl-panel#sl-panel .content :is(.capacity-inner .chip,.resilience-inner .chip,.dp-mast-teams button,.dp-modes button,.dp-weeks button):not(:disabled,[aria-disabled="true"],[aria-pressed="true"]):hover {
    --sl-role-color:initial;
    background:var(--control-gold-soft);
    box-shadow:var(--control-gold-hairline);
    border-color:var(--control-border);
    color:inherit!important;
  }
}

/* Decision Scenario's course names take the soft wash over their own card, on hover and when the
   matching landfall circle is hovered, so name and circle read as one. Christopher: "Soft gold is good". */
@media (hover:hover) {
  .course-target.course-target:is(:hover,.is-emphasized) {
    background: var(--control-gold-soft), rgba(250,239,219,.78);
    box-shadow: var(--control-gold-hairline), 0 7px 24px rgba(66,43,18,.12);
  }
}

/* A selected tab keeps its own look under the pointer, as selected rows do. */
@media (hover:hover) {
  #sl-panel#sl-panel .content :is(.capacity-inner .chip,.resilience-inner .chip,.dp-mast-teams button,.dp-modes button,.dp-weeks button)[aria-pressed="true"]:hover {
    background:none;
    box-shadow:none;
  }
}

@font-face { font-family:"Cormorant Garamond"; src:url("../living/fonts/CormorantGaramond-normal-300_600.woff2") format("woff2"); font-style:normal; font-weight:300 600; font-display:swap; }

/* One lockup for the sign-in and sign-up screens, so the two cannot drift apart.
   Values are the shipped login lockup, moved here unchanged. */
.auth-brand-slot { height:243px; display:flex; align-items:center; justify-content:center; }
.auth-brand { display:inline-flex; align-items:center; gap:10px; color:#082f48; }
.auth-brand img { display:block; width:56px; height:50px; object-fit:contain; }
.auth-brand-copy { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.auth-brand-wordmark { font:400 34px/1 "Cormorant Garamond",Georgia,serif; letter-spacing:.23em; }
.auth-brand-tagline { font:400 8px/1 "Pondera App Serif",Georgia,serif; letter-spacing:.34em; }
@media (max-width:480px) {
  .auth-brand { gap:8px; }
  .auth-brand img { width:44px; height:40px; }
  .auth-brand-copy { gap:7px; }
  .auth-brand-wordmark { font-size:24px; letter-spacing:.20em; }
  .auth-brand-tagline { font-size:6.5px; letter-spacing:.22em; }
}

/* Optical correction for small labels formerly drawn in heavier sans text.
   Keep the registered scene, values and label anchors unchanged. */
#demandStage :is(.metric,.metric-label,.metric-unit) { color:#153650; }
@media (min-width:701px) {
  #demandStage .metric[data-reading="visibility-horizon"],
  #demandStage .metric[data-reading="visibility-horizon"] :is(.metric-label,.metric-unit) { color:#fff8e8; }
  #resilienceStage .mapping-status { background:rgba(245,229,206,.94); border-radius:4px; text-shadow:none; }
  #demandStage .metric-label { font-size:14px; letter-spacing:1px; }
  #demandStage .metric-unit { font-size:12px; letter-spacing:.7px; }
  #demandStage :is(.horizon-context,.reading-label) { font-size:12px; }
  #capacityStage .state-detail { font-size:10px; letter-spacing:.3px; }
  #capacityStage :is(.today-label,.plan-label) { font-size:11px; }
  #workforceStage .dimension-label { font-size:12px; line-height:1.5; letter-spacing:.6px; }
  #workforceStage .panel-title { font-size:12px; }
  #burnoutStage .team-name { font-size:12px; letter-spacing:.6px; line-height:1.4; }
  #rangeStage :is(.scenario-label,.scenario-description,.scenario-unit,.commitment-unit,.cash-unit) { font-size:12px; }
  #rangeStage .commitment-items { font-size:12px; line-height:1.7; }
  #resilienceStage .department-name { font-size:12px; }
  #growthStage .wind-name { font-size:13px; color:#143d59; }
  #growthStage .wind-value small { font-size:11px; color:#143d59; }
  :is(#rangeStage,#resilienceStage,#growthStage) .mapping-status,
  #spendStage .proof-disclosure {
    font-size:11px; line-height:1.4; letter-spacing:.04em;
    color:#12324a; opacity:1;
  }
}
@media (max-width:700px) {
  #demandStage :is(.metric,.metric-label,.metric-unit) { color:#fff8e8; }
  #demandStage .metric-label { font-size:9px; letter-spacing:.4px; line-height:1.35; }
  #demandStage .metric-unit { font-size:9px; letter-spacing:.4px; line-height:1.35; }
}