:root {
  /* Structural palette: neutral surfaces and a deep wine identity. */
  --color-background: #f7f5f5;
  --color-background-secondary: #f0eded;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-soft: #f8f6f7;
  --color-text: #252124;
  --color-text-secondary: #686166;
  --color-border: #ded8dc;
  --color-border-strong: #b9adb4;
  --color-wine: #72243b;
  --color-wine-hover: #5e1c30;
  --color-wine-dark: #451322;
  --color-wine-soft: #f5e9ed;
  --color-focus-ring: #9d4964;
  --color-danger: #a32929;
  --color-danger-soft: #fbecec;
  --shadow-panel: 0 8px 24px rgb(49 31 40 / 7%);
  --shadow-sticky: 0 5px 16px rgb(49 31 40 / 10%);
  --shadow-calendar: 0 10px 28px rgb(49 31 40 / 9%);

  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --container-width: 1320px;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sticky-scroll-offset: 86px;

  /* Numerological palette: information only, independent from the brand. */
  --num-1: #b8322b; --num-1-soft: #fbeceb;
  --num-2: #bd5d09; --num-2-soft: #fff1e3;
  --num-3: #8b6700; --num-3-soft: #fff8dc;
  --num-4: #687716; --num-4-soft: #f2f5df;
  --num-5: #26743a; --num-5-soft: #eaf5ed;
  --num-6: #087b78; --num-6-soft: #e6f5f4;
  --num-7: #285db3; --num-7-soft: #eaf0fa;
  --num-8: #7040a1; --num-8-soft: #f0eafb;
  --num-9: #a82b91; --num-9-soft: #faeaf7;

  /* Softer chart-only palette; the numerological colors above remain canonical. */
  --chart-num-1: #d3726d;
  --chart-num-2: #d99253;
  --chart-num-3: #b49a4d;
  --chart-num-4: #97a354;
  --chart-num-5: #68a576;
  --chart-num-6: #55aaa7;
  --chart-num-7: #6c8fc9;
  --chart-num-8: #9775b9;
  --chart-num-9: #c16caf;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--color-background); }
body {
  min-height: 100%; margin: 0; color: var(--color-text);
  background: linear-gradient(180deg, var(--color-wine-soft) 0, var(--color-background) 150px);
  font-family: var(--font-body); line-height: 1.45;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; opacity: .56; }
.container { width: min(100% - 32px, var(--container-width)); margin-inline: auto; }

/* A single, consistent keyboard focus treatment for every control. */
button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-focus-ring); outline-offset: 2px;
}
.kpi-value:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.dashboard-header {
  padding: 13px 0; border-bottom: 1px solid var(--color-border);
  background: var(--color-background); color: var(--color-wine-dark);
}
.dashboard-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dashboard-header h1 { margin: 0; font-size: 1.55rem; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; }
.dashboard-header h1::before { display: inline-block; width: 4px; height: .9em; margin-right: 10px; border-radius: 2px; background: var(--color-wine); content: ""; }

.app-main { display: grid; gap: 16px; padding-block: 14px 34px; }
.dashboard-results, .map-details { display: grid; gap: 16px; }
.scroll-target { scroll-margin-top: var(--sticky-scroll-offset); }
.dashboard-results[hidden] { display: none; }
.dashboard-panel {
  padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-elevated); box-shadow: var(--shadow-panel);
}

