/*
 * Zen base — shared by every page that uses the zen design.
 *
 * Ink on paper, hairline rules and one seal-red accent: colour and type
 * tokens (light and dark), base elements, the site header and menus, quiet
 * controls, segmented tabs, modals, notices, the footer and remaps for the
 * Tailwind colour utilities that scripts put in generated markup.
 *
 * Load after /css/tailwind.css and before the page's own stylesheet
 * (zen.css for the analyzer). Pages opt in with <body class="zen">.
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                            */
/* ------------------------------------------------------------------ */

:root {
  --paper: #f3f2ee;
  --paper-sunk: #ebeae4;
  --surface: #f9f8f5;
  --ink: #1b1b19;
  --text-2: #4a4843;
  --stone: #6a6861;
  --text-dim: #605e58;    /* quietened text: AA on paper and its washes and tints (--stone is not, on those) */
  --stone-soft: #8a867d;  /* 3:1 on paper: lines and marks, not text */
  --hair: #d9d7d0;
  --hair-soft: #e6e4de;
  --seal: #b7372b;
  --seal-wash: rgba(183, 55, 43, 0.1);
  --wash: rgba(27, 27, 25, 0.055);
  --focus: #1b1b19;
  --scrim: rgba(21, 21, 20, 0.32);
  --shadow-pop: 0 12px 32px rgba(27, 27, 25, 0.1), 0 1px 2px rgba(27, 27, 25, 0.08);

  /* Highlight layers: traditional colours, darker = more attention */
  --pos-noun: #3b5a86;      /* 藍 indigo */
  --pos-verb: #9d2933;      /* 臙脂 enji */
  --pos-adj: #b7801a;       /* 山吹 yamabuki */
  --pos-adv: #4e7a4a;       /* 松葉 pine */
  --pos-aux: #7a6a9a;       /* 藤 wisteria */
  --pos-conj: #2e7d7a;      /* 青緑 */
  --pos-particle: #a19d93;  /* 鼠 grey, dotted */
  --jlpt-n5: #d2cec2;
  --jlpt-n4: #c08a1e;
  --jlpt-n3: #b7372b;
  --jlpt-n2: #7a3e6e;
  --jlpt-n1: #1b1b19;
  --grammar: #3b5a86;
  --verb-group: #9a968c;

  --font-ui: 'Zen Kaku Gothic New', system-ui, -apple-system, 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', sans-serif;
  --font-jp: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  --read-size: 32px;
  --read-size-vertical: 30px;
  --details-width: 320px;

  color-scheme: light;
}

html.dark {
  --paper: #151514;
  --paper-sunk: #1e1e1c;
  --surface: #1c1c1a;
  --ink: #e8e6e0;
  --text-2: #c2bfb6;
  --stone: #a19e95;
  --text-dim: #a19e95;
  --stone-soft: #6f6c65;
  --hair: #34322e;
  --hair-soft: #292825;
  --seal: #db6450;
  --seal-wash: rgba(219, 100, 80, 0.16);
  --wash: rgba(232, 230, 224, 0.07);
  --focus: #e8e6e0;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.5);

  --pos-noun: #85a2cc;
  --pos-verb: #d9727c;
  --pos-adj: #d9a94a;
  --pos-adv: #8bb484;
  --pos-aux: #aa99cc;
  --pos-conj: #62b6b1;
  --pos-particle: #6f6c65;
  --jlpt-n5: #4a4843;
  --jlpt-n4: #d9a94a;
  --jlpt-n3: #db6450;
  --jlpt-n2: #bb7fab;
  --jlpt-n1: #e8e6e0;
  --grammar: #85a2cc;
  --verb-group: #6f6c65;

  color-scheme: dark;
}

/* ------------------------------------------------------------------ */
/* 2. Base                                                              */
/* ------------------------------------------------------------------ */

/* Preflight paints every border light grey; use the hairline instead.
   :where() keeps this at zero specificity so utilities still win. */
:where(body.zen) *,
:where(body.zen) ::before,
:where(body.zen) ::after {
  border-color: var(--hair);
}

