/* ==========================================================================
   OpenNolan — the free browser tools (safe-zone checker, pacing analyzer,
   video specs). Loaded only on those pages, on top of site.css. Tokens come
   from site.css :root — nothing is redefined here.
   ========================================================================== */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Focus is never removed anywhere in these tools. */
.tool :focus-visible,.tool-card :focus-visible{outline:3px solid var(--coral-strong);outline-offset:2px;border-radius:6px;}

.tool{padding:22px 0 6px;}
.tool-privacy{display:flex;align-items:flex-start;gap:10px;background:var(--sage-soft);border:1px solid rgba(110,127,99,0.35);color:#3c4733;border-radius:12px;padding:13px 16px;font-size:14.5px;font-weight:500;margin:0 0 20px;line-height:1.55;}
.tool-privacy svg{flex:none;margin-top:3px;}
.tool-privacy-note{margin-top:6px;font-size:13.5px;font-weight:400;color:#4d5743;}

.tool-shell{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:26px;align-items:start;}
@media (max-width:860px){.tool-shell{grid-template-columns:1fr;}}

/* ----- stage: a real 9:16 frame ----- */
.stage{position:relative;aspect-ratio:9/16;width:100%;max-width:380px;margin:0 auto;background:#15120F;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-md);}
.stage-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#15120F;display:block;}
.stage-zones{position:absolute;inset:0;pointer-events:none;}
.zone{position:absolute;background:rgba(32,28,23,var(--zone-opacity,0.60));}
.zone-label{position:absolute;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FBF8F1;background:rgba(32,28,23,0.72);padding:3px 7px;border-radius:6px;white-space:nowrap;}
.zone-safe{position:absolute;border:2px dashed rgba(232,199,155,0.95);border-radius:4px;}
.zone-safe::after{content:"Safe";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(232,199,155,0.95);}

/* ----- dropzone ----- */
.dropzone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:26px;color:#EFE4D1;background:#1D1915;border:2px dashed rgba(251,248,241,0.28);border-radius:var(--radius);cursor:pointer;transition:border-color .18s,background .18s;}
.dropzone:hover,.dropzone.over{border-color:var(--coral);background:#241D18;}
.dropzone .dz-h{font-family:var(--serif);font-size:19px;font-weight:600;color:#FBF8F1;}
.dropzone .dz-p{font-size:13.5px;color:rgba(251,248,241,0.7);max-width:26ch;line-height:1.5;}
.dropzone input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;}
/* the input itself is 1px, so the ring has to land on the label it lives in */
.dropzone:has(input:focus-visible){outline:3px solid var(--coral);outline-offset:-6px;border-color:var(--coral);}

/* ----- control panel ----- */
.tool-panel{display:flex;flex-direction:column;gap:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-sm);}
.tool-panel h2{font-size:21px;margin:0;}
.ctl{display:flex;flex-direction:column;gap:10px;}
.ctl > .ctl-h{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0;}
.seg{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0;}
.seg label{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;padding:9px 14px;border-radius:10px;border:1px solid var(--line-strong);cursor:pointer;background:var(--paper);transition:border-color .15s,background .15s,color .15s;}
.seg input{position:absolute;opacity:0;width:1px;height:1px;}
.seg label:hover{border-color:var(--coral);}
.seg input:focus-visible + span{outline:3px solid var(--coral-strong);outline-offset:3px;border-radius:4px;}
.seg label:has(input:checked){background:var(--coral-soft);border-color:var(--coral);color:var(--coral-strong);}
.range-row{display:flex;align-items:center;gap:12px;}
.range-row input[type="range"]{flex:1;accent-color:var(--coral);}
.range-row output{font-size:14px;font-weight:600;color:var(--ink-soft);min-width:4ch;text-align:right;}
.tool-actions{display:flex;gap:10px;flex-wrap:wrap;}
.tool-note{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55;}

/* status: icon + text, never colour alone */
.status{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.5;border-radius:10px;padding:11px 14px;border:1px solid;margin:0;}
.status .st-ic{font-weight:800;flex:none;line-height:1.4;}
.status.info{background:var(--paper-2);border-color:var(--line-strong);color:var(--ink-soft);}
.status.warn{background:#FBF0E2;border-color:var(--sand);color:#6b4a1f;}
.status.error{background:#FBE9E3;border-color:var(--coral-soft);color:var(--coral-strong);}
.status.ok{background:var(--sage-soft);border-color:rgba(110,127,99,0.35);color:#3c4733;}

/* confidence badges — shared with the specs tables */
.spec-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-right:6px;}
.spec-badge.official{background:var(--sage-soft);color:#3c4733;}
.spec-badge.estimate{background:#FBF0E2;color:#6b4a1f;}

/* ----- pacing analyzer ----- */
.progress-wrap{display:flex;flex-direction:column;gap:8px;}
.progress-track{height:10px;border-radius:999px;background:var(--paper-3);overflow:hidden;}
.progress-bar{height:100%;width:0;background:var(--coral);transition:width .2s linear;}
.result-card{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow-md);margin-top:26px;}
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px;}
.result-head h3{font-size:24px;margin:0 0 4px;}
.result-head .rc-sub{font-size:14px;color:var(--muted);margin:0;}
.score{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:96px;padding:10px 16px;border-radius:14px;background:var(--paper-2);border:1px solid var(--line-strong);}
.score .sv{font-family:var(--serif);font-size:34px;font-weight:600;line-height:1;color:var(--ink);}
.score .sl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.metric{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;}
.metric .mv{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);line-height:1.1;}
.metric .ml{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.4;}
.verdicts{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.verdicts li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:13px 16px;}
.verdicts li .vi{font-weight:800;flex:none;}
.verdicts li.good{border-left-color:var(--sage);}
.verdicts li.warn{border-left-color:var(--sand);}
.verdicts li.bad{border-left-color:var(--coral);}
.verdicts li strong{color:var(--ink);}
.result-foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.result-foot .rf-mark{font-size:13px;color:var(--muted);}

/* timeline strip of detected cuts */
.cutline{margin-top:22px;}
.cutline-track{position:relative;height:44px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden;}
.cutline-track .ct{position:absolute;top:0;bottom:0;width:3px;background:var(--coral);}
.cutline-track .sil{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(140,131,120,.28) 0 5px,transparent 5px 10px);}
.cutline-track .hook{position:absolute;top:0;bottom:0;left:0;border-right:1px dashed var(--sage);background:rgba(110,127,99,.20);}
.cutline-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:9px;font-size:12.5px;color:var(--muted);}
.cutline-key span{display:inline-flex;align-items:center;gap:6px;}
.cutline-key i{width:12px;height:12px;border-radius:3px;display:inline-block;}

/* ----- specs tables ----- */
.spec-wrap{overflow-x:auto;margin:18px 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm);}
table.spec-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;}
table.spec-table th,table.spec-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;}
table.spec-table tbody tr:last-child th,table.spec-table tbody tr:last-child td{border-bottom:none;}
table.spec-table th[scope="row"]{font-weight:600;color:var(--ink);width:30%;font-family:var(--sans);}
table.spec-table td{color:var(--ink-soft);}
.spec-meta{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5;}
.spec-meta-block{font-size:14.5px;color:var(--ink-soft);margin:20px 0 0;}
.spec-na{color:var(--muted);font-style:italic;}
.spec-source{font-size:13.5px;color:var(--muted);margin:14px 0 0;}
.spec-source a{color:var(--coral-strong);text-decoration:underline;}
.spec-warn{background:#FBF0E2;border:1px solid var(--sand);color:#6b4a1f;border-radius:12px;padding:14px 18px;font-size:14.5px;margin:18px 0 0;line-height:1.55;}

/* copy-paste curl block */
.code-block{position:relative;background:#1D1915;color:#EFE4D1;border-radius:var(--radius-sm);padding:18px 20px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.7;margin:18px 0 0;}
/* site.css gives inline <code> a light chip; inside the dark block it must not. */
.code-block code{white-space:pre;background:none;color:inherit;padding:0;font-size:inherit;}
.code-copy{position:absolute;top:10px;right:10px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px;border:1px solid rgba(251,248,241,0.28);background:rgba(251,248,241,0.08);color:#FBF8F1;cursor:pointer;}
.code-copy:hover{background:rgba(251,248,241,0.18);}