/* Morfee, on the furō design system.
   ---------------------------------------------------------------------------
   This file was rebuilt on the system rather than adjusted towards it. The
   first version was the old tool's stylesheet with the colours and fonts
   swapped, which is why it measured wrong on everything else: body at 15px,
   sizes of 13 and 11, spacing of 7, 9 and 11 pixels, a 940px column and a
   4px corner on two elements.

   The system is short enough to hold in your head:

     spacing   multiples of 4: 4 8 12 16 20 24 32 48 64 80 112
     type      30/40, 24/32, 20/28, 16/24, 14/20, 12/18
     weights   400 and 600. Never bolder
     colour    black carries. Blue is interaction and nothing else. Orange is
               the logo wave and a render in progress
     borders   1px #DEDEDE, deepening to #707070 when you can interact
     corners   0, everywhere. Badges are the one exception
     caps      never on a label or on body copy
     motion    minimal and purposeful. 150ms on colour, 200ms on a toggle

   DM Sans and JetBrains Mono, both under the SIL Open Font License, so they can
   ship with the app and be embedded in a PDF without a licence to arrange.
   Helvetica Neue was the design system's own choice, but it is licensed and
   shipping it as a webfont is a different licence from using it on your own
   machine. They ship with the app rather than coming from Google Fonts: a tool
   that renders documents should not make an outside request on every page view,
   and nothing about the interface should depend on somebody else's uptime. */

@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- colour ------------------------------------------------------------ */
  --ink: #000000;
  --muted: #707070;
  --line: #dedede;
  --line-strong: #707070;
  --surface: #ffffff;
  --ground: #ffffff;
  --tint: #f4f4f4;
  --dark: #1a1b1e;

  --accent: #0000ee;
  --accent-deep: #0000bb;
  --orange: #ff7500;

  --success: #00b862;
  --success-soft: #f2fbf6;
  --info: #2684ff;
  --info-soft: #f2f7ff;
  --error: #e03c31;
  --error-soft: #fdf2f1;

  /* --- spacing, a 4px base ---------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --s28: 112px;

  /* --- layout ------------------------------------------------------------ */
  --gutter: var(--s12);
  --measure: 1400px;
  --prose: 66ch;
  --rail: 240px;

  /* --- type -------------------------------------------------------------- */
  --font: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;

  --fs-display: 30px;
  --lh-display: 40px;
  --fs-h2: 24px;
  --lh-h2: 32px;
  --fs-h3: 20px;
  --lh-h3: 28px;
  --fs-body: 16px;
  --lh-body: 24px;
  --fs-small: 14px;
  --lh-small: 20px;
  --fs-caption: 12px;
  --lh-caption: 18px;

  /* --- the rest ----------------------------------------------------------- */
  --radius: 0px;
  --radius-badge: 12px;
  --lift: 0 8px 24px rgba(0, 0, 0, 0.15);
  --fast: 150ms ease;
  --press: 160ms cubic-bezier(0.23, 1, 0.32, 1);

  /* Older names, so nothing that still refers to them silently loses its
     colour. New work uses the names above. */
  --text: var(--ink);
  --border: var(--line);
  --bg: var(--tint);
  --interactive: var(--accent);
  --interactive-deep: var(--accent-deep);
}

* {
  box-sizing: border-box;
}

/* The hidden attribute sets display:none through the browser stylesheet, and
   that loses to any rule of our own that carries a display. Without this the
   format panel and the choice between text and src would stand open even when
   there is nothing to choose. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  display: flex;
  flex-direction: column;
}

/* The workspace keeps a tighter gutter: the canvas runs edge to edge, so a
   48px margin on the bar would float above nothing. */
body.workspace {
  --gutter: var(--s6);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--fast);
}

a:hover {
  color: var(--accent);
}

h1,
h2,
h3 {
  letter-spacing: 0;
  text-wrap: balance;
}

/* --------------------------------------------------------------- the shell --
   The brand's own application mockup: a charcoal rail of 240px on the left with
   the mark, the navigation and this month's usage, and a stage on the right
   with a header row above the content.

   This replaced a light top bar with a dropdown. The rail is not decoration: it
   makes every destination visible at once, which is the difference between a
   tool you learn and a tool you explore. */

.shell {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
}

.rail {
  background: var(--dark);
  color: var(--surface);
  display: flex;
  flex-direction: column;
  padding: var(--s6) 0;
  overflow-y: auto;
}

