/* platform pages. Built on the N tokens (public/n/tokens.css) and the shared parts (public/n/parts.css, public/css/app.css).
   Only what the shared parts do not already have. Same rules: pt units, concentric corners, no line dividers,
   hover is a step of fill, red only for destructive, green for done, layered dark tones in dark mode, 44 or more to press. */

/* the squircle, where the browser has it, for the rounded parts below that are not capsules */
@supports (corner-shape: superellipse(1.8)) {
  .p-tile, .p-addr, .p-card { corner-shape: superellipse(var(--sq, 1.8)); }
}

/* a link inside a line of small words: the words stay where they are, and the link still gets a 44pt target */
.p-links a { position: relative; }
.p-links a::after { content: ""; position: absolute; inset: calc(-14 * var(--pt)) calc(-4 * var(--pt)); }

/* ============================== the platform's home ============================== */
/* what to try: the search under the title, and beside it once there is room the kinds (Workshops, Events), at the right
   edge of the side's columns; on a phone the kinds are their own sideways row under the search */
.p-find { display: grid; gap: var(--s4); min-width: 0; }
@media (width >= 900px) {
  .p-find { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .p-find > .a-search { grid-column: 1 / span var(--span-main); }
  .p-find > .a-scroll { grid-column: span var(--span-side) / -1; justify-content: end; margin-inline: 0; padding-inline: 0; }
}
/* a list's heading, and how many are in it, in grey after it */
.p-count { color: var(--grey); font-weight: 400; }
/* after what's on: the studios, then the way in for the people who run one. From 900 they are the page's main column and
   its side, each under its own heading, so the two start on one line */
.p-lower { display: grid; gap: var(--s7); align-items: start; min-width: 0; }
@media (width >= 900px) {
  .p-lower { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
  .p-lower > :first-child { grid-column: 1 / span var(--span-main); }
  .p-lower > :last-child:not(:first-child) { grid-column: span var(--span-side) / -1; }
}
/* for the people who run a studio: a few words and one quiet button, on a card of their own */
.p-owners { gap: var(--s2); }
.p-owners .x-btn { justify-self: start; margin-top: var(--s3); }

/* ============================== for studios: a few points, and three steps ============================== */
/* a short list in one soft group: a small tile (an icon, or the step's number), then a line in ink and one in grey.
   Nothing here is pressed, so nothing has a hover */
.p-list { list-style: none; }
.p-item { display: grid; grid-template-columns: calc(48 * var(--pt)) minmax(0, 1fr); align-items: center; gap: var(--s3); min-height: var(--c-row);
  padding: var(--s2) var(--rpl) var(--s2) var(--s2); }
/* the tile sits 8 in from the item's 12 corner, so its corner is 4, as a picture in a row */
.p-tile { display: grid; place-items: center; width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); border-radius: var(--r-in-row); background: var(--fill-1);
  font-weight: 500; font-variant-numeric: tabular-nums; }
.p-tile svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.p-text { display: grid; gap: calc(2 * var(--pt)); min-width: 0; }

/* ============================== a new studio's address ============================== */
/* the site's own address in grey, then the part the studio chooses, in one field. A long site address gives way from
   its start (…vercel.app/), so the studio's own part always keeps its room */
.p-addr { display: flex; align-items: center; min-width: 0; height: var(--c-lg); padding-left: calc(14 * var(--pt)); border-radius: var(--r-item); background: var(--fill-1);
  cursor: text; transition: background-color 140ms, box-shadow 140ms; }
.p-addr:hover { background: var(--fill-2); }
.p-addr:focus-within { background: transparent; box-shadow: 0 0 0 2px var(--ring); }
.x-field.is-wrong .p-addr { background: var(--danger-bg); box-shadow: none; }
.p-addr > span { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: rtl; color: var(--grey); font-size: max(16px, var(--t-b)); }
.x-field .p-addr input { flex: 1 1 0; min-width: 40%; height: 100%; padding: 0 calc(14 * var(--pt)) 0 0; border-radius: 0; background: transparent; box-shadow: none; }
.x-field .p-addr input:hover, .x-field .p-addr input:focus, .x-field.is-wrong .p-addr input { background: transparent; box-shadow: none; }

/* ============================== a studio's page: how to get there ============================== */
/* the address, then at most two ways on. Once the page is wide, the buttons sit beside the address at their own width */
.p-visit { display: grid; gap: var(--s2); }
@media (width >= 900px) {
  .a-page.wide .p-visit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4); }
  .a-page.wide .p-visit .a-actions { grid-auto-flow: column; grid-auto-columns: max-content; }
  .a-page.wide .p-visit > .a-actions:only-child { grid-column: 1 / -1; justify-content: start; }
}

