/* ============================================================================
   SUGGEST WIDGET — community curation (design upgrade #1, 2026-08-09)
   Shared by the Contribute tab (anime/manga) and the thin-page sheet
   (character/person/studio/publication).

   Architecture: a centered column of ZONES. Each zone is a card with its
   own header (icon tile + title + purpose line + right-hand meta slot),
   so every section carries real visual weight and reads as its own
   surface. Search is standalone with in-flow results; existing links
   render as horizontal credit strips; proposals land live as pending
   cards. Balanced compositions throughout — no control floats one-sided.
   ============================================================================ */

.sgw {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sgw-intro {
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.55);
    font-size: 0.9rem;
    margin: 0 auto;
    max-width: 640px;
    text-align: center;
}

.sgw-login-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    font-size: 0.9rem;
}

.sgw-login-cue i {
    color: var(--brand-blue);
}

.sgw-login-cue a {
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: var(--weight-medium);
}

.sgw-locked-banner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    font-size: 0.9rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.75);
}

.sgw-locked-banner i {
    color: var(--danger);
    margin-top: 2px;
}

/* ============================================================
   ZONES — the section cards
   ============================================================ */

.sgw-zone {
    background: var(--surface-grad);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
}

.sgw-zone-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-subtle);
}

.sgw-zone-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(52, 152, 219, 0.13);
    color: var(--brand-blue);
}

.sgw-zone-purple .sgw-zone-ic {
    background: rgba(155, 89, 182, 0.14);
    color: var(--brand-purple);
}

.sgw-zone-teal .sgw-zone-ic {
    background: rgba(26, 188, 156, 0.13);
    color: #1abc9c;
}

.sgw-zone-titles {
    flex: 1;
    min-width: 0;
}

.sgw-zone-title {
    font-size: 1.02rem;
    font-weight: var(--weight-semibold);
    margin: 0;
    color: var(--text);
}

.sgw-zone-sub {
    font-size: 0.8rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
    margin: 3px 0 0;
}

.sgw-zone-meta {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
}

.sgw-zone-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sgw-subhead {
    font-size: 0.78rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.5);
    margin: 4px 0 -6px;
}

/* Balanced grids inside zones */
.sgw-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 28px;
}

.sgw-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 4px 28px;
}

/* Grid children default to min-width auto and blow out narrow
   viewports - every cell must be allowed to shrink. */
.sgw-grid2 > *,
.sgw-class-grid > * {
    min-width: 0;
}

@media (max-width: 720px) {
    .sgw-grid2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FIELDS
   ============================================================ */

.sgw-field {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sgw-field .sgw-field-head {
    margin-bottom: 0;
}

/* Format stubs - the reference for how data should be entered. */
.sgw-hint {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.74rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.4);
    margin: 0;
}

.sgw-hint i {
    font-size: 0.68rem;
    color: rgba(52, 152, 219, 0.55);
}

.sgw-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.sgw-field-label {
    font-weight: var(--weight-medium);
    font-size: 0.9rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.85);
}

.sgw-field-state {
    font-size: 0.73rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
}

.sgw-field-state.changed {
    color: var(--brand-blue);
}

.sgw-field-state.pending {
    color: #f59e0b;
}

.sgw-field-lock-note {
    font-size: 0.8rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
    margin: 6px 0 0;
}

.sgw-field-lock-note i {
    font-size: 0.7rem;
    margin-right: 5px;
}

.sgw-input {
    width: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    min-height: 44px;
    font-family: inherit;
    font-size: 0.9rem;
}

.sgw-input:focus {
    outline: none;
    border-color: var(--brand-blue);
}

.sgw-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

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

.sgw-input.sgw-changed {
    border-color: rgba(52, 152, 219, 0.55);
}

/* ============================================================
   FOOTER — the closing card (note + balanced submit row)
   ============================================================ */

.sgw-footer {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sgw-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.sgw-note {
    width: 100%;
}

.sgw-submit {
    background: var(--brand-blue);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: var(--weight-medium);
    padding: 10px 26px;
    min-height: 44px;
    cursor: pointer;
    transition: background var(--transition-base), opacity var(--transition-base), transform var(--transition-base), width var(--transition-base);
}

.sgw-submit:hover:not(:disabled) {
    background: var(--brand-blue-dark);
    transform: translateY(-1px);
}

.sgw-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sgw-changed-count {
    font-size: 0.82rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.5);
}

.sgw-loading,
.sgw-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
}

.sgw-error-ic {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.sgw-error-title {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.9);
}

