/* ==========================================================================
   memo-memo stylesheet

   One stylesheet for every page. There are no page stylesheets: pages are
   built from the shared components below.

   1. Tokens       every size, colour and gap, desktop then mobile
   2. Base         reset, type defaults
   3. Layout       page shell, sticky footer, header, footer, containers, band
   4. Components   logo, buttons, fields, forms, notice, popover, tabs,
                   table, cards, modal, toast, finger ...
   5. Patterns     how the components are arranged: home hero, memo link,
                   page header, account sections, text page
   6. Utilities

   To adjust the look, change the tokens in section 1. Desktop values are
   measured from the designs (drawn at 2x a 1280px page); the mobile block
   overrides the same names.
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
    color-scheme: only light; /* no automatic dark mode (also a meta tag on each page) */

    /* Colour */
    --c-yellow: #FFF200;
    --c-black: #000000;
    --c-white: #FFFFFF;
    --c-placeholder: #8C8C8C;      /* placeholder text */
    --c-placeholder-big: #BDBDBD;  /* placeholder in the big enter words box (design 15a) */
    --c-muted: #5A5A5A;            /* secondary text, e.g. memo status */
    --c-faint: #AAAAAA;            /* the "memo-memo.co/" before a slug */
    --c-band: #F3F3F3;             /* grey band behind options and actions */
    --c-disabled: #D9D9D9;         /* disabled field background */
    --c-disabled-text: #878787;
    --c-quiet: #C5C5C5;            /* grey button, e.g. Report this memo */
    --c-quiet-text: #646464;
    --c-rule: var(--c-black);
    --c-danger: #E80000;
    --c-overlay: rgb(0 0 0 / 0.6); /* behind modals */
    --c-google: #34A853;
    --c-facebook: #1877F2;

    /* Type */
    --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fw-regular: 500;
    --fw-bold: 600;
    --lh-tight: 1.15;
    --lh-snug: 1.2;          /* the about popover */
    --lh-body: 1.45;

    --fs-hero: 36px;         /* "memo my" */
    --fs-picker: 32px;       /* the chosen type in the "memo my" picker */
    --fs-slug: 44px;         /* memo-memo.co/think-mountain-apple */
    --fs-slug-inline: 30px;  /* the same, at the top of a memo's public page */
    --fs-content-title: 46px; /* a memo's title or name, e.g. a profile */
    --fs-content: 24px;      /* a memo's text and links */
    --fs-destination: 37px;  /* the address a link memo goes to */
    --fs-meta: 18px;         /* Created by, and the memo's status */
    --fs-h1: 37px;           /* page titles: My Memos */
    --fs-h2: 28px;           /* modal titles, text page headings */
    --fs-h3: 25px;           /* section titles: Sign out */
    --fs-label: 28px;        /* form labels */
    --fs-field: 25px;        /* text inside fields */
    --fs-btn-lg: 28px;       /* large buttons */
    --fs-btn: 20px;          /* small buttons */
    --fs-btn-mini: 18px;     /* buttons inside notices and popovers */
    --fs-btn-quiet: 17px;    /* grey buttons */
    --fs-tab: 28px;          /* sign in / join tabs */
    --fs-type-title: 22px;   /* type names in the open picker */
    --fs-type-desc: 18px;    /* and their descriptions */
    --fs-body: 20px;         /* paragraphs, helper text, table rows, header link */
    --fs-notice: 18px;       /* black notice box and popover */
    --fs-about: 18px;        /* the about popover on the home page (design 1b) */
    --fs-about-btn: 23px;    /* its "Create a memo" button */
    --fs-small: 16px;        /* footer, legend */
    --fs-enter: 56px;        /* words typed in the enter words box (design 15) */
    --fs-btn-enter: 28px;    /* "enter mm/ words" in the header, and Go */

    /* Lines and corners */
    --stroke: 3px;           /* border on every field and button */
    --stroke-footer: 4px;    /* line above the footer */
    --rule-thin: 1px;
    --rule-thick: 3px;
    --radius-pill: 999px;    /* single-line fields and buttons */
    --radius-box: 20px;      /* textareas, boxes, cards, modals */
    --radius-panel: 30px;    /* the type picker's box */
    --radius-popover: 12px;
    --radius-checkbox: 4px;

    /* Controls */
    --field-h: 58px;
    --field-pad-x: 20px;
    --textarea-h: 200px;
    --field-short: 67%;      /* short fields, e.g. Link title (design 4) */
    --picker-h: 65px;        /* the "memo my" type picker */
    --picker-w: 320px;
    --picker-pad: 40px;      /* inside the open type picker's box */
    --type-icon: 28px;       /* icons beside each type */
    --type-pad-y: 18px;      /* above and below each type in the picker */
    --picker-panel-w: 1120px; /* the open type picker's box, a little wider than the content */
    --picker-gutter: var(--gutter); /* window edge to the open picker's box */
    --type-gap: 22px;        /* icon to text in the picker */
    --checkbox-size: 27px;
    --btn-lg-h: 58px;
    --btn-lg-w: 350px;       /* minimum width of large buttons */
    --btn-h: 44px;
    --btn-w: 156px;          /* minimum width of small buttons */
    --btn-pad-x: 32px;
    --btn-mini-h: 37px;
    --btn-quiet-h: 35px;     /* grey buttons */
    --btn-enter-h: 56px;     /* "enter mm/ words" in the header, and Go */
    --btn-enter-pad: calc(var(--btn-pad-x) * 1.5); /* either side of "enter mm/ words" */
    --enter-box-h: 120px;    /* the white enter words box */
    --enter-box-pad: 37px;   /* inside it, to Go */
    --enter-sigil-w: 111px;  /* the mm/ in it */
    --enter-sigil-inset: 67px; /* its left edge to the mm/ */
    --enter-sigil-gap: 43px; /* the mm/ to the words */
    --icon-btn: 36px;        /* icon buttons: copy (yellow circle), edit, delete */
    --icon-btn-glyph: 20px;  /* the icon inside the yellow circle */
    --icon-plain-glyph: 26px; /* edit and delete icons */
    --icon-btn-lg: 60px;     /* the copy button beside a memo's link (design 6) */
    --content-icon: 28px;    /* icons in a memo's content */
    --help-size: 24px;       /* the ? after an option */
    --avatar: 50px;
    --about-w: 375px;        /* the about popover */
    --about-pad-y: 40px;     /* inside it */
    --about-pad-x: 32px;
    --about-x: calc(-1 * var(--about-pad-x)); /* its left edge from its button's: the text lines up with the button */
    --about-gap: 12px;       /* its button to its arrow's tip */
    --about-arrow: 14px;     /* its arrow: this tall, twice as wide */
    --report-inset: var(--footer-gutter); /* window edge to Report this memo (design 6) */

    /* Spacing */
    --gap-field: 22px;       /* between form rows */
    --gap-label: 24px;       /* label to field, side by side */
    --gap-label-stacked: 10px; /* label to field, stacked (mobile) */
    --gap-actions: 56px;     /* last field to its button */
    --gap-buttons: 16px;     /* between buttons side by side */
    --gap-section: 48px;     /* between blocks on a page */
    --gap-inline: 12px;      /* icon to text */

    /* Page */
    --gutter: 80px;          /* page edge to content, header and footer */
    --content-w: 1070px;     /* widest content, e.g. My memos table */
    --form-w: 775px;         /* label + field forms */
    --options-w: 520px;      /* password and expiry options */
    --text-w: 640px;         /* reading width */
    --header-pad-top: 56px;
    --header-gap: 56px;      /* header to page content */
    --enter-gap: 32px;       /* header to the enter words box */
    --enter-logo-gap: 125px; /* the box to the logo below it */
    --band-pad-y: 64px;
    --band-tight-pad-top: 30px;    /* the band on a memo's public page (design 6) */
    --band-tight-pad-bottom: 30px;
    --band-gap: 116px;       /* content to the grey band */
    --footer-pad-y: 15px;
    --footer-gutter: 70px;
    --footer-link-gap: 0px;  /* between footer links when they're one above another */

    /* Graphics */
    --logo-w: 366px;         /* header logo */
    --logo-home-w: 679px;    /* home page logo with .co */
    --logo-band-w: 571px;    /* sign in / join page */
    --sigil-w: 83px;
    --finger-w: 175px;       /* home page finger */
    --finger-nudge: 20px;    /* moves the finger right of centre */
    /* Finger poking in from the side (text page). It sizes itself so its tip
       lines up with the aside; these two are in the drawing's 340 units */
    --finger-side-reach: 0.8; /* how far the fingertip reaches across the aside (1 = level with its left edge) */
    --finger-side-above: 20px; /* space above the drawing */
    --finger-side-below: 30px; /* drawing to the aside's title */
    --finger-side-tip: 45;   /* drawing's left side to the fingertip */
    --finger-side-crop: 90;  /* how much hides past the window's right edge (the drawing stops 47 short of its right side) */
    --hang-w: 126px;         /* 404 page finger, hanging from the top */
    --hang-length: 400px;    /* top of the window to its fingertip */
    --aside-w: 250px;        /* text page aside column */

    /* Motion: fades only, nothing moves. Set a duration to 0s to turn that effect off */
    --ease: cubic-bezier(0.2, 0, 0, 1); /* quick start, soft landing */
    --dur-hover: 150ms;      /* button colour changes */
    --dur-page: 220ms;       /* crossfade between pages */
    --dur-fade: 260ms;       /* content appearing: form, list, memo, modal */
    --dur-toast: 300ms;
}

