/*
 * Volare component library.
 *
 * Parker's original components, on the app's three systems: the ten-step type
 * scale (no raw font-size anywhere), opaque surfaces only, and the 4px spacing
 * grid. Buttons are not defined here — there is one button system, in
 * styles.css, and every button on every page is .btn plus one variant.
 */

/* ---------- Page head ---------- */
.page-head { padding: 0 0 0 var(--s1); margin-top: calc(-1 * var(--s2)); }
.eyebrow {
  font: var(--w-medium) var(--text-2xs)/1.2 var(--sans);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted);
}
/* Page title on every page but Home: one step below Home's greeting. */
.page-head h1 { margin-top: var(--s2); font: var(--type-title); letter-spacing: var(--track-heading); color: var(--ink-strong); max-width: var(--measure-heading); }
.page-sub { margin-top: var(--s1); font: var(--type-body); color: var(--muted); max-width: var(--measure-subtitle); }
/* The create button is the standard primary button; only its top margin is
   the page head's business. */
.btn--create { margin-top: var(--s4); }
.plus-icon { display: inline-flex; }

/* ---------- Filter row ---------- */
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); min-width: 0; margin-top: 0; padding-bottom: var(--s2); }
/* Two rows at every width, one left edge: the filter pills, then search and
   sort with the result count at the far right. */
