/*
Theme Name:   Word Tools
Theme URI:    https://www.cooltextfont.com/generator/
Author:       cooltextfont.com
Description:  A fast, mobile-first classic theme for word generator tools. No web fonts, no jQuery, no framework. Letter-tile styling grounded in the subject: bone tiles on deep board green. Built to pair with the Word Tools Generator plugin, but works on its own.
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wordtools
Tags:         one-column, custom-menu, custom-logo, translation-ready, blog
*/

/* ==========================================================================
   Everything below is plain CSS. Change a colour variable and the whole
   site follows. There is no build step and no preprocessor.
   ========================================================================== */

/* ==========================================================================
   cooltextfont.com/generator/ - shared stylesheet
   Edit freely. No build step, no framework, no webfont downloads.
   Everything here is plain CSS; change a colour below and the whole site
   follows.
   ========================================================================== */

:root{
  /* --- palette: bone letter tiles on a deep board green ------------------ */
  --paper:      #FAFAF7;
  --paper-2:    #F2F2EC;
  --board:      #1B4D3E;
  --board-2:    #276B56;
  --board-ink:  #E8F1ED;
  --tile:       #F2E8D5;
  --tile-edge:  #D9CBAE;
  --ink:        #14201B;
  --muted:      #5F6D66;
  --line:       #E4E4DC;
  --amber:      #9C6F1E;
  --amber-bg:   #FBF3E2;

  /* --- type: no webfonts. Data is monospace, prose is system sans ------- */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 62rem;
  --r: 10px;
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }

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

