/* TAI Reader — app layer on top of tai.css (graphite + lime). Colours come only from tokens. */
@font-face { font-family: 'TAI Text'; font-weight: 400; src: url(../fonts/Inter-400.ttf) format('truetype'); }
@font-face { font-family: 'TAI Text'; font-weight: 700; src: url(../fonts/Inter-700.ttf) format('truetype'); }

:root, :root[data-theme="dark"] {
  --canvas: #111317; --chrome: #16181D; --page-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .35);
  --paper: #FFFFFF; --paper-ink: #16181D; --paper-line: #D5D9E0; --paper-hint: #626A7A;
  --sel: #7AA2FF; --sel-fill: rgba(122, 162, 255, .10); --handle-bg: #FFFFFF;
  --ring: #C6F432; --tool-on: #C6F432; --tool-on-bg: #2A2F3A;
  --hit: rgba(198, 244, 50, .35); --hit-cur: rgba(122, 162, 255, .60);
  --veil: rgba(17, 19, 23, .82); --thumb-shadow: 0 2px 8px rgba(0, 0, 0, .3); --glass: rgba(28, 31, 38, .92);
}
:root[data-theme="light"] {
  --canvas: #E9EBEF; --chrome: #FFFFFF; --page-shadow: 0 1px 2px rgba(22, 24, 29, .12), 0 8px 24px rgba(22, 24, 29, .10);
  --paper: #FFFFFF; --paper-ink: #16181D; --paper-line: #D5D9E0; --paper-hint: #626A7A;
  --sel: #2F5BD3; --sel-fill: rgba(47, 91, 211, .08); --handle-bg: #FFFFFF;
  --ring: #3F5200; --tool-on: #3F5200; --tool-on-bg: #ECEEF2;
  --hit: rgba(150, 200, 20, .40); --hit-cur: rgba(47, 91, 211, .40);
  --veil: rgba(243, 244, 246, .86); --thumb-shadow: 0 2px 8px rgba(22, 24, 29, .12); --glass: rgba(255, 255, 255, .94);
}

html, body { height: 100%; }
body {
  display: grid; grid-template-rows: 60px 44px 1fr; overflow: hidden;
  background: var(--canvas); font-weight: 400; user-select: none;
}
body:not(.ready) { visibility: hidden; }
.grow { flex: 1; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.vsep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex: none; }

/* ---------- top bar */
.topbar {
  display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 16px;   /* right column never narrower than its buttons (RO labels overlapped the tools at 1440 px) */
  padding: 0 12px 0 18px; background: var(--chrome); border-bottom: 1px solid var(--line);
}
.brand-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { flex: none; display: block; }
:root[data-theme="light"] .logo, :root[data-theme="light"] .empty-logo { filter: invert(1) hue-rotate(180deg); }
.brand-text { display: grid; min-width: 0; line-height: 1.2; }
.wordmark { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--text); }
.wordmark span { font-weight: 400; color: var(--text-2); }
.doc-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.doc-name { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dirty { width: 6px; height: 6px; border-radius: 50%; background: var(--ring); flex: none; }

.tools { display: flex; align-items: center; gap: 2px; }
.tool {
  display: grid; justify-items: center; align-content: center; gap: 3px; width: 54px; height: 48px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-3); cursor: pointer; font-family: inherit;
  transition: background-color .15s, color .15s;
}
.tool svg { width: 20px; height: 20px; }
.tool .tl { font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; max-width: 52px; overflow: hidden; text-overflow: ellipsis; }
.tool:hover { color: var(--text); background: var(--surface-2); }
.tool[aria-pressed="true"] { color: var(--tool-on); background: var(--tool-on-bg); }
.tool[aria-pressed="true"] .tl { color: var(--text); }
@media (min-width: 1600px) { .tool { width: auto; min-width: 54px; padding: 0 5px; } .tool .tl { max-width: none; } }   /* wide screens: the button grows to its full RO/TR label ("Evidențiază") */
.tsep { width: 1px; height: 26px; background: var(--line); margin: 0 5px; }

