/*
  Workstride product screens
  ==========================

  HTML recreations of the Workstride product, drawn from the product's own
  stylesheet (resources/css/app.css) and Blade views. Load this file after
  the site stylesheet. Every class starts with "app-" or sits under .app, so
  nothing here styles the marketing site and the site's styles stop at the
  frame.

  Embedding (see SCREENS.md for the full contract)

    <figure class="app-frame" data-screen="my-work" data-status="built">
      <div class="app-window">
        <div class="app-chrome"> ... address with [data-brand-domain] ... </div>
        <div class="app" inert> ... the product UI ... </div>
      </div>
      <figcaption class="app-caption">One sentence for everyone.</figcaption>
    </figure>

  Scale. Every product pixel is one --app-u. The product sets body text at
  17px; screens default to 15px (--app-base) so a whole page fits a content
  column. Set --app-base on the figure (or any ancestor) to scale a screen:
  13px for dense thumbnails, 17px for true size. Layout reflows with
  container queries against the screen's own width, the way the product
  reflows with the viewport.

  Brand contract. Screens read the tenant colour only from these custom
  properties, normally set on :root by the brand engine. Without them the
  screens show the sample provider, Northfold Employment (#1D3557, white ink):
    --brand            tab and primary button fill
    --brand-ink        text on --brand
    --brand-line       thin lines on white: card top rule, header bar,
                       active navigation edge, active tab, report bars
    --brand-hover      primary button hover fill
    --brand-hover-ink  text on --brand-hover
  Text that the engine rewrites carries [data-brand-name] (the provider's
  name), [data-brand-domain] (a host name, with a {slug} template) or
  [data-brand-sender] (the SMS sender id).

  Accessibility notes. Product screens are static pictures: the UI sits in
  an inert region and the figcaption describes it. Two product tokens are
  adjusted so text and control edges meet WCAG 2.2 AA inside the pictures:
  ink-muted is #5f635e (product #6f736e) and form control borders are
  #8e928c (product #b8b8b1). Everything else mirrors the product.
*/

/* ------------------------------------------------------------------ */
/* Frame: the window or device a screen sits in                        */
/* ------------------------------------------------------------------ */

.app-frame,
.app {
  --app-u: calc(var(--app-base, 15px) / 17);
  --app-s1: calc(1 * var(--app-u));
  --app-s2: calc(2 * var(--app-u));
  --app-s3: calc(3 * var(--app-u));
  --app-s4: calc(4 * var(--app-u));
  --app-s6: calc(6 * var(--app-u));
  --app-s8: calc(8 * var(--app-u));
  --app-s10: calc(10 * var(--app-u));
  --app-s12: calc(12 * var(--app-u));
  --app-s14: calc(14 * var(--app-u));
  --app-s16: calc(16 * var(--app-u));
  --app-s18: calc(18 * var(--app-u));
  --app-s20: calc(20 * var(--app-u));
  --app-s24: calc(24 * var(--app-u));
  --app-s32: calc(32 * var(--app-u));
  --app-s40: calc(40 * var(--app-u));
  --app-s48: calc(48 * var(--app-u));
  --app-line: max(2px, calc(3 * var(--app-u)));
  --app-t-xs: calc(13 * var(--app-u));
  --app-t-sm: calc(15 * var(--app-u));
  --app-t-base: calc(17 * var(--app-u));
  --app-t-lg: calc(20 * var(--app-u));
  --app-t-xl: calc(24 * var(--app-u));
  --app-t-2xl: calc(30 * var(--app-u));
  --app-t-3xl: calc(38 * var(--app-u));
  --app-t-4xl: calc(36 * var(--app-u));
}

.app-frame {
  --app-frame-line: #b4bbc2;
  --app-frame-radius: 12px;
  --app-frame-shadow: 0 1px 2px rgb(21 24 28 / 0.06), 0 18px 40px -24px rgb(21 24 28 / 0.35);
  --app-chrome-bg: #e9ecee;
  --app-chrome-ink: #3d434a;
  --app-caption-ink: #3d434a;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--app-base, 15px);
  text-align: left;
}

.app-frame *,
.app-frame *::before,
.app-frame *::after {
  box-sizing: border-box;
}

.app-window {
  position: relative;
  overflow: hidden;
  background: #f2f2ef;
  border: 1px solid var(--app-frame-line);
  border-radius: var(--app-frame-radius);
  box-shadow: var(--app-frame-shadow);
}

.app-chrome {
  display: flex;
  align-items: center;
  gap: var(--app-s12);
  min-height: var(--app-s40);
  padding: var(--app-s6) var(--app-s12);
  background: var(--app-chrome-bg);
  border-bottom: 1px solid var(--app-frame-line);
  color: var(--app-chrome-ink);
  font-family: "Atkinson Next", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--app-t-xs);
  line-height: 1.3;
}

.app-chrome-dots {
  display: inline-flex;
  flex: none;
  gap: var(--app-s6);
}

.app-chrome-dots span {
  width: var(--app-s10);
  height: var(--app-s10);
  border-radius: 50%;
  background: #c3c9ce;
}

.app-address {
  display: inline-flex;
  align-items: center;
  gap: var(--app-s6);
  min-width: 0;
  flex: 1 1 auto;
  max-width: calc(460 * var(--app-u));
  padding: var(--app-s4) var(--app-s12);
  background: #ffffff;
  border: 1px solid #d3d8dc;
  border-radius: 999px;
  color: #3d434a;
  white-space: nowrap;
  overflow: hidden;
}

.app-address svg {
  flex: none;
  width: var(--app-s12);
  height: var(--app-s12);
}

.app-address-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-address-path {
  color: #59606a;
}

.app-tag {
  flex: none;
  margin-left: auto;
  padding: var(--app-s2) var(--app-s8);
  border: 1px solid #aeb5bc;
  border-radius: 999px;
  background: #ffffff;
  color: #3d434a;
  font-weight: 700;
  white-space: nowrap;
}

.app-tag--planned {
  border-style: dashed;
  border-color: #59606a;
}

/* Two classes deep so page prose styles for figcaption do not reach it */
.app-frame > .app-caption {
  margin: 0.75rem 0 0;
  max-width: 48rem;
  color: var(--app-caption-ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Long pages cropped at the bottom edge of the window. --app-crop is in
   product pixels, so the cut scales with --app-base. */
.app-window {
  container: app-window / inline-size;
}

.app-frame--crop .app {
  max-height: calc(var(--app-crop, 960) * var(--app-u));
  overflow: hidden;
}

.app-frame--crop .app::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--app-s48);
  background: linear-gradient(rgb(242 242 239 / 0), #f2f2ef 85%);
  pointer-events: none;
}

/* In a narrow window the page reflows much longer. Tall screens are cut at
   --app-crop-narrow (product pixels, default 1800): --tall below 40em of
   window width, --tall-phone below 30em only. */
@container app-window (max-width: 39.99em) {
  .app-frame--tall .app {
    max-height: calc(var(--app-crop-narrow, 1800) * var(--app-u));
    overflow: hidden;
  }

  .app-frame--tall .app::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--app-s48);
    background: linear-gradient(rgb(242 242 239 / 0), #f2f2ef 85%);
    pointer-events: none;
  }
}