/* Persistent person context */
.person-context {
  position: sticky; top: 8px; z-index: 15; display: grid; grid-template-columns: minmax(360px, auto) minmax(0, 1fr); align-items: center;
  gap: 12px; min-height: 50px; padding: 6px 10px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-sticky);
}
.active-person-sticky { display: contents; }
.active-person-summary, .active-person-numbers, .people-navigation { display: flex; align-items: center; gap: 10px; }
.active-person-summary { width: max-content; max-width: 100%; }
.active-person-summary, .people-navigation { min-width: 0; }
.active-person-identity { display: flex; min-width: 0; flex: 1 1 220px; flex-direction: column; align-items: flex-start; border-left: 3px solid var(--color-wine); padding-left: 9px; }
.active-person-name-row { display: flex; align-items: center; min-width: 0; gap: 4px; }
.active-person-name-row > strong { min-width: 0; }
.active-person-name-row > span { flex: 0 0 auto; }
.active-person-name-row > strong { max-width: 290px; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.active-person-identity span { color: var(--color-text-secondary); font-size: .7rem; font-weight: 650; }
.active-person-numbers { flex: 0 0 auto; flex-wrap: nowrap; gap: 5px 12px; color: var(--color-text-secondary); font-size: .7rem; white-space: nowrap; }
.active-person-numbers strong { color: var(--number-color); font-size: .9rem; }
.indicator-label-short { display: none; }
.new-person-button {
  flex: 0 0 auto; min-height: 32px; padding: 0 11px; border: 1px solid var(--color-wine);
  border-radius: 999px; background: var(--color-surface); color: var(--color-wine); font-weight: 650;
}
.new-person-button:hover { background: var(--color-wine-soft); }
.people-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.consultation-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.consultation-tab {
  display: inline-flex; align-items: center; min-height: 32px; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-soft);
  color: var(--color-text); font-size: .8rem; font-weight: 600;
}
.consultation-tab:hover { border-color: var(--color-border-strong); background: var(--color-wine-soft); }
.consultation-tab.is-active { border-color: var(--color-border-strong); background: var(--color-wine-soft); color: var(--color-wine-dark); box-shadow: inset 2px 0 var(--color-wine); font-weight: 700; }
.consultation-tab-select { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 6px 0 9px; border: 0; background: transparent; color: inherit; font-weight: inherit; }
.consultation-tab-number { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 6px; border-radius: 999px; background: var(--number-soft); color: var(--number-color); font-size: .72rem; font-weight: 750; }
.consultation-tab-remove { display: inline-grid; place-items: center; width: 25px; height: 32px; border: 0; background: transparent; color: var(--color-text-secondary); font-size: .9rem; opacity: .72; }
.consultation-tab-remove:hover { background: var(--color-danger-soft); color: var(--color-danger); opacity: 1; }
.mobile-people-navigation { display: none; }
.remove-person-dialog { width: min(100% - 32px, 430px); padding: 20px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text); box-shadow: var(--shadow-calendar); }
.remove-person-dialog::backdrop { background: rgb(37 33 36 / 45%); }
.remove-person-dialog h2 { margin: 0; font-size: 1.15rem; }
.remove-person-dialog p { margin: 10px 0 20px; color: var(--color-text-secondary); }
.remove-person-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.remove-person-dialog-actions button { min-height: 44px; padding-inline: 16px; border-radius: 999px; font-weight: 700; }
.remove-person-dialog-actions .secondary-button { border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-wine); }
.remove-person-dialog-actions .danger-button { border: 1px solid var(--color-danger); background: var(--color-danger); color: var(--color-surface); }

