/*
 * Activity selection — the one screen in front of every wizard.
 *
 * Deliberately self-contained (its own `as-` classes): the screen is shown before any wizard exists
 * on the page. The one thing it shares is wizard-create.css — .btn, .spinner and .hidden — which the
 * selector's own view asks for, so those hold even when no wizard rendered.
 *
 * TWO SCREENS, ONE QUESTION EACH. First the four areas, then the plans in the one that was picked.
 * An area tile and a plan card are allowed to look equally clickable, because a reader never sees
 * both at once.
 *
 * The first screen carries one exception to that: two rows of the six most popular plans over the
 * areas, a shortcut past the choice rather than part of it. They are drawn from the same tile as
 * the plans inside an area, because a plan is a plan on either screen — what keeps the two grids
 * from reading as the same question asked twice is the label over each of them, and the areas
 * below carrying a tagline and a count that a plan tile does not.
 *
 * COLOUR IS THE CLASSIFICATION. Each area carries its own accent, handed in from the view as three
 * custom properties on the tile and again on its plan list:
 *
 *     --as-rgb       the accent as bare components — "34,197,94" — so this file can build the solid
 *                    colour, rgb(var(--as-rgb)), and every tint of it, rgba(var(--as-rgb), .12),
 *                    from one value
 *     --as-ink       the shade the glyph, the name and the count are drawn in on a light ground
 *     --as-ink-dark  the same, for the dark theme, where a mid accent goes muddy
 *
 * They inherit, which is the whole point: a plan card sitting inside "Mind & Wellbeing" picks up
 * violet without being told which area it is in, so the second screen never has to re-explain where
 * the reader is standing. A shortcut tile is handed the accent of the area that holds its plan, so
 * it agrees with the screen it opens; .activity-selector carries a green default, which is what a
 * shortcut to a plan no area holds falls back to.
 *
 * The screen is read before it is used, so it is built to be scanned: a glyph carrying the
 * difference between one tile and the next, the name under it, and nothing else — a plan's
 * explanation is behind the button in its bottom-right corner and opens under the row it belongs
 * to. Nothing on the screen moves unless the reader asks it to.
 *
 * It renders into whatever column it is dropped in (half the hero on the home page, a dashboard
 * panel, the full width of a phone), so every size here is fluid — with one exception. The four
 * areas are a fixed 2×2: four tiles are what fits a phone screen without a scroll, and a grid that
 * filled by measure would give a wide panel a row of four or a lonely 3+1, which is neither the
 * shape the copy was written for nor one a reader can take in at a glance.
 */

.activity-selector {
    width: 100%;

    /* The accent every area overrides, and the one anything outside an area is drawn in. */
    --as-rgb: 34,197,94;
    --as-ink: #16a34a;
    --as-ink-dark: #4ade80;
}

/* The screen borrows the wizard container's card treatment so the flow looks continuous. */
.as-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-top: 3px solid #22c55e;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    padding: 14px 13px 13px;
    margin-top: 6px;
    animation: as-fade-in 0.28s ease-out;
}

/* ── The floor ───────────────────────────────────────
   The one the wizard's own steps stand on: --wc-grid-min-height, declared in wizard-controls.css
   and READ here rather than copied, so the selection screen and the wizard behind it cannot drift
   apart when one of them is retuned.

   What it is for there is what it is for here — a panel with little in it filled so little of the
   card that it read as though it had failed to load. Two screens here are in that position: the
   wait screen, which is a spinner and two lines, and the areas screen, which comes to just under
   the floor with four tiles on it.

   On the panel rather than on the content inside it, because these screens have no single content
   area the way a wizard step has its .wc-grid — and the panel is the card, which is the thing a
   reader actually sees the size of. Content taller than the floor simply grows past it: this only
   ever adds height that was missing, and the plans screen (which is taller than this with four
   plans on it) never feels the rule at all.

   The custom path's description screen is deliberately absent: it stands on the wizard's own
   floor already, because the control area inside it is a .wc-grid and that is where the floor is
   declared. Adding it here too would only stack a header and a footer on top of a card that is
   the right height. */
.as-panel[data-as-screen="areas"],
.as-panel[data-as-screen="plans"],
.as-panel[data-as-screen="loading"],
.as-panel[data-as-screen="choice"],
.as-panel[data-as-screen="signin"],
.as-panel[data-as-screen="overview"],
.as-panel[data-as-screen="generating"],
.as-panel[data-as-screen="finishing"],
.as-panel[data-as-screen="failed"] {
    min-height: var(--wc-grid-min-height, 384px);
}

@keyframes as-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes as-rise {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ──────────────────────────────────────────────────── */

.as-header { text-align: center; margin-bottom: 13px; }

/* Scoped to this screen's own heading, not every h2 under .activity-selector — the chosen
   wizard renders inside that element, and a bare descendant selector here outranked nothing but
   tied with .wizard-container h2, so load order alone decided how big a wizard's step names were. */
.as-header h2 {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 3px;
    color: var(--bs-heading-color);
}

.as-sub {
    font-size: 12.5px;
    color: var(--bs-secondary-color);
    margin: 0;
}

/* ── Icons ───────────────────────────────────────────────────────
   Content icons are authored SVG, so they arrive with whatever width, height and colour someone
   gave them. The box decides the size and `currentColor` decides the colour: the same icon then
   works on a plan card and on an area tile without being re-drawn. */

.as-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.as-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.as-icon--xl { width: 24px; height: 24px; }
.as-icon--lg { width: 19px; height: 19px; }
.as-icon--md { width: 19px; height: 19px; }

/* ── Step 1: the four areas ──────────────────────────────────────
   A fixed 2×2 (see the note at the top of this file). Tiles stretch to a common height so the row
   reads as a row whatever length of tagline each one was given. */

.as-areas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 9px;
}