body.zen {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.zen a { color: inherit; }
.zen ::selection { background: var(--seal-wash); }

.zen :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Hidden always wins, whatever else sets display */
.zen .hidden,
.zen [hidden] { display: none !important; }

.zen input[type='text'],
.zen input[type='number'],
.zen input[type='search'],
.zen input[type='email'],
.zen input[type='password'],
.zen select,
.zen textarea {
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 2px;
  font: inherit;
}

.zen input[type='checkbox'],
.zen input[type='radio'] { accent-color: var(--ink); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper) !important;
  text-decoration: none;
  font-size: 13px;
}
.skip-link:focus { top: 12px; }

.ja { font-family: var(--font-jp); }

/* ------------------------------------------------------------------ */
/* 3. Page and header                                                   */
/* ------------------------------------------------------------------ */

.page {
  max-width: 1360px;
  margin: 0 auto;
  padding: 28px clamp(16px, 5vw, 80px) 72px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  min-height: 56px;
  margin-bottom: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
}

.seal {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--seal);
  color: var(--paper);
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.brand-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.32em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px 32px;
  flex-wrap: wrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links .nav-link {
  margin: 0;
  padding: 12px 0 4px;
  border-bottom: 1px solid transparent;
  color: var(--stone);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.nav-links .nav-link:hover { color: var(--ink); }
.nav-links .nav-link[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Account menu and other pop-up menus */
.menu-root { position: relative; }

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--stone);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.menu-button:hover,
.menu-button[aria-expanded='true'] { color: var(--ink); }
.menu-button .avatar { display: none; }

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 50;
  min-width: 232px;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-pop);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.menu-section { padding: 6px 0; }
.menu-section + .menu-section { border-top: 1px solid var(--hair-soft); }

.menu-label {
  padding: 6px 16px 2px;
  color: var(--stone);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover { background: var(--wash); }
/* A light wash alone is not enough to see where keyboard focus is */
.menu-item:focus-visible { background: var(--wash); outline: 2px solid var(--focus); outline-offset: -2px; }
.menu-item[aria-pressed='true']::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: currentColor;
}

.menu-sep { height: 1px; margin: 6px 0; background: var(--hair-soft); }

#memberBadge { margin: 4px 16px; }

/* The theme toggle is a menu item; a dot marks dark mode on (aria-pressed) */

#languageSelectorSlot { padding: 2px 8px 6px; }
/* The compact language selector hides the current language, leaving a bare
   chevron under LANGUAGE; show it, lined up with the menu items */
.zen #languageSelectorSlot .menu-button { padding: 6px 8px; color: var(--ink); }
.zen #languageSelectorSlot .menu-button .language-name { display: inline; }

/* ------------------------------------------------------------------ */
/* 4. Quiet controls                                                    */
/* ------------------------------------------------------------------ */

.z-link,
.z-seg-btn,
.z-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--stone);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.z-link:hover,
.z-seg-btn:hover,
.z-toggle:hover { color: var(--ink); }

.z-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.z-seg-btn[aria-pressed='true'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.z-seg {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 18px;
}

.z-seg-label {
  color: var(--stone);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.z-seg-ja {
  font-family: var(--font-jp);
  font-size: 14px;
}
/* The Japanese UI already says 縦書き / 横書き */
html[lang|='ja'] .z-seg-ja { display: none; }

.z-toggle::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
.z-toggle[aria-pressed='true'] { color: var(--ink); }
.z-toggle[aria-pressed='true']::before { background: currentColor; }
.z-toggle.translating { color: var(--ink); }
.z-toggle.translating::before { animation: zen-breathe 1.2s ease-in-out infinite; background: currentColor; }

.z-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.z-icon-btn:hover,
.z-icon-btn[aria-expanded='true'] { background: var(--wash); }
.z-icon-btn svg { width: 18px; height: 18px; }

.z-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.z-btn:hover { background: var(--ink); color: var(--paper); }

/* Section labels: a Japanese word and a small uppercase English one (本文 YOUR TEXT) */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
}
.section-label .ja {
  font-size: 14px;
  font-weight: 600;
}
.section-label .en {
  color: var(--stone);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* A Japanese interface already reads the Japanese word; its translation would repeat it */
html[lang|='ja'] .section-label .en { display: none; }

/* Pop-over used by the furigana style picker */
.popover-root { position: relative; }
.popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 168px;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-pop);
}
.popover .menu-item { font-size: 13px; }

