/* ============================================================
   Sides demo set, component library
   Buttons, fields, cards, tables, pills, chips, avatars, badges,
   the demo shell chrome (topbar + step rail + controls), the
   iPad device frame, toast. Depends on tokens.css + base.css.

   Flow authors: compose screens from THESE classes. Do not
   introduce new colors or inline hex; pull from tokens.css.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.01em; line-height: 1; cursor: pointer; white-space: nowrap;
  padding: 0.8rem 1.25rem; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  -webkit-user-select: none; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.btn--primary { background: var(--curtain-crimson); color: var(--playbill-cream); }
.btn--primary:hover { background: var(--theatrical); }
.btn--secondary { background: var(--surface-2); color: var(--ink); border-color: var(--hairline); }
.btn--secondary:hover { background: var(--surface-3); border-color: var(--hairline-loud); }
.btn--ghost { background: transparent; color: var(--ink-dim); border-color: var(--hairline); }
.btn--ghost:hover { color: var(--ink); border-color: var(--hairline-loud); background: var(--surface-1); }
.btn--quiet { background: transparent; color: var(--ink-dim); padding: 0.5rem 0.6rem; }
.btn--quiet:hover { color: var(--ink); }
.btn--sm { padding: 0.55rem 0.85rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1rem 1.7rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }
.btn .ico { width: 1.05em; height: 1.05em; display: inline-block; }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > label, .label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-dim); text-transform: none;
}
.label--caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-eyebrow); color: var(--ink-faint); }
.control,
.input, .select, .textarea {
  width: 100%; font-family: var(--font); font-size: var(--fs-sm); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 0.7rem 0.85rem; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23f2ebd5' stroke-opacity='0.5' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; padding-right: 2.2rem;
}
.control::placeholder, .input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.control:focus, .input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--hairline-loud); background: var(--surface-3);
}
.field__hint { font-size: var(--fs-xs); color: var(--ink-faint); }

/* segmented control */
.segmented { display: inline-flex; background: var(--surface-inset); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 3px; gap: 3px; }
.segmented button {
  font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-dim);
  background: transparent; border: 0; padding: 0.5rem 0.9rem; border-radius: 3px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.segmented button[aria-selected="true"], .segmented button.is-active { background: var(--curtain-crimson); color: var(--playbill-cream); }
.segmented button:not(.is-active):hover { color: var(--ink); }

/* toggle */
.toggle { position: relative; width: 40px; height: 23px; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--hairline); cursor: pointer; transition: background var(--t-fast) var(--ease); flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink-dim); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.toggle.is-on { background: var(--crimson-35); border-color: var(--theatrical); }
.toggle.is-on::after { transform: translateX(17px); background: var(--playbill-cream); }

/* checkbox (multi-select) */
.checkbox { width: 20px; height: 20px; border-radius: var(--r-xs); border: 1.5px solid var(--hairline-loud);
  background: var(--surface-2); color: var(--playbill-cream); display: grid; place-items: center; flex: none;
  cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.checkbox svg { width: 12px; height: 10px; opacity: 0; transform: scale(0.6);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.checkbox.is-checked { background: var(--curtain-crimson); border-color: var(--curtain-crimson); }
.checkbox.is-checked svg { opacity: 1; transform: none; }
.card--interactive:hover .checkbox { border-color: var(--theatrical); }

/* brand mark: the product word "Sides" rendered as the mark.
   The S is the artmark recolored to the surrounding text color via a mask,
   and the whole word is bold so it reads as one cohesive mark. */
.brand-mark { white-space: nowrap; font-weight: 700; }
.brand-mark__s { display: inline-block; width: 0.684em; height: 0.8em; vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask: url("Sides_S.png") center / contain no-repeat;
  mask: url("Sides_S.png") center / contain no-repeat; }

/* fade-in-place teleprompter (patent pending): the line holds at the eye line and cross-fades */
.fip { position: relative; border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: var(--surface-inset); overflow: hidden; padding: var(--s-6) var(--s-5) var(--s-4); }
.fip__badge { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
  font-size: 0.56rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 600;
  color: var(--theatrical); border: 1px solid color-mix(in srgb, var(--theatrical) 40%, transparent);
  background: var(--theatrical-12); border-radius: var(--r-pill); padding: 0.26rem 0.6rem; }
.fip__stage { position: relative; height: 7.5em; }
.fip__eyeline { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--hairline-loud); z-index: 1; pointer-events: none; }
.fip__eyeline span { position: absolute; right: 0; top: -1.35em; font-size: 0.56rem;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-faint); }
.fip__line { position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%) translateY(7px); opacity: 0;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); z-index: 2; text-align: center; padding: 0 var(--s-3); }
.fip__line.is-active { opacity: 1; transform: translateY(-50%); }
.fip__who { display: block; font-size: 0.6rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: 0.45rem; }
.fip--me .fip__who { color: var(--theatrical); }
.fip--ai .fip__who { color: var(--status-requested); }
.fip__text { font-size: 1.3rem; line-height: 1.34; font-weight: 500; color: var(--ink); }
.fip--ai .fip__text { color: var(--ink-dim); }
.fip__cap { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--ink-faint); text-align: center; }
.fip--compact { padding: var(--s-5) var(--s-4) var(--s-3); }
.fip--compact .fip__stage { height: 6em; }
.fip--compact .fip__text { font-size: 1.04rem; }
.fip--compact .fip__cap { font-size: 0.62rem; }
@media (prefers-reduced-motion: reduce) { .fip__line { transition: opacity 0.2s; transform: translateY(-50%); } }