/* A button, not a container: an area tile holds no control of its own, so it gets to be one —
   which is a keyboard target, a focus ring and a role for free. Everything a button brings with it
   has to be unset first. */
/* An <a> — the area's own address, /plans/{slug} — drawn as a tile. The three link properties are
   reset here rather than fought with everywhere: it is a tile a reader clicks, not a word in a
   sentence, so it carries the body's colour and no underline in any state. */
.as-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 13px 12px 11px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s, transform .12s, box-shadow .16s, background .16s;
}

/* The cap. Four tiles, four colours, read before a single word of the copy is — which is the whole
   job of splitting the catalogue into areas in the first place. */
.as-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgb(var(--as-rgb));
    opacity: .9;
}

.as-area:hover,
.as-area:focus,
.as-tile-pick:hover,
.as-tile-pick:focus { color: inherit; text-decoration: none; }

.as-area:hover {
    border-color: rgba(var(--as-rgb), .55);
    box-shadow: 0 7px 20px rgba(var(--as-rgb), .18);
    transform: translateY(-2px);
}

.as-area:active { transform: translateY(0); }

.as-area:focus-visible {
    outline: none;
    border-color: rgba(var(--as-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--as-rgb), .28);
}

/* Glyph and name on one line. Stacking them gave the name the tile's full width but cost it a
   whole line of height to a 52px medallion, and height is what a name has to be paid for in: side
   by side, the medallion comes down to 42px and the name goes up a size, which is the trade this
   row exists to make. */
.as-area-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Still the thing the eye lands on, and still what tells one area from the next at a glance. */
.as-area-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--as-ink);
    background: rgba(var(--as-rgb), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--as-rgb), .18);
    transition: background .16s, transform .16s;
}

.as-area:hover .as-area-art {
    background: rgba(var(--as-rgb), .2);
    transform: scale(1.04);
}

/* The name is the label — 15.5px against the 14px it stood at, and the one thing on the tile that
   is meant to be read from across the room. min-width: 0 lets it wrap inside the row instead of
   pushing the medallion out of it. */
.as-area-name {
    min-width: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: var(--bs-heading-color);
}

/* Three lines is the whole of an area's copy — enough to say what is in it, short enough that no
   tile in the 2×2 sets a height the other three have to live with. */
.as-area-tagline {
    display: -webkit-box;
    /* Full width under the row, not indented to line up with the name: a tile this narrow has no
       width to give away, and the row above it is already the thing the eye lands on. */
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}

/* A quantity, not a third heading — but in the area's colour, because it is the one number the
   tile carries and the colour is what ties it to the list it opens. */
.as-area-count {
    margin-top: auto;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--as-rgb), .12);
    color: var(--as-ink);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}

[data-bs-theme="dark"] .as-area { background: rgba(255,255,255,.035); }
[data-bs-theme="dark"] .as-area-art,
[data-bs-theme="dark"] .as-area-count { color: var(--as-ink-dark); }
[data-bs-theme="dark"] .as-area-art { background: rgba(var(--as-rgb), .18); }

/* ── Step 2: the plans in one area ───────────────────────────── */

/* Back a step, in the footer under the plans — the same rule the wizard's own navigation stands
   on (.wizard-buttons, wizard-create.css), because it is the same kind of control in the same
   place. Left rather than right: it is the only button on the screen, and a lone control at the
   right end of a footer reads as the one that goes forward. */
.as-foot {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--bs-border-color);
}

/* The button itself is .btn.btn-secondary, straight out of wizard-create.css — this only gives it
   the area's colour to answer focus in. */
.as-foot .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--as-rgb), .28); }

.as-plans { animation: as-rise .24s ease-out; }

/* The area, restated at the head of its own list — the same glyph and the same colour the tile
   wore, so the second screen answers "where am I" without a word of copy about it. */
.as-plans-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--as-rgb), .25);
}

.as-plans-head .as-icon--lg {
    width: 20px;
    height: 20px;
    padding: 7px;
    box-sizing: content-box;
    border-radius: 10px;
    color: var(--as-ink);
    background: rgba(var(--as-rgb), .12);
}

.as-plans-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}

.as-plans-name {
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: var(--bs-heading-color);
}

.as-plans-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--as-ink);
    white-space: nowrap;
}

.as-plans-tagline {
    font-size: 12px;
    line-height: 1.45;
    color: var(--bs-secondary-color);
    margin: 7px 2px 10px;
}

[data-bs-theme="dark"] .as-plans-head .as-icon--lg,
[data-bs-theme="dark"] .as-plans-count { color: var(--as-ink-dark); }
[data-bs-theme="dark"] .as-plans-head .as-icon--lg { background: rgba(var(--as-rgb), .18); }

