/* Consistent utility controls and the reference-inspired calendar. */
/* Reference material: neutral tiles, a warm selected date and flat capped bars. */
.calendar-studio{--calendar-accent:#b64b20;--calendar-selected:#f4e6df;--calendar-tile:#f0efeb;--calendar-panel:#fffefa;--calendar-cap:#777b77;--calendar-bar:#888d87}
[data-theme=dark] .calendar-studio{--calendar-accent:#ff713b;--calendar-selected:#34221b;--calendar-tile:#282928;--calendar-panel:#151615;--calendar-cap:#c6c8c2;--calendar-bar:#92958e}
.tool-icon{border:1px solid var(--border);background:var(--subtle);border-radius:12px;width:44px;height:44px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--text);flex:none}
.tool-icon .icon{width:18px;height:18px;stroke-width:1.7}.tool-icon:hover{background:var(--brand-soft)}.tool-icon[aria-expanded=true]{background:var(--brand-soft);border-color:var(--control-border)}
.mobile-home-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--border);border-radius:18px 18px 0 0;background:var(--surface);color:var(--text)}
.mobile-home-header .mobile-month{font-size:15px;font-weight:650;white-space:nowrap}.mobile-header-space{flex:1}.mobile-home-header .previous-month .icon{transform:rotate(180deg)}
#app[data-route=home] .heading-actions{display:none}
#app[data-home-view=calendar] .toolbar{display:none}#app[data-home-view=calendar][data-search-open=true] .toolbar,#app[data-home-view=calendar] .toolbar.filters-open{display:flex}
.calendar-layout{align-items:start;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.calendar-studio{padding:0;overflow:hidden;border-radius:22px;min-width:0}.calendar-controls{display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid var(--border)}
.calendar-controls h2{font-size:16px;letter-spacing:-.4px;flex:1;min-width:0}.calendar-today{border:1px solid var(--control-border);border-radius:20px;padding:6px 12px;min-height:44px;font-size:12px;color:var(--text)}
.calendar-month-actions{display:flex;gap:4px}.calendar-controls .tool-icon{border:0;background:transparent}.calendar-controls .calendar-add{background:var(--brand);color:var(--on-brand);border-radius:14px}.calendar-previous .icon{transform:rotate(180deg)}
.calendar-studio .calendar-weekdays{padding:16px 14px 0;margin-bottom:6px;gap:4px}.calendar-studio .calendar-weekdays span{border-radius:7px;background:var(--subtle);padding:5px 0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.calendar-studio .calendar-grid{padding:0 14px;gap:4px}.calendar-studio .calendar-day{background:var(--subtle);border:1px solid var(--border);border-radius:9px;min-height:76px;padding:6px 3px;justify-content:space-between;gap:3px}
.calendar-studio .calendar-day:hover{border-color:var(--control-border)}.calendar-studio .calendar-outside{color:var(--muted);background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 4px,var(--subtle) 4px,var(--subtle) 5px);justify-content:flex-start}
.calendar-studio .calendar-day.selected{color:var(--text);background:var(--brand-soft);border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.calendar-studio .calendar-day.today{border-color:var(--control-border)}.calendar-date-number{font-size:12px;font-weight:550;display:flex;gap:4px;align-items:center}.calendar-today-dot{width:4px;height:4px;background:var(--brand);border-radius:50%}
.calendar-entry-icons{display:flex;justify-content:center;gap:3px;min-height:18px}.calendar-entry{display:grid;place-content:center;width:18px;height:18px;border-radius:6px;background:var(--surface)}.calendar-entry .icon{width:13px;height:13px;stroke-width:2}
.calendar-studio .calendar-day small{display:block;font-size:9px;min-height:14px;line-height:1.4;font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere}
.calendar-legend{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px;font-size:10px;color:var(--muted)}.calendar-legend>span{display:flex;align-items:center;gap:5px}.calendar-legend i{width:5px;height:5px;border-radius:50%;background:currentColor}.calendar-legend .transfer,.calendar-entry.transfer{color:var(--link)}.calendar-record-count{margin-left:auto}
.calendar-breakdown{border-top:1px dashed var(--border);margin:0 14px;padding:4px 0 14px}.calendar-breakdown summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;font-size:11px;font-weight:600;cursor:pointer}.calendar-breakdown summary::-webkit-details-marker{display:none}.calendar-breakdown summary>span{margin-left:auto;color:var(--muted);font-size:10px;font-weight:400}.calendar-breakdown summary .icon{width:14px;height:14px;transform:rotate(90deg)}.calendar-breakdown[open] summary .icon{transform:rotate(-90deg)}
.calendar-month-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}.calendar-month-bar{min-width:0;padding:0;min-height:88px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:flex-end;border-radius:6px}.calendar-month-bar svg{width:100%;height:64px;overflow:visible}.calendar-month-bar>span{font-size:9px;color:var(--muted);text-transform:uppercase}.calendar-month-bar.current>span{color:var(--text);font-weight:700}.calendar-breakdown>p{font-size:10px;margin-top:10px}
.calendar-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-top:1px solid var(--border);background:var(--surface)}.calendar-tools{display:flex;gap:6px}.calendar-month-total{display:grid;text-align:right;min-width:0;gap:3px}.calendar-month-total>span{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.calendar-month-total>strong{font-size:14px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media(max-width:850px){.calendar-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:599px){.mobile-home-header{border:0;border-radius:0;gap:0;padding:8px 10px;background:var(--hero-surface);color:var(--hero-text)}.mobile-home-header .tool-icon{color:var(--hero-muted);border-color:transparent;background:transparent;min-width:36px;width:36px}.mobile-home-header .tool-icon:hover{background:var(--hero-active)}.calendar-layout{margin:12px;gap:16px}.calendar-controls{padding:12px;gap:4px}.calendar-controls h2{font-size:14px}.calendar-controls .tool-icon{width:36px;min-width:36px}.calendar-today{padding:6px 9px;font-size:11px}.calendar-studio .calendar-grid{padding:0 10px}.calendar-studio .calendar-weekdays{padding-inline:10px}.calendar-studio .calendar-day{min-height:65px}.calendar-entry{width:14px;height:14px}.calendar-entry .icon{width:11px;height:11px}.calendar-studio .calendar-day small{font-size:8px}.calendar-legend{gap:9px;font-size:9px;padding:12px 10px}.calendar-controls .calendar-add{width:40px;min-width:40px}.calendar-breakdown{margin-inline:10px}.calendar-footer{padding:10px}.calendar-tools .tool-icon{width:36px;min-width:36px}.calendar-month-total>strong{font-size:12px}.calendar-month-chart{gap:3px}}
@media(max-width:359px){.calendar-controls h2{font-size:12px}.calendar-controls{flex-wrap:wrap}.calendar-month-actions{gap:0}.calendar-legend{gap:7px}.calendar-record-count{flex-basis:100%;margin-left:0}.calendar-footer{align-items:flex-start}.calendar-month-total{max-width:130px}.calendar-month-total>strong{font-size:11px}}
@media(max-width:599px){.calendar-studio .calendar-day{min-height:56px;padding-block:4px}.calendar-studio .calendar-date-number{line-height:1.1}.calendar-studio .calendar-entry-icons{min-height:14px}.calendar-studio .calendar-day small{min-height:11px;line-height:1.2}}
/* Match the reference's quiet rectangular chart and compact utility strip. */
.calendar-studio{background:var(--calendar-panel);border-radius:16px}
.calendar-studio .calendar-day,.calendar-studio .calendar-weekdays span{background:var(--calendar-tile);border-color:transparent;border-radius:7px}
.calendar-studio .calendar-day.selected{background:var(--calendar-selected);border-color:var(--calendar-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--calendar-accent) 25%,transparent)}
.calendar-studio .calendar-day.selected .calendar-date-number{color:var(--calendar-accent)}
.calendar-studio .calendar-controls .calendar-add{background:var(--calendar-accent);color:#fff;border-radius:999px}
.calendar-studio .calendar-controls h2{font-size:14px;font-weight:550}
.calendar-studio .calendar-today{min-height:32px;padding:4px 10px;font-size:10px}
.calendar-studio .calendar-month-chart{gap:2px;border-bottom:1px solid var(--border)}
.calendar-studio .calendar-month-bar{border-radius:0;gap:7px;min-height:88px;padding-bottom:6px}
.calendar-bar-start{stop-color:var(--calendar-bar);stop-opacity:.28}.calendar-bar-end{stop-color:var(--calendar-bar);stop-opacity:.02}
.calendar-bar-cap{stroke:var(--calendar-cap);stroke-width:1.5;vector-effect:non-scaling-stroke}
.calendar-month-bar.current .calendar-bar-cap{stroke:var(--calendar-accent)}
.calendar-month-bar.current .calendar-bar-start,.calendar-month-bar.current .calendar-bar-end{stop-color:var(--calendar-accent)}
.calendar-studio .calendar-breakdown summary{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.8px}
.calendar-studio .calendar-breakdown summary .icon{order:-1;width:11px}
.calendar-studio .calendar-footer{background:transparent;padding-block:6px}
.calendar-studio .calendar-tools{gap:2px}
.calendar-studio .calendar-tools .tool-icon{border:0;background:transparent;border-radius:6px}
.calendar-studio .calendar-tools .tool-icon .icon{width:15px;height:15px}
.calendar-studio .calendar-month-total{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:7px}
.calendar-studio .calendar-month-total>strong{font-size:12px}
.calendar-studio .calendar-entry{background:transparent}

.calendar-studio .calendar-outside{background:repeating-linear-gradient(45deg,var(--calendar-panel),var(--calendar-panel) 4px,var(--calendar-tile) 4px,var(--calendar-tile) 5px)}