/* =====================================================================
   office-workspace.css — chrome for the Office editors.

   Replaces office-ribbon.css, which styled a nine-tab copy of the Word /
   Excel / PowerPoint ribbon (and set `font-family: Calibri` on the whole
   shell). Nothing here imitates a desktop suite: one toolbar, a command
   palette, a side rail.

   Owns no palette. Every colour, radius and shadow comes from the app
   design system via the --o-* alias layer declared in office2.css, so the
   editors follow the active light / dark theme like every other route.
   ===================================================================== */

/* ── Shell ──────────────────────────────────────────────────────────── */
/* UBICONS glyphs in this route are outlines. They carry class="ofc-glyph"
   instead of the shared "icon" class precisely so app.css's
   `.icon { fill: var(--text) }` cannot fill them in — see ico() in
   office-commands.js. Shapes that want a fill set it per-element. */
.ofc-glyph {
  fill: none;
  flex: 0 0 auto;
}

/* Column flex rather than fixed grid rows: the context bar is only present for
   some editors, and with positional `grid-template-rows` its absence shifted
   every later row up a track — the body took the `auto` track and the status bar
   took the `1fr`, so a presentation's shell stopped short of the viewport. */
.ofc-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--o-bg);
  color: var(--o-text);
}
.ofc-top,
.ofc-bar,
.ofc-ctx,
.ofc-status { flex: 0 0 auto; }
.ofc-shell * { box-sizing: border-box; }

/* ── Top bar ────────────────────────────────────────────────────────── */
.ofc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 52px;
  border-bottom: 1px solid var(--o-line);
  background: var(--o-card);
  background-blend-mode: var(--blend);
}

.ofc-icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--o-radius-sm);
  background: transparent;
  color: var(--o-text);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.ofc-icon-btn:hover { background: var(--o-soft); }
.ofc-icon-btn[aria-pressed="true"] {
  background: color-mix(in oklab, var(--ofc-accent) 14%, transparent);
  border-color: color-mix(in oklab, var(--ofc-accent) 34%, transparent);
  color: var(--ofc-accent);
}
.ofc-icon-btn svg { width: 18px; height: 18px; }

.ofc-type-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--ofc-accent);
  background: color-mix(in oklab, var(--ofc-accent) 13%, transparent);
}
.ofc-type-badge svg { width: 17px; height: 17px; }

.ofc-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.ofc-title {
  min-width: 0;
  max-width: 420px;
  flex: 0 1 auto;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--o-radius-sm);
  background: transparent;
  color: var(--o-text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
}
.ofc-title:hover { background: var(--o-soft); }
.ofc-title:focus {
  outline: none;
  background: var(--o-bg);
  border-color: color-mix(in oklab, var(--ofc-accent) 45%, transparent);
}

.ofc-saved {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--o-muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--o-soft);
  white-space: nowrap;
}
.ofc-saved[data-state="saving"] { color: var(--ofc-accent); }
.ofc-saved[data-state="error"] {
  color: #ef4444;
  background: color-mix(in oklab, #ef4444 12%, transparent);
}

.ofc-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.ofc-ghost-btn,
.ofc-donna-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border-radius: var(--o-radius-sm);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease;
}
.ofc-ghost-btn {
  border: 1px solid var(--o-line);
  background: transparent;
  color: var(--o-muted);
}
.ofc-ghost-btn:hover { background: var(--o-soft); color: var(--o-text); }
.ofc-ghost-btn kbd {
  font: inherit;
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--o-soft);
  color: var(--o-muted);
}
.ofc-donna-btn {
  border: 1px solid color-mix(in oklab, var(--ofc-accent) 32%, transparent);
  background: color-mix(in oklab, var(--ofc-accent) 12%, transparent);
  color: var(--ofc-accent);
}
.ofc-donna-btn:hover { background: color-mix(in oklab, var(--ofc-accent) 20%, transparent); }
.ofc-ghost-btn svg,
.ofc-donna-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ── Toolbar ────────────────────────────────────────────────────────── */
.ofc-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 12px;
  height: 44px;
  overflow: hidden;
  border-bottom: 1px solid var(--o-line);
  background: var(--o-surface);
}

