/* ==========================================================================
   PAPER — after Tavily.

   A warm cream canvas with printed-looking prose, hairline outlined cards and
   no shadows, dark-pill CTAs, and mono "/slash" prefixes on section headings.

   Two deliberate departures from the source, both because this is a dashboard
   and not a marketing page:

   1. Tavily's signature red (#ff272d) is NOT the interactive accent here. On a
      screen that also shows failed syncs and 1-star reviews, red already means
      "something is wrong"; using it for the active nav item would make the
      product look permanently broken. Lavender carries interaction, red is kept
      for genuine danger, and the rest of the palette appears as accents.
   2. Tavily has no dark mode at all. The portal has a toggle, so there is one —
      built as warm ink on warm dark, never the cold grey that would abandon the
      whole point of the palette.
   ========================================================================== */

html[data-skin="paper"] {
    /* Cream paper, warm white surfaces. The canvas IS the identity. */
    --pv-bg:          #fefcf5;
    --pv-surface:     #fffcf6;
    --pv-surface-2:   #f7f7f5;

    /* Warm near-black, never #000 — this is what makes text read printed
       rather than rendered. */
    --pv-text:        #3c3a39;
    --pv-text-muted:  rgba(11,9,7,.6);
    --pv-border:      rgba(11,9,7,.1);

    --pv-accent:      #817fff;                 /* lavender carries interaction */
    --pv-accent-600:  #6462f0;
    --pv-accent-soft: rgba(129,127,255,.12);
    --pv-brand-ink:   #3c3a39;

    --pv-sidebar-bg:     #fffcf6;
    --pv-sidebar-raise:  #f7f7f5;
    --pv-sidebar-fg:     rgba(11,9,7,.6);
    --pv-sidebar-active: rgba(11,9,7,.05);
    --pv-beacon:         #32ae88;

    /* The accent palette, kept for badges, charts and section marks. */
    --pv-success:      #1f7a5c;  --pv-success-soft: rgba(50,174,136,.16);
    --pv-warning:      #8a5a00;  --pv-warning-soft: rgba(253,194,17,.22);
    --pv-danger:       #d21f24;  --pv-danger-soft:  rgba(255,39,45,.12);
    --pv-info:         #2677ff;  --pv-info-soft:    rgba(38,119,255,.12);
    --pv-pink:         #f49eff;
    --pv-lav:          #817fff;
    --pv-turquoise:    #79deeb;
    --pv-orange:       #ff7300;

    --pv-r-sm: 8px;
    --pv-r-md: 12px;
    --pv-r-lg: 14px;
    --pv-r-xl: 20px;

    /* Trust comes from hairlines, not lift. Shadows are effectively off. */
    --pv-shadow-xs: none;
    --pv-shadow-sm: none;
    --pv-shadow-md: none;
    --pv-shadow-lg: 0 4px 24px rgba(0,0,0,.06);
    --pv-ring:      0 0 0 3px rgba(129,127,255,.28);

    --pv-grad-brand: none;

    --pv-font-display: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --pv-font-sans:    'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --pv-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-skin="paper"][data-theme="dark"] {
    --pv-bg:          #191714;
    --pv-surface:     #211e1a;
    --pv-surface-2:   #2a2622;
    --pv-text:        #f4f1e8;
    --pv-text-muted:  rgba(244,241,232,.6);
    --pv-border:      rgba(244,241,232,.14);
    --pv-accent:      #a5a3ff;
    --pv-accent-600:  #8b89ff;
    --pv-accent-soft: rgba(165,163,255,.16);
    --pv-brand-ink:   #f4f1e8;
    --pv-sidebar-bg:     #1d1a17;
    --pv-sidebar-raise:  #2a2622;
    --pv-sidebar-fg:     rgba(244,241,232,.6);
    --pv-sidebar-active: rgba(244,241,232,.07);
    --pv-shadow-lg: 0 4px 24px rgba(0,0,0,.5);
}

/* ==========================================================================
   TYPE — swiss-modernist, tight display, printed body
   ========================================================================== */

