/* owner 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. */

/* a box of words that ends in buttons: the words keep close together, the buttons stand a step away */
.o-note { gap: var(--s3); }

/* a new studio's first steps: each row starts with its number, the next one in the primary's tone, a done one ticked in
   green. The words are instructions, so they wrap rather than being cut short */
.o-step { flex: none; display: grid; place-items: center; width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); border-radius: 50%;
  background: var(--fill-1); color: var(--grey); font-size: var(--t-s); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.o-step.is-next { background: light-dark(var(--ink), var(--dk-hi-2)); color: light-dark(var(--paper), var(--ink)); }
.o-step.is-done { background: var(--ok-bg); color: var(--ok); }
.o-step svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.o-steps .a-row-main > * { white-space: normal; overflow: visible; text-overflow: clip; }

/* a person's states, on a line of their own under their email */
.o-tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
/* a line under a row, about that row: on the row grid, so it starts where the row's words start */
.o-row-note { padding: 0 var(--rpr) var(--s2) var(--rpl); }

/* the picture picker's first choice, no picture at all: the whole width, saying so in words */
.a-arts .o-none { grid-column: 1 / -1; }
.a-arts .o-none .a-art { aspect-ratio: auto; display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--c-lg);
  padding: 0 var(--s4); color: var(--grey); font-size: var(--t-b); transition: background-color 150ms var(--ease-respond); }
.a-arts .o-none .a-art svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); min-width: 0; }
@media (hover: hover) { .a-arts .o-none:hover .a-art { background: var(--fill-2); } }

/* translations, read only, inside their disclosure: on the row grid, a little apart from each other */
details.x-disc > .o-said { display: grid; gap: var(--s1); padding: 0 var(--rpr) var(--s4) var(--rpl); max-width: 34em; }
details.x-disc > .o-said + .o-said { padding-top: var(--s2); }

/* ============================== the dashboard on a wide screen (900 and wider) ==============================
   A phone and an upright tablet keep the one column with the four places at the foot, under the thumb. From 900 the
   places move into a sidebar on the left that is always there (components/manage/side.tsx), and the page is the frame
   beside it, from the sidebar's edge to the right margin, never centred. Its top row holds the way back and its small
   line; its one action stands on the title's line at the frame's right edge (app.css, main.a-app). From 1200 the frame
   has 12 columns: a section's page uses them all, a page inside a section is narrow (7), and Today, a workshop and a
   customer put their aside beside the page (7 and 5). */

/* drawn only where there is room: on a phone the sidebar isn't there, and a page's aside is just more of the page, in order */
.o-side { display: none; }
.o-aside, .o-main { display: contents; }
/* only once there is room (900): Today's day itself (who's coming, the rest of today) and a list's way to all of it */
@media (width < 900px) { .o-wide { display: none !important; } }

/* ============================== Today ============================== */
/* the numbers belong to the head: on a phone, where the aside is just more of the page, they keep the head's own 24 under
   the next date, as before */
@media (width < 900px) { .o-aside > .a-stats:first-child { margin-top: calc(var(--s5) - var(--s7)); } }
/* who's coming to the date that is on: each booking a whole row to open, with its round check-in button at the row's end
   (from 900; a phone checks in from the date's own page, as before). Checked in, the button is green with its tick */
.o-check-row { position: relative; }
.o-check-row:has(> .x-ibtn) > .x-row { padding-right: calc(var(--rpr) + var(--c-reg) + var(--s3)); }
.o-check-row > .x-ibtn { position: absolute; top: 50%; right: var(--rpr); translate: 0 -50%; color: var(--grey); }
.o-check-row > .x-ibtn[aria-pressed="true"] { background: var(--ok-bg); color: var(--ok); }
@media (hover: hover) { .o-check-row > .x-ibtn[aria-pressed="true"]:hover { background: color-mix(in oklab, var(--ok) 22%, transparent); } }
.o-check-row > .x-ibtn svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
/* the dates still to come, once the day itself is drawn above them: from 900 today's own dates are left to the day, and a
   side list shows six, then the way to all of them */
@media (width >= 900px) {
  .o-cap > .x-row.o-now { display: none; }
  .o-cap > .x-row:nth-child(n + 7 of :not(.o-now)) { display: none; }
}
/* in the side's columns the week's numbers are fact rows, a label and its number, as a booking's facts are */
@media (width >= 1200px) {
  .o-aside > .a-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(4 * var(--pt)); padding: var(--gp); border-radius: var(--r-group); background: var(--fill-0); }
  .o-aside > .a-stats.fit > .a-stat { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: var(--s4); flex: none; max-width: none;
    min-height: calc(46 * var(--pt)); padding: var(--s3) var(--rpl); border-radius: var(--r-item); background: none; }
  .o-aside > .a-stats.fit > .a-stat b { font-size: var(--t-h); line-height: var(--l-h); }
  .o-aside > .a-stats.fit > .a-stat span { font-size: var(--t-b); line-height: var(--l-b); }
  @media (hover: hover) { .o-aside > .a-stats.fit > a.a-stat:hover { background: var(--fill-1); } }
}
/* a booking's line: what, when and how many, with a dot between them (a table's columns on a wide screen). Its parts keep
   the small line's own letter spacing, which N's reset (.x *) would otherwise take off them */
