/* shard-scribe — scribe.css
   Ships as ONE static CSS file, never a runtime <style> injection (brief
   non-negotiable #5: "no dependency on style-src 'unsafe-inline'"). Reads
   only the host's own tokens, through --scribe-* aliases with safe
   fallbacks (brief §3.5) — a host never has to know these names to theme
   correctly; it only has to define its OWN tokens, which most fleet hosts
   (Hearth Ember) already do.

   Ported near-verbatim from the Unfold reference prototype's own SHARD
   CSS block (Hearth Forward\design\mockups\writing-input\unfold-card.html)
   — Jacob's pick, direction "Unfold" (28SEP2026). Class names are
   deliberately global, not Svelte-scoped: with `shadow:'none'` (light DOM,
   brief §3.3 — lets a host's existing `[data-field=body]` lookups and
   token cascade work without piercing a shadow root), a scoped stylesheet
   has nowhere safe to attach anyway, so `Scribe.svelte` carries no <style>
   block at all and just uses these classes directly. Both build targets
   (the Svelte component and the <shard-scribe> custom element) share this
   one file. */

.scribe,
.scribe-layer {
  --scribe-page: var(--surface, #fffaf1);
  --scribe-well: var(--bg, #f4ecdd);
  --scribe-raised: var(--surface-2, #f6e9d6);
  --scribe-ink: var(--text, #3a2a1c);
  --scribe-ink-soft: var(--text-soft, #7a6450);
  --scribe-line: var(--border, #e6d6bf);
  --scribe-edge: var(--chip-border, #7a6450);
  --scribe-accent: var(--accent, #b5713f);
  --scribe-radius: var(--radius, 18px);
  --scribe-radius-sm: var(--radius-sm, 12px);
  --scribe-ease: var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  --scribe-serif: var(--font, Georgia, serif);
  --scribe-ui: var(--font-ui, system-ui, sans-serif);
  --scribe-measure: 40rem; /* ~68ch of the 1.16rem serif body */
}

/* ---- collapsed: the inviting box ---- */
.scribe-label {
  display: block;
  font-size: 0.85rem;
  color: var(--scribe-ink-soft, var(--text-soft));
  margin: 0.9rem 0 0.35rem;
  font-weight: 600;
}
.scribe-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 9.25rem;
  padding: 0.95rem 1.05rem 0.7rem;
  background: var(--scribe-well);
  color: var(--scribe-ink);
  border: 1px solid var(--scribe-edge);
  border-radius: var(--scribe-radius);
  cursor: text;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    border-color 0.2s var(--scribe-ease),
    box-shadow 0.2s var(--scribe-ease),
    transform 0.15s var(--scribe-ease);
}
@media (hover: hover) {
  .scribe-box:hover {
    border-color: var(--scribe-ink);
    box-shadow: var(--shadow-soft);
  }
}
.scribe-box:active {
  transform: scale(0.994);
}
.scribe-box:focus-visible {
  outline: 3px solid var(--scribe-ink);
  outline-offset: 2px;
}
.scribe-box.is-lifted {
  opacity: 0;
  transition: none;
}
.scribe-box-title {
  font-family: var(--scribe-serif);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.3;
}
.scribe-box-text {
  flex: 1;
  font-family: var(--scribe-serif);
  font-size: 1.08rem;
  line-height: 1.6;
  max-height: 6.45em;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.scribe-box-text.is-clipped {
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.scribe-box-text.is-empty {
  color: var(--scribe-ink-soft);
}
.scribe-box-text .sc-md h3,
.scribe-box-text .sc-md h4,
.scribe-box-text .sc-md h5 {
  font-size: 1.08em;
  margin: 0 0 0.15em;
}
.scribe-box-text .sc-md p,
.scribe-box-text .sc-md ul,
.scribe-box-text .sc-md ol,
.scribe-box-text .sc-md blockquote {
  margin-bottom: 0.3em;
}
.scribe-box-text .sc-md hr {
  height: 1em;
  margin: 0 0 0.2em;
}
.scribe-box-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--scribe-ui);
  font-size: 0.78rem;
  color: var(--scribe-ink-soft);
}
.scribe-box-foot .grow {
  flex: 1;
}
.scribe-box-foot svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.scribe-box-badge {
  border: 1px solid var(--scribe-edge);
  border-radius: 6px;
  padding: 0 0.38rem;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.45;
}

/* ---- shared renderer output (Preview + collapsed box + a host's read views) ---- */
.sc-plain {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sc-md {
  overflow-wrap: anywhere;
}
.sc-md > :first-child {
  margin-top: 0;
}
.sc-md p {
  margin: 0 0 0.9em;
}
.sc-md h3,
.sc-md h4,
.sc-md h5 {
  font-family: var(--scribe-serif);
  font-weight: 600;
  line-height: 1.25;
  color: var(--scribe-ink);
}
.sc-md h3 {
  font-size: 1.45em;
  margin: 1.1em 0 0.4em;
}
.sc-md h4 {
  font-size: 1.2em;
  margin: 1em 0 0.35em;
}
.sc-md h5 {
  font-size: 1.05em;
  margin: 1em 0 0.3em;
}
.sc-md ul,
.sc-md ol {
  margin: 0 0 0.9em;
  padding-left: 1.35em;
}
.sc-md li {
  margin: 0.2em 0;
}
.sc-md li::marker {
  color: var(--scribe-ink-soft);
}
.sc-md blockquote {
  margin: 0 0 0.9em;
  padding: 0.05em 0 0.05em 1em;
  border-left: 3px solid var(--scribe-accent);
  font-style: italic;
}
.sc-md hr {
  border: 0;
  height: 1.7em;
  margin: 0.4em 0 0.9em;
  text-align: center;
  overflow: visible;
}
.sc-md hr::after {
  content: "· · ·";
  color: var(--scribe-ink-soft);
  letter-spacing: 0.45em;
  font-size: 1.05em;
}
.sc-md a {
  color: var(--scribe-ink);
  text-decoration: underline;
  text-decoration-color: var(--scribe-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.sc-md strong {
  font-weight: 700;
}
.sc-empty {
  color: var(--scribe-ink-soft);
  font-style: italic;
}

/* ---- expanded: layer, scrim, sheet ---- */
.scribe-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.scribe-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg, #000) 72%, transparent);
}
.scribe-sheet {
  position: absolute;
  inset: 0;
  bottom: var(--scribe-kb, 0px);
  display: flex;
  flex-direction: column;
  background: var(--scribe-page);
  color: var(--scribe-ink);
  overflow: hidden;
}
@container hearth (min-width: 761px) {
  .scribe-sheet {
    bottom: 0;
  }
  .scribe-sheet:not(.is-wide) {
    margin: auto;
    width: min(820px, 92cqw);
    height: min(88cqh, 900px);
    border-radius: var(--scribe-radius-sm);
    border: 1px solid var(--scribe-line);
    box-shadow: var(--shadow, 0 20px 60px -20px rgba(0, 0, 0, 0.4));
  }
}
.scribe-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* top bar: Done · mode title · save cue · (edge-to-edge · close on desktop) */
.scribe-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: max(0.5rem, var(--scribe-safe-top, env(safe-area-inset-top, 0px))) max(0.6rem, env(safe-area-inset-right, 0px)) 0.45rem max(0.6rem, env(safe-area-inset-left, 0px));
}
.scribe-done {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  min-height: 44px;
  padding: 0 1rem 0 0.5rem;
  border: 1px solid var(--scribe-edge);
  border-radius: 999px;
  background: var(--scribe-page);
  color: var(--scribe-ink);
  font: 600 0.95rem/1 var(--scribe-ui);
  cursor: pointer;
}
.scribe-done svg {
  width: 20px;
  height: 20px;
}
@media (hover: hover) {
  .scribe-done:hover {
    background: var(--scribe-raised);
  }
}
.scribe-heading {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--scribe-serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.35s var(--scribe-ease);
}
.scribe-save {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 32px;
  padding: 0 0.75rem 0 0.55rem;
  border-radius: 999px;
  background: var(--scribe-well);
  color: var(--scribe-ink-soft);
  font: 500 0.78rem/1 var(--scribe-ui);
  white-space: nowrap;
}
.scribe-save[data-state="idle"] {
  visibility: hidden;
}
.scribe-save svg {
  display: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scribe-save[data-state="saving"] .sv-ring {
  display: block;
  animation: scribe-spin 0.9s linear infinite;
}
.scribe-save[data-state="saved"] .sv-check {
  display: block;
  color: var(--scribe-ink);
}
.scribe-save[data-state="held"] .sv-lock {
  display: block;
  color: var(--scribe-ink);
}
.scribe-save[data-state="held"] {
  color: var(--scribe-ink);
  box-shadow: inset 0 0 0 1px var(--scribe-edge);
}
@keyframes scribe-spin {
  to {
    transform: rotate(360deg);
  }
}
.scribe-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--scribe-ink);
  cursor: pointer;
}
.scribe-icon svg {
  width: 21px;
  height: 21px;
}
@media (hover: hover) {
  .scribe-icon:hover {
    background: var(--scribe-raised);
  }
}
.scribe-icon[aria-pressed="true"] {
  background: var(--scribe-raised);
  box-shadow: inset 0 0 0 1.5px var(--scribe-edge);
}
.scribe-desk-only {
  display: none;
}
@container hearth (min-width: 761px) {
  .scribe-desk-only {
    display: grid;
  }
}

/* writing column */
.scribe-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.scribe-pad,
.scribe-sheet .scribe-pad {
  padding-left: max(1.25rem, calc((100% - var(--scribe-measure)) / 2));
  padding-right: max(1.25rem, calc((100% - var(--scribe-measure)) / 2));
}
.scribe-privacy {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0 0;
  font: 0.76rem/1.3 var(--scribe-ui);
  color: var(--scribe-ink-soft);
  transition: opacity 0.35s var(--scribe-ease);
}
.scribe-privacy svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.scribe-sheet .scribe-title-in {
  flex: 0 0 auto;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--scribe-ink);
  font: 600 1.4rem/1.3 var(--scribe-serif);
  padding-top: 0.75rem;
  padding-bottom: 0.2rem;
  resize: none;
}
.scribe-sheet .scribe-title-in::placeholder {
  color: var(--scribe-ink-soft);
  opacity: 1;
  font-weight: 500;
}
.scribe-use-prompt {
  flex: 0 0 auto;
  align-self: stretch;
  text-align: left;
  min-height: 44px;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 0.86rem var(--scribe-ui);
  color: var(--scribe-ink);
}
.scribe-use-prompt span {
  text-decoration: underline;
  text-decoration-color: var(--scribe-edge);
  text-underline-offset: 0.22em;
}
.scribe-sheet .scribe-text {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--scribe-ink);
  font-family: var(--scribe-serif);
  font-size: 1.16rem;
  line-height: 1.7;
  padding-top: 0.9rem;
  padding-bottom: 3rem;
  overflow: auto;
  caret-color: var(--scribe-ink);
  overscroll-behavior: contain;
}
/* once the page has scrolled, the top edge softens so it reads as 'more above', never a cut */
.scribe-sheet .scribe-text.is-scrolled,
.scribe-preview.is-scrolled {
  -webkit-mask-image: linear-gradient(transparent 0.2rem, #000 2.6rem);
  mask-image: linear-gradient(transparent 0.2rem, #000 2.6rem);
}
.scribe-sheet .scribe-text::placeholder {
  color: var(--scribe-ink-soft);
  opacity: 1;
}
/* text fields show a ring only when focus ARRIVED by keyboard; it steps aside once typing starts */
.scribe-sheet .scribe-text:focus-visible,
.scribe-sheet .scribe-title-in:focus-visible {
  outline: none;
}
.scribe-sheet .scribe-text.kbd-ring,
.scribe-sheet .scribe-title-in.kbd-ring {
  outline: 2px solid var(--scribe-ink);
  outline-offset: -6px;
  border-radius: 14px;
}
.scribe-preview {
  flex: 1;
  min-height: 0;
  overflow: auto;
  font-family: var(--scribe-serif);
  font-size: 1.16rem;
  line-height: 1.7;
  padding-top: 0.9rem;
  padding-bottom: 3rem;
}
.scribe-preview:focus-visible {
  outline: 2px solid var(--scribe-ink);
  outline-offset: -6px;
  border-radius: 14px;
}

/* bottom: count + Keep-style pill toolbar + More sheet */
.scribe-foot {
  flex: 0 0 auto;
  position: relative;
  padding: 0.3rem max(0.5rem, env(safe-area-inset-right, 0px)) max(0.55rem, var(--scribe-safe-bottom, env(safe-area-inset-bottom, 0px))) max(0.5rem, env(safe-area-inset-left, 0px));
}
.scribe-sheet.kb-up .scribe-foot {
  padding-bottom: 0.45rem;
}
.scribe-count {
  display: flex;
  justify-content: flex-end;
  padding: 0 0.8rem 0.3rem;
  font: 0.78rem var(--scribe-ui);
  color: var(--scribe-ink-soft);
  font-variant-numeric: tabular-nums;
}
.scribe-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 2px;
  background: var(--scribe-raised);
  border: 1px solid var(--scribe-line);
  border-radius: 20px;
  box-shadow: var(--shadow-soft, 0 4px 14px -6px rgba(0, 0, 0, 0.28));
}
.scribe-scroll-x {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline: 12px;
}
.scribe-scroll-x::-webkit-scrollbar {
  display: none;
}
.scribe-scroll-x.fade-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
}
.scribe-scroll-x.fade-start {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent);
}
.scribe-scroll-x.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.scribe-tb {
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--scribe-ink);
  cursor: pointer;
  font: 600 0.8rem/1 var(--scribe-ui);
  -webkit-tap-highlight-color: transparent;
}
.scribe-tb svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scribe-tb .tb-label {
  display: none;
  pointer-events: none;
}
@media (hover: hover) {
  .scribe-tb:hover:not([aria-disabled="true"]) {
    background: var(--scribe-page);
  }
}
.scribe-tb:active:not([aria-disabled="true"]) {
  transform: scale(0.94);
}
.scribe-tb[aria-pressed="true"] {
  background: var(--scribe-ink);
  color: var(--scribe-page);
}
.scribe-tb[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}
.scribe-tb:focus-visible,
.scribe-seg button:focus-visible {
  outline: 3px solid var(--scribe-ink);
  outline-offset: 1px;
}
.scribe-rule {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 10px 3px;
  background: var(--scribe-line);
}
.scribe-seg {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-right: 1px;
  border-radius: 16px;
  background: var(--scribe-well);
}
.scribe-seg button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--scribe-ink-soft);
  font: 600 0.84rem/1 var(--scribe-ui);
  cursor: pointer;
}
.scribe-seg button[aria-pressed="true"] {
  background: var(--scribe-page);
  color: var(--scribe-ink);
  font-weight: 700;
  box-shadow: 0 0 0 1.5px var(--scribe-edge);
}
/* desktop panel has room: labels beside the icons */
@container hearth (min-width: 761px) {
  .scribe-tb[data-fmt],
  .scribe-tb[data-act="more"] {
    flex-direction: column;
    gap: 3px;
    height: 52px;
    min-width: 54px;
    padding: 0 6px;
  }
  .scribe-tb[data-fmt] svg,
  .scribe-tb[data-act="more"] svg {
    width: 20px;
    height: 20px;
  }
  .scribe-tb[data-fmt] .tb-label,
  .scribe-tb[data-act="more"] .tb-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .scribe-foot {
    padding: 0.3rem 0.75rem 0.75rem;
  }
}
/* narrow phones: a tighter Write | Preview so more tools show before the fade */
@container hearth (max-width: 420px) {
  .scribe-seg button {
    padding: 0 0.55rem;
    font-size: 0.8rem;
  }
  .scribe-bar {
    border-radius: 18px;
  }
  .scribe-scroll-x {
    gap: 0;
    padding-right: 0;
  }
  .scribe-scroll-x.fade-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }
}
.scribe-more {
  position: absolute;
  right: max(0.5rem, env(safe-area-inset-right, 0px));
  bottom: calc(100% - 0.2rem);
  z-index: 6;
  width: min(19rem, calc(100% - 1rem));
  padding: 0.35rem;
  background: var(--scribe-page);
  border: 1px solid var(--scribe-edge);
  border-radius: var(--scribe-radius-sm);
  box-shadow: var(--shadow, 0 20px 60px -20px rgba(0, 0, 0, 0.4));
}
@container hearth (min-width: 761px) {
  .scribe-more {
    right: 0.9rem;
  }
}
.scribe-more-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--scribe-ink);
  font: 500 0.92rem var(--scribe-ui);
  text-align: left;
  cursor: pointer;
}
.scribe-more-item svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scribe-more-item .aa {
  width: 20px;
  flex: 0 0 auto;
  text-align: center;
  font: 700 0.9rem var(--scribe-serif);
}
.scribe-more-item .hint {
  margin-left: auto;
  color: var(--scribe-ink-soft);
  font-size: 0.76rem;
}
@media (hover: hover) {
  .scribe-more-item:hover {
    background: var(--scribe-raised);
  }
}
.scribe-more-item:focus-visible {
  outline: 3px solid var(--scribe-ink);
  outline-offset: -3px;
}
.scribe-more-sep {
  height: 1px;
  background: var(--scribe-line);
  margin: 0.3rem 0.45rem;
}
.scribe-more-note {
  margin: 0.2rem 0.7rem 0.3rem;
  font: 0.78rem/1.45 var(--scribe-ui);
  color: var(--scribe-ink-soft);
}
.scribe-switch {
  margin-left: auto;
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 24px;
  border-radius: 999px;
  border: 1.5px solid var(--scribe-edge);
}
.scribe-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--scribe-edge);
  transition: transform 0.15s var(--scribe-ease);
}
[aria-pressed="true"] > .scribe-switch {
  background: var(--scribe-ink);
  border-color: var(--scribe-ink);
}
[aria-pressed="true"] > .scribe-switch::after {
  transform: translateX(14px);
  background: var(--scribe-page);
}
.scribe-tip {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  padding: 0.32rem 0.58rem;
  border-radius: 8px;
  background: var(--scribe-ink);
  color: var(--scribe-page);
  font: 600 0.74rem/1.2 var(--scribe-ui);
  white-space: nowrap;
  box-shadow: var(--shadow-soft, 0 4px 14px -6px rgba(0, 0, 0, 0.28));
}

