/* Business Days: a printed instrument. The answer reads like a dateline, the
   calendar like ruled paper with a highlighter drawn across the range.
   Loaded after collection-pages.css; selectors carry .days-app so they
   settle the shared tool defaults. */

.days-app {
    /* The hatch for days inside the range that aren't counted. Built from
       the foreground so it reads on paper and on night paper alike. */
    --days-hatch: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--foreground) 16%, transparent) 4px 5px);
    --days-band: color-mix(in srgb, var(--brand) 11%, transparent);
    --days-preview: color-mix(in srgb, var(--brand) 20%, transparent);
}

.days-app .section-heading { margin-bottom: 18px; font: 400 28px/1.25 var(--font-serif); letter-spacing: -.025em; }

/* Small controls used across the page. */
.days-app .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- range input */

.days-app .range-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 14px; padding: 22px 0 20px; border-top: 1px solid var(--border); }
.days-app .range-controls > label { display: flex; flex-direction: column; gap: 8px; color: var(--muted-foreground); font-size: 14px; }
.days-app .range-controls input[type=date] { width: 178px; }
.days-app .range-arrow { align-self: flex-end; padding-bottom: 9px; color: var(--subtle-foreground); font-size: 18px; line-height: 1; }

/* Presets are actions, so they sit as quiet words rather than buttons. */
.days-app .presets { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-left: auto; padding-bottom: 6px; }

/* Rules: two small switches. */
.days-app .day-rules { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding-bottom: 4px; color: var(--muted-foreground); font-size: 14px; }

/* --------------------------------------------------------------- the answer */

.days-app .business-answer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "dateline dateline" "main aside";
    align-items: end;
    gap: 14px 40px;
    margin-top: 26px;
    padding: 30px 0 24px;
    border-top: 1px solid var(--foreground);
}
.days-app .dateline { grid-area: dateline; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; color: var(--muted-foreground); font: 500 12px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.days-app .dateline:empty { display: none; }
.days-app .dateline-arrow { color: var(--brand); white-space: pre; }
.days-app .dateline-note { color: var(--subtle-foreground); white-space: pre; }
.days-app .answer-main { grid-area: main; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 20px; min-width: 0; }
.days-app .business-answer strong { flex: none; font: 400 clamp(80px, 11vw, 120px)/.86 var(--font-serif); letter-spacing: -.055em; }
.days-app #businessUnit { color: var(--foreground); font: 400 30px/1.2 var(--font-serif); letter-spacing: -.02em; }
.days-app .answer-aside { grid-area: aside; display: flex; gap: 32px; margin: 0; padding-bottom: 4px; }
.days-app .answer-aside:empty { display: none; }
.days-app .answer-aside > div { padding-left: 18px; border-left: 1px solid var(--border); }
.days-app .answer-aside dt { color: var(--muted-foreground); font-size: 13px; line-height: 1.4; white-space: nowrap; }
.days-app .answer-aside dd { margin: 4px 0 0; font: 400 26px/1.15 var(--font-serif); letter-spacing: -.02em; white-space: nowrap; }

/* The same arithmetic as a strip: counted days in rust, the rest stepping back. */
.days-app .breakdown { display: flex; gap: 3px; height: 10px; }
.days-app .breakdown:empty { display: none; }
.days-app .breakdown .seg { min-width: 4px; border-radius: 2px; }
.days-app .breakdown .seg:only-child { border-radius: 2px; }
.days-app .seg-business { background: var(--brand); }
.days-app .seg-weekend { background: var(--viz-shade) var(--days-hatch); box-shadow: inset 0 0 0 1px var(--border); }
.days-app .seg-holiday { background: var(--border-strong); }
.days-app .seg-custom { background: var(--tint-brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint-brand-text) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) {
    .days-app .breakdown .seg { transition: flex-grow var(--motion-settle) var(--ease-standard); }
}

/* The ledger beneath: each term keyed to its piece of the strip. */
.days-app .ledger { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; color: var(--muted-foreground); font-size: 14px; }
.days-app .ledger:empty { display: none; }
.days-app .ledger .term { display: inline-flex; align-items: baseline; gap: 0 5px; }
.days-app .ledger .term b { color: var(--foreground); font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.days-app .ledger .term-extra { color: var(--subtle-foreground); }
.days-app .ledger .swatch { align-self: center; width: 10px; height: 10px; margin-right: 2px; border-radius: 2px; }
.days-app .t-weekend .swatch { background: var(--viz-shade) var(--days-hatch); box-shadow: inset 0 0 0 1px var(--border-strong); }
.days-app .t-holiday .swatch { background: var(--border-strong); }
.days-app .t-custom .swatch { background: var(--tint-brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint-brand-text) 30%, transparent); }
.days-app .ledger .op { color: var(--subtle-foreground); }
.days-app .ledger-note { margin-left: auto; color: var(--subtle-foreground); font: 11px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.days-app #daysStatus { margin-top: 6px; }

/* ------------------------------------------------------------------ calendar */

.days-app .calendar-section { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--border); }
.days-app .calendar-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 8px; }
.days-app .calendar-title h2 { margin: 0; min-width: 9ch; font-size: 34px; letter-spacing: -.03em; }
.days-app .calendar-nav { display: flex; align-items: center; gap: 6px; }
.days-app .calendar-nav > button { min-height: 40px; }
.days-app .calendar-nav > button:not(#todayCalendar) { width: 40px; padding: 0; }
.days-app .calendar-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.days-app #todayCalendar { padding: 0 14px; }
.days-app .calendar-nav input[type=month] { width: 178px; min-height: 40px; margin-left: 8px; }

/* Mode: two words, the active one underlined in rust, as on the homepage. */
.days-app .calendar-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 4px 0 18px; color: var(--muted-foreground); font-size: 14px; }

