/* ===========================================================================
   Docs — a Google-Docs-class document editor for the file tile.

   Layout contract (the bug this replaced): the sheet is a FIXED page column
   (8.5in = 816px) centred in a scrolling canvas. It must never shrink-to-fit
   the longest line — that is what made a 4-bullet note render as a 460px
   sliver. `.gd-sheet` owns the width; the ProseMirror node only fills it.

   Theming: every colour is a `--gd-*` token declared once per theme below, so
   the whole surface flips with the host theme (both the `[data-theme]` used by
   index.html and the `.cos-root.cos-dark` used by the CloudOS shell).
   =========================================================================== */

.gdocs {
  /* light theme tokens */
  --gd-canvas: #f0f2f5;
  --gd-page: #ffffff;
  --gd-page-shadow: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .12);
  --gd-ink: #202124;
  --gd-ink-2: #3c4043;
  --gd-muted: #5f6368;
  --gd-line: #dadce0;
  --gd-line-soft: #e8eaed;
  --gd-chrome: #ffffff;
  --gd-hover: #f1f3f4;
  --gd-accent: #1a73e8;
  --gd-accent-soft: #e8f0fe;
  --gd-selection: rgba(26, 115, 232, .22);
  --gd-danger: #d93025;

  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--gd-canvas);
  color: var(--gd-ink);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] .gdocs,
.cos-root.cos-dark .gdocs {
  --gd-canvas: #16181d;
  --gd-page: #1f2126;
  --gd-page-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 6px 16px rgba(0, 0, 0, .45);
  --gd-ink: #e8eaed;
  --gd-ink-2: #dadce0;
  --gd-muted: #9aa0a6;
  --gd-line: #3c4043;
  --gd-line-soft: #2a2d33;
  --gd-chrome: #1b1d22;
  --gd-hover: #2a2d33;
  --gd-accent: #8ab4f8;
  --gd-accent-soft: #29354a;
  --gd-selection: rgba(138, 180, 248, .28);
  --gd-danger: #f28b82;
}

/* ---------- chrome: menu bar + toolbar ---------- */

.gd-chrome {
  flex: 0 0 auto;
  background: var(--gd-chrome);
  border-bottom: 1px solid var(--gd-line);
}

.gd-menubar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px 0;
  min-height: 26px;
}

.gd-menubar button {
  font: inherit;
  font-size: 12.5px;
  color: var(--gd-ink-2);
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
}

.gd-menubar button:hover,
.gd-menubar button[aria-expanded="true"] {
  background: var(--gd-hover);
}

.gd-menubar .gd-spacer { flex: 1 1 auto; }

.gd-menubar .gd-wc {
  font-size: 11.5px;
  color: var(--gd-muted);
  padding-right: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  padding: 4px 8px 6px;
}

.gd-toolbar button {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 0;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gd-ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: background .12s, color .12s;
  position: relative;
}

.gd-toolbar button:hover { background: var(--gd-hover); }
.gd-toolbar button.active { background: var(--gd-accent-soft); color: var(--gd-accent); }
.gd-toolbar button:disabled { opacity: .35; cursor: default; background: none; }
.gd-toolbar button .material-symbols-outlined { font-size: 19px; }

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

/* dropdown-style toolbar controls (style, font, size, zoom) */
.gd-toolbar .gd-select {
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gd-ink-2);
  font: inherit;
  font-size: 12.5px;
  padding: 0 4px 0 8px;
  cursor: pointer;
  max-width: 150px;
  flex: 0 0 auto;
}

.gd-toolbar .gd-select:hover { background: var(--gd-hover); }
.gd-toolbar .gd-select:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 1px; }
.gd-toolbar .gd-select option { background: var(--gd-chrome); color: var(--gd-ink); }

/* font-size stepper */
.gd-size {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
}

.gd-size input {
  width: 34px;
  height: 24px;
  text-align: center;
  border: 1px solid var(--gd-line);
  border-radius: 4px;
  background: transparent;
  color: var(--gd-ink);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.gd-size input:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 1px; }

