:root {
    --paper-width: 148mm;
    --paper-height: 105mm;
    --paper-padding: 4mm;
    --month-gap-row: 0mm;
    --month-gap-col: 5mm;
    --date-font-size: 7.5pt;
    --day-name-size: 5pt;
    --month-title-size: 6.5pt;
    --month-color: #000000;
    --cell-height: 4.5mm;
    --orientation: portrait;
    --grid-display: none;
    --grid-color: rgba(0,0,0,0.15);
    --zoom-level: 1;
    --month-giant-size: 0pt;

    --accent: #2f4299;
    --accent-light: #fce8e4;
    --accent-hover: #1d3087;
    --input-bg: #ffffff;
    --border: #ece6e4;
    --label: #42404f;
    --text: #2a264a;

    /* Theme surfaces */
    --canvas-bg: #fcf4f2;
    --sidebar-bg: #fff9f8;
    --surface: #ffffff;
    --hover-bg: #f0ebe9;
    --accent-text: #ffffff;
    --placeholder: #b8b0c8;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--canvas-bg);
    user-select: none;
}

/* ─── App shell ───
   Flex (not grid) so the sidebar can slide out via negative margin
   without its content squishing mid-transition. */
.app {
    display: flex;
    height: 100vh;
}

/* ─── Sidebar ─── */
.sidebar {
    width: 264px;
    flex: 0 0 264px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.25s ease;
}

/* Desktop collapse: slide the whole panel off; preview takes the width */
body.sidebar-collapsed .sidebar { margin-left: -265px; }

/* Mobile-only close affordances — hidden on desktop */
.sidebar-close { display: none; }
.sidebar-scrim { display: none; }

.sidebar-toggle {
    position: fixed;
    top: 12px;
    left: 276px;
    z-index: 600;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--sidebar-bg);
    border: 1.5px solid var(--border);
    color: var(--label);
    padding: 0;
    transition: left 0.25s ease, background 0.12s, color 0.12s;
}
.sidebar-toggle:hover { background: var(--hover-bg); color: var(--text); }
body.sidebar-collapsed .sidebar-toggle { left: 12px; }

/* ─── Sections ─── */
.prop-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.prop-section-head {
    font-size: 11px;
    font-weight: 700;
    color: var(--label);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 12px;
}

/* ─── Property rows ─── */
.prop-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.prop-row:last-child { margin-bottom: 0; }

.prop-label {
    font-size: 12px;
    color: var(--label);
}

/* ─── Inputs ─── */
.sidebar input[type="number"],
.sidebar select {
    background: var(--input-bg);
    border: 1.5px solid transparent;
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    padding: 0 10px;
    height: 32px;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}

.sidebar input[type="number"]::-webkit-inner-spin-button,
.sidebar input[type="number"]::-webkit-outer-spin-button { opacity: 0.5; }

.sidebar input[type="number"]:focus,
.sidebar select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}

.sidebar select { cursor: pointer; }


.sidebar input[type="color"] {
    width: 40px;
    height: 28px;
    padding: 1px 3px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    cursor: pointer;
    justify-self: start;
}

/* ─── Paired inputs ─── */
.prop-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ─── Segmented control ─── */
.seg-ctrl {
    display: flex;
    background: var(--input-bg);
    border-radius: 8px;
    padding: 3px;
    height: 32px;
    gap: 2px;
}

.seg-ctrl button {
    flex: 1;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    color: var(--label);
    font-family: inherit;
    font-weight: 500;
    transition: all 0.15s;
}

.seg-ctrl button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
}

.seg-ctrl button:hover:not(.active) { color: var(--text); }

/* ─── Color swatches ─── */
.prop-swatches {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0 2px;
}

