@import "category-colors.css";

:root{
  --vvh:100dvh;
  --app-safe-top:calc(env(safe-area-inset-top, 0px) + 12px);
  --app-safe-top-dense:calc(env(safe-area-inset-top, 0px) + 6px);
  --app-safe-bottom:max(12px, env(safe-area-inset-bottom, 0px));
  --paper:#f6f4ee;
  --ink:#121212;
  --muted:#6a6a6a;
  --line:#d8d2c6;
  --soft:#efebe2;
  --panel:#fffdfa;

  --success:#4a8f5a;

  /* Category surfaces — derived from category-colors.css (slightly higher mix so chroma reads on pills) */
  --color-filler-surface:color-mix(in srgb, var(--color-filler) 30%, var(--panel));
  --color-repetition-surface:color-mix(in srgb, var(--color-repetition) 30%, var(--panel));
  --color-openings-surface:color-mix(in srgb, var(--color-openings) 30%, var(--panel));
  --color-challenge-surface:color-mix(in srgb, var(--color-challenge) 32%, var(--panel));

  /* Motion — calm, ease-out, transform + opacity first */
  --motion-duration-fast:150ms;
  --motion-duration-base:180ms;
  --motion-duration-panel:200ms;
  --motion-ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --motion-shift-subtle:6px;
  --motion-shift-tight:3px;
  --motion-duration-landing:210ms;
  --motion-landing-scale:1.022;
  --motion-landing-lift:5px;

  /* Writing surface chamfer (polygon fallback; live contour uses JS clip-path path() + SVG stroke) */
  --surface-chamfer:clamp(7px, 1.35vw, 13px);

  /* Chamfered shell: soft edge + depth (outer shadow clipped with shape in supporting browsers) */
  --editor-shell-stroke:rgba(0, 0, 0, 0.16);
  --editor-shell-outer-1:0 1px 0 rgba(0, 0, 0, 0.04);
  --editor-shell-outer-2:0 6px 18px rgba(0, 0, 0, 0.06);

  /* In-editor firstSessionEntry: restrained central band (~40–55% of shell width, capped in rem) */
  --editor-firstSessionEntry-overlay-width:min(52%, 25rem);
  --meta-gap:1px;

  /* Review Runs rail / drawer: one top inset under the write deck + matched heading row height */
  --review-runs-rail-heading-inset:15px;
  --review-runs-rail-head-min-height:40px;
  --review-runs-rail-sticky-top:14px;
  /* Desktop rail only: visible breathing room above the viewport bottom (~1–2 finger widths), plus home indicator. */
  --review-runs-rail-desktop-bottom-buffer:clamp(40px, 6vmin, 88px);
  /* Sticky top offset + safe area + buffer — subtract this whole band from 100* viewport height caps. */
  --review-runs-rail-desktop-viewport-floor:calc(
    var(--review-runs-rail-sticky-top) + env(safe-area-inset-bottom, 0px) + var(--review-runs-rail-desktop-bottom-buffer)
  );

  /* Horizontal text inset for `.editor-input` / `.highlight-layer` (overridden on `body` in narrow/focus queries). */
  --wayword-editor-pad-inline:28px;
  --wayword-editor-pad-block:20px;

  /* Quiet infrastructural tool layer (account, focus toggle, reroll, gear). */
  --tool-color:color-mix(in srgb, var(--ink) 14%, var(--muted));
  --tool-opacity-rest:0.4;
  --tool-opacity-hover:0.58;
  --tool-opacity-active:0.5;
  --logo-opacity:1;
  --logo-filter:brightness(0) saturate(100%);
}

html[data-theme="dark"]{
  --paper:#131313;
  --ink:#ece7dc;
  --muted:#a9a39a;
  --line:#38342e;
  --soft:#1a1a1a;
  --panel:#171717;

  --editor-shell-stroke:rgba(255, 255, 255, 0.11);
  --editor-shell-outer-1:0 1px 0 rgba(0, 0, 0, 0.18);
  --editor-shell-outer-2:0 7px 20px rgba(0, 0, 0, 0.24);

  /* Accents inherit from :root (category-colors.css); surfaces re-derived against dark panel */
  --color-filler-surface:color-mix(in srgb, var(--color-filler) 44%, var(--panel));
  --color-repetition-surface:color-mix(in srgb, var(--color-repetition) 44%, var(--panel));
  --color-openings-surface:color-mix(in srgb, var(--color-openings) 44%, var(--panel));
  --color-challenge-surface:color-mix(in srgb, var(--color-challenge) 46%, var(--panel));
  --logo-opacity:1;
  --logo-filter:brightness(0) saturate(100%) invert(91%) sepia(7%) saturate(193%) hue-rotate(356deg) brightness(102%) contrast(94%);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,input,textarea{
  font:inherit;
}

.hidden{display:none !important}

.app-shell{
  min-height:100dvh;
  min-height:100vh;
  min-height:var(--vvh, 100dvh);
  position:relative;
}

.app{
  max-width:1120px;
  margin:0 auto;
  padding:20px 16px 28px;
  position:relative;
}

/* landing page — fixed layer over app; app paints underneath when .app-shell--landing */

.landing-view{
  position:fixed;
  inset:0;
  z-index:2;
  min-height:var(--vvh, 100vh);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background:var(--paper);
  transition:background-color var(--motion-duration-landing) var(--motion-ease-out);
  overflow-x:hidden;
  overflow-y:hidden;
}

.app-shell--landing #appView.app{
  position:fixed;
  inset:0;
  width:100%;
  max-width:none;
  margin:0;
  min-height:var(--vvh, 100vh);
  height:var(--vvh, 100vh);
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(4px);
}

.app-shell--landing-out #appView.app{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity var(--motion-duration-landing) var(--motion-ease-out),
    transform var(--motion-duration-landing) var(--motion-ease-out),
    visibility 0s linear 0s;
}

.app-shell--landing-out .landing-gate{
  transform:scale(var(--motion-landing-scale)) translateY(calc(-1 * var(--motion-landing-lift)));
  opacity:0;
  filter:blur(1.5px);
  transition:transform var(--motion-duration-landing) var(--motion-ease-out),
    opacity var(--motion-duration-landing) var(--motion-ease-out),
    filter var(--motion-duration-landing) var(--motion-ease-out);
  transform-origin:50% 45%;
}

.app-shell--landing-out .landing-view{
  background-color:transparent;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .app-shell--landing-out #appView.app{
    transform:none;
    transition-duration:0.01ms !important;
  }

  .app-shell--landing #appView.app{
    transform:none;
  }

  .app-shell--landing-out .landing-gate{
    transform:none;
    filter:none;
    transition-duration:0.01ms !important;
  }

  .app-shell--landing-out .landing-view{
    transition-duration:0.01ms !important;
  }
}

/* Keep centered app width during landing->app transition on tablet/desktop so
   the shell does not expand full-bleed first and then snap inward. */
@media (min-width:721px){
  .app-shell--landing #appView.app{
    width:auto;
    max-width:1120px;
    margin:0 auto;
  }
}

@media (min-width:981px){
  .app-shell--landing #appView.app{
    max-width:1320px;
  }
}

.landing-gate{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
}

.landing-wordmark{
  margin:0;
  font-size:clamp(54px,10vw,112px);
  font-weight:600;
  line-height:0.95;
  letter-spacing:-0.03em;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  width:4.756em;
  height:0.95em;
}

.landing-wordmark .wm{
  display:inline-block;
}

.wayword-logo{
  display:block;
  height:100%;
  width:auto;
  flex-shrink:0;
  opacity:var(--logo-opacity);
  filter:var(--logo-filter);
}

.wayword-logo--landing{
  width:4.38em;
  margin:auto;
  transform:translateX(-0.02em) scale(1.08);
}

.landing-enter-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  min-width:0;
  font-size:16px;
}

.landing-enter-arrow{
  font-size:18px;
  line-height:1;
}

.landing-copy{
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  text-align:center;
}

.landing-copy-block{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}

.landing-copy-block p{
  margin:0;
  font-size:17px;
  line-height:1.5;
  color:var(--muted);
}

/* zen garden */

.zen-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.34);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9998;
}

.zen-shell{
  width:min(1180px,100%);
  height:min(760px,92vh);
  background:#c8c0b0;
  border:3px solid #2f2b26;
  box-shadow:0 22px 56px rgba(0,0,0,0.28);
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
}

.zen-topbar{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:10px;
  min-height:34px;
  padding:0 10px;
  background:#c0b8a8;
  border-bottom:2px solid #3a3a3a;
}

.zen-title-mark{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.zen-title-mark span{
  display:block;
  width:16px;
  height:2px;
  background:#3a3a3a;
}

.zen-brand{
  text-align:center;
  font-family:"Courier New",monospace;
  font-size:12px;
  letter-spacing:3px;
  font-weight:700;
  color:#2f2b26;
}

.zen-close{
  width:20px;
  height:18px;
  padding:0;
  justify-self:end;
  border:1.5px solid #3a3a3a;
  background:#c4bcac;
  color:#2f2b26;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
}

.zen-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 208px;
  min-height:0;
}

.zen-board-wrap{
  position:relative;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#c4bcac;
  padding:14px;
  border-right:2px solid #3a3a3a;
}

.zen-frame{
  position:relative;
}

.zen-frame canvas{
  display:block;
  position:absolute;
  top:0;
  left:0;
}

#zenBaseCanvas{
  position:relative;
}

.zen-sidebar{
  width:208px;
  background:#c0b8a8;
  display:flex;
  flex-direction:column;
  font-family:"Courier New",monospace;
  font-size:11px;
  overflow:auto;
}

.zen-panel{
  padding:8px 9px;
  border-bottom:1px solid #8a8276;
}

.zen-panel-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:6px;
  padding-bottom:4px;
  border-bottom:1px solid #8a8276;
  color:#2f2b26;
}

.zen-tool-stack{
  display:flex;
  flex-direction:column;
}

.zen-tool-btn,
.zen-action-btn{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  padding:6px 8px;
  background:#c4bcac;
  border:1px solid #8a8276;
  border-bottom:none;
  color:#2f2b26;
  font-family:"Courier New",monospace;
  font-size:11px;
  letter-spacing:1px;
  text-align:left;
  border-radius:0;
}

.zen-tool-btn:last-child,
.zen-action-btn:last-child{
  border-bottom:1px solid #8a8276;
}

.zen-tool-btn.active{
  background:#2e2e2e;
  color:#ddd8c8;
  border-color:#222;
}

.zen-tool-label{
  text-transform:uppercase;
}

.zen-tool-icon{
  display:block;
  position:relative;
  width:28px;
  height:28px;
  flex:0 0 28px;
}

.zen-tool-icon-rake::before,
.zen-tool-icon-rake::after{
  content:"";
  position:absolute;
  background:currentColor;
}

.zen-tool-icon-rake::before{
  width:2px;
  height:16px;
  left:13px;
  top:2px;
}

.zen-tool-icon-rake::after{
  width:18px;
  height:2px;
  left:5px;
  top:17px;
  box-shadow:
    -8px 4px 0 0 currentColor,
    -4px 4px 0 0 currentColor,
    0 4px 0 0 currentColor,
    4px 4px 0 0 currentColor,
    8px 4px 0 0 currentColor;
}

.zen-tool-icon-rock{
  background:
    linear-gradient(currentColor,currentColor) 7px 18px/14px 3px no-repeat,
    linear-gradient(currentColor,currentColor) 5px 13px/18px 5px no-repeat,
    linear-gradient(currentColor,currentColor) 8px 7px/12px 6px no-repeat;
}

.zen-tool-icon-tallrock{
  background:
    linear-gradient(currentColor,currentColor) 9px 19px/10px 3px no-repeat,
    linear-gradient(currentColor,currentColor) 10px 10px/8px 9px no-repeat,
    linear-gradient(currentColor,currentColor) 12px 4px/4px 6px no-repeat;
}

.zen-tool-icon-bonsai{
  background:
    linear-gradient(currentColor,currentColor) 12px 11px/4px 11px no-repeat,
    linear-gradient(currentColor,currentColor) 6px 7px/16px 4px no-repeat,
    linear-gradient(currentColor,currentColor) 4px 13px/20px 4px no-repeat,
    linear-gradient(currentColor,currentColor) 8px 22px/12px 3px no-repeat;
}

.zen-tool-icon-plant{
  background:
    linear-gradient(currentColor,currentColor) 13px 18px/2px 8px no-repeat,
    linear-gradient(currentColor,currentColor) 9px 13px/2px 10px no-repeat,
    linear-gradient(currentColor,currentColor) 17px 13px/2px 10px no-repeat,
    linear-gradient(currentColor,currentColor) 6px 10px/2px 9px no-repeat,
    linear-gradient(currentColor,currentColor) 20px 10px/2px 9px no-repeat;
}

.zen-tool-icon-erase::before,
.zen-tool-icon-erase::after{
  content:"";
  position:absolute;
  left:4px;
  top:13px;
  width:20px;
  height:2px;
  background:currentColor;
}

.zen-tool-icon-erase::before{transform:rotate(45deg)}
.zen-tool-icon-erase::after{transform:rotate(-45deg)}

.zen-status-stack{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.zen-status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#2f2b26;
}

.zen-calm-bar{
  width:100%;
  height:8px;
  border:1px solid #8a8276;
  background:#a09880;
  overflow:hidden;
}

.zen-calm-fill{
  width:0%;
  height:100%;
  background:#2f2b26;
  transition:width 0.4s;
}

.zen-status{
  font-size:10px;
  line-height:1.4;
  color:#2f2b26;
}

.zen-bottombar{
  min-height:84px;
  border-top:2px solid #3a3a3a;
  background:#c8c0b0;
  display:flex;
  align-items:center;
  padding:6px 10px;
}

.zen-bottom-cluster{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0 12px;
  border-right:1px solid #8a8276;
}

.zen-bottom-cluster:first-child{
  padding-left:0;
}

.zen-bottom-label{
  font-family:"Courier New",monospace;
  font-size:9px;
  letter-spacing:2px;
  font-weight:700;
  text-align:center;
  color:#2f2b26;
}

.zen-view-row{
  display:flex;
  gap:4px;
}

.zen-mini-btn{
  width:42px;
  height:38px;
  border:1.5px solid #8a8276;
  background:#c4bcac;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  color:#2f2b26;
}

.zen-mini-btn.active{
  background:#2e2e2e;
  color:#ddd8c8;
  border-color:#222;
}

.zen-mini-icon{
  position:relative;
  display:block;
  width:18px;
  height:18px;
}

.zen-mini-grid{
  background:
    linear-gradient(currentColor,currentColor) 0 0/18px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 8px/18px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 16px/18px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/1.5px 18px no-repeat,
    linear-gradient(currentColor,currentColor) 8px 0/1.5px 18px no-repeat,
    linear-gradient(currentColor,currentColor) 16px 0/1.5px 18px no-repeat;
}

.zen-mini-clean{
  border:1.5px solid currentColor;
}

.zen-mini-undo::before,
.zen-mini-undo::after{
  content:"";
  position:absolute;
  background:currentColor;
}

.zen-mini-undo::before{
  width:12px;
  height:2px;
  left:4px;
  top:8px;
}

.zen-mini-undo::after{
  width:6px;
  height:6px;
  left:2px;
  top:6px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  background:transparent;
  transform:rotate(45deg);
}

.zen-minimap{
  margin-left:auto;
  border:2px solid #3a3a3a;
  background:#d0c8b4;
}

/* header */

.header{
  --header-divider-pad:12px;
  --right-rail-offset:0px;
  /* Brand lock: keep wordmark/subhead spacing and divider distance proportional across viewport sizes. */
  --brand-stack-gap:clamp(4px, 0.35vw, 7px);
  --brand-to-divider-gap:clamp(10px, 0.8vw, 14px);
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "theme theme"
    "context context";
  gap:12px 16px;
  border-bottom:1px solid var(--ink);
  padding-bottom:var(--brand-to-divider-gap);
  margin-bottom:17px;
  align-items:start;
}

.write-field-context{
  grid-area:context;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"brand actions";
  gap:12px 16px;
  align-items:start;
  min-width:0;
}

.header-theme{
  grid-area:theme;
  justify-self:end;
  align-self:start;
}

.header-brand{
  grid-area:brand;
  min-width:0;
  align-self:start;
}

.brand-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--brand-stack-gap);
  min-width:0;
}

.header-actions{
  grid-area:actions;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:10px;
  align-self:start;
  flex-wrap:nowrap;
}

.account-corner-btn{
  position:absolute;
  top:12px;
  right:var(--right-rail-offset);
  width:24px;
  height:24px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--tool-color);
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  cursor:pointer;
  z-index:12;
  opacity:var(--tool-opacity-rest);
  transition:opacity 0.15s ease, color 0.15s ease;
}

.account-corner-btn__glyph{
  position:relative;
  width:15px;
  height:15px;
  display:block;
}

.account-corner-btn__glyph::before,
.account-corner-btn__glyph::after{
  content:"";
  position:absolute;
  box-sizing:border-box;
}

.account-corner-btn__glyph::before{
  left:50%;
  top:1px;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  border:1.15px solid currentColor;
  border-radius:999px;
  background:transparent;
}

@media (hover:hover) and (pointer:fine){
  .account-corner-btn:hover,
  .account-corner-btn:focus-visible{
    opacity:var(--tool-opacity-hover);
  }
}

.account-corner-btn__glyph::after{
  left:50%;
  top:7px;
  transform:translateX(-50%);
  width:11px;
  height:7px;
  border:1.15px solid currentColor;
  border-radius:9px 9px 7px 7px;
  background:transparent;
}

.right-control-spine{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:40px;
}

.control-label,
.section-title,
.mini-label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.style-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-end;
  cursor:pointer;
  pointer-events:auto;
  white-space:nowrap;
  /* Sit on the header rule in normal flow (no absolute overrides). */
  margin:0 0 calc(-1 * var(--header-divider-pad) - 1px + 1px) 0;
  padding:1px 0 4px;
  min-width:0;
  max-width:100%;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 68%, var(--muted));
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  z-index:2;
  opacity:0.78;
  margin-right:var(--right-rail-offset);
}

.style-tab::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-8px;
  height:2px;
  background:transparent;
  opacity:0;
  transition:opacity 0.14s ease, background-color 0.14s ease;
}

@media (hover:hover) and (pointer:fine){
  .style-tab:hover::before,
  .style-tab:focus-visible::before{
    background:color-mix(in srgb, var(--ink) 42%, transparent);
    opacity:1;
  }
}

.style-tab[aria-expanded="true"]{
  color:var(--ink);
  opacity:1;
}

.style-tab[aria-expanded="true"]::before{
  background:var(--ink);
  opacity:1;
}

/* Fast-moving utility controls: avoid shadow/filter feedback that can ghost on mobile. */
.style-tab,
.style-tab:hover,
.style-tab:active,
.style-tab:focus,
.style-tab:focus-visible,
.style-tab.is-active,
.field-expand-toggle,
.field-expand-toggle:hover,
.field-expand-toggle:active,
.field-expand-toggle:focus,
.field-expand-toggle:focus-visible,
.prompt-reroll-btn,
.prompt-reroll-btn:hover,
.prompt-reroll-btn:active,
.prompt-reroll-btn:focus,
.prompt-reroll-btn:focus-visible,
.recent-writing-trigger,
.recent-writing-trigger:hover,
.recent-writing-trigger:active,
.recent-writing-trigger:focus,
.recent-writing-trigger:focus-visible,
.recent-drawer-close,
.recent-drawer-close:hover,
.recent-drawer-close:active,
.recent-drawer-close:focus,
.recent-drawer-close:focus-visible,
.recent-rail-expanded-close,
.recent-rail-expanded-close:hover,
.recent-rail-expanded-close:active,
.recent-rail-expanded-close:focus,
.recent-rail-expanded-close:focus-visible{
  box-shadow:none !important;
  filter:none !important;
}

.account-panel.settings-modal{
  width:min(460px, calc(100vw - 32px));
  border-radius:12px;
  padding:18px;
}

.account-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.account-panel__title{
  margin:0;
  font-size:18px;
}

.account-panel__close{
  border:0;
  background:transparent;
  color:var(--ink);
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  padding:0;
  cursor:pointer;
}

