/* ==========================================================================
   Recovery Plan (rp-)
   Four columns: the day, the session, what Weekly Planning said, and what
   the room does about it.

   Geometry only. Buttons come from action.css, chips and the toolbar from
   styles.css, and every colour is a token.
   ========================================================================== */

.rp-page {
    padding: 0;
}

/* Toolbar geometry is the shared rule in styles.css. */
.rp-toolbar-right {
    margin-left: auto;
}

.rp-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.rp-meta {
    color: var(--text-tertiary);
    font-size: 0.78rem;
}

.rp-status {
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rp-status[data-status="draft"],
.rp-status[data-status="stale"] {
    color: var(--accent);
}

/* ── The table and, beside it, one side sheet at a time ── */

.rp-work {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin: 0 24px 28px;
}

.rp-work.is-sheet {
    grid-template-columns: minmax(0, 1fr) 420px;
}

.rp-table {
    min-width: 0;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.rp-row {
    display: grid;
    grid-template-columns: 170px 190px 240px minmax(360px, 1fr);
    align-items: start;
    border-bottom: 1px solid var(--ink-line);
}

.rp-row:last-child {
    border-bottom: 0;
}

.rp-head {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--ink-line-strong);
}

.rp-head .rp-cell {
    padding: 10px 16px;
    color: var(--text-tertiary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rp-cell {
    padding: 13px 16px;
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.8125rem;
}

/* A day nobody is in the room for recedes. */
.rp-row[data-quiet="true"] .rp-cell {
    color: var(--text-tertiary);
}

.rp-date {
    font-weight: 600;
}

.rp-code {
    margin-top: 4px;
    color: var(--accent);
    font-size: 0.78rem;
}

.rp-sub {
    margin-top: 4px;
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

.rp-quiet {
    color: var(--text-tertiary);
    font-size: 0.78rem;
}

.rp-note-row {
    padding: 24px;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

/* ── Cohort groups ── */

.rp-group + .rp-group {
    margin-top: 12px;
}

.rp-group-label {
    margin-bottom: 6px;
    color: var(--text-tertiary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rp-tags,
.rp-mods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ── A placed modality ── */

/* 30px so the 26px remove button sits inside the pill with 2px of air
   rather than filling it edge to edge. */
.rp-mod {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 2px 0 11px;
    background: var(--ink-wash);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
}

.rp-mod-dose,
.rp-mod-flag {
    color: var(--text-tertiary);
    font-weight: 400;
}

.rp-mod-flag {
    color: var(--accent);
}

.rp-mod[data-source="added"] {
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* Taken off, but still on the row so the day reads as a decision. */
.rp-mod[data-source="removed"] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--ink-line);
    color: var(--text-tertiary);
}

.rp-mod[data-source="removed"] .rp-mod-name {
    text-decoration: line-through;
}

.rp-withheld {
    margin-top: 8px;
    color: var(--accent);
    font-size: 0.75rem;
}

/* ── Split / together, above the groups ── */

.rp-mode {
    margin-bottom: 10px;
}

/* ── The line the players read, one per group ── */

.rp-line-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin-top: 8px;
}

.rp-line {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
}

/* ── Side sheets: the Catalogue and the Screen text ── */

.rp-sheet {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface-raised);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
}

.rp-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ink-line);
}

.rp-sheet-kicker {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.rp-sheet-head strong {
    display: block;
    margin-top: 2px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.rp-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    max-height: calc(100vh - 62px - 130px);
    overflow-y: auto;
}

.rp-sheet-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rp-sheet-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.rp-sheet-field > span {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.rp-sheet-field .hub-input,
.rp-sheet-field .hub-select-sm {
    width: 100%;
    box-sizing: border-box;
}

textarea.rp-sheet-text {
    min-height: 56px;
    resize: vertical;
    font-weight: 500;
    line-height: 1.4;
}

.rp-sheet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rp-sheet-note {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

.rp-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--ink-line);
}

/* The sheet lists the wall's Italian, then the staff page's English. */
.rp-copy-group {
    padding-top: 4px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.rp-copy-group + .rp-sheet-note {
    margin-top: -6px;
}

.rp-copy-row + .rp-copy-group {
    margin-top: 6px;
}

/* One phrase per row: where it appears, then the line and its Default. */
.rp-copy-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink-line);
}

.rp-copy-row:last-child,
.rp-copy-row:has(+ .rp-copy-group) {
    border-bottom: 0;
    padding-bottom: 0;
}

.rp-copy-where {
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.rp-copy-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rp-copy-line .hub-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Add-modality list ── */

.rp-pick {
    position: absolute;
    z-index: 60;
    min-width: 230px;
    padding: 6px;
    background: var(--surface-chrome);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px var(--scrim);
}

.rp-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
}

.rp-pick-item:hover {
    background: var(--ink-wash);
}

.rp-pick-dose {
    margin-left: auto;
    color: var(--text-tertiary);
}

.rp-pick-empty {
    padding: 9px 10px;
    color: var(--text-tertiary);
    font-size: 0.78rem;
}

/* ── Screens ── */
/* The key is stored hashed, so a URL can only be shown at the moment it is
   made. The list is therefore identity and last-seen, not addresses. */

.rp-screens {
    margin: 0 24px 28px;
    padding-top: 16px;
    border-top: 1px solid var(--ink-line);
}

.rp-screens-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.rp-screens-title {
    color: var(--text-tertiary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rp-screen {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ink-line);
}

.rp-screen-name {
    color: var(--text-primary);
    font-size: 0.8125rem;
}

.rp-screen-seen {
    margin-right: auto;
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

.rp-minted {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--ink-wash);
    border-radius: var(--radius-md);
}

.rp-minted-label {
    color: var(--accent);
    font-size: 0.75rem;
}

.rp-minted-url {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 9px;
}

.rp-minted-url code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    user-select: all;
}