/*
  TextFlow content pages: tool pages, tools index, word counter.
  Loaded after app.css and reuses its tokens, glass, buttons and preview marks.
*/

body.site {
  --inset-left: 0px;
  --inset-right: 0px;
  --content-w: 100vw;
  overflow: auto;
  font-size: 0.875rem;
}

/* ---------- Navigation ---------- */

.site-nav { position: sticky; top: 0; z-index: 30; padding: 0.625rem 1rem 0; }
.site-nav-inner {
  display: flex; align-items: center; gap: 0.5rem;
  max-width: 68rem; height: 3.25rem; margin: 0 auto;
  padding: 0 0.5rem 0 1.25rem; border-radius: 999px;
}
.site-nav .brand { margin-right: 1rem; }
.site-links { display: flex; gap: 0.125rem; }
.site-links a {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem;
  border-radius: 999px; color: var(--label); font-weight: 500; text-decoration: none;
}
.site-links a:hover { background: var(--fill); }
.site-links a[aria-current="page"] { background: var(--fill-2); }
.site-nav .btn-prominent { margin-left: auto; }

/* ---------- Page frame ---------- */

.page { max-width: 68rem; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--label-2); }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.25rem; }
.breadcrumbs a { color: var(--label-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--label); text-decoration: underline; }

.page-head { max-width: 46rem; margin: 1.25rem 0 1.75rem; }
.page-head h1 { margin: 0; font: 700 2.5rem/1.1 var(--font-display); letter-spacing: -0.03em; }
.page-head .lead { margin: 0.75rem 0 0; font-size: 1.1875rem; line-height: 1.5; color: var(--label-2); }

/* ---------- Tool card ---------- */

.tool-card, .counter-card {
  padding: 1rem;
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--separator), 0 12px 40px rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  .tool-card, .counter-card { background: #232325; box-shadow: 0 0 0 0.5px var(--separator), 0 12px 40px rgba(0, 0, 0, 0.35); }
}

.tool-options {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem;
  padding: 0.25rem 0.25rem 1rem; margin-bottom: 1rem;
  border-bottom: 0.5px solid var(--separator);
}
.opt-field { display: grid; gap: 0.3125rem; }
.opt-field span { font-size: 0.75rem; font-weight: 600; color: var(--label-2); }
.opt-field input {
  width: 14rem; height: 2.25rem; padding: 0 0.75rem;
  border: 0; border-radius: 10px; background: var(--fill); color: var(--label);
}
.opt-field input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.opt-check { display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 2.25rem; }
.opt-check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent-fill); }

.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pane { display: flex; flex-direction: column; min-width: 0; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.25rem; margin-bottom: 0.5rem; padding-left: 0.25rem; }
.pane-head label, .pane-title { font-weight: 600; }
.pane-count { color: var(--label-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pane-actions { display: flex; gap: 0.375rem; }
.btn-small { min-height: 1.875rem; padding: 0 0.75rem; font-size: 0.8125rem; }

.pane-body {
  width: 100%; height: 22rem; min-height: 12rem; margin: 0;
  padding: 0.875rem 1rem; border: 0; border-radius: 14px;
  background: var(--fill); color: var(--label);
  font: 400 1rem/1.6 var(--font);
  white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto;
}
textarea.pane-body { resize: vertical; }
.pane-body:focus-visible, textarea.pane-body:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.output-empty { color: var(--label-2); }
.output-empty { white-space: normal; }
.output-empty p { margin: 0; }
.empty-example { margin: 1.25rem 0 0; padding: 0.75rem 0.875rem; border-radius: 12px; border: 1px dashed var(--separator); }
.empty-example figcaption { margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 600; }
.empty-example pre { margin: 0; font: 400 0.875rem/1.5 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.empty-example .ex-after { color: var(--label); }
.empty-example .ex-arrow { display: block; width: 1rem; height: 1rem; margin: 0.25rem 0; color: var(--accent); }
.output-error { color: var(--destructive); }

.tool-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.switch { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding-left: 0.25rem; }
.switch input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent-fill); }
.tool-buttons { display: flex; gap: 0.5rem; }

/* ---------- Content ---------- */

.page-content { max-width: 46rem; margin-top: 3rem; }
.content-section + .content-section { margin-top: 2.5rem; }
.page-content h2, .index-group h2, .cta h2 { margin: 0 0 0.75rem; font: 700 1.375rem/1.25 var(--font-display); letter-spacing: -0.015em; }
.page-content p, .page-content li { font-size: 1rem; line-height: 1.6; }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; margin: 0.625rem 0; padding-left: 2.25rem; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.125rem;
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: var(--fill-2); font-size: 0.8125rem; font-weight: 600;
}