.account-panel__summary,
.account-panel__fallback{
  margin:0 0 8px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.account-panel__form{
  display:grid;
  gap:6px;
  margin:12px 0 8px;
}

.account-panel__form label{
  font-size:13px;
  color:var(--muted);
}

.account-panel__form-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.account-panel__form-row input{
  width:100%;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:8px;
  padding:8px 10px;
}

.account-panel__form-row button,
.account-panel__actions button,
.account-panel__foot button{
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:8px;
  padding:8px 10px;
}

.account-panel__message{
  margin:8px 0 0;
  font-size:13px;
  color:var(--muted);
}

.account-panel__actions{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.account-panel__foot{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}

.style-tab.hidden{
  display:none !important;
}

.card-section-title{margin-bottom:14px}

.wordmark{
  margin:0;
  font-size:42px;
  font-weight:600;
  line-height:1;
  letter-spacing:-0.01em;
  white-space:nowrap;
  --lift:0;
  --complete-tilt:0deg;
  --complete-drop:0em;
  --complete-scale:1;
  transform:translateY(var(--complete-drop)) rotateX(var(--complete-tilt)) scale(var(--complete-scale));
  transform-origin:50% 60%;
  transform-style:preserve-3d;
  transition:transform 380ms cubic-bezier(0.22,1,0.36,1);
}

.wayword-logo--header{
  width:6.8072em;
  height:1.34em;
  object-position:left center;
  -webkit-mask-position:left center;
  mask-position:left center;
  transform:translateX(-17px) translateY(0);
  transform-origin:left center;
}

.wordmark .wm{
  display:inline-block;
  transform-origin:50% 65%;
}

.wordmark .wm-w1{ transform:translateY(calc(-0.03em * var(--lift))) rotate(calc(-0.2deg * var(--lift))); }
.wordmark .wm-a{  transform:translateY(calc(-0.05em * var(--lift))) rotate(calc(-0.35deg * var(--lift))); }
.wordmark .wm-y{  transform:translateY(calc(-0.08em * var(--lift))) rotate(calc(-0.55deg * var(--lift))); }
.wordmark .wm-w2{ transform:translateY(calc(-0.12em * var(--lift))) rotate(calc(-0.9deg * var(--lift))); }
.wordmark .wm-o{  transform:translateY(calc(-0.18em * var(--lift))) rotate(calc(-2.2deg * var(--lift))); }
.wordmark .wm-r{  transform:translateY(calc(-0.10em * var(--lift))) rotate(calc(0.75deg * var(--lift))); }
.wordmark .wm-d{  transform:translateY(calc(-0.06em * var(--lift))) rotate(calc(0.4deg * var(--lift))); }

.subhed{
  color:var(--ink);
  opacity:.74;
  font-size:12px;
  line-height:1.2;
}

button{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:8px 12px;
  cursor:pointer;
  border-radius:999px;
}

button.primary{
  background:var(--ink);
  color:var(--paper);
}

.write-hero{
  padding:11px 20px;
  font-weight:600;
}

#profileBtn{
  padding:11px 18px;
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  padding:0;
  overflow:hidden;
  border-radius:999px;
  width:60px;
  height:32px;
  background:transparent;
  flex:0 0 auto;
  opacity:0.78;
  border-color:var(--line);
}

.theme-half{
  width:50%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

html[data-theme="light"] .theme-sun{
  background:var(--ink);
  color:var(--paper);
}

html[data-theme="dark"] .theme-moon{
  background:var(--ink);
  color:var(--paper);
}

/* layout — single column until desktop rail breakpoint (981px; matches `isDesktopPatternsViewport()`).
   A second grid track must not appear before Review Runs lives in the rail; the parent surface
   switches to two columns only at that same threshold (see `@media (min-width:981px)`). */

.app-write-surface{
  min-width:0;
}

#writeView > .layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

.main-column{
  min-width:0;
}

.side-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

@media (max-width:980px){
  /* Rail markup stays in DOM for ≥981px; no phantom column or stacked gap below desktop rail. */
  #writeView .side-column{
    display:none;
  }

  /*
   * Safari/WebKit: first paint or landing → app can briefly retain desktop `display:grid` + `subgrid`
   * plumbing so a second column still reserves width even though rail markup is hidden. Re-assert the
   * tablet shell stack and a single explicit write column (matches post-refresh computed layout).
   */
  .app-write-surface{
    display:block;
    grid-template-columns:none;
    column-gap:normal;
    align-items:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /*
   * Desktop header uses `subgrid` + `display:contents` on `.write-field-context` so the wordmark and
   * Patterns tab align to the outer two-column rail. If those survive one frame after the parent grid
   * is torn down, WebKit can keep a narrow “phantom” track beside the writing column.
   */
  .app-write-surface > .header{
    display:grid;
    grid-column:auto;
    grid-row:auto;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "theme theme"
      "context context";
    gap:12px 16px;
    align-items:start;
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .app-write-surface > .header .write-field-context{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"brand actions";
    gap:12px 16px;
    align-items:start;
    min-width:0;
    width:100%;
    max-width:100%;
  }

  .app-write-surface > .header .write-field-context .header-brand{
    grid-area:brand;
    padding-inline-end:0;
  }

  .app-write-surface > .header .write-field-context .header-actions{
    grid-area:actions;
    align-self:stretch;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    min-height:100%;
  }

  .app-write-surface > .header .write-field-context .style-tab{
    grid-area:actions;
    justify-self:end;
    align-self:end;
    margin-inline-start:0;
  }

  #writeView{
    display:block;
    grid-column:auto;
    grid-row:auto;
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:none;
    grid-template-rows:none;
  }

  #writeView > .layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    grid-column:auto;
    gap:16px;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #writeView .main-column{
    grid-column:auto;
    max-width:none;
    width:100%;
    min-width:0;
  }
}

.card{
  border:1px solid var(--ink);
  background:var(--panel);
  padding:15px;
}

.card.compact{
  padding:13px;
}

/* prompt */

.prompt-card{
  --prompt-row-inset-y:8px;
  --prompt-control-grid-size:24px;
  --prompt-control-reroll-size:24px;
  --prompt-control-gap:1px;
  --prompt-control-stack-h:calc(var(--prompt-control-grid-size) + var(--prompt-control-reroll-size) + var(--prompt-control-gap));
  --prompt-text-size:28px;
  --prompt-text-leading:1.18;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);
  padding:var(--prompt-row-inset-y) 0 var(--prompt-row-inset-y);
  margin-bottom:8px;
  position:relative;
  min-height:calc(var(--prompt-control-stack-h) + (var(--prompt-row-inset-y) * 2));
  display:grid;
  grid-template-columns:minmax(0, 1fr) 30px;
  column-gap:7px;
  align-items:start;
}

.prompt-main{
  display:flex;
  align-items:flex-start;
  min-width:0;
  min-height:max(34px, var(--prompt-control-stack-h));
  padding-right:0;
  grid-column:1;
}

.prompt-control-spine{
  position:relative;
  top:0;
  right:auto;
  z-index:2;
  display:grid;
  grid-template-rows:var(--prompt-control-grid-size) var(--prompt-control-reroll-size);
  row-gap:var(--prompt-control-gap);
  align-items:start;
  justify-items:center;
  align-content:start;
  width:30px;
  min-width:30px;
  height:var(--prompt-control-stack-h);
  min-height:var(--prompt-control-stack-h);
  margin:0;
  grid-column:2;
  padding-top:1px;
}

.prompt-reroll-btn::after,
.right-control-spine .field-expand-toggle svg,
.right-control-spine .field-expand-toggle svg *{
  pointer-events:none;
}

.prompt-text{
  font-size:var(--prompt-text-size);
  line-height:var(--prompt-text-leading);
  margin:0;
  padding-top:1px;
}

.prompt-control-spine #fieldExpandedToggle{
  grid-row:1;
  width:var(--prompt-control-grid-size);
  height:var(--prompt-control-grid-size);
  min-width:var(--prompt-control-grid-size);
  min-height:var(--prompt-control-grid-size);
  margin:0;
  padding:0;
  align-self:start;
  justify-self:center;
  position:relative;
  z-index:4;
}

.prompt-control-spine #promptRerollBtn{
  grid-row:2;
  width:var(--prompt-control-reroll-size);
  height:var(--prompt-control-reroll-size);
  min-width:var(--prompt-control-reroll-size);
  min-height:var(--prompt-control-reroll-size);
  margin:0;
  padding:0;
  align-self:start;
  justify-self:center;
  transform:none !important;
}

.mirror-the-cut-hint{
  margin:0.4rem 0 0;
  font-size:0.78rem;
  line-height:1.35;
  color:var(--muted);
  font-style:normal;
  font-weight:400;
}
.mirror-the-cut-skip{
  display:inline;
  margin:0;
  padding:0;
  background:none;
  border:none;
  color:var(--muted);
  font:inherit;
  text-decoration:underline;
  text-underline-offset:0.12em;
  cursor:pointer;
}
.mirror-the-cut-skip:hover{
  color:var(--ink);
}

.prompt-reroll-btn{
  width:24px;
  height:24px;
  padding:0;
  margin:0;

  background:none;
  border:none;
  color:var(--tool-color);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;

  cursor:pointer;
  opacity:var(--tool-opacity-rest);
  transition:opacity 0.15s ease, color 0.15s ease, transform 0.12s ease;
  position:relative;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.prompt-reroll-btn{
  width:24px;
  height:24px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  line-height:0;
  margin-left:0;
}

/* Hover only for real pointers — touch Safari keeps :hover after tap and the badge reads as “selected.” */
@media (hover:hover) and (pointer:fine){
  .prompt-reroll-btn:hover{
    opacity:var(--tool-opacity-hover);
    color:var(--ink);
  }
}

/* Brief press read; softer than e.g. field-expand-toggle (scale 0.96 + opacity dip). */
.prompt-reroll-btn:not(:disabled):active{
  transform:scale(0.985);
  opacity:var(--tool-opacity-active);
}

@media (prefers-reduced-motion:reduce){
  .prompt-reroll-btn:active{
    transform:none;
  }
}

.prompt-reroll-btn.locked,
.prompt-reroll-btn:disabled{
  opacity:0.28;
  cursor:default;
  color:var(--muted);
}

.prompt-reroll-btn.hidden{
  display:none !important;
}

.prompt-reroll-icon{
  font-size:13px;
  line-height:1;
  display:block;
  transform:translateY(-0.2px);
}

.prompt-reroll-btn::after{
  content:attr(data-rerolls);
  position:absolute;
  top:2px;
  right:1px;
  transform:none;

  min-width:9px;
  height:9px;
  padding:0 2px;

  border-radius:999px;
  background:var(--ink);
  color:var(--paper);

  font-size:6px;
  line-height:9px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:600;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.setup-stack{
  display:none;
}

/* editor */

.editor-shell{
  position:relative;
  border:none;
  min-height:320px;
  background:var(--panel);
  overflow:hidden;
  border-radius:0;
  box-shadow:var(--editor-shell-outer-1), var(--editor-shell-outer-2);
  clip-path:polygon(
    var(--surface-chamfer) 0,
    calc(100% - var(--surface-chamfer)) 0,
    100% var(--surface-chamfer),
    100% calc(100% - var(--surface-chamfer)),
    calc(100% - var(--surface-chamfer)) 100%,
    var(--surface-chamfer) 100%,
    0 calc(100% - var(--surface-chamfer)),
    0 var(--surface-chamfer)
  );
}

/* Post-submit: quick, understated settle (closure, not reward). */
.editor-shell.editor-shell--submit-complete .editor-input,
.editor-shell.editor-shell--submit-complete .editor-dot-overlay{
  animation:wayword-editor-settle 0.12s cubic-bezier(0.25, 0.46, 0.45, 1) both;
}

.editor-shell.editor-shell--submit-complete .editor-input[contenteditable="false"]{
  cursor:text;
}

@keyframes wayword-editor-settle{
  0%{
    transform:translate3d(0, 1px, 0);
    opacity:0.99;
  }
  100%{
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@media (prefers-reduced-motion:reduce){
  .editor-shell.editor-shell--submit-complete .editor-input,
  .editor-shell.editor-shell--submit-complete .editor-dot-overlay{
    animation:wayword-editor-settle-reduced 0.1s ease-out both;
  }

  @keyframes wayword-editor-settle-reduced{
    0%{ opacity:0.99; }
    100%{ opacity:1; }
  }
}

/* True chamfer stroke (SVG polygon — matches shell clip-path; not a clipped rect border) */
.editor-shell-edge{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  shape-rendering:geometricPrecision;
}

.editor-shell-edge-path{
  stroke:var(--editor-shell-stroke);
  stroke-width:1px;
}

@media (min-resolution: 2dppx){
  .editor-shell-edge-path{
    stroke-width:0.75px;
  }
}

/* Timer gradient reads as a “wash” when firstSessionEntry is a compact island — hide while overlay is up */
.editor-shell:has(#editorOverlay:not(.hidden).editor-overlay--firstSessionEntry) .editor-time-fill{
  opacity:0;
  visibility:hidden;
  transition:none;
}

/* Post-run firstSessionEntry: gear + progress fade out via JS (.ui-hidden); avoid snapping the whole chrome strip */

.highlight-layer,
.editor-input{
  margin:0;
  padding:20px var(--wayword-editor-pad-inline) 42px var(--wayword-editor-pad-inline);
  font:18px/1.88 Georgia,"Times New Roman",serif;
  tab-size:4;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

.highlight-layer{
  position:absolute;
  inset:0;
  overflow:visible;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  z-index:1;
  color:var(--ink);
}

/* Scrollport: single overflow surface so text, highlights, and semantic dots share one scroll transform. */
.editor-input-scrollport{
  position:absolute;
  inset:0;
  z-index:3;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.editor-input-scroll-inner{
  position:relative;
  z-index:0;
  min-height:100%;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:minmax(0, auto);
}

.editor-input-scroll-inner > .editor-input,
.editor-input-scroll-inner > .highlight-layer,
.editor-input-scroll-inner > .editor-dot-overlay{
  grid-column:1;
  grid-row:1;
  width:100%;
}

.highlight-layer.hidden{
  display:none !important;
}

.highlight-layer .token-text{
  color:inherit;
}

.editor-input{
  position:relative;
  z-index:2;
  width:100%;
  min-height:100%;
  border:0;
  outline:none;
  background:transparent;
  color:var(--ink);
  caret-color:var(--ink);
  overflow:visible;
  pointer-events:auto;
  user-select:text;
  -webkit-user-select:text;
  -webkit-appearance:none;
  appearance:none;
}

.editor-input--permission-visible{
  caret-color:transparent;
}

.editor-input[contenteditable="false"]{
  cursor:default;
}

/* iOS contenteditable can emit paragraph wrappers on Return; neutralize wrapper metrics so
   empty/newline lines keep the same caret height and line box as normal text lines. */
.editor-input > div,
.editor-input > p{
  margin:0;
  padding:0;
  line-height:inherit;
  font:inherit;
}

.editor-input > div > br:only-child,
.editor-input > p > br:only-child{
  line-height:inherit;
  font:inherit;
}

/* Post-submit annotated runs use the same editor/highlight typography as live (no alternate metrics). */
/* `.editor-shell--submitted-annotated-spacing` is toggled in JS only for dot-overlay geometry (see script). */

/* Phase 2 step 5: geometry-only token dots (pointer-events none; not text, not selection). */
.editor-dot-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  overflow:visible;
  user-select:none;
  -webkit-user-select:none;
}

/* Center of the flex row sits on token anchor (translateX(-50%) on group). */
.editor-token-dot-group{
  position:absolute;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:4px;
  /* Nudge cluster toward token baseline (JS top unchanged); horizontal centering preserved. */
  transform:translateX(-50%) translateY(-2px);
  pointer-events:none;
}

.editor-token-dot-group .editor-token-dot{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  flex-shrink:0;
  min-width:6px;
  min-height:6px;
}

.editor-token-dot{
  position:absolute;
  width:6px;
  height:6px;
  margin:0;
  padding:0;
  border-radius:50%;
  transform:translateX(-50%);
  background:color-mix(in srgb, var(--muted) 50%, var(--ink));
  opacity:0.58;
  box-sizing:border-box;
}

html[data-theme="dark"] .editor-token-dot{
  background:color-mix(in srgb, var(--muted) 38%, var(--ink));
  opacity:0.52;
}

.editor-token-dot--filler{
  background:var(--color-filler);
  opacity:0.94;
}

.editor-token-dot--repetition{
  background:var(--color-repetition);
  opacity:0.94;
}

.editor-token-dot--opening{
  background:var(--color-openings);
  opacity:0.94;
}

.editor-token-dot--challenge{
  background:var(--color-challenge);
  opacity:0.94;
}

html[data-theme="dark"] .editor-token-dot--filler{
  background:color-mix(in srgb, var(--color-filler) 84%, var(--ink));
  opacity:0.96;
}

html[data-theme="dark"] .editor-token-dot--repetition{
  background:color-mix(in srgb, var(--color-repetition) 84%, var(--ink));
  opacity:0.96;
}

html[data-theme="dark"] .editor-token-dot--opening{
  background:color-mix(in srgb, var(--color-openings) 84%, var(--ink));
  opacity:0.96;
}

html[data-theme="dark"] .editor-token-dot--challenge{
  background:color-mix(in srgb, var(--color-challenge) 84%, var(--ink));
  opacity:0.96;
}

/* Phase 3 Step 2: minimal in-editor semantic picker (writeDoc-only apply; not a text layer). */
.editor-semantic-picker{
  position:absolute;
  z-index:8;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  max-width:min(100%, 280px);
  padding:5px 7px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--line) 65%, var(--ink));
  background:color-mix(in srgb, var(--panel) 94%, var(--soft));
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.12);
  pointer-events:auto;
}

.editor-semantic-picker.hidden{
  display:none !important;
}

html[data-theme="dark"] .editor-semantic-picker{
  border-color:color-mix(in srgb, var(--line) 50%, var(--ink));
  background:color-mix(in srgb, var(--panel) 92%, var(--soft));
  box-shadow:0 3px 12px rgba(0, 0, 0, 0.22);
}

.editor-semantic-picker-btn{
  margin:0;
  padding:3px 8px;
  border-radius:6px;
  border:1px solid color-mix(in srgb, var(--line) 70%, var(--soft));
  background:color-mix(in srgb, var(--panel) 88%, var(--soft));
  color:var(--ink);
  font-size:11px;
  letter-spacing:0.03em;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  touch-action:manipulation;
}

.editor-semantic-picker-btn:hover{
  border-color:color-mix(in srgb, var(--ink) 22%, var(--line));
}

.editor-semantic-picker-btn--clear{
  border-color:color-mix(in srgb, var(--muted) 55%, var(--line));
  color:var(--muted);
}

.editor-input.is-empty::before{
  content:attr(data-placeholder);
  color:var(--muted);
  opacity:0.55;
  pointer-events:none;
}

.editor-permission-phrase{
  position:absolute;
  inset-block-start:var(--wayword-editor-pad-block);
  inset-inline:var(--wayword-editor-pad-inline);
  box-sizing:border-box;
  display:block;
  max-width:calc(100% - (var(--wayword-editor-pad-inline) * 2));
  overflow:hidden;
  z-index:3;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  color:color-mix(in srgb, var(--ink) 17%, var(--muted));
  font:18px/1.88 Georgia,"Times New Roman",serif;
  font-style:italic;
  letter-spacing:0;
  opacity:1;
  transform:translateX(0);
  clip-path:inset(0 0 0 0);
  transition:
    opacity 760ms cubic-bezier(.22, .08, .18, 1),
    transform 820ms cubic-bezier(.16, .72, .18, 1),
    clip-path 820ms cubic-bezier(.16, .72, .18, 1);
}

.editor-permission-phrase,
.editor-permission-phrase *{
  pointer-events:none;
}

.editor-permission-phrase__text{
  display:inline;
}

.editor-permission-phrase--hidden{
  opacity:0;
  transform:translateX(-5px);
  clip-path:inset(0 100% 0 0);
}

html[data-theme="dark"] .editor-permission-phrase{
  color:color-mix(in srgb, var(--ink) 15%, var(--muted));
}

@media (prefers-reduced-motion: reduce){
  .editor-permission-phrase{
    transition:none;
    transform:none;
    clip-path:inset(0 0 0 0);
  }
}

.editor-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  z-index:7;
  background:rgba(0,0,0,0.10);
  border-radius:0;
  cursor:pointer;
}

.editor-overlay-card{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--ink);
  padding:12px 18px;
  border-radius:999px;
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,0.14);
}

