/* =====================================================================================
   tablet.css — the iPad-first override layer for Prism.Web.

   Loaded LAST on every page (after main.css and each page's own CSS section), so a rule
   here wins on cascade order alone; nothing in it needs !important. It exists so the
   touch-device fixes live in one reviewable file instead of being scattered through
   main.css (100 KB, hand-maintained, not generated from main.scss).

   The measured problems it fixes (iPad UI review, 2026-09-08):
     1. main.css sized the WHOLE UI by viewport width (.content-wrapper 2em → 1.5 → 1.15
        → 0.75 → 0.5em at 1815/1310/1010/670px). Portrait iPad (768px) fell into the
        0.75em band: 12px base, 9px child names. Rotating the tablet shrank everything by
        a third. The 1010px breakpoint sat 14px under an iPad landscape.
     2. Tap targets: nav tabs 36px tall in portrait, popup close 24×24, "Log out" an 18px
        text link, datepicker cells and sub-tabs smaller still (Apple HIG minimum: 44pt).
     3. The staff header (133px) + tab bar (55px) took 24% of a landscape screen.
     4. The Register grid was a fixed 4-across at 23% width with 0.55em text.
     5. The child popup was a 75%-wide, top-anchored box with tiny sub-tabs.
     6. :hover styling sticks on iOS after the first tap.
   ===================================================================================== */

:root {
    --prism-type-base: 17px;   /* one fixed touch type scale, both orientations */
    --prism-tap: 44px;         /* Apple HIG minimum hit target */
    --prism-accent: #062b57;
    --prism-bar: #97CEFC;
}

@media (min-width: 1300px) {
    /* 12.9" iPad Pro (1366 CSS px landscape) has the room for a slightly larger scale. */
    :root { --prism-type-base: 19px; }
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ---- 1. Type scale -------------------------------------------------------------- */

.content-wrapper,
header .content-wrapper {
    font-size: var(--prism-type-base);
}

/* ---- 2. Tap targets ------------------------------------------------------------- */

.toggle-button label,
.ActionButton,
a.ActionButton,
button,
input[type="button"],
input[type="submit"] {
    box-sizing: border-box;
    min-height: var(--prism-tap);
    height: auto;
    padding: 0.5em 0.8em;
    font-size: 1em;
    line-height: 1.2;
}

.toggle-button label,
.ActionButton,
a.ActionButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;   /* main.css set overflow-x:auto on labels, which clipped descenders */
}

/* Inputs cannot be flex containers; give them the same height by padding instead. */
input[type="text"],
input[type="password"],
select,
#datepicker {
    box-sizing: border-box;
    min-height: var(--prism-tap);
    font-size: 1em;
    padding: 0.3em 0.5em;
}

/* jQuery UI tabs (child popup, observations, activities) */
.ui-tabs .ui-tabs-nav li a,
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    display: inline-flex;
    align-items: center;
    min-height: var(--prism-tap);
    padding: 0.4em 1em;
    font-size: 1em;
}

/* jQuery UI datepicker */
.ui-datepicker { font-size: 1em; }
.ui-datepicker td a,
.ui-datepicker td span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--prism-tap);
    min-width: var(--prism-tap);
    box-sizing: border-box;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    width: var(--prism-tap);
    height: var(--prism-tap);
    top: 0.2em;
}

/* Room picker (dropit) */
.dropit ul.dropit-submenu a {
    min-height: var(--prism-tap);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1.2em;
}

/* Popup close box: was 2em (24px) — now a full-size target with the icon centred in it. */
.ClosePopUp {
    width: var(--prism-tap);
    height: var(--prism-tap);
    min-width: var(--prism-tap);
    background-size: 22px 22px;
    background-position: center;
    background-repeat: no-repeat;
    margin: -0.2em -0.2em 0 0;
}

/* Checkboxes were CSS-scaled 2–3× and left un-padded; give them a real box. */
input[type="checkbox"],
input[type="radio"]:not(.toggle-button input) {
    width: 28px;
    height: 28px;
    margin: 0.4em;
}

/* ---- 3. Compact staff header -------------------------------------------------- */