/* the calm while typing: words in the chrome step back until a pause */
.scribe-sheet.is-typing .scribe-heading,
.scribe-sheet.is-typing .scribe-privacy {
  opacity: 0;
}
/* Focus mode: only the page */
.scribe-sheet.is-focus .scribe-top,
.scribe-sheet.is-focus .scribe-foot,
.scribe-sheet.is-focus .scribe-privacy {
  display: none;
}
.scribe-sheet.is-focus .scribe-body {
  padding-top: max(2.5rem, var(--scribe-safe-top, env(safe-area-inset-top, 0px)));
}
.scribe-focus-exit {
  position: absolute;
  z-index: 7;
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  bottom: max(0.75rem, var(--scribe-safe-bottom, env(safe-area-inset-bottom, 0px)));
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--scribe-edge);
  border-radius: 999px;
  background: var(--scribe-page);
  color: var(--scribe-ink);
  font: 600 0.86rem var(--scribe-ui);
  cursor: pointer;
  box-shadow: var(--shadow-soft, 0 4px 14px -6px rgba(0, 0, 0, 0.28));
}
.scribe-sheet .scribe-focus-exit:focus-visible,
.scribe-done:focus-visible,
.scribe-icon:focus-visible,
.scribe-use-prompt:focus-visible {
  outline: 3px solid var(--scribe-ink);
  outline-offset: 2px;
}
.scribe-sheet[data-fmt="plain"] .needs-md {
  display: none !important;
}

