/* Global responsive baseline — applied across every page.
   * Box-sizing reset so paddings don't blow widths past their containers.
   * Images and inline SVGs cap at parent width — no horizontal overflow.
   * Long words / URLs wrap rather than punching out card edges. */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; }
:where(p, h1, h2, h3, h4, h5, li, dt, dd, td) { overflow-wrap: anywhere; }
/* Wrap any wide table in <div class="table-wrap"> to get a horizontal
   scroll on narrow viewports instead of overflowing the page. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Single-rule visibility utility used by client-side filters
   (browse-filter.js). !important so it wins over component display
   rules (.group-card uses flex). One class change per visibility flip. */
.is-hidden { display: none !important; }

/* Workspace Notes tab — sticky add form on the left, note list on the
   right. Same two-column shape as the Resources tab. */
.note-shell {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 860px) {
    .note-shell { grid-template-columns: 1fr; }
}

.note-add {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 24px;
}
.note-add__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.note-add__hint {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--color-fg-muted);
    line-height: 1.45;
}
.note-add__row { margin-bottom: 12px; }
.note-add__row label { display: block; }
.note-add__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-fg-2);
    margin-bottom: 4px;
}
.note-add__input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font: inherit;
    font-size: 14px;
    background: var(--color-bg-soft);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.note-add__input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-bg);
    box-shadow: 0 0 0 3px rgba(244, 168, 42, 0.12);
}
textarea.note-add__input { resize: vertical; min-height: 120px; font-family: inherit; }
.note-add__foot { display: flex; justify-content: flex-end; margin-top: 4px; }

.note-list { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.note-list__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.note-list__head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.note-list__count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-fg-subtle);
}

.note-empty {
    padding: 32px 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-fg-muted);
    font-size: 14px;
}

.note-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.note-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.note-card__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.note-card__title {
    margin: 0;
    flex: 1 1 auto;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--color-fg);
    line-height: 1.3;
    word-break: break-word;
}
.note-card__actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}
.note-card__actions .btn { padding: 6px 12px; font-size: 14px; }
.note-card__body {
    margin: 0 0 16px;
    font-size: 16.5px;
    color: var(--color-fg-2);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.note-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}
.note-card__byline { font-size: 13.5px; color: var(--color-fg-subtle); }
.note-card__byline a {
    color: var(--color-fg-muted);
    font-weight: 600;
    text-decoration: none;
}
.note-card__byline a:hover { color: var(--color-accent-deep); }
.note-card__edited { color: var(--color-fg-subtle); font-style: italic; }

/* Workspace Resources tab — add form + shared link list */
.resource-shell {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 860px) {
    .resource-shell { grid-template-columns: 1fr; }
}

.resource-add {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 24px;
}
.resource-add__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.resource-add__hint {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--color-fg-muted);
    line-height: 1.45;
}
.resource-add__row { margin-bottom: 12px; }
.resource-add__row label { display: block; }
.resource-add__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-fg-2);
    margin-bottom: 4px;
}
.resource-add__label-aux {
    font-weight: 400;
    color: var(--color-fg-subtle);
}
.resource-add__input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font: inherit;
    font-size: 14px;
    background: var(--color-bg-soft);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.resource-add__input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-bg);
    box-shadow: 0 0 0 3px rgba(244, 168, 42, 0.12);
}
textarea.resource-add__input { resize: vertical; min-height: 56px; }
.resource-add__foot { display: flex; justify-content: flex-end; margin-top: 4px; }

.resource-list { min-width: 0; }
.resource-list__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.resource-list__head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.resource-list__count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-fg-subtle);
}

.resource-empty {
    padding: 32px 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--color-fg-muted);
    font-size: 14px;
}

/* Tile grid — each resource is a square-ish card. auto-fill keeps the
   layout responsive: tiles flow into as many columns as fit, minimum
   ~220px wide, equal share of remaining width. */
.resource-tiles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.resource-tile {
    position: relative;
    min-height: 280px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}
.resource-tile:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.resource-tile__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    color: inherit;
    text-decoration: none;
    gap: 12px;
}
.resource-tile__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-fg-muted);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.resource-tile__icon { font-size: 17px; line-height: 1; }
.resource-tile__host {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.resource-tile__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--color-fg);
    line-height: 1.3;
    /* Up to 3 lines, ellipsis after — keeps the tile rectangle predictable. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.resource-tile:hover .resource-tile__title { color: var(--color-accent-deep); }
.resource-tile__desc {
    margin: 0;
    font-size: 15px;
    color: var(--color-fg-2);
    line-height: 1.6;
    flex: 1 1 auto;
    /* Up to 3 lines of notes before truncation — leaves room for the foot. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.resource-tile__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    min-width: 0;
}
.resource-tile__foot-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.resource-tile__adder {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-fg-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resource-tile__time {
    font-size: 12.5px;
    color: var(--color-fg-subtle);
}

/* Edit + remove buttons — float top-right, on top of the tile's anchor.
   `position: absolute` takes them out of the link's flow so the click
   doesn't bubble up to the anchor. */
.resource-tile__actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    z-index: 2;
}
.resource-tile__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-fg-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.resource-tile:hover .resource-tile__action-btn,
.resource-tile__action-btn:focus-visible { opacity: 1; }
.resource-tile__action-btn:hover {
    background: var(--color-bg-soft);
    color: var(--color-fg);
    border-color: var(--color-border-strong);
}
.resource-tile__action-btn--danger:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-color: rgba(224, 69, 69, 0.32);
}

/* Confirm dialog — built on native <dialog>. Wired by
   /js/confirm-dialog.js; styled here so it sits naturally in the design
   system instead of looking like a browser default. */