header .header-table { display: block; }
header .header-table .header-row {
    display: flex;
    align-items: center;
    gap: 0.75em;
    min-height: 56px;
    padding: 0.25em 0.75em;
}
header .header-table .header-row .header-cell {
    display: block;
    padding: 0;
    width: auto;
}
header .header-table .header-row .header-cell:first-of-type { width: auto; }
header .header-table .header-row .header-cell img {
    width: 44px;
    height: 44px;
    padding: 0;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
header .header-table .header-row .header-cell:nth-of-type(2) {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6em;
    min-width: 0;
}
#StaffMemberName { font-weight: 600; }
#StaffMemberLocation { color: #555; font-size: 0.9em; }
#TimeInOuts { white-space: nowrap; }

/* "Hello, Log out" was an 18px text link. The "Hello, <username>" text is never populated
   (the span stays empty), so only the button is shown. */
#UsernameText { display: inline-flex; align-items: center; font-size: 0; }
#login .Log {
    font-size: var(--prism-type-base);
    display: inline-flex;
    align-items: center;
    min-height: var(--prism-tap);
    padding: 0 1em;
    border: 1px solid #b2b2b2;
    border-radius: 6px;
    background: linear-gradient(#ffffff, #e4e4e4);
    color: #333;
}

/* ---- 3b. Room bar: one wrapping flex row, sticky ------------------------------ */

.RoomHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.5em;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--prism-bar);
}
.RoomHeader div { display: block; }   /* Rooms.css made every div inline-block */
.RoomHeader .LocationSelectionContainer { order: 1; }
.RoomHeader .datepickerContainer { order: 2; float: none; margin: 0; }
.RoomHeader .PhotoButtonContainer {
    /* Portrait: on the first row with room + date, pushed right. */
    order: 3;
    float: none;
    width: auto;
    margin-left: auto;
}
.RoomHeader .RoomActionsRadioButtons {
    /* Portrait: the tab strip gets its own full-width row and scrolls sideways if it must. */
    order: 4;
    float: none;
    flex: 1 1 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.RoomHeader .PhotoButtonContainer .ActionButton { float: none; }
.RoomHeader nav.toggle-button {
    display: flex;
    gap: 0.25em;
    min-width: max-content;
}
.RoomHeader nav.toggle-button label { white-space: nowrap; flex: 0 0 auto; }
#LocationDropDownList, #LocationDropDownList li { margin: 0; padding: 0; }
#datepicker { width: 6.5em; text-align: center; }

@media (min-width: 1000px) {
    /* Landscape: everything on one line. flex-basis 0 means the strip never WRAPS — it takes
       whatever width the room / date / photo controls leave and scrolls inside if that is
       short (7 tabs at 17px need ~640px; a 1024px iPad leaves ~650). */
    .RoomHeader .RoomActionsRadioButtons { flex: 1 1 0; order: 3; }
    .RoomHeader .PhotoButtonContainer { order: 4; margin-left: 0; }
    /* The strip already claims the leftover width, but its tabs bunched against the date button
       and left a wide gap before Take Photo. Centre them in that space so the margin either side
       is equal. `safe` matters: this element scrolls sideways when the tabs do not fit (1024px
       iPads), and a plain `center` would push the first tab out of the scrollable start where it
       could never be reached — `safe` falls back to flex-start exactly in that case. */
    .RoomHeader nav.toggle-button { margin-inline: auto; }
    .RoomHeader nav.toggle-button label { padding-left: 0.45em; padding-right: 0.45em; }
    #datepicker { width: 5.5em; }
}
@media (min-width: 1000px) and (max-width: 1299px) {
    /* 1024-wide iPads: seven tabs at full size overflow the strip by ~60px; a 5% smaller
       label face keeps every tab visible without a scroll. Height stays at --prism-tap. */
    .RoomHeader nav.toggle-button label { font-size: 0.95em; }
}

/* ---- 3c. Menus: Menus.css scales the whole section to 0.8em; keep the fixed scale ------- */

#MenusSection { font-size: 1em; }
#MenusSection nav.toggle-button label { min-height: var(--prism-tap); padding: 0.5em 0.8em; }
#MenusSection nav.toggle-button { display: inline-flex; gap: 0.25em; margin: 0.3em 0; }

/* ---- 4. Register grid ------------------------------------------------------------ */

#ContentDiv {
    display: grid;
    /* Narrower columns pay for the taller portrait frame: the card gains height from the 3:4
       photo, so trimming the minimum keeps roughly as many children on screen as before. */
    grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr));
    gap: 0.75em;
    padding: 0.75em;
}
.ChildCard {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    min-height: 13em;
    margin: 0;
    padding: 0.6em;
    font-size: 0.85em;
    border-radius: 12px;
    border: 2px solid transparent;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(6, 43, 87, 0.15);
}
.ChildCard .ChildName {
    order: 1;
    font-size: 1.1em;
    font-weight: 600;
    padding-bottom: 0.3em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ChildCard .ChildHeadShot {
    order: 2;
    width: 100%;
    padding: 0;
    text-align: center;
}
.ChildCard .ChildHeadShot img {
    /* Every child photo is PORTRAIT — measured on Dev: 400x494..533, i.e. a ratio of 0.75-0.81,
       almost exactly 3:4. The frame was landscape (176x130, ratio 1.36), so `cover` was throwing
       away nearly half the image height on every card. Match the frame to the source and the crop
       nearly vanishes. */
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: none;
    object-fit: cover;
    /* Still cover, for the occasional photo that is not 3:4 (one Dev record is 114x130). Anchored
       to the top because cover's default 50% 50% trims the head off an upright portrait. */
    object-position: top;
    border-radius: 8px;
}
.ChildCard .ChildAttendances,
.ChildCard .ChildNappyChanges,
.ChildCard .ChildSleeps {
    order: 3;
    display: block;
    width: auto;
    height: auto;
    margin-top: 0.4em;
    font-size: 0.9em;
    line-height: 1.3;
}
.ChildCard .ChildAttendanceList { height: auto; overflow: visible; }
.ChildCard .ChildAttendanceLabel,
.ChildCard .ChildAttendanceTimes { display: inline-block; margin-right: 0.3em; }
/* State is the card colour (green / grey / navy, from Register.css) — reinforce it with a border. */
.ChildAttendingCard { border-color: #3aa64a; }
.ChildSleepingCard { border-color: #062B57; }
.ChildNotAttendingCard { border-color: #cfcfcf; }

/* ---- 5. Child popup: a centred sheet sized to the viewport ---------------------- */

#ChildAttendancePopUpContainer {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1em;
    box-sizing: border-box;
}
#ChildAttendancePopUpContainer.is-open { display: flex; }
#ChildAttendancePopUpContainer .Popup {
    margin: 0;
    /* 820px, not 720: the six tabs (Attendances/Sleeps/Nappy Changes/Activities/
       Observations/Notes) measure 760px at the 17px base and 820px at the 19px base a
       12.9" Pro gets. The old 720px cap sat 1px under the smaller of the two, so "Notes"
       wrapped to a second line on EVERY landscape iPad with 340px of viewport unused
       beside the sheet. Widen the sheet rather than tighten the tabs — their padding is
       already floored at the 44px tap target. Portrait still takes 92vw and may wrap. */
    width: min(92vw, 820px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
#ChildAttendancePopUpContainer .PopupHeader {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.6em 0.75em;
    min-height: 0;
}
#ChildAttendancePopUpContainer .PopupHeader .ChildHeadShot { width: auto; }
#ChildAttendancePopUpContainer .PopupHeader .ChildHeadShot img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    object-position: top;

    border-radius: 50%;
    max-height: none;
}
#ChildNameAttendancePopupLabel { flex: 1 1 auto; font-size: 1.3em; font-weight: 600; }
#ChildAttendancePopUpContainer .ClosePopUp {
    float: none;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.6);
}
#ChildAttendancePopUpContainer .ui-tabs .ui-tabs-nav li a { padding: 0.4em 0.7em; }
#ChildAttendancePopUpContainer .PopupContent {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 12em;
}

