/* Frank: the look of Frank Management (white panels with a soft border and shadow, blue Merriweather headings, Open
   Sans text), in the board's client colour. --brand is Frank green unless the board has client branding: its
   stylesheet (/brand/{file}, Frank Management's client branding) sets --brand for the header, buttons and highlights. */

:root {
    --brand: #467e53;
    --green: #467e53;
    --green-dark: #3a6a45;
    --green-soft: #e8f0ea;
    --blue: #065fa0;
    --blue-soft: #eaf2f9;
    --ink: #1d1d1f;
    --muted: #5f6368;
    --line: #e2e6e3;
    --bg: #fbfbfb;
    --card: #ffffff;
    --amber: #8a5a00;
    --amber-soft: #fff6d9;
    --red: #b3261e;
    --red-soft: #fdecea;
    --grey-soft: #f0f1f2;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .04);
    --serif: 'Merriweather', Georgia, serif;
    --sans: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
    --brand-soft: #eef4ef;
    --brand-ink: var(--brand);   /* the brand colour as text on a panel */
    --attention: #d93025;   /* the left red line: needs you, or new for you (always beside a label) */
    --ink-2: #3c4043;   /* body text that's a step quieter than --ink */
    --surface-2: #f5f7f5;   /* a panel within a panel: replies, the question list, table heads */
    --surface-3: #e5eae6;
    --input-line: #c9d0cb;
    --line-strong: #c4cbc6;
    --red-faint: #fdf7f6;
    --stripe-a: #f3f3f3;
    --stripe-b: #fafafa;
    --ai-bg: #f4fbf3;
    --ai-bg-hover: #e7f6e3;
    --ai-edge: #a0d96b;
    --ai-ink: #3d5a2a;
    --ai-line: #d6e2d4;
    --hl-bg: #fffbe0;   /* highlighted posts and the "salient" box */
    --hl-line: #f0dd84;
    --mark: #fff176;
    --pill-yellow: #fff4b3;
    --pill-yellow-ink: #4a3d00;
    --mod-tag: #ffe94d;
    --mod-tag-ink: #4a3d00;
    --chair-tag: #b9ecc4;
    --chair-tag-ink: #1f4f2a;
    --pen-strength: 1;   /* the highlighter-pen stroke behind moderators' and chairs' names */
    color-scheme: light;
}
@supports (color: color-mix(in srgb, red, blue)) {
    :root { --brand-soft: color-mix(in srgb, var(--brand) 11%, #fff); }
}

/* Dark mode, as Frank Management's: the person's choice (Appearance in their menu, <html data-theme>), or else their
   computer's setting. The two blocks are the same; the client's own header colour is kept (html.has-brand), and
   emails and their previews stay light, as they arrive. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --green: #5a9a69; --green-dark: #8cc49a; --green-soft: #1f2e24;
        --blue: #7cb8e8; --blue-soft: #15283a;
        --ink: #e6ebe7; --ink-2: #c9d1cb; --muted: #a3ada6; --line: #2d3631; --line-strong: #3d4842;
        --bg: #121614; --card: #1a201c; --surface-2: #151a17; --surface-3: #263029; --input-line: #3a453e;
        --amber: #e3b45a; --amber-soft: #2c2412; --red: #f08a80; --red-soft: #3a1d1b; --red-faint: #2a1a19; --grey-soft: #232a26;
        --stripe-a: #1c221e; --stripe-b: #202722;
        --ai-bg: #18261b; --ai-bg-hover: #1f3223; --ai-edge: #4e7a3a; --ai-ink: #b7d9a4; --ai-line: #2d3a2f;
        --hl-bg: #2a2611; --hl-line: #5c5120; --mark: #6b5d12;
        --pill-yellow: #3d3510; --pill-yellow-ink: #f2dc7a; --mod-tag: #4d4210; --mod-tag-ink: #ffe98a;
        --chair-tag: #1f3d27; --chair-tag-ink: #a8e0b5; --pen-strength: .45;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
        --brand-ink: #8cc49a; --brand-soft: #1f2e24;
        color-scheme: dark;
    }
    :root:not([data-theme="light"]):not(.has-brand) { --header: #2f5a3a; }
}
:root[data-theme="dark"] {
    --green: #5a9a69; --green-dark: #8cc49a; --green-soft: #1f2e24;
    --blue: #7cb8e8; --blue-soft: #15283a;
    --ink: #e6ebe7; --ink-2: #c9d1cb; --muted: #a3ada6; --line: #2d3631; --line-strong: #3d4842;
    --bg: #121614; --card: #1a201c; --surface-2: #151a17; --surface-3: #263029; --input-line: #3a453e;
    --amber: #e3b45a; --amber-soft: #2c2412; --red: #f08a80; --red-soft: #3a1d1b; --red-faint: #2a1a19; --grey-soft: #232a26;
    --stripe-a: #1c221e; --stripe-b: #202722;
    --ai-bg: #18261b; --ai-bg-hover: #1f3223; --ai-edge: #4e7a3a; --ai-ink: #b7d9a4; --ai-line: #2d3a2f;
    --hl-bg: #2a2611; --hl-line: #5c5120; --mark: #6b5d12;
    --pill-yellow: #3d3510; --pill-yellow-ink: #f2dc7a; --mod-tag: #4d4210; --mod-tag-ink: #ffe98a;
    --chair-tag: #1f3d27; --chair-tag-ink: #a8e0b5; --pen-strength: .45;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --brand-ink: #8cc49a; --brand-soft: #1f2e24;
    color-scheme: dark;
}
:root[data-theme="dark"]:not(.has-brand) { --header: #2f5a3a; }
/* With a client colour, its text, soft tints and buttons are made from it, lightened or darkened to show on the dark panels */
@supports (color: color-mix(in srgb, red, blue)) {
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]).has-brand { --brand-ink: color-mix(in srgb, var(--brand) 40%, #fff); --brand-soft: color-mix(in srgb, var(--brand) 30%, #1a201c); --brand-button: color-mix(in srgb, var(--brand) 75%, #fff); }
    }
    :root[data-theme="dark"].has-brand { --brand-ink: color-mix(in srgb, var(--brand) 40%, #fff); --brand-soft: color-mix(in srgb, var(--brand) 30%, #1a201c); --brand-button: color-mix(in srgb, var(--brand) 75%, #fff); }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
h1, h2, h3 { font-family: var(--serif); color: var(--blue); font-weight: 400; line-height: 1.3; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1.02rem; margin: 1.2rem 0 .4rem; }
a { color: var(--blue); }
a:hover { color: var(--green-dark); }
:focus-visible { outline: 3px solid rgba(70, 126, 83, .45); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; padding: 6px 12px; background: var(--card); border-radius: 8px; }

/* ---------- Header ---------- */

.site-header { position: sticky; top: 0; z-index: 10; background: var(--header, var(--brand)); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
/* Full width, with the 1200px column (as .site-main) made by the padding, so the logo can follow the page when the help
   panel opens (below) */
.site-header-inner { height: 60px; padding: 0 max(24px, calc((100% - 1200px) / 2 + 24px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header-inner.is-wide { padding: 0 24px; }
.brand { color: #fff; text-decoration: none; font: 700 1.25rem var(--serif); }
.brand:hover { color: #fff; }
/* A client's logo: left-aligned in its box (so it lines up with the page below), as big as the header allows, since
   logos often have space round them (AbbVie's SVG is mostly margin) */
.brand .logo { display: block; height: 46px; max-width: 240px; object-fit: contain; object-position: left center; }
.brand .frank-logo { display: block; height: 40px; width: auto; }
.header-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.help-toggle {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); color: #fff; font: 600 .85rem var(--sans); text-decoration: none;
}
.help-toggle:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.help-open .help-toggle { background: #fff; color: var(--brand); }
.help-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .72rem; font-weight: 700; }
.signed-in { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; min-width: 0; color: #fff; text-decoration: none; border-radius: 999px; padding: 2px 10px 2px 2px; }
.signed-in:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.signed-in-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.sign-out { margin: 0; }
.sign-out button {
    height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5);
    background: transparent; color: #fff; font: 600 .82rem var(--sans); cursor: pointer;
}
.sign-out button:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 640px) {
    .site-header-inner { padding: 0 16px; }
    .signed-in-name, .help-label { display: none; }
}

/* The language menu (boards with translation on): one button, the flag beside the language's own name; English is in its list */
.flag { display: inline-block; width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); vertical-align: -2px; flex: none; }
.lang { display: flex; align-items: center; gap: 6px; position: relative; }
.lang-menu > summary {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); color: #fff; font: 600 .85rem var(--sans); cursor: pointer; border: 0;
}
.lang-menu > summary:hover { background: rgba(255, 255, 255, .24); }
.lang-menu > summary { list-style: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu[open] > summary { background: #fff; color: var(--brand); }
.lang-caret { font-size: .7rem; }
.lang-list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 310px; max-height: calc(100vh - 90px); overflow: auto;
    background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 8px;
}
.lang-list form { margin: 0; display: grid; }
.lang-list button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px;
    background: transparent; color: var(--ink); font: .9rem var(--sans); text-align: left; cursor: pointer;
}
.lang-list button:hover { background: var(--brand-soft); }
.lang-list button.is-current { font-weight: 700; }
.lang-en { color: var(--muted); font-size: .8rem; }
.lang-list button > span { white-space: nowrap; }
.lang-tick { margin-left: auto; color: var(--brand-ink); }
/* Not on this board yet: greyed out, with Request (or Requested) */
.lang-list button.is-unavailable { color: var(--muted); }
.lang-list button.is-unavailable .flag { filter: grayscale(1); opacity: .6; }
.lang-list button.is-unavailable:disabled { cursor: default; background: transparent; }
.lang-request { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--blue); }
.lang-list button:disabled .lang-request { color: var(--muted); font-weight: 400; }
.lang-head-more { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.lang-notice.is-waiting { background: var(--amber-soft); color: var(--amber); }
.lang-notice form.inline { display: inline; margin: 0; }
.lang-notice button.link { color: var(--blue); }
.lang-head { margin: 2px 10px 6px; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lang-note { margin: 8px 10px 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); line-height: 1.45; }
.lang-notice { margin: 0 0 14px; padding: 7px 12px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: .85rem; }
.lang-notice .flag { margin-right: 4px; }
.lang-pending { display: block; margin-top: 2px; color: var(--muted); }
.lang-legal { background: var(--amber-soft); color: var(--amber); padding: 7px 12px; border-radius: 8px; }
/* Phones: just the flags, and the header's Help button gives way (Help is the floating button there), so the
   header still fits with the longer wording of other languages */
@media (max-width: 640px) {
    .lang-menu > summary span:not(.lang-caret) { font-size: 0; }
    .lang-menu > summary { padding: 0 9px; gap: 4px; }
    .site-header-inner:has(.lang) .help-toggle { display: none; }
    .site-header-inner:has(.lang) .header-right { gap: 6px; }
    .site-header-inner:has(.lang) .sign-out button { padding: 0 9px; font-size: .76rem; }
    .lang-list { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
}

/* Under a translated post: "Translated by AI from French · Show original" */
.post-lang { margin: 4px 0 6px; font-size: .8rem; color: var(--muted); }
.post-lang > summary { cursor: pointer; list-style: none; display: inline; }
.post-lang > summary::-webkit-details-marker { display: none; }
.post-lang-show { color: var(--blue); text-decoration: underline; }
.post-lang[open] .post-lang-show { text-decoration: none; }
.post-lang-other { margin-top: 6px; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--grey-soft); border-radius: 0 8px 8px 0; font-size: .9rem; color: var(--ink); }

/* ---------- Page ---------- */

.site-main { max-width: 1200px; margin: 0 auto; padding: 24px 24px 48px; }
.site-main.is-wide { max-width: 1400px; }
@media (max-width: 640px) { .site-main { padding: 16px 16px 40px; } }
.site-footer { max-width: 1200px; margin: 0 auto; padding: 16px 24px 32px; font-size: .82rem; color: var(--muted); }
.site-footer a { color: var(--muted); }

.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.card + .card { margin-top: 16px; }
.card h2:first-child, .card h1:first-child { margin-top: 0; }
.card.narrow { max-width: 440px; margin: 32px auto; }
.card.narrow.wide-narrow { max-width: 620px; }
.device-list { list-style: none; padding: 0; margin: 12px 0; }
.device-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.device-list li:last-child { border-bottom: 1px solid var(--line); }
.device-list .note { display: block; margin-top: 2px; }
@media (max-width: 640px) { .card { padding: 16px; } }

.sub { display: block; margin: 4px 0; color: var(--muted); }
/* Formatted text from Frank Management (topics' descriptions, the question): paragraphs and lists, compact */
.rich p { margin: 0 0 .5em; }
.rich p:last-child, .rich ul:last-child, .rich ol:last-child { margin-bottom: 0; }
.rich ul, .rich ol { margin: .3em 0 .5em; padding-left: 1.4em; }
.rich li { margin: .15em 0; }
.meta { display: block; font-size: .85rem; color: var(--muted); }
.note { font-size: .85rem; color: var(--muted); }
.error { padding: 10px 12px; color: var(--red); background: var(--red-soft); border-radius: 8px; }
.message { margin: 12px 0; padding: 10px 12px; color: var(--green-dark); background: var(--green-soft); border-radius: 8px; }
.tag { display: inline-block; padding: 1px 9px; font-size: .74rem; font-weight: 600; border-radius: 999px; background: var(--grey-soft); color: var(--ink-2); white-space: nowrap; }
.tag.new { background: var(--blue); color: #fff; }
.tag.todo { background: var(--amber-soft); color: var(--amber); }

/* ---------- Forms and buttons ---------- */

label { display: block; margin: 14px 0 4px; font-size: .9rem; font-weight: 600; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
input[type=email], input[type=password], input[type=text], input:not([type]), textarea {
    width: 100%; padding: 9px 12px; font: inherit; color: var(--ink); background: var(--card);
    border: 1px solid var(--input-line); border-radius: 8px;
}
input:focus, textarea:focus { border-color: var(--brand); outline: 3px solid rgba(70, 126, 83, .18); }
button.primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding: 9px 18px;
    font: 600 .92rem var(--sans); color: #fff; background: var(--brand-button, var(--brand)); border: 0; border-radius: 8px; cursor: pointer;
}
button.primary:hover { filter: brightness(.93); }
button.primary.small { margin-top: 0; padding: 6px 12px; font-size: .85rem; }
button.link { padding: 0; margin-top: 12px; font: inherit; font-size: .9rem; color: var(--blue); background: none; border: 0; text-decoration: underline; cursor: pointer; }
form.inline { display: inline; }
form.inline button.link { margin: 0; }

/* ---------- Tooltips: any element with data-tip, and the small "?" (.tip) ---------- */

.tip {
    display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 5px;
    border-radius: 50%; background: var(--blue-soft); color: var(--blue);
    font: 700 .7rem var(--sans); cursor: help; vertical-align: 1px;
}
.tip:hover, .tip:focus { background: var(--blue); color: #fff; outline: none; }
/* A box's own "?" sits quietly in its top-right corner, not after the heading (Chris, 2 Oct 2026; as Frank
   Management's), and its tip opens leftwards so it stays on the page */
.card { position: relative; }
.card h2:has(> .tip) { padding-right: 28px; }
.card h2 > .tip { position: absolute; top: 16px; right: 16px; margin: 0; }
.card h2 > .tip[data-tip]::after { left: auto; right: -6px; transform: none; }
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip); display: none;
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
    width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 8px;
    background: #1f2a23; color: #fff; font: 400 .8rem/1.45 var(--sans); text-align: left; white-space: normal;
    letter-spacing: 0; text-transform: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); z-index: 30; pointer-events: none;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip]:focus::after { display: block; }
[data-tip-pos="below"]::after { bottom: auto; top: calc(100% + 10px); }
[data-tip-side="left"]::after { left: auto; right: -6px; transform: none; }
[data-tip-side="right"]::after { left: -6px; transform: none; }

/* ---------- Help: a panel docked on the right that slides in and out ----------
   On wider screens the page narrows to make room (page-area's margin follows the panel's width, --help-w, which can be
   dragged); on narrower screens it slides over the page. site.js adds .js, .help-open and --help-w. */

:root { --help-w: 340px; }
.help-panel {
    position: fixed; top: 60px; right: 0; bottom: 0; z-index: 15; width: var(--help-w); max-width: calc(100vw - 24px);
    display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--line);
    box-shadow: -8px 0 24px rgba(20, 30, 24, .06); font-size: .9rem;
    transform: translateX(100%); visibility: hidden;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .25s;
}
.help-open .help-panel { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.page-area { transition: margin-right .25s cubic-bezier(.2, .8, .2, 1); }
.site-header-inner { transition: padding .25s cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 1100px) {
    .help-open .page-area { margin-right: var(--help-w); }
    /* the page is then centred in the space left of the panel: start the header's logo where the page's text starts,
       keeping the buttons where they were */
    .help-open .site-header-inner:not(.is-wide) { padding-left: max(24px, calc((100% - var(--help-w) - 1200px) / 2 + 24px)); }
}
.is-resizing .page-area, .is-resizing .help-panel, .is-resizing .site-header-inner { transition: none; }
.is-resizing { cursor: col-resize; user-select: none; }
@media (prefers-reduced-motion: reduce) { .help-panel, .page-area, .site-header-inner { transition: none; } }

.help-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
.help-resize::after { content: ""; position: absolute; left: 3px; top: 50%; width: 2px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--line-strong); opacity: 0; transition: opacity .15s; }
.help-resize:hover::after, .help-resize:focus-visible::after, .is-resizing .help-resize::after { opacity: 1; }
@media (max-width: 1099px) { .help-resize { display: none; } }

.help-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 10px 20px; border-bottom: 1px solid var(--line); }
.help-head strong { font-family: var(--serif); color: var(--green-dark); font-weight: 400; font-size: 1.1rem; }
.help-close { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: 600 .82rem var(--sans); text-decoration: none; }
.help-close:hover { background: var(--grey-soft); color: var(--ink); }
.help-body { padding: 16px 20px 24px; overflow-y: auto; color: var(--ink-2); line-height: 1.6; }
.help-body h4 { font-family: var(--serif); color: var(--blue); font-weight: 400; font-size: 1rem; margin: 18px 0 4px; }
.help-body h4:first-child { margin-top: 0; }
.help-body p { margin: 0 0 8px; }
.help-body ul, .help-body ol { margin: 0 0 8px; padding-left: 20px; }
.help-body li { margin-bottom: 5px; }
.help-body .help-tip { padding: 8px 10px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); }
.help-more { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }

/* The slim tab on the right edge that brings help back (only with JavaScript, and only while it's hidden) */
.help-tab {
    display: none; position: fixed; right: 0; top: 50%; z-index: 14; transform: translateY(-50%);
    flex-direction: column; align-items: center; gap: 6px; padding: 12px 7px; border: 1px solid var(--line); border-right: 0;
    border-radius: 10px 0 0 10px; background: var(--card); color: var(--brand-ink); box-shadow: var(--shadow); cursor: pointer;
    font: 600 .75rem var(--sans); writing-mode: vertical-rl;
}
.help-tab .help-icon { writing-mode: horizontal-tb; }
.help-tab { text-decoration: none; }
.help-tab:hover { background: var(--brand-soft); }
.help-closed .help-tab { display: flex; }
.help-open .help-tab { display: none; }
/* Phones: help is a small "Help" pill at the bottom right that opens it as a sheet from the bottom of the screen */
@media (max-width: 640px) {
    .help-panel { top: auto; left: 0; width: 100vw; max-width: none; height: 72vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; transform: translateY(100%); box-shadow: 0 -8px 30px rgba(20, 30, 24, .16); }
    .help-open .help-panel { transform: none; }
    .help-tab { top: auto; bottom: 16px; right: 16px; transform: none; writing-mode: horizontal-tb; flex-direction: row; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); font-size: .85rem; }
}

/* ---------- People ---------- */

.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar.initials { display: inline-grid; place-items: center; background: var(--green-soft); color: var(--green-dark); font: 700 .8rem var(--sans); }
.avatar.small { width: 28px; height: 28px; font-size: .72rem; }
.site-header .avatar.initials { background: rgba(255, 255, 255, .92); color: var(--brand); }

/* ---------- My boards ---------- */

.board-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.board-list a {
    display: block; height: 100%; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--brand);
    border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
}
.board-list a:hover { border-color: var(--brand); }
.board-list strong { display: block; font: 400 1.05rem var(--serif); color: var(--blue); }

