/* The page size (#313): the page content, right of the sidebar and under
   the top bar, is drawn at the reader's size; `ui/header_size.py` sets the
   variable on the root element. The zoom is on the region the container
   queries measure (`content_controls.css`), so a page at 150% lays out as
   in a narrower window: on the region inside it, "On this page" ran 2px
   past the edge. */
.aucra-region {
  zoom: var(--aucra-interface, 1);
}
/* On a phone at most 120%, so the column stays 320px wide at 390px, the
   narrowest the pages are built for (WCAG 1.4.10); at 150% a long word ran
   off the side. */
@media (max-width: 479px) {
  .aucra-region {
    zoom: min(var(--aucra-interface, 1), 1.2);
  }
}

/* The text size (#313, step 2): every fixed text size in the sheets reads
   --aucra-text-scale, and only the page content sets it, from the reader's
   choice on the root element; the sidebar, the top bar, the assistant, a
   dialog and the threat model diagram's words (`canvas.css`) read the
   fallback 1. A size is worked out where it is declared, so the content
   restates the body's 14px, and the Quasar controls the pages draw get their
   sizes on the scale here. These weigh nothing (`:where`), so any rule of
   the app's wins over them, and outside a layer they win over Quasar's. */
.aucra-region {
  --aucra-text-scale: var(--aucra-text, 1);
  font-size: calc(14px * var(--aucra-text-scale));
  /* Only a word longer than its whole line breaks, so where every word fits
     nothing moves: at 150% on a phone "decommissioning" ran 72px past the
     window and "description" out of its cell. */
  overflow-wrap: break-word;
}
:where(.aucra-region) :where(.q-btn, .q-field, .q-tab__label, .q-uploader__title) {
  font-size: calc(14px * var(--aucra-text-scale, 1));
}
:where(.aucra-region) :where(.q-field__label) {
  font-size: calc(16px * var(--aucra-text-scale, 1));
}
:where(.aucra-region) :where(.q-field__bottom, .q-uploader__subtitle) {
  font-size: calc(12px * var(--aucra-text-scale, 1));
}
:where(.aucra-region) :where(.text-sm) {
  font-size: calc(0.875rem * var(--aucra-text-scale, 1));
}
:where(.aucra-region) :where(.text-xs) {
  font-size: calc(0.75rem * var(--aucra-text-scale, 1));
}

/* The top bar's three buttons: smaller, the size (back to 100%), larger. */
.aucra-size {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.q-btn.aucra-size-btn {
  height: 36px;
  min-height: 36px;
  min-width: 32px;
  padding: 0 4px;
  color: var(--chrome-ink);
}
.q-btn.aucra-size-reset {
  min-width: 52px;
  font-variant-numeric: tabular-nums;
  font-size: calc(13px * var(--aucra-text-scale, 1));
  font-weight: var(--weight-bold);
}
.q-btn.aucra-size-btn:hover {
  background: var(--chrome-wash);
}
.q-btn.aucra-size-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.aucra-size-btn .q-focus-helper {
  display: none;
}
/* Under 880px the bar has no room for them (measured at 768px: 82px over);
   Settings still has the choice there. */
@media (max-width: 879px) {
  .aucra-size {
    display: none;
  }
}

/* Settings' preview (`pages/settings_size.py`): a sample of a page's pieces
   in a frame of its own, drawn at the chosen size before Apply, which takes
   its own width. */
.q-btn.aucra-size-apply {
  align-self: flex-start;
}
.aucra-size-preview {
  /* Restated here, so the sample reads the scale Settings sets on it. */
  font-size: calc(14px * var(--aucra-text-scale, 1));
}
.aucra-size-frame {
  overflow: hidden;
  padding: var(--space-4);
  border: 1px dashed var(--line-control);
  border-radius: 8px;
  background: var(--page);
}
.aucra-size-sample {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 460px;
}
.aucra-size-sample-box {
  padding: 8px 12px;
  border: 1px solid var(--line-control);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: calc(14px * var(--aucra-text-scale, 1));
}
.aucra-size-sample-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.aucra-size-sample-button {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: calc(13px * var(--aucra-text-scale, 1));
  font-weight: var(--weight-bold);
}
.aucra-size-sample-table {
  border-collapse: collapse;
  background: var(--panel);
  font-size: calc(13px * var(--aucra-text-scale, 1));
}
.aucra-size-sample-table th,
.aucra-size-sample-table td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-align: start;
  color: var(--text);
}
.aucra-size-sample-table th {
  background: var(--wash-head);
  font-weight: var(--weight-bold);
}