.sgw-error-body {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.5);
    max-width: 360px;
}

.sgw-error-retry {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--glass-bg);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.85);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sgw-error-retry:hover {
    background: var(--surface-hover, #232a38);
    border-color: var(--brand-blue, #3498db);
    color: #fff;
}

/* ============================================================
   CHIPS (genres / themes / demographics / platforms)
   ============================================================ */

.sgw-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
    min-height: 44px;
}

.sgw-chips::-webkit-scrollbar {
    display: none;
}

.sgw-chips > * {
    flex-shrink: 0;
}

/* Scroll row + fixed add pill as SIBLINGS: the dropdown never distorts
   the row and the pill never scrolls away. */
.sgw-chips-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sgw-chips-row .sgw-chips {
    flex: 1;
    min-width: 0;
}

.sgw-chips-row .sgw-add {
    flex-shrink: 0;
}

.sgw-chips-row .sgw-add-panel {
    left: auto;
    right: 0;
}

.sgw-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #cfe7f7;
    border-radius: var(--radius-lg);
    padding: 6px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), opacity var(--transition-base);
    min-height: 32px;
}

/* Themes carry the purple half of the brand pair. */
.sgw-cat-themes .sgw-chip:not(.sgw-chip-removed):not(.sgw-chip-added) {
    background: rgba(155, 89, 182, 0.12);
    border-color: rgba(155, 89, 182, 0.35);
    color: #dcc6e8;
}

.sgw-chip .sgw-chip-ic {
    font-size: 0.65rem;
    opacity: 0.55;
}

.sgw-chip:hover:not(:disabled) {
    border-color: rgba(231, 76, 60, 0.5);
}

.sgw-chip:disabled {
    cursor: default;
    opacity: 0.6;
}

.sgw-chip-removed {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.4);
    color: #e6a09a;
    text-decoration: line-through;
}

.sgw-chip-added {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.4);
    color: #7dcea0;
}

.sgw-chip-multi {
    min-height: 44px;
}

.sgw-chip-on {
    background: rgba(52, 152, 219, 0.18);
    border-color: var(--brand-blue);
    color: #fff;
}

.sgw-chip-on:hover {
    background: rgba(52, 152, 219, 0.26);
}

/* ============================================================
   VOCABULARY ADD (genres/themes — bounded list, stays a dropdown)
   ============================================================ */

.sgw-add {
    position: relative;
}

.sgw-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--glass-bg);
    border: 1px dashed var(--border);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.65);
    border-radius: var(--radius-lg);
    padding: 6px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color var(--transition-base), color var(--transition-base);
    min-height: 32px;
}

.sgw-add-btn:hover {
    color: #fff;
    border-color: var(--brand-blue);
}

.sgw-add-btn .chevron-icon {
    font-size: 0.6rem;
    transition: transform var(--transition-smooth);
}

.sgw-add.active .sgw-add-btn .chevron-icon {
    transform: rotate(180deg);
}

.sgw-add-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    display: none;
    z-index: 50;
    box-shadow: var(--shadow-xl);
}

.sgw-add.active .sgw-add-panel {
    display: block;
}

.sgw-add-filter {
    width: 100%;
    min-height: 38px;
    margin-bottom: 6px;
}

.sgw-add-list {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sgw-add-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.75);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

.sgw-add-opt:hover {
    background: var(--surface-hover);
    color: #fff;
}

.sgw-add-empty {
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.4);
    font-size: 0.8rem;
    margin: 6px 4px;
}

/* ============================================================
   SELECT DROPDOWN (enum fields, attributes)
   ============================================================ */

.sgw-sel {
    position: relative;
}

/* Inside a field row the select spans the row, like every input. */
.sgw-field > .sgw-sel .sgw-sel-btn {
    width: 100%;
}

.sgw-sel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 220px;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 44px;
    transition: max-width var(--transition-base), min-width var(--transition-base), opacity var(--transition-base), width var(--transition-base);
}

.sgw-sel-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.sgw-sel-btn .chevron-icon {
    font-size: 0.65rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
    transition: transform var(--transition-smooth);
}

.sgw-sel.active .sgw-sel-btn .chevron-icon {
    transform: rotate(180deg);
}

.sgw-sel-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px;
    display: none;
    z-index: 55;
    box-shadow: var(--shadow-xl);
}

.sgw-sel.active .sgw-sel-panel {
    display: block;
}

.sgw-sel-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.75);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 0.88rem;
    cursor: pointer;
}

