/* What to Say at Work: the shared components (10 Oct 2026).

   Every page loads this file last, the home page included, so a button or the
   header looks the same everywhere. Change a component here, never in a page.
   See them all on /components (not indexed). The kitchen check (check 14)
   fails any page that uses a button kind not listed here, types an arrow into
   a button, or skips the shared header.

   Tokens come from the page: _ds_bundle.css on most pages, the home page's
   own :root on the home page (which maps its names onto these). */

/* ---- Buttons: primary and secondary only ---------------------------------
   Primary carries the main action and always ends in ↗, drawn here rather
   than typed (iPhones turn the ↗ character into an emoji). Secondary never
   has an arrow. */
.wts-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 24px;
  border-radius:999px; border:1px solid var(--rule); background:transparent; color:var(--ink);
  font:600 16px/1.2 "Public Sans", "Helvetica Neue", Arial, sans-serif; text-decoration:none; cursor:pointer;
  transition:transform .16s ease, background .2s ease, box-shadow .2s ease, filter .2s ease; }
.wts-btn:hover { transform:translateY(-2px); }
.wts-btn:focus-visible { outline:2px solid var(--pen); outline-offset:3px; }
.wts-btn--primary { background:var(--clay); border-color:transparent; color:var(--clay-ink);
  box-shadow:0 10px 26px rgba(194,104,59,.34); }
.wts-btn--primary:hover { background:var(--clay); filter:brightness(1.06); }
.wts-btn--primary::after { content:""; width:14px; height:14px; flex:none; background:currentColor; transition:transform .16s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 10.5 3.5M5 3.5h5.5V9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 10.5 3.5M5 3.5h5.5V9'/%3E%3C/svg%3E") center/contain no-repeat; }
.wts-btn--primary:hover::after { transform:translate(2px,-2px); }
.wts-btn--secondary { background:transparent; border-color:var(--ink-3, var(--rule)); }   /* outline only (decided 10 Oct 2026) */
.wts-btn--secondary:hover { background:var(--panel); }
.wts-btn--sm { padding:11px 17px; font-size:14px; }
.wts-btn--wide { width:100%; }
.wts-btn--soon { background:var(--paper-2, var(--panel)); border-color:var(--rule); color:var(--ink-3, var(--ink-2)); box-shadow:none; cursor:default; }
.wts-btn--soon::after { content:none; }
.wts-btn--soon:hover { transform:none; filter:none; }

/* ---- Header: pinned, frosted, the same on every page ----------------------
   Pages carry the brand and the links in nav.wts-nav; site.js wraps it in
   header.wts-header and adds the first-page button, the day/night toggle and,
   on phones, the menu. */
.wts-header { position:sticky; top:0; z-index:40; isolation:isolate; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:var(--header, color-mix(in srgb, var(--paper) 80%, transparent)); border-bottom:1px solid var(--rule); }
.wts-nav { max-width:1180px; margin:0 auto; padding:14px 28px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:nowrap; }
.wts-brand { display:flex; align-items:center; text-decoration:none; color:var(--ink); flex:none; }
.wts-brand img { height:28px; width:auto; display:block; }   /* the lockup is wide: 28px tall is about 276px across */
:root[data-theme="dark"] .wts-brand img, :root:not([data-theme]) .wts-brand img { content:url("/logo/lockup-horizontal-paper.svg"); }
.wts-nav__links { display:flex; align-items:center; gap:26px; margin-left:auto; }
.wts-nav__links a { color:var(--ink-2); font:400 15px/1 "Public Sans", "Helvetica Neue", Arial, sans-serif; text-decoration:none; position:relative; padding:6px 0; }
.wts-nav__links a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ink); transition:right .2s ease; }
.wts-nav__links a:hover { color:var(--ink); } .wts-nav__links a:hover::after { right:0; }
.wts-tools { display:flex; align-items:center; gap:12px; flex:none; }
.wts-toggle { width:40px; height:40px; border-radius:999px; border:1px solid var(--rule); background:var(--panel); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; padding:0; flex:none; transition:transform .16s ease; }
.wts-toggle:hover { transform:translateY(-2px); }
.wts-toggle svg { width:17px; height:17px; }
.wts-burger { display:none; width:44px; height:44px; border-radius:14px; border:1px solid var(--rule); background:var(--panel);
  color:var(--ink); place-items:center; cursor:pointer; padding:0; flex:none; }
.wts-burger span, .wts-burger span::before, .wts-burger span::after { content:""; display:block; width:18px; height:2px;
  background:currentColor; border-radius:2px; position:relative; }
.wts-burger span::before { top:-6px; } .wts-burger span::after { top:4px; }

/* The phone menu */
.wts-sheet { display:none; position:fixed; inset:0; z-index:200; background:var(--paper); background-image:var(--grad);
  padding:22px 20px; flex-direction:column; gap:4px; }
.wts-sheet.open { display:flex; }
.wts-sheet__row { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.wts-sheet > a:not(.wts-btn) { font:600 26px/1.7 "Public Sans", "Helvetica Neue", Arial, sans-serif; color:var(--ink); text-decoration:none; }
.wts-sheet > a.wts-btn { margin-top:20px; align-self:stretch; }
.wts-sheet__close { width:44px; height:44px; border-radius:14px; border:1px solid var(--rule); background:var(--panel);
  color:var(--ink); font-size:26px; line-height:1; cursor:pointer; }
.wts-no-scroll { overflow:hidden; }

@media (max-width:880px) {
  .wts-nav__links, .wts-tools .wts-btn { display:none; }
  .wts-burger { display:grid; }
  .wts-nav { padding:12px 20px; }
  .wts-tools { gap:8px; }
}
@media (max-width:600px) { .wts-brand img { height:24px; } }
@media (max-width:400px) { .wts-brand img { height:22px; } }   /* leaves room for the toggle and the menu on a 375px phone */
@media (prefers-reduced-motion:reduce) {
  .wts-btn:hover, .wts-toggle:hover { transform:none; }
}