/* DFT design system: the final, consolidating style layer.

   Loaded after every other stylesheet so one set of tokens decides the shape of
   the product: radii, control heights, shadows, type scale and colour roles.
   Earlier layers (brand, mockups, app, base, theme, Tailwind) still own layout;
   this file only tightens the look. Documented in docs/ui/design_system.md. */

:root {
  /* Spacing (4px grid) */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;

  /* Radii: controls 8, cards 12, pills full. */
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-pill: 999px;

  /* Control heights */
  --ds-control-sm: 30px;
  --ds-control-md: 36px;
  --ds-control-lg: 40px;

  /* Colour roles */
  --ds-bg: #f6f7f9;
  --ds-surface: #ffffff;
  --ds-surface-subtle: #f9fafb;
  --ds-surface-sunken: #f2f4f7;
  --ds-border: #e4e7ec;
  --ds-border-strong: #d0d5dd;
  --ds-text: #1d2939;
  --ds-text-strong: #101828;
  --ds-text-muted: #5f6f89;
  --ds-accent: #255ee8;
  --ds-success: #067647;
  --ds-success-soft: #ecfdf3;
  --ds-warning-soft: #fffaeb;
  --ds-danger: #b42318;
  --ds-danger-soft: #fef3f2;

  /* Elevation */
  --ds-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --ds-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --ds-shadow-md: 0 4px 10px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --ds-shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, 0.16), 0 4px 8px -4px rgba(16, 24, 40, 0.06);

  /* Type scale */
  --ds-text-xs: 11.5px;
  --ds-text-sm: 12.5px;
  --ds-text-md: 13.5px;
  --ds-text-lg: 15px;
  --ds-title-section: 17px;
  --ds-title-page: 26px;

  /* Re-point the shared tokens of earlier layers at the same roles. */
  --dft-c-radius-panel: var(--ds-radius-lg);
  --dft-c-radius-control: var(--ds-radius-md);
  --dft-c-border: var(--ds-border);
  --dft-c-shadow-hairline: var(--ds-shadow-xs);
  --dft-radius-sm: var(--ds-radius-md);
  --dft-radius-md: var(--ds-radius-md);
  --dft-radius-lg: var(--ds-radius-lg);
  --dft-border: var(--ds-border);
  --dft-shadow-sm: var(--ds-shadow-xs);
  --dft-letter-spacing: 0;
}

/* ---------------------------------------------------------------- Canvas */