/* ---------- Compliance ---------- */

.welcome { margin-top: 16px; }
.statements { list-style: none; padding: 0; }
.statements li { margin: 10px 0; }
.statements label.check { align-items: flex-start; }

/* ---------- Board home ---------- */

.board-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; margin-bottom: 4px; }
.board-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-top: 16px; align-items: start; }
@media (max-width: 900px) { .board-layout { grid-template-columns: minmax(0, 1fr); } }
.board-side .card { padding: 16px 18px; }
.board-side h2, .todo h2 { margin: 0 0 8px; font-size: 1.02rem; }
.todo { margin-bottom: 16px; border-left: 4px solid var(--attention); }
.todo ul, .library, .agenda { margin: 0; padding-left: 18px; }
.todo li, .library li, .agenda li { margin: 6px 0; }
.agenda li.current { font-weight: 700; }
.agenda li.current::marker { color: var(--brand-ink); }
.agenda .meta { font-weight: 400; }
.library li.unread a { font-weight: 700; }

.topic { margin-bottom: 16px; padding: 0; overflow: hidden; }
.topic-top { padding: 16px 20px 10px; }
.topic h2 { margin: 0; font-size: 1.12rem; }
.topic .sub { margin: 4px 0 0; }
.topic .note { margin: 6px 0 0; }
.topic.unreleased { background: var(--surface-2); }
.topic.unreleased h2, .topic.unreleased .qtext { color: var(--muted); }
.questions { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.questions > li + li { border-top: 1px solid var(--line); }
.questions a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px; padding: 12px 20px; text-decoration: none; color: var(--ink); }
.questions a:hover { background: var(--brand-soft); }
.qnum { grid-row: span 2; font-weight: 700; color: var(--brand-ink); }
.qtext { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qmeta { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.questions .ai-summary { margin: 0 20px 14px 74px; }
@media (max-width: 640px) { .questions a { padding: 12px 16px; } .questions .ai-summary { margin: 0 16px 12px; } }

/* ---------- Question page: the topic list on the left, the question on the right ---------- */

.question-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.question-main { min-width: 0; }
@media (max-width: 900px) { .question-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.qnav { min-width: 0; }

.qnav {
    position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: .84rem;
}
.qnav > summary {
    padding: 10px 14px; list-style: none; cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line);
}
.qnav > summary::-webkit-details-marker { display: none; }
.qnav > summary::after { content: "▾"; float: right; }
.qnav:not([open]) > summary { border-bottom: 0; }
.qnav:not([open]) > summary::after { content: "▸"; }
.qnav-list { overflow-y: auto; padding: 6px 6px 8px; scrollbar-width: thin; }
.qnav-topic { margin-top: 6px; }
.qnav-topic-name { margin: 8px 8px 3px; font: 400 .84rem/1.35 var(--serif); color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qnav-opens { margin: 0 8px 4px; font-size: .74rem; color: var(--muted); }
.qnav-topic ol { list-style: none; margin: 0; padding: 0; }
.qnav-q { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; color: var(--ink-2); text-decoration: none; border-left: 3px solid transparent; }
.qnav-q:hover { background: var(--surface-3); color: var(--ink); }
.qnav-q.is-current { background: var(--brand-soft); border-left-color: var(--brand); color: var(--ink); font-weight: 600; }
.qnav-num { flex-shrink: 0; min-width: 22px; font-weight: 700; color: var(--brand-ink); }
.qnav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qnav-mark { flex-shrink: 0; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: .6rem; color: #fff; }
.qnav-mark.is-done { background: var(--green); border-color: var(--green); }
.qnav-count { flex-shrink: 0; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: .72rem; font-weight: 600; text-align: center; }
.qnav-count.has-new { background: var(--blue); color: #fff; }
.qnav-topic.is-upcoming { opacity: .55; }
.qnav-topic.is-upcoming .qnav-q { font-style: italic; }
.qnav-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); font-size: .72rem; color: var(--muted); }
.qnav-key > span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 900px) { .qnav { position: static; max-height: none; } .qnav-list { max-height: 50vh; } }

.question-nav { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: .9rem; }
.question-main > .question-nav:last-child { margin: 16px 0 0; }
.question .qnum { margin: 0 0 4px; font-weight: 700; color: var(--brand-ink); }
.question h1 { font-size: 1.3rem; margin: 0 0 8px; }
/* The question with its formatting (Frank Management's editor): looks like the heading it is */
.question .question-text { font-family: var(--serif); color: var(--blue); font-weight: 400; font-size: 1.3rem; line-height: 1.4; margin: 0 0 8px; }
.question .question-text strong, .question .question-text b { font-weight: 700; }
/* A long question: the first paragraph is the heading; the rest (guidance, "Select up to two") read as ordinary text */
.question .question-text > :not(:first-child) { font: 400 1rem/1.55 var(--sans); color: var(--ink); margin-top: .6em; }
.question .question-text > :not(:first-child) strong, .question .question-text > :not(:first-child) b { font-weight: 700; }
.read-first { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.read-first p { margin: 0 0 4px; font-weight: 600; }
.write, .hidden-thread { margin: 16px 0; }
.write h2 { margin: 0 0 8px; font-size: 1.02rem; }
.post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin: 12px 0; }
.post.new, .reply.new { border-left: 4px solid var(--attention); }
.post-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post-head .who { display: flex; gap: 8px; align-items: center; }
.post-head .when { font-size: .8rem; color: var(--muted); margin-left: auto; }
.post-text { margin: 10px 0 6px; overflow-wrap: anywhere; }
/* A long answer or reply shows its first five lines, fading out, with "Show more" (site.js); all of it without JavaScript or in print */
.post-text.is-clamped { max-height: calc(1.55em * 5); overflow: hidden;
                        -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.show-more { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 2px 0; font: 600 .85rem var(--sans); color: var(--blue);
             background: none; border: 0; cursor: pointer; }
.show-more:hover { text-decoration: underline; }
.show-more::after { content: "▾"; font-size: .8em; }
.show-more[aria-expanded="true"]::after { content: "▴"; }
@media print { .post-text.is-clamped { max-height: none; -webkit-mask-image: none; mask-image: none; } .show-more { display: none; } }
.post-actions { display: flex; gap: 12px; font-size: .85rem; }
.reply { margin: 12px 0 0 28px; padding: 10px 14px; background: var(--surface-2); border-radius: 8px; }
.reply-form { margin: 12px 0 0 28px; display: flex; gap: 8px; align-items: flex-start; }
@media (max-width: 640px) { .reply, .reply-form { margin-left: 10px; } }

/* ---------- Documents and videos ---------- */

.doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.doc-tools { display: flex; gap: 12px; }
.pdf-pages { display: grid; justify-items: center; gap: 16px; padding: 8px 0 24px; }
.pdf-page { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); max-width: 100%; }
.pdf-page canvas { display: block; width: 100%; height: 100%; }
.video { display: block; width: 100%; max-height: 80vh; background: #000; border-radius: 8px; }

/* ---------- Participation (who has answered what): the table scrolls sideways inside its panel ---------- */

.nudge-bar { margin: 12px 0 16px; }
.nudge-bar p { margin-top: 0; }
.matrix-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.matrix { border-collapse: collapse; font-size: .85rem; min-width: 100%; }
.matrix th, .matrix td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.matrix th.who { position: sticky; left: 0; z-index: 1; min-width: 170px; background: var(--card); text-align: left; white-space: normal; font-weight: 600; }
.matrix thead th, .matrix thead th.who { background: var(--surface-2); font-weight: 600; }
.matrix .topic-head { font-weight: 400; font-size: .78rem; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid var(--card); }
.matrix td.yes { color: var(--green); font-weight: 700; }
.matrix td.no { background: var(--red-faint); }
.matrix .unreleased { background: repeating-linear-gradient(45deg, var(--stripe-a), var(--stripe-a) 4px, var(--stripe-b) 4px, var(--stripe-b) 8px); color: var(--muted); }
.matrix tfoot td, .matrix tfoot th { font-weight: 700; border-top: 2px solid var(--line); }
.matrix td.nudge button.link { margin: 0; }

/* ---------- AI insights under a question ---------- */

/* Hide / show the AI insights, just for this person (the board home's meta line) */
.ai-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 2px 10px; border-radius: 999px;
    border: 1px solid var(--ai-edge); background: var(--ai-bg); color: var(--ai-ink); font-size: .8rem; text-decoration: none; white-space: nowrap;
}
.ai-toggle:hover { background: var(--ai-bg-hover); color: var(--ai-ink); }
.ai-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: #6cbf3a; }
.ai-toggle.is-off { border-color: var(--line); background: var(--card); color: var(--muted); }
.ai-toggle.is-off .ai-toggle-dot { background: var(--line-strong); }
.ai-summary { padding: 10px 14px; font-size: .85rem; color: var(--ink-2); background: var(--ai-bg); border-left: 4px solid var(--ai-edge); border-radius: 8px; }
.ai-summary .ai-head { margin: 0 0 4px; }
.ai-summary details { margin-top: 8px; }
.ai-summary summary { color: var(--green-dark); cursor: pointer; font-weight: 600; }
.ai-summary details > div { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ai-line); }
.ai-summary .ai-disclaimer { margin: 8px 0 0; font-size: .72rem; color: var(--muted); }

/* ---------- Help page ---------- */

.help { max-width: 760px; }
.help .card h2 { font-size: 1.1rem; }
.help li { margin: 6px 0; }
.tag.done { background: var(--green-soft); color: var(--green-dark); }

/* ---------- Question: the conversation, blurred until a participant has answered ---------- */

/* Real names, photos and dates; the stand-in words under them are blurred (and can't be selected) */
.blurred-thread { margin: 12px 0; }
.blurred-text { filter: blur(4px); user-select: none; pointer-events: none; color: var(--ink-2); }
.blurred-invite { margin: 16px 0 4px; text-align: center; border-left: 4px solid var(--brand); background: var(--brand-soft); }
.blurred-invite p { margin: 0 0 8px; }
.blurred-count { font: 400 1.1rem var(--serif); color: var(--blue); }
.button-link { display: inline-block; margin-top: 4px; padding: 8px 16px; border-radius: 8px; background: var(--brand-button, var(--brand)); color: #fff; font-weight: 600; text-decoration: none; }
.button-link:hover { color: #fff; filter: brightness(.93); }
.revealed { margin: 16px 0; border-left: 4px solid var(--brand); background: var(--brand-soft); }
.revealed h2 { margin: 0 0 6px; font-size: 1.1rem; }
.revealed p { margin: 0; }
.reply-form.is-inviting textarea { border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 3px rgba(70, 126, 83, .12); }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .revealed { animation: fade-up .3s ease; } }

/* Header link to Frank Management, for people who also have an account there */
.header-link { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 600 .82rem var(--sans); text-decoration: none; white-space: nowrap; }
.header-link:hover { background: rgba(255, 255, 255, .24); color: #fff; }
@media (max-width: 800px) { .header-link { display: none; } }

/* ---------- Formatting for answers and replies (site.js): off unless turned on ---------- */

.fmt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.fmt-toggle, .fmt-tools button {
    height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-2);
    font: 600 .8rem var(--sans); cursor: pointer;
}
.fmt-toggle span { font-family: var(--serif); margin-right: 2px; }
.fmt-toggle[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
.fmt-toggle:hover, .fmt-tools button:hover { background: var(--grey-soft); }
.fmt-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; }
.fmt-tools button { min-width: 32px; padding: 0 8px; }
.fmt-bold { font-weight: 800 !important; }
.fmt-italic { font-style: italic; font-family: var(--serif) !important; }
.fmt-underline { text-decoration: underline; }
.fmt-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--line); }
.fmt-surface {
    width: 100%; padding: 9px 12px; background: var(--card); border: 1px solid var(--input-line); border-radius: 8px; overflow-wrap: anywhere;
    max-height: 60vh; overflow-y: auto; cursor: text;
}
.fmt-surface:focus { border-color: var(--brand); outline: 3px solid rgba(70, 126, 83, .18); }
.fmt-surface:empty::before { content: attr(data-placeholder); color: #9aa0a6; }
.fmt-surface.is-empty-error { border-color: var(--red); }
.fmt-surface p, .post-text p { margin: 0 0 .6em; }
.fmt-surface ul, .fmt-surface ol, .post-text ul, .post-text ol { margin: .3em 0 .6em; padding-left: 1.4em; }
.reply-form .fmt-bar { flex-basis: 100%; }
.reply-form { flex-wrap: wrap; }
.reply-form .fmt-surface { flex: 1; min-width: 0; }

/* ---------- Board members (board home side panel) ---------- */

.members { padding: 14px 16px 8px; }
.members h2 { display: flex; align-items: center; }
.member-list { list-style: none; margin: 0; padding: 0; }
.member { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.member:first-child { border-top: 0; }
.member .avatar { width: 44px; height: 44px; }
.member-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.member-name { font: 400 .95rem/1.3 var(--serif); color: var(--blue); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.member-name a { color: inherit; text-decoration: none; }
.member-name a:hover { text-decoration: underline; }
.member-meta { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-seen { flex-shrink: 0; font-size: .76rem; font-weight: 600; color: var(--muted); }
.member-seen.is-live { display: inline-flex; align-items: center; gap: 5px; color: var(--green); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(70, 126, 83, .2); }
.is-hidden-group { opacity: .6; }
.is-hidden-group h2::after { content: " (hidden)"; font-size: .8rem; color: var(--muted); margin-left: 4px; }

/* ---------- The left red line: what needs you, or is new for you (never on its own: always with a label) ---------- */

.questions > li.attention > a { box-shadow: inset 4px 0 0 var(--attention); }
.library li.attention, .todo li { position: relative; }
.library li.attention::before { content: ""; position: absolute; left: -18px; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--attention); }
.agenda li.current { box-shadow: inset 3px 0 0 var(--attention); margin-left: -18px; padding-left: 18px; list-style-position: inside; }
.qnav-q.attention:not(.is-current) { border-left-color: var(--attention); }

/* ---------- Votes and highlights on answers and replies ---------- */

.post-signals { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; font-size: .82rem; }
.vote {
    display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 9px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--card); color: var(--muted); font: 600 .78rem var(--sans); cursor: pointer;
}
.vote:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.vote.is-on { background: var(--brand-soft); border-color: var(--brand-ink); color: var(--brand-ink); }
.vote.is-static { cursor: default; border-color: transparent; background: var(--grey-soft); }
.vote.is-static:hover { color: var(--muted); }
.post.is-highlighted, .reply.is-highlighted { background: var(--hl-bg); box-shadow: inset 4px 0 0 #f2c200, var(--shadow); }
mark, .hl { background: var(--mark); color: inherit; }

.salient-box { margin: 16px 0; background: var(--hl-bg); border-color: var(--hl-line); }
.popular-box { margin: 16px 0; }
.salient-box h2, .popular-box h2 { margin: 0 0 8px; font-size: 1.02rem; display: flex; align-items: center; }
.signal-list { list-style: none; margin: 0; padding: 0; }
.signal-list li { padding: 7px 0; border-top: 1px solid var(--line); }
.signal-list li:first-child { border-top: 0; }
.signal-list a { color: var(--ink); text-decoration: none; }
.signal-list a:hover { color: var(--blue); text-decoration: underline; }
.signal-list .meta { margin-top: 2px; }

/* Choosing one scrolls smoothly to it, and it glows briefly so the eye finds it */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.post, .reply { scroll-margin-top: 80px; }
@keyframes arrive { from { outline: 3px solid rgba(242, 194, 0, .9); } to { outline: 3px solid rgba(242, 194, 0, 0); } }
.post:target, .reply:target { animation: arrive 2s ease-out; outline-offset: 2px; }

/* ---------- Moderators: a highlighter-pen stroke behind their name and role on posts ---------- */

.who.is-moderator strong {
    padding: 0 4px; margin: 0 -2px; border-radius: 3px 6px 4px 7px;
    background: linear-gradient(100deg, rgba(255, 230, 0, 0) 0%, rgba(255, 230, 0, calc(.55 * var(--pen-strength))) 3%, rgba(255, 224, 0, calc(.42 * var(--pen-strength))) 50%, rgba(255, 230, 0, calc(.6 * var(--pen-strength))) 96%, rgba(255, 230, 0, 0) 100%);
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.who.is-moderator .tag { background: var(--mod-tag); color: var(--mod-tag-ink); }
/* Chairs: the same pen stroke in green, so they can be told apart from moderators */
.who.is-chair strong {
    padding: 0 4px; margin: 0 -2px; border-radius: 3px 6px 4px 7px;
    background: linear-gradient(100deg, rgba(120, 220, 140, 0) 0%, rgba(120, 220, 140, calc(.5 * var(--pen-strength))) 3%, rgba(110, 210, 130, calc(.38 * var(--pen-strength))) 50%, rgba(120, 220, 140, calc(.55 * var(--pen-strength))) 96%, rgba(120, 220, 140, 0) 100%);
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.who.is-chair .tag { background: var(--chair-tag); color: var(--chair-tag-ink); }

/* ---------- Back to the board overview (question, document and participation pages) ---------- */

.back-overview {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 12px; padding: 7px 14px 7px 12px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
    color: var(--brand-ink); font: 600 .88rem var(--sans); text-decoration: none;
}
.back-overview:hover { border-color: var(--brand-ink); background: var(--brand-soft); color: var(--brand-ink); }
.back-overview span { font-size: 1.15rem; line-height: 1; }

/* The question page's left column: the button and the topic list stay in view together */
.question-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; min-width: 0; }
.question-side .back-overview { margin-bottom: 10px; }
.question-side .qnav { position: static; max-height: none; flex: 1; min-height: 0; }
@media (max-width: 900px) { .question-side { position: static; max-height: none; } }

/* Highlight as salient: just a star (☆ off, ★ on) */
.star { width: 28px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: none; color: #b8a240; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.star:hover { background: var(--pill-yellow); color: var(--pill-yellow-ink); }
.star.is-on { color: #e0a800; }

/* A Frank admin's view opened from Frank Management */
.staff-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--pill-yellow); color: var(--pill-yellow-ink); font: 700 .75rem var(--sans); letter-spacing: .02em; }

/* ---------- "Latest" on a board's home page (Pages/Boards/_Latest; as Frank Management's board Overview) ---------- */

.latest { padding: 12px 18px 14px; margin-bottom: 16px; }
.latest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
h2.latest-title { margin: 0; font: 700 .8rem var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.latest-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 6px; vertical-align: 1px; animation: latest-pulse 2s ease-in-out infinite; }
@keyframes latest-pulse { 50% { opacity: .35; } }
.latest-list { margin: 6px 0 0; padding: 0; list-style: none; }
.latest-list li + li { margin-top: 6px; }
.latest-list .latest-line { display: block; font-size: .85rem; color: var(--muted); }
.latest-list a.latest-line.latest-headline { color: var(--blue); }
.latest-line.latest-headline { color: var(--ink); font-size: .92rem; }
.latest-ago, .latest-list .latest-when { font-weight: 600; color: var(--green-dark); }
.latest-list .latest-when { font-size: .85rem; }
.latest-list .latest-person { width: 24px; height: 24px; font-size: .65rem; display: inline-grid; vertical-align: middle; }
/* With JavaScript: the list is for screen readers only, and one item at a time is typed out on the screen */
.latest.is-enhanced .latest-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.latest-screen { position: relative; display: flex; flex-direction: column; margin-top: 6px; min-height: 5.4em; color: inherit; text-decoration: none; border-radius: 6px; }
.latest-screen[href]:hover .latest-headline { color: var(--blue); text-decoration: underline; }
.latest-screen:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.latest-screen[hidden] { display: none; }
.latest-screen .latest-line { font-size: .85rem; color: var(--muted); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.latest-screen .latest-line.latest-headline { color: var(--ink); font-size: .92rem; }
.latest-screen .latest-meta { order: 9; margin-top: 2px; font-size: .75rem; color: var(--muted); }
/* The person it's about, larger and first, so each item reads as someone saying something (as Frank Management's, FM
   43f7911; items about staff have no photo and use the full width) */
.latest-screen:has(.latest-person) { padding-left: 72px; min-height: 60px; }
.latest-screen .latest-person { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 1rem;
    box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--green-soft), 0 4px 10px rgba(20, 30, 24, .12); animation: latest-face .35s ease; }
@keyframes latest-face { from { opacity: 0; transform: translateY(-50%) scale(.85); } }
@media (prefers-reduced-motion: reduce) { .latest-screen .latest-person { animation: none; } }
.latest-cursor { display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--brand); animation: latest-blink 1s steps(1) infinite; }
@keyframes latest-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .latest-cursor, .latest-dot { animation: none; } }
@media (max-width: 640px) { .latest-screen .latest-line { white-space: normal; } .latest-screen { min-height: 7em; } }

/* ---------- Pop-ups (site.js: a link marked data-modal), e.g. the nudge ---------- */
dialog.modal { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0, 0, 0, .25); }
dialog.modal::backdrop { background: rgba(20, 30, 24, .45); }
dialog.modal.is-busy { cursor: progress; }
.modal-open { overflow: hidden; }
.modal-box { padding: 20px 24px 24px; }
dialog .modal-box { max-height: calc(100vh - 32px); overflow: auto; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.modal-head h1 { margin: 0; font-size: 1.35rem; }
.modal-close { font-size: 1.6rem; line-height: 1; color: var(--muted); text-decoration: none; padding: 0 4px; }
.modal-close:hover { color: var(--ink); }

/* The nudge: what to send on the left, the email as it'll arrive on the right */
.nudge-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .nudge-layout { grid-template-columns: 1fr; } }
.nudge-edit .field { display: block; font-weight: 600; margin: 12px 0 4px; }
.nudge-edit input[type=text], .nudge-edit input:not([type]), .nudge-edit textarea { width: 100%; }
.nudge-to { margin: 0 0 4px; }
.nudge-todo { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; margin: 14px 0; }
.nudge-todo legend { font-weight: 600; padding: 0 4px; }
.nudge-todo .check { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: .9rem; }
.nudge-todo .check input { margin-top: 4px; }
.nudge-todo-head { margin: 8px 0 4px; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.nudge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0; }
.nudge-preview .email-frame { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; height: min(70vh, 640px); }
.nudge-preview iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }.nudge-off { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); }
.nudge-off a { color: var(--blue); }
.nudge-disabled { color: var(--muted); cursor: help; text-decoration: underline dotted; }