@media (max-width: 720px) {
    :root {
        --fs-hero: 28px;
        --fs-picker: 28px;
        --fs-slug: 28px;
        --fs-slug-inline: 22px;
        --fs-content-title: 32px;
        --fs-content: 19px;
        --fs-destination: 26px;
        --fs-meta: 16px;
        --fs-h1: 37px;
        --fs-h2: 25px;
        --fs-h3: 22px;
        --fs-label: 28px;
        --fs-field: 22px;
        --fs-btn-lg: 24px;
        --fs-btn: 17px;
        --fs-btn-mini: 16px;
        --fs-tab: 24px;
        --fs-type-title: 19px;
        --fs-type-desc: 14px;
        --fs-body: 18px;
        --fs-notice: 17px;
        --fs-about: 18px;
        --fs-about-btn: 19px;
        --fs-small: 14px;
        --fs-enter: 40px;
        --fs-btn-enter: 24px;

        --stroke: 2.5px;
        --stroke-footer: 3.5px;

        --field-h: 50px;
        --field-pad-x: 16px;
        --textarea-h: 370px;
        --picker-h: 50px;
        --picker-w: 100%;
        --picker-pad: 12px;
        --type-icon: 22px;
        --type-pad-y: 14px;
        --picker-gutter: 15px;
        --type-gap: 16px;
        --checkbox-size: 24px;
        --btn-lg-h: 48px;
        --btn-lg-w: 100%;
        --btn-h: 38px;
        --btn-w: 120px;
        --btn-pad-x: 24px;
        --btn-mini-h: 34px;
        --btn-enter-h: 48px;
        --enter-box-h: 344px;
        --enter-box-pad: 28px;
        --avatar: 44px;
        --about-pad-y: 36px;
        --about-pad-x: 24px;
        --about-x: calc(var(--picker-gutter) - var(--gutter)); /* --picker-gutter in from the window, like the open type picker */
        --about-gap: 8px;
        --report-inset: var(--gutter); /* in line with the content */
        --icon-btn-lg: 44px;
        --content-icon: 24px;

        --gap-field: 24px;
        --gap-actions: 40px;
        --gap-section: 36px;

        --gutter: 30px;
        --header-pad-top: 20px;
        --header-gap: 32px;
        --enter-gap: 28px;
        --enter-logo-gap: 72px;
        --band-pad-y: 40px;
        --band-tight-pad-top: 36px;
        --band-tight-pad-bottom: 24px;
        --band-gap: 72px;
        --footer-gutter: 20px;
        --footer-link-gap: 3px;

        --logo-w: 257px;         /* compact logo */
        --logo-home-w: 314px;    /* compact logo */
        --logo-band-w: 257px;
        --sigil-w: 59px;
        --finger-w: 205px;
        --finger-nudge: 0px;
        --hang-w: 150px;
        --hang-length: 475px;
    }
}

/* Narrow desktop windows: "enter mm/ words" and Go at the small button's
   size, so the header button fits between "about mm/" and Sign in or Join,
   and a tighter box with smaller words */
@media (min-width: 721px) and (max-width: 900px) {
    :root {
        --fs-enter: 40px;
        --fs-btn-enter: var(--fs-btn);
        --btn-enter-h: var(--btn-h);
        --btn-enter-pad: var(--btn-pad-x);
        --enter-box-pad: 20px;
        --enter-sigil-w: 80px;
        --enter-sigil-inset: 28px;
        --enter-sigil-gap: 24px;
    }
}


/* 2. Base
   ========================================================================== */

/* Figtree, served from /fonts (no Google Fonts: visitors' addresses stay with
   us). Variable weight; the latin file is preloaded by every page. Licence:
   public/fonts/OFL.txt */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/fonts/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--c-white);
    color: var(--c-black);
    font-family: var(--font);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

h1, h2, h3, h4, p, ul, ol, figure {
    margin: 0;
}

h1, h2, h3, h4 {
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a {
    color: inherit;
}

img, svg {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: var(--stroke) solid var(--c-black);
    outline-offset: 3px;
}


/* 3. Layout
   ========================================================================== */

/* Sticky footer: the footer sits at the bottom of the window unless the
   content is taller, when it follows the content. */
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding-top: var(--header-gap);
}

/* Page content column. Flex so a .band at the end can grow down to the footer. */
.container {
    width: min(100% - 2 * var(--gutter), var(--content-w));
    margin-inline: auto;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.container > * {
    flex-shrink: 0;
}

/* The standard gap between a page's content and the footer, except where a
   grey band or the home finger is meant to meet the footer */
.container {
    padding-bottom: var(--gap-section);
}

.container:has(> .band:last-child, .form-options-section, .finger) {
    padding-bottom: 0;
}

.container--form { width: min(100% - 2 * var(--gutter), var(--form-w)); }
.container--text { width: min(100% - 2 * var(--gutter), var(--text-w)); }

/* Grey band, edge to edge. As the last thing on a page it grows to meet the footer. */
.band {
    background: var(--c-band);
    box-shadow: 0 0 0 100vmax var(--c-band);
    clip-path: inset(0 -100vmax);
    padding-block: var(--band-pad-y);
    margin-top: var(--band-gap);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-field);
    text-align: center;
}

/* A band with less space inside, top and bottom */
.band--tight {
    padding-block: var(--band-tight-pad-top) var(--band-tight-pad-bottom);
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-field);
    padding: var(--header-pad-top) var(--gutter) 0;
}

.header-logo {
    display: block;
    width: var(--logo-w);
    max-width: 100%;
}