html[data-skin="paper"] body,
html[data-skin="paper"] .pv-content {
    font-family: var(--pv-font-sans);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

/* Display headings sit tight: line-height 1 and negative tracking is the
   type-designer signature the whole brand rests on. */
html[data-skin="paper"] .pv-page-title,
html[data-skin="paper"] .pv-content h1 {
    font-family: var(--pv-font-display);
    font-weight: 500;
    font-size: clamp(2.1rem, 2.2vw + 1rem, 3rem);
    line-height: 1;
    letter-spacing: -.028em;
}
html[data-skin="paper"] .pv-content h2 {
    font-weight: 500; line-height: 1.05; letter-spacing: -.022em;
}
html[data-skin="paper"] .pv-content h3 {
    font-weight: 500; line-height: 1.1; letter-spacing: -.012em;
}
html[data-skin="paper"] .pv-page-title::after { display: none; }

html[data-skin="paper"] .pv-brand {
    font-family: var(--pv-font-display);
    font-weight: 500;
    letter-spacing: -.03em;
}

html[data-skin="paper"] .pv-kpi-value {
    font-family: var(--pv-font-display);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums lining-nums;
}

/* ---- The signature: mono "/slash" eyebrows -----------------------------
   Section headings read like CLI paths. Applied to section titles and nav
   group labels only — a form field reading "/Button" would be nonsense, and
   the gesture stops meaning anything if it is everywhere. */

html[data-skin="paper"] .pv-card-title,
html[data-skin="paper"] .pv-nav-label,
html[data-skin="paper"] .pv-nav-section {
    font-family: var(--pv-font-mono);
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pv-text-muted);
}
html[data-skin="paper"] .pv-card-title::before,
html[data-skin="paper"] .pv-nav-label::before,
html[data-skin="paper"] .pv-nav-section::before {
    content: '/';
    opacity: .55;
    margin-right: .1em;
}

html[data-skin="paper"] .pv-label {
    font-family: var(--pv-font-mono);
    font-size: .72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pv-text-muted);
}
html[data-skin="paper"] .pv-table thead th {
    font-family: var(--pv-font-mono);
    font-size: .72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pv-text-muted);
}

/* ==========================================================================
   SURFACES — outlined, never shadowed
   ========================================================================== */

html[data-skin="paper"] .pv-card,
html[data-skin="paper"] .pv-kpi,
html[data-skin="paper"] .pv-chart-card {
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-lg);
    box-shadow: none !important;
    border-left: 1px solid var(--pv-border) !important;   /* kill accent stripes */
    transition: border-color 160ms ease;
}
/* Hover darkens the hairline from 10% to 40% — the whole hover language. */
html[data-skin="paper"] .pv-card:hover,
html[data-skin="paper"] .pv-kpi:hover { border-color: rgba(11,9,7,.4); }
html[data-skin="paper"][data-theme="dark"] .pv-card:hover,
html[data-skin="paper"][data-theme="dark"] .pv-kpi:hover { border-color: rgba(244,241,232,.4); }

html[data-skin="paper"] .pv-card-pad { padding: 24px; }
html[data-skin="paper"] .pv-content  { padding: 2.5rem 3rem; }

/* ==========================================================================
   CONTROLS — dark pills on cream
   ========================================================================== */

html[data-skin="paper"] .pv-btn {
    border-radius: 40px;                    /* full pill, the CTA signature */
    font-weight: 400;
    font-size: .84rem;
    padding: .5rem 1.1rem;
    letter-spacing: 0;
    border: 1px solid transparent;
}
html[data-skin="paper"] .pv-btn-primary {
    background: var(--pv-text);             /* warm black, not the accent */
    color: #fefefe;
    border-color: var(--pv-text);
    box-shadow: none;
}
html[data-skin="paper"] .pv-btn-primary:hover { opacity: .88; }

html[data-skin="paper"] .pv-btn-subtle {
    background: transparent;
    color: var(--pv-text);
    border: 1px solid var(--pv-border);
    box-shadow: none;
}
html[data-skin="paper"] .pv-btn-subtle:hover { border-color: rgba(11,9,7,.4); background: transparent; }

html[data-skin="paper"] .pv-btn-danger {
    background: transparent;
    color: var(--pv-danger);
    border: 1px solid rgba(255,39,45,.35);
}
html[data-skin="paper"] .pv-btn-danger:hover { background: var(--pv-danger-soft); }