.sgw-sel-opt:hover {
    background: var(--surface-hover);
    color: #fff;
}

/* ============================================================
   SEGMENTED CONTROL (actions, OP/ED, anime/manga kind)
   ============================================================ */

.sgw-seg {
    display: inline-flex;
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}

.sgw-seg-btn {
    border: none;
    background: transparent;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.6);
    border-radius: var(--radius-sm);
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
    min-height: 36px;
}

.sgw-seg-btn:hover {
    color: #fff;
}

.sgw-seg-btn.active {
    background: rgba(52, 152, 219, 0.2);
    color: #fff;
}

/* ============================================================
   STANDALONE SEARCH — input + in-flow results + selected card
   ============================================================ */

.sgw-search {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.sgw-search-label {
    font-size: 0.78rem;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.5);
}

.sgw-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 14px;
    min-height: 46px;
    transition: border-color var(--transition-base);
}

.sgw-search-box:focus-within {
    border-color: var(--brand-blue);
}

.sgw-search-ic {
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.35);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.sgw-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    min-height: 44px;
}

.sgw-search-input:focus {
    outline: none;
}

.sgw-search-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.sgw-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
    min-height: 52px;
}

.sgw-search-row:hover {
    background: var(--surface-hover);
}

.sgw-search-thumb {
    width: 36px;
    height: 50px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-3);
}

.sgw-search-thumb.round {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
}

.sgw-search-thumb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.25);
    font-size: 0.8rem;
}

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

.sgw-search-name {
    font-size: 0.88rem;
    font-weight: var(--weight-medium);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgw-search-meta {
    font-size: 0.74rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgw-search-act {
    flex-shrink: 0;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.35);
    font-size: 0.8rem;
}

.sgw-search-row:hover .sgw-search-act {
    color: var(--brand-blue);
}

.sgw-search-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
    font-size: 0.84rem;
    padding: 26px 18px;
}

.sgw-search-state-ic {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.05);
    border: 1px solid var(--border-subtle);
}

.sgw-search-state i {
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.35);
    font-size: 1rem;
}

.sgw-search-state span {
    max-width: 340px;
}

.sgw-search-row.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sgw-search-badge {
    flex-shrink: 0;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #9ecbe8;
}

.sgw-search-badge.blocked {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.35);
    color: #e6a09a;
}

.sgw-selected-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(52, 152, 219, 0.08);
    border: 1px solid rgba(52, 152, 219, 0.35);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    min-height: 46px;
}

.sgw-selected-img {
    width: 32px;
    height: 44px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.sgw-selected-img.round {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
}

.sgw-selected-name {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: var(--weight-medium);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgw-selected-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    border: none;
    padding: 0;
    background: transparent;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.5);
    cursor: pointer;
    transition: background 0.25s var(--ease-spring), color 0.25s var(--ease-spring), transform 0.25s var(--ease-spring);
    flex-shrink: 0;
}

.sgw-selected-clear:hover {
    transform: rotate(90deg);
    background: rgba(231, 76, 60, 0.9);
    color: #fff;
}

/* ============================================================
   EXISTING-LINKS STRIPS + credit cards (live pending entries)
   ============================================================ */

.sgw-strip-wrap {
    margin: 2px 0 6px;
}

.sgw-strip {
    display: flex;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.sgw-strip > * {
    flex-shrink: 0;
}

.sgw-cc {
    width: 224px;
    justify-content: flex-start;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sgw-cc-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.sgw-cc-img {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-3);
}

.sgw-cc-img.poster {
    width: 34px;
    height: 46px;
    border-radius: var(--radius-sm);
}

.sgw-cc-img-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.25);
    font-size: 0.8rem;
}

.sgw-cc-text {
    min-width: 0;
}

.sgw-cc-name {
    font-size: 0.84rem;
    font-weight: var(--weight-medium);
    color: var(--text);
    line-height: var(--leading-snug);
}

.sgw-cc-role {
    font-size: 0.72rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
    margin-top: 2px;
}

.sgw-cc-vas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
}

.sgw-cc-va {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.65);
    min-width: 0;
}

.sgw-cc-va img {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    flex-shrink: 0;
}

.sgw-cc-va span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgw-cc-va em {
    font-style: normal;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.35);
    margin-left: auto;
    flex-shrink: 0;
}

.sgw-cc-flag {
    align-self: flex-start;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1abc9c;
    background: rgba(26, 188, 156, 0.1);
    border: 1px solid rgba(26, 188, 156, 0.3);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
}

