/* Studio onboarding: lists, the application page, the "New model" wizard, the bell. Colors come from the
   tokens in style.css (light and dark). Phone first: everything works at 375 px. */

/* ---- status chips, tags, badges ---- */

.chip.ob-draft { color: var(--muted); }
.chip.ob-submitted { background: var(--tint); color: var(--link); }
.chip.ob-in_review { background: var(--tint-2); color: var(--link); }
.chip.ob-changes_requested { background: var(--warn-bg); color: var(--warn-ink); }
.chip.ob-rejected { background: var(--bad-bg); color: var(--bad-ink); }
.chip.ob-approved { background: var(--good-bg); color: var(--good-ink); }
.chip.ob-deploying { background: var(--tint); color: var(--link); }
.chip.ob-deploying .dot { animation: pulse 1.2s infinite; }
.chip.ob-live { background: var(--good-bg); color: var(--good-ink); }
.chip.ob-live .dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 35%, transparent); }
.nav .badge.info { background: var(--primary); color: var(--primary-ink); }
.tag.warn-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--warn-bg); color: var(--warn-ink); }
.tag.bad-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--bad-bg); color: var(--bad-ink); }
.tag.ok-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--good-bg); color: var(--good-ink); }
.tag .ico { width: 12px; height: 12px; }
.spinner.inline { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }

/* ---- the studio's home ---- */

.ob-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 18px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  color: var(--on-hero);
  box-shadow: var(--shadow);
}
.ob-hero h2 { color: var(--on-hero); font-size: 20px; }
.ob-hero p { max-width: 560px; margin: 6px 0 0; color: var(--on-hero-dim); }
/* One application per girl: sent before means her application. */
.ob-hero p.ob-hero-again { color: var(--on-hero); font-weight: 600; }
.btn.ob-big { height: 48px; padding: 0 22px; border-color: var(--surface); background: var(--surface); color: var(--link); font-size: 15px; font-weight: 600; }
.btn.ob-big:hover { background: var(--tint); border-color: var(--tint); }
.btn.ob-big .ico { width: 19px; height: 19px; }

/* Wide screens: the chips wrap (every filter reachable with a mouse); phones: one row that scrolls. */
.ob-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 4px;
}
.ob-count {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.ob-count b { min-width: 18px; color: var(--heading); font-weight: 600; text-align: center; }
.ob-count.zero { opacity: 0.6; }
.ob-count:hover { background: var(--surface-2); }
.ob-count[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); opacity: 1; }
.ob-count[aria-pressed="true"] b { color: var(--primary-ink); }
.ob-count.oc-changes_requested:not(.zero):not([aria-pressed="true"]) { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
.ob-count:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ob-group .card-head { padding-bottom: 10px; }
.ob-rows { border-top: 1px solid var(--border); }
.ob-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: inherit;
  text-decoration: none;
}
.ob-row + .ob-row { border-top: 1px solid var(--grid); }
.ob-row:hover { background: var(--tint); }
.ob-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ob-row:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.ob-row-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ob-row-title { overflow: hidden; color: var(--heading); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* Her nickname (her name on the platforms) first, then her full name as on her ID, dimmed: "Mia · Maria Ionescu". */
.ob-row-legal, .ob-legal { color: var(--text-2); font-weight: 500; }
.ob-row-main .dim { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ob-row-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
.ob-row-go { width: 18px; height: 18px; color: var(--muted); }
.ob-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--tint-2), var(--tint));
  color: var(--link);
  font-size: 14px;
  font-weight: 600;
}
.ob-avatar.big { width: 56px; height: 56px; border-radius: 16px; font-size: 19px; background: linear-gradient(135deg, var(--primary), var(--hero-b)); color: var(--on-hero); }

/* ---- the staff queue ---- */

.ob-kpis .kpi.k-wait { box-shadow: inset 4px 0 0 var(--primary), var(--shadow); }
.ob-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
/* Staff: a draft for a studio (e.g. "Create anyway" for a second account). */
.ob-toolbar .ob-new-app { margin-left: auto; }
/* A refusal on the wizard's step 1 (one application per girl): the sentence and the way to her application. Scrolled
   into view below the sticky top bar when it comes (the button pressed may be far below it on a phone). */
.wz-exists { margin-bottom: 14px; }
.wz-exists, .wz > .dialog-error { scroll-margin-top: 76px; }
.wz-exists b { overflow-wrap: anywhere; }
.dialog-error .obd-error-link { color: inherit; font-weight: 600; text-decoration: underline; }
.ob-select select { min-width: 220px; }

/* ---- an application ---- */