.confirm-dialog {
    border: 1px solid var(--color-border-strong, #D4D4CD);
    border-radius: 14px;
    background: var(--color-bg, #FFFFFF);
    color: var(--color-fg, #0B1020);
    padding: 24px 26px;
    max-width: 440px;
    width: calc(100vw - 32px);
    box-shadow: 0 18px 40px rgba(11, 16, 32, 0.18);
    font-family: inherit;
}
.confirm-dialog::backdrop {
    background: rgba(11, 16, 32, 0.45);
    backdrop-filter: blur(2px);
}
.confirm-dialog__title {
    margin: 0 0 8px;
    font-family: var(--font-display, inherit);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-fg, #0B1020);
}
.confirm-dialog__body {
    margin: 0 0 20px;
    color: var(--color-fg-muted, #5C6781);
    font-size: 14px;
    line-height: 1.55;
}
.confirm-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* The HTML5 `hidden` attribute has the default `display: none`, but a
   class with an explicit `display:` rule outranks it on specificity —
   notably .chat (display: flex) on the workspace's chat panel. That
   meant switching to the Members tab left the chat visible underneath,
   showing chat-and-members at once. Force `hidden` to always win. */
[hidden] { display: none !important; }

.browse-empty {
  padding: 32px 16px;
  border: 1px dashed var(--color-border, #E5E8EE);
  border-radius: 12px;
  text-align: center;
  color: var(--color-fg-muted, #6B7A90);
}

/* ============================================================
   Global header search — input + autocomplete dropdown.
   The wrapper is position:relative so the absolutely-positioned
   panel anchors below the input regardless of header layout.
   ============================================================ */
.search-box {
  position: relative;
  flex: 1 1 320px;
  max-width: 520px;
  margin: 0 18px;
}
/* The FORM is styled as the visible "input" — pill border, pill bg, focus
   ring. The actual <input> is borderless/transparent. This way every child
   (icon, input, clear/shortcut) is a flex sibling that vertical-centers
   automatically — no absolute-positioning math, no top/transform tweaks. */
.search-box__form {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #E5E8EE);
  background: var(--color-bg-soft, #F7F8FA);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.search-box__form:focus-within {
  border-color: var(--color-accent, #F4A82A);
  background: var(--color-bg, #fff);
  box-shadow: 0 0 0 3px rgba(244, 168, 42, 0.18);
}
/* Magnifier-as-submit-button. Looks like the bare icon (no chrome) but
   is a real <button>, so clicking submits the form to /search?q=… and
   the icon is keyboard-reachable. Hover/focus get a subtle nudge so users
   know it's actionable. */
.search-box__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-fg-muted, #6B7A90);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.12s ease;
}
.search-box__submit:hover  { color: var(--color-fg, #0E1A2E); background: var(--color-border, #E5E8EE); }
.search-box__submit:focus-visible { outline: 2px solid var(--color-accent, #F4A82A); outline-offset: 2px; }
.search-box__form:focus-within .search-box__submit { color: var(--color-fg, #0E1A2E); }

.search-box__icon {
  display: block;             /* kill inline baseline gap */
  width: 16px;
  height: 16px;
  pointer-events: none;       /* clicks pass through to the button */
}

.search-box__input {
  flex: 1 1 auto;
  min-width: 0;               /* let it shrink inside the flex line */
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-fg, #0E1A2E);
}
.search-box__input::placeholder { color: var(--color-fg-muted, #6B7A90); }
.search-box__input::-webkit-search-cancel-button { display: none; }   /* we render our own */

.search-box__shortcut {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border, #E5E8EE);
  border-radius: 6px;
  background: var(--color-bg, #fff);
  color: var(--color-fg-muted, #6B7A90);
  font-family: var(--font-mono, JetBrains Mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
}
.search-box__form:focus-within .search-box__shortcut { display: none; }

.search-box__clear {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-border, #E5E8EE);
  color: var(--color-fg, #0E1A2E);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease;
}
.search-box__clear:hover { background: #D7DBE3; }

/* Dropdown */
.search-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #E5E8EE);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(14, 26, 46, 0.14), 0 2px 6px rgba(14, 26, 46, 0.06);
  z-index: 50;
  padding: 8px 0;
  animation: search-panel-in 120ms ease-out;
}
@keyframes search-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-panel__group {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-fg-muted, #6B7A90);
  padding: 12px 16px 6px;
}
.search-panel__item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.08s ease;
}
.search-panel__item:hover,
.search-panel__item.is-active {
  background: var(--color-bg-soft, #F7F8FA);
}
.search-panel__icon  { font-size: 18px; line-height: 1; text-align: center; }
.search-panel__label { color: var(--color-fg, #0E1A2E); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-panel__sub   { color: var(--color-fg-muted, #6B7A90); font-size: 12px; white-space: nowrap; }

.search-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin-top: 6px;
  border-top: 1px solid var(--color-border, #E5E8EE);
  font-size: 12px;
  color: var(--color-fg-muted, #6B7A90);
}
.search-panel__footer a {
  color: var(--color-accent-strong, #B5780E);
  text-decoration: none;
  font-weight: 600;
}
.search-panel__footer a:hover { text-decoration: underline; }
.search-panel__footer-keys kbd {
  font-family: var(--font-mono, JetBrains Mono, monospace);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--color-border, #E5E8EE);
  border-radius: 4px;
  margin: 0 2px;
}

.search-panel__empty {
  padding: 22px 14px;
  color: var(--color-fg-muted, #6B7A90);
  font-size: 13px;
  text-align: center;
}
.search-panel__empty strong { color: var(--color-fg, #0E1A2E); font-weight: 600; }

/* Full /search results page */
.search-page { padding: 36px 0 80px; max-width: 880px; }
.search-page__head h1 { margin: 0 0 8px; font-size: 28px; }
.search-page__q {
  background: var(--color-accent-soft, #FEF3D8);
  color: var(--color-fg, #0E1A2E);
  padding: 1px 8px;
  border-radius: 6px;
  font-weight: 600;
}
.search-page__section { margin-top: 32px; }
.search-page__section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-fg-muted, #6B7A90);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-page__section-icon { font-size: 16px; }
.search-page__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--color-border, #E5E8EE);
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-bg, #fff);
}
.search-page__row {
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-border, #E5E8EE);
  transition: background 0.1s ease;
}
.search-page__list .search-page__row:last-child { border-bottom: 0; }
.search-page__row:hover { background: var(--color-bg-soft, #F7F8FA); }
.search-page__row-icon { font-size: 22px; text-align: center; }
.search-page__row-avatar {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-soft, #FEF3D8);
  color: var(--color-fg, #0E1A2E);
  font-weight: 700; font-size: 12px;
}
.search-page__row-text { min-width: 0; }
.search-page__row-label { font-weight: 600; color: var(--color-fg, #0E1A2E); }
.search-page__row-sub   { color: var(--color-fg-muted, #6B7A90); font-size: 13px; margin-top: 2px; }
.search-page__row-arrow { color: var(--color-fg-muted, #6B7A90); font-size: 18px; }

/* Narrow tablet / mobile: progressively hide non-essential header items so
   the search box keeps a usable width and Log out never gets pushed out.
   Priority preserved: logo > search > Log out > Dashboard > locale > nav. */

@media (max-width: 900px) {
  .site-header__inner { gap: 12px; }
  .site-nav            { display: none; }                /* search owns the middle */
  .search-box          { flex: 1 1 auto; min-width: 140px; margin: 0; max-width: none; }
  .search-box__shortcut{ display: none; }
  /* Collapse the locale switcher to an icon-only trigger so it stays
     reachable on phones without crowding the auth CTAs. The dropdown
     panel still expands to a normal width when opened. */
  .locale-switcher__label { display: none; }
}

@media (max-width: 640px) {
  .site-header__inner          { gap: 8px; }
  .brand span                  { display: none; }        /* logo only — saves ~110px */
  .site-header__cta a[href="/app/home"] { display: none; } /* drop Dashboard btn — search/sidebar cover it */
  .site-header__cta .btn       { padding: 0 12px; font-size: 13px; height: 34px; }
  .search-box                  { min-width: 100px; }
}

@media (max-width: 380px) {
  .site-header__inner { padding: 0 4px; gap: 6px; }
  .search-box         { min-width: 80px; }
}

/* App topbar — slim bar at the top of every /app/* main column. Hosts
   the search box so it's reachable from any authenticated page. */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--color-bg, #fff);
  border-bottom: 1px solid var(--color-border, #E5E8EE);
  position: sticky;
  top: 0;
  z-index: 30;
}
.app-topbar .search-box { flex: 1 1 auto; max-width: 560px; margin: 0; }
@media (max-width: 760px) {
  .app-topbar { padding: 10px 14px; }
}

/* ============================================================
   GroupStudy — design system v2
   ============================================================
   Modernized for an AI-product feel: dark hero, refined whites,
   pill CTAs, gradient text accents, generous whitespace, thin
   single-line dividers, subtle hover-glow on cards, and a few
   ambient gradient washes on key surfaces.

   Layered structure, top to bottom:
     1.  Tokens         (:root)
     2.  Reset + base   (html, body, h*, p, a, code)
     3.  Layout         (.container, .stack, .section)
     4.  Header & nav
     5.  Buttons & pills
     6.  Hero (dark)
     7.  Section primitives (eyebrow, gradient text, dividers)
     8.  Cards (discipline, group, field, hero-chip)
     9.  How-it-works
     10. Forms & auth
     11. Onboarding
     12. Group detail / panels / avatars
     13. Pricing
     14. App shell + workspace + chat
     15. Profile
     16. Footer
     17. Animations + utilities
     18. Responsive
   ============================================================ */

:root {
    /* Surfaces — warmer/cooler whites for layered depth.
       Phase 16 bugfix — --color-bg-soft was #FAFAF7 (basically white);
       users reading the in-app pages couldn't tell the workspace canvas
       apart from a white card, so the empty area below short content
       looked like a layout break. #F1F2F5 is a real, visible soft-gray
       (Tailwind's gray-100 territory) — gives the in-app canvas a clear
       boundary against white cards without going so dark it competes
       with content. */
    --color-bg:            #FFFFFF;
    --color-bg-soft:       #F1F2F5;
    --color-surface:       #F4F5F2;
    --color-surface-2:     #ECEEEA;
    --color-elevated:      #FFFFFF;

    /* Text */
    --color-fg:            #0B1020;       /* near-black ink */
    --color-fg-2:          #1F2A3F;
    --color-fg-muted:      #5C6781;
    --color-fg-subtle:     #8C95AA;

    /* Brand accent — amber lightbulb */
    --color-accent:        #F4A82A;
    --color-accent-2:      #FFC04D;
    --color-accent-hover:  #DC9418;
    --color-accent-deep:   #B5780E;
    --color-accent-soft:   #FFF0CC;
    --color-accent-glow:   rgba(244, 168, 42, 0.35);

    /* Cool secondary used in gradient accents */
    --color-cool:          #6E8DFF;
    --color-cool-soft:     #E9EFFF;

    /* Status */
    --color-success:       #18A957;
    --color-success-soft:  #D7F4E2;
    --color-warning:       #E89621;
    --color-warning-soft:  #FFE9C2;
    --color-danger:        #E04545;
    --color-danger-soft:   #FBDFDF;

    /* Borders */
    --color-border:        #E8E8E2;
    --color-border-strong: #D4D4CD;
    --color-border-dark:   rgba(255, 255, 255, 0.08);

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 9999px;

    /* Shadows — softer, more layered */
    --shadow-sm:   0 1px 2px rgba(11, 16, 32, 0.04);
    --shadow-md:   0 4px 14px rgba(11, 16, 32, 0.05);
    --shadow-lg:   0 18px 40px rgba(11, 16, 32, 0.08);
    --shadow-glow: 0 0 0 6px rgba(244, 168, 42, 0.10);

    /* Type stack */
    --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

    /* Layout rhythm */
    --container-max: 1180px;
    --container-pad: 28px;
    --section-gap:   96px;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #F4A82A 0%, #FFD37A 100%);
    --gradient-text:  linear-gradient(120deg, #0B1020 0%, #2B3654 50%, #B5780E 100%);
    --gradient-cool:  linear-gradient(135deg, #6E8DFF 0%, #B6C4FF 100%);
    --gradient-dark:  radial-gradient(1200px 600px at 80% -20%, rgba(244, 168, 42, 0.15), transparent 60%),
                      radial-gradient(900px 500px at -10% 30%, rgba(110, 141, 255, 0.18), transparent 60%),
                      linear-gradient(180deg, #0B1020 0%, #11172B 100%);
}

* { box-sizing: border-box; }

/* Reverses the inline `body{visibility:hidden}` in the head fragment —
   see the FOUC guard comment in templates/fragments/layout.html. */
body { visibility: visible; }

html, body {
    margin: 0;
    padding: 0;
    /* Phase 16 bugfix — body bg matches the workspace's soft-gray, not pure
       white. Avoids the jarring "page goes white below the app-shell" effect
       on tall viewports when the user scrolls past the chat / file tree.
       Marketing pages still have their own card chrome on top so this is
       invisible to them. */
    background: var(--color-bg-soft);
    color: var(--color-fg);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Phase 16 bugfix — make sure the app-shell itself is at least viewport-tall
   even when its content is short (e.g. an empty chat panel). Without this,
   on tall viewports the dark sidebar background ends before the bottom of
   the page and the body bg leaks through. */
html, body { min-height: 100vh; }

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

a:hover { color: var(--color-accent-deep); }

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

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-fg);
    margin: 0 0 0.4em;
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 700;
}

h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.03em; }
h3 { font-size: 20px; }
h4 { font-size: 17px; font-weight: 600; }

p { margin: 0 0 1em; color: var(--color-fg-2); }

code, pre {
    font-family: var(--font-mono);
    font-size: 13px;
}

pre {
    background: #0B1020;
    color: #D5DAE8;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 10px 0;
    line-height: 1.55;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

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

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.container-narrow {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.muted   { color: var(--color-fg-muted); }
.subtle  { color: var(--color-fg-subtle); }
.center  { text-align: center; }

.stack > * + * { margin-top: 14px; }
.stack-lg > * + * { margin-top: 28px; }

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

.spacer { flex: 1; }

.section {
    padding: var(--section-gap) 0;
    position: relative;
}

.section + .section { padding-top: 0; }

.section-tight { padding: 56px 0; }

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
    border: 0;
    margin: 24px 0;
}

/* ============================================================
   Marketing header
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(232, 232, 226, 0.7);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 68px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-fg);
    letter-spacing: -0.02em;
}

.site-nav {
    display: flex;
    gap: 28px;
    margin-left: 12px;
}

.site-nav a {
    color: var(--color-fg-muted);
    font-weight: 500;
    font-size: 14.5px;
    position: relative;
}

.site-nav a:hover { color: var(--color-fg); }

.site-header__cta {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ============================================================
   Buttons & pills
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.05s ease, box-shadow 0.18s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    /* No transform / box-shadow on disabled — looks static. */
    box-shadow: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; }

.btn-primary {
    background: var(--color-fg);
    color: #FFFFFF;
    border-color: var(--color-fg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, var(--shadow-md);
}
.btn-primary:hover {
    background: #1A2237;
    color: #FFFFFF;
    box-shadow: var(--shadow-lg);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-fg);
    border-color: var(--color-accent);
}
.btn-accent:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn-secondary {
    background: var(--color-bg);
    color: var(--color-fg);
    border-color: var(--color-border-strong);
}
.btn-secondary:hover {
    background: var(--color-surface);
}

.btn-ghost {
    background: transparent;
    color: var(--color-fg);
    padding: 10px 14px;
}
.btn-ghost:hover {
    background: var(--color-surface);
}

.btn-block { width: 100%; }

.btn-lg {
    padding: 14px 26px;
    font-size: 15.5px;
}

.btn-on-dark {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
}
.btn-on-dark:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
}

.btn-primary-on-dark {
    background: var(--color-accent);
    color: var(--color-fg);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0 var(--color-accent-glow);
}
.btn-primary-on-dark:hover {
    background: var(--color-accent-2);
    color: var(--color-fg);
    box-shadow: 0 0 0 8px var(--color-accent-glow);
}

/* Status / signal pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-fg-muted);
    font-weight: 500;
}

.pill-on-dark {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.84);
}

.pill .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 0 rgba(24, 169, 87, 0.55);
    animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(24, 169, 87, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(24, 169, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(24, 169, 87, 0); }
}

/* ============================================================
   Hero — DARK ambient gradient panel (the AI-product signature)
   ============================================================ */

.hero {
    position: relative;
    background: var(--gradient-dark);
    color: #FFFFFF;
    padding: 96px 0 112px;
    overflow: hidden;
    isolation: isolate;
}

/* Subtle grid texture overlay so the dark surface has depth */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
    z-index: -1;
    pointer-events: none;
}

.hero h1 {
    color: #FFFFFF;
    max-width: 18ch;
    margin: 0 0 0.3em;
}

.hero h1 .grad {
    background: linear-gradient(120deg, #FFD37A 0%, #F4A82A 60%, #FFE7B3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline;
}

.hero__lede {
    max-width: 56ch;
    font-size: 19px;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 22px;
}

.hero__ctas {
    display: flex;
    gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.hero__signals {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.hero__chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 64px;
}

.hero-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    color: #FFFFFF;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    backdrop-filter: blur(8px);
    text-align: left;
    display: block;
}

.hero-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.hero-chip__icon {
    font-size: 22px;
    margin-bottom: 10px;
    color: #FFFFFF;
}

.hero-chip__name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
    color: #FFFFFF;
}

.hero-chip__meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
}

/* ============================================================
   Section primitives
   ============================================================ */

.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent-deep);
    margin-bottom: 14px;
}

.eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--color-accent);
}

.eyebrow-on-dark {
    color: var(--color-accent-2);
}

.eyebrow-on-dark::before {
    background: var(--color-accent-2);
}

.grad-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

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

/* Tech-discipline grid */
.discipline-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.discipline-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px 22px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.discipline-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.discipline-card:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.discipline-card:hover::after { transform: scaleX(1); }

.discipline-card__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-accent-soft);
    color: var(--color-accent-deep);
    font-size: 18px;
    margin-bottom: 16px;
}

.discipline-card__name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--color-fg);
}

.discipline-card__count {
    color: var(--color-fg-muted);
    font-size: 13px;
}

/* Field chips */
.field-chip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.field-chip {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.field-chip__icon { font-size: 18px; }

.field-chip:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-1px);
}

/* Group cards */
.group-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Scroll variant — used by the dashboard's "Groups you created" /
   "Groups you joined" panels so a user in many groups doesn't push the
   rest of the page off-screen. Caps each section at roughly 3 cards
   tall; the rest scrolls. The padding-right keeps the scrollbar from
   crowding the card's right border. */
.group-list--scroll {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 6px;
    /* Thin, subtle scrollbar — keeps the dashboard feel calm. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.group-list--scroll::-webkit-scrollbar { width: 8px; }
.group-list--scroll::-webkit-scrollbar-track { background: transparent; }
.group-list--scroll::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 8px;
}
.group-list--scroll::-webkit-scrollbar-thumb:hover { background: var(--color-fg-subtle); }

.group-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.group-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.group-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.group-card__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 17px;
    color: var(--color-fg);
}

.group-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-deep);
    font-size: 16px;
}

.group-card__discipline {
    font-size: 13px;
    color: var(--color-fg-muted);
    margin-top: 4px;
}

.group-card__desc {
    margin-top: 12px;
    color: var(--color-fg-2);
    font-size: 14.5px;
    line-height: 1.6;
}

.group-card__meta {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-fg-muted);
    flex-wrap: wrap;
}

.group-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.group-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    gap: 12px;
}

/* Per-card action row — Join + View (or Open workspace + View, or
   "Group full" pill + View). flex-wrap so on a narrow card the two
   actions stack instead of overflowing the foot. */
.group-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.group-card__actions form { margin: 0; }
.group-card__full-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8B1F1F;
    background: var(--color-danger-soft);
    border: 1px solid rgba(224, 69, 69, 0.20);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    cursor: default;
    user-select: none;
}

.tag-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.tag {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-fg);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
}

/* Capacity badge — color reflects fullness */
.capacity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.capacity::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.capacity.open       { background: var(--color-success-soft); color: #056B36; border-color: rgba(24, 169, 87, 0.18); }
.capacity.almost-full{ background: var(--color-warning-soft); color: #8B5A0A; border-color: rgba(232, 150, 33, 0.22); }
.capacity.full       { background: var(--color-danger-soft);  color: #8B1F1F; border-color: rgba(224, 69, 69, 0.20); }

/* ============================================================
   How-it-works
   ============================================================ */

.howto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 12px;
}

.howto-step {
    padding: 28px 26px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.howto-step:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
}

.howto-step__num {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: var(--color-fg);
    color: var(--color-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: 18px;
}

.howto-step h3 {
    font-size: 19px;
    margin-bottom: 6px;
}

.howto-step p { margin: 0; color: var(--color-fg-muted); }

/* ============================================================
   Browse layout
   ============================================================ */

.browse {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: 36px;
    padding: 40px 0 80px;
}

.filter-rail {
    position: sticky;
    top: 92px;
    align-self: start;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px;
    /* Cap the rail to the viewport below the sticky offset so its own
       content is reachable when there are many filters; the rail scrolls
       internally and the page scroll is left to the group list on the right. */
    max-height: calc(100vh - 92px - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.filter-rail h4 {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-fg-muted);
    margin: 18px 0 10px;
}

.filter-rail h4:first-child { margin-top: 0; }

.filter-rail label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 14px;
    cursor: pointer;
    color: var(--color-fg-2);
}

.filter-rail label:hover { color: var(--color-fg); }

/* Field filter — single-select pill group. The radio is visually hidden;
   its label renders as a pill, and :checked drives the active amber state. */
.filter-tabs { display: flex; flex-direction: column; gap: 6px; }
.filter-tab { position: relative; }
.filter-tab input { position: absolute; opacity: 0; pointer-events: none; }
.filter-tab span {
    display: block; padding: 7px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); font-size: 14px;
    color: var(--color-fg-2); cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.filter-tab span:hover { border-color: var(--color-border-strong); color: var(--color-fg); }
.filter-tab input:checked + span {
    background: var(--color-accent-soft); border-color: var(--color-accent);
    color: var(--color-fg); font-weight: 600;
}
.filter-tab input:focus-visible + span {
    outline: 2px solid var(--color-accent); outline-offset: 2px;
}

/* Filter rail collapses to a tap-to-open "Filters" package on mobile via a
   pure-CSS checkbox hack. On desktop the toggle + label are hidden and the
   body is always shown; the max-width:960px block below flips that. */
.filter-rail__toggle  { display: none; }
.filter-rail__summary { display: none; }
.filter-rail__body    { display: block; }
.filter-rail__icon,
.filter-rail__chevron { width: 18px; height: 18px; flex: 0 0 auto; }

.browse-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 22px;
}

/* ============================================================
   Forms & auth
   ============================================================ */

.auth-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: var(--shadow-lg);
    margin-top: 56px;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}

.auth-brand span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.auth-card h2 {
    text-align: center;
    margin-bottom: 28px;
}

.oauth-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    color: var(--color-fg);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.oauth-btn:hover {
    background: var(--color-surface);
    border-color: var(--color-fg-subtle);
}

a.oauth-btn { text-decoration: none; }

.auth-banner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin: 0 0 14px;
    font-size: 13.5px;
}
.auth-banner--bad {
    background: var(--color-danger-soft);
    border: 1px solid rgba(224, 69, 69, 0.40);
    color: #9C1F1F;
}
.auth-banner--ok {
    background: var(--color-success-soft);
    border: 1px solid rgba(24, 169, 87, 0.40);
    color: #0E6B3C;
}

.divider-or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-fg-subtle);
    font-size: 12.5px;
    margin: 18px 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.divider-or::before, .divider-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-border);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-fg);
}

.field .hint {
    font-size: 12px;
    color: var(--color-fg-muted);
}

.input, .textarea, .select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14.5px;
    background: var(--color-bg);
    color: var(--color-fg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--color-fg);
    box-shadow: 0 0 0 4px rgba(11, 16, 32, 0.08);
}

.consent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.consent label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--color-fg);
    cursor: pointer;
}

.consent input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--color-fg);
}

.consent .doc-version {
    color: var(--color-fg-muted);
    font-size: 12px;
}

/* ============================================================
   Onboarding
   ============================================================ */

.stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 44px;
    justify-content: center;
}

.stepper__node {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stepper__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.stepper__node.active .stepper__dot {
    border-color: var(--color-fg);
    background: var(--color-fg);
    color: var(--color-bg);
}

.stepper__node.done .stepper__dot {
    border-color: var(--color-fg);
    background: var(--color-fg);
    color: var(--color-bg);
}

.stepper__label {
    font-size: 13px;
    color: var(--color-fg-muted);
    font-weight: 600;
}

.stepper__node.active .stepper__label { color: var(--color-fg); }

.stepper__line {
    flex: 0 0 32px;
    height: 1px;
    background: var(--color-border-strong);
}

.field-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    background: var(--color-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.field-card:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }

.field-card.featured {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, var(--color-accent-soft) 0%, #FFF8E5 100%);
    padding: 26px 28px;
}

.field-card__icon {
    font-size: 28px;
    flex: 0 0 auto;
}

.field-card__name {
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 2px;
}

.field-card__tagline {
    font-size: 13px;
    color: var(--color-fg-muted);
}

.field-card.featured .field-card__name { font-size: 19px; }

.field-grid-other {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

/* ============================================================
   Group detail
   ============================================================ */

.group-hero {
    padding: 32px 0 36px;
    background:
        radial-gradient(900px 380px at 100% -10%, var(--color-accent-soft), transparent 60%),
        radial-gradient(700px 320px at -10% 20%, rgba(110, 141, 255, 0.10), transparent 60%),
        var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
}

.group-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-fg-muted);
    text-decoration: none;
    padding: 6px 0;
    margin-bottom: 18px;
    transition: color 0.15s ease, transform 0.15s ease;
}
.group-hero__back:hover { color: var(--color-fg); transform: translateX(-2px); }

.group-hero__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.group-hero__title {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

.group-hero__icon {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-accent-deep);
    font-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.group-hero__title-text { min-width: 0; }

.group-hero__discipline-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
    background: var(--color-accent-soft);
    border: 1px solid rgba(244, 168, 42, 0.28);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    margin-bottom: 8px;
}

.group-hero__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 4.4vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--color-fg);
}

.group-hero__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    color: var(--color-fg-muted);
    font-size: 14px;
    margin-top: 8px;
}
.group-hero__sub-item { display: inline-flex; align-items: center; gap: 5px; }
.group-hero__sub-sep { color: var(--color-fg-subtle); }

.group-hero__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.group-hero__cta-primary { box-shadow: 0 6px 20px rgba(11, 16, 32, 0.12); }

.group-hero__waitlist-form { margin: 0; }
.group-hero__waitlist-state {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.group-hero__waitlist-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-deep);
    background: var(--color-accent-soft);
    border: 1px solid rgba(244, 168, 42, 0.32);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
}
.group-hero__waitlist-pill strong {
    font-family: var(--font-display);
    font-weight: 800;
}
.group-hero__waitlist-pill__sep {
    color: var(--color-fg-muted);
    font-weight: 500;
}
.group-hero__cta-count {
    margin-left: 8px;
    font-weight: 500;
    opacity: 0.8;
    font-size: 13px;
}

/* Hero stat tiles */
.group-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}
.hero-stat {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.hero-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--color-border-strong); }
.hero-stat__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-bottom: 6px;
}
.hero-stat__value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-fg);
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.hero-stat__value--small { font-size: 15px; font-weight: 700; }
.hero-stat__value-of { color: var(--color-fg-muted); font-weight: 600; font-size: 18px; }
.hero-stat__hint {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--color-fg-muted);
}
.hero-stat__hint--full { color: var(--color-danger); font-weight: 600; }

@media (max-width: 860px) {
    .group-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .group-hero__stats { grid-template-columns: 1fr; }
}

.group-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    padding: 40px 0 96px;
}
.group-detail-grid__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.group-detail-grid__aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

@media (min-width: 1080px) {
    .group-detail-grid__aside { position: sticky; top: 96px; align-self: start; }
}
@media (max-width: 860px) {
    .group-detail-grid { grid-template-columns: 1fr; gap: 20px; padding: 32px 0 64px; }
}

/* Lifted panel variant — used on the group detail page */
.panel--lift {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.panel--lift:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.panel--lift + .panel--lift { margin-top: 0; }

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.panel-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.005em;
    color: var(--color-fg);
}
.panel-head__hint {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-fg-subtle);
}

.group-about {
    margin: 0 0 16px;
    color: var(--color-fg-2);
    font-size: 15px;
    line-height: 1.65;
}

/* Vertical timeline (replaces flat .activity list) */
.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--color-border);
    border-radius: 2px;
}
.timeline__item {
    position: relative;
    padding: 8px 0 8px 50px;
    min-height: 40px;
}
.timeline__dot {
    position: absolute;
    left: 0;
    top: 6px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 0 0 4px var(--color-bg);
}
.timeline__dot--note     { border-color: var(--color-accent);  background: var(--color-accent-soft); }
.timeline__dot--video    { border-color: var(--color-cool);    background: var(--color-cool-soft); }
.timeline__dot--chat     { border-color: var(--color-success); background: var(--color-success-soft); }
.timeline__dot--resource { border-color: var(--color-warning); background: var(--color-warning-soft); }
.timeline__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 14px;
}
.timeline__text {
    font-size: 14.5px;
    color: var(--color-fg-2);
    line-height: 1.5;
}
.timeline__text strong { color: var(--color-fg); font-weight: 700; }
.timeline__time {
    font-size: 12.5px;
    color: var(--color-fg-subtle);
    white-space: nowrap;
}

/* Member grid (replaces .member-row of bare avatars) */
.member-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}
.member-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.member-card:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-border);
}
.member-card__text { flex: 1 1 auto; min-width: 0; }
.member-card__name {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-card__role {
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-fg-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.member-card__status { color: var(--color-success); font-weight: 600; }
.member-role {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    padding: 2px 7px;
}
.member-role--owner {
    color: var(--color-accent-deep);
    background: var(--color-accent-soft);
}

/* Workspace Members tab — list + per-row "⋯" management dropdown */
.member-mgmt-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
.member-mgmt-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}
.member-mgmt-row:hover { background: var(--color-bg-soft); }
.member-mgmt-row__meta { flex: 1 1 auto; min-width: 0; }
.member-mgmt-row__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 17px;
    color: var(--color-fg);
}
.member-mgmt-row__sub {
    font-size: 14.5px;
    color: var(--color-fg-subtle);
}
.member-mgmt-row__sub a { color: inherit; text-decoration: none; }
.member-mgmt-row__sub a:hover { color: var(--color-accent-deep); }
.member-mgmt-row__online { color: var(--color-success); font-weight: 600; }
.member-mgmt-row__pill {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    padding: 2px 7px;
}
.member-mgmt-row__pill--owner { color: var(--color-accent-deep); background: var(--color-accent-soft); }
.member-mgmt-row__pill--mod   { color: #4D5BC7; background: var(--color-cool-soft); }

/* The "⋯" dropdown — mirrors the .profile-more pattern on the profile page. */
.member-mgmt { position: relative; flex: 0 0 auto; }
.member-mgmt__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: var(--color-fg-muted);
    border: 1px solid var(--color-border);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.member-mgmt__trigger::-webkit-details-marker { display: none; }
.member-mgmt__trigger::marker { content: ""; }
.member-mgmt__trigger:hover { background: var(--color-bg); color: var(--color-fg); border-color: var(--color-border-strong); }
details[open] .member-mgmt__trigger { background: var(--color-bg); color: var(--color-fg); border-color: var(--color-border-strong); }

.member-mgmt__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.member-mgmt__form { margin: 0; }
.member-mgmt__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    color: var(--color-fg);
    transition: background 0.12s ease;
}
.member-mgmt__item:hover { background: var(--color-bg-soft); }
.member-mgmt__icon { font-size: 14px; line-height: 1; flex: 0 0 auto; width: 18px; text-align: center; }
.member-mgmt__item--danger:hover { background: var(--color-danger-soft); }
.member-mgmt__item--danger { color: var(--color-danger); }

/* App-home dashboard — split section headers ("Groups you created" /
   "Groups you joined") and inline role pill on joined-group cards. */
.dashboard-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.dashboard-section-head h3 { margin: 0; }
.dashboard-section-head__count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-fg-subtle);
}
.dashboard-role-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    padding: 2px 7px;
}
.dashboard-role-pill--mod { color: #4D5BC7; background: var(--color-cool-soft); }

/* Dashboard welcome banner — greets the user with a name + intro on the
   left and an elegant books-hero illustration on the right. The art is
   decorative (aria-hidden); on narrow viewports it drops below the text. */
.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background:
        radial-gradient(420px 220px at 92% 18%, rgba(244, 168, 42, 0.18), transparent 65%),
        radial-gradient(360px 200px at 0% 100%, rgba(110, 141, 255, 0.10), transparent 60%),
        linear-gradient(135deg, var(--color-bg-soft) 0%, var(--color-bg) 70%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 28px 28px 32px;
    margin: 0 0 24px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
}
.dashboard-welcome__text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 56ch;
}
.dashboard-welcome__title {
    margin: 6px 0 8px;
    font-family: var(--font-display);
    font-size: clamp(24px, 3.4vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-fg);
    line-height: 1.15;
}
.dashboard-welcome__intro {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: 15px;
    line-height: 1.55;
}
.dashboard-welcome__art {
    flex: 0 0 auto;
    width: 260px;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 12px 24px rgba(11, 16, 32, 0.12));
}
@media (max-width: 860px) {
    .dashboard-welcome { padding: 22px; }
    .dashboard-welcome__art { width: 180px; }
}
@media (max-width: 640px) {
    .dashboard-welcome { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
    .dashboard-welcome__art { width: 160px; align-self: flex-end; margin-top: -8px; }
}

/* "Create group" CTA — Premium-gated banner that sits at the top of
   /browse and /app/home. Two variants: the real action (amber) and an
   upsell pointing at /pricing (neutral). */
.create-group-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--color-accent-soft);
    border: 1px solid rgba(244, 168, 42, 0.32);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 0 0 18px;
    text-decoration: none;
    color: var(--color-fg);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.create-group-cta:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-accent);
}
.create-group-cta__body {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.create-group-cta__icon {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
}
.create-group-cta__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-fg);
}
.create-group-cta__desc {
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--color-fg-2);
    line-height: 1.4;
    max-width: 60ch;
}
.create-group-cta__action {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-accent-deep);
    white-space: nowrap;
}

/* Upsell variant — neutral background, less load-bearing color. */
.create-group-cta--upsell {
    background: var(--color-bg-soft);
    border-color: var(--color-border);
}
.create-group-cta--upsell:hover { border-color: var(--color-border-strong); }
.create-group-cta--upsell .create-group-cta__action { color: var(--color-fg); }

/* --- Cohort-page CTA variants (Phase 16 polish) -----------------------
   Used on /cohorts. --cohort wraps the icon in an accent badge + adds
   a left accent stripe for a touch more presence; --anon flips the
   palette to soft blue so anonymous visitors get an invitation-y read
   instead of the load-bearing amber meant for purchase-ready users. */
