/* ada.css */
/**
 * Ada Webapp - Shared Styles
 * Pro Minimal Design System
 */

/* components/buttons.css */
/* ========================================
   BUTTONS
   ======================================== */
.ada-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    /* A <button> takes line-height: normal from the browser and an <a> inherits the page's 1.5;
       the same here, so a link that is a button is as tall as a button (AGENCY-746). */
    line-height: normal;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    /* i18n: flexible sizing for text expansion */
    min-width: 0;
    white-space: nowrap;
}

.ada-btn--compact {
    gap: 6px;
    font-weight: 600;
    border-radius: var(--radius);
}

.ada-btn--lg {
    padding: 10px 20px;
    font-weight: 600;
    border-radius: var(--radius);
}

/* A button as wide as its form (a sign-up step's one action). */
.ada-btn--block { width: 100%; }

/* The one action on a page of its own (accepting an invitation). */
.ada-btn--xl { padding: 12px 32px; font-size: 15px; font-weight: 600; border-radius: 10px; }

.ada-btn-primary {
    background: var(--accent);
    color: white;
}

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

.ada-btn-primary--zapier {
    background: var(--brand-zapier);
    color: white;
}

.ada-btn-primary--zapier:hover { background: var(--brand-zapier-hover); }

.ada-btn-primary--creator {
    background: var(--creator-accent);
    color: white;
}

.ada-btn-primary--creator:hover { background: var(--creator-accent-hover); }

.ada-btn-secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.ada-btn-secondary:hover {
    background: var(--bg-hover);
}

/* Creator actions (DESIGN_NOTES, "Purple Accent for Creators"): anything that starts a course or
   opens Studio. --creator on a primary fills it purple; on a secondary it is purple text. */
.ada-btn-secondary--creator { color: var(--creator-accent-text); }
.ada-btn-secondary--creator:hover { background: var(--creator-accent-light); }
/* A text link that starts a course or opens Studio ("Create your first course"). */
.ada-link--creator,
.ada-link--creator:hover { color: var(--creator-accent-text); }

.ada-btn-configure {
    background: var(--bg-active);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.ada-btn-configure:hover { background: var(--bg-hover); }

.ada-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.ada-copy-btn:hover { background: var(--accent-hover); }

.ada-btn-connect { background: var(--accent); color: white; }
.ada-btn-connect:hover { background: var(--accent-hover); }

.ada-create-section {
    padding: 16px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.ada-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: 1px dashed rgba(0,0,0,0.15);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

.ada-create-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.ada-btn-danger { background: var(--error); color: white; }
.ada-btn-danger:hover { background: var(--palette-red-700); }

.ada-btn-danger--soft { background: var(--danger-bg); color: var(--error); }
.ada-btn-danger--soft:hover { background: var(--danger-bg-hover); }

.ada-btn-danger-subtle {
    background: transparent;
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: var(--error);
}

.ada-btn-danger-subtle:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: var(--error);
}

.ada-btn-profile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.ada-btn-profile-secondary { background: transparent; border: 1px solid var(--border-light); color: var(--text-primary); }

.ada-btn-copy {
    padding: 10px 14px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.ada-btn-copy:hover { background: var(--bg-hover); color: var(--text-primary); }

/* A small outlined button inside a row or a line of text (copy, test, revoke, retry). A button of
   its own, not a size of .ada-btn: outlined only, never with .ada-btn or a variant (every use is a
   quiet row action, AGENCY-734). --danger for the destructive one (revoke, delete). */
.ada-btn-xs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.ada-btn-xs:hover { background: var(--bg-hover); color: var(--text-primary); }
.ada-btn-xs--danger { color: var(--error); }
.ada-btn-xs--danger:hover { background: var(--error-light); color: var(--error); }
.ada-btn-xs:disabled { opacity: 0.5; cursor: not-allowed; }
.ada-btn-xs:disabled:hover { background: none; color: var(--text-secondary); }

.ada-action-btn {
    width: 32px;
    height: 32px;
    background: var(--bg-page);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* No tile until hovered (a table's row actions); then the same tile as any icon button. */
.ada-action-btn--ghost { background: none; color: var(--text-tertiary); }

.ada-action-btn:hover { background: var(--bg-subtle-hover); color: var(--text-primary); }
.ada-action-btn--ghost.ada-danger:hover { color: var(--error); }
.ada-action-btn.ada-danger:hover { background: var(--danger-bg-hover); color: var(--danger-text); }
.ada-action-btn--lg { width: 36px; height: 36px; }
/* 28x28, for a row of people (a group's members and managers) or a field's remove button. */
.ada-action-btn--sm { width: 28px; height: 28px; }

.ada-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ada-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--radius-md);
    text-decoration: none;
}

/* A button that cannot be used now (a plan lock, a save in flight). */
.ada-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* A button that reads as a link: an action in a card's footer (Certificate Types). */
.ada-btn-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.ada-btn-link:hover { text-decoration: underline; }

.ada-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.ada-btn-sm--integration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
}

.ada-integration-content .ada-btn-sm--integration {
    margin-top: 12px;
    align-self: flex-start;
}

/* Button focus states - consistent box-shadow with inputs */
.ada-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
}

/* Pagination buttons */
.ada-page-btn {
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-family);
}

.ada-page-btn--text {
    min-width: 32px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}

/* The gap in a run of page numbers. */
.ada-page-ellipsis { padding: 0 8px; color: var(--text-muted); }

.ada-page-btn--text:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ada-page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.ada-page-btn.ada-active { background: var(--accent); color: white; }
/* components/badges.css */
/* ========================================
   BADGES & STATUS
   ======================================== */
.ada-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    /* i18n: content-sized, no fixed width */
    white-space: nowrap;
}

.ada-badge-success {
    background: var(--success-light);
    color: var(--success);
}

.ada-badge-warning {
    background: var(--warning-light);
    color: var(--warning);
}

.ada-badge-error {
    background: var(--error-light);
    color: var(--error);
}

.ada-badge-neutral {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.ada-badge-info {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* A rounded badge, as the learner's game uses them (Done, Earned, a due date, 3 of 12). */
.ada-badge--pill { border-radius: var(--radius-full); font-weight: 700; }
/* A small status in a dense table (an API key, a Zap, a webhook delivery, an xAPI connection). */
.ada-badge--sm { padding: 2px 8px; font-size: 11px; text-transform: uppercase; }
.ada-badge-purple { background: rgba(168,85,247,0.1); color: var(--palette-purple-500); }

/* Badges side by side that wrap (Qualification Gaps: the qualifications a member lacks). */
.ada-badge-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ada-badge-list--spaced { gap: 8px; }

/* ========================================
   STATUS DOTS
   ======================================== */
.ada-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ada-status-dot.ada-active { background: var(--success); }
.ada-status-dot.ada-connected { background: var(--success); }
.ada-status-dot.ada-available { background: var(--text-muted); }
.ada-status-dot.ada-invited { background: var(--accent); }
.ada-status-dot.ada-suspended { background: var(--error); }
.ada-status-dot.ada-draft { background: var(--text-muted); }
/* Learning states, as the compliance and learner progress reports show them. */
.ada-status-dot.ada-completed { background: var(--success); }
.ada-status-dot.ada-in-progress { background: var(--warning); }
.ada-status-dot.ada-overdue { background: var(--error); }
.ada-status-dot.ada-not-started { background: var(--text-tertiary); }
/* A dot in a line of text ("● Completed"), outside an .ada-status row. */
.ada-status-dot--inline { display: inline-block; margin-right: 6px; }

/* Alerts */
.ada-alert-content { flex: 1; }
.ada-alert-title { font-size: 14px; font-weight: 600; color: var(--palette-red-800); }
.ada-alert-desc { font-size: 13px; color: var(--palette-red-700); }

/* A form's outcome message ("Saved", "That didn't work"). Was defined only in Assignments' and
   Course Settings' own <style> blocks; the Report page copied it inline. */
.ada-alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.ada-alert--success { background: var(--success-light); color: var(--success); }
.ada-alert--error { background: var(--error-light); color: var(--error); }
/* An alert led by an icon (a success or error message after a form). */
.ada-alert:has(> i:first-child) { display: flex; align-items: center; gap: 10px; font-weight: 600; }

.ada-alert-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--radius-xl);
    margin-bottom: 24px;
}

.ada-alert-banner.ada-danger {
    background: var(--error-light);
    border: 1px solid var(--palette-red-200);
}

.ada-alert-banner.ada-warning {
    background: var(--warning-light);
    border: 1px solid var(--warning);
}

.ada-alert-banner.ada-warning .ada-alert-title { color: var(--text-primary); }
.ada-alert-banner.ada-warning .ada-alert-desc { color: var(--text-secondary); }
.ada-alert-banner.ada-warning .ada-alert-content { flex: 1; }
.ada-alert-banner.ada-warning .ada-alert-action { background: var(--accent); color: var(--text-on-accent); }
.ada-alert-banner.ada-warning .ada-alert-action:hover { background: var(--accent-hover); }

.ada-alert-action {
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 16px;
    background: var(--error);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* A banner inside a card, inset from its edges. */
.ada-alert-banner--inset { margin: 12px 16px; }

/* ========================================
   RATINGS
   ======================================== */
/* A rating in stars: solid (.fas) for each one given, outlined (.far) for the rest. */
.ada-stars { display: inline-flex; gap: 2px; }
.ada-stars .fas { color: var(--palette-amber-500); }
.ada-stars .far { color: var(--palette-gray-300); }
.ada-stars--lg { font-size: 18px; }
/* components/icon-tiles.css */
/* ========================================
   ICON TILES
   A rounded square with one icon in it: a card's, a row's or a section's mark.
   Size: 40px by default (md), --sm 32px, --lg 48px, --xl 64px (a page header).
   The radius is a quarter of the side, so every size has the same shape.
   Tone: accent by default; .ada-<colour> takes its tone, .ada-success/-warning/-danger
   a status, --neutral a quiet grey, --solid a white icon on accent (or a status),
   --deep.ada-<colour> a white icon on the colour's deep gradient, .ada-<brand> a
   service's own colour.
   ======================================== */
.ada-icon-tile {
    width: 40px;
    height: 40px;
    border-radius: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    background: var(--accent-subtle);
    color: var(--accent);
}

.ada-icon-tile--sm { width: 32px; height: 32px; font-size: 14px; }
.ada-icon-tile--lg { width: 48px; height: 48px; font-size: 20px; }
.ada-icon-tile--xl { width: 64px; height: 64px; font-size: 28px; }

/* Tones */
.ada-icon-tile.ada-blue { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.ada-icon-tile.ada-green { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.ada-icon-tile.ada-purple { background: var(--tone-purple-bg); color: var(--tone-purple-fg); }
.ada-icon-tile.ada-orange { background: var(--tone-orange-bg); color: var(--tone-orange-fg); }
.ada-icon-tile.ada-red { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.ada-icon-tile.ada-amber { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.ada-icon-tile.ada-pink { background: var(--tone-pink-bg); color: var(--tone-pink-fg); }
.ada-icon-tile.ada-cyan { background: var(--tone-cyan-bg); color: var(--tone-cyan-fg); }

/* Status */
.ada-icon-tile.ada-success { background: var(--success-light); color: var(--success); }
.ada-icon-tile.ada-warning { background: var(--warning-light); color: var(--warning); }
.ada-icon-tile.ada-danger { background: var(--error-light); color: var(--error); }

.ada-icon-tile--neutral { background: var(--bg-subtle); color: var(--text-secondary); }

/* A white icon. These come after the tones so a --solid or --deep tile's colour wins. */
.ada-icon-tile--solid { background: var(--accent); color: white; }
.ada-icon-tile--solid.ada-warning { background: var(--warning); color: white; }
.ada-icon-tile--solid.ada-danger { background: var(--error); color: white; }

/* A course's tile: course art, so a gradient (DESIGN_NOTES, "When to Use Gradients"). The colour
   comes from CourseIcons (WebApp/CourseIcons.cs), and the course thumbnails take the same gradients
   from here, so no course renders as a white glyph on no tile. A group's tile is a flat tone
   (GroupTiles), as admin colour is. */
.ada-icon-tile.ada-icon-tile--deep { color: white; }
:is(.ada-icon-tile--deep, .ada-assignment-thumb, .ada-playlist-thumb).ada-blue { background: var(--gradient-blue-deep); }
:is(.ada-icon-tile--deep, .ada-assignment-thumb, .ada-playlist-thumb).ada-green { background: var(--gradient-green-deep); }
:is(.ada-icon-tile--deep, .ada-assignment-thumb, .ada-playlist-thumb).ada-purple { background: var(--gradient-purple-deep); }
:is(.ada-icon-tile--deep, .ada-assignment-thumb, .ada-playlist-thumb).ada-orange { background: var(--gradient-orange-deep); }
:is(.ada-icon-tile--deep, .ada-assignment-thumb, .ada-playlist-thumb).ada-pink { background: var(--gradient-pink-deep); }
:is(.ada-icon-tile--deep, .ada-assignment-thumb, .ada-playlist-thumb).ada-cyan { background: var(--gradient-cyan-deep); }
:is(.ada-icon-tile--deep, .ada-assignment-thumb, .ada-playlist-thumb).ada-red { background: var(--gradient-red-deep); }
:is(.ada-icon-tile--deep, .ada-assignment-thumb, .ada-playlist-thumb).ada-indigo { background: var(--gradient-indigo-deep); }


/* Brands: the services Ada connects to, and the identity providers it signs in with */
.ada-icon-tile:is(.ada-ada, .ada-azure, .ada-deputy, .ada-gmail, .ada-notion, .ada-okta, .ada-onelogin,
    .ada-other, .ada-scim, .ada-scorm, .ada-sheets, .ada-slack, .ada-sso, .ada-webhook, .ada-wheniwork,
    .ada-workforce, .ada-xapi, .ada-zapier) { color: white; }
.ada-icon-tile.ada-ada { background: var(--palette-indigo-500); }
.ada-icon-tile.ada-azure { background: var(--brand-azure); }
.ada-icon-tile.ada-deputy { background: var(--palette-blue-500); }
.ada-icon-tile.ada-gmail { background: var(--brand-gmail); }
.ada-icon-tile.ada-notion { background: var(--brand-notion); }
.ada-icon-tile.ada-okta { background: var(--brand-okta); }
.ada-icon-tile.ada-onelogin { background: var(--brand-onelogin); }
.ada-icon-tile.ada-other { background: var(--text-secondary); }
.ada-icon-tile.ada-scim { background: var(--palette-indigo-600); }
.ada-icon-tile.ada-scorm { background: var(--palette-rose-600); }
.ada-icon-tile.ada-sheets { background: var(--brand-google-sheets); }
.ada-icon-tile.ada-slack { background: var(--brand-slack); }
.ada-icon-tile.ada-sso { background: var(--palette-gray-700); }
.ada-icon-tile.ada-webhook { background: var(--palette-indigo-500); }
.ada-icon-tile.ada-wheniwork { background: var(--brand-wheniwork); }
.ada-icon-tile.ada-workforce { background: var(--palette-emerald-600); }
.ada-icon-tile.ada-xapi { background: var(--palette-emerald-600); }
.ada-icon-tile.ada-zapier { background: var(--brand-zapier); }
/* components/modals.css */
/* ========================================
   MODAL DIALOGS (i18n-ready)
   ======================================== */
.ada-modal {
    background: var(--bg-surface);
    /* 16px and a tinted footer: what the five pages that styled their own modals agreed on. */
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 48px);
    overflow: auto;
}

.ada-modal--sm { max-width: 400px; }
.ada-modal--lg { max-width: 700px; }
/* A long list in a modal scrolls inside its body; the header and footer stay put. */
.ada-modal--scroll { display: flex; flex-direction: column; max-height: 80vh; overflow: hidden; }
.ada-modal--scroll > .ada-modal-body { flex: 1; overflow-y: auto; }

/* The full-screen dim that centres a modal, hidden until .ada-open; it fades in. */
.ada-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.ada-modal-overlay.ada-open { opacity: 1; visibility: visible; }

.ada-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}

.ada-modal-close {
    background: none;
    border: none;
    border-radius: var(--radius-md);
    font-size: 18px;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px 8px;
}

.ada-modal-close:hover { background: var(--bg-subtle); color: var(--text-primary); }

.ada-modal-body {
    padding: 24px;
}

/* .ada-modal-title/-body/-footer were defined only in some pages' own <style> blocks, so the
   Identity Providers, Directory Sync and Audit Log modals had their fields flush to the edge. */
.ada-modal-title,
.ada-modal-header h3 { font-size: 16px; font-weight: 600; }

.ada-modal-footer {
    background: var(--bg-hover);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    /* i18n: allow buttons to wrap on narrow screens */
    flex-wrap: wrap;
}
/* components/toasts.css */
/* ========================================
   TOASTS (standard web design-system pattern)
   ========================================
   These match the "ada-toast" component conventions used in the legacy web design system:
   - `.ada-toast`, variants `.ada-toast--success|--error|--info`
   - `.ada-toast__icon`, `.ada-toast__message`
   Explore uses this for "Added to Learn Later".
*/
.ada-toast-container {
    /* Bottom-right positioning - standard pattern, supports stacking */
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 1300;
    pointer-events: none;
}

.ada-toast {
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: 13px;
    transform: translateY(-10px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ada-toast.ada-show {
    opacity: 1;
    transform: translateY(0);
}

.ada-toast__icon {
    font-size: 18px;
}

.ada-toast--success .ada-toast__icon { color: var(--success); }
.ada-toast--error .ada-toast__icon { color: var(--error); }
.ada-toast--info .ada-toast__icon { color: var(--accent); }

.ada-toast__message {
    color: var(--text-primary);
    font-weight: 600;
}
/* components/tooltips.css */
/* Tooltip: names an icon-only control, or adds a short hint, on hover and keyboard focus.

   A control opts in with data-ada-tooltip, and site.js shows one shared .ada-tooltip beside it.
   The words are the control's own: its aria-label, or (data-ada-tooltip="description") the
   element its aria-describedby names. So sighted, keyboard and screen-reader users get the
   same text, and the bubble itself is aria-hidden. Plain text only; nothing inside it can be
   clicked or focused. The script places it above the control (below when there is no room)
   and keeps it inside the viewport, which CSS alone can't do on a phone. */
.ada-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200; /* over modals (1000), under toasts (1300) */
    max-width: min(240px, calc(100vw - 16px));
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-inverted);
    color: var(--text-on-inverted);
    box-shadow: var(--shadow-md);
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}
/* components/forms.css */
/* ========================================
   FORM ELEMENTS
   ======================================== */
.ada-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    /* i18n: allow label to wrap naturally */
    line-height: 1.4;
}

.ada-form-label .ada-required { color: var(--error); }

/* The one text field: an input, a select or a textarea, in a form, a setting or a builder. */
.ada-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
}

/* On a phone the text is 16px (responsive.css) and the field at least 44px tall, Apple's
   smallest touch target: 12px above and below instead of 10, --compact's too. */
@media (max-width: 767px) {
    .ada-input, .ada-input.ada-input--compact { padding-top: 12px; padding-bottom: 12px; }
}

.ada-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
    outline: none;
}

.ada-input.ada-mono {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
}

.ada-input[readonly] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.ada-readonly-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-page);
    color: var(--text-secondary);
    font-size: 14px;
}

/* Every select draws the design system's chevron, not the operating system's. Mid grey reads
   on both themes. A page's own select styles can reuse it with var(--select-chevron). */
:root { --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

select.ada-input,
.ada-select-compact {
    appearance: none;
    padding-right: 36px;
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

textarea.ada-input {
    min-height: 80px;
    resize: vertical;
}

textarea.ada-input--lg { min-height: 120px; }

/* A compact select in a page header or toolbar (a report's date range). */
.ada-select-compact {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: inherit;
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* On a phone a compact select is a touch target too: 44px tall, like every field. */
@media (max-width: 767px) {
    .ada-select-compact { padding-top: 11px; padding-bottom: 11px; }
}

/* A field that can't be changed now (a published survey's privacy, a plan-locked setting): a
   tint a step stronger than [readonly]'s, tertiary text and a not-allowed cursor, as
   certifications.css's settings already draw it. background-color, not background, so a select
   keeps its chevron. After the selects, which set a surface. */
.ada-input:disabled,
.ada-select-compact:disabled {
    background-color: var(--bg-subtle);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.ada-input.ada-error {
    border-color: var(--error);
}

.ada-input.ada-error:focus {
    border-color: var(--error);
    box-shadow: 0 0 0 3px var(--error-light);
}

/* Error message below input - flexible width for long translations */
.ada-form-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--error);
    line-height: 1.4;
    /* Don't constrain width - let it flow naturally */
}

/* ========================================
   FORM LAYOUTS
   ======================================== */
.ada-form-group { margin-bottom: 20px; }
.ada-form-group:last-child { margin-bottom: 0; }

/* Fields and their action on one line, bottom-aligned. A group's bottom margin would
   otherwise sit under its input and push the button below the fields. */
.ada-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.ada-inline-form > .ada-form-group { margin-bottom: 0; flex: 1 1 160px; min-width: 0; }
.ada-inline-form > .ada-form-group--wide { flex-grow: 2; }
.ada-inline-form > .ada-form-group--narrow { flex: 0 0 140px; }
.ada-inline-form > .ada-btn { flex: none; padding-top: 11px; padding-bottom: 11px; }
.ada-form-group--compact {
    margin-bottom: 14px;
}
.ada-form-group--spacious { margin-bottom: 24px; }
/* The one field before a form's button, with room to breathe (Forgot password). */
.ada-form-group--loose { margin-bottom: 32px; }
.ada-form-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }

.ada-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* The row spaces its fields; a field's own margin would double it (or, the last in a row,
   leave none under it once the row is one column). */
