:root{
  --calendar-card-min:clamp(255px,14vw,380px);
  --calendar-pad:clamp(17px,1vw,28px);
  --calendar-gap:clamp(12px,.75vw,24px);
  --calendar-day-number:clamp(25px,1.05vw,36px);
  --calendar-text:clamp(12px,.55vw,18px);
  --calendar-time:clamp(10px,.45vw,15px);
}

.header-title-tools{display:flex;align-items:center;gap:22px;min-width:0}
.display-size-wrap{position:relative;flex:0 0 auto}
.display-size-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:9px 12px;cursor:pointer}
.display-size-btn b{font-family:Georgia,serif;color:var(--green);font-size:16px}
.display-size-btn[aria-expanded="true"]{border-color:#9bc8b6;box-shadow:0 0 0 3px rgba(18,128,92,.1)}
.daily-export-btn{flex:0 0 auto;border:1px solid #b8d9cb;background:#eef8f3;color:#0f6f50;border-radius:9px;padding:10px 14px;font-weight:700;cursor:pointer;white-space:nowrap}
.daily-export-btn:hover{background:#dff1e8;border-color:#8fc4ad}.daily-export-btn:disabled{opacity:.55;cursor:wait}
.display-size-menu{position:absolute;left:0;top:47px;z-index:30;width:240px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.display-size-menu[hidden]{display:none}
.display-size-head{padding:4px 7px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.display-size-head b,.display-size-head small{display:block}
.display-size-head small{color:var(--muted);margin-top:3px;font-size:10px}
.display-size-menu>button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:transparent;border-radius:8px;padding:10px 9px;cursor:pointer;text-align:left}
.display-size-menu>button span{font-weight:700}
.display-size-menu>button small{color:var(--muted)}
.display-size-menu>button:hover,.display-size-menu>button.selected{background:var(--green2);color:var(--green)}
.display-size-menu>button.selected:after{content:'✓';font-weight:900}
.display-size-menu>button.selected small{display:none}

body.month-focus .content{max-width:none;width:100%;padding-left:clamp(20px,2.2vw,56px);padding-right:clamp(20px,2.2vw,56px)}
.days{grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--calendar-gap)}
.weekday{font-size:var(--calendar-text);padding:8px}
.day{min-height:var(--calendar-card-min);padding:var(--calendar-pad);border-radius:14px}
.day-num{margin-bottom:clamp(14px,1vw,24px)}
.day-num span{font-size:var(--calendar-day-number)}
.day-num small{font-size:var(--calendar-time)}
.day-line{font-size:var(--calendar-text);margin:clamp(8px,.6vw,14px) 0;gap:10px}
.day-line b{font-size:var(--calendar-text)}

body[data-display-size="large"]{
  --calendar-card-min:clamp(300px,16vw,430px);
  --calendar-pad:clamp(20px,1.25vw,32px);
  --calendar-gap:clamp(14px,.9vw,28px);
  --calendar-day-number:clamp(29px,1.25vw,42px);
  --calendar-text:clamp(14px,.68vw,21px);
  --calendar-time:clamp(11px,.55vw,17px);
}
body[data-display-size="xlarge"]{
  --calendar-card-min:clamp(350px,18vw,500px);
  --calendar-pad:clamp(23px,1.45vw,36px);
  --calendar-gap:clamp(16px,1vw,32px);
  --calendar-day-number:clamp(33px,1.45vw,48px);
  --calendar-text:clamp(16px,.8vw,24px);
  --calendar-time:clamp(12px,.65vw,19px);
}

body[data-display-size="large"] h1{font-size:32px}
body[data-display-size="xlarge"] h1{font-size:36px}
body[data-display-size="large"] .eyebrow,body[data-display-size="large"] .legend,body[data-display-size="large"] .nav,body[data-display-size="large"] .settings{font-size:13px}
body[data-display-size="xlarge"] .eyebrow,body[data-display-size="xlarge"] .legend,body[data-display-size="xlarge"] .nav,body[data-display-size="xlarge"] .settings{font-size:15px}
body[data-display-size="large"] .primary,body[data-display-size="large"] .secondary,body[data-display-size="large"] .icon-btn,body[data-display-size="large"] .display-size-btn,body[data-display-size="large"] .daily-export-btn{font-size:14px;padding:12px 18px}
body[data-display-size="xlarge"] .primary,body[data-display-size="xlarge"] .secondary,body[data-display-size="xlarge"] .icon-btn,body[data-display-size="xlarge"] .display-size-btn,body[data-display-size="xlarge"] .daily-export-btn{font-size:16px;padding:13px 20px}
body[data-display-size="large"] .display-size-menu{width:270px;font-size:14px}
body[data-display-size="xlarge"] .display-size-menu{width:300px;font-size:16px}
body[data-display-size="large"] .summary-card small,body[data-display-size="large"] .entry,body[data-display-size="large"] .ledger-table th,body[data-display-size="large"] .ledger-table td,body[data-display-size="large"] .ledger-table input,body[data-display-size="large"] .ledger-table select{font-size:14px}
body[data-display-size="xlarge"] .summary-card small,body[data-display-size="xlarge"] .entry,body[data-display-size="xlarge"] .ledger-table th,body[data-display-size="xlarge"] .ledger-table td,body[data-display-size="xlarge"] .ledger-table input,body[data-display-size="xlarge"] .ledger-table select{font-size:16px}
body[data-display-size="large"] .summary-card b{font-size:25px}
body[data-display-size="xlarge"] .summary-card b{font-size:28px}
body[data-display-size="large"] .ledger-table-head h3{font-size:20px}
body[data-display-size="xlarge"] .ledger-table-head h3{font-size:22px}
body[data-display-size="large"] .ledger-table-head small{font-size:14px}
body[data-display-size="xlarge"] .ledger-table-head small{font-size:16px}
body[data-display-size="large"] input,body[data-display-size="large"] select,body[data-display-size="large"] textarea{font-size:14px;padding:11px}
body[data-display-size="xlarge"] input,body[data-display-size="xlarge"] select,body[data-display-size="xlarge"] textarea{font-size:16px;padding:12px}
body[data-display-size="large"] dialog{width:min(720px,94vw)}
body[data-display-size="xlarge"] dialog{width:min(800px,95vw)}

@media(max-width:1400px){
  .days{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
  .day{padding:12px}
  .day-line{font-size:11px;gap:4px}.day-line b{font-size:11px}
  .day-num span{font-size:25px}.day-num small{font-size:10px}
  .header-title-tools{gap:10px}.display-size-btn span{display:none}
  .daily-export-btn{padding:9px 11px}
}
@media(max-width:620px){
  .display-size-menu{left:0;right:auto;max-width:calc(100vw - 28px)}
  .days{grid-template-columns:1fr}
  .day{min-height:auto;padding:18px}
  .day-line,.day-line b{font-size:14px}
}
