/* =========================================================================
   Notebook Studio — stylesheet
   Layout: app header  ->  ribbon  ->  [sections | pages | editor]
   ========================================================================= */

:root {
  --onc-purple: #7719aa;
  --onc-purple-dark: #5c1483;
  --onc-purple-light: #f3e8fa;
  --onc-accent: #8324b3;
  --onc-bg: #faf9fb;
  --onc-panel: #ffffff;
  --onc-panel-2: #f5f4f6;
  --onc-border: #e3e1e6;
  --onc-border-strong: #cfccd4;
  --onc-text: #201f24;
  --onc-text-dim: #6b6870;
  --onc-hover: #efedf2;
  --onc-selected: #e7dcf1;
  --onc-selected-bar: #7719aa;
  --onc-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --onc-radius: 6px;
  --onc-header-h: 44px;
  --onc-ribbon-h: 132px;

  /* section tab colors */
  --sec-1: #d13438; --sec-2: #ca5010; --sec-3: #986f0b; --sec-4: #498205;
  --sec-5: #038387; --sec-6: #0078d4; --sec-7: #5c2e91; --sec-8: #881798;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--onc-text);
  background: var(--onc-bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#onc-root { height: 100vh; display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ header */
.onc-header {
  height: var(--onc-header-h);
  min-height: var(--onc-header-h);
  background: var(--onc-purple);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 14px;
  user-select: none;
}
.onc-header .onc-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; letter-spacing: .2px;
}
.onc-header .onc-logo svg { width: 22px; height: 22px; }
.onc-notebook-picker {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; padding: 5px 10px; border-radius: 4px; cursor: pointer;
  font-size: 13px; max-width: 260px;
}
.onc-notebook-picker:hover { background: rgba(255,255,255,.24); }
.onc-notebook-picker .nb-dot { width: 10px; height: 10px; border-radius: 2px; background: #fff; }
.onc-notebook-picker .nb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onc-header .onc-spacer { flex: 1; }
.onc-search {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 4px; padding: 4px 8px; width: 260px;
}
.onc-search input {
  border: 0; outline: 0; flex: 1; font-size: 13px; color: var(--onc-text); background: transparent;
}
.onc-search svg { width: 15px; height: 15px; color: var(--onc-text-dim); }
.onc-header .onc-user {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.22); display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}

/* ------------------------------------------------------------------ ribbon */
.onc-ribbon {
  background: var(--onc-panel);
  border-bottom: 1px solid var(--onc-border);
}
.onc-ribbon-tabs {
  display: flex; gap: 2px; padding: 4px 8px 0;
  border-bottom: 1px solid var(--onc-border);
}
.onc-ribbon-tab {
  padding: 6px 14px; font-size: 13px; cursor: pointer; border-radius: 4px 4px 0 0;
  color: var(--onc-text-dim); position: relative; top: 1px;
}
.onc-ribbon-tab:hover { background: var(--onc-hover); }
.onc-ribbon-tab.active {
  color: var(--onc-purple); font-weight: 600;
  background: var(--onc-panel); border: 1px solid var(--onc-border); border-bottom: 1px solid var(--onc-panel);
}
.onc-ribbon-panels { height: calc(var(--onc-ribbon-h) - 30px); }
.onc-ribbon-panel { display: none; height: 100%; align-items: stretch; padding: 6px 8px; gap: 4px; overflow-x: auto; overflow-y: hidden; }
.onc-ribbon-panel.active { display: flex; }

.onc-group { display: flex; flex-direction: column; padding: 0 8px; border-right: 1px solid var(--onc-border); }
.onc-group:last-child { border-right: 0; }
.onc-group-row { display: flex; align-items: center; gap: 3px; flex: 1; flex-wrap: wrap; align-content: center; max-width: 260px; }
.onc-group-label { font-size: 11px; color: var(--onc-text-dim); text-align: center; padding-top: 2px; }

.onc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 30px; height: 30px; padding: 0 7px; border: 1px solid transparent;
  background: transparent; border-radius: 4px; cursor: pointer; font-size: 13px;
  color: var(--onc-text); user-select: none;
}
.onc-btn:hover { background: var(--onc-hover); border-color: var(--onc-border); }
.onc-btn.active { background: var(--onc-selected); border-color: var(--onc-border-strong); }
.onc-btn svg { width: 16px; height: 16px; }
.onc-btn.big { flex-direction: column; justify-content: center; height: 100%; min-width: 56px; gap: 3px; font-size: 11px; padding: 4px 8px; white-space: nowrap; }
.onc-btn.big svg { width: 20px; height: 20px; }
.onc-btn[disabled] { opacity: .4; pointer-events: none; }

