/*
 * The bar at the foot of the screen, shared by both halves of the site.
 *
 * The planner and the bill tracker draw the same instrument: the same floating
 * glass capsule, the same 32rem cap, the same 3.4rem row, the same 1.75rem icons,
 * the same .62rem labels, the same filled pose on the place you are standing on,
 * and the same one-line motto underneath. Only the slots change - the planner
 * fills them with Me, Make goals, Notes and Home, the tracker with Cards, Expenses,
 * Bills and Home - and the door at the right edge wears the other app's mark.
 *
 * It lives here rather than in either app's stylesheet so there is exactly one
 * source for that instrument. The planner links this file after app.css; the
 * tracker links it after style.css. Both define the same palette tokens it reads
 * (--glass, --glass-line, --glass-shadow, --surface, --accent, --accent-ink,
 * --tabbar-ink, --star and the rest), so the same rules paint the same bar in
 * both themes.
 *
 * The page-turn rules at the foot are shared for the same reason: the bar is the
 * frame the page moves inside, so it must be drawn once and stand still while a
 * planner page and a tracker page turn past each other.
 */

/* --- the bar at the foot of the screen ---------------------------------- */

/* The page and the bar are the frame, not the page inside it. Naming them here
   rather than in either app's stylesheet is what lets a move from the planner to
   the tracker (and back) keep the bar standing still while the page turns under
   it: the browser finds the same names on both documents. The app that wrote the
   direction - the planner, from the page the browser says it came from - uses the
   `html[data-turn]` rules below; the tracker arrives from the planner and asks for
   the same turn. A browser that has never heard of any of this navigates as it
   always did. @see app/Support/PageOrder.php */
@view-transition { navigation: auto; }

:root {
    --turn-time: .4s;
    --turn-ease: cubic-bezier(.22, .68, .3, 1);
}

#main { view-transition-name: page; }
.tabbar { view-transition-name: shell-bar; }

/* Everything that is the frame is drawn as it is: no fade, no movement, nothing
   to notice. */
::view-transition-old(shell-bar),
::view-transition-new(shell-bar) { animation: none; }

/* And the page itself is the only thing that moves, so the ground it moves over
   is never shown moving underneath it. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

::view-transition-group(page) { perspective: 1400px; }

::view-transition-old(page) { animation: page-turn-out var(--turn-time) var(--turn-ease) both; }
::view-transition-new(page) { animation: page-turn-in var(--turn-time) var(--turn-ease) both; }

html[data-turn="right"]::view-transition-old(page) { animation-name: page-turn-out-right; }
html[data-turn="right"]::view-transition-new(page) { animation-name: page-turn-in-right; }

/* A page with no direction - one that arrived from nowhere in particular, or a
   move between two pages that stand in the same place - simply changes over. */
html:not([data-turn])::view-transition-old(page) { animation-name: page-fade-out; }
html:not([data-turn])::view-transition-new(page) { animation-name: page-fade-in; }

@keyframes page-turn-out {
    to { transform: translate3d(-12%, 0, 0) rotateY(6deg); opacity: 0; }
}

@keyframes page-turn-in {
    from { transform: translate3d(12%, 0, 0) rotateY(-6deg); opacity: 0; }
}

@keyframes page-turn-out-right {
    to { transform: translate3d(12%, 0, 0) rotateY(-6deg); opacity: 0; }
}

@keyframes page-turn-in-right {
    from { transform: translate3d(-12%, 0, 0) rotateY(6deg); opacity: 0; }
}

@keyframes page-fade-out {
    to { opacity: 0; }
}

@keyframes page-fade-in {
    from { opacity: 0; }
}

/* Asking for less movement gets none of it: the page is simply there. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(page),
    ::view-transition-new(page),
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

/* A panel owns the page while it is open: the page behind it does not scroll, and
   the scrollbar's gutter is held so opening a panel never shifts the page. */
