/* Piraste design system — charcoal & brass, Persian-first, RTL-native.
   Logical properties only: no `left`/`right` where `inline-start`/`inline-end` exists (AD-22). */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Sahel';
  src: url('../fonts/Sahel.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Sahel';
  src: url('../fonts/Sahel-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Shabnam';
  src: url('../fonts/Shabnam.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Shabnam';
  src: url('../fonts/Shabnam-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --pi-charcoal: #1c1a17;
  --pi-ink: #2a2622;
  --pi-brass: #c08b3e;
  --pi-brass-soft: #e7d3ae;
  --pi-cream: #f6f1e9;      /* brand cream — a fixed colour, not a role */
  --pi-bg: #f6f1e9;         /* page background — flips with the theme */
  --pi-on-dark: #f6f1e9;    /* text on charcoal surfaces — never flips */
  --pi-surface: #ffffff;
  --pi-line: #e4dbcc;
  --pi-muted: #6b6259;
  --pi-ok: #2e7d57;
  --pi-warn: #8f5a12;
  --pi-bad: #b3382f;      /* status colours flip with the surface in ThemeCatalog; these are the light face */
  --pi-radius: 14px;
  --pi-radius-lg: calc(var(--pi-radius) + 8px);
  --pi-font: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
  --pi-hero-from: #1c1a17;
  --pi-hero-to: #3b3227;
  --pi-shadow: 0 1px 2px rgba(28, 26, 23, .05), 0 8px 24px rgba(28, 26, 23, .06);
  --pi-shadow-lift: 0 2px 6px rgba(28, 26, 23, .08), 0 18px 40px rgba(28, 26, 23, .10);
  --pi-max: 980px;

  /* Type scale, from the Stitch design system's own tokens. Sizes are px because that is how the
     design specifies them; the pairing of size, line-height and weight is the point — a 12px line
     set at 20px leading reads as a different typeface from one set at 18px.

     Roles are ours. The design uses label-sm (11px) for an appointment name on a 390px phone; on a
     1250px console that is one step too small, so the day view uses body-md for a name and body-sm
     for its meta line. Same scale, chosen for the density it is actually rendered at. */
  --pi-text-label-sm: 11px;   --pi-lh-label-sm: 14px;   --pi-w-label-sm: 500;
  --pi-text-body-sm: 12px;    --pi-lh-body-sm: 18px;    --pi-w-body-sm: 400;
  --pi-text-label-md: 13px;   --pi-lh-label-md: 16px;   --pi-w-label-md: 500;
  --pi-text-body-md: 14px;    --pi-lh-body-md: 20px;    --pi-w-body-md: 400;
  --pi-text-data: 14px;       --pi-lh-data: 20px;       --pi-w-data: 600;
  --pi-text-body-lg: 16px;    --pi-lh-body-lg: 24px;    --pi-w-body-lg: 400;
  --pi-text-headline-sm: 16px; --pi-lh-headline-sm: 24px; --pi-w-headline-sm: 600;
  --pi-text-headline-md: 20px; --pi-lh-headline-md: 28px; --pi-w-headline-md: 600;
  --pi-text-headline-lg: 24px; --pi-lh-headline-lg: 32px; --pi-w-headline-lg: 700;
  /* The design's display step. One figure per screen at most — a balance, a total — never prose. */
  --pi-text-display: 48px;    --pi-lh-display: 60px;    --pi-w-display: 700;
}

/* Dark mode is owned by the active theme (ThemeCatalog.CssVariables), not by this file: a shop
   that pinned "always light" must not be flipped by the device preference. Only the shadow, which
   is palette-independent, is adjusted here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-surface="light"]) {
    --pi-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
[data-surface="dark"] { --pi-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--pi-bg);
  color: var(--pi-ink);
  font-family: var(--pi-font);
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.5; font-weight: 700; }
h1 { font-size: 1.75rem; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .75rem; }

/* ---------- shell ---------- */
.pi-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.pi-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 2rem);
  background: var(--pi-charcoal); color: var(--pi-on-dark);
  position: sticky; inset-block-start: 0; z-index: 20;
}
.pi-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; }
.pi-brand__logo { inline-size: 34px; block-size: 34px; border-radius: 50%; object-fit: cover; }
.pi-brand__name { letter-spacing: .01em; }
.pi-topnav { display: flex; gap: 1.1rem; font-size: .9rem; color: #cfc4b2; }
.pi-topnav a { padding-block: .25rem; border-block-end: 2px solid transparent; }
.pi-topnav a:hover { color: var(--pi-on-dark); border-block-end-color: var(--pi-brass); }
@media (max-width: 640px) { .pi-topnav { display: none; } }

.pi-main { flex: 1; inline-size: min(var(--pi-max), 100%); margin-inline: auto; padding: clamp(1rem, 4vw, 2rem) clamp(1rem, 4vw, 2rem) 4rem; }

.pi-footer {
  padding: 1.25rem; text-align: center; color: var(--pi-muted); font-size: .8rem;
  border-block-start: 1px solid var(--pi-line);
}
.pi-footer__link { color: var(--pi-brass); font-weight: 600; }

/* ---------- hero ---------- */
.pi-hero {
  position: relative; overflow: hidden; border-radius: var(--pi-radius-lg);
  background: linear-gradient(135deg, var(--pi-hero-from) 0%, var(--pi-hero-to) 100%);
  color: var(--pi-on-dark); padding: clamp(1.5rem, 5vw, 2.75rem); margin-block-end: 1.5rem;
  box-shadow: var(--pi-shadow-lift);
}
.pi-hero::after {
  content: ''; position: absolute; inset-block-start: -40%; inset-inline-end: -10%;
  inline-size: 320px; block-size: 320px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pi-brass) 40%, transparent), transparent 65%);
}
.pi-hero h1 { font-size: clamp(1.5rem, 5vw, 2.25rem); margin-block-end: .35rem; }
.pi-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: #d6cab6; font-size: .9rem; position: relative; }
.pi-hero__actions { margin-block-start: 1.25rem; display: flex; gap: .75rem; flex-wrap: wrap; position: relative; }
.pi-hero__rating { display: inline-flex; align-items: center; gap: .35rem; color: var(--pi-brass-soft); font-weight: 600; }

/* ---------- buttons ---------- */
.pi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 46px; padding-inline: 1.35rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  background: var(--pi-brass); color: var(--pi-on-accent, #17150f);
}
.pi-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--pi-brass) 35%, transparent); }
.pi-btn:disabled { opacity: .45; cursor: not-allowed; }
.pi-btn--ghost { background: transparent; border-color: var(--pi-line); color: var(--pi-ink); }
.pi-btn--ghost:hover:not(:disabled) { border-color: var(--pi-brass); box-shadow: none; }
.pi-btn--dark { background: var(--pi-charcoal); color: var(--pi-on-dark); }
.pi-btn--block { inline-size: 100%; }
.pi-btn--sm { min-block-size: 38px; padding-inline: .9rem; font-size: .85rem; }

/* ---------- cards ---------- */
.pi-card {
  background: var(--pi-surface); border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius); padding: 1rem 1.1rem; box-shadow: var(--pi-shadow);
}
.pi-card + .pi-card { margin-block-start: .75rem; }
.pi-section { margin-block: 2rem; }
.pi-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-block-end: .85rem; }
.pi-section__head h2 { margin: 0; }
.pi-section__hint { color: var(--pi-muted); font-size: .85rem; }

/* ---------- service list ---------- */
.pi-service {
  inline-size: 100%; text-align: start; display: flex; align-items: center; gap: 1rem;
  background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  padding: .95rem 1.1rem; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .15s ease, box-shadow .2s ease, transform .12s ease;
}
.pi-service + .pi-service { margin-block-start: .6rem; }
.pi-service:hover { border-color: color-mix(in srgb, var(--pi-ink) 22%, transparent); box-shadow: var(--pi-shadow); transform: translateY(-1px); }
/* Selection has to survive being next to a hovered card and a themed background, so it changes
   three things at once — fill, border weight and a filled tick — not just a border colour. */
.pi-service.is-selected {
  border-color: var(--pi-brass);
  border-inline-start-width: 4px;
  background: color-mix(in srgb, var(--pi-brass) 12%, var(--pi-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pi-brass) 40%, transparent), var(--pi-shadow);
}
.pi-service.is-selected .pi-service__name { color: var(--pi-brass); }

/* Empty circle when unchosen, filled tick when chosen: it also says these are multi-select. */
.pi-pick {
  flex-shrink: 0; inline-size: 24px; block-size: 24px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--pi-ink) 22%, transparent);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; line-height: 1;
  color: transparent; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.is-selected > .pi-pick {
  background: var(--pi-brass); border-color: var(--pi-brass); color: var(--pi-on-accent, #17150f);
}
.pi-pick--corner { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; inline-size: 20px; block-size: 20px; }
.pi-service__body { flex: 1; min-inline-size: 0; }
.pi-service__name { font-weight: 600; display: block; }
.pi-service__meta { color: var(--pi-muted); font-size: .82rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.pi-service__price { text-align: end; white-space: nowrap; font-weight: 700; }
.pi-badge {
  display: inline-block; font-size: .7rem; padding: .1rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--pi-brass) 15%, transparent); color: var(--pi-warn); font-weight: 600;
}

/* ---------- specialists ---------- */
/* A scrolling row of large circular identifiers. The initial disc is the *designed* state, not a
   fallback: a women's salon hides staff photos by default (FR-40), so it must look intentional. */
.pi-people {
  display: flex; gap: 1.25rem; overflow-x: auto; padding-block-end: .5rem;
  scroll-snap-type: x proximity; scrollbar-width: none;
}

.pi-people::-webkit-scrollbar { display: none; }
.pi-person {
  background: none; border: 0; padding: 0; text-align: center; cursor: pointer; font: inherit;
  color: inherit; position: relative; flex: 0 0 auto; inline-size: 92px;
  display: grid; gap: .5rem; justify-items: center; scroll-snap-align: start;
  transition: transform .12s ease;
}