.create-group-cta--cohort,
.create-group-cta--anon {
    padding: 18px 22px 18px 18px;
    border-left-width: 4px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.create-group-cta--cohort {
    border-left-color: var(--color-accent);
}
.create-group-cta--cohort .create-group-cta__icon {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 22px;
    background: rgba(244, 168, 42, 0.18);
    border-radius: 12px;
}
.create-group-cta--anon {
    background: #EFF6FF;
    border-color: #BFDBFE;
    border-left-color: #2563EB;
}
.create-group-cta--anon:hover {
    border-color: #93C5FD;
    border-left-color: #1D4ED8;
}
.create-group-cta--anon .create-group-cta__icon {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 22px;
    background: rgba(37, 99, 235, 0.12);
    border-radius: 12px;
}
.create-group-cta--anon .create-group-cta__title  { color: #1E3A8A; }
.create-group-cta--anon .create-group-cta__action {
    color: #1D4ED8;
    background: #DBEAFE;
    border-radius: 999px;
    padding: 8px 14px;
    transition: background 0.15s ease;
}
.create-group-cta--anon:hover .create-group-cta__action { background: #BFDBFE; }
.create-group-cta--cohort .create-group-cta__action {
    background: rgba(244, 168, 42, 0.22);
    border-radius: 999px;
    padding: 8px 14px;
    transition: background 0.15s ease;
}
.create-group-cta--cohort:hover .create-group-cta__action {
    background: rgba(244, 168, 42, 0.35);
}

@media (max-width: 640px) {
    .create-group-cta { flex-direction: column; align-items: flex-start; }
    .create-group-cta__action { align-self: flex-end; }
}

/* Feature tile grid (group-page-only — does not affect .feature-list used on pricing/checkout) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.feature-tile {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 12px 14px;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.feature-tile:hover {
    border-color: var(--color-accent);
    background: var(--color-bg);
    transform: translateY(-1px);
}
.feature-tile__icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 8px;
}
.feature-tile__title {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-fg);
    margin-bottom: 2px;
}
.feature-tile__desc {
    font-size: 12.5px;
    color: var(--color-fg-muted);
    line-height: 1.45;
}
@media (max-width: 480px) {
    .feature-grid { grid-template-columns: 1fr; }
}

.panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 26px;
}

.panel + .panel { margin-top: 16px; }

.panel h3 {
    margin-bottom: 14px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-fg-muted);
    font-weight: 700;
}

.member-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--font-display);
    border: 2px solid var(--color-bg);
    position: relative;
}

.avatar.online::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success);
    border: 2px solid var(--color-bg);
}

.activity {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
}

.activity li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    color: var(--color-fg-2);
}

.activity li:last-child { border: 0; }

ul, ol { padding-left: 18px; }

.feature-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 26px;
}

.feature-list li {
    padding: 9px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-fg);
    font-size: 14.5px;
    border-bottom: 1px solid var(--color-border);
}

.feature-list li:last-child { border: 0; }

.feature-list .check  { color: var(--color-success); font-weight: 700; }
.feature-list .cross  { color: var(--color-fg-subtle); font-weight: 700; }

/* ============================================================
   Pricing
   ============================================================ */

.price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
}

.price-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    position: relative;
}

.price-card.popular {
    border-color: var(--color-fg);
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
    box-shadow: var(--shadow-lg);
}

.price-card__badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: var(--color-fg);
    color: #FFFFFF;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.price-card h3 {
    font-size: 13px;
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.price-card .amount {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 800;
    color: var(--color-fg);
    line-height: 1.0;
    margin: 4px 0;
    letter-spacing: -0.04em;
}

.price-card .per {
    color: var(--color-fg-muted);
    font-size: 14px;
}

/* ============================================================
   App shell (logged-in)
   ============================================================ */

.app-shell {
    display: grid;
    grid-template-columns: 256px 1fr;
    min-height: 100vh;
    background: var(--color-bg-soft);
}

.app-sidebar {
    background: #0B1020;
    color: rgba(255, 255, 255, 0.82);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    /* Phase 16 bugfix — long My Groups lists overflow the 100vh sidebar
       and bleed onto the body bg as ghostly items below the dark column.
       Scroll within the sidebar instead. Thin scrollbar styling so the
       dark column doesn't sprout a chunky native scrollbar. */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
.app-sidebar::-webkit-scrollbar-track { background: transparent; }

.app-sidebar .brand {
    color: #FFFFFF;
    margin-bottom: 30px;
    padding: 0 4px;
}

.nav-group {
    margin-top: 24px;
}

.nav-group__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 12px 10px;
    font-weight: 700;
}

/* Phase 16 polish — section grouping. PRIMARY / DISCOVER / MY GROUPS /
   ACCOUNT are each wrapped in a .nav-section. The hairline divider above
   each section (except the first) gives the sidebar visual hierarchy
   without screaming for attention. */
.nav-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
}
.nav-section + .nav-section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
    margin-top: 4px;
}
.nav-section__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.42);
    margin: 4px 12px 6px;
    font-weight: 700;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

.nav-link.active {
    /* Phase 16 polish — active state gets a small accent left stripe +
       brighter text on a subtle tint. More obvious than the previous
       pure background highlight alone. */
    background: rgba(244, 168, 42, 0.12);
    color: var(--color-accent-2);
    box-shadow: inset 3px 0 0 var(--color-accent-2);
    border-radius: var(--radius-sm);
}

.nav-link__icon { width: 22px; text-align: center; font-size: 17px; }

.nav-link__sub {
    display: block;
    padding: 9px 12px 9px 44px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 14.5px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link__sub:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.nav-link__sub.active { color: var(--color-accent-2); background: rgba(244, 168, 42, 0.10); }
/* Phase 16 — sidebar filter hides non-matching rows. The class beats
   the user-agent [hidden] attribute (which loses to .nav-link__sub
   { display: block } above). */
.nav-link__sub--filtered { display: none !important; }

/* Phase 16 — collapsible + filterable My Groups in the sidebar. The
   nav-group--collapsible variant is a <details> element so the
   expand/collapse triangle and state work natively without JS. */
.nav-group--collapsible {
    /* <details> defaults to padding-left for the marker; reset so the
       summary aligns with other sidebar items. */
}
.nav-group__summary {
    /* Use the existing label visual treatment, plus list-style:none to
       hide the default ▶ marker; we provide our own caret via :after. */
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 12px 10px;
    font-weight: 700;
    user-select: none;
}
.nav-group__summary::-webkit-details-marker { display: none; }
.nav-group__summary::after {
    content: '▾';
    margin-left: auto;
    font-size: 11px;
    transition: transform 0.15s ease;
}
details.nav-group--collapsible:not([open]) .nav-group__summary::after {
    transform: rotate(-90deg);
}
.nav-group__summary:hover { color: rgba(255, 255, 255, 0.8); }
.nav-group__count {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 1px 7px;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.nav-group__filter {
    margin: 0 12px 8px;
}
.nav-group__input {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    box-sizing: border-box;
}
.nav-group__input::placeholder { color: rgba(255, 255, 255, 0.40); }
.nav-group__input:focus {
    outline: none;
    border-color: var(--color-accent, #FFC627);
    background: rgba(255, 255, 255, 0.10);
}
.nav-group__empty-filter {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    text-align: center;
    margin: 8px 12px;
}

.app-sidebar .spacer { flex: 1; }

/* Phase 16 polish — Upgrade CTA card at the bottom of the sidebar.
   Distinct from regular nav links: amber-tinted background, slight
   border, two-line layout ("Go Premium" + tagline). Pinned at the
   bottom via margin-top: auto so it floats below scrollable content. */
.nav-upgrade-cta {
    margin-top: auto;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 10px);
    background: linear-gradient(135deg, rgba(255, 198, 39, 0.18), rgba(244, 168, 42, 0.10));
    border: 1px solid rgba(255, 198, 39, 0.28);
    color: rgba(255, 255, 255, 0.94);
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.nav-upgrade-cta:hover {
    background: linear-gradient(135deg, rgba(255, 198, 39, 0.26), rgba(244, 168, 42, 0.16));
    color: #FFFFFF;
    transform: translateY(-1px);
}
.nav-upgrade-cta__icon {
    font-size: 22px;
    line-height: 1;
}
.nav-upgrade-cta__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.nav-upgrade-cta__body strong {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}
.nav-upgrade-cta__body span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
}

.app-main {
    /* Phase 16 bugfix — was var(--color-bg) (pure white) which left a
       jarring white area below short content (e.g. /cohorts with one
       row of cards on a tall monitor; /app/g/{slug} empty chat).
       Soft-gray matches workspace-body's bg so any "uncovered" pixels
       blend in instead of looking like a layout break. */
    background: var(--color-bg-soft);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.workspace-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 20px 36px 0;
    position: sticky;
    top: 0;
    z-index: 5;
}

.workspace-header__title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.workspace-header__title h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }

.online-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-fg-muted);
    font-size: 13px;
}

.online-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(24, 169, 87, 0.55);
    animation: pulse 1.8s ease-out infinite;
}

.tabs {
    display: flex;
    gap: 4px;
    margin-top: 20px;
    /* On narrow viewports the 5 tab labels overflow the workspace
       header — let them scroll horizontally instead of wrapping into
       multiple lines or pushing layout. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; flex: 0 0 auto; }

.tabs a {
    padding: 12px 18px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--color-fg-muted);
    border-bottom: 2px solid transparent;
}

.tabs a:hover { color: var(--color-fg); }
.tabs a.active {
    color: var(--color-fg);
    border-bottom-color: var(--color-fg);
}
/* Phase 33-5 — workspace tab badge for the flashcard due count. */
.tab-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    vertical-align: middle;
}
.tab-badge--study {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.workspace-body {
    padding: 24px 36px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--color-bg-soft);
    min-height: calc(100vh - 156px);
}

/* Chat */
/* Chat shell — fills the workspace-body column. Stream scrolls in the
   middle, input is pinned at the bottom via flex layout. */
.chat {
    background: transparent;
    border: none;
    border-radius: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Phase 16 bugfix — drop the artificial 820px cap that left a big white
       gap below the chat on tall monitors. Let the flex layout do its job:
       chat fills the workspace-body, chat-stream takes the remaining
       vertical space, chat-input pins to the bottom. The min-height floor
       protects very short viewports. */
    min-height: 480px;
    position: relative;   /* anchor for the absolutely-positioned emoji picker */
    overflow: hidden;
}

.chat-day {
    text-align: center;
    color: var(--color-fg-subtle);
    font-size: 12px;
    padding: 14px 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.chat-stream {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 14px;
    display: flex;
    flex-direction: column;
    /* Matches the DM thread spacing so chat + DM feel like the same surface. */
    gap: 2px;
}

.message {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
}

.message__body { min-width: 0; }

.message__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 0;
}

.message__name { font-weight: 700; font-size: 14px; }
.message__time { color: var(--color-fg-subtle); font-size: 12px; }

.message__text { color: inherit; font-size: 15px; line-height: 1.25; }

/* Compose bar — minimal pill-on-flat input pinned at the bottom of the
   chat shell. Layout: [📎] [😊] [GIF] [autosize textarea, flex:1] [➤].
   Sized to match a professional messaging client (~52px total height). */
.chat-input {
    border-top: 1px solid var(--color-border);
    padding: 8px 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    background: var(--color-bg);
}
.chat-input__icon-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--color-fg-muted);
    transition: background 0.12s ease, color 0.12s ease, transform 0.06s ease;
}
.chat-input__icon-btn:hover { background: var(--color-bg-soft); color: var(--color-fg); }
.chat-input__icon-btn:active { transform: translateY(1px); }
.chat-input textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    max-height: 120px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.4;
    background: var(--color-bg-soft);
    resize: none;
    overflow-y: auto;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.chat-input textarea:focus {
    outline: none;
    border-color: var(--color-fg-muted);
    background: var(--color-bg);
}
.chat-input__send {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-fg);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, transform 0.06s ease;
}
.chat-input__send:hover { background: #1A2237; }
.chat-input__send:active { transform: translateY(1px); }
.chat-input__send:disabled { opacity: 0.55; cursor: not-allowed; }

/* Pending attachment chip — shown above the input after upload. */
.chat-attachment-preview {
    margin: 0 18px 8px;
    padding: 10px 12px;
    background: var(--color-accent-soft);
    border: 1px solid rgba(244, 168, 42, 0.32);
    border-radius: var(--radius-md);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-fg-2);
}
.chat-attachment-preview__icon { font-size: 18px; line-height: 1; }
.chat-attachment-preview__name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-preview__size { color: var(--color-fg-subtle); font-size: 12px; flex: 0 0 auto; }
.chat-attachment-preview__cancel {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--color-fg-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.chat-attachment-preview__cancel:hover { background: rgba(0,0,0,0.06); color: var(--color-fg); }

/* Emoji picker — absolute-positioned inside the .chat shell so it
   sits over the input without breaking layout. Click outside / Esc
   closes (wired in chat-client.js). */
.emoji-picker {
    position: absolute;
    bottom: 72px;
    left: 60px;
    width: 296px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.emoji-picker button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 6px;
    border-radius: var(--radius-sm);
}
.emoji-picker button:hover { background: var(--color-bg-soft); }

/* GIF picker — same anchoring as the emoji picker, wider grid for
   thumbnail tiles. The picker is a scrollable 2-column grid; clicking
   a tile sends the GIF immediately (no extra Send-button step). */
.gif-picker {
    position: absolute;
    bottom: 72px;
    left: 100px;
    width: 360px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.gif-picker__item {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 1;
    transition: transform 0.12s ease, outline-color 0.12s ease;
    outline: 2px solid transparent;
}
.gif-picker__item:hover { transform: scale(1.02); outline-color: var(--color-accent); }
.gif-picker__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-picker__loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-fg-muted);
    padding: 24px;
    font-size: 13px;
}

/* GIFs rendered inline inside a chat message. No chrome — keeps the
   message stream visually flat (no bubble ring around media). */
.message__gif {
    display: block;
    max-width: 280px;
    max-height: 280px;
    border-radius: var(--radius-sm);
    margin-top: 4px;
}

/* DM thread compose bar — identical shape to .chat-input so the two
   surfaces share one visual vocabulary. */
.dm-thread { position: relative; }
.dm-thread__compose {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--color-border);
}
.dm-thread__icon-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--color-fg-muted);
    font-weight: 600;
    transition: background 0.12s ease, color 0.12s ease;
}
.dm-thread__icon-btn:hover { background: var(--color-bg-soft); color: var(--color-fg); }
.dm-thread__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    max-height: 120px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.4;
    background: var(--color-bg-soft);
    resize: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.dm-thread__input:focus {
    outline: none;
    border-color: var(--color-fg-muted);
    background: var(--color-bg);
}
.dm-thread__send {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-fg);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, transform 0.06s ease;
}
.dm-thread__send:hover { background: #1A2237; }
.dm-thread__send:active { transform: translateY(1px); }

/* DM attachment + GIF rendering inside a bubble. */
.dm-msg__attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.dm-msg__attachment-image,
.dm-msg__attachment-video,
.dm-msg__gif {
    max-width: 260px;
    max-height: 260px;
    border-radius: var(--radius-sm);
    display: block;
}
.dm-msg__gif { margin-top: 0; }
.dm-msg__attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    text-decoration: none;
    color: var(--color-fg);
    font-size: 14px;
    max-width: max-content;
}
.dm-msg__attachment-link:hover { border-color: var(--color-border-strong); }

/* Media variant — no-op since the bubble is already transparent and
   borderless. Kept as an empty selector so existing th:classappend
   bindings remain valid without rippling template changes. */
.dm-msg__bubble--media { /* intentionally empty */ }

/* Inline attachment rendering inside chat messages. */
.message__attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    max-width: 460px;
}
.message__attachment-image, .message__attachment-video {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--radius-sm);
    display: block;
}
.message__attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    text-decoration: none;
    color: var(--color-fg);
    font-size: 14px;
    max-width: max-content;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.message__attachment-link:hover { border-color: var(--color-border-strong); background: var(--color-bg); }
.message__attachment-link__icon { font-size: 16px; }
.message__attachment-link__size { color: var(--color-fg-subtle); font-size: 12px; }

/* Tab placeholders */
.tab-placeholder {
    background: var(--color-bg);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 80px 32px;
    text-align: center;
    color: var(--color-fg-muted);
}

.tab-placeholder h3 {
    color: var(--color-fg);
    margin-bottom: 8px;
}

/* ============================================================
   Profile
   ============================================================ */

.profile-head {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 32px 0;
}

/* "Report filed" success banner (Block & report → SettingsController flash). */
.profile-report-confirm {
    background: var(--color-success-soft);
    border: 1px solid #B8E6CB;
    border-left: 4px solid var(--color-success);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin: 8px 0 8px;
    font-size: 14px;
    color: #056B36;
    line-height: 1.55;
}
.profile-report-confirm strong { display: block; margin-bottom: 2px; color: #03522B; }

/* Profile "..." action dropdown — pure CSS via <details>/<summary>. */
.profile-more { position: relative; }
.profile-more__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: var(--color-fg-muted);
    border: 1px solid var(--color-border);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.profile-more__trigger::-webkit-details-marker { display: none; }   /* hide native triangle (Safari) */
.profile-more__trigger::marker { content: ""; }                      /* hide native marker (Firefox/Chrome) */
.profile-more__trigger:hover  { background: var(--color-bg-soft); color: var(--color-fg); border-color: var(--color-border-strong); }
details[open] .profile-more__trigger { background: var(--color-bg-soft); color: var(--color-fg); border-color: var(--color-border-strong); }

.profile-more__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.profile-more__form { margin: 0; }
.profile-more__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    cursor: pointer;
    font: inherit;
    color: var(--color-fg);
    transition: background 0.12s ease;
}
.profile-more__item:hover { background: var(--color-bg-soft); }
.profile-more__item-icon { font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.profile-more__item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.profile-more__item-label { font-weight: 600; font-size: 14px; }
.profile-more__item-desc  { font-size: 12px; color: var(--color-fg-muted); }
.profile-more__item--danger:hover { background: var(--color-danger-soft); }
.profile-more__item--danger .profile-more__item-label { color: var(--color-danger); }

.avatar-lg {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    flex: 0 0 auto;
}

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

.profile-head__name {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 4px;
    letter-spacing: -0.025em;
}

/* ============================================================
   Footer
   ============================================================ */

footer.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 36px 0 56px;
    background: var(--color-bg-soft);
    color: var(--color-fg-muted);
    font-size: 14px;
    margin-top: 64px;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.site-footer__links {
    display: flex;
    gap: 22px;
}

.site-footer__links a { color: var(--color-fg-muted); font-size: 13.5px; }
.site-footer__links a:hover { color: var(--color-fg); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
    .discipline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    :root { --section-gap: 64px; }
    .discipline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-grid-other { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .browse { grid-template-columns: 1fr; }
    /* When the rail no longer sticks, drop the viewport-cap + internal scroll
       — let the rail be its natural height and the page scroll the whole thing.
       The rail also collapses into a tap-to-open "Filters" package: the
       summary bar is the visible card, the body shows only when the toggle
       checkbox is :checked. */
    .filter-rail { position: static; max-height: none; overflow: visible; padding: 0; }
    /* Toggle: visually hidden but kept in the tab order for keyboard users. */
    .filter-rail__toggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
    .filter-rail__summary {
        display: flex; align-items: center; gap: 10px;
        padding: 14px 18px; cursor: pointer;
        font-family: var(--font-display); font-weight: 700; font-size: 14px;
        color: var(--color-fg); -webkit-tap-highlight-color: transparent;
        transition: background 0.12s ease;
    }
    .filter-rail__summary:hover { background: var(--color-surface); }
    /* When expanded, the summary becomes a distinct header strip above the
       body — surface background + a hairline divider so "Filters" and the
       first "Field" heading no longer collide. */
    .filter-rail__toggle:checked ~ .filter-rail__summary {
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
    }
    .filter-rail__chevron { margin-left: auto; transition: transform 0.15s ease; }
    .filter-rail__body { display: none; padding: 16px 18px 18px; }
    .filter-rail__toggle:checked ~ .filter-rail__body { display: block; }
    .filter-rail__toggle:checked ~ .filter-rail__summary .filter-rail__chevron { transform: rotate(180deg); }
    .filter-rail__toggle:focus-visible ~ .filter-rail__summary {
        outline: 2px solid var(--color-accent); outline-offset: -2px;
    }
    .group-detail-grid { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: 1fr; }
    .app-shell { grid-template-columns: 1fr; }
    /* Phase 36-1 — hide the desktop sidebar entirely at ≤960px.
       Previously the sidebar reflowed into a horizontal grid that looked
       crammed and competed with the bottom-nav. Phase 36 surfaces every
       sidebar item via the hamburger drawer (.mobile-drawer) instead. */
    .app-sidebar { display: none; }
    .workspace-body { padding: 16px; }
    .workspace-header { padding: 14px 16px 0; }
    .hero { padding: 64px 0 80px; }
}

@media (max-width: 640px) {
    :root { --container-pad: 18px; }
    .hero__chips { grid-template-columns: 1fr; }
    .discipline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .howto { grid-template-columns: 1fr; }
    .site-nav { display: none; }
    .group-card__head { flex-direction: column; align-items: stretch; }
    .stepper { flex-wrap: wrap; }
    .group-hero__name { font-size: 28px; }
}

/* Tables — at narrow widths every table becomes its own scroll surface
   so no admin grid can punch outside the viewport. Loses some inter-row
   alignment, which is the standard tradeoff for responsive tables. */
@media (max-width: 760px) {
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .admin-card, .panel { padding-left: 14px; padding-right: 14px; }
    .receipt { padding: 18px; }
}

/* Workspace tabs row tends to overflow at narrow widths — let it scroll. */
@media (max-width: 760px) {
    .workspace-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .workspace-tabs::-webkit-scrollbar { display: none; }
}

/* Tiny phones — drop padding everywhere so content doesn't get walled in. */
@media (max-width: 420px) {
    :root { --container-pad: 12px; }
    .workspace-body { padding: 12px; }
    .app-section, .panel, .admin-card { padding: 14px; }
    h1 { font-size: clamp(28px, 7vw, 40px); }
    h2 { font-size: clamp(22px, 5vw, 28px); }
    .btn, .input, .select { font-size: 14px; }
}

/* ============================================================
   Admin shell
   ============================================================
   The admin module reuses the brand tokens but uses a distinct
   layout (fixed dark sidebar + light dense content area). The
   colour palette is intentionally cooler / less marketing-y so
   admins know they are operating on shared platform state.
   ============================================================ */

.admin-shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
    background: var(--color-bg-soft);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #0B1020 0%, #0E152A 100%);
    color: #E5E8EE;
    padding: 22px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 14px;
    text-decoration: none;
}

.admin-nav-group {
    margin-top: 14px;
}

.admin-nav-group__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.40);
    padding: 4px 10px 6px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 14px;
    transition: background 120ms ease, color 120ms ease;
}

.admin-nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFF;
}

.admin-nav-link.active {
    background: rgba(244, 168, 42, 0.16);
    color: var(--color-accent-2);
}

.admin-nav-link__icon { width: 18px; text-align: center; }

.admin-nav-link--exit {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.6);
}

.admin-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 5;
}

.admin-topbar__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--color-fg);
}

.admin-topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-topbar__user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-fg-muted);
    font-size: 13.5px;
}