html:has(.tabbar__panel:not([hidden])) {
    overflow: hidden;
}

/* The way round the app, and the way in, in one place a thumb already rests:
   the week and today on the left, the + in the middle, the notes and you on the
   right. It is drawn by the shell on every page, so it is one control rather
   than five copies of one, and it is always there rather than something opened
   first - which is the whole difference between this and the wheel it replaces.

   Fixed to the foot of the window, clear of a phone's own home bar, and never
   hidden behind anything: a page keeps the room for it at the bottom of itself,
   so the last row of a list is never under the bar. It is the same five doors on
   every screen, a monitor included - only its width changes there, because five
   slots stretched across a desk are five slots nobody can miss and nobody needs. */
.tabbar {
    --tabbar-face: var(--surface);
    --tabbar-tone: var(--accent);

    /* How far the bar floats off the foot of the screen, how much room a page
       keeps for it, and how tall the motto under it is: the pill is 3.9rem tall (a
       row of 3.4rem inside .25rem of its own padding), it stands .7rem clear of the
       bottom edge, and the motto is one small line under it. All of them are written
       here because three things have to agree with them - the page's own bottom
       padding, where the notice about the connection sits, and where a panel opens.
       @see --tabbar-clear, .tabbar__panel */
    --tabbar-gap: .7rem;
    --tabbar-row: 3.4rem;
    --tabbar-motto: 1.7rem;
    --tabbar-clear: 7.9rem;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--tabbar-gap) calc(var(--tabbar-gap) + env(safe-area-inset-bottom, 0px));
    border: 0;
    background: none;
    box-shadow: none;
    /* The strip around the pill is not a target: it is the page, with a bar
       floating over it. */
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}

/* The motto, under the bar and above the phone's own home bar. It is the page's
   own words rather than a control, so it takes no presses and no taps: it is the
   one thing on the screen that is only ever read. It is always one line tall,
   whatever it says: a wrapped or absent sentence would otherwise move the bar and
   break the match with the tracker's. */
.tabbar__motto {
    width: 100%;
    max-width: 32rem;
    height: 1.25em;
    margin: .35rem 0 0;
    overflow: hidden;
    color: var(--star);
    font-size: .78rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The line is reserved even when there is no motto yet: hiding it with `hidden`
   collapsed the space and let the bar sit closer to the bottom than the other
   half's. It is present, and invisible, until the motto is read. */
.tabbar__motto.is-empty { visibility: hidden; }

/* The row, and the one slot that belongs to the page beside it. The track gives the
   row its width; the across slot shares the row's own rhythm rather than floating
   above it. */
.tabbar__track {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* The page to the right, worn as the last slot of the bar.

   The site is two pages mounted side by side, and the bar across the foot is the
   one place where a sideways gesture belongs to nothing else. The slot sits on the
   edge the swipe leads to, shares the bar's height and rhythm, and wears the other
   app's own mark and name - so it is a real place in the row rather than a label
   floating above it, and it can be pressed by a reader who has never swiped. A
   hairline separates it from the planner's own five places without giving it a
   second surface. */
.tabbar__slot.tabbar__slot--across { flex: .85 1 0; min-width: 2.3rem; }

/* One gold arrow, on the edge the swipe leads to. It keeps the same share of the
   row as the tracker's Planner slot, so the + sits in the same place in both bars;
   the word is in the link's aria-label rather than in the row. */
.tabbar__across {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    min-height: var(--tabbar-row, 3.25rem);
    padding: .3rem .05rem .25rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--star);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* The divider belongs to the slot rather than to the row: it is the one mark that
   says this place is a door to somewhere else, and it stays out of the hover fill. */
.tabbar__across::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--glass-line);
    pointer-events: none;
}

