/* ==========================================================================
   FLARES WORKSPACE
   The design language is inherited from flares-website: Cabinet Grotesk,
   a monochrome palette, 8px radii, soft low-contrast shadows and generous
   whitespace. Tokens below map one-to-one onto the variables used there
   (--primary-color, --light-gray, --medium-gray, --dark-gray, --border-radius,
   --box-shadow) so the two properties stay visually identical.
   ========================================================================== */

:root {
    /* --- Brand palette (from flares-website) --- */
    --primary-color: #000000;
    --secondary-color: #ffffff;
    --accent-color: #000000;
    --light-gray: #f7f7f7;
    --medium-gray: #e0e0e0;
    --dark-gray: #666666;

    /* --- Extended greys for product surfaces --- */
    --grey-25: #fbfbfb;
    --grey-50: var(--light-gray);
    --grey-100: #f0f0f0;
    --grey-200: var(--medium-gray);
    --grey-300: #cfcfcf;
    --grey-400: #9a9a9a;
    --grey-500: var(--dark-gray);
    --grey-700: #3d3d3d;
    --grey-900: #141414;

    /* --- Status (matching the site's status-label styles) --- */
    --success-bg: #e8f5e9;
    --success-fg: #2e7d32;
    --success-br: #c8e6c9;
    --danger-bg: #ffebee;
    --danger-fg: #d32f2f;
    --danger-br: #ffcdd2;
    --warning-bg: #fff8e1;
    --warning-fg: #a06a00;
    --warning-br: #ffecb3;
    --info-bg: #f5f5f5;
    --info-fg: #000000;
    --info-br: var(--medium-gray);

    /* --- Shape & motion --- */
    --border-radius: 8px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-raised: 0 12px 24px rgba(0, 0, 0, 0.08);
    --shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.18);
    --transition: all 0.2s ease;
    --border: 1px solid var(--medium-gray);
    --border-subtle: 1px solid rgba(0, 0, 0, 0.06);

    /* --- Layout --- */
    --header-height: 64px;
    --sidebar-width: 236px;
    --content-max: 1180px;
}

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

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

body {
    font-family: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { line-height: 1.6; }

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover { color: var(--grey-700); }

ul, ol { list-style: none; }

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

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

/* Visible focus everywhere, for keyboard users. */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 0 0 var(--border-radius) 0;
}

.skip-link:focus {
    left: 0;
    color: var(--secondary-color);
}

/* ==========================================================================
   Brand
   ========================================================================== */

.flares-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 1rem;
    white-space: nowrap;
}

.flares-logo svg { flex: none; }

.flares-logo .logo-word { line-height: 1; }

.flares-logo .logo-sub {
    font-weight: 500;
    color: var(--dark-gray);
    letter-spacing: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--border-radius);
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition);
    text-align: center;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--secondary-color);
    box-shadow: var(--box-shadow);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--grey-700);
    color: var(--secondary-color);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent-color);
    border-color: var(--primary-color);
}

.btn-secondary:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.btn-ghost {
    background-color: transparent;
    color: var(--grey-700);
    border-color: var(--medium-gray);
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--light-gray);
    color: var(--primary-color);
}

.btn-danger {
    background-color: var(--secondary-color);
    color: var(--danger-fg);
    border-color: var(--danger-br);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--danger-bg);
    color: var(--danger-fg);
}

.btn-danger-solid {
    background-color: var(--danger-fg);
    color: var(--secondary-color);
}

.btn-danger-solid:hover:not(:disabled) {
    background-color: #b71c1c;
    color: var(--secondary-color);
}

.btn-sm { padding: 7px 14px; font-size: 0.8125rem; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font-size: inherit;
}

.btn-link.danger { color: var(--danger-fg); }

/* Inline spinner shown while a form is submitting. */
.btn .spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: flares-spin 0.6s linear infinite;
    display: none;
}

.btn.is-busy .spinner { display: inline-block; }
.btn.is-busy .btn-label { opacity: 0.7; }

@keyframes flares-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 20px; }

.field label,
.field-label {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 7px;
    color: var(--grey-900);
}

.field-hint {
    font-size: 0.8125rem;
    color: var(--dark-gray);
    margin-top: 6px;
    line-height: 1.5;
}

.field-error {
    font-size: 0.8125rem;
    color: var(--danger-fg);
    margin-top: 6px;
    font-weight: 500;
}

.input,
.select,
.textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
    font-size: 0.9375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder,
.textarea::placeholder { color: var(--grey-400); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--grey-300); }

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.input[aria-invalid='true'],
.select[aria-invalid='true'] {
    border-color: var(--danger-fg);
}

.input[aria-invalid='true']:focus {
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    background-color: var(--light-gray);
    color: var(--dark-gray);
    cursor: not-allowed;
}

.textarea { min-height: 96px; resize: vertical; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

.input-group { position: relative; }

.input-group .input { padding-right: 82px; }

.input-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dark-gray);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.input-toggle:hover {
    color: var(--primary-color);
    background: var(--light-gray);
}

