/* Studio OS — small custom layer over Pico.css */
/* One type scale: small text and small controls share 14px (0.875rem). */
small { font-size: 0.875rem; }
.narrow { max-width: 34rem; margin: 0 auto; }
.right { text-align: right; }
.brand { text-decoration: none; }

/* Top nav: one row on a phone. Staff see Today, Schedule and a Setup
   menu; clients see the client links. Every link is a 44px tap target. */
nav.site-nav li { padding-block: 0.25rem; }
nav.site-nav li a { display: inline-flex; align-items: center; min-height: 44px; }
nav.site-nav .brand { color: var(--pico-color); }
nav.site-nav details.dropdown { margin: 0; }
nav.site-nav details.dropdown > summary {
  display: flex; align-items: center; min-height: 44px; height: auto;
  padding-block: 0; border: 0; background: none; box-shadow: none; color: var(--pico-primary);
}
nav.site-nav details.dropdown > summary:not([role]) { padding-inline: 0.5rem; }
nav.site-nav details.dropdown > ul { min-width: 12rem; }
nav.site-nav details.dropdown > ul li { padding: 0; }
nav.site-nav details.dropdown > ul li a { display: flex; width: 100%; min-height: 44px; margin: 0; padding: 0 1rem; }
nav.site-nav details.dropdown > ul li form { display: block; padding: 0.5rem 1rem; }

