/* One centred column (option A of docs/design/2026-10-31-top-nav/, with P's two changes;
   decision ws:personal:decisions:argus-web-layout-one-centred-column-top-row-on-it-back-at-the-far-left-reports-wide-2026-10-31).
   P, verbatim: "a seems ok but i would keep the back button more to the left … content actions etc
   centered like you proposed except for the back naviagation that would be more to the left. and
   reports do not have to be narrow as they will not have right panel so they can be quite wide."

   Every screen sits on one column centred in the window — chat's 880 px for chat, the mail list,
   search, a thread and its reply box, Settings; Reports (Saved · Usage · Status) is wide, with even
   margins, up to 1440 px. The top row (60 px) sits on that column: the page's name or tabs at its
   left edge, the status line and the tools at its right edge — except Back, which sits at the far
   left, just clear of the rail icons. Narrower than the column plus the icons' room on both sides,
   the column starts just clear of the icons. Only with the rail (body[data-appbar]). */

/* The column never starts closer to the rail than --col-min: the top row's line and the tab
   underline stop well short of the icons and their count badges (2026-10-31, seen in the Mac app:
   the line ran on from the mail badge at 1300 px). Back alone sits at the rail's clearance. */
body[data-appbar] {
  --col-min: calc(var(--nav-clear) + 24px);
  --col-w: 880px;
  --col-x: max(var(--col-min), calc((100vw - var(--col-w)) / 2));
  --col-ww: min(var(--col-w), calc(100vw - var(--col-min) - 16px));
}
body[data-appbar][data-view="reports"] { --col-w: min(1440px, calc(100vw - 2 * var(--col-min))); }
/* Pages under a top row with a line (Settings, Reports): what scrolls up disappears at the line —
   nothing shows through the row, its tabs or its line (the Mac app at 1300 px showed Saved's cards
   running through them) — and fades in just below it. The first row starts 16 px under the line. */
body[data-appbar][data-view="settings"], body[data-appbar][data-view="reports"] { --top-fade: transparent 0, transparent 61px, black 74px; }

/* The header's corner goes: the top row says it now. Its elements still carry the call's state,
   which the status line reads (public/js/status-line.js). */
body[data-appbar] .arg-header { display: none !important; }

/* ── The top row ───────────────────────────────────────────────── */
.toprow { display: none; }
body[data-appbar] .toprow { display: block; }
.toprow__row {
  position: fixed; z-index: 31; top: 0; left: var(--col-x); width: var(--col-ww); height: 60px;
  display: flex; align-items: center; gap: 16px; pointer-events: none;
}
body[data-view="settings"] .toprow__row, body[data-view="reports"] .toprow__row { border-bottom: 1px solid var(--c-border-subtle); }
.toprow__l { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; pointer-events: auto; }
.toprow__l:empty { pointer-events: none; }
/* With Back up there and the column starting right at the icons' edge, the name starts after Back. */
body[data-back] .toprow__l { padding-left: max(0px, calc(var(--nav-clear) + var(--back-w, 80px) + 14px - var(--col-x))); }
.toprow__r { flex: none; display: flex; align-items: center; gap: 10px; }
.toprow__back { position: fixed; z-index: 32; left: var(--nav-clear); top: 12px; }
.tr-back {
  appearance: none; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
  height: 36px; padding: 0 9px 0 3px; border-radius: 2px; font: 500 14px/1 var(--f-ui); color: var(--c-text-secondary);
}
.tr-back[hidden] { display: none; }
.tr-back svg { width: 17px; height: 17px; }
.tr-back:hover { color: var(--c-text-primary); background: color-mix(in srgb, var(--c-text-primary) 5%, transparent); }
.tr-title { font: 600 18px/1 var(--f-ui); letter-spacing: .01em; color: var(--c-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Reports' tabs, as mail's splits: words, the lit one underlined on the row's line. */
.tr-tabs { display: flex; align-items: stretch; height: 100%; }
.tr-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer; position: relative; display: inline-flex; align-items: center;
  padding: 0 2px; font: 600 18px/1 var(--f-ui); letter-spacing: .01em; color: var(--c-text-tertiary);
}
.tr-tab b { font: 400 12px/1 var(--f-ui); color: var(--c-text-tertiary); margin-left: 7px; padding-top: 4px; }
.tr-tab:hover { color: var(--c-text-secondary); }
.tr-tab.on { color: var(--c-text-primary); cursor: default; }
.tr-tab.on b { color: var(--c-amber-light); }
.tr-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--c-amber); }
.tr-sep { display: inline-flex; align-items: center; color: var(--c-text-tertiary); opacity: .45; padding: 0 9px; font-size: 16px; }
.tr-tab:focus-visible, .tr-back:focus-visible { outline: 2px solid var(--c-amber-light); outline-offset: 2px; border-radius: 2px; }