.raillogo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s6) var(--s8);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--surface);
  white-space: nowrap;
}

.raillogo:hover {
  color: var(--surface);
}

.raillogo .logo {
  display: block;
  flex: none;
}

.raillogo .parent {
  color: #9a9a9c;
}

.raillogo b {
  font-weight: 600;
}

.railnav {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.navgroup {
  display: flex;
  flex-direction: column;
}

/* The 2px active border sits inside the box, so the padding gives back exactly
   those 2px: the label then starts at 24px, straight under the mark above it,
   whether the item is active or not. */
.navitem {
  padding: var(--s3) var(--s6) var(--s3) calc(var(--s6) - 2px);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: #dedede;
  border-left: 2px solid transparent;
  transition: color var(--fast), background-color var(--fast);
}

.navitem:hover {
  color: var(--surface);
  background: rgba(255, 255, 255, 0.06);
}

/* Blue, and this is the one place in the chrome where it belongs: the brand
   calls it out for links, focus rings and active borders. This is an active
   border. */
.navitem.on {
  color: var(--surface);
  font-weight: 600;
  border-left-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

.railusage {
  margin-top: auto;
  padding: var(--s6) var(--s6) var(--s4);
  border-top: 1px solid #3a3b3e;
}

.raillabel {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: #9a9a9c;
  margin-bottom: var(--s2);
}

.railbig {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--surface);
  font-variant-numeric: tabular-nums;
}

.railsub {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: #9a9a9c;
}

/* Orange, and this is the other place it belongs: energy, a thing in progress.
   The brand gives it the logo wave and the running render, and a bar filling up
   over the month is the same idea. */
.railmeter {
  height: 4px;
  background: #3a3b3e;
  margin-top: var(--s3);
}

.railmeter span {
  display: block;
  height: 4px;
  background: var(--orange);
}

.railfoot {
  padding: var(--s4) var(--s6) 0;
  border-top: 1px solid #3a3b3e;
  margin-top: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.railorg {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--surface);
  font-weight: 600;
}

.railmail {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: #9a9a9c;
  overflow: hidden;
  text-overflow: ellipsis;
}

.raillink {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: #9a9a9c;
  padding: var(--s2) 0 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--fast);
}

.raillink:hover {
  color: var(--surface);
}

.railswitch select {
  width: 100%;
  margin-top: 0;
  background: transparent;
  color: var(--surface);
  border-color: #3a3b3e;
  font-size: var(--fs-small);
  padding: var(--s2);
}

.railswitch option {
  color: var(--ink);
}

/* --- the stage --- */

.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.stagehead {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5) var(--s8);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: 0 0 auto;
}

.stagehead h1 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  margin: 0;
}

.stageright {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.stagebody {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--s8);
}

/* The builder runs edge to edge: a document preview should not sit in a margin
   we invented. */
.stagebody.flush {
  padding: 0;
  overflow: hidden;
  display: flex;
}

/* --- signed out: no rail, because there is nothing to navigate --- */

.publicbar {
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding: var(--s5) var(--gutter);
  border-bottom: 1px solid var(--line);
  max-width: var(--measure);
  margin: 0 auto;
  width: 100%;
}

.publicnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s6);
  font-size: var(--fs-small);
}

.public {
  flex: 1 1 auto;
  max-width: var(--measure);
  margin: 0 auto;
  width: 100%;
  padding: var(--s16) var(--gutter) var(--s28);
  display: block;
}

/* flex and align-items, or the mark sits seven pixels above the wordmark. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  flex: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--ink);
}

.brand .logo {
  display: block;
  flex: none;
}

.brand .parent {
  color: var(--muted);
}

.brand b {
  font-weight: 600;
}

/* --- the three steps in the workspace --- */

.steps {
  display: flex;
  gap: var(--s1);
}

.step {
  border: 1px solid transparent;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s2);
  white-space: nowrap;
  transition: color var(--fast), background-color var(--fast), border-color var(--fast);
}

.step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s5);
  height: var(--s5);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step:hover {
  background: var(--tint);
  color: var(--ink);
}

.step[aria-current="true"] {
  color: var(--ink);
  background: var(--tint);
  border-color: var(--ink);
}

.step[aria-current="true"] b {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.templatename {
  font-weight: 600;
  color: var(--ink);
}

.status {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.status.busy {
  color: var(--orange);
}
.status.error {
  color: var(--error);
}
.status.ok {
  color: var(--success);
}

/* ------------------------------------------------------------------- main -- */

.panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--s8);
}