/* colour buttons show the current colour as an underline swatch */
.gd-colorbtn { flex-direction: column !important; gap: 0; }
.gd-colorbtn .material-symbols-outlined { font-size: 17px; line-height: 1; margin-top: -1px; }
.gd-colorbtn i {
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 1px;
  background: currentColor;
  margin-top: 1px;
}

/* ---------- popovers (menus, colour pickers) ---------- */

.gd-pop {
  position: fixed;
  z-index: 9500;
  min-width: 200px;
  background: var(--gd-chrome);
  border: 1px solid var(--gd-line);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .18);
  padding: 6px 0;
  font-size: 13px;
  color: var(--gd-ink);
  max-height: min(70vh, 520px);
  overflow: auto;
}

.gd-pop .gd-mi {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gd-pop .gd-mi:hover { background: var(--gd-hover); }
.gd-pop .gd-mi[disabled] { opacity: .4; cursor: default; background: none; }
.gd-pop .gd-mi .material-symbols-outlined { font-size: 18px; color: var(--gd-muted); flex: 0 0 auto; }
.gd-pop .gd-mi .gd-key { margin-left: auto; color: var(--gd-muted); font-size: 11.5px; padding-left: 22px; }
.gd-pop .gd-mi.on .material-symbols-outlined { color: var(--gd-accent); }
.gd-pop hr { border: 0; border-top: 1px solid var(--gd-line-soft); margin: 5px 0; }

.gd-swatches {
  display: grid;
  grid-template-columns: repeat(10, 20px);
  gap: 4px;
  padding: 10px 12px;
}

.gd-swatches button {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .16);
  cursor: pointer;
  padding: 0;
}

.gd-swatches button:hover { transform: scale(1.12); }
.gd-swatches button.gd-none { background: var(--gd-page); position: relative; overflow: hidden; }
.gd-swatches button.gd-none::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, transparent 45%, var(--gd-danger) 45%, var(--gd-danger) 55%, transparent 55%);
}

/* ---------- body: outline rail + canvas ---------- */

.gd-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.gd-outline {
  flex: 0 0 232px;
  border-right: 1px solid var(--gd-line);
  background: var(--gd-canvas);
  overflow: auto;
  padding: 16px 10px 40px;
  display: none;
}

.gd-outline.open { display: block; }

.gd-outline h6 {
  margin: 0 0 8px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gd-muted);
}

.gd-outline button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--gd-ink-2);
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gd-outline button:hover { background: var(--gd-hover); color: var(--gd-accent); }
.gd-outline button[data-lvl="2"] { padding-left: 20px; font-size: 12px; }
.gd-outline button[data-lvl="3"] { padding-left: 32px; font-size: 12px; color: var(--gd-muted); }
.gd-outline .gd-empty { padding: 4px 8px; color: var(--gd-muted); font-size: 12px; line-height: 1.5; }

.gd-canvas {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  padding: 24px 0 72px;
  /* the ruler is sticky against this scroller */
  scroll-padding-top: 24px;
}

/* THE page column. Fixed 8.5in — this is what makes it read as a document. */
.gd-sheet {
  width: 816px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--gd-page);
  box-shadow: var(--gd-page-shadow);
  border-radius: 2px;
  min-height: 1056px;                 /* 11in — an empty doc still looks like a page */
  box-sizing: border-box;
  padding: var(--gd-margin-y, 72px) var(--gd-margin-x, 96px);
  position: relative;
}

/* pageless: full-bleed writing surface, no sheet metaphor (Docs "Pageless" view) */
.gdocs.gd-pageless .gd-sheet {
  width: min(100%, 1100px);
  min-height: 100%;
  box-shadow: none;
  border-radius: 0;
  background: var(--gd-page);
  padding: 40px clamp(20px, 6%, 80px);
}

.gdocs.gd-pageless .gd-canvas { background: var(--gd-page); padding-top: 8px; }

/* page-break guides (View ▸ Show page breaks) — 11in rhythm, drawn behind the text */
.gd-breaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.gdocs.gd-showbreaks .gd-breaks { display: block; }

.gd-breaks span {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--gd-line);
}

/* ---------- the document text ---------- */

