/* ==========================================================================
   Readcred design system - "Solskinn"
   Source of truth: designmal_260715/.../Readcred Designmal.dc.html
   Fonts: Bricolage Grotesque (headings), Manrope (body) - self-hosted
   variable woff2 in /assets/fonts (GDPR: no Google Fonts CDN).
   ========================================================================== */

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Solskinn palette */
    --rc-coral: #E5613C;        /* Korall - primary accent, CTA, Kundeservice */
    --rc-ink: #211D17;          /* Blekk - text, dark surfaces */
    --rc-cream: #FBF7F0;        /* Krem - page background */
    --rc-sand: #F0E8DB;         /* Sand - surfaces, badges */
    --rc-spruce: #3C9A5F;       /* Gran - Kunnskapsbanken, status */
    --rc-fjord: #4368C9;        /* Fjord - Rapport */

    /* Derived tints (from the design prototypes) */
    --rc-coral-soft: #FBEAE3;   /* coral badge background */
    --rc-spruce-soft: #E7F3EC;  /* success/status background */
    --rc-fjord-soft: #EDF1FB;   /* fjord tile background */
    --rc-chat-bg: #FDFBF7;      /* chat message area */
    --rc-chat-border: #EDE4D3;  /* bot bubble border */
    --rc-badge-text: #7A5B2E;   /* text in sand badges */

    /* Text */
    --rc-text: var(--rc-ink);
    --rc-text-soft: #5C554A;    /* Mørk sand - secondary text */
    --rc-text-muted: #5C554A;
    --rc-text-dim: #8A8072;     /* metadata, footers */

    /* Dark (ink) panels */
    --rc-on-dark: #FBF7F0;
    --rc-on-dark-soft: #D8D0C2;
    --rc-on-dark-dim: #B8AF9F;

    /* Surfaces */
    --rc-bg: var(--rc-cream);
    --rc-surface: #FFFFFF;
    --rc-border: #E8DFCF;
    --rc-border-soft: #F0E8DB;

    /* Status */
    --rc-error: #B42318;
    --rc-error-bg: #FDECEA;
    --rc-warn: #B7791F;
    --rc-warn-bg: #FBF3E4;

    /* Type */
    --rc-font-body: 'Manrope', system-ui, -apple-system, sans-serif;
    --rc-font-heading: 'Bricolage Grotesque', var(--rc-font-body);

    /* Layout */
    --rc-page-pad: 48px;
    --rc-radius-sm: 10px;
    --rc-radius: 14px;
    --rc-radius-lg: 20px;
    --rc-radius-xl: 24px;
    --rc-shadow: 0 24px 60px -24px rgba(90, 60, 20, .25);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--rc-bg);
    color: var(--rc-text);
    font-family: var(--rc-font-body);
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--rc-font-heading);
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 .5em;
}

h1 { font-size: 64px; line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: 38px; }
h3 { font-size: 21px; }

p { margin: 0 0 1em; }

a { color: var(--rc-coral); }
a:hover { opacity: .85; }

.text-muted { color: var(--rc-text-soft); }

.lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--rc-text-soft);
}

/* Accented word in headings (design: coral span in the hero title) */
.accent-text { color: var(--rc-coral); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px var(--rc-page-pad);
    background: rgba(251, 247, 240, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rc-border-soft);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--rc-ink);
    font-family: var(--rc-font-heading);
    font-weight: 700;
    font-size: 20px;
}

/* Coral rounded square with a white R */
.logo-mark {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 10px;
    background: var(--rc-coral);
    color: var(--rc-cream);
    display: grid;
    place-items: center;
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 18px;
}

.logo-mark::before { content: 'R'; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    font-weight: 600;
}

.nav-links a {
    color: var(--rc-ink);
    text-decoration: none;
}

.nav-links a:hover { color: var(--rc-coral); opacity: 1; }

.nav-logout { display: inline; }
.nav-logout button { cursor: pointer; }

/* NO/EN toggle - visual component; EN content comes later */
.lang-toggle {
    display: flex;
    gap: 2px;
    background: var(--rc-sand);
    border-radius: 99px;
    padding: 3px;
    font-size: 12px;
    font-weight: 700;
}

.lang-toggle .active {
    background: var(--rc-ink);
    color: var(--rc-cream);
    border-radius: 99px;
    padding: 4px 10px;
}

.lang-toggle .inactive {
    padding: 4px 10px;
    color: var(--rc-text-dim);
}

/* --------------------------------------------------------------------------
   Buttons - always pill-shaped (radius 99px)
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 30px;
    border-radius: 99px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--rc-font-body);
}

.btn-primary {
    background: var(--rc-coral);
    color: #fff;
}

.btn-primary:hover { opacity: .9; }

.btn-outline {
    background: transparent;
    border: 2px solid var(--rc-ink);
    color: var(--rc-ink);
    padding: 13px 28px;
}

.btn-outline:hover { opacity: .75; }

.btn-sm {
    font-size: 14px;
    padding: 9px 20px;
}

.btn-outline.btn-sm { padding: 7px 18px; border-width: 2px; }

.btn-block {
    display: block;
    width: 100%;
    margin-top: 8px;
    text-align: center;
}

/* Per-agent primary buttons */
.btn-spruce { background: var(--rc-spruce); color: #fff; }
.btn-fjord { background: var(--rc-fjord); color: #fff; }

/* --------------------------------------------------------------------------
   Badges / pills
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rc-sand);
    border-radius: 99px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rc-badge-text);
}

.badge .status-dot { margin-right: 0; }

/* --------------------------------------------------------------------------
   Sections & hero
   -------------------------------------------------------------------------- */

.section { padding: 72px var(--rc-page-pad); }

.section-alt {
    background: var(--rc-surface);
    border-top: 1px solid var(--rc-border-soft);
}

.section-narrow { max-width: 1100px; margin: 0 auto; }

.section-heading { text-align: center; margin-bottom: 40px; }
.section-heading p { color: var(--rc-text-soft); margin: 0; }

.hero {
    padding: 72px var(--rc-page-pad) 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.hero h1 { max-width: 840px; margin: 0; text-wrap: balance; }
.hero .lead { max-width: 600px; margin: 0; text-wrap: pretty; }

.btn-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 6px;
}

.btn-row-left { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Chat mockups (hero + agent pages) - illustrations, not live UI
   -------------------------------------------------------------------------- */

.hero-mockup {
    display: flex;
    justify-content: center;
    padding: 12px var(--rc-page-pad) 80px;
}

.mockup-window {
    width: 680px;
    max-width: 100%;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-xl);
    box-shadow: var(--rc-shadow);
    overflow: hidden;
}

.mockup-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rc-border-soft);
    font-weight: 700;
    font-size: 14px;
}

.mockup-chip {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 9px;
    background: var(--rc-coral);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 15px;
}

.mockup-chip-spruce { background: var(--rc-spruce); }
.mockup-chip-fjord { background: var(--rc-fjord); }