.uses { margin: 0; padding-left: 1.25rem; }
.uses li { margin: 0.375rem 0; }
.uses li::marker { color: var(--label-2); }

.example-options { margin: 0 0 0.75rem; color: var(--label-2); font-size: 0.875rem !important; }
.example-options code { padding: 0.0625rem 0.375rem; border-radius: 6px; background: var(--fill-2); color: var(--label); font: 500 0.8125rem/1.4 var(--font-mono); }
.example { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; }
.example figure { margin: 0; min-width: 0; }
.example figcaption { margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--label-2); }
.example pre {
  margin: 0; padding: 0.875rem 1rem; border-radius: 12px; background: var(--fill);
  font: 400 0.9375rem/1.55 var(--font); white-space: pre-wrap; overflow-wrap: anywhere;
}
.example-arrow { transform: rotate(-90deg); color: var(--label-2); }

.faq details { border-top: 0.5px solid var(--separator); }
.faq details:last-child { border-bottom: 0.5px solid var(--separator); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.75rem; padding: 0.75rem 0; font-size: 1rem; font-weight: 600; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; color: var(--label-2); transition: transform 0.2s ease; }
.faq details[open] summary .icon { transform: rotate(90deg); }
.faq details p { margin: 0 0 1rem; }

.tool-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.tool-links a {
  display: grid; gap: 0.1875rem; height: 100%; padding: 0.875rem 1rem;
  border-radius: 14px; background: var(--fill); color: var(--label); text-decoration: none;
  transition: background-color 0.15s ease;
}
.tool-links a:hover { background: var(--fill-2); }
.tool-links strong { font-size: 0.9375rem; font-weight: 600; }
.tool-links span { font-size: 0.8125rem; line-height: 1.4; color: var(--label-2); }

/* ---------- Tools index ---------- */

.index-group + .index-group { margin-top: 2.25rem; }
.cta { margin-top: 3.5rem; padding: 1.5rem; border-radius: var(--r-panel); background: var(--fill); }
.cta p { max-width: 40rem; margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; color: var(--label-2); }

/* ---------- Word counter ---------- */

