/* app.css: the PlatAtlas app pages (the inbox, the steward's page, the hosted inbox at /<org>/inbox/).
 *
 * Load order on an app page: /brand/fonts/fonts.css, /design-tokens.css, /brand/site.css, /brand/app.css, then the
 * page's own stylesheet (record-web's <style>, lifted into inbox/queue.css for the hosted inbox). The app uses the
 * site's components as they are (.site-nav, .chip, .grid60, .verdict, .icon) and this file only makes them app-sized:
 * dense, full width, no marketing measure. Every colour is a --pa-* token, so data-pa-auto-theme flips it too.
 *
 * A person's own look (queue.js applyTaste, /api/me/taste) sets the page's --bg/--panel/--ink/... variables inline on
 * <html>; the page stylesheet reads those variables, so a chosen look always wins over these defaults.
 *
 * Components: .app (body), .app-nav (on .site-nav), .app-record, .me, .chip in the app, .check-grid (the steward's
 * check, drawn like the site's 60-cell grid), .demo-note (the sample inbox's banner).
 */

/* ---------- the app body: the site's type, the app's size ---------- */
body.app { font-size: 15px; line-height: 1.45; }
.app p { max-width: none; }
.app h1, .app h2 { max-width: none; letter-spacing: 0; }
.app :focus-visible { outline: 2px solid var(--pa-accent-deep, #8c3a2c); outline-offset: 2px; }

/* ---------- the app bar: the site's nav, full width and shorter ---------- */
.app-nav { height: 48px; flex: none; }
.app-nav .wrap { max-width: none; padding: 0 16px; }
.app-nav .mark { font-size: 19px; gap: 8px; min-width: 0; }
.app-nav .mark img { width: 22px; height: 22px; }
/* The record or playbook's name beside the mark, as the page names it. */
.app-nav .app-record { font: 400 14px/1.2 var(--pa-font-sans, "IBM Plex Sans", system-ui, sans-serif); color: var(--pa-ink-faint, #655d4f);
  margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--pa-rule, #c4b591); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }
.app-nav .app-record:empty { display: none; }
.app-nav nav { gap: var(--pa-s4, 16px); }
.app-nav nav a[aria-current="page"] { color: var(--pa-ink, #1a1611); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pa-accent-deep, #8c3a2c); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.app-nav [hidden] { display: none !important; }
.app-nav .me { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pa-ink-2, #4a4239); padding-left: var(--pa-s4, 16px); border-left: 1px solid var(--pa-rule, #c4b591); }
.app-nav .me:empty { display: none; }
.app-nav .me button {
  font: 500 13px/1.2 var(--pa-font-sans, "IBM Plex Sans", system-ui, sans-serif); color: var(--pa-ink, #1a1611); background: transparent;
  border: 1px solid var(--pa-ink-2, #4a4239); border-radius: 2px; padding: 4px 10px; cursor: pointer;
}
.app-nav .me button:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .app-nav { height: auto; }
  .app-nav .me { margin-left: auto; padding-left: 0; border-left: 0; }
  .app-nav .app-record { max-width: 22ch; }
}

/* ---------- provenance chips, app-sized (meaning and colours are the site's) ---------- */
.app .chip { font-size: 10.5px; padding: 1px 6px; margin-left: 4px; vertical-align: 0.08em; }
.app .chip.inferred { padding: 0.5px 5.5px; }
.app .chips .chip { margin-left: 0; }

/* ---------- the steward's check, as the site's 60-cell grid ---------- */
.check-grid { margin: var(--pa-s3, 12px) 0 var(--pa-s3, 12px); }
.check-grid .grid60-label { font-size: 14px; }
.check-grid .grid60-result { font-size: 14px; }
.check-grid .verdict { font-size: 14px; }

/* ---------- the sample inbox's banner (demo/try only) ---------- */
.demo-note { flex: none; background: var(--pa-ink, #1a1611); color: var(--pa-paper, #ede4ce); padding: 8px 16px; font: 500 14px/1.4 var(--pa-font-sans, "IBM Plex Sans", system-ui, sans-serif); text-align: center; }
.demo-note a { color: var(--pa-paper, #ede4ce); }
.demo-note .chip.fictional { margin: 0 6px 0 0; }