/* --- draft banner. DELETE THIS BLOCK AND THE BANNER HTML AT PUBLISH ----- */
.draftbar{
  background:#8A1C1C; color:#fff; font-size:.8rem; font-weight:700;
  text-align:center; padding:.4rem 1rem; letter-spacing:.02em;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-head{
  background:var(--board); color:var(--board-ink);
  position:sticky; top:0; z-index:40;
}
.site-head .wrap{ display:flex; align-items:center; gap:1rem; min-height:56px; }

.brand{
  font-family:var(--mono); font-weight:700; font-size:1rem;
  color:var(--board-ink); text-decoration:none; letter-spacing:-.02em;
  white-space:nowrap;
}
.brand span{ color:var(--tile); }

.nav-toggle{
  margin-left:auto; background:none; border:1px solid rgba(255,255,255,.28);
  color:inherit; border-radius:8px; padding:.45rem .7rem; font-size:.9rem;
  cursor:pointer;
}
@media (min-width:860px){ .nav-toggle{ display:none; } }

.nav{ margin-left:auto; }
.nav ul{ list-style:none; display:flex; gap:.25rem; margin:0; padding:0; flex-wrap:wrap; }
.nav a{
  color:var(--board-ink); text-decoration:none; font-size:.92rem;
  padding:.4rem .6rem; border-radius:7px; display:block;
}
/* The generic a:hover colour is a green, which disappears against the green
   header. Nav links keep their own colour on every state. */
.nav a,
.nav a:link,
.nav a:visited,
.nav a:hover,
.nav a:focus-visible,
.nav a:active{ color:var(--board-ink); }
.nav a:hover,.nav a:focus-visible{ background:rgba(255,255,255,.16); }
.nav a[aria-current="page"],
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a,
.nav .current_page_ancestor > a{
  background:rgba(255,255,255,.20); font-weight:650; color:#fff;
}

@media (max-width:859px){
  .nav{ display:none; width:100%; margin:0; }
  .nav.open{ display:block; }
  .site-head .wrap{ flex-wrap:wrap; padding-bottom:.5rem; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav a{ padding:.6rem .4rem; border-top:1px solid rgba(255,255,255,.12); border-radius:0; }
}

/* ==========================================================================
   Page furniture
   ========================================================================== */
main{ padding-bottom:3rem; }

.crumbs{ font-size:.82rem; color:var(--muted); padding:.7rem 0 0; }
.crumbs a{ color:var(--muted); }
.crumbs span{ opacity:.6; margin:0 .35rem; }

h1{ font-size:clamp(1.6rem,5vw,2.35rem); line-height:1.15; letter-spacing:-.022em; margin:.6rem 0 .35rem; }
h2{ font-size:clamp(1.25rem,3.4vw,1.6rem); line-height:1.22; letter-spacing:-.015em; margin:2.4rem 0 .7rem; }
h3{ font-size:1.08rem; margin:1.6rem 0 .45rem; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }
.lede{ color:var(--muted); font-size:1.03rem; margin-bottom:1.2rem; max-width:46rem; }

/* Links: no underline in body copy. The green is chosen so it clears 4.5:1
   against the page AND 3:1 against the body text - without an underline,
   colour alone has to carry the "this is a link" signal, and 3:1 against
   surrounding text is what makes that legible. Underline returns on hover
   and focus so there is still a non-colour cue on interaction. */
a{ color:#0F7A57; text-decoration:none; }
a:hover,a:focus-visible{ color:#0B5F43; text-decoration:underline; text-underline-offset:2px; }

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; border-radius:4px; }

hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }

/* ==========================================================================
   The tool panel
   ========================================================================== */
.tool{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1rem; margin:1rem 0 1.5rem;
  box-shadow:0 1px 0 rgba(20,32,27,.04);
}

.controls{ display:flex; flex-wrap:wrap; gap:.6rem .7rem; align-items:flex-end; }

.field{ display:flex; flex-direction:column; gap:.25rem; flex:1 1 8.5rem; min-width:0; }
.field label{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }

input[type=text],input[type=number],select{
  font:inherit; font-size:16px;           /* 16px stops iOS zooming on focus */
  padding:.55rem .6rem; border:1px solid #CFD4CE; border-radius:8px;
  background:#fff; color:var(--ink); width:100%; min-width:0;
}
input[type=text]{ font-family:var(--mono); }
select{ appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235F6D66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:11px; padding-right:1.9rem; }

.check{ display:flex; align-items:center; gap:.45rem; font-size:.92rem; flex:0 0 auto; padding-bottom:.55rem; }
.check input{ width:1.05rem; height:1.05rem; accent-color:var(--board); }

.btn{
  font:inherit; font-weight:650; cursor:pointer;
  padding:.7rem 1.15rem; border-radius:8px; border:1px solid transparent;
  background:var(--board); color:#fff; line-height:1.2;
}
.btn:hover{ background:var(--board-2); }
.btn:active{ transform:translateY(1px); }
.btn-lg{ flex:1 1 100%; padding:.85rem 1rem; font-size:1.05rem; }
.btn-ghost{ background:#fff; color:var(--ink); border-color:#CFD4CE; font-weight:550; }
.btn-ghost:hover{ background:var(--paper-2); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.btn-row .btn{ flex:1 1 auto; }

@media (min-width:640px){
  .btn-lg{ flex:0 0 auto; min-width:12rem; }
}

.hint{ font-size:.82rem; color:var(--muted); margin:.6rem 0 0; }
kbd{ font-family:var(--mono); font-size:.78rem; background:var(--paper-2);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:.05rem .35rem; }

/* ==========================================================================
   SIGNATURE: letter tiles
   ========================================================================== */
.tiles{ display:flex; flex-wrap:wrap; gap:.3rem; margin:0; padding:0; list-style:none; }

.tile{
  position:relative;
  font-family:var(--mono); font-weight:700;
  font-size:clamp(1.15rem,5.2vw,1.75rem); line-height:1;
  width:clamp(2rem,8.2vw,2.7rem); height:clamp(2.3rem,9.2vw,3rem);
  display:flex; align-items:center; justify-content:center;
  background:var(--tile); color:var(--ink);
  border-radius:6px; border:1px solid var(--tile-edge);
  box-shadow:0 2px 0 var(--tile-edge);
  text-transform:uppercase;
  animation:tile-in .22s ease-out both;
}
.tile .pts{
  position:absolute; right:2px; bottom:1px;
  font-size:.52rem; font-weight:700; color:var(--amber); line-height:1;
}
@keyframes tile-in{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .tile{ animation:none } }

.wordcard{ padding:.4rem 0 .2rem; }
.wordcard .meta{ font-size:.82rem; color:var(--muted); margin-top:.55rem; font-family:var(--mono); }
.wordcard .def{ margin-top:.45rem; font-size:.95rem; color:var(--ink); max-width:44rem; }
.wordcard + .wordcard{ border-top:1px dashed var(--line); margin-top:1rem; padding-top:1rem; }

.results{ margin-top:1.1rem; }
.results:empty{ display:none; }

.empty{ color:var(--muted); font-size:.95rem; padding:.6rem 0; }

/* --- word list output (many words) ------------------------------------- */
.wordgrid{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:grid; gap:.3rem;
  grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));
}
.wordgrid li{
  font-family:var(--mono); font-size:.92rem;
  background:#fff; border:1px solid var(--line); border-radius:7px;
  padding:.34rem .5rem; display:flex; justify-content:space-between; gap:.4rem;
  align-items:baseline; min-width:0;
}
.wordgrid li > span:first-child{ min-width:0; overflow-wrap:anywhere; }
.wordgrid .pts{ flex:0 0 auto; }
.wordgrid .pts{ font-size:.72rem; color:var(--amber); font-weight:700; }
.lengroup{ margin-top:1.3rem; }
.lengroup h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:0 0 .4rem; font-weight:700; }
.count{ font-family:var(--mono); font-size:.85rem; color:var(--muted); }

/* ==========================================================================
   Cards / grids / blocks
   ========================================================================== */
.grid{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); margin:1rem 0; }

