/* Audiadis AI app styles. Mobile first. Phones: app bar and tab bar; task flows full screen with the
   cases above the work. Tablets (>= 768 px): navigation rail, flows in two columns (cases on the left).
   Desktops (>= 1200 px): sidebar; flows keep two columns, listening splits the work in two.
   Sound lives on the "studio" surface (Blue Grey 90) with the amber waveform; the rest stays light. */

/* ==========================================================================
   App shell
   ========================================================================== */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
}
.app-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; outline: none; }

.skip-link {
  position: fixed;
  left: 8px;
  top: -80px;
  z-index: 400;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: calc(8px + env(safe-area-inset-top)); }

.appbar, .tabbar, .sidenav { display: none; }

body[data-chrome="shell"] .appbar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  padding-top: env(safe-area-inset-top);
}
body[data-chrome="shell"] .tabbar {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -6px 24px rgba(38, 50, 56, .06);
  padding-bottom: env(safe-area-inset-bottom);
}
body[data-chrome="shell"] .main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
/* Typing in a search: the keyboard takes the bottom of the screen, the tab bar steps aside (as in native apps). */
body[data-chrome="shell"]:has(input[type="search"]:focus, input[type="text"]:focus, textarea:focus) .tabbar { display: none; }

/* ---------- phone app bar: store switcher, account ---------- */

.appbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--appbar-h);
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}
.store-switch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 48px;
  margin-left: -8px;
  padding: 4px 10px 4px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  text-align: left;
  transition: background-color var(--t-base) ease, transform var(--t-fast) ease;
}
.store-switch:hover { background: rgba(38, 50, 56, .05); }
.store-switch:active { transform: scale(.98); }
.store-switch-logo { height: 24px; width: auto; }  /* the store's brand first, its town under it */
.store-switch-brand { font: 700 15px/1 var(--font-title); }
.store-switch-town { display: flex; align-items: center; gap: 4px; min-width: 0; font: 700 14px/1.1 var(--font-ui); color: var(--ink-2); }
.store-switch-town > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-switch-town .icon { flex: none; color: var(--ink-2); margin-left: -2px; }

.avatar-btn {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  transition: transform var(--t-fast) ease;
}
.avatar-btn:active { transform: scale(.94); }
.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  font: 700 15px/1 var(--font-ui);
  letter-spacing: .02em;
  box-shadow: 0 0 0 3px var(--paper), 0 2px 8px rgba(38, 50, 56, .16);
}
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }

/* ---------- phone tab bar ---------- */

.tabbar-nav { max-width: 560px; margin: 0 auto; }
.tab-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: var(--tabbar-h); }
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  color: var(--ink-3);
  font: 700 12.5px/1 var(--font-ui);
  letter-spacing: .01em;
  text-decoration: none;
}
.tab-icon {
  width: 60px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  transition: background-color var(--t-base) ease, transform var(--t-fast) ease;
}
.tab-item[aria-current="page"] { color: var(--ink); }
.tab-item[aria-current="page"] .tab-icon { background: var(--amber); animation: pill-in .28s var(--ease-spring); }
.tab-item:active .tab-icon { transform: scale(.9); }

/* ---------- rail (tablet) and sidebar (desktop) ---------- */

.sidenav { background: var(--paper); border-right: 1px solid var(--line-soft); }
.sidenav-in {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: calc(18px + env(safe-area-inset-top)) 10px 16px;
  overflow-y: auto;
}
.sidenav-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
}
.sidenav-mono { width: 58px; height: auto; }
.sidenav-logo { display: none; }
.side-list { display: flex; flex-direction: column; gap: 4px; }
.side-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 2px;
  border-radius: var(--r-md);
  color: var(--ink-3);
  font: 700 12.5px/1.15 var(--font-ui);
  text-align: center;
  text-decoration: none;
}
.side-icon {
  width: 56px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  transition: background-color var(--t-base) ease, transform var(--t-fast) ease;
}
.side-item:hover .side-icon { background: var(--surface); }
.side-item:active .side-icon { transform: scale(.92); }
.side-item[aria-current="page"] { color: var(--ink); }
.side-item[aria-current="page"] .side-icon { background: var(--amber); }
.sidenav-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.store-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 4px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  transition: background-color var(--t-base) ease, transform var(--t-fast) ease;
}
.store-card:hover { background: var(--surface); }
.store-card:active { transform: scale(.97); }
.store-card-logo { width: 64px; height: auto; }
.store-card-text { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.store-card-text b { font: 700 12.5px/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.store-card-go { display: none; }
.account-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  transition: background-color var(--t-base) ease;
}
.account-row:hover { background: var(--surface); }
.account-row-name { display: none; }
.sidenav-powered { display: none; }

/* ==========================================================================
   Buttons, links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-md);
  font: 700 17px/1.2 var(--font-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) ease, background-color var(--t-base) ease, box-shadow var(--t-base) ease, color var(--t-base) ease;
  -webkit-user-select: none;
  user-select: none;
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }
.btn .icon { flex: none; }
.btn-primary { background: var(--amber); color: var(--ink); box-shadow: var(--shadow-amber); }
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--amber-press); }
.btn-secondary { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-1); }
.btn-secondary:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--ink-4), var(--shadow-1); }
.btn-soft { background: var(--surface); color: var(--ink); }
.btn-soft:hover:not(:disabled) { background: #E1E6E9; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover:not(:disabled) { background: #1F292E; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--red-press); }
.btn-danger-soft { background: var(--red-tint); color: var(--red-press); }
.btn-danger-soft:hover:not(:disabled) { background: #F6D3DE; }
.btn-danger-soft .icon { fill: currentColor; }  /* a full square: stop */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface);
  color: var(--ink-3);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-block { width: 100%; }
.btn-grow { flex: 1 1 auto; }
.btn-sm { min-height: 44px; padding: 0 16px; gap: 8px; font-size: 16px; border-radius: var(--r-sm); }
.btn-lg { min-height: 56px; font-size: 18px; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy .icon { animation: spin .8s linear infinite; }

.iconbtn {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: background-color var(--t-base) ease, transform var(--t-fast) ease;
}
.iconbtn-soft { background: var(--paper); box-shadow: var(--shadow-1); }
.iconbtn:hover:not(:disabled) { background: rgba(38, 50, 56, .07); }
.iconbtn-soft:hover:not(:disabled) { background: var(--surface); }
.iconbtn:active:not(:disabled) { transform: scale(.92); }
.iconbtn:disabled { color: #B0BEC5; background: transparent; box-shadow: none; cursor: not-allowed; }

.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--blue);
  font: 700 16px/1.2 var(--font-ui);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--blue-press); }

/* ==========================================================================
   Fields and controls
   ========================================================================== */

.form-row { display: flex; flex-direction: column; gap: 8px; }
.field-label { display: inline-flex; align-items: center; gap: 8px; font: 700 15.5px/1.3 var(--font-ui); color: var(--ink-2); }
.field-hint { font-size: 14.5px; line-height: 1.4; color: var(--ink-3); }
.field {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.35 var(--font-ui);
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
  appearance: none;
  -webkit-appearance: none;
}
.field::placeholder { color: var(--ink-3); opacity: 1; }
.field:hover { border-color: var(--ink-4); }
.field:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 4px rgba(38, 50, 56, .08); }
.field:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.field-lg { font-size: 20px; font-weight: 700; min-height: 60px; }
textarea.field { resize: vertical; min-height: 96px; }
.field-with-btn { position: relative; display: flex; align-items: center; }
.field-with-btn .field { padding-right: 64px; }
.field-with-btn .iconbtn { position: absolute; right: 6px; }
.field-with-btn .iconbtn.mic { background: var(--amber); color: var(--ink); width: 48px; height: 48px; right: 6px; box-shadow: var(--shadow-amber); }
.inline-field { display: flex; gap: 8px; }
.inline-field .field { flex: 1; min-width: 0; }

.search { position: relative; }
.search .search-field { padding-left: 48px; border-radius: var(--r-pill); min-height: 50px; border-color: transparent; background: var(--paper); box-shadow: var(--shadow-1); }
.search .search-field:focus { border-color: var(--ink); }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }

.warn { font: 700 15px/1.35 var(--font-ui); color: var(--err-text); }
.warn:empty { display: none; }

/* A switch inside a button[role=switch] (the whole row is the control). */
.switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--ink-4);
  transition: background-color var(--t-base) ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .28s var(--ease-spring), background-color var(--t-base) ease;
}
[aria-checked="true"] .switch { background: var(--ink); }
[aria-checked="true"] .switch::after { transform: translateX(20px); background: var(--amber); }

.switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-align: left;
  transition: background-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.switch-row:hover { box-shadow: var(--shadow-2); }
.switch-row .switch-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); }
.switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.switch-text b { font: 700 16.5px/1.25 var(--font-ui); }
.switch-text span { font-size: 14.5px; color: var(--ink-3); line-height: 1.35; }
.switch-row[aria-checked="true"] { background: var(--amber-tint); box-shadow: inset 0 0 0 1.5px var(--amber-line); }
.switch-row[aria-checked="true"] .switch-icon { background: var(--amber); color: var(--ink); }

/* Segmented control: tabs of the offer, schedule mode, filters. */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface);
}
.segmented > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  font: 700 15.5px/1.1 var(--font-ui);
  transition: color var(--t-base) ease, background-color var(--t-base) ease;
}
.segmented > button:hover { color: var(--ink); }
.segmented > button[aria-selected="true"], .segmented > button[aria-checked="true"], .segmented > button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(38, 50, 56, .1), 0 2px 8px rgba(38, 50, 56, .08);
  animation: seg-in .24s var(--ease-out);
}
.segmented .icon { flex: none; }

