/* ==========================================================================
   My Oria -- the app shell and the dashboard.

   Loaded only on /my-oria/ routes. Everything here is namespaced under
   .my-oria-app or .my-oria-auth on <body>, or under a my* class, so the
   public site cannot inherit any of it.

   The tokens are the site's own: this is Oria laid out for somebody with
   a task, not a second brand.
   ========================================================================== */

.my-oria-app,
.my-oria-auth {
  --app-bg: var(--sand, #f5f4f0);
  --app-surface: var(--white, #fffefb);
  --app-ink: var(--ink, #14201e);
  --app-muted: var(--text-soft, #5f6d69);
  --app-faint: var(--text-faint, #7d8a86);
  --app-green: var(--deep, #0e3b38);
  --app-sage: var(--sand-2, #dfe9e2);
  --app-gold: var(--brand-gold, #c9a24b);
  --app-line: var(--line, #dcd9d0);
  --app-r-sm: 14px;
  --app-r-md: 18px;
  --app-r-lg: 24px;
  background: var(--app-bg);
}

/* ---- 1. the shell ------------------------------------------------------- */

.myapp { display: block; min-height: 100vh; }
.myapp__canvas { min-width: 0; }
.myapp__main { padding: var(--s-5) var(--s-4) var(--s-6); }

/* The rail is the desktop navigation. Below 64rem it is not shown at all
   -- the bottom bar is the navigation there, and two navigations for four
   destinations is one too many. */
.myrail { display: none; }

.mybottom {
  position: fixed; z-index: 60; inset: auto 0 0 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0);
  border-top: 1px solid var(--app-line);
  background: var(--app-surface);
}
.mybottom__item {
  display: grid; justify-items: center; gap: .15rem;
  min-height: 56px; padding: .5rem .25rem;
  color: var(--app-muted); text-decoration: none;
  font-size: 11px; font-weight: 600;
}
.mybottom__item svg { width: 22px; height: 22px; }
.mybottom__item.is-on { color: var(--app-green); }
/* State is never colour alone: the marker above the icon says it too. */
.mybottom__item.is-on::before {
  content: ""; position: absolute; margin-top: -.5rem;
  width: 18px; height: 2px; border-radius: 2px; background: var(--app-green);
}
.mybottom__item:focus-visible { outline: 3px solid var(--app-gold); outline-offset: -3px; }

.mytop {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 68px;
  padding: var(--s-4) var(--s-4) 0;
}
.mytop__eyebrow {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--app-faint);
}
.mytop__page { margin: .1rem 0 0; font-size: 1.15rem; font-weight: 700; color: var(--app-ink); }
.mytop__out {
  flex: none; font-size: var(--fs-xs); font-weight: 700;
  color: var(--app-green); text-decoration: none;
  border-bottom: 1px solid var(--app-line);
}
.mytop__out:hover { border-bottom-color: currentColor; }

.myapp__foot {
  margin: var(--s-6) 0 0; padding: 0 var(--s-4);
  font-size: var(--fs-xs); color: var(--app-faint);
}
.myapp__foot a { color: inherit; }
.myapp__foot a:hover { color: var(--app-green); }
.myapp__footsep { margin: 0 .4rem; }

.mynotice { margin: var(--s-4) var(--s-4) 0; }

/* Room for the bottom bar, plus the home indicator under it. */
.my-oria-app .myapp { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--s-5)); }

/* ---- 2. the dashboard --------------------------------------------------- */

.myhome { display: grid; gap: var(--s-5); max-width: 1280px; }

.myhello__h {
  margin: 0; font-size: clamp(1.8rem, 4.5vw, 2.4rem); line-height: 1.1;
  letter-spacing: -.02em; color: var(--app-ink);
}
.myhello__q { margin: .35rem 0 var(--s-3); color: var(--app-muted); }
.myintents { display: flex; flex-wrap: wrap; gap: .45rem; }
.myintent {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .4rem .95rem; border: 1px solid var(--app-line); border-radius: 999px;
  background: var(--app-surface); color: var(--app-green);
  font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
  transition: background var(--t-fast, .18s) var(--ease), border-color var(--t-fast, .18s) var(--ease);
}
.myintent:hover { background: var(--app-sage); border-color: var(--app-green); }
.myintent:focus-visible { outline: 3px solid var(--app-gold); outline-offset: 2px; }

.mygrid { display: grid; gap: var(--s-4); }

/* One card family, varied by span and weight rather than by colour. */
.mycard {
  display: grid; align-content: start; gap: .3rem;
  padding: var(--s-5); border: 1px solid var(--app-line);
  border-radius: var(--app-r-md); background: var(--app-surface);
}
.mycard__eyebrow {
  margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--app-faint);
}
.mycard__title { margin: .1rem 0 0; font-size: 1.25rem; line-height: 1.25; color: var(--app-ink); }
.mycard__line { margin: .25rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--app-muted); }
.mycard__more, .mysec__more {
  margin-top: auto; padding-top: .6rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--app-green); text-decoration: none;
}
.mycard__more:hover, .mysec__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The one card that is meant to be looked at first. */
.mycard--feature {
  border-color: transparent;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 162, 75, .16), transparent 58%),
    var(--app-green);
  color: var(--white);
}
.mycard--feature .mycard__eyebrow { color: var(--gold-soft, #e3c877); }
.mycard--feature .mycard__title { color: var(--white); font-size: 1.4rem; }
.mycard--feature .mycard__line { color: rgba(255, 255, 255, .88); }
.mycard__cta { justify-self: start; margin-top: var(--s-4); }

.mycard--empty { align-items: start; gap: .4rem; background: var(--app-sage); border-color: transparent; }
.mycard--empty .btn { justify-self: start; margin-top: var(--s-3); }

.mysec { display: grid; gap: var(--s-3); }
.mysec--flush { align-content: start; }
.mysec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.mysec__title { margin: 0; font-size: 1.35rem; line-height: 1.2; color: var(--app-ink); }
.mysec__why { margin: .2rem 0 0; font-size: var(--fs-xs); color: var(--app-muted); }
.mysec__edit { margin-left: .4rem; color: var(--app-green); font-weight: 700; }
.mysec__none { margin: 0; font-size: var(--fs-sm); color: var(--app-muted); }

/* Saved: a rail on a phone with the next card showing, a grid on a desk. */
.myrailcards {
  display: flex; gap: var(--s-3); overflow-x: auto;
  overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--s-4) * -1);
  padding: .25rem var(--s-4) .75rem;
  scroll-padding-inline: var(--s-4);
}
.myrailcards > * { flex: 0 0 min(17rem, 78%); scroll-snap-align: start; }