/* ============================== the legal pages: plain words to read ============================== */
.p-doc { display: grid; gap: var(--s6); }
.p-doc p, .p-doc li { max-width: 34em; }
.p-doc ul { display: grid; gap: var(--s1); margin: 0; padding-left: 1.25em; }

/* ============================== the site's header, on a wide screen ============================== */
/* N's header (x-head): the platform's name on the left, where to go in the middle, the language and the person's own way
   in on the right, all floating over the page as the phone bar's buttons do. On a phone it isn't drawn: the page has its
   own title, and the same things are in the bar at the foot (p-sitebar), under the thumb */
.p-head { display: none; }
.p-head .x-who .a-mark { width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); }
.p-head .x-who .a-mark b { font-size: var(--t-s); }
@media (hover: hover) { .p-head a.x-who:hover { background: var(--btn-float-hover); } }
.p-head .x-seg { height: var(--c-reg); background: var(--btn-float); box-shadow: var(--lift-2); }
.p-head .x-seg a[aria-current] { background: light-dark(var(--fill-2), var(--dk-hi)); box-shadow: none; }
.p-head .x-seg a::after { content: ""; position: absolute; inset: calc(-1 * var(--s1)) 0; }   /* the switch is 44; each part of it presses as 44 */
.p-head .x-btn[aria-current] { background: var(--btn-float-press); }
@media (width >= 900px) {
  .p-head { display: grid; }
  /* the page begins where the top fade ends (the page's own top space included), so a title never sits up against
     the header's buttons and nothing is under the fade when the page first moves (Owen, 10 Nov) */
  .p-head + main { padding-top: calc(var(--head-y, var(--s4)) + var(--c-reg) + var(--frame-h) - var(--s5)); }
  :root:has(.p-head) { --frame-top: calc(var(--head-y, var(--s4)) + var(--c-reg) + var(--frame-h)); }
  .p-brandtop { display: none; }   /* the header carries the platform's name */
  .p-sitebar { display: none; }    /* and the menu, the language and the account */
  :root:has(.p-sitebar) { --bar-space: 0px; }
}

/* someone's own circle: the first letter of their name, the mark's colours at the size of a word beside it */
.p-avatar { flex: none; display: inline-grid; place-items: center; width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); border-radius: 50%;
  background: light-dark(var(--ink), var(--dk-hi)); color: light-dark(var(--paper), var(--ink)); font-size: var(--t-s); line-height: 1; font-weight: 500; }
.x-btn.p-me { padding-left: var(--s2); }   /* the circle sits 8 in from the pill's end, so the two curves run together */
.x-btn.p-me > span:last-child { max-width: calc(140 * var(--pt)); overflow: hidden; text-overflow: ellipsis; }

/* ============================== panels that open beside their button ============================== */
/* the language panel (a-pop) also drops from a button at the top of the page: below it, from its right edge */
.p-pop-at { position: relative; }
.a-pop.p-drop { top: calc(100% + var(--s2)); bottom: auto; left: auto; right: 0; transform-origin: top right; transform: translateY(-4px) scale(.96); }
.a-pop.p-drop.is-open { transform: none; }
/* the menu on a phone: the same panel, holding links as well as buttons, and the languages on one line at its foot */
.a-pop.p-menu { min-width: calc(264 * var(--pt)); }
.a-pop > a.p-go { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); width: 100%; min-height: var(--c-lg); padding: 0 var(--rpl);
  border-radius: var(--r-item); font-size: var(--t-b); text-align: left; transition: background-color 150ms var(--ease-respond); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .a-pop > a.p-go:hover { background: var(--fill-1); } }