@container app-window (max-width: 29.99em) {
  .app-frame--tall-phone .app {
    max-height: calc(var(--app-crop-narrow, 1800) * var(--app-u));
    overflow: hidden;
  }

  .app-frame--tall-phone .app::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--app-s48);
    background: linear-gradient(rgb(242 242 239 / 0), #f2f2ef 85%);
    pointer-events: none;
  }
}

/* A second pane beside or under the window (page source, API answer) */
.app-split {
  display: grid;
  gap: var(--app-s16);
  align-items: start;
}

.app-split > * {
  min-width: 0;
}

@container app-split (min-width: 60em) {
  .app-split--wide {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .app-split--even {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.app-frame--split {
  container: app-split / inline-size;
}

.app-split--stack .app-source {
  max-width: calc(760 * var(--app-u));
}

.app-source {
  overflow: hidden;
  border: 1px solid #15181c;
  border-radius: var(--app-frame-radius, 12px);
  background: #15181c;
  color: #e8eaed;
  box-shadow: var(--app-frame-shadow);
}

.app-source-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-s8);
  padding: var(--app-s8) var(--app-s14);
  border-bottom: 1px solid #3d434a;
  color: #d6dade;
  font-family: "Atkinson Next", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--app-t-xs);
  font-weight: 700;
  line-height: 1.4;
}

.app-source-bar span + span {
  font-weight: 400;
  color: #c9ced3;
}

.app-source-code {
  margin: 0;
  padding: var(--app-s14) var(--app-s16) var(--app-s16);
  font-family: "Atkinson Mono", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--app-t-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  tab-size: 2;
  color: #e8eaed;
  background: transparent;
  border: 0;
}

.app-frame .app-source-code code {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.app-code-line {
  display: block;
  padding-left: calc((var(--app-in, 0) + 2) * 1ch);
  text-indent: -2ch;
}

.app-in-1 { --app-in: 2; }
.app-in-2 { --app-in: 4; }
.app-in-3 { --app-in: 6; }
.app-in-4 { --app-in: 8; }
.app-in-5 { --app-in: 10; }
.app-in-6 { --app-in: 12; }
.app-in-7 { --app-in: 14; }
.app-in-8 { --app-in: 16; }

.app-source-code .k { color: #9fd3ff; }
.app-source-code .s { color: #c8e6b0; }
.app-source-code .n { color: #ffd49a; }
.app-source-code .c { color: #aeb5bc; }

/* Phone: a device around the product */
.app-frame--phone .app-device {
  width: min(100%, calc(392 * var(--app-u)));
  margin-inline: auto;
  padding: var(--app-s10);
  border-radius: calc(52 * var(--app-u));
  background: #15181c;
  box-shadow: var(--app-frame-shadow);
}

.app-device-screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(42 * var(--app-u));
  background: #ffffff;
}

.app-device-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--app-s40);
  padding: 0 var(--app-s24) 0 calc(28 * var(--app-u));
  background: #ffffff;
  color: #15181c;
  font-family: "Atkinson Next", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--app-t-sm);
  font-weight: 700;
}

.app-device-island {
  width: calc(96 * var(--app-u));
  height: calc(26 * var(--app-u));
  border-radius: 999px;
  background: #15181c;
}

.app-device-signal {
  display: inline-flex;
  align-items: center;
  gap: var(--app-s4);
}

.app-device-signal svg {
  height: var(--app-s12);
  width: auto;
}

.app-device-bar {
  display: flex;
  justify-content: center;
  padding: var(--app-s10) var(--app-s14) var(--app-s24);
  background: #f2f2ef;
  border-top: 1px solid #d6d6d0;
  font-family: "Atkinson Next", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--app-t-xs);
}

