/* Shared product components. Colors live exclusively in design-tokens.css. */
/* Navigation occupies its own row; page spacing never depends on its height. */
.dc-app-shell { height: 100%; display: flex; flex-direction: column; position: relative; padding-top: 64px; box-sizing: border-box; background: var(--dc-color-page); }
.dc-page-scroll { flex: 1; min-height: 0; overflow: auto; padding-bottom: calc(var(--dc-space-6) + var(--dc-safe-bottom)); box-sizing: border-box; scrollbar-width: none; scroll-padding-block: var(--dc-space-3) var(--dc-space-6); }
.dc-page-scroll::-webkit-scrollbar { display: none; }
.dc-app-shell:has(.dc-tab-bar) .dc-page-scroll { padding-bottom: var(--dc-space-6); }
/* The conversation already owns its scroll area and composer spacing. */
.dc-app-shell .dc-page-scroll.coach-page-scroll { padding-bottom: 0!important; }
.dc-tab-bar { flex-shrink: 0; display: flex; position: relative; z-index: 50; padding: var(--dc-space-2) var(--dc-space-2) var(--dc-safe-bottom); box-sizing: border-box; border-top: 1px solid var(--dc-color-border); background: var(--dc-color-page-glass); backdrop-filter: blur(16px); }
.dc-tab-button { flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--dc-space-1); padding: 6px 0; box-sizing: border-box; border: 0; border-radius: var(--dc-radius-control); background: transparent; font: inherit; font-size: var(--dc-font-caption); font-weight: 600; line-height: 1.2; cursor: pointer; }
.dc-tab-button:focus-visible { outline: 2px solid var(--dc-color-brand); outline-offset: -2px; }
.dc-page { padding: 0 var(--dc-space-5); font-family: var(--dc-font-family); color: var(--dc-color-ink); font-variant-numeric: tabular-nums; }
.dc-page * { box-sizing: border-box; }
.dc-page h1, .dc-page h2, .dc-page h3, .dc-page p { margin: 0; }
.dc-page button, .dc-page input { font: inherit; }
.dc-page button { cursor: pointer; }
.dc-page button:disabled { opacity: .35; cursor: default; }
.dc-page button:focus-visible, .dc-page input:focus-visible, .dc-link:focus-visible { outline: 2px solid var(--dc-color-brand); outline-offset: 3px; }
.dc-page-header { display: flex; align-items: center; gap: var(--dc-space-2); padding-bottom: var(--dc-space-4); background: var(--dc-color-page); }
.dc-page-header h1 { font-size: var(--dc-font-title); font-weight: 700; line-height: 1.35; }
.dc-page-header p { font-size: var(--dc-font-caption); color: var(--dc-color-text-secondary); margin-top: var(--dc-space-1); }
.dc-back { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: var(--dc-radius-pill); background: var(--dc-color-surface); color: var(--dc-color-ink); }
.dc-card { background: var(--dc-color-surface); border: 1px solid var(--dc-color-border); border-radius: var(--dc-radius-card); padding: var(--dc-space-4); }
.dc-card-feature { border-radius: var(--dc-radius-feature); padding: var(--dc-space-5); }
.dc-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-space-2); min-height: 44px; border: 0; border-radius: var(--dc-radius-control); padding: 10px 16px; font-size: var(--dc-font-body); font-weight: 600; background: var(--dc-color-ink); color: var(--dc-color-inverse); text-decoration: none; cursor: pointer; }
.dc-button-secondary { background: var(--dc-color-subtle); color: var(--dc-color-ink); }
.dc-button-brand { background: var(--dc-color-brand-soft); color: var(--dc-color-brand-strong); }
.dc-button:disabled { opacity: .35; cursor: default; }
.dc-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid transparent; border-radius: var(--dc-radius-pill); padding: 3px 8px; color: var(--dc-color-text-secondary); background: var(--dc-color-subtle); font-size: var(--dc-font-caption); font-weight: 600; white-space: nowrap; line-height: 1.5; }
.dc-badge-real { color: var(--dc-color-brand-strong); background: var(--dc-color-brand-soft); }
.dc-badge-real::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--dc-color-brand); }
.dc-badge-estimate { color: var(--dc-color-text-secondary); background: var(--dc-color-surface); border: 1px dashed var(--dc-color-text-muted); }
.dc-badge-estimate::before { content: '≈'; font-weight: 700; font-size: 13px; }
.dc-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 24px 0 12px; }
.dc-section-heading h2 { font-size: var(--dc-font-section); font-weight: 700; }
.dc-section-heading span { font-size: var(--dc-font-caption); color: var(--dc-color-text-secondary); }
.dc-link { color: var(--dc-color-brand-strong); font-weight: 600; text-decoration: none; }
.dc-segments { display: flex; padding: 4px; gap: 4px; background: var(--dc-color-track); border-radius: var(--dc-radius-control); }
.dc-segments button { flex: 1; min-height: 36px; border: 0; border-radius: 9px; color: var(--dc-color-text-secondary); background: transparent; font-size: 13px; font-weight: 600; }
.dc-segments button[aria-pressed=true] { background: var(--dc-color-surface); box-shadow: var(--dc-shadow-control); color: var(--dc-color-ink); }

/* Menu icons and disclosure labels are shared by every account state. */
.dc-menu-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; color: var(--dc-color-text-secondary); }
.dc-menu-icon>svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dc-disclosure-label { flex-shrink: 0; white-space: nowrap; color: var(--dc-color-text-secondary); font-size: 11px; font-weight: 400; }
.dc-when-open { display: none; }
details[open]>summary .dc-when-closed { display: none; }
details[open]>summary .dc-when-open { display: inline; }