/* ===========================================================================
 * logo-editor.css — the workspace logo editor and the logo group around it.
 *
 * Loaded on THREE pages, Settings, onboarding and Clients (app/Views/layout/app.php),
 * because app/Views/settings/_logo_editor.php is included by all three. ⛔ A partial shared
 * by several pages needs its stylesheet on each — drop a link and that host renders the
 * editor unstyled.
 *
 * Global tokens only (`:root` in style.css). Settings' `--cfg-*` tokens do not exist on
 * the onboarding page, so nothing here may use them.
 * ======================================================================== */

/* ---- the logo group (Settings → Organisation profile) ------------------- */

.le-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (min-width: 901px) {
  .le-current {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 32px;
  }
}

.le-current__plate-col,
.le-current__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.le-current__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.le-current__note:empty {
  display: none;
}

.le-current__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.le-current__buttons[hidden] {
  display: none;
}

/* The checkerboard plate: shows where a logo is see-through. */
.le-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--ink) 7%, var(--surface-card)) 0% 25%, var(--surface-card) 0% 50%)
    0 0 / 16px 16px;
}

.le-plate img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* The cover logo (2026-10-15) is shown on the brand colour, as the report cover prints it. */
.le-plate.le-plate--on-brand {
  background: var(--le-brand, #152c42);
}

.le-optional {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}

.le-plate__empty {
  padding: 10px 16px;
  border: 1px dashed var(--rule-strong);
  border-radius: 8px;
  background: var(--surface-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}

.le-native .cfg-row__hint {
  display: block;
}

/* With JavaScript the native field is replaced by the buttons; it stays in the form
   (visually hidden) so a chosen file can still be read, and is emptied before the
   form posts. */
.le-group.is-enhanced .le-native,
.ob-upload.is-enhanced [data-logo-native] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.le-group.is-enhanced {
  position: relative;
}

.le-btn-danger-text {
  color: var(--danger);
}

.le-tips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
}

.le-tips__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.le-tips__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.le-sample {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.le-sample__hint {
  font-size: 12.5px;
  color: var(--ink-3);
}

/* "Your logo may be showing on a black background" */
.le-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
}

.le-banner__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.le-banner__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.le-banner__copy {
  flex: 1 1 260px;
  min-width: 0;
}

.le-banner__title {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.le-banner__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--accent-ink);
}

.le-banner__btn {
  flex: 0 0 auto;
}

/* ---- messages ----------------------------------------------------------- */

.le-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.le-msg[hidden] {
  display: none;
}

.le-msg .le-icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

.le-msg--info {
  background: var(--info-soft);
  color: color-mix(in srgb, var(--info) 80%, var(--ink));
}

.le-msg--warn {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.le-msg--bad {
  background: var(--danger-soft);
  color: color-mix(in srgb, var(--danger) 85%, var(--ink));
}

.le-msg--good {
  background: var(--success-soft);
  color: color-mix(in srgb, var(--success) 85%, var(--ink));
}

.le-msg--action {
  align-items: center;
  flex-wrap: wrap;
}

.le-msg--action > span {
  flex: 1 1 220px;
}

.le-msg__btn {
  flex: 0 0 auto;
}

/* ---- the editor --------------------------------------------------------- */

/* ONE LAYOUT, THE SHEET (owner, 2026-10-02): a Back bar on top, the logo and its previews
   on the left, the settings on the right, and a footer that never scrolls away. It fills
   whatever holds it — a client window (which it takes over) or the logo dialog on Settings
   and onboarding (below). The in-page card layout it replaced is gone.
   ⛔ `form.le[data-logo-editor]`, NOT `.le`: style.css styles the bare `form` tag as a card
   with its own grid and gap, and settings-tabs.css resets every form in a settings section
   at (0,1,1). */
form.le[data-logo-editor] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface-card);
}

form.le[data-logo-editor][hidden] {
  display: none;
}

