/* Shared application surfaces. Filament continues to own its component styles. */
:root {
    --pi-bg: #f7f8fa;
    --pi-surface: #fff;
    --pi-soft: #f1f3f6;
    --pi-text: #17202e;
    --pi-muted: #566477;
    --pi-border: #e1e6ed;
    --pi-accent: #b45309;
    --pi-focus: #d97706;
    --pi-radius: 14px;
    --pi-keyboard-offset: 0px;
}
.dark {
    --pi-bg: #101318;
    --pi-surface: #191e26;
    --pi-soft: #252c37;
    --pi-text: #f1f4f9;
    --pi-muted: #a7b3c5;
    --pi-border: #343d4c;
    --pi-accent: #fbbf24;
    --pi-focus: #fbbf24;
}
body.fi-body { background: var(--pi-bg); color: var(--pi-text); }
.pi-stack { display: grid; gap: 1.5rem; }
.pi-settings { max-width: 48rem; width: 100%; }
.pi-panel { padding: 1.5rem; border: 1px solid var(--pi-border); border-radius: var(--pi-radius); background: var(--pi-surface); }
.pi-panel h2, .pi-section-title { font-size: 1.0625rem; line-height: 1.4; font-weight: 650; margin: 0 0 .5rem; }
.pi-panel p { margin: .4rem 0; }
.pi-help, .pi-muted { color: var(--pi-muted); font-size: .875rem; line-height: 1.55; }
.pi-kicker { color: var(--pi-muted); font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.pi-field { display: grid; gap: .5rem; margin-top: 1.25rem; }
.pi-label { font-weight: 550; font-size: .925rem; }
.pi-input { width: 100%; min-height: 44px; border: 1px solid var(--pi-border); border-radius: 9px; padding: .6rem .8rem; background: var(--pi-surface); color: var(--pi-text); font: inherit; }
.pi-input:focus { outline: 2px solid var(--pi-focus); outline-offset: 2px; }
.pi-choice { display: flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; }
.pi-choice input { width: 1.125rem; height: 1.125rem; accent-color: var(--pi-focus); flex-shrink: 0; }
.pi-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.pi-actions-end { justify-content: flex-end; }
.pi-error { color: #be123c; font-size: .875rem; }
.dark .pi-error { color: #fda4af; }
.pi-preview-notification { display: grid; gap: .3rem; border-radius: 16px; background: var(--pi-soft); padding: 1rem; margin-top: 1.25rem; font-size: .9rem; overflow-wrap: anywhere; }
.pi-preview-notification strong { font-weight: 650; }
.pi-status { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem 1rem; border-radius: 10px; background: var(--pi-soft); color: var(--pi-text); margin: 1rem 0; line-height: 1.5; }
.pi-details { margin-top: 1rem; }
.pi-details > summary { cursor: pointer; color: var(--pi-accent); padding: .5rem 0; min-height: 44px; }
.pi-bottom-nav { display: none; }
.pi-connectivity { position: fixed; z-index: 60; top: 4.5rem; left: 50%; transform: translateX(-50%); width: min(42rem, calc(100% - 2rem)); border: 1px solid var(--pi-border); border-radius: 12px; padding: .8rem 1rem; background: var(--pi-surface); color: var(--pi-text); box-shadow: 0 8px 30px #0002; font-size: .9rem; }
.pi-connectivity:not([hidden]) { display: flex; align-items: center; gap: .75rem; }
.pi-connectivity [data-pi-network-text] { flex: 1; }
.pi-connectivity a { color: var(--pi-accent); text-decoration: underline; }
.pi-connectivity button { flex-shrink: 0; width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer; }
.pi-bottom-nav a:focus-visible, .pi-connectivity button:focus-visible, .pi-link:focus-visible { outline: 2px solid var(--pi-focus); outline-offset: 3px; }
.pi-link { color: var(--pi-accent); text-decoration: none; }
.pi-link:hover { text-decoration: underline; }
.pi-page-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--pi-muted); font-size: .9rem; }
.pi-page-back svg { width: 1.1rem; height: 1.1rem; }
.fi-main { max-width: 90rem; }
.fi-header-heading { letter-spacing: -.025em; }
.fi-btn { min-height: 40px; }
@media (max-width: 767px) {
    body.fi-body:has(.pi-bottom-nav) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    .pi-bottom-nav { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; z-index: 35; bottom: 0; left: 0; right: 0; padding: .4rem max(1rem, env(safe-area-inset-right, 0px)) calc(.4rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--pi-border); background: var(--pi-surface); }
    .pi-bottom-nav a { display: grid; justify-items: center; gap: .15rem; padding: .35rem; min-height: 52px; border-radius: 10px; color: var(--pi-muted); font-size: .75rem; font-weight: 550; }
    .pi-bottom-nav svg { width: 1.35rem; height: 1.35rem; }
    .pi-bottom-nav a[aria-current="page"] { color: var(--pi-accent); background: var(--pi-soft); }
    html.pi-keyboard .pi-bottom-nav, body:has(.pi-editor) .pi-bottom-nav { display: none; }
    .pi-panel { padding: 1.125rem; }
    .pi-stack { gap: 1rem; }
    .fi-btn { min-height: 44px; }
    .fi-header-heading { font-size: 1.55rem; line-height: 1.25; }
    .fi-main { padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px)); }
    .fi-topbar { padding-top: env(safe-area-inset-top, 0px); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Content-first editing and reading */
.pi-item-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pi-item-header-start { display: flex; align-items: center; gap: 1.25rem; }
.pi-item-header h1 { font-size: .9rem; font-weight: 550; color: var(--pi-muted); }
.pi-editor .fi-page-main, .pi-reading-page .fi-page-main { max-width: 64rem; width: 100%; margin-inline: auto; }
.pi-editor .fi-page-main { padding-bottom: 6rem; }
.pi-title-input { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; font-weight: 650; line-height: 1.3; letter-spacing: -.025em; padding: .5rem 0 !important; }
.pi-title-section .fi-input-wrp { background: transparent; box-shadow: none; border: 0; border-radius: 0; }
.pi-title-section .fi-input-wrp:focus-within { box-shadow: 0 2px 0 var(--pi-focus); }
.pi-editor .pi-note-editor .fi-fo-markdown-editor { border-radius: 12px; }
.pi-editor .pi-note-editor .CodeMirror { min-height: 260px; }
.pi-editor-actions { display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; position: fixed; z-index: 30; bottom: 0; left: var(--sidebar-width, 20rem); right: 0; padding: .85rem 2rem calc(.85rem + env(safe-area-inset-bottom, 0px)); background: var(--pi-surface); border-top: 1px solid var(--pi-border); }
/* Match the same expanded state that Filament uses for the desktop content area. */
@media (min-width: 1024px) {
    .fi-body-has-sidebar-collapsible-on-desktop .fi-main-sidebar:not(.fi-sidebar-open) { width: var(--collapsed-sidebar-width, 4.5rem); }
    .fi-body-has-sidebar-collapsible-on-desktop .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav { padding-inline: 1rem; scrollbar-gutter: auto; }
    .fi-body-has-sidebar-collapsible-on-desktop .fi-main-ctn:not(.fi-main-ctn-sidebar-open) .pi-editor-actions { left: var(--collapsed-sidebar-width, 4.5rem); }
}
.pi-editor-actions > .fi-sc-component { width: auto; flex: 0 1 auto; }
.pi-editor-actions > .fi-sc-component:first-child { flex: 1; }
.pi-save-status { margin: 0; font-size: .8rem; }
.pi-editor-actions .fi-sc-actions { justify-content: flex-end; }
.pi-reader { background: var(--pi-surface); padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--pi-radius); border: 1px solid var(--pi-border); }
.pi-reader-title { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 650; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 1.5rem; overflow-wrap: anywhere; }
.pi-reading-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.25rem; color: var(--pi-muted); font-size: .8rem; }
.pi-read-fields { display: grid; gap: .9rem; margin-bottom: 1.75rem; }
.pi-read-fields dt { color: var(--pi-muted); font-size: .8rem; margin-bottom: .25rem; }
.pi-read-fields dd { display: grid; gap: .3rem; overflow-wrap: anywhere; }
.pi-external-link { color: var(--pi-accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pi-prose { font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.pi-prose > * + * { margin-top: 1rem; }
.pi-prose :is(h1,h2,h3,h4,h5,h6) { font-weight: 650; line-height: 1.3; margin-block: 1.5em .6em; }
.pi-prose h1 { font-size: 2em; }.pi-prose h2 { font-size: 1.5em; }.pi-prose h3 { font-size: 1.25em; }.pi-prose h4 { font-size: 1.125em; }
.pi-prose :is(ul,ol) { padding-left: 1.5rem; }.pi-prose ul { list-style: disc; }.pi-prose ol { list-style: decimal; }
.pi-prose a { color: var(--pi-accent); text-decoration: underline; }.pi-prose strong { font-weight: 700; }
.pi-prose blockquote { border-left: 3px solid var(--pi-border); padding-left: 1rem; color: var(--pi-muted); }
.pi-prose pre { padding: 1rem; background: var(--pi-soft); border-radius: 10px; overflow-x: auto; }
.pi-prose :not(pre) > code { background: var(--pi-soft); border-radius: 4px; padding: .1em .3em; font-size: .9em; }
.pi-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.pi-prose table { display: block; overflow-x: auto; border-collapse: collapse; }.pi-prose td,.pi-prose th { padding: .5rem .75rem; border: 1px solid var(--pi-border); }
.pi-prose hr { border-color: var(--pi-border); margin: 1.5rem 0; }
.pi-template-preview { width: 100%; height: 65vh; border: 1px solid var(--pi-border); border-radius: 10px; background: var(--pi-surface); }
.pi-reminder-summary { display: flex; gap: .75rem; padding: 1rem; margin-top: 1.5rem; border-radius: 10px; background: var(--pi-soft); }
.pi-reminder-summary > svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .2rem; }
.pi-reminder-summary strong { font-weight: 600; }.pi-reminder-summary p { margin-top: .25rem; font-size: .9rem; }
.pi-sharing-panel { scroll-margin-top: 6rem; }
@media (max-width: 1023px) { .pi-editor-actions { left: 0; } }
@media (max-width: 767px) {
    .pi-item-header { flex-wrap: wrap; gap: .4rem; }
    .pi-item-header-start { gap: .75rem; }
    .pi-item-header .fi-ac { gap: .4rem; }
    .pi-item-header h1 { display: none; }
    .pi-editor-actions { gap: .75rem; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom, 0px)); bottom: var(--pi-keyboard-offset); }
    .pi-editor-actions .pi-save-status { max-width: 12rem; font-size: .75rem; }
    body:has(.pi-editor) .fi-topbar .fi-global-search { display: none; }
    .pi-reader { padding: 1.125rem; }
    .pi-editor .fi-section-content { padding: 1rem; }
    .pi-editor .fi-page-main { padding-bottom: 7rem; }
}
.pi-editor-actions > .fi-sc { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: .75rem; }
.pi-editor-actions > .fi-sc > .fi-grid-col:first-child { flex: 1; min-width: 0; }
.pi-editor-actions > .fi-sc > .fi-grid-col:last-child { flex: 0 0 auto; }
.pi-editor-actions .fi-ac { justify-content: flex-end; }
@media (max-width: 767px) { .pi-item-header h1 { display: block; position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } }
.pi-list-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
.pi-list-view-label { display: flex; align-items: center; gap: .65rem; font-size: .85rem; color: var(--pi-muted); }
.pi-view-select { width: auto; min-width: 8rem; }
.pi-item-list { width: 100%; }
.pi-item-row { display: flex; align-items: flex-start; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--pi-border); }
.pi-item-row:last-child { border-bottom: 0; }
.pi-item-row-main { flex: 1; min-width: 0; }
.pi-item-open { display: block; min-height: 44px; padding-block: .2rem; }
.pi-item-open h3 { font-size: 1rem; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.pi-item-meta { color: var(--pi-muted); font-size: .78rem; line-height: 1.5; margin-top: .3rem; overflow-wrap: anywhere; }
.pi-row-control { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; border-radius: 10px; color: var(--pi-muted); cursor: pointer; }
.pi-row-control:hover { background: var(--pi-soft); }.pi-row-control svg { width: 1.25rem; height: 1.25rem; }
.pi-row-control:disabled { cursor: wait; opacity: .5; }.pi-starred { color: var(--pi-accent); }.pi-complete { color: #15803d; }.dark .pi-complete { color: #4ade80; }
.pi-inline-icon { display: flex; align-items: center; gap: .35rem; }.pi-inline-icon svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.pi-row-links { display: flex; gap: .5rem; flex-wrap: wrap; }.pi-compact-link { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-size: .8rem; color: var(--pi-accent); overflow-wrap: anywhere; }
.pi-compact-link svg { width: .9rem; height: .9rem; flex-shrink: 0; }
.pi-simple-editor .fi-page-main { max-width: 48rem; }
.pi-layout-preview { border: 1px dashed var(--pi-border); border-radius: 12px; background: var(--pi-soft); padding: 1rem; }
.pi-layout-preview > div { background: var(--pi-surface); border: 1px solid var(--pi-border); margin-block: .5rem; padding: .6rem .8rem; border-radius: 6px; font-size: .85rem; }
.pi-item-list[wire\:loading] { opacity: .6; }
.pi-home .fi-header-heading { font-size: 1.7rem; letter-spacing: -.03em; }
.pi-home-card { background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); overflow: hidden; height: 100%; }
.pi-home-card-heading { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; gap: 1rem; }
.pi-home-card h2 { font-size: 1.05rem; font-weight: 650; display: flex; align-items: center; gap: .6rem; }
.pi-count { display: inline-flex; justify-content: center; align-items: center; min-width: 1.6rem; height: 1.6rem; font-size: .75rem; border-radius: 20px; background: var(--pi-soft); color: var(--pi-muted); }
.pi-text-button { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; font-weight: 550; color: var(--pi-accent); }
.pi-home-summary { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem; min-height: 44px; cursor: pointer; background: var(--pi-soft); color: var(--pi-muted); font-size: .8rem; font-weight: 600; }
.pi-home-priority { color: var(--primary-600); }
.pi-home-priority .pi-count { background: var(--primary-600); color: #fff; }
.dark .pi-home-priority { color: var(--primary-400); }
.dark .pi-home-priority .pi-count { background: var(--primary-400); color: #111827; }
.pi-home-summary::-webkit-details-marker { display: none; }.pi-home-summary svg { width: 1rem; height: 1rem; }.pi-home-disclosure[open] > summary svg { transform: rotate(180deg); }
.pi-home-disclosure + .pi-home-disclosure { border-top: 1px solid var(--pi-border); }
.pi-home .pi-item-row { padding-block: .55rem; }.pi-home .pi-item-open h3 { font-size: .95rem; }
.pi-item-status { background: var(--pi-soft); padding: .55rem .75rem; border-radius: 6px; color: var(--pi-muted); font-size: .8rem; white-space: pre-wrap; }
.pi-empty { color: var(--pi-muted); font-size: .9rem; line-height: 1.6; padding: 1.25rem; }
.pi-home-more { padding: .5rem 1rem 1rem; font-size: .8rem; color: var(--pi-muted); }.pi-home-more a { color: var(--pi-accent); text-decoration: underline; }
@media (max-width: 767px) { .pi-home .fi-page-content { gap: 1rem; }.pi-home-card { border-radius: 14px; } }
.pi-button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem .85rem; border-radius: 9px; font-size: .85rem; font-weight: 550; border: 1px solid var(--pi-border); cursor: pointer; }
.pi-button-secondary { background: var(--pi-surface); color: var(--pi-text); }.pi-button-secondary:hover { background: var(--pi-soft); }.pi-button:disabled { opacity: .55; cursor: wait; }
.pi-category-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--pi-text); }
.dark .pi-category-link { color: #fff; }
:is(.pi-button,.pi-row-control,.pi-item-open,.pi-compact-link,.pi-home-summary,.pi-text-button,.pi-page-back):focus-visible { outline: 2px solid var(--pi-focus); outline-offset: 3px; }
.pi-eyebrow { font-size: .75rem; font-weight: 650; color: var(--pi-muted); }
.pi-time-input { width: 10rem; }.pi-time-list { display: flex; gap: .6rem; flex-wrap: wrap; list-style: none; padding: 0; margin-top: .75rem; }.pi-time-list li { display: inline-flex; align-items: center; padding-left: .85rem; border: 1px solid var(--pi-border); border-radius: 24px; background: var(--pi-soft); font-size: .9rem; }
.pi-time-list .pi-row-control svg { width: 1rem; height: 1rem; }
.pi-schedule-preview { padding: 1rem; background: var(--pi-soft); border-radius: 10px; font-size: .9rem; line-height: 1.6; }.pi-schedule-preview strong { display: block; font-weight: 600; margin: .35rem 0; }
.pi-reminder-modal .fi-modal-content { gap: 1rem; }.pi-reminder-modal .fi-section-content { padding: 1rem; }
.pi-reminder-card { padding: 1rem 1.25rem; border-bottom: 1px solid var(--pi-border); }.pi-reminder-card:last-child { border: 0; }
.pi-reminder-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.pi-reminder-card-heading .fi-badge { flex-shrink: 0; }.pi-reminder-card-heading .pi-item-open { min-width: 0; }
.pi-reminder-schedule { font-size: .9rem; margin: .6rem 0; line-height: 1.5; }.pi-reminder-card .pi-help { margin-block: .6rem; }.pi-reminder-card-actions { margin-top: 1rem; }
.pi-reminder-card-actions .fi-ac-action { min-height: 44px; }
.pi-notification-date { font-size: .8rem; font-weight: 650; color: var(--pi-muted); padding: .65rem 1rem; background: var(--pi-soft); }
.fi-no-database .fi-no-notification { border-radius: 10px; }
@media (max-width: 767px) {
    .pi-reminder-modal.fi-modal-window { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
    .pi-reminder-modal .fi-modal-header { padding-top: max(1rem, env(safe-area-inset-top)); }
    .pi-reminder-modal .fi-modal-footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .pi-reminder-card { padding: 1rem; }.pi-reminder-card-heading { align-items: flex-start; }
}
.pi-reminder-modal .fi-modal-footer .fi-modal-footer-actions { flex-direction: row !important; justify-content: flex-end; }
@media (max-width: 767px) {
    .fi-modal:has(.pi-reminder-modal) > .fi-modal-window-ctn { padding: 0 !important; grid-template-rows: 1fr !important; }
    .fi-modal .fi-modal-window-ctn > .pi-reminder-modal.fi-modal-window { grid-row: 1; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; }
    .pi-reminder-modal .fi-modal-header, .pi-reminder-modal .fi-modal-footer { border-radius: 0 !important; }
}
/* A persistent action bar must leave room for the last editable field. */
.pi-editor .fi-page-content { padding-bottom: 5.5rem; }
@media (max-width: 767px) {
    .fi-topbar .fi-icon-btn, .fi-ta-header-toolbar .fi-icon-btn, .pi-item-header .fi-icon-btn { min-width: 44px; min-height: 44px; }
    .pi-editor .pi-note-editor .editor-toolbar button { min-width: 36px; min-height: 40px; }
    .pi-editor .pi-note-editor .editor-toolbar { padding: .35rem; }
    .pi-reminder-modal .fi-modal-content { padding-inline: 1rem !important; }
}
.pi-simple-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }.pi-simple-header h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.025em; margin-top: .5rem; }