.panel.flat {
  padding: 0;
  overflow: hidden;
}

.task {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  margin: 0 0 var(--s6);
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.task.small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 400;
  margin: 0;
  color: var(--muted);
}

.hint {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.small {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
}

/* ----------------------------------------------------------------- step 1 -- */

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  align-items: stretch;
}

@media (max-width: 900px) {
  .two {
    grid-template-columns: 1fr;
  }
}

.box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--fast);
}

.box:focus-within {
  border-color: var(--accent);
}

.boxhead {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.boxhead h2 {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
}

.boxbuttons {
  margin-left: auto;
  display: flex;
  gap: var(--s2);
}

textarea.dropbox {
  border: 0;
  resize: vertical;
  min-height: 320px;
  padding: var(--s4);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink);
  background: var(--surface);
  outline: none;
}

textarea.dropbox.drag {
  background: var(--tint);
}

.boxfoot {
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
}

.footline {
  margin: var(--s6) 0 0;
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.existing {
  margin-top: var(--s16);
  border-top: 1px solid var(--line);
  padding-top: var(--s6);
}

.existing h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  margin: 0 0 var(--s4);
}

.templatelist {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.templaterow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  transition: border-color var(--fast);
}

.templaterow:hover {
  border-color: var(--line-strong);
}

.templaterow .name {
  font-weight: 600;
}

.templaterow .over {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-caption);
}

.templaterow .rowbuttons {
  margin-left: auto;
  display: flex;
  gap: var(--s2);
}

/* ----------------------------------------------------------------- step 2 -- */

.workbench {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* No background of our own on the canvas. What you see in the frame is the
   document itself, exactly as your HTML looks in a browser tab. */
.canvasholder {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.canvasbar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s6);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.canvasbarright {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.counter {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

#canvas {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
}

.side {
  flex: 0 0 400px;
  border-left: 1px solid var(--line);
  background: var(--surface);
  overflow: auto;
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

/* --- nothing selected --- */

.emptyhead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  margin: 0 0 var(--s4);
}

.emptystate p {
  max-width: none;
}

.explain summary {
  cursor: pointer;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
  padding: var(--s2) 0;
}

.explain[open] summary {
  color: var(--ink);
  font-weight: 600;
}

.explain p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
  margin: 0 0 var(--s3);
}

/* The offer to bind everything that matches literally, in one go. */
.autoblock {
  background: var(--tint);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.autoblock h3 {
  margin: 0 0 var(--s1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
}

.autoblock p {
  margin: 0 0 var(--s3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.autolist {
  border-top: 1px solid var(--line);
  max-height: 280px;
  overflow: auto;
  margin-bottom: var(--s3);
}

.autofoot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.autorow {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  cursor: pointer;
}

.autorow input {
  margin: var(--s1) 0 0;
  flex: none;
}

.autorow .text {
  display: block;
}

.autorow .field {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
}

/* --- where you are: a clickable breadcrumb --- */

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.crumbs button {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-caption);
  color: var(--muted);
  cursor: pointer;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius);
  transition: color var(--fast), background-color var(--fast);
}

.crumbs button:hover {
  background: var(--tint);
  color: var(--ink);
}

.crumbs button[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
  cursor: default;
}

.crumbs .arrow {
  color: var(--line-strong);
}

.whatsthere {
  width: 100%;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
  margin-top: var(--s1);
}

.detectedbutton {
  border-color: var(--ink);
  background: var(--tint);
}

/* --- the four questions --- */

.questions {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.questionhead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
}

.mainquestion {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s6);
}

.mainquestion .questionhead {
  display: block;
  margin: 0 0 var(--s3);
}

details.question {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

details.question > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  transition: background-color var(--fast);
}

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

details.question > summary:hover {
  background: var(--tint);
}

details.question > summary .summarytext {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
  text-align: right;
}

details.question[open] > summary {
  border-bottom: 1px solid var(--line);
}

details.question[open] > summary .summarytext {
  display: none;
}

.questionbody {
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.questionbody p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.questionbody p b {
  color: var(--ink);
}

/* --- what is bound now, and what it produces --- */

.current {
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}

.current .label {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
}

.current .fieldname {
  font-family: var(--mono);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink);
}

.current .result {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
  margin-top: var(--s1);
}

.current .result .emptyvalue {
  font-style: normal;
}

/* The suggestion: the builder has already worked out which field this probably
   is, so the first thing in the panel is one button that is usually right. */
.suggestion button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--s3);
  text-align: left;
  font: inherit;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  margin-bottom: var(--s4);
  transition: background-color var(--fast), transform var(--press);
}

