/* Voice studio. Built for a reviewer who reads Arabic closely on a laptop: large text, few big buttons, one line at a
   time. Colours come from the MudBlazor palette so light and dark themes both work; sides are logical for RTL. */

.studio-ar {
    direction: rtl;
    text-align: start;
    font-family: 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', serif;
    font-feature-settings: "kern", "mark", "mkmk";
}

.studio-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

/* one column: the line being reviewed comes first, the list after it */
.studio-shell > nav { order: 2; }
.studio-shell > section { order: 1; }

@media (min-width: 900px) {
    .studio-shell { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
    .studio-shell > nav { order: 1; }
    .studio-shell > section { order: 2; }
}

/* the line list: an overview to jump around, never the workspace */
.studio-list {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.studio-list-row {
    display: grid;
    grid-template-columns: 14px 44px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-block-end: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
    font: inherit;
}

.studio-list-row:hover { background: var(--mud-palette-action-default-hover); }
.studio-list-row:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.studio-list-row.is-current { background: var(--mud-palette-primary-hover); }

.studio-list-row .n {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
}

.studio-list-row .t {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.02rem;
}

.studio-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-text-disabled);
}

.studio-dot.approved { background: var(--mud-palette-success); border-color: var(--mud-palette-success); }
.studio-dot.fix { background: var(--mud-palette-warning); border-color: var(--mud-palette-warning); }

/* the workspace: the current line */
.studio-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.studio-card.is-fix { border-color: var(--mud-palette-warning); box-shadow: inset 4px 0 0 var(--mud-palette-warning); }
.studio-card.is-approved { border-color: var(--mud-palette-success); }

.studio-context {
    color: var(--mud-palette-text-secondary);
    font-size: 1.15rem;
    line-height: 1.9;
    opacity: .85;
}

.studio-context .speaker-tag {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    padding: 1px 8px;
    margin-inline-end: 6px;
    border-radius: 10px;
    background: var(--mud-palette-action-default-hover);
}

.studio-line {
    font-size: 2rem;
    line-height: 2.3;
    color: var(--mud-palette-text-primary);
}

.studio-who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--mud-palette-text-secondary);
}

.studio-who .speaker {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.studio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.studio-card .mud-button-root,
.studio-episode-card .mud-button-root,
.studio-choice .mud-button-root {
    text-transform: none;
}

.studio-actions .mud-button-root {
    min-height: 52px;
    font-size: 1.05rem;
    padding-inline: 20px;
    text-transform: none;
}

/* correcting: a plain box, big, with big mark buttons */
.studio-editor {
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 10px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-size: 2rem;
    line-height: 2.2;
    resize: vertical;
}

.studio-editor:focus { outline: 3px solid var(--mud-palette-primary-lighten); outline-offset: 1px; }

.studio-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.studio-mark {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    min-width: 66px;
    padding: 6px 8px 8px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font: inherit;
}

.studio-mark:hover { background: var(--mud-palette-action-default-hover); }
.studio-mark:focus-visible { outline: 2px solid var(--mud-palette-primary); }

.studio-mark .glyph {
    font-family: 'IBM Plex Sans Arabic', serif;
    font-size: 2rem;
    line-height: 1.3;
}

.studio-mark .name {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.studio-takes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.studio-take {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

.studio-take.is-chosen { border-color: var(--mud-palette-success); background: var(--mud-palette-success-hover, transparent); }

.studio-take .label { font-weight: 600; min-width: 90px; }
.studio-take .words { flex: 1 1 260px; font-size: 1.25rem; line-height: 2; }

.studio-choice {
    border: 2px solid var(--mud-palette-primary);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--mud-palette-primary-hover);
}

.studio-hint {
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
}

.studio-hint kbd {
    font-family: inherit;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-block-end-width: 2px;
    border-radius: 4px;
    padding: 0 6px;
    margin-inline: 2px;
}

.studio-episode-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.studio-episode-card .mud-progress-linear { height: 8px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    .studio-list { scroll-behavior: auto; }
}