.gd-sheet .ProseMirror {
  outline: none;
  min-height: 320px;
  font-family: var(--gd-font, Arial, Helvetica, sans-serif);
  font-size: 11pt;
  line-height: 1.5;
  color: var(--gd-ink);
  word-wrap: break-word;
  white-space: pre-wrap;
  caret-color: var(--gd-ink);
}

.gd-sheet .ProseMirror ::selection { background: var(--gd-selection); }
.gd-sheet .ProseMirror p { margin: 0 0 10px; }
.gd-sheet .ProseMirror > *:last-child { margin-bottom: 0; }

.gd-sheet .ProseMirror h1 { font-size: 20pt; font-weight: 400; line-height: 1.25; margin: 20px 0 6px; color: var(--gd-ink); }
.gd-sheet .ProseMirror h2 { font-size: 16pt; font-weight: 400; line-height: 1.3; margin: 18px 0 6px; color: var(--gd-ink); }
.gd-sheet .ProseMirror h3 { font-size: 14pt; font-weight: 400; line-height: 1.3; margin: 16px 0 4px; color: var(--gd-ink-2); }
.gd-sheet .ProseMirror h4 { font-size: 12pt; font-weight: 700; margin: 14px 0 4px; }
.gd-sheet .ProseMirror h5 { font-size: 11pt; font-weight: 700; margin: 12px 0 4px; }
.gd-sheet .ProseMirror h6 { font-size: 11pt; font-weight: 700; font-style: italic; margin: 12px 0 4px; color: var(--gd-muted); }
.gd-sheet .ProseMirror h1:first-child,
.gd-sheet .ProseMirror h2:first-child,
.gd-sheet .ProseMirror h3:first-child { margin-top: 0; }

.gd-sheet .ProseMirror ul,
.gd-sheet .ProseMirror ol { margin: 0 0 10px; padding-left: 26px; }
.gd-sheet .ProseMirror li { margin: 0 0 3px; }
.gd-sheet .ProseMirror li > p { margin: 0; }

.gd-sheet .ProseMirror blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--gd-line);
  color: var(--gd-ink-2);
}

.gd-sheet .ProseMirror hr {
  border: 0;
  border-top: 1px solid var(--gd-line);
  margin: 18px 0;
}

.gd-sheet .ProseMirror a { color: var(--gd-accent); text-decoration: underline; cursor: pointer; }
/* The highlight fill is fixed (it is document content, not chrome) - so the INK on it must be
   fixed too. `color: inherit` meant dark theme put near-white text on pale yellow: 1.06:1, i.e.
   invisible. Marking the fill theme-ok was right; leaving the ink inherited was not. */
.gd-sheet .ProseMirror mark { background: #fff475; color: #202124; border-radius: 2px; padding: 0 1px; } /* theme-ok: fixed highlight pair, contrast-checked 15.9:1 */

.gd-sheet .ProseMirror code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--gd-hover);
  border-radius: 3px;
  padding: 1px 4px;
}

.gd-sheet .ProseMirror pre {
  background: var(--gd-hover);
  border: 1px solid var(--gd-line-soft);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 12px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10pt;
  line-height: 1.5;
}

.gd-sheet .ProseMirror pre code { background: none; padding: 0; font-size: inherit; }

.gd-sheet .ProseMirror img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
  margin: 6px 0;
}

.gd-sheet .ProseMirror img.ProseMirror-selectednode { outline: 2px solid var(--gd-accent); }

/* checklists */
.gd-sheet .ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
.gd-sheet .ProseMirror ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 8px; }
.gd-sheet .ProseMirror ul[data-type="taskList"] li > label { flex: 0 0 auto; margin-top: 3px; user-select: none; }
.gd-sheet .ProseMirror ul[data-type="taskList"] li > div { flex: 1 1 auto; min-width: 0; }
.gd-sheet .ProseMirror ul[data-type="taskList"] input[type="checkbox"] { accent-color: var(--gd-accent); cursor: pointer; }
.gd-sheet .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--gd-muted); text-decoration: line-through; }

/* tables */
.gd-sheet .ProseMirror table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 12px 0;
  overflow: hidden;
}

