/* The browser kernel's styles: the shared kit every module and layout uses (tokens, type,
   buttons: docs/design/portal-ui.md UI-50..58), the boot screen, the update notice, the
   kernel's own pages, and the fallback layout used while no layout module is admitted. Every
   token has a light and a dark value (UI-51). It is a static file any caller may fetch, with the
   font beside it, so the server's own pages (the sign-in page) link it too (BRW-46). */

/* Saira (UI-54; SIL Open Font License, fonts/Saira-OFL.txt): one variable font, two subsets. */
@font-face {
  font-family: Saira;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/saira-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Saira;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/saira-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #F5F6F7; --surface: #FFFFFF; --surface-2: #F0F1F3; --line: #E2E5E9;
  --text: #1E2227; --text-2: #5A616B;
  --brand: #F26A1B; --on-brand: #1E2227; --brand-text: #A8470B; --brand-soft: #FDEBDF;
  --ok: #1F7A45; --ok-soft: #E3F3E9; --warn: #8A5A00; --warn-soft: #FBF0D9;
  --bad: #B42318; --bad-soft: #FCE8E6; --info: #1D5FA6; --info-soft: #E4EEF9;
  --shadow: 0 1px 2px rgba(20, 23, 27, .06), 0 4px 12px rgba(20, 23, 27, .04);
  --logo-ink: #1E2227;
  /* The layout's logo (portal-ui UI-72, instance.md INS-31): the side bar's wide logo height, and
     which logo the phone top bar shows (display values: the wide one, not the square mark). An
     instance's branding.css overrides them. */
  --logo-wide-height: 40px; --logo-phone-wide: block; --logo-phone-square: none;
  /* Letter icons of accounts without a photo (UI-65): white text reaches 4.5:1 on each. */
  --avatar-1: #1D5FA6; --avatar-2: #0F766E; --avatar-3: #2E7D32; --avatar-4: #6D4AB0;
  --avatar-5: #A23B72; --avatar-6: #3949AB; --avatar-7: #4B5563; --avatar-8: #7A5C12; --on-avatar: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417; --surface: #1B1E22; --surface-2: #24282D; --line: #30353C;
    --text: #ECEEF0; --text-2: #9EA5AE;
    --brand-text: #FF8A47; --brand-soft: #3A2416;
    --ok: #4CC27E; --ok-soft: #173326; --warn: #E8B44C; --warn-soft: #352A12;
    --bad: #F07167; --bad-soft: #3A1C1A; --info: #6AA7EC; --info-soft: #172A40;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5); --logo-ink: #FFFFFF;
    --avatar-1: #2C6CB0; --avatar-2: #13786F; --avatar-3: #2F7A3A; --avatar-4: #7452B5;
    --avatar-5: #A63E77; --avatar-6: #4655B3; --avatar-7: #535C69; --avatar-8: #7D6017; --on-avatar: #FFFFFF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121417; --surface: #1B1E22; --surface-2: #24282D; --line: #30353C;
  --text: #ECEEF0; --text-2: #9EA5AE;
  --brand-text: #FF8A47; --brand-soft: #3A2416;
  --ok: #4CC27E; --ok-soft: #173326; --warn: #E8B44C; --warn-soft: #352A12;
  --bad: #F07167; --bad-soft: #3A1C1A; --info: #6AA7EC; --info-soft: #172A40;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5); --logo-ink: #FFFFFF;
  --avatar-1: #2C6CB0; --avatar-2: #13786F; --avatar-3: #2F7A3A; --avatar-4: #7452B5;
  --avatar-5: #A63E77; --avatar-6: #4655B3; --avatar-7: #535C69; --avatar-8: #7D6017; --on-avatar: #FFFFFF;
  color-scheme: dark;
}

