/* Engrafon Screenwriter styles — Adobe Apricity (Apricity Web Components).
   Every colour, shape, type and spacing value below comes from Apricity's design tokens (--apricity-*), which <ap-theme> provides, so the
   app follows the theme's light / dark colour automatically. Components are never given fixed sizes or hand-made hover/selected states —
   Apricity's own sizing and state styling do that. The only literal colours left are the screenplay paper itself and user-chosen
   colours (note / scene / revision swatches). */

:root { --paper: #ffffff; --paper-ink: #1b1b1b; }

.wc-theme { display: block; height: 100%; background: transparent; }

.wc-root {
  /* spacing scale (the numbers are the old 1/100ths of a rem-ish step; kept so every rule below stays readable) */
  --ap-25: var(--apricity-spacing-50); --ap-50: var(--apricity-spacing-75); --ap-75: calc(var(--apricity-spacing-75) + var(--apricity-spacing-50));
  --ap-100: var(--apricity-spacing-100); --ap-125: calc(var(--apricity-spacing-100) + var(--apricity-spacing-50)); --ap-150: var(--apricity-spacing-200);
  --ap-175: calc(var(--apricity-spacing-200) + var(--apricity-spacing-50)); --ap-200: var(--apricity-spacing-300); --ap-300: var(--apricity-spacing-400);
  /* app tokens (also read by the canvas renderer — see readTheme()), mapped onto Apricity */
  --chrome: var(--apricity-gray-100);
  --chrome-hi: var(--apricity-gray-200);
  --line: var(--apricity-gray-300);
  --ink: var(--apricity-neutral-content-color-default);
  --ink-dim: var(--apricity-neutral-subdued-content-color-default);
  --workspace: var(--apricity-gray-200);
  --accent: var(--apricity-accent-background-color-default);
  --accent-soft: var(--apricity-accent-color-200);
  --on-accent-soft: var(--apricity-neutral-content-color-default);
  --on-accent: var(--apricity-accent-content-color-default);
  --sel: color-mix(in srgb, var(--apricity-accent-background-color-default) 32%, transparent);
  --ruler-bg: var(--apricity-gray-50);
  --ruler-ink: var(--apricity-neutral-subdued-content-color-default);
  --paper: #ffffff; --paper-ink: #1b1b1b;
  /* hover layer for the few non-Apricity rows (navigator / lists); Apricity components draw their own */
  --state-hover: color-mix(in srgb, var(--apricity-gray-900) 8%, transparent);

  height: 100%; position: relative; overflow: hidden;
  background: var(--chrome); color: var(--ink);
  font-family: var(--apricity-sans-serif-font-family, "Lethbridge Sans", "Source Sans Pro", "Segoe UI", system-ui, sans-serif); font-weight: 400; font-size: var(--apricity-font-size-100); line-height: 1.5;
}
/* native bits (scrollbars, colour input, spellcheck squiggles) follow the <ap-theme> colour too */
.wc-theme[color="light"], .wc-theme[color="lightest"] { color-scheme: light; }
.wc-theme[color="dark"], .wc-theme[color="darkest"] { color-scheme: dark; }
.wc-root, .wc-root * { box-sizing: border-box; }
.wc-root * { scrollbar-width: thin; }
.wc-root { scrollbar-color: var(--apricity-gray-400) transparent; }

#app { display: grid; height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto; }

/* ------------------------------ menu bar + toolbar ------------------------------ */
#menubar, #toolbar {
  display: flex; align-items: center; background: var(--chrome); border-bottom: 1px solid var(--line);
  gap: var(--ap-25); padding: var(--ap-50) var(--ap-100);
}
#toolbar { flex-wrap: wrap; }
.wc-no-menubar #menubar, .wc-no-toolbar #toolbar { display: none; }
.sep { flex: none; height: 24px; margin: 0 var(--ap-50); }
.grow { flex: 1; }
/* Toolbar icons: SWGlyphs font (private-use codepoints), drawn with ::before so the DOM holds no glyph characters.
   Put the files SWGlyphs exported in ./fonts/ (or change the url()s). The codepoints below are PLACEHOLDERS (SWGlyphs's default
   numbering starts at e900) - set each one to the real code from your font's style.css / selection.json. */
