/*
 * Easier, same look (Hershey Oct 23 2026: "have back the previous design").
 * Only behaviour helpers here -- the look stays as style.css draws it:
 *
 *  1. Working state (static/js/ease.js): a thin bar runs along the top while
 *     the next page loads, and the tapped button / link greys out with a
 *     small spinner, so a screen never looks frozen. (.is-busy is the
 *     attendance screens' own state; .ease-busy is this one.)
 *  2. Sign-in sheet: no checklist on top, no step arrows.
 *  3. Quick "Add a child" form and its finish-later card.
 *  4. The kiosk's top bar: Children | Staff | Visitors (templates/_kiosk_tabs.html).
 *  5. The health check: one big tap.
 */
:root { --ease-text: 1rem; --ease-text-lg: 1.25rem; }

/* --- 1. working state ------------------------------------------------------ */
.ease-busy { position: relative; pointer-events: none; opacity: .72; }
.ease-busy::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -.15em;
    animation: ease-spin .7s linear infinite;
}
.menu-button.ease-busy::after, .kiosk-tab.ease-busy::after,
.portal-nav-link.ease-busy::after {
    position: absolute;
    top: 14px;
    right: 14px;
    margin: 0;
}
.pin-keypad.ease-busy, .keypad.ease-busy { opacity: .5; }
.pin-keypad.ease-busy::after, .keypad.ease-busy::after { display: none; }
.ease-pagebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--primary);
    z-index: 10000;
    transition: width 8s cubic-bezier(.1, .7, .2, 1);
    pointer-events: none;
}
.ease-pagebar.is-on { width: 85%; }
@keyframes ease-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ease-busy::after { animation: none; }
    .ease-pagebar { transition: none; }
}


/* --- 2. sign-in / sign-out sheet ------------------------------------------ */
#tapSheet .step-need::before { content: none; }
#tapSheet .modal-footer { flex-wrap: wrap; }
#tapSheet .sheet-save-why { flex: 1 1 100%; order: -1; margin: 0; text-align: center; }
/* One view, no steps: no step numbers; the face and the big name on top;
   one big green "Sign in" / red "Sign out" at the bottom. */
#tapSheet .step-num { display: none; }
#tapSheet .modal-header { gap: 12px; align-items: center; }
#tapSheetTitle { font-size: 1.6rem; flex: 1; }
.tap-sheet-photo:empty { display: none; }
.tap-sheet-photo { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: inline-flex; }
.tap-sheet-photo > * { width: 56px !important; height: 56px !important; font-size: 1.3rem; }
.tap-sheet-photo img { object-fit: cover; }
#tapSheet #tapSave { flex: 1 1 auto; min-height: 60px; font-size: 1.3rem; font-weight: 700; background: var(--success-strong); border-color: var(--success-strong); color: #fff; }
#tapSheet.is-out #tapSave { background: var(--danger-strong); border-color: var(--danger-strong); }
#tapSheet #tapSave:disabled { opacity: .45; }
#tapSheet #tapCancel { flex: 0 0 auto; }


/* --- 3. quick "Add a child" ------------------------------------------------ */
.quick-lead { font-size: var(--ease-text-lg); margin: 4px 0 12px; color: var(--dark); }
details.quick-more, details.pb-more, details.add-child-options {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    margin: 12px 0;
    padding: 0 16px;
}
details.quick-more > summary, details.pb-more > summary, details.add-child-options > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    color: var(--primary-strong);
}
details.pb-more { margin: 4px 0 8px; border-style: dashed; }
details.add-child-options { padding: 0 16px; }
details[open].quick-more, details[open].add-child-options { padding-bottom: 12px; }
.field-error {
    color: var(--danger-strong);
    font-weight: 600;
    margin: 4px 0 8px;
}
[aria-invalid="true"] { border-color: var(--danger-strong) !important; box-shadow: 0 0 0 2px rgba(168, 67, 46, .18); }
.finish-card {
    border: 1px solid var(--border);
    border-left: 6px solid var(--warning);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px 16px;
    margin: 12px 0;
}
.finish-card h2 { margin: 0 0 4px; font-size: var(--ease-text); }
.finish-card .portal-sub { margin: 0 0 6px; }
.finish-steps { margin: 0 0 10px; padding-left: 1.4em; }
.finish-steps li { margin: 4px 0; }
.finish-steps a { font-weight: 600; }


/* --- 4. kiosk top bar: Children | Staff | Visitors -------------------------
   The old home's tiles (white card, coloured edge and icon), side by side and
   always on top of the three lists; the one on screen is filled in. */