/* Speaking an answer: the microphone above the box, red while recording */
.voice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 6px; }
.voice-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--blue); font: 600 .82rem var(--sans); cursor: pointer; }
.voice-btn:hover { background: var(--blue-soft); }
.voice-btn:disabled { opacity: .6; cursor: progress; }
.voice-btn.is-recording { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.mic-icon { width: 16px; height: 16px; fill: currentColor; flex: none; }
.voice-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: voice-pulse 1s infinite; }
@keyframes voice-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .voice-dot { animation: none; } }
.voice-status { font-size: .82rem; color: var(--muted); }
.voice-consent { flex-basis: 100%; margin: 2px 0 0; font-size: .78rem; color: var(--muted); }
.post-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0; }
.post-audio-label { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--muted); }
.post-audio audio { height: 32px; max-width: 100%; }.statement-english { margin: 4px 0 0 28px; font-size: .8rem; color: var(--muted); }
.statement-english > summary { cursor: pointer; color: var(--blue); }

/* The @ list under the answer or reply box (site.js, "Mentioning someone") */
.mention-list { position: absolute; z-index: 40; max-width: min(420px, calc(100vw - 32px)); margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.mention-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.mention-list li.is-active, .mention-list li[data-i]:hover { background: var(--brand-soft); }
.mention-list .avatar { width: 28px; height: 28px; font-size: .7rem; flex: none; }
.mention-list .mention-name { font-weight: 600; }
.mention-list .mention-role { margin-left: auto; padding-left: 10px; font-size: .75rem; color: var(--muted); }
.mention-list .mention-none { color: var(--muted); cursor: default; }
.mention-hint .mention-names { display: inline; }
.mention-hint .mention-names > summary { display: inline; cursor: pointer; color: var(--blue); margin-left: 4px; }
/* ---------- Documents, videos and links (the library, and with a question): one calm row each ---------- */
/* A small picture (the first page, or the video's poster), the title with what kind it is under it, and one quiet
   label for where they are with it. Unread: bold, with Frank's red "needs you" line. */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-item { position: relative; }
.doc-item.attention::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--attention); }
.doc-link { display: flex; align-items: center; gap: 12px; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.doc-link:hover { background: var(--brand-soft); color: var(--ink); }
.doc-link:hover .doc-title { color: var(--blue); }
.doc-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.doc-thumb { position: relative; flex: none; width: 40px; height: 52px; display: grid; place-items: center; border-radius: 5px; overflow: hidden;
    background: var(--surface-2); box-shadow: 0 0 0 1px rgba(20, 30, 24, .09), 0 1px 3px rgba(20, 30, 24, .08); }
.doc-thumb canvas, .doc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #fff; }
.doc-thumb canvas { opacity: 0; transition: opacity .25s ease; }
.doc-thumb canvas.is-drawn { opacity: 1; }
.doc-icon { width: 20px; height: 20px; fill: var(--muted); }
.doc-thumb.is-video { width: 52px; height: 40px; background: #26322b; }
.doc-thumb.is-video .doc-icon { fill: rgba(255, 255, 255, .7); }
.doc-thumb.is-link { background: var(--blue-soft); }
.doc-thumb.is-link .doc-icon { fill: var(--blue); }
.doc-play { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.doc-play svg { width: 11px; height: 11px; fill: #fff; margin-left: 1px; }
.doc-thumb.is-video:not(:has(img)) .doc-play { display: none; }   /* without a poster, the big play icon is enough */
.doc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.doc-title { font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-item.is-unread .doc-title { font-weight: 700; }
.doc-meta { font-size: .74rem; color: var(--muted); letter-spacing: .01em; }
.doc-tag { flex: none; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.doc-tag.is-todo { background: var(--amber-soft); color: var(--amber); }
.doc-tag.is-done { background: var(--green-soft); color: var(--green-dark); font-weight: 500; }
.read-first .doc-list { margin-top: 6px; }.doc-thumb:not(.is-video) { margin: 0 6px; }   /* the same width as a video's, so the titles line up */
/* In a narrow column (the sidebar library) the label moves onto the type line, so titles have the width */
.doc-list { container-type: inline-size; }
.doc-tag-inline { display: none; font-weight: 600; }
.doc-tag-inline.is-todo { color: var(--amber); }
.doc-tag-inline.is-done { color: var(--green-dark); font-weight: 500; }
@container (max-width: 380px) {
    .doc-tag { display: none; }
    .doc-tag-inline { display: inline; }
}

/* "Are you still there?" before signing out for inactivity (idle.js) */
dialog.idle-dialog { max-width: min(440px, calc(100vw - 32px)); padding: 22px 24px; border: 0; border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0, 0, 0, .25); }
dialog.idle-dialog::backdrop { background: rgba(20, 30, 24, .45); }
dialog.idle-dialog h2 { margin: 0 0 8px; }
.idle-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }

/* Appearance on "Your account": Match my computer / Light / Dark, the current one pressed */
.theme-choice { display: inline-flex; margin: 4px 0 0; border: 1px solid var(--input-line); border-radius: 8px; overflow: hidden; background: var(--card); }
.theme-choice button { padding: 7px 14px; border: 0; border-left: 1px solid var(--input-line); border-radius: 0; background: transparent; color: var(--ink-2); font: 600 .85rem var(--sans); cursor: pointer; }
.theme-choice button:first-child { border-left: 0; }
.theme-choice button:hover { background: var(--surface-2); color: var(--ink); }
.theme-choice button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 0 -2px 0 var(--brand); }

/* Signing in (and the code and password pages): the old Frank's advisory board video behind the card (the picture
   until it plays), lightly veiled so the card stands out (darker in dark mode), with a small Pause button. Not on
   phones, where the card fills the width. */
:root { --backdrop-veil: rgba(251, 251, 251, .35); --card-glass: rgba(255, 255, 255, .76); }
:root[data-theme="dark"] { --backdrop-veil: rgba(18, 22, 20, .6); --card-glass: rgba(26, 32, 28, .74); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --backdrop-veil: rgba(18, 22, 20, .6); --card-glass: rgba(26, 32, 28, .74); } }
.backdrop, .backdrop-pause { display: none; }
@media (min-width: 641px) {
    .has-backdrop .page-area { position: relative; isolation: isolate; min-height: calc(100vh - 60px); display: flex; flex-direction: column; }
    /* Fixed to the window below the header, so it carries on behind the help panel too */
    .backdrop { display: block; position: fixed; top: 60px; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden;
        background: url("/img/sign-in.jpg") center 30% / cover no-repeat; }
    .backdrop::after { content: ""; position: absolute; inset: 0; background: var(--backdrop-veil); }
    .backdrop-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
    .backdrop-pause:not([hidden]) { display: inline-flex; position: absolute; right: 16px; bottom: 16px; z-index: 1; align-items: center;
        height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2);
        font: 600 .78rem var(--sans); cursor: pointer; opacity: .85; }
    .backdrop-pause:hover, .backdrop-pause:focus-visible { opacity: 1; }
    .has-backdrop .site-main { flex: 1; width: 100%; }
    /* The box and the help panel let a little of the video through, softened (frosted), so they read without distracting */
    .has-backdrop .card.narrow { margin-top: 48px; box-shadow: 0 10px 40px rgba(0, 0, 0, .22); background: var(--card-glass);
        -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
    .has-backdrop .help-panel { background: var(--card-glass); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
    .has-backdrop .site-footer { width: 100%; }
    .has-backdrop .site-footer, .has-backdrop .site-footer a { color: var(--ink); text-shadow: 0 0 6px var(--card); }
}

/* "View as" practice tabs (Services/Practice): an amber bar across the top of every page, always visible */
.practice-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 36px; padding: 6px 24px;
    background: var(--pill-yellow); color: var(--pill-yellow-ink); font-size: .85rem; border-bottom: 1px solid var(--hl-line); }
.practice-note { flex-basis: 100%; order: 3; font-weight: 600; }
.practice-exit { margin-left: auto; padding: 3px 14px; border-radius: 999px; background: var(--pill-yellow-ink); color: var(--pill-yellow); font-weight: 700; text-decoration: none; }
.practice-exit:hover { color: var(--pill-yellow); filter: brightness(1.15); }
@media (min-width: 641px) { .is-practice .help-panel { top: 96px; } }
@media (max-width: 640px) { .practice-bar { padding: 6px 16px; } }

/* "View as": choosing a role */
.role-choice { margin: 16px 0; padding: 0; border: 0; display: grid; gap: 8px; }
.role-choice label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 400; }
.role-choice label:hover { border-color: var(--brand); }
.role-choice label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.role-choice input { margin-top: 4px; accent-color: var(--brand); }
.role-choice strong { display: block; }
.role-choice .note { display: block; margin: 2px 0 0; }
.matrix td.na { color: var(--muted); background: var(--surface-2); }

/* ---------- Answer and reply boxes (9 Oct 2026, Chris): icons in the box's top-right corner, small to start, growing ---------- */
.composer { position: relative; flex: 1 1 auto; min-width: 0; width: 100%; }
.composer textarea, .composer .fmt-surface { padding-right: 82px; }
.composer textarea { resize: none; overflow-y: auto; min-height: 2.6em; }
.composer-tools { position: absolute; top: 5px; right: 6px; display: flex; gap: 2px; }
.composer-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--muted); font: 700 .9rem var(--serif); cursor: pointer; }
.composer-icon:hover, .composer-icon:focus-visible { background: var(--grey-soft); color: var(--ink); }
.fmt-toggle.composer-icon[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-ink); }
.voice-btn.composer-icon { border: 0; gap: 0; color: var(--muted); }
.voice-btn.composer-icon:hover { background: var(--grey-soft); color: var(--blue); }
.voice-btn.composer-icon .mic-icon { width: 17px; height: 17px; fill: currentColor; }
.voice-btn.composer-icon > span:not(.voice-dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.voice-btn.composer-icon.is-recording { display: inline-flex; width: auto; padding: 0 10px; gap: 6px; color: var(--red); background: var(--red-soft); font: 600 .8rem var(--sans); }
.voice-btn.composer-icon.is-recording > span { position: static; width: auto; height: auto; clip-path: none; }
.fmt-bar:has(> .fmt-tools[hidden]) { display: none; }
.composer + .voice { margin: 4px 0 0; }
.composer + .voice:not(:has(.voice-status:not(:empty))):not(:has(.voice-consent:not([hidden]))) { display: none; }
.reply-form { align-items: flex-start; }
.reply-form .composer { flex: 1 1 300px; }
.reply-form .mention-hint, .reply-form .voice { flex-basis: 100%; order: 3; margin: 0; }
.mention-hint.is-waiting { display: none; }

/* ---------- Posts: the person, the answer, then straight away the replies and the reply box ---------- */
.post { padding: 14px 18px; }
.post-top { display: flex; align-items: center; gap: 10px; }
.post-top .post-head { flex: 1; min-width: 0; }
.post-text { margin: 8px 0 4px; }
.post-signals { margin: 2px 0; }
.reply { margin-top: 8px; padding: 8px 12px; }
.reply-form { margin-top: 8px; }
.post-highlight { flex-shrink: 0; }
.highlight-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--muted); font: 600 .72rem var(--sans); cursor: pointer; }
.highlight-btn span { color: #c9a227; }
.highlight-btn:hover { background: var(--pill-yellow); color: var(--pill-yellow-ink); border-color: var(--hl-line); }
.highlight-btn.is-on { background: var(--pill-yellow); color: var(--pill-yellow-ink); border-color: var(--hl-line); }

/* ---------- The question list: more room, lighter marks, round counts ---------- */
.qnav-list { padding: 8px 8px 10px; }
.qnav-topic { margin-top: 10px; }
.qnav-topic:first-child { margin-top: 2px; }
.qnav-topic-name { margin: 6px 10px 5px; }
.qnav-topic ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.qnav-q { gap: 9px; padding: 7px 10px; border-left-width: 2px; border-radius: 8px; }
.qnav-q.is-current { background: var(--brand-soft); border-left-color: var(--brand); font-weight: 600; }
.qnav-q.attention:not(.is-current) { border-left-color: color-mix(in srgb, var(--attention) 55%, transparent); }
.qnav-num { min-width: 26px; font-weight: 600; font-size: .82rem; font-variant-numeric: tabular-nums; }
.qnav-count, .qnav-key .qnav-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
    font-size: .7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.qnav-count.has-new { background: var(--blue); }

/* The welcome, as a pop-up on the first visit */
dialog.welcome-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 26px 28px 20px; overflow-y: auto; }
dialog.welcome-dialog:not(:modal) { position: static; display: block; margin: 0 0 16px; width: auto; border: 1px solid var(--line); box-shadow: var(--shadow); }
.welcome-actions { margin: 18px 0 0; text-align: right; }

