/* 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);
}

/* Skillator: a quiet editorial workspace, built on the Oxidt shell. */
.skillator-page { max-width: 1200px; margin: 0 auto; }
.section-kicker { font: 500 11px/1.5 monospace; letter-spacing: .14em; color: #727567; margin-bottom: 12px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:16px 0 36px; }
.page-heading h1 { font-family: 'Newsreader', Georgia, serif; font-size: clamp(32px,4vw,52px); font-weight:400; letter-spacing:-.035em; line-height:1.1; margin:0 0 12px; }
.page-heading p,.empty-library p { color: var(--color-base-content); opacity:.6; max-width:650px; }
.library-toolbar { display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-block:1px solid var(--color-base-300); }
.library-toolbar form { display:flex; gap:8px; }
.library-toolbar input { min-width: min(340px,48vw); }
.skill-row { display:flex; gap:20px; align-items:center; padding:27px 12px; border-bottom:1px solid var(--color-base-300); transition:background .15s; }
.skill-row:hover { background:var(--color-base-200); }
.skill-monogram { width:46px; height:52px; display:grid;place-items:center; border:1px solid var(--color-base-300); border-radius:3px 12px 3px 3px; font:italic 28px Georgia,serif;color:#668155; }
.skill-row-body { flex:1; min-width:0; }
.skill-row h2 { font-size:19px; font-weight:550; margin-bottom:4px; }
.skill-row p { font-size:14px; opacity:.6; }
.skill-tags { display:flex;gap:8px;margin-top:12px; }
.skill-tags span { font:11px monospace;opacity:.65; }
.skill-row-state { display:flex;flex-direction:column;align-items:end;gap:12px; }
.skill-row-state small { opacity:.45;font-size:11px; }
.library-note { display:flex;justify-content:space-between;font:10px monospace;letter-spacing:.1em;opacity:.45;margin-top:40px;gap:16px; }
.empty-library { text-align:center;padding:84px 24px;background:var(--color-base-100); }
.empty-library h2 { font:36px 'Newsreader',Georgia,serif;margin:12px 0; }
.empty-library p { margin:0 auto 28px; }
.skill-panel { background:var(--color-base-100); border:1px solid var(--color-base-300); padding:28px; border-radius:8px; margin-bottom:24px; }
.skill-panel h2,.section-heading h2 { font:28px 'Newsreader',Georgia,serif;margin-bottom:12px; }
.skill-panel p { font-size:14px;opacity:.7;margin:12px 0 20px; }
.skill-panel ol { list-style:decimal;padding-left:20px;line-height:1.8;font-size:14px; }
.skill-panel pre { white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;background:var(--color-base-200);padding:16px;margin:12px 0; }
.skill-panel summary { cursor:pointer;font-size:14px;padding:8px 0; }
.skill-form label { display:block;font-size:12px;font-weight:600;margin:12px 0 8px; }
.skill-form input:not([type=hidden]),.skill-form textarea { width:100%;border:1px solid var(--color-base-300);background:var(--color-base-100);padding:11px 12px;border-radius:5px;color:inherit;font-size:14px; }
.skill-form textarea { font:13px/1.7 monospace;resize:vertical; }
.skill-form input:focus,.skill-form textarea:focus { outline:2px solid #668155;outline-offset:2px; }
.form-columns { display:grid;grid-template-columns:1fr 1fr;gap:24px; }
.form-actions { display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px; }
.form-actions span { font-size:12px;opacity:.5;max-width:240px; }
.editor-layout { display:grid;grid-template-columns:3fr 2fr;gap:24px; }
.preview-pane { align-self:start;position:sticky;top:90px; }
.skill-prose { font-size:14px;line-height:1.8;overflow-wrap:anywhere; }
.skill-prose h1,.skill-prose h2 { font:30px 'Newsreader',Georgia,serif;margin:24px 0 16px; }
.skill-prose p { opacity:.85; }
.skill-prose ul { list-style:disc;padding-left:20px; }.skill-prose ol { list-style:decimal; }
.skill-prose code { font-size:12px;background:var(--color-base-200);padding:2px 4px; }.skill-prose a { text-decoration:underline; }
.section-heading { display:flex;justify-content:space-between;align-items:center;margin:28px 0 18px; }.section-heading span { font:11px monospace;opacity:.5; }
.skill-panel .section-heading { margin-top:0; }
.skill-tabs { display:flex;gap:28px;border-bottom:1px solid var(--color-base-300);padding:0 0 16px;margin:30px 0;font-size:13px; }
.back-link { font-size:12px;opacity:.6; }.version-row { display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--color-base-300); }.version-row>div:first-child { min-width:0;flex:1; }.version-row strong { margin-right:12px; }.version-row small { display:block;font-size:11px;opacity:.5;margin:8px 0; }.hash { display:block;overflow-wrap:anywhere;font-size:10px;opacity:.5; }.version-actions { display:flex;flex-direction:column;gap:10px;align-items:end; }.endpoint { display:block;padding:18px;background:var(--color-base-200);margin:12px 0;overflow-wrap:anywhere; }.reference-item { border-bottom:1px solid var(--color-base-300);padding:8px 0; }
@media(max-width:900px) { .editor-layout { grid-template-columns:1fr; }.preview-pane { position:static; }.form-columns { grid-template-columns:1fr;gap:0; }.page-heading { align-items:start;flex-direction:column; }.version-row { flex-direction:column; }.version-actions { align-items:start;flex-direction:row; }.skill-row { gap:12px; }.skill-row-state small,.library-note { display:none; }.skill-panel { padding:20px; }.form-actions { flex-wrap:wrap; } }