/* shell.css - the application frame (app.js): view switching, the editor grid (top bar /
   tool strip / workspace / status bar), side panels (docked, or drawers under 1100px),
   the desk surface, the top bar and its compaction levels, the tool strip, the status bar,
   the drop overlay and the shell's small dialogs. Colours, fonts, radii and shadows come
   from tokens.css only. Safety orange (--accent, near-black on it) fills the current mode,
   the current tool and the Download split button; the drop overlay is an orange dashed frame. */

/* ------------------------------------------------------------------ frame */

html, body { height: 100%; }
body { margin: 0; overflow: hidden; }
body[data-view="editor"] { overscroll-behavior: none; }

#app {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}
#topbar    { grid-row: 1; }
#toolstrip { grid-row: 2; }
#workspace { grid-row: 3; }
#statusbar { grid-row: 4; }

/* Start screen: only #start is shown, and it scrolls. */
body[data-view="start"] #app {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body[data-view="start"] #app > :not(#start) { display: none !important; }
body[data-view="editor"] #start { display: none !important; }

/* Kit components set their own display; [hidden] must still win inside the shell. */
#topbar [hidden], #toolstrip [hidden], #statusbar [hidden] { display: none !important; }

/* ------------------------------------------------------------------ workspace */

#workspace {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "left center right";
    overflow: hidden;
    background: var(--desk);
}

#desk, #organizer {
    grid-area: center;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background-color: var(--desk);
    background-image: radial-gradient(circle, var(--desk-dot) 1.1px, transparent 1.6px);
    background-size: 24px 24px;
    background-position: 12px 12px;
    background-attachment: local;
}
#desk:focus { outline: none; }
#desk:focus-visible { box-shadow: inset 0 0 0 2px var(--ink-line); }

/* Pages mode swaps the desk for the organizer (pages.js decides the organizer's own layout). */
body:not([data-mode="pages"]) #organizer { display: none !important; }
body[data-mode="pages"] #desk { display: none !important; }

#left-panel, #right-panel {
    min-width: 0;
    min-height: 0;
    background: var(--surface);
    /* Not overflow:hidden: panel content already clips itself (.sb-pane, .props-panel),
       and clipping here would cut off the resize handle that straddles the panel edge. */
    overflow: visible;
}
#left-panel {
    grid-area: left;
    width: var(--left-w);
    border-right: 1px solid var(--line);
}
#right-panel {
    grid-area: right;
    width: var(--right-w);
    border-left: 1px solid var(--line);
}
body[data-mode="pages"] #left-panel { display: none !important; }

@media (min-width: 1100px) {
    body:not(.left-open) #left-panel { display: none; }
    body:not(.right-open) #right-panel { display: none; }
}

.shell-scrim { display: none; }

/* Narrow screens: the panels become drawers over the desk. */
@media (max-width: 1099.98px) {
    #workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "center";
    }
    #left-panel, #right-panel {
        grid-area: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 30;
        box-shadow: var(--shadow-pop);
        visibility: hidden;
        transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    }
    #left-panel {
        left: 0;
        width: min(var(--left-w), calc(100% - 56px));
        transform: translateX(-104%);
    }
    #right-panel {
        right: 0;
        width: min(var(--right-w), calc(100% - 48px));
        transform: translateX(104%);
    }
    body.left-open #left-panel,
    body.right-open #right-panel {
        visibility: visible;
        transform: none;
        transition: transform var(--dur) var(--ease), visibility 0s linear 0s;
    }
    .shell-scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 25;
        background: color-mix(in oklab, var(--desk) 62%, transparent);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur) var(--ease);
    }
    body.drawer-open .shell-scrim {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ------------------------------------------------------------------ shared bits */

.shell-divider {
    flex: none;
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background: var(--line);
}

.shell-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* The highlighter swipe: a skewed marker stroke across the lower half of the label. */
.shell-swipe {
    position: absolute;
    inset: -1px -5px -2px -4px;
    z-index: -1;
    border-radius: 2px 5px 3px 6px;
    background: var(--swipe);
    transform: skewX(-14deg) rotate(-1.5deg);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}
[aria-pressed="true"] > .shell-swipe,
[aria-pressed="true"] > .shell-mode-label > .shell-swipe { opacity: 1; }
/* dark mode: tokens.css already softens --swipe for white labels, so no extra dimming here */

/* ------------------------------------------------------------------ top bar */

#topbar {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    height: var(--topbar-h);
    padding: 0 12px 0 14px;
    background: var(--surface);
    box-shadow: var(--shadow-bar);
    font-family: var(--font-ui);
    color: var(--text);
}