.myrecs { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.myrec {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: .2rem .75rem;
  padding: .75rem var(--s-4); border: 1px solid var(--app-line);
  border-radius: var(--app-r-sm); background: var(--app-surface);
  color: var(--app-ink); text-decoration: none;
}
.myrec:hover { border-color: var(--app-green); }
.myrec:focus-visible { outline: 3px solid var(--app-gold); outline-offset: 2px; }
.myrec__name { grid-column: 1; font-size: var(--fs-sm); line-height: 1.3; }
.myrec__meta { grid-column: 1; font-size: var(--fs-xs); color: var(--app-muted); }
.myrec__go { grid-column: 2; grid-row: 1 / span 2; color: var(--app-green); }

/* The passport: the one distinctive surface, with the mark as its seal. */
.mypassport {
  position: relative; display: grid; align-content: start; gap: .3rem;
  padding: var(--s-5); border-radius: var(--app-r-md);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(201, 162, 75, .14), transparent 60%),
    var(--app-green);
  color: var(--white);
}
.mypassport__seal {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 34px; height: 34px; color: var(--app-gold); opacity: .9;
}
.mypassport__seal svg { width: 100%; height: 100%; }
.mypassport__eyebrow {
  margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-soft, #e3c877);
}
.mypassport__title { margin: .1rem 0 0; font-size: 1.3rem; line-height: 1.2; color: var(--white); padding-right: 2.5rem; }
.mypassport__line { margin: .3rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .86); }
.mypassport__cta {
  margin-top: var(--s-4); font-size: var(--fs-sm); font-weight: 700;
  color: var(--white); text-decoration: none;
}
.mypassport__cta:hover { text-decoration: underline; text-underline-offset: 3px; }

.mylocal {
  display: grid; align-content: center; gap: .25rem;
  padding: var(--s-5); border-radius: var(--app-r-md);
  border: 1px solid var(--app-line); background: var(--app-sage);
}
.mylocal__eyebrow {
  margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--app-muted);
}
.mylocal__title { margin: .1rem 0 0; font-size: 1.4rem; line-height: 1.2; color: var(--app-ink); }
.mylocal__line { margin: .25rem 0 0; font-size: var(--fs-sm); color: var(--app-muted); max-width: 46ch; }
.mylocal .btn { justify-self: start; margin-top: var(--s-3); }

/* ---- 3. the desk -------------------------------------------------------- */

@media (min-width: 64rem) {
  .myapp { display: grid; grid-template-columns: 248px minmax(0, 1fr); padding-bottom: 0; }
  .mybottom { display: none; }

  .myrail {
    display: flex; flex-direction: column; gap: var(--s-5);
    position: sticky; top: 0; align-self: start;
    height: 100vh; padding: var(--s-5) var(--s-4);
    border-right: 1px solid var(--app-line); background: var(--app-surface);
  }
  .myrail__brand {
    display: flex; align-items: center; gap: .5rem;
    color: var(--app-ink); text-decoration: none; font-size: 1.05rem; font-weight: 700;
  }
  .myrail__mark { width: 22px; height: 22px; color: var(--app-green); }
  .myrail__mark svg { width: 100%; height: 100%; }
  .myrail__word em { font-style: italic; font-weight: 400; }

  .myrail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
  .myrail__item {
    display: flex; align-items: center; gap: .6rem;
    min-height: 44px; padding: .5rem .75rem; border-radius: var(--app-r-sm);
    color: var(--app-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
  }
  .myrail__item:hover { background: var(--app-bg); color: var(--app-green); }
  .myrail__item:focus-visible { outline: 3px solid var(--app-gold); outline-offset: 2px; }
  /* A sage capsule, not a solid block -- and the arrow marks it too, so
     the state is never carried by colour alone. */
  .myrail__item.is-on { background: var(--app-sage); color: var(--app-green); font-weight: 700; }
  .myrail__item.is-on::after { content: "›"; margin-left: auto; }
  .myrail__icon { width: 20px; height: 20px; flex: none; }

  .myrail__foot { margin-top: auto; display: grid; gap: var(--s-3); }
  .myrail__out { font-size: var(--fs-xs); font-weight: 700; color: var(--app-green); text-decoration: none; }
  .myrail__out:hover { text-decoration: underline; text-underline-offset: 3px; }
  .myrail__who {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .2rem .6rem;
    align-items: center; padding-top: var(--s-3); border-top: 1px solid var(--app-line);
  }
  .myrail__av {
    grid-row: 1 / span 2; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--app-green); color: var(--white);
    font-size: var(--fs-xs); font-weight: 700;
  }
  .myrail__whoname { font-size: var(--fs-sm); font-weight: 700; color: var(--app-ink); }
  .myrail__signout { font-size: var(--fs-xs); color: var(--app-muted); }
  .myrail__signout:hover { color: var(--app-green); }

  .myapp__main { padding: var(--s-4) var(--s-6) var(--s-6); }
  .mytop { padding: var(--s-5) var(--s-6) 0; }
  .myapp__foot { padding: 0 var(--s-6); }
  .mynotice { margin: var(--s-4) var(--s-6) 0; }

  .myhome { gap: var(--s-6); }
  .myhello__h { font-size: clamp(2rem, 2.6vw, 2.75rem); }
  .mygrid--split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
  .mycard, .mypassport { min-height: 100%; }

  /* Four across, no rail: there is room, and a scroll region nobody needs
     to scroll is just a scrollbar. */
  .myrailcards {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible; margin-inline: 0; padding: 0;
  }
  .myrailcards > * { flex: none; }

  .mylocal { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-5); }
  .mylocal__eyebrow, .mylocal__title, .mylocal__line { grid-column: 1; }
  .mylocal .btn { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; justify-self: end; }
}