.suggestion button:hover {
  background: var(--tint);
}

.suggestion button:active {
  transform: scale(0.99);
}

.suggestion .tick {
  font-size: var(--fs-h3);
  line-height: 1;
  flex: none;
}

.suggestion .what {
  display: flex;
  flex-direction: column;
}

.suggestion .head {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
}

.suggestion .name {
  font-family: var(--mono);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 500;
}

/* --- a field or a calculation --- */

.sourcechoice {
  display: flex;
  gap: 0;
  margin-bottom: var(--s4);
  border: 1px solid var(--line);
  width: fit-content;
}

.sourcechoice button {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
  padding: var(--s2) var(--s4);
  cursor: pointer;
  transition: background-color var(--fast), color var(--fast);
}

.sourcechoice button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
}

/* --- does this repeat --- */

.repeat {
  background: var(--tint);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s4);
}

.repeat h3 {
  margin: 0 0 var(--s1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
}

/* Two equal blocks side by side are just as often "to" and "from" as a list of
   two. Then the offer belongs on screen, but it must not shout. */
.repeat.small {
  background: none;
  border-color: var(--line);
  padding: var(--s3);
}

.repeat.small p {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.repeat p {
  margin: 0 0 var(--s3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.repeatbuttons {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.repeat summary {
  cursor: pointer;
}

#selection {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* Inside a question there can be one more layer (filtering within a repeat).
   That stays collapsed until you need it. */
.questionbody details,
.repeat details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.questionbody details > summary,
.repeat details > summary {
  cursor: pointer;
  padding: var(--s2) var(--s3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.questionbody details[open] > summary,
.repeat details[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}

.questionbody code,
.calcside code,
.repeat code {
  font-family: var(--mono);
  font-size: var(--fs-caption);
}

.linehead {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
  padding: var(--s3) var(--s3) var(--s1);
}

.linerow,
.filterrow {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
  padding: 0 var(--s3) var(--s2);
}

.linerow label,
.decoraterow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.decoraterow {
  justify-content: space-between;
}

.questionbody select,
.questionbody input:not([type="checkbox"]),
.calcside select,
.calcside input,
.repeat select,
.repeat input,
.linerow select,
.linerow input,
.filterrow select,
.filterrow input {
  font: inherit;
  font-size: var(--fs-small);
  padding: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  margin-top: 0;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  transition: border-color var(--fast);
}

.questionbody select:hover,
.calcside select:hover,
.repeat select:hover {
  border-color: var(--line-strong);
}

.questionbody > label {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
}

.decoraterow input {
  flex: 1 1 140px;
}

.linerow input[type="number"] {
  flex: 0 0 72px;
  font-variant-numeric: tabular-nums;
}

.filterrow .remove,
.bindrow .remove {
  border: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: var(--fs-caption);
  color: var(--muted);
  cursor: pointer;
  padding: var(--s1) var(--s2);
  flex: none;
  transition: border-color var(--fast), color var(--fast);
}

.filterrow .remove:hover,
.bindrow .remove:hover {
  border-color: var(--error);
  color: var(--error);
}

.whatbind {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  width: fit-content;
}

.whatbind button {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  transition: background-color var(--fast), color var(--fast);
}

.whatbind button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
}

#fieldSearch {
  width: 100%;
  font: inherit;
  font-size: var(--fs-small);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--s3);
  background: var(--surface);
  color: var(--ink);
}

.rawlabel {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.fields {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-height: 420px;
  overflow: auto;
}

.fieldgroup h3 {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 var(--s2);
}

/* Generous hit areas: this is the list you click in all day. */
.fieldbutton {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  text-align: left;
  font: inherit;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  padding: var(--s2) var(--s3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--fast), border-color var(--fast), transform var(--press);
}

.fieldbutton:hover {
  background: var(--tint);
}

.fieldbutton:active {
  transform: scale(0.99);
}

.fieldbutton[aria-pressed="true"] {
  background: var(--tint);
  border-color: var(--ink);
  font-weight: 600;
}

.fieldbutton .name {
  font-family: var(--mono);
  font-size: var(--fs-caption);
}

.fieldbutton .value {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}

.fieldbutton .listmark {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.selectionfoot {
  display: flex;
  gap: var(--s2);
}

.bindingslist {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}

.bindingslist summary {
  cursor: pointer;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
}

.bindrow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  cursor: pointer;
}

.bindrow code {
  font-family: var(--mono);
  color: var(--muted);
  flex: none;
}

.bindrow span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- step 3 -- */

.saverow {
  display: flex;
  gap: var(--s4);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.namefield {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
  flex: 1 1 320px;
}

.namefield input {
  font: inherit;
  font-size: var(--fs-body);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  margin-top: 0;
  width: 100%;
}

.panelcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6);
  margin-top: var(--s6);
  max-width: 900px;
}

.panelcard h2 {
  margin: 0 0 var(--s3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
}

.panelcard h3 {
  margin: var(--s6) 0 var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  color: var(--muted);
}

.idline {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.idline code,
.endpoint {
  background: var(--tint);
  border: 1px solid var(--line);
  padding: var(--s1) var(--s2);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--fs-small);
}

.testrow {
  display: flex;
  gap: var(--s3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s4);
}

pre {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  margin: 0;
}

.codeblock {
  position: relative;
}

.codeblock .button {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
}

/* ---------------------------------------------------------------- buttons -- */

/* Black carries. The primary action is the brand's dominant colour, and that is
   what lets everything around it stay quiet. */
/* .navcta is the sign-in button in the signed-out header. It looks like a
   primary action but carries its own class so that "the primary action on this
   page" stays a single, unambiguous element. */
.primary,
.navcta {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--surface);
  font: inherit;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
  padding: var(--s3) var(--s6);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  white-space: nowrap;
  transition: background-color var(--fast), transform var(--press);
}

.primary:hover,
.navcta:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--surface);
}

/* Instant feedback on press. The one piece of motion in the system that is
   about the interface listening to you rather than about decoration. */
.primary:active,
.navcta:active,
.button:active {
  transform: scale(0.97);
}

.primary:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  padding: var(--s2) var(--s4);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  white-space: nowrap;
  transition: border-color var(--fast), background-color var(--fast), transform var(--press);
}

.button:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.button:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.button.danger {
  color: var(--error);
  border-color: var(--line);
}

.button.danger:hover {
  border-color: var(--error);
}

/* ----------------------------------------------------------------- dialog -- */
/* The only overlay in the system, and the brand allows exactly one: a modal on
   rgba(0,0,0,.5). No blur, no frosted glass, no rounded corners. */

.dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6);
  max-width: 820px;
  width: calc(100vw - var(--s12));
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--lift);
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.dialoghead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s3);
}