.auth-section {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.auth-link {
    text-decoration: none;
    font-weight: var(--fw-bold);
}

/* Neither "Sign in or Join" nor the user shows until main.js knows who's signed
   in (body[data-signed-in]); then the right one fades in */
body:not([data-signed-in="false"]) .auth-link {
    display: none;
}

.auth-link,
.user-info {
    animation: fade var(--dur-fade) var(--ease) both;
}

.auth-link:hover,
.user-info:hover .user-greeting {
    text-decoration: underline;
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    text-decoration: none;
    font-weight: var(--fw-bold);
}

/* The sign in / join page: a yellow band with the logo, and the tabs on its lower edge */
.header--band {
    flex-direction: column;
    background: var(--c-yellow);
    border-bottom: var(--stroke) solid var(--c-black);
    padding-bottom: 0;
    gap: calc(var(--gap-section) * 1.5);
}

.header--band .header-logo {
    width: var(--logo-band-w);
}

/* Footer */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-field);
    padding: var(--footer-pad-y) var(--footer-gutter);
    background: var(--c-yellow);
    border-top: var(--stroke-footer) solid var(--c-black);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--footer-link-gap) 1.6em;
}

.footer a {
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--gap-field);
}

.sigil {
    width: var(--sigil-w);
    height: auto;
}

/* Mobile: the links one above another; the sigil above the copyright
   (designs 16 and 17) */
@media (max-width: 720px) {
    .footer {
        align-items: stretch;
    }

    .footer-links {
        flex-direction: column;
    }

    .footer-brand {
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--gap-inline);
    }
}


/* 4. Components
   ========================================================================== */

/* Logo ------------------------------------------------------------------- */

.logo {
    width: 100%;
    height: auto;
}

/* Avatar: photo if the user has one (e.g. Google), otherwise their initial */
.user-avatar {
    width: var(--avatar);
    height: var(--avatar);
    flex-shrink: 0;
    border-radius: 50%;
    border: var(--stroke) solid var(--c-black);
    background: var(--c-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Buttons ---------------------------------------------------------------
   .btn is the small button. Add .btn-lg (or the older .btn-mid) for the large
   one used on creation pages, .btn-mini inside notices and popovers.
   Colour: .btn-primary yellow, .btn-secondary black, .btn-danger red. */

.btn {
    /* inline-block, not flex, so text around a <span> keeps its spaces */
    display: inline-block;
    height: var(--btn-h);
    line-height: calc(var(--btn-h) - 2 * var(--stroke));
    min-width: var(--btn-w);
    padding: 0 var(--btn-pad-x);
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    color: var(--c-black);
    font-size: var(--fs-btn);
    font-weight: var(--fw-bold);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-hover), color var(--dur-hover), border-color var(--dur-hover);
}

.btn-lg,
.btn-mid {
    height: var(--btn-lg-h);
    line-height: calc(var(--btn-lg-h) - 2 * var(--stroke));
    min-width: var(--btn-lg-w);
    font-size: var(--fs-btn-lg);
}

.btn-mini,
.btn-sm {
    height: var(--btn-mini-h);
    line-height: calc(var(--btn-mini-h) - 2 * var(--stroke));
    min-width: 0;
    padding: 0 calc(var(--btn-pad-x) * 1.4);
    font-size: var(--fs-btn-mini);
}

.btn-full {
    width: 100%;
}

.btn-primary {
    background: var(--c-yellow);
}

.btn-primary:hover {
    background: var(--c-black);
    color: var(--c-white);
}

/* Grey, borderless and smaller, for actions that shouldn't draw the eye */
.btn-quiet {
    height: var(--btn-quiet-h);
    line-height: var(--btn-quiet-h);
    min-width: 0;
    border: none;
    background: var(--c-quiet);
    color: var(--c-quiet-text);
    font-size: var(--fs-btn-quiet);
}

.btn-quiet:hover {
    background: var(--c-black);
    color: var(--c-white);
}

.btn-secondary {
    background: var(--c-black);
    color: var(--c-white);
}

.btn-secondary:hover {
    background: var(--c-yellow);
    color: var(--c-black);
}

.btn-danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: var(--c-white);
}

.btn-danger:hover {
    background: var(--c-black);
    border-color: var(--c-black);
}

/* Sign in with Google / Facebook: white, with the provider's colour as the stroke */
.btn-social {
    background: var(--c-white);
}

.btn-google { border-color: var(--c-google); }
.btn-facebook { border-color: var(--c-facebook); }

.btn-social:hover {
    background: var(--c-band);
    color: var(--c-black);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon before the label. (No flex gap: it would also split text around a <span>.) */
.btn svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -0.15em;
    width: 1em;
    height: 1em;
    margin-right: var(--gap-inline);
}

/* Icons (public/images/ui-icons.svg and type-icons.svg) sit in the text */
.icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.22em;
}

/* Icon button: a yellow circle (copy), or .icon-btn--plain for a bare icon
   (edit, delete). Every one is the same size. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-btn);
    height: var(--icon-btn);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-black);
    cursor: pointer;
}

.icon-btn .icon {
    width: var(--icon-btn-glyph);
    height: var(--icon-btn-glyph);
}

.icon-btn:hover {
    background: var(--c-black);
    color: var(--c-yellow);
}

.icon-btn--lg {
    width: var(--icon-btn-lg);
    height: var(--icon-btn-lg);
    flex-shrink: 0;
    border: var(--stroke) solid var(--c-black);
}

.icon-btn--lg .icon {
    width: 50%;
    height: 50%;
}

.icon-btn--plain {
    background: none;
}

.icon-btn--plain .icon {
    width: var(--icon-plain-glyph);
    height: var(--icon-plain-glyph);
}

.icon-btn--plain:hover {
    background: var(--c-yellow);
    color: var(--c-black);
}

/* A button that looks like a link */
.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.back-link {
    text-decoration: none;
    font-weight: var(--fw-bold);
}

.back-link:hover {
    text-decoration: underline;
}

/* Fields ----------------------------------------------------------------
   One look for every input, select and textarea: black stroke, pill shape
   (textareas get the box radius). */

.form-input {
    width: 100%;
    min-width: 0;
    height: var(--field-h);
    padding: 0 var(--field-pad-x);
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    color: var(--c-black);
    font-size: var(--fs-field);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
}

.form-input::placeholder {
    color: var(--c-placeholder);
    opacity: 1;
}

.form-input:focus {
    outline: none;
    box-shadow: 0 0 0 var(--stroke) var(--c-yellow);
}

textarea.form-input {
    height: var(--textarea-h);
    padding-block: calc(var(--field-pad-x) * 0.7);
    border-radius: var(--radius-box);
    resize: vertical;
}

select.form-input {
    appearance: none;
    padding-right: calc(var(--field-pad-x) + 32px);
    background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--field-pad-x) center / 22px;
    cursor: pointer;
}

.form-input:disabled {
    background-color: var(--c-disabled);
    border-color: var(--c-disabled);
    color: var(--c-disabled-text);
    cursor: not-allowed;
}

.form-input:disabled::placeholder {
    color: var(--c-disabled-text);
}

/* Date and time pickers take what they need, not the full row */
.input-narrow {
    width: auto;
    justify-self: start;
}

.input-short {
    width: var(--field-short);
    justify-self: start;
}

@media (max-width: 720px) {
    .input-short {
        width: 100%;
    }
}

.form-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

.form-help,
.feature-note {
    font-size: var(--fs-body);
    color: var(--c-black);
}

.feature-note {
    color: var(--c-muted);
}

/* Checkbox: square, black stroke, tick when checked */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    cursor: pointer;
}

.checkbox-input {
    appearance: none;
    flex-shrink: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin: 0;
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-checkbox);
    background: var(--c-white) no-repeat center / 80%;
    cursor: pointer;
}

.checkbox-input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
}

.checkbox-input:disabled {
    background-color: var(--c-disabled);
    border-color: var(--c-disabled-text);
    cursor: not-allowed;
}

.checkbox-text {
    flex: 0 1 auto;
}

