/* Placeholders use the same frame, spacing and responsive layouts as the data. */
.workspace-pending .view, .workspace-pending #first-steps { display: none !important; }
body:is(.signed-out, .setup-required, .startup-failed) #workspace-skeleton { display: none !important; }
body.booting #loading { display: none !important; }
/* Before the workspace shell exists, only the fixed boot overlay is visible. */
body.booting:not(:is(.has-workspace-skeleton, #workspace-skeleton[hidden])) .main-col { visibility: hidden; }
body.booting #boot-panel { visibility: visible; }
body:is(.workspace-pending, .workspace-revealing) { overflow: hidden; }
body:is(.workspace-pending, .workspace-revealing) :is(.sidebar, .page-head) { pointer-events: none; }

/* Dim the whole viewport beneath the loader and its text. */
#boot-panel, #loading {
  position: fixed; inset: 0; z-index: 400; display: grid; place-content: center; justify-items: center;
  gap: 12px; min-height: 0; margin: 0; padding: 24px; text-align: center; color: var(--ink);
  background: rgb(0 0 0 / .28); isolation: isolate;
}
#boot-panel p { margin: 0; }
#loading > div { display: grid; justify-items: center; }
#boot-message, #loading-message { font-size: 14px; font-weight: 500; }
#boot-panel .loading-hint, #loading .loading-hint { display: none; }
/* Enter together from the first paint; progress updates keep these nodes. */
:is(#boot-panel, #loading) > [data-loading-emblem], #boot-message, #loading > div {
  animation: load-enter 380ms cubic-bezier(.2, .8, .2, 1) both;
}
body.workspace-revealing[data-loading-panel="boot"] #boot-panel,
body.workspace-revealing[data-loading-panel="workspace"] #loading {
  display: grid !important; pointer-events: none;
}
body.workspace-revealing.workspace-handoff[data-loading-panel="boot"] #boot-panel,
body.workspace-revealing.workspace-handoff[data-loading-panel="workspace"] #loading {
  /* The data and the fading loader start together near the pulse's end. */
  animation: load-dismiss 320ms ease both;
}
[data-loading-emblem] { display: grid; justify-items: center; gap: 14px; min-width: 76px; flex: none; }
.load-logo { width: 72px; height: 72px; position: relative; display: block; }
.load-logo > span { position: absolute; inset: 0; display: block; }
.load-logo svg { display: block; width: 100%; height: 100%; }
.load-logo-track { color: var(--ink-4); opacity: .4; }
/* The fill's surface is two waves: a tinted back wave rides a little higher and
   drifts the other way. Each tile is one wavelength and a loop moves each layer
   by exactly one tile, so it never jumps. Masks are 200% tall, so a y percentage
   is a share of the logo's height: the front wave's mean line sits on the fill.
   The clip-path stays above every crest and keeps a straight fill without masks. */
