/* TextStyleHub — front-end styles
 *
 * Design direction: typographic specimen sheet, built for a phone.
 * Each style is presented the way a type foundry presents a face — name,
 * provenance, sample — except the provenance is a real Unicode block and the
 * sample is the visitor's own text. The page's typography IS the product, so
 * the interface type stays deliberately quiet and the styled output carries all
 * the personality.
 *
 * No webfonts. On a page where 72% of traffic is mobile and the query is
 * impatient, a blocking font request costs more than any display face is worth.
 */

:root {
  /* Violet-black ink on pale violet-grey. Chosen against three things: the
     SaaS default (white cards, light grey, blue accent) that this site used to
     be, and the two palettes every AI design lands on — cream with a terracotta
     accent, and near-black with acid green. Violet reads young enough for an
     18-24 audience without tipping into the pastel-cute register the nearest
     competitor occupies, and it sits comfortably beside monospace, which the
     codepoint labels need. */
  --ink:        #17141f;
  --ink-soft:   #635c73;
  --paper:      #efedf4;
  --card:       #ffffff;
  --rule:       #d9d4e3;
  --rule-soft:  #e8e4ef;
  --accent:     #5b2be8;
  --accent-tint:#efe9fd;
  --accent-ink: #ffffff;
  --ok:         #1a7f52;
  --warn:       #8a5a00;
  --no:         #b02a3c;

  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Broad Unicode coverage for the sample text. Without this, some Android
     builds fall back to a font missing the maths alphanumeric block and render
     boxes even though the codepoints are valid. */
  --glyph: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2",
           "Noto Sans Math", "DejaVu Sans", var(--sys);

  --gap: 14px;
  --radius: 10px;

  /* Type scale. Deliberately tight and few — five steps, not twelve. */
  --t-hero: clamp(26px, 5.4vw, 40px);
  --t-band: 12px;
  --t-name: 13px;
  --t-body: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sys);
  font-size: 16px;
  line-height: 1.5;
  /* Avoids the iOS Safari zoom-on-focus behaviour that would otherwise fire
     when the input font-size drops below 16px. */
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* ---- Masthead ---------------------------------------------------------- */

.masthead {
  padding: 34px 0 20px;
}

/* Plain text, deliberately. We publish an article explaining that styled
   Unicode is announced character-by-character by screen readers and does not
   match a plain-text search. Setting our own headline in it would contradict
   that in the most visible place on the site. */
.masthead h1 {
  margin: 0 0 8px;
  font-size: var(--t-hero);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 16ch;
}

.masthead p {
  margin: 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.5;
}

/* ---- Sticky composer ----------------------------------------------------
   Competitors put the input at the top of the page and lose it the moment you
   scroll, so changing your text means scrolling back up. Keeping it pinned is
   the single biggest usability difference on a phone. */

.composer {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.composer-inner {
  display: flex;
  gap: 8px;
  align-items: center;
}

.composer input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 13px 14px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}

.composer input:focus-visible,
.composer input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 64, 216, 0.16);
}

.composer button {
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  padding: 13px 12px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
}

/* ---- Filters ------------------------------------------------------------ */

.filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0 2px;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: inherit;
  font-size: 13px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Specimen grid ------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--gap) 0 60px;
}