/* Forms -----------------------------------------------------------------
   Every form is one grid: labels in the first column, fields in the second,
   and an optional aside (the ? help button) in the third. Rows (.form-group)
   are subgrids, so labels line up down the whole form. On mobile the label
   sits above its field. */

.form-grid,
.form-main-section,
.auth-form form,
.account-form,
.password-form,
.form-options-section > .container {
    display: grid;
    /* The label gap is a track, not column-gap, so an empty aside column costs nothing */
    grid-template-columns:
        [label-start] max-content
        [label-end] var(--gap-label)
        [field-start] minmax(0, 1fr)
        [field-end aside-start] auto
        [aside-end];
    column-gap: 0;
    row-gap: var(--gap-field);
    align-items: center;
}

.form-group,
.form-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    row-gap: calc(var(--gap-field) / 2);
}

/* Anything in a form goes in the field column unless a rule below says otherwise.
   :where() keeps this from outranking those rules. */
:where(.form-group, .form-section, .form-grid, .form-main-section, .auth-form form, .account-form, .password-form) > * {
    grid-column: field;
}

.form-group > .form-label {
    grid-column: label;
}

/* A type's note above its form (e.g. Wi-Fi) runs the whole width of the form */
.form-main-section > .form-note {
    grid-column: 1 / -1;
}

.form-group > .help-icon-button,
.form-group > .icon-btn {
    grid-column: aside;
    margin-left: var(--gap-inline);
}

/* Buttons in a row keep their own width */
.form-group > .btn {
    justify-self: start;
}

/* A field with a button beside it, e.g. Link URL and "+ Add" (design 4);
   the button drops below on mobile */
.field-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--gap-inline);
}

.field-row > .form-input {
    flex: 1 1 60%;
}

.btn-add {
    height: var(--field-h);
    min-width: 0;
    line-height: calc(var(--field-h) - 2 * var(--stroke));
    font-size: var(--fs-field);
}

@media (max-width: 720px) {
    .field-row > .form-input {
        flex-basis: 100%;
    }
}

/* Rows added to a list so far (links, account details ...): the same
   labelled fields as the row being typed, still editable, each with a bin
   beside its last field. They sit on the form's grid like any other row. */
.added-items,
.added-item {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    row-gap: var(--gap-field);
}

.added-items:empty {
    display: none;
}

.form-section > .form-group,
.form-section > .section-divider {
    grid-column: 1 / -1;
}

/* A row with no label (a checkbox, a heading) spans label and field */
.form-group > .form-wide {
    grid-column: label / field;
}

/* Textarea labels line up with its first line, not its middle */
.form-group:has(> textarea) > .form-label {
    align-self: start;
    padding-top: calc(var(--field-pad-x) * 0.7);
}

/* The form's main button: centred on the whole form (labels and fields),
   with more space above */
.form-main-section > .btn-primary,
.auth-form form > .btn-primary,
.password-form > .btn-primary {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: calc(var(--gap-actions) - var(--gap-field));
}


@media (max-width: 720px) {
    .form-grid,
    .form-main-section,
    .auth-form form,
    .account-form,
    .password-form,
    .form-options-section > .container {
        grid-template-columns:
            [label-start field-start] minmax(0, 1fr)
            [label-end field-end aside-start] auto
            [aside-end];
        column-gap: 0;
    }

    .form-group {
        row-gap: var(--gap-label-stacked);
    }

    .form-group:has(> textarea) > .form-label {
        padding-top: 0;
    }
}

/* Password and expiry options: a grey band below the form, all the way to the footer */
.form-options-section {
    background: var(--c-band);
    box-shadow: 0 0 0 100vmax var(--c-band);
    clip-path: inset(0 -100vmax);
    padding-block: var(--band-pad-y);
    margin-top: var(--gap-section);
    flex-grow: 1;
}

.form-options-section > .container {
    width: min(100%, var(--options-w));
    flex: none;
}

/* Runs to the aside column so its ? lines up with the one after Expiry */
.form-options-section .form-group > .checkbox-label {
    grid-column: label / aside;
}

/* Signed out, the options are greyed: they need an account */
.options-locked .checkbox-label,
.options-locked .form-label {
    color: var(--c-disabled-text);
    cursor: default;
}

/* The ? after an option */
.help-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--help-size);
    height: var(--help-size);
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--c-black);
    color: var(--c-white);
    font-size: calc(var(--help-size) * 0.6);
    font-weight: var(--fw-bold);
    line-height: 1;
    cursor: pointer;
}

.checkbox-label .help-icon-button {
    margin-left: auto;
}

.help-icon-button[hidden] {
    display: none;
}

.form-title {
    font-size: var(--fs-h2);
    margin-bottom: var(--gap-section);
}

.form-intro {
    margin-bottom: var(--gap-field);
}

.form-aside {
    grid-column: 1 / -1;
    justify-self: center;
    font-size: var(--fs-body);
}

/* A rule across the whole form, e.g. above "Or  Sign in with Google" */
.form-rule {
    grid-column: 1 / -1;
    margin-block: calc(var(--gap-actions) - var(--gap-field)) calc(var(--gap-section) - var(--gap-field));
}

/* Sign in with Google fills the field column */
.form-group > .btn-social {
    justify-self: stretch;
    min-width: 0;
}

/* Rules between sections */
.section-divider {
    width: 100%;
    margin: 0;
    border: none;
    border-top: var(--rule-thin) solid var(--c-rule);
}

.section-divider--thick {
    border-top-width: var(--rule-thick);
}

/* Notice: black box with white text, e.g. "You need a memo-memo account..." */
.signup-encouragement,
.notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-field);
    padding: calc(var(--gap-field) * 1.5) calc(var(--gap-section) * 1.5);
    border-radius: var(--radius-box);
    background: var(--c-black);
    color: var(--c-white);
    font-size: var(--fs-notice);
    font-weight: var(--fw-bold);
    text-align: center;
}

.signup-encouragement .btn,
.notice .btn {
    height: var(--btn-mini-h);
    line-height: calc(var(--btn-mini-h) - 2 * var(--stroke));
    min-width: 0;
    padding: 0 calc(var(--btn-pad-x) * 1.4);
    border-color: var(--c-yellow);
    font-size: var(--fs-btn-mini);
}

/* Popover: a small black notice next to a ? button */
.auth-popover {
    position: fixed;
    z-index: 100;
    width: 290px;
    padding: 18px 20px;
    border-radius: var(--radius-popover);
    background: var(--c-black);
    color: var(--c-white);
    font-size: var(--fs-notice);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-fade) var(--ease), visibility var(--dur-fade);
}

.auth-popover.visible {
    visibility: visible;
    opacity: 1;
}

.auth-popover-content {
    display: grid;
    gap: var(--gap-inline);
}

.auth-popover-content .btn {
    width: 100%;
    border-color: var(--c-yellow);
}

.auth-popover-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* About popover: "about mm/" opens a black box below it, over the page, with
   an arrow pointing up at the button (design 1b). .about holds both; where it
   sits is in Home, below. */

/* A compact .btn: a field's padding and no minimum width */
.about-button {
    min-width: 0;
    padding: 0 var(--field-pad-x);
}

/* mm/, and the example memo links, in yellow */
.about-mm {
    color: var(--c-yellow);
    white-space: nowrap;
}

.about-button:hover .about-mm {
    color: inherit;
}

.about-popover {
    position: absolute;
    z-index: 100;
    top: calc(100% + var(--about-gap) + var(--about-arrow));
    left: var(--about-x);
    width: min(var(--about-w), 100vw - 2 * var(--picker-gutter));
}