/* Time control — one shared #TimeControl is moved between the Attendance / Sleep /
   Nappy tabs. Big digits, a real Accept, and the −/+ steppers added in Register.cshtml. */
/* The table's intrinsic width (973px measured) forced a sideways scroll inside the sheet;
   flatten it to a wrapping flex row so it fits any sheet width. */
#TimeControl table, #TimeControl tbody, #TimeControl tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    width: 100%;
}
#TimeControl td { display: block; vertical-align: middle; padding: 0; }
#TimeControl td:empty { display: none; }
#timeControlLabel { font-size: 1.1em; padding-right: 0.5em; white-space: nowrap; }
#timeControlHours, #timeControlMins {
    font-size: 1.8em;
    font-variant-numeric: tabular-nums;
    min-width: 1.4em;
    text-align: center;
}
.TimeStep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--prism-tap);
    height: var(--prism-tap);
    border: 1px solid #b2b2b2;
    border-radius: 8px;
    background: linear-gradient(#ffffff, #e4e4e4);
    font-size: 1.3em;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.TimeStep:active { background: #d8d8d8; }
.TimeStepGroup { display: inline-flex; flex-direction: column; gap: 0.2em; }
#TimerControlAcceptButton {
    min-width: 6em;
    font-size: 1.1em;
    background: var(--prism-accent);
    color: #fff;
    border-color: var(--prism-accent);
}
#AddGPLandmarkBtn { font-size: 0.9em; }

/* ---- 5d. Nappy-change checkboxes ----------------------------------------------- */
/* These were painting at 84px and hanging off the left edge of the sheet, across their own
   labels. Two enlargements were compounding: Register.css predates this file and makes them
   tappable the old way, `transform: scale(3)`, while tablet.css sizes the control itself to
   28px — 28 x 3 = 84. The overflow is the second half of the bug: a transform does not change
   layout, so an 84px paint sits in a 28px slot and spills 28px past each side.

   Size the control, drop the scale. The row is a <label> now, so the text is part of the hit
   target and the whole line — not just the box — is the 44px tap target. */
#NappyChangeOptionList > label {
    display: flex;
    align-items: center;
    gap: 0.6em;
    min-height: var(--prism-tap);
    padding: 0.15em 0.4em 0.15em 0;
    cursor: pointer;
}
#NappyChangeOptionList input[type="checkbox"],
#NappyChangeOptionList input[type="radio"] {
    transform: none;                 /* Register.css scale(3)/scale(2) — superseded, and it overflowed */
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0;
}

