/* Buttons */
.button{height:36px;display:inline-flex;gap:8px;align-items:center;justify-content:center;border-radius:var(--an-button-radius);padding:0 12px;font-weight:500;white-space:nowrap;border:1px solid transparent}
.button.primary{background:var(--an-color-primary);color:var(--an-color-text-inverse)}
.button.primary:hover,.button.primary.is-hover{background:var(--an-color-primary-hover)}
.button.primary:active,.button.primary.is-active{background:var(--an-color-primary-pressed)}
.button.primary:disabled{background:var(--an-color-disabled-surface);color:var(--an-color-disabled-text)}
.button.neutral{border:1px solid var(--an-color-border);background:var(--an-color-surface)}
.button.clear-all{border:0;background:transparent;margin-left:-8px}
.button.danger{background:var(--an-color-danger);color:#fff}
.text-button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border-radius:8px;color:var(--an-color-primary);font-size:12px;font-weight:500;line-height:20px;text-decoration:underline;text-underline-offset:4px}
.text-button:hover,.text-button.is-hover{background:var(--an-color-hover)}
.icon-button,.competitor-tool{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--an-radius-full);flex:none;padding:0;color:var(--an-color-text)}
.competitor-action{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border-radius:var(--an-button-radius);white-space:nowrap;font-weight:500;font-size:14px;line-height:20px;color:var(--an-color-text)}
.competitor-action.round{width:36px;padding:0;border-radius:50%}
.zoom-value{height:36px;min-width:55px;border-radius:8px;font-size:12px;font-variant-numeric:tabular-nums}

/* Zoom stepper in the toolbar (20 Oct 2026) */
.zoom-stepper{display:flex;align-items:center;flex:none}
.icon-button.small{width:32px;height:32px}
.icon-button.small .icon,.icon-button.small .toolbar-icon{width:18px;height:18px}
/* Zoom stepper, 24 Oct 2026: buttons 28 wide, hit area 32 */
.zoom-stepper .icon-button.small{position:relative;width:28px}
.zoom-stepper .icon-button.small::before{content:"";position:absolute;top:0;bottom:0;left:-2px;right:-2px}
/* Number fields in edit (zoom, slider value, page number): white, no border, grey selection */
.zoom-field::selection,.stroke-field::selection,.page-field::selection{background:var(--an-color-selected);color:var(--an-color-text)}
.page-field.is-editing{background:var(--an-color-surface);color:var(--an-color-text);cursor:text;box-shadow:none;text-align:right}
.zoom-value.small{min-width:44px;height:32px;padding:0 2px;font-weight:500;color:var(--an-color-text)}
.document-name-button.compact{width:auto;flex:none}
/* Zoom value is a combobox (21 Oct 2026): same 44 x 32 box at rest and while typing; the list uses the menu look. */
.zoom-field{width:52px;height:32px;flex:none;padding:0 2px;border:0;border-radius:8px;background:transparent;font:500 12px/16px var(--an-font-sans);font-variant-numeric:tabular-nums;color:var(--an-color-text);text-align:center;cursor:pointer;transition:background var(--an-duration-fast),color var(--an-duration-fast)}
.zoom-field:hover,.zoom-field.is-hover{background:var(--an-color-hover);color:var(--an-color-primary)}
/* Editing (23 Oct 2026): calm white field, soft 1 px border, no coral ring — the digits keep their air inside the same 44 px. */
.zoom-field.is-open{background:var(--an-color-surface);color:var(--an-color-text);cursor:text;box-shadow:none}
.zoom-field:focus-visible,.zoom-field.is-open.is-focus{outline:none;box-shadow:none}
.zoom-list .menu-item[aria-selected="true"]{background:var(--an-color-selected);color:var(--an-color-primary)}
.zoom-list .menu-item.num{font-variant-numeric:tabular-nums}
/* Zoom list = compact text list like the language menu (24 Oct 2026) */
.popover.zoom-list{width:max-content;min-width:176px;max-width:280px}
.zoom-list .menu-item{min-height:40px;gap:16px}


