/* ── HOME SHARING LIBRARY ────────────────────────────────────────────────
   The library's page accent is sage, as the Share page's is: section labels,
   the lead and pull-quote bars, and the guide CTA. Headline second lines stay
   coral, as on every page.
   Loaded only on pages of type "library" (see head.html), after blog.css, so a
   guide inherits the blog's .article-hero, .article-body and .article-cta and
   this file adds only what the library has and the blog does not. Every rule is
   scoped under a library-* class, so nothing here reaches a blog post.
   Decisions: the 2026-09-25 entry in DECISIONS.md. */

/* ── Library home and shelf hero ───────────────────────────────────────── */
.library-hero {
    background-color: var(--warm-peach);
    padding: 64px 40px 56px;
}
/* As wide as the tile grids below, so the title lines up with the tiles; the
   paragraph keeps a reading measure of its own. */
.library-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.library-hero--split .library-hero-inner:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.library-hero-art svg { display: block; width: 100%; max-width: 440px; margin-left: auto; }
.library-hero .section-label { margin-bottom: 16px; }
.library-hero h1 {
    font-size: 44px;
    font-weight: 700;
    color: var(--plum);
    line-height: 1.18;
    margin-bottom: 20px;
}
.library-hero p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--dark-gray);
    max-width: 620px;
}

/* ── Breadcrumb (shelf hero and guide hero) ────────────────────────────── */
/* main.css styles the bare `nav` element as the sticky site nav, so a
   breadcrumb <nav> has to undo that: background, padding, sticky, border. */