/* Choices: the adjustments' options, units, presets. */
.choices { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.choice {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: 700 15.5px/1.15 var(--font-ui);
  text-align: center;
  transition: background-color var(--t-base) ease, box-shadow var(--t-base) ease, color var(--t-base) ease, transform var(--t-fast) ease;
}
.choice:hover { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.choice:active { transform: scale(.97); }
.choice small { font: 400 13.5px/1.2 var(--font-ui); color: var(--ink-3); }
.choice .icon { flex: none; }
.choice-row { flex-direction: row; gap: 6px; }
.choice[aria-pressed="true"], .choice[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.choice[aria-pressed="true"] small { color: #CFD8DC; }

/* Chips: examples, filters. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: 700 15px/1.1 var(--font-ui);
  white-space: nowrap;
  transition: background-color var(--t-base) ease, box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.chip:active { transform: scale(.96); }
.chip .icon { flex: none; color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.chip[aria-pressed="true"] .icon { color: var(--amber); }
.chip-count { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-count { color: #CFD8DC; }

/* Static tags (a version's changes) and badges. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: 700 13.5px/1.2 var(--font-ui);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--amber-tint);
  color: var(--amber-text);
  font: 700 12.5px/1.1 var(--font-ui);
  white-space: nowrap;
}
.badge .icon { flex: none; }
.badge-ok { background: var(--ok-tint); color: var(--ok-text); }
.badge-creative { background: var(--ink); color: #fff; }
.badge-creative .icon { color: var(--amber); }

.pill-ok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--amber-tint);
  box-shadow: inset 0 0 0 1.5px var(--amber-line);
  font: 700 16px/1.25 var(--font-ui);
  text-align: left;
}

.note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.45;
}
.note .icon { flex: none; margin-top: 1px; color: var(--ink-3); }

/* Live hint under a text field (cases filling as the user writes). */
.livehint { display: flex; align-items: center; gap: 8px; min-height: 24px; font: 700 14.5px/1.3 var(--font-ui); color: var(--ink-3); }
.livehint .icon { flex: none; }
.livehint.is-ok { color: var(--ok-text); }
.livehint.is-error { color: var(--err-text); }
.livehint.is-busy .icon { animation: twinkle 1s ease-in-out infinite; color: var(--amber-line); }

/* ==========================================================================
   Cards, sections, rows
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.card-title { display: flex; align-items: center; gap: 8px; font: 700 17px/1.25 var(--font-title); letter-spacing: -.01em; }
.card-title .icon { flex: none; color: var(--ink-3); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.section-head .section-title { min-width: 0; }
.section-title { display: flex; align-items: center; gap: 10px; font: 700 19px/1.25 var(--font-title); letter-spacing: -.015em; }
.section-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 4px;
  color: var(--blue);
  font: 700 15.5px/1 var(--font-ui);
  text-decoration: none;
}
.section-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.eyebrow { font: 700 12.5px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.rows { display: flex; flex-direction: column; padding: 4px 0; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); overflow: hidden; }
.rows > li + li { border-top: 1px solid var(--line-soft); }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 18px;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
  transition: background-color var(--t-base) ease;
}
button.row:hover { background: var(--amber-wash); }
button.row:active { background: var(--amber-tint); }
.row-label { width: 70px; flex: none; font: 700 12.5px/1.2 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.row-value { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font: 700 18px/1.3 var(--font-ui); overflow-wrap: anywhere; }
.row-value small { font: 400 14.5px/1.3 var(--font-ui); color: var(--ink-3); }
.row-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--ink-2); }

/* ==========================================================================
   Task flows: top bar with steps, cases column, work area, sticky dock
   ========================================================================== */

.flow { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.flowbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-top: env(safe-area-inset-top);
}
.flowbar-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "back title right";
  align-items: center;
  gap: 6px 12px;
  max-width: var(--maxw);
  min-height: 60px;
  margin: 0 auto;
  padding: 8px max(var(--gutter), env(safe-area-inset-right)) 8px max(var(--gutter), env(safe-area-inset-left));
}
.flowbar-in.has-steps { grid-template-areas: "back title right" "steps steps steps"; padding-bottom: 12px; }
.flowbar-back { grid-area: back; }
.flowbar-title { grid-area: title; min-width: 0; font: 700 18px/1.2 var(--font-title); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flowbar-steps { grid-area: steps; }
.flowbar-right { grid-area: right; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.psteps { display: flex; align-items: center; gap: 8px; }
.pstep { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--ink-3); font: 700 13.5px/1 var(--font-ui); white-space: nowrap; }
.pstep::after { content: ""; flex: 1; min-width: 8px; height: 2px; border-radius: 2px; background: var(--line); transition: background-color var(--t-slow) ease; }
.pstep:last-child { flex: 0 0 auto; }
.pstep:last-child::after { display: none; }
.pstep-dot {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink-3);
  font: 700 12.5px/1 var(--font-ui);
}
.pstep.is-done, .pstep.is-current { color: var(--ink); }
.pstep.is-done .pstep-dot { background: var(--ink); color: #fff; box-shadow: none; }
.pstep.is-done::after { background: var(--ink); }
.pstep.is-current .pstep-dot { background: var(--amber); color: var(--ink); box-shadow: 0 0 0 4px var(--amber-tint); animation: pop .5s var(--ease-spring) both; }

.flow-body { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: var(--maxw); margin: 0 auto; }
.flow-aside { padding: 14px var(--gutter) 0; }
.flow-aside:empty { display: none; }
@media (max-width: 767px) {
  .flow-aside.hide-phone { display: none; }  /* phones: the cases at the request step only */
}
@media (min-width: 768px) {
  .phone-only { display: none !important; }
}
.work { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 18px var(--gutter) 28px;
  animation: panel-in .3s var(--ease-out) both;
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-head-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.panel-title { font: 700 24px/1.2 var(--font-title); letter-spacing: -.02em; outline: none; }
.panel-sub { color: var(--ink-2); font-size: 16px; line-height: 1.4; }
.sub-title { font: 700 17px/1.3 var(--font-title); letter-spacing: -.01em; }

.dock {  /* the flow's main action: always in sight, above the on-screen keyboard too (--keyboard, main.js) */
  position: sticky;
  bottom: var(--keyboard, 0px);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px max(var(--gutter), calc((100% - var(--col)) / 2 + var(--gutter)))
    max(14px, calc(env(safe-area-inset-bottom) - var(--keyboard, 0px)));
  background: linear-gradient(to top, var(--bg) 62%, rgba(243, 245, 246, 0));
}
.dock > .btn { flex: 1 1 auto; }
.dock > .btn-soft, .dock > .btn-secondary { flex: 0 1 40%; }
.dock > .btn-secondary:only-child { flex: 1 1 auto; }
.count-badge { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 11px; background: var(--amber); color: var(--ink); font: 700 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Cases
   ========================================================================== */

.cases-head { display: none; }
.cases-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cases-single .cases-list { grid-template-columns: minmax(0, 1fr); }
.case {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  min-height: 72px;
  padding: 10px 10px 11px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line-soft), var(--shadow-1);
  color: var(--ink);
  text-align: left;
  transition: background-color var(--t-slow) ease, box-shadow var(--t-slow) ease, transform var(--t-fast) ease;
}
button.case:hover { box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-2); }
button.case:active { transform: scale(.97); }
div.case { cursor: default; }
.case-icon { display: none; }
.case-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.case-label {
  font: 700 11.5px/1.2 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-value {
  font: 700 14.5px/1.25 var(--font-ui);
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.case-tick {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--amber);
  box-shadow: 0 0 0 2px var(--bg);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--t-base) ease, transform .3s var(--ease-spring);
}
.case.is-filled { background: var(--amber-tint); box-shadow: inset 0 0 0 1.5px var(--amber-line); }
.case.is-filled .case-label { color: var(--amber-text); }
.case.is-filled .case-value { color: var(--ink); }
.case.is-filled .case-tick { opacity: 1; transform: none; }
.case.is-active { background: var(--amber); box-shadow: 0 6px 16px rgba(242, 157, 0, .35); }
.case.is-active .case-label, .case.is-active .case-value { color: var(--ink); }
.case.pop { animation: case-pop .55s var(--ease-spring) both; }
.case.is-empty { background: rgba(255, 255, 255, .6); box-shadow: none; outline: 1.5px dashed var(--line); outline-offset: -1.5px; }
button.case.is-empty:hover { background: var(--amber-wash); box-shadow: none; outline-color: var(--amber-line); }
.case-empty { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.case-add { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--amber-soft); color: var(--amber-text); }
div.case .case-empty { font-weight: 400; font-size: 14.5px; }

.counter { display: inline-flex; align-items: center; gap: 6px; font: 700 16px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.counter-arc { transition: stroke-dashoffset .5s var(--ease-out); }
.counter.is-full svg { animation: pop .5s var(--ease-spring); }

/* ==========================================================================
   Studio surface, players, waveform, audio controls
   ========================================================================== */

.studio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 18px 18px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 171, 0, .14), transparent 55%),
    linear-gradient(160deg, #2E3D44 0%, var(--studio) 45%, var(--studio-deep) 100%);
  color: var(--studio-text);
  box-shadow: var(--shadow-studio);
  overflow: hidden;
  isolation: isolate;
}
.studio :focus-visible { outline-color: var(--amber); }

.player { display: flex; flex-direction: column; gap: 14px; }
.player-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.player-sub { font: 700 13px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.player-title { font: 700 22px/1.2 var(--font-title); letter-spacing: -.02em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.player-wave { position: relative; height: 72px; cursor: pointer; touch-action: none; border-radius: 10px; }
.player-wave:focus-within { outline: 3px solid var(--amber); outline-offset: 4px; }
.player-wave-bars { position: absolute; inset: 0; }
.player-wave .seek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.player-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.player-time { font: 700 15px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--studio-text-2); }
.player-time-end { text-align: right; }

.wave { position: relative; width: 100%; height: 100%; }
.wave-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wave-base path { fill: rgba(255, 255, 255, .22); }
.wave-played path { fill: var(--amber); }
.wave-played { clip-path: inset(0 100% 0 0); }
.wave.is-loading .wave-layer { animation: wave-breathe 1.4s ease-in-out infinite; transform-origin: center; }
.wave.is-real .wave-layer { animation: wave-in .5s var(--ease-out) both; transform-origin: center; }
.player-wave.is-seeking .wave-played path { fill: #FFC24D; }

.playbtn {
  width: 60px;
  height: 60px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(255, 171, 0, .35);
  transition: transform var(--t-fast) ease, background-color var(--t-base) ease;
}
.playbtn:hover { background: #FFB829; }
.playbtn:active { transform: scale(.93); }
.playbtn-hero { width: 68px; height: 68px; }
.player.is-playing .playbtn-hero { animation: glow 2s ease-in-out infinite; }

/* Version chips on the studio surface. */
.vchips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px; scrollbar-width: none; }
.vchips::-webkit-scrollbar { display: none; }
.vchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: 700 15px/1 var(--font-ui);
  transition: background-color var(--t-base) ease, transform var(--t-fast) ease;
}
.vchip:hover { background: rgba(255, 255, 255, .16); }
.vchip:active { transform: scale(.95); }
.vchip .icon { color: var(--amber); }
.vchip[aria-pressed="true"] { background: var(--amber); color: var(--ink); }
.vchip[aria-pressed="true"] .icon { color: var(--ink); }

.studio-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--studio-line); }
.heard { display: inline-flex; align-items: center; gap: 8px; font: 700 14.5px/1.3 var(--font-ui); color: var(--studio-text-2); }
.heard .icon { flex: none; }
.heard.is-ok { color: #7EE2A8; }

/* Mini players (lists) and audio pills (recordings). */
.miniplay {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  transition: transform var(--t-fast) ease, background-color var(--t-base) ease;
}
.miniplay:hover { background: #FFB829; }
.miniplay:active { transform: scale(.92); }
.miniplay-lg { width: 60px; height: 60px; }
.miniplay-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.miniplay-ring circle { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; opacity: 0; transition: opacity var(--t-base) ease; }
.miniplay.is-playing .miniplay-ring circle { opacity: 1; }
.miniplay-icon { display: grid; place-items: center; }
.miniplay.is-loading .miniplay-icon { animation: spin-fade .9s linear infinite; }

.audio-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 16px 0 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: 700 15px/1 var(--font-ui);
  overflow: hidden;
  transition: box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
.audio-pill:hover { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.audio-pill:active { transform: scale(.97); }
.audio-pill .miniplay-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--amber); }
.audio-pill-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.audio-pill-bar i { display: block; height: 100%; background: var(--amber-line); transform: scaleX(0); transform-origin: left; }
.audio-pill.is-loading .miniplay-icon { animation: spin-fade .9s linear infinite; }

/* Equalizer bars: recording level, production in progress, live broadcast. */
.eq { display: flex; align-items: center; justify-content: center; gap: 5px; height: 56px; }
.eq i {
  display: block;
  width: 6px;
  height: calc(100% * var(--h, 1));
  border-radius: 3px;
  background: var(--amber);
  transform: scaleY(.2);
  transform-origin: center;
  transition: transform .08s linear;
}
.eq.is-idle i { transform: scaleY(.16); }
.eq.is-busy i { animation: eq 1.1s ease-in-out infinite; }
.eq.is-busy i:nth-child(2n) { animation-delay: -.25s; }
.eq.is-busy i:nth-child(3n) { animation-delay: -.5s; }
.eq.is-busy i:nth-child(5n) { animation-delay: -.8s; }
.eq.is-busy i:nth-child(7n) { animation-delay: -.35s; }
.eq-mini { height: 14px; gap: 2px; }
.eq-mini i { width: 3px; border-radius: 2px; }

/* Karaoke lines of the announcement (the announcement's own words: Knile). */
.lyrics { display: flex; flex-direction: column; gap: 12px; font: 400 19px/1.5 var(--font-editorial); color: var(--ink-3); }
.line { position: relative; padding: 2px 0 2px 16px; transition: color var(--t-slow) ease; }
.line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 2px;
  background: var(--amber);
  transform: scaleY(0);
  transition: transform var(--t-slow) var(--ease-out);
}
.lyrics:not(.is-live) .line, .line.is-done { color: var(--ink-2); }
.line.is-now { color: var(--ink); }
.line.is-now::before { transform: none; }
.lyrics mark { background: none; color: inherit; font-weight: 600; box-shadow: inset 0 -.36em 0 var(--amber-soft); border-radius: 2px; transition: background-color var(--t-slow) ease, box-shadow var(--t-slow) ease; }
.line.is-now mark { background: var(--amber); box-shadow: none; padding: 0 2px; }
.speaker { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font: 700 12.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.speaker i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font: 700 11px/1 var(--font-ui); font-style: normal; letter-spacing: 0; }
.spk-0 i { background: var(--amber); color: var(--ink); }
.spk-1 i { background: var(--blue); color: #fff; }
.spk-2 i { background: var(--red); color: #fff; }
.spk-3 i { background: var(--ink); color: #fff; }
.chime-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--blue-tint);
  color: var(--blue);
  font: 700 12.5px/1 var(--font-ui);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ==========================================================================
   Dialogs: bottom sheets on phones, centred from tablet width
   ========================================================================== */

.dialog {
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  margin: auto 0 0;
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  border-radius: 26px 26px 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  overflow: auto;
  overscroll-behavior: contain;
}
.dialog[open] { animation: sheet-up .34s var(--ease-out) both; }
.dialog::backdrop { background: rgba(26, 35, 39, .5); animation: fade-in .25s ease both; }
.dialog.is-closing { animation: sheet-down .22s ease-in both; }
.dialog.is-closing::backdrop { animation: fade-out .22s ease-in both; }
.sheet-grip { display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--line); }
.dialog-in { display: flex; flex-direction: column; gap: 14px; padding: 6px 20px 22px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.dialog-title { font: 700 20px/1.25 var(--font-title); letter-spacing: -.015em; }
.dialog-head .iconbtn-soft { background: var(--surface); box-shadow: none; }
.dialog-body { display: flex; flex-direction: column; gap: 14px; }
.dialog-text { font-size: 16.5px; color: var(--ink-2); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dialog-actions .btn { flex: 1 1 140px; }

.account-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 8px; }
.account-head p { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-head b { font: 700 18px/1.2 var(--font-title); }
.account-head span { color: var(--ink-3); font-size: 15px; }
.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  font: 700 17px/1.2 var(--font-ui);
  text-align: left;
  transition: background-color var(--t-base) ease;
}
.menu-item:hover { background: var(--bg); }
.menu-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--ink-2); }
.menu-go { margin-left: auto; color: var(--ink-3); }
.account-foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.menu-item.is-danger { color: var(--err-text); }
.menu-item.is-danger .menu-icon { background: var(--err-tint); color: var(--err-text); }

/* A form in a dialog: forgotten password, one's password, a new account. */
.dialog-form { display: flex; flex-direction: column; gap: 16px; }
.dialog-form .switch-row { box-shadow: inset 0 0 0 1.5px var(--line-soft); }
.link-field { font-size: 14.5px; }
.login-forgot { align-self: center; }

/* Administration: the accounts. */
.admin-tools { display: flex; justify-content: flex-end; }
.accounts { display: flex; flex-direction: column; gap: 10px; }
.account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 10px 14px 14px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.account-card.is-disabled { opacity: .62; }
.account-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.account-card-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.account-card-name b { font: 700 17px/1.25 var(--font-title); }
.account-card-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: 15px; }
.account-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink-3); font-size: 14px; }
.account-card .state-pill.is-active { color: var(--ok-text); }
.account-card .state-pill.is-invited { color: var(--amber-text); }
.account-card .state-pill.is-disabled { color: var(--ink-3); }

