/* The content engine: the hub at /guides, every guide under it, and the niche
   how-to at /invoice-template/<slug>/how-to.

   One stylesheet for all three, the way invoice-template.css serves the matrix
   and invoice-generator.css serves its page.

   The hero, the badge and the glow are reproduced from invoice-template.css
   rather than referenced, which is the convention that file states for itself:
   each public page family owns its own stylesheet and the shared surface is
   kept in step by having the same values, not by cross-linking. Same figures
   here, so the five public families read as one site. */

/* ---- Hero ---- */
.tpl-hero {
    padding: 2.5rem 0 2.75rem;
    background: #070b1e;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tpl-hero-glow {
    position: absolute;
    top: -140px; left: 50%; transform: translateX(-50%);
    width: 900px; height: 560px;
    background: radial-gradient(ellipse, rgba(37,99,235,.20) 0%, rgba(124,58,237,.11) 45%, transparent 70%);
    pointer-events: none;
}
.tpl-hero .container { position: relative; }
.tpl-badge {
    display: inline-block;
    background: rgba(74,222,128,.10);
    color: #86efac;
    border: 1px solid rgba(134,239,172,.28);
    border-radius: 999px;
    padding: .3rem .875rem;
    font-size: .8125rem;
    font-weight: 500;
}
.tpl-hero h1 {
    font-size: clamp(1.875rem, 4.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin: 1rem 0 .75rem;
    color: #fff;
}
.tpl-hero .lead {
    font-size: 1.0625rem;
    color: rgba(255,255,255,.65);
    /* The matrix's own figure, because these pages now read at the matrix's own
       column — see the width note below. The intro is a centred paragraph over
       a wider body, so it is narrower than the column on purpose; what it must
       not be is narrower than the column *and* keyed off a number the column no
       longer uses, which is what 35rem became the moment the article widened. */
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.7;
}
.tpl-hero-cta { margin: 1.5rem 0 0; }
/* The heavier glow the home hero and the matrix's hero both use on #070b1e —
   the niche how-to loads this stylesheet and not invoice-template.css, so the
   figures are repeated here rather than inherited. */
.tpl-hero-cta .btn-brand {
    box-shadow: 0 4px 20px rgba(37, 99, 235, .45);
}
.tpl-hero-cta .btn-brand:hover {
    box-shadow: 0 8px 32px rgba(37, 99, 235, .6);
}

/* ---- Breadcrumbs, in the hero ----
   On the dark surface, unlike the matrix's, because a prose page has no
   document under the fold to break the column and the trail reads better
   above the H1 than orphaned on white. */
.guide-crumbs {
    font-size: .8125rem;
    color: rgba(255,255,255,.55);
    margin-bottom: .5rem;
}
/* inline-block with vertical padding rather than a bare inline link: at 13px
   these are barely two lines of text tall as tap targets, and this trail is
   the only way back to the hub on a phone. */
.guide-crumbs a {
    display: inline-block;
    padding: .35rem 0;
    color: rgba(255,255,255,.55);
    text-decoration: none;
}
.guide-crumbs .sep { padding: 0 .35rem; color: rgba(255,255,255,.3); }
/* The last crumb is where the reader already is, so it is text. It still has to
   read as part of the trail rather than as a heading above it. */
.guide-crumbs [aria-current="page"] { color: rgba(255,255,255,.75); }
.guide-crumbs a:hover { color: #fff; text-decoration: underline; }
.guide-crumbs a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---- The page surface ----
   Everything below the hero sits on the site's muted grey, not on white. The
   colour is `.section-muted` in public.css, the same #f6f8fa the generator
   floats its document on and the matrix its invoice — these pages were the only
   public family rendering on bare white, which is what made them read as a
   different site.

   The reading column is then a white sheet on that grey. Same three values the
   matrix's `.tpl-panel` uses, repeated rather than referenced, because each
   public family owns its own stylesheet — the convention invoice-template.css
   states for the hero it reproduces. */
.guide-surface { padding-bottom: 1px; } /* contains the last child's margin */
.guide-sheet {
    background: #fff;
    border: 1px solid #e9ecf0;
    border-radius: 10px;
    padding: 2rem 2.25rem;
}
/* The sheet's own padding is the top of the page's content, so the first block
   in it must not add to it: the heading rule below opens with 2.25rem of
   margin, and an article that begins with a heading — most of them do — started
   with 4rem of empty white the reader has to scroll past. Same for the last
   child against the bottom padding. Written as `> :first-child` rather than per
   block type, so a block added later is covered without being remembered. */
.guide-sheet > :first-child,
.guide-prose > :first-child { margin-top: 0; }
.guide-sheet > :last-child,
.guide-prose > :last-child { margin-bottom: 0; }

/* ---- Headings are the sheet's, not the prose's ----
   The FAQ's "Common questions" is written by `guide/page` and `howTo` as a
   bare `<h2>` *outside* `.guide-prose`, so a rule scoped to the prose left it
   on the UA's own 2em bold: one heading on the page a third larger and heavier
   than every other, in a different colour. Scoping to the sheet is what makes
   the article's headings one set however the markup around them is arranged;
   the hub's cluster headings sit outside the sheet and keep `.guide-cluster h2`.
   The link colour below stays on `.guide-prose` on purpose — see
   Tests\Unit\GuideStylesheetTest, which reads that selector by name. */
.guide-sheet h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: #0f172a;
    margin: 2.25rem 0 1rem;
    letter-spacing: -.01em;
}
.guide-sheet h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #0f172a;
    margin: 1.75rem 0 .6rem;
}

