/* Planify Signal 1.0 — framework-independent component layer. Load tokens.css first. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.pf-system { font-family: var(--pf-font-body); font-size: var(--pf-type-body); line-height: var(--pf-leading-body); color: var(--pf-sys-foreground); background: var(--pf-sys-background); }
.pf-system :where(button, input, select, textarea) { font: inherit; }
.pf-system :where(button, a, input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }
.pf-system :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--pf-border-focus) solid var(--pf-sys-focus); outline-offset: var(--pf-space-1); }
.pf-system :where(a) { color: var(--pf-sys-action); text-underline-offset: .2em; }
.pf-system :where(h1,h2,h3,h4) { font-family: var(--pf-font-display); line-height: var(--pf-leading-heading); font-weight: var(--pf-weight-medium); margin: 0; letter-spacing: -.035em; overflow-wrap: anywhere; }
.pf-system h1 { font-size: var(--pf-type-h1); }
.pf-system h2 { font-size: var(--pf-type-h2); }
.pf-system h3 { font-size: var(--pf-type-h3); }
.pf-system p { margin: 0; }
.pf-system :where(button) { cursor: pointer; }
.pf-system :where(button):disabled { cursor: not-allowed; }
.pf-icon { width: var(--pf-size-icon-md); height: var(--pf-size-icon-md); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.pf-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pf-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-space-3); }
.pf-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pf-space-4); }
.pf-system code { overflow-wrap: anywhere; }
.pf-muted { color: var(--pf-sys-muted); }
.pf-caption { font-size: var(--pf-type-caption); }
.pf-label { font-size: var(--pf-type-label); font-weight: var(--pf-weight-semibold); }
.pf-eyebrow { font-size: var(--pf-type-caption); letter-spacing: .12em; text-transform: uppercase; font-weight: var(--pf-weight-bold); }
.pf-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--pf-button-gap); min-height: var(--pf-button-height); padding: var(--pf-space-2) var(--pf-button-padding-x); border: var(--pf-border-thin) solid transparent; border-radius: var(--pf-button-radius); background: var(--pf-button-primary-bg); color: var(--pf-button-primary-text); font-size: var(--pf-type-label); font-weight: var(--pf-weight-semibold); line-height: var(--pf-leading-label); text-decoration: none; transition: background var(--pf-motion-fast) var(--pf-motion-ease), transform var(--pf-motion-fast) var(--pf-motion-ease); }
.pf-button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--pf-button-primary-hover); }
.pf-button:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pf-button-primary-pressed); transform: translateY(1px); }
.pf-button--secondary { background: var(--pf-button-secondary-bg); color: var(--pf-button-secondary-text); border-color: var(--pf-sys-control-border); }
.pf-button--secondary:hover:not(:disabled):not([aria-disabled="true"]), .pf-button--secondary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pf-sys-surface-subtle); }
.pf-button--ghost { background: transparent; color: var(--pf-sys-action); }
.pf-button--ghost:hover:not(:disabled):not([aria-disabled="true"]), .pf-button--ghost:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pf-sys-surface-selected); }
.pf-button--danger { background: var(--pf-sys-danger-bg); color: var(--pf-sys-danger-text); border-color: var(--pf-sys-danger-text); }
.pf-button--danger:hover:not(:disabled):not([aria-disabled="true"]), .pf-button--danger:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pf-sys-danger-text); color: var(--pf-sys-danger-bg); }
.pf-button--accent { background: var(--pf-sys-accent); color: var(--pf-sys-on-accent); }
.pf-button--accent:hover:not(:disabled):not([aria-disabled="true"]), .pf-button--accent:active:not(:disabled):not([aria-disabled="true"]) { background: var(--pf-color-lime-100); color: var(--pf-sys-on-accent); }
.pf-button--sm { min-height: var(--pf-size-control-sm); font-size: var(--pf-type-caption); padding-inline: var(--pf-space-3); }
.pf-button--lg { min-height: var(--pf-size-control-lg); padding-inline: var(--pf-space-6); font-size: var(--pf-type-body); }
.pf-button--icon { width: var(--pf-size-control-md); min-width: var(--pf-size-control-md); padding: var(--pf-space-2); }
.pf-button:disabled, .pf-button[aria-disabled="true"] { background: var(--pf-sys-disabled-bg); color: var(--pf-sys-disabled-text); border-color: var(--pf-sys-border); transform: none; }
.pf-button[aria-busy="true"] { cursor: progress; }
.pf-spinner { width: 16px; height: 16px; border: var(--pf-border-strong) solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pf-spin 800ms linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-field { display: grid; gap: var(--pf-space-2); min-width: 0; }
.pf-field > label, .pf-field > legend { font-size: var(--pf-type-label); font-weight: var(--pf-weight-semibold); }
.pf-input, .pf-select, .pf-textarea { width: 100%; min-width: 0; min-height: var(--pf-input-height); border: var(--pf-border-thin) solid var(--pf-input-border); border-radius: var(--pf-input-radius); background: var(--pf-input-bg); color: var(--pf-input-text); padding: var(--pf-space-2) var(--pf-space-3); font-size: var(--pf-type-body); line-height: var(--pf-leading-label); }
.pf-input::placeholder, .pf-textarea::placeholder { color: var(--pf-sys-muted); opacity: 1; }
.pf-input:disabled, .pf-select:disabled, .pf-textarea:disabled { background: var(--pf-sys-disabled-bg); color: var(--pf-sys-disabled-text); }
.pf-input[aria-invalid="true"], .pf-textarea[aria-invalid="true"] { border-color: var(--pf-sys-danger-text); border-width: var(--pf-border-strong); }
.pf-field-hint { font-size: var(--pf-type-caption); color: var(--pf-sys-muted); }
.pf-field-error { font-size: var(--pf-type-caption); color: var(--pf-sys-danger-text); }
.pf-textarea { resize: vertical; min-height: 104px; }
.pf-search { position: relative; }
.pf-search > .pf-icon { position: absolute; top: 12px; left: 12px; color: var(--pf-sys-muted); pointer-events: none; }
.pf-search .pf-input { padding-left: var(--pf-space-10); }
.pf-check { display: flex; align-items: center; gap: var(--pf-space-3); min-height: var(--pf-size-control-md); font-size: var(--pf-type-label); cursor: pointer; }
.pf-check input { width: var(--pf-size-icon-md); height: var(--pf-size-icon-md); accent-color: var(--pf-sys-action); flex: 0 0 auto; }
.pf-switch { position: relative; display: inline-flex; align-items: center; gap: var(--pf-space-3); min-height: var(--pf-size-control-md); cursor: pointer; font-size: var(--pf-type-label); }
.pf-switch input { appearance: none; width: 44px; height: 26px; border: var(--pf-border-thin) solid var(--pf-sys-control-border); border-radius: var(--pf-radius-pill); background: var(--pf-sys-surface-subtle); margin: 0; cursor: pointer; flex: 0 0 auto; }
.pf-switch input::before { content: ''; display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%; background: var(--pf-sys-muted); transition: transform var(--pf-motion-fast) var(--pf-motion-ease); }
.pf-switch input:checked { background: var(--pf-sys-action); border-color: var(--pf-sys-action); }
.pf-switch input:checked::before { transform: translateX(18px); background: var(--pf-sys-on-action); }
.pf-range { width: 100%; accent-color: var(--pf-sys-action); min-height: var(--pf-size-control-md); }
.pf-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--pf-space-2); border: var(--pf-border-thin) solid var(--pf-sys-control-border); border-radius: var(--pf-chip-radius); background: var(--pf-sys-surface); color: var(--pf-sys-foreground); min-height: var(--pf-size-control-md); padding: var(--pf-space-2) var(--pf-space-4); font-size: var(--pf-type-label); }
.pf-chip:hover { background: var(--pf-sys-surface-subtle); }
.pf-chip[aria-pressed="true"] { background: var(--pf-chip-selected-bg); color: var(--pf-chip-selected-text); border-color: var(--pf-chip-selected-bg); }
.pf-category-rail { display: flex; flex-wrap: nowrap; gap: var(--pf-space-2); overflow-x: auto; min-width: 0; padding: var(--pf-space-2); scroll-padding-inline: var(--pf-space-2); scrollbar-width: thin; }
.pf-chip--category { flex: 0 0 auto; flex-direction: column; min-width: var(--pf-space-20); height: calc(var(--pf-space-20) + var(--pf-space-2)); border-radius: var(--pf-radius-control); }
.pf-chip--category > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 16ch; line-height: var(--pf-leading-label); text-align: center; text-wrap: balance; }
.pf-popover { position: fixed; inset: auto; margin: 0; width: min(20rem, calc(100vw - var(--pf-space-4))); max-height: calc(100dvh - var(--pf-space-4)); overflow: auto; padding: var(--pf-space-5); border: var(--pf-border-thin) solid var(--pf-sys-border); border-radius: var(--pf-radius-card); background: var(--pf-sys-surface); color: var(--pf-sys-foreground); box-shadow: var(--pf-shadow-card); }
.pf-badge { display: inline-flex; align-items: center; gap: var(--pf-space-1); border-radius: var(--pf-badge-radius); padding: var(--pf-space-1) var(--pf-space-2); font-size: var(--pf-type-caption); font-weight: var(--pf-weight-semibold); line-height: var(--pf-leading-label); background: var(--pf-sys-surface-subtle); color: var(--pf-sys-muted); }
.pf-badge--info { background: var(--pf-sys-info-bg); color: var(--pf-sys-info-text); }
.pf-badge--success { background: var(--pf-sys-success-bg); color: var(--pf-sys-success-text); }
.pf-badge--warning { background: var(--pf-sys-warning-bg); color: var(--pf-sys-warning-text); }
.pf-badge--danger { background: var(--pf-sys-danger-bg); color: var(--pf-sys-danger-text); }
.pf-card { background: var(--pf-card-bg); border: var(--pf-border-thin) solid var(--pf-card-border); border-radius: var(--pf-card-radius); padding: var(--pf-card-padding); min-width: 0; }
.pf-event { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.pf-event-cover { position: relative; aspect-ratio: 4/3; background: var(--pf-sys-brand); color: var(--pf-sys-on-brand); padding: var(--pf-space-6); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.pf-event-cover--lime { background: var(--pf-sys-accent); color: var(--pf-sys-on-accent); }
.pf-event-cover--neutral { background: var(--pf-sys-surface-subtle); color: var(--pf-sys-muted); align-items: center; justify-content: center; }
.pf-event-cover-title { font-family: var(--pf-font-display); font-size: var(--pf-type-h2); line-height: var(--pf-leading-tight); letter-spacing: -.04em; max-width: 85%; position: relative; z-index: 1; }
.pf-event-orbit { position: absolute; width: 200px; height: 200px; border: 40px solid currentColor; border-radius: 50%; right: -110px; top: 10px; }
.pf-event-body { padding: var(--pf-card-padding); display: flex; flex-direction: column; gap: var(--pf-event-gap); flex: 1; }
.pf-event h3 { font-size: var(--pf-event-title-size); line-height: 1.3; }
.pf-event-meta { display: flex; gap: var(--pf-space-2); color: var(--pf-sys-muted); font-size: var(--pf-event-meta-size); align-items: flex-start; }
.pf-event-meta .pf-icon { margin-top: 2px; width: 16px; height: 16px; }
.pf-event-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-space-2); padding-top: var(--pf-space-4); margin-top: auto; border-top: var(--pf-border-thin) solid var(--pf-sys-border); }
.pf-save[aria-pressed="true"] { background: var(--pf-sys-accent); color: var(--pf-sys-on-accent); border-color: var(--pf-sys-on-accent); }
.pf-save[aria-pressed="true"] .pf-icon { fill: currentColor; }
.pf-alert { border-radius: var(--pf-radius-control); padding: var(--pf-space-4); display: flex; align-items: flex-start; gap: var(--pf-space-3); font-size: var(--pf-type-label); }
.pf-alert--info { background: var(--pf-sys-info-bg); color: var(--pf-sys-info-text); }
.pf-alert--success { background: var(--pf-sys-success-bg); color: var(--pf-sys-success-text); }
.pf-alert--warning { background: var(--pf-sys-warning-bg); color: var(--pf-sys-warning-text); }
.pf-alert--danger { background: var(--pf-sys-danger-bg); color: var(--pf-sys-danger-text); }
.pf-alert strong { display: block; margin-bottom: var(--pf-space-1); }
.pf-alert .pf-icon { margin-top: 2px; }
.pf-tabs { display: flex; gap: var(--pf-space-2); border-bottom: var(--pf-border-thin) solid var(--pf-sys-border); flex-wrap: wrap; }
.pf-tab { background: transparent; color: var(--pf-sys-muted); border: 0; border-bottom: var(--pf-border-strong) solid transparent; padding: var(--pf-space-3) var(--pf-space-4); min-height: var(--pf-size-control-md); font-size: var(--pf-type-label); font-weight: var(--pf-weight-semibold); }
.pf-tab[aria-selected="true"] { color: var(--pf-sys-action); border-bottom-color: var(--pf-sys-action); }
.pf-tabpanel { padding-block: var(--pf-space-5); }
.pf-accordion { border-block: var(--pf-border-thin) solid var(--pf-sys-border); }
.pf-accordion + .pf-accordion { border-top: 0; }
.pf-accordion summary { cursor: pointer; min-height: var(--pf-size-control-lg); padding-block: var(--pf-space-3); font-weight: var(--pf-weight-semibold); font-size: var(--pf-type-label); }
.pf-accordion > div { padding-bottom: var(--pf-space-4); color: var(--pf-sys-muted); font-size: var(--pf-type-label); }
.pf-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pf-radius-pill); color: var(--pf-sys-action); background: var(--pf-sys-surface-selected); font-size: var(--pf-type-label); font-weight: var(--pf-weight-semibold); }
.pf-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--pf-space-2); list-style: none; padding: 0; margin: 0; font-size: var(--pf-type-label); }
.pf-breadcrumbs li + li::before { content: '/'; color: var(--pf-sys-muted); margin-right: var(--pf-space-2); }
.pf-pagination { display: flex; flex-wrap: wrap; gap: var(--pf-space-2); align-items: center; }
.pf-pagination [aria-current="page"] { background: var(--pf-sys-action); color: var(--pf-sys-on-action); }
.pf-table-wrap { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--pf-type-label); }
.pf-table th { font-weight: var(--pf-weight-semibold); color: var(--pf-sys-muted); }
.pf-table th, .pf-table td { padding: var(--pf-space-3); border-bottom: var(--pf-border-thin) solid var(--pf-sys-border); vertical-align: top; }
.pf-table code { overflow-wrap: anywhere; }
.pf-progress { width: 100%; height: 8px; appearance: none; border: 0; border-radius: var(--pf-radius-pill); overflow: hidden; background: var(--pf-sys-surface-subtle); accent-color: var(--pf-sys-action); }
.pf-progress::-webkit-progress-bar { background: var(--pf-sys-surface-subtle); }
.pf-progress::-webkit-progress-value { background: var(--pf-sys-action); }
.pf-progress::-moz-progress-bar { background: var(--pf-sys-action); }
.pf-skeleton { background: var(--pf-sys-surface-subtle); border-radius: var(--pf-radius-sm); height: 18px; }
.pf-empty { padding: var(--pf-space-12) var(--pf-space-6); text-align: center; display: grid; justify-items: center; gap: var(--pf-space-3); }
.pf-empty > .pf-icon { width: 40px; height: 40px; color: var(--pf-sys-action); }
.pf-empty p { max-width: 360px; color: var(--pf-sys-muted); font-size: var(--pf-type-label); }
.pf-dialog { width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: var(--pf-dialog-padding); margin: auto; border: var(--pf-border-thin) solid var(--pf-sys-border); border-radius: var(--pf-dialog-radius); background: var(--pf-dialog-bg); color: var(--pf-sys-foreground); box-shadow: var(--pf-shadow-overlay); overflow: auto; }
.pf-dialog::backdrop { background: var(--pf-sys-overlay); }
.pf-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--pf-space-4); margin-bottom: var(--pf-space-5); }
.pf-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pf-space-3); margin-top: var(--pf-space-6); }
.pf-toast { background: var(--pf-toast-bg); color: var(--pf-toast-text); border-radius: var(--pf-radius-control); box-shadow: var(--pf-shadow-overlay); padding: var(--pf-space-4); display: flex; align-items: center; gap: var(--pf-space-4); font-size: var(--pf-type-label); }
.pf-toast button { background: transparent; color: inherit; border: 0; min-height: 44px; font-weight: var(--pf-weight-semibold); text-decoration: underline; }
.pf-upload { border: var(--pf-border-thin) dashed var(--pf-sys-control-border); border-radius: var(--pf-radius-card); padding: var(--pf-space-6); background: var(--pf-sys-surface-subtle); }
.pf-upload input { max-width: 100%; font-size: var(--pf-type-label); }
.pf-upload input::file-selector-button { border: var(--pf-border-thin) solid var(--pf-sys-control-border); border-radius: var(--pf-radius-control); background: var(--pf-sys-surface); color: var(--pf-sys-foreground); padding: var(--pf-space-3); margin-right: var(--pf-space-3); cursor: pointer; }
.pf-tooltip-wrap { position: relative; display: inline-flex; }
.pf-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: var(--pf-space-2) var(--pf-space-3); background: var(--pf-sys-foreground); color: var(--pf-sys-background); border-radius: var(--pf-radius-sm); width: max-content; max-width: 220px; font-size: var(--pf-type-caption); visibility: hidden; z-index: var(--pf-layer-popover); }
.pf-tooltip-wrap:hover .pf-tooltip, .pf-tooltip-wrap:focus-within .pf-tooltip { visibility: visible; }
.pf-tooltip-wrap[data-dismissed="true"] .pf-tooltip { visibility: hidden; }
@media (pointer: coarse) { .pf-button--sm { min-height: var(--pf-size-control-md); } }
@media (prefers-reduced-motion: reduce) { .pf-spinner { animation: none; } }
@media (forced-colors: active) { .pf-button, .pf-chip, .pf-badge { border: 1px solid ButtonText; } .pf-tab[aria-selected="true"] { border-bottom: 3px solid Highlight; } .pf-switch input:checked { border: 3px solid Highlight; } }
/* Calendar composition: uses the existing card, table, button and state tokens. */
.pf-calendar { padding: 0; overflow: hidden; }
.pf-calendar-table { min-width: 770px; table-layout: fixed; }
.pf-calendar-table th { background: var(--pf-sys-surface-subtle); padding: var(--pf-space-3); }
.pf-calendar-table abbr { text-decoration: none; }
.pf-calendar-table .pf-calendar-day { height: 144px; padding: var(--pf-space-2); border-right: var(--pf-border-thin) solid var(--pf-sys-border); }
.pf-calendar-day:last-child { border-right: 0; }
.pf-calendar-day.outside-month { background: var(--pf-sys-surface-subtle); color: var(--pf-sys-muted); }
.pf-calendar-day time { display: inline-grid; place-items: center; min-width: var(--pf-space-8); min-height: var(--pf-space-8); font-size: var(--pf-type-label); }
.pf-calendar-day time[aria-current="date"] { background: var(--pf-sys-action); color: var(--pf-sys-on-action); border-radius: var(--pf-radius-pill); font-weight: var(--pf-weight-semibold); }
.pf-calendar-event { width: 100%; display: block; text-align: left; border: var(--pf-border-thin) solid var(--pf-sys-control-border); border-left: var(--pf-border-focus) solid var(--pf-sys-action); border-radius: var(--pf-radius-sm); background: var(--pf-sys-surface-selected); color: var(--pf-sys-action); padding: var(--pf-space-2); min-height: var(--pf-size-control-md); font-size: var(--pf-type-label); line-height: var(--pf-leading-label); overflow-wrap: anywhere; transition: background var(--pf-motion-fast) var(--pf-motion-ease); }
.pf-calendar-event:hover { background: var(--pf-sys-action); color: var(--pf-sys-on-action); }