/* A document over the page (site.js), and a document on its own (?embed=1) */
dialog.doc-modal { width: min(1100px, calc(100vw - 32px)); height: calc(100vh - 48px); max-height: none; display: none; flex-direction: column; overflow: hidden; }
dialog.doc-modal[open] { display: flex; }
.doc-modal-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--line); }
.doc-modal-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1rem var(--serif); color: var(--blue); }
.doc-modal-window { white-space: nowrap; font-size: .85rem; }
.doc-modal-close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer; }
.doc-modal-close:hover { background: var(--grey-soft); color: var(--ink); }
.doc-modal-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
.is-embed { background: var(--bg); }
.embed-main { max-width: 1000px; margin: 0 auto; padding: 16px 20px 32px; }
.is-embed .doc-head h1 { font-size: 1.3rem; }

/* "Can't sign in?" under the sign-in form */
.cant-sign-in { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; }
.cant-sign-in > summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.cant-sign-in ul { margin: 10px 0 0; padding-left: 1.2em; color: var(--ink-2); }
.cant-sign-in li { margin: 6px 0; }

/* "Frank in 60 seconds": the top bar's button and its pop-up player (as the enlarged-picture view) */
.guide-btn { border: 0; cursor: pointer; }
.guide-btn .play-icon { font-size: .62rem; padding-left: 2px; }
@media (max-width: 760px) { .guide-btn .help-label { display: none; } }
dialog.guide-modal { width: min(92vw, 1280px); max-width: none; padding: 0; overflow: hidden; border-radius: 16px; background: #000; box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
dialog.guide-modal::backdrop { background: rgba(10, 14, 12, .72); }
.guide-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 64px); background: #000; }
.guide-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 1rem; cursor: pointer; }
.guide-close:hover, .guide-close:focus-visible { background: rgba(0, 0, 0, .8); }
@media (max-width: 640px) {
    dialog.guide-modal { width: 100vw; height: 100vh; max-height: none; margin: 0; border-radius: 0; display: none; }
    dialog.guide-modal[open] { display: flex; align-items: center; }
    .guide-modal video { max-height: 100vh; }
}
.welcome-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-wrap: wrap; }
.calendar-link { margin: 10px 0 0; font-size: .88rem; }
.calendar-link a { font-weight: 600; text-decoration: none; }
.calendar-link a:hover { text-decoration: underline; }
.calendar-link a { display: inline-flex; align-items: center; gap: 6px; }
.calendar-icon { width: 16px; height: 16px; fill: currentColor; }