.app-device-bar .app-address {
  flex: 0 1 auto;
  max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* The product chassis                                                 */
/* ------------------------------------------------------------------ */

.app {
  --app-ink: #1a1a1a;
  --app-ink-soft: #4d504c;
  --app-ink-muted: #5f635e;
  --app-paper: #ffffff;
  --app-field: #f2f2ef;
  --app-field-deep: #e8e8e3;
  --app-rule: #d6d6d0;
  --app-rule-strong: #b8b8b1;
  --app-control-line: #8e928c;
  --app-danger: #b42318;
  --app-danger-wash: #fdeceb;
  --app-warning: #8a5300;
  --app-warning-wash: #fff4e0;
  --app-ok: #146c43;
  --app-ok-wash: #e6f4ec;
  --app-radius-card: calc(10 * var(--app-u));
  --app-radius: calc(8 * var(--app-u));
  --app-brand: var(--brand, #1d3557);
  --app-brand-ink: var(--brand-ink, #ffffff);
  --app-brand-line: var(--brand-line, var(--brand, #1d3557));
  --app-brand-hover: var(--brand-hover, var(--brand, #0c2343));
  --app-brand-hover-ink: var(--brand-hover-ink, var(--brand-ink, #ffffff));
  --app-font: "Atkinson Next", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --app-mono: "Atkinson Mono", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  container: app / inline-size;
  display: block;
  position: relative;
  margin: 0;
  background: var(--app-field);
  color: var(--app-ink);
  font-family: var(--app-font);
  font-size: var(--app-t-base);
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(.app) :is(p, ul, ol, dl, dd, dt, figure, blockquote, pre, table, form, fieldset, legend) {
  margin: 0;
  padding: 0;
}

:where(.app) :is(ul, ol) {
  list-style: none;
}

:where(.app) fieldset {
  border: 0;
  min-width: 0;
}

:where(.app) a {
  color: inherit;
  text-decoration: none;
}

:where(.app) :is(b, strong) {
  font-weight: 700;
}

:where(.app) :is(button, input, select, textarea) {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

:where(.app) svg {
  display: inline-block;
  flex: none;
  max-width: none;
}

:where(.app) table {
  border-collapse: collapse;
  border-spacing: 0;
}

.app ::selection {
  background: color-mix(in srgb, var(--app-brand) 22%, white);
}

/* Visually hidden text (the product's sr-only) */
.app .app-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Shell: header with the brand tab, the brand bar, sidebar, main      */
/* ------------------------------------------------------------------ */

.app-header {
  background: var(--app-paper);
  border-bottom: 1px solid var(--app-rule);
}

.app-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--app-s16);
  padding: 0 var(--app-s16);
}

.app--portal .app-header-row {
  max-width: calc(768 * var(--app-u));
  margin-inline: auto;
}

.app-brand-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--app-s10);
  min-width: 0;
  max-width: 100%;
  min-height: calc(44 * var(--app-u));
  margin-top: var(--app-s12);
  padding: var(--app-s8) var(--app-s18);
  border-radius: var(--app-radius-card) var(--app-radius-card) 0 0;
  background: var(--app-brand);
  color: var(--app-brand-ink);
  font-size: var(--app-t-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.app-brand-tab svg {
  width: auto;
  height: var(--app-s24);
}

.app-brand-tab > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-header-tools {
  display: flex;
  align-items: center;
  gap: var(--app-s8);
  padding: var(--app-s12) 0;
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-header-user {
  display: none;
  color: var(--app-ink-soft);
  white-space: nowrap;
}

.app-brand-bar {
  height: var(--app-line);
  background: var(--app-brand-line);
}

.app-body {
  display: flex;
  flex-direction: column;
}

.app-sidebar {
  display: none;
}

.app-main {
  container: app-main / inline-size;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--app-s24) var(--app-s16);
}

.app-nav {
  display: block;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: var(--app-s10);
  padding: var(--app-s8) var(--app-s12);
  border-left: var(--app-line) solid transparent;
  border-radius: var(--app-radius);
  color: var(--app-ink-soft);
  font-size: var(--app-t-sm);
  font-weight: 700;
  line-height: 1.55;
}

.app-nav-link[aria-current="page"] {
  background: var(--app-paper);
  color: var(--app-ink);
  border-left-color: var(--app-brand-line);
}

.app-nav-heading {
  margin: var(--app-s20) 0 var(--app-s6);
  padding: 0 var(--app-s12);
  color: var(--app-ink-muted);
  font-size: var(--app-t-xs);
  font-weight: 700;
  line-height: 1.5;
}

@container app (min-width: 34em) {
  .app-header-row {
    padding: 0 var(--app-s24);
  }

  .app-header-user {
    display: inline;
  }

  .app-main {
    padding: var(--app-s32) var(--app-s24);
  }
}

@container app (min-width: 58em) {
  .app .app-btn.app-menu {
    display: none;
  }

  .app-body {
    flex-direction: row;
    align-items: stretch;
  }

  .app-sidebar {
    display: block;
    position: relative;
    flex: none;
    width: calc(240 * var(--app-u));
    padding: var(--app-s24) var(--app-s12);
    border-right: 1px solid var(--app-rule);
    contain: size;
    overflow: hidden;
  }

  .app-sidebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--app-s40);
    background: linear-gradient(rgb(242 242 239 / 0), var(--app-field));
  }

  .app-sidebar--end .app-nav {
    position: absolute;
    left: var(--app-s12);
    right: var(--app-s12);
    bottom: var(--app-s24);
  }

  .app-sidebar--end::after {
    top: 0;
    bottom: auto;
    background: linear-gradient(var(--app-field), rgb(242 242 239 / 0));
  }
}

/* Screens that show the main region only, for dense pages */
.app--nonav .app-sidebar {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Page header, flash, notices                                          */
/* ------------------------------------------------------------------ */

.app-crumb {
  margin-bottom: var(--app-s12);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--app-s16);
  margin-bottom: var(--app-s24);
}

.app-page-header-text {
  max-width: calc(608 * var(--app-u));
  min-width: 0;
}

.app-title {
  font-size: var(--app-t-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.app-desc {
  margin-top: var(--app-s4);
  color: var(--app-ink-soft);
  font-size: var(--app-t-base);
  line-height: 1.6;
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-s8);
}

.app-flash {
  margin-bottom: var(--app-s24);
  padding: var(--app-s14) var(--app-s16);
  border: 1px solid;
  border-radius: var(--app-radius);
  font-size: var(--app-t-sm);
  font-weight: 700;
  line-height: 1.55;
}

.app-flash--status {
  background: var(--app-ok-wash);
  border-color: color-mix(in srgb, var(--app-ok) 35%, white);
  color: var(--app-ok);
}

.app-flash--warning {
  background: var(--app-warning-wash);
  border-color: color-mix(in srgb, var(--app-warning) 35%, white);
  color: var(--app-warning);
}

.app-notice {
  display: flex;
  gap: var(--app-s12);
  padding: var(--app-s14) var(--app-s16);
  border: 1px solid;
  border-radius: var(--app-radius);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-notice--info {
  background: var(--app-field);
  border-color: var(--app-rule);
  color: var(--app-ink-soft);
}

.app-notice--danger {
  background: var(--app-danger-wash);
  border-color: color-mix(in srgb, var(--app-danger) 35%, white);
  color: var(--app-danger);
}

/* ------------------------------------------------------------------ */
/* The record card: a tab on the top-left edge of a white card         */
/* ------------------------------------------------------------------ */

.app-record {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.app-record-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--app-s10);
  max-width: 100%;
  min-height: calc(44 * var(--app-u));
  padding: var(--app-s8) var(--app-s18);
  border-radius: var(--app-radius-card) var(--app-radius-card) 0 0;
  background: var(--app-brand);
  color: var(--app-brand-ink);
  font-size: var(--app-t-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.app-record-body {
  width: 100%;
  min-width: 0;
  background: var(--app-paper);
  border: 1px solid var(--app-rule);
  border-top: var(--app-line) solid var(--app-brand-line);
  border-radius: 0 var(--app-radius-card) var(--app-radius-card) var(--app-radius-card);
}

.app-record--neutral .app-record-tab {
  background: var(--app-ink);
  color: var(--app-paper);
}

.app-record--neutral .app-record-body,
.app-record-body.app-record-body--neutral {
  border-top-color: var(--app-ink);
}

.app-pad {
  padding: var(--app-s20);
}

.app-pad-4 {
  padding: var(--app-s16);
}

.app-pad-3 {
  padding: var(--app-s12);
}

.app-pad-6 {
  padding: var(--app-s24);
}

@container app-main (min-width: 28em) {
  .app-pad {
    padding: var(--app-s24);
  }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.app .app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-s12);
  width: 100%;
  min-height: calc(52 * var(--app-u));
  padding: var(--app-s12) var(--app-s20);
  border: 1px solid var(--app-rule-strong);
  border-radius: var(--app-radius);
  background: var(--app-paper);
  color: var(--app-ink);
  font-size: var(--app-t-base);
  font-weight: 700;
  line-height: 1.2;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.app .app-btn:hover {
  background: var(--app-field);
  border-color: var(--app-ink-muted);
}

.app .app-btn--primary {
  background: var(--app-brand);
  border-color: var(--app-brand);
  color: var(--app-brand-ink);
}

.app .app-btn--primary:hover {
  background: var(--app-brand-hover);
  border-color: var(--app-brand-hover);
  color: var(--app-brand-hover-ink);
}

.app .app-btn--quiet {
  width: auto;
  min-height: calc(40 * var(--app-u));
  padding: var(--app-s6) var(--app-s14);
  border-color: transparent;
  background: transparent;
  font-size: var(--app-t-sm);
}

.app .app-btn--quiet:hover {
  background: var(--app-field);
  border-color: var(--app-rule-strong);
}

.app .app-btn--inline {
  width: auto;
}

.app .app-btn--danger {
  color: var(--app-danger);
  border-color: color-mix(in srgb, var(--app-danger) 45%, white);
}

.app .app-btn--danger:hover {
  background: var(--app-danger-wash);
  border-color: var(--app-danger);
}

.app .app-btn--icon {
  min-width: calc(40 * var(--app-u));
  padding-inline: var(--app-s10);
}

.app .app-btn--icon svg {
  width: var(--app-s14);
  height: var(--app-s14);
}

.app .app-btn:disabled,
.app .app-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

/* ------------------------------------------------------------------ */
/* Fields and controls                                                 */
/* ------------------------------------------------------------------ */

.app-label {
  display: block;
  margin-bottom: var(--app-s6);
  color: var(--app-ink);
  font-size: var(--app-t-sm);
  font-weight: 700;
  line-height: 1.55;
}

.app-help {
  margin-top: var(--app-s6);
  color: var(--app-ink-muted);
  font-size: var(--app-t-xs);
  line-height: 1.5;
}

.app-error {
  margin-top: var(--app-s6);
  color: var(--app-danger);
  font-size: var(--app-t-xs);
  font-weight: 700;
  line-height: 1.5;
}

.app .app-input,
.app .app-select,
.app .app-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: var(--app-s10) var(--app-s12);
  border: 1px solid var(--app-control-line);
  border-radius: var(--app-radius);
  background-color: var(--app-paper);
  color: var(--app-ink);
  font-size: var(--app-t-base);
  line-height: 1.4;
  box-shadow: none;
  appearance: none;
}

.app .app-select {
  padding-right: var(--app-s40);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234d504c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--app-s14) center;
  background-size: var(--app-s12) auto;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app .app-textarea {
  resize: vertical;
}

.app .app-input::placeholder,
.app .app-textarea::placeholder {
  color: #6b6f6a;
  opacity: 1;
}

.app .app-input[type="date"],
.app .app-input[type="time"],
.app .app-input[type="datetime-local"] {
  min-height: calc(42 * var(--app-u));
}

.app .app-input[type="file"] {
  min-height: calc(43.8 * var(--app-u) + 2px);
  padding: var(--app-s8) var(--app-s10);
  font-size: var(--app-t-sm);
  line-height: calc(24 * var(--app-u));
}

.app .app-input[aria-invalid="true"] {
  border-color: var(--app-danger);
}

.app .app-input--short {
  max-width: calc(224 * var(--app-u));
}

.app .app-input--code {
  font-size: var(--app-t-xl);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.app .app-input:disabled,
.app .app-textarea:disabled {
  background-color: var(--app-field);
}

.app .app-check {
  flex: none;
  width: calc(20 * var(--app-u));
  height: calc(20 * var(--app-u));
  margin: calc(3 * var(--app-u)) 0 0;
  padding: 0;
  accent-color: var(--app-brand-line);
  appearance: auto;
  box-shadow: none;
}

.app-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--app-s8);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-choice--center {
  align-items: center;
}

.app-choice--center .app-check {
  margin-top: 0;
}

.app-choice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--app-s12);
  padding: var(--app-s12);
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius);
}

.app-choice-card:has(.app-check:checked) {
  border-color: var(--app-brand-line);
  background: var(--app-field);
}

.app-choice-card-title {
  display: block;
  font-size: var(--app-t-sm);
  font-weight: 700;
  line-height: 1.4;
}

.app-choice-card-help {
  display: block;
  margin-top: var(--app-s2);
  color: var(--app-ink-muted);
  font-size: var(--app-t-xs);
  line-height: 1.5;
}

.app-locked {
  opacity: 0.7;
}

.app-colour-row {
  display: flex;
  gap: var(--app-s8);
}

.app-swatch {
  flex: none;
  width: calc(56 * var(--app-u));
  height: calc(44 * var(--app-u));
  padding: var(--app-s2);
  border: 1px solid var(--app-control-line);
  border-radius: calc(4 * var(--app-u));
  background: var(--app-paper);
}

.app-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(2 * var(--app-u));
}

.app-disclosure {
  font-size: var(--app-t-xs);
  line-height: 1.5;
}

.app-disclosure > summary {
  color: var(--app-ink-muted);
  cursor: pointer;
  list-style-position: inside;
}

.app-disclosure--box {
  padding: var(--app-s12);
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius);
  font-size: var(--app-t-sm);
}

.app-disclosure--box > summary {
  color: var(--app-ink);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

.app-table {
  width: 100%;
  font-size: var(--app-t-sm);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.app-table th {
  padding: var(--app-s10) var(--app-s12);
  border-bottom: 2px solid var(--app-rule);
  color: var(--app-ink-soft);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  vertical-align: bottom;
  background: none;
}

.app-table td {
  padding: var(--app-s12);
  border-bottom: 1px solid var(--app-rule);
  text-align: left;
  vertical-align: top;
  background: none;
}

.app-table tr:last-child td {
  border-bottom: 0;
}

.app-table .app-num {
  white-space: nowrap;
}

.app-table-wrap {
  overflow: hidden;
}

/* Tables reflow into labelled rows when the screen is narrow */
@container app-main (max-width: 37.99em) {
  .app-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-table--stack,
  .app-table--stack tbody,
  .app-table--stack tr {
    display: block;
    width: 100%;
  }

  .app-table--stack tr {
    padding: var(--app-s10) var(--app-s12);
    border-bottom: 1px solid var(--app-rule);
  }

  .app-table--stack tr:last-child {
    border-bottom: 0;
  }

  /* A row of two table cells: the label, then everything the cell holds,
     which CSS wraps in one anonymous cell so mixed text and elements stay
     together. */
  .app-table--stack td {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: var(--app-s3) 0;
    border: 0;
  }

  .app-table--stack td::before {
    content: attr(data-label);
    display: table-cell;
    width: min(36%, 150 * var(--app-u));
    padding-right: var(--app-s12);
    color: var(--app-ink-muted);
    font-size: var(--app-t-xs);
    font-weight: 400;
    line-height: 1.9;
    white-space: normal;
    text-align: left;
  }

  .app-table--stack td[data-label=""] {
    display: block;
  }

  .app-table--stack td[data-label=""]::before {
    content: none;
  }

  .app-table--stack td:empty {
    display: none;
  }
}

@container app-main (max-width: 45.99em) {
  .app-table--stack-lg thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-table--stack-lg,
  .app-table--stack-lg tbody,
  .app-table--stack-lg tr {
    display: block;
    width: 100%;
  }

  .app-table--stack-lg tr {
    padding: var(--app-s10) var(--app-s12);
    border-bottom: 1px solid var(--app-rule);
  }

  .app-table--stack-lg tr:last-child {
    border-bottom: 0;
  }

  /* A row of two table cells: the label, then everything the cell holds,
     which CSS wraps in one anonymous cell so mixed text and elements stay
     together. */
  .app-table--stack-lg td {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: var(--app-s3) 0;
    border: 0;
  }

  .app-table--stack-lg td::before {
    content: attr(data-label);
    display: table-cell;
    width: min(36%, 150 * var(--app-u));
    padding-right: var(--app-s12);
    color: var(--app-ink-muted);
    font-size: var(--app-t-xs);
    font-weight: 400;
    line-height: 1.9;
    white-space: normal;
    text-align: left;
  }

  .app-table--stack-lg td[data-label=""] {
    display: block;
  }

  .app-table--stack-lg td[data-label=""]::before {
    content: none;
  }

  .app-table--stack-lg td:empty {
    display: none;
  }
}

/* Wide tables (many columns or long values) stack sooner */
@container app-main (max-width: 59.99em) {
  .app-table--stack-xl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-table--stack-xl,
  .app-table--stack-xl tbody,
  .app-table--stack-xl tr {
    display: block;
    width: 100%;
  }

  .app-table--stack-xl tr {
    padding: var(--app-s10) var(--app-s12);
    border-bottom: 1px solid var(--app-rule);
  }

  .app-table--stack-xl tr:last-child {
    border-bottom: 0;
  }

  /* A row of two table cells: the label, then everything the cell holds,
     which CSS wraps in one anonymous cell so mixed text and elements stay
     together. */
  .app-table--stack-xl td {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: var(--app-s3) 0;
    border: 0;
  }

  .app-table--stack-xl td::before {
    content: attr(data-label);
    display: table-cell;
    width: min(36%, 150 * var(--app-u));
    padding-right: var(--app-s12);
    color: var(--app-ink-muted);
    font-size: var(--app-t-xs);
    font-weight: 400;
    line-height: 1.9;
    white-space: normal;
    text-align: left;
  }

  .app-table--stack-xl td[data-label=""] {
    display: block;
  }

  .app-table--stack-xl td[data-label=""]::before {
    content: none;
  }

  .app-table--stack-xl td:empty {
    display: none;
  }
}

@container app-main (max-width: 69.99em) {
  .app-table--stack-2xl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-table--stack-2xl,
  .app-table--stack-2xl tbody,
  .app-table--stack-2xl tr {
    display: block;
    width: 100%;
  }

  .app-table--stack-2xl tr {
    padding: var(--app-s10) var(--app-s12);
    border-bottom: 1px solid var(--app-rule);
  }

  .app-table--stack-2xl tr:last-child {
    border-bottom: 0;
  }

  /* A row of two table cells: the label, then everything the cell holds,
     which CSS wraps in one anonymous cell so mixed text and elements stay
     together. */
  .app-table--stack-2xl td {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: var(--app-s3) 0;
    border: 0;
  }

  .app-table--stack-2xl td::before {
    content: attr(data-label);
    display: table-cell;
    width: min(36%, 150 * var(--app-u));
    padding-right: var(--app-s12);
    color: var(--app-ink-muted);
    font-size: var(--app-t-xs);
    font-weight: 400;
    line-height: 1.9;
    white-space: normal;
    text-align: left;
  }

  .app-table--stack-2xl td[data-label=""] {
    display: block;
  }

  .app-table--stack-2xl td[data-label=""]::before {
    content: none;
  }

  .app-table--stack-2xl td:empty {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Badges, codes, links, text                                          */
/* ------------------------------------------------------------------ */

.app-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--app-s6);
  padding: var(--app-s2) var(--app-s8);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--app-t-xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: baseline;
}

.app-badge--ok {
  background: var(--app-ok-wash);
  color: var(--app-ok);
}

.app-badge--warn {
  background: var(--app-warning-wash);
  color: var(--app-warning);
}

.app-badge--danger {
  background: var(--app-danger-wash);
  color: var(--app-danger);
}

.app-badge--muted {
  background: var(--app-field-deep);
  color: var(--app-ink-soft);
}

.app-badge--accent {
  background: var(--app-accent, #2e7d32);
  color: var(--app-accent-ink, #ffffff);
}

.app-badge button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

.app-badge button svg {
  width: var(--app-s10);
  height: var(--app-s10);
}

/* Two classes deep so a page's prose code style does not reach it */
.app .app-code {
  padding: var(--app-s2) var(--app-s6);
  border: 1px solid var(--app-rule);
  border-radius: calc(6 * var(--app-u));
  background: var(--app-field);
  font-family: var(--app-mono);
  font-size: var(--app-t-sm);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
  font-variant-numeric: normal;
}

.app-link {
  text-decoration: underline;
  text-decoration-color: var(--app-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.app-xs { font-size: var(--app-t-xs); line-height: 1.5; }
.app-sm { font-size: var(--app-t-sm); line-height: 1.55; }
.app-base { font-size: var(--app-t-base); line-height: 1.6; }
.app-lg { font-size: var(--app-t-lg); line-height: 1.45; }
.app-xl { font-size: var(--app-t-xl); line-height: 1.3; }
.app-3xl { font-size: var(--app-t-3xl); line-height: 1.1; }
.app-4xl { font-size: var(--app-t-4xl); line-height: 1.11; }
.app-bold { font-weight: 700; }
.app-normal { font-weight: 400; }
.app-soft { color: var(--app-ink-soft); }
.app-muted { color: var(--app-ink-muted); }
.app-danger-text { color: var(--app-danger); }
.app-ok-text { color: var(--app-ok); }
.app-warn-text { color: var(--app-warning); }
.app-block { display: block; }
.app-nowrap { white-space: nowrap; }
.app-num { font-variant-numeric: tabular-nums; }
.app-pre-line { white-space: pre-line; }
.app-strike { text-decoration: line-through; }
.app-right { text-align: right; }
.app-mt-1 { margin-top: var(--app-s4); }
.app-mt-2 { margin-top: var(--app-s8); }
.app-mt-3 { margin-top: var(--app-s12); }
.app-mt-4 { margin-top: var(--app-s16); }
.app-mt-5 { margin-top: var(--app-s20); }
.app-mt-6 { margin-top: var(--app-s24); }
.app-mt-8 { margin-top: var(--app-s32); }
.app-mb-1 { margin-bottom: var(--app-s4); }
.app-mb-2 { margin-bottom: var(--app-s8); }
.app-mb-3 { margin-bottom: var(--app-s12); }
.app-mb-4 { margin-bottom: var(--app-s16); }
.app-mb-5 { margin-bottom: var(--app-s20); }
.app-mb-6 { margin-bottom: var(--app-s24); }
.app-ml-auto { margin-left: auto; }
.app-self-center { align-self: center; }
.app-self-end { align-self: end; }
.app-self-start { align-self: start; }

/* ------------------------------------------------------------------ */
/* Layout helpers                                                      */
/* ------------------------------------------------------------------ */

.app-stack > * + * { margin-top: var(--app-s24); }
.app-stack-5 > * + * { margin-top: var(--app-s20); }
.app-stack-4 > * + * { margin-top: var(--app-s16); }
.app-stack-3 > * + * { margin-top: var(--app-s12); }
.app-stack-2 > * + * { margin-top: var(--app-s8); }
.app-stack-1 > * + * { margin-top: var(--app-s4); }

.app-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-s8);
}

.app-row--end { align-items: flex-end; }
.app-row--start { align-items: flex-start; }
.app-row--between { justify-content: space-between; }
.app-row--gap-3 { gap: var(--app-s12); }
.app-row--gap-4 { gap: var(--app-s16); }
.app-row--gap-1 { gap: var(--app-s4); }
.app-row--nowrap { flex-wrap: nowrap; }

.app-grow { flex: 1 1 auto; min-width: 0; }
.app-grow-12 { flex: 1 1 calc(192 * var(--app-u)); min-width: 0; }

.app-grid {
  display: grid;
  gap: var(--app-s12);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.app-grid--gap-4 { gap: var(--app-s16); }
.app-grid--gap-5 { gap: var(--app-s20); }
.app-grid--gap-6 { gap: var(--app-s24); }
.app-grid--end { align-items: end; }

.app-divide > * + * {
  border-top: 1px solid var(--app-rule);
}

.app-divide-py2 > * {
  padding-block: var(--app-s8);
}

.app-divide-py3 > * {
  padding-block: var(--app-s12);
}

.app-rows > * + * {
  border-top: 1px solid var(--app-rule);
}

.app-rows > * {
  padding-block: var(--app-s8);
}

.app-rows > *:first-child {
  padding-top: 0;
}

@container app-main (min-width: 28em) {
  .app-grid--sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-grid--sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-span-sm-2 { grid-column: span 2; }
  .app-span-sm-3 { grid-column: span 3; }
}

@container app-main (min-width: 38em) {
  .app-grid--md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-grid--md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-grid--md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-span-md-2 { grid-column: span 2; }
  .app-span-md-3 { grid-column: span 3; }
  .app-span-md-4 { grid-column: 1 / -1; }
}

@container app-main (min-width: 46em) {
  .app-grid--record { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--app-s24); }
  .app-grid--work { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--app-s24); }
  .app-grid--2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--app-s24); }
  .app-grid--lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--app-s24); }
  .app-grid--lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container app-main (min-width: 58em) {
  .app-grid--xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-grid--xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Definition lists: the record field panels and the settings grids */
.app-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--app-s8) var(--app-s24);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-fields dt {
  color: var(--app-ink-muted);
}

.app-fields dd {
  color: var(--app-ink);
}

@container app-main (min-width: 28em) {
  .app-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.app-dl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--app-s12) var(--app-s24);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-dl-grid dt {
  color: var(--app-ink-muted);
}

.app-dl-grid dd {
  font-weight: 700;
}

@container app-main (min-width: 28em) {
  .app-dl-grid {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}

/* Tabs (Staff access, Department loads) */
.app-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--app-s4);
  border-bottom: 1px solid var(--app-rule);
}

.app-tab {
  margin-bottom: -1px;
  padding: var(--app-s10) var(--app-s14);
  border-bottom: var(--app-line) solid transparent;
  color: var(--app-ink-soft);
  font-size: var(--app-t-sm);
  font-weight: 700;
  line-height: 1.55;
  white-space: nowrap;
}

.app-tab[aria-current="page"] {
  color: var(--app-ink);
  border-bottom-color: var(--app-brand-line);
}

/* ------------------------------------------------------------------ */
/* My work, boards, tiles, report bars                                 */
/* ------------------------------------------------------------------ */

.app-tiles {
  display: grid;
  gap: var(--app-s12);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--app-s24);
}

@container app-main (min-width: 28em) {
  .app-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container app-main (min-width: 46em) {
  .app-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.app-tile-label {
  color: var(--app-ink-muted);
  font-size: var(--app-t-xs);
  line-height: 1.5;
}

.app-tile-number {
  margin-top: var(--app-s4);
  font-size: var(--app-t-3xl);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.app-work-card {
  padding: var(--app-s12);
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius);
}

.app-work-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--app-s12);
}

.app-work-item > div {
  flex: 1 1 auto;
  min-width: min(100%, calc(240 * var(--app-u)));
}

.app-work-meta {
  flex: 0 1 auto;
  max-width: 100%;
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-board {
  display: grid;
  gap: var(--app-s16);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@container app-main (min-width: 38em) {
  .app-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container app-main (min-width: 60em) {
  .app-board--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-board--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.app-board-heading {
  display: flex;
  align-items: baseline;
  gap: var(--app-s4);
  margin-bottom: var(--app-s12);
  font-size: var(--app-t-sm);
  font-weight: 700;
  line-height: 1.55;
}

.app-board-card {
  padding: var(--app-s12);
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius);
  background: var(--app-paper);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-board-card--warn {
  background: var(--app-warning-wash);
}

.app-board-card--danger {
  background: var(--app-danger-wash);
}

.app-board-card .app-code {
  font-size: var(--app-t-xs);
  white-space: nowrap;
  overflow-wrap: normal;
}

.app-board-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-s8);
  margin-top: var(--app-s8);
}

.app-board-controls .app-select,
.app-board-controls .app-input {
  width: auto;
  flex: 1 1 calc(120 * var(--app-u));
  font-size: var(--app-t-sm);
  padding-block: var(--app-s6);
}

.app-bars li + li {
  margin-top: var(--app-s6);
}

.app-bar-row {
  display: flex;
  justify-content: space-between;
  gap: var(--app-s12);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-bar-row > span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-bar-track {
  height: var(--app-s6);
  margin-top: var(--app-s2);
  border-radius: calc(4 * var(--app-u));
  background: var(--app-field);
}

.app-bar-fill {
  display: block;
  height: 100%;
  border-radius: calc(4 * var(--app-u));
  background: var(--app-brand-line);
}

.app-note {
  padding-block: var(--app-s12);
  border-top: 1px solid var(--app-rule);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-note-stamp {
  color: var(--app-ink-muted);
  font-size: var(--app-t-xs);
  line-height: 1.5;
}

.app-note-stamp > * + * {
  margin-left: var(--app-s8);
}

.app-box {
  padding: var(--app-s12);
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius);
  background: var(--app-paper);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-box--field {
  background: var(--app-field);
  border-color: transparent;
}

.app-box--danger {
  background: var(--app-danger-wash);
  border-color: color-mix(in srgb, var(--app-danger) 40%, white);
}

.app-box-pad {
  padding: var(--app-s16);
}

/* ------------------------------------------------------------------ */
/* Portal, focus card and kiosk                                        */
/* ------------------------------------------------------------------ */

.app--portal {
  background: var(--app-field);
}

.app-portal-main {
  max-width: calc(768 * var(--app-u));
  margin-inline: auto;
  padding: var(--app-s32) var(--app-s16);
  font-size: var(--app-t-lg);
  line-height: 1.45;
}

.app-portal-footer {
  max-width: calc(768 * var(--app-u));
  margin-inline: auto;
  padding: 0 var(--app-s16) var(--app-s24);
  color: var(--app-ink-muted);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

@container app (min-width: 34em) {
  .app-portal-main {
    padding: var(--app-s48) var(--app-s24);
  }

  .app-portal-footer {
    padding-inline: var(--app-s24);
  }
}

.app-portal-title {
  font-size: var(--app-t-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.app-focus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(600 * var(--app-u));
  padding: var(--app-s40) var(--app-s16);
}

.app-focus .app-record {
  max-width: calc(448 * var(--app-u));
}

.app-focus-body {
  padding: var(--app-s24);
}

@container app (min-width: 34em) {
  .app-focus-body {
    padding: var(--app-s32);
  }
}

.app-focus-title {
  font-size: var(--app-t-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.app-focus-footer {
  max-width: calc(608 * var(--app-u));
  margin-top: var(--app-s24);
  color: var(--app-ink-muted);
  font-size: var(--app-t-sm);
  line-height: 1.55;
  text-align: center;
}

.app-kiosk-code {
  font-size: var(--app-t-4xl);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Planned screens: the same chassis, labelled outside the product      */
/* ------------------------------------------------------------------ */

.app-calendar {
  display: grid;
  grid-template-columns: calc(52 * var(--app-u)) repeat(5, minmax(0, 1fr));
  font-size: var(--app-t-xs);
  line-height: 1.4;
}

.app-calendar-head {
  padding: var(--app-s8);
  border-bottom: 2px solid var(--app-rule);
  color: var(--app-ink-soft);
  font-weight: 700;
  text-align: left;
}

.app-calendar-head[aria-current="date"] {
  color: var(--app-ink);
  box-shadow: inset 0 calc(-1 * var(--app-line)) 0 var(--app-brand-line);
}

.app-calendar-time {
  padding: var(--app-s4) var(--app-s8) 0 0;
  color: var(--app-ink-muted);
  text-align: right;
  border-top: 1px solid var(--app-rule);
  font-variant-numeric: tabular-nums;
}

.app-calendar-cell {
  position: relative;
  min-height: calc(52 * var(--app-u));
  padding: var(--app-s3);
  border-top: 1px solid var(--app-rule);
  border-left: 1px solid var(--app-rule);
}

.app-calendar-event {
  display: block;
  padding: var(--app-s4) var(--app-s6);
  border: 1px solid var(--app-rule);
  border-left: var(--app-line) solid var(--app-ink-soft);
  border-radius: calc(6 * var(--app-u));
  background: var(--app-paper);
  font-size: var(--app-t-xs);
  line-height: 1.35;
}

.app-calendar-event + .app-calendar-event {
  margin-top: var(--app-s3);
}

.app-calendar-event--due {
  border-left-color: var(--app-warning);
  background: var(--app-warning-wash);
}

.app-calendar-event--breach {
  border-left-color: var(--app-danger);
  background: var(--app-danger-wash);
}

@container app-main (max-width: 37.99em) {
  .app-calendar {
    grid-template-columns: calc(44 * var(--app-u)) repeat(3, minmax(0, 1fr));
  }

  .app-calendar-wide {
    display: none;
  }
}

.app-lead-card {
  padding: var(--app-s12);
  border: 1px solid var(--app-rule);
  border-radius: var(--app-radius);
  background: var(--app-paper);
  font-size: var(--app-t-sm);
  line-height: 1.55;
}

.app-lead-card--warn {
  background: var(--app-warning-wash);
}

.app-lead-card--danger {
  background: var(--app-danger-wash);
}

/* Progress through an import batch */
.app-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-s8);
}

.app-step {
  display: inline-flex;
  align-items: center;
  gap: var(--app-s6);
  padding: var(--app-s4) var(--app-s10);
  border: 1px solid var(--app-rule);
  border-radius: 999px;
  background: var(--app-paper);
  color: var(--app-ink-soft);
  font-size: var(--app-t-xs);
  font-weight: 700;
  line-height: 1.5;
}

.app-step[aria-current="step"] {
  border-color: var(--app-brand-line);
  color: var(--app-ink);
  box-shadow: inset 0 0 0 1px var(--app-brand-line);
}

.app-step svg {
  width: var(--app-s12);
  height: var(--app-s12);
}

@media (prefers-reduced-motion: reduce) {
  .app *,
  .app *::before,
  .app *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .app-record-tab,
  .app-brand-tab,
  .app-badge,
  .app .app-btn--primary {
    border: 1px solid CanvasText;
  }

  .app-bar-fill {
    background: Highlight;
  }
}

/* List page details */
.app-page-header--list {
  margin-bottom: var(--app-s20);
}

.app .app-input--auto {
  width: auto;
  max-width: 100%;
}

.app-table--list td:first-child,
.app-table--list th:first-child {
  padding-right: 0;
}

.app-grid--tight {
  gap: var(--app-s4) var(--app-s12);
}

.app-table .app-check-cell {
  width: var(--app-s32);
}

/* A narrower product window: the sidebar folds behind Menu, as the
   product does below 1024px, so a record's panels take the full width. */
.app--compact .app-sidebar {
  display: none;
}

.app--compact .app-body {
  flex-direction: column;
}

.app .app-btn.app-menu--show,
.app--compact .app-btn.app-menu {
  display: inline-flex;
}

.app [hidden] {
  display: none !important;
}

.app-ml-1 {
  margin-left: var(--app-s4);
}

.app--compact .app-grid--record,
.app--compact .app-grid--work {
  grid-template-columns: minmax(0, 1fr);
}

@container app-main (min-width: 60em) {
  .app-board--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.app-logo-box {
  display: inline-flex;
  align-items: center;
  height: calc(40 * var(--app-u));
  padding: var(--app-s4) var(--app-s6);
  border: 1px solid var(--app-rule);
  border-radius: calc(4 * var(--app-u));
  background: var(--app-paper);
}

.app-logo-box svg {
  height: calc(28 * var(--app-u));
  width: auto;
}

/* Long values: an address may break anywhere rather than widen a column;
   emails break after the @ first (the brand pass adds a <wbr> there) */
.app .app-break {
  overflow-wrap: anywhere;
}

.app [data-brand-domain] {
  overflow-wrap: break-word;
}

/* A two-and-three split that waits for room, for panels holding a wide table */
.app-grid--2-3-wide {
  gap: var(--app-s24);
}

@container app-main (min-width: 64em) {
  .app-grid--2-3-wide {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* Short command labels stay on one line where a column can grow to fit them */
.app-header-tools .app-btn,
.app-table td .app-btn {
  white-space: nowrap;
}

/* Decision forms in a table cell: approve, then a reason and decline */
.app-decide {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-s8);
}

.app-decide .app-input {
  min-width: calc(120 * var(--app-u));
}

@container app-main (min-width: 46em) {
  .app-decide {
    min-width: calc(260 * var(--app-u));
  }

  .app-decide .app-input {
    min-width: calc(150 * var(--app-u));
  }
}

/* Planned screens: a dashed window edge, as the site draws sketches */
.app-frame[data-status="planned"] .app-window {
  border: 2px dashed #59606a;
}

/* A bare file input, as the organisation logo field draws it */
.app .app-file {
  display: block;
  max-width: 100%;
  font-size: var(--app-t-sm);
}

/* Stacked rows read left to right, whatever the wide table aligned, and a
   long badge may wrap inside its narrower value column */
@container app-main (max-width: 37.99em) {
  .app-table--stack td.app-right {
    text-align: left;
  }

  .app-table--stack td .app-badge {
    white-space: normal;
    border-radius: calc(10 * var(--app-u));
  }
}

@container app-main (max-width: 45.99em) {
  .app-table--stack-lg td.app-right {
    text-align: left;
  }

  .app-table--stack-lg td .app-badge {
    white-space: normal;
    border-radius: calc(10 * var(--app-u));
  }
}

@container app-main (max-width: 59.99em) {
  .app-table--stack-xl td.app-right {
    text-align: left;
  }

  .app-table--stack-xl td .app-badge {
    white-space: normal;
    border-radius: calc(10 * var(--app-u));
  }
}

@container app-main (max-width: 69.99em) {
  .app-table--stack-2xl td.app-right {
    text-align: left;
  }

  .app-table--stack-2xl td .app-badge {
    white-space: normal;
    border-radius: calc(10 * var(--app-u));
  }
}

/* ------------------------------------------------------------------ */
/* Planned features: a wireframe sketch, never a product frame         */
/* ------------------------------------------------------------------ */

.app-frame--sketch {
  --sk-ink: #2b2f33;
  --sk-soft: #4a5057;
  --sk-paper: #fbfaf5;
  --sk-card: #fffefb;
  --sk-bar: #cfcbbf;
}

.app-sketch {
  container: app-sketch / inline-size;
  position: relative;
  padding: var(--app-s20) var(--app-s20) var(--app-s24);
  border: 2px dashed #59606a;
  border-radius: var(--app-frame-radius, 12px);
  background-color: var(--sk-paper);
  background-image: radial-gradient(rgb(43 47 51 / 0.14) 1px, transparent 1.2px);
  background-size: calc(18 * var(--app-u)) calc(18 * var(--app-u));
  color: var(--sk-ink);
  font-family: "Atkinson Next", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--app-t-base);
  line-height: 1.5;
}

.app-sketch :where(p, ul, ol, li) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-sketch-label {
  display: inline-flex;
  align-items: center;
  gap: var(--app-s6);
  padding: var(--app-s4) var(--app-s12) var(--app-s4) var(--app-s10);
  border-radius: 999px;
  background: var(--sk-ink);
  color: var(--sk-paper);
  font-size: var(--app-t-xs);
  font-weight: 700;
  line-height: 1.4;
}

.app-sketch-label svg {
  flex: none;
  width: var(--app-s14);
  height: var(--app-s14);
}

.app-sketch-title {
  margin-top: var(--app-s12);
  font-size: var(--app-t-xl);
  font-weight: 800;
  line-height: 1.25;
}

.app-sketch-note {
  max-width: calc(640 * var(--app-u));
  margin-top: var(--app-s4);
  color: var(--sk-soft);
  font-size: var(--app-t-sm);
}

.app-sk-body {
  margin-top: var(--app-s16);
}

.app-sk-box {
  padding: var(--app-s12) var(--app-s14);
  border: 3px solid var(--sk-ink);
  border-radius: calc(12 * var(--app-u));
  background: var(--sk-card);
  box-shadow: calc(4 * var(--app-u)) calc(4 * var(--app-u)) 0 rgb(43 47 51 / 0.16);
}

.app-sk-box + .app-sk-box {
  margin-top: var(--app-s12);
}

.app-sk-cols > .app-sk-box + .app-sk-box {
  margin-top: 0;
}

.app-sk-box--dashed {
  border-style: dashed;
  box-shadow: none;
}

.app-sk-head {
  font-family: "Atkinson Mono", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--app-t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-sk-strong {
  font-weight: 700;
}

.app-sk-small {
  color: var(--sk-soft);
  font-size: var(--app-t-sm);
}

.app-sk-bar {
  display: block;
  height: calc(8 * var(--app-u));
  margin-top: var(--app-s8);
  border-radius: 999px;
  background: var(--sk-bar);
}

.app-sk-bar--30 { width: 30%; }
.app-sk-bar--45 { width: 45%; }
.app-sk-bar--60 { width: 60%; }
.app-sk-bar--80 { width: 80%; }

.app-sk-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-s8) var(--app-s12);
}

.app-sk-btn {
  display: inline-flex;
  align-items: center;
  min-height: calc(34 * var(--app-u));
  padding: var(--app-s4) var(--app-s14);
  border: 2.5px solid var(--sk-ink);
  border-radius: 999px;
  font-size: var(--app-t-sm);
  font-weight: 700;
  line-height: 1.3;
}

.app-sk-btn--fill {
  background: var(--sk-ink);
  color: var(--sk-paper);
}

.app-sk-chip {
  display: inline-block;
  max-width: 100%;
  padding: 0 var(--app-s8);
  border: 2px dashed var(--sk-ink);
  border-radius: 999px;
  font-size: var(--app-t-xs);
  font-weight: 700;
  line-height: 1.6;
}

.app-sk-field {
  height: calc(34 * var(--app-u));
  margin-top: var(--app-s4);
  border: 2.5px solid var(--sk-ink);
  border-radius: calc(8 * var(--app-u));
  background: #ffffff;
}

.app-sk-cols {
  display: grid;
  gap: var(--app-s12);
  grid-template-columns: minmax(0, 1fr);
}

@container app-sketch (min-width: 36em) {
  .app-sk-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-sk-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container app-sketch (min-width: 52em) {
  .app-sk-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .app-sk-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container app-sketch (min-width: 36em) and (max-width: 51.99em) {
  .app-sk-cols--5,
  .app-sk-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.app-sk-lane > * + * {
  margin-top: var(--app-s10);
}

.app-sk-time {
  font-family: "Atkinson Mono", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--app-t-sm);
  font-weight: 700;
}

.app-sk-divide > * + * {
  margin-top: var(--app-s10);
  padding-top: var(--app-s10);
  border-top: 2px dashed rgb(43 47 51 / 0.35);
}

/* ------------------------------------------------------------------ */
/* Built through the API only: request and response panes               */
/* ------------------------------------------------------------------ */

.app-api {
  container: app-api / inline-size;
  padding: var(--app-s16);
  border: 1px solid var(--app-frame-line, #b4bbc2);
  border-radius: var(--app-frame-radius, 12px);
  background: #eef0f2;
  font-family: "Atkinson Next", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #15181c;
}

.app-api-title {
  margin: 0;
  font-size: var(--app-t-lg);
  font-weight: 800;
  line-height: 1.3;
}

.app-api-note {
  max-width: calc(700 * var(--app-u));
  margin: var(--app-s4) 0 var(--app-s14);
  color: #3d434a;
  font-size: var(--app-t-sm);
  line-height: 1.5;
}

.app-api-panes {
  display: grid;
  gap: var(--app-s12);
  align-items: start;
}

.app-api-panes > * {
  min-width: 0;
}

@container app-api (min-width: 56em) {
  .app-api-panes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .app-sk-box,
  .app-sk-btn,
  .app-sk-field {
    border-color: CanvasText;
  }
}

/* A filter chip may wrap its sentence when the list is narrow */
.app .app-badge--chip {
  max-width: 100%;
  white-space: normal;
  border-radius: calc(10 * var(--app-u));
}

/* A narrow window: the address takes its own line and the tag sits under it */
@container app-window (max-width: 29.99em) {
  .app-chrome {
    flex-wrap: wrap;
    row-gap: var(--app-s6);
  }

  .app-chrome-dots {
    display: none;
  }

  .app-address {
    flex: 1 1 100%;
    max-width: none;
  }

  .app-tag {
    margin-left: 0;
  }
}