.editor-overlay.editor-overlay--firstSessionEntry{
  inset:auto;
  left:50%;
  top:50%;
  bottom:auto;
  right:auto;
  width:var(--editor-firstSessionEntry-overlay-width);
  max-width:100%;
  max-height:min(88vh, calc(100% - 48px));
  height:auto;
  min-height:0;
  transform:translate(-50%, -50%);
  /* Pass clicks through to the editor; card re-enables hits below */
  pointer-events:none;
  cursor:default;
  align-items:stretch;
  justify-content:flex-start;
  padding:0;
  overflow:hidden;
  /* Fallback when clip-path: path() is unavailable; softened so corners are not blunt polygons */
  border-radius:min(22px, 5vw);
  background:color-mix(in srgb, var(--panel) 58%, rgba(255, 255, 255, 0.88) 42%);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);
  backdrop-filter:blur(10px) saturate(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-theme="dark"] .editor-overlay.editor-overlay--firstSessionEntry{
  background:color-mix(in srgb, var(--panel) 55%, rgba(0, 0, 0, 0.2) 45%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (prefers-reduced-motion:reduce){
  .editor-overlay.editor-overlay--firstSessionEntry{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

.editor-overlay-card--firstSessionEntry{
  --calib-emerge-y:clamp(-0.85rem, -3.5vh, -1.75rem);
  flex:0 0 auto;
  align-self:stretch;
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:22px 20px 26px;
  text-transform:none;
  letter-spacing:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  pointer-events:auto;
  cursor:pointer;
  animation:editor-firstSessionEntry-emerge var(--motion-duration-panel) var(--motion-ease-out) both;
}

.editor-overlay-firstSessionEntry{
  max-width:100%;
  width:100%;
  margin:0;
}

@keyframes editor-firstSessionEntry-emerge{
  from{
    opacity:0.88;
    transform:translateY(calc(var(--calib-emerge-y) + var(--motion-shift-tight)));
    box-shadow:none;
  }
  to{
    opacity:1;
    transform:translateY(var(--calib-emerge-y));
    box-shadow:none;
  }
}

.editor-overlay-card--firstSessionEntry.editor-overlay-card--firstSessionEntry-dismiss{
  animation:editor-firstSessionEntry-dismiss var(--motion-duration-base) var(--motion-ease-out) forwards;
}

@keyframes editor-firstSessionEntry-dismiss{
  from{
    opacity:1;
    transform:translateY(var(--calib-emerge-y));
    box-shadow:none;
  }
  to{
    opacity:0.78;
    transform:translateY(calc(var(--calib-emerge-y) + var(--motion-shift-tight)));
    box-shadow:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .editor-overlay-card--firstSessionEntry{
    animation:none;
    opacity:1;
    box-shadow:none;
    transform:translateY(var(--calib-emerge-y));
  }
}

.editor-overlay-firstSessionEntry-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 22px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.editor-overlay-firstSessionEntry-label{
  font-size:7.5px;
  font-weight:300;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
  opacity:0.82;
}

.editor-overlay-firstSessionEntry-progress{
  font-size:11.5px;
  font-weight:400;
  letter-spacing:0.025em;
  color:color-mix(in srgb, var(--muted) 68%, var(--ink) 32%);
}

.editor-overlay-firstSessionEntry-meter-wrap{
  width:56%;
  max-width:11.5rem;
  align-self:flex-start;
  margin:0 0 30px;
}

.editor-overlay-firstSessionEntry-meter{
  height:5px;
  border-radius:999px;
  background:color-mix(in srgb, var(--soft) 88%, var(--line) 12%);
  overflow:hidden;
}

.editor-overlay-firstSessionEntry-meter-fill{
  height:100%;
  border-radius:inherit;
  background:color-mix(in srgb, var(--ink) 32%, var(--muted) 68%);
  transition:width 0.42s cubic-bezier(0.22, 1, 0.32, 1);
}

html[data-theme="dark"] .editor-overlay-firstSessionEntry-meter-fill{
  background:color-mix(in srgb, var(--ink) 42%, var(--muted) 58%);
}

.editor-overlay-firstSessionEntry-observation{
  margin:0 0 26px;
  font-size:15px;
  line-height:1.58;
  color:color-mix(in srgb, var(--ink) 90%, var(--muted) 10%);
  font-weight:400;
}

.editor-overlay-firstSessionEntry--insufficient .editor-overlay-firstSessionEntry-observation{
  color:color-mix(in srgb, var(--ink) 72%, var(--muted) 28%);
}

/*
 * Bottom strip: symmetric side lanes (gear / enter counterweight) + centered progress.
 * Enter stays its own absolute control (z-index above); right lane reserves matching width.
 */
.editor-bottom-chrome{
  position:absolute;
  left:10px;
  right:10px;
  bottom:15px;
  z-index:6;
  display:grid;
  grid-template-columns:minmax(44px, 52px) minmax(0, 1fr) minmax(44px, 52px);
  align-items:center;
  column-gap:12px;
  pointer-events:none;
}

.editor-bottom-chrome-left{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  min-width:0;
  padding:0 0 0 6px;
  margin:0;
  pointer-events:none;
}

.editor-bottom-chrome-left .editor-gear-btn{
  position:relative;
  inset:auto;
  pointer-events:auto;
}

.editor-bottom-chrome-center{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}

.editor-bottom-chrome-right{
  min-width:0;
  pointer-events:none;
}

.editor-gear-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  width:26px;
  height:26px;
  padding:3px;
  color:var(--tool-color);
  opacity:var(--tool-opacity-rest);
  cursor:pointer;
  transition:opacity 0.18s ease, transform 0.18s ease;
  will-change:opacity, transform;
}

.editor-gear-btn:active{
  transform:rotate(40deg) scale(0.95);
}

/* Subtle settle-away (firstSessionEntry overlay); not display:none — layout stays stable */
.ui-hidden{
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
}

.ui-hidden.ui-hidden--settled{
  visibility:hidden;
}

@media (prefers-reduced-motion:reduce){
  .ui-hidden{
    transform:none;
  }
}

.editor-time-fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  background:linear-gradient(to top, rgba(0,0,0,0.10), rgba(0,0,0,0.03));
  z-index:1;
  pointer-events:none;
  /* Match ~1s tick cadence so the fill eases between updates instead of snapping. */
  transition:height 1s linear, opacity 0.2s ease, visibility 0s linear 0.2s;
}

html[data-theme="dark"] .editor-time-fill{
  background:linear-gradient(to top, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
}

.editor-post-run-line{
  display:none;
  box-sizing:border-box;
  position:absolute;
  left:max(10px, env(safe-area-inset-left, 0px));
  right:max(10px, env(safe-area-inset-right, 0px));
  bottom:52px;
  z-index:5;
  padding:0 8px;
  text-align:center;
  font-size:13px;
  line-height:1.42;
  letter-spacing:0.01em;
  color:color-mix(in srgb, var(--ink) 34%, var(--muted));
  pointer-events:none;
}

.editor-post-run-line--empty{
  visibility:hidden;
}

.editor-shell:has(#editorOverlay:not(.hidden).editor-overlay--firstSessionEntry) .editor-post-run-line{
  opacity:0;
  visibility:hidden;
}

.field-expand-toggle{
  display:inline-flex;
  box-sizing:border-box;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin:0;
  padding:0;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--tool-color);
  opacity:var(--tool-opacity-rest);
  cursor:pointer;
  line-height:0;
  transition:opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
  pointer-events:auto;
  touch-action:manipulation;
}

.field-expand-toggle:active{
  opacity:var(--tool-opacity-active);
  transform:scale(0.96);
}

.field-expand-toggle:focus-visible{
  opacity:var(--tool-opacity-hover);
  color:color-mix(in srgb, var(--ink) 34%, var(--muted));
}

@media (hover:hover) and (pointer:fine){
  .field-expand-toggle:hover{
    opacity:var(--tool-opacity-hover);
    color:color-mix(in srgb, var(--ink) 34%, var(--muted));
  }

  .editor-gear-btn:hover{
    opacity:var(--tool-opacity-hover);
    transform:rotate(20deg);
  }
}

.field-expand-toggle svg{
  display:block;
  transform:scale(0.83);
  --fold-square-shift:0.36px;
}

.field-expand-toggle svg rect{
  transition:transform 0.17s ease;
  transform-origin:50% 50%;
  vector-effect:non-scaling-stroke;
}

.field-expand-toggle svg rect:nth-child(1){
  transform:translate(calc(var(--fold-square-shift) * -1), calc(var(--fold-square-shift) * -1));
}

.field-expand-toggle svg rect:nth-child(2){
  transform:translate(var(--fold-square-shift), calc(var(--fold-square-shift) * -1));
}

.field-expand-toggle svg rect:nth-child(3){
  transform:translate(calc(var(--fold-square-shift) * -1), var(--fold-square-shift));
}

.field-expand-toggle svg rect:nth-child(4){
  transform:translate(var(--fold-square-shift), var(--fold-square-shift));
}

.field-expand-toggle[aria-pressed="true"] svg{
  --fold-square-shift:-0.22px;
}

.right-control-spine .field-expand-toggle{
  position:relative;
  z-index:2;
  justify-content:center;
  padding-left:0;
}

@media (prefers-reduced-motion:reduce){
  .field-expand-toggle{
    transition-duration:0.01ms;
  }

  .field-expand-toggle:active{
    transform:none;
  }
}

@media (max-width:720px){
  .right-control-spine:not(.prompt-control-spine){
    gap:5px;
  }

  .right-control-spine .field-expand-toggle{
    width:24px;
    height:24px;
    justify-content:center;
    padding-left:0;
    padding-right:0;
  }

  .right-control-spine .field-expand-toggle svg{
    transform:scale(0.83);
  }

  body.focus-mode .editor-post-run-line{
    display:block;
    opacity:0;
    transform:translate3d(0, 4px, 0);
    transition:opacity 0.16s cubic-bezier(0.25, 0.46, 0.45, 1),
      transform 0.16s cubic-bezier(0.25, 0.46, 0.45, 1);
  }

  body.focus-mode .editor-post-run-line:not(.editor-post-run-line--empty){
    opacity:1;
    transform:translate3d(0, 0, 0);
  }

  body.focus-mode.keyboard-open .editor-post-run-line{
    bottom:46px;
  }

}

/* FirstSessionEntry composing: hide word target / count chrome so it does not compete with sentence nudges. */
body.firstSessionEntry-writing-mode .editor-bottom-chrome-center .editor-progress,
body.firstSessionEntry-writing-mode #wordTargetLabelPanel,
body.firstSessionEntry-writing-mode #wordModesPanel,
body.firstSessionEntry-writing-mode #wordTargetLabelSetup,
body.firstSessionEntry-writing-mode #wordModes{
  display:none !important;
}

.editor-bottom-chrome-center .editor-progress{
  position:relative;
  inset:auto;
  flex:0 1 auto;
  width:min(200px, 44%);
  max-width:100%;
  height:22px;
  margin:0 auto;
  pointer-events:auto;
  transition:opacity 0.18s ease, transform 0.18s ease;
  will-change:opacity, transform;
}

.editor-progress-caption{
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  transform:translateX(-50%);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:8px;
  line-height:1;
  font-style:italic;
  font-weight:400;
  letter-spacing:0.06em;
  color:color-mix(in srgb, var(--muted) 90%, var(--ink) 10%);
  opacity:0.34;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

.editor-progress--no-target .editor-progress-caption{
  visibility:hidden;
}

@media (min-width:720px){
  .editor-bottom-chrome{
    left:14px;
    right:14px;
    bottom:16px;
    column-gap:14px;
    grid-template-columns:minmax(48px, 58px) minmax(0, 1fr) minmax(48px, 58px);
  }

  .editor-bottom-chrome-left{
    padding:0 0 0 8px;
    margin:0;
  }
}

.editor-progress-track{
  --editor-progress-pct:0;
  position:relative;
  width:100%;
  height:100%;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb, var(--line) 20%, var(--soft));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--line) 32%, transparent);
}

html[data-theme="dark"] .editor-progress-track{
  background:color-mix(in srgb, var(--line) 30%, var(--soft));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    inset 0 0 0 1px color-mix(in srgb, var(--line) 45%, transparent);
}

.editor-progress-markers{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  display:none;
}

.editor-progress-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  min-width:0;
  max-width:100%;
  background:color-mix(in srgb, var(--ink) 72%, var(--muted) 28%);
  border-radius:inherit;
  /* ease-out only — no springy overshoot on width (settles at target). */
  transition:width 0.12s cubic-bezier(0.25, 0.46, 0.45, 1), background .18s ease-out, opacity .2s ease-out;
  z-index:1;
}

.editor-progress-meter{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.editor-progress-meter__value{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
  white-space:nowrap;
  opacity:0.86;
}

.editor-progress-meter__value--track{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:color-mix(in srgb, var(--ink) 42%, var(--muted));
}

.editor-progress-meter__clip{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:calc(var(--editor-progress-pct) * 1%);
  overflow:hidden;
  transition:width 0.12s cubic-bezier(0.25, 0.46, 0.45, 1);
}

.editor-progress-meter__clip-inner{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100% * 100 / max(var(--editor-progress-pct), 0.001));
}

.editor-progress-meter__value--fill{
  color:rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .editor-progress:not([data-phase="done"]) .editor-progress-meter__value--fill{
  color:rgba(22, 22, 22, 0.88);
}

.editor-progress[data-phase="done"]:not(.editor-progress--empty) .editor-progress-meter__value--fill{
  color:rgba(255, 252, 248, 0.9);
}

.editor-progress--no-target .editor-progress-meter{
  visibility:hidden;
}

@media (prefers-reduced-motion:reduce){
  .editor-progress-meter__clip{
    transition-duration:0.01ms;
  }
}

/* Full bar: short ease to rest on submit; micro opacity settle (no bounce). */
.editor-shell.editor-shell--submit-complete .editor-progress[data-phase="done"]:not(.editor-progress--empty) .editor-progress-fill{
  transition-duration:0.14s, 0.16s, 0.14s;
  transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 1), ease-out, ease-out;
  animation:wayword-progress-fill-settle 0.16s ease-out both;
}

@keyframes wayword-progress-fill-settle{
  0%{ opacity:0.9; }
  100%{ opacity:0.98; }
}

@media (prefers-reduced-motion:reduce){
  .editor-shell.editor-shell--submit-complete .editor-progress[data-phase="done"]:not(.editor-progress--empty) .editor-progress-fill{
    animation:none;
  }
}

/* Zero-width + pill radius can still paint a 1px hairline; hide until there is progress. */
.editor-progress--empty .editor-progress-fill{
  opacity:0;
}

.editor-progress:not([data-phase="done"]) .editor-progress-fill{
  box-shadow:none;
}

.editor-progress[data-phase="none"] .editor-progress-fill,
.editor-progress--no-target .editor-progress-fill{
  opacity:0.22;
}

.below-editor-stack{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:4px;
}

body.focus-mode #profileSummarySection,
#writeView:has(#editorOverlay:not(.hidden).editor-overlay--firstSessionEntry) #profileSummarySection{
  display:none !important;
}

/* Below editor: mobile-first (≤980px). Desktop grid from 981px matches `isDesktopPatternsViewport()`. */
.editor-pill-band{
  margin-top:6px;
}

.below-editor-reflection-stack{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}

.below-editor-reflection-stack #reflection-line{
  margin-top:0;
}

@media (max-width:980px){
  /* Runs / Words: not on the main mobile writing surface (desktop ≥981px only). */
  #writeView #profileSummarySection{
    display:none !important;
    margin:0;
    padding:0;
    visibility:hidden;
    pointer-events:none;
  }

  /* Recent list: drawer only — rail list is desktop-only to avoid duplicate “Recent writing”. */
  #writeView .side-column .desktop-rail-panel{
    display:none !important;
  }

  /*
   * Sub-rail header: keep the default single row (`brand | Patterns`). Same grid for closed + open
   * (no `body.patterns-open` header overrides). Tighten column gap + fluid wordmark so the tab stays
   * end-aligned without stacking or horizontal overflow.
   */
  .write-field-context{
    column-gap:clamp(8px, 2.2vw, 14px);
  }

  .header .wordmark{
    font-size:clamp(26px, 8.2vw, 42px);
  }

  .style-tab{
    justify-self:end;
    box-sizing:border-box;
  }

  /*
   * `body.patterns-open` is toggled whenever Patterns is shown without the desktop rail
   * (`view-controller.js`: `useMobilePatterns = profileVisible && !useDesktopRail` → all widths <981px).
   * Rules that were incorrectly scoped to `@media (max-width:720px)` never ran on tablet widths.
   */
  body.patterns-open{
    overflow:hidden;
    overscroll-behavior:none;
  }

  body.patterns-open #appView.app{
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    overflow:hidden;
  }

  body.patterns-open #profileView:not(.hidden){
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    overflow-y:auto;
    /* Let outlined chips paint/wrap within the scrollport — `hidden` clipped the outline box on iPad. */
    overflow-x:visible;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    padding-top:16px;
    padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
    min-width:0;
  }

  body.patterns-open .app-write-surface{
    flex:0 0 auto;
    flex-grow:0;
    min-height:0;
  }

  body.patterns-open .app-write-surface::after{
    content:"";
    display:block;
    flex:0 0 auto;
    width:100%;
    margin:0;
    border-top:2px solid var(--ink);
  }

  body.patterns-open .profile-hero{
    background:transparent;
    border-radius:0;
    padding-block:0;
    /* Inner gutter only — shell safe-area lives on `#appView.app`. Keeps chip outlines off the scrollport edge. */
    padding-inline:6px;
  }

  html[data-theme="dark"] body.patterns-open .profile-hero{
    background:transparent;
  }

  body.patterns-open .patterns-repeated-challenge-card{
    border:none;
    border-radius:0;
    background:transparent;
    padding-block:0;
    padding-inline:6px;
  }

  /* Patterns word map: guarantee shrink/wrap in narrow profile column (tablet + phone). */
  body.patterns-open #patternCallouts{
    min-width:0;
    max-width:100%;
    overflow-x:visible;
  }

  body.patterns-open .patterns-word-map{
    max-width:100%;
  }

}

@media (min-width:981px){
  .below-editor-stack{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    column-gap:16px;
    row-gap:6px;
    align-items:start;
  }

  .below-editor-stack > .editor-pill-band{
    grid-column:1;
    grid-row:1;
    margin-top:6px;
    min-width:0;
  }

  .below-editor-stack > #profileSummarySection{
    grid-column:2;
    grid-row:1;
    justify-content:flex-end;
    align-self:center;
    margin-top:0;
    /* Inset from shell corner radius so stats don’t hug the rounded edge */
    padding-right:18px;
  }

  .below-editor-stack > #profileSummarySection #profileSummary{
    width:auto;
    max-width:min(420px, 38vw);
    text-align:right;
    opacity:0.84;
  }

  .below-editor-stack > .below-editor-reflection-stack{
    grid-column:1 / -1;
    grid-row:2;
    margin-top:10px;
  }

  .below-editor-stack > #recentWritingTrigger{
    grid-column:1 / -1;
    grid-row:3;
  }

  .below-editor-stack > #feedbackBox{
    grid-column:1 / -1;
    grid-row:4;
  }

  /* Tighten only the lane below pills/meta when Reflection is present (default 10px is mobile-ish air). */
  .below-editor-stack > .below-editor-reflection-stack:has(#mirrorReflectionSection:not(.hidden)){
    margin-top:4px;
  }
}

/* Phase 2: read-only token slots (writeDoc only; no contenteditable; not a text source) */
.annotation-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 6px;
  max-height:52px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 2px;
  margin:-4px 0 0;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--muted);
  border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

.annotation-row.hidden{
  display:none !important;
}

/* Shown only with ?annotationRow=1 — reads as dev scaffolding, not main chrome */
.annotation-row.annotation-row--debug-scaffold{
  border-top-style:dashed;
  opacity:0.88;
}

.annotation-slot{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  max-width:7.5rem;
  min-height:1.25em;
  padding:2px 7px;
  border-radius:6px;
  border:1px solid color-mix(in srgb, var(--line) 70%, var(--soft));
  background:color-mix(in srgb, var(--panel) 88%, var(--soft));
  overflow:hidden;
  line-height:1.25;
}

.annotation-slot--toggle{
  pointer-events:auto;
  cursor:pointer;
}

.annotation-slot--toggle:focus{
  outline:1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  outline-offset:1px;
}

.annotation-slot--toggle:focus:not(:focus-visible){
  outline:none;
}

.annotation-slot-dots{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:3px;
  flex-shrink:0;
}

.annotation-slot-text{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.annotation-dot{
  width:5px;
  height:5px;
  min-width:5px;
  min-height:5px;
  flex-shrink:0;
  border-radius:50%;
  background:color-mix(in srgb, var(--muted) 55%, var(--ink));
  opacity:0.55;
}

html[data-theme="dark"] .annotation-dot{
  background:color-mix(in srgb, var(--muted) 40%, var(--ink));
  opacity:0.5;
}

.annotation-dot--filler{
  background:var(--color-filler);
  opacity:0.92;
}

.annotation-dot--repetition{
  background:var(--color-repetition);
  opacity:0.92;
}

.annotation-dot--opening{
  background:var(--color-openings);
  opacity:0.92;
}

.annotation-dot--challenge{
  background:var(--color-challenge);
  opacity:0.92;
}

html[data-theme="dark"] .annotation-dot--filler{
  background:color-mix(in srgb, var(--color-filler) 84%, var(--ink));
  opacity:0.94;
}

html[data-theme="dark"] .annotation-dot--repetition{
  background:color-mix(in srgb, var(--color-repetition) 84%, var(--ink));
  opacity:0.94;
}

html[data-theme="dark"] .annotation-dot--opening{
  background:color-mix(in srgb, var(--color-openings) 84%, var(--ink));
  opacity:0.94;
}

html[data-theme="dark"] .annotation-dot--challenge{
  background:color-mix(in srgb, var(--color-challenge) 84%, var(--ink));
  opacity:0.94;
}

.annotation-slot--filler{
  border-left:3px solid var(--color-filler);
}

.annotation-slot--repetition{
  border-left:3px solid var(--color-repetition);
}

.annotation-slot--opening{
  border-left:3px solid var(--color-openings);
}

.annotation-slot--challenge{
  border-left:3px solid var(--color-challenge);
}

.annotation-line-gap{
  flex:0 0 auto;
  padding:0 1px;
  opacity:0.5;
  font-size:10px;
}

.legend-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Phase 3: calm readout under editor — matches dot colors; counts from writeDoc flags (no mirrored text). */
.semantic-status-bar{
  margin-top:0;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.semantic-status-bar::-webkit-scrollbar{
  display:none;
}

.legend-pill--inactive{
  opacity:0.48;
  border-color:color-mix(in srgb, var(--line) 88%, var(--soft));
  background:transparent;
}

.legend-pill--inactive .legend-swatch{
  opacity:0.65;
}

.legend-pill--inactive .legend-count{
  font-weight:600;
  color:var(--muted);
}

/* highlights */

.token{
  position:relative;
  display:inline-block;
  vertical-align:baseline;
  line-height:inherit;
  padding-bottom:0.18em;
}

.token-plain{
  display:inline;
}

.token-text{
  display:inline;
  white-space:pre-wrap;
}

/* Guardrail: editable surface must remain plain-text metrics even if legacy token wrappers appear. */
.editor-input .token,
.editor-input .token-plain,
.editor-input .token-text,
.editor-input [data-token],
.editor-input [data-token-index]{
  display:inline;
  padding:0;
  margin:0;
  line-height:inherit;
  vertical-align:baseline;
}

.token-dots{
  position:absolute;
  left:50%;
  bottom:-0.1em;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.18em;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}

.dot{
  width:0.17em;
  height:0.17em;
  border-radius:999px;
  flex:0 0 auto;
}

.dot-filler{
  background:var(--color-filler);
}

.dot-repetition{
  background:var(--color-repetition);
}

.dot-openings{
  background:var(--color-openings);
}

.dot-challenge{
  background:var(--color-challenge);
}

/* legend + chips */

.legend-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  padding:6px 11px;
  font-size:12px;
  border-radius:999px;
  background:transparent;
}

.legend-swatch{
  width:8px;
  height:8px;
  border-radius:999px;
}

.legend-count{
  font-weight:700;
}

.legend-filler-pill{
  background:transparent;
  border-color:color-mix(in srgb, var(--color-filler) 42%, var(--line));
}

.legend-repetition-pill{
  background:transparent;
  border-color:color-mix(in srgb, var(--color-repetition) 42%, var(--line));
}

.legend-openings-pill{
  background:transparent;
  border-color:color-mix(in srgb, var(--color-openings) 42%, var(--line));
}

.legend-challenge-pill{
  background:transparent;
  border-color:color-mix(in srgb, var(--color-challenge) 42%, var(--line));
}

.legend-filler-swatch{ background:var(--color-filler); }
.legend-repetition-swatch{ background:var(--color-repetition); }
.legend-openings-swatch{ background:var(--color-openings); }
.legend-challenge-swatch{ background:var(--color-challenge); }

.legend-filler-pill:not(.legend-pill--inactive) .legend-text,
.legend-filler-pill:not(.legend-pill--inactive) .legend-count{
  color:color-mix(in srgb, var(--color-filler) 38%, var(--ink));
}

.legend-repetition-pill:not(.legend-pill--inactive) .legend-text,
.legend-repetition-pill:not(.legend-pill--inactive) .legend-count{
  color:color-mix(in srgb, var(--color-repetition) 38%, var(--ink));
}

.legend-openings-pill:not(.legend-pill--inactive) .legend-text,
.legend-openings-pill:not(.legend-pill--inactive) .legend-count{
  color:color-mix(in srgb, var(--color-openings) 38%, var(--ink));
}

.legend-challenge-pill:not(.legend-pill--inactive) .legend-text,
.legend-challenge-pill:not(.legend-pill--inactive) .legend-count{
  color:color-mix(in srgb, var(--color-challenge) 38%, var(--ink));
}

/* Post-submit semantic pills (#editorSemanticStatusBar): secondary read vs Mirror reflection. */
#editorSemanticStatusBar{
  opacity:0.9;
  justify-content:center;
}

