/* /Components/AgendaView.razor.rz.scp.css */
/* The agenda view: a long flat table of upcoming fires in an elevated card. The header (controls +
   column labels) sticks to the top while the rows scroll past. Tabular numerals throughout. All values
   from the design tokens. */
.agenda[b-vwhgdvvjgj] {
    overflow: hidden; /* clip children to the rounded card; the scroll lives on .agenda__scroll */
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    background-color: var(--bg-elevated);
}

/* The scrollable table region — the sticky column-label row sticks to the top of this box. */
.agenda__scroll[b-vwhgdvvjgj] {
    max-height: 32rem;
    overflow: auto;
}

.agenda__table[b-vwhgdvvjgj] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Sticky header — the controls row and the column-label row travel together. */
.agenda__head[b-vwhgdvvjgj] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.agenda__head th[b-vwhgdvvjgj] {
    background-color: var(--bg-elevated);
}

/* Controls row: count selector on the left, copy-all on the right. */
.agenda__bar[b-vwhgdvvjgj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.agenda__counts[b-vwhgdvvjgj] {
    display: flex;
    gap: var(--space-1);
}

.agenda__count[b-vwhgdvvjgj] {
    min-width: 2.75rem;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    background-color: var(--bg-input);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.agenda__count:hover[b-vwhgdvvjgj] {
    color: var(--text);
}

.agenda__count--active[b-vwhgdvvjgj] {
    border-color: var(--border-strong);
    background-color: var(--bg-hover);
    color: var(--text);
    font-weight: 500;
}

.agenda__count:focus-visible[b-vwhgdvvjgj] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.agenda__actions[b-vwhgdvvjgj] {
    display: flex;
    gap: var(--space-2);
}

.agenda__copy-all[b-vwhgdvvjgj],
.agenda__action[b-vwhgdvvjgj] {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    background-color: var(--bg-input);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    cursor: pointer;
}

.agenda__copy-all:hover:not(:disabled)[b-vwhgdvvjgj],
.agenda__action:hover:not(:disabled)[b-vwhgdvvjgj] {
    background-color: var(--bg-hover);
}

.agenda__copy-all:disabled[b-vwhgdvvjgj],
.agenda__action:disabled[b-vwhgdvvjgj] {
    opacity: 0.5;
    cursor: default;
}

.agenda__copy-all:focus-visible[b-vwhgdvvjgj],
.agenda__action:focus-visible[b-vwhgdvvjgj] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Column labels. */
.agenda__labels th[b-vwhgdvvjgj] {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.625rem; /* 10px */
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.agenda__col-index[b-vwhgdvvjgj] {
    width: 3rem;
    text-align: right;
}

/* Rows. */
.agenda__row td[b-vwhgdvvjgj] {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text);
}

.agenda__row:last-child td[b-vwhgdvvjgj] {
    border-bottom: 0;
}

.agenda__index[b-vwhgdvvjgj] {
    text-align: right;
    color: var(--text-subtle);
}

.agenda__time--rule[b-vwhgdvvjgj] {
    color: var(--text-muted);
}

.agenda__copy-cell[b-vwhgdvvjgj] {
    width: 2.5rem;
    text-align: center;
}

.agenda__copy[b-vwhgdvvjgj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-1);
    background: none;
    color: var(--text-subtle);
    cursor: pointer;
}

.agenda__copy:hover[b-vwhgdvvjgj] {
    color: var(--accent);
}

.agenda__copy:focus-visible[b-vwhgdvvjgj] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.agenda__empty[b-vwhgdvvjgj] {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.agenda__status[b-vwhgdvvjgj] {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* Visually-hidden label for the copy column header. */
.agenda__sr[b-vwhgdvvjgj] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Banner.razor.rz.scp.css */
.banner[b-lxs7vsqblr] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    max-width: 40rem;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-2);
    background-color: var(--bg-elevated);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text);
}

/* Info leans on the single accent; warning uses the semantic warning colour. */
.banner--info[b-lxs7vsqblr] {
    border-left-color: var(--accent);
}

.banner--warning[b-lxs7vsqblr] {
    border-left-color: var(--warning);
}

.banner__icon[b-lxs7vsqblr] {
    flex: none;
}

.banner__content[b-lxs7vsqblr] {
    flex: 1 1 auto;
}

.banner__dismiss[b-lxs7vsqblr] {
    flex: none;
    margin-top: calc(var(--space-1) * -1);
    padding: 0 var(--space-1);
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.banner__dismiss:hover[b-lxs7vsqblr] {
    color: var(--text);
}
/* /Components/Button.razor.rz.scp.css */
.button[b-gswxc2hh6g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    background-color: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.button:focus-visible[b-gswxc2hh6g] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.button:disabled[b-gswxc2hh6g] {
    opacity: 0.5;
    cursor: not-allowed;
}

.button--primary[b-gswxc2hh6g] {
    background-color: var(--accent);
    color: var(--accent-text);
}

.button--primary:hover:not(:disabled)[b-gswxc2hh6g] {
    background-color: var(--accent-hover);
}

.button--secondary[b-gswxc2hh6g] {
    border-color: var(--border-strong);
    color: var(--text);
}

.button--secondary:hover:not(:disabled)[b-gswxc2hh6g] {
    background-color: var(--bg-hover);
}

.button--ghost[b-gswxc2hh6g] {
    color: var(--text-muted);
}

.button--ghost:hover:not(:disabled)[b-gswxc2hh6g] {
    background-color: var(--bg-hover);
    color: var(--text);
}

/* Taller hit target on touch viewports. */
@media (max-width: 767.98px) {
    .button[b-gswxc2hh6g] {
        height: 40px;
    }
}
/* /Components/CalendarGrid.razor.rz.scp.css */
/* The calendar feature: the month-grid card and, when a day is pinned, the detail panel beside it. The
   panel's own width lives in DayDetailPanel.razor.css; here we lay the two out and stack them on narrow
   viewports. All values come from the design tokens. */
.calendar[b-5sxw5kk3xg] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.calendar > .calendar-grid[b-5sxw5kk3xg] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 48rem) {
    .calendar[b-5sxw5kk3xg] {
        flex-direction: column;
    }
}

/* The month-grid card: elevated surface, header strip, day-of-week row, and the 6x7 cell grid. */
.calendar-grid[b-5sxw5kk3xg] {
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    background-color: var(--bg-elevated);
    padding: var(--space-4);
}

/* Header: month/year on the left, zone + total fire count on the right. */
.calendar-grid__header[b-5sxw5kk3xg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.calendar-grid__title[b-5sxw5kk3xg] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1rem; /* 16px */
    font-weight: 600;
    color: var(--text);
}

.calendar-grid__meta[b-5sxw5kk3xg] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.6875rem; /* 11px */
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* role="grid": a vertical stack of the weekday header row and six week rows. */
.calendar-grid__grid[b-5sxw5kk3xg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* The weekday strip and every week share one 7-column track. */
.calendar-grid__weekdays[b-5sxw5kk3xg],
.calendar-grid__week[b-5sxw5kk3xg] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1);
}

