/* ═══════════════════════════════════════════════════════════════════════
   TOUCHPOINT COMPOSER — styles for the full page and the renewal drawer.

   Hand-written CSS, like ui-kit.css, so it is immune to Tailwind's
   class-detection/purge step by construction: the composer builds class
   names in JS and Tailwind would never see them as literals in source.

   Everything is built on the --color-* custom properties from style.css,
   so light/dark theming is automatic and the composer matches the rest of
   the product without restating a palette.
   ═══════════════════════════════════════════════════════════════════════ */

.tp-composer {
    --tp-tint: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --tp-tint-line: color-mix(in srgb, var(--color-primary) 30%, transparent);
    --tp-pop: 0 8px 24px -6px rgb(15 23 42 / 0.16), 0 2px 6px -2px rgb(15 23 42 / 0.08);
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    color: var(--color-foreground);
}

.dark .tp-composer {
    --tp-tint: color-mix(in srgb, var(--color-primary) 16%, transparent);
    --tp-tint-line: color-mix(in srgb, var(--color-primary) 34%, transparent);
    --tp-pop: 0 8px 24px -6px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4);
}

/* The page mount fills #content-area, which is already a `flex-1 overflow-auto`
   box with px-6 py-2 padding — so 100% resolves against a definite height and
   lands exactly inside the padding without producing a second scrollbar. The
   form itself never scrolls; the two columns absorb the slack independently.
   min-height is the floor for a very short window, where letting content-area
   scroll is better than collapsing the composer. */
.tp-composer--page {
    height: 100%;
    min-height: 560px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.tp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 56px;
    padding: 0 24px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.tp-header__left,
.tp-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tp-header__right { flex-shrink: 0; }

.tp-header__title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
    color: var(--color-foreground);
}

.tp-header__rule {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    flex-shrink: 0;
}

.tp-account { width: 330px; flex-shrink: 1; min-width: 160px; }

.tp-draftnote { font-size: 11.5px; color: var(--color-secondary); }

.tp-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--tp-tint);
    color: var(--color-primary);
    border: 1px solid var(--tp-tint-line);
}

.tp-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: none;
    background: none;
    color: var(--color-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.tp-iconbtn:hover { background: var(--color-muted); color: var(--color-foreground); }
.tp-iconbtn i { width: 16px; height: 16px; }

.tp-btn {
    height: 32px;
    padding: 0 15px;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tp-btn--ghost { background: none; color: var(--color-secondary); font-weight: 500; }
.tp-btn--ghost:hover { color: var(--color-foreground); }

.tp-btn--primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.tp-btn--primary:hover { background: color-mix(in srgb, var(--color-primary) 88%, black); }

.tp-btn.is-disabled,
.tp-btn:disabled {
    background: var(--color-muted);
    color: var(--color-secondary);
    cursor: not-allowed;
}

/* ── Body: 60 / 40 ──────────────────────────────────────────────────── */

.tp-mount { flex-grow: 1; min-height: 0; display: flex; }

.tp-body {
    display: grid;
    grid-template-columns: 60fr 40fr;
    flex-grow: 1;
    min-height: 0;
    width: 100%;
}

.tp-facts {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 22px 26px;
    min-width: 0;
    overflow-y: auto;
}

.tp-writeup {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 22px 26px;
    border-left: 1px solid var(--color-border);
    min-width: 0;
    min-height: 0;
}

/* Below ~1100px the two columns stop fitting side by side. */
@media (max-width: 1100px) {
    .tp-body { grid-template-columns: 1fr; overflow-y: auto; }
    .tp-writeup { border-left: none; border-top: 1px solid var(--color-border); }
    .tp-composer--page { height: auto; }
}

/* ── Rows ───────────────────────────────────────────────────────────── */

.tp-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.tp-row--top { align-items: start; }
.tp-row--top .tp-row__label { padding-top: 5px; }

.tp-row__label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-secondary);
}

.tp-row__control { min-width: 0; }

/* Shown under a field when the answer changes how something is scored --
   currently only the reschedule date on a missed meeting. Quiet by design:
   it explains a consequence, it is not a validation error. */
.tp-row__hint {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-secondary);
}

/* Two questions on one line — page mount only, where there is width for it. */
.tp-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .tp-pair { grid-template-columns: 1fr; gap: 17px; }
}

.tp-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-status__outcome { width: 180px; }

