/* Polish layer on top of DaisyUI 5 — elevation, glass, and shell chrome.
   Uses the DaisyUI 5 CSS custom properties (`--color-*`, which hold full
   color values), not the removed v4 `--p`/`--b1` HSL-channel aliases. */

/* ── Base ── */

html {
    scroll-behavior: smooth;
}

*:focus {
    outline: none;
}

a,
button {
    transition: all 0.15s ease;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Admin shell ──
   Flat paper: a plain base fill, with the sidebar set one step darker. */

.admin-shell {
    min-height: 100vh;
    background: var(--color-base-100);
}

.admin-shell .drawer-content {
    background: transparent;
}

/* Glass sidebar + mobile navbar */
.glass-panel {
    background: color-mix(in srgb, var(--color-base-100) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.admin-shell .drawer-side > aside {
    background: color-mix(in srgb, var(--color-base-200) 95%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Nav links ── */

.nav-link {
    border-radius: 0.75rem;
    padding: 0.6rem 0.75rem;
    gap: 0.6rem;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.nav-link:hover {
    background: color-mix(in srgb, var(--color-base-300) 60%, transparent);
}

.nav-link.active {
    background: var(--color-base-300);
    color: var(--color-base-content);
}

/* ── Cards ──
   `.card-elevated` is the resting surface (border + soft shadow). The lift on
   hover is handled by `.card-hover` in tailwind.css so the two never fight. */

.card-elevated {
    border-radius: 0.875rem;
    border: 1px solid var(--color-base-300);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── Buttons ── */

.btn-strong {
    border: 1px solid var(--color-primary);
    font-weight: 500;
}

.btn-strong:hover {
    opacity: 0.86;
}

/* ── Docs cards: feature-card style ── */

.docs-shell .not-prose > div[class*="bg-base-300"] {
    background: color-mix(in srgb, var(--color-base-200) 96%, transparent);
    border: 1px solid
        color-mix(in srgb, var(--color-base-300) 70%, transparent);
    border-radius: 14px;
    padding: 0;
    transition:
        border-color 0.25s,
        transform 0.25s,
        box-shadow 0.25s;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03),
        0 8px 22px rgba(0, 0, 0, 0.12);
}

.docs-shell .not-prose > div[class*="bg-base-300"]:hover {
    border-color: color-mix(
        in srgb,
        var(--color-base-content) 20%,
        var(--color-base-300) 80%
    );
    transform: translateY(-2px);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.04),
        0 14px 30px rgba(0, 0, 0, 0.2);
}

/* ── Modals ── */

.modal .modal-box.modal-polished {
    border-radius: 1rem;
    border: 1px solid
        color-mix(in srgb, var(--color-base-300) 70%, transparent);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Tables ── */

.table-wrap {
    border-radius: 1rem;
    border: 1px solid
        color-mix(in srgb, var(--color-base-300) 70%, transparent);
    background: color-mix(in srgb, var(--color-base-200) 96%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.table-polished thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--color-base-200) 96%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.table-polished tbody tr {
    transition:
        background 160ms ease,
        box-shadow 160ms ease;
}

.table-polished tbody tr:hover {
    background: var(--color-base-200);
}

/* ── Empty state ── */

.empty-state {
    border-radius: 1.5rem;
    border: 1px dashed
        color-mix(in srgb, var(--color-base-300) 70%, transparent);
    background: var(--color-base-200);
}

/* ── oxidt-auth LocalLoginPage hooks (AUTH_MODE=local) ── */
/* The crate's page renders fine without these; they give it the same
   gradient backdrop and glass card as the rest of the template. */

.auth-bg {
    background:
        radial-gradient(color-mix(in oklab, var(--color-base-content) 14%, transparent) 1px, transparent 1.2px) 0 0 / 22px 22px,
        var(--color-base-100);
}

.auth-card {
    background: color-mix(in oklab, var(--color-base-200) 60%, transparent);
    backdrop-filter: blur(24px);
    border: 1px solid color-mix(in oklab, var(--color-base-300) 50%, transparent);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ── Landing page ──
   Radius rule: surfaces 1rem, controls 0.5rem, tags full pill. Green
   (--color-success) is the only accent: the sweep, leads, and money saved. */

.lp-press:active {
    transform: scale(0.98);
}

/* Radar scope */
.lp-radar {
    --lp-sweep: 6s;
    position: relative;
    width: min(calc(100% - 1.5rem), 34rem);
    aspect-ratio: 1;
    color: var(--color-base-content);
}

.lp-scope {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lp-sweep {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 250deg,
        color-mix(in srgb, var(--color-success) 30%, transparent) 360deg
    );
    animation: lp-spin var(--lp-sweep) linear infinite;
}

.lp-sweep::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1.5px;
    height: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
        to top,
        transparent,
        var(--color-success)
    );
}

@keyframes lp-spin {
    to {
        transform: rotate(360deg);
    }
}

.lp-sector {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
    white-space: nowrap;
}

.lp-blip {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-base-content) 28%, transparent);
}

.lp-blip::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--color-success);
    opacity: 0;
    animation: lp-ping var(--lp-sweep) linear infinite;
    animation-delay: var(--d);
}

@keyframes lp-ping {
    0% {
        opacity: 1;
        transform: scale(1.5);
    }
    35% {
        opacity: 0;
        transform: scale(1);
    }
    100% {
        opacity: 0;
    }
}

.lp-blip-hot {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: var(--color-success);
}

.lp-blip-hot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--color-success);
    animation: lp-ring 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes lp-ring {
    from {
        opacity: 0.8;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(3.4);
    }
}

.lp-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--color-base-content);
}