/* Day-of-week strip — uppercase, letter-spaced, quietened. */
.calendar-grid__weekday[b-5sxw5kk3xg] {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.625rem; /* 10px */
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* Narrow viewports (≈ ≤ 480px): trim the card padding back so seven columns stay comfortable at 320px. */
@media (max-width: 30rem) {
    .calendar-grid[b-5sxw5kk3xg] {
        padding: var(--space-2);
    }
}

/* Visually-hidden status region — present per the spec, but announced content is carried by cell
   aria-labels (this region is aria-live="off"). */
.calendar__sr-status[b-5sxw5kk3xg] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/CalendarToolbar.razor.rz.scp.css */
/* The calendar's month navigation row: prev/Today/next + month picker on the left, the "next fire
   after" jump pushed to the right. Wraps on narrow viewports. Tokens only. */
.calendar-toolbar[b-9oju16okfm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.calendar-toolbar__nav[b-9oju16okfm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.calendar-toolbar__jump[b-9oju16okfm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.calendar-toolbar__jump-label[b-9oju16okfm] {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Native month/date pickers — styled to the input token surface; the browser keeps its own picker UI. */
.calendar-toolbar__month[b-9oju16okfm],
.calendar-toolbar__jump-input[b-9oju16okfm] {
    box-sizing: border-box;
    height: 40px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    background-color: var(--bg-input);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.calendar-toolbar__month:focus-visible[b-9oju16okfm],
.calendar-toolbar__jump-input:focus-visible[b-9oju16okfm] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.calendar-toolbar__jump-message[b-9oju16okfm] {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--warning);
}
/* /Components/CalendarViewSwitcher.razor.rz.scp.css */
/* The Month / Week / Agenda segmented switcher. A quiet rail of three options; the active one is
   picked out with the hover surface. All values from the design tokens. */
.view-switcher[b-yruwc90bys] {
    display: inline-flex;
    gap: var(--space-1);
    box-sizing: border-box;
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    background-color: var(--bg-input);
    margin-bottom: var(--space-3);
}

.view-switcher__option[b-yruwc90bys] {
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-1);
    background: none;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: pointer;
}

.view-switcher__option:hover[b-yruwc90bys] {
    color: var(--text);
}

.view-switcher__option--active[b-yruwc90bys] {
    background-color: var(--bg-hover);
    color: var(--text);
    font-weight: 500;
}

.view-switcher__option:focus-visible[b-yruwc90bys] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
/* /Components/CheatsheetPanel.razor.rz.scp.css */
/* Grammar cheatsheet — a native modal <dialog> re-anchored to the right edge as a full-height slide-in
   panel (CRON-128). Hierarchy via borders + bg contrast, no shadows, per the Observatory language. */
.cheatsheet[b-0zzz4247ka] {
    margin: 0 0 0 auto;
    width: 100%;
    max-width: min(460px, 100%);
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    border: none;
    border-left: 1px solid var(--border-strong);
    background-color: var(--bg-elevated);
    color: var(--text);
}

.cheatsheet[b-0zzz4247ka]::backdrop {
    background-color: rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: no-preference) {
    .cheatsheet[open][b-0zzz4247ka] {
        animation: cheatsheet-slide-in-b-0zzz4247ka 0.16s ease-out;
    }

    @keyframes cheatsheet-slide-in-b-0zzz4247ka {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }
}

.cheatsheet__panel[b-0zzz4247ka] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-5);
    overflow-y: auto;
}

.cheatsheet__header[b-0zzz4247ka] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.cheatsheet__title[b-0zzz4247ka] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.cheatsheet__summary[b-0zzz4247ka] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.cheatsheet__fields[b-0zzz4247ka] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.cheatsheet__fields th[b-0zzz4247ka],
.cheatsheet__fields td[b-0zzz4247ka] {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--border);
}

.cheatsheet__fields th[b-0zzz4247ka] {
    font-weight: 600;
    background-color: var(--bg);
}

.cheatsheet__subheading[b-0zzz4247ka] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.cheatsheet__legend[b-0zzz4247ka],
.cheatsheet__examples[b-0zzz4247ka] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    font-size: 0.875rem;
}

.cheatsheet__legend dt[b-0zzz4247ka],
.cheatsheet__examples dt[b-0zzz4247ka] {
    margin: 0;
}

