/* ==========================================================
   Ways of Working: sticky area nav + overview + area sections.
   Tokens and existing text styles only.
   ========================================================== */
.ways { padding-top: var(--space-64); }
.ways__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-64); align-items: start; }

/* left: vertical tabs, sticky while the sections scroll past */
.ways-nav { position: sticky; top: calc(var(--nav-h) + var(--space-32)); }
.ways-nav__label { margin-bottom: var(--space-12); }
.ways-nav__list { display: flex; flex-direction: column; border-left: 1px solid var(--border-default); }
.ways-nav__link { position: relative; display: flex; align-items: baseline; gap: var(--space-12); padding: var(--space-12) var(--space-16); font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--text-secondary); transition: color .3s var(--ease-out), background-color .3s var(--ease-out); }
.ways-nav__link::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--brand-primary); transform: scaleY(0); transition: transform .4s var(--ease-out); }
.ways-nav__link:hover { color: var(--text-primary); background: var(--background-surface-subtle); }
.ways-nav__link.is-active { color: var(--text-primary); }
.ways-nav__link.is-active::before { transform: none; }
.ways-nav__n { font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ways-nav__link.is-active .ways-nav__n { color: var(--brand-primary); }

/* right: overview + one section per area */
.ways__body { min-width: 0; max-width: 860px; }
.ways-area { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); padding-block: var(--space-64); border-top: 1px solid var(--border-default); scroll-margin-top: calc(var(--nav-h) + var(--space-24)); }
.ways-area:first-child { padding-top: 0; border-top: 0; }
.ways-area > .heading-h2 { margin-top: calc(var(--space-8) * -1); }
.ways-area__more { width: 100%; } /* box styling: .note-box in styles.css */
.ways-area__proof { margin-top: var(--space-8); }

/* overview: every area at a glance, each linking to its section */
.ways-tiles { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-16); border: 1px solid var(--border-default); }
.ways-tiles > li { border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.ways-tiles > li:nth-child(2n) { border-right: 0; }
.ways-tiles > li:nth-last-child(-n + 2) { border-bottom: 0; }
.ways-tile { height: 100%; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-32) var(--space-24); background: var(--background-page); transition: background-color .3s var(--ease-out); }
.ways-tile:hover { background: var(--background-surface-subtle); }
.ways-tile .heading-h3 { transition: color .3s var(--ease-out); }
.ways-tile:hover .heading-h3 { color: var(--text-hero-emphasis); }

/* placeholders until the content thread sends copy (never shipped) */
.copy-todo { display: inline-block; padding: 2px var(--space-8); border: 1px dashed var(--border-strong); border-radius: var(--radius-badge); font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--text-muted); background: var(--background-surface-subtle); }

/* tablet and phone: the tabs become a sticky, swipeable row above the sections */
@media (max-width: 900px) {
  .ways__layout { grid-template-columns: 1fr; gap: var(--space-24); }
  .ways-nav { top: var(--nav-h); z-index: 5; margin-inline: calc(var(--gutter) * -1); padding: var(--space-8) var(--gutter); background: var(--background-page); border-bottom: 1px solid var(--border-default); }
  .ways-nav__label { display: none; }
  .ways-nav__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-left: 0; gap: var(--space-8); }
  .ways-nav__list::-webkit-scrollbar { display: none; }
  .ways-nav__link { flex: none; padding: var(--space-8) var(--space-12); border: 1px solid var(--border-default); border-radius: var(--radius-button); font-size: 14px; white-space: nowrap; }
  .ways-nav__link::before { display: none; }
  .ways-nav__link.is-active { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--brand-on-primary); }
  .ways-nav__link.is-active .ways-nav__n { color: var(--brand-on-primary); }
  .ways-area { padding-block: var(--space-48); scroll-margin-top: calc(var(--nav-h) + 72px); }
  .ways-tiles { grid-template-columns: 1fr; }
  .ways-tiles > li { border-right: 0 !important; border-bottom: 1px solid var(--border-default) !important; }
  .ways-tiles > li:last-child { border-bottom: 0 !important; }
}
.ways-nav__list, .ways-tiles { list-style: none; padding: 0; }
@media (max-width: 900px) {
  .ways__layout { grid-template-columns: minmax(0, 1fr); }
  .ways-nav, .ways-nav__list { min-width: 0; max-width: 100vw; }
}
/* when the site header slides away on scroll, the tab row takes its place */
.ways-nav { transition: top .5s var(--ease-out); }
@media (max-width: 900px) { .nav.is-hidden ~ main .ways-nav { top: 0; } }
/* proof links: one per line */
.ways-area__proof { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.ways-area > .body-large.text-secondary { margin-top: calc(var(--space-8) * -1); }
/* odd number of areas: the last tile spans the row (no empty cell) */
.ways-tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.ways-tiles:has(> li:last-child:nth-child(odd)) > li:nth-last-child(2) { border-bottom: 1px solid var(--border-default); }