/* Sample mentions pinned beside their blips */
.lp-chip {
    position: absolute;
    width: min(15.5rem, 58%);
    padding: 0.75rem 0.875rem 0.875rem;
    border-radius: 1rem;
    border: 1px solid var(--color-base-300);
    background: color-mix(in srgb, var(--color-base-100) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--color-base-content) 22%, transparent);
    animation: lp-chip-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-chip-a {
    top: 4%;
    right: 0;
    animation-delay: 0.5s;
}

.lp-chip-b {
    top: 72%;
    right: 0;
    animation-delay: 0.8s;
}

.lp-chip-c {
    top: 33%;
    left: 0;
    animation-delay: 1.1s;
    display: none;
}

@media (min-width: 768px) {
    .lp-chip-c {
        display: block;
    }
}

.lp-chip-meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    white-space: pre;
    color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}

.lp-chip-text {
    margin: 0.25rem 0 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

@keyframes lp-chip-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
}

/* Category tag, shared with the bento */
.lp-tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.625rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-base-content) 18%, transparent);
    font-size: 0.75rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-base-content) 75%, transparent);
}

.lp-tag-lead {
    border-color: transparent;
    background: var(--color-success);
    color: var(--color-success-content);
}

/* Cadence sentence */
.lp-src {
    color: var(--color-base-content);
}

.lp-scan {
    display: inline-block;
    padding: 0.05em 0.45em 0.1em;
    border-radius: 0.5rem;
    font-size: 0.8em;
    background: var(--color-primary);
    color: var(--color-primary-content);
    vertical-align: 0.08em;
}

/* Paper receipt with a torn bottom edge */
.lp-ticket-wrap {
    filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--color-base-content) 14%, transparent));
}

.lp-ticket {
    padding: 1.5rem 1.5rem 2.25rem;
    border-radius: 1rem 1rem 0 0;
    background: var(--color-base-200);
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}

[data-theme="dark"] .lp-ticket-wrap {
    filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.6));
}

[data-theme="dark"] .lp-ticket {
    background: #171717;
}

@media (min-width: 640px) {
    .lp-ticket {
        padding: 2rem 2rem 2.75rem;
        font-size: 0.875rem;
    }
}

/* Bento */
.lp-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 12rem;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--color-base-300);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
}

.lp-cell:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--color-base-content) 22%, transparent);
}

@media (min-width: 640px) {
    .lp-cell {
        padding: 1.75rem;
    }
}

.lp-lead {
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--color-success) 16%, transparent), transparent 60%),
        color-mix(in srgb, var(--color-success) 4%, var(--color-base-100));
}

.lp-dots {
    background-image: radial-gradient(color-mix(in srgb, var(--color-base-content) 14%, transparent) 1px, transparent 1.2px);
    background-size: 14px 14px;
}

.lp-hatch {
    background-image: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--color-base-content) 6%, transparent) 0 1px,
        transparent 1px 9px
    );
}

/* Price scale: $0 to $30, ticks every dollar */
.lp-scale {
    position: relative;
    padding-top: 5.5rem;
    padding-bottom: 4.5rem;
}