.admin-section {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-section--narrow { max-width: 760px; }

.admin-back {
    display: inline-block;
    color: var(--color-fg-muted);
    text-decoration: none;
    font-size: 13.5px;
}
.admin-back:hover { color: var(--color-fg); }

/* ----- stat tiles ----- */

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.admin-stat {
    background: var(--color-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}

.admin-stat__label {
    color: var(--color-fg-muted);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-stat__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--color-fg);
    margin-top: 6px;
}

.admin-stat__sub {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
}

.admin-stat__link {
    color: var(--color-accent-deep);
    text-decoration: none;
    font-size: 12.5px;
}

/* ----- card primitive ----- */

.admin-card {
    background: var(--color-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}

.admin-card--user { padding: 22px 24px; }

.admin-card--danger {
    border-color: rgba(224, 69, 69, 0.4);
    background: rgba(224, 69, 69, 0.04);
}

.admin-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.admin-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16.5px;
    margin: 0 0 4px;
    color: var(--color-fg);
}

.admin-card__subtitle {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    margin: 18px 0 6px;
    color: var(--color-fg-2);
}

.admin-card__sub {
    color: var(--color-fg-muted);
    font-size: 13.5px;
    margin: 0 0 12px;
}

/* ----- table primitive ----- */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.admin-table th {
    color: var(--color-fg-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    background: var(--color-bg-soft);
}

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

.admin-table tbody tr:hover { background: var(--color-bg-soft); }

.admin-table__time { color: var(--color-fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-table__empty { text-align: center; color: var(--color-fg-muted); padding: 24px; }

.admin-amount { font-variant-numeric: tabular-nums; font-weight: 600; }

.admin-pagination {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-fg-muted);
    font-size: 13px;
}

.admin-pagination__links { display: flex; gap: 14px; }

.admin-link {
    color: var(--color-accent-deep);
    text-decoration: none;
    font-weight: 600;
}
.admin-link:hover { text-decoration: underline; }

/* ----- pills (status, role, severity) ----- */

.admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.admin-pill--mono { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }

.admin-pill--ok      { background: var(--color-success-soft); color: #0E6B3C; border-color: rgba(24, 169, 87, 0.25); }
.admin-pill--warn    { background: var(--color-warning-soft); color: #8B5402; border-color: rgba(232, 150, 33, 0.30); }
.admin-pill--bad     { background: var(--color-danger-soft);  color: #9C1F1F; border-color: rgba(224, 69, 69, 0.30); }
.admin-pill--cool    { background: var(--color-cool-soft);    color: #2C3FAA; border-color: rgba(110, 141, 255, 0.30); }
.admin-pill--brand   { background: var(--color-accent-soft);  color: var(--color-accent-deep); border-color: rgba(244, 168, 42, 0.35); }
.admin-pill--neutral { background: var(--color-surface);      color: var(--color-fg-2);  border-color: var(--color-border); }

/* ----- form primitives ----- */

.admin-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-form--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.admin-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.admin-form__label {
    display: block;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-fg-muted);
    margin-bottom: 4px;
}

.admin-form__hint {
    display: block;
    font-size: 12.5px;
    color: var(--color-fg-subtle);
    margin-top: 4px;
}

.admin-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.admin-input {
    width: 100%;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    background: var(--color-bg);
    color: var(--color-fg);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

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

.admin-input--inline { width: auto; min-width: 280px; }
.admin-input--mono   { font-family: var(--font-mono); font-size: 13px; }

textarea.admin-input { resize: vertical; }

.admin-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--color-fg-2);
}

.admin-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-filter-row--right { justify-content: flex-end; }

.admin-filter-row .admin-input { width: auto; min-width: 240px; }

/* ----- tabs ----- */

.admin-tab-row {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
}

.admin-tab {
    padding: 8px 14px;
    color: var(--color-fg-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-tab:hover { color: var(--color-fg); }

.admin-tab--active {
    color: var(--color-fg);
    border-bottom-color: var(--color-accent);
}

/* ----- user / group cells ----- */

.admin-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-user--lg { gap: 16px; }

.admin-user__name { font-weight: 600; color: var(--color-fg); }
.admin-user__handle { color: var(--color-fg-muted); font-size: 12.5px; }
.admin-user__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 12.5px;
    align-items: center;
}

.admin-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-group__icon {
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}

.admin-group__icon--lg { font-size: 32px; width: 56px; height: 56px; }

.admin-group__name { font-weight: 600; color: var(--color-fg); }
.admin-group__slug { color: var(--color-fg-muted); font-size: 12.5px; font-family: var(--font-mono); }

.admin-fg-muted { color: var(--color-fg-muted); }

/* ----- summary list (used on detail pages) ----- */

.admin-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 22px;
    margin: 12px 0 18px;
    font-size: 13.5px;
}

.admin-summary__label {
    display: inline-block;
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    margin-right: 6px;
}

/* ----- support thread ----- */

.admin-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-thread__msg {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    background: var(--color-bg);
}

.admin-thread__msg--internal {
    background: rgba(244, 168, 42, 0.08);
    border-color: rgba(244, 168, 42, 0.30);
}

.admin-thread__head {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12.5px;
    color: var(--color-fg-muted);
    margin-bottom: 4px;
}

.admin-thread__body { white-space: pre-wrap; color: var(--color-fg); font-size: 14px; }

/* ----- toggle (feature flags) ----- */

.admin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    color: var(--color-fg-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.admin-toggle__knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFF;
    border: 1px solid var(--color-border-strong);
    transition: transform 120ms ease, background 120ms ease;
}

.admin-toggle--on {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
}

.admin-toggle--on .admin-toggle__knob {
    background: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateX(0);
}

/* ----- quick-action cards on dashboard ----- */

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

.admin-quick-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-elevated);
    text-decoration: none;
    color: var(--color-fg);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.admin-quick-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.admin-quick-card__icon { font-size: 28px; }
.admin-quick-card__title { font-weight: 700; }
.admin-quick-card__sub { color: var(--color-fg-muted); font-size: 13px; }

/* ----- member list, tags ----- */

.admin-member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-member-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; }

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

/* ----- analytics chart placeholder ----- */

.admin-chart {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    height: 220px;
    padding: 16px 8px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
}

.admin-chart__bar {
    flex: 1;
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
    border-radius: 6px 6px 0 0;
    min-height: 6px;
}

.admin-chart__labels {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-fg-muted);
}

.admin-chart__labels span { flex: 1; text-align: center; }

/* ----- danger button (used by delete-group) ----- */

.btn-danger {
    background: var(--color-danger);
    color: #FFF;
    border: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.btn-danger:hover { background: #BC2A2A; }

/* ----- responsive ----- */

@media (max-width: 1024px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        padding: 14px 18px;
    }
    .admin-sidebar .brand { width: 100%; margin-bottom: 8px; }
    .admin-nav-group { margin-top: 0; }
    .admin-nav-group__label { display: none; }
    .admin-nav-link { padding: 6px 10px; }
    .admin-nav-link--exit { margin-top: 0; padding-top: 6px; border-top: none; }
    .admin-grid-2, .admin-grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Checkout, receipt, billing
   ============================================================ */

.container--narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--container-pad); }

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 28px;
    align-items: start;
}

.checkout-summary {
    background: var(--gradient-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 28px 28px;
    border-radius: var(--radius-lg);
}

.checkout-summary h2 { color: #FFF; font-size: 26px; margin: 6px 0 4px; }
.checkout-summary .eyebrow { color: var(--color-accent-2); }
.checkout-summary .muted   { color: rgba(255, 255, 255, 0.65); }
.checkout-summary .feature-list { color: rgba(255, 255, 255, 0.85); }

.checkout-summary__price {
    margin: 6px 0 14px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.checkout-summary__amount  { font-size: 38px; font-weight: 700; color: #FFF; font-family: var(--font-display); }
.checkout-summary__cadence { color: rgba(255, 255, 255, 0.6); }

.checkout-card {
    background: var(--color-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px 28px;
    box-shadow: var(--shadow-md);
}

.checkout-card h2 { font-size: 22px; margin: 0 0 10px; }

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.checkout-form label   { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--color-fg-2); }
.checkout-form label > span { font-weight: 600; }

.checkout-form input {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
    background: var(--color-bg);
    color: var(--color-fg);
    transition: border-color 120ms, box-shadow 120ms;
}
.checkout-form input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.checkout-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.checkout-form__legal { font-size: 12px; margin-top: 4px; }

@media (max-width: 760px) {
    .checkout-grid { grid-template-columns: 1fr; }
}

/* ----- receipt ----- */

.receipt-section { padding-top: 36px; }

.receipt-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-success-soft);
    border: 1px solid rgba(24, 169, 87, 0.30);
    color: #0E6B3C;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}

.receipt-banner__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-success);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.receipt-banner .btn { margin-left: auto; }

.receipt {
    background: var(--color-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    box-shadow: var(--shadow-md);
}

.receipt__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.receipt__brand { display: flex; align-items: center; gap: 12px; }
.receipt__brand-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--color-fg); }
.receipt__brand-sub  { color: var(--color-fg-muted); font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.06em; }

.receipt__meta { text-align: right; font-size: 13.5px; }
.receipt__meta div { margin-bottom: 4px; }
.receipt__label {
    display: inline-block;
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    margin-right: 6px;
}
.mono { font-family: var(--font-mono); }

.receipt__parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    font-size: 14px;
}
.receipt__parties .muted { color: var(--color-fg-muted); font-size: 13px; }

.receipt__lines {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    margin-bottom: 18px;
}
.receipt__lines th, .receipt__lines td {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.receipt__lines th {
    color: var(--color-fg-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.receipt__amount { text-align: right; font-variant-numeric: tabular-nums; }
.receipt__total  { font-size: 18px; font-weight: 700; color: var(--color-fg); }

.receipt__lines tfoot td { border-bottom: none; padding-top: 16px; }
.receipt__lines .muted   { color: var(--color-fg-muted); font-size: 12.5px; }

.receipt__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-fg-muted);
    font-size: 13.5px;
}

.receipt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

@media print {
    .site-header, .site-footer, .receipt-banner, .receipt-actions { display: none !important; }
    body { background: #FFF !important; }
    .receipt { box-shadow: none !important; border: none !important; padding: 0 !important; }
    .section { padding: 0 !important; }
}

/* ----- in-app billing page ----- */

.app-section {
    padding: 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1080px;
}
.app-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.app-section__head h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    margin: 4px 0 0;
}

/* ============================================================
   Admin login
   ============================================================ */

.admin-login-body {
    background: var(--gradient-dark);
    min-height: 100vh;
    color: rgba(255, 255, 255, 0.85);
}

.admin-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 18px;
}

.admin-login__card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    padding: 32px 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.admin-login__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.admin-login__brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    color: #FFF;
    font-size: 18px;
}
.admin-login__brand-sub {
    color: var(--color-accent-2);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-login__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: #FFF;
    font-size: 26px;
    margin: 0;
}
.admin-login__sub {
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 18px;
    font-size: 14px;
}

.admin-login__banner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 13.5px;
}
.admin-login__banner--bad {
    background: rgba(224, 69, 69, 0.16);
    border: 1px solid rgba(224, 69, 69, 0.40);
    color: #FBD2D2;
}
.admin-login__banner--ok {
    background: rgba(24, 169, 87, 0.14);
    border: 1px solid rgba(24, 169, 87, 0.40);
    color: #B9F3CE;
}

.admin-login__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.admin-login__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}
.admin-login__form input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #FFF;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.admin-login__form input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.admin-login__hint {
    margin-top: 18px;
    padding: 12px 14px;
    background: rgba(244, 168, 42, 0.10);
    border: 1px dashed rgba(244, 168, 42, 0.40);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}
.admin-login__hint code {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
}
.admin-login__hint .muted { color: rgba(255, 255, 255, 0.50); font-size: 12px; margin-top: 4px; }

.admin-login__back {
    display: block;
    text-align: center;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 13px;
}
.admin-login__back:hover { color: #FFF; }

.admin-topbar__logout button { margin-left: 4px; }

/* ============================================================
   Locale switcher + cookie banner (global users)
   ============================================================ */

.locale-switcher {
    position: relative;
    display: inline-block;
    margin-right: 6px;
}
.locale-switcher summary,
.locale-switcher__trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    color: var(--color-fg-2);
    font-size: 13.5px;
    font-weight: 600;
    user-select: none;
    white-space: nowrap;
}
.locale-switcher__icon { font-size: 15px; line-height: 1; }
.locale-switcher summary::-webkit-details-marker { display: none; }
.locale-switcher summary::marker { content: ""; }
.locale-switcher[open] summary { background: var(--color-surface); }
.locale-switcher ul,
.locale-switcher__menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin: 4px 0 0;
    padding: 6px;
    list-style: none;
    background: var(--color-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    /* Clamp the panel width to the viewport so it can't push the page
       horizontally on a narrow screen. Modern browsers fall back to
       min-width when max-width is smaller, so on roomy viewports the
       panel still gets its preferred ~180px. */
    max-width: calc(100vw - 24px);
    z-index: 20;
}
.locale-switcher li a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-fg);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}
.locale-switcher li a:hover { background: var(--color-bg-soft); }

/* Tighter trigger on very narrow viewports — keep the globe icon
   reachable without crowding the auth CTAs. The .locale-switcher__label
   span is already hidden at <=900px (see the responsive block above). */
@media (max-width: 640px) {
    .locale-switcher__trigger { padding: 6px 8px; }
}

.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--color-fg);
    color: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
}
.cookie-banner__text { flex: 1; }
.cookie-banner__actions { display: flex; gap: 10px; align-items: center; }
.cookie-banner__link { color: var(--color-accent-2); text-decoration: underline; font-size: 13px; }
.cookie-banner[hidden] { display: none; }

/* Admin shell — sidebar collapses to a horizontal nav rail above the
   main content on tablets and below. The fixed-100vh sidebar would
   otherwise hold a 248px column on a 360px phone, leaving 112px for
   actual content. */
@media (max-width: 960px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px 14px;
    }
    .admin-sidebar .brand { width: 100%; margin-bottom: 6px; }
    .admin-nav-group { width: 100%; }
    .admin-nav-group__label { display: none; }
}
@media (max-width: 760px) {
    .admin-main { padding: 0 !important; }
    .admin-section, .admin-card { padding: 14px; }
}

/* ============================================================
   Community board (/community) + the /browse entry card
   ============================================================ */

/* Small button variant — used by the community forms (and profile-edit). */
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* --- Entry card pinned at the top of the /browse group list --- */
.community-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    text-decoration: none;
    color: var(--color-fg);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.community-entry:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.community-entry__body { display: flex; flex-direction: column; gap: 4px; }
.community-entry__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
}
.community-entry__desc { font-size: 14px; color: var(--color-fg-2); max-width: 52ch; }
.community-entry__cta {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-accent-deep);
    white-space: nowrap;
}

/* --- Board page --- */
/* The shell paints a soft warm tint across the full width so the
   centered content column reads as a focused composition rather than
   floating on white. */
.community-shell {
    background:
        radial-gradient(900px 360px at 50% -10%, var(--color-accent-soft), transparent 60%),
        var(--color-bg-soft);
    padding: 8px 0 64px;
    border-bottom: 1px solid var(--color-border);
}
.community { padding: 40px 0 0; max-width: 760px; }

/* Hero header */
.community-head { margin-bottom: 28px; }
.community-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-deep);
    background: var(--color-accent-soft);
    border: 1px solid rgba(244, 168, 42, 0.28);
    border-radius: var(--radius-pill);
    padding: 5px 12px 5px 10px;
    margin-bottom: 14px;
}
.community-head__pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 0 var(--color-accent-glow);
    animation: community-pulse 2.4s ease-in-out infinite;
}
@keyframes community-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 168, 42, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(244, 168, 42, 0); }
}
.community-head__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(28px, 4.2vw, 40px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--color-fg);
}
.community-head__accent {
    background: linear-gradient(120deg, var(--color-accent-deep) 0%, var(--color-accent) 60%, #FFC04D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.community-head__intro {
    color: var(--color-fg-muted);
    font-size: 15.5px;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0 0 18px;
}
.community-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: 13.5px;
    color: var(--color-fg-muted);
}
.community-head__meta-item strong { color: var(--color-fg); font-weight: 700; }
.community-head__meta-sep { color: var(--color-fg-subtle); }
.community-head__meta-link {
    color: var(--color-accent-deep);
    font-weight: 600;
    text-decoration: none;
}
.community-head__meta-link:hover { text-decoration: underline; }

/* Compose box */
.community-compose {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 28px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.community-compose:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(244, 168, 42, 0.10), var(--shadow-md);
}
.community-compose__row { display: flex; gap: 14px; align-items: flex-start; }
.community-compose__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.community-compose__input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.55;
    resize: vertical;
    min-height: 84px;
    background: var(--color-bg-soft);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.community-compose__input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-bg);
}
.community-compose__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.community-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-fg-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
}
.community-chip--tip { background: var(--color-bg-soft); }
.community-compose__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border);
}
.community-compose__hint { font-size: 12.5px; color: var(--color-fg-muted); max-width: 46ch; line-height: 1.55; margin: 0; }
.community-compose__hint strong { color: var(--color-fg-2); font-weight: 700; }
.community-compose__submit { gap: 10px; }

/* Compose meta fields — small labelled inputs in a 2×2 grid (one column
   on phones). Each field is a pill with a leading emoji icon. */
.community-compose__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}
@media (max-width: 600px) { .community-compose__meta { grid-template-columns: 1fr; } }
.community-meta-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    transition: border-color 0.12s ease, background 0.12s ease;
    min-width: 0;
}
.community-meta-field:focus-within {
    border-color: var(--color-fg-muted);
    background: var(--color-bg);
}
.community-meta-field--wide { grid-column: span 2; }
@media (max-width: 600px) { .community-meta-field--wide { grid-column: span 1; } }
.community-meta-field__icon { font-size: 14px; line-height: 1; flex: 0 0 auto; }
.community-meta-field__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    color: var(--color-fg);
    padding: 0;
    outline: none;
}
.community-meta-field__input::placeholder { color: var(--color-fg-subtle); }
.community-meta-field__input[type="date"] { color-scheme: light; }

/* Compose footer tool row — emoji / GIF buttons paired with the hint. */
.community-compose__tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.community-compose__tools .community-compose__hint { margin-left: 8px; }
.community-tool-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--color-fg-muted);
    font-weight: 600;
    transition: background 0.12s ease, color 0.12s ease;
}
.community-tool-btn:hover { background: var(--color-bg-soft); color: var(--color-fg); }

/* Picker positioning inside the compose form (relative anchor). */
.community-compose { position: relative; }
.community-compose .emoji-picker,
.community-compose .gif-picker { left: 18px; bottom: 60px; }
.community-comment-form { position: relative; }
.community-comment-form .emoji-picker,
.community-comment-form .gif-picker { left: 40px; bottom: 44px; }

/* ----- Post meta chips (rendered on each post above the body) ----- */
.community-post__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}
.community-chip--topic,
.community-chip--tz,
.community-chip--date,
.community-chip--resource {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: filter 0.12s ease, border-color 0.12s ease;
}
.community-chip--topic    { background: #FFF4D6; color: #7A4A00; border-color: #F2D27A; }
.community-chip--tz       { background: #DDEBFF; color: #1E3A6A; border-color: #B6CFF5; }
.community-chip--date     { background: #E5F4E2; color: #1E5A2B; border-color: #BDE0B5; }
.community-chip--resource { background: #F2E6FF; color: #4A1F76; border-color: #D6BBF0; }
.community-chip--resource:hover { filter: brightness(0.96); border-color: #B894E3; }
.community-chip__ext { font-size: 11px; opacity: 0.7; }

/* ----- Per-comment tool buttons (emoji / GIF on the reply form) ----- */
.community-comment-form__tool {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--color-fg-muted);
    font-weight: 600;
    transition: background 0.12s ease, color 0.12s ease;
}
.community-comment-form__tool:hover { background: var(--color-bg-soft); color: var(--color-fg); }

/* Media cards rendered BELOW a post/comment body when the body contains
   URLs. Keeps the prose clean and the URL gets its own visual chrome:
   image URLs (incl. Giphy) render as the actual image, other URLs as a
   compact pill showing the host + an external-link marker. */
.community-post__media,
.community-comment__media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.community-comment__media { margin-top: 6px; }
.community-media {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    transition: border-color 0.12s ease, transform 0.06s ease;
}
.community-media:hover { border-color: var(--color-border-strong); }
.community-media--image { padding: 0; max-width: 240px; max-height: 240px; }
.community-media--image img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: cover;
}
.community-media--sm.community-media--image,
.community-media--sm.community-media--image img { max-width: 180px; max-height: 180px; }

.community-media--link {
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-fg-2);
    background: var(--color-bg-soft);
    max-width: 100%;
}
.community-media__icon { font-size: 12px; line-height: 1; }
.community-media__host { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.community-media__ext { font-size: 11px; opacity: 0.7; }
.community-media--sm.community-media--link { padding: 4px 8px; font-size: 11.5px; }
.community-media--video {
    max-width: 320px;
    max-height: 240px;
    width: 100%;
    border-radius: var(--radius-md);
    background: #000;
    display: block;
}

/* ----- Mention pills (@handle / #group-slug rendered inline) ----- */
.community-mention {
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    padding: 0 5px;
    border-radius: 4px;
    transition: filter 0.12s ease;
}
.community-mention:hover { filter: brightness(0.92); text-decoration: none; }
.community-mention--user  { color: #1E3A6A; background: #DDEBFF; }
.community-mention--group { color: #4A1F76; background: #F2E6FF; }

/* ----- File-chip preview row (between body + foot in compose) ----- */
.community-compose__files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--color-bg-soft);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}
.community-compose__files.is-hidden { display: none; }
.community-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    max-width: 200px;
}
.community-file-chip__icon { font-size: 14px; flex: 0 0 auto; }
.community-file-chip__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.community-file-chip__size { color: var(--color-fg-subtle); font-size: 11px; flex: 0 0 auto; }

/* ============================================================
   Landing-page community-board preview band. Placed above the
   tech-discipline grid; designed to read as a "live wall" — soft
   gradient background, pulsing dot eyebrow, 3-up card grid.
   ============================================================ */
.section--community-preview {
    background:
        radial-gradient(1200px 280px at 80% -10%, rgba(244, 168, 42, 0.10), transparent 60%),
        radial-gradient(900px 240px at 8% 100%, rgba(124, 92, 200, 0.10), transparent 60%),
        var(--color-bg);
    padding-top: 56px;
    padding-bottom: 56px;
}
.community-preview__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.community-preview__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent-deep);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 12px;
}
.community-preview__pulse {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #2E7D32;
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.55);
    animation: community-preview-pulse 1.8s ease-out infinite;
}
@keyframes community-preview-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(46, 125, 50, 0.50); }
    70%  { box-shadow: 0 0 0 10px rgba(46, 125, 50, 0); }
    100% { box-shadow: 0 0 0 0   rgba(46, 125, 50, 0); }
}
.community-preview__title {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.15;
    margin: 0 0 10px;
    max-width: 22ch;
}
.community-preview__intro {
    color: var(--color-fg-2);
    font-size: 15px;
    max-width: 56ch;
    margin: 0;
}
.community-preview__cta { flex: 0 0 auto; }