.kiosk-tabs {
    display: grid;
    grid-template-columns: repeat(var(--kiosk-tab-count, 3), 1fr);
    gap: 10px;
    margin: 8px 0 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    padding: 6px 0;
}
.kiosk-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 64px;
    padding: 8px 12px;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-bottom: 5px solid var(--kiosk-tab-accent, var(--primary));
    border-radius: var(--border-radius, 12px);
    color: var(--dark);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: var(--box-shadow);
    -webkit-tap-highlight-color: transparent;
}
.kiosk-tab i { font-size: 1.6rem; color: var(--kiosk-tab-accent, var(--primary)); }
.kiosk-tab:active { transform: scale(.98); }
.kiosk-tab:focus-visible { outline: 3px solid var(--primary-strong); outline-offset: 2px; }
.kiosk-tab.is-current {
    background: var(--kiosk-tab-strong, var(--primary-strong));
    color: #fff;
    border-color: var(--kiosk-tab-strong, var(--primary-strong));
}
.kiosk-tab.is-current i { color: #fff; }
.kiosk-tab.is-children { --kiosk-tab-accent: var(--primary); --kiosk-tab-strong: var(--primary-strong); }
.kiosk-tab.is-staff { --kiosk-tab-accent: var(--secondary); --kiosk-tab-strong: var(--success-strong); }
.kiosk-tab.is-visitors { --kiosk-tab-accent: var(--warning); --kiosk-tab-strong: var(--warning-strong); }
.kiosk-tabs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; }
.kiosk-tabs-head.menu-topbar { margin-bottom: 0; }
.kiosk-daycare-name { font-weight: 700; }
.kiosk-tab-label { white-space: nowrap; }
.kiosk-tabs-head .menu-title { margin: 0; font-size: 1.4rem; }
@media (max-width: 640px) {
    .kiosk-tabs-head { flex-wrap: nowrap; }
    .kiosk-tabs-head .menu-title { font-size: 1.15rem; }
    .kiosk-tabs-head .logout-link { white-space: nowrap; }
    .kiosk-tabs { gap: 6px; }
    .kiosk-tab { flex-direction: column; gap: 2px; min-height: 60px; font-size: 1rem; padding: 6px 4px; }
    .kiosk-tab i { font-size: 1.3rem; }
}