/* The dialog on Settings and onboarding — the client window's own size and chrome
   (clients.css, `.clients-modal .modal__dialog`), so the editor looks the same in all
   three places. ≤900px the canonical `.modal--sheet` rule in style.css makes it full
   screen, and the sheet's bar becomes the top of the screen. */
@media (min-width: 901px) {
  .modal.le-modal .modal__dialog.le-modal__dialog {
    width: min(880px, calc(100vw - 32px));
    height: min(85vh, 760px);
    max-height: min(90vh, 960px);
    min-height: min(60vh, 520px);
    /* desktop.css pads every `.modal__dialog` 24px; the sheet's bar and footer run edge to edge. */
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(26, 24, 21, 0.08);
    background: var(--surface-card);
    box-shadow: 0 20px 60px rgba(26, 24, 21, 0.18), 0 4px 16px rgba(26, 24, 21, 0.08);
  }
}

.le__title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.le__lede {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}

.le__checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.le__checks:not(:has(.le-msg:not([hidden]))) {
  display: none;
}

.le__stagewrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.le-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  padding: 24px;
  box-sizing: border-box;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  touch-action: none;
}

.le-stage[data-bg="check"] {
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--ink) 7%, var(--surface-card)) 0% 25%, var(--surface-card) 0% 50%)
    0 0 / 18px 18px;
}

.le-stage[data-bg="white"] {
  background: #ffffff;
}

.le-stage[data-bg="dark"] {
  background: var(--ink);
}

.le-stage__canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.le-stage.is-picking .le-stage__canvas {
  cursor: crosshair;
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}

.le__stagehint {
  margin: 0;
  font-size: 12.5px;
  color: var(--accent-ink);
}

.le__stagehint[hidden] {
  display: none;
}

/* The crop box sits over the canvas; the script positions it in pixels. */
.le-crop {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--accent);
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--ink) 40%, transparent);
  pointer-events: none;
}

.le-crop[hidden] {
  display: none;
}

.le-crop__handle {
  position: absolute;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  background: var(--surface-card);
  border: 2px solid var(--accent);
  border-radius: 4px;
  pointer-events: auto;
  touch-action: none;
}

.le-crop__handle--nw { top: -12px; left: -12px; cursor: nwse-resize; }
.le-crop__handle--ne { top: -12px; right: -12px; cursor: nesw-resize; }
.le-crop__handle--sw { bottom: -12px; left: -12px; cursor: nesw-resize; }
.le-crop__handle--se { bottom: -12px; right: -12px; cursor: nwse-resize; }

.le__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.le__barlabel {
  font-size: 12.5px;
  color: var(--ink-3);
}

.le__barspacer {
  flex: 1 1 auto;
}

.le__tool[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Segmented control — the stage backdrop and "Space around the logo". */
.le-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-subtle);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.le-seg__btn,
.le-seg__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}

/* "Space around the logo" sits in a flex column (.le-field), which stretches it to the full
   width — so its options share that width rather than huddling at the left of an empty bar. */
.le-seg--fill .le-seg__opt {
  flex: 1 1 0;
}

.le-seg__btn.is-active,
.le-seg__opt:has(input:checked) {
  background: var(--surface-card);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.le-seg__opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.le-seg__btn:focus-visible,
.le-seg__opt:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.le__controls {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

/* Toggle — the same shape as Settings' cfg-toggle, on global tokens. */
.le-toggle {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.le-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.le-toggle__track {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 24px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--surface-inset);
  border: 1px solid var(--rule-strong);
  transition: background 0.14s ease, border-color 0.14s ease;
}

.le-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease;
}

.le-toggle input:checked + .le-toggle__track {
  background: var(--ink);
  border-color: var(--ink);
}

.le-toggle input:checked + .le-toggle__track::after {
  transform: translateX(16px);
}

.le-toggle input:focus-visible + .le-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.le-toggle__label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.le-toggle__hint {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.le-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.le-field__legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.le-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

@media (min-width: 901px) {
  .le-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.le-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface-card);
}

.le-choice:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: color-mix(in srgb, var(--ink) 2%, var(--surface-card));
}