.cheatsheet__legend dd[b-0zzz4247ka],
.cheatsheet__examples dd[b-0zzz4247ka] {
    margin: 0;
    color: var(--text-muted);
}

.cheatsheet__note[b-0zzz4247ka] {
    margin: 0;
    padding: var(--space-3);
    border-left: 2px solid var(--accent);
    background-color: var(--bg);
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.cheatsheet__panel code[b-0zzz4247ka] {
    padding: 0.1em 0.35em;
    background-color: var(--bg);
    border-radius: var(--radius-1);
    font-size: 0.9em;
}

.cheatsheet__fields code[b-0zzz4247ka],
.cheatsheet__legend dt code[b-0zzz4247ka],
.cheatsheet__examples dt code[b-0zzz4247ka] {
    background: none;
    padding: 0;
}
/* /Components/ConversionCard.razor.rz.scp.css */
.conversion-card[b-fij1670jea] {
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-3);
}

.conversion-card__head[b-fij1670jea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.conversion-card__flavour[b-fij1670jea] {
    font-weight: 600;
}

.conversion-card__copy[b-fij1670jea] {
    font: inherit;
    font-size: 0.8125rem;
    padding: var(--space-1) var(--space-3);
    color: var(--text);
    background-color: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    cursor: pointer;
}

.conversion-card__copy:hover[b-fij1670jea] {
    background-color: var(--bg-hover);
}

.conversion-card__copy:focus-visible[b-fij1670jea] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Override the prose inline-code surface — this card already provides one. */
.conversion-card__expr[b-fij1670jea] {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text);
    background: none;
    padding: 0;
}

.conversion-card__desc[b-fij1670jea] {
    margin: var(--space-2) 0;
    color: var(--text-muted);
}

.conversion-card__runs-label[b-fij1670jea] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-subtle);
}

.conversion-card__runs[b-fij1670jea] {
    margin: var(--space-1) 0 var(--space-2);
    padding-left: var(--space-5);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.conversion-card__runs-empty[b-fij1670jea] {
    margin: var(--space-1) 0 var(--space-2);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.conversion-card__note[b-fij1670jea] {
    margin: 0 0 var(--space-2);
    color: var(--text);
}
/* /Components/CronExample.razor.rz.scp.css */
.cron-example[b-dwxfsf7jml] {
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-3);
}

.cron-example__head[b-dwxfsf7jml] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

/* Override .prose code (this card already provides the surface). */
.cron-example__expr[b-dwxfsf7jml] {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text);
    background: none;
    padding: 0;
}

.cron-example__link[b-dwxfsf7jml] {
    font-size: 0.875rem;
    white-space: nowrap;
}

.cron-example__caption[b-dwxfsf7jml] {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}
/* /Components/DayCell.razor.rz.scp.css */
/* A single day in the month grid. The date sits top-left, the fire-density dot is centred. Every
   colour, size and radius comes from the design tokens; the dot's amber is the one app accent, used
   here as a heatmap — denser days get a larger dot and a stronger amber glow. */
.day-cell[b-qy0rc18l7y] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: var(--space-1);
    border-radius: var(--radius-2);
    background-color: var(--bg);
    cursor: pointer;
}

/* Interactive states (CRON-52): the whole cell is hoverable/focusable to open its day popover. */
.day-cell:hover[b-qy0rc18l7y] {
    background-color: var(--bg-hover);
}

.day-cell:focus-visible[b-qy0rc18l7y] {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

/* Leading/trailing days from the neighbouring months — present for grid alignment but visually quietened
   so the current month reads as the foreground. */
.day-cell--adjacent[b-qy0rc18l7y] {
    background-color: transparent;
    opacity: 0.45;
}

/* "Today" marker: a 1px ring drawn inside the cell so it never shifts the grid metrics. Structural
   (--border-strong), deliberately not amber, so amber stays reserved for fire signal. */
.day-cell--today[b-qy0rc18l7y] {
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.day-cell__date[b-qy0rc18l7y] {
    position: absolute;
    top: var(--space-1);
    left: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.75rem; /* 12px */
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-muted);
}

/* The fire-density dot. Base is a small amber disc; the intensity modifiers below grow it and add glow. */
.day-cell__dot[b-qy0rc18l7y] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--accent);
}

/* 1-9 fires: smallest dot, no glow. */
.day-cell__dot--s1[b-qy0rc18l7y] {
    width: 4px;
    height: 4px;
}

