/* Browser context, refined within the approved C / Clarity system. */
.screen-info-tool{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid #cbd6e8;border-radius:18px;overflow:hidden;margin:30px 0 44px;background:#fff;color:#18263c;box-shadow:0 12px 38px #18345408}
.screen-info-tool *{box-sizing:border-box}.screen-info-tool [hidden]{display:none!important}
.screen-info-tool .eyebrow{font:10px/1.6 'DM Mono',monospace;letter-spacing:.08em;color:#2455df;margin:0 0 12px}
.screen-info-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)}
.screen-info-tool .screen-info-header h2{font:800 clamp(23px,2.7vw,32px)/1.2 'Manrope',Arial,sans-serif;letter-spacing:-.045em;margin:0 0 9px;color:#18263c}
.screen-info-tool .screen-info-header p:last-child{font-size:13px;line-height:1.7;margin:0;color:#52647b}
.screen-info-live-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}.screen-info-live-chip i{width:5px;height:5px;background:#2455df;border-radius:50%}
.screen-info-tool .screen-info-controls{padding:26px 24px;background:#f5f7fc;border-right:1px solid #dbe1ec;min-width:0}
.screen-info-tool .screen-info-controls h3{font:800 23px/1.3 'Manrope',sans-serif;letter-spacing:-.04em;margin:0 0 15px;color:#18263c}
.screen-info-tool .screen-info-controls>p{font-size:12px;line-height:1.8;margin:0 0 18px;color:#52647b}
.screen-info-steps{list-style:none;counter-reset:si-step;padding:0;margin:22px 0}.screen-info-tool .screen-info-steps li{counter-increment:si-step;display:flex;align-items:center;gap:10px;font-size:11px;line-height:1.7;color:#3c526e;margin:0;padding:12px 0;border-top:1px solid #dbe1ec}.screen-info-steps li:before{content:'0' counter(si-step);flex-shrink:0;display:grid;place-items:center;width:26px;height:26px;border:1px solid #c4d4ee;border-radius:7px;background:#fff;color:#2455df;font:10px 'DM Mono',monospace}
.screen-info-tool .screen-info-actions{display:flex;flex-direction:column;gap:10px;margin:22px 0 18px}
.screen-info-tool button{min-height:46px;font:700 12px/1.5 'Manrope',sans-serif;padding:12px 15px;border:1px solid #bccbe2;border-radius:8px;color:#18263c;background:#fff;cursor:pointer}
.screen-info-tool button.primary{background:#2455df;border-color:#2455df;color:#fff;justify-content:center;box-shadow:0 3px 8px #2455df16}.screen-info-tool button:hover{border-color:#2455df}.screen-info-tool button.primary:hover{background:#1b46c2}
.screen-info-tool button:disabled{opacity:.55;cursor:wait}
.screen-info-tool button:focus-visible,.screen-info-tool textarea:focus-visible,.screen-info-tool summary:focus-visible{outline:3px solid #2455df;outline-offset:3px}
.screen-info-tool .screen-info-status{font-size:12px!important;line-height:1.75!important;padding-left:11px;border-left:2px solid #c5d4f0}
.screen-info-tool .screen-info-note{font-size:11px!important;line-height:1.8!important;color:#52647b!important;margin:20px 0 0!important}
.screen-info-tool .screen-info-readings{padding:26px;min-width:0}
.screen-info-tool .screen-info-primary{padding:23px 24px;background:#14243d;border:1px solid #1b3457;border-radius:12px;position:relative;overflow:hidden}.screen-info-primary:before{content:'';position:absolute;top:0;right:0;width:92px;height:3px;background:#638bff}
.screen-info-primary-label{display:flex;gap:15px;justify-content:space-between;align-items:center}.screen-info-tool .screen-info-primary .eyebrow{font-size:10px;color:#a9bedf;margin:0}.screen-info-css-tag{font:9px/1.4 'DM Mono',monospace;color:#bbcff1;white-space:nowrap;padding:4px 6px;border:1px solid #46638e;border-radius:4px}
.screen-info-tool .screen-info-size{font:400 clamp(22px,2.8vw,37px)/1.45 'DM Mono',monospace;letter-spacing:-.055em;color:#fff;margin:20px 0 12px;overflow-wrap:anywhere}
.screen-info-tool .screen-info-primary>p:last-child{font-size:11px;line-height:1.8;color:#aebfda;margin:0}
.screen-info-key-readings{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;margin:13px 0 21px}.screen-info-key-readings>div{min-width:0;border:1px solid #dbe4f3;border-radius:10px;padding:17px;background:#f8faff}
.screen-info-key-readings dt{font:700 11px/1.6 'Manrope',sans-serif;color:#4f6480}.screen-info-key-readings dd{font:400 20px/1.4 'DM Mono',monospace;letter-spacing:-.045em;margin:12px 0 0;color:#17325f;overflow-wrap:anywhere}.screen-info-key-readings>div:last-child dd>span{font-size:28px;letter-spacing:-.04em}.screen-info-tool .screen-info-key-readings p{font:10px/1.7 'Manrope',sans-serif;letter-spacing:normal;color:#52647b;margin:9px 0 0}
.screen-info-diagram{margin:0 0 21px;border:1px solid #dbe4f3;border-radius:12px;overflow:hidden;background:#f8faff}.screen-info-diagram-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px}.screen-info-tool .screen-info-diagram-heading h3{font:700 13px/1.5 'Manrope',sans-serif;color:#18263c;margin:0}.screen-info-diagram-heading>span{font:8px/1.5 'DM Mono',monospace;letter-spacing:.06em;color:#52647b;text-align:right;white-space:nowrap}
.screen-info-tool [data-si-diagram]{display:block;width:calc(100% - 28px);height:auto;margin:0 14px;border-radius:8px;background-color:#14243d;background-image:radial-gradient(#56719435 .7px,transparent .7px);background-size:14px 14px}
.si-diagram-screen{fill:#243b5a;stroke:#a9bddc;stroke-width:3;vector-effect:non-scaling-stroke}.si-diagram-layout{fill:#2c5cde30;stroke:#628fff;stroke-width:2;vector-effect:non-scaling-stroke}.si-diagram-visual{fill:#91e2e50a;stroke:#a9e7eb;stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}.si-diagram-baseline{fill:none;stroke:#547092;stroke-width:1}
.screen-info-diagram-legend{display:flex;flex-wrap:wrap;gap:17px;padding:15px 18px 11px;font:10px 'DM Mono',monospace;color:#52647b}.screen-info-diagram-legend>span{display:flex;align-items:center;gap:7px}.screen-info-diagram-legend i{width:14px;height:9px;border:1px solid #879cb9;background:#dbe4f1}.screen-info-diagram-legend .si-layout-key{border-color:#2455df;background:#dce7ff}.screen-info-diagram-legend .si-visual-key{border-style:dashed;border-color:#3d8d96;background:#e3f5f5}
.screen-info-diagram figcaption{font-size:10px;line-height:1.8;color:#596b82;padding:0 18px}.screen-info-tool .screen-info-diagram-note{font-size:11px;line-height:1.75;margin:12px 18px 17px;color:#355987;padding-top:10px;border-top:1px solid #dbe4f3}.screen-info-tool .screen-info-diagram-note[data-warning=true]{color:#8c5216}
.screen-info-details{border:1px solid #dbe4f3;border-radius:10px;overflow:hidden}.screen-info-details summary{padding:16px 18px;font-size:12px;font-weight:700;cursor:pointer;color:#354a65;line-height:1.6;min-height:52px;background:#f8faff}.screen-info-details summary>span{font-size:10px;font-weight:500;display:block;margin-left:15px;color:#596b82}
.screen-info-tool .screen-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0 18px;gap:0 24px}.screen-info-tool .screen-info-grid>div{padding:18px 0;border-bottom:1px solid #e0e6ef;min-width:0}.screen-info-tool .screen-info-grid dt{font:700 11px/1.7 'Manrope',sans-serif;color:#35485f}.screen-info-tool .screen-info-grid dd{margin:8px 0 0;font:400 15px/1.6 'DM Mono',monospace;letter-spacing:-.04em;color:#17325f;overflow-wrap:anywhere}.screen-info-tool .screen-info-grid p{font:10px/1.8 'Manrope',sans-serif;margin:7px 0 0;color:#52647b;letter-spacing:normal}.screen-info-tool .screen-info-grid .screen-info-orientation{grid-column:1/-1;border-bottom:0}
.screen-info-tool .screen-info-fallback{grid-column:1/-1;padding:24px;border-top:1px solid #dbe1ec;background:#f5f7fc;min-width:0}.screen-info-tool .screen-info-fallback label{display:block;font-size:13px;font-weight:700;margin-bottom:12px}
.screen-info-tool textarea{display:block;width:100%;max-width:100%;background:#fff;color:#18263c;border:1px solid #bdcce1;border-radius:8px;resize:vertical;font:12px/1.7 'DM Mono',monospace;padding:12px;margin-bottom:12px;min-height:160px}
.screen-info-tool noscript{grid-column:1/-1;padding:0 24px}
@media(max-width:1000px){.screen-info-tool{grid-template-columns:255px minmax(0,1fr)}.screen-info-header{padding:25px;flex-wrap:wrap;gap:14px}.screen-info-tool .screen-info-controls{padding:24px 20px}.screen-info-tool .screen-info-readings{padding:24px 20px}.screen-info-key-readings{grid-template-columns:1fr}.screen-info-key-readings dd{font-size:22px}.screen-info-tool .screen-info-size{font-size:27px}.screen-info-live-chip{font-size:9px}.screen-info-tool .screen-info-grid{gap:0 18px}.screen-info-tool .screen-info-grid dd{font-size:14px}}
@media(max-width:720px){.screen-info-tool{grid-template-columns:minmax(0,1fr);border-radius:14px}.screen-info-header{padding:23px 20px}.screen-info-tool .screen-info-header h2{font-size:27px}.screen-info-tool .screen-info-controls{border-right:0;border-bottom:1px solid #dbe1ec;padding:23px 20px}.screen-info-tool .screen-info-controls h3{font-size:22px;max-width:300px}.screen-info-tool .screen-info-controls>p{font-size:13px}.screen-info-tool .screen-info-actions{flex-direction:row;flex-wrap:wrap;margin:18px 0}.screen-info-tool .screen-info-actions button{flex:1 1 135px}.screen-info-tool .screen-info-status{margin-bottom:12px}.screen-info-tool .screen-info-note{font-size:12px!important}.screen-info-steps{margin:18px 0}.screen-info-tool .screen-info-steps li{font-size:12px;padding:9px 0}.screen-info-tool .screen-info-readings{padding:23px 20px}.screen-info-tool .screen-info-primary{padding:20px 18px}.screen-info-tool .screen-info-size{font-size:clamp(21px,5.6vw,29px);margin-top:18px}.screen-info-primary-label{gap:10px}.screen-info-tool .screen-info-primary .eyebrow{font-size:9px}.screen-info-css-tag{font-size:8px}.screen-info-key-readings{grid-template-columns:1fr;gap:10px}.screen-info-key-readings>div{padding:16px}.screen-info-key-readings dd{font-size:23px}.screen-info-tool .screen-info-key-readings p{font-size:11px}.screen-info-diagram-heading{padding:16px 14px}.screen-info-tool .screen-info-diagram-heading h3{font-size:12px}.screen-info-diagram-heading>span{font-size:7px}.screen-info-diagram figcaption{font-size:11px;padding:0 14px}.screen-info-tool .screen-info-diagram-note{font-size:11px;margin:12px 14px 16px}.screen-info-diagram-legend{padding-left:14px;padding-right:14px;gap:14px;font-size:9px}.screen-info-tool .screen-info-grid{grid-template-columns:1fr}.screen-info-tool .screen-info-grid dt{font-size:12px}.screen-info-tool .screen-info-grid dd{font-size:16px}.screen-info-tool .screen-info-grid p{font-size:11px}.screen-info-details summary>span{font-size:11px}}
@media(max-width:360px){.screen-info-tool .screen-info-controls,.screen-info-tool .screen-info-readings,.screen-info-header{padding-left:16px;padding-right:16px}.screen-info-tool .screen-info-primary{padding:19px 16px}.screen-info-primary-label{flex-wrap:wrap}.screen-info-diagram-heading>span{white-space:normal}}
@media(prefers-reduced-motion:no-preference){.screen-info-tool .screen-info-key-readings>div{transition:background-color .18s ease}}
/* Override article defaults only inside this instrument. */
.screen-info-tool .screen-info-details{padding:0;border-top:1px solid #dbe4f3}.screen-info-tool .screen-info-steps{padding:0}
/* Setup is optional: local readings and actions need no preliminary steps. */
.screen-info-tool .screen-info-controls .screen-info-actions{margin:0 0 16px}.screen-info-tool .screen-info-controls .screen-info-status{margin:0 0 18px}.screen-info-tool .screen-info-setup{padding:0;border-top:1px solid #dbe1ec}.screen-info-setup summary{font-size:12px;line-height:1.6;min-height:44px;padding:12px 0;color:#354a65}.screen-info-tool .screen-info-setup h3{font-size:20px;margin:12px 0}.screen-info-tool .screen-info-setup>p{font-size:12px;line-height:1.8;margin:0;color:#52647b}.screen-info-tool .screen-info-setup .screen-info-steps{margin:16px 0 0}
@media(max-width:720px){.screen-info-header{padding:19px 20px;gap:10px}.screen-info-tool .screen-info-header h2{font-size:23px;margin-bottom:0}.screen-info-header>div>p:last-child{display:none}.screen-info-header .eyebrow{margin-bottom:8px}.screen-info-tool .screen-info-controls{padding:16px 20px 8px}.screen-info-tool .screen-info-controls .screen-info-actions{margin:0 0 10px;gap:8px}.screen-info-tool .screen-info-actions button{min-height:44px;padding:10px 12px;flex-basis:125px}.screen-info-tool .screen-info-controls .screen-info-status{font-size:11px!important;margin:0 0 7px;line-height:1.65!important}.screen-info-setup summary{font-size:11px;min-height:38px;padding:9px 0}.screen-info-tool .screen-info-readings{padding-top:18px}}
