/*
 * Gather · Tabletop — the page chrome for gather.plugginsoftware.com.
 *
 * The tokens below are the theme. The Gather module's stylesheet reads the
 * same --gather-* names (with these values as its own fallbacks), so its
 * cards, buttons and grids follow whatever is set here. Core's Bootstrap and
 * the default theme's styles.css still load first; this file only overrides.
 */

:root {
    --gather-brand: #23255a;
    --gather-brand-ink: #ffffff;
    --gather-brand-soft: #d8d9f2;
    --gather-ground: #f6f5fb;
    --gather-card: #ffffff;
    --gather-border: #e2e1ef;
    --gather-rule: #ecebf5;
    --gather-ink: #1f2140;
    --gather-muted: #565a85;
    --gather-faint: #6e7194;
    --gather-link: #3b3f8f;
    --gather-link-hover: #272a6b;
    --gather-accent: #f2b63d;
    --gather-accent-ink: #23255a;
    --gather-accent-soft: #fff3d6;
    --gather-accent-soft-ink: #7a4f00;
    --gather-chip: #ebecfb;
    --gather-chip-ink: #3b3f8f;
    --gather-yes: #1d6b3f;
    --gather-yes-soft: #e3f4ea;
    --gather-maybe: #8a5a00;
    --gather-no: #a3262a;
    --gather-no-soft: #fbeaea;
    --gather-input: #ffffff;
    --gather-input-border: #cfd0e6;
    --gather-shadow: 0 6px 18px rgba(35, 37, 90, 0.10);
    --gather-radius: 16px;
    --gather-radius-sm: 12px;
    --gather-heading: "Fraunces", Georgia, "Times New Roman", serif;
    --gather-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gather-brand: #1a1b45;
        --gather-brand-soft: #c4c6ee;
        --gather-ground: #14152e;
        --gather-card: #1d1f42;
        --gather-border: #2f3263;
        --gather-rule: #2a2c58;
        --gather-ink: #ecebfa;
        --gather-muted: #a7a9cf;
        --gather-faint: #9294bf;
        --gather-link: #b7baff;
        --gather-link-hover: #dcdcff;
        --gather-accent-soft: #3a2f12;
        --gather-accent-soft-ink: #ffd98a;
        --gather-chip: #2b2e66;
        --gather-chip-ink: #d0d2ff;
        --gather-yes: #7fd8a2;
        --gather-yes-soft: #173826;
        --gather-maybe: #f2c46a;
        --gather-no: #ff9b9b;
        --gather-no-soft: #3d1d22;
        --gather-input: #15163a;
        --gather-input-border: #3a3d72;
        --gather-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    }
}

:root[data-theme="dark"] {
    --gather-brand: #1a1b45;
    --gather-brand-soft: #c4c6ee;
    --gather-ground: #14152e;
    --gather-card: #1d1f42;
    --gather-border: #2f3263;
    --gather-rule: #2a2c58;
    --gather-ink: #ecebfa;
    --gather-muted: #a7a9cf;
    --gather-faint: #9294bf;
    --gather-link: #b7baff;
    --gather-link-hover: #dcdcff;
    --gather-accent-soft: #3a2f12;
    --gather-accent-soft-ink: #ffd98a;
    --gather-chip: #2b2e66;
    --gather-chip-ink: #d0d2ff;
    --gather-yes: #7fd8a2;
    --gather-yes-soft: #173826;
    --gather-maybe: #f2c46a;
    --gather-no: #ff9b9b;
    --gather-no-soft: #3d1d22;
    --gather-input: #15163a;
    --gather-input-border: #3a3d72;
    --gather-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

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

html,
body.tt {
    background: var(--gather-ground);
}

body.tt {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--gather-ink);
    font-family: var(--gather-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body.tt :where(a) {
    color: var(--gather-link);
}

body.tt :where(a):hover,
body.tt :where(a):focus {
    color: var(--gather-link-hover);
}

body.tt :where(h1, h2, h3) {
    font-family: var(--gather-heading);
    font-weight: 700;
    color: var(--gather-ink);
    letter-spacing: 0;
}

body.tt :where(h1),
body.tt .tt-page-title {
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
    margin: 0 0 1rem;
}

body.tt :where(h2) {
    font-size: 1.6rem;
    margin: 0 0 1rem;
}

body.tt :where(h3) {
    font-size: 1.3rem;
}

body.tt :focus-visible {
    outline: 3px solid var(--gather-accent);
    outline-offset: 2px;
}

.screen-reader {
    position: absolute;
    left: -9999px;
}

.screen-reader:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--gather-card);
    border-radius: 8px;
}

