/* A shared sheet of seals: both themes inherit their own paper and ink tokens. */
#groups-page {
  --groups-seal-ink: var(--ink-2);
  --groups-seal-gold-text: var(--gamboge-ink);
  --groups-note-ink: var(--ink);
}
html[data-theme="ink"] #groups-page { --groups-seal-gold-text: var(--ink); }
@supports (color: color-mix(in srgb, var(--gamboge-ink), var(--ink))) {
  html[data-theme="ink"] #groups-page { --groups-seal-gold-text: color-mix(in srgb, var(--gamboge-ink) 85%, var(--ink)); }
}
#groups-page :is(h3, h4) { font-family: var(--serif); font-weight: 500; }
#groups-page .muted { color: var(--ink-2); }
/* Exposed landscape copy needs the theme's full-strength ink, without extra panels. */
#groups-page .page-heading .muted,
#groups-page #groups-status,
#groups-page #groups-list > .muted,
#groups-page #groups-streak-rules,
#groups-page #groups-member-actions,
#groups-page .groups-weakness > .muted,
#groups-page .danger-zone .danger-hint { color: var(--groups-note-ink); }
#groups-page #groups-status:empty { display: none; }
#groups-page :is(#groups-status, #groups-levels-status).error { color: var(--danger); }
#groups-page #groups-retry { margin-bottom: var(--space-5); }
#groups-page :is(button, summary, input, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
#groups-page #groups-list-title { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
#groups-page #groups-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
#groups-page #groups-list > .muted { grid-column: 1 / -1; }
#groups-page .groups-card {
  display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
  padding: var(--space-5); text-align: left; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 3px 0 var(--paper-2); cursor: pointer;
}
#groups-page .groups-card-heading { display: flex; gap: var(--space-4); align-items: center; min-width: 0; }
#groups-page .groups-card-copy { display: grid; gap: var(--space-1); min-width: 0; flex: 1; }
#groups-page .groups-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--text-lg)/var(--lh-heading) var(--serif); }
#groups-page .groups-card-level { color: var(--ink-2); font-size: var(--text-xs); }
#groups-page .groups-card-meta { color: var(--ink-2); font-size: var(--text-xs); line-height: var(--lh-prose); }
#groups-page .groups-full-tag { display: inline-block; margin-left: var(--space-2); padding: 0 5px; border: 1px solid var(--line); border-radius: var(--radius-compact); color: var(--ink-2); font-size: var(--text-xs); white-space: nowrap; }
#groups-page .groups-card-caption { color: var(--ink-2); font-size: var(--text-xs); overflow-wrap: anywhere; }
#groups-page .groups-avatars { display: flex; align-items: center; margin-top: auto; padding-top: var(--space-1); }
#groups-page .groups-avatars .avatar { width: 30px; height: 30px; border: 2px solid var(--surface); font-size: var(--text-xs); }
#groups-page .groups-avatars .avatar + .avatar { margin-left: -8px; }
#groups-page .groups-avatars-more { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Double borders echo a carved stamp; only the seal's ink changes with level. */
#groups-page .groups-level-badge {
  --groups-seal-ink: var(--ink-2); --groups-seal-text: var(--groups-seal-ink); --groups-seal-size: 56px;
  display: inline-flex; position: relative; flex: 0 0 auto; width: var(--groups-seal-size); height: var(--groups-seal-size);
  flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--groups-seal-ink); border-radius: var(--radius-xs);
  color: var(--groups-seal-ink); background: var(--paper-2); line-height: 1;
}
#groups-page .groups-level-badge::before { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: var(--radius-compact); pointer-events: none; }
#groups-page .groups-level-badge :is(.groups-seal-character, .groups-seal-number) { color: var(--groups-seal-text); }
#groups-page .groups-seal-character { font: 500 28px/1 var(--kai); }
#groups-page .groups-seal-number { margin-top: 3px; font: 600 9px/1 ui-monospace, monospace; letter-spacing: .02em; }
#groups-page .groups-level-badge[data-level="1"],
#groups-page .groups-level-badge[data-level="2"] { --groups-seal-ink: var(--ink-2); }
#groups-page .groups-level-badge[data-level="3"],
#groups-page .groups-level-badge[data-level="4"] { --groups-seal-ink: var(--accent); }
#groups-page .groups-level-badge[data-level="5"],
#groups-page .groups-level-badge[data-level="6"] { --groups-seal-ink: var(--azurite); }
#groups-page .groups-level-badge[data-level="7"],
#groups-page .groups-level-badge[data-level="8"] { --groups-seal-ink: var(--gamboge-ink); --groups-seal-text: var(--groups-seal-gold-text); }
#groups-page .groups-level-badge[data-level="8"]::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--gamboge-ink); border-radius: var(--radius-sm); pointer-events: none; }
#groups-page .groups-level-badge--large { --groups-seal-size: 96px; border-width: 4px; }
#groups-page .groups-level-badge--large::before { inset: 4px; }
#groups-page .groups-level-badge--large .groups-seal-character { font-size: 50px; }
#groups-page .groups-level-badge--large .groups-seal-number { margin-top: 5px; font-size: var(--text-xs); }
#groups-page .groups-level-badge--small { --groups-seal-size: 38px; border-width: 2px; }
#groups-page .groups-level-badge--small::before { inset: 2px; }
#groups-page .groups-level-badge--small .groups-seal-character { font-size: 19px; }
#groups-page .groups-level-badge--small .groups-seal-number { margin-top: 2px; font-size: 8px; }

