@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Regular.8d72101cad15.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("./fonts/Lato-Bold.79203a194744.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --blue-700: #1651b2;
  --blue-600: #2567d4;
  --blue-500: #3880f6;
  --blue-400: #66a0ff;
  --navy-950: #1c2740;
  --navy-900: #2e3c5d;
  --navy-800: #42537a;
  --grey-950: #3a3f49;
  --grey-700: #787f8d;
  --grey-400: #bdc3d1;
  --grey-200: #f2f4f8;
  --surface: #0b101a;
  --surface-raised: #111a2b;
  --surface-soft: #172237;
  --border: var(--navy-900);
  --text: var(--grey-200);
  --text-muted: #a5acbb;
  /* The label on a filled button needs 4.5:1: on blue-500 it read 3.41:1, on
     blue-600 it reads 4.80:1. Same hue, one step of the ramp down. */
  --action: var(--blue-600);
  --action-hover: var(--blue-500);
  --focus: var(--blue-400);
  --danger: #e05263;
  --success: #56b889;
  --backdrop: rgb(2 8 23 / 78%);

  /* One scale per family, built from the values this interface already uses
     most. docs/ui-decisions.md records what was snapped to what. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-2xl: 28px;

  --leading-tight: 1.25;
  --leading-body: 1.5;
  --leading-micro: 1.4;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --control-sm: 32px;
  --control-md: 44px;
  --control-lg: 48px;

  --shadow-raised: 0 14px 40px rgb(0 0 0 / 24%);
  --shadow-overlay: 0 22px 60px rgb(0 0 0 / 48%);

  --motion: 140ms ease;
  --bg: var(--surface);
  --panel: var(--surface-raised);
  --panel2: var(--surface-soft);
  --line: var(--border);
  --muted: var(--text-muted);
  /* The older sheet paints link-coloured text with --accent. Text on a dark
     surface needs the light step of the ramp, not the fill step: on blue-600
     a 12px chip read 3.29:1. */
  --accent: var(--blue-400);
  --accent2: var(--blue-500);
}

body {
  background: var(--surface) !important;
  color: var(--text) !important;
  font-family: "Lato", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-size: 28px;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  line-height: 1.3;
}

a,
button,
input,
select,
textarea,
summary {
  outline: none;
}

/* The ring follows the control's own rounding instead of imposing 8px on
   everything, so a pill keeps its shape when focused. A field and a button are
   marked the same way everywhere: a field lights its own border and carries a
   soft glow — the treatment the selects already used — while a button or a
   link, which has no border to light, keeps the solid ring. */
:where(a, button, summary):focus-visible {
  box-shadow: 0 0 0 3px var(--focus);
}



/* The search field is a box with the input inside it: focusing the input drew
   the ring around the text and left the magnifier outside, which read as a
   second field nested in the first. The box takes the ring. */
.nt-search:has(input:focus-visible) {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgb(102 160 255 / 24%);
}

.nt-search input:focus-visible {
  box-shadow: none;
}

.nt-header,
.nt-tabs {
  background: var(--surface-raised);
  border-color: var(--border);
}

.nt-wave,
.nt-button,
.nt-primary-button {
  background: var(--action);
  color: var(--grey-200) !important;
}

/* The rotated mark carries uneven side bearings, so centring its box left the
   ink 2px outside the tile on one side and 4px short on the other. */
.nt-wave {
  overflow: hidden;
  line-height: 1;
}

.nt-button:hover,
.nt-primary-button:hover {
  background: var(--action-hover);
}

.nt-button.secondary {
  background: var(--navy-800);
}

.nt-button.tertiary {
  background: transparent;
  border: 1px solid var(--navy-700, var(--navy-800));
  color: var(--blue-400) !important;
}

.nt-link-button,
.nt-tabs a.active,
.nt-tabs a:hover,
.nt-top-actions a:hover {
  color: var(--blue-400);
}

.nt-tabs a.active,
.nt-tabs a:hover {
  border-color: var(--action);
}

/* Anything you tap keeps a 44px target even when it draws smaller. */
.nt-button,
.nt-primary-button {
  min-height: var(--control-md);
}

@media (max-width: 640px) {
  .nt-link-button,
  .nt-row-actions a,
  .nt-brand,
  .nt-back,
  .nt-panel > p > a {
    min-height: var(--control-md);
    display: inline-flex;
    align-items: center;
  }

  /* A tick box row keeps the full width of its column: as inline-flex each
     one shrank to its own text and two permissions ended up sharing a line. */
  .nt-form label:has(> input[type="checkbox"]),
  .nt-form label:has(> input[type="radio"]) {
    min-height: var(--control-md);
    align-items: flex-start;
  }
}

/* The badge on a card was the one chip in the product rounded at 8px while
   every other chip is a pill. */
.nt-duration {
  border-radius: var(--radius-pill);
}

/* The three-column layout put 32px between the first pair of columns and 24px
   between the second. */
.nt-two-col,
.nt-detail-layout {
  gap: var(--space-8);
}

/* A tick box beside a label that wraps landed in the gap between the two
   lines instead of beside the line it labels. */
.nt-form label:has(> input[type="checkbox"]),
.nt-form label:has(> input[type="radio"]) {
  align-items: start;
}

.nt-form label > input[type="checkbox"],
.nt-form label > input[type="radio"] {
  margin-top: 3px;
}

@media (max-width: 640px) {
  /* The three figures in a page head sat on three baselines because their
     captions wrap to different line counts. */
  .nt-page-head .nt-row-actions:has(.nt-metric) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .nt-page-head .nt-metric {
    text-align: left;
  }
}

/* The chrome sat on its own gutter: the logo and the navigation at 24px (12px
   on a phone) while every panel below them started at 32px (16px). */
.nt-header,
.nt-tabs {
  padding-inline: var(--space-8);
}

@media (max-width: 980px) {
  .nt-header,
  .nt-tabs {
    padding-inline: var(--space-4);
  }
}

/* A panel's own padding was being added to the padding of its first and last
   row, so the same card measured 20px at one end and 34px at the other. */
.nt-panel > .nt-list-row:first-child {
  padding-top: 0;
}

.nt-panel > .nt-list-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Every panel gives its heading the same distance to whatever follows it. */
.nt-panel > h2 {
  margin-bottom: var(--space-4);
}

.nt-panel > h2 + * {
  margin-top: 0;
}

/* A paragraph followed by a button had 4px between them. */
.nt-panel > p + .nt-button,
.nt-panel > p + a.nt-button,
.nt-panel > p {
  margin-top: var(--space-3);
}

/* Two sections divided by the same rule gave their headings 29px and 21px. */
.nt-section,
.nt-transcript {
  padding-block: var(--space-6);
}

/* A disclosure in a panel carried the panel's padding on top of the summary's
   own, standing 90px tall where the same control elsewhere stands 57px. */
.nt-panel.nt-disclosure {
  padding-block: 0;
}

/* The permission box had 20px above its first row and 14px under its last. */
.nt-form fieldset {
  padding: var(--space-4);
}

/* The two halves of the attach-now card started 32px apart inside one box, and
   the three figures in a page head sat on three different baselines. */
.nt-attach-now,
.nt-row-actions {
  align-items: start;
}