/* Category breadcrumbs are navigation controls, including on phones. */
.pi-category-items .fi-header .fi-breadcrumbs { display: block; }
.pi-category-items .fi-header > div:first-child, .pi-category-items .fi-breadcrumbs-item { min-width: 0; }
.pi-category-items .fi-breadcrumbs-item-label { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 767px) {
    .pi-category-items .fi-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Tag browsing uses wrapping, touch-friendly pills in both themes. */
.pi-tag-pills { display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; padding: 0; margin: 0; }
.pi-tag-pills > li { max-width: 100%; }
.pi-tag-pill { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; max-width: 100%; border: 1px solid var(--pi-border); border-radius: 1.5rem; padding: .5rem .85rem; background: var(--pi-soft); color: var(--pi-text); text-decoration: none; }
.pi-tag-pill:hover { border-color: var(--pi-accent); color: var(--pi-accent); }
.pi-tag-pill:focus-visible { outline: 2px solid var(--pi-focus); outline-offset: 3px; }
.pi-tag-name { min-width: 0; overflow-wrap: anywhere; }
.pi-tag-count { flex-shrink: 0; min-width: 1.6rem; border-radius: 999px; padding: .1rem .4rem; background: var(--pi-surface); color: var(--pi-muted); text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; }

.pi-category-heading { display: flex; align-items: flex-start; gap: .5rem; }
.pi-category-content { flex: 1; min-width: 0; }
.pi-category-content .pi-category-link { vertical-align: middle; }
.pi-category-heading > button { display: flex; align-items: center; justify-content: center; }
.pi-category-link .fi-link-label { align-self: center; }
.pi-category-divider { border: 0; border-top: 1px solid color-mix(in srgb, var(--pi-accent) 22%, transparent); margin: .5rem 0 1rem; }
.pi-category-tags { display: inline; list-style: none; padding: 0; margin: 0; }
.pi-category-tags > li { display: inline-flex; vertical-align: middle; margin-inline-start: .4rem; min-width: 0; max-width: 100%; }
.pi-category-tag.fi-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; filter: saturate(0.25); }
.pi-category-tag.fi-badge:hover, .pi-category-tag.fi-badge:focus-visible { filter: saturate(1); }
.pi-category-tag .fi-badge-label-ctn { align-self: center; min-width: 0; }
.pi-category-tag .fi-badge-label { white-space: normal; overflow-wrap: anywhere; }
.pi-category-tag:focus-visible { outline: 2px solid var(--pi-focus); outline-offset: 3px; }
@media (pointer: coarse) { .pi-category-tag.fi-badge { min-height: 44px; } }