#groups-page .groups-progress, #groups-page .groups-contribution-bar, #groups-page .groups-signal-bar {
  --groups-progress: 0; display: block; height: 4px; overflow: hidden;
  background: var(--quota-track); border-radius: var(--radius-pill);
}
#groups-page .groups-progress > span, #groups-page .groups-contribution-bar > span, #groups-page .groups-signal-bar > span {
  display: block; width: 100%; height: 100%; transform: scaleX(var(--groups-progress)); transform-origin: left;
  background: var(--azurite); border-radius: inherit;
}
#groups-page .groups-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
#groups-page .groups-forms .panel { min-width: 0; padding: var(--space-5); background: var(--paper-2); border-style: dashed; box-shadow: none; }
#groups-page .groups-forms h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
#groups-page .groups-forms .muted { margin: 0; font-size: var(--text-sm); }
#groups-page .groups-form-limit { margin: var(--space-2) 0 var(--space-4); color: var(--azurite); font-size: var(--text-xs); }
#groups-page .groups-forms form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; }
#groups-page .groups-forms label { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: var(--text-xs); }
#groups-page .groups-forms input { min-width: 0; margin: 0; }
#groups-page .groups-forms button { margin: 0; white-space: nowrap; }

#groups-page #groups-back { margin-bottom: var(--space-5); }
#groups-page .groups-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); padding: var(--space-6); border-top: 3px solid var(--azurite); background: var(--surface); }
#groups-page .groups-hero-copy { min-width: 0; }
#groups-page .groups-eyebrow { margin: 0 0 var(--space-2); color: var(--azurite); font-size: var(--text-xs); letter-spacing: .14em; }
#groups-page #groups-detail-title { margin: 0 0 var(--space-2); font: 500 clamp(26px, 3vw, 34px)/var(--lh-heading) var(--serif); overflow-wrap: anywhere; }
#groups-page .groups-detail-meta { margin: 0 0 var(--space-4); color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-prose); }
#groups-page .groups-progress--hero { height: 9px; }
#groups-page .groups-level-caption { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
#groups-page .groups-invite { border-left: 1px solid var(--line); padding-left: var(--space-5); }
#groups-page .groups-invite-label { margin: 0 0 var(--space-2); color: var(--ink-2); font-size: var(--text-xs); }
#groups-page .groups-invite-code { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px dashed var(--azurite); border-radius: var(--radius-xs); color: var(--azurite); background: var(--paper-2); font: 600 21px/1.3 ui-monospace, monospace; letter-spacing: .12em; user-select: all; overflow-wrap: anywhere; }
#groups-page #groups-copy-invite { width: 100%; font-size: var(--text-xs); }
#groups-page .groups-members-section { margin-top: var(--space-6); }
#groups-page .groups-members-section h3 { margin-bottom: var(--space-2); font-size: var(--text-xl); }
#groups-page #groups-streak-rules { margin: 0; font-size: var(--text-xs); max-width: none; }
#groups-page #groups-member-actions { margin: var(--space-2) 0 0; font-size: var(--text-xs); }
#groups-page #groups-members { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
#groups-page .groups-member-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
#groups-page .groups-member-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
#groups-page .groups-member-identity > .avatar { width: 44px; height: 44px; font-size: var(--text-lg); }
#groups-page .groups-member-name { min-width: 0; flex: 1; display: grid; gap: var(--space-1); }
#groups-page .groups-member-name > strong { font-weight: 600; overflow-wrap: anywhere; }
#groups-page .groups-member-tags { display: flex; gap: var(--space-2); align-items: center; }
#groups-page .groups-member-tags:empty { display: none; }
#groups-page .groups-creator-tag { color: var(--accent); border: 1px solid currentColor; border-radius: var(--radius-compact); padding: 0 5px; font: 500 var(--text-xs)/var(--lh-prose) var(--kai); }
#groups-page .groups-self-tag { color: var(--ink-2); font-size: var(--text-xs); }
#groups-page .groups-member-identity > button { padding: var(--space-1) var(--space-2); flex: 0 0 auto; }
#groups-page .groups-member-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
#groups-page .groups-member-stats > div + div { border-left: 1px solid var(--line); padding-left: var(--space-4); }
#groups-page .groups-member-stats dt { color: var(--ink-2); font-size: var(--text-xs); margin-bottom: var(--space-1); }
#groups-page .groups-member-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
#groups-page .groups-member-stats dd strong { color: var(--ink); font: 500 var(--text-2xl)/1.2 var(--serif); }
#groups-page .groups-member-stats dd span { margin-left: var(--space-1); color: var(--ink-2); font-size: var(--text-xs); }