.community-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 960px) { .community-preview__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .community-preview__grid { grid-template-columns: 1fr; } }

.community-preview-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-fg);
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(11, 16, 32, 0.02);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.community-preview-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}
.community-preview-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.community-preview-card__who {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.community-preview-card__name { font-weight: 700; font-size: 14px; }
.community-preview-card__time { color: var(--color-fg-subtle); font-size: 12px; }
.community-preview-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.community-preview-card__body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-fg-2);
    /* Two-line clamp so cards stay the same visual mass. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.community-preview-card__foot {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px dashed var(--color-border);
    color: var(--color-accent-deep);
    font-size: 13px;
    font-weight: 600;
}
.community-preview-card__cta { white-space: nowrap; }

.community-preview__more {
    margin: 24px 0 0;
    text-align: center;
}
.community-preview__more-link {
    color: var(--color-fg-2);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed var(--color-border-strong);
    padding-bottom: 2px;
}
.community-preview__more-link:hover { color: var(--color-fg); }

/* ============================================================
   Cohorts page (route /cohorts) — time-bound study groups.
   Each cohort card carries cert, exam-date countdown, phase
   pill, and member roster — like a job-posting grid.
   ============================================================ */
.cohorts-head { margin-bottom: 28px; max-width: 720px; }
.cohorts-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent-deep);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 12px;
}
.cohorts-head__pulse {
    width: 9px; height: 9px; border-radius: 50%;
    background: #2E7D32;
    animation: community-pulse 2.4s ease-in-out infinite;
}
.cohorts-head__title {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.15;
    margin: 0 0 10px;
}
.cohorts-head__intro {
    color: var(--color-fg-2);
    font-size: 15px;
    margin: 0 0 8px;
}
.cohorts-head__meta {
    color: var(--color-fg-muted);
    font-size: 13.5px;
    margin: 0;
}
.cohorts-head__meta strong { color: var(--color-fg); font-weight: 700; }

.cohorts-empty {
    background: var(--color-bg);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 48px 24px;
    text-align: center;
    color: var(--color-fg-muted);
}
.cohorts-empty__icon { font-size: 36px; margin-bottom: 8px; }
.cohorts-empty h3 { font-size: 18px; color: var(--color-fg); margin: 0 0 6px; }

/* Cohort archive table (Phase 7 B1) */
.archive-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.archive-table th, .archive-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}
.archive-table th {
    background: var(--color-bg-soft);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-fg-subtle);
    font-weight: 700;
}
.archive-table tr:last-child td { border-bottom: none; }
.archive-table a { color: var(--color-fg); font-weight: 700; text-decoration: none; }
.archive-table a:hover { color: var(--color-accent-deep); }
.archive-pass-pill {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 13px;
}
.archive-pass-pill--high { background: #E5F4E2; color: #1E5A2B; border: 1px solid #BDE0B5; }
.archive-pass-pill--mid  { background: #FFF4D6; color: #7A4A00; border: 1px solid #F2D27A; }
.archive-pass-pill--low  { background: #FFE9E2; color: #6E2E1B; border: 1px solid #F5BFB0; }
.archive-pass-pill strong { font-weight: 700; }
.archive-pass-pill .muted { color: inherit; opacity: 0.7; font-size: 11.5px; }

/* Filter bar above the cohort grid — cert + phase dropdowns. */
.cohort-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 22px;
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.cohort-filter-bar__group { display: inline-flex; flex-direction: column; gap: 4px; }
.cohort-filter-bar__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-fg-subtle);
    font-weight: 700;
}
.cohort-filter-bar__select {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    padding: 6px 26px 6px 10px;
    font: inherit;
    font-size: 13.5px;
}
.cohort-filter-bar__reset {
    margin-left: auto;
    color: var(--color-fg-muted);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px dashed var(--color-border-strong);
}
.cohort-filter-bar__reset:hover { color: var(--color-fg); }

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

.cohort-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.cohort-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}
.cohort-card--sprint  { border-left: 4px solid #F4A82A; }
.cohort-card--active  { border-left: 4px solid #2E7D32; }
.cohort-card--forming { border-left: 4px solid var(--color-accent); }
.cohort-card--graduated, .cohort-card--archived { opacity: 0.75; border-left: 4px solid var(--color-border-strong); }

.cohort-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.cohort-card__cert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
    flex: 1 1 auto;
}
.cohort-card__icon {
    width: 38px; height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    font-size: 18px;
}
.cohort-card__name {
    display: block;
    font-weight: 700;
    color: var(--color-fg);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.25;
}
.cohort-card__name:hover { color: var(--color-accent-deep); }
.cohort-card__sub {
    font-size: 12.5px;
    color: var(--color-fg-muted);
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}
.cohort-card__phase {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-fg-2);
    font-size: 11px;
}

.cohort-card__countdown {
    flex: 0 0 auto;
    text-align: right;
    font-size: 12px;
    color: var(--color-fg-muted);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: #FFF4D6;
    color: #7A4A00;
    border: 1px solid #F2D27A;
}
.cohort-card__countdown strong { font-size: 18px; display: block; line-height: 1; }
.cohort-card__countdown--past {
    background: var(--color-bg-soft);
    color: var(--color-fg-muted);
    border-color: var(--color-border);
}

.cohort-card__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}
.cohort-stat__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-fg-subtle);
    font-weight: 700;
}
.cohort-stat__value { font-size: 14px; color: var(--color-fg); font-weight: 600; }
.cohort-stat__hint  { color: var(--color-fg-subtle); font-weight: 400; }

.cohort-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
}
.cohort-card__progress { font-size: 12.5px; color: var(--color-fg-muted); font-weight: 600; }

/* ============================================================
   Cohort onboarding wizard (route /app/cohorts/new)
   ============================================================ */
.cohort-wizard__steps {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--color-fg-muted);
}
.cohort-wizard__steps li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
}
.cohort-wizard__steps li.is-active {
    border-color: var(--color-accent);
    background: #FFF4D6;
    color: #7A4A00;
    font-weight: 700;
}
.cohort-wizard__steps li.is-done {
    color: var(--color-fg-2);
}
.cohort-wizard__step-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-bg-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}
.cohort-wizard__steps li.is-active .cohort-wizard__step-num {
    background: var(--color-accent);
    color: #fff;
}

.cohort-wizard__panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px 32px;
}
.cohort-wizard__panel h1 { margin: 0 0 8px; font-size: 24px; }
.cohort-wizard__panel .muted { margin: 0 0 22px; }
.cohort-wizard__form .field { margin-bottom: 18px; }
.cohort-wizard__form .field__label { font-weight: 600; font-size: 14px; color: var(--color-fg); }
.cohort-wizard__form .field__label .muted { font-weight: 400; color: var(--color-fg-muted); }
.cohort-wizard__form .field__control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font: inherit;
    font-size: 14px;
}
.cohort-wizard__form input[type="range"].field__control {
    padding: 0;
    border: none;
    background: transparent;
}
.cohort-wizard__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--color-border);
}
.cohort-wizard__escape {
    margin-top: 18px;
    text-align: center;
    color: var(--color-fg-muted);
    font-size: 13px;
}
.cohort-wizard__escape a { color: var(--color-accent-deep); font-weight: 600; }

/* Date-snap notice — light blue info card explaining why the user's
   typed date got rounded to a monthly anchor. */
.cohort-wizard__snap-notice {
    background: #DDEBFF;
    color: #1E3A6A;
    border: 1px solid #B6CFF5;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
}
.cohort-wizard__snap-notice strong { color: #1E3A6A; }

/* ---- Step 2: match cards as radio options ---- */
.cohort-match-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.cohort-match {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.cohort-match:hover { border-color: var(--color-border-strong); background: var(--color-bg-soft); }
.cohort-match input[type="radio"]:checked + .cohort-match__body { color: var(--color-fg); }
.cohort-match:has(input[type="radio"]:checked) {
    border-color: var(--color-accent);
    background: #FFF4D6;
}
.cohort-match--top { border-left: 4px solid #2E7D32; }
.cohort-match--new { border-style: dashed; }
.cohort-match__body { display: flex; flex-direction: column; gap: 2px; }
.cohort-match__head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.cohort-match__phase {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    font-weight: 700;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    color: var(--color-fg-muted);
}
.cohort-match__sub { font-size: 12.5px; color: var(--color-fg-muted); }

/* ---- Commitment ritual fieldset ---- */
.cohort-commit {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 22px 0 0;
}
.cohort-commit legend {
    font-weight: 700;
    color: var(--color-fg);
    padding: 0 8px;
}
.cohort-commit__weak {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.cohort-weak-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 13px;
    cursor: pointer;
    background: var(--color-bg);
    transition: background 0.12s ease, border-color 0.12s ease;
}
.cohort-weak-chip:has(input:checked) {
    background: #DDEBFF;
    border-color: #B6CFF5;
    color: #1E3A6A;
    font-weight: 600;
}

/* Per-member commitment card on the workspace Members tab (cohort-only).
   Rendered below each member's handle row; three small chips —
   hours/week, sessions/week, weak spots — surface the cohort agreement
   so peer-pressure is visible, not hidden. */
.member-commit {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.member-commit--missing { opacity: 0.65; }
.member-commit__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    font-size: 12px;
    color: var(--color-fg-2);
}
.member-commit__chip strong { font-weight: 700; color: var(--color-fg); font-size: 13px; }
.member-commit__chip-label { color: var(--color-fg-subtle); font-size: 11px; }
.member-commit__chip--weak {
    background: #DDEBFF;
    border-color: #B6CFF5;
    color: #1E3A6A;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-commit__none {
    font-size: 12px;
    color: var(--color-fg-subtle);
    font-style: italic;
}

/* Cohort phase banners shown at the top of the workspace body —
   SPRINT (≤7 days), GRADUATED (day after exam), and the recap state
   after the user records PASS/FAIL/SKIP. */
.cohort-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}
.cohort-banner > [aria-hidden="true"] { font-size: 22px; line-height: 1; }
.cohort-banner__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cohort-banner__body strong { font-size: 15px; }
.cohort-banner__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cohort-banner__cta { color: var(--color-accent-deep); font-weight: 700; text-decoration: none; }
.cohort-banner__cta:hover { text-decoration: underline; }

.cohort-banner--sprint {
    background: #FFF4D6;
    border-color: #F2D27A;
    color: #7A4A00;
}
.cohort-banner--priming {
    background: #E5F4E2;
    border-color: #BDE0B5;
    color: #1E5A2B;
    align-items: flex-start;
}
.cohort-banner--syllabus {
    background: var(--color-bg);
    border-color: var(--color-border-strong);
    color: var(--color-fg);
}
.cohort-banner--mock {
    background: #FFF4D6;
    border-color: #F2D27A;
    color: #7A4A00;
    border-style: solid;
}
.cohort-banner--syllabus strong { font-weight: 700; color: var(--color-fg); }

/* Priming task checklist inside the priming banner */
.cohort-priming-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cohort-priming-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}
.cohort-priming-item.is-done { opacity: 0.6; }
.cohort-priming-item.is-done .cohort-priming-body strong { text-decoration: line-through; }
.cohort-priming-form { display: inline-flex; }
.cohort-priming-check {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #BDE0B5;
    background: var(--color-bg);
    color: #1E5A2B;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.cohort-priming-check:hover { background: #F0FFF0; }
.cohort-priming-check.is-done {
    background: #1E5A2B;
    color: #FFFFFF;
    cursor: default;
}
.cohort-priming-body { display: flex; flex-direction: column; line-height: 1.4; }
.cohort-priming-body strong { font-size: 14px; color: #1E5A2B; }
.cohort-priming-body span { font-size: 12.5px; color: var(--color-fg-2); }
.cohort-banner--session-vote {
    background: #F2E6FF;
    border-color: #D6BBF0;
    color: #4A1F76;
    align-items: flex-start;
}
.cohort-banner--session-confirmed {
    background: #E5F4E2;
    border-color: #BDE0B5;
    color: #1E5A2B;
}

/* Vote row inside the session-vote banner — 3 wide buttons, vote-count
   pill on the right of each. Disabled state for already-voted slots. */
.cohort-vote-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
@media (max-width: 640px) { .cohort-vote-list { grid-template-columns: 1fr; } }
.cohort-vote-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #D6BBF0;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: #4A1F76;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.cohort-vote-btn:hover:not(:disabled) { background: #FFFFFF; border-color: #B894E3; }
.cohort-vote-btn.is-voted, .cohort-vote-btn:disabled {
    background: #4A1F76;
    color: #FFFFFF;
    border-color: #4A1F76;
    cursor: default;
}
.cohort-vote-btn__when { font-weight: 700; }
.cohort-vote-btn__count {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11.5px;
    background: rgba(255,255,255,0.6);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    color: inherit;
}
.cohort-vote-btn.is-voted .cohort-vote-btn__count { background: rgba(255,255,255,0.18); }
.cohort-vote-btn__count strong { font-size: 13px; }
.cohort-banner--graduation {
    background: #DDEBFF;
    border-color: #B6CFF5;
    color: #1E3A6A;
}
.cohort-banner--passed {
    background: #E5F4E2;
    border-color: #BDE0B5;
    color: #1E5A2B;
}
.cohort-banner--failed {
    background: #FFE9E2;
    border-color: #F5BFB0;
    color: #6E2E1B;
}

/* Workspace topbar countdown pill — only when group is a cohort.
   Goes amber for ≤7-day SPRINT mode (matches cohort-card--sprint). */
.cohort-countdown-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: #DDEBFF;
    color: #1E3A6A;
    border: 1px solid #B6CFF5;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: filter 0.12s ease, border-color 0.12s ease;
}
.cohort-countdown-pill:hover { filter: brightness(0.96); }
.cohort-countdown-pill--sprint {
    background: #FFF4D6;
    color: #7A4A00;
    border-color: #F2D27A;
    animation: cohort-sprint-pulse 2s ease-in-out infinite;
}
@keyframes cohort-sprint-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(244,168,42, 0.0); }
    50%     { box-shadow: 0 0 0 4px rgba(244,168,42, 0.18); }
}

/* ----- Copy-link / share button on the group hero / workspace ----- */
.group-hero__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    align-self: flex-start;
    border: 1px dashed var(--color-border-strong);
    background: transparent;
    color: var(--color-fg-2);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.group-hero__share-btn:hover { background: var(--color-bg-soft); }

/* "Link copied ✓" / "Copy failed" transient states applied by copy-link.js. */
[data-copy-url].is-copied {
    border-color: #2E7D32;
    color: #2E7D32;
    background: #E8F5E9;
}
[data-copy-url].is-copy-failed {
    border-color: #C62828;
    color: #C62828;
    background: #FFEBEE;
}

.community-login-prompt {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}
.community-login-prompt__icon { font-size: 26px; line-height: 1; }
.community-login-prompt__body { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--color-fg-muted); }
.community-login-prompt__body strong { color: var(--color-fg); font-weight: 700; }
.community-login-prompt a { color: var(--color-accent-deep); font-weight: 600; }
.community-login-prompt a:hover { text-decoration: underline; }

/* Feed head */
.community-feed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 4px;
}
.community-feed-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-fg);
}
.community-feed-head__hint {
    font-size: 12.5px;
    color: var(--color-fg-subtle);
}

/* Feed */
.community-feed { display: flex; flex-direction: column; gap: 16px; }
.community-empty {
    padding: 56px 24px;
    background: var(--color-bg);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    text-align: center;
}
.community-empty__icon { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.community-empty__title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-fg);
}
.community-empty__text {
    margin: 0 auto;
    max-width: 42ch;
    color: var(--color-fg-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* Post card */
.community-post {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.community-post:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-border-strong);
}
.community-post__head { display: flex; gap: 12px; align-items: center; }
.community-post__avatar-link { display: inline-flex; text-decoration: none; }
.community-post__meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.community-post__author {
    font-weight: 700;
    color: var(--color-fg);
    text-decoration: none;
    font-size: 15px;
}
.community-post__author:hover { color: var(--color-accent-deep); }
.community-post__sub {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: var(--color-fg-subtle);
}
.community-post__handle {
    color: var(--color-fg-subtle);
    text-decoration: none;
}
.community-post__handle:hover { color: var(--color-accent-deep); }
.community-post__body {
    margin: 14px 0 16px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-fg-2);
    white-space: pre-wrap;
    word-break: break-word;
}
.community-post__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 0;
}

/* Action chips (like, comment count) */
.community-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 6px 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-fg-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.05s ease;
}
.community-action:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-border-strong);
    color: var(--color-fg);
}
.community-action:active { transform: translateY(1px); }
.community-action__icon { width: 16px; height: 16px; flex: 0 0 auto; }
.community-action__count { font-weight: 700; color: var(--color-fg); }
.community-action--static { cursor: default; }
.community-action--static:hover { background: transparent; border-color: var(--color-border); color: var(--color-fg-muted); }
.community-action--static:hover .community-action__count { color: var(--color-fg); }

.community-like.is-liked {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
    font-weight: 700;
}
.community-like.is-liked .community-action__count { color: var(--color-accent-deep); }
.community-like.is-liked:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
}

/* Comments — bubble style */
.community-comments {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.community-comment { display: flex; gap: 10px; align-items: flex-start; }
.community-comment__avatar-link { display: inline-flex; text-decoration: none; flex: 0 0 auto; }
.avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.avatar--md { width: 44px; height: 44px; font-size: 14px; }
.community-comment__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.community-comment__bubble {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 12px 10px;
}
.community-comment__author {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-fg);
    text-decoration: none;
}
.community-comment__author:hover { color: var(--color-accent-deep); }
.community-comment__text {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-fg-2);
    white-space: pre-wrap;
    word-break: break-word;
}
.community-comment__time { font-size: 11.5px; color: var(--color-fg-subtle); padding-left: 4px; }
.community-comment-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border);
}
.community-comment-form__input {
    flex: 1 1 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    background: var(--color-bg-soft);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.community-comment-form__input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-bg);
    box-shadow: 0 0 0 3px rgba(244, 168, 42, 0.12);
}

@media (max-width: 640px) {
    .community-entry { flex-direction: column; align-items: flex-start; gap: 12px; }
    .community-compose__foot { flex-direction: column; align-items: stretch; }
    .community-compose__hint { max-width: none; }
    .community-post { padding: 18px 16px; }
    .community { padding-top: 28px; }
}

/* ============================================================
   Social — connections (/app/connections) + direct messages
   ============================================================ */