.store-list, .voice-list { display: flex; flex-direction: column; gap: 6px; }
.store-item, .voice-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 14px 8px 8px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  text-align: left;
  transition: background-color var(--t-base) ease;
}
.store-item:hover, .voice-item:hover { background: var(--bg); }
.store-item.is-current, .voice-item[aria-pressed="true"] { background: var(--amber-tint); }
.store-item.is-busy { opacity: .6; }
.store-item-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--ink-2); }
.store-item.is-current .store-item-icon { background: var(--amber); color: var(--ink); }
.store-item-text, .voice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.store-item-text b, .voice-text b { font: 700 16.5px/1.25 var(--font-ui); }
.store-item-text span, .voice-text span { font-size: 14.5px; color: var(--ink-3); }
.store-item-badge { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 700 13px/1 var(--font-ui); color: var(--amber-text); }
.empty-line { color: var(--ink-3); text-align: center; padding: 12px 0; }
.dialog-stores .search .search-field { background: var(--bg); box-shadow: none; }

.dialog-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: #0F1518;
  color: #fff;
}
.dialog-lightbox[open] { animation: fade-in .22s ease both; }
.dialog-lightbox.is-closing { animation: fade-out .2s ease-in both; }
.dialog-lightbox .sheet-grip { display: none; }
.dialog-lightbox .dialog-in { height: 100%; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.dialog-lightbox .dialog-title { font: 700 16px/1.3 var(--font-ui); color: #fff; }
.dialog-lightbox .dialog-head .iconbtn-soft { background: rgba(255, 255, 255, .14); color: #fff; }
.dialog-lightbox .dialog-body { flex: 1; min-height: 0; }
.dialog-lightbox :focus-visible { outline-color: var(--amber); }
.lightbox { height: 100%; display: grid; place-items: center; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; animation: pop-in .3s var(--ease-out) both; }

/* ==========================================================================
   Toast, loading, empty and error states
   ========================================================================== */

.toast {  /* at the bottom, above a flow's dock or the tab bar (and the keyboard): the top bar stays free */
  position: fixed;
  left: 50%;
  bottom: calc(var(--keyboard, 0px) + env(safe-area-inset-bottom) + 96px);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 20px 12px 14px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font: 700 15.5px/1.3 var(--font-ui);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translate(-50%, 16px) scale(.96);
  transition: opacity var(--t-base) ease, transform .3s var(--ease-out);
  pointer-events: none;
}
.toast .icon { flex: none; color: var(--amber); }
.toast[data-tone="ok"] .icon { color: #7EE2A8; }
.toast[data-tone="error"] { background: var(--err-text); }
.toast[data-tone="error"] .icon { color: #fff; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }


.skel-stack { display: flex; flex-direction: column; gap: 12px; }
.skel-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.skel-dot { width: 48px; height: 48px; flex: none; border-radius: 50%; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skel-lines i { display: block; height: 12px; border-radius: 6px; }
.skel-lines i:first-child { width: 70%; height: 14px; }
.skel-lines i:last-child { width: 45%; }
.skel-studio { height: 250px; border-radius: var(--r-xl); background: var(--studio) !important; }
.skel-block { height: 140px; border-radius: var(--r-lg); }
.skel-short { height: 80px; }
.skel-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skel-tile { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.skel-dot, .skel-lines i, .skel-studio, .skel-block, .skel-tile { position: relative; overflow: hidden; background: #E3E8EB; }
.skel-dot::after, .skel-lines i::after, .skel-studio::after, .skel-block::after, .skel-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: shimmer 1.3s ease-in-out infinite;
}
.skel-studio::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 16px; text-align: center; }
.empty-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink-3); box-shadow: var(--shadow-1); }
.empty-text { max-width: 26em; color: var(--ink-2); }

.error-block { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--err-tint); }
.error-block p { display: flex; gap: 10px; align-items: flex-start; color: var(--err-text); font-weight: 700; }
.error-block .icon { flex: none; }
.error-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The signature: "Propulsé par" in small capitals over the Audiadis AI logo. */
.powered { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font: 700 11.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.powered img { height: 22px; width: auto; }
.mock-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px dashed var(--ink-4);
  border-radius: var(--r-pill);
  font: 700 11.5px/1 var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ==========================================================================
   Login
   ========================================================================== */

.login { flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--paper); animation: fade-in .4s ease both; }
.login-brand {
  position: relative;
  padding: calc(28px + env(safe-area-inset-top)) 24px 32px;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255, 171, 0, .2), transparent 55%),
    linear-gradient(165deg, #2E3D44 0%, var(--studio) 50%, var(--studio-deep) 100%);
  color: #fff;
  overflow: hidden;
}
.login-brand::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgba(255, 255, 255, .05) 22px 24px);
  pointer-events: none;
}
.login-brand-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin: 0 auto; }
.login-logo { width: min(100%, 280px); height: auto; margin-bottom: 6px; }
.login-tagline { max-width: 22em; color: var(--studio-text-2); font-size: 16.5px; line-height: 1.45; }
.eq-brand { justify-content: flex-start; height: 60px; gap: 5px; margin-top: 14px; }
.eq-brand i { width: 6px; }
.login-panel {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 24px calc(20px + env(safe-area-inset-bottom));
  background: var(--paper);
}
.login-card { width: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.login-title { font: 700 26px/1.15 var(--font-title); letter-spacing: -.025em; }
.login-lead { margin-top: -8px; color: var(--ink-2); }
.login-card .field { background: var(--bg); border-color: transparent; }
.login-card .field:focus { background: var(--paper); border-color: var(--ink); }
.form-error { padding: 12px 14px; border-radius: var(--r-sm); background: var(--err-tint); color: var(--err-text); font-weight: 700; }
.login-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--ink-3); }
.login-hint .icon { flex: none; margin-top: 1px; }
.login-foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin-top: auto; padding-top: 28px; }

/* ==========================================================================
   Shell pages
   ========================================================================== */

.page { flex: 1; display: flex; flex-direction: column; min-width: 0; animation: screen-in .34s var(--ease-out) both; }
.page-in { flex: 1; display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 1080px; margin: 0 auto; padding: 14px var(--gutter) 24px; }
.page-head { display: flex; flex-direction: column; gap: 4px; }
.page-title { font: 700 30px/1.1 var(--font-title); letter-spacing: -.03em; outline: none; }
.page-lead { min-height: 1.45em; color: var(--ink-3); font-size: 16px; }
.page-body { display: flex; flex-direction: column; gap: 22px; }
.page-foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px var(--gutter) 28px; }

/* ---------- home ---------- */