/* 10-49 fires: 6px, 30% glow. */
.day-cell__dot--s2[b-qy0rc18l7y] {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* 50-199 fires: 8px, 50% glow. */
.day-cell__dot--s3[b-qy0rc18l7y] {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* 200+ fires: largest dot, full glow. */
.day-cell__dot--s4[b-qy0rc18l7y] {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* The next upcoming fire: a crisp amber halo around whatever size the day's density gives it, so the
   one fire that matters most is unmistakable among the heatmap. */
.day-cell__dot--next[b-qy0rc18l7y] {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent),
        0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ── Compare mode (CRON-59): per-day diff marker ─────────────────────────── */
/* The fill sits behind the date and the centred counts (both positioned, so they paint above it).
   Left/remove is hatched and right/add is solid, so the two read apart without relying on red vs green
   — and a day that fires on both sides is split down the middle (hatched left half, solid right half). */
.day-cell__diff[b-qy0rc18l7y] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.day-cell__diff--left[b-qy0rc18l7y],
.day-cell__diff-half--left[b-qy0rc18l7y] {
    background-color: var(--diff-remove-bg);
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0 3px,
        color-mix(in srgb, var(--diff-remove) 24%, transparent) 3px 5px);
}

.day-cell__diff--right[b-qy0rc18l7y],
.day-cell__diff-half--right[b-qy0rc18l7y] {
    background-color: var(--diff-add-bg);
}

.day-cell__diff--shared[b-qy0rc18l7y] {
    background-color: var(--bg-hover);
}

.day-cell__diff--both[b-qy0rc18l7y] {
    display: flex;
}

.day-cell__diff-half[b-qy0rc18l7y] {
    flex: 1 1 50%;
}

/* The centred signed counts, painted above the fill. */
.day-cell__diff-counts[b-qy0rc18l7y] {
    position: relative;
    display: flex;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem; /* 11px */
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.day-cell__diff-count--left[b-qy0rc18l7y] {
    color: var(--diff-remove);
}

.day-cell__diff-count--right[b-qy0rc18l7y] {
    color: var(--diff-add);
}

.day-cell__diff-count--shared[b-qy0rc18l7y] {
    color: var(--text-muted);
}
/* /Components/DayDetailPanel.razor.rz.scp.css */
/* The pinned-day side panel. Sits beside the grid (the .calendar flex wrapper in CalendarGrid lays it
   out); on narrow viewports that wrapper stacks and this goes full-width. Tokens only. */
.day-panel[b-5114ax3ad0] {
    flex: 0 0 15rem;
    align-self: flex-start;
    box-sizing: border-box;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    background-color: var(--bg-elevated);
}

/* When the .calendar wrapper stacks (≤ 768px), the panel drops below the grid at full width. */
@media (max-width: 48rem) {
    .day-panel[b-5114ax3ad0] {
        flex-basis: auto;
        width: 100%;
    }
}

.day-panel__header[b-5114ax3ad0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.day-panel__heading[b-5114ax3ad0] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.day-panel__times[b-5114ax3ad0] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 22rem;
    overflow-y: auto;
}

.day-panel__row[b-5114ax3ad0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border);
}

.day-panel__row:last-child[b-5114ax3ad0] {
    border-bottom: 0;
}

.day-panel__time[b-5114ax3ad0] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.day-panel__copy[b-5114ax3ad0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-1);
    background: none;
    color: var(--text-subtle);
    cursor: pointer;
}

.day-panel__copy:hover[b-5114ax3ad0] {
    color: var(--accent);
}

.day-panel__copy:focus-visible[b-5114ax3ad0] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.day-panel__empty[b-5114ax3ad0] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.day-panel__status[b-5114ax3ad0] {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text-muted);
}
/* /Components/DayPopover.razor.rz.scp.css */
/* The day preview popover. Anchored above the active cell via CSS anchor positioning (no JS); the
   try-fallbacks flip it below / to the side so it never runs off the viewport. `position: fixed`
   keeps it out of the grid's clipping. All values from the design tokens. */
.day-popover[b-gei9pl5h5y] {
    position: fixed;
    position-anchor: --active-day;
    position-area: top center;
    position-try-fallbacks: flip-block, flip-inline;
    z-index: 50;
    width: max-content;
    min-width: 8rem;
    max-width: 15rem;
    max-height: 13rem;
    margin-block: 0 var(--space-2);
    overflow-y: auto;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-3);
    background-color: var(--bg-elevated);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--bg) 65%, transparent);
}

.day-popover__heading[b-gei9pl5h5y] {
    margin: 0 0 var(--space-1);
    font-family: var(--font-sans);
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.day-popover__times[b-gei9pl5h5y] {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    color: var(--text);
}

.day-popover__more[b-gei9pl5h5y] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text-subtle);
}

.day-popover__pin[b-gei9pl5h5y] {
    margin-top: var(--space-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    cursor: pointer;
}

.day-popover__pin:hover[b-gei9pl5h5y] {
    color: var(--accent-hover);
}

.day-popover__pin:focus-visible[b-gei9pl5h5y] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-1);
}

/* ── Compare mode (CRON-59): Only left / Only right / Both sections ──────── */
.day-popover__section + .day-popover__section[b-gei9pl5h5y] {
    margin-top: var(--space-2);
}

.day-popover__section-title[b-gei9pl5h5y] {
    margin: 0 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: 0.6875rem; /* 11px */
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.day-popover__section--left .day-popover__section-title[b-gei9pl5h5y] {
    color: var(--diff-remove);
}

.day-popover__section--right .day-popover__section-title[b-gei9pl5h5y] {
    color: var(--diff-add);
}

.day-popover__section--shared .day-popover__section-title[b-gei9pl5h5y] {
    color: var(--text-muted);
}

.day-popover__none[b-gei9pl5h5y] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-style: italic;
    color: var(--text-subtle);
}
/* /Components/DiffSummaryBar.razor.rz.scp.css */
/* One logical line above the (future) compare calendar: the count pills and the window range.
   Wraps cleanly at narrow widths so it stays usable down to 320px. */
.diff-summary[b-uairl2i4uc] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) 0;
}

.diff-summary__pills[b-uairl2i4uc] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Count badges — not status pills, so capped at the 6px radius ceiling (rounded-full is reserved). */
.diff-summary__pill[b-uairl2i4uc] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.diff-summary__sign[b-uairl2i4uc] {
    font-weight: 600;
    font-family: var(--font-mono);
}

.diff-summary__pill--left[b-uairl2i4uc] {
    color: var(--diff-remove);
    background: var(--diff-remove-bg);
    border-color: color-mix(in srgb, var(--diff-remove) 35%, transparent);
}

.diff-summary__pill--right[b-uairl2i4uc] {
    color: var(--diff-add);
    background: var(--diff-add-bg);
    border-color: color-mix(in srgb, var(--diff-add) 35%, transparent);
}

.diff-summary__pill--shared[b-uairl2i4uc] {
    color: var(--text-muted);
    background: var(--bg-elevated);
}