.ada-form-row > .ada-form-group { margin-bottom: 0; }

/* Two fields side by side become one column on a phone. */
@media (max-width: 600px) {
    .ada-form-row { grid-template-columns: 1fr; }
}

/* First and last name: closer together, and side by side on a phone too (Sign up). */
.ada-form-row--tight { gap: 16px; }

@media (max-width: 600px) {
    .ada-form-row--tight { grid-template-columns: 1fr 1fr; }
}

/* A field (a checkbox) that sits at the bottom of its row, level with the inputs beside it. */
.ada-form-group--end { display: flex; align-items: flex-end; }
/* A field that needs little width (a font picker). */
.ada-form-group--narrow-field { max-width: 300px; }

.ada-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.ada-form-actions--compact {
    padding-top: 24px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    border-top: 1px solid var(--border-light);
}

/* Cancel and Save stay at the end: alone (adding a thing, no Delete) or wrapped under Delete on a phone. */
.ada-form-actions > :last-child { margin-left: auto; }

/* Form section card (used by assign/create flows) */
.ada-form-section {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    padding: 24px;
}

.ada-form-section:last-child { margin-bottom: 0; }

.ada-type-option {
    padding: 16px;
    border: 2px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.ada-type-option:hover { border-color: var(--border-heavy); }

.ada-type-option.ada-selected {
    background: var(--accent-subtle);
    border-color: var(--accent);
}

/* ========================================
   ANSWER OPTIONS & TOGGLES
   ======================================== */
.ada-answer-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ada-answer-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-page);
    border-radius: var(--radius-md);
}

/* Toggle: checkbox slider */
.ada-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    /* Beside a long description it was squeezed to nothing on a phone. */
    flex-shrink: 0;
}

.ada-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ada-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--toggle-track);
    transition: 0.2s;
    border-radius: 24px;
}

.ada-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--toggle-knob);
    transition: 0.2s;
    border-radius: 50%;
}

.ada-toggle input:checked + .ada-toggle-slider { background-color: var(--accent); }
.ada-toggle input:checked + .ada-toggle-slider:before { transform: translateX(20px); }
.ada-toggle input:disabled + .ada-toggle-slider { cursor: not-allowed; opacity: 0.6; }

/* Toggle: pill with knob (non-input) */
.ada-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ada-toggle-row--compact {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ada-toggle-info { flex: 1; min-width: 0; }
.ada-toggle-label { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.ada-toggle-label--sm { font-size: 13px; color: var(--text-secondary); margin-bottom: 0; }
.ada-toggle-desc { font-size: 13px; color: var(--text-secondary); }
.ada-toggle-desc--muted { font-size: 12px; color: var(--text-tertiary); }

/* A field that takes the row's spare width (a search box in a toolbar). */
.ada-form-group--grow { flex: 1; min-width: 200px; }

/* Fields and text on one line inside a form group (an input with its unit, a pair of limits). */
.ada-field-row { display: flex; align-items: center; gap: 8px; }
.ada-field-affix { color: var(--text-secondary); white-space: nowrap; }
.ada-input--narrow { width: 90px; }

/* Monospaced input (a certificate, a key). */
/* A smaller input among many (a member's custom fields). */
.ada-input--compact { padding: 6px 10px; font-size: 13px; }

/* A member's custom fields, each a small label and input. */
.ada-custom-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.ada-custom-field { display: flex; flex-direction: column; gap: 4px; }
.ada-custom-field-label { margin-bottom: 0; font-size: 12px; }
.ada-custom-field-type { font-weight: 400; color: var(--text-tertiary); }

.ada-input--mono { font-family: monospace; font-size: 12px; }
/* An input that takes the rest of its .ada-field-row. */
.ada-input--grow { flex: 1; min-width: 0; }

/* Radio buttons or checkboxes side by side, each a label around its input. */
.ada-choice-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.ada-choice { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
/* A choice with a long explanation: the control at its first line. */
.ada-choice--top { align-items: flex-start; gap: 8px; }

.ada-form-hint--warning { color: var(--warning); }

/* A select sized to its options, not the row (Settings' language and time zone). */
.ada-input--auto { width: auto; min-width: 200px; }

/* Beside a control the plan leaves disabled: the plan that has it, and the upgrade. */
.ada-plan-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.ada-plan-lock a { color: var(--accent); }
/* components/tables.css */
/* ========================================
   TABLES
   ======================================== */
.ada-table-container {
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    /* A table wider than a phone scrolls inside its card instead of being cut off. */
    overflow-x: auto;
}

/* One of several tables stacked on a page (My team). */
.ada-table-container--spaced { margin-bottom: 24px; }

.ada-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.ada-table-scroll::-webkit-scrollbar { height: 10px; }
.ada-table-scroll::-webkit-scrollbar-track { background: transparent; }
.ada-table-scroll::-webkit-scrollbar-thumb {
    background: var(--bg-subtle-hover);
    border-radius: var(--radius-full);
}

.ada-data-table {
    width: 100%;
    border-collapse: collapse;
    /* i18n: ensure table doesn't shrink columns too aggressively */
    min-width: 600px;
}

/* A phone is narrower than that floor, so every data table was at least 600px wide there: a
   three-column table (Custom fields) scrolled to reach its Delete, and one outside a scrolling
   card (Agreements, Data export, a webhook's deliveries) was cut off. On a phone a table is as
   wide as its columns need; one that still doesn't fit scrolls in its .ada-table-container. */
@media (max-width: 767px) {
    .ada-data-table { min-width: 0; }
}

.ada-data-table th {
    text-align: left;
    /* i18n: use logical property for RTL */
    text-align: start;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
    border-bottom: 1px solid var(--border-light);
    /* i18n: prevent header text from wrapping unexpectedly */
    white-space: nowrap;
}

.ada-data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

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

.ada-data-table tr:hover {
    background: var(--bg-hover);
}

.ada-data-table th.ada-sortable {
    cursor: pointer;
    user-select: none;
}

.ada-data-table th.ada-sortable i {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.5;
}

.ada-data-table th.ada-sortable:hover { color: var(--text-secondary); }

.ada-table-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ada-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-light);
}

.ada-row-action {
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    font-family: var(--font-family);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ada-row-action--text {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.ada-row-action:hover { background: var(--bg-hover); color: var(--text-primary); }

.ada-row-actions {
    display: flex;
    gap: 4px;
}

.ada-row-actions--fade {
    opacity: 0;
    transition: opacity 0.15s;
}

.ada-data-table tr:hover .ada-row-actions--fade,
.ada-data-table tr:focus-within .ada-row-actions--fade { opacity: 1; }

/* Without hover (a phone) the actions were never shown at all. */
@media (hover: none) {
    .ada-row-actions--fade { opacity: 1; }
}

.ada-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

/* Cells: alignment and emphasis, instead of a style="" on each one. */
.ada-data-table .ada-cell-center { text-align: center; }
.ada-data-table .ada-cell-end { text-align: end; }
.ada-data-table .ada-cell-strong { font-weight: 500; }
.ada-data-table .ada-cell-muted { color: var(--text-secondary); }
.ada-data-table .ada-cell-faint { color: var(--text-tertiary); }
.ada-data-table .ada-cell-mono { font-family: monospace; font-size: 12px; }
/* A count that needs attention (overdue): only when it is above zero. */
.ada-data-table .ada-cell-danger { color: var(--error); font-weight: 600; }
/* As narrow as its content (a rank, a count). */
.ada-data-table .ada-cell-narrow { width: 1%; white-space: nowrap; }
.ada-data-table .ada-cell-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A denser table inside a card or panel that fits its width (deliveries, agreements, the
   executive summary's groups, your data export, a card's report table, a security log),
   without hover. The only variant: every other table is the default. */
.ada-data-table--compact { min-width: 0; font-size: 14px; }
.ada-data-table--compact th { padding: 8px 12px; font-size: 11px; }
.ada-data-table--compact td { padding: 10px 12px; }
.ada-data-table--compact tr:hover { background: none; }
.ada-data-table--compact code { font-size: 12px; }

.ada-data-table .ada-cell-nowrap { white-space: nowrap; }
/* A table's one row saying it has none ("No members match ..."). */
.ada-data-table .ada-cell-empty { padding: 40px 20px; text-align: center; color: var(--text-tertiary); }

/* A cell holding a sentence (an error's detail): wraps within a readable width. */
.ada-data-table .ada-cell-detail { max-width: 320px; }
/* A row's buttons, kept on one line and spaced. */
.ada-data-table .ada-cell-actions { white-space: nowrap; }
.ada-data-table .ada-cell-actions > * + * { margin-left: 4px; }
/* components/reports.css */
/* ========================================
   REPORTS & EXPORTS
   ======================================== */
.ada-actions-cell {
    display: flex;
    gap: 4px;
}

.ada-code-cell {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 13px;
    color: var(--text-secondary);
}

.ada-code-copy {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    margin-left: 4px;
    padding: 4px;
}

.ada-code-copy:hover {
    color: var(--accent);
}

.ada-report-card {
    display: block;
    padding: 20px;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ada-reports-section { margin-bottom: 32px; }

.ada-reports-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1023px) {
    .ada-reports-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .ada-reports-grid { grid-template-columns: 1fr; }
}

.ada-report-card > .ada-icon-tile { margin-bottom: 12px; }

.ada-report-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.ada-report-desc { font-size: 13px; color: var(--text-secondary); }

/* The overview report leads the grid on a row of its own, so the rest fill whole rows. */
.ada-report-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: center;
}

.ada-report-card--featured > .ada-icon-tile { grid-row: span 2; margin-bottom: 0; }
/* components/analytics.css */
/* ========================================
   CATEGORIES & CONTENT
   ======================================== */

.ada-category { margin-bottom: 40px; }

.ada-content-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

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

.ada-content-info { flex: 1; }

.ada-category-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}
/* components/metrics.css */
/* ========================================
   METRICS
   ======================================== */

/* A line of detail under a stat's value. */
.ada-stat-detail {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 8px;
}
/* components/filters.css */
/* ========================================
   FILTERS
   ======================================== */

.ada-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-surface);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: var(--shadow-sm);
    border: none;
    text-decoration: none;
}

.ada-filter-pill.ada-active { background: var(--accent); color: white; }
.ada-filter-pill .ada-remove { margin-left: 2px; opacity: 0.7; }

.ada-filter-pill:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* A pill on a card, not on the page: outlined, or it would be white on white. */
.ada-filter-pill--outlined { box-shadow: inset 0 0 0 1px var(--border-medium); }
.ada-filter-pill--outlined.ada-active { box-shadow: none; }

/* A chosen pill stays chosen under the pointer (the hover rule above came later and won). */
.ada-filter-pill.ada-active:hover { background: var(--accent-hover); color: white; }

/* A row of filter chips above a list (Explore, Activity). */
.ada-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* A period picker in a report's header: a calendar icon, then .ada-select-compact. */
.ada-date-filter { display: flex; align-items: center; gap: 8px; }
.ada-date-filter > i { color: var(--text-tertiary); font-size: 13px; }

/* Topic chips centred under a search (Explore). */
.ada-filters--center { justify-content: center; margin-top: 24px; }
.ada-load-more-row { margin-top: 20px; text-align: center; }
/* components/navigation.css */
/* ========================================
   BREADCRUMBS (i18n-ready)
   ======================================== */
.ada-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    /* i18n: allow wrapping on narrow screens */
    flex-wrap: wrap;
    min-width: 0;
}

.ada-breadcrumbs__item {
    color: var(--text-tertiary);
    text-decoration: none;
    /* i18n: truncate long items to prevent line breaks in the middle */
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ada-breadcrumbs__item:hover {
    color: var(--accent);
    text-decoration: underline;
}

.ada-breadcrumbs__separator {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.ada-breadcrumbs__current {
    color: var(--text-primary);
    font-weight: 500;
    /* Current item can be longer but still truncates if needed */
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   BUTTON GROUPS (i18n-ready)
   ======================================== */
.ada-btn-group {
    display: flex;
    gap: 8px;
    /* i18n: allow wrapping when buttons don't fit */
    flex-wrap: wrap;
}

/* A row of actions; --row spaces them for a settings footer. */
.ada-action-group { display: flex; align-items: center; gap: 8px; }

.ada-action-group--row {
    display: flex;
    gap: 12px;
}

/* ========================================
   SIDEBAR NAV
   ======================================== */
.ada-nav-section { margin-bottom: 24px; }

.ada-nav-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    padding: 0 12px;
    margin-bottom: 8px;
}

.ada-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s ease;
    /* i18n: prevent overflow */
    min-width: 0;
}

.ada-nav-link-text {
    flex: 1;
    /* i18n: ellipsis for long translations */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ada-nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.ada-nav-link.ada-active {
    color: var(--text-primary);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.ada-nav-link i { width: 18px; font-size: 14px; text-align: center; opacity: 0.7; }
.ada-nav-link.ada-active i { opacity: 1; }

.ada-community-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s ease;
    /* i18n: prevent overflow */
    min-width: 0;
}

.ada-community-name {
    /* i18n: ellipsis for long community names */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ada-community-item:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.ada-community-item.ada-active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.ada-community-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    background: var(--text-tertiary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.ada-community-item.ada-active .ada-community-icon {
    background: var(--accent);
}

.ada-nav-divider {
    height: 1px;
    background: var(--border-light);
    margin: 16px 12px;
}

/* ========================================
   SIDEBAR FOOTER (Help · Privacy · Terms)
   ======================================== */
.ada-sidebar-footer {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

.ada-sidebar-footer-link {
    font-size: 11px;
    color: var(--text-tertiary);
    text-decoration: none;
    white-space: nowrap;
}

.ada-sidebar-footer-link:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

.ada-sidebar-footer-sep {
    font-size: 11px;
    color: var(--text-tertiary);
    opacity: 0.5;
}
/* components/pagination.css */
/* ========================================
   PAGINATION
   ======================================== */
.ada-pagination {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ada-pagination--split {
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.ada-pagination-controls { display: flex; gap: 4px; }
.ada-pagination-info { font-size: 13px; color: var(--text-tertiary); }
/* components/cards.css */
/* ========================================
   BASE CARDS
   ======================================== */
.ada-card {
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.ada-card--spaced { margin-bottom: 24px; }
/* A card that opens something (a playlist, a quick link, a report, a dashboard number): it lifts
   under the pointer. Every card that lifts carries this, so they all lift alike. */
.ada-card--lift { color: inherit; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; }
/* A link is inline until something says otherwise; a component's own display (a link card's flex,
   the featured report's grid) wins over this, whichever stylesheet loads first. */
:where(.ada-card--lift) { display: block; }
.ada-card--lift:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .ada-card--lift:hover { transform: none; }
}

/* A card whose rows run to its rounded edges (a tinted row would square its corners). */
.ada-card--clip { overflow: hidden; }

/* A whole card that is a link (Security's sub-pages) keeps the card's text colours. */
a.ada-card { color: inherit; text-decoration: none; }

.ada-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}

.ada-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.ada-card-title--md { font-size: 16px; }

.ada-card-title--clamp {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0;
}

.ada-card-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.ada-card-action {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}

.ada-card-action:hover { text-decoration: underline; }

.ada-card-body { padding: 20px; }

.ada-card-header--lg { padding: 20px 24px; }
.ada-card-body--lg { padding: 24px; }
.ada-card-body--flush { padding: 0; }
.ada-card-body--sm { padding: 10px; }
.ada-card-body--compact { padding: 12px; }

/* Dashboard Card (alias) */
.ada-dashboard-card {
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ========================================
   CONTENT CARDS (shared chrome)
   ======================================== */
/* Dense grid layout used for Explore-style feeds. */
/* A grid of content cards that fills the row; --dense packs smaller cards (Explore). */
.ada-content-grid {
    --card-min-width: 220px;
    --grid-gap: 16px;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
}

.ada-content-grid--dense {
    --card-min-width: 170px;
    --grid-gap: 10px;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
}

/* Full-card click target (used by initContentCards to avoid invalid button-in-anchor markup). */
.ada-card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-xl);
    cursor: pointer;
}

/* Title link sits above the card overlay so it's independently clickable. */
.ada-card-title-link {
    position: relative;
    z-index: 2;
    color: inherit;
    text-decoration: none;
}

.ada-card-title-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Explore/grid card chrome */
.ada-content-card--grid {
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
}


/* Learn Later action (hover overlay) — canonical on Explore */
.ada-card-save {
    position: absolute;
    /* Keep overlays aligned across cards (whether or not progress segments are present). */
    top: 18px;
    right: 10px;
    z-index: 2; /* above link overlay */
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-full);
    border: 1px solid transparent; /* constant border width to avoid hover "pop" */
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(0,0,0,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.15s, transform 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}

.ada-content-card:hover .ada-card-save,
.ada-content-card:focus-within .ada-card-save {
    opacity: 1;
    transform: translateY(0);
}

/* Without hover (a phone) Save was never shown at all. */
@media (hover: none) {
    .ada-card-save { opacity: 1; transform: none; }
}

.ada-card-save:hover {
    background: rgba(255,255,255,0.86);
    color: var(--text-primary);
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

.ada-card-save:active {
    transform: translateY(0) scale(0.96);
}

.ada-card-save:focus-visible {
    outline: 2px solid rgba(0, 102, 204, 0.35);
    outline-offset: 2px;
}

.ada-card-save i {
    font-size: 15px;
    line-height: 1;
}

/* Short-lived success feedback after click (non-persistent) */
.ada-card-save.ada-confirmed {
    color: var(--palette-green-800);
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.22);
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.18);
}

.ada-card-save.ada-confirmed i {
    color: var(--palette-green-800);
}

.ada-card-thumbnail {
    aspect-ratio: 3 / 4;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: rgba(255,255,255,0.9);
}

.ada-card-thumbnail.ada-purple { background: var(--gradient-purple); }
.ada-card-thumbnail.ada-blue { background: var(--gradient-blue); }
.ada-card-thumbnail.ada-green { background: var(--gradient-green); }
.ada-card-thumbnail.ada-orange { background: var(--gradient-orange); }
.ada-card-thumbnail.ada-pink { background: var(--gradient-pink); }
.ada-card-thumbnail.ada-cyan { background: var(--gradient-cyan); }
.ada-card-thumbnail.ada-red { background: var(--gradient-red); }
.ada-card-thumbnail.ada-indigo { background: var(--gradient-indigo); }
.ada-card-thumbnail.ada-teal { background: var(--gradient-teal); }
.ada-card-thumbnail.ada-amber { background: var(--gradient-amber); }
.ada-card-thumbnail.ada-rose { background: var(--gradient-rose); }
.ada-card-thumbnail.ada-slate { background: var(--gradient-slate); }

.ada-integration-card:hover { box-shadow: var(--shadow-md); }

.ada-integration-card {
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: all 0.15s;
}

/* An integration card that is a link (SCIM) reads like its siblings, not like link text. */
a.ada-integration-card { color: inherit; text-decoration: none; }

.ada-integration-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

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

/* Item/Zap cards */
.ada-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.ada-item-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-surface);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
}

.ada-item-content {
    flex: 1;
    min-width: 0;
}
.ada-item-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}
.ada-item-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 2px;
}