.home-hello { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.home-date { font: 700 13px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.home-title { font: 700 32px/1.08 var(--font-title); letter-spacing: -.035em; outline: none; }
.home-create { display: flex; flex-direction: column; gap: 12px; }
.create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.create-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 184px;
  padding: 16px;
  border-radius: var(--r-xl);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-2);
  transition: transform var(--t-fast) ease, box-shadow var(--t-base) ease;
}
.create-tile::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 16px, rgba(255, 255, 255, .22) 16px 18px);
  transition: transform .5s var(--ease-out);
}
.create-tile:hover { box-shadow: var(--shadow-3); }
.create-tile:hover::before { transform: scale(1.08); }
.create-tile:active { transform: scale(.97); }
.create-promo { background: var(--amber); color: var(--ink); }
.create-info { background: var(--blue); color: #fff; }
.create-info::before { background: repeating-radial-gradient(circle, transparent 0 16px, rgba(255, 255, 255, .1) 16px 18px); }
.create-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; }
.create-promo .create-icon { background: var(--paper); color: var(--ink); box-shadow: 0 4px 12px rgba(122, 80, 0, .2); }
.create-info .create-icon { background: rgba(255, 255, 255, .16); color: #fff; }
.create-text { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.create-text b { font: 700 20px/1.12 var(--font-title); letter-spacing: -.02em; }
.create-text span { font-size: 14.5px; line-height: 1.35; }
.create-info .create-text span { color: rgba(255, 255, 255, .92); }
.create-go { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; transition: transform var(--t-base) var(--ease-out); }
.create-promo .create-go { background: rgba(38, 50, 56, .1); }
.create-info .create-go { background: rgba(255, 255, 255, .16); }
.create-tile:hover .create-go { transform: translateX(3px); }

.home-cols { display: flex; flex-direction: column; gap: 22px; }
.prosp-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
a.prosp-card:hover { box-shadow: var(--shadow-2); }
a.prosp-card:active { transform: scale(.985); }
.prosp-card.is-loading { min-height: 148px; }
.prosp-card.is-loading .skel-tile { width: 76px; height: 112px; aspect-ratio: auto; border-radius: 10px; }
.prosp-card.is-loading .skel-lines { flex: 1; }
.prosp-covers { position: relative; width: 96px; height: 118px; flex: none; }
.prosp-covers.is-empty { width: 84px; height: 104px; display: grid; place-items: center; border-radius: 16px; background: var(--amber-tint); color: var(--amber-text); }
.prosp-cover { position: absolute; width: 70px; height: 112px; object-fit: cover; border-radius: 8px; background: var(--surface); box-shadow: 0 6px 16px rgba(38, 50, 56, .22); transition: transform .4s var(--ease-out); }
.prosp-cover.c0 { left: 0; top: 4px; z-index: 3; transform: rotate(-5deg); }
.prosp-cover.c1 { left: 24px; top: 0; z-index: 2; transform: rotate(6deg); }
.prosp-cover.c2 { left: 14px; top: 2px; z-index: 1; transform: rotate(1deg); }
a.prosp-card:hover .prosp-cover.c0 { transform: rotate(-9deg) translateX(-4px); }
a.prosp-card:hover .prosp-cover.c1 { transform: rotate(10deg) translateX(4px); }
.prosp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.prosp-count { font: 700 19px/1.2 var(--font-title); letter-spacing: -.015em; }
.prosp-sub { font-size: 14.5px; line-height: 1.35; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prosp-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--blue); font: 700 15.5px/1 var(--font-ui); }

.home-live { gap: 6px; }
.home-live .section-title { font-size: 17px; }
.onair { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--red); }
.onair::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: onair 1.8s ease-out infinite; }
.onair-sm { width: 8px; height: 8px; }
.live-list { display: flex; flex-direction: column; }
.live-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.live-item + .live-item { border-top: 1px solid var(--line-soft); }
.live-item .miniplay { z-index: 1; }
.live-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--ink); text-decoration: none; }
.live-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); }
.live-link:focus-visible { outline: none; }
.live-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.live-title { font: 700 16.5px/1.25 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-meta { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kind-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.kind-dot.kind-promo { background: var(--amber); }
.kind-dot.kind-info { background: var(--blue); }
.live-eq { flex: none; opacity: 0; transition: opacity var(--t-base) ease; }
.live-eq i, .eq-mini i { animation-play-state: paused; background: var(--amber-line); }
.is-playing .live-eq { opacity: 1; }
.is-playing .live-eq i { animation-play-state: running; }
.live-empty { display: flex; align-items: center; gap: 10px; padding: 8px 0 4px; color: var(--ink-3); }
.live-empty .icon { flex: none; }
.live-empty.is-error { flex-wrap: wrap; color: var(--err-text); font-weight: 700; }
.live-empty.is-error .linkbtn { min-height: 36px; }

/* ---------- Mes annonces ---------- */

.mine-tools { display: flex; flex-direction: column; gap: 12px; }
.filter-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ftab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 62px;
  padding: 8px 4px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background-color var(--t-base) ease, color var(--t-base) ease, box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
.ftab:hover { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.ftab:active { transform: scale(.96); }
.ftab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.ftab-count { font: 700 21px/1 var(--font-title); font-variant-numeric: tabular-nums; }
.ftab-label { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font: 700 13px/1.1 var(--font-ui); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftab[aria-selected="true"] .ftab-label { color: #CFD8DC; }
.mine-panel { outline: none; }
.ann-list { display: flex; flex-direction: column; gap: 10px; }
.ann-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px 14px 14px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-base) ease, transform var(--t-fast) ease;
  animation: card-in .36s var(--ease-out) both;
}
.ann-card:nth-child(2) { animation-delay: .03s; }
.ann-card:nth-child(3) { animation-delay: .06s; }
.ann-card:nth-child(4) { animation-delay: .09s; }
.ann-card:nth-child(n+5) { animation-delay: .12s; }
.ann-card:hover { box-shadow: var(--shadow-2); }
.ann-card.is-playing, .offer-card.is-playing { box-shadow: inset 0 0 0 2px var(--amber), var(--shadow-2); }
.ann-kind { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; }
.ann-kind.kind-promo { background: var(--amber-tint); color: var(--amber-text); }
.ann-kind.kind-info { background: var(--blue-tint); color: var(--blue); }
.ann-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ann-link { color: var(--ink); text-decoration: none; }
.ann-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ann-link:focus-visible { outline: none; }
.ann-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.ann-title { font: 700 17px/1.25 var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ann-offer { font-size: 15px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 14px; color: var(--ink-3); }
.ann-dates { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.ann-dates .icon { flex: none; }
.state-pill { display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px/1 var(--font-ui); color: var(--ink-3); }
.state-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-4); }
.state-pill.state-en_cours { color: var(--red-press); }
.state-pill.state-en_cours .state-dot { background: var(--red); }
.state-pill.state-en_cours .state-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: onair 1.8s ease-out infinite; }
.state-pill.state-a_venir { color: var(--blue); }
.state-pill.state-a_venir .state-dot { background: var(--blue); }
.state-pill.state-brouillon { color: var(--amber-text); }
.state-pill.state-brouillon .state-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--amber-line); }
.ann-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; }
/* Stop: a red round button with a full square (an empty square reads as a checkbox). */
.ann-stop { width: 40px; height: 40px; margin-left: 4px; background: var(--red-tint); color: var(--red-press); }
.ann-stop .icon { fill: currentColor; }
.ann-stop:hover:not(:disabled) { background: #F6D3DE; }

/* ---------- Prospectus ---------- */

.prosp-filters { margin-top: -6px; }
.prosp-filters .chip { flex: none; }
.catalogue { display: flex; flex-direction: column; gap: 14px; }
.catalogue + .catalogue { margin-top: 18px; }
.catalogue-head { display: flex; align-items: center; gap: 14px; }
.catalogue-cover {
  width: 60px;
  height: 96px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(38, 50, 56, .2);
  transition: transform var(--t-base) var(--ease-out);
}
.catalogue-cover img { width: 100%; height: 100%; object-fit: cover; }
button.catalogue-cover:hover { transform: rotate(-3deg) scale(1.03); }
.catalogue-cover.is-empty { display: grid; place-items: center; color: var(--ink-3); box-shadow: none; }
.catalogue-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.catalogue-title { font: 700 20px/1.2 var(--font-title); letter-spacing: -.02em; }
.catalogue-sub { font-size: 14.5px; color: var(--ink-3); }
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow var(--t-base) ease, transform var(--t-fast) ease;
  animation: card-in .36s var(--ease-out) both;
}
.offer-card:hover { box-shadow: var(--shadow-2); }
.offer-card:active:not(:has(.miniplay:active)) { transform: scale(.98); }
.offer-media { position: relative; aspect-ratio: 4 / 3; background: #F7F8F9; overflow: hidden; }
.offer-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.offer-card:hover .offer-media img { transform: scale(1.05); }
.offer-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-4); }
.offer-badge { position: absolute; top: 8px; right: 8px; z-index: 1; }
.offer-play { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
.offer-play .miniplay { box-shadow: 0 4px 14px rgba(38, 50, 56, .3); }
.offer-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 14px; }
.offer-link { color: var(--ink); text-decoration: none; }
.offer-link::after { content: ""; position: absolute; inset: 0; }
.offer-link:focus-visible { outline: none; }
.offer-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-lg); }
.offer-title { font: 700 15.5px/1.25 var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.offer-deal {
  align-self: flex-start;
  max-width: 100%;
  font: 700 15px/1.35 var(--font-ui);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.offer-deal span { box-shadow: inset 0 -.42em 0 var(--amber-soft); }
.offer-dates { font-size: 13.5px; line-height: 1.3; color: var(--ink-3); }

.crop-hero { display: flex; flex-direction: column; gap: 10px; }
.customize { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.customize .field-hint { flex: 1 1 180px; }
.crop-hero-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 160px;
  padding: 12px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow var(--t-base) ease;
}
button.crop-hero-media:hover { box-shadow: var(--shadow-2); }
.crop-hero-media img { max-width: 100%; max-height: 300px; object-fit: contain; border-radius: 10px; animation: fade-in .4s ease both; }
.crop-hero-media.is-empty { color: var(--ink-4); }
.media-zoom { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(38, 50, 56, .78); color: #fff; }
.crop-hero-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.origin-caption { display: inline-flex; align-items: center; gap: 6px; font: 700 14.5px/1.3 var(--font-ui); color: var(--ink-2); }
.origin-caption .icon { flex: none; color: var(--ink-3); }
.studio .badge-creative { background: rgba(255, 255, 255, .12); color: #fff; }
.studio-badge { position: absolute; top: 18px; right: 18px; z-index: 1; }

/* ==========================================================================
   Promotion: composer, capture modes, validation
   ========================================================================== */

.composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 12px;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--t-base) ease;
}
.composer:focus-within { box-shadow: 0 0 0 2px var(--amber-line), 0 0 0 7px rgba(255, 171, 0, .16), var(--shadow-2); }
.composer-input {
  width: 100%;
  min-height: 120px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 19px/1.45 var(--font-ui);
  resize: none;
}
.composer-input::placeholder { color: var(--ink-3); }
.composer-input:focus { outline: none; }
.composer-hint { padding-bottom: 2px; }
.composer-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.composer-tools-one { grid-template-columns: minmax(0, 300px); justify-content: center; }
.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font: 700 15px/1.1 var(--font-ui);
  text-decoration: none;
  transition: background-color var(--t-base) ease, transform var(--t-fast) ease;
}
.tool:hover { background: var(--surface); }
.tool:active { transform: scale(.96); }
.tool .icon { flex: none; }
.examples { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.examples .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
.examples .chips::-webkit-scrollbar { display: none; }
.examples-label { font: 700 13px/1.2 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.prosp-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
.prosp-banner:hover { box-shadow: var(--shadow-2); }
.prosp-banner:active { transform: scale(.985); }
.prosp-banner-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--amber-tint); color: var(--amber-text); }
.batch-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: transform var(--t-fast) ease;
  animation: card-in .35s var(--ease-out) both;
}
.batch-banner:active { transform: scale(.985); }
.batch-banner-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--amber); color: var(--ink); }
.batch-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.batch-banner-text b { font: 700 17px/1.25 var(--font-ui); }
.batch-banner-text span { font-size: 14.5px; color: #CFD8DC; }
.batch-banner .go { flex: none; color: var(--amber); }
.prosp-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prosp-banner-text b { font: 700 16.5px/1.25 var(--font-ui); }
.prosp-banner-text span { font-size: 14.5px; color: var(--ink-3); }
.go { flex: none; color: var(--ink-3); }

.source { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-soft); }
.source-thumb { width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: 10px; background: var(--surface); }
.source-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--ink-2); }
.source-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.source-text b { font: 700 14.5px/1.2 var(--font-ui); color: var(--ink-2); }
.source-text { flex: 1; }
.source-text span { font: italic 400 15.5px/1.35 var(--font-editorial); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.source-edit { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 700 14.5px/1 var(--font-ui); text-decoration: none; }
.source-edit:hover { background: #E1E6E9; }

.quote { font: italic 400 17px/1.5 var(--font-editorial); color: var(--ink); }
.quote-light { color: #fff; }

.idea-banner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #2E3D44, var(--studio) 60%, var(--studio-deep));
  color: #fff;
  box-shadow: var(--shadow-studio);
  animation: pop-in .4s var(--ease-out) both;
}
.idea-banner-text { display: flex; gap: 10px; align-items: flex-start; font: 700 16.5px/1.35 var(--font-ui); }
.idea-banner-text .icon { flex: none; color: var(--amber); }
.idea-banner .quote { padding-left: 32px; color: #ECEFF1; }
.idea-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 32px; }
.idea-banner-no { background: rgba(255, 255, 255, .12); color: #fff; }
.idea-banner-no:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.idea-banner :focus-visible { outline-color: var(--amber); }

.creative { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); overflow: hidden; transition: box-shadow var(--t-base) ease; }
.creative.is-on { box-shadow: inset 0 0 0 2px var(--amber-line), var(--shadow-2); }
.creative-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 80px;
  padding: 14px 16px;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}
.creative-art {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: conic-gradient(from 200deg, var(--amber), #FF7A45, var(--red), var(--blue), var(--amber));
  color: #fff;
  transition: transform .4s var(--ease-spring);
}
.creative-art .icon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.creative.is-on .creative-art { transform: rotate(-8deg) scale(1.05); }
.creative-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.creative-text b { font: 700 18px/1.2 var(--font-title); letter-spacing: -.015em; }
.creative-text span { font-size: 14.5px; color: var(--ink-3); }
.creative-idea { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; animation: panel-in .3s var(--ease-out) both; }
.creative-idea .field { min-height: 80px; background: var(--bg); border-color: transparent; }
.creative-idea .field:focus { background: var(--paper); border-color: var(--ink); }

/* ---------- recorder ---------- */

.rec {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px 0 8px;
  text-align: center;
}
.rec-lead { max-width: 30em; color: var(--ink-2); font-size: 16px; }
.rec-time { font: 700 44px/1 var(--font-title); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rec-status { font: 700 18px/1.3 var(--font-ui); }
.rec-hint { font-size: 15.5px; color: var(--ink-3); }
.rec-note { display: flex; align-items: center; gap: 6px; font: 700 14px/1.3 var(--font-ui); color: var(--warn-text); }
.rec-transcript { max-width: 24em; font: italic 400 21px/1.45 var(--font-editorial); }
.rec-done { display: flex; align-items: center; gap: 8px; font: 700 17px/1.2 var(--font-ui); color: var(--ok-text); }
.rec-unclear { display: flex; align-items: center; gap: 8px; font: 700 17px/1.2 var(--font-ui); color: var(--amber-text); }
.pill-ok.is-partial { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.rec-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--err-tint);
  color: var(--err-text);
  font: 700 16px/1.4 var(--font-ui);
  text-align: left;
}
.rec-error .icon { flex: none; }
.rec-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rec-text { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; text-align: left; }
.rec-orb {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(255, 171, 0, .45);
  transition: transform var(--t-fast) ease;
}
.rec-orb::before, .rec-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--amber);
  animation: ripple 2s ease-out infinite;
}
.rec-orb::after { animation-delay: 1s; }
.rec-orb:active { transform: scale(.94); }
.eq-rec { height: 64px; gap: 6px; }
.eq-rec i { width: 7px; border-radius: 4px; }

