/* Phase 5 public UI theme: self-hosted fonts, design tokens, and shared
   dp-prefixed classes translated from design/Dhamma Parrot.dc.html.
   Loaded after MudBlazor.min.css and before the scoped-CSS bundle. Apart
   from the minimal baseline below, it applies nothing by itself — the layout
   opts in via .dp-* classes. No font/background on body: this file loads
   after MudBlazor.min.css, so a body rule here would override Mud's on the
   admin pages. */

/* ---------- Baseline (replaces the retired Bootstrap reboot + app.css) ---------- */

body {
    margin: 0; /* Bootstrap's reboot did this for public AND admin pages. */
}

h1:focus {
    outline: none; /* FocusOnNavigate target (Routes.razor); was in app.css. */
}

/* ---------- Self-hosted fonts (variable, latin subset) ---------- */

@font-face {
    font-family: "Newsreader";
    src: url("fonts/newsreader-vf.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("fonts/newsreader-italic-vf.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/nunito-vf.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("fonts/nunito-italic-vf.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: italic;
    font-display: swap;
}

/* Roboto is MudBlazor's default typeface (admin area); self-hosted so the
   Google Fonts CDN link could be dropped for privacy. */
@font-face {
    font-family: "Roboto";
    src: url("fonts/roboto-vf.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Design tokens ---------- */

:root {
    --dp-page-bg: #E9E0CD;
    --dp-card: #FBF6EA;
    --dp-card-border: #E7DDC8;
    --dp-panel-border: #EADFC9;
    --dp-panel: #F6EEDC;
    --dp-chip: #F1E7D2;
    --dp-hover-tint: #EFE3CB;
    --dp-teal: #12514C;
    --dp-teal-shadow: #0C3B37;
    --dp-gold: #D6A94A;
    --dp-gold-shadow: #B98A2E;
    --dp-brown: #8A5A2B;
    --dp-red: #C64231;
    --dp-red-soft: #FDECE7;
    --dp-red-soft-border: #F1C9BE;
    --dp-red-shadow: #9A3323;
    --dp-ink: #2E2A22;
    --dp-body: #3A342A;
    --dp-gold-ink: #3A2A08;
    --dp-ivory-border: #CDBE9C;
    --dp-ivory-shadow: #D8C6A0;
    --dp-muted: #7A6F58;
    --dp-faint: #A99A78;
    --dp-fainter: #B0A488;
    --dp-blue-bubble: #183A5A;
    --dp-radius-card: 30px;
    --dp-radius-modal: 24px;
    --dp-radius-panel: 20px;
    --dp-radius-btn: 12px;
    --dp-radius-pill: 999px;
    --dp-shadow-card: 0 24px 60px -30px rgba(74, 54, 20, .45);
    --dp-shadow-modal: 0 30px 80px -20px rgba(0, 0, 0, .5);
    --dp-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --dp-font-ui: "Nunito", system-ui, "Segoe UI", sans-serif;
    /* Below #blazor-error-ui (1000) and the cookie consent popup (1100). */
    --dp-z-modal: 900;
}

/* ---------- Animations ---------- */

@keyframes dppop {
    0% { transform: scale(.85); opacity: 0; }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes dpwobble {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

@keyframes dpbounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
    40% { transform: translateY(-7px); opacity: 1; }
}

@keyframes dprise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Apply animations through these classes only, so reduced-motion can switch
   them all off in one place. */
.dp-anim-pop {
    animation: dppop .3s ease both;
}

.dp-anim-wobble {
    animation: dpwobble 2.6s ease-in-out infinite;
    transform-origin: center;
}

/* No stagger here — consumers set animation-delay per element. */
.dp-anim-bounce {
    animation: dpbounce 1.2s infinite;
}

.dp-anim-rise {
    animation: dprise .5s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .dp-anim-pop,
    .dp-anim-wobble,
    .dp-anim-bounce,
    .dp-anim-rise {
        animation: none;
    }
}

/* ---------- Shared classes ----------
   Global on purpose: scoped CSS cannot reach child components (NavLink) and
   these motifs repeat across pages/steps. */

/* Solid action button (also used on anchors styled as buttons). */
.dp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    background: var(--dp-btn-bg, var(--dp-teal));
    color: #fff;
    font-family: var(--dp-font-ui);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    padding: 12px 22px;
    border-radius: var(--dp-radius-btn);
    text-decoration: none;
}

.dp-btn:hover:not(:disabled) {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.1);
}

.dp-btn:disabled {
    opacity: .55;
    cursor: default;
}

/* Chunky 3D variant: flat colored offset that presses down on click. */
.dp-btn-3d {
    box-shadow: 0 6px 0 var(--dp-btn-shadow, var(--dp-teal-shadow));
}

.dp-btn-3d:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 3px 0 var(--dp-btn-shadow, var(--dp-teal-shadow));
}

/* Color variants: only swap the custom props + text color the base reads. */
.dp-btn--gold,
.dp-btn--gold:hover:not(:disabled) {
    --dp-btn-bg: var(--dp-gold);
    --dp-btn-shadow: var(--dp-gold-shadow);
    color: var(--dp-gold-ink);
}

.dp-btn--ivory {
    --dp-btn-bg: #fff;
    --dp-btn-shadow: var(--dp-ivory-shadow);
    color: var(--dp-teal);
    border: 1.5px solid var(--dp-ivory-border);
}

.dp-btn--ivory:hover:not(:disabled) {
    --dp-btn-bg: var(--dp-panel);
    color: var(--dp-teal);
    filter: none;
}

/* Red warning variant (flag confirm). White text is the .dp-btn default. */
.dp-btn--red {
    --dp-btn-bg: var(--dp-red);
    --dp-btn-shadow: var(--dp-red-shadow);
}

/* Small chip button (the mock's inactive preset-chip recipe). Shared by the
   Llm params-panel Reload, the voting-section Reload, and later steps. */
.dp-chip-btn {
    border: 1.5px solid #D8C9A6;
    background: transparent;
    color: #8A6B3C;
    font-family: var(--dp-font-ui);
    font-weight: 800;
    font-size: 13px;
    padding: 6px 13px;
    border-radius: var(--dp-radius-pill);
    cursor: pointer;
}

.dp-chip-btn:hover:not(:disabled) {
    background: var(--dp-hover-tint);
}

.dp-chip-btn:disabled {
    opacity: .55;
    cursor: default;
}

/* Navigation pill (NavLink adds the .active class itself). */
.dp-pill {
    display: inline-block;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--dp-teal);
    font-family: var(--dp-font-ui);
    font-weight: 800;
    font-size: 15px;
    padding: 9px 20px;
    border-radius: var(--dp-radius-pill);
    text-decoration: none;
    transition: background-color .15s ease;
}

.dp-pill:hover {
    background: var(--dp-hover-tint);
    color: var(--dp-teal);
    text-decoration: none;
}

.dp-pill.active,
.dp-pill.active:hover {
    background: var(--dp-brown);
    color: #fff;
}

@media (max-width: 400px) {
    .dp-pill {
        padding: 8px 14px;
        font-size: 14px;
    }
}

/* ---------- Tag-formatted LLM output (.dp-fmt) ----------
   HTML produced by LlmOutputService.FormatDisplayText and injected via
   MarkupString, which carries no Blazor CSS-scope attribute — so these rules
   must live here, not in scoped .razor.css files. One rule set serves three
   surfaces (teal bubble, dark said-bubble, white modal): text styles ride on
   currentColor/em, accents use --dp-gold (proven on all three backgrounds). */

.dp-fmt h3 {
    font-family: var(--dp-font-serif);
    font-weight: 600;
    font-size: 1.15em;
    line-height: 1.25;
    margin: .6em 0 .55em;
    color: currentColor;
}

    /* Light flourish under the header, in the spirit of the site. */
    .dp-fmt h3::after {
        content: "";
        display: block;
        width: 46px;
        height: 3px;
        border-radius: 2px;
        background: var(--dp-gold);
        opacity: .8;
        margin-top: .25em;
    }

.dp-fmt blockquote {
    /* A paragraph-sized gap below: prose after a quote must not hug it. */
    margin: .6em 0 .9em;
    padding: .1em 0 .1em .85em;
    border-left: 3px solid var(--dp-gold);
    font-style: italic;
}

.dp-fmt ul {
    list-style: none;
    margin: .5em 0;
    padding-left: .4em;
}

.dp-fmt li {
    position: relative;
    padding-left: 1.5em;
    margin: .3em 0;
}

    /* Leaf bullet: a mask (not background-image) so the color can come from
       the --dp-gold token — an SVG fill inside a data URI cannot reference
       CSS custom properties. */
    .dp-fmt li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .28em;
        width: 1em;
        height: 1em;
        background-color: var(--dp-gold);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.6 2.4C7.5 2.6 3.4 5.6 2.6 10.6c-.3 1.7 0 2.8 0 2.8s1.1.3 2.8 0c5-.8 8-4.9 8.2-11z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.6 2.4C7.5 2.6 3.4 5.6 2.6 10.6c-.3 1.7 0 2.8 0 2.8s1.1.3 2.8 0c5-.8 8-4.9 8.2-11z'/%3E%3C/svg%3E") no-repeat center / contain;
    }

/* Question / answer paragraphs of a qa generation. */
.dp-fmt p,
.dp-fmt .dp-fmt-a {
    margin: .5em 0;
}

/* NOTE: no :first-child/:last-child edge-trim rules here — prose runs are
   bare text nodes, which those selectors cannot see, so they would strip the
   margins of any block merely followed (or preceded) by plain text. */

.dp-fmt .dp-fmt-q {
    font-weight: 700;
    font-style: italic;
}

/* The formatter-added Q:/A: markers: same face and size as the text,
   bold, upright (the question line around them is italic). */
.dp-fmt .dp-fmt-qa {
    font-weight: 700;
    font-style: normal;
}

/* Truncation note (TruncatedNote.razor); each surface sets color via ::deep. */
.dp-fmt-note {
    margin: 14px 0 0;
    font-family: var(--dp-font-serif);
    font-style: italic;
    font-size: 15px;
    opacity: .85;
}