.actions-right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.topbar .btn { min-height: 38px; font-weight: 500; font-size: 14px; }
.topbar .btn.primary { font-weight: 600; padding: 0 18px; }
.topbar .icon-btn { min-width: 38px; padding: 0 9px; color: var(--text-2); }
.topbar .icon-btn[aria-pressed="true"] { color: var(--text); background: var(--surface-3); }
.btn svg { width: 18px; height: 18px; }
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 400 14px inherit; font-family: inherit; text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--surface-3); }
.menu-lang select { width: auto; min-height: 32px; padding: 4px 30px 4px 10px; font-size: 14px; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* ---------- contextual properties */
.propsbar { display: flex; align-items: center; min-width: 0; background: var(--chrome); border-bottom: 1px solid var(--line); }
.props { display: flex; align-items: center; gap: 14px; padding: 0 18px; min-width: 0; overflow: hidden; flex: 1; height: 100%; font-size: 14px; }
.history { display: flex; gap: 2px; padding: 0 12px; border-left: 1px solid var(--line); }
.history .icon-btn { min-height: 32px; min-width: 34px; padding: 0 7px; color: var(--text-2); }
.props .hint { color: var(--text-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.props .warn-text { color: var(--warn); }
.props .danger-text { color: var(--bad); }
.props .btn.small { min-height: 30px; font-weight: 500; font-size: 13px; }
.props .chip { min-height: 30px; font-size: 13px; font-weight: 500; }
.props .chip[aria-checked="true"], .props .chip[aria-pressed="true"] { background: var(--surface-3); color: var(--text); border-color: var(--text-2); }
.seg-group { display: flex; gap: 4px; }
.size-sel { width: auto !important; min-height: 30px !important; padding: 2px 30px 2px 10px !important; font-size: 13px !important; }
.swatches, .sig-inks { display: flex; gap: 8px; align-items: center; }
.swatch {
  width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--sw);
  border: 1px solid var(--line-strong); box-shadow: 0 0 0 0 transparent; transition: box-shadow .15s;
}
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 3.5px var(--text); }

/* ---------- workspace */
.workspace { position: relative; display: grid; grid-template-columns: 208px 1fr; min-height: 0; --side-w: 208px; transition: grid-template-columns .2s ease; }
body.side-off .workspace { grid-template-columns: 0 1fr; --side-w: 0px; }
body:not(.has-doc) .workspace { grid-template-columns: 0 1fr; --side-w: 0px; }
.side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--chrome); border-right: 1px solid var(--line); }
body.side-off .side, body:not(.has-doc) .side { border-right: 0; }
.side-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 6px 16px; }
.side-head .count { font-size: 12px; color: var(--text-3); }
.btn.mini { min-height: 30px; min-width: 30px; padding: 0 6px; border-radius: 8px; color: var(--text-2); }
.btn.mini svg { width: 17px; height: 17px; }
.side-foot { display: grid; gap: 6px; padding: 10px 12px 14px; border-top: 1px solid var(--line); }
.side-foot .btn { justify-content: flex-start; font-weight: 500; min-height: 34px; font-size: 13px; color: var(--text-2); border-color: var(--line); }
.side-foot .btn:hover { color: var(--text); }

.thumbs { list-style: none; margin: 0; padding: 6px 22px 16px; overflow: auto; flex: 1; display: grid; gap: 14px; align-content: start; }
.thumb { position: relative; }
.th-open { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-3); font-family: inherit; }
.th-frame { display: block; width: 100%; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--thumb-shadow); border-radius: 3px; overflow: hidden; transition: box-shadow .15s; }
.th-canvas { display: block; width: 100%; height: 100%; }
.th-num { font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.thumb.current .th-frame { box-shadow: 0 0 0 2px var(--ring); }
.thumb.current .th-num { color: var(--text); font-weight: 500; }
.th-open:hover .th-frame { box-shadow: 0 0 0 1px var(--line-strong), var(--thumb-shadow); }
.thumb.current .th-open:hover .th-frame { box-shadow: 0 0 0 2px var(--ring); }
.th-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.thumb:hover .th-actions, .thumb:focus-within .th-actions { opacity: 1; }
.th-btn { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 7px; border: 1px solid var(--line); background: var(--glass); color: var(--text-2); cursor: pointer; }
.th-btn:hover { color: var(--text); background: var(--surface-3); }
.th-btn[data-act="delete"]:hover { color: var(--bad); }
.th-btn svg { width: 15px; height: 15px; }
.thumb.dragging { opacity: .4; }
.thumb.drop-before::before, .thumb.drop-after::after { content: ''; position: absolute; left: -8px; right: -8px; height: 2px; background: var(--ring); border-radius: 2px; }
.thumb.drop-before::before { top: -8px; } .thumb.drop-after::after { bottom: -8px; }

.side-toggle {
  position: absolute; left: calc(var(--side-w) + 10px); top: 10px; z-index: 6; width: 32px; height: 32px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--glass); color: var(--text-3); cursor: pointer; transition: left .2s ease, color .15s;
}
.side-toggle:hover { color: var(--text); }
.side-toggle svg { width: 17px; height: 17px; }
body:not(.has-doc) .side-toggle, body:not(.has-doc) .pager { display: none; }