.input-prefix {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--secondary-color);
}

.input-prefix:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.input-prefix span {
    display: flex;
    align-items: center;
    padding: 0 4px 0 14px;
    background: var(--light-gray);
    color: var(--dark-gray);
    font-size: 0.875rem;
    border-right: 1px solid var(--medium-gray);
    white-space: nowrap;
}

.input-prefix .input {
    border: none;
    border-radius: 0;
}

.input-prefix .input:focus { box-shadow: none; }

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    cursor: pointer;
    line-height: 1.4;
}

.checkbox input[type='checkbox'] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--primary-color);
    flex: none;
    cursor: pointer;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Password strength meter */
.strength {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}

.strength span {
    height: 3px;
    flex: 1;
    background: var(--medium-gray);
    border-radius: var(--radius-pill);
    transition: background-color 0.25s ease;
}

.strength[data-score='1'] span:nth-child(-n+1),
.strength[data-score='2'] span:nth-child(-n+2),
.strength[data-score='3'] span:nth-child(-n+3),
.strength[data-score='4'] span:nth-child(-n+4) {
    background: var(--primary-color);
}

/* ==========================================================================
   Global header
   ========================================================================== */

.app-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.app-header-inner {
    height: var(--header-height);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-header-inner.wide { max-width: none; }

.header-spacer { flex: 1; }

/* --- Product identity ----------------------------------------------------
   The header answers "which Flares app am I in?" before anything else. The
   product name is the loud part; the workspace under it is context. There is
   no row of product links here on purpose — that is the launcher's job, and a
   permanent list of tabs stops scaling once Flares has more than a few apps. */

.product-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    margin-left: 12px;
}

.product-name {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--primary-color);
    text-decoration: none;
    white-space: nowrap;
}

.product-name:hover { text-decoration: underline; }

.workspace-name {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 220px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--dark-gray);
    cursor: pointer;
    text-align: left;
}

.workspace-name.is-static { cursor: default; }

.workspace-name:not(.is-static):hover { color: var(--primary-color); }

.workspace-name svg { flex: none; opacity: 0.7; }

.workspace-name[aria-expanded='true'] { color: var(--primary-color); }

.workspace-menu { position: relative; display: flex; }

/* The switcher panel hangs off a text-sized trigger, so it needs its own
   width rather than inheriting the trigger's. */
.workspace-menu .menu-panel { min-width: 280px; }

/* --- App launcher --------------------------------------------------------- */

.app-launcher { flex: none; }

.launcher-trigger,
.account-trigger {
    padding: 7px;
    max-width: none;
}

.launcher-panel {
    min-width: 320px;
    padding-bottom: 10px;
}

.launcher-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 4px 8px 0;
}

.launcher-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 6px 12px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}

.launcher-app:hover { background: var(--light-gray); }

.launcher-app:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.launcher-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--light-gray);
    color: var(--grey-700);
    transition: var(--transition);
}

.launcher-app:hover .launcher-icon {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* The app you are already in, marked but not disabled — clicking it is a
   perfectly reasonable way back to that product's front door. */
.launcher-app.is-current .launcher-icon {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.launcher-name {
    font-size: 0.78rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.25;
}

/* ==========================================================================
   Menus (organization switcher, account menu)
   ========================================================================== */

.menu { position: relative; }

.menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    max-width: 260px;
    transition: var(--transition);
}

.menu-trigger:hover { background: var(--light-gray); }

.menu-trigger[aria-expanded='true'] {
    background: var(--light-gray);
    border-color: var(--medium-gray);
}

.menu-trigger .chevron {
    flex: none;
    color: var(--grey-400);
    transition: transform 0.2s ease;
}

.menu-trigger[aria-expanded='true'] .chevron { transform: rotate(180deg); }

.menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    min-width: 280px;
    background: var(--secondary-color);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    padding: 8px;
    z-index: 80;
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

.menu-panel[hidden] { display: none; }

.menu-panel.align-start { left: 0; }
.menu-panel.align-end { right: 0; }

.menu-heading {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dark-gray);
    padding: 10px 12px 6px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--border-radius);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.9375rem;
    color: var(--grey-900);
    transition: background-color 0.15s ease;
}

.menu-item:hover { background: var(--light-gray); color: var(--primary-color); }

.menu-item[aria-current='true'] { background: var(--light-gray); font-weight: 500; }

.menu-item .menu-item-body { min-width: 0; flex: 1; }

.menu-item .menu-item-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-item .menu-item-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--dark-gray);
}

.menu-item .check { color: var(--primary-color); flex: none; }

.menu-separator {
    height: 1px;
    background: var(--medium-gray);
    margin: 8px 4px;
}

/* ==========================================================================
   Avatars
   ========================================================================== */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--secondary-color);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    overflow: hidden;
    flex: none;
    text-transform: uppercase;
}

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

.avatar-sm { width: 28px; height: 28px; font-size: 0.6875rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.25rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 1.75rem; }

