/* Shared compact-face calendar and menu styling. */

/* The pin is the house SVG drawing, masked so it takes the text colour
 * (Kikaron loads no icon font) — and only on a button
 * that does not already carry the drawing inline. */
body[data-global-nav="compact"] .app-label-favourite > button.icon-bookmark:not(:has(> svg.kik-icon))::before,
body[data-global-nav="compact"] .app-label-favourite > button.icon-bookmark-empty:not(:has(> svg.kik-icon))::before {
    content: "";
    background-color: currentColor;
    -webkit-mask: var(--kik-svg-pin) center / 1em 1em no-repeat;
    mask: var(--kik-svg-pin) center / 1em 1em no-repeat;
    /* …and the ONE thing the swap does not get for free: optical size. The
     * pin is drawn to fill its em box top to bottom (16.5px of ink at the
     * menu's 18px), while the glyphs it stands beside in the app-label menu
     * are cap-height marks — the help ? is 12.8px, the close ✕ 11.8px. Same
     * 16px icon cell, same centring, and the pin still read a size larger
     * than its neighbours and hung below their line. Corrected the way the
     * Music transport glyphs are (toolbar.css, "per-glyph optical
     * corrections"): shrink the glyph, not the cell, so nothing about the
     * row's geometry moves. */
    font-size: 0.8em;
}

/* Cloud mode: the EVENTS app calendar (FullCalendar 7) goes edge-to-edge in
 * the document body. Its inset comes from padding on the .document-content
 * that holds the pane — drop left/right/bottom so the calendar reaches those
 * edges (top stays, below the app toolbar). The FC view's rounded corners and
 * inset 1px hairline (its card chrome) flatten to square, no shadow, no
 * border. */
body[data-global-nav="compact"] .application-body.application-events .document-content:has(.events-calendar-pane) {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
/* The grid is flush to the screen edges here, so its rounded frame is
 * squared and FC's own border dropped — but it keeps a hairline (Daniel,
 * 2026-08-29). Without one the grid has no edge at all: the top row runs
 * straight into the bar above it and the last hour into the strip below,
 * and a calendar reads as a ruled surface, so the outermost rule has to be
 * there like all the others. The theme's own inset ring, restated through
 * the house border token rather than the theme's literal rgba, so a brand
 * that re-tones its lines re-tones this too. */
body[data-global-nav="compact"] .application-body.application-events .kik-events-calendar .kik-fc-view {
    border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--default-border-colour);
    border: none;
}
/* The bar's two gutters, as vars so the app CSS can read them back: the
 * narrow bar pulls its wrapped title row out over them again (a row that
 * carries no toggles, so the date centres on the calendar — see
 * apps/events/styling/all.css). The right one reserves the window's
 * controls' room — --kik-win-trailing-slot, one slot outside windowed mode
 * (the close outlives the mode) and two inside, from libraries/kikaron/
 * windowed-mode; the left is the plain 16px while the sidebar is open, and
 * the sidebar handle's own slot once it collapses onto the bar. */
body[data-global-nav="compact"] .application-body.application-events {
    --kik-fc-bar-gutter-start: 16px;
    --kik-fc-bar-gutter-end: calc(var(--kik-win-inset) + var(--kik-win-trailing-slot));
}
body[data-global-nav="compact"] .application-body.application-events.sidebar-left-closed {
    --kik-fc-bar-gutter-start: calc(var(--kik-win-inset) + var(--kik-win-slot));
}
/* A phone keeps none at all: there the close is hidden too (the carousel
 * shell closes an app), and the slot would reserve room for nothing — which
 * on a phone is exactly the room the clock and + need to stay on the control
 * row. */
