/* ==========================================================================
   ORGanizer for Salesforce — site design system
   Self-contained: replaces bootstrap.min.css / freelancer.css / site.css.
   Keeps the Bootstrap 3 class contract alive for the one page deliberately
   left unrestyled (manageLicense.html) and for the change log, whose entries
   are a dump of a Salesforce page. No Bootstrap JavaScript is loaded any
   more, so the classes its plugins used to toggle are gone with it.
   ========================================================================== */

/* The fonts are the site's own (public/fonts, SIL Open Font License): Google
   Fonts would hand every visitor's address to Google before any choice.
   Variable files, one per script, each covering every weight the site uses. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/inter-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: "Montserrat";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("/fonts/montserrat-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("/fonts/montserrat-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;
}

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
    /* Palette — light */
    --bg:               #f7f8fa;
    --bg-alt:           #eef1f6;
    --surface:          #ffffff;
    --surface-2:        #f1f3f7;
    --surface-3:        #e7ebf2;
    --border:           #e2e6ee;
    --border-strong:    #ccd4e2;

    --text:             #1b2333;
    --text-2:           #4a5568;
    --text-3:           #6b7688;
    --text-inverse:     #ffffff;

    --accent:           #1b6ec2;
    --accent-hover:     #14568f;
    --accent-soft:      #e8f1fb;
    --accent-border:    #b9d6f2;

    --success:          #16794a;
    --success-soft:     #e6f5ed;
    --success-border:   #b3ddc7;

    --warning:          #8a5a00;
    --warning-soft:     #fdf3e0;
    --warning-border:   #efd9a8;

    --danger:           #b3302a;
    --danger-soft:      #fdecea;
    --danger-border:    #f3c4c0;

    --purple:           #6c3fb5;
    --purple-soft:      #f1ebfc;
    --purple-border:    #d7c6f4;

    /* Typography */
    --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-brand: "Montserrat", var(--font-sans);
    --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --fs-base:    17px;
    --lh-base:    1.7;
    --measure:    72ch;

    /* Space & shape */
    --radius-sm:  4px;
    --radius:     8px;
    --radius-lg:  14px;
    --shadow-sm:  0 1px 2px rgba(16, 24, 40, .05);
    --shadow:     0 2px 8px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-lg:  0 12px 32px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .05);

    --header-h:   58px;
    --container:  1140px;
    --container-wide: 1420px;

    color-scheme: light;
}

/* Palette — dark. Applied when the visitor asked for dark, or when the
   system prefers dark and the visitor has not asked for light. */
:root[data-theme="dark"] {
    --bg:               #0f1320;
    --bg-alt:           #131828;
    --surface:          #171c2b;
    --surface-2:        #1e2435;
    --surface-3:        #262e42;
    --border:           #2a3245;
    --border-strong:    #3a4459;

    --text:             #e6e9f0;
    --text-2:           #aab3c6;
    --text-3:           #8a94a8;
    --text-inverse:     #0f1320;

    --accent:           #6aa9f0;
    --accent-hover:     #92c2f7;
    --accent-soft:      #14243c;
    --accent-border:    #29456d;

    --success:          #58c795;
    --success-soft:     #10281e;
    --success-border:   #23503c;

    --warning:          #e0b355;
    --warning-soft:     #2a2113;
    --warning-border:   #55431f;

    --danger:           #f08a82;
    --danger-soft:      #2d1715;
    --danger-border:    #5c2b27;

    --purple:           #b192ee;
    --purple-soft:      #201a33;
    --purple-border:    #3d3163;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
    --shadow:     0 2px 8px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg:  0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);

    color-scheme: dark;
}
/* Same palette when the browser asks for dark and the visitor has not
   explicitly chosen light. Generated from the block above — keep in sync. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --bg:               #0f1320;
    --bg-alt:           #131828;
    --surface:          #171c2b;
    --surface-2:        #1e2435;
    --surface-3:        #262e42;
    --border:           #2a3245;
    --border-strong:    #3a4459;

    --text:             #e6e9f0;
    --text-2:           #aab3c6;
    --text-3:           #8a94a8;
    --text-inverse:     #0f1320;

    --accent:           #6aa9f0;
    --accent-hover:     #92c2f7;
    --accent-soft:      #14243c;
    --accent-border:    #29456d;

    --success:          #58c795;
    --success-soft:     #10281e;
    --success-border:   #23503c;

    --warning:          #e0b355;
    --warning-soft:     #2a2113;
    --warning-border:   #55431f;

    --danger:           #f08a82;
    --danger-soft:      #2d1715;
    --danger-border:    #5c2b27;

    --purple:           #b192ee;
    --purple-soft:      #201a33;
    --purple-border:    #3d3163;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
    --shadow:     0 2px 8px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg:  0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);

    color-scheme: dark;
}
}


/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; border: 0; vertical-align: middle; }

hr {
    height: 1px;
    margin: 2.5rem 0;
    border: 0;
    background: var(--border);
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    transition: color .12s ease, text-decoration-color .12s ease;
}
a:hover, a:focus {
    color: var(--accent-hover);
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection { background: var(--accent-soft); color: var(--text); }

/* Anything with an id can be an anchor target: keep it clear of the header. */
[id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    color: var(--text);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.011em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.85rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2rem); letter-spacing: -.018em; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; }
h5 { font-size: .97rem; }
h6 { font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }

p  { margin: 0 0 1.1rem; }

small, .small { font-size: .84em; }
strong, b { font-weight: 650; color: var(--text); }
em, i { font-style: italic; }
sup, sub { font-size: .72em; line-height: 0; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.6em; }
li { margin-bottom: .4rem; }
li > ul, li > ol { margin-top: .4rem; margin-bottom: .4rem; }
ul ul { list-style-type: circle; }

dl { margin: 0 0 1.1rem; }
dt { font-weight: 650; }
dd { margin: 0 0 .7rem; color: var(--text-2); }

blockquote {
    margin: 1.5rem 0;
    padding: .2rem 0 .2rem 1.15rem;
    border-left: 3px solid var(--accent-border);
    color: var(--text-2);
    font-style: normal;
}
blockquote > :last-child { margin-bottom: 0; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: .88em; }

code {
    padding: .14em .38em;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    white-space: nowrap;
}

pre {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    line-height: 1.6;
    tab-size: 2;
}
pre code {
    padding: 0;
    border: 0;
    background: none;
    white-space: pre;
    font-size: .95em;
}

/* Keycaps. `.shortcut` is the legacy class used throughout the FAQ. */
kbd, .shortcut, .kbd {
    display: inline-block;
    padding: .12em .5em;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: .8em;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: baseline;
}

/* Lead paragraph */
.lead {
    margin-bottom: 1.4rem;
    color: var(--text-2);
    font-size: 1.14em;
    line-height: 1.6;
}

.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap  { white-space: nowrap; }
.text-uppercase { text-transform: uppercase; }

.text-muted   { color: var(--text-3); }
.text-primary { color: var(--accent); }
.text-info    { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-default { color: var(--text); }

.bg-surface   { background: var(--surface); }

/* --------------------------------------------------------------------------
   4. Layout — container, Bootstrap 3 grid contract, page shells
   -------------------------------------------------------------------------- */

.container, .container-fluid {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 20px;
}
.container-fluid { max-width: none; }
.container-wide  { max-width: var(--container-wide); }

/* Bootstrap 3 row/col contract, reimplemented on flexbox. Percentage widths
   keep old markup (col-md-9 + col-md-3) laying out as its author intended. */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -15px;
}
.row::after { content: ""; display: table; clear: both; }

[class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-inline: 15px;
}

.col-xs-1  { width: 8.3333%; }  .col-xs-2  { width: 16.6667%; }
.col-xs-3  { width: 25%; }      .col-xs-4  { width: 33.3333%; }
.col-xs-5  { width: 41.6667%; } .col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.3333%; } .col-xs-8  { width: 66.6667%; }
.col-xs-9  { width: 75%; }      .col-xs-10 { width: 83.3333%; }
.col-xs-11 { width: 91.6667%; } .col-xs-12 { width: 100%; }

@media (min-width: 768px) {
    .col-sm-1  { width: 8.3333%; }  .col-sm-2  { width: 16.6667%; }
    .col-sm-3  { width: 25%; }      .col-sm-4  { width: 33.3333%; }
    .col-sm-5  { width: 41.6667%; } .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.3333%; } .col-sm-8  { width: 66.6667%; }
    .col-sm-9  { width: 75%; }      .col-sm-10 { width: 83.3333%; }
    .col-sm-11 { width: 91.6667%; } .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
    .col-md-1  { width: 8.3333%; }  .col-md-2  { width: 16.6667%; }
    .col-md-3  { width: 25%; }      .col-md-4  { width: 33.3333%; }
    .col-md-5  { width: 41.6667%; } .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.3333%; } .col-md-8  { width: 66.6667%; }
    .col-md-9  { width: 75%; }      .col-md-10 { width: 83.3333%; }
    .col-md-11 { width: 91.6667%; } .col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
    .col-lg-1  { width: 8.3333%; }  .col-lg-2  { width: 16.6667%; }
    .col-lg-3  { width: 25%; }      .col-lg-4  { width: 33.3333%; }
    .col-lg-5  { width: 41.6667%; } .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.3333%; } .col-lg-8  { width: 66.6667%; }
    .col-lg-9  { width: 75%; }      .col-lg-10 { width: 83.3333%; }
    .col-lg-11 { width: 91.6667%; } .col-lg-12 { width: 100%; }
}