/* The grid: ruled rows, days edge to edge so a range reads as one stroke. */
.days-app .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(78px, auto); user-select: none; -webkit-user-select: none; }
.days-app .calendar-weekday { padding: 0 12px 10px; color: var(--subtle-foreground); font: 500 11px var(--font-mono); letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.days-app .calendar-weekday abbr { text-decoration: none; }
.days-app .calendar-weekday.is-weekend { color: color-mix(in srgb, var(--subtle-foreground) 70%, transparent); }

.days-app .calendar-day {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    min-width: 0;
    min-height: 0;
    padding: 14px 12px 10px;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard);
}
.days-app .calendar-grid[data-mode=range] .calendar-day { cursor: cell; }
.days-app .calendar-grid[data-mode=off] .calendar-day.weekend { cursor: default; }
.days-app .calendar-day:active { transform: none; }
.days-app .calendar-day:hover { border-color: var(--border); background: transparent; }
.days-app .calendar-day:not(.disabled):hover .day-number { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.days-app .calendar-day:is(.range-start, .range-end, .preview-start, .preview-end, .today):hover .day-number { text-decoration: none; }
.days-app .calendar-day:focus-visible { z-index: 2; outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 3px; }
.days-app .calendar-day > span { position: relative; z-index: 1; }
.days-app .calendar-day .day-number { display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin: -5px 0 0 -7px; border-radius: 50%; font: 400 19px/1 var(--font-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.days-app .calendar-day .day-note { max-width: 100%; overflow: hidden; color: var(--muted-foreground); font: 500 10px/1.3 var(--font-mono); letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }

/* Days that never count: quieter figures. */
.days-app .calendar-day:is(.weekend, .holiday) .day-number { color: var(--subtle-foreground); }
.days-app .calendar-day.has-holiday .day-note { color: var(--subtle-foreground); }
.days-app .calendar-day.other > span { opacity: .34; }

/* The range: a highlighter stroke laid across the ruled row. */
.days-app .calendar-day::before { content: ''; position: absolute; z-index: 0; inset: 7px 0; border-radius: 0; pointer-events: none; }
.days-app .calendar-day.in-range::before { background: var(--days-band); }
.days-app .calendar-day.in-range:is(.weekend, .holiday)::before { background: var(--days-band) var(--days-hatch); }
.days-app .calendar-day.in-range.business .day-number { font-weight: 400; }
.days-app .calendar-grid > .in-range:nth-child(7n + 1)::before,
.days-app .calendar-grid > .range-start::before { left: 3px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.days-app .calendar-grid > .in-range:nth-child(7n)::before,
.days-app .calendar-grid > .range-end::before { right: 3px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
/* Ends of the range: the figure sits in a rust disc. */
.days-app .calendar-day:is(.range-start, .range-end) .day-number { background: var(--brand); color: var(--on-brand); }
.days-app .calendar-day:is(.range-start, .range-end) .day-note { color: var(--brand); }

/* A range being drawn: a stronger stroke follows the pointer or cursor. */
.days-app .calendar-grid.is-pending .calendar-day.in-range:not(.preview)::before { background: transparent; }
.days-app .calendar-day.preview::before { background: var(--days-preview); left: 0; right: 0; border-radius: 0; }
.days-app .calendar-grid > .preview:nth-child(7n + 1)::before,
.days-app .calendar-grid > .preview-start::before { left: 3px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.days-app .calendar-grid > .preview:nth-child(7n)::before,
.days-app .calendar-grid > .preview-end::before { right: 3px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.days-app .calendar-day:is(.preview-start, .preview-end) .day-number { background: var(--brand); color: var(--on-brand); }
.days-app .calendar-grid.is-pending .calendar-day:is(.range-start, .range-end):not(.preview-start):not(.preview-end) .day-number { background: none; color: inherit; }

/* Personal days off: a solid rust tint, the one warm block in the grid. */
.days-app .calendar-day.custom::before { inset: 4px 3px; border-radius: 4px; background: var(--tint-brand); }
.days-app .calendar-day.custom .day-number { color: var(--tint-brand-text); }
.days-app .calendar-day.custom .day-note { color: var(--tint-brand-text); }
.days-app .calendar-grid[data-mode=off] .calendar-day:not(.weekend):not(.custom):hover::before { inset: 4px 3px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint-brand-text) 40%, transparent); }

/* Today: a rust ring around the figure. */
.days-app .calendar-day.today .day-number { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); font-weight: 600; }
.days-app .calendar-day.today:is(.range-start, .range-end, .preview-start, .preview-end) .day-number { box-shadow: 0 0 0 2px var(--background), 0 0 0 3.5px var(--brand); color: var(--on-brand); }

/* The finish date found below: a rust corner fold. */
.days-app .calendar-day.finish::after { content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 14px 14px 0; border-color: transparent var(--brand) transparent transparent; }
.days-app .calendar-day.finish:not(.has-holiday):not(.custom):not(.range-start):not(.range-end) .day-note { color: var(--brand); }

.days-app .calendar-day:disabled { opacity: .2; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
    .days-app .calendar-day::before { transition: background-color var(--motion-fast) var(--ease-standard); }
}

/* What the pointer or keyboard is resting on. */
.days-app .calendar-readout { min-height: 46px; margin: 0; padding: 12px 0; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 14px; }
.days-app .calendar-readout b { color: var(--foreground); font-weight: 500; }

.days-app .calendar-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 2px; color: var(--muted-foreground); font-size: 13px; }
.days-app .calendar-key span { display: inline-flex; align-items: center; gap: 8px; }
.days-app .calendar-key span::before { content: ''; display: inline-block; width: 16px; height: 12px; border-radius: 3px; }
.days-app .calendar-key .key-range::before { background: var(--days-band); }
.days-app .calendar-key .key-off::before { background: var(--days-band) var(--days-hatch); }
.days-app .calendar-key .key-custom::before { background: var(--tint-brand); }
.days-app .calendar-key .key-today::before { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brand); }
.days-app .calendar-key .key-finish::before { width: 12px; height: 12px; border-radius: 0; background: linear-gradient(225deg, var(--brand) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--border); }

/* ------------------------------------------------------------ finish date */

.days-app .forward-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
    gap: 0 44px;
    margin-top: 48px;
    padding: 34px 0 0;
    border-top: 1px solid var(--border);
}
.days-app .forward-section > h2 { grid-column: 1 / -1; }
.days-app .forward-section > .app-footnote { grid-column: 1 / -1; margin-top: 22px; }
.days-app .forward-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 24px; align-content: start; }
.days-app .forward-controls > label,
.days-app .count-field > label,
.days-app .direction-field > span { display: flex; flex-direction: column; gap: 8px; color: var(--muted-foreground); font-size: 14px; }
.days-app .count-field, .days-app .direction-field { display: flex; flex-direction: column; gap: 8px; }
.days-app #forwardDate { width: 178px; }
.days-app .count-row { display: flex; gap: 6px; }
.days-app .forward-controls #forwardCount { width: 92px; font-family: var(--font-mono); }

