

@font-face {
  font-family:AsAUser Rhythm;

  src:local("Segoe UI"),local("Arial"),local("Liberation Sans");

  font-weight:400;

  ascent-override:75%;

  descent-override:25%;

  line-gap-override:0%;
}
@font-face {
  font-family:AsAUser Rhythm;

  src:local("Segoe UI Semibold"),local("Arial Bold"),local("Liberation Sans Bold");

  font-weight:500 650;

  ascent-override:75%;

  descent-override:25%;

  line-gap-override:0%;
}
@font-face {
  font-family:AsAUser Rhythm;

  src:local("Segoe UI Bold"),local("Arial Bold"),local("Liberation Sans Bold");

  font-weight:700 900;

  ascent-override:75%;

  descent-override:25%;

  line-gap-override:0%;
}
/* Shared geometry and typography. Layout-specific rules belong in globals.css.
   Decorative borders paint inside surfaces instead of adding to their height. */
:root {
  --baseline:.5rem;
  --line:1.5rem;
  --text-body:1rem;
  --text-label:.875rem;
  --text-meta:.75rem;
  --text-emphasis:1.125rem;
  --text-card:1.25rem;
  --font-body:AsAUser Rhythm,"Segoe UI",sans-serif;
  --font-size:var(--text-body);
  --line-height:1.5rem;
  --control-height:3rem;
  --icon-control-height:2rem;
  --surface-stroke:var(--supporting);
}
*,button,input,textarea,select {
  font-size:var(--font-size);
  line-height:var(--line-height);
}

/* A single heading scale applies to page, section and subsection headings.
   Collection-card titles are the compact card-label role, independent of tag. */
h1,.collection-name {
  --font-size:clamp(2.5rem,4vi,3.5rem);
  --line-height:4rem;
  font-size:var(--font-size);
  line-height:var(--line-height);
  font-weight:750;
  letter-spacing:-.125rem;
}
h2 {
  --font-size:clamp(1.75rem,3vi,2.25rem);
  --line-height:3rem;
  font-size:var(--font-size);
  line-height:var(--line-height);
  font-weight:700;
  letter-spacing:-.05rem;
}
h3,.collection-card-title {
  --font-size:var(--text-card);
  --line-height:2rem;
  font-size:var(--font-size);
  line-height:var(--line-height);
  font-weight:650;
  letter-spacing:0;
}

h4 {
  --font-size:var(--text-emphasis);
  --line-height:2rem;
  font-size:var(--font-size);
  line-height:var(--line-height);
  font-weight:650;
  letter-spacing:0;
}

/* Correct only leaf text blocks: nested text must not receive two corrections.
   Buttons, inputs and mixed control labels retain centred control text. */
:where(h1,h2,h3,h4,p,li,label,.field-label-text,.fields label>span,.inline-story-field>span,.role-member strong,.role-member>div>span,.translation-table td>span,.translation-table code,.capture-header strong,.capture-description,.collection-heading-state):not(:has(h1,h2,h3,h4,p,li,input,textarea,select,button)) {
  position:relative;
  top:mod(calc(-1 * (var(--line-height) / 2 + var(--font-size) / 4)),var(--baseline));
}
.field-label-text {
  display:block;
}

.button,.collection-settings-tabs [role=tab] {
  --font-size:var(--text-label);
  --line-height:var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-block-size:var(--control-height);
  border-width:var(--border);
  border-style:solid;
  padding-block:calc(.75rem - var(--border));
  padding-inline:1rem;
  font-size:var(--font-size);
  line-height:var(--line-height);
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  inline-size:var(--icon-control-height);
  block-size:var(--icon-control-height);
  padding:0;
  flex-shrink:0;
}
.collection-title-row {
  min-block-size:4rem;
}
.collection-title-row>.button {
  border-color:transparent;
  box-shadow:none;
  white-space:nowrap;
  flex-shrink:0;
}
.count {
  --font-size:var(--text-label);
  --line-height:1.5rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:top;
  block-size:2rem;
  min-inline-size:2rem;
  padding:0 .5rem;
}
.try-main {
  container-type:inline-size;
}
.media-frame {
  display:block;
  inline-size:100%;
  block-size:round(up,calc(100cqi * var(--media-aspect)),var(--baseline));
}
.media-frame img {
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:contain;
  object-position:top;
  border:0;
}

.landing-nav {
  border-block-end:0;
  border-bottom:0;
  box-shadow:inset 0 calc(-1 * var(--border)) var(--supporting);
}
.workspace-layout,
.public-index-page>main {
  margin-block-start:0;
}

