/* Adanos 2026 redesign: the rules of type:tool only. Its pages link site-2026.css first, then this sheet. Filed by scripts/kit/split.py. */
/* ---------- Tool pages (analyzer, sentiment index, widgets) ----------
   The product hero with the tool as its main object, where product pages show their board: the input on the light
   side, the playground's dark panel for the answer (result, response, the call), then how it works and the questions.
   tool-2026.html is built from the live analyzer (scratchpad tool/build.py); the draft answers from recorded calls. */
.explorer--tool { margin-top: var(--space-14); }
@media (min-width: 1025px) {
    .explorer--tool { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto; }
    .explorer--tool .ep-out { contain: none; }
}
/* the tool panel's form, also a form of its own in a panel (contact, register, key recovery, access request) */
.tool-form { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--pad-lg); }
/* tool-card: a form or its success box of its own, in running text or under a hero: as wide as running text, with a
   figure's space to the blocks around it */
.tool-card { max-width: var(--measure); margin-block: var(--space-6); }
/* a box to tick beside its label, as the consent to the terms; tool-checks sets several in two columns */
.tool-check { display: flex; align-items: flex-start; gap: var(--space-2-5); font-size: var(--text-sm); line-height: var(--lh-body); color: var(--ink-2); cursor: pointer; }
.tool-check input { flex: none; width: var(--space-4); height: var(--space-4); margin: 0.2em 0 0; accent-color: var(--ink); cursor: pointer; }
.tool-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2-5) var(--space-5); }
.tool-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: auto; }
/* the views lie on top of each other, so the panel keeps the height of the tallest and never jumps on a switch */
.tool-views { display: grid; flex: 1; }
.tool-views > * { grid-area: 1 / 1; min-width: 0; }
.tool-views > [hidden] { display: block !important; visibility: hidden; }
.tool-views:has(> .tool-msg:not([hidden])) > :not(.tool-msg) { visibility: hidden; }
.explorer--tool .ep-code { padding: var(--pad-lg); white-space: pre-wrap; overflow-wrap: anywhere; }
/* the widgets' embed code right under their preview, the kit's code to copy: its head with the label and the copy
   button, then the code, which takes the rest of the panel */
.tool-embed { display: flex; flex: 1; flex-direction: column; border-top: var(--divider); }
.tool-result { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--pad-lg); transition: opacity var(--dur-fast) ease-out; }
.is-busy .tool-result { opacity: 0.5; }
.tool-msg { display: grid; place-content: center; gap: var(--space-1-5); padding: var(--space-7); text-align: center; font-size: var(--text-md); color: var(--ink-2); }
.tool-msg b { color: var(--paper); }
/* the verdict: the score as a big figure, the label chip and the tone beside it */
.tr-verdict { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.tr-score { min-width: 4.2ch; }
.tr-label { display: grid; justify-items: start; gap: var(--space-1-5); font-size: var(--text-md); color: var(--ink-2); }
.tr-label b { color: var(--paper); }
/* bearish, neutral and bullish zones on a -1 to +1 axis (neutral inside ±0.14); the zone the score falls in lights up
   and the pin glides to the score */
@property --pin { syntax: '<number>'; inherits: true; initial-value: 0.5; }
.tr-scale { display: grid; gap: var(--space-2); }
.tr-zones, .tr-track { display: grid; grid-template-columns: minmax(0, 1fr) var(--neu) minmax(0, 1fr); gap: var(--space-0-5); }
.tr-zones { font-size: var(--text-xs); text-align: center; color: var(--muted); }
.tr-track { position: relative; height: var(--bar); }
.tr-track i { border-radius: 1px; opacity: 0.4; transition: opacity var(--dur) ease-out; }
.tr-track i:first-child { border-radius: var(--r-pill) 1px 1px var(--r-pill); }
.tr-track i:nth-child(3) { border-radius: 1px var(--r-pill) var(--r-pill) 1px; }
.tr-track .neg { background: var(--bear); }
.tr-track .neu { background: var(--silver); }
.tr-track .pos { background: var(--bull); }
.tr-scale[data-zone="neg"] :is(.tr-zones .neg, .tr-track .neg), .tr-scale[data-zone="neu"] :is(.tr-zones .neu, .tr-track .neu),
.tr-scale[data-zone="pos"] :is(.tr-zones .pos, .tr-track .pos) { opacity: 1; color: var(--paper); font-weight: var(--fw-medium); }
.tr-pin { --v: calc(var(--pin) * 100); }
@media (prefers-reduced-motion: no-preference) { .tr-scale { transition: --pin var(--dur-glide) var(--ease-out-expo); } }
.tr-text figcaption { font-size: var(--text-xs); color: var(--muted); }
.tr-text blockquote { margin-top: var(--space-1-5); font-size: var(--text-md); color: var(--paper); }
.tr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--dark-line); }
.tr-facts dt { font-size: var(--text-xs); color: var(--muted); }
.tr-facts dd { margin-top: var(--space-1); font-size: var(--text-md); color: var(--paper); font-variant-numeric: tabular-nums; }
.lens-lines { fill: none; stroke-width: 6; stroke-linecap: round; }
.lens-lines.lens-big { stroke-width: 9; }
.lens-lines path { stroke: currentColor; }