.library-breadcrumb {
    align-items: center;
    background: none;
    padding: 0;
    position: static;
    border: 0;
    box-shadow: none;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    color: var(--dark-gray);
}
.library-breadcrumb a { color: #4b6140; text-decoration: none; }
/* Sage, the library's page accent, in its darker ink: sage itself is 3.4:1
   as text, too faint for a line people navigate by (26 September 2026). */
.library-breadcrumb { color: #4b6140; }
/* The topic in a guide's breadcrumb is plain text in its own color, with its
   icon beside it, not a pill. */
.library-crumb-topic { display: inline-flex; align-items: center; gap: 6px; color: var(--lib-ink) !important; }
.library-crumb-topic .hs-icon { color: var(--lib); }
.library-breadcrumb a:hover { text-decoration: underline; }

/* ── Topic colors ──────────────────────────────────────────────────────
   Each shelf and topic gets a brand color from data/library.yaml. --lib is the
   token itself, for borders and icons. --lib-ink is a darker shade for small
   text, because coral (2.6:1) and sage (3.4:1) fail contrast as text on white.
   --lib-tint is the pale ground behind an icon or a chip. */
.lib-c-plum  { --lib: var(--plum);  --lib-ink: var(--plum); --lib-tint: #f5ebf1; }
.lib-c-coral { --lib: var(--coral); --lib-ink: #a3401a;     --lib-tint: #fff0e7; }
.lib-c-sage  { --lib: var(--sage);  --lib-ink: #4b6140;     --lib-tint: #eef3e9; }

.hs-icon { display: block; flex-shrink: 0; }
.library-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: var(--lib-tint);
    color: var(--lib);
    flex-shrink: 0;
}
.library-icon-badge--lg { width: 64px; height: 64px; margin-bottom: 20px; }

/* ── Illustrations ─────────────────────────────────────────────────────
   The SVGs in assets/illustrations/library/ carry class names, not colors, so
   they draw in the brand tokens and follow a palette change. The style, chosen
   with Candice on 25 September 2026: plum outlines with round joins, washes
   of coral, sage and plum (about 40% of the token; plum and coral are mixed
   into warm peach, not white, which kept plum from turning lavender), one
   small solid accent per drawing, and a peach ground shadow. The hex before
   each color-mix() is the fallback for a browser without it.
   Sage leads (the library's accent), coral is the warm secondary, and plum
   is the outline; wp is kept but no drawing uses it now.
   ln outline    lw on white    lp on peach    wc/ws/wp coral, sage, plum wash
   sc/ss/sp small solid coral, sage, plum     gp peach ground     thin */
.lib-ill {
    --ill-wc: #fcc3a4; --ill-wc: color-mix(in srgb, var(--coral) 38%, var(--warm-peach));
    --ill-ws: #cad4bf; --ill-ws: color-mix(in srgb, var(--sage) 40%, white);
    --ill-wp: #c5a5b1; --ill-wp: color-mix(in srgb, var(--plum) 40%, var(--warm-peach));
    display: block;
    width: 100%;
    height: auto;
}
.lib-ill .ln, .lib-ill .lw, .lib-ill .lp,
.lib-ill .wc, .lib-ill .ws, .lib-ill .wp {
    stroke: var(--plum);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lib-ill .ln { fill: none; }
.lib-ill .lw { fill: var(--white); }
.lib-ill .lp { fill: var(--warm-peach); }
.lib-ill .wc { fill: var(--ill-wc); }
.lib-ill .ws { fill: var(--ill-ws); }
.lib-ill .wp { fill: var(--ill-wp); }
.lib-ill .sc { fill: var(--coral); }
.lib-ill .ss { fill: var(--sage); }
.lib-ill .sp { fill: var(--plum); }
.lib-ill .gp { fill: var(--warm-peach); }
.lib-ill .thin { stroke-width: 1.5; opacity: 0.6; }
/* On a peach band the ground shadow would vanish; darken it a touch there. */
.library-topic--alt .lib-ill .gp,
.library-hero .lib-ill .gp { fill: #f3dcc4; }

/* ── Topic chips (shelf tiles, shelf hero, guide breadcrumb) ──────────── */
.library-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.library-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 11px;
    border-radius: 9999px;
    background: var(--white);
    border: 1px solid #e8dfd7;
    color: var(--plum);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color 0.2s;
}
.library-chip .hs-icon { color: var(--lib); }
.library-chip:hover { border-color: var(--lib); }
.library-chips--jump { margin-top: 28px; }
.library-breadcrumb .library-chip { font-size: 13px; padding: 4px 12px 4px 9px; }

/* ── Library home: collections of shelves ──────────────────────────────── */
.library-collection { padding: 72px 40px 80px; }
.library-collection--alt { background: var(--warm-peach); }
.library-collection-inner { max-width: 1100px; margin: 0 auto; }
.library-collection-head { margin-bottom: 36px; }
.library-collection-head .section-label { margin-bottom: 12px; }
.library-collection-head h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--plum);
    line-height: 1.25;
    margin-bottom: 10px;
}
.library-collection-head p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--dark-gray);
    max-width: 720px;
}
.library-shelf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

/* A shelf tile: the illustration on the shelf's tint, then the words. The
   title link is stretched over the whole tile, and the sample guide links sit
   above it, so every part is clickable without nesting links. */
.library-shelf-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-top: 4px solid var(--lib);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.library-shelf-tile:not(.library-shelf-tile--soon):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.library-shelf-art {
    background: var(--warm-peach);
    padding: 28px 36px 8px;
}
.library-shelf-art svg { max-width: 340px; margin: 0 auto; }
/* On the peach collection band, the art panel goes white so it stays a panel. */
.library-collection--alt .library-shelf-art { background: var(--white); border-bottom: 1px solid var(--border); }
.library-shelf-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 28px 32px 30px;
}
.library-shelf-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lib-ink);
    margin-bottom: 10px;
}
.library-shelf-count .hs-icon { color: var(--lib); }
.library-shelf-tile h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--plum);
    line-height: 1.25;
    margin-bottom: 12px;
}
.library-shelf-tile h3 a { color: inherit; text-decoration: none; }
.library-stretched::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.library-shelf-tile p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark-gray);
    margin-bottom: 20px;
}
.library-shelf-samples {
    list-style: none;
    margin-bottom: 24px;
    border-top: 1px solid var(--border);
}
.library-shelf-samples li { border-bottom: 1px solid var(--border); }
.library-shelf-samples a {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    padding: 11px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--plum);
    text-decoration: none;
}
.library-shelf-samples a::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 9999px;
    background: var(--lib);
}
.library-shelf-samples a:hover { text-decoration: underline; }
/* Questions people ask most, on the library home: the shelf tiles' list of
   sample guides, on its own and held to a reading measure. */