@media (min-width: 720px)  { .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.specimen {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 13px 14px 11px;
  transition: border-color 120ms ease;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.specimen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.specimen-name {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* The signature detail: every specimen is stamped with the actual Unicode
   range it comes from. It's real provenance, it costs nothing to render, and
   no competitor shows it. */
/* The codepoint stamp. Real provenance, shown on every specimen — the one
   detail no competitor carries, so it gets the accent tint rather than a
   neutral grey. */
.specimen-block {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
  background: var(--accent-tint);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 3px 7px;
  border: 0;
  border-radius: 4px;
  cursor: help;
}

.specimen:hover { border-color: var(--rule); }

.specimen-sample {
  font-family: var(--glyph);
  font-size: 22px;
  line-height: 1.4;
  word-break: break-word;
  min-height: 1.4em;
  /* Combining-mark styles can stack above the line and collide with the row
     above; the padding reserves room for them. */
  padding-top: 2px;
}

.specimen-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--rule);
  padding-top: 9px;
  margin-top: auto;
}

.compat {
  display: flex;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.compat span { color: var(--ink-soft); }
.compat .is-full    { color: var(--ok); }
.compat .is-partial { color: var(--warn); }
.compat .is-filtered{ color: var(--no); text-decoration: line-through; }

.copy {
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 16px;
  min-height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.copy[data-state="copied"] {
  background: var(--accent);
  border-color: var(--accent);
}

.copy[data-state="failed"] {
  background: var(--no);
  border-color: var(--no);
}

/* ---- Live region -------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.notice {
  margin: 0 0 var(--gap);
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warn);
  border-radius: 7px;
  background: var(--card);
  font-size: 14px;
}

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

/* ---- Long-form page sections -------------------------------------------
   Prose on these pages exists to be read, not skimmed past on the way to the
   tool, so it gets a proper measure and generous line height rather than the
   compressed treatment the specimen cards use. */

.prose,
.faq,
.article {
  max-width: 68ch;
  margin-left: 0;
  margin-right: auto;
}

.prose h2,
.faq h2 {
  margin: 34px 0 12px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.prose p,
.faq p {
  margin: 0 0 15px;
  font-size: 16.5px;
  line-height: 1.62;
  color: #2b2f38;
}

.faq { margin-top: 12px; }

.faq-item {
  border-top: 1px solid var(--rule);
  padding-top: 15px;
  margin-top: 15px;
}

.faq-item h3 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 650;
}

/* The featured style on its own page. It's why the visitor is here, so it
   gets the accent border and a larger sample — the answer to the query,
   not one card among twenty-three. */
.specimen.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.specimen.is-featured .specimen-sample {
  font-size: 27px;
}

@media (min-width: 720px) {
  .specimen.is-featured { grid-column: 1 / -1; }
}

/* ---- Internal links ----------------------------------------------------- */

.linkblock {
  max-width: 68ch;
  margin: 44px auto 60px 0;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}

.linkgroup { margin-bottom: 22px; }

.linkgroup h2 {
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.linkgroup ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.linkgroup a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
}

.linkgroup a:hover { border-color: var(--accent); color: var(--accent); }
.linkgroup a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Hub lists ---------------------------------------------------------- */

.hublist {
  margin: 18px 0 40px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px)  { .hublist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1040px) { .hublist { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }

.hublist a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
}

.hublist a:hover { border-color: var(--accent); }
.hublist-title { font-size: 14.5px; font-weight: 600; }

.hublist-preview {
  font-family: var(--glyph);
  font-size: 16px;
  color: var(--ink-soft);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}

.article-cta {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.article-cta a {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
}

/* ---- Site chrome --------------------------------------------------------
   The plugin supplies its own nav and footer rather than relying on the
   theme's. Two reasons: the link graph depends on every hub being one hop from
   the homepage, which a theme menu the user hasn't configured would not
   deliver; and these pages bypass the theme's own templates anyway. */

.sitenav {
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}

.sitenav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  flex-wrap: wrap;
}

.sitenav-brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
}

.sitenav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.sitenav ul::-webkit-scrollbar { display: none; }

.sitenav a:not(.sitenav-brand) {
  display: inline-block;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 7px;
  white-space: nowrap;
}

.sitenav a:not(.sitenav-brand):hover { color: var(--accent); background: var(--paper); }
.sitenav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The composer is sticky; the nav must not be, or two sticky bars eat the
   viewport on a phone. The nav scrolls away and the composer stays. */
.sitefoot {
  border-top: 1px solid var(--rule);
  background: var(--card);
  padding: 26px 0 34px;
  margin-top: 40px;
}

.sitefoot p { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-soft); max-width: 60ch; }
.sitefoot-meta { font-size: 12.5px; }

.sitenav-logo { max-height: 28px; width: auto; display: block; }

/* ---- Worked examples ---------------------------------------------------- */

.example {
  max-width: 900px; margin: 0 auto 30px; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px;
}
.example-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.example-head h2 { margin: 0; font-size: 17px; }
.example-meta {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 4px; padding: 2px 7px; white-space: nowrap;
}
.example-brief { margin: 6px 0 14px; color: var(--ink-soft); font-size: 14px; max-width: 62ch; }

.example-body { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .example-body { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } }

.example-preview { border: 1px solid var(--rule); border-radius: 8px; padding: 13px; background: var(--paper); }
.example-name { font-family: var(--glyph); font-weight: 700; font-size: 16px; margin-bottom: 6px; word-break: break-word; }
.example-bio { font-family: var(--glyph); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.example-count { margin-top: 9px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }

.example-why { margin: 0; padding: 0 0 0 2px; list-style: none; counter-reset: ex; }
.example-why li { border-top: 1px solid var(--rule); padding: 11px 0 3px; }
.example-why li:first-child { border-top: 0; padding-top: 0; }
.example-line { font-family: var(--glyph); font-size: 14.5px; margin-right: 8px; word-break: break-word; }
.example-tag {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.example-why p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: #2b2f38; max-width: 62ch; }

.example-note {
  margin: 15px 0 0; padding: 10px 13px; border-left: 3px solid var(--accent);
  background: var(--paper); border-radius: 6px; font-size: 13.5px; max-width: 66ch;
}

/* ---- Homepage tool cards ------------------------------------------------ */

.hub-heading { max-width: 1120px; margin: 34px auto 12px; font-size: 17px; }

.toolcards {
  display: grid; gap: 12px; grid-template-columns: 1fr;
  max-width: 1120px; margin: 0 auto 50px;
}
@media (min-width: 700px)  { .toolcards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1040px) { .toolcards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }

.toolcard {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 15px 17px; text-decoration: none; color: var(--ink);
}
.toolcard:hover { border-color: var(--accent); }
.toolcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toolcard-title { display: block; font-size: 15px; font-weight: 650; margin-bottom: 5px; }
.toolcard-text { display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

/* ---- Symbol grid -------------------------------------------------------- */

.symgrid {
  display: grid; gap: 7px; margin: 16px 0 10px;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}
.sym {
  font: inherit; background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 10px 4px 6px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 62px;
}
.sym:hover { border-color: var(--accent); }
.sym:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sym[data-state="copied"] { background: var(--accent); border-color: var(--accent); }
.sym[data-state="copied"] .sym-char, .sym[data-state="copied"] .sym-cp { color: #fff; }
.sym-char { font-family: var(--glyph); font-size: 21px; line-height: 1.1; }
.sym-cp { font-family: var(--mono); font-size: 9.5px; color: var(--ink-soft); }
.sym-note { max-width: 64ch; font-size: 13.5px; color: var(--ink-soft); margin: 0 0 26px; }

/* ---- Decoration options -------------------------------------------------
   Collapsed by default. Someone who wants one styled line should not have to
   scroll past five control rows to reach the results. */

.options { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 8px; }
.options > summary {
  cursor: pointer; font-size: 13px; font-weight: 650; color: var(--ink-soft);
  padding: 4px 0; list-style: none;
}
.options > summary::-webkit-details-marker { display: none; }
.options > summary::before { content: "+ "; font-family: var(--mono); }
.options[open] > summary::before { content: "− "; }
.options > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.options-body { padding: 6px 0 4px; }
.optgroup { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.optlabel {
  flex: 0 0 62px; font-size: 11.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft);
}
.optrow { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.optrow::-webkit-scrollbar { display: none; }
.optrow .chip { font-size: 12.5px; padding: 6px 11px; }
.options-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }

@media (max-width: 560px) {
  .optgroup { flex-direction: column; align-items: stretch; gap: 4px; }
  .optlabel { flex: none; }
}

/* ---- Touch target sizing ------------------------------------------------
   Measured on a 390px viewport: copy buttons were 38px, chips 33px and nav
   links 39px, all under Apple's 44px guideline. On a page whose entire
   interaction is tapping, that is the interaction being slightly wrong
   everywhere. */

.sitenav a:not(.sitenav-brand) { min-height: 44px; display: inline-flex; align-items: center; }
.sym { min-height: 68px; }

/* ---- Short viewports (the on-screen keyboard) ---------------------------
   With a keyboard open the usable height drops to roughly 420px, and at that
   size the masthead, composer, filters and options panel filled the entire
   viewport — zero result cards were visible. Someone typing saw nothing change,
   which defeats the point of live preview.

   So on short viewports the page sheds everything that is not the tool. */

@media (max-height: 560px) {
  .sitenav { display: none; }

  .masthead { padding: 10px 0 6px; }
  .masthead h1 { font-size: 17px; margin-bottom: 0; }
  .masthead p { display: none; }

  .composer { padding: 6px 0; }
  .composer input { padding: 9px 12px; }
  .composer button { padding: 9px 10px; }

  .filters { padding: 6px 0 0; }
  .chip { min-height: 36px; padding: 5px 11px; font-size: 12.5px; }

  /* The options panel stays reachable but collapses out of the way. */
  .options { margin-top: 6px; padding-top: 5px; }
  .options:not([open]) > summary { padding: 2px 0; }

  .specimen { padding: 9px 12px 8px; gap: 6px; }
  .specimen-sample { font-size: 18px; }
  .grid { gap: 9px; padding: 9px 0 30px; }
  .copy { min-height: 38px; padding: 8px 14px; }
}

/* Tool card icons — inline SVG following the text colour. */
.toolcard-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink-soft);
}
.toolcard-icon svg { width: 20px; height: 20px; display: block; }
.toolcard:hover .toolcard-icon { background: var(--accent); color: #fff; }
.toolcard-body { display: block; }

/* ---- Category bands -----------------------------------------------------
   The 28 styles come from eleven different parts of Unicode, and which block a
   style belongs to is what determines how widely it renders. Banding by it
   turns a wall of cards into labelled sections and puts real provenance in the
   structure rather than in a tooltip. */

.band {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0 2px 7px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-band);
  font-weight: 700;
}

.band:first-child { margin-top: 4px; }

.band-name {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.band-meta {
  min-width: 0;
  flex: 0 1 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hidden when the visitor filters to one category — the chip already says
   which one, so the band header would only repeat it. */
.grid.is-filtered .band { display: none; }

@media (max-height: 560px) { .band { margin-top: 12px; } }

/* Two columns rather than three on desktop.
   Most categories hold two to four styles, so a three-column grid left the last
   row of every band two-thirds empty — the banding read as broken layout rather
   than structure. Two columns fills cleanly and gives each sample more width,
   which suits the content since the sample IS the content. */
@media (min-width: 1040px) { .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- Footer and plain pages --------------------------------------------- */

.sitefoot-lede { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); max-width: 60ch; }

.sitefoot-nav ul {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 14px; padding: 0; list-style: none;
}
.sitefoot-nav a {
  font-size: 13.5px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 1px;
}
.sitefoot-nav a:hover { color: var(--accent); border-color: var(--accent); }
.sitefoot-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.page-updated {
  max-width: 68ch; margin-left: 0; margin-right: auto 18px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
}

/* Brand mark in the nav. Sits beside the site title as live text rather than
   being baked into an image, so it follows a rename and stays selectable. */
.sitenav-brand { display: inline-flex; align-items: center; gap: 9px; }
.sitenav-mark { width: 26px; height: 26px; border-radius: 6px; display: block; }

/* ---- Label key ----------------------------------------------------------
   The compat row and codepoint stamp are the densest information on each card
   and the only parts a visitor cannot decode unaided. Collapsed by default so
   it costs nothing to someone who does not need it. */

.key { margin: 12px 0 2px; }
.key > summary {
  cursor: pointer; list-style: none;
  font-size: 13px; color: var(--ink-soft); padding: 4px 0;
}
.key > summary::-webkit-details-marker { display: none; }
.key > summary::before { content: "? "; font-family: var(--mono); color: var(--accent); font-weight: 700; }
.key > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.key-body {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: 13px 15px; margin-top: 6px;
}
.key-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); max-width: 68ch; }
.key-body p:last-child { margin-bottom: 0; }
.key-body strong { font-weight: 650; }
.key-chip {
  font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  background: var(--accent-tint); padding: 3px 7px; border-radius: 4px; margin-right: 6px;
}
.key-body .compat { display: inline-flex; gap: 5px; margin-right: 6px; vertical-align: baseline; }
.key-note { font-family: var(--mono); font-size: 11.5px; }

/* ---- Homepage pitch ------------------------------------------------------ */

.pitch { max-width: 1120px; margin: 40px auto 0; }
.pitch > h2 { font-size: 17px; margin: 0 0 12px; }
.pitch-items { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .pitch-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pitch-items > div {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 14px 16px;
}
.pitch-items h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 650; }
.pitch-items p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.pitch-items a { color: var(--accent); }

/* The mark is inlined SVG, so it needs sizing on the wrapper rather than the
   img element. Under 400 bytes — cheaper inline than as a request, and it
   cannot fail to load. */
.sitenav-mark { display: block; width: 26px; height: 26px; line-height: 0; }
.sitenav-mark svg { width: 26px; height: 26px; display: block; border-radius: 6px; }
.sitenav-mark--missing { background: var(--rule); border-radius: 6px; }

/* The templates emit their own document shell, so the theme contributes no
   styling. A reset is needed that get_header() would previously have brought. */
html, body { margin: 0; padding: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 0; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* The admin bar is fixed at the top for logged-in users; the sticky composer
   must sit below it rather than under it. */
body.admin-bar .composer { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .composer { top: 46px; } }

/* ---- Capped grid --------------------------------------------------------
   Measured on a 390x844 phone, the homepage tool cards sat 8.8 screens below
   the fold — so the symbols, the bio builder and the guides were, in practice,
   unreachable. Ten styles is enough to demonstrate what the tool does; the rest
   are one tap away.

   Hidden with CSS rather than omitted from the markup: every style is still
   server-rendered and indexable, only the visual height changes. */

.grid.is-capped [data-beyond="1"],
.grid.is-capped .band--beyond { display: none; }
.grid.is-expanded [data-beyond="1"] { display: flex; }
.grid.is-expanded .band--beyond { display: flex; }

.gridmore { text-align: center; padding: 4px 0 34px; }

.gridmore-btn {
  font: inherit; font-size: 14.5px; font-weight: 650;
  padding: 12px 22px; min-height: 44px;
  border: 1.5px solid var(--ink); border-radius: 9px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.gridmore-btn:hover { border-color: var(--accent); color: var(--accent); }
.gridmore-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gridmore-note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.gridmore-note a { color: var(--accent); }


/* ---- Bio builder --------------------------------------------------------
   These lived only inside tools/build_bio_prototype.py. When the builder was
   integrated into the plugin, the template and the script came across and the
   stylesheet did not, so /bio-builder shipped with no styling at all. */

.bb { max-width: 1080px; margin: 0 auto; padding: 0 14px 70px; }
.bb-head { padding: 26px 0 14px; }
.bb-head h1 { margin:0 0 6px; font-size:25px; letter-spacing:-0.02em; }
.bb-head p { margin:0; color:var(--ink-soft); max-width:56ch; font-size:15px; }
.bb-grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:900px){ .bb-grid{ grid-template-columns:1fr 340px; align-items:start; } }
.bb-panel { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:14px 16px; margin-bottom:14px; }
.bb-panel h2 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
.bb-row { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.bb-row::-webkit-scrollbar{display:none}
.bb-tab { flex:0 0 auto; font:inherit; font-size:13.5px; padding:8px 14px; border:1px solid var(--rule);
  border-radius:999px; background:transparent; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.bb-tab[aria-pressed=true]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.bb-field { display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.bb-field > label { flex:0 0 96px; font-size:12.5px; font-weight:650; }
.bb-line { display:grid; grid-template-columns:1fr 150px; gap:8px; margin-bottom:8px; }
@media (max-width:600px){ .bb-line{ grid-template-columns:1fr; } }
.bb-line input, .bb-line select { font:inherit; font-size:16px; padding:10px 11px; border:1.5px solid var(--rule);
  border-radius:8px; background:#fff; color:var(--ink); width:100%; }
.bb-line input:focus, .bb-line select:focus { outline:none; border-color:var(--accent); }
.bb-prompt { font-size:12px; color:var(--ink-soft); margin:0 0 3px; }
.bb-count { font-size:12px; font-family:var(--mono); color:var(--ink-soft); margin-left:auto; }
.bb-count.over { color:var(--no); font-weight:700; }
.bb-count.near { color:var(--warn); }
.bb-preview { border:1px solid var(--rule); border-radius:10px; background:#fff; padding:15px; }
.bb-preview-name { font-family:var(--glyph); font-size:17px; font-weight:700; margin-bottom:2px; word-break:break-word; }
.bb-preview-handle { font-size:13.5px; color:var(--ink-soft); margin-bottom:9px; font-family:var(--mono); }
.bb-preview-bio { font-family:var(--glyph); font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.bb-warn { border-left:3px solid var(--warn); background:#fffaf0; padding:9px 11px; border-radius:6px;
  font-size:13px; margin-bottom:8px; color:#6b4e00; }
.bb-warn.hard { border-left-color:var(--no); background:#fff5f5; color:#7a1f28; }
.bb-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.bb-btn { font:inherit; font-size:14px; font-weight:600; padding:11px 18px; border-radius:8px; cursor:pointer;
  border:1.5px solid var(--ink); background:var(--ink); color:#fff; }
.bb-btn.sec { background:#fff; color:var(--ink); }
.bb-btn[data-state=copied]{ background:var(--accent); border-color:var(--accent); }
.bb-note { font-size:12.5px; color:var(--ink-soft); margin:8px 0 0; }
.bb-unverified { font-size:11.5px; color:var(--warn); font-family:var(--mono); }

/* ---- Combos and borders -------------------------------------------------
   The part of a symbol page people actually copy. Someone searching "heart
   symbols" usually wants the arrangement rather than one character. */

.combos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 auto 24px 0; max-width: 68ch; }
.combos--block { flex-direction: column; }

.combo {
  font-family: var(--glyph);
  font-size: 17px;
  padding: 11px 16px;
  min-height: 44px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.combo::-webkit-scrollbar { display: none; }
.combo:hover { border-color: var(--accent); }
.combo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.combo[data-state="copied"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Style combos -------------------------------------------------------
   A styled name inside a frame is the most-copied output in this category.
   The character count sits alongside because a frame costs two to four, and
   Free Fire allows twelve. */

.stylecombos {
  display: grid; gap: 8px; max-width: 68ch; margin: 0 auto 26px 0;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .stylecombos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.stylecombo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: inherit; padding: 11px 14px; min-height: 48px;
  border: 1px solid var(--rule-soft); border-radius: 9px;
  background: var(--card); color: var(--ink); cursor: pointer; text-align: left;
}
.stylecombo:hover { border-color: var(--accent); }
.stylecombo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stylecombo[data-state="copied"] { background: var(--accent); border-color: var(--accent); }
.stylecombo[data-state="copied"] .stylecombo-text,
.stylecombo[data-state="copied"] .stylecombo-count { color: #fff; }

.stylecombo-text {
  font-family: var(--glyph); font-size: 17px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0;
}
.stylecombo-count {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft); flex: 0 0 auto;
}
.stylecombo-count.is-over { color: var(--no); font-weight: 700; }

/* ---- Prose rhythm -------------------------------------------------------
   A single measure of undifferentiated paragraphs reads as generated text
   dumped on a page. Structure is what makes it read as written: a lead
   paragraph with more weight, headings with real space above them, lists that
   look like lists, and bold that carries emphasis. */

.prose-lead {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
}

.prose h2 {
  margin: 38px 0 10px;
  padding-top: 4px;
  font-size: 20px;
  letter-spacing: -0.015em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 26px 0 8px; font-size: 16.5px; font-weight: 650; }
.prose strong { font-weight: 650; color: var(--ink); }

.prose-list {
  max-width: 68ch; margin-left: 0; margin-right: auto 16px; padding: 0; list-style: none;
}
.prose-list li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: 16.5px; line-height: 1.6; color: #2b2f38;
}
.prose-list li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ---- Diagrams ----------------------------------------------------------- */

.diagram { max-width: 68ch; margin-left: 0; margin-right: auto 28px; }
.diagram img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card);
}
.diagram figcaption {
  margin-top: 8px; font-size: 13px; color: var(--ink-soft); text-align: center;
}