/* Page styles for the client role screens. Use tokens from tokens.css; prefer existing component classes (see js/components/README.md). */

/* ── shared ─────────────────────────────────────────────────────────────────────────────── */
.cl-banner { margin-bottom: var(--space-5); }
.cl-muted-line { color: var(--text-muted); font-size: var(--fs-sm); }
.cl-muted-line > .icon { display: inline-block; vertical-align: -0.18em; margin-inline-end: 4px; } /* base.css makes svg block */
.cl-dot-sep { color: var(--text-subtle); padding-inline: 2px; }
/* A break opportunity after each separator, so "id · file · date" meta lines wrap on phones instead of widening the page. */
.cl-dot-sep::after { content: "\200B"; }
.cl-yes { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--success-text); }
.cl-id { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.01em; color: var(--text-muted); }
.cl-cell-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-cell-main__title { font-weight: var(--fw-semibold); color: var(--text); display: inline-flex; align-items: center; gap: var(--space-1-5); }
.cl-cell-main__sub { font-size: var(--fs-xs); color: var(--text-muted); }

.cl-acting {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-2-5, 10px) var(--space-4); margin-bottom: var(--space-5);
  border-radius: var(--radius-md); background: var(--info-soft); color: var(--info-text);
  font-size: var(--fs-sm); border: 1px solid color-mix(in srgb, var(--info) 22%, transparent);
}
.cl-acting__label { opacity: 0.85; }
.cl-acting__change { margin-inline-start: auto; color: inherit; font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
.cl-picker { max-width: 640px; }
.cl-picker__row { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.cl-picker__row > .field { flex: 1 1 260px; margin: 0; }

/* Suggestion chips ("האם התכוונת ל…") */
.cl-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); margin-top: var(--space-2); }
.cl-suggest__label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); }
.cl-suggest__chip {
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer;
  padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--primary-soft-2);
  background: var(--primary-soft); color: var(--primary-text); transition: background var(--dur-2), border-color var(--dur-2);
}
.cl-suggest__chip:hover { background: var(--primary-soft-2); border-color: var(--primary); }
.cl-address { display: flex; flex-direction: column; gap: var(--space-4); }

/* Code blocks */
.cl-code { margin: 0; border-radius: var(--radius-md); border: 1px solid var(--ink-border); background: var(--ink); color: var(--ink-text); overflow: hidden; box-shadow: var(--shadow-xs); }
.cl-code__bar { display: flex; align-items: center; gap: var(--space-2); padding: 6px 8px 6px 12px; padding-inline-start: 14px; border-bottom: 1px solid var(--ink-border); background: var(--ink-2); font-size: var(--fs-xs); color: var(--ink-muted); }
.cl-code__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); color: var(--ink-text); }
.cl-code__lang { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--ink-3); color: var(--ink-muted); }
.cl-code__pre { margin: 0; padding: var(--space-3) var(--space-4); overflow: auto; max-height: 460px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; text-align: left; tab-size: 2; }
.cl-code__pre:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
.cl-code--wrap .cl-code__pre { white-space: pre-wrap; word-break: break-all; }
.cl-copy {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--ink-border); background: transparent; color: var(--ink-text); cursor: pointer;
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.cl-copy:hover { background: var(--ink-hover); }
.cl-copy.is-done { color: var(--success); border-color: var(--success); }
.cl-copy--compact { padding: 4px 6px; }
.cl-copy--light { color: var(--text); border-color: var(--border); background: var(--surface); }
.cl-copy--light:hover { background: var(--surface-3); }