.ada-zap-templates {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ada-zap-template {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s;
}

.ada-zap-template:hover {
    border-color: var(--brand-zapier);
    box-shadow: 0 2px 8px rgba(255, 74, 0, 0.1);
}

.ada-zap-apps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ada-zap-arrow {
    font-size: 12px;
    color: var(--text-tertiary);
}
.ada-zap-info {
    flex: 1;
    min-width: 0;
}
.ada-zap-name {
    font-size: 13px;
    font-weight: 600;
}
.ada-zap-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.ada-zap-use-btn {
    padding: 6px 14px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.ada-zap-use-btn:hover {
    background: var(--bg-hover);
}

/* A card's meta line: icon and text. */
/* A note at the right of a card's header ("Active learners per day"). */
.ada-card-header-note { font-size: 12px; color: var(--text-tertiary); }

.ada-card-meta {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

/* An icon beside a card title, in the accent. */
.ada-card-title-icon { color: var(--accent); }

/* A small note at the foot of a card body, right-aligned ("Last checked ..."). */
.ada-card-footnote { margin-top: 12px; font-size: 12px; color: var(--text-tertiary); text-align: right; }

/* A grid of cards that each open a page (Security): icon, title and description, chevron. */
.ada-link-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.ada-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
}

.ada-link-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.ada-link-card-desc { font-size: 13px; color: var(--text-secondary); }
.ada-link-card-chevron { margin-left: auto; color: var(--text-tertiary); }

/* A card that holds a page's filters on one row (Security's sessions and audit log). */
.ada-card-body--toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ada-card-body--toolbar .ada-form-group { margin: 0; }

/* A form on a card of its own (Report a problem). */
.ada-card--form { max-width: 640px; padding: 24px; }
/* components/avatars.css */
/* ========================================
   AVATARS
   ======================================== */

/* A person: their photo, or their initials on a tone (design-system web/README "Avatars").
   Render it with <partial name="_Avatar">. 36px in lists and tables; --xs 24px (a preview),
   --sm 32px (the top bar), --md 40px and --lg 44px (the learner side, a community's team),
   --xl 96px (a person's header, 72px on a phone). */
.ada-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    background: var(--tone-blue-bg);
    color: var(--tone-blue-fg);
}

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

.ada-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.ada-avatar--sm { width: 32px; height: 32px; }
.ada-avatar--md { width: 40px; height: 40px; font-size: 14px; }
.ada-avatar--lg { width: 44px; height: 44px; font-size: 16px; }
.ada-avatar--xl { width: 96px; height: 96px; font-size: 36px; font-weight: 700; }

/* The learner side and your own header: initials in white on the brand gradient. */
.ada-avatar--brand { background: var(--gradient-brand); color: white; font-weight: 700; }
/* "+3": the people a row of avatars leaves out. */
.ada-avatar--more { background: var(--bg-hover); color: var(--text-secondary); font-size: 12px; font-weight: 700; }

/* A person's tone (AvatarTones in C# picks it from their id). */
.ada-avatar.ada-blue { background: var(--tone-blue-bg); color: var(--tone-blue-fg); }
.ada-avatar.ada-pink { background: var(--tone-pink-bg); color: var(--tone-pink-fg); }
.ada-avatar.ada-green { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.ada-avatar.ada-amber { background: var(--tone-amber-bg); color: var(--tone-amber-fg); }
.ada-avatar.ada-orange { background: var(--tone-orange-bg); color: var(--tone-orange-fg); }
.ada-avatar.ada-red { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.ada-avatar.ada-purple { background: var(--tone-purple-bg); color: var(--tone-purple-fg); }
.ada-avatar.ada-cyan { background: var(--tone-cyan-bg); color: var(--tone-cyan-fg); }

@media (max-width: 767px) {
    .ada-avatar--xl { width: 72px; height: 72px; font-size: 28px; }
}

.ada-performer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

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

.ada-performer-name {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}
.ada-performer-rank {
    width: 28px;
    font-size: 12px;
    font-weight: 700;
    color: var(--palette-gray-500);
    background: var(--palette-gray-100);
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Gold, silver and bronze for the top three. */
.ada-performer-rank--1 { background: var(--palette-amber-100); color: var(--palette-amber-700); }
.ada-performer-rank--2 { background: var(--palette-gray-200); color: var(--palette-gray-600); }
.ada-performer-rank--3 { background: var(--palette-orange-200); color: var(--palette-orange-700); }

/* The name beside a friend's avatar. */
.ada-friend-name { font-size: 15px; font-weight: 700; }
.ada-friend-name--sm { font-size: 13px; }
/* components/progress.css */
/* ========================================
   PROGRESS INDICATORS
   ======================================== */
/* Progress overlay (positioning base for segmented variants) */
.ada-card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0,0,0,0.38);
    border-radius: var(--radius-full);
    overflow: hidden;
}

/* Segmented progress (Instagram-stories-style) */
.ada-card-progress.ada-card-progress--segments {
    --card-progress-inset: 10px;
    --card-progress-gap: 4px;

    left: var(--card-progress-inset);
    right: var(--card-progress-inset);
    bottom: var(--card-progress-inset);
    height: 3px;
    background: transparent;
    display: flex;
    gap: var(--card-progress-gap);
}

.ada-card-progress.ada-card-progress--segments.ada-card-progress--top {
    top: 6px;
    bottom: auto;
    z-index: 2;
}

.ada-content-card.ada-has-top-progress .ada-progress-chip--top,
.ada-content-card.ada-has-top-progress .ada-card-chip {
    /* Move badges below the top progress segments */
    top: 18px;
}

.ada-card-progress-segment {
    flex: 1;
    height: 100%;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.30);
    overflow: hidden;
    position: relative;
}

.ada-card-progress-segment.ada-is-complete {
    background: rgba(255,255,255,0.90);
}

.ada-card-progress-segment.ada-is-active {
    background: rgba(255,255,255,0.62);
}

/* Creator status chip (Published/Draft) */
.ada-card-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(0,0,0,0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ada-card-chip.ada-published { color: var(--palette-green-800); }
.ada-card-chip.ada-draft { color: var(--palette-amber-800); }

.ada-assignments-list .ada-assignment-progress {
    padding: 0 20px 20px;
}

.ada-assignments-list .ada-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ada-assignments-list .ada-progress-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 0.3s;
}

.ada-progress-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    gap: 12px;
}

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

.ada-progress-label {
    font-size: 13px;
    color: var(--text-primary);
    /* i18n: allow label to take space but truncate if too long */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A label of set width, so a list's bars line up (the community dashboard's top courses). */
.ada-progress-label--wide { flex: 0 0 160px; font-size: 14px; font-weight: 500; }

/* On a phone a wide label takes its own line, with the bar and its numbers under it; side by
   side they ran 40px past the screen (the admin dashboard's Top Courses). */
@media (max-width: 767px) {
    .ada-progress-item:has(> .ada-progress-label--wide) { flex-wrap: wrap; }
    .ada-progress-label--wide { flex-basis: 100%; }
}

.ada-progress-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ada-progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ada-progress-text {
    font-size: 13px;
    font-weight: 600;
    min-width: 36px;
}

.ada-progress-bar {
    width: 100px;
    height: 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.ada-progress-bar--sm {
    height: 4px;
    border-radius: 2px;
}

.ada-progress-bar--lg {
    height: 8px;
    border-radius: var(--radius-sm);
}

.ada-progress-bar--narrow { width: 80px; }
.ada-progress-bar--xs { width: 60px; }
.ada-progress-bar--wide { width: 120px; }
/* A bar in a line of text, before its percentage (Data & Export). */
.ada-progress-bar--inline { display: inline-block; vertical-align: middle; margin-right: 6px; }
.ada-progress-bar--muted { background: var(--bg-page); }
/* A bar that takes the rest of its row (a report's progress column). */
.ada-progress-bar--fill { flex: 1; width: auto; min-width: 80px; }
/* A bar across its card (the profile's daily goal). */
.ada-progress-bar--block { width: 100%; }

.ada-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ada-progress-fill.ada-success { background: var(--success); }
.ada-progress-fill.ada-warning { background: var(--warning); }
.ada-progress-fill.ada-danger { background: var(--error); }

.ada-progress-bar--sm .ada-progress-fill { border-radius: 2px; }
.ada-progress-bar--lg .ada-progress-fill { border-radius: var(--radius-sm); }

.ada-progress-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* A progress cell of a set width beside other content (a member's assignments). */
.ada-progress-cell--fixed { width: 120px; flex-shrink: 0; }
/* components/empty-states.css */
/* ========================================
   EMPTY STATES
   ======================================== */
/* A list or panel with nothing in it: an icon, a short title and a line on what to do. Pages had
   ten copies of this, each slightly different. --compact sits inside a card. */
.ada-empty-state {
    text-align: center;
    padding: 64px 20px;
    color: var(--text-tertiary);
}

.ada-empty-state > i {
    display: block;
    font-size: 40px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.ada-empty-state h2,
.ada-empty-state h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ada-empty-state p {
    max-width: 420px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
}

/* A page with nothing in it yet (a community's courses, Groups): a larger icon and title. */
.ada-empty-state--lg { padding: 60px 20px; }
.ada-empty-state--lg > i { font-size: 48px; }
.ada-empty-state--lg :is(h2, h3) { margin-bottom: 8px; font-size: 18px; }

.ada-empty-state--compact { padding: 32px 16px; }
/* An empty part of a page that fills as you add to it (a program's courses). */
.ada-empty-state--dashed { background: var(--bg-surface); border: 1px dashed var(--border-light); border-radius: var(--radius-lg); }
.ada-empty-state--compact > p + a { display: inline-block; margin-top: 8px; }

.ada-empty-state--compact > i {
    font-size: 32px;
    margin-bottom: 12px;
}

/* The illustrated form (Learn Later, Playlists): an icon in an accent circle. */
.ada-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 32px;
}

.ada-empty-title { margin-bottom: 8px; font-size: 20px; font-weight: 600; color: var(--text-primary); }
.ada-empty-desc { margin-bottom: 24px; font-size: 14px; color: var(--text-secondary); }

/* Not found: one design for every page that cannot find what it was asked for (_NotFound). */
.ada-not-found {
    max-width: 440px;
    margin: 0 auto;
    padding: 96px 20px;
    text-align: center;
}

.ada-not-found-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 28px;
}

.ada-not-found-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.ada-not-found-text {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ada-not-found-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
/* components/charts.css */
/* ========================================
   CHARTS & REPORTING
   ======================================== */
.ada-chart-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 24px;
}

/* In a grid row that spaces itself (.ada-two-col--spaced). */
.ada-chart-card--flush { margin-bottom: 0; }

.ada-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    padding-top: 20px;
    padding: 0;
}

.ada-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ada-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.ada-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ada-option-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    border-bottom: 1px solid var(--border-light);
    padding: 8px 0;
    color: var(--text-primary);
}

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

.ada-option-radio {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0,0,0,0.2);
}

.ada-option-radio {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-heavy);
    border-radius: 50%;
    flex-shrink: 0;
}

.ada-option-radio { border-radius: 50%; }

.ada-funnel-label {
    width: 100px;
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
}

/* Every activity-over-time chart draws its bars in the solid accent (the dashboard's were a
   washed-out 60%, Learning Activity's green). */
.ada-chart-bar {
    flex: 1;
    background: var(--accent);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* A column chart with a value over each bar and its label under it (dashboard, Executive
   Summary): .ada-chart-bars > .ada-chart-bar-wrapper > .ada-chart-value, .ada-chart-bar-track >
   .ada-chart-bar (height as a percentage), .ada-chart-bar-label. An empty column draws no bar,
   only the baseline. */
.ada-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 140px;
}

.ada-chart-bars--tall { height: 180px; }

.ada-chart-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    min-width: 0;
}

.ada-chart-bar-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--border-light);
}

.ada-chart-value { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.ada-chart-bar-label { font-size: 11px; color: var(--text-tertiary); }

/* A dense daily chart (Engagement, Learning Activity): thin bars that name their day and value
   on hover, with a few dates under them. */
.ada-bar-chart-bar {
    flex: 1;
    min-width: 4px;
    position: relative;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    transition: opacity 0.15s;
}

.ada-bar-chart-bar:hover { opacity: 0.8; }

.ada-bar-chart-bar:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: var(--bg-surface);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

.ada-bar-chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Horizontal bars: a label, then a track filled to the share. */
.ada-horiz-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ada-horiz-bar-label { width: 120px; font-size: 13px; font-weight: 500; }
.ada-horiz-bar-track { flex: 1; height: 24px; background: var(--bg-page); border-radius: var(--radius-sm); overflow: hidden; }

.ada-horiz-bar-fill {
    height: 100%;
    min-width: 28px;
    padding-left: 8px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: white;
}

.ada-chart-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}

.ada-progress-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 36px;
    text-align: right;
}

/* Digits line up down a list, in the app's own face: monospace read as code here. */
.ada-progress-value--mono { font-variant-numeric: tabular-nums; }

.ada-progress-value--muted { color: var(--text-secondary); }
.ada-progress-label--muted { color: var(--text-secondary); }
/* components/tabs.css */
/* ========================================
   TABS (underline)
   ======================================== */
:root {
    /* Allow pages (e.g. Create) to override the active tab color. */
    --tabs-accent: var(--accent);
}

.ada-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ada-tabs--spaced {
    margin-bottom: 24px;
}

.ada-tabs--spacious {
    margin-bottom: 32px;
}

.ada-tabs--sticky {
    position: sticky;
    top: var(--topbar-height);
    z-index: 50;
    background: var(--bg-page);
    padding: 0 32px;
}

.ada-tab {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    cursor: pointer;
    font-family: inherit;
    /* A button does not inherit it; without this a button tab is 1px shorter than a link tab. */
    line-height: inherit;
    transition: all 0.15s;
    /* i18n: prevent wrapping, allow horizontal scroll on container */
    white-space: nowrap;
}

.ada-tab--sm {
    padding: 10px 16px;
    font-size: 13px;
}

.ada-tab:hover { color: var(--text-primary); }

/* Inset, so a row that scrolls on a phone does not clip it. */
.ada-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

.ada-tab.ada-active {
    color: var(--tabs-accent);
    border-bottom-color: var(--tabs-accent);
    font-weight: 600;
}

/* On a phone a row of tabs wider than the screen scrolls within itself instead of widening the
   page (Settings' four tabs did). The underline sits on the row's rule instead of over it, so
   the scroll box does not clip it. */
@media (max-width: 767px) {
    .ada-tabs { overflow-x: auto; scrollbar-width: none; }
    .ada-tabs::-webkit-scrollbar { display: none; }
    .ada-tab { flex-shrink: 0; margin-bottom: 0; }
}

.ada-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--bg-page);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

.ada-tab.ada-active .ada-tab-badge {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* What a tab shows; the others are [hidden]. */
.ada-tab-panel[hidden] { display: none; }

/* Two or three views of the same thing, one chosen (Summary / Individual responses). */
.ada-segmented {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    border-radius: var(--radius-lg);
    background: var(--bg-page);
}

.ada-segmented-option {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.ada-segmented-option:hover { color: var(--text-primary); }

.ada-segmented-option.ada-active {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
/* components/headers.css */
/* ========================================
   PAGE HEADERS
   ======================================== */
.ada-page-header { margin-bottom: 32px; }
.ada-page-header--compact { margin-bottom: 24px; }

.ada-page-header--row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

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

.ada-page-header-content { flex: 1; }

.ada-page-header--align-center {
    align-items: center;
}

.ada-page-header--split.ada-page-header--compact {
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    /* A phone has no room for a title and its actions side by side: the actions go under the
       title and wrap, instead of running off the screen and squeezing the title. */
    .ada-page-header--split,
    .ada-page-header--stacked {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ada-page-header--split .ada-header-actions { flex-wrap: wrap; }

    /* A row header (an icon, the title, then actions: Webhooks, xAPI, Identity providers)
       keeps its icon beside the title and puts the actions on a line of their own; they ran
       up to 150px off the screen. */
    .ada-page-header--row { flex-wrap: wrap; }
    .ada-page-header--row > .ada-header-actions { flex-basis: 100%; flex-wrap: wrap; }
}

.ada-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* On a phone the header's buttons share the width, two to a row (a playlist). */
@media (max-width: 767px) {
    .ada-header-actions--fill-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
    .ada-header-actions--fill-mobile > .ada-btn { justify-content: center; }
}

/* Badges and actions that wrap under a long title (a certification program). */
.ada-header-actions--wrap { flex-wrap: wrap; gap: 8px; }

.ada-page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
    /* i18n: allow title to wrap */
    line-height: 1.2;
    word-wrap: break-word;
}

.ada-page-subtitle { font-size: 14px; color: var(--text-secondary); }

.ada-page-meta {
    font-size: 13px;
    color: var(--text-tertiary);
    /* i18n: allow meta text to wrap */
    line-height: 1.4;
}

.ada-page-meta--secondary {
    font-size: 14px;
    color: var(--text-secondary);
}

.ada-page-meta-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.ada-panel-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.ada-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 16px;
}

.ada-back-link:hover { color: var(--text-primary); }

@media (max-width: 767px) {
    .ada-community-page .ada-tabs--sticky { padding: 0 16px; }
}

/* ========================================
   SECTIONS
   ======================================== */
.ada-section { margin-bottom: 40px; }

.ada-section-content--flush { padding: 0; }

.ada-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}

.ada-section-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: var(--bg-hover);
    border-top: 1px solid rgba(0,0,0,0.04);
}

.ada-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.ada-settings-row:first-child { padding-top: 0; }
.ada-settings-row:last-child { padding-bottom: 0; }

.ada-setting-info { flex: 1; }
.ada-setting-label { font-size: 14px; font-weight: 500; }
.ada-setting-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.ada-section-title {
    font-size: 18px;
    font-weight: 600;
    /* i18n: allow title to take available space */
    flex: 1;
    min-width: 0;
}

.ada-section-title--lg { font-size: 20px; }
/* A small icon inside a section title (Explore's "Courses", "New This Week"). */
.ada-section-title-icon { margin-right: 6px; opacity: 0.7; }
.ada-section-title--sm { font-size: 16px; }
.ada-section-title--xs { font-size: 14px; }
.ada-section-title--emphasis { font-weight: 800; letter-spacing: -0.3px; }

/* An icon leading a title block (Group Settings) sits beside it, not across the card from it. */
.ada-section-header:has(> .ada-icon-tile:first-child) { justify-content: flex-start; }

.ada-section-header--tight { margin-bottom: 12px; gap: 12px; }
.ada-section-header--spacious { margin-bottom: 20px; }
.ada-section-header--compact { gap: 12px; }

.ada-section-link {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}

.ada-section-link:hover { text-decoration: underline; }

