/* =====================================================================
   Bitbook's OneNote layout! (body.os-office) Purple chrome, a page list,
   a OneNote page header (title + date), page colors and rule lines.
   The note itself keeps every Bitbook style, chip and skill!
   ===================================================================== */

body.os-office {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    background: #f5f2f8;
    color: #252525;
}
body.os-office.os-dark { background: #1d1a21; }
body.os-office #os-top { grid-column: 1 / -1; grid-row: 1; }
body.os-office #os-status { grid-column: 1 / -1; grid-row: 3; }

/* Page list: the Bitbook sidebar's Notes + Outline, OneNote style! */
body.os-office #sidebar {
    grid-column: 1;
    grid-row: 2;
    width: 240px;
    height: auto;
    max-height: none;
    transform: none !important;
    padding: 12px 10px 10px;
    background: #f1ebf6;
    border-right: 1px solid #e0d4ea;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 5;
    animation: osFade 0.3s;
}
body.os-office.os-dark #sidebar { background: #26212c; border-right-color: #3a3142; }
body.os-office.bb-nav-off #sidebar, body.os-office.bb-full #sidebar { display: none; }
body.os-office #sidebar::before {
    content: "Notebook";
    font-family: var(--os-brand-font);
    font-weight: 800;
    font-size: 15px;
    color: var(--os-accent);
    padding: 0 6px 8px;
}
body.os-office.os-dark #sidebar::before { color: #d8b4fe; }
body.os-office #sidebar .sidebar-brand,
body.os-office #sidebar .pad-selection-stack,
body.os-office #sidebar .sidebar-footer-controls,
body.os-office #sidebar #toggle-zone { display: none !important; }
body.os-office .side-scroll-box { margin: 0; }
body.os-office .outline-heading { color: var(--os-dim); border-bottom-color: #e0d4ea; font-size: 11px; }
body.os-office .outline-toggle { color: var(--os-dim); border-color: #e0d4ea; }
body.os-office .outline-toggle:hover { background: #e6dcef; color: var(--os-text); }
body.os-office .outline-item { color: var(--os-text); font-family: var(--os-font); font-size: 13px; font-weight: 500; padding: 7px 10px; transition: background 0.14s, padding 0.2s var(--os-spring); }
body.os-office .outline-item:hover { background: #e6dcef; color: var(--os-text); padding-left: 14px; }
body.os-office.os-dark .outline-item:hover { background: #3a3142; }
body.os-office .outline-item.active {
    color: #fff;
    border-color: var(--os-accent-d);
    background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 50%, var(--os-accent) 52%, var(--os-accent-d) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 6px rgba(119, 25, 170, 0.3);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
body.os-office .outline-empty { color: var(--os-dim); }
body.os-office .tab-rename-input { background: #fff; color: #222; border-color: var(--os-accent); }
body.os-office .tabs-list, body.os-office .outline-list { max-height: none; }
body.os-office .outline-section { margin-top: 12px; }

/* Format pane keeps its purple glass soul! */
body.os-office #format-sidebar {
    grid-column: 3;
    grid-row: 2;
    position: relative;
    top: auto;
    right: auto;
    height: auto;
    width: 250px;
    transform: none !important;
    display: none;
    z-index: 5;
}
body.os-office.bb-pane-on #format-sidebar { display: flex; animation: osFade 0.3s; }
body.os-office.bb-full #format-sidebar { display: none; }
body.os-office #format-toggle-zone { display: none !important; }

/* The page: full-width, OneNote style, with a title + date header! */
body.os-office .workspace-viewport-wrapper {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    gap: 0;
    z-index: 1;
}
body.os-office #top-format-bar { display: none !important; }
body.os-office .canvas-scrollbox {
    background: var(--on-page, #fff);
    padding: 0;
    transition: background 0.3s;
}
body.os-office.os-dark .canvas-scrollbox:not(.on-colored) { background: #1e1e1e; }
body.os-office .ambient-droplet { z-index: 0; opacity: 0.5; }

#on-page-head { display: none; }
body.os-office #on-page-head {
    display: block;
    flex: none;
    padding: 28px 48px 6px;
    position: relative;
    z-index: 3;
}
body.os-office #on-page-head.on-head-in { animation: onHeadIn 0.4s var(--os-spring); }
@keyframes onHeadIn { from { opacity: 0; transform: translateY(-10px); } }
#on-title {
    width: min(100%, 640px);
    border: 0;
    border-bottom: 1px solid #d9cfe2;
    background: transparent;
    font: 600 28px var(--os-font);
    color: var(--os-text);
    padding: 2px 0 6px;
    outline: none;
    transition: border-color 0.2s;
}
#on-title:focus { border-bottom-color: var(--os-accent); }
#on-title::placeholder { color: #b7a9c4; }
#on-date { font: 12.5px var(--os-font); color: var(--os-dim); padding-top: 6px; white-space: pre; }
body.os-office.os-dark #on-title { color: #f3f3f3; border-bottom-color: #4a3f55; }

body.os-office #wysiwyg-canvas {
    max-width: none;
    width: 100%;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 48px 120px;
}
/* Plain pages show the page color + rule lines (canvas themes keep their own look!) */
body.os-office #wysiwyg-canvas:not([class*="mkt-theme"]) {
    background-color: transparent;
    background-image: var(--on-lines, none);
    background-size: var(--on-lines-size, auto);
    background-position: 0 14px;
    background-attachment: local;
}

/* Bitbook's purple scroll rail hugs the page's right edge, under the ribbon! */
body.os-office { --bb-top: 170px; }
body.os-office.os-ribbon-min { --bb-top: 73px; }
body.os-office.bb-full { --bb-top: 0px; }
body.os-office #doc-jumper-rail { top: var(--bb-top); bottom: 26px; right: 0; transition: top 0.25s var(--os-ease); }
body.os-office.bb-pane-on #doc-jumper-rail { right: 250px; }

/* Full Page View: just the page! */
body.os-office.bb-full #os-top { display: none; }
body.os-office.bb-full #os-status { opacity: 0.35; transition: opacity 0.2s; }
body.os-office.bb-full #os-status:hover { opacity: 1; }

body.os-office #aero-selection-toolbar, body.os-office #aero-block-toolbar { z-index: 40; }

/* Ribbon gallery previews! */
.bb-gp { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 13px; display: block; padding: 4px 0 2px; }
.bb-gp-h1 { color: #9333ea; font-weight: 800; font-size: 15px; }
.bb-gp-h2 { color: #c026d3; font-weight: 700; font-size: 14px; }
.bb-gp-h3 { color: #7c3aed; font-weight: 700; }
.bb-gp-q { color: #6b21a8; font-style: italic; border-left: 3px solid #9333ea; padding-left: 4px; }
.bb-gp-c { background: #ede9fe; border-radius: 3px; padding: 2px 3px; color: #5b21b6; }
body.os-dark .bb-gp-p { color: #e5e5e5; }
.bb-style-gal .os-gal-list { max-width: 262px; }
.bb-tag-gal .os-gal-item { width: 64px; }
.bb-tag-gal .os-gal-list { max-width: 268px; }
.bb-tg {
    font-style: normal;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 3px rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s var(--os-spring);
}
.os-gal-item:hover .bb-tg { transform: scale(1.15) rotate(-6deg); }
.bb-tg-todo { background: linear-gradient(180deg, #93c5fd, #2563eb); }
.bb-tg-imp { background: linear-gradient(180deg, #fde68a, #f59e0b); }
.bb-tg-idea { background: linear-gradient(180deg, #fef9c3, #facc15); font-size: 13px; }
.bb-tg-contact { background: linear-gradient(180deg, #86efac, #16a34a); }
.bb-tg-user { background: linear-gradient(180deg, #d8b4fe, #9333ea); }
.bb-tg-hash { background: linear-gradient(180deg, #f9a8d4, #db2777); }
.bb-tg-date { background: linear-gradient(180deg, #e9d5ff, #a78bfa); font-size: 12px; }
.bb-tg-drop { background: linear-gradient(180deg, #cbd5e1, #64748b); }
.os-swatches.bb-sw-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 6px 8px 8px; }
.os-swatches.bb-sw-grid .os-swatch { width: 40px; height: 28px; font: 700 12px 'JetBrains Mono', monospace; border-radius: 6px; }

.bb-bs-doc { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--os-menu-line); border-radius: 10px; max-width: 560px; }
.bb-bs-doc img { width: 36px; height: 36px; }
.bb-bs-doc div { display: flex; flex-direction: column; gap: 3px; }
.bb-bs-doc span { color: var(--os-dim); font-size: 12.5px; }
.bb-wc { border-collapse: collapse; min-width: 300px; margin: 4px 0 20px; font-size: 14px; }
.bb-wc td { padding: 6px 10px; border-bottom: 1px solid var(--os-menu-line); }
.bb-wc td:last-child { text-align: right; }

.bb-classic-cards { margin: 6px 0 10px; }
.bb-classic-cards .os-lay-card { width: calc(50% - 8px); min-width: 200px; background: rgba(255, 255, 255, 0.6); }

@media (max-width: 980px) { body.os-office.bb-pane-on #format-sidebar { display: none; } }
@media (max-width: 760px) {
    body.os-office #sidebar { display: none; }
    body.os-office #on-page-head { padding: 18px 18px 4px; }
    body.os-office #wysiwyg-canvas { padding: 12px 18px 80px; }
}
@media print {
    body.os-office { display: block !important; height: auto; }
    #on-page-head { display: none !important; }
}

/* No OneNote page title header: the canvas is exactly Bitbook's own! (Rename pages from the title bar or the page list.) */
#on-page-head { display: none !important; }

/* Phone mode: the note fills the screen, the side panes step aside, and the Jumper rail slims down */
body.os-office.os-phone #format-sidebar, body.os-office.os-phone #bb-nav, body.os-office.os-phone .bb-notebook-pane { display: none !important; }
body.os-office.os-phone .workspace-viewport-wrapper { grid-column: 1 / -1; }
body.os-office.os-phone #wysiwyg-canvas { padding-left: 14px !important; padding-right: 22px !important; }
body.os-office.os-phone #doc-jumper-rail { width: 8px !important; }

/* Phone mode: the page list slides in over the page as a drawer */
body.os-office.os-phone:not(.bb-nav-off):not(.bb-full) #sidebar {
    display: flex !important; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 84vw); z-index: 70;
    overflow-y: auto; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35), 6px 0 24px rgba(0, 0, 0, 0.3); animation: osPhoneDrawer 0.28s var(--os-ease);
}
@keyframes osPhoneDrawer { from { transform: translateX(-100%); } }

/* ---------- Gel Chips menu (the Bubble Chip's cousins): an icon grid, then the color variants with live previews ---------- */
.bb-chipmenu { width: 300px; padding: 2px 8px 8px; }
.bb-chipmenu-head { display: flex; align-items: center; gap: 8px; padding: 6px 2px 6px; font-size: 11px; font-weight: 700; color: var(--os-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.bb-chipmenu-back { border: 0; background: transparent; color: inherit; font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
.bb-chipmenu-back:hover { background: var(--os-hover, rgba(127, 127, 127, 0.18)); }
.bb-chip-fams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bb-chip-fam { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 7px; border: 1px solid var(--os-menu-line); border-radius: 9px; background: transparent; color: inherit; cursor: pointer; font: 600 11px system-ui, sans-serif; transition: transform 0.15s, background 0.15s, border-color 0.15s; }
.bb-chip-fam:hover { background: var(--os-hover, rgba(127, 127, 127, 0.14)); transform: translateY(-1px); border-color: rgba(127, 127, 127, 0.5); }
.bb-chip-fam svg { display: block; }
.bb-chip-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bb-chip-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 2px 6px; min-height: 62px; border: 1px solid var(--os-menu-line); border-radius: 9px; background: transparent; color: inherit; cursor: pointer; overflow: visible; transition: transform 0.15s, background 0.15s; }
.bb-chip-col:hover { background: var(--os-hover, rgba(127, 127, 127, 0.14)); transform: scale(1.05); z-index: 1; }
.bb-chip-col > span { font: 800 12px 'JetBrains Mono', monospace; pointer-events: none; }
.bb-chip-col small { font-size: 10px; color: var(--os-dim); }

/* ========================================================
   PAGES (Print Layout), the same real pages as Writeout: View > Pages shows the note as separate sheets on a desk.
   A page is a page break (::pagebreak, Ctrl/Cmd+Enter); the sheets sit behind a see-through canvas.
   ======================================================== */
#bb-zoomer, #bb-pagebox { display: contents; }
#bb-sheets { display: none; }
body.os-office.bb-pages .canvas-scrollbox { background: #d8d3df !important; padding: 0 16px; overflow-x: auto; scroll-behavior: auto; }
body.os-office.os-dark.bb-pages .canvas-scrollbox { background: #16141a !important; }
body.os-office.bb-pages #bb-zoomer { display: block; position: relative; margin: 26px auto 46px; width: var(--bb-pw); flex: none; }
body.os-office.bb-pages #bb-pagebox { display: block; position: relative; }
/* the title and date sit on the desk, above the first sheet */
body.os-office.bb-pages #on-page-head { padding: 0 2px 12px; }
body.os-office.bb-pages #on-title { width: 100%; max-width: none; }
body.os-office.bb-pages #on-date { color: #5f5970; }
body.os-office.bb-pages.os-dark #on-date { color: #aaa2b8; }
body.os-office.bb-pages #bb-sheets { display: block; position: absolute; left: 0; top: 0; width: var(--bb-pw); height: 0; z-index: 0; pointer-events: none; }
.bb-sheet {
    position: absolute;
    left: 0;
    width: var(--bb-pw);
    height: var(--bb-ph);
    background: var(--bb-sheet-bg, #fff);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 8px 26px rgba(0, 0, 0, 0.11);
}
.bb-pnum {
    position: absolute; left: 0; right: 0; bottom: calc(var(--bb-mb) / 2 - 8px);
    text-align: center; font: 600 11px var(--os-brand-font, system-ui); color: rgba(100, 116, 139, 0.75); display: none;
}
body.bb-numbers .bb-pnum { display: block; }
body.os-office.bb-pages #wysiwyg-canvas {
    position: relative;
    z-index: 1;
    width: var(--bb-pw) !important;
    max-width: none !important;
    min-height: var(--bb-total-h, var(--bb-ph)) !important;
    padding: var(--bb-mt) var(--bb-ms) var(--bb-mb) !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    flex: none !important;
}
@media print {
    body.os-office #bb-zoomer { display: block; margin: 0 !important; width: auto !important; zoom: 1 !important; height: auto !important; min-height: 0 !important; }
    body.os-office #bb-sheets, body.os-office #doc-jumper-rail { display: none !important; }
    body.os-office .workspace-viewport-wrapper, body.os-office .canvas-scrollbox { padding: 0 !important; margin: 0 !important; zoom: 1 !important; }
    body.os-office.bb-pages #wysiwyg-canvas, body.os-office.bb-web #wysiwyg-canvas {
        width: 100% !important; max-width: none !important; margin: 0 !important; padding: var(--bb-mt) var(--bb-ms) var(--bb-mb) !important; box-sizing: border-box !important;
        box-decoration-break: clone; -webkit-box-decoration-break: clone;
        font-size: var(--bb-print-fs, 16px) !important; min-height: 0 !important; height: auto !important;
        box-shadow: none !important; background: #fff !important;
    }
}
/* Print Preview: the sheets sit edge to edge at their real size, with a thin line where each page ends */
body.bb-preview .bb-sheet { border-radius: 0; border-bottom: 1px solid #94a3b8; }
body.bb-preview #bb-zoomer { margin-top: 16px; }
}
/* Phone mode: the text fills the screen instead of paper pages (Print Layout comes back on a bigger screen) */
body.os-office.os-phone.bb-pages #bb-zoomer { width: 100% !important; margin: 10px 0 28px; }
body.os-office.os-phone #bb-sheets { display: none !important; }
body.os-office.os-phone.bb-pages #wysiwyg-canvas { width: 100% !important; min-height: 70vh !important; padding: 20px 16px 40px !important; background: var(--bb-sheet-bg, #fff) !important; border-radius: 10px !important; }

/* Changing between tabs lives in File > Tabs (File > Notes in Bitbook): the side pane keeps only the Pages list */
body.os-office .tabs-section { display: none; }

/* Color previews are for the screen only: paper always prints in the real colors */
@media print { #bb-zoomer { filter: none !important; } }

/* Page numbers on paper: a layer of labels, one at the foot of every printed page (written by printNumbersOn when printing starts) */
.bb-print-nums { display: none; }
@media print {
    body.os-office.bb-printnums #bb-zoomer { position: relative !important; }
    body.os-office.bb-pages.bb-printnums #wysiwyg-canvas { min-height: var(--bb-print-h) !important; }
    .bb-print-nums { display: block; position: absolute; left: 0; top: 0; width: 100%; height: var(--bb-print-h); pointer-events: none; z-index: 2; }
    .bb-print-nums span { position: absolute; left: 0; right: 0; text-align: center; transform: translateY(-100%); margin-top: calc(var(--bb-mb) / -2 + 8px); font: 600 11px var(--os-brand-font, system-ui), sans-serif; color: #64748b; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}