@media (min-width: 90rem) {
  .myapp__main, .mytop, .myapp__foot { padding-inline: var(--s-7); }
}

/* ---- 4. signing in ------------------------------------------------------ */

/*
 * A door, not a landing page. The brand sits above a single card in the
 * middle of the screen, and there is nothing else on it: somebody here
 * has one job, and the page should not offer them a second one.
 */
.myauth {
  display: grid; align-content: center; justify-items: center;
  gap: var(--s-5); min-height: 100svh;
  padding: var(--s-6) var(--s-4);
}
.myauth__brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--app-green); text-decoration: none;
}
.myauth__word { font-size: 1.05rem; letter-spacing: -0.01em; }
.myauth__word b { font-weight: 700; }
.myauth__word i { font-style: normal; font-weight: 400; }
.myauth__brand:hover .myauth__word { color: var(--app-ink); }

.myauth__main { width: 100%; max-width: 27rem; }

.authcard {
  display: grid; gap: var(--s-5);
  padding: clamp(1.6rem, 4vw, 2.25rem);
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-r-lg);
  box-shadow: 0 1px 2px rgba(20, 32, 30, .04), 0 12px 32px -18px rgba(20, 32, 30, .22);
}
.authcard__head { display: grid; gap: var(--s-2); text-align: center; }
.authcard__head .micro { color: var(--app-faint); }
.authcard__head .h1 {
  margin: 0; max-width: none;
  font-size: clamp(1.5rem, 3.4vw, 1.85rem); line-height: 1.15; letter-spacing: -0.02em;
}
.authcard__head .lede {
  margin: 0; max-width: 32ch; margin-inline: auto;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--app-muted);
}
.authcard__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem; text-align: left;
  font-size: var(--fs-sm); color: var(--app-muted);
}
.authcard__list span { color: var(--app-gold); margin-right: .35rem; }

.myform--auth { margin: 0; display: grid; gap: var(--s-4); }

.authcard__or {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--app-faint); font-size: var(--fs-xs);
}
.authcard__or::before, .authcard__or::after { content: ""; flex: 1; height: 1px; background: var(--app-line); }

.authcard__links {
  margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem;
  font-size: var(--fs-sm); color: var(--app-muted); text-align: center;
}
.authcard__links a { color: var(--app-ink); }

.myauth__back { margin: 0; font-size: var(--fs-xs); color: var(--app-muted); text-align: center; }
.myauth__back a { color: inherit; border-bottom: 1px solid var(--app-line); }
.myauth__back a:hover { color: var(--app-green); }

.my-oria-auth .wrap { padding-inline: 0; }