.pi-person:hover { transform: translateY(-2px); }
.pi-person:hover .pi-avatar { border-color: var(--pi-brass); }
.pi-person.is-selected .pi-avatar {
  border-color: var(--pi-brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pi-brass) 30%, transparent);
}
.pi-person.is-selected .pi-person__name { color: var(--pi-brass); }
.pi-avatar {
  inline-size: 80px; block-size: 80px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 500; font-size: 1.45rem;
  background: color-mix(in srgb, var(--pi-ink) 7%, var(--pi-surface));
  border: 1px solid var(--pi-line); object-fit: cover;
  color: color-mix(in srgb, var(--pi-ink) 45%, transparent);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pi-person__name { font-weight: 600; font-size: .86rem; overflow-wrap: anywhere; line-height: 1.5; }
.pi-person__role { color: var(--pi-muted); font-size: .8rem; }

/* ---------- calendar ---------- */
.pi-cal { background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); padding: 1rem; }
.pi-cal__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .75rem; }
.pi-cal__title { font-weight: 700; }
.pi-cal__nav {
  inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid var(--pi-line);
  background: transparent; color: inherit; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.pi-cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.pi-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.pi-cal__grid--head { margin-block-end: .35rem; }
.pi-cal__weekday { text-align: center; font-size: .8rem; color: var(--pi-muted); }

/* Friday is the weekend here, and the design marks it. Last column in a Jalali week, so no
   marker class is needed in the markup. */
.pi-cal__grid--head .pi-cal__weekday:last-child { color: var(--pi-bad); }
.pi-cal__cell {
  position: relative; aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: inherit; font: inherit; cursor: pointer; display: grid; place-items: center;
  min-block-size: 40px; transition: background .15s ease, border-color .15s ease;
}

.pi-cal__cell:hover:not(:disabled) { background: color-mix(in srgb, var(--pi-ink) 6%, transparent); }
.pi-cal__cell--blank { background: transparent; cursor: default; }
/* Availability stays — Stitch models only enabled/disabled, but knowing which days have room
   before tapping is real information the design cannot see. It is tinted more quietly now. */
.pi-cal__cell.is-open { background: color-mix(in srgb, var(--pi-ok) 16%, transparent); }
.pi-cal__cell.is-limited { background: color-mix(in srgb, var(--pi-warn) 22%, transparent); }
.pi-cal__cell.is-full { color: var(--pi-muted); opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.pi-cal__cell.is-closed { color: var(--pi-muted); opacity: .45; cursor: not-allowed; }

/* Selected is the accent, as in the design — charcoal read as "disabled" beside the tinted days. */
.pi-cal__cell.is-selected {
  background: var(--pi-brass); color: var(--pi-on-accent, #17150f);
  border-color: var(--pi-brass); font-weight: 700;
}
.pi-cal__dot { position: absolute; inset-block-end: 6px; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--pi-warn); }
.pi-cal__legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-block-start: .85rem; font-size: .8rem; color: var(--pi-muted); }
.pi-dot { display: inline-block; inline-size: 9px; block-size: 9px; border-radius: 3px; margin-inline-end: .25rem; }
.pi-dot--open { background: rgba(46,125,87,.5); }
.pi-dot--limited { background: rgba(180,116,27,.6); }
.pi-dot--full { background: rgba(0,0,0,.15); }
.pi-dot--closed { background: transparent; border: 1px dashed var(--pi-line); }

/* ---------- slots ---------- */
.pi-slots__group + .pi-slots__group { margin-block-start: 1.75rem; }

/* A headed section per part of day, ruled off — the design treats صبح / بعدازظهر / شب as real
   headings rather than captions, which is how someone scanning for "an evening slot" reads it. */
.pi-slots__title {
  font-size: 1rem; font-weight: 600; color: var(--pi-ink);
  margin-block-end: .85rem; padding-block-end: .5rem; border-block-end: 1px solid var(--pi-line);
}

/* Auto-width pills that wrap, not a fixed grid: a row of equal cells with two items in it looks
   like a broken table. */
.pi-slots { display: flex; flex-wrap: wrap; gap: .6rem; }

.pi-slot {
  padding: .7rem 1.4rem; border-radius: var(--pi-radius); border: 1px solid var(--pi-line);
  background: var(--pi-surface); color: inherit; font: inherit; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: border-color .15s ease, background .15s ease;
}

.pi-slot:hover { background: color-mix(in srgb, var(--pi-ink) 5%, var(--pi-surface)); border-color: var(--pi-brass); }

.pi-slot.is-selected {
  background: var(--pi-brass); color: var(--pi-on-accent, #17150f); border-color: var(--pi-brass);
}

.pi-slot:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* ---------- stepper ---------- */
.pi-steps { display: flex; gap: .35rem; margin-block-end: 1.5rem; }
.pi-steps__item { flex: 1; block-size: 4px; border-radius: 999px; background: var(--pi-line); }
.pi-steps__item.is-done { background: var(--pi-brass); }
.pi-step-head { display: flex; align-items: center; gap: .6rem; margin-block-end: 1rem; }
.pi-step-head__back {
  inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1px solid var(--pi-line);
  background: transparent; cursor: pointer; font-size: 1.1rem; color: inherit;
}

/* ---------- summary ---------- */
.pi-summary { position: sticky; inset-block-end: 0; background: var(--pi-surface); border-block-start: 1px solid var(--pi-line);
  padding: .85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 10; }
.pi-summary__lines { font-size: .85rem; color: var(--pi-muted); }
.pi-summary__lines strong { color: var(--pi-ink); display: block; font-size: .95rem; }

/* ---------- forms ---------- */
.pi-field { margin-block-end: 1rem; }
.pi-field label { display: block; font-size: .85rem; font-weight: 600; margin-block-end: .35rem; }
.pi-input {
  inline-size: 100%; min-block-size: 48px; padding-inline: .9rem; border-radius: 12px;
  border: 1px solid var(--pi-line); background: var(--pi-surface); color: inherit; font: inherit;
}
.pi-input:focus { outline: 2px solid color-mix(in srgb, var(--pi-brass) 45%, transparent); outline-offset: 1px; border-color: var(--pi-brass); }
.pi-input--code { text-align: center; letter-spacing: .55em; font-size: 1.35rem; font-weight: 700; direction: ltr; }
.pi-hint { color: var(--pi-muted); font-size: .8rem; }
.pi-error { color: var(--pi-bad); font-size: .85rem; margin-block-start: .35rem; }

/* ---------- pills, money, empty ---------- */
.pi-pill { display: inline-block; padding: .18rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pi-pill--ok { background: rgba(46,125,87,.14); color: var(--pi-ok); }
.pi-pill--wait { background: rgba(180,116,27,.15); color: var(--pi-warn); }
.pi-pill--live { background: rgba(58,107,138,.16); color: #3a6b8a; }
.pi-pill--done { background: rgba(0,0,0,.07); color: var(--pi-muted); }
.pi-pill--bad { background: rgba(179,56,47,.14); color: var(--pi-bad); }
.pi-pill--muted { background: rgba(0,0,0,.06); color: var(--pi-muted); }
.pi-money { font-weight: 700; font-variant-numeric: tabular-nums; }
.pi-money__unit { font-size: .75em; font-weight: 500; color: var(--pi-muted); margin-inline-start: .25rem; }
.pi-empty { text-align: center; padding: 2.5rem 1rem; color: var(--pi-muted); }

/* ---------- confirmation ---------- */
.pi-receipt {
  background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  padding: 1.5rem; box-shadow: var(--pi-shadow-lift); max-inline-size: 460px; margin-inline: auto;
}
.pi-receipt__mark { inline-size: 62px; block-size: 62px; border-radius: 50%; background: rgba(46,125,87,.14);
  color: var(--pi-ok); display: grid; place-items: center; font-size: 1.8rem; margin: 0 auto 1rem; }
.pi-receipt__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; border-block-end: 1px dashed var(--pi-line); }
.pi-receipt__row:last-of-type { border-block-end: none; }
.pi-receipt__row span:first-child { color: var(--pi-muted); font-size: .85rem; }

/* ---------- console ---------- */
.pi-console { display: flex; min-height: 100dvh; background: var(--pi-bg); }
/* Console sidebar, ported from the Stitch console screens: a light surface rather than a dark
   slab, so the chrome sits in the same palette as the page instead of arguing with it. */
.pi-side {
  inline-size: 258px; flex-shrink: 0; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--pi-ink) 4%, var(--pi-surface));
  border-inline-start: 1px solid var(--pi-line);
  padding: 0 0 1rem; gap: .5rem;
}

.pi-side__brand {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.15rem 1rem; border-block-end: 1px solid var(--pi-line);
}

.pi-side__mark {
  inline-size: 42px; block-size: 42px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: color-mix(in srgb, var(--pi-brass) 22%, var(--pi-surface));
  color: var(--pi-brass); display: grid; place-items: center; font-weight: 700; font-size: 1.15rem;
}

.pi-side__id { display: grid; min-inline-size: 0; }
.pi-side__id strong {
  font-size: var(--pi-text-headline-sm); line-height: var(--pi-lh-headline-sm); color: var(--pi-brass);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pi-side__id span { font-size: var(--pi-text-body-sm); line-height: var(--pi-lh-body-sm); color: var(--pi-muted); }

.pi-side__nav { display: flex; flex-direction: column; gap: .1rem; flex: 1; padding-inline: .6rem; }

.pi-side__nav a {
  padding: .65rem .8rem; border-radius: var(--pi-radius); display: flex; align-items: center; gap: .7rem;
  color: var(--pi-muted); border-inline-start: 4px solid transparent;
  font-size: var(--pi-text-body-md); line-height: var(--pi-lh-body-md);
  transition: background .15s ease, color .15s ease;
}

.pi-side__nav a:hover { background: color-mix(in srgb, var(--pi-ink) 6%, transparent); color: var(--pi-ink); }

/* A leading bar plus a tint, so which page you are on is readable at a glance and not only by
   a colour difference. */
.pi-side__nav a.active {
  background: color-mix(in srgb, var(--pi-brass) 12%, transparent);
  border-inline-start-color: var(--pi-brass);
  color: var(--pi-brass); font-weight: 700;
}

.pi-side__rule { block-size: 1px; background: var(--pi-line); margin: .6rem .8rem; }
.pi-side__out { padding-inline: .6rem; }

.pi-side__signout {
  inline-size: 100%; display: flex; align-items: center; gap: .7rem;
  padding: .65rem .8rem; border-radius: var(--pi-radius); border: 0; cursor: pointer;
  background: none; color: var(--pi-bad); font: inherit; font-size: var(--pi-text-body-md);
  transition: background .15s ease;
}

.pi-side__signout:hover { background: color-mix(in srgb, var(--pi-bad) 10%, transparent); }
.pi-ico { inline-size: 20px; block-size: 20px; flex-shrink: 0; }
.pi-console__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.pi-console__main { padding: clamp(1rem, 3vw, 1.75rem); flex: 1; }
@media (max-width: 820px) {
  .pi-console { flex-direction: column; }
  .pi-side { inline-size: 100%; flex-direction: row; align-items: center; overflow-x: auto; }
  .pi-side__nav { flex-direction: row; }
  .pi-side__out { display: none; }
}

/* ---------- day calendar ---------- */
/* Day view, ported from the Stitch "امروز" screen. Structure follows that design: one bordered
   card, a header row naming each specialist, a time column, and blocks that lead with the person.
   Positioning stays absolute rather than Stitch's per-hour rows — a booking at ۰۹:۲۰ for ۲۵
   minutes has to land where it actually is, not snap to the nearest row. */
.pi-dayhead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pi-dayhead__start { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.pi-dayhead h1 { margin: 0; }

.pi-tally {
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  background: var(--pi-surface); padding: .4rem .9rem;
}

.pi-tally__item { display: grid; justify-items: center; line-height: 1.4; }
.pi-tally__item span {
  color: var(--pi-muted);
  font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md); font-weight: var(--pi-w-label-md);
}
.pi-tally__item strong {
  font-size: var(--pi-text-headline-sm); line-height: var(--pi-lh-headline-sm); font-weight: var(--pi-w-data);
  font-variant-numeric: tabular-nums;
}
.pi-tally__item .is-done { color: var(--pi-status-completed); }
.pi-tally__item .is-missed { color: var(--pi-status-noshow); }
.pi-tally__rule { inline-size: 1px; block-size: 1.6rem; background: var(--pi-line); }

.pi-day { display: flex; gap: 1rem; align-items: flex-start; }

/* Borders come from the 1px gap over a tinted backdrop — one declaration instead of a rule on
   every cell, which is how the Stitch grid is built. */
.pi-day__cols {
  flex: 1; overflow-x: auto; display: flex; gap: 1px;
  background: var(--pi-line); border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius); overflow-y: hidden; position: relative;
}

.pi-col { min-inline-size: 165px; flex: 1; background: var(--pi-surface); }

.pi-col__head {
  text-align: center; padding: .5rem .25rem;
  font-size: var(--pi-text-body-md); line-height: var(--pi-lh-body-md); font-weight: var(--pi-w-headline-sm);
  background: color-mix(in srgb, var(--pi-ink) 4%, var(--pi-surface));
  border-block-end: 1px solid var(--pi-line);
}

.pi-col__track {
  position: relative; block-size: var(--track-height, 780px);
  background: repeating-linear-gradient(to bottom, transparent, transparent calc(var(--hour, 60px) - 1px),
    var(--pi-line) calc(var(--hour, 60px) - 1px), var(--pi-line) var(--hour, 60px));
}

.pi-appt {
  position: absolute; inset-inline: 2px; border-radius: 6px; padding: .35rem .55rem;
  display: grid; gap: .1rem; align-content: start; overflow: hidden; cursor: pointer; text-align: start;
  border-inline-start: 4px solid var(--pi-status, var(--pi-brass));
  background: color-mix(in srgb, var(--pi-status, var(--pi-brass)) 14%, var(--pi-surface));
  color: color-mix(in srgb, var(--pi-status, var(--pi-brass)) 45%, var(--pi-ink));
}

/* A name at 11px is not scannable across a counter, and Persian needs more size than Latin at the
   same nominal value — the script is denser and carries marks above and below the line. */
.pi-appt__who {
  font-size: var(--pi-text-body-md); line-height: var(--pi-lh-body-md); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Muted by colour, never by opacity: opacity dims the text against whatever is behind it, so a
   figure that passed contrast on its own quietly stops passing once it is applied. */
.pi-appt__what {
  font-size: var(--pi-text-body-sm); line-height: var(--pi-lh-body-sm); font-weight: var(--pi-w-body-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, currentColor 78%, transparent);
}

/* One token per status; the tint and the text are mixed from it, so a status needs a single
   value per face and both faces are gated by ThemeCatalogTests. */
.pi-appt--held { --pi-status: var(--pi-status-held); }
.pi-appt--pending { --pi-status: var(--pi-status-pending); }
.pi-appt--confirmed { --pi-status: var(--pi-status-confirmed); }
.pi-appt--arrived { --pi-status: var(--pi-status-arrived); }
.pi-appt--inservice { --pi-status: var(--pi-status-seated); }
.pi-appt--completed { --pi-status: var(--pi-status-completed); }
.pi-appt--noshow { --pi-status: var(--pi-status-noshow); text-decoration: line-through; }
.pi-appt--cancelled { --pi-status: var(--pi-status-cancelled); text-decoration: line-through; }

/* The current time, not an alert. Stitch drew this red, but red is also the no-show status here,
   so a red rule and red blocks would compete for the same meaning. */
.pi-now { position: absolute; inset-inline: 0; block-size: 2px; background: var(--pi-brass); z-index: 3; }
.pi-now::before { content: ''; position: absolute; inset-inline-start: -4px; inset-block-start: -3px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--pi-brass); }

.pi-queue { inline-size: 270px; flex-shrink: 0; }

/* Queue entries as cards: a name, what they want, how long they have waited, one action. */
.pi-waiting {
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  padding: .7rem .75rem; margin-block-start: .6rem; display: grid; gap: .5rem;
  background: color-mix(in srgb, var(--pi-ink) 3%, var(--pi-surface));
}

.pi-waiting__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.pi-waiting__who { font-size: var(--pi-text-body-md); line-height: var(--pi-lh-body-md); font-weight: 700; }
.pi-waiting__what { color: var(--pi-muted); font-size: var(--pi-text-body-sm); line-height: var(--pi-lh-body-sm); }

.pi-waiting__since {
  font-size: var(--pi-text-label-md); font-variant-numeric: tabular-nums; padding: .15rem .5rem;
  border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--pi-muted) 18%, transparent); color: var(--pi-muted);
}