.ofc-tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  min-width: 32px;
  padding: 0 6px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--o-radius-sm);
  background: transparent;
  color: var(--o-text);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ofc-tb:hover:not(:disabled) { background: var(--o-soft); }
.ofc-tb:disabled { opacity: .38; cursor: default; }
.ofc-tb[aria-pressed="true"] {
  background: color-mix(in oklab, var(--ofc-accent) 15%, transparent);
  border-color: color-mix(in oklab, var(--ofc-accent) 32%, transparent);
  color: var(--ofc-accent);
}
.ofc-tb svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ofc-caret { display: inline-flex; opacity: .5; }
.ofc-caret svg { width: 12px; height: 12px; }

.ofc-tb-select {
  padding: 0 8px;
  justify-content: space-between;
  border-color: var(--o-line);
  font-size: 12.5px;
  font-weight: 600;
}
.ofc-tb-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ofc-sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  flex: 0 0 auto;
  background: var(--o-line);
}

.ofc-tb-more { margin-left: auto; }

/* ── Context bar (the sheet formula bar lives here) ─────────────────── */
.ofc-ctx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 38px;
  border-bottom: 1px solid var(--o-line);
  background: var(--o-surface);
}

/* ── Body ───────────────────────────────────────────────────────────── */
.ofc-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.ofc-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* ── Status bar ─────────────────────────────────────────────────────── */
.ofc-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  height: 30px;
  border-top: 1px solid var(--o-line);
  background: var(--o-surface);
  font-size: 11.5px;
  color: var(--o-muted);
}
.ofc-status-left { display: flex; align-items: center; gap: 14px; }
.ofc-status-left b { font-weight: 650; color: var(--o-text); }

.ofc-zoom { display: flex; align-items: center; gap: 2px; }
.ofc-zoom-btn,
.ofc-zoom-val {
  border: none;
  background: transparent;
  color: var(--o-muted);
  cursor: pointer;
  border-radius: 6px;
  font: inherit;
  font-size: 11.5px;
  display: grid;
  place-items: center;
}
.ofc-zoom-btn { width: 24px; height: 22px; }
.ofc-zoom-val { min-width: 44px; height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ofc-zoom-btn:hover,
.ofc-zoom-val:hover { background: var(--o-soft); color: var(--o-text); }
.ofc-zoom-btn svg { width: 15px; height: 15px; }

/* ── Anchored panels (swatches, table size) ─────────────────────────── */
.ofc-panel {
  position: fixed;
  z-index: 9600;
  padding: 10px;
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius-sm);
  background: var(--ui-surface-raised, var(--bg));
  box-shadow: var(--o-shadow), 0 12px 34px rgba(0, 0, 0, .18);
  animation: ofc-pop .12s ease;
}
@keyframes ofc-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.ofc-swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 22px);
  gap: 6px;
}
.ofc-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--o-text) 16%, transparent);
  background: var(--sw);
  cursor: pointer;
  padding: 0;
  transition: transform .1s ease;
}
.ofc-swatch:hover { transform: scale(1.14); }
.ofc-swatch-none,
.ofc-swatch-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 5px 7px;
  border-radius: 7px;
  border: 1px solid var(--o-line);
  background: transparent;
  color: var(--o-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ofc-swatch-none { margin-bottom: 8px; }
.ofc-swatch-custom { margin-top: 8px; }
.ofc-swatch-custom input { width: 30px; height: 20px; padding: 0; border: none; background: none; }

.ofc-ts-grid {
  display: grid;
  grid-template-columns: repeat(10, 17px);
  gap: 3px;
}
.ofc-ts-cell {
  width: 17px;
  height: 17px;
  padding: 0;
  border-radius: 3px;
  border: 1px solid var(--o-line);
  background: transparent;
  cursor: pointer;
}
.ofc-ts-cell.on {
  background: color-mix(in oklab, var(--ofc-accent, var(--primary)) 45%, transparent);
  border-color: var(--ofc-accent, var(--primary));
}
.ofc-ts-label {
  margin-top: 8px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--o-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Command palette ────────────────────────────────────────────────── */
.ofc-palette-scrim {
  position: absolute;
  inset: 0;
  z-index: 9500;
  display: flex;
  justify-content: center;
  padding-top: 12vh;
  background: color-mix(in oklab, var(--o-text) 22%, transparent);
  backdrop-filter: blur(2px);
  animation: ofc-fade .12s ease;
}
@keyframes ofc-fade { from { opacity: 0; } to { opacity: 1; } }

.ofc-palette {
  width: min(560px, calc(100% - 40px));
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius);
  background: var(--ui-surface-raised, var(--bg));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.ofc-palette-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--o-line);
  flex: 0 0 auto;
}
.ofc-palette-input svg { width: 18px; height: 18px; color: var(--o-muted); flex: 0 0 auto; }
.ofc-palette-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: var(--o-text);
  font: inherit;
  font-size: 14.5px;
}
.ofc-palette-input input:focus { outline: none; }
.ofc-palette-input kbd {
  font: inherit;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--o-soft);
  color: var(--o-muted);
}