.days-app .forward-answer { display: flex; flex-direction: column; align-self: stretch; justify-content: flex-end; margin: 0; padding: 4px 0 2px 28px; border-left: 1px solid var(--border); }
.days-app .forward-answer > span { color: var(--muted-foreground); font-size: 14px; }
.days-app .forward-answer strong { display: block; margin: 6px 0 4px; font: 400 40px/1.08 var(--font-serif); letter-spacing: -.035em; white-space: nowrap; }
.days-app .forward-answer em { color: var(--brand); font: 500 12px var(--font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.days-app .forward-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; }
.days-app .forward-actions button { min-height: 30px; padding: 0; border: 0; background: none; color: var(--muted-foreground); font-size: 14px; font-weight: 450; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 5px; }
.days-app .forward-actions button:hover { background: none; color: var(--foreground); text-decoration-color: var(--brand); }
.days-app .forward-actions button:active { transform: none; }
.days-app .forward-actions button[hidden] { display: none; }

/* ----------------------------------------------------------------- details */

.days-app .days-details { margin-top: 52px; font-size: 14px; }
.days-app .days-details summary { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-block: 1px solid var(--border); cursor: pointer; list-style: none; font: 400 22px/1.3 var(--font-serif); letter-spacing: -.015em; }
.days-app .days-details summary::-webkit-details-marker { display: none; }
.days-app .days-details summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid var(--muted-foreground); border-bottom: 1.5px solid var(--muted-foreground); transform: translateY(-2px) rotate(45deg); transition: transform var(--motion-settle) var(--ease-standard); }
.days-app .days-details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.days-app .days-details summary:hover { color: var(--brand); }
.days-app .summary-count { padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--tint-brand-text) 25%, transparent); border-radius: 999px; background: var(--tint-brand); color: var(--tint-brand-text); font: 500 11px/1.5 var(--font-mono); letter-spacing: .02em; }
.days-app .summary-count:empty { display: none; }
.days-app .details-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px 48px; padding-top: 26px; }
.days-app .days-details h3 { margin: 0 0 12px; font: 400 20px/1.3 var(--font-serif); letter-spacing: -.01em; }
.days-app .custom-day-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.days-app .custom-day-form input { flex: 1 1 160px; min-width: 0; }

