/* Tarleaks public site: styles only the Solutions pages need (/solutions/ and /ar/solutions/).
   Loaded after site.css through head_extra (scripts/site/pages/solutions.py), with ?v=<content hash>.
   Rules: tokens from site.css only (no hex); logical properties only, so the same rules mirror under dir="rtl". */
@layer components{

/* the "On this page" chips sit right under the hero, without a full section's padding */
.band.sol-tocband{padding-block:0 var(--s-6)}
.sol-tocband .onpage{margin-block:0}

/* ------------------------------------------------------------ hub lenses */
.sol-lenses{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:start}
.sol-lens{display:flex;flex-direction:column;gap:var(--s-2)}
.sol-lens h2{font-size:clamp(22px,2.2vw,26px);margin:0}
.sol-lens > p{margin:0;color:var(--text-2)}
.sol-lens__ico{inline-size:40px;block-size:40px;padding:8px;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand)}
.sol-lens__list{list-style:none;display:grid;margin:var(--s-2) 0 0;padding:0}
.sol-lens__list li{display:grid;gap:2px;padding-block:var(--s-2);border-block-end:1px solid var(--border)}
.sol-lens__list li:last-child{border-block-end:0}
.sol-lens__link{display:flex;align-items:center;min-block-size:var(--target);font-weight:650;color:var(--text);text-decoration:none}
.sol-lens__link:hover{color:var(--brand);text-decoration:underline}
.sol-lens__list span{color:var(--text-3);font-size:14.5px;line-height:1.5}
.sol-lens .note{margin-block-start:var(--s-2)}
.sol-lens .ticks{margin-block-start:var(--s-1)}

/* -------------------------------------------------------- status legend */
.sol-legend{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:var(--s-3) 0 0;padding:0;font-size:14px;color:var(--text-2)}
.sol-legend li{display:flex;align-items:center;gap:var(--s-2)}
/* "Partly" is a gap, not an error: amber like the pilot chip, told apart by its glyph and word */
.sol-legend .pill--warn,.soltable .pill--warn,.fgrid .pill--warn{color:var(--warn-text);background:var(--warn-soft)}

/* ------------------------------------------------------- the rule table */
.soltable{font-size:15px}
.soltable thead th:last-child{white-space:nowrap}
.soltable tbody th{min-inline-size:11em;max-inline-size:16em}
.soltable td{line-height:1.55}
.sol-srcline,.sol-gap,.sol-where{display:block;margin-block-start:var(--s-1);font-size:13.5px}
.sol-srcline{color:var(--text-3)}
.sol-src{color:var(--brand);overflow-wrap:anywhere}
.sol-gap{color:var(--text);padding-inline-start:var(--s-2);border-inline-start:3px solid var(--warn-text)}
.sol-where{color:var(--text-3)}
.sol-where .sol-app,.sol-where a{font-weight:600}
.sol-status{display:inline-block;white-space:nowrap}
.soltable--week tbody th{max-inline-size:none}
.soltable--glance td a{color:var(--text);font-weight:550}
.soltable--glance td .pill{margin-inline-end:var(--s-1)}

/* phones: the stacked card shows the status straight after the rule name (ux-research 5.4) */
@media (max-width:719.98px){
  .soltable tr{display:flex;flex-direction:column}
  .soltable tbody th{order:0;max-inline-size:none;min-inline-size:0}
  .soltable td:last-child:has(.sol-status){order:1}
  .soltable td{order:2}
  .soltable tbody th{font-size:16px}
}

/* ------------------------------------------------------------ local facts */
.sol-facts{display:grid;gap:var(--s-3);margin:0}
.sol-facts > div{display:grid;gap:2px;padding-block-end:var(--s-3);border-block-end:1px solid var(--border)}
.sol-facts > div:last-child{border-block-end:0;padding-block-end:0}
.sol-facts dt{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
html[lang="ar"] .sol-facts dt{text-transform:none;letter-spacing:0;font-size:13.5px}
.sol-facts dd{margin:0;color:var(--text);font-size:15.5px;line-height:1.55}

/* ------------------------------------------------------------- guides */
.sol-subh{font-size:18px;margin:var(--s-6) 0 var(--s-2)}
#not-covered{margin-block-start:var(--s-6)}
#not-covered ul{margin:var(--s-1) 0 0;padding-inline-start:1.2em;display:grid;gap:var(--s-1)}
}