.le-choice input {
  margin: 3px 0 0;
  accent-color: var(--ink);
  flex: 0 0 auto;
}

.le-choice__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.le-choice__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.le-choice__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3);
}

.le-clear {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 16px 18px;
  background: var(--surface-subtle);
  border-radius: 10px;
}

.le-clear[hidden] {
  display: none;
}

@media (min-width: 901px) {
  .le-clear {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.le-clear__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.le-clear__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.le-clear__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.le-clear__swatch {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--rule-strong);
  background: #000000;
}

.le-clear__name {
  font-size: 13px;
  color: var(--ink-2);
  min-width: 56px;
}

.le-clear__pick[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* "Inside the logo too" — the whole row, on a card of its own, so it is seen (it sat under the
   colour picker and was missed, 2026-10-02). */
.le-clear__inside {
  grid-column: 1 / -1;
  padding: 12px 14px;
  background: var(--surface-card);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
}

.le-clear__inside:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.le-clear__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.le-clear__ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
}

.le-range {
  width: 100%;
  min-height: 28px;
  margin: 0;
  accent-color: var(--ink);
}

.le-source {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.le-source__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 1px solid var(--rule-strong);
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--ink) 7%, var(--surface-card)) 0% 25%, var(--surface-card) 0% 50%)
    0 0 / 10px 10px;
}

.le-source__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 220px;
  min-width: 0;
}

.le-source__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.le-source__meta {
  font-size: 12.5px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.le-source__meta:empty {
  display: none;
}

.le-source__reset {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
  cursor: pointer;
}

.le-dirty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 14px;
  background: var(--danger-soft);
  border-radius: 10px;
}

.le-dirty[hidden] {
  display: none;
}

.le-dirty__text {
  flex: 1 1 220px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.le-dirty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.le__status {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.le__status:empty {
  display: none;
}

/* ---- the previews ("Where your logo appears") ---------------------------- */

.le-pv {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.le-pv__cap {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

/* Each mock box is sized as the real surface sizes the logo, so a square or padded logo
   looks as small here as it will on the real thing. */
.le-pv img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

.le-pv img:not([src]),
.le-pv img[src=""] {
  visibility: hidden;
}

.le-pv__topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.le-pv__topbar img {
  max-height: 28px;
  max-width: 180px;
}

.le-pv__pill {
  flex: 0 0 auto;
  width: 96px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface-subtle);
}

.le-pv__runhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--le-brand, #152c42);
  border-radius: 8px;
}

.le-pv__runhead img {
  max-height: 34px;
  max-width: 160px;
}

.le-pv__meta {
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-3);
  text-align: right;
}

.le-pv__cover {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  background: var(--le-brand, #152c42);
  border-radius: 8px;
}

.le-pv__plate {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  height: 40px;
  padding: 5px 12px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 6px;
}

.le-pv__plate img {
  max-height: 30px;
  max-width: 160px;
}

/* The cover logo's preview (2026-10-15): no plate, the logo on the colour. */
.le-pv__bare {
  display: flex;
  align-items: center;
  height: 40px;
}

.le-pv__bare img {
  max-height: 34px;
  max-width: 180px;
}

.le-pv__covertitle {
  font-family: var(--font-display, inherit);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  color: #ffffff;
}

.le-pv__mail {
  padding: 10px;
  background: var(--surface-subtle);
  border-radius: 8px;
}

.le-pv__mailcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 14px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.le-pv__mailcard img {
  max-height: 48px;
  max-width: 180px;
}

.le-pv__mailline {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.le-pv__portal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  max-width: 100%;
  padding: 14px;
  box-sizing: border-box;
  background: #fcfdf9;
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.le-pv__portal img {
  max-height: 40px;
  max-width: 132px;
}

.le-pv__bar {
  height: 8px;
  width: 70%;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.le-pv__bar--short {
  width: 52%;
}

/* ---- phones and tablets (the app's one breakpoint, 900px) --------------- */

@media (max-width: 900px) {
  .le-stage {
    height: 200px;
    padding: 14px;
  }

  .le__bar .le-seg {
    width: 100%;
  }

  .le__bar .le-seg__btn {
    flex: 1 1 0;
    min-height: 40px;
  }

  .le__barspacer {
    display: none;
  }

  .le__tool {
    flex: 1 1 0;
    min-height: 44px;
  }

  .le-seg--fill {
    display: flex;
    width: 100%;
  }

  .le-seg--fill .le-seg__opt {
    flex: 1 1 0;
    min-height: 40px;
  }

  .le-current__buttons .btn {
    flex: 1 1 100%;
    min-height: 48px;
    font-size: 14px;
  }

  .le-clear__pick {
    min-height: 44px;
  }
}

/* ---- onboarding step 2 -------------------------------------------------- */

/* The logo plate on the company stage: wide, on the checkerboard, so a wide or
   see-through logo is shown as it is rather than squeezed into the 42px icon box. */
.ob-upload .ob-logo-plate {
  width: 168px;
  height: 72px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid var(--rule-strong);
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--ink) 7%, var(--surface-card)) 0% 25%, var(--surface-card) 0% 50%)
    0 0 / 12px 12px;
}

/* ⚠ max-height IN PIXELS, NOT 100%. The plate is a grid (.ob-icon-box) whose row is
   auto-sized, so a percentage max-height never resolved: only the width limit held, and a
   wide logo in the 96px phone/tablet plate drew 148px tall and was cropped. The figure is
   the plate's height less its 8px padding and 1px border, top and bottom. */
.ob-upload .ob-logo-plate img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 54px;
  object-fit: contain;
}

