/* ==========================================================================
   Osevaro tab screens (round 2, mockups/APP-SPEC.md sections 10.2, 10.5-10.8):
   categories.html, favourites.html, basket.html, account.html, and the
   offline screen (offline.html). Built from ds/osevaro.css and ds/app.css;
   this file only lays the pieces out. No colours of its own: every value is a
   design-system token, so light and dark both work.
   On phones (html[data-shell="app"]) each page is a tab root: a large title
   under the app bar, cards and list groups, the docked tab bar. On desktop the
   same content sits in the shared shell between the site header and footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: the large-title head and the page column
   -------------------------------------------------------------------------- */
.tabs-page { display: flex; flex-direction: column; gap: 32px; }
.tabs-head { display: flex; flex-direction: column; gap: 6px; }
.tabs-head__sub { font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.tabs-head__sub[hidden] { display: none; }
.tabs-card { padding: clamp(20px, 2.4vw, 32px); }
.tabs-card > * + *, .tabs-card [data-when-order] > * + * { margin-top: 12px; }
.tabs-card > .pet + * { margin-top: 0; }
.tabs-card .h2 + p { margin-top: 8px; }
.tabs-card .h2 { font-size: clamp(22px, .7vw + 16px, 28px); }
.tabs-card p:not([class]) { color: var(--ink-soft); line-height: 1.55; }
.tabs-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px !important; }
.tabs-actions > .btn { width: 100%; }
.tabs-fine { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

html[data-shell="app"] .tabs-page { gap: 24px; padding-top: 8px; }
html[data-shell="app"] .tabs-head { gap: 2px; }

/* A tab root with nothing in its bar (Basket, Account): at the top of the page the bar is only the
   safe-area spacer, so the big title sits right under the status bar instead of under an empty
   56px strip. The bar keeps its size (56 + safe-t, A2) but overlaps the page (negative margin), so
   nothing jumps: it stays see-through until the title has scrolled under it, then fills in with
   the title, as before. Not while offline: the offline row is stuck under the bar's full height. */
html[data-shell="app"][data-root]:not([data-net="offline"]) .appbar:not(.appbar--demo):has(> .appbar__row > .appbar__start:empty):has(> .appbar__row > .appbar__end:empty) {
  margin-bottom: calc(-1 * var(--appbar-h));
}
html[data-shell="app"][data-root]:not([data-net="offline"]) .appbar:not(.appbar--demo):not(.has-title):has(> .appbar__row > .appbar__start:empty):has(> .appbar__row > .appbar__end:empty) {
  background: linear-gradient(var(--paper), var(--paper)) top / 100% var(--safe-t) no-repeat;
  box-shadow: none; pointer-events: none;
}
html[data-shell="app"][data-root]:not([data-net="offline"]):has(.appbar:not(.appbar--demo) > .appbar__row > .appbar__start:empty):has(.appbar:not(.appbar--demo) > .appbar__row > .appbar__end:empty) .tabs-page { padding-top: 30px; }   /* the title's foot stays under the bar line, so the bar keeps clear until it scrolls */
html[data-shell="app"] .tabs-head__sub { font-size: 15px; }
html[data-shell="app"] .tabs-card { padding: 20px; border-radius: 20px; }
html[data-shell="app"] .tabs-card .h2 { font-size: 22px; }

/* --------------------------------------------------------------------------
   Favourites (10.5): saved cards, the notify card, the empty state
   -------------------------------------------------------------------------- */
.fav-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.fav-layout > *, .bk-layout > *, .acct-wrap > * { min-width: 0; }
.fav-grid[hidden], .fav-empty[hidden] { display: none; }
.fav-grid > li[hidden] { display: none; }
html.motion-ok .fav-grid > li { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.fav-grid > li.is-leaving { opacity: 0; transform: scale(.94); }
.fav-grid > li.is-arriving { opacity: 0; transform: scale(.96); }
.fav-grid .door { min-height: 100%; }

/* empty state: kitten-yarn-blush lies on the card's top edge, room kept above it */
.fav-empty { text-align: center; margin-top: 88px; }
.fav-empty > * + * { margin-top: 10px; }
.fav-empty p { max-width: 34ch; margin-inline: auto; }
.fav-empty .tabs-actions { align-items: center; }
.fav-empty .tabs-actions > .btn { width: auto; }

/* the notify card (closed): cat-sleeping curls up on its top edge */
.fav-notify { margin-top: 72px; }
.fav-notify .notify { margin-top: 18px; }
html[data-favs="none"] .fav-notify { margin-top: 0; }   /* empty state: the cat steps aside (one pet per screen), so no room is kept */

/* On a computer screen (site layout) the saved cards fill the shell, "Browse categories" is a
   small button beside the title (the tall doorway tile held two lines and an arrow), and the
   notify card is its own full-width row under the cards: tops line up, and the cat's room is
   the space above that row. */
.tabs-head__go { display: none; }
html[data-shell="site"] .fav-grid__door { display: none; }
html[data-shell="site"] .tabs-head:has(.tabs-head__go) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end;
}
html[data-shell="site"] .tabs-head:has(.tabs-head__go) > :not(.tabs-head__go) { grid-column: 1; }
html[data-shell="site"] .tabs-head__go { display: inline-flex; grid-column: 2; grid-row: 1 / span 2; align-self: end; }
html[data-shell="site"][data-favs="none"] .tabs-head__go { display: none; }   /* the empty card has its own button */
@media (min-width: 1024px) {
  html[data-shell="site"] .fav-notify { margin-top: 64px; }   /* + the 32px layout gap: room for the 76px cat */
  html[data-shell="site"][data-order="closed"] .fav-notify > [data-when-order="closed"],
  html[data-shell="site"][data-order="open"] .fav-notify > [data-when-order="open"] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); grid-template-rows: auto auto; column-gap: 56px; align-items: start;
  }
  html[data-shell="site"] .fav-notify > [data-when-order] > * { grid-column: 1; margin-top: 0 !important; }
  html[data-shell="site"] .fav-notify > [data-when-order] > .h2 + p { margin-top: 8px !important; }
  html[data-shell="site"] .fav-notify > [data-when-order] > :is(.notify, .tabs-actions) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  html[data-shell="site"] .fav-notify .tabs-actions > .btn { width: 100%; }
  /* empty: the kitten's card and the notify card side by side, tops level */
  html[data-shell="site"][data-favs="none"] .fav-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
  html[data-shell="site"][data-favs="none"] :is(.fav-empty, .fav-notify) { margin-top: 112px; }
  html[data-shell="site"][data-favs="none"] .fav-notify > [data-when-order] { display: block; }
  html[data-shell="site"][data-favs="none"] .fav-notify > [data-when-order] > * + * { margin-top: 12px !important; }
  html[data-shell="site"][data-favs="none"] .fav-notify > [data-when-order] > .notify { margin-top: 18px !important; }
}
html[data-shell="app"] .fav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { html[data-shell="app"] .fav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* phone on its side, installed on a tablet */
@media (min-width: 840px) { html[data-shell="app"] .fav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html[data-shell="app"] .fav-layout { gap: 24px; }
html[data-shell="app"] .fav-empty { margin-top: 92px; }
html[data-shell="app"] .fav-notify { margin-top: 56px; }   /* + the 24px layout gap = room for the cat */
/* in the app the doorway is one compact row under the cards, full width */
html[data-shell="app"] .fav-grid__door { grid-column: 1 / -1; }
html[data-shell="app"] .fav-grid .door { flex-direction: row; align-items: center; min-height: 72px; padding: 14px 14px 14px 18px; border-radius: 20px; }
html[data-shell="app"] .fav-grid .door .door__title { margin-top: 4px; }
html[data-shell="app"] .fav-grid .door .door__name { font-size: 20px; }
html[data-shell="app"] .fav-grid .door .door__arrow { width: 44px; height: 44px; }

/* --------------------------------------------------------------------------
   Basket (10.6): closed card, line items, summary, checkout
   -------------------------------------------------------------------------- */
.bk-view[hidden] { display: none; }
.bk-closed, .bk-emptycard { margin-top: 20px; }
.bk-closed .notify { margin-top: 20px; }
.bk-closed .tabs-actions { margin-top: 10px !important; }

.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.bk-lines { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bline {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0 14px; align-items: start;
  padding: 12px 12px 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px;
}
html.motion-ok .bline { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.bline.is-leaving { opacity: 0; transform: translateX(-12px); }
.bline__img { grid-row: 1 / span 2; display: block; width: 88px; height: 88px; overflow: hidden; border-radius: 14px; background: var(--well); }
.bline__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.bline__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.bline__name { font-size: 16px; font-weight: 650; line-height: 1.35; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .bline__name:hover { text-decoration: underline; text-underline-offset: .15em; } }
.bline__meta { font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.bline__price { margin-top: 2px; font-family: var(--font-display); font-weight: 600; font-variation-settings: 'SOFT' 50; font-size: 18px; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
.bline__each { font-size: 15px; color: var(--ink-soft); font-family: var(--font-body); font-weight: 400; }
.bline__qty { grid-column: 2; margin-top: 10px; }
.bline .qty { height: 44px; }
.bline .qty button[aria-disabled="true"] { color: var(--ink-soft); cursor: default; background: none; }
.bline__row {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px;
  margin: 12px -12px 0; padding: 2px 4px; border-top: 1px solid var(--line);
}
.bline__row .btn--ghost { min-height: 48px; padding-inline: 12px; }

.bk-sum { display: grid; gap: 0; margin: 0; padding: 4px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.bk-sum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; font-size: 16px; line-height: 1.4; }
.bk-sum__row + .bk-sum__row { border-top: 1px solid var(--line); }
.bk-sum__row dt { color: var(--ink); font-weight: 600; }
.bk-sum__row dd { margin: 0; text-align: right; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.bk-sum__row .tbc { display: block; font-size: 15px; }
.bk-sum__row .tbc__mark { margin: 4px 0 0; }
.bk-sum__total dt, .bk-sum__total dd { font-weight: 700; }
.bk-sum__total dd b { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'SOFT' 50; font-size: 22px; }
.bk-sum__total dd span { font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.bk-pay { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bk-pay .btn { width: 100%; }
.bk-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; color: var(--ink-soft); }
.bk-secure .ic { --ic-size: 18px; color: var(--accent-text); }
.bk-note { margin-top: 14px; padding-inline: 4px; }
.bk-pay .bk-note { margin-top: 0; text-align: center; }

/* the checkout bar: the DS .buybar with a label and the total instead of a thumbnail */
.buybar--basket .buybar__price { font-size: 20px; }

@media (min-width: 700px) {
  .bk-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 24px; }
}
@media (min-width: 1024px) {
  html[data-shell="site"] .bk-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 32px; }
  html[data-shell="site"] .bk-aside { position: sticky; top: calc(var(--header-h, 76px) + 24px); }
  html[data-shell="site"] .bk-closed, html[data-shell="site"] .bk-emptycard { max-width: 760px; }
  html[data-shell="site"] .bline { grid-template-columns: 120px minmax(0, 1fr); padding: 16px 16px 0; }
  html[data-shell="site"] .bline__row { margin-inline: -16px; justify-content: flex-start; }
  html[data-shell="site"] .bline__img { width: 120px; height: 120px; }
}

/* --------------------------------------------------------------------------
   Account (10.7): status card, list groups, version line
   -------------------------------------------------------------------------- */
.acct-status { margin-top: 0; }
.acct-status__title { padding-inline-end: 84px; }   /* clear of the window cat's hanging tail */
.acct-status .cluster { --cluster-gap: 10px; margin-top: 18px; }
.acct-groups { display: grid; gap: 0 32px; align-items: start; }
.acct-group > .lgroup-title { margin-top: 28px; }
html[data-shell="site"] .acct-group:first-child > .lgroup-title { margin-top: 8px; }
.acct-version { margin-top: 28px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.acct-version b { font-weight: 650; color: var(--ink); }

@media (min-width: 1024px) {
  html[data-shell="site"] .acct-wrap { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 40px; align-items: start; }
  html[data-shell="site"] .acct-status { margin-top: 0; }
  html[data-shell="site"] .acct-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-shell="site"] .acct-group:nth-child(2) > .lgroup-title { margin-top: 8px; }
}
/* the window cat's head comes up beside the large title (clear of it): pet top = card top - 68px.
   With the quiet bar (no empty strip above the title) the title sits at 30px and the card at 98px. */
html[data-shell="app"] .acct-status { margin-top: 14px; }
html[data-shell="app"] .acct-status .cluster > .btn { flex: 1 1 140px; }
/* the end cap's Privacy · Terms · Cookies row would repeat the About group just above it */
html[data-shell="app"][data-screen="account"] .footer__legal { display: none; }

/* Words that differ by where the page runs. Favourites live in the browser's storage until accounts
   exist, and on iPhone an app added to the Home Screen has storage of its own, separate from Safari,
   so "on this phone" would not be true: the page says "in this browser" in a browser tab (phone or
   computer) and "in this app" once installed. Shell (app / site) words use .tabs-only-app/-site. */
html[data-shell="app"] .tabs-only-site, html:not([data-shell="app"]) .tabs-only-app,
html[data-app="standalone"] .tabs-only-browser, html:not([data-app="standalone"]) .tabs-only-installed { display: none; }

/* --------------------------------------------------------------------------
   Categories (10.2): three painted tiles, shop by pet, everything, help
   -------------------------------------------------------------------------- */
.cats-tiles { margin: 0; padding: 0; list-style: none; }
.cats-tiles > li { display: flex; min-width: 0; }
.cats-tiles .ctile { flex: 1; }
html[data-shell="site"] .cats-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* never 2 + 1 */
.cats-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.cats-group > .lgroup-title { margin-top: 0; }
.cats-group + .cats-group > .lgroup-title { margin-top: 28px; }
.lrow > .lrow__dot { width: 18px; height: 18px; justify-self: center; }
/* the help card: cat-peeking looks over its top edge, room kept above it */
.cats-help { margin-top: 84px; }
.cats-help .cluster { margin-top: 16px; }
.cats-help p:not([class]) { max-width: 40ch; }

html[data-shell="app"] .cats-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 600px) { html[data-shell="app"] .cats-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* phone on its side */
html[data-shell="app"] .cats-tiles .ctile { padding: 8px; border-radius: 20px; }
html[data-shell="app"] .cats-tiles .ctile__art { aspect-ratio: 16 / 9; border-radius: 14px; }
html[data-shell="app"] .cats-tiles .ctile__body { padding: 12px 6px 4px 8px; }
html[data-shell="app"] .cats-tiles .ctile__name { font-size: 21px; }
html[data-shell="app"] .cats-tiles .ctile__sub { font-size: 15px; }
html[data-shell="app"] .cats-tiles .ctile__arrow { display: grid; width: 44px; height: 44px; }
html[data-shell="app"] .cats-group:first-child > .lgroup-title { margin-top: 4px; }
html[data-shell="app"] .cats-help { margin-top: 76px; }

/* computer screens: the rows sit side by side under the tiles, the help card closing the row;
   its top lines up with the two groups' cards, and the peeking cat uses the gap above */
@media (min-width: 1024px) {
  html[data-shell="site"] .cats-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 1.8vw, 28px); }
  html[data-shell="site"] .cats-group + .cats-group > .lgroup-title { margin-top: 0; }
  html[data-shell="site"] .cats-help { margin-top: 26px; }
}

/* --------------------------------------------------------------------------
   Offline (10.8): the screen itself is ds/app.css .offline; this sets the page
   -------------------------------------------------------------------------- */
html[data-screen="offline"] .offline .h1 { margin-top: 4px; }
/* a computer screen: a calm column between the header and the footer, not a full-height screen */
html[data-shell="site"][data-screen="offline"] .offline { min-height: 0; padding-block: 24px 8px; }
/* the footer's email form can't send anything offline: its help column takes the slot */
html[data-screen="offline"] .footer__help { display: flex; }
/* in the app it is one screen that does not scroll: the column fills what the bar (and the offline
   row under it, 44px) and the body's bottom padding leave, and stays centred in it */
html[data-shell="app"][data-screen="offline"] main > .section, html[data-shell="app"][data-screen="offline"][data-endcap="off"] main > .section:last-child { padding-block: 0; }
html[data-shell="app"][data-screen="offline"] .offline { min-height: calc(100dvh - var(--appbar-h) - var(--safe-t) - 24px - var(--safe-b)); }
html[data-shell="app"][data-screen="offline"][data-net="offline"] .offline { min-height: calc(100dvh - var(--appbar-h) - var(--safe-t) - 68px - var(--safe-b)); }