.library-questions { max-width: 720px; margin-bottom: 0; }
.library-questions a { font-size: 18px; padding: 14px 0; }
.library-shelf-more {
    margin-top: auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--lib-ink);
}
.library-shelf-tile--soon { background: #fdfbf9; box-shadow: none; border: 1px dashed #d9cfc6; border-top: 4px solid var(--lib); }
.library-shelf-tile--soon .library-shelf-art svg { opacity: 0.75; }
.library-soon-pill {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lib-ink);
    background: var(--lib-tint);
    border-radius: 9999px;
    padding: 5px 12px;
    margin-bottom: 12px;
}

/* ── Shelf page: one band per topic, alternating white and peach ───────── */
.library-topic { padding: 64px 40px 72px; scroll-margin-top: 80px; }
.library-topic--alt { background: var(--warm-peach); }
/* A tint on peach all but vanishes, coral especially. White instead. */
.library-topic--alt .library-icon-badge { background: var(--white); }
.library-topic-inner { max-width: 1100px; margin: 0 auto; }
.library-topic-head {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
}
.library-topic-art { width: 120px; flex-shrink: 0; }
.library-topic-head h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--plum);
    line-height: 1.2;
}
.library-topic-count {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lib-ink);
    margin-top: 8px;
}

/* ── Guide tiles ───────────────────────────────────────────────────────── */
.library-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}
.library-tile {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-top: 4px solid var(--lib);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.library-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.11);
}
.library-tile:focus-visible,
.library-chip:focus-visible,
.library-stretched:focus-visible,
.library-shelf-samples a:focus-visible {
    outline: 3px solid var(--plum);
    outline-offset: 3px;
}
/* The guide's own pull quote under an oversized opening quote mark in the
   topic color. Regular weight in dark gray, so the plum bold title below stays
   the one thing that leads the tile; set bold plum, the two competed. */
.library-tile-quote {
    position: relative;
    padding: 36px 24px 18px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--dark-gray);
}
.library-tile-quote::before {
    content: '\201C';
    position: absolute;
    top: 2px;
    left: 20px;
    font-size: 52px;
    line-height: 1;
    font-weight: 800;
    color: var(--lib);
}
.library-tile-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 18px 24px 22px;
}
.library-tile-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--plum);
    line-height: 1.35;
    margin-bottom: 8px;
}
.library-tile-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--dark-gray);
    margin-bottom: 18px;
    flex-grow: 1;
}
.library-tile-go {
    margin-top: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--lib-ink);
}
.library-tile:hover .library-tile-go { text-decoration: underline; }

/* ── Guide: pull quote ─────────────────────────────────────────────────── */
/* One per guide. Pill accent bar in the library's sage accent, per the blog
   rule that vertical bars are ::before pseudo-elements with rounded caps,
   never border-left. */
.library-guide blockquote {
    position: relative;
    margin: 40px 0;
    padding: 4px 0 4px 28px;
}
.library-guide blockquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 9999px;
    background-color: var(--accent, var(--sage));
}
.library-guide blockquote p {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--plum);
    margin-bottom: 0;
}

/* ── Guide: "Where to get help" panel ──────────────────────────────────── */
/* Quiet on purpose: a white box with a hairline border, not a peach callout,
   so it reads as reference rather than emphasis. */
.library-help {
    border: 1px solid #e6dcd3;
    border-radius: 8px;
    padding: 28px 32px 8px;
    margin: 48px 0 32px;
    background: #fdfaf7;
}
.library-guide .library-help h2 { margin-top: 0; font-size: 22px; }
.library-guide .library-help > ul {
    font-size: 16px;
    line-height: 1.7;
    padding-left: 20px;
    margin-bottom: 20px;
    color: var(--dark-gray);
}
.library-guide .library-help li { margin-bottom: 10px; }
.library-guide .library-help p { font-size: 16px; }

/* The general information disclaimer after the panel reads as fine print. */
.library-guide .library-disclaimer p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b6b;
}

.library-guide a { color: var(--plum); }

