/* ---------------------------------------------------------------------------
   Product screens, shared.

   The illustrated product screens (templates/website/ui/) are drawn on the
   marketing pages and inside the app's onboarding tour, so their styles live
   here rather than in marketing.css, which carries page-level rules the app
   shell must never load. Every colour is a `--mk-` token; marketing.css
   defines them on :root and onboarding.css maps them onto the app's own
   tokens inside the tour.

   Load before marketing.css, whose motion and responsive rules refine these.
--------------------------------------------------------------------------- */

/* ===========================================================================
   Product screens.

   The screens on the home page are drawn in HTML from the app's own tokens
   and component shapes (the rail, panels, eyebrows, stage badges, the
   screener table), so they stay sharp at any size, follow the theme, and
   never go stale the way a screenshot would. The figures in them are
   illustrative, which the footer says.

   Scaling. Each screen is designed at a fixed width of --w units, where one
   unit is 16px at design size. .mkui is a size container and the canvas
   sets its font-size to 100cqi / --w, so a unit is always 1/--w of the
   available width and the whole screen scales as one picture. Everything
   inside is sized in em. --mkui-min stops the scale going below a legible
   size on a phone; past that point the screen is cropped from the right
   instead of shrunk further.
   =========================================================================== */

.mkui { container-type: inline-size; position: relative; }
.mkui__canvas {
    --w: 80;
    font-size: 14px;
    font-size: max(var(--mkui-min, 0px), 100cqi / var(--w));
    width: calc(var(--w) * 1em);
    font-family: var(--mk-sans);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--mk-text);
    text-align: left;
}

.mk-shot { position: relative; margin: 0; }
.mk-shot .mkui { border-radius: 0.9rem; }

.mkui-win {
    position: relative;
    display: grid;
    grid-template-columns: 4.5em minmax(0, 1fr);
    background: var(--mk-bg);
    border: 1px solid var(--mk-line);
    border-radius: 0.875em;
    overflow: hidden;
    box-shadow: var(--mk-shadow);
}
.mkui-win--flush { border: 0; border-radius: 0; box-shadow: none; }
.mkui-win--bare { grid-template-columns: minmax(0, 1fr); }