.tabbar__across:hover,
.tabbar__across:focus-visible { background: var(--wash); }
.tabbar__across:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The door wears both of its marks at once, side by side and still: the direction,
   and the other app's own mark saying what is on the other side of the bar. Nothing
   here moves, fades or takes turns - a mark that is sometimes missing is a mark a
   reader can arrive in time to miss, and the two are small enough to stand together.

   Both halves of the site link this file, so the tracker's door and the planner's
   are drawn by this one rule. */
.tabbar__across-swap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
}

.tabbar__across-icon {
    width: 1rem;
    height: 1rem;
    color: var(--star);
}

/* The direction is drawn rather than typed: a chevron at the same weight and in the
   same hand as the mark beside it, so the two read as one door rather than a glyph
   that happened to land next to a drawing. */
.tabbar__across-arrow {
    display: inline-flex;
    align-items: center;
    width: .72rem;
    height: .72rem;
    color: var(--star);
}

.tabbar__across-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* A panel owns the space above the bar while it is open; the slot would sit on top
   of the list it is standing beside. */
.tabbar:has(.tabbar__panel:not([hidden])) .tabbar__slot--across {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The one-time lesson above the slot. It is a callout, not a control: no presses,
   no focus, and gone as soon as the gesture it names has been used. It wears the
   bar's glass so it reads as something the bar is saying rather than as a second
   card placed over the page. */
.tabbar__across-coach {
    position: absolute;
    right: 0;
    bottom: calc(100% + .45rem);
    padding: .3rem .5rem;
    border: 1px solid var(--glass-line);
    border-radius: .6rem;
    background: var(--glass);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    color: var(--tabbar-ink);
    font-size: .68rem;
    font-weight: 650;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: 0 10px 24px var(--glass-shadow);
    pointer-events: none;
}

.tabbar__across-coach[hidden] { display: none; }
.tabbar__across-coach::after {
    content: '';
    position: absolute;
    top: 100%;
    right: .55rem;
    width: .5rem;
    height: .5rem;
    margin-top: -.28rem;
    transform: rotate(45deg);
    background: var(--glass);
    border-right: 1px solid var(--glass-line);
    border-bottom: 1px solid var(--glass-line);
}

@media (prefers-reduced-motion: no-preference) {
    .tabbar__across-coach:not([hidden]) {
        animation: tabbar-coach-in .3s ease-out both, tabbar-coach-pulse 2.4s ease-in-out .45s 2;
    }
}

@keyframes tabbar-coach-in {
    from { opacity: 0; transform: translateY(.2rem); }
    to { opacity: 1; transform: none; }
}

@keyframes tabbar-coach-pulse {
    0%, 100% { box-shadow: 0 10px 24px var(--glass-shadow); }
    50% { box-shadow: 0 0 0 3px var(--star-soft), 0 10px 24px var(--glass-shadow); }
}

/* The bar itself: a rounded capsule, floating clear of the bottom edge, glassy
   enough to show the page moving under it and solid enough to read against
   anything. The panels and the page keep clear of it rather than it of them. */
.tabbar__row {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    width: 100%;
    max-width: 32rem;
    margin: 0;
    padding: .25rem;
    list-style: none;
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    background: var(--tabbar-glass, var(--glass));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 16px 36px var(--glass-shadow), inset 0 1px 0 var(--glass-glow);
    /* The one-time lesson above the across slot stands outside the capsule. The
       capsule's own background and the slots' rounded fills do the clipping that
       matters, so the row itself can let that callout through. */
    overflow: visible;
    pointer-events: auto;
    /* The bar takes the sideways axis for the swipe across to the bill tracker and
       leaves the page its own, so a finger going down the page still scrolls it. Both
       apps leave a press on the bar alone, so nothing else was using this one.
       @see setUpBarSwipe() in app.js */
    touch-action: pan-y;
    /* The lean follows the finger with no easing of its own; letting go is what eases,
       which is why the easing is declared here and switched off while a hand is on it. */
    transition: transform .2s cubic-bezier(.22, .68, .3, 1);
}

.tabbar__row.is-swiping { transition: none; cursor: grabbing; user-select: none; }

/* A browser that cannot blur has to be told to be solid instead: glass over a
   page of text with nothing behind it is a bar you cannot read. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tabbar__row { background: var(--surface); }
}

.tabbar__slot { display: flex; flex: 1 1 0; min-width: 0; }

/* A slot is a whole area, not a word: the 44px a thumb needs is the button's
   own height, and the label sits inside it rather than beside the icon. */
.tabbar__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    min-height: var(--tabbar-row, 3.25rem);
    padding: .4rem .15rem .35rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--tabbar-ink);
    font: 650 .62rem/1 var(--sans);
    letter-spacing: .015em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* The slot you are standing on wears the accent twice over - the filled icon and
   a soft capsule behind it - so the bar reads as a dial with you on it. The
   accent as *ink* rather than as a fill, which is the deep blue on a light page
   and the pale blue on a dark one. */