.mockup-status {
    margin-left: auto;
    font-size: 12px;
    color: var(--rc-spruce);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mockup-meta {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--rc-text-dim);
    font-weight: 600;
}

.mockup-body {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--rc-chat-bg);
}

.msg-user {
    align-self: flex-end;
    background: var(--rc-ink);
    color: var(--rc-cream);
    border-radius: 16px 16px 4px 16px;
    padding: 11px 16px;
    font-size: 14px;
    max-width: 75%;
}

.msg-bot {
    align-self: flex-start;
    background: var(--rc-surface);
    border: 1px solid var(--rc-chat-border);
    border-radius: 16px 16px 16px 4px;
    padding: 11px 16px;
    font-size: 14px;
    max-width: 80%;
    line-height: 1.5;
}

/* Model answers are rendered from markdown (AnswerMarkdown), so the bubble
   has to style real paragraphs and lists rather than one run of text. */

.msg-rich > :first-child { margin-top: 0; }

.msg-rich > :last-child { margin-bottom: 0; }

.msg-rich p { margin: 0 0 8px; }

.msg-rich ul,
.msg-rich ol { margin: 4px 0 8px; padding-left: 20px; }

.msg-rich li { margin-bottom: 3px; }

.msg-rich h1,
.msg-rich h2,
.msg-rich h3,
.msg-rich h4 { font-size: 14px; font-weight: 700; margin: 10px 0 4px; color: var(--rc-ink); }

.msg-rich code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    background: var(--rc-sand);
    border-radius: 4px;
    padding: 1px 4px;
}

.msg-rich pre {
    background: var(--rc-sand);
    border-radius: 6px;
    padding: 8px 10px;
    overflow-x: auto;
    margin: 0 0 8px;
}

.msg-rich pre code { background: none; padding: 0; }

.msg-source {
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--rc-spruce);
    background: var(--rc-spruce-soft);
    border-radius: 6px;
    padding: 5px 10px;
}

.chip-row {
    align-self: flex-start;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip {
    border: 1px solid var(--rc-border);
    color: var(--rc-text-soft);
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 99px;
    padding: 6px 12px;
}

.chip-coral {
    border-color: var(--rc-coral);
    color: var(--rc-coral);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.card {
    background: var(--rc-cream);
    border-radius: var(--rc-radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: var(--rc-ink);
}

/* Cards on the cream page background get a white surface + border instead */
.card-surface {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
}

a.card:hover {
    box-shadow: 0 12px 32px -12px rgba(90, 60, 20, .25);
    opacity: 1;
}

.card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--rc-text-soft);
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 20px;
    background: var(--rc-coral);
    color: #fff;
}

.card-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--rc-coral);
    margin-top: auto;
}

/* Per-agent accents: icon chip + link colour */
.accent-coral .card-icon { background: var(--rc-coral); }
.accent-coral .card-link { color: var(--rc-coral); }
.accent-spruce .card-icon { background: var(--rc-spruce); }
.accent-spruce .card-link { color: var(--rc-spruce); }
.accent-fjord .card-icon { background: var(--rc-fjord); }
.accent-fjord .card-link { color: var(--rc-fjord); }

/* Numbered "STEG n" cards (home) */
.step-card {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.step-card .step-num {
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 15px;
    color: var(--rc-coral);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.step-card h3 { font-size: 19px; margin: 0; }

.step-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--rc-text-soft);
}

/* --------------------------------------------------------------------------
   FAQ / accordion (uses <details>/<summary>, no JS needed)
   -------------------------------------------------------------------------- */

.faq {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq details {
    background: var(--rc-cream);
    border-radius: 16px;
    padding: 22px 26px;
}

.section-alt .faq details { background: var(--rc-cream); }
.faq-on-cream details { background: var(--rc-surface); border: 1px solid var(--rc-border); }

.faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 16.5px;
    font-weight: 800;
    font-family: var(--rc-font-heading);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: '+';
    color: var(--rc-coral);
    font-size: 18px;
    font-family: var(--rc-font-body);
}

.faq details[open] summary::after { content: '\2212'; }

.faq details p {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--rc-text-soft);
}

/* --------------------------------------------------------------------------
   CTA panel - full-width dark (ink) band
   -------------------------------------------------------------------------- */

.cta-panel {
    padding: 56px var(--rc-page-pad);
    background: var(--rc-ink);
    color: var(--rc-on-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.cta-panel h2 { margin: 0 0 8px; font-size: 32px; }

.cta-panel p,
.cta-panel .text-muted {
    margin: 0;
    color: var(--rc-on-dark-dim);
    font-size: 15.5px;
}

.cta-panel .btn { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Agent pages (product template)
   Wrapped in .product-coral / .product-spruce / .product-fjord.
   -------------------------------------------------------------------------- */

.agent-switcher {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 24px var(--rc-page-pad) 0;
    flex-wrap: wrap;
}

.agent-switcher a {
    text-decoration: none;
    color: var(--rc-text-soft);
    border: 1px solid var(--rc-border);
    border-radius: 99px;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 700;
}

.agent-switcher a.active {
    background: var(--rc-ink);
    color: var(--rc-cream);
    border-color: var(--rc-ink);
}

.product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 64px var(--rc-page-pad) 72px;
    max-width: 1180px;
    margin: 0 auto;
}

.product-hero-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.product-hero h1 {
    font-size: 50px;
    line-height: 1.06;
    margin: 0;
    text-wrap: balance;
}

.product-hero .lead {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    text-wrap: pretty;
}

.product-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-label .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 22px;
}

.product-label .label-text {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.product-coral .label-text { color: var(--rc-coral); }
.product-spruce .label-text { color: var(--rc-spruce); }
.product-fjord .label-text { color: var(--rc-fjord); }

.product-coral .product-label .card-icon { background: var(--rc-coral); }
.product-spruce .product-label .card-icon { background: var(--rc-spruce); }
.product-fjord .product-label .card-icon { background: var(--rc-fjord); }

/* Agent-page steps: big coloured number, no card */
.step { display: flex; flex-direction: column; gap: 8px; }

.step .step-num {
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 34px;
    color: var(--rc-coral);
}

.product-spruce .step .step-num { color: var(--rc-spruce); }
.product-fjord .step .step-num { color: var(--rc-fjord); }

.step h3 { font-size: 18px; margin: 0; }

.step p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--rc-text-soft);
}

/* Per-agent hero CTA colour */
.product-spruce .product-hero .btn-primary { background: var(--rc-spruce); }
.product-fjord .product-hero .btn-primary { background: var(--rc-fjord); }
.product-spruce .cta-panel .btn-primary { background: var(--rc-spruce); }
.product-fjord .cta-panel .btn-primary { background: var(--rc-fjord); }

/* Kundeservice mockup: widget floating over a faded fake website */
.mock-site {
    background: var(--rc-sand);
    border-radius: var(--rc-radius-xl);
    padding: 28px;
    position: relative;
    min-height: 340px;
}