.gd-sheet .ProseMirror td,
.gd-sheet .ProseMirror th {
  border: 1px solid var(--gd-line);
  padding: 6px 9px;
  vertical-align: top;
  position: relative;
  min-width: 1em;
}

.gd-sheet .ProseMirror th { background: var(--gd-hover); font-weight: 700; text-align: left; }
.gd-sheet .ProseMirror .selectedCell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gd-selection);
  pointer-events: none;
}

.gd-sheet .ProseMirror .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gd-accent);
  pointer-events: none;
}

/* placeholder */
.gd-sheet .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: var(--gd-muted);
}

/* Search highlighting - same trap as <mark>: a translucent warm tint over a dark page left the
   inherited light ink at ~3:1. Both states now pin their own ink against a fixed fill. */
.gd-hit { background: #ffd54f; color: #202124; border-radius: 2px; }        /* theme-ok: fixed match pair, 12.6:1 */
.gd-hit-active { background: #f9a825; color: #1a1a1a; border-radius: 2px; } /* theme-ok: fixed active-match pair, 9.7:1 */

/* ---------- find & replace bar ---------- */

.gd-find {
  position: absolute;
  top: 8px;
  right: 18px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: var(--gd-chrome);
  border: 1px solid var(--gd-line);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.gd-find.open { display: flex; }

.gd-find input {
  height: 28px;
  width: 148px;
  border: 1px solid var(--gd-line);
  border-radius: 6px;
  background: transparent;
  color: var(--gd-ink);
  font: inherit;
  font-size: 12.5px;
  padding: 0 8px;
}

.gd-find input:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: -1px; border-color: var(--gd-accent); }
.gd-find .gd-count { font-size: 11.5px; color: var(--gd-muted); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }

.gd-find button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gd-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gd-find button:hover { background: var(--gd-hover); }
.gd-find button.gd-wide { width: auto; padding: 0 10px; font: inherit; font-size: 12px; }
.gd-find .material-symbols-outlined { font-size: 18px; }

/* the find bar anchors to the body box */
.gd-body { position: relative; }

/* ---------- responsive: narrow tiles ---------- */

@media (max-width: 900px) {
  .gd-outline.open { display: none; }
}

@media (max-width: 860px) {
  .gd-sheet { padding-left: clamp(20px, 8%, 96px); padding-right: clamp(20px, 8%, 96px); }
}

@media (prefers-reduced-motion: reduce) {
  .gd-swatches button:hover { transform: none; }
  .gdocs *, .gdocs *::before, .gdocs *::after { transition-duration: .01ms !important; }
}

/* Printing goes through an off-screen iframe (see print() in docs.js) — the host
   page hides non-shell body children, so an @media print body swap would print
   an empty page. Nothing to declare here. */

/* ---------- host containers ----------
   The legacy dual-panel viewer (.file-preview) scrolls its own box; the office
   editors scroll internally, so they need a definite height and no outer
   scrollbar. The CloudOS shell does this via .cos-wysiwyg / .cos-sheets in
   shell.css — this is the same contract for the other host. */

.file-preview:has(> .gdocs),
.file-preview:has(> .gsheet),
.file-preview:has(> .gslides) { overflow: hidden; padding: 0; display: flex; min-height: 0; }

.file-preview > .gdocs,
.file-preview > .gsheet,
.file-preview > .gslides { flex: 1 1 auto; min-height: 0; height: auto; }

/* read-only badge (an imported .docx opens as a view, never as an editor) */
.gd-menubar .gd-ro {
  font-size: 11px;
  font-weight: 600;
  color: var(--gd-muted);
  border: 1px solid var(--gd-line);
  border-radius: 999px;
  padding: 2px 9px;
  margin-right: 8px;
  white-space: nowrap;
}

/* read-only import: the editing controls are inert, so they must not look clickable */
.gdocs.gd-readonly .gd-toolbar button[disabled],
.gdocs.gd-readonly .gd-toolbar .gd-select[disabled],
.gdocs.gd-readonly .gd-size input[disabled] { opacity: .35; cursor: default; }
.gdocs.gd-readonly .gd-toolbar button[disabled]:hover { background: none; }