/* =============================================
   AniVerse — Title Details page and its module interiors
   (hero, progress, status, rating, favourite, media site, notes/review,
   tags, sessions, ranking, related series, sequel prompt).
   ============================================= */

.title-details-page {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-4);
}

.title-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--av-space-2) var(--av-space-4);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px 0 4px;
    border-radius: var(--av-radius-control);
    color: var(--av-text-2);
    font-size: var(--av-fs-small);
    text-decoration: none;
}

.back-link:hover {
    color: var(--av-text-1);
    background: var(--av-surface-2);
}

.title-details-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--av-space-2);
}

.title-details-confirm {
    color: var(--av-danger);
    font-size: var(--av-fs-small);
}

.title-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--av-space-3);
    padding: var(--av-space-8) var(--av-space-5);
    color: var(--av-text-3);
    font-size: var(--av-fs-small);
}

.title-details-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--av-space-2);
    padding-top: var(--av-space-4);
}

/* --- Hero (Cover & Info module) --- */
.av-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--av-space-2);
}

.av-hero-cover {
    position: relative;
    width: min(240px, 60%);
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--av-radius-cover);
    background: var(--av-surface-2);
}

.av-hero-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.av-hero-nocover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--av-surface-1);
}

.av-favorite-corner--lg {
    width: 34px;
    height: 34px;
}

.av-favorite-corner--lg::after {
    width: 31px;
    height: 31px;
}

.av-hero-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--av-space-4);
    padding: var(--av-space-5);
    background: var(--av-surface-1);
    border: 1px solid var(--av-line-strong);
    border-radius: var(--av-radius-panel);
}

.av-hero-names {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.av-hero-title {
    font-family: var(--av-font-serif);
    font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.av-hero-alt {
    color: var(--av-text-2);
    font-size: 14px;
}

.av-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--av-space-5);
    font-size: 12px;
    color: var(--av-text-2);
}

.av-hero-meta strong {
    color: var(--av-text-1);
    font-weight: 400;
}

.av-hero-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--av-text-1);
}

.av-hero-fav-icon {
    color: var(--av-seal);
    fill: var(--av-seal);
}

.av-hero-synopsis {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 72ch;
}

.av-hero-synopsis p {
    color: var(--av-text-2);
    font-size: var(--av-fs-body);
    line-height: 1.65;
}

@media (min-width: 768px) {
    .av-hero {
        grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    }

    .av-hero-cover {
        width: 100%;
        align-self: start;
    }

    .av-hero-info {
        padding: var(--av-space-6) 36px;
    }
}

/* --- Module interior (shared by every Title Details module) --- */
.title-panel,
.series-panel {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-4);
    padding: var(--av-space-4);
}

.title-panel > h4,
.series-panel > h4 {
    margin: calc(-1 * var(--av-space-4)) calc(-1 * var(--av-space-4)) 0;
    padding: 12px var(--av-space-4);
    border-bottom: 1px solid var(--av-line);
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-label);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-text-2);
}

/* SeriesWidget wraps SeriesPanel in a .title-panel: flatten the double frame */
.title-panel:has(> .series-panel),
.title-panel:has(> .series-modal-overlay:only-child) {
    padding: 0;
    gap: 0;
}

.title-panel label,
.progress-field > label,
.reading-site-field > label,
.reread-section > label {
    font-family: var(--av-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-text-3);
}

/* --- Progress --- */
.progress-editor {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-4);
}

.progress-field {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-2);
}

.progress-input-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.progress-input-group input[type="number"] {
    width: 76px;
    min-height: 40px;
    text-align: center;
    font-family: var(--av-font-mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.btn-decrement,
.btn-increment {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--av-line-strong);
    border-radius: var(--av-radius-control);
    color: var(--av-text-1);
    cursor: pointer;
}

.btn-decrement:hover,
.btn-increment:hover {
    background: var(--av-surface-2);
    border-color: var(--av-line-hover);
}

.progress-total {
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-small);
    color: var(--av-text-3);
}

.av-progress-rail {
    margin-top: 4px;
}

.progress-bar-large {
    height: 4px;
    overflow: hidden;
    background: var(--av-track);
}

.progress-actions,
.rating-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--av-space-2);
}

.btn-complete {
    border-color: rgba(140, 179, 138, 0.45);
}