/* ---- header ---- */

.tt-header {
    background: var(--gather-brand);
    color: var(--gather-brand-ink);
}

.tt-bar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (min-width: 720px) {
    .tt-bar {
        padding: 0 40px;
    }
}

body.tt .tt-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--gather-brand-ink);
    text-decoration: none;
}

body.tt .tt-brand:hover,
body.tt .tt-brand:focus {
    color: var(--gather-brand-ink);
}

.tt-d20 {
    color: var(--gather-accent);
    flex: none;
    transition: transform 0.4s ease;
}

.tt-brand:hover .tt-d20 {
    transform: rotate(60deg);
}

@media (prefers-reduced-motion: reduce) {
    .tt-d20 {
        transition: none;
    }
}

.tt-wordmark {
    font-family: var(--gather-heading);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    /* one line: a long site name shortens with … rather than wrapping the bar */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.tt .tt-brand {
    min-width: 0;
    flex: 0 1 auto;
}

@media (max-width: 480px) {
    .tt-wordmark {
        font-size: 22px;
    }
}

/*
 * The account menu (core/templates/account-nav.twig). The default theme pins
 * it to the page's corner in a teal box; here it sits in the header's
 * right-hand slot as one row (quick links, notifications, picture) and the
 * menu drops down over the page. Centred with flex, never a transform: the
 * notification and quick-link panels inside are position:fixed, and a
 * transform would pin them to this box (AinA learned it first).
 */
.tt-account {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
}

.tt-account .account-badge {
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
    /* The default theme gives the badge z-index 2. Here it is a flex item, and
       a flex item with a z-index forms its own stacking context even
       unpositioned — which capped the notifications and quick links panels
       (fixed, z 1045) at 2, under the "Edit page" tab (z 5). */
    z-index: auto;
}

.tt-account .account-badge .profile {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 4px;
}

.tt-account .account-badge .profile > * {
    float: none;
}

.tt-account .site_notify_badge,
.tt-account .es_quicklinks {
    flex-direction: row;
    padding: 0 8px;
    font-size: 1.2em;
}

/* the icons (the panels' triggers) only; the panels live in here too */
.tt-account .notification-badge,
.tt-account .notification-badge > *,
.tt-account .quicklink-badge,
.tt-account .quicklink-badge > * {
    color: var(--gather-brand-soft) !important;
}

.tt-account .account-badge .profile .pic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    box-shadow: 0 0 0 2px var(--gather-accent);
}

.tt-account .account-nav {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 30;
    margin-top: 10px;
    width: 200px;
    padding: 8px;
    background: var(--gather-card);
    border: 1px solid var(--gather-border);
    border-radius: var(--gather-radius-sm);
    box-shadow: var(--gather-shadow);
    text-align: left;
}

.tt-account .account-nav li {
    text-align: left;
    padding: 6px 10px;
    border-radius: 8px;
}

.tt-account .account-nav li:hover {
    background-color: var(--gather-chip);
}

.tt-account .account-nav a,
.tt-account .account-nav a:visited,
.tt-account .account-who {
    color: var(--gather-ink);
    text-decoration: none;
}

.tt-account .account-who span {
    display: block;
    color: var(--gather-muted);
    font-size: 0.85rem;
}

.tt-account .account-nav .account-signout {
    background: var(--gather-accent);
    border-color: var(--gather-accent);
    color: var(--gather-accent-ink) !important;
    border-radius: 999px;
    font-weight: 600;
    text-align: center;
}

/*
 * The site menu (core/templates/nav.twig) in the header bar. Core draws a
 * Bootstrap navbar with an inline grey background and the default theme's
 * dividers; here it is a row of light pills on the indigo, the page you are
 * on lit. Below Bootstrap's lg breakpoint it collapses behind ☰ and drops
 * down under the whole bar as a card (AinA's approach: the bar is the
 * positioning context, never the nav's own narrow slot).
 */