.shell-top-left,
.shell-top-center,
.shell-top-right {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
}
/* the side groups clip (fitTopbar measures their overflow); the padding keeps focus rings visible */
.shell-top-left { gap: 10px; overflow: hidden; padding: 0 4px; margin: 0 -4px; }
.shell-top-center { justify-content: center; }
.shell-top-right { justify-content: flex-end; gap: 2px; overflow: hidden; padding: 0 4px; margin: 0 -4px; }

.shell-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    user-select: none;
}
/* "Bullet" heavy + "PDF" regular, both in the display face */
.shell-wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18.5px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
}
.shell-wordmark-pdf { font-weight: 400; }
.shell-brand-divider {
    flex: none;
    width: 1px;
    height: 20px;
    background: var(--line);
}

/* The Bullet PDF mark (start.js logoMark) - used here and on the start screen: an orange
   page with its corner folded over in the text colour (black on light, white on dark). */
.bullet-mark { flex: none; display: block; overflow: visible; color: var(--text); }
.bullet-mark-page { fill: var(--marker); }
.bullet-mark-fold { fill: currentColor; }

/* document name (click to rename) */
.shell-filename {
    display: inline-flex;
    align-items: baseline;
    flex: 0 1 auto;
    min-width: 72px;
    max-width: 320px;
    height: 32px;
    padding: 0 8px;
    margin-left: -4px;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text);
    font: 500 var(--fs-m)/32px var(--font-ui);
    text-align: left;
    cursor: text;
    transition: background-color var(--dur-fast) var(--ease);
}
.shell-filename:hover { background: var(--surface-3); }
.shell-filename:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.shell-filename-base {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shell-filename-ext { flex: none; color: var(--text-3); }
.shell-filename-input {
    flex: 0 1 280px;
    min-width: 96px;
    height: 32px;
    padding: 0 8px;
    margin-left: -4px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text);
    font: 500 var(--fs-m) var(--font-ui);
    outline: 2px solid var(--ink-soft);
    outline-offset: 0;
}

/* mode switcher */
.shell-modes {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius);
    background: var(--surface-2);
}
.shell-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font: 500 13.5px/1 var(--font-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.shell-mode:hover { background: var(--surface-3); color: var(--text); }
.shell-mode:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.shell-mode svg { flex: none; }
/* the current mode is a solid orange segment with near-black label and icon */
.shell-mode[aria-pressed="true"] {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-1), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.shell-mode[aria-pressed="true"]:hover { background: var(--accent-hover); color: var(--on-accent); }
.shell-mode[aria-pressed="true"] svg { color: currentColor; }
.shell-mode .shell-swipe { display: none; }
.shell-mode-label {
    position: relative;
    isolation: isolate;
    display: inline-block;
    padding: 0 1px;
}

.shell-mode-compact {
    display: none;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: 500 13.5px/1 var(--font-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}
.shell-mode-compact:hover { background: var(--surface-3); }
.shell-mode-compact:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* the current mode's icon on a small orange tile, like the mode switcher's orange segment */
.shell-mode-compact-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: -5px;
    border-radius: var(--radius-s);
    background: var(--accent);
    color: var(--on-accent);
}
.shell-mode-compact > svg { color: var(--text-3); }

/* zoom control */
.shell-zoom {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.shell-zoom-label {
    min-width: 54px;
    height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text);
    font: 500 12.5px/32px var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}
.shell-zoom-label:hover { background: var(--surface-3); }
.shell-zoom-label:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.shell-zoom-label:disabled { opacity: 0.4; pointer-events: none; }

#topbar .shell-more { display: none; }

/* primary split button: Download + caret */
.shell-download {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    margin-left: 8px;
}
.shell-download .shell-dl-main {
    position: relative;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* the caret is a kit icon button dressed as the primary button's second half */
#topbar .shell-download .shell-dl-caret {
    align-self: stretch;
    width: 32px;              /* the 32 px hit-target floor (ARCHITECTURE.md section 1) */
    height: auto;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-1), inset 0 -1px 0 rgba(0, 0, 0, 0.1),
                inset 1px 0 0 color-mix(in oklab, var(--on-accent) 26%, transparent);
    transition: background-color var(--dur-fast) var(--ease);
}
#topbar .shell-download .shell-dl-caret:hover { background: var(--accent-hover); color: var(--on-accent); }
#topbar .shell-download .shell-dl-caret:active { background: var(--accent-press); }
#topbar .shell-download .shell-dl-caret:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* changes not in a downloaded PDF yet */
.shell-dl-main.is-dirty::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: var(--pill);
    background: var(--on-accent);
    opacity: 0.85;
}