/* Completed post-submit: pills stay available but defer visually to Mirror (class from script.js). */
#editorSemanticStatusBar.semantic-status-bar--post-run-muted{
  opacity:0.5;
  transition:opacity 0.22s ease;
}

#editorSemanticStatusBar.semantic-status-bar--post-run-muted .legend-pill:not(.legend-pill--inactive){
  opacity:0.88;
}

#editorSemanticStatusBar.semantic-status-bar--post-run-muted .legend-pill--inactive{
  opacity:0.2;
}

#editorSemanticStatusBar .legend-pill{
  flex:0 0 auto;
  border-color:color-mix(in srgb, var(--line) 84%, transparent);
}

#editorSemanticStatusBar .legend-pill--inactive{
  opacity:0.4;
  border-color:color-mix(in srgb, var(--line) 92%, var(--soft));
  background:transparent;
}

#editorSemanticStatusBar .legend-pill--inactive .legend-swatch{
  opacity:0.55;
}

#editorSemanticStatusBar .legend-filler-pill:not(.legend-pill--inactive){
  background:color-mix(in srgb, var(--color-filler) 5%, var(--panel));
  border-color:color-mix(in srgb, var(--color-filler) 34%, var(--line));
}

#editorSemanticStatusBar .legend-repetition-pill:not(.legend-pill--inactive){
  background:color-mix(in srgb, var(--color-repetition) 5%, var(--panel));
  border-color:color-mix(in srgb, var(--color-repetition) 30%, var(--line));
}

#editorSemanticStatusBar .legend-openings-pill:not(.legend-pill--inactive){
  background:color-mix(in srgb, var(--color-openings) 5%, var(--panel));
  border-color:color-mix(in srgb, var(--color-openings) 30%, var(--line));
}

#editorSemanticStatusBar .legend-challenge-pill:not(.legend-pill--inactive){
  background:color-mix(in srgb, var(--color-challenge) 5%, var(--panel));
  border-color:color-mix(in srgb, var(--color-challenge) 30%, var(--line));
}

#editorSemanticStatusBar .legend-filler-pill:not(.legend-pill--inactive) .legend-text,
#editorSemanticStatusBar .legend-filler-pill:not(.legend-pill--inactive) .legend-count{
  color:color-mix(in srgb, var(--color-filler) 40%, var(--ink));
  font-weight:600;
}

#editorSemanticStatusBar .legend-repetition-pill:not(.legend-pill--inactive) .legend-text,
#editorSemanticStatusBar .legend-repetition-pill:not(.legend-pill--inactive) .legend-count{
  color:color-mix(in srgb, var(--color-repetition) 32%, var(--ink));
  font-weight:600;
}

#editorSemanticStatusBar .legend-openings-pill:not(.legend-pill--inactive) .legend-text,
#editorSemanticStatusBar .legend-openings-pill:not(.legend-pill--inactive) .legend-count{
  color:color-mix(in srgb, var(--color-openings) 32%, var(--ink));
  font-weight:600;
}

#editorSemanticStatusBar .legend-challenge-pill:not(.legend-pill--inactive) .legend-text,
#editorSemanticStatusBar .legend-challenge-pill:not(.legend-pill--inactive) .legend-count{
  color:color-mix(in srgb, var(--color-challenge) 32%, var(--ink));
  font-weight:600;
}

#editorSemanticStatusBar .legend-pill:not(.legend-pill--inactive) .legend-swatch{
  opacity:0.86;
}

html[data-theme="dark"] #editorSemanticStatusBar{
  opacity:0.88;
}

html[data-theme="dark"] #editorSemanticStatusBar .legend-pill--inactive{
  background:transparent;
}

html[data-theme="dark"] #editorSemanticStatusBar .legend-filler-pill:not(.legend-pill--inactive){
  background:color-mix(in srgb, var(--color-filler) 6%, var(--panel));
  border-color:color-mix(in srgb, var(--color-filler) 28%, var(--line));
}

html[data-theme="dark"] #editorSemanticStatusBar .legend-repetition-pill:not(.legend-pill--inactive){
  background:color-mix(in srgb, var(--color-repetition) 6%, var(--panel));
  border-color:color-mix(in srgb, var(--color-repetition) 26%, var(--line));
}

html[data-theme="dark"] #editorSemanticStatusBar .legend-openings-pill:not(.legend-pill--inactive){
  background:color-mix(in srgb, var(--color-openings) 6%, var(--panel));
  border-color:color-mix(in srgb, var(--color-openings) 26%, var(--line));
}

html[data-theme="dark"] #editorSemanticStatusBar .legend-challenge-pill:not(.legend-pill--inactive){
  background:color-mix(in srgb, var(--color-challenge) 6%, var(--panel));
  border-color:color-mix(in srgb, var(--color-challenge) 26%, var(--line));
}

.word-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.word-list--inline{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  vertical-align:middle;
}

.mini-section{
  margin-top:10px;
}

.chip{
  border:1px solid var(--line);
  padding:4px 8px;
  font-size:12px;
  background:var(--panel);
  border-radius:999px;
}

.chip.chip-filler{
  border-color:var(--color-filler);
  background:var(--color-filler-surface);
}

.chip.chip-repetition{
  border-color:var(--color-repetition);
  background:var(--color-repetition-surface);
}

.chip.chip-openings{
  border-color:var(--color-openings);
  background:var(--color-openings-surface);
}

.chip.chip--compact{
  padding:2px 7px;
  font-size:11px;
  line-height:1.25;
}

.exercise-chip.chip--compact{
  padding:2px 7px;
  font-size:11px;
  gap:4px;
}

.exercise-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  padding-top:4px;
}

.challenge-title{
  font-size:14px;
  font-style:italic;
  color:var(--muted);
  opacity:0.8;
}

.challenge-copy{
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  max-width:42ch;
}

.exercise-btn{
  margin-top:4px;
}

.exercise-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--color-challenge);
  background:var(--color-challenge-surface);
  color:var(--ink);
  padding:4px 8px;
  font-size:12px;
  border-radius:999px;
}

.exercise-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--color-challenge);
}

.exercise-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--color-challenge);
  background:var(--color-challenge-surface);
  color:var(--ink);
  padding:8px 11px;
  cursor:pointer;
  border-radius:999px;
}

/* result */

.result-card{
  border-top:1px solid var(--line);
  padding-top:10px;
  min-height:0;
}

.result-card.empty{
  min-height:0;
  padding-top:0;
  border-top:none;
}

.result-headline{
  font-size:21px;
  line-height:1.2;
  margin-bottom:8px;
}

.result-support{
  background:rgba(0,0,0,0.035);
  padding:10px 12px;
  border-radius:12px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  line-height:1.45;
}

html[data-theme="dark"] .result-support{
  background:rgba(255,255,255,0.06);
}

.result-support > div{
  font-size:13px;
  opacity:0.92;
}

.result-score{
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  margin-right:4px;
}

.result-direction{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid var(--line);
  opacity:.9;
}
.restart-hint{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  opacity:0.7;
}

/* sidebar */

.run-stats-inline{
  font-size:12px;
  line-height:1.25;
  letter-spacing:0.02em;
  color:var(--muted);
  text-align:center;
  padding:2px 0 0;
}

#profileSummarySection{
  margin-top:0;
  margin-bottom:0;
  display:flex;
  justify-content:flex-start;
}

#profileSummarySection.hidden{
  display:none !important;
}

#profileSummary{
  width:100%;
  max-width:100%;
  text-align:left;
  padding-top:0;
  font-size:11px;
  letter-spacing:0.03em;
  opacity:0.78;
}

@media (min-width:981px){
  #profileSummarySection{
    justify-content:flex-end;
    margin-top:0;
  }

  #profileSummary{
    width:min(420px, 100%);
    max-width:min(420px, 100%);
    text-align:right;
    opacity:0.84;
  }
}

.recent-writing-trigger{
  width:100%;
  margin-top:10px;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--muted);
  padding:10px 2px 8px;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  box-shadow:none;
}

.recent-writing-trigger:focus{
  outline:none;
  box-shadow:none;
}

.recent-writing-trigger:focus-visible{
  outline:1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  outline-offset:2px;
}

.recent-writing-trigger:focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
}

.recent-writing-trigger:disabled{
  opacity:0.45;
  cursor:default;
}

.recent-drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.34);
  z-index:2050;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--motion-duration-panel) var(--motion-ease-out),
    visibility 0s linear var(--motion-duration-panel);
}

body.recent-drawer-open .recent-drawer-backdrop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--motion-duration-panel) var(--motion-ease-out),
    visibility 0s linear 0s;
}

/* Rail-expanded backdrop node (see desktop `@media (min-width:981px)` — no full-screen dim on desktop). */
.recent-rail-expanded-backdrop{
  z-index:3040;
}

body.recent-rail-expanded .recent-rail-expanded-backdrop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--motion-duration-panel) var(--motion-ease-out),
    visibility 0s linear 0s;
}

body.recent-rail-expanded{
  overflow:hidden;
}

.recent-drawer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:2060;

  padding:var(--review-runs-rail-heading-inset) 14px calc(12px + env(safe-area-inset-bottom));

  border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;
  background:var(--panel);
  box-shadow:0 -14px 40px rgba(0,0,0,0.14);

  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-x:hidden;
  overflow-y:visible;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(var(--motion-shift-subtle));
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:opacity var(--motion-duration-panel) var(--motion-ease-out),
    transform var(--motion-duration-panel) var(--motion-ease-out),
    visibility 0s linear var(--motion-duration-panel);
}

body.recent-drawer-open .recent-drawer{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity var(--motion-duration-panel) var(--motion-ease-out),
    transform var(--motion-duration-panel) var(--motion-ease-out),
    visibility 0s linear 0s;
}

html[data-theme="dark"] .recent-drawer{
  box-shadow:0 -14px 40px rgba(0,0,0,0.40);
}

@media (prefers-reduced-motion:reduce){
  .recent-drawer-backdrop,
  .recent-rail-expanded-backdrop,
  .recent-drawer{
    transition-duration:0.01ms !important;
    transition-delay:0s !important;
  }
}

.recent-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.recent-drawer-title{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Review Runs dismiss (mobile drawer + desktop rail): one plain ✕ treatment */
.recent-drawer-close,
.recent-rail-expanded-close{
  width:auto;
  height:auto;
  min-width:40px;
  min-height:40px;
  padding:6px 10px;
  border:none;
  border-radius:0;
  background:transparent;
  font-size:15px;
  line-height:1;
  font-weight:500;
  color:color-mix(in srgb, var(--muted) 88%, var(--ink) 12%);
  opacity:0.52;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  box-shadow:none;
}

.recent-drawer-close:hover,
.recent-rail-expanded-close:hover{
  opacity:0.72;
}

.recent-drawer-close:focus,
.recent-rail-expanded-close:focus{
  outline:none;
  box-shadow:none;
}

.recent-drawer-close:focus-visible,
.recent-rail-expanded-close:focus-visible{
  outline:1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  outline-offset:2px;
  opacity:0.85;
}

.recent-drawer-close:focus:not(:focus-visible),
.recent-rail-expanded-close:focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
}

.recent-drawer-close:active,
.recent-rail-expanded-close:active{
  background:transparent;
  box-shadow:none;
}

.recent-drawer-list{
  overflow-x:hidden;
  overflow-y:visible;
  flex:0 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.recent-runs-more-footer{
  flex:0 0 auto;
  margin-top:2px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.recent-runs-more-btn{
  display:block;
  width:100%;
  margin:0;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.02em;
  text-align:center;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  box-shadow:none;
  opacity:0.88;
}

.recent-runs-more-btn:hover{
  opacity:1;
  background:color-mix(in srgb, var(--ink) 4%, transparent);
}

.recent-runs-more-btn:focus-visible{
  outline:1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  outline-offset:2px;
}

.recent-runs-more-btn:focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
}

.recent-runs-more-btn:active{
  opacity:0.92;
}

/**
 * Expanded run history inside the bottom sheet (same drawer chrome; taller + scroll).
 * Keeps header/footer visible; list scrolls between them.
 */
body.recent-drawer-open.recent-drawer-runs-expanded .recent-drawer{
  max-height:min(
    88vh,
    calc(100dvh - max(10px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)))
  );
  overflow:hidden;
}

body.recent-drawer-open.recent-drawer-runs-expanded .recent-drawer-list{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

.recent-drawer-empty{
  font-size:13px;
  color:var(--muted);
  padding:6px 2px 10px;
}

.recent-entry{
  width:100%;
  text-align:left;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-weight:400;
  padding:9px 2px 11px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  box-shadow:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.recent-entry:focus{
  outline:none;
  box-shadow:none;
}

.recent-entry:focus-visible{
  outline:1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  outline-offset:2px;
}

.recent-entry:focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
}

.recent-entry + .recent-entry{
  border-top:1px solid color-mix(in srgb, var(--line) 68%, transparent);
  padding-top:12px;
}

.recent-entry-compact{
  display:flex;
  flex-direction:column;
  gap:4px;
  opacity:0.66;
}

.recent-entry.recent-entry--active .recent-entry-compact{
  opacity:1;
}

.recent-entry + .recent-entry.recent-entry--active{
  border-top-color:color-mix(in srgb, var(--line) 90%, var(--ink) 10%);
}

.recent-entry-excerpt{
  font-size:15px;
  line-height:1.38;
  font-weight:500;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
}

.recent-entry.recent-entry--active .recent-entry-excerpt{
  font-size:16px;
  font-weight:600;
}

.recent-entry-meta{
  font-size:11px;
  color:var(--muted);
  opacity:0.86;
}

.recent-entry-expanded{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--line) 64%, transparent);
}

.recent-entry-expanded[hidden]{
  display:none !important;
}

.recent-entry-reflection{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  margin-top:0;
  text-align:left;
}

.recent-entry-prompt-wrap{
  margin:0;
}

.recent-entry-prompt-kicker{
  margin:0 0 4px;
  font-size:9.5px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:0.62;
  line-height:1.15;
}

.recent-entry-prompt{
  margin:0;
  font-size:12.5px;
  line-height:1.48;
  font-weight:400;
  color:color-mix(in srgb, var(--muted) 34%, var(--ink));
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  max-height:calc(1.48em * 7);
  overflow:hidden;
}

.recent-entry-results{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:20px;
  width:100%;
  margin-top:0;
}

.recent-entry-mirror{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  margin-top:0;
  text-align:left;
}

.recent-entry-stats{
  margin-top:0;
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:100%;
  max-width:22rem;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* Demoted run score: quiet metadata under Mirror (Recent Writing drawer / rail) */
.recent-entry-stats.recent-entry-stats--demoted{
  max-width:18.5rem;
  padding-top:0;
  border-top:0;
  gap:2px;
  opacity:1;
}

/* Score strip is always first inside `.recent-entry-results` (reflection + prompt live above). */
.recent-entry-results > .recent-entry-stats.recent-entry-stats--demoted{
  margin-top:0;
  padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--line) 48%, transparent);
}

.recent-entry-stats--demoted .recent-entry-stats-label{
  font-size:8px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:0.52;
  line-height:1.25;
}

.recent-entry-stats--demoted .recent-entry-stats-score{
  font-size:clamp(15px, 3.6vw, 19px);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.05;
  color:color-mix(in srgb, var(--muted) 58%, var(--ink));
}

.recent-entry-stats--demoted .recent-entry-stats-words{
  font-size:10px;
  font-weight:400;
  line-height:1.25;
  color:color-mix(in srgb, var(--muted) 72%, var(--ink));
  opacity:0.92;
}

.recent-entry-stats--demoted .recent-entry-stats-row{
  gap:5px 10px;
  margin-top:1px;
}

.recent-entry-stats--demoted .recent-entry-score-meters{
  max-width:16.75rem;
  gap:5px 6px;
  margin-top:1px;
}

.recent-entry-stats--demoted .recent-entry-meter{
  gap:0;
}

.recent-entry-stats--demoted .recent-entry-meter-svg{
  max-width:30px;
}

.recent-entry-stats--demoted .recent-entry-meter-track{
  stroke-width:2.1;
  stroke-opacity:0.58;
}

.recent-entry-stats--demoted .recent-entry-meter-fill{
  stroke-width:2.1;
  stroke:color-mix(in srgb, var(--muted) 35%, var(--ink));
  stroke-opacity:0.32;
}

.recent-entry-stats--demoted .recent-entry-meter--max .recent-entry-meter-fill{
  stroke:color-mix(in srgb, var(--success) 52%, var(--muted));
  stroke-opacity:0.44;
}

.recent-entry-stats--demoted .recent-entry-meter-value{
  font-size:9px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--muted) 48%, var(--ink));
  line-height:1.1;
}

.recent-entry-stats--demoted .recent-entry-meter-label{
  font-size:7.5px;
  letter-spacing:0.03em;
  color:color-mix(in srgb, var(--muted) 88%, var(--ink));
  opacity:0.78;
  line-height:1.12;
}

/* Softer category arcs: less saturation than default meters */
.recent-entry-stats--demoted .recent-entry-meter--filler .recent-entry-meter-fill{
  stroke:color-mix(in srgb, var(--color-filler) 38%, var(--muted));
  stroke-opacity:0.48;
}

.recent-entry-stats--demoted .recent-entry-meter--repetition .recent-entry-meter-fill{
  stroke:color-mix(in srgb, var(--color-repetition) 38%, var(--muted));
  stroke-opacity:0.48;
}

.recent-entry-stats--demoted .recent-entry-meter--openings .recent-entry-meter-fill{
  stroke:color-mix(in srgb, var(--color-openings) 38%, var(--muted));
  stroke-opacity:0.48;
}

.recent-entry-stats--demoted .recent-entry-meter--filler.recent-entry-meter--max .recent-entry-meter-fill,
.recent-entry-stats--demoted .recent-entry-meter--repetition.recent-entry-meter--max .recent-entry-meter-fill,
.recent-entry-stats--demoted .recent-entry-meter--openings.recent-entry-meter--max .recent-entry-meter-fill{
  stroke-opacity:0.54;
}

.recent-entry-stats--demoted .recent-entry-meter--filler .recent-entry-meter-label,
.recent-entry-stats--demoted .recent-entry-meter--repetition .recent-entry-meter-label,
.recent-entry-stats--demoted .recent-entry-meter--openings .recent-entry-meter-label{
  color:color-mix(in srgb, var(--muted) 90%, var(--ink));
  opacity:0.76;
}

.recent-entry-stats-label{
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.2;
}

.recent-entry-stats-row{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 14px;
  width:100%;
}

.recent-entry-stats-score{
  font-size:clamp(30px, 7.5vw, 40px);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.035em;
  line-height:1;
  color:var(--ink);
  flex:0 1 auto;
  min-width:0;
}