@font-face { font-family: 'swglyphs'; src: url('../cdn/fonts/swglyphs/SWGlyphs.woff2') format('woff2'), url('../cdn/fonts/swglyphs/SWGlyphs.woff') format('woff'), url('../cdn/fonts/swglyphs/SWGlyphs.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; }
.tb .ico { font-family: 'swglyphs' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-size: 18px; width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; user-select: none; }
.ico-menu::before { content: "\e028"; }
.ico-undo::before { content: "\e03c"; }
.ico-redo::before { content: "\e02e"; }
.ico-dual::before { content: "\e008"; }
.ico-bold::before { content: "\e009"; }
.ico-italic::before { content: "\e025"; }
.ico-underline::before { content: "\e03b"; }
.ico-strike::before { content: "\e035"; }
.ico-text-color::before { content: "\e02b"; }
.ico-highlight::before { content: "\e019"; }
.ico-clear-color::before { content: "\e00f"; }
.ico-note::before { content: "\e024"; }
.ico-find::before { content: "\e032"; }
.ico-cards::before { content: "\e015"; }
.ico-title::before { content: "\e03a"; }
.ico-revision::before { content: "\e005"; }
.cbtn { position: relative; display: inline-flex; }
.cbar { position: absolute; left: 50%; width: 14px; transform: translateX(-50%); bottom: 2px; height: 3px; border-radius: 2px; pointer-events: none; }   /* fixed width so the text and highlight bars match regardless of button width */
.cpop { padding: 10px; }
.cpop ap-swatch-group { max-inline-size: 190px; }
.tbfield { flex: none; width: 170px; }
.tbfield ap-picker { width: 100%; }

.hint { color: var(--ink-dim); font-weight: 400; font-size: var(--apricity-font-size-75); line-height: 1.4; }

/* ------------------------------ navigator ------------------------------ */
#main { display: flex; min-height: 0; }
#nav { width: 320px; flex: none; display: flex; flex-direction: column; background: var(--chrome); border-right: 1px solid var(--line); }
/* Side panel slides open and closed: the width animates while the contents keep their full width, so they slide instead of squashing. */
#nav { overflow: hidden; transition: width var(--apricity-animation-duration-600, 300ms) var(--apricity-animation-ease-in-out, cubic-bezier(.45, 0, .4, 1)); }
#nav > * { width: 319px; flex: none; }
#nav[hidden] { display: flex; width: 0; border-right-width: 0; visibility: hidden;
  transition: width var(--apricity-animation-duration-600, 300ms) var(--apricity-animation-ease-in-out, cubic-bezier(.45, 0, .4, 1)), visibility 0s linear var(--apricity-animation-duration-600, 300ms); }
@media (prefers-reduced-motion: reduce) { #nav, #nav[hidden] { transition: none; } }
#navbody { flex: 1; overflow: auto; padding: var(--ap-100); }
#navtabs ap-tab:first-child { margin-inline-start: var(--ap-100); }   /* keep the first tab (Scenes) off the panel's left edge; the tab strip itself stays full width so its track and the selection underline both line up */
.nitem {
  display: flex; align-items: center; gap: var(--ap-100); min-height: 40px; cursor: pointer;
  padding: var(--ap-75) var(--ap-150); border-left: 4px solid transparent; border-radius: var(--apricity-corner-radius-100);
}
.nitem:hover { background-image: linear-gradient(var(--state-hover), var(--state-hover)); }
.nitem.on { background-color: var(--accent-soft); color: var(--on-accent-soft); }
.nitem.drop, .nrow.drop { outline: 2px dashed var(--accent); }
.nitem b { min-width: 22px; }
.ntx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nitem.note .ntx { white-space: normal; }
.nitem small, .cfoot small { color: var(--ink-dim); font-weight: 500; font-size: var(--apricity-font-size-75); line-height: 1.3; }
.nact { margin: var(--ap-100) var(--ap-100) var(--ap-25); color: var(--ink-dim); text-transform: uppercase;
  font-weight: 500; font-size: var(--apricity-font-size-50); line-height: 1.3; }
.oitem { padding: var(--ap-75) var(--ap-75) var(--ap-125); display: grid; gap: var(--ap-75); }
.ohead { cursor: pointer; padding: var(--ap-25) 0; font-weight: 500; font-size: var(--apricity-font-size-100); line-height: 1.3; }
.pad { padding: var(--ap-150); }

/* navigator rows made of Apricity action buttons (Scenes, Characters, Notes) */
.nrow { display: flex; align-items: center; gap: var(--ap-50); border-left: 4px solid transparent; border-radius: var(--apricity-corner-radius-100); }
.nrow + .nrow { margin-top: var(--ap-25); }
.nrow > .nbtn { flex: 1 1 0; min-width: 0; }
.nrow > [data-tune] { flex: none; }
.nrow .nbtn { display: flex; justify-content: flex-start; text-align: left; }
.nrow .nbtn { width: 100%; border-inline-start: 4px solid var(--note-color, transparent); }      /* each note carries its own colour */
.nrow .bl { display: flex; align-items: center; gap: var(--ap-100); width: 100%; min-width: 0; text-align: left; }
.nrow .bl b { flex: none; min-width: 22px; }
.nrow .bl small { flex: none; color: inherit; opacity: 0.72; }
.nrow .nex { flex: 0 1 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* even left / right space around the Outline synopsis inputs */
#navbody { scrollbar-gutter: stable both-edges; }
.oitem { grid-template-columns: minmax(0, 1fr); }
.oitem .fld { width: 100%; }
.fld textarea { width: 100%; min-width: 0; }

/* ------------------------------ page stage + index cards ------------------------------ */
#stage { position: relative; flex: 1; min-width: 0; min-height: 0; }
#scroller { position: absolute; inset: 22px 0 0 0; overflow: auto; background: var(--workspace); }
#ruler { display: block; position: absolute; left: 0; top: 0; height: 22px; background: var(--chrome); touch-action: none; }
.wc-no-ruler #ruler { display: none; } .wc-no-ruler #scroller { inset: 0; }
#pg { display: block; position: sticky; top: 0; left: 0; outline: none; cursor: text; touch-action: pan-y; }
#spacer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }
#cards { position: absolute; inset: 0; overflow: auto; background: var(--workspace); padding: var(--ap-200); }
#cards[hidden] { display: none; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ap-175); }
.card { background: var(--apricity-gray-50); border: 1px solid var(--line); border-radius: var(--apricity-corner-radius-200); transition: box-shadow var(--apricity-animation-duration-100) var(--apricity-animation-ease-in-out); display: flex; flex-direction: column; gap: var(--ap-100); min-height: 200px; overflow: hidden; position: relative; }
.card > :not(.cstripe) { margin-left: var(--ap-150); margin-right: var(--ap-150); }
.card:hover { box-shadow: 0 1px 6px var(--apricity-drop-shadow-color, rgb(0 0 0 / 25%)); }
.cstripe { position: absolute; left: 0; right: 0; top: 0; height: 6px; }
.chead { cursor: pointer; margin-top: var(--ap-200) !important;
  font-weight: 700; font-size: var(--apricity-font-size-100); line-height: 1.3; }
.card .cfoot { margin-bottom: var(--ap-150) !important; }
.card .fld { flex: 1; } .card textarea { min-height: 70px; }
.cfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--ap-100); }

#status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ap-50) var(--ap-300); padding: var(--ap-75) var(--ap-200);
  background: var(--chrome); border-top: 1px solid var(--line); color: var(--ink-dim); font-variant-numeric: tabular-nums;
  font-weight: 500; font-size: var(--apricity-font-size-75); line-height: 1.3; }
