/* Waystone's web client (T-105): the one stylesheet. Phone first (360 to 430 px), usable up to tablet width; light
   and dark from the system setting. Every colour is a variable here; components use classes prefixed ws-. */

:root {
    --ws-bg: #f6f7f9;
    --ws-surface: #ffffff;
    --ws-text: #1d2430;
    --ws-muted: #5d6675;
    --ws-faint: #8a93a1;
    --ws-rule: #dde1e7;
    --ws-accent: #2f6fd6;
    --ws-attention: #d9480f;
    --ws-under-way: #2f6fd6;
    --ws-done: #2b8a3e;
    --ws-problem: #c92a2a;
    --ws-milestone: #7048e8;
    --ws-viewer-bg: #000000;
    --ws-viewer-text: #ffffff;
    --ws-pad: 16px;
    --ws-row-gap: 10px;
    --ws-nav-height: 56px;
    --ws-max-width: 760px;
    --ws-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ws-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ws-bg: #14181f;
        --ws-surface: #1d2430;
        --ws-text: #e6e9ee;
        --ws-muted: #a3acb9;
        --ws-faint: #6f7886;
        --ws-rule: #2c3442;
        --ws-accent: #6ea0ff;
        --ws-attention: #ff8a4c;
        --ws-under-way: #6ea0ff;
        --ws-done: #69db7c;
        --ws-problem: #ff6b6b;
        --ws-milestone: #b197fc;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--ws-bg);
    color: var(--ws-text);
    font: 16px/1.4 var(--ws-font);
    -webkit-text-size-adjust: 100%;
}

a { color: var(--ws-accent); }

.ws-loading { padding: var(--ws-pad); color: var(--ws-muted); }

/* The shell: header, page, bottom nav. */
.ws-shell {
    max-width: var(--ws-max-width);
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: calc(var(--ws-nav-height) + env(safe-area-inset-bottom));
}

.ws-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-rule);
    padding: calc(10px + env(safe-area-inset-top)) var(--ws-pad) 10px;
}

.ws-brand { margin: 0; font-size: 18px; font-weight: 600; }

.ws-presence { margin: 2px 0 0; color: var(--ws-muted); font-size: 14px; }
.ws-presence__instance { white-space: nowrap; }
.ws-online { color: var(--ws-text); }
.ws-offline { color: var(--ws-muted); }

.ws-main { padding: 0 var(--ws-pad); }

.ws-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    background: var(--ws-surface);
    border-top: 1px solid var(--ws-rule);
    padding-bottom: env(safe-area-inset-bottom);
}

.ws-nav__item {
    flex: 1 1 0;
    max-width: calc(var(--ws-max-width) / 3);
    height: var(--ws-nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ws-muted);
    text-decoration: none;
    font-size: 15px;
}

.ws-nav__item.active { color: var(--ws-accent); font-weight: 600; box-shadow: inset 0 3px 0 var(--ws-accent); }

/* A page and its sections. */
.ws-page { padding: 4px 0 var(--ws-pad); }
.ws-section { border-bottom: 1px solid var(--ws-rule); padding-bottom: 8px; }
.ws-section:last-child { border-bottom: none; }

.ws-head {
    margin: 16px 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ws-muted);
}

.ws-note { margin: 8px 0; color: var(--ws-muted); font-size: 15px; }
.ws-note--problem { color: var(--ws-problem); }

/* A row: mark, title and line, an end. A whole row is the link (a large target on a phone). */
.ws-row {
    display: flex;
    align-items: flex-start;
    gap: var(--ws-row-gap);
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
    border-top: 1px solid var(--ws-rule);
}