/* ---- Width lives on the page frame, not on a list of elements ----
   One value, set once on the container, and nothing inside is capped at all.

   The first attempt capped the elements instead — `.guide-prose`, `.guide-faq`,
   `.guide-reviewed` — and the FAQ's own `<h2>` was not on that list, so it
   stood 79px left of everything else. That is the flaw in the approach rather
   than a missing entry: every element added later has to be remembered, and the
   one that is forgotten sticks out on a page that otherwise looks finished.
   With the width on the frame, nothing can stick out, because there is nothing
   left to forget. (That same `<h2>` was still on the UA's own type scale for
   the same reason — see the heading rule above, which is scoped to the sheet
   rather than to the prose so that there is no list to be left off.)

   **52rem — the matrix's own column**, and one number for the whole family:
   the hub, the guide and the niche how-to. It was two, an article at 40.5rem
   for the reading measure and a hub at 52rem, and the effect was that a reader
   arriving from `/invoice-template/<slug>` met a column 184px narrower with the
   same header and footer around it — the guide read as a different site's page
   embedded in this one. A measure of 65-75 characters is the better rule in
   the abstract; sharing an edge with every other public page is the better rule
   here, and it is the one the legal pages (760px of prose) already follow. */
.guide-body { padding: 2rem 0 3.5rem; }
.guide-body .container { max-width: 52rem; }

.guide-prose { color: #334155; line-height: 1.75; }
.guide-prose p { margin: 0 0 1.15rem; }
/* Ink and underlined, not brand — `layout/legal` is the site's only other body
   of prose with links in it and this is its rule (#1a1d21, hover #374151). A
   brand-blue link is what the site uses for a *control* (`.tpl-howto-link`, the
   nav): colouring a sentence's third word the same as a button asks the reader
   to tell two things apart by nothing. The underline is what marks the link, so
   it is present at rest rather than on hover — with the colour carrying no
   signal any more, hover-only underlining would leave the link invisible until
   the pointer is already on it, and invisible to a reader who has no pointer.

   `:not(.btn-brand)` is load-bearing, not tidiness, and it outlives the colour
   change. The cta block renders a `.btn-brand` inside this same prose wrapper,
   and `.guide-prose a` (0-1-1) beats `.btn-brand` (0-1-0) — so without the
   exclusion the page's one conversion control takes this rule's colour and
   underline over its own gradient. It shipped once as brand-on-brand, an
   invisible label on a blue rectangle; ink-on-brand is legible but is still a
   button wearing a link's clothes. Tests\Unit\GuideStylesheetTest holds it. */
.guide-prose a:not(.btn-brand) {
    color: #1a1d21;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.guide-prose a:not(.btn-brand):hover {
    color: #374151;
    text-decoration-thickness: 2px;
}
/* Every interactive class in this family declares its own focus ring, the way
   every one in invoice-template.css does. The layout resets nothing, so a class
   without this falls back to the browser's default outline — which is not the
   same ring the rest of the site draws, and on the dark hero is nearly
   invisible. Same 2px brand outline throughout. */
.guide-prose a:not(.btn-brand):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

.guide-list { margin: 0 0 1.35rem; padding-left: 1.25rem; }
.guide-list li { margin: 0 0 .5rem; }

/* A step is a numbered claim with its own reasoning under it, so the number
   carries weight the browser's default marker does not give it. */
.guide-steps { margin: 0 0 1.5rem; padding-left: 1.35rem; }
.guide-steps > li { margin: 0 0 1.4rem; }
.guide-steps .guide-step-title { margin: 0 0 .35rem; }
.guide-steps p { margin: 0; }

/* ---- Callout ----
   A figure callout is the only thing on the page with a review date behind it,
   so it is the only one that changes colour: the reader should be able to see
   which sentence is the one that can go out of date. */
.guide-callout {
    margin: 0 0 1.5rem;
    padding: .95rem 1.15rem;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    border-radius: 0 6px 6px 0;
}
.guide-callout p { margin: 0; }
.guide-callout-figure {
    background: rgba(37,99,235,.05);
    border-left-color: var(--brand);
}

/* ---- FAQ ---- */
/* margin-block, not the shorthand: the shorthand would reset the auto side
   margins the measure rule above sets, which is the same collision that put
   the hub's list flush against its sheet. */
.guide-faq { margin-block: 0 1rem; }
.guide-faq dt {
    font-weight: 600;
    color: #0f172a;
    margin: 1.35rem 0 .4rem;
}
.guide-faq dd {
    margin: 0;
    color: #475569;
    line-height: 1.7;
}

.guide-reviewed {
    margin-block: 2rem 0;
    font-size: .8125rem;
    color: #6b7280;
}

/* ---- Onward links ---- */
/* Centred, like the matrix's `.tpl-cta`. It sits inside the prose rather than
   in a section of its own, which is why it was left ranged left — but a button
   is not a paragraph, and on a 52rem column a lone control on the left margin
   reads as the start of another sentence rather than as the page's one action. */
.guide-cta { margin: 2rem 0 2.5rem; text-align: center; }
.guide-related { margin: 0; padding: 0; list-style: none; }
.guide-related li { margin: 0 0 .55rem; }
/* Sits on the grey, outside the sheet, so it needs its own spacing above. */
.guide-related-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f172a;
    margin: 2rem 0 .9rem;
}

