/* EROffice ribbon, redesign after the prototype in V-DOS Project/eroffice/eroffice-ribbon
   (EROffice.dc.html). Loaded after eroffice.css and chrome.css: it only re-skins what
   GenOffice already draws — same tabs, groups and buttons — so no editor logic changes.

   What it brings: Exo 2 for the chrome, IBM Plex Mono for small labels, the prototype's
   three palettes (obsidian "ember", navy with a gold accent, light with a blue one), a
   ribbon panel with captions under each group, an accent underline on the open tab, and
   filled "File" / "Download" buttons. */

@font-face {
  font-family: 'ER Exo 2';
  src: url('/er/web/fonts/exo-2-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'ER Exo 2';
  src: url('/er/web/fonts/exo-2-cyrillic-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'ER Plex Mono';
  src: url('/er/web/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'ER Plex Mono';
  src: url('/er/web/fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'ER Plex Mono';
  src: url('/er/web/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'ER Plex Mono';
  src: url('/er/web/fonts/ibm-plex-mono-cyrillic-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ------------------------------------------------------------------ palettes
   --rb-* are the prototype's tokens; the EROffice (--er-*) and GenOffice (--accent, --surface…)
   variables are pointed at them so the bar, dialogs and editors agree. */
:root {
  --rb-bg: #0d0d0e;
  --rb-surface: #141416;
  --rb-surface2: #1c1c1f;
  --rb-border: #2a2a2e;
  --rb-text: #f1f1f2;
  --rb-muted: #8f8f96;
  --rb-accent: #f2521f;
  --rb-accent-text: #ffffff;
  --rb-accent-soft: rgba(242, 82, 31, 0.16);
  --rb-hover: rgba(255, 255, 255, 0.06);
  --rb-ribbon: #121214;
  --rb-page: #1b1b1d;
  --er-font: 'ER Exo 2', 'ER Inter', system-ui, sans-serif;
  --er-mono: 'ER Plex Mono', 'ER Mono', ui-monospace, monospace;
}
:root[data-er-theme='navy'] {
  --rb-bg: #0a111f;
  --rb-surface: #0f1a2e;
  --rb-surface2: #162338;
  --rb-border: #22304d;
  --rb-text: #edf1f8;
  --rb-muted: #8a97b2;
  --rb-accent: #f3c247;
  --rb-accent-text: #14181f;
  --rb-accent-soft: rgba(243, 194, 71, 0.16);
  --rb-hover: rgba(255, 255, 255, 0.06);
  --rb-ribbon: #0e1729;
  --rb-page: #131c2c;
}
:root[data-er-theme='light'] {
  --rb-bg: #eef1f5;
  --rb-surface: #ffffff;
  --rb-surface2: #f4f6f9;
  --rb-border: #dbe1ea;
  --rb-text: #1b2436;
  --rb-muted: #66728a;
  --rb-accent: #2c6fe6;
  --rb-accent-text: #ffffff;
  --rb-accent-soft: rgba(44, 111, 230, 0.12);
  --rb-hover: rgba(20, 40, 80, 0.06);
  --rb-ribbon: #ffffff;
  --rb-page: #ffffff;
}

:root,
:root[data-er-theme] {
  --er-void: var(--rb-bg);
  --er-bg: var(--rb-bg);
  --er-panel: var(--rb-surface);
  --er-panel-2: var(--rb-surface2);
  --er-line: var(--rb-border);
  --er-line-bright: color-mix(in srgb, var(--rb-border) 70%, var(--rb-text) 30%);
  --er-text: var(--rb-text);
  --er-muted: var(--rb-muted);
  --er-ember: var(--rb-accent);
  --er-ember-hi: color-mix(in srgb, var(--rb-accent) 85%, #fff 15%);
  --er-ember-soft: var(--rb-accent-soft);
  --er-on-ember: var(--rb-accent-text);
  --er-focus: color-mix(in srgb, var(--rb-accent) 55%, transparent);
}
:root[data-theme],
:root[data-theme='dark'],
:root[data-theme='dark'][data-er-theme='navy'] {
  --accent: var(--rb-accent);
  --accent-dark: color-mix(in srgb, var(--rb-accent) 82%, #000 18%);
  --accent-soft: var(--rb-accent-soft);
  --word-blue: var(--rb-accent);
  --word-blue-dark: color-mix(in srgb, var(--rb-accent) 82%, #000 18%);
  --excel-green: var(--rb-accent);
  --excel-green-dark: color-mix(in srgb, var(--rb-accent) 82%, #000 18%);
  --excel-green-soft: var(--rb-accent-soft);
  --docs-accent-ghost: var(--rb-accent-soft);
  --bg-hover-accent: var(--rb-accent-soft);
  --color-border-brand: var(--rb-accent);
  --color-brand-secondary: var(--rb-accent);
}
:root[data-theme='dark'],
:root[data-theme='dark'][data-er-theme='navy'] {
  --surface: var(--rb-surface);
  --surface-subtle: var(--rb-surface2);
  --chrome-bg: var(--rb-ribbon);
  --canvas: var(--rb-bg);
  --border: var(--rb-border);
  --border-subtle: color-mix(in srgb, var(--rb-border) 70%, transparent);
  --text: var(--rb-text);
  --text-primary: var(--rb-text);
  --text-secondary: color-mix(in srgb, var(--rb-text) 70%, var(--rb-muted) 30%);
  --text-tertiary: var(--rb-muted);
  --text-muted: var(--rb-muted);
  --hover: var(--rb-hover);
  --bg-hover: var(--rb-hover);
  --color-bg-page: var(--rb-surface);
  --color-bg-subtle: var(--rb-surface2);
  --color-border-default: var(--rb-border);
}

/* ------------------------------------------------------------------ the EROffice bar */
#er-bar {
  font-family: var(--er-font);
  background: var(--rb-bg);
  border-bottom: 1px solid var(--rb-border);
}
/* the "E." mark on an accent square, as in the prototype */
#er-bar .er-home img { display: none; }
#er-bar .er-home::before {
  content: 'E.';
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--rb-accent);
  color: var(--rb-accent-text);
  font: 800 13px/1 var(--er-font);
}
:root { --er-bar-h: 48px; }
#er-bar .er-title { font-weight: 700; letter-spacing: -0.005em; }
/* "Download" is the bar's one filled button */
#er-bar [data-act='download'] {
  background: var(--rb-accent);
  border-color: var(--rb-accent);
  color: var(--rb-accent-text);
  font-weight: 700;
}
#er-bar [data-act='download']:hover { background: color-mix(in srgb, var(--rb-accent) 88%, #fff 12%); }

/* ------------------------------------------------------------------ ribbon: tabs row */
.ribbon,
.excel-header {
  background: var(--rb-ribbon) !important;
  border-bottom: 1px solid var(--rb-border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.ribbon,
.ribbon *,
.excel-header,
.excel-header * {
  font-family: var(--er-font), var(--ui-cjk, sans-serif), sans-serif;
}
.ribbon-tabs {
  min-height: 44px;
  background: var(--rb-bg) !important;
  border-bottom: 1px solid var(--rb-border) !important;
}
.ribbon-tab,
.ribbon-tabs > button:not(.qa-btn) {
  color: var(--rb-muted) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: transparent !important;
  transition: color 0.12s ease;
}
.ribbon-tab:hover,
.ribbon-tabs > button:not(.qa-btn):hover { color: var(--rb-text) !important; }
.ribbon-tab.active,
.ribbon-tabs > button:not(.qa-btn).active {
  color: var(--rb-accent) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -2px 0 var(--rb-accent) !important;
}
.ribbon-tab.active::after,
.ribbon-tabs > button:not(.qa-btn).active::after { display: none !important; }
/* "File": filled in the accent */
.ribbon-tab-file,
.ribbon-tab.ribbon-tab-file {
  background: var(--rb-accent) !important;
  color: var(--rb-accent-text) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.ribbon-tab-file:hover { background: color-mix(in srgb, var(--rb-accent) 88%, #fff 12%) !important; }

/* ------------------------------------------------------------------ ribbon: groups */
.ribbon-body { padding: 6px 8px 5px !important; }
.ribbon-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  position: relative;
}
/* the caption under each group — GenOffice renders it but hides it */
.ribbon-group-label {
  display: block !important;
  order: 99;
  padding: 5px 4px 0 !important;
  font: 400 9.5px/1.2 var(--er-mono) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--rb-muted) !important;
  text-align: center;
  white-space: nowrap;
}
/* Sheets keeps the group name in aria-label only; its ::after is the group separator */
.excel-header .ribbon-group[aria-label]::before {
  content: attr(aria-label);
  order: 99;
  display: block;
  padding: 5px 4px 0;
  font: 400 9.5px/1.2 var(--er-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rb-muted);
  text-align: center;
  white-space: nowrap;
}
.excel-header .ribbon-group { align-items: center !important; }
.ribbon-sep {
  width: 1px !important;
  align-self: stretch !important;
  margin: 6px 3px 10px !important;
  background: linear-gradient(to bottom, transparent, var(--rb-border) 25%, var(--rb-border) 75%, transparent) !important;
  border: 0 !important;
}

/* buttons: soft rounded hover, accent-soft when pressed */
.rb-big,
.rb-small,
.rb-icon,
.rb-btn,
.rb-view,
.ribbon-tool,
.qa-btn {
  border-radius: 7px !important;
  transition: background-color 0.12s ease;
}
.rb-big:hover:not(:disabled),
.rb-small:hover:not(:disabled),
.rb-icon:hover:not(:disabled),
.rb-btn:hover:not(:disabled),
.ribbon-tool:hover:not(:disabled) { background: var(--rb-hover) !important; }
.rb-big.active,
.rb-small.active,
.rb-icon.active,
.rb-btn.active,
.ribbon-tool.active {
  background: var(--rb-accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--rb-accent-soft) !important;
}
.rb-big { font-size: 11.5px !important; }
.rb-big.ai-entry.active { color: var(--rb-accent) !important; }
.rb-big.ai-entry.active svg { color: var(--rb-accent); }

/* combos (font, size) as prototype inputs */
.ribbon select,
.ribbon input[type='text'],
.excel-header select,
.excel-header .select-like {
  background: var(--rb-surface) !important;
  border: 1px solid var(--rb-border) !important;
  border-radius: 7px !important;
  color: var(--rb-text) !important;
}

/* ------------------------------------------------------------------ around the ribbon */
.ribbon-collapse-btn { color: var(--rb-muted) !important; border-radius: 7px !important; }
.ribbon-collapse-btn:hover { background: var(--rb-hover) !important; color: var(--rb-text) !important; }
.status-bar,
.statusbar { background: var(--rb-bg) !important; border-top: 1px solid var(--rb-border) !important; }
input[type='range'] { accent-color: var(--rb-accent); }

/* Sheets' band is a fixed 80 px: make room for the captions under the groups */
.excel-header .ribbon { height: 98px !important; padding-bottom: 4px; }

/* ------------------------------------------------------------------ ribbon modes
   html[data-er-ribbon] is set by er/web-shim/ribbon-modes.ts (View tab → "Ribbon" group). */

/* the mode switch at the right end of the tabs row (V2 of the prototype) */
.er-rb-mode { position: relative; margin-left: auto; margin-right: 6px; flex: 0 0 auto; align-self: center; }
.ribbon-tabs-spacer + .er-rb-mode,
.er-rb-mode:not(:first-child) { margin-left: 10px; }
.er-rb-mode-btn {
  display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px;
  border: 1px solid var(--rb-border); border-radius: 7px; background: var(--rb-surface2);
  color: var(--rb-text); font: 600 12px/1 var(--er-font); white-space: nowrap; cursor: pointer;
}
.er-rb-mode-btn:hover { border-color: var(--rb-muted); }
.er-rb-mode-btn svg:last-child { opacity: 0.7; }
.er-rb-mode-menu {
  position: absolute; right: 0; top: 34px; z-index: 60; width: 280px; padding: 6px;
  background: var(--rb-surface); border: 1px solid var(--rb-border); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); animation: er-rb-pop 0.16s ease;
}
@keyframes er-rb-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.er-rb-mode-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 7px; background: transparent; color: var(--rb-text);
  text-align: left; cursor: pointer; font-family: var(--er-font);
}
.er-rb-mode-item:hover { background: var(--rb-hover); }
.er-rb-mode-item.on { background: var(--rb-accent-soft); }
.er-rb-mode-item svg { flex: 0 0 auto; margin-top: 1px; }
.er-rb-mode-item.on svg, .er-rb-mode-item.on b { color: var(--rb-accent); }
.er-rb-mode-text { display: grid; gap: 2px; }
.er-rb-mode-text b { font-size: 13px; font-weight: 700; }
.er-rb-mode-text small { font-size: 11.5px; color: var(--rb-muted); }

/* Compact never shows the captions under the groups */
:root[data-er-ribbon='compact'] .ribbon-group-label { display: none !important; }
:root[data-er-ribbon='compact'] .excel-header .ribbon-group[aria-label]::before { content: none; }

/* Compact: one row of controls — big buttons turn sideways, stacked rows line up */
:root[data-er-ribbon='compact'] .ribbon-body { padding: 3px 8px !important; }
:root[data-er-ribbon='compact'] .ribbon-group-items,
:root[data-er-ribbon='compact'] .ribbon-rows { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 2px !important; }
:root[data-er-ribbon='compact'] .rb-row,
:root[data-er-ribbon='compact'] .inline-tools { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; }
:root[data-er-ribbon='compact'] .rb-big,
:root[data-er-ribbon='compact'] .ribbon-tool.large {
  flex-direction: row !important;
  height: 30px !important;
  min-height: 30px !important;
  min-width: 0 !important;
  gap: 6px !important;
  padding: 0 8px !important;
  font-size: 12.5px !important;
  white-space: nowrap;
}
:root[data-er-ribbon='compact'] .rb-big svg,
:root[data-er-ribbon='compact'] .ribbon-tool.large svg { width: 16px !important; height: 16px !important; }
:root[data-er-ribbon='compact'] .excel-header .ribbon { height: 46px !important; }
:root[data-er-ribbon='compact'] .ribbon-sep { margin: 4px 3px !important; }
:root[data-er-ribbon='compact'] .style-card { height: 30px !important; }

/* Floating: the controls leave the flow and hover over the document as a glass panel */
:root[data-er-ribbon='floating'] .ribbon,
:root[data-er-ribbon='floating'] .excel-header { position: relative; overflow: visible !important; }
:root[data-er-ribbon='floating'] .ribbon-body,
:root[data-er-ribbon='floating'] .excel-header .ribbon {
  position: absolute !important;
  top: calc(100% + 10px);
  left: var(--er-rb-float-left, 12px);
  right: 12px;
  z-index: 30;
  height: auto !important;
  padding: 6px 6px 4px !important;
  background: color-mix(in srgb, var(--rb-surface) 80%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--rb-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  overflow-x: auto;
  animation: er-rb-float 0.22s ease;
}
/* the tabs row stays where it was; the band it lived in collapses to it */
:root[data-er-ribbon='floating'] .excel-header { height: auto !important; }
@keyframes er-rb-float { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
/* Sheets' View → Show: a column of check items becomes a row in Compact */
:root[data-er-ribbon='compact'] .check-column { display: flex !important; flex-direction: row !important; gap: 10px !important; align-items: center; white-space: nowrap; }
/* Sheets in Compact: every stack inside a group (style lists, cell tools) lines up in the row */
:root[data-er-ribbon='compact'] .excel-header .ribbon-group-content,
:root[data-er-ribbon='compact'] .excel-header .ribbon-group-content * { flex-direction: row !important; }
:root[data-er-ribbon='compact'] .excel-header .ribbon-group-content > *,
:root[data-er-ribbon='compact'] .excel-header .ribbon-group-content > * > * { flex-wrap: nowrap !important; align-items: center !important; gap: 4px; }
:root[data-er-ribbon='compact'] .excel-header .ribbon-group-content button { white-space: nowrap; }
:root[data-er-ribbon='compact'] .excel-header .ribbon-rows,
:root[data-er-ribbon='compact'] .excel-header .tool-stack,
:root[data-er-ribbon='compact'] .excel-header .styles-stack {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}
:root[data-er-ribbon='compact'] .excel-header .ribbon-tool.large .tool-symbol { width: 18px !important; height: 18px !important; }
/* Sheets in Compact, every tab: any block inside a group lays out as a row (Insert's
   picture/icon pairs, the chart grid, slicer/timeline…), and the band never spills over */
:root[data-er-ribbon='compact'] .excel-header .ribbon-group-content div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px;
}
:root[data-er-ribbon='compact'] .excel-header .ribbon { overflow-y: hidden !important; align-items: center !important; }
:root[data-er-ribbon='compact'] .excel-header .ribbon-group { height: 100%; }

/* Band heights as in the prototype. GenOffice fixes its band at 80 px (so it does not jump
   between tabs); the heights stay fixed, only the values follow the mode: 96 with the group
   titles (Classic), 46 for the single row (Compact). */
:root .ribbon-body { height: 96px !important; box-sizing: border-box; }
:root[data-er-ribbon='compact'] .ribbon-body { height: 46px !important; overflow-y: hidden !important; align-items: center !important; }
:root[data-er-ribbon='compact'] .ribbon-group,
:root[data-er-ribbon='compact'] .ribbon-group-items { height: auto !important; align-items: center !important; }
:root[data-er-ribbon='compact'] .excel-header .ribbon { height: 46px !important; }
:root[data-er-ribbon='floating'] .ribbon-body { height: auto !important; min-height: 96px; }
/* Compact, the other editors: their column stacks line up in the row too */
:root[data-er-ribbon='compact'] .rb-col,
:root[data-er-ribbon='compact'] .layout-col,
:root[data-er-ribbon='compact'] .ink-settings,
:root[data-er-ribbon='compact'] .rb-anim-timing,
:root[data-er-ribbon='compact'] .rb-check-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
}
:root[data-er-ribbon='compact'] .theme-card { flex-direction: row !important; height: 30px !important; }
:root[data-er-ribbon='compact'] .theme-card > :first-child { max-height: 22px; }
/* Slides → Draw: the pen tray draws tall pens; in Compact it is cut to the row */
:root[data-er-ribbon='compact'] .pen-tray { align-self: center !important; height: 34px !important; overflow: hidden !important; align-items: flex-start !important; }
:root[data-er-ribbon='compact'] .ribbon-body .ribbon-group { padding-top: 0 !important; padding-bottom: 0 !important; max-height: 40px; }

/* ---- More (er/web-shim/ribbon-overflow.ts): groups that do not fit go behind a button ---- */
[data-er-overflow] { overflow-x: hidden !important; }
.ribbon-group[data-er-over]:not([data-er-open]) { display: none !important; }
.ribbon-group[data-er-over] + .ribbon-sep,
.ribbon-group[data-er-over] + .rb-sep,
.ribbon-group[data-er-over] + .rb-spacer { display: none !important; }
.ribbon-group[data-er-open] {
  position: fixed !important;
  top: var(--er-over-top, 0);
  left: var(--er-over-left, 0);
  z-index: 2100;
  height: auto !important;
  max-width: calc(100vw - 16px);
  padding: 8px 10px 6px !important;
  background: var(--er-panel);
  border: 1px solid var(--er-line-bright);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  animation: er-pop 0.14s ease;
}
@keyframes er-pop { from { opacity: 0; transform: translateY(-4px); } }
.er-rb-more {
  position: fixed;
  z-index: 2050;
  width: 68px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--er-muted);
  font: 500 11px/1 var(--er-font);
  cursor: pointer;
}
.er-rb-more[hidden] { display: none; }
.er-rb-more:hover, .er-rb-more.is-open { background: var(--er-ember-soft); color: var(--er-text); }
html[data-er-ribbon='compact'] .er-rb-more { flex-direction: row; height: 30px; width: 68px; }

/* PDF, Markdown and HTML: captions named by er/web-shim/ribbon-captions.ts */
.ribbon-body > .ribbon-group[data-er-caption]::after {
  content: attr(data-er-caption);
  order: 99;
  display: block;
  padding: 5px 4px 0;
  font: 400 9.5px/1.2 var(--er-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rb-muted);
  text-align: center;
  white-space: nowrap;
}
:root[data-er-ribbon='compact'] .ribbon-body > .ribbon-group[data-er-caption]::after { display: none; }