.ws-head + .ws-row { border-top: none; }
a.ws-row:active { background: var(--ws-rule); }
.ws-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ws-row__title { font-weight: 600; overflow-wrap: anywhere; }
.ws-row__unread { color: var(--ws-accent); }
.ws-row__line { color: var(--ws-muted); font-size: 14px; overflow-wrap: anywhere; }
.ws-row__end { flex: none; color: var(--ws-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* Marks. */
.ws-mark { display: inline-block; width: 1.1em; flex: none; text-align: center; line-height: 1.4; }
.ws-mark--waiting { color: var(--ws-attention); }
.ws-mark--underway { color: var(--ws-under-way); }
.ws-mark--idle { color: var(--ws-muted); }
.ws-mark--stopped { color: var(--ws-faint); }
.ws-mark--done { color: var(--ws-done); }
.ws-mark--failed { color: var(--ws-problem); }
.ws-mark--milestone { color: var(--ws-milestone); }
.ws-mark--online { color: var(--ws-done); }
.ws-presence .ws-mark { width: auto; margin-left: 2px; font-size: 12px; }

/* The project frame and its tabs. */
.ws-frame__bar { display: flex; align-items: baseline; gap: 16px; padding: 10px 0 4px; }
.ws-frame__title { font-weight: 600; overflow-wrap: anywhere; }
.ws-back { text-decoration: none; white-space: nowrap; display: inline-block; padding: 8px 0; }
.ws-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--ws-rule); }
.ws-tabs__tab { padding: 10px 14px; color: var(--ws-muted); text-decoration: none; }
.ws-tabs__tab.active { color: var(--ws-accent); font-weight: 600; box-shadow: inset 0 -3px 0 var(--ws-accent); }