/* ── Step 2, the deck ────────────────────────────────
   The plans in an area are a deck of pages, three columns wide and three rows deep, rather than
   one list that gets longer with every plan added to the catalogue. Nine is what fits under the
   area's header on a phone; a tenth does not go below it, it goes on the next page.

   The pages sit side by side in a scroller that snaps, so the swipe a phone offers and the arrows a
   mouse uses drive the same one thing — there is no second "which page" for the two to disagree
   about. Nothing is hidden while it is off-page either: every tile is in the document at its real
   size, which is what keeps a page's measured height honest when the deck is asked to take it.
*/

.as-track {
    display: flex;
    /* Pages are as tall as their own plans, not as tall as the fullest page — a last page holding
       two tiles would otherwise sit in the empty half of a frame built for six. The deck itself is
       then held to the page on show by activity-selector.js.
       That height is set outright and never transitioned. A scroller with mandatory snapping
       re-snaps every time it is resized, and an animated height is a resize on every frame of it —
       which is a page turn being pulled back to where it started, fourteen times. */
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* An overflow box clips in both directions, so the room a tile lifts into on hover has to be
       paid for here. */
    padding: 4px 0 9px;
    /* The scrollbar is the pager's job, and the pager draws it as dots. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.as-track::-webkit-scrollbar { display: none; }

.as-page {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* What the tiles inside it size their badge against — see the container queries under
       .as-tiles. A page is exactly one deck wide, which is the width a reader sees. */
    container-type: inline-size;
}

/* ── The plan tiles ──────────────────────────────────
   THREE TO A ROW, WHEREVER A PLAN IS DRAWN — the shortcut rows on the first screen and every page
   of an area's list on the second are the same grid of the same tile.

   ONE TILE IS A BADGE, A NAME AND A WAY TO READ MORE:

       • the glyph on a medallion that STRADDLES THE TOP EDGE, half above the border and half
         below it. It is the thing that tells one tile from the next before a word is read, and up
         there it costs the tile no width at all — which is the whole reason it moved: beside the
         name it took a third of a phone's column, and the name is what is being chosen.
       • the name, left-aligned across the tile's full width, in the lines --as-name-lines
         allows it — three while a tile is narrow, two once the grid is wide enough for them.
       • a round button in the bottom-right corner, carrying the three dots that mean "there is
         more", which opens the description under the ROW — see .as-rowinfo below.

   --as-badge IS THE ONE MEASUREMENT. The medallion's size, how far it hangs over the edge, the
   room the name gets clear of it, the gap between one row and the badges of the next, and the room
   the first row needs above it are all derived from that single value, so none of them can drift
   out of step with the others — every "overlapping" version of this tile was two of those numbers
   disagreeing. Only --as-badge changes with the width, in the container queries at the foot of
   this section.

   The medallion is drawn OPAQUE and the tile is not clipped, which is how the border passes behind
   it rather than through it. Both of those are load-bearing: --as-tile-bg has to be a solid colour
   (a translucent one would let the border line show through the badge) and an overflow: hidden
   here would cut the top half of every medallion off.

   EVERY TILE IS THE SAME HEIGHT, because every part of it is: the name is held to its full
   allowance of lines whether it needs them or not, and every name in a grid is set at one size
   (activity-selector.js works out which — see fitGrid). A row of tiles that agree on their height
   is a row a reader can scan across instead of reading one tile at a time.

   THREE COLUMNS AT EVERY WIDTH, not a grid that fills by measure. Which tiles share a row is
   worked out in the markup (_ActivityGrid.cshtml cuts the plans into threes and puts each row's
   descriptions in a slot after it), so a column count that changed with the width would open a
   description under the wrong row.
*/

.as-tiles {
    /* The medallion, and with it every clearance on the tile. See the note above. */
    --as-badge: 28px;

    /* The least air the name will accept above and below it — over it the badge, under it the
       button. It is a minimum, not a position: the name is centred in whatever room is left
       between those two, and this is how much of that room it can never give up. */
    --as-lead: 10px;

    /* The largest a name is set in here, READ BY activity-selector.js rather than applied by this
       rule — the script picks the size (it is the only thing that can ask whether a name fits) but
       it must not overrule the stylesheet on how big type is allowed to be on a given screen. This
       is the one number the two of them share, so it is declared where every other width-dependent
       number on the tile is declared. */
    --as-name-max: 13.5px;

    /* How many lines a name is given — and, through min-height below, the height every tile in the
       grid is held to. THREE on a narrow grid, because three tiles across a phone is about 90px
       each and a plan name runs to 30 characters, which is three lines of that width and not two.

       It was two everywhere, and what gave instead was the type: the script comes down half a
       point at a time until every name fits the lines it is allowed (fitGrid), and one name in an
       area that needed a third line therefore dragged every OTHER name in that area down with it —
       "Habits & Skills" sat at 10px while "Fitness & Movement" next door sat at its full 13.5.
       The line is what should give, not the size.

       Two again once the grid is wide enough to hold that same 30 characters in two lines (the
       container queries at the foot of this section), so a wide tile does not reserve a blank
       third. */
    --as-name-lines: 3;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    column-gap: 7px;

    /* A row has to clear the badges of the row below it, and the first row has to clear whatever
       it is standing under: the overhang is half a badge, and the rest is the gap a reader sees.
       The margin collapses with the label above rather than adding to it. */
    row-gap: calc(var(--as-badge) / 2 + 14px);
    margin-top: calc(var(--as-badge) / 2 + 7px);
}

