.wh-page {
    display: grid;
    gap: var(--space-5);
    max-width: 1360px;
    margin-inline: auto;
}
.wh-page, .wh-dialog { font-family: var(--font-family); }
.wh-narrow { max-width: 640px; width: 100%; }
.wh-heading, .wh-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.wh-page h1, .wh-page h2, .wh-dialog h2 { margin: 0; color: var(--color-heading); line-height: 1.2; }
.wh-page h1 { font-size: clamp(1.75rem, 3.1vw, 2.25rem); letter-spacing: -.035em; }
.wh-page h2, .wh-dialog h2 { font-size: 1.15rem; letter-spacing: -.015em; }
.wh-page p, .wh-dialog p { margin: 0; }
.wh-heading h1 + p, .wh-section-head h2 + p, .wh-padded h2 + p, .wh-clock-head h2 + p {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: .875rem;
}
.wh-back {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
    color: var(--color-accent);
    font-weight: 650;
    text-decoration: none;
}
.wh-back:hover { text-decoration: underline; }
.wh-panel {
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}
.wh-padded, .wh-period, .wh-clock, .wh-dialog { padding: clamp(16px, 3vw, 24px); }
.wh-period, .wh-inline, .wh-actions, .wh-presets {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.wh-period .wh-alert { flex-basis: 100%; }
.wh-inline { margin-top: var(--space-4); }
.wh-end { justify-content: flex-end; }
.wh-btn:focus-visible, .wh-back:focus-visible, .wh-table-wrap:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}
.wh-page label, .wh-dialog label { display: grid; gap: 6px; color: var(--color-text); font-weight: 650; font-size: .875rem; }
.wh-page input:not([type="checkbox"], [type="radio"]), .wh-page textarea, .wh-page select,
.wh-dialog input, .wh-dialog textarea, .wh-dialog select {
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 500;
}
.wh-page textarea, .wh-dialog textarea { resize: vertical; }
.wh-page :is(input, select, textarea):focus-visible, .wh-dialog :is(input, select, textarea):focus-visible {
    border-color: var(--color-brand);
    outline: none;
    box-shadow: var(--focus-ring);
}
label.wh-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    cursor: pointer;
}
.wh-check input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--color-brand); }
.wh-totals {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}
.wh-total { display: grid; gap: var(--space-2); padding: clamp(12px, 2vw, 20px); }
.wh-total dt { font-size: .8rem; font-weight: 650; color: var(--color-text-muted); }
.wh-total dd { margin: 0; color: var(--color-heading); font-size: clamp(1.15rem, 2.4vw, 1.65rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.wh-break { background: var(--warn-50); border-color: transparent; }
.wh-break dd { color: var(--warn-700); }
.wh-net { background: var(--ok-50); border-color: transparent; }
.wh-net dd { color: var(--ok-700); }
.wh-report .wh-section-head { padding: 18px 20px; }
.wh-table-wrap { overflow-x: auto; }
.wh-table { width: 100%; border-collapse: collapse; text-align: start; font-size: .875rem; }
.wh-table th, .wh-table td { padding: 12px 16px; border-top: 1px solid var(--color-border); text-align: start; vertical-align: top; }
.wh-table th { background: var(--n-50); color: var(--color-text-muted); font-size: .75rem; }
.wh-table td:first-child { white-space: nowrap; }
.wh-table .wh-comment { min-width: 140px; max-width: 300px; overflow-wrap: anywhere; white-space: pre-wrap; }
.wh-badge { display: inline-flex; padding: 4px 10px; border-radius: var(--radius-full); background: var(--n-100); color: var(--color-text-muted); font-size: .75rem; font-weight: 750; }
.wh-open { background: var(--ok-50); color: var(--ok-700); }
.wh-state { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-text-muted); }
.wh-skeleton { justify-items: stretch; }
.wh-skeleton .skeleton-shape { display: block; height: 20px; width: 100%; border-radius: var(--radius-sm); }
.wh-skeleton .skeleton-shape:first-of-type { width: 38%; }
.wh-alert, .wh-success, .wh-location { border-radius: var(--radius-md); padding: 12px 14px; font-size: .875rem; }
.wh-alert { color: var(--err-700); background: var(--err-50); }
.wh-success { color: var(--ok-700); background: var(--ok-50); }
.wh-location { color: var(--color-text-muted); background: var(--n-100); }
.wh-form, .wh-clock { display: grid; gap: var(--space-4); }
.wh-clock-head { display: flex; align-items: center; gap: var(--space-3); }
.wh-clock-head > div { flex: 1; }
.wh-clock-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: var(--radius-lg);
    background: var(--color-brand-soft);
    color: var(--color-accent);
}
.wh-clock-icon svg { width: 26px; height: 26px; }
.wh-elapsed {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    padding: var(--space-5);
    background: var(--plum-50);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-accent);
}
.wh-elapsed strong { font-size: clamp(2.2rem, 8vw, 3.25rem); color: var(--color-heading); line-height: 1; font-variant-numeric: tabular-nums; }
.wh-elapsed span, .wh-clock small { color: var(--color-text-muted); font-weight: 500; font-size: .8rem; }
.wh-wide { width: 100%; min-height: 48px; }
.wh-fields, .wh-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.wh-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.wh-dialog > header { margin-bottom: var(--space-4); }
.wh-policy-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; }
.wh-policy-list li { display: flex; justify-content: space-between; gap: var(--space-2); align-items: start; padding-block: var(--space-3); border-top: 1px solid var(--color-border); }
.wh-policy-list p { color: var(--color-text-muted); font-size: .8rem; margin-top: 4px; }
.wh-format { display: flex; gap: var(--space-5); margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 4px 16px; }
.wh-format legend { font-weight: 700; color: var(--color-heading); padding-inline: 6px; }
@media (max-width: 640px) {
    .wh-page { gap: var(--space-4); }
    .wh-settings-grid, .wh-fields { grid-template-columns: minmax(0, 1fr); }
    .wh-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wh-presets, .wh-period .wh-alert { grid-column: 1 / -1; }
    .wh-period > button { grid-column: 1 / -1; }
    .wh-totals { gap: var(--space-2); }
    .wh-total dd { font-size: 1rem; }
    .wh-total dt { overflow-wrap: anywhere; }
    .wh-heading .wh-actions .wh-primary { order: -1; }
    .wh-table, .wh-table tbody { display: block; }
    .wh-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .wh-table tbody tr { display: grid; gap: 8px; padding: 16px; border-top: 1px solid var(--color-border); }
    .wh-table td {
        display: grid;
        grid-template-columns: minmax(98px, .85fr) minmax(0, 1.15fr);
        gap: var(--space-2);
        padding: 0;
        border: 0;
        overflow-wrap: anywhere;
    }
    .wh-table td::before { content: attr(data-label); color: var(--color-text-muted); font-size: .8rem; font-weight: 650; }
    .wh-table .wh-comment { min-width: 0; max-width: none; white-space: normal; }
    .wh-table .wh-comment > span { white-space: pre-wrap; }
    .wh-table .wh-row-action { display: flex; justify-content: flex-end; }
}