.tp-when { display: flex; gap: 8px; max-width: 340px; }
.tp-when__date { flex-grow: 1; min-width: 0; }
.tp-when__time { width: 96px; flex-shrink: 0; }

.tp-format { display: flex; flex-direction: column; gap: 7px; }

/* ── Inputs ─────────────────────────────────────────────────────────── */

.tp-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 10px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.tp-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--tp-tint);
}

.dark .tp-input[type="date"]::-webkit-calendar-picker-indicator,
.dark .tp-input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.8;
    cursor: pointer;
}

/* ── Segmented ──────────────────────────────────────────────────────── */

.tp-seg {
    display: inline-flex;
    background: var(--color-muted);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.tp-seg__btn {
    height: 30px;
    padding: 0 13px;
    border: none;
    background: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.tp-seg__btn.is-on {
    background: var(--color-card);
    color: var(--color-foreground);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* ── Dropdown ───────────────────────────────────────────────────────── */

.tp-dd { position: relative; }

.tp-dd__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 0 9px 0 10px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-foreground);
    text-align: left;
    cursor: pointer;
}

.tp-dd__btn:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }

.tp-dd.is-open .tp-dd__btn {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--tp-tint);
}

.tp-dd__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-dd__label.is-placeholder { color: var(--color-secondary); }

.tp-dd__caret { width: 14px; height: 14px; color: var(--color-secondary); flex-shrink: 0; }

.tp-dd__panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    box-shadow: var(--tp-pop);
    padding: 5px;
    max-height: 280px;
    overflow-y: auto;
}

.tp-dd__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    padding: 0 9px;
    border: none;
    background: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--color-foreground);
    text-align: left;
    cursor: pointer;
}

.tp-dd__opt:hover { background: var(--color-muted); }
.tp-dd__opt.is-on { background: var(--tp-tint); color: var(--color-primary); font-weight: 600; }

.tp-dd__opt-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Marks a nature in STRATEGIC_TOUCH_NATURES — one that closes a coverage gap. */
.tp-dd__star {
    width: 11px;
    height: 11px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-warning);
    fill: var(--color-warning);
}

/* ── Attendee tokens ────────────────────────────────────────────────── */

.tp-tokens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    box-sizing: border-box;
    padding: 4px 7px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.tp-tokens:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--tp-tint);
}

.tp-token {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 3px 0 8px;
    border-radius: 999px;
    background: var(--color-muted);
    font-size: 12px;
    color: var(--color-foreground);
}

.tp-token__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    border-radius: 999px;
    color: var(--color-secondary);
    cursor: pointer;
}

.tp-token__x:hover { color: var(--color-foreground); }
.tp-token__x i { width: 10px; height: 10px; }

.tp-tokens__input {
    flex-grow: 1;
    min-width: 70px;
    height: 24px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: 12.5px;
}

/* ── Rating slider ──────────────────────────────────────────────────── */
/* The thumb is hidden and the track flat until a value has actually been
   set. A slider that always shows a thumb makes "not rated" look identical
   to a deliberate "neutral 3.0" — and 3.0 is the one value that suppresses
   both scoring thresholds, so a default there is worse than no answer. */

.tp-rating { max-width: 420px; --tp-fill: 50%; --tp-tone: var(--color-secondary); }
.tp-rating[data-band="positive"] { --tp-tone: var(--color-success); }
.tp-rating[data-band="neutral"]  { --tp-tone: var(--color-warning); }
.tp-rating[data-band="negative"] { --tp-tone: var(--color-error); }

.tp-rating__bar { display: flex; align-items: center; gap: 14px; }

.tp-rating__input {
    -webkit-appearance: none;
    appearance: none;
    flex-grow: 1;
    min-width: 0;
    height: 5px;
    border-radius: 999px;
    outline: none;
    margin: 0;
    cursor: pointer;
    background: linear-gradient(
        to right,
        var(--tp-tone) 0%,
        var(--tp-tone) var(--tp-fill),
        var(--color-border) var(--tp-fill),
        var(--color-border) 100%
    );
}

.tp-rating__input.is-blank { background: var(--color-border); }

.tp-rating__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: var(--tp-tone);
    border: 2.5px solid var(--color-card);
    box-shadow: 0 1px 4px rgb(15 23 42 / 0.35);
    cursor: grab;
}

.tp-rating__input::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: var(--tp-tone);
    border: 2.5px solid var(--color-card);
    box-shadow: 0 1px 4px rgb(15 23 42 / 0.35);
    cursor: grab;
}