/* ---- 5e. Observations: Unapproved list + the Learning Journey sheet ------------- */
/* main.css shrinks the whole Unapproved Observations panel with `#tabs-unapproved
   { font-size: 0.6em }`, which measured 11.2px on the tablet — the observation list, its column
   headings and the detail labels all well under the 12px floor, on a screen staff read at arm's
   length. Restore it to the touch scale; the panel's own 25%/75% split still holds because it is
   proportional. */
#tabs-unapproved { font-size: 0.95em; }
/* The two columns are inline-blocks at 30% + 70% with a 1em margin between them, which only
   fitted while the text was 0.6em. At a readable size the pair overflows the row and the second
   column drops below the first, so the screen becomes a single tall stack. Give the margin and
   the inline-block whitespace somewhere to live. */
#tabs-unapproved #observationListContainer { width: 28%; }
#tabs-unapproved #observationApprovalContainer { width: calc(72% - 2em); }
/* Those two orange buttons were pinned to width: 50%, which clipped "Review History" mid-word
   once the type grew. Let them size to their label. */
#tabs-unapproved #observationApprovalContainer .left-container .buttons input {
    width: auto;
    min-width: 9em;
}

/* The Learning Journey picker was a 0.6em (10.2px) sheet whose content box was 103px tall inside
   a 567px popup — 392px of empty white below the table — because .PopupContent was sized by its
   content under a max-height rather than being told to fill. Make the sheet a flex column so the
   table takes every pixel the header does not, and scrolls inside itself. */
#LearningJourneyPopupContainer {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1em;
    box-sizing: border-box;
}
#LearningJourneyPopupContainer .Popup {
    width: min(94vw, 1100px);
    height: 92vh;
    max-height: 92vh;                /* .PopupContainer .Popup caps every sheet at 70% */
    margin: 0;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