/* ---------- photo ---------- */

.viewfinder {
  position: relative;
  width: 100%;
  max-width: 440px;
  align-self: center;
  aspect-ratio: 4 / 5;
  max-height: min(46vh, 460px);
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #2E3D44, var(--studio-deep));
  overflow: hidden;
  box-shadow: var(--shadow-studio);
}
.vf-hint { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; color: var(--studio-text-2); font: 700 17px/1.35 var(--font-ui); text-align: center; }
.corner { position: absolute; z-index: 1; width: 40px; height: 40px; border: 4px solid var(--amber); pointer-events: none; }
.c1 { left: 18px; top: 18px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.c2 { right: 18px; top: 18px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.c3 { left: 18px; bottom: 18px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.c4 { right: 18px; bottom: 18px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.vf-status { justify-content: center; }
.shutter-row { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shutter {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transition: transform var(--t-fast) ease;
}
.shutter span { width: 60px; height: 60px; border-radius: 50%; background: var(--amber); box-shadow: 0 4px 12px rgba(255, 171, 0, .45); }
.shutter:active { transform: scale(.92); }
.shutter-label { font: 700 16px/1.2 var(--font-ui); }

/* ---------- photo or PDF: the camera in the frame, then every promotion framed on the page ---------- */

:root { --shot-h: min(58vh, 620px); }  /* the picture and its frames above the dock, on a phone */

.viewfinder.is-live { display: block; width: fit-content; max-width: 100%; aspect-ratio: auto; max-height: none; background: #0B1114; }
.vf-video { display: block; max-width: 100%; max-height: var(--shot-h); width: auto; height: auto; object-fit: contain; }
.viewfinder.is-live:not(.is-on) .vf-video { width: min(calc(100vw - 32px), 440px); aspect-ratio: 3 / 4; }
.viewfinder.is-live .c3, .viewfinder.is-live .c4 { bottom: 116px; }
.vf-tip {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 36px);
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(12, 18, 21, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 700 13.5px/1.3 var(--font-ui);
  text-align: center;
}
.vf-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 26px 22px 20px;
  background: linear-gradient(to top, rgba(10, 15, 18, .7), rgba(10, 15, 18, 0));
}
.vf-controls .shutter { grid-column: 2; border-color: #fff; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vf-controls .shutter:disabled { opacity: .5; }
.vf-side {
  grid-column: 1;
  justify-self: start;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 14px;
  background: rgba(12, 18, 21, .45);
  color: #fff;
}
.vf-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.vf-flash.is-on { animation: vf-flash .5s ease-out; }

/* The page as photographed: the frame fits the picture, so a block in thousandths is a percentage of it. */
.shot {
  position: relative;
  width: fit-content;
  max-width: 100%;
  align-self: center;
  margin-inline: auto;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--studio-deep);
  box-shadow: var(--shadow-studio);
  isolation: isolate;
  touch-action: manipulation;
}
.shot + .shot { margin-top: 6px; }
.shot-img { display: block; max-width: 100%; max-height: var(--shot-h); width: auto; height: auto; user-select: none; -webkit-user-select: none; transition: filter .7s ease; }
.shot.is-reading .shot-img { filter: saturate(.45) brightness(.72) contrast(1.05); }
.shot-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 35%, transparent 85%);
  mask-image: radial-gradient(circle at 50% 45%, #000 35%, transparent 85%);
  animation: fade-in .6s ease both;
}
.shot-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  background: linear-gradient(to bottom, rgba(255, 171, 0, 0), rgba(255, 171, 0, .07) 55%, rgba(255, 171, 0, .4) 94%, rgba(255, 221, 140, .95) 100%);
  filter: drop-shadow(0 2px 10px rgba(255, 171, 0, .75));
  mix-blend-mode: screen;
  animation: shot-beam 2.1s cubic-bezier(.5, 0, .5, 1) infinite;
}
.shot-dim { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.shot-veil { fill: rgba(10, 15, 18, .64); }
.shot.is-intro .shot-dim { animation: fade-in .6s ease .1s both; }

/* A promotion's frame: viewfinder corners, white until chosen, amber once chosen. */
.zone {
  --c: #fff;
  position: absolute;
  z-index: 2;
  padding: 0;
  overflow: hidden;
  border: 2.5px solid #fff;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .04);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-size: 22px 5px, 5px 22px, 22px 5px, 5px 22px, 22px 5px, 5px 22px, 22px 5px, 5px 22px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
  background-origin: border-box;
  box-shadow: 0 0 0 1.5px rgba(10, 15, 18, .55), inset 0 0 0 1px rgba(10, 15, 18, .18), 0 0 22px rgba(255, 255, 255, .4);
  filter: drop-shadow(0 1px 3px rgba(10, 15, 18, .45));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .35s ease, transform .15s ease;
}
.zone:active { transform: scale(.985); }
.zone.is-on {
  --c: var(--amber);
  border-color: var(--amber);
  background-color: rgba(255, 171, 0, .2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 4px rgba(255, 171, 0, .28), 0 0 34px rgba(255, 171, 0, .65);
}
.zone-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  font: 700 14px/1 var(--font-ui);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: background-color .2s ease, transform .3s var(--ease-spring);
}
.zone.is-on .zone-badge { background: var(--amber); transform: scale(1.1); }
.shot.is-intro .zone { animation: zone-in .65s var(--ease-spring) var(--d) both; }
.shot.is-intro .zone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: zone-sweep .85s ease calc(var(--d) + .15s) both;
}
.shot.is-intro .zone-badge { animation: badge-pop .45s var(--ease-spring) calc(var(--d) + .3s) both; }
.shot.is-idle .zone:not(.is-on) { animation: zone-breathe 2.6s ease-in-out infinite; }
.zone.is-tapped { animation: zone-ring .55s ease-out; }

.shot-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.shot-head .sub-title { display: flex; align-items: center; gap: 8px; }
.shot-head .sub-title svg { color: var(--amber-line); }
.shot-hint { margin-top: -10px; color: var(--ink-3); font-size: 15px; }
.pick-toggle { width: 100%; border: 2px solid transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.pick-toggle.is-on { border-color: var(--amber); background: var(--amber-tint); box-shadow: var(--shadow-2); }
.pick-item { display: flex; flex-direction: column; border-radius: var(--r-lg); }
.pick-item.is-on { background: var(--amber-tint); box-shadow: inset 0 0 0 2px var(--amber), var(--shadow-2); }
.pick-item.is-on .pick-toggle { border-color: transparent; background: transparent; box-shadow: none; }
.pick-style { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px 48px; animation: pop-in .25s var(--ease-out) both; }
.pick-style button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--amber-line);
  font: 700 15px/1.1 var(--font-ui);
  transition: background-color var(--t-base) ease, color var(--t-base) ease;
}
.pick-style button .icon { flex: none; }
.pick-style button[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.pick-style button[aria-checked="true"] .icon { color: var(--amber); }
.pick-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.pick-all-label { font: 700 15px/1.2 var(--font-ui); color: var(--ink-2); white-space: nowrap; }
.pick-all-seg { flex: 1 1 auto; max-width: 260px; }
.pick-all-seg > button { font-size: 15px; }
.pick-num { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--studio); color: #fff; font: 700 13px/1 var(--font-ui); transition: background-color .2s ease, color .2s ease; }
.pick-toggle.is-on .pick-num { background: var(--amber); color: var(--ink); }
.pick-check { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; color: transparent; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .3s var(--ease-spring); }
.pick-toggle.is-on .pick-check { border-color: var(--amber); background: var(--amber); color: var(--ink); transform: scale(1.06); }
.progress.is-running i { width: 38%; transform: none; transition: none; animation: indeterminate 1.4s ease-in-out infinite; }

/* ---------- announcements prepared together ---------- */

.batch-list { display: flex; flex-direction: column; gap: 10px; }
.batch-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); animation: card-in .35s var(--ease-out) calc(var(--k, 0) * 70ms) both; }
.batch-link { color: var(--ink); text-decoration: none; }
.batch-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }  /* the whole card is the link */
.batch-link:focus-visible { outline: none; }
.batch-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.batch-card:has(.batch-link):hover { box-shadow: var(--shadow-2); }
.batch-go { flex: none; color: var(--ink-4); }
.batch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.batch-text b { font: 700 16px/1.25 var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.batch .prep-studio { gap: 6px; padding: 18px 18px 18px; }
.batch .eq-studio { height: 40px; margin-bottom: 6px; }
.batch-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.batch-state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 14px; }
.batch-card.is-ready .batch-state { color: var(--ink-2); font-weight: 700; }
.batch-card.is-approved .batch-state, .batch-card.is-scheduled .batch-state { color: var(--ok-text); font-weight: 700; }
.batch-card.is-error .batch-state { color: var(--err-text); }
.batch-progress { height: 6px; margin-top: 4px; }
.batch-actions { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 8px; }

