/* Content Security Policy Workbench landing page (tools/content-security-policy-workbench only) */

/* Hero order: intro, paste check, file option, drop zone, plan line */
.mt-public .mt-promise>.tp-csp-check{order:4}
.mt-public .mt-promise>p.tp-csp-or{order:6}
.mt-public .mt-promise>.wt-drop{order:7;max-width:760px;margin:0;padding:18px 18px 16px;gap:6px;border-width:1.5px;border-radius:16px}
.mt-public .mt-promise>p.tp-csp-plan{order:8;margin:2px 0 0}

/* Paste check panel */
.tp-csp-in{display:grid;gap:10px;align-content:start;min-width:0}
.tp-csp-check{display:grid;gap:14px;margin:10px 0 0;padding:20px;border:1px solid #c9d5ea;border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(16,24,40,.06)}
.tp-csp-label{font-weight:800;font-size:1rem;color:#101828}
.tp-csp-input{display:block;width:100%;box-sizing:border-box;min-height:128px;resize:vertical;padding:12px 14px;border:1.5px solid #9fb6dc;border-radius:12px;background:#fbfcff;color:#101828;font:500 .95rem/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;overflow-wrap:anywhere}
.tp-csp-input::placeholder{color:#667085}
.tp-csp-input:focus{outline:none;border-color:#1768e5;box-shadow:0 0 0 4px rgba(23,104,229,.18)}
.tp-csp-help{margin:0;font-size:.9rem;line-height:1.5;color:#475467}
.tp-csp-actions{display:flex;flex-wrap:wrap;gap:10px}
.tp-csp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1.5px solid #9fb6dc;border-radius:12px;background:#fff;color:#1250b5;font:800 .98rem/1.2 Manrope,system-ui,sans-serif;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.tp-csp-btn:hover{background:#eef4ff;border-color:#1768e5}
.tp-csp-btn-main{border-color:#1768e5;background:linear-gradient(180deg,#2f7bf2,#1768e5);color:#fff}
.tp-csp-btn-main:hover{background:#1250b5;border-color:#1250b5}
.tp-csp-btn-quiet{border-color:transparent;background:transparent;color:#344054}
.tp-csp-btn-quiet:hover{background:#f2f4f7;border-color:#d0d5dd}
.tp-csp-btn:disabled{opacity:.7;cursor:progress}
.tp-csp-btn:focus-visible,.tp-csp-mode input:focus-visible,.tp-csp-summary:focus-visible{outline:3px solid #1768e5;outline-offset:2px}

/* Result */
.tp-csp-result{display:grid;gap:12px;align-content:start;min-width:0;padding-top:4px;border-top:1px solid #e6eaf4}
.tp-csp-empty{display:grid;gap:8px;margin:8px 0 0;font-size:.95rem;line-height:1.5;color:#475467}
.tp-csp-empty[hidden]{display:none}
.tp-csp-empty p{margin:0}
.tp-csp-empty b{color:#101828}
.tp-csp-empty ul{display:grid;gap:4px;margin:0;padding:0 0 0 20px}
#tpCspOut{display:grid;gap:14px;margin-top:8px}
#tpCspOut[hidden]{display:none}
.tp-csp-summary{margin:0;font-weight:800;font-size:1.02rem;color:#101828;border-radius:4px}
.tp-csp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.tp-csp-stats div{display:grid;gap:2px;padding:10px 12px;border:1px solid #e0e6f1;border-radius:10px;background:#f8faff}
.tp-csp-stats dt{font-size:.8rem;font-weight:700;color:#475467}
.tp-csp-stats dd{margin:0;font:800 1.35rem/1.15 Manrope,system-ui,sans-serif;color:#101828}
.tp-csp-stats .is-error{background:#fef3f2;border-color:#fecdca}
.tp-csp-stats .is-error dd{color:#b42318}
.tp-csp-stats .is-warning{background:#fffaeb;border-color:#fedf89}
.tp-csp-stats .is-warning dd{color:#93370d}
.tp-csp-stats .is-review{background:#eff4ff;border-color:#c7d7fe}
.tp-csp-stats .is-review dd{color:#1d4ed8}

.tp-csp-findings{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.tp-csp-findings>li{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid #e0e6f1;border-left-width:4px;border-radius:10px;background:#fff}
.tp-csp-findings>li.is-error{border-left-color:#d92d20}
.tp-csp-findings>li.is-warning{border-left-color:#dc6803}
.tp-csp-findings>li.is-review{border-left-color:#2e6be6}
.tp-csp-findings>li.is-clear{border-left-color:#079455}
.tp-csp-findings>li.is-more{display:block;border-left-color:#98a2b3;font-size:.92rem;color:#475467}
.tp-csp-badge{flex:none;min-width:70px;padding:3px 8px;border-radius:999px;font-size:.78rem;font-weight:800;line-height:1.4;text-align:center}
.is-error>.tp-csp-badge{background:#fee4e2;color:#912018}
.is-warning>.tp-csp-badge{background:#fef0c7;color:#7a2e0e}
.is-review>.tp-csp-badge{background:#e0eaff;color:#1a3a8a}
.is-clear>.tp-csp-badge{background:#dcfae6;color:#085d3a}
.tp-csp-finding{display:grid;gap:3px;min-width:0}
.tp-csp-finding b{font-size:.96rem;line-height:1.35;color:#101828}
.tp-csp-finding code,.tp-csp-finding span{font-size:.86rem;line-height:1.5;color:#344054;overflow-wrap:anywhere}
.tp-csp-finding code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

.tp-csp-draft{display:grid;gap:8px}
.tp-csp-draft-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.tp-csp-sub{margin:0;font-weight:800;color:#101828}
.tp-csp-mode{display:flex;flex-wrap:wrap;gap:4px 16px}
.tp-csp-mode label{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-weight:700;font-size:.92rem;color:#344054;cursor:pointer}
.tp-csp-mode input{width:18px;height:18px;margin:0;accent-color:#1768e5}
.tp-csp-pre{margin:0;padding:12px 14px;border-radius:10px;background:#0f1b33;color:#e6edf8;font:500 .86rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.tp-csp-note{margin:0;font-size:.86rem;line-height:1.5;color:#475467}

.tp-csp-files{display:grid;gap:8px;justify-items:start;padding:14px;border-radius:12px;background:#f3f7ff;border:1px solid #d5e0f5}
.tp-csp-files p{margin:0;font-size:.92rem;line-height:1.5;color:#344054}
.tp-csp-files b{color:#101828}
.tp-csp-status:empty{display:none}
.tp-csp-status{font-weight:700;color:#1250b5}
.tp-csp-status.is-error{color:#b42318}

/* File option and plan line */
.mt-promise>p.tp-csp-or{margin:14px 0 0;font-weight:700;font-size:.98rem;color:#344054}
.mt-public .wt-drop .wt-drop-button{min-height:48px;min-width:0;padding:0 20px;background:#fff;color:#1250b5;border:1.5px solid #9fb6dc;box-shadow:none;font-size:1rem}
.mt-public .wt-drop .wt-drop-button:hover{background:#eef4ff;box-shadow:none}
.mt-public .wt-drop .wt-drop-hint{font-size:.92rem}

.mt-promise>p.tp-csp-plan{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;max-width:760px;font-size:.98rem;line-height:1.5;color:#344054}
.tp-csp-plan b{color:#101828}
.tp-csp-plan a{display:inline-flex;align-items:center;min-height:40px;font-weight:700;color:#1250b5}
.tp-csp-plan a:focus-visible,.mt-context-links a:focus-visible{outline:3px solid #1768e5;outline-offset:2px;border-radius:4px}

/* What the check flags */
.tp-csp-lead{margin:0;color:#3f4b63;line-height:1.55}
.tp-csp-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 0;padding:0;list-style:none}
.tp-csp-rules>li{display:grid;gap:8px;align-content:start;padding:16px 18px;border:1px solid #d5dcec;border-top-width:4px;border-radius:10px;background:#fff}
.tp-csp-rules>li.is-warning{border-top-color:#dc6803}
.tp-csp-rules>li.is-error{border-top-color:#d92d20}
.tp-csp-rules>li.is-review{border-top-color:#2e6be6}
.tp-csp-rules strong{font-size:16px;color:#17213c}
.tp-csp-rules ul{display:grid;gap:6px;margin:0;padding:0 0 0 18px;font-size:15px;line-height:1.5;color:#3f4b63}
.tp-csp-rules code,.tp-csp-get code,.mt-editorial code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.88em;overflow-wrap:anywhere;color:#101828;background:#eef2f9;border-radius:4px;padding:1px 4px}

/* What you get: three files */
.tp-csp-get{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 0;padding:0;list-style:none}
.tp-csp-get li{display:grid;gap:6px;align-content:start;padding:16px 18px;border:1px solid #d5dcec;border-radius:10px;background:#fff}
.tp-csp-get strong{font-size:16px;line-height:1.3;color:#17213c}
.tp-csp-get span{font-size:15px;line-height:1.55;color:#3f4b63}

/* Links in a row: visible spacing and touch size */
.mt-context-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.mt-context-links a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:900px){.tp-csp-get,.tp-csp-rules{grid-template-columns:1fr}}
@media (max-width:560px){
  .tp-csp-check{padding:14px;border-radius:14px}
  .tp-csp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-csp-actions .tp-csp-btn-main{flex:1 1 100%}
  .tp-csp-actions .tp-csp-btn{flex:1 1 auto}
  .tp-csp-files .tp-csp-btn{width:100%}
  .tp-csp-findings>li{flex-direction:column;gap:6px}
  .mt-public .mt-promise>.wt-drop{padding:14px 12px}
  .mt-public .wt-drop .wt-drop-button{width:100%}
}
@media (prefers-reduced-motion:reduce){.tp-csp-btn{transition:none}}

/* Desktop: one-column hero, paste on the left, findings on the right */
@media (min-width:801px){
  .mt-public .mt-hero{grid-template-columns:minmax(0,1fr)}
  .mt-public .mt-promise>p{max-width:780px}
  .mt-public .mt-promise>p.tp-csp-or{margin-top:22px}
  .mt-public .mt-promise>.wt-drop{margin-top:10px}
}
@media (min-width:1024px){
  .tp-csp-check{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;padding:24px}
  .tp-csp-result{padding:0 0 0 24px;border-top:0;border-left:1px solid #e6eaf4}
  .tp-csp-empty{margin-top:30px}
  #tpCspOut{margin-top:0}
  .tp-csp-input{min-height:220px}
}