/* tool-spotlight.css: the shared tool card (.tc), the home page's Tool of the day (.wt-f), and the "Try another tool" row at the
   end of tool pages (.ts-*). Used with tool-art.js and tool-spotlight.js. Light colors only: dark mode is the site's page-wide inversion,
   and site.css turns inline svg back, so the pictures keep their colors. Each card sets --tc-a (accent), --tc-t (tint), --tc-k (dark accent
   for text and buttons, 4.5:1 or better on white and on the tint).
   Motion: one slow, soft ring that fades (never a flash), only when the page may move (not with reduced motion, still or Quiet mode). */
:root{
  --tc-ink:#2B2620; --tc-soft:#5A5346; --tc-line:#E4D9BE; --tc-card:#FFFEFB; --tc-focus:#2B5B8C;
  --tc-ui:var(--d17-ui, var(--tol-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif));
  --tc-head:"Fraunces", Georgia, serif; --tc-read:"Lora", Georgia, serif;
}
.tc .sr-only, .ts-row .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- the card ---------- */
.tc{ position:relative; box-sizing:border-box; display:grid; align-content:start; min-width:0; cursor:pointer; color:var(--tc-ink); background:var(--tc-card);
  border:1.5px solid var(--tc-line); border-radius:22px; padding:14px; gap:10px 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 22px -18px rgba(58,46,77,.55);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tc:hover, .tc:focus-within{ transform:translateY(-3px); border-color:var(--tc-a); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 16px 28px -16px var(--tc-a); }
@supports (color:color-mix(in srgb, red 50%, blue)){
  .tc:hover, .tc:focus-within{ box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 16px 28px -16px color-mix(in srgb, var(--tc-a) 70%, transparent); }
}
.tc-art{ display:block; line-height:0; border-radius:22px; text-decoration:none; }
.tc-art svg{ display:block; width:100%; height:auto; max-width:96px; border-radius:24px; transition:transform .22s ease; }
.tc:hover .tc-art svg{ transform:rotate(-3deg) scale(1.04); }
.tc-body{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.tc-flags{ display:flex; flex-wrap:wrap; gap:6px; }
.tc-flags:empty{ display:none; }
.tc-flag, .tc-tried{ display:inline-flex; align-items:center; gap:4px; min-height:22px; box-sizing:border-box; padding:1px 9px; border-radius:999px; font:700 .72rem/1.3 var(--tc-ui); letter-spacing:.02em; }
.tc-flag.is-day{ color:#fff; background:var(--tc-k); }
.tc-flag.is-new{ color:#6B1E4A; background:#FFE0F0; }
.tc-flag.is-try{ color:#6A4A00; background:#FFEDB3; }
.tc-tried{ color:#1F5A3A; background:#E1F3E8; }
.tc-tried[hidden]{ display:none; }
.tc-name{ margin:0 !important; padding:0 !important; font:600 1.2rem/1.2 var(--tc-head) !important; letter-spacing:-.005em; color:var(--tc-ink); background:none !important; border:0 !important; text-transform:none !important; }
.tc-promise{ margin:0; font:400 .98rem/1.42 var(--tc-read); color:var(--tc-soft); text-wrap:pretty; }
.tc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.tc-chip{ display:inline-flex; align-items:center; gap:5px; min-height:26px; box-sizing:border-box; padding:2px 10px; border-radius:999px; font:600 .78rem/1.3 var(--tc-ui); color:#4A4338; background:#F3EEE2; }
.tc-chip:first-child{ color:var(--tc-k); background:var(--tc-t); }
.tc-chip svg{ flex:none; }
.tc-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tc .tc-go, .tc .tc-share{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; box-sizing:border-box; padding:6px 18px; border-radius:999px; text-decoration:none; cursor:pointer; font:700 .95rem/1.2 var(--tc-ui); }
.tc .tc-go{ color:#fff; background:var(--tc-k); border:2px solid var(--tc-k); text-decoration:none; }
.tc .tc-go::after{ content:"\2192"; font-weight:700; transition:transform .18s ease; }
.tc .tc-go:hover{ filter:brightness(1.08); color:#fff; }
.tc-go:hover::after{ transform:translateX(3px); }
.tc .tc-share{ color:#3C3354; background:#fff; border:1.5px solid #CFC3E3; padding:6px 14px; }
.tc .tc-share:hover{ border-color:var(--tc-k); color:var(--tc-k); }
.tc :is(a, button, summary):focus-visible, .ts-row a:focus-visible, .wt-all:focus-visible{ outline:3px solid var(--tc-focus); outline-offset:2px; }

/* grid card: on a phone the picture sits beside the words; on wider screens it sits above them */
.tc--grid{ grid-template-columns:76px minmax(0, 1fr); grid-template-areas:"art body" "acts acts" "more more"; }
.tc--grid .tc-art{ grid-area:art; }
.tc--grid .tc-body{ grid-area:body; }
.tc--grid .tc-acts{ grid-area:acts; }
.tc--grid > :not(.tc-art, .tc-body, .tc-acts){ grid-area:more; }
@media (min-width:640px){
  .tc--grid{ grid-template-columns:1fr; grid-template-areas:"art" "body" "acts" "more"; grid-template-rows:auto 1fr auto auto; padding:16px 16px 16px; gap:12px; }
  .tc--grid .tc-art svg{ max-width:88px; }
  .tc--grid .tc-body{ gap:7px; }
  .tc--grid .tc-acts{ margin-top:auto; }
  .tc--grid .tc-name{ font-size:1.25rem !important; }
}

/* Start here: bigger, picture first, two across even on a phone */
.tc--start, .tc--rail{ display:flex; flex-direction:column; }
.tc--start .tc-art, .tc--rail .tc-art{ align-self:flex-start; }
.tc--start .tc-body, .tc--rail .tc-body{ flex:1 1 auto; }
.tc--start{ padding:12px 12px 14px; gap:10px; }
.tc--start .tc-art svg{ max-width:84px; }
.tc--start .tc-name{ font-size:1.12rem !important; }
.tc--start .tc-promise{ font-size:.92rem; }
.tc--start .tc-acts{ margin-top:auto; }
.tc--start .tc-go{ width:100%; }
@media (min-width:640px){ .tc--start{ padding:16px; gap:12px; } .tc--start .tc-art svg{ max-width:96px; } .tc--start .tc-name{ font-size:1.22rem !important; } .tc--start .tc-promise{ font-size:.98rem; } }

@media (max-width:639px){ .tc--start .tc-chip:nth-child(2){ display:none; } }

/* rail card (home) */
.tc--rail{ gap:8px; padding:14px; height:100%; }
.tc--rail .tc-art svg{ max-width:64px; border-radius:18px; }
.tc--rail .tc-name{ font-size:1.12rem !important; }
.tc--rail .tc-promise{ font-size:.95rem; }
.tc--rail .tc-acts{ margin-top:auto; padding-top:2px; }
.tc--rail .tc-go{ width:100%; }
.tc.is-day{ border-color:var(--tc-a); border-width:2px; background:linear-gradient(180deg, var(--tc-t) 0, var(--tc-card) 42%); }

/* ---------- the home page's Tool of the day (home28): one tool, written out plainly ---------- */
[data-tool-rail][hidden]{ display:none !important; }
html.tol-quiet [data-tool-rail], html.tol-no-helpers [data-tool-rail]{ display:none !important; }
.wt-f{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:0 1.3rem; align-items:center; max-width:46rem; }
.wt-f-art{ display:block; width:96px; height:96px; }
.wt-f-art svg{ display:block; width:96px; height:96px; }
.wt-f-body{ min-width:0; }
.wt-f .wt-f-name{ margin:0 0 .15rem !important; padding:0 !important; border:0 !important; background:none !important; font:500 clamp(1.5rem, 1.25rem + 1vw, 2rem)/1.12 "Fraunces", Georgia, serif !important; letter-spacing:-.01em; text-transform:none !important; color:#2B2620 !important; }
.wt-f .wt-f-pr{ margin:0 0 .3rem !important; max-width:none !important; font:400 1.06rem/1.5 "Lora", Georgia, serif; color:#2B2620; }
.wt-f .wt-f-meta{ margin:0 0 .55rem !important; font:400 .95rem/1.4 var(--tc-ui); color:#554E42; }
.wt-f .wt-f-go{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem 1rem; margin:0 !important; }
.wt-f-btn{ display:inline-flex; align-items:center; min-height:44px; padding:.45rem 1.25rem; border-radius:999px; text-decoration:none; font:700 1rem/1.2 var(--tc-ui); color:#fff; background:var(--tc-k, #2B5B8C); border:1.5px solid var(--tc-k, #2B5B8C); }
.wt-f-btn::after{ content:"\00a0\2192"; }
.wt-f-btn:hover{ filter:brightness(.92); }
.wt-f-btn:focus-visible{ outline:3px solid var(--tc-focus, #2B5B8C); outline-offset:3px; }
.wt-f-count{ font:400 .92rem/1.4 var(--tc-ui); color:#554E42; }
@media (max-width:520px){ .wt-f{ grid-template-columns:64px minmax(0, 1fr); gap:0 .9rem; align-items:start; } .wt-f-art, .wt-f-art svg{ width:64px; height:64px; } }

/* ---------- "Try another tool" at the end of a tool page: small, and quiet ---------- */
.ts-row{ position:relative; margin:.8rem 0 0; padding:.7rem 0 0; border-top:1px dashed #D9C8F0; border-radius:12px; }
.ts-row .ts-k, .ts-row .ts-cele, .ts-row .ts-all{ margin:0 0 .35rem !important; padding:0 !important; background:none !important; box-shadow:none !important; }
.ts-row .ts-k{ font:500 .74rem/1.3 "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing:.06em; text-transform:uppercase; color:#3E6B4C; }
.ts-row .ts-cele{ display:block; margin:0 0 .6rem !important; padding:.5rem .75rem !important; border-radius:12px; background:#FFF4D2 !important; color:#5B4300; font:600 .95rem/1.4 var(--tc-ui); }
.ts-list{ display:grid; gap:.45rem; margin:0 !important; padding:0 !important; list-style:none; }
.ts-list > li{ margin:0 !important; padding:0 !important; max-width:none; background:none !important; border:0 !important; box-shadow:none !important; }
.ts-list > li::before{ content:none !important; }
.ts-row a.ts-n{ display:flex; align-items:center; gap:.7rem; min-height:44px; box-sizing:border-box; padding:.4rem .7rem .4rem .45rem; border-radius:16px; text-decoration:none; color:var(--tc-ink); background:var(--tc-t, #F4ECFB); border:1.5px solid transparent; }
.ts-row a.ts-n, .ts-row a.ts-n:hover{ text-decoration:none !important; }
.ts-row a.ts-n:hover{ border-color:var(--tc-a); }
.ts-n-art{ flex:none; line-height:0; }
.ts-n-art svg{ display:block; width:44px; height:44px; border-radius:13px; }
.ts-n-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ts-row .ts-n-name{ font:700 1rem/1.25 var(--tc-ui); color:var(--tc-k, #3C2F58); }
.ts-row .ts-n-pr{ font:400 .88rem/1.35 var(--tc-read); color:var(--tc-soft); }
.ts-row .ts-n-time{ flex:none; padding:2px 9px; border-radius:999px; font:700 .74rem/1.4 var(--tc-ui); color:var(--tc-k, #3C2F58); background:rgba(255,255,255,.75); }
.ts-row .ts-all{ margin:.4rem 0 0 !important; }
.ts-row .ts-all a{ display:inline-flex; align-items:center; min-height:44px; font:700 .92rem/1.2 var(--tc-ui); }
@media (max-width:420px){ .ts-row .ts-n-time{ display:none; } }

/* ---------- a soft moment for the first and the fifth tool ---------- */
@media (prefers-reduced-motion:no-preference){
  html:not(.tol-still):not(.tol-quiet) .ts-pulse{ animation:ts-glow 2.6s ease-out 1 both; }
  html:not(.tol-still):not(.tol-quiet) .tc:hover .tc-art svg{ transition:transform .22s ease; }
}
@keyframes ts-glow{ 0%{ box-shadow:0 0 0 0 rgba(246,207,106,0); } 30%{ box-shadow:0 0 0 8px rgba(246,207,106,.38); } 100%{ box-shadow:0 0 0 22px rgba(246,207,106,0); } }
@media (prefers-reduced-motion:reduce){ .tc, .tc-art svg, .tc .tc-go::after{ transition:none !important; } .tc:hover, .tc:focus-within{ transform:none; } .tc:hover .tc-art svg{ transform:none; } }
html.tol-still .tc, html.tol-still .tc-art svg, html.tol-still .tc-go::after, html.tol-quiet .tc, html.tol-quiet .tc-art svg{ transition:none !important; }
html.tol-still .tc:hover, html.tol-quiet .tc:hover, html.tol-still .tc:hover .tc-art svg, html.tol-quiet .tc:hover .tc-art svg{ transform:none; }

/* the row on its own, at the end of a tool page that has no "What you got from this" card */
.ts-end{ position:relative; z-index:2; box-sizing:border-box; max-width:40rem; margin:1.4rem 0 1.2rem; padding:.85rem 1rem .9rem; border-radius:18px 18px 18px 6px; background:rgba(255,251,242,.96); border:1.5px solid #D9C8F0; box-shadow:0 6px 18px rgba(90,70,120,.08); }
.ts-end .ts-row{ margin:0; padding:0; border-top:0; }