html, body { height: 100%; }
body { display: block; overflow: hidden; }
#app { display: grid; height: 100vh; box-sizing: border-box;
       grid-template-columns: minmax(0, 3fr) minmax(360px, 1fr);
       grid-template-rows: auto minmax(0, 62vh) minmax(0, 1fr);
       grid-template-areas: "rbar phone" "chart phone" "ctx phone"; }

 
#rbar { grid-area: rbar; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; padding: 6px 8px 2px;
        border-bottom: 1px solid var(--hair); }
.rbar button, .rbar select, .rbar input { background: var(--btn); color: var(--btn-fg); border: 1px solid var(--border);
        border-radius: 3px; padding: 3px 8px; font: inherit; font-size: 13px; line-height: 18px; }
.rbar button { cursor: pointer; min-width: 30px; }
.rbar button.on { background: var(--on); color: var(--on-fg); border-color: var(--on-fg); }
.rbar button:disabled { opacity: .45; cursor: default; }
.rbar select { padding: 3px 4px; max-width: 11rem; }
.rbar input[type=date] { width: 9.2rem; padding: 2px 6px; }
.rbar input[type=time] { width: 7.6rem; padding: 2px 6px; }
.rbar .grp { display: inline-flex; gap: 2px; align-items: center; }
.rbar .lbl { color: var(--muted); font-size: 11px; margin-right: 2px; }
.rbar .next.on { font-weight: 500; }
.rbar .clock { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 4px; }
.rbar .clock.closed { color: var(--muted); }
#rstatus { color: var(--muted); font-size: 11px; margin-left: auto; text-align: right; }
#rstatus.warn { color: #b06000; }
#rnote { flex: 1 0 100%; color: var(--muted); font-size: 11px; min-height: 0; }
#rnote:empty { display: none; }

 
#chartcol { grid-area: chart; display: flex; flex-direction: column; min-height: 0; min-width: 0;
            border-bottom: 1px solid var(--border); }
#chartcol #bar { padding: 4px 8px; }
#chartmsg { position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%);
            max-width: min(86%, 520px); box-sizing: border-box; padding: 10px 14px; border-radius: 6px;
            background: var(--label-bg); border: 1px solid var(--border); color: var(--fg); font-size: 13px;
            text-align: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
#chartmsg[hidden] { display: none; }
#chartmsg .sub { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
#chartmsg button { margin-top: 8px; background: var(--on); color: var(--on-fg); border: 1px solid var(--on-fg);
                   border-radius: 3px; padding: 4px 12px; font: inherit; cursor: pointer; }
.spin { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px;
        border: 2px solid var(--border); border-top-color: var(--on-fg); border-radius: 50%;
        animation: mct-spin .8s linear infinite; }
@keyframes mct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
#quote .px small.tag { margin-left: 6px; color: var(--muted); font-size: 11px; }

 
#ctx { grid-area: ctx; overflow-y: auto; min-height: 0; padding: 4px 10px 12px; }
.ctx-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); position: sticky; top: 0;
            background: var(--bg); z-index: 2; padding-top: 2px; }
.ctx-tabs button { all: unset; cursor: pointer; padding: 6px 10px 5px; color: var(--muted); font-size: 13px;
                   border-bottom: 2px solid transparent; }
.ctx-tabs button[aria-selected=true] { color: var(--on-fg); border-bottom-color: var(--on-fg); font-weight: 500; }
.ctx-tabs button:focus-visible { outline: 2px solid var(--on-fg); outline-offset: -2px; }
.ctx-head { display: flex; gap: 8px; align-items: baseline; color: var(--muted); font-size: 11px; padding: 6px 0 0; }
.ctx-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px;
            align-items: start; }
.blk { padding: 8px 0 6px; border-bottom: 1px solid var(--hair); min-width: 0; overflow-x: auto; }
.blk.wide { grid-column: 1 / -1; }
.blk h3 { margin: 0 0 4px; font-size: 13px; font-weight: 500; }
.blk .big { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.blk .line { margin: 2px 0; }
.blk .muted, .muted { color: var(--muted); }
.blk .empty { color: var(--muted); font-style: italic; font-size: 12px; margin: 2px 0; }
.blk .src { color: var(--muted); font-size: 11px; margin-top: 4px; }
.blk a { color: var(--on-fg); text-decoration: none; }
.blk a:hover { text-decoration: underline; }
.up { color: var(--up); } .down { color: var(--down); }
table.kv { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
table.kv th, table.kv td { padding: 2px 6px 2px 0; border-top: 1px solid var(--hair); text-align: right;
                           white-space: nowrap; vertical-align: top; }
table.kv th { color: var(--muted); font-weight: normal; }
table.kv th:first-child, table.kv td:first-child { text-align: left; }
table.kv td.wrap { white-space: normal; text-align: left; min-width: 4em; }
.scroll { max-height: 260px; overflow-y: auto; }
.blk button.chip { background: var(--btn); color: var(--btn-fg); border: 1px solid var(--border); border-radius: 8px;
                   padding: 0 8px; margin: 0 3px 2px 0; font: inherit; font-size: 11px; line-height: 18px; cursor: pointer; }
.blk button.chip.on { background: var(--on); color: var(--on-fg); border-color: var(--on-fg); }
.blk details { margin-top: 4px; }
.blk details summary { cursor: pointer; font-size: 12px; }
ul.items { list-style: none; margin: 0; padding: 0; }
ul.items li { padding: 4px 0; border-top: 1px solid var(--hair); font-size: 12px; line-height: 1.35; }
ul.items li:first-child { border-top: 0; }
ul.items .meta { color: var(--muted); font-size: 11px; }
ul.items .tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px; font-size: 10px;
                background: var(--on); color: var(--on-fg); }
ul.items .post { white-space: pre-wrap; overflow-wrap: anywhere; }

 
#phonecol { grid-area: phone; overflow-y: auto; min-height: 0; border-left: 1px solid var(--border);
            padding: 8px; box-sizing: border-box; background: var(--bg); }
#phone[data-missing]::before { content: "The phone mock-up isn't installed yet. The chart and the context panel work without it.";
            display: block; color: var(--muted); font-size: 12px; padding: 12px 4px; }

 
@media (max-width: 900px) {
  html, body { height: auto; }
  body { overflow: auto; }
  #app { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
         grid-template-areas: "rbar" "chart" "phone" "ctx"; }
  #chartcol { height: 62vh; min-height: 380px; }
  #phonecol { border-left: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  #ctx { overflow: visible; padding: 4px 8px 16px; }
  .ctx-body { grid-template-columns: minmax(0, 1fr); }
  #rstatus { margin-left: 0; flex: 1 0 100%; text-align: left; }
}