.pillbar { display: flex; align-items: center; gap: var(--s2); flex: 1 1 100%; min-width: 0; }
.filters .search--videos { order: 1; }
.filters .sort-inline { order: 2; margin-left: 0; }
.filters .count { order: 3; }
.fpill {
  display: inline-flex; align-items: center;
  height: var(--control); padding: 0 var(--s4);
  border-radius: var(--r-sm);
  background: var(--dk-b-fbfdfe, #FBFDFE); border: 1px solid var(--line);
  font: var(--w-regular) var(--text-md)/var(--lh-ui) var(--sans); color: var(--ink);
  flex: none; white-space: nowrap;
}
.fpill:hover { border-color: var(--line-2); background: var(--tile); }
.fpill:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
/* The current selection carries the look's one accent: ink in Classic, periwinkle in Volare (css/looks.css). */
.fpill.is-active { background: var(--button); border-color: var(--button); font-weight: var(--w-medium); color: #fff; }
.fpill-count { margin-left: 0.4375rem; color: var(--muted); font-variant-numeric: var(--nums-tabular); }
.fpill.is-active .fpill-count { color: #fff; }
.count { flex: none; margin-left: auto; font-size: var(--text-sm); color: var(--muted); white-space: nowrap; font-variant-numeric: var(--nums-tabular); }
.search--videos { flex: 0 1 18rem; min-width: 12rem; background: var(--tile); }
.filter-btn {
  display: grid; place-items: center; flex: none;
  width: var(--control); height: var(--control); margin-left: var(--s1);
  border-radius: var(--r-sm); background: var(--tile);
  border: 1px solid var(--line); color: var(--ink);
}
.filter-btn:hover { border-color: var(--line-2); background: var(--hover-tile); }

/* Narrow screens: the pills wrap onto whole rows (never a strip cut off mid-label); search takes
   the full row beneath, with sort and the count sharing the last row. */
@media (max-width: 680px) {
  .pillbar { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; row-gap: var(--s2); }
  .filters .search--videos { flex: 1 1 100%; min-width: 0; }
  .filters .sort-inline { flex: 1 1 auto; width: auto; }
}

/* ---------- Video grid and cards ---------- */
.vgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: var(--gap-card);
  min-height: 0;
}
.vcard {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.vthumb { position: relative; flex: none; aspect-ratio: 16 / 6; overflow: hidden; background: var(--alabaster); }
.vthumb::after { content: ''; position: absolute; inset: 0; background:
    radial-gradient(76% 130% at 0% 100%, rgba(26, 38, 54, 0.3), rgba(26, 38, 54, 0) 62%),
    linear-gradient(to top, rgba(26, 38, 54, 0.26), rgba(26, 38, 54, 0) 58%);
  pointer-events: none; }
.vthumb-art { position: absolute; inset: 0; }
/* A real frame from the video fills the thumbnail (falls back to the art when there is none). */
.vthumb-art img, .thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vthumb-art svg { display: block; width: 100%; height: 100%; }
.vthumb .duration {
  z-index: 1; right: 0.625rem; bottom: 0.5rem;
  padding: 0.25rem 0.5rem; border-radius: var(--r-xs);
  background: #253141; font-size: var(--text-xs);
}
/* Neutral placeholder used until a real frame exists. Decorative scene art is
   never used to stand in for a frame. */
.vthumb--placeholder { background: linear-gradient(180deg, var(--dk-b-f2f4f7, #F2F4F7), var(--dk-b-e7ebf0, #E7EBF0)); }
.vthumb--placeholder::after { display: none; }
.vthumb--placeholder .vthumb-art { display: grid; place-items: center; color: var(--dk-t-7e8a99, #7E8A99); }

.vbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: var(--s4) var(--s5) var(--s4); gap: var(--s2); }
.vbody h3 {
  font: var(--type-section); letter-spacing: var(--track-title); color: var(--ink-strong); text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vfoot { margin-top: auto; display: flex; align-items: center; gap: var(--s2); min-width: 0; }
/* Pill first, never shrinking; the secondary text wraps under it rather than
   pushing the pill or the menu out of the card. */
.vstat { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.vstat .pill { flex: none; }
.vfoot .when { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.more-btn {
  flex: none; display: grid; place-items: center;
  width: var(--control); height: var(--control); margin-left: auto; margin-right: calc(-1 * var(--s2));
  border-radius: var(--r-xs); color: var(--muted);
}
.more-btn:hover { background: var(--hover-tile); color: var(--ink-strong); }
.more-btn:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
.vnote { font: var(--w-regular) var(--text-sm)/var(--lh-dense) var(--sans); color: var(--muted); }

/* ---------- Status pills ----------
   Four meanings, one construction. Colour never carries the meaning alone:
   the pill always spells out the status word. */
.pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  height: 1.75rem; padding: 0 0.75rem 0 0.625rem;
  border-radius: 0.875rem;
  font: var(--w-medium) var(--text-xs)/var(--lh-ui) var(--sans);
  letter-spacing: 0.01em; white-space: nowrap;
}
.pill i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; flex: none; }
/* needs you */
.pill--review, .pill--review2 { background: var(--st-attn-bg); color: var(--dk-tx-st-attn, var(--st-attn)); }
.pill--review i, .pill--review2 i { background: var(--st-attn-dot); }
/* working */
.pill--editing { background: var(--st-busy-bg); color: var(--dk-tx-st-busy, var(--st-busy)); }
.pill--editing i { background: var(--st-busy-dot); }
/* done */
.pill--done { background: var(--st-done-bg); color: var(--dk-tx-st-done, var(--st-done)); }
.pill--done i { background: var(--st-done-dot); }
/* idle */
.pill--draft { background: var(--st-idle-bg); color: var(--dk-tx-st-idle, var(--st-idle)); }
.pill--draft i { background: var(--st-idle-dot); }
/* failed */
.pill--failed { background: var(--st-fail-bg); color: var(--dk-tx-st-fail, var(--st-fail)); }
.pill--failed i { background: var(--st-fail-dot); }
/* unknown — a claim Volare cannot verify is not a status */
.pill--unknown { background: var(--st-idle-bg); color: var(--dk-tx-st-idle, var(--st-idle)); }
.pill--unknown i { background: var(--st-idle-dot); }

/* ---------- Processing foot ---------- */
.vfoot--proc { gap: var(--s2); }
.vfoot--proc .ring { flex: none; }
.proc { display: grid; min-width: 0; line-height: 1.25; }
.proc b { font: var(--w-medium) var(--text-md)/1.4 var(--sans); color: var(--dk-tx-st-busy, var(--st-busy)); }
.vstat .proc { display: block; font-size: var(--text-xs); line-height: var(--lh-dense); color: var(--muted); }
.pbar { flex: 1 1 auto; min-width: 1.5rem; height: 0.375rem; border-radius: 0.1875rem; background: var(--dk-b-dbe2ea, #DBE2EA); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 0.1875rem; background: var(--st-busy-dot); }
.pgap { flex: 1 1 auto; min-width: 0; }
.pct { flex: none; font: var(--w-medium) var(--text-md)/1.4 var(--sans); color: var(--ink-strong); font-variant-numeric: var(--nums-tabular); }

.new-plus {
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem; margin-bottom: var(--s2);
  border-radius: 50%; background: var(--dk-b-e1e8ef, #E1E8EF); color: var(--ink);
}
.new-title { font: var(--w-semibold) var(--text-lg)/1.4 var(--sans); letter-spacing: -0.005em; color: var(--ink-strong); }
.new-sub { font: var(--w-regular) var(--text-sm)/var(--lh-dense) var(--sans); color: var(--muted); }

/* ---------- Section cards ---------- */
.set-card { padding: 0; }
.set-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  padding: var(--pad-card) var(--pad-card) var(--s3);
}
.set-head-text h2 { font: var(--type-section); letter-spacing: var(--track-title); color: var(--ink-strong); }
.set-head-text p { margin-top: 0.1875rem; font: var(--w-regular) var(--text-sm)/var(--lh-dense) var(--sans); color: var(--muted); max-width: var(--measure-body); }
.set-rule { height: 1px; background: var(--line); }
.set-body { padding: var(--s4) var(--pad-card); }
.set-body--tight { padding-top: 0; }

.split { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); }
.split-right { border-left: 1px solid var(--line); padding-left: var(--s6); min-width: 0; }

.field-label { font-size: var(--text-sm); color: var(--ink); }
.field-value { margin-top: 0.1875rem; font: var(--w-semibold) var(--text-lg)/1.4 var(--sans); letter-spacing: -0.005em; color: var(--ink-strong); }
.field-note { margin-top: 0.3125rem; font-size: var(--text-sm); color: var(--muted); }

.id-row-inline { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.mono-avatar {
  flex: none; display: grid; place-items: center;
  width: 3.75rem; height: 3.75rem; border-radius: 50%;
  background: var(--dk-b-dde2e9, #DDE2E9); color: var(--ink-strong);
  font: var(--w-regular) var(--text-2xl)/1 var(--sans);
}
.identity-name { font: var(--w-semibold) var(--text-lg)/1.4 var(--sans); letter-spacing: -0.005em; color: var(--ink-strong); }
.identity-mail { margin-top: 0.1875rem; font-size: var(--text-sm); color: var(--muted); }

.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; align-content: center; }
.perks li { display: flex; align-items: center; gap: var(--s3); font-size: var(--text-md); color: var(--ink); }
.perks .i { flex: none; color: var(--dk-t-2c7d6d, #2C7D6D); }

/* ---------- Fields ---------- */
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.field { display: grid; gap: var(--s2); min-width: 0; }
.select { position: relative; display: block; }
.select select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: var(--control);
  padding: 0 2.25rem 0 0.875rem;
  background: var(--tile); border: 1px solid var(--dk-l-dfe2e7, #DFE2E7); border-radius: var(--r-sm);
  font: var(--w-regular) var(--text-md)/var(--lh-ui) var(--sans); color: var(--ink-strong);
  cursor: pointer;
  text-overflow: ellipsis;
}
.select select:hover { border-color: var(--line-2); }
.select select:focus-visible { outline: none; border-color: var(--mist); box-shadow: 0 0 0 3px rgba(113, 126, 143, 0.16); }
.select > .i {
  position: absolute; right: 0.75rem; top: 50%; margin-top: -0.5625rem;
  color: var(--twilight); pointer-events: none;
}
.input, textarea.input {
  width: 100%; height: var(--control);
  padding: 0 0.875rem;
  background: var(--tile); border: 1px solid var(--dk-l-dfe2e7, #DFE2E7); border-radius: var(--r-sm);
  font: var(--w-regular) var(--text-md)/var(--lh-ui) var(--sans); color: var(--ink-strong);
}
textarea.input { height: auto; min-height: 4.5rem; padding: 0.625rem 0.875rem; line-height: var(--lh-dense); resize: vertical; }
.input:hover { border-color: var(--line-2); }
.input:focus-visible, .input:focus { outline: none; border-color: var(--mist); box-shadow: 0 0 0 3px rgba(113, 126, 143, 0.16); }
.field-hint { font-size: var(--text-xs); color: var(--muted); }
/* Disabled and invalid read the same in both looks: disabled is dimmed and not editable, invalid has a red edge. */
.input:disabled, .select select:disabled { opacity: .55; cursor: not-allowed; }
.input:disabled:hover, .select select:disabled:hover { border-color: var(--dk-l-dfe2e7, #DFE2E7); }
.input[aria-invalid="true"], .select select[aria-invalid="true"] { border-color: var(--dk-tx-st-fail, var(--st-fail)); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink-strong); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; }
.opt { color: var(--muted); }

/* ---------- Note ---------- */
.note {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--dk-b-eaf0f7, #EAF0F7); border-radius: var(--r-sm);
}
.note-icon { flex: none; color: var(--dk-tx-accent, var(--accent)); }
.note-title { font: var(--w-medium) var(--text-md)/1.4 var(--sans); color: var(--ink-strong); }
.note-sub { margin-top: 0.1875rem; font-size: var(--text-sm); color: var(--muted); }
.note--stop { background: var(--st-fail-bg); }
.note--stop .note-icon { color: var(--dk-tx-st-fail, var(--st-fail)); }
.note--ok { background: var(--st-done-bg); }
.note--ok .note-icon { color: var(--dk-tx-st-done, var(--st-done)); }
.note--warn { background: var(--st-attn-bg); }
.note--warn .note-icon { color: var(--dk-tx-st-attn, var(--st-attn)); }

/* ---------- Attention rows ---------- */
.attn--action { grid-template-columns: 1.25rem minmax(0, 1fr) auto auto; }

/* ---------- Stats ---------- */
.stat--lg { padding: 0; }

/* ---------- Editing style picker (Brand > Editing style, Create video > setup) ---------- */
.style-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.style-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left;
  min-width: 0; padding: 0.625rem 0.75rem;
  background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-xs);
  color: inherit; cursor: pointer;
}
.style-opt:hover { border-color: var(--line-2); }
.style-opt.is-on { background: var(--blue-soft); border-color: var(--blue-line); }
.style-opt-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; font: var(--w-medium) var(--text-md)/1.4 var(--sans); color: var(--ink-strong); }
.style-opt.is-on .style-opt-name { color: var(--ink-strong); }
.style-opt-tag { font: var(--w-regular) var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.style-opt-blurb { font: var(--w-regular) var(--text-sm)/1.45 var(--sans); color: var(--muted); }
@media (max-width: 680px) { .style-pick { grid-template-columns: 1fr; } }

/* Editing pace picker (Brand > Editing style and Create video): same segmented control as the Brand page's */
.pace-pick { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--tile); max-width: 30rem; }
.pace-pick .seg-opt { height: var(--control); padding: 0 0.25rem; border-radius: 0.4375rem; font: var(--w-regular) var(--text-sm)/var(--lh-ui) var(--sans);
  color: var(--dk-t-5e6b80, #5E6B80); border: 1px solid transparent; border-right-color: var(--line); white-space: nowrap; background: none; cursor: pointer; }
.pace-pick .seg-opt:last-child { border-right-color: transparent; }
.pace-pick .seg-opt.is-on { background: var(--blue-soft); border-color: var(--blue-line); color: var(--dk-t-24425f, #24425F); font-weight: 500; }
.pace-pick .seg-opt .opt { color: inherit; opacity: 0.7; font-weight: 400; }
@media (max-width: 520px) { .pace-pick .seg-opt .opt { display: none; } }


/* ---- Disclosures: the app chevron, never the browser's triangle (one rule for every <details>) ---- */
:root { --chevron-down-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
.plan-details > summary, .details > summary, .be-custom-pics > summary, .int-see > summary, .tn-lessons > summary, .tn-flags > summary,
.tn-niche-fold > summary, .es-sec > summary, .be-fontup > summary, .osb-seed > summary { list-style: none; cursor: pointer; }
.plan-details > summary::-webkit-details-marker, .details > summary::-webkit-details-marker, .be-custom-pics > summary::-webkit-details-marker,
.int-see > summary::-webkit-details-marker, .tn-lessons > summary::-webkit-details-marker, .tn-flags > summary::-webkit-details-marker,
.tn-niche-fold > summary::-webkit-details-marker, .es-sec > summary::-webkit-details-marker,
.be-fontup > summary::-webkit-details-marker, .osb-seed > summary::-webkit-details-marker { display: none; }
.plan-details > summary::before, .details > summary::before, .be-custom-pics > summary::before, .int-see > summary::before, .tn-lessons > summary::before,
.tn-flags > summary::before, .tn-niche-fold > summary::before, .es-sec > summary::before, .be-fontup > summary::before, .osb-seed > summary::before {
  content: ''; display: inline-block; flex: none; width: 1em; height: 1em; margin-right: var(--s2); vertical-align: -0.15em; background: currentColor;
  -webkit-mask: var(--chevron-down-mask) center / contain no-repeat; mask: var(--chevron-down-mask) center / contain no-repeat; transform: rotate(-90deg); transition: transform .15s;
}
:is(.plan-details, .details, .be-custom-pics, .int-see, .tn-lessons, .tn-flags, .tn-niche-fold, .es-sec, .be-fontup, .osb-seed)[open] > summary::before { transform: none; }

/* ---- Plan and Billing share one two-column key/value layout, with a value column wide enough to keep a phrase on one line ---- */
.fields.fields--pair { grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 2fr); column-gap: var(--s8); row-gap: var(--s4); }
.fields--pair .field-value { overflow-wrap: anywhere; }
@media (max-width: 680px) { .fields.fields--pair { grid-template-columns: minmax(0, 1fr); } }
/* a role is a small plain label, never an input-looking box */
.role-badge { display: inline-block; padding: 0 var(--s2); border-radius: 999px; background: var(--soft); color: var(--ink-strong); font: var(--type-meta); font-weight: var(--fw-strong); }

/* ---- Editing style toggles: every row is the same width, and no segment is squeezed ("Numbers" has four) ---- */
#editing .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6rem, 1fr); width: 100%; max-width: 30rem; }
#editing .seg .seg-opt { min-width: 6rem; padding: 0 var(--s2); white-space: nowrap; }
@media (max-width: 520px) { #editing .seg { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }
/* the learn-from-videos block lives in the same card as the picture cards, under a hairline */
.card.editing > .editing-learn { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }

/* ---- Videos list: the title cell carries the status pill under it on a narrow screen, and the filter tabs scroll sideways in one row ---- */
.vrow-main { display: contents; }
.vrow-status-m { display: none; }
@media (max-width: 768px) {
  .vlist .vrow-main { display: grid; gap: var(--s1); min-width: 0; }
  .vlist .vrow-main .vrow-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .vlist .vrow-main .vrow-status-m { display: block; }
  .vlist .vrow .vrow-status { display: none; }
  body[data-route="videos"] .filters .pillbar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: calc(-1 * var(--s3)); margin-right: calc(-1 * var(--s3)); padding: 2px var(--s3); }
  body[data-route="videos"] .filters .pillbar::-webkit-scrollbar { display: none; }
  body[data-route="videos"] .filters .pillbar .fpill { flex: none; }
}

/* alignment: no one-word last lines in cards, notes and descriptions (longhand, so nowrap text stays nowrap) */
:where(p, li, dd, figcaption, span, b, a, label, small) { text-wrap-style: pretty; }