/* Word Count Tool — clean rebuild stylesheet
   Visual identity matches the Experon-era live site.
   Palette: primary #6ec1e4 (Elementor blue), dark #115172, accent #61ce70.
   Fonts: Raleway (headings), PT Sans (body), FontAwesome icons. */

:root {
  --c-primary: #6ec1e4;
  --c-primary-dark: #115172;
  --c-accent: #61ce70;
  --c-text: #222222;
  --c-text-muted: #7a7a7a;
  --c-text-soft: #54595f;
  --c-border: #dddddd;
  --c-bg: #ffffff;
  --c-bg-soft: #f7f7f7;
  --c-bg-alt: #f3f3f3;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --radius: 4px;
  --max-w: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; width: 100%; }
body {
  margin: 0;
  font: 16px/1.6 "PT Sans", Helvetica, Arial, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
}
/* Prevent any descendant from spilling out and creating a horizontal scrollbar
   that throws off mobile margins. Tables, iframes, and pre blocks scroll
   internally instead of pushing the page wide. */
img, video, iframe, table, pre, code { max-width: 100%; }
pre { overflow-x: auto; }
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tool-pane, .static-page, .tool-article { min-width: 0; }
h1, h2, h3, h4, h5, h6 { font-family: "Raleway", Helvetica, Arial, sans-serif; color: var(--c-primary-dark); margin: 1.4em 0 .6em; line-height: 1.25; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
a { color: var(--c-primary-dark); text-decoration: none; }
a:hover { color: var(--c-primary); text-decoration: underline; }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 2rem 0; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 1rem; }

/* ========== HEADER ========== */
.site-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  padding: 12px 0;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}
/* Desktop header: logo on its own row at the top, nav justified across the full width below it. */
.site-header .wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .6rem;
  flex-wrap: nowrap;
}
.site-header .logo { align-self: flex-start; }
.logo img { display: block; max-height: 56px; width: auto; }
.primary-nav { width: 100%; }
.primary-nav > ul {
  display: flex;
  justify-content: space-between;   /* stretch nav items across full width */
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.primary-nav > ul > li { flex: 0 0 auto; }

.primary-nav > ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 1.4rem; flex-wrap: wrap;
}
.primary-nav a {
  font: 700 .95rem/1 "Raleway", sans-serif;
  color: var(--c-text); padding: .6rem 0;
  border-bottom: 2px solid transparent;
}
.primary-nav > ul > li { position: relative; }
.primary-nav li.current > a, .primary-nav > ul > li > a:hover {
  color: var(--c-primary-dark); border-bottom-color: var(--c-primary); text-decoration: none;
}
.primary-nav li.has-dropdown > a::after {
  content: " ▾"; font-size: .75em; color: var(--c-text-muted);
}
.primary-nav .dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: .4rem 0; margin: 0;
  list-style: none; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.primary-nav .has-dropdown:hover > .dropdown,