@media (max-width: 30rem) {
  .myauth { padding-inline: var(--s-3); gap: var(--s-4); }
  .authcard { padding: var(--s-5) var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  .myintent, .myrec, .mycard { transition: none; }
}

/* ---- 5. the listing manager --------------------------------------------- */

/*
 * An owner's dashboard, not an editorial page. Same tokens, same green,
 * same Manrope -- but laid out for somebody with a job to finish rather
 * than somebody being introduced to the site.
 *
 * Completion is never carried by colour alone: every dot has a word beside
 * it, or where the rail is tight, in an .sr-only span.
 */

.my-oria-app { --app-amber: #B47B18; --app-amber-soft: #FBF2DF; }

/* -- overview header -- */
.mylhead {
  display: grid; gap: var(--s-4) var(--s-5);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.mylhead__img {
  width: 76px; height: 76px; border-radius: var(--app-r-md);
  object-fit: cover; background: var(--app-sage);
}
.mylhead__img--none {
  display: grid; place-items: center;
  font-size: 1.9rem; font-weight: 700; color: var(--app-green);
}
.mylhead__text { min-width: 0; display: grid; gap: .3rem; }
.mylhead__name { margin: .15rem 0 0; font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.mylhead__where { margin: 0; font-size: var(--fs-sm); color: var(--app-muted); }
.mylhead__note { margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--app-faint); max-width: 48ch; }
.mylhead__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-3); }

.mystatus {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .6rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
}
.mystatus::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mystatus--live   { background: var(--app-sage); color: var(--app-green); }
.mystatus--thin,
.mystatus--review { background: var(--app-amber-soft); color: var(--app-amber); }
.mystatus--paused { background: var(--app-line); color: var(--app-muted); }

/* -- awaiting review -- */
.mylwait {
  margin-top: clamp(1.5rem, 3vw, 2rem); padding: var(--s-5);
  border: 1px solid var(--app-amber); border-radius: var(--app-r-md);
  background: var(--app-amber-soft);
}
.mylwait__h { margin: 0; font-size: 1rem; color: var(--app-amber); }
.mylwait__p { margin: .35rem 0 0; font-size: var(--fs-sm); color: var(--app-ink); max-width: 60ch; }
.mylwait__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: .5rem; }
.mylwait__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--s-3);
  padding: .5rem .75rem; background: var(--app-surface);
  border-radius: var(--app-r-sm); font-size: var(--fs-sm);
}
.mylwait__label { font-weight: 600; }
.mylwait__val { color: var(--app-muted); min-width: 0; overflow-wrap: anywhere; }
.mylwait__item form { margin-left: auto; }
.mylwait__undo {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); color: var(--app-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.mylwait__undo:hover { color: var(--app-ink); }

/* -- strength and performance -- */
.mylgrid {
  display: grid; gap: var(--s-5); margin-top: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.mylcard {
  padding: var(--s-5); background: var(--app-surface);
  border: 1px solid var(--app-line); border-radius: var(--app-r-md);
}
.mylcard__h { margin: 0 0 var(--s-4); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--app-faint); }

.mylstrength__n { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.mylstrength__n b { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mylstrength__n span { font-size: var(--fs-sm); color: var(--app-muted); }
.mylstrength__p { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--app-muted); }

.mylbar { margin-top: var(--s-3); height: 8px; border-radius: 4px; background: var(--app-line); overflow: hidden; }
.mylbar__fill { display: block; height: 100%; border-radius: 4px; background: var(--app-gold); }

.myltodo { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: .4rem; }
.myltodo__a {
  display: flex; align-items: center; gap: var(--s-3); min-height: 44px;
  padding: .55rem .75rem; border-radius: var(--app-r-sm);
  border: 1px solid var(--app-line); background: var(--app-bg);
  color: var(--app-ink); text-decoration: none; font-size: var(--fs-sm);
}
.myltodo__a:hover { border-color: var(--app-green); }
.myltodo__label { min-width: 0; }
.myltodo__go { margin-left: auto; color: var(--app-faint); }

.mylhow { margin-top: var(--s-4); font-size: var(--fs-xs); }
.mylhow summary { cursor: pointer; color: var(--app-muted); }
.mylhow p { margin: .5rem 0 0; color: var(--app-muted); line-height: 1.6; }

.mylperf__none { margin: 0; font-size: var(--fs-sm); color: var(--app-muted); line-height: 1.6; max-width: 46ch; }
.mylstats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mylstat { display: grid; gap: .1rem; }
.mylstat__n { font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mylstat__l { font-size: var(--fs-xs); color: var(--app-muted); }
.mylperf__note { margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--app-line); font-size: var(--fs-sm); color: var(--app-ink); line-height: 1.6; }

/*
 * The weekly-email switch, under the numbers it reports on. Separated by
 * the same hairline the note uses, so it reads as a footnote to the card
 * rather than a second card competing with it.
 */
.mylpref { margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--app-line); }
.mylpref__row { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
.mylpref__row input { margin: .15rem 0 0; flex: none; accent-color: var(--app-green); width: 1rem; height: 1rem; }
.mylpref__label { font-size: var(--fs-sm); line-height: 1.5; }
.mylpref__note { margin: .35rem 0 0 1.6rem; font-size: var(--fs-xs); color: var(--app-muted); line-height: 1.6; }
.mylpref__save {
  margin: var(--s-4) 0 0 1.6rem; padding: .45rem 1.1rem; border: 1px solid var(--app-line);
  border-radius: 999px; background: var(--app-bg); color: var(--app-ink);
  font: inherit; font-size: var(--fs-xs); cursor: pointer;
}
.mylpref__save:hover { border-color: var(--app-green); }
.mylpref__said { margin: .6rem 0 0 1.6rem; font-size: var(--fs-xs); color: var(--app-green); }

/* -- section map -- */
.mylsecs { margin-top: clamp(2rem, 4vw, 3rem); }
.mylsecs__h { margin: 0 0 var(--s-4); font-size: 1.1rem; }
.mylsecs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mylsec {
  display: flex; align-items: center; gap: var(--s-4); min-height: 56px;
  padding: .7rem var(--s-4); border: 1px solid var(--app-line);
  border-radius: var(--app-r-md); background: var(--app-surface);
  color: inherit; text-decoration: none;
}
.mylsec:hover { border-color: var(--app-green); }
.mylsec__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--app-line); }
.mylsec.is-done .mylsec__dot   { background: var(--app-green); border-color: var(--app-green); }
.mylsec.is-part .mylsec__dot   { background: var(--app-gold); border-color: var(--app-gold); }
.mylsec.is-empty .mylsec__dot  { background: transparent; border-color: var(--app-amber); }
.mylsec.is-locked .mylsec__dot { background: var(--app-line); border-color: var(--app-line); }
.mylsec__text { min-width: 0; display: grid; gap: .1rem; }
.mylsec__name { font-size: var(--fs-sm); }
.mylsec__blurb { font-size: var(--fs-xs); color: var(--app-muted); }
.mylsec__state { margin-left: auto; flex: none; font-size: var(--fs-xs); color: var(--app-faint); }
.mylsecs__more { margin: var(--s-4) 0 0; font-size: var(--fs-xs); color: var(--app-muted); }
.mylplan { margin: var(--s-5) 0 0; font-size: var(--fs-xs); color: var(--app-faint); }

/* -- the editor -- */
.myedit__top {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--app-line);
}
.myedit__back, .myedit__live { font-size: var(--fs-sm); color: var(--app-muted); text-decoration: none; }
.myedit__back:hover, .myedit__live:hover { color: var(--app-green); }
.myedit__live { margin-left: auto; }
.myedit__name { margin: 0; font-size: var(--fs-sm); font-weight: 700; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.myedit__pct { font-weight: 400; color: var(--app-faint); font-variant-numeric: tabular-nums; }

.myflash {
  margin: var(--s-4) 0 0; padding: .7rem var(--s-4);
  border: 1px solid var(--app-line); border-radius: var(--app-r-sm);
  background: var(--app-surface); font-size: var(--fs-sm);
}
.myflash--ok   { border-color: var(--app-green); background: var(--app-sage); color: var(--app-green); }
.myflash--wait { border-color: var(--app-amber); background: var(--app-amber-soft); color: var(--app-amber); }

.myedit__body {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 15rem minmax(0, 1fr);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  align-items: start;
}
.myrail2 { position: sticky; top: var(--s-5); }
.myrail2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.myrail2__item {
  /*
   * Positioned so the .sr-only state word inside it has a containing
   * block. .sr-only is position:absolute, and an overflow:auto ancestor
   * only clips a positioned descendant if it is positioned too -- so on a
   * phone, where the rail scrolls sideways, each hidden label escaped to
   * roughly 1,000px out and gave the whole document a horizontal scroll.
   */
  position: relative;
  display: flex; align-items: center; gap: var(--s-3); min-height: 44px;
  padding: .5rem .7rem; border-radius: var(--app-r-sm);
  color: var(--app-muted); text-decoration: none; font-size: var(--fs-sm);
}
.myrail2__item:hover { background: var(--app-surface); color: var(--app-ink); }
.myrail2__item.is-on { background: var(--app-sage); color: var(--app-green); font-weight: 600; }
.myrail2__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--app-line); }
.myrail2__item.is-done .myrail2__dot   { background: var(--app-green); border-color: var(--app-green); }
.myrail2__item.is-part .myrail2__dot   { background: var(--app-gold); border-color: var(--app-gold); }
.myrail2__item.is-empty .myrail2__dot  { border-color: var(--app-amber); }
.myrail2__item.is-locked .myrail2__dot { background: var(--app-line); border-color: var(--app-line); }
.myrail2__label { min-width: 0; }