/* --- compaction levels (app.js fitTopbar) */

/* fit-1 also lets the side columns size to their content (the mode switcher then centres in
   the space between them), so a wide right group - Undo/Redo, zoom, Download - fits at
   1280px without hiding the wordmark */
#topbar.fit-1 { grid-template-columns: auto minmax(0, 1fr) auto; }
#topbar.fit-1 .shell-fold-1 { display: none; }
#topbar.fit-1 .shell-more { display: inline-flex; }

#topbar.fit-2 .shell-wordmark,
#topbar.fit-2 .shell-zoom-step,
#topbar.fit-2 .shell-fold-2 { display: none; }

#topbar.fit-3 .shell-mode:not([aria-pressed="true"]) .shell-mode-label { display: none; }
#topbar.fit-3 .shell-mode:not([aria-pressed="true"]) { padding: 0 9px; }

#topbar.fit-4 .shell-modes { display: none; }
#topbar.fit-4 .shell-mode-compact { display: inline-flex; }
#topbar.fit-4 .shell-dl-main .shell-btn-label { display: none; }

#topbar.fit-5 { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; }
#topbar.fit-5 .shell-mode-compact-label,
#topbar.fit-5 .shell-fold-5,
#topbar.fit-5 .shell-brand-divider { display: none; }

#topbar.fit-6 .shell-fold-6,
#topbar.fit-6 .shell-filename-ext { display: none; }
#topbar.fit-6 .shell-download { margin-left: 4px; }

@media (max-width: 699.98px) {
    #topbar { padding: 0 8px 0 10px; column-gap: 8px; }
    .shell-top-left { gap: 6px; }
}

/* ------------------------------------------------------------------ tool strip */

#toolstrip {
    position: relative;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--toolstrip-h);
    padding: 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    font-family: var(--font-ui);
}
#toolstrip::-webkit-scrollbar { display: none; }
#toolstrip > * { flex: none; }
#toolstrip > .shell-spacer { flex: 1 1 auto; min-width: 16px; }

#toolstrip .shell-tool {
    position: relative;
    isolation: isolate;
    width: 36px;
    height: 36px;
}
/* the current tool: a solid orange tile with a near-black icon (no swipe) */
#toolstrip .shell-tool > .shell-swipe,
#toolstrip .shell-tool[aria-pressed="true"]::before { display: none; }
#toolstrip .shell-tool[aria-pressed="true"] {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-1), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
#toolstrip .shell-tool[aria-pressed="true"]:hover { background: var(--accent-hover); color: var(--on-accent); }

.shell-group {
    display: inline-flex;
    align-items: center;
}
.shell-group-caret {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 36px;
    margin-left: -2px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.shell-group-caret:hover { background: var(--surface-3); color: var(--text); }
.shell-group-caret:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* panel toggles (sidebar, Style): a quiet pressed state - the swipe is for tools only */
#toolstrip .shell-panel-toggle.is-on {
    background: var(--ink-soft);
    color: var(--ink);
}

#toolstrip .shell-action { white-space: nowrap; }
#toolstrip .shell-action[aria-pressed="true"] { background: var(--ink-soft); color: var(--ink); }

@media (max-width: 1279.98px) {
    #toolstrip .shell-action .shell-btn-label { display: none; }
}
@media (max-width: 699.98px) {
    #toolstrip { padding: 0 6px; }
    #toolstrip .shell-style-btn .shell-btn-label { display: none; }
    #toolstrip > .shell-spacer { min-width: 8px; }
}

