/* obeya.css - Obeya module (SPEC_32). Built on the tokens in styles.css; every
   rule is scoped to #view-obeya so nothing here leaks into other areas.
   Semaphore and tone colours always come with a text label. */
#view-obeya {
  --ob-green: #2f8f63; --ob-amber: #d9a11e; --ob-red: #a8321f; --ob-stale: #9aa19c;
  --ob-ok-bg: #dcefe4; --ob-ok-line: #2f8f63; --ob-warn-bg: #f7e7b9; --ob-warn-line: #b8860b;
  --ob-solid: #1d4a3a; --ob-ink: #14231c;
  color: var(--ink); max-width: 1500px;
}
#view-obeya a { color: var(--green-deep); text-decoration: none; }
#view-obeya a:hover { text-decoration: underline; }
#view-obeya h1 { font-size: 26px; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.01em; }
#view-obeya h2 { font-size: 16px; margin: 0; }
#view-obeya h3 { font-size: 13px; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
#view-obeya p { margin: 0 0 8px; }
#view-obeya :focus-visible { outline: 2px solid var(--ob-green); outline-offset: 2px; }
#view-obeya .btn, #view-obeya .btn-primary { font: inherit; font-weight: 600; font-size: 14px; border-radius: 10px; padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; }
#view-obeya .btn-primary { background: var(--ob-solid); border: 1px solid var(--ob-solid); color: #fff; }
#view-obeya .btn-primary:hover { background: #143d2c; text-decoration: none; }
#view-obeya a.btn:hover { text-decoration: none; }
#view-obeya button:disabled { opacity: .5; cursor: not-allowed; }
#view-obeya input, #view-obeya select, #view-obeya textarea { font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid #cfd2c8; border-radius: 8px; padding: 7px 9px; width: 100%; min-width: 0; }
#view-obeya textarea { resize: vertical; line-height: 1.45; }
#view-obeya input[type="checkbox"], #view-obeya input[type="radio"] { width: auto; padding: 0; accent-color: var(--ob-solid); }
#view-obeya label, #view-obeya legend { text-transform: none; letter-spacing: 0; color: inherit; font-size: inherit; }
#view-obeya fieldset.ob-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#view-obeya fieldset.ob-fieldset[disabled] { opacity: .85; }