/* Temporary person form */
.new-person-panel { border-style: dashed; background: var(--color-surface-soft); box-shadow: none; }
.compact-form-header, .panel-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.compact-form-header h2, .panel-title-row h2, .panel-title-row h3 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.compact-form-header p, .panel-title-row p { margin: 0; color: var(--color-text-secondary); font-size: .78rem; }
.compact-person-form { display: grid; grid-template-columns: minmax(300px, 1.7fr) minmax(145px, .65fr) auto; gap: 10px; align-items: end; }
.form-field { display: grid; gap: 5px; }
.form-field label { color: var(--color-text-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.form-field input {
  width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); outline: none; background: var(--color-surface); color: var(--color-text);
}
.form-field input::placeholder { color: var(--color-text-secondary); opacity: .7; }
.form-field input:focus { border-color: var(--color-wine); }
.form-actions { display: flex; gap: 8px; }
.form-actions button { min-height: 39px; padding: 0 15px; border: 1px solid var(--color-wine); border-radius: 999px; background: var(--color-wine); color: var(--color-surface); font-weight: 700; }
.form-actions button:hover { background: var(--color-wine-hover); }
.form-actions .secondary-button { border-color: var(--color-border-strong); background: transparent; color: var(--color-wine); }
.form-actions .secondary-button:hover { background: var(--color-wine-soft); }
.form-note { margin: 9px 0 0; color: var(--color-text-secondary); font-size: .74rem; }

/* Stable map numbers, available within the technical structure. */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.kpi-card, .summary-card { display: grid; gap: 5px; min-height: 98px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.kpi-card { border-top: 2px solid var(--color-wine-soft); }
.kpi-label, .summary-card .label { margin: 0; color: var(--color-text-secondary); font-size: .65rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.kpi-value, .summary-card .value { margin: 0; color: var(--number-color, var(--color-wine)); font-size: 2rem; font-weight: 750; line-height: 1; }
.kpi-value { width: max-content; }
.kpi-formula, .kpi-reduction, .summary-card .formula { margin: 0; color: var(--color-text-secondary); font-size: .7rem; }
.calculation-disclosure summary { width: max-content; cursor: pointer; color: var(--color-wine); font-size: .7rem; font-weight: 650; }
.calculation-disclosure .kpi-formula { display: block; margin-top: 5px; }

/* Calendar: the central, strongest surface */
.personal-calendar-panel { padding: 19px; border-color: var(--color-border-strong); box-shadow: var(--shadow-calendar); }
.calendar-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.calendar-eyebrow, .section-eyebrow { margin: 0 0 2px; color: var(--color-wine); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.calendar-header h2 { margin: 0; font-size: 1.5rem; font-weight: 720; letter-spacing: -.035em; }
.calendar-context { display: flex; gap: 14px; margin-top: 5px; color: var(--color-text-secondary); font-size: .78rem; }
.calendar-context strong, .calendar-personal-day strong { color: var(--number-color, var(--color-wine)); }
.calendar-navigation { display: flex; align-items: flex-end; gap: 0; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-soft); }
.calendar-navigation button { min-height: 36px; border: 0; background: transparent; color: var(--color-wine); font-size: .76rem; font-weight: 600; }
.calendar-navigation button { min-width: 38px; padding: 6px 9px; }
.calendar-navigation button + button, .calendar-navigation button + .calendar-date-picker, .calendar-date-picker + button { border-left: 1px solid var(--color-border); }
.calendar-navigation button:hover { background: var(--color-wine-soft); }
.calendar-date-picker { display: grid; gap: 0; min-width: 140px; min-height: 36px; padding: 2px 8px; border-left: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: .57rem; font-weight: 600; }
.calendar-date-picker input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--color-wine); font: inherit; font-size: .72rem; }
.calendar-date-picker:focus-within { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }
.calendar-legend-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 11px; margin: -2px 0 9px; color: var(--color-text-secondary); font-size: .7rem; line-height: 1.4; }
.calendar-legend { display: grid; grid-template-columns: repeat(2, auto); gap: 5px 18px; font-weight: 520; }
.calendar-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.calendar-legend strong { color: var(--color-wine-dark); }
.period-icon { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; color: var(--color-wine); vertical-align: -.15em; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-weekday { padding: 5px; color: var(--color-text-secondary); font-size: .68rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.calendar-day { position: relative; display: grid; gap: 7px; min-width: 0; min-height: 104px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); text-align: left; transition: border-color 120ms, background-color 120ms; }
.calendar-day:hover { border-color: var(--color-border-strong); background: var(--color-surface-soft); }
.calendar-day.is-selected { border: 2px solid var(--color-wine); padding: 7px; background: color-mix(in srgb, var(--color-wine-soft) 55%, var(--color-surface)); box-shadow: inset 0 0 0 1px var(--color-surface); }
.calendar-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.calendar-day-heading time { font-size: 1.06rem; font-weight: 700; }
.today-label { padding: 1px 5px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); color: var(--color-wine-dark); font-size: .53rem; font-weight: 700; text-transform: uppercase; }
.calendar-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 5px; }
.calendar-period { position: relative; display: grid; place-items: center; min-height: 25px; border-radius: 4px; background: color-mix(in srgb, var(--number-soft) 38%, var(--color-surface)); color: var(--number-color); font-size: .96rem; font-weight: 750; }
.calendar-period::after { position: absolute; z-index: 30; bottom: calc(100% + 6px); left: 50%; width: max-content; max-width: 132px; padding: 6px 8px; border-radius: 5px; background: var(--color-wine-dark); box-shadow: var(--shadow-sticky); color: var(--color-surface); content: attr(data-tooltip); font-size: .66rem; font-weight: 600; line-height: 1.35; opacity: 0; pointer-events: none; text-align: left; transform: translate(-50%, 3px); transition: opacity 100ms, transform 100ms; white-space: pre-line; }
.calendar-period:hover::after { opacity: 1; transform: translate(-50%, 0); }
.calendar-day[data-tooltip-position="left"] .calendar-period::after { left: 0; transform: translate(0, 3px); }
.calendar-day[data-tooltip-position="left"] .calendar-period:hover::after { transform: translate(0, 0); }
.calendar-day[data-tooltip-position="right"] .calendar-period::after { right: 0; left: auto; transform: translate(0, 3px); }
.calendar-day[data-tooltip-position="right"] .calendar-period:hover::after { transform: translate(0, 0); }
.calendar-day[data-tooltip-vertical="below"] .calendar-period::after { top: calc(100% + 6px); bottom: auto; }
.calendar-personal-day { color: var(--color-text-secondary); font-size: .6rem; font-weight: 600; line-height: 1.15; }
.calendar-cycle-navigation, .cycle-calendar-navigation { display: none; }
.destiny-encounter { display: inline-flex; width: .72em; height: .72em; margin-left: .18em; color: var(--color-wine); vertical-align: .12em; }
.destiny-encounter-icon { display: block; width: 100%; height: 100%; fill: currentColor; }