.myedit__form { min-width: 0; }
.myedit__head { margin-bottom: var(--s-5); }
.myedit__h { margin: 0; font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: -0.02em; }
.myedit__blurb { margin: .35rem 0 0; font-size: var(--fs-sm); color: var(--app-muted); max-width: 54ch; }
.myedit__fields { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

/* -- one field -- */
.myfield { display: grid; gap: .4rem; min-width: 0; }
.myfield__set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .4rem; }
.myfield__label { font-size: var(--fs-sm); font-weight: 600; color: var(--app-ink); padding: 0; }
.myfield__help { margin: 0; font-size: var(--fs-xs); color: var(--app-muted); line-height: 1.55; max-width: 62ch; }
.myfield__hint, .myfield__pub { margin: 0; font-size: var(--fs-xs); color: var(--app-faint); }
.myfield .input { font-size: 16px; }
.myfield__area { line-height: 1.6; resize: vertical; }
.myfield__money { display: flex; align-items: center; gap: .5rem; }
.myfield__money .input { max-width: 9rem; }
.myfield__cur { color: var(--app-faint); }
.myfield__unit { font-size: var(--fs-sm); color: var(--app-muted); }
.myfield__select, .myfield__date { max-width: 22rem; }

.myfield.is-locked .myfield__label { color: var(--app-faint); }
.myfield.is-locked .input { background: var(--app-bg); color: var(--app-faint); }
.myfield__lock {
  margin: 0; padding: .5rem .7rem; border-radius: var(--app-r-sm);
  background: var(--app-amber-soft); font-size: var(--fs-xs); color: var(--app-amber); line-height: 1.55;
}
.myfield__lock a { color: inherit; font-weight: 600; }

.myopts { display: grid; gap: .35rem; }
.myopts--grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.myopt {
  display: flex; align-items: flex-start; gap: .6rem; min-height: 44px;
  padding: .5rem .7rem; border: 1px solid var(--app-line); border-radius: var(--app-r-sm);
  background: var(--app-surface); font-size: var(--fs-sm); cursor: pointer;
}
.myopt:hover { border-color: var(--app-green); }
.myopt input { margin-top: .2rem; flex: none; width: 18px; height: 18px; accent-color: var(--app-green); }
.myopt:has(input:checked) { border-color: var(--app-green); background: var(--app-sage); }
.myopt:has(input:disabled) { cursor: default; opacity: .6; }

/* -- repeaters -- */
.myrep { display: grid; gap: .6rem; }
.myrep__rows { display: grid; gap: .6rem; }
.myrow {
  display: flex; align-items: flex-end; gap: var(--s-3);
  padding: var(--s-4); border: 1px solid var(--app-line);
  border-radius: var(--app-r-sm); background: var(--app-surface);
}
.myrow__cols { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.myrow__col { display: grid; gap: .25rem; min-width: 0; }
.myrow__col--textarea { grid-column: 1 / -1; }
.myrow__label { font-size: var(--fs-xs); color: var(--app-muted); }
.myrow__acts { flex: none; display: flex; gap: .25rem; }
.myrow__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--app-line); border-radius: 50%;
  background: var(--app-surface); color: var(--app-muted); cursor: pointer; font-size: .9rem;
}
.myrow__btn:hover { border-color: var(--app-green); color: var(--app-green); }
.myrow__btn--x:hover { border-color: #A6452F; color: #A6452F; }
.myrow__btn:disabled { opacity: .4; cursor: default; }
.myrep__add {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  padding: .55rem 1rem; border: 1px dashed var(--app-line); border-radius: var(--r-pill);
  background: none; color: var(--app-green); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.myrep__add:hover { border-color: var(--app-green); border-style: solid; }

/* -- the save bar -- */
.mysave {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: var(--s-4) 0 calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--app-bg) 70%, transparent);
}
.mysave__state { margin: 0; font-size: var(--fs-xs); color: var(--app-muted); }
.mysave__acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.mysave .btn { min-height: 44px; }

@media (max-width: 60rem) {
  /*
   * minmax(0, 1fr) rather than 1fr on purpose. A bare 1fr is
   * minmax(auto, 1fr), and the auto floor is the item's min-content --
   * which for the scrolling rail below is every section label laid end to
   * end, about 1,200px. The column refused to shrink under it and the
   * whole page scrolled sideways on a phone.
   */
  .myedit__body { grid-template-columns: minmax(0, 1fr); }
  .myrail2 { position: static; min-width: 0; }
  .myrail2__list {
    grid-auto-flow: column; grid-auto-columns: max-content; gap: .4rem;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  .myrail2__list::-webkit-scrollbar { display: none; }
  .myrail2__item { border: 1px solid var(--app-line); background: var(--app-surface); white-space: nowrap; }
}

@media (max-width: 46rem) {
  .mylhead { grid-template-columns: 1fr; }
  .mylhead__img { width: 60px; height: 60px; }
  .mylstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .myrow { flex-direction: column; align-items: stretch; }
  .myrow__acts { justify-content: flex-end; }
  .mysave__acts { margin-left: 0; width: 100%; }
  .mysave__acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* -- team: a repeater row as a card, not a row of boxes ------------------- */

/*
 * A service is one text box, so it lays out as a row. A practitioner is a
 * name, a headshot, qualifications, a registration, what they specialise
 * in and a consent tick -- twelve controls, which as a flat auto-fit grid
 * is an unreadable wall. So a card, with the columns given spans, and a
 * number in the corner that says which practitioner this is.
 */
.myrep--card .myrep__rows { gap: var(--s-4); }
.myrep--card .myrow {
  position: relative;
  flex-direction: column; align-items: stretch;
  padding: var(--s-5); border-radius: var(--app-r-md);
}
.myrep--card .myrow__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.myrep--card .myrow__acts {
  justify-content: flex-end;
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--app-line);
}
.myrow__n {
  position: absolute; top: var(--s-4); right: var(--s-4);
  margin: 0; font-size: var(--fs-xs); font-weight: 700;
  color: var(--app-faint); font-variant-numeric: tabular-nums;
}

/* Column spans inside a card row. Everything stacks below 46rem. */
.myrow__col { grid-column: span 6; }
.myrow__col--half       { grid-column: span 3; }
.myrow__col--third      { grid-column: span 2; }
.myrow__col--two-thirds { grid-column: span 4; }
.myrow__col--full       { grid-column: 1 / -1; }

.myrow__set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .35rem; }
.myrow__help { margin: 0; font-size: var(--fs-xs); color: var(--app-muted); line-height: 1.5; }
.myrow__none { margin: 0; font-size: var(--fs-xs); color: var(--app-faint); }

