/*
  Platform renderer design system — the visual layer for the server-driven UI components.

  Shipped as an RCL static asset (served at _content/Vahary.Studio.Renderer/css/renderer.css) and linked by
  BOTH hosts: the MAUI mobile runtime and the Builder preview. Every rule is scoped under `.pf-screen`
  (the theme root RenderScreen emits) so it themes the rendered app WITHOUT leaking into a host's own
  chrome. Colors/typography come from the branding-driven CSS variables ThemeProvider sets inline on
  `.pf-screen` (--pf-color-primary/-surface/-text, --pf-font-family); the rest are internal design tokens
  declared here so a sparsely-branded app still looks finished. Mobile-first, single column, touch-sized.
*/

.pf-screen {
    /* Internal design tokens — the gaps ThemeProvider doesn't set, now sourced from the Vahary
       portfolio tokens (vahary.css → --v-*, loaded by both hosts). Brand tokens still cascade in. */
    --pf-muted: var(--v-color-text-secondary);
    --pf-border: var(--v-color-border-hairline);
    --pf-bg: var(--v-color-surface-base);
    --pf-radius: 14px;
    --pf-radius-sm: 9px;
    --pf-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .08);
    --pf-shadow-lg: 0 4px 12px rgba(17, 24, 39, .1), 0 2px 4px rgba(17, 24, 39, .06);
    --pf-gap: 16px;

    font-family: var(--pf-font-family, var(--v-font-body));
    color: var(--pf-color-text, var(--v-color-text-primary));
    background: var(--pf-bg);
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--pf-gap);
    padding: var(--pf-gap);
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
}

.pf-screen *,
.pf-screen *::before,
.pf-screen *::after { box-sizing: border-box; }

.pf-screen img { max-width: 100%; display: block; }