.flash {
  padding: 0.6rem 1rem;
  border-left: 5px solid var(--pico-primary, #4f7cac);
  background: var(--pico-card-background-color, #fff);
  margin-bottom: 1rem;
}
.flash.error { border-left-color: #c0392b; }

.class-row { padding: 0.6rem 1rem; margin-bottom: 0.5rem; }
.class-row .grid { align-items: center; margin: 0; }
.class-row.cancelled { opacity: 0.5; }
.day-header { margin: 1.2rem 0 0.4rem; }

.inline-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; vertical-align: middle; }
/* Every disclosure on a page is a 44px tap target (special ones restyle below). */
details > summary:not([role]) { padding-block: 0.75rem; line-height: 1.25rem; }
/* Links that are the way into a row (client lists, admin schedule) are 44px tall too. */
main td > a, .class-row a:not([role]) { display: inline-flex; align-items: center; min-height: 44px; }
details.add-form { margin-top: 1.5rem; }
.usual-classes p { margin: 0.5rem 0 0.25rem; }
.usual-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; }
.usual-row select { flex: 1 1 12rem; margin: 0; }
.inline-form button, button.slim, a[role="button"].slim {
  /* Small, but still a 44px tap target (phone use at the class). */
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 0.8rem; font-size: 0.875rem; width: auto; margin: 0;
}
.slim-select { display: inline-block; width: auto; min-height: 44px; padding: 0 1.8rem 0 0.6rem; font-size: 0.875rem; margin: 0; }
.slim-row { margin: 0.25rem 0; }

.waiver-box {
  max-height: 16rem; overflow-y: auto; padding: 0.5rem 1rem;
  border: 1px solid var(--pico-muted-border-color, #ccc); border-radius: 6px;
  font-size: 0.875rem; margin-bottom: 0.6rem;
}
.filters select { margin-bottom: 0.3rem; }

@media (max-width: 640px) {
  .class-row .grid { grid-template-columns: 1fr; }
  .right { text-align: left; }
  /* Phone width (jenny-fit W5): the page itself never scrolls sideways.
     The top nav wraps (a signed-in admin's extra button pushed it to
     433px at 375), and a wide table scrolls inside its own box. */
  nav.container { flex-wrap: wrap; }
  nav.container ul { flex-wrap: wrap; }
  main table { display: block; overflow-x: auto; max-width: 100%; }
}
.table-scroll { overflow-x: auto; max-width: 100%; }

/* ---------------------------------------------------------------- roster
   One row per person (views/admin/roster_list.ejs): name, small tags, the
   one action that matters, and a quiet "More". No table, so nothing runs
   off a phone screen. Every control is at least 44px tall. */
.roster { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.roster li.roster-row {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 0.5rem; margin: 0; padding: 0.25rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
/* Phone: name and tags with "More" on line one; Cash and Card (owers only)
   on line two. Wider screens: everything on one line. */
.roster-row > .roster-who { grid-column: 1; grid-row: 1; }
.roster-row > details.more, .roster-row > .inline-form { grid-column: 2; grid-row: 1; }
.roster-row > .roster-actions { grid-column: 1 / -1; grid-row: 2; padding-bottom: 0.4rem; }
.roster-row > details.more[open] { grid-column: 1 / -1; grid-row: 3; }
@media (min-width: 641px) {
  .roster li.roster-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .roster-row > .roster-actions { grid-column: 2; grid-row: 1; padding-bottom: 0; }
  .roster-row > details.more, .roster-row > .inline-form { grid-column: 3; }
  .roster-row > details.more[open] { grid-row: 2; }
}
mark { white-space: nowrap; }
.roster li.roster-row.empty { padding: 0.75rem 0; }
.roster-who { flex: 1 1 9rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; }
.roster-name {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--pico-color); text-decoration: none;
}
.tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.tag {
  display: inline-block; font-size: 0.875rem; line-height: 1.4; padding: 0.1rem 0.55rem;
  border-radius: 1rem; background: var(--brand-soft, #eef2f7); color: var(--pico-color); white-space: nowrap;
}
.tag.warn { background: #fde7c0; color: #5a3b00; font-weight: 600; }
.roster-actions { display: flex; gap: 0.5rem; }
.roster-actions form { margin: 0; }
.roster-actions button { margin: 0; min-height: 44px; padding: 0 1.1rem; width: auto; }
details.more { margin: 0; }
details.more > summary {
  display: flex; align-items: center; min-height: 44px; padding: 0 0.25rem;
  font-size: 0.875rem; color: var(--pico-muted-color);
}
details.more > summary::after { margin-left: 0.35rem; }
.more-body { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.5rem; }
.more-body .inline-form { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
details.walkin { margin-bottom: 1rem; }
details.walkin > summary[role="button"] { width: 100%; text-align: center; }
details.walkin > summary[role="button"]::after { display: none; }
details.walkin[open] > summary { margin-bottom: 1rem; }

/* ------------------------------------------------------------- Today home */
.today-head { margin-bottom: 1rem; }
.today-head h2 { margin-bottom: 0.25rem; }
details.fold { margin: 0; border-top: 1px solid var(--pico-muted-border-color); }
details.fold > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px;
  font-weight: 600; color: var(--pico-color);
}
details.fold[open] > summary { margin-bottom: 0.5rem; }

/* ------------------------------------------------------------ client path */
.tap { display: inline-flex; align-items: center; min-height: 44px; }
.badge {
  display: inline-block; font-size: 0.875rem; line-height: 1.4; padding: 0.1rem 0.6rem; margin-left: 0.4rem;
  border-radius: 1rem; background: var(--brand-soft, #eef2f7); color: var(--pico-color); white-space: nowrap; font-weight: 400;
}
.badge.full { background: #fde7c0; color: #5a3b00; }
.class-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0; }
.book-form button[type="submit"], .my-place button, .full-width { width: 100%; }
.pay-line { padding: 0.6rem 0.8rem; border-radius: var(--pico-border-radius); background: var(--brand-soft, #eef2f7); }
.waiver { margin-bottom: 1rem; }
.waiver .check { display: flex; align-items: center; gap: 0 0.35rem; min-height: 48px; }
.waiver .check input { margin: 0 0.25rem 0 0; }
/* The label fills the row's height, so the whole row (bar the word
   "waiver") ticks the box. */
.waiver .check label { display: inline-flex; align-items: center; min-height: 48px; margin: 0; cursor: pointer; }
.signin-line { margin: 0 0 1rem; }
.my-place h3 { margin-bottom: 0.25rem; }
.booking-facts { margin: 0 0 1rem; }
.booking-facts dt { font-size: 0.875rem; color: var(--pico-muted-color); margin: 0; }
.booking-facts dd { margin: 0 0 0.75rem; }
.code-entry.secondary { padding: 1rem 0 0; border-top: 1px solid var(--pico-muted-border-color); }
.code-entry.secondary button { width: 100%; }
a[role="button"].full-width { display: block; text-align: center; }
.class-card { padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
.class-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.6rem; }
.class-card-head .class-name { font-weight: 600; }
.class-card-head .badge { margin-left: 0; flex: none; }
.card-mine { margin: 0 0 0.5rem; }
.class-card-head .card-venue { display: block; color: var(--pico-muted-color); }
.class-venue { margin-bottom: 0.5rem; }
.booking-card { padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
.booking-card p { margin-bottom: 0.4rem; }
.booking-card .bk-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.booking-card form { margin: 0.5rem 0 0; }
.booking-card .bk-cancel { margin-top: 0.75rem; }
.product-card { padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
.product-card button { margin: 0; }
.owed-what { flex-basis: 100%; font-size: 0.875rem; color: var(--pico-muted-color); margin-top: -0.5rem; padding-bottom: 0.25rem; }

/* Round 2: client pages read as one narrow column on a laptop too. */
body.client-page > nav.container, body.client-page > main.container, body.client-page > footer.container { max-width: 40rem; }
.linklike {
  display: inline-block; width: auto; margin: -0.625rem 0; padding: 0.625rem 0; border: 0; background: none;
  color: var(--pico-primary); text-decoration: underline; font: inherit; line-height: inherit; box-shadow: none;
}
.linklike:hover, .linklike:focus { background: none; color: var(--pico-primary-hover); }
.linklike:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; border-radius: 2px; }
.waiver .waiver-box { margin-top: 0.5rem; }
.code-entry.next-step { margin: 1rem 0; padding: 1rem; border-radius: var(--pico-border-radius); background: var(--brand-soft, #eef2f7); }
.code-entry.next-step h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.code-entry.next-step button { width: 100%; }
.shared-venue { margin-bottom: 0.5rem; }
/* Owing rows: name and More on line one; tags beside Cash and Card on line two. */
.roster-row.owes > .roster-who { display: contents; }
.roster-row.owes > .roster-who > .roster-name { grid-column: 1; grid-row: 1; }
.roster-row.owes > .roster-who > .tags { grid-column: 1; grid-row: 2; align-self: center; }
.roster-row.owes > .roster-who > .owed-what { grid-column: 1; grid-row: 2; align-self: center; margin: 0; }
.roster-row.owes > .roster-actions { grid-column: 2 / -1; grid-row: 2; padding-bottom: 0.4rem; }
@media (min-width: 641px) {
  .roster-row.owes > .roster-who { display: flex; grid-column: 1; grid-row: 1; }
  .roster-row.owes > .roster-who > .owed-what { flex-basis: auto; }
  .roster-row.owes > .roster-actions { grid-column: 2; grid-row: 1; padding-bottom: 0; }
}

/* Round 3. */
.roster-row > details.more { justify-self: end; }
.roster-row.owes > .roster-actions { justify-self: end; }
.pay-label { display: block; font-size: 0.875rem; color: var(--pico-muted-color); }
.attention h6 {
  display: inline-block; margin: 0.5rem 0 0.25rem; padding: 0.15rem 0.65rem; border-radius: 1rem;
  font-family: var(--pico-font-family); font-size: 0.875rem; font-weight: 600; background: #fde7c0; color: #5a3b00;
}
/* jenny-ux2: the brand colour picker with its typed hex box. */
.colour-pair { display: flex; gap: 0.5rem; align-items: center; }
.colour-pair input { margin-bottom: 0; }
.colour-pair input[type="color"] { flex: none; width: 3.5rem; padding: 0.2rem; }

/* jenny-fixes (1 Nov): the online badge, and the "Sign out" link-style button on My bookings. */
.badge.online { font-weight: 600; letter-spacing: 0.02em; }
.sign-out { margin: -0.5rem 0 1rem; }
.sign-out .link-button {
  display: inline; width: auto; margin: 0; padding: 0; border: 0; background: none;
  color: var(--pico-primary); text-decoration: underline; font-size: inherit; cursor: pointer;
}