/*
 * The Help Center's stylesheet, copied verbatim into the built site.
 *
 * This file ships to the browser, comments included, so it does not name the
 * reference product. Its provenance is recorded in docs/help-center/README.md;
 * the numbers below were re-measured directly at a 1512px viewport on
 * 2026-09-20 from two pages of the reference, which agree to the pixel:
 *
 *   band            full-bleed, y=47, 1512x285
 *   wordmark tile   124x124 at x=413, hanging 52px below the band
 *   h1              y=428, 40px/48px, 700, rgb(55,53,47)
 *   content column  708px, centred (x=402)
 *   search pill     528x67
 *   chips           39px tall, 8px/16px, radius 9999px, 14px/21px, 10px gap
 *   rows            20px/10px, 16px/22.4px, 1px #ccc bottom rule
 *   tinted block    bg #f1f1ef, radius 4px, padding 16px 16px 16px 12px
 *   section heading 20px/26px, 600, on a #f4eeee band
 *   inline marker   mono, rgb(235,87,87) on rgba(135,131,120,.15), radius 3px
 *
 * The page is white because the reference is white and the owner asked for
 * its colours. ToonShow's own ink/paper tokens are deliberately NOT used here.
 *
 * The two places the reference has no equivalent, decided here:
 *
 * - The band. The reference's is a flat saturated yellow carrying its own mark.
 *   Ours is made from colour rather than a photograph, and it is dark rather
 *   than yellow: ToonShow's mark is itself brand yellow-green (#eff539 ground,
 *   see apps/web-app/public/brand/logo.png), so a yellow band would erase the
 *   one thing the band exists to carry. What is copied is the relationship —
 *   a saturated band with a contrasting tile hanging off it — not the hue.
 * - The yellow marking on an unfinished Guide passage. The reference has no
 *   equivalent; it is Notion's own `yellow_bg`, because Notion is where the
 *   three User Guides are written and that is the mark their author made.
 */

:root {
  --text: rgb(55, 53, 47);
  --text-quiet: #787774;
  --text-chip: #555;
  --rule: #ccc;
  --rule-faint: rgba(55, 53, 47, 0.09);
  --fill: #f0f0f0;
  --fill-callout: #f1f1ef;
  --fill-section: #f4eeee;
  --marker: rgb(235, 87, 87);
  --marker-fill: rgba(135, 131, 120, 0.15);
  --brand: #eff539;
  --column: 708px;
  --gutter: 16px;
  --ui: "Inter", "Instrument Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  /* The band is full-bleed; nothing on the page may scroll sideways. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip:focus {
  left: 8px;
  top: 8px;
  z-index: 3;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}

/* The measured page begins 47px down: Notion's top bar occupies that strip.
   Ours is empty on purpose — there is no workspace chrome to put in it — but
   the band starts where it was measured to start. */
.top-strip {
  height: 47px;
}

.band {
  position: relative;
  height: 285px;
  background:
    radial-gradient(64% 150% at 20% 0%, rgba(239, 245, 57, 0.22) 0%, rgba(239, 245, 57, 0) 64%),
    #17170f;
}

.mark {
  position: absolute;
  /* 124x124 at x=413 in a 1512px viewport: eleven pixels inside the left edge
     of the 708px column, not centred. */
  left: max(var(--gutter), calc(50% - (var(--column) / 2) + 11px));
  bottom: -52px;
  width: 124px;
  height: 124px;
  border-radius: 3px;
  object-fit: contain;
}

/* The way back to ToonShow, top-left of the band.
   Narrow widths only: on a desktop the app opened this site in a second tab,
   so its own tab is still there and a link here would hand that reader a
   second copy of the app. A phone in a standalone display mode has no tab
   strip, which is the case this exists for. `tools/build-help-center-site.mjs`
   carries the whole argument.
   `display: none` is the default and the media query turns it on, so a
   viewport that never matches the query gets the state with no control rather
   than one that has to be hidden again. */
.to-app {
  display: none;
}