/* One state vocabulary for every control family */
:where(.icon-button,.competitor-tool,.competitor-action,.zoom-value,.menu-item,.button.neutral,.button.clear-all):is(:hover,.is-hover):not(:disabled){background:var(--an-color-hover);color:var(--an-color-primary)}
:where(.icon-button,.competitor-tool,.competitor-action,.zoom-value,.menu-item,.button.neutral,.button.clear-all):is(:active,.is-active):not(:disabled){background:var(--an-color-pressed);color:var(--an-color-primary)}
:where(.icon-button,.competitor-tool,.competitor-action,.zoom-value,.menu-item):is(.active,[aria-expanded="true"],[aria-checked="true"],[aria-pressed="true"]):not(:disabled){background:var(--an-color-selected);color:var(--an-color-primary)}
:where(.icon-button,.competitor-tool,.competitor-action,.zoom-value,.menu-item,.button):disabled{color:var(--an-color-disabled-text);cursor:default}


/* Top toolbar. --ink = the current annotation colour: palette swatch, slider fill and thumb share it. */
.toolbar{height:64px;display:flex;align-items:center;gap:20px;padding:8px 16px;box-shadow:var(--an-shadow-small);background:var(--an-color-panel)}
.competitor-toolbar,.tool-cluster,.competitor-history,.document-actions{display:flex;align-items:center;gap:8px;flex:none}
.document-actions.wide{gap:4px}
.toolbar-settings{display:grid;grid-template-columns:28px 112px;align-items:center;gap:16px;flex:none}
.toolbar-color{appearance:none;-webkit-appearance:none;width:28px;height:28px;border:2px solid var(--an-color-selected);border-radius:50%;padding:0;overflow:hidden;background:transparent;cursor:pointer}
.toolbar-color::-webkit-color-swatch-wrapper{padding:0}.toolbar-color::-webkit-color-swatch{border:0;border-radius:50%}.toolbar-color::-moz-color-swatch{border:0;border-radius:50%}
/* Same 2px light border as the colour disc, ring inside it: the empty circle reads 24px like the filled one. */
.toolbar-color:disabled{cursor:default;opacity:1;border:2px solid var(--an-color-selected);box-shadow:inset 0 0 0 1.5px var(--an-color-disabled-text);background:linear-gradient(to bottom right,transparent calc(50% - .75px),var(--an-color-disabled-text) calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px)) center/9px 9px no-repeat}
.toolbar-color:disabled::-webkit-color-swatch-wrapper{display:none}.toolbar-color:disabled::-moz-color-swatch{display:none}
.toolbar-stroke{display:grid;grid-template-columns:80px 24px;grid-template-rows:36px;align-items:center;column-gap:8px;width:112px}
.toolbar-stroke output{width:24px;text-align:center;font-variant-numeric:tabular-nums;color:var(--an-color-text-secondary)}
/* Typed value (23 Oct 2026): the number next to the slider is a 24 × 28 field — click to type px. */
.stroke-field{width:28px;height:28px;margin-right:-4px;box-sizing:border-box;padding:0 4px 0 0;border:0;border-radius:6px;background:transparent;font:400 14px/20px var(--an-font-sans);font-variant-numeric:tabular-nums;text-align:right;color:var(--an-color-text-secondary);cursor:pointer;outline:none}
.stroke-field:not(:disabled):hover,.stroke-field.is-hover{background:var(--an-color-hover);color:var(--an-color-primary)}
.stroke-field:not(:disabled):is(.is-editing,:focus){background:var(--an-color-surface);color:var(--an-color-text);cursor:text;box-shadow:none;outline:none}
.stroke-field:disabled{cursor:default;color:var(--an-color-disabled-text)}
.toolbar-stroke input[type="range"]{appearance:none;-webkit-appearance:none;margin:0;width:80px;height:8px;border-radius:999px;background:linear-gradient(to right,var(--ink,var(--doc-annotation-default)) 0 var(--range-progress,10.34%),var(--an-color-selected) var(--range-progress,10.34%) 100%);cursor:pointer}
.toolbar-stroke input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink,var(--doc-annotation-default));background:oklch(.994 0 0)}
.toolbar-stroke input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink,var(--doc-annotation-default));background:oklch(.994 0 0)}
.toolbar-stroke.is-neutral{--ink:var(--an-color-text-secondary)}
.toolbar-stroke input[type="range"]:disabled{cursor:default;background:var(--an-color-selected)}
.toolbar-stroke input[type="range"]:disabled::-webkit-slider-thumb{border-color:var(--an-color-thumbnail);background:var(--an-color-selected)}
.toolbar-stroke input[type="range"]:disabled::-moz-range-thumb{border-color:var(--an-color-thumbnail);background:var(--an-color-selected)}
.toolbar-stroke input[type="range"]:disabled + output{color:var(--an-color-disabled-text)}

