/* The meeting dialog, the calendar time picker, and the verdict form.
 *
 * These lived in company.css, which ONLY the investor company page loads. The
 * verdict form is also on Activity and the time picker is now on the company
 * portal, and on both of those the markup arrived with no styling at all --
 * position: static, no card, no overlay. It rendered as raw content in the
 * middle of the page and every functional test still passed, because a test
 * that fills a field and presses a button does not care what it looks like.
 *
 * One file, loaded by every surface that opens one of these. See
 * tests/test_shared_ui_is_styled.py, which fails if a page uses these class
 * names without loading this.
 */




/* ===== Request a meeting =====
   This dialog owns every colour it uses. It sits on a page whose palette
   defines --white as #111827 -- near black -- so a card built from those
   tokens rendered dark text on a dark ground and was unreadable.

   Head / scrolling body / pinned foot, because the calendar grows as times are
   picked: with a single scrolling card the acknowledgement and Send were
   pushed past the bottom and could not be reached at all. */
.meeting-modal {
    position: fixed;
    inset: 0;
    background: rgba(17, 20, 26, .58);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 200;
}


.meeting-modal[hidden] { display: none; }


.meeting-modal-card {
    background: #FFFFFF;
    color: #1F242C;
    border-radius: 14px;
    width: min(560px, 100%);
    max-height: min(88vh, 820px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(15, 20, 30, .28), 0 2px 8px rgba(15, 20, 30, .12);
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}


/* ---- head ---- */
.mm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid #ECEEF2;
}


.mm-eyebrow {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: #B45309;
    margin-bottom: 3px;
}


.mm-head h3 {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #14181E;
    line-height: 1.25;
}


.mm-x {
    border: none; background: none; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: #A6ADB8;
    padding: 0 2px; margin-top: -2px; flex: none;
}