.ofc-palette-list { overflow-y: auto; padding: 6px; }
.ofc-palette-group {
  padding: 8px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--o-muted);
}
.ofc-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--o-radius-sm);
  background: transparent;
  color: var(--o-text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.ofc-palette-item.is-cur { background: var(--o-soft); }
.ofc-palette-ico { display: grid; place-items: center; width: 20px; color: var(--o-muted); }
.ofc-palette-ico svg { width: 16px; height: 16px; }
.ofc-palette-label { flex: 1 1 auto; min-width: 0; }
.ofc-palette-item kbd {
  font: inherit;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--o-soft);
  color: var(--o-muted);
}
.ofc-palette-empty { padding: 26px 16px; text-align: center; color: var(--o-muted); font-size: 13px; }

/* ── Side rail ──────────────────────────────────────────────────────── */
.ofc-rail-host {
  flex: 0 0 336px;
  width: 336px;
  min-height: 0;
  border-left: 1px solid var(--o-line);
  background: var(--o-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ofc-rail-host[hidden] { display: none; }
.ofc-rail { display: flex; flex-direction: column; min-height: 0; height: 100%; }

.ofc-rail-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 10px;
  border-bottom: 1px solid var(--o-line);
  flex: 0 0 auto;
}
.ofc-rail-tabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ofc-rail-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--o-radius-sm);
  background: transparent;
  color: var(--o-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ofc-rail-tab:hover { background: var(--o-soft); color: var(--o-text); }
.ofc-rail-tab.is-on {
  background: color-mix(in oklab, var(--ofc-accent) 14%, transparent);
  color: var(--ofc-accent);
}
.ofc-rail-tab svg { width: 15px; height: 15px; }
.ofc-rail-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--o-muted);
  cursor: pointer;
}
.ofc-rail-close:hover { background: var(--o-soft); color: var(--o-text); }

.ofc-rail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.ofc-rail-section { padding: 14px 14px 4px; }
.ofc-rail-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--o-muted);
  margin-bottom: 8px;
}
.ofc-rail-note { font-size: 12.5px; color: var(--o-muted); margin: 0; }
.ofc-rail-loading { padding: 22px 14px; font-size: 12.5px; color: var(--o-muted); }

.ofc-rail-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--o-muted);
  font-size: 13px;
  line-height: 1.55;
}
.ofc-rail-empty-ico { color: var(--ofc-accent); opacity: .8; margin-bottom: 10px; }
.ofc-rail-empty p { margin: 0 0 14px; }

