/* Image Editor: menus, dialog contents, Paint '98 theme, small screens, brush picker and panels */
/* ---------- menus ---------- */
.menu { position: fixed; z-index: 100; min-width: 220px; max-height: calc(100vh - 20px); overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px; box-shadow: var(--shadow); }
.menu-row { width: 100%; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border: 0; background: none; border-radius: 4px; text-align: left; white-space: nowrap; }
.menu-row:hover:not([disabled]), .menu-row:focus-visible, .menu-row.sub-open { background: var(--sel); color: var(--sel-ink); outline: none; }
.menu-row[disabled] { color: var(--fg-faint); cursor: default; }
.menu-key { color: var(--fg-faint); font-size: 11px; padding-left: 18px; }
.menu-check { font-size: 11px; }
.menu-inline { position: static; min-width: 0; padding: 0 0 0 14px; border: 0; box-shadow: none; background: none; }
.menu-inline .menu-row { padding-left: 6px; }
.menu-sep { height: 1px; background: var(--line-2); margin: 4px 6px; }

/* ---------- dialog contents (chrome comes from ../shared/tlbxui.css) ---------- */
.sui-dlg.sui-filter, .sui-dlg.sui-curve { width: min(360px, 100%); }
.dlg-p { color: var(--fg-dim); margin: 0 0 10px; }
.dlg-p a, .about a { color: inherit; }
.mono { font-family: var(--mono); }
.dlg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; min-width: 0; }
.dlg-row select { flex: 1 1 90px; min-width: 0; }
.dlg-status { color: var(--fg-faint); font-size: 11px; }
.form { display: grid; gap: 10px; }
.field { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 8px; color: var(--fg-dim); }
.field.opt-check { grid-template-columns: auto 1fr; padding-left: 98px; }
.field-u { color: var(--fg-faint); }
.anchor { display: grid; grid-template-columns: repeat(3, 22px); gap: 2px; }
.anchor-b { width: 22px; height: 22px; border: 1px solid var(--line-2); background: var(--input); padding: 0; border-radius: 2px; }
.anchor-b.on { background: var(--fg); }
.fparams { display: grid; gap: 12px; }
.fp-range { display: grid; gap: 4px; }
.fp-range input[type=range] { width: 100%; }
.fp-l { display: flex; align-items: center; justify-content: space-between; color: var(--fg-dim); }
.fp-n { display: inline-flex; align-items: center; gap: 4px; }
.fp-u { color: var(--fg-faint); font-size: 11px; }
.fp-sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-dim); }
.fp-color { width: 46px; height: 22px; border: 1px solid var(--line-2); border-radius: 3px; padding: 0; }
.fp-hist { width: 100%; height: 70px; background: var(--input); border: 1px solid var(--line); border-radius: 3px; }
.fp-curve { width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 3px; cursor: crosshair; touch-action: none; }
.fp-curvebox { display: grid; gap: 8px; min-width: 0; }
.fp-curvebox .dlg-row { margin-top: 0; }
.fp-help { color: var(--fg-faint); font-size: 11px; margin: 0; }
.cp-dlg { display: grid; gap: 10px; }
.cp-dlg .scp-sv { height: 170px; }
.cp-compare { display: grid; grid-template-columns: auto 1fr 1fr auto; align-items: center; gap: 6px; color: var(--fg-faint); font-size: 11px; }
.cp-preview { height: 26px; border: 1px solid var(--line-2); border-radius: 3px; }
.cp-preview.old { cursor: pointer; }
/* Colour dialog: a bottom sheet on phones, so the whole picker fits 390 px wide with no page scroll. */
.sui-dlg.cp-sheet { width: min(340px, 100%); }
@media (max-width: 600px) {
  .sui-back:has(> .cp-sheet) { place-items: end stretch; padding: 0; }
  .sui-dlg.cp-sheet { width: 100%; max-width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 14px 14px 0 0; }
  .cp-dlg .scp-sv { height: 150px; }
}
.keys-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 22px; }
.keys-wrap h4 { margin: 0 0 6px; font-size: 12px; color: var(--fg); }
.keys { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.keys td { padding: 3px 0; border-bottom: 1px solid var(--line-2); color: var(--fg-dim); }
.keys td:last-child { text-align: right; }
kbd { font: 11px var(--mono); background: var(--panel-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 5px; color: var(--fg); }
.about p { margin: 0 0 10px; }
.about-logo { font: 800 30px/1 "Archivo", var(--ui); font-stretch: 85%; letter-spacing: -.02em; color: var(--fg); }

body.busy, body.busy * { cursor: progress !important; }
body.no-panels .panels, body.no-panels .toolbox { display: none; }
body.no-panels .main { grid-template-columns: 1fr; }
.noscript { padding: 20px; }

/* ---------- Paint '98 theme ---------- */
[data-theme="paint"] .topbar { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border: 0; }
[data-theme="paint"] .topbar .mb-item { color: var(--accent-ink); }
[data-theme="paint"] .topbar .mb-item:hover, [data-theme="paint"] .topbar .mb-item.open { background: var(--chrome); color: var(--fg); }
[data-theme="paint"] .logo { color: var(--accent-ink); }
[data-theme="paint"] .logo-word { font: 700 12px/1 var(--ui); }
[data-theme="paint"] .doc-title { color: var(--accent-ink); font-weight: 700; }
[data-theme="paint"] .top-btn, [data-theme="paint"] .tlbx-hbtn, [data-theme="paint"] .btn, [data-theme="paint"] .top-btn.export, [data-theme="paint"] .btn.primary { background: var(--panel-2); color: var(--fg); border: 0; border-radius: 0; box-shadow: var(--bevel-out); font-weight: 400; }
[data-theme="paint"] .top-btn:active, [data-theme="paint"] .tlbx-hbtn:active, [data-theme="paint"] .btn:active { box-shadow: var(--bevel-in); }
[data-theme="paint"] .btn.primary { outline: 1px solid var(--fg); outline-offset: -1px; }
[data-theme="paint"] .options, [data-theme="paint"] .status { border-color: var(--line); box-shadow: inset 0 1px var(--input); }
[data-theme="paint"] .status > * { box-shadow: var(--bevel-in); padding: 3px 6px; }
[data-theme="paint"] .status .sb-fill { box-shadow: none; }
[data-theme="paint"] .main { gap: 0; padding: 3px; background: var(--app); }
[data-theme="paint"] .toolbox { border: 0; box-shadow: var(--bevel-out); }
[data-theme="paint"] .tool { border-radius: 0; box-shadow: var(--bevel-out); background: var(--panel-2); }
[data-theme="paint"] .tool.active { box-shadow: var(--bevel-in); background: repeating-conic-gradient(var(--input) 0 25%, var(--panel-2) 0 50%) 0 0 / 2px 2px; }
[data-theme="paint"] .tools { gap: 0; }
[data-theme="paint"] .viewport { box-shadow: var(--bevel-in); margin: 0 3px; }
[data-theme="paint"] .panels { border: 0; box-shadow: var(--bevel-out); padding: 3px; gap: 3px; }
[data-theme="paint"] .panel { border: 0; box-shadow: var(--bevel-out); padding: 2px; }
[data-theme="paint"] .panel-head { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--accent-ink); padding: 3px 6px; }
[data-theme="paint"] .panel-head::after { border-color: var(--accent-ink); }
[data-theme="paint"] input[type=number], [data-theme="paint"] input[type=text], [data-theme="paint"] select, [data-theme="paint"] .sb-zoom { border: 0; border-radius: 0; box-shadow: var(--bevel-in); background: var(--input); }
[data-theme="paint"] .menu { background: var(--panel-2); border: 0; border-radius: 0; box-shadow: var(--bevel-out), 2px 2px 0 rgba(0,0,0,.4); padding: 2px; }
[data-theme="paint"] .menu-row { border-radius: 0; }
[data-theme="paint"] .menu-sep { background: var(--line); box-shadow: 0 1px var(--input); }
[data-theme="paint"] .layer { border-color: var(--panel-3); }
[data-theme="paint"] .layers, [data-theme="paint"] .history { background: var(--input); box-shadow: var(--bevel-in); }
[data-theme="paint"] .lp-foot { background: var(--panel-2); }
[data-theme="paint"] .lp-thumb.target { outline-color: var(--fg); }
[data-theme="paint"] .seg { border: 0; border-radius: 0; box-shadow: var(--bevel-out); }
[data-theme="paint"] .seg-b { background: var(--panel-2); border-color: var(--line); }
[data-theme="paint"] .seg-b.on { box-shadow: var(--bevel-in); background: var(--panel-3); }
[data-theme="paint"] .sb-saved::before { color: var(--accent); }
[data-theme="paint"] .swatch { border-radius: 0; box-shadow: var(--bevel-in); border: 0; }
[data-theme="paint"] .tool svg { stroke-width: 1.8; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .main { grid-template-columns: 62px 1fr; }
  /* the panels are a drawer from the right, under the top bar: shared/ui/sheet.js gives place, motion and × */
  .panels { --ssh-z: 50; --ssh-top: 38px; }
  .panel-toggle { display: inline-flex; }
  .doc-title { display: none; }
}
@media (max-width: 640px) {
  /* The top bar takes two rows: the logo and the menus (they scroll), then the buttons. */
  .app { grid-template-rows: 66px auto 1fr auto 22px; }
  .topbar { flex-wrap: wrap; align-content: center; gap: 4px; padding: 4px 8px; }
  .top-actions { gap: 4px; }
  .top-btn { padding: 0 7px; }
  .panels { --ssh-top: 66px; }
  .main { display: contents; }
  .docarea { grid-row: 3; }
  .toolbox { grid-row: 4; flex-direction: row; border: 0; border-top: 1px solid var(--line); padding: 6px 10px; overflow-x: auto; gap: 10px; }
  .tools { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: 32px; gap: 2px; }
  .tool { width: 32px; height: 32px; }
  .swatches-fgbg { flex: none; width: 40px; height: 32px; }
  .sw-fg, .sw-bg { width: 22px; height: 22px; }
  .sw-swap, .sw-def { display: none; }
  .status { grid-row: 5; gap: 10px; }
  .sb-pos, .sb-colwrap, .sb-size { display: none; }
  .logo-word, .top-btn#themeToggle { display: none; }
  .menubar { flex: 1 1 calc(100% - 40px); }
  .options { gap: 10px; }
  .opt-name, .opt-hint { display: none; }
}

/* ---------- brush picker ---------- */
.bp-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 4px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--input); flex: none; }
.bp-btn canvas { width: 24px; height: 24px; object-fit: contain; }
.bp-btn span { font: 11px var(--mono); min-width: 20px; text-align: right; }
.bp-btn i { font-style: normal; color: var(--fg-faint); font-size: 10px; }
.brush-pop { position: fixed; z-index: 150; width: 300px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow); padding: 10px; display: grid; gap: 8px; }
.bp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bp-head span { color: var(--fg-faint); font-size: 10.5px; }
.bp-row { display: grid; grid-template-columns: 62px 1fr 52px 18px; align-items: center; gap: 6px; color: var(--fg-dim); }
.bp-row input[type=range] { width: 100%; }
.bp-sub { color: var(--fg-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.bp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.brush-pop { max-height: calc(100vh - 20px); overflow-y: auto; }
.bp-tip { text-transform: none; letter-spacing: 0; font-size: 10.5px; line-height: 1.4; }
.bp-preset { display: grid; justify-items: center; gap: 1px; padding: 4px 2px 3px; border: 1px solid transparent; border-radius: 5px; background: var(--input); position: relative; }
.bp-preset canvas { width: 64px; height: 40px; max-width: 100%; }
.bp-preset span { font-size: 9.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bp-preset em { position: absolute; top: 2px; right: 4px; font: 9px var(--mono); color: var(--fg-faint); font-style: normal; }
.bp-preset:hover { border-color: var(--line-2); background: var(--hover); }
.bp-preset.on { border-color: var(--accent); }
[data-theme="paint"] .brush-pop { background: var(--panel-2); border: 0; border-radius: 0; box-shadow: var(--bevel-out), 2px 2px 0 rgba(0,0,0,.4); }
[data-theme="paint"] .bp-preset, [data-theme="paint"] .bp-btn { border-radius: 0; background: var(--input); box-shadow: var(--bevel-in); border: 0; }
.paste-catcher { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ---------- Brushes panel & settings ---------- */
.bp-bar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.bp-bar .btn { height: 24px; padding: 0 8px; font-size: 11px; }
.bp-panel { max-height: 260px; overflow-y: auto; }
.bpk-head { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; color: var(--fg-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.bpk-head span:first-child { flex: 1; }
.bpk-n { color: var(--fg-faint); }
.bpk-btn { width: 20px; height: 18px; border: 0; background: none; color: var(--fg-dim); border-radius: 3px; padding: 0; }
.bpk-btn:hover { background: var(--hover); color: var(--fg); }
.bpk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.bpk-b { display: grid; justify-items: center; gap: 1px; padding: 3px 2px; border: 1px solid transparent; border-radius: 4px; background: var(--input); }
.bpk-b canvas { width: 100%; max-width: 64px; height: auto; }
.bpk-b span { font-size: 9.5px; color: var(--fg-dim); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpk-b:hover { background: var(--hover); }
.bpk-b.on { border-color: var(--accent); }
.bs { display: grid; gap: 10px; }
.bs-preview { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line-2); }
.bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.bs-row { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 8px; color: var(--fg-dim); }
.bs-row input { width: 100%; }
.bs-v { font: 11px var(--mono); text-align: right; color: var(--fg); }
.bs-checks { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 640px) { .bs-grid { grid-template-columns: 1fr; } }
.top-btn[hidden] { display: none; }