.diff-summary__window[b-uairl2i4uc] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.diff-summary__hint[b-uairl2i4uc] {
    color: var(--text-muted);
    font-style: italic;
}
/* /Components/EdgeCaseBanners.razor.rz.scp.css */
/* The inline "Jump to month" affordance inside the far-future banner. Reads as a link, not a button. */
.edge-case-banners__action[b-1uz1nldh9b] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.edge-case-banners__action:hover[b-1uz1nldh9b] {
    color: var(--accent-hover);
}
/* /Components/ErrorPanel.razor.rz.scp.css */
/* The error panel sits below the expression input and lists each parse error anchored to its
   offending token. Colours come from the semantic tokens only — danger for hard faults, warning
   for the softer conflict/unsupported cases — never hardcoded. */
.error-panel[b-ncjcksyacz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 40rem;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-2);
    background-color: var(--bg-elevated);
}

.error-panel__row[b-ncjcksyacz] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

/* The category badge: a small uppercase pill whose tint signals the error class. */
.error-panel__badge[b-ncjcksyacz] {
    flex: none;
    align-self: center;
    padding: 0 var(--space-2);
    border-radius: var(--radius-1);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-text);
}

.error-panel__badge--danger[b-ncjcksyacz] {
    background-color: var(--danger);
}

.error-panel__badge--warning[b-ncjcksyacz] {
    background-color: var(--warning);
}

/* The offending field, picked out in the monospace face that matches the input. */
.error-panel__token[b-ncjcksyacz] {
    flex: none;
    padding: 0 var(--space-1);
    border-radius: var(--radius-1);
    background-color: var(--bg-input);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--danger);
}

.error-panel__message[b-ncjcksyacz] {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text);
}

/* The one-click fix: the single amber accent, since it is the primary action offered here. */
.error-panel__convert[b-ncjcksyacz] {
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-2);
    background-color: var(--accent);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--accent-text);
    cursor: pointer;
}

.error-panel__convert:hover[b-ncjcksyacz] {
    background-color: var(--accent-hover);
}

.error-panel__convert:focus-visible[b-ncjcksyacz] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* The cheatsheet link: quiet, text-only — it opens the grammar reference (panel: later ticket). */
.error-panel__cheatsheet[b-ncjcksyacz] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.error-panel__cheatsheet:hover[b-ncjcksyacz] {
    color: var(--text);
}

.error-panel__cheatsheet:focus-visible[b-ncjcksyacz] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* The Build-mode nudge: shown only when the input looks like prose, so it points to the guided form. */
.error-panel__build[b-ncjcksyacz] {
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--accent);
    text-decoration: underline;
}

.error-panel__build:hover[b-ncjcksyacz] {
    color: var(--accent-hover);
}

.error-panel__build:focus-visible[b-ncjcksyacz] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
/* /Components/ExpressionInput.razor.rz.scp.css */
.expression-input[b-e4y3zwu674] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    max-width: 40rem;
}

.expression-input__label[b-e4y3zwu674] {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* The field is the bordered box; its border colour is the validation signal. The two text layers
   fill it absolutely and share identical box metrics so they stay glyph-aligned. */
.expression-input__field[b-e4y3zwu674] {
    position: relative;
    box-sizing: border-box;
    height: 56px;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-3);
    background-color: var(--bg-input);
    overflow: hidden;
    transition: border-color 120ms ease;
}

.expression-input__field:focus-within[b-e4y3zwu674] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* neutral empty -> amber pending -> green valid -> red invalid */
.expression-input__field--empty[b-e4y3zwu674] {
    border-color: var(--border-strong);
}

.expression-input__field--pending[b-e4y3zwu674] {
    border-color: var(--warning);
}

.expression-input__field--valid[b-e4y3zwu674] {
    border-color: var(--success);
}

.expression-input__field--invalid[b-e4y3zwu674] {
    border-color: var(--danger);
}

.expression-input__box[b-e4y3zwu674],
.expression-input__backdrop[b-e4y3zwu674] {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
    padding: 0 var(--space-3);
    border: 0;
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    white-space: pre;
    font-variant-ligatures: none;
}

/* The real input: transparent text (the backdrop paints it) but a visible amber caret. The OS
   supplies the 2px width and 530ms blink. */
.expression-input__box[b-e4y3zwu674] {
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: transparent;
    color: transparent;
    caret-color: var(--accent);
    overflow-x: auto;
}

.expression-input__box:focus[b-e4y3zwu674] {
    outline: none; /* the ring lives on the field wrapper via :focus-within */
}

.expression-input__box[b-e4y3zwu674]::placeholder {
    color: var(--text-subtle);
}

/* The painted text + error squiggles. Behind the input and inert to the pointer. */
.expression-input__backdrop[b-e4y3zwu674] {
    z-index: 0;
    display: flex;
    align-items: center;
    color: var(--text);
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.expression-input__error[b-e4y3zwu674] {
    text-decoration: underline wavy var(--danger);
    text-decoration-skip-ink: none;
    text-underline-offset: 4px;
}

/* Reserve a line so resolving an error doesn't shift the layout. */
.expression-input__feedback[b-e4y3zwu674] {
    min-height: 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--danger);
}

.expression-input__try[b-e4y3zwu674] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-muted);
    cursor: pointer;
}

.expression-input__try:hover[b-e4y3zwu674] {
    color: var(--text);
}

.expression-input__try code[b-e4y3zwu674] {
    font-family: var(--font-mono);
    color: var(--accent);
}
/* /Components/FlavourSelector.razor.rz.scp.css */
/* The segmented control for the cron dialect. The track is a fixed-height rail with 4px inner
   padding; the selected option is picked out by a single sliding indicator that translateX-es
   between the equal-width segments. All colours/sizes come from the design tokens. */
.flavour-selector[b-udqw7de9ka] {
    display: inline-block;
    max-width: 100%;
}

