/* 5OFFICE - the chrome every app in the suite wears.
 *
 * Colours come from the Tango palette, because that is the palette
 * OpenOffice's own icon theme was drawn in: #3465a4 blue, #f57900 orange,
 * #4e9a06 green, #cc0000 red, and the aluminium greys around them.
 *
 * Two rules keep the suite honest inside 5OS:
 *   - every measurement that reacts to width uses a container query on
 *     `.app-root`, never a media query, because an app window resizes
 *     independently of the screen it is on;
 *   - the light theme is the default and is the real one.  A word processor
 *     shows a sheet of paper; paper is white in every light.
 */

/* ------------------------------------------------------------------ */
/* tokens                                                             */
/* ------------------------------------------------------------------ */

:root {
  --tango-blue: #3465a4;
  --tango-blue-light: #729fcf;
  --tango-orange: #f57900;
  --tango-green: #4e9a06;
  --tango-red: #cc0000;
  --tango-plum: #75507b;

  --accent: var(--tango-blue);
  --accent-soft: #dbe6f3;

  --chrome: #eceff3;
  --chrome-hi: #f7f9fb;
  --chrome-lo: #dfe3e8;
  --line: #c4cad2;
  --line-soft: #dde2e8;

  --ink: #1f2328;
  --ink-soft: #5b6570;
  --ink-faint: #8b949e;
  --ink-invert: #ffffff;

  --field: #ffffff;
  --field-line: #a9b2bd;

  --desk: #7f8792;          /* the grey the page floats on */
  --paper: #ffffff;
  --paper-line: #b9c0c8;
  --paper-shadow: rgba(0, 0, 0, .28);
  --text-bounds: #c8d4e4;   /* View > Text Boundaries */

  --sel: #b4d5fe;
  --hover: #e2ebf7;
  --pressed: #cfe0f4;

  --radius: 4px;
  --radius-lg: 7px;
  --shadow-pop: 0 10px 28px rgba(15, 25, 40, .22), 0 1px 3px rgba(15, 25, 40, .18);

  --ui-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ui-size: 13px;
  --mono-font: "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
}

[data-theme="dark"] {
  --accent: #6ea3e0;
  --accent-soft: #22344a;

  --chrome: #24282d;
  --chrome-hi: #2c3138;
  --chrome-lo: #1c1f23;
  --line: #3b4048;
  --line-soft: #33383f;

  --ink: #e6e9ee;
  --ink-soft: #a8b1bd;
  --ink-faint: #737c88;

  --field: #1a1d21;
  --field-line: #454b54;

  --desk: #15171a;
  --paper-line: #4a5058;
  --paper-shadow: rgba(0, 0, 0, .6);
  --text-bounds: #3d4a5c;

  --sel: #2f5c93;
  --hover: #333a43;
  --pressed: #3c4550;
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .5);
}

/* The document itself stays on white paper with black ink in both themes.
   Dark mode dims the room, not the page. */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font: var(--ui-size) / 1.4 var(--ui-font);
  color: var(--ink);
  background: var(--chrome);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Every app roots itself here, and every width-sensitive rule below asks
   this element how wide it is - not the viewport. */
.app-root {
  container-type: inline-size;
  container-name: appwin;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

::selection { background: var(--sel); }

/* ------------------------------------------------------------------ */
/* menu bar                                                           */
/* ------------------------------------------------------------------ */

.menubar {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 1px;
  padding: 0 4px;
  background: linear-gradient(var(--chrome-hi), var(--chrome));
  border-bottom: 1px solid var(--line);
  user-select: none;
}

.menubar-item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 9px;
  border-radius: var(--radius);
  cursor: default;
  white-space: nowrap;
}

.menubar-item:hover { background: var(--hover); }
.menubar-item.is-open { background: var(--accent); color: var(--ink-invert); }
.menubar-item u { text-decoration: none; }
.menubar:focus-within .menubar-item u,
body.show-accels .menubar-item u { text-decoration: underline; }

.menu-popup {
  position: fixed;
  z-index: 900;
  min-width: 190px;
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 4px;
  background: var(--chrome-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  user-select: none;
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius);
  cursor: default;
  white-space: nowrap;
}