.ada-section-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.ada-meta-text {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* A small capitalised label over a block (About's sections, a configuration group, a preview). */
.ada-eyebrow {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
/* components/layout-helpers.css */
/* ========================================
   LAYOUT HELPERS
   ======================================== */
.ada-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ada-two-col--spaced { margin-bottom: 24px; }

@media (max-width: 767px) {
    /* minmax(0, …): a bare 1fr is never narrower than its content, so a card holding a table
       (Time Tracking's Activity by Course) ran past the screen. */
    .ada-two-col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    /* Generic horizontal scroll row for pill/button collections.
       Use when the row shouldn't wrap but must remain accessible on small screens. */
    .ada-h-scroll-row {
        display: flex;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .ada-h-scroll-row::-webkit-scrollbar { display: none; }

    .ada-h-scroll-row > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

}
/* components/utilities.css */
/* ========================================
   UTILITIES
   ======================================== */
.ada-text-muted { color: var(--text-tertiary); }
.ada-text-small { font-size: 12px; }
.ada-spacer { flex: 1; }
.ada-mt-1 { margin-top: 8px; }
.ada-mt-2 { margin-top: 16px; }
.ada-mt-3 { margin-top: 24px; }
.ada-ml-1 { margin-left: 8px; }
.ada-mb-1 { margin-bottom: 8px; }
.ada-mb-2 { margin-bottom: 16px; }
.ada-mb-3 { margin-bottom: 24px; }
.ada-entity-link { color: inherit; text-decoration: none; }
.ada-entity-link:hover { color: var(--accent); text-decoration: underline; }
.ada-text-error { color: var(--error); }
.ada-text-secondary { color: var(--text-secondary); }
/* A list that scrolls within its panel instead of growing it. */
.ada-scroll-list { max-height: 280px; overflow-y: auto; margin: 12px 0; }
.ada-text-success { color: var(--success); }
.ada-text-warning { color: var(--warning); }
/* A wrapper that lays out as if absent (a form around one button in a row of them). */
.ada-contents { display: contents; }
/* An identifier in running text (a version id, a hash): monospaced, breaking anywhere. */
.ada-mono-wrap { font-family: monospace; overflow-wrap: anywhere; }
/* A long URL in a table cell: monospaced, cut short with an ellipsis (the full value in its title). */
.ada-mono-truncate { display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-family: monospace; font-size: 12px; }
/* Where text would be, saying there is none yet. */
.ada-text-placeholder { font-style: italic; color: var(--text-tertiary); }
/* components/shell.css */
/* ========================================
   APP SHELL (TOPBAR + SIDEBAR + MAIN)
   ======================================== */
/* Persisted ada-sidebar preferences (applied via JS) */
body.ada-sidebar-pref-collapsed { --sidebar-width: var(--sidebar-collapsed-width); }
body.ada-sidebar-pref-expanded { --sidebar-width: var(--sidebar-expanded-width); }

.ada-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: var(--bg-page);
    /* Three columns: logo | search | actions. The search sits centred while there is room
       for it and shrinks when there is not; the side columns never get narrower than their
       content, so the search can never lie over "+ Create" or the avatar (#45). */
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 540px) minmax(max-content, 1fr);
    column-gap: 16px;
    align-items: center;
    padding: 0 24px;
    /* Layering scale:
       - App chrome should sit above page content (sticky ada-tabs, etc.)
       - Drawer/backdrop should sit above page content but under ada-topbar
       - Toasts/modals sit above everything */
    z-index: 1000;
}

.ada-topbar-left {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ada-topbar-hamburger {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.15s;
}

.ada-topbar-hamburger:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ada-topbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 16px;
}

.ada-topbar-logo-icon {
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
}

/* Topbar search extracted to ./components/menus.css */

.ada-topbar-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Topbar menus extracted to ./components/menus.css */
/* Notifications dropdown extracted to ./components/menus.css */
/* Toasts extracted to ./components/toasts.css */

.ada-topbar-create {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    transition: all 0.15s;
}

.ada-topbar-create:hover {
    color: var(--text-primary);
    background: var(--bg-subtle-hover);
}

/* The web app's Create opens My Courses: a creator action, so it wears the creator accent. */
.ada-topbar-create--creator { color: var(--creator-accent-text); background: var(--creator-accent-light); }
.ada-topbar-create--creator:hover { color: var(--creator-accent-text); background: color-mix(in srgb, var(--creator-accent-text) 18%, transparent); }

.ada-topbar-create i {
    font-size: 11px;
    line-height: 1;
}

/* ---- Topbar Gamification Stats ---- */
.ada-topbar-stats {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 10px;
    transition: background 0.15s;
}

.ada-topbar-stats:hover {
    background: var(--bg-hover);
}

.ada-topbar-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.ada-topbar-stat i {
    font-size: 14px;
}

.ada-topbar-stat--streak i {
    color: var(--text-muted);
}

.ada-topbar-stat--streak.ada-active i {
    color: var(--palette-amber-500);
    animation: ada-topbar-fire-pulse 2s ease-in-out infinite;
}

.ada-topbar-stat--streak.ada-active {
    color: var(--text-primary);
}

@keyframes ada-topbar-fire-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.ada-topbar-stat--xp {
    color: var(--text-secondary);
}

.ada-topbar-stat--xp i {
    color: var(--palette-purple-500);
}

.ada-topbar-xp-ring {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Topbar avatar extracted to ./components/menus.css */
/* Avatar dropdown extracted to ./components/menus.css */

.ada-sidebar {
    position: fixed;
    top: var(--topbar-height);
    /* i18n: use logical property for RTL support */
    inset-inline-start: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    padding: 16px;
    display: flex;
    flex-direction: column;
    background: var(--bg-page);
    /* Frameless: no divider in persistent ada-sidebar */
    border-inline-end: none;
    z-index: 900;
    transition: width var(--sidebar-transition), transform var(--sidebar-transition);
}

.ada-sidebar > nav {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ada-sidebar-drawer-header {
    display: none;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.ada-sidebar-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ada-sidebar-drawer-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ada-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 850;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sidebar-transition);
}

.ada-sidebar-backdrop.ada-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ========================================
   ADMIN CONTEXT (COMMUNITY MANAGEMENT)
   ======================================== */
.ada-admin-context { padding: 0 0 8px; }

.ada-admin-context-back {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 20px;
    padding: 10px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: all 0.15s;
}

.ada-admin-context-back:hover {
    background: var(--border-light);
    border-color: var(--border-medium);
}

.ada-admin-context-back i {
    font-size: 12px;
    color: var(--text-secondary);
}

.ada-admin-context-community {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px;
    margin-bottom: 20px;
}

.ada-admin-context-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ada-admin-context-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    /* i18n: handle long ada-community names */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sidebar navigation extracted to ./components/navigation.css */

.ada-main {
    /* i18n: use logical property for RTL support */
    margin-inline-start: var(--sidebar-width);
    margin-left: var(--sidebar-width);
    margin-top: var(--topbar-height);
    min-height: calc(100vh - var(--topbar-height));
    transition: margin-inline-start var(--sidebar-transition);
}

.ada-main--community { background: var(--bg-page); }

.ada-main--wide {
    padding: 32px 40px;
    max-width: calc(1200px + var(--sidebar-width));
}

.ada-main--padded {
    padding: 32px 40px;
}

.ada-page-content {
    padding: 32px 40px;
}

.ada-page-content--max-720 { max-width: 720px; }

/* ========================================
   CENTERED CONTENT PANEL (forms / settings)
   ========================================
   Use when a page is "document-like" and benefits from a centered, readable column
   inside the ada-main area (e.g., profile/settings forms).

   Documentation: `docs/epics/webapp/design-system/web/README.md` → “Content Width & Alignment (Centered Panels)”. */
.ada-content-panel {
    max-width: var(--content-panel-max-width, 900px);
    margin-left: auto;
    margin-right: auto;
}

.ada-content-panel--narrow {
    --content-panel-max-width: 900px;
}

.ada-content-panel--wide {
    --content-panel-max-width: 1200px;
}

/* A single-column form (Group Settings). */
.ada-content-panel--form {
    --content-panel-max-width: 720px;
}
/* components/responsive.css */
/* ========================================
   RESPONSIVE LAYOUT
   ======================================== */
/* Medium screens default to collapsed (YouTube-style), but users can force expanded */
@media (min-width: 768px) and (max-width: 1279px) {
    body { --sidebar-width: var(--sidebar-collapsed-width); }
    body.ada-sidebar-pref-expanded { --sidebar-width: var(--sidebar-expanded-width); }

    body:not(.ada-sidebar-pref-expanded) .ada-topbar { padding-left: 14px; }
    body:not(.ada-sidebar-pref-expanded) .ada-sidebar { padding: 12px 8px; }
    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-nav-section-title,
    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-admin-context-community,
    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-sidebar-footer { display: none; }

    /* A link's words leave the screen but stay its name (as .ada-sr-only does), and its
       tooltip (data-ada-tooltip="hidden-label") shows them on hover and keyboard focus. */
    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-nav-link-text,
    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-community-name,
    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-admin-context-back-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-nav-link,
    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-community-item {
        justify-content: center;
        padding: 12px;
        gap: 0;
        position: relative;
    }

    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-nav-link i {
        width: auto;
        font-size: 18px;
        opacity: 0.85;
    }

    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-community-icon { margin: 0 auto; }

    body:not(.ada-sidebar-pref-expanded) .ada-sidebar .ada-nav-divider { margin: 16px 8px; }
}

/* Wide screens can be manually collapsed */
@media (min-width: 1280px) {
    body.ada-sidebar-pref-collapsed .ada-topbar { padding-left: 14px; }
    body.ada-sidebar-pref-collapsed .ada-sidebar { padding: 12px 8px; }
    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-nav-section-title,
    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-admin-context-community,
    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-sidebar-footer { display: none; }

    /* A link's words leave the screen but stay its name (as .ada-sr-only does), and its
       tooltip (data-ada-tooltip="hidden-label") shows them on hover and keyboard focus. */
    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-nav-link-text,
    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-community-name,
    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-admin-context-back-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-nav-link,
    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-community-item {
        justify-content: center;
        padding: 12px;
        gap: 0;
        position: relative;
    }

    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-nav-link i {
        width: auto;
        font-size: 18px;
        opacity: 0.85;
    }

    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-community-icon { margin: 0 auto; }

    body.ada-sidebar-pref-collapsed .ada-sidebar .ada-nav-divider { margin: 16px 8px; }
}

/* Mobile drawer */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }

    .ada-topbar { padding: 0 16px; column-gap: 8px; }
    .ada-topbar-search { display: none; }

    /* The logo's wordmark and Create's word don't fit beside the stats and the avatar: the
       actions ran 70px off the right edge and the avatar (the account menu) was unreachable.
       The words stay for screen readers; the "A" and the "+" stay on screen. */
    .ada-topbar-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .ada-topbar-create { width: 36px; height: 36px; padding: 0; }

    .ada-sidebar-backdrop { display: block; }

    /* iOS Safari zooms the page in when a field whose text is under 16px takes focus, and
       leaves it zoomed. On a phone every text field, select and textarea is 16px, whatever
       its size on a desktop: !important so a compact variant (a toolbar search, a 13px
       select) or a page's own style can't take one back under it. :where() gives it no
       specificity, so a field meant to be larger (the join code) keeps its size by
       declaring it !important too. */
    :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image]), select, textarea) {
        font-size: 16px !important;
    }

    .ada-sidebar {
        width: var(--sidebar-drawer-width);
        transform: translateX(-100%);
        border-right: 1px solid rgba(0,0,0,0.08);
        padding: 12px 12px 16px;
        background: var(--bg-page);
    }

    /* The shadow only while open: on the closed drawer its 40px blur bled into the left
       edge of every page as a grey strip. */
    body.ada-drawer-open .ada-sidebar { transform: translateX(0); box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
    body.ada-drawer-open .ada-sidebar-backdrop { opacity: 1; pointer-events: auto; }

    .ada-sidebar-drawer-header { display: flex; }

    .ada-main {
        /* Some pages define `.ada-main { margin-inline-start: var(--sidebar-width); }` inline.
           Force mobile to be full width regardless of CSS order. */
        margin-inline-start: 0 !important;
        margin-left: 0 !important; /* fallback for older browsers */
        transition: none;
    }

    /* A section title and its description (or action) share a row on wider screens; on a
       phone the title kept no width of its own and was painted over the description. */
    .ada-section-header { flex-wrap: wrap; }
    .ada-section-title { flex-basis: auto; }

    /* Mobile readability + prevent global horizontal overflow */
    .ada-page-content { padding: 24px 16px; }

    /* Dashboards */
    body .ada-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body .ada-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Community profile header moved to ./components/profile.css */
    /* Scroll/action helpers moved to ./components/layout-helpers.css */
    /* Contact row mobile layout moved to ./components/profile.css */

    /* Survey input sizing moved to ./components/surveys.css */
}
/* components/menus.css */
/* ========================================
   TOPBAR SEARCH
   ======================================== */
.ada-topbar-search {
    /* The topbar's middle grid column (shell.css): it sizes and centres the search. */
    grid-column: 2;
    min-width: 0;
    width: 100%;
}

.ada-search-wrapper {
    position: relative;
}

.ada-search-wrapper > i {
    position: absolute;
    /* i18n: use logical property for RTL support */
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 14px;
    pointer-events: none;
}

.ada-search-input {
    width: 100%;
    /* i18n: use logical properties for RTL support */
    padding: 8px 16px 8px 40px;
    padding-inline-start: 40px;
    padding-inline-end: 36px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-family: inherit;
    background: var(--bg-surface);
    transition: all 0.15s;
}

.ada-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ========================================
   SEARCH AUTOCOMPLETE DROPDOWN
   ======================================== */
.ada-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    max-height: 420px;
    overflow-y: auto;
    padding: 6px;
}

.ada-search-dropdown.ada-show { display: block; }

.ada-search-category {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    padding: 8px 10px 4px;
}

.ada-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.1s;
}

.ada-search-result:hover,
.ada-search-result.ada-active {
    background: var(--bg-hover);
}

.ada-search-result-text {
    min-width: 0;
    flex: 1;
}

.ada-search-result-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ada-search-result-name strong {
    font-weight: 700;
}

.ada-search-result-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ada-search-empty {
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--text-tertiary);
}

/* ========================================
   SEARCH CLEAR BUTTON
   ======================================== */
.ada-search-clear {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
    line-height: 1;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ada-search-clear:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* ========================================
   SEARCH "SEE ALL RESULTS" LINK
   ======================================== */
.ada-search-see-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transition: background 0.1s;
}

.ada-search-see-all:hover {
    background: var(--bg-hover);
}

.ada-search-see-all i {
    position: static;
    transform: none;
    color: inherit;
    font-size: 12px;
}

/* Screen-reader only (for ARIA live region) */
.ada-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   AVATAR DROPDOWN
   ======================================== */
.ada-avatar-dropdown-wrapper {
    position: relative;
}

.ada-avatar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 8px;
    z-index: 200;
}

.ada-avatar-dropdown.ada-show { display: block; }

/* A button that opens a menu under it: .ada-dropdown > button + .ada-dropdown-menu > .ada-dropdown-item.
   Toggle .ada-open on the .ada-dropdown to show the menu. */
.ada-dropdown { position: relative; display: inline-block; }

/* The small caret on a dropdown's button. */
.ada-dropdown-caret { font-size: 10px; }

.ada-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ada-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 6px;
    z-index: 100;
    display: none;
}

.ada-dropdown.ada-open .ada-dropdown-menu { display: block; }

.ada-dropdown-item-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* A line in a menu that is not an action ("No groups available"). */
.ada-dropdown-item--muted,
.ada-dropdown-item--muted:hover { color: var(--text-tertiary); background: none; cursor: default; }

.ada-dropdown-header {
    padding: 12px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 8px;
}

.ada-dropdown-header-name {
    font-weight: 600;
    color: var(--text-primary);
}

.ada-dropdown-header-email {
    font-size: 12px;
    color: var(--text-tertiary);
}

.ada-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.15s;
}

/* A dropdown item that is a <button> (an action, not a link) looks the same as one that is a link. */
button.ada-dropdown-item { width: 100%; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; }
.ada-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.ada-dropdown-item i { width: 16px; text-align: center; font-size: 12px; color: var(--text-tertiary); }
.ada-dropdown-item.ada-danger i { color: var(--error); }
.ada-dropdown-item.ada-danger { color: var(--danger-text); }
.ada-dropdown-item.ada-danger:hover { background: var(--danger-bg); }

.ada-dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 8px 0;
}

/* Topbar ada-avatar */
/* The signed-in person's .ada-avatar--sm, top right: it opens their menu. */
.ada-topbar-avatar {
    cursor: pointer;
    /* i18n: use logical property for RTL support */
    margin-inline-start: 8px;
}

/* Dropdown enhancements (i18n-ready) */
.ada-dropdown-item {
    /* i18n: handle long text in menu items */
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Theme toggle button in dropdown — reset browser button styles */
button.ada-dropdown-item {
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
}
/* components/toolbar.css */
/* ========================================
   TOOLBAR + SEARCH
   ======================================== */
.ada-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ada-toolbar--spaced { margin-bottom: 24px; }
.ada-toolbar--min-44 { min-height: 44px; }

.ada-toolbar-search {
    position: relative;
    flex: 0 0 280px;
}

.ada-toolbar-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 13px;
}

.ada-toolbar-search .ada-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    outline: none;
}

.ada-toolbar-search .ada-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
}

.ada-toolbar-search .ada-input::placeholder { color: var(--text-muted); }

.ada-toolbar-search--pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    min-width: 280px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* A search on its own above a report, not in a toolbar (Learner Progress). */
.ada-toolbar-search--standalone { max-width: 400px; margin-bottom: 24px; }

.ada-toolbar-search--pill:focus-within {
    box-shadow: 0 0 0 2px var(--accent-subtle), 0 1px 2px rgba(0,0,0,0.04);
}

.ada-toolbar-search--pill i {
    position: static;
    transform: none;
    color: var(--text-muted);
    font-size: 14px;
}

.ada-toolbar-search--pill .ada-input {
    border: none;
    padding: 0;
    font-size: 13px;
    background: transparent;
    outline: none;
}

@media (max-width: 767px) {
    .ada-toolbar-search {
        flex: 1 1 auto;
    }

    /* At least 44px tall, Apple's smallest touch target, like every field on a phone. */
    .ada-toolbar-search:not(.ada-toolbar-search--pill) .ada-input { padding-top: 12px; padding-bottom: 12px; }

    .ada-toolbar-search--pill {
        height: 44px;
        padding: 0 12px;
        min-width: 0;
    }

    .ada-toolbar-search--pill i { font-size: 13px; }

    /* 16px, like every field on a phone (responsive.css). */
    .ada-toolbar-search--pill .ada-input {
        line-height: 1.2;
        height: 100%;
    }

    /* A toolbar's search and filters stack, each the full width (Members). */
    .ada-toolbar:has(> .ada-toolbar-default) { align-items: stretch; }

    .ada-toolbar-default {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        min-width: 0;
        width: 100%;
    }

    .ada-toolbar-default .ada-toolbar-search { min-width: 0; width: 100%; }
    .ada-toolbar-default .ada-spacer,
    .ada-toolbar-default .ada-meta-text,
    .ada-toolbar-default .ada-toolbar-divider { display: none; }
}

/* ========================================
   TOOLBAR SELECTION STATE
   ======================================== */
.ada-toolbar-default {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ada-toolbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(0,0,0,0.08);
}

.ada-bulk-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* components/settings.css */
/* ========================================
   SETTINGS SECTIONS
   ======================================== */
