/* ================================
   BLOOM - SHARED STYLESHEET
   ================================

   Shared styles loaded by both the public site and Bloom Studio.
   Public-only styles (hero, ticker, process, team, modals, cases)
   are in public.css.

   TABLE OF CONTENTS
   1. CSS Variables & Reset
   2. Global Styles & Typography
   3. Utility Classes
   4. Header & Navigation
   5. Sections & Layout
   6. Cards & Grids
   7. Footer
   7a. Entry Pages (password reset, invitation accept)
   7b. Forms (shared by the login modal and the entry pages)
   8. Studio Pages (org admin: tables, flash messages)
   9. Mobile Responsive Styles (shared)
   ================================ */


/* ================================
   1. CSS VARIABLES & RESET
   ================================ */

:root {
    --primary-color: #007474;
    --secondary-color: #008283;
    --accent-color: #FCB760;
    --text-color: #ffffff;
    --text-muted: #e0f2f2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Barlow', sans-serif;
    background-color: var(--primary-color);
    color: var(--text-color);
    line-height: 1.6;
}

.background-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--primary-color);
    background-image:
        radial-gradient(circle at 10% 20%, var(--secondary-color) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, var(--secondary-color) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    background-size: cover;
}


/* ================================
   2. GLOBAL STYLES & TYPOGRAPHY
   ================================ */

h1,
h2,
h3,
h4 {
    font-family: 'Poppins', sans-serif;
}

a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

p {
    margin-bottom: 15px;
}

ul {
    list-style: none;
}


/* ================================
   3. UTILITY CLASSES
   ================================ */

/* Visible to screen readers only — for labels that would be redundant on
   screen but are required for an accessible form control. */
.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;
}

/* Font Utilities */
.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.font-barlow {
    font-family: 'Barlow', sans-serif;
}

/* Color Utilities */
.bloom-primary-bg {
    background-color: var(--primary-color);
}

.bloom-primary-text {
    color: var(--primary-color);
}

.bloom-accent-bg {
    background-color: var(--accent-color);
}


/* Animation Utilities */
.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ================================
   4. HEADER & NAVIGATION
   ================================ */

header {
    padding: 20px 5%;
    position: fixed;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 100;
    background: rgba(0, 116, 116, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    filter: invert(1);
}

/* Main Navigation */
nav ul {
    display: flex;
    gap: 30px;
}

nav ul li a {
    font-weight: 500;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

nav ul li a:hover {
    color: var(--accent-color);
}

/* Studio Button */
.studio-btn {
    border: 1px solid var(--accent-color);
    padding: 8px 20px;
    border-radius: 50px;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    background: transparent;
    min-width: 120px;
}

.lang-btn {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    line-height: normal !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
    text-align: center !important;
    min-width: 0;
    width: 48px;
    justify-content: center;
}

.studio-btn:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
}

/* Breadcrumb Navigation (Bloom Studio & Tools Pages) */
.header-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}

.breadcrumb-separator {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 1rem;
    white-space: nowrap;
}

.breadcrumb-portal,
.breadcrumb-portal-link {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
}

.breadcrumb-portal-link {
    text-decoration: none;
    transition: opacity 0.3s;
}

.breadcrumb-portal-link:hover {
    opacity: 0.8;
}

.breadcrumb-tool {
    color: var(--text-color);
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
}

/* User Section */
.header-user-section {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}

.user-name {
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
}

/* Mobile Navigation */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
}

.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 116, 116, 0.98);
    z-index: 99;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.mobile-nav.active {
    display: flex;
}

.mobile-nav a {
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mobile-nav a:hover {
    color: var(--accent-color);
}

.mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}


/* ================================
   5. SECTIONS & LAYOUT
   ================================ */

section {
    padding: 100px 5%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
}

/* The Studio dashboard stacks four sections (tools, organization, Bloom
   admin, cross-org). The marketing page's full-screen sections above would
   put the third one two screens down, so here a section is as tall as its
   cards (#383). The padding is untouched: the top padding is what clears the
   fixed header (see .studio-page). */