.recent-entry-stats-words{
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  line-height:1.3;
  flex-shrink:0;
  white-space:nowrap;
}

.recent-entry-score-meters{
  margin-top:0;
  padding-top:0;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:center;
  gap:8px 10px;
  width:100%;
  max-width:20.5rem;
  margin-left:auto;
  margin-right:auto;
  overflow:visible;
}

.recent-entry-meter{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  text-align:center;
  overflow:visible;
}

.recent-entry-meter-svg{
  display:block;
  width:100%;
  max-width:44px;
  height:auto;
  aspect-ratio:48 / 28;
  overflow:visible;
}

.recent-entry-meter-track{
  stroke:var(--line);
  stroke-width:2.5;
  stroke-opacity:0.95;
}

.recent-entry-meter-fill{
  stroke:var(--ink);
  stroke-width:2.5;
  stroke-opacity:0.58;
}

.recent-entry-meter--max .recent-entry-meter-fill{
  stroke:var(--success);
  stroke-opacity:0.72;
}

.recent-entry-meter--filler .recent-entry-meter-fill{
  stroke:var(--color-filler);
  stroke-opacity:0.9;
}

.recent-entry-meter--repetition .recent-entry-meter-fill{
  stroke:var(--color-repetition);
  stroke-opacity:0.9;
}

.recent-entry-meter--openings .recent-entry-meter-fill{
  stroke:var(--color-openings);
  stroke-opacity:0.9;
}

.recent-entry-meter--filler.recent-entry-meter--max .recent-entry-meter-fill{
  stroke:var(--color-filler);
  stroke-opacity:0.88;
}

.recent-entry-meter--repetition.recent-entry-meter--max .recent-entry-meter-fill{
  stroke:var(--color-repetition);
  stroke-opacity:0.88;
}

.recent-entry-meter--openings.recent-entry-meter--max .recent-entry-meter-fill{
  stroke:var(--color-openings);
  stroke-opacity:0.88;
}

.recent-entry-meter--filler .recent-entry-meter-label{
  color:color-mix(in srgb, var(--color-filler) 78%, var(--ink));
}

.recent-entry-meter--repetition .recent-entry-meter-label{
  color:color-mix(in srgb, var(--color-repetition) 78%, var(--ink));
}

.recent-entry-meter--openings .recent-entry-meter-label{
  color:color-mix(in srgb, var(--color-openings) 78%, var(--ink));
}

.recent-entry-meter-value{
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  line-height:1.15;
}

.recent-entry-meter-label{
  font-size:9px;
  letter-spacing:0.02em;
  color:var(--muted);
  line-height:1.15;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:340px){
  .recent-entry-score-meters{
    flex-wrap:wrap;
    justify-content:center;
    row-gap:8px;
  }

  .recent-entry-meter{
    flex:0 0 calc(50% - 4px);
    max-width:calc(50% - 4px);
  }
}

.recent-entry-detail{
  margin-top:0;
  width:100%;
  display:flex;
  justify-content:center;
}

.recent-run-detail{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.recent-run-detail--compact{
  gap:0;
  align-items:center;
  width:100%;
  max-width:100%;
  padding-bottom:4px;
}

.recent-run-detail-inline{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:start;
  justify-items:center;
  column-gap:10px;
  row-gap:8px;
  width:100%;
  max-width:20.5rem;
  margin-left:auto;
  margin-right:auto;
}

.recent-run-inline-cluster{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  max-width:100%;
  width:100%;
  text-align:center;
}

.recent-run-inline-kicker{
  font-size:8px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:0.88;
  flex:0 0 auto;
  line-height:1.2;
  white-space:nowrap;
  padding-top:2px;
}

.recent-run-inline-cluster[data-metric-explainer="filler"] .recent-run-inline-kicker{
  color:color-mix(in srgb, var(--color-filler) 72%, var(--ink));
  opacity:1;
}

.recent-run-inline-cluster[data-metric-explainer="repetition"] .recent-run-inline-kicker{
  color:color-mix(in srgb, var(--color-repetition) 72%, var(--ink));
  opacity:1;
}

.recent-run-inline-cluster[data-metric-explainer="openings"] .recent-run-inline-kicker{
  color:color-mix(in srgb, var(--color-openings) 72%, var(--ink));
  opacity:1;
}

.recent-run-inline-sep{
  color:var(--line);
  font-size:11px;
  line-height:1;
  user-select:none;
  flex:0 0 auto;
  opacity:0.9;
}

.recent-run-detail-foot{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:5px 8px;
  row-gap:4px;
  width:100%;
  max-width:22rem;
  margin-top:13px;
  padding-top:2px;
  text-align:center;
}

.recent-run-inline-cluster .word-list--inline{
  justify-content:center;
  max-height:4.75rem;
  overflow:hidden;
}

.recent-run-stats-join{
  color:var(--muted);
  font-size:9px;
  opacity:0.38;
  line-height:1;
  user-select:none;
}

.recent-run-stat-token{
  font-size:9px;
  font-weight:400;
  letter-spacing:0.01em;
  color:var(--muted);
  opacity:0.58;
  line-height:1.35;
  white-space:nowrap;
}

.recent-run-detail-meta{
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.recent-entry-future-meta{
  margin-top:10px;
  min-height:0;
}

body.recent-drawer-open{
  overflow:hidden;
}

.recent-writing{
  padding:0;
}

.history-scroll{
  max-height:250px;
  overflow:auto;
  padding-right:4px;
}

.history-item{
  padding:8px 0;
  border-top:1px solid var(--line);
}

.history-item:first-child{
  border-top:none;
  padding-top:0;
}

.history-meta{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

/* profile */

.profile-hero-copy{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
  min-width:0;
}

.profile-hero-copy .history-item{
  padding:0;
  border-top:none;
  margin:0;
}

.profile-hero-copy .history-item:first-child{
  font-size:20px;
  line-height:1.3;
  font-weight:600;
}

.profile-hero-copy .history-item:not(:first-child){
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}

/* Patterns (V1.1): reflective profile + promoted Mirror cards in #patternCallouts */
.profile-hero-copy .patterns-mirror-hero{
  display:block;
  margin:0;
}
.profile-hero-copy .patterns-mirror-profile{
  margin:0 0 14px;
  font-size:1.05rem;
  line-height:1.62;
  font-weight:400;
  color:var(--ink);
}
.profile-hero-copy .patterns-mirror-hero--empty .patterns-mirror-empty{
  margin:0;
  font-size:0.95rem;
  line-height:1.52;
  font-weight:400;
  color:var(--muted);
}
.profile-hero-copy .profile-locked--pattern-formation{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.profile-hero-copy .profile-locked-title{
  margin-bottom:2px;
}
.profile-hero-copy .profile-locked-copy{
  margin:0;
  font-size:0.95rem;
  line-height:1.58;
  font-weight:400;
  color:var(--muted);
}
.profile-hero-copy .profile-locked-copy--status{
  font-size:0.88rem;
  line-height:1.45;
  color:color-mix(in srgb, var(--muted) 90%, var(--ink));
}
.profile-hero-copy .profile-locked-copy--quiet{
  font-size:0.82rem;
  line-height:1.46;
  color:color-mix(in srgb, var(--muted) 82%, transparent);
}
.profile-hero-copy .profile-locked-formation-visual{
  margin:0;
}
.profile-hero-copy .pattern-trace-formation{
  display:block;
  width:min(100%, 168px);
  height:auto;
  overflow:visible;
}
.profile-hero-copy .pattern-trace-formation .trace-link{
  stroke:color-mix(in srgb, var(--line) 88%, var(--ink));
  stroke-width:0.72;
  stroke-linecap:round;
  opacity:0.52;
}
.profile-hero-copy .pattern-trace-formation .trace-dot{
  vector-effect:non-scaling-stroke;
}
.profile-hero-copy .pattern-trace-formation .trace-dot.is-active{
  fill:color-mix(in srgb, var(--ink) 74%, var(--line));
  stroke:color-mix(in srgb, var(--ink) 84%, var(--line));
  stroke-width:1;
}
.profile-hero-copy .pattern-trace-formation .trace-dot.is-ghost{
  fill:transparent;
  stroke:color-mix(in srgb, var(--line) 72%, var(--ink));
  stroke-width:1;
  opacity:0.9;
}
.profile-hero-copy .mirror-stack--patterns-promoted{
  gap:0.55rem;
}

.profile-hero-action{
  margin-bottom:14px;
}

.profile-hero .run-stats-inline{
  text-align:left;
  width:100%;
  margin-top:2px;
  margin-bottom:8px;
  font-size:0.8rem;
  line-height:1.35;
  letter-spacing:0.01em;
  color:color-mix(in srgb, var(--muted) 88%, var(--ink));
}

.profile-hero .run-stats-inline:empty{
  display:none;
}

.profile-stack{
  display:flex;
  flex-direction:column;
  gap:0;
}

.profile-rail-section{
  margin:0;
}

.profile-stack > .profile-rail-section:not(:last-child){
  padding-bottom:13px;
  border-bottom:1px solid color-mix(in srgb, var(--line) 56%, transparent);
}

.profile-stack > .profile-rail-section + .profile-rail-section{
  padding-top:13px;
}

.profile-patterns-footer{
  margin-top:6px;
  padding-top:18px;
  border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.profile-patterns-footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  max-width:100%;
  box-sizing:border-box;
}

.profile-patterns-feedback{
  text-align:center;
  max-width:18rem;
  padding:0 4px;
  box-sizing:border-box;
}

.profile-patterns-feedback__title{
  margin:0 0 4px;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--ink);
  opacity:0.88;
}

.profile-patterns-feedback__body{
  margin:0 0 6px;
  font-size:0.8rem;
  line-height:1.45;
  color:var(--muted);
}

.profile-patterns-feedback__link{
  display:inline-block;
  font-size:0.75rem;
  line-height:1.35;
  color:color-mix(in srgb, var(--muted) 92%, var(--ink));
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:500;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.profile-patterns-feedback__link:hover{
  color:var(--muted);
}

.profile-patterns-clear-wrap{
  display:flex;
  justify-content:center;
}

.profile-patterns-clear-wrap--panel-end{
  flex-shrink:0;
  margin-top:auto;
  padding-top:24px;
}

.profile-patterns-footer__action{
  border:none;
  background:none;
  padding:6px 8px;
  margin:0;
  font:inherit;
  font-size:11px;
  line-height:1.35;
  letter-spacing:0.03em;
  color:color-mix(in srgb, var(--muted) 88%, transparent);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  opacity:0.68;
}

.profile-patterns-footer__action:hover{
  opacity:0.92;
  color:var(--muted);
}

/* Clear Saved Runs: faint full-viewport scrim + sheet floated slightly above center (scoped to #clearSavedRunsBackdrop) */
#clearSavedRunsBackdrop.editor-options-backdrop,
#clearSavedRunsBackdrop.dim-layer{
  background:rgba(18, 16, 12, 0.055);
}

html[data-theme="dark"] #clearSavedRunsBackdrop.editor-options-backdrop,
html[data-theme="dark"] #clearSavedRunsBackdrop.dim-layer{
  background:rgba(4, 3, 2, 0.22);
}

.clear-saved-runs-modal.settings-modal{
  width:min(100%, 356px);
  max-height:none;
  gap:8px;
  padding:12px 14px 11px;
  border-radius:18px;
  border-color:color-mix(in srgb, var(--line) 42%, transparent);
  box-shadow:
    0 8px 28px rgba(18, 14, 10, 0.07),
    0 1px 3px rgba(18, 14, 10, 0.04);
}

html[data-theme="dark"] .clear-saved-runs-modal.settings-modal{
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.22),
    0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Float sheet upward vs default centered overlay so it reads as modal layer, not inline card */
.editor-options-backdrop:not(.hidden) .clear-saved-runs-modal.settings-modal{
  transform:translateY(calc(-18px - 3vmin)) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .editor-options-backdrop:not(.hidden) .clear-saved-runs-modal.settings-modal{
    transform:translateY(-14px) scale(1);
  }
}

.clear-saved-runs-modal__title{
  margin:0;
  font-size:15px;
  font-weight:500;
  line-height:1.38;
  letter-spacing:-0.01em;
}

.clear-saved-runs-modal__support{
  margin:0;
  margin-top:-2px;
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
}

.clear-saved-runs-modal__actions{
  display:flex;
  width:100%;
  box-sizing:border-box;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-top:6px;
  padding-top:9px;
  border-top:1px solid color-mix(in srgb, var(--line) 28%, transparent);
}

.clear-saved-runs-modal__btn{
  appearance:none;
  border-radius:999px;
  padding:7px 13px;
  font:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}

.clear-saved-runs-modal__btn--cancel{
  border:1px solid transparent;
  background:transparent;
  color:color-mix(in srgb, var(--muted) 94%, var(--text));
  font-weight:400;
  padding-inline:10px;
  flex-shrink:0;
}

.clear-saved-runs-modal__btn--cancel:hover{
  color:var(--muted);
  background:rgba(0, 0, 0, 0.035);
}

html[data-theme="dark"] .clear-saved-runs-modal__btn--cancel:hover{
  background:rgba(255, 255, 255, 0.045);
}

.clear-saved-runs-modal__btn--danger{
  border:1px solid rgba(110, 52, 52, 0.22);
  background:rgba(130, 52, 52, 0.055);
  color:color-mix(in srgb, #6b2323 82%, var(--text));
  font-weight:500;
  flex-shrink:0;
}

html[data-theme="dark"] .clear-saved-runs-modal__btn--danger{
  border-color:rgba(215, 170, 170, 0.2);
  background:rgba(220, 140, 140, 0.065);
  color:color-mix(in srgb, #e8c8c8 88%, var(--text));
}

.clear-saved-runs-modal__btn--danger:hover{
  filter:brightness(0.985);
}

@media (max-width:980px){
  .clear-saved-runs-modal.settings-modal{
    width:min(100%, 304px);
    padding:11px 12px 10px;
    gap:7px;
  }

  .clear-saved-runs-modal__title{
    font-size:14.5px;
  }

  .clear-saved-runs-modal__support{
    font-size:12.5px;
  }

  .clear-saved-runs-modal__actions{
    margin-top:5px;
    padding-top:8px;
  }
}

@media (max-width:480px){
  .clear-saved-runs-modal.settings-modal{
    width:min(calc(100vw - 28px), 288px);
    padding:10px 11px 9px;
    gap:6px;
  }

  .clear-saved-runs-modal__actions{
    padding-top:7px;
  }
}

body.clear-saved-runs-confirm-open{
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}

body.clear-saved-runs-confirm-open .clear-saved-runs-modal{
  touch-action:auto;
}

#profileView:not(.hidden){
  display:flex;
  flex-direction:column;
  min-height:0;
  transition:opacity var(--motion-duration-panel) var(--motion-ease-out),
    transform var(--motion-duration-panel) var(--motion-ease-out);
  opacity:1;
  transform:translateY(0);
}

#profileView.profile-view--enter-from:not(.hidden){
  opacity:0;
  transform:translateY(var(--motion-shift-subtle));
  transition:none;
}

#profileView.profile-view--recede:not(.hidden){
  opacity:0;
  transform:translateY(var(--motion-shift-tight));
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  #profileView{
    transition:none !important;
  }
}

.profile-hero{
  background:rgba(0,0,0,0.035);
  border-radius:18px;
  padding:16px 16px 14px;
  border-bottom:0;
}

html[data-theme="dark"] .profile-hero{
  background:rgba(255,255,255,0.06);
}

.profile-patterns-utility{
  margin-top:0;
}

.profile-current-season{
  margin-top:0;
}

.current-season-card{
  border:1px solid color-mix(in srgb, var(--line) 34%, transparent);
  border-radius:16px;
  padding:15px 14px 14px;
  background:color-mix(in srgb, var(--panel) 98%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--line) 14%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--line) 10%, transparent);
}

.current-season-title{
  margin-bottom:2px;
}

.current-season-name{
  margin:0 0 2px;
  font-size:1.03rem;
  line-height:1.15;
  letter-spacing:0.06em;
  color:color-mix(in srgb, var(--ink) 92%, var(--muted));
}

.season-wheel{
  --wheel-size:186px;
  position:relative;
  width:var(--wheel-size);
  height:var(--wheel-size);
  margin:10px auto 13px;
  max-width:100%;
  border-radius:50%;
  overflow:hidden;
}

