/* Logo Placement Calculator only. Everything is scoped to .slp so shared styles stay untouched. */
.slp [hidden]{display:none!important}
.slp.tool-grid .tool-aside{position:static}

/* optional upload: a compact bar rather than a big drop target */
.slp .upload-zone{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;margin-bottom:14px;border:1.5px dashed #93b4e3;background:#f8fbff;color:#172033}
.slp .upload-zone.drag-over{border-color:#2563eb;background:#eff6ff}
.slp .upload-zone[aria-busy="true"]{opacity:.7;cursor:progress}
.slp .upload-icon{width:44px;height:44px;margin:0;flex:0 0 auto}
.slp .upload-title{font-size:15px;margin:0 0 2px;color:#0f172a}
.slp .upload-subtitle{font-size:13px;margin:0 0 2px;color:#475569}
.slp .upload-subtitle b{color:#1d4ed8}
.slp .upload-hint{font-size:12px;line-height:1.5;color:#475569}
.slp-file-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:-4px 0 14px;padding:10px 12px;background:#fff;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;line-height:1.5;color:#172033}
.slp-file-bar span{min-width:0;overflow-wrap:anywhere}
.slp-file-bar .btn{flex:0 0 auto;width:auto;min-height:40px}

/* preview card */
.slp-viewbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid rgba(17,18,23,.08);background:#fff}
.slp-viewbar .seg{width:auto}
.slp-viewbar .seg button{padding:8px 12px;min-height:36px}
.slp-viewbar .seg button:not(.active):hover{color:#0f172a}
.slp-swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.slp .swatch{width:36px;height:36px;padding:0;border:2px solid #94a3b8;border-radius:50%;cursor:pointer}
.slp .swatch[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px #2563eb}
.slp-canvas-wrap{background:#EEF2F7;line-height:0}
.slp-canvas-wrap canvas{display:block;width:100%;height:470px}
.slp-legend{margin:0;padding:10px 16px 14px;font-size:12px;line-height:1.6;color:#475569;background:#fff}

/* results card */
.slp-results{padding:16px 18px 18px;color:#172033;background:#fff}
.slp-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin-bottom:6px}
.slp-fig{border:1px solid #e2e8f0;border-radius:8px;padding:12px;background:#f8fafc}
.slp-fig span{display:block;font-size:12px;color:#475569;line-height:1.5}
.slp-fig b{display:block;font-size:22px;line-height:1.25;color:#0f172a;font-variant-numeric:tabular-nums}
.slp-fig b.slp-small{font-size:17px}
.slp-sub{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#334155;margin:16px 0 6px}
.slp-results p{font-size:14px;line-height:1.65;color:#334155;margin:0 0 8px}
.slp-px{width:100%;border-collapse:collapse;font-size:14px}
.slp-px th{text-align:left;font-weight:600;color:#475569;padding:8px 10px 8px 0;border-bottom:1px solid #e2e8f0}
.slp-px td{text-align:right;font-weight:800;color:#0f172a;padding:8px 0;border-bottom:1px solid #e2e8f0;white-space:nowrap;font-variant-numeric:tabular-nums}
.slp-results .slp-check{margin-top:12px;padding:10px 12px;border-radius:8px;border:1px solid;font-size:13.5px}
.slp-check[data-level="good"]{background:#f0fdf4;border-color:#bbf7d0;color:#14532d!important}
.slp-check[data-level="ok"]{background:#fffbeb;border-color:#fde68a;color:#78350f!important}
.slp-check[data-level="low"]{background:#fef2f2;border-color:#fecaca;color:#7f1d1d!important}
.slp-results a{color:#1d4ed8;font-weight:700;text-decoration:underline}
.slp-results .slp-info{padding:8px 12px;border-radius:8px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:13.5px}
.slp-warnings{margin:10px 0 0;padding:10px 12px 10px 28px;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;color:#78350f;font-size:13.5px;line-height:1.6}
.slp-results .slp-note{font-size:13px;color:#475569;border-left:3px solid #2563eb;padding-left:10px;margin-top:12px}

/* actions */
.slp .action-buttons .btn{white-space:normal;text-align:center;text-decoration:none;line-height:1.35}
.slp-cap-note{font-size:12.5px;line-height:1.6;color:#78350f;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:10px 12px;margin:-12px 0 16px}

/* settings */
.slp .slp-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.slp .preset-btn{min-height:44px}
.slp .preset-btn[aria-disabled="true"]{opacity:.45}
.slp .tool-aside .seg button{min-height:40px}
.slp .slp-full{width:100%;margin-top:10px}
.slp input[type="range"]{margin-top:12px}
.slp-readout{margin:16px 0 0;padding:10px 12px;border-radius:8px;background:#292C33;border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;line-height:1.55}
.slp-readout:empty{display:none}
.slp .tool-aside .help-note b{color:#fff}
.slp .tool-aside [aria-invalid="true"]{border-color:#f87171;box-shadow:0 0 0 2px rgba(248,113,113,.35)}

/* visible keyboard focus everywhere in the tool */
.slp .preset-btn:focus-visible,.slp .seg button:focus-visible,.slp .swatch:focus-visible,.slp .btn:focus-visible,.slp select:focus-visible,
.slp input:focus-visible,.slp .settings-header:focus-visible,.slp .upload-zone:focus-visible,.slp a:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}
.slp .upload-zone:focus-visible,.slp-results a:focus-visible,.slp-viewbar button:focus-visible{outline-color:#1d4ed8}

@media (max-width:640px){
  .slp-canvas-wrap canvas{height:360px}
  .slp .upload-zone{padding:12px;gap:10px}
  .slp .upload-icon{width:38px;height:38px}
  .slp-fig b{font-size:19px}
  .slp-viewbar{padding:10px 12px}
  .slp-results{padding:14px}
  .slp-px th{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.slp *{transition:none!important;animation:none!important}}