.studio-dashboard section {
    min-height: 0;
    /* Tuned by eye with Robert, 2026-09-20 (20 was tight, 100 was the
       marketing page's). Bottom padding stays the section default. */
    padding-top: 40px;
}

/* The fixed header is ~80px (the offset tools.css uses too). On the
   marketing page it overlaps the hero by design; on the dashboard it ate the
   first section's top padding, so "Dina verktyg" sat 20px below the header
   while the next headings had the full 100px. Start the dashboard below the
   header instead, and every section's padding shows in full. */
.studio-dashboard {
    padding-top: 80px;
}

/* section:last-of-type below gives the last section on a page a viewport's
   worth of height (the marketing page's closing section). Same specificity as
   the dashboard rule above and later in the file, so it won for the
   dashboard's last section alone — the pad above the footer was one section
   taller than the others. Scoped off here. */
.studio-dashboard section:last-of-type {
    min-height: 0;
}

/* Dashboard sections are full-bleed with the width on .section-inner, so
   the tint can alternate structurally: whichever sections a given member
   sees (the platform section only for staff, the cross-org one only for
   grant holders), every second one is tinted (Robert, 2026-09-20). */
.studio-dashboard section {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.studio-dashboard section > .section-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
}

.studio-dashboard section:nth-of-type(even) {
    background-color: rgba(0, 130, 131, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

section:last-of-type {
    min-height: calc(100vh - 200px);
}

.bg-alternate {
    background-color: rgba(0, 130, 131, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.bg-alternate>.section-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100px;
    height: 4px;
    background-color: var(--accent-color);
}

.section-intro {
    font-size: 1.2rem;
    max-width: 800px;
    margin-bottom: 40px;
    color: var(--text-muted);
}


/* ================================
   6. CARDS & GRIDS
   ================================ */

.grid-container {
    display: grid;
    /* auto-fill (not auto-fit) keeps empty column tracks, so a partially
       filled row renders its cards at the same width as a full row instead
       of stretching them across the section. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
}

.card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    padding: 40px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.card-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.card p {
    color: var(--text-muted);
    font-size: 1rem;
}

.card-clickable {
    cursor: pointer;
}

.card-clickable:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

.card-link {
    margin-top: auto;
    padding-top: 20px;
    color: var(--accent-color);
    font-size: 0.95rem;
    font-weight: 500;
}

.card-clickable:hover .card-link {
    text-decoration: underline;
}

/* Case Cards */
.case-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.case-tag {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-color);
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-weight: 700;
}

.case-tag--ongoing {
    color: #fff;
    background: var(--accent-color);
}

.case-card-list {
    margin-top: 15px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.case-card-footer {
    margin-top: auto;
    padding-top: 18px;
}


/* ================================
   7. FOOTER
   ================================ */

footer {
    background-color: #001a1a;
    padding: 60px 5%;
    text-align: center;
    border-top: 1px solid var(--secondary-color);
    width: 100%;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.footer-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.footer-icon:hover {
    background: var(--accent-color);
    color: var(--primary-color);
}


/* ================================
   7a. ENTRY PAGES (password reset, invitation accept)
   ================================ */

/* The first Bloom screen a client's colleague ever sees is usually one of
   these, arriving from an email link. They are deliberately bare: the brand,
   the form, and nothing to navigate away into — no marketing nav, no footer
   links, no login modal. Bloom-branded but minimal (Robert, 2026-07-26). */

.entry-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 28px;
}

.entry-logo img {
    height: 44px;
    width: auto;
    /* Same inversion the header applies: the asset is dark, the background is
       the brand teal. */
    filter: invert(1);
}

/* The card the six templates used to hand-roll with inline styles. */
.entry-card {
    width: 100%;
    max-width: 440px;
}

.entry-head {
    text-align: center;
    margin-bottom: 30px;
}

.entry-head i {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    display: block;
}

/* A dead-end page (expired link) mutes its icon — there is nothing to act on. */
.entry-head i.is-muted {
    color: var(--text-muted);
    opacity: 0.7;
}

.entry-head h2 {
    font-size: 1.5rem;
}

.entry-head p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.entry-foot {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.75;
}

.entry-foot a {
    color: inherit;
}

/* ================================
   7b. FORMS (shared by the login modal and the entry pages)
   ================================ */

/* These live here, not in public.css: the entry pages (password reset,
   invitation accept) load main.css alone, and a form styled from public.css
   would render unstyled for them. The public login modal gets them either way,
   since public pages load both stylesheets. */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--secondary-color);
    background: rgba(0, 0, 0, 0.2);
    color: white;
    font-family: 'Barlow', sans-serif;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.login-submit {
    width: 100%;
    padding: 12px;
    background: var(--accent-color);
    border: none;
    border-radius: 8px;
    color: #003333;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
}

/* An <a> acting as the form's action ("request a new link", "back to the
   site"). Sized to its text rather than to the form's width; the six entry
   templates used to patch this in with inline styles. */
.login-submit.is-inline {
    display: inline-block;
    width: auto;
    padding: 12px 28px;
    text-decoration: none;
}

.login-error {
    color: #ff6b6b;
    font-size: 0.9rem;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 8px;
    text-align: center;
}


/* ================================
   8. STUDIO PAGES (ORG ADMIN)
   ================================ */

/* Inner pages of Bloom Studio itself (member management, org admin) — as
   opposed to the dashboard (cards) or a tool (React). Forms and tables live
   here rather than in public.css: portal pages load only main.css, so a
   template using public.css's rules would silently render unstyled. These are
   the portal-native equivalents (#152). The shared .form-group / .login-submit
   rules that warning was about now live in section 7b above, so the hazard is
   gone rather than merely documented (#154). */

.studio-page {
    /* Narrower than a dashboard section; inherits section's top padding, which
       is what clears the fixed header — never override padding inline. */
    max-width: 900px;
}

.studio-page-narrow {
    max-width: 520px;
}

/* Muted secondary link/action (e.g. a "Cancel" beside a primary button).
   Resets button chrome too, so <a> and <button> render identically. */
.studio-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-family: 'Barlow', sans-serif;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.studio-back:hover {
    color: var(--accent-color);
}

.studio-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* The section-title underline sits tight against following text; give the
   intro room to breathe (#152). */
.studio-page-header + .section-intro {
    margin-top: 18px;
}

/* --- Forms --- */

.studio-form-group {
    margin-bottom: 20px;
}

/* Direct child only: a nested control (e.g. the role radiogroup) has its own
   labels that must not inherit the field-caption styling. */
.studio-form-group > label,
.studio-form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.studio-form-group input,
.studio-form-group select {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--secondary-color);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-color);
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
}

.studio-form-group input:focus,
.studio-form-group select:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* A select reads like the inputs beside it: no system chrome, one gold
   chevron, and a light option list so the browser's popup stays legible on
   the dark ground (Robert, 2026-09-20). */
.studio-form-group select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23FCB760' stroke-width='2' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.studio-form-group select option {
    background: #ffffff;
    color: #111111;
}

/* A checkbox row inside a form group: the box and its text on one line, in
   body type — not the uppercase field caption, not a full-width control. */
.studio-form-group > label.studio-check {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 0;
    cursor: pointer;
}

.studio-check input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-color);
    flex: 0 0 auto;
}