.ada-settings-section {
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.ada-settings-section--padded {
    padding: 24px;
}

.ada-settings-section--divided {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.ada-settings-section--divided:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ada-section-header--padded {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* A title with its description directly under it, not squeezed beside it (a title and a
   description as siblings; a header with an action wraps them in a <div>). */
.ada-section-header--padded:has(> .ada-section-desc) {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ada-section-body { padding: 24px; }
/* A body whose list runs edge to edge (a course's content, community skills). */
.ada-section-body--flush { padding: 0; }

/* A preference: its label and description, with the control on the right. */
.ada-pref-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* On a phone the control wraps under its description instead of running off the card. */
    gap: 12px 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ada-pref-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ada-pref-row:first-child {
    padding-top: 0;
}

/* A preference's label and its line of explanation. */
.ada-pref-info { flex: 1 1 260px; min-width: 0; }
.ada-pref-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.ada-pref-info p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Account > Active Sessions: loading, none, or could not load. */
.ada-sessions-note { margin: 0; padding: 12px 0; font-size: 13px; color: var(--text-secondary); }

/* Type DELETE to confirm. */
.ada-delete-confirm-input { max-width: 300px; }

/* Irreversible actions (Account, a course's settings): a red-tinted section. */
.ada-danger-zone {
    border: 1px solid var(--danger-bg-hover);
    background: var(--danger-bg);
}

.ada-danger-zone .ada-section-title { color: var(--danger-text); }

/* A course setting's current state, what it means, and the button that changes it. */
.ada-setting-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ada-setting-state-desc { font-size: 13px; color: var(--text-secondary); }
.ada-setting-state > .ada-btn { margin-left: auto; }

/* One of several forms in a section, ruled off from the one above. */
.ada-settings-subform { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); }

/* A course's content, in order (Course Settings). */
.ada-content-index { width: 24px; font-size: 12px; text-align: center; color: var(--text-tertiary); }
.ada-content-info { flex: 1; min-width: 0; }

/* Community resources (Settings > About resources): icon, title, link, remove. */
.ada-resource-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.ada-resource-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.ada-resource-row > i { width: 16px; color: var(--text-tertiary); }
.ada-resource-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.ada-resource-url { font-size: 12px; color: var(--text-tertiary); overflow-wrap: anywhere; }
.ada-resource-empty { margin: 0; font-size: 13px; font-style: italic; color: var(--text-tertiary); }

/* A claimed domain: name and date, verified or pending, and the TXT record that verifies it. */
.ada-domain-claim { padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.ada-domain-claim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ada-domain-claim-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ada-domain-claim-name > i { color: var(--text-tertiary); }
.ada-domain-claim-domain { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ada-domain-claim-date { font-size: 12px; color: var(--text-tertiary); }

.ada-domain-claim-txt {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: var(--bg-page);
    font-size: 12px;
}

.ada-domain-claim-txt > div { margin-bottom: 4px; color: var(--text-secondary); }

/* A line under a preference saying what overrides it (your organization hides you). */
.ada-pref-info p.ada-pref-notice { margin-top: 6px; color: var(--text-primary); }
/* components/lists.css */
/* ========================================
   DOMAIN LISTS
   ======================================== */
.ada-domain-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.ada-domain-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.ada-domain-info { flex: 1; }
.ada-domain-name { font-size: 14px; font-weight: 600; }
.ada-domain-meta { font-size: 12px; color: var(--text-tertiary); }
/* Meta on a line of its own, under the name. */
.ada-domain-meta--block { display: block; }

/* A domain row that is a link (Create: where the course goes) is an .ada-card--lift. */
a.ada-domain-item { color: var(--text-primary); }

/* ========================================
   EVENT CARDS
   ======================================== */
.ada-event-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.ada-event-info { flex: 1; }
.ada-event-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }

.ada-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* ========================================
   WEBHOOK LISTS
   ======================================== */
.ada-webhook-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

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

.ada-webhook-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.ada-webhook-status.ada-active { background: var(--success); }
.ada-webhook-status.ada-error { background: var(--error); }
.ada-webhook-status.ada-paused { background: var(--warning); }

.ada-webhook-content { flex: 1; min-width: 0; }

.ada-webhook-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.ada-webhook-meta { font-size: 12px; color: var(--text-tertiary); }

.ada-webhook-url {
    display: inline-block;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   ACTIVITY LISTS
   ======================================== */
.ada-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

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

/* A feed row inside a card: padded, and lit on hover (your Activity feed). */
.ada-activity-item--row { padding: 14px 16px; border-bottom-color: rgba(0,0,0,0.04); transition: background 0.15s; }
.ada-activity-item--row:hover { background: var(--bg-hover); }

.ada-activity-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.25;
}
.ada-activity-text strong { font-weight: 600; }

/* ========================================
   ASSIGNMENTS
   ======================================== */
.ada-assignments-list .ada-assignment-details {
    border-top: 1px solid rgba(0,0,0,0.04);
    padding: 16px 20px;
    background: var(--bg-page);
}

.ada-assignments-list .ada-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ada-assignments-list .ada-detail-item label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.ada-assignments-list .ada-detail-item span {
    font-size: 14px;
    font-weight: 500;
}

/* Assignment cards (list layout) */
.ada-assignments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ada-assignments-list .ada-assignment-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ada-assignments-list .ada-assignment-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.ada-assignments-list .ada-assignment-thumb {
    width: 64px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

/* Its colours are every course icon tile's, in courses.css. */

.ada-assignments-list .ada-assignment-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.ada-assignments-list .ada-assignment-meta-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.ada-assignments-list .ada-assignment-meta-info span { margin-right: 16px; }

.ada-assignments-list .ada-assignment-status {
    padding: 6px 12px;
    border-radius: var(--radius-2xl);
    font-size: 12px;
    font-weight: 600;
}

.ada-assignments-list .ada-assignment-status.ada-active { background: var(--accent-subtle); color: var(--accent); }
.ada-assignments-list .ada-assignment-status.ada-completed { background: var(--success-light); color: var(--success); }
.ada-assignments-list .ada-assignment-status.ada-overdue { background: var(--error-light); color: var(--error); }

.ada-assignments-list .ada-assignment-actions {
    display: flex;
    gap: 8px;
}

.ada-assignment-info { flex: 1; min-width: 0; }

/* An assignment in a list: an icon (done, overdue), its name, its due date. The --list forms
   below are the denser rows on a group or member page; they come after, so they win. */
.ada-assignment-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ada-assignment-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.ada-assignment-meta {
    font-size: 12px;
    color: var(--text-tertiary);
}

.ada-assignment-meta--muted {
    font-size: 12px;
    color: var(--text-secondary);
}

.ada-assignment-due {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Assignment list rows (ada-group detail) */
.ada-assignment-row--list {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s;
    cursor: pointer;
}

.ada-assignment-row--list:last-child { border-bottom: none; }
.ada-assignment-row--list:hover { background: var(--bg-hover); }

.ada-assignment-name--list {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.ada-assignment-due--list {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Load more at the foot of a list (Activity, Explore). */
.ada-load-more {
    display: block;
    width: 100%;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: none;
    border-top: 1px solid rgba(0,0,0,0.04);
    cursor: pointer;
    text-decoration: none;
}

.ada-load-more:hover {
    background: var(--bg-hover);
}

/* A list of links in a card, one per row (Billing's community chooser). */
.ada-list-row {
    display: block;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
}

.ada-list-row:last-child { border-bottom: none; }
.ada-list-row:hover { background: var(--bg-hover); }

/* A record's fields, one per line (an audit entry's details). */
.ada-detail-list { display: grid; gap: 12px; }

/* A row set into a card: an assignment, a league, a friend, a certificate. A row that
   needs you soon or is late is tinted and marked down its leading edge. */
.ada-inset-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-xl);
    background: var(--bg-hover);
}

.ada-inset-row:last-child { margin-bottom: 0; }
.ada-inset-row--between { justify-content: space-between; }
.ada-inset-row--warning { background: rgba(245,158,11,0.08); box-shadow: inset 4px 0 0 var(--palette-amber-500); }
.ada-inset-row--error { background: rgba(239,68,68,0.08); box-shadow: inset 4px 0 0 var(--palette-red-500); }
.ada-inset-row-main { flex: 1; min-width: 0; }
.ada-inset-row-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ada-inset-row-title { font-size: 14px; font-weight: 700; }
.ada-inset-row-sub { margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.ada-inset-row-rank { font-size: 13px; font-weight: 800; color: var(--accent); }
/* components/playlists.css */
/* ========================================
   PLAYLISTS (Learn Later, a playlist): a summary strip, then the courses as numbered rows.
   ======================================== */
.ada-playlist-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.ada-playlist-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ada-playlist-container {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ada-playlist-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s;
}

.ada-playlist-item:last-child { border-bottom: none; }
.ada-playlist-item:hover { background: var(--bg-hover); }

.ada-item-number {
    width: 28px; height: 28px;
    background: var(--bg-page);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ada-playlist-thumb {
    width: 92px;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    font-size: 22px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.ada-playlist-thumb .ada-card-progress--segments {
    --card-progress-inset: 8px;
    --card-progress-gap: 2px;
}

.ada-item-info { flex: 1; }
.ada-item-title { font-size: 15px; font-weight: 500; margin-bottom: 2px; }
.ada-item-meta { font-size: 13px; color: var(--text-secondary); }

.ada-item-status {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

.ada-item-status.ada-completed { background: var(--palette-green-100); color: var(--success); }
.ada-item-status.ada-in-progress { background: var(--accent-subtle); color: var(--accent); }
.ada-item-status.ada-not-started { background: var(--bg-page); color: var(--text-tertiary); }

.ada-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.ada-playlist-item:hover .ada-item-actions,
.ada-playlist-item:focus-within .ada-item-actions { opacity: 1; }

/* Without hover (a phone) the actions were never shown at all. */
@media (hover: none) {
    .ada-item-actions { opacity: 1; }
}

/* On a phone the row is thumbnail | title, details and status | actions; in one line it ran
   past the screen and Play and Remove were cut off. */
@media (max-width: 767px) {
    .ada-playlist-item {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "number thumb info   actions"
            "number thumb status actions";
        column-gap: 12px;
        row-gap: 6px;
        padding: 16px;
    }
    .ada-item-number { grid-area: number; }
    .ada-playlist-thumb { grid-area: thumb; width: 64px; }
    .ada-item-info { grid-area: info; align-self: end; overflow-wrap: anywhere; }
    .ada-item-status { grid-area: status; justify-self: start; align-self: start; }
    .ada-item-actions { grid-area: actions; }
}

/* A playlist without a cover of its own. */
.ada-playlist-thumbnail--default { background: var(--gradient-ada); }
/* components/integrations.css */
/* ========================================
   INTEGRATIONS
   ======================================== */
.ada-integration-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.ada-integration-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
}

.ada-integration-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
}

.ada-integration-status.ada-available { color: var(--text-tertiary); }
.ada-integration-status.ada-connected { color: var(--success); }

.ada-idp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.ada-idp-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    background: var(--bg-hover);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s;
}

.ada-idp-option:hover { border-color: var(--accent); }
.ada-idp-option.ada-selected { background: var(--accent-subtle); border-color: var(--accent); }

.ada-idp-option-name { font-size: 13px; font-weight: 600; }

.ada-info-box {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--accent-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.ada-info-box-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.ada-info-box-content {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.ada-info-box-content strong { color: var(--text-primary); }
.ada-info-box-title { margin-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ada-info-box-content p { margin: 0; }

.ada-input-with-copy {
    display: flex;
    gap: 8px;
}

.ada-input-with-copy .ada-input { flex: 1; }

.ada-connection-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--success-light);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.ada-connection-status.ada-partial {
    background: var(--palette-amber-50);
    border: 1px solid var(--palette-amber-200);
}

.ada-connection-status.ada-connected {
    background: var(--palette-green-50);
    border: 1px solid var(--palette-green-200);
}

.ada-connection-status.ada-disconnected {
    background: var(--bg-page);
    border: 1px solid rgba(0,0,0,0.08);
}

.ada-connection-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

/* The icon's tint says the connection's state (xAPI, Zapier). */
.ada-connection-status.ada-connected .ada-connection-icon { background: var(--palette-green-100); color: var(--palette-green-800); }
.ada-connection-status.ada-partial .ada-connection-icon { background: var(--palette-amber-100); color: var(--palette-amber-800); }
.ada-connection-status.ada-disconnected .ada-connection-icon { background: var(--bg-hover); color: var(--text-tertiary); }

.ada-connection-info { flex: 1; }

.ada-connection-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
}

.ada-connection-status.ada-disconnected .ada-connection-title { color: var(--text-primary); }

.ada-connection-detail {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* A scheduling integration's settings page (Deputy, When I Work). */
.ada-integ-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.ada-integ-section {
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 16px;
}

.ada-integ-section h3 {
    margin: 0 0 16px;
    font-size: 16px;
}

.ada-integ-form-group {
    margin-bottom: 16px;
}

.ada-integ-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ada-integ-form-group input,
.ada-integ-form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.ada-integ-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
}

.ada-integ-stat-value {
    font-weight: 700;
    font-size: 20px;
}

.ada-delete-btn {
    background: none;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    color: var(--error);
    font-family: inherit;
}

.ada-delete-btn:hover {
    background: var(--palette-red-100);
}

/* A scheduling integration's page (Deputy, When I Work): what it does, its connection, its
   mappings, and how to set it up. */
.ada-integ-subtitle { margin: 4px 0 0; font-size: 14px; color: var(--text-secondary); }
.ada-integ-desc { margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }
.ada-integ-status-row { display: flex; flex-wrap: wrap; gap: 32px; }
.ada-integ-status-row .ada-status-dot { display: inline-block; width: 10px; height: 10px; }
.ada-integ-last-error { margin-left: 8px; font-size: 12px; color: var(--error); }
/* What the scheduling platform answered when a sync failed. */
.ada-integ-error-cell { max-width: 360px; overflow-wrap: anywhere; }

.ada-integ-form-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 16px; }
.ada-integ-form-row .ada-integ-form-group { flex: 1; margin: 0; }
.ada-integ-steps { padding-left: 20px; font-size: 14px; line-height: 1.8; color: var(--text-secondary); }

/* An identity provider's SCIM set-up steps, in the hint under the provider picker. */
.ada-scim-steps { margin: 8px 0 0; padding-left: 20px; }
/* components/dashboard.css */
/* ========================================
   USAGE / STATS
   ======================================== */
.ada-usage-value { font-size: 28px; font-weight: 700; }
.ada-usage-limit { font-size: 13px; color: var(--text-tertiary); }

.ada-usage-bar {
    height: 8px;
    margin-top: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    overflow: hidden;
}

.ada-usage-fill {
    height: 100%;
    border-radius: var(--radius-sm);
}

.ada-usage-fill.ada-warning { background: var(--warning); }
.ada-usage-fill.ada-normal { background: var(--accent); }

.ada-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.ada-usage-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.ada-usage-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ada-stats-grid {
    display: grid;
    /* i18n: flexible columns that adapt to content */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.ada-stats-grid--tight { margin-bottom: 24px; }

.ada-stat-card {
    background: var(--bg-surface);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    /* i18n: allow ada-card to grow if label wraps */
    min-width: 0;
}

.ada-stat-card--with-icon {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ada-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ada-summary-card {
    background: var(--bg-surface);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.ada-summary-card.ada-success { border-top: 4px solid var(--success); }
.ada-summary-card.ada-warning { border-top: 4px solid var(--warning); }
.ada-summary-card.ada-info { border-top: 4px solid var(--accent); }
.ada-summary-card.ada-danger { border-top: 4px solid var(--error); }

.ada-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ada-summary-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.ada-summary-value.ada-success { color: var(--success); }
.ada-summary-value.ada-warning { color: var(--warning); }
.ada-summary-value.ada-danger { color: var(--error); }

.ada-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    /* i18n: allow label to wrap */
    line-height: 1.3;
}

.ada-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -1px;
}

.ada-stat-value--xs { font-size: 20px; }

.ada-stat-value.ada-success { color: var(--success); }
.ada-stat-value.ada-warning { color: var(--warning); }
.ada-stat-value.ada-danger { color: var(--error); }
.ada-stat-value--muted { color: var(--text-tertiary); }

.ada-stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.ada-stat-change--compact {
    padding: 0;
    margin-top: 4px;
    display: flex;
}

.ada-stat-change.ada-up { color: var(--success); }
.ada-stat-change.ada-down { color: var(--error); }
.ada-stat-change.ada-flat { color: var(--text-tertiary); }

.ada-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (max-width: 767px) {
    .ada-usage-grid {
        grid-template-columns: 1fr;
    }
}

/* An activity feed: icon, what happened, when (community Activity, the dashboard's recent activity). */
.ada-feed-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

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

.ada-feed-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.3;
    flex: 1;
}

.ada-feed-time {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* A feed line with its time under it (a member's recent activity). */
.ada-feed-text--sm { font-size: 13px; }

/* The card an activity feed sits in. */
.ada-feed-list {
    padding: 4px 20px;
}

/* An event with a line of detail under it (the Engagement report's recent activity). */
.ada-feed-title { font-weight: 500; }
.ada-feed-desc { margin-top: 2px; font-size: 13px; color: var(--text-secondary); }

/* Stat cards inside a card (Security's identity health): tinted, centred, no shadow of their own. */
.ada-stats-grid--flush { margin-bottom: 0; }
.ada-stat-card--inset { background: var(--bg-hover); box-shadow: none; text-align: center; }
/* components/surveys.css */
/* ========================================
   SURVEYS & REPORTING
   ======================================== */
.ada-survey-card {
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
}

.ada-survey-card:hover { box-shadow: var(--shadow-md); }

.ada-survey-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ada-survey-name-input:hover { background: var(--bg-hover); }
.ada-survey-name-input:focus {
    background: var(--bg-hover);
    outline: none;
    border-color: var(--accent);
}

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

.ada-survey-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ada-survey-status {
    padding: 3px 10px;
    border-radius: var(--radius-xl);
    font-size: 12px;
    font-weight: 600;
}

.ada-survey-status.ada-active {
    background: var(--palette-green-100);
    color: var(--palette-green-600);
}
.ada-survey-status.ada-closed {
    background: var(--palette-gray-100);
    color: var(--palette-gray-500);
}
.ada-survey-status.ada-draft {
    background: var(--palette-amber-100);
    color: var(--palette-amber-600);
}

.ada-survey-meta-row {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.04);
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 12px;
}

.ada-preview-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-2xl);
    background: white;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.ada-survey-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-medium);
}

.ada-survey-select select {
    background: transparent;
    color: var(--text-primary);
    border: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.ada-survey-select i { font-size: 10px; color: var(--text-tertiary); }

.ada-scale-bar {
    flex: 1;
    max-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ada-scale-count {
    font-size: 12px;
    color: var(--text-tertiary);
}

.ada-scale-fill {
    width: 100%;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    min-height: 4px;
}

.ada-scale-fill.ada-score-1 { background: var(--palette-red-500); }
.ada-scale-fill.ada-score-2 { background: var(--palette-orange-500); }
.ada-scale-fill.ada-score-3 { background: var(--palette-yellow-500); }
.ada-scale-fill.ada-score-4 { background: var(--palette-lime-500); }
.ada-scale-fill.ada-score-5 { background: var(--palette-green-500); }

.ada-scale-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ada-text-responses {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ada-text-response {
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--bg-page);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ada-text-response-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.ada-rating-scale {
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: flex-end;
    padding: 8px 0;
}

@media (max-width: 767px) {
    .ada-survey-name-input {
        min-width: 0;
        width: 100%;
    }
}

/* The survey builder's settings, docked on the right; below the questions on a small screen. */
.ada-settings-panel {
    width: 320px;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-light);
    padding: 24px;
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .ada-settings-panel {
        position: static;
        width: auto;
        border-left: none;
        border-top: 1px solid var(--border-light);
    }
}

/* The survey builder: a bar fixed across the top (the survey's name, Preview, Save), the
   questions, and the settings in a column on the right. A phone has no room for that column
   or a fixed bar that wraps taller than the space left for it, so it stacks: bar, questions,
   then settings. */
.ada-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-surface);
}

.ada-top-bar-left { display: flex; align-items: center; gap: 16px; }
.ada-top-bar-right { display: flex; align-items: center; gap: 12px; }

.ada-survey-name-input {
    min-width: 300px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.ada-builder-layout { display: flex; min-height: 100vh; padding-top: 60px; }

.ada-questions-panel {
    flex: 1;
    max-width: 860px;
    padding: 40px;
    margin-right: 320px;
    margin-left: max(40px, calc((100% - 320px - 860px) / 2));
}

@media (max-width: 767px) {
    .ada-top-bar { position: static; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 12px 16px; }

    .ada-top-bar-left,
    .ada-top-bar-right { width: 100%; justify-content: space-between; flex-wrap: wrap; }

    /* Preview, Save and Publish share one row instead of leaving Publish on its own. */
    .ada-top-bar-right { flex-wrap: nowrap; gap: 8px; }
    .ada-top-bar-right > .ada-btn { flex: 1; justify-content: center; }

    .ada-survey-name-input { min-width: 0; width: 100%; }
    .ada-builder-layout { flex-direction: column; padding-top: 0; }
    .ada-questions-panel { margin: 0; padding: 16px; max-width: none; }
}
/* components/questions.css */
/* ========================================
   QUESTIONS & RESULTS
   ======================================== */
.ada-question-action {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    font-size: 13px;
}

.ada-question-action.ada-danger:hover {
    color: var(--danger-text);
}

.ada-question-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ada-questions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ada-question-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 20px;
    margin-bottom: 16px;
    border: 2px solid transparent;
    transition: border-color 0.15s, opacity 0.2s, transform 0.2s;
}

.ada-question-card.ada-drag-over {
    border-color: var(--accent);
    border-style: dashed;
}

.ada-question-card.ada-dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.ada-question-card.ada-active {
    box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
    border-color: var(--accent);
}

.ada-question-header--builder {
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    display: flex;
    margin-bottom: 16px;
}

.ada-question-header--results {
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    display: flex;
}

.ada-question-content {
    padding: 20px;
    padding-left: 38px;
}
.ada-question-drag {
    color: var(--text-tertiary);
    cursor: grab;
    font-size: 14px;
    padding: 4px;
}

.ada-question-drag:active {
    cursor: grabbing;
}
.ada-question-actions { display: flex; gap: 4px; margin-left: auto; }

.ada-question-text-input {
    width: 100%;
    margin-bottom: 16px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    border-bottom: 1px solid var(--border-medium);
    padding: 8px 0;
    color: var(--text-primary);
}

.ada-question-text-input:focus {
    outline: none;
    border-color: var(--accent);
}

.ada-question-text-input::placeholder { color: var(--text-tertiary); }

.ada-question-type {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-tertiary);
    background: var(--bg-page);
    flex: 0 0 auto;
}

.ada-save-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-tertiary);
    min-width: 80px;
}

.ada-save-status.saving {
    color: var(--accent);
}

.ada-save-status.saved {
    color: var(--success);
}

.ada-save-status i { color: var(--success); }

.ada-question-item {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 24px;
    padding: 24px 0;
}

.ada-question-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ada-question-number {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.ada-question-text {
    font-size: 15px;
    font-weight: 500;
}
.ada-question-responses {
    font-size: 13px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.ada-results-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ada-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ada-result-label {
    font-size: 13px;
    width: 150px;
    min-width: 140px;
    color: var(--text-secondary);
}

.ada-result-bar {
    flex: 1;
    height: 24px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-page);
}

.ada-result-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--accent);
    transition: width 0.3s;
}

.ada-result-value {
    width: 50px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    min-width: 40px;
}

.ada-add-option-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--accent);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.ada-add-option-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.ada-add-question-btn:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
}

.ada-add-question-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background: var(--bg-surface);
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    font-family: inherit;
}

.ada-add-criteria-btn:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    opacity: 1;
}

.ada-add-criteria-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    background: none;
    border: 1px dashed var(--accent);
    border-radius: var(--radius-md);
    cursor: pointer;
    opacity: 0.6;
}

.ada-criteria-remove:hover {
    background: var(--danger-bg);
    color: var(--error);
}

.ada-criteria-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 12px;
}
/* components/recipients.css */
/* ========================================
   RECIPIENTS
   ======================================== */
/* components/profile.css */
/* ========================================
   PROFILE
   ======================================== */
.ada-profile-header { padding: 28px 32px 0; }

.ada-profile-header-inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.ada-profile-avatar {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 52px;
    font-weight: 700;
    color: white;
    background: var(--gradient-brand);
}

.ada-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ada-profile-info { flex: 1; min-width: 0; }

.ada-profile-name {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.ada-profile-bio {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.ada-profile-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    margin-bottom: 14px;
}

.ada-profile-stat { color: var(--text-secondary); }
.ada-profile-stat strong { color: var(--text-primary); font-weight: 600; }

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

/* What a community's page shows under its header (its feed, its About). */
.ada-profile-content { padding: 20px 32px; }

@media (max-width: 767px) {
    .ada-community-page .ada-profile-header { padding: 18px 16px 0; }

    .ada-community-page .ada-profile-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .ada-community-page .ada-profile-avatar {
        width: 96px;
        height: 96px;
        font-size: 36px;
    }

    .ada-community-page .ada-profile-name { font-size: 24px; }

    .ada-community-page .ada-profile-stats {
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .ada-community-page .ada-profile-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ada-community-page .ada-btn-profile { padding: 9px 16px; }

    .ada-community-page .ada-profile-content { padding: 20px 16px; }

}

/* Add or remove a friend. --lg on a person's profile. */
.ada-friend-btn {
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.ada-friend-btn.ada-remove {
    background: rgba(239,68,68,0.1);
    color: var(--palette-red-500);
}

.ada-friend-btn.ada-add {
    background: rgba(0,102,204,0.1);
    color: var(--accent);
}

.ada-friend-btn--lg { padding: 8px 16px; font-size: 13px; }

/* A streak's flame, pulsing (profile, achievements). */
.ada-streak-fire {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ada-streak-fire i {
    color: var(--palette-amber-500);
    animation: ada-fire-pulse 1.5s ease-in-out infinite;
}

@keyframes ada-fire-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .ada-streak-fire i { animation: none; }
}

/* A section of a profile, yours or someone else's: a card with a title (its icon in the
   section's colour) and a link or action beside it. */
.ada-profile-section {
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 24px;
}

.ada-profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ada-profile-section-header--tight { margin-bottom: 12px; }
.ada-profile-section-title { margin: 0; font-size: 15px; font-weight: 700; }
.ada-profile-empty { margin: 0; padding: 12px 0; font-size: 14px; color: var(--text-tertiary); }

/* The header's own button (Edit Profile, Add Friend) sits at the top, not centred on the name. */
.ada-profile-header-action { align-self: flex-start; }

/* Gamification's colours for an icon beside a title (trophy, medal, friends). */
.ada-icon-gold { color: var(--palette-amber-500); }
.ada-icon-green { color: var(--palette-green-500); }
.ada-icon-blue { color: var(--palette-blue-500); }
.ada-icon-indigo { color: var(--brand-indigo); }
.ada-icon-purple { color: var(--palette-purple-500); }

/* Keep your streak: a nudge when today's lesson is still to do. */
.ada-streak-nudge {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--palette-amber-700);
}

.ada-streak-nudge > i { font-size: 18px; color: var(--palette-amber-500); }

/* Your league this week: its name, your rank and XP, and whether you are going up or down. */
.ada-league-name { margin-bottom: 4px; font-size: 20px; font-weight: 700; }
.ada-league-rank { margin-bottom: 8px; font-size: 14px; color: var(--text-secondary); }
.ada-league-xp { font-size: 13px; color: var(--text-secondary); }

.ada-league-zone {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    font-size: 12px;
    color: var(--text-secondary);
}

.ada-league-zone--promotion { background: var(--success-light); color: var(--success); }
.ada-league-zone--demotion { background: var(--error-light); color: var(--error); }

/* A friend on your profile opens theirs; "+3 more" stands where the next would be. */
a.ada-friend-item { color: inherit; text-decoration: none; }

/* Your skill goals and how far each has come; managing them searches skills to add. */
.ada-skill-goal-list { display: flex; flex-direction: column; gap: 12px; }
.ada-skill-goal { padding: 12px; border-radius: var(--radius-lg); background: var(--bg-hover); }

.ada-skill-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ada-skill-goal-name { font-size: 14px; font-weight: 600; }
.ada-skill-goal-meta { font-size: 12px; color: var(--text-tertiary); }
.ada-skill-goal-certs { margin-top: 4px; font-size: 11px; color: var(--text-tertiary); }
.ada-skill-goal-results { display: flex; flex-direction: column; gap: 6px; }

.ada-skill-goal-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
}

.ada-skill-goal-category { font-size: 11px; color: var(--text-tertiary); }

/* Earned badges (Achievements, your profile, someone else's): a coloured round icon and its name;
   one still to earn is faded. */
.ada-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

.ada-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px;
}

