/* pages.css: the reading pages (privacy, terms, why blockchain) and the two browse pages (use cases, case studies).
   Loaded after theme.css and uses its colour and type tokens. The navy bar, the foot, buttons, cards and pills
   come from theme.css. */

/* ---------- bar ---------- */

.bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 16px;
    padding: 14px 0;
}
.bar-name:hover { text-decoration: underline; }
.bar-links { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-left: auto; font-size: 0.95rem; }
.bar-links a { text-decoration: none; }
.bar-links a:hover { text-decoration: underline; }

/* ---------- reading pages: one column, a readable measure ---------- */

.page { padding: 40px 0 0; max-width: var(--w-read); }
.page-wide { max-width: var(--w-page); }
.page-title {
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.page-title::after { content: ""; display: block; width: 52px; height: 4px; margin-top: 16px; background: var(--amber); border-radius: 2px; }
.lede { margin: 20px 0 0; max-width: 46rem; font-size: 1.2rem; line-height: 1.5; }
.stamp { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; }

.prose h2 {
    margin: 44px 0 8px;
    font: 700 1.4rem/1.25 var(--serif);
    letter-spacing: -0.01em;
    color: var(--navy);
}
.prose h3 { margin: 24px 0 6px; font: 700 1.1rem/1.3 var(--serif); }
.prose p { margin: 0 0 12px; max-width: 44rem; }
.prose ul { margin: 0 0 12px; padding-left: 1.2rem; max-width: 44rem; }
.prose li { margin: 0 0 6px; }
.prose code { font-size: 0.92em; overflow-wrap: anywhere; }
.prose .note { color: var(--muted); font-size: 0.95rem; }

/* ---------- browse pages: filter bar, then cards ---------- */

.browse-intro { max-width: var(--w-read); }

.filterbar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 28px calc(-1 * var(--gutter)) 0;
    padding: 12px var(--gutter) 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 12px -8px rgba(15, 36, 64, 0.25);
}
.filterbar-row { display: flex; align-items: flex-end; gap: 12px; }
.filter { margin: 0; flex: 1 1 auto; max-width: 28rem; }
.filter label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.filter input { width: 100%; min-height: 44px; padding: 8px 12px; background: #ffffff; border: 1px solid var(--field-line); border-radius: var(--radius-sm); }
.filter-note { flex: none; min-height: 44px; margin: 0; display: flex; align-items: center; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the problem areas are toggles; on a phone they scroll sideways inside the bar so the bar stays short */
.areas {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 10px calc(-1 * var(--gutter)) 0;
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
}
.areas .pill-toggle { flex: none; white-space: nowrap; scroll-snap-align: start; text-decoration: none; }
.areas .pill-toggle:hover { color: var(--navy); }
.areas .pill-toggle[aria-pressed="true"],
.areas .pill-toggle[aria-pressed="true"]:hover { color: #ffffff; }

.area { scroll-margin-top: 8rem; padding-top: 8px; }
.area h2 {
    margin: 36px 0 16px;
    font: 700 1.45rem/1.25 var(--serif);
    letter-spacing: -0.01em;
    color: var(--navy);
}
.area h2::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 8px; background: var(--amber); border-radius: 2px; }

.uc-grid { display: grid; gap: 18px; align-items: start; margin: 0; padding: 0; }
.uc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    padding: 20px 22px 22px;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--navy);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.uc .pill { align-self: flex-start; margin: 0 0 12px; }
.uc h3 { margin: 0 0 8px; font: 700 1.15rem/1.3 var(--serif); color: var(--navy); }
.uc p { margin: 0 0 12px; }
.uc .uc-link { margin: auto 0 0; padding-top: 6px; }
.uc .btn { min-height: 40px; padding: 7px 16px; font-size: 0.9rem; }
.uc .refs { margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--muted); font-size: 0.92rem; }
.refs li { margin: 0 0 8px; }
.refs li:last-child { margin-bottom: 0; }
.refs a { color: var(--navy); font-weight: 600; }

@media (min-width: 40rem) {
    .page { padding-top: 56px; }
    .filterbar { padding-top: 14px; }
    .uc-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
    /* search on the left, the area toggles filling the rest, so the sticky bar stays low */
    .filterbar { display: grid; grid-template-columns: 17rem 1fr; gap: 0 28px; align-items: start; }
    .areas { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 6px; }
    .areas .pill-toggle { min-height: 32px; padding: 3px 11px; font-size: 0.82rem; }
    .filter-note { min-height: 44px; }
    .uc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media print {
    .filterbar { position: static; box-shadow: none; }
    .uc { box-shadow: none; break-inside: avoid; }
}