#status b { font-weight: 600; color: var(--ink); }
.stzoom { margin-left: auto; display: inline-flex; align-items: center; gap: var(--ap-100); }
.stzoom ap-slider { width: 220px; }

/* ------------------------------ floating surfaces (find bar, read bar, SmartType, note bubble, menus) ------------------------------ */
.pop {
  position: fixed; z-index: 30; padding: var(--ap-50);
  background: var(--apricity-gray-50); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--apricity-corner-radius-200); box-shadow: 0 var(--apricity-drop-shadow-y, 4px) var(--apricity-drop-shadow-blur, 16px) var(--apricity-drop-shadow-color, rgb(0 0 0 / 25%));
}
.pop[hidden] { display: none !important; }
#stage .pop { position: absolute; right: var(--ap-200); top: 32px; }
.wc-no-ruler #stage .pop { top: var(--ap-125); }
#findbar { display: grid; gap: var(--ap-100); padding: var(--ap-150); width: min(680px, calc(100% - 32px)); }
#findbar .prow > .fld { flex: 1 1 150px; }
#readbar { display: flex; align-items: center; gap: var(--ap-100); padding: var(--ap-100) var(--ap-150); top: auto !important; bottom: var(--ap-150); }
.prow { display: flex; align-items: center; gap: var(--ap-150); flex-wrap: wrap; }
.prow.sm { font-size: var(--apricity-font-size-75); }
.chk { display: inline-flex; gap: var(--ap-25); color: var(--ink); cursor: pointer; }
/* <ap-checkbox> lays out its own label (flex-start + a top offset), so don't centre it here: that pushed the label below the box.
   Apricity's default offset (4px small / 6px medium) leaves the text a touch high, so nudge it down to sit on the box's centre line. */
