/* Solutions page layout. Shared components live in /assets/site.css. */

/* ---------- hero ---------- */
.sol-hero .btn-row{gap:16px 28px}
.boundary-index{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.boundary-index li{display:flex;min-width:0}
.bi-cell{flex:1;display:flex;flex-direction:column;padding:24px 24px 22px;border-left:1px solid var(--line);color:var(--ink);transition:background-color .12s var(--ease)}
.boundary-index li:first-child .bi-cell{border-left:0;padding-left:0}
.bi-cell .icon{width:24px;height:24px;color:var(--ink)}
.bi-title{margin-top:14px;font:600 15px/20px var(--sans);color:var(--ink);transition:color .12s var(--ease)}
.bi-desc{margin-top:6px;font:400 13px/20px var(--sans);color:var(--muted)}
.bi-count{margin-top:auto;padding-top:16px;font:500 13px/20px var(--sans);color:var(--text);font-variant-numeric:tabular-nums}
.bi-cell:hover .bi-title{color:var(--signal-700)}
.sol-hero-note{margin-top:16px;max-width:760px}
@media (max-width:1079px){
  .boundary-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .boundary-index li .bi-cell,.boundary-index li:first-child .bi-cell{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .boundary-index li:nth-child(-n+2) .bi-cell{border-top:0}
  .boundary-index li:nth-child(even) .bi-cell{padding-left:24px;border-left:1px solid var(--line)}
  .boundary-index li:last-child{grid-column:1/-1}
}
@media (max-width:879px){.boundary-index{margin-top:48px}}
@media (max-width:639px){
  .boundary-index{grid-template-columns:minmax(0,1fr)}
  .boundary-index li .bi-cell,.boundary-index li:nth-child(even) .bi-cell{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;column-gap:14px;padding:14px 0;border-left:0;border-top:1px solid var(--line)}
  .boundary-index li:first-child .bi-cell{border-top:0}
  .bi-cell .icon{width:20px;height:20px}
  .bi-title{margin-top:0}
  .bi-desc{display:none}
  .bi-count{margin-top:0;padding-top:0;color:var(--muted)}
}

/* ---------- boundary sections: text in columns 1-5, cases in 6-12 ---------- */
.boundary .grid{row-gap:48px}
.boundary-text{align-self:start}
.boundary-body{margin-top:20px}
.boundary-text .checks{margin-top:24px}
.boundary-text .checks code{font-size:.8125em;color:var(--ink);overflow-wrap:anywhere}
.boundary-aside{margin-top:24px;font-size:15px;line-height:24px;color:var(--c-muted);max-width:560px;text-wrap:pretty}
.boundary-note{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:12px 14px;border-radius:8px;background:var(--paper);font-size:14px;line-height:22px;color:var(--text);max-width:560px}
.bg-paper .boundary-note{background:var(--white)}
.boundary-note .icon{width:18px;height:18px;margin-top:2px;color:var(--muted)}
.boundary-link{margin-top:32px}
@media (min-width:880px){.boundary-text{padding-right:24px}}
/* sticky only where the tallest text column (persistent state) fits below the header and subnav */
@media (min-width:1280px) and (min-height:800px),(min-width:1080px) and (min-height:900px){.boundary-text{position:sticky;top:calc(var(--header-h) + 48px + 40px)}}

.boundary-cases{display:grid;gap:24px;align-content:start;min-width:0}

/* ---------- case card ---------- */
.case{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 28px 26px;min-width:0;color:var(--text)}
.case-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.case-id{font:500 13px/20px var(--mono);color:var(--ink);margin-right:2px;overflow-wrap:anywhere}
.sev{display:inline-flex;align-items:center;gap:6px;font:600 13px/18px var(--sans);color:var(--ink);white-space:nowrap}
.sev-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.sev-bars i{display:block;width:3px;border-radius:1px;background:var(--ink)}
.sev-bars i:nth-child(1){height:5px}.sev-bars i:nth-child(2){height:8px}.sev-bars i:nth-child(3){height:12px}
.sev-medium .sev-bars i:nth-child(3){background:var(--line-strong)}
.case-title{margin-top:14px}
.case-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:4px;font:400 13px/20px var(--sans);color:var(--muted)}
.case-sub .sev::before{content:"";width:1px;height:12px;background:var(--line-strong);margin-right:6px}
.case-label{margin:18px 0 8px;font:600 13px/20px var(--sans);color:var(--muted)}
.case-quote{margin:0;padding:12px 16px;background:var(--paper-2);border-left:2px solid var(--line-strong);border-radius:0 6px 6px 0;font:400 13px/20px var(--mono);color:var(--ink);overflow-wrap:anywhere}
.case-quote p{margin:0}
.case-turns{display:grid;gap:8px}
.case-turns li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:baseline}
.case-turns .turn{font:500 13px/20px var(--sans);color:var(--muted);white-space:nowrap}
.case-rows{margin:18px 0 0}
.case-rows>div{display:grid;grid-template-columns:148px minmax(0,1fr);gap:4px 16px;padding:11px 0;border-top:1px solid var(--line)}
.case-rows>div:last-child{padding-bottom:0}
.case-rows dt{font:600 13px/22px var(--sans);color:var(--muted)}
.case-rows dd{margin:0;font-size:14px;line-height:22px;color:var(--text);min-width:0}
.case-rows .case-fix dd{color:var(--ink)}
.case-rows-top{margin-top:14px}
.case-rows-top>div:last-child{padding-bottom:11px;border-bottom:1px solid var(--line)}
.case-rows-top+.case-label{margin-top:16px}
.effect{display:inline-block;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--r-chip);background:var(--paper-2);font:500 13px/22px var(--mono);color:var(--ink);overflow-wrap:anywhere}
.case-src{display:block;margin-top:4px;font-size:13px;line-height:20px;color:var(--muted)}
.fields{display:flex;flex-wrap:wrap;gap:6px}
.field{display:inline-flex;gap:6px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--r-chip);background:var(--paper-2);font:500 12.5px/22px var(--mono);color:var(--ink);overflow-wrap:anywhere}
.field span{color:var(--muted);font-weight:400}