/* View Transitions (primary engine): the box and the sheet share the name "scribe" */
::view-transition-group(scribe) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: clip;
  border-radius: 18px;
  background: var(--surface, #fff);
}
::view-transition-old(scribe) {
  animation: scribe-vt-out 90ms linear both;
}
::view-transition-new(scribe) {
  animation: scribe-vt-in 150ms cubic-bezier(0.22, 0.61, 0.36, 1) 90ms both;
  transform-origin: 50% 0;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
}
@keyframes scribe-vt-out {
  to {
    opacity: 0;
  }
}
@keyframes scribe-vt-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* visually-hidden: the shard's own live regions (save cue, a11y announcer) */
.scribe-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Windows Contrast themes: states survive without colour fills */
@media (forced-colors: active) {
  .scribe-box,
  .scribe-sheet,
  .scribe-bar,
  .scribe-more,
  .scribe-done,
  .scribe-seg {
    border: 1px solid CanvasText;
  }
  .scribe-tb[aria-pressed="true"],
  .scribe-seg button[aria-pressed="true"],
  .scribe-icon[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }
  .scribe-tb[aria-disabled="true"] {
    color: GrayText;
    opacity: 1;
  }
  .scribe-save {
    border: 1px solid CanvasText;
  }
  [aria-pressed="true"] > .scribe-switch {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
  }
  .scribe-sheet .scribe-text.kbd-ring,
  .scribe-sheet .scribe-title-in.kbd-ring {
    outline-color: Highlight;
  }
}

/* prefers-reduced-motion: the sheet itself never scales/morphs — expand.ts's
   fadeTransition() is the only engine that runs; this rule is a backstop for
   any host that forces the box/ghost transform via inline style directly. */
@media (prefers-reduced-motion: reduce) {
  .scribe-box,
  .scribe-icon,
  .scribe-switch::after {
    transition: none !important;
  }
}