ap-checkbox { --mod-checkbox-top-to-text: 7px; }
ap-checkbox[size="s"] { --mod-checkbox-top-to-text: 5px; }
#smart { display: flex; flex-direction: column; min-width: 170px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; }
#smart .sitem { flex: none; padding: 6px 12px; border-radius: var(--apricity-corner-radius-100, 4px); cursor: pointer; white-space: nowrap; line-height: 1.3; color: var(--ink); user-select: none; }
#smart .sitem.on { background: var(--accent-soft); color: var(--on-accent-soft); }
#notebub { display: flex; align-items: center; gap: var(--ap-100); padding: var(--ap-100) var(--ap-150); max-width: 340px; }
.nbtxt { max-height: 80px; overflow: auto; font-size: var(--apricity-font-size-75); }

/* ------------------------------ menus ------------------------------ */
/* The popup is a plain positioned surface styled like a Apricity popover; the rows are real <ap-menu-item>s inside an <ap-menu>, so hover /
   focus / pressed / selected (checked) all come from Apricity — nothing here paints a second hover. */
.menu {
  display: block; min-width: 220px; max-width: min(360px, calc(100vw - 8px));
  padding: var(--ap-25) 0; z-index: 40;
  background: var(--apricity-gray-50); border: 1px solid var(--line); border-radius: var(--apricity-corner-radius-200);
  overflow-x: hidden; overflow-y: auto;
}
.menu ap-menu { width: 100%; }
.menu ap-menu-item { flex: none; }
.mi .ml { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Row alignment: Apricity pads items 6px above the text but 9px below, and pins the value slot (shortcut / submenu arrow) to the top of the row.
   Even out the padding so the label is truly centred, and centre the value slot on the same line. */
.mi { --mod-menu-item-top-edge-to-text: 7.5px; --mod-menu-item-bottom-edge-to-text: 7.5px; }
.mi [slot="value"] { align-self: center; margin-block: 0; }
.mi .kbd { flex: none; margin-inline-start: var(--ap-300); color: var(--ink-dim); font-family: inherit; font-weight: 400; font-size: var(--apricity-font-size-75); }
.mi .chev { display: block; width: 12px; height: 12px; }

/* ------------------------------ dialogs ------------------------------ */
ap-dialog .dbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ap-150); padding: var(--ap-50) 0; min-width: 0; }
ap-dialog .hint { color: var(--apricity-neutral-subdued-content-color-default); }
ap-dialog .fld { width: 100%; min-width: 0; }
.fld ap-picker { width: 100%; } .fld ap-field-label { display: block; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ap-150); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ap-150); }
.grid2 > *, .grid3 > * { min-width: 0; }
.grid2[hidden], .grid3[hidden] { display: none; }
.tser { margin-bottom: var(--ap-150); }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.fld { display: block; min-width: 0; }
.fld textarea, .fld input { font-family: inherit; }
textarea { resize: vertical; font-family: inherit; }
.checks { display: flex; flex-wrap: wrap; gap: var(--ap-75) var(--ap-200); }
.elist, .splist { display: flex; flex-direction: column; gap: var(--ap-25); } .rtabs { display: block; }
.eitem { justify-content: flex-start; text-align: left; width: 100%; }
.swatches { display: flex; gap: var(--ap-50); flex-wrap: wrap; }
.swatch .dot { display: block; width: 20px; height: 20px; border-radius: 999px; border: 2px solid transparent; }
.swatch.on .dot { border-color: var(--apricity-neutral-content-color-default); box-shadow: 0 0 0 2px var(--apricity-gray-50) inset; }
.revrow .rsw { display: inline-block; vertical-align: middle; margin-inline: var(--ap-50) var(--ap-100); }
.rsw { width: 18px; height: 18px; border-radius: var(--apricity-corner-radius-75); border: 1px solid var(--line); }
.rbody { overflow: auto; max-height: 50vh; }
ap-dialog table { border-collapse: collapse; width: 100%; font-size: var(--apricity-font-size-75); }
ap-dialog th, ap-dialog td { text-align: left; padding: var(--ap-50) var(--ap-100); border-bottom: 1px solid var(--line); }
ap-dialog th { position: sticky; top: 0; background: var(--apricity-gray-50); color: var(--ink-dim); }
.spword { padding: var(--ap-50) 0;
  font-weight: 700; font-size: var(--apricity-font-size-600); line-height: 1.25; }