/* Toolbar layout, 20 Oct 2026: three equal-sided columns; the centre group follows the document (shift set by the app). */
.toolbar-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:20px}
.toolbar-left{min-width:0;display:flex;align-items:center;gap:8px}
.toolbar-center{display:flex;align-items:center;gap:20px;transform:translateX(var(--tool-shift,0px));transition:transform var(--an-duration-normal) cubic-bezier(0.2,0,0,1)}
.toolbar-divider{width:1px;height:24px;flex:none;background:var(--an-color-selected)}
.toolbar-zone{width:156px;height:36px;flex:none;display:flex;align-items:center}
.toolbar-grid .document-actions{min-width:0;justify-content:flex-end}
.document-actions:not(.with-labels) .competitor-action{width:36px;padding:0;border-radius:50%}
.document-actions:not(.with-labels) .competitor-action span{display:none}
.document-actions.with-labels{gap:4px}

/* Annotation colour popover (22 Oct 2026). The swatch is a button that opens it; colours are document colours, not tokens. */
button.toolbar-color{display:block;box-sizing:border-box;transition:box-shadow var(--an-duration-fast)}
.toolbar-color[aria-expanded="true"]{box-shadow:0 0 0 4px var(--an-color-selected)}
.color-popover{width:264px;padding:16px;box-shadow:var(--an-shadow-large);color:var(--an-color-text)}
.color-grid{display:grid;grid-template-columns:repeat(6,28px);justify-content:space-between;row-gap:12px}
.color-swatch{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border:2px solid var(--an-color-selected);border-radius:var(--an-radius-full);transition:box-shadow var(--an-duration-fast)}
.color-swatch svg{width:16px;height:16px}
.color-swatch:hover,.color-swatch.is-hover{box-shadow:0 0 0 4px var(--an-color-hover)}
.color-swatch[aria-checked="true"]{box-shadow:0 0 0 4px var(--an-color-selected)}
.color-label{margin:16px 0 8px;font-size:12px;line-height:16px;font-weight:500;color:var(--an-color-text-secondary)}
.menu-rule.color-rule{margin:16px 0}
.color-row{display:flex;align-items:center;gap:8px}
.color-hex{flex:1;min-width:0;height:36px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--an-color-field-border);border-radius:var(--an-button-radius);background:var(--an-color-surface)}
.color-hex:focus-within,.color-hex.is-focus{outline:2px solid var(--an-color-focus);outline-offset:-2px}
.color-hex input{flex:1;min-width:0;width:0;padding:0;border:0;background:transparent;outline:none;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.5px;text-transform:uppercase}
.color-dot{width:16px;height:16px;flex:none;border-radius:var(--an-radius-full);border:1px solid var(--an-color-border)}
.color-hash{color:var(--an-color-text-secondary);font-weight:500}
.color-more svg{transition:transform var(--an-duration-normal) cubic-bezier(0.2,0,0,1)}
.color-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.color-sv{position:relative;height:132px;margin-top:16px;border-radius:var(--an-button-radius);cursor:crosshair;touch-action:none}
.color-sv-thumb{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #fff;border-radius:var(--an-radius-full);box-shadow:0 0 0 1px rgb(11 18 14 / 24%),0 1px 3px rgb(0 0 0 / 25%);pointer-events:none}
.color-hue{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:22px 0 6px;border-radius:999px;background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);cursor:pointer}
.color-hue::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--thumb,var(--doc-annotation-default));background:oklch(.994 0 0)}
.color-hue::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:2px solid var(--thumb,var(--doc-annotation-default));background:oklch(.994 0 0)}


