/* FP web-app screen frame. Load after tokens.css and components.css. */
.fpds .fpa-shell { --fpa-sidebar: 16rem; --fpa-topbar-height: 4rem; min-height: 100dvh; }
.fpds .fpa-shell :where([id]) { scroll-margin-block-start: calc(var(--fpa-topbar-height) + 1rem); }
.fpds .fpa-shell :where(button,a,input,select,textarea) { touch-action: manipulation; }
.fpds .fpa-shell .fp-skip { z-index: 100; }
.fpds .fpa-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.fpds .fpa-topbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; min-height: 4rem; padding: .5rem 1.5rem; border-block-end: 1px solid var(--fp-divider); background: var(--fp-surface); position: sticky; top: 0; z-index: 20; }
.fpds .fpa-brand { display: inline-flex; align-items: center; gap: .25rem; min-height: 3rem; color: var(--fp-text); text-decoration: none; font-family: var(--fp-font-display); min-width: 0; }
.fpds .fpa-brand-symbol { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; }
.fpds .fpa-brand strong { color: var(--fp-action-hover); font-size: 1.25rem; }
.fpds .fpa-product-name { margin-inline-start: .5rem; font-size: 1rem; }
.fpds .fpa-demo-label { border-inline-start: 1px solid var(--fp-divider); padding-inline-start: 1rem; color: var(--fp-text-muted); font-size: .875rem; }
.fpds .fpa-topbar-actions { margin-inline-start: auto; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.fpds .fpa-icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 3rem; padding: .625rem; border: 1px solid transparent; border-radius: var(--fp-radius-control); background: transparent; color: var(--fp-text); cursor: pointer; flex: 0 0 auto; }
.fpds .fpa-icon-button:hover, .fpds .fpa-account:hover { background: var(--fp-surface-subtle); border-color: var(--fp-divider); }
.fpds .fpa-icon-button img, .fpds .fpa-account img, .fpds .fpa-nav-link img, .fpds .fpa-inline-icon { width: 1.5rem; height: 1.5rem; object-fit: contain; flex: 0 0 auto; }
.fpds .fpa-action-icon { display: inline-block; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; background: currentColor; }
.fpds .fpa-action-icon-add { -webkit-mask: url("media/digital-agency/app-add.svg") center / contain no-repeat; mask: url("media/digital-agency/app-add.svg") center / contain no-repeat; }
.fpds .fpa-account { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-width: 0; min-height: 3rem; padding: .5rem; border: 1px solid var(--fp-divider); border-radius: var(--fp-radius-control); color: var(--fp-text); font-weight: 700; text-decoration: none; flex: 1 1 auto; }
.fpds .fpa-account .fpa-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fpds .fpa-account[aria-current="page"] { color: var(--fp-action-hover); background: #e4edff; border-color: var(--fp-action-hover); }
.fpds .fpa-layout { display: grid; grid-template-columns: var(--fpa-sidebar) minmax(0, 1fr); align-items: start; min-height: calc(100dvh - var(--fpa-topbar-height)); }
.fpds .fpa-sidebar { position: sticky; top: var(--fpa-topbar-height); align-self: stretch; display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - var(--fpa-topbar-height)); min-height: min(32rem, calc(100dvh - var(--fpa-topbar-height))); padding: 1.5rem .75rem 1rem; border-inline-end: 1px solid var(--fp-divider); background: var(--fp-surface-subtle); overflow-y: auto; scrollbar-gutter: stable; }
.fpds .fpa-navigation-heading { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding-inline: .75rem; margin-block-end: 1rem; }
.fpds .fpa-nav-list, .fpds .fpa-nav-children { list-style: none; margin: 0; padding: 0; }
.fpds .fpa-nav-list > li { margin-block-end: .5rem; }
.fpds .fpa-nav-link { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3rem; min-width: 0; padding: .625rem .75rem; border: 1px solid transparent; border-radius: var(--fp-radius-control); background: transparent; color: var(--fp-text); text-align: start; font-weight: 400; line-height: 1.5; text-decoration: none; cursor: pointer; }
.fpds .fpa-nav-link:hover { background: #e7ecf3; text-decoration: underline; }
.fpds .fpa-nav-link[aria-current="page"], .fpds .fpa-nav-link[data-active="true"] { color: var(--fp-action-hover); background: #e4edff; font-weight: 700; border-inline-start: 3px solid var(--fp-action-hover); }
.fpds .fpa-nav-group-row { display: flex; align-items: start; min-width: 0; }
.fpds .fpa-nav-group-row > .fpa-nav-link { flex: 1 1 auto; }
.fpds .fpa-disclosure { color: var(--fp-text-muted); }
.fpds .fpa-disclosure-icon { display: inline-block; width: 1rem; height: 1rem; flex: 0 0 auto; background: currentColor; -webkit-mask: url("media/digital-agency/app-arrow-down.svg") center / contain no-repeat; mask: url("media/digital-agency/app-arrow-down.svg") center / contain no-repeat; }
.fpds .fpa-disclosure[aria-expanded="false"] .fpa-disclosure-icon { transform: rotate(-90deg); }
.fpds .fpa-nav-children { margin-block: .25rem .75rem; margin-inline-start: 1.5rem; padding-inline-start: .25rem; border-inline-start: 1px solid var(--fp-divider); }
.fpds .fpa-sidebar-bottom { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; margin-block-start: auto; padding-block-start: 1rem; }
.fpds .fpa-collapse { position: relative; }
.fpds .fpa-collapse .fpa-rail-tooltip { position: absolute; inset-block-start: auto; inset-block-end: calc(100% + .5rem); inset-inline-end: 0; display: none; width: max-content; max-width: 15rem; padding: .75rem; border: 1px solid var(--fp-border); border-radius: .5rem; background: #111827; color: #fff; box-shadow: var(--fp-shadow); z-index: 30; font-size: .875rem; font-weight: 400; pointer-events: none; }
.fpds .fpa-collapse:is(:hover, :focus-visible) .fpa-rail-tooltip { display: block; }
.fpds .fpa-rail-tooltip { display: none; }
.fpds .fpa-workspace { display: flex; flex-direction: column; min-width: 0; min-height: calc(100dvh - var(--fpa-topbar-height)); }
.fpds .fpa-main { width: 100%; max-width: 84rem; margin-inline: auto; padding: 2rem; flex: 1 0 auto; min-width: 0; }
.fpds .fpa-main:focus { outline-offset: -6px; }
.fpds .fpa-main h1 { font-size: 2rem; font-weight: 700; line-height: 1.5; margin: 0 0 .5rem; }
.fpds .fpa-main h2 { font-size: 1.5rem; }
.fpds .fpa-main h3 { font-size: 1.125rem; }
.fpds .fpa-main .fp-hint { font-size: 1rem; }
.fpds .fpa-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0; margin: 0 0 1.5rem; list-style: none; font-size: .875rem; }
.fpds .fpa-breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; }
.fpds .fpa-breadcrumb li + li::before { content: "/"; color: var(--fp-text-muted); }
.fpds .fpa-breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fpds .fpa-page-heading { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: start; justify-content: space-between; margin-block-end: 2rem; }
.fpds .fpa-page-heading > div { flex: 1 1 20rem; min-width: 0; }
.fpds .fpa-page-heading p { color: var(--fp-text-muted); max-width: 44rem; margin: 0; }
.fpds .fpa-page-heading .fp-button { flex: 0 1 auto; }
.fpds .fpa-demo-note { padding: .75rem 1rem; border-inline-start: 3px solid var(--fp-brand-lime); background: var(--fp-surface-subtle); color: var(--fp-text-muted); font-size: .875rem; margin-block-end: 1.5rem; }
.fpds .fpa-filter { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 15rem) auto; gap: 1rem; align-items: end; margin-block-end: 1rem; }
.fpds .fpa-filter .fp-field { min-width: 0; margin: 0; }
.fpds .fpa-results-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; min-height: 3rem; margin-block-end: .5rem; }
.fpds .fpa-results-heading p { margin: 0; }
.fpds .fpa-results { min-width: 0; padding: .5rem; margin: -.5rem; }
.fpds .fpa-table { min-width: 40rem; }
.fpds .fpa-table td:first-child { width: 46%; }
.fpds .fpa-table a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
.fpds .fpa-table-subtitle { display: block; color: var(--fp-text-muted); font-size: .875rem; margin-block-start: .25rem; }
.fpds .fpa-table caption { font-size: 1rem; }
.fpds .fpa-table time { white-space: nowrap; }
.fpds .fpa-status { display: inline-flex; gap: .4rem; align-items: center; min-height: 1.75rem; font-size: .875rem; font-weight: 700; color: var(--fp-action-hover); background: #edf3ff; border: 1px solid #afbfda; border-radius: .25rem; padding: .125rem .5rem; }
.fpds .fpa-status::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.fpds .fpa-status[data-status="done"] { color: var(--fp-success); background: #edf7f0; border-color: #a9c5b6; }
.fpds .fpa-status[data-status="planned"] { color: var(--fp-text-muted); background: var(--fp-surface-subtle); border-color: var(--fp-divider); }
.fpds .fpa-empty { padding: 3rem 1.5rem; border-block: 1px solid var(--fp-divider); text-align: center; }
.fpds .fpa-empty img { width: 3rem; height: 3rem; margin-block-end: 1rem; }
.fpds .fpa-empty .fp-actions { justify-content: center; }
.fpds .fpa-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: 2rem; }
.fpds .fpa-detail-section { border-block-start: 1px solid var(--fp-divider); padding-block: 1.5rem; }
.fpds .fpa-details-meta { background: var(--fp-surface-subtle); border-radius: var(--fp-radius-control); padding: 1.5rem; align-self: start; }
.fpds .fpa-details-meta dl { margin: 0; }
.fpds .fpa-details-meta dt { color: var(--fp-text-muted); font-size: .875rem; margin-block-end: .25rem; }
.fpds .fpa-details-meta dd { margin: 0 0 1.25rem; }
.fpds .fpa-details-meta dd:last-child { margin: 0; }
.fpds .fpa-pre-wrap { white-space: pre-wrap; }
.fpds .fpa-edit-form { max-width: 48rem; }
.fpds .fpa-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.5rem; }
.fpds .fpa-save-bar { border-block-start: 1px solid var(--fp-divider); margin-block-start: 2rem; padding-block: 1.5rem; background: var(--fp-surface); }
.fpds .fpa-save-bar p { color: var(--fp-text-muted); font-size: .875rem; }
.fpds .fpa-activity-list { list-style: none; padding: 0; border-block-start: 1px solid var(--fp-divider); }
.fpds .fpa-activity-list li { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: 1rem; padding-block: 1.25rem; border-block-end: 1px solid var(--fp-divider); }
.fpds .fpa-activity-list time { color: var(--fp-text-muted); font-size: .875rem; }
.fpds .fpa-activity-list p { margin: 0; }
.fpds .fpa-prose { max-width: 48rem; }
.fpds .fpa-prose section { padding-block: 1.5rem; border-block-start: 1px solid var(--fp-divider); }
.fpds .fpa-prose li { margin-block-end: .75rem; }
.fpds .fpa-prose a:not(.fp-button) { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fpds .fpa-guide-table { width: 100%; border-collapse: collapse; }
.fpds .fpa-guide-table th, .fpds .fpa-guide-table td { padding: 1rem; border-block-end: 1px solid var(--fp-divider); text-align: start; vertical-align: top; }
.fpds .fpa-guide-table th { width: 35%; }
.fpds .fpa-state-preview { border: 1px solid var(--fp-border); border-radius: .5rem; padding: 1.5rem; margin-block-start: 1rem; }
.fpds .fpa-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1rem 2rem; border-block-start: 2px solid rgb(0 102 255 / 20%); background: #1a1a2e; color: #fff; }
.fpds .fpa-footer-brand { font-family: var(--fp-font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.6; background: linear-gradient(135deg, var(--fp-brand-blue), var(--fp-brand-lime)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.fpds .fpa-footer-text { margin-inline-start: auto; color: rgb(255 255 255 / 48%); font-family: var(--fp-font-display); font-size: .9rem; line-height: 1.6; }
.fpds .fpa-backdrop { position: fixed; inset: 0; background: rgb(17 24 39 / 48%); z-index: 40; }
.fpds .fpa-dialog { max-width: min(32rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 2rem; border: 1px solid var(--fp-border); border-radius: 1rem; color: var(--fp-text); background: var(--fp-surface); overflow: auto; }
.fpds .fpa-dialog::backdrop { background: rgb(17 24 39 / 48%); }
.fpds .fpa-dialog h2 { font-size: 1.5rem; }
@media (min-width: 60rem) {
  .fpds .fpa-navigation-heading { display: none; }
  .fpds .fpa-shell[data-collapsed="true"] { --fpa-sidebar: 4.5rem; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-sidebar { padding-inline: .5rem; overflow: visible; scrollbar-gutter: auto; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-sidebar nav { flex: 0 1 auto; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-sidebar-bottom { flex-direction: column; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-account { width: 3rem; min-width: 3rem; justify-content: center; flex: 0 0 auto; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-nav-link { justify-content: center; padding-inline: .5rem; }
  .fpds .fpa-shell[data-collapsed="true"] :is(.fpa-nav-children,.fpa-disclosure) { display: none; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-navigation-heading { justify-content: flex-end; padding-inline: 0; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-collapse .fpa-rail-tooltip { inset-inline-start: calc(100% + .75rem); inset-inline-end: auto; inset-block-start: auto; inset-block-end: 0; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-account:is(:hover,:focus-visible) .fpa-rail-tooltip { position: absolute; inset-inline-start: calc(100% + .75rem); inset-block-end: 0; display: block; width: max-content; max-width: 15rem; padding: .75rem; border: 1px solid var(--fp-border); border-radius: .5rem; background: #111827; color: #fff; box-shadow: var(--fp-shadow); z-index: 30; font-size: .875rem; font-weight: 400; pointer-events: none; }
  .fpds .fpa-shell[data-collapsed="true"] .fpa-nav-link:is(:hover,:focus-visible) .fpa-rail-tooltip { position: absolute; inset-inline-start: calc(100% + .75rem); inset-block-start: 0; display: block; width: max-content; max-width: 15rem; padding: .75rem; border: 1px solid var(--fp-border); border-radius: .5rem; background: #111827; color: #fff; box-shadow: var(--fp-shadow); z-index: 30; font-size: .875rem; font-weight: 400; }
}
@media (max-width: 74.99rem) { .fpds .fpa-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fpds .fpa-filter > .fp-button { justify-self: start; } .fpds .fpa-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 59.99rem) {
  .fpds .fpa-shell :where([id]) { scroll-margin-block-start: 1rem; }
  .fpds .fpa-topbar { position: static; padding: .5rem 1rem; gap: .5rem; }
  .fpds .fpa-demo-label { display: none; }
  .fpds .fpa-layout { display: block; }
  .fpds .fpa-sidebar { position: fixed; inset: 0 auto 0 0; width: min(20rem, calc(100% - 2rem)); max-height: 100dvh; min-height: 100dvh; height: 100dvh; overflow: auto; z-index: 50; padding: 1rem .75rem; box-shadow: var(--fp-shadow); }
  .fpds .fpa-sidebar:not([data-open="true"]) { display: none; }
  .fpds .fpa-navigation-heading { padding-inline: .5rem; }
  .fpds .fpa-main { padding: 1.5rem 1rem 2rem; }
  .fpds .fpa-footer { padding: 1rem; }
  .fpds .fpa-footer-text { margin-inline-start: 0; }
}
@media (max-width: 39.99rem) {
  .fpds .fpa-topbar-actions { margin-inline-start: auto; }
  .fpds .fpa-product-name { display: block; font-size: .875rem; margin-inline-start: 0; }
  .fpds .fpa-brand-symbol { width: 2rem; height: 2rem; }
  .fpds .fpa-brand strong { font-size: 1.125rem; }
  .fpds .fpa-filter, .fpds .fpa-form-grid { grid-template-columns: minmax(0, 1fr); }
  .fpds .fpa-page-heading { margin-block-end: 1.5rem; }
  .fpds .fpa-activity-list li { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .fpds .fpa-dialog { padding: 1.25rem; }
  .fpds .fpa-guide-table th, .fpds .fpa-guide-table td { padding: .75rem .5rem; }
}
@media (max-height: 30rem) and (min-width: 60rem) {
  .fpds .fpa-shell[data-collapsed="true"] .fpa-sidebar { position: static; max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .fpds .fpa-shell *, .fpds .fpa-shell *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .fpds .fpa-nav-link[aria-current="page"], .fpds .fpa-nav-link[data-active="true"] { border: 2px solid Highlight; }
  .fpds .fpa-action-icon-add { background: currentColor; }
  .fpds .fpa-footer, .fpds .fpa-footer-text { color: CanvasText; background: Canvas; }
  .fpds .fpa-footer-brand { color: CanvasText; background: Canvas; -webkit-text-fill-color: CanvasText; }
}