/*
   Avlory shared components. Requires css/tokens.css.
   States change transform/opacity only; colour shifts live on pseudo-element layers.
*/

/* ---------- Buttons ---------- */
.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
/* Hover sheen layer (all variants) */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.08);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
    pointer-events: none;
}
.btn i { font-size: 0.95em; }
@media (hover: hover) {
    .btn:hover { transform: translateY(-1px); }
    .btn:hover::before { opacity: 1; }
}
.btn:active { transform: translateY(0) scale(0.97); }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.btn:disabled::before,
.btn[aria-disabled="true"]::before { opacity: 0; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.85; }

.btn--primary {
    background: linear-gradient(135deg, var(--p-base), var(--b-base));
    color: #fff;
    box-shadow: var(--shadow-glow);
}
/* Glow layer: brighter halo on hover/focus without animating box-shadow */
.btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    box-shadow: 0 12px 40px rgba(199, 0, 255, 0.5);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
    pointer-events: none;
}
.btn--primary:focus-visible::after { opacity: 1; }
@media (hover: hover) {
    .btn--primary:hover::after { opacity: 1; }
}
.btn--primary:disabled::after { opacity: 0; }

.btn--ghost {
    background: var(--surface-1);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn--danger {
    background: rgba(255, 93, 115, 0.12);
    border-color: rgba(255, 93, 115, 0.5);
    color: var(--danger-text);
}
.btn--danger::before { background: rgba(255, 93, 115, 0.16); }

.btn--sm {
    min-height: 36px;
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
}

.btn__spinner {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Card ---------- */
.card {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

/* ---------- Form field ----------
   <div class="field">
     <label for="email">Email</label>
     <input id="email" aria-describedby="email-error">
     <p class="field-error" id="email-error" aria-live="polite"></p>
   </div> */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.field > label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 44px;
    padding: 0.85rem 1rem;
    background: var(--surface-field);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-hint { font-size: 0.78rem; color: var(--text-muted); }
.field-error {
    min-height: 1.2em;
    font-size: 0.8rem;
    color: var(--danger-text);
}
.field-error:empty { min-height: 0; }

/* ---------- Skip link & helpers ---------- */
.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100000;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-md);
    background: #fff;
    color: #120018;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); outline: var(--focus-ring); outline-offset: 2px; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .btn, .btn::before, .btn::after, .skip-link { transition: none; }
    .btn:hover, .btn:active { transform: none; }
    .btn__spinner { animation-duration: 2s; }
}

/* ---------- Keep reading (end-of-page links between the story pages) ----------
   <nav class="page-next" aria-label="Keep reading"><a class="page-next__link" href="…">
     <span class="page-next__kicker">Next: …</span><span class="page-next__title">…</span></a></nav> */
.page-next {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-4);
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.25rem 6rem;
}
.page-next__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out);
}
.page-next__kicker { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.page-next__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; }
@media (hover: hover) and (pointer: fine) {
    .page-next__link:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.32); }
}
@media (prefers-reduced-motion: reduce) {
    .page-next__link { transition: none; }
    .page-next__link:hover { transform: none; }
}