#LearningJourneyPopupContainer .Popup .PopupHeader {
    height: auto;                    /* was 7em — a fixed band sized for the old 10px type */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.6em 0.75em;
}
#LearningJourneyPopupContainer .Popup .PopupHeader .PopupHeaderLabel {
    flex: 1 1 auto;
    font-size: 1.3em;
    font-weight: 600;
}
#LearningJourneyPopupContainer .Popup .PopupHeader input {
    float: none;
    margin-right: 0;
    order: 1;
}
#LearningJourneyPopupContainer .Popup .PopupHeader .ClosePopUp {
    float: none;
    order: 2;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.6);
}
#LearningJourneyPopupContainer .Popup .PopupContent {
    max-height: none;                /* the flex box owns the height now */
    flex: 1 1 auto;
    min-height: 0;                   /* without this a flex item refuses to shrink and scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
#LearningJourneyPopupContainer .Popup .PopupContent #landmark-selection-list_wrapper {
    flex: 1 1 auto;
    min-height: 0;
}
#LearningJourneyPopupContainer .Popup .PopupContent select {
    min-height: var(--prism-tap);
    font-size: 1em;
}
#LearningJourneyPopupContainer #landmark-selection-list td,
#LearningJourneyPopupContainer #landmark-selection-list th { padding: 0.5em 0.6em; }

/* ---- 5f. The Learning Journey grid in the shared Landmarks popup ---------------- */
/* Same grid, different sheet: #LandmarksPopupContainer holds the age-range x category
   percentage table, and main.css draws it at `font-size: 0.5em` — a measured 8.5px, the smallest
   text in the app — filling only 694px of a 959px popup.

   Enlarging the type alone would burst it: the columns are sized by `min-width: 10em` per
   category, so at a readable size 8 columns want ~1160px and the table would overflow the sheet
   instead of fitting it. So the column sizing has to change with the type: a fixed table layout
   at width 100% divides the sheet evenly, and the grid then fills the popup at any scale. */
#LandmarksPopupContainer .Popup #LandmarksPopupContent {
    font-size: 0.85em;
    width: 100%;
    table-layout: fixed;
}
/* Table cells default to vertical-align: BASELINE, so a header that wraps to two lines aligns on
   the baseline of its FIRST line and its box sits lower than its single-line neighbours —
   "Expressive, Art & Design" was 9px out of line with the rest of the row. Aligning to the top
   and letting each box fill the row height puts every header on the same two edges. */
#LandmarksPopupContainer .Popup #LandmarksPopupContent .header .catHeader {
    vertical-align: top;
    /* height:1px gives the cell a DEFINITE height, which is what lets the child's height:100%
       resolve; table layout still stretches the cell to the tallest header in the row. Without it
       only the wrapping cell filled its cell and the rest stayed at their 3em minimum, so the
       boxes shared a top edge but not a bottom one (visible in portrait, where more of them wrap). */
    height: 1px;
}
#LandmarksPopupContainer .Popup #LandmarksPopupContent .header .catHeader .primaryCategory {
    min-width: 0;                    /* 10em x 8 columns cannot fit once the text is legible */
    height: 100%;
    min-height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}
#LandmarksPopupContainer .Popup #LandmarksPopupContent .learningJourneyRow .ageRangeCell {
    width: 12%;
}
#LandmarksPopupContainer .Popup #LandmarksPopupContent .learningJourneyRow .learningJourneyCell div {
    line-height: 2.6em;
}
#LandmarksPopupContainer .Popup .PopupContent {
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- 6. Login ---------------------------------------------------------------- */

#loginForm .LoginEntryForm {
    width: min(90vw, 420px);
    height: auto;
    font-size: 1em;
    margin: 2em auto;
}
#loginForm .LoginEntryFormRow { margin-bottom: 1em; }
#loginForm .LoginEntryFormRow > div { display: block; }   /* label above field, not beside it */
#loginForm .LoginEntryFormLabel { width: auto; margin-bottom: 0.3em; font-weight: 600; }
#loginForm fieldset { border: 0; padding: 0; margin: 0; }
#loginForm { padding-bottom: 2em; }
#loginForm input[type="text"],
#loginForm input[type="password"] {
    width: 100%;
    font-size: 1.1em;
    min-height: 48px;
}
#loginForm button {
    min-height: 48px;
    min-width: 8em;
    font-size: 1.1em;
    background: var(--prism-accent);
    color: #fff;
    border: 0;
    border-radius: 6px;
}
#loginHeader h2 { font-size: 1.5em; }
#loginForm .LoginError {
    margin: 0 0 1em;
    padding: 0.7em 1em;
    border-radius: 6px;
    background: #fde8e8;
    color: #8a1c1c;
    border: 1px solid #f3b5b5;
}