.pi-item-header-start { min-width: 0; }
.pi-item-header-start .pi-page-back { flex-shrink: 0; }
.pi-item-header-start .fi-breadcrumbs { min-width: 0; }
.pi-item-header-start .fi-breadcrumbs-item { min-width: 0; }
.pi-item-header-start .fi-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* Template Read mode owns the remaining viewport; the embedded document scrolls. */
html:has(.pi-template-reader), body:has(.pi-template-reader) { overflow: hidden; }
.pi-editor:has(.pi-template-reader) .fi-page-main { max-width: none; padding-bottom: 0; }
.pi-editor:has(.pi-template-reader) .fi-page-content { padding-bottom: 0; }
.pi-template-reader { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pi-template-reader-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex: 0 0 auto; font-size: .8rem; padding: .25rem 0 .5rem; }
.pi-template-reader-toolbar button { color: var(--primary-600); min-height: 32px; }
.pi-template-reader iframe { flex: 1 1 0; min-height: 0; width: 100%; border: 1px solid var(--pi-border); border-radius: 10px; background: white; }

.pi-invitation { padding: 1rem 0; overflow-wrap: anywhere; }
.pi-invitation + .pi-invitation { border-top: 1px solid var(--pi-border); }
.pi-invitation h3 { font-weight: 600; font-size: 1.05rem; }
.pi-invitation .pi-actions { margin-top: .75rem; flex-wrap: wrap; }