/* ── The status line: only while a link is open; one line, the same on every screen ── */
.status-line { display: inline-flex; align-items: center; gap: 7px; height: 36px; font: 500 12.5px/1 var(--f-ui); color: var(--c-text-secondary); white-space: nowrap; pointer-events: none; }
.status-line[hidden] { display: none; }
.sl-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--c-text-tertiary); }
.sl-dot--red { background: var(--c-red); }
.sl-dot--acc { background: var(--c-amber); }
.sl-dot--need { background: var(--c-need); }
.sl-word { color: var(--c-text-primary); }
.sl-word--red { color: var(--c-red); }
.sl-word--need { color: var(--c-need); }
.sl-sep { color: var(--c-text-tertiary); }
.sl-meter { color: var(--c-amber-light); }
/* In mail it stands left of mail's own tools on the same row (splits · search · new; a thread's
   Done · Remind; search's ✕), and the splits keep clear of it. */
body.ml-on .toprow__r { padding-right: 138px; }
body.ml-on.ml-thread-open .toprow__r { padding-right: 90px; }
body.ml-on:has(.ml-sview:not([hidden])) .toprow__r { padding-right: 46px; }
body.ml-on.ml-zero-on .toprow__r { padding-right: 0; }
body[data-call].ml-on .ml-bar .ml-tabrow { margin-right: calc(var(--sl-w, 0px) + 10px); }
body.ml-zero-on .status-line, body.ml-zero-on .sl-word, body.ml-zero-on .sl-sep { color: rgba(246, 239, 230, .92); text-shadow: 0 1px 10px rgba(0, 0, 0, .75); }

/* ── Chat: the conversation and the message box were already on the column ── */

/* ── Mail ──────────────────────────────────────────────────────── */
body[data-appbar] .ml-head { margin-left: var(--col-x); width: var(--col-ww); padding: 0; }
body[data-appbar] .ml-scroll { padding: 6px max(16px, calc((100% - var(--col-w)) / 2)) 48px var(--col-x); }
/* A thread: its top row scrolls with it, as before; Back and the place in the list at the far left
   (just clear of the icons), Done and Remind as bare icons at the column's right edge, the line under
   the row on the column only. */
body[data-appbar] .ml-root--thread .ml-scroll { padding: 0 max(16px, calc((100% - var(--col-w)) / 2)) 24px var(--col-x); }
body[data-appbar] .ml-tbar { position: relative; height: 60px; margin: 0 0 18px calc(var(--nav-clear) - var(--col-x)); gap: 10px; }
body[data-appbar] .ml-tbar::after { content: ''; position: absolute; bottom: 0; right: 0; left: calc(var(--col-x) - var(--nav-clear)); height: 1px; background: var(--c-border-subtle); }
body[data-appbar] .ml-tbar .ml-back {
  height: 36px; padding: 0 9px 0 3px; border: 0; border-radius: 2px; gap: 3px;
  font: 500 14px/1 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--c-text-secondary);
}
body[data-appbar] .ml-tbar .ml-back svg { width: 17px; height: 17px; }
body[data-appbar] .ml-tbar .ml-back:hover { color: var(--c-text-primary); background: color-mix(in srgb, var(--c-text-primary) 5%, transparent); }
body[data-appbar] .ml-tbar .ml-hint { font: 400 13px/1 var(--f-ui); letter-spacing: 0; color: var(--c-text-tertiary); }
body[data-appbar] .ml-acts-slot .ml-acts { gap: 8px; }
body[data-appbar] .ml-acts-slot .ml-done, body[data-appbar] .ml-acts-slot .ml-clockbtn {
  position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 2px; background: transparent; color: var(--c-text-secondary);
}
body[data-appbar] .ml-acts-slot .ml-done span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-appbar] .ml-acts-slot .ml-done svg, body[data-appbar] .ml-acts-slot .ml-clockbtn svg { width: 17px; height: 17px; }
body[data-appbar] .ml-acts-slot .ml-done:hover, body[data-appbar] .ml-acts-slot .ml-clockbtn:hover { background: color-mix(in srgb, var(--c-text-primary) 8%, transparent); color: var(--c-text-primary); }

