/* Shared in-app chrome (SH-APP-SHELL). Tokens reuse --sal-* from style.css. */
/* P4 compact tool header row. */
.sal-toolhead {
    --th-pad-x: .7rem; --th-pad-y: 8px; --th-gap: 12px; --th-gap-in: 8px;
    --th-gap-row: 4px; --th-gap-btn: .3rem; --th-icon: 24px;
    --th-bg: var(--surface, #fff); --th-text: var(--text, #282828);
    --th-muted: var(--muted, #5f5f5f); --th-rule: 1px solid var(--border, #ddd);
    display:grid; grid-template-columns:minmax(18rem,1fr) minmax(0,auto);
    grid-template-areas:"id act" "id io"; align-items:center; column-gap:var(--th-gap);
    row-gap:var(--th-gap-row); padding:var(--th-pad-y) var(--th-pad-x);
    background:var(--th-bg); color:var(--th-text); border-bottom:var(--th-rule);
    font-family:"Poppins","Segoe UI",system-ui,sans-serif; font-size:12.5px; line-height:1.25; box-sizing:border-box;
}
.sal-toolhead-id{grid-area:id;display:grid;grid-template-columns:var(--th-icon) minmax(0,1fr);column-gap:10px;row-gap:var(--th-gap-row);align-items:center;min-width:0}
.sal-toolhead-id>.sal-tool-icon{grid-row:1 / span 2;width:var(--th-icon);height:var(--th-icon);color:var(--sal-accent,#f89938)}
.sal-toolhead-line{display:flex;align-items:center;gap:var(--th-gap-in);min-width:0;white-space:nowrap}
.sal-toolhead-name{margin:0;font-size:15px;font-weight:600;letter-spacing:.005em;line-height:1.2}
.sal-toolhead .app-ver{display:inline-flex;align-items:center;font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--muted);text-decoration:none;border-radius:999px;padding:.12rem .5rem;border:1px solid var(--border);background:var(--surface);line-height:1;flex:0 0 auto}
.sal-toolhead-file{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--th-muted);font-weight:500;padding-left:var(--th-gap-in);border-left:var(--th-rule)}
.sal-toolhead-purpose{margin:0;min-width:0;color:var(--th-muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sal-toolhead-actions{grid-area:act;justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--th-gap-btn)}
.sal-toolhead-actions .app-shell-btn{gap:6px}.sal-toolhead-actions .app-shell-btn svg{width:16px;height:16px;flex:0 0 16px}
.sal-toolhead-help{display:flex;align-items:center;gap:var(--th-gap-btn);padding-left:var(--th-gap-in);margin-left:2px;border-left:var(--th-rule)}
.sal-toolhead-link{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 .3rem;color:var(--th-muted);font-size:12.5px;font-weight:550;text-decoration:underline;text-underline-offset:3px;background:none;border:0;cursor:pointer}
.sal-toolhead-link-form{display:inline-flex;margin:0}.sal-toolhead .sal-io{grid-area:io;justify-self:end;flex-wrap:nowrap}
@media(max-width:720px){.sal-toolhead{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "io" "act";row-gap:var(--th-gap-in)}.sal-toolhead-id{align-items:start}.sal-toolhead-id>.sal-tool-icon{grid-row:1;margin-top:1px}.sal-toolhead-line{flex-wrap:wrap;row-gap:2px;white-space:normal}.sal-toolhead-file{flex:1 1 100%;padding-left:0;border-left:0}.sal-toolhead-purpose{grid-column:1 / -1;white-space:normal}.sal-toolhead .sal-io{justify-self:start;flex-wrap:wrap}.sal-toolhead-actions{justify-self:stretch;justify-content:flex-start}.sal-toolhead-help{border-left:0;padding-left:0;margin-left:0}}
:root {
    /* SH-PROGRAM-LOOK: shared desktop-program frame and density contract.
       Keep these on :root because workspace chrome and standalone shells are
       siblings in several app layouts. */
    --menubar-frame-border: 1px solid var(--border, #3a3a3a);
    --content-frame-border: 1px solid var(--border, #3a3a3a);
    --main-pad: 10px;
    --main-align: start;
    --catalog-row-h: 32px;

    /* Self-contained hover pair for the menubar — do not read --sal-accent-soft/
       --on-accent directly. Viewers that skip style.css (SH-VIEWER-CHROME-CONTRAST,
       SH-UI-FIX-PASS) leave those undefined, so a raw var(...) falls back to the
       light-mode literal even under html[data-theme="dark"], and a dark-only text
       override used to repaint just the color — cream pill, white text, unreadable.
       Declared at :root (not .app-shell) because the real File menu renders inside
       .ws-strip-menu, a sibling of .app-shell, not a descendant (see app-chrome.css). */
    /* SH-MENU-HOVER-ALIGN: opaque cream + dark text (Viewer Issue A prove pair).
       Do not chain --sal-accent-soft — dark theme redefines it to translucent rgba. */
    --app-shell-menu-hover-bg: #fff4e8;
    --app-shell-menu-hover-text: #1c140c;
}
html[data-theme="dark"] {
    /* G3: dark theme keeps the light menubar labels readable over a restrained
       orange hover wash. */
    --app-shell-menu-hover-bg: rgba(255, 255, 255, .08);
    --app-shell-menu-hover-text: #f3f3f3;
}
html[data-theme="dark"] .app-shell-menu-btn:hover,
html[data-theme="dark"] .app-shell-menu-btn:focus-visible,
html[data-theme="dark"] .app-shell-menu-drop button:hover,
html[data-theme="dark"] .app-shell-menu-drop button:focus-visible,
html[data-theme="dark"] .app-shell-menu-drop a.app-shell-menu-item:hover,
html[data-theme="dark"] .app-shell-menu-drop a.app-shell-menu-item:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #f3f3f3;
}
.app-shell {
    position: relative;
    --app-shell-title-h: 32px;
    --app-shell-toolbar-h: 38px;
    --app-shell-status-h: 24px;
    --app-shell-charcoal: var(--sal-dark, #282828);
    --app-shell-paper: var(--bg, #f5f5f5);
    --app-shell-accent: var(--sal-accent, #f89938);
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    background: var(--app-shell-paper);
    color: var(--text);
}

html:has(body.app-shell-on) {
    height: auto;
    overflow: visible;
}
body.app-shell-on {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    background: var(--app-shell-paper);
}
body.app-shell-on .main-content.container,
body.app-shell-on .container.main-content {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}
body.app-shell-on .site-footer,
body.app-shell-on .sal-feedback {
    display: none;
}
body.app-shell-on .page-head,
body.app-shell-on .results-panel,
body.app-shell-on .tk-landing,
body.app-shell-on .sr-health-banner {
    display: none;
}
body.app-shell-on .testdesk-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0.18rem 0.7rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
}
body.app-shell-on .testdesk-banner-body {
    flex: 1 1 auto;
    min-width: 0;
}
body.app-shell-on .testdesk-banner.is-min .testdesk-banner-body {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 1.35em;
}
body.app-shell-on .banner-min {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--banner-border, rgba(180, 83, 9, 0.35));
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
body.app-shell-on .alert {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.25rem 0.7rem;
    border-radius: 0;
    font-size: 12px;
}

.app-shell-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--app-shell-title-h);
    padding: 0 0.7rem;
    background: var(--app-shell-charcoal);
    color: #f3f3f3;
    font-size: 12.5px;
    line-height: 1.2;
}
.app-shell-title-main {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
}
.app-shell-tool {
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.app-shell-file {
    color: #cfcfcf;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-shell-title-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}
.app-shell-back {
    color: #d0d0d0;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.app-shell-back:hover,
.app-shell-back:focus-visible {
    color: var(--app-shell-accent);
}

.app-shell-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-height: var(--app-shell-toolbar-h);
    padding: 0.2rem 0.55rem;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #ddd);
    font-size: 12.5px;
}
.app-shell-exports {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.app-shell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 0.55rem;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 550;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.app-shell-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}
.app-shell-btn:hover,
.app-shell-btn:focus-visible {
    border-color: var(--app-shell-accent);
    background: var(--sal-accent-soft, #fff4e8);
    color: var(--on-accent, #1c140c);
}
.app-shell-btn.is-disabled,
.app-shell-btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}
.app-shell-btn-primary {
    background: var(--app-shell-accent);
    border-color: var(--app-shell-accent);
    color: var(--on-accent, #1c140c);
    font-weight: 650;
}
.app-shell-btn-primary:hover,
.app-shell-btn-primary:focus-visible {
    background: var(--sal-accent-hover, #e0862a);
    border-color: var(--sal-accent-hover, #e0862a);
    color: var(--on-accent, #1c140c);
}
.app-shell-help-btn {
    margin-left: auto;
    width: 30px;
    padding: 0;
    font-weight: 700;
    font-size: 13px;
}
.app-shell-help-btn.has-label { width: auto; padding: 0 .55rem; }
.app-shell-help-btn.has-label { width: auto; padding: 0 .55rem; }

.app-shell-work {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--app-shell-paper);
}
.app-shell-doc {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    display: block;
    background: var(--app-shell-paper);
}
.app-shell-empty-work {
    margin: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}
.app-shell-split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(10rem, 1fr) minmax(10rem, 1fr);
}
.app-shell-pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    /* Split panes are document/result surfaces, rather than canvas hosts.
       They may therefore use the shared program frame and tight work inset. */
    border: var(--content-frame-border);
    text-align: left;
}
.app-shell-pane-head {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.55rem;
    min-height: 32px;
    padding: 0.15rem 0.55rem;
    border-bottom: 1px solid var(--border, #ddd);
    font-size: 12.5px;
    background: var(--surface, #fff);
}
.app-shell-pane-title {
    font-weight: 650;
    margin-right: 0.15rem;
    white-space: nowrap;
}
.app-shell-pane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--main-pad);
    text-align: left;
}
@media (min-width: 1100px) {
    .app-shell-split {
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    }
    .app-shell-pane + .app-shell-pane {
        border-top: var(--content-frame-border);
        border-left: var(--content-frame-border);
    }
}

.app-shell-status {
    flex: 0 0 auto;
    min-height: var(--app-shell-status-h);
    padding: 0.15rem 0.7rem;
    background: var(--app-shell-charcoal);
    color: #cfcfcf;
    font-size: 12px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell-drawer {
    position: fixed;
    top: var(--site-header-h, 4.75rem);
    right: 0;
    bottom: 0;
    width: min(28rem, 100%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border-left: 1px solid var(--border, #ddd);
    box-shadow: -8px 0 24px rgba(40, 40, 40, 0.12);
    transform: translateX(100%);
    transition: transform 0.16s ease;
}
.app-shell-drawer.is-open {
    transform: none;
}
.app-shell-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 36px;
    padding: 0.25rem 0.7rem;
    border-bottom: 1px solid var(--border, #ddd);
    font-size: 13px;
    font-weight: 600;
}
.app-shell-drawer-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0.7rem 0.85rem 1.2rem;
}
.app-shell-drawer-body .app-howto,
.app-shell-drawer-body .howto-fold,
.app-shell-drawer-body .howto-body {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.app-shell-drawer-body .howto-lede {
    font-size: 0.88rem;
    max-width: none;
}
.app-shell-drawer-body .howto-step h3 {
    font-size: 0.95rem;
    margin: 0.85rem 0 0.35rem;
}
.app-shell-drawer-body .howto-step p {
    font-size: 0.85rem;
    line-height: 1.4;
}
.app-shell-scrim {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 55;
    background: rgba(40, 40, 40, 0.28);
    border: 0;
    padding: 0;
    display: none;
    width: 100%;
    height: auto;
}
.app-shell-scrim.is-open {
    display: block;
}

.app-shell-open-pop {
    position: absolute;
    z-index: 40;
    top: calc(var(--app-shell-title-h) + var(--app-shell-toolbar-h) - 2px);
    left: 0.55rem;
    width: min(22rem, calc(100% - 1.1rem));
    padding: 0.7rem 0.75rem 0.8rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(40, 40, 40, 0.12);
}
.app-shell-open-pop.is-wide {
    width: min(36rem, calc(100% - 1.1rem));
    max-height: calc(100vh - var(--app-shell-title-h) - var(--app-shell-toolbar-h) - 1.5rem);
    overflow-y: auto;
}
body.app-shell-fill .app-shell-open-pop.is-health-options {
    position: fixed;
    z-index: 80;
    left: 0.75rem;
    width: min(42rem, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.app-shell-open-pop[hidden] {
    display: none !important;
}
.app-shell-open-pop .option-fieldset {
    margin: 0 0 0.55rem;
}
.app-shell-open-pop .tk-helper {
    margin: 0.35rem 0 0.45rem;
    font-size: 0.82rem;
}
.app-shell-open-pop .tk-continue {
    margin-top: 0.45rem;
}

.app-shell-quiet-help[hidden] {
    display: none !important;
}
.app-shell-quiet-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 0.35rem;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.app-shell-quiet-help:hover,
.app-shell-quiet-help:focus-visible {
    border-color: var(--app-shell-accent);
    background: var(--sal-accent-soft, #fff4e8);
}
body.app-shell-empty .page-head-main {
    align-items: center;
}

.app-shell-reset-form[hidden] {
    display: none !important;
}
.app-shell-confirm {
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: var(--surface, #fff);
    color: inherit;
    max-width: 28rem;
}
.app-shell-confirm::backdrop {
    background: rgba(40, 40, 40, 0.35);
}
.app-shell-confirm p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}
.app-shell-confirm-actions {
    display: flex;
    gap: 0.45rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* Shared menubar + SAL Apps cascade (SH-ENTERPRISE-CHROME Hop 0).
   Pair --table-head/--surface with --text (Builder/site tokens). Viewers that
   paint a dark canvas must define those chrome tokens or menubar goes
   light-on-light (SH-VIEWER-CHROME-CONTRAST). */
.app-shell-menubar {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 4px;
    background: var(--table-head, var(--surface, #fff));
    color: var(--text, #282828);
    /* Standalone shell owns this frame. Workspace menus explicitly transfer
       ownership to their full-width strip row in app-chrome.css. */
    border: var(--menubar-frame-border);
    position: relative;
    /* Keep the open menu above adjacent result/download panels and tool
       surfaces. The menubar is a chrome layer, not part of the work area. */
    z-index: 45;
    user-select: none;
    font-size: 12.5px;
}
.app-shell-menu {
    position: relative;
}
.app-shell-menu-btn {
    min-height: 40px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    padding: 0 10px;
    cursor: default;
}
.app-shell-menu-btn:hover,
.app-shell-menu-btn:focus-visible,
.app-shell-menu-btn[aria-expanded="true"],
.app-shell-menu-btn.is-open,
.app-shell-menu-btn.open {
    background: var(--app-shell-menu-hover-bg);
    color: var(--app-shell-menu-hover-text);
    outline: none;
}
.app-shell-menu-drop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 70;
    min-width: 230px;
    max-height: calc(100vh - var(--site-header-h, 76px) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3px 0;
    border: 1px solid var(--border, #ddd);
    background: var(--surface, #fff);
    color: var(--text, #282828);
    box-shadow: 0 4px 16px rgba(40, 40, 40, 0.18);
}

/* SK4: keep project codes intact while leaving a predictable gap before the
   task-count annotation. */
.tk-health-project-options .tk-health-project-option {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    white-space: nowrap;
}
.app-shell-menu-drop[hidden] {
    display: none !important;
}
.app-shell-menu-drop .app-shell-menu-control {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.2;
    color: inherit;
    white-space: nowrap;
}
.app-shell-menu-drop .app-shell-menu-control .view-select {
    min-width: 0;
    max-width: 12rem;
    font: inherit;
}
.app-shell-menu-drop button,
.app-shell-menu-drop a.app-shell-menu-item,
.app-shell-fly-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
    position: relative;
}
.app-shell-menu-drop button:hover,
.app-shell-menu-drop button:focus-visible,
.app-shell-menu-drop a.app-shell-menu-item:hover,
.app-shell-menu-drop a.app-shell-menu-item:focus-visible,
.app-shell-fly-item:hover,
.app-shell-fly-item:focus-visible {
    background: color-mix(in srgb, var(--sal-accent, #f89938) 38%, var(--app-shell-menu-hover-bg));
    color: var(--app-shell-menu-hover-text);
    outline: none;
}
.app-shell-fly-item.is-locked {
    opacity: 0.45;
    cursor: not-allowed;
}
.app-shell-fly-item.is-locked:hover,
.app-shell-fly-item.is-locked:focus-visible {
    background: transparent;
}
.app-shell-fly-item.is-current {
    font-weight: 650;
}
.app-shell-menu-drop button:disabled,
.app-shell-menu-drop button[aria-disabled="true"] {
    opacity: 0.42;
    pointer-events: none;
}
.app-shell-menu-sep {
    height: 1px;
    margin: 3px 8px;
    background: var(--border, #ddd);
}
.app-shell-menu-sub {
    position: relative;
}
.app-shell-has-fly {
    justify-content: space-between;
}
.app-shell-menu-sub.is-open > .app-shell-has-fly {
    background: var(--app-shell-menu-hover-bg);
    color: var(--app-shell-menu-hover-text);
}
.app-shell-fly-caret {
    margin-left: 10px;
    color: var(--muted);
    font-size: 10px;
    flex: 0 0 auto;
}
.app-shell-menu-fly {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 71;
    min-width: 200px;
    max-height: min(80vh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3px 0;
    border: 1px solid var(--border, #ddd);
    background: var(--surface, #fff);
    color: var(--text, #282828);
    box-shadow: 0 4px 16px rgba(40, 40, 40, 0.18);
}
.app-shell-menu-fly[hidden] {
    display: none !important;
}
.app-shell-fly-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 3px;
}
.app-shell-fly-icon--blank {
    width: 16px;
    height: 16px;
}
.app-shell-fly-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-shell-fly-check {
    flex: 0 0 auto;
    margin-left: 6px;
    color: var(--app-shell-accent, #f89938);
    font-size: 11px;
}

@media (max-width: 720px) {
    .app-shell-menubar {
        flex-wrap: wrap;
    }
    .app-shell-status {
        white-space: normal;
        min-height: calc(var(--app-shell-status-h) + 10px);
    }
    .app-shell-file {
        max-width: 46vw;
    }
    .app-shell-drawer {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .sal-cycle-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem 0.2rem;
        overflow: visible;
        padding-bottom: 0.15rem;
    }
    .sal-cycle-step { min-width: 0; }
}

/* SH-CHROME-CONTRAST-EXPORT: never print/export program chrome as a fake schedule row */
@media print {
    .app-shell-title,
    .app-shell-menubar,
    .app-shell-toolbar,
    .app-shell-status,
    .app-shell-scrim,
    .app-shell-drawer,
    .app-shell-quiet-help,
    .sb-menubar,
    .testdesk-banner {
        display: none !important;
    }
    body.app-shell-on,
    .app-shell,
    .app-shell-work {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}
body.is-exporting .app-shell-title,
body.is-exporting .app-shell-menubar,
body.is-exporting .app-shell-toolbar,
body.is-exporting .app-shell-status,
body.is-exporting .app-shell-scrim,
body.is-exporting .app-shell-drawer,
body.export-mode .app-shell-title,
body.export-mode .app-shell-menubar {
    display: none !important;
}

/* SH-SCHED-HEALTH-FILL: result pages used height:auto, so the report iframe
   stayed a short box and the in-flow "SAL Quality check · …" strip sat on
   the tool. Fill the viewport; the strip stays under the report. */
html:has(body.app-shell-fill),
html:has(.ws-strip):has(body.app-shell-fill) {
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
}
body.app-shell-fill,
html:has(.ws-strip) body.app-shell-fill {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
body.app-shell-fill .ws-strip {
    position: relative;
    top: auto;
    flex: 0 0 auto;
}
body.sal-app.app-shell-fill .main-content.container,
body.app-shell-fill .main-content.container,
body.app-shell-fill .container.main-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
    padding: 0;
}
body.app-shell-fill .app-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
}
body.app-shell-fill .app-shell-work {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
body.app-shell-fill .app-shell-doc {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
}
body.app-shell-fill .app-shell-status {
    position: relative;
    bottom: auto;
    flex: 0 0 auto;
    z-index: 2;
}
@keyframes sal-dl-new-pulse {
    0%, 100% { transform: scale(1); }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 4px rgba(255, 170, 60, .55), 0 0 18px rgba(255, 170, 60, .8);
        filter: brightness(1.25);
    }
}

.sal-dl-new {
    animation: sal-dl-new-pulse 0.7s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
    .sal-dl-new {
        animation: none;
    }
}