.ob-app-top { padding: 20px; }
.ob-app-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ob-app-id h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 22px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ob-app-name { min-width: 0; }
.ob-app-id .dim { margin-top: 2px; }
.ob-progress { display: flex; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: pl; }
.ob-progress li { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.ob-progress li::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--border-strong);
}
.ob-progress li:first-child::before { display: none; }
.ob-progress li.pl-done::before, .ob-progress li.pl-now::before, .ob-progress li.pl-warn::before, .ob-progress li.pl-bad::before { background: var(--primary); }
.pl-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary-ink);
}
.pl-dot .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.pl-done .pl-dot { border-color: var(--primary); background: var(--primary); }
.pl-now .pl-dot { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.pl-now .pl-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.pl-warn .pl-dot { border-color: var(--warn); background: var(--warn); }
.pl-bad .pl-dot { border-color: var(--bad); background: var(--bad); color: var(--badge-ink); }
.pl-label { overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pl-done .pl-label, .pl-now .pl-label { color: var(--text); }
.pl-warn .pl-label { color: var(--warn-ink); }
.pl-bad .pl-label { color: var(--bad-ink); }

.ob-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ob-box > .ico { width: 22px; height: 22px; margin-top: 1px; color: var(--link); }
.ob-box > div { flex: 1; min-width: 0; }
.ob-box b { display: block; color: var(--heading); font-size: 15px; }
.ob-box p { margin: 6px 0 0; color: var(--text-2); }
.ob-box ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); }
.ob-box .btn { margin-top: 12px; }
.ob-box-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-box.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: var(--warn-bg); }
.ob-box.warn > .ico { color: var(--warn-ink); }
.ob-box.bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); background: var(--bad-bg); }
.ob-box.bad > .ico { color: var(--bad-ink); }
.ob-box.ok { border-color: color-mix(in srgb, var(--good) 40%, var(--border)); background: var(--good-bg); }
.ob-box.ok > .ico { color: var(--good-ink); }
.ob-box.small { padding: 12px 14px; margin: 14px 0; }
.ob-box blockquote, .ob-history blockquote {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid currentColor;
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.ob-history blockquote { border-left-color: var(--border-strong); background: var(--surface-2); font-size: 13px; }

.ob-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.ob-dl dt { color: var(--muted); font-size: 13px; font-weight: 500; }
.ob-dl dd { margin: 0; color: var(--heading); font-weight: 500; overflow-wrap: anywhere; }
.ob-break { word-break: break-all; }
.ob-pre { white-space: pre-line; font-weight: 400 !important; color: var(--text) !important; }

.ob-history { position: relative; margin: 0; padding: 0; list-style: none; }
.ob-history li { position: relative; display: flex; gap: 12px; padding: 0 0 16px; }
.ob-history li:not(:last-child)::before { content: ""; position: absolute; top: 14px; bottom: 0; left: 5px; width: 2px; background: var(--border); }
.oh-dot { width: 12px; height: 12px; flex: none; margin-top: 4px; border: 2px solid var(--primary); border-radius: 50%; background: var(--surface); }
.oh-rejected .oh-dot { border-color: var(--bad); }
.oh-changes_requested .oh-dot { border-color: var(--warn); }
.oh-live .oh-dot, .oh-approved .oh-dot { border-color: var(--good); background: var(--good); }
.oh-main { flex: 1; min-width: 0; }

.ob-actions .card-body { display: flex; flex-direction: column; gap: 14px; }
.ob-action-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.danger-solid { border-color: var(--bad); background: var(--bad); color: var(--badge-ink); }
.btn.danger-solid:hover { background: var(--bad-ink); border-color: var(--bad-ink); }
.ob-download { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.ob-handover h2 { display: flex; align-items: center; gap: 8px; }
.ob-handover h2 .ico { width: 18px; height: 18px; color: var(--link); }
.ho-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.ho-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.ho-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ob-replaced { margin-top: 16px; }
.ob-replaced summary { color: var(--text-2); font-size: 13px; cursor: pointer; }
.ob-replaced .ph-grid { margin-top: 12px; opacity: 0.75; }

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

.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.ph-grid.big { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ph { display: flex; flex-direction: column; margin: 0; min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.ph-img { position: relative; aspect-ratio: 3 / 4; background: var(--surface-2); }
.ph-img img, .ph-img a { display: block; width: 100%; height: 100%; }
.ph-img img { object-fit: cover; }
.ph-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; color: var(--muted); font-size: 12px; text-align: center; }
.ph-n {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--heading);
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}
.ph-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ph-badge .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.ph-badge.ok { background: var(--good); color: #ffffff; }
.ph-badge.bad { background: var(--bad); color: #ffffff; }
.ph-badge.warn { background: var(--warn); color: #1d1300; }
.ph figcaption { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 10px 12px 12px; font-size: 13px; }
.ph-verdict { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ph-verdict b { font-weight: 600; }
.ph-verdict.ok b { color: var(--good-ink); }
.ph-verdict.bad b { color: var(--bad-ink); }
.ph-verdict.warn b { color: var(--warn-ink); }
.ph-verdict.busy b { color: var(--link); }
.ph-problems { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ph-problems li { padding: 2px 8px; border-radius: 999px; background: var(--bad-bg); color: var(--bad-ink); font-size: 11.5px; font-weight: 500; }
.ph-instr { margin: 0; color: var(--text-2); font-size: 12.5px; overflow-wrap: anywhere; }
.ph-instr.bad { color: var(--bad-ink); }
.ph-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.ph-flag { display: flex; align-items: center; gap: 6px; color: var(--bad-ink); font-size: 12px; font-weight: 600; }
.ph-flag .ico { width: 15px; height: 15px; }
.ph-fail { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.ph-requested { border: 2px solid var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.ph-manual { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
/* Staff: a photo nobody checked yet must stand out (look at it before approving). */
.ph-manual.ph-staff { border: 2px solid var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.ph-requested .ph-verdict b { color: var(--bad-ink); }
.ph-checking .ph-img img { opacity: 0.7; }

/* ---- the photo guide (drawings) ---- */

.ob-guide { margin-bottom: 16px; }
.ob-guide summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.ob-guide summary::-webkit-details-marker { display: none; }
.ob-guide summary::after { content: "Show"; color: var(--link); font-size: 13px; font-weight: 500; }
.ob-guide[open] summary::after { content: "Hide"; }
.ob-guide-title { display: inline-flex; align-items: center; gap: 8px; color: var(--heading); font-size: 16px; font-weight: 600; }
.ob-guide-title .ico { color: var(--link); }
.gd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0 20px 20px; list-style: none; }
.gd { display: flex; flex-direction: column; gap: 8px; }
.gd-pic { position: relative; }
.gd-mark { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #ffffff; }
.gd-mark .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.gd-do .gd-mark { background: var(--good); }
.gd-dont .gd-mark { background: var(--bad); }
.gd-text { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--text-2); }
.gd-text b { color: var(--heading); font-size: 13px; }
.gd-do .gd-text b { color: var(--good-ink); }
.gd-dont .gd-text b { color: var(--bad-ink); }
.ob-illu { display: block; width: 100%; height: auto; border-radius: 14px; }
.il-bg { fill: var(--tint); }
.gd-dont .il-bg { fill: var(--surface-2); }
.il-body { fill: var(--primary); }
.il-neck, .il-skin { fill: #e8c2a4; }
.il-hair { fill: #4a3426; }
.il-eye { fill: #1f2933; }
.il-line { fill: none; stroke: #a0473e; stroke-width: 2; stroke-linecap: round; }
.il-glass { fill: #111820; }
.il-sun { fill: var(--warn); }
.il-ray { stroke: var(--warn); stroke-width: 2.4; stroke-linecap: round; }
/* "Too dark": the whole picture is night, the person only a shadow outline. */
.il-night .il-bg { fill: #1b222d; }
.il-night .il-body, .il-night .il-neck, .il-night .il-skin, .il-night .il-hair { fill: #2b3441; stroke: #4a5566; stroke-width: 1.2; }
.il-night .il-eye { fill: #4a5566; }
.il-night .il-line { stroke: #4a5566; }
.il-moon { fill: #d9e1ea; }

/* ---- the wizard ---- */

.wz { max-width: 880px; }
.wz-steps { display: flex; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.wz-steps li { flex: 1; min-width: 0; }
.wz-steps li > * {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
.wz-steps button { cursor: pointer; }
.wz-steps button:hover { border-color: var(--tint-2); background: var(--tint); }
.wz-steps button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wz-num { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; }
.wz-num .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.wz-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-now > * { border-color: var(--primary); color: var(--heading); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.wz-now .wz-num { background: var(--primary); color: var(--primary-ink); }
.wz-done .wz-num { background: var(--good); color: #ffffff; }
.wz-done > * { color: var(--text); }

.wz-card { margin-bottom: 20px; }
.wz-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.wz-field { display: flex; flex-direction: column; min-width: 0; margin-bottom: 12px; }
.wz-field:has(textarea) { grid-column: 1 / -1; }
.wz-field label { margin-bottom: 6px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.wz-field input, .wz-field textarea { width: 100%; height: 44px; font-size: 15px; }
.wz-field textarea { height: auto; min-height: 88px; }
.wz-field.invalid input, .wz-field.invalid textarea { border-color: var(--bad); }
.wz-err { margin: 6px 0 0; color: var(--bad-ink); font-size: 12.5px; font-weight: 500; }
.wz-field .hint { margin-top: 6px; }
.wz-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}
.wz-bar .btn { height: 44px; padding: 0 18px; font-size: 15px; }
.wz-bar .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wz-bar .ico { width: 17px; height: 17px; }

.wz-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; color: var(--text-2); font-size: 13.5px; }
.wz-meter b { color: var(--heading); }
.wz-meter-bar { flex: 1 1 160px; max-width: 280px; height: 8px; overflow: hidden; border-radius: 99px; background: var(--grid); }
.wz-meter-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 0.3s; }
.wz-meter.done .wz-meter-bar i { background: var(--good); }
.wz-meter.warn { color: var(--warn-ink); }
.wz-meter.warn b { color: var(--warn-ink); }
.wz-meter.warn .wz-meter-bar i { background: var(--warn); }
.wz-bar.has-why { flex-wrap: wrap; }
.wz-why {
  display: flex;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--warn-ink);
  font-size: 13px;
  font-weight: 500;
}
.wz-why .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
/* On a computer (mouse) "Take a photo" is only a file picker: "Choose photos" does the job. */
@media (hover: hover) and (pointer: fine) {
  .wz-camera-btn { display: none; }
}
.wz-privacy { margin: 10px 0 0; color: var(--text-2); font-size: 13px; }
.wz-privacy summary { color: var(--link); font-weight: 500; cursor: pointer; }
.wz-privacy ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.wz-privacy b { color: var(--heading); font-weight: 600; }
.ob-next { align-self: flex-start; }
.ob-erase { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ob-erase-card .ob-erase { padding-top: 0; border-top: 0; }
/* The collector's buttons are about earnings: not on the onboarding pages. */
body.ob-view .top-actions .collector-act { display: none; }
.wz-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 22px 16px;
  border: 2px dashed var(--border-strong);
  border-radius: 16px;
  background: var(--surface-2);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.wz-drop.over { border-color: var(--primary); background: var(--tint); }
.wz-drop.after { margin: 18px 0 0; }
.wz-drop p { margin: 0; }
.wz-drop-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tint); color: var(--link); }
.wz-drop-ico .ico { width: 24px; height: 24px; }
.wz-drop-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.wz-drop-btns .btn { height: 44px; padding: 0 18px; }
.wz-drop .hint { margin: 4px 0 0; }

.wz-edit-links { display: flex; gap: 8px; margin: 10px 0 0 -6px; }
.wz-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.wz-thumbs li { width: 64px; height: 84px; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.wz-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wz-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--heading);
  font-weight: 500;
  cursor: pointer;
}
.wz-consent input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--primary); cursor: pointer; }
.wz-consent:has(input:checked) { border-color: var(--good); background: var(--good-bg); }
.wz-consent.invalid { border-color: var(--bad); background: var(--bad-bg); }

/* ---- the notifications bell ---- */

.bell-btn { position: relative; }
.bell-count {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--page);
  border-radius: 9px;
  background: var(--bad);
  color: var(--badge-ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.bell-panel {
  position: absolute;
  top: calc(100% - 4px);
  right: 24px;
  z-index: 50;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.bp-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--heading); }
.bp-list { margin: 0; padding: 4px 0; list-style: none; }
.bp-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bp-item:hover, .bp-item:focus-visible { background: var(--tint); outline: none; }
.bp-dot { width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: 50%; background: transparent; }
.bp-item.unread .bp-dot { background: var(--primary); }
.bp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.bp-text b { color: var(--heading); font-weight: 500; overflow-wrap: anywhere; }
.bp-item.unread .bp-text b { font-weight: 600; }
.bp-body { color: var(--text-2); overflow-wrap: anywhere; }

/* ---- dialogs ---- */

#ob-dialog { width: min(600px, calc(100vw - 32px)); }
#ob-dialog h2 { display: flex; align-items: center; gap: 8px; }
#ob-dialog h2 .ico { color: var(--link); }
#ob-dialog textarea { min-height: 88px; }
textarea.mono, .ob-secret { font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; font-size: 13.5px; }
.obd-tpls, .obd-photos { margin: 0 0 12px; padding: 0; border: 0; }
.obd-tpls legend, .obd-photos legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.obd-tpl { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 9px; font-size: 13.5px; cursor: pointer; }
.obd-tpl:hover { background: var(--surface-2); }
.obd-tpl input { margin: 3px 0 0; accent-color: var(--primary); }
.obd-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.obd-photo { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.obd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.obd-photo input { position: absolute; top: 6px; left: 6px; z-index: 1; width: 18px; height: 18px; margin: 0; accent-color: var(--bad); }
.obd-photo:has(input:checked) { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.obd-photo-n { position: absolute; right: 6px; bottom: 6px; padding: 0 6px; border-radius: 6px; background: var(--surface); color: var(--text); font-size: 11px; font-weight: 600; }
.ob-secret {
  margin: 0 0 14px;
  padding: 14px;
  max-height: 50vh;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--heading);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

/* ---- phones ---- */

@media (max-width: 900px) {
  .ob-app-grid .col-stack:last-child { order: -1; }
}

@media (max-width: 640px) {
  .ob-hero { flex-direction: column; align-items: stretch; padding: 18px; }
  .ob-hero h2 { font-size: 18px; }
  .btn.ob-big { width: 100%; }
  .ob-counts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ob-counts::-webkit-scrollbar { display: none; }
  .ob-row { gap: 10px; padding: 12px 14px; }
  /* The meta line (studio · location · age) and the name (nickname · full name) wrap to two lines instead of being cut. */
  .ob-row-main .dim, .ob-row-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
  .ob-row-title { overflow-wrap: anywhere; }
  .ob-row-side { flex-direction: column; align-items: flex-end; gap: 4px; }
  /* An application's status never takes the row: a long chip ("Approved (sent to Telescope)") wraps, so her
     nickname and full name keep their room (the Sets rows keep theirs as they are). */
  .ob-app-row .ob-row-side { max-width: 45%; }
  .ob-app-row .ob-row-side .chip { white-space: normal; text-align: right; }
  .ob-row-side .dim.small { font-size: 11px; white-space: nowrap; }
  .ob-row-go { display: none; }
  /* The photo guide: one row of drawings that scrolls sideways, so the upload buttons stay near the top. */
  .gd-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .gd-list::-webkit-scrollbar { display: none; }
  .gd { flex: 0 0 132px; scroll-snap-align: start; }
  .ob-avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
  .ob-select, .ob-select select { width: 100%; min-width: 0; }
  .ob-app-top { padding: 16px; }
  .ob-app-id h2 { font-size: 19px; }
  /* "Accounts ready" wraps to two lines instead of being cut. */
  .ob-progress li .pl-label { font-size: 10.5px; line-height: 1.2; white-space: normal; }
  .ob-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ob-dl dd { margin-bottom: 10px; }
  .ph-grid, .ph-grid.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ph figcaption { padding: 8px 10px 10px; }
  .ph-verdict .dim { display: none; }
  .ph-actions .btn { flex: 1 1 auto; padding: 0 8px; }
  .gd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px 16px; gap: 10px; }
  .ob-guide summary { padding: 14px 16px; }
  .wz-steps { gap: 6px; }
  .wz-steps li > * { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; }
  .wz-label { font-size: 11px; white-space: normal; line-height: 1.2; }
  .wz-fields { grid-template-columns: minmax(0, 1fr); }
  /* The wizard's buttons stay under the thumb. */
  .wz-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -1px -1px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.08);
  }
  .wz-bar .btn.primary { flex: 1 1 auto; }
  .wz-drop { padding: 18px 12px; }
  .wz-drop-btns { width: 100%; }
  .wz-drop-btns .btn { flex: 1 1 140px; }
  .bell-panel { right: 16px; }
}

/* ---- the application page (staff): the package for Telescope, Accounts ready, Connect tlink account ---- */
.ob-download.first { padding-top: 0; border-top: 0; }
.ob-download-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-approve-hint, .ob-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.ob-approve-hint .ico, .ob-note .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--link); }
.ob-note { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.ob-note.ok { background: var(--good-bg); color: var(--good-ink); }
.ob-note.ok .ico { color: var(--good-ink); }
/* Approved / Accounts ready: the three steps in order (connect her tlink account, send the login details, mark her
   live), each with its hint; a step that waits for an earlier one keeps its button, disabled, and says why in place
   of the hint. */
.ob-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ob-step { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ob-step-n {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none; margin-top: 7px; border-radius: 50%;
  background: var(--tint); color: var(--link); font-size: 12px; font-weight: 600;
}
.ob-step-n .ico { width: 14px; height: 14px; }
.ob-step.done .ob-step-n { background: var(--good-bg); color: var(--good-ink); }
.ob-step.blocked .ob-step-n { background: var(--surface-2); color: var(--muted); }
.ob-step-main { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.ob-step-btn { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-step-btn .btn { max-width: 100%; }
.ob-step-name { color: var(--heading); font-weight: 600; line-height: 38px; }
.ob-step-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.ob-step-hint .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ob-step.blocked .ob-step-hint { color: var(--warn-ink); }
/* The step she waits for (the one main button), highlighted; a done step says when and by whom. */
.ob-step.current { margin: -2px -10px; padding: 8px 10px 10px; border-radius: 12px; background: var(--tint); box-shadow: inset 3px 0 0 var(--primary); }
.ob-step.current .ob-step-n { background: var(--primary); color: var(--primary-ink); }
.ob-step-done { margin: 0; color: var(--good-ink); font-size: 13px; overflow-wrap: anywhere; }
.ob-step-done a { color: inherit; font-weight: 600; text-decoration: underline; }
/* The queue's tag of an application on its way to live ("Connected · send login details"). */
.tag.ob-step-tag { display: inline-flex; align-items: center; gap: 4px; }
/* Approved: "Send back for new photos" above the steps (its hint beside it on a computer, under it on a phone). */
.ob-sendback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ob-sendback .btn { max-width: 100%; }
.ob-sendback .ob-step-hint { flex: 1 1 220px; min-width: 0; }
/* Her model is already connected (logged in some other way, by her name): "Mark live with her", above the steps. */
.ob-match {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px;
  border-radius: 12px; background: var(--good-bg); color: var(--good-ink); font-size: 13.5px;
}
.ob-match > .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ob-match-body { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; }
.ob-match-text { flex: 1 1 200px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.ob-match-text b { font-weight: 600; }
.ob-match-text span { display: block; margin-top: 2px; }
.ob-match a { color: inherit; font-weight: 600; text-decoration: underline; }
.ob-match .btn { max-width: 100%; }
.ob-match.wait { background: var(--surface-2); color: var(--text-2); }
.ob-match.wait > .ico { color: var(--link); }
.ob-match.wait b { color: var(--heading); }
.ob-match.wait a { color: var(--link); }
.ob-origin { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ob-origin .ico { width: 14px; height: 14px; flex: none; }
.obd-steps { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; padding: 0; list-style: none; counter-reset: obs; }
.obd-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--heading); font-size: 14px; counter-increment: obs; }
.obd-steps li::before {
  content: counter(obs); display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--tint); color: var(--link); font-size: 12px; font-weight: 600;
}
.obd-steps .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obd-secret-field { display: flex; gap: 8px; }
.obd-secret-field input { flex: 1; min-width: 0; }
.obd-secret-field .btn { flex: none; height: auto; }
/* The viewer dialog's password (views/viewers.js): the field's own label rule (.dialog-body .field > span) would make it a
   block and put "New" under the input; it stays on the input's line. */
#viewer-form .field > .obd-secret-field { display: flex; margin-bottom: 0; color: inherit; font-size: inherit; font-weight: inherit; }
#ob-dialog .hint .ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.dialog-body .nl-app { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--text-2); font-size: 13px; }
.dialog-body .nl-app.ok { color: var(--good-ink); font-weight: 500; }
.nl-app .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* ---- Settings: Telegram notifications ---- */
.tg-card h2 { display: flex; align-items: center; gap: 8px; }
.tg-card h2 .ico { width: 18px; height: 18px; color: var(--link); }
.tg-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; overflow-wrap: anywhere; }
.tg-status > .ico { width: 16px; height: 16px; color: var(--warn-ink); }
.tg-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.tg-status + .tg-btns { margin: 0 0 14px; }
.tg-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; color: var(--text-2); font-size: 13.5px; }
.tg-steps b { color: var(--heading); font-weight: 600; }
.tg-card code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.tg-card code { padding: 1px 5px; border-radius: 6px; background: var(--surface-2); color: var(--heading); overflow-wrap: anywhere; }
.tg-help summary { color: var(--link); font-size: 13px; font-weight: 500; cursor: pointer; }
.tg-help[open] summary { margin-bottom: 8px; }
.tg-found { margin-top: 14px; }
.tg-found .spinner.inline { margin-right: 6px; }
.tg-chats { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.tg-chats li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.tg-chat-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--tint); color: var(--link); }
.tg-chat-ico .ico { width: 17px; height: 17px; }
.tg-chat-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.tg-chat-main b { color: var(--heading); font-weight: 600; overflow-wrap: anywhere; }
.tg-chat-main .mono { overflow-wrap: anywhere; }
.tg-card .ob-box.small { margin: 14px 0 0; }
.ob-note.bad { background: var(--bad-bg); color: var(--bad-ink); }
.ob-note.bad .ico { color: var(--bad-ink); }
.tg-facts { margin: -6px 0 14px; overflow-wrap: anywhere; }
.tg-facts b { color: var(--heading); font-weight: 600; }
.tg-wait { color: var(--warn-ink); }
.tg-card .tg-status + .tg-facts + .ob-box.small, .tg-card .tg-status + .ob-box.small { margin: 0 0 14px; }
.tg-chat-warn { display: flex; align-items: flex-start; gap: 4px; margin-top: 2px; color: var(--warn-ink); }
.tg-chat-warn .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.tg-btns.top { margin: 0 0 14px; }
.tg-chat-warn.bad { color: var(--bad-ink); font-weight: 500; }
.tg-chats li.tg-public { border-color: var(--bad-ink); }
.ob-note.warn { background: var(--warn-bg); color: var(--warn-ink); }
.ob-note.warn .ico { color: var(--warn-ink); }
/* The Telescope password: a plain text field drawn as dots (browsers' password managers never take it for a
   login form, so they neither offer to save it nor generate one); "Show" removes the dots. */
.obd-masked { -webkit-text-security: disc; }

/* ---- the team's tasks (#/tasks, owners and admins): the onboarding queue's look ---- */

.tk-toolbar { align-items: center; }
.tk-toolbar .tk-new { margin-left: auto; }
.tk-seg-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--tint-2); color: var(--link); font-size: 11.5px; font-weight: 600; text-align: center; }
.seg button[aria-pressed="true"] .tk-seg-n { background: color-mix(in srgb, var(--primary-ink) 22%, transparent); color: inherit; }
.tk-row { align-items: flex-start; }
.tk-row.is-done .ob-row-title { color: var(--text-2); }
/* The round "Mark done" button on the left (a done task shows the tick). */
.tk-check {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none; margin-top: 2px; padding: 0;
  border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: transparent; cursor: pointer;
}
.tk-check .ico { width: 16px; height: 16px; }
button.tk-check:hover { border-color: var(--good); color: var(--good-ink); }
button.tk-check:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tk-check.done { border-color: var(--good-bg); background: var(--good-bg); color: var(--good-ink); cursor: default; }
.tk-check.auto { border-style: dashed; color: var(--muted); cursor: default; }
/* What the task is about: a link (her application) or a button (the edit dialog). */
.tk-main {
  display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.tk-main:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.tk-main .dim { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.tk-note { overflow: hidden; color: var(--text-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.tk-warning { display: flex; align-items: flex-start; gap: 6px; color: var(--warn-ink); font-size: 12.5px; overflow-wrap: anywhere; }
.tk-warning .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; }
p.tk-warning { margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); }
.tk-side { max-width: 55%; }
.tk-days { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tk-auto-tag { color: var(--muted); }
.tk-edit-btn { width: 30px; height: 30px; }
.tk-empty .empty-ico .ico { width: 26px; height: 26px; }
/* The dialog: the three kinds as big choices, then the studio, the number of models, the link and the note. */
#task-dialog { width: min(560px, calc(100vw - 32px)); }
#task-dialog textarea { min-height: 88px; }
.tk-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 14px; padding: 0; border: 0; }
.tk-kinds legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.tk-kind { display: flex; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.tk-kind:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--tint); }
.tk-kind input { flex: none; align-self: flex-start; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--primary); }
.tk-kind span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-kind b { color: var(--heading); font-size: 13.5px; font-weight: 600; }
.tk-kind small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.tk-about { overflow-wrap: anywhere; }
.tk-about b { color: var(--heading); }

@media (max-width: 640px) {
  .tk-toolbar .seg { flex: 1 1 auto; }
  .tk-toolbar .tk-new { flex: 1 1 100%; margin-left: 0; justify-content: center; }
  .tk-row { flex-wrap: wrap; }
  .tk-main { flex: 1 1 calc(100% - 44px); }
  .tk-main .dim, .tk-note { white-space: normal; }
  /* The tags, links and buttons go under the text, from its left edge. */
  .tk-side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; max-width: none; margin-left: 40px; }
  .tk-kinds { grid-template-columns: minmax(0, 1fr); }
}

/* ---- her profile picture (views/profileguide.js, profileguide.js): Telescope's rules drawn, the profile preview ---- */

/* The guide: the correct 3:4 frame, its square and circle crops, the legend; the four mistakes; the checklist; the
   example and the PDF. Our own drawing, every colour a theme token (light and dark). */
.pg-card-body { padding: 0 20px 20px; }
/* "Add her photos": down to them (the guide is a few screens long on a phone). */
.pg-jump { display: flex; justify-content: flex-end; margin: -6px 0 6px; }
.pg-jump .ico { width: 15px; height: 15px; }
.pg { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pg-top { display: grid; grid-template-columns: minmax(150px, 210px) minmax(90px, 124px) minmax(0, 1fr); align-items: start; gap: 16px 20px; }
.pg-main, .pg-crop { margin: 0; min-width: 0; }
.pg-ok { display: flex; align-items: center; gap: 6px; height: 20px; margin-bottom: 8px; color: var(--good-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pg-ok .ico { width: 16px; height: 16px; flex: none; stroke-width: 2.6; }
.pg-svg { display: block; width: 100%; height: auto; }
.pg-main .pg-svg { border-radius: 4px; }
.pg-crops { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; }
.pg-crop-box { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 8px; }
.pg-crop-box.round { border-radius: 50%; }
.pg-crop figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin-top: 5px; color: var(--muted); font-size: 12px; text-align: center; }
.pg-crop figcaption b { color: var(--heading); font-weight: 600; }
.pg-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 28px; }
.pg-legend { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--text); font-size: 13.5px; }
.pg-legend li { display: flex; align-items: flex-start; gap: 10px; }
.pg-swatch { display: inline-block; flex: none; width: 14px; height: 14px; margin-top: 3px; border: 1.5px solid; border-radius: 4px; }
.pg-swatch.top { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 24%, transparent); }
.pg-swatch.side { border-color: var(--good); background: color-mix(in srgb, var(--good) 24%, transparent); }
.pg-swatch.low { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 22%, transparent); }
.pg-ruler { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--text); font-size: 13px; }
.pg-ruler .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--warn-ink); }
.pg-h { margin: 4px 0 -4px; color: var(--heading); font-size: 14px; font-weight: 600; }
.pg-donts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg-dont { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pg-dont-pic { position: relative; width: 100%; max-width: 140px; }
.pg-dont-pic .gd-mark { right: 5px; bottom: 5px; width: 22px; height: 22px; background: var(--bad); }
.pg-dont-pic .gd-mark .ico { width: 13px; height: 13px; }
.pg-dont-text { display: flex; flex-direction: column; gap: 2px; color: var(--text-2); font-size: 12.5px; }
.pg-dont-text b { color: var(--bad-ink); font-size: 13px; }
.pg-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.pg-checks li { display: flex; align-items: flex-start; gap: 8px; color: var(--text); }
.pg-checks .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--good); stroke-width: 2.6; }
.pg-more { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.pg-example, .pg-pdf {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.pg-example:hover, .pg-pdf:hover { border-color: var(--tint-2); background: var(--tint); }
.pg-example:focus-visible, .pg-pdf:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pg-example img { width: 48px; height: 64px; flex: none; border-radius: 6px; object-fit: cover; }
.pg-example > span, .pg-pdf > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pg-example b, .pg-pdf b { color: var(--link); font-size: 13.5px; font-weight: 600; }
.pg-pdf > .ico { width: 22px; height: 22px; flex: none; margin: 0 13px; color: var(--link); }

/* The drawing's parts. */
.pg-bg { fill: var(--surface-2); }
.pg-body { fill: color-mix(in srgb, var(--primary) 58%, var(--surface-2)); }
/* Her face and hair as in the face-photo guide's drawings (the same in both themes; the hair a little lighter in dark). */
.pg-hair { fill: color-mix(in srgb, #4a3426 78%, var(--heading)); }
.pg-face { fill: #e8c2a4; }
.pg-eye { fill: #1f2933; }
.pg-smile { fill: none; stroke: #a0473e; stroke-width: 1.1; stroke-linecap: round; }
.pg-band.top { fill: color-mix(in srgb, var(--primary) 20%, transparent); }
.pg-band.side { fill: color-mix(in srgb, var(--good) 20%, transparent); }
.pg-band.low, .pg-band.bad { fill: color-mix(in srgb, var(--bad) 20%, transparent); }
.pg-line { fill: none; stroke-width: 1.3; stroke-dasharray: 4 3; }
.pg-line.top { stroke: var(--primary); }
.pg-line.side { stroke: var(--good); }
.pg-line.low, .pg-line.bad { stroke: var(--bad); }
.pg-mid { fill: none; stroke: var(--muted); stroke-width: 0.8; stroke-dasharray: 3 3; opacity: 0.7; }
.pg-edge { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.pg-arrow { fill: none; stroke: var(--primary); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pg-num { font-size: 13px; font-weight: 700; paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; stroke-linejoin: round; }
.pg-num.top { fill: var(--link); }
.pg-num.side { fill: var(--good-ink); font-size: 11px; }
.pg-num.low { fill: var(--bad-ink); font-size: 9px; font-weight: 600; }

/* The wizard: photo 1 is her profile picture (the label on its tile, the line above the photos). */
.ph-profile {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 16px);
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.ph-profile .ico { width: 13px; height: 13px; flex: none; stroke-width: 2.2; }
.pg-first { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 14px; color: var(--text-2); font-size: 13px; }
.pg-first .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--link); }
.ph-actions .link-btn.pg-preview-btn { display: inline-flex; align-items: center; gap: 4px; padding-left: 0; }
.pg-preview-btn .ico { width: 15px; height: 15px; }
/* Her content package: "How to take it" on the Profile picture card, "Profile preview" under its photo. */
.pg-howto { margin-left: auto; }
.content-tile .pg-preview-btn { align-self: flex-start; }

/* The dialog: the guide, or her photo three ways with the safe zone over the 3:4 frame (on by default). */
#pg-dialog { width: min(780px, calc(100vw - 32px)); }
.pg-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pg-dlg-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.pg-dlg-head h2 .ico { width: 20px; height: 20px; flex: none; color: var(--link); }
.pg-dlg-head .icon-btn { flex: none; margin: -6px -10px 0 0; }
.dialog-body .pg-dlg-intro { margin: 6px 0 16px; }
#pg-dialog .dialog-actions { margin-top: 18px; }
.pp-views { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 160px); justify-content: center; align-items: start; gap: 16px 28px; }
.pp-view { margin: 0; min-width: 0; }
.pp-view figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin-top: 6px; color: var(--muted); font-size: 12.5px; text-align: center; }
.pp-view figcaption b { color: var(--heading); font-weight: 600; }
.pp-crops { display: flex; flex-direction: column; gap: 14px; }
.pp-box { position: relative; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.pp-34 { aspect-ratio: 3 / 4; }
.pp-34 > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pp-sq { aspect-ratio: 1; }
.pp-sq.round { border-radius: 50%; }
/* The square Telescope's poster cuts from the 3:4 frame: between the side lines (x 20-80%), from just above her head
   (y 17-62%): her head and bust. The frame, 1/0.6 as wide as the square, moved left by 20% of its width (1/3 of the
   square) and up by 17% of its height (0.17 × 4/3 / 0.6 = 37.8% of the square). */
.pp-in { position: absolute; top: -37.8%; left: -33.33%; width: 166.67%; aspect-ratio: 3 / 4; }
.pp-in img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pp-zone { position: absolute; inset: 0; display: none; pointer-events: none; }
.pp-views.zone-on .pp-zone { display: block; }
.pp-z { position: absolute; display: block; }
.pp-z.top { top: 0; right: 0; left: 0; height: 25%; border-bottom: 2px dashed var(--primary); background: color-mix(in srgb, var(--primary) 30%, transparent); }
.pp-z.left, .pp-z.right { top: 25%; bottom: 0; width: 20%; background: color-mix(in srgb, var(--good) 26%, transparent); }
.pp-z.left { left: 0; border-right: 2px dashed var(--good); }
.pp-z.right { right: 0; border-left: 2px dashed var(--good); }
.pp-z.mid { top: 0; bottom: 0; left: 50%; border-left: 1px dashed color-mix(in srgb, var(--surface) 75%, transparent); }
.pp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.pp-tools .btn[aria-pressed="true"] { border-color: var(--primary); background: var(--tint); color: var(--link); }
.pp-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; }
.pp-legend .pg-swatch { margin: 0 0 0 4px; }
/* Her photo's shape: a quiet line when it is 3:4; a warning (with what to do) when it is not. (Its slot, a live region
   filled once the picture's size is known, is never display: none: an empty one takes no room.) */
.pp-ratio { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; }
.pp-ratio .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.pp-ratio.ok { color: var(--muted); }
.pp-ratio.ok .ico { color: var(--good); stroke-width: 2.6; }
.pp-ratio.warn { padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--text); font-weight: 500; }
.pp-ratio.warn .ico { color: var(--warn-ink); }
.pp-asks { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); list-style: none; font-size: 13.5px; }
.pp-asks li { display: flex; align-items: flex-start; gap: 8px; color: var(--text); }
.pp-asks .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--good); stroke-width: 2.6; }

@media (max-width: 640px) {
  .pg-card-body { padding: 0 16px 16px; }
  .pg-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px 16px; }
  .pg-crops { align-items: center; }
  .pg-crop { width: 100%; max-width: 104px; }
  .pg-side { grid-column: 1 / -1; padding-top: 0; }
  .pg-donts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .pg-checks { grid-template-columns: minmax(0, 1fr); }
  #pg-dialog .dialog-body { padding: 18px 16px; }
  .pp-views { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px 14px; }
  .pp-crops { gap: 10px; }
}

/* ---- support tickets (#/tickets, #/tickets/new, #/tickets/<id>; studios and the team, 2026-10-22) ---- */

/* The list: the onboarding queue's rows, a dot for what is unread. */
.tkt-toolbar { align-items: center; }
.tkt-toolbar .tkt-new { margin-left: auto; }
.tkt-search input { width: 220px; }
/* The Onboarding list's search box (2026-11-03) */
.ob-search { flex: 1 1 240px; min-width: 0; }
.ob-search input { width: 100%; min-width: 0; }
.tkt-stale { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; }
.tkt-stale .ico { width: 15px; height: 15px; flex: none; }
.tkt-row { align-items: flex-start; }
.tkt-row .ob-row-main { gap: 2px; }
.tkt-num { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.tkt-dot { width: 8px; height: 8px; flex: none; margin-top: 7px; border-radius: 50%; background: transparent; }
.tkt-row.unread .tkt-dot { background: var(--primary); }
.tkt-side { max-width: 60%; }
.tkt-assignee, .tkt-wait { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tkt-assignee .ico, .tkt-wait .ico { width: 13px; height: 13px; }
.tkt-when { white-space: nowrap; }
/* The statuses by who has to act: the team (blue), Telescope (a deeper tint), the studio (amber), nobody (closed). */
.chip.tkt-st-new, .chip.tkt-st-in_progress { background: var(--tint); color: var(--link); }
.chip.tkt-st-with_telescope { background: var(--tint-2); color: var(--link); }
.chip.tkt-st-waiting_studio { background: var(--warn-bg); color: var(--warn-ink); }
.chip.tkt-st-closed { background: var(--surface-2); color: var(--muted); }
.chip.tkt-urgent-chip { background: var(--bad-bg); color: var(--bad-ink); }
.chip.tkt-urgent-chip .ico { width: 13px; height: 13px; }
.tkt-empty .empty-ico .ico { width: 26px; height: 26px; }

/* "New ticket": a page (a long form with files), its fields one under the other on a phone. */
.tkt-form-card { padding: 20px; }
.tkt-form { display: flex; flex-direction: column; gap: 4px; max-width: 880px; }
.tkt-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.tkt-field { display: flex; flex-direction: column; min-width: 0; margin-bottom: 14px; }
.tkt-field > label, .tkt-label { margin-bottom: 6px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.tkt-field input, .tkt-field select { width: 100%; height: 44px; font-size: 15px; }
.tkt-field [aria-invalid="true"] { border-color: var(--bad); }
.tkt-field .hint { margin-top: 6px; }
.tkt-field > .btn { align-self: flex-start; }
.tkt-field-error { margin: 6px 0 0; color: var(--bad-ink); font-size: 13px; font-weight: 500; }
.tkt-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: start; gap: 14px; }
.tkt-body-grid textarea { min-height: 220px; font-size: 15px; }
.tkt-checklist { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 13px; }
.tkt-checklist b { color: var(--heading); }
.tkt-checklist ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.tkt-checklist li { display: flex; align-items: flex-start; gap: 6px; }
.tkt-checklist .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--good); }
.tkt-urgent-line { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.tkt-urgent-line input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--bad); }
.tkt-urgent-line:has(input:checked) { border-color: var(--bad); background: var(--bad-bg); }
.tkt-urgent-line b { color: var(--heading); }
.tkt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tkt-actions .spacer { flex: 1 1 auto; }
.tkt-form .tkt-actions { justify-content: flex-end; }

/* The files picked for a message, before it is sent (a photo's preview, Remove). */
.tkt-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.tkt-pick { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 36px 6px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.tkt-pick img, .tkt-pick-ico { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; }
.tkt-pick-ico { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.tkt-pick-ico .ico { width: 20px; height: 20px; }
.tkt-pick-text { display: flex; flex-direction: column; min-width: 0; }
.tkt-file-name { overflow: hidden; color: var(--heading); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tkt-unpick { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; }
.tkt-pick-errors { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad-ink); font-size: 13px; }
.tkt-pick-errors p { display: flex; align-items: flex-start; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.tkt-pick-errors .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* A ticket: its header (the team's actions under it), the thread, the reply box. */
.tkt-head { padding: 20px; }
.tkt-head-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; }
.tkt-subject { min-width: 0; font-size: 20px; overflow-wrap: anywhere; }
.tkt-head-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tkt-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; margin: 14px 0 0; }
.tkt-meta dt { color: var(--muted); font-size: 12px; font-weight: 500; }
.tkt-meta dd { margin: 2px 0 0; color: var(--text); font-size: 13.5px; overflow-wrap: anywhere; }
.tkt-staff { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.tkt-staff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tkt-staff-row .spacer { flex: 1 1 auto; }
/* The assignee list and its "Assign" (the list alone saves nothing), kept together. */
.tkt-assign-wrap { display: inline-flex; align-items: center; gap: 6px; }
.tkt-assign { display: inline-flex; align-items: center; gap: 6px; }
.tkt-assign-label { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.tkt-assign select { min-width: 160px; }
.tkt-urgent-btn[aria-pressed="true"] { border-color: var(--bad); background: var(--bad-bg); color: var(--bad-ink); }
.tkt-dl-line { white-space: nowrap; }
.tkt-copy-card { padding: 16px 20px; }
.tkt-copy-card textarea { min-height: 180px; font-size: 13px; }

.tkt-thread { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 4px 20px 20px; list-style: none; }
.tkt-msg { padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.tkt-msg.from-team { border-color: var(--tint-2); background: var(--tint); }
/* An internal note: amber, dashed, and said in words (never sent to a studio). */
.tkt-msg.tkt-note { border: 1px dashed var(--warn-ink); background: var(--warn-bg); }
.tkt-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; }
.tkt-msg-head b { color: var(--heading); font-size: 13.5px; overflow-wrap: anywhere; }
.tkt-msg-when { margin-left: auto; }
.tkt-avatar { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 8px; background: var(--tint-2); color: var(--link); font-size: 11.5px; font-weight: 600; }
.tkt-note-tag, .tkt-only-team { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--warn-ink); font-size: 11.5px; font-weight: 600; }
.tkt-note-tag .ico { width: 12px; height: 12px; }
.tkt-body { color: var(--text); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tkt-event { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 4px; color: var(--text-2); font-size: 13px; }
.tkt-event > .ico { width: 14px; height: 14px; flex: none; color: var(--muted); }
.tkt-event.internal { color: var(--muted); }
.tkt-event-text { min-width: 0; overflow-wrap: anywhere; }

/* A message's files: a photo's thumbnail (full size in a new tab), a video that plays, a PDF's link; an upload's bar. */
.tkt-files { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.tkt-file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.tkt-file > .ico { width: 18px; height: 18px; flex: none; color: var(--muted); }
.tkt-file-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
a.tkt-file-name { color: var(--link); text-decoration: underline; }
.tkt-thumb { display: block; width: 96px; height: 72px; flex: none; overflow: hidden; border-radius: 8px; background: var(--surface-2); }
.tkt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tkt-thumb.empty { display: grid; place-items: center; color: var(--muted); }
.tkt-thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tkt-file.tkt-vid { flex-wrap: wrap; }
.tkt-video { display: block; width: min(100%, 360px); max-height: 240px; border-radius: 8px; background: var(--surface-2); }
.tkt-doc-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 8px; background: var(--surface-2); color: var(--link); }
.tkt-doc-ico .ico { width: 20px; height: 20px; }
.tkt-dl { width: 34px; height: 34px; flex: none; }
.tkt-file.failed { border-color: var(--bad); background: var(--bad-bg); }
.tkt-file.failed > .ico { color: var(--bad-ink); }
.tkt-failed-text { color: var(--bad-ink); font-size: 12.5px; overflow-wrap: anywhere; }
/* A file of this user's not uploading from this tab (cut by a reload, or on its way from another tab or device). */
.tkt-file.left { border-style: dashed; }
.tkt-file.left > .ico { color: var(--muted); }
.tkt-left-text { color: var(--text-2); font-size: 12.5px; overflow-wrap: anywhere; }
.tkt-file-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tkt-file.tkt-up.done > .ico { color: var(--good); }
.tkt-up .sets-progress { margin-top: 4px; }

.tkt-reply-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; }
.tkt-reply-card.is-note { border: 1px dashed var(--warn-ink); background: var(--warn-bg); }
.tkt-reply-card textarea { min-height: 120px; font-size: 15px; }
.tkt-reply-card textarea[aria-invalid="true"] { border-color: var(--bad); }
.tkt-reply-card .tkt-label { margin: 0; }
.tkt-mode { align-self: flex-start; }
.tkt-mode .ico { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.tkt-reply-line { margin: 0; }
.tkt-expired { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.tkt-expired p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font-weight: 500; }
.tkt-expired p .ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
/* The dialog: "Passed to Telescope", "Close", "Solved, close the ticket". */
#ticket-dialog { width: min(560px, calc(100vw - 32px)); }
#ticket-dialog textarea { min-height: 100px; }
/* Tasks › To do's "Tickets" (views/tasks.js). */
.tk-ticket-tag { white-space: nowrap; }

/* The requests (a model's name, her account e-mail, her profile picture): a studio's quick requests above its list, a
   profile picture change's guide line and its photo marked, the card at the top of a request's ticket. */
.tkt-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.tkt-quick-label { color: var(--text-2); font-size: 13px; font-weight: 500; }
.tkt-photo-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--tint); color: var(--text); font-size: 13px; line-height: 1.5; }
.tkt-photo-note > .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--link); }
.tkt-photo-note b { color: var(--heading); }
.tkt-photo-note .pg-howto { margin-top: 6px; }
.tkt-profile-tag { align-self: flex-start; margin-top: 2px; padding: 0 6px; border-radius: 999px; background: var(--tint-2); color: var(--link); font-size: 11px; font-weight: 600; }
.tkt-request { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px; border-color: var(--tint-2); background: var(--tint); }
.tkt-request-label { color: var(--link); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.tkt-request-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tkt-request-what { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
.tkt-request-what b { color: var(--heading); }
.tkt-request-value { color: var(--heading); font-weight: 600; user-select: all; }

@media (max-width: 640px) {
  /* (four tabs for the team: two rows on a phone, never a hidden scroll; as .sets-list-seg) */
  .tkt-toolbar .seg { flex: 1 1 100%; flex-wrap: wrap; }
  .tkt-toolbar .seg button { flex: 1 1 auto; }
  .tkt-toolbar .ob-select, .tkt-search { flex: 1 1 100%; min-width: 0; }
  .ob-toolbar .ob-search { flex: 1 1 100%; }
  .tkt-toolbar .ob-select select, .tkt-search input { width: 100%; min-width: 0; }
  .tkt-toolbar .tkt-new { flex: 1 1 100%; margin-left: 0; justify-content: center; }
  .tkt-row { flex-wrap: wrap; }
  .tkt-row .ob-row-main { flex: 1 1 calc(100% - 20px); }
  .tkt-row .ob-row-title { white-space: normal; }
  /* The chips, the assignee and the times go under the title, from its left edge. */
  .tkt-side { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 4px 8px; max-width: none; margin-left: 20px; }
  .tkt-form-card, .tkt-head { padding: 16px; }
  .tkt-row-2, .tkt-body-grid { grid-template-columns: minmax(0, 1fr); }
  /* (what to write: read before the box, not after it) */
  .tkt-checklist { order: -1; }
  .tkt-form .tkt-actions .btn { flex: 1 1 auto; justify-content: center; }
  .tkt-subject { font-size: 18px; }
  .tkt-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tkt-assign-wrap { flex: 1 1 100%; min-width: 0; }
  .tkt-assign { flex: 1 1 auto; min-width: 0; }
  .tkt-assign select { flex: 1; min-width: 0; }
  .tkt-assign-save { flex: none; }
  .tkt-thread { padding: 4px 12px 16px; }
  .tkt-msg { padding: 10px 12px; }
  .tkt-msg-when { flex: 1 1 100%; margin-left: 0; }
  .tkt-thumb { width: 72px; height: 56px; }
  .tkt-file.failed, .tkt-file.left { flex-wrap: wrap; }
  .tkt-picks { grid-template-columns: minmax(0, 1fr); }
  .tkt-reply-card { padding: 14px 16px; }
  .tkt-reply-card .tkt-actions .btn.primary { flex: 1 1 100%; justify-content: center; }
  /* (the three quick requests share the line under their label) */
  .tkt-quick-label { flex: 1 1 100%; }
  .tkt-quick .btn { flex: 1 1 auto; justify-content: center; }
  .tkt-request { padding: 12px 16px; }
}

/* ---- model name rules (build I, 2026-10-23: no pornographic model names; views/names.js) ---- */

/* The check under a name field (the wizard's Nickname, a name change request's new name), its suggestions and the rule. */
.nm-check { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 13px; line-height: 1.45; }
/* Empty: no room, but still rendered (an aria-live region hidden with display: none is not in the accessibility tree
   when its first verdict comes in, and a screen reader says nothing). */
.nm-check:empty { margin-top: 0; }
.nm-line { display: flex; align-items: flex-start; gap: 6px; color: var(--text-2); overflow-wrap: anywhere; }
.nm-line .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.nm-line .spinner.inline { margin-top: 1px; }
.nm-line.nm-ok { color: var(--good-ink); }
.nm-line.nm-bad { color: var(--bad-ink); font-weight: 500; }
.nm-line.nm-unknown, .nm-line.nm-wait { color: var(--muted); }
.nm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nm-try { color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.nm-chip { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--link); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; overflow-wrap: anywhere; }
.nm-chip:hover { background: var(--tint); border-color: var(--tint-2); }
.nm-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nm-wrong { font-size: 12.5px; }
.nm-rule { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; }
.nm-rule .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--muted); }

/* The review's name check (owners and admins). */
.nm-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.nm-badge .chip .ico { width: 13px; height: 13px; }
.chip.nm-chip-ok { background: var(--good-bg); color: var(--good-ink); }
.chip.nm-chip-bad { background: var(--bad-bg); color: var(--bad-ink); }
.nm-badge-why { color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.nm-badge-why .spinner.inline { margin-right: 6px; vertical-align: -3px; }

/* A studio's "New names needed" card (Tickets, Home, Onboarding): amber, its rows with "Request a new name". */
.nm-card { border-color: var(--warn-ink); }
.nm-card-head { flex-wrap: nowrap; align-items: flex-start; gap: 12px; justify-content: flex-start; }
.nm-card-head > div { flex: 1; min-width: 0; }
.nm-card-ico { display: inline-flex; flex: none; padding: 6px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); }
.nm-card-ico .ico { width: 18px; height: 18px; }
.nm-row { align-items: center; }
.nm-row .ob-row-title { white-space: normal; overflow-wrap: anywhere; }
.nm-why { overflow-wrap: anywhere; }
.nm-side { flex-direction: row; align-items: center; }
.nm-side .btn .ico, .nm-sent .ico { width: 14px; height: 14px; }
.nm-sent { padding: 3px 8px; font-size: 12px; text-decoration: none; }
.nm-sent:hover, .nm-sent:focus-visible { text-decoration: underline; }
/* Tasks › To do's "Names to change" (views/tasks.js). */
.tk-name-tag { white-space: nowrap; }

@media (max-width: 640px) {
  /* (a row's button goes under the name, full width: never squeezed beside a long name) */
  .nm-row { flex-wrap: wrap; }
  .nm-row .ob-row-main { flex: 1 1 100%; }
  .nm-side { flex: 1 1 100%; max-width: none; justify-content: flex-start; }
  .nm-side .btn { flex: 1 1 auto; justify-content: center; }
  .nm-card-head { padding-bottom: 8px; }
  .nm-chip { padding: 6px 12px; }
}

/* ---- her e-mail: Gmail or Outlook only (build K) ---- */
/* The line under "Contact email" / "Her new e-mail address" (email-rules.js paints it); the review's chip. */
.wz-email-check, .tkt-email-check { overflow-wrap: anywhere; }
/* (never hidden, an aria-live region whose words change: empty, it takes no room, as .nm-check) */
.wz-email-check:empty, .tkt-email-check:empty { margin: 0; }
.tag.ob-email-tag { margin-left: 6px; vertical-align: 1px; white-space: nowrap; }

@media (max-width: 640px) {
  /* (the chip goes under the address on a phone: a long address never pushes it out of the card) */
  .tag.ob-email-tag { display: flex; width: fit-content; margin: 6px 0 0; }
}