/* Company -> Photographer submissions (My Studio + Company Work).
 *
 * Uses the app's own design tokens so the section cannot drift into a private
 * look. The public upload page is standalone (like the client gallery), so it
 * reuses .dash-body's font/surface plus a small set of cg-* rules.
 */

/* The switches in the company profile wizard: the applicant-receipt one and
   the public page's "Apply" button. ONE rule, so the two cannot drift apart. */
.cp-receipt-toggle,
.cp-check {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 16px;
  font-size: 13px; color: #334155; cursor: pointer;
}
.cp-receipt-toggle input,
.cp-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #4f46e5; }
.cp-receipt-toggle b,
.cp-check b { font-weight: 700; }

/* "SMS sent 18:42" / "SMS failed …" under the applicant's mobile number. The
   two states must not look alike: one is an answer, the other is an unanswered
   application that looks exactly like a delivered one. */
.co-app-sms { margin-top: 3px; font-size: 10.5px; font-weight: 700; line-height: 1.35; }
.co-app-sms.ok { color: #047857; }
.co-app-sms.bad { color: #b91c1c; }

/* Sidebar: the B2B entry is deliberately quieter than the B2C tools. */
.sb-item.sb-soft { opacity: .72; }
.sb-item.sb-soft:hover { opacity: 1; }

/* ---- in-app section -------------------------------------------------- */
.co-wrap { max-width: 1180px; margin: 0 auto; }
.co-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.co-logo { width:54px; height:54px; border-radius:14px; object-fit:contain;
  background:#fff; border:1px solid var(--border, #e2e8f0); padding:6px; flex:none; }
.co-logo-ph { width:54px; height:54px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; font-size:22px;
  background:linear-gradient(135deg, var(--brand-500,#4f46e5), var(--accent-500,#06b6d4));
  color:#fff; flex:none; }
.co-title { margin:0; font-size:20px; font-weight:800; }
.co-sub { margin:2px 0 0; color:var(--text-2,#64748b); font-size:13px; }
.co-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.co-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin:16px 0; }
.co-kpi { background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px;
  padding:12px 14px; }
.co-kpi b { display:block; font-size:20px; line-height:1.2; }
.co-kpi span { color:var(--text-2,#64748b); font-size:12px; }
.co-panel { background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:16px;
  padding:16px; margin-bottom:14px; }
.co-panel h3 { margin:0 0 10px; font-size:15px; }
.co-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.co-tab { border:1px solid var(--border,#e2e8f0); background:#fff; color:var(--text-2,#475569);
  border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.co-tab.on { background:var(--brand-600,#4f46e5); border-color:var(--brand-600,#4f46e5);
  color:#fff; }
.co-table { width:100%; border-collapse:collapse; font-size:13px; }
.co-table th, .co-table td { padding:9px 8px; border-bottom:1px solid var(--border,#eef2f7);
  text-align:left; vertical-align:middle; }
[dir="rtl"] .co-table th, [dir="rtl"] .co-table td { text-align:right; }
.co-table th { color:var(--text-2,#64748b); font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; }
.co-row-actions { display:flex; gap:6px; flex-wrap:wrap; }
.co-chip { display:inline-flex; align-items:center; gap:4px; border-radius:999px;
  padding:2px 8px; font-size:11px; font-weight:700; }
.co-chip.ok { background:#ecfdf5; color:#047857; }
.co-chip.ai { background:#fef2f2; color:#b91c1c; }
.co-chip.unknown { background:#f1f5f9; color:#475569; }
.co-chip.warn { background:#fffbeb; color:#b45309; }
.co-thumb { width:42px; height:42px; border-radius:9px; object-fit:cover;
  background:#f1f5f9; border:1px solid var(--border,#e2e8f0); }
.co-muted { color:var(--text-3,#94a3b8); }
.co-empty { text-align:center; color:var(--text-2,#64748b); padding:26px 10px; }
.co-bar { position:sticky; bottom:10px; display:flex; gap:8px; align-items:center;
  flex-wrap:wrap; background:#0f172a; color:#fff; border-radius:14px; padding:10px 12px;
  margin-top:12px; box-shadow:0 10px 30px rgba(15,23,42,.18); }
.co-bar .co-muted { color:#cbd5e1; }
.co-bar .grow { flex:1; }
.co-field { margin-bottom:12px; }
.co-field label { display:block; font-size:12px; font-weight:700; color:var(--text-2,#475569);
  margin-bottom:6px; letter-spacing:.01em; }
.co-input { width:100%; border:1.5px solid #dbe1ec; border-radius:12px; padding:10px 12px;
  font-size:14px; background:#fff; color:#0f172a;
  transition:border-color .15s, box-shadow .15s, background .15s; }
.co-input:hover { border-color:#c7cfe0; }
.co-input:focus { outline:none; border-color:#6366f1; background:#fff;
  box-shadow:0 0 0 3px rgba(99,102,241,.16); }
.co-input::placeholder { color:#94a3b8; }
.co-veil { position:fixed; inset:0; z-index:1600; display:flex; align-items:center;
  justify-content:center; padding:16px; background:rgba(15,23,42,.55); }
.co-modal { background:#fff; border-radius:20px; width:min(560px,100%); max-height:88vh;
  overflow:auto; padding:22px; box-shadow:0 24px 70px rgba(15,23,42,.35); }
/* `hidden` must beat `.btn`'s own `display`. Inside a dialog, "Remove" and "Use
   the top logo" are hidden by ATTRIBUTE when there is nothing to remove — and a
   `.btn { display:inline-flex }` rule would otherwise paint them anyway, giving
   the person a button whose only job is to do nothing. */
.co-modal [hidden] { display: none !important; }
.co-modal h3 { margin:0 0 16px; font-size:18px; font-weight:800; letter-spacing:-.01em; }
.co-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px;
  padding-top:14px; border-top:1px solid #eef1f6; }
.co-meta-list { font-size:12px; }
.co-meta-list div { display:flex; gap:10px; border-bottom:1px solid #eef2f7; padding:5px 0; }
.co-meta-list span:first-child { min-width:150px; color:#64748b; }
.co-meta-list span:last-child { word-break:break-word; }
.co-alert { border:1px solid #fde68a; background:#fffbeb; color:#92400e; border-radius:12px;
  padding:10px 12px; font-size:13px; margin-bottom:12px; }

/* ---- public upload page ---------------------------------------------- */
.cg-page { min-height:100vh; }
.cg-wrap { max-width:720px; margin:0 auto; padding:22px 16px 42px; }
.cg-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.cg-logo { width:58px; height:58px; border-radius:14px; object-fit:contain;
  background:#fff; border:1px solid #e2e8f0; padding:6px; }
.cg-brand { font-size:19px; font-weight:800; }
.cg-sub { color:#64748b; font-size:13px; margin-top:2px; }
.cg-lang { text-align:right; margin-bottom:6px; }
[dir="rtl"] .cg-lang { text-align:left; }
.cg-card { background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:18px;
  box-shadow:0 8px 26px rgba(15,23,42,.06); }
.cg-card h2 { margin:0 0 6px; font-size:18px; }
.cg-note { color:#64748b; font-size:13px; line-height:1.6; }
.cg-drop { border:2px dashed #94a3b8; border-radius:16px; padding:28px 14px;
  text-align:center; cursor:pointer; transition:.15s; background:#f8fafc; }
.cg-drop.over { border-color:#4f46e5; background:#eef2ff; }
.cg-drop b { display:block; font-size:15px; }
.cg-drop span { color:#64748b; font-size:12px; }
.cg-progress { height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden;
  margin-top:12px; display:none; }
.cg-progress i { display:block; height:100%; width:0;
  background:linear-gradient(90deg,#4f46e5,#06b6d4); transition:width .15s; }
.cg-list { margin:12px 0 0; padding:0; list-style:none; font-size:13px; }
.cg-list li { display:flex; gap:10px; align-items:center; padding:7px 0;
  border-bottom:1px solid #eef2f7; }
.cg-list .cg-name { flex:1; word-break:break-all; }
/* Each sent photo shows its own 40px thumbnail (the picked file, not a server
   round-trip). The grey tile is the honest fallback: a HEIC/TIFF the browser
   cannot decode keeps the shape of the row instead of a broken-image icon. */
.cg-thumb { flex:0 0 auto; width:40px; height:40px; border-radius:9px;
  overflow:hidden; background:#eef2f7; border:1px solid #e2e8f0; display:block; }
.cg-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cg-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.cg-list li.cg-nothumb .cg-thumb::after {
  content:"🖼"; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font-size:15px; opacity:.5;
}
.cg-list li.cg-nothumb .cg-thumb img { display:none; }
/* The per-link ceiling, stated where the files are chosen. */
.cg-limit { margin: 6px 0 0; font-size: 12px; color: #64748b; }
.cg-ok { color:#047857; font-weight:700; }
.cg-err { color:#b91c1c; font-weight:700; }

/* ---- entry permits + the public application form ------------------------ */
/* One field style for the permit request, matching the dashboard's inputs so the
   public page and the app read as one product. */
.cg-field { margin: 12px 0; }
.cg-field label {
  display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: #475569;
}
.cg-field .co-input { width: 100%; }
textarea.co-input { resize: vertical; min-height: 74px; font: inherit; }
.cg-wide { width: 100%; margin-top: 4px; }
/* The permit state on the uploader: a quiet line, not a banner — the person can
   still upload (the request is filed); approval is the company's business. */
.cg-permit {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid #e2e8f0;
  background: #f8fafc; font-size: 12.5px;
}
.cg-permit b { color: #0f172a; }
.cg-permit span { color: #64748b; }
.cg-permit.approved { border-color: #a7f3d0; background: #f0fdf4; }
.cg-permit.rejected { border-color: #fecaca; background: #fef2f2; }
/* "Apply for account" sits under the card as its own quiet strip. */
.cg-apply {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  border: 1px dashed #cbd5e1; background: #f8fafc; font-size: 12.5px; color: #475569;
}
.cg-apply b { color: #0f172a; }
.cg-apply .btn { margin-inline-start: auto; }
.cg-apply.ok { border-style: solid; border-color: #a7f3d0; background: #f0fdf4; }
.cg-account { background:#eff6ff; border:1px solid #bfdbfe; border-radius:14px;
  padding:12px 14px; margin-bottom:13px; font-size:13px; }
/* ---- standalone pages: the two things the SPA's Tailwind build gave them ----
   This page (and the invite uploader it hosts) does NOT load the SPA bundle: it
   is a one-recipient page opened from an SMS. Two of Tailwind's preflight rules
   were therefore missing, and both only showed up on a phone:

   1. `box-sizing: border-box`. Without it every `width:100%` control was 27px
      WIDER than its container (its own padding + border added on top), so the
      Subject / Location / Caption fields ran past the card's rounded edge and
      off the screen — the desktop card is wide enough to hide the overflow in
      its padding, which is why it looked fine there.
   2. the `.btn` BASE class. `design.css` only defines the SKINS
      (`.btn-primary`, `.btn-ghost`…), so `<a class="btn btn-primary">` was an
      INLINE element wearing a padded background: in a flex row that is
      invisible (children are blockified), but inside `.cg-account` the pill was
      painted ACROSS the sentence it was supposed to sit under ("Sign in"
      covering the words). */
.cg-page,
.cg-page *,
.cg-page *::before,
.cg-page *::after { box-sizing: border-box; }
.cg-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
/* The sentence, then its button — never on top of each other. The text keeps a
   sensible measure and the button drops to its own line when the card is
   narrow, instead of being drawn through the words. */
.cg-account { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.cg-account b { flex: 1 1 200px; min-width: 0; margin: 0; }
.cg-account .btn { flex: 0 0 auto; }.cg-secure { background:#fffbeb; border:1px solid #fde68a; border-radius:14px;
  padding:12px 14px; margin-top:13px; font-size:13px; }
.cg-secure form { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.cg-secure input { flex:1; min-width:180px; border:1px solid #94a3b8; border-radius:9px;
  padding:8px 10px; }
.cg-foot { text-align:center; color:#94a3b8; font-size:11px; margin-top:18px; }
.cg-bad { max-width:560px; margin:60px auto; text-align:center; }
.cg-bad h1 { font-size:22px; margin:0 0 8px; }
.cg-bad p { color:#64748b; }

@media (max-width: 720px) {
  .co-table thead { display:none; }
  .co-table tr { display:block; border-bottom:1px solid #eef2f7; padding:8px 0; }
  .co-table td { display:flex; justify-content:space-between; gap:12px; border:0;
    padding:3px 0; }
  .co-table td::before { content:attr(data-l); color:#94a3b8; font-size:11px;
    font-weight:700; text-transform:uppercase; }
  .co-actions { width:100%; margin-left:0; }
}

/* ---- 2026-10-17: richer B2B dashboard ------------------------------- */
.co-hero {
  background: linear-gradient(120deg, #eef2ff 0%, #ecfeff 55%, #fdf4ff 100%);
  border: 1px solid #dbeafe; border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(79, 70, 229, .08);
}
.co-kpi { position: relative; overflow: hidden; cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s; }
.co-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: #a5b4fc; }
[dir="rtl"] .co-kpi::before { inset: 0 0 0 auto; }
.co-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15,23,42,.10);
  border-color: #c7d2fe; }
.co-kpi-violet::before { background: linear-gradient(#7c3aed, #c026d3); }
.co-kpi-amber::before { background: linear-gradient(#f59e0b, #f97316); }
.co-kpi-green::before { background: linear-gradient(#10b981, #059669); }
.co-kpi-blue::before { background: linear-gradient(#3b82f6, #06b6d4); }
.co-kpi-slate::before { background: linear-gradient(#64748b, #94a3b8); }
.co-kpi b { font-size: 22px; }
.co-pill { font-style: normal; display: inline-block; min-width: 18px; padding: 1px 6px;
  margin-inline-start: 4px; border-radius: 999px; background: #eef2ff; color: #4338ca;
  font-size: 10.5px; font-weight: 800; }
.co-tab.on .co-pill { background: rgba(255,255,255,.22); color: #fff; }
.co-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 700; color: var(--text-2, #475569); }
.co-sort select { border: 1px solid var(--border, #e2e8f0); border-radius: 9px;
  padding: 6px 8px; font-size: 12px; background: #fff; }
.co-dir { min-width: 38px; justify-content: center; font-weight: 800; }
.co-viewseg { margin-inline-start: auto; display: flex; gap: 4px; }
.co-viewseg .co-tab { border-radius: 10px; }
.co-table-scroll { overflow-x: auto; }
.co-menu-wrap { position: relative; display: inline-block; }
.co-menu { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 60;
  min-width: 170px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 16px 36px rgba(15,23,42,.16); padding: 5px; display: none; }
.co-menu.open { display: block; }
.co-menu button { display: block; width: 100%; text-align: start; border: 0;
  background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  cursor: pointer; color: #334155; }
.co-menu button:hover { background: #f1f5f9; }
.co-menu button.co-danger { color: #b91c1c; }
.co-menu button.co-danger:hover { background: #fef2f2; }
.co-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px;
  border-radius: 999px; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626;
  font-size: 14px; font-weight: 800; cursor: pointer; line-height: 1; }
.co-x:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.co-modal { position: relative; }
.co-sig-f { font-weight: 700; color: #334155; white-space: nowrap; }
.co-sig-v { color: #0f172a; word-break: break-word; }
.co-sig-m { color: #64748b; font-size: 12px; }
.co-raw { margin-top: 12px; }
.co-raw summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #4f46e5; }
.co-btn-copy { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.co-btn-download { background: #4f46e5; color: #fff; }
.co-btn-delete { background: #dc2626; color: #fff; }
.co-btn-delete:hover { background: #b91c1c; }
.co-btn-clear { background: #f59e0b; color: #1f2937; font-weight: 800; }
.co-btn-clear:hover { background: #d97706; color: #fff; }
.co-bar-count b { font-size: 16px; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 12px; margin-top: 12px; }
.co-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  overflow: hidden; transition: transform .12s, box-shadow .12s, border-color .12s; }
.co-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,.10); }
.co-card.on { border-color: #6366f1; box-shadow: 0 0 0 2px #c7d2fe inset; }
.co-card-top { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 0; }
.co-card-img { width: 100%; height: 130px; object-fit: cover; background: #f1f5f9; display: block; }
.co-card-body { padding: 9px 10px 11px; }
.co-card-name { font-size: 12.5px; font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.co-card-meta { font-size: 11.5px; color: #64748b; margin-top: 3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.co-card-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.co-card-foot .co-row-actions { gap: 4px; }

/* ── 2026-10-17 polish pass: compact, modern, softer ───────────────────── */
.co-wrap { max-width: 1200px; }
.co-panel { border-color: #eef1f6; border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, .05); }
.co-hero { box-shadow: 0 12px 30px rgba(99, 102, 241, .10); }

/* Buttons: one pill system, in and out of the page. */
#companyView .btn, .co-modal .btn, .co-bar .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 700;
  line-height: 1; letter-spacing: .01em; border: 1px solid transparent;
  box-shadow: none; white-space: nowrap; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .12s,
              box-shadow .18s;
}
#companyView .btn:active, .co-modal .btn:active, .co-bar .btn:active {
  transform: translateY(1px);
}
#companyView .btn-primary, .co-modal .btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  box-shadow: 0 6px 16px rgba(99, 102, 241, .28);
}
#companyView .btn-primary:hover:not(:disabled),
.co-modal .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-1px); box-shadow: 0 10px 22px rgba(99, 102, 241, .34);
}
#companyView .btn-ghost, .co-modal .btn-ghost {
  background: #fff; color: #475569; border-color: #e6e9f2;
}
#companyView .btn-ghost:hover, .co-modal .btn-ghost:hover {
  background: #eef2ff; border-color: #c7d2fe; color: #4f46e5;
}
.co-btn-download { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.co-btn-download:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-1px); box-shadow: 0 8px 18px rgba(99, 102, 241, .3); }
.co-btn-delete { background: #fff; color: #dc2626; border-color: #fecaca; }
.co-btn-delete:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.co-btn-clear { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.co-btn-clear:hover { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.co-btn-copy { background: #eef2ff; color: #4338ca; border: 1px solid #dbe3ff; }
.co-btn-copy:hover { background: #e0e7ff; border-color: #c7d2fe; }
.co-modal-actions { align-items: center; }
.co-modal-actions #coCopyData { margin-inline-end: auto; }

/* Pills sit ON the surface, not on top of it. */
.co-chip { border: 1px solid transparent; padding: 3px 9px; font-size: 10.5px;
  font-weight: 700; letter-spacing: .02em; gap: 5px; line-height: 1.5; }
.co-chip.ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.co-chip.ai { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.co-chip.warn { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.co-chip.unknown { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

/* KPI tiles. */
.co-kpi { border-radius: 16px; border-color: #eef1f6; padding: 13px 16px;
  background: linear-gradient(180deg, #fff, #fbfbff); }
.co-kpi::before { width: 3px; border-radius: 0 4px 4px 0; }
[dir="rtl"] .co-kpi::before { border-radius: 4px 0 0 4px; }
.co-kpi b { font-size: 23px; letter-spacing: -.02em; }
.co-kpi span { margin-top: 2px; display: block; }

/* Accordion header + photographer search. */
.co-acc { width: 100%; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 2px 2px 12px; cursor: pointer;
  font: inherit; color: #0f172a; text-align: start; }
.co-acc-title { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.co-acc-meta { font-size: 11px; font-weight: 800; color: #4338ca;
  background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px;
  padding: 2px 8px; }
.co-acc-chev { margin-inline-start: auto; color: #94a3b8; font-size: 18px;
  transition: transform .2s ease; line-height: 1; }
.co-acc-chev.open { transform: rotate(180deg); }
.co-link-search { max-width: 340px; margin-bottom: 12px; border-radius: 12px; }
/* Search + Import/Export are one toolbar: the dialog and the list are the same data. */
.co-link-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.co-link-tools .co-link-search { flex: 1 1 240px; margin: 0; }

/* The one action that opens a whole workspace: brand gradient, not a ghost.
   The selectors carry `#companyView` because the page's own button rule is
   `#companyView .btn` (an id), which would otherwise flatten the shadow and
   radius set here. */
#companyView .co-link-tools .co-io-open {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 999px; padding: 10px 16px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  color: #fff; font-weight: 800; font-size: 12.5px; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(79, 70, 229, .28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#companyView .co-link-tools .co-io-open svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#companyView .co-link-tools .co-io-open:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(79, 70, 229, .34);
}
#companyView .co-link-tools .co-io-open:active { transform: translateY(0); }
#companyView .co-link-tools .co-io-open:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(6, 182, 212, .45);
}

/* Import / Export dialog */
.co-io-tabs { display: inline-flex; gap: 4px; background: #f1f5f9; padding: 4px;
  border-radius: 12px; margin-bottom: 14px; }
.co-io-tabs .co-tab { border: 0; background: transparent; }
.co-io-tabs .co-tab.on { background: #fff; color: #4338ca;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.co-io-radios { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px;
  font-weight: 700; margin: 6px 0 4px; }
.co-io-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 4px 12px; margin: 6px 0 14px; font-size: 12.5px; }
.co-io-field { display: flex; gap: 6px; align-items: center; }
.co-io-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 10px 0 4px; }
.co-io-card { border: 1px solid #e2e8f0; background: #fff; border-radius: 12px;
  padding: 12px 8px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; font: inherit; font-size: 11.5px; font-weight: 800; color: #475569;
  cursor: pointer; }
.co-io-card:hover { border-color: #c7d2fe; }
.co-io-card.on { border-color: #6366f1; background: #eef2ff; color: #3730a3;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.co-io-ic { font-size: 18px; line-height: 1; }
.co-io-actions { display: flex; gap: 8px; justify-content: flex-end;
  flex-wrap: wrap; margin-top: 16px; }
.co-io-drop { border: 2px dashed #cbd5e1; border-radius: 14px; background: #f8fafc;
  padding: 24px 16px; text-align: center; cursor: pointer; display: flex;
  flex-direction: column; gap: 6px; }
.co-io-drop b { font-size: 13px; color: #334155; }
.co-io-drop span { font-size: 11.5px; color: #94a3b8; }
.co-io-drop.drag, .co-io-drop:hover { border-color: #818cf8; background: #eef2ff; }
.co-io-check { display: flex; gap: 8px; align-items: center; font-size: 12.5px;
  font-weight: 700; margin: 12px 0 4px; }
.co-io-status { margin-top: 10px; font-size: 12px; color: #4338ca; }
.co-io-map { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 11.5px; color: #64748b; }
.co-io-sum { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
  font-size: 11.5px; }
.co-io-sum span { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 5px 11px; color: #475569; }
.co-io-sum span b { font-size: 13px; }
.co-io-sum .ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.co-io-sum .warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.co-io-sum .err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.co-io-table td, .co-io-table th { white-space: nowrap; }
.co-io-table td.co-note { white-space: normal; min-width: 150px; font-size: 11.5px;
  color: #64748b; }
.co-io-decide { display: inline-flex; border: 1px solid #e2e8f0;
  border-radius: 9px; overflow: hidden; }
.co-io-decide button { border: 0; background: #fff; font: inherit; font-size: 11px;
  font-weight: 800; padding: 5px 9px; color: #64748b; cursor: pointer; }
.co-io-decide button.on { background: #4f46e5; color: #fff; }
.co-io-conflicts-head { display: flex; gap: 10px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.co-io-conflicts-head span { display: flex; gap: 6px; }
.co-io-conflicts { display: flex; flex-direction: column; gap: 10px;
  max-height: 46vh; overflow: auto; padding-inline-end: 4px; }
.co-io-conflict { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px;
  background: #fff; }
.co-io-conflict-head { display: flex; gap: 8px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; font-size: 12.5px; }
.co-io-conflict-head b { font-size: 13px; }
.co-io-diff-head, .co-io-diff-row { display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; font-size: 11.5px; padding: 3px 0; }
.co-io-diff-head { color: #94a3b8; font-weight: 700; margin-top: 6px; }
.co-io-diff-label { color: #64748b; font-weight: 700; }
.co-io-old { color: #94a3b8; }
.co-io-new { color: #047857; font-weight: 800; }
.co-io-errlist { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
  border-radius: 10px; padding: 9px 12px; font-size: 11.5px;
  max-height: 32vh; overflow: auto; }
.co-io-errlist b { display: block; margin-bottom: 4px; }
.co-io-report-title { margin: 2px 0 10px; font-size: 14px; }
.co-io-busy { text-align: center; padding: 24px 0; font-size: 12.5px; color: #475569; }
.co-io-bar { height: 7px; border-radius: 99px; background: #eef2f7; overflow: hidden;
  margin: 0 auto 10px; max-width: 320px; }
.co-io-bar span { display: block; height: 100%; width: 38%; border-radius: 99px;
  background: linear-gradient(90deg, #818cf8, #4f46e5);
  animation: coIoBar 1.1s ease-in-out infinite; }
@keyframes coIoBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }

/* ---- the dialog wears the same indigo → cyan band as its button --------- */
.co-veil .co-modal.co-io-modal { padding: 0; overflow: hidden auto; }
.co-io-modal .co-modal-content {
  padding: 0 22px 6px;
  background:
    radial-gradient(520px 170px at 100% 0, rgba(6, 182, 212, .10), transparent 70%),
    radial-gradient(420px 150px at 0 0, rgba(99, 102, 241, .10), transparent 70%);
}
.co-io-modal .co-modal-content > h3 {
  position: relative; overflow: hidden;
  margin: 0 -22px 16px; padding: 20px 22px 18px;
  padding-inline-end: 52px;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 45%, #06b6d4 100%);
  color: #fff; font-size: 18px; letter-spacing: -.01em;
}
.co-io-modal .co-modal-content > h3::after {
  content: ""; position: absolute; top: -70px; inset-inline-end: -30px;
  width: 170px; height: 170px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); pointer-events: none;
}
.co-io-modal .co-modal-content > h3::before {
  content: ""; position: absolute; bottom: -56px; inset-inline-start: 30%;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255, 255, 255, .10); pointer-events: none;
}
.co-io-modal .co-x {
  top: 13px; inset-inline-end: 14px; z-index: 2;
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .55); color: #fff;
}
.co-io-modal .co-x:hover { background: #fff; border-color: #fff; color: #4f46e5; }
.co-io-modal .co-modal-actions {
  margin: 0; padding: 13px 22px 17px; background: #f8fafc;
  border-top: 1px solid #e8eefb;
}

.co-io-modal .co-io-tabs {
  background: #eef2ff; border: 1px solid #e0e7ff;
}
.co-io-modal .co-io-tabs .co-tab { font-weight: 800; color: #64748b; padding: 7px 16px; }
.co-io-modal .co-io-tabs .co-tab.on {
  background: linear-gradient(135deg, #4f46e5, #06b6d4); color: #fff;
  box-shadow: 0 6px 14px rgba(79, 70, 229, .28);
}

.co-io-modal .co-io-formats { gap: 10px; }
.co-io-modal .co-io-ic {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 10px; font-size: 17px; line-height: 1;
  background: #eef2ff; color: #4338ca;
}
.co-io-modal .co-io-card[data-io-format="xlsx"] .co-io-ic {
  background: #ecfdf5; color: #047857;
}
.co-io-modal .co-io-card[data-io-format="tsv"] .co-io-ic {
  background: #fffbeb; color: #b45309;
}
.co-io-modal .co-io-card.on {
  border-color: #6366f1;
  background: linear-gradient(180deg, #eef2ff, #ecfeff);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}
.co-io-modal .co-io-card.on[data-io-format="xlsx"] {
  border-color: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
}
.co-io-modal .co-io-card.on[data-io-format="tsv"] {
  border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .20);
}

.co-io-modal .co-io-drop {
  border-color: #a5b4fc;
  background: linear-gradient(180deg, #f5f3ff 0%, #ecfeff 100%);
}
.co-io-modal .co-io-drop::before {
  content: "↑"; display: grid; place-items: center;
  width: 42px; height: 42px; margin: 0 auto 2px;
  border-radius: 14px; background: #fff; color: #4f46e5;
  font-size: 20px; font-weight: 800;
  box-shadow: 0 8px 18px rgba(79, 70, 229, .18);
}
.co-io-modal .co-io-drop.drag,
.co-io-modal .co-io-drop:hover {
  border-color: #6366f1; background: linear-gradient(180deg, #eef2ff, #ecfeff);
}

.co-io-modal .btn-primary {
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px rgba(79, 70, 229, .26);
}
.co-io-modal .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  filter: brightness(1.06);
}
.co-io-modal .btn-primary:disabled {
  filter: grayscale(.35); opacity: .55; box-shadow: none;
}

.co-io-modal .co-io-report-title {
  display: inline-flex; align-items: center; gap: 8px; color: #3730a3;
}
.co-io-modal .co-io-report-title::before {
  content: ""; width: 4px; height: 16px; border-radius: 99px;
  background: linear-gradient(180deg, #4f46e5, #06b6d4);
}
.co-io-modal .co-io-conflict { border-inline-start: 3px solid #c7d2fe; }
/* The company's document list (permit letter / attached papers). */
.co-doc-list { display: flex; flex-direction: column; gap: 6px; }
.co-doc-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px;
  font-size: 12.5px;
}
.co-doc-row a { font-weight: 800; color: #4338ca; text-decoration: none; }
.co-doc-row a:hover { text-decoration: underline; }
.co-doc-row .co-muted { font-size: 11.5px; }.co-io-modal .co-io-map .co-chip.ok { background: #eef2ff; color: #4338ca; }
@media (max-width: 560px) {
  .co-io-modal .co-modal-content > h3 { font-size: 16px; }
  .co-io-modal .co-io-formats { gap: 6px; }
  .co-io-modal .co-io-card { padding: 10px 4px; font-size: 10.5px; }
}

/* A long metadata key must WRAP, not widen the table. */
.co-signals { table-layout: fixed; width: 100%; }
.co-signals th:nth-child(1), .co-signals td:nth-child(1) { width: 24%; }
.co-signals th:nth-child(2), .co-signals td:nth-child(2) { width: 20%; }
.co-signals th:nth-child(3), .co-signals td:nth-child(3) { width: 56%; }
.co-sig-f { white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  line-height: 1.45; }
.co-sig-v { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.co-sig-m { line-height: 1.55; }

/* A minimal red X in the corner of every company modal. */
.co-x { top: 12px; inset-inline-end: 12px; width: 32px; height: 32px;
  border: 0; background: transparent; color: #ef4444; font-size: 18px;
  font-weight: 700; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; transition: background .15s, color .15s; }
.co-x:hover { background: #fef2f2; color: #dc2626; border: 0; }
.co-modal h3 { padding-inline-end: 38px; }

/* Light selection bar: it belongs to the page now. */
.co-bar { position: sticky; bottom: 12px; background: #fff; color: #0f172a;
  border: 1px solid #e6e9f2; border-radius: 16px; padding: 10px 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .12); gap: 8px; }
.co-bar .co-muted { color: #64748b; }
.co-bar-count b { color: #4f46e5; }

/* Card grid: calmer, rounder, clickable as a whole. */
.co-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.co-card { border-radius: 18px; border-color: #eef1f6; cursor: pointer;
  user-select: none; background: #fff; }
.co-card:hover { transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .10); border-color: #e0e5f3; }
.co-card.on { border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18), 0 12px 26px rgba(79, 70, 229, .12); }
.co-card-media { position: relative; background: #f4f6fb; }
.co-card-img { height: 150px; }
.co-card-badge { position: absolute; top: 8px; inset-inline-start: 8px; }
.co-card-badge .co-chip { background: rgba(255, 255, 255, .94); color: #475569;
  border-color: transparent; box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
  backdrop-filter: blur(6px); }
.co-card-badge .co-chip.ok { color: #047857; }
.co-card-badge .co-chip.warn { color: #b45309; }
.co-card-check { position: absolute; top: 8px; inset-inline-end: 8px;
  width: 22px; height: 22px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .14); }
.co-card-check input { width: 15px; height: 15px; margin: 0;
  accent-color: #6366f1; pointer-events: none; }
.co-card-body { padding: 12px 14px 14px; }
.co-card-name { font-size: 13px; }
.co-card-meta { font-size: 11.5px; line-height: 1.5; color: #64748b; margin-top: 2px; }
.co-card-who b { color: #334155; font-weight: 800; }
.co-card-foot { margin-top: 10px; }
.co-card-foot .btn { padding: 6px 10px; font-size: 11.5px; }
.co-card-foot .co-row-actions .btn:first-child { padding-inline: 9px; }

/* Table rows breathe a little. */
.co-table th, .co-table td { padding: 10px 10px; }
.co-row-actions .btn { padding: 7px 12px; font-size: 11.5px; }

@media (max-width: 720px) {
  .co-signals { table-layout: auto; }
  .co-bar { flex-wrap: wrap; }
  .co-bar .btn { flex: 1; }
}

/* Fit the five KPIs on one row on a normal desktop width. */
.co-cards { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

/* The link row's three actions belong on ONE line; the date column must not
   break "2026-10-17" across two lines. */
.co-links-table td:last-child { min-width: 300px; }
.co-links-table .co-row-actions { flex-wrap: nowrap; }
.co-links-table th:nth-child(5), .co-links-table td:nth-child(5) {
  min-width: 100px; white-space: nowrap;
}
@media (max-width: 720px) {
  .co-links-table td:last-child { min-width: 0; }
  .co-links-table .co-row-actions { flex-wrap: wrap; }
}

/* Keep the link table INSIDE the panel: the action pills wrap to a second line
   instead of forcing a horizontal scrollbar. */
.co-links-table { font-size: 12px; }
.co-links-table th, .co-links-table td { padding: 9px 8px; }
.co-links-table td:last-child { min-width: 205px; }
.co-links-table .co-row-actions { flex-wrap: wrap; }
.co-links-table .co-row-actions .btn { padding: 6px 10px; font-size: 11px; }
.co-links-table th:nth-child(5), .co-links-table td:nth-child(5) {
  min-width: 88px;
}

/* Sortable photo columns ------------------------------------------------
   A header is a control, so it gets a hover wash, a persistent sort arrow on
   the active column and a muted ↕ hint on the others. */
.co-photos-table .co-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.co-photos-table .co-th-sort:hover { color: #4f46e5; background: #f5f3ff; }
.co-photos-table .co-th-sort:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
  border-radius: 6px;
}
.co-photos-table .co-th-sort .co-arrow {
  font-size: 10px;
  opacity: .38;
  transition: opacity .15s;
}
.co-photos-table .co-th-sort.on { color: #4338ca; }
.co-photos-table .co-th-sort.on .co-arrow { opacity: 1; }

/* Company Work: search + sort toolbar (works on the payload already loaded). */
.cw-tools { margin: 0 0 14px; }
.cw-tools .co-input { flex: 1 1 220px; max-width: 300px; }
.cw-tools .co-note { margin: 0; }

/* ---- Company Work dashboard (photographer side) -------------------------
   Three shelves with one job each: the totals, the companies they work with,
   the permits they asked for. Same cards/borders/radii as the rest of the B2B
   side, so this does not look like a second product. */
.cw-sec { margin-top: 24px; }
.cw-sec-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cw-sec-head h2 { margin: 0; font-size: 16px; font-weight: 800;
  letter-spacing: -.01em; }
/* A shelf collapses: the heading is the button, so the whole title is the hit
   area and the caret is the only new furniture. `aria-expanded` carries the
   state; `.collapsed` only turns the caret. */
.cw-sec-title { margin: 0; font-size: 16px; font-weight: 800;
  letter-spacing: -.01em; }
.cw-sec-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-inline-start: -6px; padding: 4px 8px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; color: inherit; text-align: start;
}
.cw-sec-toggle:hover { background: #eef2ff; }
.cw-sec-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.cw-caret { display: inline-block; font-size: 10px; line-height: 1;
  color: #64748b; transform-origin: 50% 45%;
  transition: transform .15s ease; }
.cw-sec.collapsed .cw-caret { transform: rotate(-90deg); }
/* RTL: the closed caret points to the start of the line, which is the right. */
html[dir="rtl"] .cw-sec.collapsed .cw-caret { transform: rotate(90deg); }
.cw-sec-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-cards { margin-bottom: 4px; }
/* ONE company per line, stacked. A company is not a tile: everything on it
   (name, when, how much, what you can do) is read left-to-right and acted on,
   so side-by-side cards turned four buttons into four narrow columns and made
   the list hard to scan. A column of rows reads like the list it is. */
.cw-companies { display: flex; flex-direction: column; gap: 10px; }
.cw-co { display: flex; gap: 14px; align-items: center;
  padding: 14px 16px; background: #fff; border: 1px solid #eef1f6;
  border-radius: 16px; min-width: 0; }
/* The mark keeps its size whichever way the row lays out. */
.cw-co-logo { width: 48px; height: 48px; border-radius: 12px; flex: none;
  object-fit: contain; background: #f8fafc; border: 1px solid #e6e9f2;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #4338ca; letter-spacing: -.02em; }
/* Details and buttons share one wrapping row: the details GROW into the free
   space (so the buttons sit right), and when the buttons do not fit they wrap to
   a second line that starts under the name — not floating in the middle. */
.cw-co-main { flex: 1 1 240px; min-width: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px 16px; }
.cw-co-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  gap: 3px; }
.cw-co-name { font-size: 14.5px; font-weight: 800; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-co-meta { font-size: 11.5px; color: #64748b; line-height: 1.45; }
.cw-co-actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; }
/* An APPLICATION, not a connection: same row, quieter. The pill in the actions
   column is the whole message (waiting / approved / not approved), and once the
   company says yes it gains its own card in this same list. */
.cw-co-app { background: #fcfdff; border-style: dashed; }
.cw-co-app .cw-co-logo { opacity: .9; }
.cw-co-actions .btn { font-size: 11.5px; padding: 6px 10px; }
.cw-permits-table td { vertical-align: middle; }
/* Phones: there is no room beside the details, so the buttons take a line of
   their own across the row and wrap inside it (they used to spill sideways). */
@media (max-width: 720px) {
  .cw-co { align-items: flex-start; }
  .cw-co-actions { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .cw-tools .co-input { max-width: none; width: 100%; }
}

/* ---- photo viewer (the magnifier) ---------------------------------------
   Shared by the company page and Company Work. Dark stage, one image, arrows
   and a counter; Escape / ‹ › work too. */
.co-viewer {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 15, 30, .84);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.co-viewer-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 94vw;
  max-height: 94vh;
}
.co-viewer-stage { display: flex; align-items: center; justify-content: center; }
.co-viewer-img {
  max-width: 90vw;
  max-height: 78vh;
  border-radius: 14px;
  background: #0f172a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.co-viewer-img[hidden] { display: none; }
.co-viewer-video {
  max-width: 90vw;
  max-height: 78vh;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.co-viewer-video[hidden] { display: none; }
.co-viewer-wait {
  padding: 48px 26px;
  border-radius: 14px;
  background: #111c31;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.co-viewer-x {
  position: absolute;
  top: -12px;
  inset-inline-end: -12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.co-viewer-x:hover { background: #eef2ff; color: #4338ca; }
.co-viewer-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #e2e8f0;
  font-size: 12.5px;
  font-weight: 700;
}
.co-viewer-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(15, 23, 42, .6);
  color: #fff;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.co-viewer-nav:hover { background: rgba(99, 102, 241, .7); }

/* The magnifier button that opens it, in both photo lists. */
.co-zoom { padding: 6px 9px; }
.co-zoom svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover-to-zoom: the thumbnail itself becomes the magnifier (both photo
   lists), with the same glass on card images. Touch devices simply tap it. */
.co-thumb-btn {
  position: relative;
  flex: none;
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}
.co-thumb-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.co-thumb-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .45);
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease;
}
.co-thumb-btn:hover .co-thumb-zoom,
.co-thumb-btn:focus-visible .co-thumb-zoom { opacity: 1; }
.co-thumb-zoom svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.co-card-zoom {
  position: absolute;
  /* BOTTOM corner: the selection tick owns the top corner (both are 32px and
     used to sit on exactly the same spot). */
  bottom: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: rgba(15, 23, 42, .55);
  color: #fff;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity .15s ease;
}
.co-card:hover .co-card-zoom,
.co-card-zoom:focus-visible { opacity: 1; }
.co-card-zoom svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- video + featured (the star) -------------------------------------- */
/* A video's own first frame is its thumbnail, so the tile is a <video> and the
   ▶ badge is what tells a glance from a still. */
.co-card-video { object-fit: cover; background: #0f172a; }
.co-video-mark {
  position: absolute; inset-inline-start: 8px; bottom: 8px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .72); color: #fff; font-size: 11px;
  pointer-events: none;
}
.co-thumb-vid { position: relative; }
.co-thumb-vid .co-video-mark { width: 18px; height: 18px; font-size: 8px;
  inset-inline-start: 3px; bottom: 3px; }
.co-thumb { object-fit: cover; background: #0f172a; }

/* The star sits on the TOP corner of the picture, opposite the selection tick,
   and is always visible once it is on — a shortlist you cannot see is not one. */
.co-card-star {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3;
  width: 32px; height: 32px; border: 0; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  background: rgba(15, 23, 42, .55); color: #e2e8f0;
  opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.co-card:hover .co-card-star,
.co-card-star:focus-visible,
.co-card-star.on { opacity: 1; }
.co-card-star.on { background: #f59e0b; color: #fff; }
.co-card-star:hover { background: #f59e0b; color: #fff; }

/* The row button of the same flag (table view + card footer). */
/* THE FEATURED STAR. The base `.btn` colour is set later in the cascade, so the
   ON state needs to win outright — otherwise every star looks black and the
   column stops meaning anything. Off is a hollow grey star, on is a solid gold
   one, so the difference survives a screenshot and a printout. */
.co-star { color: #94a3b8; }
/* `#companyView .btn-ghost` is 1,1,0 — an id beats any plain class rule, which
   is exactly why the OFF star was as dark as the rest of the toolbar. */
#companyView .co-row-actions .btn.co-star,
#companyView .co-flag-col .btn.co-star,
.co-modal .co-row-actions .btn.co-star { color: #94a3b8; }
/* The ON state must not hang off `.co-row-actions`: the table puts the star in
   its own flag column, so a selector scoped to the row-action cluster never
   matched and a featured file kept the grey OFF star. Gold now applies wherever
   the button lives — table cell, card footer, or a dialog. */
#companyView .btn.co-star.on,
#companyView .btn.co-star[aria-pressed="true"],
#companyView .co-flag-col .btn.co-star.on,
#companyView .co-flag-col .btn.co-star[aria-pressed="true"],
#companyView .co-row-actions .btn.co-star.on,
#companyView .co-row-actions .btn.co-star[aria-pressed="true"],
.co-row-actions .btn.co-star.on,
.co-row-actions .btn.co-star[aria-pressed="true"] {
  color: #f59e0b !important;
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  font-weight: 800;
}

/* Actions belong on ONE line. The table has the room; in a card the footer may
   wrap as a whole (chip above, controls below) but the three controls must never
   split — "More data" under two icons reads as a broken button. */
.co-photos-table .co-row-actions { flex-wrap: nowrap; }
.co-photos-table td:last-child { white-space: nowrap; }
.co-card-foot { flex-wrap: wrap; row-gap: 8px; }
.co-card-foot .co-row-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex: 1 1 auto;
}
/* "✓ Downloaded" must not break after the tick when a column is narrow. */
.co-chip { white-space: nowrap; }

/* The PHOTO column (the second one) is deliberately NARROW: camera file names
   are long, and giving them 200px pushed the measured data off the row. The name
   is now clamped to TWO lines and then ellipsised, with the full text on the
   title attribute. The sortable headers still wrap, which keeps the table inside
   a laptop width without a horizontal scroll hiding Actions. */
.co-photos-table td:nth-child(2) { width: 190px; max-width: 190px; }
.co-photo-wrap { display: flex; gap: 8px; align-items: center; min-width: 0; }
.co-photo-name { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; word-break: break-word;
  overflow-wrap: anywhere; line-height: 1.35; min-width: 0; max-width: 132px; }
@media (max-width: 760px) {
  /* Stacked cards have room: show the name in full. */
  .co-photos-table td:nth-child(2) { width: auto; max-width: none; }
  .co-photo-name { max-width: 100%; -webkit-line-clamp: 2; }
}
.co-photos-table td:last-child { min-width: 180px; white-space: normal; }
.co-photos-table .co-th-sort { white-space: normal; }

/* Tighter cell padding for the eight-column photo table: 4px per side across
   eight columns is 64px, which is what lets Actions stay on screen. */
.co-photos-table th, .co-photos-table td { padding-inline: 6px; }
.co-photos-table td:nth-child(2) { min-width: 170px; }

/* On a narrow window the eight columns have to scroll; the ACTIONS cell stays
   pinned to the inline-end edge so the buttons are never the part that scrolls
   out of reach. */
.co-photos-table th:last-child,
.co-photos-table td:last-child {
  position: sticky;
  inset-inline-end: 0;
  background: #fff;
  box-shadow: -10px 0 14px -12px rgba(15, 23, 42, .22);
  z-index: 1;
}

/* Narrow windows: eight columns simply do not fit beside the sidebar. Camera and
   Taken are the two that carry no decision on this screen, so they step aside
   below 1150px and the rest (photo, photographer, genuine, status, actions) stay
   on one row with no horizontal scroll and no pinned overlay. */
@media (max-width: 1150px) {
  .co-photos-table th:nth-child(4), .co-photos-table td:nth-child(4),
  .co-photos-table th:nth-child(5), .co-photos-table td:nth-child(5) {
    display: none;
  }
  .co-photos-table th, .co-photos-table td { padding-inline: 5px; }
  .co-photos-table td:nth-child(2) { min-width: 138px; }
  .co-photos-table .co-row-actions .btn { padding: 7px 8px; }
}

/* The section strip above the panels: Photos / Applications / Permits. */
.co-tabs-main { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.co-tabs-main .co-tab { padding: 8px 14px; }

/* The sub-tab row a section shows above its own content: Received photos /
   Archived on Photos, Current / Archived on the two queues. A rule under it
   separates the switch from the shelf it switches. */
.co-tabs-sub {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.co-tabs-sub .co-tab { padding: 7px 14px; font-size: 12.5px; }

/* A one-glyph action inside a table row (file away / restore): square, so a
   row of them reads as a toolbar rather than as sentences. */
.co-icon-btn { padding: 7px 10px; line-height: 1; font-size: 14px; }
.co-icon-btn.is-off, .co-icon-btn[disabled] {
  opacity: .45; cursor: not-allowed;
}

/* A checkbox row inside a modal (the link's "require an entry permit"). */
.co-check {
  display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 10px;
  font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer;
}
.co-check input { margin-top: 2px; accent-color: #4f46e5; }

/* Applications / Permits tables: same card look, and the action cell may hold
   two buttons, so it wraps instead of squeezing them. The Portfolio column is the
   one that carries no decision on this screen, so it steps aside when the panel
   narrows — without that the Actions cell scrolls out of reach. */
.co-apps-table th, .co-apps-table td { padding-inline: 8px; }
.co-apps-table td:nth-child(1) { min-width: 130px; }
.co-apps-table td:last-child { min-width: 118px; }
/* Keep the date on one line and give the buttons a fixed, tidy width so the
   rows stay short; the cell still holds Reject under Approve. */
.co-apps-table td:nth-child(3), .co-apps-table td:nth-child(5) { white-space: nowrap; }
.co-apps-table .co-row-actions { flex-wrap: wrap; gap: 6px; }
.co-apps-table .co-row-actions .btn { width: 100%; justify-content: center; }
.co-apps-table a { color: #4f46e5; text-decoration: none; }
.co-apps-table a:hover { text-decoration: underline; }
/* The Applications/Permits tables have SEVEN columns, and the fourth is the one
   that carries no decision (Portfolio / Reason) — so it is what gives way when
   the panel narrows. The Admins table is excluded: it has four columns and its
   fourth is Actions, i.e. the Remove button. */
@media (max-width: 1240px) {
  .co-apps-table:not(.co-admins-table) th:nth-child(4),
  .co-apps-table:not(.co-admins-table) td:nth-child(4) { display: none; }
}

/* "Download by date": the calendar switch and the Jalali three-select row. */
.co-cal-type { display: flex; gap: 6px; margin: 2px 0 14px; }
.co-cal-type .co-tab { padding: 7px 14px; font-size: 12px; }
.co-date3 { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 8px; }
.co-date3 .co-input { width: 100%; }

/* Pager under the photo table. The range sits on the inline-start edge and the
   page numbers on the inline-end one, so the two read the same way in both
   directions. Nothing here is mirrored by hand: logical properties and a real
   flex row do the flipping, which is why the buttons are words ("Previous" /
   "Next") and not arrows. */
.co-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
.co-pager-range { color: #64748b; font-size: 12px; font-weight: 600; }
.co-pager-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.co-page-btn {
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.co-page-btn:hover:not(:disabled) { border-color: #c7d2fe; color: #4338ca; }
.co-page-btn:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.co-page-btn.on,
.co-page-btn.on:hover { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.co-page-btn:disabled { opacity: .45; cursor: default; }
.co-page-step { padding: 0 12px; }
.co-page-gap { padding: 0 3px; color: #94a3b8; }

@media (max-width: 560px) {
  .co-pager { justify-content: center; }
  .co-pager-range { width: 100%; text-align: center; }
}

/* Viewer actions: star, download now, metadata, delete. Monochrome line icons,
   the same language as the rest of the page; delete is the only red one. */
.co-viewer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 6px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(255, 255, 255, .18);
}
.co-viewer-act {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(15, 23, 42, .6);
  color: #fff;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.co-viewer-act svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.co-viewer-act:hover { background: rgba(99, 102, 241, .75); border-color: transparent; }
.co-viewer-act:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
/* Starred = filled star, the one state that must be readable at a glance. */
.co-viewer-act[data-v="star"].on { background: #f59e0b; border-color: #f59e0b; color: #1f2937; }
.co-viewer-act[data-v="star"].on svg { fill: currentColor; }
.co-viewer-danger:hover { background: #dc2626; }

/* "Starred (N) → download" appears only once something is starred. */
.co-viewer-starred {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  margin-inline-start: 6px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #f59e0b;
  color: #1f2937;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.co-viewer-starred[hidden] { display: none; }
.co-viewer-starred svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: currentColor;
  stroke-width: 1.6;
}
.co-viewer-starred b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(31, 41, 55, .16);
  font-size: 11.5px;
}
.co-viewer-starred:hover { background: #fbbf24; }

@media (max-width: 560px) {
  .co-viewer-bar { flex-wrap: wrap; gap: 10px; }
  .co-viewer-actions { padding-inline-start: 8px; margin-inline-start: 0; }
  .co-viewer-act { width: 36px; height: 36px; }
  .co-viewer-act svg { width: 16px; height: 16px; }
  .co-viewer-starred { height: 36px; padding: 0 11px; font-size: 11.5px; }
}

/* ---- public page address (dashboard) ---------------------------------- */
/* The prefix is a fixed label, not part of the field: the company types the
   slug only, so the URL cannot be broken by a missing or doubled slash. */
.co-slug-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.co-slug-prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: #475569; background: #f1f5f9;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 11px;
  white-space: nowrap;
}
.co-slug-row .co-input { flex: 1; min-width: 180px; }
@media (max-width: 560px) {
  .co-slug-row .co-input { min-width: 100%; order: 2; }
  .co-slug-row .btn { order: 3; width: 100%; }
}

/* An admin sees the address but does not get a field to type in: the input is
   the owner's. */
.co-slug-read {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: #0f172a; background: #f8fafc;
  border: 1px dashed #cbd5e1; border-radius: 10px; padding: 9px 12px;
  min-width: 180px;
}

/* ---- archive + tag autocomplete --------------------------------------- */
.co-archive.on { color: #0f766e; background: #ccfbf1; border-color: #5eead4; }
.co-card-filed { color: #0f766e; }
.co-archive-bar { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.co-archive-bar .co-input { flex: 1; min-width: 170px; }
.co-archive-bar select.co-input { max-width: 210px; }
.co-more { text-align: center; margin-top: 14px; }

/* The suggestion list hangs under its field: it is part of the form, not a
   floating panel, so it cannot be clipped by the modal's scroll box. */
.co-field-tag { position: relative; }
.co-suggest {
  position: absolute; z-index: 5; inset-inline: 0; top: calc(100% - 2px);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .14); padding: 4px; max-height: 208px;
  overflow-y: auto;
}
.co-suggest[hidden] { display: none; }
.co-suggest button {
  display: block; width: 100%; text-align: start; border: 0; background: transparent;
  padding: 7px 9px; border-radius: 7px; font-size: 12.5px; color: #334155;
  cursor: pointer;
}
.co-suggest button:hover { background: #f1f5f9; }

/* ---- reports ---------------------------------------------------------- */
.co-report-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin: 10px 0 6px; }
.co-report-date { display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #475569; font-weight: 700; }
.co-report-date .co-input { min-width: 150px; }
.co-report-table tfoot th {
  background: #f8fafc; border-top: 2px solid #e2e8f0; font-weight: 800;
}

/* ---- public page: bio + cover (dashboard) ------------------------------
   These are the page's own words and banner, so they are edited where the
   address is — one panel, one idea. */
.co-public-extra { margin-top: 14px; border-top: 1px dashed #e2e8f0; padding-top: 12px; }
.co-public-extra .co-field { margin-bottom: 12px; }
.co-bio { min-height: 84px; line-height: 1.6; }
.co-cover-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-cover-row .co-input { flex: 1; min-width: 200px; }
/* A fixed 16:9 thumb: the banner is cropped by the page, so the panel shows the
   same crop the page will, not the whole file's odd shape. */
.co-cover-thumb {
  width: 132px; height: 74px; border-radius: 10px; object-fit: cover;
  border: 1px solid #e2e8f0; background: #f1f5f9; flex: none;
}
.co-cover-none {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #94a3b8;
}
@media (max-width: 560px) {
  .co-cover-row .co-input { min-width: 100%; order: 3; }
  .co-cover-row .btn { order: 4; }
}

/* ---- 2026-10-18: application sample photos + upgraded apply modal ---------
   The application asks for real work (3–10 JPG/PNG photos), so the form carries
   the same dashed, brand-coloured drop zone the photographers' uploader uses —
   one affordance for "give us photos" across the product. */
/* ---- 2026-10-18: colour pass on the apply modal ------------------------
   The same card wearing the product's brand instead of a grey form: a gradient
   rule and title tile, one tinted panel around the identity fields, a brand
   "send code" button, a violet code row that turns green once verified, a warmer
   drop zone, message chips and a tinted footer for the primary action. Only
   styling — no rule about what the form accepts lives here. */
#cgModalRoot .co-modal.cga-modal {
  width: min(640px, 100%); padding: 0;
  border-radius: 22px;
  /* THREE fixed bands: a title bar, the scrolling fields, the action row. The
     form used to scroll all the way to the dialog's own edge, so a half-scrolled
     intro chip touched the border and read as "the form is going over its own
     frame". Nothing crosses the frame now: it slides under the title bar. */
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 80px rgba(30, 27, 75, .30);
}
#cgModalRoot .cga-modal-head {
  flex: none; position: relative;
  /* The brand strip lives on the header (not on the dialog's background): it
     must travel with the header, never be painted over by scrolling fields. */
  background:
    linear-gradient(90deg, #6366f1, #8b5cf6 45%, #06b6d4) top / 100% 6px no-repeat,
    #fff;
  padding: 20px 24px 12px;
  border-bottom: 1px solid #eef0ff;
  z-index: 2;
}
#cgModalRoot .cga-modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 14px 24px 18px;
  overscroll-behavior: contain;
}
#cgModalRoot .co-modal h3 { padding-inline-end: 40px; }
#cgModalRoot .cga-modal-head h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; color: #1e1b4b; margin: 0;
}
#cgModalRoot .cga-modal-head h3::before {
  content: ""; width: 30px; height: 30px; flex: none; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  box-shadow: 0 6px 16px rgba(99, 102, 241, .35);
}
/* A tall form in a centred flex box is one keyboard press away from being
   scrolled past its own title (the phone keyboard shrinks the visible area, the
   88vh dialog is then taller than it, and Safari drags the fixed layer up).
   Pin the dialog to the TOP of the veil, let the veil scroll, and measure the
   height against dvh so the on-screen keyboard is part of the maths. */
#cgModalRoot .co-veil {
  align-items: flex-start; justify-content: center;
  height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px;
}
#cgModalRoot .co-modal.cga-modal {
  max-height: min(88vh, calc(100dvh - 32px));
}
/* ---- 2026-10-26: stage 1, the account door ----------------------------
   The application stores a national ID, an address and ten photographs, and
   the company has to know there is a real, code-verified person behind them.
   So the dialog opens on WHO ARE YOU (log in / create an account) and only
   then shows the form; a signed-in photographer skips straight past it. */
#cgModalRoot .cga-boot {
  padding: 26px 18px; text-align: center; font-size: 13px; color: #64748b;
}
.cga-company {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #e2e8f0; border-radius: 14px; padding: 10px 12px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}
.cga-company-logo {
  width: 46px; height: 46px; border-radius: 12px; object-fit: contain;
  background: #fff; border: 1px solid #e2e8f0; padding: 4px; flex: 0 0 auto;
}
.cga-company-txt { min-width: 0; display: flex; flex-direction: column; }
.cga-company-txt em {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #64748b;
}
.cga-company-txt b {
  font-size: 15px; font-weight: 800; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cga-auth-intro {
  margin: 12px 0 14px; font-size: 12.5px; line-height: 1.65; color: #475569;
}
.cga-tabs {
  display: flex; gap: 6px; padding: 4px; margin-bottom: 14px;
  background: #eef2ff; border-radius: 12px;
}
.cga-tab {
  flex: 1 1 0; appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 13px; font-weight: 800; color: #4338ca;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.cga-tab.on { background: #fff; color: #1e1b4b; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.cga-pane { display: flex; flex-direction: column; gap: 10px; }
.cga-auth-go { align-self: stretch; justify-content: center; margin-top: 2px; }
.cga-code-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cga-code-row .co-input { flex: 1 1 130px; min-width: 0; text-align: center; letter-spacing: .18em; }
.cga-link {
  appearance: none; border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #4f46e5;
  text-decoration: underline; text-underline-offset: 3px;
}
.cga-sms { margin-top: 2px; }
/* What a PASSWORD account gets instead of a code: the reset that actually
   works, in place, so the refusal is never the end of the road. */
.cga-reset {
  margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 10px 12px; background: #f8fafc;
}
.cga-reset-note { font-size: 12.5px; line-height: 1.55; color: #475569; margin-bottom: 8px; }
.cga-reset-code { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cga-reset-code .co-input { width: 100%; }
.cga-reset-code #cgaResetCode { text-align: center; letter-spacing: .18em; }
.cga-row2 { display: flex; gap: 10px; }
.cga-row2 > .co-field { flex: 1 1 0; min-width: 0; }
.cga-terms {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.55; color: #334155;
}
.cga-terms input { margin-top: 3px; flex: 0 0 auto; }
/* The tick has to be able to SHOW the document, so the sentence is split around
   a real link (see company_apply.js). `flex: 1` keeps it on the checkbox's row. */
.cga-terms-txt { flex: 1 1 auto; }
.cga-terms-link {
  color: #4338ca; text-decoration: underline; text-underline-offset: 2px;
  font-weight: 700;
}
.cga-terms-link:hover { color: #3730a3; }
/* "You have already applied" — the notice that replaces the form, in three
   states: waiting (amber), accepted (green), refused (red). */
.cga-existing-state {
  display: flex; flex-direction: column; gap: 5px;
  border: 1px solid #dbe1ec; border-radius: 14px; padding: 12px 14px;
  background: #f8fafc;
}
.cga-existing-state b { font-size: 13.5px; font-weight: 800; }
.cga-existing-state span { font-size: 12.5px; line-height: 1.65; color: #475569; }
.cga-existing-ok .cga-existing-state { border-color: #bbf7d0; background: #f0fdf4; }
.cga-existing-ok .cga-existing-state b { color: #047857; }
.cga-existing-no .cga-existing-state { border-color: #fecaca; background: #fef2f2; }
.cga-existing-no .cga-existing-state b { color: #b91c1c; }
.cga-existing-wait .cga-existing-state { border-color: #fde68a; background: #fffbeb; }
.cga-existing-wait .cga-existing-state b { color: #b45309; }
@media (max-width: 560px) {
  .cga-row2 { flex-direction: column; gap: 0; }
  /* On a phone the badge label must not squeeze the name out of the card. */
  .cga-me { flex-wrap: wrap; }
  .cga-me-role { margin-inline-start: 0; text-align: start; width: 100%; }
}
/* "Applying as …" — the account's own identity, with the badge photo. The card
   is a STATEMENT: the name and the number the company will call, both already
   known, so the form below asks only about the work. */
.cga-me {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  border: 1px solid #dbeafe; border-radius: 16px; padding: 12px;
  background: linear-gradient(180deg, #f0f9ff, #eff6ff);
}
.cga-me-photo {
  position: relative; flex: 0 0 auto; width: 72px; height: 72px;
  border-radius: 50%; border: 2px dashed #93c5fd; background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; padding: 0;
}
.cga-me-photo.has-photo { border-style: solid; border-color: #bfdbfe; }
.cga-me-photo img { width: 100%; height: 100%; object-fit: cover; }
.cga-me-ph { font-size: 22px; line-height: 1; }
.cga-me-edit {
  position: absolute; inset: auto 0 0 0; font-style: normal;
  font-size: 9.5px; font-weight: 700; color: #fff; background: rgba(30,64,175,.82);
  padding: 3px 2px; line-height: 1.15; text-align: center;
}
.cga-me-photo.is-busy { opacity: .55; }
.cga-me-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
/* The capacity picked on stage 2, echoed on the "Applying as …" card: stage 3
   must still say which question that answer belonged to. */
.cga-me-role {
  margin-inline-start: auto; flex: 0 0 auto; text-align: end;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #64748b;
}
.cga-me-role > b { display: block; font-size: 12.5px; text-transform: none;
  letter-spacing: 0; color: #3730a3; }
/* ---- stage 2: "Who are you applying as?" ----
   Two full-width doors, one click each and no Continue button: the answer is a
   label, so making somebody press a second button to confirm it is noise. */
.cga-role { display: flex; flex-direction: column; gap: 10px; }
.cga-role-intro { font-size: 12.5px; line-height: 1.55; color: #475569; }
.cga-role-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  border: 1.5px solid #dbeafe; border-radius: 16px; padding: 14px;
  background: linear-gradient(180deg, #f8fbff, #eff6ff); cursor: pointer;
  font: inherit; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cga-role-btn:hover, .cga-role-btn:focus-visible {
  border-color: #6366f1; box-shadow: 0 8px 20px rgba(79,70,229,.14);
  transform: translateY(-1px); outline: none;
}
.cga-role-ico { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.cga-role-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cga-role-txt > b { font-size: 14.5px; font-weight: 800; color: #0f172a; }
.cga-role-txt > em { font-style: normal; font-size: 12px; line-height: 1.5;
  color: #475569; }
/* ---- stage 3: the compulsory face, directly above the sample picker ---- */
.cga-face {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  border: 1px solid #fecaca; border-radius: 16px; padding: 12px;
  background: linear-gradient(180deg, #fff7f7, #fff1f2);
  /* The whole card is the button: clicking the label, the hint or the empty
     space beside them opens the picker exactly like the circle does. */
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cga-face:hover,
.cga-face:focus-within {
  border-color: #f87171;
  box-shadow: 0 8px 20px rgba(220, 38, 38, .12);
}
/* The red frame is the star made visible: it turns blue-green the moment the
   photo lands, because a required field must also show when it is ANSWERED. */
.cga-face.is-done {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #f6fffa, #effaf3);
}
.cga-face.is-done:hover,
.cga-face.is-done:focus-within {
  border-color: #34d399;
  box-shadow: 0 8px 20px rgba(4, 120, 87, .12);
}
.cga-face-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column;
  gap: 3px; }
.cga-face-txt > b { font-size: 15px; font-weight: 800; color: #0f172a; }
.cga-face-txt > span { font-size: 12px; line-height: 1.5; color: #475569; }
.cga-face-state { font-style: normal; font-size: 11.5px; font-weight: 700;
  color: #dc2626; }
.cga-face.is-done .cga-face-state { color: #047857; }
/* A 72px circle: the label under the picture ("Add your photo") is what makes
   the control look tappable, so it must fit the circle without being clipped by
   its own border-radius. */
.cga-face .cga-me-photo { width: 72px; height: 72px; }
.cga-face .cga-me-edit { font-size: 8.5px; line-height: 1.12; padding: 3px 2px; }
/* The same amber highlight every other missing field gets, for the one
   compulsory control that is a button (the highlight lands on it, not on a
   `.co-field` input). */
.cga-me-photo.cga-need, .cga-face.cga-need {
  border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .22);
}
.cga-me-txt > em {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #64748b;
}
.cga-me-txt > b { font-size: 15px; font-weight: 800; color: #0f172a; }
.cga-me-txt > span { font-size: 12.5px; color: #475569; }
.cga-me-name { margin-top: 8px; }
.cga-login-msg {
  font-size: 12.5px; line-height: 1.5; border-radius: 12px; padding: 9px 12px;
  margin-top: 12px;
}
.cga-login-msg.is-bad { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.cga-login-msg.is-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.cga-login-msg.is-warn { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }
.cga-login-msg.is-info { background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; }
/* The identity fields read as ONE group on a soft tinted card. */
.cga-modal .cga-form {
  background: linear-gradient(180deg, #f6f7ff, #fbfcff);
  border: 1px solid #e6e9ff; border-radius: 16px; padding: 14px;
}
.cga-modal .cga-form .co-field label { color: #4338ca; }
.cga-modal .cga-form .co-input { background: #fff; }
/* "*" = compulsory. One style for the labels AND the legend under the intro,
   so the form never asks for a field it did not mark. */
.cga-req { color: #dc2626; font-weight: 800; }
.cga-required-note {
  font-size: 11.5px; line-height: 1.4; color: #64748b;
  margin: -2px 0 2px;
}
.cga-required-note .cga-req { margin-inline-end: 3px; }
/* The birthday picker FLOATS. In the grid it was a block, so opening it pushed
   every row below it down the dialog. Now it opens over them (upward when the
   field sits near the bottom of the visible area), with its own scroll if the
   room is short. */
.cga-birth-field { position: relative; }
.cga-birth-field .cw-date-pop {
  position: absolute; z-index: 30; margin: 0;
  inset-inline-start: 0; top: calc(100% + 6px);
  width: max(100%, 288px);
  max-width: min(340px, calc(100vw - 48px));
  overflow-y: auto;
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .20);
}
.cga-birth-field .cw-date-pop.opens-up { top: auto; bottom: calc(100% + 6px); }
/* A slightly tighter grid than the profile's: the floating panel has to fit in
   whatever room the dialog has left, and an internal scrollbar on a birthday
   picker is the least inviting thing in the form. */
.cga-birth-field .cw-cal { padding: 8px 8px 6px; }
.cga-birth-field .cw-cal-modes { margin-bottom: 6px; }
.cga-birth-field .cw-cal-day { padding: 5px 0; font-size: 11.5px; border-radius: 8px; }
.cga-birth-field .cw-cal-dows { margin: 6px 0 3px; font-size: 10px; }
/* The picked day is already written in the field beside the panel, so the extra
   "No date picked yet." line only costs the row that would otherwise be cut. */
.cga-birth-field .cw-date-foot { display: none; }
/* "Send code" is an action, not a whisper: brand tint instead of ghost grey. */
#cgModalRoot .cga-modal .cga-otp-send {
  background: #eef2ff; border-color: #c7d2fe; color: #4338ca;
}
#cgModalRoot .cga-modal .cga-otp-send:hover:not(:disabled) {
  background: #e0e7ff; border-color: #a5b4fc; color: #3730a3;
}
/* The code row is highlighted while it is the thing to do, then turns green. */
.cga-modal .cga-otp-row {
  background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 14px;
  padding: 12px; margin-bottom: 12px;
}
.cga-modal .cga-otp-row.is-ok { background: #ecfdf5; border-color: #a7f3d0; }
.cga-modal .cga-otp-row.is-ok .co-input { border-color: #6ee7b7; }
/* Photos: a warmer target than plain grey, with the camera in a bubble. */
.cga-modal .cga-drop {
  background: linear-gradient(180deg, #fbfcff, #f3f5ff);
  border-color: #c7d2fe;
}
.cga-modal .cga-drop:hover, .cga-modal .cga-drop:focus-visible {
  background: linear-gradient(180deg, #eef2ff, #e6ebff); border-color: #818cf8;
}
.cga-modal .cga-drop-ico {
  width: 46px; height: 46px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 22px;
  background: #eef2ff; box-shadow: inset 0 0 0 1px #dfe4ff;
}
/* Messages: a visible chip instead of a floating red line. */
.cga-modal .cga-error:not(:empty) {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 12px; padding: 9px 12px; margin-top: 10px;
}
.cga-modal .cga-ready.is-bad:not(:empty) {
  background: #fffbeb; border: 1px solid #fde68a; color: #b45309;
  border-radius: 12px; padding: 8px 12px;
}
/* Footer: a quiet tinted band, so the primary action has a floor to stand on.
   `flex: none` keeps it whole while the fields above it scroll. */
#cgModalRoot .cga-modal .co-modal-actions {
  flex: none;
  margin-top: 0; padding: 14px 24px 18px; border-top: 1px solid #eef0ff;
  background: linear-gradient(180deg, #fbfcff, #f6f7ff);
}
#cgModalRoot .cga-modal .btn-primary {
  background: linear-gradient(135deg, #4f46e5, #7c3aed 60%, #0ea5e9);
  box-shadow: 0 10px 24px rgba(79, 70, 229, .30);
}
#cgModalRoot .cga-modal .btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
#cgModalRoot .cga-modal .btn-primary:disabled { opacity: .5; box-shadow: none; }
/* `hidden` has to win over the components' own display rules: a `.btn` is
   inline-flex, so a "hidden" Verify button stayed on screen after a successful
   code check. One rule covers the code row, the progress bar and the badges. */
#cgModalRoot .cga-modal [hidden] { display: none !important; }
/* A disabled button has to LOOK disabled: "Send again" is locked while the code
   is in flight, and the submit is locked until the form is ready. */
#cgModalRoot .cga-modal .btn:disabled { opacity: .55; cursor: not-allowed; }
.cga-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cga-form .co-field { margin: 0; }
.cga-form .cga-full { grid-column: 1 / -1; }
/* ---- the application's three sections (2026-10-29) --------------------
   One long form became three, with Next/Previous, because the accreditation
   form is the longest thing in the product and a single scroll made it look like
   paperwork. Each section is its own grid INSIDE the tinted card, so the two
   columns of fields line up exactly as they did before. Only one section is ever
   in the layout: the hidden ones keep their inputs (and their values) in the
   DOM, which is how going back and forth loses nothing. */
.cga-step {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cga-step[hidden] { display: none; }
.cga-step-title h4 {
  margin: 0; font-size: 14.5px; font-weight: 800; color: #1e1b4b;
  outline: none;
}
.cga-step-title p {
  margin: 3px 0 0; font-size: 11.5px; line-height: 1.5; color: #64748b;
}
/* The step's own red line, INSIDE it and at the top: when "Next" is refused the
   answer is the first thing read, not something below the fold. */
.cga-step-err {
  font-size: 12px; line-height: 1.5; border-radius: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: #b45309;
  padding: 8px 11px;
}
.cga-step-err[hidden] { display: none; }
.cga-step-err b { font-weight: 800; }
/* The indicator: "Step 3 of 5", a bar, and five dots with the two gates already
   ticked. It sits above the fields, under the fixed title bar. */
.cga-steps { margin: 12px 0 10px; }
.cga-steps-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
}
.cga-steps-head b { font-size: 12.5px; font-weight: 800; color: #4338ca; }
.cga-steps-head span {
  margin-inline-start: auto; font-size: 11.5px; font-weight: 700;
  color: #64748b; text-align: end;
}
.cga-steps-track {
  height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden;
}
.cga-steps-track i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #06b6d4);
  transition: width .25s ease;
}
.cga-steps-dots {
  /* NO `gap`: the rail is drawn from dot CENTRE to dot CENTRE, so a gap would
     leave a 6px hole in every segment. */
  list-style: none; display: flex; gap: 0; margin: 8px 0 0; padding: 0;
}
.cga-steps-dots li {
  /* The number sits in the MIDDLE of its cell, and the segment into it is
     absolute, so all five read the same. (Before 2026-10-29 the segment was a
     flexible filler INSIDE the item with the first one hidden: dot 1 ended up
     pinned to the far left with an empty gap beside it, and 1→2 had no line at
     all — reported as "a large gap between 1 and 2".) */
  flex: 1 1 0; position: relative; display: flex; align-items: center;
  justify-content: center; min-width: 0;
}
.cga-steps-dots li::before {
  content: ""; position: absolute; top: 50%; inset-inline-end: 50%;
  width: 100%; height: 2px; border-radius: 999px; background: #e2e8f0;
  transform: translateY(-50%);
}
.cga-steps-dots li:first-child::before { display: none; }
.cga-steps-dots li i {
  flex: none; position: relative; z-index: 1;
  width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 800; font-size: 10.5px;
  background: #eef1f6; color: #64748b;
}
.cga-steps-dots li.is-done i { background: #dcfce7; color: #047857; }
.cga-steps-dots li.is-done::before { background: #86efac; }
.cga-steps-dots li.is-now i {
  background: linear-gradient(135deg, #4f46e5, #0ea5e9); color: #fff;
  box-shadow: 0 4px 10px rgba(79, 70, 229, .32);
}
/* The two sentences that used to live INSIDE the grid: the "fill this in once"
   note and the star legend now sit above it, ahead of the indicator. */
#cgModalRoot .cga-modal .cga-form-intro { margin: 12px 0 0; }
#cgModalRoot .cga-modal .cga-required-note { margin: 6px 0 0; }
/* Footer navigation: Cancel far left, Previous + Next together on the right. */
.cga-nav-gap { flex: 1 1 auto; }
.cga-prev { border: 1px solid #dbe1ec; background: #fff; }
/* ---- the institution letter (institution representatives only) ------- */
.cga-letter { margin-top: 16px; }
.cga-letter .cga-upload-head { display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px; }
.cga-letter .cga-upload-head b {
  font-size: 12px; font-weight: 700; color: #475569;
}
.cga-drop-letter { padding: 16px; }
.cga-letter-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cga-letter-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
}
.cga-letter-row .cga-letter-ico { font-size: 15px; flex: none; }
.cga-letter-row b {
  flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 700;
  color: #0f172a; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.cga-letter-row em {
  flex: none; font-style: normal; font-size: 10.5px; font-weight: 700;
  color: #64748b;
}
/* The remove button is the thumbnail's, without the absolute placement. */
.cga-letter-row .cga-thumb-x { position: static; flex: none; }
.cga-upload { margin-top: 16px; }
.cga-upload-head { display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px; }
.cga-upload-head b { font-size: 12px; font-weight: 700; color: #475569; }
.cga-count { margin-inline-start: auto; font-size: 11.5px; font-weight: 800;
  color: #4f46e5; background: #eef2ff; border: 1px solid #e0e7ff;
  border-radius: 999px; padding: 2px 9px; }
.cga-drop {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; padding: 22px 16px; border: 2px dashed #94a3b8;
  border-radius: 16px; background: #f8fafc; color: #475569; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cga-drop:hover, .cga-drop:focus-visible {
  border-color: #6366f1; background: #eef2ff; color: #4338ca;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12); outline: none;
}
.cga-drop.over { border-color: #4f46e5; background: #e0e7ff; }
.cga-drop.has-files { padding: 16px; }
.cga-drop-ico { font-size: 30px; line-height: 1.1; }
.cga-drop-main { font-size: 14px; font-weight: 700; color: #0f172a; }
.cga-drop-hint { font-size: 11.5px; color: #64748b; }
.cga-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px; margin-top: 10px; }
.cga-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 12px;
  overflow: hidden; border: 1px solid #e2e8f0; background: #f1f5f9; }
.cga-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cga-thumb-ph { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 20px; color: #94a3b8; }
.cga-thumb-x { position: absolute; top: 4px; inset-inline-end: 4px;
  width: 22px; height: 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(15,23,42,.7); color: #fff; font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .12s; }
.cga-thumb-x:hover { background: #dc2626; transform: scale(1.08); }
.cga-hint { min-height: 17px; margin-top: 6px; font-size: 11.5px; font-weight: 600;
  color: #64748b; }
.cga-hint.bad { color: #b91c1c; }
/* ---- artistic fields: a wrap of multi-select chips ---------------------
   Ten options, two lines on a phone, no dropdown to open. `.on` is the only
   state the chip has, and it is also `aria-pressed`, so the choice is readable
   by a screen reader instead of being colour-only. */
.cga-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cga-chip {
  border: 1.5px solid #dbe1ec; background: #fff; color: #475569;
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.cga-chip:hover { border-color: #a5b4fc; color: #4338ca; }
.cga-chip.on {
  background: #eef2ff; border-color: #6366f1; color: #312e81;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}
.cga-chip:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 1px; }
/* The one-line hint under the chips is part of the field, not a separate block. */
.cga-modal .cga-form .co-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; }
/* The sentence that explains the two-step workflow, at the top of the form. */
.cga-form-intro {
  border: 1px solid #e0e7ff; background: #eef2ff; border-radius: 12px;
  padding: 10px 12px; font-size: 12px; line-height: 1.55; color: #3730a3;
}
/* OTP: the phone row carries its own "send code" button, and the code row is
   only rendered after a send (an always-visible code field invites people to
   type a code they were never sent). A verified row turns green and locks. */
.cga-otp-line { display: flex; gap: 8px; align-items: stretch; }
.cga-otp-line .co-input { flex: 1; min-width: 0; }
.cga-otp-line .btn { flex: none; white-space: nowrap; }
/* A personal Bale/Eitaa id: the platform's mark sits INSIDE the field, so the
   row names the app without a second line of label. */
.cga-handle { display: flex; align-items: center; gap: 8px; }
.cga-handle .co-input { flex: 1 1 auto; min-width: 0; }
.cga-handle-ic {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  object-fit: contain; background: #fff; border: 1px solid #e2e8f0; padding: 3px;
}
.cga-otp-row[hidden] { display: none; }
.cga-otp-row.is-ok .co-input { border-color: #10b981; background: #f0fdf4;
  color: #047857; }
.cga-otp-row.is-ok .cga-hint { color: #047857; }
/* Per-thumbnail upload state: a picked photo starts uploading immediately, so
   the tile itself has to say how far it has got (and when it can be retried). */
.cga-thumb-ov { position: absolute; inset: 0; display: flex;
  flex-direction: column; justify-content: flex-end; gap: 4px; padding: 5px;
  background: rgba(15,23,42,.45); }
.cga-thumb-ov[hidden] { display: none; }
.cga-thumb-ov i { display: block; height: 4px; border-radius: 999px; background: #fff;
  transition: width .15s linear; }
.cga-thumb-ov em { font-style: normal; font-size: 9.5px; font-weight: 800;
  color: #fff; text-align: center; line-height: 1.25; }
.cga-thumb[data-state="failed"] { border-color: #fca5a5; cursor: pointer; }
.cga-thumb[data-state="failed"] .cga-thumb-ov { background: rgba(153,27,27,.62); }
.cga-thumb[data-state="failed"] em { font-size: 9px; }
/* The submit bar, directly above the action row. */
.cga-progress { margin-top: 14px; }
.cga-progress[hidden] { display: none; }
.cga-progress-track { display: block; height: 8px; border-radius: 999px;
  background: #eef1f6; overflow: hidden; }
.cga-progress-track i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6366f1, #06b6d4); border-radius: 999px;
  transition: width .25s ease; }
.cga-progress-label { display: block; margin-top: 5px; font-style: normal;
  font-size: 11.5px; font-weight: 700; color: #475569; }
.cga-ready { min-height: 16px; margin-top: 8px; font-size: 11.5px;
  font-weight: 600; color: #64748b; }
.cga-ready.is-bad { color: #b45309; }
.cga-error { min-height: 18px; margin-top: 8px; font-size: 12.5px; font-weight: 700;
  color: #b91c1c; }
/* ---- "your details first" reminder -------------------------------------
   Photos upload as they are picked, so the picker asks for the identity fields
   first. It is a CARD OVER the dialog (not a page navigation and not a second
   modal): the half-filled form stays exactly where it was, and "Upload anyway"
   is a real button — the reminder must never become a wall. */
.cga-gate { position: absolute; inset: 0; z-index: 6; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(15,23,42,.42); border-radius: inherit; }
.cga-gate-card { width: min(380px, 100%); background: #fff; border-radius: 16px;
  padding: 18px 18px 14px; box-shadow: 0 24px 60px rgba(15,23,42,.32);
  text-align: start; }
.cga-gate-card > b { display: block; font-size: 15px; font-weight: 800;
  color: #0f172a; }
.cga-gate-card > p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55;
  color: #475569; }
.cga-gate-card ul { margin: 10px 0 0; padding-inline-start: 18px;
  font-size: 12.5px; font-weight: 700; color: #b45309; }
.cga-gate-card li { margin: 3px 0; }
.cga-gate-acts { display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 420px) {
  .cga-gate-acts .btn { flex: 1 1 100%; justify-content: center; }
}
/* The field the reminder named, lit for a moment after "Fill the form". */
.co-field.cga-need .co-input { border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }
@media (max-width: 560px) {
  .cga-form { grid-template-columns: 1fr; }
  .cga-step { grid-template-columns: 1fr; }
  #cgModalRoot .cga-modal .co-modal-content { padding: 18px 16px 2px; }
  #cgModalRoot .cga-modal .co-modal-actions { padding: 12px 16px 16px; }
  .cga-modal .cga-form { padding: 12px; }
}
@media (max-width: 420px) {
  /* Three buttons on one line would each be a sliver on a small phone: the gap
     goes away and every button shares the footer equally. */
  #cgModalRoot .cga-modal .co-modal-actions { flex-wrap: wrap; }
  #cgModalRoot .cga-modal .co-modal-actions .btn {
    flex: 1 1 auto; justify-content: center;
  }
  .cga-nav-gap { display: none; }
}

/* ---- company review: the applicant's sample grid ------------------------- */
/* The review dialog sits BELOW the photo viewer (1500) but above the page: the
   viewer is launched from inside it, and a viewer behind its own dialog would
   look like nothing happened. Other dialogs stay at 1600, above both. */
.co-veil.co-app-review { z-index: 1450; }
.co-app-row { cursor: pointer; }
.co-app-row:hover td { background: #fafbff; }
.co-app-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; margin-top: 14px; }
.co-app-sample { position: relative; aspect-ratio: 1 / 1; padding: 0; cursor: zoom-in;
  border: 1px solid #e6e9f2; border-radius: 14px; overflow: hidden; background: #f8fafc;
  box-shadow: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.co-app-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-app-sample:hover { transform: translateY(-2px); border-color: #c7d2fe;
  box-shadow: 0 12px 24px rgba(79,70,229,.14); }
.co-app-samples-empty { margin-top: 14px; padding: 22px; text-align: center;
  color: #64748b; font-size: 13px; border: 1px dashed #e2e8f0; border-radius: 14px;
  background: #f8fafc; }

/* ---- the accreditation profile inside the review dialog ----------------
   Who the applicant IS, read once when the company decides whether to accredit
   them. A two-column definition list that collapses to one column on a phone,
   because this is the densest block in the product. */
.co-profile-dl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 10px 0 16px;
  border: 1px solid #eef1f6; border-radius: 14px; padding: 4px 14px;
  background: #fbfcff;
}
.co-profile-dl > div { display: flex; gap: 10px; min-width: 0;
  border-bottom: 1px dashed #eef1f6; padding: 8px 0; }
.co-profile-dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.co-profile-dl dt { flex: none; width: 108px; font-size: 11.5px; font-weight: 700;
  color: #64748b; }
.co-profile-dl dd { margin: 0; flex: 1; min-width: 0; font-size: 12.5px;
  font-weight: 600; color: #0f172a; word-break: break-word; }
.co-profile-dl dd.co-mono { font-variant-numeric: tabular-nums; }
/* The institution letter an institution representative attached: a document,
   not a sample, so it is a row of links under the profile rather than a tile in
   the photo grid. */
.co-app-letters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: -4px 0 14px; padding: 10px 12px;
  border: 1px solid #e0e7ff; border-radius: 12px; background: #f5f7ff;
}
.co-app-letters > b {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #4338ca;
}
.co-app-letters a {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  font-size: 11.5px; font-weight: 700; color: #1d4ed8; text-decoration: none;
  background: #fff; border: 1px solid #dbe1ec; border-radius: 999px;
  padding: 3px 10px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.co-app-letters a::before { content: "📄"; }
.co-app-letters a:hover { border-color: #6366f1; color: #312e81; }
@media (max-width: 620px) {
  .co-profile-dl { grid-template-columns: 1fr; }
  .co-profile-dl > div:nth-last-child(2) { border-bottom: 1px dashed #eef1f6; }
}

/* ---- the day permit: calendar + the review dialog ---------------------
   A Shamsi/Gregorian month grid with multi-select. Everything here is scoped so
   the SAME component can be dropped into any modal later without inheriting a
   dashboard rule. */
.cw-cal {
  border: 1px solid #e2e8f0; border-radius: 14px; background: #fbfcff;
  padding: 10px 10px 8px;
}
.cw-cal-modes { display: flex; gap: 6px; margin-bottom: 8px; }
.cw-cal-mode {
  border: 1.5px solid #dbe1ec; background: #fff; color: #475569;
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1;
}
.cw-cal-mode.on { background: #eef2ff; border-color: #6366f1; color: #312e81;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.cw-cal-head { display: flex; align-items: center; justify-content: space-between; }
.cw-cal-title { font-size: 13px; font-weight: 800; color: #0f172a; }
.cw-cal-nav {
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
  border: 1px solid #e2e8f0; background: #fff; color: #4338ca;
  font-size: 16px; line-height: 1; font-family: inherit;
}
.cw-cal-nav:hover { border-color: #6366f1; background: #eef2ff; }
.cw-cal-dows {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin: 8px 0 4px; font-size: 10.5px; font-weight: 700; color: #94a3b8;
  text-align: center;
}
.cw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cw-cal-pad { display: block; }
.cw-cal-day {
  border: 1px solid #e6ebf3; background: #fff; border-radius: 9px;
  padding: 7px 0; font: inherit; font-size: 12px; font-weight: 700;
  color: #0f172a; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cw-cal-day:hover:not(:disabled) { border-color: #6366f1; color: #4338ca; }
.cw-cal-day.on { background: #4338ca; border-color: #4338ca; color: #fff; }
/* Yesterday is not a request: greyed, struck through, and not clickable. */
.cw-cal-day.off { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.cw-cal-sel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 24px; }
.cw-cal-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
  border-radius: 999px; background: #eef2ff; color: #312e81;
  font-size: 11.5px; font-weight: 700;
}
.cw-cal-chip button {
  border: 0; background: transparent; color: #4338ca; cursor: pointer;
  font-size: 10px; line-height: 1; padding: 2px;
}
/* The single-date picker (birth date): the same grid, with Year + Month
   dropdowns in the header because a birthday is decades away, not a week. */
.cw-date-field { display: flex; gap: 8px; align-items: center; }
.cw-date-field .co-input,
.cw-date-field .inp-c { flex: 1 1 auto; min-width: 0; }
/* The button stays a single compact theme control: it must not wrap its label
   or grow into a circle beside the date field. The emoji was replaced by the
   app's own thin calendar glyph because an emoji renders as a coloured icon
   and cannot inherit the button's colour. */
.cw-date-btn {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.cw-date-ic {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cw-date-pop { margin-top: 8px; }
.cw-date-picks { display: flex; gap: 6px; align-items: center; min-width: 0; }
.cw-cal-select {
  border: 1px solid #dbe1ec; background: #fff; color: #0f172a;
  border-radius: 9px; padding: 6px 8px; font: inherit; font-size: 12px;
  font-weight: 700; max-width: 130px;
}
.cw-cal-select:focus { outline: 2px solid #c7d2fe; outline-offset: 1px; }
.cw-date-foot { margin-top: 8px; font-size: 12px; color: #475569; }
.cw-date-foot .cw-date-value { color: #0f172a; font-variant-numeric: tabular-nums; }

/* ---- one day OR a period (static/js/permit_dates.js) -------------------
   The switch that changes what a permit request MEANS, and the fields under it.
   The day pane re-uses .cw-cal above; the period pane is two .cw-date-field
   pickers side by side. `[hidden]` must win, so no `display` is set on .pd-pane. */
.pd-kinds, .cw-pkind {
  display: inline-flex; gap: 6px; margin: 4px 0 10px;
  padding: 4px; border-radius: 999px; background: #f1f5f9;
}
.pd-kind {
  border: 0; background: transparent; color: #475569; cursor: pointer;
  border-radius: 999px; padding: 7px 14px;
  font: inherit; font-size: 12px; font-weight: 800; line-height: 1;
}
.pd-kind:hover { color: #312e81; }
.pd-kind.on {
  background: #fff; color: #312e81;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
}
.pd-pane { min-width: 0; }
.pd-field { margin-bottom: 10px; }
.pd-field:last-child { margin-bottom: 0; }
.pd-field .pd-label { display: block; font-size: 11.5px; font-weight: 700;
  color: #64748b; margin-bottom: 5px; }
.pd-hint { margin-top: 6px; }
/* The two date fields are wider than a birth-date box, so the picker's own
   Year/Month selects must not be squeezed into an ellipsis. */
.pd-field .cw-date-pop { margin-top: 6px; }

/* ---- a PERIOD: one calendar, the whole span painted -------------------
   Airline behaviour: the first click is the departure, the second the return,
   and everything between them reads as one block. The two chips above say what
   was picked, in the calendar on screen, so a Shamsi reader never has to read a
   Gregorian date in the box. */
.pd-range-sum {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.pd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: #eef2ff; color: #312e81;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1px solid #e0e7ff;
}
.pd-range-arrow { color: #94a3b8; font-size: 13px; }
/* The chips read "from → to"; in a right-to-left page the flow runs the other
   way, so the glyph has to point the other way too. */
html[dir="rtl"] .pd-range-arrow { transform: scaleX(-1); }
.pd-clear {
  margin-inline-start: auto; border: 0; background: transparent;
  color: #64748b; cursor: pointer; font: inherit; font-size: 11.5px;
  font-weight: 700; text-decoration: underline;
}
.pd-clear:hover { color: #b91c1c; }
.pd-range-cal { border: 1px solid #e2e8f0; border-radius: 14px;
  background: #fbfcff; padding: 10px 10px 8px; }
/* The chips above already say which two days were picked, so the picker's own
   read-out line would just repeat them a third time. */
.pd-range-cal .cw-date-foot { display: none; }
/* Days strictly INSIDE the window: the fare-calendar block, not a second
   selected day (the two ends keep the solid .on colour). */
.cw-cal-day.in-range {
  background: #e0e7ff; border-color: #c7d2fe; color: #312e81;
}
.cw-cal-day.in-range:hover { background: #c7d2fe; }

/* "Update my details": the photo sits beside the note, not in a field grid. */
.cw-det { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.cw-det-photo {
  width: 84px; height: 84px; border-radius: 16px; object-fit: cover; flex: none;
  border: 2px solid #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
  background: #e2e8f0;
}
.cw-det-photo.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #94a3b8;
}
.cw-det-main { min-width: 0; }
.cw-det-pick { cursor: pointer; margin-top: 8px; }

/* ---- table tools: one search row, clickable headers ------------------- */
/* The same bar above Applications, Permits, Reports and Admins: the search box
   on one side, the shelf's exports on the other, the filtered count at the end.
   One row, because a toolbar that wraps onto three lines is not "uncluttered". */
.co-table-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 8px;
}
.co-table-bar .co-table-search { flex: 1 1 220px; max-width: 340px; }
.co-table-bar .co-actions { margin-inline-start: auto; display: flex;
  gap: 6px; flex-wrap: wrap; }
.co-table-bar .btn { padding: 7px 12px; font-size: 11.5px; }
.co-table-bar .co-note { margin: 0; min-width: 0; }

/* A header is a button. The photo library already taught this vocabulary
   (`.co-photos-table .co-th-sort`); the admin tables get the same one. */
.co-table .co-th-sort {
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: color .15s, background .15s;
}
.co-table .co-th-sort:hover { color: #4f46e5; background: #f5f3ff; }
.co-table .co-th-sort:focus-visible {
  outline: 2px solid #6366f1; outline-offset: -2px; border-radius: 6px;
}
.co-table .co-th-sort .co-arrow {
  font-size: 10px; opacity: .38; transition: opacity .15s;
}
.co-table .co-th-sort.on { color: #4338ca; }
.co-table .co-th-sort.on .co-arrow { opacity: 1; }
.co-table tbody tr[hidden] { display: none !important; }
.co-no-match td {
  padding: 18px 10px; text-align: center; color: #64748b;
  font-size: 12.5px; font-weight: 600;
}

/* The Reports chart: a card with a FIXED height, because Chart.js with
   `maintainAspectRatio:false` fills its parent and a parent without a height
   collapses to nothing. */
.co-rep-chart {
  position: relative; height: 300px; margin: 8px 0 16px;
  background: #fff; border: 1px solid #eef1f6; border-radius: 14px;
  padding: 14px 16px 10px; box-shadow: 0 6px 22px rgba(15, 23, 42, .04);
}
.co-rep-chart canvas { max-width: 100%; }

/* ---- the print sheet ------------------------------------------------- */
/* "Print / PDF" builds this block and puts `co-printing` on <body>. Everything
   else in the page is hidden for the duration, so the sheet is the whole
   document rather than a dashboard with a sidebar and a toolbar around it. */
.co-print-sheet { display: none; }
.co-print-sheet .co-print-title {
  margin: 0 0 4px; font: 800 20px/1.3 Inter, Arial, sans-serif; color: #0f172a;
}
.co-print-sheet .co-print-meta {
  margin: 0 0 14px; font: 500 11.5px/1.6 Inter, Arial, sans-serif;
  color: #64748b;
}
.co-print-sheet .co-print-chart {
  display: block; width: 100%; max-width: 700px; height: auto; margin: 0 0 14px;
}
.co-print-table {
  width: 100%; border-collapse: collapse;
  font: 400 12px/1.5 Inter, Arial, sans-serif; color: #0f172a;
}
.co-print-table th, .co-print-table td {
  padding: 7px 8px; border-bottom: 1px solid #e2e8f0; text-align: start;
  vertical-align: top;
}
.co-print-table thead th {
  background: #f1f5f9; font-weight: 800; color: #475569; white-space: nowrap;
}
.co-print-table tfoot th {
  background: #f8fafc; font-weight: 800; border-top: 2px solid #c7d2fe;
}
.co-print-table .co-num { text-align: center; font-variant-numeric: tabular-nums; }
.co-print-sub { font-size: 11px; color: #64748b; }

@media print {
  body.co-printing > * { display: none !important; }
  body.co-printing > .co-print-sheet { display: block !important; }
  body.co-printing { background: #fff !important; }
  .co-print-sheet { color: #000; }
  .co-print-table thead th { background: #f1f5f9 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .co-print-table tr { break-inside: avoid; page-break-inside: avoid; }
}

/* One permit, in full: the face, the identity, the day, the decision. */
.co-permit-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.co-permit-photo {
  width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex: none;
  border: 2px solid #fff; box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
  background: #e2e8f0;
}
.co-permit-photo.ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; color: #94a3b8;
}
.co-permit-name { font-size: 16px; font-weight: 800; }
.co-permit-row { cursor: pointer; }
.co-permit-row:hover { background: #f8fafc; }

/* ---- 2026-10-18: Company Profile dialog --------------------------------
   The public-page settings moved off the top of the dashboard into one modal.
   Two images (a square mark and a wide banner), the words, and the address —
   each edited where it is previewed, so Save is the only commit. */
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-grid .co-field { margin: 0; }
.cp-grid .cp-full { grid-column: 1 / -1; }
.cp-media-row { display: grid; grid-template-columns: 220px 1fr; gap: 14px;
  margin: 16px 0 4px; align-items: start; }
.cp-media { display: flex; gap: 12px; align-items: center;
  border: 1px solid #eef1f6; border-radius: 16px; padding: 12px;
  background: #fbfcff; min-width: 0; }
.cp-media b { display: block; font-size: 12.5px; color: #0f172a; }
.cp-media .co-note { font-size: 11.5px; line-height: 1.45; margin: 2px 0 8px; }
.cp-media-logo { flex-direction: column; text-align: center; align-items: stretch; }
.cp-media-logo > div:last-child { text-align: center; }
.cp-logo-preview, .cp-logo-img, .cp-logo-ph {
  width: 84px; height: 84px; border-radius: 18px; flex: none; margin: 0 auto;
}
.cp-logo-preview { display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e2e8f0; overflow: hidden; }
/* A third media slot: top logo, banner logo, cover. Wide screens keep the two
   marks side by side; the existing 620px rule stacks everything. */
@media (min-width: 621px) {
  .cp-media-row.cp-three { grid-template-columns: 170px 170px 1fr; }
}
/* Two buttons live in the banner slot ("choose" + "use the top logo"), and a
   170px column cannot hold them side by side — stack them under the preview. */
.cp-media-logo > div:last-child { display: flex; flex-direction: column; gap: 6px; }
.cp-media-logo > div:last-child .btn { width: 100%; justify-content: center; }
/* The banner preview that is really the top logo: dimmed, so "not uploaded yet"
   is visible at a glance without a second sentence. */
.cp-logo-fallback { opacity: .55; }
.cp-logo-img { object-fit: contain; background: #fff; display: block; }
.cp-logo-ph { display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: #eef2ff; color: #6366f1; }
.cp-cover-preview, .cp-cover-img, .cp-cover-ph {
  width: 100%; aspect-ratio: 21 / 9; border-radius: 12px; overflow: hidden;
  display: block; background: #eef1f6;
}
.cp-cover-img { object-fit: cover; }
.cp-cover-ph { display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #94a3b8; }
.cp-media-cover { flex-direction: column; align-items: stretch; }
.cp-media-cover > div:last-child { display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; }
.cp-media-cover .co-note { flex-basis: 100%; }
.cp-file-btn { position: relative; overflow: hidden; cursor: pointer; }
.cp-file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cp-slug-row { display: flex; align-items: stretch; gap: 6px; }
.cp-slug-row .co-slug-prefix { display: inline-flex; align-items: center;
  padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 12px;
  background: #f8fafc; font-size: 12.5px; color: #64748b; white-space: nowrap; }
.cp-slug-row .co-input { flex: 1; min-width: 0; }
.cp-msg { min-height: 18px; margin-top: 10px; font-size: 12.5px; font-weight: 700; }
@media (max-width: 620px) {
  .cp-grid, .cp-media-row { grid-template-columns: 1fr; }
  .cp-media-logo { flex-direction: row; text-align: start; align-items: center; }
  .cp-media-logo > div:last-child { text-align: start; }
}
.cp-hero-page { display: inline-flex; align-items: center; }

/* =====================================================================
   the profile WIZARD (2026-10-31)
   ---------------------------------------------------------------------
   "Edit company profile" is five steps + a Review instead of one long
   form. The shell is FIXED (progress track on top, actions at the bottom)
   and only the step body scrolls, so Continue is always on screen and
   nobody has to scroll past the watermark to find Save.
   ===================================================================== */
.co-modal.cp-wiz-modal {
  display: flex; flex-direction: column; overflow: hidden;
  width: min(940px, 100%); max-height: 92vh;
}
.cp-wiz-modal .co-modal-content { display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; }
.co-modal.cp-wiz-modal h3 { margin: 0 0 10px; }
.cp-wiz { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* The dashboard has no global `border-box` reset (only the public apply page
   scopes one), so a `width:100%` input inside a grid track came out 24px too
   wide — invisible in a long form, a horizontal scrollbar in a fixed-width
   step. Scoped to the wizard: every control now fits the column it is in. */
.cp-wiz .co-input, .cp-wiz textarea, .cp-wiz select, .cp-wiz input[type="number"],
.cp-wiz .btn {
  box-sizing: border-box;
}
.cp-wiz .cp-grid > * { min-width: 0; }
/* A three-up row of 170px columns cannot hold a full-width button whose label
   is wider than the column — "Choose banner logo" used to spill over the next
   card. Let it wrap instead of overflowing. */
.cp-wiz .cp-media-logo > div:last-child .btn {
  padding: 8px 6px; font-size: 11.5px; line-height: 1.3; white-space: normal;
}

/* ---- progress track ---- */
/* `flex: 0 0 auto`: a flex CHILD shrinks by default, and as soon as the step
   body got tall the track was squeezed until its labels were clipped.

   `padding-top: 6px` is not decoration: the CURRENT dot carries a 4px ring
   (`box-shadow: 0 0 0 4px …`) and `overflow-y: hidden` — needed so the track
   can scroll sideways on a narrow dialog — cropped the top of that ring until
   the active step looked nicked (reported 2026-11-01). The inline padding does
   the same for the first and last dots' rings. */
.cp-wiz-track {
  display: flex; align-items: flex-start; gap: 4px; list-style: none;
  flex: 0 0 auto;
  margin: 0 0 14px; padding: 6px 4px 12px; border-bottom: 1px solid #eef1f6;
  overflow-x: auto; overflow-y: hidden;
}
.cp-dot { flex: 1 1 0; min-width: 62px; }
.cp-dot button {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; padding: 0; border: 0; background: none; font: inherit;
  color: #94a3b8; cursor: pointer;
}
/* Every dot is a jump target, forwards as well as back (2026-11-01), so the
   number itself has to LOOK pressable. */
.cp-dot button:hover i { border-color: #c7d2fe; color: #4338ca; }
.cp-dot.on button:hover i { color: #fff; }
.cp-dot.done button:hover i { color: #047857; }
.cp-dot button:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px;
  border-radius: 8px; }
.cp-dot button:disabled { cursor: default; }
.cp-dot i {
  width: 26px; height: 26px; border-radius: 999px; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: #eef1f6; color: #64748b;
  border: 1px solid #e2e8f0;
}
.cp-dot span { font-size: 11px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; }
.cp-dot.on i { background: #4f46e5; border-color: #4f46e5; color: #fff;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .14); }
.cp-dot.on span { color: #0f172a; }
.cp-dot.done i { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.cp-dot.done span { color: #475569; }

/* ---- the step itself ---- */
.cp-wiz-body { flex: 1 1 auto; min-height: 0; overflow: auto;
  padding-inline-end: 4px; }
.cp-step[hidden] { display: none; }
.cp-step-head { margin-bottom: 12px; }
.cp-step-head h4 { margin: 0; font-size: 15px; font-weight: 800;
  color: #0f172a; outline: none; }
.cp-step-head p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5;
  color: #64748b; }
.cp-step-head h4:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 3px;
  border-radius: 6px; }
.cp-req { font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #4f46e5; background: #eef2ff;
  border: 1px solid #c7d2fe; border-radius: 999px; padding: 1px 6px; }
/* A field's own error, directly under the field it belongs to. */
.cp-err { margin-top: 5px; font-size: 12px; font-weight: 700; color: #b91c1c; }
.cp-err[hidden] { display: none; }
.co-input.cp-invalid { border-color: #fca5a5;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .10); }
.cp-open-page { white-space: nowrap; text-decoration: none; }
.cp-open-page.off { opacity: .45; pointer-events: none; }

/* ---- the public-page miniature ----
   The same shape as the real hero, painted from the FIELDS (and from the
   object URL of a freshly picked file), so a change is visible before it is
   saved. It is a PREVIEW, not the page: the real one needs a published slug.

   2026-10-31: the banner was a 74px strip and the words under it were 11px, so
   "how your page will look" could not actually be read. The cover now follows
   the real page's 21:9 banner, and the identity row / bio are sized so the
   preview is legible at a glance in the 940px dialog. */
.cp-wiz-side { margin-top: 16px; padding: 14px; background: #fbfcff;
  border: 1px solid #eef1f6; border-radius: 18px; }
.cp-wiz-side > b { display: block; font-size: 12.5px; font-weight: 800;
  color: #0f172a; margin-bottom: 10px; }
.cp-hp { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  overflow: hidden; box-shadow: 0 10px 26px rgba(15, 23, 42, .08); }
/* A FIXED height, not `aspect-ratio` + max-height: with both, the browser keeps
   the ratio and SHRINKS the width (513px of an 826px card), which left a white
   gap beside the banner. The real page caps its 21:9 banner at 300px; inside a
   940px dialog 180px is the equivalent row. */
.cp-hp-cover {
  height: 180px; background: #eef2ff center / cover no-repeat;
  background-image: linear-gradient(135deg, #6366f1, #0ea5e9);
}
.cp-hp-row { display: flex; gap: 13px; align-items: center; padding: 14px 16px; }
.cp-hp-row > span:last-child { display: flex; flex-direction: column;
  gap: 3px; min-width: 0; }
.cp-hp-logo {
  width: 54px; height: 54px; border-radius: 14px; flex: none; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef2ff; color: #6366f1; font-size: 24px;
}
.cp-hp-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cp-hp-name { font-size: 18px; font-weight: 800; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-hp-url { font-size: 12.5px; color: #4f46e5; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cp-hp-url.off { color: #94a3b8; }
.cp-hp-bio {
  padding: 0 16px 16px; font-size: 13px; line-height: 1.7; color: #475569;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  line-clamp: 6; overflow: hidden;
}

/* ---- the permit paper, TO SCALE ----
   Two number boxes cannot tell you that 137 × 94 is an A6-ish slip and
   43 × 88 is a card. This rectangle IS the millimetres. */
.cp-paper-wrap { display: flex; justify-content: center; margin: 6px 0 2px;
  padding: 10px; background: #f8fafc; border: 1px dashed #dbe3ef;
  border-radius: 14px; }
.cp-paper {
  width: min(190px, 60%); max-height: 150px; aspect-ratio: 137 / 94;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 4px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
  display: flex; align-items: center; justify-content: center;
}
.cp-paper b { font-size: 11px; font-weight: 800; color: #475569; }

/* ---- the review: a DIFF, not a second copy of the form ---- */
.cp-rev { display: flex; flex-direction: column; gap: 10px; }
.cp-rev-group { border: 1px solid #eef1f6; border-radius: 14px;
  overflow: hidden; background: #fff; }
.cp-rev-group.is-empty { opacity: .72; }
.cp-rev-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 12px; background: #f8fafc;
  border-bottom: 1px solid #eef1f6; }
.cp-rev-head b { font-size: 12.5px; color: #0f172a; }
.cp-rev-edit { font-size: 11.5px; padding: 4px 10px; }
.cp-rev-list { list-style: none; margin: 0; padding: 4px 12px 8px; }
.cp-rev-list li { display: flex; gap: 10px; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid #f4f6fa; font-size: 12px; }
.cp-rev-list li:last-child { border-bottom: 0; }
.cp-rev-list span { color: #64748b; min-width: 0; }
.cp-rev-list b { color: #0f172a; text-align: end; word-break: break-word; }
.cp-rev-none { padding: 10px 12px; font-size: 12px; color: #94a3b8; }
.cp-rev-foot { margin-top: 10px; font-size: 12px; color: #64748b; }
/* Warnings are never walls: they explain a consequence and link to the step. */
.cp-warn { margin-bottom: 10px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid #fde68a; background: #fffbeb; }
.cp-warn[hidden] { display: none; }
.cp-warn > b { display: block; font-size: 12px; font-weight: 800; color: #92400e; }
.cp-warn ul { margin: 6px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px; }
.cp-warn button { border: 0; background: none; padding: 0; font: inherit;
  font-size: 12px; color: #92400e; text-align: start; cursor: pointer;
  text-decoration: underline; }

/* The three things the PUBLIC DIRECTORY asks for, stated on Review where the
   page is saved. A tick turns green as each one is satisfied, so "why am I not
   in Explore Portfolios?" is answered before the studio ever asks. */
.cp-index { margin-bottom: 12px; padding: 11px 13px; border-radius: 14px;
  border: 1px solid #e2e8f0; background: #f8fafc; }
.cp-index > b { display: block; font-size: 12.5px; font-weight: 800;
  color: #0f172a; margin-bottom: 7px; }
.cp-index ul { margin: 0 0 6px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px; }
.cp-index li { display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: #64748b; }
.cp-tick { flex: none; width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: 800; }
.cp-tick::before { content: "•"; }
.cp-index li.is-done { color: #0f172a; }
.cp-index li.is-done .cp-tick { background: #dcfce7; color: #15803d; }
.cp-index li.is-done .cp-tick::before { content: "✓"; }
.cp-need-count { font-weight: 800; color: #94a3b8; }
.cp-index .co-note { margin: 0; font-size: 11.5px; }

/* ---- closing with unsaved work: asked IN PLACE (no stacked modal) ---- */
.cp-discard { position: sticky; bottom: 0; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 14px; }
.cp-discard[hidden] { display: none; }
.cp-discard span { margin-inline-end: auto; font-size: 12.5px;
  font-weight: 700; color: #991b1b; }

@media (max-width: 620px) {
  /* A phone gets the whole screen: five labels beside five dots do not fit, so
     only the current one is spelled out — and the dots shrink enough that the
     track needs no horizontal scroll of its own. */
  .co-veil.co-veil-wiz { padding: 0; align-items: stretch; }
  .co-modal.cp-wiz-modal { width: 100%; max-height: 100vh;
    border-radius: 0; padding: 14px; }
  .cp-wiz-track { gap: 2px; }
  .cp-dot { min-width: 40px; }
  .cp-dot span { display: none; }
  .cp-dot.on span { display: block; }
  .cp-rev-edit { padding: 4px 8px; }
  .cp-paper { width: min(150px, 70%); }
}

/* ---- the company watermark (2026-10-19) --------------------------------
   A mark with a blank strip the engine fills with the photographer's credit
   name. Previewed on a checkerboard so a transparent PNG reads as transparent
   rather than as a white square. */
/* ONE full-width watermark card: preview + copy + buttons + the global switch.
   The old two-column split (media | dashed toggle box) read as two features. */
.cp-wm-row { display: flex; flex-direction: column; gap: 12px;
  margin: 10px 0 4px; padding: 14px; border: 1px dashed #dbe3ef;
  border-radius: 16px; background: #f8fafc; }
.cp-wm-top { display: flex; gap: 14px; align-items: flex-start; }
.cp-wm-top .cp-wm-preview { margin: 0; flex: none; }
.cp-wm-copy { display: flex; flex-direction: column; gap: 6px;
  min-width: 0; flex: 1 1 auto; }
.cp-wm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cp-wm-actions .btn { margin: 0; }
.cp-wm-switch { margin: 0; }
.cp-wm-switch-note { margin: -4px 0 0; }
.cp-wm-preview {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef1f6 25%, transparent 25%),
    linear-gradient(-45deg, #eef1f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef1f6 75%),
    linear-gradient(-45deg, transparent 75%, #eef1f6 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.cp-wm-img { object-fit: contain; padding: 4px; background: transparent; }
/* ---- drag & drop editor for the credit line (2026-10-19) ---------------- */
.cp-wm-editor { margin-top: 12px; border: 1px solid #eef1f6; border-radius: 16px;
  padding: 12px; background: #fbfcff; }
.cp-wm-stage { position: relative; display: inline-block; max-width: 100%;
  user-select: none; touch-action: none; line-height: 0; }
.cp-wm-stage img { display: block; max-width: 100%; height: auto;
  border-radius: 10px; }
/* The PHOTO stage: the whole mark, dragged and resized on a neutral 3:2 frame
   so its place and size read exactly as they will on a real photograph. */
.cp-wm-photo-stage { position: relative; width: 100%; aspect-ratio: 3 / 2;
  max-height: 260px; border-radius: 12px; overflow: hidden;
  border: 1px solid #e2e8f0; user-select: none; touch-action: none;
  background:
    radial-gradient(circle at 30% 25%, #dbeafe 0%, transparent 55%),
    linear-gradient(160deg, #e2e8f0, #94a3b8); }
.cp-wm-photo-stage img { position: absolute; left: 0; top: 0;
  cursor: grab; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25)); }
.cp-wm-photo-stage img:active { cursor: grabbing; }
.cp-wm-credit { position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; cursor: grab; font-family: Vazirmatn, "Noto Sans Arabic",
  sans-serif;
  /* NOT BOLD (2026-10-30). The chip IS the preview: the delivered name is drawn
     in a Regular face with no faux stroke (see photographer_watermark
     `_credit_stroke`), so a bold chip would promise a weight the photo never
     gets. The text-shadow stays — it is what keeps a light name readable over
     the mark, and it adds no weight. */
  font-weight: 400; line-height: 1.1; padding: 2px 5px;
  border: 1px dashed rgba(255, 255, 255, .55); border-radius: 5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.cp-wm-credit:active { cursor: grabbing; }
.cp-wm-editor-bar { display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin-top: 10px; }
.cp-wm-editor-bar .co-note { flex-basis: 100%; margin: 0; }
.cp-wm-size { display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: #0f172a; }
/* ---- the credit name's COLOUR grid -------------------------------------- */
/* The name used to inherit the mark's ink and could be the same shade as the
   banner behind it. These swatches are the studio's choice; white is selected
   by default. The custom chip is a native colour input behind a ring. */
.cp-wm-colours { display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; padding: 3px 6px; border: 1px solid #e2e8f0;
  border-radius: 999px; background: #fff; }
.cp-wm-colour { width: 20px; height: 20px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(15, 23, 42, .25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  transition: transform .12s ease, box-shadow .12s ease; }
.cp-wm-colour:hover { transform: scale(1.12); }
.cp-wm-colour.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0ea5e9; }
.cp-wm-colour.on::after { content: "✓"; display: block; font-size: 11px;
  line-height: 18px; font-weight: 900; color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, .7); }
/* The custom swatch: a conic rainbow ring with the native picker inside. */
.cp-wm-colour-custom { position: relative; overflow: hidden;
  width: 22px; height: 22px; border: 0;
  background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1,
    #d946ef, #f43f5e); display: inline-block; }
.cp-wm-colour-custom input[type="color"] { position: absolute;
  left: -6px; top: -6px; width: 34px; height: 34px; padding: 0; border: 0;
  background: transparent; cursor: pointer; opacity: 0; }
.cp-wm-colour-custom::before { content: ""; position: absolute;
  inset: 5px; border-radius: 50%; background: #fff; }
/* The credit's FACE picker, beside the colour grid. The chip on the stage is
   drawn in the chosen face (its @font-face is injected by company.js), so the
   name on the mark looks like the name in the file. */
.cp-wm-font { display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: #0f172a; }
.cp-wm-font select { font: inherit; font-weight: 500; color: #0f172a;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 5px 8px; max-width: 190px; }
.cp-wm-font select:focus { outline: 2px solid #0ea5e9; outline-offset: 1px; }
/* The selection bar gained two bulk buttons; let it wrap on a phone. */
.co-bar { flex-wrap: wrap; }
/* The per-file switch. "on" means the watermarked copy is what downloads.
   A WATER DROP carries the state: filled when the mark is applied, an outline
   when it is not. An emoji cannot be outlined, which is why this is an SVG. */
.co-wm { padding: 5px 7px; line-height: 1; }
/* A video is never composited, so its switch is not an option: greyed out and
   inert rather than a button that appears to do something. */
.co-wm[disabled] { opacity: .4; cursor: not-allowed; }
.co-wm-drop { width: 16px; height: 16px; display: inline-block;
  vertical-align: middle; }
.co-wm-drop path { fill: none; stroke: #94a3b8; stroke-width: 1.8;
  stroke-linejoin: round; }
.co-wm.on { background: #e0f2fe; border-color: #bae6fd; }
.co-wm.on .co-wm-drop path { fill: #06b6d4; stroke: #06b6d4; }
/* The bar's action ICONS are self-contained paths (the watermark drop already
   is) and inherit the pill's own colour, so the delete bin stays red. */
.co-icn { width: 16px; height: 16px; display: inline-block;
  vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
/* Phone: the selection bar keeps the COUNT and the ICONS and drops the words.
   Four labelled pills cannot fit ~390px, and a pill is `nowrap` — it cannot
   shrink below its own text — so a long label ("Watermark off", and every
   translation of it) ran OUTSIDE the rounded edge. Same contract as the Media
   Library bar's `.mb-lbl`: the icon stays, the name moves to title/aria-label so
   the button is still announced, and each one keeps a 44px touch target. Clear
   stays worded — it owns the second line. */
@media (max-width: 640px) {
  .co-bar { gap: 6px; padding: 8px 10px; }
  .co-bar .co-lbl { display: none; }
  .co-bar .btn { flex: 0 0 auto; min-width: 44px; min-height: 44px;
    padding: 0 10px; }
  .co-bar .co-wm-drop, .co-bar .co-icn { width: 19px; height: 19px; }
  .co-bar .co-btn-clear { flex: 1 1 100%; min-height: 40px; font-size: 13px; }
  .co-bar-count { font-size: 12px; line-height: 1.2; }
  .co-bar-count b { font-size: 15px; }
}
/* The two flag columns HOLD their control now: one star, one drop. The button
   is the state, and the ICON header above it is the sort control. */
.co-photos-table .co-flag-col {
  text-align: center; white-space: nowrap; padding-inline: 4px;
}
.co-photos-table .co-flag-col .btn { padding: 5px 7px; line-height: 1; }
.co-photos-table th.co-th-icon {
  text-align: center; white-space: nowrap; font-size: 15px; color: #64748b;
}
.co-photos-table th.co-th-icon svg.co-th-icn {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; vertical-align: -3px;
}
/* One action per column: the header icon sits centred above its own button. */
.co-photos-table td.co-act-col {
  text-align: center; white-space: nowrap; padding-inline: 4px;
}
.co-photos-table td.co-act-col .btn { padding: 6px 9px; font-size: 11.5px; }
.co-photos-table th.co-th-icon .co-th-emoji {
  font-size: 15px; line-height: 1; vertical-align: -1px;
}
.co-photos-table th.co-th-icon.on { color: #4338ca; }
/* The featured header is the SAME gold as the card's star (amber-500), not the
   muted slate of the other icon headers: it is the shortlist control. */
.co-photos-table th.co-th-icon .co-th-star {
  color: #f59e0b;
  font-size: 17px;
  line-height: 1;
  vertical-align: -2px;
}
.co-photos-table th.co-th-icon.on .co-th-star { color: #f59e0b; }
.co-photos-table th.co-th-icon .co-wm-drop {
  width: 16px; height: 16px; vertical-align: -3px;
}
/* The AUTHORIZED AREAS / SUBJECTS / LOCATIONS lists: one row per option, each
   removable, plus an add button. The first row is the company's default, so
   order is meaningful. ONE set of classes, three lists (see CP_LISTS in
   company.js), so they cannot drift apart visually. */
.cp-area-list { display: flex; flex-direction: column; gap: 6px; }
.cp-area-row { display: flex; gap: 8px; align-items: center; }
.cp-area-row .co-input { flex: 1 1 auto; min-width: 0; }
.cp-area-row .cp-area-x { flex: none; padding: 4px 9px; }
.cp-area-add { margin-top: 8px; }
/* The second of the two list fields ("Locations") needs air before the note
   that explains "Other", or the three blocks read as one long column. */
.cp-options-last { margin-top: 18px; }
/* "Every list ends with Other" — said once, under all three editors. */
.cp-other-note { display: flex; flex-direction: column; gap: 4px;
  margin-top: 16px; padding: 11px 13px; border-radius: 14px;
  background: #eef2ff; border: 1px solid #c7d2fe; color: #312e81; }
.cp-other-note b { font-size: 12.5px; }
.cp-other-note span { font-size: 12px; line-height: 1.55; color: #4338ca; }
/* The free-text box that "Other" reveals in the permit request forms. */
.cp-pick-other { margin-top: 6px; }
.cp-pick-other[hidden] { display: none; }

/* ---- custom permit printing -----------------------------------------
   One card for the template, the physical paper size and the signature: a
   company prints on pre-cut stock, so these four facts belong together. */
.cp-permit-card { display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0 4px; padding: 14px; border: 1px solid #e2e8f0;
  border-radius: 16px; background: #f8fafc; }
.cp-permit-title { font-size: 13.5px; font-weight: 800; }
.cp-permit-row { display: flex; gap: 14px; align-items: flex-start; }
.cp-permit-prev { width: 96px; height: 68px; border-radius: 12px;
  margin: 0; flex: none; }
.cp-permit-size-row { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: #0f172a; }
.cp-permit-size-row .co-input { width: 92px; }
.cp-permit-signer { display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; font-weight: 700; color: #0f172a; }
.cp-permit-switch { margin: 2px 0 0; }

/* The token designer: the company's own sheet as the background. A chip is
   dragged with the same fractions the Pillow engine reads, so what is dragged
   is what is printed. */
.cp-designer { display: flex; flex-direction: column; gap: 10px; }
.cp-designer-stage { position: relative; width: 100%; min-height: 200px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  overflow: hidden; touch-action: none; user-select: none; }
.cp-designer-bg { display: block; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; }
.cp-token { position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; cursor: grab; line-height: 1.25; }
.cp-token:active { cursor: grabbing; }
/* The resize grip: one small square on the chip's bottom-right corner. Dragging
   it scales the chip around its own centre, the same way the engine draws it. */
.cp-token-handle { position: absolute; right: -7px; bottom: -7px;
  width: 14px; height: 14px; border-radius: 4px; background: #2563eb;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .35);
  cursor: nwse-resize; touch-action: none; }
html[dir="rtl"] .cp-token-handle { right: auto; left: -7px; cursor: nesw-resize; }
.cp-token-img .cp-token-handle { right: -7px; bottom: -7px; }
/* A TEXT token is a BOX, not a line: the renderer wraps the words and shrinks
   the type to fit, so the chip shows the same rectangle the print respects. */
.cp-token-text { display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: normal; overflow: hidden; line-height: 1.15;
  color: #0f172a; font-weight: 800; background: rgba(59, 130, 246, .12);
  border: 1px dashed rgba(37, 99, 235, .65); border-radius: 4px;
  padding: 1px 3px; }
.cp-token-img { width: 16%; aspect-ratio: 3 / 4; display: flex;
  align-items: center; justify-content: center; font-size: 10px;
  font-weight: 800; color: #065f46; text-align: center;
  background: rgba(16, 185, 129, .14);
  border: 1px dashed rgba(5, 150, 105, .65); border-radius: 6px; }
.cp-token.on { outline: 2px solid #2563eb; outline-offset: 1px; }
.cp-designer-tools { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; }
.cp-designer-tools .co-note { flex-basis: 100%; margin: 0; }
.cp-designer-sel { font-weight: 700; font-size: 12px; color: #0f172a;
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px;
  padding: 3px 10px; }
.cp-designer-sel b { font-weight: 800; color: #3730a3; }
@media (max-width: 620px) {
  .cp-permit-row { flex-direction: column; align-items: center; text-align: center; }
  .cp-permit-row .cp-wm-actions { justify-content: center; }
  .cp-permit-size-row { justify-content: center; }
}
@media (max-width: 620px) {
  .cp-wm-top { flex-direction: column; align-items: center; text-align: center; }
  .cp-wm-actions { justify-content: center; }
  .cp-wm-actions .btn { flex: 1 1 auto; }
}
.cga-success {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 26px 16px; border-radius: 16px;
  background: #f0fdf4; border: 1px solid #a7f3d0;
}
.cga-success-ico { font-size: 34px; line-height: 1; }
.cga-success b { font-size: 15px; line-height: 1.6; color: #065f46; }
.cga-success p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: #475569; }
/* The applicant's badge photo, at the top of the review dialog. */
.co-app-face {
  display: block; width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; margin: 4px auto 12px; border: 2px solid #e2e8f0;
  background: #f8fafc;
}

/* ---- reports: the chart is a control -----------------------------------
   Clicking the chart opens its options, so it has to LOOK clickable: a pointer,
   and a head line that says what the click does (the ⚙ button is the same
   action for the keyboard). */
.co-rep-chart { cursor: pointer; }
.co-rep-chart canvas { cursor: pointer; }
.co-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 2px 0 8px;
}
.co-chart-head span { font-size: 11.5px; color: #64748b; }
.co-chart-head .btn { cursor: pointer; }
/* The dialog's pickers: a two-column grid of plain checkboxes, because these are
   lists of names, not a form of numbers. */
.co-check-grid { display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.co-check-list { max-height: 190px; overflow-y: auto; padding: 2px; }
.co-check {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: #0f172a; cursor: pointer; padding: 3px 2px; border-radius: 7px;
}
.co-check:hover { background: #f8fafc; }
.co-check input { width: 15px; height: 15px; accent-color: #4f46e5; cursor: pointer; flex: none; }
.co-check .co-muted { font-size: 11px; }
.co-check-tools { display: flex; gap: 10px; margin: -2px 0 6px; }
.co-linkbtn {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: #4f46e5;
}
.co-linkbtn:hover { text-decoration: underline; }

/* On a phone each action column leaves the labelled-row layout and the four
   buttons sit together, as they did when they shared one cell. */
@media (max-width: 720px) {
  .co-photos-table td.co-act-col {
    display: inline-flex; justify-content: center; border: 0; padding: 4px 6px;
  }
  .co-photos-table td.co-act-col::before { content: none; }
}

/* =========================================================================
   The photographer's STORY on a photo (caption + subject + location)
   ========================================================================= */
/* The upload page's batch form. Subject and location share a row on a desktop;
   the caption is full width under them. */
.cg-story {
  border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px 14px;
  margin: 14px 0; background: #f8fafc;
}
.cg-story-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.cg-story-head b { font-size: 13.5px; color: #0f172a; }
.cg-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .cg-story-grid { grid-template-columns: 1fr; } }
.cg-story .cg-field { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #475569; }
/* A field whose LABEL IS the element (the story form writes
   `<label class="cg-field">Subject <input></label>`). Without a column layout the
   input is an inline-block that starts right after the word and then takes 100%
   of the label's width — which is how the Subject and Location boxes ended up
   drawn on top of each other in the two-column story grid. */
.cg-story .cg-field {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.cg-story .cg-field input, .cg-story .cg-field textarea {
  display: block; width: 100%; min-width: 0; margin-top: 4px; font-weight: 400;
}
.cg-edit {
  border: 1px solid #cbd5e1; background: #fff; color: #475569; border-radius: 8px;
  padding: 3px 9px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.cg-edit:hover { border-color: #6366f1; color: #4f46e5; }
.cg-cap-modal h3 { margin-bottom: 12px; }

/* The review list: the caption clamps to TWO lines; the title attribute carries
   the whole text, so a hover answers the question without opening a dialog. */
.co-card-story, .co-photo-story {
  display: flex; flex-direction: column; gap: 2px; margin-top: 5px;
}
.co-card-story b, .co-photo-story b { font-size: 12px; color: #334155; }
.co-clamp2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; white-space: pre-line; word-break: break-word;
  font-size: 11.5px; line-height: 1.45; color: #64748b;
}
.co-card-loc, .co-photo-loc {
  font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-caption {
  margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: #64748b;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; white-space: pre-line; word-break: break-word;
}
.cw-caption b { color: #334155; }

/* ---- the BRAND KIT (Marketing design suite swatches) -------------------- */
.cp-brand-field { margin-top: 4px; }
.cp-brand-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.cp-brand-row { display: inline-flex; align-items: center; gap: 4px; }
.cp-brand-input {
  width: 46px; height: 32px; padding: 2px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 9px; background: #fff;
}
.cp-brand-x {
  padding: 2px 6px; line-height: 1; color: var(--text-3);
}
.cp-brand-add { margin-bottom: 4px; }

/* ---- "More data": the public-page counters at the very top -------------- */
/* Two numbers a company asks about a shot before deciding to star it again:
   how many visitors liked it, and how many times it has been published. */
.co-stats { display: flex; gap: 10px; margin: 10px 0 14px; flex-wrap: wrap; }
.co-stat {
  flex: 1 1 120px; min-width: 110px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: #f8fafc;
  display: flex; flex-direction: column; gap: 2px;
}
.co-stat b { font-size: 20px; line-height: 1.1; letter-spacing: -.02em; color: var(--text-1); }
.co-stat span { font-size: 11.5px; color: var(--text-3); font-weight: 600; }

/* ---- the standalone Marketing page (sidebar → Create & Studio) ---------- */
/* The shelf used to live inside a studio panel, where `.co-head` was already
   narrow. As a PAGE on a phone the heading and the two buttons share a 224px
   row: the global `.btn`'s 999px radius then turns each one into a tall circle
   as its label wraps. Stack them and let them fill the row instead. */
@media (max-width: 560px) {
  #marketingBody .co-head { flex-direction: column; align-items: stretch; }
  #marketingBody .co-actions { width: 100%; margin-left: 0; }
  #marketingBody .co-actions .btn {
    flex: 1 1 auto; border-radius: 12px; white-space: nowrap;
  }
}

/* ---- public portfolio directory ----------------------------------------
   Shared by the public list (`/portfolios`, also served at `/companies`) and
   the `/c/` 404 page, so a studio looks the same wherever a stranger meets it.
   Kept in this file because both pages already load company.css — a second
   stylesheet for two cards would be one more file to keep in step.

   The card is deliberately a ROW with a big FACE rather than a photo tile: the
   visitor is choosing between people, and the photographs have their own page.
   2026-11-01 — the avatar went from 46px to 84px and the card grew the genre
   pills and the studio's town, which is what turns a list of names into
   something that looks like it was made by humans. */
.cd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
.cd-card {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 14px 16px; border-radius: 18px; text-decoration: none;
  background: #fff; border: 1px solid #e6e9f2;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.cd-card:hover, .cd-card:focus-visible {
  border-color: #c7d2fe; box-shadow: 0 12px 26px rgba(79, 70, 229, .12);
  transform: translateY(-1px); outline: none;
}
.cd-face { flex: none; position: relative; display: inline-flex; }
/* The hover ring is a pseudo-element, not a border: it fades in OUTSIDE the
   white ring, so it never eats into the picture's box. */
.cd-face::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  opacity: 0; transition: opacity .15s; z-index: 0;
}
.cd-card:hover .cd-face::after, .cd-card:focus-visible .cd-face::after {
  opacity: .9;
}
/* ---- the avatar: wrapper -> clipping mask -> picture (2026-11-04) -------
   Three layers, each with one job, because two could not guarantee both rules
   at once: a picture that fills the circle AND a white border that is never
   painted over. `object-fit: cover` alone could not do it — an element that is
   also the border can be bled over by a zoomed image.

   Layer 1 — the ring. `box-sizing: border-box` is the load-bearing part: the
   3px border comes OUT of the 84px box, so the mask is 78px and the picture can
   never reach the ring, however it is cropped.

   Layer 2 — the mask. `overflow: hidden` + `border-radius` is the actual clip;
   `object-fit` decides the crop, the mask enforces it.

   Layer 3 — the picture. 100% x 100%, centred `cover`, and `display: block` so
   the inline baseline gap cannot show a 4px sliver of background under it. */
.cd-face-ring {
  width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid #fff; box-sizing: border-box;
  background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.cd-face-mask {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #eef2f7;
}
.cd-logo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border: 0; background: #fff;
}
.cd-logo-fb {
  font-size: 27px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
}
.cd-body {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto;
}
.cd-name-row {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.cd-name {
  font-size: 15px; font-weight: 800; color: #0f172a; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The kind badge: the directory holds studios AND personal portfolios, so the
   card has to say which one it is opening. Grey for a personal page, indigo for
   a studio (the accent the rest of the product uses for "organisation"). */
.cd-kind {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.6; padding: 0 7px;
  border-radius: 999px; color: #4338ca; background: #eef2ff;
  border: 1px solid #e0e7ff; white-space: nowrap;
}
.cd-kind.is-personal { color: #0e7490; background: #ecfeff; border-color: #cffafe; }
/* One colour per label (2026-11-07): STUDIO red, PORTFOLIO green,
   PROFESSIONAL blue. These declare one class more than `.is-personal`, so the
   order here does not matter — they always win over the cyan fallback — while
   a Scrapbook card keeps its sticker badge (the `.cd-card.is-scrapbook …`
   rules further down are more specific still). */
.cd-kind.is-studio { color: #b91c1c; background: #fef2f2; border-color: #fee2e2; }
.cd-kind.is-portfolio { color: #15803d; background: #f0fdf4; border-color: #dcfce7; }
.cd-kind.is-professional { color: #1d4ed8; background: #eff6ff; border-color: #dbeafe; }

/* ---- Scrapbook cards: the page announces itself (2026-11-05) -------------
   A Scrapbook is a CHILDREN'S page, so its card wears that page's palette
   before you read a word — a warm sun-to-pink-to-sky wash with the same dot
   grid the page uses, a pink hairline and a hard bottom edge (the "sticker"
   cue). Deliberately a DIAGONAL wash and not corner blobs: the avatar sits at
   the inline start, which is the left in English and the right in Farsi, so
   anything positioned would land under the face in one of the two languages.

   Only backgrounds and borders change. Every text colour is nudged DARKER
   (bio #64748b -> #4b5563, place #94a3b8 -> #6b7280), never lighter, so the
   contrast on pastel is better than on the plain white card. */
.cd-card.is-scrapbook {
  background:
    radial-gradient(circle at 1px 1px, rgba(17,24,39,.045) 1px, transparent 1.2px)
      0 0 / 12px 12px,
    linear-gradient(135deg, #FFEFC2 0%, #FFD6E9 34%, #FFDFCC 62%, #CFEFFF 100%);
  border: 2px solid #FFC2DA;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 4px 0 rgba(255,95,162,.20);
}
.cd-card.is-scrapbook:hover,
.cd-card.is-scrapbook:focus-visible {
  border-color: #FF9FC4;
  box-shadow: 0 10px 24px rgba(255,95,162,.20), 0 4px 0 rgba(255,95,162,.32);
}
.cd-card.is-scrapbook .cd-bio { color: #4b5563; }
.cd-card.is-scrapbook .cd-place { color: #6b7280; }
.cd-card.is-scrapbook .cd-go { color: #ff5fa2; }
/* The badge becomes a sticker: filled sunny yellow, inked edge, hard shadow. */
.cd-card.is-scrapbook .cd-kind.is-personal {
  color: #111827; background: #ffc93c; border-color: #111827;
  box-shadow: 0 2px 0 rgba(17,24,39,.65);
}
/* A coloured ring outside the white one, like the public page's avatar. */
.cd-card.is-scrapbook .cd-face-ring {
  box-shadow: 0 0 0 3px #ffc93c, 0 4px 12px rgba(15,23,42,.08);
}

/* ---- Scrapbook cards wear the LOOK the owner picked (2026-11-07) ---------
   The public directory must show the same paper, tile, name highlighter and
   sticker badge as `/p/<slug>`, otherwise the choice made in the wizard is
   invisible until a visitor opens the page. The values arrive on the card as
   `--c-*` custom properties (routes/companies._public_personal_card), so this
   stylesheet stays static and the palette has ONE source: portfolio_styles.py. */
.cd-card.is-scrapbook[data-look]:not(.is-hidden) {
  background-color: var(--c-paper, #FFFDF6);
  background-image: var(--c-tile, none);
  background-size: 170px;
  border-color: var(--c-ink, #111827);
  box-shadow: 0 1px 2px rgba(17,24,39,.05),
              0 3px 0 color-mix(in srgb, var(--c-ink, #111827) 30%, transparent);
}
.cd-card.is-scrapbook[data-look]:hover,
.cd-card.is-scrapbook[data-look]:focus-visible {
  border-color: var(--c-ink, #111827);
  box-shadow: 0 10px 24px rgba(15,23,42,.16),
              0 3px 0 var(--c-ink, #111827);
}
.cd-card.is-scrapbook[data-look] .cd-name {
  background: var(--c-hl, none); border-radius: 3px;
  padding: 0 4px; margin-inline-start: -4px; width: fit-content;
}
.cd-card.is-scrapbook[data-look] .cd-kind.is-personal {
  background: var(--c-chip, #ffc93c); color: var(--c-chip-fg, #111827);
  border-color: var(--c-ink, #111827);
}
.cd-card.is-scrapbook[data-look] .cd-face-ring {
  box-shadow: 0 0 0 3px var(--c-ring, #ffc93c), 0 4px 12px rgba(15,23,42,.08);
}
.cd-card.is-scrapbook[data-look] .cd-go { color: var(--c-accent, #ff5fa2); }
.cd-card.is-scrapbook[data-look] .cd-bio { color: #3f4a57; }
.cd-card.is-scrapbook[data-look] .cd-place { color: #55616e; }
/* The look's NAME, next to the kind pill: the card says which design it is. */
.cd-look {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin-top: 3px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; line-height: 1.7; white-space: nowrap;
  color: var(--c-ink, #4338ca);
  background: var(--c-paper, #ffffff);
  border: 1px solid color-mix(in srgb, var(--c-ink, #4338ca) 32%, transparent);
}
.cd-look i { width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent, #ff5fa2); }
.cd-place {
  font-size: 11.5px; font-weight: 600; color: #94a3b8; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The genre pills. `dir` follows the page, so the row wraps the same way in
   Farsi as in English without a mirrored rule. */
.cd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cd-tag {
  font-size: 10.5px; font-weight: 700; line-height: 1.5; padding: 1px 8px;
  border-radius: 999px; color: #4338ca; background: #eef2ff;
  border: 1px solid #e0e7ff; white-space: nowrap;
}
/* The pills that did not fit, as a COUNT ("+2"). Quieter than a genre pill so
   it reads as "and two more" rather than as another genre, and it keeps every
   card the same height however many genres the studio is accredited for. */
.cd-tag-more {
  color: #475569; background: #f1f5f9; border-color: #e2e8f0;
}
.cd-bio {
  font-size: 11.5px; line-height: 1.45; color: #64748b; min-width: 0;
  margin-top: 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}
.cd-meta { font-size: 11.5px; font-weight: 700; color: #475569; }
.cd-go { margin-inline-start: auto; flex: none; font-size: 18px; color: #94a3b8; }

/* ---- admin: switch ONE card off without deleting it (2026-11-05) --------
   A hidden card keeps its page, its photos and its address — it is only not
   OFFERED to visitors: out of this list, out of the search box, out of
   Discover. The card stays in the document for the admin, greyed and badged,
   because otherwise a switched-off card could never be switched back on. */
.cd-card.is-hidden {
  background: #f8fafc; border-color: #e2e8f0; border-style: dashed;
  box-shadow: none; opacity: .72;
}
/* "Switched off" must look switched off whichever layout is behind it, so a
   hidden Scrapbook card drops its wash and its sticker badge. */
.cd-card.is-hidden.is-scrapbook {
  background: #f8fafc; border-color: #e2e8f0; box-shadow: none;
}
.cd-card.is-hidden.is-scrapbook .cd-kind.is-personal {
  color: #0e7490; background: #ecfeff; border-color: #cffafe; box-shadow: none;
}
.cd-card.is-hidden.is-scrapbook .cd-face-ring { box-shadow: none; }
.cd-card.is-hidden:hover, .cd-card.is-hidden:focus-visible {
  opacity: 1; border-color: #cbd5e1; transform: none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}
.cd-card.is-hidden .cd-face-ring { filter: grayscale(1); }
.cd-hidden-badge {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.6; padding: 0 7px;
  border-radius: 999px; color: #b91c1c; background: #fef2f2;
  border: 1px solid #fee2e2; white-space: nowrap;
}
/* The switch itself. It sits on its OWN LINE inside `.cd-body` — sharing a row
   with the arrow cost ~85px of card width and turned "Arad Studio" into
   "Ara…", so the bodies of the two cards could no longer be told apart. */
.cd-vis {
  align-self: flex-start; margin-top: 5px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; line-height: 1; padding: 6px 10px;
  border-radius: 999px; white-space: nowrap;
  color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0;
  cursor: pointer; user-select: none; transition: color .12s, background .12s;
}
.cd-vis > span { font-size: 12px; line-height: 1; }
.cd-vis:hover, .cd-vis:focus-visible {
  color: #b91c1c; background: #fef2f2; border-color: #fecaca; outline: none;
}
.cd-vis.is-on { color: #047857; background: #ecfdf5; border-color: #d1fae5; }
.cd-vis.is-on:hover, .cd-vis.is-on:focus-visible {
  color: #065f46; background: #d1fae5; border-color: #a7f3d0;
}
.cd-vis[aria-busy="true"] { opacity: .55; pointer-events: none; }
@media (max-width: 480px) {
  .cd-grid { grid-template-columns: 1fr; }
  .cd-card { padding: 12px 13px; gap: 12px; }
  .cd-face-ring { width: 64px; height: 64px; }
  .cd-logo-fb { font-size: 21px; }
}

/* =====================================================================
   NOTIFICATION CHANNELS (My Studio › Edit company profile)
   ---------------------------------------------------------------------
   The studio's own Telegram/Bale/Eitaa group that mirrors every
   notification. Rendered by static/js/company_channels.js; the Add/Edit
   dialog reuses the app's `.plat-picker` / `.plat-pick` / `.inp-c`, so it
   looks exactly like the Accounts form while sharing none of its data.
   ===================================================================== */
.cp-channels {
  margin-top: 18px; padding: 14px; border: 1px solid #e6e9f2;
  border-radius: 16px; background: #f8fafc;
}
.cp-channels-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.cp-channels-head b { font-size: 13.5px; font-weight: 800; color: #0f172a; }
.cp-channels-badge {
  font-size: 10.5px; font-weight: 800; color: #0e7490;
  background: #cffafe; border-radius: 999px; padding: 2px 8px;
}
.cp-channels .co-note { font-size: 11.5px; line-height: 1.5; color: #64748b; }
.cp-channels-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.cp-channels-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid #e6e9f2; border-radius: 12px;
  background: #fff;
}
.cp-channels-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  object-fit: contain; background: #fff; border: 1px solid #eef1f7; padding: 3px;
}
.cp-channels-ico-txt {
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.cp-channels-main { flex: 1 1 180px; min-width: 0; }
.cp-channels-name {
  font-size: 13px; font-weight: 800; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-channels-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px;
}
.cp-channels-pill {
  font-size: 10.5px; font-weight: 800; color: #fff; background: #4f46e5;
  border-radius: 999px; padding: 1px 8px;
}
.cp-channels-pill.ghost {
  color: #475569; background: #eef2f7; border: 1px solid #e2e8f0;
}
.cp-channels-chat {
  font-size: 11px; color: #94a3b8; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The LAST delivery of each channel: "no notification yet", "sent at …" and
   "the platform refused it, here is why" must not look the same — the last
   one is what makes a bad token visible instead of silent. */
.cp-channels-last { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; }
.cp-channels-last.none { color: #94a3b8; font-weight: 600; }
.cp-channels-last.ok { color: #047857; }
.cp-channels-last.bad { color: #b91c1c; }
.cp-channels-switch {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 11.5px; font-weight: 700; color: #475569; cursor: pointer;
}
.cp-channels-switch input { width: 15px; height: 15px; accent-color: #4f46e5; }
.cp-channels-state {
  flex: none; font-size: 11px; font-weight: 800; color: #047857;
}
.cp-channels-state.off { color: #94a3b8; }
.cp-channels-actions { display: flex; gap: 6px; flex: none; }
.cp-channels-del { color: #b91c1c; }
.cp-channels-add { width: 100%; }
.cp-channels-empty {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px dashed #cbd5e1; border-radius: 12px; background: #fff;
  font-size: 12px; color: #64748b; line-height: 1.5;
}
.cp-channels-empty-ico { font-size: 20px; }
/* The Add/Edit dialog: the fields are the app's own `.inp-c`, so only the label
   block needs styling to sit under them the way the Accounts form does. */
.cp-ch-form .cp-ch-field { display: flex; flex-direction: column; gap: 5px; }
/* `.co-note` has no rule of its own, so without this the form's hint would be
   a body-size paragraph under the fields. */
.cp-ch-form .co-note { font-size: 11.5px; line-height: 1.5; color: #64748b; margin: 0; }
.cp-ch-form .cp-ch-field label {
  font-size: 12px; font-weight: 700; color: #475569;
}
.cp-ch-active {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;
}
.cp-ch-active input { width: 16px; height: 16px; accent-color: #4f46e5; }

/* Which of the studio's notifications a channel receives (the tick boxes that
   replaced the "Destination type" picker). A fieldset so the group of boxes is
   announced as one question. */
.cp-ch-events {
  margin: 0; padding: 10px 12px; border: 1px solid #e6e9f2; border-radius: 12px;
  background: #f8fafc; display: flex; flex-direction: column; gap: 7px;
}
.cp-ch-events legend {
  padding: 0 4px; font-size: 12px; font-weight: 800; color: #475569;
}
.cp-ch-event {
  display: grid; grid-template-columns: 16px 1fr; gap: 2px 8px;
  align-items: start; cursor: pointer;
}
.cp-ch-event input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #4f46e5; }
.cp-ch-event-label { font-size: 13px; font-weight: 600; color: #334155; }
.cp-ch-event-desc {
  grid-column: 2; font-size: 11px; line-height: 1.45; color: #94a3b8;
}
.cp-ch-events .co-note { margin: 2px 0 0; font-size: 11px; line-height: 1.45; }

/* =====================================================================
   SOCIAL MEDIA CHANNELS (My Studio › Edit company profile › step 7)
   ---------------------------------------------------------------------
   The PUBLIC half of step 7: the networks the studio publishes on, drawn
   as icons under "Follow Us" on /c/<slug>. Rendered by
   static/js/company_socials.js; rows are saved by their own endpoints, so
   the dialog's one Save never touches them.

   The two headings of the step ("Admin notifications" / "Social media
   channels") are `.cp-subsec-h`, NOT a second `.cp-channels` card: the
   step has two questions and each one names itself.
   ===================================================================== */
.cp-subsec { margin-top: 18px; }
.cp-subsec:first-child { margin-top: 0; }
.cp-subsec-h {
  margin: 0 0 5px; font-size: 13.5px; font-weight: 800; color: #0f172a;
  display: flex; align-items: center; gap: 6px;
}
.cp-subsec > .co-note { margin: 0 0 4px; font-size: 11.5px; line-height: 1.5;
  color: #64748b; }

.cp-socials {
  margin-top: 10px; padding: 14px; border: 1px solid #e6e9f2;
  border-radius: 16px; background: #f8fafc;
}
.cp-socials .co-note { font-size: 11.5px; line-height: 1.5; color: #64748b; }
.cp-socials-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.cp-socials-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid #e6e9f2; border-radius: 12px;
  background: #fff;
}
.cp-socials-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  object-fit: contain; background: #fff; border: 1px solid #eef1f7; padding: 3px;
}
.cp-socials-ico-txt {
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.cp-socials-main { flex: 1 1 180px; min-width: 0; }
.cp-socials-name { font-size: 13px; font-weight: 800; color: #0f172a; }
.cp-socials-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 3px; min-width: 0;
}
.cp-socials-handle {
  font-size: 11px; font-weight: 700; color: #475569;
  background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 1px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
/* The resolved address, shown as a LINK: it is exactly what the icon on the
   public page opens, so "where does that go?" is answered here rather than by
   publishing and clicking. */
.cp-socials-url {
  font-size: 11px; color: #94a3b8; text-decoration: none; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-socials-url:hover { color: #4f46e5; text-decoration: underline; }
.cp-socials-actions { display: flex; gap: 6px; flex: none; }
.cp-socials-del { color: #b91c1c; }
.cp-socials-add { width: 100%; }
.cp-socials-empty {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 1px dashed #cbd5e1; border-radius: 12px; background: #fff;
  font-size: 12px; color: #64748b; line-height: 1.5;
}
.cp-socials-empty-ico { font-size: 20px; }

/* The Add/Edit dialog: the app's own `.inp-c` fields, and a line that shows
   what the handle will BECOME. The preview is a preview — the address that
   ends up on the page is the one the server resolved. */
.cp-so-form .cp-ch-field { display: flex; flex-direction: column; gap: 5px; }
.cp-so-form .cp-ch-field label { font-size: 12px; font-weight: 700; color: #475569; }
.cp-so-form .co-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: #64748b; }
.cp-so-preview {
  margin: 0; min-height: 16px; font-size: 11.5px; font-weight: 700;
  color: #4f46e5; direction: ltr; text-align: left; word-break: break-all;
}
/* Ten networks do not fit a dialog on one screen: scroll the picker, never the
   dialog around it. */
.cp-so-picker { max-height: 236px; overflow-y: auto; padding: 2px; }

/* "Recognised this address as Bale." Shown ONLY when a paste moved the picker,
   so the person is never surprised by a card they did not choose. */
.cp-so-recognised {
  margin: -2px 0 0; min-height: 15px; font-size: 11.5px; font-weight: 800;
  color: #047857;
}
.cp-so-recognised:empty { min-height: 0; }

/* ---- pictures FORWARDED onto this page (2026-11-08) -----------------------
   A reader forwarded one of their own pictures here from a /p/ page. They are
   not the studio's work, so they sit in their own strip above the wall and
   credit the page they came from. */
.cf-fwd { margin: 22px 0 8px; padding: 14px 14px 10px; border-radius: 16px;
  background: #f8fafc; border: 1px solid #e6ebf2; }
.cf-fwd-h { margin: 0 0 10px; font-size: 12px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: #64748b; }
.cf-fwd-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.cf-fwd-item { flex: 0 0 auto; margin: 0; width: 132px; }
.cf-fwd-img { display: block; width: 132px; height: 132px; border-radius: 12px;
  overflow: hidden; background: #eef1f5; border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .10); }
.cf-fwd-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-fwd-item figcaption { margin-top: 6px; font-size: 11.5px; line-height: 1.35;
  color: #5b6472; }
.cf-fwd-item figcaption a { color: #0f766e; font-weight: 800;
  text-decoration: none; }
.cf-fwd-item figcaption a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .cf-fwd-item, .cf-fwd-img { width: 112px; }
  .cf-fwd-img { height: 112px; }
}