/* Buttons. */
.ws-button {
    display: inline-block;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--ws-rule);
    border-radius: 8px;
    background: var(--ws-surface);
    color: var(--ws-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ws-button--primary { background: var(--ws-accent); border-color: var(--ws-accent); color: #fff; }

/* Tablet: a little more room, the same column. */
@media (min-width: 600px) {
    :root { --ws-pad: 24px; }
    .ws-brand { font-size: 20px; }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 12px var(--ws-pad);
    background: var(--ws-problem);
    color: #fff;
}

#blazor-error-ui a { color: #fff; margin-left: 12px; }

.ws-row__unread { margin-left: 0.3em; }

/* Devices (T-102): rows with Revoke, its confirm, the pairing form, the Notifications switch's place. */
.ws-head + .ws-device .ws-row { border-top: none; }
.ws-device__revoke { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.ws-button--danger { background: var(--ws-problem); border-color: var(--ws-problem); color: #fff; }
.ws-button:disabled { opacity: 0.55; cursor: default; }
.ws-confirm { padding: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-confirm__text { flex: 1 1 100%; margin: 0; color: var(--ws-muted); font-size: 14px; }
.ws-pair__form { display: flex; flex-direction: column; gap: 6px; }
.ws-pair__label { color: var(--ws-muted); font-size: 14px; }
.ws-pair__line { display: flex; gap: 8px; }
.ws-input {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--ws-rule);
    border-radius: 8px;
    background: var(--ws-surface);
    color: var(--ws-text);
    font: inherit;
}
.ws-pair__code { flex: 1 1 auto; min-width: 0; font-family: var(--ws-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.ws-notifications__line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
/* The Notifications switch on (T-108): the accent, so on and off read apart at a glance. */
.ws-notifications__switch { min-width: 56px; }
.ws-notifications__switch--on { background: var(--ws-accent); border-color: var(--ws-accent); color: #fff; }

/* A session from the phone (T-106). The transcript box lays its content out from the bottom (column-reverse), so it
   stays at the newest line until the person scrolls up, with no script. */
.ws-session__bar { display: flex; align-items: baseline; gap: 10px; }
.ws-session__title { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.ws-session__state, .ws-session__meta { margin: 0; color: var(--ws-muted); font-size: 14px; }
.ws-transcript { display: flex; flex-direction: column-reverse; max-height: 55vh; overflow-y: auto; border-top: 1px solid var(--ws-rule); border-bottom: 1px solid var(--ws-rule); margin: 8px 0; }
.ws-transcript--tall { max-height: 68vh; }
.ws-subagent__open { margin-left: 12px; text-decoration: none; white-space: nowrap; }
.ws-subagent__asking { margin: 8px 0; }
.ws-transcript__earlier { text-align: center; padding: 8px 0; }
.ws-block { display: flex; gap: 10px; padding: 4px 0; margin: 0; }
.ws-block__who { flex: none; width: 4.5em; color: var(--ws-muted); font-size: 13px; padding-top: 2px; }
.ws-block__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ws-block--group, .ws-block--thinking, .ws-block--subagent, .ws-block--note { display: block; }
.ws-quiet { color: var(--ws-muted); }
.ws-text-para { margin: 0; }
.ws-text-item__marker { color: var(--ws-muted); }
.ws-fold { display: flex; gap: 6px; width: 100%; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ws-fold__text { overflow-wrap: anywhere; }
.ws-call__body, .ws-group__calls { padding-left: 18px; }
.ws-pre { margin: 4px 0; padding: 8px; background: var(--ws-surface); border: 1px solid var(--ws-rule); border-radius: 6px; font: 13px/1.35 var(--ws-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; }
.ws-pre--error { color: var(--ws-problem); }
.ws-button--small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.ws-request { border: 1px solid var(--ws-attention); border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: var(--ws-surface); }
.ws-request__title { margin: 0 0 4px; font-size: 16px; }
.ws-request__asker { margin: 0; color: var(--ws-muted); font-size: 14px; }
.ws-question__head { margin: 4px 0; color: var(--ws-muted); font-size: 14px; }
.ws-question__text { margin: 4px 0 8px; font-weight: 600; }
.ws-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; min-height: 44px; }
.ws-option__text { flex: 1 1 auto; }
.ws-option--other { align-items: center; }
.ws-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ws-buttons__end { margin-left: auto; }
.ws-input { width: 100%; padding: 10px; border: 1px solid var(--ws-rule); border-radius: 8px; background: var(--ws-surface); color: var(--ws-text); font: inherit; }
.ws-field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.ws-field__label { color: var(--ws-muted); font-size: 14px; }
.ws-reply__box { resize: vertical; }
.ws-sessions__new { width: 100%; margin: 8px 0; }

/* T-107: projects, board, item, launch */
.ws-projects__name { font-size: 16px; margin: 16px 0 4px; }
.ws-projects__offline { color: var(--ws-muted); font-weight: normal; }
.ws-board__fold { display: flex; width: 100%; align-items: center; justify-content: space-between; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; }
.ws-item__summary { margin: 8px 0; }
.ws-item__fields { margin: 8px 0; }
.ws-item__field { display: flex; gap: 8px; }
.ws-item__field dt { color: var(--ws-muted); min-width: 6em; }
.ws-item__field dd { margin: 0; }
.ws-item__action { display: block; text-align: center; margin: 8px 0; }
.ws-item__wavetitle, .ws-item__heading { font-size: 15px; margin: 12px 0 4px; }
.ws-item__pre, .ws-launch__prompt { white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; background: var(--ws-surface); border: 1px solid var(--ws-rule); border-radius: 8px; padding: 10px; font-size: 13px; }
.ws-launch__prompt { max-height: 40vh; }
.ws-launch__choices { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.ws-choice { min-height: 36px; padding: 6px 12px; border: 1px solid var(--ws-rule); border-radius: 8px; background: var(--ws-surface); color: var(--ws-text); font: inherit; }
.ws-choice--on { background: var(--ws-accent); border-color: var(--ws-accent); color: #fff; }

/* A review from the phone (T-129): the card, each item's box (Load, then the image, a player or a download), its pick and
   Note, and the full-screen layer an image opens in. Pinch-zoom there is the browser's own. */
.ws-review__head { margin: 0 0 4px; color: var(--ws-attention); font-size: 14px; font-weight: 600; }
.ws-review__count { margin: 6px 0; color: var(--ws-muted); font-size: 15px; }
.ws-link-button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ws-accent); font: inherit; cursor: pointer; }
.ws-link-button:disabled { opacity: 0.55; cursor: default; }
.ws-review__item { margin: 10px 0 4px; }
.ws-review__box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--ws-rule); border-radius: 8px; background: var(--ws-bg); text-align: center; }
.ws-review__file { margin: 0; overflow-wrap: anywhere; font-family: var(--ws-mono); font-size: 14px; }
.ws-review__status { margin: 0; color: var(--ws-muted); font-size: 14px; }
.ws-review__status.ws-note--problem { color: var(--ws-problem); }
.ws-review__progress { width: 100%; height: 6px; accent-color: var(--ws-accent); }
.ws-review__image { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ws-review__image img { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto; object-fit: contain; border-radius: 4px; }
.ws-review__audio { width: 100%; }
.ws-review__download { display: inline-block; padding: 10px 0; font-family: var(--ws-mono); overflow-wrap: anywhere; }
.ws-review__pick { display: flex; align-items: center; gap: 8px; }
.ws-review__label { flex: 1 1 auto; margin: 0; }
p.ws-review__label { padding: 8px 0; }
.ws-review__note-button { flex: 0 0 auto; }
.ws-review__note { margin: 0 0 6px; }
/* A review folded and reopened (T-149) */
.ws-review__fold { width: 100%; text-align: left; }
.ws-review--folded { padding: 2px 8px; }
.ws-review--folded .ws-fold__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-review--folded .ws-review__fold-count { flex: 0 0 auto; white-space: nowrap; }
.ws-review--record { position: fixed; inset: 0; z-index: 15; margin: 0; border: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--ws-pad) 24px; background: var(--ws-bg); }
.ws-review__bar { display: flex; align-items: center; min-height: 48px; padding-top: env(safe-area-inset-top); }
.ws-review__back { border: 0; background: none; font: inherit; cursor: pointer; padding: 8px 0; min-height: 44px; }
.ws-review__outcome { margin: 0 0 8px; color: var(--ws-muted); }
.ws-review__note-text, .ws-review__whole { margin: 0 0 6px; padding-left: 4px; overflow-wrap: anywhere; }
.ws-review__whole { margin-top: 12px; }
.ws-review-record { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.ws-review-record .ws-block__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ws-review-record__head { color: var(--ws-muted); font-size: 14px; }
.ws-review-record__question { overflow-wrap: anywhere; }
.ws-review-record__go { color: var(--ws-muted); }
.ws-call__images { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ws-call__image { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ws-call__image img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
.ws-viewer { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--ws-viewer-bg); color: var(--ws-viewer-text); }
.ws-viewer__bar { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px var(--ws-pad); padding-top: max(4px, env(safe-area-inset-top)); }
.ws-viewer__title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-viewer__close { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--ws-viewer-text); font-size: 22px; cursor: pointer; }
.ws-viewer__stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: auto; touch-action: pinch-zoom pan-x pan-y; overscroll-behavior: contain; }
.ws-viewer__image { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Designs and discussions (T-147) */
.ws-sessions__starts { display: flex; gap: 8px; margin: 8px 0; }
.ws-sessions__starts .ws-button { flex: 1; margin: 0; }
.ws-design__id { margin: 12px 0 0; color: var(--ws-muted); }
.ws-design__title { font-size: 18px; margin: 4px 0 12px; overflow-wrap: anywhere; }
.ws-design__discuss { display: block; text-align: center; margin: 0 0 12px; }
/* A new project and its set-up (T-146) */
.ws-newproject { margin: 8px 0 12px; }
.ws-newproject__line { display: flex; gap: 8px; align-items: stretch; }
.ws-newproject__line .ws-input { flex: 1 1 auto; min-width: 0; }
.ws-newproject__made { margin: 4px 0; overflow-wrap: anywhere; }
.ws-newproject__setup { margin-left: 8px; white-space: nowrap; font-weight: 600; }
.ws-setup { margin: 8px 0 12px; }
.ws-setup__action { display: inline-block; }
.ws-launch__title { font-size: 16px; margin: 8px 0; }
.ws-launch__fold > summary { cursor: pointer; padding: 6px 0; color: var(--ws-muted); }