@font-face {
    font-family: "RobotoPdf";
    src: url(Roboto-Regular.ttf) format("truetype");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.layout {
    width: 100%;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 8px 8px 0 var(--ink);
}

.preview {
    background: var(--accent);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius) - 1.5px) 0 0 calc(var(--radius) - 1.5px);
    overflow: hidden;
}

/* A4 sheet: every dimension in mm, same values as app.js */
.sheet {
    --mm: calc(100cqw / 210);
    container-type: inline-size;
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 210 / 297;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .5);
    transform: rotate(-2deg);
    transition: transform .3s;
    font-family: "RobotoPdf", sans-serif;
    color: rgb(49, 49, 49);
}

.layout:hover .sheet { transform: rotate(0); }

.sheet-inner { position: absolute; inset: 0; }

.sheet-title {
    position: absolute;
    top: calc(var(--mm) * 18);
    left: 0;
    right: 0;
    text-align: center;
    font-size: calc(var(--mm) * 7.056);
    line-height: 1;
    color: #000;
    transform: translateY(-78%);
}

.sheet-table {
    position: absolute;
    top: calc(var(--mm) * 25);
    left: calc(var(--mm) * 7.5);
    width: calc(var(--mm) * 195);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: calc(var(--mm) * 10.868);
    border-top: calc(var(--mm) * .4) solid rgb(49, 49, 49);
    border-left: calc(var(--mm) * .4) solid rgb(49, 49, 49);
}

.sheet-table span {
    display: flex;
    align-items: center;
    padding-left: calc(var(--mm) * 1.5);
    border-right: calc(var(--mm) * .4) solid rgb(49, 49, 49);
    border-bottom: calc(var(--mm) * .4) solid rgb(49, 49, 49);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--mm) * 4.233);
    white-space: nowrap;
}

/* autotable falls back to Helvetica; head is bold and centered, body left */
.sheet-table span.h {
    background: rgb(221, 221, 221);
    font-weight: 700;
    justify-content: center;
    padding-left: 0;
}

.sheet-note {
    position: absolute;
    left: calc(var(--mm) * 7.5);
    font-size: calc(var(--mm) * 4.939);
    line-height: 1;
    color: #000;
    transform: translateY(-78%);
}

.controls {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.eyebrow {
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

h1 {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: var(--display-size);
    text-transform: var(--display-case);
    line-height: 1.02;
    letter-spacing: var(--display-tracking);
    margin: 0 0 14px;
}

.lead { color: var(--muted); font-size: 15px; line-height: 1.55; }

.field-label {
    display: block;
    font-family: var(--font-label);
    font-size: 13px;
    font-weight: 600;
    margin: 30px 0 8px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* custom select */
.picker { position: relative; }

.picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    padding: 13px 14px 13px 16px;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--card);
    cursor: pointer;
    text-align: left;
}

.picker-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus); }

.picker-chevron {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: calc(var(--radius-sm) - 4px);
    background: var(--ink);
    color: var(--card);
    transition: transform .2s;
}

.picker-btn[aria-expanded="true"] .picker-chevron { transform: rotate(180deg); }

.picker-list {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 6px;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--card);
    box-shadow: 5px 5px 0 var(--ink);
    outline: none;
}

.picker-list[hidden] { display: none; }

.picker-list li {
    padding: 10px 8px;
    border-radius: calc(var(--radius-sm) - 4px);
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.picker-list li.active { background: var(--hover); }

.picker-list li[aria-selected="true"] {
    background: var(--ink);
    color: var(--card);
}

.cta {
    margin-top: 16px;
    font: inherit;
    font-family: var(--font-button);
    font-size: var(--button-size);
    font-weight: 600;
    letter-spacing: var(--button-tracking);
    text-transform: var(--button-case);
    padding: 14px;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--btn-ink);
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--btn-shadow);
    transition: transform .1s, box-shadow .1s;
}

.cta:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--btn-shadow); }
.cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--btn-shadow); }
.cta:focus-visible { outline: none; box-shadow: 4px 4px 0 var(--btn-shadow), 0 0 0 4px var(--focus); }

/* inline month grid */
.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.month-grid button {
    position: relative;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 11px 6px;
    border: 1.5px solid var(--line-soft, rgba(0, 0, 0, .15));
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.month-grid button:hover { background: var(--hover); border-color: var(--ink); }

.month-grid button:hover { background: var(--grid-hover, var(--hover)); }

.month-grid button[aria-checked="true"] {
    background: var(--sel-bg, var(--ink));
    border-color: var(--sel-border, var(--ink));
    color: var(--sel-ink, var(--card));
    font-weight: var(--sel-weight, 500);
}

.month-grid button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus); }

.cta-full { width: 100%; }

@media (max-width: 760px) {
    .layout { grid-template-columns: 1fr; box-shadow: 5px 5px 0 var(--ink); }
    .preview { padding: 28px; border-radius: calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px) 0 0; }
    .sheet { max-width: 260px; }
    .controls { padding: 28px 20px; }
    h1 { font-size: var(--display-size-sm); }
    .picker-list { grid-template-columns: repeat(2, 1fr); }
    .month-grid { grid-template-columns: repeat(3, 1fr); }
}