.swatch {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.swatch:hover { transform: scale(1.1); }

.swatch.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

/* ─── Date textarea ─── */
.prop-dates { margin-top: 10px; }

.prop-dates-label {
    display: block;
    font-size: 12px;
    color: var(--label);
    margin-bottom: 6px;
}

#dateInput {
    width: 100%;
    min-height: 80px;
    background: var(--input-bg);
    border: 1.5px solid transparent;
    border-radius: 8px;
    color: var(--text);
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 8px 10px;
    resize: vertical;
    line-height: 1.6;
    transition: border-color 0.15s;
}

#dateInput:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}

#dateInput::placeholder { color: var(--placeholder); }
#dateInput.has-errors { border-color: #dc2626; }

/* ─── Highlighting section ─── */
.highlighting-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.highlighting-head .link-btn { font-size: 11px; font-weight: 600; }

.swatch-picker {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--input-bg);
    border: 2px solid var(--border);
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.swatch-picker.has-custom { border-color: transparent; }
.swatch-picker.has-custom .picker-icon { display: none; }

.picker-icon {
    color: var(--label);
    pointer-events: none;
    flex-shrink: 0;
}

.swatch-picker:hover { transform: scale(1.1); }

.swatch-picker.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.swatch-picker input[type="color"] {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* ─── Day grid toggle button ─── */
.day-grid-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    cursor: pointer;
    background: var(--surface);
    padding: 0;
    position: relative;
    overflow: hidden;
    justify-self: start;
    transition: border-color 0.12s;
    flex-shrink: 0;
}

/* No-colour diagonal line when off */
.day-grid-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - 1px), #e03131 calc(50% - 1px), #e03131 calc(50% + 1px), transparent calc(50% + 1px));
}

/* Grey fill when on */
.day-grid-btn.active {
    background: rgba(0, 0, 0, 0.13);
    border-color: var(--border);
}
.day-grid-btn.active::before { display: none; }

/* ─── Reset link ─── */
.link-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-weight: 500;
}

.link-btn:hover { color: var(--accent-hover); text-decoration: underline; }

/* ─── Actions ─── */
.sidebar-actions {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    flex-shrink: 0;
}

.action-btn {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.12s, transform 0.1s;
}

.action-btn:active { transform: scale(0.98); }

.action-btn--primary {
    background: var(--accent);
    color: var(--accent-text);
}

.action-btn--primary:hover { background: var(--accent-hover); }

.action-btn--secondary {
    background: var(--input-bg);
    color: var(--text);
    font-weight: 500;
}

.action-btn--secondary:hover { background: var(--hover-bg); }

/* ─── Mobile hamburger (same panel icon as the desktop sidebar toggle) ─── */
.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* ─── Preview area ─── */
.preview-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--canvas-bg);
}


.preview-scroll {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px;
    position: relative;
}

/* ─── Calendar page ─── */
.page {
    width: var(--paper-width);
    height: var(--paper-height);
    min-width: var(--paper-width);
    min-height: var(--paper-height);
    background: var(--surface);
    padding: var(--paper-padding);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    transform: scale(var(--zoom-level));
    transform-origin: top center;
    transition: transform 0.2s ease;
}

#yearTitleHeader {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: var(--month-color);
    margin-bottom: 5mm;
    display: none;
}

.months-grid {
    display: grid;
    flex-grow: 1;
}

/* Layouts */
body[data-layout="landscape"] .months-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--month-gap-row) var(--month-gap-col);
}

body[data-layout="portrait"] .months-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--month-gap-row) var(--month-gap-col);
}

body[data-layout="folded"] .months-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1mm 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    column-gap: var(--month-gap-col);
    row-gap: var(--month-gap-row);
}