.mm-x:hover { color: #14181E; }


/* ---- body ---- */
.mm-body {
    overflow-y: auto;
    padding: 4px 26px 22px;
}


/* Sections carry the rhythm, so nothing needs a margin of its own. */
.mm-sect { padding-top: 20px; }

.mm-sect + .mm-sect { border-top: 1px solid #F2F4F7; }


.mm-label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: #14181E;
    margin-bottom: 2px;
}


.mm-opt {
    font-weight: 400;
    font-size: .78rem;
    color: #8A929E;
    margin-left: 6px;
}


.mm-help {
    margin: 0 0 11px;
    font-size: .8rem;
    line-height: 1.55;
    color: #656D7A;
}


.mm-input {
    font: inherit;
    font-size: .88rem;
    padding: 10px 12px;
    border: 1px solid #D8DDE5;
    border-radius: 9px;
    background: #fff;
    color: #1F242C;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.mm-input::placeholder { color: #A6ADB8; }

.mm-input:focus {
    outline: none;
    border-color: #B45309;
    box-shadow: 0 0 0 3px rgba(180, 83, 9, .12);
}

textarea.mm-input { width: 100%; resize: vertical; line-height: 1.55; }

.mm-select { padding-right: 8px; }


/* ---- calendar ---- */
.mm-cal {
    border: 1px solid #E3E7ED;
    border-radius: 11px;
    padding: 14px 16px 16px;
    background: #FCFDFE;
}


.mm-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}


.mm-month {
    font-size: .92rem; font-weight: 600; color: #14181E;
    letter-spacing: -.005em;
}


.mm-nav {
    border: 1px solid #D8DDE5; background: #fff; color: #414A57;
    border-radius: 8px; width: 30px; height: 30px;
    font-size: 1.05rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .12s ease, color .12s ease;
}

.mm-nav:disabled { opacity: .3; cursor: default; }

.mm-nav:not(:disabled):hover { border-color: #B45309; color: #B45309; }


.mm-dow, .mm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }


.mm-dow {
    margin-bottom: 6px;
    font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
    color: #98A0AC; font-weight: 600; text-align: center;
}


.mm-day {
    /* Slightly wider than tall: seven columns of squares made the grid taller
       than the times it exists to reach. */
    aspect-ratio: 1.35;
    border: 1px solid transparent;
    background: none;
    border-radius: 8px;
    font: inherit;
    font-size: .84rem;
    color: #2A303A;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.mm-day:disabled { color: #C9CFD8; cursor: default; }

.mm-day:not(:disabled):hover { background: #FBF1E6; border-color: #E4C49E; }

/* Only mark today when today can actually be chosen -- an underline under a
   greyed-out number reads as something having gone wrong. */
.mm-day.is-today:not(:disabled) { font-weight: 700; box-shadow: inset 0 -2px 0 #D8DDE5; }

.mm-day.has-time {
    background: #B45309; border-color: #B45309; color: #fff; font-weight: 600;
    box-shadow: none;
}


.mm-daybar {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #E9EDF2;
}

.mm-day-label {
    font-size: .8rem; font-weight: 600; color: #14181E; margin-bottom: 9px;
}

.mm-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
    gap: 6px;
    max-height: 9.5rem;
    overflow-y: auto;
}


.mm-time {
    border: 1px solid #D8DDE5; background: #fff; border-radius: 7px;
    padding: 7px 4px; font: inherit; font-size: .78rem; color: #2A303A;
    cursor: pointer; font-variant-numeric: tabular-nums; text-align: center;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.mm-time:hover { border-color: #B45309; color: #B45309; }

.mm-time.is-on { background: #B45309; border-color: #B45309; color: #fff; font-weight: 600; }


.mm-lenrow {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px;
    font-size: .84rem; color: #414A57;
}


/* ---- the times chosen ---- */
.mm-chosen {
    display: flex; flex-wrap: wrap; gap: 7px;
    min-height: 1.4rem;
}

.mm-chosen:empty { display: none; }


.mm-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: #FDF4E9; border: 1px solid #E9C9A3; color: #8A4109;
    border-radius: 14px; padding: 5px 7px 5px 12px;
    font-size: .76rem; font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.mm-chip button {
    border: none; background: none; color: inherit; cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0 2px; opacity: .7;
}

.mm-chip button:hover { opacity: 1; }


.mm-none { font-size: .78rem; color: #8A929E; }


/* ---- foot ---- */
.mm-foot {
    border-top: 1px solid #ECEEF2;
    padding: 16px 26px 20px;
    background: #FAFBFC;
    display: flex;
    flex-direction: column;
    gap: 13px;
}


/* The acknowledgement is the one thing here that is not optional, so it is the
   one thing given a border -- and it lives in the pinned foot, where it cannot
   scroll out of reach. */
.mm-ack {
    display: flex; gap: 11px; align-items: flex-start;
    font-size: .78rem; line-height: 1.55; color: #4A525F;
    border: 1px solid #DEE3EA; border-radius: 9px;
    padding: 12px 14px; cursor: pointer; background: #fff;
}

.mm-ack:hover { border-color: #C2C9D3; }

.mm-ack input { margin-top: 2px; flex: none; accent-color: #B45309; }

.mm-ack strong { color: #14181E; }


.mm-actions { display: flex; justify-content: flex-end; gap: 10px; }


.mm-btn {
    font: inherit; font-size: .86rem; font-weight: 500;
    padding: 10px 20px; border-radius: 9px; cursor: pointer;
    border: 1px solid #D8DDE5; background: #fff; color: #2A303A;
    transition: border-color .12s ease, background .12s ease;
}

.mm-btn:hover { border-color: #A6ADB8; }


.mm-btn-go {
    background: #B45309; border-color: #B45309; color: #fff; font-weight: 600;
    padding: 10px 26px;
}

.mm-btn-go:hover { background: #92400E; border-color: #92400E; }

.mm-btn-go:disabled { opacity: .55; cursor: default; }


.mm-error {
    font-size: .8rem; color: #A3320F; line-height: 1.5;
    background: #FDF1EC; border: 1px solid #F0CDBE;
    border-radius: 8px; padding: 9px 12px;
}

.mm-error[hidden] { display: none; }




/* The three kinds of note. A segmented control rather than a select, because
   three options that fit on one line should not cost a click to see. */
.fb-kinds { display: flex; gap: 8px; flex-wrap: wrap; }


.fb-kind {
    padding: 7px 14px;
    border: 1px solid var(--slate);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--silver);
    font-size: 0.85rem;
    cursor: pointer;
}


.fb-kind:hover { border-color: #1F2937; color: var(--white); }


.fb-kind.is-on {
    background: #1F2937;
    border-color: #1F2937;
    color: #fff;
}


.fb-msg { margin-right: auto; font-size: 0.85rem; color: var(--signal-red); }

.fb-msg.is-ok { color: var(--signal-green); }


/* No calendar in this one, so it does not need the meeting dialog's height. */
.fb-card { max-height: none; }


/* ===== The verdict form =====
   A stance and then the one follow-up it implies. The chips carry most of the
   weight: they are the question, so they get the room a set of radio buttons
   never would. */
.vd-stances,
.vd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }


.vd-chip {
    font: inherit;
    font-size: .84rem;
    padding: 9px 15px;
    border: 1px solid #D8DDE5;
    border-radius: 999px;
    background: #fff;
    color: #2A303A;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}


.vd-chip:hover { border-color: #1F2937; }


/* The chosen one is dark rather than orange: orange on this page means the
   meeting request, and two filled oranges in one flow read as the same act. */
.vd-chip.is-on {
    background: #1F2937;
    border-color: #1F2937;
    color: #fff;
    font-weight: 500;
}


/* A condition and why it matters, side by side, with the reason given less
   room -- it is the supporting note, not the thing being named. */
.vd-cond {
    display: grid;
    grid-template-columns: 1.15fr 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}


.vd-cond .mm-input { margin: 0; }


.vd-drop {
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    width: 32px; height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #8A919C;
    cursor: pointer;
}


.vd-drop:hover { border-color: #E3B7B7; color: #B4231F; background: #FFF7F7; }


.vd-add {
    font: inherit;
    font-size: .84rem;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #B45309;
    font-weight: 500;
    cursor: pointer;
}


.vd-add:hover { text-decoration: underline; }


/* A second label inside one section needs air above it, or it reads as a
   caption on the field before it rather than a new question. */
.vd-sub { margin-top: 16px; }

/* ===== The undo bar =====
   For an action that has already happened and is cheap to put back. Sits above
   everything, bottom-centre, because it must be findable without hunting and
   must not cover the thing that just changed. */
.undo-bar {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(92vw, 560px);
    padding: 13px 14px 13px 18px;
    border-radius: 11px;
    background: #111827;
    color: #fff;
    box-shadow: 0 10px 34px rgba(17, 20, 26, 0.28);
    font-size: 0.88rem;
}

.undo-bar-text { flex: 1; }

/* The undo is the point of the bar, so it is the only thing in it that reads
   as a control. */
.undo-bar-btn {
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 8px;
    background: transparent;
    color: #FBBF7A;
    cursor: pointer;
    white-space: nowrap;
}

.undo-bar-btn:hover { border-color: #FBBF7A; background: rgba(251, 191, 122, 0.1); }
.undo-bar-btn:disabled { opacity: 0.6; cursor: default; }

.undo-bar-x {
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.undo-bar-x:hover { color: #fff; }

/* A refused undo stops looking like an offer. */
.undo-bar.is-failed { background: #7A1F1C; }

@media (prefers-reduced-motion: no-preference) {
    .undo-bar { animation: undo-rise 180ms ease-out 1; }
    @keyframes undo-rise {
        from { opacity: 0; transform: translate(-50%, 10px); }
        to   { opacity: 1; transform: translate(-50%, 0); }
    }
}