/* --- text helpers --- */
.ob-muted { color: var(--muted); }
.ob-sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; display: block; }
.ob-strong { font-weight: 700; }
.ob-small { font-size: 13px; }
.ob-nowrap { white-space: nowrap; }
.ob-warn-text { color: var(--ob-red); }
.ob-grow { flex: 1 1 auto; min-width: 0; }
.ob-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ob-hint { font-size: 12px; color: var(--muted); }
.ob-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-spread { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ob-inline { display: inline-flex; align-items: center; gap: 8px; }
.ob-list { margin: 0; padding-left: 18px; }
.ob-list li { margin: 3px 0; }
.ob-crumb { font-size: 13px; margin-bottom: 10px; }

/* --- page frame --- */
.ob-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ob-head p { color: var(--muted); margin: 0; max-width: 80ch; }
.ob-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; min-width: 0; }
.ob-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ob-panel > h2 { margin-bottom: 10px; }
.ob-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ob-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ob-grid-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ob-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ob-split-left { grid-template-columns: 280px minmax(0, 1fr); }
.ob-aside { min-width: 0; }
.ob-sticky { position: sticky; top: 16px; }
.ob-banner { background: var(--green-tint); border: 1px solid #cfe1d7; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ob-banner-warn { background: var(--ob-warn-bg); border-color: var(--ob-warn-line); color: var(--ob-ink); }
.ob-notice { border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--line); background: var(--panel); }
.ob-notice[hidden] { display: none; }
.ob-notice[data-kind="success"] { background: var(--ob-ok-bg); border-color: var(--ob-ok-line); color: var(--ob-ink); }
.ob-notice[data-kind="error"] { background: #fbe9e5; border-color: var(--ob-red); color: #5f1b10; }
.ob-state, .ob-empty { background: var(--surface); border: 1px dashed #cfd2c8; border-radius: 14px; padding: 28px; text-align: center; color: var(--body); margin-bottom: 16px; }
.ob-state h1 { margin-bottom: 8px; }
.ob-state p, .ob-empty p { max-width: 60ch; margin: 0 auto 12px; }
.ob-callout { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--green-tint); border: 1px solid #cfe1d7; border-radius: 12px; padding: 12px 14px; }
.ob-panel.ob-callout { background: var(--green-tint); }
.ob-note { background: var(--panel); border-left: 3px solid var(--ob-green); border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.ob-note-warn { border-left-color: var(--ob-amber); background: #fdf6e1; }
.ob-details { margin-top: 10px; font-size: 13px; }
.ob-details summary { cursor: pointer; color: var(--muted); }

/* --- tiles and cards --- */
.ob-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ob-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ob-tile-n { font-size: 28px; font-weight: 700; line-height: 1.1; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ob-tile a:hover { text-decoration: none; }
.ob-tile a:hover .ob-tile-n { text-decoration: underline; }
.ob-tile-l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ob-tile-s { font-size: 13px; color: var(--body); }
.ob-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ob-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--ink); }
#view-obeya a.ob-card { color: var(--ink); }
#view-obeya a.ob-card:hover { border-color: var(--ob-green); text-decoration: none; }
.ob-card-head { font-size: 18px; font-weight: 700; line-height: 1.25; }
.ob-block { padding: 10px 0; border-top: 1px solid var(--line); }
.ob-block:first-child { border-top: 0; padding-top: 0; }
#view-obeya .ob-charter { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#view-obeya .ob-charter .ob-block { padding: 14px 0; }
#view-obeya .ob-charter > .ob-block:first-child { padding-top: 0; }
#view-obeya .ob-charter .ob-label { margin-bottom: 6px; }
.ob-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.ob-row:first-child { border-top: 0; }
.ob-row > div { flex: 1 1 auto; min-width: 0; }
.ob-row-done td { color: var(--muted); }
.ob-kind { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid #cfd2c8; border-radius: 6px; padding: 2px 6px; color: var(--body); background: var(--panel); }
.ob-datebox { flex: 0 0 84px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--green-tint); color: var(--green-deep); font-size: 12px; font-weight: 700; text-align: center; }

/* --- semaphore, pills, tones --- */
.ob-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #d7d9d0; flex: 0 0 auto; }
.ob-dot-green { background: var(--ob-green); }
.ob-dot-amber { background: var(--ob-amber); }
.ob-dot-red { background: var(--ob-red); }
.ob-dot-stale { background: var(--ob-stale); }
.ob-dot-paused, .ob-dot-none { background: transparent; border: 2px solid var(--ob-stale); }
.ob-sem { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.ob-sem > i { width: 12px; height: 12px; border-radius: 50%; background: #d7d9d0; flex: 0 0 auto; }
.ob-sem-green > i { background: var(--ob-green); }
.ob-sem-amber > i { background: var(--ob-amber); }
.ob-sem-red > i { background: var(--ob-red); }
.ob-sem-stale > i { background: var(--ob-stale); }
.ob-sem-none > i, .ob-sem-paused > i { background: transparent; border: 2px solid var(--ob-stale); }
.ob-sem-pill { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--surface); }
.ob-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ob-pill { display: inline-block; font-size: 12px; font-weight: 600; border: 1px solid #cfd2c8; border-radius: 999px; padding: 2px 9px; background: var(--surface); color: var(--body); white-space: nowrap; }
.ob-tone-bad { background: var(--ob-red); border-color: var(--ob-red); color: #fff; }
.ob-tone-warn { background: var(--ob-warn-bg); border-color: var(--ob-warn-line); color: var(--ob-ink); }
.ob-tone-ok { background: var(--ob-ok-bg); border-color: var(--ob-ok-line); color: var(--ob-ink); }
.ob-tone-late { background: #eceee8; border-color: var(--ob-stale); color: var(--ob-ink); }
.ob-tone-solid { background: var(--ob-solid); border-color: var(--ob-solid); color: #fff; }
.ob-pri { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; border: 1px solid #cfd2c8; color: var(--body); flex: 0 0 auto; }
.ob-pri-P1 { background: var(--ob-solid); border-color: var(--ob-solid); color: #fff; }
.ob-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-tint); color: var(--green-deep); font-size: 10px; font-weight: 700; margin-right: 6px; vertical-align: middle; }
.ob-load { display: inline-block; min-width: 54px; text-align: center; border: 1px solid #cfd2c8; border-radius: 8px; padding: 3px 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ob-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ob-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid #cfd2c8; }
.ob-swatch-due { background: #c9d6ce; border-color: #c9d6ce; }
.ob-swatch-done { background: var(--ob-solid); border-color: var(--ob-solid); }

/* --- tabs, chips, filters --- */
.ob-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
#view-obeya .ob-tabs a, .ob-tabs button { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--body); padding: 8px 12px; border-bottom: 3px solid transparent; cursor: pointer; }
#view-obeya .ob-tabs a:hover { text-decoration: none; color: var(--green-deep); }
#view-obeya .ob-tabs .is-active { color: var(--green-deep); border-bottom-color: var(--ob-solid); }
.ob-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ob-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid #cfd2c8; background: var(--surface); color: var(--body); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
#view-obeya a.ob-chip:hover, .ob-chip:hover { background: var(--green-tint); text-decoration: none; }
#view-obeya .ob-chip.is-active { background: var(--ob-solid); border-color: var(--ob-solid); color: #fff; }
.ob-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
.ob-filters .ob-field { flex: 0 1 170px; margin: 0; }
.ob-filters .ob-field.ob-grow { flex: 1 1 240px; }
.ob-asof { display: flex; flex-direction: column; gap: 4px; }
.ob-asof input { width: auto; }

/* --- tables --- */
.ob-table-wrap { overflow-x: auto; position: relative; }
.ob-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ob-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ob-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ob-table tr:last-child td { border-bottom: 0; }
.ob-table td .btn { padding: 4px 9px; font-size: 13px; }
.ob-cap-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ob-cap-controls label { font-size: 13px; white-space: nowrap; }
#view-obeya .ob-cap-controls [aria-pressed="true"] { background: var(--ob-ok-bg); font-weight: 700; }
.ob-cap-toggle { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 8px 2px 0; }
.ob-cap-indent, .ob-cap-child { padding-left: 20px !important; }
.ob-table tr[data-cap-parent] td { padding-top: 5px; padding-bottom: 5px; }
.ob-team-row td { vertical-align: middle; }
.ob-meter { display: inline-block; width: 120px; max-width: 100%; height: 8px; border-radius: 999px; background: #e9ebe3; overflow: hidden; vertical-align: middle; }
.ob-meter > i { display: block; height: 100%; background: #9db8aa; border: 0; border-radius: 999px; }
.ob-meter > i.ob-tone-solid { background: var(--ob-solid); }
.ob-meter > i.ob-tone-ok { background: var(--ob-green); }
.ob-meter > i.ob-tone-bad { background: var(--ob-red); }
.ob-block > .ob-meter { display: block; width: 100%; margin: 6px 0 4px; }
.ob-hbars > div { display: grid; grid-template-columns: 70px minmax(0, 1fr) 30px; align-items: center; gap: 10px; padding: 6px 0; }
.ob-hbars .ob-meter { width: 100%; height: 12px; }
.ob-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 190px; align-items: end; padding-top: 18px; }
.ob-bar-col { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.ob-bar-pair { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--line); }
.ob-bar { position: relative; flex: 0 1 18px; min-height: 2px; border-radius: 3px 3px 0 0; }
.ob-bar-due { background: #c9d6ce; }
.ob-bar-done { background: var(--ob-solid); }
.ob-bar b { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--body); }
.ob-bar-label { text-align: center; font-size: 11px; color: var(--muted); padding-top: 4px; }

/* --- forms --- */
.ob-form { display: block; }
.ob-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.ob-field.ob-inline { flex-direction: column; align-items: stretch; margin: 0; flex: 0 0 170px; }
.ob-checkbox { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.ob-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ob-seg label { cursor: pointer; }
.ob-seg > button { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid #cfd2c8; background: var(--surface); color: var(--body); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.ob-seg > button.is-active { background: var(--ob-solid); border-color: var(--ob-solid); color: #fff; }
.ob-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ob-seg span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfd2c8; border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; background: var(--surface); }
.ob-seg input:checked + span { background: var(--ob-solid); border-color: var(--ob-solid); color: #fff; }
.ob-seg input:focus-visible + span { outline: 2px solid var(--ob-green); outline-offset: 2px; }
.ob-step { display: grid; grid-template-columns: minmax(0, 1fr) 170px 150px auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.ob-lesson, .ob-klink, .ob-programme, .ob-verdict, .ob-choice { flex-wrap: wrap; }
.ob-lesson select, .ob-klink select, .ob-programme select, .ob-verdict select { flex: 0 0 150px; width: 150px; }
.ob-verdict input { margin-top: 6px; }
.ob-choice.is-missing { background: #fdf6e1; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.ob-check { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
#view-obeya a.ob-check { color: var(--ink); }
.ob-check:first-of-type { border-top: 0; }
.ob-check > i { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b9bdb2; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.ob-check.is-done > i { background: var(--ob-ink); border-color: var(--ob-ink); color: #fff; }
.ob-check > span:last-child { color: var(--muted); font-size: 13px; white-space: nowrap; }
.ob-modal-backdrop { position: fixed; inset: 0; background: rgba(20, 35, 28, .45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; z-index: 60; }
.ob-modal { background: var(--surface); border-radius: 14px; padding: 20px 22px; width: min(680px, 100%); box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
.ob-modal h2 { font-size: 18px; margin-bottom: 14px; }
.ob-modal .ob-actions { margin-top: 14px; }
.ob-modal-error { background: #fbe9e5; border: 1px solid var(--ob-red); color: #5f1b10; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.ob-modal-error[hidden] { display: none; }

/* --- board --- */
.ob-board-advanced { display: flex; flex: 1 0 100%; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ob-board-advanced[hidden] { display: none; }
.ob-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; align-items: start; }
.ob-col { background: #ecece4; border-radius: 10px; padding: 8px 10px; min-width: 0; }
.ob-col-filled { grid-column: 1 / -1; }
.ob-board-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; margin-top: 8px; }
#view-obeya a.ob-cellcard { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--ink); font-size: 13px; min-width: 0; }
#view-obeya a.ob-cellcard:hover { border-color: var(--ob-green); text-decoration: none; }
.ob-cellcard .ob-strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.ob-card-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }

/* --- my cells: load by month --- */
.ob-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.ob-month { border: 1px solid #cfd2c8; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); }
.ob-month .ob-label, .ob-month .ob-tile-n { color: inherit; }
.ob-month .ob-tile-n { font-size: 22px; }

/* --- meeting mode: full screen, readable from the back of the room --- */
body.obeya-meeting .rail, body.obeya-meeting .mobile-bar, body.obeya-meeting .activity-dock { display: none !important; }
body.obeya-meeting .app-shell { display: block; }
body.obeya-meeting .main { padding: 20px 28px; }
body.obeya-meeting #view-obeya { max-width: none; font-size: 17px; }
.ob-meeting-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--ob-solid); color: #fff; border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.ob-meeting-head .ob-label { color: #cfe1d7; }
#view-obeya .ob-meeting-head .btn { background: transparent; border-color: #9db8aa; color: #fff; }
.ob-meeting-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
#view-obeya .ob-meeting-current h1 { font-size: 32px; }
.ob-meeting-current .ob-sem { font-size: 18px; }
.ob-agenda { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; background: transparent; border: 0; border-top: 1px solid var(--line); padding: 10px 6px; cursor: pointer; color: var(--ink); border-radius: 0; }
.ob-agenda:hover { background: var(--green-tint); }
.ob-agenda.is-active { background: var(--green-tint-2); border-radius: 8px; }
.ob-agenda .ob-strong, .ob-agenda .ob-sub { display: block; }
.ob-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.ob-fact { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--panel); }

/* --- narrower screens --- */
@media (max-width: 1280px) {
  .ob-meeting-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .ob-meeting-grid > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .ob-split, .ob-split-left { grid-template-columns: minmax(0, 1fr); }
  .ob-sticky { position: static; }
  .ob-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .ob-grid2, .ob-grid3, .ob-grid-wide, .ob-meeting-grid { grid-template-columns: minmax(0, 1fr); }
  .ob-step { grid-template-columns: minmax(0, 1fr); }
  .ob-row { flex-wrap: wrap; }
  #view-obeya h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ob-cellcard, .ob-card, .ob-chip { transition: border-color .12s ease, background-color .12s ease; }
}

/* --- a write in flight --- */
#view-obeya.ob-busy { cursor: progress; }
#view-obeya.ob-busy button[type="submit"], #view-obeya.ob-busy .btn-primary { opacity: .6; pointer-events: none; }

/* The activity dock is fixed at the bottom left of the window: keep closing
   action rows to the right and leave room to scroll the last panel clear. */
#view-obeya { padding-bottom: 88px; }
#view-obeya form > .ob-actions, #view-obeya form > .ob-fieldset > .ob-actions { justify-content: flex-end; }
#view-obeya .ob-modal form > .ob-actions { justify-content: flex-start; }

/* Wide tables scroll inside their panel instead of widening the page. */
body:has(#view-obeya.is-active) .main { min-width: 0; }
/* Meeting-room display: larger type, readable from the back of the room. */
@media (min-width: 1800px) {
  body.obeya-meeting #view-obeya { font-size: 21px; }
  body.obeya-meeting #view-obeya .ob-meeting-current h1 { font-size: 44px; }
  body.obeya-meeting #view-obeya .ob-sub, body.obeya-meeting #view-obeya .ob-label { font-size: 15px; }
  body.obeya-meeting .ob-meeting-grid { grid-template-columns: 380px minmax(0, 1fr) 420px; }
  body.obeya-meeting #view-obeya input, body.obeya-meeting #view-obeya select, body.obeya-meeting #view-obeya textarea, body.obeya-meeting #view-obeya .btn, body.obeya-meeting #view-obeya .btn-primary { font-size: 17px; }
}

/* Planned IC / DD decision date on a Deal Flow lead (obeya-lead-date.js). */
.df-detail-decision { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.df-detail-decision:empty { display: none; }
.df-detail-decision-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.df-detail-decision-form label { display: inline-flex; align-items: center; gap: 6px; }
.df-detail-decision-form input, .df-detail-decision-form select { width: auto; padding: 4px 8px; }
.df-detail-decision-form small { flex-basis: 100%; color: var(--muted); }
