/* Page Layout — app grid, menubar, tools, control bar, status bar, form atoms */
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; flex: 0 0 auto; }
.ic .f { fill: currentColor; stroke: none; }

.app { display: grid; grid-template-rows: var(--menubar-h) var(--cb-h) minmax(0, 1fr) var(--sb-h); height: 100vh; height: 100dvh; }
.main { display: grid; grid-template-columns: var(--toolbar-w) minmax(0, 1fr) var(--dock-w); min-height: 0; }
.app.no-dock .main { grid-template-columns: var(--toolbar-w) minmax(0, 1fr) 0; }
.app.no-dock .dock { display: none; }

/* menubar */
.menubar { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 6px; background: var(--bg-app); border-bottom: 1px solid var(--border-dark); min-width: 0; position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; padding: 0 8px 0 4px; height: 100%; flex: 0 0 auto; }
.brand-mark { width: 18px; height: 18px; fill: var(--tlbx); stroke: var(--ink); stroke-width: 1.6; }
.brand-mark .shine { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.app-name { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: -.01em; white-space: nowrap; }
.menus { display: flex; align-items: stretch; height: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.menus::-webkit-scrollbar { display: none; }
.menu-btn { background: none; border: 0; padding: 0 9px; height: 100%; color: var(--text); white-space: nowrap; border-radius: 0; }
.menu-btn:hover, .menu-btn.open { background: var(--bg-hover); }
/* The shared header buttons (Drive, View, Theme, Apps: shared/ui/hbtn.css) are as compact as the bar: 24 px like .iconbtn. */
.menubar { --tlbx-hbtn-h: 24px; --tlbx-hbtn-radius: var(--radius-s); --tlbx-hbtn-fs: var(--fs); --tlbx-hbtn-line: var(--border); --tlbx-hbtn-hover: var(--bg-hover); }
.menubar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; }
.docname { color: var(--text-dim); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docname .dirty { color: var(--accent-line); }
.iconbtn { display: inline-grid; place-items: center; width: 26px; height: 24px; border: 0; background: none; color: var(--text-dim); border-radius: var(--radius-s); }
.iconbtn:hover { background: var(--bg-hover); color: var(--text); }
.searchbtn { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 6px 0 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim); border-radius: 999px; box-shadow: var(--bevel-in); }
.searchbtn .ic { width: 14px; height: 14px; }
.searchbtn kbd { font: 10px var(--mono); padding: 1px 5px; border-radius: 4px; background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text-dim); }
.searchbtn:hover { color: var(--text); border-color: var(--text-faint); }