.mock-page {
    background: var(--rc-surface);
    border-radius: var(--rc-radius);
    padding: 16px;
    opacity: .65;
}

.mock-line {
    height: 8px;
    background: var(--rc-sand);
    border-radius: 4px;
    margin-bottom: 6px;
}

.mock-line-title {
    height: 10px;
    width: 40%;
    background: var(--rc-border);
    border-radius: 5px;
    margin-bottom: 10px;
}

.mock-url {
    font: 400 11px ui-monospace, monospace;
    color: var(--rc-text-dim);
    margin-top: 12px;
}

.mock-widget {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 300px;
    max-width: 85%;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: 18px;
    box-shadow: 0 20px 50px -18px rgba(90, 60, 20, .35);
    overflow: hidden;
}

.mock-widget .mockup-head { padding: 11px 14px; font-size: 12.5px; }
.mock-widget .mockup-chip { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
.mock-widget .mockup-body { padding: 14px; gap: 8px; }
.mock-widget .msg-user,
.mock-widget .msg-bot { font-size: 12.5px; padding: 8px 12px; border-radius: 12px; }
.mock-widget .msg-user { border-bottom-right-radius: 3px; max-width: 80%; }
.mock-widget .msg-bot { border-bottom-left-radius: 3px; max-width: 85%; }

.mock-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--rc-border-soft);
}

.mock-input-field {
    flex: 1;
    height: 32px;
    background: #F7F1E6;
    border-radius: 99px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 12px;
    color: var(--rc-text-dim);
}

.mock-input-send {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 99px;
    background: var(--rc-coral);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
}

/* Rapport mockup: KPI tiles + bar chart */
.kpi-row { display: flex; gap: 10px; }

.kpi {
    flex: 1;
    background: var(--rc-cream);
    border-radius: 12px;
    padding: 14px;
}

.kpi-label {
    font-size: 11px;
    color: var(--rc-text-dim);
    font-weight: 700;
    text-transform: uppercase;
}

.kpi-value {
    font-size: 22px;
    font-weight: 800;
    margin-top: 4px;
    font-family: var(--rc-font-heading);
}

.kpi-fjord { background: var(--rc-fjord-soft); }
.kpi-fjord .kpi-label,
.kpi-fjord .kpi-value { color: var(--rc-fjord); }

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 84px;
    padding: 0 4px;
}

.bar {
    flex: 1;
    background: var(--rc-border);
    border-radius: 5px 5px 0 0;
}

.bar-mid { background: #A9BBE8; }
.bar-hot { background: var(--rc-fjord); }

.mock-text-line {
    height: 9px;
    background: var(--rc-sand);
    border-radius: 5px;
}

/* --------------------------------------------------------------------------
   Kunnskapsbanken - internal dashboard chat (reuses the mockup chat look)
   -------------------------------------------------------------------------- */

.chat-panel {
    max-width: 760px;
    margin-top: 28px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-xl);
    overflow: hidden;
}

.chat-messages {
    min-height: 260px;
    max-height: 60vh;
    overflow-y: auto;
}

.chat-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--rc-border-soft);
}

.chat-form input[type="text"] {
    flex: 1;
    border-radius: 99px;
    padding: 10px 16px;
}

/* Dataset explorer: structured query form + chart frame */
.query-form {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 20px 22px;
    max-width: 860px;
}

.query-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.query-row .form-field { flex: 1 1 180px; margin-bottom: 12px; }

.query-row-bottom {
    align-items: center;
    gap: 14px;
    padding-top: 4px;
}

.chart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rc-text-soft);
}

.chart-toggle input { width: auto; }

.chart-frame {
    max-width: 860px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 12px;
    overflow-x: auto;
}

.chart-frame svg { display: block; width: 100%; height: auto; }

/* Plan usage panel on the dashboard */
.usage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 240px));
    gap: 14px;
}

.usage-card {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 16px 18px;
}

.usage-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rc-text-dim);
}

.usage-value {
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 22px;
    margin: 4px 0 8px;
}

.usage-bar {
    height: 6px;
    background: var(--rc-sand);
    border-radius: 99px;
    overflow: hidden;
}

.usage-bar span {
    display: block;
    height: 100%;
    background: var(--rc-spruce);
    border-radius: 99px;
}

.usage-full .usage-bar span { background: var(--rc-error); }
.usage-full .usage-value { color: var(--rc-error); }

@media (max-width: 900px) {
    .usage-grid { grid-template-columns: 1fr; }
}

/* "Thinking" indicator: three pulsing dots in a bot bubble */
.typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
}

.typing[hidden] { display: none; }

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--rc-text-dim);
    animation: typing-pulse 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }

@keyframes typing-pulse {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* --------------------------------------------------------------------------
   Pricing page
   -------------------------------------------------------------------------- */

.pricing-header {
    text-align: center;
    padding: 64px var(--rc-page-pad) 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.pricing-header h1 { font-size: 54px; margin: 0; text-wrap: balance; }
.pricing-header .lead { max-width: 560px; margin: 0; font-size: 18px; }

.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--rc-page-pad) 72px;
    align-items: stretch;
}

.tier {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-xl);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tier h2 { font-size: 24px; margin: 0 0 6px; }

.tier-tagline {
    margin: 0;
    font-size: 14px;
    color: var(--rc-text-soft);
}

.tier-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tier-price .amount {
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 44px;
}

.tier-price .period {
    font-size: 14px;
    color: var(--rc-text-dim);
    font-weight: 600;
}

.tier-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14.5px;
    color: var(--rc-text-soft);
    line-height: 1.5;
}

.tier-list div { display: flex; gap: 9px; }

.tier-list .check {
    color: var(--rc-spruce);
    font-weight: 800;
}

.tier .btn { margin-top: auto; text-align: center; }

/* Featured (dark) tier */
.tier-featured {
    background: var(--rc-ink);
    color: var(--rc-on-dark);
    border: 0;
    position: relative;
    box-shadow: 0 24px 60px -24px rgba(33, 29, 23, .5);
}

.tier-featured .tier-tagline { color: var(--rc-on-dark-dim); }
.tier-featured .tier-price .period { color: var(--rc-on-dark-dim); }
.tier-featured .tier-list { color: var(--rc-on-dark-soft); }
.tier-featured .tier-list .check { color: #7FC79A; }

.tier-flag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rc-coral);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 99px;
    padding: 6px 14px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Forms (dashboard + auth) - Solskinn tokens
   -------------------------------------------------------------------------- */

.form-field { margin-bottom: 18px; }

.form-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--rc-text-soft);
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: 11px 14px;
    color: var(--rc-text);
    font: inherit;
    font-size: 15px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--rc-coral);
    box-shadow: 0 0 0 3px rgba(229, 97, 60, .15);
}

.form-error {
    color: var(--rc-error);
    font-size: 13.5px;
    margin-top: 6px;
}

.form-error a { color: inherit; }