.ob-upload .ob-logo-plate img[hidden],
.ob-upload .ob-logo-plate [data-logo-placeholder][hidden] {
  display: none;
}

.ob-logo-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ob-logo-buttons[hidden] {
  display: none;
}

.ob-upload .le-msg {
  margin-top: 8px;
  font-size: 12.5px;
}

@media (max-width: 900px) {
  .ob-upload .ob-logo-plate {
    width: 100%;
    height: 96px;
  }

  .ob-upload .ob-logo-plate img {
    max-height: 78px;
  }

  /* `auto` + nowrap, not `1 1 0`: three equal shares of a 240px phone row broke the labels
     mid-word ("Chang / e file"). Now a button that does not fit wraps whole to a new row. */
  .ob-logo-buttons .btn {
    flex: 1 1 auto;
    min-height: 44px;
    white-space: nowrap;
  }
}

/* ⚠ ONBOARDING STYLES BARE TAGS. onboarding.css sets `.onboarding-flow p` (colour),
   `.onboarding-flow h3` (size) and `.onboarding-flow svg` (20px) at (0,1,1), which beat
   the single-class rules above — the advice text came out grey in onboarding only
   (seen in the browser). These restate the editor's own values one step higher. */
.le-msg.le-msg--info {
  color: color-mix(in srgb, var(--info) 80%, var(--ink));
}

.le-msg.le-msg--warn {
  color: var(--accent-ink);
}

.le-msg.le-msg--bad {
  color: color-mix(in srgb, var(--danger) 85%, var(--ink));
}

.le-msg.le-msg--good {
  color: color-mix(in srgb, var(--success) 85%, var(--ink));
}

.le .le__title {
  font-size: 20px;
}

.le .le__lede {
  color: var(--ink-2);
}

.le .le__stagehint {
  color: var(--accent-ink);
}

.le .le-icon,
.le-msg .le-icon {
  width: 16px;
  height: 16px;
}

/* ---- keyboard: crop corners are buttons, picking has a marker ---------- */

.le-crop__handle {
  appearance: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
}