.menu-row.is-hover:not(.is-disabled) { background: var(--accent); color: var(--ink-invert); }
.menu-row.is-disabled { color: var(--ink-faint); }
.menu-mark {
  width: 18px;
  display: inline-flex;
  justify-content: center;
  opacity: .85;
  flex: 0 0 auto;
}
.menu-text { flex: 1 1 auto; }
.menu-text u { text-decoration: underline; }
.menu-accel { color: var(--ink-faint); font-size: 11.5px; padding-left: 18px; }
.menu-row.is-hover .menu-accel { color: rgba(255, 255, 255, .8); }
.menu-arrow { display: inline-flex; opacity: .7; }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--line-soft); }

/* ------------------------------------------------------------------ */
/* toolbars                                                           */
/* ------------------------------------------------------------------ */

.toolbar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 1px;
  padding: 3px 6px;
  background: var(--chrome);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: thin;
  user-select: none;
}

.toolbar::-webkit-scrollbar { height: 6px; }
.toolbar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.tb-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius);
  cursor: default;
  flex: 0 0 auto;
  padding: 0;
}

.tb-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--line-soft); }
.tb-btn:active:not(:disabled) { background: var(--pressed); }
.tb-btn.is-active { background: var(--accent-soft); border-color: var(--accent); }
.tb-btn:disabled { opacity: .38; }
.tb-btn .tb-label { font-size: 12px; }
.tb-btn:has(.tb-label) { width: auto; padding: 0 8px; }

.tb-split { display: inline-flex; align-items: center; flex: 0 0 auto; }
.tb-arrow {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  width: 14px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius);
  cursor: default;
}
.tb-arrow:hover { background: var(--hover); border-color: var(--line-soft); }

.tb-sep {
  width: 1px;
  height: 18px;
  margin: 0 5px;
  background: var(--line);
  flex: 0 0 auto;
}

.tb-combo {
  height: 24px;
  min-width: 0;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  padding: 0 4px;
  flex: 0 0 auto;
}
.tb-combo.is-style { width: 148px; }
.tb-combo.is-font { width: 132px; }
.tb-combo.is-size { width: 56px; }

@container appwin (max-width: 860px) {
  .tb-combo.is-style { width: 108px; }
  .tb-combo.is-font { width: 96px; }
}

/* ------------------------------------------------------------------ */
/* work area, sidebar decks                                           */
/* ------------------------------------------------------------------ */

.workarea {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--desk);
}

.deck {
  flex: 0 0 auto;
  width: 268px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  border-right: 1px solid var(--line);
  min-height: 0;
}

.deck.is-right { border-right: 0; border-left: 1px solid var(--line); }
.deck[hidden] { display: none; }

.deck-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 10px;
  font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
  background: var(--chrome-hi);
}
.deck-title .deck-close {
  margin-left: auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  border-radius: var(--radius);
  padding: 3px;
  cursor: default;
}
.deck-title .deck-close:hover { background: var(--hover); color: var(--ink); }
.deck-body { flex: 1 1 auto; overflow: auto; min-height: 0; }

@container appwin (max-width: 720px) {
  .deck { position: absolute; z-index: 40; top: 0; bottom: 0; box-shadow: var(--shadow-pop); }
  .deck.is-right { right: 0; }
}

/* ------------------------------------------------------------------ */
/* dialogs                                                            */
/* ------------------------------------------------------------------ */

.dlg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 26, 34, .34);
}

.dlg {
  width: 560px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.dlg-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  font-weight: 600;
  background: linear-gradient(var(--chrome-hi), var(--chrome));
  border-bottom: 1px solid var(--line);
  cursor: move;
  user-select: none;
}
.dlg-title-text { flex: 1 1 auto; }
.dlg-x {
  appearance: none; border: 0; background: transparent; color: var(--ink-soft);
  padding: 4px; border-radius: var(--radius); cursor: default;
}
.dlg-x:hover { background: var(--tango-red); color: #fff; }

.dlg-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px;
  background: var(--chrome);
}

.dlg-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--chrome-hi);
}
.dlg-spacer { flex: 1 1 auto; }

