/* T11 networks and condition relationships (remaining-168, 2026-09-15).
 * Scoped under body.nw-page. A left-aligned opening, the filters in one band,
 * a large map with the selected-condition pane beside it, and the reading
 * about the map below the working area. Graph renderers are untouched.
 */
body.nw-page main .container { max-width: 1240px; }

/* Opening: title and purpose left; what a line means beside it. */
body.nw-page .nw-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2.5rem; align-items: start; margin: 0 0 1.25rem; }
body.nw-page .nw-eyebrow { color: var(--color-accent); font-family: var(--font-sans); font-size: .78rem; font-weight: 800; letter-spacing: .11em; margin: 0 0 .3rem; text-transform: uppercase; }
body.nw-page .nw-head h1 { margin: 0 0 .5rem; text-align: left; }
body.nw-page .nw-head .cg-lede { margin: 0 0 .5rem; max-width: 68ch; }
body.nw-page .nw-head .nw-fold .cg-lede { margin: 0; }
body.nw-page .nw-head > .cg-howto-note { font-size: .92rem; max-width: 68ch; margin: 0; }
body.nw-page .nw-guide-card { display: flex; gap: .9rem; align-items: center; padding: .9rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
body.nw-page .nw-guide-card img { flex: none; border: 1px solid var(--color-border); border-radius: 4px; }
body.nw-page .nw-guide-card span { font-size: .9rem; line-height: 1.5; }
body.nw-page .nw-guide-card strong { display: block; color: var(--color-primary); margin-bottom: .15rem; }
body.nw-page .nw-guide-card:hover strong, body.nw-page .nw-guide-card:focus-visible strong { text-decoration: underline; }
@media (min-width: 1024px) {
  body.nw-page .nw-head { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  body.nw-page .nw-head > .nw-head-copy { grid-column: 1; grid-row: 1 / span 2; }
  body.nw-page .nw-head > .cg-howto-note { grid-column: 2; grid-row: 1; align-self: center; }
  body.nw-page .nw-head > .rmv-share-mount { grid-column: 2; grid-row: 2; }
}

/* Phone folds (phone-fold.js): open with no summary on wider screens, a closed C control on phones. */
body.nw-page .nw-fold > summary { display: none; }
@media (max-width: 640px) {
  body.nw-page .nw-fold > summary { display: flex; align-items: center; min-height: 44px; margin: 0 0 .5rem; padding: .45rem .9rem; font-weight: 600; font-size: .92rem; cursor: pointer; list-style: none; width: fit-content; max-width: 100%; }
  body.nw-page .nw-fold > summary::-webkit-details-marker { display: none; }
  body.nw-page .nw-fold > summary::after { content: "▾" / ""; margin-left: .5rem; }
  body.nw-page .nw-fold[open] > summary::after { content: "▴" / ""; }
  body.nw-page .nw-fold-note { margin: 0 0 1rem; }
}

/* Working area: the map, with the selected condition beside it on wide screens. */
body.nw-page .cg-controls { margin-bottom: .5rem; }
body.nw-page .cg-filter-note { margin: 0 0 1rem; }
body.nw-page .nw-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 0 0 2rem; }
body.nw-page .nw-canvas { min-width: 0; }
body.nw-page .nw-canvas > .cg-dir-control { margin-top: 0; }
/* dc.css gives the direction control display:flex, which beat its hidden attribute, so it showed before any condition was focused. */
body.nw-page .cg-dir-control[hidden] { display: none; }
body.nw-page .nw-detail { display: grid; gap: 1rem; min-width: 0; }
body.nw-page .nw-detail-h { font-family: var(--font-sans); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 -.5rem; text-align: left; }
body.nw-page .nw-detail-sel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .9rem 1rem; }
body.nw-page .nw-detail-sel.has-sel { padding: 0; border: 0; background: none; }
body.nw-page .nw-detail-sel:not(.has-sel):has(> .nw-detail-empty[hidden]) { display: none; }
body.nw-page .nw-detail .nw-detail-empty { margin: 0; padding: 0; border: 0; background: none; font-size: .92rem; line-height: 1.55; color: var(--color-text-muted); max-width: none; }
body.nw-page .nw-detail .cg-quick-search { max-width: none; margin: 0; }
body.nw-page .nw-detail .cg-quick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
body.nw-page .nw-detail .cg-quick-row > .cg-quick-chip { margin-left: 0; }
body.nw-page .cg-quick-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
body.nw-page .cg-quick-chips .cg-quick-chip { margin-left: 0; }
@media (min-width: 1100px) {
  body.nw-page .nw-work { grid-template-columns: minmax(0, 1fr) 340px; }
  /* Inside the pane the lock panel is one column: title, both directions, actions. */
  body.nw-page .nw-detail .cg-popup { margin: 0; grid-template-columns: minmax(0, 1fr); box-shadow: none; }
  body.nw-page .nw-detail .cg-popup-body { flex-direction: column; gap: .25rem; }
  body.nw-page .nw-detail .cg-popup-body .cg-popup-dir { flex: none; }
  body.nw-page .nw-detail .cg-popup-actions { flex-direction: row; min-width: 0; }
  body.nw-page .nw-detail .cg-popup-actions > * { flex: 1 1 0; }
}