.card{
  display:block; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:.85rem .95rem; text-decoration:none; color:inherit;
}
.card:hover{ border-color:var(--board-2); background:#fff; }
.card b{ display:block; font-size:1rem; margin-bottom:.15rem; }
.card span{ font-size:.86rem; color:var(--muted); line-height:1.45; display:block; }

.letters{ display:grid; grid-template-columns:repeat(auto-fill,minmax(3.2rem,1fr)); gap:.35rem; margin:1rem 0; }
.letters a{
  font-family:var(--mono); font-weight:700; font-size:1.05rem; text-transform:uppercase;
  background:var(--tile); border:1px solid var(--tile-edge); box-shadow:0 2px 0 var(--tile-edge);
  border-radius:6px; text-decoration:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; min-height:2.8rem;
}
.letters a:hover{ background:#fff; }

.chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.8rem 0 1.2rem; padding:0; list-style:none; }
.chips a{
  font-family:var(--mono); font-size:.86rem; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:.28rem .7rem;
}
.chips a:hover{ border-color:var(--board-2); }

.note{
  background:var(--amber-bg); border:1px solid #EBDCBC; border-left:3px solid var(--amber);
  border-radius:8px; padding:.8rem .95rem; margin:1.3rem 0; font-size:.94rem;
}
.note p:last-child{ margin-bottom:0; }

.faq{ margin:1rem 0; }
.faq details{ border-bottom:1px solid var(--line); padding:.15rem 0; }
.faq summary{ cursor:pointer; font-weight:600; padding:.7rem 0; list-style:none; position:relative; padding-right:1.5rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.25rem; top:.6rem; font-family:var(--mono); color:var(--muted); font-size:1.15rem; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 .9rem; color:var(--muted); }

table{ width:100%; border-collapse:collapse; font-size:.93rem; margin:1rem 0; }
th,td{ text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); }
th{ font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
td:first-child{ font-family:var(--mono); }

/* --- prose blocks ------------------------------------------------------ */
.prose{ max-width:46rem; }
.prose ul,.prose ol{ padding-left:1.15rem; margin:0 0 1rem; }
.prose li{ margin-bottom:.4rem; }

/* --- full-screen card mode (pictionary / charades) --------------------- */
.playcard{
  background:var(--board); color:var(--board-ink);
  border-radius:var(--r); padding:2rem 1rem; text-align:center; margin-top:1rem;
  min-height:11rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
}
.playcard .word{
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.5rem,7.5vw,2.6rem); letter-spacing:.01em; line-height:1.1; word-break:break-word;
}
.playcard .tagline{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; opacity:.75; }
.playcard.hidden-word .word{ filter:blur(11px); user-select:none; }
.timer{ font-family:var(--mono); font-size:1.5rem; font-weight:700; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{ background:var(--board); color:var(--board-ink); padding:2rem 0 2.5rem; margin-top:3rem; font-size:.92rem; }
/* Footer: cream, no underline. Safe without one because every item in these
   columns is a link - there is no surrounding body text to be confused with. */
.site-foot a,
.site-foot a:link,
.site-foot a:visited{ color:var(--tile); text-decoration:none; }
.site-foot a:hover,
.site-foot a:focus-visible{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.foot-cols{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); }
.foot-cols h4{ font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; margin:0 0 .5rem; opacity:.7; font-weight:700; }
.foot-cols ul{ list-style:none; margin:0; padding:0; }
.foot-cols li{ margin-bottom:.3rem; }
.foot-legal{ margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.15); font-size:.84rem; opacity:.8; }

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