body[data-layout="folded"] .month:nth-child(1)  { grid-column: 1; grid-row: 1; }
body[data-layout="folded"] .month:nth-child(2)  { grid-column: 2; grid-row: 1; }
body[data-layout="folded"] .month:nth-child(3)  { grid-column: 1; grid-row: 2; }
body[data-layout="folded"] .month:nth-child(4)  { grid-column: 2; grid-row: 2; }
body[data-layout="folded"] .month:nth-child(5)  { grid-column: 1; grid-row: 3; }
body[data-layout="folded"] .month:nth-child(6)  { grid-column: 2; grid-row: 3; }
body[data-layout="folded"] .month:nth-child(7)  { grid-column: 4; grid-row: 1; }
body[data-layout="folded"] .month:nth-child(8)  { grid-column: 5; grid-row: 1; }
body[data-layout="folded"] .month:nth-child(9)  { grid-column: 4; grid-row: 2; }
body[data-layout="folded"] .month:nth-child(10) { grid-column: 5; grid-row: 2; }
body[data-layout="folded"] .month:nth-child(11) { grid-column: 4; grid-row: 3; }
body[data-layout="folded"] .month:nth-child(12) { grid-column: 5; grid-row: 3; }

/* ─── Month view layout ─── */
body[data-view="month"] .months-grid {
    display: flex;
    flex-direction: column;
}

body[data-view="month"] .month {
    display: flex;
    flex-direction: column;
    flex: 1;
}

body[data-view="month"] .month h3 { display: none; }

body[data-view="month"] table { flex: 1; }

/* Date number top-left in month view */
body[data-view="month"] td span {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.8mm 1mm;
}

/* Overflow (adjacent month) dates */
.overflow-date span { color: #bbb; }
body[data-view="month"] .overflow-date span { color: rgba(0,0,0,0.18); }

/* ─── Month view editorial header ─── */
.mvh {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    margin-bottom: 2.5mm;
    overflow: hidden;
}

.mvh-name {
    flex: 1;
    font-size: var(--month-giant-size);
    font-weight: 900;
    line-height: 0.85;
    color: var(--month-color);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    min-width: 0;
    overflow: hidden;
}

.mvh-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5mm;
    padding-left: 3mm;
}

.mvh-year-text {
    /* driven by the Year styling row; default derived from the fitted
       title size in updateDimensions (0.35×) */
    font-size: var(--year-title-size, calc(var(--month-giant-size) * 0.35));
    font-weight: 900;
    color: var(--year-color, var(--month-color));
    opacity: 0.28;
    line-height: 0.9;
    text-align: right;
}

/* Month-only sidebar section */
.month-only-section { display: none; }
body[data-view="month"] .month-only-section { display: block; }

/* ─── Page frame / month nav ─── */
.page-frame {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#monthNavBar {
    display: none;
    align-items: center;
    gap: 10px;
    /* clear separation between the pagination and the page below —
       adds to the page-frame's own 12px gap */
    margin-bottom: 14px;
}

/* month view: the nav + page block sits higher up the screen */
body[data-view="month"] .preview-scroll { padding-top: 20px; }

body[data-view="month"] #monthNavBar { display: flex; }

.month-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1.5px solid var(--border);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: background 0.12s, box-shadow 0.12s;
    font-family: inherit;
    padding: 0;
}

.month-nav-btn:hover { background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

#currentMonthDisplay {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    min-width: 110px;
    text-align: center;
}

/* ─── Zoom widget ─── */
.zoom-widget {
    position: fixed;
    bottom: 16px;
    right: 56px;
    display: flex;
    align-items: center;
    gap: 1px;
    background: var(--sidebar-bg);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 2px 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 500;
}

.zoom-widget button {
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    color: var(--label);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
    line-height: 1;
    padding: 0;
}

.zoom-widget button:hover { background: var(--input-bg); color: var(--text); }

.zoom-widget span {
    font-size: 11px;
    color: var(--label);
    min-width: 34px;
    text-align: center;
    letter-spacing: -0.2px;
}

/* ─── Eye toggle ─── */
.year-input-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.year-input-group input[type="number"] {
    flex: 1;
    min-width: 0;
}

.eye-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--input-bg);
    border: 1.5px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--label);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    padding: 0;
}