.le-crop__handle:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.le-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.le-marker {
  position: absolute;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface-card), inset 0 0 0 2px var(--surface-card);
  pointer-events: none;
}

.le-marker[hidden] {
  display: none;
}

/* ---- the client windows (Add client / Edit client) --------------------- */

/* The field (signed off on the canvas, 2026-10-02): a small white tile showing the logo as
   it sits on a report page, one line about the file beside it, three small buttons and a
   one-line hint. It sits in a form grid in Add client, so it takes the whole row. */
.cl-logo {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cl-logo.is-enhanced {
  position: relative;
}

/* Add client only — the other fields there are labelled this way. Without JavaScript the
   native field carries its own label, so this one only shows once the buttons do. These
   are the literal values of `.clients-modal .clients-form label` (clients.css). */
.cl-logo__label {
  display: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4, #9a9188);
}

.cl-logo.is-enhanced .cl-logo__label {
  display: block;
}

.cl-logo__row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

/* Without JavaScript there is nothing to show in the tile until the client is saved. */
.cl-logo:not(.is-enhanced) .cl-logo__tile {
  display: none;
}

.cl-logo__tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 84px;
  padding: 12px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
}

.cl-logo__tile img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* No logo (or one about to be removed): a dashed box on the page ground. */
.cl-logo__tile:not(:has(> img:not([hidden]))) {
  border-style: dashed;
  background: var(--surface-subtle);
}

/* The client's cover logo (2026-10-15) is shown on the brand colour, as the cover prints it. */
.cl-logo.cl-logo--cover {
  margin-top: 18px;
}

.cl-logo__tile.cl-logo__tile--brand:has(> img:not([hidden])) {
  border-color: transparent;
  background: var(--le-brand, #152c42);
}

.cl-logo__empty,
.cl-logo__gone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
}

.cl-logo__empty .le-icon {
  width: 20px;
  height: 20px;
}

.cl-logo__gone {
  display: none;
}

.cl-logo:has([data-logo-remove-pending]:not([hidden])) .cl-logo__gone {
  display: flex;
}

.cl-logo:has([data-logo-remove-pending]:not([hidden])) .cl-logo__empty {
  display: none;
}

.cl-logo__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cl-logo__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

.cl-logo__meta:not(:has(> :not(:empty):not([hidden]))) {
  display: none;
}

.cl-logo__pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.cl-logo__pill[hidden] {
  display: none;
}

.cl-logo__buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cl-logo__buttons[hidden] {
  display: none;
}

/* While a removal waits for the save, the only thing to do is keep the logo. */
.cl-logo:has([data-logo-remove-pending]:not([hidden])) .cl-logo__buttons {
  display: none;
}

.cl-logo .cl-logo__btn {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.cl-logo__remove {
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
  cursor: pointer;
}

.cl-logo__remove:hover {
  background: var(--danger-soft);
}

.cl-logo__remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.cl-logo__pending {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  color: var(--accent-ink);
}

.cl-logo__pending[hidden] {
  display: none;
}

.cl-logo__hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* With JavaScript the hint sits under the buttons; without it the native field has its own. */
.cl-logo:not(.is-enhanced) .cl-logo__hint {
  display: none;
}

.cl-logo__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cl-logo.is-enhanced .le-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .cl-logo__row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cl-logo__tile {
    width: 100%;
    height: 96px;
  }

  .cl-logo .cl-logo__btn,
  .cl-logo__remove {
    min-height: 44px;
  }

  .cl-logo__buttons .cl-logo__btn {
    flex: 1 1 0;
  }
}

/* ---- the sheet ----------------------------------------------------------- */

/* In a client window it takes the window's place while open (the window's own body and
   footer carry data-logo-host-hide). */
/* Add client is a narrow window; while the editor is open it takes the edit window's size,
   so both windows show the editor the same way. */
@media (min-width: 901px) {
  .clients-modal .modal__dialog:has(> form.le--sheet[data-logo-editor]:not([hidden])) {
    width: min(880px, calc(100vw - 32px));
    height: min(85vh, 760px);
  }
}

