/* Hand-written styles that are not Tailwind utilities. No build step needed. */

/* ---- Brand fonts (vendored, SIL OFL; see THIRD_PARTY_LICENSES.txt) ----------
   Space Grotesk: headings and the wordmark. IBM Plex Sans: interface text.
   Three subsets each: latin, latin-ext and vietnamese (the last one carries the
   dotted letters used in Yoruba and Igbo file names). The browser downloads a
   file only when a glyph in its range is needed. ------------------------------ */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-vietnamese-500-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-vietnamese-600-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-vietnamese-700-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-vietnamese-500-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-vietnamese-600-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---- Signature fonts (vendored, SIL OFL 1.1): typed signatures ----------------
   Caveat and Dancing Script, latin and latin-ext subsets, loaded only when a
   typed signature uses them. ------------------------------------------------- */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/caveat-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/caveat-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/dancing-script-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/dancing-script-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---- Editor: selected op handles, redaction boxes ----------------------------- */
.swatch-white { background-color: #fff; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.35); color: #0F172A; }
.signature-pad { aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; }
.editor-overlay.cursor-move { cursor: move; }
.editor-overlay.cursor-cell { cursor: crosshair; }

/* ---- Base ------------------------------------------------------------------ */

html { scrollbar-gutter: stable; }

/* The "N files · M pages" summary needs room; below 640 px the header keeps
   only the mark and the four actions. */
@media (max-width: 639.98px) {
  #workspaceSummary { display: none !important; }
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #0EA5E9;
  color: #0F172A;
  font-weight: 600;
  transition: top 120ms ease-out;
}
.skip-link:focus { top: 0.5rem; }

/* Drop targets */
.drop-active {
  border-color: #0EA5E9 !important;
  background-color: rgba(14, 165, 233, 0.08) !important;
}
body.is-dragging-files #workspace {
  outline: 2px dashed #0EA5E9;
  outline-offset: -2px;
  border-radius: 1rem;
}

.sortable-ghost {
  opacity: 0.3;
  border: 2px dashed #0EA5E9 !important;
}

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

dialog.dialog {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
  width: min(100vw - 1rem, var(--dialog-width, 64rem));
  margin: auto;
  overflow: visible;
}
dialog.dialog-sm { --dialog-width: 36rem; }
dialog.dialog-md { --dialog-width: 48rem; }
dialog.dialog-lg { --dialog-width: 72rem; }
dialog.dialog::backdrop {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(3px);
}
dialog.dialog > .dialog-panel {
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dialog-body {
  overflow: auto;
  min-height: 0;
}

/* ---- Editor: base canvas and transparent overlay stacked exactly on top ---- */

.editor-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}
.editor-base {
  display: block;
  max-width: 100%;
  max-height: 68vh;
  width: auto;
  height: auto;
  background: #fff;
}
.editor-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none; /* let pointer events handle pen/touch drawing */
}

/* Colour swatches (role=radio buttons) */
.swatch {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.swatch[aria-checked="true"] {
  border-color: #0EA5E9;
}
.swatch svg { opacity: 0; width: 1.1rem; height: 1.1rem; }
.swatch[aria-checked="true"] svg { opacity: 1; }

/* Switch (checkbox styled as a toggle) */
.switch {
  appearance: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease-out;
}
.dark .switch { background: #475569; }
.switch::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
  transition: transform 150ms ease-out;
}
.switch:checked { background: #0EA5E9; }
.switch:checked::after { transform: translateX(1.25rem); }
.switch:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 2px; }

/* Range inputs */
input[type="range"] { accent-color: #0EA5E9; }
input[type="range"]:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 4px; border-radius: 9999px; }

/* Export preview */
.preview-surface {
  background:
    linear-gradient(45deg, rgba(15, 23, 42, 0.06) 25%, transparent 25%, transparent 75%, rgba(15, 23, 42, 0.06) 75%),
    linear-gradient(45deg, rgba(15, 23, 42, 0.06) 25%, transparent 25%, transparent 75%, rgba(15, 23, 42, 0.06) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.preview-surface canvas,
.preview-surface img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
  background: #fff;
}

/* ---- Office converter iframe (js/office-convert.js): present but never seen --- */
.converter-frame {
  position: fixed;
  left: -20px;
  top: -20px;
  width: 4px;
  height: 4px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---- Toasts ----------------------------------------------------------------- */

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
  border: 1px solid transparent;
  animation: toast-in 180ms ease-out;
  word-break: break-word;
}
.toast-info    { background: #f0f9ff; color: #0c4a6e; border-color: #bae6fd; }
.toast-success { background: #ecfdf5; color: #064e3b; border-color: #a7f3d0; }
.toast-error   { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; }
.dark .toast-info    { background: #0c4a6e; color: #e0f2fe; border-color: #0369a1; }
.dark .toast-success { background: #064e3b; color: #d1fae5; border-color: #047857; }
.dark .toast-error   { background: #7f1d1d; color: #fee2e2; border-color: #b91c1c; }
.toast button {
  margin-left: auto;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 0.375rem;
  opacity: 0.7;
  font-size: 1.1rem;
  line-height: 1;
}
.toast button:hover, .toast button:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: -2px; }
/* Narrow screens: tighter toasts so two of them stay within a third of the height */
@media (max-width: 400px) {
  .toast { font-size: 0.8125rem; line-height: 1.3; padding: 0.5rem 0.625rem; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Scrollbars ------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.45); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.7); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}