.tabbar__link.is-current { color: var(--accent-ink); background: var(--accent-soft); }
.tabbar__link:hover, .tabbar__link:focus-visible { background: var(--wash); }
.tabbar__link.is-current:hover, .tabbar__link.is-current:focus-visible { background: var(--accent-soft); }
.tabbar__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabbar__label {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Two widths where a name no longer fits the slot it sits in.

   A slot is a sixth of the capsule, so the narrower the phone the less of each
   name there is room for - and a row of names clipped to "Exp..." says less than
   the drawing above it. Below 25rem the words tighten and the slots stop padding
   themselves sideways, which buys about a character; below 20rem, where even that
   is not enough, the words are taken off the screen and the marks are the bar.
   They stay in the markup, so the bar is still read out in full, and the slot you
   are standing on is still told by the filled pose. */
@media (max-width: 25rem) {
    .tabbar__link { padding-inline: 0; letter-spacing: 0; }
    .tabbar__label { font-size: .58rem; }
}

@media (max-width: 20rem) {
    .tabbar__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        clip-path: inset(50%);
        border: 0;
    }

    .tabbar__link { gap: 0; }
}

/* One icon drawn twice: the rim of the shape while the slot is resting, and the
   whole of it once you are there. The detail strokes are cut in the bar's own
   colour, so a filled week is still a week rather than a solid square. */
.tabbar__icon { display: block; width: 1.75rem; height: 1.75rem; }

.tabbar__icon-line path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tabbar__icon-fill { display: none; }

.tabbar__icon-fill path { fill: currentColor; }

.tabbar__icon-fill path:not(:first-child) {
    fill: none;
    stroke: var(--tabbar-face);
    stroke-width: 1.9;
    stroke-linecap: round;
}

.tabbar__link.is-current .tabbar__icon-line { display: none; }
.tabbar__link.is-current .tabbar__icon-fill { display: block; }

/* The way in is the one slot that is lit whatever page you are on, because it is
   the one thing you can do here rather than somewhere you can go. */
/* The + is the one slot that is a thing to do rather than a place to be, so it is
   drawn a size larger than the four that are places - a wider slot, a bigger face -
   and always filled. It is the middle of five, which is where a thumb lands without
   aiming, and it is the one press on the bar that makes something rather than going
   somewhere.

   Everything it is given it takes back out of its own padding rather than out of the
   bar's height: the row is 3.4rem, every page keeps room for the bar, and the motto
   under it and where a panel opens are both measured from that - so a + that made the
   bar taller would move all three. It is a little bigger *within* the row it has. */
.tabbar__slot--add { flex: 1.35 1 0; min-width: 3.65rem; }