/* ---------- Register (register.astro, RegisterSources.astro, RegisterPicture.astro) ----------
   The hero shows the five sources as tile cards; the tool panel holds the plan picker and the parts of each plan on the
   light side, the picture of the chosen plan on the dark side. A plan's mark, its line for whom, its price and the yes
   and no marks of its features are the pricing's (site-2026.css, shared). */
/* the hero picture: the five tile cards three over two, 76px and 28px apart, flush with the panel's right edge; six
   columns let the two of the second row sit between the three above. They come in once, 100ms apart, and then stand
   still; with reduced motion they only fade in */
.reg-srcs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-7); width: 71%; margin-inline: auto 0; }
.reg-srcs li { grid-column: span 2; animation: reg-src-fade var(--dur) ease-out calc(var(--dur) + var(--i) * var(--stagger)) both; }
.reg-srcs li:nth-child(4) { grid-column: 2 / span 2; }
.reg-srcs li:nth-child(5) { grid-column: 4 / span 2; }
@keyframes reg-src-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .reg-srcs li { animation-name: reg-src-in; }
    @keyframes reg-src-in { from { opacity: 0; translate: 0 12px; filter: blur(4px); } }
}

/* The plans as three cards, as on the live page: the plan's mark, the name and the price. A card not picked shows its
   mark with the plates settled close together; the picked card (is-current) takes the live page's gold and its plates
   rise apart, the bottom one first. The radio of a card is visually hidden, its focus rings the card. "Most popular" is
   a tag--ink on the middle of the card's top edge */
.reg-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-2); }
.reg-plan { position: relative; display: grid; justify-items: start; align-content: start; gap: var(--space-1); padding: var(--space-4); border: var(--border); border-radius: var(--r-box); background: var(--paper); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--dur-fast) ease-out, background-color var(--dur) ease-out, box-shadow var(--dur) ease-out; }
.reg-plan.is-current { border-color: var(--gold-edge); background: var(--gold-card); box-shadow: var(--shadow-pick); }
.reg-plan:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .reg-plan:not(.is-current):hover { border-color: var(--muted); } }
.reg-mark { margin-bottom: var(--space-2); overflow: visible; }
.reg-plan:not(.is-current) .reg-mark .layer { translate: 0 calc(var(--i) * 24px); }
.reg-plan-n { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--ink); }
/* "Most popular" is the tag on the card's top edge; a phone's row shows it as a line under the name (reg-plan-tag) */
.reg-plan-tag { display: none; }
.reg-plan-p { font-size: var(--text-sm); color: var(--muted); }
.reg-plan-p b { font-size: var(--text-xl); letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums; color: var(--ink); }
/* the parts of a plan: its heading, the type role's title stepped up to 24px, the line for whom close under it, the
   notice of a paid plan's use (gold for personal use, green for the commercial license) and the price */
.reg-h { margin-top: var(--space-2); font-size: var(--text-2xl); }
.reg-lead { margin-top: calc(-1 * var(--space-2)); }
/* the submit row stays under the plan's parts; when the picture beside it is taller, the form's foot takes the room */
.tool-form:has(.reg-plans) .tool-submit { margin-top: 0; }
.tool-form:has(.reg-plans) > .list-foot { margin-top: auto; }
/* once the reader picks a plan, the parts of the plan fade in; the first view shows them at once */
@media (prefers-reduced-motion: no-preference) {
    .reg-mark .layer { transition: translate var(--dur-slow) var(--ease-out-expo) calc(var(--i) * 70ms); }
    .tool-form.is-picked > [data-body]:not([hidden]) { transition: opacity var(--dur) ease-out, translate var(--dur) var(--ease-out-expo); }
    @starting-style { .tool-form.is-picked > [data-body]:not([hidden]) { opacity: 0; translate: 0 6px; } }
}
@media (prefers-reduced-motion: reduce) {
    .tool-form.is-picked > [data-body]:not([hidden]) { transition: opacity var(--dur) ease-out; }
    @starting-style { .tool-form.is-picked > [data-body]:not([hidden]) { opacity: 0; } }
}
/* The picture of the chosen plan on the dark side (reg-out); data-plan names the plan. Side by side it stays in view
   while the form scrolls past it (the hero and the panel clip, so it can stick) */
.reg-viz { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--pad-lg); }
@media (min-width: 1025px) { .reg-out .reg-viz { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + var(--space-5)); } }
/* the facts: a stat list in two columns, a picture under each figure. The rate in ten slots of 100 a minute, the
   requests of a month on a linear scale with a notch for each plan, the history as a year of weeks lit back from today
   and the commercial use as a mark that turns over; Professional's history carries its coverage note as a tip */