@media (max-width: 680px) {
    html:not(.kik-windowed) body[data-global-nav="compact"] .application-body.application-events {
        --kik-fc-bar-gutter-end: 16px;
    }
}
/* …but NOT the sidebar handle's slot at the start: a phone-sized window used
 * to drop that one too, on the grounds that the handle sat under the bar's
 * landing back there. That button is gone (partials/app_body_frame.html —
 * the pane's own handle is the one control that opens the column, on every
 * width), and on a phone the handle is painted over a landing bar's leading
 * end with nothing beneath it to hold its room. The 16px start then put the
 * month title's first letters under the hamburger disc (Daniel, 2026-09-06:
 * "the month name disappears behind the hamburger disc"). The inset-plus-slot
 * the wider bar reserves is exactly right here as well: the handle sits at
 * the inset at every width, and its slot is the handle's own size.
 *
 * In the drawer band the key is focus-document rather than sidebar-left-closed:
 * below 768 the sidebar-left-* pair is inert (the drawer is out in
 * focus-sidebar and parked in focus-document — libraries/kikaron/sidebar), so
 * a pane parked with `sidebar-left-open` still on it has the handle over this
 * bar all the same. With the drawer out the handle rides the drawer, and the
 * plain 16px is right again. */
@container main (width <= 768px) {
    body[data-global-nav="compact"] .application-body.application-events.focus-document {
        --kik-fc-bar-gutter-start: calc(var(--kik-win-inset) + var(--kik-win-slot));
    }
    body[data-global-nav="compact"] .application-body.application-events.focus-sidebar {
        --kik-fc-bar-gutter-start: 16px;
    }
}

body[data-global-nav="compact"] .application-body.application-events .kik-events-calendar
    .fc-classic-dl1.fc-classic-1sP.fc-classic-dNl.fc-classic-XpK.fc-classic-N2M.fc-classic-wwb {
    padding: 0 var(--kik-fc-bar-gutter-end) 0 var(--kik-fc-bar-gutter-start);
}
/* The last chunk (timezone + create) clusters at the row's end with the
 * toolbar's own gap — FC spreads a chunk's children apart otherwise. */
body[data-global-nav="compact"] .application-body.application-events .kik-events-calendar
    .fc-classic-yi0.fc-classic-dl1.fc-classic-1sP.fc-classic-XpK.fc-classic-wwb:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pat-toolbar-element-separation, 12px);
}
/* FC view body wrapper (fc-classic-Jk3, likewise a hashed classic-theme
 * name): square its corners and drop its left/right/bottom borders so the
 * grid meets the flush edges cleanly. */