.erow { display: flex; align-items: center; gap: var(--ap-100); padding: var(--ap-25) var(--ap-50); border-bottom: 1px solid var(--line); cursor: pointer; }
.erow:hover { background-image: linear-gradient(var(--state-hover), var(--state-hover)); } .erow .ef-el { min-width: 120px; font-weight: 600; }
.ef-list { max-height: 50vh; overflow: auto; }
ap-dialog code { font-family: ui-monospace, monospace; font-size: var(--apricity-font-size-75); background: var(--apricity-gray-200); padding: 0 var(--ap-50); border-radius: var(--apricity-corner-radius-75); }
.colgrid { display: grid; grid-template-columns: 1fr 170px; gap: var(--ap-75) var(--ap-125); align-items: center; max-height: 32vh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--apricity-corner-radius-100); padding: var(--ap-100); }
.meter { display: block; margin-bottom: var(--ap-75); width: 100%; }
.lib-list { display: flex; flex-direction: column; gap: var(--ap-25); max-height: 40vh; overflow: auto; min-height: 60px;
  border: 1px solid var(--line); border-radius: var(--apricity-corner-radius-100); padding: var(--ap-50); }
.lrow { display: flex; align-items: center; gap: var(--ap-125); padding: var(--ap-100) var(--ap-125); border-radius: var(--apricity-corner-radius-100); cursor: pointer; }
.lrow:hover { background-image: linear-gradient(var(--state-hover), var(--state-hover)); }
.lrow.on { background-color: var(--accent-soft); color: var(--on-accent-soft); }
.lrow .lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow small { color: var(--ink-dim); white-space: nowrap; }