/* The popover's black box, also in the band on a memo's page (.explainer) */
.about-popover,
.explainer {
    display: flex;
    flex-direction: column;
    padding: var(--about-pad-y) var(--about-pad-x);
    border-radius: var(--radius-box);
    background: var(--c-black);
    color: var(--c-white);
    font-size: var(--fs-about);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.about-popover > * + *,
.explainer > * + * {
    margin-top: 0.8em;
}

.about-popover ul {
    padding-left: 1.5em;
}

.about-popover li + li {
    margin-top: 0.6em;
}

.about-popover .btn,
.explainer .btn {
    align-self: center;
    margin-top: var(--about-pad-x);
    padding: 0 calc(var(--btn-pad-x) * 1.5);
    border-color: var(--c-yellow);
    font-size: var(--fs-about-btn);
}

/* The page's black focus ring wouldn't show on black */
.about-popover :focus-visible,
.explainer :focus-visible {
    outline-color: var(--c-yellow);
}

/* The arrow, 1px taller than it looks: it overlaps the box so no seam shows */
.about::after {
    content: '';
    position: absolute;
    z-index: 100;
    top: calc(100% + var(--about-gap));
    left: calc(50% - var(--about-arrow));
    width: calc(2 * var(--about-arrow));
    height: calc(var(--about-arrow) + 1px);
    background: var(--c-black);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.about:has(> .about-popover[hidden])::after {
    display: none;
}

/* Type picker ("memo my ...") --------------------------------------------
   Closed: a pill like a field, yellow until a type is chosen, then white.
   Open: the page's picking state (body.picking, design 1a), below. */

/* At least --picker-w wide, growing to fit a long type name */
.custom-select {
    position: relative;
    width: max-content;
    min-width: var(--picker-w);
    max-width: 100%;
}

.select-selected {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--picker-h);
    padding: 0 calc(var(--field-pad-x) + 40px) 0 var(--field-pad-x);
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-pill);
    background: var(--c-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--field-pad-x) center / 26px;
    color: var(--c-black);
    font-size: var(--fs-picker);
    font-weight: var(--fw-bold);
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* :where() so it doesn't outrank the locked picker below */
.custom-select:where(:has(.select-option.selected)) .select-selected {
    background-color: var(--c-white);
}

/* Editing a memo: its type can't change */
/* Editing: a memo's type is fixed, so the picker looks disabled, like a
   disabled field, chevron and all (stroke #878787 is --c-disabled-text; a
   data URI can't use the token) */
.custom-select.select-locked .select-selected {
    pointer-events: none;
    cursor: default;
    border-color: var(--c-disabled);
    background-color: var(--c-disabled);
    color: var(--c-disabled-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878787' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.select-hide,
.select-items.select-hide {
    display: none;
}

/* The list: a white box of types in two columns, filled row by row (left,
   right, next row), so the single mobile column keeps the same order. New
   types just add rows and the page scrolls. */
.select-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-section);
    padding: var(--picker-pad);
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-panel);
    background: var(--c-white);
}

.select-option {
    display: grid;
    grid-template-columns: var(--type-icon) minmax(0, 1fr);
    column-gap: var(--type-gap);
    align-items: center;
    align-content: center;
    width: 100%;
    padding: var(--type-pad-y) 20px;
    border: none;
    border-radius: var(--radius-box);
    background: none;
    color: var(--c-black);
    text-align: left;
    cursor: pointer;
}

.select-option:hover,
.select-option:focus-visible,
.select-option.selected {
    background: var(--c-yellow);
}

.select-option:focus-visible {
    outline-offset: -3px;
}

.select-option-icon {
    grid-row: 1 / span 2;
    width: var(--type-icon);
    height: var(--type-icon);
}

.select-option-title {
    font-size: var(--fs-type-title);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

.select-option-description {
    font-size: var(--fs-type-desc);
    line-height: 1.3;
}

@media (max-width: 720px) {
    .select-items {
        grid-template-columns: minmax(0, 1fr);
    }

    .select-option {
        padding: var(--type-pad-y) 14px;
    }
}

/* The picking state: yellow page, black logo with "memo my..." beside it,
   the list in place of the home page content, footer as usual */
.logo--on-yellow,
.header-prompt {
    display: none;
}

/* From the home page the whole page turns yellow (design 1a) */
body.picking:not(:has(#memoForm)) {
    background: var(--c-yellow);
}

body.picking:not(:has(#memoForm)) .footer {
    border-top-color: transparent;
}

/* From a create page the form stays below, on white: only the header and
   the list sit on yellow */
body.picking:has(#memoForm) .header {
    padding-bottom: var(--header-gap);
    background: var(--c-yellow);
}

body.picking:has(#memoForm) .main {
    padding-top: 0;
}

body.picking:has(#memoForm) .cta-section {
    padding-bottom: var(--gap-section);
    background: var(--c-yellow);
    box-shadow: 0 0 0 100vmax var(--c-yellow);
    clip-path: inset(0 -100vmax);
}

body.picking:has(#memoForm) .custom-select {
    margin-bottom: 0;
}

body.picking .header-logo--home {
    visibility: visible;
    display: block;
}

body.picking .header-logo--home picture {
    display: none;
}

body.picking .logo--on-yellow {
    display: block;
}

body.picking .header-prompt {
    display: block;
    margin-right: auto;
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: 1;
}

body.picking .memo-creation > :not(.cta-section),
body.picking .cta-title,
body.picking .select-selected {
    display: none;
}

body.picking .cta-section,
body.picking .payload-selector {
    display: block;
    width: 100%;
    margin: 0;
}

/* Centred, and allowed wider than the content column */
body.picking .custom-select {
    --panel-w: min(100vw - 2 * var(--picker-gutter), var(--picker-panel-w));
    width: var(--panel-w);
    max-width: none;
    margin-inline: calc((100% - var(--panel-w)) / 2);
    margin-bottom: var(--gap-section);
}

@media (max-width: 720px) {
    body.picking .header {
        flex-direction: column;
        align-items: stretch;
    }

    body.picking .header-logo--home {
        width: 100%;
    }

    body.picking .header-prompt {
        margin: 0;
        text-align: center;
    }
}

/* Tabs (sign in / join) ---------------------------------------------------
   Sit on the lower edge of the yellow header band. The active tab is white
   and open at the bottom, joining the page. */

.auth-tabs {
    display: flex;
    gap: var(--gap-field);
    margin-bottom: calc(-1 * var(--stroke));
    width: min(100%, var(--form-w));
}

.tab-btn {
    flex: 1;
    height: calc(var(--btn-lg-h) + 8px);
    padding: 0 var(--gap-field);
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-box) var(--radius-box) 0 0;
    background: var(--c-black);
    color: var(--c-white);
    font-size: var(--fs-tab);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    cursor: pointer;
}

.tab-btn.active {
    background: var(--c-white);
    color: var(--c-black);
    border-bottom-color: var(--c-white);
}

/* Mobile: shorter labels ("Join"), and the inactive tab is grey, not black */
@media (max-width: 720px) {
    .tab-long {
        display: none;
    }

    .tab-btn:not(.active) {
        background: var(--c-band);
        color: var(--c-black);
    }
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

/* Table (My memos) -------------------------------------------------------- */

.memos-container {
    overflow-x: auto;
}

.memos-table table,
table.memos-table {
    width: 100%;
    border-collapse: collapse;
}

.memos-table th {
    padding: 0 12px 10px 0;
    border-bottom: var(--rule-thick) solid var(--c-rule);
    font-size: calc(var(--fs-body) * 1.2);
    font-weight: var(--fw-bold);
    text-align: left;
    text-transform: lowercase;
}

.memos-table td {
    padding: 10px 12px 10px 0;
    border-bottom: var(--rule-thin) solid var(--c-rule);
    font-size: var(--fs-body);
    vertical-align: middle;
}

.memos-table tr:last-child td {
    border-bottom: none;
}

.memo-slug-cell {
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.memo-slug-cell .lock-icon {
    margin-left: 8px;
}

/* In the table this is a cell, so it stays one: its buttons sit side by side */
td.memo-actions {
    text-align: right;
    white-space: nowrap;
}

td.memo-actions > * + * {
    margin-left: var(--gap-inline);
}

/* Cards: the table on mobile (mobile design 9) */
.memos-cards {
    display: none;
    gap: var(--gap-field);
}

.memo-card {
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-box);
    overflow: hidden;
}

.memo-card-header {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    padding: 12px 16px 12px 20px;
    border-bottom: var(--stroke) solid var(--c-black);
}

.memo-card-slug {
    margin-right: auto;
    font-weight: var(--fw-bold);
    overflow-wrap: anywhere;
}

.memo-card-slug .lock-icon {
    margin-left: 8px;
}

.memo-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-inline);
    padding: 12px 16px 12px 20px;
    background: var(--c-band);
}

.memo-card-info {
    display: grid;
    gap: 6px;
    overflow-wrap: anywhere;
}

.memo-card-actions {
    display: grid;
    gap: var(--gap-inline);
}

@media (max-width: 720px) {
    .memos-table { display: none; }
    .memos-cards { display: grid; }
}

.loading-state,
.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--gap-field);
    padding-block: var(--gap-section);
    text-align: center;
}