.ada-badge-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
}

.ada-badge-icon.ada-gold { background: var(--gradient-medal-gold); }
.ada-badge-icon.ada-blue { background: var(--gradient-medal-blue); }
.ada-badge-icon.ada-green { background: var(--gradient-medal-green); }
.ada-badge-icon.ada-purple { background: var(--gradient-medal-purple); }
.ada-badge-icon.ada-silver { background: var(--gradient-medal-silver); }

.ada-badge-icon.ada-locked { opacity: 0.35; }

.ada-badge-name {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
}

.ada-badge-hint {
    font-size: 10px;
    color: var(--text-tertiary);
    text-align: center;
}

/* A person at the top of a page about them: your profile, someone else's, your account, a
   member in the admin. --compact sits inside a card (Account) or under a back link (a member). */
.ada-person-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
}

.ada-person-info { flex: 1; min-width: 0; }
.ada-person-name { margin: 0 0 4px; font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.ada-person-sub { margin: 0 0 12px; font-size: 14px; color: var(--text-secondary); }

.ada-person-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.ada-person-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.ada-person-actions { display: flex; align-self: flex-start; gap: 8px; flex-shrink: 0; }

.ada-person-header--compact { align-items: center; gap: 20px; margin-bottom: 0; }
.ada-person-header--compact .ada-avatar--xl { width: 72px; height: 72px; font-size: 24px; }
.ada-person-header--compact .ada-person-name { font-size: 22px; letter-spacing: normal; }
.ada-person-header--compact .ada-person-sub:last-child { margin-bottom: 0; }
.ada-person-header--padded { padding: 24px 0; }

@media (max-width: 767px) {
    .ada-person-header { flex-wrap: wrap; gap: 16px; }
    .ada-person-name { font-size: 24px; }
    .ada-person-actions { width: 100%; }
}

/* A badge on its own card (the Badges page): bigger, so its name and how to earn it fit under it. */
.ada-badge-icon--lg { width: 64px; height: 64px; font-size: 26px; }

/* Your profile's numbers read centred under each other. */
.ada-stats-grid--centered .ada-stat-card { text-align: center; }

/* Your friends on your profile: a face and a first name each, in a row that wraps. */
.ada-friends-row { display: flex; flex-wrap: wrap; gap: 16px; }

.ada-friend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 64px;
}

.ada-friend-caption {
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-secondary);
}
/* components/game.css */
/* ========================================
   THE LEARNER'S GAME
   Achievements, Badges, Leaderboard and Friends: rounder cards with a softer lift than the
   rest of the app, a hero that says where you stand, and rows set into a card.
   ======================================== */
.ada-game-card {
    min-width: 0;
    padding: 20px;
    border-radius: var(--radius-2xl);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
    overflow-wrap: anywhere;
}

.ada-game-card--flush { padding: 0; overflow: hidden; }
.ada-game-card--spaced { margin-bottom: 24px; }

/* A card's title: an icon tile (.ada-icon-tile), its name, and a count at the far end. */
.ada-game-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: var(--font-weight-extrabold);
}

.ada-game-card-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-tertiary); }

/* A label over a group of things in a card (Earned, Up next). */
.ada-game-card-label { margin: 18px 0 10px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.ada-game-card-label:first-of-type { margin-top: 0; }

/* The card's own buttons, under what it lists. */
.ada-game-card-actions { display: flex; gap: 10px; margin-top: 14px; }

/* A link under a card's list to show all of it. */
.ada-game-card-more {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}

.ada-game-card-more:hover { text-decoration: underline; }

/* Two cards side by side while each can be 340px wide, else one, measured against the space
   the page has (not the window, which also holds the sidebar). The tracks are no wider than
   the grid, so a long word in a card wraps instead of widening the page (#59). */
.ada-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(340px, calc((100% - 24px) / 2))), 1fr));
    gap: 24px;
}

/* The top of a game page: where you stand on the left, the numbers on the right. */
.ada-game-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 24px 28px;
}

.ada-game-hero-main { display: flex; align-items: center; gap: 16px; }

.ada-game-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
    color: var(--text-on-accent);
    background: var(--gradient-streak);
}

.ada-game-hero-title { font-size: 22px; font-weight: var(--font-weight-extrabold); letter-spacing: -0.3px; }
.ada-game-hero-sub { margin-top: 2px; font-size: 14px; color: var(--text-secondary); }
.ada-game-hero-stats { display: flex; flex-wrap: wrap; gap: 12px; }

/* One big number in the hero (your rank). */
.ada-game-hero-figure { text-align: center; }
.ada-game-hero-figure-value { font-size: 36px; font-weight: var(--font-weight-black); color: var(--accent); }
.ada-game-hero-figure-label { font-size: 12px; color: var(--text-tertiary); }

/* A number with its icon (7 days, 1,200 XP, #3); the icon takes an .ada-icon-* colour. */
.ada-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-xl);
    background: var(--bg-hover);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.ada-stat-chip i { font-size: 14px; }
/* components/invites.css */
/* ========================================
   INVITES
   ======================================== */
.ada-invite-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ada-invite-section { margin-bottom: 32px; }

.ada-invite-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ada-invite-info { flex: 1; }
.ada-invite-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}
.ada-invite-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.ada-invite-status {
    padding: 4px 10px;
    border-radius: var(--radius-xl);
    font-size: 12px;
    font-weight: 500;
}

.ada-invite-status.ada-active {
    background: var(--palette-green-100);
    color: var(--palette-green-600);
}
.ada-invite-status.ada-disabled {
    background: var(--palette-gray-100);
    color: var(--palette-gray-500);
}

.ada-invite-settings {
    padding: 0 24px 20px;
    border-top: 1px solid rgba(0,0,0,0.04);
    background: var(--bg-page);
}

.ada-link-section {
    padding: 0 24px 20px;
}

.ada-link-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.ada-link-input-wrapper {
    position: relative;
    flex: 1;
}

.ada-link-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    font-family: 'SF Mono', 'Monaco', monospace;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-lg);
    background: var(--bg-page);
    color: var(--text-secondary);
}

.ada-link-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 12px;
}

.ada-link-stats strong { color: var(--text-primary); }

/* Accepting an invitation: a community code link (/join/{slug}/{code}) and an emailed member
   invitation (/invites/accept/{token}). */
.ada-invite-accept {
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 32px;
}

.ada-invite-accept > .ada-icon-tile { margin: 0 auto 24px; }

.ada-invite-accept h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.ada-invite-accept p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 32px;
    line-height: 1.5;
}

/* Its buttons are large, side by side. */
.ada-invite-accept .ada-btn + .ada-btn { margin-left: 8px; }

.ada-invite-community-name {
    font-weight: 700;
    color: var(--text-primary);
}
/* components/billing.css */
/* ========================================
   BILLING & PLANS
   ======================================== */

.ada-plan-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 32px;
    margin-bottom: 24px;
    border-radius: var(--radius-2xl);
    /* Flat blue, as admin colour is (DESIGN_NOTES, "When to Use Gradients"). */
    background: var(--tone-blue-bg);
    color: var(--text-primary);
}

.ada-plan-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tone-blue-fg);
    margin-bottom: 8px;
}

.ada-plan-name { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.ada-plan-price { font-size: 16px; color: var(--text-secondary); }
.ada-plan-price strong { font-size: 24px; font-weight: 700; }

.ada-plan-actions { display: flex; gap: 12px; }

/* Community billing page: standing, banners, plan tiles, entitlements */
.ada-plan-standing {
    display: inline-block;
    padding: 2px 10px;
    margin-right: 8px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-surface);
    color: var(--text-primary);
}

.ada-plan-standing[hidden] { display: none; }
.ada-plan-standing--warning { background: var(--warning-light); color: var(--warning); }
.ada-plan-standing--danger { background: var(--error-light); color: var(--error); }

.ada-billing-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    margin-bottom: 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.ada-billing-banner--success { background: var(--success-light); color: var(--success); }
.ada-billing-banner--canceled { background: var(--warning-light); color: var(--warning); }

.ada-billing-banner .ada-banner-dismiss {
    margin-left: auto;
    padding: 0 4px;
    border: none;
    background: none;
    color: inherit;
    font-size: 16px;
    opacity: 0.6;
    cursor: pointer;
}

.ada-billing-banner .ada-banner-dismiss:hover { opacity: 1; }

.ada-billing-section { margin-top: 32px; scroll-margin-top: calc(var(--topbar-height) + 16px); }

.ada-billing-lede { margin-bottom: 4px; font-size: 13px; color: var(--text-tertiary); }

.ada-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ada-plan-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.ada-plan-tile--current { border-color: var(--border-medium); }
.ada-plan-tile--preselected { border-color: var(--accent); box-shadow: var(--shadow-md); }

/* A plan's ribbon (Current plan, Unlocks what you tried): an .ada-badge--sm --pill on the tile's
   top edge, filled solid rather than tinted. */
.ada-plan-tile-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--text-on-accent);
}

.ada-plan-tile--current .ada-plan-tile-badge { background: var(--bg-inverted); color: var(--text-on-inverted); }

.ada-plan-tile-name { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.ada-plan-tile-desc { min-height: 36px; margin-top: 4px; font-size: 13px; color: var(--text-tertiary); }

.ada-plan-tile-price { margin: 16px 0 8px; }
.ada-plan-tile-amount { font-size: 32px; font-weight: 800; letter-spacing: -1px; color: var(--text-primary); }
.ada-plan-tile-amount--muted { font-size: 20px; letter-spacing: 0; color: var(--text-tertiary); }
.ada-plan-tile-period { font-size: 14px; color: var(--text-tertiary); }

.ada-plan-tile-tiers {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.ada-plan-tile-trial { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--success); }

.ada-plan-tile-inherits { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); }

.ada-plan-tile-features {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.ada-plan-tile-features li {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.ada-plan-tile-features li i { margin-top: 3px; color: var(--success); font-size: 12px; }

.ada-plan-tile-action { margin-top: auto; padding-top: 20px; }
.ada-plan-tile-action .ada-btn { width: 100%; justify-content: center; }
.ada-plan-tile-nudge { display: block; margin-top: 10px; font-size: 13px; text-align: center; color: var(--accent); }
.ada-plan-tile-nudge:hover { text-decoration: underline; }

.ada-entitlements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.ada-entitlement {
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    font-size: 13px;
}

.ada-entitlement i { margin-right: 8px; color: var(--success); }
.ada-entitlement--off i { color: var(--text-tertiary); }
.ada-entitlement--off { color: var(--text-secondary); }
.ada-entitlement-plan { margin-left: 6px; color: var(--text-tertiary); font-size: 12px; }
.ada-entitlement-plan::before { content: "· "; }

.ada-billing-annual { margin-left: 4px; }
.ada-billing-annual a { color: var(--accent); }
/* components/groups.css */
/* ========================================
   GROUPS
   ======================================== */
.ada-group-info { flex: 1; }

.ada-group-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.ada-group-header--spacious { margin-bottom: 32px; }

.ada-group-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.ada-group-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.ada-group-name--card {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: 0;
}

.ada-group-name--compact {
    font-weight: 500;
    letter-spacing: 0;
    font-size: 14px;
}

.ada-group-meta {
    font-size: 14px;
    color: var(--text-secondary);
}

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

.ada-group-members { font-size: 12px; color: var(--text-tertiary); }

.ada-group-stat {
    padding: 14px;
    text-align: center;
}

.ada-group-stat + .ada-group-stat { border-left: 1px solid rgba(0,0,0,0.04); }

.ada-group-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.ada-group-stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ada-group-card:hover { box-shadow: var(--shadow-md); }

.ada-group-card {
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.15s;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.ada-group-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.ada-group-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(0,0,0,0.04);
    background: var(--bg-hover);
}

.ada-group-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ada-group-footer-text {
    flex: 1;
    font-size: 12px;
    color: var(--text-tertiary);
}

.ada-group-card-header { padding: 20px; flex: 1; }

.ada-group-card-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ada-group-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A group's actions, side by side. */
.ada-group-actions { display: flex; align-items: center; gap: 8px; }

.ada-group-actions--row {
    display: flex;
    gap: 8px;
}

/* A member's email under their name. */
.ada-member-email { font-size: 13px; color: var(--text-tertiary); }

.ada-member-email--compact {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

/* A member's avatar beside their name. */
.ada-member-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
a.ada-member-cell { color: inherit; text-decoration: none; }
/* An invited or suspended member, faded in the list. */
.ada-member-row--dim :is(.ada-avatar, .ada-member-name) { opacity: 0.6; }

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

.ada-member-info--list { min-width: 0; }
.ada-member-name--list { font-weight: 500; color: var(--text-primary); }
.ada-member-email--list { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }

.ada-member-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s;
}

.ada-member-row:hover { background: var(--bg-hover); }

.ada-member-role {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    color: var(--text-tertiary);
}

.ada-member-role.ada-admin { background: rgba(0, 102, 204, 0.1); color: var(--accent); }

.ada-friend-meta {
    font-size: 11px;
    color: var(--text-tertiary);
}

.ada-btn-disabled-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
}

/* Group detail layout */
.ada-group-detail-page .ada-member-info { flex: 1; min-width: 0; }
.ada-group-detail-page .ada-member-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.ada-group-detail-page .ada-member-row:last-child { border-bottom: none; }

.ada-group-detail-page .ada-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.ada-notice.ada-info { background: rgba(0, 102, 204, 0.08); }
.ada-notice.ada-warning { background: rgba(234, 88, 12, 0.08); }

.ada-group-detail-page .ada-notice-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ada-preview-members {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ada-preview-more {
    padding: 6px 8px;
    border-radius: 20px;
    background: var(--bg-page);
    color: var(--text-tertiary);
    font-size: 13px;
}

/* Group and member detail list their sections (members, activity, assignments) as cards. */
.ada-group-detail-page .ada-section,
.ada-member-detail-page .ada-section {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.ada-group-detail-page .ada-section-header,
.ada-member-detail-page .ada-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ada-member-detail-page .ada-section-content { padding: 4px 20px 8px; }

.ada-group-detail-page .ada-stats-row {
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
}

.ada-group-detail-page .ada-stat-item { text-align: center; }

.ada-group-detail-page .ada-stat-label {
    font-size: 12px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ada-group-detail-page .ada-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Choosing members (Add Members to a group): a row per person, ticked when chosen. */
.ada-selectable-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.15s;
}

.ada-selectable-member:hover { background: var(--bg-hover); }
.ada-selectable-member.ada-selected { background: var(--accent-subtle); }
.ada-selectable-member:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ada-select-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-medium);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 10px;
}

.ada-select-checkbox i { display: none; }

.ada-selectable-member.ada-selected .ada-select-checkbox {
    background: var(--accent);
    border-color: var(--accent);
}

.ada-selectable-member.ada-selected .ada-select-checkbox i { display: block; }
/* components/courses.css */
/* ========================================
   COURSE CARDS
   ======================================== */
.ada-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* More, smaller cards to a row (My Courses). */
.ada-courses-grid--dense { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

/* A course's icon beside its name and meta. */
.ada-course-info { display: flex; align-items: center; gap: 12px; min-width: 0; }

.ada-course-info--row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ada-course-meta-info { font-size: 12px; color: var(--text-tertiary); }

.ada-course-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }

.ada-course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* A course's recent ratings, under its rating summary. */
.ada-ratings-list { margin-top: 24px; }
/* components/setup.css */
/* ========================================
   SETUP & VALIDATION HELPERS
   ======================================== */
.ada-step-number {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    background: var(--accent);
}

.ada-step-number.ada-completed { background: var(--success); }
/* components/auth.css */
/* ========================================
   AUTH PAGES
   ======================================== */
.ada-auth-page {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-page);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
}

.ada-auth-container {
    width: 100%;
    max-width: 360px;
    padding: 24px;
}

.ada-auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 48px;
}