.ofc-kv { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.ofc-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ofc-kv dt { font-size: 12.5px; color: var(--o-muted); margin: 0; }
.ofc-kv dd {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--o-text);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Donna panel */
.ofc-donna { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ofc-donna-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ofc-donna-chips { display: flex; flex-direction: column; gap: 7px; }
.ofc-chip {
  padding: 8px 11px;
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius-sm);
  background: transparent;
  color: var(--o-text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ofc-chip:hover { background: var(--o-soft); border-color: color-mix(in oklab, var(--ofc-accent) 35%, transparent); }

.ofc-bubble { max-width: 100%; }
.ofc-bubble-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.ofc-bubble.is-user {
  align-self: flex-end;
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 13px 13px 3px 13px;
  background: color-mix(in oklab, var(--ofc-accent) 14%, transparent);
}
.ofc-bubble.is-donna { padding: 2px 1px; }
.ofc-bubble.is-donna.is-streaming .ofc-bubble-text::after {
  content: '▍';
  animation: ofc-caret-blink 1s steps(2) infinite;
  color: var(--ofc-accent);
}
@keyframes ofc-caret-blink { 50% { opacity: 0; } }
.ofc-bubble.is-error .ofc-bubble-text { color: #ef4444; }

.ofc-bubble-actions { display: flex; gap: 6px; margin-top: 8px; }
.ofc-bubble-actions button {
  padding: 4px 9px;
  border: 1px solid var(--o-line);
  border-radius: 7px;
  background: transparent;
  color: var(--o-muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.ofc-bubble-actions button:hover { background: var(--o-soft); color: var(--o-text); }

.ofc-donna-form {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--o-line);
}
.ofc-donna-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  max-height: 140px;
  padding: 8px 10px;
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius-sm);
  background: var(--o-bg);
  color: var(--o-text);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.ofc-donna-form textarea:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--ofc-accent) 50%, transparent);
}
.ofc-donna-send {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--o-radius-sm);
  background: var(--ofc-accent);
  color: #fff;
  cursor: pointer;
}
.ofc-donna-send svg { width: 16px; height: 16px; }