/* Organization marks are squared off so they never read as a person. */
.avatar.org {
    border-radius: var(--radius-sm);
    background: var(--light-gray);
    color: var(--primary-color);
    border: 1px solid var(--medium-gray);
}

.avatar.org img { object-fit: contain; background: var(--secondary-color); }

/* ==========================================================================
   Layout
   ========================================================================== */

.page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.page-narrow { max-width: 760px; }

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

.page-header .subtitle {
    color: var(--dark-gray);
    margin-top: 6px;
    max-width: 62ch;
}

.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.section { margin-bottom: 36px; }

.section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dark-gray);
    margin-bottom: 14px;
}

.stack { display: grid; gap: 16px; }
.stack-sm { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.muted { color: var(--dark-gray); }
.small { font-size: 0.8125rem; }
.strong { font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background-color: var(--secondary-color);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.card-flush { padding: 0; overflow: hidden; }

.card-header {
    padding: 18px 24px;
    border-bottom: var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.card-header h2, .card-header h3 { font-size: 1rem; }

.card-body { padding: 24px; }

.card-footer {
    padding: 16px 24px;
    border-top: var(--border);
    background: var(--grey-25);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.card-link {
    display: block;
    transition: var(--transition);
}

.card-link:hover {
    border-color: var(--grey-300);
    box-shadow: var(--box-shadow);
    transform: translateY(-2px);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Statistic tiles */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
}

.stat {
    background: var(--secondary-color);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.stat-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--dark-gray);
    margin-top: 4px;
}

.stat-note { font-size: 0.75rem; color: var(--grey-400); margin-top: 8px; }

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--info-bg);
    color: var(--info-fg);
    border: 1px solid var(--info-br);
    white-space: nowrap;
}

.badge.success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-br); }
.badge.danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-br); }
.badge.warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-br); }
.badge.solid { background: var(--primary-color); color: var(--secondary-color); border-color: var(--primary-color); }

.badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.role-chip {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--light-gray);
    border: 1px solid var(--medium-gray);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alerts { display: grid; gap: 10px; margin-bottom: 24px; }

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--border-radius);
    border: 1px solid var(--medium-gray);
    background: var(--light-gray);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.alert svg { flex: none; margin-top: 2px; }
.alert.success { background: var(--success-bg); border-color: var(--success-br); color: #1b5e20; }
.alert.error { background: var(--danger-bg); border-color: var(--danger-br); color: #8e1717; }
.alert.warning { background: var(--warning-bg); border-color: var(--warning-br); color: #7a5000; }

.alert-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 2px;
    line-height: 1;
}

.alert-dismiss:hover { opacity: 1; }

/* Inline callout used for guidance rather than feedback */
.callout {
    border: var(--border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 16px 18px;
    background: var(--grey-25);
}

/* Callouts take the same bare-word modifiers as .alert, so the two read the
   same way at a glance: .callout.danger, .alert.error, and so on. */
.callout.danger {
    border-color: var(--danger-br);
    border-left-color: var(--danger-fg);
    background: var(--danger-bg);
}

.callout.warning {
    border-color: var(--warning-br);
    border-left-color: var(--warning-fg);
    background: var(--warning-bg);
}

.callout h2 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.callout > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

.table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dark-gray);
    padding: 12px 20px;
    border-bottom: var(--border);
    white-space: nowrap;
    background: var(--grey-25);
}

.table th a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.table th a:hover { color: var(--primary-color); }

.table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--grey-100);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color 0.12s ease; }
.table tbody tr:hover { background: var(--grey-25); }

.table .cell-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.table .cell-person .name { font-weight: 500; }
.table .cell-person .email { font-size: 0.8125rem; color: var(--dark-gray); }
.table .actions { text-align: right; white-space: nowrap; }

/* On small screens each row becomes a labelled card rather than a squashed
   table — the data stays readable instead of shrinking away. */
/* --- The header on a small screen ----------------------------------------
   The product name is the one thing that must survive: it is how you know
   which Flares app you are in. The workspace line and the launcher's label
   give way before it does. */

@media (max-width: 600px) {
    .app-header-inner {
        padding: 0 12px;
        gap: 8px;
    }

    .product-identity { margin-left: 8px; }

    .product-name { font-size: 1rem; }

    .workspace-name { max-width: 130px; }

    .launcher-panel {
        min-width: 0;
        width: calc(100vw - 24px);
        max-width: 340px;
    }

    /* Three across still reads on a phone; four does not. */
    .launcher-grid { grid-template-columns: repeat(3, 1fr); }

    .menu-trigger { padding: 6px; }
}

/* Below this the workspace line competes with the product name for the same
   few pixels, so it steps aside — the switcher is still in the launcher's
   neighbourhood, and the product name is what identifies the screen. */
@media (max-width: 380px) {
    .workspace-name { display: none; }
}