/* Settings and compact action targets. */
.pi-settings-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; padding: .35rem; background: var(--pi-soft); border-radius: 12px; }
.pi-settings-tabs button { min-height: 44px; border-radius: 8px; padding: .5rem .25rem; font-size: .875rem; color: var(--pi-muted); cursor: pointer; }
.pi-settings-tabs button[aria-selected="true"] { color: var(--pi-text); background: var(--pi-surface); box-shadow: 0 1px 3px #0001; font-weight: 600; }
.pi-settings-save { position: sticky; bottom: 1rem; z-index: 20; padding: .85rem; border: 1px solid var(--pi-border); border-radius: 12px; background: var(--pi-surface); box-shadow: 0 4px 20px #0001; }
.pi-settings .fi-btn, .pi-getting-started .fi-btn, .pi-type-action, .pi-reminder-card-actions .fi-btn, .pi-reminder-card-actions .fi-link { min-height: 44px; min-width: 44px; }
.pi-reminder-card-actions { gap: 12px; flex-wrap: wrap; }
.pi-reminder-card-actions .fi-btn, .pi-reminder-card-actions .fi-link, .pi-type-action { padding-inline: 12px; }
.pi-settings button:focus-visible, .pi-getting-started button:focus-visible, .pi-type-action:focus-visible, .pi-reminder-card-actions .fi-btn:focus-visible, .pi-reminder-card-actions .fi-link:focus-visible { outline: 2px solid var(--pi-focus); outline-offset: 3px; }
.pi-getting-started { margin-bottom: 1.5rem; }
@media (max-width: 767px) {
    .pi-settings-save { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    .pi-settings-tabs button { font-size: .8rem; }
}
.pi-recovery { max-width: 64rem; }
.pi-recovery .fi-btn { min-height: 44px; }
.pi-revision-content { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-height: 28rem; overflow: auto; padding: 1rem; background: var(--pi-soft); border-radius: 8px; font-size: .9rem; }

.pi-home-filter { display: grid; gap: .4rem; }
.pi-home-filter > label { font-weight: 600; }
.pi-home-filter-controls { display: flex; align-items: center; gap: .75rem; }
.pi-home-filter-controls .pi-input { min-width: 0; }
.pi-home-filter-controls button { min-height: 44px; flex-shrink: 0; }

.pi-home-no-results { display: none; }
.pi-home:has(.pi-home-widget[data-home-filtered="true"]):not(:has(.pi-home-widget[data-home-matches="true"])) .pi-home-no-results { display: block; }
.pi-home-no-matches { opacity: .6; filter: saturate(.4); transition: opacity 150ms ease, filter 150ms ease; }
.pi-home-no-matches:focus-within { opacity: 1; filter: saturate(1); }
@media (hover: hover) {
    .pi-home-no-matches:hover { opacity: 1; filter: saturate(1); }
}
@media (max-width: 767px) {
    .pi-home-no-matches { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .pi-home-no-matches { transition: none; }
}

.pi-home-unavailable { display: none !important; }

.pi-reminder-month-days, .pi-month-day-rows { display: grid; gap: .75rem; }
.pi-month-day-row { display: flex; align-items: center; gap: .5rem; }
.pi-month-day-row .pi-input { flex: 1; min-width: 0; }
.pi-reminder-month-days > .pi-button { justify-self: start; }

.pi-reminder-times, .pi-time-rows, .pi-reminder-weekdays { display: grid; gap: .75rem; }
.pi-time-row { display: flex; align-items: center; gap: .5rem; }
.pi-time-row .pi-input { flex: 1; min-width: 0; }
.pi-reminder-times > .pi-button { justify-self: start; }
.pi-weekday-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.pi-weekday-option { position: relative; }
.pi-weekday-option input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pi-weekday-option span { display: flex; justify-content: center; align-items: center; min-height: 44px; border: 1px solid var(--pi-border); border-radius: 9px; color: var(--pi-text); background: var(--pi-surface); font-size: .875rem; }
.pi-weekday-option input:checked + span { background: var(--pi-accent); border-color: var(--pi-accent); color: white; font-weight: 700; }
.pi-weekday-option span::after { content: '\2713'; visibility: hidden; width: .6rem; margin-left: .15rem; font-size: .7rem; }
.pi-weekday-option input:checked + span::after { visibility: visible; }
.dark .pi-weekday-option input:checked + span { color: #17202e; }
.pi-weekday-option input:focus-visible + span { outline: 2px solid var(--pi-focus); outline-offset: 2px; }
.pi-reminder-date-time { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.pi-date-time-label { display: grid; gap: .4rem; font-size: .875rem; }
.pi-date-time-label input { min-width: 0; }
@media (max-width: 639px) {
    .pi-weekday-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pi-reminder-date-time { grid-template-columns: minmax(0, 1fr); }
}