/* A hold on the ＋ is the app's own second menu, so the browser has none.

   Holding the ＋ crosses to the other side's Add panel - the tracker's on the planner,
   the planner's on the tracker. On iOS a hold on a link is also a *link* gesture: the
   callout - Open in New Tab, Copy, Share - is drawn over the panel the hold has just
   opened, and `contextmenu` cannot refuse it, because the callout is not a context menu.
   It is the touch callout and nothing else, so it is refused here, on the class both
   halves of the site wear. `draggable="false"` on the planner's link stops a hold from
   starting a drag of it before the timer fires. Neither the press nor the swipe across
   the bar is touched: only the callout goes.
   @see setUpBar() in assets/js/app.js, initFab() in bills/app.js */
.tabbar__link--add {
    padding-block: .12rem .18rem;
    color: var(--accent-ink);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.tabbar__link--add .tabbar__icon { width: 2.2rem; height: 2.2rem; }
.tabbar__link--add .tabbar__icon-fill { display: block; }
.tabbar__link[aria-expanded="true"] { color: var(--ink); }
.tabbar__link[aria-expanded="true"] .tabbar__icon-fill path:not(:first-child) { stroke: var(--tabbar-face); }

/* You, in the corner where your own things are: an initial in a circle, which is
   the only picture the app has of anybody, filled in when the panel is out. */
.tabbar__face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--surface-sunk);
    color: var(--tabbar-ink);
    font: 700 .78rem/1 var(--sans);
}

.tabbar__link--me.is-current .tabbar__face,
.tabbar__link--me[aria-expanded="true"] .tabbar__face { background: var(--accent); color: var(--on-accent); }

/* --- what the + and Me open --------------------------------------------- */

/* A panel stands on the bar rather than over the page: what it holds belongs to
   where you are standing, and a sheet that covered the page would be a page you
   have to get back from. It is a plain list, each row a link the script may turn
   into the dialog the app already has for that thing.

   It is a surface rather than a pane of glass, and that is the one place in the app
   where the bar's own material is not the right answer: glass is read *with* what is
   behind it, which is what keeps a bar of five icons out of the page's way, but a
   list of words over a page of words is two sets of words in the same place. So a
   panel is drawn solid, on the page's own surface, and the page it stands over is
   dimmed rather than seen through - it says "you are choosing from this list" in one
   look instead of leaving the reader to work out which words belong to which. */
.tabbar__panel {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: calc(100% + .4rem);
    width: min(32rem, calc(100vw - 2 * var(--tabbar-gap, .7rem)));
    max-height: min(70vh, 26rem);
    overflow: auto;
    transform: translateX(-50%);
    padding: .6rem .6rem .5rem;
    border: 1px solid var(--line-strong);
    border-radius: 1.15rem;
    background: var(--surface);
    box-shadow: 0 18px 40px var(--glass-shadow), 0 0 0 1px var(--glass-line);
    pointer-events: auto;
}

.tabbar__panel[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .tabbar__panel { animation: panel-rise .2s cubic-bezier(.22, .68, .3, 1) both; }
}

@keyframes panel-rise {
    from { opacity: 0; transform: translate(-50%, .4rem); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* The page under an open panel, dimmed - and nothing more than dimmed: it is the
   same scrim a dialog lays behind itself, softened, because the panel is a small
   choice rather than a room you have been taken into. It is drawn from the panel's
   own state rather than from a script, so there is no second thing to keep in step,
   and it takes no presses of its own: the bar is deaf to a press that is not on it,
   and the press that closes the panel is the page's own, heard on the document.

   It is laid *under* the bar rather than over it - the scrim is the one thing in the
   bar's own stacking context with a negative depth, so the five slots and the list
   the press opened both stand on it, and what it dims is the page behind. */
.tabbar:has(.tabbar__panel:not([hidden]))::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--scrim) 78%, transparent);
}

.tabbar__panel-title {
    margin: 0 0 .45rem;
    padding: 0 .4rem;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tabbar__list { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }

.tabbar__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .55rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

/* A row that is a button - the tracker's Add choices - shares the row's width
   rather than shrinking to its words. */
button.tabbar__item { width: 100%; }

.tabbar__item:hover,
.tabbar__item:focus-visible { background: var(--surface-sunk); }
.tabbar__item.is-current { background: var(--surface-sunk); }

.tabbar__item-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--surface-sunk);
    font-size: 1rem;
}