/* The moderator co-pilot: a quiet suggested follow-up under a participant's answer (moderators and chairs) */
.followup { margin: 8px 0 4px 28px; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface-2); font-size: .88rem; }
.followup-label { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.followup-ai { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.followup-text { margin: 0; color: var(--ink); }
.followup-text.is-editing { padding: 4px 6px; border: 1px solid var(--brand); border-radius: 6px; background: var(--card); outline: none; }
.followup-why { margin: 3px 0 0; font-size: .78rem; color: var(--muted); font-style: italic; }
.followup-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.followup-actions button.small { padding: 4px 12px; border: 1px solid var(--brand); border-radius: 999px; background: var(--card); color: var(--brand-ink); font: 600 .8rem var(--sans); cursor: pointer; }
.followup-actions button.small:hover { background: var(--brand-soft); }
.followup.is-used { opacity: .55; }
.followup-done { margin: 6px 0 2px 28px; font-size: .78rem; color: var(--muted); }

/* The Frank app for iPhone and Android (Services/AppSite, docs/frank-app-plan.md): inside the app the page fills the
   phone's screen (viewport-fit=cover, set only there), so the header runs up under the status bar and keeps clear of the
   notch and the Dynamic Island, and the page's foot keeps clear of the home bar */
body.in-app .site-header { padding-top: env(safe-area-inset-top, 0px); }
body.in-app { padding-bottom: env(safe-area-inset-bottom, 0px); }