/* The finish pass.
 *
 * Two rules that belong everywhere, kept in one file because the site loads two
 * different sets of stylesheets: the Sanctum and Signal load one, every other
 * page loads the other, and a rule that has to hold on both would otherwise be
 * written twice and drift.
 *
 * Both rules came out of measuring rather than looking. A sweep of five pages
 * at three widths found thirty-three places where a control on a phone was
 * around twenty pixels tall, and six places where text was set below thirteen
 * pixels. Neither shows up as a bug. Both are what makes a site feel unfinished:
 * a link you have to aim at, and a line you have to lean in for.
 */

/* ---------------------------------------------------------- 1. Aim

   On a phone every control is hit with a thumb, which covers about nine
   millimetres of glass. A link twenty pixels tall is a link you miss and then
   distrust. The height comes from padding, so nothing about the type changes:
   the words stay the size they were, the target around them grows.

   Inline links inside a sentence are left alone. They are part of the
   sentence, they are read rather than aimed at, and padding them would break
   the line they sit in. */
@media (max-width: 700px) and (pointer: coarse), (max-width: 700px) {
  .card-foot a,
  .sg-open,
  .sanctum-hero-link,
  .frame-link,
  .meanings,
  .site-footer a,
  .record-answer-link,
  .story-help > summary,
  .context-more > summary,
  details > summary.wide-target {
    display: inline-flex;
    align-items: center;
    /* A flex container drops the whitespace between its children, so
       "Read the Constitution so far ↗" came out with the arrow jammed against
       the last word. The gap puts the space back. */
    gap: .4em;
    min-height: 44px;
  }
  /* The mark in the header. Its picture is small on purpose; the area a thumb
     has to land in does not have to be. */
  .site-header .brand { min-height: 44px; }
}

/* ---------------------------------------------------------- 2. Read

   Nothing on this site is set below thirteen pixels. Eleven-pixel type is a
   habit from desktop-first design, where a caption sat on a large screen at
   arm's length. The people this site is for read it on a phone, and a good
   number of them are over forty. A caption nobody can read is not a caption,
   it is decoration with words in it.

   Thirteen is the floor, not the target. Anything that was already larger is
   untouched. */
small,
.stats-note,
.site-footer p,
.site-footer span,
.site-footer small,
.rail-list small,
.community-stats small,
.eyebrow,
figcaption,
.footnote {
  font-size: max(13px, 1em);
}
/* An eyebrow is a tracked uppercase label, so it reads smaller than its size
   suggests. Thirteen with its tracking is the floor for those too. */
.eyebrow { font-size: 13px; }

/* ------------------------------------------- the places the floor did not reach

   The two rules above are written loosely on purpose, so anything added later
   inherits them. These are the places where an existing rule sits at higher
   weight and wins, found by measuring the rendered page rather than by reading
   the stylesheets. Each is the same two rules, said loudly enough to land. */

/* Labels. Ten and eleven pixels of tracked uppercase is the smallest thing on
   the site and sits next to the numbers it labels, which is where a reader
   most needs to know what they are looking at. */
.right-rail .eyebrow,
.community-stats .eyebrow,
.rail-list .eyebrow,
.rail-intro .eyebrow,
.sanctum-hero .eyebrow,
.lab-teaser .eyebrow,
.rail-constitution .eyebrow { font-size: 13px; }
.story-card .meta .story-age,
.story-card .meta .topic { font-size: 13px; }

/* Captions inside the designer's components on the home page, the Constitution
   and the game panel. The paper, the weight and the colour are hers and are not
   touched; only the size, and only where it was under thirteen. */
.preview-card-head span,
.preview-story-meta span,
.preview-choice-foot span,
.country-context small,
.country-context small a,
.product-copy span,
.model-instrument .instrument-head i,
.model-instrument .instrument-dial span,
.principle-card-rule span { font-size: 13px; }

/* Controls a thumb has to find. Same rule as above, at the weight these need. */
@media (max-width: 700px) {
  .clause-provenance > summary,
  .clause-provenance p a,
  .record-article-share a,
  .principle-detail .text-link,
  .section-head .text-link,
  .product-world-head a,
  .footer-column a,
  .footer-social a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; }
  /* A single-letter social mark is nine pixels wide. The mark stays its size;
     the area around it does not have to. */
  .footer-social a,
  .footer-column a,
  .footer-bottom a { min-width: 44px; }
  .footer-bottom a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  /* The progress chip in the header. It was 35px tall, one pixel under what a
     thumb reliably finds, and it is the control a returning reader reaches for
     first. */
  .belt-progress { min-height: 44px; }
  .footer-social a { justify-content: center; }
}

/* ---------------------------------------------------------- 3. Measure

   A line past about ninety characters costs the reader the start of the next
   one: the eye travels back across the page and lands on the wrong line. These
   four run to between 102 and 117 characters on a wide screen, because they sit
   in containers built for something wider than prose. The container keeps its
   width; only the text is capped. */
.frame-steps li p,
.principle-covers,
.principle-review,
.principle-card-rule p { max-width: 68ch; }

/* The deck's chips, and two controls that slipped under the floor.

   This file exists to hold a 44px tap target and a 13px type floor on phones,
   and the filter chips added on 22 September came in at 34px and 12px: a
   control added after the rule was written does not inherit the reason for it.
   The rule is repeated here rather than in deck.css so that the floor stays in
   one place and the next thing that slips under it is caught the same way. */
@media (max-width: 700px) {
  .deck-chip { min-height: 44px; padding-block: 0; font-size: 13px; }
  .menu-toggle { min-height: 44px; }
  .stats-note a, .rail-block a, .deck-sky-sub a { display: inline-block; padding-block: 6px; }
}

/* The founder's sign-off (MC, 23 September). Here, because both shells load
   this file: the belt pages do not load site.css. It reads as part of the
   footer line, underlined like a signature is, not styled as a button. */
.footer-signoff a { color: inherit !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-signoff a:hover { text-decoration-thickness: 2px; }
.footer-year { margin-left: 4px; white-space: nowrap; }