/* The end of a list page: the legend on the left, New memo on the right */
.page-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-field);
    margin-top: var(--gap-section);
}

.legend {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

.legend .icon {
    margin-right: 6px;
}

@media (max-width: 720px) {
    .page-end > .btn {
        width: 100%;
        height: var(--btn-lg-h);
        line-height: calc(var(--btn-lg-h) - 2 * var(--stroke));
        font-size: var(--fs-btn-lg);
    }
}

/* Modal ------------------------------------------------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    background: var(--c-overlay);
}

.modal {
    width: min(100%, 520px);
    display: grid;
    gap: var(--gap-field);
    padding: var(--gap-section) calc(var(--gap-section) * 1.2);
    border-radius: var(--radius-box);
    background: var(--c-white);
}

.modal-title {
    font-size: var(--fs-h2);
}

.modal-actions {
    display: grid;
    gap: var(--gap-inline);
}

.modal-actions .btn {
    width: 100%;
    white-space: normal;
    height: auto;
    min-height: var(--btn-h);
    padding-block: 6px;
    line-height: var(--lh-tight);
}

/* Toast: a short message at the top right ----------------------------------- */

.feedback-message {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
    max-width: calc(100% - 40px);
    padding: 12px 24px;
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    font-weight: var(--fw-bold);
    animation: fade var(--dur-toast) var(--ease);
}

.feedback-success { background: var(--c-yellow); }
.feedback-error { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-white); }
.feedback-message.leaving { animation: fade-out var(--dur-toast) ease-in forwards; }

@keyframes fade-out {
    to { opacity: 0; }
}

/* Finger (home page) ------------------------------------------------------
   The finger pokes up out of the footer. Its wrist (the long base, then a
   repeating shim) stretches to fill any space between the content and the
   footer. In the finger's 157-unit drawing the wrist starts at 41.59; the
   base graphics are 74 units wide (drawn 0 to 73.3), so they're sized at
   74/157 of the finger. */

.finger {
    flex: 1 0 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: var(--finger-w);
    margin-top: var(--gap-field);
    transform: translateX(var(--finger-nudge));
}

.finger-main {
    width: 100%;
    height: auto;
}

/* Overlaps the finger by 2px: its drawing stops just short of the image's bottom edge */
.finger-wrist {
    flex: 1 0 0;
    margin-top: -2px;
    --wrist-x: calc(var(--finger-w) * 41.44 / 157);
    --wrist-w: calc(var(--finger-w) * 74 / 157);
    background:
        url("/images/mm-finger-home-base-long.svg") no-repeat var(--wrist-x) 0 / var(--wrist-w) auto,
        url("/images/mm-finger-home-base-shim.svg") repeat-y var(--wrist-x) 0 / var(--wrist-w) auto;
}

/* Finger hanging down from the top of the window (404 page): the home finger
   turned upside down, its wrist becoming the arm. The header sits on top. */
.hang {
    position: relative;
    z-index: 1;
    width: var(--hang-w);
    height: var(--hang-length);
    margin-inline: auto;
    flex-shrink: 0;
}

.finger--hanging {
    --finger-w: var(--hang-w);
    width: 100%;
    height: 100%;
    margin: 0;
    transform: rotate(180deg);
}

/* Drawn for a 126-unit finger with the tip at y=60 of its 90 */
.hang-impact {
    position: absolute;
    left: 0;
    top: calc(var(--hang-length) - var(--hang-w) * 60 / 126);
    width: calc(var(--hang-w) * 134 / 126);
    max-width: none;
    height: auto;
}

body:has(.hang) .main {
    padding-top: 0;
}

body:has(.hang) .header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
}

/* Where the arm passes behind the header, its text gets a white ground */
body:has(.hang) .auth-link,
body:has(.hang) .user-greeting {
    padding: 2px 10px;
    background: var(--c-white);
}

/* Finger poking in from the right edge of the window (text page). Its
   right margin reaches from the content edge to the window edge, plus
   --finger-side-crop, which hides the arm's rounded end past the edge.
   It's sized so the fingertip reaches --finger-side-reach of the way
   across the aside plus the right margin (1 = level with the aside). */
.finger-side {
    --margin: max(var(--gutter), (100vw - var(--content-w)) / 2);
    --w: calc(var(--finger-side-reach) * (var(--margin) + var(--aside-w)) * 340 / (340 - var(--finger-side-tip) - var(--finger-side-crop)));
    width: var(--w);
    max-width: none;
    height: auto;
    align-self: end;
    /* The drawing has 40 of its 340 units empty above it and 49 below */
    margin-top: calc(var(--finger-side-above) - var(--w) * 40 / 340);
    margin-bottom: calc(var(--finger-side-below) - var(--w) * 49 / 340 - var(--gap-field));
    margin-right: calc(-1 * var(--margin) - var(--w) * var(--finger-side-crop) / 340);
}

/* Nothing may poke out sideways far enough to scroll the page */
.main {
    overflow-x: clip;
}


/* 5. Patterns
   ========================================================================== */

/* Home: logo, "memo my" and the type picker --------------------------------- */

.memo-creation {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.branding {
    width: min(100%, var(--logo-home-w));
    margin-top: calc(var(--gap-section) * 1.25);
}

/* Shallow screens, e.g. a 1024 x 768 laptop: the logo pulled up into the
   header's space, so the finger and footer still fit above the fold */
@media (min-width: 721px) and (max-height: 800px) {
    .branding {
        margin-top: calc(var(--gap-section) * -0.8);
    }
}

.cta-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-field);
    margin-top: var(--gap-section);
}

.cta-title {
    font-size: var(--fs-hero);
    white-space: nowrap;
}

.memo-creation > .signup-encouragement {
    width: min(100%, var(--form-w));
    margin-top: var(--gap-section);
}

.form-container {
    width: min(100%, var(--form-w));
    margin-top: var(--gap-section);
}

/* Home before a type is chosen: no header logo */
.header-logo--home {
    visibility: hidden;
}

/* ...but "about mm/" (design 1b), over the logo's empty place, so the header
   keeps its height. Centred in the header's row, like Sign in or Join. */
.header:has(> .about) {
    position: relative;
}