.sgw-cc-roles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 5px;
}

.sgw-cc-role-line {
    font-size: 0.7rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.55);
    padding-left: 9px;
    position: relative;
}

.sgw-cc-role-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    border-radius: var(--radius-circle);
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.3);
}

/* Related-content cards: larger, poster-led, relation as its own row. */
.sgw-cc.media {
    width: 264px;
    padding: 12px 14px;
}

.sgw-cc.media .sgw-cc-img.poster {
    width: 52px;
    height: 72px;
    border-radius: var(--radius-sm);
}

.sgw-cc.media .sgw-cc-name {
    font-size: 0.88rem;
}

.sgw-cc-rel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 9px;
}

.sgw-cc-rel-badge {
    font-size: 0.7rem;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #9ecbe8;
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
}

.sgw-cc-pending {
    border-style: dashed;
    border-color: rgba(var(--amber-500-rgb), 0.45);
}

.sgw-cc-badge {
    font-size: 0.68rem;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sgw-strip-tail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 88px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
    font-size: 0.72rem;
    padding: 10px;
    text-align: center;
}

.sgw-strip-tail strong {
    font-size: 0.95rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.7);
}

.sgw-strip-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.4);
    font-size: 0.84rem;
    padding: 14px 6px;
}

.sgw-strip-empty i {
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.25);
}

/* ============================================================
   COMPOSERS (link families)
   ============================================================ */

/* The composer keeps the gradient: it is the OUTER surface of the owner's reference pairing
   (2026-09-13) - composer on --surface-grad, its results well on --surface-1 inside. A flat
   composer would erase exactly that separation. */
.sgw-composer {
    background: var(--surface-grad);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sgw-composer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sgw-composer-title {
    font-size: 0.92rem;
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.sgw-composer-kind {
    display: flex;
    justify-content: center;
}

.sgw-composer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.sgw-composer-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.sgw-link-propose {
    min-height: 44px;
    padding: 10px 22px;
}

/* A composer's own reviewer note (link families, theme songs). */
.sgw-composer-note {
    flex: 1 1 200px;
    min-width: 0;
    min-height: 44px;
}

.sgw-linkfam > .sgw-composer-note {
    display: block;
    width: 100%;
    margin-top: 8px;
}

/* Remove pick-list (2026-08-17): in REMOVE mode the catalogue search is
   replaced by this — every already-linked item as a row in a scrollable
   list, with a filter box that narrows THE LIST (a publication can carry
   hundreds of entries; nobody should search a catalogue for something the
   page already knows about). */
.sgw-remove-list[hidden] {
    display: none;
}

.sgw-remove-list-label {
    font-size: 0.78rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.5);
    margin-bottom: 10px;
}

.sgw-remove-filter {
    margin-bottom: 10px;
}

.sgw-remove-listbox {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.sgw-remove-listbox::-webkit-scrollbar {
    display: none;
}

.sgw-remove-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 6px 12px 6px 6px;
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.85);
    font-family: inherit;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.sgw-remove-row:hover {
    background: var(--surface-hover);
    border-color: rgba(231, 76, 60, 0.45);
}

.sgw-remove-row img,
.sgw-remove-row-ph {
    width: 34px;
    height: 46px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.sgw-remove-row-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.3);
    font-size: 0.8rem;
}

.sgw-remove-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgw-remove-row-act {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: rgba(231, 76, 60, 0.8);
    font-size: 0.66rem;
    transition: background var(--transition-base), color var(--transition-base);
}

.sgw-remove-row:hover .sgw-remove-row-act {
    background: rgba(231, 76, 60, 0.9);
    color: #ffffff;
}

.sgw-remove-empty {
    padding: 18px 0;
    text-align: center;
    font-size: 0.84rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
}

