/* Extra styles for the Docs editor menus and views. */

/* find-match highlight colours, per theme */
:root { --find-hit: rgba(255, 196, 0, .38); --find-current: rgba(255, 128, 0, .55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --find-hit: rgba(255, 196, 0, .26); --find-current: rgba(255, 140, 0, .5); }
}
:root[data-theme="dark"] { --find-hit: rgba(255, 196, 0, .26); --find-current: rgba(255, 140, 0, .5); }

/* the page area: holds the scroller and the floating find bar */
.doc-area { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.doc-area .doc-scroll { flex: 1; }

/* footer word count opens the Word count dialog */
.doc-foot[role="button"] { cursor: pointer; user-select: none; }
.doc-foot[role="button"]:hover { background: var(--surface-2); color: var(--text); }
.doc-foot[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* View ▸ Mode ▸ Viewing (for people who could edit) */
.doc-modebar { display: flex; align-items: center; gap: 10px; margin: 4px 12px 8px; padding: 4px 6px 4px 14px; min-height: 40px;
  background: var(--surface-2); border-radius: 999px; font-size: 13.5px; color: var(--text-2); flex: none; }
.doc-modebar .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* View ▸ Page layout ▸ Pageless */
.editor.doc-pageless .doc-scroll { background: var(--page); padding: 0 0 120px; }
.editor.doc-pageless .doc-page { width: auto; max-width: none; min-height: 100%; box-shadow: none; border: 0;
  padding: 40px max(24px, 7vw) 80px; }

/* View ▸ Zoom above 100%: scale the page instead of squeezing it into the window */
.doc-paper.doc-zoomed, .doc-paper.doc-zoomed > .doc-page { max-width: none; }

/* View ▸ Full screen */
.editor.doc-fullscreen .editor-head,
.editor.doc-fullscreen .toolbar,
.editor.doc-fullscreen .doc-modebar { display: none !important; }
.btn.doc-exit-fs { display: none; position: fixed; top: 10px; right: 16px; z-index: 650; box-shadow: var(--shadow-2); }
.editor.doc-fullscreen .btn.doc-exit-fs { display: inline-flex; }

/* Edit ▸ Find */
.doc-find { position: absolute; top: 8px; right: 24px; z-index: 30; display: flex; align-items: center; gap: 2px;
  padding: 6px 6px 6px 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-2); }
.doc-find .input { width: 220px; height: 32px; }
.doc-find-count { min-width: 64px; padding: 0 6px; font-size: 12.5px; color: var(--text-3); text-align: center; white-space: nowrap; }
.doc-find.none .doc-find-count { color: var(--danger); }
.doc-find-case { height: 30px; min-width: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-2); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.doc-find-case:hover { background: var(--surface-2); color: var(--text); }
.doc-find-case[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent); }
.doc-find .btn.ghost { padding: 0 8px; }
::highlight(doc-find) { background-color: var(--find-hit, rgba(255, 196, 0, .38)); }
::highlight(doc-find-current) { background-color: var(--find-current, rgba(255, 128, 0, .55)); }
/* in full screen the floating "Exit full screen" button sits where the find bar would */
.editor.doc-fullscreen .doc-find { top: 56px; }

/* context menu footnote and menu hints */
.menu-foot { margin-top: 6px; padding: 8px 16px 4px; border-top: 1px solid var(--border); font-size: 11.5px;
  color: var(--text-3); white-space: normal; line-height: 1.4; }