.season-wheel::before,
.season-wheel::after{
  content:none;
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.season-wheel__image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.current-season-marginalia{
  margin:3px 0 0;
  font-size:0.79rem;
  line-height:1.4;
  color:color-mix(in srgb, var(--muted) 88%, var(--ink));
}

.current-season-note{
  margin:6px 0 0;
  font-size:0.82rem;
  line-height:1.42;
  color:var(--muted);
}

.current-season-empty{
  margin:8px 0 0;
  font-size:0.88rem;
  line-height:1.46;
  color:var(--muted);
}

.current-season-canon-tile{
  display:block;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  line-height:0;
  border:1px solid color-mix(in srgb, var(--line) 28%, transparent);
  background:color-mix(in srgb, var(--panel) 98%, transparent);
  touch-action:pan-y;
}

.season-wheel-zoom-viewport{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:inherit;
  touch-action:none;
}

.season-wheel-zoom-content{
  width:100%;
  height:100%;
}

.season-wheel-zoom-content > .season-wheel-debug-svg,
.season-wheel-zoom-content > .current-season-canon-tile__image{
  display:block;
  width:100%;
  height:100%;
}

.season-wheel-zoom-content > .current-season-canon-tile__image{
  object-fit:contain;
}

.season-wheel-zoom-reset{
  position:absolute;
  top:8px;
  right:8px;
  width:24px;
  height:24px;
  border-radius:6px;
  border:1px solid color-mix(in srgb, var(--line) 50%, transparent);
  background:color-mix(in srgb, var(--panel) 94%, transparent);
  color:color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:0.78;
  cursor:pointer;
}

.season-wheel-zoom-reset:hover{
  opacity:0.98;
}

.season-wheel-zoom-reset.is-active{
  color:color-mix(in srgb, var(--ink) 92%, var(--muted));
}

.current-season-canon-tile__image{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
  touch-action:pan-y;
}

.season-wheel-debug-svg{
  --sw-bg:color-mix(in srgb, var(--panel) 97%, #000 3%);
  --sw-season-ring:color-mix(in srgb, #e4ac5f 72%, var(--line) 28%);
  --sw-hub-ring:color-mix(in srgb, #c9a173 68%, var(--line) 32%);
  --sw-spoke:color-mix(in srgb, #d9c5a4 68%, var(--line) 32%);
  --sw-spoke-active:color-mix(in srgb, #e8c998 74%, var(--line) 26%);
  --sw-grid-minor:color-mix(in srgb, #e8d2ad 74%, var(--line) 26%);
  --sw-grid-major:color-mix(in srgb, #f0c47b 78%, var(--line) 22%);
  --sw-minor-tick:color-mix(in srgb, #e8d2ad 74%, var(--line) 26%);
  --sw-major-tick:color-mix(in srgb, #f0c47b 78%, var(--line) 22%);
  --sw-medallion-label:color-mix(in srgb, #e7d9c4 82%, var(--ink) 18%);
  --sw-medallion-sub:color-mix(in srgb, #ccb89b 78%, var(--muted) 22%);
  pointer-events:auto;
}

html[data-theme="light"] .season-wheel-debug-svg{
  --sw-bg:color-mix(in srgb, var(--panel) 82%, #efe4d2 18%);
  --sw-season-ring:color-mix(in srgb, #9f6a2f 76%, var(--line) 24%);
  --sw-hub-ring:color-mix(in srgb, #885826 72%, var(--line) 28%);
  --sw-spoke:color-mix(in srgb, #8a5d34 54%, var(--line) 46%);
  --sw-spoke-active:color-mix(in srgb, #7a4f29 64%, var(--line) 36%);
  --sw-grid-minor:color-mix(in srgb, #9f7247 52%, var(--line) 48%);
  --sw-grid-major:color-mix(in srgb, #8d5d2f 60%, var(--line) 40%);
  --sw-minor-tick:color-mix(in srgb, #9d7348 60%, var(--line) 40%);
  --sw-major-tick:color-mix(in srgb, #8b5f30 68%, var(--line) 32%);
  --sw-medallion-label:color-mix(in srgb, #503620 90%, var(--ink) 10%);
  --sw-medallion-sub:color-mix(in srgb, #65462a 80%, var(--muted) 20%);
}

.season-wheel-run-tooltip{
  position:absolute;
  z-index:8;
  min-width:170px;
  max-width:220px;
  border:1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  line-height:1.35;
  color:var(--ink);
  background:color-mix(in srgb, var(--panel) 94%, #000 6%);
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity 110ms ease, transform 110ms ease;
}

.season-wheel-run-tooltip.is-visible{
  opacity:1;
  transform:translateY(0);
}

.season-wheel-run-tooltip__date{
  margin-bottom:5px;
  letter-spacing:0.03em;
  font-family:Georgia, "Times New Roman", serif;
  font-size:13px;
}

.season-wheel-run-tooltip__rule{
  width:1px;
  height:24px;
  margin:2px 0 8px;
  background:color-mix(in srgb, var(--line) 78%, transparent);
  opacity:0.9;
}

.season-wheel-mobile-legend{
  margin-top:10px;
  border:1px solid color-mix(in srgb, var(--line) 34%, transparent);
  border-radius:12px;
  background:color-mix(in srgb, var(--panel) 96%, #000 4%);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.season-wheel-mobile-legend > div{
  padding:8px 10px 9px;
  border-right:1px solid color-mix(in srgb, var(--line) 24%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--line) 24%, transparent);
}

.season-wheel-mobile-legend > div:nth-child(3n){
  border-right:none;
}

.season-wheel-mobile-legend > div:nth-child(n+4){
  border-bottom:none;
}

.season-wheel-mobile-legend span{
  display:block;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2px;
}

.season-wheel-mobile-legend strong{
  display:block;
  font-family:Georgia, "Times New Roman", serif;
  font-size:16px;
  line-height:1.15;
  color:var(--ink);
  font-weight:500;
}

.patterns-repeated-challenge-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:15px 15px 14px;
  background:var(--panel);
  border-bottom:1px solid color-mix(in srgb, var(--line) 58%, transparent);
}

.patterns-repeated-challenge__title{
  margin-bottom:8px;
}

.patterns-repeated-tool-note{
  margin:11px 0 9px;
  font-size:0.83rem;
  line-height:1.4;
  color:var(--muted);
}

.patterns-challenge-block{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.patterns-challenge-label{
  margin:0 0 8px;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--muted);
}

.patterns-challenge-hint{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.48;
  color:var(--muted);
}

/* Patterns-only: “Begin challenge” reads smaller than the global `.exercise-btn` default (same id/class only in repeated-words card). */
.patterns-challenge-block .exercise-btn{
  margin-top:14px;
  gap:5px;
  padding:5px 10px;
  font-size:12px;
  line-height:1.25;
  letter-spacing:0.01em;
  border-radius:10px;
  min-height:32px;
}

.patterns-challenge-block .exercise-dot{
  width:5px;
  height:5px;
  flex-shrink:0;
}

.patterns-repeated-empty{
  margin:2px 0 6px;
  font-size:15px;
  line-height:1.48;
  color:var(--muted);
}

.patterns-word-map{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.32rem 0.62rem;
  margin:2px 0 0;
  line-height:1.28;
  min-width:0;
  max-width:100%;
  width:100%;
  box-sizing:border-box;
  /* Reserve horizontal room for 1px outline + outline-offset (paints outside the border box). */
  padding-inline:3px;
}

.patterns-word-chip{
  margin:1px 2px;
  padding:1px 3px;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:0.94em;
  font-weight:500;
  letter-spacing:0;
  line-height:inherit;
  cursor:pointer;
  box-sizing:border-box;
  max-width:100%;
  overflow-wrap:anywhere;
  -webkit-tap-highlight-color:transparent;
  transition:color 120ms ease, outline-color 120ms ease;
}

.patterns-word-chip:hover{
  color:color-mix(in srgb, var(--ink) 88%, var(--muted));
}

.patterns-word-chip:focus{
  outline:none;
}

.patterns-word-chip:focus-visible{
  outline:1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  outline-offset:1px;
}

.patterns-word-chip.is-selected{
  outline:1px solid color-mix(in srgb, var(--color-challenge) 72%, var(--ink) 18%);
  outline-offset:1px;
  background:transparent;
}

html[data-theme="dark"] .patterns-word-chip.is-selected{
  outline-color:color-mix(in srgb, var(--color-challenge) 78%, transparent);
}

.opening-row{
  padding:10px 0;
  border-top:1px solid var(--line);
}

.opening-row:first-child{
  border-top:none;
  padding-top:0;
}

.opening-word{
  font-weight:600;
  color:var(--ink);
}

.opening-example{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
}

.opening-count{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.perspective-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.perspective-tile{
  background:rgba(0,0,0,0.035);
  border-radius:12px;
  padding:10px;
  text-align:center;
}

html[data-theme="dark"] .perspective-tile{
  background:rgba(255,255,255,0.06);
}

.perspective-label{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}

.perspective-value{
  font-size:18px;
  font-weight:600;
}

.punctuation-chart{
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:8px;
  align-items:end;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.punct-col{
  min-width:0;
  display:grid;
  grid-template-rows:132px 24px 14px;
  row-gap:6px;
  align-items:end;
  justify-items:center;
}

.punct-bar-wrap{
  position:relative;
  width:100%;
  height:132px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}

.punct-bar-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(to top, rgba(128,128,128,0.18) 2px, transparent 2px);
  background-size:100% 20%;
  background-repeat:repeat-y;
}

.punct-bar{
  position:relative;
  z-index:1;
  width:76%;
  max-width:24px;
  min-height:4px;
  max-height:100%;
  background-color:var(--ink);
  border-radius:8px 8px 0 0;
}

.punct-pattern-0{ background-image:repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,0.52) 6px 9px); }
.punct-pattern-1{ background-image:repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,0.52) 6px 9px); }
.punct-pattern-2{ background-image:repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,0.58) 5px 8px); }
.punct-pattern-3{ background-image:repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255,255,255,0.58) 5px 8px); }
.punct-pattern-4{ background-image:radial-gradient(rgba(255,255,255,0.72) 24%, transparent 26%); background-size:9px 9px; }
.punct-pattern-5{ background-image:linear-gradient(45deg, rgba(255,255,255,0.66) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.66) 50%, rgba(255,255,255,0.66) 75%, transparent 75%, transparent); background-size:10px 10px; }
.punct-pattern-6{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.65) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.26) 0 2px, transparent 2px 8px);
}
.punct-pattern-7{
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.70) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 7px);
}
.punct-pattern-8{ background-image:radial-gradient(rgba(255,255,255,0.72) 14%, transparent 16%); background-size:6px 6px; }
.punct-pattern-9{
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.60) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.30) 0 2px, transparent 2px 6px);
}

.punct-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:24px;
  font-size:22px;
}

.punct-value{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  height:14px;
  font-size:10px;
  color:var(--muted);
}

/*
 * Settings: sheet nested in dim backdrop (flex-centered overlay).
 * Stacking above main chrome and recent drawer; below metric explainer / zen.
 */
.editor-options-backdrop,
.dim-layer{
  position:fixed;
  inset:0;
  z-index:2200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  background:rgba(20, 18, 14, 0.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.32s ease-out, visibility 0s linear 0.32s;
}

html[data-theme="dark"] .editor-options-backdrop,
html[data-theme="dark"] .dim-layer{
  background:rgba(8, 7, 6, 0.42);
}

.editor-options-backdrop:not(.hidden),
.dim-layer:not(.hidden){
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 0.32s ease-out, visibility 0s linear 0s;
}

/* Override global `.hidden { display:none }` so overlay can fade with opacity */
.editor-options-backdrop.hidden,
.dim-layer.hidden{
  display:flex !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* editor options overlay sheet */
.editor-options-panel,
.settings-modal{
  position:relative;
  width:min(100%, 496px);
  max-width:100%;
  max-height:min(85vh, 760px);
  margin-inline:auto;
  flex:0 1 auto;

  padding:18px 17px 20px;
  border:1px solid rgba(60, 50, 35, 0.10);
  border-radius:24px;
  background:rgba(245, 239, 226, 0.78);
  backdrop-filter:blur(10px) saturate(0.95);
  -webkit-backdrop-filter:blur(10px) saturate(0.95);
  box-shadow:
    0 10px 26px rgba(28, 22, 14, 0.06),
    0 2px 8px rgba(28, 22, 14, 0.04);
  pointer-events:auto;

  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;

  overflow:hidden;
  scrollbar-gutter:stable both-edges;

  opacity:0;
  transform:translateY(10px) scale(0.988);
  transition:opacity 0.34s ease-out, transform 0.34s ease-out;
}

.editor-options-backdrop:not(.hidden) .editor-options-panel,
.editor-options-backdrop:not(.hidden) .settings-modal{
  opacity:1;
  transform:translateY(0) scale(1);
}

html[data-theme="dark"] .editor-options-panel,
html[data-theme="dark"] .settings-modal{
  background:rgba(30, 27, 22, 0.82);
  border-color:rgba(236, 231, 220, 0.09);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.10);
}

@media (prefers-reduced-motion: reduce){
  .editor-options-backdrop,
  .dim-layer,
  .editor-options-panel,
  .settings-modal{
    transition-duration:0.01ms !important;
  }
}

@media (min-width:768px){
  .editor-options-panel,
  .settings-modal{
    width:min(100%, 496px);
    padding:20px 19px 22px;
    gap:15px;
  }
}

.editor-options-section{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.editor-options-label{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 2px 2px;
}

.editor-options-label--block{
  display:block;
  width:100%;
  margin:0 0 6px 0;
  text-align:center;
  letter-spacing:.14em;
}

.editor-options-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  gap:14px;
  width:100%;
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding-right:2px;
}

body.settings-open{
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}

body.settings-open .editor-options-panel{
  touch-action:auto;
}

body.settings-open .editor-options-body{
  touch-action:pan-y;
}

.editor-options-modes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 18px;
  width:100%;
  align-items:start;
}

.editor-options-modes-col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-width:0;
}

.editor-options-typeline{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:2px 3px;
  align-items:end;
  justify-items:stretch;
  width:100%;
  min-width:0;
  padding:4px 0 6px;
  border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

@media (max-width:380px){
  .editor-options-modes-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
}

.editor-options-seg{
  margin:0;
  padding:6px 4px 7px;
  border:none;
  border-radius:0;
  background:transparent;
  color:color-mix(in srgb, var(--ink) 55%, var(--muted));
  font-family:inherit;
  font-size:15px;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
  position:relative;
  min-width:0;
  width:100%;
  text-align:center;
  transition:color 0.15s ease, opacity 0.15s ease;
}

.editor-options-seg:hover{
  color:color-mix(in srgb, var(--ink) 88%, var(--muted));
}

.editor-options-seg:focus-visible{
  outline:1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  outline-offset:2px;
}

.editor-options-shuffle-icon:focus-visible,
.editor-options-close:focus-visible{
  outline:1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  outline-offset:2px;
}

.editor-options-seg.active{
  color:var(--ink);
  font-weight:600;
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  border-radius:5px;
}

.editor-options-seg.active::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:-2px;
  height:2px;
  border-radius:1px;
  background:color-mix(in srgb, var(--ink) 72%, transparent);
}

html[data-theme="dark"] .editor-options-seg{
  color:color-mix(in srgb, var(--ink) 50%, var(--muted));
}

html[data-theme="dark"] .editor-options-seg.active::after{
  background:color-mix(in srgb, var(--ink) 55%, transparent);
}

.editor-options-banned-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:none;
}

.editor-options-banned-field{
  align-self:stretch;
  width:100%;
  max-width:100%;
  min-height:2.75rem;
  max-height:5.25rem;
  padding:8px 10px;
  margin:0;
  resize:none;
  overflow:auto;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background:color-mix(in srgb, var(--paper) 38%, transparent);
  color:var(--ink);
  font:inherit;
  font-size:13px;
  line-height:1.45;
  letter-spacing:0.01em;
  outline:none;
  box-shadow:none;
  -webkit-overflow-scrolling:touch;
}

html[data-theme="dark"] .editor-options-banned-field{
  background:color-mix(in srgb, var(--panel) 35%, transparent);
  border-color:color-mix(in srgb, var(--line) 70%, transparent);
}

.editor-options-banned-field::placeholder{
  color:var(--muted);
  opacity:0.75;
}

.editor-options-toprow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:nowrap;
  gap:10px 14px;
  width:100%;
  min-height:44px;
}

.editor-options-util-cluster{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}

.editor-options-util-tools{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.editor-options-shuffle-icon{
  flex:0 0 auto;
  width:40px;
  height:34px;
  margin:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:10px;
  background:transparent;
  color:color-mix(in srgb, var(--ink) 52%, var(--muted));
  cursor:pointer;
  box-shadow:none;
  transition:color 0.15s ease, background 0.15s ease;
}

.editor-options-shuffle-icon:hover{
  color:var(--ink);
  background:color-mix(in srgb, var(--ink) 5%, transparent);
}

.editor-options-shuffle-glyph{
  font-size:16px;
  line-height:1;
  display:block;
}

.editor-options-close{
  flex:0 0 auto;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:10px;
  background:transparent;
  color:color-mix(in srgb, var(--ink) 42%, var(--muted));
  font-size:17px;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
  transition:color 0.15s ease, background 0.15s ease;
}

.editor-options-close:hover{
  color:var(--ink);
  background:color-mix(in srgb, var(--ink) 5%, transparent);
}

.editor-options-utility{
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:0 0 auto;
}

.editor-options-panel button{
  max-width:100%;
}

/* Panel theme control: compact two-state indicator, not a capsule switch */
.editor-options-panel .theme-toggle--editorial{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  width:auto;
  height:auto;
  min-height:34px;
  padding:2px 0;
  margin:0;
  flex:0 0 auto;
  opacity:1;
  overflow:visible;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.editor-options-panel .theme-toggle--editorial .theme-half{
  position:relative;
  z-index:0;
  width:auto;
  min-width:2.1rem;
  height:auto;
  padding:6px 10px;
  font-size:12px;
  line-height:1;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:color-mix(in srgb, var(--ink) 42%, var(--muted));
  transition:
    border-color 0.26s ease,
    background 0.26s ease,
    color 0.26s ease,
    box-shadow 0.26s ease;
}

html[data-theme="light"] .editor-options-panel .theme-toggle--editorial .theme-sun{
  border-color:color-mix(in srgb, var(--ink) 38%, transparent);
  background:color-mix(in srgb, var(--ink) 7%, transparent);
  color:var(--ink);
}

html[data-theme="light"] .editor-options-panel .theme-toggle--editorial .theme-moon{
  border-color:transparent;
  background:transparent;
  color:color-mix(in srgb, var(--ink) 36%, var(--muted));
  box-shadow:none;
}

html[data-theme="dark"] .editor-options-panel .theme-toggle--editorial .theme-moon{
  border-color:color-mix(in srgb, var(--ink) 42%, transparent);
  background:color-mix(in srgb, var(--paper) 7%, transparent);
  color:var(--ink);
}

html[data-theme="dark"] .editor-options-panel .theme-toggle--editorial .theme-sun{
  border-color:transparent;
  background:transparent;
  color:color-mix(in srgb, var(--ink) 40%, var(--muted));
  box-shadow:none;
}

.editor-options-panel .theme-toggle--editorial:focus-visible{
  outline:1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  outline-offset:3px;
  border-radius:8px;
}

/* hide legacy banned words editor */

#metaEditorRow{
  display:none !important;
}

/* enter submit icon */

.enter-submit-btn{
  position:absolute;
  right:16px;
  bottom:11px;
  background:none;
  border:none;
  padding:0;
  margin:0;
  z-index:7;
  cursor:pointer;
  opacity:0.65;
  transition:opacity 0.15s ease, transform 0.15s ease;
}

.enter-submit-btn svg{
  width:26px;
  height:26px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
  transform:translateY(-1px);
}

.enter-submit-btn:hover{
  opacity:1;
  transform:translateY(-1px);
}

.enter-submit-btn.hidden{
  display:none !important;
}

@media (min-width:981px){
  .app{
    max-width:1320px;
    padding:22px 22px 34px;
  }

  /* One parent grid (atomic breakpoint unchanged). Header spans both columns so its bottom border is the
     only “upper” horizontal rule — full width, with Patterns mounted on it. No vertical rail border. */
  .app-write-surface{
    display:grid;
    /* Slightly wider Patterns rail so outlined word chips don’t clip against the column edge. */
    grid-template-columns:minmax(0, 1fr) minmax(312px, min(420px, 40vw));
    column-gap:36px;
    align-items:start;
  }

  .app-write-surface > .header{
    --brand-stack-gap:clamp(4px, 0.3vw, 7px);
    --brand-to-divider-gap:clamp(10px, 0.7vw, 14px);
    grid-column:1 / -1;
    grid-row:1;
    display:grid;
    grid-template-columns:subgrid;
    grid-template-rows:auto;
    grid-template-areas:"theme theme";
    /* Breathing room between wordmark column and Patterns tab — column-gap:0 let the tab hug the seam and clip. */
    column-gap:clamp(12px, 2.2vw, 22px);
    row-gap:0;
    align-items:start;
    overflow-x:visible;
    border-bottom:1px solid var(--ink);
    margin-bottom:17px;
    padding-bottom:var(--brand-to-divider-gap);
  }

  /* Patterns + wordmark row participates in the same two-column track as the write surface so the tab
     can sit on the true right edge of the header (column 2), not the inner “context” max-width. */
  .app-write-surface > .header .write-field-context{
    display:contents;
  }

  .app-write-surface > .header .write-field-context .header-brand{
    grid-column:1;
    grid-row:1;
    min-width:0;
    /* Keep long wordmark bands from crowding the Patterns tab in the adjacent subgrid track. */
    padding-inline-end:min(12px, 2vw);
  }

  .app-write-surface > .header .write-field-context .style-tab{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:end;
    margin-inline-start:2px;
  }

  /* Lower deck: full-width 2px rule on `#writeView` replaces per-column `.prompt-card` top border.
     Spacing below that line matches mobile `.prompt-card` (8px pad only) — no extra `#writeView` pad. */
  #writeView{
    grid-column:1 / -1;
    grid-row:2;
    display:grid;
    grid-template-columns:subgrid;
    min-width:0;
    min-height:0;
    border-top:2px solid var(--ink);
    padding-top:0;
    /* Keep the writing deck inside the viewport band so expanded rail rows cannot increase page height. */
    max-height:min(
      calc(100svh - 56px - clamp(100px, 15vh, 180px)),
      calc(100dvh - 56px - clamp(100px, 15vh, 180px)),
      calc(100vh - 56px - clamp(100px, 15vh, 180px))
    );
    overflow:hidden;
  }

  #writeView .prompt-card{
    border-top:none;
    padding-top:8px;
  }

  #writeView > .layout{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:subgrid;
    gap:0;
    align-items:start;
    min-height:0;
    max-height:100%;
    overflow:hidden;
  }

  .main-column{
    grid-column:1;
    max-width:920px;
    min-height:0;
    max-height:100%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Single inset below the write-surface deck line for rail + patterns (matches expanded rail rhythm). */
  #writeView .side-column{
    display:flex;
    flex-direction:column;
    grid-column:2;
    position:sticky;
    align-self:start;
    top:var(--review-runs-rail-sticky-top);
    /* Viewport band cap; expanded mode also gets `--review-runs-rail-expanded-max-h` from JS (editor-aligned). */
    max-height:min(
      calc(100svh - var(--review-runs-rail-desktop-viewport-floor)),
      calc(100dvh - var(--review-runs-rail-desktop-viewport-floor)),
      calc(100vh - var(--review-runs-rail-desktop-viewport-floor))
    );
    min-height:0;
    overflow:hidden;
    scrollbar-gutter:stable;
    margin:0;
    padding:var(--review-runs-rail-heading-inset) 8px 0 18px;
    box-sizing:border-box;
  }

  body.recent-rail-expanded #writeView .side-column{
    z-index:3060;
    /* Tighter of viewport band vs JS `--review-runs-rail-expanded-max-h` (set before `recent-rail-expanded` toggles on). */
    max-height:min(
      var(--review-runs-rail-expanded-max-h),
      calc(100svh - var(--review-runs-rail-desktop-viewport-floor)),
      calc(100dvh - var(--review-runs-rail-desktop-viewport-floor)),
      calc(100vh - var(--review-runs-rail-desktop-viewport-floor))
    );
    transition:none;
  }

  #writeView .side-column:has(.recent-entry--active),
  body.recent-rail-expanded #writeView .side-column{
    align-self:stretch;
  }

  #writeView .side-column.rail-mode-patterns{
    min-height:0;
    /*
     * Base `#writeView .side-column` sets `overflow: hidden`, which clips `.patterns-word-chip` outlines.
     * Split overflow: keep vertical clipping to the rail band, allow horizontal paint/scroll inside the column.
     * (`overflow-x: visible` with `overflow-y: hidden` computes to `auto` on X in browsers — be explicit.)
     */
    overflow-x:auto;
    overflow-y:hidden;
  }

  #writeView .side-column.rail-mode-patterns #profileView{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    overflow-x:visible;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--muted) 38%, transparent) transparent;
    border:0;
    border-radius:0;
    background:transparent;
    padding:0;
    box-shadow:none;
  }

  #writeView .side-column.rail-mode-patterns #profileView::-webkit-scrollbar{
    width:5px;
  }

  #writeView .side-column.rail-mode-patterns #profileView::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--muted) 42%, transparent);
    border-radius:999px;
  }

  #writeView .side-column.rail-mode-patterns #profileView::-webkit-scrollbar-track{
    background:transparent;
  }

  .desktop-rail-default{
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:20px;
  }

  .desktop-rail-panel{
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:0;
    border-radius:0;
    background:transparent;
    padding:0;
    margin:0;
  }

  /* In-place rail expansion: invisible hit-layer for outside-dismiss only — no gray dim, no scroll lock. */
  /* Allow the write column to scroll when it is taller than the viewport; rail height is capped separately. */
  body.recent-rail-expanded{
    overflow:visible;
  }

  body.recent-rail-expanded .recent-rail-expanded-backdrop{
    background:transparent;
    opacity:0;
    pointer-events:auto;
    transition:none;
  }

  .desktop-rail-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border-bottom:0;
    min-height:var(--review-runs-rail-head-min-height);
    /* Top inset lives on `#writeView .side-column`; keep head flush inside the rail chrome. */
    padding:0 4px 0 2px;
    margin:0 0 10px;
    box-sizing:border-box;
  }

  body.recent-rail-expanded .desktop-rail-panel-head{
    padding-right:10px;
  }

  .desktop-rail-panel-title{
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* Layout only — colors/opacity live in the shared `.recent-rail-expanded-close` rule with `.recent-drawer-close`. */
  .recent-rail-expanded-close{
    flex:0 0 auto;
    align-self:center;
    margin:0 2px 0 0;
  }

  /* Scroll clip: non-scrolling layer for bottom fade; list scrolls inside (expanded cue stays pinned). */
  #writeView .recent-rail-list-clip{
    flex:1 1 auto;
    min-height:0;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  /* Scroll only the list — column height stays capped so the page does not grow. */
  #writeView .recent-rail-list-clip .recent-rail-list{
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    box-sizing:border-box;
    /* Left optical align + right gutter so run text does not sit under the scrollbar. */
    padding:0 8px 0 2px;
  }

  body.recent-rail-expanded #writeView .recent-rail-list-clip .recent-rail-list{
    padding-bottom:10px;
    padding-right:12px;
  }

  /* Expanded: slightly tighter run stack so first viewport shows a bit more without raising the rail cap much. */
  body.recent-rail-expanded #writeView .recent-rail-list .recent-run-detail:not(.recent-run-detail--compact){
    gap:8px;
  }

  /* Expanded: fixed “lip” on the clip — list scrolls underneath; shadow sits on the lip, not washing the rows. */
  body.recent-rail-expanded #writeView .recent-rail-list-clip::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:clamp(18px, 2.8vmin, 28px);
    pointer-events:none;
    z-index:1;
    background:linear-gradient(
      to bottom,
      color-mix(in srgb, var(--paper) 0%, transparent) 0%,
      color-mix(in srgb, var(--paper) 22%, transparent) 55%,
      color-mix(in srgb, var(--paper) 78%, transparent) 100%
    );
    border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow:0 2px 5px -3px color-mix(in srgb, var(--ink) 5%, transparent);
  }

  #writeView .desktop-rail-panel .recent-runs-more-footer{
    flex-shrink:0;
  }

  #recentWritingTrigger{
    display:none;
  }

  .side-column.rail-mode-patterns #profileView .profile-patterns-utility{
    margin-top:0;
  }

  .side-column.rail-mode-patterns #profileView .profile-current-season{
    margin-top:0;
  }

  .side-column.rail-mode-patterns #profileView .profile-stack{
    gap:0;
    /* Match first-line vertical rhythm of `.desktop-rail-panel-head` (title vertically centered in 40px row). */
    padding-top:max(0px, calc((var(--review-runs-rail-head-min-height) - 1lh) / 2));
  }

  .side-column.rail-mode-patterns #profileView .profile-hero{
    border-radius:0;
    padding:0;
    background:transparent;
    border-bottom:0;
  }

  .side-column.rail-mode-patterns #profileView .profile-hero-copy .history-item:first-child{
    font-size:18px;
  }

  .side-column.rail-mode-patterns #profileView .patterns-repeated-challenge-card{
    border:0;
    border-radius:0;
    background:transparent;
    padding:0;
  }

  .side-column.rail-mode-patterns #profileView .current-season-card{
    border:0;
    border-radius:0;
    background:transparent;
    padding:0;
  }

  .side-column.rail-mode-patterns #profileView .card-section-title{
    margin-bottom:8px;
  }

  .side-column.rail-mode-patterns #profileView .profile-hero-copy{
    margin-bottom:14px;
  }
}