/* --- Connections list --- */
.connection-list { display: flex; flex-direction: column; margin-top: 12px; }
.connection-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}
.connection-row:first-child { border-top: 0; }
.connection-row__meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.connection-row__name {
    font-weight: 700;
    color: var(--color-fg);
    text-decoration: none;
}
.connection-row__name:hover { color: var(--color-accent-deep); }
.connection-row__sub { font-size: 12.5px; color: var(--color-fg-subtle); }
.connection-row__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* --- DM inbox --- */
.dm-inbox { display: flex; flex-direction: column; }
.dm-inbox__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    margin: 0 -8px;
    border-top: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-fg);
    border-radius: var(--radius-sm);
    transition: background 0.12s ease;
}
.dm-inbox__row:first-child { border-top: 0; }
.dm-inbox__row:hover { background: var(--color-surface); }
.dm-inbox__meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dm-inbox__name { font-weight: 700; }
.dm-inbox__row.is-unread .dm-inbox__name { color: var(--color-fg); }
.dm-inbox__preview {
    font-size: 13px;
    color: var(--color-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dm-inbox__row.is-unread .dm-inbox__preview { color: var(--color-fg-2); font-weight: 600; }
.dm-inbox__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}
.dm-inbox__time { font-size: 12px; color: var(--color-fg-subtle); }
.dm-inbox__badge {
    background: var(--color-accent);
    color: var(--color-fg);
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* --- DM thread --- */
.dm-thread__head { display: flex; align-items: center; gap: 12px; }
.dm-thread__back {
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    color: var(--color-fg-muted);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.dm-thread__back:hover { background: var(--color-surface); color: var(--color-fg); }
.dm-thread__who { display: flex; flex-direction: column; }
.dm-thread__name { font-weight: 700; color: var(--color-fg); text-decoration: none; }
.dm-thread__name:hover { color: var(--color-accent-deep); }
.dm-thread__sub { font-size: 12.5px; color: var(--color-fg-subtle); }

.dm-thread {
    display: flex;
    flex-direction: column;
    /* Fill the viewport beneath the topbar + thread header so the
       compose bar pins to the bottom and the message stream grows /
       shrinks with the window, instead of a fixed-height block that
       leaves a tall empty gap on short conversations. */
    height: calc(100vh - 220px);
    min-height: 380px;
}
.dm-thread__stream {
    flex: 1 1 auto;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    font-size: 15px;
    line-height: 1.25;
}
/* Each message is a single block paragraph-like row. The bubble is
   display:inline so it physically cannot inflate beyond its own line
   height — the .dm-msg row is then just one line-box tall (or as many
   as the text wraps to). Mine/theirs differ only by text-align. */
.dm-msg {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.25;
    min-height: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.dm-msg--mine   { text-align: right; }
.dm-msg--theirs { text-align: left; }
.dm-msg__bubble {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.25;
    /* white-space: normal (default) here so the Thymeleaf indentation
       between HTML comments inside the bubble doesn't become rendered
       whitespace. Per-line preservation for the user's actual message
       text lives on the inner <span>. */
    white-space: normal;
    word-break: break-word;
    background: transparent;
    border: none;
    color: var(--color-fg);
}
/* User's actual message text — preserves newlines they typed (Shift+Enter)
   without inheriting the bubble container's whitespace collapsing. */
.dm-msg__bubble > span { white-space: pre-wrap; }
/* Per-message timestamp lives on .dm-msg as the native title= attribute
   (hover tooltip) so it doesn't add any vertical layout space between
   consecutive bubbles. */
.dm-thread__compose {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.dm-thread__input {
    flex: 1 1 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
}
.dm-thread__input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

@media (max-width: 640px) {
    .connection-row { flex-wrap: wrap; }
    .connection-row__actions { width: 100%; padding-left: 50px; }
    /* DM thread becomes near-full-width and the chrome shrinks so the
       message area gets every available pixel. */
    .dm-msg { max-width: 92%; }
    .dm-thread { height: calc(100vh - 180px); min-height: 320px; }
    .dm-thread__stream { font-size: 14px; line-height: 1.3; padding-right: 0; }
    .dm-msg, .dm-msg__bubble { font-size: 14px; line-height: 1.3; }
    .dm-thread__head { gap: 8px; }
    .dm-thread__name { font-size: 15px; }
    .dm-thread__sub { font-size: 11.5px; }
    .dm-thread__compose { gap: 4px; padding: 10px 8px; margin-top: 8px; padding-top: 10px; }
    .dm-thread__icon-btn { width: 28px; height: 28px; font-size: 14px; }
    .dm-thread__input { font-size: 16px; /* 16px stops iOS auto-zoom */ padding: 6px 9px; }
}
@media (max-width: 480px) {
    .dm-msg { max-width: 96%; }
    .dm-thread { height: calc(100vh - 160px); }
    .dm-thread__back { font-size: 18px; padding: 4px 8px; }
    .avatar { width: 32px; height: 32px; font-size: 12px; }
}
/* Conversation page tightens its workspace padding so mobile gets every
   pixel of horizontal room for the message stream. On small phones, the
   navigation sidebar is hidden so the message stream is the full width
   of the viewport. */
.conversation-body { padding: 20px 24px; }
@media (max-width: 640px) {
    .conversation-body { padding: 12px 12px 8px; }
    body:has(.conversation-body) .app-sidebar { display: none; }
    body:has(.conversation-body) .app-shell { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .conversation-body { padding: 8px 8px 6px; } }

/* ============================================================
   Notifications — header bell, dropdown panel, and the
   /app/notifications page. Reuses the .search-panel dropdown
   shell plus the .dm-inbox__badge / .avatar primitives.
   ============================================================ */

/* Bell button + badge — lives in app-topbar and the marketing header. */
.notif-bell {
    position: relative;          /* anchors the absolute .notif-panel */
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.notif-bell__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    background: none;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--color-fg-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.notif-bell__button:hover { background: var(--color-bg-soft); color: var(--color-fg); }
.notif-bell__button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.notif-bell__icon { display: block; width: 22px; height: 22px; }
/* Badge — the amber pill from .dm-inbox__badge, floated over the bell. */
.notif-bell__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-accent);
    color: var(--color-fg);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dropdown panel — the shared .search-panel shell, but anchored to the
   (small) bell rather than stretched full-width across a search box. */
.notif-panel {
    width: 340px;
    max-width: calc(100vw - 32px);
    left: auto;
    right: 0;
    padding: 6px 0;
}
.notif-panel__head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-fg-muted);
    padding: 12px 16px 6px;
}
.notif-panel__empty {
    padding: 22px 16px;
    color: var(--color-fg-muted);
    font-size: 13px;
    text-align: center;
}

/* A single notification row — styled to work both as an <a> (dropdown) and
   as a full-width <button> inside a form (the /app/notifications page). */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background 0.08s ease;
}
.notif-item:hover { background: var(--color-bg-soft); }
.notif-item--unread {
    background: var(--color-accent-soft);
    border-left-color: var(--color-accent);
}
.notif-item__avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
    flex: 0 0 auto;
}
.notif-item__avatar--system {
    background: var(--color-bg-soft);
    color: var(--color-fg-muted);
}
.notif-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.notif-item__msg {
    font-size: 13px;
    line-height: 1.35;
    color: var(--color-fg);
}
.notif-item--unread .notif-item__msg { font-weight: 600; }
.notif-item__time {
    font-size: 11px;
    color: var(--color-fg-subtle);
}

/* Panel footer — mark-all-read + view-all, mirrors .search-panel__footer. */
.notif-panel__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    margin-top: 4px;
    border-top: 1px solid var(--color-border);
}
.notif-panel__readall { display: inline; margin: 0; }
/* Push the "View all →" link to the far right while Mark/Clear stay grouped left. */
.notif-panel__foot-link { margin-left: auto; }
.notif-panel__foot-btn {
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-fg-muted);
    cursor: pointer;
}
.notif-panel__foot-btn:hover { color: var(--color-fg); text-decoration: underline; }
.notif-panel__foot-btn--danger { color: var(--color-danger); }
.notif-panel__foot-btn--danger:hover { color: #BC2A2A; }
.notif-panel__foot-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent-deep);
    text-decoration: none;
}
.notif-panel__foot-link:hover { text-decoration: underline; }

/* Full /app/notifications page — each row is a <form> wrapping a .notif-item. */
.notif-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.notif-page__actions { display: flex; align-items: center; gap: 8px; }
.notif-page__actions form { margin: 0; }
.notif-list { display: flex; flex-direction: column; }
.notif-row { margin: 0; border-bottom: 1px solid var(--color-border); }
.notif-row:last-child { border-bottom: none; }
.notif-list .notif-item { padding: 14px 12px; }

/* ============================================================
   Mobile responsive — workspace tabs (Chat / Notes / Video /
   Members / Resources). Tunes paddings, font sizes, and grid
   collapses so the workspace stays readable on phones.
   ============================================================ */

@media (max-width: 860px) {
    /* Resource + Note shells already collapse to a single column via
       earlier rules; tighten paddings and stacking here. */
    .resource-shell, .note-shell { gap: 18px; }
    .resource-add, .note-add { position: static; padding: 18px; }
    .resource-tiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
    .resource-tile { min-height: 240px; }
    .resource-tile__link { padding: 20px; }
    .resource-tile__title { font-size: 17px; }
    .resource-tile__desc { font-size: 14px; }
    .note-card { padding: 22px 22px; }
    .note-card__title { font-size: 19px; }
    .note-card__body { font-size: 15.5px; }

    .member-mgmt-row { padding: 14px 16px; gap: 12px; }
    .member-mgmt-row__name { font-size: 16px; }
    .member-mgmt-row__sub { font-size: 13.5px; }

    /* Workspace header — title + capacity + leave button were
       cramming horizontally; let them wrap. */
    .workspace-header__title { flex-wrap: wrap; gap: 8px 12px; }
    .workspace-header__title h2 { font-size: 19px; flex: 1 1 100%; }
}

@media (max-width: 640px) {
    /* Single-column tiles + cards on phones — keeps lines readable
       and the layout from feeling cramped. */
    .resource-tiles { grid-template-columns: 1fr; }
    .resource-tile { min-height: 0; }   /* let content size it */
    .resource-tile__link { padding: 18px; gap: 10px; }
    .resource-tile__title { font-size: 17px; }
    .resource-tile__desc {
        /* Let descriptions show fully on a phone — single-column
           means height isn't competing with other tiles in a row. */
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }

    .note-card { padding: 20px 20px; }
    .note-card__title { font-size: 18px; }
    .note-card__body { font-size: 15px; line-height: 1.6; }
    .note-card__actions .btn { padding: 5px 10px; font-size: 13px; }

    .member-mgmt-row { padding: 12px 14px; gap: 10px; }
    /* Tighter avatar so the row stays in a single line at typical
       seed-user name lengths. */
    .member-mgmt-row .avatar { width: 36px; height: 36px; font-size: 13px; }
    .member-mgmt-row__name { font-size: 15px; gap: 6px; }
    .member-mgmt-row__sub { font-size: 13px; }
    .member-mgmt-row__pill { font-size: 10px; padding: 2px 6px; }

    /* Tab labels: slightly tighter so more of them are visible
       before the horizontal scroll kicks in. */
    .tabs a { padding: 10px 12px; font-size: 14px; }

    .workspace-body { padding: 12px !important; }
    .workspace-header__title h2 { font-size: 18px; }
    .workspace-header__title .capacity,
    .workspace-header__title .online-pill { font-size: 12px; }

    /* Chat panel — make the message font + input usable on phones. */
    .chat { min-height: 360px; }
    .message__text { font-size: 15px; }
    .chat-input { gap: 6px; padding: 10px; }
    .chat-input input { font-size: 16px; /* 16px stops iOS auto-zoom on focus */ }
}

/* ==========================================================================
   Phase 16 — DM polish: inbox header, presence, sticky thread head, empty
   states. Sits AFTER the original .dm-inbox / .dm-thread rules so these
   refinements win on specificity ties.
   ========================================================================== */

/* --- Inbox page head: eyebrow + title + inline filter ------------------- */
.dm-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.dm-page-head__title {
    margin: 4px 0 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-fg);
}
.dm-page-head__filter { flex: 0 1 320px; }
.dm-page-head__input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-fg);
    font-size: 13.5px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dm-page-head__input::placeholder { color: var(--color-fg-subtle); }
.dm-page-head__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.18);
}

/* --- Inbox panel + rows refinement -------------------------------------- */
.dm-inbox-panel { padding: 0; overflow: hidden; }
.dm-inbox__row { gap: 14px; padding: 14px 18px; align-items: center; }
.dm-inbox__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.dm-inbox__top .dm-inbox__name { font-size: 14.5px; }
.dm-inbox__handle {
    font-size: 12.5px;
    color: var(--color-fg-subtle);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.dm-inbox__preview { font-size: 13.5px; }
.dm-inbox__row--filtered { display: none !important; }

/* --- Empty states ------------------------------------------------------- */
.dm-empty {
    text-align: center;
    padding: 56px 24px 64px;
    color: var(--color-fg-subtle);
}
.dm-empty h3 {
    margin: 14px 0 8px;
    color: var(--color-fg);
    font-size: 18px;
    font-weight: 700;
}
.dm-empty p { margin: 0 auto; max-width: 480px; line-height: 1.55; }
.dm-empty__icon {
    font-size: 40px;
    line-height: 1;
    opacity: 0.75;
}
.dm-empty-filter {
    text-align: center;
    padding: 28px 16px;
    color: var(--color-fg-subtle);
    font-size: 14px;
    margin: 0;
}

/* --- Conversation thread: sticky head + presence ------------------------ */
.dm-thread--panel {
    margin-top: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
}
.dm-thread__head--sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 14px 18px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    gap: 14px;
}
.dm-thread__avatar-link { line-height: 0; text-decoration: none; }
.dm-thread__avatar-link .avatar { width: 44px; height: 44px; font-size: 14px; }
.dm-thread__who { gap: 2px; min-width: 0; }
.dm-thread__name { font-size: 16px; line-height: 1.2; }
.dm-thread__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--color-fg-subtle);
    min-width: 0;
}
.dm-thread__sep { color: var(--color-border-strong); }
.dm-thread__presence {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.dm-thread__presence::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-fg-subtle);
    flex: none;
}
.dm-thread__presence.is-online {
    color: #15803d;
    font-weight: 600;
}
.dm-thread__presence.is-online::before {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}
.dm-thread__spacer { flex: 1 1 auto; }
.dm-thread__head-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-deep);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.dm-thread__head-action:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
}

/* Compose box — sit flush at the bottom of the panel, soft top shadow.   */
.dm-thread--panel .dm-thread__compose {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 12px 16px;
    margin: 0;
}
.dm-thread--panel .dm-thread__stream { padding: 18px; }

@media (max-width: 640px) {
    .dm-page-head { gap: 10px; }
    .dm-page-head__filter { flex-basis: 100%; }
    .dm-thread__head-action { display: none; }
    .dm-thread__head--sticky { padding: 10px 12px; gap: 10px; }
    .dm-thread__avatar-link .avatar { width: 38px; height: 38px; }
}

/* ============================================================================
   Phase 17 — Group soft-archive
   ============================================================================ */
.archived-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-left: 4px solid #B45309;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin: 0 0 16px;
    color: #78350F;
}
.archived-banner > span[aria-hidden] { font-size: 22px; line-height: 1; flex: none; }
.archived-banner__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.archived-banner__body strong { color: #78350F; }
.archived-banner__body span { font-size: 13.5px; color: #92400E; }
.archived-banner__action { flex: none; }

.workspace-danger { border-color: #FECACA; background: #FEF2F2; }
.workspace-danger__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.workspace-danger__row > div { flex: 1 1 280px; min-width: 0; }
.btn-danger {
    background: #DC2626;
    color: #fff;
    border: 1px solid #B91C1C;
}
.btn-danger:hover { background: #B91C1C; }

/* Sidebar — archived groups get a small 📦 indicator + reduced opacity. */
.nav-link__sub--archived { opacity: 0.65; }
.nav-link__sub--archived::after {
    content: " 📦";
    font-size: 11px;
    margin-left: 4px;
}

/* ============================================================================
   Phase 17 — Mobile bottom-nav. Hidden by default (desktop owns nav via
   sidebar); revealed below 640px as a sticky thumb-reach band.
   ============================================================================ */
.mobile-bottom-nav { display: none; }

@media (max-width: 640px) {
    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 50;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
        padding: 4px 0 calc(env(safe-area-inset-bottom, 0px));
    }
    .mobile-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 4px 4px;
        text-decoration: none;
        color: var(--color-fg-subtle);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.1;
        min-height: 52px;
        transition: color 0.12s ease;
    }
    .mobile-bottom-nav__item:hover { color: var(--color-fg); }
    .mobile-bottom-nav__item.is-active { color: var(--color-accent-deep); }
    .mobile-bottom-nav__icon { font-size: 19px; line-height: 1; }
    .mobile-bottom-nav__label { font-size: 10.5px; }

    /* Keep page content from being hidden under the fixed bar. */
    body { padding-bottom: 64px; }
}

/* ============================================================================
   Phase 17 — Split-pane DM layout. Inbox left, thread right. Stacks on
   phones (≤900px) — inbox-only when no peer, thread-only when peer set.
   ============================================================================ */
.dm-split {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
    min-height: calc(100vh - var(--app-topbar-height, 64px));
    background: var(--color-bg-soft);
}
.dm-split__inbox {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.dm-pane-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--color-border);
}
.dm-pane-head__title {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-fg);
}
.dm-pane-head__filter { flex: 1 1 140px; max-width: 180px; }
.dm-pane-head__input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-fg);
    font-size: 12.5px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dm-pane-head__input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.18);
}
.dm-split__inbox .dm-inbox-panel { flex: 1 1 auto; overflow-y: auto; padding: 0; }
.dm-inbox__row.is-selected {
    background: var(--color-bg-soft);
    box-shadow: inset 3px 0 0 var(--color-accent-deep);
}
.dm-split__thread {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px 24px 24px;
}
.dm-split__thread .dm-thread__head--sticky {
    position: sticky;
    top: 0;
    margin: -20px -24px 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}
.dm-split__thread .dm-thread--panel {
    margin-top: 16px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dm-split__thread .dm-thread__stream { flex: 1 1 auto; }

.dm-split__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-fg-subtle);
    padding: 48px 24px;
}
.dm-split__empty h3 { margin: 14px 0 8px; color: var(--color-fg); font-size: 18px; font-weight: 700; }
.dm-split__empty p { margin: 0 auto; max-width: 420px; line-height: 1.55; }
.dm-split__empty-icon { font-size: 40px; line-height: 1; opacity: 0.75; }

.dm-thread__back--mobile-only { display: none; }

@media (max-width: 900px) {
    .dm-split {
        grid-template-columns: 1fr;
    }
    .dm-split--open .dm-split__inbox { display: none; }
    .dm-split:not(.dm-split--open) .dm-split__thread { display: none; }
    .dm-split__thread { padding: 16px; }
    .dm-split__thread .dm-thread__head--sticky { margin: -16px -16px 0; }
    .dm-thread__back--mobile-only { display: inline-flex; }
}

/* ============================================================================
   Phase 18 — Invite-by-link UI (workspace Members tab + /invite landing).
   ============================================================================ */
.invite-mgmt { border-color: var(--color-border); background: var(--color-surface); }
.invite-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: 12px 0 6px;
    flex-wrap: wrap;
}
.invite-form label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--color-fg-subtle);
    gap: 4px;
}
.invite-list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
}
.invite-list__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.invite-list__url {
    flex: 1 1 240px;
    min-width: 0;
    font-family: monospace;
    font-size: 12.5px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-soft);
    color: var(--color-fg);
    cursor: text;
}
.invite-list__meta { font-size: 12px; }

.invite-landing { padding: 64px 24px; display: flex; justify-content: center; }
.invite-landing--anon { background: var(--color-bg-soft); min-height: calc(100vh - 200px); align-items: flex-start; }
.invite-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 36px 40px;
    max-width: 560px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-md);
}
.invite-card__icon { font-size: 40px; line-height: 1; }
.invite-card__title {
    margin: 12px 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-fg-subtle);
}
.invite-card__group {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-fg);
}
.invite-card__sub { margin: 0 0 14px; font-size: 13.5px; }
.invite-card__desc { margin: 14px 0; color: var(--color-fg-2); line-height: 1.55; }
.invite-card__chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.invite-card__note { font-size: 13px; margin: 16px 0; color: var(--color-fg-2); }
.invite-action-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.btn-lg { font-size: 15px; padding: 12px 22px; }

/* ============================================================================
   Phase 18 — /app/home activity feed.
   ============================================================================ */
.activity-feed {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin: 0 0 18px;
}
.activity-feed__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}
.activity-feed__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-display);
}
.activity-feed__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.activity-feed__item {
    border-top: 1px solid var(--color-border);
}
.activity-feed__item:first-child { border-top: 0; }
.activity-feed__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
    color: var(--color-fg);
}
.activity-feed__link:hover .activity-feed__text { color: var(--color-fg); }
.activity-feed__icon {
    font-size: 18px;
    line-height: 1.2;
    flex: 0 0 auto;
    width: 26px;
    text-align: center;
}
.activity-feed__body {
    flex: 1 1 auto;
    min-width: 0;
}
.activity-feed__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.activity-feed__when {
    color: var(--color-fg-subtle);
    font-size: 12px;
    white-space: nowrap;
}
.activity-feed__text {
    color: var(--color-fg-2);
    font-size: 13.5px;
    line-height: 1.45;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   Phase 18 — 2FA / TOTP setup UI.
   ============================================================================ */
.totp-setup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 720px) {
    .totp-setup-grid { grid-template-columns: 1fr; }
}
.totp-setup-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 20px;
}
.totp-qrcode {
    display: inline-block;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin: 8px 0 14px;
    min-height: 200px;
    min-width: 200px;
}
.totp-secret {
    display: block;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    word-break: break-all;
    user-select: all;
}
.totp-backup-codes {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.totp-backup-codes li {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 7px 10px;
    font-family: monospace;
    font-size: 13.5px;
    letter-spacing: 0.05em;
    text-align: center;
    user-select: all;
}
.totp-challenge-icon {
    font-size: 40px;
    line-height: 1;
    text-align: center;
}

/* ============================================================================
   Phase 22 — Draft-restore banner (chat / DM / community composers).
   ============================================================================ */
.draft-restore-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 16px 6px;
    font-size: 13px;
    color: #1E3A8A;
}
.draft-restore-banner__icon { font-size: 14px; line-height: 1; }
.draft-restore-banner__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.draft-restore-banner__text em { color: var(--color-fg-2); font-style: normal; }
.draft-restore-banner__restore {
    background: #1D4ED8;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 4px 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12.5px;
}
.draft-restore-banner__restore:hover { background: #1E40AF; }
.draft-restore-banner__discard {
    background: none;
    border: 0;
    color: #1E3A8A;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 14px;
}

/* ============================================================================
   Phase 22 — Sign-in audit log table (/app/settings/security).
   ============================================================================ */
.signin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.signin-table thead th {
    text-align: left;
    color: var(--color-fg-subtle);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}
.signin-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.signin-table tbody tr:last-child td { border-bottom: 0; }
.signin-table tbody tr:hover { background: var(--color-bg-soft); }
.signin-table__ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--color-fg-subtle); }