/* ── Guide: related guides, as tiles ───────────────────────────────────── */
.library-related {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}
.library-guide .library-related h2 { margin-top: 0; font-size: 22px; }
.library-tile-grid--related { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.library-guide .library-tile .library-tile-desc { font-size: 14px; margin-bottom: 16px; font-weight: 400; color: var(--dark-gray); line-height: 1.6; }
.library-guide .library-tile .library-tile-quote { font-size: 15px; font-weight: 400; color: var(--dark-gray); margin: 0; line-height: 1.6; }
.library-guide .library-tile h3 { font-size: 17px; margin-top: 0; }
.library-guide a.library-tile { color: inherit; }

/* ── Editorial banner (hugo server only, never built) ──────────────────── */
.library-editorial-banner {
    background: #fff4c2;
    border-bottom: 2px solid #c9a400;
    color: #3d3200;
    padding: 16px 40px;
    font-size: 15px;
    line-height: 1.6;
}
.library-editorial-banner ul { margin: 4px 0 4px 20px; }
.library-editorial-banner p { margin-top: 6px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .library-hero--split .library-hero-inner:first-child { grid-template-columns: 1fr; gap: 28px; }
    .library-hero-art svg { margin: 0 auto; max-width: 360px; }
}
@media (max-width: 768px) {
    .library-hero { padding: 44px 24px 40px; }
    .library-hero h1 { font-size: 32px; }
    .library-collection { padding: 48px 24px 56px; }
    .library-collection-head h2 { font-size: 26px; }
    .library-shelf-grid { grid-template-columns: 1fr; gap: 24px; }
    .library-shelf-body { padding: 24px 22px 26px; }
    .library-shelf-art { padding: 20px 24px 4px; }
    .library-topic { padding: 44px 24px 52px; }
    .library-topic-head { gap: 16px; margin-bottom: 24px; }
    .library-topic-art { width: 92px; }
    .library-topic-head h2 { font-size: 24px; }
    .library-tile-grid { grid-template-columns: 1fr; gap: 20px; }
    .library-help { padding: 24px 20px 4px; }
    .library-editorial-banner { padding: 14px 24px; }
}
@media (max-width: 480px) {
    .library-hero h1 { font-size: 28px; }
    .library-hero-art svg { max-width: 280px; }
    .library-shelf-tile h3 { font-size: 23px; }
    .library-topic-art { width: 76px; }
    .library-icon-badge { width: 44px; height: 44px; }
    .library-guide blockquote p { font-size: 19px; }
}

/* ── Guide: citations and the Sources box ──────────────────────────────── */
/* The research pages' fine-print box, restyled for the library: numbered
   citations in the text, the sources behind a summary the reader can open. */
.library-guide sup.library-cite { font-size: 0.7em; line-height: 0; margin-left: 1px; }
.library-guide sup.library-cite a { color: var(--lib-ink, #4b6140); font-weight: 700; text-decoration: none; padding: 0 1px; }
.library-guide sup.library-cite a:hover { text-decoration: underline; }
.library-sources { background: #fafafa; border-radius: 8px; margin: 40px 0 0; }
.library-sources summary { cursor: pointer; list-style: none; padding: 22px 32px; }
.library-sources summary::-webkit-details-marker { display: none; }
.library-sources-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.library-sources-title { font-size: 19px; font-weight: 800; color: var(--plum); }
.library-sources-hint { font-size: 13px; font-weight: 800; color: #4b6140; text-transform: uppercase; letter-spacing: .06em; }
.library-sources-hint .close-hint { display: none; }
.library-sources[open] .library-sources-hint .open-hint { display: none; }
.library-sources[open] .library-sources-hint .close-hint { display: inline; }
.library-sources-intro { display: block; font-size: 15px; line-height: 1.7; color: var(--dark-gray); margin-top: 8px; }
.library-guide .library-sources-list { margin: 0; padding: 0 32px 24px 56px; font-size: 15px; line-height: 1.65; color: var(--dark-gray); }
.library-guide .library-sources-list li { margin-bottom: 8px; scroll-margin-top: 100px; overflow-wrap: anywhere; }
.library-guide .library-sources-list li:target { background: #eef3e9; border-radius: 4px; }
.library-guide .library-reviewed { margin-top: 32px; font-size: 14px; color: #6b6b6b; }
@media (max-width: 768px) {
    .library-sources summary { padding: 18px 20px; }
    .library-guide .library-sources-list { padding: 0 20px 20px 40px; }
}