@media (min-width:861px){
  .season-wheel{
    --wheel-size:220px;
    margin:14px auto 12px;
  }
}

/* responsive */

@media (max-width:860px){
  .zen-body{
    grid-template-columns:1fr;
  }

  .zen-body{
    grid-template-rows:minmax(320px,1fr) auto;
  }

  .zen-board-wrap{
    border-right:0;
    border-bottom:2px solid #3a3a3a;
  }

  .zen-sidebar{
    width:100%;
  }

  .zen-tool-stack{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }

  .zen-tool-btn,
  .zen-tool-btn:last-child{
    border:1px solid #8a8276;
  }

  .zen-bottombar{
    flex-wrap:wrap;
    gap:8px;
  }

  .zen-bottom-cluster{
    border-right:0;
    padding:0;
  }

  .zen-minimap{
    margin-left:0;
  }
}

@media (max-width:720px){
  .app-shell{
    display:flex;
    flex-direction:column;
    height:var(--vvh, 100dvh);
    max-height:var(--vvh, 100dvh);
    min-height:var(--vvh, 100dvh);
    overflow:hidden;
  }

  body{
    overflow:hidden;
    overscroll-behavior:none;
    --wayword-editor-pad-inline:18px;
    --wayword-editor-pad-block:16px;
  }

  #appView.app{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    width:100%;
    max-width:100%;
    overflow:hidden;
    padding-top:var(--app-safe-top);
    padding-bottom:var(--app-safe-bottom);
    padding-left:max(14px, env(safe-area-inset-left, 0px));
    padding-right:max(14px, env(safe-area-inset-right, 0px));
  }

  #profileView{
    flex:1 1 auto;
    min-height:0;
  }

  .app-write-surface{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
  }

  #writeView{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  .header-actions{
    position:relative;
    z-index:10;
    justify-self:stretch;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }

  .editor-shell .highlight-layer,
  .editor-shell .editor-input{
    /* Bottom inset clears in-shell chrome (gear + word progress + “words” caption). */
    padding:16px var(--wayword-editor-pad-inline) 58px var(--wayword-editor-pad-inline);
    font:17px/1.52 Georgia,"Times New Roman",serif;
    min-height:100%;
  }

  .editor-shell .editor-permission-phrase{
    font:17px/1.52 Georgia,"Times New Roman",serif;
    font-style:italic;
  }

  .editor-shell .editor-input{
    height:auto;
  }

  .editor-shell .editor-input-scrollport{
    scroll-padding-bottom:58px;
  }

  .style-tab{
    position:relative;
    z-index:10;
  }

  .account-corner-btn{
    top:10px;
    right:var(--right-rail-offset);
    z-index:14;
  }

  .header-theme{
    justify-self:stretch;
    display:flex;
    justify-content:flex-end;
  }

  body:not(.focus-mode) .editor-shell{
    flex:1 1 auto;
    min-height:clamp(200px, 42dvh, 380px);
    min-height:clamp(200px, 42vh, 380px);
    height:auto;
    max-height:min(420px, calc(var(--vvh, 100dvh) - 200px));
  }

  body:not(.focus-mode).keyboard-open .editor-shell{
    min-height:clamp(160px, calc(var(--vvh, 50vh) * 0.44), 340px);
    max-height:calc(var(--vvh, 100dvh) - 140px);
  }

  .editor-input-scroll-inner{
    min-height:100%;
  }

  .editor-bottom-chrome{
    left:8px;
    right:8px;
    bottom:14px;
    column-gap:8px;
    grid-template-columns:minmax(40px, 48px) minmax(0, 1fr) minmax(40px, 48px);
  }

  .editor-bottom-chrome-center .editor-progress{
    width:min(200px, 72%);
    max-width:100%;
  }

  .editor-bottom-chrome-left{
    padding:0 0 0 4px;
    margin:0;
  }

  .perspective-grid{
    grid-template-columns:1fr;
  }

  .editor-options-panel{
    width:min(100%, 496px);
    max-height:min(88vh, 760px);
    padding:16px 15px 18px;
    gap:13px;
  }

  body.settings-open .editor-options-backdrop{
    top:var(--vv-offset-top, 0px);
    bottom:auto;
    height:var(--vvh, 100dvh);
    max-height:var(--vvh, 100dvh);
  }

  body.settings-open .editor-options-panel{
    max-height:calc(var(--vvh, 100dvh) - 32px);
  }

  .editor-options-body{
    gap:13px;
  }

  .editor-options-modes-grid{
    gap:10px 14px;
  }

  .editor-options-toprow{
    align-items:center;
    gap:8px 10px;
    min-height:42px;
  }

  .editor-options-section{
    gap:5px;
  }

  .editor-options-label{
    font-size:9px;
    margin:0 0 3px 2px;
    letter-spacing:.1em;
  }

  .editor-options-panel .theme-toggle--editorial{
    min-height:32px;
    padding:1px 0;
  }

  .editor-options-panel .theme-toggle--editorial .theme-half{
    min-width:1.95rem;
    padding:5px 9px;
    font-size:11px;
  }

  .editor-options-shuffle-icon{
    width:38px;
    height:32px;
  }

  .editor-options-shuffle-glyph{
    font-size:15px;
  }

  .editor-options-close{
    width:38px;
    height:38px;
    font-size:16px;
  }

  .editor-options-seg{
    font-size:14px;
    padding:4px 10px 5px;
  }

  .editor-options-banned-field{
    font-size:13px;
    max-height:4.75rem;
  }

  .legend-row{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    gap:6px;
  }

  .legend-pill{
    flex:0 0 auto;
    min-width:0;
    justify-content:center;
    padding:7px 8px;
    font-size:11px;
    gap:5px;
  }

  .legend-text,
  .legend-count{
    white-space:nowrap;
  }

  .layout{
    grid-template-columns:1fr;
    gap:10px;
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    overflow-x:hidden;
    overflow-y:hidden;
  }

  .main-column{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    gap:8px;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  .header{
    --header-divider-pad:10px;
    margin-bottom:10px;
    padding-bottom:var(--header-divider-pad);
    gap:10px;
  }

  .prompt-card{
    --prompt-row-inset-y:6px;
    --prompt-control-grid-size:30px;
    --prompt-control-reroll-size:30px;
    --prompt-control-gap:2px;
    --prompt-text-size:clamp(18px, 5vw, 20px);
    --prompt-text-leading:1.16;
    margin-bottom:6px;
    padding:6px 0 8px;
  }

  .prompt-text{
    margin:0;
  }

  .editor-pill-band{
    margin-top:4px;
  }

  .below-editor-stack{
    margin-top:2px;
    gap:2px;
  }

  body.keyboard-open .app{
    padding-top:var(--app-safe-top-dense);
    padding-bottom:max(4px, env(safe-area-inset-bottom, 0px));
  }

  body.keyboard-open .header{
    --header-divider-pad:6px;
    margin-bottom:6px;
    padding-bottom:var(--header-divider-pad);
    gap:6px;
  }

  body.keyboard-open .subhed{
    display:none;
  }

  body.keyboard-open #writeView > .layout{
    gap:6px;
  }

  body.keyboard-open .main-column{
    gap:5px;
  }

  body.keyboard-open .prompt-card{
    margin-bottom:6px;
    padding:6px 0 8px;
  }

  body.keyboard-open .prompt-text{
    margin:0;
  }

  body.keyboard-open #recentWritingTrigger{
    display:none;
  }

  body.keyboard-open .editor-pill-band{
    margin-top:2px;
  }

  body.keyboard-open .legend-pill{
    padding:5px 7px;
    font-size:10px;
  }

  body .app{
    transition:padding-top var(--motion-duration-base) var(--motion-ease-out),
      padding-bottom var(--motion-duration-base) var(--motion-ease-out);
  }

  #writeView > .layout{
    transition:gap var(--motion-duration-base) var(--motion-ease-out);
  }

  .main-column{
    transition:gap var(--motion-duration-base) var(--motion-ease-out),
      padding-bottom var(--motion-duration-base) var(--motion-ease-out);
  }

  @media (prefers-reduced-motion:reduce){
    body .app,
    #writeView > .layout,
    .main-column{
      transition:none;
    }
  }

  /* Layout snap when leaving focus mode: suppress padding/gap/shell transitions until viewport sync completes. */
  html.focus-mode-layout-snap body .app,
  html.focus-mode-layout-snap #writeView > .layout,
  html.focus-mode-layout-snap .main-column,
  html.focus-mode-layout-snap .header,
  html.focus-mode-layout-snap .editor-shell{
    transition:none !important;
  }

  body.focus-mode{
    overflow:hidden;
  }

  body.focus-mode .app-shell,
  body.focus-mode #appView,
  body.focus-mode .app-write-surface,
  body.focus-mode #writeView{
    height:var(--vvh, 100vh);
    min-height:var(--vvh, 100vh);
  }

  body.focus-mode .app{
    height:100%;
    min-height:0;
    overflow:hidden;
    padding-top:max(10px, var(--app-safe-top-dense));
    padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
  }

  body.focus-mode.keyboard-open .app{
    padding-top:max(6px, env(safe-area-inset-top, 0px));
    padding-bottom:max(4px, env(safe-area-inset-bottom, 0px));
  }

  body.focus-mode.keyboard-open #writeView > .layout{
    gap:5px;
  }

  body.focus-mode.keyboard-open .main-column{
    gap:6px;
  }

  body.focus-mode.keyboard-open .prompt-card{
    margin-bottom:6px;
    padding:6px 0 8px;
  }

  body.focus-mode.keyboard-open .below-editor-stack{
    gap:3px;
    padding-bottom:max(4px, env(safe-area-inset-bottom, 0px));
  }

  body.focus-mode.keyboard-open .editor-shell .highlight-layer,
  body.focus-mode.keyboard-open .editor-shell .editor-input{
    padding-top:14px;
    padding-bottom:50px;
  }

  body.focus-mode.keyboard-open .editor-shell .editor-input-scrollport{
    scroll-padding-bottom:50px;
  }

  body.focus-mode #writeView{
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  /* Mobile field: collapsed chrome is one instant layout snap (no animated height); inner context fades in when expanded. */
  body.focus-mode:not(.expanded-field) .header{
    height:0;
    min-height:0;
    margin:0;
    padding:0;
    border:none;
    overflow:visible;
    pointer-events:auto;
  }

  body.focus-mode:not(.expanded-field) .header-brand,
  body.focus-mode:not(.expanded-field) .style-tab,
  body.focus-mode .account-corner-btn{
    display:none !important;
  }

  body.focus-mode.expanded-field .header{
    --header-divider-pad:10px;
    margin-bottom:10px;
    padding-bottom:var(--header-divider-pad);
    border-bottom:1px solid var(--ink);
    overflow:visible;
    pointer-events:auto;
  }

  body.focus-mode:not(.expanded-field) .write-field-context{
    opacity:0;
    transform:translateY(calc(-1 * var(--motion-shift-subtle)));
    animation:none;
  }

  body.focus-mode.expanded-field .write-field-context{
    animation:write-field-context-emerge var(--motion-duration-base) var(--motion-ease-out) both;
  }

  @keyframes write-field-context-emerge{
    from{
      opacity:0;
      transform:translateY(calc(-1 * var(--motion-shift-subtle)));
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  @media (prefers-reduced-motion:reduce){
    body.focus-mode.expanded-field .write-field-context{
      animation:none;
      opacity:1;
      transform:none;
    }

    body.focus-mode:not(.expanded-field) .write-field-context{
      opacity:0;
      transform:none;
    }
  }

  body.focus-mode #writeView > .layout{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    gap:8px;
  }

  body.focus-mode .main-column{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    gap:12px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }

  body.focus-mode .prompt-card{
    margin-bottom:6px;
    padding:6px 0 8px;
  }

  body.focus-mode .editor-shell{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    max-height:none;
  }

  body.focus-mode.keyboard-open .editor-shell{
    max-height:min(72dvh, calc(var(--vvh, 100dvh) - 104px));
  }

  body.focus-mode .editor-input-scroll-inner{
    min-height:100%;
  }

  body.focus-mode .editor-shell .highlight-layer,
  body.focus-mode .editor-shell .editor-input{
    min-height:100%;
  }

  body.focus-mode .editor-shell .editor-input{
    height:auto;
  }

  body.focus-mode .below-editor-stack{
    flex:0 0 auto;
    margin-top:0;
    gap:6px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
  }

  body.focus-mode:not(.expanded-field) #recentWritingTrigger{
    display:none;
  }

  body.focus-mode .result-headline{
    font-size:18px;
    margin-bottom:6px;
  }

  body.focus-mode .result-support{
    padding:8px 10px;
    gap:8px 12px;
  }

  body.focus-mode .result-support > div{
    font-size:12px;
  }

  body.focus-mode .result-direction{
    margin-top:6px;
    padding-top:6px;
  }

  body.focus-mode:not(.expanded-field) .side-column{
    display:none;
  }

  body.focus-mode .editor-options-panel{
    top:8px;
    left:8px;
    right:8px;
    transform:none;
    width:auto;
    max-height:calc(var(--vvh, 100vh) - 16px);
    overflow:hidden;
  }

  body.focus-mode.settings-open .editor-options-panel{
    top:0;
    max-height:calc(var(--vvh, 100dvh) - 32px);
  }
}

/*
 * Short portrait phones (e.g. ~393×852): header + prompt + editor floor + Mirror can exceed the
 * flat `calc(var(--vvh) - 200px)` shell budget after focus exit, reopening the document scroll root.
 * Pin html overflow, clip `#writeView` to the flex column, and tie editor max-height to a share of
 * the live viewport so `.main-column` stays the vertical scroll owner.
 */
@media (max-width:720px) and (max-height:900px){
  html{
    overflow-y:hidden;
  }

  .app-write-surface{
    max-height:100%;
  }

  #writeView{
    max-height:100%;
    overflow:hidden;
  }

  body:not(.focus-mode) .editor-shell{
    min-height:clamp(160px, 36dvh, 300px);
    min-height:clamp(160px, 36vh, 300px);
    max-height:min(
      420px,
      calc(var(--vvh, 100dvh) - min(520px, max(248px, calc(var(--vvh, 100dvh) * 0.55))))
    );
  }

  body:not(.focus-mode).keyboard-open .editor-shell{
    min-height:clamp(140px, calc(var(--vvh, 50vh) * 0.37), 280px);
    max-height:min(
      380px,
      calc(var(--vvh, 100dvh) - min(480px, max(200px, calc(var(--vvh, 100dvh) * 0.5))))
    );
  }
}

@media (max-width:720px) and (max-height:760px){
  body.focus-mode{
    --wayword-editor-pad-inline:14px;
    --wayword-editor-pad-block:12px;
  }

  body.focus-mode .app{
    padding-top:8px;
    padding-bottom:8px;
  }

  body.focus-mode .wordmark{
    margin:0;
    font-size:34px;
  }

  body.focus-mode .subhed{
    font-size:11px;
  }

  body.focus-mode .prompt-card{
    margin-bottom:6px;
    padding:6px 0 8px;
  }

  body.focus-mode .editor-shell{
    min-height:160px;
  }

  body.focus-mode .editor-shell .highlight-layer,
  body.focus-mode .editor-shell .editor-input{
    padding:12px var(--wayword-editor-pad-inline) 40px var(--wayword-editor-pad-inline);
    font:16px/1.50 Georgia,"Times New Roman",serif;
  }

  body.focus-mode .editor-shell .editor-permission-phrase{
    font:16px/1.50 Georgia,"Times New Roman",serif;
    font-style:italic;
  }

  body.focus-mode .editor-shell .editor-input-scrollport{
    scroll-padding-bottom:40px;
  }

  body.focus-mode .editor-bottom-chrome{
    bottom:10px;
    left:8px;
    right:8px;
    column-gap:8px;
    grid-template-columns:minmax(40px, 48px) minmax(0, 1fr) minmax(40px, 48px);
  }

  body.focus-mode .editor-bottom-chrome-center .editor-progress{
    width:min(200px, 44%);
    max-width:100%;
  }

  body.focus-mode .below-editor-stack{
    margin-top:0;
    gap:4px;
  }

  body.focus-mode .legend-pill{
    padding:5px 6px;
    font-size:10px;
    gap:4px;
  }

  body.focus-mode .legend-swatch{
    width:7px;
    height:7px;
  }

  body.focus-mode .result-headline{
    font-size:16px;
    margin-bottom:4px;
  }

  body.focus-mode .result-support{
    padding:6px 8px;
    gap:6px 10px;
  }

  body.focus-mode .result-support > div{
    font-size:11px;
  }

  body.focus-mode .result-direction{
    margin-top:4px;
    padding-top:4px;
    font-size:12px;
    line-height:1.35;
  }
}

@media (max-width:720px) and (max-height:680px){
  body.focus-mode{
    --wayword-editor-pad-inline:12px;
    --wayword-editor-pad-block:10px;
  }

  body.focus-mode .app{
    padding-top:6px;
    padding-bottom:6px;
  }

  body.focus-mode .wordmark{
    font-size:30px;
  }

  body.focus-mode .subhed{
    font-size:10px;
  }

  body.focus-mode .editor-shell{
    min-height:130px;
  }

  body.focus-mode .editor-shell .highlight-layer,
  body.focus-mode .editor-shell .editor-input{
    padding:10px var(--wayword-editor-pad-inline) 34px var(--wayword-editor-pad-inline);
    font:15px/1.48 Georgia,"Times New Roman",serif;
  }

  body.focus-mode .editor-shell .editor-permission-phrase{
    font:15px/1.48 Georgia,"Times New Roman",serif;
    font-style:italic;
  }

  body.focus-mode .editor-shell .editor-input-scrollport{
    scroll-padding-bottom:34px;
  }

  body.focus-mode .below-editor-stack{
    margin-top:2px;
    gap:3px;
  }

  body.focus-mode .result-headline{
    font-size:14px;
    margin-bottom:3px;
  }

  body.focus-mode .result-support{
    padding:5px 7px;
    gap:5px 8px;
  }

  body.focus-mode .result-support > div{
    font-size:10px;
  }

  body.focus-mode .result-direction{
    margin-top:3px;
    padding-top:3px;
    font-size:11px;
  }
}