.primary-nav .has-dropdown:focus-within > .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav .dropdown li { padding: 0; }
.primary-nav .dropdown a {
  display: block; padding: .55rem 1rem; font-weight: 500;
  border-bottom: 0; color: var(--c-text);
}
.primary-nav .dropdown a:hover { background: var(--c-bg-soft); color: var(--c-primary-dark); }
.nav-toggle { display: none; cursor: pointer; font-size: 1.5rem; padding: .25rem .5rem; line-height: 1; }
.nav-toggle-icon-close { display: none; }
.nav-toggle-icon-open { display: inline-block; }
/* When menu is open, swap ☰ → × */
.primary-nav input:checked ~ .nav-toggle .nav-toggle-icon-open { display: none; }
.primary-nav input:checked ~ .nav-toggle .nav-toggle-icon-close { display: inline-block; font-size: 1.9rem; line-height: .8; }
@media (max-width: 900px) {
  /* Mobile: revert to single-row header (logo left, hamburger right) */
  .site-header .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .site-header .logo { align-self: auto; }
  .nav-toggle { display: inline-block; }
  .primary-nav { position: static; width: auto; }

  /* Menu = full-screen scrollable overlay flush below the sticky header.
     Top offset uses --header-h CSS var (set by tiny inline JS in base.html so
     it always matches the actual rendered header height — logo scale, OS
     font size, and browser chrome can shift it). Falls back to 60px without JS.
     overscroll-behavior:contain stops scroll-chaining so touch swipes stay
     inside the menu and don't bleed through to the page behind. */
  .primary-nav > ul {
    display: none;
    position: fixed;
    top: var(--header-h, 60px); left: 0; right: 0; bottom: 0;
    background: #fff;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
    margin: 0;
    padding: .5rem 1rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
  }
  .primary-nav input:checked ~ ul { display: flex; }
  /* When menu is open: lock body scroll so background can't move on touch.
     :has() supported in all modern browsers; pre-:has() browsers fall back
     gracefully (background still scrolls but menu still usable). */
  html:has(#nav-toggle:checked),
  html:has(#nav-toggle:checked) body { overflow: hidden; height: 100%; }
  .primary-nav > ul > li { width: 100%; flex-shrink: 0; }

  /* Mobile menu order — reorder via flex `order` (desktop DOM order is kept):
       1. Word Counter   2. Character Counter   3. Tools   4. Stylized Text
       5. Case           6. Utilities           7. Typing Test
       8. Guides         9. Blog                10. More
     The DOM order on desktop keeps Typing Test at position 3 (high-priority
     surface action). On phones, the heavy tool dropdowns come first; Typing
     Test moves below them since it's a sub-category like Guides. */
  .primary-nav > ul > li:nth-child(1) { order: 1; }   /* Word Counter      */
  .primary-nav > ul > li:nth-child(2) { order: 2; }   /* Character Counter */
  .primary-nav > ul > li:nth-child(3) { order: 7; }   /* Typing Test       */
  .primary-nav > ul > li:nth-child(4) { order: 3; }   /* Tools             */
  .primary-nav > ul > li:nth-child(5) { order: 4; }   /* Stylized Text     */
  .primary-nav > ul > li:nth-child(6) { order: 5; }   /* Case              */
  .primary-nav > ul > li:nth-child(7) { order: 6; }   /* Utilities         */
  .primary-nav > ul > li:nth-child(8) { order: 8; }   /* Guides            */
  .primary-nav > ul > li:nth-child(9) { order: 9; }   /* Blog              */
  .primary-nav > ul > li:nth-child(10){ order: 10; }  /* More              */
  .primary-nav input:checked ~ ul { display: flex; }
  .primary-nav > ul > li { border-top: 1px solid var(--c-border); }
  .primary-nav > ul > li:first-child { border-top: 0; }
  .primary-nav > ul > li > a { display: block; padding: .9rem .25rem; }
  /* On mobile: dropdowns become inline expanded sublists */
  .primary-nav .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 .4rem;
    background: var(--c-bg-soft);
    border-radius: var(--radius);
    margin: 0 -.25rem .5rem;
  }
  .primary-nav .dropdown a { padding: .55rem 1rem; text-align: right; }
  .primary-nav li.has-dropdown > a::after { content: ""; }
}

/* ========== LAYOUT ========== */
.site-main { padding: 2rem 0 3rem; }
.layout {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr) 320px;
}
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }

/* ========== TOOL PANE ========== */
.tool-pane {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.tool-pane h1 { margin-top: 0; }
.tagline { color: var(--c-text-muted); margin: -.4rem 0 1rem; }

.tool-toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--c-border);
  margin-bottom: 1rem;
}
.tool-toolbar .sep { flex: 1; }
.tool-toolbar button, .tool-toolbar .file-pick {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  color: var(--c-text); cursor: pointer;
  padding: .5rem .9rem; border-radius: var(--radius);
  font: 600 .85rem/1 "Raleway", sans-serif;
}
.tool-toolbar button:hover, .tool-toolbar .file-pick:hover {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.tool-toolbar input[type=file] { display: none; }

.tool-textarea {
  width: 100%; min-height: 320px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1rem;
  font: 16px/1.6 "PT Sans", monospace;
  resize: vertical;
}
.tool-textarea:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; }

.tool-detail { margin-top: 1rem; border-top: 1px solid var(--c-border); padding-top: 1rem; }
.tool-detail summary { cursor: pointer; font-weight: 700; color: var(--c-primary-dark); }