@media (max-width: 760px) {
    .table thead { display: none; }

    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }

    .table tr {
        border: var(--border);
        border-radius: var(--border-radius);
        margin-bottom: 12px;
        padding: 6px 0;
    }

    .table td {
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        padding: 8px 16px;
    }

    .table td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--dark-gray);
        flex: none;
    }

    .table td.cell-primary { justify-content: flex-start; padding-top: 14px; }
    .table td.cell-primary::before { display: none; }
    .table .actions { justify-content: flex-end; }
}

/* ==========================================================================
   Empty states
   ========================================================================== */

.empty {
    text-align: center;
    padding: 64px 24px;
    max-width: 460px;
    margin: 0 auto;
}

.empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--light-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--dark-gray);
}

.empty h3 { font-size: 1.0625rem; margin-bottom: 8px; }

.empty p {
    color: var(--dark-gray);
    margin-bottom: 22px;
    font-size: 0.9375rem;
}

/* ==========================================================================
   Pagination & filters
   ========================================================================== */

.toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: var(--border);
}

.toolbar .search {
    flex: 1;
    min-width: 220px;
    position: relative;
}

.toolbar .search .input { padding-left: 38px; }

.toolbar .search svg {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey-400);
    pointer-events: none;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: var(--border);
    font-size: 0.875rem;
    color: var(--dark-gray);
    flex-wrap: wrap;
}

.pagination-links { display: flex; gap: 6px; align-items: center; }

.pagination-links a,
.pagination-links span {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 0.875rem;
}

.pagination-links a:hover { background: var(--light-gray); color: var(--primary-color); }
.pagination-links [aria-current='page'] { background: var(--primary-color); color: var(--secondary-color); font-weight: 600; }
.pagination-links .disabled { color: var(--grey-300); }

/* ==========================================================================
   Admin shell
   ========================================================================== */

.admin-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    gap: 0;
}

.admin-sidebar {
    position: sticky;
    top: var(--header-height);
    padding: 28px 16px;
    border-right: var(--border);
    min-height: calc(100vh - var(--header-height));
    /* Grid items default to min-width:auto and would be widened by their
       longest label rather than staying inside the sidebar column. */
    min-width: 0;
}

.admin-org {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 18px;
    min-width: 0;
}

.admin-org .name { font-weight: 600; }
.admin-org .type { font-size: 0.75rem; color: var(--dark-gray); }

/* minmax(0, 1fr) rather than an implicit auto track, which would size every
   row to the widest label and push them all out of the sidebar. */
.admin-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: var(--border-radius);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--grey-700);
    min-width: 0;
}

.admin-nav a > span:not(.count) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-nav a svg { flex: none; color: var(--grey-400); }
.admin-nav a:hover { background: var(--light-gray); color: var(--primary-color); }
.admin-nav a:hover svg { color: var(--dark-gray); }

.admin-nav a[aria-current='page'] {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.admin-nav a[aria-current='page'] svg { color: var(--secondary-color); }

.admin-nav .count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--light-gray);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    color: var(--dark-gray);
}

.admin-nav a[aria-current='page'] .count { background: rgba(255, 255, 255, 0.2); color: var(--secondary-color); }

.admin-main { padding: 40px 40px 80px; min-width: 0; }

.admin-sidebar-toggle { display: none; }

@media (max-width: 960px) {
    .admin-shell { grid-template-columns: 1fr; }

    .admin-sidebar {
        position: static;
        min-height: 0;
        border-right: none;
        border-bottom: var(--border);
        padding: 16px;
    }

    .admin-org { padding: 4px 8px 14px; }

    .admin-nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
    }

    .admin-nav a { white-space: nowrap; }
    .admin-main { padding: 28px 20px 64px; }
}

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, var(--light-gray) 0%, var(--secondary-color) 60%);
}

.auth-header { padding: 28px 32px; }

.auth-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 20px 60px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
}

.auth-card-inner {
    background: var(--secondary-color);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--box-shadow);
    padding: 40px;
}

.auth-title { font-size: 1.625rem; margin-bottom: 8px; }

.auth-subtitle {
    color: var(--dark-gray);
    margin-bottom: 30px;
    font-size: 0.9375rem;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 0.9375rem;
    color: var(--dark-gray);
}

.auth-footer a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.auth-meta {
    text-align: center;
    padding: 0 20px 40px;
    font-size: 0.8125rem;
    color: var(--grey-400);
}

.auth-meta a { color: var(--dark-gray); }

.auth-wide { max-width: 560px; }

@media (max-width: 520px) {
    .auth-card-inner { padding: 28px 22px; border-radius: var(--border-radius); }
    .auth-header { padding: 20px; }
}

/* ==========================================================================
   Setup / onboarding
   ========================================================================== */

.steps { display: grid; gap: 14px; }

.step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--secondary-color);
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--light-gray);
    border: 1px solid var(--medium-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    flex: none;
    color: var(--dark-gray);
}

.step.done { background: var(--grey-25); }

.step.done .step-number {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--secondary-color);
}

.step-body { flex: 1; min-width: 0; }
.step-body h3 { font-size: 1rem; margin-bottom: 4px; }
.step-body p { color: var(--dark-gray); font-size: 0.9375rem; margin-bottom: 14px; }