#groups-page .groups-upgrade { margin-top: var(--space-6); padding: 0; box-shadow: none; background: var(--paper-2); }
#groups-page .groups-upgrade > summary { padding: var(--space-5); font: 500 var(--text-lg)/var(--lh-ui) var(--serif); cursor: pointer; }
#groups-page .groups-upgrade-hint { margin-left: var(--space-4); color: var(--ink-2); font: 400 var(--text-xs)/var(--lh-ui) sans-serif; }
#groups-page .groups-upgrade > :not(summary) { margin-left: var(--space-5); margin-right: var(--space-5); }
#groups-page #groups-levels-status:empty { display: none; }
#groups-page #groups-level-ladder { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); list-style: none; padding: 0; gap: var(--space-2); margin-top: var(--space-3); margin-bottom: var(--space-5); }
#groups-page .groups-level-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-xs); }
#groups-page .groups-level-step > strong { font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
#groups-page .groups-level-step > span:last-child { font-size: var(--text-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
#groups-page .groups-level-step[data-state="current"] { border: 2px solid var(--azurite); background: var(--surface); padding-top: 11px; padding-bottom: 11px; }
#groups-page .groups-level-step[data-state="current"] > strong { color: var(--azurite); font-weight: 650; }
#groups-page .groups-level-step[data-state="reached"] .groups-level-badge,
#groups-page .groups-level-step[data-state="current"] .groups-level-badge { --groups-seal-text: var(--surface); background: var(--groups-seal-ink); color: var(--surface); }
#groups-page .groups-level-step[data-state="future"] .groups-level-badge { background: var(--paper-2); }
#groups-page #groups-level-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; padding: var(--space-5) 0 0; border-top: 1px solid var(--line); }
#groups-page #groups-level-rules li { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
#groups-page #groups-level-rules strong { font-size: var(--text-sm); font-weight: 600; }
#groups-page #groups-level-rules li > span:first-of-type { color: var(--azurite); font: 500 var(--text-xl)/var(--lh-ui) var(--serif); }
#groups-page #groups-level-rules li > span:last-of-type { color: var(--ink-2); font-size: var(--text-xs); }
#groups-page .groups-level-note { margin-top: var(--space-5); margin-bottom: var(--space-5); color: var(--ink-2); font-size: var(--text-xs); line-height: var(--lh-prose); }
#groups-page .groups-weakness { margin-top: var(--space-6); }
#groups-page .groups-weakness h3 { margin-bottom: var(--space-2); font-size: var(--text-xl); }
#groups-page .groups-weakness > .muted { max-width: none; margin-top: 0; font-size: var(--text-xs); }
#groups-page #groups-weakness { padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); }
#groups-page .groups-signal-empty { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-prose); }
#groups-page .groups-signal-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 3fr) 3.5em; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; }
#groups-page .groups-signal-name { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
#groups-page .groups-signal-row > strong { text-align: right; font-size: var(--text-sm); font-weight: 500; color: var(--azurite); font-variant-numeric: tabular-nums; }
#groups-page .groups-signal-bar { height: 6px; }
#groups-page .groups-signal-missing { margin: var(--space-2) 0 0; color: var(--ink-2); font-size: var(--text-xs); overflow-wrap: anywhere; }
#groups-page .danger-zone { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
#groups-page .danger-zone .danger-hint { color: var(--groups-note-ink); max-width: none; font-size: var(--text-xs); }
#groups-page .danger-zone button { margin-right: var(--space-2); font-size: var(--text-xs); }