/* A <div>, not a link: the corner control inside it is a button, and a button cannot live in a
   link.
   The whole tile is still one target — activity-selector.js takes the click — and .as-tile-pick
   below is the real link, which is what the keyboard and a crawler get. */
.as-tile {
    /* Opaque on purpose: the medallion is cut out of this colour to mask the border behind it. */
    --as-tile-bg: var(--bs-body-bg);

    position: relative;
    display: flex;
    flex-direction: column;
    /* Top: exactly the half-badge that hangs into the tile, and not a pixel more. The air under
       the badge belongs to .as-tile-pick below, which is what puts the name in the MIDDLE of the
       space between the badge and the button rather than hard against the top of it. */
    padding: calc(var(--as-badge) / 2) 8px 7px;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--as-tile-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s, transform .12s, box-shadow .16s;
}

.as-tile:hover {
    border-color: rgba(var(--as-rgb), .6);
    box-shadow: 0 7px 20px rgba(var(--as-rgb), .18);
    transform: translateY(-2px);
}

.as-tile:active { transform: translateY(0); }

/* The tile whose description is open, drawn in its own accent at full strength: three tiles stand
   over one panel, and something has to say which of the three it belongs to. */
.as-tile--open {
    border-color: rgba(var(--as-rgb), .75);
    box-shadow: 0 0 0 1px rgba(var(--as-rgb), .35);
}

/* The glyph and the name together are the plan's own address, and the only part of the tile the
   keyboard reaches; the corner button is a second control and stands outside it.

   IT IS ALSO THE BAND THE NAME IS CENTRED IN. flex: 1 gives it everything between the badge above
   (the tile's top padding is exactly the half-badge) and the button below, and centring the name
   in that band puts it half way between the two — by construction, at any tile height and
   whatever the name came to. The padding is --as-lead on both sides, so the two gaps can never
   close up completely even on the tightest tile. */
.as-tile-pick {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--as-lead) 0;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.as-tile-pick:focus-visible {
    outline: none;
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(var(--as-rgb), .25);
}

/* Half above the edge and half below it. Opaque — see the note at the top of this section — and
   centred by translate, which every transform on it has to carry with it. */
.as-tile-art {
    position: absolute;
    top: calc(var(--as-badge) / -2);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--as-badge);
    height: var(--as-badge);
    border-radius: 50%;
    color: var(--as-ink);
    background-color: var(--as-tile-bg);
    background-image: linear-gradient(rgba(var(--as-rgb), .16), rgba(var(--as-rgb), .16));
    box-shadow: inset 0 0 0 1px rgba(var(--as-rgb), .3);
    transition: background-image .16s, transform .16s;
}

.as-tile:hover .as-tile-art {
    background-image: linear-gradient(rgba(var(--as-rgb), .3), rgba(var(--as-rgb), .3));
    transform: translateX(-50%) scale(1.06);
}

/* Scoped to the tile: --md is also the glyph at the head of an opened description, which has the
   room for the full size. */
.as-tile .as-icon--md {
    width: calc(var(--as-badge) * 0.56);
    height: calc(var(--as-badge) * 0.56);
}

/* ONE SIZE FOR EVERY NAME IN A GRID, and activity-selector.js works out which: the largest that
   sets the longest of them in the lines they are allowed (see fitGrid). Sizing each name against
   its own tile came out uneven — a row read as three different kinds of thing — so the tile that
   needs the smallest type now decides for all of them. The value below is what a reader without
   JavaScript gets.

   HOW MANY LINES IS --as-name-lines, declared on the grid above and set by the width the grid was
   given. The clamp and the min-height are the same number on purpose: min-height holds the box at
   its full count even when a name needs fewer, which is what makes every tile in the grid the same
   height, and the clamp is the other half of that promise — it holds the row level if a name ever
   arrives longer than the script can shrink. */
.as-tile-name {
    display: -webkit-box;
    -webkit-line-clamp: var(--as-name-lines);
    line-clamp: var(--as-name-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    min-height: calc(var(--as-name-lines) * 1.24em);
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.2px;
    color: var(--bs-heading-color);
}

/* The way into a plan's description: a BUTTON IN THE TILE'S LOWER-RIGHT CORNER, carrying the
   three dots that mean "there is more". It is in the flow rather than pinned to the corner, with
   margin-top: auto holding it to the foot and align-self: flex-end to the right — which means the
   name above can never run underneath it, whatever length it came to, and the tile does not have
   to reserve a band for something floating over it.

   SIZED FOR A FINGER, WHICH IS NOT THE SAME AS SIZED TO BE SEEN. ::after carries the TARGET out
   past the circle to around 38px whatever the circle came to, so the part a finger finds stays
   the same while the part an eye sees can get out of the way. It has to be hittable without
   hitting the tile — which is the plan itself.

   The circle's size is the one thing on this tile asked of the SCREEN rather than of the column
   (the media query at the foot of this file): on a phone it comes down to 21px, because a third
   of a phone's width is all a tile has and a big disc in the corner of it crowds the name. That
   is a fact about the device, not about how wide the grid happens to have been drawn, which is
   what every other measurement here is asked of.

   The tint and the accent are what make it read as a control rather than as a mark; a plan with
   nothing to say carries no button at all. */
.as-tile-info {
    position: relative;
    align-self: flex-end;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(var(--as-rgb), .16);
    color: var(--as-ink);
    cursor: pointer;
    transition: background .14s, color .14s;
}

/* The dots scale with the circle they sit in: the mark is the same shape at every size, and the
   viewBox does the arithmetic. */
.as-tile-info svg { width: 16px; height: 4px; }

/* The part of it a finger finds, which is bigger than the part an eye sees — and the smaller the
   circle, the further out it has to reach for the target to stay the same size. */
.as-tile-info::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }

