/*
 * Stordax booking widget — the look, as custom properties the site sets on the container.
 *
 *   [data-stordax-booking] {
 *     --bk-accent: #17150f;        the selected slot, the submit button
 *     --bk-accent-ink: #fff;       text on the accent
 *     --bk-ink: inherit;           text
 *     --bk-muted: #6e6759;         secondary text
 *     --bk-surface: transparent;   the widget's own background (usually none — it sits on the page)
 *     --bk-field: #fff;            input and button backgrounds
 *     --bk-line: rgba(0,0,0,.18);  hairlines
 *     --bk-radius: 10px;           corners — the month's arrows too, which stay round until it is set
 *     --bk-font: inherit;          the page's own type, by default
 *     --bk-title-font: inherit;    the panel titles — the page's display face, if it has one
 *     --bk-title-weight: 600;      their weight — 400 for a display face cut in one weight only,
 *                                  or the browser draws a fake bold over it
 *     --bk-scroll-margin: 0px;     the site's fixed header height, in any unit (rem and calc()
 *                                  work): a step change on a phone scrolls the panel to just under it
 *   }
 *
 * Nothing here sets a width: the widget fills whatever column it is placed in, and it is
 * designed for a column between 20rem and 40rem. Every class is stable and may be targeted
 * by the site's stylesheet for anything the properties do not cover.
 *
 * Every rule is written `.bk .bk-…` on purpose: a host site's own `.wrap h3` or `section p`
 * rule would otherwise outrank a bare class and put its margins inside the widget.
 */

/*
 * The reset, and the reason it is here: the widget lands inside somebody else's stylesheet.
 * MODE Barber's site styles `section { padding: 110px 0 }`, which is right for its own page
 * and put 220px of air inside the booking panel. An element selector on the host page beats a
 * bare class of ours, so every element the widget uses is reset first and then styled by the
 * `.bk .bk-…` rules below, which outrank both.
 */
.bk section, .bk div, .bk p, .bk ul, .bk ol, .bk li, .bk h1, .bk h2, .bk h3, .bk h4,
.bk form, .bk label, .bk span, .bk a, .bk button, .bk input, .bk textarea, .bk i, .bk b, .bk small {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; color: inherit; text-align: left; text-transform: none; letter-spacing: normal;
  width: auto; min-width: 0; max-width: none; height: auto; min-height: 0; float: none;
  list-style: none; text-decoration: none; text-indent: 0; opacity: 1; position: static;
  transform: none; animation: none; transition: none;
}