/* The rail. position: relative anchors the absolutely-positioned indicator; the 4px padding is the
   inset the indicator sits within (so it never touches the rail edge). */
.flavour-selector__track[b-udqw7de9ka] {
    position: relative;
    display: flex;
    box-sizing: border-box;
    height: 40px;
    padding: var(--space-1); /* 4px inner padding */
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    background-color: var(--bg-input);
}

/* The pill that marks the current segment. Its width is one segment and it slides by whole multiples
   of that width via translateX. --segment is the inner width (the track minus its 4px padding on
   both sides) divided across the three segments, so width and offset use one shared figure. The
   top/left/bottom inset honours the 4px track padding so it fills the rail's inner height. */
.flavour-selector__indicator[b-udqw7de9ka] {
    --segment: calc((100% - var(--space-1) * 2) / 3);

    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    bottom: var(--space-1);
    width: var(--segment);
    border-radius: var(--radius-1);
    background-color: var(--border-strong);
    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}

.flavour-selector__indicator[data-index="1"][b-udqw7de9ka] {
    transform: translateX(100%);
}

.flavour-selector__indicator[data-index="2"][b-udqw7de9ka] {
    transform: translateX(200%);
}

/* Each option pairs its selectable button with the quiet (?) cheatsheet trigger. equal flex share
   keeps the three segments the same width so the indicator's per-segment maths holds. */
.flavour-selector__segment[b-udqw7de9ka] {
    position: relative;
    z-index: 1; /* above the indicator */
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.flavour-selector__option[b-udqw7de9ka] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
}

.flavour-selector__option--selected[b-udqw7de9ka] {
    font-weight: 500;
    color: var(--text);
}

.flavour-selector__option:focus-visible[b-udqw7de9ka] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-1);
}

/* The (?) cheatsheet trigger: small and muted so it never competes with the dialect name. */
.flavour-selector__help[b-udqw7de9ka] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    line-height: 1;
    color: var(--text-subtle);
    cursor: pointer;
}

.flavour-selector__help:hover[b-udqw7de9ka] {
    color: var(--text-muted);
}

.flavour-selector__help:focus-visible[b-udqw7de9ka] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-1);
}

/* Honour reduced-motion: the indicator still moves, just without the slide. */
@media (prefers-reduced-motion: reduce) {
    .flavour-selector__indicator[b-udqw7de9ka] {
        transition: none;
    }
}
/* /Components/HumanDescription.razor.rz.scp.css */
/* A quiet, secondary line beneath the input — muted so it reads as supporting prose, not a heading. */
.human-description[b-a0x7r6lnqs] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
}
/* /Components/IconButton.razor.rz.scp.css */
.icon-button[b-5536ewkush] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-2);
    background-color: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.icon-button:hover:not(:disabled)[b-5536ewkush] {
    background-color: var(--bg-hover);
    color: var(--text);
}