.onc-select { height: 30px; border: 1px solid var(--onc-border); border-radius: 4px; background: #fff; font-size: 13px; padding: 0 4px; }
.onc-color-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); display: inline-block; }
.onc-btn .caret { width: 8px; height: 8px; opacity: .6; }

/* ------------------------------------------------------------------ body / panes */
.onc-body { flex: 1; display: flex; min-height: 0; }

.onc-pane { display: flex; flex-direction: column; min-height: 0; background: var(--onc-panel); }
.onc-pane-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--onc-text-dim);
  text-transform: uppercase; letter-spacing: .4px;
}
.onc-pane-header .onc-add {
  cursor: pointer; color: var(--onc-purple); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0;
}
.onc-pane-header .onc-add:hover { text-decoration: underline; }
.onc-list { flex: 1; overflow-y: auto; padding: 2px 6px 12px; }

/* sections pane */
.onc-pane.sections { width: 200px; min-width: 150px; border-right: 1px solid var(--onc-border); background: var(--onc-panel-2); }
.onc-section {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 5px;
  cursor: pointer; position: relative; margin-bottom: 2px;
}
.onc-section:hover { background: var(--onc-hover); }
.onc-section.selected { background: var(--onc-selected); font-weight: 600; }
.onc-section .sec-color { width: 5px; align-self: stretch; border-radius: 3px; }
.onc-section .sec-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onc-section .sec-count { font-size: 11px; color: var(--onc-text-dim); }

/* pages pane */
.onc-pane.pages { width: 240px; min-width: 170px; border-right: 1px solid var(--onc-border); }
.onc-page-item {
  padding: 8px 10px 8px 16px; border-radius: 5px; cursor: pointer; position: relative;
  margin-bottom: 1px; border-left: 3px solid transparent;
}
.onc-page-item:hover { background: var(--onc-hover); }
.onc-page-item.selected { background: var(--onc-selected); border-left-color: var(--onc-selected-bar); }
.onc-page-item.level-1 { padding-left: 30px; }
.onc-page-item .pg-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onc-page-item .pg-date { font-size: 11px; color: var(--onc-text-dim); margin-top: 2px; }
.onc-page-item.selected .pg-title { font-weight: 600; }

