/* Reusable Focus View — Home stays glanceable; dense detail opens here. */
.cc-focus-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vh, 44px) clamp(12px, 4vw, 56px);
  background: rgba(4, 6, 10, .76);
  backdrop-filter: blur(5px);
  animation: ccFocusFade .18s ease-out;
}

.cc-focus-view {
  width: min(920px, 100%);
  max-height: min(900px, 92vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background:
    radial-gradient(680px 260px at 82% -8%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 65%),
    var(--surface);
  border: 1px solid var(--hair-strong);
  border-radius: 18px;
  box-shadow: 0 36px 110px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .055);
}

.cc-focus-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px 22px;
  border-bottom: 1px solid var(--hair);
}

.cc-focus-heading { min-width: 0; }
.cc-focus-eyebrow {
  margin-bottom: 7px;
  color: var(--accent);
  font: 700 11px/1.3 var(--ff-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.cc-focus-title {
  margin: 0;
  color: var(--text);
  font: 700 clamp(25px, 3vw, 34px)/1.18 var(--ff-display);
  letter-spacing: -.025em;
}
.cc-focus-subtitle {
  max-width: 720px;
  margin: 9px 0 0;
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1.55;
}
.cc-focus-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--hair-strong);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text-mute);
  cursor: pointer;
  font: 600 12px var(--ff-ui);
}
.cc-focus-close:hover { color: var(--text); border-color: var(--accent-line); }
.cc-focus-close:focus-visible,
.cc-focus-view button:focus-visible,
.cc-focus-view a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cc-focus-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 30px 30px;
  scrollbar-width: thin;
}
.cc-focus-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 30px;
  border-top: 1px solid var(--hair);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}
.cc-focus-footer-note { color: var(--text-mute); font-size: 13px; line-height: 1.45; }

/* Card triggers: clickable without contributing a single pixel to card height. */
button.op-sleep-insight {
  position: relative;
  width: 100%;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
button.op-sleep-insight:hover { border-color: color-mix(in srgb, var(--money) 62%, var(--accent)); }
button.op-sleep-insight:focus-visible,
.cash-focus-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-magnify-hint {
  margin-left: auto;
  color: var(--text-faint);
  font: 700 10px/1 var(--ff-mono);
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .15s ease, opacity .15s ease;
}
button.op-sleep-insight .cc-magnify-hint {
  position: absolute;
  top: 7px;
  right: 8px;
  opacity: .7;
}
button.op-sleep-insight:hover .cc-magnify-hint,
.cash-focus-trigger:hover .cc-magnify-hint { color: var(--accent); opacity: 1; }

.cash-up-head.cash-focus-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-faint, var(--text-mute));
  cursor: zoom-in;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

/* Sleep focus content. */
.sleep-focus-lead {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: stretch;
}
.sleep-focus-metric,
.sleep-focus-explain,
.cash-focus-context,
.cash-focus-list {
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}
.sleep-focus-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  border-color: color-mix(in srgb, var(--money) 36%, var(--hair));
  background: linear-gradient(145deg, color-mix(in srgb, var(--money) 12%, var(--surface-2)), color-mix(in srgb, #745ced 9%, var(--surface-2)));
}
.sleep-focus-metric strong { color: var(--money); font: 800 clamp(40px, 6vw, 60px)/1 var(--ff-display); letter-spacing: -.045em; }
.sleep-focus-metric span { margin-top: 8px; color: var(--text-mute); font-size: 14px; line-height: 1.4; }
.sleep-focus-explain { padding: 24px; }
.sleep-focus-explain h3,
.sleep-focus-evidence h3,
.cash-focus-section-title { margin: 0 0 10px; color: var(--text); font: 650 17px/1.35 var(--ff-ui); }
.sleep-focus-explain p { margin: 0; color: var(--text-2); font-size: 17px; line-height: 1.62; }
.sleep-focus-evidence { margin-top: 24px; }
.sleep-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sleep-evidence-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 20px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--surface-2);
}
.sleep-evidence-cell span { color: var(--text-mute); font: 700 11px/1.35 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; }
.sleep-evidence-cell strong { color: var(--text); font: 750 27px/1.2 var(--ff-display); }
.sleep-evidence-cell small { color: var(--text-mute); font-size: 13px; }
.sleep-focus-caution {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--warn);
  border-radius: 0 9px 9px 0;
  background: var(--warn-soft);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

/* Upcoming bills focus content. */
.cash-focus-list { overflow: hidden; }
.cash-focus-list-head,
.cash-focus-bill {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.cash-focus-list-head {
  padding: 11px 18px;
  color: var(--text-faint);
  background: color-mix(in srgb, var(--surface-3) 65%, transparent);
  font: 700 10px/1.3 var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cash-focus-list-head span:last-child { text-align: right; }
.cash-focus-bill { min-height: 62px; padding: 12px 18px; border-top: 1px solid var(--hair); }
.cash-focus-bill-date { color: var(--text-mute); font-size: 14px; white-space: nowrap; }
.cash-focus-bill-name { min-width: 0; color: var(--text); font-size: 16px; font-weight: 620; }
.cash-focus-bill-name small { display: block; margin-top: 3px; color: var(--text-faint); font-size: 11px; font-weight: 500; text-transform: capitalize; }
.cash-focus-bill-amount { color: var(--text); font: 750 17px/1.3 var(--ff-mono); text-align: right; white-space: nowrap; }
.cash-focus-bill.is-overdue .cash-focus-bill-date { color: var(--warn); font-weight: 700; }
.cash-focus-empty { padding: 30px; color: var(--text-mute); font-size: 16px; text-align: center; }
.cash-focus-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 18px;
  padding: 16px 18px;
  border-top: 1px solid var(--hair-strong);
  background: color-mix(in srgb, var(--surface-3) 55%, transparent);
}
.cash-focus-total span { color: var(--text-mute); font-size: 13px; }
.cash-focus-total strong { color: var(--text); font: 800 22px var(--ff-mono); }
.cash-focus-context { margin-top: 22px; padding: 20px; }
.cash-focus-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cash-focus-stat { min-width: 0; padding: 15px 16px; border: 1px solid var(--hair); border-radius: 11px; background: var(--surface); }
.cash-focus-stat span { display: block; color: var(--text-faint); font: 700 10px/1.35 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; }
.cash-focus-stat strong { display: block; margin-top: 6px; color: var(--text); font: 750 clamp(20px, 3vw, 27px)/1.2 var(--ff-display); white-space: nowrap; }
.cash-focus-stat.is-low strong { color: var(--warn); }
.cash-focus-runway {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1.45;
}
.cash-focus-runway b { color: var(--text); }

@keyframes ccFocusFade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 700px) {
  .cc-focus-backdrop { align-items: end; padding: 8px; }
  .cc-focus-view { max-height: 94vh; border-radius: 16px; }
  .cc-focus-head { padding: 21px 19px 17px; }
  .cc-focus-body { padding: 20px 19px 24px; }
  .cc-focus-footer { align-items: stretch; flex-direction: column; padding: 15px 19px; }
  .cc-focus-close span { display: none; }
  .sleep-focus-lead { grid-template-columns: 1fr; gap: 12px; }
  .sleep-evidence-grid { grid-template-columns: 1fr; }
  .cash-focus-list-head { display: none; }
  .cash-focus-bill { grid-template-columns: 94px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .cash-focus-bill-date { font-size: 12px; }
  .cash-focus-bill-name { font-size: 14px; }
  .cash-focus-bill-amount { font-size: 14px; }
  .cash-focus-metrics { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-focus-backdrop { animation: none; backdrop-filter: none; }
}