/* Selected date: date anchor, contextual cycles, then detailed periods. */
.selected-date-panel { position: relative; border-left: 3px solid var(--color-wine); }
.selected-date-heading { margin: 4px 0 11px; color: var(--color-wine-dark); font-size: 1.35rem; font-weight: 700; }
.selected-date-grid { display: grid; gap: 9px; }
.cycles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cycles-grid .summary-card { min-height: 84px; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; }
.periods-detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.periods-detail-grid .summary-card { min-height: 112px; }
.periods-detail-grid .label { display: flex; align-items: center; gap: 4px; letter-spacing: normal; text-transform: none; }
.periods-heading { margin: 18px 0 8px; font-size: .88rem; font-weight: 700; }

/* Secondary technical details */
.map-details { margin-top: 2px; }
.map-details-heading h2 { margin: 0; font-size: 1.05rem; font-weight: 650; }
.technical-detail { container-type: inline-size; padding: 13px 15px; background: var(--color-surface-soft); box-shadow: none; }
.technical-detail > summary { position: relative; padding-right: 24px; cursor: pointer; color: var(--color-text); font-weight: 650; list-style: none; }
.technical-detail > summary::-webkit-details-marker { display: none; }
.technical-detail > summary::after { position: absolute; top: 0; right: 2px; color: var(--color-wine); content: "+"; font-size: 1.1rem; line-height: 1; }
.technical-detail[open] > summary::after { content: "−"; }
.technical-detail[open] { border-color: var(--color-border-strong); }
.detail-description { margin: 5px 0 0; color: var(--color-text-secondary); font-size: .76rem; }
.result-block { min-height: auto; margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--color-text); }
.result-grid { display: grid; gap: 9px; }
.name-decomposition-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.name-decomposition-scroll:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.name-decomposition-vertical { display: none; }
.name-decomposition-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .82rem; text-align: center; }
.name-decomposition-table th { position: sticky; left: 0; z-index: 1; min-width: 88px; padding: 8px 9px; background: var(--color-wine-soft); color: var(--color-wine-dark); font-size: .66rem; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
.name-decomposition-table td { min-width: 34px; height: 38px; padding: 6px; border-left: 1px solid var(--color-border); font-weight: 700; }
.name-decomposition-table tr + tr { border-top: 1px solid var(--color-border); }
.name-decomposition-table .name-row td { height: 46px; background: var(--color-background-secondary); color: var(--number-color, var(--color-text)); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1; }
.name-decomposition-table .name-total { min-width: 82px; color: var(--color-wine-dark); white-space: nowrap; }
.name-decomposition-table .name-total strong { display: block; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }
.name-calculation-summary { display: grid; gap: 6px; margin: 10px 0 0; }
.name-calculation-summary div { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 7px; border-top: 1px solid var(--color-border); }
.name-calculation-summary dt { font-weight: 700; }
.name-calculation-summary dd { margin: 0; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.matrix-distribution-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); align-items: start; gap: 20px; }
.matrix-table-wrap { min-width: 0; }
.matrix-table { width: 100%; overflow: hidden; border-collapse: collapse; border-radius: var(--radius-md); font-size: .82rem; }
.matrix-table th, .matrix-table td { padding: 8px 9px; border: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.matrix-table th { background: var(--color-wine-soft); color: var(--color-wine-dark); font-size: .66rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; }
.matrix-table td { min-width: 88px; background: var(--color-surface); font-weight: 700; }
.matrix-table small { display: block; margin-top: 3px; color: var(--color-text-secondary); font-weight: 500; }
.number-distribution { min-width: 0; padding-left: 20px; border-left: 1px solid var(--color-border); container-type: inline-size; }
.number-distribution h3 { margin: 0 0 10px; font-size: .82rem; font-weight: 700; }
.number-distribution-content { display: grid; grid-template-columns: minmax(130px, 2fr) minmax(150px, 3fr); align-items: center; gap: 16px; }
.number-donut { display: block; width: min(100%, 180px); height: auto; aspect-ratio: 1; margin-inline: auto; }
.donut-track, .donut-segment { fill: none; }
.donut-track, .donut-segment { stroke-width: 7; }
.donut-track { stroke: var(--color-border); }
.donut-segment { stroke: var(--chart-number-color); filter: drop-shadow(0 0 .16px var(--color-surface)); }
.donut-segment-tooltip { display: none; pointer-events: none; }
.donut-segment-tooltip rect { fill: var(--color-wine-dark); filter: drop-shadow(0 1px 1px rgb(0 0 0 / .2)); }
.donut-segment-tooltip text { fill: var(--color-surface); font-size: 2.4px; font-weight: 600; text-anchor: middle; }
@media (hover: hover) and (pointer: fine) {
  .donut-segment-item:has(.donut-segment:hover) .donut-segment-tooltip { display: block; }
}
.number-distribution-legend { width: auto; max-width: 100%; border-collapse: collapse; font-size: .76rem; font-variant-numeric: tabular-nums; }
.number-distribution-legend th, .number-distribution-legend td { padding: 3px 6px; border-bottom: 1px solid var(--color-border); text-align: right; }
.number-distribution-legend th:first-child { text-align: left; }
.number-distribution-legend thead { color: var(--color-text-secondary); font-size: .62rem; letter-spacing: .055em; text-transform: uppercase; }
.distribution-swatch { display: inline-block; width: .72em; height: .72em; margin-right: 6px; border-radius: 50%; background: var(--chart-number-color); }

.chart-number-1 { --chart-number-color: var(--chart-num-1); }
.chart-number-2 { --chart-number-color: var(--chart-num-2); }
.chart-number-3 { --chart-number-color: var(--chart-num-3); }
.chart-number-4 { --chart-number-color: var(--chart-num-4); }
.chart-number-5 { --chart-number-color: var(--chart-num-5); }
.chart-number-6 { --chart-number-color: var(--chart-num-6); }
.chart-number-7 { --chart-number-color: var(--chart-num-7); }
.chart-number-8 { --chart-number-color: var(--chart-num-8); }
.chart-number-9 { --chart-number-color: var(--chart-num-9); }

.number-1 { --number-color: var(--num-1); --number-soft: var(--num-1-soft); }
.number-2 { --number-color: var(--num-2); --number-soft: var(--num-2-soft); }
.number-3 { --number-color: var(--num-3); --number-soft: var(--num-3-soft); }
.number-4 { --number-color: var(--num-4); --number-soft: var(--num-4-soft); }
.number-5 { --number-color: var(--num-5); --number-soft: var(--num-5-soft); }
.number-6 { --number-color: var(--num-6); --number-soft: var(--num-6-soft); }
.number-7 { --number-color: var(--num-7); --number-soft: var(--num-7-soft); }
.number-8 { --number-color: var(--num-8); --number-soft: var(--num-8-soft); }
.number-9 { --number-color: var(--num-9); --number-soft: var(--num-9-soft); }

.share-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.share-actions[hidden] { display: none; }
.share-icon-button { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 5px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--color-wine); }
.share-icon-button:hover { border-color: var(--color-border); background: var(--color-wine-soft); }
.share-icon-button svg { width: 17px; height: 17px; overflow: visible; fill: var(--color-surface); stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.share-status { margin: 0; color: var(--color-text-secondary); font-size: .7rem; }
.manual-share { flex-basis: 100%; display: grid; grid-template-columns: auto minmax(180px, 1fr); align-items: center; gap: 7px; }
.manual-share[hidden] { display: none; }
.manual-share label { color: var(--color-text-secondary); font-size: .76rem; font-weight: 650; }
.manual-share input { min-width: 0; }
.app-footer { padding: 16px 0; border-top: 1px solid var(--color-border); background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: .72rem; text-align: center; }

@media (max-width: 1180px) {
  .compact-person-form { grid-template-columns: 1fr 1fr; }
  .name-field { grid-column: 1 / -1; }
  .compact-actions { grid-column: span 2; }
  .person-context { grid-template-columns: minmax(320px, auto) minmax(0, 1fr); }
  .people-navigation { width: 100%; }
}

@media (max-width: 900px) {
  .matrix-distribution-layout { grid-template-columns: 1fr; }
  .number-distribution { padding-top: 12px; padding-left: 0; border-top: 1px solid var(--color-border); border-left: 0; }
}

@container (max-width: 360px) {
  .number-distribution-content { grid-template-columns: 1fr; }
  .number-distribution-legend { width: 100%; }
}

/* Short phone viewports need the compact experience in landscape too. */
@media (max-width: 720px) {}
@media (max-width: 720px), (orientation: landscape) and (max-width: 940px) and (max-height: 430px) {
  :root { --sticky-scroll-offset: 150px; }
  .container { width: min(100% - 20px, var(--container-width)); }
  .dashboard-header { padding-block: 11px; }
  .dashboard-header-inner { align-items: flex-start; flex-direction: column; gap: 4px; }
  .app-main { gap: 12px; padding-top: 9px; }
  .dashboard-panel { padding: 13px; }
  /* 720px is where the approved desktop tab row no longer fits without horizontal scrolling. */
  .person-context { position: static; display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, calc(100vw - 20px)); max-width: 100%; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .active-person-sticky { position: sticky; top: 0; z-index: 15; display: block; align-self: start; min-width: 0; min-height: 0; padding: 8px; border: 1px solid var(--color-border-strong); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sticky); }
  .active-person-summary { align-items: flex-start; flex-direction: column; gap: 3px; min-width: 0; }
  .active-person-identity { width: 100%; flex: 0 1 auto; }
  .active-person-name-row { width: 100%; }
  .active-person-name-row > strong { max-width: none; flex: 1 1 0; }
  .active-person-name-row > span { display: inline-flex; flex: 0 0 auto; }
  .active-person-numbers { max-width: 100%; }
  .indicator-label-full { display: none; }
  .indicator-label-short { display: inline; }
  .share-icon-button { width: 44px; height: 44px; flex: 0 0 44px; }
  .share-feedback { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  .share-actions { display: grid; }
  .share-feedback .share-icon-button { display: none; }
  .manual-share { grid-template-columns: 1fr; }
  .manual-share input { width: 100%; min-height: 44px; }
  .people-navigation { grid-template-columns: minmax(0, 1fr); align-items: stretch; width: 100%; max-width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  .desktop-people-tabs { display: none; }
  .mobile-people-navigation { display: grid; gap: 9px; width: 100%; min-width: 0; max-width: 100%; }
  .mobile-people-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; max-width: 100%; }
  .mobile-person-button, .people-secondary-button, .managed-person-remove, .new-person-button { min-height: 44px; }
  .mobile-person-button { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 44px; max-width: 100%; padding: 0 13px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-soft); color: var(--color-text); font-weight: 650; white-space: nowrap; }
  .mobile-person-number { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 24px; height: 24px; padding-inline: 6px; border-radius: 999px; background: var(--number-soft); color: var(--number-color); font-size: .75rem; font-weight: 750; }
  .mobile-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .mobile-person-button.is-active { border-color: var(--color-wine); background: var(--color-wine-soft); color: var(--color-wine-dark); }
  .mobile-people-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .people-secondary-button { padding-inline: 12px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); color: var(--color-wine); font-weight: 650; }
  .all-people-panel { display: grid; gap: 8px; padding-top: 4px; border-top: 1px solid var(--color-border); }
  .all-people-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .all-people-list { display: grid; gap: 7px; }
  .managed-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .managed-person .mobile-person-button { width: 100%; text-align: left; }
  .managed-person-remove { padding-inline: 10px; border: 1px solid var(--color-danger); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-danger); font-weight: 650; }
  .new-person-button { align-self: flex-start; padding-inline: 13px; font-size: .8rem; }
  .compact-person-form { grid-template-columns: 1fr; }
  .name-field, .compact-actions { grid-column: auto; }
  .form-actions { flex-wrap: wrap; }
  .form-actions button { min-height: 44px; flex: 1; }
  .form-field input { min-width: 0; min-height: 44px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .technical-detail > summary, .calculation-disclosure summary { display: flex; align-items: center; min-height: 44px; }
  .technical-detail > summary { margin-block: -7px; }
  .technical-detail > summary::after { top: 50%; transform: translateY(-50%); }
  .calculation-disclosure summary { width: 100%; }
  .name-decomposition-horizontal { display: none; }
  .name-decomposition-vertical { display: block; width: 100%; max-width: 100%; overflow: visible; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
  .name-decomposition-mobile-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .82rem; text-align: center; }
  .name-decomposition-mobile-table th, .name-decomposition-mobile-table td { min-width: 0; height: 38px; padding: 6px 4px; border-bottom: 1px solid var(--color-border); }
  .name-decomposition-mobile-table thead th { background: var(--color-wine-soft); color: var(--color-wine-dark); font-size: .62rem; letter-spacing: .045em; text-transform: uppercase; }
  .name-decomposition-mobile-table thead th:nth-child(1) { width: 15%; }
  .name-decomposition-mobile-table thead th:nth-child(2) { width: 22%; }
  .name-decomposition-mobile-table thead th:nth-child(3) { width: 25%; }
  .name-decomposition-mobile-table thead th:nth-child(4) { width: 38%; }
  .name-decomposition-mobile-table tbody tr:nth-child(even) { background: var(--color-background-secondary); }
  .name-decomposition-mobile-table tbody tr:last-child > * { border-bottom: 0; }
  .name-decomposition-mobile-table .position-cell { color: var(--color-text-secondary); font-size: .7rem; font-variant-numeric: tabular-nums; font-weight: 600; }
  .name-decomposition-mobile-table .value-cell { font-weight: 700; }
  .name-decomposition-mobile-table .name-cell { background: var(--number-soft, var(--color-background-secondary)); color: var(--number-color, var(--color-text)); font-size: 1.3rem; font-weight: 750; line-height: 1; }
  .matrix-table-wrap { width: 100%; max-width: 100%; overflow-x: visible; }
  .matrix-table { width: 100%; max-width: 100%; table-layout: fixed; white-space: normal; }
  .matrix-table th, .matrix-table td { min-width: 0; padding: 7px 4px; overflow-wrap: anywhere; line-height: 1.25; }
  .matrix-table thead th:first-child { width: 22%; }
  .matrix-table th { font-size: .58rem; letter-spacing: .025em; }
  .matrix-table td { font-size: .76rem; }
  .matrix-table small { margin-top: 2px; font-size: .65rem; }
  .number-distribution-content { grid-template-columns: 1fr; }
  .number-donut { width: min(58vw, 180px); }
  .personal-calendar-panel { padding: 9px; }
  .calendar-header { align-items: stretch; flex-direction: column; gap: 9px; }
  .calendar-navigation { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; overflow: visible; }
  .calendar-navigation button { min-width: 44px; min-height: 44px; padding: 6px; }
  .calendar-navigation [data-calendar-action="today"] { grid-column: 1 / -1; grid-row: 2; min-height: 44px; border-top: 1px solid var(--color-border); border-left: 0; }
  .calendar-date-picker { min-width: 0; min-height: 44px; padding-inline: 6px; }
  .calendar-date-picker input { min-width: 0; }
  .calendar-legend-wrap { justify-content: center; margin-top: 0; }
  .calendar-legend { grid-template-columns: repeat(4, minmax(0, auto)); gap: 5px 12px; }
  .calendar-grid { width: 100%; min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; overflow: visible; }
  .calendar-day, .calendar-blank { min-width: 0; }
  .calendar-day { gap: 3px; min-height: 164px; padding: 5px 3px 3px; }
  .calendar-day.is-selected { padding: 4px 2px 2px; }
  .calendar-day-heading { justify-content: center; }
  .calendar-day-heading time { font-size: .88rem; }
  .today-label { position: absolute; top: 2px; right: 1px; width: 6px; height: 6px; padding: 0; overflow: hidden; border: 0; background: var(--color-wine); color: transparent; font-size: 0; }
  .calendar-periods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .calendar-period { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 23px; padding: 1px; border-radius: 4px; background: var(--number-color); color: var(--calendar-number-foreground, var(--color-surface)); font-size: .78rem; line-height: 1; }
  .calendar-period.number-2 { --calendar-number-foreground: #211d20; }
  .calendar-personal-day { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 25px; margin-top: 1px; padding-top: 3px; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: .62rem; font-weight: 700; text-align: center; white-space: nowrap; }
  .calendar-period::after { display: none; }
  .calendar-day .destiny-encounter { width: .7em; height: .7em; flex: 0 0 auto; margin-left: .12em; color: var(--color-surface); }
  .selected-date-heading { margin-top: 10px; }
  .cycles-grid { grid-template-columns: 1fr; }
  .cycles-grid .summary-card { grid-template-columns: 1fr auto; align-items: center; min-height: 64px; }
  .calendar-cycle-navigation, .cycle-calendar-navigation { display: flex; }
  .calendar-cycle-navigation { justify-content: flex-end; margin-top: 10px; }
  .cycle-calendar-navigation { margin-top: 14px; }
  .calendar-cycle-button, .cycle-calendar-button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); color: var(--color-wine); font-weight: 700; }
  .periods-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Two map-number columns need enough real panel width for complete card content. */