.icon-button:focus-visible[b-5536ewkush] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.icon-button:disabled[b-5536ewkush] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/ShareLinkButton.razor.rz.scp.css */
.share-link[b-27d61l7cxq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.share-link__button[b-27d61l7cxq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    background-color: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    cursor: pointer;
}

.share-link__button:hover[b-27d61l7cxq] {
    background-color: var(--bg-hover);
}

.share-link__button:focus-visible[b-27d61l7cxq] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.share-link__button--copied[b-27d61l7cxq] {
    border-color: var(--accent);
    color: var(--accent);
    animation: share-link-pulse-b-27d61l7cxq 0.6s ease-out;
}

@keyframes share-link-pulse-b-27d61l7cxq {
    from {
        box-shadow: 0 0 0 0 var(--accent);
    }

    to {
        box-shadow: 0 0 0 0.625rem transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .share-link__button--copied[b-27d61l7cxq] {
        animation: none;
    }
}

.share-link__icon[b-27d61l7cxq] {
    flex-shrink: 0;
}

.share-link__feedback[b-27d61l7cxq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.share-link__status[b-27d61l7cxq] {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
}

.share-link__status--ok[b-27d61l7cxq] {
    color: var(--accent);
}

.share-link__status--error[b-27d61l7cxq] {
    color: var(--danger);
}

.share-link__fallback[b-27d61l7cxq] {
    width: 18rem;
    max-width: 50vw;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    background-color: var(--bg-input);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
/* /Components/TextInput.razor.rz.scp.css */
.text-input[b-764ebw7ze0] {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    background-color: var(--bg-input);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.text-input[b-764ebw7ze0]::placeholder {
    color: var(--text-subtle);
}

.text-input:focus[b-764ebw7ze0] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Cron expressions: monospace, ligatures off so "*/" etc. don't fuse. */
.text-input--mono[b-764ebw7ze0] {
    font-family: var(--font-mono);
    font-variant-ligatures: none;
}
/* /Components/TimezoneSelector.razor.rz.scp.css */
/* Two zone pickers side by side; each is a labelled type-ahead combobox with the selected zone's
   current offset and a DST flag, plus a popup listbox of ranked matches. */
.timezone-selector[b-zcsbuq88j5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    width: 100%;
    max-width: 40rem;
}

.timezone-selector__field[b-zcsbuq88j5] {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.timezone-selector__label[b-zcsbuq88j5] {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.timezone-selector__hint[b-zcsbuq88j5] {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-subtle);
}

/* The current selection summary: zone id, offset chip, and (when applicable) the DST warning. */
.timezone-selector__current[b-zcsbuq88j5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text);
}

.timezone-selector__zone-id[b-zcsbuq88j5] {
    font-weight: 600;
}

.timezone-selector__offset[b-zcsbuq88j5],
.timezone-selector__option-offset[b-zcsbuq88j5] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.timezone-selector__dst[b-zcsbuq88j5],
.timezone-selector__option-dst[b-zcsbuq88j5] {
    font-size: 0.875rem;
    line-height: 1;
}

/* The combobox: a text input that, when open, anchors a listbox below it. */
.timezone-selector__combo[b-zcsbuq88j5] {
    position: relative;
    margin-top: var(--space-1);
}

.timezone-selector__input[b-zcsbuq88j5] {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 var(--space-3);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-3);
    background-color: var(--bg-input);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--text);
}

.timezone-selector__input[b-zcsbuq88j5]::placeholder {
    color: var(--text-subtle);
}

.timezone-selector__input:focus[b-zcsbuq88j5] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.timezone-selector__listbox[b-zcsbuq88j5] {
    position: absolute;
    z-index: 10;
    inset-inline: 0;
    top: calc(100% + var(--space-1));
    max-height: 16rem;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-3);
    background-color: var(--bg-elevated);
    box-shadow: 0 8px 24px rgb(0 0 0 / 30%);
}

.timezone-selector__option[b-zcsbuq88j5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}

.timezone-selector__option:hover[b-zcsbuq88j5],
.timezone-selector__option--active[b-zcsbuq88j5] {
    background-color: var(--bg-hover);
}

.timezone-selector__option-id[b-zcsbuq88j5] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timezone-selector__empty[b-zcsbuq88j5] {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-muted);
}
/* /Components/Tooltip.razor.rz.scp.css */
.tooltip[b-oqgem1x0p8] {
    display: inline-flex;
}

.tooltip__trigger[b-oqgem1x0p8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-1);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tooltip__trigger:focus-visible[b-oqgem1x0p8] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.tooltip__content[b-oqgem1x0p8] {
    /* Reset the popover UA centering, then anchor above the trigger.
       Browsers without CSS anchor positioning ignore the anchor props and
       fall back to the top-layer default position. */
    margin: 0;
    inset: auto;
    max-width: 240px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    background-color: var(--bg-elevated);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.4;
    position-area: top center;
    margin-bottom: var(--space-2);
}
/* /Components/WeekView.razor.rz.scp.css */
/* WeekView: an elevated card with a week-nav header and a 7-day × 24-hour grid. The grid keeps a
   minimum width so the day columns stay legible and scrolls horizontally on narrow viewports. Pills are
   absolutely positioned within their hour cell by minute. Tokens only. */
.week-view[b-gfr6xyrbts] {
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    background-color: var(--bg-elevated);
    padding: var(--space-4);
}

.week-view__nav[b-gfr6xyrbts] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.week-view__range[b-gfr6xyrbts] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.week-view__scroll[b-gfr6xyrbts] {
    overflow-x: auto;
}

.week-view__grid[b-gfr6xyrbts] {
    display: grid;
    grid-template-columns: auto repeat(7, minmax(2.5rem, 1fr));
    min-width: 38rem; /* keep seven day columns legible; the container scrolls below ~768px */
}

/* The empty corner above the hour gutter. */
.week-view__corner[b-gfr6xyrbts] {
    border-bottom: 1px solid var(--border);
}

/* Day-of-week + date column headers. */
.week-view__day-head[b-gfr6xyrbts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: var(--space-1) var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.week-view__day-head--today[b-gfr6xyrbts] {
    background-color: color-mix(in srgb, var(--accent) 8%, transparent);
}

.week-view__dow[b-gfr6xyrbts] {
    font-family: var(--font-sans);
    font-size: 0.625rem; /* 10px */
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.week-view__date[b-gfr6xyrbts] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Hour gutter labels, aligned to their row. */
.week-view__hour[b-gfr6xyrbts] {
    padding: 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.4rem;
    text-align: right;
    color: var(--text-subtle);
    border-bottom: 1px solid var(--border);
}

/* Each hour × day cell hosts the minute-positioned pills. */
.week-view__cell[b-gfr6xyrbts] {
    position: relative;
    height: 1.4rem;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.week-view__cell--today[b-gfr6xyrbts] {
    background-color: color-mix(in srgb, var(--accent) 5%, transparent);
}

.week-view__pill[b-gfr6xyrbts] {
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 1px;
    background-color: var(--accent);
}

/* A whole busy hour: one amber bar standing in for the individual pills. */
.week-view__fill[b-gfr6xyrbts] {
    position: absolute;
    inset: 30% var(--space-1);
    border-radius: 1px;
    background-color: var(--accent);
    opacity: 0.85;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Layout shell — Observatory. Hierarchy via borders + bg contrast only; no shadows. */

.skip-link[b-1e20nn33cl] {
    position: absolute;
    left: var(--space-2);
    top: var(--space-2);
    z-index: 100;
    padding: var(--space-2) var(--space-3);
    background-color: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-3);
    text-decoration: none;
    transform: translateY(-250%);
    transition: transform 0.15s ease;
}

.skip-link:focus[b-1e20nn33cl] {
    transform: translateY(0);
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.layout[b-1e20nn33cl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.topnav[b-1e20nn33cl] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--space-4);
    background-color: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.topnav__brand[b-1e20nn33cl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text);
    text-decoration: none;
}

.topnav__logo[b-1e20nn33cl] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--accent);
}

.topnav__actions[b-1e20nn33cl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.topnav__link[b-1e20nn33cl] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-2);
    color: var(--text-muted);
    font-size: 0.9375rem;
    text-decoration: none;
}

.topnav__link:hover[b-1e20nn33cl] {
    color: var(--text);
}

.topnav__link:focus-visible[b-1e20nn33cl] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.topnav__hamburger[b-1e20nn33cl] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    background-color: transparent;
    color: var(--text);
    cursor: pointer;
}

.topnav__hamburger:focus-visible[b-1e20nn33cl] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.content[b-1e20nn33cl] {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}

