/* v25.0 additions: language suggestion bar, help-guide sections, numbered steps, RTL articles, Spanish switch. */

/* Language suggestion bar (shown by app.v250.js only when the visitor's language has its own version). */
.lang-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;background:#0B2A44;color:#E6F4F8;font-size:15px;line-height:1.4;border-bottom:1px solid rgba(0,165,196,.45)}
.lang-bar p{margin:0;text-align:center;color:#E6F4F8}
.lang-bar a{color:#7FE3F2;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.lang-bar a:focus-visible,.lang-bar-x:focus-visible{outline:2px solid #7FE3F2;outline-offset:2px}
.lang-bar-x{flex:none;width:36px;height:36px;border:1px solid rgba(255,255,255,.25);border-radius:6px;background:transparent;color:#E6F4F8;font-size:20px;line-height:1;cursor:pointer}
.lang-bar[lang=ar]{font-family:'IBM Plex Sans Arabic',var(--body)}

/* Numbered steps inside articles. */
.article ol.steps-list{list-style:none;counter-reset:st;padding:0;margin:0 0 22px}
.article ol.steps-list>li{counter-increment:st;position:relative;padding:2px 0 12px 42px;margin:0}
.article ol.steps-list>li::before{content:counter(st);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--signal-wash);border:1px solid #C3CFDE;color:var(--ink);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}

/* Top-of-article download button. */
.article-hero .hero-cta-inline{margin-top:18px}
.article-hero .hero-cta-inline .play-badge{height:52px;width:auto}

/* Help-guide cards on the home pages and hubs. */
#guides .card-list{margin-top:6px}
.guides-more{margin-top:18px}
.acard .tag{display:block}

/* Right-to-left articles and cards. */
[dir=rtl] .article ul,[dir=rtl] .article ol{padding-left:0;padding-right:24px}
[dir=rtl] .article ol.steps-list{padding-right:0}
[dir=rtl] .article ol.steps-list>li{padding:2px 42px 12px 0}
[dir=rtl] .article ol.steps-list>li::before{left:auto;right:0}
[dir=rtl] .answer{border-left:1px solid #C3CFDE;border-right:3px solid var(--signal)}
[dir=rtl] .acard{border-left:1px solid var(--line);border-right:2px solid var(--signal)}
[dir=rtl] .article,[dir=rtl] .article-hero,[dir=rtl] .related{text-align:right}
[dir=rtl] .article,[dir=rtl] .article-hero,[dir=rtl] .card-list,[dir=rtl] .faq-list{font-family:'IBM Plex Sans Arabic',var(--body)}
[dir=rtl] .symptoms th,[dir=rtl] .symptoms td{text-align:right}
[dir=rtl] .jump ol{padding-right:0}

/* Four languages in the switch. */
@media (min-width:981px){.navlinks .lang-switch a{padding:4px 6px}}
/* French and Spanish menu labels are longer: keep the Google Play button visible on laptop widths. */
.navlinks .play-badge-link{flex:none}
@media (min-width:981px) and (max-width:1599px){html[lang=fr] .navlinks .nav-aside,html[lang=es] .navlinks .nav-aside{display:none}}
@media (min-width:981px) and (max-width:1299px){html[lang=fr] .navlinks>a:not(.play-badge-link),html[lang=es] .navlinks>a:not(.play-badge-link){font-size:13.5px}}
/* New guides: let the first table column wrap so both columns stay readable on phones. */
.guide .symptoms tbody th{white-space:normal;min-width:8.5em}
[dir=rtl] .jump a .jn{margin-right:0;margin-left:6px}
/* Arabic text never uses the monospace label font (it breaks letter joining). */
[dir=rtl] .crumb,[dir=rtl] .byline,[dir=rtl] .byline span,[dir=rtl] .acard .tag,[dir=rtl] .jump strong,[dir=rtl] .answer b,[dir=rtl] .symptoms thead th{font-family:'IBM Plex Sans Arabic',var(--body);letter-spacing:0}

/* v25.1: editorial note, worked examples and in-article tools. */
.article-hero .editorial{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#9FB0BE;max-width:760px}
.article-hero .editorial a{color:#7FE3F2}
.article .example{margin:24px 0;padding:16px 18px;border:1px solid var(--line);border-radius:6px;background:var(--canvas)}
.article .example b{display:block;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--signal);margin-bottom:6px}
.article .example p{margin:0}
.tool{margin:18px 0 28px;padding:18px;border:1px solid #C3CFDE;border-radius:8px;background:#F6F9FC}
.tool-title{margin:0 0 12px;font-weight:700;color:var(--ink)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.tool-grid-1{grid-template-columns:minmax(0,260px)}
.tool-grid-2{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.tool-field{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--ink-soft)}
.tool-field input{font:inherit;font-size:16px;padding:10px 12px;border:1px solid #B9C6D4;border-radius:6px;background:#fff;color:var(--ink);min-width:0}
.tool-field input:focus{outline:2px solid var(--signal);outline-offset:1px}
.tool-opt{color:var(--muted);font-size:12.5px}
.tool-wide{margin-bottom:12px}
.tool-pass{font-family:var(--mono)!important;letter-spacing:.06em;font-size:18px!important}
.tool-actions{display:flex;flex-wrap:wrap;gap:10px}
.tool .btn{min-height:44px;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:10px 18px;border-radius:6px;font-weight:600;cursor:pointer}
.tool .btn:hover{background:#000}
.tool .btn.btn-ghost{background:#fff;color:var(--ink);border-color:#B9C6D4}
.tool .btn.btn-ghost:hover{border-color:var(--signal);color:var(--signal)}
.tool .btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.tool-hint{margin:12px 0 0;font-size:13.5px;color:var(--ink-soft)}
.tool-out{margin-top:12px}
.tool-out:empty{margin:0}
.tool-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px solid #DDE5EE}
.tool-row:first-child{border-top:0}
.tool-row-label{font-weight:600;color:var(--ink);min-width:12em}
.tool-row-note{flex-basis:100%;font-size:13.5px;color:var(--ink-soft)}
.tool-badge{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:99px}
.tool-good{background:#E3F6EC;color:#14653A}
.tool-ok{background:#FFF3D6;color:#7A5300}
.tool-poor{background:#FDE7E4;color:#9A2416}
.tool-msg{margin:10px 0 0;padding:10px 12px;border-radius:6px;background:#EEF3F8}
.tool-msg.tool-warn{background:#FFF3D6}
.tool-msg.tool-okmsg{background:#E3F6EC}
.tool-private{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.tool-q{border:0;margin:0 0 12px;padding:0}
.tool-q legend{font-weight:600;color:var(--ink);margin-bottom:8px;padding:0}
.tool-chips{display:flex;flex-wrap:wrap;gap:8px}
.tool-chip{position:relative;cursor:pointer}
.tool-chip input{position:absolute;opacity:0;width:1px;height:1px}
.tool-chip span{display:inline-block;padding:9px 14px;border:1px solid #B9C6D4;border-radius:99px;background:#fff;font-size:14.5px;color:var(--ink);min-height:20px}
.tool-chip input:checked+span{border-color:var(--signal);background:var(--signal-wash);font-weight:600}
.tool-chip input:focus-visible+span{outline:2px solid var(--signal);outline-offset:2px}
.tool:not(.tool-ready) .tool-go,.tool:not(.tool-ready) .tool-actions{display:none}
[dir=rtl] .tool,[dir=rtl] .tool-msg{font-family:'IBM Plex Sans Arabic',var(--body)}
[dir=rtl] .tool-field input[name=dbm],[dir=rtl] .tool-field input[name=rsrp],[dir=rtl] .tool-field input[name=sinr],[dir=rtl] .tool-grid input{direction:ltr;text-align:right}
[dir=rtl] .article-hero .editorial{font-family:'IBM Plex Sans Arabic',var(--body)}
.article .data{margin:24px 0;padding:16px 18px;border-radius:6px;background:#EAF6F9;border:1px solid #BFE3EC}
.article .data b{display:block;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:#0B6E86;margin-bottom:6px}
.article .data p{margin:0}
#real-data .stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:10px}
@media (max-width:860px){#real-data .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#real-data .stat{border:1px solid var(--line);border-radius:8px;padding:16px;background:#fff}
#real-data .stat b{display:block;font-family:var(--disp);font-size:32px;line-height:1.1;color:var(--ink)}
#real-data .stat span{display:block;margin-top:6px;font-size:14.5px;color:var(--ink-soft)}
#real-data .data-note{margin-top:14px;font-size:13.5px;color:var(--muted)}
[dir=rtl] #real-data{font-family:'IBM Plex Sans Arabic',var(--body)}