.tool-form { display: flex; gap: .5rem; margin: 1rem 0; }
.tool-form input { flex: 1; padding: .7rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); font: 1rem "PT Sans", sans-serif; text-transform: uppercase; }
.tool-form button { background: var(--c-primary-dark); color: #fff; border: 0; padding: 0 1.4rem; border-radius: var(--radius); font: 700 .9rem "Raleway", sans-serif; cursor: pointer; }

/* ========== SIDEBAR / WIDGETS ========== */
.sidebar-col .widget {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-sm);
}
.sidebar-col .widget h3 {
  font-size: 1.05rem; margin: 0 0 .6rem;
  padding-bottom: .4rem; border-bottom: 2px solid var(--c-primary);
  color: var(--c-primary-dark);
}
.results-grid { display: grid; grid-template-columns: 1fr auto; gap: .25rem .8rem; margin: 0; font-size: .92rem; }
.results-grid dt { color: var(--c-text-muted); }
.results-grid dd { margin: 0; font-weight: 700; color: var(--c-primary-dark); font-variant-numeric: tabular-nums; }
.results-grid.two-col { grid-template-columns: 1fr auto; }

.recent-posts ul { list-style: none; padding: 0; margin: 0; }
.recent-posts li { padding: .55rem 0; border-bottom: 1px dashed var(--c-border); display: grid; grid-template-columns: 64px 1fr; gap: .6rem; align-items: center; }
.recent-posts li:last-child { border-bottom: 0; }
.recent-posts img { width: 64px; height: 48px; object-fit: cover; border-radius: 3px; }
.recent-posts .cat { display: block; font-size: .75rem; color: var(--c-text-muted); margin-top: .15rem; }

.sidebar-link-list { list-style: none; padding: 0; margin: 0; }
.sidebar-link-list li { padding: .35rem 0; border-bottom: 1px dashed var(--c-border); }
.sidebar-link-list li:last-child { border-bottom: 0; }
.sidebar-link-list a { color: var(--c-primary-dark); font-size: .92rem; }
.sidebar-link-list a:hover { color: var(--c-primary); }

/* ========== POST GRID ========== */
.archive-header { margin-bottom: 1.5rem; }
.archive-header h1 { margin: 0; }
.post-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.post-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-card .thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.post-card .meta { display: flex; justify-content: space-between; padding: .7rem 1rem 0; font-size: .8rem; color: var(--c-text-muted); }
.post-card .meta .cat { color: var(--c-primary-dark); font-weight: 700; }
.post-card h2 { font-size: 1.1rem; margin: .5rem 1rem; line-height: 1.3; }
.post-card h2 a { color: var(--c-text); }
.post-card h2 a:hover { color: var(--c-primary-dark); }
.post-card .excerpt { margin: 0 1rem 1rem; color: var(--c-text-soft); font-size: .9rem; }
.badge { display: inline-block; padding: 2px 8px; font-size: .72rem; border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.badge.sponsored { background: #fff7e0; color: #8a6d00; border: 1px solid #f0d97f; margin: 0 1rem 1rem; align-self: flex-start; }

/* ========== SINGLE POST ========== */
.single-post { background: var(--c-bg); padding: 0; }
.breadcrumbs { font-size: .85rem; color: var(--c-text-muted); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--c-text-muted); }
.single-post h1 { margin-top: .3rem; }
.post-meta { color: var(--c-text-muted); font-size: .9rem; margin: 0 0 1.5rem; }
.post-hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); }
.post-body { font-size: 1.05rem; line-height: 1.75; }
.post-body h2, .post-body h3 { margin-top: 2rem; }
.post-body img { border-radius: var(--radius); margin: 1rem 0; }
.post-body p { margin: .9em 0; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body code { background: var(--c-bg-alt); padding: 1px 5px; border-radius: 3px; font-size: .92em; }
.post-body blockquote {
  border-left: 4px solid var(--c-primary);
  background: var(--c-bg-soft);
  margin: 1.4em 0; padding: .6em 1em;
}

.disclosure {
  margin-top: 2rem; padding: 1rem 1.2rem;
  background: #fff7e0; border: 1px solid #f0d97f; border-radius: var(--radius);
  font-size: .9rem;
}

.related-posts { margin-top: 3rem; }
.related-posts h2 { border-bottom: 2px solid var(--c-primary); padding-bottom: .4rem; }
.related-grid { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.related-grid li img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); margin-bottom: .4rem; }

/* ========== FOOTER ========== */
.site-footer {
  background: var(--c-primary-dark); color: #d9eaf2;
  padding: 2.5rem 0 1.5rem; margin-top: 3rem;
  font-size: .85rem;
}
.footer-cols {
  display: grid;
  gap: 1.5rem 1.2rem;
  grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 1100px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .footer-cols { grid-template-columns: 1fr; } }

