/* The six folheto components, transcribed for the web.
 *
 * These classes are a transcription of Dart widgets in
 * `packages/folheto/lib/src/components/` of the sibling inkcrawl monorepo.
 * **The metrics here may only change when that package changes.** If a number
 * below looks wrong, the answer is to check the Dart source, not to nudge it
 * until it looks right — this file and that package are supposed to draw the
 * same component.
 *
 * `.site-*` and `.page-*` in layout.css are the opposite: this site's own
 * layout, free to change. The two prefixes are kept visibly apart for exactly
 * that reason.
 *
 * ============================================================================
 * THE DECLARATION ORDER RULE — read this before editing any rule below
 * ============================================================================
 *
 * Inside a rule that uses a `--type-*` token, always write:
 *
 *     1. font: var(--type-…);
 *     2. letter-spacing: var(--type-…-tracking);
 *     3. font-feature-settings: var(--figures-tabular);
 *
 * in that order. The `font:` shorthand is not just a bundle of the properties
 * you name — it **resets every font longhand you did not name back to its
 * initial value**, including `font-feature-settings` and `font-variant-*`.
 *
 * So this silently produces proportional figures:
 *
 *     font-feature-settings: var(--figures-tabular);
 *     font: var(--type-list-body);          <- wipes the line above
 *
 * Nothing errors. Numbers simply stop lining up in a column, which is the one
 * thing `--figures-tabular` exists to prevent, and nobody notices for months.
 * This is the single most likely source of silent design drift in this file.
 *
 * `letter-spacing` is not a font longhand and survives either way, so its
 * position is convention rather than correctness — but **it must be present**.
 *
 * base.css sets `letter-spacing: var(--type-list-body-tracking)` on `body`,
 * which is -0.41px, and letter-spacing inherits. Four of the ten type roles —
 * sheet-title, verse, support and footnote — declare no tracking of their own,
 * so a rule that sets `font: var(--type-footnote)` and stops there renders
 * 0.41px tighter than folheto draws it. The `font:` shorthand does not reset
 * it, because it is not a font property.
 *
 * So every rule below that sets a `--type-*` font also sets a letter-spacing:
 * the role's own `--type-*-tracking` token where one exists, and `normal`
 * where none does. `normal` is not noise — it is the line that stops the body
 * tracking leaking in.
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * Button — packages/folheto/lib/src/components/button/folheto_button.dart
 *
 * Four roles, three sizes. The site uses primary/large and secondary/medium
 * and nothing else, and all twelve combinations are written anyway: this file
 * is the web transcription of a kit, and a half-transcribed kit is where the
 * next divergence starts. The extra roles cost about thirty lines.
 *
 * `<button>` when it does something, `<a class="folheto-button">` when it
 * navigates. Both are styled here; the anchor needs the base.css link border
 * removed, because a button is not a link even when it is one.
 * ------------------------------------------------------------------------ */
.folheto-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-sizing:border-box;
  margin:0;
  border-style:solid;
  border-width:var(--stroke-outline);
  background:none;
  font-family:var(--font-sans);
  font-weight:var(--weight-semibold);
  line-height:1;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  /* The mobile default tap highlight is a translucent rectangle that flashes
   * on touch — effectively a ripple, on exactly the devices folheto targets,
   * in a system whose press feedback is a scale and which has no ripple
   * anywhere. */
  -webkit-tap-highlight-color:transparent;
}

/* base.css gives every `a` a 1px bottom border and a padding-bottom, which is
 * how a link is said in a system with no accent colour. A button that happens
 * to be an anchor is not a link, and would otherwise draw a second rule across
 * its own bottom edge, inside its border. */
a.folheto-button{
  padding-bottom:0;
  border-bottom-width:var(--stroke-outline);
}

.folheto-button:disabled,
.folheto-button[aria-disabled="true"]{ cursor:default; }

/* -- sizes ---------------------------------------------------------------- */
.folheto-button--large{
  height:50px;
  padding:0 var(--space-xl);
  border-radius:var(--radius-card);
  font-size:17px;
}
.folheto-button--medium{
  height:var(--touch-min);
  padding:0 var(--space-lg);
  border-radius:var(--radius-control);
  font-size:16px;
}
.folheto-button--small{
  height:34px;
  /* 14px: `tokens.space.lg - 2` in the Dart source. Written as a calc rather
   * than as 14px so the relationship to the scale survives a change to
   * --space-lg. */
  padding:0 calc(var(--space-lg) - 2px);
  border-radius:var(--radius-control-small);
  font-size:14px;
}