@keyframes zen-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ------------------------------------------------------------------ */
/* 10. Segmented tabs (import modal, POS depth, export)                  */
/* ------------------------------------------------------------------ */

.segmented-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  border-bottom: 1px solid var(--hair);
}
.segmented-tab {
  margin-bottom: -1px;
  padding: 8px 0 5px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--stone);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}
.segmented-tab:hover { color: var(--ink); }
.segmented-tab.active,
.segmented-tab[aria-selected='true'],
.segmented-tab[aria-checked='true'] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* 11. Modals                                                           */
/* ------------------------------------------------------------------ */

.export-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
}
.export-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.export-modal-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 28px 32px 24px;
  background: var(--surface);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
}
.export-modal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.export-modal-header h2 {
  margin: 0;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
}
.export-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--stone);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.export-close:hover { color: var(--ink); background: var(--wash); }

.export-step-container { font-size: 14px; }
.export-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}

.export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.export-btn:hover { border-color: var(--ink); }
.export-btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.export-btn.primary:hover { opacity: 0.88; }
.export-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.export-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.export-table th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ink);
  color: var(--stone);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: start;
  text-transform: uppercase;
}
.export-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--hair-soft);
}
.export-warning { color: var(--seal); font-size: 13px; }
.editable:focus { outline: 1px solid var(--ink); }

.kbd,
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border: 1px solid var(--hair);
  border-bottom-width: 2px;
  border-radius: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  text-align: center;
}

.virt-row { border-bottom: 1px solid var(--hair-soft); }

/* Toasts and the translation context menu */
.translate-context-menu {
  background: var(--surface) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-pop) !important;
}

/* AI model notices (styles injected by ai/ai-model-service.js) */
.zen .ai-model-notification {
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-inline-start: 2px solid var(--seal);
  border-radius: 0;
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
}
.zen .ai-model-notification-icon { display: none; }
.zen .ai-model-notification-close { color: var(--stone); }

/* Feedback dialog (built by core/feedback.js on the shared modal) */
.feedback-panel { width: min(560px, 100%); font-size: 14px; }
.fb-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.fb-types legend { float: left; width: 100%; margin-bottom: 4px; }
.fb-radio,
.fb-check {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  cursor: pointer;
}
.fb-fields { display: grid; gap: 12px; }
.fb-field { display: grid; gap: 4px; }
.fb-label { color: var(--stone); font-size: 12px; letter-spacing: 0.04em; }
.fb-field input,
.fb-field select,
.fb-field textarea { width: 100%; padding: 8px 10px; background: var(--paper); }
.fb-checks { display: grid; gap: 10px; margin-top: 16px; }
.fb-check { font-size: 13px; }
.fb-hint { display: block; color: var(--text-2); font-size: 12px; }
.fb-note { margin: 16px 0 0; color: var(--text-2); font-size: 12px; }
.fb-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fb-status { min-height: 1.4em; margin: 10px 0 0; color: var(--text-2); font-size: 13px; }
.fb-status.is-error { color: var(--seal); }

