/* Display planning, refined within the approved C / Clarity system. */
.ppi-tool{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);margin:30px 0 44px;border:1px solid #cbd6e8;border-radius:18px;overflow:hidden;background:#fff;color:#18263c;box-shadow:0 12px 38px #18345408}
.ppi-tool *{box-sizing:border-box}.ppi-tool [hidden]{display:none!important}
.ppi-tool .eyebrow{font:10px/1.6 'DM Mono',monospace;letter-spacing:.08em;color:#2455df;margin:0 0 12px}
.ppi-tool-header{grid-column:1/-1;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:28px 30px;border-bottom:1px solid #dbe1ec;background:linear-gradient(115deg,#fff 65%,#f1f5ff)}
.ppi-tool .ppi-tool-header h2{font:800 clamp(23px,2.7vw,32px)/1.2 'Manrope',Arial,sans-serif;letter-spacing:-.045em;margin:0 0 9px;color:#18263c}
.ppi-tool .ppi-tool-header p:last-child{font-size:13px;line-height:1.7;margin:0;color:#52647b;max-width:570px}
.ppi-local-chip{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;background:#edf3ff;border:1px solid #cad8f7;color:#214fb7;border-radius:40px;padding:7px 10px;font:10px/1.5 'DM Mono',monospace;white-space:nowrap}
.ppi-local-chip i{width:5px;height:5px;background:#2455df;border-radius:50%}
.ppi-controls{padding:26px 24px;background:#f5f7fc;border-right:1px solid #dbe1ec;min-width:0}
.ppi-tool label{display:block;font-size:12px;font-weight:700;line-height:1.5;margin:0 0 7px;color:#354a65}
.ppi-tool input[type=text],.ppi-tool select{display:block;width:100%;min-width:0;max-width:100%;min-height:46px;padding:11px 12px;border:1px solid #bccbe2;border-radius:8px;background:#fff;color:#18263c;font:14px/1.5 'Manrope',Arial,sans-serif;box-shadow:0 2px 2px #18345403}
.ppi-tool input[type=text]{font-family:'DM Mono',monospace;font-size:16px;font-variant-numeric:tabular-nums}
.ppi-tool input:focus-visible,.ppi-tool select:focus-visible,.ppi-tool button:focus-visible,.ppi-tool summary:focus-visible{outline:3px solid #2455df;outline-offset:3px}
.ppi-tool input[aria-invalid=true]{border-color:#b33b29;box-shadow:inset 0 0 0 1px #b33b29;background:#fff9f7}
.ppi-tool fieldset{padding:17px 16px 18px;margin:21px 0 0;border:1px solid #d7e0ef;border-radius:11px;min-width:0;background:#fff}
.ppi-tool legend{font:800 14px/1.5 'Manrope',Arial,sans-serif;padding:0 8px;color:#18263c}
.ppi-pixel-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:16px 0}
.ppi-tool .ppi-input-help{font-size:11px;line-height:1.7;color:#52647b;margin:12px 0 0}
.ppi-tool .ppi-field-error{font-size:11px;line-height:1.65;color:#962d20;margin:7px 0 0}
.ppi-tool .ppi-compare-toggle{display:flex;position:relative;gap:10px;align-items:center;min-height:64px;margin:20px 0 4px;border:1px solid #c5d2e7;border-radius:10px;padding:12px;background:#edf2fb;font-size:12px;cursor:pointer}
.ppi-compare-toggle input{width:18px;height:18px;margin:0;accent-color:#2455df;flex-shrink:0}
.ppi-compare-toggle small{display:block;color:#52647b;font-size:10px;line-height:1.6;font-weight:500}
.ppi-toggle-track{margin-left:auto;flex-shrink:0;width:29px;height:17px;border-radius:12px;background:#b7c5dc;padding:3px}
.ppi-toggle-track:after{content:'';display:block;width:11px;height:11px;border-radius:50%;background:#fff}
.ppi-compare-toggle:has(input:checked){background:#e9f0ff;border-color:#9db6ef}.ppi-compare-toggle:has(input:checked) .ppi-toggle-track{background:#2455df}.ppi-compare-toggle:has(input:checked) .ppi-toggle-track:after{transform:translateX(12px)}
.ppi-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:23px}
.ppi-actions button{min-height:44px;font-size:12px;border:1px solid #bccbe2;border-radius:8px;background:#fff;color:#18263c;padding:11px 12px;flex:1 1 100%;font-family:'Manrope',Arial,sans-serif;font-weight:700;cursor:pointer}
.ppi-actions button:last-child{background:#2455df;border-color:#2455df;color:#fff;box-shadow:0 3px 8px #2455df16}.ppi-actions button:hover{border-color:#2455df}.ppi-actions button:last-child:hover{background:#1b46c2}
.ppi-tool .ppi-status{font-size:12px;line-height:1.75;color:#52647b;margin:16px 0 0;padding-left:11px;border-left:2px solid #c5d4f0}
.ppi-share-fallback{margin-top:16px}.ppi-share-fallback input{font-size:11px!important}
.ppi-results{padding:26px;min-width:0}
.ppi-results-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:18px}.ppi-tool .ppi-results-heading .eyebrow{margin:0}.ppi-result-state{font:9px/1.6 'DM Mono',monospace;color:#52647b}
.ppi-result-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.ppi-tool[data-compare=true] .ppi-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ppi-result-card{min-width:0;border-radius:12px;padding:22px;background:#14243d;color:#fff;position:relative;overflow:hidden;border:1px solid #1b3457}
.ppi-result-card:before{content:'';position:absolute;top:0;right:0;width:92px;height:3px;background:#638bff}.ppi-result-card:nth-child(2):before{background:#8acbf0}
.ppi-tool .ppi-result-card h3{font:600 12px/1.5 'Manrope',Arial,sans-serif;margin:0!important;color:#c5d3e9;display:flex;align-items:center;gap:9px;letter-spacing:0}
.ppi-result-card h3>span{display:inline-grid;place-items:center;width:25px;height:25px;border:1px solid #4b668e;border-radius:6px;color:#fff;font:12px 'DM Mono',monospace}
.ppi-tool .ppi-density{font:400 clamp(38px,4.3vw,64px)/1.2 'DM Mono',monospace;letter-spacing:-.06em;color:#fff;margin:22px 0 10px!important;overflow-wrap:anywhere}
.ppi-density-unit{font-size:13px;letter-spacing:0;white-space:nowrap;color:#a8bee2}
.ppi-tool[data-compare=true] .ppi-density{font-size:clamp(30px,3vw,44px)}
.ppi-tool .ppi-result-context{font:11px/1.75 'DM Mono',monospace;color:#aebfda;margin:0 0 20px;min-height:38px;overflow-wrap:anywhere}
.ppi-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}.ppi-metrics>div{padding-top:13px;border-top:1px solid #ffffff22;min-width:0}.ppi-metrics dt{font-size:10px;line-height:1.7;color:#aebfda}.ppi-metrics dd{font:400 16px/1.6 'DM Mono',monospace;margin:5px 0 0;color:#edf4ff;overflow-wrap:anywhere}
.ppi-tool[data-compare=true] .ppi-result-card{padding:20px 17px}.ppi-tool[data-compare=true] .ppi-metrics{grid-template-columns:1fr;gap:12px}
.ppi-details{margin-top:18px;border-top:1px solid #ffffff22;padding-top:13px}.ppi-details summary{font-size:11px;color:#c3d5f3;cursor:pointer;min-height:30px}.ppi-details .ppi-metrics{margin-top:8px;grid-template-columns:1fr;gap:12px}.ppi-details .ppi-metrics>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.ppi-details .ppi-metrics dd{font-size:13px;margin:0}
.ppi-result-card[data-valid=false]{background:#25334a}.ppi-result-card[data-valid=false] .ppi-density{color:#aebfda}
.ppi-comparison{margin:18px 0 20px;padding:17px 18px;border-radius:10px;border:1px solid #c7d7ff;border-left:3px solid #2455df;background:#edf3ff}
.ppi-comparison strong{font-size:12px;color:#2455df}.ppi-tool .ppi-comparison p{font-size:13px;line-height:1.8;margin:7px 0 0}.ppi-tool .ppi-comparison .ppi-result-note{font-size:11px;margin-top:10px}
.ppi-size-figure{margin:20px 0 0;background:#f8faff;border:1px solid #dbe4f3;border-radius:12px;overflow:hidden}
.ppi-figure-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 18px 0}.ppi-tool .ppi-figure-heading h3{font:700 13px/1.5 'Manrope',sans-serif;margin:0;color:#18263c}.ppi-figure-heading>span{font:8px/1.6 'DM Mono',monospace;color:#52647b;text-align:right;letter-spacing:.04em}
#ppi-diagram{display:block;width:100%;height:auto;margin:8px auto 0;overflow:visible}.ppi-svg-screen{fill:#e5edff;stroke:#2455df;stroke-width:1.6;vector-effect:non-scaling-stroke}.ppi-svg-screen-b{fill:#e4f4ff;stroke:#3f7fa7}.ppi-svg-diagonal{stroke:#2455df;stroke-width:1;stroke-dasharray:4 5;opacity:.45}.ppi-svg-measure{fill:none;stroke:#809ac2;stroke-width:1}.ppi-svg-title{font:12px 'DM Mono',monospace;fill:#355987}.ppi-svg-dimension{font:12px 'DM Mono',monospace;fill:#354a65}.ppi-svg-empty{font:12px 'Manrope',sans-serif;fill:#596b82}
.ppi-size-figure figcaption{font-size:10px;line-height:1.75;color:#596b82;padding:0 18px 16px}.ppi-tool .ppi-diagram-empty{font-size:13px;color:#52647b;padding:18px;margin:0}
.ppi-tool .ppi-result-note{font-size:11px;line-height:1.8;color:#52647b;margin:20px 0 0}.ppi-tool .ppi-next{display:inline-block;font-size:12px;line-height:1.8;color:#2455df;margin-top:15px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.ppi-tool{grid-template-columns:minmax(265px,300px) minmax(0,1fr)}.ppi-tool-header{padding:25px}.ppi-controls{padding:24px 20px}.ppi-results{padding:24px 20px}.ppi-local-chip{font-size:9px}.ppi-tool[data-compare=true] .ppi-result-grid{grid-template-columns:1fr}.ppi-tool[data-compare=true] .ppi-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ppi-tool[data-compare=true] .ppi-density{font-size:44px}.ppi-details .ppi-metrics,.ppi-tool[data-compare=true] .ppi-details .ppi-metrics{grid-template-columns:1fr}}
@media(max-width:720px){.ppi-tool{display:flex;flex-direction:column;border-radius:14px}.ppi-tool-header{padding:23px 20px;flex-wrap:wrap;gap:15px}.ppi-tool .ppi-tool-header h2{font-size:27px}.ppi-controls{border-right:0;border-bottom:1px solid #dbe1ec;padding:23px 20px}.ppi-results{padding:23px 20px}.ppi-actions button{flex:1 1 130px}.ppi-tool .ppi-density{font-size:54px}.ppi-tool[data-compare=true] .ppi-density{font-size:48px}.ppi-metrics dd{font-size:17px}.ppi-tool .ppi-input-help,.ppi-tool .ppi-field-error{font-size:12px}.ppi-tool .ppi-status{font-size:12px}.ppi-tool .ppi-result-context{min-height:0}.ppi-figure-heading{padding:16px 14px 0;align-items:flex-start}.ppi-tool .ppi-figure-heading h3{font-size:12px}.ppi-figure-heading>span{font-size:8px;max-width:100px}.ppi-size-figure figcaption{font-size:11px;padding:0 14px 15px}.ppi-tool .ppi-result-note{font-size:12px}#ppi-diagram{min-height:145px}.ppi-tool[data-compare=true] .ppi-result-state{font-size:9px}}
@media(max-width:360px){.ppi-pixel-fields{grid-template-columns:1fr;gap:12px}.ppi-metrics,.ppi-tool[data-compare=true] .ppi-metrics{grid-template-columns:1fr}.ppi-controls,.ppi-results,.ppi-tool-header{padding-left:16px;padding-right:16px}.ppi-tool .ppi-density{font-size:45px}}
@media(prefers-reduced-motion:no-preference){.ppi-result-card{transition:background-color .18s ease}.ppi-toggle-track:after{transition:transform .15s ease}}
/* Keep the native checkbox semantics with one visible switch affordance. */
.ppi-tool .ppi-compare-toggle input{position:absolute;width:1px;height:1px;opacity:0}.ppi-tool .ppi-compare-toggle:has(input:focus-visible){outline:3px solid #2455df;outline-offset:3px}.ppi-tool .ppi-details{padding:13px 0 0;border-top:1px solid #ffffff22}
@media(max-width:720px){.ppi-svg-title,.ppi-svg-dimension{font-size:20px}.ppi-svg-empty{font-size:18px}}
@media(max-width:360px){.ppi-svg-title,.ppi-svg-dimension{font-size:24px}.ppi-svg-empty{font-size:22px}}
/* Explicit mobile navigation preserves the settings URL and moves focus. */
.ppi-tool .ppi-jump{display:none}.ppi-tool #ppi-inputs,.ppi-tool #ppi-results{scroll-margin-top:22px}.ppi-tool #ppi-inputs:focus-visible,.ppi-tool #ppi-results:focus-visible{outline:3px solid #2455df;outline-offset:-3px}.ppi-tool .ppi-jump:focus-visible{outline:3px solid #2455df;outline-offset:3px}
@media(max-width:720px){.ppi-tool .ppi-jump{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;font:700 13px/1.6 'Manrope',sans-serif;text-decoration:none;border-radius:8px}.ppi-tool .ppi-jump-results{margin-top:20px;padding:11px 14px;background:#2455df;color:#fff;border:1px solid #2455df}.ppi-tool .ppi-jump-inputs{justify-content:flex-start;margin:-6px 0 16px;color:#2455df;font-size:12px;min-height:40px}.ppi-tool .ppi-actions button:last-child{background:#fff;color:#2455df;border-color:#bccbe2;box-shadow:none}}