.as-tile-info:hover { background: rgba(var(--as-rgb), .3); }
.as-tile-info:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--as-rgb), .35); }

/* Open, it is the control that closes again — filled, so it reads as pressed rather than as one
   more thing to press. The fill is --as-ink rather than the mid accent: white on a mid amber is
   not a mark anybody can see. */
.as-tile-info[aria-expanded="true"] { background: var(--as-ink); color: #fff; }

[data-bs-theme="dark"] .as-tile { --as-tile-bg: #1d2531; }
[data-bs-theme="dark"] .as-tile-art { color: var(--as-ink-dark); }
[data-bs-theme="dark"] .as-tile-info { color: var(--as-ink-dark); background: rgba(var(--as-rgb), .22); }
[data-bs-theme="dark"] .as-tile-info:hover { background: rgba(var(--as-rgb), .4); }
[data-bs-theme="dark"] .as-tile-info[aria-expanded="true"] { background: var(--as-ink-dark); color: #06121d; }

/* How big the badge is, and with it every clearance derived from it. The container is the block
   the GRID sits in (.as-strip or .as-page, both declared container-type: inline-size), never the
   tile — a tile cannot be asked about its own width, and a query written against it would answer
   for its children instead of for itself. The widths below are therefore the whole grid's: three
   tiles and two gaps. */
@container (min-width: 340px) {
    /* A name is allowed to be bigger here than on a phone — not because the type wants to grow,
       but because a tile this wide can hold it in the lines it is given, which is the constraint
       that decides the size on the narrow end. The script still comes down from this wherever a
       name does not fit. */
    .as-tiles { --as-badge: 32px; --as-lead: 13px; --as-name-max: 15.5px; column-gap: 9px; }
    .as-tile { padding-left: 10px; padding-right: 10px; }
}

/* The third line is dropped once a tile is wide enough to hold a whole name without it — left in,
   it stands empty over every tile on the screen, which is 17px of nothing on each of nine of them.
   500px is that width read off the tile: three columns and two gaps leave a name about 140px here,
   and 140px is what the longest name a plan is allowed (30 characters) needs to fall into two lines
   at the 15.5px this width already permits. Under it the name keeps its three. */
@container (min-width: 500px) {
    .as-tiles { --as-name-lines: 2; }
}

@container (min-width: 520px) {
    .as-tiles { --as-badge: 38px; column-gap: 11px; }
    .as-tile { padding-left: 12px; padding-right: 12px; padding-bottom: 8px; }
    .as-tile-info { width: 36px; height: 36px; }
    .as-tile-info svg { width: 17px; height: 4px; }
    .as-tile-info::after { inset: -4px; }
}


/* ── A plan's description, under its row ─────────────
   A tile is a third of a phone wide, which is no width for a sentence — so a description opens
   across the whole row instead, in a slot the markup puts after every three tiles.

   The slot spans the grid and is hidden as a whole while nothing in it is open: an empty grid item
   still takes a row and the gap above it, which would leave a hole under every row on the screen.
   One panel is open at a time, which activity-selector.js enforces.

   The accent is copied onto the panel by the script from the tile that opened it — the shortcut
   row holds plans from four different areas, so there is nothing here for a panel to inherit. */

.as-rowinfo { grid-column: 1 / -1; }

.as-tileinfo {
    border: 1px solid rgba(var(--as-rgb), .3);
    border-radius: 12px;
    background: rgba(var(--as-rgb), .07);
    padding: 10px 11px 11px;
    animation: as-rise .18s ease-out;
}

.as-tileinfo-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.as-tileinfo-art { flex-shrink: 0; color: var(--as-ink); }

.as-tileinfo-name {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: var(--bs-heading-color);
}

/* What the corner button does, said the other way round: a panel this size needs a way out
   where one is
   looked for. */
.as-tileinfo-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--bs-secondary-color);
    opacity: .75;
    cursor: pointer;
    transition: opacity .14s, background .14s;
}

.as-tileinfo-close:hover { opacity: 1; background: rgba(var(--as-rgb), .14); }
.as-tileinfo-close:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px rgba(var(--as-rgb), .35); }

.as-tileinfo-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--bs-secondary-color);
    margin: 6px 1px 0;
    white-space: pre-line;
}

/* The choice the tile already is, written out for a reader who has just finished reading about it.
   Drawn in the tint and the ink, not white on the mid accent: four areas' colours have to carry
   the same words, and white on a mid amber is not one of them. */
.as-tileinfo-go {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 9px 0 0 1px;
    padding: 5px 8px 5px 12px;
    border-radius: 999px;
    background: rgba(var(--as-rgb), .16);
    color: var(--as-ink);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s;
}

.as-tileinfo-go:hover,
.as-tileinfo-go:focus { color: var(--as-ink); text-decoration: none; background: rgba(var(--as-rgb), .3); }
.as-tileinfo-go:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--as-rgb), .3); }