.pi-waiting.is-next { border-color: var(--pi-brass); }
.pi-waiting.is-next .pi-waiting__since { background: color-mix(in srgb, var(--pi-brass) 20%, transparent); color: var(--pi-brass); }

/* Eight status colours need a key. Without one the palette is decoration; with one it is data. */
.pi-legend { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-block: .75rem 0; font-size: var(--pi-text-body-sm); color: var(--pi-muted); }
.pi-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.pi-legend i { inline-size: 9px; block-size: 9px; border-radius: 2px; background: var(--pi-status, var(--pi-brass)); }

@media (max-width: 900px) { .pi-day { flex-direction: column; } .pi-queue { inline-size: 100%; } }

/* ---------- tables ---------- */
.pi-table { inline-size: 100%; border-collapse: collapse; background: var(--pi-surface); border-radius: var(--pi-radius); overflow: hidden; }
.pi-table th, .pi-table td { padding: .7rem .85rem; text-align: start; border-block-end: 1px solid var(--pi-line); font-size: .88rem; }
.pi-table th { background: rgba(0,0,0,.03); font-weight: 600; color: var(--pi-muted); }
.pi-table tr:last-child td { border-block-end: none; }

/* ---------- utility ---------- */
.pi-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.pi-spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pi-stack > * + * { margin-block-start: .75rem; }
.pi-muted { color: var(--pi-muted); }
.pi-center { text-align: center; }
.pi-grid-2 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .pi-grid-2 { grid-template-columns: 1fr; } }
:focus-visible { outline: 2px solid var(--pi-brass); outline-offset: 2px; }

/* Ghost buttons sitting on the dark hero need the inverse palette to stay readable (NFR-7). */
.pi-hero .pi-btn--ghost { color: var(--pi-on-dark); border-color: rgba(246, 241, 233, .35); }
.pi-hero .pi-btn--ghost:hover { border-color: var(--pi-brass); background: rgba(246, 241, 233, .06); }

/* Day-calendar hour axis — the clock the columns are read against. */
.pi-col--axis { min-inline-size: 54px; flex: 0 0 54px; }
.pi-col--axis .pi-col__track { background: none; }
.pi-axis__hour { font-size: var(--pi-text-label-sm);
  position: absolute; inset-inline-end: 4px; transform: translateY(-50%);
  font-size: .72rem; color: var(--pi-muted); font-variant-numeric: tabular-nums;
}

/* ---------- theme gallery (console → ظاهر و طرح) ---------- */
.pi-theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem; margin-block-start: 1.25rem;
}
.pi-theme {
  background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  overflow: hidden; box-shadow: var(--pi-shadow); display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .12s ease;
}
.pi-theme:hover { transform: translateY(-2px); }
.pi-theme.is-active { border-color: var(--pi-brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pi-brass) 30%, transparent); }
.pi-theme.is-locked { opacity: .72; }
.pi-theme__preview { position: relative; block-size: 132px; padding: 1rem; display: grid; place-items: center; }
.pi-theme__card {
  inline-size: 100%; padding: .7rem .8rem; display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.pi-theme__sample { font-size: .82rem; font-weight: 600; }
.pi-theme__chip { font-size: .78rem; font-weight: 700; padding: .15rem .5rem; }
.pi-theme__lock {
  position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem;
  background: rgba(0, 0, 0, .45); color: #fff; inline-size: 28px; block-size: 28px;
  border-radius: 50%; display: grid; place-items: center; font-size: .8rem;
}
.pi-theme__body { padding: .85rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.pi-theme__body p { margin: 0; }
.pi-theme__body .pi-btn { margin-block-start: auto; }
.pi-theme__locked { margin-block-start: auto; display: grid; gap: .35rem; }
.pi-designer { border: none; padding: 0; margin: .75rem 0 0; }
.pi-designer[disabled] { opacity: .5; }

/* ---------- gallery management + public slider ---------- */
.pi-gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem; margin-block-start: 1rem;
}
.pi-gallery-item {
  margin: 0; background: var(--pi-surface); border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius); overflow: hidden; box-shadow: var(--pi-shadow);
}
.pi-gallery-item img { inline-size: 100%; block-size: 150px; object-fit: cover; display: block; }
.pi-gallery-item figcaption { padding: .6rem; display: grid; gap: .4rem; }

/* Scroll-snap carousel: no JavaScript library, no layout shift, swipes natively on a phone. */
.pi-slider {
  display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: var(--pi-radius-lg); margin-block-end: 1.5rem; padding-block-end: .35rem;
  scrollbar-width: thin;
}
.pi-slider__item {
  flex: 0 0 min(88%, 620px); scroll-snap-align: center; border-radius: var(--pi-radius-lg);
  overflow: hidden; background: var(--pi-surface); box-shadow: var(--pi-shadow);
}
.pi-slider__item img { inline-size: 100%; block-size: clamp(200px, 38vw, 340px); object-fit: cover; display: block; }
.pi-slider:has(.pi-slider__item:only-child) .pi-slider__item { flex-basis: 100%; }

.pi-check { display: flex; align-items: center; gap: .5rem; margin-block: .5rem; font-size: .9rem; cursor: pointer; }
.pi-check input { inline-size: 18px; block-size: 18px; accent-color: var(--pi-brass); }

.pi-or { display: flex; align-items: center; gap: .75rem; margin-block: 1rem; color: var(--pi-muted); font-size: .8rem; }
.pi-or::before, .pi-or::after { content: ''; flex: 1; block-size: 1px; background: var(--pi-line); }

/* ---------- landing + signup ---------- */
.pi-hero--landing { text-align: center; padding-block: clamp(2.5rem, 8vw, 4.5rem); }
.pi-hero__lead { max-inline-size: 640px; margin-inline: auto; color: #d6cab6; position: relative; }
.pi-hero--landing .pi-hero__actions { justify-content: center; }
.pi-steps-grid, .pi-feature-grid {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pi-steps-grid .pi-card + .pi-card, .pi-feature-grid .pi-card + .pi-card { margin-block-start: 0; }
.pi-step-num {
  display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--pi-brass) 18%, transparent); color: var(--pi-brass);
  font-weight: 700; margin-block-end: .5rem;
}
.pi-plan-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; }
.pi-plan {
  position: relative; background: var(--pi-surface); border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius-lg); padding: 1.35rem; box-shadow: var(--pi-shadow);
  display: flex; flex-direction: column; gap: .5rem;
}
.pi-plan.is-featured { border-color: var(--pi-brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pi-brass) 25%, transparent), var(--pi-shadow-lift); }
.pi-plan__flag {
  position: absolute; inset-block-start: -12px; inset-inline-end: 1rem; background: var(--pi-brass);
  color: var(--pi-on-accent, #17150f); font-size: .72rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px;
}
.pi-plan h3 { margin: 0; }
.pi-plan__price { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pi-plan__price small { font-size: .72rem; font-weight: 500; color: var(--pi-muted); margin-inline-start: .35rem; }
.pi-plan__address { font-size: .78rem; color: var(--pi-muted); direction: ltr; text-align: start; }
.pi-plan__list { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .4rem; font-size: .86rem; }
.pi-plan__list li { position: relative; padding-inline-start: 1.2rem; }
.pi-plan__list li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--pi-brass); font-weight: 700; }
.pi-plan .pi-btn { margin-block-start: auto; }
details.pi-card summary { cursor: pointer; font-weight: 600; }
details.pi-card[open] summary { margin-block-end: .5rem; }
.pi-signup { display: grid; grid-template-columns: 1.4fr .6fr; gap: 1.25rem; align-items: start; }
.pi-signup__aside ol { padding-inline-start: 1.1rem; display: grid; gap: .4rem; }
@media (max-width: 820px) { .pi-signup { grid-template-columns: 1fr; } }
.pi-slug { display: flex; align-items: center; gap: .35rem; direction: ltr; }
.pi-slug > span { color: var(--pi-muted); font-size: .82rem; }

/* ---------- platform landing ---------- */
.pi-topbar--platform { gap: 2rem; }
.pi-topbar--platform .pi-topnav { margin-inline-end: auto; }
.pi-brand__mark {
  inline-size: 32px; block-size: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--pi-brass); color: var(--pi-on-accent, #17150f); font-weight: 700;
}
.pi-topbar__actions { display: flex; gap: .5rem; align-items: center; }
@media (max-width: 720px) { .pi-topbar--platform .pi-topnav { display: none; } }

.pi-lander { padding-block: clamp(1.5rem, 5vw, 3rem); }
.pi-aud__input { position: absolute; opacity: 0; pointer-events: none; }
.pi-aud__switch {
  display: inline-flex; gap: .25rem; padding: .25rem; margin-block-end: 1.75rem;
  background: color-mix(in srgb, var(--pi-ink) 6%, transparent); border-radius: 999px;
}
.pi-aud__switch label {
  padding: .45rem 1.1rem; border-radius: 999px; font-size: .86rem; font-weight: 600;
  cursor: pointer; color: var(--pi-muted); transition: background .15s ease, color .15s ease;
}
#aud-shop:checked ~ .pi-aud__switch label[for="aud-shop"],
#aud-customer:checked ~ .pi-aud__switch label[for="aud-customer"] {
  background: var(--pi-surface); color: var(--pi-ink); box-shadow: var(--pi-shadow);
}
.pi-panel { display: none; }
#aud-shop:checked ~ .pi-lander__grid .pi-panel--shop,
#aud-customer:checked ~ .pi-lander__grid .pi-panel--customer { display: block; }

.pi-lander__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.pi-lander__copy h1 { font-size: clamp(1.8rem, 4.6vw, 2.9rem); line-height: 1.4; margin-block-end: .9rem; }
.pi-lander__copy h1 u {
  text-decoration: none; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--pi-brass) 38%, transparent) 0);
  padding-inline: .1em;
}
.pi-lander__lead { color: var(--pi-muted); font-size: 1.02rem; max-inline-size: 46ch; }
.pi-lander__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-block: 1.4rem .8rem; }
.pi-lander__note { font-size: .8rem; color: var(--pi-muted); }
@media (max-width: 900px) { .pi-lander__grid { grid-template-columns: 1fr; } }