.pull-right   { float: right !important; }
.pull-left    { float: left !important; }
.center-block { display: block; margin-inline: auto; }
.clearfix::after { content: ""; display: table; clear: both; }
.img-responsive, .img-centered { display: block; max-width: 100%; height: auto; }
.img-centered { margin-inline: auto; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
@media (max-width: 767px)  { .hidden-xs { display: none !important; } }
@media (min-width: 768px)  { .visible-xs { display: none !important; } }
@media (min-width: 992px)  { .visible-sm { display: none !important; } }
@media (max-width: 991px) and (min-width: 768px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px)  { .hidden-md-up { display: none !important; } }

/* ---- The page shell -----------------------------------------------------
   .page is a grid: the content, and the columns its template gives the page
   (/admin/layout, utils/layout.js; partials/page-start.html, page-rail.html):
   page--left (a left sidebar, or a docs page's table of contents), page--right
   (the rail), page--bare (neither), then the band above the site footer
   (.page-foot), the grid's last row. Below the breakpoints a single column:
   a docs page's table of contents first, then the content, the left sidebar,
   the rail and the band. It replaces the old `row > col-md-9 + col-md-3`. */

.page {
    display: grid;
    gap: 2.5rem 2.5rem;
    align-items: start;
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 2rem 20px 4rem;
    grid-template-columns: minmax(0, 1fr);
}
.page__main { min-width: 0; }
.page__rail { min-width: 0; }
.page__left { min-width: 0; }
.page-foot { grid-column: 1 / -1; min-width: 0; }

@media (max-width: 999.98px) {
    .page > .page__left:not(.page__left--docs) { order: 1; }
    .page > .page__rail { order: 2; }
    .page > .page-foot { order: 3; }
}

@media (min-width: 1080px) {
    .page--right { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* The left column: a docs page's sticky table of contents, a left sidebar. */
@media (min-width: 1000px) {
    .page--left {
        grid-template-columns: 232px minmax(0, 1fr);
        gap: 2.5rem 3rem;
    }
    .page--left.page--right .page__rail { grid-column: 1 / -1; }
}
@media (min-width: 1360px) {
    .page--left.page--right { grid-template-columns: 232px minmax(0, 1fr) 300px; }
    .page--left.page--right .page__rail { grid-column: auto; }
}
/* a docs page's column: the left sidebar's widgets above its table of contents
   on a wide screen (the TOC sticks), under it on a narrow one (the TOC first) */
.page__left--docs { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1000px) {
    .page__left--docs { align-self: stretch; }
}
@media (max-width: 999.98px) {
    .page__left--docs > .docs-toc { order: -1; }
}

/* Prose column: cap the measure so long documentation stays readable. */
.prose { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2.75rem; }
.prose h3 { margin-top: 2.25rem; }
.prose h4 { margin-top: 1.75rem; }
.prose img { border-radius: var(--radius); }
.page--docs .prose { max-width: 76ch; }

/* Vertical rhythm helpers */
.stack-sm > * + * { margin-top: .75rem; }
.stack    > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: 2.5rem; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   5. Site header / navigation
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) {
    .site-header { background: var(--bg); }
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 0 20px;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex: 0 0 auto;
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: -.01em;
    line-height: 1.1;
}
.brand:hover, .brand:focus { color: var(--text); }
.brand img { width: 30px; height: auto; }
.brand__mark { color: var(--accent); }
.brand__tag {
    display: block;
    color: var(--text-3);
    font-family: var(--font-sans);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-left: auto;
    flex-wrap: wrap;
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .62rem;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.site-nav a:hover, .site-nav a:focus {
    background: var(--surface-2);
    color: var(--text);
}
.site-nav a[aria-current="page"] {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 600;
}
.site-nav img { width: 17px; height: 17px; }
/* a group of the menu (navigation.html): Docs, a link with a caret beside it; Community, a caret of its own */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group__caret { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .45rem; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-2); font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.nav-group__top.nav-group__caret { padding: .42rem .62rem; }
.nav-group__caret .fa-caret-down { font-size: .8em; opacity: .7; }
.nav-group__caret:hover, .nav-group__caret:focus-visible, .nav-group.is-open > .nav-group__caret { background: var(--surface-2); color: var(--text); }
.nav-group.is-current > .nav-group__top { color: var(--accent); font-weight: 600; }
.nav-group__menu { position: absolute; top: 100%; left: 0; z-index: 60; display: none; flex-direction: column; min-width: 13rem;
    padding: .35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
/* the gap between the item and its menu belongs to the menu, so the pointer can cross it */
.nav-group__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-group.is-open > .nav-group__menu { display: flex; }
@media (hover: hover) and (min-width: 1024px) { .nav-group:hover > .nav-group__menu { display: flex; } }
.site-nav .nav-group__menu a { justify-content: flex-start; padding: .5rem .65rem; }
.site-nav .nav-group__menu a .fa { width: 1.1em; text-align: center; }
.site-nav .nav-group__menu a .fa-heart { width: auto; }
.site-nav__icons { display: inline-flex; gap: .18rem; }

.site-header__actions { display: inline-flex; align-items: center; gap: .35rem; margin-left: .6rem; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: .95rem;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.icon-btn:hover, .icon-btn:focus {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}

.nav-toggle { display: none; }
[data-theme="dark"] .theme-toggle .fa-moon-o,
:root:not([data-theme="dark"]) .theme-toggle .fa-sun-o { display: none; }

@media (max-width: 1023px) {
    .nav-toggle { display: inline-flex; }
    .site-header__actions { margin-left: auto; }
    .site-nav {
        display: none;
        order: 10;
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        width: 100%;
        margin: 0 -20px;
        padding: .6rem 20px 1rem;
        border-top: 1px solid var(--border);
        background: var(--bg);
    }
    .site-header__inner { flex-wrap: wrap; }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: .6rem .7rem; font-size: 1rem; }
    /* on a phone every entry is listed, a group's under its name */
    .nav-group { display: flex; flex-direction: column; align-items: stretch; }
    .nav-group > .nav-group__caret:not(.nav-group__top) { display: none; }
    .nav-group__top.nav-group__caret { justify-content: flex-start; padding: .6rem .7rem; font-size: 1rem; cursor: default; pointer-events: none; }
    .nav-group__top .fa-caret-down { display: none; }
    .nav-group__menu { position: static; display: flex; min-width: 0; padding: 0 0 0 .9rem;
        border: 0; box-shadow: none; background: none; }
    .nav-group__menu::before { display: none; }
}

/* --------------------------------------------------------------------------
   6. Page hero
   -------------------------------------------------------------------------- */

.page-head {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 2.75rem 20px .5rem;
}
.page-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .7rem;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.page-head h1 { margin-bottom: .5rem; }
.page-head__sub {
    max-width: 62ch;
    margin: 0;
    color: var(--text-2);
    font-size: 1.13rem;
    line-height: 1.6;
}
.page-head--center { text-align: center; }
.page-head--center .page-head__sub { margin-inline: auto; }

/* --------------------------------------------------------------------------
   7. Buttons (Bootstrap 3 class contract)
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .52rem 1.05rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .13s ease, border-color .13s ease, color .13s ease, transform .13s ease;
}
.btn:hover, .btn:focus { background: var(--surface-2); color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: .55; pointer-events: none; }

.btn-primary, .btn-info {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-info:hover, .btn-info:focus {
    background: var(--accent-hover);
    color: #fff;
}
.btn-success { border-color: transparent; background: var(--success); color: #fff; }
.btn-success:hover, .btn-success:focus { background: color-mix(in srgb, var(--success) 85%, #000); color: #fff; }
.btn-warning { border-color: transparent; background: var(--warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: color-mix(in srgb, var(--warning) 85%, #000); color: #fff; }
.btn-danger  { border-color: transparent; background: var(--danger);  color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: color-mix(in srgb, var(--danger) 85%, #000); color: #fff; }
.btn-default { background: var(--surface); }
.btn-link {
    padding-inline: .2rem;
    border-color: transparent;
    background: none;
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
}
.btn-link:hover, .btn-link:focus { background: none; color: var(--accent-hover); }

.btn-ghost {
    border-color: var(--border);
    background: transparent;
    color: var(--text-2);
    font-weight: 500;
}
.btn-ghost:hover, .btn-ghost:focus { background: var(--surface-2); color: var(--text); }

.btn-lg { padding: .72rem 1.4rem; font-size: 1.03rem; border-radius: var(--radius); }
.btn-sm { padding: .34rem .75rem; font-size: .86rem; }
.btn-xs { padding: .18rem .55rem; font-size: .8rem; }
.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: .6rem; }
/* a button the script hides (the account forms, once done): its display would win over [hidden] */
.btn[hidden] { display: none; }

/* Gumroad buy buttons keep their own class in the pricing table. */
.gumroad-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff !important;
    font-size: .9rem;
    font-weight: 650;
    text-decoration: none;
}
.gumroad-button:hover, .gumroad-button:focus { background: var(--accent-hover); text-decoration: none; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
.btn-row--center { justify-content: center; }

/* Social round buttons (footer) */
.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-2);
    font-size: 1rem;
    text-decoration: none;
}
.btn-social:hover, .btn-social:focus {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   8. Labels, badges, pills
   -------------------------------------------------------------------------- */

.label, .badge, .pill {
    display: inline-block;
    padding: .16em .55em;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .74em;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1.5;
    text-transform: uppercase;
    vertical-align: baseline;
    white-space: nowrap;
}
a.label:hover, a.label:focus, a.badge:hover { text-decoration: none; }
.label-default { background: var(--surface-2); color: var(--text-2); }
.label-primary, .label-info {
    border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent);
}
.label-success { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.label-warning { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.label-danger  { border-color: var(--danger-border);  background: var(--danger-soft);  color: var(--danger); }
.label-new     { border-color: var(--purple-border);  background: var(--purple-soft);  color: var(--purple); }
/* An idea of the members that shipped (the changelog's "Suggested by you"): the
   community's teal into the site's purple, white on both ends (5.5:1 and better),
   so one gradient reads on the light and the dark palette alike */
.label-suggested {
    position: relative;
    overflow: hidden;
    /* overflow moves an inline-block's baseline to its bottom edge */
    vertical-align: middle;
    border-color: transparent;
    background: linear-gradient(120deg, #0f766e 0%, #3b5bab 55%, #6c3fb5 100%);
    color: #fff;
    box-shadow: 0 1px 6px rgba(108, 63, 181, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.label-suggested .fa { color: #ffe066; }
.label-suggested::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    animation: label-suggested-shine 4s ease-in-out infinite;
    pointer-events: none;
}
a.label-suggested:hover, a.label-suggested:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(108, 63, 181, .5);
}
@keyframes label-suggested-shine {
    0%, 70% { left: -60%; }
    100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .label-suggested { transition: none; }
    .label-suggested::after { animation: none; display: none; }
}

/* --------------------------------------------------------------------------
   9. Cards & feature grids
   -------------------------------------------------------------------------- */

.card {
    padding: 1.35rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.card > :last-child { margin-bottom: 0; }
.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: .85rem;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.06rem;
}
.card h3, .card h4 { margin-top: 0; margin-bottom: .45rem; font-size: 1.05rem; }
.card p { margin-bottom: 0; color: var(--text-2); font-size: .96rem; }

.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:hover, .card-link:focus { color: inherit; }
.card-link:hover .card, .card-link:focus .card {
    border-color: var(--accent-border);
    box-shadow: var(--shadow);
}

.grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 1.75rem;
    padding: 0;
    list-style: none;
}
.grid > li { margin: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* --------------------------------------------------------------------------
   10. Callouts (alerts) — Bootstrap `.alert` plus a documentation variant
   -------------------------------------------------------------------------- */

.alert, .callout {
    position: relative;
    margin: 1.5rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: .97rem;
}
.alert > :last-child, .callout > :last-child { margin-bottom: 0; }
.alert > :first-child, .callout > :first-child { margin-top: 0; }

.callout__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .4rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.alert-info, .callout--note {
    border-color: var(--accent-border); border-left-color: var(--accent);
    background: var(--accent-soft);
}
.alert-info .callout__title, .callout--note .callout__title { color: var(--accent); }

.alert-success, .callout--tip {
    border-color: var(--success-border); border-left-color: var(--success);
    background: var(--success-soft);
}
.alert-success .callout__title, .callout--tip .callout__title { color: var(--success); }

.alert-warning, .callout--warn {
    border-color: var(--warning-border); border-left-color: var(--warning);
    background: var(--warning-soft);
}
.alert-warning .callout__title, .callout--warn .callout__title { color: var(--warning); }

.alert-danger, .callout--gone {
    border-color: var(--danger-border); border-left-color: var(--danger);
    background: var(--danger-soft);
}
.alert-danger .callout__title, .callout--gone .callout__title { color: var(--danger); }

.callout--new {
    border-color: var(--purple-border); border-left-color: var(--purple);
    background: var(--purple-soft);
}
.callout--new .callout__title { color: var(--purple); }

/* the technical details a page folds away (the FAQ's Encryption): for whoever wants them */
.faq-details {
    margin: 1.2rem 0;
    padding: .7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
}
.faq-details > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.faq-details[open] > summary { margin-bottom: .6rem; }
.faq-details .table-scroll { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Figures & screenshot placeholders
   -------------------------------------------------------------------------- */

.figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.6rem 0;
}
.figure > a { display: block; max-width: 100%; }
/* two narrow screenshots side by side (the extension's panel), one under the other on a phone */
.figure-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; }
.figure-row > .figure { flex: 0 1 320px; min-width: 0; }
.figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.figure figcaption, .figure__caption {
    margin-top: .6rem;
    color: var(--text-3);
    font-size: .86rem;
    text-align: center;
}

/* Placeholder for a screenshot that still has to be produced. Deliberately
   visible: it is a to-do, not a decoration. */
.shot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 168px;
    margin: 1.6rem 0;
    padding: 1.6rem 1.25rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: repeating-linear-gradient(
        135deg,
        var(--surface-2) 0 10px,
        var(--surface) 10px 20px
    );
    color: var(--text-3);
    text-align: center;
}
.shot__icon { font-size: 1.7rem; opacity: .65; }
.shot__label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}
.shot__desc { max-width: 46ch; margin: 0; font-size: .92rem; color: var(--text-2); }
.shot code { white-space: normal; }

/* --------------------------------------------------------------------------
   12. Tables
   -------------------------------------------------------------------------- */

.table-scroll, .table-responsive { overflow-x: auto; margin-bottom: 1.6rem; }

table { border-collapse: collapse; }

.table {
    width: 100%;
    margin-bottom: 1.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: .95rem;
    border-collapse: separate;
    border-spacing: 0;
}
.table th, .table td {
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.table thead th {
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: bottom;
}
.table tbody tr:last-child > * { border-bottom: 0; }
.table-striped tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.table-hover tbody tr:hover { background: var(--surface-2); }
.table-condensed th, .table-condensed td { padding: .45rem .6rem; }
.table-bordered th, .table-bordered td { border-right: 1px solid var(--border); }
.table-bordered th:last-child, .table-bordered td:last-child { border-right: 0; }
.table input[type="text"] { width: 100%; }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */

.form-group { margin-bottom: 1.1rem; }
label { display: inline-block; margin-bottom: .35rem; font-size: .93rem; font-weight: 600; }

.form-control {
    display: block;
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.5;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control[readonly] { background: var(--surface-2); color: var(--text-2); }
.input-sm { padding: .35rem .55rem; font-size: .88rem; }
.input-lg { padding: .65rem .85rem; font-size: 1.02rem; }
.help-block { display: block; margin-top: .3rem; color: var(--text-3); font-size: .85rem; }
.has-warning .form-control { border-color: var(--warning-border); }
.has-error .form-control   { border-color: var(--danger-border); }
.form-control[aria-invalid="true"] { border-color: var(--danger); }

@media (min-width: 768px) {
    .form-horizontal .form-group {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        margin-inline: 0;
    }
    .form-horizontal .form-group > label { padding-top: .5rem; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   14. Panels, wells, lists — Bootstrap 3 leftovers
   -------------------------------------------------------------------------- */

.panel {
    margin-bottom: 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.panel-heading {
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0;
}
.panel-title { margin: 0; font-size: 1rem; font-weight: 650; }
.panel-body { padding: 1.15rem; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-footer { padding: .8rem 1.1rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.panel-primary { border-color: var(--accent-border); }
.panel-primary > .panel-heading { background: var(--accent-soft); color: var(--accent); }

.well {
    padding: 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.list-inline { padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.list-inline > li { margin: 0; }
.list-unstyled { padding-left: 0; list-style: none; }
.list-unstyled > li { margin-bottom: .3rem; }

/* --------------------------------------------------------------------------
   15. Docs table of contents
   -------------------------------------------------------------------------- */

.docs-toc { min-width: 0; font-size: .9rem; }

@media (min-width: 1000px) {
    .docs-toc {
        position: sticky;
        top: calc(var(--header-h) + 1.25rem);
        max-height: calc(100vh - var(--header-h) - 2.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: .35rem;
    }
    .docs-toc::-webkit-scrollbar { width: 8px; }
    .docs-toc::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
}

.docs-toc__title {
    margin: 0 0 .6rem;
    color: var(--text-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.docs-toc ol, .docs-toc ul { margin: 0; padding: 0; list-style: none; }
.docs-toc li { margin: 0; }
.docs-toc a {
    display: block;
    padding: .3rem .6rem;
    border-left: 2px solid var(--border);
    color: var(--text-2);
    text-decoration: none;
    line-height: 1.45;
}
.docs-toc a:hover, .docs-toc a:focus { border-left-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.docs-toc a.is-active {
    border-left-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
/* A section inside a chapter: further in and smaller. The sections sit in a
   <ul> inside the chapters' <ol>, so the rule cannot name the list types
   (it used to say "ol ol, ul ul" and matched none of them). */
.docs-toc li li a { padding-left: 1.6rem; font-size: .8rem; line-height: 1.4; padding-top: .22rem; padding-bottom: .22rem; }

/* Small screens: the TOC folds behind a toggle. The default state lives in
   CSS, so the page renders correctly before any script runs. */
.docs-toc__toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    margin-bottom: 1.75rem;
    padding: .65rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}
.docs-toc__toggle::after {
    content: "\f107";
    margin-left: auto;
    font-family: FontAwesome;
    font-weight: 400;
    color: var(--text-3);
}
.docs-toc__toggle[aria-expanded="true"]::after { content: "\f106"; }
.docs-toc__toggle[aria-expanded="true"] { margin-bottom: .8rem; }

.docs-toc__nav { display: none; margin-bottom: 1.75rem; }
.docs-toc__nav.is-open { display: block; }

@media (min-width: 1000px) {
    .docs-toc__toggle { display: none; }
    .docs-toc__nav { display: block; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   16. Documentation sections & self-links
   -------------------------------------------------------------------------- */

.doc-section { padding-top: 1rem; }
.doc-section + .doc-section { margin-top: 3.25rem; }
.doc-section > h2:first-child { margin-top: 0; }

.doc-section h2, .doc-section h3 { position: relative; }

.anchor-link {
    margin-left: .4rem;
    color: var(--text-3);
    font-size: .62em;
    text-decoration: none;
    opacity: 0;
    transition: opacity .12s ease;
}
h2:hover > .anchor-link, h3:hover > .anchor-link,
.anchor-link:focus { opacity: 1; }
.anchor-link:hover { color: var(--accent); }

.go-to-top {
    float: right;
    color: var(--text-3);
    font-size: .55em;
    text-decoration: none;
}

/* Definition-style feature list used in the FAQ */
.deflist { margin: 1.25rem 0; }
.deflist > div {
    padding: .85rem 0;
    border-top: 1px solid var(--border);
}
.deflist > div:last-child { border-bottom: 1px solid var(--border); }
.deflist dt, .deflist__term {
    margin-bottom: .2rem;
    font-weight: 650;
}
.deflist dd, .deflist__desc { margin: 0; color: var(--text-2); font-size: .96rem; }

/* Legacy: the old table-of-contents block on faq.html / changelog.html */
.table-of-contents {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.table-of-contents ol { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Sponsor rail
   -------------------------------------------------------------------------- */

.page__rail { font-size: .93rem; }
.page__rail img { border-radius: var(--radius-sm); }

.rail-card {
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.rail-card + .rail-card { margin-top: 1.15rem; }
.rail-card__title {
    margin: 0 0 .85rem;
    color: var(--text-3);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.rail-card p:last-child { margin-bottom: 0; }
.rail-stack > * + * { margin-top: 1rem; }
.rail-stack a { display: inline-block; }

@media (min-width: 1080px) {
    .page__rail--sticky {
        position: sticky;
        top: calc(var(--header-h) + 1.25rem);
    }
}

/* Legacy sponsor sidebar classes */
.amzn-banner, .sidebar-banner { display: block; }
.appexchange-logo-fixed { display: block; text-align: center; }
.banner-section, .banner-fixed { display: block; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--text-2);
    font-size: .93rem;
}
.site-footer__inner {
    display: grid;
    gap: 2rem;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 2.75rem 20px 2rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.site-footer h3 {
    margin: 0 0 .8rem;
    color: var(--text-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.site-footer a { color: var(--text-2); }
.site-footer a:hover, .site-footer a:focus { color: var(--accent); }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: .35rem; }

.site-footer__bottom {
    border-top: 1px solid var(--border);
}
.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 1.1rem 20px 1.5rem;
    color: var(--text-3);
    font-size: .86rem;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }

.store-badges { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.store-badges img { width: 40px; height: auto; }

/* --------------------------------------------------------------------------
   19. Back to top
   -------------------------------------------------------------------------- */

.to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text-2);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   20. Home page
   -------------------------------------------------------------------------- */

.hero {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 3.5rem 20px 1rem;
}
.hero h1 { margin-bottom: .7rem; }
.hero__lede {
    max-width: 56ch;
    margin-bottom: 1.5rem;
    color: var(--text-2);
    font-size: 1.16rem;
    line-height: 1.62;
}
.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    margin-top: 1.2rem;
    color: var(--text-3);
    font-size: .87rem;
}
.hero__meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* ---- The ORGanizer button, coming up out of a cut in the page ----------
   Decoration only. The extension parks its button on the edge of a Salesforce
   tab, half out of sight, and slides it open on demand; here the page itself
   has the cut, level with the hero paragraph, and the button pokes out of it.
   Every few seconds it tries to rise a little further (see initMagicCut in
   organizer.js), then settles back: it never opens and never takes a click.
   `.hero-band` is what lets the cut run to the edge of the page rather than
   stop at the edge of the centred hero. */

.hero-band {
    position: relative;
    overflow: hidden;
}

/* The markup carries `hidden`, and an author `display` beats the browser's
   own rule for it: the decoration appears only once this file has had its
   say, so a stale copy of it leaves a bare logo and a word on the page. */
.magic-cut {
    position: absolute;
    top: 50%;
    right: 0;
    width: 42%;               /* the clear half of the hero, to the right of the text */
    display: none;            /* only where the hero has room to spare — see below */
    pointer-events: none;     /* decorative: never clickable, never focusable */
    user-select: none;
}

/* The cut clips the button: what is below the line is inside the page. The
   slot is taller than the button so a twitch has somewhere to rise into. */
.magic-cut__slot {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 64px;
    overflow: hidden;
}

.magic-cut__btn {
    --magic-peek:  12px;      /* how deep the button still sits in the cut */
    --magic-nudge: 9px;       /* how far a twitch lifts it — JS varies it */

    display: flex;
    align-items: center;
    gap: .4rem;
    height: 46px;
    padding: 0 1rem;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: var(--surface);
    box-shadow: 0 -2px 10px rgba(16, 24, 40, .1);
    transform: translateY(var(--magic-peek));
    transform-origin: bottom center;
}

.magic-cut__logo {
    width: 24px;
    height: 24px;
}

.magic-cut__name {
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
}

/* ORG carries the weight here, the way it carries the colour in the site's
   own wordmark. 700 is the heaviest Inter the page loads. */
.magic-cut__org { font-weight: 700; }

/* The cut itself: a seam that fades in out of nowhere and runs off the page. */
.magic-cut__line {
    display: block;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--border-strong) 22%, var(--border-strong));
    box-shadow: 0 1px 0 var(--surface);
}

/* One twitch: a push upwards that loses its nerve twice and sinks back. */
@keyframes magic-cut-nudge {
    0%, 100% { transform: translateY(var(--magic-peek)); }
    18%      { transform: translateY(calc(var(--magic-peek) - var(--magic-nudge))) rotate(-.6deg); }
    36%      { transform: translateY(calc(var(--magic-peek) - var(--magic-nudge) * .3)); }
    56%      { transform: translateY(calc(var(--magic-peek) - var(--magic-nudge) * .75)) rotate(.4deg); }
    78%      { transform: translateY(calc(var(--magic-peek) - var(--magic-nudge) * .12)); }
}

.magic-cut__btn.is-nudging {
    animation: magic-cut-nudge 1.4s cubic-bezier(.36, .07, .19, .97) both;
}

/* Below this the hero paragraph runs into the space the cut needs. */
@media (min-width: 1280px) {
    .magic-cut { display: block; }
}

.section {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 3rem 20px;
}
.section--alt {
    max-width: none;
    background: var(--bg-alt);
    border-block: 1px solid var(--border);
}
.section--alt > .section__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
}
/* A .section nested inside the page grid already sits in a padded column, so
   it must not add its own container width or side padding on top. */
.page__main > .section {
    max-width: none;
    margin-inline: 0;
    padding: 2.5rem 0;
}
.page__main > .section:first-of-type { padding-top: 1rem; }

.section__head { max-width: 62ch; margin-bottom: 2rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { margin-bottom: .5rem; }
.section__head p { margin-bottom: 0; color: var(--text-2); font-size: 1.06rem; }

.eyebrow {
    display: block;
    margin-bottom: .55rem;
    color: var(--accent);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Alternating "what it does" rows */
.showcase { display: grid; gap: 3rem; }
.showcase__row {
    display: grid;
    gap: 1.75rem 2.75rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) {
    .showcase__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .showcase__row--flip .showcase__text { order: 2; }
}
.showcase__text h3 { margin-top: 0; font-size: 1.32rem; }
.showcase__text p:last-child { margin-bottom: 0; }
.showcase__media img {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Gallery of screenshots */
.gallery {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    padding: 0;
    list-style: none;
}
.gallery > li { margin: 0; }
.gallery figure { margin: 0; }
.gallery img {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .13s ease, box-shadow .13s ease;
}
.gallery a:hover img, .gallery a:focus img { border-color: var(--accent-border); box-shadow: var(--shadow); }
.gallery figcaption { margin-top: .5rem; color: var(--text-2); font-size: .89rem; text-align: center; }

/* Credits columns */
.credits {
    display: grid;
    gap: .1rem 1.5rem;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    color: var(--text-2);
    font-size: .94rem;
}
.credits > li { margin: 0; }

/* Install call-to-action */
.install-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.install-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    min-width: 168px;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    text-align: center;
}
.install-card:hover, .install-card:focus {
    border-color: var(--accent-border);
    box-shadow: var(--shadow);
    color: var(--text);
}
.install-card img { width: 44px; height: 44px; }
.install-card strong { font-size: 1rem; }
.install-card small { color: var(--text-3); }

/* --------------------------------------------------------------------------
   21. Pricing table
   -------------------------------------------------------------------------- */

.pr-tbl { min-width: 780px; font-size: .93rem; }
.pr-tbl th, .pr-tbl td { text-align: center; }
.pr-tbl tbody th, .pr-tbl thead tr:nth-child(2) th:first-child {
    text-align: left;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    color: var(--text);
}
.pr-tbl tbody th { background: transparent; }
.pr-license { min-width: 118px; }
.pr-license h3 { margin: 0; font-size: 1rem; }
.pr-pricing td { font-size: 1rem; }
.pr-pricing strong { display: block; }
.pr-info { margin-top: 1rem; color: var(--text-3); font-size: .88rem; }
.pr-tbl .fa-check-circle { color: var(--success); font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   22. Legacy compatibility (pages that were not restyled)
   -------------------------------------------------------------------------- */

.main-section { min-width: 0; }
.intro-text { padding: 1.5rem 0 .5rem; }
.intro-text .name {
    display: block;
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.intro-text .skills, .intro-text > span:not(.name) {
    display: block;
    margin-top: .5rem;
    color: var(--text-2);
    font-size: 1.05rem;
}
.ui-org-title { color: var(--accent); }
/* The embedded Salesforce forms are auto-sized by iframeResizer, which needs a
   matching child script inside the framed page. Until the child answers — or
   for good, if it is not there — the frame keeps this fallback height; once it
   does, organizer.js adds .is-autosized and the real height takes over. */
.sf-frame {
    width: 100%;
    min-height: 860px;
    border: 0;
}
@media (max-width: 767px) { .sf-frame { min-height: 1040px; } }
.sf-frame.is-autosized { min-height: 0; }
.ui-portfolio-img { width: 100%; border-radius: var(--radius); }
.ui-social-btn { }
.scroll-top { display: none; }
.relase-item-image { max-width: 100%; }
center { display: block; text-align: center; }

/* The old pages wrap images in a bare <p>, sometimes inside a link. Either way
   the image is centred in the column it sits in. */
.prose p > img,
.doc-section p > img,
.prose p > a > img,
.doc-section p > a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--radius);
}
/* A link around an image has to be a block for the margin above to centre it. */
.prose p > a:has(> img),
.doc-section p > a:has(> img) { display: block; }

/* Change log: the entries are a dump of a Salesforce page, so its markup
   classes have to keep meaning something. */
.row-eq-height { display: block; }
.control-label { color: var(--text-3); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.form-control-static { margin: 0 0 .5rem; padding: 0; }
ul.form-control-static { padding-left: 1.3em; }
.release-item-content { display: block; }
.release-item-applyes-to { font-size: .8rem; }
.release-item-image { max-width: 100%; border-radius: var(--radius); }
.panel .form-horizontal .form-group { align-items: start; }
.panel .form-horizontal .form-group > .col-sm-2 { padding-left: 0; }

/* --------------------------------------------------------------------------
   23. Lightbox
   Screenshots are usually larger than the column they sit in, so clicking one
   opens it at its own size instead of navigating away.
   -------------------------------------------------------------------------- */

.is-zoomable { cursor: zoom-in; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(8, 11, 20, .88);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    width: auto;
    height: auto;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    cursor: zoom-out;
}

.lightbox__caption {
    max-width: 68ch;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .92rem;
    line-height: 1.5;
    text-align: center;
}

.lightbox__close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox__close:hover, .lightbox__close:focus {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .45);
}

body.lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   24. Ideas board (/ideas)
   Approved ideas, each with its vote button, then the proposal form; one
   idea at a time in a dialog, at its own address. organizer.js (initIdeas)
   drives all three.
   -------------------------------------------------------------------------- */

.page-head__actions { margin: 1.4rem 0 0; }

.board-head > h2, .propose-dialog__head > h2 { font-size: 1.35rem; }
.ideas-board { margin-bottom: 2.5rem; }
.ideas-empty { text-align: center; }
.ideas-empty .card__icon { margin-inline: auto; }

/* The board's heading, with how many ideas the filters leave beside it */
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; margin: 0 0 .7rem; }
.board-head > h2 { margin: 0; }
.board-summary { margin: 0; color: var(--text-3); font-size: .86rem; }
.board-summary__clear { font-weight: 600; }

/* The filters: one slim row over the list, the labels for screen readers
   only; the search box and the selects one height */
.board-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1rem; }
.board-filters .form-control { width: auto; height: 2.1rem; padding: .2rem .5rem; font-size: .86rem; line-height: 1.4; }
.board-filters select.form-control { flex: 0 1 auto; min-width: 0; max-width: 100%; cursor: pointer; }
.board-filters__search { position: relative; flex: 1 1 11rem; min-width: 0; }
.board-filters__search .form-control { width: 100%; padding-right: 2.2rem; }
/* the button that sends the form, inside the search box */
.board-filters__go {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}
.board-filters__go:hover, .board-filters__go:focus-visible { color: var(--accent); }
.board-filters__go:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.board-filters__go svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.board-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; }
.board-pager__status { color: var(--text-2); font-size: .9rem; }
@media (max-width: 600px) {
    .board-filters__search { flex-basis: 100%; }
    .board-filters select.form-control { flex: 1 1 40%; }
}

.idea-list { margin: 0; padding: 0; list-style: none; }
.idea {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    margin: 0 0 .9rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
/* a card opens its idea: all of it is the target, its title the link */
.idea[data-idea], .news[data-news-item] { cursor: pointer; transition: border-color .13s ease, box-shadow .13s ease; }
.idea[data-idea]:hover, .news[data-news-item]:hover { border-color: var(--accent-border); box-shadow: var(--shadow); }
.idea__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.idea__title { margin: .1rem 0 .35rem; font-size: 1.08rem; }
.idea__link { color: inherit; text-decoration: none; }
.idea__link:hover, .idea__link:focus-visible { color: var(--accent); text-decoration: underline; }
/* what the visitor wrote, line breaks included: it is text, never markup */
.idea__desc { margin: 0 0 .7rem; color: var(--text-2); font-size: .96rem; white-space: pre-line; }
.idea__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .88rem; }
.idea__author, .news__suggester { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.idea__author .fa, .news__suggester .fa { color: var(--avatar-fg); font-size: .85em; }
/* the member who suggested an article (views/partials/news-article.html) */
.news__suggested { color: var(--text-3); font-size: .86rem; }
.idea__date { color: var(--text-3); font-size: .84rem; }
/* where the work on an idea stands (Ideas.progressOf): to plan, planned, developed, released */
.idea-stage { display: inline-flex; align-items: center; gap: .3em; padding: .05em .55em; border: 1px solid var(--border);
    border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.idea-stage--planned { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.idea-stage--developed { border-color: var(--purple-border); background: var(--purple-soft); color: var(--purple); }
.idea-stage--released { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
/* who an idea comes from (Ideas.originOf): a community member, credited, or the ORGanizer team */
.idea-origin { display: inline-flex; align-items: center; gap: .3em; padding: .05em .5em; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: .76rem; font-weight: 700;
    letter-spacing: .01em; white-space: nowrap; }
.idea-origin--community { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
/* a card's share icons, at the end of its meta line */
.idea__share { display: inline-flex; gap: .15rem; margin-left: auto; }
.idea__share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
}
.idea__share-link:hover, .idea__share-link:focus-visible { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.idea__share-link svg { width: .85em; height: .85em; fill: currentColor; }
.idea__error { margin: .5rem 0 0; color: var(--danger); font-size: .88rem; }

.idea-vote {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    padding: .35rem .55rem .45rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-2);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.1;
    cursor: pointer;
    transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.idea-vote .fa { font-size: 1.35rem; line-height: 1; }
.idea-vote__count { font-variant-numeric: tabular-nums; }
.idea-vote:hover, .idea-vote:focus-visible { border-color: var(--accent); color: var(--accent); }
.idea-vote[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.idea-vote[disabled] { cursor: default; opacity: .55; }
.idea-vote.is-busy { cursor: progress; }

.idea-dialog {
    width: min(720px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.idea-dialog::backdrop { background: rgba(15, 19, 32, .6); backdrop-filter: blur(2px); }

/* OrgDialog (organizer.js): the site's alert, confirm and prompt, on the
   public pages and the admin's alike */
.org-dialog {
    width: min(460px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.org-dialog::backdrop { background: rgba(15, 19, 32, .6); backdrop-filter: blur(2px); }
.org-dialog__form { margin: 0; padding: 1.25rem 1.5rem 1.25rem; }
.org-dialog__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1.15rem; }
.org-dialog__title .fa { color: var(--accent); }
.org-dialog--danger .org-dialog__title .fa { color: var(--danger); }
.org-dialog__message { margin: 0; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
.org-dialog__input { margin-top: .75rem; }
.org-dialog__buttons { justify-content: flex-end; margin-top: 1.25rem; }
/* served open for an idea's address, and no script (yet) to make it modal:
   the same popup, centred, over .idea-overlay, the element after it, which
   stands in for the backdrop only then -- above the sticky header, below the
   lightbox */
.idea-dialog[open]:not(:modal) {
    position: fixed;
    inset: 0;
    z-index: 1100;
    height: fit-content;
    margin: auto;
}
.idea-overlay { display: none; }
.idea-dialog[open]:not(:modal) + .idea-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(15, 19, 32, .6);
}
.idea-dialog__head { display: flex; justify-content: flex-end; padding: .6rem .6rem 0; }
.idea-dialog__head form { margin: 0; }
.idea.idea--dialog { margin: 0; padding: .1rem 1.5rem 1.5rem; border: 0; box-shadow: none; }
.idea--dialog .idea__title { margin-top: 0; font-size: 1.4rem; }
.idea--dialog .idea__desc { color: var(--text); font-size: 1rem; }
.idea-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.5rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.idea-share__label { margin-right: .2rem; color: var(--text-2); font-size: .86rem; font-weight: 600; }
.idea-share__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}
.idea-share__link:hover, .idea-share__link:focus-visible { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.idea-share__link svg { width: .85em; height: .85em; fill: currentColor; }
/* the Copy buttons, a card's and the dialog's: hidden until a script can copy
   (their display would beat the attribute), then a moment of "copied" */
.idea__share-link[hidden], .idea-share__link[hidden] { display: none; }
.idea__share-link.is-copied, .idea__share-link.is-copied:hover,
.idea-share__link.is-copied, .idea-share__link.is-copied:hover { border-color: var(--success); color: var(--success); }

/* Proposing an idea: the same popup, under a heading of its own; the form
   scrolls inside it when the screen is short */
.propose-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem .5rem 1.5rem;
}
.propose-dialog__head > h2 { margin: 0; }
.propose-dialog__head form { margin: 0; }
.propose-dialog .idea-form { padding: 0 1.5rem 1.5rem; }
/* the news' suggestion form (views/salesforcenews/index.html): the source and the day side by side */
.suggest-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); gap: 0 1rem; }
@media (max-width: 520px) { .suggest-form__row { grid-template-columns: minmax(0, 1fr); } }
/* no script to make it modal: a link to #propose shows it all the same,
   over the overlay after it */
@media (scripting: none) {
    .propose-dialog:target {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1100;
        height: fit-content;
        margin: auto;
    }
    .propose-dialog:target + .idea-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: rgba(15, 19, 32, .6);
    }
}
@media (max-width: 480px) {
    .idea-dialog__foot { padding: .75rem 1rem .9rem; }
    .propose-dialog__head { padding: .75rem .75rem .4rem 1rem; }
    .propose-dialog .idea-form { padding: 0 1rem 1.25rem; }
    .idea.idea--dialog { padding: 0 1rem 1.25rem; gap: .8rem; }
    .idea--dialog .idea__title { font-size: 1.2rem; }
}

.idea-form__fields { min-width: 0; margin: 0; padding: 0; border: 0; }
/* The form's own lines, under .idea-form so that no paragraph rule of what
   holds the form (a `.card p`) makes them body text */
.idea-form .idea-form__intro { margin-bottom: 1.25rem; color: var(--text-2); }
.idea-form .idea-form__note { margin-bottom: 1rem; color: var(--text-3); font-size: .85rem; }
.idea-form .idea-form__required { color: var(--danger); font-weight: 700; }
.idea-form .help-block { color: var(--text-3); font-size: .85rem; }
.idea-form .idea-form__error { color: var(--danger); }
/* .help-block's display would otherwise beat the hidden attribute */
.idea-form .idea-form__error[hidden] { display: none; }
.idea-form .idea-form__legal { margin-bottom: 1rem; color: var(--text-3); font-size: .84rem; }
.idea-plugins { min-width: 0; margin: 0 0 1.1rem; padding: 0; border: 0; }
.idea-plugins legend { margin-bottom: .45rem; padding: 0; font-size: .93rem; font-weight: 600; }
.idea-plugins__grid {
    display: grid;
    gap: .1rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.idea-plugins__grid label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
}
.idea-plugins__grid input { flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
@media (max-width: 480px) {
    .idea-plugins__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The form carries the notice Google asks for in place of the badge, which
   would otherwise sit on top of the back-to-top button. */
.page-ideas .grecaptcha-badge,
.page-login .grecaptcha-badge,
.page-register .grecaptcha-badge,
.page-reset .grecaptcha-badge { visibility: hidden; }

/* Signed out: the popup that asks for an account, in place of the form */
.signin-dialog { width: min(520px, calc(100vw - 2rem)); }
.signin-dialog .btn-row { margin-top: 0; }

/* ---- Account icons: the colours a member picks (utils/users.js COLORS) ----
   Each sets --avatar-fg (the icon), --avatar-bg and --avatar-border (the
   circle or button around it), light here and dark below, in both dark
   blocks. Every fg holds 4.5:1 on its bg and on the page, both themes. */
:root, [data-avatar-color="blue"] { --avatar-fg: #1b6ec2; --avatar-bg: #e8f1fb; --avatar-border: #b9d6f2; }
[data-avatar-color="teal"]   { --avatar-fg: #0f766e; --avatar-bg: #e3f5f2; --avatar-border: #a7ddd6; }
[data-avatar-color="green"]  { --avatar-fg: #16794a; --avatar-bg: #e6f5ed; --avatar-border: #b3ddc7; }
[data-avatar-color="amber"]  { --avatar-fg: #8a5a00; --avatar-bg: #fdf3e0; --avatar-border: #efd9a8; }
[data-avatar-color="orange"] { --avatar-fg: #b1460c; --avatar-bg: #fdeee4; --avatar-border: #f4c7a8; }
[data-avatar-color="red"]    { --avatar-fg: #b3302a; --avatar-bg: #fdecea; --avatar-border: #f3c4c0; }
[data-avatar-color="pink"]   { --avatar-fg: #ad2d6b; --avatar-bg: #fcebf3; --avatar-border: #f1bfd7; }
[data-avatar-color="purple"] { --avatar-fg: #6c3fb5; --avatar-bg: #f1ebfc; --avatar-border: #d7c6f4; }
[data-avatar-color="slate"]  { --avatar-fg: #4a5568; --avatar-bg: #eef1f6; --avatar-border: #ccd4e2; }
:root[data-theme="dark"], :root[data-theme="dark"] [data-avatar-color="blue"] { --avatar-fg: #6aa9f0; --avatar-bg: #14243c; --avatar-border: #29456d; }
:root[data-theme="dark"] [data-avatar-color="teal"] { --avatar-fg: #4fd1c1; --avatar-bg: #0f2a28; --avatar-border: #1f524d; }
:root[data-theme="dark"] [data-avatar-color="green"] { --avatar-fg: #58c795; --avatar-bg: #10281e; --avatar-border: #23503c; }
:root[data-theme="dark"] [data-avatar-color="amber"] { --avatar-fg: #e0b355; --avatar-bg: #2a2113; --avatar-border: #55431f; }
:root[data-theme="dark"] [data-avatar-color="orange"] { --avatar-fg: #f0995f; --avatar-bg: #2e1a0f; --avatar-border: #5e3520; }
:root[data-theme="dark"] [data-avatar-color="red"] { --avatar-fg: #f08a82; --avatar-bg: #2d1715; --avatar-border: #5c2b27; }
:root[data-theme="dark"] [data-avatar-color="pink"] { --avatar-fg: #f08cbd; --avatar-bg: #2e1422; --avatar-border: #5e2a45; }
:root[data-theme="dark"] [data-avatar-color="purple"] { --avatar-fg: #b192ee; --avatar-bg: #201a33; --avatar-border: #3d3163; }
:root[data-theme="dark"] [data-avatar-color="slate"] { --avatar-fg: #aab3c6; --avatar-bg: #1e2435; --avatar-border: #3a4459; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-avatar-color="blue"] { --avatar-fg: #6aa9f0; --avatar-bg: #14243c; --avatar-border: #29456d; }
    :root:not([data-theme="light"]) [data-avatar-color="teal"] { --avatar-fg: #4fd1c1; --avatar-bg: #0f2a28; --avatar-border: #1f524d; }
    :root:not([data-theme="light"]) [data-avatar-color="green"] { --avatar-fg: #58c795; --avatar-bg: #10281e; --avatar-border: #23503c; }
    :root:not([data-theme="light"]) [data-avatar-color="amber"] { --avatar-fg: #e0b355; --avatar-bg: #2a2113; --avatar-border: #55431f; }
    :root:not([data-theme="light"]) [data-avatar-color="orange"] { --avatar-fg: #f0995f; --avatar-bg: #2e1a0f; --avatar-border: #5e3520; }
    :root:not([data-theme="light"]) [data-avatar-color="red"] { --avatar-fg: #f08a82; --avatar-bg: #2d1715; --avatar-border: #5c2b27; }
    :root:not([data-theme="light"]) [data-avatar-color="pink"] { --avatar-fg: #f08cbd; --avatar-bg: #2e1422; --avatar-border: #5e2a45; }
    :root:not([data-theme="light"]) [data-avatar-color="purple"] { --avatar-fg: #b192ee; --avatar-bg: #201a33; --avatar-border: #3d3163; }
    :root:not([data-theme="light"]) [data-avatar-color="slate"] { --avatar-fg: #aab3c6; --avatar-bg: #1e2435; --avatar-border: #3a4459; }
}

/* --------------------------------------------------------------------------
   Community account: the header's icon and menu, and the account pages
   -------------------------------------------------------------------------- */

.account-menu { position: relative; display: inline-flex; }
/* the icon's display would otherwise beat the hidden attribute */
.account-menu [hidden] { display: none; }
.account-menu[data-account="in"] .account-menu__toggle {
    border-color: var(--avatar-border);
    background: var(--avatar-bg);
    color: var(--avatar-fg);
}
.account-menu__name .fa { color: var(--avatar-fg); }
/* PRO: a star in the PRO badge's style -- bright gold, its amber border, #3b2600 on #ffd35c
   (11:1) -- over the top right corner of the account's icon, ringed in the header's background
   so it stands off the button's edge */
.account-menu__toggle { position: relative; overflow: visible; }
.account-menu__pro {
    position: absolute; top: -7px; right: -7px; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border: 1px solid #e0a100; border-radius: 50%;
    background: linear-gradient(180deg, #ffe08a, #ffd35c);
    box-shadow: 0 0 0 2px var(--bg);
    color: #3b2600; font-family: var(--font-sans); font-size: 11px; line-height: 1; pointer-events: none;
}
.account-menu__panel {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    z-index: 1050;
    min-width: 200px;
    max-width: 280px;
    padding: .4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.account-menu__name {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .3rem;
    padding: .45rem .6rem .55rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: .92rem;
    overflow-wrap: anywhere;
}
.account-menu__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
}
a.account-menu__item { text-decoration: none; }
.account-menu__item:hover, .account-menu__item:focus-visible { background: var(--surface-2); color: var(--text); text-decoration: none; }
.account-menu__item[aria-current="page"] { color: var(--accent); font-weight: 600; }
.account-menu__item[disabled] { cursor: progress; opacity: .6; }

/* The community's notifications (partials/notifications.html, initNotifications):
   a bell beside the account, in the site's header and in the extension's panel.
   The member's own are a count in white on red (5.9:1, the same in both themes);
   the recap alone, a soft count in the accent's tones. */
.notify { position: relative; display: inline-flex; }
.notify[hidden], .notify [hidden] { display: none; }
.notify__toggle { position: relative; overflow: visible; }
.notify__badge {
    position: absolute; top: -7px; right: -7px; z-index: 1;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    box-shadow: 0 0 0 2px var(--bg);
    font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none;
}
.notify__badge[data-strength="strong"] { background: #b3302a; color: #fff; }
.notify__badge[data-strength="soft"] { border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent); line-height: 15px; }
.notify__panel {
    position: absolute; top: calc(100% + .45rem); right: 0; z-index: 1050;
    width: 320px; max-width: calc(100vw - 32px); max-height: min(70vh, 480px); overflow: auto;
    padding: .4rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-lg);
}
/* On a phone the bell has the account, the theme and the menu after it: hung under its own right
   edge, the panel would run off the screen's left. There it hangs from the header's row of actions
   instead, whose right edge is the page's, and is never wider than the screen; the account's menu too. */
@media (max-width: 767px) {
    .site-header__actions { position: relative; }
    .site-header .notify, .site-header .account-menu { position: static; }
    .site-header .notify__panel { right: 0; width: min(360px, calc(100vw - 40px)); max-width: none; }
    .site-header .account-menu__panel { right: 0; max-width: calc(100vw - 40px); }
}
.notify__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin: 0 0 .3rem; padding: .35rem .5rem .5rem; border-bottom: 1px solid var(--border); color: var(--text); font-size: .92rem; }
.notify__readall { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.notify__readall:hover, .notify__readall:focus-visible { text-decoration: underline; }
.notify__list { margin: 0; padding: 0; list-style: none; }
.notify__item { display: flex; align-items: flex-start; gap: .55rem; padding: .5rem; border-radius: var(--radius-sm);
    color: var(--text); font-size: .88rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.notify__item:hover, .notify__item:focus-visible { background: var(--surface-2); color: var(--text); text-decoration: none; }
.notify__item .fa { flex: 0 0 auto; width: 1.1em; margin-top: .15em; color: var(--danger); text-align: center; }
.notify__when { display: block; margin-top: .1rem; color: var(--text-3); font-size: .78rem; }
.notify__empty { margin: 0; padding: .5rem; color: var(--text-3); font-size: .86rem; }
.notify__recap { margin-top: .3rem; padding: .45rem .5rem .3rem; border-top: 1px solid var(--border); }
.notify__recap-title { margin: 0 0 .2rem; color: var(--text-3); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.notify__recap-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; color: var(--text-2); font-size: .86rem; }
.notify__recap-item .fa { width: 1.1em; color: var(--accent); text-align: center; }
/* in the panel's bar: the size of Refresh */
.embed-bar__top .notify__toggle { width: 30px; height: 30px; font-size: .85rem; }
.embed-bar__top .notify__badge { box-shadow: 0 0 0 2px var(--surface); }
/* the panel is narrow: the list spans it, under the bar (the logo's 56px and its padding) */
.embed-bar__top .notify__panel { position: fixed; top: 74px; right: 8px; left: auto; z-index: 40; max-width: calc(100vw - 16px); }

/* My ideas: the member's own list, read only */
.my-ideas__summary { margin-bottom: 1rem; color: var(--text-2); }
.my-ideas { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.my-idea__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.my-idea__title { margin: 0 0 .4rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.my-idea__head .label { flex: 0 0 auto; margin-top: .2rem; }
.card .my-idea__desc { margin-bottom: .6rem; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.my-idea__votes { color: var(--text-2); font-size: .86rem; font-weight: 600; }
.card .my-idea__note { margin: .6rem 0 0; color: var(--text-3); font-size: .86rem; }

/* PRO: beside the name of an account with a working ORGanizer license, wherever
   the name shows (utils/licenses.js). Its own colours, the same in both themes:
   #3b2600 on #ffd35c is 11:1, and the border sets it off a dark page too */
.pro-badge { display: inline-block; margin-left: .35em; padding: .1em .45em; border: 1px solid #e0a100; border-radius: 999px;
    background: linear-gradient(180deg, #ffe08a, #ffd35c); color: #3b2600; font-size: .68em; font-weight: 800;
    letter-spacing: .06em; line-height: 1.35; vertical-align: .15em; white-space: nowrap; }
.pro-badge[hidden] { display: none; }
/* An admin of the panel, shown to the account itself only (Users.roleOf): a dot under the bottom left
   corner of its icon, where PRO's star is over the top right one, and a badge by its name. A shield
   on red for an admin (white on #c62828, 5.6:1), a gavel on purple for a moderator (white on #5e35b1,
   8:1): the icon tells them apart where the colour cannot. The same in both themes, ringed in the
   page's background as the star is */
.role-dot[data-role="admin"], .role-badge[data-role="admin"] { --role-bg: #c62828; --role-border: #8e1b1b; }
.role-dot[data-role="moderator"], .role-badge[data-role="moderator"] { --role-bg: #5e35b1; --role-border: #3f2380; }
.role-dot {
    position: absolute; bottom: -7px; left: -7px; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border: 1px solid var(--role-border); border-radius: 50%;
    background: var(--role-bg); box-shadow: 0 0 0 2px var(--bg);
    color: #fff; font-size: 9px; line-height: 1; pointer-events: none;
}
.role-badge { display: inline-block; margin-left: .35em; padding: .1em .45em; border: 1px solid var(--role-border); border-radius: 999px;
    background: var(--role-bg); color: #fff; font-size: .68em; font-weight: 800;
    letter-spacing: .06em; line-height: 1.35; vertical-align: .15em; white-space: nowrap; }
.role-badge .fa, .account-menu__name .role-badge .fa, .role-dot .fa { color: inherit; }
.role-badge .fa { font-size: .95em; }
.role-dot[hidden], .role-badge[hidden] { display: none; }

/* My licenses (/account/licenses): a license's facts, as a two-column list */
.my-license__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem 1.25rem; margin: .75rem 0 0; }
.my-license__facts dt { color: var(--text-3); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.my-license__facts dd { margin: 0; overflow-wrap: anywhere; }
.my-license__actions { align-items: center; margin-top: .9rem; }
.my-license__linked { font-size: .8rem; margin-left: auto; }
#link-license, #buy-license { margin-top: 1.5rem; }

/* A license's devices (/account/licenses): a meter of its places, one slot
   each -- taken, free, or past the limit -- and the browsers it was entered
   in, the one used latest first. Tokens only, so both themes follow */
.license-devices { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.license-devices__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.license-devices__head h3 { margin: 0; font-size: 1rem; }
.license-devices__note { margin: .4rem 0 0; color: var(--text-2); font-size: .88rem; }
.license-devices__empty { margin: .6rem 0 0; font-size: .88rem; }
.device-meter { display: inline-flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--text-2); }
.device-meter__slots { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.device-meter__slot { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-strong); background: var(--surface-2); }
.device-meter__slot.is-used { border-color: var(--accent); background: var(--accent); }
.device-meter.is-full .device-meter__slot.is-used { border-color: var(--warning); background: var(--warning); }
/* a device not activated yet, with activation on: shown, but it takes no place */
.device-meter__slot.is-pending { border: 1px dashed var(--accent); background: var(--accent-soft); }
.device-meter__slot.is-over { border-color: var(--danger); background: var(--danger-soft);
    background-image: repeating-linear-gradient(135deg, var(--danger) 0 2px, transparent 2px 5px); }
.device-meter.is-over .device-meter__text { color: var(--danger); }
.device-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.device { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--border); }
.device:first-child { border-top: 0; }
.device__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border-radius: var(--radius); background: var(--surface-2); color: var(--text-3); }
.device.is-idle .device__icon { color: var(--warning); background: var(--warning-soft); }
.device__body { flex: 1 1 auto; min-width: 0; }
.device__title { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; overflow-wrap: anywhere; }
.device__meta { display: flex; flex-wrap: wrap; gap: 0 1rem; font-size: .8rem; }
.device__meta code { font-size: .78rem; overflow-wrap: anywhere; }
.device__remove { flex: 0 0 auto; }
@media (max-width: 480px) {
    .device { flex-wrap: wrap; }
    .device__remove { margin-left: 2.75rem; }
}

/* The extension's sign-in (/oauth/authorize): one license picked among those
   linked, each with its devices; a license that cannot take this device is
   dimmed, one whose places are all taken shows them */
.oauth-licenses { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.oauth-licenses legend { border: 0; margin-bottom: .75rem; font-size: 1rem; font-weight: 600; color: var(--text); }
.oauth-license { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem; margin-bottom: .6rem; background: var(--surface); }
.oauth-license:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.oauth-license.is-disabled { opacity: .65; }
.oauth-license.is-full { border-color: var(--warning); }
.oauth-license__pick { display: flex; align-items: flex-start; gap: .75rem; margin: 0; font-weight: 400; cursor: pointer; }
.oauth-license.is-disabled .oauth-license__pick { cursor: not-allowed; }
.oauth-license__pick input { flex: 0 0 auto; margin-top: .3rem; }
.oauth-license__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.oauth-license__title { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; overflow-wrap: anywhere; }
.oauth-license__facts { display: flex; flex-wrap: wrap; gap: 0 1rem; font-size: .85rem; }
.oauth-license__note { font-size: .85rem; color: var(--text-2); }
.oauth-license__devices { margin-top: .5rem; }
.oauth-license__devices summary { cursor: pointer; font-size: .85rem; color: var(--text-2); }
.oauth-license__devices .license-devices { margin-top: .5rem; }
.oauth-consent__note { font-size: .85rem; }
.oauth-consent__actions { justify-content: flex-end; margin-top: 1rem; }
.oauth-consent__empty h2 { font-size: 1.15rem; margin-top: 0; }

/* The seats of a bulk license (/account/licenses/<id>/seats): each key in a
   read-only field, to select and copy; the seat just assigned stands out */
#assign-seat, #seats { margin-top: 1.5rem; }
#seats .my-idea__head { align-items: center; margin-bottom: .75rem; }
.seats-table { margin-bottom: 0; font-size: .9rem; }
.seats-table td { vertical-align: middle; white-space: nowrap; }
.seats-table .seats-table__key { width: 100%; min-width: 19rem; padding: .2rem .4rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-family: var(--font-mono); font-size: .85rem; }
.seats-table .seats-table__new { background: var(--success-soft); }
.seats-table .seats-table__pick { width: 2.2rem; }
/* a column's name, explained by its tooltip */
.seats-table__hint { cursor: help; border-bottom: 1px dotted currentColor; }
.seats-table__hint .fa { color: var(--text-3); font-size: .9em; }
.seats-table .seats-table__pick input { margin: 0; }
.seats-import { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.seats-import h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.seats-import input[type="file"] { display: block; margin-top: .35rem; }
.seats-import .btn[hidden] { display: none; }
.seats-import .table-scroll { max-height: 18rem; overflow-y: auto; margin-bottom: 1rem; }
.seats-import__table td { white-space: normal; overflow-wrap: anywhere; }
.seats-import__table .label { white-space: nowrap; }

/* How bulk licenses are managed now (/license/manage): numbered steps */
.bulk-steps { display: grid; gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: bulk-step; }
.bulk-steps > li { counter-increment: bulk-step; position: relative; padding-left: 3.4rem; }
.bulk-steps .btn-row { margin-top: .9rem; }
.bulk-steps > li::before { content: counter(bulk-step); position: absolute; left: 1.25rem; top: 1.2rem; width: 1.6rem; height: 1.6rem;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; line-height: 1.6rem; text-align: center; }
.my-ideas__help { margin-top: 1.5rem; font-size: .9rem; }

/* My profile: who, and a grid of icons to pick one from */
.profile-form { max-width: 640px; }
.profile-who { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.profile-who__icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 56px; height: 56px; border: 1px solid var(--avatar-border); border-radius: 50%;
    background: var(--avatar-bg); color: var(--avatar-fg); font-size: 1.6rem;
}
/* PRO's star and the admin's dot on the icon, as on the header's and the rail's card */
.profile-who__icon .account-menu__pro { top: -4px; right: -4px; }
.profile-who__icon .role-dot { bottom: -4px; left: -4px; }
.profile-who__icon .account-menu__pro, .profile-who__icon .role-dot { box-shadow: 0 0 0 2px var(--surface); }
.card .profile-who__name { margin: 0; color: var(--text); font-size: 1.15rem; overflow-wrap: anywhere; }
.card .profile-who__since { margin: .1rem 0 0; font-size: .86rem; }
.profile-icons { min-width: 0; margin: 0 0 1.25rem; padding: 0; border: 0; }
.profile-icons legend { margin-bottom: .2rem; padding: 0; font-size: .93rem; font-weight: 600; }
.profile-icons__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .4rem; margin-top: .5rem; }
.profile-icon { position: relative; display: flex; margin: 0; cursor: pointer; }
.profile-icon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.profile-icon .fa {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 46px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font-size: 1.2rem;
}
.profile-icon:hover .fa { border-color: var(--border-strong); color: var(--text); }
.profile-icon input:focus-visible + .fa { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-icon input:checked + .fa { border-color: var(--avatar-fg); background: var(--avatar-bg); color: var(--avatar-fg); box-shadow: inset 0 0 0 1px var(--avatar-fg); }
.profile-colors { min-width: 0; margin: 0 0 1.25rem; padding: 0; border: 0; }
.profile-colors legend { margin-bottom: .5rem; padding: 0; font-size: .93rem; font-weight: 600; }
.profile-colors__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.profile-color { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.profile-color input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.profile-color__swatch {
    display: block; width: 34px; height: 34px; border: 3px solid var(--avatar-bg); border-radius: 50%;
    background: var(--avatar-fg); box-shadow: 0 0 0 1px var(--border-strong);
}
.profile-color input:checked + .profile-color__swatch { box-shadow: 0 0 0 2px var(--avatar-fg); }
.profile-color input:focus-visible + .profile-color__swatch { outline: 2px solid var(--accent); outline-offset: 3px; }
.profile-form [data-profile-password][hidden] { display: none; }

/* My profile's sections, its bio's count and its public address */
.profile-section { min-width: 0; margin: 0 0 1.25rem; padding: 1.1rem 0 0; border: 0; border-top: 1px solid var(--border); }
.profile-section legend { float: left; width: 100%; margin-bottom: .6rem; padding: 0; font-size: 1rem; font-weight: 700; }
.profile-section legend + * { clear: left; }
.profile-section label .fa { width: 1.1em; color: var(--text-2); }
.profile-section textarea { resize: vertical; min-height: 6rem; }
.profile-count { display: block; margin-top: .2rem; color: var(--text-3); font-size: .82rem; }
.profile-address a, .profile-address__url { overflow-wrap: anywhere; }
.profile-address [hidden] { display: none; }

/* The consents of the registration forms (partials/consents.html) */
.consents { margin: 0 0 1rem; padding: 0; border: 0; }
.consents__title { margin: 0 0 .35rem; padding: 0; border: 0; color: var(--text); font-size: .95rem; font-weight: 600; }
.consents__optional { color: var(--text-3); font-size: .82rem; font-weight: 400; }
.consents .checkbox { margin: 0 0 .5rem; }
.consents .checkbox label { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-weight: 500; cursor: pointer; }
.consents .checkbox input { margin-top: .35rem; flex: 0 0 auto; }
.consents .help-block { margin: .1rem 0 0 1.55rem; font-size: .82rem; }

/* Tabs: a tablist of buttons over their panels (organizer.js, initTabs) */
.tabs__list { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border); }
.tabs__tab {
    margin: 0 0 -1px; padding: .6rem 1rem; border: 1px solid transparent; border-bottom: 2px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0; background: none; color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabs__tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.tabs__tab .fa { margin-right: .25rem; }
.tabs__panel[hidden] { display: none; }
/* the same tabs as links, a page each (the polls' open and closed) */
a.tabs__tab { text-decoration: none; }
a.tabs__tab[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }
.tabs__count { display: inline-block; min-width: 1.5em; margin-left: .25rem; padding: 0 .4em; border-radius: 999px;
               background: var(--surface-2); color: var(--text-2); font-size: .78em; text-align: center; }
a.tabs__tab[aria-current="page"] .tabs__count { background: var(--accent-soft); color: var(--accent); }

/* Preferences: a switch beside what it does, each saved as it is flipped */
.preferences { max-width: 640px; }
.preference { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1rem 0; }
.preference:first-child { padding-top: 0; }
.preference + .preference { border-top: 1px solid var(--border); }
.preference__text { min-width: 0; }
.card .preference__label { display: block; margin: 0 0 .2rem; color: var(--text); font-size: 1rem; font-weight: 700; cursor: pointer; }
.preference .help-block { margin: 0; }
.preference__link { margin: .5rem 0 0; font-size: .9rem; }
.preference__link[hidden] { display: none; }
.preferences [data-preferences-status] { margin: 1rem 0 0; }
/* the account, under the switches: a card of its own */
.profile-account { margin-top: 1.25rem; }

/* My profile's Security tab: the two-factor sign-in (initTwoFactor). The QR
   code is dark on white whatever the theme: an app reads it so. */
.two-factor [data-tf-state] p { margin-bottom: .5rem; }
.two-factor form, .two-factor [data-tf-codes] { margin: 1rem 0; }
.two-factor__qr { width: 232px; max-width: 100%; margin: .5rem 0 1rem; padding: 8px; background: #fff; border-radius: var(--radius); }
.two-factor__qr svg { display: block; width: 100%; height: auto; }
.two-factor__secret { display: inline-block; margin: .25rem 0 .75rem; padding: .5rem .75rem; letter-spacing: .05em; word-break: break-all; }
.two-factor__codes { columns: 2; list-style: none; padding: 0; margin: 0 0 .75rem; font-family: var(--font-mono); }
.two-factor__codes li { padding: .15rem 0; }
.two-factor .btn-row .btn + .btn { margin-left: .4rem; }
.card .profile-account__title { margin: 0 0 1rem; font-size: 1.1rem; }
.switch {
    -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 auto; width: 46px; height: 26px; margin: .1rem 0 0;
    border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-2); cursor: pointer; transition: background .15s, border-color .15s;
}
.switch::before {
    content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--text-3); transition: transform .15s, background .15s;
}
.switch:checked { border-color: var(--accent); background: var(--accent); }
.switch:checked::before { background: #fff; transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:disabled { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::before { transition: none; } }

/* A member's public profile, /members/<username> */
.member-head__name { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; overflow-wrap: anywhere; }
.member-head__name .pro-badge { margin-left: 0; font-size: .45em; }
.member-card { margin-bottom: 1.25rem; }
.card .member-card__title { margin: 0 0 .75rem; font-size: 1.1rem; }
.member-bio { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.member-socials { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.member-social { font-weight: 600; overflow-wrap: anywhere; }
.member-social .fa { width: 1.1em; }
.member-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem; margin: 0; }
.member-stat { padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.member-stat dt { color: var(--text-2); font-size: .86rem; font-weight: 600; }
.member-stat dd { margin: .15rem 0 0; color: var(--text); font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.member-stats__help { margin: .75rem 0 0; font-size: .86rem; }
.member-mine { margin-bottom: 1.25rem; }
/* The rail's card of the account signed in (partials/sponsors_sidebar.html, initProfileCard in
   organizer.js): its public profile in short -- the icon with PRO's star and the admin's dot, the
   name and its badges, the bio, the links, the counts -- and where to see or change it. Hidden
   until the script fills it, so a page cached for everyone shows nothing of anyone */
.profile-card { text-align: left; }
.profile-card[hidden] + .rail-card { margin-top: 0; }
.profile-card__who { display: flex; align-items: center; gap: .75rem; }
.profile-card__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 44px; height: 44px; border: 1px solid var(--avatar-border); border-radius: 50%;
    background: var(--avatar-bg); color: var(--avatar-fg); font-size: 1.25rem; }
.profile-card__icon .account-menu__pro { top: -5px; right: -5px; }
.profile-card__icon .role-dot { bottom: -5px; left: -5px; }
.profile-card__icon .account-menu__pro, .profile-card__icon .role-dot { box-shadow: 0 0 0 2px var(--surface); }
.profile-card__name { margin: 0; color: var(--text); font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.profile-card__name a { color: inherit; text-decoration: none; }
.profile-card__name a:hover { text-decoration: underline; }
.profile-card__since { margin: .1rem 0 0; color: var(--text-3); font-size: .8rem; }
.profile-card__bio { margin: .85rem 0 0; color: var(--text-2); font-size: .88rem; white-space: pre-line; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.profile-card__bio--empty { font-style: italic; }
.profile-card__socials { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.rail-stack .profile-card__socials a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border: 1px solid var(--border); border-radius: 50%; color: var(--text-2); text-decoration: none; }
.rail-stack .profile-card__socials a:hover { border-color: var(--border-strong); color: var(--accent); }
.profile-card__stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; margin: .85rem 0 0; }
.profile-card__stat { padding: .4rem .3rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); text-align: center; }
.profile-card__stat dt { overflow: hidden; color: var(--text-3); font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    white-space: nowrap; text-overflow: ellipsis; }
.profile-card__stat dd { margin: 0; color: var(--text); font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.profile-card__hidden { margin: .75rem 0 0; color: var(--text-3); font-size: .8rem; }
.profile-card__actions { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .85rem; font-size: .86rem; font-weight: 600; }
.rail-stack .profile-card__actions a { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
.profile-card__actions a:hover span:not(.fa) { text-decoration: underline; }
/* The same card, compact, in the account's menus (initProfileCard): the icon, the name and its
   badges, since when, and the counts in one row. The site's header shows it on a narrow screen only,
   where the rail is at the page's end, above the entries and in place of the name; the panel's
   menu under My account */
.profile-card--compact[hidden] { display: none; }
.profile-card--compact .profile-card__who { gap: .6rem; }
.profile-card--compact .profile-card__icon { width: 34px; height: 34px; font-size: 1rem; }
.profile-card--compact .profile-card__icon .account-menu__pro { top: -6px; right: -6px; width: 15px; height: 15px; font-size: 10px; }
.profile-card--compact .profile-card__icon .role-dot { bottom: -6px; left: -6px; }
.profile-card--compact .profile-card__name { font-size: .95rem; }
.profile-card--compact .profile-card__since { font-size: .76rem; }
.profile-card--compact .profile-card__stats { gap: .3rem; margin-top: .55rem; }
.profile-card--compact .profile-card__stat { padding: .2rem .25rem; }
.profile-card--compact .profile-card__stat dt { font-size: .6rem; }
.profile-card--compact .profile-card__stat dd { font-size: .95rem; }
.account-menu__card { display: none; }
@media (max-width: 1079px) {
    .account-menu__card:not([hidden]) { display: block; min-width: 15.5rem; margin: 0 0 .3rem; padding: .45rem .6rem .6rem; border-bottom: 1px solid var(--border); }
    .account-menu__card:not([hidden]) + .account-menu__name { display: none; }
}
.embed-menu__card { min-width: 15rem; margin-top: .3rem; padding: .55rem .6rem .45rem; border-top: 1px solid var(--border); }

/* a member's name, where it links to their public profile */
a.member-link { text-decoration: none; }
a.member-link:hover, a.member-link:focus-visible { text-decoration: underline; }
@media (max-width: 520px) { .member-stats { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } }

/* the account pages: one narrow column, no sponsor rail */
.page.page--narrow { max-width: 500px; grid-template-columns: minmax(0, 1fr); }
.account-form .btn-block { margin-bottom: 1rem; }
.account-form .account-form__switch {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--text-2);
    text-align: center;
}

/* Continue with Google (partials/google-button.html): Google's neutral button,
   its four-colour G on the page's own surface, as its branding guidelines allow */
.btn.btn-google {
    gap: .6rem;
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
}
.btn.btn-google:hover, .btn.btn-google:focus { background: var(--surface-2); color: var(--text); }
.btn-google__logo { flex: none; width: 18px; height: 18px; }
/* between the Google button and the form: a rule with "or" on it */
.account-form__or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1rem;
    color: var(--text-3);
    font-size: .86rem;
}
.account-form__or::before, .account-form__or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
/* My profile's Security tab: the Google account connected */
.google-link + .google-link, .two-factor + .google-link { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   25. Print
   -------------------------------------------------------------------------- */

@media print {
    :root { --bg: #fff; --surface: #fff; --text: #000; --text-2: #333; }
    .site-header, .site-footer, .page__rail, .page__side, .page-foot, .docs-toc, .to-top { display: none !important; }
    .page, .page--docs { display: block; padding: 0; }
    .prose { max-width: none; }
    a { text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* --------------------------------------------------------------------------
   Community: Markdown, its editor, comments, the Salesforce news portal and
   the extension's panel (/embed). Colours are the theme's tokens only, so
   both themes follow without a dark block of their own.
   -------------------------------------------------------------------------- */

/* Markdown, as OrgMarkdown renders it (public/js/organizer-markdown.js) */
.md { white-space: normal; overflow-wrap: anywhere; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre { margin: 0 0 .6rem; }
.md ul, .md ol { padding-left: 1.4rem; }
.md li > ul, .md li > ol { margin: .2rem 0 0; }
.md blockquote { padding: .15rem .85rem; border-left: 3px solid var(--border-strong); color: var(--text-2); }
.md code { padding: .05em .35em; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
.md pre { padding: .65rem .85rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.md pre code { padding: 0; background: none; white-space: pre; }
/* an admin's image (a poll's description, a widget): the CDN's only; alone in its line, or a link's picture */
.md img { display: block; max-width: 100%; height: auto; margin: 0 0 .6rem; border-radius: var(--radius); }
.md a > img { cursor: pointer; }
.md hr { margin: .8rem 0; border: 0; border-top: 1px solid var(--border); }
.md .md-heading { margin-top: .3rem; }
.idea__desc.md, .my-idea__desc.md { white-space: normal; }
.md-help code { font-size: .82em; }

/* The editor around a textarea[data-markdown] (organizer.js, enhanceMarkdown) */
.md-editor { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.md-editor:focus-within { border-color: var(--accent-border); }
/* @mentions: the members offered under a comment's textarea (attachMentions), and the
   name as a link once the comment is shown */
.mention-list { position: absolute; z-index: 30; min-width: 12rem; max-width: calc(100% - 1rem); margin: 2px 0 0; padding: .25rem;
    list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.mention-list[hidden] { display: none; }
.mention-list__option { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; border-radius: var(--radius-sm);
    color: var(--text); font-size: .88rem; cursor: pointer; overflow-wrap: anywhere; }
.mention-list__option[aria-selected="true"], .mention-list__option:hover { background: var(--accent-soft); color: var(--accent); }
.mention-list__who .fa { width: 1.1em; color: var(--avatar-fg); text-align: center; }
.md a.mention { font-weight: 600; text-decoration: none; }
.md a.mention:hover, .md a.mention:focus-visible { text-decoration: underline; }
.md-editor__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem;
    padding: .25rem .35rem; border-bottom: 1px solid var(--border); background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0; }
.md-editor__tabs, .md-editor__tools { display: flex; gap: .15rem; }
.md-editor__tools[hidden] { display: none; }
.md-editor__tab, .md-editor__tool { padding: .2rem .55rem; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: none; color: var(--text-2); font-size: .82rem; font-weight: 600; cursor: pointer; }
.md-editor__tool { padding: .2rem .45rem; }
.md-editor__tab[aria-pressed="true"] { border-color: var(--border); background: var(--surface); color: var(--text); }
.md-editor__tab:hover, .md-editor__tool:hover, .md-editor__tab:focus-visible, .md-editor__tool:focus-visible { color: var(--accent); }
.md-editor textarea.form-control { display: block; width: 100%; border: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; resize: vertical; }
.md-editor textarea.form-control[hidden] { display: none; }
.md-editor__preview { padding: .6rem .75rem; font-size: .95rem; }
.md-editor__preview[hidden] { display: none; }
.md-editor__empty { color: var(--text-3); }

/* Comments: under an idea in its dialog, and under a news article */
.comments { margin-top: 1.25rem; }
.idea-dialog__comments { margin: 0; padding: .25rem 1.5rem 1.25rem; border-top: 1px solid var(--border); }
.comments__title { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 .7rem; font-size: 1rem; }
.comments__empty, .comments__loading, .comments__signin, .comments__closed { margin: 0 0 .8rem; color: var(--text-3); font-size: .92rem; }
.comments__error { color: var(--danger); font-size: .92rem; }
.comment-list { margin: 0 0 .9rem; padding: 0; list-style: none; }
.comment-list--replies { margin: .55rem 0 0 1.1rem; padding-left: .85rem; border-left: 2px solid var(--border); }
.comment { margin: 0 0 .7rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.comment-list--replies .comment { margin-bottom: .5rem; background: var(--surface-2); }
.comment.is-new { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.comment--gone > .comment__head { color: var(--text-3); font-style: italic; font-size: .88rem; }
.comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-bottom: .3rem; font-size: .85rem; }
.comment__author { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.comment__author .fa { color: var(--avatar-fg); font-size: .85em; }
.comment__date, .comment__edited { color: var(--text-3); }
.comment__body { font-size: .94rem; }
.comment__actions { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin-top: .35rem; }
.comment__actions[hidden] { display: none; }
.comment__action { padding: 0; border: 0; background: none; color: var(--text-3); font-size: .8rem; font-weight: 600; cursor: pointer; }
.comment__action:hover, .comment__action:focus-visible { color: var(--accent); }
.comment__action:disabled { cursor: default; opacity: .7; }
.comment-form { margin: .5rem 0 0; }
.comment-form__buttons { justify-content: flex-end; align-items: center; margin-top: .45rem; }
.comment-form__help { margin-right: auto; color: var(--text-3); font-size: .8rem; }
.comment-form__status { margin: .4rem 0 0; font-size: .86rem; }
.comment-form__status.is-error { color: var(--danger); }
.idea__comments { display: inline-flex; align-items: center; gap: .25em; color: var(--text-3); font-size: .84rem; text-decoration: none; }
a.idea__comments:hover, a.idea__comments:focus-visible { color: var(--accent); }
/* how many times an article was opened (views/partials/news-article.html) */
.news__reads { display: inline-flex; align-items: center; gap: .25em; color: var(--text-3); font-size: .84rem; font-variant-numeric: tabular-nums; }

/* The Salesforce news portal */
.news__summary { margin: 0 0 .7rem; color: var(--text-2); font-size: .96rem; white-space: pre-line; }
.news__read { margin-left: auto; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.news--full { margin-bottom: .5rem; }
.news--full .news__title { margin-top: 0; font-size: 1.5rem; }
.news--full .news__summary { color: var(--text); font-size: 1.02rem; }
.news-back { margin: 0 0 .8rem; font-size: .9rem; }
/* a featured article: first in the list (featuredFirst), in the warm tone, with a stronger edge;
   the tokens have their dark steps, so both themes follow */
.news--featured { border-color: var(--warning-border); border-left: 4px solid var(--warning); background: var(--warning-soft); }
.news--featured .news__summary { color: var(--text); }
.news__featured { border-color: var(--warning-border); background: var(--surface); color: var(--warning); }

/* The community's polls (/polls, views/partials/poll.html and poll-body.html, initPolls and
   initPollWidget in organizer.js): a card per poll, its status, the form of an open one or its
   results -- each answer's share as a bar, the member's own marked -- and its line of answers,
   like, comments and shares. The rail's widget is the same, smaller. */
.poll-list { margin: 0; padding: 0; list-style: none; }
.poll {
    margin: 0 0 .9rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow-wrap: anywhere;
}
.poll--full { margin-bottom: .5rem; }
.poll__head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0 0 .45rem; }
.poll__date { color: var(--text-3); font-size: .84rem; }
.poll-status { display: inline-flex; align-items: center; gap: .3em; padding: .05em .55em; border: 1px solid var(--border);
    border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.poll-status--open { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.poll-status--closed { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.poll__question { margin: .1rem 0 .75rem; font-size: 1.12rem; line-height: 1.35; }
.poll--full .poll__question { font-size: 1.5rem; }
/* a poll's description (Markdown): whole on its page, its first lines in the list, "Read more" to its page */
.poll__description { margin: -.35rem 0 .8rem; color: var(--text-2); }
.poll:not(.poll--full) .poll__description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.poll__more { display: inline-block; margin: -.5rem 0 .8rem; font-size: .86rem; font-weight: 600; }
/* why the answers are right or wrong: once the poll is closed, behind a toggle under the results */
.poll-explanation { margin: .8rem 0 0; }
.poll-explanation__toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; color: var(--accent); font-size: .9rem; font-weight: 600; list-style: none; }
.poll-explanation__toggle::-webkit-details-marker { display: none; }
.poll-explanation__toggle::after { content: "\25BE"; font-size: .8em; transition: transform .15s ease; }
.poll-explanation[open] > .poll-explanation__toggle::after { transform: rotate(180deg); }
.poll-explanation__toggle:hover { text-decoration: underline; }
.poll-explanation__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.poll-explanation__text { margin-top: .5rem; padding: .7rem .9rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface-2); font-size: .94rem; }
.poll-explanation-note { margin: .7rem 0 0; color: var(--text-2); font-size: .84rem; }
.poll-form__explained { font-weight: 600; }
.poll__link { color: inherit; text-decoration: none; }
.poll__link:hover, .poll__link:focus-visible { color: var(--accent); text-decoration: underline; }
.poll-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.poll-choice { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .4rem; padding: .5rem .75rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-weight: 500; cursor: pointer; transition: border-color .13s ease, background .13s ease; }
.poll-choice:hover { border-color: var(--accent-border); }
.poll-choice input { flex: 0 0 auto; margin: .2rem 0 0; }
.poll-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.poll-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .6rem; }
.poll-form__note { color: var(--text-3); font-size: .8rem; }
.poll-form__error { margin: .5rem 0 0; color: var(--danger); font-size: .88rem; }
.poll-form__error[hidden] { display: none; }
.poll-results { margin: 0; padding: 0; list-style: none; }
.poll-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; margin: 0 0 .6rem; }
.poll-result__label { font-weight: 500; }
.poll-result__value { color: var(--text-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.poll-result__bar { grid-column: 1 / -1; height: .55rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.poll-result__fill { display: block; height: 100%; min-width: 2px; border-radius: 999px; background: var(--text-3); }
.poll-result.is-mine .poll-result__fill { background: var(--accent); }
.poll-result.is-mine .poll-result__label { color: var(--accent); }
.poll-result__mine { display: inline-flex; align-items: center; gap: .25em; margin-left: .3rem; color: var(--accent); font-size: .78rem; font-weight: 650; white-space: nowrap; }
.poll-change { margin: .2rem 0 0; }
.poll-change .btn-link { padding-left: 0; padding-right: 0; }
.poll__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-top: .8rem; padding-top: .65rem;
    border-top: 1px solid var(--border); font-size: .88rem; }
.poll__count { color: var(--text-3); font-size: .84rem; }
.poll-like { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border: 1px solid var(--border-strong);
    border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: .84rem; font-weight: 650; cursor: pointer;
    transition: background .13s ease, border-color .13s ease, color .13s ease; }
.poll-like__count { font-variant-numeric: tabular-nums; }
.poll-like:hover, .poll-like:focus-visible { border-color: var(--accent); color: var(--accent); }
.poll-like[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.poll-like[aria-pressed="true"] .fa-thumbs-o-up:before { content: "\f164"; }
.poll-like[disabled] { cursor: default; opacity: .55; }
.poll-like.is-busy { cursor: progress; }
/* the rail's poll: a card of its own, first in the rail, filled by the script */
.poll-widget { text-align: left; }
.poll-widget[hidden] + .rail-card { margin-top: 0; }
.poll-widget .poll__question { margin: 0 0 .6rem; font-size: 1rem; font-weight: 650; }
/* the featured poll's description: its first lines, "Read more" to its page */
.poll-widget__description { margin: -.3rem 0 .6rem; font-size: .86rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.poll-widget__more-link { display: inline-block; margin: -.4rem 0 .6rem; font-size: .8rem; }
.poll-widget .poll-choice { padding: .4rem .6rem; font-size: .9rem; }
.poll-widget .poll-form__note { display: none; }
.poll-widget .poll-result { font-size: .88rem; }
.poll-widget__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .75rem; margin-top: .7rem; font-size: .84rem; }
.poll-widget__signin { margin: .6rem 0 0; font-size: .86rem; }
.poll-widget__closes { margin: -.3rem 0 .6rem; color: var(--text-2); font-size: .8rem; }
/* the other open polls: a piece of the question each, and how many answered; their page takes the answer */
.poll-widget__more { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.poll-widget__more-title { margin: 0 0 .4rem; color: var(--text-2); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.poll-widget__list { margin: 0; padding: 0; list-style: none; }
.poll-widget__item { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .35rem 0; font-size: .86rem; }
.poll-widget__item + .poll-widget__item { border-top: 1px dashed var(--border); }
.poll-widget__item-link { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.poll-widget__item-meta { flex: none; color: var(--text-2); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.poll-widget__item.is-answered .poll-widget__item-meta .fa { color: var(--success); }
.poll-widget__all { margin: .6rem 0 0; font-size: .84rem; text-align: right; }
/* signed out: the answers as radios that cannot be picked yet, set apart from the question */
.poll-form--locked .poll-choice { cursor: default; background: var(--surface-2); color: var(--text-2); }
.poll-form--locked .poll-choice:hover { border-color: var(--border); }
.poll-form--locked .poll-choice input { opacity: .6; cursor: default; }

/* The extension's panel (/embed, views/partials/embed-header.html): narrow,
   no site header, the panel's own bar on top */
body.embed { min-height: 100vh; background: var(--bg); }
/* the mark on the left, as tall as both rows; the actions on the first row, the sections on the second */
.embed-bar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "brand top" "brand tabs"; align-items: center; gap: .3rem .75rem;
    padding: .45rem .75rem .4rem; border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.embed-bar__top { grid-area: top; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; min-width: 0; }
/* the site header's mark (.brand): the icon, ORGanizer and the tag line */
.embed-bar__brand { grid-area: brand; align-self: center; }
.embed-bar__brand img { display: block; }
.embed-bar__refresh { width: 30px; height: 30px; flex: 0 0 auto; font-size: .85rem; }
.embed-bar__refresh.is-busy .fa { animation: embed-spin .8s linear infinite; }
@keyframes embed-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .embed-bar__refresh.is-busy .fa { animation: none; } }
.embed-bar__tabs { grid-area: tabs; display: flex; flex-wrap: wrap; gap: .2rem; }
.embed-bar__tabs a { padding: .3rem .6rem; border-radius: var(--radius-sm); color: var(--text-2); font-size: .88rem; font-weight: 600; text-decoration: none; }
.embed-bar__tabs a:hover, .embed-bar__tabs a:focus-visible { color: var(--accent); }
.embed-bar__tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
/* the community guidelines: an icon only, after the sections, so they still fit one line */
.embed-bar__tabs .embed-bar__icon-tab { margin-left: auto; }
/* five sections and the guidelines' icon in a panel 420px wide: their row under the mark, the whole width, one line (scrolling sideways if a font makes it longer) */
@media (max-width: 520px) {
    .embed-bar { grid-template-areas: "brand top" "tabs tabs"; }
    .embed-bar__tabs { flex-wrap: nowrap; gap: .1rem; overflow-x: auto; scrollbar-width: none; }
    .embed-bar__tabs a { flex: 0 0 auto; padding: .3rem .5rem; white-space: nowrap; }
}
.embed-bar__who { margin-left: auto; min-width: 0; font-size: .84rem; }
.embed-bar__user { color: var(--text); font-weight: 600; }
.embed-bar__user .fa { color: var(--avatar-fg); }
.embed-bar__user .fa-caret-down { color: var(--text-3); }
.embed-bar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; display: inline-block; vertical-align: bottom; }
/* the user's menu: a <details>, so it opens without the script too; one entry, My account, on the site */
.embed-menu { position: relative; }
.embed-menu > summary { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer; list-style: none; }
.embed-menu > summary::-webkit-details-marker { display: none; }
.embed-menu > summary:hover, .embed-menu > summary:focus-visible, .embed-menu[open] > summary { border-color: var(--accent-border); background: var(--surface-2); }
.embed-menu__panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 12rem; padding: .3rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.embed-menu__item { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border-radius: var(--radius-sm);
    color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.embed-menu__item:hover, .embed-menu__item:focus-visible { background: var(--accent-soft); color: var(--accent); }
.embed-menu__out { margin-left: auto; color: var(--text-3); font-size: .8em; }
.embed-page { padding: 1rem 14px 2rem; }
.embed-page__title { margin-top: 0; font-size: 1.35rem; }
.embed-page h2 { margin-top: 1.6rem; font-size: 1.1rem; }
.embed-page .install-row { flex-wrap: wrap; }
.embed-bar__online { font-size: .84rem; font-weight: 600; white-space: nowrap; }
.embed .page-head { padding: 1rem 14px .25rem; }
.embed .page-head h1 { font-size: 1.35rem; }
.embed .page-head__sub { font-size: .95rem; }
.embed .page-head__eyebrow { display: none; }
.embed .page { gap: 1rem; padding: 1rem 14px 2rem; grid-template-columns: minmax(0, 1fr); }
.embed .idea { gap: .75rem; padding: .85rem .9rem; }
.embed .poll { padding: .85rem .9rem; }
.embed .poll--full .poll__question { font-size: 1.25rem; }
.embed .idea-dialog__comments { padding: .25rem 1rem 1rem; }
.embed-start { display: grid; place-items: center; min-height: 60vh; color: var(--text-3); font-size: .95rem; }
.oauth-license--community { border-style: dashed; }
.community-devices { margin-top: 1.5rem; }
.community-devices__list { margin: 0; padding: 0; list-style: none; }
.community-devices__list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.community-devices__list li .btn { margin-left: auto; }

/* --------------------------------------------------------------------------
   ORGanizer Surveys (docs/surveys.md): the palettes, the survey's page and its
   form, drawn by public/js/organizer-surveys.js on the site and in the
   editor's preview (/admin/surveys)
   -------------------------------------------------------------------------- */

/* The palettes a survey picks (utils/surveys.js PALETTES): the avatar colours'
   steps, more hues, and two-tone ones (an accent on another hue's band). --survey-accent is the buttons, the bars and the marks, readable on
   the page, on --survey-soft (the header's band) and under --survey-accent-fg
   (a button's text), light here and dark below, in both dark blocks
   (test/unit/surveys.test.js). */
:root, [data-survey-palette="blue"] { --survey-accent: #1b6ec2; --survey-accent-fg: #ffffff; --survey-soft: #e8f1fb; --survey-border: #b9d6f2; }
[data-survey-palette="teal"] { --survey-accent: #0f766e; --survey-accent-fg: #ffffff; --survey-soft: #e3f5f2; --survey-border: #a7ddd6; }
[data-survey-palette="green"] { --survey-accent: #16794a; --survey-accent-fg: #ffffff; --survey-soft: #e6f5ed; --survey-border: #b3ddc7; }
[data-survey-palette="amber"] { --survey-accent: #8a5a00; --survey-accent-fg: #ffffff; --survey-soft: #fdf3e0; --survey-border: #efd9a8; }
[data-survey-palette="orange"] { --survey-accent: #b1460c; --survey-accent-fg: #ffffff; --survey-soft: #fdeee4; --survey-border: #f4c7a8; }
[data-survey-palette="red"] { --survey-accent: #b3302a; --survey-accent-fg: #ffffff; --survey-soft: #fdecea; --survey-border: #f3c4c0; }
[data-survey-palette="pink"] { --survey-accent: #ad2d6b; --survey-accent-fg: #ffffff; --survey-soft: #fcebf3; --survey-border: #f1bfd7; }
[data-survey-palette="purple"] { --survey-accent: #6c3fb5; --survey-accent-fg: #ffffff; --survey-soft: #f1ebfc; --survey-border: #d7c6f4; }
[data-survey-palette="slate"] { --survey-accent: #4a5568; --survey-accent-fg: #ffffff; --survey-soft: #eef1f6; --survey-border: #ccd4e2; }
[data-survey-palette="indigo"] { --survey-accent: #4338ca; --survey-accent-fg: #ffffff; --survey-soft: #eceafd; --survey-border: #c9c4f5; }
[data-survey-palette="cyan"] { --survey-accent: #0e7490; --survey-accent-fg: #ffffff; --survey-soft: #e2f4f8; --survey-border: #a5dbe7; }
[data-survey-palette="olive"] { --survey-accent: #56650f; --survey-accent-fg: #ffffff; --survey-soft: #f1f4dc; --survey-border: #d4dca4; }
[data-survey-palette="brown"] { --survey-accent: #8b4a2b; --survey-accent-fg: #ffffff; --survey-soft: #f7ece5; --survey-border: #e3c6b4; }
[data-survey-palette="navy"] { --survey-accent: #1e3a8a; --survey-accent-fg: #ffffff; --survey-soft: #e7ecf8; --survey-border: #bccaeb; }
[data-survey-palette="fuchsia"] { --survey-accent: #a21caf; --survey-accent-fg: #ffffff; --survey-soft: #f9e8fb; --survey-border: #e9bdef; }
[data-survey-palette="graphite"] { --survey-accent: #27272a; --survey-accent-fg: #ffffff; --survey-soft: #ececee; --survey-border: #c9c9ce; }
[data-survey-palette="ocean"] { --survey-accent: #1e3a8a; --survey-accent-fg: #ffffff; --survey-soft: #e3f5f2; --survey-border: #a7ddd6; }
[data-survey-palette="lagoon"] { --survey-accent: #0f766e; --survey-accent-fg: #ffffff; --survey-soft: #e8f1fb; --survey-border: #b9d6f2; }
[data-survey-palette="forest"] { --survey-accent: #166534; --survey-accent-fg: #ffffff; --survey-soft: #f7f0dc; --survey-border: #e3d3a6; }
[data-survey-palette="sunset"] { --survey-accent: #b42318; --survey-accent-fg: #ffffff; --survey-soft: #fdf3e0; --survey-border: #efd9a8; }
[data-survey-palette="berry"] { --survey-accent: #6b21a8; --survey-accent-fg: #ffffff; --survey-soft: #fcebf3; --survey-border: #f1bfd7; }
:root[data-theme="dark"], :root[data-theme="dark"] [data-survey-palette="blue"] { --survey-accent: #6aa9f0; --survey-accent-fg: #0f1320; --survey-soft: #14243c; --survey-border: #29456d; }
:root[data-theme="dark"] [data-survey-palette="teal"] { --survey-accent: #4fd1c1; --survey-accent-fg: #0f1320; --survey-soft: #0f2a28; --survey-border: #1f524d; }
:root[data-theme="dark"] [data-survey-palette="green"] { --survey-accent: #58c795; --survey-accent-fg: #0f1320; --survey-soft: #10281e; --survey-border: #23503c; }
:root[data-theme="dark"] [data-survey-palette="amber"] { --survey-accent: #e0b355; --survey-accent-fg: #0f1320; --survey-soft: #2a2113; --survey-border: #55431f; }
:root[data-theme="dark"] [data-survey-palette="orange"] { --survey-accent: #f0995f; --survey-accent-fg: #0f1320; --survey-soft: #2e1a0f; --survey-border: #5e3520; }
:root[data-theme="dark"] [data-survey-palette="red"] { --survey-accent: #f08a82; --survey-accent-fg: #0f1320; --survey-soft: #2d1715; --survey-border: #5c2b27; }
:root[data-theme="dark"] [data-survey-palette="pink"] { --survey-accent: #f08cbd; --survey-accent-fg: #0f1320; --survey-soft: #2e1422; --survey-border: #5e2a45; }
:root[data-theme="dark"] [data-survey-palette="purple"] { --survey-accent: #b192ee; --survey-accent-fg: #0f1320; --survey-soft: #201a33; --survey-border: #3d3163; }
:root[data-theme="dark"] [data-survey-palette="slate"] { --survey-accent: #aab3c6; --survey-accent-fg: #0f1320; --survey-soft: #1e2435; --survey-border: #3a4459; }
:root[data-theme="dark"] [data-survey-palette="indigo"] { --survey-accent: #a5a0f5; --survey-accent-fg: #0f1320; --survey-soft: #1c1b3a; --survey-border: #37346b; }
:root[data-theme="dark"] [data-survey-palette="cyan"] { --survey-accent: #5ccfe6; --survey-accent-fg: #0f1320; --survey-soft: #0e2830; --survey-border: #1f4f5c; }
:root[data-theme="dark"] [data-survey-palette="olive"] { --survey-accent: #bccd5a; --survey-accent-fg: #0f1320; --survey-soft: #22260f; --survey-border: #474f20; }
:root[data-theme="dark"] [data-survey-palette="brown"] { --survey-accent: #e0a27f; --survey-accent-fg: #0f1320; --survey-soft: #2a1b13; --survey-border: #553626; }
:root[data-theme="dark"] [data-survey-palette="navy"] { --survey-accent: #93b0f5; --survey-accent-fg: #0f1320; --survey-soft: #151d38; --survey-border: #2c3b6b; }
:root[data-theme="dark"] [data-survey-palette="fuchsia"] { --survey-accent: #e88cf2; --survey-accent-fg: #0f1320; --survey-soft: #2c1430; --survey-border: #5a2a62; }
:root[data-theme="dark"] [data-survey-palette="graphite"] { --survey-accent: #d4d4d8; --survey-accent-fg: #0f1320; --survey-soft: #1f1f23; --survey-border: #3f3f46; }
:root[data-theme="dark"] [data-survey-palette="ocean"] { --survey-accent: #7fb6f5; --survey-accent-fg: #0f1320; --survey-soft: #0f2a28; --survey-border: #1f524d; }
:root[data-theme="dark"] [data-survey-palette="lagoon"] { --survey-accent: #4fd1c1; --survey-accent-fg: #0f1320; --survey-soft: #14243c; --survey-border: #29456d; }
:root[data-theme="dark"] [data-survey-palette="forest"] { --survey-accent: #6fd39a; --survey-accent-fg: #0f1320; --survey-soft: #26210f; --survey-border: #504522; }
:root[data-theme="dark"] [data-survey-palette="sunset"] { --survey-accent: #f59a8c; --survey-accent-fg: #0f1320; --survey-soft: #2a2113; --survey-border: #55431f; }
:root[data-theme="dark"] [data-survey-palette="berry"] { --survey-accent: #c39bf2; --survey-accent-fg: #0f1320; --survey-soft: #2e1422; --survey-border: #5e2a45; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-survey-palette="blue"] { --survey-accent: #6aa9f0; --survey-accent-fg: #0f1320; --survey-soft: #14243c; --survey-border: #29456d; }
    :root:not([data-theme="light"]) [data-survey-palette="teal"] { --survey-accent: #4fd1c1; --survey-accent-fg: #0f1320; --survey-soft: #0f2a28; --survey-border: #1f524d; }
    :root:not([data-theme="light"]) [data-survey-palette="green"] { --survey-accent: #58c795; --survey-accent-fg: #0f1320; --survey-soft: #10281e; --survey-border: #23503c; }
    :root:not([data-theme="light"]) [data-survey-palette="amber"] { --survey-accent: #e0b355; --survey-accent-fg: #0f1320; --survey-soft: #2a2113; --survey-border: #55431f; }
    :root:not([data-theme="light"]) [data-survey-palette="orange"] { --survey-accent: #f0995f; --survey-accent-fg: #0f1320; --survey-soft: #2e1a0f; --survey-border: #5e3520; }
    :root:not([data-theme="light"]) [data-survey-palette="red"] { --survey-accent: #f08a82; --survey-accent-fg: #0f1320; --survey-soft: #2d1715; --survey-border: #5c2b27; }
    :root:not([data-theme="light"]) [data-survey-palette="pink"] { --survey-accent: #f08cbd; --survey-accent-fg: #0f1320; --survey-soft: #2e1422; --survey-border: #5e2a45; }
    :root:not([data-theme="light"]) [data-survey-palette="purple"] { --survey-accent: #b192ee; --survey-accent-fg: #0f1320; --survey-soft: #201a33; --survey-border: #3d3163; }
    :root:not([data-theme="light"]) [data-survey-palette="slate"] { --survey-accent: #aab3c6; --survey-accent-fg: #0f1320; --survey-soft: #1e2435; --survey-border: #3a4459; }
    :root:not([data-theme="light"]) [data-survey-palette="indigo"] { --survey-accent: #a5a0f5; --survey-accent-fg: #0f1320; --survey-soft: #1c1b3a; --survey-border: #37346b; }
    :root:not([data-theme="light"]) [data-survey-palette="cyan"] { --survey-accent: #5ccfe6; --survey-accent-fg: #0f1320; --survey-soft: #0e2830; --survey-border: #1f4f5c; }
    :root:not([data-theme="light"]) [data-survey-palette="olive"] { --survey-accent: #bccd5a; --survey-accent-fg: #0f1320; --survey-soft: #22260f; --survey-border: #474f20; }
    :root:not([data-theme="light"]) [data-survey-palette="brown"] { --survey-accent: #e0a27f; --survey-accent-fg: #0f1320; --survey-soft: #2a1b13; --survey-border: #553626; }
    :root:not([data-theme="light"]) [data-survey-palette="navy"] { --survey-accent: #93b0f5; --survey-accent-fg: #0f1320; --survey-soft: #151d38; --survey-border: #2c3b6b; }
    :root:not([data-theme="light"]) [data-survey-palette="fuchsia"] { --survey-accent: #e88cf2; --survey-accent-fg: #0f1320; --survey-soft: #2c1430; --survey-border: #5a2a62; }
    :root:not([data-theme="light"]) [data-survey-palette="graphite"] { --survey-accent: #d4d4d8; --survey-accent-fg: #0f1320; --survey-soft: #1f1f23; --survey-border: #3f3f46; }
    :root:not([data-theme="light"]) [data-survey-palette="ocean"] { --survey-accent: #7fb6f5; --survey-accent-fg: #0f1320; --survey-soft: #0f2a28; --survey-border: #1f524d; }
    :root:not([data-theme="light"]) [data-survey-palette="lagoon"] { --survey-accent: #4fd1c1; --survey-accent-fg: #0f1320; --survey-soft: #14243c; --survey-border: #29456d; }
    :root:not([data-theme="light"]) [data-survey-palette="forest"] { --survey-accent: #6fd39a; --survey-accent-fg: #0f1320; --survey-soft: #26210f; --survey-border: #504522; }
    :root:not([data-theme="light"]) [data-survey-palette="sunset"] { --survey-accent: #f59a8c; --survey-accent-fg: #0f1320; --survey-soft: #2a2113; --survey-border: #55431f; }
    :root:not([data-theme="light"]) [data-survey-palette="berry"] { --survey-accent: #c39bf2; --survey-accent-fg: #0f1320; --survey-soft: #2e1422; --survey-border: #5e2a45; }
}

.survey-page { max-width: 780px; }
/* a survey's form and its landing page: one column, centred, nothing beside it */
.page--survey { display: block; }
.page--survey > .survey-page { margin: 0 auto; }
.survey-head { margin: 0 0 1.25rem; overflow: hidden; border: 1px solid var(--survey-border); border-top: 8px solid var(--survey-accent); border-radius: var(--radius-lg); background: var(--surface); }
.survey-head__image { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; background: var(--survey-soft); }
.survey-head__body { padding: 1.25rem 1.5rem 1.4rem; }
.survey-head__eyebrow { display: inline-block; margin-bottom: .4rem; color: var(--survey-accent); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.survey-head h1 { margin: 0 0 .5rem; font-size: 1.75rem; line-height: 1.25; }
.survey-head__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .75rem 0 0; color: var(--text-2); font-size: .88rem; }
.survey-head__meta .fa { color: var(--survey-accent); margin-right: .25rem; }
.survey-md > :last-child { margin-bottom: 0; }
.survey-md p { margin: 0 0 .6rem; }
.survey-anonymous { display: flex; gap: .6rem; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--survey-border); border-radius: var(--radius); background: var(--survey-soft); font-size: .92rem; }
.survey-anonymous .fa { margin-top: .15rem; color: var(--survey-accent); }
.survey-notice { margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: .92rem; }
.survey-notice[hidden] { display: none; }
.survey-notice--info { border-color: var(--survey-border); background: var(--survey-soft); }
.survey-notice--warning { border-color: var(--warning-border); background: var(--warning-soft); }
.survey-notice__action.btn-link { padding: 0; vertical-align: baseline; }
.survey-progress-wrap { position: sticky; top: var(--header-h, 0); z-index: 5; display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; padding: .5rem 0; background: var(--bg); }
.survey-progress-wrap[hidden] { display: none; }
.survey-progress { flex: 1 1 auto; height: 8px; overflow: hidden; border: 1px solid var(--survey-border); border-radius: 999px; background: var(--survey-soft); }
.survey-progress__label { flex: none; color: var(--text-2); font-size: .85rem; font-variant-numeric: tabular-nums; }
.survey-progress__fill { display: block; width: 0; height: 100%; background: var(--survey-accent); transition: width .25s ease; }
.survey-section[hidden] { display: none; }
.survey-section__head { margin: 0 0 1rem; padding: .9rem 1.25rem; border: 1px solid var(--border); border-left: 6px solid var(--survey-accent); border-radius: var(--radius); background: var(--surface); }
.survey-section__title { margin: 0; font-size: 1.25rem; }
.survey-section__title:focus { outline: none; }
.survey-section__desc { margin-top: .4rem; color: var(--text-2); }
.survey-item { margin: 0 0 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.survey-q.has-error { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.survey-q__box { min-width: 0; margin: 0; padding: 0; border: 0; }
.survey-q__title { display: block; width: auto; margin: 0 0 .55rem; padding: 0; border: 0; color: var(--text); font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.survey-q__title:focus { outline: none; }
.survey-q__required { color: var(--danger); }
.survey-q__help { margin: -.2rem 0 .65rem; color: var(--text-2); font-size: .9rem; }
/* the limits a question sets (OrgSurveys.limitsText): under its help, before the answer */
.survey-q__limits { margin: -.2rem 0 .65rem; color: var(--text-2); font-size: .85rem; font-style: italic; }
.survey-q__error { margin: .55rem 0 0; color: var(--danger); font-size: .9rem; font-weight: 500; }
.survey-q__error[hidden] { display: none; }
.survey-q .form-control { max-width: 100%; }
.survey-q--text .form-control { max-width: 28rem; }
.survey-q--datetime .form-control { max-width: 16rem; }
.survey-number { display: flex; align-items: center; gap: .5rem; max-width: 18rem; }
.survey-number__unit { color: var(--text-2); white-space: nowrap; }
.survey-options { display: grid; gap: .15rem; }
.survey-option { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .45rem .6rem; border-radius: var(--radius-sm); font-weight: 400; cursor: pointer; }
.survey-option:hover { background: var(--surface-2); }
.survey-option[hidden] { display: none; }
.survey-option input, .survey-grid input { flex: none; width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--survey-accent); }
.survey-other { width: calc(100% - 2.3rem); max-width: 26rem; margin: .1rem 0 .3rem 2.3rem; }
.survey-other[hidden] { display: none; }
/* "Dropdown": a field to type in over the list of answers (organizer-surveys.js, drawCombo) */
.survey-combo { position: relative; max-width: 28rem; }
.survey-combo__field { position: relative; }
.survey-combo__input.form-control { padding-right: 2.4rem; }
.survey-combo__toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 2.3rem; padding: 0; border: 0; background: none; color: var(--text-2); cursor: pointer; }
.survey-combo.is-open .survey-combo__toggle .fa-caret-down { transform: rotate(180deg); }
.survey-combo__list { position: absolute; z-index: 30; top: calc(100% + .25rem); left: 0; right: 0; max-height: 16rem; overflow-y: auto; margin: 0; padding: .25rem;
    list-style: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-lg); }
.survey-combo__list[hidden], .survey-combo__option[hidden], .survey-combo__empty[hidden], .survey-combo__note[hidden] { display: none; }
.survey-combo__option { position: relative; padding: .45rem .6rem .45rem 2rem; border-radius: var(--radius-sm); cursor: pointer; }
.survey-combo__option:hover, .survey-combo__option.is-active { background: var(--survey-soft); }
.survey-combo__option.is-active { outline: 2px solid var(--survey-accent); outline-offset: -2px; }
.survey-combo__option[aria-selected="true"] { color: var(--survey-accent); font-weight: 600; }
.survey-combo__option[aria-selected="true"]::before { content: "\2713"; position: absolute; left: .7rem; }
.survey-combo__option--other { border-top: 1px solid var(--border); margin-top: .2rem; font-style: italic; }
.survey-combo__empty { padding: .45rem .6rem; color: var(--text-2); }
.survey-combo__note { margin: .35rem 0 0; color: var(--text-2); font-size: .85rem; }
.survey-other.survey-combo__other { width: 100%; max-width: 28rem; margin: .5rem 0 0; }
/* a finger: a taller list, and answers easier to hit */
@media (pointer: coarse) {
    .survey-combo__list { max-height: min(60vh, 24rem); }
    .survey-combo__option { padding-top: .7rem; padding-bottom: .7rem; }
}
.survey-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.survey-chips:empty { display: none; }
.survey-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .2rem .1rem .6rem; border: 1px solid var(--survey-border); border-radius: 999px; background: var(--survey-soft); color: var(--survey-accent); font-size: .85rem; font-weight: 500; }
.survey-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.survey-chip__remove:hover, .survey-chip__remove:focus-visible { background: var(--survey-border); }
.survey-consent > .survey-md { flex: 1 1 auto; }
.survey-scale { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.survey-scale__point { position: relative; margin: 0; cursor: pointer; }
.survey-scale__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.survey-scale__num { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-weight: 600; font-variant-numeric: tabular-nums; }
.survey-scale__point:hover .survey-scale__num { border-color: var(--survey-accent); }
.survey-scale__input:checked + .survey-scale__num { border-color: var(--survey-accent); background: var(--survey-accent); color: var(--survey-accent-fg); }
.survey-scale__input:focus-visible + * { outline: 2px solid var(--survey-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.survey-scale__end { color: var(--text-2); font-size: .85rem; }
.survey-rating { gap: .1rem; }
.survey-rating__icon { padding: .15rem; color: var(--border-strong); font-size: 1.85rem; }
.survey-scale__point.is-lit .survey-rating__icon, .survey-scale__point:hover .survey-rating__icon { color: var(--survey-accent); }
.survey-grid-scroll { overflow-x: auto; }
.survey-grid { width: 100%; border-collapse: collapse; font-size: .92rem; }
.survey-grid th { padding: .45rem .5rem; color: var(--text-2); font-weight: 600; text-align: center; vertical-align: bottom; }
.survey-grid tbody th { color: var(--text); text-align: left; font-weight: 500; }
.survey-grid tbody tr + tr > * { border-top: 1px solid var(--border); }
.survey-grid td { text-align: center; }
.survey-grid__cell { display: flex; align-items: center; justify-content: center; margin: 0; padding: .55rem; cursor: pointer; }
.survey-grid tbody tr:hover > * { background: var(--surface-2); }
.survey-layout--divider { padding: .3rem 0; border: 0; background: none; }
.survey-divider { margin: 0; border: 0; border-top: 2px solid var(--survey-border); }
.survey-callout { display: flex; gap: .75rem; }
.survey-callout__icon { margin-top: .2rem; font-size: 1.15rem; }
.survey-callout__body { flex: 1 1 auto; min-width: 0; }
.survey-callout--info { border-color: var(--survey-border); background: var(--survey-soft); }
.survey-callout--info .survey-callout__icon { color: var(--survey-accent); }
.survey-callout--warning { border-color: var(--warning-border); background: var(--warning-soft); }
.survey-callout--warning .survey-callout__icon { color: var(--warning); }
.survey-callout--tip { border-color: var(--success-border); background: var(--success-soft); }
.survey-callout--tip .survey-callout__icon { color: var(--success); }
.survey-figure { margin: 0; text-align: center; }
.survey-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius); }
.survey-figure--wide img { max-width: 85%; }
.survey-figure--narrow img { max-width: 55%; }
.survey-figure figcaption { margin-top: .5rem; color: var(--text-2); font-size: .88rem; }
.survey-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.25rem 0 0; }
.survey-nav [hidden] { display: none; }
.survey-nav .btn-primary { border-color: var(--survey-accent); background: var(--survey-accent); color: var(--survey-accent-fg); }
.survey-nav .btn-primary:hover, .survey-nav .btn-primary:focus { border-color: var(--survey-accent); background: var(--survey-accent); color: var(--survey-accent-fg); filter: brightness(.94); }
.survey-nav__status { flex: 1 1 100%; margin: 0; color: var(--text-2); font-size: .9rem; }
.survey-nav__status:empty { display: none; }
.survey-done { padding: 1.5rem; border: 1px solid var(--survey-border); border-top: 8px solid var(--survey-accent); border-radius: var(--radius-lg); background: var(--surface); }
.survey-done h1 { margin-top: 0; font-size: 1.6rem; }
.survey-done .fa-check-circle { color: var(--survey-accent); }
.survey-done h2 { margin-top: 0; font-size: 1.4rem; }
.survey-done:focus { outline: none; }
.survey-done__note { margin: .75rem 0 0; color: var(--text-2); font-size: .88rem; }
.survey-state { margin: 0 0 1rem; padding: 1.25rem 1.5rem; }
.survey-state h1, .survey-state h2 { margin-top: 0; font-size: 1.2rem; }
.survey-state h1 .fa-lock { color: var(--text-3); }
.survey-state .fa-check-circle { color: var(--survey-accent); }
.survey-tabs { margin: 0 0 1rem; font-size: .92rem; }
.survey-tabs a[aria-current="page"] { color: var(--text); font-weight: 600; text-decoration: none; }
.survey-list { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.survey-card { display: block; padding: 1rem 1.25rem; border: 1px solid var(--border); border-left: 6px solid var(--survey-accent); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; }
.survey-card:hover, .survey-card:focus-visible { border-color: var(--survey-border); border-left-color: var(--survey-accent); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.survey-card__title { margin: 0 0 .3rem; font-size: 1.1rem; }
.survey-card__summary { margin: 0; color: var(--text-2); font-size: .92rem; }
.survey-card__meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: .55rem 0 0; color: var(--text-3); font-size: .82rem; }
.survey-card__meta .label { font-size: .75rem; }
@media (max-width: 600px) {
    .survey-head__body, .survey-item, .survey-section__head { padding-left: 1rem; padding-right: 1rem; }
    .survey-head h1 { font-size: 1.45rem; }
    .survey-scale__num { min-width: 2.15rem; height: 2.15rem; }
    .survey-figure--wide img, .survey-figure--narrow img { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   26. Community zone
   The community's pages (utils/index.js COMMUNITY_PAGES: body.zone-community,
   and the extension's panel) take a teal accent and a "night band": the header
   and the page's head sit on a deep petrol band, full width. Its widgets on any
   page (.community-card: the rail's poll and profile card) take the same accent
   and a band for their title, so they read as pieces of the community. Only
   tokens: every component already paints with them. Three copies, as the dark
   palette: light, data-theme="dark", and the media query. Keep them in sync.
   -------------------------------------------------------------------------- */

.zone-community, .community-card {
    --bg:               #f5f9f9;
    --bg-alt:           #eaf3f2;
    --border:           #dde8e7;
    --accent:           #0f766e;
    --accent-hover:     #0b5a54;
    --accent-soft:      #e3f5f2;
    --accent-border:    #a7ddd6;
    --on-accent:        #ffffff;

    --band:             #0f3b40;
    --band-2:           #164a50;
    --band-3:           #1b555c;
    --band-border:      #2a6168;
    --band-border-strong: #3a7178;
    --band-text:        #ffffff;
    --band-text-2:      #c6e4e0;
    --band-text-3:      #9cc7c1;
    --band-accent:      #5fe0cf;
    --band-accent-hover: #8aeadd;
    --band-accent-soft: #16484d;
}
:root[data-theme="dark"] .zone-community, :root[data-theme="dark"] .community-card {
    --bg:               #0d1518;
    --bg-alt:           #111c1e;
    --surface:          #15201f;
    --surface-2:        #1b2928;
    --surface-3:        #22312f;
    --border:           #253634;
    --border-strong:    #36504c;
    --accent:           #4fd1c1;
    --accent-hover:     #7fe0d4;
    --accent-soft:      #0f2a28;
    --accent-border:    #1f524d;
    --on-accent:        #0d1518;

    --band:             #12343a;
    --band-2:           #18424a;
    --band-3:           #1d4c54;
    --band-border:      #2a5c64;
    --band-border-strong: #3a6c74;
    --band-text:        #ffffff;
    --band-text-2:      #c6e4e0;
    --band-text-3:      #9cc7c1;
    --band-accent:      #5fe0cf;
    --band-accent-hover: #8aeadd;
    --band-accent-soft: #1a464d;
}
/* Same when the browser asks for dark and the visitor has not chosen light. Keep in sync. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .zone-community, :root:not([data-theme="light"]) .community-card {
    --bg:               #0d1518;
    --bg-alt:           #111c1e;
    --surface:          #15201f;
    --surface-2:        #1b2928;
    --surface-3:        #22312f;
    --border:           #253634;
    --border-strong:    #36504c;
    --accent:           #4fd1c1;
    --accent-hover:     #7fe0d4;
    --accent-soft:      #0f2a28;
    --accent-border:    #1f524d;
    --on-accent:        #0d1518;

    --band:             #12343a;
    --band-2:           #18424a;
    --band-3:           #1d4c54;
    --band-border:      #2a5c64;
    --band-border-strong: #3a6c74;
    --band-text:        #ffffff;
    --band-text-2:      #c6e4e0;
    --band-text-3:      #9cc7c1;
    --band-accent:      #5fe0cf;
    --band-accent-hover: #8aeadd;
    --band-accent-soft: #1a464d;
    }
}

/* The band: inside it every token is the band's, so the menu, its dropdowns,
   the buttons and the page's head follow without a rule of their own. */
.zone-community .site-header,
.zone-community .embed-bar,
.zone-community:not(.embed) .page-head {
    --bg:            var(--band);
    --surface:       var(--band-2);
    --surface-2:     var(--band-3);
    --surface-3:     var(--band-3);
    --border:        var(--band-border);
    --border-strong: var(--band-border-strong);
    --text:          var(--band-text);
    --text-2:        var(--band-text-2);
    --text-3:        var(--band-text-3);
    --accent:        var(--band-accent);
    --accent-hover:  var(--band-accent-hover);
    --accent-soft:   var(--band-accent-soft);
    --accent-border: var(--band-border-strong);
    --on-accent:     var(--band);
    color: var(--text);
}
.zone-community .site-header { background: var(--bg); border-bottom-color: var(--bg); }
/* the extension's panel: its bar is the header, on the band as the site's is,
   and its mark is the site header's, with no tile behind it */
.zone-community .embed-bar { background: var(--bg); border-bottom-color: var(--bg); }
/* full width, though the head keeps the page's measure: a border image filled
   with the band and pushed out to the screen's edges paints it without a wrapper
   (ink overflow: no horizontal scroll) */
.zone-community:not(.embed) .page-head {
    margin-bottom: 2rem;
    padding-bottom: 2.25rem;
    border-image: linear-gradient(var(--bg), var(--bg)) fill 0 / 0 / 0 100vmax;
}

/* An accent the text sits on: white on the light teal, dark on the dark and the band's */
.zone-community .btn-primary, .zone-community .btn-info,
.zone-community .btn-primary:hover, .zone-community .btn-primary:focus,
.zone-community .btn-info:hover, .zone-community .btn-info:focus,
.community-card .btn-primary, .community-card .btn-primary:hover, .community-card .btn-primary:focus { color: var(--on-accent); }

/* The community's widgets on any page: the accent, and the band for their title */
.rail-card.community-card { padding-top: 0; overflow: hidden; border-color: var(--accent-border); }
.community-card > .rail-card__title:first-child {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 -1.2rem 1rem;
    padding: .65rem 1.2rem;
    background: var(--band);
    color: var(--band-text);
}
.community-card > .rail-card__title:first-child::before {
    content: "\f0c0"; /* fa-users, Font Awesome 4.2.0 */
    color: var(--band-accent);
    font-family: FontAwesome;
    font-size: .95rem;
    letter-spacing: 0;
}

@media print {
    .zone-community:not(.embed) .page-head { --text: #000; --text-2: #333; --accent: #000; border-image: none; }
}

/* --------------------------------------------------------------------------
   27. Community home (/community, routes/community.js)
   The numbers in a row of tiles, what is trending in a wide card, then the
   sections two by two (one column on a phone and in the panel). Tokens only:
   the community's zone gives them its colours.
   -------------------------------------------------------------------------- */

.community-home { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2.5rem; }

.ch-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ch-stat { margin: 0; }
.ch-stat, .ch-stat__link {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-height: 100%;
}
.ch-stat { padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.ch-stat:has(.ch-stat__link) { padding: 0; }
.ch-stat__link { padding: .85rem 1rem; border-radius: inherit; color: inherit; text-decoration: none; }
.ch-stat__link:hover, .ch-stat__link:focus-visible { background: var(--accent-soft); color: inherit; }
.ch-stat__icon { color: var(--accent); font-size: .95rem; }
.ch-stat__value { color: var(--text); font-family: var(--font-brand); font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.ch-stat__label { color: var(--text-2); font-size: .82rem; line-height: 1.35; }
.ch-stat__note { color: var(--accent); font-size: .76rem; font-weight: 600; }

.ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; }
.ch-card { display: flex; flex-direction: column; min-width: 0; }
.ch-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; margin-bottom: .6rem; }
.ch-card__head h2 { margin: 0; font-size: 1.1rem; }
.ch-card__head h2 .fa { margin-right: .3rem; color: var(--accent); }
.ch-card__more { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.ch-card__sub { margin: 1rem 0 .3rem; color: var(--text-3); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ch-card__sub .fa { margin-right: .25rem; }
.ch-empty, .ch-note { margin: 0; color: var(--text-3); font-size: .9rem; }
.ch-note { margin-top: .6rem; font-size: .78rem; }

.ch-list { margin: 0; padding: 0; list-style: none; }
.ch-item, .ch-member { display: flex; align-items: flex-start; gap: .7rem; margin: 0; padding: .6rem 0; border-top: 1px solid var(--border); }
.ch-list > :first-child { border-top: 0; padding-top: .2rem; }
.ch-list--compact .ch-item { padding: .4rem 0; }
.ch-item__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: .15rem; }
.ch-item__title { color: var(--text); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; text-decoration: none; }
.ch-item__title:hover, .ch-item__title:focus-visible { color: var(--accent); text-decoration: underline; }
.ch-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; color: var(--text-3); font-size: .8rem; }
.ch-item__meta > span + span::before { content: "·"; margin-right: .5rem; color: var(--border-strong); }
.ch-item__meta > .ch-kind + span::before, .ch-item__meta > .idea-stage + span::before, .ch-item__meta > .ch-state + span::before { content: none; margin: 0; }
.ch-item__action { flex: 0 0 auto; align-self: center; }

.ch-rank {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .85rem;
    font-weight: 700;
}
.ch-list--ranked > li:first-child .ch-rank { background: var(--accent); color: var(--on-accent, #fff); }

.ch-kind, .ch-state {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .05em .55em;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: .74rem;
    font-weight: 600;
}
.ch-kind--idea { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.ch-kind--news { border-color: var(--purple-border); background: var(--purple-soft); color: var(--purple); }
.ch-kind--poll { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.ch-kind--featured { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
/* an article of the newsletter: its colours, filled, apart from the soft News chip (section 29's --nl) */
.ch-kind--newsletter { border-color: var(--nl); background: var(--nl); color: var(--nl-on); }
.ch-state--open { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }

.ch-member { align-items: center; }
.ch-member__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--avatar-border);
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--avatar-fg);
}
.ch-member__name { display: block; }
.ch-member .ch-item__title { display: inline; }

.embed .community-home { gap: 1rem; }
.embed .ch-grid { grid-template-columns: 1fr; gap: 1rem; }
.embed .ch-stats { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }

/* --------------------------------------------------------------------------
   28. The site's own banners (utils/siteBanners.js, initSiteBanners in
   organizer.js): slots served empty and hidden, filled from /s/site.json
   while the site carries its banners rather than AdSense. Three in the rail,
   in two "Sponsor" panels (rail-card community-card: the title band of the
   poll and the profile card), the top and the end of the key pages. The
   rail's cards are spaced by a gap, so that a panel left hidden leaves no
   space behind; so are the slots of a panel.
   -------------------------------------------------------------------------- */

.rail-stack.rail-stack--rail { display: flex; flex-direction: column; gap: 1.15rem; }
.rail-stack.rail-stack--rail > * { margin-top: 0; }

.site-banner__link { display: inline-block; max-width: 100%; }
.site-banner__image { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius-sm); }
.site-banner__link--text {
    display: block;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    text-align: left;
    text-decoration: none;
}
.site-banner__link--text:hover { border-color: var(--border-strong); }
.site-banner__link--text:hover .site-banner__company { text-decoration: underline; }
.site-banner__company { display: block; color: var(--accent); font-weight: 700; }
.site-banner__tagline { display: block; margin-top: .2rem; color: var(--text); font-size: .92rem; }
.site-banner__description { display: block; margin-top: .3rem; color: var(--text-2); font-size: .85rem; }
.rail-stack .site-banner__link--text { display: block; }

.site-banner-panel__body { display: flex; flex-direction: column; gap: 1rem; }
.site-banner__caption { display: block; margin-top: .45rem; color: var(--text-2); font-size: .85rem; line-height: 1.4; }
.site-banner .site-banner__link, .prose .site-banner .site-banner__link { text-decoration: none; }
.site-banner .site-banner__link:hover .site-banner__caption { text-decoration: underline; }

.site-banner--main { text-align: center; }
.site-banner--top { margin-bottom: 1.75rem; }
.site-banner--bottom { margin-top: 2rem; }
.community-home > .site-banner--main { margin: 0; }
.site-banner__label {
    margin: 0 0 .4rem;
    color: var(--text-3);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.embed .site-banner--top { padding: 1rem 14px 0; }
.embed .embed-page .site-banner--top { padding: 0; }

/* "Want to be a sponsor? Get in touch." under the sponsors' panels and cards */
.sponsor-cta { margin: 1rem 0 0; color: var(--text-3); font-size: .85rem; }
.rail-card p.sponsor-cta:last-child { margin-bottom: 0; }

/* The header banner (partials/site-banner-head.html, slot mainpage_header): a card first in the
   page's head, as the newsletter's is on the news portal. initSiteBanners sets page-head--banner on
   the head once it is filled: on a wide screen the card floats beside the title, on a phone it
   comes after the head's text (order). Hidden until then, so a head without one is untouched. */
.sponsor-head {
    padding: .8rem 1rem .85rem;
    border: 1px solid var(--accent-border, var(--border));
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: left;
}
.sponsor-head__eyebrow { margin: 0 0 .45rem; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sponsor-head .site-banner--head { text-align: center; }
.sponsor-head .sponsor-cta { margin-top: .6rem; font-size: .8rem; }
/* The template's rich texts in the head (partials/layout-rich.html, layoutPlace head) are cards of
   the same kind, each under the one before; one served for everyone makes the head a banner head
   from the first paint (:has), one filled later is marked by initLayoutWidgets. */
@media (min-width: 1000px) {
    .page-head--banner, .page-head:has(> .layout-rich--head:not([hidden])) { display: flow-root; }
    .page-head--banner > .sponsor-head, .page-head:has(> .layout-rich--head:not([hidden])) > .sponsor-head { float: right; width: min(26rem, 42%); margin: 0 0 1rem 2.5rem; }
    .page-head > .sponsor-head + .sponsor-head { clear: right; }
}
@media (max-width: 999.98px) {
    .page-head--banner, .page-head:has(> .layout-rich--head:not([hidden])) { display: flex; flex-direction: column; align-items: flex-start; }
    .page-head--banner.page-head--center, .page-head--center:has(> .layout-rich--head:not([hidden])) { align-items: center; }
    .page-head--banner > .sponsor-head, .page-head:has(> .layout-rich--head:not([hidden])) > .sponsor-head { order: 1; align-self: stretch; margin-top: 1.25rem; }
}

/* --------------------------------------------------------------------------
   29. The newsletter of Grzegorz Skaruz on the news portal (docs/newsletter.md,
   views/salesforcenews/index.html, item.html, partials/newsletter-*.html,
   news-article.html): its colour is the site's purple, apart from the
   community's teal, so what is the newsletter's reads as such. Its card sits
   on the head's band, dark in every theme: a lighter purple there. Three
   copies of the tokens, as the palette: light, data-theme dark, the media query.
   -------------------------------------------------------------------------- */

:root {
    --nl:        var(--purple);
    --nl-soft:   var(--purple-soft);
    --nl-border: var(--purple-border);
    --nl-on:     #ffffff;
    /* the issue's card, in the newsletter's colour with the text on it: the
       other way round from an article, so the two are never taken for each other */
    --nl-issue-bg:  #6c3fb5;
    --nl-issue-ink: #ffffff;
}
:root[data-theme="dark"] { --nl-on: #160f26; --nl-issue-bg: #b192ee; --nl-issue-ink: #160f26; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --nl-on: #160f26; --nl-issue-bg: #b192ee; --nl-issue-ink: #160f26; }
}

.btn-nl, .btn-nl:visited { border-color: var(--nl); background: var(--nl); color: var(--nl-on); }
.btn-nl:hover, .btn-nl:focus { border-color: var(--nl); background: var(--nl); color: var(--nl-on); filter: brightness(1.08); }
.nl-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 5px;
    background: var(--nl); color: var(--nl-on); font-size: .7rem; line-height: 1; }
.nl-mark--lg { width: 2.6rem; height: 2.6rem; border-radius: 10px; font-size: 1.15rem; }
.nl-fine { color: var(--text-3); font-size: .78rem; }

/* the head: the title beside the newsletter's card on a wide screen */
.page-head.nl-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2.5rem; align-items: center; }
@media (min-width: 1000px) { .page-head.nl-head { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); } }
/* the newsletter's card and the header banner (partials/site-banner-head.html) stacked beside the
   title: both compact, so the head is no taller than with the newsletter's card alone */
.nl-head__side { display: grid; gap: .6rem; align-content: center; min-width: 0; }
.nl-head__side .nl-hero { gap: .15rem .7rem; padding: .6rem .85rem; }
.nl-head__side .nl-mark--lg { width: 2rem; height: 2rem; border-radius: 8px; font-size: .9rem; }
.nl-head__side .nl-hero__eyebrow { font-size: .62rem; }
.nl-head__side .nl-hero__name { font-size: .95rem; line-height: 1.25; }
.nl-head__side .nl-hero__by { font-size: .78rem; }
.nl-head__side .nl-facts { margin-top: .2rem; font-size: .72rem; }
.nl-head__side .nl-hero__actions { gap: .2rem .7rem; margin-top: .2rem; }
.nl-head__side .nl-hero__actions .btn { padding: .22rem .65rem; font-size: .8rem; }
.nl-head__side .nl-hero .nl-fine { font-size: .7rem; }
/* the banner beside its caption, the title and "Get in touch" on one line above them */
.nl-head__side > .sponsor-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35rem .75rem; margin: 0; padding: .55rem .85rem .65rem; }
.nl-head__side > .sponsor-head[hidden] { display: none; }
.nl-head__side .sponsor-head__eyebrow { margin: 0; font-size: .62rem; }
.nl-head__side .sponsor-head .sponsor-cta { grid-row: 1; grid-column: 2; margin: 0; font-size: .7rem; text-align: right; }
.nl-head__side .site-banner--head { grid-column: 1 / -1; text-align: left; }
.nl-head__side .site-banner--head .site-banner__link:not(.site-banner__link--text) { display: flex; align-items: center; gap: .75rem; }
.nl-head__side .site-banner--head .site-banner__image { flex: none; width: auto; max-width: 48%; max-height: 64px; margin: 0; }
.nl-head__side .site-banner--head .site-banner__caption { display: -webkit-box; margin: 0; overflow: hidden; font-size: .78rem; line-height: 1.35;
    -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.nl-head__side .site-banner--head .site-banner__link--text { padding: .45rem .7rem; }
.nl-head__side .site-banner--head .site-banner__tagline { font-size: .8rem; }
.nl-head__side .site-banner--head .site-banner__description { display: none; }
.nl-hero { --nl: #c9b2f5; --nl-on: #1e1236; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; align-items: start;
    padding: .9rem 1rem; border: 1px solid var(--nl); border-radius: var(--radius-lg); background: var(--surface); }
/* the extension's panel has no band: the card takes the page's purple */
.embed .nl-hero { --nl: var(--purple); --nl-on: inherit; }
.nl-hero__text { min-width: 0; }
.nl-hero__text p { margin: 0; }
.nl-hero__eyebrow { color: var(--nl); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nl-hero__name { font-family: var(--font-brand); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.nl-hero__name a { color: var(--text); text-decoration: none; }
.nl-hero__name a:hover, .nl-hero__name a:focus-visible { color: var(--nl); text-decoration: underline; }
.nl-hero__by { color: var(--text-2); font-size: .84rem; }
.nl-facts { display: flex; flex-wrap: wrap; gap: .1rem .5rem; margin: .35rem 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: .78rem; font-weight: 600; }
.nl-facts li { margin: 0; white-space: nowrap; }
.nl-facts li:not(:last-child)::after { margin-left: .5rem; color: var(--nl); content: "\00b7"; }
.nl-hero__actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; align-items: center; gap: .3rem .9rem; margin-top: .35rem; }
.nl-hero .nl-fine { color: var(--text-3); }

/* this week's issue, over the list: one compact card */
.nl-issue {
    /* inverted: every token the card's components paint with, taken from its two colours */
    --nl:            var(--nl-issue-ink);
    --nl-on:         var(--nl-issue-bg);
    --nl-soft:       color-mix(in srgb, var(--nl-issue-ink) 14%, var(--nl-issue-bg));
    --text:          var(--nl-issue-ink);
    --text-2:        color-mix(in srgb, var(--nl-issue-ink) 90%, var(--nl-issue-bg));
    --text-3:        color-mix(in srgb, var(--nl-issue-ink) 82%, var(--nl-issue-bg));
    --border-strong: color-mix(in srgb, var(--nl-issue-ink) 45%, var(--nl-issue-bg));
    --accent:        var(--nl-issue-ink);
    margin: 0 0 1.4rem;
    padding: .85rem 1.1rem .95rem;
    border: 1px solid var(--nl-issue-bg);
    border-radius: var(--radius-lg);
    background: var(--nl-issue-bg);
    color: var(--nl-issue-ink);
    box-shadow: var(--shadow);
}
.nl-issue .nl-note__more { text-decoration: underline; }
.nl-issue__head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; margin: 0 0 .3rem; font-size: .76rem; }
.nl-issue__label { color: var(--nl); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.nl-issue__when { color: var(--text-3); }
.nl-issue__title { margin: 0 0 .45rem; font-size: 1.08rem; line-height: 1.35; text-wrap: balance; }
.nl-issue__title a { color: var(--text); text-decoration: none; }
.nl-issue__title a:hover, .nl-issue__title a:focus-visible { color: var(--nl); text-decoration: underline; }
.nl-note { margin: 0 0 .55rem; font-size: .88rem; }
.nl-note > summary { display: -webkit-box; overflow: hidden; color: var(--text-2); cursor: pointer; list-style: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nl-note > summary::-webkit-details-marker { display: none; }
.nl-note__who { color: var(--text); font-weight: 650; }
.nl-note__more { color: var(--accent); font-weight: 600; white-space: nowrap; }
.nl-note[open] > summary { display: block; }
.nl-note[open] .nl-note__start { display: none; }
.nl-note[open] .nl-note__more::after { content: " \2013 show less"; }
.nl-note__intro { margin: .35rem 0 0; color: var(--text-2); line-height: 1.6; white-space: pre-line; }
.nl-sections { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .6rem; padding: 0; list-style: none; line-height: 1.4; }
.nl-sections li { margin: 0; }
.nl-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .02rem .5rem; border: 1px solid var(--border-strong); border-radius: 999px;
    color: var(--text-2); font-size: .74rem; font-weight: 600; line-height: 1.6; text-decoration: none; }
.nl-chip span { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.nl-chip:hover, .nl-chip:focus-visible { border-color: var(--nl); color: var(--nl); text-decoration: none; }
.nl-chip[aria-current] { border-color: var(--nl); background: var(--nl); color: var(--nl-on); }
.nl-chip[aria-current] span { color: inherit; }
.nl-firstnote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .45rem .7rem; border-radius: var(--radius); background: var(--nl-soft); }
.nl-firstnote p { flex: 1 1 16rem; margin: 0; color: var(--text); font-size: .84rem; }
.nl-firstnote p .fa { color: var(--nl); }

/* where the news come from: three tabs over the filters */
.nl-tabs { display: flex; flex-wrap: wrap; gap: .25rem; width: fit-content; max-width: 100%; margin: 0 0 .7rem; padding: .2rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.nl-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .8rem; border-radius: 999px; color: var(--text-2); font-size: .84rem; font-weight: 600; text-decoration: none; }
.nl-tab:hover, .nl-tab:focus-visible { color: var(--text); text-decoration: none; }
.nl-tab[aria-current] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.nl-tab--nl[aria-current] { color: var(--nl); }
.nl-tab__count { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }

/* the news' filters: the origin tabs, the search, the page size and the
   Filters button on one row, the other filters folded under it */
.news-filters .news-filters__tabs { margin: 0; }
.news-filters__toggle { display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.news-filters__toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.news-filters__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .74rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.news-filters__more { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; flex: 1 1 100%; }
.news-filters__more[hidden] { display: none; }
@media (max-width: 600px) {
    .news-filters .news-filters__tabs { width: 100%; }
    .news-filters__more select.form-control { flex: 1 1 40%; }
}

/* an article: where it comes from, above its title, and the newsletter's credit under it */
.news__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; margin: 0 0 .3rem; font-size: .76rem; font-weight: 650; line-height: 1.4; }
.news__kicker--nl { color: var(--nl); }
.news__kicker--community { color: var(--accent); }
.news__kicker--org { color: var(--text-3); }
.news__kicker-sep { color: var(--text-3); font-weight: 400; }
.news__kicker-sub { color: var(--text-3); font-weight: 600; }
a.news__kicker-sub:hover, a.news__kicker-sub:focus-visible { color: var(--nl); }
.news--nl:not(.news--featured) { border-color: var(--nl-border); }
/* its summary is the newsletter's, often long: its first lines in the list, all of it on its page */
.news-list .news--nl .news__summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.news__credit { display: flex; align-items: center; gap: .35rem; margin: .55rem 0 0; padding-top: .45rem; border-top: 1px dashed var(--nl-border); color: var(--text-3); font-size: .78rem; }
.news__credit .fa { color: var(--nl); }
.news__credit a { color: var(--nl); font-weight: 600; }

/* where a run of one issue starts in the list */
.nl-divider { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 .7rem; color: var(--nl); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nl-divider::after { flex: 1; height: 1px; background: var(--nl-border); content: ""; }
.nl-divider small { color: var(--text-3); font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* the card in the list, after the sixth article */
.nl-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; margin: 0 0 .9rem; padding: 1rem 1.2rem; border: 1px solid var(--nl-border); border-radius: var(--radius-lg); background: var(--nl-soft); }
.nl-inline__text { flex: 1 1 18rem; min-width: 0; }
.nl-inline__text h3 { margin: 0 0 .25rem; font-size: 1rem; }
.nl-inline__text p { margin: 0; color: var(--text-2); font-size: .9rem; }
.nl-inline__text .nl-fine { margin-top: .3rem; color: var(--text-3); font-size: .78rem; }

/* the note under the list */
.nl-about { display: flex; align-items: flex-start; gap: .7rem; margin: 1.2rem 0 0; padding: .8rem 1rem; border: 1px dashed var(--nl-border); border-radius: var(--radius-lg); color: var(--text-2); font-size: .86rem; }
.nl-about a { color: var(--nl); font-weight: 600; white-space: nowrap; }

/* the rail: the recent issues, then the subscribe button */
.rail-card.nl-rail { padding-top: 0; overflow: hidden; border-color: var(--nl-border); text-align: left; }
.nl-rail > .rail-card__title:first-child { display: flex; align-items: center; gap: .5rem; margin: 0 -1.2rem .8rem; padding: .65rem 1.2rem; background: var(--nl); color: var(--nl-on); }
.nl-rail__intro { margin: 0 0 .6rem; color: var(--text-3); font-size: .8rem; }
.nl-issues { margin: 0; padding: 0; list-style: none; }
.nl-issues li { margin: 0; }
.nl-issues li + li { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.nl-issues a { display: block; color: var(--text); font-size: .86rem; font-weight: 600; line-height: 1.35; }
.nl-issues a[aria-current] { color: var(--nl); }
.nl-issues__num { color: var(--nl); }
.nl-issues small { color: var(--text-3); font-size: .76rem; }
.nl-rail__cta { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--nl-border); }
.nl-rail__cta p { margin: 0 0 .55rem; color: var(--text-2); font-size: .84rem; }
.nl-rail__cta .btn { display: flex; justify-content: center; width: 100%; }
.nl-rail__cta .nl-fine { margin: .45rem 0 0; text-align: center; }

/* an article's page: the newsletter's credit, and the others of its issue */
.nl-credit { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin: 0 0 1.5rem; padding: .9rem 1.1rem; border: 1px solid var(--nl-border); border-radius: var(--radius-lg); background: var(--nl-soft); }
.nl-credit__text { flex: 1 1 18rem; min-width: 0; margin: 0; color: var(--text-2); font-size: .9rem; }
.nl-credit__text strong { color: var(--text); }
.nl-credit__text a { color: var(--nl); font-weight: 600; }
.nl-credit .nl-fine { display: block; margin-top: .2rem; }
.nl-same { margin: 0 0 1.6rem; }
.nl-same h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.nl-same ol { display: grid; gap: .45rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.nl-same li { margin: 0; padding: .55rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .9rem; }
.nl-same li a { color: var(--text); font-weight: 600; }
.nl-same li small { color: var(--text-3); }
.nl-same p { margin: 0; font-size: .88rem; }

/* /admin/newsletter (views/admin/newsletter.html) */
.newsletter-group h2, .newsletter-sync-title { margin: 1.6rem 0 .5rem; font-size: 1.15rem; }
.newsletter-value code { overflow-wrap: anywhere; white-space: normal; }

/* --------------------------------------------------------------------------
   24b. The ideas' roadmap (views/ideas/index.html, Ideas.roadmapOf): a native
   <details>, closed as served. Its summary is the heading, the toggle and the
   track of the four steps of Ideas.PROGRESS with their counts; opened, the
   lanes of each step's most voted ideas, under the track on a wide screen,
   one under the other with a heading each on a narrow one and in the panel.
   Each step's colour is its .idea-stage badge's.
   -------------------------------------------------------------------------- */

.roadmap { --rm-dot: 2.6rem; --rm-gap: 1rem; margin-bottom: 2rem; }
.roadmap__step--to_plan { --rm-fg: var(--text-2); --rm-soft: var(--surface-2); --rm-border: var(--border); }
.roadmap__step--planned { --rm-fg: var(--accent); --rm-soft: var(--accent-soft); --rm-border: var(--accent-border); }
.roadmap__step--developed { --rm-fg: var(--purple); --rm-soft: var(--purple-soft); --rm-border: var(--purple-border); }
.roadmap__step--released { --rm-fg: var(--success); --rm-soft: var(--success-soft); --rm-border: var(--success-border); }

.roadmap__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .7rem 1rem;
    list-style: none; cursor: pointer; border-radius: var(--radius); }
.roadmap__summary::-webkit-details-marker { display: none; }
.roadmap__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.roadmap__title { margin: 0; font-size: 1.35rem; }
.roadmap__toggle { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.roadmap__summary:hover .roadmap__toggle { text-decoration: underline; }
.roadmap__toggle .fa { font-size: .75em; transition: transform .2s; }
.roadmap[open] .roadmap__toggle .fa { transform: rotate(180deg); }
.roadmap__toggle-hide, .roadmap[open] .roadmap__toggle-show { display: none; }
.roadmap[open] .roadmap__toggle-hide { display: inline; }

/* the track: a step's dot, name and count, then a line to the next step's dot */
.roadmap__track { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rm-gap); }
.roadmap__node { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.roadmap__node:not(:last-child)::after { content: ""; flex: 1 1 auto; min-width: .5rem; height: 4px; margin-right: calc(-1 * var(--rm-gap));
    border-radius: 2px; background: linear-gradient(90deg, var(--rm-border), var(--border)); }
.roadmap__dot { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--rm-dot); height: var(--rm-dot);
    border: 2px solid var(--rm-border); border-radius: 50%; background: var(--rm-soft); color: var(--rm-fg); font-size: 1.05rem; }
.roadmap__label { color: var(--text); font-size: 1rem; font-weight: 700; white-space: nowrap; }
.roadmap__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; padding: .05rem .45rem;
    border: 1px solid var(--rm-border); border-radius: 999px; background: var(--rm-soft); color: var(--rm-fg); font-size: .8rem; font-weight: 700; }

/* opened: the lanes, each under its step */
.roadmap__lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rm-gap); margin-top: .9rem; }
.roadmap__lane { min-width: 0; }
/* for screen readers on a wide screen, where the track above names the lane; shown on a narrow one */
.roadmap__lane-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.roadmap__ideas { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.roadmap__idea { display: flex; flex-direction: column; gap: .3rem; padding: .55rem .7rem; border: 1px solid var(--border);
    border-left: 3px solid var(--rm-fg); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
    color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.roadmap__idea:hover, .roadmap__idea:focus-visible { border-color: var(--rm-border); border-left-color: var(--rm-fg); box-shadow: var(--shadow);
    transform: translateY(-1px); color: var(--text); text-decoration: none; }
.roadmap__idea-title { display: -webkit-box; overflow: hidden; font-size: .9rem; font-weight: 600; line-height: 1.3;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.roadmap__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; color: var(--text-3); font-size: .8rem; }
.roadmap__meta .idea-origin { font-size: .72rem; }
.roadmap__votes { margin-left: auto; }
.roadmap__votes .fa { color: var(--rm-fg); }
.roadmap__version { padding: 0 .4rem; border-radius: 999px; background: var(--rm-soft); color: var(--rm-fg); font-weight: 700; }
.roadmap__more { margin: .45rem 0 0; color: var(--text-3); font-size: .82rem; }
.roadmap__lane.is-empty .roadmap__more { margin-top: 0; padding: .55rem .7rem; border: 1px dashed var(--border); border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) {
    .roadmap__idea, .roadmap__toggle .fa { transition: none; }
    .roadmap__idea:hover { transform: none; }
}

/* narrow: each step's dot over its name and count, the line from dot to dot; the lanes one under the other */
@media (max-width: 767px) {
    .roadmap { --rm-dot: 2.2rem; --rm-gap: .4rem; }
    .roadmap__title { font-size: 1.2rem; }
    .roadmap__node { position: relative; flex-direction: column; gap: .2rem; text-align: center; }
    .roadmap__node:not(:last-child)::after { position: absolute; top: calc(var(--rm-dot) / 2 - 2px); left: calc(50% + var(--rm-dot) / 2 + 3px);
        width: calc(100% - var(--rm-dot) - 6px + var(--rm-gap)); min-width: 0; margin: 0; }
    .roadmap__label { font-size: .82rem; white-space: normal; line-height: 1.2; }
    .roadmap__count { min-width: 1.4rem; font-size: .74rem; }
    .roadmap__lanes { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    .roadmap__lane-head { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
        display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; color: var(--text); font-size: 1rem; }
    .roadmap__lane-head > .fa { color: var(--rm-fg); }
}

/* --------------------------------------------------------------------------
   30. The support form (/support.html, routes/support.js, initSupportForm)
   -------------------------------------------------------------------------- */

.support-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
@media (max-width: 575px) { .support-form__row { grid-template-columns: minmax(0, 1fr); } }
.support-form .form-group[hidden] { display: none; }
.support-form textarea.form-control { min-height: 9rem; resize: vertical; }
.support-form__optional { color: var(--text-3); font-weight: 400; }
.support-form__file { display: block; max-width: 100%; font-size: .9rem; }
.support-form__done h2 { margin: 0 0 .6rem; font-size: 1.25rem; }
.support-form__done h2 .fa { color: var(--success); }
.support-form__done:focus { outline: 0; }
.support-form__done[hidden] { display: none; }

/* --------------------------------------------------------------------------
   31. A support request's page (/support/ticket/<id>, initSupportTicket):
   its facts, the conversation, oldest first, support's messages apart, and
   the reply form
   -------------------------------------------------------------------------- */

.support-ticket [hidden] { display: none; }
.support-ticket__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem 1.25rem; margin: 0 0 1.25rem; }
.support-ticket__facts dt { color: var(--text-3); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.support-ticket__facts dd { margin: .15rem 0 0; }
.support-ticket__state { display: inline-block; padding: .1rem .55rem; border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface-2); color: var(--text-2); font-size: .85rem; }
.support-ticket__state[data-state="customer"] { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.support-ticket__state[data-state="support"] { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.support-ticket__subject { margin: 0 0 1rem; font-size: 1.2rem; overflow-wrap: anywhere; }
.support-ticket__thread { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .9rem; }
.support-ticket__message { padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.support-ticket__message--support { border-color: var(--accent-border); background: var(--accent-soft); }
.support-ticket__who { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; margin: 0 0 .4rem; font-size: .88rem; color: var(--text-3); }
.support-ticket__who strong { color: var(--text); }
.support-ticket__text > :first-child { margin-top: 0; }
.support-ticket__text > :last-child { margin-bottom: 0; }
.support-ticket__files { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .88rem; color: var(--text-2); }
.support-ticket__files .fa { margin-right: .35rem; color: var(--text-3); }
.support-ticket__reply h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.support-ticket__reply textarea.form-control { min-height: 8rem; resize: vertical; }
.support-ticket__close { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.support-ticket__close p { margin: 0; flex: 1 1 16rem; color: var(--text-2); }

/* --------------------------------------------------------------------------
   32. The extension's messages in the rail (/news/widget.json, ext-messages.html,
   initExtMessages): one line folded, the bell and the count; red while some
   are newer than the visitor last opened, as the popup's bell
   -------------------------------------------------------------------------- */

.rail-card.ext-messages { padding: 0; text-align: left; }
.ext-messages__summary { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; cursor: pointer;
    list-style: none; color: var(--text-2); font-size: .86rem; font-weight: 600; }
.ext-messages__summary::-webkit-details-marker { display: none; }
.ext-messages__summary::after { content: "\25BE"; margin-left: .25rem; color: var(--text-3); font-size: .8rem; }
.ext-messages[open] .ext-messages__summary::after { content: "\25B4"; }
.ext-messages__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-lg); }
.ext-messages__label { flex: 1 1 auto; }
.ext-messages__count { min-width: 1.4rem; padding: .05rem .4rem; border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface-2); color: var(--text-2); font-size: .75rem; line-height: 1.3; text-align: center; }
.ext-messages.is-unread .fa-bell-o,
.ext-messages.is-unread .ext-messages__summary { color: var(--danger); }
.ext-messages.is-unread .ext-messages__count { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.ext-messages__list { list-style: none; max-height: 22rem; margin: 0; padding: 0 1.2rem .9rem; overflow-y: auto; }
.ext-messages__item { padding: .65rem 0 .65rem .7rem; border-left: 3px solid var(--border); }
.ext-messages__item + .ext-messages__item { margin-top: .5rem; }
.ext-messages__item--success { border-left-color: var(--success); }
.ext-messages__item--warning { border-left-color: var(--warning); }
.ext-messages__item--danger { border-left-color: var(--danger); }
.ext-messages__item--info { border-left-color: var(--accent); }
.ext-messages__item.is-new .ext-messages__title::after { content: "new"; margin-left: .4rem; padding: 0 .35rem; border-radius: 999px;
    background: var(--danger-soft); color: var(--danger); font-size: .68rem; font-weight: 700; text-transform: uppercase; vertical-align: middle; }
.ext-messages__title { margin: 0 0 .25rem; color: var(--text); font-weight: 600; font-size: .9rem; }
.ext-messages__body { color: var(--text-2); font-size: .86rem; overflow-wrap: anywhere; white-space: pre-line; }
.ext-messages__body p, .ext-messages__body ul, .ext-messages__body ol { margin: .3rem 0; }
.ext-messages__body h4, .ext-messages__body h5, .ext-messages__body h6 { margin: .4rem 0 .2rem; font-size: .9rem; }
.ext-messages__cta { margin: .4rem 0; white-space: normal; }
.ext-messages__date { display: block; margin-top: .25rem; color: var(--text-3); font-size: .75rem; }

/* --------------------------------------------------------------------------
   33. The similar ideas under the proposal's title (initIdeas, GET
   /ideas/similar): a quiet note, a line an idea, opened in a tab of its own
   -------------------------------------------------------------------------- */

.idea-similar { margin-top: .6rem; padding: .65rem .85rem; border: 1px solid var(--warning-border); border-radius: var(--radius);
    background: var(--warning-soft); font-size: .88rem; }
.idea-similar[hidden] { display: none; }
.idea-similar__title { margin: 0 0 .4rem; color: var(--text); }
.idea-similar__title .fa { color: var(--warning); }
.idea-similar__list { margin: 0; padding-left: 1.1rem; }
.idea-similar__item + .idea-similar__item { margin-top: .25rem; }
.idea-similar__link { font-weight: 600; overflow-wrap: anywhere; }
.idea-similar__meta { display: block; color: var(--text-3); font-size: .8rem; }

/* --------------------------------------------------------------------------
   34. Bring a colleague (utils/referrals.js): the Ambassador badge beside a
   member's name, the invitation on the registration pages and My profile's
   Invite tab (partials/referral-invite.html)
   -------------------------------------------------------------------------- */

/* The badge: how many colleagues the member brought, by the PRO badge. Its own colours, the same in
   both themes, one a level (data-level, the rules' levels): white on #3949ab is 7.9:1, on #00695c 7.1:1,
   on #ad1457 6.6:1, on #4e342e 11.6:1; the border sets it off a dark page too */
.ambassador-badge { --amb-bg: #3949ab; --amb-border: #283593; display: inline-block; margin-left: .35em; padding: .1em .5em;
    border: 1px solid var(--amb-border); border-radius: 999px; background: var(--amb-bg); color: #fff; font-size: .68em;
    font-weight: 800; line-height: 1.35; vertical-align: .15em; white-space: nowrap; }
.ambassador-badge .fa { margin-right: .1em; }
.ambassador-badge[data-level="2"] { --amb-bg: #00695c; --amb-border: #004d40; }
.ambassador-badge[data-level="3"] { --amb-bg: #ad1457; --amb-border: #880e4f; }
.ambassador-badge[data-level="4"], .ambassador-badge[data-level="5"], .ambassador-badge[data-level="6"],
.ambassador-badge[data-level="7"], .ambassador-badge[data-level="8"] { --amb-bg: #4e342e; --amb-border: #3e2723; }
.member-head__name .ambassador-badge { margin-left: .35em; font-size: .45em; }

.referral-invited .fa { margin-right: .3em; }

.invite + .invite { margin-top: 1rem; }
.invite__copy { display: flex; gap: .5rem; }
.invite__copy .form-control { flex: 1 1 auto; min-width: 0; font-family: var(--mono, monospace); }
.invite__copy .btn { flex: 0 0 auto; }
.invite__copy .btn[hidden] { display: none; }
.invite__share { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: .4rem 0 0; }
.invite__share-link { white-space: nowrap; font-weight: 600; }
.invite__steps { margin: 0 0 .8rem; padding-left: 1.3rem; }
.invite__steps li + li { margin-top: .35rem; }
.invite__steps ul { margin: .35rem 0; }
.referral-rules .referral-rules__title:not(:first-child) { margin-top: 1.4rem; }
.invite__ladder { max-width: 26rem; }
.invite__counts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 0 0 .8rem; }
.invite__counts dt { color: var(--text-2); font-size: .82rem; font-weight: 600; }
.invite__counts dd { margin: 0; font-size: 1.5rem; font-weight: 800; }
/* what the link earned, right under it: set apart a little, on the accent's tint, a bar of it on the left
   (only tokens: the community's teal on My profile, light and dark alike) */
.invite--summary { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent), var(--shadow-sm); }
.invite--summary .profile-account__title .fa { color: var(--accent); }
.invite--summary .invite__counts dd { color: var(--accent); }
@media (max-width: 480px) {
    .invite__copy { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   35. Cookies and YouTube, on the visitor's word
   The cookie banner (partials/consent-banner.html, initConsent): a card at
   the bottom left over the page, never a wall in front of it; Accept all and
   Reject all alike. A YouTube video (partials/youtube.html, initYouTube): a
   play button the size of the player until it is clicked.
   -------------------------------------------------------------------------- */

.consent {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 70;
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.consent[hidden] { display: none; }
.consent__title { margin: 0 2rem .4rem 0; font-size: 1.05rem; }
.consent__text { margin: 0 0 .75rem; font-size: .88rem; color: var(--text-2); }
.consent__close {
    position: absolute;
    top: .4rem;
    right: .5rem;
    padding: .1rem .45rem;
    border: 0;
    background: none;
    color: var(--text-3);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.consent__close:hover, .consent__close:focus { color: var(--text); }
.consent__choices { display: grid; gap: .45rem; margin: 0 0 .85rem; font-size: .86rem; }
.consent__choices[hidden] { display: none; }
.consent__choice { display: flex; gap: .5rem; align-items: flex-start; }
.consent__choice input { margin-top: .2rem; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.consent__actions .btn { flex: 1 1 auto; justify-content: center; }
@media print { .consent { display: none; } }

.yt-embed { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0f1320; }
.yt-embed__play {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    height: 100%;
    padding: 1rem;
    color: #fff !important;
    text-align: center;
    text-decoration: none !important;
}
.yt-embed__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    padding-left: .25rem;
    border-radius: 50%;
    background: #c4302b;
    font-size: 1.5rem;
}
.yt-embed__play:hover .yt-embed__icon, .yt-embed__play:focus .yt-embed__icon { background: #a52824; }
.yt-embed__title { font-weight: 600; }
.yt-embed__note { max-width: 26rem; font-size: .78rem; color: #c9cfdb; }
.yt-embed__frame { display: block; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   36. The guides page (views/guides.html)
   The video guides in two columns of cards and the community reviews in a
   third beside them, so the reviews show near the top; one under the other
   on a narrow screen. Each card's button at its end, level with its row's.
   -------------------------------------------------------------------------- */

.guides-layout { display: grid; gap: 0 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.guides-layout .grid { grid-template-columns: minmax(0, 1fr); }
.guides-videos > h3 { margin-top: 1.5rem; }
.guides-reviews > h2 { margin-top: 3rem; }
.guide-card { display: flex; flex-direction: column; }
.guide-card__watch { margin-top: auto; padding-top: .85rem; }

@media (min-width: 600px) {
    .guides-layout .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
    .guides-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .guides-reviews .grid { grid-template-columns: minmax(0, 1fr); }
    .guides-reviews > h2 { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   37. Getting started (utils/onboarding.js, initOnboarding and the profile
   card's onboardingBar in organizer.js)
   A member's steps: a bar with the next ones in the rail's profile card,
   folded to a small ring in the card's band, and the whole list on My
   profile's first tab (partials/getting-started.html). Tokens only: the
   community's zone and .community-card give them its colours, both themes.
   -------------------------------------------------------------------------- */

.ob-ring { display: block; flex: 0 0 auto; }
.ob-ring circle { fill: none; stroke-width: 4; }
.ob-ring__track { stroke: var(--accent-soft); }
.ob-ring__bar { stroke: var(--accent); stroke-linecap: round; }
.ob-ring__count { fill: var(--text); font-size: 11px; font-weight: 700; }
.ob-ring__total { fill: var(--text-3); font-size: 7px; font-weight: 600; }

.ob-bar { height: 6px; margin-top: .55rem; overflow: hidden; border-radius: 999px; background: var(--accent-soft); }
.ob-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* in the rail's profile card */
.ob-card { margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--border); text-align: left; }
.ob-card__head { display: flex; align-items: center; gap: .6rem; }
.ob-card__titles { flex: 1 1 auto; min-width: 0; }
.ob-card__title { margin: 0; color: var(--text); font-size: .9rem; font-weight: 700; line-height: 1.25; }
.ob-card__count { margin: 0; color: var(--text-3); font-size: .78rem; }
.ob-card__fold { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface); color: var(--text-3); font-size: .7rem; line-height: 1; cursor: pointer; }
.ob-card__fold:hover { border-color: var(--border-strong); color: var(--accent); }
.ob-card__fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-card__invited { margin: .6rem 0 0; padding: .4rem .55rem; border-radius: var(--radius); background: var(--warning-soft);
    color: var(--text-2); font-size: .76rem; line-height: 1.35; }
.ob-card__invited span { color: var(--warning); }
.ob-card__next { display: grid; gap: .1rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.rail-stack .ob-card__next a, .ob-card__next a { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; margin: 0 -.4rem;
    border-radius: var(--radius); color: var(--text); font-size: .84rem; line-height: 1.3; text-decoration: none; }
.ob-card__next a:hover, .ob-card__next a:focus-visible { background: var(--accent-soft); }
.ob-card__dot { flex: 0 0 auto; width: 13px; height: 13px; border: 2px solid var(--accent-border); border-radius: 50%; }
.ob-card__step { min-width: 0; overflow-wrap: anywhere; }
.ob-card__star { margin-left: auto; color: var(--warning); font-size: .8rem; }
.rail-stack .ob-card__all, .ob-card__all { display: inline-block; margin-top: .45rem; font-size: .82rem; font-weight: 600; text-decoration: none; }
.ob-card__all:hover { text-decoration: underline; }
.ob-card__status { margin: .4rem 0 0; color: var(--danger); font-size: .78rem; }
.ob-card__status[hidden] { display: none; }

/* folded: a small ring in the card's band, to the list */
.community-card > .rail-card__title .ob-mini { display: inline-flex; margin-left: auto; padding: 2px; border-radius: 50%; }
.community-card > .rail-card__title .ob-mini:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 1px; }
.ob-mini .ob-ring__track { stroke: var(--band-accent-soft); }
.ob-mini .ob-ring__bar { stroke: var(--band-accent); }
.ob-mini .ob-ring circle { stroke-width: 5; }

/* My profile's Getting started tab */
.getting-started__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.getting-started__summary { flex: 1 1 16rem; min-width: 0; }
.card .getting-started__summary .profile-account__title { margin: 0 0 .25rem; }
.getting-started__summary p { margin: 0; }
.ob-bar__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .3rem !important; color: var(--text-3);
    font-size: .8rem; font-variant-numeric: tabular-nums; }
.getting-started__toggle [hidden] { display: none; }
.getting-started .help-block[hidden] { display: none; }
.getting-started__invited { margin: 1rem 0 0; padding: .6rem .8rem; border: 1px solid var(--warning-border); border-radius: var(--radius);
    background: var(--warning-soft); color: var(--text-2); font-size: .9rem; }
.getting-started__invited .fa { color: var(--warning); margin-right: .2rem; }
.getting-started__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin-top: 1.25rem;
    align-items: start; }
.ob-group { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ob-group__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .9rem;
    border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ob-group__head h3 { margin: 0; font-size: .95rem; }
.ob-group__count { color: var(--text-3); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob-steps { margin: 0; padding: 0; list-style: none; }
.ob-step { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: .2rem .75rem; align-items: start;
    padding: .7rem .9rem; border-top: 1px solid var(--border); }
.ob-step:first-child { border-top: 0; }
.ob-step__mark { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-top: .1rem;
    border: 2px solid var(--border-strong); border-radius: 50%; color: transparent; font-size: .65rem; }
.ob-step.is-done .ob-step__mark { border-color: var(--success); background: var(--success); color: var(--surface); }
.ob-step__title { margin: 0; color: var(--text); font-size: .92rem; font-weight: 600; line-height: 1.35; }
.ob-step.is-done .ob-step__title { color: var(--text-3); font-weight: 500; }
.ob-step__why { margin: .15rem 0 0; color: var(--text-2); font-size: .84rem; }
.ob-step__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 0; }
.ob-tag { padding: .05rem .5rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-3); font-size: .7rem;
    font-weight: 600; }
.ob-tag--referral { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.ob-step__cta { align-self: center; white-space: nowrap; }

/* --------------------------------------------------------------------------
   38. The layout's widgets (utils/layout.js, /admin/layout; partials/layout-rich.html,
   page-start.html, page-rail.html; initLayoutWidgets and initLayoutToc in organizer.js)
   The admin's rich texts in a template's spaces: plain (the text alone), card
   (a card as the rail's), highlight (the accent's soft ground); the band above
   the site footer; the rail's table of contents. Tokens only, both themes.
   -------------------------------------------------------------------------- */

/* a member's browser (org-member, set before the first paint by partials/header.html) never shows
   the rich texts for the visitors signed out, unless /account/me says nobody is (org-guest) */
.org-member:not(.org-guest) [data-audience="out"] { display: none !important; }

.layout-rich { min-width: 0; text-align: left; overflow-wrap: anywhere; }
.layout-rich[hidden] { display: none; }
.layout-rich__title { margin: 0 0 .45rem; color: var(--text); font-size: .98rem; font-weight: 700; line-height: 1.3; }
.layout-rich__body { color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.layout-rich__body > * { margin: 0; }
.layout-rich__body > * + * { margin-top: .6rem; }
.layout-rich__body ul, .layout-rich__body ol { padding-left: 1.2rem; }
.layout-rich__body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.layout-rich__body .md-heading { color: var(--text); }
.layout-rich__body code { font-size: .85em; }
.layout-rich__body blockquote { margin-left: 0; padding-left: .8rem; border-left: 3px solid var(--border-strong); }

.layout-rich--main, .layout-rich--foot { padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.page__main > .layout-rich--main { margin-block: 0 1.75rem; }
.page__main > .layout-rich--main ~ .layout-rich--main:last-child { margin-block: 2rem 0; }
.layout-rich--plain { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.rail-card.layout-rich--plain { padding: 0 .2rem; }
.layout-rich--highlight { border-color: var(--accent-border, var(--border)); background: var(--accent-soft); }
.layout-rich--highlight .layout-rich__body { color: var(--text); }
.sponsor-head.layout-rich--highlight { background: var(--accent-soft); }

/* the band above the site footer: the grid's last row, full width */
.page-foot { display: grid; gap: 1rem; }
.page-foot:not(:has(> :not([hidden]))) { display: none; }
.site-banner--footer { text-align: center; }

/* the rail's table of contents (the toc widget): the page's h2 and h3 */
.layout-toc { text-align: left; }
.layout-toc ol { margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.layout-toc li + li { margin-top: .15rem; }
.layout-toc a { display: block; padding: .2rem .5rem; border-left: 2px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-2); text-decoration: none; }
.layout-toc a:hover, .layout-toc a:focus { border-left-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
.layout-toc a.is-active { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.layout-toc .layout-toc__sub a { padding-left: 1.2rem; font-size: .82rem; }