/* ==========================================================================
   Dialogs
   ========================================================================== */

dialog.modal {
    border: none;
    padding: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    background: var(--secondary-color);
    color: var(--primary-color);
}

dialog.modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.modal-header {
    padding: 22px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.modal-header h2 { font-size: 1.125rem; }
.modal-body { padding: 12px 24px 4px; }
.modal-body p { color: var(--dark-gray); }

.modal-footer {
    padding: 20px 24px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--grey-400);
    padding: 4px;
    line-height: 1;
    border-radius: var(--radius-sm);
}

.modal-close:hover { color: var(--primary-color); background: var(--light-gray); }

/* ==========================================================================
   Definition lists (profile details)
   ========================================================================== */

.detail-list { display: grid; gap: 0; }

.detail-row {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--grey-100);
    align-items: baseline;
}

.detail-row:last-child { border-bottom: none; }

.detail-row dt { font-size: 0.875rem; color: var(--dark-gray); }
.detail-row dd { font-size: 0.9375rem; word-break: break-word; }

@media (max-width: 620px) {
    .detail-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   Misc
   ========================================================================== */

.divider { height: 1px; background: var(--medium-gray); margin: 28px 0; }

.upload-preview {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.file-input {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.file-input input[type='file'] {
    font-size: 0.875rem;
    max-width: 260px;
}

.danger-zone {
    border: 1px solid var(--danger-br);
    border-radius: var(--radius-lg);
    background: #fffafa;
}

.danger-zone .card-header { border-bottom-color: var(--danger-br); }

.activity {
    display: grid;
    gap: 0;
}

.activity-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--grey-100);
    align-items: flex-start;
}

.activity-item:last-child { border-bottom: none; }

.activity-item .avatar { margin-top: 2px; }
.activity-text { flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.5; }
.activity-time { font-size: 0.8125rem; color: var(--grey-400); white-space: nowrap; }

.preview-errors {
    max-height: 320px;
    overflow-y: auto;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
    font-size: 0.75rem;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    background: var(--light-gray);
    border: 1px solid var(--medium-gray);
    color: var(--grey-700);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==========================================================================
   Flares staff console
   Inverted chrome so internal tooling can never be mistaken for a customer's
   own organization. Same brand, opposite polarity.
   ========================================================================== */

.staff-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--primary-color);
    color: var(--secondary-color);
}

.staff-header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 16px;
}

.staff-header .flares-logo { color: var(--secondary-color); }
.staff-header .flares-logo .logo-sub { color: rgba(255, 255, 255, 0.55); }

.staff-tag {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.75);
    flex: none;
}

.staff-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 12px;
    overflow-x: auto;
}

.staff-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.staff-nav a:hover { background: rgba(255, 255, 255, 0.1); color: var(--secondary-color); }