[data-bs-theme="dark"] .as-tileinfo { background: rgba(var(--as-rgb), .12); }
[data-bs-theme="dark"] .as-tileinfo-art { color: var(--as-ink-dark); }
[data-bs-theme="dark"] .as-tileinfo-go,
[data-bs-theme="dark"] .as-tileinfo-go:hover,
[data-bs-theme="dark"] .as-tileinfo-go:focus { color: var(--as-ink-dark); background: rgba(var(--as-rgb), .22); }


/* ── The pager ────────────────────────────────────────
   Rendered only when there is a second page. It answers two questions at once — how much more there
   is, and where in it you are — which is why it is dots and not a "next" on its own. */

.as-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 1px;
}

.as-pager-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background .14s, color .14s, opacity .14s;
}

.as-pager-step:hover { background: rgba(var(--as-rgb), .16); color: var(--as-ink); }
.as-pager-step:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--as-rgb), .35); }

/* At either end of the deck an arrow has nowhere to go. Dimmed rather than removed: a control that
   disappears takes the row's balance with it, and the pager would shuffle on every page turn. */
.as-pager-step[disabled] {
    opacity: .3;
    cursor: default;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.as-dots { display: flex; align-items: center; gap: 5px; }

.as-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bs-border-color);
    cursor: pointer;
    transition: background .16s, width .16s;
}

.as-dot:hover { background: rgba(var(--as-rgb), .5); }
.as-dot:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--as-rgb), .35); }

/* The page you are on is a bar, not a dot — the shape carries it as well as the colour does, so it
   still reads for anyone the accent does not reach. */
.as-dot[aria-current="true"] { width: 16px; border-radius: 999px; background: rgb(var(--as-rgb)); }

[data-bs-theme="dark"] .as-pager-step:hover { color: var(--as-ink-dark); }

/* ── The shortcut row ────────────────────────────────────────────
   The first screen's own top block: the six plans at the head of the catalogue, over the areas
   rather than inside one. It has no tile of its own — it is .as-tiles, two rows of it, the same
   grid an area's list is drawn in — so all this section holds is the label over it and the space
   under it. What keeps it from reading as a fifth area is the label of its own, and the 2×2 of
   areas below carrying taglines and counts that a plan tile does not.

   Each tile carries its own accent, handed in by the view from the area that holds that plan — so
   a shortcut is the same colour on this screen as the plan it opens is on the next one, and the
   block reads as six plans drawn from the areas below. */

/* A container for the same reason .as-page is one: the grid of shortcuts inside it sizes its
   badge against the width it was given, not against the window. */
.as-strip { margin: 0 0 14px; container-type: inline-size; }

/* The one label this screen uses, over each of its two grids. Small and quiet: the tiles are what
   the screen is for, and a heading that competed with them would be a third thing to read. */
.as-strip-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0 0 6px 2px;
}

.as-empty {
    text-align: center;
    font-size: 13px;
    color: var(--bs-secondary-color);
    margin: 18px 0 6px;
}

/* What a mark that is only a picture says out loud. */
.as-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Load failure ────────────────────────────────────────────────
   Above the card rather than inside one: a wizard can fail to load from either catalogue screen,
   and the message has to be readable on whichever one the reader is put back on. */

.as-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fee2e2;
    border: 1px solid #ef4444;
    color: #b91c1c;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 8px;
    margin: 6px 0 0;
}

.as-error svg { flex-shrink: 0; margin-top: 1px; }

[data-bs-theme="dark"] .as-error { background: rgba(239,68,68,0.15); border-color: #ef4444; color: #fca5a5; }

/* ── Wait screen ─────────────────────────────────────────────── */

/* Centred rather than parked at the top: the floor gives this screen a card far taller than the
   spinner and two lines it holds, and a wait that sits in the top third of an empty card reads as
   a page that stopped halfway. `.hidden` still wins over this display (it is !important in
   wizard-create.css), so the screen hides the same way every other one does. */
.as-panel[data-as-screen="loading"],
.as-panel[data-as-screen="generating"],
.as-panel[data-as-screen="finishing"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 34px 16px 30px;
}
.as-loading-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--bs-heading-color); }

/* The line that changes every few seconds. It is the only thing moving on a screen somebody is
   going to look at for minutes, so it is given room for two lines and settled into it — a heading
   that reflowed from one line to two and back would be the screen jumping rather than the message
   changing. */
.as-panel[data-as-screen="generating"] .as-loading-title,
.as-panel[data-as-screen="finishing"] .as-loading-title {
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 30ch;
}

.as-panel[data-as-screen="generating"] .as-sub,
.as-panel[data-as-screen="finishing"] .as-sub { max-width: 38ch; }

/* ══ The custom path ═════════════════════════════════════════════
   Everything below is drawn only when PlanConfig.ActivityCreationByUserEnabled is on. It borrows
   the area tile's treatment rather than inventing one — the accent cap, the medallion, the lift on
   hover, the ring on focus — because these are the same kind of thing in the same screen, and the
   accent is handed in the same way (the view sets the three properties on the second tile by hand;
   an area gets them from its row id). */

/* ── Which kind of plan ──────────────────────────────────────────
   Two tiles, stacked rather than side by side. This screen renders into whatever column the areas
   do — half a hero, a dashboard panel, a phone — and two across that column would be narrower than
   the four the areas are cut into, for a question with twice as much to say on each side of it. */

