/* AHAP haptic pattern editor (/tools/ahap-editor/). Built by webtools/ahap-editor.js.
   Site tokens only; the timeline is SVG, so it follows light, dark and the theme toggle. */
.ah { display: grid; gap: 1rem; min-width: 0; container-type: inline-size; }
.ah > * { min-width: 0; }
.ah [hidden] { display: none !important; }
.ah p { margin: 0; }
.tool .ah .ah-h { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: normal; color: var(--text); }
.ah-hint { font-size: 0.85rem; color: var(--text-2); }
.ah-label { font-size: 0.82rem; color: var(--text-2); }
.ah-vh { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

/* sections */
.ah-sec:not(details), .ah-cols { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ah-insp, .ah-listsec, .ah-insp-body, .ah-cont, .ah-curves, .ah-tlbox { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.ah-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
@container (min-width: 640px) { .ah-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; } }

/* buttons: compact variants of the site .btn */
.tool .ah .btn.ah-chip { padding-inline: 0.95rem; font-size: 0.88rem; border-radius: var(--radius-pill); }
.tool .ah .btn.ah-x, .tool .ah .btn.ah-small { flex: none; padding-inline: 0.8rem; font-size: 0.85rem; }
.ah-icon { flex: none; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text-2); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.ah-icon:hover { color: var(--bad); border-color: var(--bad); }
.ah-link { display: inline-flex; align-items: center; min-height: 44px; margin-inline-start: 0.35rem; padding: 0 0.35rem; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; vertical-align: middle; cursor: pointer; }
@container (max-width: 480px) {
  .ah-toolbar .btn { flex: 1 1 auto; padding-inline: 0.75rem; }
}

/* presets, confirm, settings */
.ah-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ah-presets .ah-label { flex-basis: 100%; }
.ah-confirm { display: grid; gap: 0.6rem; }
.ah-confirm-text { font-weight: 600; color: var(--text); }
.ah-settings { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1rem; }
.ah-settings .ah-set { flex: 1 1 8rem; max-width: 11rem; }
.ah-seg { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 0.35rem 0.4rem; }
.ah-seg .ah-label { grid-column: 1 / -1; }
.tool .ah .ah-opt { display: block; position: relative; gap: 0; font-size: inherit; color: inherit; }
.tool .ah .ah-opt input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.ah-opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s; }
.ah-opt input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); font-weight: 600; }
.ah-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* timeline */
.ah-tl { padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.ah-svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.tool .ah .ah-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ah-svg * { pointer-events: none; }
.ah-svg [data-part] { pointer-events: all; }
.ah-svg .ah-kept-mark { pointer-events: auto; }
.ah-lane { fill: transparent; fill: color-mix(in srgb, var(--text) 3%, transparent); stroke: var(--border); }
.ah-lane[data-part] { cursor: crosshair; }
.ah-grid { stroke: var(--border); stroke-dasharray: 2 3; }
.ah-vgrid { stroke: var(--border); stroke-opacity: 0.7; }
.ah-tick { stroke: var(--text-3); }
.ah-tick.ah-major { stroke: var(--text-2); }
.ah-txt { fill: var(--text-3); font-size: 10.5px; font-family: inherit; font-variant-numeric: tabular-nums; }
.ah-unit { font-style: italic; }
.ah-tr-line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.ah-tr-head { fill: var(--accent); }
.ah-co-fill { fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; }
.ah-env { fill: none; stroke: var(--text); stroke-width: 1.25; stroke-dasharray: 3 2; stroke-opacity: 0.7; }
.ah-ev.is-sel .ah-tr-line { stroke-width: 4; }
.ah-ev.is-sel .ah-tr-head { stroke: var(--text); stroke-width: 2; }
.ah-ev.is-sel .ah-co-fill { stroke: var(--text); stroke-width: 2; }
.ah-ev.is-bad .ah-tr-line, .ah-ev.is-bad .ah-co-fill { stroke: var(--bad); stroke-dasharray: 4 3; }
.ah-ev.is-bad .ah-tr-head { fill: var(--bad); }
.ah-grip { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.ah-hit, .ah-edge { fill: transparent; }
.ah-hit { cursor: grab; }
.ah-edge { cursor: ew-resize; }
.ah-svg.is-drag, .ah-svg.is-drag [data-part] { cursor: grabbing; }
.ah-cv { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ah-cv-i { stroke: var(--ok); }
.ah-cv-s { stroke: var(--star); stroke-dasharray: 5 3; }
.ah-svg .ah-cv.is-bad { stroke: var(--bad); }
.ah-svg .ah-cv-pt { stroke: var(--bg); stroke-width: 1.5; stroke-dasharray: none; }
.ah-svg .ah-cv-pt.ah-cv-i, .ah-svg .ah-pm.ah-cv-i { fill: var(--ok); }
.ah-svg .ah-cv-pt.ah-cv-s, .ah-svg .ah-pm.ah-cv-s { fill: var(--star); }
.ah-svg .ah-pm { stroke: none; }
.ah-pm-line { stroke: var(--text-3); stroke-dasharray: 2 2; }
.ah-kept-mark { fill: var(--text-3); }
.ah-kept-mark.is-bad { fill: var(--bad); }
.ah-playhead { stroke: var(--bad); stroke-width: 2; }
.ah-readout { min-height: 1.4em; font-size: 0.85rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ah-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8rem; color: var(--text-2); }
.ah-key::before { content: ""; display: inline-block; width: 1.2em; height: 0; margin-inline-end: 0.4em; border-top: 2px solid var(--text-3); vertical-align: middle; }
.ah-key-i::before { border-top-color: var(--ok); }
.ah-key-s::before { border-top-color: var(--star); border-top-style: dashed; }
.ah-key-p::before { width: 0.55em; height: 0.55em; border: 0; background: var(--text-3); transform: rotate(45deg); }

/* stats (matches .wt-stats / .cc-stat even when that sheet is absent) */
.ah .ah-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.5rem; }
.ah .ah-stats .cc-stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.ah .ah-stats .cc-stat span { font-size: 0.8rem; color: var(--text-2); }
.ah .ah-stats .cc-stat strong { font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* inspector */
.ah-field { display: grid; grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr); align-items: end; gap: 0.35rem 0.75rem; }
.tool .ah .ah-field input[type="range"] { width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--accent); cursor: pointer; }
.ah-insp-body .ah-set { max-width: 14rem; }
.tool .ah input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }

/* event list */
.ah-list, .ah-plist, .ah-kept { margin: 0; padding: 0; list-style: none; }
.ah-list { display: grid; gap: 0.35rem; max-height: 26rem; overflow-y: auto; padding: 2px; }
.ah-li, .ah-prow, .ah-keptrow { margin: 0; }
.ah-li { display: flex; align-items: stretch; gap: 0.35rem; }
.ah-row { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.5rem; min-width: 0; min-height: 44px; padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: 0.88rem; text-align: start; cursor: pointer; }
.ah-row strong { font-variant-numeric: tabular-nums; }
.ah-row span { color: var(--text-2); }
.ah-row[aria-current="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.ah-li.is-bad .ah-row { border-color: var(--bad); }
.ah-row .ah-badge { color: var(--bad); font-size: 0.8rem; font-weight: 600; }

/* curves and parameters */
.tool .ah .ah-card { display: grid; gap: 0.6rem; min-width: 0; margin: 0; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tool .ah .ah-card.is-bad { border-color: var(--bad); }
.tool .ah .ah-card legend { margin: 0; padding: 0 0.35rem; font-size: 0.95rem; color: var(--text); }
.ah-cardrow { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.6rem; }
.ah-cardrow label { flex: 1 1 8rem; max-width: 12rem; }
.ah .ah-ptable { display: table; width: 100%; max-width: 100%; margin: 0; border-collapse: collapse; font-size: 0.85rem; }
.ah .ah-ptable th, .ah .ah-ptable td { padding: 0.2rem 0.25rem; border: 0; vertical-align: middle; }
.ah .ah-ptable th { font-size: 0.78rem; font-weight: 600; color: var(--text-3); text-align: start; text-transform: none; letter-spacing: normal; }
.ah .ah-ptable th:last-child, .ah .ah-ptable td:last-child { width: 44px; }
.tool .ah .ah-ptable input { min-width: 0; padding: 0.4rem 0.5rem; font-size: 1rem; }
.ah-prow { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.ah-prow label { flex: 1 1 7rem; }
.ah-prow label:first-child { flex: 2 1 11rem; }
.ah-prow.is-bad { border-bottom-color: var(--bad); }

/* kept items, import, export */
.ah-kept { display: grid; gap: 0.35rem; }
.ah-keptrow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.35rem 0.35rem 0.7rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--text); }
.ah-keptrow.is-bad { border-color: var(--bad); }
.ah-kerr { display: block; font-size: 0.8rem; color: var(--bad); }
.ah-import { padding-top: 0.5rem; border-top: 1px solid var(--border); }
.ah-import > * + * { margin-top: 0.75rem; }
.ah-import > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--text); list-style: none; cursor: pointer; }
.ah-import > summary::-webkit-details-marker { display: none; }
.ah-import > summary::before { content: ""; flex: none; width: 0.45em; height: 0.45em; margin: 0 0.75rem 0 0.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.ah-import[open] > summary::before { transform: rotate(45deg); }
.ah-import textarea { min-height: 8rem; resize: vertical; }
.ah-report { display: grid; gap: 0.4rem; }
.ah-rhead, .ah-ready { font-weight: 600; }
.ah-rhead.is-ok, .ah-ready.is-ok { color: var(--ok); }
.ah-rhead.is-bad, .ah-ready.is-bad { color: var(--bad); }
.ah-report .wt-report, .ah-issues { max-height: 20rem; overflow-y: auto; }
.ah-reason { font-size: 0.85rem; color: var(--text-2); }
.ah textarea[data-out] { min-height: 14rem; white-space: pre; overflow: auto; resize: vertical; }
.ah-export .wt-code { max-height: 24rem; }

@media (prefers-reduced-motion: reduce) {
  .ah *, .ah *::before, .ah *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}