/* ---------- Cards / panels ---------- */
.card {
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: var(--s-5); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.card--pad-lg { padding: var(--s-6); }
.card--pad-sm { padding: var(--s-4); }
.card--interactive { cursor: pointer; }
.card--interactive:hover { border-color: var(--hairline-loud); background: var(--surface-2); }
.card.is-selected { border-color: var(--theatrical); background: var(--theatrical-12); box-shadow: 0 0 0 1px var(--theatrical) inset; }
.panel { background: var(--surface-inset); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); padding: var(--s-5); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.card__title { font-size: var(--fs-base); font-weight: 600; }
.divider { height: 1px; background: var(--hairline); border: 0; margin: var(--s-4) 0; }
.divider--soft { background: var(--hairline-soft); }

/* grids */
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Pills / chips / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.02em; padding: 0.3rem 0.65rem; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); color: var(--ink-dim); background: var(--surface-2); white-space: nowrap;
}
.pill .dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.pill--submitted { color: var(--status-submitted); border-color: color-mix(in srgb, var(--status-submitted) 40%, transparent); }
.pill--requested { color: var(--status-requested); border-color: color-mix(in srgb, var(--status-requested) 40%, transparent); }
.pill--callback  { color: var(--status-callback);  border-color: color-mix(in srgb, var(--status-callback) 40%, transparent); }
.pill--booked    { color: var(--status-booked);    border-color: color-mix(in srgb, var(--status-booked) 45%, transparent); background: color-mix(in srgb, var(--status-booked) 10%, transparent); }
.pill--passed    { color: var(--status-passed);    border-color: color-mix(in srgb, var(--status-passed) 35%, transparent); }
.pill--available   { color: var(--status-booked);   border-color: color-mix(in srgb, var(--status-booked) 45%, transparent); }
.pill--incallbacks { color: var(--status-callback);  border-color: color-mix(in srgb, var(--status-callback) 40%, transparent); }
.pill--bookedout   { color: var(--status-passed);    border-color: color-mix(in srgb, var(--status-passed) 35%, transparent); }

.tag {
  display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs-xs); font-weight: 500;
  padding: 0.28rem 0.6rem; border-radius: var(--r-xs); background: var(--surface-2);
  border: 1px solid var(--hairline-soft); color: var(--ink-dim);
}
.tag--accent { color: var(--theatrical); border-color: color-mix(in srgb, var(--theatrical) 35%, transparent); background: var(--theatrical-12); }
.tag--subtype { color: var(--ink); border-color: var(--hairline-loud); }

/* status / stage badges for chrome and launcher */
.badge { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: var(--r-xs);
  border: 1px solid var(--hairline); color: var(--ink-faint); }