/* ── dashboard ─────────────────────────────────────────────────────────────────────────── */
.cl-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (max-width: 1279.98px) { .cl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
.cl-dash__grid { align-items: start; }
@media (max-width: 1023.98px) { .cl-dash__grid { grid-template-columns: minmax(0, 1fr); } }

.cl-attn-list { list-style: none; margin: 0; padding: 0; }
.cl-attn { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); }
.cl-attn:first-child { border-top: 0; }
.cl-attn__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--warning-soft); color: var(--warning-text); }
.cl-attn--danger .cl-attn__icon { background: var(--danger-soft); color: var(--danger-text); }
.cl-attn__body { flex: 1; min-width: 0; }
.cl-attn__title { font-weight: var(--fw-semibold); }
.cl-attn__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }
.cl-attn__errors { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--text-muted); }
.cl-attn__errors li { position: relative; padding-inline-start: 14px; }
.cl-attn__errors li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--warning); }
.cl-attn--danger .cl-attn__errors li::before { background: var(--danger); }
.cl-attn__action { flex: none; align-self: center; }
@media (max-width: 767.98px) {
  .cl-attn { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
  .cl-attn__body { flex: 1 1 calc(100% - 52px); }
  .cl-attn__action { margin-inline-start: 48px; align-self: flex-start; }
  /* Phones: compact KPI tiles — no icon, the odd last tile spans the row */
  .cl-kpis .kpi__icon { display: none; }
  .cl-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); color: inherit; text-decoration: none; border-top: 1px solid var(--border-subtle); transition: background var(--dur-2); }
.cl-list li:first-child .cl-list__item { border-top: 0; }
.cl-list__item:hover { background: var(--surface-2); }
.cl-list__item:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
.cl-list__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tone-soft, var(--primary-soft)); color: var(--tone, var(--primary)); }
.cl-list__icon .icon { --icon-size: 18px; }
.cl-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cl-list__title { font-weight: var(--fw-medium); display: flex; align-items: center; gap: var(--space-1-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-list__sub { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-list__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cl-list__time { font-size: var(--fs-2xs); color: var(--text-subtle); }

.cl-breakdown__bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; gap: 2px; background: var(--surface-3); }
.cl-breakdown__seg { min-width: 4px; }
.cl-breakdown__legend { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-breakdown__item { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); margin-inline: calc(var(--space-2) * -1); border-radius: var(--radius-sm); color: inherit; text-decoration: none; font-size: var(--fs-sm); }
.cl-breakdown__item:hover { background: var(--surface-2); }
.cl-breakdown__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.cl-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.cl-usage > div { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
.cl-usage dt { font-size: var(--fs-xs); color: var(--text-muted); }
.cl-usage dd { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }

.cl-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.cl-quick__item { display: flex; align-items: center; gap: var(--space-2-5, 10px); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: inherit; text-decoration: none; transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-out); }
.cl-quick__item:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.cl-quick__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-text); }
.cl-quick__icon .icon { --icon-size: 17px; }
.cl-quick__text { display: flex; flex-direction: column; min-width: 0; }
.cl-quick__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cl-quick__sub { font-size: var(--fs-2xs); color: var(--text-muted); }
@media (max-width: 400px) { .cl-quick { grid-template-columns: minmax(0, 1fr); } }