.staff-nav a[aria-current='page'] {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.staff-whoami {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 220px;
    line-height: 1.35;
}

.staff-tier {
    font-weight: 600;
    color: var(--secondary-color);
    letter-spacing: 0.02em;
}

.staff-exit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.staff-exit:hover { background: rgba(255, 255, 255, 0.12); color: var(--secondary-color); }

/* A thin black rule down the page edge, so the console reads as "inside"
   something even after you scroll past the header. */
.staff-body { border-top: 0; }
.staff-body .page { padding-top: 32px; }

.staff-danger {
    border: 1px solid var(--danger-br);
    border-radius: var(--radius-lg);
    background: #fffafa;
}

.staff-danger .card-header { border-bottom-color: var(--danger-br); }

@media (max-width: 900px) {
    .staff-header-inner { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
    .staff-nav { order: 3; width: 100%; margin-left: 0; }
    .staff-whoami { display: none; }
}

/* Development outbox shortcut — only rendered while MAIL_DRIVER=log locally. */
.dev-badge {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    background: var(--primary-color);
    color: var(--secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: var(--shadow-raised);
    opacity: 0.85;
    transition: var(--transition);
}

.dev-badge:hover {
    opacity: 1;
    color: var(--secondary-color);
    transform: translateY(-2px);
}

@media print {
    .app-header, .admin-sidebar, .page-actions, .toolbar, .pagination, .dev-badge { display: none !important; }
}

/* ------------------------------------------------------------ Notifications */

.bell-trigger { position: relative; }

.bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger-fg, #b3261e);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.notifications-panel { width: 340px; max-width: 90vw; }

.notification-item { align-items: flex-start; }
.notification-item.is-unread { background: var(--surface-2, #f5f5f5); }
.notification-item .menu-item-title { white-space: normal; }

/* --------------------------------------------------------- Image cropping */

.crop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.crop-modal {
    background: var(--bg, #fff);
    border-radius: var(--radius-lg, 14px);
    width: 460px;
    max-width: 100%;
    box-shadow: var(--shadow-lg, 0 18px 60px rgba(0, 0, 0, 0.28));
    overflow: hidden;
}

.crop-head { padding: 14px 18px; border-bottom: var(--border); }

.crop-stage {
    background: #1b1b1b;
    max-height: 58vh;
    overflow: hidden;
}

.crop-stage img { display: block; max-width: 100%; }

/* People are round everywhere in Flares, so the crop shows that truth. */
.crop-stage.is-round .cropper-view-box,
.crop-stage.is-round .cropper-face { border-radius: 50%; }
.crop-stage.is-round .cropper-view-box { outline-color: rgba(255, 255, 255, 0.85); }

.crop-controls {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: var(--border);
    flex-wrap: wrap;
}

.crop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    flex-wrap: wrap;
}

.crop-actions { display: flex; gap: 8px; }

@media (max-width: 520px) {
    .crop-foot { flex-direction: column; align-items: stretch; }
    .crop-actions { justify-content: flex-end; }
}

/* A workspace label with nothing to switch to: same shape as the trigger,
   without the affordances of a control that does not do anything. */
.menu-trigger.is-static { cursor: default; background: none; }
.menu-trigger.is-static:hover { background: none; }

/* ==========================================================================
   My schedule — one person's week
   ========================================================================== */

/* Whose week is being shown. Only rendered for guardians, who are the only
   people with more than one answer. */
.sched-people {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.sched-person {
    padding: 6px 14px;
    border: var(--border);
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: var(--primary-color);
    font-size: 0.875rem;
    transition: var(--transition);
}

.sched-person:hover { border-color: var(--grey-400); }

.sched-person.is-current {
    background: var(--primary-color);
    color: var(--secondary-color);
    border-color: var(--primary-color);
}

/* Days as columns that collapse to a single stack on a phone. auto-fit rather
   than a fixed count, so a four-day week does not leave a hole. */
.sched-week {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin: 20px 0;
    align-items: start;
}

.sched-day {
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 12px;
    background: var(--secondary-color);
}

.sched-day.is-today {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.sched-day-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 9px;
    margin-bottom: 10px;
    border-bottom: var(--border);
}

.sched-day-name { font-weight: 600; font-size: 0.9rem; }

.sched-day-date {
    font-size: 0.78rem;
    color: var(--dark-gray);
    font-variant-numeric: tabular-nums;
}

.sched-today {
    margin-left: auto;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}

.sched-closed,
.sched-free {
    margin: 0;
    padding: 12px 0;
    font-size: 0.82rem;
    color: var(--dark-gray);
    text-align: center;
}

.sched-closed { font-weight: 600; }

.sched-lesson {
    border-left: 3px solid var(--tt-color, var(--dark-gray));
    background: var(--grey-25);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sched-lesson:last-child { margin-bottom: 0; }

.sched-time {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dark-gray);
    font-variant-numeric: tabular-nums;
}

.sched-subject {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.sched-subject:hover { text-decoration: underline; }

.sched-meta { font-size: 0.76rem; color: var(--dark-gray); }

/* The one action a teacher wants from a schedule: take the register for the
   lesson in front of them, without going and finding the class first. */
.sched-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 5px 10px;
    border: var(--border);
    border-radius: var(--radius-pill);
    background: var(--secondary-color);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--primary-color);
    align-self: flex-start;
    transition: var(--transition);
}

.sched-action:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.sched-closures {
    margin: 0;
    padding-left: 20px;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ==========================================================================
   Print sheets
   ========================================================================== */

.print-page {
    background: #fff;
    color: #000;
}

.print-sheet {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 28px;
}

.print-head { margin-bottom: 20px; }
.print-head h1 { font-size: 1.4rem; margin: 0 0 4px; }
.print-head p { margin: 0; color: var(--dark-gray); font-size: 0.9rem; }

.print-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.print-grid th,
.print-grid td {
    border: 1px solid #999;
    padding: 7px 8px;
    vertical-align: top;
    text-align: left;
}

.print-grid thead th {
    background: #eee;
    font-size: 0.75rem;
}

.print-grid tbody th {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    width: 92px;
}

.print-closed {
    color: #666;
    font-style: italic;
}

.print-foot {
    margin-top: 24px;
    font-size: 0.72rem;
    color: var(--dark-gray);
}

@media print {
    .print-sheet { padding: 0; max-width: none; }
    .print-grid { font-size: 9pt; }

    /* A week should not be split across two sheets if it can be helped. */
    .print-grid tr { page-break-inside: avoid; }
}

/* ==========================================================================
   File previews — a shared component
   ==========================================================================
   These styles used to live in drive.css, because Drive was the only place a
   file was ever shown. Classroom's grading workspace now renders the SAME
   partial so a teacher can read a submission without leaving the page, which
   makes this a shared component rather than a Drive one — and a component
   whose styles live in a stylesheet only one of its two consumers loads is a
   component that renders unstyled in the other.
   ========================================================================== */

.drive-preview {
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--grey-25);
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 16px;
}

.drive-preview img,
.drive-preview video { max-width: 100%; max-height: 70vh; border-radius: var(--border-radius); }
.drive-preview iframe { width: 100%; height: 70vh; border: none; border-radius: var(--border-radius); background: var(--secondary-color); }
.drive-preview audio { width: 100%; }

.drive-preview-empty { text-align: center; padding: 48px 24px; color: var(--dark-gray); }

.drive-preview-empty .icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: var(--secondary-color);
    border: var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--dark-gray);
}

.drive-share-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--grey-100);
}

.drive-share-row:last-child { border-bottom: none; }
.drive-share-row .body { flex: 1; min-width: 0; }
.drive-share-row .name { font-size: 0.9375rem; font-weight: 500; }
.drive-share-row .detail { font-size: 0.8125rem; color: var(--dark-gray); }

@media (max-width: 1100px) {
    .drive-detail { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .drive-shell { grid-template-columns: 1fr; }

    .drive-sidebar {
        position: static;
        min-height: 0;
        border-right: none;
        border-bottom: var(--border);
        padding: 14px 16px;
    }

    .drive-nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        gap: 6px;
    }

    .drive-nav a { white-space: nowrap; }
    .drive-nav-divider { display: none; }
    .drive-storage { margin-top: 14px; }
    .drive-main { padding: 20px 16px 96px; }
}

/* On a phone the four-column row collapses to name plus actions; size and date
   move under the name rather than being squeezed to nothing. */
@media (max-width: 700px) {
    .drive-row { grid-template-columns: 1fr 44px; gap: 10px; }
    .drive-row .drive-meta { display: none; }
    .drive-row .drive-meta.is-mobile { display: block; font-size: 0.75rem; }
    .drive-row-head { display: none; }
    .drive-breadcrumbs { font-size: 1.125rem; }
}

/* ------------------------------------------------------ Document previews --- */

/*
 * Office documents, CSVs and archives are rendered by Flares rather than by the
 * browser, so unlike an image or a PDF they need a scroll box of their own. The
 * pane is a reading surface, not a facsimile: it shows the content, and the
 * download button is always a click away for the real thing.
 */

.drive-preview.is-document {
    display: block;
    padding: 0;
    background: var(--secondary-color);
    overflow: hidden;
}

.doc-preview {
    max-height: 620px;
    overflow-y: auto;
    padding: 32px 36px;
    text-align: left;
}

.doc-preview h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 22px 0 8px;
    color: var(--primary-color);
}