.dlg-btn {
  appearance: none;
  min-width: 84px;
  padding: 5px 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: linear-gradient(var(--chrome-hi), var(--chrome-lo));
  cursor: default;
}
.dlg-btn:hover { border-color: var(--accent); }
.dlg-btn.is-default {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.dlg-btn.is-default:hover { filter: brightness(1.08); }
.dlg-btn.is-wide { display: block; width: 100%; margin-bottom: 10px; }

/* Save As: the name the file will actually get, spelled out. */
.save-where { margin: 10px 0 4px; color: var(--ink-soft); }
.save-where-label { color: var(--ink-faint); }
.save-name {
  font-family: var(--mono-font);
  background: var(--chrome-hi);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1px 6px;
  color: var(--ink);
}

.dlg-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.dlg-field-label { color: var(--ink-soft); }
.dlg-hint { color: var(--ink-faint); font-size: 11.5px; }
.dlg-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dlg-row > * { flex: 1 1 140px; }
.dlg-row > .is-tight { flex: 0 0 auto; }

.dlg-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px 4px;
  margin: 0 0 12px;
  min-width: 0;
}
.dlg-group > legend { padding: 0 5px; color: var(--ink-soft); font-weight: 600; }

.dlg-input, .dlg-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  min-width: 0;
}
.dlg-input:focus, .dlg-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.dlg-input.is-number, .dlg-input.is-measure { text-align: right; }

.dlg-check { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: default; }
.dlg-check input { margin: 0; accent-color: var(--accent); }

.dlg-color { width: 46px; height: 26px; padding: 1px; border: 1px solid var(--field-line);
             border-radius: var(--radius); background: var(--field); }

.dlg-tabs {
  display: flex;
  gap: 2px;
  padding: 0 2px;
  margin: -12px -12px 12px;
  padding-top: 8px;
  background: var(--chrome-lo);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.dlg-tab {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  padding: 5px 12px;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: default;
  white-space: nowrap;
}
.dlg-tab:hover { background: var(--hover); }
.dlg-tab.is-active { background: var(--chrome); border-color: var(--line); font-weight: 600; }
.dlg-panel { display: none; }
.dlg-panel.is-active { display: block; }

.dlg-msg { display: flex; gap: 12px; align-items: flex-start; padding: 4px 2px 8px; }
.dlg-msg-icon { color: var(--accent); flex: 0 0 auto; }
.dlg-msg-icon.is-warn { color: var(--tango-orange); }
.dlg-msg-text { flex: 1 1 auto; white-space: pre-wrap; }

.dlg-small .dlg-body { padding: 16px; }

/* A simple list used by several dialogs (styles, fields, autocorrect). */
.picklist {
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field);
  overflow: auto;
  max-height: 240px;
}
.picklist-item { padding: 4px 8px; cursor: default; }
.picklist-item:hover { background: var(--hover); }
.picklist-item.is-sel { background: var(--accent); color: #fff; }

/* ------------------------------------------------------------------ */
/* status bar                                                         */
/* ------------------------------------------------------------------ */

.statusbar {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  padding: 0 6px;
  height: 24px;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--chrome);
  border-top: 1px solid var(--line);
  user-select: none;
  overflow: hidden;
}

.sb-cell {
  padding: 0 9px;
  border-right: 1px solid var(--line-soft);
  white-space: nowrap;
  line-height: 22px;
}
.sb-cell:last-child { border-right: 0; }
.sb-cell.is-clickable { cursor: default; }
.sb-cell.is-clickable:hover { background: var(--hover); color: var(--ink); }
.sb-spacer { flex: 1 1 auto; }

@container appwin (max-width: 780px) {
  .sb-cell.is-optional { display: none; }
}

/* ------------------------------------------------------------------ */
/* toasts                                                             */
/* ------------------------------------------------------------------ */

.toasts {
  position: fixed;
  right: 12px;
  bottom: 34px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  min-width: 200px;
  max-width: 340px;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  background: var(--chrome-hi);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-ok { border-left-color: var(--tango-green); }
.toast.is-err { border-left-color: var(--tango-red); }
.toast.is-warn { border-left-color: var(--tango-orange); }
.toast-title { font-weight: 600; }
.toast-text { color: var(--ink-soft); font-size: 12px; }

/* ------------------------------------------------------------------ */
/* icons                                                              */
/* ------------------------------------------------------------------ */

.icon, .i { display: inline-block; vertical-align: -2px; }
svg.i { display: block; }