/* hero mock: the product drawn in markup, not a screenshot */
.pi-mock { position: relative; }
.pi-mock__window {
  background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  box-shadow: var(--pi-shadow-lift); overflow: hidden;
}
.pi-mock__bar {
  display: flex; gap: .35rem; padding: .6rem .8rem;
  background: color-mix(in srgb, var(--pi-ink) 5%, transparent); border-block-end: 1px solid var(--pi-line);
}
.pi-mock__bar span { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--pi-line); }
.pi-mock__day { display: flex; gap: .5rem; padding: .8rem; position: relative; }
.pi-mock__col { flex: 1; }
.pi-mock__head {
  font-size: .72rem; font-weight: 600; text-align: center; color: var(--pi-muted);
  padding-block-end: .4rem; border-block-end: 1px solid var(--pi-line); margin-block-end: .5rem;
}
.pi-mock__track {
  position: relative; block-size: clamp(180px, 26vw, 240px); border-radius: 8px;
  background: repeating-linear-gradient(to bottom, transparent, transparent 23px, var(--pi-line) 23px, var(--pi-line) 24px);
}
.pi-mock__appt { position: absolute; inset-inline: 2px; border-radius: 6px; border-inline-start: 3px solid var(--pi-brass); }
.pi-mock__appt--solid { background: color-mix(in srgb, var(--pi-brass) 34%, var(--pi-surface)); }
.pi-mock__appt--soft { background: color-mix(in srgb, var(--pi-brass) 16%, var(--pi-surface)); }
.pi-mock__now { position: absolute; inset-inline: .8rem; inset-block-start: 62%; block-size: 2px; background: #b3382f; }
.pi-mock__now::before {
  content: ''; position: absolute; inset-inline-start: -4px; inset-block-start: -3px;
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: #b3382f;
}
.pi-mock__card {
  position: absolute; inset-inline-start: -8px; inset-block-end: -28px; inline-size: min(240px, 68%);
  background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  box-shadow: var(--pi-shadow-lift); padding: .75rem;
}
.pi-mock__label { font-size: .76rem; color: var(--pi-muted); }
.pi-mock__slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; margin-block-start: .5rem; }
.pi-mock__slot {
  text-align: center; padding: .35rem; border-radius: 9px; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--pi-line); font-variant-numeric: tabular-nums;
}
.pi-mock__slot--taken { opacity: .35; text-decoration: line-through; }
.pi-mock__slot--picked { background: var(--pi-charcoal); color: var(--pi-on-dark); border-color: var(--pi-charcoal); }
@media (max-width: 900px) { .pi-mock__card { position: static; inline-size: 100%; margin-block-start: .75rem; } }

.pi-why__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pi-why__grid > div {
  padding: 1rem 1.1rem; border-radius: var(--pi-radius);
  background: color-mix(in srgb, var(--pi-brass) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--pi-brass) 18%, transparent);
}
.pi-why__grid p { margin: .35rem 0 0; }

.pi-cta {
  text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1.5rem; margin-block: 2.5rem 1rem;
  border-radius: var(--pi-radius-lg); color: var(--pi-on-dark);
  background: linear-gradient(135deg, var(--pi-hero-from) 0%, var(--pi-hero-to) 100%);
}
.pi-cta h2 { margin-block-end: .4rem; }
.pi-cta p { color: color-mix(in srgb, var(--pi-on-dark) 78%, transparent); margin-block-end: 1.2rem; }

.pi-footer__platform { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.pi-footer__platform nav { display: flex; gap: 1rem; }
.pi-footer__platform a { color: var(--pi-brass); font-weight: 600; }

/* ---------- landing proportions ----------
   The booking flow wants a narrow, focused column; a landing page on a 1600px monitor with the
   same 980px cap reads as a strip stranded in the middle. */
.pi-main--wide { inline-size: min(1180px, 100%); }

.pi-lander {
  position: relative;
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 7vw, 5rem);
}
/* Full-bleed wash behind the hero: separates it from the top bar and gives the headline ground
   to stand on, without a background image. */
.pi-lander::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  z-index: -1;
  background:
    radial-gradient(60rem 30rem at 80% -10%, color-mix(in srgb, var(--pi-brass) 16%, transparent), transparent 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--pi-ink) 5%, transparent), transparent 65%);
}
.pi-lander__copy h1 { font-size: clamp(1.9rem, 3.4vw, 3.15rem); letter-spacing: -.015em; }
.pi-lander__lead { font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 2; }
.pi-lander__grid { gap: clamp(1.5rem, 5vw, 4rem); }

/* More air between sections at desktop widths. */
.pi-main--wide .pi-section { margin-block: clamp(2.5rem, 6vw, 4.5rem); }
.pi-main--wide .pi-section__head h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }

/* ---------- hero mock, second pass ----------
   Abstract beige rectangles read as "grey boxes"; with an hour rail, service names and state
   colour it reads as the product. */
.pi-mock__bar { align-items: center; }
.pi-mock__title { font-style: normal; font-size: .72rem; color: var(--pi-muted); margin-inline-start: auto; }
.pi-mock__day { gap: .4rem; }
.pi-mock__hours {
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: 1.55rem .2rem; font-size: .64rem; color: var(--pi-muted);
  font-variant-numeric: tabular-nums; flex: 0 0 18px; text-align: center;
}
.pi-mock__appt {
  padding: .2rem .35rem; overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  font-size: .58rem; line-height: 1.25; color: var(--pi-ink);
}
.pi-mock__appt b { font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
.pi-mock__appt span { opacity: .75; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.pi-mock__appt--solid { background: color-mix(in srgb, var(--pi-brass) 30%, var(--pi-surface)); }
.pi-mock__appt--soft { background: color-mix(in srgb, var(--pi-brass) 14%, var(--pi-surface)); }
/* In progress right now, and a slot someone is mid-checkout on — the two states that make a
   calendar feel alive rather than printed. */
.pi-mock__appt--live {
  background: color-mix(in srgb, #2e7d57 22%, var(--pi-surface));
  border-inline-start-color: #2e7d57;
}
.pi-mock__appt--held {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--pi-brass) 12%, var(--pi-surface)) 0 5px,
    color-mix(in srgb, var(--pi-brass) 22%, var(--pi-surface)) 5px 10px);
  border-inline-start-style: dashed;
}
.pi-mock__now { display: flex; align-items: center; }
.pi-mock__now span {
  position: absolute; inset-inline-end: 0; inset-block-start: -8px; background: #b3382f; color: #fff;
  font-size: .58rem; font-weight: 700; padding: .05rem .3rem; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.pi-mock__confirm {
  display: block; margin-block-start: .5rem; text-align: center; font-size: .72rem; font-weight: 600;
  color: #2e7d57; background: color-mix(in srgb, #2e7d57 12%, transparent);
  padding: .3rem; border-radius: 8px;
}

/* ---------- no-show calculator ---------- */
.pi-calc {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1rem, 3vw, 2rem);
  background: var(--pi-surface); border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius-lg); padding: clamp(1.1rem, 3vw, 1.75rem); box-shadow: var(--pi-shadow);
}
.pi-calc__inputs { display: grid; gap: 1.1rem; align-content: start; }
.pi-calc__inputs label { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; align-items: center; }
.pi-calc__inputs label > span { font-size: .88rem; font-weight: 600; }
.pi-calc__inputs output {
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pi-brass);
  background: color-mix(in srgb, var(--pi-brass) 12%, transparent);
  padding: .1rem .55rem; border-radius: 999px; font-size: .85rem; min-inline-size: 5.5ch; text-align: center;
}
.pi-calc__inputs input[type="range"] {
  grid-column: 1 / -1; inline-size: 100%; accent-color: var(--pi-brass);
  block-size: 26px; cursor: pointer;
}
.pi-calc__result {
  display: flex; flex-direction: column; justify-content: center; gap: .35rem; text-align: center;
  background: linear-gradient(135deg, var(--pi-hero-from) 0%, var(--pi-hero-to) 100%);
  color: var(--pi-on-dark); border-radius: var(--pi-radius); padding: 1.25rem 1rem;
}
.pi-calc__label { font-size: .82rem; opacity: .8; }
.pi-calc__amount { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-variant-numeric: tabular-nums; line-height: 1.3; }
.pi-calc__result .pi-hint { color: color-mix(in srgb, var(--pi-on-dark) 72%, transparent); min-block-size: 2.6em; }
.pi-calc__result .pi-btn { align-self: center; margin-block-start: .35rem; }
@media (max-width: 820px) { .pi-calc { grid-template-columns: 1fr; } }

.pi-topbar__signin { font-size: .84rem; color: #cfc4b2; }
.pi-topbar__signin:hover { color: var(--pi-on-dark); text-decoration: underline; }
@media (max-width: 560px) { .pi-topbar__signin { display: none; } }
.pi-cta__choices { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.pi-cta__note { margin-block-start: 1.1rem; font-size: .85rem; }
.pi-cta__note a { color: var(--pi-brass); font-weight: 600; text-decoration: underline; }

/* ---------- reviews ---------- */
.pi-review-form {
  max-inline-size: 480px; margin-inline: auto; background: var(--pi-surface);
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  padding: clamp(1.1rem, 4vw, 1.75rem); box-shadow: var(--pi-shadow-lift);
}
/* Row-reverse so the markup runs 5→1 while the stars read 1→5 right-to-left, which lets a plain
   CSS sibling rule light up every star to the right of the hovered one. */
.pi-stars { display: flex; flex-direction: row-reverse; justify-content: center; gap: .2rem; margin-block: 1rem .35rem; }
.pi-star {
  background: none; border: none; cursor: pointer; font-size: 2.1rem; line-height: 1;
  color: var(--pi-line); padding: .1rem; transition: transform .1s ease, color .12s ease;
}
.pi-star.is-on { color: var(--pi-brass); }
.pi-star:hover, .pi-star:hover ~ .pi-star { color: var(--pi-brass); transform: scale(1.08); }

.pi-rating { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.pi-rating__star { color: var(--pi-brass); }
.pi-rating__count { font-weight: 500; opacity: .8; font-size: .85em; }

.pi-reviews { display: grid; gap: .75rem; }
.pi-review {
  background: var(--pi-surface); border: 1px solid var(--pi-line);
  border-radius: var(--pi-radius); padding: .9rem 1.05rem;
}
.pi-review__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pi-review__stars { color: var(--pi-brass); letter-spacing: .05em; }
.pi-review__who { font-weight: 600; }
.pi-review__when { color: var(--pi-muted); font-size: .78rem; margin-inline-start: auto; }
.pi-review__text { margin-block: .45rem 0; }
.pi-review__reply {
  margin-block-start: .6rem; padding: .6rem .8rem; border-radius: 10px;
  background: color-mix(in srgb, var(--pi-brass) 9%, transparent);
  border-inline-start: 3px solid var(--pi-brass); font-size: .88rem;
}
.pi-review__reply strong { display: block; font-size: .78rem; color: var(--pi-muted); margin-block-end: .15rem; }
.pi-hero__rating { color: var(--pi-on-dark); }

/* ---------- shop page: cover, service cards, sticky action ---------- */
.pi-shop { padding-block-end: 5rem; }

/* Shop cover, ported from the Stitch shop page: a plain strip carrying only the image or the
   motif. No text sits on it, so there is no scrim and no contrast problem to solve. */
.pi-cover {
  position: relative; block-size: clamp(150px, 30vw, 210px); overflow: hidden;
  border-radius: var(--pi-radius-lg); background: color-mix(in srgb, var(--pi-ink) 6%, var(--pi-surface));
}

.pi-cover__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  block-size: 100%; scrollbar-width: none;
}

.pi-cover__track::-webkit-scrollbar { display: none; }
.pi-cover__track img { flex: 0 0 100%; inline-size: 100%; block-size: 100%; object-fit: cover; scroll-snap-align: center; }

/* No photo: the shop's own motif, tinted, at low opacity — never a stock photograph, which for a
   women's salon is precisely the image this page must not carry (FR-9). */
.pi-cover--plain { background-image: linear-gradient(135deg, var(--pi-hero-from) 0%, var(--pi-hero-to) 100%); }

/* The identity block: name and place on one side, rating pill on the other, then the action. */
.pi-ident { padding-block: 1.25rem .5rem; display: grid; gap: .85rem; }
.pi-ident__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pi-ident__who { display: flex; align-items: center; gap: .75rem; }
.pi-ident__logo { inline-size: 52px; block-size: 52px; border-radius: 50%; object-fit: cover; }
.pi-ident h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.35; }
.pi-ident__where { margin: .15rem 0 0; color: var(--pi-muted); font-size: .88rem; }

.pi-ident__rating {
  display: grid; justify-items: center; gap: .1rem; text-decoration: none; color: inherit;
  border: 1px solid var(--pi-line); border-radius: 999px; padding: .4rem .8rem; flex-shrink: 0;
}

.pi-ident__score { font-weight: 700; font-size: .9rem; color: var(--pi-brass); white-space: nowrap; }
.pi-ident__count { color: var(--pi-muted); font-size: .78rem; white-space: nowrap; }
/* The open/closed state is the fact a customer scans for; the address note is a footnote to it,
   so it sits beneath rather than competing on the same line. */
.pi-ident__state { display: grid; justify-items: start; gap: .35rem; }
.pi-ident__actions { display: flex; gap: .6rem; }
.pi-ident__actions .pi-btn--block { flex: 1; }
.pi-cover__note { margin: .7rem 0 0; font-size: .78rem; color: rgba(255, 255, 255, .75); }

.pi-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600;
  padding: .22rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px);
}
.pi-chip--rating { color: #fff; }
.pi-chip--rating span { font-weight: 500; opacity: .85; }
.pi-chip--open { background: rgba(46, 125, 87, .85); }
.pi-chip--shut { background: rgba(0, 0, 0, .45); }

/* Section jump bar — a long service list needs a way back to the top of each part. */
.pi-shopnav {
  position: sticky; inset-block-start: 0; z-index: 15; display: flex; gap: 1.4rem;
  overflow-x: auto; padding-block: .6rem; margin-block-end: .5rem;
  border-block-end: 1px solid var(--pi-line);
  background: color-mix(in srgb, var(--pi-bg) 92%, transparent); backdrop-filter: blur(8px);
  scrollbar-width: none;
}
.pi-shopnav::-webkit-scrollbar { display: none; }
/* Underline tabs rather than pills: five pills on a 375px screen read as five buttons competing
   with the page's one real action. An underline is navigation and looks like it. */
.pi-shopnav a {
  white-space: nowrap; font-size: .88rem; padding: .45rem .1rem;
  color: var(--pi-muted); border-block-end: 2px solid transparent;
}

.pi-shopnav a:hover { color: var(--pi-ink); border-block-end-color: var(--pi-line); }
.pi-shopnav a:target, .pi-shopnav a.is-current { color: var(--pi-brass); border-block-end-color: var(--pi-brass); }

.pi-group { font-size: .92rem; color: var(--pi-muted); margin-block: 1.1rem .5rem; }
.pi-servicelist { display: grid; gap: .55rem; }
.pi-svc {
  display: flex; align-items: center; gap: 1rem; padding: .95rem 1.1rem;
  background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  transition: border-color .15s ease, box-shadow .2s ease, transform .12s ease;
}
.pi-svc:hover { border-color: var(--pi-brass); box-shadow: var(--pi-shadow); transform: translateY(-1px); }
.pi-svc__main { flex: 1; min-inline-size: 0; display: grid; gap: .25rem; }
.pi-svc__name { font-weight: 600; }
.pi-svc__desc { font-size: .82rem; color: var(--pi-muted); }
.pi-svc__meta { display: flex; gap: .35rem; flex-wrap: wrap; }
.pi-tag {
  font-size: .8rem; padding: .15rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--pi-ink) 7%, transparent); color: var(--pi-muted);
}
.pi-tag--warn { background: color-mix(in srgb, var(--pi-brass) 16%, transparent); color: var(--pi-warn); font-weight: 600; }
.pi-svc__side { display: grid; gap: .35rem; justify-items: end; text-align: end; }
.pi-svc__price { font-weight: 700; white-space: nowrap; }
.pi-svc__go {
  font-size: .78rem; font-weight: 700; color: var(--pi-brass);
  border: 1px solid color-mix(in srgb, var(--pi-brass) 45%, transparent);
  padding: .2rem .7rem; border-radius: 999px;
}
.pi-svc:hover .pi-svc__go { background: var(--pi-brass); color: var(--pi-on-accent, #17150f); border-color: var(--pi-brass); }

.pi-person--link { display: block; }
.pi-person__rating { font-size: .78rem; font-weight: 700; color: var(--pi-brass); }

.pi-grid-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.pi-grid-photos img {
  inline-size: 100%; block-size: 190px; object-fit: cover; display: block;
  border-radius: var(--pi-radius); border: 1px solid var(--pi-line);
}

.pi-hours { background: var(--pi-surface); border: 1px solid var(--pi-line); border-radius: var(--pi-radius); overflow: hidden; }
.pi-hours__row {
  display: flex; justify-content: space-between; padding: .65rem 1rem; font-size: .88rem;
  border-block-end: 1px solid var(--pi-line);
}
.pi-hours__row:last-child { border-block-end: none; }
.pi-hours__row.is-today { background: color-mix(in srgb, var(--pi-brass) 10%, transparent); font-weight: 700; }

/* Thumb-reach booking action on a phone; the desktop cover already keeps one in view. */
.pi-stickycta { display: none; }
@media (max-width: 720px) {
  .pi-stickycta {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--pi-surface) 96%, transparent);
    border-block-start: 1px solid var(--pi-line); backdrop-filter: blur(10px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .10);
  }
  .pi-stickycta strong { display: block; font-size: .9rem; }
  .pi-cover__logo { inline-size: 52px; block-size: 52px; }
}