/* Reading about the map, below the working area. */
body.nw-page .nw-explain { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem 2.5rem; margin: 0 0 2rem; }
body.nw-page .nw-explain .cg-h2 { margin-top: 0; text-align: left; color: var(--color-text); }
body.nw-page .nw-explain .cg-howto { margin: 0; }
@media (min-width: 900px) { body.nw-page .nw-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Next steps: three even cards. */
body.nw-page .nw-next { margin: 0 0 2rem; }
body.nw-page .nw-next-h { font-size: 1.25rem; margin: 0 0 .85rem; text-align: left; }
body.nw-page .nw-next-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
body.nw-page .nw-next-card { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--color-surface); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-size: .92rem; line-height: 1.55; }
body.nw-page .nw-next-card img { flex: none; border: 1px solid var(--color-border); border-radius: 4px; }
body.nw-page .nw-next-card strong { display: block; color: var(--color-primary); margin-bottom: .2rem; }
body.nw-page .nw-next-more { margin: .75rem 0 0; font-size: .92rem; }
@media (min-width: 900px) { body.nw-page .nw-next-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

body.nw-page .cg-bottom-note { max-width: none; margin: 0 0 1rem; }
body.nw-page .cg-footer { margin: 1rem 0; }
body.nw-page .nw-footer-see { font-size: .8rem; margin-top: .6rem; }
body.nw-page .nw-footer-see a { color: inherit; text-decoration: underline; }

/* The automatic Related rail: five cards lay out 3 + 2. */
@media (min-width: 900px) {
  body.nw-page .rel-cards:has(> .rel-card:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.nw-page .rel-cards:has(> .rel-card:nth-child(5):last-child) > .rel-card { grid-column: span 2; }
  body.nw-page .rel-cards:has(> .rel-card:nth-child(5):last-child) > .rel-card:nth-child(n+4) { grid-column: span 3; }
}

/* Phones: search and the list switch share a row, so the map starts sooner. */
@media (max-width: 640px) {
  body.nw-page .cg-controls { grid-template-columns: minmax(0, 1fr) auto; }
  body.nw-page .cg-controls > .cg-control:not(.cg-search-control) { grid-column: 1 / -1; }
  body.nw-page .cg-controls > .cg-view-toggle { align-self: end; }
}

/* Opening with illustration (cancer residuals, medications): art top right, beside the first lines on phones. */
body.nw-page .nw-head.nw-head-art-row { grid-template-columns: minmax(0, 1fr) 160px; gap: 1rem 1.75rem; }
body.nw-page .nw-head-art { margin: 0; }
body.nw-page .nw-head-art img { border: 1px solid var(--color-border); border-radius: 10px; display: block; height: auto; width: 160px; }
body.nw-page .nw-head-copy > p { text-align: left; max-width: 72ch; }
body.nw-page .nw-head .cr-lede { margin: 0 0 .5rem; }
@media (max-width: 640px) {
  body.nw-page .nw-head.nw-head-art-row { grid-template-columns: minmax(0, 1fr) 80px; gap: .3rem .9rem; }
  body.nw-page .nw-head-art-row .nw-head-copy { display: contents; }
  body.nw-page .nw-head-art-row .nw-head-copy > * { grid-column: 1; }
  body.nw-page .nw-head-art-row .nw-head-copy > :not(.nw-eyebrow):not(h1) { grid-column: 1 / -1; }
  body.nw-page .nw-head-art-row .nw-head-art { grid-column: 2; grid-row: 1 / span 2; }
  body.nw-page .nw-head-art-row .nw-head-art img { width: 80px; }
}

/* One band for search and filters. */
body.nw-page .nw-band { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .85rem 1rem; margin: 0 0 1.25rem; display: grid; gap: .75rem; }
body.nw-page .nw-band .cr-search { margin: 0; }
body.nw-page .nw-band .cr-controls { background: none; border: 0; padding: 0; margin: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
@media (min-width: 900px) {
  body.nw-page .cr-band { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); align-items: start; }
  body.nw-page .cr-band .cr-search-hint { min-height: 1.2em; }
}

/* Selected pane: the empty text gives way to the panel. */
body.nw-page .nw-detail-sel.has-sel > .nw-detail-empty { display: none; }
body.nw-page .nw-guide-more { margin: -.5rem 0 0; font-size: .88rem; }
body.nw-page .nw-guide-more a { color: var(--color-text-muted); }
body.nw-page .nw-detail .cr-popup { margin: 0; box-shadow: none; }

/* Cancer residuals: the map stays reachable on phones through View as graph (dc.css hid it outright), and badges keep 12px. */
@media (max-width: 640px) {
  body.nw-page .cr-graph-wrap:not([hidden]) { display: block; min-height: 320px; overflow-x: auto; }
}
body.nw-page .cr-freq-badge, body.nw-page .cr-floor-badge { font-size: .75rem; }
body.nw-page .cr-footer { margin: 0 0 1.5rem; }
body.nw-page .cr-ref-section h2 { text-align: left; }

/* Rating Transition Explorer: a data-tool layout. Opening beside the method,
   numbers in one strip, the condition detail beside the full conditions table. */
body.nw-page .rt-head { text-align: left; padding: 0; background: none; }
body.nw-page .rt-head .rt-lede { color: var(--color-text); margin: 0 0 .85rem; }
body.nw-page .rt-head .warning-box { margin: 0; max-width: 72ch; font-size: .9rem; }
body.nw-page .rt-head .dr-method { margin: 0; }
body.nw-page .rt-head .dr-method > p { max-width: none; }
@media (min-width: 1024px) {
  body.nw-page .nw-head.rt-head { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
  body.nw-page .rt-head > .nw-head-copy { grid-row: 1; }
  body.nw-page .rt-head > .dr-method { grid-column: 2; grid-row: 1; }
}
body.nw-page.rt-page .guide-nav { margin: 0 0 1.25rem; }
body.nw-page .bva-stats-grid { gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.5rem; }
body.nw-page .bva-stat-card { border: 0; border-radius: 0; background: var(--color-surface); text-align: left; padding: .9rem 1.1rem; box-shadow: none; }
body.nw-page .bva-stat-number { font-size: 1.6rem; font-weight: 700; color: var(--color-text); line-height: 1.15; }
body.nw-page .bva-stat-label { font-size: .85rem; }
body.nw-page .rt-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.5rem; }
body.nw-page .rt-work > .bva-section { margin: 0; }
body.nw-page .bva-section h2 { text-align: left; }
body.nw-page .trans-bars { max-width: none; }
body.nw-page .trans-bar-label { width: 96px; font-size: .85rem; }
body.nw-page .trans-bar-count { width: 48px; font-size: .85rem; }
body.nw-page .rt-work .trans-table-wrap { max-height: 560px; }
body.nw-page .rt-work .judge-table thead th { z-index: 1; }
@media (min-width: 1100px) {
  body.nw-page .rt-work { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  body.nw-page .rt-work .judge-table td:first-child, body.nw-page .rt-work .judge-table td:last-child { white-space: nowrap; }
  body.nw-page .rt-work .judge-table td, body.nw-page .rt-work .judge-table th { padding-left: .45rem; padding-right: .45rem; }
}
@media (max-width: 640px) {
  body.nw-page .bva-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.nw-page .trans-bar-label { width: 84px; font-size: .78rem; }
  body.nw-page .rt-work .trans-table-wrap { max-height: 70vh; }
}

/* Medication side effects: an evidence directory. Left-aligned opening with art,
   the read-first caveat as two columns, drug-class cards two across with the
   counts in one strip, and left-aligned section headings. Wording untouched. */
body.med-page main .container { max-width: 1180px; }
body.med-page .med-head { text-align: left; padding: 0; background: none; margin-bottom: 1.5rem; }
body.med-page .med-head .nw-eyebrow a { color: inherit; text-decoration: none; }
body.med-page .med-head .nw-eyebrow a:hover { text-decoration: underline; }
body.med-page .med-head .nw-head-copy > p:not(.nw-eyebrow) { margin: 0; color: var(--color-text); }
body.med-page .med-verdict { max-width: none; margin: 0 0 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); }
body.med-page .med-verdict h2 { text-align: left; grid-column: 1 / -1; }
body.med-page .med-verdict p { margin: 0 0 .7rem; }
@media (min-width: 900px) { body.med-page .med-verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.med-page .med-verdict p { margin: 0; } }
body.med-page .med-h2 { font-size: 1.35rem; color: var(--color-text); text-align: left; margin: 0 0 .4rem; }
body.med-page .med-note { margin-left: 0; margin-right: 0; max-width: 80ch; font-size: .88rem; }
body.med-page .med-group { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
body.med-page .med-group-h { text-align: left; color: var(--color-text); }
body.med-page .med-group-h::after { margin: .5rem 0 0; }
body.med-page .med-group-sub { text-align: left; font-size: .88rem; }
body.med-page .med-group > p[style*="text-align:center"] { text-align: left !important; }
body.med-page .med-list { gap: 1.25rem; }
@media (min-width: 1000px) {
  body.med-page .med-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  /* An odd last card spans the row rather than sitting alone in half of it. */
  body.med-page .med-list > .med-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
body.med-page .med-card { border-width: 1px; }
body.med-page .med-card h3 { text-align: left; color: var(--color-text); }
body.med-page .med-what { text-align: left; margin: 0 0 .9rem; max-width: none; }
body.med-page .med-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
body.med-page .med-stats div { text-align: left; padding: .6rem .8rem; border-top: 1px solid var(--color-border); }
body.med-page .med-stats div:nth-child(-n+2) { border-top: 0; }
body.med-page .med-stats div:nth-child(even) { border-left: 1px solid var(--color-border); }
body.med-page .med-l { font-size: .8rem; }
body.med-page .med-conds ul { columns: 2 16rem; column-gap: 1.5rem; }
body.med-page .med-conds li { break-inside: avoid; }
body.med-page .med-lane { font-size: .75rem; }
body.med-page .med-card .med-note { max-width: none; }
body.med-page .med-card li.med-note { margin-left: 0 !important; }
/* The Related rail: seven cards lay out 4 + 3 on wide screens. */
@media (min-width: 900px) {
  body.med-page .rel-cards:has(> .rel-card:nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  body.med-page .rel-cards:has(> .rel-card:nth-child(7):last-child) > .rel-card { grid-column: span 3; }
  body.med-page .rel-cards:has(> .rel-card:nth-child(7):last-child) > .rel-card:nth-child(n+5) { grid-column: span 4; }
}
body.nw-page .trans-condition-controls .judge-search-input { flex: 1 1 auto; min-width: 0; width: auto; }
body.nw-page .trans-reset-btn { flex: none; min-height: 44px; }
@media (max-width: 640px) { body.nw-page .nw-band .cr-controls { grid-template-columns: minmax(0, 1fr); } }
body.med-page main .med-card p.med-what { font-size: .95rem; line-height: 1.55; }
body.med-page main .med-verdict p { font-size: .95rem; }