/* Brand tokens lifted directly from public/portal/index.html, so this tool
   reads as part of the same product rather than a generic editor bolted
   on the side. */
:root{
  --bg: #fcfbfa;
  --panel: #ffffff;
  --canvas-mat: #f3ece1;
  --border: #e5d7c3;
  --text: #1c1c1a;
  --text-muted: #6b6b66;
  --navy-900:#0c1727; --navy-800:#14253e; --navy-700:#1d3557; --navy-600:#2c4a6f;
  --gold:#b8973e; --gold-light:#d4b359; --gold-soft:#f3ece1; --gold-dark:#92742c;
  --accent: var(--gold);
  --accent-contrast: var(--navy-900);
  --danger: #b33131;
  --radius: 14px;
  --topbar-h: 54px;
  --tools-w: 88px;
  --props-w: 300px;
  --font-brand: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
}
button{font-family:inherit}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column}

/* Top bar */
.topbar{
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-right{display:flex;align-items:center;gap:6px}
.brand{
  font-family: var(--font-brand); font-weight:700; font-size:16px; color:var(--navy-800);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-center{
  font-size:11.5px; color:var(--text-muted); white-space:nowrap;
  background: var(--gold-soft); border:1px solid var(--border); border-radius:999px;
  padding: 3px 10px; font-weight:600; letter-spacing:.02em;
}

.icon-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--navy-700);display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.icon-btn:hover{background:var(--gold-soft)}
.icon-btn:disabled{opacity:.35;cursor:default}
.pill-btn{
  height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--panel);color:var(--navy-800);font-size:13px;font-weight:600;cursor:pointer;
}
.pill-btn:hover{background:var(--gold-soft)}
.pill-primary{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.pill-primary:hover{background:var(--gold-light)}

/* Workspace layout */
.workspace{flex:1;display:flex;flex-direction:column;min-height:0}
.canvas-area{
  flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;
  position:relative; padding:10px; overflow:hidden; background:var(--canvas-mat); order:1;
  background-image: radial-gradient(rgba(184,151,62,.10) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}
.canvas-stage{
  background:#fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(20,37,62,.12), 0 0 0 1px var(--border), 0 0 0 5px #fff, 0 0 0 6px var(--border);
  line-height:0;
  max-width:100%; max-height:100%;
  overflow:hidden; /* hard clip — if anything inside (including Fabric's own
    .canvas-container wrapper) ever ends up sized larger than the stage box,
    it's contained here instead of spilling into the properties panel. */
}
.canvas-stage .canvas-container,
.canvas-stage canvas{
  max-width:100% !important;
  max-height:100% !important;
}
.canvas-selection-bar{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:4px; background:var(--navy-900); border:1px solid var(--navy-700);
  border-radius:999px; padding:4px; box-shadow:0 4px 14px rgba(12,23,39,.3);
}
.canvas-selection-bar button{
  width:32px;height:32px;border-radius:999px;border:none;background:transparent;color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.canvas-selection-bar button:hover{background:rgba(255,255,255,.12)}
.canvas-selection-bar button[data-action="delete"]{color:#ef8080}

/* Tools panel: bottom scroll strip on mobile */
.tools-panel{
  order:3;
  height:64px; flex-shrink:0;
  display:flex; align-items:stretch; gap:2px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--panel); border-top:1px solid var(--border);
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  height:calc(64px + env(safe-area-inset-bottom));
}
.tool-btn{
  flex:0 0 auto; width:68px; min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; border:none; background:transparent; color:var(--text-muted); border-radius:10px; cursor:pointer;
  font-size:10.5px; font-weight:600; touch-action:manipulation;
}
.tool-btn span{white-space:nowrap}
.tool-btn:hover{background:var(--gold-soft)}
.tool-btn.active{color:var(--gold-dark); background: var(--gold-soft)}

/* Options sheet. Round 64: it sits IN the page flow between the canvas and the tools strip (it used to float over the
   canvas and start open), so opening it shrinks the canvas instead of hiding it, and it starts closed. */
.properties-panel{
  order:2; flex-shrink:0;
  background:var(--panel); border-top:1px solid var(--border);
  border-radius: 16px 16px 0 0;
  max-height:0; overflow:hidden; visibility:hidden;
  transition: max-height .18s ease;
  box-shadow: 0 -4px 16px rgba(12,23,39,.12);
}
.properties-panel.open{max-height:42vh; max-height:42dvh; overflow-y:auto; visibility:visible; -webkit-overflow-scrolling:touch}
.panel-head{display:flex;align-items:center;justify-content:center;position:sticky;top:0;background:var(--panel);z-index:2;min-height:44px}
.panel-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto}
.panel-close{position:absolute;right:6px;top:2px;width:40px;height:40px;border:none;background:transparent;color:var(--navy-700);font-size:18px;border-radius:10px;cursor:pointer}
.panel-close:hover{background:var(--gold-soft)}
.panel-body{padding: 4px 16px 20px}
.panel-empty{color:var(--text-muted); font-size:13px; text-align:center; padding: 24px 8px; line-height:1.5}

/* Desktop layout */
@media(min-width:900px){
  .workspace{flex-direction:row}
  .canvas-area{padding:20px}
  .tools-panel{
    order:0; flex-direction:column; height:auto; width:var(--tools-w); flex-shrink:0;
    border-top:none; border-right:1px solid var(--border);
    overflow-y:auto; overflow-x:hidden; padding: 12px 6px;
  }
  .tool-btn{width:100%; height:62px; font-size:11px}
  .properties-panel{
    order:3; width:var(--props-w); flex-shrink:0; max-height:none; overflow-y:auto; visibility:visible;
    border-top:none; border-left:1px solid var(--border); border-radius:0;
    box-shadow:none; height:auto;
  }
  .panel-head{display:none}
  .canvas-area{order:2}
}
@media(max-width:899px){
  .topbar{padding:0 8px;gap:4px}
  #btn-new{display:none}
  .topbar-center{font-size:11px;padding:3px 8px}
}
@media(max-width:520px){ .brand{display:none} }
@media(pointer:coarse){
  .icon-btn{width:44px;height:44px}
  .pill-btn{height:40px}
  .canvas-selection-bar button{width:40px;height:40px}
  .toggle-group button{height:42px}
  input[type="text"], input[type="number"], select, textarea{font-size:16px} /* 16px stops iOS zooming in on a field */
  .pos-cell{min-width:44px;min-height:34px}
}

/* Property controls */
.field{margin-bottom:16px}
.field-label{display:block;font-size:12px;font-weight:700;color:var(--navy-700);margin-bottom:6px;letter-spacing:.01em}
.field-row{display:flex;gap:8px}
.field-row > *{flex:1}
input[type="text"], input[type="number"], select, textarea{
  width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:8px;
  background:#fff; color:var(--text); font-size:13px; font-family:var(--font-body);
}
input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus{
  outline:2px solid var(--gold-light); outline-offset:0; border-color:var(--gold);
}
input[type="range"]{width:100%; accent-color: var(--gold-dark)}
input[type="color"]{width:38px;height:34px;border:1px solid var(--border);border-radius:8px;padding:2px;background:#fff}
.hex-row{display:flex;gap:8px;align-items:center}
.toggle-group{display:flex;gap:4px}
.toggle-group button{
  flex:1; height:34px; border:1px solid var(--border); background:#fff; color:var(--navy-800);
  border-radius:8px; cursor:pointer; font-weight:700; font-size:13px;
}
.toggle-group button.active{background:var(--navy-800); color:#fff; border-color:var(--navy-800)}
.btn-block{
  width:100%; padding:11px; border-radius:9px; border:1px solid var(--border);
  background:#fff; color:var(--navy-800); font-weight:700; font-size:13px; cursor:pointer;
}
.btn-block:hover{background:var(--gold-soft); border-color:var(--gold)}
.template-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.template-card{
  border:1px solid var(--border); border-radius:10px; padding:12px 8px; text-align:center;
  cursor:pointer; background:#fff; font-size:12px; font-weight:700; color:var(--navy-800);
}
.template-card:hover{border-color:var(--gold); background:var(--gold-soft)}
.size-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px}
.size-card{
  border:1px solid var(--border); border-radius:10px; padding:10px 8px; text-align:center;
  cursor:pointer; background:#fff; font-size:12px; color:var(--text)
}
.size-card.active{border-color:var(--gold); background:var(--gold-soft); color:var(--gold-dark); font-weight:700}
.pos-grid-wrap{display:flex; justify-content:center; margin-bottom:14px}
.pos-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:6px}
.pos-cell{
  border:1px solid var(--border); border-radius:8px; background:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.pos-cell:hover{border-color:var(--gold); background:var(--gold-soft)}
.pos-cell:focus-visible{outline:2px solid var(--gold-light); outline-offset:1px}
.pos-dot{width:9px;height:9px;border-radius:50%;background:var(--navy-600)}
.pos-cell:hover .pos-dot{background:var(--gold-dark)}
.layer-list{display:flex;flex-direction:column;gap:6px}
.layer-row{
  display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--border);
  border-radius:8px; background:#fff; font-size:12px; cursor:pointer; color:var(--text)
}
.layer-row:hover{border-color:var(--gold)}
.layer-row.active{border-color:var(--gold); background:var(--gold-soft)}
.layer-row .layer-icon{width:16px;text-align:center;color:var(--text-muted); font-weight:700}

/* Preview overlay */
.preview-overlay{
  position:fixed; inset:0; background:var(--navy-900); z-index:50;
  display:flex; flex-direction:column;
}
.preview-topbar{
  height:var(--topbar-h); flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; background:var(--navy-800); border-bottom:1px solid var(--navy-700);
}
.preview-topbar .pill-btn{background:transparent; color:#fff; border-color:rgba(255,255,255,.25)}
.preview-topbar .pill-btn:hover{background:rgba(255,255,255,.08)}
.preview-topbar .pill-primary{background:var(--gold); color:var(--navy-900); border-color:var(--gold)}
.preview-topbar .icon-btn{color:#fff}
.preview-topbar .icon-btn:hover{background:rgba(255,255,255,.1)}
.preview-stage{flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; padding:20px}
.preview-stage img{max-width:100%; max-height:100%; box-shadow:0 8px 30px rgba(0,0,0,.4); border-radius:2px}

/* Toast */
.toast{
  position:fixed; bottom: 86px; left:50%; transform:translateX(-50%);
  background:var(--navy-900); color:#fff; padding:10px 16px; border-radius:999px; font-size:13px;
  z-index:90; box-shadow:0 4px 14px rgba(0,0,0,.3);
}
@media(min-width:900px){ .toast{bottom:24px} }

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* [hidden] must win over any later display rule on the same element
   (.preview-overlay's display:flex otherwise overrides the browser's
   default [hidden]{display:none}, leaving it invisible but still
   intercepting clicks over the whole page). */
[hidden]{display:none !important}

.template-card{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.tpl-sw{display:block;height:34px;border-radius:6px;border:1px solid rgba(0,0,0,.12);background:#fff}
.tpl-name{display:block}

.tpl-group{margin-top:16px}
.tpl-size{display:block;font-size:11px;color:var(--muted,#6b7076)}

/* Round 64 additions */
.btn-block.gold{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.btn-block.gold:hover{background:var(--gold-light)}
.btn-block + .btn-block{margin-top:8px}
.canvas-selection-bar{max-width:calc(100% - 16px);bottom:10px}
.small-note{font-size:12px;color:var(--text-muted);line-height:1.45;margin:8px 0 0}
.verse-msg{font-size:12.5px;margin-top:8px;line-height:1.45}
.verse-msg.err{color:var(--danger)}
.check-row{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:10px 0}
.check-row input{width:18px;height:18px;accent-color:var(--gold-dark)}

/* Export sheet */
.preview-overlay{overscroll-behavior:contain}
.export-title{color:#fff;font-size:15px}
.export-body{flex:1;min-height:0;overflow-y:auto;background:var(--panel);display:flex;flex-direction:column}
.export-body .preview-stage{flex:0 0 auto;max-height:42vh;background:var(--canvas-mat);padding:12px}
.export-body .preview-stage img{max-height:38vh}
.export-actions{padding:14px 16px calc(20px + env(safe-area-inset-bottom));max-width:520px;width:100%;margin:0 auto}
.gif-panel{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.gif-panel img{display:block;max-width:100%;max-height:40vh;margin:10px auto 0;border-radius:6px}
.gif-result-actions{margin-top:10px}
#gif-preview{display:block;max-width:100%;height:auto;margin:10px auto 0;border-radius:8px}
@media(min-width:900px){
  .export-body{flex-direction:row;align-items:stretch}
  .export-body .preview-stage{flex:1;max-height:none}
  .export-body .preview-stage img{max-height:80vh}
  .export-actions{width:380px;flex-shrink:0;margin:0;overflow-y:auto;border-left:1px solid var(--border)}
}

/* Size dialog */
.dim{position:fixed;inset:0;background:rgba(12,23,39,.55);z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}
.dlg{background:#fff;border-radius:16px;padding:18px;max-width:380px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.dlg h4{margin:0 0 6px;font-size:16px;color:var(--navy-800)}
.dlg p{margin:0 0 12px;font-size:13px;color:var(--text-muted);line-height:1.45}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:12.5px;line-height:1.4;cursor:pointer;min-height:48px}
.opt.on{border-color:var(--gold);background:var(--gold-soft)}
.opt input{margin-top:3px;width:18px;height:18px;accent-color:var(--gold-dark);flex:0 0 auto}
.dlg .btn-block{margin-top:6px}

.load-fail{position:fixed;left:16px;right:16px;top:70px;z-index:95;background:#fff;border:1px solid var(--danger);color:var(--text);border-radius:12px;padding:14px 16px;font-size:13px;line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.acct-box{margin-top:16px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.acct-box b{display:block;font-size:12.5px;color:var(--navy-700);margin-bottom:6px}
.acct-box .btn-block{margin-top:6px}
.acct-box a{color:var(--gold-dark);font-weight:700}

.small-note.warn{color:#b3261e;font-weight:600}
.btn-block:disabled{opacity:.5;cursor:not-allowed}

.rec-script{white-space:pre-wrap;font-size:19px;line-height:1.45;padding:12px;margin:8px 0;border:1px solid var(--border);border-radius:10px;background:var(--canvas-mat);color:var(--text);max-height:34vh;overflow-y:auto}

/* Round 88b: phone fit. The tools strip used to scroll sideways (9 tools x 68px); it now wraps into a grid so every tool is visible. */
@media(max-width:899px){
  .tools-panel{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); gap:2px;
    height:auto; max-height:34vh; overflow-x:hidden; overflow-y:auto;
    padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  }
  .tool-btn{width:auto; min-width:0; min-height:48px}
  .topbar{padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right))}
}