.lp-ruler {
    height: 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-base-content) 40%, transparent);
    background:
        repeating-linear-gradient(to right, color-mix(in srgb, var(--color-base-content) 40%, transparent) 0 1px, transparent 1px calc((100% - 1px) / 6)) bottom / 100% 100% no-repeat,
        repeating-linear-gradient(to right, color-mix(in srgb, var(--color-base-content) 22%, transparent) 0 1px, transparent 1px calc((100% - 1px) / 30)) bottom / 100% 45% no-repeat;
}

.lp-ruler-label {
    position: absolute;
    top: calc(5.5rem + 1.6rem);
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}

.lp-ruler-label:first-of-type {
    transform: none;
}

.lp-ruler-label:last-of-type {
    transform: translateX(-100%);
}

.lp-mark {
    position: absolute;
    top: 0;
    height: calc(5.5rem + 1.25rem);
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.lp-mark::after {
    content: "";
    position: absolute;
    top: 4.6rem;
    bottom: 0;
    width: 2px;
}

.lp-mark-us {
    left: 27.367%;
    padding-left: 0.75rem;
}

.lp-mark-us::after {
    left: -1px;
    background: var(--color-success);
}

.lp-mark-them {
    left: 96.667%;
    transform: translateX(-100%);
    padding-right: 0.75rem;
    align-items: flex-end;
}

.lp-mark-them::after {
    right: -1px;
    background: var(--color-base-content);
}

.lp-mark-us::before,
.lp-mark-them::before {
    content: "";
    position: absolute;
    top: 4.6rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: -4px;
}

.lp-mark-us::before {
    left: -4.5px;
    background: var(--color-success);
}

.lp-mark-them::before {
    right: -4.5px;
    background: var(--color-base-content);
}

.lp-gap {
    position: absolute;
    left: 9.533%;
    right: 3.333%;
    bottom: 0.5rem;
    height: 1.75rem;
    border: 1px dashed color-mix(in srgb, var(--color-success) 60%, transparent);
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
}

.lp-gap span {
    position: absolute;
    left: 50%;
    bottom: -0.65rem;
    transform: translateX(-50%);
    padding: 0 0.5rem;
    background: var(--color-base-100);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--color-success);
}

/* Closing panel, with faint radar rings in the corner */
.lp-closing {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--color-base-300);
    background: var(--color-base-200);
}

.lp-closing::before {
    content: "";
    position: absolute;
    right: -12rem;
    bottom: -12rem;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 3.2rem, color-mix(in srgb, var(--color-base-content) 9%, transparent) 3.2rem calc(3.2rem + 1px));
    pointer-events: none;
}

/* Entrances */
@keyframes lp-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

