/* The shared watermark panel (shared/watermark/panel.js). Colours come from the host app's tokens: its --sui-* map, then
 * its common tokens (--fg, --line, --accent…), then the page theme (--sl-*), then the text colour. */
.swp {
  --w-fg: var(--sui-fg, var(--fg, var(--sl-text, currentColor)));
  --w-dim: var(--sui-dim, var(--fg-dim, var(--muted, color-mix(in srgb, currentColor 68%, transparent))));
  --w-line: var(--sui-line, var(--line-2, var(--line, var(--sl-border, color-mix(in srgb, currentColor 22%, transparent)))));
  --w-accent: var(--sui-accent, var(--accent, var(--sl-accent, #3b82f6)));
  --w-bg2: var(--sui-bg2, var(--panel-2, color-mix(in srgb, currentColor 6%, transparent)));
  --w-sel: color-mix(in srgb, var(--w-accent) 20%, transparent);
  --w-danger: var(--sui-danger, var(--sl-danger, var(--danger, #d64545)));
  display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; color: var(--w-fg); font-size: 13px; line-height: 1.35;
}
.swp [hidden] { display: none !important; }
.swp.swp-over { outline: 2px dashed var(--w-accent); outline-offset: 4px; border-radius: 8px; }
.swp .sui-btn { min-block-size: 32px; }
.swp .sui-input { inline-size: 100%; box-sizing: border-box; min-block-size: 34px; }
.swp-toggle { display: flex; flex-direction: column; gap: 2px; padding-block-end: 8px; border-block-end: 1px solid var(--w-line); }
.swp-switch { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.swp-switch input { inline-size: 18px; block-size: 18px; accent-color: var(--w-accent); }
.swp-fine { margin: 0; font-size: 12px; color: var(--w-dim); }
.swp-warn { color: var(--w-danger); }
.swp-top { display: flex; flex-wrap: wrap; gap: 6px; }
.swp-top .sui-btn { padding-inline: 10px; }
.swp-top .swp-saved { margin-inline-start: auto; }
.swp-layers { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--w-line); border-radius: 8px; max-block-size: 168px; overflow-y: auto; }
.swp-row { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; }
.swp-row.swp-on { background: var(--w-sel); }
.swp-row.swp-hidden .swp-item { opacity: .55; text-decoration: line-through; }
.swp-row input { accent-color: var(--w-accent); inline-size: 16px; block-size: 16px; flex: none; }
.swp-item { flex: 1; min-inline-size: 0; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; color: inherit; font: inherit; padding: 6px 2px; cursor: pointer; border-radius: 4px; }
.swp-item:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 1px; }
.swp-kind { font-size: 11px; color: var(--w-dim); text-transform: uppercase; letter-spacing: .04em; }
.swp-empty { padding: 8px; color: var(--w-dim); }
.swp-stack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.swp-stack .sui-btn { padding-inline: 4px; }
.swp-danger { color: var(--w-danger); }
.swp-editor { display: flex; flex-direction: column; gap: 12px; }
.swp-group { display: flex; flex-direction: column; gap: 8px; }
.swp-group + .swp-group { padding-block-start: 10px; border-block-start: 1px solid var(--w-line); }
.swp-field { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.swp-label { font-size: 12px; color: var(--w-dim); }
.swp-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.swp-out { font-variant-numeric: tabular-nums; font-size: 12px; }
.swp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.swp-range { inline-size: 100%; accent-color: var(--w-accent); margin: 0; min-block-size: 24px; }
.swp-colour { inline-size: 100%; block-size: 34px; padding: 2px; border: 1px solid var(--w-line); border-radius: 6px; background: transparent; box-sizing: border-box; }
.swp-check { display: flex; align-items: center; gap: 8px; cursor: pointer; min-block-size: 28px; }
.swp-check input { accent-color: var(--w-accent); inline-size: 16px; block-size: 16px; }
.swp-logo { flex-direction: row; align-items: center; gap: 10px; }
.swp-thumb { inline-size: 56px; block-size: 56px; object-fit: contain; border: 1px solid var(--w-line); border-radius: 6px;
  background: repeating-conic-gradient(color-mix(in srgb, currentColor 14%, transparent) 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.swp-logo-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-inline-size: 0; }
.swp-logo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }
.swp-pos { display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; }
.swp-cell { inline-size: 36px; block-size: 30px; display: grid; place-items: center; border: 1px solid var(--w-line); border-radius: 6px; background: var(--w-bg2); cursor: pointer; padding: 0; }
.swp-cell i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--w-dim); }
.swp-cell[aria-pressed="true"] { border-color: var(--w-accent); background: var(--w-sel); }
.swp-cell[aria-pressed="true"] i { background: var(--w-accent); }
.swp-cell:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 1px; }
.swp-more summary { cursor: pointer; color: var(--w-dim); font-size: 12px; padding-block: 4px; }
.swp-more[open] { display: flex; flex-direction: column; gap: 8px; }
.swp-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.swp-seg [aria-pressed="true"] { border-color: var(--w-accent); background: var(--w-sel); }
.swp-bad { border-color: var(--w-danger) !important; }
.swp-msg { margin: 0; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--w-danger) 14%, transparent); font-size: 12px; }
.swp-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-block-start: 10px; border-block-start: 1px solid var(--w-line); }
.swp-manage { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.swp-manage li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.swp-manage small { opacity: .7; }
@media (pointer: coarse) {
  .swp .sui-btn, .swp .sui-input, .swp-cell { min-block-size: 40px; }
  .swp-colour { block-size: 40px; }
  .swp-pos { grid-template-columns: repeat(3, 44px); }
  .swp-cell { inline-size: 44px; }
}

/* The live preview (shared/watermark/preview.js) */
.swv { display: flex; flex-direction: column; align-items: center; gap: 6px; inline-size: 100%; }
.swv-stage { position: relative; display: grid; place-items: center; inline-size: 100%; }
.swv-canvas { display: block; max-inline-size: 100%; block-size: auto; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.swv-video { display: block; inline-size: min(100%, 720px); max-block-size: min(70vh, 640px); border-radius: 4px; background: #000; }
.swv-over { position: absolute; pointer-events: none; }
.swv-nav { display: flex; align-items: center; gap: 8px; }
.swv-page { font-variant-numeric: tabular-nums; font-size: 12px; }