/* The rail, the app's fixed dark slate strip with its icons. */
.mkui-rail {
    background: var(--mk-rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35em;
    padding: 0.95em 0;
}
.mkui-rail__logo { color: #eef1f5; margin-bottom: 0.9em; line-height: 0; }
.mkui-rail__logo svg { width: 1.75em; height: 1.75em; }
.mkui-rail__logo .vb-mark__gem { fill: var(--mk-accent); stroke: var(--mk-accent); }
.mkui-rail__i {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.5em;
    height: 2.6em;
    color: #ffffff;
}
.mkui-rail__i svg { width: 1.15em; height: 1.15em; }
.mkui-rail__i.is-on { color: var(--mk-accent); }
.mkui-rail__i.is-on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    bottom: 0.3em;
    width: 0.2em;
    border-radius: 0 0.2em 0.2em 0;
    background: var(--mk-accent);
}
.mkui-rail__spacer { flex: 1; }

.mkui-main { min-width: 0; display: flex; flex-direction: column; }
.mkui-pad { padding: 1.5em 1.75em; }

.mkui-panel {
    background: var(--mk-panel);
    border: 1px solid var(--mk-line);
    border-radius: 0.625em;
    padding: 1.15em 1.25em;
    min-width: 0;
}
.mkui-card { background: var(--mk-card); border-radius: 0.5em; padding: 0.8em 0.9em; min-width: 0; }

.mkui-eyebrow {
    font-size: 0.6875em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mk-text-2);
}
.mkui-eyebrow--accent { color: var(--mk-accent); }
.mkui-h { font-size: 1.4em; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.mkui-sub { font-size: 0.8125em; color: var(--mk-text-2); }
.mkui-tiny { font-size: 0.6875em; color: var(--mk-muted); }
.mkui-val { font-size: 1.6em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.mkui-val--lg { font-size: 2.1em; }
.mkui-val small { font-size: 0.55em; font-weight: 500; color: var(--mk-text-2); letter-spacing: 0; }
.mkui-gain { color: var(--mk-gain); }
.mkui-loss { color: var(--mk-loss); }
.mkui-accent { color: var(--mk-accent); }
.mkui-muted { color: var(--mk-text-2); }
.mkui-row { display: flex; align-items: center; gap: 0.6em; min-width: 0; }
.mkui-between { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; min-width: 0; }
.mkui-grow { flex: 1; min-width: 0; }

/* Stage badges and dots, in the stage colours. */
.mkui-stage {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.15em 0.6em;
    border-radius: 999em;
    white-space: nowrap;
    color: #ffffff;
    background: var(--mk-card-2);
}
.mkui-stage svg { width: 0.75em; height: 0.75em; }
.mkui-stage[data-stage="to_research"] { background: var(--mk-badge-to-research); }
.mkui-stage[data-stage="researching"] { background: var(--mk-badge-researching); }
.mkui-stage[data-stage="owned"] { background: var(--mk-badge-owned); }
.mkui-stage[data-stage="pass"] { background: var(--mk-badge-pass); }
.mkui-stage.is-empty { background: transparent; border: 1px dashed var(--mk-line-strong); color: var(--mk-muted); font-weight: 400; }
.mkui-dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; flex: 0 0 auto; }
.mkui-dot[data-stage="to_research"] { background: var(--mk-stage-to-research); }
.mkui-dot[data-stage="researching"] { background: var(--mk-stage-researching); }
.mkui-dot[data-stage="owned"] { background: var(--mk-stage-owned); }
.mkui-dot[data-stage="pass"] { background: var(--mk-stage-pass); }

/* User tags, drawn as a 16% wash of the tag colour as the app derives them. */
.mkui-tag {
    --tag: #14b8a6;
    display: inline-flex;
    align-items: center;
    font-size: 0.72em;
    font-weight: 500;
    line-height: 1.4;
    padding: 0.15em 0.6em;
    border-radius: 999em;
    white-space: nowrap;
    color: color-mix(in srgb, var(--tag) 70%, #ffffff);
    background: color-mix(in srgb, var(--tag) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag) 40%, transparent);
}
:root[data-theme="light"] .mkui-tag { color: color-mix(in srgb, var(--tag) 75%, #000000); }

/* Screener filter chips. */
.mkui-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: 0.75em;
    font-weight: 500;
    padding: 0.35em 0.65em;
    border-radius: 0.45em;
    color: var(--mk-text);
    background: var(--mk-card);
    border: 1px solid var(--mk-line-strong);
    white-space: nowrap;
}
.mkui-chip b { font-weight: 600; color: var(--mk-accent); }
.mkui-chip svg { width: 0.7em; height: 0.7em; color: var(--mk-muted); }

.mkui-tabs { display: inline-flex; gap: 0.2em; padding: 0.2em; border-radius: 0.5em; background: var(--mk-panel); border: 1px solid var(--mk-line); }
.mkui-tab { font-size: 0.75em; font-weight: 500; padding: 0.4em 0.85em; border-radius: 0.4em; color: var(--mk-text-2); white-space: nowrap; }
.mkui-tab.is-on { background: var(--mk-accent); color: #fff; }
.mkui-tabline { display: flex; gap: 1.6em; border-bottom: 1px solid var(--mk-line); }
.mkui-tabline span { font-size: 0.8125em; font-weight: 500; padding: 0 0 0.75em; color: var(--mk-text-2); white-space: nowrap; }
.mkui-tabline span.is-on { color: var(--mk-text); box-shadow: inset 0 -2px 0 var(--mk-accent); }

.mkui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: 0.75em;
    font-weight: 600;
    padding: 0.55em 0.9em;
    border-radius: 0.5em;
    color: #fff;
    background: var(--mk-accent);
    white-space: nowrap;
}
.mkui-btn--ghost { color: var(--mk-text); background: transparent; border: 1px solid var(--mk-line-strong); }
.mkui-btn svg { width: 0.9em; height: 0.9em; }

.mkui-ticker {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.72em;
    font-weight: 600;
    padding: 0.2em 0.55em;
    border-radius: 0.35em;
    border: 1px solid color-mix(in srgb, var(--mk-accent) 55%, transparent);
    color: var(--mk-accent);
    background: var(--mk-accent-glow);
}
.mkui-ticker i { width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--mk-gain); }

.mkui-stars { display: inline-flex; gap: 0.12em; color: #f0b429; }
.mkui-stars svg { width: 1em; height: 1em; }
.mkui-stars .is-off { color: var(--mk-line-strong); }

/* Tables. */
.mkui-table { width: 100%; border-collapse: collapse; }
.mkui-table th {
    font-size: 0.6875em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    color: var(--mk-text-2);
    padding: 0.85em 0.9em;
    border-bottom: 1px solid var(--mk-line);
    white-space: nowrap;
}
.mkui-table--screener th { color: var(--mk-accent); background: var(--mk-panel); }
.mkui-table td {
    font-size: 0.8125em;
    padding: 0.72em 0.8em;
    border-bottom: 1px solid var(--mk-line);
    white-space: nowrap;
    color: var(--mk-text);
}
.mkui-table .num { text-align: right; }
.mkui-table .tick { color: var(--mk-accent); font-weight: 600; }
.mkui-table .name { color: var(--mk-accent); }
.mkui-table .dim { color: var(--mk-text-2); }
.mkui-table tr.is-hl td { background: color-mix(in srgb, var(--mk-accent) 10%, transparent); }
.mkui-table tr.is-hl td:first-child { box-shadow: inset 0.2em 0 0 var(--mk-accent); }
.mkui-table td .mkui-stage { font-size: 0.85em; }
.mkui-table td.mkui-gain { color: var(--mk-gain); }
.mkui-table td.mkui-loss { color: var(--mk-loss); }

/* A menu open over the screen, as the verdict picker opens in the app. */
.mkui-menu {
    position: absolute;
    z-index: 3;
    min-width: 12.5em;
    padding: 0.35em;
    border-radius: 0.6em;
    background: var(--mk-card);
    border: 1px solid var(--mk-line-strong);
    box-shadow: 0 1.25em 2.5em -0.75em rgba(0, 0, 0, 0.6);
}
.mkui-menu__label { font-size: 0.65em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-muted); padding: 0.6em 0.8em 0.4em; }
.mkui-menu__item { display: flex; align-items: center; gap: 0.6em; font-size: 0.8125em; padding: 0.5em 0.7em; border-radius: 0.4em; color: var(--mk-text); }
.mkui-menu__item.is-on { background: var(--mk-card-2); }
.mkui-menu__item svg { width: 0.9em; height: 0.9em; margin-left: auto; color: var(--mk-accent); }
.mkui-menu__sep { height: 1px; background: var(--mk-line); margin: 0.3em 0.4em; }

/* A notice sliding in, as window.vbToast draws them. */
.mkui-toast {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    width: 21em;
    padding: 0.9em 1em;
    border-radius: 0.6em;
    background: var(--mk-card);
    border: 1px solid var(--mk-line-strong);
    border-left: 3px solid var(--mk-gain);
    box-shadow: 0 1.25em 2.5em -0.75em rgba(0, 0, 0, 0.6);
}
.mkui-toast svg { width: 1.1em; height: 1.1em; color: var(--mk-gain); flex: 0 0 auto; margin-top: 0.1em; }
.mkui-toast b { display: block; font-size: 0.8125em; font-weight: 600; }
.mkui-toast span { display: block; font-size: 0.75em; color: var(--mk-text-2); margin-top: 0.15em; }

/* A panel floating in front of the screen, for the second half of a story. */
.mkui-float {
    position: absolute;
    z-index: 2;
    background: var(--mk-panel);
    border: 1px solid var(--mk-line-strong);
    border-radius: 0.75em;
    box-shadow: 0 2em 4em -1.5em rgba(0, 0, 0, 0.75);
}

/* Research reports keep their serif body text in the app, so they do here. */
.mkui-serif { font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0; }
.mkui-cite { color: var(--mk-accent); font-family: var(--mk-sans); font-size: 0.62em; font-weight: 600; vertical-align: super; line-height: 0; }
.mkui-cite.is-on { background: var(--mk-accent); color: #fff; border-radius: 0.25em; padding: 0.05em 0.25em; }

.mkui-chart { display: block; width: 100%; height: auto; }
.mkui-legend { display: flex; gap: 1.2em; font-size: 0.6875em; color: var(--mk-text-2); }
.mkui-legend i { display: inline-block; width: 1.1em; height: 0.18em; border-radius: 0.1em; vertical-align: middle; margin-right: 0.45em; }

.mkui-bar { display: flex; height: 0.4em; border-radius: 999em; overflow: hidden; background: var(--mk-card); gap: 2px; }
.mkui-bar span { display: block; height: 100%; }

.mkui-avatars { display: flex; }
.mkui-avatars span {
    display: grid;
    place-items: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    margin-right: -0.5em;
    font-size: 0.6em;
    font-weight: 600;
    color: var(--mk-text);
    background: var(--mk-card-2);
    border: 2px solid var(--mk-panel);
}

.mkui-nav { display: flex; flex-direction: column; gap: 0.1em; }
.mkui-nav span {
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-size: 0.78em;
    padding: 0.42em 0.7em;
    border-radius: 0.4em;
    color: var(--mk-text-2);
    white-space: nowrap;
}
.mkui-nav span.is-on { color: var(--mk-text); background: var(--mk-card); }
.mkui-nav svg { width: 0.95em; height: 0.95em; opacity: 0.8; }
.mkui-nav em { margin-left: auto; font-style: normal; font-size: 0.85em; font-weight: 600; color: #fff; background: var(--mk-accent); border-radius: 999em; padding: 0.05em 0.5em; }

.mkui-kv { display: flex; flex-direction: column; }
.mkui-kv div { display: flex; justify-content: space-between; gap: 1em; padding: 0.55em 0; border-bottom: 1px solid var(--mk-line); font-size: 0.8125em; }
.mkui-kv div:last-child { border-bottom: 0; }
.mkui-kv dt, .mkui-kv span:first-child { color: var(--mk-text-2); }
.mkui-kv b { font-weight: 600; }

/* One badge giving way to the next. Still, only the second shows;
   marketing.css animates the change. */
.mkui-swap { display: inline-grid; justify-items: end; align-items: center; }
.mkui-swap > * { grid-area: 1 / 1; }
.mkui-swap__from { visibility: hidden; }

/* ===========================================================================
   Indicators, as the company sidebar and the two metrics pages draw them.

   Sidebar badges use the app's solid fills (main.css .nav-section-badge--*),
   which carry their own contrast in both themes. Signal chips use a wash of
   the gain, loss or warning colour with the value in that ink, the way
   signal_strip_styles.html draws them from the sentiment scale; a neutral
   reading stays grey because it is a fact rather than a verdict.
   =========================================================================== */
.mkui-nav em.mkui-nbadge { display: inline-flex; align-items: center; gap: 0.3em; border-radius: 0.45em; padding: 0.12em 0.45em; }
.mkui-nav em.mkui-nbadge svg { width: 0.85em; height: 0.85em; opacity: 1; }
.mkui-nav em.mkui-nbadge--good { background: #1e7e34; }
.mkui-nav em.mkui-nbadge--flat { background: #57606a; }
.mkui-nav em.mkui-nbadge--bad { background: #b42318; }
.mkui-nav em.mkui-nbadge--buy { background: #28a745; }

.mkui-signals { display: flex; flex-wrap: wrap; gap: 0.45em; }
.mkui-signal {
    --tone: var(--mk-text-2);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.75em;
    line-height: 1.3;
    padding: 0.4em 0.75em;
    border-radius: 999em;
    border: 1px solid transparent;
    background: var(--mk-card-2);
    color: var(--mk-text);
    white-space: nowrap;
}
.mkui-signal i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--tone); flex: 0 0 auto; }
.mkui-signal b { font-weight: 700; color: var(--tone); }
.mkui-signal svg { width: 0.75em; height: 0.75em; color: var(--mk-muted); }
.mkui-signal--good { --tone: var(--mk-gain); background: color-mix(in srgb, var(--mk-gain) 14%, transparent); }
.mkui-signal--bad { --tone: var(--mk-loss); background: color-mix(in srgb, var(--mk-loss) 14%, transparent); }
.mkui-signal--watch { --tone: var(--mk-warn); background: color-mix(in srgb, var(--mk-warn) 16%, transparent); }
.mkui-signal--flat b { color: var(--mk-text); }
.mkui-signal.is-open { border-color: var(--mk-accent); box-shadow: 0 0 0 0.2em var(--mk-accent-glow); }
.mkui-signal.is-open svg { transform: rotate(180deg); }

.mkui-signal-dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--mk-text-2); flex: 0 0 auto; }
.mkui-signal-dot--good { background: var(--mk-gain); }

.mkui-working { display: flex; flex-direction: column; gap: 0.9em; padding: 1em 1.15em; }
.mkui-working__grid { display: grid; grid-template-columns: minmax(0, 1fr) 15em; gap: 1.4em; align-items: start; }
.mkui-working__terms { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45em 1em; margin: 0; }
.mkui-working__terms dt { font-size: 0.72em; color: var(--mk-muted); }
.mkui-working__terms dd { margin: 0; font-size: 0.75em; color: var(--mk-text); white-space: normal; }
.mkui-working__table td { padding: 0.45em 0.7em; font-size: 0.75em; }
.mkui-working__table th { padding: 0.5em 0.7em; }

.mkui-signals-sep { padding-top: 0.9em; border-top: 1px solid var(--mk-line); }

/* A checklist review (website/ui/_checklist.html): a question card, its
   answers drawn as the review page's buttons with the chosen one filled in
   its tone, the reasoning beneath, and the prompt text shown in the dialog. */
.mkui-count { font-style: normal; font-size: 0.85em; color: var(--mk-muted); margin-left: 0.35em; }
.mkui-q { display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em 1em; border: 1px solid var(--mk-line); border-radius: 0.55em; background: var(--mk-panel); }
.mkui-q.is-open { border-color: var(--mk-accent); box-shadow: 0 0 0 0.2em var(--mk-accent-glow); }
.mkui-q__text { font-size: 0.85em; font-weight: 600; }
.mkui-q__note { font-size: 0.75em; line-height: 1.5; color: var(--mk-text-2); padding-left: 0.8em; border-left: 2px solid var(--mk-line-strong); }
.mkui-answers { display: flex; flex-wrap: wrap; gap: 0.4em; }
.mkui-answers span { font-size: 0.72em; font-weight: 500; padding: 0.35em 0.75em; border-radius: 0.45em; border: 1px solid var(--mk-line-strong); color: var(--mk-text-2); white-space: nowrap; }
.mkui-answers span.is-na { border-style: dashed; }
.mkui-answers .is-good { color: var(--mk-gain); border-color: var(--mk-gain); background: color-mix(in srgb, var(--mk-gain) 14%, transparent); font-weight: 600; }
.mkui-answers .is-bad { color: var(--mk-loss); border-color: var(--mk-loss); background: color-mix(in srgb, var(--mk-loss) 14%, transparent); font-weight: 600; }
.mkui-prompt { font-size: 0.72em; line-height: 1.55; white-space: pre-line; color: var(--mk-text-2); border: 1px solid var(--mk-line); }
.mkui-box { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; border-radius: 0.3em; border: 1px solid var(--mk-line-strong); }
.mkui-box.is-on { background: var(--mk-accent); border-color: var(--mk-accent); color: #fff; }
.mkui-box svg { width: 0.85em; height: 0.85em; }