.btn-complete:hover {
    background: rgba(140, 179, 138, 0.12);
    border-color: var(--av-success);
    color: var(--av-text-1);
}

.reread-section {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-2);
    padding-top: var(--av-space-3);
    border-top: 1px solid var(--av-line);
}

.reread-count {
    min-width: 40px;
    text-align: center;
    font-family: var(--av-font-mono);
    font-size: 15px;
}

/* --- Status --- */
.status-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.status-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius-control);
    color: var(--av-text-2);
    font-size: var(--av-fs-small);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--av-dur-fast) var(--av-ease-out), border-color var(--av-dur-fast) var(--av-ease-out);
}

.status-btn:hover {
    background: var(--av-surface-2);
    color: var(--av-text-1);
}

.status-btn.active {
    background: var(--av-surface-2);
    border-color: var(--av-text-1);
    color: var(--av-text-1);
    font-weight: 500;
}

/* --- Rating --- */
.rating-editor {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-4);
}

.rating-global {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.rating-global-value {
    font-family: var(--av-font-serif);
    font-size: 64px;
    line-height: 0.9;
}

.rating-global-max {
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-small);
    color: var(--av-text-3);
}

.rating-criteria {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-3);
}

.rating-criterion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.criterion-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--av-space-3);
}

.criterion-label {
    font-size: var(--av-fs-small);
    font-weight: 500;
}

.criterion-value {
    font-family: var(--av-font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.criterion-desc {
    font-size: 11px;
    color: var(--av-text-3);
}

.criterion-slider {
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.criterion-slider::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--av-track);
}

.criterion-slider::-moz-range-track {
    height: 2px;
    background: var(--av-track);
}

.criterion-slider::-moz-range-progress {
    height: 2px;
    background: var(--av-text-1);
}

.criterion-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--av-text-1);
    box-shadow: 0 0 0 3px var(--av-surface-1);
}

.criterion-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--av-text-1);
    box-shadow: 0 0 0 3px var(--av-surface-1);
}

.criterion-slider:focus-visible {
    outline: var(--av-focus-ring);
    outline-offset: 4px;
}

.favorite-toggle {
    padding-top: var(--av-space-3);
    border-top: 1px solid var(--av-line);
}

.favorite-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--av-space-2);
    min-height: 36px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--av-line-strong);
    border-radius: var(--av-radius-pill);
    color: var(--av-text-1);
    font-size: var(--av-fs-small);
    cursor: pointer;
    transition: border-color var(--av-dur-fast) var(--av-ease-out), background-color var(--av-dur-fast) var(--av-ease-out);
}

.favorite-btn:hover {
    background: var(--av-surface-2);
}

.favorite-btn-icon {
    color: var(--av-text-2);
}

.favorite-btn.active {
    border-color: var(--av-seal);
}

.favorite-btn.active .favorite-btn-icon {
    color: var(--av-seal);
    fill: var(--av-seal);
}

/* --- Media site --- */
.reading-site-editor {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-3);
}

.reading-site-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reading-site-field input,
.reading-site-field select {
    width: 100%;
}

.reading-site-link {
    align-self: flex-start;
}

.reading-site-editor > .cyber-button-small:last-child {
    align-self: flex-start;
}

/* --- Notes & review --- */
.notes-section {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-2);
}

.notes-section textarea {
    width: 100%;
    min-height: 110px;
}

.notes-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-space-3);
}

.char-counter {
    font-family: var(--av-font-mono);
    font-size: 11px;
    color: var(--av-text-3);
}

.char-counter.warning {
    color: var(--av-warning);
}

/* --- Tags --- */
.tags-editor {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-3);
}

.tags-list,
.tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 28px;
    padding: 0 2px 0 10px;
    border: 1px solid rgba(237, 235, 230, 0.16);
    border-radius: var(--av-radius-pill);
    color: var(--av-text-1);
    font-size: 12px;
}

.tag-remove {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: currentColor;
    opacity: 0.7;
    cursor: pointer;
}

.tag-remove:hover {
    opacity: 1;
    background: rgba(237, 235, 230, 0.1);
}

.tag-add-form {
    display: flex;
    gap: var(--av-space-2);
}

.tag-add-form input {
    flex: 1 1 auto;
    min-width: 0;
}