/* The drawing inside a row's circle: a stroke icon that takes the row's colour, so a
   gear or a clock is a drawing rather than a character the reader's font may not have. */
.tabbar__row-icon { display: block; width: 1.05rem; height: 1.05rem; }

/* A row of the panel that opens where it stands rather than travelling: the motto and
   the palette. It is a <details>, so it works with no script, and it is drawn as the
   same row every other thing in the list is - icon, name, one quiet line - with a
   caret that turns when it opens. */
.tabbar__fold { margin: 0; padding: 0; border: 0; }

.tabbar__fold-open {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .55rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.tabbar__fold-open::-webkit-details-marker { display: none; }
.tabbar__fold-open::marker { content: ''; }
.tabbar__fold-open:hover,
.tabbar__fold-open:focus-visible { background: var(--surface-sunk); }
.tabbar__fold-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tabbar__fold-open .tabbar__item-text { min-width: 0; }
.tabbar__fold-open .tabbar__item-note {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabbar__fold-caret {
    flex: none;
    margin-left: auto;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform .18s ease;
}

.tabbar__fold[open] > .tabbar__fold-open { background: var(--surface-sunk); }
.tabbar__fold[open] > .tabbar__fold-open .tabbar__fold-caret { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
    .tabbar__fold-caret { transition: none; }
}

.tabbar__item-label { display: block; font-size: .92rem; font-weight: 600; }
.tabbar__item-note { display: block; color: var(--muted); font-size: .78rem; }

/* The Add panel is three choices rather than a page of settings: no description,
   no title - just three marks with their names beside them, in a card small enough
   to be read in one look. It is narrower than the bar it stands on, because it is a
   choice and not a page; and each row is a button of the same size, its drawing on
   the left and its name against it, wearing its own wash of colour, so the three are
   told apart before any of them is read. The Me panel keeps its rows exactly as they
   were. */
.tabbar__panel--add {
    width: min(19rem, calc(100vw - 2 * var(--tabbar-gap, .7rem)));
    padding: .5rem;
    border-radius: 1.05rem;
}

.tabbar__panel--add .tabbar__list { gap: .4rem; }

.tabbar__panel--add .tabbar__item {
    justify-content: flex-start;
    min-height: 3.15rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: .85rem;
    background: var(--surface-sunk);
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease;
}

/* The mark is a drawing on the left of its name rather than a character in front of
   it: the row's own circle is not drawn here, because the row is already the card,
   and a ring inside a tinted button is a ring around a ring. */
.tabbar__panel--add .tabbar__item-icon { background: none; }
.tabbar__panel--add .tabbar__row-icon { width: 1.4rem; height: 1.4rem; }

/* One tint each, in the order the rows are offered: the task in the accent, the
   repeating task in the star's gold, the note on the quiet surface. The tint and the
   mark are the whole of the difference; the name is the same size in all three. */
.tabbar__panel--add .tabbar__list > li:nth-child(1) .tabbar__item { background: var(--accent-soft); }
.tabbar__panel--add .tabbar__list > li:nth-child(2) .tabbar__item { background: var(--star-soft); }

/* Pressing one lights its edge rather than filling it, so the row still reads as
   the thing it names while the hand is on it. */
.tabbar__panel--add .tabbar__item:hover,
.tabbar__panel--add .tabbar__item:focus-visible {
    border-color: var(--accent);
    background: var(--wash);
}

.tabbar__panel--add .tabbar__item-label { font-size: 1.05rem; font-weight: 650; }

/* The held ＋ opens the other half's Add panel in the same card. It is a second panel
   rather than more rows in the first, because a press and a hold ask two different
   questions: "what can I write here" and "what can I write over there". The rows are
   the same size and wear the same tints, so the instrument reads as one whichever
   side of the site it was opened on. */
.tabbar__panel--across {
    width: min(19rem, calc(100vw - 2 * var(--tabbar-gap, .7rem)));
    padding: .5rem;
    border-radius: 1.05rem;
}

.tabbar__panel--across .tabbar__panel-title { margin: 0 0 .35rem; padding: 0 .55rem; }
.tabbar__panel--across .tabbar__list { gap: .4rem; }

.tabbar__panel--across .tabbar__item {
    justify-content: flex-start;
    min-height: 3.15rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: .85rem;
    background: var(--surface-sunk);
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease;
}

.tabbar__panel--across .tabbar__item-icon { background: none; }
.tabbar__panel--across .tabbar__row-icon { width: 1.4rem; height: 1.4rem; }

.tabbar__panel--across .tabbar__list > li:nth-child(1) .tabbar__item { background: var(--accent-soft); }
.tabbar__panel--across .tabbar__list > li:nth-child(2) .tabbar__item { background: var(--star-soft); }
.tabbar__panel--across .tabbar__list > li:nth-child(3) .tabbar__item { background: var(--surface-sunk); }

.tabbar__panel--across .tabbar__item:hover,
.tabbar__panel--across .tabbar__item:focus-visible {
    border-color: var(--accent);
    background: var(--wash);
}

.tabbar__panel--across .tabbar__item-label { font-size: 1.05rem; font-weight: 650; }

.tabbar__out { margin: .35rem 0 0; padding: .45rem .55rem 0; border-top: 1px solid var(--line); text-align: left; }

/* The space you are in, said rather than offered: pressing the space you are
   already standing in is a journey that goes nowhere, so it is written as a fact.
   The name is the loud half and the role is the quiet one, because "owner" is a
   note about the space rather than the space itself. */
.tabbar__me-space { margin: 0; padding: .1rem .55rem .5rem; border-bottom: 1px solid var(--line); }

.tabbar__me-name { display: block; font-size: 1rem; font-weight: 650; }
.tabbar__me-note { display: block; color: var(--muted); font-size: .78rem; }

/* The motto's editor, in the Me panel: the one line under the bar, changed where
   it is read. It is a field and a save, not a separate settings page, because the
   sentence is already on every screen. */
.tabbar__motto-form,
.tabbar__landing-form {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: .5rem .55rem .1rem;
}

/* The landing choice is about the account rather than the sentence under the bar,
   so it is ruled off from the motto editor above it. */
.tabbar__landing-form {
    margin-top: .15rem;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
}

.tabbar__motto-form .field,
.tabbar__landing-form .field { margin: 0; }
.tabbar__motto-form input,
.tabbar__landing-form select { width: 100%; }
.tabbar__motto-form .btn,
.tabbar__landing-form .btn { justify-self: start; }

.tabbar__motto-note {
    margin: 0 0 .35rem;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.35;
}
/* --- the marks ------------------------------------------------------------
   Every picture the app draws for itself is one drawing, declared once in a sprite the
   page carries (App\Support\Icons, and bills/icons-sprite.html for the tracker) and
   referenced by name. A mark is a stroke on the same 24x24 grid the bar's own icons are
   drawn on, and it takes its colour from the thing it stands in - which is why there is
   no colour here at all.

   The size is in `em`, so a mark in a row is the size of the row's words and a mark on a
   button is the size of the button's: the same drawing, at whatever the type around it
   happens to be, on both halves of the site. The one setting that has to be stated is
   the alignment, because a stroke sits on the baseline of the text it stands beside
   rather than in the middle of it. */
.icon {
    inline-size: 1.05em;
    block-size: 1.05em;
    flex: 0 0 auto;
    vertical-align: -0.125em;
}

.icon-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-mark > .icon {
    inline-size: 1.1em;
    block-size: 1.1em;
}

.icon-sprite {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
}