.doc-preview h3:first-child { margin-top: 0; }

.doc-preview p {
    font-size: 0.9375rem;
    line-height: 1.65;
    margin-bottom: 11px;
    color: var(--grey-700);
    /* Documents contain long unbroken strings — URLs, reference numbers — and
       they must not push the pane sideways. */
    overflow-wrap: anywhere;
}

.doc-preview-more {
    margin-top: 18px;
    padding-top: 14px;
    border-top: var(--border);
    font-size: 0.8125rem;
    color: var(--dark-gray);
}

/* --- spreadsheets and CSV --- */

.doc-preview-sheet { padding: 0; }

.doc-preview-sheet-name {
    padding: 14px 20px;
    border-bottom: var(--border);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dark-gray);
    margin: 0;
}

.doc-preview-scroll {
    max-height: 520px;
    overflow: auto;
}

.doc-preview-sheet table,
.doc-preview-archive table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.875rem;
}

.doc-preview-sheet th,
.doc-preview-sheet td {
    border-right: var(--border);
    border-bottom: var(--border);
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-preview-sheet th {
    position: sticky;
    top: 0;
    background: var(--grey-25);
    font-weight: 600;
    color: var(--primary-color);
    z-index: 1;
}

.doc-preview-sheet .doc-preview-more { margin: 0; padding: 14px 20px; }

/* --- presentations --- */

.doc-preview-slides { padding: 20px; }

.doc-slide {
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 20px 22px;
    margin-bottom: 12px;
}

.doc-slide-number {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dark-gray);
    margin-bottom: 10px;
}

.doc-slide h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-color);
}

/* --- archives --- */

.doc-preview-archive { padding: 0; }

.archive-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.archive-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Indented by how deep the entry sits, so the archive reads as a tree. */
    padding: 7px 20px 7px calc(20px + (var(--depth, 0) * 18px));
    font-size: 0.875rem;
    color: var(--grey-700);
    min-width: 0;
}

.archive-list li:hover { background: var(--grey-25); }
.archive-list svg { flex: none; color: var(--grey-400); }
.archive-list .is-folder svg { color: var(--primary-color); }
.archive-list .is-folder { font-weight: 500; }

.archive-list .name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-list .size {
    margin-left: auto;
    padding-left: 16px;
    font-size: 0.8125rem;
    color: var(--dark-gray);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .doc-preview { padding: 20px; }
    .doc-preview-slides { padding: 12px; }
}

/* --- text and code --- */

.doc-preview-text { padding: 0; }

.preview-text {
    margin: 0;
    padding: 20px 24px;
    max-height: 620px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--grey-700);
    white-space: pre;
    tab-size: 4;
}