/* The window's header keeps a gap for the summary strip under it; the sheet's bar sits
   right against it instead. */
.clients-modal .modal__dialog:has(> form.le--sheet[data-logo-editor]:not([hidden])) > .modal__header {
  margin-bottom: 0;
}

.le-sheet__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 2%, var(--surface-card));
}

.le-sheet__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-left: -10px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}

.le-sheet__back:hover {
  background: var(--surface-subtle);
}

.le-sheet__back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.le-sheet__sep {
  width: 1px;
  height: 20px;
  background: var(--rule-strong);
}

.le.le--sheet .le__title {
  font-size: 17px;
}

.le.le--sheet .le__lede {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.le-sheet__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 0;
}

.le-sheet__main,
.le-sheet__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.le-sheet__main {
  gap: 14px;
  padding: 18px 22px;
}

.le-sheet__side {
  gap: 18px;
  padding: 18px;
  border-left: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 2%, var(--surface-card));
}

/* Short notes, not banners: the window is small. */
.le--sheet .le__checks {
  gap: 6px;
}

.le--sheet .le-msg {
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12.5px;
}

.le--sheet .le-stage {
  height: 200px;
  padding: 16px;
}

.le--sheet .le-seg__btn,
.le--sheet .le-seg__opt {
  min-height: 30px;
  padding: 0 11px;
}

.le--sheet .le__tool {
  min-height: 34px;
}

/* The segmented control says what it is to a screen reader; there is no room for the words. */
.le--sheet .le__barlabel {
  display: none;
}