/* Tables embedded in a card (one frame, not two) */
.cl-table-card .datatable__frame, .cl-embed .datatable__frame { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.cl-table-card .datatable__frame { border-top: 1px solid var(--border-subtle); }
.cl-table-card > .card__body, .cl-embed > .card__body { overflow: hidden; border-radius: inherit; }
/* Work-around: components.css `.card > .card__body:first-child` out-ranks `.card--flush > .card__body` and leaves 20px on header-less flush cards. */
.card--flush.cl-table-card > .card__body:first-child,
.card--flush.cl-review__card > .card__body:first-child,
.card--flush.cl-flush > .card__body:first-child { padding-top: 0; }

/* ── deliveries list ───────────────────────────────────────────────────────────────────── */
.cl-stage-chips { margin-bottom: var(--space-4); }
.cl-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px 10px;
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface);
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
}
.cl-chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.cl-chip.is-active { color: var(--primary-text); background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: var(--shadow-xs); }
.cl-chip__count { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.cl-chip.is-active .cl-chip__count { background: var(--primary); color: var(--on-primary); }
.cl-toolbar { padding: var(--space-4) var(--space-5) var(--space-3); margin: 0; }
.cl-filter-city { width: 200px; }
.cl-filter-city .field, .cl-filter-dates .field, .cl-toolbar .field { margin: 0; }
.cl-filter-dates { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.cl-filter-dates .input { min-width: 0 !important; width: 150px !important; }
.cl-table-meta { padding: 0 var(--space-5) var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); min-height: 1.4em; }
.cl-filter-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 10px 6px; border-radius: var(--radius-pill); background: var(--info-soft); color: var(--info-text); font-size: var(--fs-sm); }
.cl-filter-tag__x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.cl-filter-tag__x:hover { background: color-mix(in srgb, var(--info) 18%, transparent); }
.cl-deliveries .cl-cell-main__title, .cl-deliveries .cl-cell-main__sub { white-space: nowrap; }
.cl-addr-cell { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cl-stage-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cl-stage-cell__note { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); }
.cl-row--draft td:first-child { box-shadow: inset -3px 0 0 var(--warning); }
.cl-row--failed td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
@media (max-width: 767.98px) {
  .cl-toolbar { padding: var(--space-3) var(--space-4); }
  .cl-toolbar .toolbar__search { max-width: none; flex-basis: 100%; }
  .cl-toolbar .toolbar__search:has(+ .cl-filter-toggle) { flex: 1 1 0; min-width: 0; }
  .cl-filter-toggle { flex: none; }
  /* "ניקוי סינון" gets its own short row so the search field keeps its width beside the filter toggle. */
  .cl-toolbar .toolbar__end { flex-basis: 100%; justify-content: flex-end; }
  .cl-toolbar .toolbar__filters { width: 100%; }
  .cl-toolbar .toolbar__filters > * { flex: 1 1 140px; }
  .cl-filter-city { width: auto; }
  .cl-filter-dates { flex-basis: 100% !important; }
  .cl-filter-dates .input { width: 100% !important; }
  .cl-filter-dates .field { flex: 1; }
  /* Phones: the table turns into a card list — drop the outer frame so cards are not nested in a card */
  .cl-table-card.card { background: transparent; border-color: transparent; box-shadow: none; }
  .cl-table-card > .card__body { overflow: visible; }
  .cl-table-card .cl-toolbar { padding: 0 0 var(--space-3); }
  .cl-table-card .cl-table-meta { padding-inline: 0; }
  .cl-table-card .datatable__frame { border-top: 0; }
  .cl-stage-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
  .cl-stage-chips::-webkit-scrollbar { display: none; }
  .cl-chip { flex: none; }
}