.ada-logo-icon {
    width: 32px;
    height: 32px;
    background: var(--accent);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.ada-logo-text {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.ada-auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.ada-auth-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.ada-auth-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

.ada-auth-subtitle--narrow {
    max-width: 280px;
    margin: 0 auto;
}

.ada-auth-footer {
    text-align: center;
    margin-top: 32px;
}

.ada-auth-footer p { font-size: 14px; color: var(--text-secondary); }
.ada-auth-footer a { color: var(--accent); text-decoration: none; font-weight: 500; font-size: 14px; }

.ada-auth-footer a:hover { text-decoration: underline; }

.ada-auth-container .ada-btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.ada-auth-container .ada-input {
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
    font-family: inherit;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    background: transparent;
    outline: none;
    transition: all 0.15s;
}

.ada-auth-container .ada-input:focus { border-bottom-color: var(--accent); }
.ada-auth-container .ada-input::placeholder { color: var(--text-tertiary); }

.ada-auth-container .ada-back-link {
    display: block;
    text-align: center;
    margin-top: 48px;
    font-size: 13px;
    color: var(--text-tertiary);
    text-decoration: none;
}

/* Mobile: shift the form to flex-start so the keyboard / password managers don't block the
   submit button. (Its fields are 16px on a phone, like every field: responsive.css.) */
@media (max-width: 576px) {
    .ada-auth-page {
        align-items: flex-start;
        padding-top: 48px;
    }
}

/* Confirmation after an auth form is sent (forgot password, reset). */
.ada-success-message {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* A checkbox with its label (remember me, the agreements). */
.ada-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.ada-checkbox-label input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    margin-top: 2px;
    flex-shrink: 0;
}

.ada-checkbox-label a {
    color: var(--accent);
    text-decoration: none;
}

.ada-checkbox-label a:hover {
    text-decoration: underline;
}

/* A message above the form (an error, a notice), centred over it. */
.ada-form-error.ada-auth-message { margin-bottom: 20px; text-align: center; }
.ada-auth-notice { margin-bottom: 20px; font-size: 14px; line-height: 1.6; text-align: center; color: var(--text-secondary); }
/* components/onboarding.css */
/* ========================================
   ONBOARDING
   Signing up and setting up (welcome, account, what brings you here, the owner's business,
   industry, demo and team, joining a team, an individual's interests and skills). A focused
   flow of its own: no sidebar, the logo and the steps above one centred card. Its controls are
   the design system's (.ada-btn, .ada-input, .ada-filter-pill, .ada-alert); what is here
   is only what the flow itself needs, on the design system's tokens.
   ======================================== */
.ada-onboarding-page {
    min-height: 100vh;
    background: var(--bg-page);
}

.ada-onboarding {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 40px 24px;
}

.ada-onboarding-header { margin-bottom: 32px; text-align: center; }
.ada-onboarding-header .ada-auth-logo { margin-bottom: 24px; color: inherit; text-decoration: none; }

/* Where you are in the flow: done, here, still to come. */
.ada-onboarding-steps { display: flex; justify-content: center; gap: 8px; }

.ada-onboarding-step {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: transform 0.3s ease, background 0.3s ease;
}

.ada-onboarding-step--done { background: var(--success); }
.ada-onboarding-step--current { background: var(--accent); transform: scale(1.2); }

.ada-onboarding-content { flex: 1; }

.ada-onboarding-card {
    padding: 40px;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.ada-onboarding-title { margin-bottom: 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.ada-onboarding-subtitle { margin-bottom: 32px; font-size: 15px; color: var(--text-secondary); }

/* A step that is one statement and one action (welcome, done). */
.ada-onboarding-hero-icon { margin-bottom: 24px; font-size: 56px; text-align: center; }
.ada-onboarding-hero-title { margin-bottom: 16px; font-size: 28px; font-weight: 700; letter-spacing: -0.5px; text-align: center; }
.ada-onboarding-hero-text { margin-bottom: 32px; text-align: center; color: var(--text-secondary); }

/* Choosing one of a few large cards (who you are). A radio inside makes it a form field. */
.ada-onboarding-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ada-onboarding-choice {
    position: relative;
    padding: 24px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ada-onboarding-choice:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.ada-onboarding-choice:is(.ada-selected, :has(input:checked)) { border-color: var(--accent); background: var(--accent-subtle); }
.ada-onboarding-choice-icon { margin-bottom: 12px; font-size: 32px; }
.ada-onboarding-choice-title { margin-bottom: 4px; font-weight: 600; }
.ada-onboarding-choice-desc { font-size: 13px; color: var(--text-secondary); }

/* Picking an industry: a denser grid of the same kind of card. */
.ada-onboarding-industries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.ada-onboarding-industries--wide { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.ada-onboarding-industry {
    position: relative;
    padding: 16px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s;
}

.ada-onboarding-industry:hover { border-color: var(--accent); }
.ada-onboarding-industry:is(.ada-selected, :has(input:checked)) { border-color: var(--accent); background: var(--accent-subtle); }

/* Both cards are a label around a radio or checkbox. The card shows the choice (above) and the
   keyboard focus (below), so the input is hidden, but only visually, as .ada-sr-only does:
   display: none would take it out of the tab order and leave the step mouse-only. */
.ada-onboarding-choice input,
.ada-onboarding-industry input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ada-onboarding-choice:has(input:focus-visible),
.ada-onboarding-industry:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ada-onboarding-industry-icon { margin-bottom: 8px; font-size: 24px; }
.ada-onboarding-industry-name { font-size: 13px; font-weight: 500; color: var(--text-secondary); }

/* Pills to pick from (team size, topics, skills) are .ada-filter-pill; this is their row. */
.ada-onboarding-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.ada-onboarding-actions { display: flex; gap: 16px; margin-top: 32px; }
.ada-onboarding-actions > .ada-btn { flex: 1; }
.ada-onboarding-actions--stack { flex-direction: column; gap: 12px; }

.ada-onboarding-skip { margin-top: 24px; text-align: center; font-size: 14px; }
.ada-onboarding-skip a { color: var(--text-secondary); text-decoration: none; }
.ada-onboarding-skip a:hover { color: var(--text-primary); text-decoration: underline; }

.ada-onboarding-footer { padding-top: 32px; text-align: center; font-size: 14px; color: var(--text-secondary); }

.ada-onboarding-divider { margin-top: 24px; text-align: center; color: var(--text-tertiary); }
.ada-onboarding-note { margin-top: 16px; text-align: center; color: var(--text-secondary); }

.ada-onboarding-aside {
    margin-top: 24px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-hover);
    text-align: center;
    color: var(--text-secondary);
}

.ada-onboarding-aside p { margin: 0; }

/* An invitation code to type: large, spaced capitals. */
/* !important: larger than the 16px every field is on a phone (responsive.css), not under it. */
.ada-onboarding-code { font-size: 20px !important; text-align: center; text-transform: uppercase; letter-spacing: 2px; }

/* Inviting the team: an email per row, then a link to share. */
.ada-onboarding-invites { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ada-onboarding-invite { display: flex; align-items: center; gap: 12px; }
.ada-onboarding-invite .ada-input { flex: 1; }

.ada-onboarding-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-hover);
}

.ada-onboarding-share-label { flex-basis: 100%; font-size: 14px; color: var(--text-secondary); }
.ada-onboarding-share .ada-input { flex: 1 1 160px; min-width: 0; }

/* Joining a team: whose team it is. */
.ada-onboarding-team {
    margin: 24px 0;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: var(--bg-hover);
    text-align: center;
}

.ada-onboarding-team-icon { margin-bottom: 16px; font-size: 48px; }
.ada-onboarding-team-name { font-size: 20px; font-weight: 600; }
.ada-onboarding-team-note { margin-top: 8px; color: var(--text-secondary); }

/* Booking a demo: the week's free times, by day. */
.ada-onboarding-tz { display: block; margin-bottom: 16px; font-size: 14px; color: var(--text-secondary); }
.ada-onboarding-tz .ada-input { display: inline-block; width: auto; margin-left: 8px; }
.ada-onboarding-tz-hint { margin-bottom: 8px; font-size: 14px; color: var(--text-secondary); }
.ada-onboarding-week { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ada-onboarding-week-label { font-weight: 600; }
.ada-onboarding-slots { min-height: 200px; }
.ada-onboarding-slots-message { text-align: center; color: var(--text-secondary); }
.ada-onboarding-slots-message--error { color: var(--error); }
.ada-onboarding-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.ada-onboarding-slot-day { margin-bottom: 8px; font-weight: 600; text-align: center; }

.ada-onboarding-slot {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.ada-onboarding-slot:hover { border-color: var(--accent); }
.ada-onboarding-slot.ada-selected { border-color: var(--accent); background: var(--accent-subtle); }
.ada-onboarding-demo-form { margin-top: 24px; }

/* Skills to develop, grouped by category, with a count of those picked. */
.ada-onboarding-skill-category { margin: 16px 0 8px; }
.ada-onboarding-skill-count { margin: 16px 0 8px; text-align: center; font-size: 13px; color: var(--text-tertiary); }

@media (max-width: 640px) {
    .ada-onboarding { padding: 24px 16px; }
    .ada-onboarding-card { padding: 24px 20px; }
    .ada-onboarding-hero-title { font-size: 24px; }
    .ada-onboarding-choices { grid-template-columns: 1fr; }
    .ada-onboarding-actions { flex-direction: column; }
}
/* components/verify.css */
/* ========================================
   CERTIFICATE VERIFICATION (/certificates/verify)
   ======================================== */
.ada-verify { text-align: center; }

.ada-verify-form { display: flex; gap: 8px; margin-top: 8px; }

.ada-verify-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-family: monospace;
    font-size: 14px;
    background: var(--bg-surface);
    color: var(--text-primary);
}

.ada-verify-form button {
    padding: 10px 18px;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--accent);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.ada-verify-explanation { margin: 12px 0 20px; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

.ada-verify-card {
    padding: 20px;
    text-align: left;
}

.ada-verify-card dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 12px 20px; }
.ada-verify-card dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-tertiary); padding-top: 2px; }
.ada-verify-card dd { margin: 0; font-size: 14px; color: var(--text-primary); overflow-wrap: anywhere; }
.ada-verify-card dd.ada-verify-holder { font-size: 16px; font-weight: 600; }

.ada-verify-links { margin-top: 16px; font-size: 13px; }
.ada-verify-links a { color: var(--accent); text-decoration: none; }

/* Status pill */
.ada-verify-status {
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    border-radius: var(--radius-full);
}

.ada-verify-status i {
    font-size: 18px;
}

.ada-verify-status--valid {
    background: var(--palette-green-50);
    color: var(--palette-green-700);
}

/* A credential that is not (or no longer) proof: amber while it may still change, red once it cannot. */
.ada-verify-status--expired,
.ada-verify-status--replaced,
.ada-verify-status--pending,
.ada-verify-status--unavailable {
    background: var(--palette-amber-50);
    color: var(--palette-amber-700);
}

.ada-verify-status--revoked,
.ada-verify-status--unknown {
    background: var(--palette-red-50);
    color: var(--palette-red-700);
}

.ada-verify-status--not-found {
    background: linear-gradient(90deg, var(--palette-gray-500), var(--palette-gray-400));
}

.ada-verify-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
    font-family: monospace;
    font-size: 14px;
    color: var(--text-secondary);
}

.ada-verify-code i {
    color: var(--success);
}

.ada-verify-code i.fa-clock {
    color: var(--palette-amber-600);
}
/* components/certifications.css */
/* ========================================
   CERTIFICATIONS: programs, cycles, attempts and review cases
   ======================================== */

/* Certification programs (Certifications > Programs), as a grid of cards that open them. */
.ada-program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 16px;
}

/* A certification program, as a card that opens it: status and course count, name,
   description (two lines at most), then enrolments and completions. */
.ada-program-card {
    display: block;
    padding: 20px;
}

.ada-program-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ada-program-card-meta { font-size: 12px; color: var(--text-tertiary); }

.ada-program-card-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.ada-program-card-desc {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ada-program-card-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* A learner's progress in one program. */
.ada-program-progress-card {
    padding: 20px;
}

/* The owner's cycles and review cases, one card each. */
.ada-cycle-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

/* A cycle card's first line: who and what, then its action. */
.ada-cycle-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* A cycle's or review case's status line, under its name. */
.ada-cycle-meta { font-size: 12px; color: var(--text-tertiary); }
.ada-review-case-card > .ada-cycle-title,
.ada-review-case-card > .ada-cycle-meta { margin-bottom: 8px; }

/* A review case's decision: confirm the requirement unmet, or overturn and continue. */
.ada-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* What became of a renewal reminder, under its button (Renewal Due, Expired). */
.ada-reminder-status {
    min-height: 14px;
    margin-top: 4px;
    font-size: 11px;
}

/* A cycle's name in its progress card. */
.ada-cycle-title {
    font-size: 13px;
    font-weight: 600;
}

/* A cycle's status. */
.ada-cycle-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background: var(--accent-subtle);
    color: var(--accent);
}

/* The next page of cycles. */
.ada-cycle-next {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
}

/* The next page of review cases. */
.ada-review-next {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
}

/* Detail an earlier snapshot did not record. */
.ada-cycle-evidence-unavailable {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* One requirement of an attempt. */
.ada-cycle-requirement {
    font-size: 12px;
    margin-top: 4px;
}

/* A cycle's progress: its name, status and attempts. */
.ada-cycle-progress-card {
    padding: 16px 18px;
}

/* A case waiting for a reviewer. */
.ada-review-case-card {
    padding: 16px 18px;
}

/* One attempt at a cycle: a line saying what it is, then its requirements. An earlier attempt
   (neither current nor latest) is faded. */
.ada-cycle-attempt-progress { margin-top: 8px; }
.ada-cycle-attempt-progress--earlier { opacity: 0.85; }

.ada-attempt-line { font-size: 12px; color: var(--text-tertiary); }
.ada-attempt-summary { color: var(--text-secondary); font-weight: 500; }
.ada-attempt-reason { white-space: nowrap; }
.ada-attempt-markers { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.ada-attempt-ended-reason { white-space: nowrap; }

/* AUDIT-FIX-03 item 47: an adaptive attempt that ended without a decision. Neutral, not an error. */
.ada-no-decision-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.ada-no-decision-notice-icon { margin-top: 2px; color: var(--accent); }
.ada-no-decision-notice-title { font-weight: 600; color: var(--text-primary); }

/* The courses that satisfy a requirement; the one completed is named in full weight. */
.ada-cycle-delivery-options { overflow-wrap: anywhere; }
.ada-cycle-delivery-options--alternatives { color: var(--text-tertiary); }
.ada-selected-course,
.ada-delivery-option-selected { color: var(--text-primary); font-weight: 600; }

/* A signed acknowledgement: the text, the statement and the proof, set apart. */
.ada-signed-acknowledgement {
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-page);
}

.ada-signed-acknowledgement-text { margin-top: 6px; white-space: pre-wrap; }
.ada-signed-acknowledgement-statement { margin-top: 6px; }
.ada-signed-acknowledgement-proof { margin-top: 6px; font-size: 13px; color: var(--text-secondary); }

/* The identifiers that prove a signature, for whoever manages the record: folded away. */
.ada-signed-acknowledgement-record { margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
.ada-signed-acknowledgement-record > summary { cursor: pointer; color: var(--accent); }
.ada-signed-acknowledgement-record > p { margin: 6px 0; }
.ada-signed-acknowledgement-record-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 6px 0 0; }
.ada-signed-acknowledgement-record-list dt { color: var(--text-tertiary); }
.ada-signed-acknowledgement-record-list dd { margin: 0; color: var(--text-primary); }

@media (max-width: 767px) {
    .ada-signed-acknowledgement-record-list { grid-template-columns: 1fr; }
    .ada-signed-acknowledgement-record-list dd { margin-bottom: 6px; }
}
.ada-signed-acknowledgement-notice { margin-top: 6px; }
.ada-signed-acknowledgement-notice--correction { color: var(--warning); }
.ada-signed-acknowledgement-notice--revoked { color: var(--error); }

/* Signing one: tick the statement, then sign. */
.ada-acknowledgement-sign-form { margin-top: 10px; }
.ada-acknowledgement-sign-form .ada-btn { margin-top: 8px; }
.ada-acknowledgement-result { margin-top: 6px; }

/* A certificate type (Certificate Types): icon and status, name, its rules, how many were
   issued, then its actions. */
.ada-cert-type-card {
    padding: 20px;
}

.ada-cert-type-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ada-cert-type-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--text-secondary);
}

.ada-cert-type-facts i { width: 14px; margin-right: 2px; text-align: center; opacity: 0.6; }

.ada-cert-type-counts {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-tertiary);
}

.ada-cert-type-counts strong { font-weight: 600; color: var(--text-primary); }

.ada-cert-type-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

/* A certification standard's settings (Certificate Types' renewal settings, a program's
   certification settings): groups of labelled fields, each with a line saying what it does,
   in the owner's words (CertificationSettingsText). */
.ada-cert-settings-group {
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

/* A group that is its form section's whole content: the card spaces it (Renewal Settings). */
.ada-form-section > .ada-cert-settings-group:only-child { margin-bottom: 0; }

.ada-cert-settings-group > h3,
.ada-cert-settings-group > legend {
    margin: 0 0 8px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.ada-cert-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
}

.ada-cert-settings-stack { display: flex; flex-direction: column; gap: 14px; }

.ada-cert-setting {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.ada-cert-setting label { font-size: 13px; font-weight: 500; color: var(--text-primary); }

.ada-cert-setting :is(input:not([type=checkbox]), select, textarea) {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.ada-cert-setting :is(input, select, textarea).ada-error { border-color: var(--error); }

.ada-cert-setting :is(input, select, textarea):disabled {
    background: var(--bg-subtle);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.ada-cert-setting-check { display: flex; align-items: center; gap: 6px; }
/* A checkbox in a grid of fields, level with the fields' inputs. */
.ada-cert-setting-check--end { align-self: end; font-size: 12px; color: var(--text-secondary); }
.ada-cert-setting-hint { color: var(--text-tertiary); line-height: 1.4; }

/* A draft changed elsewhere: reload before publishing. */
.ada-draft-conflict {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--warning-light);
    color: var(--warning);
    font-size: 12px;
}

/* Certificate templates (Settings > Certificates); the default one is outlined in the accent. */
.ada-cert-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.ada-cert-template {
    border: 2px solid var(--border-medium);
    border-radius: 10px;
    padding: 16px;
    background: var(--bg-surface);
    text-align: center;
}

.ada-cert-template--default { border-color: var(--accent); }

.ada-cert-template > .ada-icon-tile { margin: 0 auto 10px; }
.ada-cert-template--default > .ada-icon-tile { background: var(--accent); color: white; }

.ada-cert-template-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ada-cert-template-desc { margin-top: 2px; font-size: 11px; color: var(--text-tertiary); }

/* A certificate type's skills, opened by Manage Skills. */
.ada-cert-type-skills { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); }

/* A learner's certificates (My Certificates), one card each: what it is and its state, where
   and when it was earned, its verification code, then what to do with it. A certificate due
   for renewal is outlined in amber. */
.ada-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ada-cert-card {
    padding: 24px;
}

/* Renewal due: a warning ring around the lift, so the card says it without a frame of its own. */
.ada-cert-card--renewal-due { box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 40%, transparent), var(--shadow-sm); }

.ada-cert-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.ada-cert-card-kicker {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
}

.ada-cert-card-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.ada-cert-card-meta { margin: 0 0 4px; font-size: 12px; color: var(--text-tertiary); }
.ada-cert-card-date { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
.ada-cert-card-note { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); }
.ada-cert-card-note.ada-text-warning { color: var(--warning); }

.ada-cert-card-code {
    margin-bottom: 12px;
    font-family: monospace;
    font-size: 12px;
    color: var(--text-tertiary);
}

.ada-cert-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Whether the certificate shows on the holder's public profile. */
.ada-cert-card-share {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* The certificate's renewals, opened from its History button. */
.ada-cert-card-history {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-secondary);
}

.ada-cert-history-title { margin-bottom: 6px; font-weight: 600; }
.ada-cert-history-row { padding: 4px 0; }

/* A learner's programs (My Programs): progress, then the courses, ticked as they are done. */
.ada-program-progress-list { display: grid; gap: 16px; }

.ada-program-course-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ada-program-course {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
}

.ada-program-course > i { font-size: 14px; color: var(--text-tertiary); }
.ada-program-course--done > i { color: var(--success); }
.ada-program-course--done > a { color: var(--text-tertiary); text-decoration: line-through; }
.ada-program-course-elective { font-size: 10px; font-weight: 500; color: var(--warning); }

/* What to do next in a program, under its courses. */
.ada-program-card-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

/* A certification program's page (Certifications > a program): its sections are cards with a
   title; an advanced one folds into a <details>. */
.ada-program-section {
    margin-bottom: 24px;
    padding: 16px 18px;
}

.ada-program-section-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.ada-program-subsection { margin-top: 14px; }

.ada-program-subsection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ada-program-subsection-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.ada-program-subsection-head > .ada-program-subsection-title { margin: 0; }
.ada-program-line { margin: 0 0 6px; font-size: 13px; color: var(--text-secondary); }
.ada-program-note { margin: 0; font-size: 12px; color: var(--text-secondary); }
.ada-program-intro { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); }
.ada-program-note.ada-text-warning { color: var(--warning); }

.ada-program-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* What happened to a change, and what the plan keeps (#53). */
.ada-program-notice {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: 12px;
}

.ada-program-notice--success { background: var(--success-light); color: var(--success); }
.ada-program-notice--warning { background: var(--warning-light); color: var(--warning); }
.ada-program-notice--lg { margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; font-size: 13px; }
.ada-program-notice > p { margin: 0 0 6px; }

/* What the plan leaves out, beside its upgrade. */
.ada-program-locked-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: -4px 0 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.ada-program-details {
    margin: 0 0 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.ada-program-details-summary {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ada-program-details-body { padding: 4px 14px 0; }

/* The adaptive certification section: a card of its own, closed unless the draft uses it. */
.ada-program-details--section {
    margin-bottom: 24px;
    border: none;
}

.ada-program-details--section > .ada-program-details-summary { padding: 14px 18px; font-size: 15px; }
.ada-program-details--section > .ada-program-details-body { padding: 0 18px 16px; }
.ada-program-lock-inline { margin-left: 8px; font-weight: 400; }

.ada-program-fieldset {
    margin: 16px 0 0;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.ada-program-fieldset > legend { font-size: 14px; font-weight: 600; }

.ada-program-fieldset--plain {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* The saved acknowledgement, and the record it keeps. */
.ada-program-ack-summary {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    font-size: 12px;
}

.ada-program-ack-summary > details { margin-top: 6px; }
.ada-program-ack-summary summary { cursor: pointer; }

.ada-program-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* One required learning objective of an adaptive draft; outlined red when a check names it. */
.ada-adaptive-lo-row {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.ada-adaptive-lo-row > .ada-btn { justify-self: start; }
.ada-adaptive-lo-row--implicated { outline: 2px solid var(--error); }

.ada-adaptive-lo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

/* The result of checking an adaptive draft (never a publication). */
.ada-program-validation {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    font-size: 12px;
}

.ada-program-block { margin-bottom: 24px; }

.ada-program-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ada-program-block-head .ada-program-section-title { margin: 0; }
.ada-program-block-desc { margin: 4px 0 0; font-size: 12px; color: var(--text-tertiary); }

.ada-program-skill-picker {
    padding: 12px 16px;
}

/* An acknowledgement's audit for those who manage it: its history, and a correction or
   revocation with a reason. */
.ada-acknowledgement-manager {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.ada-acknowledgement-manager-title { font-size: 12px; font-weight: 600; }
.ada-acknowledgement-audit-list { margin: 8px 0 0; padding-left: 18px; font-size: 12px; }
.ada-acknowledgement-audit-list:empty { display: none; }
.ada-acknowledgement-action-form { display: grid; gap: 8px; margin-top: 10px; }
.ada-acknowledgement-action-form > .ada-btn { justify-self: start; }
/* components/celebration.css */
/* Streak Celebration Overlay */

.ada-celebration-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ada-celebration-backdrop.ada-show {
    opacity: 1;
}

.ada-celebration {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 48px 40px 40px;
    transform: scale(0.8) translateY(20px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.ada-celebration-backdrop.ada-show .ada-celebration {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Flame badge */
.ada-celebration__badge {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ada-celebration__badge-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(234, 88, 12, 0.25) 0%, transparent 70%);
    animation: ada-celebration-pulse 2s ease-in-out infinite;
}

.ada-celebration__badge-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--palette-orange-500), var(--palette-orange-600));
    box-shadow: 0 8px 32px rgba(234, 88, 12, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.9);
}

.ada-celebration__badge-circle i {
    font-size: 44px;
    color: white;
}

/* Text */
.ada-celebration__title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
}

.ada-celebration__streak {
    font-size: 18px;
    font-weight: 600;
    color: var(--palette-orange-500);
}

.ada-celebration__subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    line-height: 1.5;
}

/* Continue button */
.ada-celebration__btn {
    padding: 12px 48px;
    border: none;
    border-radius: var(--radius-full);
    background: white;
    color: var(--palette-orange-600);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: 4px;
}

.ada-celebration__btn:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35);
}

/* Confetti */
.ada-confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2001;
    overflow: hidden;
}

.ada-confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -12px;
    opacity: 1;
    animation: ada-confetti-fall linear forwards;
}

.ada-confetti-piece--circle { border-radius: 50%; }
.ada-confetti-piece--square { border-radius: 2px; }
.ada-confetti-piece--strip  { width: 6px; height: 14px; border-radius: 2px; }

@keyframes ada-confetti-fall {
    0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(calc(100vh + 40px)) rotate(var(--confetti-spin)); opacity: 0; }
}

@keyframes ada-celebration-pulse {
    0%, 100% { transform: scale(1);   opacity: 0.6; }
    50%      { transform: scale(1.1); opacity: 1; }
}
/* components/skills.css */
/* ========================================
   SKILL PICKER COMPONENT
   ======================================== */

.skill-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill-picker__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.skill-picker__empty {
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
}

.skill-picker__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-page);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.skill-picker__tag--standard {
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.2);
    color: var(--palette-indigo-600);
}

.skill-picker__tag-remove {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    margin-left: 2px;
}

.skill-picker__tag-remove:hover {
    color: var(--palette-red-500);
}

.skill-picker__input-wrap {
    position: relative;
}

.skill-picker__input {
    width: 100%;
}

.skill-picker__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}

.skill-picker__dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}

.skill-picker__dropdown-item:hover {
    background: var(--bg-page);
}

.skill-picker__dropdown-cat {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-tertiary);
    padding-left: 12px;
}

.skill-picker__dropdown-create {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border-top: 1px solid var(--border-light);
}

.skill-picker__dropdown-create:hover {
    background: var(--bg-page);
}

.skill-picker__dropdown-empty {
    padding: 12px;
    font-size: 13px;
    color: var(--text-tertiary);
    text-align: center;
}

/* ========================================
   COMMUNITY SKILLS LIBRARY
   ======================================== */

.skills-library__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
}

.skills-library__item:last-child {
    border-bottom: none;
}