.le-sheet__where {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.le-sheet__wheretitle {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.le-sheet__previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.le--sheet .le-pv__cap {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
}

.le--sheet .le-pv__runhead {
  padding: 10px 12px;
}

.le--sheet .le-pv__runhead .le-pv__pair img {
  max-height: 24px;
  max-width: 80px;
}

.le--sheet .le-pv__meta {
  font-size: 9px;
}

.le--sheet .le-pv__cover {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}

.le--sheet .le-pv__cover .le-pv__pair {
  gap: 6px;
}

.le--sheet .le-pv__plate {
  height: 30px;
  padding: 4px 8px;
}

.le--sheet .le-pv__plate img {
  max-height: 22px;
  max-width: 70px;
}

.le--sheet .le-pv__covertitle {
  font-size: 11.5px;
  line-height: 1.2;
  text-align: right;
}

/* The settings column is 300px: everything stacks, and the cards lose their hints. */
.le--sheet .le__controls {
  gap: 18px;
  padding-top: 0;
  border-top: 0;
}

.le--sheet .le-toggle__label,
.le--sheet .le-field__legend {
  font-size: 13px;
}

.le--sheet .le-toggle__hint {
  font-size: 12px;
}

.le--sheet .le-field__legend {
  margin-bottom: 8px;
}

.le--sheet .le-choices {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.le--sheet .le-choice {
  align-items: center;
  padding: 9px 11px;
  border-radius: 8px;
}

.le--sheet .le-choice input {
  margin: 0;
}

.le--sheet .le-choice__title {
  font-size: 13px;
}

.le--sheet .le-choice__hint {
  display: none;
}

.le--sheet .le-clear {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border-radius: 8px;
}

.le--sheet .le-clear__swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.le--sheet .le-clear__pick {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
}

.le--sheet .le-clear__hint {
  font-size: 11.5px;
}

.le--sheet .le-seg--fill {
  display: flex;
}

.le--sheet .le-seg--fill .le-seg__opt {
  flex: 1 1 0;
}

/* The upload: one line and Start again, under the settings. */
.le--sheet .le-source {
  justify-content: space-between;
  gap: 4px 10px;
  padding-top: 12px;
}

.le--sheet .le-source__thumb,
.le--sheet .le-source__title,
.le--sheet .le-source__kept {
  display: none;
}

.le--sheet .le-source__copy {
  flex: 1 1 140px;
}

.le--sheet .le-source__meta {
  font-size: 12px;
}

.le--sheet .le-source__reset {
  min-height: 32px;
  font-size: 12px;
}

.le--sheet .le-dirty {
  flex: 0 0 auto;
  margin: 0 22px 10px;
}

.le-sheet__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 13px 22px 14px;
  border-top: 1px solid var(--rule);
  background: var(--surface-card);
}

.le-sheet__note {
  flex: 1 1 auto;
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.le--sheet .le-sheet__foot .le__status {
  flex: 1 1 100%;
  order: -1;
}

@media (max-width: 900px) {
  /* Full screen on a phone: the sheet's own bar replaces the window's header (Back does
     what its close did, and asks first when there are changes). */
  .clients-modal .modal__dialog:has(> form.le--sheet[data-logo-editor]:not([hidden])) > .modal__header {
    display: none;
  }

  .le-sheet__bar {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  }

  .le-sheet__back {
    min-height: 44px;
  }

  .le-sheet__sep,
  .le.le--sheet .le__lede {
    display: none;
  }

  /* One column that scrolls as a whole; the footer stays put. */
  .le-sheet__body {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: color-mix(in srgb, var(--ink) 2%, var(--surface-card));
  }

  .le-sheet__main,
  .le-sheet__side {
    overflow: visible;
    padding: 14px 16px;
  }

  .le-sheet__side {
    padding-top: 4px;
    border-left: 0;
    background: none;
  }

  .le--sheet .le-stage {
    height: 160px;
  }

  .le-sheet__previews {
    grid-template-columns: minmax(0, 1fr);
  }

  .le--sheet .le-seg__btn,
  .le--sheet .le-seg--fill .le-seg__opt,
  .le--sheet .le-choice,
  .le--sheet .le-clear__pick,
  .le--sheet .le-source__reset {
    min-height: 44px;
  }

  .le--sheet .le__tool {
    min-height: 44px;
  }

  .le--sheet .le-dirty {
    margin: 0 16px 10px;
  }

  .le-sheet__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .le-sheet__note {
    display: none;
  }

  .le--sheet .le-sheet__foot .le__status {
    grid-column: 1 / -1;
  }

  .le-sheet__foot .btn {
    min-height: 48px;
    font-size: 14px;
  }
}

/* A client logo prints BESIDE the workspace logo — the previews show the pair. */
.le-pv__pair {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.le-pv__divider {
  align-self: stretch;
  width: 1px;
  background: var(--rule-strong);
}

.le-pv__cover .le-pv__divider {
  display: none;
}

.le-pv__runhead .le-pv__ws {
  max-height: 34px;
  max-width: 120px;
}

.le-pv__wsname {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}

/* An in-page "are you sure" for pages without settings-tabs.css (onboarding) — the same
   shape as Settings' cfg-confirm, on global tokens. */
.le-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 18%, transparent);
  border-radius: var(--radius-md);
}

.le-confirm[hidden] {
  display: none;
}

.le-confirm .le-confirm__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.le-confirm .le-confirm__hint {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.le-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Onboarding: the plain Remove logo button is for a browser without JavaScript; with it,
   the in-page confirmation takes over. */
.ob-upload.is-enhanced [data-logo-nojs] {
  display: none;
}

.ob-upload .cfg-confirm,
.ob-upload .le-confirm {
  flex-basis: 100%;
}

/* The pair of logos must shrink before it pushes into the reference text beside it. */
.le-pv__runhead .le-pv__pair {
  flex: 1 1 auto;
}

.le-pv__runhead .le-pv__pair img {
  max-width: 120px;
  min-width: 0;
}

.le-pv__runhead .le-pv__meta {
  flex: 0 0 auto;
}

/* The title takes focus when the editor opens (so a screen reader starts there); it is
   not a control, so it shows no focus box. */
.le .le__title:focus {
  outline: none;
}