/* Insert ▸ Special characters / Emoji */
.doc-chars-head { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); }
.doc-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.doc-chars button { height: 40px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.doc-chars button:hover, .doc-chars button:focus-visible { background: var(--surface-2); border-color: var(--border-strong); outline: none; }
.doc-chars button:active { background: var(--accent-weak); }
.doc-chars.emoji { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.doc-chars.emoji button { height: 42px; font-size: 22px; border-color: transparent;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", var(--font); }

/* Insert ▸ Link to a file in Drive */
.doc-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-pick-when { font-size: 12.5px; white-space: nowrap; }
.picker-item:focus-visible { outline: none; background: var(--accent-weak); }

/* Tools ▸ Document outline */
.doc-outline-item { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-2); font-size: 13.5px; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-outline-item.top { color: var(--text); font-weight: 600; }
.doc-outline-item:hover, .doc-outline-item:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }

/* Tools ▸ Word count */
.doc-wc th:not(:first-child), .doc-wc td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* Help dialogs */
.doc-keys td:last-child { text-align: right; white-space: nowrap; }
.doc-keys tr.group td { padding: 16px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); }
.doc-keys tr:first-child.group td { padding-top: 4px; }
.doc-help-head { margin: 4px 0 6px; font-weight: 600; color: var(--text); }
.doc-help-list { margin: 0 0 16px; padding-left: 20px; color: var(--text-2); }
.doc-help-list li { margin: 3px 0; }

/* live co-editing: unsaved text kept after a reload (the restored-draft banner and its dialog) */
.banner.doc-draft-banner { flex-wrap: wrap; row-gap: 6px; }
.banner.doc-draft-banner .grow { flex: 1 1 260px; }
.doc-draft-text { width: 100%; min-height: 180px; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; }

@media (max-width: 860px) {
  .doc-find { left: 8px; right: 8px; top: 6px; }
  .doc-find .input { width: auto; flex: 1; min-width: 0; }
  .doc-find .btn.ghost { display: none; }
  .editor.doc-pageless .doc-page { padding: 24px 16px 60px; }
  .doc-modebar { margin-left: 4px; margin-right: 4px; }
  /* the menus on a row of their own (app.css hides the menubar on narrow screens: on a phone there was no way to
     Download, Insert, switch to Suggesting or accept suggestions), and the title no longer runs under the buttons */
  .doc-editor .editor-head { flex-wrap: wrap; row-gap: 2px; }
  .doc-editor .editor-title-wrap { display: contents; }
  .doc-editor .editor-title-row { flex: 1; min-width: 0; overflow: hidden; }
  .doc-editor .menubar { display: flex; flex-wrap: nowrap; order: 10; flex: 0 0 100%; margin-left: 0; overflow-x: auto;
    scrollbar-width: none; }
  .doc-editor .menubar button { flex: none; }
}
@media (max-width: 520px) {
  .doc-editor .save-state:not(.error) { display: none; }   /* (no room: a save that fails still shows) */
}

@media print {
  .doc-find, .doc-exit-fs, .doc-modebar, .side-panel, .menu { display: none !important; }
  .doc-area { display: block; }
  .doc-page, .doc-paper { zoom: 1 !important; }
  .doc-paper { width: auto !important; max-width: none !important; }
  .editor.doc-pageless .doc-page { padding: 0; }
  .doc-overlay, .doc-band, .doc-cmt-btn { display: none !important; }
  .editor.doc-comments-open .doc-scroll { padding-right: 0; }
  .doc-page ul.doc-checklist > li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------------------------------------------- the page and what is drawn over it */

/* the paper: the page plus its header / footer bands (in the margins); View ▸ Zoom scales all of it */
.doc-scroll { position: relative; }
.doc-paper { position: relative; width: max-content; max-width: 100%; margin: 0 auto; }
.doc-paper > .doc-page { margin: 0; }
.editor.doc-pageless .doc-paper { width: auto; max-width: none; }
.doc-band { position: absolute; left: var(--doc-m-left, 96px); right: var(--doc-m-right, 96px); z-index: 1; display: flex;
  flex-direction: column; justify-content: center; overflow: hidden; }
.doc-band:empty { display: none; }
.doc-band.top { top: 0; height: var(--doc-m-top, 96px); }
.doc-band.bottom { bottom: 0; height: var(--doc-m-bottom, 96px); }
.doc-band .dr-hf-band { margin: 0; }
.doc-band[title]:hover { outline: 1px dashed var(--border-strong); outline-offset: 2px; border-radius: 2px; cursor: pointer; }

/* Google's "1.15" line spacing is the page's own (the Line & paragraph spacing menu ticks it) */
.doc-editor .doc-page { line-height: 1.32; }
.doc-editor .doc-page p { min-height: 1.32em; }

/* list items in a paragraph style (Format ▸ Paragraph styles inside a list) */
.doc-page li[data-style="title"] { font-size: 26pt; line-height: 1.2; }
.doc-page li[data-style="subtitle"] { font-size: 15pt; color: color-mix(in srgb, var(--page-text) 62%, transparent); }
.doc-page li[data-style="h1"] { font-size: 20pt; }
.doc-page li[data-style="h2"] { font-size: 16pt; }
.doc-page li[data-style="h3"] { font-size: 14pt; color: color-mix(in srgb, var(--page-text) 78%, transparent); }
.doc-page li[data-style="h4"] { font-size: 12pt; color: color-mix(in srgb, var(--page-text) 65%, transparent); }
.doc-page li[data-style="h5"], .doc-page li[data-style="h6"] { color: color-mix(in srgb, var(--page-text) 65%, transparent); }

/* check lists: a box in the gutter (click it to tick), ticked items struck through like Google */
.doc-page ul.doc-checklist { list-style: none; padding-left: 30px; }
.doc-page ul.doc-checklist > li { position: relative; }
.doc-page ul.doc-checklist > li::before { content: ""; position: absolute; left: -25px; top: calc((1.32em - 15px) / 2);
  width: 15px; height: 15px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--page-text) 70%, transparent);
  border-radius: 3px; cursor: pointer; }