/* A question-circle icon whose title carries the explanation: hover or focus
   to read. The standard icon, not a hand-drawn ring (Robert, 2026-09-20). */
.studio-help {
    margin-left: 6px;
    font-size: 0.85rem;
    color: var(--accent-color);
    opacity: 0.85;
    cursor: help;
    vertical-align: middle;
}

/* A subheading that follows a form or table inside a panel needs air. */
.studio-panel .studio-subheading {
    margin-top: 36px;
}


/* Filled primary action (the pill outline .studio-btn is the secondary). */
/* --- Gold pill -------------------------------------------------------------
   The brand's filled call-to-action, in one place. It was defined twice — as
   .cta-btn on the public site and .studio-btn-primary in the portal — with
   drifting padding and two different hovers (a lift here, an opacity fade
   there). The hero's treatment is the canonical one (#154).

   Identity is shared; only size differs, and the sizes are named rather than
   patched in with inline styles at the call site. */
.cta-btn,
.studio-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-color);
    border: none;
    border-radius: 50px;
    color: #003333;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-btn:hover,
.studio-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Hero size: the largest, for a page's single main action. */
.cta-btn {
    padding: 16px 40px;
    font-size: 1.1rem;
}

/* In-page primary action (portal forms, table headers). */
.studio-btn-primary {
    padding: 12px 24px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
}

