/* Composite canvas: fit container like img, no clipping */
[data-composite-canvas] canvas,
[data-composite-selection-canvas] canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.companion-body {
    --companion-border: #d7ded9;
    --companion-panel: #f8faf8;
    --companion-ink: #17211c;
    --companion-muted: #5c6961;
    --companion-accent: #176b5b;
    --companion-warning: #8a5a00;
    --companion-danger: #b42318;
    background: #eef2ef;
    color: var(--companion-ink);
}

.companion-body > header {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

.companion-body > header h1 {
    margin-bottom: 0;
}

.companion-shell {
    width: min(1440px, calc(100vw - 24px));
    margin: 0 auto 2rem;
}

.companion-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    padding: 0.75rem 0;
    background: #eef2ef;
    border-bottom: 1px solid var(--companion-border);
}

.companion-toolbar > * {
    min-width: 0;
}

.companion-toolbar .companion-field {
    flex: 1 1 12rem;
    max-width: 18rem;
}

.companion-nav {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 3rem;
    font-weight: 600;
    white-space: nowrap;
}

/* collapsible advanced sections */
.companion-collapse {
    margin: 0;
    padding: 0;
    border: 0;
}

.companion-collapse > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    min-height: 2.4rem;
    align-content: center;
    padding: 0.35rem 0;
    cursor: pointer;
    font-weight: 700;
}

.companion-collapse > summary small {
    color: var(--companion-muted);
    font-weight: 600;
}

.companion-collapse[open] > summary {
    margin-bottom: 0.6rem;
}

.companion-session-tools {
    flex: 0 1 auto;
    align-self: center;
}

.companion-session-tools[open] {
    flex-basis: 100%;
}