@container (max-width: 329px) {
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) and (max-height: 430px) and (orientation: landscape) {
  :root { --sticky-scroll-offset: 76px; }
  .active-person-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; }
  .active-person-name-row { grid-column: 1 / -1; }
  .active-person-birth-date { grid-row: 2; }
  .active-person-numbers { grid-row: 2; }
  .calendar-day { min-height: 112px; }
}

@media (min-width: 901px) and (max-width: 940px) and (max-height: 430px) and (orientation: landscape) {
  :root { --sticky-scroll-offset: 76px; }
  .calendar-day { min-height: 112px; }
}

@media (max-width: 430px) {
  .dashboard-header h1 { font-size: 1.35rem; }
  .calendar-weekday { padding-inline: 0; font-size: .56rem; }
  .calendar-context { justify-content: space-between; gap: 5px; }
  .calendar-legend { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; }
  .kpi-card { min-height: 92px; padding: 10px; }
  .kpi-value { font-size: 1.8rem; }
}

@media (max-width: 340px) {
  .personal-calendar-panel { padding-inline: 5px; }
  .calendar-grid { gap: 2px; }
  .calendar-day { padding-inline: 2px; }
  .calendar-day.is-selected { padding-inline: 1px; }
  .calendar-personal-day { font-size: .57rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}