/* EyesPen shared components. Needs tokens.css first. Logical properties only (RTL and LTR from one rule set),
   44px touch targets, visible focus, no hover-only affordance, reduced motion honoured.
   Class API (see site/README.md): .btn (.btn-primary .btn-secondary .btn-quiet .btn-sm .btn-block .btn-icon),
   .field (.field-label .field-hint .field-error), .check, .card, .sheet/.dialog, .toast, .chip (data-state=saved|syncing|offline|error|dev|ok),
   .skeleton, .state (.state-empty .state-error), .notice, .visually-hidden. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--fs-body)/var(--lh-body) var(--font-ui);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--accent-soft); }
bdi, .ltr { unicode-bidi: isolate; }
.ltr { direction: ltr; }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); line-height: var(--lh-ui); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-block-size: var(--tap); min-inline-size: var(--tap);
       padding-block: 0; padding-inline: var(--s4); border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--fg);
       font: var(--fw-bold) var(--fs-ui)/1.2 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
       transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn:hover { text-decoration: none; }
.btn svg { inline-size: 20px; block-size: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--fg); color: var(--on-fg); }
.btn-primary:hover { background: var(--fg-press); }
.btn-secondary { background: var(--surface); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--muted); }
.btn-quiet { font-weight: var(--fw-reg); color: var(--fg); }
.btn-quiet:hover, .btn-quiet[aria-expanded="true"], .btn-quiet[aria-pressed="true"] { background: var(--chip); }
.btn-ai { background: var(--accent); color: var(--on-accent); }
.btn-sm { font-size: var(--fs-sm); padding-inline: var(--s3); }
.btn-block { display: flex; inline-size: 100%; }
.btn-icon { padding-inline: 0; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary[disabled]:hover, .btn-primary[aria-disabled="true"]:hover { background: var(--fg); }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: ep-spin .8s linear infinite; }
@keyframes ep-spin { to { transform: rotate(360deg); } }

/* ---------- fields ---------- */
.field { display: grid; gap: var(--s1); }
.field-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.field-hint { font-size: var(--fs-sm); color: var(--muted); }
.field-error { font-size: var(--fs-sm); color: var(--danger); }
.input, .select, .textarea { inline-size: 100%; min-block-size: var(--tap); padding-block: 10px; padding-inline: var(--s3);
       border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--fg); font: 16px/1.3 var(--font-ui); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--fg); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input::placeholder { color: var(--faint); }
.check { display: flex; align-items: center; gap: var(--s3); min-block-size: var(--tap); cursor: pointer; }
.check input { inline-size: 22px; block-size: 22px; margin: 0; accent-color: var(--fg); flex: none; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }
.notice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--desk); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.notice[data-tone="error"] { background: var(--danger-soft); color: var(--fg); }
.notice[data-tone="warn"] { background: var(--warn-soft); }
.notice[data-tone="ai"] { background: var(--accent-soft); }

/* dialog / sheet: <dialog class="dialog"> (centered) or class="sheet" (bottom on narrow screens) */
.dialog, .sheet { border: 0; padding: var(--s5); background: var(--surface); color: var(--fg); border-radius: var(--r-lg);
                  box-shadow: 0 0 0 1px var(--edge), var(--shadow-md); inline-size: min(520px, calc(100vw - 2 * var(--s4))); max-block-size: min(85dvh, 720px); overflow: auto; }
.dialog::backdrop, .sheet::backdrop { background: var(--scrim); }
.dialog[open], .sheet[open] { animation: ep-fade var(--t) var(--ease); }
@media (max-width: 599px) {
  .sheet { margin-block-end: 0; inline-size: 100vw; max-inline-size: 100vw; border-end-start-radius: 0; border-end-end-radius: 0;
           padding-block-end: calc(var(--s5) + env(safe-area-inset-bottom)); }
}
.dialog h2, .sheet h2 { margin-block: 0 var(--s3); font-size: var(--fs-h3); }
@keyframes ep-fade { from { opacity: 0; } }

/* toast: one line, announced (role="status" on the element) */
.toast { position: fixed; z-index: 50; inset-block-end: calc(var(--s5) + env(safe-area-inset-bottom)); inset-inline-start: 50%; translate: -50% 8px; opacity: 0;
         background: #111; color: #fff; padding: 10px 18px; border-radius: var(--r); pointer-events: none; transition: opacity var(--t), translate var(--t) var(--ease); }
[dir="rtl"] .toast { translate: 50% 8px; }
.toast.show { opacity: 1; translate: -50% 0; }
[dir="rtl"] .toast.show { translate: 50% 0; }

/* status chip: text always says the state, the dot only repeats it */
.chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 26px; padding-inline: 10px; border-radius: var(--r-pill);
        background: var(--chip); color: var(--fg); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap; }
.chip::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; opacity: .7; flex: none; }
.chip[data-state="saved"], .chip[data-state="ok"], .chip[data-state="available"] { background: var(--ok-soft); color: var(--ok); }
.chip[data-state="syncing"], .chip[data-state="beta"] { background: var(--accent-soft); color: var(--accent); }
.chip[data-state="syncing"]::before { animation: ep-pulse 1.1s ease-in-out infinite; }
.chip[data-state="offline"], .chip[data-state="dev"], .chip[data-state="in_development"] { background: var(--warn-soft); color: var(--warn); }
.chip[data-state="error"] { background: var(--danger-soft); color: var(--danger); }
.chip[data-state="plain"]::before { display: none; }
@keyframes ep-pulse { 50% { opacity: .2; } }

/* loading skeleton */
.skeleton { display: block; min-block-size: 1em; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--chip) 0 40%, var(--desk) 50%, var(--chip) 60% 100%) 0 0 / 300% 100%; animation: ep-shimmer 1.4s linear infinite; }
@keyframes ep-shimmer { to { background-position: -150% 0; } }

/* empty and error blocks */
.state { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s7) var(--s4); color: var(--muted); }
.state h2, .state h3 { margin: 0; color: var(--fg); font-size: var(--fs-h3); }
.state p { margin: 0; max-inline-size: 42ch; }
.state-error h2, .state-error h3 { color: var(--danger); }

/* disclosure used as a menu (works without script) */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}