/* ── delivery detail ───────────────────────────────────────────────────────────────────── */
.cl-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-6); margin-bottom: var(--space-5); border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
  background: linear-gradient(120deg, var(--hero-soft, var(--primary-soft)) 0%, var(--surface) 62%);
}
.cl-hero::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--hero-tone, var(--primary)); }
.cl-hero__main { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; flex: 1 1 380px; }
.cl-hero__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: var(--hero-tone, var(--primary)); color: var(--on-primary); box-shadow: 0 10px 24px -10px var(--hero-tone, var(--primary)); }
.cl-hero__text { min-width: 0; }
.cl-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); margin-bottom: var(--space-2); }
.cl-hero__title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.cl-hero__detail { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-md); max-width: 62ch; }
.cl-hero--skeleton { background: var(--surface); }
.cl-journey { list-style: none; margin: 0; padding: 0; display: flex; flex: 0 1 460px; min-width: 300px; }
.cl-journey__step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cl-journey__step + .cl-journey__step::before { content: ''; position: absolute; top: 14px; inset-inline-end: calc(50% + 18px); inset-inline-start: calc(-50% + 18px); height: 2px; border-radius: 2px; background: var(--border); }
.cl-journey__step.is-done + .cl-journey__step::before { background: var(--success); }
.cl-journey__dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); color: var(--text-subtle); font-size: var(--fs-xs); font-weight: var(--fw-semibold); position: relative; z-index: 1; }
.cl-journey__step.is-done .cl-journey__dot { background: var(--success); border-color: var(--success); color: var(--on-primary); }
.cl-journey__step.is-current .cl-journey__dot { border-color: var(--hero-tone, var(--primary)); color: var(--hero-tone, var(--primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-tone, var(--primary)) 18%, transparent); }
.cl-journey__step.is-broken .cl-journey__dot { background: var(--danger); border-color: var(--danger); color: var(--on-primary); }
.cl-journey__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text); }
.cl-journey__step.is-todo .cl-journey__label { color: var(--text-subtle); font-weight: var(--fw-medium); }
.cl-journey__at { font-size: var(--fs-2xs); color: var(--text-muted); min-height: 1.3em; }
@media (max-width: 767.98px) {
  .cl-hero { padding: var(--space-5) var(--space-4); gap: var(--space-5); }
  .cl-hero__icon { width: 46px; height: 46px; border-radius: 14px; }
  .cl-hero__title { font-size: var(--fs-xl); }
  .cl-hero__detail { font-size: var(--fs-sm); }
  .cl-journey { min-width: 0; flex-basis: 100%; }
}
@media (max-width: 480px) {
  .cl-hero__icon { display: none; } /* the stage chip above the title carries the same cue */
  .cl-hero__title { font-size: var(--fs-lg); }
}
.cl-detail__alert { margin-bottom: var(--space-5); }
.cl-errlist { margin: var(--space-1) 0 0; padding-inline-start: 1.1em; display: flex; flex-direction: column; gap: 2px; }
.cl-info { margin: 0; display: flex; flex-direction: column; }
.cl-info__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-3); padding: 9px 0; border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.cl-info__row:first-child { border-top: 0; padding-top: 0; }
.cl-info__row dt { color: var(--text-muted); }
.cl-info__row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: var(--fw-medium); }
.cl-info--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.cl-info--cols .cl-info__row:nth-child(2) { border-top: 0; padding-top: 0; }
@media (max-width: 767.98px) { .cl-info--cols { grid-template-columns: minmax(0, 1fr); } .cl-info--cols .cl-info__row:nth-child(2) { border-top: 1px solid var(--border-subtle); padding-top: 9px; } }
.cl-phones { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.cl-notes { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.cl-notes__label { display: block; font-size: var(--fs-2xs); color: var(--text-muted); margin-bottom: 2px; }
.cl-notes p { margin: 0; white-space: pre-line; }
.cl-address-card { padding: var(--space-4) var(--space-5) var(--space-3); }
.cl-address-card__line { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.cl-address-card__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle); }
.cl-address-card__foot a { display: inline-flex; align-items: center; gap: 4px; }
.cl-address-wrap { overflow: hidden; }
.cl-minimap { border-top: 1px solid var(--border-subtle); overflow: hidden; }
.cl-minimap--empty { display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 120px; color: var(--text-subtle); font-size: var(--fs-sm); background: var(--surface-2); }
.cl-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 767.98px) { .cl-docs { grid-template-columns: minmax(0, 1fr); } }
.cl-doc { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); transition: border-color var(--dur-2), box-shadow var(--dur-2); }
.cl-doc.is-ready:hover { border-color: var(--primary-soft-2); box-shadow: var(--shadow-xs); }
.cl-doc.is-pending { background: var(--surface-2); border-style: dashed; }
.cl-doc__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-text); }
.cl-doc.is-pending .cl-doc__icon { background: var(--surface-3); color: var(--text-subtle); }
.cl-doc__text { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-doc__title { font-weight: var(--fw-semibold); }
.cl-doc__state { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.cl-doc.is-ready .cl-doc__state { color: var(--success-text); }
.cl-doc__actions { display: flex; gap: var(--space-1); margin-inline-start: auto; }
.cl-photos { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.cl-photos__head { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.cl-photos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2); }
.cl-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-3); cursor: zoom-in; }
.cl-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.cl-photo:hover img { transform: scale(1.04); }
.cl-photo__zoom { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--backdrop); color: var(--on-primary); opacity: 0; transition: opacity var(--dur-2); }
.cl-photo:hover .cl-photo__zoom, .cl-photo:focus-visible .cl-photo__zoom { opacity: 1; }
.cl-visit-result { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 180px; max-width: 360px; }
.cl-visit-when, .cl-visit-geo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cl-visit-when__at { font-size: var(--fs-xs); color: var(--text-muted); }
.cl-visit-when .cl-count { font-size: var(--fs-xs); color: var(--text-muted); }
.cl-visit-result__notes { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-visit-result__notes strong { color: var(--text); font-weight: var(--fw-semibold); }
.cl-gps-link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cl-count { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.cl-file-meta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); color: var(--text-muted); }