.badge .dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.badge--live   { color: var(--live);   border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.badge--canned { color: var(--canned); border-color: color-mix(in srgb, var(--canned) 40%, transparent); }
.badge--vision { color: var(--vision); border-color: color-mix(in srgb, var(--vision) 40%, transparent); }
.badge--stage  { color: var(--ink-dim); }

/* ---------- Avatars ---------- */
.avatar { --sz: 44px; width: var(--sz); height: var(--sz); border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 600; font-size: calc(var(--sz) * 0.36);
  color: var(--playbill-cream); background: linear-gradient(150deg, var(--theatre-red), var(--curtain-crimson));
  border: 1px solid var(--hairline-loud); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { --sz: 32px; } .avatar--lg { --sz: 64px; } .avatar--xl { --sz: 92px; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--hairline); }
.table td { padding: 0.85rem 0.85rem; border-bottom: 1px solid var(--hairline-soft); color: var(--ink-dim); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover td { background: var(--surface-1); }
.table td strong { color: var(--ink); }

/* meta key/value list */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.2rem; font-size: var(--fs-sm); }
.kv dt { color: var(--ink-faint); }
.kv dd { color: var(--ink); }

/* ---------- Demo shell chrome ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar); height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-inline: var(--gutter); border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px);
}
.topbar__brand { display: flex; align-items: center; gap: 0.7rem; }
.topbar__brand img { height: 30px; width: auto; display: block; }
.topbar__brand .sep { width: 1px; height: 22px; background: var(--hairline); }
.topbar__title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.topbar__sub { font-size: var(--fs-xs); color: var(--ink-faint); }
.topbar__right { display: flex; align-items: center; gap: var(--s-3); }
.topbar__home { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--fs-xs); color: var(--ink-dim); }
.topbar__home:hover { color: var(--ink); }

/* step rail */
.steprail { display: flex; align-items: center; gap: 0; flex-wrap: wrap; padding: var(--s-4) 0; }
.steprail__item { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-xs); color: var(--ink-faint);
  cursor: pointer; transition: color var(--t-fast) var(--ease);
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font-family: inherit; }
.steprail__num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 600; color: var(--ink-faint); transition: all var(--t-fast) var(--ease); flex: none; }
.steprail__item:hover { color: var(--ink-dim); }
.steprail__item.is-active { color: var(--ink); }
.steprail__item.is-active .steprail__num { background: var(--curtain-crimson); border-color: var(--curtain-crimson); color: var(--playbill-cream); }
.steprail__item.is-done .steprail__num { border-color: var(--theatrical); color: var(--theatrical); }
.steprail__line { width: clamp(16px, 3vw, 44px); height: 1px; background: var(--hairline); margin: 0 0.5rem; }
.steprail__item.is-done + .steprail__line { background: var(--theatrical); }
@media (max-width: 720px) { .steprail__label { display: none; } .steprail__line { width: 14px; } }

/* step viewport + controls */
.stage { padding: var(--s-5) 0 var(--s-8); }
.screen { animation: fade 0.5s var(--ease); }
.controls { position: sticky; bottom: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--gutter); border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); }
.controls__hint { font-size: var(--fs-xs); color: var(--ink-faint); }

/* section heading block used inside steps */
.stephead { margin-bottom: var(--s-5); }
.stephead .eyebrow { margin-bottom: var(--s-3); }
.stephead h2 { font-size: var(--fs-d3); margin-bottom: var(--s-2); }
.stephead p { color: var(--ink-dim); max-width: 64ch; }

/* callout / closing point */
.callout { border-left: 2px solid var(--theatrical); background: var(--theatrical-12); padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); }
.callout .eyebrow { color: var(--theatrical); margin-bottom: var(--s-2); }
.note-strip { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-xs); color: var(--ink-faint);
  background: var(--surface-1); border: 1px dashed var(--hairline); border-radius: var(--r-sm); padding: 0.6rem 0.85rem; }

/* ---------- iPad device frame (Stage 2 / iOS moments) ---------- */
.device { --bezel: 14px; position: relative; background: #050505; border-radius: var(--r-device);
  padding: var(--bezel); box-shadow: var(--shadow-device); border: 1px solid #1c1c1e; }
.device--ipad { width: 460px; max-width: 100%; aspect-ratio: 3 / 4; }
.device--ipad.device--landscape { width: 760px; aspect-ratio: 4 / 3; }
.device__cam { position: absolute; top: calc(var(--bezel) / 2 - 2px); left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #2a2a2e; z-index: 2; }
.device__screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--r-device) - var(--bezel));
  overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.device__screen .atmosphere, .device__screen .grain { position: absolute; }
.device__statusbar { display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 1rem 0.2rem; font-size: 0.66rem; color: var(--ink-dim); font-weight: 600; flex: none; }
.device__body { flex: 1; overflow-y: auto; padding: 0.9rem 1rem 1.1rem; }
@media (max-width: 520px) { .device--ipad { width: 100%; } .device--ipad.device--landscape { width: 100%; } }

/* ---------- Toast ---------- */
.toast-host { position: fixed; bottom: calc(var(--s-6) + 56px); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); color: var(--ink);
  background: var(--archive-ink); border: 1px solid var(--hairline-loud); border-radius: var(--r-md);
  padding: 0.75rem 1.1rem; box-shadow: var(--shadow-2); animation: rise 0.4s var(--ease); }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-booked); flex: none; }

/* spinner */
.spinner { width: 1em; height: 1em; border-radius: 50%; border: 2px solid var(--ink-ghost);
  border-top-color: var(--ink); display: inline-block; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Password gate ---------- */
.gate { position: fixed; inset: 0; z-index: var(--z-gate); display: grid; place-items: center;
  background: var(--bg); padding: var(--gutter); }
.gate__card { width: 100%; max-width: 360px; text-align: center; }
.gate__card img { height: 40px; margin-bottom: var(--s-5); }
.gate__card .field { text-align: left; margin-top: var(--s-4); }
.gate__err { color: var(--theatrical); font-size: var(--fs-xs); min-height: 1.1em; margin-top: var(--s-2); }