/* Print utility: hide an element only on paper (used by printable documents). */
.no-print { }
@media print { .no-print { display: none !important; } }

/* --- Support session ------------------------------------------------------
   A Flares employee looking at Flares as a customer. Deliberately loud and
   deliberately impossible to miss: an impersonation the operator cannot see is
   indistinguishable from a backdoor. It sits at the very top of the page and
   pushes everything else down rather than floating over it. */
.support-banner {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: #7a2418;
    color: #fff;
    font-size: 0.875rem;
    box-shadow: var(--shadow-raised);
}

.support-banner-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.support-banner-label {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.75rem;
    opacity: 0.85;
}

.support-banner-who {
    font-weight: 600;
}

.support-banner-mode {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.75rem;
    white-space: nowrap;
}

.support-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.support-banner-end {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-pill);
    background: transparent;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.support-banner-end:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Campaign prompt ------------------------------------------------------
   Something Flares is asking or announcing. Deliberately a strip rather than a
   modal: a survey that blocks somebody's work to ask how their work is going
   gets closed, not answered. */
.campaign-prompt {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
}

.campaign-prompt-body {
    flex: 1;
    min-width: 260px;
}

.campaign-prompt-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.campaign-prompt-form .field {
    margin: 0;
    min-width: 220px;
}

/* --- Admin sidebar groups -------------------------------------------------
   The sidebar is organised around what an administrator came to do, so the
   group labels carry real weight: they are the difference between a list of
   subsystems and a set of jobs. */
.admin-nav-group {
    margin: 18px 0 6px;
    padding: 0 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-color);
}

.admin-nav-group:first-child {
    margin-top: 4px;
}

/* A product the plan does not include is still listed, and says so, because
   "why can't we have this?" deserves an answer rather than an absence. */
.admin-nav-note {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--muted-color);
    font-size: 0.6875rem;
    white-space: nowrap;
}

/* --- Application document preview ---------------------------------------- */
.doc-viewer {
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    background: var(--surface-2, var(--surface));
}

.doc-viewer-bar {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.doc-viewer-frame {
    display: block;
    width: 100%;
    height: min(70vh, 620px);
    border: 0;
    background: var(--bg);
}

[data-doc-view][aria-current="true"] {
    font-weight: 600;
}

/* --- Choosing a document --------------------------------------------------
   A file input on its own reads as an afterthought, and the Upload button
   beside it looked like part of the form rather than the thing that sent it —
   so families chose a file and left without pressing it. This makes the target
   large and obviously the point, and the file uploads the moment it is chosen. */
.upload-drop {
    display: block;
    position: relative;
    padding: 1.1rem 1rem;
    border: 1.5px dashed var(--medium-gray);
    border-radius: var(--border-radius, 12px);
    background: var(--light-gray, #fafafa);
    text-align: center;
    cursor: pointer;
}

.upload-drop:hover,
.upload-drop:focus-within {
    border-color: var(--primary-color);
}

/* The real input still receives clicks and keyboard focus; it is simply not
   what you look at. */
.upload-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-drop-label {
    display: block;
    font-weight: 600;
    color: var(--primary-color);
}

.upload-drop-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--dark-gray);
}

/* A value the system decided, shown in the shape of a field so it reads as part
   of the form, but plainly not something to type into. */
.input.is-readonly {
    background: var(--light-gray, #fafafa);
    color: var(--dark-gray);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    cursor: default;
}

/* --- A long form, broken into sections ------------------------------------
   A registration form asks thirty-odd questions. Presented as one column of
   inputs it reads as an interrogation and people give up halfway; grouped under
   headings with the reason for each group stated, it reads as a form. */
.form-section {
    border: 0;
    border-top: 1px solid var(--medium-gray);
    margin: 1.75rem 0 0;
    padding: 1.25rem 0 0;
}

.form-section > legend {
    padding: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    color: var(--text-color, inherit);
}

.form-section > .field,
.form-section > .field-row,
.form-section > .checkbox,
.form-section > .row {
    margin-top: 0.9rem;
}

/* Says why a section is being asked for, under its heading. */
.section-hint {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--dark-gray);
    max-width: 62ch;
}

/* One person inside a section — a father, a mother, a guardian. */
.form-subsection {
    margin-top: 1.1rem;
    padding: 1rem;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius, 12px);
    background: var(--light-gray, #fafafa);
}

.form-subsection > h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 650;
}

.form-subsection .field-row + .field-row,
.form-subsection .field + .field {
    margin-top: 0.75rem;
}

/* --- The health card ------------------------------------------------------
   Genotype, blood group and rhesus are read in an emergency, by someone who is
   not calm. They do not belong in a row of a table with everything else. */
.health-vitals {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.health-vital {
    flex: 1;
    min-width: 110px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius, 12px);
    background: var(--light-gray, #fafafa);
}

.health-vital-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dark-gray);
}

.health-vital-value {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.25rem;
    line-height: 1.2;
}