.eye-btn:hover { background: var(--hover-bg); color: var(--text); }
.eye-btn.active { color: var(--accent); border-color: var(--accent-light); background: var(--accent-light); }

/* Eye icon opens/closes with its toggle: open (outline + pupil) when the
   button is .active, closed (single lower-lid curve) when it's off.
   Pupil squashes vertically as the lid comes down — a small blink. */
.eye-icon .eye-outline,
.eye-icon .eye-pupil,
.eye-icon .eye-lid {
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform-origin: 8px 8px;
}
.eye-icon .eye-lid { opacity: 0; }
.eye-btn:not(.active) .eye-icon .eye-outline { opacity: 0; }
.eye-btn:not(.active) .eye-icon .eye-pupil { opacity: 0; transform: scaleY(0.1); }
.eye-btn:not(.active) .eye-icon .eye-lid { opacity: 1; }

.month h3 {
    margin: 0 0 1mm;
    font-size: var(--month-title-size);
    color: var(--month-color);
    text-align: center;
    text-transform: uppercase;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th { font-weight: normal; font-size: var(--day-name-size); color: var(--month-color); text-align: center; }

td {
    height: var(--cell-height);
    padding: 0.5mm 0;
    font-size: var(--date-font-size);
    text-align: center;
    border: var(--grid-display);
    touch-action: none;
}

td span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--date-font-size);
    line-height: 1;
    pointer-events: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* Export-only */
body.is-capturing td span {
    display: block;
    text-align: center;
    line-height: 1 !important;
    padding-top: calc(((var(--cell-height) - var(--date-font-size)) / 2) - (var(--date-font-size) * 0.3));
}