.tag-suggestion {
    min-height: 28px;
    padding: 0 10px;
    background: transparent;
    border: 1px dashed rgba(237, 235, 230, 0.22);
    border-radius: var(--av-radius-pill);
    color: var(--av-text-2);
    font-size: 12px;
    cursor: pointer;
}

.tag-suggestion:hover {
    border-color: var(--av-text-2);
    color: var(--av-text-1);
}

/* --- Sessions --- */
.session-log-section {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-3);
}

.session-log-form {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--av-space-2);
}

.session-log-form .progress-field input {
    width: 100%;
}

.session-log-form > .cyber-button-small {
    grid-column: 1 / -1;
    justify-self: start;
}

.session-log-list {
    display: flex;
    flex-direction: column;
}

.session-log-item {
    display: flex;
    align-items: center;
    gap: var(--av-space-3);
    min-height: 44px;
    border-top: 1px solid var(--av-line);
    font-family: var(--av-font-mono);
    font-size: 12px;
    color: var(--av-text-1);
}

.session-date {
    width: 88px;
    color: var(--av-text-2);
}

.session-delete-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--av-radius-control);
    color: var(--av-text-3);
    cursor: pointer;
}

.session-delete-btn:hover {
    background: var(--av-danger-fill);
    color: var(--av-danger);
}

/* --- Ranking --- */
.ranking-section {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-2);
    color: var(--av-text-2);
    font-size: var(--av-fs-small);
}

.ranking-section input[type="number"] {
    font-family: var(--av-font-mono);
}

.ranking-section .ranking-label {
    margin: 0;
}

.ranking-input {
    width: 88px;
    text-align: center;
}

.ranking-note {
    color: var(--av-text-1);
}

.tags-empty {
    font-size: var(--av-fs-small);
    color: var(--av-text-3);
}

/* --- Related series: relationship thread --- */
.av-thread {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.av-thread-node {
    --dot: 7px;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--av-space-3);
    min-height: 44px;
    padding: 6px 0 6px 22px;
}

/* the spine */
.av-thread-node::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(237, 235, 230, 0.22);
}

.av-thread-node:first-child::before {
    top: 50%;
}

.av-thread-node:last-child::before,
.av-thread-node:has(+ .is-branch)::before {
    bottom: 50%;
}

.av-thread-node.is-branch {
    padding-left: 44px;
}

/* branches hang off the spine on an elbow */
.av-thread-node.is-branch::before {
    left: 5px;
    top: 0;
    bottom: 50%;
    width: 22px;
    background: none;
    border-left: 1px solid rgba(237, 235, 230, 0.22);
    border-bottom: 1px solid rgba(237, 235, 230, 0.22);
    border-bottom-left-radius: 6px;
}

.av-thread-dot {
    position: absolute;
    left: calc(6px - var(--dot) / 2);
    top: calc(50% - var(--dot) / 2);
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: var(--av-text-2);
}

.av-thread-node.is-branch .av-thread-dot {
    left: calc(28px - var(--dot) / 2);
}

.av-thread-node.is-missing .av-thread-dot {
    background: var(--av-surface-1);
    box-shadow: inset 0 0 0 1px var(--av-text-3);
}

.av-thread-node.is-current {
    --dot: 11px;
}

.av-thread-node.is-current .av-thread-dot {
    background: var(--av-bg);
    box-shadow: inset 0 0 0 2px var(--av-text-1);
}

.av-thread-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.av-thread-rel {
    font-family: var(--av-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--av-text-3);
}

.av-thread-node.is-current .av-thread-rel {
    color: var(--av-text-1);
}

.av-thread-name {
    font-size: var(--av-fs-small);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.av-thread-node.is-current .av-thread-name {
    font-family: var(--av-font-serif);
    font-size: 20px;
    font-weight: 400;
}

.av-thread-state {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--av-status-completed);
}

.av-thread-state--missing {
    color: var(--av-text-3);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.series-panel {
    padding: var(--av-space-4);
}

.series-loading {
    display: flex;
    align-items: center;
    gap: var(--av-space-2);
    color: var(--av-text-3);
    font-size: var(--av-fs-small);
}

.series-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: var(--av-space-3);
    border-top: 1px solid var(--av-line);
}

.series-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--av-space-3);
    font-size: 11px;
    color: var(--av-text-2);
}