/* An announcement of a batch, on its listen screen: where it is among them. */
.batch-bar { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.batch-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.batch-bar-text b { font: 700 16px/1.2 var(--font-ui); }
.batch-bar-text span { font-size: 14px; color: var(--ink-3); }
.batch-bar .iconbtn-soft { background: var(--bg); box-shadow: none; }

/* Their broadcast, one by one. */
.plan-list { display: flex; flex-direction: column; gap: 10px; }
.plan-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.plan-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plan-text b { font: 700 16px/1.25 var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plan-when { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.plan-when .icon { flex: none; margin-top: 1px; color: var(--ink-3); }
.plan-row .btn { flex: none; }
.plan-row.is-done { background: var(--ok-tint); box-shadow: inset 0 0 0 2px var(--ok), var(--shadow-1); }
.plan-row.is-failed { box-shadow: inset 0 0 0 2px var(--err-text), var(--shadow-1); }
.plan-result { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1.2 var(--font-ui); }
.plan-row.is-done .plan-result { color: var(--ok-text); }
.plan-row.is-failed .plan-result { color: var(--err-text); }
.dialog-plan .dialog-body { gap: 14px; }

/* ---------- prospectus import ---------- */

.filecard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.file-icon { width: 48px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--ink-2); }
.file-icon.is-pdf { background: var(--err-tint); color: var(--err-text); }
.file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-text span { font-size: 15px; color: var(--ink-3); }
.progress, .prep-progress { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.progress i, .prep-progress i { display: block; height: 100%; border-radius: 4px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.pick-list { display: flex; flex-direction: column; gap: 10px; }
.pick-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); animation: card-in .35s var(--ease-out) both; }
.pick-media { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--ink-4); overflow: hidden; }
.pick-media img { width: 100%; height: 100%; object-fit: cover; }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-text b { font: 700 16px/1.25 var(--font-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-offer { font-size: 15px; color: var(--ink-2); }
.pick-meta { font-size: 13.5px; color: var(--ink-3); }

/* ---------- case editors ---------- */

.offer-tabs { display: flex; }
.offer-tabs > button { flex: 1 1 auto; padding: 0 10px; font-size: 15px; }
.tabpanel { display: flex; flex-direction: column; gap: 14px; }
.price-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  min-height: 86px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-align: left;
  transition: box-shadow var(--t-base) ease;
}
.pf.is-on { box-shadow: inset 0 0 0 2.5px var(--ink), var(--shadow-2); }
.pf-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 700 12px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pf-label small { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.pf-value { font: 700 28px/1.1 var(--font-title); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-value .ph { color: #9FB0B8; font-size: 22px; }
.pf.is-on .pf-value::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 3px; vertical-align: -2px; background: var(--ink); animation: blink 1s step-end infinite; }
.pf-desktop { cursor: text; }
.pf-desktop:focus-within { box-shadow: inset 0 0 0 2.5px var(--ink), var(--shadow-2); }
.pf-input { display: flex; align-items: baseline; gap: 4px; width: 100%; font: 700 28px/1.1 var(--font-title); }
.pf-input input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.pf-input input:focus { outline: none; }
.pf-input input::placeholder { color: #9FB0B8; }
.units .choice { padding: 6px 4px; font-size: 15px; }
.keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: var(--r-xl); background: var(--surface); }
.keypad button {
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(38, 50, 56, .18);
  font: 700 25px/1 var(--font-title);
  transition: transform var(--t-fast) ease, background-color .08s ease;
}
.keypad button:active { transform: scale(.94); background: var(--amber-tint); }
.keypad .key-0 { grid-column: 1 / span 3; }
.keypad .key-ok { grid-column: 4; grid-row: 3 / span 2; height: auto; background: var(--amber); box-shadow: var(--shadow-amber); }
.keypad .key-ok:active { background: var(--amber-press); }
.keypad .key-ok:disabled { background: var(--paper); color: #B0BEC5; box-shadow: 0 1px 0 rgba(38, 50, 56, .18); }
.round {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: transform var(--t-fast) ease, background-color var(--t-base) ease;
}
.round:active:not(:disabled) { transform: scale(.92); }
.round:disabled { color: #B0BEC5; box-shadow: inset 0 0 0 1.5px var(--line-soft); cursor: not-allowed; }
.round.big { width: 68px; height: 68px; }
.stepper-val { flex: 1; font: 700 46px/1 var(--font-title); letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: center; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--shadow-1); }
.mini-steps { display: flex; flex-direction: column; gap: 10px; }
.mini-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.ms-label { font: 700 18px/1.2 var(--font-ui); }
.ms-ctrl { display: flex; align-items: center; gap: 8px; }
.ms-ctrl .round { width: 50px; height: 50px; background: var(--bg); box-shadow: none; }
.ms-val { min-width: 40px; text-align: center; font: 700 26px/1 var(--font-title); font-variant-numeric: tabular-nums; }

/* ---------- calendar ---------- */

.cal-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 12px 14px; border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--shadow-1); }
.cal-card > .sub-title, .cal-lead { padding: 0 6px; }
.cal-lead { font-size: 15px; color: var(--ink-3); }
.calendar { display: flex; flex-direction: column; gap: 8px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-head .iconbtn-soft { box-shadow: none; background: var(--bg); }
.cal-month { font: 700 17px/1.2 var(--font-title); letter-spacing: -.01em; text-align: center; }
.cal-grid, .cal-dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }
.dow { display: block; padding: 4px 0 6px; text-align: center; text-decoration: none; font: 700 12.5px/1 var(--font-ui); color: var(--ink-3); }
.cal-month-next { margin-top: 10px; padding: 10px 6px 4px; border-top: 1px solid var(--line-soft); }
.day {
  position: relative;
  height: 46px;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 16px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.day::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 0; right: 0; z-index: 0; background: transparent; }
.day.is-in::before { background: var(--amber-tint); }
.day.is-edge.is-start::before { left: 50%; background: var(--amber-tint); }
.day.is-edge.is-end::before { right: 50%; background: var(--amber-tint); }
.day.is-in.is-row-start::before { left: 3px; border-radius: 20px 0 0 20px; }
.day.is-in.is-row-end::before { right: 3px; border-radius: 0 20px 20px 0; }
.day.is-edge.is-start.is-row-end::before, .day.is-edge.is-end.is-row-start::before { display: none; }  /* the band goes on in the next row or month */
.day-num { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: background-color var(--t-base) ease, transform var(--t-fast) ease; }
.day:not(:disabled):hover .day-num { background: var(--bg); }
.day.is-in:not(:disabled):hover .day-num { background: var(--amber-soft); }
.day:active:not(:disabled) .day-num { transform: scale(.9); }
.day.is-start .day-num, .day.is-end .day-num { background: var(--amber); color: var(--ink); box-shadow: 0 3px 10px rgba(242, 157, 0, .4); animation: pop .35s var(--ease-spring); }
.day.is-start:hover .day-num, .day.is-end:hover .day-num { background: var(--amber) !important; }
.day:disabled { color: #A7B6BD; cursor: default; }
.day.is-today:not(.is-start):not(.is-end) .day-num { box-shadow: inset 0 0 0 2px var(--ink); }
.day-blank { pointer-events: none; }
.cal-hint { padding: 0 6px; text-align: center; font-size: 15px; color: var(--ink-2); }

/* "Du / Au": the two ends of a period as the stops of a journey, joined by a line; the end the next
   tap on the calendar sets is tinted. */
.range-card { position: relative; display: flex; flex-direction: column; padding: 6px; border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--shadow-1); }
.range-card::before { content: ""; position: absolute; left: 27px; top: 38px; bottom: 38px; width: 2px; border-radius: 2px; background: var(--line); }
.range-row { position: relative; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 6px 10px 6px 16px; border-radius: var(--r-lg); transition: background-color var(--t-base) ease; }
.range-row + .range-row { margin-top: 2px; }
.range-row.is-focus { background: var(--amber-tint); box-shadow: inset 0 0 0 2px var(--amber-line); }
.range-dot { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.range-row.is-focus .range-dot { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-tint), 0 0 0 5.5px var(--amber-line); }
.range-date { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 4px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; }
@media (hover: hover) { button.range-date:hover .range-value { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } }
.range-label { font: 700 12.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.range-row.is-focus .range-label { color: var(--amber-text); }
.range-value { font: 700 18px/1.2 var(--font-title); letter-spacing: -.01em; }
.range-value.is-empty { color: var(--ink-3); font-weight: 600; }
.range-time { flex: none; display: inline-flex; align-items: center; padding: 0 10px 0 14px; min-height: 48px; border-radius: 14px; background: var(--bg); cursor: pointer; transition: box-shadow var(--t-base) ease; }
.range-row.is-focus .range-time { background: var(--paper); }
.range-time:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.range-time .time-input { width: 5.4em; min-height: 44px; font-size: 20px; color: var(--ink); }

/* ==========================================================================
   Preparation
   ========================================================================== */

.prep { gap: 18px; }
.prep-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 14.5px/1.2 var(--font-ui); color: var(--studio-text); }
.prep-brand img { flex: none; height: 28px; width: auto; transform-origin: 45% 60%; }
.prep-brand.is-busy img { animation: brand-breathe 2.4s ease-in-out infinite; }
@keyframes brand-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 171, 0, 0)); }
  50% { transform: scale(1.07); filter: drop-shadow(0 0 10px rgba(255, 171, 0, .45)); }
}
.prep-studio { align-items: center; gap: 10px; padding: 30px 22px 24px; text-align: center; }
.eq-studio { height: 76px; gap: 5px; margin-bottom: 10px; }
.eq-studio i { width: 6px; }
.prep-title { font: 700 24px/1.2 var(--font-title); letter-spacing: -.02em; outline: none; }
.prep-lead { max-width: 24em; color: var(--studio-text-2); font-size: 16px; }
.prep-progress { align-self: stretch; margin-top: 12px; background: rgba(255, 255, 255, .12); }
.steps { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--shadow-1); }
.step-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 10px; border-radius: var(--r-md); color: var(--ink-3); font: 700 17px/1.3 var(--font-ui); transition: background-color var(--t-slow) ease, color var(--t-slow) ease; }
.step-mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--ink-4); }
.step-name { flex: 1; min-width: 0; }
.step-row.is-current { background: var(--amber-wash); color: var(--ink); }
.step-row.is-current .step-mark { background: var(--amber-soft); color: var(--ink); }
.step-row.is-done { color: var(--ink); }
.step-row.is-done .step-mark { background: var(--amber); color: var(--ink); animation: pop .45s var(--ease-spring) both; }
.step-spin { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 3px solid var(--amber); border-top-color: transparent; animation: spin .8s linear infinite; }
.prep-slow { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-2); font-size: 15.5px; text-align: center; }
.prep-slow .icon { flex: none; }