/* page navigation (View mode) */
.shell-pagenav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.shell-pagenum {
    box-sizing: content-box;
    min-width: 2ch;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background: var(--surface-2);
    color: var(--text);
    font: 500 12.5px/28px var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.shell-pagenum:focus {
    outline: 2px solid var(--ink);
    outline-offset: 0;
    border-color: var(--ink);
    background: var(--surface);
}
.shell-pagenav-total {
    padding: 0 6px 0 4px;
    color: var(--text-3);
    font: 12.5px var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ status bar */

#statusbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--status-h);
    padding: 0 12px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font: var(--fs-xs)/1 var(--font-ui);
    white-space: nowrap;
    overflow: hidden;
}
#statusbar .shell-num { font-size: 11px; }
.shell-status-page {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    height: 22px;
    padding: 0 6px;
    margin: 0 -6px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease);
}
.shell-status-page:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.shell-status-page:disabled { cursor: default; }
.shell-status-page:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.shell-status-zoom { color: var(--text-3); }
/* The hint takes the room the other items leave, whatever its text (flex-basis 0). app.js
   fitStatusHint() cuts a hint that does not fit at a word boundary, with the full text in a
   tooltip; text-overflow is only the safety net for a sub-pixel overflow. */
.shell-status-hint {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shell-status-save,
.shell-status-privacy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
}
.shell-status-save[data-state="saved"] svg { color: var(--green); }
.shell-status-save[data-state="failed"] { color: var(--amber); }
.shell-status-privacy svg { color: var(--text-3); }
.shell-status-rev {
    flex: none;
    color: var(--text-3);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

@media (max-width: 699.98px) {
    #statusbar { gap: 12px; padding: 0 10px; }
    .shell-status-zoom,
    .shell-status-hint,
    .shell-status-rev,
    .shell-status-privacy-text { display: none; }
    .shell-status-save { margin-left: auto; }
}

/* ------------------------------------------------------------------ drop overlay (editor) */

.shell-drop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: var(--accent-soft);
    outline: 2.5px dashed var(--accent-line);
    outline-offset: -12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
body.shell-dragging[data-view="editor"] .shell-drop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-fast) var(--ease), visibility 0s linear 0s;
}
.shell-drop-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--radius-l);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    color: var(--text);
    font: 600 15px var(--font-ui);
}
.shell-drop-card svg { color: var(--accent-line); }

/* ------------------------------------------------------------------ dialogs (content only) */

/* drop choices */
.shell-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shell-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.shell-choice:hover { border-color: var(--ink-line); background: var(--surface-2); }
.shell-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.shell-choice-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-s);
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.shell-choice:hover { border-color: var(--accent-line); }
.shell-choice-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.shell-choice-label { font-size: var(--fs-m); font-weight: 600; }
.shell-choice-hint { font-size: var(--fs-s); color: var(--text-3); }

/* open errors */
.shell-error p { margin: 0; }
.shell-error-message { color: var(--text); font-size: var(--fs-m); line-height: 1.5; }
.shell-error-hint { margin-top: 8px !important; color: var(--text-3); font-size: var(--fs-s); line-height: 1.5; }

/* new blank document */
.shell-newdoc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 20px;
    align-items: center;
}
.shell-newdoc-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.shell-newdoc-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.shell-newdoc-frame {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border-radius: var(--radius);
    background: var(--desk);
}
.shell-newdoc-page {
    position: relative;
    max-width: 76px;
    max-height: 76px;
    background: var(--paper);
    border-radius: 2px;
    box-shadow: var(--shadow-page);
}
.shell-newdoc-page.is-stack {
    box-shadow: var(--shadow-page), 4px 4px 0 -1px var(--paper), 4px 4px 0 0 var(--line-strong);
}
.shell-newdoc-caption {
    margin: 0;
    color: var(--text-3);
    font: 11px/1.4 var(--font-mono);
    text-align: center;
}
@media (max-width: 479.98px) {
    .shell-newdoc { grid-template-columns: minmax(0, 1fr); }
    .shell-newdoc-preview { display: none; }
}