input[type="file"] {
    color: var(--rc-text-soft);
    font-size: 13.5px;
    max-width: 320px;
}

/* --------------------------------------------------------------------------
   Auth pages (login / register)
   -------------------------------------------------------------------------- */

.auth-wrap {
    display: flex;
    justify-content: center;
    padding: 72px var(--rc-page-pad) 96px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-lg);
    padding: 40px 36px;
}

.auth-title { font-size: 28px; margin-bottom: 8px; }

.auth-sub {
    color: var(--rc-text-dim);
    font-size: 14px;
    margin-bottom: 24px;
}

.auth-card form { margin-top: 18px; }

.auth-alt {
    margin-top: 22px;
    font-size: 14px;
    color: var(--rc-text-dim);
    text-align: center;
}

.auth-alt a { color: var(--rc-coral); }

/* Alerts / flash messages */

.alert {
    border-radius: var(--rc-radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 18px;
}

.alert-error {
    background: var(--rc-error-bg);
    border: 1px solid rgba(180, 35, 24, .35);
    color: var(--rc-error);
}

.alert-success {
    background: var(--rc-spruce-soft);
    border: 1px solid rgba(60, 154, 95, .35);
    color: var(--rc-spruce);
}

.alert-page {
    max-width: 720px;
    margin: 24px auto 0;
}

/* --------------------------------------------------------------------------
   Dashboard & admin
   -------------------------------------------------------------------------- */

.dashboard { padding: 0 var(--rc-page-pad); }

.dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-top: 56px;
}

.dashboard-title { font-size: 32px; margin-bottom: 6px; }

.back-link {
    font-size: 13px;
    color: var(--rc-text-dim);
    text-decoration: none;
}

.back-link:hover { color: var(--rc-coral); opacity: 1; }

.badge-role {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rc-badge-text);
    background: var(--rc-sand);
    border-radius: 99px;
    padding: 3px 10px;
    margin-left: 8px;
}

.dash-tabs {
    display: flex;
    gap: 4px;
    margin-top: 28px;
    border-bottom: 1px solid var(--rc-border);
}

.dash-tabs a {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rc-text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.dash-tabs a:hover { color: var(--rc-ink); opacity: 1; }

.dash-tabs a.active {
    color: var(--rc-coral);
    border-bottom-color: var(--rc-coral);
}

.table-wrap { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rc-border);
    white-space: nowrap;
}

.data-table th {
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rc-text-dim);
}

.data-table td form { display: inline; }

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.status-on { background: var(--rc-spruce); }
.status-off { background: var(--rc-border); }

.inline-form { max-width: 420px; }

.table-link {
    color: var(--rc-ink);
    font-weight: 600;
    text-decoration: none;
}

.table-link:hover { color: var(--rc-coral); opacity: 1; }

/* Report builder: section editor */

.editor-card {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 24px;
    margin-bottom: 20px;
    max-width: 760px;
}

.editor-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.editor-card-num {
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 13px;
    color: var(--rc-fjord);
}

.editor-actions { display: flex; gap: 8px; }

.content-area { font-size: 14.5px; line-height: 1.55; }

/* Report builder v2: outline + section dialogs + blocks */

.outline {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 760px;
}

.outline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: 10px 14px;
    margin-bottom: 8px;
}

.outline-item.dragging { opacity: .5; border-style: dashed; }

.drag-handle {
    cursor: grab;
    color: var(--rc-text-dim);
    font-size: 14px;
    letter-spacing: -2px;
    user-select: none;
    padding: 2px 4px;
}

/* The handle only means something with JS loaded */
html:not(.js) .drag-handle { display: none; }
html.js .move-buttons { display: none; }

.outline-num {
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 13px;
    color: var(--rc-fjord);
    min-width: 18px;
}

.outline-title {
    font-weight: 600;
    color: var(--rc-ink);
    text-decoration: none;
    flex: 0 1 auto;
}

.outline-title:hover { color: var(--rc-coral); }

.outline-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-right: auto;
}

.outline-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--rc-text-dim);
    background: var(--rc-sand);
    border: 1px solid var(--rc-border);
    border-radius: 99px;
    padding: 2px 10px;
    white-space: nowrap;
}

dialog.section-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    background: var(--rc-surface);
    padding: 24px;
    margin: auto;
}

dialog.section-dialog::backdrop { background: rgba(33, 29, 23, .45); }

/* No-JS fallback: <dialog open> renders inline like an editor card */
dialog.section-dialog[open]:not(:modal) {
    position: static;
    margin: 0 0 20px;
}

.section-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.section-dialog-head h3 {
    font-family: var(--rc-font-heading);
    font-size: 18px;
}

.block-card {
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--rc-cream);
}

.block-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.block-card-head .editor-actions { margin-left: auto; }

.block-warning-card {
    margin-top: 12px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--rc-warn);
    background: var(--rc-warn-bg);
    border: 1px solid rgba(183, 121, 31, .35);
    border-radius: var(--rc-radius-sm);
}

.slot-card { padding: 18px 20px; }

.table-title { margin: 0 0 6px; font-size: 14px; }

/* Data sources + AI suggestions inside a section card */

.editor-subblock {
    border-top: 1px solid var(--rc-border);
    margin-top: 20px;
    padding-top: 16px;
}

.editor-subblock h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rc-text-dim);
    margin-bottom: 12px;
}

.source-list { list-style: none; margin-bottom: 12px; padding: 0; }

.source-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
}

.source-item a { color: var(--rc-ink); font-weight: 600; }
.source-item form { margin-left: auto; }

.source-meta { font-size: 12.5px; color: var(--rc-text-dim); }

.source-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.source-actions select { width: auto; max-width: 320px; }

.generation {
    margin-top: 14px;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: 12px 16px;
    background: var(--rc-cream);
}

.generation summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--rc-text-soft);
}

.generation-text {
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rc-text-soft);
    max-height: 340px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Fact-check claims */

.qa-claim {
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--rc-border);
    font-size: 14px;
}

.qa-claim-supported { border-left-color: var(--rc-spruce); }
.qa-claim-unsupported { border-left-color: var(--rc-error); }
.qa-claim-uncertain { border-left-color: var(--rc-warn); }

.qa-verdict {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-radius: 99px;
    padding: 2px 10px;
    margin-bottom: 6px;
}

.qa-verdict-supported {
    color: var(--rc-spruce);
    background: var(--rc-spruce-soft);
    border: 1px solid rgba(60, 154, 95, .35);
}

.qa-verdict-unsupported {
    color: var(--rc-error);
    background: var(--rc-error-bg);
    border: 1px solid rgba(180, 35, 24, .35);
}

.qa-verdict-uncertain {
    color: var(--rc-warn);
    background: var(--rc-warn-bg);
    border: 1px solid rgba(183, 121, 31, .35);
}

.qa-verdict-muted {
    color: var(--rc-text-dim);
    background: var(--rc-sand);
    border: 1px solid var(--rc-border);
}