html[data-skin="paper"] .pv-input,
html[data-skin="paper"] select.pv-input,
html[data-skin="paper"] textarea.pv-input {
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-sm);
    box-shadow: none;
    font-size: .88rem;
    padding: .55rem .7rem;
}
html[data-skin="paper"] .pv-input:focus {
    border-color: var(--pv-accent);
    box-shadow: var(--pv-ring);
    outline: none;
}

/* ==========================================================================
   NAVIGATION — quiet, with accent marks per section
   ========================================================================== */

html[data-skin="paper"] .pv-sidebar { border-right: 1px solid var(--pv-border); }
html[data-skin="paper"] .pv-nav-link {
    border-radius: var(--pv-r-sm);
    padding: .45rem .7rem;
    margin: 1px .6rem;
    font-size: .875rem;
    font-weight: 400;
    color: var(--pv-sidebar-fg);
    box-shadow: none !important;
    transition: transform 140ms ease, color 140ms ease, background-color 140ms ease;
}
/* Tavily's hover is a small horizontal shift, not a fill. */
html[data-skin="paper"] .pv-nav-link:hover {
    color: var(--pv-text);
    background: transparent;
    transform: translateX(3px);
}
html[data-skin="paper"] .pv-nav-link.active {
    background: var(--pv-sidebar-active) !important;
    color: var(--pv-text) !important;
    font-weight: 500;
}
/* Icon chips are replaced by a small monoline glyph inheriting the row. */
html[data-skin="paper"] .pv-nav-link i {
    background: none !important;
    border-radius: 0;
    width: 16px; height: auto;
    font-size: .75rem;
    color: inherit !important;
    opacity: .55;
    margin-right: .55rem;
}
html[data-skin="paper"] .pv-nav-link.active i { opacity: 1; color: var(--pv-lav) !important; }

/* ==========================================================================
   CHROME, TABS, TABLES, BADGES, ALERTS
   ========================================================================== */

html[data-skin="paper"] .pv-topbar {
    background: var(--pv-surface);
    border-bottom: 1px solid var(--pv-border);
    box-shadow: none;
    backdrop-filter: none;
}
html[data-skin="paper"] .pv-topbar::after { display: none; }

html[data-skin="paper"] .pv-tabs { border-bottom: 1px solid var(--pv-border); gap: 1.5rem; }
html[data-skin="paper"] .pv-tab {
    background: none !important;
    border-radius: 0;
    padding: .6rem 0;
    font-size: .875rem;
    font-weight: 400;
    color: var(--pv-text-muted);
}
html[data-skin="paper"] .pv-tab i { font-size: .75rem; opacity: .55; }
html[data-skin="paper"] .pv-tab.active {
    color: var(--pv-text);
    font-weight: 500;
    box-shadow: inset 0 -1px 0 var(--pv-text);
}

html[data-skin="paper"] .pv-table th,
html[data-skin="paper"] .pv-table td {
    border: none;
    border-bottom: 1px solid var(--pv-border);
    padding: .7rem .5rem;
    font-size: .875rem;
    background: transparent !important;
}
html[data-skin="paper"] .pv-table tbody tr:last-child td { border-bottom: none; }

/* Badges: hairline outline + accent ink, matching the endpoint-badge idea. */
html[data-skin="paper"] .pv-badge {
    background: transparent !important;
    border: 1px solid var(--pv-border);
    border-radius: 999px;
    font-family: var(--pv-font-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: 0;
    padding: .1rem .55rem;
    color: var(--pv-text-muted) !important;
}
html[data-skin="paper"] .pv-badge-success { border-color: rgba(50,174,136,.5);  color: var(--pv-success) !important; }
html[data-skin="paper"] .pv-badge-warning { border-color: rgba(253,194,17,.6);  color: var(--pv-warning) !important; }
html[data-skin="paper"] .pv-badge-danger  { border-color: rgba(255,39,45,.45);  color: var(--pv-danger)  !important; }
html[data-skin="paper"] .pv-badge-info    { border-color: rgba(38,119,255,.45); color: var(--pv-info)    !important; }

html[data-skin="paper"] .pv-alert {
    border-radius: var(--pv-r-md);
    border: 1px solid var(--pv-border);
    background: var(--pv-surface);
    font-size: .875rem;
    padding: .85rem 1rem;
    box-shadow: none;
}
html[data-skin="paper"] .pv-alert-warning { border-color: rgba(253,194,17,.55); }
html[data-skin="paper"] .pv-alert-danger  { border-color: rgba(255,39,45,.4); }
html[data-skin="paper"] .pv-alert-success { border-color: rgba(50,174,136,.45); }

/* KPI trend + stat icons: quiet annotations, no filled chips. */
html[data-skin="paper"] .pv-kpi-foot .pv-trend {
    background: none !important;
    padding: 0 !important;
    font-family: var(--pv-font-mono);
    font-size: .72rem;
}
html[data-skin="paper"] .pv-trend-up   { color: var(--pv-success) !important; }
html[data-skin="paper"] .pv-trend-down { color: var(--pv-danger) !important; }
html[data-skin="paper"] .pv-stat-icon {
    background: none !important;
    color: var(--pv-text-muted) !important;
    font-size: .8rem;
    opacity: .5;
}
html[data-skin="paper"] .pv-kpi-label {
    font-family: var(--pv-font-mono);
    font-size: .72rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pv-text-muted);
}