.about {
    position: absolute;
    inset-block: var(--header-pad-top) 0;
    left: var(--gutter);
    height: fit-content;
    margin-block: auto;
}

body:is(.picking, .editing-loading) .about,
body:has(#memoForm) .about {
    display: none;
}

/* "enter mm/ words": dead centre in the header, between "about mm/" and
   Sign in or Join (design 15). Yellow on the home page, black with yellow
   text on the enter words page itself. */
.btn-enter {
    position: absolute;
    inset-block: var(--header-pad-top) 0;
    left: 50%;
    translate: -50% 0;
    margin-block: auto;
    height: var(--btn-enter-h);
    line-height: calc(var(--btn-enter-h) - 2 * var(--stroke));
    min-width: 0;
    padding: 0 var(--btn-enter-pad);
    font-size: var(--fs-btn-enter);
}

.btn-enter[aria-current="page"] {
    background: var(--c-black);
    color: var(--c-yellow);
}

/* Tall enough for it where nothing else in the header is */
.header:has(> .btn-enter) {
    min-height: calc(var(--header-pad-top) + var(--btn-enter-h));
}

body:is(.picking, .editing-loading) .btn-enter,
body:has(#memoForm) .btn-enter {
    display: none;
}

/* Once a form shows: the logo moves to the header, the finger goes, and the
   form grows so its grey options band meets the footer */
body:has(#memoForm) .header-logo--home { visibility: visible; }
body:has(#memoForm) .branding,
body:has(#memoForm) .finger { display: none; }
body:has(#memoForm) .cta-section { margin-top: 0; }

.form-container:has(#memoForm),
.memo-form {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

@media (max-width: 720px) {
    .header {
        flex-wrap: wrap;
    }

    .header .auth-section {
        order: -1;
        width: 100%;
        justify-content: flex-end;
    }

    .header-logo--home {
        display: none;
    }

    body:has(#memoForm) .header-logo--home {
        display: block;
    }

    /* "about mm/" shares the top row with Sign in or Join (mobile design 1b),
       close enough to fit a 320px screen */
    .header:has(> .about) {
        column-gap: var(--gap-inline);
    }

    .about {
        position: relative;
        inset: auto;
        height: auto;
        margin: 0;
        order: -2;
    }

    body:not(.picking, .editing-loading):not(:has(#memoForm)) .about ~ .auth-section {
        width: auto;
    }

    /* "enter mm/ words" gets a row of its own, centred and only as wide as
       its words, so it doesn't outrank "choose …" below it */
    .btn-enter {
        position: static;
        translate: none;
        /* the empty row before it (below) adds a second row gap: take it back */
        margin: calc(-1 * var(--gap-field)) auto 0;
    }

    .header:has(> .btn-enter) {
        min-height: 0;
    }

    /* The line break before it: an empty full-width item after Sign in or Join */
    .header:has(> .btn-enter)::after {
        content: '';
        order: -1;
        flex-basis: 100%;
    }

    .branding {
        margin-top: var(--gap-field);
    }

    .cta-section {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        text-align: center;
    }
}

/* Enter words: type a memo's words, go to the memo (designs 15a, 15b) ------- */

/* A yellow page, like the type picker's */
body:has(.enter-words) {
    background: var(--c-yellow);
}

body:has(.enter-words) .footer {
    border-top-color: transparent;
}

body:has(.enter-words) .main {
    padding-top: var(--enter-gap);
}

.enter-words {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The white box: mm/, the words, Go. As wide as the open type picker. */
.enter-box {
    --panel-w: min(100vw - 2 * var(--picker-gutter), var(--picker-panel-w));
    width: var(--panel-w);
    min-height: var(--enter-box-h);
    display: flex;
    align-items: center;
    padding: 0 var(--enter-box-pad) 0 var(--enter-sigil-inset);
    border: var(--stroke) solid var(--c-black);
    border-radius: var(--radius-panel);
    background: var(--c-white);
}

.enter-sigil {
    flex-shrink: 0;
    width: var(--enter-sigil-w);
    height: auto;
    margin-right: var(--enter-sigil-gap);
}

/* No field of its own: the box is the field. One line on desktop. */
.enter-input {
    flex: 1;
    min-width: 0;
    height: calc(var(--lh-snug) * 1em);
    padding: 0;
    border: none;
    outline: none;
    background: none;
    resize: none;
    overflow: hidden;
    white-space: nowrap;
    color: var(--c-black);
    font-family: inherit;
    font-size: var(--fs-enter);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
}

.enter-input::placeholder {
    color: var(--c-placeholder-big);
    opacity: 1;
}

.enter-go {
    flex-shrink: 0;
    height: var(--btn-enter-h);
    line-height: calc(var(--btn-enter-h) - 2 * var(--stroke));
    min-width: 0;
    margin-left: var(--gap-field);
    font-size: var(--fs-btn-enter);
}

.enter-error {
    margin-top: var(--gap-field);
    font-weight: var(--fw-bold);
    text-align: center;
}

/* The logo below the box, back to the home page; compact on mobile */
.enter-logo {
    display: block;
    width: min(100%, var(--logo-band-w));
    margin-top: var(--enter-logo-gap);
}

.enter-words > .btn-lg {
    margin-top: calc(var(--gap-field) * 1.5);
}

/* Mobile: the words wrap over several lines, mm/ above them, Go below
   (mobile design 15b) */
@media (max-width: 720px) {
    .enter-box {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: var(--enter-box-pad);
    }

    .enter-sigil {
        margin: 0 0 var(--gap-field);
    }

    .enter-input {
        flex: 1;
        height: auto;
        white-space: normal;
    }

    .enter-go {
        align-self: flex-end;
        margin: var(--gap-field) 0 0;
    }

    /* Narrow like "enter mm/ words" */
    .enter-words > .btn-lg {
        min-width: 0;
        padding: 0 calc(var(--btn-pad-x) * 1.5);
    }
}

/* Memo link: memo-memo.co/think-mountain-apple ------------------------------ */

/* The memo-ready page: the link, big and centred, over Copy & share (designs 3, 5) */
.memo-link-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-section);
    text-align: center;
}

.memo-url,
.slug-text {
    font-size: var(--fs-slug);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

/* The site before the memo's words, in grey */
.memo-url-domain {
    color: var(--c-faint);
}

/* A memo's public page: the link on the left with its copy button (design 6) */
.memo-slug {
    display: flex;
    align-items: center;
    gap: var(--gap-field);
    margin-bottom: var(--gap-section);
}

.memo-slug .slug-text {
    font-size: var(--fs-slug-inline);
}

/* The memo's content, e.g. a profile or an event */
.memo-content {
    width: min(100%, var(--text-w));
    margin: calc(var(--gap-section) * 2) auto 0;
}

.memo-slug + .memo-content,
.password-protection + .memo-content {
    margin-top: var(--gap-section);
}

.content-display {
    display: grid;
    justify-items: start;
    gap: var(--gap-field);
    font-size: var(--fs-content);
}

.content-display .icon {
    width: var(--content-icon);
    height: var(--content-icon);
}

.content-display .icon-btn .icon {
    width: var(--icon-btn-glyph);
    height: var(--icon-btn-glyph);
}

/* A single line of content (a link, an email ...) sits centred (design 3) */
.content-display:has(> .content-line:only-child) {
    justify-items: center;
}

.content-title {
    display: flex;
    align-items: center;
    gap: var(--gap-field);
    font-size: var(--fs-content-title);
}

.content-text {
    white-space: pre-line;
}

/* One line: a type icon and a link, e.g. https://memo-memo.co (design 3) */
.content-line {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    overflow-wrap: anywhere;
}

.content-line a,
.info-list a {
    text-decoration: none;
}

.content-line a:hover,
.info-list a:hover {
    text-decoration: underline;
}

.content-scheme {
    color: var(--c-faint);
}

/* Where a link memo goes, before the visitor goes there */
.destination-intro {
    font-size: var(--fs-meta);
    color: var(--c-muted);
}

.destination-url {
    font-size: var(--fs-destination);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
}

.destination-warning {
    font-size: var(--fs-body);
    color: var(--c-danger);
}

/* Links and social profiles: each one's description, over its address and
   a Visit button */
.link-list {
    display: grid;
    gap: var(--gap-section);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-item {
    display: grid;
    gap: var(--gap-label-stacked);
}

.link-description {
    font-weight: var(--fw-bold);
    overflow-wrap: anywhere;
}

.link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-buttons);
}

.link-row .content-line {
    min-width: 0;
}

.link-row .btn {
    flex-shrink: 0;
}

.content-image {
    max-width: 100%;
    border-radius: var(--radius-box);
}

/* A displayed memo's details (bank details, an event ...): each label beside
   its value, all in the content's size and colour */
.info-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--gap-label);
    row-gap: var(--gap-field);
    align-items: baseline;
    margin: 0;
}

.info-list > div {
    display: contents;
}

.info-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Several values in one row, one under another (a profile's links, a time capsule's images) */
.info-item {
    display: block;
}

.info-item + .info-item {
    margin-top: var(--gap-inline);
}

/* A link with an icon, e.g. a profile's */
.info-list a:has(.icon) {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
}

/* On a phone, each label sits over its value */
@media (max-width: 720px) {
    .info-list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .info-list > div + div > dt {
        margin-top: var(--gap-field);
    }
}

/* Time left until a sealed memo opens */
.countdown {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

/* A value with a copy button beside it, e.g. a Wi-Fi password */
.copyable {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
    overflow-wrap: anywhere;
}

/* Buttons that act on a memo's content, e.g. Call, Text and WhatsApp */
.content-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-buttons);
}

/* In the band: Created by, the status, then the buttons */
.memo-info,
.creator-attribution {
    font-size: var(--fs-meta);
    text-align: center;
}

/* What memo-memo is: as wide as the memo, its text left-aligned */
.explainer {
    width: min(100%, var(--text-w));
    text-align: left;
}

/* Report this memo: bottom right of the band, out towards the window edge */
.report-button {
    align-self: flex-end;
    margin-top: var(--gap-field);
    margin-right: min(0px, var(--report-inset) - (100vw - 100%) / 2);
}

/* Mobile (design 6): the box's button fills it */
@media (max-width: 720px) {
    .explainer .btn {
        align-self: stretch;
    }
}

.memo-status {
    color: var(--c-muted);
}

.band-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-field);
    margin-top: var(--gap-field);
}

.band-actions .btn-lg {
    min-width: 0;
}

.expired-message,
.password-protection {
    display: grid;
    justify-items: center;
    gap: var(--gap-field);
    text-align: center;
}

.password-protection h2 {
    font-size: var(--fs-h3);
}

.password-form {
    width: min(100%, var(--options-w));
}

.password-error,
.danger-text {
    color: var(--c-danger);
}

/* Page header: title on the left, buttons on the right ---------------------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-field) var(--gap-buttons);
    margin-bottom: var(--gap-section);
}

.page-title {
    margin-right: auto;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-buttons);
}

/* The call to action at the end of a page */
.container > .cta-section {
    margin-top: var(--gap-section);
}

/* Account sections: title and text on the left, button on the right -------- */

/* Rules between groups of preferences: the grid's gap is spacing enough */
.account-form > .form-rule {
    margin-block: 0;
}

/* Save: right-aligned under the preferences */
.account-form .form-section:last-child .btn {
    justify-self: end;
}

.account-email {
    grid-column: field;
    font-size: var(--fs-field);
    overflow-wrap: anywhere;
}

.account-section {
    display: grid;
    gap: var(--gap-field);
    margin-top: var(--gap-section);
}

.account-section .form-group {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--gap-field);
}