.nt-chat .nt-form {
  margin-top: var(--space-3);
}

/* A dashed box is the language of a drop zone or an empty field; an empty
   state is neither, and next to a real input it read as a second one. */
.nt-empty {
  border-style: solid;
  background: var(--surface);
}

/* The secondary button wore the fill a disabled control usually wears, so
   "Next" read as unavailable. */
.nt-button.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text) !important;
}

.nt-button.secondary:hover {
  background: var(--surface-soft);
  border-color: var(--action);
}

/* The search field stood 41px beside 44px controls in the same row. */
.nt-search {
  min-height: var(--control-md);
}

/* A notched legend is the browser's own fieldset chrome; the group label sits
   above its box like every other label in the form. */
.nt-form fieldset {
  position: relative;
  margin-top: 20px;
}

.nt-form legend {
  position: absolute;
  top: -20px;
  left: 0;
  padding-inline: 0;
}

/* One filled accent per view. The language Apply sat in the top bar as a
   filled primary and competed with - or on the interface page duplicated -
   the page's own primary action. */
.nt-language-switcher button[type="submit"] {
  background: var(--surface-soft);
  color: var(--text) !important;
  border: 1px solid var(--border);
}

.nt-language-switcher button[type="submit"]:hover {
  background: var(--navy-900);
}

/* A status chip was painted four ways: a green border around blue text, a dim
   slate outline that lost its shape at 2:1, a filled black pill, and a maroon
   outline at 1.7:1. One treatment, and colour only where it means something. */
.nt-status,
.nt-badge {
  border-color: var(--border);
  color: var(--text-muted);
}

.nt-status.ready,
.nt-status.active {
  border-color: var(--success);
  color: var(--success);
}

.nt-status.error,
.nt-status.capture_failed,
.nt-status.processing_failed,
.nt-status.recording {
  border-color: var(--danger);
  color: var(--danger);
}

/* A dashed empty state sat at 1.3:1 and had no visible shape. */
.nt-empty {
  border-color: var(--border);
}

/* The figures in the page head are not links. */
.nt-metric strong {
  color: var(--text);
}

/* The recording area was darker than the page behind it and read as a hole. */
.nt-player {
  background: var(--surface);
}

/* The avatar ring was the only teal in the interface. */
.nt-card-preview-fallback strong {
  border-color: var(--border);
}

/* A panel heading was 18px regular while the item titles inside it were 16px
   bold, so every child out-weighed the heading that governs it. Headings carry
   the weight; items keep the size. */
.nt-panel h2,
.nt-section h2,
.nt-document h2,
.nt-transcript > h2,
.nt-chat h2 {
  font-size: var(--font-lg);
  font-weight: 700;
}

/* The hub cards titled themselves 16px bold while every other card heading in
   the product is 18px. */
.nt-settings-link strong {
  font-size: var(--font-lg);
  font-weight: 700;
}

/* A band of cards was headed by the quietest text in the band. */
.nt-group h2 {
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The caption under a headline figure is a caption, not body text. */
.nt-metric span,
.nt-metric small {
  font-size: var(--font-xs);
}

/* "Capture failed" was tracked out in the player and set plain everywhere
   else it appears on the same page. */
.nt-audio-art.muted,
.nt-card-wave {
  letter-spacing: normal;
}

/* Fifteen computed line heights came from unitless multipliers landing on
   different sizes. Three ratios cover every role: headings read tight, body
   reads comfortable, micro text sits between. */
body {
  line-height: var(--leading-body);
}

h1,
h2,
h3,
.nt-page-head h1,
.nt-meeting-head h1,
.nt-panel h2,
.nt-section h2,
.nt-document h2 {
  line-height: var(--leading-tight);
}

.nt-card-body span,
.nt-list-row span,
.nt-status,
.nt-badge,
.nt-chat-message span,
.nt-chat-message small,
.nt-transcript time,
.nt-metric span,
.nt-settings-nav p {
  line-height: var(--leading-micro);
}

/* Snapping every corner to the scale turned the switch from a pill into a
   rounded square; a switch is a pill by definition, like a status chip. */
.nt-switch {
  border-radius: var(--radius-pill);
}

.nt-panel,
.nt-card,
.nt-filter-panel,
.nt-settings-nav {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.nt-card {
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.nt-card:hover {
  border-color: var(--blue-500);
  box-shadow: 0 14px 40px rgb(0 0 0 / 24%);
}

.nt-card-visual,
.nt-card-preview-fallback,
.nt-card-visual.ready {
  background:
    radial-gradient(circle at 48% 35%, rgb(56 128 246 / 22%), transparent 36%),
    linear-gradient(145deg, var(--navy-900), var(--navy-950));
}

.nt-card-preview-fallback,
.nt-empty .material-symbols-outlined {
  color: var(--blue-400);
}

/* The group label after the filter bar sat 8px tighter than every later one:
   the gaps between groups carry the group's own bottom margin as well. */
.nt-filter-panel {
  margin-bottom: var(--space-8);
  padding: 4px 20px;
}

.nt-filter-panel[open] {
  padding-bottom: 20px;
}

.nt-filter-panel > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
}

.nt-badge,
.nt-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 8px;
}

.nt-badge {
  background: var(--blue-700);
}

.nt-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.nt-filters label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 14px;
}

.nt-filters input,
.nt-filters select,
.nt-form input:not([type="checkbox"]):not([type="radio"]),
.nt-form select,
.nt-form textarea,
.nt-language-switcher select,
.nt-org-switcher select {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 12px;
}

.nt-filters select,
.nt-form select,
.nt-language-switcher select,
.nt-org-switcher select,
.nt-panel select,
.nt-share-controls select {
  width: 100%;
  appearance: none;
  cursor: pointer;
  font: inherit;
  line-height: 1.25;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.nt-form input[type="checkbox"],
.nt-form input[type="radio"] {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--action);
}