/* Two smaller sizes for the public page's inline actions. */
.cta-btn.is-md {
    padding: 14px 32px;
    font-size: 1rem;
}

.cta-btn.is-sm {
    padding: 10px 18px;
    font-size: 0.95rem;
}

/* Small inline action inside a table row. */
.studio-btn-sm {
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--text-color);
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.studio-btn-sm:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.studio-btn-sm.is-danger:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

/* --- Flash messages --- */

.studio-flash {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.studio-flash.is-success {
    background: rgba(252, 183, 96, 0.12);
    border: 1px solid rgba(252, 183, 96, 0.4);
    color: var(--text-color);
}

.studio-flash.is-error {
    background: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #ffd5d5;
}

/* --- Toolbar above a table: primary action, left-aligned --- */

.studio-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* --- Data tables (card-like, to match the dashboard's language) --- */

.studio-table-wrap {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 40px;
}

.studio-table-scroll {
    overflow-x: auto;
}

.studio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.studio-table th {
    text-align: left;
    padding: 14px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    opacity: 0.75;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

/* The consent tables (#387): a name column, then checkbox columns. */
.studio-consent-table td:not(:first-child),
.studio-consent-table th:not(:first-child) {
    text-align: center;
}

.studio-consent-table input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
}

.studio-table td {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.studio-table tbody tr {
    transition: background 0.2s ease;
}

.studio-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

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

.studio-table tr.is-inactive .studio-avatar,
.studio-table tr.is-inactive .member-identity {
    opacity: 0.55;
}

.studio-table .cell-actions {
    text-align: right;
    white-space: nowrap;
}

/* Role picker as a two-segment toggle. With only Manager/Member to choose
   between, a segmented control beats a <select>: the current value is visible
   without opening anything, and switching is one click instead of two. Each
   segment is a real submit button, so it works with no JavaScript at all. */
.studio-role-toggle {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.studio-role-option {
    display: inline-block;
    padding: 4px 14px;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.studio-role-option:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
}

.studio-role-option:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

/* Radio variant — used where the role is a *field* in a larger form (the invite
   modal) rather than the action itself, so picking must not submit. Same look;
   the input is visually hidden and its label carries the styling. Declared after
   :hover so the selected segment stays put under the cursor. */
.studio-role-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.studio-role-option.is-active,
.studio-role-radio:checked + .studio-role-option,
.studio-role-radio:checked + .studio-role-option:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--text-color);
    font-weight: 600;
}

.studio-role-option.is-active {
    cursor: default;
}

.studio-role-radio:focus-visible + .studio-role-option {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

/* Focusing the dialog panel shouldn't draw a focus ring around the whole box. */
.studio-modal-content:focus {
    outline: none;
}

.studio-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- Member identity cell: avatar + stacked name/email --- */

.member-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

.studio-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
    text-transform: uppercase;
}

.member-identity {
    min-width: 0;
}

.member-name {
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-email {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-you {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-color);
    border: 1px solid rgba(252, 183, 96, 0.5);
    border-radius: 50px;
    padding: 1px 8px;
    margin-left: 8px;
    vertical-align: middle;
}

/* --- Badges --- */

.studio-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.studio-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.studio-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.studio-status.is-active {
    color: #7ee2b8;
}

.studio-status.is-inactive {
    color: var(--text-muted);
    opacity: 0.6;
}

.studio-muted {
    color: var(--text-muted);
    opacity: 0.7;
}

.studio-subheading {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 16px;
}

/* Empty state inside a table card. */
.studio-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    opacity: 0.7;
}

/* --- Panels (org landing page, #205) --- */

.studio-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
}

.studio-panel-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    margin-bottom: 16px;
}