@media (max-width: 640px) {
    .sgw-composer-grid.two {
        grid-template-columns: 1fr;
    }

    .sgw-composer-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .sgw-composer-foot .sgw-sel-btn,
    .sgw-link-propose {
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================================
   PLATFORM / THEME rows inside their zones
   ============================================================ */

.sgw-link-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.sgw-link-controls .sgw-sel-btn {
    min-width: 150px;
}

.sgw-link-controls .sgw-input {
    flex: 1;
    min-width: 180px;
    min-height: 44px;
}

.sgw-link-controls .sgw-theme-num {
    flex: 0 0 64px;
    min-width: 64px;
}

.sgw-link-controls .sgw-theme-eps {
    flex: 0 0 130px;
    min-width: 130px;
}

@media (max-width: 540px) {
    .sgw-link-controls > * {
        flex: 1 1 100%;
    }

    /* The (0,2,0) desktop basis above outranks the (0,1,0) rule just above, so
       the episodes box stayed 130px alone on its row at 375px. Number and title
       stay paired (the number keeps its 64px); episodes takes the full row. */
    .sgw-link-controls .sgw-theme-eps {
        flex: 1 1 100%;
        min-width: 0;
    }

    .sgw-link-controls .sgw-sel-btn {
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }
}

/* ============================================================
   SIGNPOSTS
   ============================================================ */

.sgw-signposts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 10px;
}

.sgw-signpost {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    min-width: 0;
}

.sgw-signpost-ic {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.05);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.5);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.sgw-signpost-title {
    font-size: 0.8rem;
    font-weight: var(--weight-semibold);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.8);
}

.sgw-signpost-sub {
    font-size: 0.73rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
    margin-top: 1px;
}

@media (max-width: 540px) {
    .sgw-zone {
        padding: 18px 16px;
    }

    .sgw-footer-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sgw-footer-row .sgw-submit {
        width: 100%;
    }
}

/* ============================================================
   PRE-SUBMIT REVIEW MODAL (portaled to body)
   ============================================================ */

/* One step above the ladder's modal tier: it opens on top of the suggest sheet
   (var(--z-modal)) and must clear the floating action button (--z-float) on the
   anime and manga Contribute tabs. At 3000 it sat under the FAB, and every sheet
   page carried its own override to lift it. */
.sgw-review-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 1);
    background: var(--modal-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* A dialog card is a container, so it takes the surface gradient like every other modal
   panel; glass is for controls inside it. Opaque, so no backdrop blur. */
.sgw-review-card {
    width: min(480px, 100%);
    background: var(--surface-grad);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sgw-review-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sgw-review-ic {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(52, 152, 219, 0.15);
    color: var(--brand-blue);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sgw-review-title {
    font-size: 1.05rem;
    font-weight: var(--weight-semibold);
    margin: 0;
    color: var(--text);
}

.sgw-review-sub {
    font-size: 0.8rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.5);
    margin: 3px 0 0;
}

.sgw-review-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.sgw-review-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 11px 14px;
}

.sgw-review-row-ic {
    color: var(--brand-blue);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.sgw-review-row-title {
    font-size: 0.86rem;
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.sgw-review-row-detail {
    font-size: 0.78rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.55);
    margin-top: 2px;
}

.sgw-review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sgw-review-cancel {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.75);
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    min-height: 44px;
    cursor: pointer;
    transition: border-color var(--transition-base), color var(--transition-base);
}

.sgw-review-cancel:hover {
    color: #fff;
    border-color: rgba(var(--fg-rgb, 255, 255, 255), 0.3);
}

@media (max-width: 540px) {
    .sgw-review-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* ============================================================
   ZONE META (change count + section reset)
   ============================================================ */

.sgw-zone-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgw-zone-count {
    font-size: 0.76rem;
    color: var(--brand-blue);
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: var(--radius-md);
    padding: 3px 10px;
    white-space: nowrap;
}

.sgw-zone-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.6);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 0.76rem;
    cursor: pointer;
    transition: border-color var(--transition-base), color var(--transition-base);
    min-height: 32px;
    white-space: nowrap;
}

.sgw-zone-reset:hover {
    color: #fff;
    border-color: rgba(231, 76, 60, 0.5);
}

.sgw-zone-reset i {
    font-size: 0.7rem;
}

/* ============================================================
   CUSTOM NUMBER STEPPER
   ============================================================ */

.sgw-stepper {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--glass-bg);
}

.sgw-stepper .sgw-input {
    border: none;
    border-radius: 0;
    background: transparent;
    text-align: center;
    flex: 1;
    min-width: 0;
}

.sgw-stepper .sgw-input:focus {
    outline: none;
}

.sgw-stepper:focus-within {
    border-color: var(--brand-blue);
}

.sgw-stepper-btn {
    width: 44px;
    min-height: 44px;
    border: none;
    background: rgba(var(--fg-rgb, 255, 255, 255), 0.04);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.6);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), opacity var(--transition-base);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.sgw-stepper-btn:hover:not(:disabled) {
    background: rgba(52, 152, 219, 0.18);
    color: #fff;
}

.sgw-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   THEME ARTIST catalogue suggestions
   ============================================================ */

.sgw-artist-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.sgw-artist-wrap .sgw-input {
    width: 100%;
}