.footer-col h4 {
  font: 700 .85rem/1.2 "Raleway", sans-serif;
  color: #fff;
  margin: 0 0 .6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: .3rem;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
}
.footer-col li { margin: .35rem 0; }
.footer-col a {
  color: #d9eaf2;
  font-size: .82rem;
  line-height: 1.4;
  text-decoration: none;
}
.footer-col a:hover { color: var(--c-primary); text-decoration: underline; }

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.15);
  text-align: center;
}
.copyright { margin: 0 0 .3rem; opacity: .8; }
.footer-tagline { margin: 0; opacity: .65; font-size: .8rem; }

/* ========== STATIC PAGES ========== */
.static-page { background: var(--c-bg); padding: 1rem 0; }
.static-page h1 { margin-top: 0; font-size: 2rem; }
.static-page > .tagline { font-size: 1.05rem; }
.static-page .post-body { font-size: 1rem; line-height: 1.7; }
.static-page .post-body h1 { font-size: 1.5rem; margin-top: 2rem; color: var(--c-primary-dark); }
.static-page .post-body h2 { font-size: 1.4rem; margin-top: 1.8rem; }
.static-page .post-body h3 { font-size: 1.15rem; margin-top: 1.4rem; }
.static-page .post-body h4 { font-size: 1.05rem; margin-top: 1.2rem; }
.static-page .post-body p { margin: .9em 0; }
.static-page .post-body ul, .static-page .post-body ol { padding-left: 1.4em; }
.static-page .post-body li { margin: .25em 0; }
.static-page .post-body a { color: var(--c-primary-dark); }
.static-page .post-body a:hover { color: var(--c-primary); }
.static-page .post-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1rem 0; }
.static-page .post-body table { border-collapse: collapse; margin: 1rem 0; }
.static-page .post-body table td, .static-page .post-body table th {
  padding: .5rem .8rem; border: 1px solid var(--c-border);
}
.page-body { margin-top: 1.5rem; }

/* ========== TOOL-SPECIFIC ========== */
.pomo-display { font: 700 5rem/1 "Raleway", sans-serif; text-align: center; margin: 2rem 0; color: var(--c-primary-dark); }
.pomo-controls, .pomo-modes { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.pomo-controls button, .pomo-modes button { padding: .6rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg-soft); cursor: pointer; font: 600 .9rem "Raleway", sans-serif; }
.pomo-modes button.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.mindmap-canvas { min-height: 500px; border: 2px dashed var(--c-border); border-radius: var(--radius); display: grid; place-items: center; color: var(--c-text-muted); }
.typing-prompt { background: var(--c-bg-soft); padding: 1rem; border-radius: var(--radius); margin: 1rem 0; line-height: 1.8; min-height: 80px; }
.typing-stats { display: flex; justify-content: space-between; padding: 1rem 0; font-weight: 700; color: var(--c-primary-dark); }

.kw-list { padding-left: 1.4em; column-count: 2; column-gap: 1.5rem; font-size: .95rem; }
.kw-list li { margin: .15rem 0; break-inside: avoid; }
.kw-list .density { color: var(--c-text-muted); margin-left: .3rem; }

/* ========== TOOL ARTICLE (the SEO copy below each tool) ========== */
.tool-article {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
  font-size: 1rem;
  line-height: 1.7;
}
.tool-article h2 {
  font-size: 1.5rem;
  margin: 2rem 0 .8rem;
  scroll-margin-top: 80px;
}
.tool-article h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.tool-article p { margin: .9em 0; }
.tool-article ul, .tool-article ol { padding-left: 1.4em; }
.tool-article li { margin: .25em 0; }
.tool-article code { background: var(--c-bg-alt); padding: 1px 5px; border-radius: 3px; font-size: .92em; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: .95rem;
}
.data-table th, .data-table td {
  padding: .5rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.data-table thead { background: var(--c-bg-soft); }
.data-table th { font-family: "Raleway", sans-serif; color: var(--c-primary-dark); }

.faq-block { margin-top: 2rem; }
.faq-block h2 { border-top: 2px solid var(--c-primary); padding-top: 1.2rem; }
.faq-item {
  border-bottom: 1px solid var(--c-border);
  padding: .8rem 0;
}
.faq-item summary {
  cursor: pointer;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  color: var(--c-primary-dark);
  font-size: 1.05rem;
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}
.faq-item summary::before {
  content: "+";
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--c-primary);
  width: 1.2rem; text-align: center;
  transition: transform .15s;
}
.faq-item[open] summary::before { content: "−"; }
.faq-answer { padding: .5rem 0 .3rem 1.5rem; color: var(--c-text-soft); }