/* editor pane */
.onc-pane.editor { flex: 1; min-width: 0; background: var(--onc-panel); position: relative; }
.onc-editor-scroll { flex: 1; overflow: auto; position: relative; }
.onc-page-surface { position: relative; min-height: 1400px; min-width: 900px; padding: 30px 44px 200px; }
.onc-page-titlebar { max-width: 900px; margin-bottom: 4px; }
.onc-page-title {
  font-size: 30px; font-weight: 400; color: var(--onc-text); border: 0; outline: 0;
  width: 100%; background: transparent; padding: 4px 0; font-family: inherit;
}
.onc-page-title::placeholder { color: #c9c6cf; }
.onc-page-meta { color: var(--onc-text-dim); font-size: 12px; padding: 2px 0 10px; border-bottom: 1px solid transparent; }
.onc-title-rule { border: 0; border-top: 1px solid var(--onc-border); margin: 0 0 20px; max-width: 900px; }

/* freeform note containers */
.onc-container {
  position: absolute; min-width: 120px; min-height: 32px; padding: 6px 10px;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
}
.onc-container:hover { border-color: var(--onc-border); }
.onc-container.active { border-color: var(--onc-border-strong); box-shadow: var(--onc-shadow); background: #fff; }
.onc-container .onc-container-handle {
  position: absolute; top: -1px; left: -1px; right: -1px; height: 14px;
  background: linear-gradient(var(--onc-panel-2), transparent);
  cursor: move; opacity: 0; border-radius: 3px 3px 0 0;
  display: flex; align-items: center; padding-left: 6px;
}
.onc-container:hover .onc-container-handle,
.onc-container.active .onc-container-handle { opacity: 1; }
.onc-container-handle .grip { width: 24px; height: 4px; border-radius: 2px;
  background-image: radial-gradient(circle, var(--onc-border-strong) 1px, transparent 1px);
  background-size: 4px 4px; background-position: 0 0; height: 6px; }
.onc-container .onc-content { outline: 0; min-height: 22px; line-height: 1.5; }
.onc-container .onc-content:empty::before { content: attr(data-placeholder); color: #c9c6cf; }
.onc-container .onc-resize {
  position: absolute; top: 12px; right: -3px; bottom: 12px; width: 6px; cursor: ew-resize; opacity: 0;
}
.onc-container:hover .onc-resize { opacity: 1; }

/* rich content inside containers */
.onc-content h1 { font-size: 22px; font-weight: 600; margin: .4em 0; }
.onc-content h2 { font-size: 18px; font-weight: 600; margin: .4em 0; color: var(--onc-purple-dark); }
.onc-content h3 { font-size: 15px; font-weight: 600; margin: .4em 0; }
.onc-content ul, .onc-content ol { margin: .3em 0; padding-left: 22px; }
.onc-content a { color: var(--onc-purple); }
.onc-content table.onc-table { border-collapse: collapse; margin: 6px 0; }
.onc-content table.onc-table td { border: 1px solid var(--onc-border-strong); padding: 4px 8px; min-width: 60px; vertical-align: top; }
.onc-content img { max-width: 100%; border-radius: 3px; }
.onc-content mark { background: #fff3a3; padding: 0 1px; }

/* to-do / tag checkboxes */
.onc-todo { list-style: none; padding-left: 0; }
.onc-todo li { display: flex; align-items: flex-start; gap: 8px; margin: 3px 0; }
.onc-todo li::before {
  content: ""; width: 15px; height: 15px; border: 1.5px solid var(--onc-border-strong);
  border-radius: 3px; flex: 0 0 auto; margin-top: 3px; cursor: pointer; background: #fff;
}
.onc-todo li.checked::before {
  background: var(--onc-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1z'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color: var(--onc-purple);
}
.onc-todo li.checked { color: var(--onc-text-dim); text-decoration: line-through; }
.onc-tag { display: inline-flex; align-items: center; gap: 4px; }
.onc-tag .tag-ico { width: 15px; height: 15px; flex: 0 0 auto; }

/* drawing layer */
.onc-draw-layer { position: absolute; inset: 0; }
.onc-draw-layer.active { cursor: crosshair; }
.onc-draw-layer.inactive { pointer-events: none; }

/* ------------------------------------------------------------------ misc UI */
.onc-empty { padding: 40px; color: var(--onc-text-dim); text-align: center; }
.onc-context-menu {
  position: fixed; z-index: 2000; background: #fff; border: 1px solid var(--onc-border-strong);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 4px; min-width: 180px;
}
.onc-context-menu .item {
  padding: 7px 12px; border-radius: 4px; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; gap: 10px;
}
.onc-context-menu .item:hover { background: var(--onc-hover); }
.onc-context-menu .item.danger { color: var(--sec-1); }
.onc-context-menu .sep { height: 1px; background: var(--onc-border); margin: 4px 6px; }

.onc-popover {
  position: fixed; z-index: 2000; background: #fff; border: 1px solid var(--onc-border-strong);
  border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.2); padding: 10px;
}
.onc-swatch-grid { display: grid; grid-template-columns: repeat(8, 22px); gap: 5px; }
.onc-swatch { width: 22px; height: 22px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(0,0,0,.15); }
.onc-swatch:hover { transform: scale(1.12); }

.onc-search-results { position: absolute; top: var(--onc-header-h); right: 40px; width: 320px; z-index: 1500;
  background: #fff; border: 1px solid var(--onc-border-strong); border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.2);
  max-height: 60vh; overflow: auto; }
.onc-search-results .sr-item { padding: 10px 12px; border-bottom: 1px solid var(--onc-border); cursor: pointer; }
.onc-search-results .sr-item:hover { background: var(--onc-hover); }
.onc-search-results .sr-title { font-weight: 600; font-size: 13px; }
.onc-search-results .sr-path { font-size: 11px; color: var(--onc-text-dim); margin: 2px 0; }
.onc-search-results .sr-snippet { font-size: 12px; color: var(--onc-text); }
.onc-search-results mark { background: #fff3a3; }

.onc-toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #201f24; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 13px;
  z-index: 3000; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.onc-toast.show { opacity: .95; }

.onc-save-status { font-size: 12px; color: var(--onc-text-dim); padding: 0 8px; }

/* editable name inline input */
.onc-inline-edit { border: 1px solid var(--onc-purple); border-radius: 3px; padding: 2px 4px; font: inherit; outline: 0; width: 100%; }

/* scrollbars */
.onc-list::-webkit-scrollbar, .onc-editor-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.onc-list::-webkit-scrollbar-thumb, .onc-editor-scroll::-webkit-scrollbar-thumb { background: #d4d1d9; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.onc-list::-webkit-scrollbar-thumb:hover, .onc-editor-scroll::-webkit-scrollbar-thumb:hover { background: #b9b5c1; background-clip: content-box; }

/* ------------------------------------------------------------------ dark mode */
body.onc-dark {
  --onc-bg: #1f1e22; --onc-panel: #262529; --onc-panel-2: #2c2b30;
  --onc-border: #38373d; --onc-border-strong: #4a4850; --onc-text: #eceaf0;
  --onc-text-dim: #a29fa9; --onc-hover: #323138; --onc-selected: #3a2b48; --onc-selected-bar: #b46fe0;
  --onc-purple: #8324b3;
}
body.onc-dark .onc-container.active { background: #2f2e34; }
body.onc-dark .onc-search input { color: var(--onc-text); }
body.onc-dark .onc-select, body.onc-dark .onc-todo li::before { background: #2c2b30; color: var(--onc-text); }

/* ------------------------------------------------------------------ drag reorder */
.onc-section.dragging, .onc-page-item.dragging { opacity: .45; }
.onc-section.drop-before, .onc-page-item.drop-before { box-shadow: inset 0 2px 0 var(--onc-purple); }
.onc-section.drop-after, .onc-page-item.drop-after { box-shadow: inset 0 -2px 0 var(--onc-purple); }
.onc-section.drop-into { outline: 2px dashed var(--onc-purple); outline-offset: -2px; }
.onc-page-item[draggable="true"], .onc-section[draggable="true"] { cursor: grab; }

/* ------------------------------------------------------------------ file chip */
.onc-file {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; margin: 0 2px;
  background: var(--onc-purple-light); color: var(--onc-purple-dark) !important; border-radius: 12px;
  font-size: 13px; text-decoration: none; border: 1px solid var(--onc-border);
}
.onc-file:hover { background: var(--onc-selected); }

/* ------------------------------------------------------------------ modal */
.onc-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 2500;
  display: flex; align-items: center; justify-content: center;
}
.onc-modal {
  background: var(--onc-panel); color: var(--onc-text); border-radius: 10px; width: 560px; max-width: 92vw;
  max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.35); overflow: hidden;
}
.onc-modal-head {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
  border-bottom: 1px solid var(--onc-border); font-weight: 600; font-size: 15px;
}
.onc-modal-close { cursor: pointer; color: var(--onc-text-dim); font-size: 15px; }
.onc-modal-close:hover { color: var(--onc-text); }
.onc-modal-body { padding: 12px 18px 18px; overflow-y: auto; }
.onc-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--onc-border);
}
.onc-list-row .lr-title { font-size: 13px; font-weight: 500; }
.onc-list-row .lr-sub { font-size: 11px; color: var(--onc-text-dim); margin-top: 2px; }
.onc-mini-btn {
  border: 1px solid var(--onc-border-strong); background: var(--onc-panel); color: var(--onc-text);
  border-radius: 5px; padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.onc-mini-btn:hover { background: var(--onc-hover); }
.onc-mini-btn.danger { color: var(--sec-1); border-color: var(--sec-1); }
.onc-mini-btn.danger:hover { background: var(--sec-1); color: #fff; }

/* ------------------------------------------------------------------ dialogs */
.onc-dialog-form { padding: 16px 18px 18px; }
.onc-dialog-msg { margin: 0 0 14px; color: var(--onc-text-dim); font-size: 13px; line-height: 1.5; }
.onc-field-label { display: block; margin-bottom: 12px; }
.onc-field-label > span { display: block; font-size: 12px; color: var(--onc-text-dim); margin-bottom: 4px; }
.onc-field {
  width: 100%; padding: 8px 10px; border: 1px solid var(--onc-border-strong); border-radius: 6px;
  font: inherit; font-size: 14px; background: var(--onc-panel); color: var(--onc-text); outline: 0;
}
.onc-field:focus { border-color: var(--onc-purple); box-shadow: 0 0 0 2px var(--onc-selected); }
.onc-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.onc-mini-btn.primary { background: var(--onc-purple); color: #fff; border-color: var(--onc-purple); }
.onc-mini-btn.primary:hover { background: var(--onc-purple-dark); }
.onc-mini-btn.primary.danger { background: var(--sec-1); border-color: var(--sec-1); color: #fff; }

/* ------------------------------------------------------------------ shortcuts + tags + lock */
.onc-shortcuts { width: 100%; border-collapse: collapse; }
.onc-shortcuts td { padding: 7px 6px; border-bottom: 1px solid var(--onc-border); font-size: 13px; vertical-align: middle; }
.onc-shortcuts td:first-child { width: 46%; }
.onc-shortcuts kbd {
  font-family: "Segoe UI", sans-serif; font-size: 12px; background: var(--onc-panel-2);
  border: 1px solid var(--onc-border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 2px 7px; white-space: nowrap;
}
.tag-group-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin: 14px 0 4px; color: var(--onc-purple-dark); }
.tag-group-head svg { width: 16px; height: 16px; }
.tag-row { cursor: pointer; } .tag-row:hover { background: var(--onc-hover); }
.tag-row .lr-title.done { text-decoration: line-through; color: var(--onc-text-dim); }
.sec-lock { color: var(--onc-text-dim); display: inline-flex; } .sec-lock svg { width: 13px; height: 13px; }

/* visible "⋯" options button on section & page rows (left-click = same menu as right-click) */
.onc-section, .onc-page-item { position: relative; }
.row-more {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--onc-text-dim); opacity: 0; cursor: pointer; background: transparent;
}
.row-more svg { width: 15px; height: 15px; }
.onc-section:hover .row-more, .onc-page-item:hover .row-more,
.onc-section.selected .row-more, .onc-page-item.selected .row-more { opacity: 1; }
.row-more:hover { background: var(--onc-border-strong); color: var(--onc-text); }
/* keep the count/date from sitting under the button on hover */
.onc-section:hover .sec-count, .onc-page-item:hover .pg-date { padding-right: 20px; }

/* ------------------------------------------------------------------ print */
@media print {
  .onc-header, .onc-ribbon, .onc-pane.sections, .onc-pane.pages, .onc-container-handle, .onc-resize { display: none !important; }
  .onc-page-surface { min-width: 0 !important; padding: 0 !important; }
}

@media (max-width: 820px) and (min-width: 701px) {
  .onc-pane.sections { width: 56px; }
  .onc-pane.sections .sec-name, .onc-pane.sections .onc-pane-header span { display: none; }
  .onc-pane.pages { width: 160px; }
  .onc-search { width: 150px; }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 700px) {
  /* Stack the panes vertically so the editor gets the full width. The freeform
     canvas can't work in a phone-width keyhole, so on phones notes flow as a
     single readable, wrapping column that scrolls vertically. */
  .onc-body { flex-direction: column; }

  .onc-pane.sections, .onc-pane.pages {
    width: 100% !important; min-width: 0; max-height: 96px; flex: 0 0 auto;
    border-right: 0; border-bottom: 1px solid var(--onc-border);
  }
  .onc-pane.sections .onc-pane-header, .onc-pane.pages .onc-pane-header { padding: 6px 10px 2px; }
  .onc-pane.sections .onc-list, .onc-pane.pages .onc-list {
    display: flex; flex-direction: row; align-items: stretch; gap: 6px;
    overflow-x: auto; overflow-y: hidden; padding: 4px 8px 8px;
  }
  .onc-pane.sections .onc-section, .onc-pane.pages .onc-page-item {
    flex: 0 0 auto; white-space: nowrap; margin: 0; border-radius: 16px;
    padding: 6px 12px; max-width: 60vw;
  }
  .onc-pane.sections .sec-name { display: inline; }
  .onc-page-item .pg-date { display: none; }
  .onc-page-item.level-1 { padding-left: 20px; }
  .row-more { display: none; }

  .onc-pane.editor { width: 100%; flex: 1 1 auto; min-height: 45vh; }

  /* readable single-column content */
  .onc-page-surface { min-width: 0; min-height: auto; padding: 16px 14px 160px; }
  .onc-container {
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important; max-width: 100% !important; margin: 0 0 14px;
    border-color: transparent !important; box-shadow: none !important; background: transparent !important;
  }
  .onc-container .onc-content img, .onc-content table.onc-table { max-width: 100%; }
  .onc-content table.onc-table { display: block; overflow-x: auto; }
  .onc-container-handle, .onc-resize { display: none !important; }
  .onc-draw-layer { display: none; }

  .onc-page-titlebar, .onc-title-rule { max-width: 100%; }
  .onc-page-title { font-size: 23px; }

  /* header + ribbon a touch tighter on phones */
  .onc-header { gap: 8px; padding: 0 8px; }
  .onc-search { width: 130px; }
  .onc-notebook-picker { max-width: 130px; }
}