.mock-app {
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

/* ---------------------------------------------------------------- Top bar */

.mock-topbar {
  border-bottom: 1px solid var(--ds-border);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
}

.mock-topbar__inner {
  min-height: 56px;
  padding: 0 16px;
  gap: 16px;
}

.mock-app .mock-topbar__brand {
  position: relative;
  display: grid;
  grid-template-columns: 30px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  flex: 0 0 auto;
  border-radius: var(--ds-radius-md);
}

.mock-app .mock-topbar__brand::before {
  content: "";
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: url("/static/favicon.svg") center / contain no-repeat;
  box-shadow: var(--ds-shadow-xs);
}

.mock-app .mock-topbar__brand .txt-marker {
  color: var(--ds-text-muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0.08em;
}

.mock-app .mock-topbar__title {
  line-height: 1.15;
}

.mock-app .mock-topbar__title strong {
  color: var(--ds-text-strong);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Flow steps in the top bar: quiet stepper, one accent underline. */
.mock-app .mock-flowtabs {
  gap: clamp(4px, 1.1vw, 14px);
}

.mock-app .mock-flowtabs__tab,
.mock-app .mock-main a.mock-flowtabs__tab,
.mock-app a.mock-flowtabs__tab {
  gap: 8px;
  padding: 0 8px 1px;
  color: var(--ds-text-muted);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

.mock-app .mock-flowtabs__tab::after,
.mock-app .mock-flowtabs__tab[data-flow-tab-state]::after,
.mock-app .mock-flowtabs__tab[data-flow-tab-state="done"]::after,
.mock-app .mock-flowtabs__tab[data-flow-tab-state="running"]::after {
  left: 4px;
  right: 4px;
  height: 2px;
  background: transparent;
}

.mock-app .mock-flowtabs__tab:hover {
  color: var(--ds-text-strong);
}

.mock-app .mock-flowtabs__tab.is-active,
.mock-app .mock-main a.mock-flowtabs__tab.is-active,
.mock-app a.mock-flowtabs__tab.is-active,
.mock-app .mock-flowtabs__tab.is-active[data-flow-tab-state="idle"] {
  color: var(--ds-text-strong);
  font-weight: 650;
  box-shadow: none;
}

.mock-app .mock-flowtabs__tab.is-active::after,
.mock-app .mock-flowtabs__tab.is-active[data-flow-tab-state]::after {
  background: var(--ds-accent);
}

.mock-app .mock-flowtabs__text {
  gap: 2px;
}

.mock-app .mock-flowtabs__statusText {
  color: var(--ds-text-muted);
  font-size: 10.5px;
  font-weight: 500;
}

.mock-app .mock-flowtabs__status {
  width: 18px;
  height: 18px;
  border-width: 1px;
  border-style: solid;
  font-size: 10px;
  font-weight: 700;
}

.mock-app .mock-flowtabs__status--done {
  border-color: var(--ds-success);
  background: var(--ds-success);
  color: #ffffff;
}

.mock-app .mock-flowtabs__status--done .mock-flowtabs__status-check {
  font-size: 9px;
  color: #ffffff;
}

.mock-app .mock-flowtabs__status--idle,
.mock-app .mock-flowtabs__tab.is-active .mock-flowtabs__status--idle,
.mock-app .mock-main a.mock-flowtabs__tab.is-active .mock-flowtabs__status--idle {
  border-color: var(--ds-border-strong);
  background: #f7f9fc;
  color: var(--ds-text-muted);
}

.mock-app .mock-flowtabs__tab.is-active .mock-flowtabs__status--idle {
  border-color: var(--ds-accent);
  color: var(--ds-accent);
}

/* Task inbox: one quiet pill. */
.mock-app .jobs-inbox__toggle {
  min-height: 34px;
  padding: 0 6px 0 10px;
  gap: 6px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-xs);
}

.mock-app .jobs-inbox__toggle:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-surface-subtle);
}

.mock-app .jobs-inbox__counts {
  gap: 3px;
}

.mock-app .jobs-inbox__count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-sunken);
  font-size: 11px;
  font-weight: 650;
}

.mock-app .jobs-inbox__count--done {
  background: var(--ds-success-soft);
  color: var(--ds-success);
}

/* Account menu */
.mock-app .teacher-account-menu__summary {
  min-height: 40px;
  padding: 4px 10px 4px 5px;
  gap: 9px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-xs);
}

.mock-app .teacher-account-menu__summary:hover {
  border-color: var(--ds-border-strong);
  background: var(--ds-surface-subtle);
}

.mock-app .teacher-account-menu__avatar {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #3d74f6, #1b3a9e);
  font-size: 12.5px;
  font-weight: 650;
}

.mock-app .teacher-account-menu__name {
  color: var(--ds-text-strong);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}

.mock-app .teacher-account-menu__email,
.mock-app .teacher-account-menu__mode {
  color: var(--ds-text-muted);
  font-size: 11.5px;
  line-height: 1.2;
}

.mock-app .teacher-account-menu__summary::after {
  width: 6px;
  height: 6px;
  margin: 0 2px 0 2px;
  border-width: 0 1.5px 1.5px 0;
  color: var(--ds-text-muted);
}

.mock-app .teacher-account-menu__panel {
  padding: 6px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-lg);
}

.mock-app .teacher-account-menu__item {
  border-radius: var(--ds-radius-sm);
  font-size: var(--ds-text-md);
  font-weight: 550;
}