.nt-form label:has(> input[type="checkbox"]),
.nt-form label:has(> input[type="radio"]) {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

/* In a settings panel the fields stop at a readable width, so a submit button
   stretched across the whole panel sat far wider than anything above it. */
.nt-panel .nt-form > button,
.nt-panel .nt-form > .nt-button,
.nt-panel .nt-form > .nt-form-actions {
  align-self: start;
}

/* Every field in a panel ends at the same right edge. Capping them at 320px
   left the empty-state blocks and lists beside them reaching 170px further. */
.nt-panel .nt-form input:not([type="checkbox"]):not([type="radio"]),
.nt-panel .nt-form textarea,
.nt-panel .nt-form .nt-select {
  width: 100%;
}

/* An empty-state block or a list is part of the panel's rhythm, not glued to
   the control above it. */
.nt-panel > .nt-empty,
.nt-panel > .nt-list + .nt-form,
.nt-panel > .nt-form + .nt-list,
.nt-panel > .nt-form + .nt-empty {
  margin-top: 12px;
}

.nt-list-row form {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* A full-width select pushed the member's own line into wrapping after its
   separator, leaving a dangling dot. The controls drop to their own line
   before the wording has to break. */
.nt-list-row .nt-select {
  width: auto;
  min-width: 150px;
}

.nt-list-row {
  flex-wrap: wrap;
}

.nt-list-row > div:first-child {
  min-width: min(100%, 240px);
  flex: 1 1 auto;
}

/* The divider inside a panel inherited the text colour, so a near-white line
   ran straight under the button with no space around it. */
.nt-panel hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.nt-panel > code {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

/* A plain link in a panel body rendered in the body colour and read as text. */
.nt-panel > p > a {
  color: var(--blue-400);
}

/* A long diagnostic list in one 440px column left the other two thirds of the
   row blank for thousands of pixels, so it takes the whole row. */
.nt-ops-grid > .nt-panel-full {
  grid-column: 1 / -1;
}

/* The permission list sat 1px from its own border on every side. */
.nt-form fieldset {
  padding: 8px 12px 12px;
}

.nt-form legend {
  padding-inline: 4px;
}

/* Every settings page kept its own content width - 856px, 1224px or 1408px -
   so the column jumped sideways as you moved through the navigation. */
.nt-settings-content {
  width: 100%;
  max-width: 960px;
}

.nt-panel.wide {
  max-width: none;
}

/* The transcript section carried no side padding, so its box sat 8px wider
   than the two sections above it. */
.nt-transcript {
  padding-inline: 8px;
}

.nt-transcript > h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

/* The side panel was stretched to the height of the transcript column, so an
   empty conversation left a void of several hundred pixels above the
   composer. */
.nt-detail-layout {
  align-items: start;
}

.nt-chat:not(:has(.nt-chat-message)) {
  height: auto;
}

/* The filter panel is a disclosure, but a flex summary drops the browser's
   own marker, leaving a bordered box with no sign that it opens. */
.nt-filter-panel > summary::after,
.nt-disclosure > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  border: solid var(--text-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 120ms ease;
}

.nt-filter-panel[open] > summary::after,
.nt-disclosure[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.nt-disclosure > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.nt-disclosure > summary::-webkit-details-marker {
  display: none;
}



/* The two ways to start a recording stood on two different grids: one spread a
   field, a tick box and a submit across three different widths, the other
   floated in a 360px column level with the page heading. They are the same
   kind of block, so they take the same shape — the explanation on the left,
   the controls in one column on the right, every control the same width. */
/* Both cards are one column: the explanation, then the controls under it, the
   card no wider than they need. Spread across the width of the list below,
   two thirds of each card was empty space. */
.nt-attach-now,
.nt-action-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

.nt-attach-now,
.nt-disclosure-panel {
  max-width: 420px;
}

.nt-action-intro {
  align-self: start;
}

/* The disclosure below it is a block of its own and keeps the same gap to the
   list as the panel above keeps to it. */
.nt-disclosure-panel {
  margin-bottom: var(--space-6);
}

.nt-action-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.nt-action-form .nt-button {
  width: 100%;
}

/* A label belongs to the field under it, not halfway between two fields. */
.nt-action-form > label:not(.nt-check) {
  margin-bottom: calc(var(--space-2) - var(--space-3));
}

/* The transcript column puts its title, its rules and its panels on one left
   edge: the sections carried 8px of side padding the heading above them did
   not. */
.nt-document,
.nt-section,
.nt-transcript {
  padding-inline: 0;
}

/* The side panel is as tall as it needs to be; a fixed height left a dead band
   between the note and the composer. */
.nt-chat {
  height: auto;
  min-height: 0;
}

/* The permission group was the one native fieldset in the interface. */
.nt-form fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.nt-form legend {
  padding-inline: 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.nt-form textarea {
  border-color: var(--border);
}

/* A one-line empty state had 38px of room above and below it but only 5px at
   its sides. */
.nt-empty {
  padding: 24px 20px;
}

/* Two panels stacked in the settings content had no gap at all: their borders
   met in one bright line and their corners pinched. */
.nt-settings-content > .nt-panel + .nt-panel,
.nt-settings-content > .nt-panel + .nt-section {
  margin-top: 20px;
}

/* A list that holds nothing but an empty state drew its own border around the
   dashed one, so that box looked doubled next to its siblings. */
.nt-list:has(> .nt-empty:only-child) {
  border: 0;
  padding-inline: 0;
}

/* Rows sitting straight in a panel carried the inset meant for a bordered
   list, so every separator stuck out 16px to the left of its own text. */
.nt-panel > .nt-list-row {
  padding-inline: 0;
}

/* A tick box is drawn by the browser; on a dark panel it arrived as a pale
   native square among fully themed controls. */
.nt-form input[type="checkbox"],
.nt-form input[type="radio"],
.nt-form .nt-check input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--navy-800);
  border-radius: var(--radius-xs);
  background: var(--surface);
  cursor: pointer;
}

.nt-form input[type="radio"] {
  border-radius: 50%;
}

.nt-form input[type="checkbox"]:checked,
.nt-form input[type="radio"]:checked {
  border-color: var(--action);
  background: var(--action);
}

.nt-form input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  margin: 1px auto 0;
  border: solid var(--grey-200);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.nt-form input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 4px auto;
  border-radius: 50%;
  background: var(--grey-200);
}

.nt-form input[type="checkbox"]:focus-visible,
.nt-form input[type="radio"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A date field hands four parts to the browser: the box, the calendar glyph,
   the segmented value and the highlight on the segment being typed. Left alone
   they arrive in Chrome's own grey-and-white palette — the glyph pure white,
   the empty "dd.mm.yyyy" in the colour of a real value, the active segment a
   pale blue block with dark text, which inverts this theme. All four are
   brought back to the palette the selects beside them use. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: dark;
}

.nt-date input::-webkit-calendar-picker-indicator {
  display: none;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

/* Empty is marked by fields.js: CSS cannot see it on these types. */
input[type="date"].is-empty::-webkit-datetime-edit,
input[type="time"].is-empty::-webkit-datetime-edit,
input[type="datetime-local"].is-empty::-webkit-datetime-edit {
  color: var(--text-muted);
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-year-field:focus,
::-webkit-datetime-edit-hour-field:focus,
::-webkit-datetime-edit-minute-field:focus,
::-webkit-datetime-edit-second-field:focus,
::-webkit-datetime-edit-ampm-field:focus {
  background: var(--action);
  border-radius: var(--radius-xs);
  color: #fff;
  outline: 0;
}

/* The number field grew a grey Chrome spinner on focus while the identical
   field beside it never showed one. The keyboard and the arrow keys still
   change the value; the grey block goes. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* The native corner grip is a grey hatch drawn over the field's own rounded
   corner and its focus ring, and it is the only hatched texture in the
   interface. The field still resizes vertically by its edge. */
textarea {
  resize: vertical;
}

textarea::-webkit-resizer {
  display: none;
}

/* The page scrollbar arrived in Chrome's neutral grey, the one grey surface in
   a blue-black interface, and appeared and vanished between pages. */
html {
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--border);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

.nt-select {
  position: relative;
  display: inline-grid;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.nt-filters .nt-select,
.nt-share-controls .nt-select {
  width: 100%;
}

.nt-form .nt-select {
  width: min(100%, 320px);
}

.nt-org-switcher .nt-select {
  width: clamp(140px, 12vw, 220px);
}

/* Wide enough for the longest language name; at 112px "Ukrainian" in its own
   spelling was cut off in the one place a user picks a language. */
.nt-language-switcher .nt-select {
  width: 144px;
}

/* The Apply button sits right beside the select trigger, so it matches its
   height instead of standing 7px shorter. */
.nt-language-switcher button[type="submit"],
.nt-org-switcher button[type="submit"] {
  min-height: 44px;
}

.nt-list-row .nt-select,
.nt-inline-form .nt-select {
  width: auto;
  min-width: 150px;
}

.nt-select-native {
  position: absolute !important;
  inset: 50% auto auto 50%;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.nt-select-trigger {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  line-height: 1.25;
  padding: 8px 12px 8px 12px;
  text-align: left;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.nt-select-trigger::after {
  width: 8px;
  height: 8px;
  justify-self: center;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform 140ms ease;
}

.nt-select-trigger:hover {
  border-color: var(--navy-800);
  background: var(--surface-soft);
}

.nt-select-trigger:focus-visible {
  border-color: var(--focus);
  outline: 0;
  box-shadow: 0 0 0 3px rgb(102 160 255 / 24%);
}

.nt-select.is-open .nt-select-trigger {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgb(102 160 255 / 24%);
}

.nt-select.is-open .nt-select-trigger::after {
  transform: translateY(2px) rotate(225deg);
}

.nt-select-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.nt-select.is-invalid .nt-select-trigger {
  border-color: var(--danger, #ef6b73);
}

.nt-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nt-select-menu[popover] {
  position: fixed;
  inset: auto;
  z-index: 1000;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  border: 1px solid var(--navy-800);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow:
    0 22px 60px rgb(0 0 0 / 48%),
    0 0 0 1px rgb(102 160 255 / 8%);
  color: var(--text);
  padding: 4px;
  scrollbar-color: var(--navy-700) transparent;
  scrollbar-width: thin;
}

.nt-select-option {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  line-height: 1.25;
  padding: 8px 8px;
  text-align: left;
}

.nt-select-option::before {
  color: var(--blue-400);
  content: "✓";
  font-weight: 700;
  opacity: 0;
}

.nt-select-option:hover,
.nt-select-option:focus-visible {
  background: var(--surface-soft);
}

.nt-select-option:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.nt-select-option[aria-selected="true"] {
  background: rgb(56 128 246 / 16%);
  color: var(--blue-400);
}

.nt-select-option[aria-selected="true"]::before {
  opacity: 1;
}

.nt-select-option:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .nt-select-trigger,
  .nt-select-trigger::after {
    transition: none;
  }
}

/* The two buttons used to stand in the last cell of the field grid, level with
   the fields but with no label of their own, so the row ended on something
   that looked unfinished. They take a row of their own under the fields. */
.nt-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.nt-filter-actions .nt-button {
  min-height: var(--control-md);
}

.nt-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* The settings pages reached without an organization in the path render no
   side navigation. Without this the lone content section landed in the 260px
   nav column and everything inside it spilled out. The column only exists on
   the desktop layout, where the narrow-screen rules do not apply. */
@media (min-width: 981px) {
  .nt-settings-layout:has(> .nt-settings-nav) {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

.nt-settings-nav {
  position: sticky;
  top: 124px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.nt-settings-nav p {
  margin: 16px 8px 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.nt-settings-nav a {
  min-height: var(--control-md);
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: var(--text-muted);
  padding: 8px 8px;
  text-decoration: none;
}

.nt-settings-nav a:hover,
.nt-settings-nav a.active {
  background: var(--surface-soft);
  color: var(--text);
}

.nt-settings-nav a.active {
  box-shadow: inset 3px 0 var(--action);
}

.nt-settings-content {
  min-width: 0;
}

.nt-settings-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.nt-settings-link {
  display: grid;
  gap: 4px;
  color: var(--text);
  text-decoration: none;
}

.nt-settings-link span {
  color: var(--text-muted);
}

dialog,
.nt-share-dialog {
  position: fixed;
  inset: 0;
  width: min(720px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-raised);
  color: var(--text);
  padding: 0;
  overflow: auto;
}

dialog::backdrop,
.nt-share-dialog::backdrop {
  background: var(--backdrop);
}

.nt-share-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-raised);
  padding: 20px 24px 12px;
}

.nt-share-dialog > :not(.nt-share-head) {
  margin-inline: 24px;
}

.nt-share-dialog > :last-child {
  margin-bottom: 24px;
}

body:has(dialog[open]) {
  overflow: hidden;
}

.nt-settings-layout > *,
.nt-settings-grid > *,
.nt-settings-cards > *,
.nt-two-col > *,
.nt-ops-grid > *,
.nt-detail-layout > * {
  min-width: 0;
}

.nt-list-row strong,
.nt-panel code,
.nt-secret code,
.nt-domain code {
  overflow-wrap: anywhere;
}

/* A meta line holds whole values such as a timestamp: it wraps between them,
   never through one. */
.nt-list-row span {
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 980px) {
  /* The settings navigation in two columns left empty cells and made the
     highlighted row a half-width box that read as a text field. */
  .nt-settings-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The tick box beside the Meet link took the row's free width and crushed
     the field to 62px, clipping its placeholder mid-word. */
  .nt-attach-now,
  .nt-action-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Below the desktop width the header's right-hand group no longer fits
     beside the brand, and in Russian and Ukrainian it pushed the whole page
     into sideways scrolling. The same treatment the phone layout already
     uses starts here: the links step aside and the redundant Apply button
     goes (the language select submits itself). */
  .nt-top-actions {
    min-width: 0;
    gap: 12px;
  }

  /* Links step aside, but not the avatar: it is the way into the account. */
  .nt-top-actions > a:not(.nt-avatar) {
    display: none;
  }

  /* The Apply button stays: the select's onchange submit is blocked by the
     page's script policy, so this button is the only way to change language.
     It only gets tighter padding to help the row fit. */
  .nt-language-switcher button[type="submit"] {
    padding-inline: 8px;
  }

  .nt-org-switcher .nt-select {
    width: clamp(120px, 20vw, 180px);
  }

  .nt-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nt-settings-layout {
    grid-template-columns: 1fr;
  }

  .nt-settings-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nt-settings-nav p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  /* The tab strip reserved 84px around a single 16px line, and its underline
     ran to the very edge of the screen while every other element kept the
     page gutter. */
  .nt-tabs {
    min-height: 48px;
    padding-inline: 8px;
  }

  /* A second sticky layer sat under a header that is now two rows tall, so
     the header sliced the tab labels in half. */
  .nt-content-tabs {
    position: static;
  }

  /* Dragging a field's corner is not a phone gesture. */
  .nt-form textarea {
    resize: none;
  }

  /* The organisation picker takes the free width of its own row instead of
     clipping a seven-letter name after five. */
  .nt-org-switcher .nt-select {
    width: 100%;
    min-width: 0;
  }

  /* On a phone the page head cannot keep its title and its action side by
     side; letting the two stack is what the meeting head already does. */
  .nt-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .nt-page-head > * {
    min-width: 0;
  }

  .nt-filters,
  .nt-settings-nav,
  .nt-settings-cards {
    grid-template-columns: 1fr;
  }

  .nt-settings-nav p {
    grid-column: auto;
  }

  /* The tab strip reserves 84px so a long label can take two lines, but the
     links stayed 42px tall and left the lower half of the strip empty. */
  .nt-tabs a {
    height: auto;
    min-height: 42px;
  }

  /* The phone rules hide every button in the switcher, which takes away both
     the select's trigger and the only working submit. Both come back. */
  .nt-language-switcher button[type="submit"] {
    display: inline-flex;
    padding-inline: 8px;
  }

  .nt-language-switcher .nt-select-trigger {
    display: inline-flex;
  }

  /* On a phone the brand, the switchers and the account controls cannot share
     one 60px row. The brand keeps the first row with its wordmark, and the
     controls move together onto a second row instead of breaking into three
     ragged lines. */
  .nt-header {
    height: auto;
    flex-wrap: wrap;
    padding-block: 8px;
    row-gap: 8px;
  }

  .nt-brand {
    flex: 1 1 auto;
  }

  .nt-brand span:last-child {
    display: inline;
  }

  /* Four controls cannot share one 347px row: "Sign out" was squeezed to 41px
     and its wording spilled across the Apply button. They take two rows of
     their own instead - the organisation and the account on one, the language
     and its Apply on the next. */
  .nt-top-actions {
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-left: 0;
    gap: 8px 8px;
  }

  .nt-org-switcher {
    grid-column: 1;
    grid-row: 1;
  }

  .nt-top-actions > form:not(.nt-language-switcher) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .nt-top-actions > form:not(.nt-language-switcher) button {
    white-space: nowrap;
  }

  .nt-language-switcher {
    grid-column: 1 / -1;
  }

  /* Outside the organisation pages there is no organisation switcher, so the
     language control moves up beside the account row instead of leaving
     "Sign out" alone on a half-empty line. */
  .nt-top-actions:not(:has(.nt-org-switcher)) .nt-language-switcher {
    grid-column: 1;
    grid-row: 1;
  }

  /* A scrollable tab strip drew its scrollbar across the page on a phone. */
  .nt-content-tabs {
    scrollbar-width: none;
  }

  .nt-content-tabs::-webkit-scrollbar {
    display: none;
  }

  .nt-share-dialog > :not(.nt-share-head) {
    margin-inline: 16px;
  }
}

/* ===================================================================
   Composition: one rule per kind of block
   =================================================================== */

/* A stacked form in a panel ran its fields to the full width of the card —
   917px for a two-option select — while its submit kept the width of its own
   label, so field and button shared nothing but a left edge. Every such form
   is now one column of controls: the fields and the button that sends them
   have the same width, whatever the card is. Rows that are built to sit on
   one line (.nt-inline-form, filter rows) keep their own layout. */
.nt-panel {
  container-type: inline-size;
}

.nt-panel .nt-form:not(.nt-inline-form):not(.nt-filters) > .nt-button,
.nt-panel .nt-form:not(.nt-inline-form):not(.nt-filters) > button {
  width: 100%;
}

/* In a card wider than a form needs, the column stops at 360px; in a narrow
   card the form fills it, so the fields keep the width of the list or the
   empty state stacked above them. */
@container (min-width: 480px) {
  .nt-form:not(.nt-inline-form):not(.nt-filters) {
    max-width: 360px;
  }
}

/* Two short values of the same kind are a pair, not two full-width rows. */
.nt-field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.nt-field-pair > label {
  min-width: 0;
}

/* The role badge stood at the far edge of a full-width band, 800px from the
   name it qualifies, and on its own vertical axis. It belongs beside the
   name, on the name's own line — which is what the phone layout already did. */
.nt-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nt-identity-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

/* The group label above a band of cards was the quietest text in the band;
   the band's own items read first. */
.nt-group > h2 {
  margin-bottom: var(--space-3);
  color: var(--text);
}



/* Nineteen permissions in one column made the card taller than the page and,
   on a phone, wrapped two to a line by accident of label length. */
.nt-form fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-2) var(--space-4);
}

/* The column holding that group is given the width two of them need, so the
   nineteen rows stop making the card taller than the page. */


.nt-form legend {
  grid-column: 1 / -1;
}

/* An empty state is one sentence. Drawn as a 320px-tall box the width of the
   field under it, it read as another control; it is now a quiet line in the
   place the first row would have taken. */
.nt-empty.small {
  min-height: 0;
  align-items: flex-start;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
}

/* A list inside a card drew a second rounded border 20px inside the card's
   own, both doing the same job. */
.nt-panel > .nt-list {
  border: 0;
  border-radius: 0;
}

/* Reference material is not part of the form it was parked under. */
.nt-reference code {
  display: block;
  margin-bottom: var(--space-3);
}

.nt-reference > :last-child {
  margin-bottom: 0;
}

/* Three figures at the top of Operations sat 12px apart, so the captions of
   two neighbours read as one sentence. */
.nt-page-head .nt-row-actions:has(.nt-metric) {
  gap: var(--space-8);
}

/* Three cards of equal rank were laid in two columns, leaving the third
   alone in a row with an empty cell beside it. */
@media (min-width: 1100px) {
  .nt-settings-cards:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* On a phone the settings navigation — ten items, 580px — stood above the
   page it navigates to, so every settings page opened on its own menu. */
@media (max-width: 980px) {
  .nt-settings-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .nt-settings-nav {
    order: 2;
  }

  .nt-settings-content {
    order: 1;
  }
}

/* A submit beside a select was bare text next to a bordered control, so the
   pair read as a field with a hint after it. */
.nt-list-row form:has(select) .nt-link-button {
  min-height: var(--control-md);
  padding-inline: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* A card whose whole content is one stacked form was drawn 960px wide around a
   360px column, so two thirds of it was empty. The card is as wide as the
   column it holds. */
/* Every settings page is the same two-column grid, so a card's width no
   longer depends on what happens to be inside it. */
.nt-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.nt-settings-column {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

/* Two cards side by side share a width and a top line; each keeps the height
   its own content needs, so a short card does not carry 180px of empty space
   just to match its neighbour. */
.nt-settings-grid > .nt-panel,
.nt-settings-grid > aside.nt-panel,
.nt-settings-grid > .nt-settings-column {
  align-self: start;
}

@media (max-width: 980px) {
  .nt-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The thumbnail carried a generic group icon and the meeting's initial, one
   above the other, plus a state chip in the corner: three marks in one zone,
   two of them identical on every card. The initial is the one that identifies
   the call, so it is the only one left, at the size a thumbnail needs. */
.nt-card-preview-fallback strong {
  width: 56px;
  height: 56px;
  font-size: var(--font-xl);
}

/* A chip over the thumbnail is a chip: the same pill the status chips use. */
.nt-duration {
  border-radius: var(--radius-pill);
}

/* The operations grid laid cards of 180 to 560px into fixed rows, so every row
   opened a hole the height of its tallest card. The cards are independent, so
   they flow down columns instead of standing in rows. */
.nt-ops-grid {
  display: block;
  columns: 3;
  column-gap: var(--space-5);
}

.nt-ops-grid > .nt-panel {
  display: block;
  width: 100%;
  margin-bottom: var(--space-5);
  break-inside: avoid;
}

.nt-panel-full {
  margin-bottom: var(--space-5);
}

@media (min-width: 641px) and (max-width: 1100px) {
  .nt-ops-grid {
    columns: 2;
  }
}

@media (max-width: 760px) {
  .nt-ops-grid {
    columns: 1;
  }
}

/* A sub-heading inside a card had no space above it, so it read as one more
   stat row under the rule of the row before it. */
.nt-panel h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-md);
}

@media (max-width: 640px) {
  /* The header's two stacked rows ended at different places: the account row
     reached the right edge, the language row stopped 70px short. Both rows now
     run the full width, so the header has one right edge. */
  /* Only the switcher inside the header fills its row; the one floating over
     the sign-in page kept its own width, or it hung 16px off the left edge. */
  .nt-top-actions .nt-language-switcher {
    width: 100%;
  }

  .nt-language-floating {
    max-width: calc(100% - 32px);
  }

  .nt-top-actions .nt-language-switcher > label,
  .nt-top-actions .nt-language-switcher .nt-select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  /* The tab strip kept 8px of side padding where the page keeps 16, so the
     current tab's underline crossed the page gutter. */
  .nt-tabs {
    padding-inline: var(--space-4);
  }
}

.nt-form .nt-check input[type="checkbox"] {
  margin-top: 3px;
}

/* Between the phone layout and the desktop one the header still carries
   everything — brand, search, two selects, three links and the avatar — and in
   Ukrainian that row was 43px wider than the window on every page. The group
   is allowed to shrink there: the search gives up its share first, then the
   two selects narrow to the width of a language name. */
@media (min-width: 641px) and (max-width: 1100px) {
  /* Squeezed into the free space the field became a 26px box: below this width
     it steps aside, as it already does on a phone, instead of standing there
     too narrow to type in. */
  .nt-search {
    display: none;
  }

  .nt-top-actions {
    min-width: 0;
  }

  .nt-language-switcher .nt-select,
  .nt-org-switcher .nt-select {
    width: clamp(132px, 17vw, 160px);
    min-width: 0;
  }

}

/* A rejected sign-in said so in body-coloured text with no container and no
   space under it, so the message ran into the first label and nothing on the
   card read as an error. The block now carries the error colour, a quiet tint
   of it behind, and the space a block owes the control below. */
.nt-form-errors {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: rgb(224 82 99 / 10%);
  color: var(--text);
}

.nt-form-errors ul {
  margin: 0;
  padding-left: var(--space-5);
}

.nt-form-errors ul:has(> li:only-child) {
  padding-left: 0;
  list-style: none;
}

/* A field-level error belongs to its field: it sits under it in the error
   colour, not as another line of body text. */
.nt-form-error,
.nt-form .errorlist {
  margin: 0;
  padding: 0;
  color: var(--danger);
  font-size: var(--font-sm);
  list-style: none;
}

/* The sign-in page is the first screen of the product and was still on the
   old teal: a green glow behind the card and a teal button, while every page
   behind it is blue. It loads the same stylesheets as the application now, and
   its backdrop follows the same ramp. */
.nt-login {
  background:
    radial-gradient(circle at 50% 0, rgb(37 103 212 / 28%) 0, transparent 45%),
    var(--surface);
}

.nt-login > section {
  background: var(--surface-raised);
  border-color: var(--border);
}

/* The section strip above the meeting's content now says which section you are
   in, the same way the page tabs in the header do. */
.nt-content-tabs a.active {
  color: var(--blue-400);
  box-shadow: inset 0 -2px 0 var(--blue-400);
}

@media (max-width: 640px) {
  /* Three figures side by side in 94px columns left every caption wrapping
     over three lines. On a phone each figure takes a row and keeps its caption
     on the same line. */
  .nt-page-head .nt-row-actions:has(.nt-metric) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-3);
  }

  .nt-page-head .nt-metric {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    text-align: left;
  }
}

/* A list inside a card used to sit in its own bordered box, so its rows kept
   the padding that box needed; without the box the rows stood 16px right of
   the card's own heading. */
.nt-panel > .nt-list > .nt-list-row {
  padding-inline: 0;
}

/* The group label sat 18px right of the controls it labels, because a legend
   carries its own side padding on top of the fieldset's. */
.nt-form legend {
  padding-inline: 0;
}

/* A status chip wore the same outline as a secondary button, so a read-only
   marker invited a tap. A chip is a tint, a button is an outline. */
.nt-status,
.nt-badge {
  border-color: transparent;
  background: var(--surface-soft);
}

.nt-status.ready,
.nt-status.active,
.nt-status.recording,
.nt-status.error,
.nt-status.capture_failed,
.nt-status.processing_failed {
  border-color: transparent;
}

/* A tick box draws at 18px; the label around it carries the 44px a finger
   needs, and the box lines up with the first line of a label that wraps. */
.nt-form .nt-check,
.nt-form label.nt-check {
  min-height: var(--control-md);
  padding-block: var(--space-2);
  align-items: flex-start;
}

@media (max-width: 640px) {
  /* Four section links scrolled sideways inside a strip with no visible
     scrollbar, so in Ukrainian the last one simply ended at the page edge.
     They wrap instead. */
  .nt-content-tabs {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    overflow-x: visible;
  }
}

/* The organisation's name is the place, not the page: the page says which
   section you are in. */
.nt-breadcrumb {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* A recording that does not exist was drawn as a 300px empty box with the
   state printed in it, repeating the state already in the page head and
   pushing the summary below the fold on a phone. */
.nt-no-media {
  margin: 0 0 var(--space-6);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  /* The phone header is two rows of chrome — the logo, the organisation, the
     language — and it was the part that stayed on screen while the page's own
     navigation scrolled away. They swap: the chrome scrolls, the three tabs
     stay. */
  .nt-header {
    position: static;
  }

  .nt-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
  }
}

/* The diagnostics card sat flush against the bottom of the card columns, two
   rounded corners pinching into one seam. */
.nt-ops-grid {
  margin-bottom: var(--space-5);
}

/* A row's divider is the width of the row's content, not of the padding
   around it. */
.nt-list {
  padding-inline: var(--space-4);
}

.nt-list > .nt-list-row {
  padding-inline: 0;
}

.nt-panel > .nt-list {
  padding-inline: 0;
}

/* The submit sat 12px under the last field while the fields stood 20px apart,
   so it read as part of the field above it. */
.nt-form > .nt-button:last-child,
.nt-form > button[type="submit"]:last-child {
  margin-top: var(--space-2);
}

/* Three sibling sections headed their content at 17px, 34px and 33px. */
.nt-document > h2,
.nt-section > h2,
.nt-transcript > h2 {
  margin: 0 0 var(--space-3);
}

/* The search field was the one surface in the product with its own fill. */
.nt-search {
  background: var(--surface);
  border-color: var(--border);
}

/* Three cards that are links read as three static blocks of text. */
.nt-settings-link {
  position: relative;
  padding-right: var(--space-8);
}

.nt-settings-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-5);
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: solid var(--text-muted);
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  transition: border-color var(--motion), transform var(--motion);
}

.nt-settings-link:hover::after {
  border-color: var(--blue-400);
  transform: rotate(45deg) translate(2px, -2px);
}

/* The top bar said nothing about where you are, while the row under it did. */
.nt-top-actions a.active {
  color: var(--blue-400);
}

/* The alert's icon hangs beside the message instead of indenting only its
   first line. */
.nt-form-errors {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
}

/* An explanation under the error belongs on its own full-width row: dropped
   into the icon column it was squeezed to nothing and spilled out of the box. */
.nt-form-errors > p {
  grid-column: 1 / -1;
  margin: 0;
}

.nt-login > section > :last-child {
  margin-bottom: 0;
}

/* The disclosure in a panel stood 90px tall where the same bar on the calls
   page stands 58px: the panel's padding was added to the summary's own. */
.nt-disclosure-panel {
  padding-block: 0;
}

.nt-disclosure-panel .nt-disclosure[open] {
  padding-bottom: var(--space-5);
}



.nt-content-tabs [role="tab"] {
  cursor: pointer;
}

.nt-detail-main > section:focus {
  outline: none;
}

/* The calendar behind a date field is drawn by the page, not by the browser,
   so it carries the same surface, border, radius and blue as everything else.
   The field itself still takes typed segments. */
.nt-date {
  position: relative;
  display: block;
}

.nt-date > input {
  width: 100%;
  padding-right: 44px;
}

.nt-date-trigger {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.nt-date-trigger:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.nt-date-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.nt-date-panel {
  position: fixed;
  inset: auto;
  z-index: 1000;
  margin: 0;
  width: 280px;
  padding: var(--space-3);
  border: 1px solid var(--navy-800);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  color: var(--text);
}

.nt-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.nt-date-head strong {
  font-size: var(--font-md);
}

.nt-date-step {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-lg);
  line-height: 1;
}

.nt-date-step:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.nt-date-week,
.nt-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.nt-date-week span {
  padding-bottom: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-xs);
  text-align: center;
  text-transform: capitalize;
}

.nt-date-day {
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-sm);
}

.nt-date-day:hover {
  background: var(--surface-soft);
}

.nt-date-day.is-outside {
  color: var(--grey-700);
}

.nt-date-day.is-today {
  border-color: var(--navy-800);
}

.nt-date-day.is-selected {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
  font-weight: 700;
}

.nt-date-day:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* The conversation panel kept the old palette and the old rhythm: a teal
   bubble among blue surfaces, 8px of padding inside a 16px card, the same 8px
   between two messages as inside one, and the composer glued to the last
   answer. */
.nt-chat h2 {
  margin: 0 0 var(--space-3);
}

.nt-chat-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-right: var(--space-1);
}

.nt-chat-message {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.nt-chat-message.user {
  border-color: rgb(37 103 212 / 45%);
  background: rgb(37 103 212 / 16%);
}

.nt-chat-message > span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-muted);
}

.nt-chat-message p {
  margin: 0;
}

.nt-chat-message small {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
}

/* The composer is a block of its own, not the end of the last answer. */
.nt-chat .nt-form {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* The question panel used to float in a column of its own beside the content,
   tied to nothing and as tall as the conversation made it. It is a corner
   widget now, the shape every site uses for a chat: a launcher in the bottom
   right, a panel of one fixed size above it, and the thread scrolling inside
   (measured against a live widget: launcher 54px, panel 400 x 730 at a 900px
   window). */
.nt-ask {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.nt-ask-launcher {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-overlay);
}

.nt-ask-launcher:hover {
  background: var(--action-hover);
}

.nt-ask-launcher .material-symbols-outlined {
  font-size: 26px;
}

.nt-ask.is-open .nt-ask-launcher {
  background: var(--surface-soft);
  color: var(--text);
}

.nt-ask .nt-chat {
  position: static;
  order: -1;
  width: 380px;
  height: min(620px, calc(100dvh - 160px));
  max-height: none;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
}

.nt-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.nt-chat-head h2 {
  margin: 0;
}

.nt-chat-head h2:focus {
  outline: none;
}

.nt-ask .nt-chat-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .nt-ask {
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
  }

  .nt-ask .nt-chat {
    width: 100%;
    height: min(560px, calc(100dvh - 140px));
  }
}

/* The avatar is the way to your own profile: it points there, so it carries a
   pointer and a hover, and its initial is not text to select. */
.nt-avatar {
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background var(--motion), box-shadow var(--motion);
}

.nt-avatar:hover {
  background: var(--action);
  color: #fff;
}

.nt-avatar:focus-visible {
  box-shadow: 0 0 0 3px var(--focus);
}

/* A dialog holding one form: the same card as a panel, with a head that names
   it and a close button in the corner. */
.nt-dialog {
  position: fixed;
  inset: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  overflow: auto;
}

.nt-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.nt-dialog-head h2 {
  margin: 0;
}

.nt-dialog-head h2:focus {
  outline: none;
}

.nt-dialog-intro {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
}

.nt-dialog .nt-form {
  max-width: none;
}

.nt-dialog .nt-form > .nt-button:last-child {
  width: 100%;
}

@media (max-width: 640px) {
  /* Two actions side by side at 111px each broke their labels over three
     lines; on a phone they take the width of the page, one under the other. */
  .nt-page-head .nt-row-actions:not(:has(.nt-metric)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .nt-page-head .nt-row-actions:not(:has(.nt-metric)) .nt-button {
    width: 100%;
  }
}

/* In the settings menu a group label and a menu item were the same colour, so
   the only difference was size: the labels now read as labels — dimmer, wider
   letter spacing, a rule above the group — and the items read as items, in the
   full text colour with their own row. */
.nt-settings-nav p {
  margin: var(--space-5) var(--space-2) var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--grey-700);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nt-settings-nav p:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.nt-settings-nav a {
  color: var(--text);
}

.nt-settings-nav a:not(.active):hover {
  color: var(--text);
}

/* A short list of facts about the account: the label on the left in the quiet
   voice, the value beside it. */
.nt-facts {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-3);
}

.nt-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
}