/* -- roles ---------------------------------------------------------------- */
.folheto-button--primary{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--card);
}
.folheto-button--secondary{
  border-color:var(--ink);
  color:var(--ink);
}
/* `border-color: transparent`, never `border: none`.
 *
 * Every size above sets an explicit `height`, so with base.css's global
 * `box-sizing: border-box` the outer box is the same either way. What changes
 * is the *inner* box: a transparent 1.5px border still consumes 3px of
 * horizontal space, so a tertiary button's label sits at the same x as the
 * secondary button's label beside it. Drop the border and every tertiary label
 * shifts 1.5px inward against its neighbours. */
.folheto-button--tertiary{
  border-color:transparent;
  color:var(--ink-soft);
}
/* A contour with a 700 underlined label, and never red — the system has no
 * accent, so danger is said with weight and a rule. The underline is the only
 * warning the button carries; it is not decoration. */
.folheto-button--destructive{
  border-color:var(--ink);
  color:var(--ink);
  font-weight:var(--weight-bold);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* -- states --------------------------------------------------------------- */
/* "ink 78%" — the pressed ink of the whole system. On a filled role it is the
 * fill that softens; on the others it is the ink itself. */
.folheto-button--primary:hover{ border-color:var(--ink-pressed); background:var(--ink-pressed); }
.folheto-button--secondary:hover{ border-color:var(--ink-pressed); color:var(--ink-pressed); }
.folheto-button--tertiary:hover{ color:var(--ink-pressed); }
.folheto-button--destructive:hover{ border-color:var(--ink-pressed); color:var(--ink-pressed); }

.folheto-button:active{ transform:scale(var(--press-scale)); }

/* The only motion on the site, and therefore the only thing this query has to
 * turn off. Not `transition: none` — there is no transition; the transform
 * tracks the press rather than animating after it, which is why the Dart
 * source uses Transform.scale and not AnimatedScale. */
@media (prefers-reduced-motion:reduce){
  .folheto-button:active{ transform:none; }
}

/* Disabled. The label darkens rather than disappearing into the background —
 * *"O texto escurece, não some no fundo."* It is the fill that says the button
 * is out of reach. */
.folheto-button--primary:disabled,
.folheto-button--primary[aria-disabled="true"]{
  border-color:transparent;
  background:var(--fill-disabled);
  color:var(--ink-soft);
}
.folheto-button--secondary:disabled,
.folheto-button--secondary[aria-disabled="true"],
.folheto-button--destructive:disabled,
.folheto-button--destructive[aria-disabled="true"]{
  border-color:var(--ink-soft);
  background:none;
  color:var(--ink-soft);
}
/* Tertiary is already soft ink when enabled, so soft ink cannot also mean
 * disabled — the two states would be identical. `--value-disabled` is the
 * palette's deliberately-receded gray, and WCAG 1.4.3 exempts an inactive
 * control from the contrast floor. */
.folheto-button--tertiary:disabled,
.folheto-button--tertiary[aria-disabled="true"]{
  color:var(--value-disabled);
}

/* ---------------------------------------------------------------------------
 * Kicker — components/badge/folheto_kicker.dart
 * ------------------------------------------------------------------------ */
/* The uppercasing is `text-transform`, and it must stay `text-transform`.
 *
 * The Dart source wraps an uppercased Text in `ExcludeSemantics` inside a
 * `Semantics(label: label)` — deliberately, so a screen reader is handed the
 * ORIGINAL case while the eye gets capitals. Some screen readers read a
 * fully-uppercase string letter by letter ("A-M-2-space-S-T-U-D-I-O"), and an
 * all-caps string in the content model would be read that way with no way for
 * a reader to opt out.
 *
 * So: the string in `lib/content/` is written in sentence case, and the capitals
 * happen here. Do not "simplify" this by uppercasing the Dart. */
.folheto-kicker{
  display:block;
  font:var(--type-label);
  letter-spacing:var(--type-label-tracking);
  color:var(--ink-soft);
  text-transform:uppercase;
}

/* ---------------------------------------------------------------------------
 * Room tag — components/badge/folheto_room_tag.dart
 * ------------------------------------------------------------------------ */
.folheto-room-tag{
  display:inline-block;
  /* `--radius-cell` is 0, and that is the point rather than an oversight:
   * *"a grade de enigma não tem canto: é impressão."* Square, no corner
   * radius, ever. It is written as the token rather than as `0` so that the
   * intent survives someone reading this file cold. */
  border-radius:var(--radius-cell);
  font:var(--type-label);
  /* 1.2px as a literal, deliberately tighter than the `label` role's 1.6px
   * token. The Dart source overrides it at this one call site; taking
   * `--type-label-tracking` here would be wrong by 0.4px on every tag. */
  letter-spacing:1.2px;
  line-height:1;
  text-transform:uppercase;
}
.folheto-room-tag--outlined{
  padding:3px var(--space-sm);
  border:var(--stroke-outline) solid var(--ink);
  color:var(--ink);
}
/* 4px top and bottom against the outlined tag's 3px, and the asymmetry is
 * correct: the filled variant has no border, so it takes the 1.5px back as
 * padding and both variants sit at the same height. Do not "fix" it to 3px. */
.folheto-room-tag--filled{
  padding:4px var(--space-sm);
  border:0;
  background:var(--ink);
  color:var(--card);
}

/* ---------------------------------------------------------------------------
 * Rule — components/common/folheto_rule.dart
 *
 * Rendered as `<hr>`, which is a real thematic break: the `separator` role and
 * its orientation come free, and a screen reader announces the section change
 * that a styled `<div>` would be silent about.
 * ------------------------------------------------------------------------ */
.folheto-rule{
  height:var(--stroke-hairline);
  margin:0;
  border:0;
  background:var(--rule);
}
/* Full-width is a call-site concern, not the component's, so the design's
 * heavier section divider is a site class rather than a variant of the rule.
 * 1.5px in ink, from the design file's `color="var(--ink)"
 * thickness="var(--stroke-outline)"`. */
.site-rule--section{
  height:var(--stroke-outline);
  background:var(--ink);
}

/* ---------------------------------------------------------------------------
 * List section — components/list/folheto_list_section.dart
 * ------------------------------------------------------------------------ */
.folheto-list-section{
  padding:0 var(--space-lg);
}
/* This looks like a kicker and is not one.
 *
 * `--type-footnote` (Inter 400, 13/18) in `--tab-inactive`, NOT the `label`
 * role (Inter 700, 10, +1.6) in `--ink-soft` that `.folheto-kicker` uses. Four
 * properties differ — family weight, size, tracking and colour — and the two
 * are three lines apart in this file. This is the single most likely thing in
 * the whole stylesheet to get wrong by eye. */
.folheto-list-section__header{
  padding:0 var(--space-lg) calc(var(--space-sm) - 2px);
  font:var(--type-footnote);
  letter-spacing:normal;
  color:var(--tab-inactive);
  text-transform:uppercase;
}
.folheto-list-section__panel{
  margin:0;
  padding:0;
  border-radius:var(--radius-card);
  background:var(--card);
  list-style:none;
  /* The Dart source clips its children to the same radius. Without this the
   * first and last rows' square corners poke through the panel's rounded
   * ones wherever a row has its own background. */
  overflow:hidden;
}
.folheto-list-section__footnote{
  padding:calc(var(--space-sm) - 1px) var(--space-lg) 0;
  font:var(--type-footnote);
  letter-spacing:normal;
  color:var(--ink);
}

/* ---------------------------------------------------------------------------
 * Row — components/list/folheto_row.dart
 *
 * Only the `value` kind is transcribed. The Dart component has eight, and the
 * other seven — nav, select, toggle, support, icon, disabled, destructive —
 * are interactive controls for an app with state. This site has none, and a
 * toggle that cannot toggle is worse than no toggle.
 *
 * The `disabled` kind is deliberately absent too: the design file's one use of
 * it was the "Lançamento — " row, which this site replaces with real words
 * (see lib/content). That change is why there is nothing here to disable.
 * ------------------------------------------------------------------------ */
.folheto-row{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  position:relative;
  min-height:var(--row-min-height);
  /* 9px: `tokens.space.sm + 1` in the Dart source. */
  padding:calc(var(--space-sm) + 1px) var(--space-lg);
}
/* The separator is inset to x=16 and runs to the panel's right edge.
 *
 * A `border-top` would span the full panel width, which is the wrong drawing:
 * folheto insets a row separator so it starts under the label rather than at
 * the panel's edge. So it is an absolutely positioned pseudo-element, on every
 * row but the first — `:not(:first-child)` rather than `:not(:last-child)`
 * with a bottom edge, so the last row never draws a line against the panel's
 * rounded bottom corners. */
.folheto-row:not(:first-child)::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--separator-inset);
  right:0;
  height:var(--stroke-hairline);
  background:var(--rule);
}
.folheto-row__label{
  flex:1 1 auto;
  font:var(--type-list-body);
  letter-spacing:var(--type-list-body-tracking);
  color:var(--ink);
}
/* The value is the one place on the site where figures sit in a column and
 * must not shift. Note the order — `font:` first, then tracking, then the
 * feature settings it would otherwise have wiped. See the header of this file. */
.folheto-row__value{
  flex:0 0 auto;
  font:var(--type-list-body);
  letter-spacing:var(--type-list-body-tracking);
  font-feature-settings:var(--figures-tabular);
  color:var(--ink-soft);
  text-align:right;
}