/* Toasts (core/toast.js), on every page */
.jga-toast-host {
  position: fixed;
  inset-inline: 0;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 70;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 16px;
  pointer-events: none;
}
.jga-toast {
  max-width: min(520px, 100%);
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.jga-toast.is-visible {
  opacity: 1;
  transform: none;
}

/* Sign-in dialog (built by auth/sign-in-dialog.js) */
.signin-dialog {
  width: min(380px, calc(100vw - 32px));
  padding: 26px 28px 22px;
  background: var(--surface);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
}
.signin-dialog::backdrop { background: var(--scrim); }
.signin-intro { margin: 0 0 18px; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.signin-providers,
.signin-form { display: grid; gap: 8px; }
.signin-form input { min-height: 38px; padding: 0 12px; }
.signin-or {
  margin: 16px 0;
  color: var(--stone);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.signin-actions { display: flex; gap: 8px; }
.signin-actions .export-btn { flex: 1; }
.signin-form .z-link { justify-self: start; font-size: 13px; }
.signin-status { min-height: 1.4em; margin: 12px 0 0; color: var(--text-2); font-size: 13px; }
.signin-status.is-error { color: var(--seal); }

/* Footer (built by core/footer.js) */
.zen #appFooter {
  margin: 0;
  padding: 28px 0 40px;
  border-top: 1px solid var(--hair);
  color: var(--stone);
  font-size: 12px;
  letter-spacing: 0.03em;
}
.zen .app-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 80px);
}
.zen .app-footer-brand { display: flex; align-items: baseline; gap: 8px; }
.zen .app-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.zen .app-footer-credit { flex-basis: 100%; margin: 0; font-size: 11px; }
.zen .app-footer-copy { flex-basis: 100%; }
.zen #appFooter a { color: var(--stone); text-decoration: none; }
.zen #appFooter a:hover { color: var(--ink); }
.zen #appFooter a[href='/'] {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.24em;
}

/* ------------------------------------------------------------------ */
/* 12. Tailwind colour utilities used by generated markup               */
/* ------------------------------------------------------------------ */

.zen .bg-white,
.zen .bg-white\/70,
.zen .bg-white\/80,
.zen .bg-white\/90 { background-color: var(--surface); }
.zen .bg-gray-50,
.zen .bg-gray-100 { background-color: var(--paper-sunk); }
.zen .text-gray-900,
.zen .text-gray-800 { color: var(--ink); }
.zen .text-gray-700,
.zen .text-gray-600 { color: var(--text-2); }
.zen .text-gray-500,
.zen .text-gray-400 { color: var(--stone); }
.zen .border-gray-100,
.zen .border-gray-200,
.zen .border-gray-300 { border-color: var(--hair); }
.zen .text-indigo-500,
.zen .text-indigo-600,
.zen .text-indigo-700 { color: var(--ink); }
.zen .bg-indigo-500,
.zen .bg-indigo-600 { background-color: var(--ink); color: var(--paper); }
.zen .bg-indigo-100 { background-color: var(--wash); }
.zen .border-indigo-600 { border-color: var(--ink); }
.zen .text-pink-700 { color: var(--grammar); }
.zen .text-red-500,
.zen .text-red-600,
.zen .text-red-700,
.zen .text-rose-600 { color: var(--seal); }
.zen .bg-red-50 { background-color: var(--seal-wash); }
.zen .border-red-200 { border-color: var(--seal); }
.zen .text-green-600,
.zen .text-green-700,
.zen .text-emerald-600 { color: var(--pos-adv); }
.zen .bg-green-600 { background-color: var(--pos-adv); }
.zen .rounded-lg,
.zen .rounded-xl,
.zen .rounded-2xl { border-radius: 2px; }
.zen .shadow-lg,
.zen .shadow-xl { box-shadow: var(--shadow-pop); }

/* ------------------------------------------------------------------ */
/* Small screens and touch                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .page { padding-top: 20px; }
  .site-header { margin-bottom: 24px; }
}

@media (max-width: 560px) {
  .nav-links { gap: 20px; }
  .z-seg { gap: 0 14px; }
  .export-modal-panel { padding: 22px 18px 18px; }
}

@media (pointer: coarse) {
  .z-link,
  .z-seg-btn,
  .z-toggle,
  .nav-link,
  .menu-button { min-height: 44px; }
  .nav-links .nav-link,
  .menu-button { display: inline-flex; align-items: center; }
  .z-icon-btn { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .zen *,
  .zen *::before,
  .zen *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header { display: none !important; }
}