/* --- collapsible extra filters ---------------------------------------- */
.more{ margin-top:1rem; border-top:1px solid var(--line); padding-top:.7rem; }
.more summary{
  cursor:pointer; font-size:.86rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; list-style:none;
  display:inline-flex; align-items:center; gap:.35rem; padding:.2rem 0;
}
.more summary::-webkit-details-marker{ display:none; }
.more summary::before{ content:"+"; font-family:var(--mono); font-size:1rem; }
.more[open] summary::before{ content:"–"; }
.more .controls{ margin-top:.75rem; }


/* ==========================================================================
   Saving words
   A heart on every word, and a panel that lists what you kept. Stored in the
   browser only - there is no account and nothing is sent anywhere.
   ========================================================================== */
.heart{
  border:0; background:none; cursor:pointer; padding:.1rem .25rem;
  font-size:1rem; line-height:1; color:var(--muted);
  transition:color .12s ease, transform .12s ease;
}
.heart:hover{ color:var(--amber); }
.heart[aria-pressed="true"]{ color:#B23A48; }
.heart[aria-pressed="true"]:hover{ color:#8E2C38; }
.heart:active{ transform:scale(1.25); }
@media (prefers-reduced-motion:reduce){ .heart{ transition:none } .heart:active{ transform:none } }

.wordcard .heart{ font-size:1.5rem; vertical-align:middle; margin-left:.2rem; }
.wordcard .cardtop{ display:flex; align-items:flex-start; gap:.5rem; flex-wrap:wrap; }

/* The heart sits in the corner rather than in the flow, so a long word keeps
   the full width of its cell instead of wrapping around the button. */
.wordgrid li{ position:relative; padding-right:1.65rem; }
.wordgrid li .heart{ position:absolute; right:.15rem; top:.22rem; font-size:.85rem; }

.saved{ margin-top:1rem; border-top:1px solid var(--line); padding-top:.7rem; }
.saved > summary{
  cursor:pointer; font-size:.86rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; list-style:none;
  display:inline-flex; align-items:center; gap:.4rem; padding:.2rem 0;
}
.saved > summary::-webkit-details-marker{ display:none; }
.saved > summary::before{ content:"♥"; color:#B23A48; font-size:1rem; }
.saved-count{
  font-family:var(--mono); background:var(--paper-2); border:1px solid var(--line);
  border-radius:20px; padding:.05rem .5rem; font-size:.78rem; color:var(--ink);
}
.saved-body{ margin-top:.75rem; }
.saved-empty{ color:var(--muted); font-size:.92rem; margin:.3rem 0 .6rem; }

/* --- brand mark --------------------------------------------------------- */
.brand-mark{ display:flex; align-items:center; gap:.5rem; }
.brand-mark img{ border-radius:5px; display:block; }
.brand-text b{ color:var(--tile); font-weight:700; }
.custom-logo{ height:32px; width:auto; display:block; }




/* ==========================================================================
   Links to pages that are not published yet
   While the site is being released in batches, a link to an unpublished page
   would 404. The plugin turns those into plain text carrying this class, so
   the wording stays and the dead link does not.
   ========================================================================== */
.wt-soon{ color:var(--muted); }
.chips .wt-soon,
.letters .wt-soon{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper-2); border:1px dashed var(--line); color:var(--muted);
  border-radius:20px; padding:.28rem .7rem; font-family:var(--mono); font-size:.86rem;
}
.letters .wt-soon{
  display:flex; width:100%;            /* fill the grid cell like a real link */
  border-radius:6px; min-height:2.8rem; font-size:1.05rem;
  font-weight:700; text-transform:uppercase; box-shadow:none;
}
.grid .wt-soon{
  display:block; background:var(--paper-2); border:1px dashed var(--line);
  border-radius:var(--r); padding:.85rem .95rem; color:var(--muted);
}
.grid .wt-soon b{ display:block; font-size:1rem; margin-bottom:.15rem; }
.grid .wt-soon span{ font-size:.86rem; line-height:1.45; display:block; }

/* ==========================================================================
   Touch targets
   Everything a finger has to hit gets at least ~44px of tappable height.
   Several controls were 17-30px tall, which is fine with a mouse and
   genuinely annoying on a phone.
   ========================================================================== */
@media (pointer:coarse){
  /* Heart: keep the glyph small, make the hit area big. */
  .heart{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .wordgrid li .heart{
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    min-width:38px; min-height:38px;
  }
  .wordgrid li{ min-height:38px; align-items:center; padding-right:2.1rem; }
  .wordcard .heart{ margin-left:0; }

  /* Prose links inside content: more room between lines so neighbouring
     links are not adjacent to the point of being unhittable. */
  .entry-content p a,
  .prose p a,
  .prose li a{ padding:.15rem 0; }
  .prose li{ margin-bottom:.6rem; }

  /* Checkboxes and their labels */
  .check{ min-height:44px; align-items:center; }
  .check input{ width:1.35rem; height:1.35rem; }

  /* Menu button */
  .nav-toggle{ min-height:44px; min-width:56px; }

  /* Footer link lists */
  .foot-cols li{ margin-bottom:.35rem; }
  .foot-cols a{ display:inline-block; padding:.62rem 0; }
  .nav a{ padding-top:.75rem; padding-bottom:.75rem; }
  .crumbs a{ display:inline-block; padding:.5rem .1rem; }

  /* Chips and letter tiles in hubs */
  .chips a{ padding:.62rem .9rem; }
  .letters a{ min-height:3.2rem; }
}


/* Cards and tiles are whole clickable blocks, not text links - never
   underline those, on any state. */
.card,.card:hover,.card:focus-visible,
.letters a,.letters a:hover,
.chips a,.chips a:hover,
.brand,.brand:hover,
.crumbs a:hover{ text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

/* --- progressive hints on the party-game tools -------------------------- */
.hints{
  list-style:none; margin:.9rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.4rem;
}
.hints li{
  background:var(--amber-bg); border:1px solid #EBDCBC;
  border-left:3px solid var(--amber);
  border-radius:8px; padding:.55rem .8rem; font-size:.95rem;
}
.hints li:first-child{ font-family:var(--mono); font-size:.88rem; }
.hints li:last-child:nth-child(n+3){ font-style:italic; }
.btn-ghost[disabled]{ opacity:.5; cursor:default; }

/* ==========================================================================
   WordPress-specific styling
   The rules above came from the static build. These handle what WordPress
   adds: menus, editor alignment classes, captions, pagination, comments.
   ========================================================================== */

/* --- admin bar ---------------------------------------------------------- */
body.admin-bar .site-head{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-head{ top:46px; } }

/* --- menu items generated by wp_nav_menu -------------------------------- */
.nav .menu-item-has-children > a::after{ content:" ▾"; opacity:.6; font-size:.8em; }
.nav .sub-menu{ list-style:none; margin:0; padding:0; }
@media (min-width:860px){
  .nav li{ position:relative; }
  .nav .sub-menu{
    display:none; position:absolute; left:0; top:100%; min-width:14rem;
    background:var(--board); border-radius:0 0 8px 8px; padding:.3rem;
    box-shadow:0 8px 24px rgba(20,32,27,.28); z-index:50;
  }
  .nav li:hover > .sub-menu,
  .nav li:focus-within > .sub-menu{ display:block; }
  .nav .sub-menu a{ white-space:nowrap; }
}
@media (max-width:859px){
  .nav .sub-menu a{ padding-left:1.4rem; font-size:.88rem; }
}

/* --- page title --------------------------------------------------------- */
.page-title{ margin:.6rem 0 .35rem; }
.entry-meta{ font-size:.85rem; color:var(--muted); margin:0 0 1.2rem; }

/* --- editor alignment classes ------------------------------------------- */
.alignleft{ float:left; margin:.3rem 1.2rem .8rem 0; }
.alignright{ float:right; margin:.3rem 0 .8rem 1.2rem; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.alignwide,.alignfull{ margin-left:0; margin-right:0; }
.wp-caption{ max-width:100%; }
.wp-caption-text,figcaption{ font-size:.85rem; color:var(--muted); margin-top:.4rem; }
.wp-block-image img{ border-radius:8px; }
blockquote{
  margin:1.4rem 0; padding:.2rem 0 .2rem 1rem;
  border-left:3px solid var(--tile-edge); color:var(--muted);
}
code,pre{ font-family:var(--mono); font-size:.9em; }
pre{ background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:.9rem; overflow:auto; }
code{ background:var(--paper-2); padding:.1rem .3rem; border-radius:4px; }
pre code{ background:none; padding:0; }

/* --- post lists and pagination ------------------------------------------ */
.post-list{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); margin:1.2rem 0; }
.pagination{ display:flex; gap:.4rem; flex-wrap:wrap; margin:2rem 0; }
.pagination .page-numbers{
  font-family:var(--mono); text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:7px; padding:.4rem .75rem;
}
.pagination .current{ background:var(--board); color:#fff; border-color:var(--board); }

/* --- search ------------------------------------------------------------- */
.searchform{ display:flex; gap:.5rem; margin:1rem 0 1.6rem; max-width:32rem; }
.searchform input[type=search]{
  font:inherit; font-size:16px; flex:1; padding:.55rem .6rem;
  border:1px solid #CFD4CE; border-radius:8px; min-width:0;
}

/* --- comments (kept minimal - tool pages rarely want them) -------------- */
.comment-list{ list-style:none; padding:0; }
.comment-list li{ border-top:1px solid var(--line); padding:1rem 0; }

/* --- skip link ---------------------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--amber); color:#fff;
  padding:.6rem 1rem; z-index:100; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* --- print: strip the chrome, keep the words ---------------------------- */
@media print{
  .site-head,.site-foot,.crumbs,.btn-row,.more,.hint,.skip-link,.draftbar{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
  .tool{ border:none; padding:0; box-shadow:none; }
  .wordgrid{ grid-template-columns:repeat(4,1fr); }
  a{ text-decoration:none; color:#000; }
}

/* --- entry content: prose measure, but tools and grids run full width ---- */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > blockquote,
.entry-content > .note,
.entry-content > table{ max-width:46rem; }
.entry-content > .lede{ max-width:46rem; }
.entry-content > .tool,
.entry-content > .grid,
.entry-content > .letters,
.entry-content > .chips,
.entry-content > .faq{ max-width:none; }