/* Highlight styles */
.highlight-yellow span { background: #fff59d; }
.highlight-blue   span { background: #cde8ff; }
.highlight-pink   span { background: #ffd6e8; }
.highlight-green  span { background: #d4ed91; }
.highlight-grey   span { background: #e0e0e0; }
.highlight-black  span { background: #000; color: #fff; }
.outline span { border: 0.5pt solid #555; }
.outline.round-left  span { border-right: none; }
.outline.round-right span { border-left: none; }
.outline:not(.round-all):not(.round-left):not(.round-right) span { border-left: none; border-right: none; }

.round-left  span { border-top-left-radius: 99px;  border-bottom-left-radius: 99px; }
.round-right span { border-top-right-radius: 99px; border-bottom-right-radius: 99px; }
.round-all   span { border-radius: 99px; }

/* Cursors */
body[data-active-mode="highlight"][data-highlight-color="yellow"] td { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate(135 16 16)"><rect x="10" y="4" width="6" height="16" rx="3" fill="%23FFC940"/><path d="M10 19 Q10 20 11 21 L11 23 Q11 24 13 24 Q15 24 15 23 L15 21 Q16 20 16 19 Z" fill="%232C2C2C"/><polygon points="11,23 13,28 15,23" fill="%23FFC940"/></g></svg>') 7 7, pointer; }
body[data-active-mode="highlight"][data-highlight-color="blue"]   td { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate(135 16 16)"><rect x="10" y="4" width="6" height="16" rx="3" fill="%2380C4FF"/><path d="M10 19 Q10 20 11 21 L11 23 Q11 24 13 24 Q15 24 15 23 L15 21 Q16 20 16 19 Z" fill="%232C2C2C"/><polygon points="11,23 13,28 15,23" fill="%2380C4FF"/></g></svg>') 7 7, pointer; }
body[data-active-mode="highlight"][data-highlight-color="pink"]   td { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate(135 16 16)"><rect x="10" y="4" width="6" height="16" rx="3" fill="%23FFB3D9"/><path d="M10 19 Q10 20 11 21 L11 23 Q11 24 13 24 Q15 24 15 23 L15 21 Q16 20 16 19 Z" fill="%232C2C2C"/><polygon points="11,23 13,28 15,23" fill="%23FFB3D9"/></g></svg>') 7 7, pointer; }
body[data-active-mode="highlight"][data-highlight-color="green"]  td { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate(135 16 16)"><rect x="10" y="4" width="6" height="16" rx="3" fill="%23D4ED91"/><path d="M10 19 Q10 20 11 21 L11 23 Q11 24 13 24 Q15 24 15 23 L15 21 Q16 20 16 19 Z" fill="%232C2C2C"/><polygon points="11,23 13,28 15,23" fill="%23D4ED91"/></g></svg>') 7 7, pointer; }
body[data-active-mode="highlight"][data-highlight-color="grey"]   td { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate(135 16 16)"><rect x="10" y="4" width="6" height="16" rx="3" fill="%23B0B0B0"/><path d="M10 19 Q10 20 11 21 L11 23 Q11 24 13 24 Q15 24 15 23 L15 21 Q16 20 16 19 Z" fill="%232C2C2C"/><polygon points="11,23 13,28 15,23" fill="%23B0B0B0"/></g></svg>') 7 7, pointer; }
body[data-active-mode="highlight"][data-highlight-color="black"]  td { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate(135 16 16)"><rect x="10" y="4" width="6" height="16" rx="3" fill="%23505050"/><path d="M10 19 Q10 20 11 21 L11 23 Q11 24 13 24 Q15 24 15 23 L15 21 Q16 20 16 19 Z" fill="%232C2C2C"/><polygon points="11,23 13,28 15,23" fill="%23505050"/></g></svg>') 7 7, pointer; }

/* ─── Mobile ─── */
@media (max-width: 768px) {
    /* desktop collapse doesn't apply — hamburger drives the off-canvas panel */
    .sidebar-toggle { display: none; }
    body.sidebar-collapsed .sidebar { margin-left: 0; }

    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        bottom: 0;
        width: 264px;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,0.1);
    }

    .sidebar.open { left: 0; }

    /* close button pinned to the open panel's top-right corner */
    .sidebar.open .sidebar-close {
        display: flex;
        position: fixed;
        top: 12px;
        left: 218px;
        z-index: 1001;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        background: var(--input-bg);
        border: 1.5px solid var(--border);
        border-radius: 8px;
        color: var(--label);
        cursor: pointer;
        padding: 0;
    }
    .sidebar.open .sidebar-close:hover { background: var(--hover-bg); color: var(--text); }

    /* tap anywhere outside the panel to close it */
    .sidebar.open ~ .sidebar-scrim,
    .sidebar.open + .sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    .hamburger {
        display: flex;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 999;
        background: var(--sidebar-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

}

/* ─── About button ─── */
.about-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--input-bg);
    border: 1.5px solid var(--border);
    color: var(--label);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    transition: background 0.12s, color 0.12s;
}
.about-btn:hover { background: var(--hover-bg); color: var(--text); }

/* ─── About modal ─── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
    background: var(--sidebar-bg);
    border-radius: 12px;
    padding: 28px 28px 24px;
    max-width: 340px;
    width: calc(100% - 48px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    position: relative;
}
.modal h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
    letter-spacing: -0.2px;
}
.modal p {
    font-size: 13px;
    color: var(--label);
    line-height: 1.6;
    margin: 0 0 10px;
}
.modal p:last-of-type { margin-bottom: 20px; }
.modal-close {
    width: 100%;
    height: 34px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.modal-close:hover { background: var(--accent-hover); }

/* ─── Dark mode ─── */
body[data-theme="dark"] {
    --accent: #ffdfd1;
    --accent-light: #3a2c2a;
    --accent-hover: #edcdbf;
    --input-bg: #2e3448;
    --border: #3a4060;
    --label: #8090b8;
    --text: #e8eaf2;
    --canvas-bg: #1a1b29;
    --sidebar-bg: #242838;
    --surface: #3e4570;
    --hover-bg: #3a4060;
    --accent-text: #1a1b29;
    --placeholder: #4a5580;
}

/* ─── Theme toggle button ─── */
.theme-btn {
    position: fixed;
    bottom: 16px;
    right: 96px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sidebar-bg);
    border: 1.5px solid var(--border);
    color: var(--label);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 500;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}
.theme-btn:hover { background: var(--hover-bg); color: var(--text); }

.theme-btn .icon-sun,
.theme-btn .icon-moon { display: none; }
body:not([data-theme="dark"]) .theme-btn .icon-sun { display: block; }
body[data-theme="dark"] .theme-btn .icon-moon { display: block; }

/* ─── Entrance animations (load only) ───
   "Paper drop": the page settles down onto the desk from slightly above,
   its cast shadow landing with it. All tunables are CSS variables —
   adjust them live with the tweak panel in dev-entrance-preview.html and
   paste the result over the :root block below.
   Control state set during boot (seg thumbs, eye icons) must NOT animate —
   that's gated by the body.booted class, added by calendar.js one frame
   after init. */
:root {
    /* Teresa's tuned values, 2026-07-12 (via ?debug=1 panel) */
    --drop-duration: 0.75s;
    --drop-delay: 0.2s;
    --drop-y: -60px;         /* how far above the desk it starts */
    --drop-scale: 1.04;      /* starting size (closer to the eye) */
    --drop-rot: 2.4deg;      /* starting tilt */
    --drop-shadow-x: 17px;   /* cast shadow offset while airborne */
    --drop-shadow-y: 22px;
}
@media screen and (prefers-reduced-motion: no-preference) {
    @keyframes page-drop {
        from {
            opacity: 0;
            transform: translateY(var(--drop-y)) scale(var(--drop-scale)) rotate(var(--drop-rot));
        }
    }
    /* from-only keyframes: the end state is whatever the cascade says, so
       theme/dark-mode shadows are never overwritten by the animation */
    @keyframes page-shadow-land {
        from {
            box-shadow:
                0 0 0 1.5px var(--page-ring, rgba(0,0,0,0.4)),
                var(--drop-shadow-x) var(--drop-shadow-y) 0 var(--page-cast-soft, rgba(0,0,0,0.1));
        }
    }
    @keyframes sidebar-enter { from { opacity: 0; transform: translateX(-14px); } }
    /* animate the page only — the month nav controls stay put */
    .page {
        animation:
            page-drop        var(--drop-duration) cubic-bezier(0.3, 0.9, 0.4, 1) var(--drop-delay) both,
            page-shadow-land var(--drop-duration) cubic-bezier(0.3, 0.9, 0.4, 1) var(--drop-delay) both;
    }
    .sidebar    { animation: sidebar-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
    /* no entrance if the sidebar loads collapsed */
    body.sidebar-collapsed .sidebar { animation: none; }
    @media (max-width: 768px) {
        /* mobile sidebar is an off-canvas panel with its own slide transition */
        .sidebar { animation: none; }
    }
}

/* No load-time transitions on boot-synced controls */
body:not(.booted) .seg-thumb,
body:not(.booted) .eye-icon .eye-outline,
body:not(.booted) .eye-icon .eye-pupil,
body:not(.booted) .eye-icon .eye-lid {
    transition: none !important;
}

/* ─── Print ─── */
@media print {
    @page {
        size: var(--orientation);
        margin: 0;
    }

    body {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sidebar, .preview-controls, .hamburger, .zoom-widget, #monthNavBar, .sidebar-toggle, button {
        display: none !important;
    }

    .app, .preview-area, .preview-scroll {
        display: block !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .page {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: scale(1) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* Multi-page month print */
    body.print-all-months #captureTarget { display: none !important; }
    body.print-all-months .month-print-page {
        display: flex !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        page-break-before: always;
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: scale(1) !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
    body.print-all-months .month-print-page:first-child { page-break-before: auto; }
}