/* The phone dock's app row — #kik-dock-apps, rendered into the bottom bar by
   templates/partials/phone_dock_apps.html (Daniel, 2026-09-20).

   The favourite apps as a row of icons at the left end of the bar, the
   Dashboard first, as many as fit before the multi-tasking button.

   MONOCHROME AT REST, COLOURED WHEN OPEN (Daniel, 2026-09-20). Every
   resting glyph is drawn in ONE ink — --kik-dock-ink, the bar's own. The row
   used to paint each app in its own colour, as the tiles do: right on a home
   screen, where the colour is how a tile is found among forty-five, and wrong
   on a strip of six controls at the foot of every screen, where six colours
   are chrome competing with the page above them.

   THE APP ON SCREEN KEEPS ITS COLOUR, though, as the box behind its glyph:
   one colour on a monochrome row is the strongest thing the bar can say, and
   what it says is which app you are in — the same colour its tile, its tab
   and its window wear. In the switcher the row
   hands the strip to the dot track: that fade is the carousel's
   (phone-app-carousel.css lists the row with the bar's other chrome and
   the JS painter drives it per frame), not this sheet's.

   Phone widths only — the same 680px query the carousel follows. Above it
   the row is not painted at all: the compact faces between 681 and 768px
   keep the bar with its candy box alone, as before. */

#kik-dock-apps { display: none; }

