/* ==========================================================================
   Toolbar — the one bar above a list
   ==========================================================================

   THE RULE. The card goes on the item; the name goes on the ground. A toolbar
   is neither: it is furniture, so it takes the ground's edges and earns its
   own hairline only where it groups controls that belong together.

   ⛔ **WHY THIS EXISTS.** `/entries/` opened on FIVE stacked bands before the
   first day of the month was visible — page title, lede, four buttons, a
   filter fold, a row of view pills, and then the calendar's own month row.
   Measured on 2026-09-07 that came to **304px on a 1280 desktop and 374px on a
   390 phone**, which on the phone is most of the first screen spent on chrome.
   Gabriel: *"I think this top now is a bit messy and I was thinking how to
   organize it to take a bit less space, and considering the mobile dimentions
   as well."*

   ⭐ **THREE PRIMITIVES, AND THEY ARE NOT INTERCHANGEABLE.** Each answers a
   different question, and using the wrong one is how a toolbar turns back into
   a pile of buttons:

     · `.segmented`    — ONE thing, N readings. Exactly one option is true at a
                         time and the active one is filled. Use it for a view
                         switch, never for actions.
     · `.action-group` — N peer ACTIONS that belong to one subject, joined on
                         hairlines so they read as one object rather than three
                         loose buttons. None of them is "on".
     · `.list-toolbar` — the row that holds them, with the state control (the
                         filter fold) pushed to the far end.

   ⚠️ **THE ODD ONE OUT STAYS OUTSIDE THE GROUP.** On `/entries/` the primary
   door — *New entry* — is a filled button beside the group, not a member of
   it: a joined run says *these are the same kind of thing*, and one of the
   four is the thing the page exists for.

   ⛔ **44px IS THE FLOOR AND IT IS NOT NEGOTIABLE HERE EITHER.** Joining
   controls is exactly where that gets lost, because the container's border
   looks like it is doing the work. Every option and every item declares its
   own `min-height`.

   ⚠️ **`overflow: hidden` CLIPS A FOCUS RING.** Both groups clip their
   children to the pill so the active fill and the hover ground follow the
   radius, which means an outside outline is invisible. Every focusable child
   in this file draws its ring INSIDE itself (`outline-offset: -3px`).

   📐 docs/admin/design_system.md "The toolbar" · components/filters.css for
      the `--inline` modifier that puts the filter fold on this row.
   ========================================================================== */

.list-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

/* Everything after this lands at the far end of the bar. State (filters) is
   the far end; readings (the segmented control) are the near end. */
.list-toolbar__end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ── Segmented: one thing, N readings ───────────────────────────────────── */

.segmented {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.segmented__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: 44px;
    padding: 0 var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-quick) var(--ease-out),
        color var(--duration-quick) var(--ease-out);
}

@media (hover: hover) {
    .segmented__option:hover {
        background: var(--surface-hover);
        color: var(--text-color);
    }
}

/* ⛔ The same fill pair the list pills used before this, and for the same
   reason: white on `--accent` is 2.46:1 and fails AA. `--accent-tint` with
   `--primary-dark` on it clears it by a wide margin, and dark.css remaps
   both sides. */
.segmented__option.is-active {
    background: var(--accent-tint);
    color: var(--primary-dark);
}

.segmented__option:focus-visible {
    outline: var(--border-width-md) solid var(--primary);
    outline-offset: -3px;
}

/* ── Action group: N peer actions on one subject ────────────────────────── */

.action-group {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.action-group__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 0 var(--space-md);
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-quick) var(--ease-out);
}

/* The hairline between peers. It is the only thing saying they are a run and
   not one wide button, so it is drawn on the divider tone rather than the
   faint one. */
.action-group__item + .action-group__item {
    border-left: var(--border-width) solid var(--border-color);
}

@media (hover: hover) {
    .action-group__item:hover {
        background: var(--surface-hover);
    }
}

.action-group__item:focus-visible {
    outline: var(--border-width-md) solid var(--primary);
    outline-offset: -3px;
}

/* ── Narrow: the words give, the target does not ────────────────────────── */
/*
 * ⛔ **THE LABEL IS HIDDEN, NOT DELETED.** `display: none` would take the
 * accessible name with it and leave three unlabelled marks in a row, which is
 * worse than the width problem it solves. This is the `sr-only` recipe applied
 * to the label only, so the button keeps its name for a screen reader and for
 * `aria-label`-free markup.
 *
 * ⚠️ Three labelled actions at 390 is ~300px against a 374px content column,
 * with a primary button already on the row. Icon-only is what makes them one
 * row instead of two.
 */
@media (max-width: 40rem) {
    .action-group__item {
        /* 16px of mark plus 12px either side is 40px — under the floor. The
           mark keeps its gutters and the item claims the rest. */
        min-width: 44px;
    }

    .action-group__item .action-group__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Three readings at 16px of side padding each is 258px before the filter
       control gets a pixel. The words stay; the gutters give. */
    .segmented__option {
        padding: 0 var(--space-sm);
    }
}