/* ---- 5c. Activities child cards ------------------------------------------------ */
/* main.css gave the three per-child buttons `font-size: 0.4em` at 30.33% width — a measured
   6.7px face, well under half the 17px body and smaller even than the 9px portrait case this
   file was written to fix. They were unreadable, and at 53px wide they missed the 44px tap
   target on the horizontal axis too.

   Stacking them rather than shrinking them is what buys the space: three labels side by side
   in a 174px card leaves ~53px each, but one per row leaves the full card width, so the text
   can go up to a legible ~14px AND each button becomes a full-width tap target. The card is
   given an explicit width so the row layout no longer depends on the buttons' percentages. */

/* main.css pins the card at `height: 12em; overflow: hidden`, sized for the 6.7px buttons —
   at a legible size the lower two are simply clipped away. Let the card grow to its content. */
#scheduleChildrenList .ChildActivities { height: auto; overflow: visible; }
#scheduleChildrenList .ChildActivities .ChildActivityDetails { width: 100%; }
#scheduleChildrenList .ChildActivities .ChildActivityDetails button,
#scheduleChildrenList .ChildActivities .ChildActivityDetails button:first-of-type,
#scheduleChildrenList .ChildActivities .ChildActivityDetails button:last-of-type {
    display: block;
    width: 100%;
    height: auto;
    min-height: var(--prism-tap);
    margin: 0 0 0.3em;
    padding: 0.4em 0.6em;
    font-size: 0.85em;
    line-height: 1.25;
    border-radius: 8px;
}

/* ---- 5b. Menus: the column headings and meal buttons stay on screen ------------ */
/* The dish names label unlabelled circles — scroll them away and a row of "None"s means
   nothing, so a practitioner has to scroll back up to find out which column is Porridge.
   Same for the meal-time buttons: you cannot see which meal you are filling in.

   Both now ride in ONE sticky bar. Keeping them in a single element is what removes the
   offset arithmetic — two separately-stuck rows would need the second one's `top` to track
   the first one's height, which changes with the type scale (17px / 19px). Column alignment
   survives the move because the columns are fixed em widths (.ChildMenuDetails 8em,
   .DishLabel / .FoodEatenLabel 7em) and this bar carries the same 1% padding as .MenusContent. */

#MenuRadioButtonsContainer {
    position: sticky;
    top: 0;
    z-index: 6;
    background: #f3f3f3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
#MenuRadioButtonsContainer #DishHeaders {
    display: block;
    overflow: visible;              /* it no longer scrolls independently of the rows below */
    white-space: nowrap;
    background: transparent;
    border-bottom: 0;
    padding-top: 0.3em;
    font-weight: 600;
}
/* #ChildrenContainer reserved 3em for the headings when they sat in the scrolling content.
   They are in the bar above now, so that gap is just dead space at the top of the list. */
.MenusContent #ChildrenContainer { margin-top: 0; }

/* ---- 6b. Sign-out sheet (the Daily Diary) ------------------------------------- */
/* This is the LAST thing a practitioner sees before a child goes home, and it was the
   worst-looking screen in the app: main.css gave .ChildFeedback a flat `background-color:
   red` header fixed at 200px, holding a headshot div nothing ever populated — so the sheet
   opened with a blank scarlet slab and 1.2em dark-red-on-red text. Below it the section
   headings were raw CSS keywords (orange / yellow / lightgreen / steelblue) at 2em, and the
   Ok button sat at the bottom of a 973px scroll inside a 567px sheet: reachable, but only by
   scrolling the header away first, on the one screen where the next action should be obvious.

   Rebuilt as a proper sheet: fixed header, scrolling body, pinned action. The colour coding
   is kept — it helps staff find a section at a glance and it is the nursery's own palette —
   but as a left accent rule on a pale tint rather than a saturated fill. */

#ChildDailyDiaryPopUpContainer {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1em;
    box-sizing: border-box;
}
#ChildDailyDiaryPopUpContainer .Popup {
    margin: 0;
    width: min(92vw, 820px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;               /* the BODY scrolls, not the whole sheet */
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* Header: compact, branded, and it stays put while the body scrolls. */
#ChildDailyDiaryPopUpContainer .ChildFeedback .PopupHeader,
#ChildDailyDiaryPopUpContainer .PopupHeader {
    height: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.6em 0.75em;
    background: var(--prism-bar);
    color: #10243c;
}
#ChildDailyDiaryPopUpContainer .PopupHeader .leftColumn {
    display: flex;
    align-items: center;
    gap: 0.75em;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}