/* Access panel */
.ofc-share-list { display: flex; flex-direction: column; gap: 6px; }
.ofc-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius-sm);
}
.ofc-share-who { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofc-share-perm {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--o-muted);
}
.ofc-share-revoke {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--o-muted);
  cursor: pointer;
}
.ofc-share-revoke:hover { background: color-mix(in oklab, #ef4444 14%, transparent); color: #ef4444; }

.ofc-share-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ofc-share-form input,
.ofc-share-form select {
  padding: 7px 9px;
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius-sm);
  background: var(--o-bg);
  color: var(--o-text);
  font: inherit;
  font-size: 12.5px;
}
.ofc-share-form input { grid-column: 1 / -1; }
.ofc-share-form input:focus,
.ofc-share-form select:focus { outline: none; border-color: color-mix(in oklab, var(--ofc-accent) 50%, transparent); }
.ofc-share-form button {
  padding: 7px 14px;
  border: none;
  border-radius: var(--o-radius-sm);
  background: var(--ofc-accent);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}

/* =====================================================================
   Editor surfaces

   These were three near-identical <style> blocks that docs/engine.js,
   sheets/engine.js and slides/engine.js each appended to document.head on
   every mount — so moving between documents leaked a fresh copy each time.
   They are static rules; they belong in a stylesheet.
   ===================================================================== */

/* ── Document ───────────────────────────────────────────────────────── */
.ofc-doc {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  background: color-mix(in oklab, var(--o-text) 4%, var(--o-bg));
}
.ofc-doc-scroll {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: 28px 24px 60px;
}
.ofc-doc-paper {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .15s ease;
}
.ofc-doc-ruler {
  display: flex;
  height: 18px;
  margin-bottom: 6px;
  padding: 0 2px;
  font-size: 8.5px;
  color: var(--o-muted);
  user-select: none;
}
.ofc-doc-ruler[hidden] { display: none; }
.ofc-tick {
  flex: 1 1 0;
  border-left: 1px solid color-mix(in oklab, var(--o-text) 18%, transparent);
  padding-left: 2px;
  line-height: 18px;
}
.ofc-tick.is-major { border-left-color: color-mix(in oklab, var(--o-text) 38%, transparent); }

.ofc-doc-page {
  width: 21cm;
  min-height: 29.7cm;
  padding: var(--doc-margin, 2.54cm);
  display: flex;
  flex-direction: column;
  background: var(--o-surface);
  color: var(--o-text);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 12px 34px rgba(0, 0, 0, .12);
}
.ofc-doc-running {
  font-size: 11px;
  color: var(--o-muted);
  outline: none;
  padding-bottom: 6px;
  margin-bottom: 22px;
  border-bottom: 1px dashed color-mix(in oklab, var(--o-line) 55%, transparent);
}
.ofc-doc-running.is-footer {
  margin: auto 0 0;
  padding: 6px 0 0;
  border-bottom: none;
  border-top: 1px dashed color-mix(in oklab, var(--o-line) 55%, transparent);
  text-align: center;
}
.ofc-doc-body {
  flex: 1 1 auto;
  outline: none;
  min-height: 18cm;
  line-height: 1.65;
}
.ofc-doc-body > :first-child { margin-top: 0; }
.ofc-doc-body table.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}
.ofc-doc-body table.doc-table td {
  border: 1px solid color-mix(in oklab, var(--o-text) 24%, transparent);
  padding: 7px 9px;
  min-width: 40px;
}
.ofc-doc-body img { max-width: 100%; height: auto; }
.ofc-doc-body blockquote {
  margin: 12px 0;
  padding-left: 14px;
  border-left: 3px solid color-mix(in oklab, var(--ofc-accent) 55%, transparent);
  color: var(--o-muted);
}
.ofc-doc-body pre {
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--o-text) 7%, transparent);
  overflow-x: auto;
}

[contenteditable][data-ph]:empty::before {
  content: attr(data-ph);
  color: var(--o-muted);
  opacity: .55;
  pointer-events: none;
}

/* ── Spreadsheet ────────────────────────────────────────────────────── */
.ofc-namebox {
  flex: 0 0 auto;
  min-width: 56px;
  padding: 4px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--o-line);
  border-radius: 6px;
  background: var(--o-soft);
}
.ofc-fx {
  flex: 0 0 auto;
  width: 26px;
  height: 24px;
  border: 1px solid var(--o-line);
  border-radius: 6px;
  background: transparent;
  color: var(--o-sheet, var(--ofc-accent));
  font: inherit;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  cursor: pointer;
}
.ofc-fx:hover { background: var(--o-soft); }
.ofc-formula {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--o-line);
  border-radius: 6px;
  background: var(--o-bg);
  color: var(--o-text);
  font: inherit;
  font-size: 12.5px;
}
.ofc-formula:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--ofc-accent) 55%, transparent);
}

