/* The workspace: the home page once someone is working (owner, 2026-10-17).
 *
 * html.ws is set by setWorkspace in index.html while a batch, Forwarded mail
 * or Account is open. The site's header and footer step aside, the app's
 * navigation runs down the left, and the review fills the window: the page on
 * the left, the fields on the right, the buttons along the bottom. The
 * navigation narrows to its icons (html.ws-collapsed, Ctrl+B), and on a phone
 * it is a bar across the top with a menu.
 *
 * Also here, because they arrived with it: the fields in sections that fold
 * away, and the page viewer that zooms in place. Colours are the page's own
 * tokens, so dark mode needs nothing of its own. */

/* A link straight to a batch or Account: the header would show for a moment
   and then make way, and everything would jump left. */
html.to-view .topbar { visibility: hidden; }

/* ── the frame ─────────────────────────────────────────── */
html.ws { --an-w: 232px; }
html.ws.ws-collapsed { --an-w: 64px; }
html.ws body { padding-left: var(--an-w); }
html.ws .topbar, html.ws .site-footer, html.ws .sky { display: none; }
html.ws main.wrap { max-width: none; padding: 12px 16px; }
html.ws #results { padding-top: 0; }
/* Mail waiting is counted on Forwarded mail in the navigation instead. */
html.ws #fwdBanner { display: none; }
html.ws .acctpage { padding-top: 12px; }

/* ── the navigation ────────────────────────────────────── */
.appnav { display: none; }
html.ws .appnav:not([hidden]) {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 30; width: var(--an-w);
  display: flex; flex-direction: column; gap: 12px; padding: 12px 10px;
  background: var(--paper-2); border-right: 1px solid var(--hair);
}
@media (prefers-reduced-motion: no-preference) {
  html.ws .appnav, html.ws body { transition: width .2s ease, padding-left .2s ease; }
}
.anhead { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; }
.anhead .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.anhead .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.anmenu { display: none; margin-left: auto; color: var(--ink); }
/* Collapse, at the top of the navigation beside the name (owner, 2026-10-17). */
.anhead .an-collapse {
  margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--sub); cursor: pointer;
}
.anhead .an-collapse:hover { color: var(--ink); border-color: var(--hair); }
.anhead .an-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.anhead .an-collapse .anlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.anpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.anmain { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; }
.anfoot { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--hair); }