.report-preview h2 .qa-verdict {
    margin-left: 10px;
    vertical-align: middle;
}

.qa-claim-text { color: var(--rc-ink); margin-bottom: 4px; }

.qa-claim-explain { font-size: 13px; color: var(--rc-text-dim); }

/* Assembled report preview */

.report-preview {
    max-width: 760px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 40px 44px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--rc-text-soft);
}

.report-preview h2 {
    font-size: 21px;
    color: var(--rc-ink);
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rc-border);
}

.report-preview h2:first-child { margin-top: 0; }

.report-preview h3 { font-size: 16px; color: var(--rc-ink); margin: 18px 0 8px; }

.report-preview p { margin-bottom: 12px; }

.report-preview ul,
.report-preview ol { margin: 0 0 12px 22px; }

.report-preview li { margin-bottom: 5px; }

.report-preview table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 14px;
    font-size: 13.5px;
}

.report-preview th,
.report-preview td {
    border: 1px solid var(--rc-border);
    padding: 7px 10px;
    text-align: left;
}

.report-preview th { color: var(--rc-ink); }

.report-preview blockquote {
    margin: 0 0 12px;
    padding-left: 14px;
    border-left: 3px solid var(--rc-coral);
    color: var(--rc-text-dim);
}

/* Cover page and table of contents.
   In the PDF the cover is a page of its own (page-break-after); here it is a
   panel with a dashed edge, so it reads as a separate page without pretending
   the preview is paginated. */

.cover {
    text-align: center;
    padding: 48px 24px 40px;
    margin-bottom: 32px;
    border-bottom: 2px dashed var(--rc-border);
}

.cover-title {
    font-size: 32px;
    line-height: 1.2;
    color: var(--rc-ink);
    margin: 0 0 12px;
}

.cover-subtitle {
    font-size: 17px;
    color: var(--rc-text-soft);
    margin: 0 0 28px;
}

.cover-company { font-size: 15px; color: var(--rc-ink); margin: 0 0 4px; }

.cover-date { font-size: 14px; color: var(--rc-text-dim); margin: 0; }

.cover-stamp { font-size: 12.5px; color: var(--rc-text-dim); margin: 32px 0 0; }

ol.toc { margin: 0 0 14px 22px; }

ol.toc li { margin-bottom: 7px; }

ol.toc a { color: var(--rc-ink); text-decoration: none; }

ol.toc a:hover { text-decoration: underline; }

/* Where the pages break. The preview is one scroll, but every element starts a
   new page in PDF and Word - a dashed rule shows that without pretending the
   preview is paginated. */

.preview-page-start {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 2px dashed var(--rc-border);
}

.preview-section > h2:first-child { margin-top: 0; }

/* Cover preview inside the builder dialog - a small sketch of the title page,
   so the user sees the effect of the fields without leaving the form. */

.cover-preview {
    margin-top: 12px;
    padding: 26px 20px;
    text-align: center;
    background: var(--rc-cream);
    border: 1px dashed var(--rc-border);
    border-radius: var(--rc-radius);
}

.cover-preview-title { font-size: 19px; color: var(--rc-ink); margin-bottom: 6px; }

.cover-preview-sub { font-size: 14px; color: var(--rc-text-soft); margin-bottom: 14px; }

.cover-preview-line { font-size: 13px; color: var(--rc-text-dim); }

/* Admin: editable site texts */

.content-links { display: flex; flex-wrap: wrap; gap: 12px; }

.content-form { max-width: 640px; }

.field-hint {
    font-size: 12.5px;
    color: var(--rc-text-dim);
    margin-top: 5px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px var(--rc-page-pad);
    font-size: 13px;
    color: var(--rc-text-dim);
    flex-wrap: wrap;
    gap: 14px;
}

.footer-brand {
    font-weight: 700;
    color: var(--rc-ink);
    font-family: var(--rc-font-heading);
}

.footer-links {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.trust {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.trust-mark {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--rc-spruce);
    border-radius: 4px;
    display: inline-block;
}

.trust-mark-round { border-radius: 99px; }

/* --------------------------------------------------------------------------
   Help / onboarding pages
   -------------------------------------------------------------------------- */

.help-grid { max-width: 100%; margin: 0; }

.help-lead {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--rc-text-soft);
}

.help-lead p { margin: 0 0 12px; }

.help-note {
    max-width: 760px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 22px 24px;
}

.help-bullets {
    margin: 0;
    padding-left: 20px;
    max-width: 720px;
}

.help-bullets li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--rc-text-soft);
    margin-bottom: 8px;
}

/* Admin: one card per AI provider */
.model-provider { max-width: 860px; }
.model-provider code { font-size: 12.5px; }

/* Optional data-handling note on an agent page */
.data-note {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-left: 4px solid var(--rc-spruce);
    border-radius: var(--rc-radius);
    padding: 28px 32px;
}

.data-note h2 { font-size: 24px; margin-bottom: 10px; }

.data-note p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--rc-text-soft);
    margin: 0;
    max-width: 62ch;
}

/* Instructional videos (partials/video.php) */

.video-block { max-width: 760px; }

.video-heading { font-size: 19px; margin-bottom: 12px; }

.video-frame {
    margin: 0;
    background: var(--rc-ink);
    border-radius: var(--rc-radius);
    overflow: hidden;
}

.video-frame video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 60vh;
    background: #000;
}

.video-frame figcaption {
    padding: 12px 18px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-top: none;
    font-size: 14px;
    color: var(--rc-text-soft);
}

.video-frame figcaption strong { display: block; color: var(--rc-ink); }
.video-frame figcaption span { display: block; margin-top: 2px; }

/* Admin: one card per video slot */
.video-slot { max-width: 760px; }

.video-current {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 14px 0;
    border-top: 1px solid var(--rc-border);
}

.video-current video { border-radius: var(--rc-radius-sm); background: #000; max-width: 100%; }

/* Subscription page */

.current-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 680px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 22px 24px;
}

.current-plan-name {
    font-family: var(--rc-font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--rc-ink);
}

.current-plan-price { font-size: 15px; margin-top: 4px; }

.current-plan-meta { font-size: 14px; text-align: right; }

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 900px;
}

.plan-card {
    position: relative;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-card-current { border-color: var(--rc-coral); background: var(--rc-coral-soft); }

.plan-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    background: var(--rc-coral);
    border-radius: 99px;
    padding: 3px 10px;
}

.plan-card h3 { font-size: 18px; margin: 0; }

.plan-price { font-size: 20px; font-weight: 700; color: var(--rc-ink); }

.plan-limits { list-style: none; padding: 0; margin: 0 0 auto; }

.plan-limits li {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--rc-text-soft);
    border-bottom: 1px solid var(--rc-border);
    padding: 4px 0;
}

.plan-limits li:last-child { border-bottom: none; }

@media (max-width: 720px) {
    .plan-grid { grid-template-columns: 1fr; }
    .current-plan-meta { text-align: left; }
}