/* ── new delivery ──────────────────────────────────────────────────────────────────────── */
.cl-form-card .form-section { display: flex; flex-direction: column; gap: var(--space-4); }
.cl-form-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.cl-form-head__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-text); font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-top: 1px; }
.cl-form-head .form-section__title { margin: 0; }
.cl-ltr-input .input, input.cl-ltr-input, .cl-ltr-input input { direction: ltr; text-align: right; }
.cl-priority { display: flex; align-items: center; padding-top: var(--space-6); }
@media (max-width: 767.98px) { .cl-priority { padding-top: 0; } }
.cl-summary .card__body { display: flex; flex-direction: column; gap: var(--space-4); }
.cl-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cl-checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-2); align-items: center; font-size: var(--fs-sm); color: var(--text-muted); }
.cl-checklist__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--text-subtle); }
.cl-checklist li.is-ok { color: var(--text); }
.cl-checklist li.is-ok .cl-checklist__mark { background: var(--success); border-color: var(--success); color: var(--on-primary); }
.cl-checklist li.is-warn .cl-checklist__mark { border-color: var(--warning); color: var(--warning-text); background: var(--warning-soft); }
.cl-checklist li.is-bad .cl-checklist__mark { border-color: var(--danger); color: var(--danger-text); background: var(--danger-soft); }
.cl-checklist li.is-bad .cl-checklist__label { color: var(--danger-text); }
.cl-checklist__label { font-weight: var(--fw-medium); }
.cl-checklist__value { grid-column: 2; font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-summary__price { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--fs-sm); }
.cl-summary__price strong { font-size: var(--fs-lg); }
.cl-summary__actions { display: flex; flex-direction: column; gap: var(--space-2); }
.cl-success { max-width: 720px; margin-inline: auto; }
.cl-success__summary { margin: var(--space-2) auto 0; max-width: 520px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.cl-success__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 10px var(--space-4); font-size: var(--fs-sm); border-top: 1px solid var(--border-subtle); }
.cl-success__row:first-child { border-top: 0; }
.cl-success__row > :last-child { text-align: end; }
.cl-success__warn { max-width: 520px; margin-inline: auto; }