.bk { font-family: var(--bk-font, inherit); color: var(--bk-ink, inherit); background: var(--bk-surface, transparent); line-height: 1.5; box-sizing: border-box; }
.bk *, .bk *::before, .bk *::after { box-sizing: inherit; }
.bk button, .bk input, .bk textarea { font: inherit; color: inherit; }
.bk button { cursor: pointer; }
.bk button:disabled { cursor: default; opacity: .55; }
.bk :focus-visible { outline: 2px solid var(--bk-accent, #17150f); outline-offset: 2px; }

/* the rail: one track that says how far along the booking is, and the names of the steps this
   business actually asks — three for a barber, five for a salon with a team and its own areas.
   A continuous track rather than chips, because it can move while you work inside a step. */
.bk .bkx-rail { margin: 0 0 1.5rem; }
.bk .bkx-rail-track { height: 4px; border-radius: 2px; background: var(--bk-line, rgba(0,0,0,.18)); overflow: hidden; }
.bk .bkx-rail-fill { height: 100%; width: 100%; border-radius: 2px; background: var(--bk-accent, #17150f); transform: scaleX(.06); transform-origin: left center; transition: transform .45s cubic-bezier(.2,.8,.25,1); }
.bk .bkx-rail-labels { display: grid; margin-top: .5rem; font-size: .8rem; font-weight: 600; }
/* whatever the number of labels, the ends hug the ends of the rail and the rest are centred */
.bk .bkx-rail-l { color: var(--bk-muted, #6e6759); text-align: center; transition: color .3s ease; }
.bk .bkx-rail-l:first-child { text-align: left; }
.bk .bkx-rail-l:last-child { text-align: right; }
.bk .bkx-rail-l.is-done { color: var(--bk-ink, inherit); }
.bk .bkx-rail-l.is-current { color: var(--bk-accent, #17150f); }
@media (max-width: 26rem) { .bk .bkx-rail-labels { font-size: .72rem; } }

.bk .bk-panel { animation: bk-in .24s ease-out both; }
@keyframes bk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bk-panel { animation: none; } }

.bk .bk-title { font-family: var(--bk-title-font, inherit); font-size: 1.15rem; font-weight: var(--bk-title-weight, 600); margin: 0 0 .8rem; line-height: 1.25; }
.bk .bk-title:focus { outline: none; }
.bk .bk-summary { margin: 0 0 .9rem; font-size: .9rem; color: var(--bk-muted, #6e6759); }
.bk .bk-dot { opacity: .5; padding: 0 .1em; }
.bk .bk-link { background: none; border: 0; padding: .5rem 0; margin: -.5rem 0; min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--bk-accent, #17150f); text-decoration: underline; text-underline-offset: .18em; font-size: inherit; }
.bk .bk-notice { margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: var(--bk-radius, 10px); font-size: .88rem; background: var(--bk-field, #fff); border: 1px solid var(--bk-line, rgba(0,0,0,.18)); }
.bk .bk-notice-warn { border-color: #b0553a; color: #8a3a22; }
.bk .bk-notice-design { border-style: dashed; color: var(--bk-muted, #6e6759); }
.bk .bk-loading, .bk .bk-empty { margin: .4rem 0 0; color: var(--bk-muted, #6e6759); font-size: .92rem; }

/* the lists: services, areas, people — one row shape for all three */
.bk .bk-services { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bk .bk-service { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: left; padding: .8rem 1rem; background: var(--bk-field, #fff); border: 1px solid var(--bk-line, rgba(0,0,0,.18)); border-radius: var(--bk-radius, 10px); transition: border-color .15s, transform .15s; }
.bk .bk-service:hover { border-color: var(--bk-accent, #17150f); }
.bk .bk-service:active { transform: scale(.995); }
/* The row is `space-between` with three things in it — name, meta, chevron or nothing — so the
 * free space fell between the name and the meta and every row put its duration and price in a
 * different place. The name takes the free space; the meta stays at the right edge. */
.bk .bk-service-name { font-weight: 500; flex: 1 1 auto; }
/* Two columns, right aligned, wide enough for the longest entry: a price list where every row
 * puts its duration and its price in a different place is a list of separate things, not a
 * list of prices. `ch` because the widths have to follow whatever face the site sets. */
.bk .bk-service-meta { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: baseline; column-gap: .9rem; font-size: .88rem; color: var(--bk-muted, #6e6759); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk .bk-service-time { min-width: 7ch; text-align: right; }
.bk .bk-service-price { min-width: 9ch; text-align: right; color: var(--bk-ink, inherit); }

/* On a narrow screen the two columns eat the width the name needs, and «Medizinische
 * Fusspflege» breaks into three lines beside them. There the duration and the price drop
 * underneath the name instead. `:has` keeps this to rows that carry a meta; a browser without
 * it simply keeps the columns. */
@media (max-width: 30rem) {
  .bk .bk-service:has(.bk-service-meta) { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; row-gap: .15rem; align-items: center; }
  .bk .bk-service:has(.bk-service-meta) .bk-service-name { grid-column: 1; grid-row: 1; }
  .bk .bk-service:has(.bk-service-meta) .bk-service-meta { grid-column: 1; grid-row: 2; justify-content: start; column-gap: .6rem; }
  .bk .bk-service:has(.bk-service-meta) .bk-service-time,
  .bk .bk-service:has(.bk-service-meta) .bk-service-price { min-width: 0; text-align: left; }
  .bk .bk-service:has(.bk-service-meta) .bk-service-time + .bk-service-price::before { content: '·'; margin-right: .5rem; color: var(--bk-muted, #6e6759); }
}

/* the month, and the day's times in its place */
/* 2.75rem is 44px at the default size: the smallest thing a thumb reliably hits */
.bk .bk-nav { width: 2.75rem; text-align: center; height: 2.75rem; border-radius: var(--bk-radius, 50%); border: 1px solid var(--bk-line, rgba(0,0,0,.18)); background: var(--bk-field, #fff); font-size: 1.15rem; line-height: 1; display: grid; place-items: center; }
.bk .bk-nav:disabled { opacity: .32; }
.bk .bkx-monthnav { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .8rem; font-size: 1rem; font-weight: 600; }
.bk .bkx-monthhead { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; margin-bottom: .3rem; }
.bk .bkx-mh { text-align: center; font-size: .7rem; font-weight: 700; color: var(--bk-muted, #6e6759); }
.bk .bkx-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
/* the day cell carries how much is free under its number, as a bar rather than a count: the
   question a visitor asks a calendar is "which day is worth opening", not "how many exactly" */
.bk .bkx-mcell { display: grid; gap: .25rem; justify-items: center; align-content: center; min-height: 3rem; padding: .35rem .1rem; border-radius: var(--bk-radius, 10px); background: var(--bk-field, #fff); transition: background .18s ease, color .18s ease; }
.bk .bkx-mblank { display: block; min-height: 3rem; }
.bk .bkx-mday { font-size: .98rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.bk .bkx-mfree { display: block; height: 3px; border-radius: 2px; width: calc(2px + var(--n) * 2px); background: var(--bk-accent, #17150f); opacity: .55; }
.bk .bkx-mcell:hover:not(.is-closed):not(.is-selected) { background: color-mix(in srgb, var(--bk-accent, #17150f) 12%, transparent); }
.bk .bkx-mcell.is-closed { background: none; color: var(--bk-muted, #6e6759); opacity: .45; cursor: default; }
.bk .bkx-mcell.is-selected { background: var(--bk-accent, #17150f); color: var(--bk-accent-ink, #fff); }
.bk .bkx-mcell.is-selected .bkx-mfree { background: var(--bk-accent-ink, #fff); opacity: .8; }
/* a month whose availability has not landed yet: the shape is right, the days are not answers */
.bk .bkx-month.is-loading .bkx-mcell { opacity: .4; }
.bk .bkx-group { margin-top: .9rem; }
.bk .bkx-group-l { font-size: .8rem; font-weight: 700; color: var(--bk-muted, #6e6759); margin-bottom: .4rem; }
.bk .bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .4rem; }
.bk .bk-slot { padding: .55rem .2rem; text-align: center; border: 1px solid var(--bk-line, rgba(0,0,0,.18)); border-radius: var(--bk-radius, 10px); background: var(--bk-field, #fff); font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s; }
.bk .bk-slot:hover { border-color: var(--bk-accent, #17150f); }
.bk .bk-slot.is-selected { background: var(--bk-accent, #17150f); color: var(--bk-accent-ink, #fff); border-color: var(--bk-accent, #17150f); }

/* the form */
.bk .bk-form { display: grid; gap: .8rem; }
.bk .bk-field { display: grid; gap: .3rem; }
.bk .bk-field label { font-size: .85rem; color: var(--bk-muted, #6e6759); }
/* 16px is the floor under which mobile Safari zooms the viewport on focus, and the field
   inherits the site's body size — 15.2px on a 16px root at .95rem. The zoom threw the
   customer out of the layout at the last step (Gloire, all four rounds). max() so a site
   with a smaller root cannot put it back under the line. */
.bk .bk-field input, .bk .bk-field textarea { width: 100%; font-size: max(1rem, 16px); padding: .7rem .85rem; border: 1px solid var(--bk-line, rgba(0,0,0,.18)); border-radius: var(--bk-radius, 10px); background: var(--bk-field, #fff); }
.bk .bk-field textarea { resize: vertical; min-height: 3.2rem; }
.bk .bk-field.is-invalid input, .bk .bk-field.is-invalid textarea { border-color: #b0553a; }
.bk .bk-error { margin: 0; font-size: .83rem; color: #8a3a22; }
.bk .bk-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* `.bk .bk-…` so these outrank the `.bk button { color: inherit }` reset above. */
.bk .bk-submit, .bk .bk-button { display: inline-block; padding: .8rem 1.3rem; border: 1px solid var(--bk-accent, #17150f); border-radius: var(--bk-radius, 10px); background: var(--bk-accent, #17150f); color: var(--bk-accent-ink, #fff); font-weight: 500; text-decoration: none; text-align: center; transition: transform .15s, opacity .15s; }
.bk .bk-submit { justify-self: start; margin-top: .3rem; }
.bk .bk-submit:not(:disabled):active, .bk .bk-button:active { transform: translateY(1px); }

/* the confirmation */
.bk .bk-panel-done .bk-title { font-size: 1.35rem; }
.bk .bk-done-when { margin: 0; font-size: 1.1rem; font-weight: 500; }
.bk .bk-done-what, .bk .bk-done-mail, .bk .bk-done-where, .bk .bk-done-next { margin: .15rem 0 0; color: var(--bk-muted, #6e6759); }
.bk .bk-done-where { margin-top: .6rem; color: var(--bk-ink, inherit); }
.bk .bk-done-next { margin-top: .6rem; }
.bk .bk-panel-done .bk-notice { margin-top: .9rem; }
.bk .bk-actions { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; align-items: center; margin: 1.1rem 0 .6rem; }

/* contact: the shop books elsewhere, so the whole widget is one button that goes there. It is
   the one thing in the panel, so it is drawn bigger than a step's button and, on a phone, as
   wide as the column. The phone line under it is the same foot every step carries. */
.bk .bk-contact-go { margin: .2rem 0 0; }
.bk .bk-contact-button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .9rem 1.6rem; font-size: 1.05rem; }
.bk .bk-contact-num { font-variant-numeric: tabular-nums; font-weight: 400; opacity: .85; }
@media (max-width: 30rem) { .bk .bk-contact-button { display: flex; width: 100%; } }

/* offline, and the phone line under every step */
.bk .bk-offline { margin: 0 0 .5rem; }
.bk .bk-offline-call { margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.bk .bk-foot { margin: 1.2rem 0 0; font-size: .86rem; color: var(--bk-muted, #6e6759); }
.bk .bk-tel { color: inherit; font-variant-numeric: tabular-nums; text-decoration: underline; text-underline-offset: .18em; }
/* the number is the fallback for the whole widget, so it has to be as easy to hit as a
   step. Padding against a matching negative margin, like .bk-link above, so the 44px
   target costs the line it sits on no height. The offline call is already a button. */
.bk .bk-tel:not(.bk-button) { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 0; margin: -.5rem 0; }

/* the chosen row, and the rows this choice ruled out. Dimmed rather than removed, so the list
   does not jump around under the hand that is reading it. */
.bk .bk-service.is-chosen { border-color: var(--bk-accent, #17150f); box-shadow: inset 0 0 0 1px var(--bk-accent, #17150f); }
.bk .bk-service.is-chosen .bk-service-name { color: var(--bk-accent, #17150f); }
.bk .bk-service.is-out { opacity: .42; }
.bk .bk-service.is-out:hover { border-color: var(--bk-line, rgba(0,0,0,.18)); }

/* services under the owner's own areas, when the list is long enough to need them */
.bk .bkx-cat + .bkx-cat { margin-top: 1.1rem; }
.bk .bkx-cat-l { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--bk-muted, #6e6759); margin-bottom: .4rem; }
.bk .bkx-area .bk-service-name { font-weight: 600; }

/* who does it */
.bk .bkx-person { align-items: center; gap: .9rem; justify-content: flex-start; }
.bk .bkx-face { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--bk-accent, #17150f); color: var(--bk-accent-ink, #fff); font-weight: 700; font-size: .95rem; }
.bk .bkx-face.is-any { background: none; border: 2px dashed var(--bk-line, rgba(0,0,0,.18)); }
.bk .bkx-person-t { display: grid; gap: .1rem; }
.bk .bkx-person-r { font-size: .85rem; color: var(--bk-muted, #6e6759); font-weight: 400; }
.bk .bkx-person::after { content: '›'; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--bk-muted, #6e6759); }
.bk .bkx-person.is-out { cursor: default; }
.bk .bkx-person.is-out .bkx-face { background: var(--bk-line, rgba(0,0,0,.18)); color: var(--bk-muted, #6e6759); }
.bk .bkx-who { margin: 0 0 .3rem; font-weight: 600; color: var(--bk-accent, #17150f); }

/* the answers so far, as a line of things you can go back to */
.bk .bk-crumb { font-weight: 600; color: var(--bk-accent, #17150f); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; padding: .55rem 0; margin: -.55rem 0; min-height: 2.75rem; display: inline-flex; align-items: center; }
.bk .bk-crumb:hover { text-decoration-thickness: 2px; }
.bk .bkx-under-title { margin: -.5rem 0 .2rem; }
.bk .bkx-back { display: inline-flex; align-items: center; gap: .3rem; margin: 0 0 .5rem -.45rem; padding: .3rem .8rem .3rem .5rem; min-height: 2.75rem; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--bk-muted, #6e6759); transition: background .15s, color .15s; }
.bk .bkx-back::before { content: '‹'; font-size: 1.25rem; line-height: 1; }
.bk .bkx-back:hover { background: var(--bk-field, #fff); color: var(--bk-ink, inherit); }

/* The panel that never resizes. It is measured once against the views that must be seen whole,
   and holds that height for the whole booking; a list longer than the block scrolls inside it.
   Growing from a short list to a month and shrinking again to a form moved the page twice on
   the way to one appointment. */
.bk .bkx-blocks { display: grid; gap: 1rem; }
.bk.bkx-cols-2 .bkx-blocks { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.bk.bkx-cols-3 .bkx-blocks { grid-template-columns: 1.05fr 1.15fr 1fr; gap: 1.5rem; }
/* Square, though it paints nothing: a rounded corner on a box that clips cuts whatever stands
   in it, and the title stands in the top-left one — the W and the Q of a display face lost
   their first stroke on both Modes. The views scroll their own lists, and a wheel over one that
   has nothing to scroll, or has reached its end, carries on to the page: `overscroll-behavior:
   contain` held the page still under the pointer on every site, every step. */
.bk .bkx-stage { position: relative; overflow: hidden; }
.bk .bkx-view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; animation: none; transition: opacity .24s ease, transform .3s cubic-bezier(.2,.8,.25,1); }
.bk .bkx-view.is-entering { opacity: 0; }
.bk .bkx-view.from-right { transform: translateX(18px); }
.bk .bkx-view.from-left { transform: translateX(-18px); }
.bk .bkx-view.is-leaving { opacity: 0; pointer-events: none; }
.bk .bkx-view.is-leaving.to-left { transform: translateX(-18px); }
.bk .bkx-view.is-leaving.to-right { transform: translateX(18px); }
/* a row cut in half at the bottom must read as "there is more", not as a mistake. A mask
   fades the rows themselves, so it is right on any ground — a painted gradient needed to know
   the page's colour, and on a navy page it washed the last row white. */
.bk .bkx-stage.has-more .bkx-view:not(.is-leaving) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent); }
/* the probe the height is measured with, and the confirmation, are the two things that size to themselves */
.bk .bkx-probe { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; }
.bk .bkx-probe .bkx-view { position: static; overflow: visible; }
.bk.bkx-done .bkx-stage { height: auto !important; overflow: visible; }
.bk.bkx-done .bkx-view { position: static; overflow: visible; }

/* A block whose turn has not come shows what will stand there, out of focus, with the one thing
   that is missing written across it. Without this, choosing a service in a wide layout looked
   like nothing had happened, because the calendar was already on screen. */
.bk .bkx-wait { position: relative; height: 100%; }
.bk .bkx-wait-under { filter: blur(2px); opacity: .62; pointer-events: none; user-select: none; }
.bk .bkx-wait-under .bk-service, .bk .bkx-wait-under .bkx-mcell, .bk .bkx-wait-under .bk-slot,
.bk .bkx-wait-under .bk-field span, .bk .bkx-wait-under .bkx-fake-field { display: block; }
.bk .bkx-wait-under .bkx-fake-field, .bk .bkx-wait-under .bk-field span { height: 3.1rem; border-radius: var(--bk-radius, 10px); background: var(--bk-field, #fff); border: 1px solid var(--bk-line, rgba(0,0,0,.18)); }
.bk .bkx-wait-note { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; place-items: center; text-align: center; padding: 1.5rem; font-weight: 600; font-size: 1rem; color: var(--bk-muted, #6e6759); }
/* and the moment it is given something: one ring, a quarter of a second, fading — an overlay
   whose opacity animates, so it costs a composite and not a paint */
.bk .bkx-stage.just-woke::before { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 0 0 2px var(--bk-accent, #17150f); pointer-events: none; z-index: 1; animation: bkx-woke .24s ease-out both; }
@keyframes bkx-woke { from { opacity: 1; } to { opacity: 0; } }

/* a block is narrower than a column beside the page's text: the meta line gives way first */
.bk.bkx-cols-2 .bk-service-meta, .bk.bkx-cols-3 .bk-service-meta { column-gap: .6rem; font-size: .85rem; }
/* the reset sets min-width:0 on everything, so in a narrow block the duration and the price
   shrink into each other — the meta keeps its size and the name wraps instead */
.bk .bk-service-meta > span { flex: 0 0 auto; }
/* a third of a desktop panel is as narrow as a phone: the same two-line row belongs there */
.bk.bkx-cols-3 .bk-service:has(.bk-service-meta) { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; row-gap: .15rem; align-items: center; }
.bk.bkx-cols-3 .bk-service:has(.bk-service-meta) .bk-service-name { grid-column: 1; grid-row: 1; }
.bk.bkx-cols-3 .bk-service:has(.bk-service-meta) .bk-service-meta { grid-column: 1; grid-row: 2; justify-content: start; }
.bk.bkx-cols-3 .bk-service:has(.bk-service-meta) .bk-service-time,
.bk.bkx-cols-3 .bk-service:has(.bk-service-meta) .bk-service-price { min-width: 0; text-align: left; }
.bk.bkx-cols-3 .bk-service:has(.bk-service-meta) .bk-service-time + .bk-service-price::before { content: '·'; margin-right: .5rem; color: var(--bk-muted, #6e6759); }
.bk.bkx-cols-3 .bk-service:has(.bk-service-meta)::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* in a wide layout the date sits on the form as a way back, not as a sentence */
.bk.bkx-cols-2 .bkx-back, .bk.bkx-cols-3 .bkx-back { font-weight: 700; color: var(--bk-ink, inherit); }

@media (prefers-reduced-motion: reduce) {
  .bk .bkx-stage, .bk .bkx-view, .bk .bkx-rail-fill, .bk .bkx-mcell { transition: none; }
  .bk .bkx-stage.just-woke::before { animation: none; opacity: 0; }
}