.skills-library__icon { font-size: 12px; color: var(--text-tertiary); }

.skills-library__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.skills-library__category {
    font-size: 12px;
    color: var(--text-tertiary);
}

.skills-library__actions {
    display: flex;
    gap: 4px;
}
/* tokens/palette.css */
/* Ada Webapp Tokens - Palette
 *
 * The raw colours components draw that no semantic token (colors.css) covers: Tailwind's
 * named shades, and the brands of the services Ada integrates with. Components never write a
 * hex value (the lint's ada-design-raw-colour); they use a semantic token when one fits and
 * one of these when not, so every colour on screen has a name and can be found and changed.
 * These are the same in light and dark mode.
 */
:root {
    --palette-blue-100: #dbeafe;
    --palette-blue-200: #bfdbfe;
    --palette-blue-500: #3b82f6;
    --palette-blue-600: #2563eb;
    --palette-blue-700: #1d4ed8;
    --palette-blue-800: #1e40af;
    --palette-green-50: #f0fdf4;
    --palette-green-100: #dcfce7;
    --palette-green-200: #bbf7d0;
    --palette-green-500: #22c55e;
    --palette-green-600: #16a34a;
    --palette-green-700: #15803d;
    --palette-green-800: #166534;
    --palette-purple-100: #f3e8ff;
    --palette-purple-500: #a855f7;
    --palette-violet-100: #ede9fe;
    --palette-violet-500: #8b5cf6;
    --palette-violet-600: #7c3aed;
    --palette-orange-200: #fed7aa;
    --palette-orange-500: #f97316;
    --palette-orange-600: #ea580c;
    --palette-orange-700: #c2410c;
    --palette-red-50: #fef2f2;
    --palette-red-100: #fee2e2;
    --palette-red-200: #fecaca;
    --palette-red-500: #ef4444;
    --palette-red-600: #dc2626;
    --palette-red-700: #b91c1c;
    --palette-red-800: #991b1b;
    --palette-amber-50: #fffbeb;
    --palette-amber-100: #fef3c7;
    --palette-amber-200: #fde68a;
    --palette-amber-500: #f59e0b;
    --palette-amber-600: #d97706;
    --palette-amber-700: #b45309;
    --palette-amber-800: #92400e;
    --palette-yellow-500: #eab308;
    --palette-lime-500: #84cc16;
    --palette-rose-600: #e11d48;
    --palette-indigo-100: #e0e7ff;
    --palette-indigo-200: #c7d2fe;
    --palette-indigo-500: #6366f1;
    --palette-indigo-600: #4f46e5;
    --palette-indigo-700: #4338ca;
    --palette-emerald-500: #10b981;
    --palette-emerald-600: #059669;
    --palette-gray-100: #f3f4f6;
    --palette-gray-200: #e5e7eb;
    --palette-gray-300: #d1d5db;
    --palette-gray-400: #9ca3af;
    --palette-gray-500: #6b7280;
    --palette-gray-600: #4b5563;
    --palette-gray-700: #374151;
    --palette-slate-100: #f1f5f9;
    --palette-slate-500: #64748b;

    /* Brands: an integration's logo tile in its own colour. */
    --brand-azure: #0078d4;
    --brand-okta: #00297a;
    --brand-onelogin: #2c3e50;
    --brand-slack: #4a154b;
    --brand-zapier: #ff4a00;
    --brand-zapier-hover: #e64400;
    --brand-wheniwork: #00c4cc;
    --brand-gmail: #ea4335;
    --brand-google-sheets: #0f9d58;
    --brand-notion: #000000;

    /* Ada's brand gradient's two ends (a person's hero, initials on a friend avatar). */
    --brand-indigo: #667eea;
    --brand-violet: #764ba2;
}
/* tokens/colors.css */
/* Ada Webapp Tokens - Colors */
:root,
[data-theme="light"] {
    /* Backgrounds */
    --bg-page: #f5f5f5;
    --bg-surface: #ffffff;
    --bg-hover: #fafafa;
    --bg-active: #f0f0f0;
    --bg-elevated: #ffffff;
    --bg-subtle: rgba(0, 0, 0, 0.04);
    --bg-subtle-hover: rgba(0, 0, 0, 0.08);

    /* Text */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-tertiary: #888888;
    --text-muted: #aaaaaa;
    --text-on-accent: #ffffff;

    /* Accent */
    --accent: #0066cc;
    --accent-hover: #0055aa;
    --accent-subtle: rgba(0, 102, 204, 0.08);

    /* Creator accent: Studio and course authoring (design-system DESIGN_NOTES, "Purple Accent for Creators") */
    --creator-accent: #7c3aed;
    --creator-accent-hover: #6d28d9;
    --creator-accent-light: rgba(124, 58, 237, 0.08);
    /* The accent as text (a creator link, an outlined creator button): a fill colour is too dark to read on a dark page. */
    --creator-accent-text: #7c3aed;

    /* Status */
    --success: #22863a;
    --success-light: #dcffe4;
    --warning: #b08800;
    --warning-light: #fff8c5;
    --error: #cb2431;
    --error-light: #ffeef0;

    /* Borders */
    --border-light: rgba(0, 0, 0, 0.06);
    --border: var(--border-light);
    --border-medium: rgba(0, 0, 0, 0.10);
    --border-heavy: rgba(0, 0, 0, 0.20);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.14);
    /* The Learning mode's softer, wider lift: a learner's card at rest (.ada-game-card). */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);

    /* Tones: a tinted tile, chip or initials avatar in one of the named colours, a pale
       background (-bg) with a strong foreground (-fg). `.ada-<colour>` modifiers use these. */
    --tone-blue-bg: #dbeafe;
    --tone-blue-fg: #1d4ed8;
    --tone-green-bg: #dcfce7;
    --tone-green-fg: #15803d;
    --tone-purple-bg: #f3e8ff;
    --tone-purple-fg: #7c3aed;
    --tone-orange-bg: #ffedd5;
    --tone-orange-fg: #c2410c;
    --tone-red-bg: #fee2e2;
    --tone-red-fg: #991b1b;
    --tone-amber-bg: #fef3c7;
    --tone-amber-fg: #92400e;
    --tone-pink-bg: #fce7f3;
    --tone-pink-fg: #be185d;
    --tone-cyan-bg: #cffafe;
    --tone-cyan-fg: #0e7490;

    /* Gradients: the design system's documented gradient presets, for a course or card
       thumbnail. Light-ended, for a large area. */
    --gradient-purple: linear-gradient(135deg, #7c3aed, #a855f7);
    --gradient-blue: linear-gradient(135deg, #3b82f6, #60a5fa);
    --gradient-green: linear-gradient(135deg, #10b981, #34d399);
    --gradient-orange: linear-gradient(135deg, #f59e0b, #fbbf24);
    --gradient-pink: linear-gradient(135deg, #ec4899, #f472b6);
    --gradient-cyan: linear-gradient(135deg, #06b6d4, #22d3ee);
    --gradient-red: linear-gradient(135deg, #ef4444, #f87171);
    --gradient-indigo: linear-gradient(135deg, #6366f1, #818cf8);
    --gradient-teal: linear-gradient(135deg, #14b8a6, #2dd4bf);
    --gradient-amber: linear-gradient(135deg, #f59e0b, #fcd34d);
    --gradient-rose: linear-gradient(135deg, #f43f5e, #fb7185);
    --gradient-slate: linear-gradient(135deg, #475569, #64748b);

    /* Deep gradients: a small tile with a white icon on it (a course's or a group's icon).
       Dark-ended so the icon keeps its contrast. */
    --gradient-blue-deep: linear-gradient(135deg, #0066cc, #0052a3);
    --gradient-green-deep: linear-gradient(135deg, #22863a, #1a6b2e);
    --gradient-purple-deep: linear-gradient(135deg, #7c3aed, #6d28d9);
    --gradient-orange-deep: linear-gradient(135deg, #ea580c, #c2410c);
    --gradient-pink-deep: linear-gradient(135deg, #db2777, #be185d);
    --gradient-cyan-deep: linear-gradient(135deg, #0891b2, #0e7490);
    --gradient-red-deep: linear-gradient(135deg, #dc2626, #b91c1c);
    --gradient-indigo-deep: linear-gradient(135deg, #4f46e5, #4338ca);

    /* Ada's own gradients: the brand gradient (a person's hero, a friend's initials avatar) and
       the blue-to-teal of a playlist with no thumbnail. */
    --gradient-brand: linear-gradient(135deg, #667eea, #764ba2);
    --gradient-ada: linear-gradient(135deg, #0066cc, #00a8cc);

    /* The streak gradient, amber to red like a flame: the Learning mode's hero tile
       (.ada-game-hero-icon) under a white icon. */
    --gradient-streak: linear-gradient(135deg, #f59e0b, #ef4444);

    /* Medal gradients: a badge's icon (.ada-badge-icon). */
    --gradient-medal-gold: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-medal-silver: linear-gradient(135deg, #9ca3af, #6b7280);
    --gradient-medal-blue: linear-gradient(135deg, #3b82f6, #2563eb);
    --gradient-medal-green: linear-gradient(135deg, #22c55e, #16a34a);
    --gradient-medal-purple: linear-gradient(135deg, #a855f7, #9333ea);

    /* Danger hover */
    --danger-bg: #ffeef0;
    --danger-bg-hover: #fee2e2;
    --danger-text: #dc2626;

    /* Inverted (dark bg in light mode, light bg in dark mode) */
    --bg-inverted: #1a1a1a;
    --text-on-inverted: #ffffff;

    /* Toggle controls */
    --toggle-track: #cccccc;
    --toggle-knob: #ffffff;
}

/* Dark mode — activated by [data-theme="dark"] on <html> */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-page: #0a0a0b;
    --bg-surface: #111113;
    --bg-hover: #1a1a1c;
    --bg-active: #242426;
    --bg-elevated: #1a1a1c;
    --bg-subtle: rgba(255, 255, 255, 0.06);
    --bg-subtle-hover: rgba(255, 255, 255, 0.10);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #c4c4cc;
    --text-tertiary: #9a9aa4;
    --text-muted: #707078;

    /* Accent */
    --accent: #4da6ff;
    --accent-hover: #7dbdff;
    --accent-subtle: rgba(77, 166, 255, 0.12);
    --creator-accent-light: rgba(167, 139, 250, 0.14);
    --creator-accent-text: #c4b5fd;

    /* Status */
    --success: #3fb950;
    --success-light: rgba(63, 185, 80, 0.15);
    --warning: #d29922;
    --warning-light: rgba(210, 153, 34, 0.15);
    --error: #f85149;
    --error-light: rgba(248, 81, 73, 0.15);

    /* Borders */
    --border-light: rgba(255, 255, 255, 0.08);
    --border: var(--border-light);
    --border-medium: rgba(255, 255, 255, 0.12);
    --border-heavy: rgba(255, 255, 255, 0.20);

    /* Shadows (deeper in dark mode) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.50);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.30);

    /* Danger hover */
    --danger-bg: rgba(248, 81, 73, 0.12);
    --danger-bg-hover: rgba(248, 81, 73, 0.20);
    --danger-text: #f85149;

    /* Inverted (flipped in dark mode) */
    --bg-inverted: #e0e0e0;
    --text-on-inverted: #111113;

    /* Tones: a dark tint of the colour (its 500 shade at 16%) behind a light foreground (300,
       or 400 for green and orange), so a tile reads as that colour without glowing. Every
       foreground clears 4.5:1 on its tile over any dark surface (--bg-page to --bg-active). */
    --tone-blue-bg: rgba(59, 130, 246, 0.16);
    --tone-blue-fg: #93c5fd;
    --tone-green-bg: rgba(34, 197, 94, 0.16);
    --tone-green-fg: #4ade80;
    --tone-purple-bg: rgba(168, 85, 247, 0.16);
    --tone-purple-fg: #d8b4fe;
    --tone-orange-bg: rgba(249, 115, 22, 0.16);
    --tone-orange-fg: #fb923c;
    --tone-red-bg: rgba(239, 68, 68, 0.16);
    --tone-red-fg: #fca5a5;
    --tone-amber-bg: rgba(245, 158, 11, 0.16);
    --tone-amber-fg: #fcd34d;
    --tone-pink-bg: rgba(236, 72, 153, 0.16);
    --tone-pink-fg: #f9a8d4;
    --tone-cyan-bg: rgba(6, 182, 212, 0.16);
    --tone-cyan-fg: #67e8f9;

    /* Toggle controls */
    --toggle-track: #555560;
    --toggle-knob: #ffffff;

    color-scheme: dark;
}
/* tokens/typography.css */
/* Ada Webapp Tokens - Typography */
:root {
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* The Learning mode's heavier weights (the admin stops at 700): card and hero titles take
       --font-weight-extrabold, a hero figure (your rank) --font-weight-black. */
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
}
/* tokens/spacing.css */
/* Ada Webapp Tokens - Spacing & Sizing */
:root {
    /* Radius scale. --radius is the default (cards, panels) and stays an alias of --radius-lg. */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
    --radius: var(--radius-lg);
    --topbar-height: 56px;
    --sidebar-expanded-width: 240px;
    --sidebar-collapsed-width: 64px;
    --sidebar-drawer-width: 280px;
    --sidebar-width: var(--sidebar-expanded-width);
    --sidebar-transition: 0.25s ease;
}

/* Component modules live in ./components. The app serves this file with every import inlined in
   place (WebApp/StylesheetBundles.cs), so a page makes one stylesheet request: an imported file may
   not @import, and below css/ no url() may be relative. components/console.css is the one not
   imported here: the operator console's stylesheet is this file followed by it (ada-console.css). */
/* Design tokens live in ./tokens */

/* ========================================
   RESET & BASE
   ======================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Pages hide things with the hidden attribute; a component's own display (flex, grid) must not
   bring them back. */
[hidden] { display: none !important; }

body {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    /* No --sidebar-width here. Its default lives on :root (tokens/spacing.css) and the
       responsive and preference rules set it on body. This rule comes after every @import, so
       a declaration here beat responsive.css's medium-width `body { collapsed }` at equal
       specificity: the sidebar hid its labels but kept the expanded width (#9/#33). */
}

/* A link with no component class of its own would otherwise take the browser's
   #0000ee: "Make it personal instead", "Back to Help & Support" and others did.
   Standalone links ("View all", "Manage") read like the design system's action links;
   a link inside running text stays underlined so colour is not its only cue. A link that is a
   button (.ada-btn) keeps its button's colours under the pointer: this hover once turned a
   primary link-button's text the colour of its own hover background. :where() keeps the
   hover's specificity what it was, so a component's own link hover still wins. */
a { color: var(--accent); text-decoration: none; }
a:where(:not(.ada-btn)):hover { color: var(--accent-hover); text-decoration: underline; }
p a, li a { text-decoration: underline; }
/* components/console.css */
/* ========================================
   CONSOLE (staff console frame)
   ========================================
   The operator console (its own host, OperatorConsoleLayout.cs) wears the web app's shell: .ada-topbar,
   .ada-sidebar, .ada-nav-link, .ada-main. What a staff console adds is here: a sidebar
   section whose pages open in a flyout, and the sheet the page bodies sit on.

   The page bodies are still C# strings with their own <style> blocks (AGENCY-727 phase 2
   moves them onto components). Until then .ada-console-body keeps them as they were
   written: light, 13px, and with the browser's own margins and padding, which ada.css's
   reset would otherwise take away. Remove each rule here as the last body that needs it
   moves. */

/* A section (CRM, Support, Ops...): its trigger is a nav link, its pages a flyout beside
   the sidebar. console.js opens it on hover, focus or a tap and sets --ada-flyout-top
   to the trigger's top, because the sidebar's nav scrolls and would clip a flyout inside it. */
.ada-console-nav-group { position: relative; }

.ada-console-nav-trigger {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.ada-console-nav-trigger.ada-active { color: var(--text-primary); }
.ada-console-nav-trigger.ada-active i { opacity: 1; }

.ada-console-nav-chevron { font-size: 10px; opacity: 0.5; }

.ada-console-flyout {
    display: none;
    position: fixed;
    top: var(--ada-flyout-top, var(--topbar-height));
    left: calc(var(--sidebar-width) - 8px);
    min-width: 200px;
    padding: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 950;
}

/* A bridge across the gap, so the pointer can travel from the trigger to the flyout. */
.ada-console-flyout::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    width: 24px;
    height: 100%;
}

.ada-console-nav-group.ada-open > .ada-console-flyout { display: block; }

.ada-console-flyout-title {
    padding: 6px 10px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
}

.ada-console-flyout-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
}

.ada-console-flyout-link i { width: 16px; font-size: 13px; text-align: center; opacity: 0.7; }

.ada-console-flyout-link:hover,
.ada-console-flyout-link:focus-visible {
    color: var(--text-primary);
    background: var(--bg-hover);
    text-decoration: none;
}

.ada-console-flyout-link.ada-active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.ada-console-flyout-link.ada-active i { opacity: 1; }

/* The top bar's actions are buttons as well as links. */
button.ada-topbar-create { border: none; font-family: inherit; cursor: pointer; }

/* The staff-console marker (OperatorConsoleLayout.StaffConsoleMarker): the operator console changes real
   customers' data, so it says so. A strip of the environment's colour runs along the top bar, and
   a "Staff console" badge with the environment sits beside the logo and in the phone drawer. */
.ada-console-env--production { --console-env: var(--palette-amber-500); }
.ada-console-env--development { --console-env: var(--palette-purple-500); }
.ada-console-env--test { --console-env: var(--tone-cyan-fg); }

.ada-operator-console .ada-topbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--console-env);
}

.ada-console-marker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    white-space: nowrap;
}

.ada-console-marker .ada-badge i { margin-right: 2px; }

/* The drawer's header (a phone) has the marker on the left and its close button on the right. */
.ada-operator-console .ada-sidebar-drawer-header { justify-content: space-between; }
.ada-sidebar-drawer-header .ada-console-marker { margin-left: 0; }

@media (max-width: 767px) {
    /* The top bar keeps "Staff console"; the environment is in the drawer. */
    .ada-topbar .ada-console-marker-env { display: none; }
    .ada-topbar .ada-console-marker { margin-left: 4px; }
}

/* A record's facts as label and value (a ticket's details): labels in a column beside their
   values, and above them on a phone, where a long email or note would run off a table. */
.ada-console-facts {
    display: grid;
    grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
    gap: 12px 24px;
    margin: 0;
    padding: 16px 20px;
}

.ada-console-facts dt {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
}

.ada-console-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 767px) {
    .ada-console-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .ada-console-facts dd { margin-bottom: 12px; }
}

/* Before the console (sign-in, a refusal): the strip along the top of the page, and the marker
   centred under the logo. */
.ada-auth-page.ada-operator-console::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--console-env);
}

.ada-auth-container > .ada-console-marker {
    display: flex;
    justify-content: center;
    margin: -32px 0 32px;
}

/* A stack trace on the operator console's error page: monospaced, kept as written, scrolling sideways. */
.ada-console-trace {
    margin-top: 8px;
    padding: 12px 16px;
    max-height: 480px;
    overflow: auto;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre;
}

/* Text shown as written (an article's Markdown): line breaks kept, long lines wrapped, and a long
   text scrolls inside its card. */
.ada-console-source {
    margin: 0;
    padding: 16px 20px;
    max-height: 500px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A generated video on its job's page (Video jobs): as wide as its card, up to 640px, never
   its own (often 1920px) width. */
.ada-console-video {
    display: block;
    width: 100%;
    max-width: 640px;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

/* The sheet the page body sits on. */
.ada-console-body {
    margin: 0 24px 24px 0;
    padding: 20px 24px;
    max-width: 1800px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    /* The sheet is light in either theme (data-theme='light'), so are its native controls. */
    color-scheme: light;
    font-size: 13px;
    line-height: 1.4;
    /* A body wider than the screen (a wide table) scrolls inside the sheet rather than being
       cut off at the page's edge. */
    overflow-x: auto;
}

/* Phase 1 only: undo ada.css's `* { margin: 0; padding: 0 }` inside a body, and the element
   styles the old layout gave every page. :where() keeps them at the lowest specificity, so a
   body's own <style> still wins as it did. */
:where(.ada-console-body) * { margin: revert; padding: revert; }
/* A cell's 1px is the browser's presentational hint, not its stylesheet, so revert drops it. */
:where(.ada-console-body) :where(td, th) { padding: 1px; }
:where(.ada-console-body) h1 { margin-top: 0; font-size: 22px; font-weight: 600; }
:where(.ada-console-body) h2 { font-size: 18px; font-weight: 600; }
:where(.ada-console-body) h3 { font-size: 15px; font-weight: 600; }
:where(.ada-console-body) table { border-collapse: collapse; }
:where(.ada-console-body) th { text-align: left; font-weight: 600; }

@media (max-width: 767px) {
    .ada-console-body {
        margin: 0;
        padding: 16px;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* In the drawer a section opens in place, under its trigger. */
    .ada-console-flyout {
        position: static;
        min-width: 0;
        margin: 2px 0 6px 20px;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
    }

    .ada-console-flyout::before,
    .ada-console-flyout-title { display: none; }

    .ada-console-nav-group.ada-open .ada-console-nav-chevron { transform: rotate(90deg); }
}

/* With labels hidden (a collapsed sidebar) the chevron goes with them. */
@media (min-width: 768px) and (max-width: 1279px) {
    body:not(.ada-sidebar-pref-expanded) .ada-console-nav-chevron { display: none; }
}

@media (min-width: 1280px) {
    body.ada-sidebar-pref-collapsed .ada-console-nav-chevron { display: none; }
}