.nt-facts dt {
  color: var(--text-muted);
}

.nt-facts dd {
  margin: 0;
}

@media (max-width: 480px) {
  .nt-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* The avatar is now the way into the account, so it stays in the header at
   every width and keeps a finger-sized target on a phone. */
@media (max-width: 640px) {
  .nt-top-actions .nt-avatar {
    width: 44px;
    height: 44px;
    justify-self: end;
  }
}

/* app.css hides every link in the header on a phone; the avatar is a link now
   and has to stay. On a phone it sits where a phone puts it: the top right of
   the header, level with the product name, instead of starting a row of its
   own under the controls. */
@media (max-width: 640px) {
  .nt-header {
    position: relative;
  }

  .nt-top-actions a.nt-avatar {
    display: grid;
    position: absolute;
    top: var(--space-2);
    right: var(--space-4);
  }
}

/* A meta line under a row title carries whole sentences here, and 12px asks
   the reader to lean in. The caption scale starts at 14. */
.nt-list-row span,
.nt-card-body span {
  font-size: var(--font-sm);
}

/* The rows in a settings card are descriptions, not list entries: their text
   gets the room to breathe. */
.nt-panel > .nt-list-row {
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.nt-panel > .nt-list-row span {
  line-height: var(--leading-body);
}

/* The line under a card's title says what the card is for; it is not a row of
   its own. */
.nt-panel > h2 + .nt-muted {
  margin: calc(var(--space-3) * -1) 0 var(--space-4);
}

/* A team used to print its own name twice — once as the title and once inside
   a rename box that looked like plain text — with the member controls hanging
   under it. Each team is a small block: the name and its state, then the two
   things you can do to it, each on its own line of controls. */
.nt-team {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.nt-team:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.nt-team-head {
  display: grid;
  gap: var(--space-1);
}

.nt-team-head span {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.nt-team-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.nt-team-form input {
  flex: 1 1 100%;
  min-height: var(--control-md);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.nt-team-form .nt-select,
.nt-team-form select {
  flex: 1 1 140px;
  min-width: 0;
}

.nt-team-form .nt-button {
  flex: 0 0 auto;
}

/* The field focus treatment is written last: the rules that paint a field's
   border live further down the file, and :where() carries no weight of its
   own, so the border never lit up. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nt-form input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.nt-form select:focus-visible,
.nt-form textarea:focus-visible,
.nt-filters input:focus-visible,
.nt-filters select:focus-visible,
.nt-team-form input:focus-visible,
.nt-login input:focus-visible {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgb(102 160 255 / 24%);
}

/* The picker under a team is how you add someone to it, not the list of who is
   already in it — the line above it says so. */
.nt-team-form-label {
  flex: 1 1 100%;
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* The people already in a team, each with their own role and a way out. */
.nt-team-members {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

.nt-team-members li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.nt-team-members li > span {
  flex: 1 1 100%;
}

.nt-team-members form {
  display: contents;
}

.nt-team-members .nt-select,
.nt-team-members select {
  flex: 1 1 140px;
  min-width: 0;
}

/* The question dialog is the same card as any other, with the two answers
   side by side under it. */
.nt-confirm p {
  margin: 0 0 var(--space-5);
}

.nt-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.nt-confirm-actions .nt-button {
  flex: 1 1 140px;
}

/* A field that the pressed button cannot work without says so, in the error
   colour, right under itself. */
.nt-field-error,
.nt-form .nt-field-error,
.nt-team-form .nt-field-error {
  flex: 1 1 100%;
  margin: 0;
  color: var(--danger);
  font-size: var(--font-sm);
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--danger);
}

/* A field in error keeps the error colour while it is focused: the person is
   looking at it precisely because something is wrong. */
input.is-invalid:focus-visible,
select.is-invalid:focus-visible,
textarea.is-invalid:focus-visible,
.nt-form input.is-invalid:not([type="checkbox"]):not([type="radio"]):focus-visible,
.nt-form select.is-invalid:focus-visible,
.nt-form textarea.is-invalid:focus-visible,
.nt-team-form input.is-invalid:focus-visible {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgb(224 82 99 / 24%);
}

/* A group of tick boxes shows the same error frame a single field would. */
fieldset.is-invalid {
  border-color: var(--danger);
}

/* In a list row the state and the action beside it sit on one line: the row
   centres them instead of hanging them from its top edge, and the action is
   the size of the text it stands next to. */
.nt-list-row > .nt-row-actions {
  align-items: center;
}

.nt-list-row .nt-row-actions .nt-link-button {
  font-size: var(--font-sm);
}


/* The copy control is where every service puts it: a square icon button in
   the top-right corner of the block it copies (GitHub uses 42x28, Tailwind
   32x32, both icon-only and both leave the text where it is). It never
   changes size — on success the icon turns into a tick for two seconds. */
.nt-secret {
  position: relative;
  padding-right: 56px;
}

.nt-copy {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.nt-copy:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--text);
}

.nt-copy svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nt-copy .nt-copy-done,
.nt-copy.is-copied .nt-copy-idle {
  display: none;
}

.nt-copy.is-copied .nt-copy-done {
  display: block;
  color: var(--success);
}

/* The domain row's check is a field with its own action beside it: the field
   wears the same border and height as every other field in the product, and
   the button stands a full gap away instead of touching it. */
.nt-domain form:has(input[name="txt_value"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.nt-domain input[name="txt_value"] {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 12px;
}

.nt-domain input[name="txt_value"]:focus-visible {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgb(102 160 255 / 24%);
}

/* The form that adds to a list starts a new block: it keeps the panel's gap
   from the last row's rule instead of sitting on top of it. */
.nt-domain + .nt-form,
.nt-join-link + .nt-form,
.nt-invitation + .nt-form {
  margin-top: var(--space-5);
}

/* The organization a person is in is part of the top bar, in the quiet weight
   of the navigation rather than competing with the product name. */
.nt-org-name {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-muted, #aab4be);
  font-size: var(--font-sm);
}

@media (max-width: 900px) {
  .nt-org-name {
    display: none;
  }
}

/* The one download button offered only the recording, while the written
   results sat unreachable. They now share a small menu that opens in place. */
.nt-download-menu {
  position: relative;
}

/* The tab strip scrolls sideways on a narrow screen, and a scrolling box
   clips whatever hangs out of it — the open menu included. While it is open
   the strip stops clipping. */
.nt-content-tabs:has(.nt-download-menu[open]) {
  overflow: visible;
}

.nt-download-menu > summary {
  padding: 12px 0;
  color: #aab4be;
  list-style: none;
  cursor: pointer;
}

.nt-download-menu > summary::-webkit-details-marker {
  display: none;
}

.nt-download-menu[open] > summary,
.nt-download-menu > summary:hover {
  color: var(--blue-400);
}

.nt-download-menu-items {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  display: grid;
  min-width: 220px;
  padding: var(--space-2);
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2, var(--surface));
  box-shadow: 0 12px 28px rgb(0 0 0 / 35%);
}

.nt-download-menu-items form {
  display: block;
}

.nt-download-menu-items button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-align: left;
}

.nt-download-menu-items button:hover {
  background: rgb(255 255 255 / 6%);
}

.nt-download-menu-items span {
  color: var(--muted);
}

/* The summary's section titles carried the body's own size and weight and no
   gap above them, so purpose, key points, decisions and questions ran on as
   one block of text. A heading inside a document now looks like a heading. */
.nt-document h3 {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--text);
  font-size: var(--font-lg);
  font-weight: 600;
}

.nt-document > h3:first-child {
  margin-top: 0;
}

.nt-document ul {
  margin: 0;
  padding-left: var(--space-5);
}

.nt-document li + li {
  margin-top: var(--space-1);
}

/* On a phone the menu opened past the right edge of the screen; there it
   hangs from its own right side instead. */
@media (max-width: 640px) {
  .nt-download-menu-items {
    right: 0;
    left: auto;
  }
}

/* The drawn wave is a row of block characters with wide letter spacing: on a
   phone it ran a hundred pixels past both edges of the screen. */
.nt-audio-art {
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 640px) {
  .nt-audio-art {
    font-size: var(--font-xl);
    letter-spacing: 2px;
  }

  /* and the download menu keeps itself inside the screen: on a phone it
     hangs from the tab strip itself, not from the word "Download", which
     stands near the right edge and pushed the panel off the screen. */
  .nt-download-menu {
    position: static;
  }

  .nt-download-menu-items {
    right: auto;
    left: 0;
    min-width: 0;
    max-width: 100%;
  }
}