/* ==========================================================================
   Listen and adjust, announcement details
   ========================================================================== */

.panel-wide { max-width: var(--col); }
.listen-facts { margin-top: -8px; font: 700 15.5px/1.35 var(--font-ui); color: var(--ink-2); }
.listen { display: flex; flex-direction: column; gap: 18px; }
.listen-main, .listen-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.player-card { padding-bottom: 20px; }
.studio .miniplay-ring circle { stroke: #fff; }
.lyrics-card { gap: 16px; }

/* Historique: what generated the announcement and each version; folded under the player on phones. */
.origin-list { display: flex; flex-direction: column; gap: 8px; }
.origin-fold { gap: 0; padding: 0; }
.origin-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title chev" "sum chev"; align-items: center; gap: 2px 12px; min-height: 60px; padding: 12px 16px; list-style: none; cursor: pointer; border-radius: inherit; }
.origin-summary::-webkit-details-marker { display: none; }
.origin-summary .card-title { grid-area: title; }
.origin-sum { grid-area: sum; min-width: 0; padding-left: 28px; font-size: 14.5px; color: var(--ink-3); }
.origin-chev { grid-area: chev; color: var(--ink-3); transition: transform var(--t-base) ease; }
.origin-fold[open] .origin-chev { transform: rotate(180deg); }
.origin-fold > .origin-list { padding: 0 12px 12px; }
.aside-origin { margin-top: 18px; }
.origin-item { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--bg); transition: background-color var(--t-base) ease, box-shadow var(--t-base) ease; }
.origin-item.is-selected { background: var(--amber-tint); box-shadow: inset 0 0 0 1.5px var(--amber-line); }
.origin-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: left;
}
button.origin-head { cursor: pointer; }
.origin-v { min-width: 36px; height: 28px; padding: 0 8px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 700 13px/1 var(--font-ui); }
.origin-item.is-selected .origin-v { background: var(--amber); color: var(--ink); }
.origin-title { flex: 1; min-width: 0; font: 700 15.5px/1.3 var(--font-ui); }
.origin-flags { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.origin-heard { display: inline-flex; color: var(--ok-text); }
.origin-body { display: flex; flex-direction: column; gap: 10px; padding-left: 46px; }
.origin-body .quote { font-size: 16.5px; }
.origin-crop { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.origin-crop-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; flex: 1 1 160px; }
.media-thumb {
  position: relative;
  display: block;
  width: 188px;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform var(--t-fast) ease, box-shadow var(--t-base) ease;
}
.media-thumb img { width: 100%; height: 188px; object-fit: cover; }
.media-crop img { height: 150px; object-fit: contain; padding: 4px; }
.media-thumb:hover { box-shadow: var(--shadow-2); }
.media-thumb:active { transform: scale(.97); }
.media-thumb .media-zoom { right: 6px; bottom: 6px; width: 30px; height: 30px; }

/* Adjustments */
.adjust { display: flex; flex-direction: column; gap: 14px; }
.adjust .section-title { font-size: 18px; align-items: flex-start; }
.adjust .section-title .icon { flex: none; margin-top: 1px; color: var(--ink-3); }
.say-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  padding: 12px 16px 12px 12px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-align: left;
  transition: box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
.say-card:hover { box-shadow: var(--shadow-2); }
.say-card:active { transform: scale(.98); }
.say-icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--ink); box-shadow: var(--shadow-amber); }
.say-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.say-text b { font: 700 18px/1.2 var(--font-title); letter-spacing: -.015em; }
.say-text span { font-size: 14.5px; color: var(--ink-3); }
.mixer { display: flex; flex-direction: column; gap: 12px; }
.group { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); transition: box-shadow var(--t-base) ease, background-color var(--t-base) ease; }
.group.is-changed { box-shadow: inset 0 0 0 2px var(--amber-line), var(--shadow-1); }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.group-title { font: 700 13px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.changed-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--amber-tint); color: var(--amber-text); font: 700 12px/1.1 var(--font-ui); animation: pop-in .3s var(--ease-out) both; }