#ChildDailyDiaryPopUpContainer #ChildDailyDiaryPopupHeadshot { flex: 0 0 auto; }
#ChildDailyDiaryPopUpContainer #ChildDailyDiaryPopupHeadshot img {
    width: 56px;
    height: 56px;
    max-height: none;
    object-fit: cover;
    object-position: top;

    border-radius: 50%;
    display: block;
}
#ChildDailyDiaryPopUpContainer .PopupHeader .titleLabels { min-width: 0; }
#ChildDailyDiaryPopUpContainer #ChildDailyDiaryNamePopupLabel {
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.2;
}
#ChildDailyDiaryPopUpContainer #ChildDailyDiaryLocationPopupLabel,
#ChildDailyDiaryPopUpContainer #dailyDiaryAttendances {
    font-size: 0.85em;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}
#ChildDailyDiaryPopUpContainer .PopupHeader .rightColumn {
    width: auto;
    float: none;
    flex: 0 0 auto;
}
#ChildDailyDiaryPopUpContainer .PopupHeader .RainbowSmilesLogo { width: 5.5em; height: 3em; }
#ChildDailyDiaryPopUpContainer .ClosePopUp {
    float: none;
    order: 99;
    flex: 0 0 auto;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.6);
}

/* Body: the only scrolling region. */
#ChildDailyDiaryPopUpContainer .PopupContent {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1em 0;
    display: flex;
    flex-direction: column;
}

/* Section headings — colour-coded, but calm and uniform. */
#ChildDailyDiaryPopUpContainer .ChildFeedback .DiarySubtitle,
#ChildDailyDiaryPopUpContainer .ChildFeedback #DiaryActivitiesTitle,
#ChildDailyDiaryPopUpContainer .ChildFeedback #DiaryLandmarksTitle,
#ChildDailyDiaryPopUpContainer .ChildFeedback #DiaryNotesTitle {
    width: auto;
    left: auto;
    position: static;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 1.1em 0 0.5em;
    padding: 0.45em 0.7em;
    border-radius: 6px;
    border-left: 5px solid #9a6b00;
    background: #fdf3dc;
    color: #3a2a00;
}
#ChildDailyDiaryPopUpContainer .ChildFeedback #DiaryActivitiesTitle {
    border-left-color: #a08400; background: #fbf5d0; color: #3a3100;
}
#ChildDailyDiaryPopUpContainer .ChildFeedback #DiaryLandmarksTitle {
    border-left-color: #2f7d3a; background: #e6f4e8; color: #14351a;
}
#ChildDailyDiaryPopUpContainer .ChildFeedback #DiaryNotesTitle {
    border-left-color: #2b5f8a; background: #e6eff7; color: #12293c;
}
/* Plain sub-headings inside Physical Needs (Meals / Sleeps / Nappy Changes). */
#ChildDailyDiaryPopUpContainer .PopupContent h3:not(.DiarySubtitle) {
    font-size: 1em;
    margin: 0.9em 0 0.3em;
    color: #333;
}

/* Action bar: pinned to the foot of the scroll, so "what do I press" never needs hunting. */
#ChildDailyDiaryPopUpContainer .DiaryActions {
    position: sticky;
    bottom: 0;
    margin: auto -1em 0;            /* full-bleed across the body's 1em padding */
    padding: 0.7em 1em;
    background: #fff;               /* opaque: content scrolls BEHIND it, so a fade is unreadable */
    border-top: 1px solid #e2e2e2;
    display: flex;
    justify-content: flex-end;
}
#ChildDailyDiaryPopUpContainer .DiaryActions input[type="button"] {
    min-width: 9em;
    font-size: 1.1em;
    background: var(--prism-accent);
    color: #fff;
    border: 1px solid var(--prism-accent);
    border-radius: 8px;
}
#ChildDailyDiaryPopUpContainer #CollectionContactList { padding-top: 0.5em; }

/* ---- 7. Hover states only where a pointer can hover --------------------------- */

@media (hover: none) {
    .toggle-button label:hover { box-shadow: none; color: #666666; }
    .dropit ul.dropit-submenu a:hover { background: inherit; color: #333; }
    #PhotoSelectionPopupContainer #PhotoSelectionPopup #PhotoSelectionPopupContent #ObservationPhotoThumbnailList img:hover {
        border-color: #efeeef;
    }
}