.column {
  width: 100%;
  max-width: calc(var(--column) + (var(--gutter) * 2));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 52px of hang, then 44px to the heading's box: the measured wordmark's lower
   edge is y=384 and the measured h1 is y=428. Written as a compound selector
   because `.column`'s padding shorthand would otherwise zero this one — it
   comes later and they have the same specificity. */
.column.head {
  padding-top: 96px;
}

h1.title {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

h1.step-title {
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tagline {
  margin: 16px 0 24px;
  font-size: 20.8px;
  line-height: 31.2px;
  font-weight: 600;
  text-align: center;
}

.pill {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 528px;
  max-width: 100%;
  height: 67px;
  margin: 0 auto 28px;
  padding: 0 10px 0 22px;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  background: #fff;
}

.pill:focus-within {
  border-color: var(--text);
}

.pill svg {
  flex: 0 0 auto;
}

.pill input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

/* #9b9a97 reads as "quiet" on a dark ground and as "illegible" on white.
   This is the lightest grey that still clears 4.5:1 against #fff. */
.pill input::placeholder {
  color: var(--text-quiet);
  opacity: 1;
}

.pill .clear {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  background: #fff;
  color: var(--text-quiet);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.pill .clear:hover {
  border-color: var(--text);
  color: var(--text);
}

.section-heading {
  margin: 32px 0 14px;
  font-size: 24px;
  line-height: 28.8px;
  font-weight: 700;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.chip {
  height: 39px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  background: var(--fill);
  color: var(--text-chip);
  font-family: inherit;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--text);
  color: var(--text);
}

.chip[aria-pressed="true"],
.chip[data-selected="true"] {
  background: #000;
  border-color: #000;
  color: #eaeaea;
  font-weight: 700;
}

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  line-height: 22.4px;
  text-decoration: none;
  color: var(--text);
}

.row:hover {
  background: #f7f7f5;
}

.row .chev {
  flex: 0 0 auto;
  color: var(--text-quiet);
}

.row-flag {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--marker);
  border-radius: 9999px;
  color: var(--marker);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.state {
  margin: 0;
  padding: 28px 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--text-quiet);
  font-size: 16px;
  line-height: 22.4px;
}

/* A group heading stands outside its rows rather than on top of them, in the
   three measurements taken from the reference's Guide at 1512px on
   2026-09-20:
   - 50px from the last rule of the previous group to the heading's box top
     (26px of declared group margin plus a 24px empty line in their source;
     50 is what the page renders and what the two pages are compared on);
   - 12px from the heading's box bottom to the rule that opens its list;
   - the heading's text sits flush with the column at 0 padding, so the rows,
     which carry 10px of their own, are inset 10px from it.
   The same 0-padding/10px-inset relationship already holds between
   `.section-heading` and `.rows` on this page; this brings the Guide's group
   headings into line with it. */
.group-heading {
  margin: 50px 0 12px;
  padding: 0;
  color: var(--text-quiet);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The first group opens under the Guide tagline, not under a list, so there
   is no previous rule for the 50px to measure from. The reference gives its
   first group no top margin of its own for the same reason; ours keeps the
   28px it already stood at, which the owner did not mark. */
.group-heading:first-child {
  margin-top: 28px;
}

.guide-tagline {
  margin: 0 0 4px;
  padding: 0 10px;
  color: var(--text-quiet);
  font-size: 15px;
  line-height: 24px;
}

.notice {
  margin: 20px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--rule-faint);
  border-left: 3px solid #d9a441;
  border-radius: 4px;
  background: var(--fill-callout);
  color: var(--text);
  font-size: 14px;
  line-height: 21px;
}

.notice.stale {
  border-left-color: var(--marker);
}

.notice strong {
  font-weight: 700;
}

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.langs a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: var(--text-quiet);
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
}

.langs a:hover {
  color: var(--text);
}

.langs a[aria-current="page"] {
  border-color: var(--rule);
  background: var(--fill);
  color: var(--text);
}

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-quiet);
  font-size: 14px;
  line-height: 21px;
  text-decoration: none;
}

.back:hover {
  color: var(--text);
}

article h1 {
  margin: 8px 0 8px;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

article h2 {
  margin: 28px 0 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

article p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 25.6px;
}

/* A Guide page's heading is followed by a rule in the brand colour, where the
   reference's tutorial index carried a banner image we never had. Colour, not
   imagery. */
.brand-rule {
  height: 4px;
  margin: 14px 0 18px;
  border-radius: 2px;
  background: var(--brand);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

footer {
  margin: 56px 0 0;
  border-top: 1px solid var(--rule);
  padding: 28px 0 64px;
}

.contact {
  margin: 0 0 24px;
  color: var(--text-quiet);
  font-size: 14px;
  line-height: 21px;
  text-align: center;
}

.contact a {
  color: var(--text-quiet);
}

.policies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.policies a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-quiet);
  font-size: 14px;
  line-height: 21px;
  text-decoration: none;
}

.policies a:hover {
  color: var(--text);
}

/* CP-TRUST-172: what product, what version of the answer, and when it was
   last checked. The one article this repository knows to be out of date does
   not get this line. */
.revision {
  margin: 24px 0 0;
  color: var(--text-quiet);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

@media (max-width: 719px) {
  .top-strip {
    height: 24px;
  }

  .band {
    height: 168px;
  }

  /* 44px is the app's own minimum tap target, set as a min-height with padding
     rather than a fixed height so the label stays centred if it wraps.
     It cannot reach either neighbour: the mark hangs from the band's lower
     edge and its top is 112px down at this width (168 - 96 + 40) while this
     control ends at 52px, and the language nav lives inside <main>. */
  .to-app {
    position: absolute;
    left: var(--gutter);
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 0 14px 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.34);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
  }

  .to-app:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  .to-app-chev {
    font-size: 22px;
    line-height: 1;
  }

  .mark {
    width: 96px;
    height: 96px;
    bottom: -40px;
  }

  .column.head {
    padding-top: 60px;
  }

  h1.title,
  h1.step-title {
    font-size: 30px;
    line-height: 38px;
  }

  .tagline {
    font-size: 18px;
    line-height: 27px;
  }

  .pill {
    height: 56px;
    padding: 0 8px 0 16px;
  }

  .policies {
    grid-template-columns: 1fr;
  }
}

/* ---- the three User Guide pages ---- */

/* A Guide page is one Notion page transcribed, so it is long-form prose at the
   same 708px column every other page of this site uses. The lead sits a step
   up from the body, the way the articles' lead does. */
.guide-lead {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 27px;
}

.guide-section {
  margin: 32px 0 0;
}

.guide-section > h2 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.guide-section p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 26px;
}

.guide-section ul,
.guide-section ol {
  margin: 0 0 12px;
  padding-left: 24px;
  font-size: 16px;
  line-height: 26px;
}

.guide-section li {
  margin: 0 0 6px;
}

/* Notion's tab set, stacked. Every panel is visible — see `tabsV1` in
   tools/build-help-center-site.mjs for why a tab widget was refused — so the
   panels need to read as a set rather than as three unrelated sections. The
   box does that without hiding anything. */
.tabset {
  margin: 0 0 12px;
  padding: 4px 16px 12px;
  border: 1px solid var(--rule-faint);
  border-radius: 4px;
  background: var(--fill-callout);
}

.tab-panel > h3 {
  margin: 16px 0 8px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}