/* Three presentations; the calendar, forms and financial state stay shared. */
:root { --mute: #5c6268; }
[data-style="famille"] {
  --bg: #f6f2eb; --card: #fffdf9; --ink: #302f2a; --mute: #696158;
  --line: #e2d9cb; --accent: #66503c; --r: 16px;
  --in: #176d4e; --in-bg: #eaf3ec; --out: #ad3529; --out-bg: #f9ece6;
}
[data-style="acef"] {
  --bg: #f5f7f6; --card: #fff; --ink: #222c32; --mute: #56616a;
  --line: #d8dfe1; --accent: #344659; --r: 5px;
  --in: #086e49; --in-bg: #eaf4ee; --out: #af3024; --out-bg: #f9ebe7;
}
[data-style="minimal"] {
  --bg: #fff; --card: #fff; --ink: #222627; --mute: #5a6265;
  --line: #e0e4e3; --accent: #303e45; --r: 0px;
  --in: #096b48; --in-bg: #eff6f2; --out: #af352a; --out-bg: #fcf1ee;
}
.wordmark { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--mute); }
.foot .style-switch { min-height: 44px; padding: 8px 6px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.sum span, .addlabel, .sect, .lend span, label { text-transform: none; letter-spacing: 0; }
.sum span { font-size: 12px; }
.sum { min-height: 52px; }
.sum.start span { text-decoration: underline; text-underline-offset: 3px; }
.summary { margin-bottom: 12px; }
.cell .flow { opacity: 1; }
.cell .d { color: var(--mute); }
.cell.today .d { color: white; }
.cell.low .bal, .cell.neg .bal { color: var(--warn-ink); }
.cell.first { box-shadow: 0 0 0 2px var(--warn-bd); }
.cell.sel { box-shadow: 0 0 0 2px var(--accent); }
.daybody .sect, .daybody .addlabel { font-size: 14px; }
.daybody .lend span { font-size: 14px; }
.lend b { max-width: 100%; overflow-wrap: anywhere; }
.row { flex-wrap: wrap; }
select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tx { margin-bottom: 4px; }
.app > .hint { font-size: 12px; line-height: 1.45; margin-top: 12px; }

/* A · Famille: warm paper, a softer rhythm, quieter summary. */
[data-style="famille"] h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 500; letter-spacing: -.04em; }
[data-style="famille"] .daybody h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; font-size: 29px; }
[data-style="famille"] .top { padding-bottom: 18px; }
[data-style="famille"] .nav { box-shadow: none; background: #ebe4d9; }
[data-style="famille"] .summary { gap: 0; background: #ece6db; padding: 6px 3px; border-radius: 16px; }
[data-style="famille"] .sum { box-shadow: none; background: transparent; border-radius: 12px; padding: 7px 6px; }
[data-style="famille"] .sum.end { background: var(--card); }
[data-style="famille"] .sum.end span { color: var(--mute); }
[data-style="famille"] .sum.end b { color: var(--ink); }
[data-style="famille"] .sum.end.watch { background: var(--warn-bg); }
[data-style="famille"] .grid, [data-style="famille"] .dow { gap: 4px; }
[data-style="famille"] .cell { border-radius: 11px; min-height: 80px; box-shadow: none; }
[data-style="famille"] .cell.has { box-shadow: inset 0 0 0 1px var(--line); }
[data-style="famille"] .cell.first { box-shadow: inset 0 0 0 2px var(--warn-bd); }
[data-style="famille"] .cell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
[data-style="famille"] .cell .bal { color: var(--mute); }
[data-style="famille"] .cell.has .bal { color: var(--ink); }
[data-style="famille"] .cell.low .bal, [data-style="famille"] .cell.neg .bal { color: var(--warn-ink); }
[data-style="famille"] .ledger { background: var(--bg); border-radius: 22px; padding: 8px 18px 18px; }
[data-style="famille"] .lend b { font-weight: 700; }
[data-style="famille"] .tx { border-radius: 14px; padding: 14px 12px; }
[data-style="famille"] .seg { border-radius: 14px; }
[data-style="famille"] .alert { border: 0; border-left: 3px solid var(--warn-bd); border-radius: 0 12px 12px 0; }

/* B · ACEF Moderne: explicit daily structure, aligned balances, functional color. */
[data-style="acef"] .top { padding-bottom: 8px; }
[data-style="acef"] h1 { font-size: 23px; letter-spacing: -.035em; }
[data-style="acef"] .nav { border-radius: 8px; box-shadow: none; background: #e8eeed; }
[data-style="acef"] .summary { gap: 0; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line); padding: 6px 0; }
[data-style="acef"] .sum { border-radius: 0; background: transparent; box-shadow: none; padding: 3px 7px; min-height: 46px; }
[data-style="acef"] .sum + .sum { border-left: 1px solid var(--line); }
[data-style="acef"] .sum.end { background: #1f3a5f; border-radius: 6px; }
[data-style="acef"] .sum.end b { color: #fff; font-weight: 800; }
[data-style="acef"] .sum.end span { color: #c9d6e6; }
[data-style="acef"] .sum.end.watch { background: #f5c518; }
[data-style="acef"] .sum.end.watch b { color: #2b1f00; }
[data-style="acef"] .sum.end.watch span { color: #6b4e00; }
[data-style="acef"] .dow { margin-bottom: 2px; }
[data-style="acef"] .dow i { color: var(--ink); }
[data-style="acef"] .cell { border-radius: 4px; min-height: 76px; padding: 4px 3px 3px; box-shadow: inset 0 0 0 1px var(--line); }
[data-style="acef"] .cell.empty { box-shadow: none; }
[data-style="acef"] .cell .bal { color: var(--ink); font-weight: 650; border-top: 1px solid var(--line); padding-top: 3px; width: 100%; }
[data-style="acef"] .cell.has .bal { font-weight: 800; }
[data-style="acef"] .cell .flow { font-size: 10.5px; }
[data-style="acef"] .cell.first { box-shadow: inset 0 0 0 2px var(--warn-bd); }
[data-style="acef"] .cell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
[data-style="acef"] .cell.low .bal, [data-style="acef"] .cell.neg .bal { border-color: #dbbd67; color: var(--warn-ink); }
[data-style="acef"] .ledger { border-radius: 4px; border-top: 3px solid var(--accent); }
[data-style="acef"] .tx { border-radius: 4px; border-left: 3px solid transparent; }
[data-style="acef"] .tx.in { border-left-color: var(--in); }
[data-style="acef"] .tx.out { border-left-color: var(--out); }
[data-style="acef"] .daybody h2 { font-size: 26px; }
[data-style="acef"] .primary, [data-style="acef"] input, [data-style="acef"] select { border-radius: 6px; }

/* C · Minimal: no tile chrome, week rhythm and cashflow do the work. */
[data-style="minimal"] .app { padding-top: max(16px, env(safe-area-inset-top)); }
[data-style="minimal"] .top { padding: 10px 0 20px; }
[data-style="minimal"] h1 { font-weight: 500; font-size: 25px; letter-spacing: -.04em; }
[data-style="minimal"] .nav { background: none; box-shadow: none; }
[data-style="minimal"] .summary { gap: 0; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
[data-style="minimal"] .sum { background: none; box-shadow: none; border-radius: 0; padding: 0 5px; }
[data-style="minimal"] .sum.end span { color: var(--mute); }
[data-style="minimal"] .sum.end b { color: var(--ink); font-weight: 800; }
[data-style="minimal"] .sum.end.watch { background: var(--warn-bg); }
[data-style="minimal"] .grid, [data-style="minimal"] .dow { gap: 4px; }
[data-style="minimal"] .cell { min-height: 82px; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid var(--line); }
[data-style="minimal"] .cell.empty { border: 0; }
[data-style="minimal"] .cell.has { box-shadow: none; }
[data-style="minimal"] .cell.low { background: var(--warn-bg); }
[data-style="minimal"] .cell.neg { background: var(--neg-bg); }
[data-style="minimal"] .cell.first { box-shadow: inset 0 2px var(--warn-bd); }
[data-style="minimal"] .cell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
[data-style="minimal"] .cell .bal { color: var(--ink); }
[data-style="minimal"] .cell.low .bal, [data-style="minimal"] .cell.neg .bal { color: var(--warn-ink); }
[data-style="minimal"] .dayhead { border-bottom-color: transparent; }
[data-style="minimal"] .dnav { background: none; }
[data-style="minimal"] .daybody h2 { font-weight: 500; font-size: 26px; }
[data-style="minimal"] .ledger { background: none; border-radius: 0; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
[data-style="minimal"] .lrow { border: 0; padding: 5px 0; }
[data-style="minimal"] .lend { padding-top: 20px; }
[data-style="minimal"] .lend b { font-weight: 700; }
[data-style="minimal"] .tx { background: transparent; border-radius: 0; border-bottom: 1px solid var(--line); padding: 14px 0; }
[data-style="minimal"] .alert { border-radius: 2px; border: 0; border-left: 2px solid var(--warn-bd); }
[data-style="minimal"] .seg { background: #f3f5f4; border-radius: 4px; }
[data-style="minimal"] .chip { border-radius: 6px; box-shadow: none; }
[data-style="minimal"] .primary { border-radius: 4px; }

/* Trial selector: an isolated native dialog, three small illustrative previews. */
.style-chooser { width: min(850px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; border: 1px solid #e0e2dc; border-radius: 20px; padding: 26px; background: #fafaf7; color: #26312e; box-shadow: 0 16px 70px #1d282b33; }
.style-chooser::backdrop { background: #25343066; }
.chooser-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chooser-heading .wordmark { color: #59645f; }
#styleClose { width: 44px; height: 44px; flex-shrink: 0; font-size: 18px; border-radius: 50%; }
.style-chooser h2 { font-size: 28px; font-weight: 650; letter-spacing: -.04em; margin: 12px 0 8px; }
.style-chooser p { color: #59645f; font-size: 14px; }
.style-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.style-option { display: flex; flex-direction: column; text-align: left; padding: 17px; border: 1px solid #c9d0c9; color: #30362f; border-radius: 12px; background: white; }
.style-option[aria-pressed="true"] { outline: 2px solid #3f5550; outline-offset: 3px; }
.style-option:focus-visible { outline: 3px solid #273d37; outline-offset: 4px; }
.option-name { font-size: 19px; font-weight: 650; }
.option-description { font-size: 12px; color: #58605a; line-height: 1.5; margin-top: 6px; }
.option-action { font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 16px; gap: 10px; }
.mini-month { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 4px; margin-top: 20px; }
.mini-month > span { display: flex; flex-direction: column; min-height: 90px; padding: 6px; background: #fff4c7; }
.mini-month > span:last-child { background: #ffe08a; }
.mini-month i { font-size: 11px; font-style: normal; color: #625f4d; }
.mini-month em { font-size: 10px; font-style: normal; text-align: right; color: #a63124; padding-top: 4px; }
.mini-month b { font-size: 18px; color: #7a5600; margin-top: auto; align-self: flex-end; }
.family-preview { background: #f2ece2; border-color: #ddd2c0; }
.family-preview .option-name { font-family: Georgia, serif; font-weight: 500; font-size: 23px; }
.family-preview .mini-month > span { border-radius: 9px; }
.acef-preview { background: #f0f4f3; border-radius: 4px; }
.acef-preview .mini-month > span { border: 1px solid #d5bd73; border-radius: 2px; }
.acef-preview .mini-month b { border-top: 1px solid #d5bd73; width: 100%; text-align: right; }
.minimal-preview { border-color: #dfe3e0; border-radius: 0; }
.minimal-preview .mini-month > span { border-bottom: 1px solid #cab979; }
.minimal-preview .option-name { font-weight: 500; }
.chooser-note { margin: 24px 0 0; line-height: 1.5; }
.style-status { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; margin: 0; padding: 12px; background: #fff4c7; color: #7a5600; border: 1px solid #e0a800; border-radius: 10px; font-size: 14px; }
@media (max-width: 599px) {
  .style-chooser { padding: 18px; border-radius: 16px; }
  .style-chooser h2 { font-size: 25px; }
  .style-options { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .style-option { display: grid; grid-template-columns: 1fr 108px; column-gap: 12px; padding: 14px; }
  .option-name, .option-description, .option-action { grid-column: 1; }
  .mini-month { grid-column: 2; grid-row: 1 / 4; margin: 0; gap: 3px; }
  .mini-month > span { padding: 4px; min-height: 84px; }
  .mini-month b { font-size: 15px; }
  .mini-month em { font-size: 9px; }
  .option-action { font-size: 11px; margin-top: 12px; }
}
@media (max-width: 360px) {
  [data-style] .cell .flow { font-size: 10px; }
  [data-style] .cell .bal { font-size: 12px; }
  [data-style] .cell.has .bal { font-size: 12px; }
  [data-style] .cell .bal.long { font-size: 10.5px; }
  [data-style] .summary .sum { padding-left: 5px; padding-right: 5px; }
  [data-style] .sum b { font-size: 12px; }
  .style-option { grid-template-columns: 1fr 91px; column-gap: 8px; padding: 12px; }
  .option-name { font-size: 17px; }
  .family-preview .option-name { font-size: 20px; }
  .option-description { font-size: 11px; }
  .option-action { font-size: 10px; }
  .mini-month b { font-size: 13px; }
}
@media (min-width: 640px) {
  .app { max-width: 880px; padding-top: 24px; }
  [data-style] h1 { font-size: 30px; }
  [data-style="famille"] h1 { font-size: 34px; }
  [data-style] .cell { min-height: 104px; padding: 7px 8px; }
  [data-style] .cell .flow { font-size: 12px; }
  [data-style] .cell .bal { font-size: 15px; }
  [data-style] .cell.has .bal { font-size: 18px; }
  [data-style] .cell .bal.long { font-size: 14px; }
  [data-style] .sum { padding: 10px 12px; }
  [data-style] .sum b { font-size: 21px; }
  .daybody { padding: 22px 28px 32px; }
}