.tp-rating__input.is-blank::-webkit-slider-thumb { opacity: 0; }
.tp-rating__input.is-blank::-moz-range-thumb { opacity: 0; }

.tp-rating__input:focus-visible { box-shadow: 0 0 0 3px var(--tp-tint); }

.tp-rating__read {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    width: 62px;
    text-align: right;
    color: var(--tp-tone);
}

.tp-rating__read[data-band="none"] { color: var(--color-secondary); }

.tp-rating__scale {
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: var(--color-secondary);
    margin-top: 5px;
}

.tp-rating__word { font-family: inherit; font-size: 11px; }

/* ── Write-up sections ──────────────────────────────────────────────── */

.tp-section { display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; }
.tp-section--grow { flex-grow: 1; }

.tp-section__label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin-bottom: 9px;
}

.tp-section__count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-secondary);
    background: var(--color-muted);
    border-radius: 999px;
    padding: 1px 6px;
}

.tp-prose {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    min-height: 62px;
    padding: 9px 11px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.65;
    outline: none;
    resize: none;
}

.tp-section--grow .tp-prose { min-height: 84px; }

.tp-prose:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--tp-tint);
}

.tp-prose::placeholder { color: var(--color-secondary); opacity: 0.8; }

/* ── Item list (agenda points, action items) ────────────────────────── */

.tp-list__rows { display: flex; flex-direction: column; gap: 7px; }

.tp-list__row { display: flex; align-items: center; gap: 7px; }

.tp-list__bullet {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--color-secondary);
    opacity: 0.5;
    flex-shrink: 0;
}

.tp-list__input {
    flex-grow: 1;
    min-width: 0;
    box-sizing: border-box;
    height: 32px;
    padding: 0 10px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 7px;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
}

.tp-list__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--tp-tint);
}

.tp-list__input::placeholder { color: var(--color-secondary); opacity: 0.8; }

.tp-list__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    border-radius: 6px;
    color: var(--color-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.tp-list__x:hover { background: var(--color-muted); color: var(--color-foreground); }
.tp-list__x i { width: 12px; height: 12px; }

.tp-list__add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px;
    margin-left: 12px;
    margin-top: 7px;
    border: none;
    background: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-secondary);
    cursor: pointer;
}

.tp-list__add:hover { background: var(--color-muted); color: var(--color-foreground); }
.tp-list__add i { width: 12px; height: 12px; }

/* ── Save gate ──────────────────────────────────────────────────────── */
/* Names what is still missing before the click, in the words the question
   used, rather than firing a toast after a rejected save. */

.tp-gate {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 12px;
    color: var(--color-secondary);
}

.tp-gate[hidden] { display: none; }
.tp-gate i { width: 13px; height: 13px; color: var(--color-warning); flex-shrink: 0; }

@keyframes tp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tp-slide-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rc-drawer__panel,
    .rc-drawer__veil { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DRAWER — the shared side panel (js/components/drawer.js).

   Lives here rather than in its own file only because index.html already
   loads this one; if a third surface grows its own stylesheet, split it.
   ═══════════════════════════════════════════════════════════════════════ */

.rc-drawer { position: fixed; inset: 0; }

.rc-drawer__veil {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 0.34);
    animation: tp-fade-in 0.15s ease-out;
}

.dark .rc-drawer__veil { background: rgb(0 0 0 / 0.55); }

.rc-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    color: var(--color-foreground);
    border-left: 1px solid var(--color-border);
    box-shadow: -18px 0 50px -12px rgb(15 23 42 / 0.28);
    animation: tp-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;

    --tp-tint: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --tp-tint-line: color-mix(in srgb, var(--color-primary) 30%, transparent);
    --tp-pop: 0 8px 24px -6px rgb(15 23 42 / 0.16), 0 2px 6px -2px rgb(15 23 42 / 0.08);
}

.dark .rc-drawer__panel {
    --tp-tint: color-mix(in srgb, var(--color-primary) 16%, transparent);
    --tp-tint-line: color-mix(in srgb, var(--color-primary) 34%, transparent);
    --tp-pop: 0 8px 24px -6px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4);
    box-shadow: -18px 0 50px -12px rgb(0 0 0 / 0.6);
}

/* Three sizes, because the content comes in three shapes. `md` is the
   touchpoint composer and the reference case — its 60/40 split needs 900px
   and stops working below it, so sm/lg are set relative to that. */