.counter-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-bottom: 1rem; }
.counter-summary p { margin: 0; padding: 0.875rem 1rem; border-radius: 14px; background: var(--fill); }
.counter-summary strong { display: block; font: 700 1.75rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.counter-summary span { font-size: 0.75rem; font-weight: 600; color: var(--label-2); }
.counter-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.counter-layout .pane-body { height: 32rem; }
.counter-stats { padding-top: 2.75rem; }

/* ---------- Footer ---------- */

.site-footer { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; border-top: 0.5px solid var(--separator); color: var(--label-2); font-size: 0.8125rem; }
.site-footer p { margin: 0.25rem 0; }
.site-footer a { color: var(--label-2); }
.site-footer a:hover { color: var(--label); }

/* ---------- Narrow ---------- */

@media (max-width: 900px) {
  .counter-layout { grid-template-columns: 1fr; }
  .counter-stats { padding-top: 0; }
}

@media (max-width: 760px) {
  .panes { grid-template-columns: 1fr; }
  .pane-body { height: 13rem; }
  .example { grid-template-columns: 1fr; justify-items: center; }
  .example figure { width: 100%; }
  .example-arrow { transform: none; }
}

@media (max-width: 700px) {
  body.site { font-size: 0.9375rem; }
  .site-nav { padding: calc(env(safe-area-inset-top) + 0.5rem) 0.75rem 0; }
  .site-nav-inner { padding-left: 1rem; }
  .site-links a:not([aria-current]):nth-child(2) { display: none; }
  .site-links a, .site-nav .btn, .cta .btn { min-height: 2.75rem; }
  .page { padding: 1rem 1rem 3rem; }
  .page-head h1 { font-size: 2rem; }
  .page-head .lead { font-size: 1.0625rem; }
  .tool-card, .counter-card { padding: 0.75rem; border-radius: 18px; }
  .btn-small { min-height: 2.75rem; padding: 0 1rem; font-size: 0.9375rem; }
  .opt-field, .opt-field input { width: 100%; }
  .opt-field input { height: 2.75rem; font-size: 1.0625rem; }
  /* The whole label is the tap target (44pt tall); the box itself is sized to be easy to see. */
  .opt-check, .switch { min-height: 2.75rem; padding-right: 0.75rem; gap: 0.625rem; }
  .opt-check input, .switch input { width: 1.375rem; height: 1.375rem; }
  .tool-actions, .tool-buttons { width: 100%; }
  .tool-buttons .btn { flex: 1; min-height: 3rem; }
  .pane-body { font-size: 1.0625rem; }
  .faq summary { min-height: 3rem; }
  .counter-summary strong { font-size: 1.375rem; }
  .counter-layout .pane-body { height: 18rem; }
  .toast { bottom: calc(env(safe-area-inset-bottom) + 1rem); }
}

/* ---------- Account state in the navigation ---------- */

.site-account { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.site-nav .site-account .btn-prominent { margin-left: 0; }
.site-signin { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem; border-radius: 999px; color: var(--label); font-weight: 500; text-decoration: none; }
.site-signin:hover { background: var(--fill); }
.avatar-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: transparent; }
.avatar {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--accent-fill); color: var(--on-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}
.account-menu { min-width: 15rem; }
.menu a, .menu form button { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 1.75rem; padding: 0.25rem 0.625rem; border: 0; border-radius: 9px; background: transparent; color: var(--label); text-align: left; text-decoration: none; font: inherit; }
.menu a:hover, .menu a:focus-visible, .menu form button:hover, .menu form button:focus-visible { outline: 0; background: var(--accent-fill); color: var(--on-accent); }
.menu form { margin: 0; }
.account-id { display: grid; gap: 0.0625rem; margin: 0.25rem 0.625rem 0.375rem; }
.account-id strong { color: var(--label); font-size: 0.8125rem; }
.account-id span { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Sign in / sign up ---------- */

.auth { display: grid; place-items: start center; padding: 1.5rem 0 1rem; }
.auth-card {
  width: min(26rem, 100%); padding: 1.75rem;
  border-radius: var(--r-panel); background: var(--surface);
  box-shadow: 0 0 0 0.5px var(--separator), 0 12px 40px rgba(0, 0, 0, 0.07);
}
@media (prefers-color-scheme: dark) { .auth-card, .settings-card { background: #232325; } }
.auth-card h1 { margin: 0; font: 700 1.625rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.auth-lead { margin: 0.5rem 0 1.25rem; font-size: 0.9375rem; line-height: 1.5; color: var(--label-2); }
.auth-lead strong { color: var(--label); }
.benefits { margin: -0.5rem 0 1.25rem; padding: 0; list-style: none; }
.benefits li { position: relative; margin: 0.4375rem 0; padding-left: 1.5rem; font-size: 0.875rem; line-height: 1.45; color: var(--label-2); }
.benefits li::before { content: ""; position: absolute; left: 0.25rem; top: 0.45em; width: 0.5rem; height: 0.3rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.benefits strong { color: var(--label); font-weight: 600; }
.auth form { display: grid; gap: 0.875rem; }
.field { display: grid; gap: 0.3125rem; }
.field > span:first-child { font-size: 0.8125rem; font-weight: 600; color: var(--label); }
.field em { font-style: normal; font-weight: 400; color: var(--label-2); margin-left: 0.25rem; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; }
.field-row a { font-weight: 400; font-size: 0.8125rem; }
.field input {
  width: 100%; height: 2.5rem; padding: 0 0.75rem;
  border: 0; border-radius: 10px; background: var(--fill); color: var(--label); font-size: 0.9375rem;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--destructive); }
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 4rem; }
.reveal { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); min-height: 2rem; padding: 0 0.625rem; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font-size: 0.8125rem; font-weight: 600; }
.reveal:hover { background: var(--fill-2); }
.field-hint { font-size: 0.75rem; color: var(--label-2); }
.field-error { font-size: 0.8125rem; color: var(--destructive); }
.form-error { margin: 0 0 1rem; padding: 0.625rem 0.875rem; border-radius: 10px; background: color-mix(in srgb, var(--destructive) 12%, transparent); color: var(--label); font-size: 0.875rem; }
.btn-block { width: 100%; min-height: 2.75rem; font-size: 0.9375rem; margin-top: 0.25rem; }
.auth-switch { margin: 1.25rem 0 0; text-align: center; font-size: 0.875rem; color: var(--label-2); }
.auth-fine { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--label-2); text-align: center; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Account settings ---------- */

.account { max-width: 40rem; }
.settings-group { margin-top: 2rem; }
.settings-group h2 { margin: 0 0 0.5rem; padding-left: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--label-2); }
.settings-card { display: grid; gap: 0.875rem; padding: 1.125rem; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 0.5px var(--separator); }
.settings-actions { display: flex; justify-content: flex-end; }
.settings-note { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--label-2); }
.data-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0; }
.data-counts div { padding: 0.625rem 0.75rem; border-radius: 12px; background: var(--fill); }
.data-counts dt { font-size: 0.75rem; color: var(--label-2); }
.data-counts dd { margin: 0; font: 700 1.25rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.btn-destructive { background: var(--destructive); color: #fff; font-weight: 600; }
.btn-destructive:hover { background: var(--destructive); filter: brightness(1.08); }
@media (prefers-color-scheme: dark) { .btn-destructive { background: #C4281C; } }

@media (max-width: 700px) {
  .site-signin, .avatar-btn { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
  .site-links { display: none; }
  .auth { padding-top: 0.5rem; }
  .auth-card { padding: 1.25rem; }
  .field input { height: 2.75rem; font-size: 1.0625rem; }
  .reveal { min-height: 2.5rem; }
  .settings-actions .btn { flex: 1; min-height: 2.75rem; }
  .field-row a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .auth-switch a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .menu a, .menu form button { min-height: 2.75rem; font-size: 1.0625rem; }
}

/* ---------- Shared text ---------- */

.eyebrow { margin: 0 0 0.375rem; font-size: 0.8125rem; color: var(--label-2); }
.shared-card { max-width: 46rem; padding: 1rem; border-radius: var(--r-panel); background: var(--surface); box-shadow: 0 0 0 0.5px var(--separator), 0 12px 40px rgba(0, 0, 0, 0.06); }
@media (prefers-color-scheme: dark) { .shared-card { background: #232325; } }
.shared-text { margin: 0; padding: 1rem 1.125rem; max-height: 70vh; overflow: auto; border-radius: 14px; background: var(--fill); font: 400 1.0625rem/1.6 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.shared-note { margin: 0; font-size: 0.8125rem; color: var(--label-2); }

/* ---------- Symbols on content pages ---------- */

.site-links a { gap: 0.4375rem; }
.site-links .icon { width: 1rem; height: 1rem; color: var(--accent); }
.menu a .icon, .menu form button .icon { width: 1rem; height: 1rem; }

.page-head-icon { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.page-head-icon .lead { grid-column: 1 / -1; }
.title-tile {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 14px;
  background: color-mix(in srgb, var(--accent-fill) 12%, transparent); color: var(--accent);
}
.title-tile .icon { width: 1.875rem; height: 1.875rem; }

.btn-small .icon { width: 0.9375rem; height: 0.9375rem; }
.btn .icon { flex: none; }

.tool-links a { grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: start; }
.tool-links .link-icon { grid-row: 1 / span 2; width: 1.375rem; height: 1.375rem; margin-top: 0.0625rem; color: var(--accent); }
.tool-links a > strong, .tool-links a > span { grid-column: 2; }

.counter-summary p { position: relative; }
.counter-summary .icon { position: absolute; top: 0.875rem; right: 0.875rem; width: 1.125rem; height: 1.125rem; color: var(--accent); }

.auth-tile {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.875rem; border-radius: 14px;
  background: color-mix(in srgb, var(--accent-fill) 12%, transparent); color: var(--accent);
}
.auth-tile .icon { width: 1.625rem; height: 1.625rem; }
.benefit-rows li { display: flex; gap: 0.75rem; padding-left: 0; margin: 0.625rem 0; }
.benefit-rows li::before { content: none; }
.benefit-rows .icon { flex: none; width: 1.375rem; height: 1.375rem; color: var(--accent); }

.settings-group h2 { display: flex; align-items: center; gap: 0.4375rem; }
.settings-group h2 .icon { width: 1rem; height: 1rem; color: var(--accent); }
.danger-zone h2 .icon { color: var(--destructive); }

.eyebrow { display: flex; align-items: center; gap: 0.375rem; }
.eyebrow .icon { width: 0.9375rem; height: 0.9375rem; color: var(--accent); }

.toast { gap: 0.625rem; }
.toast-icon { width: 1.125rem; height: 1.125rem; color: var(--accent); }

@media (max-width: 700px) {
  .title-tile { width: 2.75rem; height: 2.75rem; border-radius: 12px; }
  .title-tile .icon { width: 1.5rem; height: 1.5rem; }
}

/* Sign up: benefits beside the form on wide screens, so the form is visible without scrolling. */
@media (min-width: 880px) {
  .auth-card.auth-split { display: grid; grid-template-columns: 1fr 1fr; width: min(54rem, 100%); padding: 0; overflow: hidden; }
  .auth-split .auth-intro { padding: 2rem; background: color-mix(in srgb, var(--accent-fill) 6%, transparent); border-right: 0.5px solid var(--separator); }
  .auth-split .auth-main { padding: 2rem; align-self: center; }
  .auth-split .benefits { margin-bottom: 0; }
}