/* ------------------------------ snackbar-style toast ------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 44px; top: auto; right: auto; margin: 0; transform: translateX(-50%); z-index: 60;
  padding: var(--ap-150) var(--ap-200); border: 0; border-radius: var(--apricity-corner-radius-75);
  background: var(--apricity-gray-800); color: var(--apricity-gray-50); box-shadow: 0 var(--apricity-drop-shadow-y, 4px) var(--apricity-drop-shadow-blur, 16px) var(--apricity-drop-shadow-color, rgb(0 0 0 / 25%));
  transition: opacity var(--apricity-animation-duration-600, 300ms) var(--apricity-animation-ease-in-out, cubic-bezier(.45, 0, .4, 1));
}
.toast.out { opacity: 0; }


/* ------------------------------ open / close animation ------------------------------ */
/* Menus are plain popups, so they animate with Apricity's motion tokens: scale + fade in, fade out. */
.menu { transform-origin: top left; transition: opacity var(--apricity-animation-duration-200, 160ms) var(--apricity-animation-ease-in-out, cubic-bezier(.45, 0, .4, 1)),
  transform var(--apricity-animation-duration-300, 190ms) var(--apricity-animation-ease-out, cubic-bezier(0, 0, .4, 1)), visibility 0s; }
.menu[hidden] { display: flex !important; visibility: hidden; opacity: 0; transform: scale(0.94); pointer-events: none;
  transition: opacity var(--apricity-animation-duration-100, 130ms) var(--apricity-animation-ease-in-out, cubic-bezier(.45, 0, .4, 1)),
  transform var(--apricity-animation-duration-100, 130ms) var(--apricity-animation-ease-in-out, cubic-bezier(.45, 0, .4, 1)),
  visibility 0s linear var(--apricity-animation-duration-100, 130ms); }
@media (prefers-reduced-motion: reduce) { .menu, .menu[hidden] { transition: none; } }

/* ------------------------------ dialog scrim + panel (Apricity <ap-dialog> in an underlay) ------------------------------ */
.dlg-scrim { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: color-mix(in srgb, var(--apricity-gray-900) 45%, transparent); opacity: 0; visibility: hidden;
  transition: opacity var(--apricity-animation-duration-200) var(--apricity-animation-ease-in-out), visibility 0s linear var(--apricity-animation-duration-200); }
.dlg-scrim.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.dlg { transform: translateY(16px); opacity: 0; transition: transform var(--apricity-animation-duration-300) var(--apricity-animation-ease-out), opacity var(--apricity-animation-duration-300) var(--apricity-animation-ease-out); }
.dlg-scrim.open .dlg { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dlg-scrim, .dlg { transition: none; } }

/* ------------------------------ native inputs, drawn like <ap-textfield> ------------------------------ */
/* The editor reads/writes plain <input>/<textarea> values (number steppers, Enter-to-submit, select-on-focus), so they stay native but use the textfield tokens. */
.wc-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), .wc-root textarea {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--apricity-component-height-100, 32px); margin: 0;
  padding: 3px var(--apricity-textfield-spacing-inline, 12px) 5px;
  font-family: inherit; font-size: var(--apricity-font-size-100); line-height: 1.3; color: var(--apricity-textfield-text-color-default, var(--ink));
  background: var(--apricity-textfield-background-color, var(--apricity-gray-50));
  border: var(--apricity-textfield-border-width, 1px) solid var(--apricity-textfield-border-color, var(--apricity-gray-500)); border-radius: var(--apricity-textfield-corner-radius, 4px);
  transition: border-color var(--apricity-animation-duration-100) var(--apricity-animation-ease-in-out); outline: none;
}
.wc-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover, .wc-root textarea:hover { border-color: var(--apricity-textfield-border-color-hover, var(--apricity-gray-600)); }
.wc-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus, .wc-root textarea:focus { border-color: var(--apricity-textfield-border-color-focus, var(--apricity-gray-800)); }
.wc-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus-visible, .wc-root textarea:focus-visible {
  border-color: var(--apricity-textfield-border-color-keyboard-focus, var(--apricity-gray-900)); outline: var(--apricity-focus-indicator-thickness, 2px) solid var(--apricity-focus-indicator-color, var(--apricity-accent-color-800)); outline-offset: 1px; }