.rc-drawer__panel--sm { width: min(480px, 94vw); }
.rc-drawer__panel--md { width: min(900px, 94vw); }
.rc-drawer__panel--lg { width: min(1180px, 96vw); }

.rc-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.rc-drawer__heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-drawer__titles { min-width: 0; }

.rc-drawer__title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-drawer__meta { font-size: 12px; color: var(--color-secondary); margin: 2px 0 0; }

.rc-drawer__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--tp-tint);
    color: var(--color-primary);
    flex-shrink: 0;
}

.rc-drawer__badge i { width: 16px; height: 16px; }

.rc-drawer__chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--tp-tint);
    color: var(--color-primary);
    border: 1px solid var(--tp-tint-line);
    flex-shrink: 0;
}

.rc-drawer__tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.rc-drawer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 7px;
    color: var(--color-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.rc-drawer__icon:hover { background: var(--color-muted); color: var(--color-foreground); }
.rc-drawer__icon i { width: 16px; height: 16px; }

.rc-drawer__btn {
    height: 32px;
    padding: 0 15px;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.rc-drawer__btn--ghost { background: none; color: var(--color-secondary); font-weight: 500; }
.rc-drawer__btn--ghost:hover { color: var(--color-foreground); background: var(--color-muted); }
.rc-drawer__btn--primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.rc-drawer__btn--primary:hover { background: color-mix(in srgb, var(--color-primary) 88%, black); }

.rc-drawer__btn:disabled,
.rc-drawer__btn.is-disabled {
    background: var(--color-muted);
    color: var(--color-secondary);
    cursor: not-allowed;
}

.rc-drawer__body { flex-grow: 1; min-height: 0; display: flex; overflow-y: auto; }

body.rc-drawer-open { overflow: hidden; }

/* The composer mounts straight into the body and manages its own scrolling. */
.rc-drawer__body > .tp-body { flex-grow: 1; }

/* ── Detail panel content ───────────────────────────────────────────── */

.rc-detail { padding: 20px 22px; width: 100%; }

.rc-detail__facts {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}

.rc-detail__fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-secondary);
}

.rc-detail__fact i { width: 14px; height: 14px; }

.rc-detail__type {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--color-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.rc-detail > *:last-child { margin-bottom: 0; }

/* In a drawer both columns scroll independently; on the page the write-up
   column is bounded by the composer's own height instead. */
.rc-drawer__body .tp-writeup { overflow-y: auto; }

/* ── Forms inside a drawer ──────────────────────────────────────────────
   Converted modals keep their own field markup; this supplies the padding
   and the footer rhythm their modal wrapper used to provide. */

.rc-form {
    width: 100%;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rc-form > div > label,
.rc-form label {
    display: block;
}

.rc-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    margin-top: auto;
}

/* The email composer is a sidebar plus an editor; it manages its own internal
   scrolling and needs the full panel height, not the form padding. */
.rc-compose {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    width: 100%;
}

/* ── Chromeless panels ──────────────────────────────────────────────────
   Surfaces converted via createPanelShell keep their own header and footer,
   so the panel supplies no chrome of its own. Their markup was written for a
   centred modal box, though — a max-width, a radius, a drop shadow and a
   viewport-relative max-height. Those fight an edge-anchored panel, so they
   are neutralised here rather than edited out of every call site. */

.rc-drawer__panel--bare > .rc-drawer__body { padding: 0; }

.rc-drawer__panel--bare > .rc-drawer__body > * {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: 100%;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Calendar invite (composer) ──────────────────────────────────────────── */

.tp-invite__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-foreground);
    cursor: pointer;
    user-select: none;
}

.tp-invite__toggle input { accent-color: var(--color-primary); width: 15px; height: 15px; }

.tp-invite__body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-invite__checking {
    font-size: 12px;
    color: var(--color-secondary);
    margin: 0;
}

.tp-invite__providers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tp-invite__provider {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-foreground);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.tp-invite__provider:hover:not(:disabled) { border-color: var(--color-primary); }

.tp-invite__provider--selected {
    border-color: var(--color-primary);
    background: var(--tp-tint);
    color: var(--color-primary);
}

.tp-invite__provider--disabled,
.tp-invite__provider:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.tp-invite__sent {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--color-success);
}

.tp-invite__sent i { width: 15px; height: 15px; flex-shrink: 0; }

.tp-invite__sent a {
    color: var(--color-primary);
    text-decoration: underline;
    margin-left: 4px;
}

.tp-invite__message {
    min-height: 64px;
    resize: vertical;
}