.reg-facts { gap: var(--space-6); }
.reg-facts dd { display: grid; gap: var(--space-3); }
.reg-vline { display: flex; align-items: baseline; gap: var(--space-1); }
.reg-cover { font-size: var(--text-md); color: var(--muted); cursor: help; }
.reg-viz:not([data-plan="professional"]) .reg-cover { display: none; }
.reg-viz { --m: var(--m-free); }
.reg-viz[data-plan="hobby"] { --m: var(--m-hobby); }
.reg-viz[data-plan="professional"] { --m: var(--m-professional); }
.reg-slots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-1); height: var(--bar-lg); }
.reg-slots i { border-radius: var(--r-2xs); background: var(--gold); transition: background-color var(--dur-fast) ease-out calc(var(--k) * 35ms); }
.reg-viz[data-plan="free"] .reg-slots i:nth-child(n + 2) { background: var(--dark-edge); }
.reg-meter { position: relative; height: var(--bar-lg); border-radius: var(--r-pill); background: var(--dark-edge); }
.reg-meter i { position: absolute; inset: 0; border-radius: inherit; background: var(--gold-gradient); clip-path: inset(0 calc(100% - max(var(--m) * 100%, var(--bar-lg))) 0 0 round var(--r-pill)); }
.reg-meter s { position: absolute; top: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-1)); left: calc(var(--x) * 100%); width: var(--space-0-5); translate: -100% 0; border-radius: var(--r-2xs); background: var(--dark-line-2); }
.reg-weeks { display: flex; align-items: flex-end; gap: var(--space-0-5); height: var(--space-8); }
.reg-weeks i { flex: 1; height: calc(var(--h) * 100%); border-radius: var(--r-2xs); background: var(--gold); transition: background-color var(--dur-fast) ease-out calc(var(--k) * 8ms); }
.reg-viz[data-plan="free"] .reg-weeks i:not(.in-free), .reg-viz[data-plan="hobby"] .reg-weeks i:not(.in-hobby) { background: var(--dark-edge); }
.reg-flip { display: grid; width: var(--logo-md); height: var(--logo-md); }
.reg-flip .lc { grid-area: 1 / 1; width: 100%; height: 100%; transition: opacity var(--dur) var(--ease-out-expo); }
.reg-yes { color: var(--bull); }
.reg-no { color: var(--muted); }
.reg-viz:not([data-plan="professional"]) .reg-yes, .reg-viz[data-plan="professional"] .reg-no { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .reg-meter i { transition: clip-path var(--dur-glide) var(--ease-out-expo); }
    .reg-flip .lc { transition: opacity var(--dur) var(--ease-out-expo), scale var(--dur) var(--ease-out-expo), filter var(--dur) var(--ease-out-expo); }
    .reg-viz:not([data-plan="professional"]) .reg-yes, .reg-viz[data-plan="professional"] .reg-no { scale: 0.25; filter: blur(4px); }
}
/* the APIs and features: one list in two columns of four with the pricing's yes and no marks, the plan's endpoints and
   what every plan has, then its support and what only Professional has. With the other plans those say "No ..." in
   muted text with a cross; with Professional they turn to the feature and its check. The PRO tag stays */
.reg-inc { display: grid; gap: var(--space-4); padding-block: var(--space-5); border-block: var(--divider); } /* a rule above and below, the facts of the service follow */
.reg-every { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: var(--space-2-5) var(--space-5); font-size: var(--text-sm); color: var(--ink-2); }
.reg-every li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.reg-pro > :first-child { color: var(--muted); }
.reg-viz:not([data-plan="professional"]) .reg-pro > :nth-child(2), .reg-viz[data-plan="professional"] .reg-pro > :first-child { display: none; }

/* ---------- Key (key.astro) ----------
   Each state's card stands centred under its centred hero. The key sits in a dark code panel of its own (the
   panel's own radius, as on its own in an article); a key longer than the line wraps rather than scrolls */
.key-card { margin-inline: auto; }
.key-out { border-radius: var(--r-box); overflow: hidden; }
.key-out .ep-code { font-size: var(--text-md); white-space: pre-wrap; overflow-wrap: anywhere; } /* the key is the page's object */

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .tool-checks { grid-template-columns: minmax(0, 1fr); }
    /* under the head on phones the five tiles take one row */
    .reg-srcs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); width: 100%; max-width: 330px; margin-inline: 0; }
    .reg-srcs li:nth-child(n) { grid-column: auto; }
    /* the facts of the service under the picture of the plan take two columns */
    .reg-inc + .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* the facts become label and value rows */
    .tr-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .tr-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
    .tr-facts dd { margin-top: 0; text-align: right; }
}
@media (max-width: 480px) {
    /* the plans become rows: the mark, the name and the price at the end; "Most popular" moves from the top edge to a
       line under the name, so no tag cuts into the gap between the rows */
    .reg-plans { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .reg-every { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
    .reg-plan { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); padding: var(--space-3) var(--space-4); }
    .reg-mark { margin-bottom: 0; }
    .reg-plan-n { display: grid; }
    .reg-plan-tag { display: block; }
    .reg-plan-edge { display: none; }
}