/* Type (UI-54, UI-55) */
html { font-family: Saira, system-ui, sans-serif; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); }
h1 { font-size: 28px; font-weight: 600; line-height: 1.2; margin: 0 0 24px; }
h2 { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
h3 { font-size: 16px; font-weight: 600; margin: 16px 0 8px; }
/* The router moves focus to the page's heading for screen readers; no ring for that. */
h1:focus { outline: none; }
a { color: var(--brand-text); }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
kbd { font: inherit; }
.bq-small { font-size: 13px; font-weight: 500; }
.bq-overline { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.bq-muted, .bq-empty { color: var(--text-2); }
.bq-grow { flex: 1; min-width: 0; }
.bq-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Text fields on touch (UI-79): where the primary pointer is coarse, every text-entry field is at
   least 16 px, or iOS Safari zooms the page into it on focus. !important so a module's own smaller
   size (a 14 px search box) never wins by accident; :where() so a module that wants a larger field
   on touch wins with an !important of its own, whatever its selector. 1em: a larger text the field
   inherits stays. A fine pointer (desktop) is left as it was. */
@media (pointer: coarse) {
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"],
      [type="submit"], [type="reset"], [type="image"], [type="hidden"]), textarea, select, [contenteditable]:not([contenteditable="false"])) {
    font-size: max(16px, 1em) !important;
  }
}

/* Buttons (UI-53, UI-57, UI-58). A bare button is secondary; one primary per view. */
button { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; min-height: 44px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); }
button:hover:not(:disabled) { background: var(--surface-2); }
button:disabled { opacity: .5; cursor: default; }
.bq-btn { display: inline-flex; align-items: center; gap: 8px; }
.bq-btn-primary, .bq-btn-primary:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.bq-btn-small { min-height: 32px; padding: 0 10px; font-size: 13px; }
.bq-icon-btn { width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text-2); display: inline-grid; place-items: center; flex: none; }
.bq-link { min-height: 0; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; text-decoration: underline; }
.bq-link:hover:not(:disabled) { background: none; color: var(--text); }
.bq-chip { min-height: 32px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid transparent; }
.bq-chip[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand); }
.bq-chip-static { display: inline-grid; place-items: center; }
@media (min-width: 1200px) {
  button { min-height: 36px; }
  .bq-icon-btn { width: 36px; min-height: 36px; }
}

/* A picture per theme (the instance's logos, BRW-56): the page shows the light or the dark one,
   following a chosen theme ([data-theme]) or else the device's, as the tokens do; a theme change
   swaps them without a reload. */
.bq-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bq-on-light { display: none; }
  :root:not([data-theme="light"]) .bq-on-dark { display: revert; }
}
:root[data-theme="dark"] .bq-on-light { display: none; }
:root[data-theme="dark"] .bq-on-dark { display: revert; }

/* Boot screen, drawn by index.html before .NET runs: the instance's square mark */
.bq-boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; }
.bq-boot-mark { display: block; height: 56px; }
.bq-boot-mark img { height: 100%; width: auto; }
#bq-boot-status { color: var(--text-2); margin: 0; }


/* Update notice */
.bq-update { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex: none;
  padding: 8px 24px; background: var(--info-soft); color: var(--text); border-bottom: 1px solid var(--line); }

/* Pages */
.bq-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 0 0 20px; }
.bq-panel h2 { font-size: 16px; }
.bq-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.bq-facts dt { color: var(--text-2); }
.bq-facts dd { margin: 0; overflow-wrap: anywhere; }
.bq-failure { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 12px; padding: 12px 16px; }

/* The app's frame: the update notice above, the layout filling the rest */
.bq-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.bq-app > .bq-update { flex: none; }
.bq-app-body { flex: 1; min-height: 0; overflow: auto; }

/* Fallback layout: no layout module admitted */
.bq-fallback { min-height: 100%; display: flex; flex-direction: column; background: var(--bg); }
.bq-fallback-page { flex: 1; padding: 24px; }
.bq-fallback-footer { padding: 12px 24px; color: var(--text-2); border-top: 1px solid var(--line); }