/* Montador de lâminas (laminas-editor.js) — a lâmina é o foco: cabeçalho de 1 linha, lista de fotos
   estreita à esquerda, ajustes recolhidos, ações da lâmina em ícones. Usa os tokens de cor do app, nos dois temas. */
.laminas-editor{ position:fixed; inset:0; z-index:91; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font-size:12px; }
/* tudo compacto: a lâmina é o que importa */
.laminas-editor .btn{ padding:4px 9px; font-size:12px; white-space:nowrap; line-height:1.3; }
.laminas-editor .btn.small{ padding:3px 7px; font-size:11.5px; }
.laminas-editor, .laminas-editor *{ box-sizing:border-box; }
.laminas-editor p{ margin:0; }
.laminas-editor .btn:disabled{ opacity:.4; cursor:default; }
.laminas-editor .btn.danger{ color:var(--danger); }
.laminas-editor input[type=text], .laminas-editor input[type=number], .laminas-editor select{
  padding:4px 7px; font-size:12px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--ink); font:inherit; min-width:0;
}
.laminas-editor :focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.lm-spacer{ flex:1; }
.lm-sep{ width:1px; height:18px; background:var(--border); margin:0 4px; flex:none; }

/* cabeçalho */
.lm-head{ flex:none; display:flex; align-items:center; gap:6px; padding:4px 10px; background:var(--surface); border-bottom:1px solid var(--border); min-height:38px; }
.lm-title{ font-size:13px; white-space:nowrap; }
.laminas-editor .lm-size{ width:auto; max-width:230px; }
.lm-sub{ color:var(--ink-muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.laminas-editor .lm-pedido{ width:120px; }

/* corpo: layouts à esquerda, tira de lâminas em cima, fotos embaixo (como no SmartAlbums) */
.lm-body{ flex:1; min-height:0; display:grid; grid-template-columns:150px minmax(0,1fr); }
.lm-left{ display:flex; flex-direction:column; min-height:0; background:var(--surface); border-right:1px solid var(--border); }
.lm-dock{ flex:none; display:flex; padding:6px 10px 4px; background:var(--surface); border-top:1px solid var(--border); }
.lm-count{ flex:none; font-size:11px; color:var(--ink-muted); white-space:nowrap; }
.lm-tray{ flex:1; min-width:0; display:flex; gap:5px; overflow-x:auto; padding:2px; }
.lm-photo{ position:relative; flex:0 0 72px; width:72px; height:72px; padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; background:var(--surface-2); cursor:grab; }
.lm-photo img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.5; }
.lm-photo.used img{ opacity:1; }
.lm-photo:not(.used){ border-color:var(--warning); }
.lm-photo.sel{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-tint); }
.lm-photo-n{ position:absolute; left:2px; bottom:2px; font-size:10px; font-weight:700; background:rgba(0,0,0,.65); color:#fff; border-radius:4px; padding:0 4px; }
.lm-settings{ flex:none; border-top:1px solid var(--border); margin-top:auto; }
.lm-settings summary{ padding:7px 10px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; }
.lm-settings summary::before{ content:'▸'; font-size:11px; }
.lm-settings[open] summary::before{ content:'▾'; }
.lm-settings-body{ padding:2px 10px 10px; display:flex; flex-direction:column; gap:6px; max-height:40vh; overflow:auto; }
.lm-field{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.lm-field > label{ font-size:11px; font-weight:500; color:var(--ink-muted); }
.lm-field-color{ flex:0 0 46px; }
.laminas-editor input[type=color]{ width:100%; height:31px; padding:2px; border:1px solid var(--border); border-radius:7px; background:var(--bg); }
.lm-row{ display:flex; gap:6px; align-items:flex-end; flex-wrap:wrap; }
.lm-settings-body .lm-field{ flex:1 1 56px; }
.lm-settings-body .lm-field > label{ white-space:nowrap; }
.lm-row > select{ flex:1; }
.lm-row > .btn{ flex:none; }
.lm-check{ display:flex; gap:7px; align-items:center; font-size:12px; cursor:pointer; }
.lm-hint{ font-size:11.5px; line-height:1.45; color:var(--ink-muted); }

/* meio: barra, layouts, lâmina, contexto, tira */
.lm-main{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.lm-bar{ flex:none; display:flex; align-items:center; gap:4px; padding:4px 10px; font-size:12px; overflow-x:auto; }
.lm-actions-l{ display:flex; align-items:center; gap:4px; }
.lm-where{ white-space:nowrap; }
.laminas-editor .lm-where input{ width:44px; padding:2px 3px; font-weight:700; text-align:center; }
.lm-n{ color:var(--ink-muted); white-space:nowrap; }
.lm-help{ flex:none; width:20px; height:20px; border-radius:50%; border:1px solid var(--border); color:var(--ink-muted); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; cursor:help; }
.lm-templates{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:5px; overflow-y:auto; padding:8px; }
.lm-tpl-hint{ flex:none; font-size:11px; color:var(--ink-muted); line-height:1.35; }
.lm-tpl{ flex:none; padding:2px; border:2px solid var(--border); border-radius:5px; background:#fff; cursor:pointer; line-height:0; }
.lm-tpl:hover{ border-color:var(--accent); }
.lm-tpl.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-tint); }
.lm-tpl canvas{ display:block; border-radius:2px; width:100%; height:auto; }
.lm-stage{ flex:1; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:6px 12px; background:var(--surface-2); }
.lm-stage canvas{ display:block; box-shadow:var(--shadow); touch-action:none; cursor:grab; background:#fff; }
.lm-context{ flex:none; display:flex; align-items:center; gap:6px; padding:4px 10px; background:var(--surface); border-top:1px solid var(--border); font-size:12px; min-height:34px; }
.lm-context[hidden]{ display:none; }
.lm-name{ font-weight:600; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lm-meta{ color:var(--ink-muted); white-space:nowrap; }
.lm-zoom{ display:flex; align-items:center; gap:6px; color:var(--ink-muted); }
.lm-zoom input{ width:120px; accent-color:var(--accent); }
.lm-issue{ color:var(--warning); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.lm-strip{ flex:none; display:flex; gap:5px; overflow-x:auto; padding:0 10px 6px; }
.lm-th{ position:relative; flex:none; padding:3px; border:2px solid transparent; border-radius:7px; background:transparent; cursor:pointer; }
.lm-th canvas{ display:block; width:84px; height:auto; background:#fff; border-radius:3px; box-shadow:0 0 0 1px var(--border); }
.lm-th.on{ border-color:var(--accent); background:var(--accent-tint); }
.lm-th.over{ border-color:var(--accent); background:var(--accent-tint); }
.lm-th-n{ position:absolute; left:6px; top:6px; font-size:10px; font-weight:700; background:rgba(0,0,0,.65); color:#fff; border-radius:4px; padding:0 5px; }
.lm-th-bad{ position:absolute; right:6px; top:6px; width:15px; height:15px; border-radius:50%; background:var(--warning); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; }

.lm-status{ flex:none; padding:4px 10px; min-height:24px; font-size:11.5px; font-weight:600; border-top:1px solid var(--border); background:var(--surface); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lm-status:empty{ display:none; }
.lm-status[data-kind=error]{ color:var(--danger); }
.lm-status[data-kind=warn]{ color:var(--warning); }
.lm-status[data-kind=ok]{ color:var(--success); }

@media (max-width:900px){
  .lm-body{ display:flex; flex-direction:column; overflow:auto; }
  .lm-main{ order:-1; flex:none; }
  .lm-stage{ min-height:46vh; }
  .lm-left{ border-right:0; border-top:1px solid var(--border); }
  .lm-templates{ flex-direction:row; overflow-x:auto; }
  .lm-tpl{ flex:0 0 120px; }
  .lm-sub{ display:none; }
}