/* ---- Text ---- */
.pf-text { margin: 0; line-height: 1.5; }
.pf-text--heading { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.pf-text--body { font-size: 1rem; }
.pf-text--caption { font-size: .82rem; color: var(--pf-muted); }

/* ---- Section ---- */
.pf-section { display: flex; flex-direction: column; gap: 10px; }
.pf-section--padded { padding: 4px 2px; }
.pf-section__title { margin: 0; font-size: 1.15rem; font-weight: 650; }
.pf-section__body { display: flex; flex-direction: column; gap: 12px; }

/* ---- Hero ---- */
.pf-hero {
    position: relative;
    border-radius: var(--pf-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    box-shadow: var(--pf-shadow);
}
.pf-hero__overlay {
    width: 100%;
    padding: 22px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .05));
    color: #fff;
}
.pf-hero__title { margin: 0; font-size: 1.7rem; font-weight: 750; line-height: 1.2; }
.pf-hero__subtitle { margin: 6px 0 0; font-size: 1rem; opacity: .92; }
.pf-hero__cta {
    margin-top: 14px;
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: .95rem;
    font-weight: 600;
    background: var(--pf-color-surface, #fff);
    color: var(--pf-color-primary, #5B21B6);
    cursor: pointer;
}

/* ---- Buttons (component-level) ---- */
/* Base = layout only; each variant owns its colour so primary/secondary/ghost read distinctly
   (UI-MOB-004). Colours come from brand/status tokens so they follow light+dark (UI-MOB-007). */
.pf-button {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--pf-radius-sm);
    padding: 12px 18px;
    min-height: 44px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, background-color .15s ease;
}
.pf-button:hover { filter: brightness(.96); }
.pf-button:active { filter: brightness(.90); }
.pf-button:focus-visible { outline: 2px solid var(--pf-color-primary, var(--v-color-interactive-accent)); outline-offset: 2px; }

/* primary — filled brand accent */
.pf-button--primary {
    background: var(--pf-color-primary, var(--v-color-interactive-accent));
    color: var(--v-color-text-on-accent, #fff);
}
/* secondary — tonal: sunken surface + hairline + brand text */
.pf-button--secondary {
    background: var(--v-color-surface-sunken);
    color: var(--pf-color-primary, var(--v-color-interactive-accent));
    border-color: var(--pf-border);
}
/* ghost — text-only, transparent until hovered */
.pf-button--ghost {
    background: transparent;
    color: var(--pf-color-primary, var(--v-color-interactive-accent));
}
.pf-button--ghost:hover { background: color-mix(in srgb, var(--pf-color-primary, var(--v-color-interactive-accent)) 10%, transparent); filter: none; }

/* ---- List ---- */
.pf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-list__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--pf-color-surface, #fff);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
}
.pf-list__thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.pf-list__title { font-weight: 600; }
.pf-list__subtitle { color: var(--pf-muted); font-size: .9rem; }
.pf-list__text { font-size: .92rem; }
.pf-list__empty,
.pf-list__loading { color: var(--pf-muted); padding: 16px; text-align: center; }

/* ---- Card grid ---- */
.pf-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pf-cardgrid__empty,
.pf-cardgrid__loading { color: var(--pf-muted); padding: 16px; text-align: center; grid-column: 1 / -1; }
.pf-card {
    background: var(--pf-color-surface, #fff);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    overflow: hidden;
    box-shadow: var(--pf-shadow);
    display: flex;
    flex-direction: column;
}
.pf-card__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pf-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.pf-card__title { font-weight: 650; }
.pf-card__subtitle { color: var(--pf-muted); font-size: .88rem; }
.pf-card__text { font-size: .92rem; }

/* ---- Carousel ---- */
.pf-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.pf-carousel__slide {
    flex: 0 0 80%;
    scroll-snap-align: start;
    border-radius: var(--pf-radius);
    overflow: hidden;
    background: var(--pf-color-surface, #fff);
    box-shadow: var(--pf-shadow);
}
.pf-carousel__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pf-carousel__title { padding: 10px 12px; font-weight: 600; }
.pf-carousel__empty,
.pf-carousel__loading { color: var(--pf-muted); padding: 16px; }

/* ---- Announcements ---- */
.pf-announcements { display: flex; flex-direction: column; gap: 12px; }
.pf-announcement {
    background: var(--pf-color-surface, #fff);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    padding: 14px 16px;
    box-shadow: var(--pf-shadow);
}
.pf-announcement__header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pf-announcement__title { font-weight: 650; font-size: 1.02rem; }
.pf-announcement__date { color: var(--pf-muted); font-size: .8rem; flex: none; }
.pf-announcement__body { margin-top: 6px; line-height: 1.5; }
.pf-announcements__empty,
.pf-announcements__loading { color: var(--pf-muted); padding: 16px; text-align: center; }

/* ---- Calendar / agenda ---- */
.pf-calendar { display: flex; flex-direction: column; gap: 10px; }
.pf-calendar__title { font-weight: 650; font-size: 1.1rem; }
.pf-calendar__agenda { display: flex; flex-direction: column; gap: 8px; }
.pf-calendar__event {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 12px 14px;
    background: var(--pf-color-surface, #fff);
    border: 1px solid var(--pf-border);
    border-left: 3px solid var(--pf-color-primary, #5B21B6);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow);
}
.pf-calendar__date { color: var(--pf-color-primary, #5B21B6); font-weight: 600; font-size: .85rem; flex: none; }
.pf-calendar__empty,
.pf-calendar__loading { color: var(--pf-muted); padding: 16px; text-align: center; }

/* ---- Callout ---- */
/* Base = shape; each severity (info|success|warning|danger) maps to a Vahary status token so the four
   read distinctly (UI-MOB-004) and follow light/dark (UI-MOB-007). Colour is never the only signal —
   the title carries the status hue and callers set text. */
.pf-callout {
    padding: 14px 16px;
    border-radius: var(--pf-radius);
    border: 1px solid transparent;
    border-left-width: 3px;
}
.pf-callout__title { font-weight: 650; margin-bottom: 4px; }
.pf-callout__body { line-height: 1.5; }

.pf-callout--info {
    background: var(--v-color-status-info-subtle);
    border-color: color-mix(in srgb, var(--v-color-status-info) 30%, transparent);
    border-left-color: var(--v-color-status-info);
}
.pf-callout--info .pf-callout__title { color: var(--v-color-status-info-on); }

.pf-callout--success {
    background: var(--v-color-status-healthy-subtle);
    border-color: color-mix(in srgb, var(--v-color-status-healthy) 30%, transparent);
    border-left-color: var(--v-color-status-healthy);
}
.pf-callout--success .pf-callout__title { color: var(--v-color-status-healthy-on); }

.pf-callout--warning {
    background: var(--v-color-status-attention-subtle);
    border-color: color-mix(in srgb, var(--v-color-status-attention) 30%, transparent);
    border-left-color: var(--v-color-status-attention);
}
.pf-callout--warning .pf-callout__title { color: var(--v-color-status-attention-on); }

.pf-callout--danger {
    background: var(--v-color-status-fault-subtle);
    border-color: color-mix(in srgb, var(--v-color-status-fault) 30%, transparent);
    border-left-color: var(--v-color-status-fault);
}
.pf-callout--danger .pf-callout__title { color: var(--v-color-status-fault-on); }

/* ---- Toasts (UI-MOB-005) — transient feedback raised by ToastHost. Fixed above the tab bar, stacked,
   tone from the status tokens (light+dark), safe-area aware. ---- */
.pf-toast-host {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 0 12px;
    pointer-events: none;
}
.pf-toast {
    pointer-events: auto;
    width: 100%; max-width: 520px;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: var(--pf-radius);
    border: 1px solid transparent;
    border-left: 3px solid var(--pf-muted);
    background: var(--v-color-surface-raised);
    box-shadow: var(--pf-shadow-lg);
    animation: pf-toast-in .18s ease;
}
.pf-toast__text { flex: 1; line-height: 1.4; font-size: .95rem; }
.pf-toast__close {
    appearance: none; border: 0; background: none; cursor: pointer;
    font-size: 1.25rem; line-height: 1; color: var(--pf-muted); padding: 0 2px;
}
.pf-toast--info    { border-left-color: var(--v-color-status-info);     background: var(--v-color-status-info-subtle); }
.pf-toast--success { border-left-color: var(--v-color-status-healthy);  background: var(--v-color-status-healthy-subtle); }
.pf-toast--warning { border-left-color: var(--v-color-status-attention); background: var(--v-color-status-attention-subtle); }
.pf-toast--danger  { border-left-color: var(--v-color-status-fault);    background: var(--v-color-status-fault-subtle); }
@keyframes pf-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf-toast { animation: none; } }

/* ---- Form validation (UI-MOB-005) — inline required-field errors ---- */
.pf-form__error { color: var(--v-color-status-fault); font-size: .82rem; margin-top: 4px; }
.pf-form__field--invalid .pf-form__label { color: var(--v-color-status-fault); }

/* ---- Campaign progress ---- */
.pf-campaign {
    padding: 16px;
    background: var(--pf-color-surface, #fff);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
}
.pf-campaign__heading { font-weight: 650; margin-bottom: 10px; }
.pf-campaign__bar { height: 12px; border-radius: 999px; background: var(--pf-border); overflow: hidden; }
.pf-campaign__fill { height: 100%; background: var(--pf-color-primary, #5B21B6); border-radius: 999px; transition: width .4s ease; }
.pf-campaign__stats { display: flex; justify-content: space-between; margin-top: 8px; font-size: .9rem; }
.pf-campaign__raised { font-weight: 650; }
.pf-campaign__goal,
.pf-campaign__pct { color: var(--pf-muted); }
.pf-campaign__unavailable,
.pf-campaign__unconfigured { color: var(--pf-muted); font-size: .9rem; }

/* ---- Form + fields ---- */
.pf-form { display: flex; flex-direction: column; gap: 14px; }
.pf-form__field { display: flex; flex-direction: column; gap: 6px; }
.pf-form__label { font-weight: 600; font-size: .9rem; }
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-input,
.pf-input--text,
.pf-input--number,
.pf-input--date,
.pf-input--select,
.pf-input--file,
.pf-input--multiselect {
    width: 100%;
    padding: 11px 13px;
    min-height: 44px;
    font: inherit;
    color: var(--pf-color-text, #111827);
    background: var(--pf-color-surface, #fff);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius-sm);
}
.pf-input:focus,
.pf-input--text:focus,
.pf-input--number:focus,
.pf-input--select:focus { outline: 2px solid color-mix(in srgb, var(--pf-color-primary, #5B21B6) 45%, transparent); outline-offset: 1px; border-color: var(--pf-color-primary, #5B21B6); }
.pf-input--toggle { width: 44px; height: 26px; }
.pf-input--rating { display: inline-flex; gap: 4px; }
.pf-rating__star { font-size: 1.5rem; color: var(--pf-border); cursor: pointer; }
.pf-rating__star.is-on { color: #f59e0b; }
.pf-multiselect__option { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.pf-form__submit { align-self: flex-start; }

/* ---- Map ---- */
.pf-map {
    position: relative;
    border-radius: var(--pf-radius);
    overflow: hidden;
    background: #e8edf3;
    min-height: 180px;
    border: 1px solid var(--pf-border);
}
.pf-map__pins { position: absolute; inset: 0; }
.pf-map__pin { position: absolute; width: 14px; height: 14px; background: var(--pf-color-primary, #5B21B6); border: 2px solid #fff; border-radius: 50%; box-shadow: var(--pf-shadow); transform: translate(-50%, -50%); }
.pf-map__empty,
.pf-map__loading { display: flex; align-items: center; justify-content: center; height: 180px; color: var(--pf-muted); }

/* ---- Media / image / web embed ---- */
.pf-image { border-radius: var(--pf-radius); overflow: hidden; }
.pf-media { width: 100%; border-radius: var(--pf-radius); overflow: hidden; }
.pf-media--video video,
.pf-media--video { width: 100%; }
.pf-media--audio audio { width: 100%; }
.pf-webembed { width: 100%; border: 0; border-radius: var(--pf-radius); min-height: 220px; }

/* ---- Profile card ---- */
.pf-profilecard {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    background: var(--pf-color-surface, #fff);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
}
.pf-profilecard__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.pf-profilecard__name { font-weight: 700; font-size: 1.1rem; }
.pf-profilecard__subtitle { color: var(--pf-muted); }
.pf-profilecard__bio { margin-top: 6px; font-size: .92rem; line-height: 1.5; }

/* ---- Payable ---- */
.pf-payable {
    padding: 16px;
    background: var(--pf-color-surface, #fff);
    border: 1px solid var(--pf-border);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pf-payable__price { font-size: 1.6rem; font-weight: 750; }
.pf-payable__currency { color: var(--pf-muted); font-size: .9rem; }
.pf-payable__pay { align-self: flex-start; }
.pf-payable__unconfigured { color: var(--pf-muted); font-size: .9rem; }

/* ---- QR code ---- */
.pf-qrcode { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: #fff; border-radius: var(--pf-radius); box-shadow: var(--pf-shadow); }
.pf-qrcode__value { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--pf-muted); word-break: break-all; }

/* ---- Search bar ---- */
.pf-searchbar { display: flex; gap: 8px; }
.pf-searchbar__input { flex: 1; padding: 11px 13px; min-height: 44px; border: 1px solid var(--pf-border); border-radius: 999px; font: inherit; }
.pf-searchbar__button { border: 0; border-radius: 999px; padding: 0 18px; min-height: 44px; background: var(--pf-color-primary, #5B21B6); color: var(--v-color-text-on-accent, #fff); font-weight: 600; cursor: pointer; }

/* ---- Divider / spacer / section primitives ---- */
.pf-divider { border: 0; border-top: 1px solid var(--pf-border); margin: 4px 0; }
.pf-spacer { display: block; }

/* ---- Emergency trigger ---- */
.pf-emergency { display: flex; flex-direction: column; gap: 10px; }
.pf-emergency__trigger {
    appearance: none;
    border: 0;
    border-radius: var(--pf-radius);
    padding: 18px;
    font-size: 1.1rem;
    font-weight: 750;
    letter-spacing: .02em;
    background: var(--v-color-status-fault);
    color: var(--v-color-status-fault-on, #fff);
    cursor: pointer;
    box-shadow: var(--pf-shadow-lg);
}
.pf-emergency__confirm { font-size: .9rem; color: var(--pf-muted); text-align: center; }

/* ---- Plugin slot / unknown placeholder ---- */
.pf-pluginslot,
.pf-unknown {
    padding: 16px;
    border: 1px dashed var(--pf-border);
    border-radius: var(--pf-radius);
    color: var(--pf-muted);
    text-align: center;
    font-size: .9rem;
    background: var(--pf-color-surface, #fff);
}
.pf-pluginslot__label { font-weight: 600; }

/* Unknown-component placeholder (graceful degradation — must look intentional, not broken). */
.pf-unknown-component {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px dashed var(--pf-border);
    border-radius: var(--pf-radius);
    background: var(--pf-color-surface, #fff);
    color: var(--pf-muted);
    font-size: .9rem;
}
.pf-unknown-component__icon { font-size: 1.1rem; line-height: 1; }
.pf-unknown-component__type { font-family: ui-monospace, monospace; }

/* ---- Shared state helpers ---- */
.pf-center { display: flex; align-items: center; justify-content: center; }