/* Honeypot: off-screen, never shown to or focusable by real users */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Plain prose page (personvern)
   -------------------------------------------------------------------------- */

.prose-page {
    max-width: 720px;
    margin: 0 auto;
    color: var(--rc-text-soft);
    line-height: 1.7;
}

.prose-page h1 { font-size: 34px; margin: 0 0 12px; color: var(--rc-ink); }

.prose-page h2 {
    font-size: 20px;
    margin: 34px 0 10px;
    color: var(--rc-ink);
}

.prose-page p { margin: 0 0 14px; }

.prose-lead { font-size: 17px; color: var(--rc-text-soft); margin-bottom: 8px; }

.prose-note {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--rc-border);
    font-size: 13.5px;
    color: var(--rc-text-dim);
}

/* --------------------------------------------------------------------------
   Admin: traffic
   -------------------------------------------------------------------------- */

/* Visible to screen readers only - for labels the layout already makes obvious */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The usage grid is hardcoded to three columns; traffic has four cards */
.usage-grid-wide { grid-template-columns: repeat(4, minmax(160px, 220px)); }

@media (max-width: 1100px) {
    .usage-grid-wide { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 640px) {
    .usage-grid-wide { grid-template-columns: 1fr; }
}

/* Date range picker in the page header */
.range-form { display: flex; gap: 8px; align-items: center; }

/* Pages / referrers / countries side by side, stacking on narrow screens */
.traffic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    align-items: start;
}

/* Compact inline URL form (knowledge source → webpage) */
.url-form { display: flex; gap: 6px; align-items: center; }
.url-form input { width: 180px; max-width: 180px; font-size: 13px; padding: 5px 8px; }
/* Nedtrekk i en tabellrad (planvelgeren i systemadmin). */
.url-form select { font-size: 13px; padding: 5px 8px; }

/* --------------------------------------------------------------------------
   Systemadmin-tabeller: bredden bestemmes av kolonnene, ikke av innholdet

   .data-table setter white-space: nowrap på hver celle, og lar dermed
   innholdet bestemme bredden. Det går bra for korte verdier, men et langt
   firmanavn, en lang e-postadresse eller et nedtrekk i siste kolonne dytter
   tabellen forbi skjermkanten - og .table-wrap gjør den da rullbar sidelengs,
   som i praksis vil si at «Endre plan» blir usynlig.

   table-layout: fixed snur det: kolonnebreddene under bestemmer, og tabellen
   er per definisjon nøyaktig like bred som containeren. Da KAN den ikke bli
   for bred, uansett hva som står i cellene. overflow-wrap: anywhere trengs i
   tillegg, fordi max-width alene ikke bryter en streng uten mellomrom -
   nettopp det en e-postadresse er.
   -------------------------------------------------------------------------- */

.admin-table { table-layout: fixed; width: 100%; }

.admin-table th,
.admin-table td {
    white-space: normal;
    vertical-align: top;
}

/* Kun i cellene: en e-postadresse eller et firmanavn uten mellomrom må kunne
   brytes. Overskriftene skal IKKE ha den - «PRODUKTER» delt som «PRODUKT/ER»
   er styggere enn en litt bredere kolonne. */
.admin-table td { overflow-wrap: anywhere; }

/* Prosenter, ikke piksler: med faste bredder på noen kolonner og «resten» på
   én av dem, sluker den siste all overskuddsplass på en bred skjerm. Summen
   er 100, så forholdet mellom kolonnene er det samme uansett skjermbredde. */
.admin-table .col-id { width: 5%; }
.admin-table .col-name { width: 33%; }
.admin-table .col-user { width: 34%; }
.admin-table .col-plan { width: 16%; }
.admin-table .col-users { width: 11%; }
.admin-table .col-products { width: 12%; }
.admin-table .col-action { width: 23%; }
.admin-table .col-role { width: 15%; }
.admin-table .col-date { width: 18%; }
.admin-table .col-customer { width: 28%; }

/* Mer spesifikk enn «.data-table td form { display: inline }», som ellers
   ville slått ut .url-form sin flex og lagt knappen inntil nedtrekket igjen. */
.admin-table td .url-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* min-width: 0 er det som lar nedtrekket krympe: uten den nekter et
   flex-element å bli smalere enn sitt bredeste alternativ. flex-basis auto
   (ikke 100%) holder «Sett» på samme linje; flex-wrap over tar den ned først
   når det virkelig ikke er plass. */
.admin-table td .url-form select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Kunnskapsbase: add-content panels + a list that survives hundreds of rows
   -------------------------------------------------------------------------- */

/* Two ways in, side by side. auto-fit means one column on a narrow screen
   without a media query. */
.add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    max-width: 860px;
}

.add-card {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 22px 24px;
}

.add-card h3 {
    font-size: 16px;
    margin: 0 0 6px;
    color: var(--rc-ink);
}

.add-card p.text-muted {
    font-size: 13.5px;
    margin: 0 0 16px;
}

.add-card .form-field { margin-bottom: 14px; }

.add-card input[type="url"] { width: 100%; }

.add-card .field-hint { margin-top: 12px; }

/* Section heading with a status summary beside it */
.section-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 18px;
}

.count-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.count-chip {
    font-size: 12.5px;
    color: var(--rc-text-dim);
    background: var(--rc-sand);
    border-radius: 100px;
    padding: 3px 11px;
    white-space: nowrap;
}

.count-chip-alert { background: #F6DED4; color: #8A3B1E; }

/* Table cells default to nowrap, which turns one long document title into a
   horizontal scrollbar for the whole table. These wrap instead. */
.data-table td.cell-wrap {
    white-space: normal;
    max-width: 340px;
}

.source-name { font-weight: 600; color: var(--rc-ink); }

/* Filename, size and chunk count used to be three columns. One quiet line
   under the title carries them without widening anything. */
.source-sub {
    font-size: 12.5px;
    color: var(--rc-text-dim);
    margin-top: 3px;
    line-height: 1.45;
}

.source-sub-alert { color: #8A3B1E; }

.source-sub a { color: var(--rc-text-dim); text-decoration: underline; }

/* The citation-link editor, folded away so every row is not a text input */
.link-edit { margin-top: 7px; }

.link-edit summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--rc-text-dim);
    white-space: nowrap;
}

.link-edit summary:hover { color: var(--rc-coral); }

.link-edit .url-form { margin-top: 8px; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Collapsible explanatory notes - keeps the wall of text off the page while
   leaving it one click away */
.info-note {
    margin-top: 16px;
    max-width: 720px;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: 12px 16px;
    background: var(--rc-cream);
}

.info-note summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rc-text-soft);
}

.info-note .help-bullets { margin: 12px 0 2px; }

.info-note .help-bullets li { font-size: 13.5px; }

.dataset-block > summary {
    cursor: pointer;
    list-style: none;
    color: var(--rc-ink);
}

.dataset-block > summary::-webkit-details-marker { display: none; }