/* A shop with no photo still gets a cover of its own: a segment motif over the theme gradient,
   which keeps every theme's colour and costs about 2 KB instead of a stock photograph. The motif
   is a masked layer rather than a plain repeating background — an unfaded tile reads as wallpaper,
   and it would compete with the shop name sitting on top of it. */
.pi-cover--men, .pi-cover--women {
  background-image: linear-gradient(135deg, var(--pi-hero-from) 0%, var(--pi-hero-to) 100%);
}
.pi-cover--men::before, .pi-cover--women::before {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: 300px 300px;
  /* Even across the panel now: the shop name moved off the cover, so there is no longer any text
     for the motif to fade away from. */
  opacity: .5;
}
.pi-cover--men::before { background-image: url('../img/cover-men.svg'); }
.pi-cover--women::before { background-image: url('../img/cover-women.svg'); }
@media (max-width: 720px) {
  .pi-cover--men::before, .pi-cover--women::before { background-size: 210px 210px; }
}

/* A service the current basket has ruled out: one visit is one specialist (FR-7). */
.pi-service.is-unavailable {
  cursor: not-allowed;
  background: var(--pi-surface);
}

.pi-service.is-unavailable:hover {
  border-color: var(--pi-line);
  box-shadow: none;
  transform: none;
}

/* Dim the offer, never the reason — fading the whole card takes the explanation with it. */
.pi-service.is-unavailable .pi-service__name,
.pi-service.is-unavailable .pi-service__price,
.pi-service.is-unavailable .pi-badge,
.pi-service.is-unavailable .pi-pick,
.pi-service.is-unavailable .pi-service__meta > span:not(.pi-service__blocked) {
  opacity: .45;
}

.pi-service.is-unavailable .pi-pick {
  border-style: dashed;
}

.pi-service__blocked {
  color: var(--pi-bad);
  font-weight: 600;
}

/* An address that is live now, as opposed to one an upgrade would unlock. */
.pi-hint--ok { color: var(--pi-ok); font-weight: 600; }

/* ---------- payments, billing, admin ---------- */
.pi-page-head { align-items: flex-start; margin-block-end: 1rem; }
.pi-page-head p { margin-block: .25rem 0; max-inline-size: 52ch; }

/* A capability the plan does not include. It states what the feature is for and which tier
   unlocks it — a disabled control that explains nothing just reads as broken. */
.pi-locked {
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  background: var(--pi-surface); padding: 2rem 1.5rem; text-align: center;
  max-inline-size: 46rem; margin-inline: auto;
}

.pi-locked__icon { font-size: 1.75rem; opacity: .55; }
.pi-locked h2 { margin-block: .75rem .5rem; font-size: 1.1rem; }
.pi-locked p { margin-block: 0 .5rem; max-inline-size: 46ch; margin-inline: auto; }
.pi-locked .pi-btn { margin-block-start: 1rem; }

/* The provider picker: choose one, then configure only that one. */
.pi-picker { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.pi-provider {
  display: flex; flex-direction: column; gap: .35rem; text-align: start;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  background: var(--pi-surface); padding: .9rem; cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pi-provider:hover {
  border-color: color-mix(in srgb, var(--pi-brass) 55%, transparent);
  box-shadow: var(--pi-shadow); transform: translateY(-1px);
}

.pi-provider__head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pi-provider__name { font-weight: 700; }
.pi-provider__note { color: var(--pi-muted); font-size: .82rem; line-height: 1.6; }
.pi-provider__go { color: var(--pi-brass); font-size: .8rem; font-weight: 600; margin-block-start: .25rem; }

/* A gateway already connected. */
.pi-connected {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  padding: .75rem .9rem; margin-block-start: .6rem;
}

.pi-connected.is-default { border-color: var(--pi-brass); }
.pi-connected__body { flex: 1; min-inline-size: 8rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pi-connected__actions { display: flex; gap: .35rem; flex-wrap: wrap; }

.pi-dot {
  inline-size: 9px; block-size: 9px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--pi-ink) 25%, transparent);
}

.pi-dot.is-on { background: var(--pi-ok); }

.pi-btn--sm { padding: .3rem .6rem; font-size: .78rem; }
.pi-btn--danger { color: var(--pi-bad); border-color: color-mix(in srgb, var(--pi-bad) 40%, transparent); }

.pi-configure { max-inline-size: 34rem; }

.pi-switch { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }

.pi-balance { font-size: 1.6rem; font-weight: 700; color: var(--pi-brass); }
.pi-balance span { font-size: .8rem; font-weight: 500; color: var(--pi-muted); }

/* Balance beside the packages: one is the reason to look at the other. Below 900px they stack,
   which is the same reading order. */
.pi-smsrow { display: grid; gap: 1rem; grid-template-columns: 1fr 2fr; margin-block-start: 1rem; align-items: start; }
@media (max-width: 900px) { .pi-smsrow { grid-template-columns: 1fr; } }

.pi-balancecard { display: flex; flex-direction: column; gap: .5rem; block-size: 100%; }
.pi-balancecard__count {
  font-size: var(--pi-text-display); line-height: var(--pi-lh-display); font-weight: var(--pi-w-display);
  color: var(--pi-brass); font-variant-numeric: tabular-nums; margin-block: .3rem .15rem;
}
.pi-balancecard__foot {
  margin: auto 0 0; padding-block-start: .75rem; border-block-start: 1px solid var(--pi-line);
  color: var(--pi-muted); font-size: var(--pi-text-label-md);
}

/* SMS packages wear the plan cards' shape — same border, same radius, same flag, buttons on one
   line across the row — because they are the same kind of decision: pick one of several priced
   tiers. align-items: stretch keeps the buy buttons level however long a package name runs. */
.pi-packs {
  display: grid; gap: 1rem; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}

.pi-pack {
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  background: var(--pi-surface); padding: 1.35rem .85rem 1rem; text-align: center;
}

.pi-pack.is-best { border-color: var(--pi-brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pi-brass) 25%, transparent); }

.pi-pack__flag {
  position: absolute; inset-block-start: -.65rem; inset-inline-start: 1rem;
  background: var(--pi-brass); color: var(--pi-on-accent, #17150f);
  font-size: var(--pi-text-label-sm); font-weight: 700; padding: .15rem .6rem; border-radius: 999px;
}

.pi-pack h4 {
  margin: 0 0 .35rem;
  font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md);
  font-weight: 600; color: var(--pi-muted);
}

.pi-pack__credits { display: flex; align-items: baseline; justify-content: center; gap: .3rem; }
.pi-pack__count {
  font-size: var(--pi-text-headline-lg); line-height: var(--pi-lh-headline-lg); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pi-pack__price { display: flex; align-items: baseline; justify-content: center; gap: .3rem; }
.pi-pack__amount { font-size: var(--pi-text-headline-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.pi-pack__unit { color: var(--pi-muted); font-size: var(--pi-text-label-md); }

/* min-block-size, so a package with no credits to divide by does not shorten its own card and
   knock the row of buttons out of line. */
.pi-pack__each {
  margin: .15rem 0 .9rem; min-block-size: 1.4em;
  color: var(--pi-muted); font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md);
}

.pi-pack .pi-btn { margin-block-start: auto; }

.pi-admin { display: contents; }

.pi-table { inline-size: 100%; border-collapse: collapse; }
.pi-table th, .pi-table td { text-align: start; padding: .6rem .5rem; border-block-end: 1px solid var(--pi-line); }
.pi-table th { color: var(--pi-muted); font-size: .8rem; font-weight: 600; }

.pi-auth { display: grid; place-items: center; min-block-size: 80vh; padding: 1rem; }
.pi-auth .pi-card { inline-size: min(420px, 100%); }

.pi-autorenew { margin-block-start: 1rem; border-block-start: 1px solid var(--pi-line); padding-block-start: .75rem; }
.pi-autorenew summary { cursor: pointer; font-weight: 600; font-size: .9rem; }

/* ---------- plan comparison ---------- */
.pi-planhead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-block-end: 1.25rem;
}

.pi-planhead h1 { margin-block-end: .25rem; }
.pi-planhead p { margin: 0; max-inline-size: 46ch; }

.pi-planhead__now {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  background: var(--pi-surface); padding: .6rem .9rem;
}

.pi-planhead__label { color: var(--pi-muted); font-size: .82rem; }
.pi-planhead__meta { color: var(--pi-muted); font-size: .82rem; }

/* Billing term. A segmented control rather than a checkbox: the choice is between two named
   things, not on/off, and the saving belongs on the option that earns it. */
.pi-terms {
  display: inline-flex; gap: .25rem; padding: .25rem;
  border: 1px solid var(--pi-line); border-radius: 999px;
  background: var(--pi-surface); margin-block-end: 1.25rem;
}

.pi-terms__option {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--pi-muted);
  padding: .4rem 1rem; border-radius: 999px; transition: background .15s ease, color .15s ease;
}