/* Menu / popover */
.popover{width:232px;padding:8px;box-shadow:var(--an-shadow-large)}
.menu-item{width:100%;min-height:48px;padding:8px;display:flex;gap:8px;align-items:center;border-radius:6px;text-align:left;font-size:14px;color:var(--an-color-text)}
.menu-item kbd{margin-left:auto;font-size:12px;color:var(--an-color-text-secondary);font-family:var(--an-font-sans)}
.menu-item.active kbd,.menu-item[aria-checked="true"] kbd{color:inherit}
.menu-check{margin-left:auto}.menu-item kbd + .menu-check{margin-left:0}
.menu-rule{height:1px;background:var(--an-color-border);margin:8px}
.page-menu-heading{padding:8px;font-size:12px;font-weight:500;color:var(--an-color-text-secondary)}


/* Dialog */
.dialog{padding:20px;width:480px;max-width:100%;box-shadow:var(--an-shadow-large);color:var(--an-color-text)}
.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dialog-header h2{font-size:18px;line-height:1.44;font-weight:600;margin:0;letter-spacing:-.2px}
.dialog p{color:var(--an-color-text-secondary);margin:0 0 20px;font-size:14px;line-height:1.57}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
.backdrop{background:var(--an-color-backdrop);padding:24px;border-radius:16px}


/* Search */
/* Document search, 25 Oct 2026: field · 12 · count · 4 · [prev next] · 8 | 8 · close. One 32 px row. */
.document-search{display:flex;align-items:center;gap:0;height:48px;width:480px;max-width:100%;padding:8px;box-shadow:var(--an-shadow-small);background:var(--an-color-panel)}
.search-field{position:relative;flex:1;min-width:0;display:flex}
.document-search input{flex:1;min-width:0;width:0;height:32px;border:1px solid var(--an-color-border);border-radius:8px;background:var(--an-color-surface);padding:0 32px 0 8px;font-size:14px;line-height:20px;color:var(--an-color-text);-webkit-appearance:none;appearance:none}
.document-search input::placeholder{color:var(--an-color-text-secondary);opacity:1}
.document-search input::-webkit-search-cancel-button,.document-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
/* Focus: one 2 px focus line drawn inside, over the 1 px border. Nothing outside the field, size unchanged. */
.document-search input:focus,.document-search input:focus-visible,.document-search input.is-focus{outline:2px solid var(--an-color-focus);outline-offset:-2px}
/* Clear: Lucide X 16 in a 24 px circle, 4 px from the field's top, right and bottom; only when the field has text. */
.search-clear{position:absolute;top:4px;right:4px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:var(--an-radius-full);color:var(--an-color-text-secondary)}
.search-clear .icon{width:16px;height:16px}
.search-clear:hover,.search-clear.is-hover{background:var(--an-color-hover);color:var(--an-color-primary)}
.search-clear:active,.search-clear.is-active{background:var(--an-color-pressed);color:var(--an-color-primary)}
.search-field input:placeholder-shown~.search-clear{display:none}
.search-count{flex:0 0 144px;width:144px;margin:0 4px 0 12px;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;color:var(--an-color-text-secondary)}
.search-steps{display:flex;align-items:center;flex:none}
.search-field+.search-steps{margin-left:12px}
/* Prev / next / close: same geometry as the zoom − / +: 28 x 32 visible, icon 18, 32 x 32 hit area. */
.document-search .icon-button.small{position:relative;width:28px;height:32px}
.document-search .icon-button.small::before{content:"";position:absolute;top:0;bottom:0;left:-2px;right:-2px}
.document-search .separator{height:20px;margin:0 8px}