.as-choices { display: grid; gap: 10px; }

.as-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    width: 100%;
    padding: 15px 15px 13px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s, transform .12s, box-shadow .16s, background .16s;
}

/* The cap, as on an area tile — the one thing that tells the two choices apart before a word of
   either is read. */
.as-choice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgb(var(--as-rgb));
    opacity: .9;
}

.as-choice:hover {
    border-color: rgba(var(--as-rgb), .55);
    box-shadow: 0 7px 20px rgba(var(--as-rgb), .18);
    transform: translateY(-2px);
}

.as-choice:active { transform: translateY(0); }

.as-choice:focus-visible {
    outline: none;
    border-color: rgba(var(--as-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--as-rgb), .28);
}

.as-choice-head { display: flex; align-items: center; gap: 11px; min-width: 0; }

.as-choice-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--as-ink);
    background: rgba(var(--as-rgb), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--as-rgb), .18);
    transition: background .16s, transform .16s;
}

.as-choice:hover .as-choice-art { background: rgba(var(--as-rgb), .2); transform: scale(1.04); }

.as-choice-name {
    min-width: 0;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: var(--bs-heading-color);
}

/* Allowed to run to as many lines as it needs, unlike an area's tagline: there are two tiles here
   rather than four in a grid, so neither is setting a height the others have to live with. */
.as-choice-text { font-size: 12.5px; line-height: 1.45; color: var(--bs-secondary-color); }

/* What the choice costs, in the only unit that means anything before it is made. Same badge as an
   area's plan count, for the same reason: one number, in the colour of the thing it belongs to. */
.as-choice-time {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(var(--as-rgb), .12);
    color: var(--as-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}

.as-choice-time svg { flex-shrink: 0; }

[data-bs-theme="dark"] .as-choice { background: rgba(255,255,255,.035); }
[data-bs-theme="dark"] .as-choice-art,
[data-bs-theme="dark"] .as-choice-time { color: var(--as-ink-dark); }
[data-bs-theme="dark"] .as-choice-art { background: rgba(var(--as-rgb), .18); }

/* ── The description step ────────────────────────────────────────
   A footer carrying both directions rather than one: the way back at the left end, the way on at
   the right, which is where a wizard's own Continue sits.

   Allowed to wrap, which the single-button footer never had to be: two labels of unknown length
   can outrun a card, and this one is as wide as whatever column it was dropped into — which a
   media query cannot see. A button that has taken a line of its own is better than one that has
   run off the end. On a phone they stack outright; see the narrow rules below. */
.as-foot--split { justify-content: space-between; flex-wrap: wrap; }

/* ── The sign-in step ────────────────────────────────────────────
   Why an account is being asked for, above a component that does not explain itself. The component
   brings its own buttons, so this screen has no footer to line it up with. */
.as-signin-note { text-align: center; margin: 2px 0 10px; }

/* ── What the plan turned out to be ──────────────────────────────
   The one screen on this path that is neither a question nor a wait: two lines the reader has not
   seen before, drawn as the thing they are about to accept rather than as a notice. The accent is
   the custom path's violet, which is the tile they pressed to get here. */

.as-plan {
    --as-rgb: 139,92,246;
    --as-ink: #6d28d9;
    --as-ink-dark: #c4b5fd;
    position: relative;
    margin: 4px 0 2px;
    padding: 20px 18px 18px;
    border: 1px solid rgba(var(--as-rgb), .35);
    border-radius: 14px;
    background: rgba(var(--as-rgb), .06);
    text-align: center;
}

.as-plan-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 50%;
    color: var(--as-ink);
    background: rgba(var(--as-rgb), .14);
    box-shadow: inset 0 0 0 1px rgba(var(--as-rgb), .2);
}

.as-plan-name {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.2px;
    color: var(--bs-heading-color);
}

/* The card text step 1 wrote — a short paragraph, held to a readable measure and centred with the
   name it belongs to. */
.as-plan-info {
    margin: 0 auto;
    max-width: 52ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .as-plan { background: rgba(var(--as-rgb), .12); }
[data-bs-theme="dark"] .as-plan-art { color: var(--as-ink-dark); background: rgba(var(--as-rgb), .2); }

/* One button, and it is the way on — so it stands where a wizard's Continue does rather than
   where the "All areas" of a footer with nothing else in it would. */
.as-panel[data-as-screen="overview"] .as-foot { justify-content: flex-end; }

/* ── The end of the path ─────────────────────────────────────────
   Centred in the card the way the wait screen is, and for the same reason: a short message parked
   at the top of a tall card reads as a page that stopped halfway. The footer keeps the bottom. */
.as-panel[data-as-screen="failed"] { display: flex; flex-direction: column; }

.as-fail {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 11px;
    padding: 20px 10px;
}

.as-fail-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #dc2626;
    background: rgba(239,68,68,.12);
    box-shadow: inset 0 0 0 1px rgba(239,68,68,.18);
}

.as-fail-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--bs-heading-color); }

/* Held to a readable measure rather than the card's full width — it is three lines of prose, and
   the card is as wide as the hero column it sits in. */