.dialoghead h2 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
}

.dialog .lede {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
  max-width: var(--prose);
}

.dialog .code {
  max-height: 46vh;
  overflow: auto;
  white-space: pre-wrap;
  margin: var(--s4) 0;
  background: var(--tint);
  border: 1px solid var(--line);
  padding: var(--s3) var(--s4);
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* ------------------------------------------------------------------- tour -- */
/* The balloons of the guided tour. Deliberately not modal and with no backdrop:
   everything you could click without the tour you can still click with it. The
   only thing it borrows from the brand's modal is the shadow, because it does
   float above the page and has to read as a layer. */

.tourbutton {
  font-family: var(--mono);
  padding: var(--s2) var(--s3);
  flex: none;
}

.tour {
  position: fixed;
  z-index: 40;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: var(--s4);
}

.tourhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.tourhead h3 {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
}

.tourcount {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.tour p {
  margin: 0 0 var(--s4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--muted);
}

.tourbuttons {
  display: flex;
  gap: var(--s2);
  align-items: center;
}

.tourspacer {
  flex: 1 1 auto;
}

/* Black, not blue. Blue means "you can interact with this"; the tour is only
   saying "this is the thing I am talking about". */
.tour-target {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- notices -- */

.notices {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
}

.notice {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  /* A notice sits above whatever the page opens with, and without this the
     sentence underneath starts against its bottom edge and reads as part of the
     box. */
  margin-bottom: var(--s5);
}

.notice.ok {
  border-left-color: var(--success);
  background: var(--success-soft);
}

.notice.warn {
  border-left-color: var(--info);
  background: var(--info-soft);
}

.notice.error,
.notice.blocking {
  border-left-color: var(--error);
  background: var(--error-soft);
}

/* ----------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

@media (max-width: 900px) {
  .side {
    flex-basis: 320px;
  }
  .panel {
    padding: var(--s6) var(--gutter);
  }
}