.ofc-sheet {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ofc-grid-scroll {
  flex: 1 1 auto;
  overflow: auto;
  background: color-mix(in oklab, var(--o-text) 2%, var(--o-bg));
}
.ofc-grid {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--o-surface);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ofc-grid th,
.ofc-grid td {
  border-right: 1px solid var(--o-line);
  border-bottom: 1px solid var(--o-line);
  padding: 4px 8px;
  height: 26px;
  min-width: 92px;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
}
.ofc-grid th {
  position: sticky;
  z-index: 2;
  background: color-mix(in oklab, var(--o-text) 6%, var(--o-surface));
  font-weight: 600;
  font-size: 11.5px;
  color: var(--o-muted);
  text-align: center;
  user-select: none;
  cursor: pointer;
}
.ofc-grid thead th { top: 0; }
.ofc-grid .ofc-rowhdr,
.ofc-grid .ofc-corner { left: 0; min-width: 46px; width: 46px; }
.ofc-grid .ofc-corner { z-index: 3; top: 0; }
.ofc-grid .ofc-rowhdr { position: sticky; }
.ofc-grid th.is-sel {
  background: color-mix(in oklab, var(--ofc-accent) 18%, var(--o-surface));
  color: var(--ofc-accent);
}
.ofc-grid td { outline: none; cursor: cell; }
.ofc-grid td.is-active {
  outline: 2px solid var(--ofc-accent);
  outline-offset: -2px;
  background: color-mix(in oklab, var(--ofc-accent) 7%, transparent);
}

.ofc-sheet-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  height: 34px;
  border-top: 1px solid var(--o-line);
  background: var(--o-surface);
}
.ofc-sheet-tab-list { display: flex; gap: 4px; overflow-x: auto; }
.ofc-sheet-tab {
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--o-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.ofc-sheet-tab:hover { background: var(--o-soft); color: var(--o-text); }
.ofc-sheet-tab.is-on {
  background: color-mix(in oklab, var(--ofc-accent) 14%, transparent);
  border-color: color-mix(in oklab, var(--ofc-accent) 30%, transparent);
  color: var(--ofc-accent);
}
.ofc-sheet-add {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px dashed var(--o-line);
  border-radius: 6px;
  background: transparent;
  color: var(--o-muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.ofc-sheet-add:hover { background: var(--o-soft); color: var(--o-text); }

/* ── Presentation ───────────────────────────────────────────────────── */
.ofc-slides { flex: 1 1 auto; min-width: 0; display: flex; min-height: 0; }
.ofc-slide-rail {
  flex: 0 0 196px;
  width: 196px;
  border-right: 1px solid var(--o-line);
  background: var(--o-surface);
  overflow-y: auto;
}
.ofc-slide-thumbs { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.ofc-thumb {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
.ofc-thumb-no {
  flex: 0 0 auto;
  width: 14px;
  padding-top: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--o-muted);
  font-variant-numeric: tabular-nums;
}
.ofc-thumb-canvas {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 7px;
  border-radius: 5px;
  border: 2px solid transparent;
  overflow: hidden;
  font-size: 6px;
  pointer-events: none;
}
.ofc-thumb.is-on .ofc-thumb-canvas { border-color: var(--ofc-accent); }
.ofc-thumb-canvas .slv-s-title { font-size: 9px; }
.ofc-thumb-canvas .slv-s-body { font-size: 6px; }

.ofc-slide-stage {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  overflow: auto;
  background: color-mix(in oklab, var(--o-text) 4%, var(--o-bg));
}
.ofc-slide-canvas {
  width: min(100%, calc(820px * var(--slide-zoom, 1)));
  flex: 0 0 auto;
  padding: 42px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 14px 40px rgba(0, 0, 0, .16);
  position: relative;
  overflow: hidden;
}
.ofc-slide-canvas .slv-s-title { font-size: 36px; outline: none; }
.ofc-slide-canvas .slv-s-body { font-size: 17px; line-height: 1.5; outline: none; }

.ofc-slide-guides { position: absolute; inset: 0; pointer-events: none; }
.ofc-slide-guides i { position: absolute; background: var(--ofc-accent); opacity: .4; }
.ofc-slide-guides .is-h { left: 0; right: 0; top: 50%; height: 1px; }
.ofc-slide-guides .is-v { top: 0; bottom: 0; left: 50%; width: 1px; }

.ofc-slide-notes {
  width: min(100%, 820px);
  flex: 0 0 auto;
  display: block;
}
.ofc-slide-notes > span {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--o-muted);
}
.ofc-slide-notes textarea {
  width: 100%;
  height: 60px;
  padding: 8px 11px;
  resize: vertical;
  border: 1px solid var(--o-line);
  border-radius: var(--o-radius-sm);
  background: var(--o-surface);
  color: var(--o-text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.ofc-slide-notes textarea:focus { border-color: color-mix(in oklab, var(--ofc-accent) 50%, transparent); }