.lp-rise {
    animation: lp-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-d1 {
    animation-delay: 0.08s;
}

.lp-d2 {
    animation-delay: 0.16s;
}

@keyframes lp-reveal {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
}

@supports (animation-timeline: view()) {
    .lp-reveal,
    .lp-line {
        animation: lp-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-sweep {
        animation: none;
        transform: rotate(60deg);
    }
    .lp-blip::after,
    .lp-blip-hot::before {
        animation: none;
    }
    .lp-rise,
    .lp-chip,
    .lp-reveal,
    .lp-line {
        animation: none;
    }
}

/* ── SeggWat feedback widget ──
   Its palette follows the OS colour scheme, ours follows data-theme, so map
   its variables onto the theme: ink on paper, like the primary buttons.
   `html[data-theme]:root` outranks the widget's own :root and
   html[data-color-mode] rules; `html` outranks its class rules. */
html[data-theme]:root {
    --seggwat-font-family: var(--font-sans);
    --seggwat-hub-ink: var(--color-base-content);
    --seggwat-hub-ink-soft: color-mix(in oklab, var(--color-base-content) 60%, transparent);
    --seggwat-hub-ink-faint: color-mix(in oklab, var(--color-base-content) 40%, transparent);
    --seggwat-hub-line: var(--color-base-300);
    --seggwat-hub-line-hover: color-mix(in oklab, var(--color-base-content) 20%, transparent);
    --seggwat-hub-surface: var(--color-base-100);
    --seggwat-hub-surface-soft: var(--color-base-200);
    --seggwat-hub-accent-from: var(--color-base-content);
    --seggwat-hub-accent-to: var(--color-base-content);
    --seggwat-hub-accent-ring: color-mix(in oklab, var(--color-base-content) 20%, transparent);
    /* The widget sets these three inline on <html> from the dashboard's
       button colour; only !important beats an inline style. */
    --seggwat-hub-color: var(--color-primary) !important;
    --seggwat-hub-hover: color-mix(in oklab, var(--color-primary) 85%, var(--color-base-100)) !important;
    --seggwat-hub-outline: color-mix(in oklab, var(--color-base-content) 25%, transparent) !important;
}

html .seggwat-hub-button,
html .seggwat-hub-submit {
    color: var(--color-primary-content);
    font-family: var(--font-sans);
}

html .seggwat-hub-button--vertical {
    min-height: 96px;
    padding: 10px 5px;
    border-radius: var(--radius-field) 0 0 var(--radius-field);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    box-shadow: none;
}

html .seggwat-hub-submit {
    background: var(--color-primary);
    border-radius: var(--radius-field);
}

html .seggwat-hub-submit:hover:not(:disabled) {
    background: var(--seggwat-hub-hover);
}

html .seggwat-hub-modal {
    border: 1px solid var(--color-base-300);
}

/* ── Docs (topcoat-docs-kit, /docs) ──
   The kit renders inside public_shell; its classes come from the site's
   Tailwind build. Tokens map it onto the site's type and colours, and its own
   sticky bar sits under the site header instead of on top of it. */

.dk-docs-root {
    --dk-font-body: var(--font-sans);
    --dk-font-heading: var(--font-serif);
    --dk-accent: var(--color-base-content);
    --dk-accent-soft: color-mix(in srgb, var(--color-base-content) 6%, transparent);
    /* Ink with one colour, like the landing page: strings and numbers carry
       the status hues, everything else is a shade of the text colour. */
    --dk-hl-keyword: var(--color-base-content);
    --dk-hl-string: var(--color-success);
    --dk-hl-comment: color-mix(in srgb, var(--color-base-content) 45%, transparent);
    --dk-hl-number: var(--color-warning);
    --dk-hl-constant: var(--color-warning);
    --dk-hl-type: color-mix(in srgb, var(--color-base-content) 85%, transparent);
    --dk-hl-function: color-mix(in srgb, var(--color-base-content) 85%, transparent);
    --dk-hl-attribute: color-mix(in srgb, var(--color-base-content) 70%, transparent);
    --dk-hl-property: color-mix(in srgb, var(--color-base-content) 70%, transparent);
    --dk-hl-tag: color-mix(in srgb, var(--color-base-content) 70%, transparent);
    --dk-hl-variable: color-mix(in srgb, var(--color-base-content) 70%, transparent);
    --dk-hl-operator: color-mix(in srgb, var(--color-base-content) 55%, transparent);
    --dk-hl-punctuation: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}

/* Display headings in Newsreader, set like the landing page's .font-serif. */
.dk-docs-root .dk-article-title,
.dk-docs-root .dk-search-page h1,
.dk-docs-root .dk-article-body h2 {
    font-family: var(--font-serif);
    font-weight: 520;
    letter-spacing: -0.035em;
}

.dk-docs-root .dk-article-body h3,
.dk-docs-root .dk-article-body h4 {
    font-family: var(--font-sans);
}

/* Sidebar group titles and "On this page" as the landing page's eyebrows. */
.dk-docs-root .dk-nav-group-title,
.dk-docs-root .dk-toc h4 {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}

/* The kit's bar (tab + search) is a sub-bar under the site header. */
.dk-docs-root .dk-header {
    background: color-mix(in srgb, var(--color-base-100) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* The tab's -1px bottom margin otherwise shows a stray scrollbar. */
.dk-docs-root .dk-tabs {
    scrollbar-width: none;
}

/* The kit sets the code padding inline, so the copy button would sit on
   short one-line snippets. */
.dk-docs-root .dk-code-block-body--bare .dk-code {
    padding-right: 3.5rem !important;
}

/* Tables scroll sideways (docs-kit-theme.css), so short code names in a
   column needn't break mid-word. */
.dk-docs-root .prose-content td code {
    white-space: nowrap;
}

@media (max-width: 639.98px) {
    /* The site header wraps to two rows here; let the sub-bar scroll away. */
    .dk-docs-root .dk-header {
        position: static;
    }
}

@media (min-width: 640px) {
    .dk-docs-root .dk-header {
        top: 65px; /* site navbar: 4rem + 1px border */
    }

    .dk-docs-root .dk-sidebar > div {
        top: 110px; /* site navbar + the kit's 45px bar */
        height: calc(100vh - 110px);
    }

    .dk-docs-root .dk-toc > div {
        top: 110px;
    }

    .dk-docs-root .dk-article-body :is(h2, h3, h4) {
        scroll-margin-top: 8rem;
    }
}