.companion-session-tools > summary {
    min-height: 3rem;
    padding: 0 0.75rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-session-tools .companion-session-actions {
    grid-template-columns: repeat(auto-fit, minmax(6rem, max-content));
}

.companion-field label {
    margin-bottom: 0.25rem;
    color: var(--companion-muted);
    font-size: 0.875rem;
}

.companion-field input,
.companion-library input {
    min-height: 3rem;
    margin-bottom: 0;
    background: #ffffff;
}

.companion-session-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.companion-session-actions button {
    min-height: 2rem;
    margin: 0;
    padding: 0.25rem 0.45rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.companion-health,
.companion-save,
.companion-session-link {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
    font-weight: 600;
}

.companion-session-link {
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

.companion-session-link button {
    min-height: 2.15rem;
    margin: 0;
    padding: 0.25rem 0.6rem;
    align-self: center;
    white-space: nowrap;
}

.companion-session-link small {
    overflow: hidden;
    align-self: center;
    max-width: 9rem;
    color: var(--companion-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.companion-session-link [data-companion-session-qr] {
    width: 4.25rem;
    height: 4.25rem;
    flex: 0 0 auto;
    padding: 0.2rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

[data-companion-session-qr-state="failed"] {
    opacity: 0.4;
}

.companion-session-link [data-companion-session-link-value] {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

[data-companion-session-link-state="copied"]
    [data-companion-session-link-status] {
    color: #1e7b4f;
}

[data-companion-session-link-state="failed"]
    [data-companion-session-link-status] {
    color: #a6423a;
}

[data-companion-session-link-state="failed"]
    [data-companion-session-link-value] {
    position: static;
    width: 100%;
    height: auto;
    min-height: 2rem;
    flex: 1 1 100%;
    opacity: 1;
    pointer-events: auto;
}

.companion-health {
    align-items: stretch;
}

.companion-health-copy {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 0.1rem;
}

.companion-health-copy small {
    color: var(--companion-muted);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.companion-health button {
    min-height: 2.15rem;
    margin: 0 0 0 auto;
    padding: 0.25rem 0.6rem;
    align-self: center;
}

[data-companion-health-dot],
[data-companion-save-dot] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #a6423a;
    flex: 0 0 auto;
}

[data-companion-health-dot][data-ok="true"] {
    background: #1e7b4f;
}

[data-companion-health-state="connecting"] [data-companion-health-dot],
[data-companion-health-state="reconnecting"] [data-companion-health-dot],
[data-companion-health-state="stale"] [data-companion-health-dot],
[data-companion-save-state="local"] [data-companion-save-dot],
[data-companion-save-state="pending"] [data-companion-save-dot] {
    background: #8a6d1f;
}

[data-companion-save-state="saving"] [data-companion-save-dot] {
    background: #386bb3;
}

[data-companion-save-state="saved"] [data-companion-save-dot] {
    background: #1e7b4f;
}

.companion-scenes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 0;
}

.companion-scenes button {
    display: flex;
    min-height: 5rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    border: 1px solid var(--companion-border);
    background: #ffffff;
    color: var(--companion-ink);
    text-align: left;
}

.companion-scenes button.active {
    border-color: var(--companion-accent);
    background: #e4f1ec;
}

.companion-scenes span {
    color: var(--companion-muted);
    font-size: 0.875rem;
}

.companion-scene-targets {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-scene-targets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.companion-scene-targets h3 {
    margin: 0;
    font-size: 1rem;
}

.companion-scene-targets small {
    color: var(--companion-muted);
}

.companion-scene-target-actions,
.companion-scene-target-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.companion-scene-target-actions button {
    margin: 0;
}

.companion-scene-target-grid label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--companion-border);
    background: #f8faf8;
    color: var(--companion-ink);
    font-weight: 700;
}

.companion-scene-target-grid input {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.companion-session-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0 0 0.75rem;
}

.companion-session-summary div {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 0.1rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-session-summary span,
.companion-session-summary small {
    color: var(--companion-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.companion-session-summary strong {
    overflow: hidden;
    color: var(--companion-accent);
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.companion-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.4fr);
    gap: 1rem;
    align-items: start;
}

.companion-current,
.companion-library {
    border: 1px solid var(--companion-border);
    background: var(--companion-panel);
    padding: 1rem;
}

.companion-current {
    position: sticky;
    top: 6.25rem;
}

.companion-current-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.companion-current-header p,
.companion-current-header h2 {
    margin-bottom: 0.25rem;
}

.companion-current-header p,
.companion-current-type,
.companion-stack dt,
.companion-history-header small,
.companion-history-row small,
.companion-library-meta {
    color: var(--companion-muted);
}

.companion-current-type {
    border: 1px solid var(--companion-border);
    padding: 0.35rem 0.6rem;
    background: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
}

.companion-preview {
    display: grid;
    min-height: 16rem;
    margin: 1rem 0;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.companion-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.companion-action-grid button,
.companion-library button,
.companion-library-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    margin: 0;
    /* labels may wrap: nowrap made buttons overflow the narrow library-card
       grid columns and paint over neighboring cards */
    white-space: normal;
}

.companion-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.companion-stack div {
    padding: 0.75rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-stack dd {
    margin: 0;
    color: var(--companion-accent);
    font-size: 2rem;
    font-weight: 700;
}

.companion-history {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--companion-border);
}

.companion-history-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.65rem;
}

.companion-history-header h3,
.companion-history-group h4,
.companion-history-row p {
    margin: 0;
}

.companion-history-list {
    display: grid;
    max-height: 16rem;
    overflow: auto;
    gap: 0.65rem;
}

.companion-checkpoint-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.65rem;
}

.companion-checkpoint-toolbar input {
    min-height: 2.35rem;
    margin: 0;
}

.companion-checkpoint-toolbar button {
    margin: 0;
}

.companion-history-empty {
    margin: 0;
    color: var(--companion-muted);
}

.companion-history-group {
    display: grid;
    gap: 0.45rem;
}

.companion-history-group h4 {
    color: var(--companion-muted);
    font-size: 0.9rem;
}

.companion-history-row {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    margin: 0;
    padding: 0.55rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-history-row[data-patch-history-state="redoable"] {
    background: #f5f1e4;
}

.companion-history-row[data-scene-history-current="true"] {
    background: #e4f1ec;
}

.companion-checkpoint-row {
    grid-template-columns: minmax(0, 1fr);
}

.companion-history-row img {
    display: block;
    width: 4.75rem;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border: 1px solid var(--companion-border);
}

.companion-history-row-title {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.companion-history-row-title span {
    padding: 0.15rem 0.35rem;
    background: var(--companion-accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.companion-history-row p {
    min-width: 0;
    color: var(--companion-text);
    font-size: 0.9rem;
}

.companion-history-restore {
    justify-self: start;
    margin-top: 0.35rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.8rem;
}

.companion-checkpoint-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

[data-companion-status] {
    min-height: 1.5rem;
    margin: 0.75rem 0 0;
    color: var(--companion-accent);
    font-weight: 700;
}

[data-companion-status][data-error="true"] {
    color: #a6423a;
}

.companion-participants {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--companion-border);
}

.companion-participants-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: start;
}

.companion-participants-header h3,
.companion-participants-header p {
    margin-bottom: 0.25rem;
}

.companion-stability {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-stability-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: start;
}

.companion-stability-header h4 {
    margin: 0 0 0.15rem;
    font-size: 1rem;
}

.companion-stability-header small,
.companion-stability-grid span {
    color: var(--companion-muted);
    font-weight: 700;
}

.companion-stability-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--companion-border);
    background: #f7faf8;
    color: var(--companion-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.companion-stability-line span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.companion-stability-line[data-companion-session-stability-state="current"] {
    border-color: #b9d8c0;
    background: #f3fbf5;
}

.companion-stability-line[data-companion-session-stability-state="updating"],
.companion-stability-line[data-companion-session-stability-state="pending"] {
    border-color: #d9cb92;
    background: #fffaf0;
}

.companion-stability-line[data-companion-session-stability-state="stuck"],
.companion-stability-line[data-companion-session-stability-state="unavailable"],
.companion-stability-line[data-companion-session-stability-state="offline"] {
    border-color: #d8aaa5;
    background: #fff6f5;
}

.companion-stability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.companion-stability-grid div {
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem;
    border: 1px solid var(--companion-border);
    background: #fbfcfb;
}

.companion-stability-grid strong {
    color: var(--companion-accent);
    font-size: 1.35rem;
}

[data-companion-stability-count="stuck"] {
    color: #a6423a;
}

[data-companion-stability-count="updating"] {
    color: #8a6d1f;
}

.companion-stability-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.companion-stability-actions button {
    min-height: 2.6rem;
    margin: 0;
}

[data-companion-selected-participant-count] {
    color: var(--companion-muted);
    font-weight: 700;
}

[data-companion-command-count] {
    color: var(--companion-muted);
    font-weight: 700;
}

[data-companion-command-count][data-has-pending-commands="true"] {
    color: #8a5a1f;
}

[data-companion-command-count][data-has-command-timeouts="true"] {
    color: #9a4f1a;
}

[data-companion-command-count][data-has-command-failures="true"] {
    color: #a6423a;
}

.companion-commands {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-commands-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: start;
}

.companion-commands-header h4 {
    margin: 0 0 0.15rem;
    font-size: 1rem;
}

.companion-command-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.companion-command-filters button {
    width: auto;
    min-height: 2rem;
    margin: 0;
    padding: 0.25rem 0.55rem;
    font-size: 0.82rem;
}

.companion-command-filters button.active,
.companion-command-filters button[data-command-filter-active="true"] {
    border-color: #334155;
    background: #334155;
    color: #ffffff;
}

.companion-commands-header small,
.companion-command-empty,
.companion-command-item small {
    color: var(--companion-muted);
    font-weight: 700;
}

.companion-commands-list {
    display: grid;
    max-height: 12rem;
    overflow: auto;
    gap: 0.45rem;
}

.companion-command-empty {
    margin: 0;
}

.companion-command-item {
    display: grid;
    gap: 0.25rem;
    padding: 0.55rem 0.65rem;
    border-left: 0.25rem solid var(--companion-border);
    background: #fbfcfb;
}

.companion-command-item[data-command-status="acknowledged"] {
    border-left-color: #1e7b4f;
}

.companion-command-item[data-command-status="canceled"] {
    border-left-color: #6f7781;
    background: #f2f4f5;
}

.companion-command-item[data-has-pending="true"] {
    border-left-color: #8a6d1f;
    background: #fff8e6;
}

.companion-command-item[data-has-timeouts="true"],
.companion-command-item[data-command-status="timed-out"] {
    border-left-color: #9a4f1a;
    background: #fff4e8;
}

.companion-command-item[data-has-failures="true"],
.companion-command-item[data-command-status="failed"] {
    border-left-color: #a6423a;
    background: #fff0ee;
}

.companion-command-item-header {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    align-items: center;
}

.companion-command-item-header strong {
    min-width: 0;
}

.companion-command-status {
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
    color: var(--companion-accent);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.companion-command-retry,
.companion-command-cancel {
    justify-self: start;
    min-height: 2.1rem;
    margin: 0.15rem 0 0;
    padding: 0.25rem 0.55rem;
    font-size: 0.82rem;
}

[data-companion-participants-list] {
    display: grid;
    max-height: 19rem;
    overflow: auto;
    gap: 0.65rem;
    margin: 0.75rem 0;
}

.companion-participant-empty {
    margin: 0;
    color: var(--companion-muted);
}

.companion-participant-group {
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-participant-group-header {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    align-items: center;
}

.companion-participant-group-header h4 {
    margin: 0;
    font-size: 1rem;
}

.companion-participant-group-header small {
    color: var(--companion-muted);
    font-weight: 700;
}

.companion-participant-group-header button {
    min-height: 2.4rem;
    margin: 0;
    white-space: nowrap;
}

.companion-participant-group-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.companion-participant-group-list {
    display: grid;
    gap: 0.45rem;
}

.companion-participant-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    margin: 0;
    padding: 0.65rem;
    border: 1px solid var(--companion-border);
    background: #fbfcfb;
}

.companion-participant-row[data-active="true"] {
    border-color: var(--companion-accent);
    background: #e4f1ec;
}

.companion-participant-row[data-scene-current="updating"] {
    border-color: #8a6d1f;
    background: #fff8e6;
}

.companion-participant-row[data-scene-current="stuck"] {
    border-color: #a6423a;
    background: #fff0ee;
}

.companion-participant-row[data-scene-current="unknown"][data-active="true"] {
    border-color: #386bb3;
    background: #eef4ff;
}

.companion-participant-row[data-pending-command] {
    box-shadow: inset 4px 0 0 #386bb3;
}

.companion-participant-row[data-pending-command="reset"] {
    box-shadow: inset 4px 0 0 #8a5a1f;
}

.companion-participant-row input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.companion-participant-row span {
    display: grid;
    gap: 0.15rem;
}

.companion-participant-row small {
    color: var(--companion-muted);
}

.companion-participant-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.companion-activity {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--companion-border);
}

.companion-activity-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.65rem;
}

.companion-activity-header h3 {
    margin: 0;
}

.companion-activity-header button {
    min-height: 2.4rem;
    margin: 0;
}

.companion-activity-list {
    display: grid;
    max-height: 14rem;
    overflow: auto;
    gap: 0.45rem;
}

.companion-activity-empty {
    margin: 0;
    color: var(--companion-muted);
}

.companion-activity-item {
    display: grid;
    grid-template-columns: 5.8rem minmax(0, 1fr);
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-left: 0.25rem solid var(--companion-border);
    background: #ffffff;
    font-size: 0.9rem;
}

.companion-activity-item time {
    color: var(--companion-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.companion-activity-item span {
    min-width: 0;
}

.companion-activity-item[data-level="success"] {
    border-left-color: #1e7b4f;
}

.companion-activity-item[data-level="warning"] {
    border-left-color: #8a6d1f;
}

.companion-activity-item[data-level="error"] {
    border-left-color: #a6423a;
}

.companion-audio-settings {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
    gap: 0.75rem;
}

.companion-model-admin .companion-audio-settings {
    grid-template-columns: 1fr;
}

.image-prompt-shortcut-help {
    display: block;
    margin: 0.75rem 0 0.35rem;
    line-height: 1.55;
}

.companion-audio-settings form {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.85rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-audio-settings .companion-library-filters {
    grid-template-columns:
        minmax(10rem, 0.7fr) minmax(16rem, 1.4fr)
        minmax(12rem, 1fr);
    margin: 0;
}

.companion-audio-settings form > label {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    color: var(--companion-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.companion-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.companion-audio-settings .companion-inline-actions button {
    width: auto;
    min-height: 2.75rem;
}

.companion-audio-settings [data-companion-audio-config-status] {
    margin: 0;
    color: var(--companion-muted);
}

.companion-audio-test-result {
    display: block;
    min-height: 4.25rem;
    padding: 0.75rem;
    border: 1px solid var(--companion-border);
    background: var(--companion-bg);
    color: var(--companion-ink);
    white-space: pre-wrap;
}

.companion-audio-settings [data-error="true"] {
    color: #a6423a;
}

.companion-image-distribution {
    border-color: color-mix(
        in srgb,
        var(--companion-accent) 42%,
        var(--companion-border)
    );
    background: #f7fbf9;
}

.companion-image-distribution > details > summary strong {
    color: var(--companion-accent);
    font-size: 1.12rem;
}

.companion-distribution-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-distribution-intro h2,
.companion-distribution-intro p {
    margin: 0;
}

.companion-distribution-intro h2 {
    margin-bottom: 0.2rem;
    font-size: 1.05rem;
}

.companion-distribution-intro p {
    max-width: 60rem;
    color: var(--companion-muted);
    font-size: 0.9rem;
}

.companion-distribution-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
    gap: 0.5rem;
}

.companion-distribution-counts > span {
    display: grid;
    gap: 0.05rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--companion-border);
    background: #f8faf8;
}

.companion-distribution-counts > span[data-state="enabled"] {
    border-color: #8bc5ae;
    background: #eef8f3;
}

.companion-distribution-counts > span[data-state="disabled"] {
    border-color: #d7c9c5;
    background: #faf5f3;
}

.companion-distribution-counts strong {
    color: var(--companion-ink);
    font-size: 1.3rem;
    line-height: 1;
}

.companion-distribution-counts small {
    color: var(--companion-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.companion-distribution-admin {
    display: grid;
    grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 0.85rem;
    padding: 0.75rem;
    border-left: 0.25rem solid var(--companion-accent);
    background: #edf4f0;
}

.companion-distribution-admin label {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    color: var(--companion-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.companion-distribution-admin input {
    width: 100%;
    min-height: 2.75rem;
}

.companion-distribution-admin .companion-library-status {
    margin: 0;
}

.companion-distribution-admin [data-error="true"] {
    color: var(--companion-danger);
}

.companion-library-upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
    padding: 1rem;
    border: 1px solid #8bc5ae;
    background: #f0f8f4;
}

.companion-library-upload h3,
.companion-library-upload p {
    margin: 0;
}

.companion-library-upload > div > p:last-child {
    margin-top: 0.25rem;
    color: var(--companion-muted);
    font-size: 0.88rem;
}

.companion-library-upload form {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.companion-library-upload-picker {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0.75rem;
    border: 2px dashed #79af99;
    background: #ffffff;
    cursor: pointer;
}

.companion-library-upload-picker span {
    color: var(--companion-muted);
    font-size: 0.78rem;
}

.companion-library-upload-picker input {
    width: 100%;
    margin: 0.45rem 0 0;
}

.companion-library-upload form button {
    width: 100%;
    margin: 0;
}

.companion-library-upload-status {
    grid-column: 1 / -1;
    color: var(--companion-muted);
    font-size: 0.85rem;
}

.companion-library-upload-status[data-error="true"] {
    color: var(--companion-danger);
}

.companion-library-upload ol {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.companion-library-upload li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
    font-size: 0.8rem;
}

.companion-library-upload li span {
    color: var(--companion-muted);
    text-align: right;
}

.companion-library-upload li[data-state="uploading"] {
    border-color: var(--companion-accent);
    background: #edf7f2;
}

.companion-library-upload li[data-state="done"] {
    border-color: #68aa8d;
}

.companion-library-upload li[data-state="error"] {
    border-color: #d6a199;
    background: #fff3f1;
}

.companion-danger-action {
    border-color: #b25a50 !important;
    color: #8c2f26 !important;
}

.companion-danger-action:hover,
.companion-danger-action:focus-visible {
    background: #8c2f26 !important;
    color: #ffffff !important;
}

.companion-availability-badge {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-height: 1.55rem;
    align-items: center;
    padding: 0.16rem 0.5rem;
    border: 1px solid #8bc5ae;
    border-radius: 999px;
    background: #eef8f3;
    color: #176044;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.companion-availability-badge[data-state="disabled"] {
    border-color: #c8aba3;
    background: #f8ece8;
    color: #843b2f;
}

.companion-library-item[data-companion-asset-enabled="false"],
.companion-recent-library-item[data-companion-asset-enabled="false"],
.companion-tour-queue-item[data-companion-asset-enabled="false"] {
    border-color: #d7c9c5;
    background: #faf7f5;
}

.companion-library-item[data-companion-asset-enabled="false"]
    > .companion-library-image-link,
.companion-recent-library-item[data-companion-asset-enabled="false"]
    > .companion-library-image-link,
.companion-tour-queue-item[data-companion-asset-enabled="false"]
    > .companion-library-image-link {
    filter: saturate(0.55);
    opacity: 0.75;
}

.companion-tour-queue-item .companion-availability-badge {
    display: inline-flex;
    width: max-content;
    height: auto;
    margin: 0.15rem 0;
    border-radius: 999px;
    background: #eef8f3;
    color: #176044;
    font-size: 0.72rem;
}

.companion-tour-queue-item
    .companion-availability-badge[data-state="disabled"] {
    background: #f8ece8;
    color: #843b2f;
}

.companion-library button:disabled,
.companion-library-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

/* scoped to the search bar: a bare `.companion-library form` also matched
   every per-card tag form and forced a 220px column into ~170px cards */
.companion-library form[data-companion-library-search] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: center;
    width: min(100%, 72rem);
    margin: 0 auto 0.85rem;
    padding: 0.65rem;
    border: 1px solid var(--companion-border);
    background: #f8faf7;
}

.companion-library-query {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.3rem;
    margin: 0;
    color: var(--companion-muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.companion-library-query input,
.companion-library form[data-companion-library-search] > button {
    width: 100%;
    min-height: 3rem;
    margin: 0;
    font-size: 1rem;
}

.companion-library-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem;
    width: min(100%, 72rem);
    margin: 0 auto 0.85rem;
}

.companion-library-filters label {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    color: var(--companion-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.companion-library-filters select {
    min-height: 2.75rem;
    margin: 0;
    background: #ffffff;
}

.companion-library-checkbox {
    align-content: end;
    grid-template-columns: auto 1fr;
    column-gap: 0.45rem;
}

.companion-library-checkbox input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    align-self: center;
}

.companion-library-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.companion-library-status {
    margin-bottom: 0.75rem;
    color: var(--companion-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.companion-library-status[data-companion-library-health-state="error"] {
    color: var(--companion-danger);
}

.companion-library-status[data-companion-library-health-state="skipped"] {
    color: var(--companion-warning);
}

.companion-library-health-actions {
    display: flex;
    justify-content: flex-end;
    margin: -0.35rem 0 0.75rem;
}

.companion-library-health-actions button {
    margin: 0;
}

.companion-recent-library {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.companion-recent-library[hidden] {
    display: none;
}

.companion-recent-library-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.companion-recent-library-header h3 {
    margin: 0;
    font-size: 1rem;
}

.companion-recent-library-header small {
    color: var(--companion-muted);
    font-weight: 700;
}

.companion-recent-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.companion-recent-library-item {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.4rem;
    margin: 0;
    padding: 0.65rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-recent-library-item img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: #e3e8e4;
}

.companion-recent-library-item h4,
.companion-recent-library-item p {
    margin: 0;
}

.companion-recent-library-item h4 {
    font-size: 0.95rem;
    line-height: 1.25;
}

.companion-recent-library-item p {
    color: var(--companion-muted);
    font-size: 0.8rem;
}

.companion-tour-queue {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    padding: 0.75rem;
    border: 1px solid var(--companion-border);
    background: #f7faf8;
}

.companion-tour-queue-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.companion-tour-queue-header h3 {
    margin: 0;
    font-size: 1rem;
}

.companion-tour-queue-header small {
    color: var(--companion-muted);
    font-weight: 700;
}

.companion-tour-queue-actions {
    display: flex;
    gap: 0.45rem;
}

.companion-tour-queue-grid {
    display: grid;
    gap: 0.5rem;
}

.companion-tour-queue-item {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    margin: 0;
    padding: 0.55rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-tour-queue-item img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: #e3e8e4;
}

.companion-tour-queue-item span {
    display: inline-grid;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    margin-bottom: 0.2rem;
    border-radius: 999px;
    background: var(--companion-text);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
}

.companion-tour-queue-item h4,
.companion-tour-queue-item p {
    margin: 0;
}

.companion-tour-queue-item h4 {
    font-size: 0.95rem;
    line-height: 1.25;
}

.companion-tour-queue-item p {
    color: var(--companion-muted);
    font-size: 0.8rem;
}

.companion-library-import {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--companion-border);
    background: #f8faf7;
}

.companion-library-import-status {
    display: grid;
    gap: 0.2rem;
    color: var(--companion-muted);
    font-size: 0.85rem;
}

.companion-library-import-status strong {
    color: var(--companion-text);
    font-size: 0.95rem;
}

.companion-library-import-status progress {
    width: 100%;
    height: 0.55rem;
    margin: 0.2rem 0 0;
}

.companion-library-import form {
    /* wrapping flex, NOT a single grid row: the old 8-column layout had a
       ~1040px minimum width that forced the whole page into horizontal
       overflow on iPad-width viewports */
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: end;
    margin: 0;
}

.companion-library-import form > label:first-child {
    flex: 1 1 24rem;
}

.companion-library-import form > label {
    flex: 0 1 auto;
}

.companion-library-import form input[type="number"] {
    width: 6.5rem;
}

.companion-library-import label {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    color: var(--companion-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.companion-library-import input {
    margin: 0;
}

.companion-import-presets {
    display: grid;
    gap: 0.45rem;
}

.companion-import-presets-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--companion-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.companion-import-presets [data-companion-import-preset-list] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.companion-import-presets button {
    width: auto;
    margin: 0;
    padding: 0.35rem 0.55rem;
    font-size: 0.8rem;
}

.companion-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 1rem;
}

.companion-library-empty {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.25rem;
    min-height: 8rem;
    margin: 0;
    padding: 1rem;
    place-content: center;
    border: 1px dashed var(--companion-border);
    background: #f8faf7;
    color: var(--companion-muted);
    text-align: center;
}

.companion-library-empty strong {
    color: var(--companion-text);
}

.companion-library-item {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto auto auto;
    gap: 0.45rem;
    margin: 0;
    padding: 0.65rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
    /* grid items default to min-width auto — long titles/tags must not
       stretch a card past its column */
    min-width: 0;
}

.companion-library-item > * {
    min-width: 0;
}

.companion-library-item h3,
.companion-library-item p {
    overflow-wrap: anywhere;
}

.companion-library-item img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: #e3e8e4;
}

.companion-library-image-link {
    position: relative;
    display: block;
    overflow: hidden;
    border: 0;
    background: #152019;
    color: #ffffff;
}

.companion-library-image-link img {
    display: block;
    transition: transform 160ms ease;
}

.companion-library-image-link span {
    position: absolute;
    right: 0.55rem;
    bottom: 0.55rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: rgba(13, 24, 18, 0.84);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
}

.companion-library-image-link:hover img,
.companion-library-image-link:focus-visible img {
    transform: scale(1.025);
}

.companion-library-image-link:focus-visible {
    outline: 3px solid var(--companion-accent);
    outline-offset: 2px;
}

.companion-library-item h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.companion-availability-toggle {
    width: 100%;
    margin: 0;
}

.companion-library-item p {
    margin: 0;
    color: var(--companion-muted);
    font-size: 0.85rem;
}

.companion-library-operator-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-height: 1.9rem;
    min-width: 0;
    max-width: 100%;
}

.companion-library-operator-tags button {
    min-height: 1.75rem;
    margin: 0;
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
}

.companion-library-tag-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem;
    margin: 0;
}

.companion-library-tag-form input {
    min-height: 2.15rem;
    margin: 0;
}

.companion-library-tag-form button {
    min-height: 2.15rem;
    margin: 0;
    padding: 0.25rem 0.55rem;
}

.companion-library-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.companion-panorama-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    padding: clamp(0.5rem, 2vw, 1.5rem);
    place-items: center;
}

.companion-panorama-viewer[hidden] {
    display: none;
}

.companion-panorama-viewer-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: rgba(9, 15, 11, 0.9);
}

.companion-panorama-viewer figure {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(96vw, 96rem);
    max-height: 96vh;
    margin: 0;
    overflow: hidden;
    border: 1px solid #708078;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.companion-panorama-viewer header,
.companion-panorama-viewer figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.companion-panorama-viewer header {
    border-bottom: 1px solid var(--companion-border);
}

.companion-panorama-viewer h2,
.companion-panorama-viewer p {
    margin: 0;
}

.companion-panorama-viewer header button {
    width: auto;
    margin: 0;
}

.companion-panorama-viewer-pan {
    position: relative;
    height: min(64vh, 46rem);
    overflow: hidden;
    background: #0d130f;
}

.companion-panorama-viewer-scroll {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    transition:
        opacity 160ms ease,
        filter 160ms ease;
}

.companion-panorama-viewer-pan.is-loading .companion-panorama-viewer-scroll {
    opacity: 0.38;
    filter: saturate(0.55) blur(1px);
}

.companion-panorama-viewer-loading {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: calc(100% - 8rem);
    padding: 0.8rem 1rem;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 999px;
    background: rgb(13 19 15 / 92%);
    color: #fff;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 35%);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.companion-panorama-viewer-loading[hidden] {
    display: none;
}

.companion-panorama-viewer-loading span {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    border: 2px solid rgb(255 255 255 / 35%);
    border-top-color: #fff;
    border-radius: 999px;
    animation: companion-panorama-loading-spin 650ms linear infinite;
}

@keyframes companion-panorama-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.companion-panorama-viewer-arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 999px;
    background: rgb(13 19 15 / 82%);
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    transform: translateY(-50%);
}

.companion-panorama-viewer-arrow[data-direction="previous"] {
    left: 1rem;
}

.companion-panorama-viewer-arrow[data-direction="next"] {
    right: 1rem;
}

.companion-panorama-viewer-arrow:hover,
.companion-panorama-viewer-arrow:focus-visible {
    background: #fff;
    color: #0d130f;
}

.companion-panorama-viewer-arrow:disabled {
    border-color: rgb(255 255 255 / 28%);
    background: rgb(13 19 15 / 62%);
    color: rgb(255 255 255 / 62%);
    cursor: wait;
}

.companion-panorama-viewer-pan img {
    display: block;
    width: auto;
    max-width: none;
    height: 100%;
}

.companion-panorama-viewer figcaption > div:first-child {
    min-width: 12rem;
}

.companion-panorama-viewer figcaption small {
    color: var(--companion-muted);
}

.companion-panorama-viewer-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.companion-panorama-viewer-actions > * {
    width: auto;
    margin: 0;
    white-space: nowrap;
}

.companion-panorama-viewer-actions input {
    width: min(100%, 12rem);
    min-height: 2.75rem;
}

body.companion-panorama-viewer-open {
    overflow: hidden;
}

.companion-library-page {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    color: var(--companion-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.companion-load-more {
    width: 100%;
    margin-top: 0.45rem;
}

@media (max-width: 1180px) {
    .companion-toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    .companion-scene-targets-header {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 980px) {
    .companion-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .companion-scenes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .companion-session-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .companion-workspace {
        grid-template-columns: 1fr;
    }

    .companion-current {
        position: static;
    }

    .companion-library-grid,
    .companion-recent-library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .companion-tour-queue-item {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .companion-tour-queue-item .companion-library-actions {
        grid-column: 1 / -1;
    }

    .companion-library-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .companion-distribution-intro,
    .companion-distribution-admin,
    .companion-library-upload {
        grid-template-columns: 1fr;
    }

    .companion-audio-settings {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .companion-shell {
        width: min(100vw - 16px, 1440px);
    }

    .companion-toolbar,
    .companion-library form[data-companion-library-search],
    .companion-library-import form,
    .companion-scenes,
    .companion-scene-target-actions,
    .companion-scene-target-grid,
    .companion-session-summary,
    .companion-action-grid,
    .companion-stack,
    .companion-stability-grid,
    .companion-stability-actions,
    .companion-participant-actions,
    .companion-library-filters,
    .companion-audio-settings .companion-library-filters,
    .companion-library-grid,
    .companion-recent-library-grid,
    .companion-tour-queue-item {
        grid-template-columns: 1fr;
    }

    .companion-tour-queue-header {
        align-items: stretch;
        flex-direction: column;
    }

    .companion-distribution-counts {
        grid-template-columns: 1fr 1fr;
    }

    .companion-participant-group-header {
        align-items: stretch;
        flex-direction: column;
    }

    .companion-participant-group-controls {
        justify-content: stretch;
    }

    .companion-participant-group-controls button {
        flex: 1 1 auto;
    }

    .companion-activity-item {
        grid-template-columns: 1fr;
    }

    .companion-history-row {
        grid-template-columns: 1fr;
    }

    .companion-history-row img {
        width: 100%;
    }
}

/* GROUP SESSION PAGE ---------------------------------------------------- */

.group-session-page .gs-error {
    color: var(--pico-form-element-invalid-border-color, #c62828);
}

.gs-participant-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.gs-participant-row input {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.gs-remove {
    flex: 0 0 auto;
    width: auto;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0;
}

/* the visit shelf: four slim chips in visit order */
.gs-selected-experiences {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0.85rem 0 0.5rem;
}

.gs-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.3rem;
    padding: 0.3rem 0.5rem;
    border: 1px dashed var(--rf-line);
}

.gs-slot[data-filled="true"] {
    border: 1px solid var(--rf-ink);
    background: var(--rf-card);
}

.gs-slot img {
    display: block;
    width: 4.6rem;
    flex: 0 0 auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.gs-slot small {
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-slot-no {
    flex: 0 0 auto;
    color: var(--rf-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.gs-slot[data-filled="true"] .gs-slot-no {
    color: var(--rf-ink);
}

.gs-slot-empty {
    text-align: center;
    color: var(--rf-muted);
}

.gs-slot-remove {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(33, 38, 30, 0.78);
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1;
}

/* place cards: tap to add, tap again to remove; View opens the lightbox */
.gs-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    max-height: 480px;
    overflow-y: auto;
    padding: 2px;
}

.gs-library-card {
    margin: 0;
    padding: 0;
    border: 1px solid var(--rf-line);
    background: var(--rf-card);
    color: inherit;
    cursor: pointer;
    transition:
        border-color 0.12s ease,
        box-shadow 0.12s ease,
        transform 0.12s ease;
}

.gs-library-card:hover,
.gs-library-card:focus-visible {
    border-color: var(--rf-ink);
    box-shadow: 0 6px 14px rgba(33, 38, 30, 0.12);
    transform: translateY(-2px);
    outline: none;
}

/* the signature: choosing a place literally frames it — white mat, ink frame */
.gs-library-card[data-selected="true"] {
    border: 2px solid var(--rf-ink);
    box-shadow: 0 4px 12px rgba(33, 38, 30, 0.18);
}

.gs-library-card[data-selected="true"] .gs-card-frame {
    padding: 7px 7px 0;
    background: #ffffff;
}

.gs-card-frame {
    position: relative;
}

.gs-card-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.gs-card-no {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    padding: 0.05rem 0.5rem;
    background: var(--rf-ink);
    color: var(--rf-paper);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}

.gs-card-view {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    margin: 0;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--rf-line);
    border-radius: 2px;
    background: rgba(250, 248, 243, 0.94);
    color: var(--rf-ink);
    font-size: 0.75rem;
    line-height: 1.4;
}

.gs-card-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 0.6rem;
}

.gs-card-caption span {
    overflow: hidden;
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .gs-library-card {
        transition: none;
    }
}

/* /guide language tabs — CSS-only via hidden radios */
.guide-lang-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.guide-lang-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.guide-lang-nav label {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--pico-muted-border-color, #ddd);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.guide-section {
    display: none;
}

#guide-lang-en:checked ~ [data-guide-lang="en"],
#guide-lang-zh-hans:checked ~ [data-guide-lang="zh-hans"],
#guide-lang-zh-hant:checked ~ [data-guide-lang="zh-hant"],
#guide-lang-ja:checked ~ [data-guide-lang="ja"],
#guide-lang-ko:checked ~ [data-guide-lang="ko"] {
    display: block;
}

#guide-lang-en:checked ~ .guide-lang-nav label[for="guide-lang-en"],
#guide-lang-zh-hans:checked ~ .guide-lang-nav label[for="guide-lang-zh-hans"],
#guide-lang-zh-hant:checked ~ .guide-lang-nav label[for="guide-lang-zh-hant"],
#guide-lang-ja:checked ~ .guide-lang-nav label[for="guide-lang-ja"],
#guide-lang-ko:checked ~ .guide-lang-nav label[for="guide-lang-ko"] {
    background: var(--pico-primary-background, #0172ad);
    border-color: transparent;
    color: #fff;
}

.guide-intro {
    font-size: 1.1rem;
}

.guide-steps li {
    margin-bottom: 0.75rem;
}

.guide-steps li p {
    margin: 0.15rem 0 0;
}

.guide-troubleshooting dt {
    font-weight: 600;
    margin-top: 0.75rem;
}

.guide-troubleshooting dd {
    margin-left: 0;
    color: var(--pico-muted-color, #555);
}

.gs-library-type {
    align-self: flex-start;
    font-size: 0.65rem;
    padding: 0 0.35rem;
    border-radius: 4px;
    background: var(--pico-muted-border-color, #ddd);
    color: var(--pico-muted-color, #555);
}

.gs-stage-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gs-dashboard-command-bar {
    position: sticky;
    top: 0.5rem;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.85rem;
    padding: 0.5rem;
    border: 1px solid rgba(140, 37, 37, 0.28);
    border-radius: 0.45rem;
    background: rgba(251, 250, 245, 0.94);
    box-shadow: 0 0.25rem 0.8rem rgba(33, 38, 30, 0.12);
    backdrop-filter: blur(8px);
}

.gs-dashboard-command-bar label {
    display: grid;
    flex: 1 1 16rem;
    grid-template-columns: auto minmax(10rem, 18rem);
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #741919;
    font-size: 0.82rem;
    font-weight: 800;
}

.gs-dashboard-command-bar input {
    margin: 0;
    border-color: rgba(159, 36, 36, 0.45);
    background: #fff;
}

.gs-end-session {
    width: auto;
    margin: 0;
    border-color: #9f2424;
    background: #b42318;
    color: #fff;
    font-weight: 800;
}

.gs-end-session:is(:hover, :focus) {
    border-color: #741919;
    background: #8c2525;
    color: #fff;
}

@media (max-width: 40rem) {
    .gs-dashboard-command-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .gs-dashboard-command-bar label {
        flex-basis: auto;
        grid-template-columns: 1fr;
    }

    .gs-end-session {
        width: 100%;
    }
}

.gs-stage {
    width: auto;
    margin-bottom: 0;
}

.gs-stage-current {
    font-weight: bold;
}

.gs-roster-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.5rem 0;
    padding: 0.75rem 1rem;
}

.gs-roster-card span {
    flex: 1 1 auto;
}

.gs-timeline-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.4rem 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.gs-timeline-row span {
    flex: 1 1 auto;
}

.gs-draft-banner {
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    border: 1px solid #d9a406;
    background: rgba(217, 164, 6, 0.12);
    font-weight: 600;
}

.gs-global-live-alert {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 2px solid #b56d00;
    border-radius: 0.4rem;
    background: #fff3d6;
    box-shadow: 0 0.2rem 0 rgba(86, 49, 0, 0.12);
    color: var(--rf-ink, #202521);
}

.gs-global-live-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.55rem;
}

.gs-global-live-heading strong {
    font-size: 1.2rem;
}

.gs-global-live-badge {
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #8a3c00;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gs-global-live-alert p {
    margin: 0.35rem 0 0;
}

.gs-global-live-alert [role="button"] {
    width: auto;
    margin: 0.85rem 0 0;
}

/* one overflowing element must never force the whole page wide again */
.companion-shell {
    overflow-x: clip;
}

/* /session onboarding wizard */
.gs-wizard-progress {
    margin: 0 0 1rem;
    color: var(--pico-muted-color, #5c6961);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gs-step-hint {
    color: var(--pico-muted-color, #5c6961);
    font-size: 0.9rem;
}

.gs-count-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.gs-count-stepper button {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0;
    font-size: 2rem;
    line-height: 1;
}

.gs-count-stepper output {
    min-width: 4.5rem;
    font-size: 3.25rem;
    font-weight: 800;
    text-align: center;
}

.gs-participant-names {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.75rem 1rem;
    margin: 0 0 1rem;
}

.gs-participant-name {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.gs-participant-name input {
    margin: 0.25rem 0 0;
}

.gs-review-people {
    margin: 0.25rem 0 0.75rem;
    color: var(--pico-muted-color, #5c6961);
}

.gs-wizard-nav {
    margin-top: 1.5rem;
}

.gs-review-places {
    margin: 0.75rem 0;
    padding: 0;
    list-style: none;
    counter-reset: gs-place;
}

.gs-review-places li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--pico-muted-border-color, #d7ded9);
    border-radius: 0.4rem;
    counter-increment: gs-place;
}

.gs-review-places li::before {
    content: counter(gs-place);
    font-weight: 800;
    opacity: 0.6;
}

.gs-review-places img {
    width: 5.5rem;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 0.25rem;
}

.gs-live-hint {
    padding: 0.75rem 1rem;
    border: 1px solid #1e7b4f;
    border-radius: 0.4rem;
    background: rgba(30, 123, 79, 0.08);
}

.gs-headset-entry {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--rf-verdigris, #23664f);
    border-radius: 0.4rem;
    background: var(--rf-card, #faf8f2);
    box-shadow: 0 0.2rem 0 rgba(24, 74, 57, 0.12);
}

.gs-headset-entry h3 {
    margin: 0 0 0.45rem;
}

.gs-headset-entry p {
    margin: 0.35rem 0 0.75rem;
}

.gs-headset-entry .gs-player-exact-label {
    margin-top: 1rem;
    color: var(--rf-muted, #6d7263);
    font-size: 0.88rem;
}

.gs-player-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.6rem;
}

.gs-player-link-row a {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--rf-line, #d9d3c4);
    background: #fff;
    overflow-wrap: anywhere;
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
}

.gs-player-link-row button {
    width: auto;
    margin: 0;
    white-space: nowrap;
}

.gs-copy-status {
    display: block;
    min-height: 1.35em;
    margin-top: 0.45rem;
    color: var(--rf-verdigris-deep, #184a39);
    font-weight: 700;
}

/* durable, session-wide activity record */
.gs-record-mode {
    padding: 0.8rem 1rem;
    border: 1px solid var(--rf-line, #d9d3c4);
    background: var(--rf-card, #faf8f2);
    color: var(--rf-muted, #5c6961);
}

.gs-activity {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 2px solid var(--rf-ink, #21261e);
    background: var(--rf-card, #faf8f2);
}

.gs-activity-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.gs-activity-heading h2,
.gs-activity-heading h3,
.gs-activity-heading p {
    margin: 0 0 0.35rem;
}

.gs-activity-heading p {
    max-width: 52rem;
    color: var(--rf-muted, #5c6961);
    font-size: 0.9rem;
}

.gs-activity-export {
    display: flex;
    flex: 0 0 auto;
    gap: 0.45rem;
}

.gs-activity-export button,
.gs-activity-export [role="button"] {
    width: auto;
    margin: 0;
    padding: 0.38rem 0.7rem;
    white-space: nowrap;
}

.gs-activity-filters {
    display: grid;
    grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(9rem, 1fr)) auto;
    gap: 0.5rem;
    margin: 1rem 0 0.65rem;
}

.gs-activity-filters input,
.gs-activity-filters select,
.gs-activity-filters button {
    min-width: 0;
    margin: 0;
}

.gs-activity-filters input,
.gs-activity-filters select {
    border-color: var(--rf-line, #d9d3c4);
    background-color: #fbfaf5;
    color: var(--rf-ink, #21261e);
    color-scheme: light;
}

.gs-activity-filters select option {
    background: #fff;
    color: var(--rf-ink, #21261e);
}

.gs-activity-list {
    display: grid;
    gap: 0.65rem;
}

.gs-activity-row {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--rf-line, #d9d3c4);
    background: #fff;
    box-shadow: none;
}

.gs-activity-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin-bottom: 0.35rem;
    color: var(--rf-muted, #5c6961);
    font-size: 0.75rem;
}

.gs-activity-category,
.gs-activity-status {
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: #ece9df;
    font-weight: 750;
    text-transform: capitalize;
}

.gs-activity-status-succeeded {
    background: #dcefe5;
    color: #175e3e;
}

.gs-activity-status-failed,
.gs-activity-status-canceled {
    background: #f7dddd;
    color: #8c2525;
}

.gs-activity-status-pending,
.gs-activity-status-requested {
    background: #fff0c7;
    color: #795200;
}

.gs-activity-byline {
    margin: 0.15rem 0 0;
    color: var(--rf-muted, #5c6961);
    font-size: 0.82rem;
}

.gs-activity-prompt {
    margin: 0.6rem 0 0;
    padding: 0.45rem 0.7rem;
    border-left: 3px solid var(--rf-verdigris, #23664f);
    background: rgba(35, 102, 79, 0.06);
    font-size: 0.9rem;
}

.gs-activity-row details {
    margin-top: 0.45rem;
    font-size: 0.78rem;
}

.gs-activity-row details > summary {
    color: var(--rf-muted, #5c6961);
}

.gs-activity-row pre {
    max-height: 15rem;
    margin: 0.4rem 0 0;
    padding: 0.6rem;
    overflow: auto;
    font-size: 0.72rem;
    white-space: pre-wrap;
}

.gs-session-archive {
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rf-line, #d9d3c4);
}

.gs-archive-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--rf-line, #d9d3c4);
    color: inherit;
    text-decoration: none;
}

.gs-archive-row span {
    color: var(--rf-muted, #5c6961);
    font-size: 0.8rem;
    text-align: right;
}

@media (max-width: 900px) {
    .gs-activity-heading,
    .gs-archive-row {
        align-items: stretch;
        flex-direction: column;
    }

    .gs-activity-filters {
        grid-template-columns: 1fr 1fr;
    }

    .gs-archive-row span {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .gs-activity-export,
    .gs-activity-filters {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
}

.gs-channel-warning {
    margin: 1rem 0 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid #b56d00;
    border-left-width: 4px;
    background: #fff3d6;
}

.gs-channel-warning p {
    margin: 0 0 0.45rem;
}

.gs-channel-warning a {
    overflow-wrap: anywhere;
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8rem;
}

@media (max-width: 700px) {
    .gs-player-link-row {
        grid-template-columns: 1fr;
    }

    .gs-player-link-row button {
        width: 100%;
    }
}

/* docent live-session panel */
.companion-live-session {
    margin: 1rem 0 0;
    padding: 1rem;
    border: 1px solid var(--companion-border);
    background: #ffffff;
}

.companion-live-session-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.companion-live-session-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.companion-live-session-header small {
    color: var(--companion-muted);
    font-weight: 700;
}

.companion-live-session-actions {
    display: flex;
    gap: 0.5rem;
}

.companion-live-session-actions button {
    min-height: 2.6rem;
    margin: 0;
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
}

.docent-room-placement,
.gs-room-placement {
    margin-top: 0.85rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--companion-border, var(--pico-muted-border-color));
    border-left: 0.35rem solid var(--companion-accent, var(--pico-primary));
    background: #f8faf7;
}

.docent-room-placement label,
.gs-room-placement label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
    cursor: pointer;
}

.docent-room-placement label > span,
.gs-room-placement label > span {
    display: grid;
    gap: 0.2rem;
}

.docent-room-placement label small,
.gs-room-placement label small,
.docent-room-placement > small,
.gs-room-placement > small {
    color: var(--companion-muted, var(--pico-muted-color));
}

.docent-room-placement > small,
.gs-room-placement > small {
    display: block;
    margin: 0.45rem 0 0 3.25rem;
    font-weight: 700;
}

.docent-room-placement input[role="switch"],
.gs-room-placement input[role="switch"] {
    flex: 0 0 auto;
    margin: 0.1rem 0 0;
}

.companion-live-session-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.companion-live-session-stages:empty,
.companion-live-session-roster:empty {
    display: none;
}

.docent-stage {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--companion-border);
    border-radius: 999px;
    background: #f4f7f4;
    color: var(--companion-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.docent-stage[data-current="true"] {
    border-color: var(--companion-accent);
    background: #e4f1ec;
    color: var(--companion-accent);
}

.companion-live-session-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.docent-person {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--companion-border);
    border-radius: 0.4rem;
    background: #ffffff;
}

.docent-person small {
    color: var(--companion-muted);
    font-weight: 700;
}

.docent-person[data-claimed="true"][data-online="true"] small {
    color: #1e7b4f;
}

.docent-person[data-claimed="true"][data-online="false"] small {
    color: #8a6d1f;
}

.docent-person button {
    min-height: 1.8rem;
    margin: 0;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
}

.companion-live-session-empty {
    margin: 0.75rem 0 0;
    color: var(--companion-muted);
}

.companion-live-session[data-docent-state="live"]
    .companion-live-session-empty {
    display: none;
}

/* The permanent ledger is the primary Companion view. It deliberately uses
   the same gs-activity rows as /session because both read the same append-only
   server record. */
.companion-session-record {
    margin: 1rem 0;
    border-color: var(--companion-accent);
    border-left-width: 0.5rem;
    background: #fbfaf5;
}

.companion-session-record .companion-section-kicker,
.companion-edit-workflow .companion-section-kicker {
    margin: 0 0 0.2rem;
    color: var(--companion-accent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.companion-session-record-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    align-items: baseline;
    padding-top: 0.35rem;
}

.companion-session-record-context strong {
    color: var(--companion-text);
}

.companion-session-record-list {
    max-height: 34rem;
    overflow: auto;
}

.companion-session-record[data-access-state="authorized"] {
    box-shadow: inset 0.2rem 0 0 #1e7b4f;
}

.companion-session-record[data-access-state="unauthorized"],
.companion-session-record[data-access-state="unavailable"] {
    border-color: #a6423a;
}

.companion-record-edit-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.companion-record-artifact {
    display: grid;
    grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    margin: 0.65rem 0 0;
    padding: 0.55rem;
    border: 1px solid var(--companion-border);
    background: #f8faf8;
}

.companion-record-artifact img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.companion-record-artifact figcaption {
    color: var(--companion-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.companion-record-artifact[data-patch-state="active"] {
    border-left: 0.3rem solid #1e7b4f;
}

.companion-record-artifact[data-patch-state="redoable"] {
    border-left: 0.3rem solid #8a6d1f;
}

.companion-edit-workflow {
    scroll-margin-top: 1rem;
    padding: 1rem;
    border: 2px solid var(--companion-accent);
    background: #f4f8f4;
}

.companion-edit-workflow-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.companion-edit-workflow-heading h3,
.companion-edit-workflow-heading p {
    margin: 0;
}

.companion-edit-workflow-heading small {
    max-width: 25rem;
    color: var(--companion-muted);
    text-align: right;
}

.companion-edit-actions {
    margin-top: 0.85rem;
}

.companion-edit-actions button {
    font-weight: 800;
}

.companion-base-recovery {
    border-top-color: #b56d00;
}

.companion-base-recovery > details > summary {
    color: #704b00;
}

.companion-base-recovery-warning {
    margin: 0.85rem 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid #b56d00;
    border-left-width: 0.35rem;
    background: #fff3d6;
    color: #573c08;
}

.companion-base-recovery-actions {
    margin-top: 0.75rem;
}

@media (max-width: 560px) {
    .companion-edit-workflow-heading {
        flex-direction: column;
    }

    .companion-edit-workflow-heading small {
        text-align: left;
    }

    .companion-record-artifact {
        grid-template-columns: 1fr;
    }
}

/* Docent layout: library lives in the bottom admin details, so the workspace
   is a single column. DOM order keeps the image and its AI edit history ahead
   of secondary people/admin controls. */
.companion-workspace {
    grid-template-columns: 1fr;
}

.companion-current {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.companion-current > * {
    margin: 0;
}

.companion-participant-row-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.35rem;
    margin-left: auto;
}

.companion-participant-row-actions button {
    min-height: 1.9rem;
    margin: 0;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* home pathway tiles */
.home-pathway {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.home-tile {
    display: grid;
    gap: 0.35rem;
    min-height: 6.5rem;
    align-content: center;
    text-align: left;
    white-space: normal;
}

.home-tile strong {
    display: block;
    font-size: 1.15rem;
}

.home-tile small {
    display: block;
    opacity: 0.85;
    font-weight: 400;
}

.home-debug {
    margin-top: 2rem;
    opacity: 0.75;
}

/* ---- Reframing wizard theme (/session): gallery paper, ink, verdigris ---- */
.group-session-page {
    overflow-x: clip;
}

/* the wizard progress line says where you are — the big page header only
   pushed the panorama below the fold */
.group-session-page > header {
    display: none;
}

.group-session-page main.container {
    padding-top: 1rem;
}

.group-session-page {
    /* "Reframe" design system (claude.ai artifact 059bf215): near-white
       ground, ink text, deep blue-slate accent, zero radius, 2px ink
       frames, Fraunces display + Instrument Sans body. Legacy --rf-*
       names are kept as aliases so every older component recolors. */
    --rx-bg: #f3f2f2;
    --rx-surface: #eae9e9;
    --rx-ink: #201e1d;
    --rx-accent: #172c37;
    --rx-accent-600: #122430;
    --rx-accent-700: #0e1c25;
    --rx-accent-100: #dfe4e7;
    --rx-divider: rgba(32, 30, 29, 0.4);
    --rx-line: #d7d3d3;
    --rx-muted: #7d7979;
    --rx-heading: "Fraunces", Georgia, serif;
    --rx-body: "Instrument Sans", system-ui, -apple-system, sans-serif;

    --rf-paper: var(--rx-bg);
    --rf-card: var(--rx-surface);
    --rf-ink: var(--rx-ink);
    --rf-verdigris: var(--rx-accent);
    --rf-verdigris-deep: var(--rx-accent-600);
    --rf-line: var(--rx-line);
    --rf-muted: var(--rx-muted);

    --pico-background-color: var(--rx-bg);
    --pico-color: var(--rx-ink);
    --pico-h1-color: var(--rx-ink);
    --pico-h2-color: var(--rx-ink);
    --pico-h3-color: var(--rx-ink);
    --pico-primary: var(--rx-accent);
    --pico-primary-background: var(--rx-accent);
    --pico-primary-border: var(--rx-accent);
    --pico-primary-hover: var(--rx-accent-600);
    --pico-primary-hover-background: var(--rx-accent-600);
    --pico-primary-hover-border: var(--rx-accent-600);
    --pico-primary-underline: rgba(23, 44, 55, 0.5);
    --pico-primary-hover-underline: var(--rx-accent-600);
    --pico-primary-focus: rgba(23, 44, 55, 0.35);
    --pico-primary-inverse: #f3f2f2;
    --pico-secondary: var(--rx-ink);
    --pico-secondary-background: transparent;
    --pico-secondary-border: var(--rx-divider);
    --pico-secondary-hover: var(--rx-ink);
    --pico-secondary-hover-background: rgba(32, 30, 29, 0.07);
    --pico-secondary-hover-border: var(--rx-ink);
    --pico-secondary-focus: rgba(32, 30, 29, 0.2);
    --pico-secondary-inverse: var(--rx-ink);
    --pico-muted-color: var(--rx-muted);
    --pico-muted-border-color: var(--rx-line);
    --pico-card-background-color: var(--rx-surface);
    --pico-form-element-background-color: var(--rx-surface);
    --pico-form-element-border-color: var(--rx-divider);
    --pico-form-element-active-border-color: var(--rx-accent);
    --pico-form-element-focus-color: rgba(23, 44, 55, 0.35);
    --pico-form-element-color: var(--rx-ink);
    --pico-form-element-placeholder-color: var(--rx-muted);
    --pico-border-radius: 0px;

    /* the page is light-only; without this, devices in dark mode keep
       Pico's dark form colors and typed text disappears */
    color-scheme: light;

    background: var(--rx-bg);
    color: var(--rx-ink);
    font-family: var(--rx-body);
    font-size: 15px;
    line-height: 1.55;
}

.group-session-page h1,
.group-session-page h2,
.group-session-page h3,
.group-session-page h4 {
    font-family: var(--rx-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.12;
}

.group-session-page button,
.group-session-page [role="button"],
.group-session-page input,
.group-session-page select {
    border-radius: 0;
}

.group-session-page .gs-wizard-progress {
    color: var(--rf-verdigris);
}

/* look-around lightbox: the panorama tall, pannable along its width */
.group-session-page .gs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 2vh 2vw;
}

.group-session-page .gs-lightbox[hidden] {
    display: none;
}

.gs-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 26, 20, 0.88);
}

.gs-lightbox figure {
    position: relative;
    z-index: 1;
    max-width: min(94vw, 1400px);
    margin: 0;
    border: 1px solid var(--rf-ink);
    background: var(--rf-paper);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.gs-lightbox-pan {
    overflow-x: auto;
    overflow-y: hidden;
    background: #101310;
    -webkit-overflow-scrolling: touch;
}

.gs-lightbox-pan img {
    display: block;
    width: auto;
    max-width: none;
    height: min(66vh, 720px);
}

.gs-lightbox figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
}

.gs-lightbox-copy strong {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.15rem;
}

.gs-lightbox-copy small {
    color: var(--rf-muted);
}

.gs-lightbox-actions {
    display: flex;
    gap: 0.5rem;
}

.gs-lightbox-actions button {
    width: auto;
    margin: 0;
    padding: 0.45rem 1rem;
}

body.gs-lightbox-open {
    overflow: hidden;
}

/* place carousel: one place at a time, look around, then choose */
.gs-stage-wrap {
    position: relative;
}

/* Search stays centered in normal flow at every viewport width. */
.gs-stage-wrap .gs-library-toolbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: min(100%, 62rem);
    margin: 0.75rem auto;
    padding: 0.65rem;
    border: 1px solid var(--rf-line);
    background: var(--rf-card);
}

.gs-library-toolbar select,
.gs-library-toolbar [data-gs-library-filter-value] {
    flex: 0 1 11rem;
    width: auto;
    min-width: 8.5rem;
    min-height: 3rem;
    margin: 0;
    background: #ffffff;
    font-size: 1rem;
}

.gs-library-active-filters {
    display: flex;
    justify-content: center;
    min-height: 0;
    margin: 0 auto;
}

.gs-library-active-filters button {
    width: auto;
    min-height: 2rem;
    margin: 0 0 0.5rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

.gs-library-meta {
    width: min(100%, 62rem);
    margin: 0.35rem auto 0.75rem;
    text-align: center;
    color: var(--pico-muted-color);
    font-size: 0.88rem;
}

.gs-library-source-notice {
    display: block;
    width: min(100%, 62rem);
    margin: 0 auto 0.75rem;
    color: var(--rf-muted);
    text-align: center;
}

.gs-library-toolbar input {
    flex: 1 1 auto;
    min-height: 3rem;
    margin: 0;
    border-color: var(--rf-line);
    background: #ffffff;
    box-shadow: none;
    font-size: 1rem;
}

/* Panorama library manager */
.library-manager-body > header {
    width: min(100% - 2rem, 92rem);
}

.library-manager-shell {
    width: min(100% - 2rem, 92rem);
    margin: 0 auto 4rem;
}

.library-manager-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-bottom: 1rem;
}

.library-manager-intro,
.library-manager-search,
.library-manager-upload,
.library-manager-summary {
    border: 1px solid #cfd9d2;
    background: #ffffff;
}

.library-manager-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.8fr);
    gap: 1.25rem;
    padding: clamp(1rem, 3vw, 2rem);
}

.library-manager-intro h2,
.library-manager-card h3,
.library-manager-metadata h3 {
    margin-top: 0;
}

.library-manager-eyebrow {
    margin: 0 0 0.35rem;
    color: #176044;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.library-manager-auth {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.library-manager-auth label,
.library-manager-facets label,
.library-manager-query,
.library-manager-upload label,
.library-manager-metadata label {
    display: grid;
    gap: 0.28rem;
    margin: 0;
    font-weight: 750;
}

.library-manager-auth input,
.library-manager-facets select,
.library-manager-query input,
.library-manager-metadata input,
.library-manager-metadata select {
    min-height: 3rem;
    margin: 0;
    background: #ffffff;
    font-size: 1rem;
}

.library-manager-auth > div,
.library-manager-viewer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.library-manager-auth button,
.library-manager-viewer-actions button {
    width: auto;
    margin: 0;
}

.library-manager-upload {
    margin-top: 1rem;
    padding: 1rem;
}

.library-manager-upload summary {
    font-size: 1rem;
    font-weight: 850;
}

.library-manager-upload form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
    margin: 1rem 0 0.5rem;
}

.library-manager-upload label span,
.library-manager-upload output,
.library-manager-auth small {
    color: #53655b;
    font-size: 0.84rem;
}

.library-manager-search {
    margin-top: 1rem;
    padding: clamp(0.8rem, 2vw, 1.25rem);
}

.library-manager-tabs,
.library-manager-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
}

.library-manager-tabs button,
.library-manager-chips button {
    width: auto;
    min-height: 2.35rem;
    margin: 0;
    padding: 0.3rem 0.7rem;
}

.library-manager-tabs button.active {
    border-color: #173f31;
    background: #173f31;
    color: #ffffff;
}

.library-manager-search form[role="search"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: end;
    width: min(100%, 72rem);
    margin: 1rem auto;
}

.library-manager-search form[role="search"] .library-manager-query {
    grid-column: 1 / -1;
}

.library-manager-search form[role="search"] button {
    width: 100%;
    min-height: 3rem;
    margin: 0;
}

.library-manager-query-field {
    position: relative;
    display: block;
}

.library-manager-query-field > span {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    z-index: 1;
    transform: translateY(-50%);
    color: #36584a;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
}

.library-manager-query-field input {
    width: 100%;
    padding-left: 2.7rem;
    border: 2px solid #6c897b;
    color: #102219;
}

.library-manager-query-field input:focus {
    border-color: #176044;
    box-shadow: 0 0 0 3px rgba(23, 96, 68, 0.18);
}

.library-manager-facets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    width: min(100%, 72rem);
    margin: 0 auto 0.75rem;
}

.library-manager-chips:empty {
    display: none;
}

.library-manager-summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
}

.library-manager-summary [data-error="true"] {
    color: #8c2f26;
}

.library-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.library-manager-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #cfd9d2;
    background: #ffffff;
}

.library-manager-card-preview {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #17221b;
}

.library-manager-card-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    transition: transform 160ms ease;
}

.library-manager-card-preview:hover img,
.library-manager-card-preview:focus-visible img {
    transform: scale(1.025);
}

.library-manager-card-preview > span {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(13, 24, 18, 0.86);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
}

.library-manager-card-body {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 0.8rem;
}

.library-manager-card-body h3,
.library-manager-card-body p {
    margin: 0;
    overflow-wrap: anywhere;
}

.library-manager-card-body p {
    color: #53655b;
    font-size: 0.84rem;
}

.library-manager-card-badges,
.library-manager-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.library-manager-card-badges span,
.library-manager-card-tags span,
.library-manager-tag-list > span,
[data-library-viewer-analysis] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: max-content;
    max-width: 100%;
    padding: 0.18rem 0.48rem;
    border: 1px solid #9fc6b4;
    border-radius: 999px;
    background: #edf8f3;
    color: #164f39;
    font-size: 0.74rem;
    font-weight: 800;
}

.library-manager-card-badges [data-enabled="false"],
.library-manager-card-badges [data-analysis="failed"],
[data-library-viewer-analysis][data-status="failed"] {
    border-color: #d6aaa0;
    background: #f9ece8;
    color: #843b2f;
}

.library-manager-card-tags [data-suggested="true"],
.library-manager-tag-list [data-suggested="true"] {
    border-style: dashed;
    border-color: #ba9d57;
    background: #fff8df;
    color: #6e5417;
}

.library-manager-empty {
    display: grid;
    grid-column: 1 / -1;
    min-height: 10rem;
    place-content: center;
    text-align: center;
    color: #53655b;
}

.library-manager-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.library-manager-pager button {
    width: auto;
    margin: 0;
}

.library-manager-viewer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    padding: clamp(0.45rem, 2vw, 1.5rem);
    place-items: center;
}

.library-manager-viewer[hidden] {
    display: none;
}

.library-manager-viewer-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    background: rgba(7, 13, 10, 0.82);
}

.library-manager-viewer > article {
    position: relative;
    z-index: 1;
    width: min(96vw, 92rem);
    max-height: 94vh;
    margin: 0;
    padding: 0;
    overflow: auto;
    background: #ffffff;
}

.library-manager-viewer > article > header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin: 0;
    padding: 0.8rem 1rem;
}

.library-manager-viewer h2 {
    margin: 0.15rem 0 0;
}

.library-manager-viewer header button {
    width: auto;
    margin: 0;
}

.library-manager-viewer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.65fr);
}

.library-manager-viewer-pan {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 60vh;
    margin: 0;
    background: #111a15;
}

.library-manager-viewer-pan > button {
    position: relative;
    z-index: 2;
    width: 3rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(12, 25, 18, 0.82);
    color: #ffffff;
    font-size: 2.5rem;
}

.library-manager-viewer-scroll {
    position: relative;
    overflow: auto;
    overscroll-behavior: contain;
}

.library-manager-viewer-scroll img {
    display: block;
    width: auto;
    min-width: 100%;
    max-width: none;
    height: 60vh;
    object-fit: cover;
}

.library-manager-viewer-scroll > span {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: rgba(7, 13, 10, 0.86);
    color: #ffffff;
    font-weight: 800;
}

.library-manager-metadata {
    display: grid;
    gap: 0.8rem;
    align-content: start;
    max-height: 70vh;
    padding: 1rem;
    overflow: auto;
}

.library-manager-metadata > p {
    margin: 0;
    color: #405449;
}

.library-manager-metadata [data-library-viewer-tags] {
    display: grid;
    gap: 0.8rem;
}

.library-manager-metadata section h3 {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
}

.library-manager-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.library-manager-tag-list > span {
    flex-wrap: wrap;
    width: auto;
}

.library-manager-tag-list small {
    font-weight: 600;
}

.library-manager-tag-list button {
    width: auto;
    min-height: 1.8rem;
    margin: 0;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
}

.library-manager-metadata form {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding-top: 0.8rem;
    border-top: 1px solid #d8e0da;
}

.library-manager-metadata form button {
    margin: 0;
}

.library-manager-danger:hover,
.library-manager-danger:focus-visible {
    border-color: #8c2f26 !important;
    background: #8c2f26 !important;
    color: #ffffff !important;
}

body.library-manager-viewer-open {
    overflow: hidden;
}

@media (max-width: 800px) {
    .library-manager-intro,
    .library-manager-viewer-layout {
        grid-template-columns: 1fr;
    }

    .library-manager-search form[role="search"],
    .library-manager-facets,
    .library-manager-upload form {
        grid-template-columns: 1fr;
    }

    .library-manager-search form[role="search"] button,
    .library-manager-upload button {
        width: 100%;
    }

    .library-manager-viewer-pan,
    .library-manager-viewer-scroll img {
        min-height: 42vh;
        height: 42vh;
    }

    .library-manager-metadata {
        max-height: none;
    }
}

@media (max-width: 520px) {
    .library-manager-shell,
    .library-manager-body > header {
        width: min(100% - 1rem, 92rem);
    }

    .library-manager-summary,
    .library-manager-pager,
    .library-manager-viewer > article > header {
        align-items: stretch;
        flex-direction: column;
    }

    .library-manager-viewer-pan > button {
        width: 2.35rem;
    }
}

.gs-library-toolbar button {
    flex: 0 0 auto;
    width: auto;
    min-height: 2.7rem;
    margin: 0;
    padding: 0.35rem 1rem;
    border: 1px solid var(--rf-ink);
    background: var(--rf-ink);
    box-shadow: none;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .gs-stage-wrap .gs-library-toolbar,
    .companion-panorama-viewer header,
    .companion-panorama-viewer figcaption {
        align-items: stretch;
        flex-direction: column;
    }

    .gs-library-toolbar button,
    .companion-panorama-viewer-actions,
    .companion-panorama-viewer-actions > * {
        width: 100%;
    }

    .companion-panorama-viewer-pan {
        height: 48vh;
    }
}

/* panoramas are the point: the carousel breaks out of the page column
   and runs edge to edge */
.gs-carousel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.gs-stage {
    position: relative;
    border-top: 1px solid var(--rf-ink);
    border-bottom: 1px solid var(--rf-ink);
    background: #101310;
}

.gs-stage:focus-visible {
    outline: 3px solid var(--rf-verdigris);
    outline-offset: 2px;
}

.gs-stage-pan {
    /* a window into a larger picture: the image is taller than the
       viewport (vertical center-crop) so it is also much wider than the
       screen — panning and the slow drift genuinely look around */
    height: min(58vh, 680px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.gs-stage-pan::-webkit-scrollbar {
    display: none;
}

.gs-stage-pan img {
    display: block;
    width: auto;
    max-width: none;
    height: min(104vh, 1220px);
    margin-top: calc((min(58vh, 680px) - min(104vh, 1220px)) / 2);
}

.gs-stage-arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 3.2rem;
    height: 3.2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    transform: translateY(-50%);
    background: rgba(33, 38, 30, 0.72);
    color: #ffffff;
    font-size: 1.7rem;
    line-height: 1;
}

.gs-stage-arrow[data-dir="prev"] {
    left: 0.75rem;
}

.gs-stage-arrow[data-dir="next"] {
    right: 0.75rem;
}

.gs-stage-counter {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    padding: 0.1rem 0.6rem;
    background: rgba(33, 38, 30, 0.72);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
}

.gs-stage-flag {
    position: absolute;
    top: 0.75rem;
    left: 0.9rem;
    padding: 0.15rem 0.65rem;
    background: var(--rf-verdigris);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
}

.gs-stage-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem clamp(1rem, 4vw, 3rem);
    border-bottom: 1px solid var(--rf-line);
    background: var(--rf-card);
}

.gs-stage-copy strong {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.gs-stage-copy small {
    color: var(--rf-muted);
}

.gs-stage-caption > button {
    width: auto;
    min-width: 11rem;
    margin: 0;
    padding: 0.55rem 1.2rem;
}

.gs-filmstrip {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0 clamp(1rem, 4vw, 3rem) 0.3rem;
    overflow-x: auto;
}

.gs-filmstrip button {
    width: 8.5rem;
}

.gs-filmstrip button {
    position: relative;
    flex: 0 0 auto;
    width: 7rem;
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0;
    background: none;
    opacity: 0.75;
    transition:
        opacity 0.12s ease,
        border-color 0.12s ease;
}

.gs-filmstrip button img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.gs-filmstrip button[data-active="true"] {
    border-color: var(--rf-ink);
    opacity: 1;
}

.gs-filmstrip button:hover,
.gs-filmstrip button:focus-visible {
    opacity: 1;
}

.gs-filmstrip button[data-picked="true"]::after {
    content: "№ " attr(data-no);
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0.4rem;
    background: var(--rf-ink);
    color: var(--rf-paper);
    font-size: 0.7rem;
    font-weight: 700;
}

/* quick session + name suggestion */
.gs-quick-session {
    display: grid;
    gap: 0.2rem;
    width: 100%;
    margin: 0 0 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--rf-verdigris);
    background: rgba(35, 102, 79, 0.08);
    color: var(--rf-ink);
    text-align: left;
}

.gs-quick-session strong {
    color: var(--rf-verdigris);
    font-size: 1.05rem;
}

.gs-quick-session small {
    color: var(--rf-muted);
}

.gs-name-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.gs-name-row input {
    flex: 1 1 auto;
    margin: 0;
}

.gs-name-row button {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0.4rem 0.9rem;
    white-space: nowrap;
}

/* ---- Focused enabled-panorama gallery (/gallery) ---- */

.enabled-gallery-body {
    --pico-color: #202723;
    --pico-h1-color: #202723;
    --pico-h2-color: #202723;
    --pico-h3-color: #202723;
    --pico-h4-color: #202723;
    --pico-muted-color: #68766f;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -10%, rgba(47, 123, 111, 0.13), transparent 34rem),
        #f4f0e7;
    color: #202723;
}

.enabled-gallery-body > header {
    padding-bottom: 0.45rem;
    text-align: center;
}

.enabled-gallery-body > header h1 {
    margin-bottom: 0;
    font-size: clamp(1.6rem, 4vw, 2.55rem);
}

.enabled-gallery-shell {
    width: min(100% - 2rem, 1560px);
    margin: 0 auto 4rem;
}

.enabled-gallery-nav {
    display: flex;
    justify-content: center;
    gap: clamp(0.85rem, 4vw, 2.2rem);
    margin: 0 auto 1.25rem;
    padding: 0.65rem 1rem;
    border-block: 1px solid rgba(32, 39, 35, 0.17);
}

.enabled-gallery-nav a {
    color: #35544a;
    font-weight: 650;
    text-decoration: none;
}

.enabled-gallery-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.15rem, 3vw, 2.25rem);
    border: 1px solid rgba(32, 39, 35, 0.15);
    border-radius: 1.1rem;
    background: rgba(255, 253, 248, 0.9);
    box-shadow: 0 18px 44px rgba(32, 39, 35, 0.08);
}

.enabled-gallery-intro h2,
.enabled-gallery-intro p {
    margin-bottom: 0.35rem;
    color: #202723;
}

.enabled-gallery-intro > div {
    max-width: 76ch;
}

.enabled-gallery-intro > a {
    flex: 0 0 auto;
    margin: 0;
}

.enabled-gallery-eyebrow {
    color: #286a5a;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.enabled-gallery-controls {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 0.8fr);
    align-items: end;
    gap: 1.2rem;
    margin: 1.25rem auto 0;
    padding: 1.1rem;
    border: 1px solid rgba(32, 39, 35, 0.13);
    border-radius: 1rem;
    background: rgba(255, 253, 248, 0.92);
}

.enabled-gallery-filter {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(150px, 0.28fr) auto;
    align-items: end;
    justify-content: center;
    gap: 0.75rem;
    width: min(100%, 980px);
    margin: 0 auto;
}

.enabled-gallery-filter label,
.enabled-gallery-admin label {
    margin: 0;
}

.enabled-gallery-filter label > span,
.enabled-gallery-admin label > span {
    display: block;
    margin-bottom: 0.28rem;
    color: #52635c;
    font-size: 0.78rem;
    font-weight: 700;
}

.enabled-gallery-filter input,
.enabled-gallery-filter select,
.enabled-gallery-filter button,
.enabled-gallery-admin input {
    min-height: 3rem;
    margin: 0;
}

.enabled-gallery-search input {
    width: 100%;
    text-align: center;
}

.enabled-gallery-admin {
    padding-left: 1.2rem;
    border-left: 1px solid rgba(32, 39, 35, 0.14);
}

.enabled-gallery-admin small {
    display: block;
    margin-top: 0.35rem;
    color: #68766f;
}

.enabled-gallery-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.1rem 0 0.75rem;
    padding: 0 0.2rem;
    color: #53635c;
}

.enabled-gallery-summary strong {
    color: #202723;
    white-space: nowrap;
}

.enabled-gallery-summary [data-gallery-status] {
    text-align: right;
}

.enabled-gallery-summary [data-gallery-status][data-error="true"] {
    color: #a33232;
    font-weight: 700;
}

.enabled-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    min-height: 12rem;
}

.enabled-gallery-grid[aria-busy="true"] {
    opacity: 0.62;
}

.enabled-gallery-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(32, 39, 35, 0.16);
    border-radius: 0.9rem;
    background: #fffdf8;
    box-shadow: 0 8px 24px rgba(32, 39, 35, 0.07);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

.enabled-gallery-card:hover,
.enabled-gallery-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(32, 39, 35, 0.13);
}

.enabled-gallery-card-preview {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #17211d;
}

.enabled-gallery-card-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.enabled-gallery-card-preview:hover img,
.enabled-gallery-card-preview:focus-visible img {
    transform: scale(1.025);
}

.enabled-gallery-card-preview span {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    background: rgba(18, 28, 24, 0.84);
    color: white;
    font-size: 0.72rem;
    font-weight: 750;
}

.enabled-gallery-card-body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: start;
    padding: 0.9rem;
}

.enabled-gallery-card-body h3 {
    width: 100%;
    margin: 0.55rem 0 0.2rem;
    overflow: hidden;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enabled-gallery-card-body p {
    min-height: 2.5em;
    margin: 0 0 0.7rem;
    color: #68766f;
    font-size: 0.78rem;
}

.enabled-gallery-enabled-badge {
    padding: 0.22rem 0.52rem;
    border-radius: 999px;
    background: #dceee6;
    color: #1d664e;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.enabled-gallery-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    width: 100%;
    margin-top: auto;
}

.enabled-gallery-card-actions button {
    margin: 0;
    padding: 0.5rem 0.6rem;
    font-size: 0.76rem;
}

.enabled-gallery-danger {
    border-color: rgba(163, 50, 50, 0.48) !important;
    color: #9a2f2f !important;
}

.enabled-gallery-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.4rem;
    min-height: 16rem;
    padding: 2rem;
    border: 1px dashed rgba(32, 39, 35, 0.28);
    border-radius: 1rem;
    background: rgba(255, 253, 248, 0.68);
    color: #63726b;
    text-align: center;
}

.enabled-gallery-empty strong {
    color: #202723;
    font-size: 1.2rem;
}

.enabled-gallery-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.2rem;
}

.enabled-gallery-pager button {
    width: auto;
    margin: 0;
}

.enabled-gallery-viewer[hidden] {
    display: none;
}

.enabled-gallery-viewer {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(0.5rem, 2vw, 1.5rem);
}

.enabled-gallery-viewer-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(12, 18, 15, 0.9);
}

.enabled-gallery-viewer figure {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(96vw, 1680px);
    height: min(94vh, 1040px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 1rem;
    background: #111915;
    color: white;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.enabled-gallery-viewer figure > header,
.enabled-gallery-viewer figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.8rem 1rem;
    background: #f9f6ef;
    color: #202723;
}

.enabled-gallery-viewer figure h2,
.enabled-gallery-viewer figure p {
    margin: 0;
}

.enabled-gallery-viewer figure h2 {
    max-width: 70vw;
    overflow: hidden;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enabled-gallery-viewer-pan {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
    background: #0c110f;
}

.enabled-gallery-viewer-scroll {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    cursor: grab;
    scrollbar-color: #6d8c80 #17211d;
}

.enabled-gallery-viewer-scroll img {
    display: block;
    width: auto;
    max-width: none;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
}

.enabled-gallery-viewer-arrow {
    position: relative;
    z-index: 3;
    width: clamp(3.25rem, 6vw, 5rem);
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 26, 21, 0.92);
    color: white;
    font-size: clamp(2.5rem, 7vw, 5rem);
}

.enabled-gallery-viewer-arrow:hover,
.enabled-gallery-viewer-arrow:focus-visible {
    background: #296957;
}

.enabled-gallery-viewer-loading {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.8rem;
    pointer-events: none;
    background: rgba(10, 16, 13, 0.58);
}

.enabled-gallery-viewer-loading[hidden] {
    display: none;
}

.enabled-gallery-viewer-loading span {
    width: 2.6rem;
    height: 2.6rem;
    border: 4px solid rgba(255, 255, 255, 0.28);
    border-top-color: white;
    border-radius: 50%;
    animation: enabled-gallery-spin 0.75s linear infinite;
}

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

.enabled-gallery-viewer-pan.is-loading .enabled-gallery-viewer-scroll {
    opacity: 0.48;
}

.enabled-gallery-viewer figcaption > div:first-child {
    min-width: 0;
}

.enabled-gallery-viewer figcaption small {
    color: #68766f;
}

.enabled-gallery-viewer-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
}

.enabled-gallery-viewer-actions input,
.enabled-gallery-viewer-actions button,
.enabled-gallery-viewer-actions a {
    width: auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
}

.enabled-gallery-viewer-actions input {
    width: min(16rem, 22vw);
}

body.enabled-gallery-viewer-open {
    overflow: hidden;
}

@media (max-width: 980px) {
    .enabled-gallery-controls {
        grid-template-columns: 1fr;
    }

    .enabled-gallery-admin {
        padding-top: 1rem;
        padding-left: 0;
        border-top: 1px solid rgba(32, 39, 35, 0.14);
        border-left: 0;
    }

    .enabled-gallery-viewer figcaption {
        align-items: stretch;
        flex-direction: column;
    }

    .enabled-gallery-viewer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .enabled-gallery-viewer-actions input {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .enabled-gallery-shell {
        width: min(100% - 1rem, 1560px);
    }

    .enabled-gallery-intro {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
    }

    .enabled-gallery-intro > a {
        width: 100%;
    }

    .enabled-gallery-filter {
        grid-template-columns: 1fr;
    }

    .enabled-gallery-summary {
        align-items: start;
        flex-direction: column;
    }

    .enabled-gallery-summary [data-gallery-status] {
        text-align: left;
    }

    .enabled-gallery-grid {
        grid-template-columns: 1fr;
    }

    .enabled-gallery-viewer {
        padding: 0;
    }

    .enabled-gallery-viewer figure {
        width: 100vw;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .enabled-gallery-viewer-pan {
        grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    }

    .enabled-gallery-viewer-arrow {
        width: 3rem;
    }

    .enabled-gallery-viewer-actions {
        grid-template-columns: 1fr;
    }

    .enabled-gallery-viewer-actions input {
        grid-column: auto;
    }

    .enabled-gallery-viewer-actions input,
    .enabled-gallery-viewer-actions button,
    .enabled-gallery-viewer-actions a {
        width: 100%;
    }
}

/* MOCAPPE research consent on the review step */
.gs-consent {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rf-ink);
    background: var(--rf-card);
}

.gs-consent h3 {
    margin-bottom: 0.5rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.01em;
}

.gs-consent p {
    margin-bottom: 0.6rem;
    font-size: 0.92rem;
}

.gs-consent-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.5rem;
    margin: 0.85rem 0 0.35rem;
}

.gs-consent-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    margin: 0;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--rf-line);
    background: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

.gs-consent-row input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    flex: 0 0 auto;
}

.gs-session-number {
    padding: 0.75rem 1rem;
    border: 1px solid var(--rf-verdigris);
    background: rgba(35, 102, 79, 0.08);
    font-weight: 700;
}

/* ══════════ Reframe design system (/session) — fonts ══════════ */
@font-face {
    font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url("/styles/fonts/fraunces-vn.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url("/styles/fonts/fraunces-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url("/styles/fonts/fraunces-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/styles/fonts/instrument-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/styles/fonts/instrument-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════ Reframe design system — layout & components ══════════ */
.rx-kicker {
    display: block;
    margin: 0;
    color: var(--rx-accent-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.1;
    text-transform: uppercase;
}

.rx-display {
    margin: 0;
    font-family: var(--rx-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.04;
}

.rx-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 16px;
}

.rx-header small {
    color: rgba(32, 30, 29, 0.55);
    font-size: 13px;
}

.rx-frame {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--rx-ink);
    background: var(--rx-bg);
}

/* — progress / stage ruler — */
.rx-ruler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    border-bottom: 2px solid var(--rx-ink);
}

.rx-ruler button {
    margin: 0;
    padding: 14px 20px;
    border: 0;
    border-right: 1px solid var(--rx-divider);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rx-ruler button:last-child {
    border-right: 0;
}

.rx-ruler button:hover {
    background: rgba(23, 44, 55, 0.05);
}

.rx-ruler button[data-state="active"] {
    background: rgba(23, 44, 55, 0.08);
}

.rx-ruler-top {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rx-ruler-chip {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    color: var(--rx-muted);
    font-family: var(--rx-heading);
    font-size: 12px;
    font-weight: 700;
}

.rx-ruler button[data-state="active"] .rx-ruler-chip {
    background: var(--rx-accent);
    color: var(--rx-bg);
}

.rx-ruler button[data-state="done"] .rx-ruler-chip {
    background: var(--rx-ink);
    color: var(--rx-bg);
}

.rx-ruler-label {
    color: var(--rx-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rx-ruler button[data-state="active"] .rx-ruler-label {
    color: var(--rx-accent-700);
}

.rx-ruler-title {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    color: var(--rx-muted);
    font-family: var(--rx-heading);
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-ruler button[data-state="active"] .rx-ruler-title,
.rx-ruler button[data-state="done"] .rx-ruler-title {
    color: var(--rx-ink);
}

/* — body: scrollable main + fixed rail — */
.rx-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: 0;
    flex: 1;
}

.rx-main {
    min-height: 0;
    padding: clamp(22px, 2.6vw, 36px);
    border-right: 2px solid var(--rx-ink);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rx-line) transparent;
}

.rx-main::-webkit-scrollbar { width: 10px; }
.rx-main::-webkit-scrollbar-thumb { background: var(--rx-line); }

.rx-main h2 {
    font-size: clamp(26px, 2.6vw, 34px);
    margin: 0 0 12px;
}

.rx-main .rx-kicker { margin-bottom: 10px; }

.rx-intro {
    max-width: 46ch;
    margin: 0 0 22px;
    color: rgba(32, 30, 29, 0.72);
    font-size: 15px;
    line-height: 1.5;
}

.rx-rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(20px, 2.2vw, 28px);
    background: var(--rx-surface);
    overflow-y: auto;
    scrollbar-width: thin;
}

.rx-rail .rx-kicker { margin-bottom: 16px; }

.rx-rail-item { margin-bottom: 16px; }

.rx-rail-item p:first-child {
    margin: 0 0 3px;
    color: rgba(32, 30, 29, 0.55);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rx-rail-item p:last-child {
    margin: 0;
    font-family: var(--rx-heading);
    font-size: 18px;
    font-weight: 600;
}

.rx-rail-item .rx-rail-big {
    font-family: var(--rx-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.05;
}

.rx-rail hr {
    height: 2px;
    margin: 0 0 16px;
    border: 0;
    background: var(--rx-divider);
}

.rx-rail-spacer { margin-bottom: auto; }

.rx-rail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

/* rail mini-list of chosen places, in visit order */
.rx-rail-places {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.rx-rail-place {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--rx-divider);
    background: var(--rx-bg);
    font-size: 13px;
}

.rx-rail-place strong {
    flex: none;
    font-family: var(--rx-heading);
    font-size: 12px;
}

.rx-rail-place span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-rail-place button {
    width: 22px;
    height: 22px;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rx-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.rx-rail-place button:hover { color: var(--rx-ink); }

/* — buttons — */
.rx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--rx-ink);
    font-family: var(--rx-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}

.rx-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.rx-btn-primary {
    background: var(--rx-accent);
    color: var(--rx-bg);
}
.rx-btn-primary:not(:disabled):hover { background: var(--rx-accent-600); }

.rx-btn-secondary { border-color: var(--rx-divider); }
.rx-btn-secondary:hover { background: rgba(32, 30, 29, 0.07); }

.rx-btn-ghost { color: var(--rx-accent); }
.rx-btn-ghost:not(:disabled):hover { background: rgba(23, 44, 55, 0.1); }

.rx-btn-block {
    width: 100%;
    justify-content: flex-start;
    min-height: 50px;
    text-align: left;
}

.rx-btn-danger {
    background: var(--rx-ink);
    color: var(--rx-bg);
}
.rx-btn-danger:not(:disabled):hover { background: #000000; }

/* — place cards (step 2) — */
.rx-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rx-card {
    position: relative;
    border: 2px solid var(--rx-divider);
    background: var(--rx-surface);
}

.rx-card[data-selected="true"] { border-color: var(--rx-accent); }

.rx-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 2;
    overflow: hidden;
}

.rx-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.08);
}

.rx-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(20, 18, 17, 0.74) 0%, rgba(20, 18, 17, 0.12) 44%, rgba(20, 18, 17, 0) 70%);
}

.rx-card-copy {
    position: absolute;
    left: 14px;
    right: 130px;
    bottom: 12px;
    z-index: 1;
    pointer-events: none;
}

.rx-card-copy strong {
    display: block;
    color: #f6f4f2;
    font-family: var(--rx-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
}

.rx-card-copy small {
    display: block;
    margin-top: 3px;
    color: rgba(246, 244, 242, 0.82);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.rx-card-toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 9px 15px;
    border: 0;
    background: rgba(246, 244, 242, 0.92);
    color: var(--rx-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rx-card-toggle:hover { filter: brightness(1.05); }

.rx-card[data-selected="true"] .rx-card-toggle {
    background: var(--rx-accent);
    color: var(--rx-bg);
}

/* search + randomize row above the cards */
.rx-search-row {
    display: flex;
    gap: 10px;
    margin: 0 0 18px;
}

.rx-search-row input {
    flex: 1 1 auto;
    min-height: 40px;
    margin: 0;
}

.rx-search-row .rx-btn { flex: none; min-height: 40px; }

/* — fields — */
.rx-field { margin-bottom: 18px; }

.rx-field > span,
.rx-field > label span {
    display: block;
    margin-bottom: 5px;
    color: rgba(32, 30, 29, 0.7);
    font-size: 12px;
}

.rx-name-row { display: flex; gap: 8px; }
.rx-name-row input { flex: 1 1 auto; margin: 0; }
.rx-name-row .rx-btn { flex: none; }

/* count stepper in the new language */
.group-session-page .gs-count-stepper button {
    width: 3.4rem;
    height: 3.4rem;
    border: 2px solid var(--rx-ink);
    background: transparent;
    color: var(--rx-ink);
    font-size: 1.6rem;
}

.group-session-page .gs-count-stepper output {
    font-family: var(--rx-heading);
    font-size: 2.6rem;
    font-weight: 700;
}

/* — consent screen — */
.rx-consent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    min-height: 0;
    flex: 1;
}

.rx-consent-visual {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border-right: 2px solid var(--rx-ink);
    background: #14161a;
}

.rx-consent-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.08);
}

.rx-consent-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(10, 15, 20, 0.82) 0%, rgba(10, 15, 20, 0.18) 46%, rgba(10, 15, 20, 0.05) 100%);
}

.rx-consent-caption {
    position: absolute;
    left: clamp(22px, 2.4vw, 36px);
    right: clamp(22px, 2.4vw, 36px);
    bottom: clamp(22px, 2.4vw, 34px);
    z-index: 1;
    pointer-events: none;
}

.rx-consent-caption > small {
    display: block;
    color: rgba(246, 244, 242, 0.85);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.rx-consent-caption .rx-display {
    margin-top: 8px;
    color: #f6f4f2;
    font-size: clamp(32px, 4vw, 52px);
}

.rx-consent-caption p {
    max-width: 34ch;
    margin: 10px 0 0;
    color: rgba(246, 244, 242, 0.82);
    font-size: 15px;
    line-height: 1.5;
}

.rx-consent-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(24px, 2.6vw, 40px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.rx-consent-panel h2 { font-size: clamp(26px, 2.8vw, 36px); }

.rx-consent-panel > p {
    max-width: 52ch;
    color: rgba(32, 30, 29, 0.76);
    font-size: 14px;
    line-height: 1.6;
}

.rx-info-rows {
    margin: 8px 0 22px;
    border: 2px solid var(--rx-divider);
}

.rx-info-row {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px 18px;
}

.rx-info-row + .rx-info-row { border-top: 1px solid var(--rx-divider); }

.rx-info-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--rx-accent);
    color: var(--rx-bg);
    font-size: 15px;
    font-weight: 800;
}

.rx-info-chip[data-kind="never"] {
    border: 2px solid var(--rx-muted);
    background: transparent;
    color: var(--rx-muted);
}

.rx-info-row p:first-of-type {
    margin: 0 0 3px;
    font-family: var(--rx-heading);
    font-size: 15px;
    font-weight: 600;
}

.rx-info-row p:last-of-type {
    margin: 0;
    color: rgba(32, 30, 29, 0.68);
    font-size: 14px;
    line-height: 1.5;
}

.rx-session-number {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 0;
    padding: 14px 18px;
    border: 2px solid var(--rx-ink);
    background: var(--rx-surface);
}

.rx-session-number span:first-child {
    color: rgba(32, 30, 29, 0.6);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.rx-session-number span:last-child {
    font-family: var(--rx-heading);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* per-person agree ticks, in the design's row language */
.rx-ticks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 18px 0 0;
}

.rx-tick {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 2px solid var(--rx-divider);
    background: var(--rx-surface);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rx-tick:has(input:checked) {
    border-color: var(--rx-accent);
    background: rgba(23, 44, 55, 0.07);
}

.rx-tick input {
    width: 22px;
    height: 22px;
    flex: none;
    margin: 0;
    border-radius: 0;
}

.rx-consent-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

.rx-consent-foot {
    margin: 14px 0 0;
    color: rgba(32, 30, 29, 0.62);
    font-size: 13px;
    line-height: 1.5;
}

/* — live rail extras — */
.rx-end-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 2px solid var(--rx-divider);
}

/* — responsive: stack rail under main below ~900px — */
@media (max-width: 900px) {
    .rx-body { grid-template-columns: 1fr; }
    .rx-main { border-right: 0; border-bottom: 2px solid var(--rx-ink); }
    .rx-consent { grid-template-columns: 1fr; }
    .rx-consent-visual { border-right: 0; border-bottom: 2px solid var(--rx-ink); min-height: 220px; }
}

/* frames fill the viewport; content scrolls inside the main panel */
.rx-setup-frame,
.rx-live-frame,
.rx-consent-frame {
    height: calc(100vh - 170px);
    min-height: 620px;
}

@media (max-width: 900px) {
    .rx-setup-frame,
    .rx-live-frame,
    .rx-consent-frame {
        height: auto;
        min-height: 0;
    }
    .rx-main { overflow-y: visible; }
}

/* harmonize remaining legacy gs-* components with the Reframe language:
   square corners, ink/divider borders, no green tints or drop shadows */
.group-session-page .gs-roster-card,
.group-session-page .gs-timeline-row,
.group-session-page .gs-live-hint,
.group-session-page .gs-headset-entry,
.group-session-page .gs-draft-banner {
    border-radius: 0;
    box-shadow: none;
    background: var(--rx-surface);
}

.group-session-page .gs-roster-card,
.group-session-page .gs-timeline-row,
.group-session-page .gs-live-hint {
    border: 1px solid var(--rx-divider);
}

.group-session-page .gs-headset-entry {
    border: 2px solid var(--rx-ink);
}

.group-session-page .gs-draft-banner {
    border: 2px solid var(--rx-accent);
    background: var(--rx-accent-100);
    color: var(--rx-ink);
}

/* explicit form-control colors — Pico's dark-mode media query must never
   override these on the light-only session page */
.group-session-page input,
.group-session-page select,
.group-session-page textarea {
    color: var(--rx-ink);
    background-color: var(--rx-surface);
    caret-color: var(--rx-ink);
}

.group-session-page input::placeholder,
.group-session-page textarea::placeholder {
    color: var(--rx-muted);
    opacity: 1;
}

/* ---- operator home (/) in the Reframe language ---- */
.home-page .rx-home {
    padding-top: 1.5rem;
}

.home-page .rx-home-title {
    margin: 0.5rem 0 0.75rem;
    font-family: var(--rx-heading);
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 5.25rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--rx-ink);
}

.home-page .rx-home-sub {
    margin: 0 0 2.25rem;
    max-width: 44rem;
    color: var(--rx-muted);
    font-size: 1.1rem;
}

.home-page .rx-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 1.5rem;
}

.home-page .rx-home-card {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-height: 15rem;
    padding: 1.75rem;
    border: 2px solid var(--rx-ink);
    border-radius: 0;
    background: var(--rx-bg);
    color: var(--rx-ink);
    text-decoration: none;
}

.home-page .rx-home-card:hover,
.home-page .rx-home-card:focus-visible {
    background: var(--rx-surface);
    color: var(--rx-ink);
    text-decoration: none;
}

.home-page .rx-home-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.home-page .rx-home-head strong {
    font-family: var(--rx-heading);
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.home-page .rx-home-chip {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.1rem;
    background: var(--rx-accent);
    color: var(--rx-bg);
    font-family: var(--rx-heading);
    font-weight: 600;
    font-size: 0.95rem;
}

.home-page .rx-home-card p {
    margin: 0;
    color: rgba(32, 30, 29, 0.78);
    line-height: 1.55;
}

.home-page .rx-home-open {
    margin-top: auto;
    font-weight: 700;
    font-size: 0.95rem;
}

.home-page .rx-home-card[data-primary] {
    background: var(--rx-accent);
    border-color: var(--rx-accent);
    color: var(--rx-bg);
}

.home-page .rx-home-card[data-primary] .rx-home-chip {
    background: var(--rx-bg);
    color: var(--rx-ink);
}

.home-page .rx-home-card[data-primary] p {
    color: rgba(243, 242, 242, 0.85);
}

.home-page .rx-home-card[data-primary]:hover,
.home-page .rx-home-card[data-primary]:focus-visible {
    background: var(--rx-accent-600);
    border-color: var(--rx-accent-600);
    color: var(--rx-bg);
}

.home-page .rx-home-debug {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--rx-ink);
    opacity: 1;
}

.home-page .rx-home-debug summary {
    color: var(--rx-muted);
}

/* mid-session add-visitor block on the live dashboard */
.group-session-page .gs-add-visitor {
    margin: 0.75rem 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rx-divider);
    border-radius: 0;
    background: var(--rx-surface);
}

.group-session-page .gs-add-visitor summary {
    font-weight: 700;
    cursor: pointer;
}

.group-session-page .gs-add-visitor p {
    margin: 0.6rem 0;
    color: var(--rx-muted);
    font-size: 0.9rem;
}

.group-session-page .gs-add-visitor-status {
    min-height: 1.2em;
}

/* LLM prompt-enhancement toggle in the model admin form */
.companion-model-admin .companion-prompt-enhancement {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0.85rem 0;
    cursor: pointer;
}

.companion-model-admin .companion-prompt-enhancement input[role="switch"] {
    flex: 0 0 auto;
    width: 2.25em;
    height: 1.25em;
    /* the section's .companion-library input { min-height: 3rem } must not
       stretch the switch */
    min-height: 0;
    margin: 0.2rem 0 0;
}

.companion-model-admin .companion-prompt-enhancement > span {
    display: grid;
    gap: 0.2rem;
}

.companion-model-admin .companion-prompt-enhancement small {
    color: var(--companion-muted, var(--pico-muted-color));
}

/* enhanced-instruction lines (docent edit history + session record) */
.gs-activity-enhancement {
    margin: 0.35rem 0 0;
    padding: 0.35rem 0.7rem;
    border-left: 3px solid rgba(35, 102, 79, 0.35);
    color: var(--pico-muted-color, #5b5b56);
    font-size: 0.82rem;
}

.gs-activity-enhancement strong {
    color: inherit;
    font-weight: 700;
}

.companion-prompt-enhancement-line {
    display: block;
    margin: 0.15rem 0 0.25rem;
    padding-left: 0.55rem;
    border-left: 2px solid var(--companion-border, #cfcfc8);
    color: var(--companion-muted, var(--pico-muted-color));
    font-size: 0.78rem;
    line-height: 1.35;
}

/* generation-health panel (companion model admin) */
.companion-generation-health {
    margin: 0.75rem 0 0.25rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--companion-border, #cfcfc8);
    border-left: 0.35rem solid var(--companion-accent, #23664f);
    font-size: 0.85rem;
}

.companion-generation-health[data-error="true"] {
    border-color: #a03024;
    border-left-color: #a03024;
    background: rgba(160, 48, 36, 0.06);
}

.companion-generation-health[data-error="true"] strong {
    color: #a03024;
}

.companion-generation-health ul {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
    color: var(--companion-muted, var(--pico-muted-color));
}

.companion-generation-health ul:empty {
    display: none;
}

.companion-generation-health li {
    margin: 0.15rem 0;
    overflow-wrap: anywhere;
}

/* provider-outage alert on the live visit dashboard */
.group-session-page .gs-generation-alert {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    border: 2px solid #a03024;
    border-radius: 0;
    background: rgba(160, 48, 36, 0.07);
    color: #a03024;
    font-weight: 700;
    overflow-wrap: anywhere;
}