/* Shared attendance spacing. Loaded after page styles; scoped away from the site header/footer.
   rem units respect the main website's font-size controls. Print layouts keep their own rules. */
@media screen {
    body.ad-page .ad {
        --ad-r: 14px;
        --ad-gap: clamp(12px, 1.2vw, 18px);
        --ad-shadow: 0 6px 20px -14px rgba(15, 23, 42, .35);
        --ad-shadow-float: var(--ad-shadow);
        line-height: 1.55;
    }
    .ad-page .ad .ad-wrap { padding-inline: max(16px, var(--tb1-shell-gutter, 20px)); }
    .ad-page .ad :is(.ad-hero-main, .ad-float-main, .ad-float-side, .ad-panel-body, .st-f) { min-width: 0; }
    .ad-page .ad .ad-hero,
    .ad-page .ad .ad-hero.has-float { padding-block: 18px 20px; }
    .ad-page .ad .ad-hero-top { gap: 16px 24px; }
    .ad-page .ad .ad-title { font-size: clamp(1.65rem, 1.2rem + 1.3vw, 2.2rem); line-height: 1.35; }
    .ad-page .ad .ad-sub { font-size: 1rem; line-height: 1.6; max-width: 58ch; }
    .ad-page .ad .ad-tags { margin-bottom: 8px; gap: 6px; }
    .ad-page .ad .ad-hero-acts { margin-top: 12px; }
    .ad-page .ad .ad-band { margin-top: 16px; }
    .ad-page .ad .ad-today-card { padding: 14px; }
    .ad-page .ad .ad-today-link { padding-block: 7px; }
    .ad-page .ad .mnav { margin-bottom: 12px; }
    .ad-page .ad .mnav .mnav-list { gap: 4px; padding: 4px; }
    .ad-page .ad .mnav a { min-height: 38px; padding-inline: 12px; }
    /* A separate content row removes the large reserved area beneath the banner. */
    .ad-page .ad .ad-float-sec { margin-top: 14px; }
    .ad-page .ad .ad-float { padding: 16px; gap: 16px; box-shadow: var(--ad-shadow); }
    .ad-page .ad .ad-float-title { font-size: 1.12rem; }
    .ad-page .ad .ad-sec { padding-block: 20px; }
    .ad-page .ad .ad-h { margin-bottom: 12px; }
    .ad-page .ad .ad-grid-2 { gap: var(--ad-gap); align-items: stretch; }
    .ad-page .ad .ad-grid-2 > .ad-panel { height: 100%; }
    .ad-page .ad .ad-panel { border-radius: var(--ad-r); box-shadow: var(--ad-shadow); }
    .ad-page .ad .ad-panel-head { gap: 8px 10px; padding: 11px 14px; }
    .ad-page .ad .ad-panel-title { font-size: 1.06rem; line-height: 1.5; }
    .ad-page .ad .ad-panel-body { padding: 12px 14px 14px; }
    .ad-page .ad .ad-panel-sub { line-height: 1.5; }
    .ad-page .ad .ad-tbl { font-size: .94rem; }
    .ad-page .ad .ad-tbl :is(th, td) { padding: .48rem .6rem; vertical-align: middle; }
    .ad-page .ad .ad-tbl thead th { font-size: .86rem; }
    .ad-page .ad .ad-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
    .ad-page .ad .ad-acts { gap: 8px; align-items: center; }
    .ad-page .ad .ad-btn { min-height: 40px; padding: 8px 14px; font-size: .94rem; }
    .ad-page .ad :is(.rp-tools, .hs-tools) { padding: 10px 14px; gap: 8px 12px; }
    .ad-page .ad :is(.st-grid, .ir-custom-form) { gap: 10px 12px; }
    .ad-page .ad :is(.st-sw-row, .st-live-row, .de-notice, .st-flash) { padding: 10px 12px; }
    .ad-page .ad .st-flash { margin-bottom: 12px; }
    .ad-page .ad :is(.rp-in, .hs-field, .st-in, .mg-in, .de-input) { min-height: 40px; line-height: 1.4; }
    .ad-page .ad :is(input, select, textarea) { max-width: 100%; }
    .ad-page .ad textarea { resize: vertical; }
    .ad-page .ad :is(.st-save, .de-btn-save) { min-height: 42px; }
    .ad-page .ad .de-sheet { padding: 16px; }
    .ad-page .ad .de-tools { gap: 8px 12px; padding-bottom: 10px; margin-bottom: 10px; }
    .ad-page .ad .de-row { padding: 9px 12px; gap: 8px 10px; }
    .ad-page .ad .de-bar { margin-top: 12px; padding: 10px 12px; border-radius: 12px; }
    .ad-page .ad .wf-req { padding: 12px; }
    .ad-page .ad .wf-filter { gap: 8px; margin-top: 12px; }
    .ad-page .ad nav.wf-filter .ad-note { flex: 1 1 180px; margin: 0; text-align: center; }
    .ad-page .ad .wf-filter .ad-btn-outline {
        color: var(--ad-brand); background: var(--ad-paper); border-color: var(--ad-line-bold);
    }
    .ad-page .ad .wf-filter .ad-btn-outline:hover { background: var(--ad-brand-soft); border-color: var(--ad-brand); }
    .ad-page .ad :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--ad-brand); outline-offset: 3px; }
    .ad-page .ad .ad-hero :focus-visible { outline-color: #ffffff; }

    /* The phone clock retains its primary action size; surrounding information is denser. */
    .ci-body .ci-hero-in { padding-inline: 16px; }
    .ci-body .ci-clockbox { margin-top: 12px; }
    .ci-body .ci-person { margin-top: 12px; gap: 10px; }
    .ci-body .ci-sched { margin-top: 12px; }
    .ci-body .ci-shell { gap: 12px; padding-inline: 14px; }
    .ci-body .ci-card { padding: 14px; }
    .ci-body :is(.ci-loc, .ci-week, .ci-month) { margin-top: 12px; }
    .ci-body .ci-card-title { font-size: 1.08rem; }
}
@media screen and (min-width: 1024px) {
    .ad-page .ad .ad-hero-top { grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 1fr); }
}
@media screen and (max-width: 767px) {
    .ad-page .ad .ad-wrap { padding-inline: 12px; }
    .ad-page .ad .ad-hero,
    .ad-page .ad .ad-hero.has-float { padding-block: 12px 16px; }
    .ad-page .ad .ad-hero-top { gap: 12px; }
    .ad-page .ad .ad-float-sec { margin-top: 12px; }
    .ad-page .ad .ad-float { padding: 12px; gap: 14px; }
    .ad-page .ad .ad-sec { padding-block: 16px; }
    .ad-page .ad .ad-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .ad-page .ad :is(.ad-panel-head, .ad-panel-body) { padding-inline: 12px; }
    .ad-page .ad .ad-btn { min-height: 44px; }
    .ad-page .ad .mnav a { min-height: 44px; }
    .ad-page .ad :is(.rp-in, .hs-field, .st-in, .mg-in, .de-input) { min-height: 44px; font-size: 16px; }
    .ad-page .ad :is(.st-grid, .ir-custom-form) { grid-template-columns: minmax(0, 1fr); }
    .ad-page .ad .de-sheet { padding: 12px; }
    .ad-page .ad :is(.rp-tools, .hs-tools) { padding-inline: 12px; }
    .ad-page .ad .ad-tbl :is(th, td) { padding: .5rem; }
    .ad-page .ad .de-bar { gap: 8px; }
}
@media screen and (min-width: 980px) {
    body.ci-body {
        max-width: 1440px; margin-inline: auto; padding: 16px;
        grid-template-columns: minmax(340px, .9fr) minmax(0, 1.3fr); gap: 16px;
    }
    .ci-body .ci-hero {
        top: 16px; min-height: 0; padding-block: 76px 24px;
        align-items: flex-start; border-radius: 20px;
    }
    .ci-body .ci-hero-in { max-width: none; padding-inline: 24px; }
    .ci-body .ci-topbar { top: 18px; left: 24px; right: 24px; }
    .ci-body .ci-clockbox { margin-top: 20px; }
    .ci-body .ci-clock { font-size: clamp(3.5rem, 4.5vw, 5rem); }
    .ci-body .ci-shell { max-width: none; margin: 0; padding: 0 0 24px; }
}
@media screen and (prefers-reduced-motion: reduce) {
    .ad-page .ad *, .ci-body * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Settings pages: title first, followed by a compact settings overview.
   A six-row sidebar used to stretch the banner and vertically centre the title in empty space. */
@media screen {
    :is(.lc-page, .st-compact-page) .ad .ad-hero-top { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
    :is(.lc-page, .st-compact-page) .ad .ad-hero-main { align-self: start; }
    :is(.lc-page, .st-compact-page) .ad .ad-sub { max-width: 80ch; }
    :is(.lc-page, .st-compact-page) .ad .ad-title .ad-nw { white-space: normal; overflow-wrap: anywhere; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) { padding: 12px; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-head {
        display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
        margin-bottom: 10px; padding-bottom: 8px;
    }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .st-card-when { margin: 0; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-row { min-width: 0; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-link {
        height: 100%; min-height: 76px; grid-template-columns: 2rem minmax(0, 1fr) auto;
        gap: 8px; padding: 8px 10px; border-radius: 10px;
    }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-ic { width: 2rem; height: 2rem; border-radius: 8px; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-v { font-size: .98rem; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-sub { line-height: 1.45; }
    :is(.lc-page, .st-compact-page) .ad .ad-band { margin-top: 14px; }
    :is(.lc-page, .st-compact-page) .ad .mnav .mnav-list { flex-wrap: nowrap; }
    :is(.lc-page, .st-compact-page) .ad .mnav .mnav-link { white-space: nowrap; padding-inline: 10px; }
}
@media screen and (min-width: 1100px) {
    :is(.lc-page, .st-compact-page) .ad .ad-hero-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; }
    :is(.lc-page, .st-compact-page) .ad .ad-tags { grid-column: 1 / -1; margin: 0; }
    :is(.lc-page, .st-compact-page) .ad .ad-title { grid-column: 1; font-size: clamp(1.65rem, 2vw, 2rem); }
    :is(.lc-page, .st-compact-page) .ad .ad-sub { grid-column: 1; }
    :is(.lc-page, .st-compact-page) .ad .ad-hero-acts { grid-column: 2; grid-row: 2 / span 2; margin: 0; align-self: center; justify-content: flex-end; }
}
@media screen and (max-width: 899px) {
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 479px) {
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) { padding: 10px; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-link { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 4px; align-content: start; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-ic,
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-go { display: none; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-v { font-size: 1rem; }
    :is(.lc-page, .st-compact-page) .ad :is(.lc-summary, .st-summary) .ad-today-sub { display: none; }
}

@media screen and (min-width: 1100px) {
    .st-compact-page .ad .st-summary .ad-today { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .st-compact-page .ad .st-summary .ad-today-link { grid-template-columns: minmax(0, 1fr) auto; align-content: start; }
    .st-compact-page .ad .st-summary .ad-today-ic { display: none; }
}
@media screen and (max-width: 1099px) {
    .st-compact-page .ad .st-summary .ad-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-compact-page .ad .st-summary .ad-today-row:last-child { grid-column: 1 / -1; }
}

@media screen {
    .st-compact-page .ad .st-float.is-no-live { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .st-compact-page .ad .st-float.is-no-live .ad-float-side {
        border-inline-start: 0; padding-inline-start: 0;
        border-block-start: 1px solid var(--ad-line); padding-block-start: 12px;
    }
}
@media screen and (min-width: 900px) {
    .st-compact-page .ad .st-float.is-no-live .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Operational and reporting pages: content-first header with full-width controls.
   These selectors apply only to the seven pages marked att-compact-page. */
@media screen {
    .att-compact-page .ad .ad-hero-top { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
    .att-compact-page .ad .ad-hero-main { align-self: start; }
    .att-compact-page .ad .ad-title .ad-nw { white-space: normal; overflow-wrap: anywhere; }
    .att-compact-page .ad .ad-sub { max-width: 85ch; }
    .att-compact-page .ad .mnav .mnav-list { flex-wrap: nowrap; }
    .att-compact-page .ad .mnav .mnav-link { white-space: nowrap; padding-inline: 10px; }
    .att-compact-page .ad .ad-today-card { padding: 12px; }
    .att-compact-page .ad .ad-today-head {
        flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px;
        padding-bottom: 8px; margin-bottom: 10px;
    }
    .att-compact-page .ad .ad-today-head .st-card-when { margin: 0; }
    .att-compact-page .ad .rp-step { margin-inline-start: auto; }
    .att-compact-page .ad .rp-fields { gap: 10px 12px; }
    .att-compact-page .ad .ad-band { margin-top: 14px; }
    .att-compact-page .ad .ad-fact-v { font-size: clamp(1.6rem, 2.4vw, 2.25rem); }
    .att-compact-page .ad :is(.ad-tbl, .mg-tbl, .rp-tbl, .hs-tbl) { line-height: 1.5; }
    .att-compact-page .ad :is(.mg-stack, .hs-list, .wf-reqs) { gap: 12px; }
    .att-compact-page .ad :is(.hs-tools, .mg-tools, .de-tools) { align-items: end; }
    .att-compact-page .ad .wf-req-body { padding: 8px 10px; }
    .att-compact-page .ad .wf-req-acts { gap: 8px; }
    .att-compact-page .ad .ir-ranges { display: flex; flex-wrap: wrap; gap: 6px; }
    .att-compact-page .ad .ir-month-row { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-inline-end: 12px; }
    .att-compact-page .ad .ir-month { display: inline-flex; flex-wrap: wrap; max-width: 460px; gap: 8px; }
    .att-compact-page .ad .ir-month .rp-in { flex: 1 1 160px; min-width: 0; }
    .att-compact-page .ad .ir-month .ir-go { flex: 0 0 auto; }
}
@media screen and (min-width: 900px) {
    .att-compact-page .ad .ad-hero-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; }
    .att-compact-page .ad .ad-tags { grid-column: 1 / -1; margin: 0; }
    .att-compact-page .ad .ad-title { grid-column: 1; font-size: clamp(1.65rem, 2vw, 2rem); }
    .att-compact-page .ad .ad-sub { grid-column: 1; }
    .att-compact-page .ad .ad-hero-acts { grid-column: 2; grid-row: 2 / span 2; margin: 0; align-self: center; justify-content: flex-end; max-width: 30rem; }
    .att-compact-page .ad .rp-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 14px; }
    .att-compact-page .ad .rp-types { grid-column: 1 / -1; }
    .att-compact-page .ad .rp-fields { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .att-compact-page .ad .rp-card .rp-form .rp-fields > .rp-f { grid-column: auto; }
    .att-compact-page .ad .rp-go { width: auto; min-width: 120px; }
    .att-compact-page.dv-page .ad .ad-today { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .att-compact-page.wf-page .ad .ad-today { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .att-compact-page:is(.dv-page, .wf-page) .ad .ad-today-link {
        height: 100%; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; border-radius: 10px;
    }
    .att-compact-page:is(.dv-page, .wf-page) .ad .ad-today-ic { display: none; }
    .att-compact-page.de-page .ad .de-date-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px 16px; }
    .att-compact-page.de-page .ad .de-date-card .ad-today-head { margin: 0; border: 0; padding: 0; }
    .att-compact-page.de-page .ad .de-date-card .de-day { align-self: center; margin: 0; }
    .att-compact-page.de-page .ad .de-date-card .de-day-today { grid-column: 2; }
    .att-compact-page.de-page .ad .de-date-card .ad-today { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .att-compact-page.de-page .ad .de-date-card .ad-today-link { height: 100%; }
}
@media screen and (max-width: 899px) {
    .att-compact-page:is(.dv-page, .wf-page) .ad .ad-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .att-compact-page.dv-page .ad .ad-today-row:last-child { grid-column: 1 / -1; }
    .att-compact-page:is(.dv-page, .wf-page) .ad .ad-today-link { height: 100%; }
    .att-compact-page .ad .rp-step { margin-inline-start: 0; }
}
@media screen and (max-width: 767px) {
    .att-compact-page .ad .rp-fields { grid-template-columns: minmax(0, 1fr); }
    .att-compact-page .ad .rp-go { min-height: 44px; }
    .att-compact-page .ad :is(.rp-step-link, .ir-range) { min-height: 44px; }
    .att-compact-page .ad .ir-month { display: flex; max-width: none; }
    .att-compact-page .ad .de-bar-acts { width: 100%; }
    .att-compact-page .ad .de-bar-acts > button { flex: 1 1 auto; min-height: 44px; }
}
@media screen and (max-width: 479px) {
    .att-compact-page:is(.dv-page, .wf-page) .ad .ad-today-link { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px; align-content: start; }
    .att-compact-page:is(.dv-page, .wf-page) .ad :is(.ad-today-ic, .ad-today-go) { display: none; }
    .att-compact-page.de-page .ad .de-day { flex-wrap: wrap; border-radius: 12px; }
    .att-compact-page.de-page .ad .de-day-input { flex-basis: 130px; }
}
@media screen {
    .att-compact-page.ir-page .ad .ir-month { width: min(100%, 400px); flex-wrap: nowrap; }
    .att-compact-page.ir-page .ad .ir-month .rp-in { width: auto; }
}
@media screen and (min-width: 900px) {
    .att-compact-page.ir-page .ad .ir-glass:has(.ir-pick) {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px;
    }
    .att-compact-page.ir-page .ad .ir-glass:has(.ir-pick) .ad-today-head { grid-column: 1 / -1; margin-bottom: 0; }
    .att-compact-page.ir-page .ad .ir-glass:has(.ir-pick) .ir-pick { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
    .att-compact-page.ir-page .ad .ir-glass:has(.ir-pick) .ir-l { grid-column: 2; grid-row: 2; margin: 0; }
    .att-compact-page.ir-page .ad .ir-glass:has(.ir-pick) .ir-ranges { grid-column: 2; grid-row: 3; margin: 0; }
    .att-compact-page.ir-page .ad .ir-glass:has(.ir-pick) .ir-month-row { grid-column: 1; grid-row: 4; align-self: center; margin: 0; }
    .att-compact-page.ir-page .ad .ir-glass:has(.ir-pick) .ir-month { grid-column: 2; grid-row: 4; width: 100%; max-width: none; margin: 0; }
    .att-compact-page.ir-page .ad .ir-glass:has(.ir-pick) .ir-custom { grid-column: 1 / -1; margin-top: 0; }
    .att-compact-page.ir-page .ad .ir-custom-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
    .att-compact-page.ir-page .ad .ir-custom-form .ir-go { grid-column: auto; }
}
@media screen and (max-width: 767px) {
    .att-compact-page .ad .de-day :is(.de-day-step, .de-day-input, .de-day-go),
    .att-compact-page .ad .rp-type span,
    .att-compact-page .ad .de-chip { min-height: 44px; }
    .att-compact-page .ad .ir-custom > summary { min-height: 44px; display: flex; align-items: center; }
}

/* Attendance is a focused phone app, including when opened on a desktop. */
@media screen {
    body.ci-clock-app {
        display: block; max-width: 520px; margin: 0 auto; padding: 0;
        min-height: 100dvh; background: var(--ci-bg);
    }
    .ci-clock-app .ci-hero {
        position: relative; top: auto; min-height: 0; border-radius: 0 0 24px 24px;
        padding: calc(16px + env(safe-area-inset-top)) 0 20px;
    }
    .ci-clock-app .ci-hero-in { padding-inline: 20px; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; }
    .ci-clock-app .ci-topbar { position: static; gap: 12px; grid-column: 1 / -1; }
    .ci-clock-app .ci-app-txt b { font-size: 1rem; font-weight: 500; }
    .ci-clock-app .ci-app-txt > span { font-size: .8rem; }
    .ci-clock-app .ci-person { margin-top: 2px; gap: 10px; grid-column: 1; grid-row: 2; }
    .ci-clock-app .ci-avatar { width: 44px; height: 44px; flex-basis: 44px; }
    .ci-clock-app .ci-avatar-img { width: 100%; height: 100%; }
    .ci-clock-app .ci-name { font-size: 1.22rem; font-weight: 500; }
    .ci-clock-app .ci-hello { display: none; }
    .ci-clock-app .ci-dept { display: none; }
    .ci-clock-app .ci-clockbox { display: contents; }
    .ci-clock-app .ci-clock { grid-column: 2; grid-row: 2; font-size: 2.2rem; line-height: 1.2; }
    .ci-clock-app .ci-date { grid-column: 1 / -1; margin-top: 0; font-size: .94rem; text-align: center; }
    .ci-clock-app .ci-sched { grid-column: 1 / -1; margin-top: 0; }
    .ci-clock-app .ci-school { grid-column: 1 / -1; margin-top: 4px; }
    .ci-clock-app .ci-sched li { padding: 6px; }
    .ci-clock-app .ci-shell { max-width: none; margin: 12px 0 0; gap: 12px; padding: 0 12px calc(104px + env(safe-area-inset-bottom)); }
    .ci-clock-app .ci-card { padding: 16px; border-radius: 20px; }
    .ci-clock-app .ci-main { margin-top: 0; --ci-dial: 184px; --ci-go: 164px; }
    .ci-clock-app .ci-main-title { font-size: 1.12rem; font-weight: 500; }
    .ci-clock-app .ci-loc { margin-top: 10px; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 10px; }
    .ci-clock-app .ci-radar, .ci-clock-app .ci-radar svg { width: 48px; height: 48px; }
    .ci-clock-app .ci-day { margin-top: 10px; padding-top: 10px; }
    .ci-clock-app .ci-foot { padding: 0 8px; }
    .ci-clock-app .ci-foot-school { font-size: .875rem; line-height: 1.6; }
    .ci-clock-app .ci-web-report { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px; color: var(--ci-brand-ink); text-decoration: none; border: 1px solid var(--ci-line); border-radius: 14px; background: var(--ci-surface); font-size: 1rem; }
    .ci-clock-app[data-app-view="clock"] .ci-app-settings { display: none; }
    .ci-clock-app[data-app-view="settings"] :is(.ci-main, .ci-welcome, .ci-web-report, .ci-person, .ci-clockbox) { display: none; }
    .ci-clock-app[data-app-view="settings"] .ci-device { margin: 0; }
    .ci-clock-app .ci-app-nav {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        position: fixed; left: 50%; right: auto; transform: translateX(-50%); bottom: 0;
        width: min(100%, 520px); z-index: 90; gap: 6px;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
        background: var(--ci-surface); border-top: 1px solid var(--ci-line);
        box-shadow: 0 -4px 20px rgba(15, 23, 42, .08);
    }
    .ci-clock-app .ci-app-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: 4px; border-radius: 12px; text-decoration: none; color: var(--ci-ink-2); font-size: .94rem; font-weight: 400; line-height: 1.4; }
    .ci-clock-app .ci-app-nav i { font-size: 1.4rem; }
    .ci-clock-app .ci-app-nav a[aria-current] { color: var(--ci-brand-ink); background: var(--ci-info-bg); font-weight: 500; }
    .ci-clock-app .ci-update-banner { bottom: calc(86px + env(safe-area-inset-bottom)); }
    .ci-clock-app :is(.ci-btn, .ci-link, .ci-foot-link) { min-height: 48px; font-size: 1rem; }
    .ci-clock-app .ci-topbtn { min-width: 44px; min-height: 44px; }
}