.hub-callout {
  margin: 2rem 0;
  padding: 1rem 1.2rem;
  background: var(--c-bg-soft);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius);
  font-size: .95rem;
}
.hub-callout strong { color: var(--c-primary-dark); }

.hub-header { margin-bottom: 1.5rem; }
.hub-header h1 { margin: 0; }
.hub-tagline { color: var(--c-text-muted); font-size: 1.1rem; margin: .4rem 0 0; }
.hub-intro { font-size: 1.05rem; line-height: 1.7; }
.hub-spokes { margin: 2.5rem 0; }
.hub-spokes h2 { border-top: 2px solid var(--c-primary); padding-top: 1rem; }
.hub-spokes .post-card h3 a { color: var(--c-text); }
.hub-spokes .post-card h3 a:hover { color: var(--c-primary-dark); }

.faq-topic-list, .glossary-list { padding-left: 0; list-style: none; }
.faq-topic-list li, .glossary-list li { padding: .5rem 0; border-bottom: 1px dashed var(--c-border); }
.glossary-letter h2 { border-bottom: 2px solid var(--c-primary); padding-bottom: .3rem; margin-top: 2rem; }
.related-faqs, .related-terms { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--c-border); }
.muted { color: var(--c-text-muted); }

.embed-snippet-block {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: var(--c-bg-soft);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius);
}
.embed-snippet-block summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--c-primary-dark);
}
.embed-snippet-block textarea {
  width: 100%;
  margin-top: .4rem;
  padding: .8rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font: 12px/1.5 Menlo, Consolas, monospace;
  resize: vertical;
}
.embed-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--c-primary);
}
.embed-section h2 { margin-top: 0; color: var(--c-primary-dark); }
.embed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
@media (min-width: 700px) {
  .embed-grid { grid-template-columns: 1fr 1fr; }
}
.embed-preview-line { margin: .8rem 0 .3rem; font-size: .85rem; color: var(--c-text-muted); }

.calc-form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.calc-form-grid label {
  display: flex; flex-direction: column; font: 600 .85rem "Raleway", sans-serif;
  color: var(--c-text-soft);
}
.calc-form-grid input, .calc-form-grid select {
  margin-top: .3rem; padding: .55rem .75rem;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  font: 1rem "PT Sans", sans-serif;
}
.result-block {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, var(--c-bg-soft) 0%, var(--c-bg) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin: 1rem 0;
}
.result-num {
  display: block;
  font: 700 3rem/1 "Raleway", sans-serif;
  color: var(--c-primary-dark);
  font-variant-numeric: tabular-nums;
}
.result-label {
  display: block; margin-top: .3rem;
  color: var(--c-text-muted); font-weight: 600;
}