.dataset-block > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 8px;
    font-size: 15px;
    color: var(--rc-text-dim);
}

.dataset-block[open] > summary::before { content: '▾'; }

/* Conversation log: the transcript, and the pager under the list */

.chat-log {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 760px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding: 24px;
}

.chat-log .msg-user,
.chat-log .msg-bot { max-width: 88%; }

.msg-meta {
    align-self: flex-start;
    font-size: 11.5px;
    color: var(--rc-text-dim);
    margin: -4px 0 4px 4px;
}

.pager {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    font-size: 13.5px;
}

/* Marks a setting that belongs to a higher plan than the customer has */
.plan-tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rc-coral);
    background: var(--rc-coral-soft, var(--rc-sand));
    border-radius: 100px;
    padding: 2px 8px;
    vertical-align: middle;
}

/* Radio cards (e.g. chatbot answering mode) */
.radio-cards { display: flex; flex-direction: column; gap: 10px; }

.radio-card {
    display: block;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: 12px 16px;
    cursor: pointer;
    background: var(--rc-surface);
}

.radio-card:hover { border-color: var(--rc-coral); }

.radio-card-active {
    border-color: var(--rc-coral);
    background: var(--rc-coral-soft);
}

.radio-card input { margin-right: 8px; }

.radio-card-title { font-weight: 600; color: var(--rc-ink); }

.radio-card-desc {
    display: block;
    margin-top: 4px;
    margin-left: 24px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--rc-text-dim);
}

/* Highlighted callout (e.g. the WordPress shortcut) */
.help-callout {
    max-width: 760px;
    background: var(--rc-coral-soft);
    border: 1px solid rgba(229, 97, 60, .3);
    border-radius: var(--rc-radius);
    padding: 22px 24px;
}

.help-callout p { font-size: 14.5px; line-height: 1.6; color: var(--rc-text-soft); margin: 0 0 10px; }

.help-ol { margin: 0 0 12px; padding-left: 20px; }

.help-ol li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--rc-text-soft);
    margin-bottom: 6px;
}

/* Numbered onboarding steps */
.help-step {
    display: flex;
    gap: 18px;
    max-width: 760px;
    align-items: flex-start;
}

.help-step-num {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rc-coral);
    color: #fff;
    font-family: var(--rc-font-heading);
    font-weight: 800;
    font-size: 17px;
    display: grid;
    place-items: center;
}

.help-step-body { flex: 1 1 auto; }

.help-step-body h2 {
    font-size: 19px;
    margin: 4px 0 10px;
}

.help-step-body p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--rc-text-soft);
    margin: 0 0 10px;
    max-width: 640px;
}

/* Embed snippet box with copy button */
.embed-box {
    position: relative;
    max-width: 680px;
    margin: 6px 0 4px;
}

.embed-box pre {
    background: var(--rc-ink);
    color: #F3EEE4;
    border-radius: var(--rc-radius-sm);
    padding: 18px 18px;
    overflow-x: auto;
    margin: 0;
}

.embed-box code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
}

.embed-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.embed-copy:hover { background: rgba(255, 255, 255, .2); }

/* Inline code in help body */
.help-step-body code,
.help-bullets code,
.help-lead code,
.flash-snippet code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    background: var(--rc-sand);
    padding: 1px 6px;
    border-radius: 6px;
    color: var(--rc-ink);
}

/* Ready-made snippet inside the one-time key-creation flash */
.flash-snippet {
    background: var(--rc-ink);
    color: #F3EEE4;
    border-radius: var(--rc-radius-sm);
    padding: 14px 16px;
    overflow-x: auto;
    margin: 8px 0;
}

.flash-snippet code {
    background: none;
    color: #F3EEE4;
    padding: 0;
    font-size: 13px;
    white-space: pre;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    :root { --rc-page-pad: 24px; }
    h1 { font-size: 40px; }
    h2 { font-size: 28px; }
    .pricing-header h1 { font-size: 38px; }
    .card-grid, .tier-grid { grid-template-columns: 1fr; }
    .product-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
    .product-hero h1 { font-size: 36px; }
    .nav-links { gap: 14px; }
    .btn-row { flex-direction: column; align-items: center; }
    .btn-row-left { align-items: flex-start; }
    .cta-panel { justify-content: center; text-align: center; }
    .tier-featured { order: -1; }
}

/* ==========================================================================
   Blogg og nyheter
   ========================================================================== */

.blog-page { padding: 0 var(--rc-page-pad) 80px; max-width: 1180px; margin: 0 auto; }
.blog-page-single { max-width: 820px; }

.blog-header { padding: 56px 0 32px; }
.blog-header h1 { font-size: clamp(32px, 5vw, 46px); margin: 0 0 12px; }
.blog-lead { color: var(--rc-text-soft); font-size: 17px; margin: 0; max-width: 620px; }

.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

.blog-filter {
    padding: 7px 15px;
    border: 1px solid var(--rc-border);
    border-radius: 999px;
    font-size: 14px;
    color: var(--rc-text-soft);
    text-decoration: none;
    background: var(--rc-surface);
}

.blog-filter:hover { border-color: var(--rc-coral); color: var(--rc-ink); }
.blog-filter-active { background: var(--rc-ink); border-color: var(--rc-ink); color: #fff; }
.blog-filter-rss { margin-left: auto; }

.blog-empty { color: var(--rc-text-soft); padding: 40px 0; }

/* auto-fill med en minstebredde: ett kort på mobil, to på nettbrett, tre på
   skjerm - uten en eneste mediespørring. */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 26px;
}

.blog-card {
    background: var(--rc-surface);
    border: 1px solid var(--rc-border-soft);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}

.blog-card:hover { border-color: var(--rc-coral); transform: translateY(-2px); }

.blog-card-link { display: block; color: inherit; text-decoration: none; height: 100%; }

.blog-card-image { aspect-ratio: 16 / 9; background: var(--rc-cream); overflow: hidden; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card-body { padding: 20px 22px 24px; }

.blog-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--rc-text-dim);
    margin-bottom: 12px;
}

.blog-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--rc-cream);
    color: var(--rc-text-soft);
}

.blog-tag-nyheter { background: #F6E3D9; color: #8A3B1E; }

.blog-card-title { font-size: 20px; line-height: 1.35; margin: 0 0 10px; color: var(--rc-ink); }
.blog-card-teaser { font-size: 14.5px; color: var(--rc-text-soft); margin: 0 0 16px; line-height: 1.6; }
.blog-card-more { font-size: 14px; font-weight: 600; color: var(--rc-coral); }

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 44px;
}

.blog-pagination-count { font-size: 14px; color: var(--rc-text-dim); }

/* --------------------------------------------------------------------------
   Selve innlegget
   -------------------------------------------------------------------------- */

.blog-preview-bar {
    margin-top: 24px;
    padding: 12px 16px;
    border: 1px solid #E0C08A;
    background: #FBF3E2;
    border-radius: 10px;
    font-size: 14px;
    color: #6B5326;
}