/* Shared border painting for cards, forms, dialogs and administrative panels. */
.capture,.actor,.story-card,.directory-card,.account-card,.modal,.language-admin,.integration-card,.language-metadata,.translation-table-wrap,.actor-picker-popup {
  border:0;
  box-shadow:inset 0 0 0 var(--border) var(--surface-stroke);
}
.modal,.language-admin {
  box-shadow:inset 0 0 0 var(--border) var(--surface-stroke),inset 0 .25rem var(--highlight-1);
}
.capture {
  position:relative;
  box-shadow:none;
}
.capture::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 var(--border) var(--surface-stroke),inset 0 .25rem var(--highlight-1);
}
.actor {
  box-shadow:inset 0 0 0 var(--border) var(--surface-stroke),inset 0 .25rem var(--actor);
}
.story-card {
  box-shadow:inset 0 0 0 var(--border) var(--surface-stroke),inset .25rem 0 var(--actor);
}
.story-card:hover,.story-card:focus-within {
  --surface-stroke:var(--actor);
}
.management-section,.profile-section,.confirm-panel,.pricing-details>details {
  border-block-start:0;
  border-top:0;
  box-shadow:inset 0 var(--border) var(--supporting);
}
.site-footer-inner {
  border-block-start:0;
  box-shadow:inset 0 var(--border) var(--supporting);
}
.role-member,.account-user-row,.translation-table th,.translation-table td {
  border-bottom:0;
  border-top:0;
  box-shadow:inset 0 calc(-1 * var(--border)) var(--supporting);
}
.collection-invitation-list>li {
  border-block-start:0;
  box-shadow:inset 0 var(--border) var(--supporting);
}
code,kbd {
  font-family:var(--font-body);
}

.capture-header,.capture-footer {
  padding:1rem 1.5rem;
}
.capture-header {
  align-items:center;
}
.capture-header strong,.capture-description {
  --line-height:2rem;
  line-height:var(--line-height);
}
.story-board-tooltip {
  border:0;
  box-shadow:inset 0 0 0 var(--border) var(--supporting),0 .5rem 1.5rem rgb(0 0 0 / .1);
}
.fields input,.fields textarea {
  block-size:5rem;
  min-block-size:5rem;
  padding:calc(1rem - var(--border));
}
.fields input {
  /* Leave one line of native input content at the textarea's first-line origin. */
  padding-block-end:calc(2.5rem - var(--border));
}
.actor-picker-input>.icon-button {
  /* Embedded arrow is centred on the first text line, inside the field. */
  inset-block-start:calc(1rem + (1.5rem - var(--icon-control-height)) / 2);
}
.actor-header {
  min-block-size:4rem;
  padding-block:1rem;
}
.actor-header h3 {
  line-height:2rem;
}
.story-card {
  padding:1rem;
}
.story-edit-trigger {
  display:block;
}
.story-edit-pencil {
  inline-size:1rem;
  block-size:1rem;
  vertical-align:baseline;
}
.story-number,.story-labels {
  --line-height:2rem;
  line-height:var(--line-height);
}
.actor-add {
  min-block-size:var(--control-height);
}
.story-number {
  position:relative;
  top:mod(calc(-1 * (1rem + .75rem / 4)),var(--baseline));
}

/* Native fields and select contents are centred inside 3rem outer boxes. */
.dialog-label input,.dialog-label select,.account-card input:not([type=checkbox]),.profile-form input,.inline-actor-name-row input {
  min-block-size:var(--control-height);
  block-size:var(--control-height);
  padding-block:calc(.75rem - var(--border));
}
.dialog-label textarea {
  min-block-size:4.5rem;
  block-size:4.5rem;
  padding-block:calc(.75rem - var(--border));
}
.dialog-label textarea[rows="3"] {
  min-block-size:6rem;
  block-size:6rem;
}
.dialog-label textarea[rows="4"] {
  min-block-size:7.5rem;
  block-size:7.5rem;
}
.inline-story-field textarea {
  min-block-size:4rem;
  block-size:4rem;
  padding:calc(.5rem - var(--border));
}
.translation-table textarea {
  block-size:4rem;
  min-block-size:4rem;
  padding-block:calc(.5rem - var(--border));
}
.translation-table-wrap {
  max-height:round(down,45dvh,var(--baseline));
}
.modal-backdrop {
  align-items:flex-start;
  padding:2rem 1.5rem;
  overflow-y:auto;
}
.modal,.language-admin {
  max-block-size:round(down,calc(100dvh - 4rem),var(--baseline));
  max-height:round(down,calc(100dvh - 4rem),var(--baseline));
}
.disclosure-summary {
  --font-size:var(--text-emphasis);
  --line-height:2rem;
  font-size:var(--font-size);
  line-height:var(--line-height);
  font-weight:700;
  padding-block:1rem;
  cursor:pointer;
}
.disclosure-title {
  display:inline-block;
  position:relative;
  top:mod(calc(-1 * (var(--line-height) / 2 + var(--font-size) / 4)),var(--baseline));
}
.collection-settings-layout {
  display:grid;
  grid-template-columns:10rem minmax(0,1fr);
  gap:2rem;
  margin-block-start:1.5rem;
}
.collection-settings-tabs {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding-inline-end:1rem;
  align-self:start;
  box-shadow:inset calc(-1 * var(--border)) 0 var(--supporting);
  position:sticky;
  inset-block-start:1rem;
}
@media (max-width:40rem) {
  .media-frame {
    block-size:round(up,calc(100cqi * var(--media-mobile-aspect)),var(--baseline));
  }
  .collection-settings-layout {
    grid-template-columns:minmax(0,1fr);
    gap:1rem;
  }
  .collection-settings-tabs {
    padding-inline-end:0;
    box-shadow:none;
    position:static;
  }
  h1,.collection-name {
    --line-height:3rem;
  }
  h2:not(.collection-card-title) {
    --line-height:2.5rem;
  }
  .capture-header,.capture-footer {
    padding-inline:1rem;
  }
}
/* Keep page and navigation origins stable when content requires scrolling. */
html {
  scrollbar-gutter:stable;
}