/* ========== SOCIAL SHARE BAR ========== */
.share-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin: .35rem 0;
}
.share-bar .share-label {
  font: 600 .82rem/1 "Raleway", sans-serif;
  color: var(--c-text-muted);
  margin-right: .25rem;
}
.share-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .65rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  font: 600 .78rem/1 "Raleway", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.share-btn:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); text-decoration: none; }
.share-btn svg { display: block; flex-shrink: 0; }
.share-bar-compact { gap: .25rem; }
.share-bar-compact .share-btn { padding: .35rem; }
.share-bar-compact .share-btn span { display: none; }
.share-btn.share-fb:hover { background: #1877F2; border-color: #1877F2; }
.share-btn.share-x:hover  { background: #000;     border-color: #000; }
.share-btn.share-wa:hover { background: #25D366; border-color: #25D366; }
.share-btn.share-tg:hover { background: #229ED9; border-color: #229ED9; }
.share-btn.share-rd:hover { background: #FF4500; border-color: #FF4500; }
.share-btn.share-pn:hover { background: #BD081C; border-color: #BD081C; }
.share-btn.share-li:hover { background: #0077B5; border-color: #0077B5; }
.share-btn.share-em:hover { background: #54595f; border-color: #54595f; }
.share-btn.share-copied   { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* Container for tool-pane top-right share (desktop) */
.tool-share-corner {
  position: absolute; top: .9rem; right: .9rem;
  z-index: 2;
}
.tool-pane { position: relative; }

/* On mobile, the corner widget moves to sit BETWEEN the toolbar buttons
   and the textarea — never above the H1. We achieve this with flex `order`:
   default-order children (h1, tagline, toolbar) flow first; share-corner
   sits at order 100; textarea + counters + details go last at order 200+. */
@media (max-width: 700px) {
  .tool-pane { display: flex; flex-direction: column; }
  .tool-share-corner {
    position: static;
    order: 100;
    margin: 0 0 .55rem;
    justify-content: flex-end;
    display: flex;
  }
  .tool-pane > .tool-textarea,
  .tool-pane > textarea,
  .tool-pane > .inline-counts,
  .tool-pane > .extra-inputs,
  .tool-pane > .tool-detail,
  .tool-pane > details,
  .tool-pane > .typing-prompt,
  .tool-pane > .typing-stats,
  .tool-pane > .typing-input { order: 200; }
  /* Anything appearing after the textarea (e.g. results panes) goes last */
  .tool-pane > .results,
  .tool-pane > .tool-output { order: 300; }

  /* Article (labelled) share-bar: hide labels on phones, since space is tight */
  .share-bar:not(.share-bar-compact) .share-btn span { display: none; }
  .share-bar:not(.share-bar-compact) .share-btn { padding: .4rem; }
  .share-bar:not(.share-bar-compact) .share-label { display: none; }
}

/* ========== INLINE LIVE COUNTS (Word Counter) ========== */
.inline-counts {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .5rem;
  margin: 1rem 0 .25rem;
  padding: .75rem 1rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  text-align: center;
}
.inline-counts > div {
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
}
.inline-counts .num {
  font: 700 1.05rem/1.1 "Raleway", sans-serif;
  color: var(--c-primary-dark);
  font-variant-numeric: tabular-nums;
}
.inline-counts .lbl {
  font-size: .72rem; color: var(--c-text-muted);
  margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 700px) {
  .inline-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: .55rem .65rem; }
  .inline-counts .num { font-size: .95rem; }
  .inline-counts .lbl { font-size: .68rem; }
}

/* ========== DURATION-CHOICE LIST (typing-test variants) ========== */
.duration-choices {
  list-style: none; padding: 0; margin: .75rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .4rem;
}
.duration-choices li { margin: 0; }
.duration-choices a {
  display: block; padding: .55rem .8rem;
  background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius);
  color: var(--c-primary-dark); font-weight: 600; font-size: .92rem;
  text-decoration: none;
}
.duration-choices a:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.duration-choices a.is-current { background: var(--c-primary-dark); color: #fff; border-color: var(--c-primary-dark); cursor: default; }

/* ========== MOBILE TYPOGRAPHY + SPACING ========== */
@media (max-width: 700px) {
  /* Smaller, tighter headings on phones */
  h1 { font-size: 1.55rem; line-height: 1.2; margin: .4em 0 .5em; }
  h2 { font-size: 1.2rem; line-height: 1.25; margin: 1.1em 0 .4em; }
  h3 { font-size: 1.05rem; margin: .9em 0 .35em; }
  body { font-size: 15px; line-height: 1.55; }
  .tagline { font-size: .92rem; margin: -.2rem 0 .8rem; }

  /* Tighten breadcrumbs and kill empty top whitespace */
  .site-main { padding: .75rem 0 2rem; }
  .breadcrumbs, nav.breadcrumbs, .crumbs {
    font-size: .78rem; padding: 0; margin: 0 0 .55rem;
    color: var(--c-text-muted);
  }
  .tool-pane { padding: 1rem; }
  .tool-pane h1 { margin-top: 0; }
  .tool-textarea { min-height: 220px; padding: .75rem; font-size: 15px; }
  .layout { gap: 1.25rem; }
  .post-grid { grid-template-columns: 1fr; gap: .5rem; }

  /* Mobile-friendly tool toolbar — switch to a 4-column grid:
       Row 1: [ UPPER ] [ lower ] [ Title ] [ Sentence ]   — case actions
       Row 2: [ Clear ]      [ Copy ]      [ Upload .txt ] — doc actions
     The .sep flex-spacer is hidden; the file-pick spans 2 cols so the
     last row balances visually. */
  .tool-toolbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    padding-bottom: .6rem;
    margin-bottom: .6rem;
  }
  .tool-toolbar .sep { display: none; }
  .tool-toolbar button,
  .tool-toolbar .file-pick {
    padding: .55rem .25rem;
    font-size: .78rem;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Doc-action buttons span more on the second row */
  .tool-toolbar [data-action="clear"] { grid-column: span 1; }
  .tool-toolbar [data-action="copy"]  { grid-column: span 1; }
  .tool-toolbar .file-pick            { grid-column: span 2; }
}