.blog-article-head { padding: 48px 0 8px; }
.blog-article-title { font-size: clamp(30px, 4.6vw, 42px); line-height: 1.2; margin: 16px 0 14px; }
.blog-article-lead { font-size: 18.5px; line-height: 1.6; color: var(--rc-text-soft); margin: 0; }
.blog-author { color: var(--rc-text-dim); }

.blog-cover { margin: 32px 0 8px; }
.blog-cover img { width: 100%; border-radius: 14px; display: block; }
.blog-cover figcaption { font-size: 13px; color: var(--rc-text-dim); margin-top: 10px; text-align: center; }

/* Brødteksten. Alt her er generert av BlogMarkdown, så selektorene er på
   rene elementer - det finnes ingen klasser å ta tak i. */
.blog-body { font-size: 17.5px; line-height: 1.75; color: var(--rc-text); padding-top: 12px; }

.blog-body > * + * { margin-top: 1.15em; }
.blog-body h2 { font-size: 27px; line-height: 1.3; margin-top: 1.9em; }
.blog-body h3 { font-size: 21px; line-height: 1.35; margin-top: 1.6em; }
.blog-body h4 { font-size: 18px; margin-top: 1.4em; }
.blog-body p { margin: 0; }
.blog-body ul, .blog-body ol { padding-left: 1.4em; }
.blog-body li + li { margin-top: .45em; }
.blog-body a { color: var(--rc-coral); }
.blog-body strong { color: var(--rc-ink); }

.blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 1.8em auto;
}

.blog-body blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--rc-coral);
    color: var(--rc-text-soft);
    font-style: italic;
}

.blog-body pre {
    background: var(--rc-ink);
    color: #F3EFE7;
    padding: 18px 20px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
}

.blog-body :not(pre) > code {
    background: var(--rc-cream);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: .88em;
}

.blog-body hr { border: none; border-top: 1px solid var(--rc-border); margin: 2.4em 0; }

/* Tabellen ligger allerede i .table-wrap (se BlogMarkdown::wrapTables), så
   den ruller i sin egen boks i stedet for å utvide artikkelen. */
.blog-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.blog-table th, .blog-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rc-border); }
.blog-table th { font-weight: 600; color: var(--rc-text-soft); background: var(--rc-cream); }

.blog-video { margin: 1.8em 0; }
.blog-video video { width: 100%; border-radius: 12px; display: block; background: #000; }

.blog-neighbours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--rc-border);
}

.blog-neighbour {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--rc-border-soft);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: var(--rc-surface);
}

.blog-neighbour:hover { border-color: var(--rc-coral); }
.blog-neighbour-next { text-align: right; }
.blog-neighbour-label { display: block; font-size: 12.5px; color: var(--rc-text-dim); margin-bottom: 5px; }
.blog-neighbour-title { font-weight: 600; color: var(--rc-ink); font-size: 15px; }

.blog-cta {
    margin-top: 48px;
    padding: 34px;
    background: var(--rc-cream);
    border-radius: 16px;
    text-align: center;
}

.blog-cta h2 { font-size: 24px; margin: 0 0 8px; }
.blog-cta p { color: var(--rc-text-soft); margin: 0 0 20px; }
.blog-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.blog-notfound { text-align: center; padding: 80px 0; }
.blog-notfound h1 { font-size: 32px; margin-bottom: 12px; }
.blog-notfound .blog-lead { margin: 0 auto 28px; }

/* --------------------------------------------------------------------------
   Redigering i systemadmin
   -------------------------------------------------------------------------- */

.blog-editor { max-width: 820px; }

.editor-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px;
    border: 1px solid var(--rc-border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: var(--rc-cream);
}

.editor-btn {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--rc-text-soft);
    cursor: pointer;
    min-width: 34px;
}

.editor-btn:hover { background: var(--rc-surface); border-color: var(--rc-border); color: var(--rc-ink); }
.editor-btn.is-bold { font-weight: 700; }
.editor-btn.is-italic { font-style: italic; }
.editor-btn-preview { margin-left: auto; font-weight: 600; color: var(--rc-coral); }
.editor-btn:disabled { opacity: .55; cursor: default; }

/* Verktøylinja sitter rett oppå feltet, så hjørnene må møtes. */
.editor-area { border-radius: 0 0 10px 10px; font-family: var(--rc-font-mono, ui-monospace, monospace); font-size: 14.5px; line-height: 1.65; }

.editor-preview {
    border: 1px solid var(--rc-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 24px;
    background: var(--rc-surface);
    min-height: 300px;
}

.editor-preview > * + * { margin-top: 1.1em; }
.editor-preview img { max-width: 100%; height: auto; border-radius: 10px; }
.editor-preview video { max-width: 100%; border-radius: 10px; }

.editor-actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; }

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.media-item {
    border: 1px solid var(--rc-border-soft);
    border-radius: 12px;
    padding: 12px;
    background: var(--rc-surface);
}

.media-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 8px;
    background: var(--rc-cream);
    display: block;
}

.media-thumb-video {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--rc-text-dim);
}

/* Filnavn kan være lange og har ingen mellomrom å bryte på. */
.media-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--rc-ink);
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-size { font-size: 12px; color: var(--rc-text-dim); margin-top: 2px; }
.media-actions { display: flex; gap: 6px; margin-top: 10px; }
.media-actions form { display: inline; }

.media-snippet {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--rc-text-dim);
    background: var(--rc-cream);
    padding: 5px 7px;
    border-radius: 5px;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Samtykkeboks (Google Ads)
   ==========================================================================
   Skjult som standard og avdekket av consent.js. Uten JavaScript vises den
   aldri - og da lastes ingen Google-tag heller, så det er ingenting å
   samtykke til. Knapper som ikke virker ville vært verre enn ingen boks. */

.consent-bar { display: none; }

.consent-bar-visible {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000; /* over chat-widgeten, som er det eneste høyere */
    background: var(--rc-surface);
    border-top: 1px solid var(--rc-border);
    box-shadow: 0 -6px 24px rgba(33, 29, 23, .10);
    padding: 16px var(--rc-page-pad);
}

.consent-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.consent-text {
    flex: 1 1 380px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rc-text-soft);
}

.consent-text a { color: var(--rc-coral); }

/* Knappene skal aldri klemmes sammen til to ulesbare striper på mobil. */
.consent-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.consent-actions .btn { white-space: nowrap; }

@media (max-width: 560px) {
    .consent-actions { width: 100%; }
    .consent-actions .btn { flex: 1 1 auto; }
}

/* Betaprogrammet: panelet på abonnementssiden for en stabsgitt plan.
   Bevisst rolig - dette er informasjon, ikke en advarsel. */
.beta-note {
    border: 1px solid var(--rc-border);
    background: var(--rc-cream);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--rc-text-soft);
    max-width: 720px;
}

.beta-note strong { color: var(--rc-ink); }
.beta-note a { color: var(--rc-coral); }