.studio-panel-title i {
    color: var(--accent-color);
    margin-right: 8px;
}

.studio-dl {
    display: grid;
    grid-template-columns: minmax(150px, max-content) 1fr;
    gap: 10px 24px;
    margin: 0;
}

.studio-dl dt {
    color: var(--text-muted);
    opacity: 0.8;
}

.studio-dl dd {
    margin: 0;
}

.studio-hint {
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.studio-capabilities-lead {
    margin-top: 16px;
    margin-bottom: 8px;
}

.studio-capabilities {
    margin: 0;
    padding-left: 4px;
    list-style: none;
}

.studio-capabilities li {
    padding: 4px 0 4px 26px;
    position: relative;
}

.studio-capabilities li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #7ee2b8;
}

/* --- Pagination (activity log) --- */

.studio-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.studio-page-count {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Cross-org view (#153) ---
   The banner is pinned to the bottom, not tucked under the header: the header
   is position:fixed and every page (plus each tool's React root) clears it with
   its own top offset, so a strip below it would be hidden on some pages and
   overlap content on others. Gold, because "you are reading someone else's
   data" should be impossible to scroll past. */

.cross-org-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px 5%;
    background: var(--accent-color);
    color: #003333;
    font-weight: 600;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
}

.cross-org-banner-text i {
    margin-right: 8px;
}

/* .studio-btn is gold-on-transparent — invisible on the gold strip. */
.cross-org-banner-btn {
    padding: 4px 16px;
    border-color: #003333;
    color: #003333;
}

.cross-org-banner-btn:hover {
    background: #003333;
    color: var(--accent-color);
}

.cross-org-switcher {
    max-width: 420px;
}

/* Two submits (view / work, #246) — wrap rather than shrink on narrow screens,
   so neither ever reads as the other's modifier. */
.cross-org-switcher-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- Modals (studio-namespaced) ---
   Deliberately NOT reusing public.css's .modal-overlay: portal pages load only
   main.css, while public pages load both — separate names keep the two from
   ever fighting. Driven by studio.js as a progressive enhancement: the trigger
   is a real link to the standalone page, so the flow still works without JS. */

.studio-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.studio-modal.is-open,
.studio-modal:target {
    display: flex;
}

.studio-modal-content {
    background: var(--primary-color);
    border: 1px solid var(--secondary-color);
    padding: 40px;
    border-radius: 20px;
    width: 100%;
    max-width: 460px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
    overflow-y: auto;
}

.studio-modal-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.studio-modal-intro {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.studio-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.3s ease;
}

.studio-modal-close:hover {
    color: var(--accent-color);
}

.studio-modal-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}

/* ================================
   9. MOBILE RESPONSIVE (SHARED)
   ================================ */

@media (max-width: 768px) {

    /* Header */
    header {
        padding: 15px 4%;
    }

    .mobile-menu-btn {
        display: block;
    }

    nav {
        display: none;
    }

    .studio-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .logo img {
        height: 32px;
    }

    /* Sections */
    section {
        padding: 60px 5%;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .section-intro {
        font-size: 1rem;
        margin-bottom: 40px;
    }

    .bg-alternate {
        width: 100%;
        margin-left: 0;
        padding-left: 5%;
        padding-right: 5%;
    }

    /* Grid container */
    .grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card {
        padding: 25px;
    }

    .card h3 {
        font-size: 1.25rem;
    }

    /* Footer */
    footer {
        padding: 40px 5%;
    }

    .footer-icon {
        width: 45px;
        height: 45px;
    }
}