.doc-page ul.doc-checklist > li[data-checked="true"]::before { border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.doc-page ul.doc-checklist > li[data-checked="true"] { text-decoration: line-through;
  color: color-mix(in srgb, var(--page-text) 55%, transparent); }
.doc-page.doc-on-box { cursor: pointer; }

/* comments: highlighted text (stronger for the comment in focus) */
:root { --cmt-mark: rgba(255, 210, 0, .32); --cmt-mark-strong: rgba(255, 180, 0, .66); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cmt-mark: rgba(255, 200, 0, .2); --cmt-mark-strong: rgba(255, 176, 0, .45); }
}
:root[data-theme="dark"] { --cmt-mark: rgba(255, 200, 0, .2); --cmt-mark-strong: rgba(255, 176, 0, .45); }
::highlight(doc-comment) { background-color: var(--cmt-mark, rgba(255, 210, 0, .32)); }
::highlight(doc-comment-active) { background-color: var(--cmt-mark-strong, rgba(255, 180, 0, .66)); }
.doc-cmt-btn { position: relative; }
.doc-cmt-count { position: absolute; top: 1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
  pointer-events: none; }
.doc-cmt-count:empty { display: none; }
@media (min-width: 1100px) {
  .editor.doc-comments-open .doc-scroll { padding-right: 396px; }
}

/* other people: their selections and carets (2px bar in their colour, name flag after they move or on hover),
   and comment marks where the browser has no CSS Highlight API */
.doc-overlay { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; }
.doc-rsel { position: absolute; border-radius: 1px; }
.doc-cmt-mark { position: absolute; background: var(--cmt-mark); }
.doc-cmt-mark.strong { background: var(--cmt-mark-strong); }
.doc-rcaret { position: absolute; width: 2px; background: var(--pr-color, #5f6368); pointer-events: auto; }
.doc-rcaret::before { content: ""; position: absolute; left: -2px; top: -3px; width: 6px; height: 6px; background: var(--pr-color, #5f6368); }
.doc-rcaret .doc-rflag { position: absolute; left: -2px; bottom: calc(100% + 2px); opacity: 0; transition: opacity .2s; z-index: 1; }
.doc-rcaret.fresh .doc-rflag, .doc-rcaret:hover .doc-rflag { opacity: 1; }

/* toolbar extras */
.doc-toolbar .doc-zoom-select { width: 78px; flex: none; }
.doc-toolbar .doc-style-select { width: 132px; flex: none; }
.doc-toolbar .dr-size, .doc-toolbar .dr-font-btn, .doc-toolbar .dr-color-tool { flex: none; }
.doc-page.doc-painting, .doc-page.doc-painting * { cursor: copy; }
.doc-page.doc-col-resize, .doc-page.doc-col-resize * { cursor: col-resize !important; }

@media (max-width: 860px) {
  .doc-band { display: none; }
  .doc-toolbar .doc-zoom-select { display: none; }
}

/* ---------------------------------------------------------------- Suggesting mode (docs.js, docs_ot.js)
   Each suggestion is drawn in its author's colour (docs.js suggestionCss sets --sg-ins / --sg-del / --sg-fmt per
   suggestion id): insertions underlined, deletions struck through, formatting with a dotted line, a suggested new
   paragraph or joined paragraphs with a ¶ at its end, suggested paragraph settings with a bar at the left. */
.doc-mode-btn { gap: 4px; font-weight: 500; white-space: nowrap; }
.doc-mode-btn svg.icon:last-child { width: 14px; height: 14px; opacity: .7; }
.editor.doc-suggesting .doc-mode-btn { color: #188038; background: rgba(24, 128, 56, .1); }
.doc-page .doc-sg[data-si] { color: var(--sg-ins, #188038); text-decoration: underline; text-decoration-color: var(--sg-ins, #188038);
  text-decoration-thickness: 1px; text-underline-offset: 2px; }
.doc-page .doc-sg[data-sd] { color: var(--sg-del, #c5221f); text-decoration: line-through; text-decoration-color: var(--sg-del, #c5221f); }
.doc-page .doc-sg[data-si][data-sd] { text-decoration: underline line-through; }
.doc-page .doc-sg[data-sf] { border-bottom: 2px dotted var(--sg-fmt, #1a73e8); }
.doc-page [data-psi]::after, .doc-page [data-psd]::after { content: '¶'; margin-left: 2px; font-size: .85em; user-select: none;
  pointer-events: none; }
.doc-page [data-psi]::after { color: var(--sg-ins, #188038); }
.doc-page [data-psd]::after { color: var(--sg-del, #c5221f); text-decoration: line-through; }
.doc-page [data-psf] { box-shadow: -10px 0 0 -7px var(--sg-fmt, #1a73e8); }
.doc-page [data-block][data-si], .doc-page .dr-hr[data-si], .doc-page .dr-pagebreak[data-si] { outline: 2px solid var(--sg-ins, #188038); outline-offset: 2px; }
.doc-page [data-block][data-sd] { outline: 2px dashed var(--sg-del, #c5221f); outline-offset: 2px; opacity: .55; }