/* --- 5. health check: one big tap ------------------------------------------ */
.health-yes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    margin: 6px 0 4px;
    border: 2px solid var(--success-strong, #2E7D4F);
    border-radius: var(--border-radius, 12px);
    background: var(--surface, #fff);
    color: var(--success-strong, #2E7D4F);
    font: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
}
.health-yes i { font-size: 1.7rem; }
.health-yes:active { transform: scale(.99); }
.health-yes.is-done { background: var(--success-strong, #2E7D4F); color: #fff; }
.health-wrong-open {
    display: block;
    margin: 6px auto 0;
    background: none;
    border: 0;
    color: var(--muted, #6B665E);
    font: inherit;
    font-size: .95rem;
    text-decoration: underline;
    min-height: 40px;
    cursor: pointer;
}
.health-wrong { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--border, #E2DDD4); border-radius: var(--border-radius, 12px); background: #fff8e6; }
.health-wrong[hidden] { display: none; }
.health-wrong p { margin: 0 0 6px; font-weight: 600; }

/* Success says it big: "Ava signed in at 8:42 AM" (Hershey Oct 23 2026). */
#tapToast { font-size: 1.25rem; font-weight: 700; padding: 14px 22px; }


/* --- 6. Shabbos design round (Oct 24 2026, the AI board's agreed fixes) ----
   Same look, tidier: the names show without scrolling (one slim status line,
   one toolbar row), one active tab colour, one fixed card layout, coloured
   initials when there is no photo, one hint in the sign-in sheet. */
.sr-hide, .roster-compact .page-heading h1 {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.roster-compact .page-heading { margin: 0; padding: 0; min-height: 0; }

/* 6a. daycare name + Log out: one slim row. */
.kiosk-tabs-head { margin: 0; min-height: 44px; gap: 8px; }
.kiosk-tabs-head .menu-title { font-size: 1.25rem; line-height: 1.2; }
.kiosk-tabs-head .logout-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }

/* 6b. tabs: only the tab on screen is coloured (teal); the others are plain. */
.kiosk-tab.is-children, .kiosk-tab.is-staff, .kiosk-tab.is-visitors {
    --kiosk-tab-accent: var(--muted); --kiosk-tab-strong: var(--primary-strong);
}
.kiosk-tabs { margin: 6px 0 8px; padding: 4px 0; gap: 8px; }
.kiosk-tab { min-height: 56px; border-bottom-width: 1px; border-bottom-color: var(--border); box-shadow: none; }
.kiosk-tab:not(.is-current):hover { background: var(--primary-light); }
.roster-compact { padding-top: 4px; }
.kiosk-tab.is-current { box-shadow: 0 2px 8px rgba(37, 111, 102, .28); }

/* 6c. ONE status line: counts, a small pill only when the ratio is not met,
   and "Why?" that opens the reason. */
.kiosk-statusline { margin: 0 0 8px; }
.kiosk-statusline .home-status {
    margin: 0; padding: 4px 6px 4px 14px; min-height: 48px; gap: 4px 10px;
    flex-wrap: wrap; font-size: 1rem; box-shadow: none;
}
.kiosk-statusline .home-status[hidden] { display: none; }
.kiosk-statusline .home-status-item { gap: 6px; white-space: nowrap; }
.kiosk-statusline .home-status-ratio {
    margin-left: auto; max-width: 100%; white-space: normal; padding: 4px 12px; font-size: .92rem; white-space: nowrap; line-height: 1.3;
}
.kiosk-statusline .home-status-ratio.is-ok { background: transparent; color: var(--on-tint-green); padding: 4px 6px; }
.kiosk-statusline .home-status-ratio.is-ok::before { content: "\2713\00a0"; }
.kiosk-statusline .home-status-ratio.is-short, .kiosk-statusline .home-status-ratio.is-over { cursor: pointer; }
.kiosk-statusline .home-status-ratio.is-short { background: #FDF0E3; color: var(--warning-text); border: 1px solid #EFC9A2; }
.kiosk-statusline .home-status-ratio.is-over { background: #F8EBE7; color: var(--on-tint-red); border: 1px solid #E8BFB4; }
.kiosk-statusline .home-status-ratio[hidden], .home-status-why-toggle[hidden] { display: none; }
.home-status-why-toggle {
    flex: 0 0 auto; min-height: 40px; min-width: 48px; padding: 4px 12px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    color: var(--primary-strong); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
}
.home-status-why-toggle[aria-expanded="true"] { background: var(--primary-light); }
.kiosk-statusline .home-status-why {
    display: block; margin: 6px 0 0; padding: 10px 14px; border-radius: 12px;
    background: #FFF8EF; border: 1px solid #EFD9BF; color: var(--dark); font-size: .95rem;
}
.kiosk-statusline .home-status-why[hidden] { display: none; }
.home-status-why-lines { margin: 0 0 6px; padding: 0; list-style: none; }
.home-status-why-lines li { margin: 2px 0; }
.home-status-why-link { color: var(--primary-strong); display: inline-flex; min-height: 40px; align-items: center; }
@media (max-width: 520px) {
    .kiosk-statusline .home-status { padding-left: 12px; gap: 4px 8px; }
    .kiosk-statusline .home-status-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}

/* 6d. the roster's own top: the counts live in the status line (the old
   three-number row comes back only while taps wait to be sent), then ONE
   toolbar row -- date, search, the two owner shortcuts. */
.has-status-line .attendance-summary:not(.has-pending) { display: none; }
.roster-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.roster-toolbar .date-navigation {
    flex: 0 1 auto; margin: 0; padding: 0; gap: 4px; background: transparent; box-shadow: none;
}
.roster-toolbar .nav-button { min-width: 48px; justify-content: center; padding: 0 12px; background: var(--surface); }
.roster-toolbar .nav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.roster-toolbar .date-center { display: flex; align-items: center; gap: 8px; min-width: 0; }
.roster-toolbar .date-display { font-size: 1.05rem; padding: 4px; width: 12.5em; flex: 0 0 auto; }
.roster-toolbar .date-center { flex-direction: column; gap: 0; }
.roster-toolbar .live-clock { color: var(--muted); font-weight: 600; white-space: nowrap; }
.roster-toolbar .search-container { flex: 1 1 200px; margin: 0; }
.roster-toolbar .search-container input { min-height: 48px; margin: 0; }
.roster-toolbar .roster-topbar { margin: 0; flex: 0 0 auto; display: block; }
.roster-toolbar .roster-shortcuts { display: flex; gap: 8px; margin: 0; }
.roster-toolbar .roster-shortcut {
    width: auto; min-height: 48px; min-width: 48px; margin: 0; padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
@media (max-width: 1100px) {
    .roster-toolbar .shortcut-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .roster-toolbar .roster-shortcut { padding: 0 12px; }
}
@media (max-width: 640px) {
    .roster-toolbar .date-navigation { flex: 1 1 100%; justify-content: space-between; }
    .roster-toolbar .date-center { flex: 1 1 auto; }
    .roster-toolbar .date-display { width: 100%; }
    .roster-toolbar .live-clock { display: none; }
    .roster-toolbar .search-container { flex: 1 1 0; min-width: 0; }
}

/* 6e. one fixed card layout: big SIGN IN / SIGN OUT on top, then
   Times · Absent · Note, always in the same three places. */
.roster-compact .child-card .child-actions {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch;
}
.roster-compact .child-card .child-actions > * { min-width: 0; max-width: none; margin: 0; }
.roster-compact .child-card .child-card-button { grid-column: 1 / -1; grid-row: 1; min-height: 60px; font-size: 1.2rem; }
.roster-compact .child-card .card-edit-link,
.roster-compact .child-card .card-absent-button,
.roster-compact .child-card .card-undo-absent-button,
.roster-compact .child-card .card-health-button,
.roster-compact .child-card .card-note-link {
    grid-row: 2; min-height: 48px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    color: var(--primary-strong); font-size: .95rem; font-weight: 600; line-height: 1.15; text-align: center;
}
.roster-compact .child-card .card-edit-link { grid-column: 1; }
.roster-compact .child-card .card-absent-button,
.roster-compact .child-card .card-undo-absent-button,
.roster-compact .child-card .card-health-button { grid-column: 2; }
.roster-compact .child-card .card-note-link { grid-column: 3; }
.roster-compact .child-card .card-health-pre { grid-column: 1 / -1; grid-row: 3; }
.roster-compact .child-card .card-absent-button,
.roster-compact .child-card .card-undo-absent-button { color: var(--warning-text); border-color: #EFC9A2; }
.roster-compact .child-card .card-absent-button[hidden],
.roster-compact .child-card .card-undo-absent-button[hidden],
.roster-compact .child-card .card-health-button[hidden],
.roster-compact .child-card .card-health-pre[hidden] { display: none; }
.roster-compact .child-card .card-edit-link:hover,
.roster-compact .child-card .card-note-link:hover { background: var(--primary-light); }
/* Gone home / loading: a calm line, not a dead grey button. */
.roster-compact .child-card .child-card-button:disabled {
    background: transparent; border: 1px dashed var(--border); color: var(--on-tint-gray);
    opacity: 1; letter-spacing: 0; font-size: 1.05rem; font-weight: 600;
}
.roster-compact .child-card .child-card-button[data-action="in"],
.roster-compact .child-card .child-card-button[data-action="out"] { box-shadow: 0 2px 6px rgba(43, 42, 40, .12); }

/* 6f. faces: a coloured initials circle when there is no photo (six soft
   tints, the same one every day for the same name; text 7:1 or better). */
.avatar-initials.avatar-tone-0 { background: #DCECE9; color: #1C554E; }
.avatar-initials.avatar-tone-1 { background: #DDEFE4; color: #245F42; }
.avatar-initials.avatar-tone-2 { background: #FBE6D2; color: #7A3A0C; }
.avatar-initials.avatar-tone-3 { background: #F8E1DA; color: #8E3826; }
.avatar-initials.avatar-tone-4 { background: #DFE8F5; color: #23476E; }
.avatar-initials.avatar-tone-5 { background: #ECE2F0; color: #5A3168; }

/* 6g. the sign-in sheet: ONE hint (beside the big button), a clearly
   waiting grey button until everything is done, Healthy fills green. */
#tapSheet .step-need:not(.is-problem) { display: none; }
#tapSheet .sheet-save-why { color: var(--warning-text); font-weight: 600; font-size: 1rem; }
#tapSheet #tapSave:disabled {
    background: var(--light-gray); border-color: var(--border); color: var(--on-tint-gray);
    opacity: 1; cursor: not-allowed; box-shadow: none;
}
#tapSheet #tapSave:not(:disabled) { box-shadow: 0 3px 10px rgba(46, 125, 87, .30); }
#tapSheet.is-out #tapSave:not(:disabled) { box-shadow: 0 3px 10px rgba(168, 67, 46, .30); }
.health-yes.is-done { background: var(--success-strong); border-color: var(--success-strong); color: #fff; }
.health-yes.is-done i { color: #fff; }

/* 6h. the "keep the screen on" tip and the success toast never sit on
   top of each other. */
.wake-hint:not([hidden]) ~ * #tapToast, body:has(.wake-hint:not([hidden])) #tapToast { bottom: 96px; }

/* 6i. an empty roster says what to do next. */
.empty-state { grid-column: 1 / -1; text-align: center; padding: 32px 16px; color: var(--muted); }
.empty-state > i { font-size: 2.4rem; color: var(--primary); }
.empty-state p { font-size: 1.15rem; margin: 10px 0 14px; }
.empty-state .empty-state-add { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 52px; padding: 0 22px; }

/* 6j. the card head: face, name, status under the name -- one row. */
.roster-compact .child-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.roster-compact .child-info h3 { margin: 0; }
.roster-compact .child-info .child-status { display: inline-flex; }
.roster-compact .child-info .status-chip { font-size: .85rem; padding: 3px 10px; }
.roster-compact .children-grid > .child-card { min-height: 0; gap: 10px; }
@media (max-width: 640px) {
    .roster-compact .children-grid > .child-card { padding: 12px; }
    .roster-compact .child-photo { width: 52px; height: 52px; }
    .roster-compact .child-card .child-card-button { min-height: 56px; }
    .kiosk-tabs-head .menu-title { font-size: 1.1rem; }
    .kiosk-tabs-head { min-height: 40px; }
    .kiosk-tab { min-height: 52px; }
}

/* 6k. the success toast: wide enough for one line, in the "done" green. */
#tapToast.tap-toast { width: max-content; max-width: min(calc(100% - 24px), 600px); background-color: var(--success-strong); box-shadow: 0 6px 20px rgba(32, 86, 59, .35); }
#tapToast .tap-undo { min-height: 48px; }

/* 6l. phone: the ratio pill and its "?" stay on the one line. */
.home-status-why-toggle { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 520px) {
    .kiosk-statusline .home-status-why-toggle { position: absolute; width: 1px; height: 1px; min-height: 0; min-width: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
    .kiosk-statusline .home-status-ratio { font-size: .85rem; padding: 2px 10px; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; }
    .kiosk-statusline .home-status-ratio.is-short::after,
    .kiosk-statusline .home-status-ratio.is-over::after {
        content: "?"; display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px; margin-left: 6px; border: 1.5px solid currentColor; border-radius: 50%;
        font-size: .72rem; font-weight: 800; line-height: 1;
    }
    .kiosk-tabs-head .logout-link { font-size: .95rem; }
}

.kiosk-tabs-head .menu-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kiosk-tabs-head .daycare-logo-menu { max-height: 40px; max-width: 120px; object-fit: contain; }
.home-status-why-toggle .why-text { white-space: nowrap; }
.home-status-label { white-space: nowrap; }

/* 6m. the staff list: Absent is a quiet outlined button, as on the children's cards. */
.roster-compact .staff-card .card-absent-button {
    background: var(--surface); color: var(--warning-text); border: 1px solid #EFC9A2; min-height: 56px;
}
.roster-compact .staff-card .card-absent-button:hover { background: #FDF0E3; }

/* 6n. Round 2 (AI board): the staff card is built like the child card --
   status under the name, the big button across, then the quiet row. */
.roster-compact .staff-info .staff-status { display: inline-flex; margin: 2px 0 4px; }
.roster-compact .staff-info .status-chip { font-size: .85rem; padding: 3px 10px; }
.roster-compact .staff-info h3 { margin: 0; }
.roster-compact .staff-info p { margin: 0; }
.roster-compact .staff-grid > .staff-card { min-height: 0; gap: 10px; }
.roster-compact .staff-card .child-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.roster-compact .staff-card .child-actions .child-card-button { flex: 1 1 100%; min-height: 60px; font-size: 1.2rem; }
.roster-compact .staff-card .child-actions .mark-absent,
.roster-compact .staff-card .child-actions .edit-times {
    flex: 1 1 0; min-height: 48px; padding: 0 8px; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    color: var(--primary-strong); font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none;
}
.roster-compact .staff-card .child-actions .mark-absent { color: var(--warning-text); border-color: #EFC9A2; }

/* 6o. Round 2 (AI board). Cards: the quiet row is always full (Times, then
   Absent when it applies, then Note -- equal widths, same order, no hole);
   a child who went home is a short card (the chip says "Signed out 8:05");
   no coloured stripe down the side (the chip carries the status). */
.roster-compact .child-card .child-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.roster-compact .children-grid > .child-card .child-actions > * { flex: 1 1 0; min-width: 0; }
.roster-compact .children-grid > .child-card .child-actions > .child-card-button { flex: 1 1 100%; order: 0; }
.roster-compact .children-grid > .child-card .child-actions { flex-wrap: wrap; }
.roster-compact .children-grid > .child-card.status-out > .child-actions { margin-top: 0; }
.roster-compact .child-card .card-edit-link { order: 1; }
.roster-compact .child-card .card-absent-button,
.roster-compact .child-card .card-undo-absent-button,
.roster-compact .child-card .card-health-button { order: 2; }
.roster-compact .child-card .card-note-link { order: 3; }
.roster-compact .child-card .card-health-pre { order: 4; flex-basis: 100%; }
.roster-compact .child-card.status-out .child-card-button { display: none; }
.roster-compact .children-grid > .child-card,
.roster-compact .staff-grid > .staff-card { border-left: 1px solid var(--border); }
.roster-compact .child-info-button .info-badge { opacity: .55; transform: scale(.85); }

/* Toolbar buttons say what they are: a small caption under the icon. */
.roster-toolbar .roster-shortcut { flex-direction: column; gap: 2px; min-width: 64px; padding: 4px 8px; line-height: 1.1; }
.roster-toolbar .roster-shortcut i { font-size: 1.1rem; }
.shortcut-cap { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.roster-toolbar .shortcut-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* The reason behind "Why?" opens OVER the list, never pushing the names. */
.kiosk-statusline { position: relative; }
.kiosk-statusline .home-status-why {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
    box-shadow: 0 10px 30px rgba(43, 42, 40, .18);
}

/* "Screen may sleep" goes quiet once the tip was dismissed on this tablet. */
.kiosk-footer.wake-quiet:not([data-wake-state="on"]) .wake-dot,
.kiosk-footer.wake-quiet:not([data-wake-state="on"]) #wakeLabel { display: none; }

/* Sign-in sheet: the people chips share the row evenly. */
#tapSheet .signer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#tapSheet .signer-chip { flex: 1 1 auto; }

/* Phone: tabs are one slim row (icon beside the word). */
@media (max-width: 640px) {
    .kiosk-tab { flex-direction: row; gap: 6px; min-height: 48px; font-size: .95rem; padding: 4px 6px; }
    .kiosk-tab i { font-size: 1.05rem; }
    .kiosk-tabs { margin: 4px 0 6px; }
    .kiosk-statusline .home-status { min-height: 44px; }
}

/* 6p. Visitors: no big title (the tab says it), date + "Add New Visitor" on one row. */
.visitor-compact .visitor-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.visitor-compact .visitor-add-row { margin: 0 0 0 auto; flex: 0 0 auto; }
.visitor-compact .visitor-add-btn {
    width: auto; min-height: 52px; padding: 0 20px; margin: 0; display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary-strong); border-color: var(--primary-strong); color: #fff; font-weight: 700; font-size: 1.05rem;
}
@media (max-width: 640px) { .visitor-compact .visitor-add-row { flex: 1 1 100%; } .visitor-compact .visitor-add-btn { width: 100%; justify-content: center; } }
/* the kiosk lists start right under the app bar */
.roster-compact .kiosk-tabs-head { margin-top: -6px; }

/* 6q. tick boxes and radios in the brand teal, not the browser's blue. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary-strong); }


/* 6r. Round 3 (AI board: still ~5 rows before the first name on a phone).
   The Menu bar carries the daycare's name + logo and Log out (the old name
   row is gone); on the Children list the status line sits in the toolbar
   row beside the date. Home is hidden on the lists themselves (the tabs are
   the way around; the markup stays for every other page). */
.portal-nav-brand.is-daycare { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 60vw; font-size: 1.05rem; }
.portal-nav-brand.is-daycare .portal-nav-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-nav-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; flex: 0 0 auto; }
.portal-nav-home.is-on-home { display: none; }
.portal-nav-logout { margin: 0 0 0 auto; display: inline-flex; }
.portal-nav-logout .portal-nav-home { margin-left: 8px; background: var(--surface); font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; min-width: 44px; justify-content: center; color: var(--muted); }
.portal-nav.has-toggle .portal-nav-logout .portal-nav-home { margin-left: 8px; }
.roster-compact > .kiosk-statusline { display: none; }
.roster-toolbar { position: relative; }
.roster-toolbar > .kiosk-statusline { margin: 0; flex: 1 1 260px; min-width: 0; position: static; }
.roster-toolbar > .kiosk-statusline .home-status { min-height: 48px; }
.roster-toolbar > .kiosk-statusline .home-status-why { left: 0; right: 0; }
@media (max-width: 640px) {
    .roster-toolbar .date-navigation { flex: 0 0 auto; justify-content: flex-start; }
    .roster-toolbar .date-center { flex: 0 0 auto; }
    .roster-toolbar .date-display { width: 6.4em; font-size: 1rem; text-align: center; }
    .roster-toolbar .nav-button { min-width: 44px; padding: 0 8px; }
    .roster-toolbar > .kiosk-statusline { flex: 1 1 0; }
    .roster-toolbar > .kiosk-statusline .home-status { padding: 2px 6px 2px 10px; justify-content: flex-end; gap: 2px 6px; }
    .kiosk-statusline .home-status-ratio.is-ok { font-size: 0; margin-left: 2px; padding: 0; }
    .kiosk-statusline .home-status-ratio.is-ok::before {
        content: "\2713"; font-size: .95rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; border-radius: 50%; background: #E4F2EA; color: var(--on-tint-green);
    }
    .portal-nav-brand.is-daycare { max-width: 58vw; font-size: 1rem; }
    .portal-nav-logo { width: 28px; height: 28px; }
}

/* The reason: what to do first (bold), then the numbers; a real Close. */
.home-status-why-lines li.is-fix { font-weight: 800; font-size: 1.05rem; color: var(--warning-text); margin-bottom: 6px; }
.home-status-why-lines li:not(.is-fix) { color: var(--muted); }
.home-status-why-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.home-status-why-close {
    min-height: 48px; min-width: 96px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--dark); font: inherit; font-weight: 700; cursor: pointer;
}
.home-status-why-link { min-height: 48px; font-weight: 700; }

/* A child who went home: the card is only as tall as what it shows. */
.roster-compact .children-grid { align-items: start; }

/* Healthy: an empty ring until it is tapped, then the filled green tick. */
.health-yes:not(.is-done) i.fa-circle-check::before {
    content: ""; display: inline-block; width: .95em; height: .95em; box-sizing: border-box;
    border: 3px solid currentColor; border-radius: 50%; vertical-align: -.12em;
}

/* Add a child (Round 3, AI board): one way back, roomy fields, the
   application routes as a quiet line under the title. */
#child-form input[type="text"], #child-form input[type="tel"], #child-form input[type="date"],
#child-form input[type="email"], #child-form select { min-height: 48px; font-size: 1rem; }
#child-form label { font-size: 1rem; font-weight: 600; }
details.add-child-options { border-style: dashed; background: transparent; }
details.add-child-options > summary { font-size: .98rem; }

@media (max-width: 640px) {
    .roster-toolbar .date-navigation { flex: 1 1 auto; order: 1; justify-content: space-between; }
    .roster-toolbar .date-center { flex: 1 1 auto; }
    .roster-toolbar .date-display { width: 100%; min-width: 5.6em; }
    .roster-toolbar > .kiosk-statusline { flex: 0 0 auto; order: 2; }
    .roster-toolbar .search-container { flex: 1 1 170px; order: 3; }
    .roster-toolbar .roster-topbar { order: 4; }
    .roster-toolbar > .kiosk-statusline .home-status { flex-wrap: nowrap; white-space: nowrap; }
}

@media (max-width: 640px) {
    .roster-toolbar .date-navigation { flex: 0 0 auto; gap: 4px; }
    .roster-toolbar .date-center { flex: 0 0 auto; }
    .roster-toolbar .date-display { width: 5.9em; min-width: 0; padding: 4px 0; }
    .roster-toolbar .nav-button { min-width: 44px; padding: 0 6px; }
    .roster-toolbar > .kiosk-statusline { flex: 1 1 auto; }
    .roster-toolbar > .kiosk-statusline .home-status { justify-content: center; }
    .roster-toolbar .search-container { flex: 1 1 150px; }
}

/* the rule's arithmetic lives behind Details (the ratio page); the pop-up
   keeps what to do + who is here. */
.home-status-why-lines li:nth-child(n+4) { display: none; }

.empty-state .empty-state-hint { font-size: 1rem; margin-top: -6px; }
.visitor-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; }
.visitor-empty > i { color: var(--warning); }
.visitor-empty p { width: 100%; text-align: center; margin-left: 0; margin-right: 0; }


/* 6s. Round 4 (AI board round 3). */
/* Staff on a phone: the date row is the date alone (short date), Add staff
   sits beside the search, like Daily sheet. */
@media (max-width: 640px) {
    .roster-toolbar .search-container { order: 2; }
    .roster-toolbar .staff-add-link { order: 3; }
    .roster-toolbar .roster-topbar { order: 4; }
    .roster-toolbar > .date-navigation:not(:has(+ .kiosk-statusline)) { order: 1; flex: 1 1 100%; justify-content: space-between; }
    .roster-toolbar > .date-navigation:not(:has(+ .kiosk-statusline)) .date-center { flex: 1 1 auto; }
    .roster-toolbar > .date-navigation:not(:has(+ .kiosk-statusline)) .date-display { width: 100%; }
}
/* Tablet: the date and the clock read as one line. */
@media (min-width: 641px) {
    .roster-toolbar .date-center { flex-direction: row; align-items: baseline; gap: 10px; }
    .roster-toolbar .date-display { width: 11.6em; text-align: right; }
}
/* The (i) on a card: a calm filled circle with an upright "i". */
.roster-compact .child-info-button .info-badge {
    opacity: 1; transform: none; width: 28px; height: 28px; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: #E3F0EE; color: var(--primary-strong);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-style: normal; font-weight: 800; font-size: .95rem;
}
/* Healthy: a short pulse when tapped, so a cheap tablet still feels it. */
@keyframes ck-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.health-yes.is-done { animation: ck-pulse .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .health-yes.is-done { animation: none; } }
/* Phone sign-in sheet: tighter so the whole signature box shows above the
   Sign in bar. */
@media (max-width: 640px) {
    #tapSheet .signer-chip { min-height: 48px; padding: 6px 12px; }
    #tapSheet .health-yes { min-height: 56px; }
    #tapSheet .tap-step { margin-bottom: 10px; }
    #tapSheet .tap-step-label { margin-bottom: 6px; }
    #tapSheet .modal-body { padding-bottom: 12px; }
}
@media (max-width: 640px) {
    #tapSheet .signer-chip { font-size: .98rem; padding: 6px 10px; }
    #tapSheet .health-yes { font-size: 1.3rem; margin: 4px 0 2px; }
}
@media (min-width: 641px) { .roster-toolbar .date-display { width: 10.4em; } }
@media (max-width: 640px) {
    #tapSheet .signer-chips { flex-wrap: nowrap; }
    #tapSheet .signer-chip { flex: 1 1 auto; white-space: nowrap; min-width: 0; }
    #tapSheet .signer-chip .signer-rel { display: none; }
}
@media (max-width: 640px) {
    #tapSheet .signer-chips { flex-wrap: wrap; }
    #tapSheet .signer-chip { min-width: auto; flex: 1 1 auto; }
}
details.add-child-options { max-width: 740px; }

/* 6t. Round 4 leftovers: one active-tab colour (teal) on all three tabs;
   room under the last cards so the success toast never sits on a button. */
.kiosk-tab.is-visitors.is-current { background: var(--primary-strong); border-color: var(--primary-strong); box-shadow: 0 2px 8px rgba(37, 111, 102, .28); }
.roster-compact .children-grid, .roster-compact .staff-grid { padding-bottom: 88px; }
.visitor-empty p { max-width: 36em; margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 641px) { .roster-toolbar .date-display { width: 12.4em; } }

/* Oct 26 2026: Edit time asks for no reason and no signature. */
#editReasonGroup[hidden], #editSignatureGroup[hidden] { display: none; }
/* Oct 26 2026: no grey "Loading..." chip on the tiles while the day loads
   (the chip is replaced by the status as soon as it is known). */
.status-chip.chip-loading { visibility: hidden; }


/* ---------------------------------------------------------------------------
   Hershey's audit Oct 26 2026 items 02 / 04 / 05: Children, Staff and
   Visitors have two clear rows. Row 1 is the day: big arrows, the date (tap
   to choose another day) and the time. Row 2 is everything else on one line:
   All / Here / Not here, the counts, search, Daily sheet, History (Visitors:
   a big Add New Visitor). Templates mark the toolbar .tb-two-rows.
   ------------------------------------------------------------------------- */
.roster-toolbar.tb-two-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.roster-toolbar.tb-two-rows > .date-navigation {
    order: 0; flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0;
}
.roster-toolbar.tb-two-rows > .date-navigation .nav-button {
    min-width: 64px; min-height: 56px; padding: 0 14px; font-size: 1.3rem; border-radius: 14px;
}
.roster-toolbar.tb-two-rows .date-center { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
.roster-toolbar.tb-two-rows .date-display {
    width: 15em; min-width: 0; max-width: 100%; min-height: 56px; padding: 4px 12px; font-size: 1.2rem; font-weight: 700;
    text-align: center; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer;
}
.roster-toolbar.tb-two-rows .live-clock { display: inline; font-size: 1.15rem; white-space: nowrap; }
.roster-toolbar.tb-two-rows .hebrew-date { white-space: nowrap; }
.kids-grid.kg-ready .roster-toolbar.tb-two-rows > .kg-bar { order: 1; flex: 0 0 auto; margin: 0; flex-wrap: nowrap; }
.roster-toolbar.tb-two-rows > .kiosk-statusline { order: 2; flex: 0 1 auto; min-width: 0; }
.roster-toolbar.tb-two-rows > .search-container { order: 3; flex: 1 1 120px; min-width: 110px; }
.roster-toolbar.tb-two-rows > .roster-topbar { order: 4; flex: 0 0 auto; }
.roster-toolbar.tb-two-rows .roster-shortcut { min-height: 48px; }
/* Visitors: the one action is a big, easy button under the day. */
.roster-toolbar.tb-visitors > .visitor-add-row { order: 1; flex: 1 1 100%; display: flex; justify-content: center; margin: 0; }
.roster-toolbar.tb-visitors .visitor-add-btn {
    min-height: 64px; min-width: min(420px, 100%); padding: 0 28px; font-size: 1.25rem; font-weight: 700; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
@media (max-width: 640px) {
    .roster-toolbar.tb-two-rows .date-display { width: 100%; font-size: 1.05rem; }
    .roster-toolbar.tb-two-rows .date-center { flex: 1 1 auto; }
    .roster-toolbar.tb-two-rows .live-clock { display: none; }
    .roster-toolbar.tb-two-rows > .date-navigation .nav-button { min-width: 52px; }
}

/* Hershey's audit Oct 26 2026 item 13: Advanced > Logs links. */
.logs-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 20px; }

/* Hershey's audit Oct 26 2026 item 08: "+ Add a form type" on a Forms page. */
.forms-type-add { display: contents; }
.forms-type-add > summary { list-style: none; cursor: pointer; border-style: dashed; }
.forms-type-add > summary::-webkit-details-marker { display: none; }
.forms-type-add[open] > summary { display: none; }
.forms-type-add-form { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface, #fff); }
.forms-type-add-form input[type=text] { min-height: 52px; font-size: 1.1rem; }
.forms-type-add-form .btn-primary { min-height: 52px; align-self: flex-start; padding: 0 28px; }

/* Hershey Oct 26 2026 (1:37 PM, on the Visitors screenshot): one box -- the
   date, the time right under it, then a full-width Add New Visitor. */
.roster-toolbar.tb-visitors {
    border: 1px solid var(--border); border-radius: 18px; background: var(--surface, #fff);
    padding: 14px; gap: 12px;
}
.roster-toolbar.tb-visitors .date-center { flex-direction: column; gap: 4px; flex: 1 1 auto; }
.roster-toolbar.tb-visitors .date-display { width: 100%; max-width: 22em; }
.roster-toolbar.tb-visitors .live-clock { display: block; text-align: center; font-size: 1.2rem; font-weight: 600; color: var(--muted); }
.roster-toolbar.tb-visitors > .visitor-add-row { justify-content: stretch; }
.roster-toolbar.tb-visitors .visitor-add-btn { width: 100%; min-width: 0; }
@media (max-width: 640px) { .roster-toolbar.tb-visitors .live-clock { display: block; } }
/* ...the date and the time share one box. */
.roster-toolbar.tb-visitors .date-center { border: 1px solid var(--border); border-radius: 14px; background: var(--surface, #fff); padding: 6px 12px 8px; max-width: 24em; cursor: pointer; }
.roster-toolbar.tb-visitors .date-display { border: 0; min-height: 40px; padding: 0; background: transparent; }

/* Hershey's audit Oct 26 2026 item 19: Parent / Guardian dropdown on the sign sheet. */
.signer-select { display: block; width: 100%; min-height: 56px; margin-top: 10px; padding: 0 14px; font-size: 1.15rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface, #fff); }
.signer-select[hidden] { display: none; }

/* Hershey's audit Oct 26 2026 item 20: the health check is two big, clear
   choices side by side. */
.health-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 4px; }
.health-choice.health-choice-one { grid-template-columns: 1fr; }
.health-choice .health-yes { margin: 0; min-height: 84px; }
.health-choice .health-no {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 0; min-height: 84px; width: 100%;
    border: 2px solid var(--danger-strong, #B3261E); border-radius: var(--border-radius, 12px);
    background: var(--surface, #fff); color: var(--danger-strong, #B3261E);
    font: inherit; font-size: 1.5rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.health-choice .health-no i { font-size: 1.5rem; }
.health-choice .health-no[aria-expanded="true"] { background: var(--danger-strong, #B3261E); color: #fff; }
.health-wrong { font-size: 1.1rem; }
@media (max-width: 420px) { .health-choice { grid-template-columns: 1fr; } }
.forms-type-add-btn { color: var(--primary-strong); }

/* Hershey's audit Oct 26 2026 item 25: two CAPS actions, side by side. */
.caps-two-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.caps-two-actions .set-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; font-size: 1.15rem; margin: 0; }
@media (max-width: 520px) { .caps-two-actions { grid-template-columns: 1fr; } }


/* Hershey, Oct 26 2026 (4:28 / 4:33 PM PT): the day row is ONE full-width
   white card like the first version -- "< Previous Day", the full date in
   bold in the middle (tap it for the calendar), "Next Day >" -- and the time
   on its own full-width line under it. Same on Children, Staff and
   Visitors, at every width. No colour changes (surface/border/text vars). */
body .roster-toolbar.tb-two-rows > .date-navigation {
    flex: 1 1 100%; width: 100%; order: 0; box-sizing: border-box;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; column-gap: 10px; row-gap: 0;
    background: var(--surface, #fff); border: 1px solid var(--border);
    border-radius: 14px; padding: 6px 12px; margin: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
/* Hershey, Oct 26 2026 4:56 PM PT: the time is NOT a separate row -- it
   sits small, right under the date, inside the same middle cell. */
body .roster-toolbar.tb-two-rows > .date-navigation .date-center {
    grid-column: 2; grid-row: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0; text-align: center;
    border: 0; border-radius: 0; background: transparent; padding: 0; max-width: none;
}
body .roster-toolbar.tb-two-rows > .date-navigation #prevDay { grid-column: 1; grid-row: 1; }
body .roster-toolbar.tb-two-rows > .date-navigation #nextDay { grid-column: 3; grid-row: 1; }
body .roster-toolbar.tb-two-rows > .date-navigation .nav-button {
    min-width: 0; min-height: 52px; padding: 4px 10px; line-height: 1.15;
    font-size: .9rem; white-space: normal; text-align: center;
    display: inline-flex; align-items: center; gap: 6px;
}
body .roster-toolbar.tb-two-rows > .date-navigation .nav-button .nav-text {
    display: inline-block !important; max-width: 5.2em; vertical-align: middle;
    font-size: .85rem; font-weight: 600;
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
}
body .roster-toolbar.tb-two-rows > .date-navigation .date-display,
body .roster-toolbar.tb-two-rows > .date-navigation .flatpickr-input {
    width: 100%; max-width: none; min-width: 0;
    text-align: center; font-weight: 700; font-size: 1.25rem; line-height: 1.25;
    border: 0; background: transparent; padding: 2px 4px 0; min-height: 0; height: auto;
    box-sizing: border-box; cursor: pointer; text-overflow: ellipsis;
}
body .roster-toolbar.tb-two-rows > .date-navigation .live-clock {
    display: block; width: 100%;
    text-align: center; font-size: .9rem; font-weight: 400; line-height: 1.2;
    padding: 0 4px 2px; border: 0; margin: 0;
    color: var(--muted, #6b7280); box-sizing: border-box; white-space: nowrap;
}
body .roster-toolbar.tb-two-rows > .date-navigation .live-clock:empty { display: none; }
body .roster-toolbar.tb-two-rows > .date-navigation .hebrew-date { text-align: center; font-size: .85rem; line-height: 1.2; }
@media (max-width: 640px) {
    body .roster-toolbar.tb-two-rows > .date-navigation { padding: 8px; column-gap: 6px; }
    body .roster-toolbar.tb-two-rows > .date-navigation .live-clock { display: block; font-size: .85rem; }
    body .roster-toolbar.tb-two-rows > .date-navigation .date-display { font-size: 1.05rem; }
    body .roster-toolbar.tb-two-rows > .date-navigation .nav-button { padding: 4px 6px; font-size: .8rem; }
}
@media (max-width: 400px) {
    body .roster-toolbar.tb-two-rows > .date-navigation .nav-button .nav-text { display: none !important; }
}