.as-fail-text {
    margin: 0;
    max-width: 46ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .as-fail-art { color: #fca5a5; background: rgba(239,68,68,.16); }

/* The retry screen's art is the same circle in a different key: what stopped is going to be asked
   again, so it is not drawn in the colour of something that ended. */
[data-as-screen="retry"] .as-fail-art,
[data-as-screen="paused"] .as-fail-art {
    color: #b45309;
    background: rgba(245,158,11,.14);
    box-shadow: inset 0 0 0 1px rgba(245,158,11,.2);
}

[data-bs-theme="dark"] [data-as-screen="retry"] .as-fail-art,
[data-bs-theme="dark"] [data-as-screen="paused"] .as-fail-art { color: #fcd34d; background: rgba(245,158,11,.18); }

/* How many goes are left, or when the break ends. Quieter than the sentence above it — it is the
   small print of a message, not a second message. */
.as-attempts { font-size: 12px; opacity: .85; }

/* The one thing said on the description screen that is not part of asking the question: the last
   description came back as something no plan could be built from. It sits between the heading and
   the box, in the shape the wizard's own inline messages take. */
.as-notice {
    margin: 0 0 2px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.5;
    color: #92400e;
    background: rgba(245,158,11,.1);
    box-shadow: inset 0 0 0 1px rgba(245,158,11,.22);
}

[data-bs-theme="dark"] .as-notice { color: #fde68a; background: rgba(245,158,11,.14); }

/* The plan-selection screen stands on its own here rather than as a wizard step, so it brings no
   step padding with it — and the card around it is already padded. */
[data-as-screen="payment"] .wizard-payment-container { padding: 0; }

/* ── Narrow ──────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .as-card { padding: 13px 11px 12px; }
    .as-areas { gap: 8px; }
    .as-area { padding: 12px 10px 10px; }
    .as-area-head { gap: 8px; }
    .as-area-art { width: 38px; height: 38px; }
    .as-icon--xl { width: 22px; height: 22px; }
    .as-choice { padding: 13px 12px 11px; }
    .as-choice-head { gap: 9px; }
    .as-choice-art { width: 42px; height: 42px; }
    .as-choice-name { font-size: 15.5px; }
    .as-fail-art { width: 50px; height: 50px; }
    /* The shape the wizard's own navigation takes on a phone (.wizard-buttons, wizard-create.css):
       the buttons stack full width with the forward one on top. It is not a choice this file gets
       to make differently — .btn is already width:100% at this size, so a row of two was never on
       offer — and the reversal is what keeps the forward action under the thumb, where the wizard
       behind this screen puts it. */
    .as-foot--split { flex-direction: column-reverse; gap: 6px; }
}

/* A PHONE, which is the one thing on a plan tile measured against the screen rather than against
   the column the grid was given. Everything else here scales with the tile — the badge, the name,
   the gaps — because the same grid is drawn into half a hero, a dashboard panel and a whole phone.
   The corner button does not: 430px is where a hand holds the device rather than sits in front of
   it, and at that size a 34px disc in the corner of a tile a third of a phone wide is the loudest
   thing on the screen. The circle comes down; the target it carries with it does not (see
   .as-tile-info::after above, which reaches further the smaller the circle gets).

   .98 rather than a round 430: a viewport is not always a whole number of CSS pixels, and a device
   that calls itself 430 wide can measure 430.5. Written as a round number, this rule misses
   exactly the phone it was written for — which is how it was first written, and what the browser
   measured on the way to catching it. */
@media (max-width: 430.98px) {
    .as-tile-info { width: 21px; height: 21px; }
    .as-tile-info svg { width: 11px; height: 3px; }
    .as-tile-info::after { inset: -9px; }
}

/* Three tiles at their narrowest are about 85px wide, and what gives there is the medallion and
   the space around it — never the column count. A plan's description opens under the row it was
   cut into in the markup, so a grid that reflowed to two columns would open it under the wrong
   one. The name is not listed here either: its size follows the tile, in the container queries
   above. The areas hold their 2×2 for their own reason: a single column of four would put the
   last of them under the fold on the screens with the least room for a scroll. */
@media (max-width: 380px) {
    .as-area { padding: 11px 8px 9px; }
    .as-area-head { gap: 7px; }
    .as-area-art { width: 34px; height: 34px; }
    .as-icon--xl { width: 20px; height: 20px; }
    .as-area-name { font-size: 14.5px; }
    .as-area-tagline { font-size: 11px; }
    .as-tiles { column-gap: 6px; }
    .as-tile { padding-left: 6px; padding-right: 6px; }
    .as-tileinfo-text { font-size: 11.5px; }
}

/* Nobody should have to sit through a movement they have asked not to see. The colour changes stay
   — they are what tells you a thing is clickable — only the movement goes. */
@media (prefers-reduced-motion: reduce) {
    .as-card, .as-plans, .as-tileinfo { animation: none; }
    .as-track { scroll-behavior: auto; }
    .as-area, .as-area-art, .as-tile, .as-tile-art, .as-tile-info, .as-tile-info svg,
    .as-tileinfo-close, .as-tileinfo-go, .as-pager-step, .as-dot,
    .as-choice, .as-choice-art { transition: none; }
    .as-area:hover, .as-tile:hover, .as-choice:hover { transform: none; }
    .as-area:hover .as-area-art,
    .as-choice:hover .as-choice-art { transform: none; }
    /* Not `none`: that transform is what centres the medallion on the edge, not a movement. */
    .as-tile:hover .as-tile-art { transform: translateX(-50%); }
}