/* pages.css — top-level page tabs and the article pages (Kindness, Design, Open Letter, About) */
.pagetabs { display: flex; gap: 2px; align-self: stretch; flex: 1; justify-content: center; }
.pagetabs a { display: flex; align-items: center; padding: 0 14px; color: #b7c4da; text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; }
.pagetabs a:hover { color: #fff; }
.pagetabs a.on { color: #fff; border-bottom-color: #6aa8ff; }
.pagetabs a[hidden] { display: none; }

.page.article { overflow-y: auto; background: var(--bg); }
.article article { max-width: 780px; margin: 0 auto; padding: 40px 28px 80px; font-size: 16px; line-height: 1.65; }
.article .kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--accent); margin: 0 0 6px; }
.article h1 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; text-wrap: balance; }
.article .lede { font-size: 19px; color: #3d4652; margin: 0 0 28px; text-wrap: pretty; }
.article h2 { font-size: 22px; margin: 38px 0 10px; }
.article h3 { font-size: 16px; margin: 0 0 4px; }
.article p { margin: 0 0 14px; }
.article ul, .article ol { padding-left: 22px; margin: 0 0 14px; }
.article li { margin: 4px 0; }
.article a { color: var(--accent); }
.article figure { margin: 18px 0 22px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; }
.article figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.article figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.article figure.inline { float: right; max-width: 40%; margin: 4px 0 12px 20px; padding: 8px; }
.article figure.narrow { margin: 0; }
.article figure.narrow img { max-height: 520px; }
.article .note { font-size: 13px; color: var(--muted); }
.article .btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 9px 18px; border-radius: 8px; font-weight: 600; }
.article .btn:hover { background: #1558c0; }
.article blockquote { margin: 20px 0; padding: 14px 20px; border-left: 4px solid var(--accent); background: var(--accent2); font-size: 20px; font-weight: 600; color: #1c3d7a; border-radius: 0 8px 8px 0; }
.article .sig { font-style: italic; margin-top: 24px; }
.letter p { text-wrap: pretty; }

/* White content column on Kindness */
#page-kindness > article { flex: none; width: 100%; background: #fff; min-height: 100%; box-sizing: border-box; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

.tableWrap { overflow-x: auto; margin: 10px 0 18px; }
table.req { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.45; background: #fff; }
table.req th, table.req td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; text-align: left; }
table.req thead th { background: #e7eef9; }
table.req tbody th { background: #f8f9fb; white-space: nowrap; }
table.req ul { margin: 0; padding-left: 18px; }
table.req li { margin: 1px 0; }

.split { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 18px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards > div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.cards p { margin: 0; font-size: 14.5px; color: #3d4652; }

ul.checks { list-style: none; padding-left: 0; }
ul.checks li { position: relative; padding-left: 30px; margin: 7px 0; }
ul.checks li::before { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
ul.checks li.done::before { content: "✓"; background: #dff3e4; color: #1d7a3a; }
ul.checks li.partial::before { content: "½"; background: #fdf1e3; color: #7a3e00; }
ul.checks li.todo::before { content: ""; border: 2px solid #b9c6d8; box-sizing: border-box; }
ul.refs { font-size: 14px; }
ol.steps { padding-left: 0; list-style: none; counter-reset: st; }
ol.steps li { counter-increment: st; position: relative; padding: 12px 14px 12px 54px; margin: 10px 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
ol.steps li::before { content: counter(st); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* About: left menu + sections */
.withMenu .aboutWrap { display: flex; flex: none; width: 100%; gap: 0; max-width: 1060px; margin: 0 auto; min-height: 100%; }
.aboutMenu { flex: none; width: 200px; position: sticky; top: 0; align-self: flex-start; padding: 40px 0 20px 20px; display: flex; flex-direction: column; gap: 2px; }
.aboutMenu a { display: block; padding: 8px 14px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; border-left: 3px solid transparent; }
.aboutMenu a:hover { background: #e8ebf0; }
.aboutMenu a.on { background: var(--accent2); color: var(--accent); border-left-color: var(--accent); }
.aboutBody { flex: 1; min-width: 0; background: #fff; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.aboutBody article { margin: 0; }
.aboutSec[hidden] { display: none; }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; padding: 6px 16px 0; }
  .pagetabs { order: 3; flex-basis: 100%; overflow-x: auto; justify-content: flex-start; min-height: 40px; }
  .pagetabs a { padding: 0 10px; }
  .topctl { min-width: 0; }
  .article article { padding: 24px 16px 60px; }
  .article h1 { font-size: 27px; }
  .article figure.inline { float: none; max-width: 100%; margin: 12px 0; }
  .split, .cards, .cards.three { grid-template-columns: 1fr; }
  .withMenu .aboutWrap { flex-direction: column; }
  .aboutMenu { position: static; width: auto; flex-direction: row; overflow-x: auto; padding: 12px 16px 0; }
  .aboutMenu a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; }
  .aboutMenu a.on { border-bottom-color: var(--accent); }
  .aboutBody, #page-kindness > article { border-left: none; border-right: none; }
}