.viewport { position: relative; overflow: auto; min-width: 0; outline: none; scroll-behavior: auto; }
.pages { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px 32px 96px; width: max-content; min-width: 100%; }
body:not(.has-doc) .pages { display: none; }
body.has-doc .empty { display: none; }

.page { position: relative; flex: none; background: var(--paper); box-shadow: var(--page-shadow); }
.pg-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; --scale-round-x: 1px; --scale-round-y: 1px; }
.pg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* pdf.js text layer (subset of pdf_viewer.css) */
.textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-align: initial; opacity: 1; transform-origin: 0 0; z-index: 1;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size));
  pointer-events: none; user-select: text; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) {
  z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer ::selection { background: var(--sel-fill); background: color-mix(in srgb, var(--sel) 30%, transparent); color: transparent; }
.textLayer .hit { background: var(--hit); border-radius: 2px; }
.textLayer .hit.cur { background: var(--hit-cur); }
body[data-tool="select"] .textLayer { pointer-events: auto; }

/* ---------- overlay objects */
.overlay { position: absolute; inset: 0; z-index: 2; pointer-events: auto; cursor: crosshair; }
body[data-tool="select"] .overlay { pointer-events: none; cursor: default; }
body[data-tool="text"] .overlay, body[data-tool="date"] .overlay { cursor: text; }
body[data-tool="sign"] .overlay, body[data-tool="image"] .overlay { cursor: copy; }
.obj { position: absolute; pointer-events: auto; cursor: move; box-sizing: border-box; }
.obj.ghost { pointer-events: none; }
.obj svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.obj img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.o-text .txt, .metric-probe .txt {
  font-family: 'TAI Text', sans-serif; line-height: 1.25; white-space: pre; min-width: 4px; min-height: 1em;
  font-kerning: none; font-variant-ligatures: none; font-feature-settings: "kern" 0, "liga" 0, "calt" 0, "tnum" 0, "cv11" 0;
  outline: none; padding: 0; margin: 0; letter-spacing: 0; word-spacing: 0; text-rendering: geometricPrecision;
}
.o-text.editing { cursor: text; }
.o-text.editing .txt { user-select: text; caret-color: var(--sel); }
.o-text.editing::after { content: ''; position: absolute; inset: -3px -4px; border: 1px dashed var(--sel); border-radius: 3px; pointer-events: none; }
.o-highlight { mix-blend-mode: multiply; opacity: .4; }
.o-full { inset: 0; pointer-events: none; }
.o-full svg { width: auto; height: auto; }
.o-full line.hit { stroke: transparent; pointer-events: stroke; cursor: move; }
.obj.selected:not(.o-full):not(.editing)::after { content: ''; position: absolute; inset: -4px; border: 1px solid var(--sel); border-radius: 2px; pointer-events: none; }
.o-text.selected:not(.editing)::after { inset: -3px -4px; }
.handle { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--handle-bg); border: 1.5px solid var(--sel); border-radius: 2px; pointer-events: auto; z-index: 2; }
.h-nw { left: -4px; top: -4px; cursor: nwse-resize; } .h-ne { left: calc(100% + 4px); top: -4px; cursor: nesw-resize; }
.h-sw { left: -4px; top: calc(100% + 4px); cursor: nesw-resize; } .h-se { left: calc(100% + 4px); top: calc(100% + 4px); cursor: nwse-resize; }
.o-full .handle { cursor: grab; border-radius: 50%; }
.live { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.metric-probe { position: absolute; left: -9999px; top: 0; visibility: hidden; }
.baseline-mark { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* ---------- floating pager + search */
.pager {
  position: absolute; bottom: 18px; left: calc(var(--side-w) + (100% - var(--side-w)) / 2); transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); transition: left .2s ease;
}
.page-in { width: 46px !important; min-height: 30px !important; padding: 2px 6px !important; text-align: center; font-size: 14px !important; font-variant-numeric: tabular-nums; border-color: var(--line) !important; }
.page-total { font-size: 13px; color: var(--text-3); padding: 0 6px 0 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zoom-label { min-width: 48px; text-align: center; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.searchbar {
  position: absolute; top: 10px; right: 18px; z-index: 7; display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 6px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.searchbar input { width: 240px; min-height: 32px; padding: 4px 10px; font-size: 14px; border-color: var(--line); }
.search-count { font-size: 12px; color: var(--text-3); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- empty state */
.empty { max-width: 720px; margin: 0 auto; padding: 12vh 32px 64px; display: grid; justify-items: center; text-align: center; gap: 14px; }
.empty-logo { margin-bottom: 10px; }
.empty h1 { font-size: 28px; font-weight: 500; letter-spacing: -.015em; }
.empty .lead { max-width: 480px; font-size: 15px; }
.empty-cta { display: grid; gap: 10px; justify-items: center; margin: 14px 0 26px; }
.btn.big { min-height: 48px; padding: 0 28px; font-size: 15px; }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: left; width: 100%; }
.features li { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.f-title { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.f-desc { font-size: 14px; color: var(--text-3); line-height: 1.5; }
.recent { width: 100%; margin-top: 36px; text-align: left; display: grid; gap: 8px; }
.recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.recent-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-family: inherit; }
.recent-item:hover { background: var(--surface-2); }
.ri-icon { color: var(--text-3); display: grid; } .ri-icon svg { width: 20px; height: 20px; }
.ri-main { display: grid; min-width: 0; }
.ri-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-meta { font-size: 12px; color: var(--text-3); }

/* ---------- dialogs */
dialog h2 { font-weight: 500; }
dialog .actions .grow { flex: 1; }
.ask p { margin-top: 4px; }
.ask .field { margin-top: 12px; }
.sig-dialog { width: min(620px, calc(100vw - 32px)); max-width: none; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; margin: 4px 0 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.seg { min-height: 32px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: 500 14px inherit; font-family: inherit; cursor: pointer; }
.seg[aria-selected="true"] { background: var(--surface-3); color: var(--text); }
.pad-wrap { position: relative; border-radius: 12px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.sig-pad { display: block; width: 100%; aspect-ratio: 1040 / 360; touch-action: none; cursor: crosshair; }
.pad-line { position: absolute; left: 8%; right: 8%; bottom: 26%; height: 1px; background: var(--paper-line); pointer-events: none; }
.sig-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper-hint); font-size: 14px; pointer-events: none; }
.sig-pane { display: grid; gap: 12px; }
.sig-fonts { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.sig-font { min-height: 64px; padding: 6px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); font-size: 38px; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sig-font[aria-checked="true"] { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.sig-preview { min-height: 140px; display: grid; place-items: center; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--paper); padding: 12px; }
.sig-up-canvas { max-width: 100%; max-height: 160px; }
.sig-pane label.btn { justify-self: start; }
.sig-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.sig-foot .check { min-height: 32px; font-size: 14px; color: var(--text-2); }
.sig-saved { display: grid; gap: 8px; margin-bottom: 14px; }
.sig-saved-list { display: flex; gap: 8px; flex-wrap: wrap; }
.sig-saved-item { position: relative; }
.sig-use { width: 132px; height: 60px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; place-items: center; }
.sig-use:hover { border-color: var(--line-strong); }
.sig-use svg, .sig-use img { max-width: 100%; max-height: 42px; width: 100%; height: 100%; object-fit: contain; }
.sig-del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-3); color: var(--text-2); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.sig-saved-item:hover .sig-del, .sig-del:focus-visible { opacity: 1; }
@media (hover: none), (max-width: 760px) {   /* touch: always visible, 44 px target */
  .sig-del { opacity: 1; width: 44px; height: 44px; top: -14px; right: -14px; font-size: 18px; background-clip: content-box; padding: 11px; border: 0; }
  .sig-del::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-3); z-index: -1; }
}
.sig-undo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
@media (hover: none), (max-width: 760px) { .sig-undo .btn { min-height: 44px; min-width: 44px; } }
.about { text-align: center; width: min(440px, calc(100vw - 32px)); }
.about img { margin: 0 auto 6px; display: block; }
.about h2 { margin-bottom: 2px; }
.about p { margin: 10px 0; }
.about .actions { justify-content: center; }

/* ---------- feedback */
.busy { position: fixed; top: 116px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--text); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast.ok { border-color: var(--ok); } .toast.warn { border-color: var(--warn); } .toast.bad { border-color: var(--bad); }
.drop-veil { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: var(--veil); pointer-events: none; }
.drop-veil span { padding: 18px 28px; border: 1.5px dashed var(--line-strong); border-radius: 16px; font-size: 16px; color: var(--text); }
body.dropping .drop-veil { display: grid; }
.print-root { display: none; }

/* ---------- narrower windows: icons only */
@media (max-width: 1420px) {
  .tool { width: 40px; } .tool .tl { display: none; } .tsep { margin: 0 3px; }
}
@media (max-width: 1100px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 8px; }
  .brand-text .doc-line { display: none; }
  #openBtn { display: none; }
}

/* ---------- phones (browser edition on the TAI site): two-row header, tools scroll sideways, no thumbnail panel */
@media (max-width: 760px) {
  body { grid-template-rows: auto 44px 1fr; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 52px 48px; gap: 0 8px; padding: 0 8px 0 12px; }
  .topbar .tools { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -8px 0 -12px; padding: 0 8px; border-top: 1px solid var(--line); }
  .topbar .tools::-webkit-scrollbar { display: none; }
  .tool { flex: none; width: 44px; height: 44px; }
  .brand-text { display: none; }
  .actions-right { grid-column: 2; grid-row: 1; }
  .topbar .btn.primary { padding: 0 14px; }
  .workspace, body.side-off .workspace { grid-template-columns: 0 1fr; --side-w: 0px; }
  .side-toggle { display: none; } .side { visibility: hidden; border: 0; }   /* keep its (0-wide) grid column */
  .propsbar .props { padding: 0 12px; }
  .pages { padding: 12px 8px 96px; }
  .empty { padding: 6vh 16px 48px; }
  .empty h1 { font-size: 24px; }
  .features { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .menu { max-width: calc(100vw - 16px); }
  .topbar .icon-btn, .history .icon-btn, .btn.mini { min-width: 44px; min-height: 44px; }   /* touch targets */
  .topbar .btn { min-height: 44px; }
  #printBtn { display: none; }   /* no room for 44 px targets; printing from a phone is rare */
  #zoomLabel, #fitPage, .pager .vsep { display: none; }   /* keeps the pager (44 px buttons) inside 390 px */
  .page-in { min-height: 44px !important; }
  /* tool properties (size, bold, stroke) scroll sideways instead of being cut */
  .propsbar .props { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .propsbar .props::-webkit-scrollbar { display: none; }
  .props > * { flex: none; }
  /* search spans the screen */
  .searchbar { left: 8px; right: 8px; }
  .searchbar input { flex: 1; width: auto; min-width: 0; }
  /* every remaining small control gets a 44 px target */
  .props .chip, .props .btn.small, .size-sel, .menu-item, .menu-lang select, .seg, .searchbar input, .searchbar .btn { min-height: 44px !important; }
  .props .chip, .seg { min-width: 44px; }
  .sig-foot .check, label.check { min-height: 44px; }
  /* colour dots keep their 20 px look inside a 44 px target */
  .swatch { width: 44px; height: 44px; border: 0; background: radial-gradient(circle, var(--sw) 0 9.5px, var(--line-strong) 10px 10.5px, transparent 11px); box-shadow: none; }
  .swatch[aria-checked="true"] { box-shadow: none; background: radial-gradient(circle, var(--sw) 0 9.5px, var(--line-strong) 10px 10.5px, var(--chrome) 11px 12.5px, var(--text) 13px 15px, transparent 15.5px); }
}

@media print {
  @page { margin: 0; }
  html, body { height: auto; overflow: visible; background: #fff; display: block; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block; }
  .print-page { break-after: page; page-break-after: always; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-page img { display: block; width: 100%; height: auto; }
}