/* tools */
.toolbar { background: var(--bg-panel); border-right: 1px solid var(--border-dark); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; overflow-y: auto; scrollbar-width: none; }
.tool { width: 34px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; background: none; color: var(--text-dim); border-radius: var(--radius-s); padding: 0; position: relative; }
.tool:hover { background: var(--bg-hover); color: var(--text); }
.tool.on { background: var(--accent-soft); color: var(--accent-line); border-color: var(--accent-line); }
:root[data-theme="classic"] .tool.on { background: #fff; color: #000; box-shadow: var(--bevel-btn-down); border-color: transparent; }
.tool-sep { width: 26px; height: 1px; background: var(--sep); margin: 4px 0; flex: 0 0 auto; }
.paint-chips { position: relative; width: 36px; height: 36px; margin-top: 4px; flex: 0 0 auto; }
.pchip { position: absolute; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 2px; padding: 0; box-shadow: 0 0 0 1px var(--bg-panel); }
.pchip.fill { left: 2px; top: 2px; z-index: 1; }
.pchip.stroke { right: 2px; bottom: 2px; }
.pchip.stroke::after { content: ''; position: absolute; inset: 5px; background: var(--bg-panel); border: 1px solid var(--border); }
.pchip.none { background: #fff !important; }
.pchip.none::before { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #e5484d; transform: rotate(-45deg); }

/* control bar */
.controlbar { display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--bg-panel); border-bottom: 1px solid var(--border-dark); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; min-width: 0; }
.controlbar::-webkit-scrollbar { display: none; }
.controlbar > * { flex: 0 0 auto; }
.cb-label { font-weight: 600; color: var(--text); }
.cb-sep { width: 1px; height: 22px; background: var(--sep); }
.cb-hint { color: var(--text-dim); }
.cb-grp { display: inline-grid; grid-template-columns: auto auto; gap: 1px 5px; align-items: center; }
.cb-grp .fl { font-size: 10px; }

/* form atoms */
.fld { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); min-width: 0; }
.fl { white-space: nowrap; color: var(--text-dim); }
.fu { color: var(--text-faint); font-size: var(--fs-s); }
.num, .sel, .txt {
  height: 22px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-s); padding: 0 5px; min-width: 0; box-shadow: var(--bevel-in);
}
.num { width: 64px; font-family: var(--mono); font-size: 11px; }
.num.w48 { width: 48px; } .num.w80 { width: 80px; }
.num:focus, .sel:focus, .txt:focus { border-color: var(--accent-line); outline: none; }
.sel { padding: 0 3px; max-width: 170px; }
.sel.wide { max-width: 200px; min-width: 140px; }
.txt { width: 100%; }
.btn { height: 24px; padding: 0 10px; border-radius: var(--radius-s); border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text); white-space: nowrap; box-shadow: var(--bevel-btn); display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.btn:hover:not(:disabled) { background: var(--btn-hover); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.btn.small { height: 22px; padding: 0 8px; font-size: var(--fs-s); }
.ibtn { display: inline-grid; place-items: center; width: 26px; height: 24px; border: 1px solid transparent; background: transparent; color: var(--text-dim); border-radius: var(--radius-s); padding: 0; }
.ibtn:hover { background: var(--bg-hover); color: var(--text); }
.ibtn.on { color: var(--accent-line); background: var(--accent-soft); }
.ibtn .ic { width: 16px; height: 16px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; background: var(--bg-input); box-shadow: var(--bevel-in); }
.segb { border: 0; background: transparent; color: var(--text-dim); height: 22px; min-width: 26px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 0; font-size: var(--fs-s); }
.segb + .segb { border-left: 1px solid var(--border); }
.segb:hover { color: var(--text); background: var(--bg-hover); }
.segb.on { background: var(--accent); color: var(--accent-ink); }
.segb .ic { width: 15px; height: 15px; }
.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--text); cursor: pointer; }
.chk input { accent-color: var(--accent-line); margin: 0; }
.chip { position: relative; width: 28px; height: 22px; padding: 2px; border: 1px solid var(--border); background: var(--bg-input); border-radius: var(--radius-s); display: inline-block; box-shadow: var(--bevel-in); }
.chip i { position: absolute; inset: 2px; border-radius: 1px; }
.chip.none i { background: #fff; }
.chip.none i::before { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: #e5484d; transform: rotate(-35deg); }

/* status bar */
.statusbar { display: flex; align-items: center; gap: 12px; padding: 0 8px; background: var(--bg-app); border-top: 1px solid var(--border-dark); color: var(--text-dim); font-size: var(--fs-s); min-width: 0; overflow: hidden; white-space: nowrap; }
.sb-grp { display: flex; align-items: center; gap: 3px; }
.sbb { width: 22px; height: 20px; border: 0; background: none; color: var(--text-dim); border-radius: var(--radius-s); padding: 0; display: inline-grid; place-items: center; }
.sbb:hover { background: var(--bg-hover); color: var(--text); }
.sbb .ic { width: 14px; height: 14px; }
.sb-zoom { width: 62px; height: 20px; font-size: 11px; font-family: var(--mono); text-align: right; }
.sb-page { height: 20px; max-width: 120px; }
.sb-item { overflow: hidden; text-overflow: ellipsis; }
.sb-warn { color: #ff6b6b; font-weight: 600; cursor: pointer; }
.sb-ok { color: var(--accent-line); }
.sb-hint { margin-left: auto; color: var(--text-faint); }