body[data-global-nav="compact"] .application-body.application-events .kik-events-calendar .fc-classic-Jk3 {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
/* THE TWO SEGMENTED GROUPS ARE NOT DRAWN HERE. (Daniel, 2026-08-30.)
 *
 * What stood in this place was a third hand-drawn cluster: a 1px ring and a
 * 20px radius on the group wrapper, the per-button rings cleared, and an
 * inset 1px seam between abutting buttons — written when FullCalendar's
 * classic theme outlined every button and the seams doubled up.
 *
 * Both groups are pat-button-clusters now, and the component draws exactly
 * that frame itself, from the same tokens as every other strip in the house.
 * Two of these three did nothing but repeat it. The third actively broke it:
 * `overflow: hidden` on the wrapper clips the current item's accent pill,
 * which button-cluster.css paints one toggle-margin OUTSIDE the item's box on
 * all four sides — so the lit segment came back cropped flush to its label.
 *
 * The FC per-button ring that made the seams necessary is gone with the
 * dress in events-fullcalendar-theme (keyed `:not(.kik-fc-grouped)` there),
 * and the cluster clears its children's borders and grounds on its own. */
/* Match the FC toolbar controls (buttons + timezone select) to the regular
 * .pat-toolbar .icon: its frost background + backdrop-blur, and its hover.
 * FC's classic theme gives them a flat opaque button background with no
 * backdrop-filter; align to the exact vars the effective .pat-toolbar .icon
 * uses (frost-background / icon-backdrop-filter, verified against a real
 * events-app icon — NOT the dark --pat-toolbar-icon-background-colour). The
 * today button is a default-background button with an orange DOT glyph, so it
 * is INCLUDED — it gets the frost bg + hover, dot untouched. Only the active
 * view / today[aria-pressed] toggles are excluded, keeping their app-colour
 * accent (this scoped selector would otherwise out-specify their own rules
 * and grey out the selection). */
/* …AND NOT INSIDE A CLUSTER (Daniel, 2026-08-29). The two grouped strips —
 * month/week/day and ‹ • › — are pat-button-clusters now
 * (events-calendar.js), and a cluster carries ONE frosted surface for the
 * whole strip. Frosting each segment inside it as well drew a strip of pills
 * within a strip, which is the thing the conversion was for. Excluded here
 * rather than reset in the app CSS because this is the rule that paints it:
 * it carries an attribute and four classes, so nothing downstream can undo it
 * — measured, twice, before this was found with CSS.getMatchedStylesForNode.
 * The standalone controls (the clock, the +, the bell) keep the frost, which
 * is what it was written for. */
body[data-global-nav="compact"] .application-body.application-events .kik-events-calendar
    :is(.kik-fc-toolbar-button, .kik-events-tz-select):not([aria-pressed="true"]):not(.kik-fc-view-active):not(.kik-fc-cluster *) {
    background-color: var(--pat-toolbar-icon-frost-background);
    -webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
    backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
}
@media (hover: hover) {
  body[data-global-nav="compact"] .application-body.application-events .kik-events-calendar
    :is(.kik-fc-toolbar-button, .kik-events-tz-select):not([aria-pressed="true"]):not(.kik-fc-view-active):not(.kik-fc-cluster *):hover {
      background-color: var(--pat-toolbar-icon-background-colour-hover);
}
}

/* While the personal menu is open, the avatar's plate deepens into a recessed
   SLOT — an inset shadow all round, so the face sits IN the bar rather than on
   it. The avatar only — it is the one control in the row holding a picture, and
   the socket is what seats it; around a glyph, or standing at rest, it is a box
   drawn around nothing. Open-menu only: there is no hover twin (below).
   .tooltip-active-click lands on the anchor itself here: the avatar IS the
   pat-context-menu trigger, unlike the launcher, where it sits on a child of
   the label that paints. */
/* Painted ON THE ELEMENT, not on a pseudo: the avatar has none to spare.
   ::before is .pat-avatar's initials disc and ::after is now its tooltip, this
   control having joined the ones that name themselves on hover. It does not
   need a pseudo anyway — the anchor IS the 36px box the plate was drawing, so
   it can carry the wash and the slot itself. The transparent/none pair below
   is what it rests at. */

/* The hopper needs the plate DRAWN as well as coloured: unlike the fullscreen
   toggle it never had a ::before of its own, so there was no box for the wash
   to land in — the two controls sit side by side and only one answered the
   pointer. Same 36x36 centred plate, same corner. */

/* The PICTURE is a disc; its SEAT is not. .pat-avatar's own 50% is kept on the
 * photo and on the initials disc — a face reads as a face at a circle, and it
 * is the one control in the row holding one. The anchor around it keeps
 * --kal-corner-radius, the corner the tabs, the pinned app icons and the plate
 * behind it all round by, so the wash that arrives on hover is the same square
 * with the same corner the rest of the row answers with. Two shapes, one inside
 * the other, which is what the pulled-in scale below makes room for.
 *
 * That means the disc cannot stay on the ANCHOR, where .pat-avatar puts it: an
 * element cannot shrink away from its own background. It moves to ::before,
 * which carries the initials — one layer, transformed as a unit — and the
 * anchor keeps nothing but the hit box. Its inset shadow goes for the same
 * reason: it paints under the element's content, so anything pulling off it
 * leaves the dark circular edge behind. Neither was ever visible on its own —
 * a full-bleed photo, or a disc of exactly the same colour, sat on top — but
 * the plate is a 6% wash rather than paint, so both would show through it as a
 * ring the moment the avatar pulled in.
 *
 * ::before is taken out of the grid and stretched over the whole box to BE
 * that disc. As a grid item it shrink-wraps the initials — a text-sized blob,
 * and not even a square one — and stretching it inside the grid doesn't help:
 * .pat-avatar centres its tracks (justify-content/align-items), so the track
 * it would stretch to is that same content box. Absolute + inset:0 measures
 * the anchor instead, which is the 34px square we want a circle of. grid-area
 * has to go with it: a definite grid placement would make the AREA the
 * containing block again, straight back to the content box. Stretched, it
 * re-centres the initials itself (place-content), the line-height that used to
 * do it no longer matching the box. A photo avatar never reaches any of this —
 * .pat-avatar:has(img) takes ::before out entirely. */

@container screen style(--screen-small: true) {

    /* A 42px SQUARE is not a tab, so it carries no × — the same rule the
       chip's other two square docks follow (base.css: the rail and the phone
       bar). At this width the tab has given up its title and become the tile
       again, and a 15px close disc over a 42px cover hides the artwork that
       says what is playing. The player is one press away, and it closes from
       there. */

}

/* The face sits INSIDE its seat at all times. The pulled-in size used to be the
   open-menu state only, the avatar filling its 36px square at rest and shrinking
   into the plate while its panel was up; Daniel (2026-08-20) wanted the smaller
   face to be the resting one. So the scale is unconditional, and what the open
   menu changes is the plate alone — the wash and the inset slot, which now have
   the ring of clear space around the face to show themselves in.

   Still a scale rather than a smaller box: the anchor is the 36px seat the row
   is measured on (and the hit target, and the plate), so only its CONTENTS pull
   in. No transition left — nothing moves between states. */

@media (hover: hover) {
    /* Positioned against the CONTROL, not the viewport (Daniel, 2026-08-16:
       it did not look centred underneath its trigger). A fixed box with only
       `top` set takes its horizontal place from the static position, which is
       wherever the pseudo-element would have sat inside its control — for a
       flex control with centred content that is not the control's middle, and
       no amount of translating guesses it reliably. Anchoring to the control
       and centring on it is exact and needs no measurement. */

    /* …and the FIRST control gives it up for the same reason at the other end
       (Daniel, 2026-08-16). The candy tile opens the row, so centring on it
       sends half the label — and "Dashboard" is a wide one — past the left
       edge of the screen, where it is simply cut off. It stops 5px clear
       instead, the mirror of the avatar above.
       Straight from the viewport rather than from the control: this box is
       already position: fixed (the row clips, which is what that is for), so
       a plain `left` is measured off the viewport edge and needs no knowledge
       of what sits to the tile's left. */
    
}

/* --- THE CANDY BOX LIGHTS UP WHILE THE DESK IS THE ACTIVE APP (moved here
   from windowed-mode.css on 2026-09-04; keyed on html.kik-one, which only
   the One/Pro faces render).

   The box is the apps launcher, and since the apps grid lives in the desk
   (the bento's Apps portlet, the phone home's grid) tapping it brings the
   desk forward. It takes the swirl's treatment exactly — accent plate, white
   glyph (the waffle is an inline SVG stroked in currentColor). This out-ranks
   the apps-page-in-view tint in cloud-dashboard.css (a plain id/class chain)
   through the :has() prefix, which is what should happen: "the desk IS the
   page you are on" is the stronger statement of the two.

   NOT the phone bar's trigger. That one is a 50x64 hit area with a 32px chip
   inside it (--kik-dock-icon-size), so plating the trigger gave a tall
   rectangle instead of a square, and the bar paints its own iconography black
   with !important, which left the waffle dark on orange. The bar's chip
   already had the whole treatment — accent plate, white glyph, square, at the
   right strength — in phone_app_carousel.html; it is keyed there. The docked
   rail's trigger is a rail row (global-nav-side-rail.css). */