.days-app .date-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.days-app .date-list li { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.days-app .date-list .date-jump { display: grid; grid-template-columns: 38px 62px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; flex: 1; min-width: 0; min-height: 46px; padding: 10px 8px; border: 0; border-radius: 0; background: none; color: var(--foreground); font-size: 14px; font-weight: 400; text-align: left; }
.days-app #customDays .date-jump { grid-template-columns: 38px minmax(0, 1fr); }
.days-app .date-list .date-jump:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); }
.days-app .date-list .date-jump:active { transform: none; }
.days-app .dl-week { color: var(--subtle-foreground); font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.days-app .dl-day { font-family: var(--font-serif); font-size: 16px; white-space: nowrap; }
.days-app .dl-name { overflow: hidden; color: var(--muted-foreground); text-overflow: ellipsis; white-space: nowrap; }
.days-app .dl-badge { color: var(--brand); font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.days-app .date-list .is-past .date-jump > span { opacity: .5; }
.days-app .date-list .is-next .dl-name { color: var(--foreground); }
.days-app .date-remove { flex: none; display: grid; place-items: center; width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--subtle-foreground); }
.days-app .date-remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.days-app .date-remove:hover { background: var(--destructive-soft); color: var(--destructive); }
.days-app .date-empty { padding: 14px 8px; color: var(--muted-foreground); line-height: 1.6; }
.days-app .days-details > .app-footnote { margin-top: 24px; }

/* ------------------------------------------------------------------ narrow */

@media (max-width: 860px) {
    .days-app .presets { width: 100%; margin-left: 0; padding-bottom: 0; }
    .days-app .forward-section { grid-template-columns: minmax(0, 1fr); }
    .days-app .forward-answer { margin-top: 26px; padding: 22px 0 0; border-top: 1px solid var(--border); border-left: 0; }
    .days-app .details-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .days-app .range-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 14px 10px; }
    .days-app .range-controls input[type=date] { width: 100%; }
    .days-app .presets { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; justify-items: start; }
        .days-app .day-rules { flex-direction: column; gap: 2px; }
    .days-app .business-answer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dateline" "main" "aside"; gap: 12px; padding-top: 24px; }
    .days-app .business-answer strong { font-size: 84px; }
    .days-app #businessUnit { font-size: 24px; }
    .days-app .answer-aside { gap: 0; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
    .days-app .answer-aside > div { flex: 1; padding: 0; border: 0; }
    .days-app .answer-aside > div + div { padding-left: 16px; border-left: 1px solid var(--border); }
    .days-app .answer-aside dd { font-size: 22px; }
    .days-app .ledger { font-size: 13px; }
    .days-app .ledger-note { width: 100%; margin-left: 0; }

    .days-app .calendar-title { flex-direction: column; align-items: stretch; }
    .days-app .calendar-title h2 { font-size: 30px; }
    .days-app .calendar-nav { flex-wrap: wrap; }
    .days-app .calendar-nav input[type=month] { flex: 1 1 140px; width: auto; margin-left: 0; }
    .days-app .calendar-mode { flex-direction: column; align-items: stretch; gap: 8px; }
    .days-app .calendar-weekday { padding: 0 0 8px; font-size: 10px; letter-spacing: .02em; text-align: center; }
    .days-app .calendar-grid { grid-auto-rows: minmax(54px, auto); }
    .days-app .calendar-day { align-items: center; padding: 10px 2px 6px; gap: 4px; }
    .days-app .calendar-day .day-number { min-width: 30px; height: 30px; margin: 0; font-size: 17px; }
    .days-app .calendar-day::before { inset: 6px 0; }
    /* Notes become a single dot under the figure. */
    .days-app .calendar-day .day-note { width: 4px; height: 4px; padding: 0; border-radius: 50%; background: currentColor; font-size: 0; opacity: .9; }
    .days-app .calendar-day:not(.has-holiday):not(.custom):not(.finish) .day-note { display: none; }
    .days-app .calendar-day.finish::after { border-width: 0 10px 10px 0; }
    .days-app .calendar-grid > .in-range:nth-child(7n + 1)::before,
    .days-app .calendar-grid > .range-start::before,
    .days-app .calendar-grid > .preview:nth-child(7n + 1)::before,
    .days-app .calendar-grid > .preview-start::before { left: 1px; }
    .days-app .calendar-grid > .in-range:nth-child(7n)::before,
    .days-app .calendar-grid > .range-end::before,
    .days-app .calendar-grid > .preview:nth-child(7n)::before,
    .days-app .calendar-grid > .preview-end::before { right: 1px; }
    .days-app .calendar-day.custom::before { inset: 4px 1px; }
    .days-app .calendar-key { gap: 6px 16px; font-size: 12px; }

    .days-app .forward-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .days-app #forwardDate { width: 100%; }
    .days-app .count-row { flex-wrap: wrap; }
    .days-app .count-row input { flex: 1 1 96px; }
    .days-app .count-row .segmented { flex: 1 1 200px; }
    .days-app :is(.count-row, .direction-field, .calendar-mode) .segmented { display: flex; }
    .days-app .segmented > :is(button, label) { flex: 1; }
    .days-app .segmented > label > span { width: 100%; }
    .days-app .forward-controls #forwardCount { flex: 1 1 80px; width: auto; }
            .days-app .forward-answer strong { font-size: 34px; white-space: normal; }
    .days-app .date-list .date-jump { grid-template-columns: 34px 58px minmax(0, 1fr); gap: 10px; }
    .days-app .date-list .dl-badge { grid-column: 3; }
}