@media (max-width: 680px) {
    body[data-global-nav="compact"] #global-nav-side > #kik-dock-apps {
        display: flex;
        /* THE ONE INK, for the whole row. The bar's own text colour where
           the face sets one; the rail's muted ink otherwise. */
        --kik-dock-ink: var(--gns-ink, var(--gns-muted, #6B6560));
        /* AS MANY AS FIT: the row wraps, and the second line falls below the
           control band, where the hidden overflow keeps it. So an icon that
           does not fit is dropped WHOLE — never cut in half at the edge —
           and the count follows the width by itself. */
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 0 4px;
        /* Absolute like the track and the label before it, so the bar's flex
           line (the candy box at the right rim) is unaffected. */
        position: absolute;
        left: 10px;
        /* Never under the candy box: 8px of bar padding + its 50px hit area
           + 8px of air — the same 66px the media chip perches at. */
        right: 66px;
        top: 0;
        /* The control band, not the bar: the bar grows by the safe area and
           pads that space BELOW its controls. */
        height: var(--workspace-tabs-bar-height, var(--gns-mobile-height));
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    /* The media-player chip, when it is showing, perches immediately left of
       the candy box (global-nav-side.css) — the row ends before it. */
    body[data-global-nav="compact"] #global-nav-side:has(> .kik-media-player-chip:not([hidden])) > #kik-dock-apps {
        right: calc(66px + var(--kik-dock-icon-size, 46px) + 8px);
    }

    #kik-dock-apps > .kik-dock-app {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        position: relative;
        /* The tap target: the same 48px the rail's app rows and the candy
           box's own link take. The whole control band tall, so the wrap
           puts a second line entirely out of the band. */
        width: 48px;
        height: 100%;
        /* SEATED ON WHOLE PIXELS (Daniel, 2026-09-20). The band is 65 and the
           box 46, so centring leaves 9.5 above and below — half a CSS pixel,
           which on a 3x screen is a half DEVICE pixel, and the engine rounds
           it one way for the top edge and the other for the bottom: the plate
           came out a device pixel above the glyph row and its two horizontal
           edges antialiased differently, which is what reads as a box that is
           not quite square. Floored instead: the top gap is whole, the odd
           pixel goes below, and both edges land on the grid. ``round()`` so
           the sum is taken from the band's own height rather than from a
           number copied out of it; an engine without it keeps the centring it
           has always had. */
        justify-content: center;
        margin: 0;
        padding: 0;
    }
    #kik-dock-apps > .kik-dock-app[hidden] { display: none; }

    #kik-dock-apps .kik-dock-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: inherit;
        font: inherit;
        line-height: 0;
        text-decoration: none;
        /* A launcher, not a text link: no pointer (house rule), and no
           iOS link preview or selection callout on a held finger. */
        cursor: default;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    /* The menu flavour shows only for the app on screen — the generated
       rules in the partial flip the pair per favourite. */
    #kik-dock-apps .kik-dock-menu { display: none; }

    /* The icon box: the dock's own size and radius, the ones the candy box
       wears at the other end of the bar (global-nav-side.css declares
       both), so the row and the button read as one strip of controls. */
    @supports (margin: round(down, 3px, 2px)) {
        #kik-dock-apps > .kik-dock-app .kik-dock-icon {
            align-self: flex-start;
            margin-top: round(down, calc((var(--workspace-tabs-bar-height,
                var(--gns-mobile-height, 64px)) - var(--kik-dock-icon-size, 46px)) / 2), 1px);
        }
    }

    #kik-dock-apps .kik-dock-icon {
        display: flex;
        /* The glyph sits in the middle of the box whatever size it is drawn
           at: a mark that does not fill its canvas would otherwise start at
           the box's top-left corner and hang off the row's centre line. */
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        box-sizing: border-box;
        width: var(--kik-dock-icon-size, 46px);
        height: var(--kik-dock-icon-size, 46px);
        padding: 5px;
        border-radius: var(--kik-dock-icon-radius, 10px);
        overflow: hidden;
        /* The glyphs are drawn in currentColor: the dock's ink paints the
           resting glyph, white the boxed one. */
        color: var(--kik-dock-ink, #6B6560);
        background: transparent;
        transition: background-color var(--base-animation-duration, 0.25s) ease,
                    color var(--base-animation-duration, 0.25s) ease;
    }
    #kik-dock-apps .kik-dock-icon svg,
    #kik-dock-apps .kik-dock-icon img {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* RESTING: the coloured glyph, no box. The same two recipes the cloud
       rail paints its glyphs with, keyed on the same .app-icon / .rail-icon
       split (is_stroke_icon in the partial): a filled glyph is coloured
       through fill, an outline through stroke — forcing fill on an outline
       floods every path into a solid block. !important throughout, as on
       the rail: the icons carry presentation attributes of their own, and
       the themes reach .app-icon with rules of their own. */
    #kik-dock-apps .kik-dock-icon.app-icon * {
        fill: var(--kik-dock-ink, #6B6560) !important;
    }
    #kik-dock-apps .kik-dock-icon.app-icon svg #dots {
        fill: transparent !important;
    }
    #kik-dock-apps .kik-dock-icon.rail-icon * {
        /* The ink at the theme's fill strength behind the line — usugami's
           duotone in one colour; 0% (line art) on a theme without the knob. */
        fill: color-mix(in srgb, var(--kik-dock-ink, #6B6560)
            var(--app-icon-fill-opacity, 0%), transparent) !important;
        stroke: var(--kik-dock-ink, #6B6560) !important;
        stroke-width: var(--app-icon-stroke-width, 1.5);
    }
    #kik-dock-apps .kik-dock-icon.rail-icon [fill="none"] {
        fill: none !important;
    }
    #kik-dock-apps .kik-dock-icon.rail-icon svg #dots {
        fill: transparent !important;
        stroke: transparent !important;
    }

    /* PRESSED: the finger is on it (kik-dock-app--pressed, stamped at
       pointerdown by the JS): the rail's own hover tint, at once — no
       transition on the way in, so the tap reads as registered before
       anything else has happened (Daniel, 2026-09-20). */
    #kik-dock-apps > .kik-dock-app--pressed .kik-dock-icon {
        background: var(--kik-dock-press-tint, rgba(0, 0, 0, 0.07));
        transition: none;
    }
    /* ON SCREEN: the app's tile, rebuilt at dock size — its own colour as the
       plate, the glyph in white on top. The one colour on the row, and the
       only thing that has to be found at a glance (see the head note). Three ways an entry is the one on
       screen: the JS stamped it at the tap (kik-dock-app--on, held until the
       carousel's eased hand-over has written the shell's class — a second,
       otherwise), a favourite's menu flavour is showing (it only ever does
       then), or the desk is the active app and this is Home. An app that is
       not a favourite has no icon here at all (Daniel, 2026-09-20). */
    #kik-dock-apps > .kik-dock-app--on .kik-dock-icon,
    #kik-dock-apps .kik-dock-menu .kik-dock-icon,
    body:has(#app-space.state-on.active-app-dashboard) #kik-dock-apps > .kik-dock-app--home .kik-dock-icon {
        background: var(--app-colour, var(--colour-accent, #F37021));
        color: #fff;
    }
    #kik-dock-apps > .kik-dock-app--on .kik-dock-icon.app-icon *,
    #kik-dock-apps .kik-dock-menu .kik-dock-icon.app-icon *,
    body:has(#app-space.state-on.active-app-dashboard) #kik-dock-apps > .kik-dock-app--home .kik-dock-icon.app-icon * {
        fill: #fff !important;
    }
    #kik-dock-apps > .kik-dock-app--on .kik-dock-icon.rail-icon *,
    #kik-dock-apps .kik-dock-menu .kik-dock-icon.rail-icon *,
    body:has(#app-space.state-on.active-app-dashboard) #kik-dock-apps > .kik-dock-app--home .kik-dock-icon.rail-icon * {
        /* White line, and the icons' own wash of white inside it — the same
           treatment the candy box gets when it lights. */
        fill: color-mix(in srgb, #fff var(--app-icon-fill-opacity, 0%), transparent) !important;
        stroke: #fff !important;
    }
    #kik-dock-apps > .kik-dock-app--on .kik-dock-icon.rail-icon [fill="none"],
    #kik-dock-apps .kik-dock-menu .kik-dock-icon.rail-icon [fill="none"],
    body:has(#app-space.state-on.active-app-dashboard) #kik-dock-apps > .kik-dock-app--home .kik-dock-icon.rail-icon [fill="none"] {
        fill: none !important;
    }
    /* …softened exactly as the launcher tile softens it (apps-grid.css
       declares --kik-app-glyph-opacity): white line art at full strength on
       a saturated block reads as a wall of ink. */
    #kik-dock-apps > .kik-dock-app--on .kik-dock-icon svg,
    #kik-dock-apps .kik-dock-menu .kik-dock-icon svg,
    body:has(#app-space.state-on.active-app-dashboard) #kik-dock-apps > .kik-dock-app--home .kik-dock-icon svg {
        opacity: var(--kik-app-glyph-opacity, 0.65);
    }

    /* Counter badge on a favourite (Mail's unread, Messages', Monitor's
       failing checks): the same corner disc the header quick icons wore.
       On the entry, not inside the link, so it never swallows the tap. */
    #kik-dock-apps .kik-dock-badge {
        position: absolute;
        top: 6px;
        inset-inline-end: -1px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--colour-alert, #dc2626);
        color: #fff;
        border-radius: 999px;
        font-size: 10px;
        line-height: 1;
        font-weight: 600;
        pointer-events: none;
        vertical-align: middle;
    }
}

/* ── THE CANDY BOX IS ONE OF THE ROW ──────────────────────────────────
 *
 * The switcher's control at the far end of the bar wears the dock's box
 * already (global-nav-side.css gives it --kik-dock-icon-size and the same
 * radius), but not the dock's INSET: 7px against the row's 5, which left its
 * glyph drawn on a 32px canvas where an app's is drawn on 36. With its
 * artwork 21 units wide against the house 18 (global_nav_side.html), the two
 * errors compounded the same way and the one control at the end of the bar
 * came out visibly bigger and more heavily stroked than the icons beside it
 * (Daniel, 2026-09-20: "the candy box looks larger than the others").
 *
 * The drawing is on the house grid now; this gives it the row's inset, so it
 * is built exactly as every other glyph on the bar is: 46px box, 5px inset,
 * 18 units of art.
 */
@media (max-width: 680px) {
    body[data-global-nav="compact"] #global-nav-side .gns-candy-item .gns-icon {
        padding: 5px;
    }
}