.pi-terms__option.is-on { background: var(--pi-brass); color: var(--pi-on-accent, #17150f); font-weight: 700; }
.pi-terms__save {
  font-size: .78rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px;
  background: color-mix(in srgb, var(--pi-ok) 20%, transparent); color: var(--pi-ok);
}
.pi-terms__option.is-on .pi-terms__save { background: color-mix(in srgb, #000 14%, transparent); color: inherit; }

.pi-plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); align-items: stretch; }

.pi-plans .pi-plan {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  background: var(--pi-surface); padding: 1.35rem 1rem 1rem;
}

.pi-plans .pi-plan.is-current { border-color: var(--pi-brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pi-brass) 30%, transparent); }
.pi-plans .pi-plan.is-featured { border-color: color-mix(in srgb, var(--pi-brass) 45%, transparent); }

/* Centred on the top border by `inset-inline: 0` plus auto margins, never by translateX(-50%):
   a physical transform on top of a logical inset compounds under RTL and walks the badge off the
   card. Nothing here needs to know which way the page runs. */
.pi-plans .pi-plan__flag {
  position: absolute; inset-block-start: -.7rem; inset-inline: 0;
  inline-size: fit-content; margin-inline: auto;
  background: var(--pi-brass); color: var(--pi-on-accent, #17150f);
  font-size: var(--pi-text-label-sm); font-weight: 700; padding: .2rem .7rem; border-radius: 999px;
  white-space: nowrap;
}

.pi-plans .pi-plan__flag--muted {
  background: color-mix(in srgb, var(--pi-brass) 20%, var(--pi-surface));
  color: var(--pi-brass); border: 1px solid color-mix(in srgb, var(--pi-brass) 40%, transparent);
}

.pi-plans .pi-plan h2 { margin-block: .25rem 0; font-size: 1.15rem; }
.pi-plans .pi-plan__tagline { color: var(--pi-muted); font-size: var(--pi-text-label-md); margin-block: 0; min-block-size: 3.2em; line-height: 1.6; }
.pi-plans .pi-plan__price { display: flex; align-items: baseline; gap: .35rem; margin-block-start: .25rem; }
.pi-plans .pi-plan__amount { font-size: 1.55rem; font-weight: 700; }
.pi-plans .pi-plan__unit, .pi-plans .pi-plan__free { color: var(--pi-muted); font-size: .8rem; }
/* «رایگان» is set at the price size, not one step down. It *is* the price, and a shorter line box
   was lifting the free card's button clear of the other two — the row of buttons is the line the
   eye runs along when comparing, so it has to actually be a line. Matching the type settles it
   without a magic height. */
.pi-plans .pi-plan__free { font-size: 1.55rem; font-weight: 700; color: var(--pi-ink); }

/* Two lines' worth, always. On the yearly term a paid card says both the annual total and the
   saving while the free card says one thing, and the difference was pushing the free card's button
   out of the row. An explicit line-height keeps the reserved height off the glyph metrics. */
.pi-plans .pi-plan__term {
  display: flex; flex-direction: column; gap: .15rem;
  font-size: .82rem; line-height: 1.5; color: var(--pi-muted);
  min-block-size: calc(3em + .15rem);
}

.pi-plans .pi-plan__saving { color: var(--pi-ok); font-weight: 700; }

.pi-plans .pi-plan__action { margin-block-start: .85rem; display: grid; }
.pi-plans .pi-plan__action .pi-btn[disabled] { opacity: .55; cursor: default; }

/* Two lines' worth: only the downgrade note goes here now, and reserving its height keeps the
   feature lists starting level across all three cards. */
.pi-plans .pi-plan__underneath { min-block-size: 3.6rem; display: grid; align-content: start; padding-block-start: .5rem; }
.pi-plans .pi-plan__note { font-size: var(--pi-text-label-md); color: var(--pi-muted); margin: 0; line-height: 1.7; }

/* Every card lists the same rows in the same order, so a glance down a column compares tiers. */
.pi-plans .pi-plan__features {
  list-style: none; margin: 0; padding: .75rem 0 0; display: grid; gap: .45rem;
  font-size: var(--pi-text-label-md); line-height: var(--pi-lh-body-md);
  flex: 1; border-block-start: 1px solid var(--pi-line); align-content: start;
}

.pi-plans .pi-plan__features li { display: flex; gap: .5rem; align-items: flex-start; }
.pi-plans .pi-plan__features li .pi-ico { inline-size: 16px; block-size: 16px; flex-shrink: 0; margin-block-start: .15rem; color: var(--pi-ok); }
.pi-plans .pi-plan__features li.is-off { color: color-mix(in srgb, var(--pi-muted) 70%, transparent); }
.pi-plans .pi-plan__features li.is-off .pi-ico { color: color-mix(in srgb, var(--pi-muted) 55%, transparent); }

/* ---------- admin dashboard ---------- */
/* Six tiles across on a wide operator screen, folding to three and then two. minmax(0,1fr) rather
   than auto-fit: a long grouped number must not widen its own column and unbalance the row. */
.pi-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1200px) { .pi-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .pi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pi-tile {
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  background: var(--pi-surface); padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}

.pi-tile__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pi-tile__label {
  color: var(--pi-muted);
  font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md); font-weight: var(--pi-w-label-md);
}

/* The icon carries the tile's tone. The figure stays in the reading colour: colouring the number
   itself makes two tiles look like different kinds of fact when they are both just counts. */
.pi-tile .pi-ico { inline-size: 20px; block-size: 20px; flex-shrink: 0; }
.pi-tile--brass .pi-ico { color: var(--pi-brass); }
.pi-tile--ok    .pi-ico { color: var(--pi-ok); }
.pi-tile--bad   .pi-ico { color: var(--pi-bad); }
.pi-tile--info  .pi-ico { color: color-mix(in srgb, var(--pi-brass) 60%, var(--pi-muted)); }
.pi-tile--muted .pi-ico { color: var(--pi-muted); }

.pi-tile--bad { border-color: color-mix(in srgb, var(--pi-bad) 55%, transparent); }

.pi-tile__value {
  font-size: var(--pi-text-headline-lg); line-height: var(--pi-lh-headline-lg); font-weight: var(--pi-w-headline-lg);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

.pi-tile__foot { margin-block-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; }
.pi-tile__trend {
  display: inline-flex; align-items: center; gap: .2rem; color: var(--pi-muted);
  font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md); font-weight: 600;
}
.pi-tile__trend .pi-ico { inline-size: 15px; block-size: 15px; }
.pi-tile__trend.is-up { color: var(--pi-ok); }
.pi-tile__trend.is-up .pi-ico { color: var(--pi-ok); }
.pi-tile__trend.is-down { color: var(--pi-warn); }
.pi-tile__trend.is-down .pi-ico { color: var(--pi-warn); }
.pi-tile__note { color: var(--pi-muted); font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md); }

/* A banded table: a filled header and alternating rows, so a wide row is still followed by eye. */
.pi-table--banded th {
  background: color-mix(in srgb, var(--pi-brass) 8%, var(--pi-surface));
  color: var(--pi-brass); font-weight: 700;
}
.pi-table--banded tbody tr:nth-child(even) { background: color-mix(in srgb, var(--pi-ink) 3%, transparent); }
.pi-table--banded tbody tr:hover { background: color-mix(in srgb, var(--pi-brass) 7%, transparent); }

.pi-warn-text { color: var(--pi-warn); font-weight: 600; }
.pi-bad-text { color: var(--pi-bad); font-weight: 600; }

.pi-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 32px; block-size: 32px; border-radius: var(--pi-radius);
  color: var(--pi-brass); border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.pi-iconbtn:hover { background: color-mix(in srgb, var(--pi-brass) 10%, transparent); border-color: var(--pi-line); }

.pi-table-scroll { overflow-x: auto; }
.pi-subhead { margin-block: 1.25rem .5rem; font-size: .9rem; color: var(--pi-muted); }

.pi-modules { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.pi-module {
  display: flex; gap: .5rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius); padding: .6rem .7rem;
  transition: border-color .15s ease, background .15s ease;
}

.pi-module.is-on { border-color: var(--pi-brass); background: color-mix(in srgb, var(--pi-brass) 8%, var(--pi-surface)); }
.pi-module__body { display: grid; gap: .1rem; }
.pi-module__name { font-weight: 600; font-size: .85rem; }
.pi-module__note { color: var(--pi-muted); font-size: .8rem; line-height: 1.55; }

/* ---------- admin shell ---------- */
/* The admin plane wears the Console's shell (.pi-console + .pi-side). What is left here is the one
   thing that must differ: the operator's sidebar is not a tenant's, so it never picks up a shop's
   accent — the platform's own brass holds across every shop's data shown inside it. */
.pi-adminshell .pi-side__mark { background: var(--pi-brass); color: var(--pi-on-dark); }

.pi-adminauth { min-block-size: 100vh; background: var(--pi-bg); }
.pi-adminauth__brand {
  display: flex; align-items: center; gap: .5rem; font-weight: 700;
  background: var(--pi-charcoal); color: var(--pi-on-dark);
  padding: .7rem clamp(1rem, 4vw, 2rem); font-size: var(--pi-text-body-md);
}
.pi-adminauth__brand .pi-side__mark { background: var(--pi-brass); color: var(--pi-on-dark); }

.pi-upgradebox {
  max-inline-size: 34rem; margin: 1.25rem auto 0;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  background: var(--pi-surface); padding: 1.1rem 1.25rem; display: grid; gap: .5rem;
}
.pi-upgradebox h3 { margin: 0 0 .35rem; font-size: var(--pi-text-headline-sm); line-height: var(--pi-lh-headline-sm); }
.pi-upgradebox .pi-plan__note { margin-block-start: .35rem; }

/* ---------- proration breakdown ---------- */
.pi-proration {
  border: 1px dashed color-mix(in srgb, var(--pi-brass) 45%, transparent);
  border-radius: var(--pi-radius); padding: .6rem .7rem; display: grid; gap: .25rem;
  font-size: .8rem; background: color-mix(in srgb, var(--pi-brass) 6%, transparent);
}

.pi-proration__line { display: flex; justify-content: space-between; gap: .5rem; }
.pi-proration__line--credit { color: var(--pi-ok); }
.pi-proration__line--total {
  border-block-start: 1px solid color-mix(in srgb, var(--pi-ink) 15%, transparent);
  margin-block-start: .2rem; padding-block-start: .3rem; font-weight: 700;
}

/* ---------- invoice ---------- */
/* One A4 sheet, on screen and on paper. The old version was a console card that happened to be
   printable; sizing it as paper is what stops a total stranding itself on page two. */
.pi-invoice-shell { max-inline-size: 226mm; margin-inline: auto; padding: 1.5rem 1rem 3rem; }
.pi-invoice-bar { display: flex; gap: .5rem; justify-content: flex-end; margin-block-end: 1rem; }

.pi-sheet {
  --pi-sheet-pad: 16mm;
  inline-size: 100%; max-inline-size: 210mm; min-block-size: 297mm; margin-inline: auto;
  display: flex; flex-direction: column; gap: 9mm;
  padding: var(--pi-sheet-pad);
  background: var(--pi-surface); color: var(--pi-ink);
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  box-shadow: 0 2px 18px rgb(0 0 0 / 8%);
  font-size: var(--pi-text-body-md); line-height: var(--pi-lh-body-md);
}

.pi-sheet__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  padding-block-end: 6mm; border-block-end: 1px solid var(--pi-line);
}

.pi-sheet__head h1 {
  margin: 0 0 .5rem; color: var(--pi-brass);
  font-size: var(--pi-text-headline-lg); line-height: var(--pi-lh-headline-lg); font-weight: var(--pi-w-headline-lg);
}

/* Label above value, so the number is the thing the eye lands on. */
.pi-sheet__meta { margin: 0; display: grid; grid-template-columns: auto auto; gap: .1rem 1rem; }
.pi-sheet__meta dt { color: var(--pi-muted); font-size: var(--pi-text-label-md); }
.pi-sheet__meta dd { margin: 0; font-weight: 600; }

.pi-sheet__mark { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; text-align: end; }
.pi-sheet__wordmark {
  color: var(--pi-brass); letter-spacing: .04em;
  font-size: var(--pi-text-headline-md); line-height: var(--pi-lh-headline-md); font-weight: 700;
}
.pi-sheet__tag { color: var(--pi-muted); font-size: var(--pi-text-label-md); }