/* ============================================================================
   Phase 23 — Emoji reaction picker + chip row on chat messages.
   ============================================================================ */
.message__react {
    position: relative;
    display: inline-block;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.message:hover .message__react,
.message__react:focus-within { opacity: 1; }
.message__react-trigger {
    background: none;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
    font-size: 14px;
}
.message__react-picker {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 4px;
    display: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 8px;
    box-shadow: var(--shadow-md);
    z-index: 20;
    white-space: nowrap;
}
.message__react:hover .message__react-picker,
.message__react:focus-within .message__react-picker { display: inline-flex; gap: 2px; }
.message__react-picker button {
    background: none;
    border: 0;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 6px;
}
.message__react-picker button:hover { background: var(--color-bg-soft); }

.message__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.message__reactions:empty { display: none; }
.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.4;
    color: var(--color-fg-2);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.reaction-chip:hover { border-color: var(--color-border-strong); }
.reaction-chip.is-mine {
    background: rgba(244, 168, 42, 0.15);
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
    font-weight: 600;
}
.reaction-chip__count { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Phase 23 — Per-tab presence avatar stack under workspace tabs.
   ============================================================================ */
.tab-presence-stack {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
}
.tab-presence-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent-deep);
    border: 1.5px solid var(--color-surface);
    font-size: 9px;
    font-weight: 700;
    margin-left: -4px;
}
.tab-presence-avatar:first-child { margin-left: 0; }
.tab-presence-more {
    margin-left: 4px;
    font-size: 10px;
    color: var(--color-fg-subtle);
    font-weight: 600;
}

/* ============================================================================
   Phase 22 — In-product changelog (/app/whats-new + admin queue).
   ============================================================================ */
.changelog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.changelog-entry {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
}
.changelog-entry__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.changelog-entry__kind {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: #E5E7EB;
    color: #374151;
}
.changelog-entry__kind--feature  { background: #DBEAFE; color: #1E3A8A; }
.changelog-entry__kind--fix      { background: #DCFCE7; color: #14532D; }
.changelog-entry__kind--security { background: #FEE2E2; color: #991B1B; }
.changelog-entry__kind--note     { background: #FEF3C7; color: #78350F; }
.changelog-entry__date { font-size: 12px; }
.changelog-entry__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font-display);
}
.changelog-entry__body {
    margin: 0;
    line-height: 1.55;
    color: var(--color-fg-2);
    white-space: pre-wrap;
}

/* ============================================================================
   Phase 22 — Pinned chat message banner + inline 📌 action.
   ============================================================================ */
.chat-pin-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-left: 4px solid #B45309;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin: 4px 16px 8px;
}
.chat-pin-banner__icon { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.chat-pin-banner__body {
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: var(--color-fg);
}
.chat-pin-banner__meta { font-size: 12.5px; margin-bottom: 3px; }
.chat-pin-banner__meta strong { color: #78350F; }
.chat-pin-banner__text {
    font-size: 13.5px;
    color: var(--color-fg-2);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-pin-banner__unpin {
    background: none;
    border: 0;
    color: #78350F;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    align-self: center;
}
.chat-pin-banner__unpin:hover { color: #B45309; }

/* Inline 📌 pin form lives in .message__head — hidden until row-hover. */
.message__pin-form {
    display: inline;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.message:hover .message__pin-form { opacity: 1; }
.message__pin-form button { background: none; border: 0; padding: 2px 4px; cursor: pointer; }

/* ============================================================================
   Phase 21 — Code runner output panel (workspace Code tab).
   ============================================================================ */
.code-runner {
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}
.code-runner__output {
    margin-top: 10px;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13px;
    max-height: 320px;
    overflow: auto;
}
.code-runner__output.is-hidden { display: none; }
.code-runner__status { margin-bottom: 6px; font-weight: 600; font-size: 12.5px; }
.code-runner__ok  { color: #15803d; }
.code-runner__bad { color: #B91C1C; }
.code-runner__stdout,
.code-runner__stderr {
    margin: 4px 0;
    padding: 8px 10px;
    background: var(--color-bg-soft);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.4;
}
.code-runner__stderr { background: #FEF2F2; color: #991B1B; }
.code-runner__notice {
    padding: 10px 12px;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: 6px;
    color: #78350F;
    font-size: 13px;
    line-height: 1.5;
}
.code-runner__err {
    padding: 10px 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    color: #991B1B;
    font-size: 13px;
}
.code-runner__placeholder { padding: 6px 0; font-size: 13px; }

/* ============================================================================
   Phase 21 — Universal search type-filter pills on /search.
   ============================================================================ */
.search-page__facets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.search-facet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-fg-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.search-facet:hover { border-color: var(--color-border-strong); }
.search-facet.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent-deep);
    color: #4A2C00;
}
.search-facet span {
    background: rgba(0,0,0,0.05);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Phase 21 — Linked-OAuth row in /app/settings.
   ============================================================================ */
.oauth-link-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.oauth-link-row--linked {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
}
.oauth-link-row__provider {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-fg-2);
}
.oauth-link-row__provider strong { color: var(--color-fg); font-weight: 700; }

/* ============================================================================
   Phase 21 — Group cover image banner on /g/{slug}.
   ============================================================================ */
.group-banner {
    margin: -16px 0 18px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-soft);
    aspect-ratio: 4 / 1;
    max-height: 260px;
}
.group-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 640px) {
    .group-banner { aspect-ratio: 16 / 9; max-height: 200px; }
}

/* ============================================================================
   Phase 20 — Cohort calendar (week-by-week syllabus surface).
   ============================================================================ */
.cohort-banner__action {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-deep);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.cohort-banner__action:hover { background: var(--color-accent-soft); }

.cohort-cal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 28px;
    flex-wrap: wrap;
}
.cohort-cal-head__pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
.cohort-cal-pill {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--color-fg-2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cohort-cal-pill strong { color: var(--color-fg); font-weight: 700; }
.cohort-cal-pill__link {
    color: var(--color-accent-deep);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}

.cohort-cal-weeks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.cohort-cal-week {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color 0.15s ease;
}
.cohort-cal-week:hover { border-color: var(--color-border-strong); }
.cohort-cal-week--current {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    box-shadow: var(--shadow-sm);
}
.cohort-cal-week--past { opacity: 0.65; }
.cohort-cal-week__num {
    font-size: 12px;
    color: var(--color-fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cohort-cal-week__num strong { color: var(--color-fg); }
.cohort-cal-week__badge {
    background: var(--color-accent);
    color: #4A2C00;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.cohort-cal-week__badge--past {
    background: var(--color-bg-soft);
    color: var(--color-fg-subtle);
}
.cohort-cal-week__title {
    margin: 4px 0 8px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-display);
}
.cohort-cal-week__domains {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 13px;
    color: var(--color-fg-2);
    line-height: 1.5;
}

/* ============================================================================
   Phase 20 — Profile activity heatmap (53×7 grid SVG).
   ============================================================================ */
.heatmap-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.heatmap-panel__total { font-size: 13px; }
.heatmap-grid-wrap { overflow-x: auto; }
.heatmap-grid { display: block; min-width: 720px; max-width: 100%; height: auto; }
.heatmap-cell--l0 { fill: #ebedf0; }
.heatmap-cell--l1 { fill: #FEE7BD; }
.heatmap-cell--l2 { fill: #FAD17B; }
.heatmap-cell--l3 { fill: #F4A82A; }
.heatmap-cell--l4 { fill: #B45309; }
.heatmap-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
}
.heatmap-legend__cell {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}
/* Legend cells are <span>, so fill: doesn't apply — explicit background. */
.heatmap-legend__cell.heatmap-cell--l0 { background: #ebedf0; }
.heatmap-legend__cell.heatmap-cell--l1 { background: #FEE7BD; }
.heatmap-legend__cell.heatmap-cell--l2 { background: #FAD17B; }
.heatmap-legend__cell.heatmap-cell--l3 { background: #F4A82A; }
.heatmap-legend__cell.heatmap-cell--l4 { background: #B45309; }

/* ============================================================================
   Phase 20 — Per-group notification snooze (workspace topbar).
   ============================================================================ */
.mute-menu { position: relative; display: inline-block; }
.mute-menu > summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 12px;
}
.mute-menu > summary::-webkit-details-marker { display: none; }
.mute-menu[data-muted="true"] > summary {
    color: var(--color-accent-deep);
    background: rgba(244, 168, 42, 0.12);
    border-color: var(--color-accent);
}
.mute-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 12px;
}
.mute-menu__status { font-size: 12px; margin-bottom: 8px; }
.mute-menu__form { display: flex; flex-direction: column; gap: 4px; }
.mute-menu__opt {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 7px 10px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-fg);
    transition: background 0.12s ease, border-color 0.12s ease;
}
.mute-menu__opt:hover { background: var(--color-surface); border-color: var(--color-border-strong); }
.mute-menu__opt--primary {
    margin-top: 6px;
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
    font-weight: 600;
}

/* ============================================================================
   Phase 20 — Group analytics page.
   ============================================================================ */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.analytics-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}
.analytics-card__label { font-size: 12px; color: var(--color-fg-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.analytics-card__big {
    margin-top: 6px;
    font-size: 32px;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--color-fg);
    line-height: 1.1;
}
.analytics-card__sub { font-size: 18px; color: var(--color-fg-subtle); font-weight: 500; }
.analytics-card__trend { margin-top: 6px; font-size: 13px; color: var(--color-fg-subtle); font-weight: 600; }
.analytics-trend--up   { color: #15803d; }
.analytics-trend--down { color: #B91C1C; }

.analytics-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.analytics-section__title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-display);
}

.analytics-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
    height: 140px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.analytics-bar {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}
.analytics-bar__fill {
    width: 100%;
    max-width: 22px;
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: opacity 0.15s ease;
}
.analytics-bar:hover .analytics-bar__fill { opacity: 0.8; }
.analytics-bar__label {
    position: absolute;
    bottom: -22px;
    font-size: 10px;
    color: var(--color-fg-subtle);
    white-space: nowrap;
}
/* Only label every other bar to avoid crowding. */
.analytics-bar:nth-child(even) .analytics-bar__label { visibility: hidden; }

.analytics-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rank;
}
.analytics-rank__row {
    counter-increment: rank;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
}
.analytics-rank__row:first-child { border-top: 0; }
.analytics-rank__row::before {
    content: counter(rank);
    flex: 0 0 24px;
    text-align: center;
    color: var(--color-fg-subtle);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.analytics-rank__link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-fg);
    min-width: 0;
}
.analytics-rank__meta { display: flex; flex-direction: column; min-width: 0; }
.analytics-rank__count { color: var(--color-fg-subtle); font-size: 13px; font-variant-numeric: tabular-nums; }

.analytics-inactive { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.analytics-inactive__row { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: 8px; }
.analytics-inactive__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--color-fg);
}
.analytics-inactive__link:hover { background: var(--color-surface); }

/* ============================================================================
   Phase 19 — Markdown rendered content (notes). Scoped to .markdown-body so
   it doesn't leak into the rest of the app.
   ============================================================================ */
.markdown-body { line-height: 1.55; color: var(--color-fg); font-size: 14px; }
.markdown-body p { margin: 0 0 10px; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin: 14px 0 6px;
    font-weight: 700;
    line-height: 1.25;
    font-family: var(--font-display);
}
.markdown-body h1 { font-size: 22px; }
.markdown-body h2 { font-size: 18px; }
.markdown-body h3 { font-size: 16px; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 14.5px; }
.markdown-body ul, .markdown-body ol { margin: 0 0 10px; padding-left: 22px; }
.markdown-body li { margin: 2px 0; }
.markdown-body code {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-fg);
}
.markdown-body pre {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 8px 0 12px;
    font-size: 13px;
    line-height: 1.5;
}
.markdown-body pre code { background: none; border: 0; padding: 0; font-size: 13px; }
.markdown-body blockquote {
    border-left: 3px solid var(--color-accent);
    margin: 8px 0;
    padding: 4px 12px;
    background: rgba(244, 168, 42, 0.06);
    color: var(--color-fg-2);
}
.markdown-body a {
    color: var(--color-accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.markdown-body a:hover { color: var(--color-fg); }
.markdown-body table {
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}
.markdown-body th, .markdown-body td {
    border: 1px solid var(--color-border);
    padding: 6px 10px;
    text-align: left;
}
.markdown-body th { background: var(--color-bg-soft); font-weight: 600; }
.markdown-body hr { border: 0; border-top: 1px solid var(--color-border); margin: 14px 0; }
.markdown-body del { color: var(--color-fg-subtle); }

/* ============================================================================
   Phase 19 — Inline polls in chat messages.
   ============================================================================ */
.chat-poll {
    margin: 4px 0;
    padding: 12px 14px 10px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.chat-poll__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.chat-poll__icon { font-size: 16px; line-height: 1; }
.chat-poll__question { font-size: 14.5px; color: var(--color-fg); }
.chat-poll__options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-poll__option { width: 100%; }
.chat-poll__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-fg);
    font-size: 13.5px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.chat-poll__bar:hover:not(:disabled) { border-color: var(--color-accent); }
.chat-poll__bar:disabled { cursor: not-allowed; opacity: 0.85; }
.chat-poll__bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(244, 168, 42, 0.18);
    transition: width 0.2s ease;
    z-index: 0;
}
.chat-poll__option.is-selected .chat-poll__bar {
    border-color: var(--color-accent-deep);
    box-shadow: inset 0 0 0 1px var(--color-accent-deep);
}
.chat-poll__option.is-selected .chat-poll__bar-fill { background: rgba(244, 168, 42, 0.32); }
.chat-poll__label { position: relative; z-index: 1; font-weight: 500; }
.chat-poll__count { position: relative; z-index: 1; color: var(--color-fg-subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.chat-poll__foot { margin-top: 8px; font-size: 12px; }

/* ============================================================================
   Phase 19 — Profile badges (chips under name in profile head).
   ============================================================================ */
.profile-badges {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    font-size: 12px;
    color: var(--color-fg-2);
    cursor: help;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.profile-badge:hover {
    border-color: var(--color-accent);
    background: rgba(244, 168, 42, 0.10);
}
.profile-badge__icon { font-size: 14px; line-height: 1; }
.profile-badge__label { font-weight: 600; color: var(--color-fg); }

/* ============================================================================
   Phase 19 — Bookmarks (⭐ button + /app/bookmarks page).
   ============================================================================ */
.bookmark-btn {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-fg-subtle);
}
.bookmark-btn__star { font-size: 16px; line-height: 1; transition: color 0.15s ease; }
.bookmark-btn__label-on  { display: none; }
.bookmark-btn__label-off { display: inline; }
.bookmark-btn.is-on { color: var(--color-accent-deep); }
.bookmark-btn.is-on .bookmark-btn__star { color: var(--color-accent); }
.bookmark-btn.is-on .bookmark-btn__label-on  { display: inline; }
.bookmark-btn.is-on .bookmark-btn__label-off { display: none; }

.bookmark-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bookmark-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    transition: border-color 0.15s ease;
}
.bookmark-row:hover { border-color: var(--color-border-strong); }
.bookmark-row__link {
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: var(--color-fg);
}
.bookmark-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 12.5px;
    color: var(--color-fg-subtle);
}
.bookmark-row__source { font-weight: 600; color: var(--color-fg-2); }
.bookmark-row__body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-fg-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bookmark-row__body strong { color: var(--color-fg); margin-right: 6px; }
.bookmark-row__remove { flex: 0 0 auto; align-self: flex-start; }

/* ============================================================================
   Phase 18 — Slash-commands help panel (inline in chat).
   ============================================================================ */
.slash-help-panel {
    position: absolute;
    bottom: 84px;
    right: 16px;
    width: 320px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 14px 18px 16px;
    z-index: 30;
}
.slash-help-panel__title {
    font-weight: 700;
    font-family: var(--font-display);
    margin-bottom: 8px;
}
.slash-help-panel__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.slash-help-panel__list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
}
.slash-help-panel__list code {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 12.5px;
    color: var(--color-fg);
}
.slash-help-panel__list span { color: var(--color-fg-2); }
.slash-help-panel__close {
    position: absolute;
    top: 8px; right: 10px;
    background: none;
    border: 0;
    color: var(--color-fg-subtle);
    font-size: 14px;
    cursor: pointer;
}

/* ============================================================================
   Phase 18 — Per-kind notification grid on /app/settings.
   ============================================================================ */
.notif-kinds__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.notif-kinds__table th,
.notif-kinds__table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 14px;
}
.notif-kinds__table thead th { color: var(--color-fg-subtle); font-weight: 600; font-size: 12px; }
.notif-kinds__table thead th:nth-child(2),
.notif-kinds__table thead th:nth-child(3),
.notif-kinds__table tbody td:nth-child(2),
.notif-kinds__table tbody td:nth-child(3) { text-align: center; width: 80px; }
.notif-kinds__table tbody tr:last-child td { border-bottom: 0; }

/* ============================================================================
   Phase 17 — Onboarding tour. Centered card on a soft background; step
   pips at the top; per-step icon + title + body + action row.
   ============================================================================ */
.onb { display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; }
.onb-card {
    width: 100%;
    max-width: 720px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 36px 40px 28px;
    box-shadow: var(--shadow-md);
    position: relative;
}
.onb-pips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.onb-pips li {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    color: var(--color-fg-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
.onb-pips li.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent-deep);
    color: #4A2C00;
}
.onb-pips li.is-done {
    background: #DBEAFE;
    border-color: #93C5FD;
    color: #1E3A8A;
}
.onb-step__icon { font-size: 48px; line-height: 1; text-align: center; }
.onb-step__title {
    margin: 16px 0 8px;
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.015em;
}
.onb-step__intro {
    margin: 0 auto 12px;
    max-width: 540px;
    text-align: center;
    color: var(--color-fg-2);
    line-height: 1.55;
}
.onb-action-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 8px;
    flex-wrap: wrap;
}
.onb-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 18px 0 8px;
}
.onb-choice {
    display: block;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    color: var(--color-fg);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.onb-choice:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.onb-choice__icon { font-size: 28px; display: block; }
.onb-choice__title {
    margin-top: 8px;
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 16px;
}
.onb-choice__desc {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--color-fg-2);
    line-height: 1.45;
}
.onb-tips {
    margin: 16px auto;
    max-width: 540px;
    padding-left: 0;
    list-style: none;
    line-height: 1.65;
    color: var(--color-fg-2);
    font-size: 14.5px;
}
.onb-tips li { padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.onb-tips li:last-child { border-bottom: 0; }
.onb-tips strong { color: var(--color-fg); }
.onb-skip {
    text-align: center;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--color-border);
}
.onb-skip__btn {
    background: none;
    border: 0;
    color: var(--color-fg-subtle);
    font-size: 12.5px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 8px;
}
.onb-skip__btn:hover { color: var(--color-fg-2); }

/* Phase 17 — whiteboard snapshot preview canvas. */
.wb-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 16px;
    flex-wrap: wrap;
}
.wb-preview-canvas-wrap {
    width: 100%;
    max-width: 1080px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.wb-preview-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
}

/* ===========================================================================
   Phase 24 — Shared pomodoro timer banner + start control.
   The banner appears above the day separator while a pomodoro is running;
   the start disclosure stays in the same slot when one is NOT running. The
   visual weight matches .chat-pin-banner so the chat stream rhythm stays
   predictable. Done-state pulses a soft green so peers notice without
   needing a toast.
   ========================================================================= */
.pom-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fff5f0 0%, #fff 80%);
    border: 1px solid #f6c8ad;
    border-left: 4px solid #ff7849;
    border-radius: 10px;
    box-shadow: var(--shadow-xs);
}
.pom-banner[hidden] { display: none !important; }
.pom-banner--done {
    background: linear-gradient(135deg, #ecfdf5 0%, #fff 80%);
    border-color: #b6f0d4;
    border-left-color: #10b981;
    animation: pom-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes pom-pulse {
    from { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.30); }
    to   { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.pom-banner__icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.pom-banner__body { flex: 1 1 auto; min-width: 0; }
.pom-banner__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}
.pom-banner__by {
    color: var(--color-fg-subtle);
    font-size: 12px;
}
.pom-banner__by-name { color: var(--color-fg); }
.pom-banner__timer {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 28px;
    font-weight: 600;
    color: #c0432f;
    line-height: 1.05;
    letter-spacing: -0.5px;
}
.pom-banner--done .pom-banner__timer { color: #047857; }
.pom-banner__stop {
    flex: 0 0 auto;
    appearance: none;
    background: #fff;
    color: #c0432f;
    border: 1px solid #f6c8ad;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.pom-banner__stop:hover { background: #fff5f0; }
.pom-banner--done .pom-banner__stop {
    color: #047857;
    border-color: #b6f0d4;
}
.pom-banner--done .pom-banner__stop:hover { background: #ecfdf5; }

.pom-start {
    margin: 8px 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.pom-start[hidden] { display: none !important; }
.pom-start__summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--color-fg-subtle);
    font-size: 12px;
    border: 1px dashed var(--color-border);
}
.pom-start__summary:hover {
    background: #fff5f0;
    color: #c0432f;
    border-color: #f6c8ad;
}
.pom-start__summary::-webkit-details-marker { display: none; }
.pom-start[open] .pom-start__summary {
    background: #fff5f0;
    color: #c0432f;
    border-color: #f6c8ad;
}
.pom-start__form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.pom-start__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-fg);
}
.pom-start__input {
    width: 64px;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.pom-start__btn {
    margin-left: auto;
    padding: 5px 14px;
    font-size: 12px;
}

/* ===========================================================================
   Phase 24 — Recurring session cadence card.
   Sits above the cohort-specific banners (cohort.firstSessionIso, vote card)
   so a plain group with a cadence still gets a visible "next session" card.
   Owner-only edit form is a <details> disclosure below the banner.
   ========================================================================= */
.cadence-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #eef4ff 0%, #fff 80%);
    border: 1px solid #c4d3f0;
    border-left: 4px solid #4f80ff;
    border-radius: 10px;
}
.cadence-banner__body { flex: 1; min-width: 0; }
.cadence-banner__body strong { font-size: 13px; }
.cadence-banner__body span { font-size: 13px; color: var(--color-fg); }
.cadence-banner__rel {
    color: var(--color-fg-subtle) !important;
    font-style: italic;
}
.cadence-banner__cta {
    color: #2350c4;
    text-decoration: none;
    font-weight: 600;
}
.cadence-banner__cta:hover { text-decoration: underline; }

.cadence-form {
    margin: 0 0 12px;
}
.cadence-form__summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--color-fg-subtle);
    font-size: 12px;
    border: 1px dashed var(--color-border);
}
.cadence-form__summary::-webkit-details-marker { display: none; }
.cadence-form__summary:hover {
    background: #eef4ff;
    color: #2350c4;
    border-color: #c4d3f0;
}
.cadence-form[open] .cadence-form__summary {
    background: #eef4ff;
    color: #2350c4;
    border-color: #c4d3f0;
}
.cadence-form__form {
    margin-top: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 720px) {
    .cadence-form__form {
        grid-template-columns: 2fr 1fr 1fr;
        align-items: end;
    }
    .cadence-form__days  { grid-column: 1 / -1; }
    .cadence-form__actions { grid-column: 1 / -1; }
}
.cadence-form__days {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 0;
    border: 0;
}
.cadence-form__days legend {
    font-size: 12px;
    color: var(--color-fg-subtle);
    margin-bottom: 4px;
}
.cadence-form__days label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
}
.cadence-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--color-fg-subtle);
}
.cadence-form__field input {
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}
.cadence-form__actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* ===========================================================================
   Phase 24 — Study streak chips.
   Two variants: --current (warm orange/red, pulses while active) and
   --longest (gold trophy, calmer). Same shape used in the profile
   heatmap header and the dashboard welcome.
   ========================================================================= */