.o-dots > * { letter-spacing: inherit; }
.o-dots > * + *::before { content: " · "; }

@media (width >= 900px) {
  :root:has(.o-side) {
    --o-panel-w: calc(248 * var(--pt));
    --o-side-w: calc(var(--o-panel-w) + var(--s3) + env(safe-area-inset-left, 0px));
    /* the page's frame starts where the sidebar ends (A4); its top row, header row and fades are main.a-app's (app.css) */
    --frame-x0: var(--o-side-w);
    --o-act: calc(200 * var(--pt));   /* the room a title running the whole frame leaves for the action on its line */
  }
  body.x:has(.o-side) { padding-bottom: calc(var(--bar-edge) + var(--frame-h) + var(--s2) + env(safe-area-inset-bottom, 0px)); }

  /* ---------- the sidebar: N's panel of sections (30, 12 in, rows 18), pinned open on the left ---------- */
  .o-app { padding-inline-start: var(--o-side-w); }
  /* the frame belongs to the page, so it starts where the sidebar ends */
  .o-app main::before, body.x:has(.o-side)::after { left: var(--o-side-w); }
  .o-side { position: fixed; z-index: var(--z-controls); inset-block: var(--s3); left: calc(var(--s3) + env(safe-area-inset-left, 0px)); width: var(--o-panel-w);
    display: flex; flex-direction: column; gap: var(--s4); padding: var(--i-panel); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    border-radius: var(--r-panel); background: var(--raised); box-shadow: var(--rim-light), var(--lift-2); }
  .o-side::-webkit-scrollbar { display: none; }
  .o-side-top { display: grid; gap: var(--s2); justify-items: start; }
  .o-side-top .a-demo { margin-inline-start: var(--s1); }
  /* the studio: its mark and name, the way home to Today */
  .o-side-studio { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--c-reg); padding: var(--s1) var(--s3) var(--s1) var(--s1); border-radius: var(--r-group);
    font-weight: 500; line-height: var(--l-b); -webkit-tap-highlight-color: transparent; transition: background-color 150ms var(--ease-respond); }
  .o-side-studio > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the places and the settings: whole rows, 44 or more, an icon and a word; the page you are on is marked with fill and weight */
  .o-side-list { display: grid; gap: calc(2 * var(--pt)); }
  .o-side-h { padding: 0 var(--s3) var(--s1); }
  .o-side-link { display: flex; align-items: center; gap: var(--s3); min-height: var(--c-reg); padding: 0 var(--s3); border-radius: var(--r-group); color: var(--ink);
    line-height: var(--l-b); -webkit-tap-highlight-color: transparent; transition: background-color 150ms var(--ease-respond); }
  .o-side-link svg { flex: none; width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); color: var(--grey); transition: color 150ms var(--ease-respond); }
  .o-side-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (hover: hover) { .o-side-link:hover, .o-side-studio:hover { background: var(--fill-1); } .o-side-link:hover svg { color: var(--ink); } }
  .o-side-link:active, .o-side-studio:active { background: var(--fill-2); }
  .o-side-link[aria-current] { background: var(--fill-2); font-weight: 500; }
  .o-side-link[aria-current] svg { color: var(--ink); }
  /* the foot: the studio's own page, then who is signed in, with the language and signing out beside them (neutral: it destroys nothing) */
  .o-side-foot { display: grid; gap: var(--s3); margin-top: auto; }
  .o-me { display: flex; align-items: center; gap: var(--s2); min-width: 0; padding-inline-start: var(--s3); }
  .o-lang { position: relative; flex: none; }
  /* the language menu opens just above its button, from the button's right edge, so it stays inside the panel; in dark
     it is a step lighter than the panel it opens over */
  .o-side .a-pop { left: auto; right: 0; bottom: calc(100% + var(--s2)); min-width: 0; width: calc(176 * var(--pt)); transform-origin: bottom right; background: var(--btn-float); }
  .o-me-who { display: grid; gap: calc(2 * var(--pt)); flex: 1; min-width: 0; }
  .o-me-who > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .o-me-who .x-strong { font-size: var(--t-s); line-height: var(--l-s); }   /* who is signed in is small print beside its two buttons */
  /* its tooltip keeps inside the panel: over the button, from its right edge */
  @media (hover: hover) { .o-side [data-tip]::after { left: auto; right: 0; transform: translate(0, 4px); }
    .o-side [data-tip]:hover::after, .o-side [data-tip]:focus-visible::after { transform: none; } }

  /* ---------- the page beside it: the frame from the sidebar's edge, never centred (app.css). Below 1200 it is one column, so
     the parts of an aside or of Today's day (o-aside, o-main, drawn as no box of their own) each take the whole width ---------- */
  .a-manage { --span-main: 1; }
  .a-manage .a-page { grid-template-columns: minmax(0, 1fr); }
  /* the tabs are the sidebar's now; the sample tag is said once, in the sidebar; settings, the language and signing out
     are the sidebar's too, so a page doesn't say them again */
  .a-manage .a-tabs, .a-manage .a-page .a-demo, .o-phone { display: none; }
  /* the title comes first, under the top row, so it shares its line with the header row's action; a note follows it */
  .o-head-top > .a-title { order: -1; }
  /* a page the sidebar opens itself (the settings) needs no way back */
  .a-manage.is-top .a-bar > .x-ibtn { display: none; }
  /* a title that runs the whole frame leaves room on its right for the action on its line */
  .a-manage.has-add .a-title, .a-manage:has(.a-bar > .x-btn) .a-title { padding-inline-end: calc(var(--o-act) + var(--s4)); }
  /* two actions side by side share the row (paid, and checking in) */
  .a-manage .a-actions:has(> .x-btn + .x-btn) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 1200px) {
  /* on 12 columns: a section's own page (a list, Today) takes them all, a page inside a section is narrow (the main
     column's 7), and a page with an aside is the main column and the side (5) */
  .a-manage { --span-main: 7; --span-side: 5; }
  .a-manage .a-page { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .a-manage:not(.is-inner) .a-page > * { grid-column: 1 / -1; }
  /* a page with an aside: the page in the main column (its head, and at most one part after it; Today keeps its day in one
     part, o-main), the aside beside it from the first thing under the title. The aside spans the rows; the last row takes
     up whatever it is taller by, so nothing in the main column is pushed apart */
  .a-manage .a-page:has(> .o-aside) { grid-template-rows: auto 1fr; }
  .a-manage .a-page:has(> .o-aside) > :not(.o-aside) { grid-column: 1 / span var(--span-main); }
  .a-manage .a-page:has(> .o-aside) > .o-aside { grid-column: span var(--span-side) / -1; grid-row: 1 / -1; display: grid; gap: var(--s7); align-content: start; min-width: 0;
    margin-top: calc(var(--top-row) + var(--s1) + var(--l-t) + var(--s5)); }
  .o-main { display: grid; gap: var(--s7); align-content: start; min-width: 0; }
  /* a title in the main column ends short of the action, which stands over the side's columns */
  .a-manage .a-page:has(> .o-aside) .a-title, .a-manage.is-inner .a-page .a-title { padding-inline-end: 0; }
  /* what reads as a column of words on a wide section page (nothing here yet, a new studio's first steps) keeps a readable measure */
  .a-manage:not(.is-inner) :is(.a-empty, .o-steps) { max-width: calc(640 * var(--pt)); }
  /* things that each stand alone (workshops, customers) take two columns */
  .x-rows.o-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a search never runs the whole width; on Bookings it shares its line with the filters */
  .a-manage .a-search { width: 100%; max-width: calc(440 * var(--pt)); }
  .o-tools { display: flex; align-items: center; gap: var(--s4); }
  .o-tools .a-search { flex: 1 1 0; min-width: 0; }
  .o-tools .a-scroll { flex: none; margin-inline: 0; padding-inline: 0; }   /* the filters keep their words whole; the search gives way */
  /* bookings read as a table: who, which workshop, what time, how many places, and what they owe, each in its column */
  .x-rows.o-table .x-row.a-row { min-height: var(--c-row); }
  .x-rows.o-table .a-row-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .45fr) minmax(0, .55fr); align-items: baseline; column-gap: var(--s4); }
  .x-rows.o-table .o-dots { display: contents; }
  .x-rows.o-table .o-dots > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .x-rows.o-table .o-dots > *::before { content: none; }
  .x-rows.o-table .a-row-end { flex: 0 0 calc(150 * var(--pt)); justify-content: flex-end; }
}

/* the sidebar's rounded parts take the iOS corner where the browser has it (the panel keeps its round one in Safari: it carries a shadow) */
@supports (corner-shape: superellipse(1.8)) {
  .o-side, .o-side-studio, .o-side-link { corner-shape: superellipse(var(--sq, 1.8)); }
}