.account-section .form-label {
    grid-column: 1;
    font-size: var(--fs-h3);
}

.account-section .form-help {
    grid-column: 1;
}

.account-section .btn {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* Mobile: the button drops below its text, which keeps the full width */
@media (max-width: 720px) {
    .account-section .form-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-section .btn {
        grid-column: 1;
        grid-row: auto;
    }
}

.future-feature {
    opacity: 0.5;
}

.current-plan {
    grid-column: field;
    font-weight: var(--fw-bold);
}

/* 404 page ------------------------------------------------------------------ */

.not-found {
    display: grid;
    justify-items: center;
    gap: var(--gap-field);
    margin-top: var(--gap-section);
    text-align: center;
}

.not-found h1 {
    margin-bottom: calc(var(--gap-section) - var(--gap-field));
}

/* Text page (terms): reading column, finger to the side --------------------- */

.text-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-w);
    column-gap: var(--gap-section);
    align-items: start;
}

.text-aside {
    display: flex;
    flex-direction: column;
    gap: var(--gap-field);
}

.aside-title {
    margin-top: var(--gap-section);
    font-weight: var(--fw-bold);
}

.finger-side + .aside-title {
    margin-top: 0;
}

.aside-list {
    display: grid;
    gap: var(--gap-inline);
    padding-left: 1.2em;
    font-weight: var(--fw-bold);
}

/* Mobile: the reading column alone (design 13), and no New memo button */
@media (max-width: 720px) {
    .text-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .text-aside,
    .page-header:has(+ .text-layout) > .btn {
        display: none;
    }
}

.jump-links {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--gap-inline) var(--gap-section);
    margin-bottom: var(--gap-section);
}

.jump-title {
    font-size: var(--fs-body);
}

.jump-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--gap-inline);
}

.jump-link {
    text-decoration: none;
    font-weight: var(--fw-bold);
}

.jump-link:hover {
    text-decoration: underline;
}

.content-section {
    max-width: 780px;
    margin-bottom: var(--gap-section);
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section h2 {
    margin-bottom: var(--gap-field);
}

.content-section h3 {
    margin: var(--gap-field) 0 var(--gap-inline);
}

.content-section p,
.content-section ul {
    margin-bottom: var(--gap-inline);
}

.content-section ul {
    padding-left: 1.2em;
}

.back-home {
    margin-top: var(--gap-section);
    text-align: center;
}


/* 6. Utilities
   ========================================================================== */

/* hidden always hides, whatever display a component sets */
[hidden] {
    display: none !important;
}

@media (max-width: 720px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hidden on screen, still read by screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Auth page: Google sign-in parts stay hidden until the server says it's on */
[data-google-only][hidden] {
    display: none !important;
}

/* Opening a memo to edit (/?edit=...): the server adds this class so the home
   page stays hidden until the memo is in the form, then it all fades in */
body.editing-loading .main {
    visibility: hidden;
}

body:not(.editing-loading) .main:has(.select-locked) {
    animation: fade var(--dur-fade) var(--ease) both;
}

/* Motion ------------------------------------------------------------------
   Pages crossfade into each other (browsers without cross-document view
   transitions, like Firefox, just load as before). Content that appears
   after the page has loaded fades in: an animation runs whenever an element
   is inserted or goes from display: none to shown, so the scripts need no
   changes. Nothing moves: fades only. Durations and the curve are the
   motion tokens in section 1. */

@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation-duration: var(--dur-page);
    animation-timing-function: var(--ease);
}

@keyframes fade {
    from { opacity: 0; }
}

.form-container,
.signup-encouragement,
.select-items,
.about-popover,
.about::after,
.memo-content > *,
.memos-table > *,
.memos-cards > *,
.empty-state,
.modal-overlay {
    animation: fade var(--dur-fade) var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}