.footer[b-1e20nn33cl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.footer__links[b-1e20nn33cl] {
    display: flex;
    gap: var(--space-4);
}

.footer__links a[b-1e20nn33cl],
.footer__kofi[b-1e20nn33cl] {
    color: var(--text-muted);
    text-decoration: none;
}

.footer__links a:hover[b-1e20nn33cl],
.footer__kofi:hover[b-1e20nn33cl] {
    color: var(--text);
}

.footer__links a:focus-visible[b-1e20nn33cl],
.footer__kofi:focus-visible[b-1e20nn33cl] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.footer__kofi[b-1e20nn33cl] {
    margin-left: auto;
}

/* Below 768px: collapse the nav actions behind a hamburger. */
@media (max-width: 767.98px) {
    .topnav__hamburger[b-1e20nn33cl] {
        display: inline-flex;
    }

    .topnav__actions[b-1e20nn33cl] {
        display: none;
        position: absolute;
        top: 56px;
        right: var(--space-2);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        min-width: 160px;
        padding: var(--space-2);
        background-color: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius-3);
        z-index: 90;
    }

    .topnav__actions--open[b-1e20nn33cl] {
        display: flex;
    }
}
/* /Layout/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-sr2ykx3y7v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    background-color: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.theme-toggle:hover[b-sr2ykx3y7v] {
    color: var(--text);
    background-color: var(--bg-hover);
}

.theme-toggle:focus-visible[b-sr2ykx3y7v] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
/* /Pages/About.razor.rz.scp.css */
/* Company legal-identity footer — required fine print (company no., ICO, VAT), set off from the
   prose above and rendered muted so it reads as a colophon, not body copy. */
.company[b-rb1h8gufuo] {
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.company p[b-rb1h8gufuo] {
    margin: 0;
    line-height: 1.6;
}
/* /Pages/Build.razor.rz.scp.css */
.build .flavour-selector[b-2ujngwfvuy] {
    margin: var(--space-5) 0 var(--space-4);
}

.build__fields[b-2ujngwfvuy] {
    margin: var(--space-4) 0 var(--space-5);
    border-top: 1px solid var(--border);
}

.build__field[b-2ujngwfvuy] {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

.build__label[b-2ujngwfvuy] {
    color: var(--text);
    font-weight: 500;
}

.build__controls[b-2ujngwfvuy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.build__inline[b-2ujngwfvuy] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.build__select[b-2ujngwfvuy],
.build__number[b-2ujngwfvuy],
.build__text[b-2ujngwfvuy] {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text);
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-2);
    padding: var(--space-1) var(--space-2);
    min-height: 2.25rem;
}

.build__number[b-2ujngwfvuy] {
    width: 4.5rem;
    font-variant-numeric: tabular-nums;
}

.build__text[b-2ujngwfvuy] {
    min-width: 11rem;
    flex: 1 1 11rem;
}

.build__select:focus-visible[b-2ujngwfvuy],
.build__number:focus-visible[b-2ujngwfvuy],
.build__text:focus-visible[b-2ujngwfvuy] {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
    border-color: var(--accent);
}

.build__preview[b-2ujngwfvuy] {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background-color: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
}

.build__preview-label[b-2ujngwfvuy] {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.build__expression[b-2ujngwfvuy] {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--accent);
    word-break: break-all;
}

.build__description[b-2ujngwfvuy] {
    margin: var(--space-3) 0 0;
    color: var(--text);
}

.build__problem[b-2ujngwfvuy] {
    margin: var(--space-3) 0 0;
    color: var(--warning);
}

.build__actions[b-2ujngwfvuy] {
    margin-top: var(--space-4);
}

@media (max-width: 32rem) {
    .build__field[b-2ujngwfvuy] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
        align-items: stretch;
    }
}
/* /Pages/CompareSyntaxes.razor.rz.scp.css */
.compare-syntaxes__cards[b-nanuszqzq1] {
    margin-top: var(--space-5);
}

.compare-syntaxes__hint[b-nanuszqzq1] {
    margin-top: var(--space-4);
    color: var(--text-muted);
}
/* /Pages/Cookbook.razor.rz.scp.css */
.cookbook__search[b-zgv3895f87] {
    width: 100%;
    margin: var(--space-4) 0 var(--space-6);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--text);
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-3);
}

.cookbook__search:focus-visible[b-zgv3895f87] {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.cookbook__list[b-zgv3895f87] {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}

.cookbook__list li[b-zgv3895f87] {
    margin-bottom: var(--space-3);
}

.cookbook__list a[b-zgv3895f87] {
    font-weight: 600;
}

.cookbook__summary[b-zgv3895f87] {
    display: block;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.cookbook__empty[b-zgv3895f87] {
    color: var(--text-muted);
}

.cookbook-entry__cards[b-zgv3895f87] {
    margin: var(--space-5) 0;
}
/* /Pages/Credits.razor.rz.scp.css */
.credits__table[b-lkfzevy9re] {
    margin: 0 0 var(--space-5);
    overflow-x: auto;
}

.credits__table table[b-lkfzevy9re] {
    margin: 0;
}

/* Long, dotted package ids (e.g. Microsoft.AspNetCore.Components.WebAssembly.DevServer)
   have no natural break points; let them wrap so the Copyright column is never clipped. */
.credits__table td:first-child[b-lkfzevy9re] {
    overflow-wrap: anywhere;
}
/* /Pages/Home.razor.rz.scp.css */
/* Compare mode: the two expression inputs sit side by side on wider viewports and stack on narrow ones. */
.home__compare[b-h2kawfhkzi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 40rem) {
    .home__compare[b-h2kawfhkzi] {
        grid-template-columns: 1fr;
    }
}