/* The person: at the window's right edge when 300 px fit beside the column with air (about 1600 px
   and wider), as the rail floats at the left; it no longer takes width from the mail, so the list and
   the thread stay centred. */
body[data-appbar] .ml-ctx {
  position: fixed; z-index: 5; top: 22px; right: 16px; bottom: 0; width: min(320px, calc((100vw - 880px) / 2 - 64px));
  padding: 0 0 40px; border-left: 0; overflow-y: auto;
}
@media (max-width: 1599px) { body[data-appbar] .ml-ctx { display: none; } }
/* Narrower, it folds into one line under the subject (mail/index.js paintFold); a click shows the
   panel as a card under it. */
.ml-fold { display: none; }
@media (max-width: 1599px) {
  body[data-appbar] .ml-fold {
    appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 9px 0; cursor: pointer; text-align: left;
    border: 0; border-top: 1px solid var(--c-border-subtle); border-bottom: 1px solid var(--c-border-subtle); background: transparent;
    font: 13px/1.3 var(--f-ui); color: var(--c-text-secondary);
  }
  body.ml-ctx-pop[data-appbar] .ml-ctx:not([hidden]) {
    display: block; position: fixed; z-index: 60; top: 140px; right: max(16px, calc((100vw - 880px) / 2)); bottom: auto;
    width: min(340px, calc(100vw - 96px)); max-height: calc(100vh - 170px); padding: 18px 18px 20px;
    background: var(--c-surface); border: 1px solid var(--c-border-emphasis); border-radius: 3px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  }
  :root[data-theme="light"] body.ml-ctx-pop[data-appbar] .ml-ctx:not([hidden]) { box-shadow: 0 14px 34px rgba(30, 35, 38, .16); }
}
.ml-fold b { color: var(--c-text-primary); font-weight: 600; white-space: nowrap; }
.ml-fold__e { color: var(--c-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ml-fold__sp { flex: 1 1 auto; }
.ml-fold__q { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ml-fold__q svg { width: 13px; height: 13px; }
.ml-fold__dot { color: var(--c-text-tertiary); opacity: .6; }
.ml-fold:hover, .ml-fold[aria-expanded="true"] { color: var(--c-text-primary); }
.ml-fold:focus-visible { outline: 2px solid var(--c-amber-light); outline-offset: 2px; }

/* Inbox zero: on the picture there is no column to hang the tools on, so they go to the window's
   corner (as before); the splits and the streak stay on the column. */
body[data-appbar].ml-zero-on .ml-new { position: fixed; z-index: 6; top: 12px; right: 16px; }
body[data-appbar].ml-zero-on .ml-sbtn { position: fixed; z-index: 6; top: 12px; right: 62px; }
body[data-appbar].ml-zero-on .ml-gear2 { position: fixed; z-index: 6; top: 12px; right: 108px; }
body[data-appbar] .ml-zero .ml-streak { left: var(--col-x); }

/* ── Settings: on the column, without "Your things" ───────────── */
body[data-appbar][data-layout="c"] #settings-body { padding-left: var(--col-x); padding-right: max(16px, calc((100% - var(--col-w)) / 2)); }

/* ── Reports: wide ─────────────────────────────────────────────── */
body[data-appbar][data-layout="c"] #items-list,
body[data-appbar][data-layout="c"] #burn-list,
body[data-appbar][data-layout="c"] #status-body { padding-left: var(--col-x); padding-right: max(16px, calc((100% - var(--col-w)) / 2)); }
body[data-appbar] .stp { max-width: none; }
/* Saved: cards in as many columns as fit. */
body[data-appbar] #items-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-content: start; align-items: start; gap: 12px; }
body[data-appbar] #items-list > :not(.tac-card) { grid-column: 1 / -1; }

/* "Still there?" under the top row, in sentence case. */
body[data-appbar] .idle-warn { top: 72px; }
body[data-appbar] .idle-warn__title, body[data-appbar] .idle-warn__msg, body[data-appbar] .idle-warn .tac-btn { text-transform: none; letter-spacing: 0; }