@media (max-width:430px){
  .prompt-card{
    --prompt-text-size:clamp(18px, 5.1vw, 20px);
  }

  .editor-options-panel{
    width:min(100%, 496px);
    padding:14px 13px 16px;
    gap:12px;
  }

  .editor-options-label{
    font-size:8px;
    margin:0 0 3px 2px;
  }

  .editor-options-panel .theme-toggle--editorial{
    min-height:30px;
  }

  .editor-options-panel .theme-toggle--editorial .theme-half{
    min-width:1.85rem;
    padding:5px 8px;
    font-size:10px;
  }

  .editor-options-seg{
    font-size:13px;
    padding:4px 8px 5px;
  }

  .editor-options-shuffle-icon{
    width:36px;
    height:30px;
  }

  .editor-options-close{
    width:36px;
    height:36px;
    font-size:15px;
  }

  .editor-options-banned-field{
    font-size:12px;
  }

  .legend-row{
    gap:4px;
  }

  .legend-pill{
    padding:6px 6px;
    font-size:10px;
    gap:4px;
  }

  .legend-swatch{
    width:7px;
    height:7px;
  }
}

#reflection-line{
  display:block;
  font-size:14px;
  line-height:1.55;
  letter-spacing:0.012em;
  color:var(--muted);
  color:color-mix(in srgb, var(--ink) 32%, var(--muted));
  margin:6px 0 0;
  max-height:6rem;
  opacity:1;
  transform:translate3d(0, 0, 0);
  overflow:hidden;
  pointer-events:auto;
  visibility:visible;
  transition:opacity 0.16s cubic-bezier(0.25, 0.46, 0.45, 1),
    transform 0.16s cubic-bezier(0.25, 0.46, 0.45, 1),
    max-height 0.16s cubic-bezier(0.25, 0.46, 0.45, 1),
    margin 0.15s cubic-bezier(0.25, 0.46, 0.45, 1),
    visibility 0s linear;
}

#reflection-line.reflection-line--hidden{
  max-height:0;
  min-height:0;
  margin:0;
  padding:0;
  line-height:0;
  opacity:0;
  transform:translate3d(0, 4px, 0);
  pointer-events:none;
  visibility:hidden;
  transition:opacity 0.14s cubic-bezier(0.25, 0.46, 0.45, 1),
    transform 0.14s cubic-bezier(0.25, 0.46, 0.45, 1),
    max-height 0.14s cubic-bezier(0.25, 0.46, 0.45, 1),
    margin 0.12s cubic-bezier(0.25, 0.46, 0.45, 1),
    visibility 0s linear 0.12s;
}

@media (prefers-reduced-motion:reduce){
  #reflection-line,
  #reflection-line.reflection-line--hidden{
    transition-duration:0.01ms !important;
    transition-delay:0s !important;
  }

  #reflection-line.reflection-line--hidden{
    transform:none;
  }

  body.focus-mode .editor-post-run-line,
  body.focus-mode .editor-post-run-line:not(.editor-post-run-line--empty){
    transition-duration:0.01ms !important;
    transform:none !important;
  }
}

[data-metric-explainer]{
  cursor:help;
}

.metric-explainer{
  position:fixed;
  z-index:3200;
  max-width:14rem;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 4px 18px rgba(0,0,0,0.08);
  font:inherit;
  text-align:left;
  line-height:1.45;
}

.metric-explainer[data-metric-category="filler"]{
  border-color:color-mix(in srgb, var(--color-filler) 72%, var(--line));
}

.metric-explainer[data-metric-category="repetition"]{
  border-color:color-mix(in srgb, var(--color-repetition) 72%, var(--line));
}

.metric-explainer[data-metric-category="openings"]{
  border-color:color-mix(in srgb, var(--color-openings) 72%, var(--line));
}

.metric-explainer[data-metric-category="filler"] .metric-explainer-title{
  color:var(--color-filler);
}

.metric-explainer[data-metric-category="repetition"] .metric-explainer-title{
  color:var(--color-repetition);
}

.metric-explainer[data-metric-category="openings"] .metric-explainer-title{
  color:var(--color-openings);
}

html[data-theme="dark"] .metric-explainer{
  box-shadow:0 6px 22px rgba(0,0,0,0.38);
}

.metric-explainer-title{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--muted);
}

.metric-explainer-body{
  margin:7px 0 0;
  font-size:12px;
  font-weight:400;
  color:var(--ink);
  opacity:0.92;
}

.metric-explainer-example{
  margin:6px 0 0;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  opacity:0.85;
}

/* —— Mirror Engine V1 (post-run): quiet postscript, not a score widget —— */
.mirror-reflection-section{
  margin-top:1.15rem;
  padding-top:1rem;
  padding-bottom:0.65rem;
  padding-left:0.45rem;
  padding-right:0.45rem;
  border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius:12px;
  background:color-mix(in srgb, var(--panel) 40%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent);
}

.mirror-reflection-section.hidden{
  display:none;
}

.firstSessionEntry-handoff-section{
  box-sizing:border-box;
  margin-top:0.75rem;
  padding:0.75rem 0.85rem 0.85rem;
  max-width:100%;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
  background:color-mix(in srgb, var(--panel) 55%, transparent);
}

.firstSessionEntry-handoff-section.hidden{
  display:none;
}

.firstSessionEntry-handoff-title{
  margin:0 0 0.35rem;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--ink);
}

.firstSessionEntry-handoff-body{
  margin:0 0 0.65rem;
  font-size:0.88rem;
  line-height:1.45;
  color:var(--muted);
}

.firstSessionEntry-handoff-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 0.65rem;
  align-items:center;
}

.firstSessionEntry-handoff-btn{
  margin:0;
  padding:0.45rem 0.85rem;
  font-size:0.82rem;
  line-height:1.35;
  border-radius:8px;
  cursor:pointer;
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background:var(--panel);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.firstSessionEntry-handoff-btn--primary{
  font-weight:600;
  border-color:color-mix(in srgb, var(--ink) 18%, var(--line));
}

.firstSessionEntry-handoff-btn--secondary{
  font-weight:500;
  background:transparent;
}

.firstSessionEntry-handoff-feedback{
  margin-top:0.6rem;
  padding-top:0.55rem;
  border-top:1px solid color-mix(in srgb, var(--line) 50%, transparent);
}

.firstSessionEntry-handoff-feedback__title{
  margin:0 0 0.3rem;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--ink);
  opacity:0.9;
}

.firstSessionEntry-handoff-feedback__body{
  margin:0 0 0.4rem;
  font-size:0.78rem;
  line-height:1.45;
  color:var(--muted);
}

.firstSessionEntry-handoff-feedback__link{
  display:inline-block;
  font-size:0.78rem;
  line-height:1.35;
  color:color-mix(in srgb, var(--muted) 94%, var(--ink));
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:500;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.firstSessionEntry-handoff-feedback__link:hover{
  color:var(--muted);
}

html[data-theme="dark"] .firstSessionEntry-handoff-section{
  background:color-mix(in srgb, var(--ink) 6%, var(--panel));
  border-color:color-mix(in srgb, var(--ink) 22%, transparent);
}

html[data-theme="dark"] .firstSessionEntry-handoff-feedback{
  border-top-color:color-mix(in srgb, var(--ink) 20%, transparent);
}

@media (min-width:981px){
  .mirror-reflection-section:not(.hidden){
    /* Desktop: sit closer to pill/meta row; avoid mobile-scale top air above the panel. */
    margin-top:0.42rem;
    padding-top:0.58rem;
    padding-bottom:0.58rem;
    min-width:0;
  }

  #mirrorReflectionSection:not(.hidden) .mirror-reflection-root{
    max-width:100%;
    box-sizing:border-box;
    padding:0.22rem 0.35rem 0.36rem 0.5rem;
  }

  #mirrorReflectionSection:not(.hidden) .mirror-reflection-eyebrow{
    margin-bottom:0.48rem;
  }

  #mirrorReflectionSection:not(.hidden) .mirror-stack{
    gap:0.58rem;
  }

  #mirrorReflectionSection:not(.hidden) .mirror-card{
    padding:0.42rem 0.5rem 0.48rem;
  }

  #mirrorReflectionSection:not(.hidden) .mirror-card--main{
    padding:0.55rem 0.62rem 0.62rem;
    max-height:min(34vh, 260px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  #mirrorReflectionSection:not(.hidden) .mirror-card--support{
    max-height:min(28vh, 220px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  #mirrorReflectionSection:not(.hidden) .mirror-card__statement{
    max-width:100%;
    text-wrap:wrap;
  }

  #mirrorReflectionSection:not(.hidden) .mirror-card--main .mirror-card__statement{
    font-size:1.02rem;
    line-height:1.52;
    letter-spacing:0;
  }

  /*
   * Collapsed #reflection-line still participates in flex gap — the default 12px reads as dead air
   * between the pill/meta lane and Reflection on desktop. Pull the stack together without touching
   * the pill band’s own layout above this stack.
   */
  .below-editor-reflection-stack:has(#mirrorReflectionSection:not(.hidden)){
    gap:3px;
  }

  /* Semantic legend row present: it grows the pill band; tighten grid + stack + Reflection only. */
  .below-editor-stack:has(#mirrorReflectionSection:not(.hidden)):has(#editorSemanticStatusBar:not(.hidden)){
    row-gap:2px;
  }

  .below-editor-stack:has(#mirrorReflectionSection:not(.hidden)):has(#editorSemanticStatusBar:not(.hidden)) > .below-editor-reflection-stack{
    margin-top:2px;
    gap:2px;
  }

  .below-editor-stack:has(#mirrorReflectionSection:not(.hidden)):has(#editorSemanticStatusBar:not(.hidden)) .mirror-reflection-section:not(.hidden){
    margin-top:0.08rem;
    padding-top:0.32rem;
    padding-bottom:0.42rem;
  }

  .below-editor-stack:has(#mirrorReflectionSection:not(.hidden)):has(#editorSemanticStatusBar:not(.hidden)) #mirrorReflectionSection:not(.hidden) .mirror-card--main{
    max-height:min(26vh, 200px);
  }

  .below-editor-stack:has(#mirrorReflectionSection:not(.hidden)):has(#editorSemanticStatusBar:not(.hidden)) #mirrorReflectionSection:not(.hidden) .mirror-card--support{
    max-height:min(22vh, 170px);
  }

  .below-editor-stack:has(#mirrorReflectionSection:not(.hidden)) #editorSemanticStatusBar:not(.hidden) .legend-pill{
    padding-top:5px;
    padding-bottom:5px;
  }
}

@media (max-width:980px){
  .editor-pill-band:has(#editorSemanticStatusBar.hidden){
    margin-top:2px;
  }

  .below-editor-stack:has(#editorSemanticStatusBar.hidden) .mirror-reflection-section:not(.hidden){
    margin-top:0.75rem;
    padding-top:0.85rem;
  }

  .below-editor-stack:has(#editorSemanticStatusBar:not(.hidden)) .mirror-reflection-section:not(.hidden){
    margin-top:0.85rem;
    padding-top:0.85rem;
  }
}

.mirror-reflection-root{
  max-width:min(34rem, 100%);
  padding:0.35rem 0.6rem 0.5rem 0.85rem;
  margin-left:0;
  border-left:2px solid color-mix(in srgb, var(--muted) 22%, transparent);
}

.mirror-reflection-eyebrow{
  margin:0 0 0.85rem;
  font-size:0.66rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--muted);
  opacity:0.78;
}

.mirror-empty{
  margin:0;
  font-size:0.92rem;
  line-height:1.58;
  color:var(--muted);
  font-style:normal;
  opacity:0.9;
}

/* Post-run mirror block: minimal upward settle when panel body mounts. */
#mirrorReflectionSection:not(.hidden) .mirror-reflection-root{
  animation:wayword-mirror-reflection-in 0.16s cubic-bezier(0.25, 0.46, 0.45, 1) both;
}

@keyframes wayword-mirror-reflection-in{
  0%{
    opacity:0.88;
    transform:translate3d(0, 4px, 0);
  }
  100%{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion:reduce){
  #mirrorReflectionSection:not(.hidden) .mirror-reflection-root{
    animation:none;
  }
}

.mirror-stack{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}

/* Supporting cards only: same rhythm as main+support, without a “missing main” gap */
.mirror-stack--support-only{
  gap:0.85rem;
}

.mirror-stack--support-only .mirror-card--support-first{
  margin-top:0;
}

/* V1.1 recent patterns: second stack under this session’s reflection cards */
.mirror-recent-block{
  margin-top:1.35rem;
  padding-top:1.05rem;
  border-top:1px solid color-mix(in srgb, var(--line) 58%, transparent);
}

.mirror-recent-pattern-eyebrow{
  letter-spacing:0.14em;
  opacity:0.7;
}

.mirror-card{
  padding:0.6rem 0.72rem 0.65rem;
  border:1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius:11px;
  background:color-mix(in srgb, var(--paper) 55%, var(--panel) 45%);
  transition:background 0.15s ease, border-color 0.15s ease;
}

.mirror-card--main{
  padding:0.95rem 1rem 1rem;
  border-color:color-mix(in srgb, var(--line) 62%, transparent);
  background:color-mix(in srgb, var(--panel) 92%, var(--paper) 8%);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}

.mirror-card--support{
  opacity:0.97;
}

.mirror-card--support.mirror-card--support-first{
  margin-top:0.1rem;
}

.mirror-card--evidence-open.mirror-card--main,
.mirror-card--evidence-open.mirror-card--support{
  border-color:color-mix(in srgb, var(--line) 55%, transparent);
  background:color-mix(in srgb, var(--panel) 88%, var(--paper) 12%);
}

.mirror-card__statement{
  margin:0;
  font-size:0.98rem;
  line-height:1.68;
  max-width:min(40ch, 100%);
  color:var(--ink);
  font-weight:400;
  text-wrap:balance;
}

.mirror-card--main .mirror-card__statement{
  font-size:1.08rem;
  line-height:1.64;
  letter-spacing:-0.01em;
}

.mirror-card--support .mirror-card__statement{
  font-size:0.95rem;
  line-height:1.66;
  color:color-mix(in srgb, var(--ink) 88%, var(--muted) 12%);
}

.mirror-card__evidence-toggle{
  margin:0.5rem 0 0;
  padding:0.12rem 0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.04em;
  text-decoration:none;
  border-bottom:1px dotted color-mix(in srgb, var(--muted) 45%, transparent);
  cursor:pointer;
  text-align:left;
  opacity:0.88;
}

.mirror-card__evidence-toggle:hover,
.mirror-card__evidence-toggle:focus-visible{
  color:var(--ink);
  opacity:1;
  border-bottom-color:color-mix(in srgb, var(--muted) 70%, transparent);
  outline:none;
}

.mirror-card__evidence{
  margin:0.4rem 0 0;
  padding:0.45rem 0 0.05rem;
  border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.mirror-card__evidence[hidden]{
  display:none;
}

.mirror-card__evidence-line{
  margin:0.3rem 0 0;
  font-size:0.84rem;
  line-height:1.5;
  color:var(--muted);
}

.mirror-card__evidence-line:first-child{
  margin-top:0;
}

.mirror-card__evidence-line--muted{
  font-style:italic;
  opacity:0.88;
}

/* Recent drawer / rail: reflection is the primary read inside expanded results */
.recent-entry-mirror .mirror-reflection-root{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  padding-left:0.55rem;
  margin-left:0;
  border-left-width:1px;
}

.recent-entry-mirror .mirror-reflection-eyebrow{
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.07em;
  color:color-mix(in srgb, var(--ink) 52%, var(--muted));
  margin-bottom:0.65rem;
}

/* Review Runs: metric-backed reflection lines (no Mirror bundle cards) */
.recent-entry-reflection-lines .recent-entry-reflection-line-stack{
  display:flex;
  flex-direction:column;
  gap:0.38rem;
  margin:0.15rem 0 0;
  padding-left:0.55rem;
  margin-left:0;
  border-left:1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.recent-entry-reflection-lines .recent-entry-reflection-line{
  margin:0;
  font-size:0.94rem;
  line-height:1.5;
  font-weight:400;
  color:var(--ink);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.recent-entry-mirror .mirror-stack,
.recent-entry-mirror .mirror-card,
.recent-entry-mirror .mirror-card__statement,
.recent-entry-mirror .mirror-card__evidence,
.recent-entry-mirror .mirror-card__evidence-line{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.recent-entry-mirror .mirror-card__statement,
.recent-entry-mirror .mirror-card__evidence-line{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

.recent-entry-mirror .mirror-stack{
  max-height:15.5rem;
  overflow:hidden;
  gap:0.85rem;
}

.recent-entry-mirror .mirror-card__statement{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
  line-clamp:5;
  overflow:hidden;
}

.recent-entry-mirror .mirror-card__evidence:not([hidden]){
  max-height:9rem;
  overflow:hidden;
}

@media (max-width:720px){
  .recent-entry-prompt{
    max-height:calc(1.48em * 5);
  }

  .recent-entry-mirror .mirror-stack{
    max-height:12rem;
  }

  .recent-entry-mirror .mirror-card__evidence:not([hidden]){
    max-height:7rem;
  }
}

/* Review Runs glance: one reflection, no hover/context affordance, no stack scroll */
.recent-entry-mirror--glance .mirror-stack.mirror-stack--glance-one{
  max-height:none;
  overflow:visible;
  gap:0;
  margin:0.15rem 0 0;
  padding-left:0.55rem;
  margin-left:0;
  border-left:1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.recent-entry-mirror--glance .mirror-stack--support-only .mirror-card--support-first{
  margin-top:0;
}

.recent-entry-mirror--glance .mirror-card{
  transition:none;
  padding:0.35rem 0 0.4rem;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.recent-entry-mirror--glance .mirror-card--main{
  padding:0.35rem 0 0.4rem;
  border:0;
  background:transparent;
  box-shadow:none;
}

.recent-entry-mirror--glance .mirror-card--main .mirror-card__statement,
.recent-entry-mirror--glance .mirror-card--support .mirror-card__statement{
  font-size:0.94rem;
  line-height:1.64;
  font-weight:400;
  color:var(--ink);
  max-width:min(40ch, 100%);
  text-wrap:balance;
  -webkit-line-clamp:5;
  line-clamp:5;
}

.recent-entry-mirror--glance .mirror-card__evidence-toggle,
.recent-entry-mirror--glance .mirror-card__evidence{
  display:none !important;
}

.recent-entry-mirror--glance .mirror-stack .recent-entry-reflection-depth{
  margin-top:0.22rem;
}

.recent-entry-reflection-lines.recent-entry-mirror--glance .recent-entry-reflection-line-stack--single{
  gap:0.22rem;
}

.recent-entry-reflection-depth{
  margin:0;
  font-size:0.72rem;
  line-height:1.35;
  font-weight:400;
  letter-spacing:0.02em;
  color:color-mix(in srgb, var(--muted) 82%, var(--ink));
  opacity:0.78;
}

/*
 * Recent Runs scrollbars — tail placement + ID anchors.
 * Rationale: class-only `::-webkit-scrollbar-*` rules lived ~3k lines above the final
 * `body.recent-drawer-open.recent-drawer-runs-expanded .recent-drawer-list` / rail overflow
 * stack; WebKit repaints the scroll layer after those apply and the thumb can fall back to
 * the default bright overlay. These selectors load last and pin the real scroll nodes:
 * `#recentDrawerList` (drawer), `#recentRailList` inside `#writeView` (desktop rail).
 */
#recentDrawerList.recent-drawer-list,
#writeView .recent-rail-list-clip #recentRailList{
  scrollbar-width:thin;
  scrollbar-color:rgba(74, 66, 58, 0.28) transparent;
  color-scheme:light;
}

html[data-theme="dark"] #recentDrawerList.recent-drawer-list,
html[data-theme="dark"] #writeView .recent-rail-list-clip #recentRailList{
  scrollbar-color:rgba(214, 206, 188, 0.16) transparent;
  color-scheme:dark;
}

#recentDrawerList.recent-drawer-list::-webkit-scrollbar,
#writeView .recent-rail-list-clip #recentRailList::-webkit-scrollbar{
  width:5px;
}

#recentDrawerList.recent-drawer-list::-webkit-scrollbar-track,
#writeView .recent-rail-list-clip #recentRailList::-webkit-scrollbar-track{
  background:transparent;
}

#recentDrawerList.recent-drawer-list::-webkit-scrollbar-thumb,
#writeView .recent-rail-list-clip #recentRailList::-webkit-scrollbar-thumb{
  background:rgba(74, 66, 58, 0.26);
  border-radius:999px;
}

#recentDrawerList.recent-drawer-list::-webkit-scrollbar-thumb:hover,
#writeView .recent-rail-list-clip #recentRailList::-webkit-scrollbar-thumb:hover{
  background:rgba(74, 66, 58, 0.4);
}

html[data-theme="dark"] #recentDrawerList.recent-drawer-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] #writeView .recent-rail-list-clip #recentRailList::-webkit-scrollbar-thumb{
  background:rgba(214, 206, 188, 0.14);
}

html[data-theme="dark"] #recentDrawerList.recent-drawer-list::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] #writeView .recent-rail-list-clip #recentRailList::-webkit-scrollbar-thumb:hover{
  background:rgba(214, 206, 188, 0.24);
}