/* The privacy policy, the terms, and the how-to. Same studio palette as
   404.css, because all of them are pages that are not an invitation: reading
   them, or failing to find an invitation, should not look like being handed a
   card.

   Literals, not tokens, for the same reason as 404.css: there is no
   [data-theme] block and no record to read a theme from.

   Kept in shared/ and linked as /shared/legal.css so all three pages can reach
   it from their own directories. The help page is not a legal document, but it
   is the same shape of thing -- a long single column of prose with a footer nav
   and a link back -- so it shares the stylesheet rather than forking one.

   Nothing here is specific to a legal document. If a rule reads as though it
   were, that is a sign it belongs somewhere else. */

/* Without this, .wrap is width:100% *plus* its own horizontal padding, and the
   document ends up exactly one padding-width wider than the viewport at every
   size. The other two stylesheets here already reset this. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Type scale. A 1.25 modular ratio off a 1rem body -- the ratio that keeps a
       four-step jump legible on a phone without the display sizes running away.

       rem rather than px, so a browser or OS font-size preference scales the
       whole page (WCAG 2.2 SC 1.4.4 Resize Text) and it still reflows at 320px
       (SC 1.4.10 Reflow). The px values these replaced are frozen at whatever the
       reader picked, which is what made the small sizes small.

       --text-xs is the floor at 13px and nothing is set below it. */
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.25rem;

    /* Leading. Body copy gets 1.6 and headings tighten. Controls get 1.4 rather
       than inheriting 1.6, because 1.6 is body-copy leading and these are
       single-line labels where it just makes the control taller. */
    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-control: 1.4;
    --leading-body: 1.6;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #f7f5f1;
    color: #23201c;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
}

.wrap {
    width: 100%;
    max-width: 65ch;
    margin: 0 auto;
    /* The shell padding, the same value as .shell in build.css and manage.css.
     * This was 56px 24px 72px, which put the "Floryn" eyebrow and the legal
     * footer nav -- the same two things the builder puts in .brand and .foot --
     * at a different distance from the edge of the screen on every page. The
     * width stays 65ch because a legal document wants a reading measure and an
     * app page does not; the space around it does not. */
    padding: 30px 18px 40px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7d6440;
}

.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

h1 {
    margin: 0 0 6px;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: var(--text-3xl);
    font-weight: 500;
    line-height: 1.2;
    text-wrap: balance;
}

.updated {
    margin: 0 0 40px;
    font-size: var(--text-xs);
    color: #6f6a62;
}

h2 {
    margin: 40px 0 12px;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: 1.35;
    text-wrap: balance;
}

h3 {
    margin: 26px 0 8px;
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.4;
}

p,
li {
    margin: 0 0 14px;
    font-size: var(--text-sm);
    color: #3d3831;
    text-wrap: pretty;
}

ul,
ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

li {
    margin-bottom: 8px;
}

a {
    color: #7d6440;
    text-underline-offset: 2px;
}

a:hover {
    color: #5f4c30;
}

a:focus-visible {
    outline: 2px solid #7d6440;
    outline-offset: 3px;
    border-radius: 2px;
}

strong {
    font-weight: 500;
    color: #23201c;
}

/* A definition table is the only honest way to show what is actually stored:
   a list of field names with a reason each beats prose, because a reader can
   check it against the record they created. */
.fields {
    width: 100%;
    margin: 0 0 18px;
    border-collapse: collapse;
    font-size: var(--text-sm);
    /* fixed layout, so the table is sized by its container instead of by the
       longest unbreakable cell. A long key such as floryn:guest:<slug> would
       otherwise set a min-width and push the whole document sideways, not just
       the table. */
    table-layout: fixed;
}

.fields caption {
    margin-bottom: 10px;
    font-size: var(--text-xs);
    color: #6f6a62;
    text-align: left;
}

.fields th,
.fields td {
    padding: 9px 12px 9px 0;
    border-bottom: 1px solid #e6e0d5;
    text-align: left;
    vertical-align: top;
}

.fields th {
    width: 30%;
    font-weight: 500;
    color: #23201c;
    /* No nowrap. The keys are the whole point of the table and several of them
       are longer than half a phone screen, so they have to wrap. */
    overflow-wrap: anywhere;
}

.fields td {
    color: #3d3831;
    overflow-wrap: anywhere;
}

.fields td code {
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: var(--text-xs);
    color: #23201c;
}

.note {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #fffdfb;
    border: 1px solid #e6e0d5;
    border-left: 3px solid #7d6440;
    border-radius: 4px;
    font-size: var(--text-sm);
    color: #3d3831;
}