@property --load-wave { syntax: '<number>'; inherits: false; initial-value: 0; }
.load-logo-fill {
  color: var(--accent); clip-path: inset(calc(94% - var(--load-fill, 0%)) 0 0);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 200' preserveAspectRatio='none'%3E%3Cpath d='M0 3Q10-3 20 3T40 3V200H0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 200' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.4' d='M0 3Q10-3 20 3T40 3V200H0Z'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  mask-size: 50% 200%, calc(200% / 3) 200%;
  mask-position: calc(var(--load-wave) * 100%) calc(var(--load-fill, 0%) - 97%), calc(var(--load-wave) * -200%) calc(var(--load-fill, 0%) - 95%);
  animation: load-wave 2.4s linear infinite;
}
body.workspace-loaded .load-logo { animation: load-complete 320ms ease-in-out; }
.load-measure { min-height: 1.25em; font-size: 24px; line-height: 1.25; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Keep the icon and message still when measured progress first arrives. */
.load-measure[hidden] { display: block !important; visibility: hidden; }

.workspace-skeleton { margin: 0 0 28px; pointer-events: none; }
.sk-screen { display: none !important; }
.workspace-skeleton[data-view="home"] .sk-home,
.workspace-skeleton[data-view="review"] .sk-review,
.workspace-skeleton[data-view="payments"] .sk-payments,
.workspace-skeleton[data-view="files"] .sk-files { display: block !important; }
.workspace-skeleton[data-view="studies"] .sk-studies { display: grid !important; }
.sk-card { position: relative; min-width: 0; overflow: hidden; }
.sk-card::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--ink-4) 6%, transparent) 48%, transparent 70%); animation: skeleton-pass 2.4s ease-in-out infinite; }
.sk-line { display: block; width: 68%; max-width: 100%; height: 12px; flex: none; border-radius: 6px; background: var(--surface-3); }
.sk-title { width: 36%; height: 14px; }
.sk-amount { width: 52%; height: 40px; border-radius: 8px; margin: 16px 0 14px; }
.sk-control { width: 148px; height: 32px; border-radius: 9px; }
.sk-search { width: 42%; height: 36px; border-radius: 9px; }
.sk-meter { width: 100%; height: 10px; margin: 18px 0; }
.sk-chart-space { display: flex; align-items: end; justify-content: space-around; padding-top: 12px; border-bottom: 1px solid var(--line); }
.sk-chart-space i { width: var(--bw, 22px); height: 60%; border-radius: 12px 12px 0 0; background: var(--surface-3); }
.sk-chart-space i:nth-child(3n + 1) { height: 35%; }
.sk-chart-space i:nth-child(3n + 2) { height: 82%; }
.sk-axis { display: flex; justify-content: space-between; margin: 12px 52px 8px 0; }
.sk-axis .sk-line { width: 15%; height: 8px; }
.sk-ring { width: 196px; max-width: 100%; aspect-ratio: 1; border: 16px solid var(--surface-3); border-radius: 50%; margin: 0 auto; }
.sk-home .ov-ring-list .sk-row { height: 53px; }
.sk-home .ov-tile { min-height: 165px; }
.sk-home .ov-hero-main > .sk-amount { height: clamp(60px, 7vw, 102px); margin: 14px 0; }
.sk-home .ov-hero-stat > .sk-amount { width: 80%; height: 30px; }
.sk-home .ov-hero-stat > .sk-title { width: 65%; }
.sk-toolbar, .sk-table-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sk-table-head { padding: 20px; border-bottom: 1px solid var(--line); }
.sk-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; align-items: center; min-width: 0; height: 68px; border-bottom: 1px solid var(--line); }
.sk-row:last-child { border: 0; }
.sk-row .sk-line { width: 86%; }
.sk-table > .sk-row { margin: 0 20px; }
.sk-studies { grid-template-columns: minmax(0, 1fr) 300px; gap: 0 20px; align-items: start; }
.sk-studies > .toolbar { grid-column: 1 / -1; margin-bottom: 26px; }
.sk-studies > .study-strip { grid-column: 1 / -1; }
.sk-studies .ss-stat { width: 120px; }
.sk-studies .ss-stat .sk-amount { height: 30px; margin: 8px 0; }
.sk-studies .study-side { display: grid; grid-column: 2; grid-row: 3; border: 1px solid var(--line); background: var(--surface); }
.sk-studies .sm-donut .sk-ring { width: 100%; }
.sk-studies .sk-table { grid-column: 1; grid-row: 3; }
.sk-insight { display: flex; align-items: center; justify-content: space-between; padding: 22px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.sk-review .review-side, .sk-review .review-detail { position: static; }
.sk-review .review-detail { min-height: 520px; }
.sk-review .review-side > .sk-control { width: 100%; }
.sk-periods > div { display: grid; justify-items: center; gap: 12px; }
.sk-periods::before { display: none !important; }
.sk-dot { width: 24px; height: 24px; border-radius: 50%; }
.sk-periods > div > .sk-line:last-child { width: 46px; }
.sk-origin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.sk-origin .sk-line { width: 80%; margin: 0; }
.sk-files > .card { margin-bottom: 16px; }
.sk-coverage { padding: 0 22px 16px; }
.sk-files .fm-tile { background: var(--surface-3); }
.sk-files .fm-year .sk-title { width: 52px; }
@keyframes skeleton-pass { to { transform: translateX(100%); } }
@keyframes load-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes load-complete { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes load-wave { to { --load-wave: 1; } }
@keyframes load-dismiss { to { opacity: 0; } }
@media (max-width: 1100px) {
  .sk-studies { grid-template-columns: minmax(0, 1fr); }
  .sk-studies .study-side { grid-column: 1; grid-row: 3; }
  .sk-studies .sk-table { grid-row: 4; }
}
@media (max-width: 760px) {
  .load-logo { width: 64px; height: 64px; }
  .sk-toolbar { flex-wrap: wrap; gap: 12px; }
  .sk-studies .sk-toolbar .sk-search { order: 3; width: 100%; }
  .sk-studies .ss-stat { width: 90px; }
  .sk-row { gap: 12px; }
  .sk-periods { width: 100%; overflow: hidden; }
  .sk-payments .sp-match .sk-ring { width: 132px; }
  .sk-review .review-detail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-card::after { display: none; }
  :is(#boot-panel, #loading) > [data-loading-emblem], #boot-message, #loading > div { animation: none !important; }
  [data-loading-emblem] :is(.load-logo, .load-logo-fill) { animation: none !important; }
  body.workspace-revealing :is(#boot-panel, #loading) { animation: none !important; }
}

/* Reserve the account controls too, so navigation stays in its final position. */
.sk-switcher { display: none !important; }
body.workspace-pending:is(.has-workspace-skeleton, #workspace-skeleton[hidden]) .sk-switcher { display: flex !important; }
body.workspace-pending:is(.has-workspace-skeleton, #workspace-skeleton[hidden]) #hospital-bar { display: none !important; }
.sidebar .sk-switcher .switcher-control { min-width: 0; }
.sidebar .sk-switcher .switcher-control > .sk-control { width: 210px; height: 36px; }
.sidebar .sk-switcher .switcher-actions > .sk-control { width: 34px; height: 34px; }
.sk-switcher .switcher-note { display: grid; gap: 6px; padding: 3px 0; }
/* Keep the whole heading in the same placeholder state as the workspace. */
body.workspace-pending:is(.has-workspace-skeleton, #workspace-skeleton[hidden]) .page-head {
  & :is(.page-kicker, #page-title, #page-description, #palette-open, #review-progress) {
    position: relative; visibility: hidden;
  }
  & #page-description:empty { display: block; min-height: 22px; }
  & :is(.page-kicker, #page-title, #page-description, #palette-open, #review-progress)::after {
    content: ''; position: absolute; left: 0; top: 50%; width: min(180px, 100%); height: 10px;
    transform: translateY(-50%); border-radius: 6px; background: var(--surface-3); visibility: visible;
  }
  & #page-title::after { width: min(220px, 85%); height: .72em; border-radius: 8px; }
  & #page-description::after { width: min(240px, 100%); height: 12px; }
  & :is(#palette-open, #review-progress)::after { left: 14px; width: calc(100% - 28px); height: 12px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .sidebar .sk-switcher .switcher-control > .sk-control { width: 160px; }
}
@media (min-width: 901px) {
  :root[data-look="ledger"] body.workspace-pending:is(.has-workspace-skeleton, #workspace-skeleton[hidden]) .sk-switcher { display: grid !important; }
  :root[data-look="ledger"] .sidebar .sk-switcher .switcher-control > .sk-control { width: 100%; height: 40px; }
  :root[data-look="ledger"] .sidebar .sk-switcher .switcher-label { min-height: 19px; padding-top: 3px; }
  :root[data-look="ledger"] .sidebar .sk-switcher .switcher-actions > .sk-control { flex: 1; }
}
@media (max-width: 900px) {
  .sidebar .sk-switcher .switcher-control { flex: 1; }
  .sidebar .sk-switcher .switcher-control > .sk-control { width: 100%; }
}

/* Reuse navigation's own boxes so its skeleton fits every sidebar/topbar layout. */
body.workspace-pending:is(.has-workspace-skeleton, #workspace-skeleton[hidden]) .sidebar {
  & :is(.brand-mark, .avatar, .side-cta, .side-cta-more > summary, .nav-fab) {
    background: var(--surface-3); box-shadow: none; color: transparent;
  }
  & :is(.brand-mark, .side-cta, .side-cta-more > summary, .nav-fab) > *,
  & :is(.account-chip-caret, .nav-badge, .dfm-pill) { visibility: hidden; }
  & .nav a { background: transparent; box-shadow: none; }
  & .nav a::before { display: none; }
  & :is(.nav a, .side-search, .sidebar-foot .side-btn) > .i {
    background: var(--surface-3); border-radius: 5px; color: transparent;
  }
  & :is(.nav a, .side-search, .sidebar-foot .side-btn) > .i > * { visibility: hidden; }
  & :is(.brand-text > *, .nav a > span, .side-search > span, .sidebar-foot .side-btn > span, .account-chip-text > span) {
    position: relative; visibility: hidden;
  }
  & :is(.brand-text > *, .nav a > span, .side-search > span, .sidebar-foot .side-btn > span, .account-chip-text > span)::after {
    content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 10px;
    transform: translateY(-50%); border-radius: 6px; background: var(--surface-3); visibility: visible;
  }
  & .brand-text strong::after { width: 75%; height: 12px; }
  & .brand-text small::after { width: 92%; height: 7px; }
  & .side-search > span::after { width: min(60px, 100%); }
  & .side-search > kbd { color: transparent; border-color: transparent; background: var(--surface-3); }
  & .account-chip-name::after { width: 72%; }
  & .account-chip-status::after { width: 55%; height: 8px; }
}