/* ---------------------------------------------------------------- Sidebar */

.mock-app .mock-sidebar {
  border-right: 1px solid var(--ds-border);
  background: #fbfbfc;
}

.mock-app .mock-nav__label,
.mock-app .mock-nav__summary {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.mock-app .mock-navlink {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: var(--ds-radius-md);
  color: #344054;
  font-size: 13.5px;
  font-weight: 550;
}

.mock-app .mock-navlink::before {
  content: none;
}

.mock-app .mock-navlink:hover {
  background: var(--ds-surface-sunken);
  color: var(--ds-text-strong);
}

.mock-app .mock-navlink--active,
.mock-app .mock-navlink[aria-current="page"] {
  background: var(--ds-surface);
  color: var(--ds-text-strong);
  font-weight: 650;
  box-shadow: var(--ds-shadow-sm), inset 0 0 0 1px var(--ds-border);
}

.mock-app .mock-navlink__icon {
  color: #64748b;
}

.mock-app .mock-navlink--active .mock-navlink__icon,
.mock-app .mock-navlink[aria-current="page"] .mock-navlink__icon {
  color: var(--ds-accent);
}

/* ---------------------------------------------------------------- Surfaces */

.mock-app .mock-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-xs);
}

.mock-app .mock-subcard {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  box-shadow: none;
}

/* ---------------------------------------------------------------- Type */