.streak-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
}
.streak-chip strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.streak-chip--lg { font-size: 13px; padding: 5px 14px; }
.streak-chip--current {
    background: #fff1e6;
    color: #c4480b;
    border-color: #fcd4b5;
}
.streak-chip--current.streak-chip--lg::before {
    /* keep the flame in the inline span; this is just a subtle outer
       glow that emphasises an active streak */
    content: '';
    width: 0; height: 0;
}
.streak-chip--current.streak-chip--lg {
    animation: streak-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes streak-pulse {
    from { box-shadow: 0 0 0 0 rgba(196, 72, 11, 0.22); }
    to   { box-shadow: 0 0 0 5px rgba(196, 72, 11, 0); }
}
.streak-chip--longest {
    background: #fff8e1;
    color: #8a5a00;
    border-color: #f0d990;
}
.streak-chip--dim {
    background: #f3f5f9;
    color: var(--color-fg-subtle);
    border-color: var(--color-border);
}

/* ===========================================================================
   Phase 24 DM polish — date separators, avatar grouping, rich body, reaction
   chips, search bar in the thread header, conversation-actions menu,
   floating jump-to-bottom button, and drag-drop drop-target affordance.
   Scoped to .dm-* so other surfaces (community / chat) are unaffected.
   ========================================================================= */

/* Day-divider line between message groups */
.dm-day {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-fg-subtle);
    margin: 14px 0 6px;
}
.dm-day::before,
.dm-day::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* Avatar-grouping: collapse padding + hide repeated meta when grouped */
.dm-msg--grouped {
    margin-top: -4px;
}
.dm-msg--grouped .avatar {
    visibility: hidden;
}

/* Rich body content — mention pills + inline code + URL cards */
.dm-msg__rich {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.dm-msg__rich a.community-mention {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.5;
    text-decoration: none;
    vertical-align: baseline;
}
.dm-msg__rich a.community-mention--user {
    background: #e5f0ff;
    color: #1d4ed8;
}
.dm-msg__rich a.community-mention--group {
    background: #f3e8ff;
    color: #6b21a8;
}
.dm-msg__rich a.community-mention:hover { text-decoration: underline; }

.dm-msg__code {
    display: inline-block;
    padding: 1px 5px;
    background: rgba(0,0,0,0.08);
    color: #c4275b;
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
}
.dm-msg--mine .dm-msg__code {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

.dm-msg__inline-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 10px;
    background: #f3f5f9;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-fg);
    text-decoration: none;
    font-size: 12px;
}
.dm-msg__inline-link:hover { background: #e8ecf3; }
.dm-msg__inline-link-icon { opacity: 0.7; }
.dm-msg__inline-img {
    display: block;
    margin-top: 6px;
    max-width: 260px;
}
.dm-msg__inline-img img {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.dm-msg__deleted {
    font-style: italic;
    opacity: 0.7;
}

/* Reaction chips under the bubble. */
.dm-msg__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.dm-msg--mine .dm-msg__reactions {
    justify-content: flex-end;
}

/* Emoji-picker popover (anchored to a bubble) */
.dm-react-picker {
    position: absolute;
    display: flex;
    gap: 4px;
    margin-top: 4px;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    z-index: 20;
}
.dm-react-picker__btn {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
    border-radius: 6px;
}
.dm-react-picker__btn:hover { background: #f3f5f9; }

/* Make the bubble a positioning context for the picker */
.dm-msg { position: relative; }

/* Thread-header search bar + conversation-actions menu */
.dm-thread__head-action-menu {
    position: relative;
}
.dm-thread__head-action-menu summary {
    list-style: none;
    cursor: pointer;
}
.dm-thread__head-action-menu summary::-webkit-details-marker { display: none; }
.dm-thread__searchbar {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    display: flex;
    gap: 6px;
    z-index: 30;
    min-width: 240px;
}
.dm-thread__searchbar-input {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.dm-thread__searchbar-btn {
    appearance: none;
    background: var(--color-accent, #1f4ed8);
    color: #fff;
    border: 0;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.dm-thread__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    min-width: 220px;
    padding: 4px;
    z-index: 30;
}
.dm-thread__menu-item {
    display: block;
    width: 100%;
    text-align: left;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--color-fg);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
}
.dm-thread__menu-item:hover { background: #f3f5f9; }
.dm-thread__menu-item--warn { color: #c0432f; }
.dm-thread__menu-sep {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 4px 0;
}

/* Search results pane (replaces the live thread when ?q=…) */
.dm-thread--search-open .dm-thread__stream,
.dm-thread--search-open .dm-thread__compose,
.dm-thread--search-open #dm-typing { display: none; }
.dm-thread__search-results {
    padding: 16px 20px;
    overflow-y: auto;
}
.dm-thread__search-results--empty { color: var(--color-fg-subtle); }
.dm-thread__search-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
}
.dm-thread__search-clear {
    font-size: 12px;
    color: var(--color-accent, #1f4ed8);
}
.dm-thread__search-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dm-thread__search-hit-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--color-fg);
    text-decoration: none;
    border: 1px solid transparent;
}
.dm-thread__search-hit-link:hover {
    background: #f3f5f9;
    border-color: var(--color-border);
}
.dm-thread__search-hit-meta {
    display: block;
    font-size: 11px;
    color: var(--color-fg-subtle);
    margin-bottom: 2px;
}
.dm-thread__search-hit-body {
    display: block;
    font-size: 13.5px;
    word-break: break-word;
}

/* Floating jump-to-bottom pill */
.dm-jump-bottom {
    position: absolute;
    right: 24px;
    bottom: 88px;
    appearance: none;
    background: var(--color-accent, #1f4ed8);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 15;
}
.dm-jump-bottom.is-hidden { display: none; }
.dm-jump-bottom:hover { background: #1640c0; }

/* Drag-drop drop-target highlight */
.dm-thread.is-drop-target {
    outline: 2px dashed var(--color-accent, #1f4ed8);
    outline-offset: -10px;
    background: rgba(31, 78, 216, 0.04);
}

/* ===========================================================================
   Phase 25 — Group streak leaderboard + analytics tweaks.
   ========================================================================= */
.leaderboard-rank {
    display: inline-block;
    width: 22px;
    margin-right: 8px;
    color: var(--color-fg-subtle);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.analytics-rank__row--top .leaderboard-rank {
    color: #b88800;
}
.leaderboard-stats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.member-leaderboard-link {
    color: #b88800;
    background: #fff8e1;
    border: 1px solid #f0d990;
    border-radius: 999px;
    padding: 3px 10px;
}
.member-leaderboard-link:hover { background: #fceec2; }
.analytics-snippet {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--color-fg-subtle);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}

/* ===========================================================================
   Phase 25 — Voice message recorder controls.
   ========================================================================= */
.voice-btn--recording {
    background: #ffe9e2 !important;
    color: #c0432f !important;
    animation: voice-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes voice-pulse {
    from { box-shadow: 0 0 0 0 rgba(196, 67, 47, 0.25); }
    to   { box-shadow: 0 0 0 6px rgba(196, 67, 47, 0); }
}
.voice-panel {
    margin: 8px 12px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    box-shadow: var(--shadow-xs);
}
.voice-panel audio {
    height: 32px;
}
.voice-panel__meta {
    color: var(--color-fg-subtle);
    font-variant-numeric: tabular-nums;
}
.voice-panel__send,
.voice-panel__cancel {
    appearance: none;
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
}
.voice-panel__send {
    background: var(--color-accent, #1f4ed8);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}
.voice-panel__send:hover { background: #1640c0; }
.voice-panel__cancel:hover { background: #f3f5f9; }

/* ===========================================================================
   Phase 25 — Flashcards (review page + maker).
   ========================================================================= */
.study-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    background: #1f4ed8;
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.study-empty {
    text-align: center;
    padding: 60px 24px;
    border: 1px dashed var(--color-border);
    border-radius: 14px;
    background: #fafbfd;
}
.study-empty__icon { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.study-empty h3 { margin: 0 0 6px; }

.study-card {
    margin: 16px 0 8px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.study-card__source {
    font-size: 12px;
    color: var(--color-fg-subtle);
    margin-bottom: 10px;
}
.study-card__source a { color: inherit; text-decoration: none; }
.study-card__source a:hover { text-decoration: underline; }
.study-card__front {
    font-size: 18px;
    line-height: 1.45;
    color: var(--color-fg);
    padding: 14px 18px;
    background: #fffbe8;
    border-left: 4px solid #f0c84a;
    border-radius: 8px;
    margin-bottom: 16px;
}
.study-card__reveal { margin-top: 12px; }
.study-card__reveal-btn {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-accent, #1f4ed8);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}
.study-card__reveal-btn::-webkit-details-marker { display: none; }
.study-card__reveal[open] .study-card__reveal-btn { display: none; }
.study-card__back {
    margin-top: 14px;
    padding: 14px 18px;
    background: #f3f8ff;
    border-left: 4px solid #1f4ed8;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.study-card__rate {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 14px;
}
@media (min-width: 600px) {
    .study-card__rate { grid-template-columns: repeat(4, 1fr); }
}
.study-rate {
    appearance: none;
    border: 1px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    padding: 10px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}
.study-rate__sub {
    font-weight: 400;
    font-size: 11px;
    color: var(--color-fg-subtle);
}
.study-rate--again { color: #c0432f; border-color: #f6c8ad; }
.study-rate--again:hover { background: #fff5f0; }
.study-rate--hard  { color: #b88800; border-color: #f0d990; }
.study-rate--hard:hover  { background: #fff8e1; }
.study-rate--good  { color: #047857; border-color: #b6f0d4; }
.study-rate--good:hover  { background: #ecfdf5; }
.study-rate--easy  { color: #1f4ed8; border-color: #c4d3f0; }
.study-rate--easy:hover  { background: #eef4ff; }

.study-card__archive {
    margin-top: 14px;
    text-align: right;
}
.study-card__archive-btn {
    appearance: none;
    background: transparent;
    color: var(--color-fg-subtle);
    border: 0;
    cursor: pointer;
    font-size: 12px;
}
.study-card__archive-btn:hover { color: #c0432f; }
.study-progress { text-align: center; margin-top: 16px; font-size: 13px; }

/* Flashcard maker on the note-edit page */
.flashcard-maker {
    padding: 0;
    border: 1px dashed var(--color-border);
    border-radius: 10px;
}
.flashcard-maker__summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    color: var(--color-accent, #1f4ed8);
    font-weight: 600;
}
.flashcard-maker__summary::-webkit-details-marker { display: none; }
.flashcard-maker[open] .flashcard-maker__summary {
    border-bottom: 1px solid var(--color-border);
}
.flashcard-maker__form {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===========================================================================
   Phase 26 — AI features (✨ buttons + banners + panels).
   ========================================================================= */
.ai-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.ai-banner {
    margin: 12px 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f3eafd 0%, #fff 80%);
    border: 1px solid #d6c3f0;
    border-left: 4px solid #7c3aed;
    border-radius: 10px;
}
.ai-banner__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.ai-banner__title {
    font-weight: 700;
    color: #5b21b6;
    font-size: 13px;
}
.ai-banner__close {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-fg-subtle);
    font-size: 14px;
}
.ai-banner__close:hover { color: var(--color-fg); }
.ai-banner__body p { margin: 6px 0; font-size: 13.5px; }
.ai-banner__body ul { margin: 6px 0 0 18px; font-size: 13.5px; }
.ai-banner__body li { margin: 2px 0; }

.ai-panel {
    margin: 14px 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #d6c3f0;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}
.ai-panel--explain { max-width: 720px; }
.ai-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #5b21b6;
}
.ai-panel__close {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-fg-subtle);
    font-size: 14px;
}
.ai-panel__body { font-size: 13.5px; line-height: 1.55; }
.ai-panel__body h2,
.ai-panel__body h3,
.ai-panel__body h4 {
    margin: 14px 0 6px;
    font-weight: 700;
    color: var(--color-fg);
}
.ai-panel__body ul { margin: 6px 0 0 18px; }
.ai-panel__body code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12.5px;
}
.ai-panel__actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.ai-flashcard {
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
.ai-flashcard:hover { background: #fafbfd; }
.ai-flashcard input { margin-top: 4px; }
.ai-flashcard__front { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.ai-flashcard__back  { color: var(--color-fg-subtle); font-size: 12.5px; line-height: 1.4; }

.ai-suggest-row {
    margin: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.ai-suggest-expanded {
    margin: 6px 0;
    padding: 8px 10px;
    background: #fafbfd;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    white-space: pre-wrap;
}
.btn-xs {
    padding: 2px 8px !important;
    font-size: 11.5px !important;
}

.ai-error {
    margin-top: 8px;
    padding: 6px 10px;
    background: #fff5f0;
    border: 1px solid #f6c8ad;
    border-radius: 6px;
    color: #c0432f;
    font-size: 12.5px;
}

/* Phase 27a — free-user "AI is Premium" locked-button state. */
.ai-btn--locked {
    opacity: 0.85;
    border-color: #f0d990 !important;
    color: #b88800 !important;
    position: relative;
}
.ai-btn--locked::after {
    content: '🔒';
    margin-left: 4px;
    font-size: 11px;
}

/* Phase 28-5 — admin-granted verification badges. Three kinds, three
   colours; same shape so visual rhythm is consistent. */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    vertical-align: middle;
    margin-left: 6px;
    border: 1px solid transparent;
}
.verified-badge--educator {
    background: #e5f0ff;
    color: #1d4ed8;
    border-color: #c4d3f0;
}
.verified-badge--employer {
    background: #fff8e1;
    color: #8a5a00;
    border-color: #f0d990;
}
.verified-badge--expert {
    background: #f3e8ff;
    color: #6b21a8;
    border-color: #d6c3f0;
}

/* Phase 29-B2 — screen-reader-only utility for aria-live announcers
   that shouldn't render visually. Standard "clip" pattern. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Phase 31-5 — ✨ Translate button on community posts. */
.community-post__translate-row {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.community-translate-btn {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--color-fg-subtle);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 0;
}
.community-translate-btn:hover { color: var(--color-accent, #1f4ed8); }
.community-translate-result {
    display: block;
    padding: 8px 12px;
    background: #f3f8ff;
    border-left: 3px solid #1f4ed8;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.5;
}

/* Phase 30-A1 — Skip-to-content link (WCAG 2.4.1 Bypass Blocks).
   Hidden until keyboard focus; floats over top-left on Tab. */
.a11y-skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    z-index: 100000;
    padding: 8px 14px;
    background: #1f4ed8;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    transition: top 0.15s ease;
}
.a11y-skip-link:focus {
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Phase 30-A1 — stronger focus-visible rings. Browsers default to
   a thin outline that's easy to miss; bump it for keyboard users. */
:focus-visible {
    outline: 2px solid #1f4ed8;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Phase 30-A1 — honor prefers-reduced-motion. Class on body is set
   by /js/a11y.js based on the media query. */
body.prefers-reduced-motion *,
body.prefers-reduced-motion *::before,
body.prefers-reduced-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Phase 30-A2 — RTL layout overrides for Arabic + other RTL locales.
   The sidebar swaps to the right side, chat bubbles flip, the topbar
   contents reverse. Uses [dir="rtl"] selectors so the rule only kicks
   in when the <html dir="rtl"> attribute is set. Logical properties
   would be nicer long-term, but explicit overrides are cheaper here. */
[dir="rtl"] body { direction: rtl; text-align: right; }
[dir="rtl"] .app-shell { flex-direction: row-reverse; }
[dir="rtl"] .app-sidebar { border-right: 0; border-left: 1px solid var(--color-border, #e2e6ec); }
[dir="rtl"] .nav-link__icon { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .dm-msg--mine     { flex-direction: row-reverse; }
[dir="rtl"] .message__body    { text-align: right; }
[dir="rtl"] .verified-badge   { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .a11y-skip-link   { left: auto; right: 8px; }
[dir="rtl"] .pom-banner       { flex-direction: row-reverse; }
[dir="rtl"] .ai-banner__head,
[dir="rtl"] .ai-panel__head   { flex-direction: row-reverse; }

/* Phase 27b — Pull-to-refresh indicator. Fixed at the top of the
   viewport, follows the user's drag, falls back to display:none when
   not pulling so it doesn't interfere with normal page rhythm. */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -40px);
    z-index: 10000;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-accent, #1f4ed8);
    color: #fff;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.ptr-indicator.is-pulling { display: inline-flex; }
.ptr-indicator__icon {
    display: inline-block;
    transition: transform 0.3s ease;
}
.ptr-indicator.is-ready .ptr-indicator__icon { transform: rotate(180deg); }
.ptr-indicator.is-refreshing .ptr-indicator__icon {
    animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Phase 27c — People-you-might-know rows on the dashboard. */
.people-suggestions {
    list-style: none;
    padding: 0;
    margin: 0;
}
.people-suggestions__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.people-suggestions__row:last-child { border-bottom: 0; }
.people-suggestions__link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-fg);
    text-decoration: none;
    flex: 1;
}
.people-suggestions__meta { display: flex; flex-direction: column; gap: 1px; }
.people-suggestions__meta strong { font-size: 13.5px; }
.people-suggestions__meta .muted { font-size: 12px; }

/* Phase 27c — Recent / Trending tabs on the community board. */
.community-view-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--color-border);
}
.community-view-tab {
    padding: 8px 14px;
    color: var(--color-fg-subtle);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}
.community-view-tab:hover { color: var(--color-fg); }
.community-view-tab.is-active {
    color: var(--color-accent, #1f4ed8);
    border-bottom-color: var(--color-accent, #1f4ed8);
}

/* Phase 27d — Note template chips on the Notes tab. */
.note-template-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 14px;
    align-items: center;
}
.note-template-chip {
    appearance: none;
    background: #fff;
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    color: var(--color-fg-subtle);
    cursor: pointer;
}
.note-template-chip:hover {
    background: #f3f8ff;
    color: var(--color-accent, #1f4ed8);
    border-color: #c4d3f0;
}

/* Phase 27d — Pinned-resource visual treatment. */
.resource-tile--pinned {
    border-color: #f0c84a !important;
    background: linear-gradient(135deg, #fff8e1 0%, #fff 80%) !important;
}
.resource-tile__pin-chip {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    background: #fff8e1;
    color: #b88800;
    border: 1px solid #f0d990;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
    pointer-events: none;
}
.resource-tile { position: relative; }