.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 4px; }  /* the women, then the men */
.group-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--ink-3); font-size: 15px; }
.group-empty .icon { flex: none; }
.group-empty .linkbtn { min-height: 36px; }
.av {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  font: 700 14px/1.2 var(--font-ui);
}
.av-circle {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: 700 16px/1 var(--font-ui);
  transition: background-color var(--t-base) ease, box-shadow var(--t-base) ease, transform var(--t-base) var(--ease-spring);
}
.av:hover .av-circle { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.av:active .av-circle { transform: scale(.92); }
.av[aria-pressed="true"] .av-circle { background: var(--ink); color: #fff; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--amber); }
.av-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-duo { justify-content: flex-start; gap: 12px; min-height: 60px; padding: 8px 14px; text-align: left; }
.av-pair { display: flex; flex: none; }
.av-pair i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--paper), inset 0 0 0 1.5px var(--line); color: var(--ink); font: 700 14px/1 var(--font-ui); font-style: normal; }
.av-pair i + i { margin-left: -10px; }
.av-duo[aria-pressed="true"] .av-pair i { background: var(--amber); box-shadow: 0 0 0 2px var(--ink); color: var(--ink); }
.av-duo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.av-duo-text b { font: 700 16px/1.2 var(--font-ui); }
.av-duo-text span { font: 400 14px/1.2 var(--font-ui); color: var(--ink-3); }
.av-duo[aria-pressed="true"] .av-duo-text span { color: #CFD8DC; }

.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 78px;
  padding: 10px 4px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink);
  font: 700 14.5px/1.2 var(--font-ui);
  transition: background-color var(--t-base) ease, box-shadow var(--t-base) ease, transform var(--t-fast) ease;
}
.level:hover { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.level:active { transform: scale(.96); }
.level-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.level-bars i { width: 7px; border-radius: 3px; background: var(--line); }
.level-bars i:nth-child(1) { height: 10px; }
.level-bars i:nth-child(2) { height: 18px; }
.level-bars i:nth-child(3) { height: 26px; }
.level-bars i.is-on { background: var(--ink-2); }
.level[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.level[aria-pressed="true"] .level-bars i { background: rgba(255, 255, 255, .25); }
.level[aria-pressed="true"] .level-bars i.is-on { background: var(--amber); }

.chars { display: flex; flex-direction: column; gap: 8px; }
.char {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 8px 12px 8px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
  transition: background-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.char:hover { background: var(--surface); }
.char.is-changed { box-shadow: inset 0 0 0 2px var(--amber-line); background: var(--amber-tint); }
.char-av i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font: 700 15px/1 var(--font-ui); font-style: normal; }
.char-av.spk-0 i { background: var(--amber); color: var(--ink); }
.char-av.spk-1 i { background: var(--blue); color: #fff; }
.char-av.spk-2 i { background: var(--red); color: #fff; }
.char-av.spk-3 i { background: var(--ink); color: #fff; }
.char-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.char-text b { font: 700 16.5px/1.2 var(--font-ui); }
.char-text > span { font-size: 15px; color: var(--ink-2); }
.char-text .badge { align-self: flex-start; margin-top: 3px; }
.restage { width: 100%; }

.status-card { gap: 10px; }
.status-card .state-pill { font-size: 14px; }
.status-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 4px; }
.status-actions .linkbtn { align-self: center; }

/* The adjustments in a sheet (phones): Le dire first, then the settings, the next version's button at hand. */
.dialog-adjust .dialog-body { gap: 12px; }
.dialog-adjust .adjust { gap: 12px; }
.dialog-adjust .say-card, .dialog-adjust .group, .dialog-adjust .fix .rows { background: var(--bg); box-shadow: none; }
.dialog-adjust .group .level:not([aria-pressed="true"]), .dialog-adjust .group .choice:not([aria-pressed="true"]) { background: var(--paper); }
.dialog-adjust .av-circle { background: var(--paper); }
.fix { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.fix .row { min-height: 56px; padding: 10px 14px; }
.fix .row-value { font-size: 16px; }
.sheet-dock {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 10px;
  margin: 2px -20px -22px;
  padding: 12px 20px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 78%, rgba(255, 255, 255, 0));
}
.sheet-dock > .btn-soft { flex: 0 1 40%; }
.status-text { display: flex; align-items: flex-start; gap: 10px; font: 700 17px/1.4 var(--font-ui); }
.status-text .icon { flex: none; color: var(--ink-3); }

/* ==========================================================================
   Scheduling and confirmation
   ========================================================================== */

.track-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.track-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.track-text b { font: 700 16.5px/1.25 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-text span { font-size: 14px; color: var(--ink-3); }
.seg-mode > button { min-height: 52px; font-size: 16px; }
.flash-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: var(--r-xl);
  background: var(--amber-tint);
  box-shadow: inset 0 0 0 1.5px var(--amber-line);
  animation: pop-in .3s var(--ease-out) both;
}
.flash-card p { font: 700 17px/1.4 var(--font-ui); }
.flash-icon { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--ink); box-shadow: var(--shadow-amber); }
.seg-together > button { min-height: 48px; padding: 4px 10px; font-size: 15px; line-height: 1.2; text-align: center; white-space: normal; }
.time-input {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 28px/1.1 var(--font-title);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.time-input:focus { outline: none; }

.done { align-items: stretch; gap: 18px; padding-top: 28px; }
.done-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.done-badge {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  margin: 12px 0 22px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(255, 171, 0, .45);
  animation: pop .6s var(--ease-spring) both;
}
.done-badge .icon { position: relative; z-index: 1; }
.done-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; animation: ring-out 2.4s ease-out 3 both; }
.done-ring:nth-child(2) { animation-delay: .4s; }
.done-ring:nth-child(3) { animation-delay: .8s; }
.done-title { font: 700 28px/1.15 var(--font-title); letter-spacing: -.025em; outline: none; }
.done-lead { max-width: 26em; color: var(--ink-2); }
.done-card { gap: 14px; padding: 16px 18px; }
.done-track { display: flex; align-items: center; gap: 14px; }
.done-track .track-text b { color: #fff; }
.done-track .track-text span { color: var(--studio-text-2); }
.done-track .live-eq i { background: var(--amber); }
.done-when { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--studio-line); font: 700 17px/1.35 var(--font-ui); }
.done-when .icon { flex: none; color: var(--amber); }
.done-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; }
.done-actions .linkbtn { align-self: center; }

/* ==========================================================================
   Information: editable text
   ========================================================================== */

.text-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--t-base) ease;
}
.text-card:focus-within { box-shadow: 0 0 0 2px var(--amber-line), 0 0 0 7px rgba(255, 171, 0, .16), var(--shadow-2); }
.text-card-label { display: flex; align-items: center; gap: 8px; font: 700 12.5px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); cursor: text; }
.text-card-pen { margin-left: auto; }
.text-edit {
  width: 100%;
  min-height: 220px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 19px/1.55 var(--font-editorial);
  resize: vertical;
}
.text-edit:focus { outline: none; }

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vf-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes shot-beam { 0% { transform: translateY(-100%); } 100% { transform: translateY(385%); } }
@keyframes zone-in { 0% { opacity: 0; transform: scale(1.14); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes zone-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes badge-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes zone-breathe { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(10, 15, 18, .55), 0 0 14px rgba(255, 255, 255, .3); } 50% { box-shadow: 0 0 0 1.5px rgba(10, 15, 18, .55), 0 0 32px rgba(255, 255, 255, .75); } }
@keyframes zone-ring { from { box-shadow: 0 0 0 0 rgba(255, 171, 0, .8); } to { box-shadow: 0 0 0 20px rgba(255, 171, 0, 0); } }
@keyframes indeterminate { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.95) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.97); } }
@keyframes pop { 0% { transform: scale(.85); } 55% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes case-pop {
  0% { transform: scale(.92); box-shadow: inset 0 0 0 1.5px var(--amber-line), 0 0 0 0 rgba(255, 171, 0, .55); }
  50% { transform: scale(1.05); }
  100% { transform: none; box-shadow: inset 0 0 0 1.5px var(--amber-line), 0 0 0 12px rgba(255, 171, 0, 0); }
}
@keyframes pill-in { from { transform: scaleX(.6); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes seg-in { from { transform: scale(.94); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-fade { 0% { transform: rotate(0); opacity: 1; } 50% { opacity: .5; } 100% { transform: rotate(360deg); opacity: 1; } }
@keyframes eq { 0%, 100% { transform: scaleY(.18); } 50% { transform: scaleY(1); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.8) rotate(12deg); opacity: .55; } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes onair { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes glow { 0%, 100% { box-shadow: 0 6px 18px rgba(255, 171, 0, .35), 0 0 0 0 rgba(255, 171, 0, .35); } 50% { box-shadow: 0 6px 18px rgba(255, 171, 0, .35), 0 0 0 10px rgba(255, 171, 0, 0); } }
@keyframes wave-in { from { transform: scaleY(.3); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes ripple { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
@keyframes ring-out { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes wave-breathe { 0%, 100% { opacity: .45; transform: scaleY(.85); } 50% { opacity: .8; transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .eq.is-busy i { transform: scaleY(.55); }
  .prep-brand.is-busy img { animation: none; }
  .onair::after, .state-dot::after { display: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 479px) {
  .home-live .section-link { min-width: 44px; justify-content: center; }
  .home-live .section-link-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prosp-filters { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .prosp-filters::-webkit-scrollbar { display: none; }
  .dock > .btn-download { flex: none; width: 56px; padding: 0; }
  .btn-compact-phone { width: 44px; padding: 0; }
  .btn-compact-phone .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn-download .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 374px) {
  :root { --gutter: 14px; }
  .case { padding: 9px 8px 10px; }
  .case-label { font-size: 10.5px; letter-spacing: .02em; }
  .case-value { font-size: 13.5px; }
  .create-tile { min-height: 168px; padding: 14px; }
  .create-text b { font-size: 18px; }
  .pstep-label { font-size: 12.5px; }
  .offer-grid { gap: 10px; }
}

/* Tablet: navigation rail, flows in two columns. */
@media (min-width: 768px) {
  :root { --gutter: 28px; }

  body[data-chrome="shell"] .appbar, body[data-chrome="shell"] .tabbar { display: none; }
  body[data-chrome="shell"] .sidenav { display: block; width: var(--rail-w); flex: none; }
  body[data-chrome="shell"] .main { padding-bottom: 0; }

  .page-in { padding-top: 36px; padding-bottom: 40px; gap: 28px; }
  .page-foot { display: none; }
  .page-title { font-size: 34px; }

  .home-title { font-size: 40px; }
  .create-tile { min-height: 220px; padding: 22px; }
  .create-text b { font-size: 24px; }
  .create-text span { font-size: 16px; }
  .create-icon { width: 60px; height: 60px; border-radius: 18px; }
  .create-go { top: 22px; right: 22px; width: 42px; height: 42px; }
  .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mine-tools { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
  .mine-tools .search { flex: 1 1 280px; max-width: 420px; }
  .mine-tools .filter-tabs { flex: 1 1 440px; max-width: 520px; }

  .login { flex-direction: row; }
  .login-brand { flex: 1.1; display: flex; align-items: center; padding: 56px; }
  .login-brand-in { gap: 14px; }
  .login-logo { width: min(100%, 440px); }
  .login-tagline { font-size: 19px; }
  .eq-brand { height: 120px; gap: 7px; margin-top: 28px; }
  .eq-brand i { width: 9px; border-radius: 5px; }
  .login-panel { flex: 1; justify-content: center; padding: 56px 48px; }
  .login-foot { margin-top: 0; padding-top: 40px; }

  .dialog { width: min(480px, calc(100vw - 48px)); margin: auto; padding: 0; border-radius: var(--r-xl); }
  .dialog[open] { animation: pop-in .26s var(--ease-out) both; }
  .dialog.is-closing { animation: pop-out .18s ease-in both; }
  .sheet-grip { display: none; }
  .dialog-in { padding: 20px 24px 24px; }
  .dialog-lightbox { width: 100vw; max-width: 100vw; margin: 0; border-radius: 0; }

  /* Flows: the steps join the top bar; the cases become a column on the left. */
  :root { --col-cases: 268px; }
  .flowbar-in, .flowbar-in.has-steps {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "back title steps right";
    min-height: 68px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .flowbar-title { font-size: 19px; }
  .flowbar-steps { justify-self: center; width: min(100%, 440px); }
  .flowbar-right .counter { display: none; }
  .flow-body { display: grid; grid-template-columns: var(--col-cases) minmax(0, 1fr); align-items: start; }
  .flow-body:has(> .flow-aside:empty) { grid-template-columns: minmax(0, 1fr); }  /* no cases to show: the work takes the width */
  .flow-aside { position: sticky; top: calc(68px + env(safe-area-inset-top)); padding: 28px 0 28px var(--gutter); }
  .flow-aside:has(.origin) { position: static; }  /* the cases and the history: longer than the screen */
  .cases-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .cases-title { font: 700 13px/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
  .cases-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .case { flex-direction: row; align-items: center; gap: 14px; min-height: 84px; padding: 14px; border-radius: var(--r-lg); }
  .case-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--bg); color: var(--ink-2); transition: background-color var(--t-slow) ease; }
  .case.is-filled .case-icon { background: var(--amber); color: var(--ink); }
  .case.is-active .case-icon { background: var(--paper); color: var(--ink); }
  .case-label { font-size: 12px; letter-spacing: .06em; }
  .case-value { font-size: 17px; -webkit-line-clamp: 3; }
  .case-tick { top: 10px; right: 10px; box-shadow: none; }
  .panel { padding: 28px var(--gutter) 32px; gap: 18px; }
  .panel-title { font-size: 28px; }
  .dock { padding-top: 16px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .dock > .btn-block { width: auto; flex: 1 1 auto; }
  .composer-input { min-height: 150px; font-size: 20px; }
  .examples .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .rec-time { font-size: 52px; }
  .price-fields .pf { min-height: 96px; }
  .keypad button { height: 60px; }
  .done { padding-top: 40px; }
}


/* Wide flows: the listening screen puts the player next to the history and the adjustments. */
@media (min-width: 1024px) {
  :root { --col-cases: 300px; }
}
@media (min-width: 1100px) {
  .panel-wide { max-width: 1000px; }
  .listen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .listen-main { position: sticky; top: calc(88px + env(safe-area-inset-top)); }
  .dock-wide { justify-content: flex-end; padding-left: max(var(--gutter), calc((100% - 1000px) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - 1000px) / 2 + var(--gutter))); }
  .dock-wide > .btn, .dock-wide > .btn-block { flex: 0 1 auto; min-width: 260px; }
  .dock-wide > .btn-soft, .dock-wide > .btn-secondary { min-width: 0; }
}

/* Desktop: sidebar. */
@media (min-width: 1200px) {
  body[data-chrome="shell"] .sidenav { width: var(--sidebar-w); }
  .sidenav-in { padding: 26px 16px 20px; gap: 26px; }
  .sidenav-brand { flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; }
  .sidenav-mono { display: none; }
  .sidenav-logo { display: block; width: 196px; height: auto; }
  .side-item { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 50px; padding: 4px 12px 4px 6px; font-size: 16.5px; text-align: left; }
  .side-icon { width: 44px; height: 38px; }
  .side-item:hover { background: var(--bg); }
  .side-item:hover .side-icon { background: transparent; }
  .side-item[aria-current="page"] { background: var(--amber-tint); }
  .side-item[aria-current="page"] .side-icon { background: var(--amber); }
  .sidenav-foot { align-items: stretch; gap: 8px; }
  .store-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; }
  .store-card-logo { width: 96px; }
  .store-card-text { align-items: flex-start; flex: 1; }
  .store-card-text b { font-size: 14px; color: var(--ink-2); }
  .store-card-go { display: block; color: var(--ink-3); }
  .account-row { justify-content: flex-start; padding: 6px 10px 6px 6px; border-radius: var(--r-md); }
  .account-row-name { display: block; min-width: 0; font: 700 15.5px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidenav-powered { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 8px 0; border-top: 1px solid var(--line-soft); }

  .page-in { padding: 44px 48px 48px; }
  .home-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
  .create-tile { min-height: 240px; }
  .offer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The service out of reach when the app starts. */
.boot-error { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px var(--gutter); text-align: center; }
.boot-error-title { font: 700 26px/1.2 var(--font-title); letter-spacing: -.02em; }
.boot-error-text { display: flex; align-items: flex-start; gap: 10px; max-width: 26em; color: var(--err-text); font-weight: 700; text-align: left; }

/* The opening screen: the Audiadis AI logo on the studio colour while the app starts (main.js fades it out). */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(255, 171, 0, .2), transparent 55%),
    linear-gradient(165deg, #2E3D44 0%, var(--studio) 50%, var(--studio-deep) 100%);
  transition: opacity .45s ease, visibility .45s;
}
.splash img { width: min(72vw, 320px); height: auto; }
.eq-splash { height: 64px; }
.splash.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 768px) {
  .splash { gap: 40px; }
  .splash img { width: 440px; }
  .eq-splash { height: 100px; gap: 7px; }
  .eq-splash i { width: 8px; border-radius: 4px; }
}
.boot-error-text .icon { flex: none; }