/* Platform-wide choice tiles. `.global-choice-tiles` / `.global-choice-tile` is the
   canonical way to ask a form question whose answer is one of two or three kinds
   of thing, where the answer changes what the rest of the form asks for.

       <div class="global-choice-tiles" role="group" aria-label="Schedule">
         <button type="button" class="global-choice-tile is-active">
           <i class="bi bi-calendar-event"></i>
           <span class="global-choice-tile__name">One-time</span>
         </button>
         <button type="button" class="global-choice-tile">
           <i class="bi bi-arrow-repeat"></i>
           <span class="global-choice-tile__name">Recurring</span>
         </button>
       </div>

   Scope, against the two controls it sits between. `.global-segmented`
   (components/segmented.css) flips a SETTING — which slice of a list you are
   looking at — and stays small and inline so it reads as chrome. These tiles
   answer a question the record is built around, so they take the full width of
   the field they occupy and carry a glyph: the weight is the point, because the
   fields below rearrange behind the answer. `.global-add-tile`
   (components/add-tile.css) is the other bordered slot in this family and is not
   a choice at all — it grows a list, and nothing about it is ever "active".

   No label rides above this. A segmented control needs one because two bare
   words in a pill track do not say what they are picking between; a pair of
   full-width tiles with glyphs does, and a label on top of them only repeats
   the question the tiles already ask. */

/* ── The track ── equal columns so neither option looks like the default, and
   full width so the pair reads as one control spanning the field rather than
   two buttons that happen to sit together. */
.global-choice-tiles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--spacing-sm);
    width: 100%;
}

/* ── One option ── the resting state is the same bordered card slot
   .global-add-tile uses, for the same reason: the border is the whole
   affordance, so it binds to --color-border rather than --color-border-subtle
   and stays visible under prefers-contrast. */
.global-choice-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2xs);
    padding: var(--spacing-smd);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        color var(--transition-fast);
}

/* The glyph rides the large-glyph step rather than the tile's own text size: it
   is what makes the pair readable before either word is. */
.global-choice-tile i {
    font-size: var(--font-size-xl);
    line-height: 1;
}

.global-choice-tile__name {
    font-weight: var(--font-weight-medium);
}

/* ── Stacked ── `.global-choice-tiles--stacked` puts one option on each row, each
   a full-width button with the name centred on one line (a glyph is optional
   here: a person's or organisation's name needs none): the shape
   of the stacked `.global-add-tile` buttons in the opportunity drawer, kept a
   choice by the same `is-active` mark. For a narrow drawer where the answers are
   names of people or organisations, which crowd a side-by-side pair. */
.global-choice-tiles--stacked {
    grid-auto-flow: row;
}

.global-choice-tiles--stacked .global-choice-tile {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-mdlg);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
}

/* The option you are NOT in firms its hairline and darkens its text, so it reads
   as reachable without pretending to be chosen. */
.global-choice-tile:hover {
    border-color: var(--color-action);
    color: var(--color-text);
}

/* The chosen option. The mark is a doubled edge — the border plus the platform
   inset ring in the same ink — rather than a filled panel, which is what keeps
   the pair legible on any tenant's brand instead of resolving to one house
   colour. Defined after :hover so the active tile stays marked while hovered. */
.global-choice-tile.is-active {
    border-color: var(--color-action);
    color: var(--color-action);
    box-shadow: var(--shadow-inset-ring-strong);
}

/* Platform focus treatment (matches .global-add-tile / .global-segmented): an
   offset outline, not a ring shadow. A tile that is a <label> around a hidden
   radio shows the ring when that radio has keyboard focus. */
.global-choice-tile:focus-visible,
.global-choice-tile:has(:focus-visible) {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}