.a-pop > a.p-go:active { background: var(--fill-2); }
.a-pop > a.p-go[aria-current="page"] { background: var(--fill-2); font-weight: 500; }
.p-langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(4 * var(--pt)); margin-top: var(--s2); }
.a-pop .p-langs button { justify-content: center; padding: 0 var(--s2); }

/* a label over a group of buttons (a field's label, for something that isn't one input) */
.x-field .p-label { font-size: var(--t-s); line-height: var(--l-s); color: var(--grey); letter-spacing: 0.01em; }

/* ============================== task pages on a wide screen ============================== */
/* One rule for every page that does one job (a workshop, a booking, signing in, an account): on a phone its action floats at
   the foot (a-bar), under the thumb, with the way back beside it. From 900 there is no bar. The way back is quiet words above
   the title (p-back), and the action sits in the page, where a laptop expects it: in the side card, right under the form it
   sends, or beside the title. A page writes its bar where the action belongs on a wide screen (p-dock); on a phone the bar is
   fixed to the foot, so where it is written changes nothing there. */

/* what only one size shows: on a wide screen the side card says the price, on a phone the page's own facts do */
@media (width < 900px) { .p-wide-only { display: none !important; } }
@media (width >= 900px) { .p-phone-only { display: none !important; } }

/* several of a page's sections together, as far apart as the page's own */
.p-sections { display: grid; gap: var(--s7); align-content: start; min-width: 0; }
.p-main, .p-side { min-width: 0; }
/* a title with the page's action beside it (a list of the person's own): on a phone, just the title */
.p-headrow { display: grid; gap: var(--s4); min-width: 0; }
.p-back { display: none; }

@media (width >= 900px) {
  /* no bar at the foot, so no room kept for one: the frame's bottom edge comes down to the page's margin, as on the home page */
  :root:has(.p-dock) { --bar-space: 0px; }

  /* the bar in its place in the page: its button as wide as the card or form it ends, still 52 tall. Its round Back has moved
     above the title, and a bar that held only that is gone */
  .a-bar.p-dock { position: static; z-index: auto; grid-template-columns: minmax(0, 1fr); width: auto; max-width: none; margin: 0; padding: 0; pointer-events: auto; }
  .a-bar.p-dock > .x-ibtn { display: none; }
  .a-bar.p-dock:not(:has(> :not(.x-ibtn))) { display: none; }
  /* on the page it no longer floats: N's own primary, its sleeping state and Done, and what went wrong on its own red */
  .a-bar.p-dock .x-btn.pri { box-shadow: inset 0 1px 0 light-dark(transparent, rgb(255 255 255 / .09)), 0 0 0 1px light-dark(transparent, rgb(255 255 255 / .05)); }
  .a-bar.p-dock .x-btn.pri.is-asleep { background: var(--btn-quiet); color: var(--ink); box-shadow: none; }
  .a-bar.p-dock .x-btn.pri.is-asleep:active { background: var(--btn-quiet-press); }
  .a-bar.p-dock .x-btn.pri.ok { box-shadow: var(--rim-light); }
  .a-bar.p-dock .a-note { background: var(--danger-bg); box-shadow: none; }
  /* in an empty state, or beside a title, as wide as its words */
  .a-empty .a-bar.p-dock, .p-headrow .a-bar.p-dock { justify-items: center; }
  .a-empty .a-bar.p-dock .x-btn, .p-headrow .a-bar.p-dock .x-btn { width: auto; }
  .p-headrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

  /* the way back: the page's top row, a round button on the frame's left edge (no bare words: its name is its tooltip), as
     the dashboard's. The page's gap after it is the head's own (24): it belongs to what it sits above */
  .p-back { display: inline-grid; justify-self: start; margin-bottom: calc(var(--s5) - var(--s7)); }
}
@media (width >= 900px) and (hover: hover) {
  .a-bar.p-dock .x-btn.pri.is-asleep:hover { background: var(--btn-quiet-hover); }
  .a-bar.p-dock .x-btn.pri.ok:hover { background: color-mix(in oklab, var(--ok) 22%, var(--raised)); }
}