.note p:last-child {
    margin-bottom: 0;
}

/* A contents list at the top of the how-to. This exists for the reader first --
   the page is a walkthrough in six parts, and being able to see the shape of it
   before committing to it is the difference between useful and a wall. The
   second reason is that a heading outline is what a search engine reads to work
   out what a page is about, and a visible table of contents is that outline,
   drawn.

   Deliberately not <details>: this is not a disclosure, and on a page this
   length everything is meant to be visible on arrival. */
.toc {
    margin: 28px 0 8px;
    padding: 16px 18px;
    background: #fffdfb;
    border: 1px solid #e6e0d5;
    border-radius: 4px;
}

.toc-title {
    margin: 0 0 8px;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7d6440;
}

.toc ol {
    margin: 0;
    padding-left: 20px;
}

.toc li {
    margin-bottom: 4px;
    font-size: var(--text-sm);
}

.toc li:last-child {
    margin-bottom: 0;
}

/* The steps in each walkthrough section. The default <ol> marker is a small
   gray digit that sits well below the text baseline and reads as untidy next to
   15px body copy, so the counter is rendered as a small gold one instead.

   The numbers are CSS-generated, which means they are decoration rather than
   content: the numbering that matters for anyone reading it linearly is the "1."
   in each <h2>, which is real text and is in the outline. The two are kept
   consistent by hand and the <ol> is still a real list, so the count is correct
   for a screen reader either way. */
.steps {
    counter-reset: step;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.steps li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 34px;
    counter-increment: step;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    top: 1px;
    left: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 500;
    color: #7d6440;
    background: #f7f5f1;
    border: 1px solid #e6e0d5;
    border-radius: 50%;
}

.steps li:last-child {
    margin-bottom: 0;
}

p code,
li code,
td code,
th code {
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: var(--text-xs);
    color: #23201c;
    /* A slug like floryn:guest:<slug> has no spaces to break on, so it needs
       anywhere rather than the default break-word, which only breaks at a fit
       point and would let it push the column sideways. */
    overflow-wrap: anywhere;
}

/* No link back to the site root inside the legal nav: the root is the builder
   and it sits behind the development password, so it would drop a reader
   straight onto a login prompt. 404.html declined the same link for the same
   reason. The other three pages do offer the trip back, but as a quiet
   .back-link sitting above this nav rather than inside it, which is what a
   reader who arrived to do something wants. */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 52px;
    padding-top: 26px;
    border-top: 1px solid #e6e0d5;
    font-size: var(--text-xs);
}

.footer-nav a {
    color: #6f6a62;
}

.footer-nav a:hover {
    color: #7d6440;
}

/* The separator is aria-hidden decoration, so it is exempt from contrast by
   WCAG, but it is still a text node in the accessibility tree on some readers
   and a 1.97:1 dot reads as a smudge rather than a separator. Same muted tone
   as the links, which costs nothing. */
.footer-nav .sep {
    color: #6f6a62;
}

/* Above the legal nav, not inside it and not below it. It is a different kind
   of link: those two are documents, this one is a return trip to the tool, and
   the reader who has scrolled to the bottom of a document to find their answer
   is looking for a way out rather than for more document. Below the nav it was
   the last thing in a row of links that all go deeper, which is the opposite
   of what the arrow promises.

   The left arrow is aria-hidden inside the link so the accessible name is just
   "Back to the builder" rather than "leftwards arrow, back to the builder". */
.back-link {
    margin: 32px 0 0;
    font-size: var(--text-xs);
}

.back-link a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6f6a62;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.back-link a:hover {
    color: #7d6440;
    border-bottom-color: #7d6440;
}

.back-link a:focus-visible {
    outline: 2px solid #7d6440;
    outline-offset: 3px;
    border-radius: 2px;
}

@media (max-width: 560px) {
    /* The padding is not touched here, and used to be 40px 20px 56px. Nothing
     * about a narrower screen calls for a different gutter -- if the 18px was
     * too little at 320px it was too little on the builder too, and the builder
     * has never had a narrow-screen padding of its own. */

    h1 {
        font-size: var(--text-3xl);
    }

    /* Two columns of field names stop being readable well before this width. */
    .fields th,
    .fields td {
        display: block;
        width: auto;
        padding-right: 0;
        border-bottom: 0;
    }

    .fields tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #e6e0d5;
    }

    .fields td {
        padding-top: 2px;
    }
}