.tt-bar {
    position: relative;
}

.tt-site-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.tt-site-nav .navbar {
    background: transparent !important;
    padding: 0;
    margin: 0;
    max-width: none;
    width: auto;
    position: static;
}

.tt-site-nav nav ul {
    margin: 0 !important;
    padding-inline-start: 0;
}

.tt-site-nav .navbar-nav {
    gap: 4px;
    align-items: center;
}

.tt-site-nav .navbar ul > li.nav-item {
    border-right: 0;
    margin: 0;
    padding: 0;
}

.tt-site-nav .nav-link,
.tt-site-nav .nav-link:visited {
    color: var(--gather-brand-soft) !important;
    font-weight: 500;
    padding: 8px 14px !important;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.tt-site-nav .nav-link:hover,
.tt-site-nav .nav-link:focus-visible {
    color: var(--gather-brand-ink) !important;
    background: rgba(255, 255, 255, 0.10);
}

.tt-site-nav .nav-link.active {
    color: var(--gather-brand-ink) !important;
    background: rgba(255, 255, 255, 0.16);
}

.tt-site-nav .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    color: var(--gather-brand-ink);
    padding: 8px 12px;
    min-height: 44px;
    min-width: 44px;
}

.tt-site-nav .dropdown-menu {
    background: var(--gather-card);
    border: 1px solid var(--gather-border);
    border-radius: var(--gather-radius-sm);
    box-shadow: var(--gather-shadow);
}

.tt-site-nav .dropdown-item {
    color: var(--gather-ink);
}

@media (max-width: 991px) {
    .tt-site-nav .navbar-collapse {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 40;
        padding: 8px 16px 14px;
        background: var(--gather-card);
        border-bottom: 1px solid var(--gather-border);
        box-shadow: var(--gather-shadow);
    }

    .tt-site-nav .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .tt-site-nav .nav-link,
    .tt-site-nav .nav-link:visited {
        color: var(--gather-ink) !important;
        border-radius: 10px;
    }

    .tt-site-nav .nav-link:hover,
    .tt-site-nav .nav-link.active {
        color: var(--gather-ink) !important;
        background: var(--gather-chip);
    }
}

/* ---- main + footer ---- */

.tt-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 16px 48px;
    box-sizing: border-box;
}

@media (min-width: 720px) {
    .tt-main {
        padding: 32px 40px 56px;
    }
}

.tt-footer {
    border-top: 1px solid var(--gather-border);
    color: var(--gather-muted);
    font-size: 0.875rem;
    padding: 20px 16px;
    text-align: center;
}

.tt-colophon {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tt-colophon svg {
    color: var(--gather-accent-soft-ink);
}

/* Core's session messages (Core::get_message()) as Tabletop banners. */
body.tt .alert {
    border-radius: var(--gather-radius-sm);
    border-width: 1px;
}

/* Bootstrap form controls, quietly in the palette. */
body.tt .form-control,
body.tt .form-select,
body.tt input[type="text"],
body.tt input[type="email"],
body.tt input[type="date"],
body.tt input[type="time"],
body.tt input[type="number"],
body.tt input[type="datetime-local"],
body.tt select,
body.tt textarea {
    background-color: var(--gather-input);
    color: var(--gather-ink);
    border: 1px solid var(--gather-input-border);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font: inherit;
    min-height: 44px;
    box-sizing: border-box;
}

body.tt textarea {
    min-height: 6rem;
}

body.tt input:focus,
body.tt select:focus,
body.tt textarea:focus {
    border-color: var(--gather-link);
    box-shadow: 0 0 0 3px rgba(242, 182, 61, 0.35);
    outline: none;
}

body.tt input[type="checkbox"],
body.tt input[type="radio"] {
    accent-color: var(--gather-brand);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.tt input[type="checkbox"],
    :root:not([data-theme="light"]) body.tt input[type="radio"] {
        accent-color: var(--gather-accent);
    }
}

/* Core's general.css sets every label bold and upper case; here a label is
   a plain sentence. */
body.tt :where(label) {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}