/* ============================== two columns: the page and its side ============================== */
/* From 900, on the frame's columns: the page's own column (7 of 12, 4 of 8) from the left edge, and its side (5 of 12, 4 of 8)
   to the right edge, one gutter apart, so a workshop and its booking form keep the card in one place. On a phone the two
   are one column, in the order they are written. Anything else in the page (the way back, a title over both) runs across */
@media (width >= 900px) {
  .a-page.p-two { grid-auto-flow: row dense; align-items: start; }
  .p-two > * { grid-column: 1 / -1; }
  .p-two > .p-main { grid-column: 1 / span var(--span-main); }
  .p-two > .p-side { grid-column: span var(--span-side) / -1; }
}
/* a workshop: the picture and words, about, then the facts down the main column, the booking card down the side, from the
   picture's top. It is written in the phone's order (facts, dates, about) and placed here; the main column's last row takes
   whatever more the card needs */
@media (width >= 900px) {
  .p-work { grid-template-rows: auto auto auto 1fr; }
  .p-work > .p-back { grid-row: 1; }
  .p-work > :is(.p-top, .p-about, .a-facts) { grid-column: 1 / span var(--span-main); }
  .p-work > .p-top { grid-row: 2; }
  .p-work > .p-about { grid-row: 3; }
  .p-work > .a-facts { grid-row: 4; }
  .p-work > .p-side { grid-row: 2 / -1; }
  .p-work:not(:has(> .p-about)) { grid-template-rows: auto auto 1fr; }
  .p-work:not(:has(> .p-about)) > .a-facts { grid-row: 3; }
}

/* ============================== a card of its own, on a wide screen ============================== */
/* The parts that make one thing (a form, a booking, the booking card) on one soft surface: booking's corner (40) and its
   inset for picks (28), so the fields and dates inside nest. On a phone they are the page itself, as before. Inside, a note's
   words sit straight on the card (what went wrong keeps its red), and buttons share a row */
@media (width >= 900px) {
  .p-card { gap: var(--s5); padding: var(--i-book); border-radius: var(--r-book); background: var(--fill-0); }
  .p-card .a-note:not(.wrong, .ok) { padding: 0; background: none; }
  .p-card .a-actions:not(.two) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  /* a page's title, when the page is a card, is the card's title */
  .p-card .x-display { font-size: var(--t-t); line-height: var(--l-t); letter-spacing: -0.012em; }
  /* a note after the card's action is its small print (how paying works, under Confirm); what went wrong stays full size */
  .p-card .a-bar.p-dock ~ .a-note:not(.wrong) { font-size: var(--t-s); line-height: var(--l-s); }
}
/* the side card stays in view as the page moves, just under the frame's top edge, on a screen tall enough to hold it. A long
   run of dates scrolls inside it, so its button is always there */
@media (width >= 900px) and (height >= 720px) {
  .p-stick { position: sticky; top: var(--frame-top); display: flex; flex-direction: column; max-height: calc(100dvh - var(--frame-top) - var(--frame-bot));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .p-stick > * { flex: none; }
  .p-stick > .p-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
/* the price, first in the booking card: the number at the title's size, what it is for beside it in grey */
.p-price { display: grid; gap: var(--s1); }
.p-price .x-title span { color: var(--grey); font-size: var(--t-b); font-weight: 400; letter-spacing: 0; }
/* a picked date under a mouse keeps its ink, a step lighter, as N's primary does: the quiet hover would put its light words on
   a light fill. Only where there is a pointer that hovers, so a phone is as it was */
@media (hover: hover) {
  .a-tile[aria-pressed="true"]:not([disabled]):hover { background: light-dark(color-mix(in oklab, var(--ink) 88%, var(--paper)), var(--dk-hi-2)); }
  .a-tile[aria-pressed="true"]:not([disabled]):active { background: light-dark(color-mix(in oklab, var(--ink) 78%, var(--paper)), color-mix(in oklab, var(--dk-hi), var(--paper) 25%)); }
}