.pi-sheet__parties { display: grid; gap: 5mm; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pi-party h2 {
  margin: 0 0 .45rem; color: var(--pi-muted);
  font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md); font-weight: 600;
}
.pi-party__box {
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  padding: .85rem 1rem; display: grid; gap: .3rem;
}
.pi-party__name { font-weight: 700; font-size: var(--pi-text-headline-sm); }
.pi-party__box span { color: var(--pi-muted); }

.pi-sheet__lines { inline-size: 100%; border-collapse: collapse; }
.pi-sheet__lines th, .pi-sheet__lines td { text-align: start; padding: .7rem .75rem; }
.pi-sheet__lines thead th {
  background: color-mix(in srgb, var(--pi-brass) 8%, var(--pi-surface));
  color: var(--pi-brass);
  border-block-end: 1px solid var(--pi-line);
  font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md); font-weight: 700;
}
.pi-sheet__lines tbody td { border-block-end: 1px solid var(--pi-line); }
.pi-col-no { inline-size: 3.5rem; }
.pi-col-qty { inline-size: 7rem; text-align: center; }
/* The money column reads down as a column of digits, so it is aligned to the same edge as the
   totals box below it — the two are compared against each other more than they are read. */
.pi-col-sum { inline-size: 10rem; text-align: end; font-variant-numeric: tabular-nums; }
.pi-sheet__lines td.pi-col-qty { color: var(--pi-muted); }
.pi-sheet__credit td { color: var(--pi-ok); }

.pi-sheet__totals { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.pi-sheet__totals dl {
  margin: 0; inline-size: min(100%, 23rem);
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius); padding: .9rem 1.1rem;
  display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; align-items: baseline;
}
.pi-sheet__totals dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.pi-sheet__vat { margin: 0; inline-size: min(100%, 23rem); color: var(--pi-muted); font-size: var(--pi-text-label-md); }
.pi-sheet__totals .is-credit { color: var(--pi-ok); }
.pi-sheet__totals .is-total {
  border-block-start: 1px solid var(--pi-line); padding-block-start: .6rem; margin-block-start: .15rem;
  font-weight: 700;
}
.pi-sheet__totals dd.is-total {
  color: var(--pi-brass);
  font-size: var(--pi-text-headline-md); line-height: var(--pi-lh-headline-md);
}

/* margin-block-start:auto pins the footer to the bottom of the sheet however short the invoice
   is — a single subscription line otherwise leaves the payment reference floating mid-page. */
.pi-sheet__foot {
  margin-block-start: auto; padding-block-start: 6mm; border-block-start: 1px solid var(--pi-line);
  display: grid; gap: .5rem;
}
.pi-sheet__paid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.pi-sheet__paid span { color: var(--pi-muted); }
.pi-sheet__note { margin: 0; color: var(--pi-muted); font-size: var(--pi-text-label-md); }

@page { size: A4; margin: 14mm; }

/* Print. Two things are being fixed here.
   One: the console's chrome is not part of the document.
   Two — the real defect — the sheet inherits the shop's theme tokens, and a shop on a dark theme
   printed light grey text and hairlines onto white paper. Every token the sheet uses is therefore
   restated for paper, rather than overriding `color` on a handful of selectors and leaving each
   descendant to resolve --pi-muted against whatever the theme happens to be. */
@media print {
  /* The exclusions are the point. A bare `header, nav, footer` rule was hiding the invoice's own
     <header> and <footer> along with the console's — so every printed invoice came out missing its
     number, its date, the wordmark, the payment method and the tracking reference. */
  .pi-noprint, .pi-side, .pi-console__bar,
  header:not(.pi-sheet__head), nav, footer:not(.pi-sheet__foot) { display: none !important; }

  html, body { background: #fff !important; }
  .pi-invoice-shell { max-inline-size: none; padding: 0; }

  .pi-sheet {
    --pi-ink: #16130e;
    --pi-muted: #56504a;
    --pi-line: #cfc7ba;
    --pi-surface: #fff;
    --pi-brass: #815508;
    --pi-ok: #2d6a4f;

    inline-size: auto; max-inline-size: none; min-block-size: 0;
    padding: 0; border: 0; border-radius: 0; box-shadow: none;
    background: #fff; color: var(--pi-ink);
  }

  /* The header band and the credit row carry meaning, not decoration — without this browsers
     drop both fills by default and the table loses its header. */
  .pi-sheet__lines thead th, .pi-sheet__foot, .pi-party__box, .pi-sheet__totals dl {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }

  /* A sheet must not break mid-row or strand the total away from the lines it sums. */
  .pi-sheet__lines tr, .pi-party, .pi-sheet__totals { break-inside: avoid; }
  .pi-sheet__foot { break-inside: avoid; }
}

/* Said above an empty day grid, not inside it — the grid still has to show the hours. */
.pi-dayempty {
  margin-block: 1rem 0; padding: .7rem .9rem; font-size: .85rem;
  border: 1px dashed var(--pi-line); border-radius: var(--pi-radius);
  color: var(--pi-muted); background: var(--pi-surface);
}

/* ---------- services, ported from the «خدمات» screen ---------- */
.pi-catgroup {
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  background: var(--pi-surface); margin-block-start: 1rem; overflow: hidden;
}

.pi-catgroup__head {
  display: flex; align-items: center; gap: .75rem; cursor: pointer; list-style: none;
  padding: .85rem 1rem; background: color-mix(in srgb, var(--pi-ink) 3%, var(--pi-surface));
  border-block-end: 1px solid var(--pi-line);
}
.pi-catgroup__head::-webkit-details-marker { display: none; }
.pi-catgroup__head h3 { margin: 0; font-size: var(--pi-text-headline-sm); line-height: var(--pi-lh-headline-sm); }
.pi-catgroup__count { color: var(--pi-muted); font-size: var(--pi-text-label-md); }

/* margin-inline-start:auto, not a transform: the chevron sits at the row's end under RTL as well,
   and rotating it is the one physical move that is safe because it is symmetric. */
.pi-catgroup__head > .pi-ico { margin-inline-start: auto; color: var(--pi-muted); transition: transform .15s ease; }
.pi-catgroup[open] .pi-catgroup__head > .pi-ico { transform: rotate(180deg); }

.pi-catgroup__icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 38px; block-size: 38px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--pi-brass) 14%, transparent); color: var(--pi-brass);
}

/* One grid, declared once and shared by the header and every row, so the columns cannot drift
   apart the way a header <div> and a row <div> with their own widths eventually do. */
.pi-svcrow {
  display: grid; align-items: center; gap: .75rem;
  grid-template-columns: minmax(0, 5fr) 6rem minmax(0, 2fr) 9rem 6rem 5rem;
  padding: .7rem 1rem; border-block-end: 1px solid var(--pi-line);
  font-size: var(--pi-text-body-md); line-height: var(--pi-lh-body-md);
}

.pi-svcrow:last-child { border-block-end: none; }
.pi-svcrow:not(.pi-svcrow--head):nth-of-type(even) { background: color-mix(in srgb, var(--pi-ink) 2%, transparent); }
.pi-svcrow:not(.pi-svcrow--head):hover { background: color-mix(in srgb, var(--pi-brass) 6%, transparent); }

.pi-svcrow--head {
  color: var(--pi-muted); background: var(--pi-surface);
  font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md); font-weight: var(--pi-w-label-md);
}

.pi-svcrow__name { display: flex; align-items: center; gap: .4rem; font-weight: 600; min-inline-size: 0; }
.pi-svcrow.is-off .pi-svcrow__name { color: var(--pi-muted); }
.pi-svc-c { text-align: center; }
.pi-svc-e { text-align: end; }
.pi-svc-num { font-variant-numeric: tabular-nums; color: var(--pi-muted); }
.pi-svc-price { color: var(--pi-ink); font-weight: 700; }
.pi-svcrow__ops { display: flex; gap: .15rem; justify-content: center; }
.pi-svcrow__empty { margin: 0; padding: 1rem; color: var(--pi-muted); font-size: var(--pi-text-label-md); }

/* Under a narrow console the six columns stop being a table and become stacked cards; the header
   row goes away with them, because a header for columns that no longer exist is noise. */
@media (max-width: 900px) {
  .pi-svcrow--head { display: none; }
  .pi-svcrow { grid-template-columns: 1fr auto; gap: .35rem .75rem; padding-block: .85rem; }
  .pi-svcrow__name { grid-column: 1 / -1; }
  .pi-svc-c, .pi-svc-e { text-align: start; }
  .pi-svcrow__ops { grid-column: 2; grid-row: 2 / span 2; justify-content: flex-end; align-self: center; }
}

/* ---------- edit drawer ---------- */
.pi-drawer-back {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--pi-charcoal) 55%, transparent);
  backdrop-filter: blur(2px);
}

.pi-drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 61;
  inline-size: min(480px, 100%); display: flex; flex-direction: column;
  background: var(--pi-surface); color: var(--pi-ink);
  border-inline-start: 1px solid var(--pi-line);
  box-shadow: 0 0 24px rgb(0 0 0 / 18%);
}

.pi-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-block-end: 1px solid var(--pi-line);
  background: color-mix(in srgb, var(--pi-ink) 3%, var(--pi-surface));
}
.pi-drawer__head h3 { margin: 0; font-size: var(--pi-text-headline-md); line-height: var(--pi-lh-headline-md); }

.pi-drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem; display: grid; gap: 1.1rem; align-content: start; }

.pi-drawer__avatar { display: grid; justify-items: center; gap: .5rem; }
.pi-avatar--lg { inline-size: 86px; block-size: 86px; font-size: var(--pi-text-headline-md); }
/* The input stays in the DOM — clipped, not display:none, so it keeps its accessible name and can
   still be reached by the keyboard through the label that wraps it. */
.pi-filepick { cursor: pointer; }
.pi-filepick input[type="file"] {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.pi-drawer__foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .9rem 1.25rem; border-block-start: 1px solid var(--pi-line);
  background: color-mix(in srgb, var(--pi-ink) 3%, var(--pi-surface));
}

/* A radio whose whole card is the target, and whose consequence is written next to it. A bare
   "بیعانه" says what it is called, not what the customer will be asked to do. */
.pi-fieldset { display: grid; gap: .5rem; }
.pi-fieldset__label { font-size: .85rem; font-weight: 600; }
.pi-choices { display: grid; gap: .5rem; }

.pi-choice {
  display: flex; align-items: flex-start; gap: .65rem; cursor: pointer;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius); padding: .7rem .85rem;
  transition: border-color .15s ease, background .15s ease;
}
.pi-choice:hover { border-color: color-mix(in srgb, var(--pi-brass) 50%, var(--pi-line)); }
.pi-choice.is-on { border-color: var(--pi-brass); background: color-mix(in srgb, var(--pi-brass) 8%, var(--pi-surface)); }
.pi-choice input { margin-block-start: .2rem; accent-color: var(--pi-brass); inline-size: 17px; block-size: 17px; }
.pi-choice > span { display: grid; gap: .15rem; }
.pi-choice__note { color: var(--pi-muted); font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md); }

/* ---------- specialists, ported from the Stitch «متخصص‌ها» screen ---------- */
.pi-staff { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }

.pi-staffcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg); background: var(--pi-surface);
  transition: border-color .15s ease;
}

.pi-staffcard:hover { border-color: color-mix(in srgb, var(--pi-ink) 22%, transparent); }

/* An inactive person stays legible — this card is where you go to switch them back on. */
.pi-staffcard.is-off .pi-staffcard__top { opacity: .62; }

.pi-staffcard__top {
  position: relative; display: grid; justify-items: center; gap: .35rem;
  padding: 1.35rem 1rem 1.1rem; border-block-end: 1px solid var(--pi-line);
}

.pi-staffcard__top .pi-avatar { inline-size: 76px; block-size: 76px; font-size: 1.4rem; font-weight: 700; }
.pi-staffcard__top h3 { margin: .35rem 0 0; font-size: var(--pi-text-headline-sm); line-height: var(--pi-lh-headline-sm); }
.pi-staffcard__role { margin: 0; color: var(--pi-muted); font-size: var(--pi-text-body-sm); line-height: var(--pi-lh-body-sm); }

.pi-staffcard__state {
  position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem;
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--pi-muted);
  font: inherit; font-size: var(--pi-text-label-md);
}

/* The knob is placed by flex alignment, not by a transform. `translateX` is *physical*: in RTL it
   moved the knob the same way `inset-inline-end` had already put it, so the "on" state slid the
   knob clean off the track and the switch looked like a solid pill. flex-start/flex-end follow the
   writing direction, so this is correct in both without a direction-specific rule. */