.series-summary-progress {
    font-size: 11px;
    color: var(--av-text-2);
}

.series-missing {
    margin-left: 0.5ch;
    color: var(--av-text-1);
}

.series-modal-btn {
    align-self: flex-start;
}

/* --- Related titles dialog --- */
.series-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--av-space-4);
    background: var(--av-overlay);
    animation: av-fade-in var(--av-dur-base) var(--av-ease-out);
}

.series-modal {
    width: min(760px, 100%);
    max-height: min(86vh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--av-surface-1);
    border: 1px solid var(--av-line-strong);
    border-radius: var(--av-radius-widget);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.series-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--av-space-3);
    padding: var(--av-space-5) var(--av-space-4) var(--av-space-3) 28px;
}

.series-modal-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.series-modal-heading h2 {
    font-family: var(--av-font-serif);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.05;
}

.series-modal-counts {
    font-size: 12px;
    color: var(--av-text-2);
}

.series-modal-tabs {
    display: flex;
    gap: var(--av-space-5);
    padding: 0 28px;
    overflow-x: auto;
    border-bottom: 1px solid var(--av-line);
    scrollbar-width: none;
}

.series-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 2px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--av-text-2);
    font-size: var(--av-fs-small);
    cursor: pointer;
}

.series-tab:hover {
    color: var(--av-text-1);
}

.series-tab.active {
    border-bottom-color: var(--av-text-1);
    color: var(--av-text-1);
    font-weight: 500;
}

.series-tab .av-mono {
    font-size: 11px;
    color: var(--av-text-3);
}

.series-modal-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--av-space-2) 28px var(--av-space-4);
}

.series-modal-group + .series-modal-group {
    margin-top: var(--av-space-4);
}

.series-modal-group-title {
    padding: var(--av-space-3) 0 var(--av-space-1);
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-label);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-text-3);
}

.series-modal-item {
    --dot: 7px;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--av-space-3);
    min-height: 60px;
    padding: 8px 0 8px 22px;
    border-top: 1px solid var(--av-line);
}

.series-modal-item .av-thread-dot {
    left: 2px;
}

.series-modal-item:not(.in-library) .av-thread-dot {
    background: var(--av-surface-1);
    box-shadow: inset 0 0 0 1px var(--av-text-3);
}

.series-modal-item-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.series-modal-item-type {
    font-family: var(--av-font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--av-text-3);
}

.series-modal-item-name {
    font-size: 14px;
    font-weight: 500;
}

.series-modal-item-meta {
    font-size: 11px;
    color: var(--av-text-3);
}

.series-item-check {
    display: inline-flex;
    color: var(--av-status-completed);
}

.series-modal-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--av-space-2);
    padding: var(--av-space-4) 28px;
    border-top: 1px solid var(--av-line);
}

/* --- Sequel prompt (shown on completion) --- */
.sequel-prompt {
    position: fixed;
    right: var(--av-space-5);
    bottom: calc(var(--av-space-5) + var(--av-tabbar-h) + var(--av-safe-bottom));
    z-index: 1150;
    width: min(380px, calc(100vw - 2 * var(--av-space-4)));
    animation: av-sheet-in var(--av-dur-slow) var(--av-ease-out);
}

.sequel-prompt-content {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-3);
    padding: 22px;
    background: var(--av-surface-1);
    border: 1px solid var(--av-line-strong);
    border-radius: var(--av-radius-widget);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.sequel-prompt-content h3 {
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-label);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-text-3);
}

.sequel-prompt-info {
    color: var(--av-text-2);
    font-size: var(--av-fs-small);
}

.sequel-prompt-title strong {
    font-family: var(--av-font-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
}

.sequel-prompt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--av-space-2);
}

@media (min-width: 1024px) {
    .sequel-prompt {
        bottom: var(--av-space-5);
    }
}

@media (max-width: 767px) {
    .series-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .series-modal {
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
    }

    .series-modal-header,
    .series-modal-footer {
        padding-left: var(--av-space-4);
        padding-right: var(--av-space-4);
    }

    .series-modal-tabs,
    .series-modal-content {
        padding-left: var(--av-space-4);
        padding-right: var(--av-space-4);
    }

    .session-log-form {
        grid-template-columns: minmax(0, 1fr);
    }
}