/* <ap-dialog> is only the content panel; Apricity draws its surface on a wrapping popover, which we don't use, so paint it here. */
.dlg { background: var(--apricity-background-layer-2-color, var(--apricity-gray-50)); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--apricity-corner-radius-200);
  box-shadow: 0 var(--apricity-drop-shadow-y, 4px) 24px var(--apricity-drop-shadow-color, rgb(0 0 0 / 35%)); overflow: hidden; }

/* dialog footer: wraps when there are many buttons (Check Spelling has five), stays visible while the body scrolls */
.dlg .dfoot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ap-100); position: sticky; bottom: 0; padding: var(--ap-150) 0 var(--ap-50);
  --dfoot-bg: var(--apricity-background-layer-2-color, var(--apricity-gray-50)); background: var(--dfoot-bg);
  /* Paint above the body: <ap-checkbox>'s inner input has z-index: 1, which otherwise draws the checkbox rows over the buttons. */
  z-index: 5;
  /* <ap-dialog>'s scroll area keeps a 4px padding gutter below and beside the sticky footer; fill it so scrolled content can't show through. */
  box-shadow: 0 4px 0 0 var(--dfoot-bg), -4px 0 0 0 var(--dfoot-bg), 4px 0 0 0 var(--dfoot-bg); }

/* word count dialog */
.wcstats th, .wcstats td { padding: var(--ap-50) var(--ap-100); border-bottom: 1px solid var(--line); text-align: left; }
.wcstats th:not(:first-child), .wcstats td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* keyboard shortcuts overview */
.kbhelp { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ap-150) var(--ap-300); max-height: min(58vh, 520px); overflow: auto; padding-inline-end: var(--ap-50); }
.kbhelp h3 { margin: 0 0 var(--ap-50); font-size: var(--apricity-font-size-75); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); }
.kbhelp table { width: 100%; border-collapse: collapse; }
.kbhelp td { padding: 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.kbhelp td.kk { white-space: nowrap; padding-inline-end: var(--ap-150); }
.kbhelp kbd { display: inline-block; margin-inline-end: 2px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; font: inherit; font-size: var(--apricity-font-size-75); line-height: 1.6; }
.kbnote { margin: 0; color: var(--ink-dim); font-size: var(--apricity-font-size-75); }

/* ---- device gate: shown instead of the editor on touch-only devices and in windows that are too small ---- */
.devgate { position: absolute; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: var(--ap-200); box-sizing: border-box; background: var(--workspace); color: var(--ink); overflow: auto; }
.devgate[hidden] { display: none; }
.dgcard { max-width: 440px; padding: var(--ap-300); box-sizing: border-box; background: var(--chrome); border: 1px solid var(--line); border-radius: var(--apricity-corner-radius-300, 12px); text-align: center; }
.dgcard h2 { margin: 0 0 var(--ap-100); font-size: 1.25em; }
.dgcard p { margin: 0 0 var(--ap-100); line-height: 1.45; }
.dgcard .dgsub { margin-bottom: 0; color: var(--ink-dim); }

/* autosave countdown in the toolbar */
.ascd { flex: none; padding-inline: var(--ap-100); font-size: var(--apricity-font-size-75); color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Tab order dialog */
.trlist { display: flex; flex-direction: column; margin-block: var(--ap-100); max-height: 44vh; overflow: auto; }
.trow { display: flex; align-items: center; gap: var(--ap-50); padding: var(--ap-25) var(--ap-50); border-bottom: 1px solid var(--line); }
.trow .grow { flex: 1; }
/* report table headings stay on one line in the dialog (the table scrolls sideways instead of squeezing them together) */
ap-dialog th { white-space: nowrap; }
/* menus taller than the window scroll inside themselves */
.menu { overscroll-behavior: contain; }
.menu ap-menu { max-height: none; overflow: visible; }
/* menus are shown in the top layer (popover): undo the browser's default centring so the left / top we set decide where they sit */
.menu[popover] { inset: auto; margin: 0; width: auto; height: auto; color: var(--ink); }

/* ------------------------------ format maker: live page preview ------------------------------ */
.fm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--ap-200); align-items: start; }
.fm-form { display: grid; gap: var(--ap-150); min-width: 0; }
.fm-prev { position: sticky; top: 0; display: grid; gap: var(--ap-75); min-width: 0; }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-100); } .pv-head ap-picker { width: 150px; }
.pv-scroll { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px; overflow: auto; scrollbar-gutter: stable; max-height: min(72vh, 680px);
  border: 1px solid var(--line); border-radius: var(--apricity-corner-radius-100); background: color-mix(in srgb, var(--apricity-gray-500) 22%, var(--apricity-gray-50)); }