/* group label and compact cards */
.case-group{display:flex;align-items:center;gap:12px;margin-top:16px;font:600 13px/20px var(--sans);color:var(--muted)}
.case-group::after{content:"";flex:1;border-top:1px solid var(--c-line-strong)}
.case-group-first{margin-top:0}
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.case-compact{padding:22px 22px 24px}
.case-compact .case-title{font-size:17px;line-height:24px}
.case-compact .case-rows>div{grid-template-columns:minmax(0,1fr);gap:4px}

@media (max-width:639px){
  .case{padding:20px}
  .case-rows>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .case-quote{padding:10px 12px}
  .case-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .boundary-cases{gap:16px}
}

/* phone and tablet: one case at a time, chosen by tab (site.js drives role=tablist).
   Without JavaScript, or from 880px up, every case is shown. */
.case-tabs{display:none}
@media (min-width:880px){.boundary-cases .case[hidden]{display:block!important}}
html:not(.js) .boundary-cases .case[hidden]{display:block!important}
@media (max-width:879px){
  .js .case-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--c-line-strong);margin-bottom:-8px}
  .js .case-tabs::-webkit-scrollbar{display:none}
  .case-tabs [role=tab]{flex:none;height:44px;padding:0 14px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;font:600 14px/20px var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
  .case-tabs [role=tab]:first-child{padding-left:0}
  .case-tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--signal-600)}
  .case-tabs [role=tab]:hover{color:var(--ink)}
  /* the scrolling row clips anything outside it, so draw the focus ring inside the tab */
  .case-tabs [role=tab]:focus-visible{outline-offset:-2px}
  .js .case-group{display:none}
  .js .case-grid{display:block}
  .js .case-grid:not(:has(> .case:not([hidden]))){display:none}
}
@media (min-width:640px) and (max-width:879px){
  .js .case-compact{padding:24px 28px 26px}
  .js .case-compact .case-title{font-size:18px;line-height:26px}
  .js .case-compact .case-rows>div{grid-template-columns:148px minmax(0,1fr);gap:4px 16px}
}

/* ---------- teams ---------- */
.team-card .small{margin-top:8px}
.team-checks{margin-top:20px;gap:8px}
.team-checks li{font-size:14px;line-height:22px}
.team-checks li::before{margin-top:10px}
.team-card .link-arrow{margin-top:auto;padding-top:24px}
.team-card{scroll-margin-top:calc(var(--header-h) + 64px)}
/* tablet: one card per row, description left and checks right */
@media (min-width:640px) and (max-width:1079px){
  .team-cards{grid-template-columns:minmax(0,1fr)}
  .team-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;grid-template-areas:"icon ." "title list" "text list" "link list";align-content:start}
  .team-card>.icon-tile{grid-area:icon}
  .team-card>.h4{grid-area:title}
  .team-card>.small{grid-area:text}
  .team-card>.team-checks{grid-area:list;margin-top:0;align-self:start}
  .team-card>.link-arrow{grid-area:link;align-self:end}
}

/* ---------- packs ---------- */
.pack-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:8px 28px 4px}
.pack-table th{padding-top:20px}
.pack-table tbody tr:last-child td{border-bottom:0}
.pack-table th:nth-child(1){width:34%}
.pack-table th:nth-child(2){width:8%}
.pack-name{display:block;font:600 15px/22px var(--sans);color:var(--ink)}
.pack-ids{display:block;margin-top:6px;font:400 12.5px/20px var(--mono);color:var(--muted)}
.pack-ids span{white-space:nowrap}
.pack-table{font-variant-numeric:normal}
.pack-num{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pack-notes p{text-wrap:pretty}
.pack-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 48px;margin-top:28px;max-width:1040px}
@media (max-width:879px){.pack-notes{grid-template-columns:minmax(0,1fr)}}
/* the packs table reflows before it gets cramped: stacked below 880, label beside value from 640 */
@media (max-width:879px){
  .pack-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pack-table,.pack-table tbody,.pack-table tr,.pack-table td{display:block;width:100%}
  .pack-table tr{padding:20px 0;border-bottom:1px solid var(--c-line)}
  .pack-table tbody tr:last-child{border-bottom:0}
  .pack-table td,.pack-table tbody tr:last-child td{border:0;padding:4px 0}
  .pack-table td:first-child{padding-bottom:10px}
  .pack-table td::before{content:attr(data-label);display:block;font:600 11px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
  .pack-table td:first-child::before{display:none}
}
@media (min-width:640px) and (max-width:879px){
  .pack-table tbody tr td:not(:first-child){display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:8px 0;border-top:1px solid var(--c-line)}
  .pack-table tbody tr td:not(:first-child)::before{line-height:22px}
}
@media (max-width:639px){
  .pack-panel{padding:4px 20px}
  .pack-table tbody tr:last-child{border-bottom:0}
}