.myopts--tight { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .3rem; }
.myopt--sm { min-height: 40px; padding: .35rem .6rem; font-size: var(--fs-xs); }
.myopt--wide { align-items: center; }

/* -- the photo picker -- */
.mypick { display: flex; align-items: center; gap: var(--s-3); }
.mypick__frame {
  flex: none; width: 64px; height: 64px; border-radius: var(--app-r-sm);
  background: var(--app-sage); display: grid; place-items: center; overflow: hidden;
}
.mypick__frame img { width: 100%; height: 100%; object-fit: cover; }
.mypick__acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.mypick__btn {
  min-height: 44px; padding: .5rem .85rem;
  border: 1px solid var(--app-line); border-radius: var(--r-pill);
  background: var(--app-surface); color: var(--app-ink);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
}
.mypick__btn:hover { border-color: var(--app-green); color: var(--app-green); }
.mypick__btn--x:hover { border-color: #A6452F; color: #A6452F; }
.mypick__btn:disabled { opacity: .5; cursor: default; }

/*
 * A class that sets display beats the user agent's [hidden] rule, so every
 * control here that starts or ends up hidden needs saying twice. The Add
 * button is inline-flex, and without this it stayed on screen after the
 * fourth practitioner.
 */
.mypick__btn[hidden],
.myrep__add[hidden],
.myrep__cap[hidden] { display: none !important; }

.myrep__cap { margin: 0; font-size: var(--fs-xs); color: var(--app-muted); }

@media (max-width: 46rem) {
  .myrep--card .myrow__cols { grid-template-columns: 1fr; }
  .myrow__col,
  .myrow__col--half,
  .myrow__col--third,
  .myrow__col--two-thirds,
  .myrow__col--full { grid-column: 1 / -1; }
  .mypick { flex-wrap: wrap; }
}
.mypick__no { font-size: var(--fs-xs); color: var(--app-faint); }

/* -- photos ---------------------------------------------------------------- */

/*
 * Order is what this control is for: the first photo leads the profile and
 * every card the listing appears in. So the tiles carry arrows as well as
 * a Cover badge -- the badge says which one wins, the arrows are how you
 * change it without needing a mouse.
 */
.mygal { display: grid; gap: var(--s-4); }
.mygal__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.mygal__item {
  position: relative; overflow: hidden;
  border: 1px solid var(--app-line); border-radius: var(--app-r-sm);
  background: var(--app-sage);
}
.mygal__shot { display: block; aspect-ratio: 4 / 3; }
.mygal__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mygal__lead {
  position: absolute; top: .4rem; left: .4rem;
  padding: .15rem .5rem; border-radius: var(--r-pill);
  background: var(--app-green); color: var(--white, #fff);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
}

.mygal__acts {
  position: absolute; right: .4rem; bottom: .4rem;
  display: flex; gap: .25rem;
}
.mygal__btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--app-ink);
  cursor: pointer; font-size: .95rem; line-height: 1;
  box-shadow: 0 1px 3px rgba(20, 32, 30, .25);
}
.mygal__btn:hover { background: #fff; color: var(--app-green); }
.mygal__btn--x:hover { color: #A6452F; }
.mygal__btn:disabled { opacity: .35; cursor: default; }
.mygal__btn:focus-visible { outline: 3px solid var(--app-gold); outline-offset: 2px; }

.mygal__none { margin: 0; font-size: var(--fs-sm); color: var(--app-faint); }
.mygal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.mygal__add {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  padding: .55rem 1rem; border: 1px dashed var(--app-line); border-radius: var(--r-pill);
  background: none; color: var(--app-green); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.mygal__add:hover { border-color: var(--app-green); border-style: solid; }
.mygal__count { margin: 0; font-size: var(--fs-xs); color: var(--app-muted); font-variant-numeric: tabular-nums; }
.mygal__note { margin: 0; font-size: var(--fs-xs); color: var(--app-muted); line-height: 1.5; }

/* A class that sets display beats the UA's [hidden] rule -- say it twice. */
.mygal__add[hidden],
.mygal__lead[hidden],
.mygal__none[hidden] { display: none !important; }

@media (max-width: 46rem) {
  .mygal__grid { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}
.myfield__plan { margin: 0; font-size: var(--fs-xs); color: var(--app-muted); }

/* -- what your plan does --------------------------------------------------- */
.mylplan {
  margin-top: clamp(2rem, 4vw, 3rem); padding: var(--s-5);
  border: 1px solid var(--app-line); border-radius: var(--app-r-md);
  background: var(--app-surface); display: grid; gap: var(--s-3); justify-items: start;
}
.mylplan__h { margin: 0; font-size: 1rem; font-weight: 400; color: var(--app-muted); }
.mylplan__h b { font-weight: 700; color: var(--app-ink); }
.mylplan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--fs-sm); color: var(--app-ink); }
.mylplan__list li { display: flex; gap: .5rem; }
.mylplan__list li::before { content: "\2713"; color: var(--app-green); flex: none; }
.mylplan__off { color: var(--app-muted); }
.mylplan__off::before { content: "\2014" !important; color: var(--app-faint) !important; }
.mylplan__keep { margin: 0; font-size: var(--fs-xs); color: var(--app-faint); line-height: 1.55; max-width: 62ch; }
.mypick__frame--lg { width: 96px; height: 96px; }
.mylhead__img--logo { object-fit: contain; background: var(--app-surface); border: 1px solid var(--app-line); padding: 6px; }

/* --- Oria Pass, in My Oria ------------------------------------------- */
/* The balance is the number a member opens this page for, so the meter
   reads at a glance and the log underneath says where it went. */
.mypass__meter { height: 10px; margin: .6rem 0 .9rem; border-radius: 999px; background: var(--app-bg, #ece7dc); overflow: hidden; }
.mypass__fill { display: block; height: 100%; background: var(--deep); border-radius: 999px; }
.mypass__log { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; }
.mypass__log li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.mypass__what { color: var(--app-soft, #5d6b68); min-width: 0; }
.mypass__n { font-weight: 700; font-variant-numeric: tabular-nums; }
.mypass__n--up { color: var(--moss, #3F6E60); }
.mypass__n--down { color: var(--app-faint, #7b8785); }
.mypass--offer .mycard__title { max-width: 22ch; }

.mybook { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.mybook__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--app-line, rgba(8,34,32,.12)); }
.mybook__row:last-child { border-bottom: 0; padding-bottom: 0; }
.mybook__what { display: grid; gap: 2px; min-width: 0; }
.mybook__title { font-weight: 600; }
.mybook__when { font-size: .875rem; color: var(--app-soft, #5d6b68); }
.mybook__ref { font-size: .75rem; letter-spacing: .08em; color: var(--app-faint, #7b8785); font-variant-numeric: tabular-nums; }
.mybook__cancel { min-height: 44px; padding: 0 .2rem; border: 0; background: none; font: inherit; font-size: .8125rem; color: var(--app-soft, #5d6b68); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* --- Oria Pass: the provider's screen -------------------------------- */
/* A table and a form. A studio opening two places on a quiet Tuesday
   wants to type four numbers and leave. */
.mypass-view .myhead { margin: 0 0 .3rem; }
.mypass-view .mysub { margin: 0 0 1.4rem; max-width: 60ch; color: var(--app-soft, #5d6b68); line-height: 1.55; }

.passtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.passtile { padding: .9rem 1rem; border-radius: 14px; background: var(--app-bg, #f0ebe0); display: grid; gap: 2px; }
.passtile b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.passtile span { font-size: .8125rem; color: var(--app-soft, #5d6b68); }

.passform__form { display: grid; gap: 1rem; margin-top: .8rem; }
.passform__row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.passform__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: .4rem 0 0; }
.passform__alt { font-size: .875rem; color: var(--app-soft, #5d6b68); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------
   A provider's session, as a ticket.

   The same object the member sees on a listing, seen from the other side
   of the counter: body on the left, stub on the right, a perforation
   between them with a notch punched at each end. The stub carries the
   money -- what it costs a member and what the studio is paid -- because
   that is the pair a provider checks at a glance.

   The notch and the tear line measure from different boxes (border and
   padding), so both subtract the same named padding and cannot drift.
   --------------------------------------------------------------------- */
.passrow {
  --pr-pad: 1.2rem;
  --pr-pad-v: 1.1rem;
  --pr-stub: 10.25rem;
  --pr-notch: 10px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--pr-stub);
  align-items: start;
  gap: 0;
  padding: var(--pr-pad-v) var(--pr-pad);
  margin-bottom: 1rem;
  -webkit-mask:
    radial-gradient(circle var(--pr-notch) at calc(100% - var(--pr-stub)) 0, transparent 97%, #000 100%) top / 100% 51% no-repeat,
    radial-gradient(circle var(--pr-notch) at calc(100% - var(--pr-stub)) 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--pr-notch) at calc(100% - var(--pr-stub)) 0, transparent 97%, #000 100%) top / 100% 51% no-repeat,
    radial-gradient(circle var(--pr-notch) at calc(100% - var(--pr-stub)) 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
}

.passrow::after {
  content: "";
  position: absolute;
  top: var(--pr-notch); bottom: var(--pr-notch);
  right: calc(var(--pr-stub) - var(--pr-pad));
  border-left: 2px dashed var(--app-line, rgba(8,34,32,.18));
}

.passrow__body { min-width: 0; padding-right: 1.1rem; }

.passrow__stub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding-top: .1rem; }
.passrow__n { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--app-green, #0e3b38); font-variant-numeric: tabular-nums; }
.passrow__nlabel { font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--app-soft, #5d6b68); }

@media (max-width: 40rem) {
  .passrow {
    grid-template-columns: 1fr;
    --pr-foot: 4.6rem;
    -webkit-mask:
      radial-gradient(circle var(--pr-notch) at 0 calc(100% - var(--pr-foot)), transparent 97%, #000 100%) left / 51% 100% no-repeat,
      radial-gradient(circle var(--pr-notch) at 100% calc(100% - var(--pr-foot)), transparent 97%, #000 100%) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--pr-notch) at 0 calc(100% - var(--pr-foot)), transparent 97%, #000 100%) left / 51% 100% no-repeat,
      radial-gradient(circle var(--pr-notch) at 100% calc(100% - var(--pr-foot)), transparent 97%, #000 100%) right / 51% 100% no-repeat;
  }
  .passrow::after {
    top: auto; left: var(--pr-notch); right: var(--pr-notch);
    bottom: calc(var(--pr-foot) - var(--pr-pad-v));
    border-left: 0; border-top: 2px dashed var(--app-line, rgba(8,34,32,.18));
  }
  .passrow__body { padding: 0 0 1rem; }
  .passrow__stub { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; padding-top: 1rem; }
}
.passrow__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.passrow__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.passrow__when { margin: 2px 0 0; font-size: .875rem; color: var(--app-soft, #5d6b68); }
.passrow__status { flex: 0 0 auto; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--app-bg, #f0ebe0); color: var(--app-soft, #5d6b68); }
.passrow__status--active { background: #0E3B38; color: #fff; }
.passrow__status--sold_out { background: #C9A24B; color: #1b1b1b; }
.passrow__status--cancelled { background: #fdecea; color: #7a271a; }
.passrow__facts { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .7rem 0 0; font-size: .875rem; color: var(--app-soft, #5d6b68); }
.passrow__pay { font-weight: 600; color: var(--moss, #3F6E60); font-size: .75rem; line-height: 1.3; }
.passrow__who { list-style: none; margin: .8rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--app-line, rgba(8,34,32,.12)); display: grid; gap: .5rem; }
.passrow__person { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.passrow__person code { font-size: .8125rem; letter-spacing: .06em; }
.passrow__mark { display: flex; gap: .5rem; }
.passrow__acts > a { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
/* Edit is a link and the rest are buttons; the row should not care. */
.passrow__mark button, .passrow__inline button, .passrow__acts > a { min-height: 40px; padding: 0 .7rem; border: 1px solid var(--app-line, rgba(8,34,32,.18)); border-radius: 999px; background: transparent; font: inherit; font-size: .8125rem; cursor: pointer; }
.passrow__mark button:hover, .passrow__inline button:hover, .passrow__acts > a:hover { border-color: #0E3B38; }
.passrow__done { font-size: .8125rem; color: var(--app-faint, #7b8785); }
.passrow__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .9rem 0 0; }
.passrow__inline { display: inline; }
.passrow__off { color: #7a271a; }
.passrow__warn { margin: .6rem 0 0; font-size: .8125rem; color: var(--app-faint, #7b8785); }
.mynote { padding: .75rem 1rem; border-radius: 12px; margin: 0 0 1.2rem; font-size: .9375rem; }
.mynote--ok { background: #e8f2ee; color: #14443c; }
.mynote--bad { background: #fdecea; color: #7a271a; }

@media (max-width: 40rem) {
  .passform__row3 { grid-template-columns: 1fr; }
  .passrow__person { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   "Where you can use it" — the places open to a member's Pass.
   A list, not a grid of cards: the member is scanning names and dates,
   and twelve cards would bury the one thing they came for.
   --------------------------------------------------------------------- */
.myplaces { margin-top: 1rem; }
.myplaces__sub { margin: .3rem 0 1rem; font-size: .9375rem; color: var(--app-soft, #5d6b68); }
.myplaces__list { list-style: none; margin: 0; padding: 0; display: grid; }
.myplaces__row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .25rem 1rem; padding: .7rem 0;
  border-top: 1px solid var(--app-line, rgba(8,34,32,.12));
}
.myplaces__row:first-child { border-top: 0; }
.myplaces__name { font-weight: 650; color: var(--app-ink, #14201e); text-decoration: none; }
.myplaces__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.myplaces__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; font-size: .8125rem; color: var(--app-soft, #5d6b68); }
.myplaces__next { font-variant-numeric: tabular-nums; }
.myplaces__from { color: var(--app-green, #0e3b38); font-weight: 600; }
.myplaces__count { color: var(--app-faint, #7b8785); }
.myplaces__fine, .myplaces__none { margin: .9rem 0 0; font-size: .8125rem; color: var(--app-faint, #7b8785); }
.myplaces__none { margin: .3rem 0 0; font-size: .9375rem; color: var(--app-soft, #5d6b68); }

/* ---------------------------------------------------------------------
   Tabs for the Pass places screen.

   Links with a query string rather than panels toggled by script: each
   view is then a real address a provider can bookmark or come back to
   after a save, and it works before any JavaScript does. The count rides
   in the label so nobody has to open a tab to learn it is empty.
   --------------------------------------------------------------------- */
.mytabs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 1.2rem; padding: 0 0 .1rem;
  border-bottom: 1px solid var(--app-line, rgba(8,34,32,.12));
}
.mytab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem; border-radius: 999px 999px 0 0;
  font-size: .9375rem; font-weight: 600; text-decoration: none;
  color: var(--app-soft, #5d6b68);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mytab:hover { color: var(--app-ink, #14201e); }
.mytab.is-on { color: var(--app-green, #0e3b38); border-bottom-color: var(--app-green, #0e3b38); }
.mytab__n {
  min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--app-bg, #f0ebe0); color: var(--app-soft, #5d6b68);
  font-size: .75rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.mytab.is-on .mytab__n { background: var(--app-green, #0e3b38); color: #fff; }

/* Who is coming — one card per session, the people under it. */
.mywho { margin-bottom: 1rem; }
.mywho__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.mywho__when { margin: 2px 0 .9rem; font-size: .875rem; color: var(--app-soft, #5d6b68); }
.mywho__list { list-style: none; margin: 0; padding: 0; display: grid; }
.mywho__person {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  padding: .7rem 0; border-top: 1px solid var(--app-line, rgba(8,34,32,.12));
}
.mywho__name { font-weight: 650; color: var(--app-ink, #14201e); }
.mywho__ref { font-size: .8125rem; letter-spacing: .06em; }
.mywho__booked { font-size: .8125rem; color: var(--app-faint, #7b8785); }
.mywho__mark { margin-left: auto; }
.passrow__wholabel {
  margin: .9rem 0 -.2rem; padding-top: .7rem;
  border-top: 1px solid var(--app-line, rgba(8,34,32,.12));
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--app-faint, #7b8785);
}
.passrow__wholabel + .passrow__who { border-top: 0; padding-top: .3rem; }

@media (max-width: 34rem) {
  .mywho__mark { margin-left: 0; width: 100%; }
}

/* The dollar value beside the Credits label: a note, not a second label. */
.field__worth {
  float: right;
  font-size: .75rem; font-weight: 500;
  color: var(--moss, #3F6E60);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0; text-transform: none;
}

/* Website help: one quiet, optional card at the foot of the owner dashboard. */
.mylhelp {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 1.25rem; padding: 1.1rem 1.25rem;
  border: 1px solid var(--app-line, #DFE5DC); border-radius: 14px; background: var(--app-soft, #F6F7F2);
}
.mylhelp__h { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 700; }
.mylhelp__p { margin: 0; max-width: 56ch; line-height: 1.55; }
.mylhelp__note { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--app-faint); }
.mylhelp__go { min-height: 44px; }