/* The KPI accent stripe is a 3px absolutely-positioned ::before, not a border —
   overriding border-left did nothing. Four coloured bars across the top of the
   page is the loudest element on screen and belongs to a different design
   language; here the hairline and the number carry it. */
html[data-skin="paper"] .pv-kpi::before,
html[data-skin="paper"] .pv-kpi::after { display: none !important; content: none !important; }

/* ==========================================================================
   Segmented range control + native selects.

   The range buttons carry their styling inline in the view, so CSS only wins
   with !important. Their active state is `box-shadow: var(--pv-shadow-sm)`,
   and this skin sets that token to `none` — so the selected day had no
   distinction at all. On a printed canvas the right answer is not to restore a
   shadow but to invert: the chosen segment goes solid warm-black, the way the
   primary pill does.
   ========================================================================== */

html[data-skin="paper"] .pv-rangegroup,
html[data-skin="paper"] [style*="display:inline-flex"][style*="border-radius:10px"] {
    background: transparent !important;
    border: 1px solid var(--pv-border);
    border-radius: 999px !important;
    padding: 2px !important;
    gap: 2px;
}
html[data-skin="paper"] .pv-rangegroup > button,
html[data-skin="paper"] [style*="border-radius:10px"] > button,
html[data-skin="paper"] [style*="border-radius:10px"] button {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    font-family: var(--pv-font-mono) !important;
    font-weight: 400 !important;
    font-size: .74rem !important;
    color: var(--pv-text-muted) !important;
    padding: .35rem .85rem !important;
    transition: color 140ms ease, background-color 140ms ease;
}
html[data-skin="paper"] .pv-rangegroup > button:hover,
html[data-skin="paper"] [style*="border-radius:10px"] button:hover { color: var(--pv-text) !important; }

/* Alpine writes the active state as an inline background:#fff, so target that. */
html[data-skin="paper"] .pv-rangegroup > button.is-active,
html[data-skin="paper"] [style*="border-radius:10px"] button[style*="background:#fff"],
html[data-skin="paper"] [style*="border-radius:10px"] button[style*="background: rgb(255, 255, 255)"] {
    background: var(--pv-text) !important;
    color: var(--pv-bg) !important;
}

/* Native selects keep the OS chrome — grey field, system arrow — which reads as
   an unstyled form in the middle of a designed page. Strip the appearance and
   draw the chevron. */
html[data-skin="paper"] select.pv-input {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--pv-surface);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox=0 0 12 12%3E%3Cpath d=M3 4.5L6 7.5L9 4.5 stroke=%233c3a39 stroke-width=1.2 fill=none stroke-linecap=round stroke-linejoin=round/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    padding-right: 2rem !important;
    border-radius: 999px;
    cursor: pointer;
}
html[data-skin="paper"][data-theme="dark"] select.pv-input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox=0 0 12 12%3E%3Cpath d=M3 4.5L6 7.5L9 4.5 stroke=%23f4f1e8 stroke-width=1.2 fill=none stroke-linecap=round stroke-linejoin=round/%3E%3C/svg%3E");
}

/* The "Profile" label is a field label, not a section heading — mono, no slash. */
html[data-skin="paper"] #gmb-switcher .pv-label i { opacity: .5; margin-right: .3rem; }