.mock-app .mock-main h1 {
  color: var(--ds-text-strong);
  font-size: var(--ds-title-page);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mock-app .mock-main h2 {
  color: var(--ds-text-strong);
  letter-spacing: -0.01em;
}

.mock-app .mock-main :where(h2, h3) {
  font-weight: 650;
}

/* Unclassed section titles inherit the brand's 22px; one step below the page title. */
.mock-app .mock-main h2:not([class]) {
  font-size: 18px;
  line-height: 1.3;
}

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

.mock-app .btn {
  min-height: var(--ds-control-md);
  padding: 0 14px;
  gap: 8px;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-md);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: var(--ds-shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease;
}

.mock-app .btn--small {
  min-height: var(--ds-control-sm);
  padding: 0 11px;
  font-size: var(--ds-text-sm);
}

.mock-app .btn.btn--ghost {
  border-color: var(--ds-border-strong);
  background: var(--ds-surface);
  color: #344054;
  box-shadow: var(--ds-shadow-xs);
}

/* Destructive row actions keep their red text on the quiet button. */
.mock-app .btn.btn--ghost:is(.dft-meili-remove, .dft-roster-editor__remove) {
  color: var(--ds-danger);
}

.mock-app .btn.btn--ghost:is(.dft-meili-remove, .dft-roster-editor__remove):not(:disabled):hover {
  border-color: #fda29b;
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.mock-app :where(.dft-primarybtn, .dft-upload__submit) {
  min-height: var(--ds-control-md);
  padding: 0 14px;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-md);
  font-weight: 600;
}

/* Floating flow CTA */
.mock-app ~ .dft-flow-cta .dft-flow-cta__button.btn,
.dft-flow-cta .dft-flow-cta__button.btn {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--ds-radius-lg);
  font-size: 14.5px;
  font-weight: 650;
  box-shadow: var(--ds-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.dft-flow-cta .dft-flow-cta__infoButton {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 650;
  box-shadow: var(--ds-shadow-md);
}

/* ---------------------------------------------------------------- Inputs */

.mock-app :where(input.dft-input, input.mock-input, select.dft-input, .dft-auth-input),
.mock-app .mock-main input.dft-input,
.mock-app .mock-main select.dft-input,
.mock-app .mock-main input.mock-input {
  min-height: var(--ds-control-md);
  border: 1px solid var(--dft-control-border, #7c8798);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-surface);
  color: var(--ds-text-strong);
  font-size: var(--ds-text-md);
  box-shadow: var(--ds-shadow-xs);
}

.mock-app .mock-main select.dft-input {
  box-sizing: border-box;
  height: var(--ds-control-md);
  padding-block: 0;
  align-self: start;
}

.mock-app :where(textarea.dft-input, textarea.mock-input),
.mock-app .mock-main textarea.dft-input,
.mock-app .mock-main textarea.mock-input {
  border-color: var(--dft-control-border, #7c8798);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-md);
}

.mock-app :where(input, select, textarea)::placeholder {
  color: #64748b;
}

.mock-app :where(input.dft-input, input.mock-input, select.dft-input, textarea.dft-input, textarea.mock-input, .dft-auth-input):hover {
  border-color: #5d6b82;
}

/* ---------------------------------------------------------------- Segmented controls */

.mock-app .mock-main .dft-segtabs {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface-sunken);
}

.mock-app .mock-main .dft-segtabs__tab,
.mock-app .mock-main .dft-segtabs a.dft-segtabs__tab,
.mock-app .mock-main .dft-segtabs span.dft-segtabs__tab {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  color: #475569;
  font-size: var(--ds-text-sm);
  font-weight: 600;
}

.mock-app .mock-main .dft-segtabs a.dft-segtabs__tab:hover {
  color: var(--ds-text-strong);
}

.mock-app .mock-main .dft-segtabs__tab.is-active,
.mock-app .mock-main .dft-segtabs a.dft-segtabs__tab.is-active,
.mock-app .mock-main .dft-segtabs span.dft-segtabs__tab.is-active {
  background: var(--ds-surface);
  color: #1d4ed8;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* ---------------------------------------------------------------- Badges and chips */

.mock-app .dft-badge {
  min-height: 22px;
  padding: 0 8px;
  gap: 5px;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.mock-app .mock-chip {
  border-color: var(--ds-border);
  font-weight: 600;
  box-shadow: none;
}

/* ---------------------------------------------------------------- Alerts and callouts */

.mock-app .dft-alert {
  padding: 12px 14px;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-md);
  line-height: 1.45;
}

.mock-app .dft-alert :where(p, ul, ol, li) {
  font-size: inherit;
  line-height: inherit;
}

.mock-app .dft-alert--warning {
  border-color: #fedf89;
  background: var(--ds-warning-soft);
  color: #7a2e0e;
}

.mock-app .dft-alert--danger {
  border-color: #fecdca;
  background: var(--ds-danger-soft);
  color: #912018;
}

.mock-app .dft-alert--success {
  border-color: #abefc6;
  background: var(--ds-success-soft);
  color: #05603a;
}

.mock-app .mock-callout {
  border-color: #fde7b0;
  border-radius: var(--ds-radius-md);
  background: var(--ds-warning-soft);
}

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

.mock-app .mock-table th {
  color: var(--ds-text-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.mock-app .mock-table :where(th, td) {
  border-top-color: var(--ds-border);
}

/* Stacked row actions (one form per button) get a small rhythm instead of touching. */
.mock-app .mock-main td > form + form {
  margin-top: 4px;
}

/* ---------------------------------------------------------------- KPI tiles */

.mock-app .mock-kpi {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.mock-app .mock-kpi__value {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- Pill buttons from the Tailwind layer */

.mock-app .dft-button {
  min-height: var(--ds-control-md);
  border-color: var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-md);
  box-shadow: var(--ds-shadow-xs);
}

.mock-app .dft-button--primary {
  border-color: transparent;
}

/* ---------------------------------------------------------------- Skip link */

/* The off-screen skip link must not cast its shadow onto the top bar. */
.mock-skip-link:not(:focus):not(:focus-visible) {
  box-shadow: none;
}

/* ---------------------------------------------------------------- Generic cards */

.mock-app .mock-main .card {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xs);
}

/* ---------------------------------------------------------------- Segmented filters (feedback, roster) */

.mock-app .mock-main :is(.dft-feedback-segmented, .dft-student-segmented) {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  background: var(--ds-surface-sunken);
}

.mock-app .mock-main :is(.dft-feedback-segmented__button, .dft-student-segmented__button) {
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #475569;
  font-size: var(--ds-text-sm);
  font-weight: 600;
  box-shadow: none;
}

/* Desktop only: phones keep the 40px touch targets of the earlier layers. */
@media (min-width: 761px) {
  .mock-app .mock-main :is(.dft-feedback-segmented__button, .dft-student-segmented__button) {
    height: 30px;
    min-height: 30px;
  }
}

.mock-app .mock-main :is(.dft-feedback-segmented__button, .dft-student-segmented__button):hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ds-text-strong);
}

.mock-app .mock-main :is(.dft-feedback-segmented__button, .dft-student-segmented__button).is-active {
  background: var(--ds-surface);
  color: #165dcc;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* ---------------------------------------------------------------- Transcript review toolbar */

/* One 30px row: pager, zoom, fit and the panel actions share height, radius and border. */
.mock-app .dft-page-controls__pager,
.mock-app .dft-page-controls__zoom {
  min-height: var(--ds-control-sm);
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-xs);
}

.mock-app .dft-page-controls__pager .dft-icon-button {
  min-width: 30px;
  min-height: 28px;
}

.mock-app .dft-page-controls__pager .dft-page-controls__count {
  min-height: 28px;
  font-size: 12px;
}

.mock-app .dft-page-controls > .dft-icon-button {
  min-width: var(--ds-control-sm);
  min-height: var(--ds-control-sm);
  box-shadow: var(--ds-shadow-xs);
}

.mock-app .dft-transcription-redesign .dft-panel-button,
.mock-app .dft-panel-button {
  min-height: var(--ds-control-sm);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--ds-shadow-xs);
}

/* ---------------------------------------------------------------- Search facets */

.mock-app .mock-main .dft-meili-control__label {
  color: var(--ds-text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0;
}

.mock-app .dft-meili-facet {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}

/* ---------------------------------------------------------------- Auth pages */

.mock-app .dft-auth-heading h1 {
  font-size: 30px;
  line-height: 1.15;
}

/* ---------------------------------------------------------------- Small screens */

@media (max-width: 760px) {
  .mock-topbar__inner {
    padding: 8px 12px;
    gap: 8px;
  }

  .mock-app .mock-topbar__brand {
    flex: 1 1 0;
    grid-template-columns: 28px minmax(0, auto);
    column-gap: 8px;
    min-width: 0;
  }

  .mock-app .mock-topbar__actions {
    flex-wrap: nowrap;
  }

  .mock-app .mock-topbar__brand::before {
    width: 28px;
    height: 28px;
  }

  .mock-app .mock-topbar__brand .txt-marker,
  .mock-app .mock-topbar__title strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mock-app .mock-topbar__title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mock-app .mock-topbar__title strong {
    font-size: 13.5px;
  }

  .mock-app .jobs-inbox__toggle {
    gap: 4px;
    padding: 0 4px 0 8px;
  }

  .mock-app .jobs-inbox__counts {
    gap: 2px;
  }

  .mock-app .jobs-inbox__count {
    min-width: 18px;
    padding: 0 5px;
  }

  .mock-app .teacher-account-menu__summary {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .mock-app .mock-topbar__flow {
    border-top-color: var(--ds-border);
  }

  .mock-app .mock-flowtabs {
    gap: 2px 6px;
  }

  .mock-app .mock-flowtabs__tab,
  .mock-app .mock-main a.mock-flowtabs__tab,
  .mock-app a.mock-flowtabs__tab {
    min-height: 32px;
    padding: 0 2px 1px;
    font-size: 11.5px;
  }

  .mock-app .mock-flowtabs__statusText {
    display: none;
  }

  .mock-app .mock-flowtabs__status {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .mock-app .mock-main h1 {
    font-size: 22px;
  }

  .mock-app .dft-auth-heading h1 {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mock-app .btn {
    transition: none;
  }
}