.sgw-artist-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px;
    z-index: 60;
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sgw-artist-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.8);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

.sgw-artist-opt:hover {
    background: var(--surface-hover);
    color: #fff;
}

.sgw-artist-opt img {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    flex-shrink: 0;
}

/* ============================================================
   SKELETON LOADING + SUCCESS STATE + SHEET FIT
   ============================================================ */

.sgw-skel {
    background: linear-gradient(90deg,
            rgba(var(--fg-rgb, 255, 255, 255), 0.05) 25%,
            rgba(var(--fg-rgb, 255, 255, 255), 0.09) 50%,
            rgba(var(--fg-rgb, 255, 255, 255), 0.05) 75%);
    background-size: 200% 100%;
    animation: sgw-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}

@keyframes sgw-shimmer {
    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgw-skel {
        animation: none;
    }
}

.sgw-skel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.sgw-skel-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex-shrink: 0;
}

.sgw-skel-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sgw-skel-title {
    height: 14px;
    width: 32%;
}

.sgw-skel-sub {
    height: 10px;
    width: 55%;
}

.sgw-skel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sgw-skel-row {
    height: 44px;
}

.sgw-skel-row.short {
    width: 62%;
}

.sgw-success {
    align-items: center;
    text-align: center;
    padding: 46px 20px;
    gap: 14px;
}

.sgw-success-ic {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 204, 113, 0.14);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: var(--success);
    font-size: 1.5rem;
}

.sgw-success-title {
    font-size: 1.15rem;
    font-weight: var(--weight-semibold);
    color: #fff;
    margin: 0;
}

.sgw-success-sub {
    font-size: 0.88rem;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.55);
    margin: 0;
    max-width: 420px;
}

/* .sgw-success-link is a hook; the link dresses as the house .mh-text-link. */

/* Thin-page sheets host the same widget in a narrower shell - zones
   tighten so the design breathes at 720px. */
.sgw-sheet-body .sgw-zone {
    padding: 18px 16px;
}

.sgw-sheet-body .sgw-grid2 {
    grid-template-columns: 1fr;
}

.sgw-artist-invalid {
    border-color: rgba(231, 76, 60, 0.6) !important;
}

.sgw-artist-none {
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.45);
    font-size: 0.8rem;
    margin: 6px 4px;
    text-align: center;
}

/* Lane labels for the two-lane picker (music catalogue / people catalogue). */
.sgw-artist-lane {
    font-size: 0.62rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.4);
    margin: 6px 8px 2px;
}

/* ===== Touch targets =====
   The chips you tap to mark a removal, the Add buttons, the Add / Remove / Change
   segment and the reset controls measured 28-36px at 375px. The chip rows scroll
   horizontally, so taller chips cost no wrapping. */
@media (pointer: coarse) {
    .sgw-chip,
    .sgw-add-btn,
    .sgw-seg-btn,
    .sgw-zone-reset {
        min-height: 44px;
    }

    .sgw-selected-clear {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ===== Suggest sheet (SuggestWidget.bindSheet) =====
   The dialog that hosts the widget on pages without a Contribute tab. Owned here,
   once, instead of a copy per page. */
.sgw-sheet-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-scrim);
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sgw-sheet-overlay[hidden] {
    display: none;
}

.sgw-sheet {
    background: var(--modal-bg-panel);
    border: 1px solid var(--border-subtle, var(--border-hairline));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: min(720px, 100%);
    max-height: 86vh;
    /* Dynamic viewport where supported, so the bottom of the sheet is not under
       the iOS toolbar (the episodes edit modal made the same switch). */
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768.02px) {
    .sgw-sheet-overlay {
        align-items: center;
        padding: 20px 15px;
    }

    .sgw-sheet {
        border-radius: var(--radius-lg);
    }
}

.sgw-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle, var(--border-hairline));
}

.sgw-sheet-title {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--weight-semibold);
}

.sgw-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    border: none;
    padding: 0;
    background: transparent;
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.6);
    cursor: pointer;
    transition: background 0.25s var(--ease-spring), color 0.25s var(--ease-spring), transform 0.25s var(--ease-spring);
}

.sgw-sheet-close:hover,
.sgw-sheet-close:focus-visible {
    transform: rotate(90deg);
    background: rgba(var(--danger-rgb), 0.9);
    color: #fff;
}

@media (pointer: coarse) {
    .sgw-sheet-close {
        min-width: 44px;
        min-height: 44px;
    }
}

.sgw-sheet-body {
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
}