/* The same rows as the Account page's sections, so the two read as one app. */
.anitem {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: none;
  color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; white-space: nowrap;
}
.anitem svg { flex: none; color: var(--sub); }
.anitem:hover { border-color: var(--hair); }
.anitem:focus-visible, .anrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Where you are is a glass tab, as on the Account page (sky.css). */
.anitem[aria-current="page"] {
  font-weight: 580; background: var(--glass-btn); border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(26, 28, 32, .05);
}
.anitem[aria-current="page"] svg { color: var(--ink); }
.anitem[hidden], .anmeter[hidden] { display: none; }
.anlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.anbadge {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 650; line-height: 1;
  background: var(--warn); color: var(--warn-bg); font-variant-numeric: tabular-nums;
}
/* Mail waiting is not a problem, so it is not red. */
.anbadge.calm { background: var(--hair); color: var(--ink); }
.an-signup { color: var(--btn-ink); background: var(--btn); font-weight: 560; }
.an-signup svg { color: var(--btn-ink); }
.an-signup:hover { background: var(--btn-hover); border-color: transparent; }
.ancap { margin: 14px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.anrecent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.anrow {
  display: block; width: 100%; padding: 6px 10px 6px 37px; border: 1px solid transparent; border-radius: 7px;
  background: none; color: var(--sub); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anrow:hover { color: var(--ink); border-color: var(--hair); }
.anrow[aria-current="page"] { color: var(--ink); font-weight: 560; }
.anmeter { padding: 6px 10px; }
.anmeter:empty { display: none; }

/* Narrowed to icons. The words stay for screen readers; each row's title says
   what it is on hover. Only on a screen wide enough to have the sidebar. */
@media (min-width: 761px) {
  html.ws-collapsed:not(.ws-peek) .appnav .anlabel {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html.ws-collapsed:not(.ws-peek) .anitem { justify-content: center; padding: 9px 0; }
  html.ws-collapsed:not(.ws-peek) .anhead { justify-content: center; padding: 0; }
  /* Narrowed, the head is just the button that opens it again. */
  html.ws-collapsed:not(.ws-peek) .anhead .brand,
  html.ws-collapsed:not(.ws-peek) .anrecent,
  html.ws-collapsed:not(.ws-peek) .anmeter { display: none; }
  html.ws-collapsed:not(.ws-peek) .anhead .an-collapse { margin-left: 0; }
  html.ws-collapsed:not(.ws-peek) .anbadge {
    position: absolute; top: 1px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10.5px;
  }
  html.ws-collapsed .an-collapse svg { transform: scaleX(-1); }
  /* Opened by the pointer: full width, over the page, which stays where it is. */
  html.ws.ws-collapsed.ws-peek .appnav:not([hidden]) { width: 232px; box-shadow: var(--shadow-lg); }
}

/* On a phone: a bar across the top, and the same rows in a menu under it. */
@media (max-width: 760px) {
  html.ws body { padding-left: 0; }
  html.ws .appnav:not([hidden]) {
    position: sticky; top: 0; bottom: auto; width: auto; flex-direction: row; align-items: center;
    padding: 6px 12px 6px 16px; border-right: none; border-bottom: 1px solid var(--hair);
  }
  html.ws .appnav .anhead { flex: 1; padding: 0; }
  .anmenu { display: grid; width: 44px; height: 44px; }
  .anpanel {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 57px); overflow-y: auto; padding: 8px 12px 14px;
    background: var(--paper-2); border-bottom: 1px solid var(--hair); box-shadow: var(--shadow-lg);
  }
  .appnav.open .anpanel { display: flex; }
  .anmain { overflow: visible; }
  .anitem { min-height: 44px; }
  .anrow { min-height: 40px; }
  .an-collapse { display: none; }
  html.ws main.wrap { padding: 10px 12px; }
}

/* ── the review, filling the window ────────────────────── */
/* The batch panel runs to the bottom of the window, and inside it the rail,
   the page and the fields each scroll on their own. The buttons under a
   document stay in view however long its fields are. The export panel is
   below, a scroll away. */
@media (min-width: 841px) {
  html.ws #results .batch {
    display: flex; flex-direction: column; min-height: 520px;
    height: calc(100vh - 24px); height: calc(100dvh - 24px);
  }
  /* The header, the tabs and the tool strip keep their full height; only the
     documents give way. Allowed to shrink, the strip was squeezed under the
     document below it. */
  html.ws #results .batch > :not(#docarea) { flex: none; }
  /* The list and the export panel share the window (owner, 2026-10-19): with
     the list at full height, Download and Preview sat a scroll below it and
     went unseen. The list scrolls in what is left; the export panel, and its
     preview when opened, stay in view under it. A document open hides the
     export panel (.docmode), and the batch has the window again. */
  html.ws #results:not(.docmode) {
    display: flex; flex-direction: column;
    height: calc(100vh - 24px); height: calc(100dvh - 24px);
  }
  html.ws #results:not(.docmode) .batch { height: auto; flex: 1 1 auto; min-height: 320px; }
  html.ws #results:not(.docmode) .exportp { flex: none; max-height: 55vh; max-height: 55dvh; overflow-y: auto; margin-bottom: 0; }
  html.ws #docarea { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  html.ws #docarea[data-mode="doc"] { overflow: hidden; }
  html.ws .review { height: 100%; }
  html.ws .rail { max-height: none; height: 100%; }
  html.ws .docpane { max-height: none; height: 100%; padding: 0; overflow: hidden; }
  html.ws .docpane .doc { height: 100%; display: flex; flex-direction: column; }
  html.ws .docpane .doc > .hd { flex: none; }
  html.ws .docpane .doc > .body {
    /* The page about a third, the fields the rest (owner, 2026-10-17): the
       page fits its pane whole and is zoomed, the fields are what is worked. */
    flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    border-top: 1px solid var(--hair);
  }
  html.ws .docpane .preview {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    border-right: 1px solid var(--hair);
  }
  html.ws .docpane .preview > .viewer:not(.vfull) { flex: 1; min-height: 0; }
  html.ws .docpane .preview > .viewer:not(.vfull) .vstage { flex: 1; min-height: 0; max-height: none; scrollbar-gutter: stable; }
  html.ws .docpane .preview > .sheetview, html.ws .docpane .preview > pre.emailtext { flex: 1; max-height: none; }
  html.ws .docpane .fields { min-height: 0; overflow-y: auto; }
  html.ws .docpane .doc > .foot { flex: none; padding: 10px 16px 12px; border-top: 1px solid var(--hair); }
  html.ws .docpane .doc > .foot .save { margin-top: 0; }
  /* The list view: the same document and fields, a card after a card. */
  html.ws .stack .body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ── the fields, in sections ───────────────────────────── */
/* The grid's columns follow the width of the fields column, not the window,
   now that the column is half the window rather than two thirds of it. */
.fields { container: fields / inline-size; }
.flags:empty { display: none; }
.fsec + .fsec { border-top: 1px solid var(--hair); }
.fsec-h { margin: 0; font: inherit; }
.fsec-hd {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 2px;
  background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.fsec-hd:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.fsec-hd .chev { flex: none; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .fsec-hd .chev { transition: transform .15s ease; } }
.fsec.folded .fsec-hd .chev { transform: rotate(-90deg); }
.fsec-n { margin-left: auto; font-size: 12px; font-weight: 550; white-space: nowrap; }
.fsec-n:not(:empty) { padding: 1px 9px; border-radius: 20px; border: 1px solid; }
.fsec-n.error { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.fsec-n.warn { color: var(--caution); background: var(--caution-bg); border-color: var(--caution-line); }
.fsec-bd { padding: 2px 0 14px; }
.fsec.folded .fsec-bd { display: none; }
.fsec-scroll { overflow-x: auto; }
.fsec-bd table.items { margin-top: 0; }
.fsec-bd > .fflags { margin: 0 0 10px; }

/* A flag under the box it is about. The cell takes two columns so the
   sentence has room to be read. */
.fflags { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.grid > .f.hasflag { grid-column: span 2; }
@container fields (max-width: 640px) {
  .fsec .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container fields (max-width: 380px) {
  .fsec .grid { grid-template-columns: minmax(0, 1fr); }
  .fsec .grid > .f.hasflag { grid-column: auto; }
}
@media (max-width: 560px) { .grid > .f.hasflag { grid-column: auto; } }
/* Number and order, then the three dates kept narrow and together. A date box
   with its picker icon needs no more than 140px. When the column is too
   narrow for one line, number and order share the first row and the dates
   the second. A flagged field keeps its own width so the dates stay in a row. */
.fsec[data-sec="document"] .grid { grid-template-columns: repeat(2, minmax(120px, 1fr)) repeat(3, 140px); }
.fsec[data-sec="document"] .grid > .f.hasflag { grid-column: auto; }
@container fields (max-width: 720px) {
  .fsec[data-sec="document"] .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fsec[data-sec="document"] .grid > .f, .fsec[data-sec="document"] .grid > .f.hasflag { grid-column: span 2; }
  .fsec[data-sec="document"] .grid > .f:has([data-k="document_number"]),
  .fsec[data-sec="document"] .grid > .f:has([data-k="purchase_order"]) { grid-column: span 3; }
}

/* ── the page viewer ───────────────────────────────────── */
/* min-width: 0, or a zoomed page would widen its column, and the wider
   column would size the page wider again. */
.doc > .body > .preview, .doc > .body > .fields { min-width: 0; }
.viewer { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.viewer .vstage { overflow: auto; max-height: 78vh; border-radius: 7px; }
.viewer .vpaper { position: relative; margin: 0 auto; }
.viewer .vpaper.laid > * { position: absolute; left: 50%; top: 50%; max-width: none; }
.preview .viewer .vpaper img { width: 100%; }
.preview .viewer .vpaper.laid img, .viewer .vpaper.laid .pdfpage { width: auto; }
.viewer .vpaper img { display: block; user-select: none; -webkit-user-drag: none; }
.viewer .vstage.can-pan { cursor: grab; }
.viewer .vstage.panning { cursor: grabbing; user-select: none; }
.vtools {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; color: var(--sub);
}
.vtools .icon-btn { width: 30px; height: 30px; color: var(--sub); }
.vtools .icon-btn:hover { color: var(--ink); }
.vtools .icon-btn:focus-visible, .vpct:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vpct {
  min-width: 56px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--hair);
  background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.vpct:hover { border-color: var(--faint); }
.vtools .pdfnav { margin: 0 6px; }
.vtools .pdfnav[hidden] { display: none; }
.pdfview.viewer .pdfpage { margin: 0; }
.pdfview.viewer.failed .vstage, .pdfview.viewer.failed .vtools { display: none; }

/* Full screen inside the page: over everything, page tools still under it. */
.viewer.vfull {
  position: fixed; inset: 0; z-index: 85; padding: 16px; background: var(--paper-2);
}
.viewer.vfull .vstage { flex: 1; min-height: 0; max-height: none; }
html.vfull-open { overflow: hidden; }
/* The panels rise in with a transform, and an animation that holds a
   transform keeps anything fixed inside it to the panel instead of the window. */
html.vfull-open #results > * { animation: none; }

@media (max-width: 560px) {
  .vtools .icon-btn, .vpct { width: 40px; height: 40px; }
  .vpct { width: auto; min-width: 60px; }
  .viewer .vstage { max-height: 70vh; }
}

/* ── the honey glass button ───────────────────────────── */
/* The workspace hides the sky, so a glass button there has no light to show
   through and reads as plain white. The one that moves a bill on, Send to
   MYOB or Xero in place of Approve, carries the sky's honey inside the glass
   itself (owner, 2026-10-18). */
html.ws .btn.primary.honey,
html.ws .btn.primary.honey:hover {
  background:
    radial-gradient(120% 160% at 15% 120%, var(--sky-1), transparent 62%),
    radial-gradient(110% 150% at 95% -30%, var(--sky-2), transparent 64%),
    radial-gradient(90% 120% at 55% 55%, var(--sky-3), transparent 72%),
    var(--lens-tint);
  font-weight: 600;
}
html.ws .btn.primary.honey:hover { filter: brightness(.97) saturate(1.1); }