.pi-switchdot {
  inline-size: 32px; block-size: 18px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; padding: 2px; box-sizing: border-box;
  background: color-mix(in srgb, var(--pi-ink) 22%, transparent); transition: background .15s ease;
}

.pi-switchdot::after {
  content: ''; inline-size: 14px; block-size: 14px; border-radius: 50%; box-sizing: border-box;
  background: #ffffff; border: 1px solid color-mix(in srgb, #000000 18%, transparent);
}

.pi-switchdot.is-on { background: var(--pi-brass); justify-content: flex-end; }

/* These are real buttons; they need a visible focus ring. */
.pi-hours__toggle:focus-visible .pi-switchdot,
.pi-staffcard__state:focus-visible .pi-switchdot {
  outline: 2px solid var(--pi-brass); outline-offset: 2px;
}
.pi-staffcard__state:has(.is-on) { color: var(--pi-brass); font-weight: 600; }

/* Three disc tints so a row of people is not one flat block of accent. */
.pi-avatar--t0 { background: color-mix(in srgb, var(--pi-brass) 20%, var(--pi-surface)); color: var(--pi-brass); }
.pi-avatar--t1 { background: color-mix(in srgb, var(--pi-status-confirmed) 20%, var(--pi-surface)); color: var(--pi-status-confirmed); }
.pi-avatar--t2 { background: color-mix(in srgb, var(--pi-status-completed) 20%, var(--pi-surface)); color: var(--pi-status-completed); }

.pi-staffcard__services { flex: 1; padding: .9rem 1rem; background: color-mix(in srgb, var(--pi-ink) 3%, var(--pi-surface)); }

.pi-staffcard__services h4 {
  margin: 0 0 .6rem; color: var(--pi-muted);
  font-size: var(--pi-text-label-md); line-height: var(--pi-lh-label-md); font-weight: var(--pi-w-label-md);
}

.pi-staffcard__services ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }

.pi-staffcard__services button {
  inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: none; border: 0; padding: .3rem .25rem; cursor: pointer; color: inherit; text-align: start;
  font: inherit; font-size: var(--pi-text-body-sm); line-height: var(--pi-lh-body-sm); border-radius: 6px;
}

.pi-staffcard__services button:hover { background: color-mix(in srgb, var(--pi-ink) 6%, transparent); }
.pi-staffcard__services li.is-off button { color: color-mix(in srgb, var(--pi-muted) 75%, transparent); }
.pi-staffcard__services li.is-off span:first-child { text-decoration: line-through; }
.pi-staffcard__mark { color: var(--pi-ok); font-weight: 700; flex-shrink: 0; }
.pi-staffcard__services li.is-off .pi-staffcard__mark { color: var(--pi-muted); font-weight: 400; }

.pi-staffcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .75rem; border-block-start: 1px solid var(--pi-line);
}

.pi-staffcard__meta { color: var(--pi-muted); font-size: var(--pi-text-label-md); }

/* ---------- working hours, ported from the Stitch «ساعات کاری» screen ---------- */
.pi-hours {
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  background: var(--pi-surface); overflow: hidden;
}

.pi-hours__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.15rem; border-block-end: 1px solid var(--pi-line);
  background: color-mix(in srgb, var(--pi-ink) 3%, var(--pi-surface));
}

.pi-hours__head h3 { margin: 0; font-size: var(--pi-text-headline-sm); line-height: var(--pi-lh-headline-sm); }

.pi-hours__day {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.15rem; border-block-end: 1px solid var(--pi-line);
  transition: background .15s ease;
}

.pi-hours__day:last-child { border-block-end: 0; }
.pi-hours__day:hover { background: color-mix(in srgb, var(--pi-ink) 3%, transparent); }

/* A closed day is dimmed but never hidden — this row is where you reopen it. */
.pi-hours__day.is-closed { background: color-mix(in srgb, var(--pi-ink) 4%, transparent); }
.pi-hours__day.is-closed .pi-hours__range { opacity: .5; }

.pi-hours__when { display: flex; align-items: center; gap: 1rem; min-inline-size: 12rem; }

.pi-hours__name {
  inline-size: 5rem; font-size: var(--pi-text-body-md); line-height: var(--pi-lh-body-md); font-weight: 600;
}

.pi-hours__name.is-weekend { color: var(--pi-bad); }

.pi-hours__toggle {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--pi-muted);
  font: inherit; font-size: var(--pi-text-label-md);
}

.pi-hours__toggle:has(.is-on) { color: var(--pi-brass); font-weight: 600; }
.pi-hours__range { display: flex; align-items: center; gap: .75rem; }

.pi-hours__time {
  inline-size: 6.5rem; text-align: center; padding: .4rem .6rem;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  background: var(--pi-surface); color: inherit;
  font: inherit; font-size: var(--pi-text-data); font-weight: var(--pi-w-data);
  font-variant-numeric: tabular-nums;
}

.pi-hours__time:focus { border-color: var(--pi-brass); outline: 2px solid color-mix(in srgb, var(--pi-brass) 30%, transparent); outline-offset: 1px; }
.pi-hours__time.is-empty { color: var(--pi-muted); display: inline-grid; place-items: center; }
.pi-hours__sep { color: var(--pi-muted); font-size: var(--pi-text-body-sm); }

/* ---------- appearance, ported from the Stitch «ظاهر و طرح» screen ---------- */
.pi-theme__bands { position: absolute; inset: 0; display: flex; }

/* The bands are absolutely positioned, so a static card would paint underneath them. */
.pi-theme__card { position: relative; z-index: 1; }
.pi-theme__bands span:nth-child(1) { flex: 2; }
.pi-theme__bands span:nth-child(2) { flex: 1; }
.pi-theme__bands span:nth-child(3) { flex: 1; }

/* A locked theme is drained of colour, which reads instantly as "not yours yet" — and the badge
   says which tier unlocks it, because a disabled thing that explains nothing reads as broken. */
.pi-theme.is-locked .pi-theme__preview { filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.pi-theme.is-locked:hover .pi-theme__preview { filter: grayscale(0); opacity: 1; }

.pi-theme__tier {
  position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 2;
  background: var(--pi-surface); color: var(--pi-ink); border: 1px solid var(--pi-line);
  border-radius: 999px; padding: .1rem .55rem; font-size: var(--pi-text-label-md); font-weight: 700;
}

/* Segmented control: a handful of named states shown at once. */
.pi-segment {
  display: flex; gap: .2rem; padding: .2rem;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius);
  background: color-mix(in srgb, var(--pi-ink) 4%, var(--pi-surface));
}

.pi-segment button {
  flex: 1; border: 0; background: none; cursor: pointer; color: var(--pi-muted);
  padding: .45rem .6rem; border-radius: calc(var(--pi-radius) - 3px);
  font: inherit; font-size: var(--pi-text-label-md); transition: background .15s ease, color .15s ease;
}

.pi-segment button:hover { color: var(--pi-ink); }
.pi-segment button.is-on { background: var(--pi-surface); color: var(--pi-brass); font-weight: 700; box-shadow: var(--pi-shadow); }

.pi-chipvalue {
  font-size: var(--pi-text-label-md); font-weight: 700; color: var(--pi-brass);
  background: color-mix(in srgb, var(--pi-brass) 14%, transparent);
  padding: .1rem .5rem; border-radius: 6px; font-variant-numeric: tabular-nums;
}

.pi-range { inline-size: 100%; accent-color: var(--pi-brass); margin-block: .5rem 0; }
.pi-range__ends { display: flex; justify-content: space-between; color: var(--pi-muted); font-size: var(--pi-text-body-sm); }

.pi-range__preview {
  margin-block-start: .75rem; padding: .85rem; text-align: center;
  border: 1px solid var(--pi-line); background: color-mix(in srgb, var(--pi-ink) 4%, var(--pi-surface));
  color: var(--pi-muted); font-size: var(--pi-text-body-sm);
}

/* Accent swatches. */
.pi-swatches { display: flex; flex-wrap: wrap; gap: .6rem; }

.pi-swatch {
  inline-size: 32px; block-size: 32px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 0; position: relative; box-shadow: inset 0 0 0 1px color-mix(in srgb, #000000 12%, transparent);
}

.pi-swatch.is-on::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--pi-brass);
}

.pi-swatch:focus-visible { outline: 2px solid var(--pi-brass); outline-offset: 3px; }

/* The free picker sits in the same row as a swatch, so it reads as one more choice. */
.pi-swatch--custom {
  display: grid; place-items: center; overflow: hidden;
  background: conic-gradient(#e2504a, #e8a13c, #d9cf45, #4aa85f, #4a8fd0, #7d5ad0, #e2504a);
}

.pi-swatch--custom input { inline-size: 44px; block-size: 44px; border: 0; padding: 0; opacity: 0; cursor: pointer; }

.pi-visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- settings, ported from the Stitch «تنظیمات» screen ---------- */
.pi-setgroup {
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius-lg);
  background: var(--pi-surface); padding: 1.25rem; margin-block-start: 1rem;
}

.pi-setgroup__head {
  display: flex; align-items: center; gap: .6rem;
  margin-block-end: 1.15rem; padding-block-end: .85rem; border-block-end: 1px solid var(--pi-line);
}

.pi-setgroup__head h3 { margin: 0; font-size: var(--pi-text-headline-md); line-height: var(--pi-lh-headline-md); }

.pi-rules { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

/* A rule with its consequence written under it. A bare number and a label is not enough to
   choose a value by. */
.pi-rule {
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius); padding: .9rem;
  background: color-mix(in srgb, var(--pi-ink) 3%, var(--pi-surface)); display: grid; gap: .3rem;
  align-content: start;
}

.pi-rule label { font-size: var(--pi-text-label-md); font-weight: 600; color: var(--pi-ink); }
.pi-rule p { margin: 0 0 .35rem; color: var(--pi-muted); font-size: var(--pi-text-body-sm); line-height: var(--pi-lh-body-sm); }

.pi-stepper { display: flex; align-items: center; gap: .5rem; }

.pi-stepper button {
  inline-size: 40px; block-size: 40px; border-radius: var(--pi-radius);
  border: 1px solid var(--pi-line); background: var(--pi-surface); color: inherit;
  font: inherit; font-size: 1.1rem; cursor: pointer;
}

.pi-stepper button:hover { background: color-mix(in srgb, var(--pi-ink) 6%, transparent); border-color: var(--pi-brass); }

.pi-stepper span {
  min-inline-size: 3rem; text-align: center; font-weight: 700;
  font-size: var(--pi-text-headline-sm); font-variant-numeric: tabular-nums;
}

/* Settings: a sticky section index beside the form, as in the design. */
.pi-settings { display: grid; gap: 1.5rem; grid-template-columns: 190px minmax(0, 1fr); align-items: start; }

.pi-settings__nav { position: sticky; inset-block-start: 1rem; display: grid; gap: .15rem; }

.pi-settings__nav a {
  padding: .5rem .8rem; color: var(--pi-muted); border-radius: var(--pi-radius);
  border-inline-start: 2px solid transparent;
  font-size: var(--pi-text-body-md); line-height: var(--pi-lh-body-md);
}

.pi-settings__nav a:hover { background: color-mix(in srgb, var(--pi-ink) 5%, transparent); color: var(--pi-ink); }
.pi-settings__nav a:target { color: var(--pi-brass); border-inline-start-color: var(--pi-brass); }
.pi-settings__body { display: grid; gap: 1rem; min-inline-size: 0; }
.pi-settings__body .pi-setgroup { margin-block-start: 0; }

/* Jumping from the index must not park a heading flush against the viewport edge. */
.pi-setgroup[id] { scroll-margin-block-start: 1.25rem; }

/* Section headings carry their icon, so a long page can be scanned by shape. */
.pi-setgroup__head .pi-ico { color: var(--pi-brass); inline-size: 22px; block-size: 22px; }

.pi-toggles { display: grid; gap: .6rem; }

.pi-toggle {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--pi-line); border-radius: var(--pi-radius); padding: .85rem .95rem;
  transition: background .15s ease;
}

.pi-toggle:hover { background: color-mix(in srgb, var(--pi-ink) 3%, transparent); }
.pi-toggle.is-locked { opacity: .75; }
.pi-toggle__text { min-inline-size: 0; }
.pi-toggle__text strong { font-size: var(--pi-text-body-md); line-height: var(--pi-lh-body-md); }

.pi-toggle__text p {
  margin: .2rem 0 0; color: var(--pi-muted);
  font-size: var(--pi-text-body-sm); line-height: var(--pi-lh-body-sm); max-inline-size: 62ch;
}

@media (max-width: 900px) {
  .pi-settings { grid-template-columns: 1fr; }
  .pi-settings__nav { position: static; display: flex; overflow-x: auto; gap: .4rem; }
}