/* ---- Onward links, as cards ----
   Four bare blue links under a heading read as an unstyled list, which is what
   they were. The matrix sends a reader on with `.tpl-cards` — a grid of white
   panels with a border and a hover — and this is the same component with the
   same values, so the two families hand a reader onward the same way. A card is
   also a tap target the size of the card rather than of the words in it. */
.guide-related {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .875rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* The grid stretches the <li>; without this the <a> is only as tall as its own
   text and a row of two-line and one-line titles has two bottom edges. */
.guide-related li { display: flex; margin: 0; }
.guide-related a {
    display: block;
    width: 100%;
    padding: .95rem 1.1rem;
    border: 1px solid #e9ecf0;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.45;
    text-decoration: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.guide-related a:hover {
    border-color: #c9d3e0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
}
.guide-related a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---- The hub index ---- */
.guide-index { margin: 0; padding: 0; list-style: none; }
.guide-index li {
    padding: 1.1rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.guide-index li:last-child { border-bottom: 0; }
/* The hub is a list of links and nothing else, so this is the one control on
   the page. block rather than inline-block, with vertical padding: the tappable
   area is then the full width of the row and comfortably past 44px tall, rather
   than the width of whatever the title happens to be. */
.guide-index-link {
    display: block;
    padding: .35rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    transition: color .15s ease-in-out;
}
/* Underline rather than a shift to brand. It was the one blue left in a body of
   text after the prose links became ink, and a row that is already ink at rest
   turning blue under the pointer made hovering the hub read as a different
   interaction from hovering a link in a guide. */
.guide-index-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide-index-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 3px;
}
.guide-index-desc {
    display: block;
    margin-top: .3rem;
    color: #6b7280;
    font-size: .9375rem;
    line-height: 1.6;
}

/* The block type that cannot be produced by the factory. Visible on purpose:
   silence is what this whole family's tests exist to prevent. */
.guide-unknown-block { color: #b91c1c; font-family: monospace; }

/* ---- The hub's clusters ----
   A reader looking for "how do I charge a late fee" and one looking for "how
   long must I keep invoices" are not browsing the same list, and at fifty files
   one alphabetical column makes both read the whole thing. */
.guide-cluster { margin: 0 0 2.5rem; }
.guide-cluster h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 .35rem;
    letter-spacing: -.01em;
}
.guide-cluster-blurb {
    margin: 0 0 .75rem;
    color: #6b7280;
    font-size: .9375rem;
}

/* Two classes in this file animate, and invoice-template.css honours the
   preference for its own one. A reader who has asked the system for less motion
   gets the same colours and the same borders, arriving at once. */
@media (prefers-reduced-motion: reduce) {
    .guide-related a,
    .guide-index-link { transition: none; }
}

/* ---- Narrow screens ----
   The sheet's 2.25rem of side padding is 6% of a 1440px column and 19% of a
   375px one: at phone width it is the widest thing on the page and the prose it
   was drawn for is the narrowest. The container keeps its own .75rem, so the
   text still does not touch the screen edge. */
@media (max-width: 560px) {
    .guide-sheet { padding: 1.25rem 1.15rem; }
    .guide-body { padding: 1.25rem 0 2.5rem; }
}