.pv-page { position: relative; flex: none; overflow: hidden; background: var(--paper); color: var(--paper-ink); box-shadow: 0 1px 5px rgb(0 0 0 / 35%); }
.pv-area { position: absolute; outline: 1px dashed rgb(60 130 255 / 45%); }                       /* the dashed box is the text area: the page margins */
.pv-area > :first-child { margin-top: 0 !important; }
.pv-b { position: relative; }
.pv-el { white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; border-radius: 1px; }
.pv-el:hover { background: rgb(60 130 255 / 14%); outline: 1px solid rgb(60 130 255 / 45%); }
.pv-sn, .pv-pn { position: absolute; white-space: nowrap; }
.pv-row, .pv-heads { display: grid; box-sizing: border-box; border: var(--lw) solid transparent; }
.pv-cell { min-width: 0; } .pv-gap { position: relative; }
.pv-heads { position: absolute; font-weight: 700; } .pv-heads .pv-cell { text-decoration: underline; overflow: hidden; }
.pv-heads.box { border-color: currentColor; }
.g-inner .pv-gap::before, .pv-heads.box .pv-gap::before { content: ''; position: absolute; top: calc(-1 * (var(--py) + var(--lw))); bottom: calc(-1 * (var(--py) + var(--lw))); left: calc(50% - var(--lw) / 2); border-left: var(--lw) solid currentColor; }
.g-outer .pv-row { border-left-color: currentColor; border-right-color: currentColor; }
.g-outer .pv-row.tf { border-top-color: currentColor; } .g-outer .pv-row.tl { border-bottom-color: currentColor; }
.g-rows .pv-row:not(.tf) { border-top-color: currentColor; }
@media (max-width: 860px) { .fm-wrap { grid-template-columns: minmax(0, 1fr); } .fm-prev { position: static; order: -1; } .pv-scroll { max-height: 44vh; } }

/* AutoCorrect dialog: substitution rows */
.acrows { display: flex; flex-direction: column; gap: var(--ap-75); max-height: 260px; overflow-y: auto; padding-block: 2px; }
.acrow { display: flex; align-items: center; gap: var(--ap-100); }
.acrow input { flex: 1 1 0; min-width: 0; box-sizing: border-box; }
.acrow .acarrow { flex: none; color: var(--ink-dim); }
.acrow .acdel { flex: none; }