@supports (background: color-mix(in srgb, var(--surface), transparent)) {
  #groups-page .groups-level-badge { background: color-mix(in srgb, var(--groups-seal-ink) 5%, var(--paper-2)); }
  #groups-page .groups-level-badge[data-level="8"] { box-shadow: 0 0 22px color-mix(in srgb, var(--gamboge) 25%, transparent); }
  @media (hover: hover) and (pointer: fine) {
    html[data-theme="qixi"] #groups-page .groups-hero {
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      backdrop-filter: blur(12px);
    }
  }
}
@media (hover: hover) and (pointer: fine) {
  #groups-page .groups-card:hover:not(:disabled) { border-color: var(--azurite); background: var(--paper-2); }
}
@media (prefers-reduced-motion: no-preference) {
  #groups-page .groups-card { transition: border-color var(--motion-fast), background-color var(--motion-fast); }
  #groups-page .groups-progress > span, #groups-page .groups-contribution-bar > span { animation: groups-progress-in 650ms var(--motion-ease) both; }
  @keyframes groups-progress-in { from { transform: scaleX(0); } to { transform: scaleX(var(--groups-progress)); } }
}
@media (max-width: 1100px) {
  #groups-page #groups-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #groups-page .groups-hero { gap: var(--space-4); padding: var(--space-5); }
  #groups-page #groups-level-ladder { gap: var(--space-1); }
  #groups-page .groups-level-step > strong { font-size: var(--text-meta); }
}
@media (max-width: 780px) {
  #groups-page .groups-hero { grid-template-columns: auto minmax(0, 1fr); }
  #groups-page .groups-invite { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid var(--line); }
  #groups-page .groups-invite-label { grid-column: 1 / -1; margin: 0; }
  #groups-page .groups-invite-code { margin: 0; }
  #groups-page #groups-copy-invite { width: auto; }
  #groups-page #groups-level-ladder { grid-template-columns: 1fr; gap: var(--space-2); }
  #groups-page .groups-level-step { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-3); }
  #groups-page .groups-level-step > strong { font-size: var(--text-sm); }
  #groups-page .groups-level-step[data-state="current"] { padding: 11px; }
}
@media (max-width: 640px) {
  #groups-page #groups-list, #groups-page #groups-members, #groups-page .groups-forms, #groups-page #groups-level-rules { grid-template-columns: 1fr; }
  #groups-page .groups-card, #groups-page .groups-member-card { padding: var(--space-4); }
  #groups-page .groups-forms { gap: var(--space-4); margin-top: var(--space-5); }
  #groups-page .groups-forms .panel { padding: var(--space-4); }
  #groups-page .groups-hero { gap: var(--space-4); padding: var(--space-5) var(--space-4); }
  #groups-page .groups-hero-copy { display: contents; }
  #groups-page .groups-eyebrow { display: none; }
  #groups-page #groups-detail-title { margin: 0; }
  #groups-page .groups-detail-meta, #groups-page #groups-level-progress, #groups-page .groups-level-caption { grid-column: 1 / -1; margin: 0; }
  #groups-page .groups-detail-meta { margin-top: var(--space-1); }
  #groups-page .groups-upgrade > summary { padding: var(--space-4); }
  #groups-page .groups-upgrade-hint { display: block; margin: var(--space-1) 0 0 var(--space-4); }
  #groups-page .groups-upgrade > :not(summary) { margin-left: var(--space-4); margin-right: var(--space-4); }
  #groups-page #groups-level-rules { gap: var(--space-4); }
  #groups-page #groups-level-rules li { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #groups-page #groups-level-rules li > span:last-of-type { grid-column: 1 / -1; }
  #groups-page #groups-weakness { padding: var(--space-4); }
  #groups-page .groups-signal-row { gap: var(--space-3); grid-template-columns: minmax(60px, 1fr) minmax(0, 2fr) 3em; }
}