/* ── batch upload ──────────────────────────────────────────────────────────────────────── */
.cl-template { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4); border-radius: var(--radius-md); background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); }
.cl-template__file { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cl-template__file > span:last-child { display: flex; flex-direction: column; }
.cl-template__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--success); color: var(--on-primary); }
.cl-columns { margin-top: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.cl-columns summary { cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.cl-columns__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px var(--space-4); }
.cl-columns__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-size: var(--fs-sm); }
.cl-columns__note { flex-basis: 100%; line-height: 1.3; }
.cl-columns__req { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--danger-text); background: var(--danger-soft); padding: 0 6px; border-radius: var(--radius-pill); }
.cl-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 767.98px) { .cl-modes { grid-template-columns: minmax(0, 1fr); } }
.cl-mode { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); }
.cl-mode__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--primary-soft); color: var(--primary-text); margin-bottom: var(--space-2); }
.cl-mode__title { margin: 0 0 var(--space-1); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.cl-mode__text { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.cl-mode__eg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.cl-mode__eg span { font-size: var(--fs-2xs); padding: 3px 8px; border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--border-subtle); }
.cl-pdf-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--info-soft); color: var(--info-text); font-size: var(--fs-sm); }
.cl-mini-list { list-style: none; margin: 0; padding: 0; }
.cl-mini-list__item { display: flex; align-items: center; gap: var(--space-2); padding: 8px 0; color: inherit; text-decoration: none; border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.cl-mini-list li:first-child .cl-mini-list__item { border-top: 0; }
.cl-mini-list__item:hover .grow { color: var(--primary-text); }

/* ── batch review ("בקשת עדכון") ──────────────────────────────────────────────────────────── */
.cl-bsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: var(--space-3); margin-bottom: var(--space-5); }
@media (max-width: 1099.98px) { .cl-bsum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-bsum__pages { grid-column: 1 / -1; } }
.cl-bsum__tile { --t: var(--text-muted); --t-soft: var(--surface-3); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-3); align-items: center; padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); }
.cl-bsum__tile.tone-success { --t: var(--success-text); --t-soft: var(--success-soft); }
.cl-bsum__tile.tone-danger { --t: var(--danger-text); --t-soft: var(--danger-soft); }
.cl-bsum__tile.tone-warning { --t: var(--warning-text); --t-soft: var(--warning-soft); }
.cl-bsum__icon { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--t-soft); color: var(--t); }
.cl-bsum__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.1; }
.cl-bsum__label { font-size: var(--fs-xs); color: var(--text-muted); }
.cl-bsum__pages.tone-danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger-soft) 45%, var(--surface)); }
.cl-bsum__pages.tone-success { border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.cl-review__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
/* Five filters do not fit a phone: the control scrolls inside itself instead of widening the page. */
.cl-review__bar .segmented { overflow-x: auto; scrollbar-width: none; }
.cl-review__bar .segmented::-webkit-scrollbar { display: none; }
@media (max-width: 767.98px) { .cl-review__bar .segmented__option .icon { display: none; } .cl-review__bar .segmented__option { padding-inline: 10px; } }
.cl-review__card > .card__body { padding: 0; overflow: hidden; border-radius: inherit; }
.cl-bgrid-wrap {
  overflow-x: auto;
  /* scroll shadows: hint that more columns sit beyond the visible edge */
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 16%, transparent), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 16%, transparent), transparent) right center / 14px 100% no-repeat scroll;
}
.cl-bgrid-wrap:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
.cl-bgrid { min-width: 1160px; font-size: var(--fs-sm); }
.cl-bgrid__row { display: grid; grid-template-columns: var(--cols); align-items: stretch; }
.cl-bgrid__row--head { position: sticky; top: 0; z-index: 1; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cl-bgrid__th { padding: 10px var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.cl-bgrid__group { border-bottom: 1px solid var(--border-subtle); }
.cl-bgrid__group:last-child { border-bottom: 0; }
.cl-bgrid__group .cl-bgrid__row { cursor: pointer; transition: background var(--dur-1); }
.cl-bgrid__group:hover { background: var(--surface-2); }
.cl-bgrid__group .cl-bgrid__row:focus-visible { outline: none; background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.cl-bgrid__group.state-excluded { opacity: 0.55; }
.cl-bgrid__group.state-excluded:hover { opacity: 0.85; }
.cl-bgrid__group.state-invalid .cl-bgrid__row > :first-child { box-shadow: inset -3px 0 0 var(--danger); }
.cl-bgrid__group.state-warning .cl-bgrid__row > :first-child { box-shadow: inset -3px 0 0 var(--warning); }
.cl-bgrid__cell { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 9px var(--space-3); }
.cl-bgrid__cell.is-error { background: color-mix(in srgb, var(--danger-soft) 75%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); }
.cl-bgrid__cell.is-warning { background: color-mix(in srgb, var(--warning-soft) 75%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 35%, transparent); }
.cl-bgrid__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-bgrid__value.is-empty { color: var(--text-subtle); }
.cl-bgrid__sub { font-size: var(--fs-2xs); color: var(--text-subtle); white-space: nowrap; }
.cl-bgrid__msg { display: flex; align-items: flex-start; gap: 3px; font-size: var(--fs-2xs); line-height: 1.35; font-weight: var(--fw-medium); }
.cl-bgrid__msg > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-bgrid__msg .icon { flex: none; margin-top: 1px; }
.is-error > .cl-bgrid__msg { color: var(--danger-text); }
.is-warning > .cl-bgrid__msg { color: var(--warning-text); }
.cl-bgrid__act { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-2); }
/* The include / edit column (or the created delivery's id) is the first column, so it is in view at the grid's
   start; the pages column follows the state (page-range errors decide most batch problems). */
.cl-bgrid__issues { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); padding: 0 var(--space-3) var(--space-2); padding-inline-start: 280px; }
.cl-issue { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-xs); font-size: var(--fs-2xs); }
.cl-issue.is-error { background: var(--danger-soft); color: var(--danger-text); }
.cl-issue.is-warning { background: var(--warning-soft); color: var(--warning-text); }
.cl-state { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; }
.cl-state.tone-danger { color: var(--danger-text); }
.cl-state.tone-warning { color: var(--warning-text); }
.cl-state.tone-success { color: var(--success-text); }
.cl-state.tone-neutral { color: var(--text-muted); }
.cl-icon-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.cl-icon-btn:hover { background: var(--surface-3); color: var(--text); }
.cl-idchip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-decoration: none; font-family: var(--font-mono); }
.cl-idchip:hover { background: var(--primary-soft-2); }
.cl-bcards { list-style: none; margin: 0; padding: 0; }
.cl-bcard { border-top: 1px solid var(--border-subtle); }
.cl-bcard:first-child { border-top: 0; }
.cl-bcard.state-invalid { box-shadow: inset -3px 0 0 var(--danger); }
.cl-bcard.state-warning { box-shadow: inset -3px 0 0 var(--warning); }
.cl-bcard.state-excluded { opacity: 0.6; }
.cl-bcard__main { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; padding: var(--space-3) var(--space-4); border: 0; background: transparent; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.cl-bcard__main:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
.cl-bcard__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.cl-bcard__no { flex: none; display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: var(--radius-xs); background: var(--surface-3); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.cl-bcard__sub { font-size: var(--fs-xs); color: var(--text-muted); }
.cl-bcard__foot { padding: 0 var(--space-4) var(--space-3); }
.cl-commit { justify-content: space-between; flex-wrap: wrap; }
.cl-commit__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.cl-commit__reason { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.cl-commit__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* Phones: the sticky bar keeps the checkbox and the blocking reason; the long hint would cover a fifth of the screen. */
@media (max-width: 767.98px) { .cl-commit .check__hint { display: none; } }
.cl-result { margin-bottom: var(--space-5); }
.cl-result__head { display: flex; align-items: center; gap: var(--space-4); }
.cl-result__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--success); color: var(--on-primary); box-shadow: 0 10px 24px -10px var(--success); flex: none; }
.cl-result__icon.tone-warning { background: var(--warning); box-shadow: 0 10px 24px -10px var(--warning); }
.cl-result__icon.tone-neutral { background: var(--surface-3); color: var(--text-muted); box-shadow: none; }
.cl-result__title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.cl-result__head p { margin: 2px 0 0; }
.cl-result__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.cl-result__stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-muted); }
.cl-result__stat > span:first-child { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text); }
.cl-result__stat.tone-success > span:first-child { color: var(--success-text); }
.cl-result__stat.tone-warning > span:first-child { color: var(--warning-text); }
.cl-result__ids { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-4); }
.cl-result__ids-label { font-size: var(--fs-xs); color: var(--text-muted); margin-inline-end: var(--space-1); }
.cl-rowdrawer { gap: var(--space-5); }
.cl-rowdrawer__issues { display: flex; flex-direction: column; gap: var(--space-2); }
/* Phones: three footer buttons do not fit; the drawer's close (X) already cancels. */
@media (max-width: 479.98px) { .cl-rowdrawer__cancel { display: none; } }
.cl-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.cl-fieldset legend { padding: 0; margin-bottom: var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.cl-fieldset + .cl-fieldset { padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }

/* ── batches ───────────────────────────────────────────────────────────────────────────── */
.cl-batches .card--flush > .card__body { overflow: hidden; border-radius: inherit; }
.cl-batches .datatable__frame { border: 0; border-radius: 0; box-shadow: none; }

/* ── account ───────────────────────────────────────────────────────────────────────────── */
.cl-account > * + * { margin-top: var(--space-5); }
.cl-account__top { align-items: stretch; }
@media (max-width: 767.98px) { .cl-account__top { grid-template-columns: minmax(0, 1fr); } }
.cl-paycard__status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cl-paycard__status span { display: inline-flex; align-items: center; gap: 4px; }
.cl-paycard__text { margin: var(--space-3) 0; color: var(--text-muted); font-size: var(--fs-sm); }
.cl-paycard.tone-danger, .cl-paycard.tone-warning { border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.cl-prices { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cl-prices th, .cl-prices td { padding: 12px var(--space-5); border-top: 1px solid var(--border-subtle); text-align: start; }
.cl-prices thead th { border-top: 0; background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.cl-prices tbody th { font-weight: var(--fw-medium); }
.cl-prices .align-end { text-align: end; }
.cl-settings .field { margin: 0; }
.cl-setting { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
.cl-apikey { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); }
.cl-apikey__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary-text); flex: none; }
.cl-apikey__prefix { font-family: var(--font-mono); font-size: var(--fs-md); text-align: right; }
.cl-reveal { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); border: 1px dashed var(--border-strong); }
.cl-reveal__key { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; user-select: all; text-align: left; }

/* ── API docs ──────────────────────────────────────────────────────────────────────────── */
.cl-docs-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-8); align-items: start; max-width: 1180px; }
@media (max-width: 1023.98px) { .cl-docs-layout { grid-template-columns: minmax(0, 1fr); } .cl-toc { display: none; } }
.cl-toc { position: sticky; top: calc(var(--topbar-h) + var(--space-5)); }
.cl-toc__title { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; color: var(--text-subtle); margin-bottom: var(--space-2); }
.cl-toc ul { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--border-subtle); }
.cl-toc a { display: block; padding: 5px var(--space-3); margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); }
.cl-toc a:hover { color: var(--primary-text); border-color: var(--primary); }
.cl-toc a.is-active { color: var(--primary-text); border-color: var(--primary); font-weight: var(--fw-semibold); }
.cl-docs-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.cl-doc-sec { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.cl-doc-sec p { margin: 0; line-height: var(--lh-relaxed); }
.cl-doc-sec p code, .cl-doc-sec li code, .cl-doc-sec .alert code, .cl-fact code { font-family: var(--font-mono); font-size: 0.88em; padding: 1px 5px; border-radius: 5px; background: var(--surface-3); }
.cl-doc-sec__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.cl-doc-sec__title:focus { outline: none; }
.cl-doc-sec__sub { margin: var(--space-2) 0 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
@media (max-width: 767.98px) { .cl-doc-sec { padding: var(--space-4); } }
.cl-endpoint { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; direction: ltr; justify-content: flex-end; }
.cl-endpoint__path { font-family: var(--font-mono); font-size: var(--fs-sm); padding: 4px 10px; border-radius: var(--radius-sm); background: var(--surface-3); overflow-wrap: anywhere; }
.cl-method { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.05em; padding: 4px 8px; border-radius: var(--radius-sm); color: var(--on-primary); }
.cl-method--get { background: var(--success); }
.cl-method--post { background: var(--primary); }
.cl-method--put { background: var(--warning); }
.cl-method--delete { background: var(--danger); }
.cl-params-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.cl-params { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.cl-params th, .cl-params td { padding: 9px var(--space-3); border-top: 1px solid var(--border-subtle); text-align: start; vertical-align: top; }
.cl-params thead th { border-top: 0; background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); }
.cl-params tbody th { font-weight: var(--fw-medium); white-space: nowrap; }
.cl-params code { font-family: var(--font-mono); font-size: 0.9em; }
.cl-req { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--danger-text); background: var(--danger-soft); padding: 0 6px; border-radius: var(--radius-pill); }
.cl-facts { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 767.98px) { .cl-facts { grid-template-columns: minmax(0, 1fr); } }
.cl-fact { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); font-size: var(--fs-sm); min-width: 0; }
.cl-fact code { overflow-wrap: anywhere; align-self: flex-start; max-width: 100%; }
.cl-fact__label { font-size: var(--fs-2xs); color: var(--text-muted); }
.cl-code-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
/* Side by side only when the docs column is wide enough for a curl line (beside the sidebar and the TOC). */
@media (max-width: 1499.98px) { .cl-code-pair { grid-template-columns: minmax(0, 1fr); } }
.cl-bullets { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.cl-doc-help { color: var(--text-muted); font-size: var(--fs-sm); }