/* ============================================================
   Paperflip — dashboard.css   (the builder: index.html)
   Requires styles/base.css for tokens + reset.

   CONTENTS
     1. App chrome ......... top bar, stage pills, buttons, toast
     2. Dashboard home ..... "Your forms", saved list, responses
     3. Create modal ....... the + Create form chooser
     4. Editor ............. builder panes, document tab, field states
     5. Field cards ........ (legacy list styles, still used by the fill screen)
     6. Fill screen ........ inputs, readouts, document preview
     7. Responsive & print
   ============================================================ */

body{font-size:14px}

/* ============================================================
   1. App chrome
   ============================================================ */
.app{display:flex;flex-direction:column;height:100vh}
.bar{display:flex;align-items:center;gap:24px;padding:0 20px;height:56px;flex:none;background:var(--sheet);border-bottom:1px solid var(--rule)}
.mark{font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.mark span{color:var(--ink-soft);letter-spacing:0;text-transform:none;font-family:var(--sans);margin-left:10px}
.bar-actions{display:flex;gap:8px;align-items:center;margin-left:auto}

.btn{font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border-radius:2px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink)}
.btn:hover{border-color:var(--ink-soft)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.btn-primary:hover{background:#0D141D}
.btn-ghost{border-color:transparent;background:none;color:var(--ink-soft)}
.btn-ghost:hover{color:var(--ink);background:var(--rule-soft)}
.btn:disabled{opacity:.4;cursor:default}
.btn-sm{padding:3px 9px;font-size:11.5px}
.pill{display:inline-block;min-width:16px;padding:0 4px;margin-left:5px;border-radius:8px;background:var(--slot);color:var(--ink);font-family:var(--mono);font-size:10px;text-align:center}

main{flex:1;min-height:0;position:relative}
.stage{position:absolute;inset:0;display:none;min-height:0}
.stage.on{display:flex}

/* ============================================================
   2. Dashboard home  (#s-upload)
   The "Your forms" screen: header + create button, the saved
   forms list, and the responses collected from the tablet.
   ============================================================ */
#s-upload,#s-submissions{align-items:flex-start;justify-content:center;padding:32px 24px;overflow:auto}

/* ============================================================
   App builder: top bar + left panel + canvas + right panel
   ============================================================ */
#s-app{flex-direction:column;min-height:0;padding:0}
.b-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;flex:none;background:var(--sheet);border-bottom:1px solid var(--rule)}
.b-name{font:inherit;font-size:15px;font-weight:600;padding:6px 9px;border:1px solid transparent;border-radius:3px;background:none;color:var(--ink);min-width:180px}
.b-name:hover{border-color:var(--rule-soft)}
.b-name:focus{outline:none;border-color:var(--ink);background:var(--sheet)}
.b-bar-r{margin-left:auto;display:flex;gap:8px;flex:none}
.b-bar .app-url{margin:0;padding:5px 9px;font-size:11.5px}

.builder{flex:1;display:flex;min-height:0}
.b-left,.b-right{flex:0 0 260px;background:var(--sheet);display:flex;flex-direction:column;overflow:auto;min-height:0}
.b-left{border-right:1px solid var(--rule)}
.b-right{border-left:1px solid var(--rule);flex-basis:300px}
.b-sec{display:flex;align-items:center;gap:8px;padding:14px 12px 4px}
.b-sec h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin-right:auto}
.b-props{padding-bottom:20px}
.b-panel-pad{padding:0 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* the canvas: a tablet-shaped frame showing the real elements */
/* The canvas fills the whole middle section and IS the tablet screen: same
   background, same 820px reading width as kiosk .wrap, same 17px base size.
   So what you arrange here is what the tablet shows, at the same proportions. */
.b-canvas{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* the themed screen: fills the section, and wears the app/form colours */
.b-screen{flex:1;min-height:0;overflow:auto;background:var(--paper)}
.b-screen[hidden]{display:none}
.b-frame{width:100%;max-width:none;margin:0}
/* the page itself keeps the tablet's 820px reading width, centred */
/* padding here must match kiosk .screen, or the canvas stops matching the tablet */
.b-phone{width:100%;max-width:820px;margin:0 auto;background:transparent;border:0;
         padding:26px 32px 64px;min-height:100%;font-size:17px;color:var(--ink)}
.b-empty{text-align:center;color:var(--ink-soft);padding:48px 12px;font-size:14px}

/* click-to-select affordances layered over the real element */
.b-el{position:relative;border:2px solid transparent;border-radius:6px;padding:2px;cursor:pointer}
.b-el:hover{border-color:var(--rule)}
.b-el.on{border-color:var(--ink)}
.b-el .b-tools{position:absolute;top:-11px;right:6px;display:none;gap:2px;background:var(--ink);border-radius:3px;padding:2px}
.b-el:hover .b-tools,.b-el.on .b-tools{display:flex}
.b-tools button{font:inherit;font-size:11px;line-height:1;padding:3px 6px;border:0;border-radius:2px;background:none;color:#fff;cursor:pointer}
.b-tools button:hover{background:rgba(255,255,255,.22)}
.b-tools button:disabled{opacity:.35;cursor:default}
/* the canvas is a preview: don't let the real controls steal the click */
.b-el .card,.b-el .el-btn,.b-el .el-link{pointer-events:none}

/* page rows in the left panel */
.pg-row{display:flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;border-left:2px solid transparent}
.pg-row:hover{background:var(--rule-soft)}
.pg-row.on{background:var(--rule-soft);border-left-color:var(--ink)}
.pg-row .nm{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-row .mut{opacity:.45}

/* property rows in the right panel */
.p-row{display:block;padding:7px 12px}
.p-row>span{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:4px}
.p-row .fld-in,.p-row .sel{width:100%;max-width:none;margin:0}
.p-row textarea.fld-in{resize:vertical;line-height:1.45}
.p-check{display:flex;align-items:center;gap:8px}
.p-check>span{margin:0;font-size:12.5px;color:var(--ink)}
.p-check input{margin:0;cursor:pointer}
.p-col{display:flex;align-items:center;gap:6px}
.p-col input[type=color]{width:38px;height:28px;padding:0;border:1px solid var(--rule);border-radius:3px;background:none;cursor:pointer}
.p-head{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:14px 12px 2px;border-top:1px solid var(--rule-soft);margin-top:8px}

/* --- app editor --- */
.sec-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin:26px 0 8px}
.fld-l{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:4px}
.fld-in{display:block;width:100%;max-width:380px;font:inherit;font-size:15px;padding:9px 11px;margin-top:5px;border:1px solid var(--rule);border-radius:4px;background:var(--sheet);color:var(--ink)}
.fld-in:focus{outline:none;border-color:var(--ink)}
.app-url{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:10px 12px;background:var(--calc-soft);border:1px solid var(--calc);border-radius:4px;font-size:12.5px}
.app-url code{font-size:12px;word-break:break-all}
.app-row{display:flex;align-items:center;gap:10px;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:2px;padding:10px 12px;margin-bottom:4px}
.app-row .nm{flex:1;min-width:0}
.app-ord{display:flex;gap:2px}
.app-ord button{font:inherit;font-size:12px;line-height:1;padding:5px 8px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);border-radius:2px;cursor:pointer}
.app-ord button:disabled{opacity:.3;cursor:default}
.app-ord button:hover:not(:disabled){border-color:var(--ink)}
.app-row.on{border-color:var(--ink)}
/* element rows in the page editor */
.el-row{background:var(--sheet);border:1px solid var(--rule-soft);border-radius:3px;margin-bottom:6px;padding:8px 10px}
.el-top{display:flex;align-items:center;gap:10px}
.el-top .nm{flex:1;min-width:0;font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.el-set{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.el-set:empty{display:none}
.el-set .look-i{flex:1;min-width:190px}
.el-set textarea.fld-in{resize:vertical}
.palette{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:0 12px 6px}
/* --- look / appearance controls --- */
.look{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.look-i{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.look-i input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--rule);border-radius:3px;background:none;cursor:pointer}
.icon-in{width:52px;font:inherit;font-size:18px;text-align:center;padding:3px 4px;border:1px solid var(--rule);border-radius:3px;background:var(--sheet)}
.icon-pick{font-size:16px;line-height:1;padding:4px 5px;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer}
.icon-pick:hover{border-color:var(--ink)}
.modal-div{text-align:center;color:var(--ink-soft);font-size:11.5px;margin:6px 0 10px;text-transform:uppercase;letter-spacing:.1em}

/* --- saved forms list --- */
.recent{margin-top:32px;text-align:left}
.recent h2{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin-bottom:8px}
.recent-row{display:flex;align-items:center;gap:12px;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:2px;padding:10px 12px;margin-bottom:4px}
.recent-row button:first-child{flex:1;text-align:left;font:inherit;background:none;border:0;cursor:pointer;color:var(--ink)}
.recent-row time{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.ftag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:3px;background:var(--rule-soft);color:var(--ink-soft);flex:none}
.resp-snip{font-family:var(--mono);font-size:11px;color:var(--ink-soft);white-space:pre-wrap;max-height:44px;overflow:hidden;margin-top:3px}
.resp-card{background:var(--sheet);border:1px solid var(--rule-soft);border-radius:3px;padding:10px 12px;margin-bottom:6px}
.resp-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.resp-name{font-weight:500}
.resp-head time{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.resp-head .btn:first-of-type{margin-left:auto}
.resp-tbl{border-collapse:collapse;width:100%;font-size:13px}
.resp-tbl td{padding:4px 10px 4px 0;vertical-align:top;border-bottom:1px solid var(--rule-soft)}
.resp-tbl tr:last-child td{border-bottom:0}
.resp-tbl td:first-child{color:var(--ink-soft);white-space:nowrap;width:1%;padding-right:18px}

/* --- header + empty state --- */
.dash{width:100%;max-width:860px}
.dash-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:26px}
.dash-head h1{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2}
.dash-sub{color:var(--ink-soft);margin-top:4px;font-size:13.5px}
.dash-head .btn-lg{margin-left:auto;flex:none}
.btn-lg{font-size:14px;padding:10px 18px}
.dash-empty{background:var(--sheet);border:1px dashed var(--rule);border-radius:8px;padding:56px 24px;text-align:center;color:var(--ink-soft)}
.dash-empty p{margin-bottom:16px;font-size:15px}
/* ============================================================
   3. Create modal  (the "+ Create form" chooser)
   ============================================================ */
.modal{position:fixed;inset:0;background:rgba(24,34,47,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:24px}
.modal[hidden]{display:none}
.modal-card{background:var(--sheet);border-radius:10px;max-width:460px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.modal-h{font-family:var(--serif);font-size:22px;margin-bottom:16px}
.create-opt{display:block;width:100%;text-align:left;font:inherit;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:13px 15px;margin-bottom:10px;cursor:pointer}
.create-opt:hover{border-color:var(--ink);background:#FCFDFE}
.create-opt b{display:block;font-size:14.5px;font-weight:600}
.create-opt span{display:block;color:var(--ink-soft);font-size:12px;margin-top:3px;line-height:1.4}
.modal-cancel{margin-top:4px}

/* ============================================================
   4. Editor  (#s-template)
   The form builder: palette on the left, the live form as the
   canvas, field properties on the right. The Document tab holds the
   contract text for document-layout templates.
   ============================================================ */
#s-template{flex-direction:column;min-height:0}

/* auto-layout: document is generated from fields, so it's read-only */
.auto-toggle{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);cursor:pointer;user-select:none}
.auto-toggle input{margin:0;cursor:pointer}
#editor.is-auto{background:var(--rule-soft);color:var(--ink-soft);cursor:not-allowed}
.flag{display:flex;align-items:baseline;gap:10px;flex:none;padding:7px 20px;font-size:12.5px;border-bottom:1px solid var(--rule-soft);background:var(--sheet)}
.flag[hidden]{display:none}
.flag b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;flex:none;padding:1px 6px;border-radius:2px;background:var(--rule-soft);color:var(--ink-soft)}
.flag.exact{background:#F1F9F6} .flag.exact b{background:var(--go);color:#fff}
.flag.rebuilt{background:var(--slot-soft)} .flag.rebuilt b{background:#8A6D00;color:#fff}
.flag.rough{background:#FCF2F4} .flag.rough b{background:var(--stamp);color:#fff}

.split{flex:1;display:flex;min-height:0}
.col{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1}
.col+.col{border-left:1px solid var(--rule)}
.col-defs{flex:0 0 480px;background:var(--paper)}
.col-head{display:flex;align-items:center;gap:8px;padding:9px 14px;flex:none;border-bottom:1px solid var(--rule-soft);background:var(--sheet)}
.col-head h2{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin-right:auto}
#editor{flex:1;width:100%;resize:none;font-family:var(--mono);font-size:12.5px;line-height:1.75;padding:16px 18px;border:0;background:var(--sheet);color:var(--ink)}
#editor:focus{outline:none;background:#FCFDFE}
#editor.drag-over{background:var(--slot-soft);box-shadow:inset 0 0 0 2px var(--slot)}
.tpl-foot{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--rule);background:var(--sheet)}
.tpl-foot .grow{margin-left:auto}

/* ============================================================
   5. Field cards  (the field editor, one card per field)
   ============================================================ */
.cards{flex:1;overflow:auto;padding:12px}

.fcard{background:var(--sheet);border:1px solid var(--rule-soft);border-radius:3px;margin-bottom:8px}
.fcard.is-calc{border-color:var(--calc)}
.fcard.is-bad{border-color:#E8B9C2}
.fcard.drop-into{border-top:2px solid var(--ink)}
.fcard.dragging-src{opacity:.5}
.fcard-top{display:flex;align-items:center;gap:6px;padding:8px}
.show-tog{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-soft);cursor:pointer;user-select:none;white-space:nowrap;padding:0 4px}
.show-tog input{margin:0;cursor:pointer}
.f-name{flex:1;min-width:0;font:inherit;font-size:13.5px;font-weight:500;padding:5px 7px;border:1px solid transparent;border-radius:2px;background:none;color:var(--ink)}
.f-name:hover{border-color:var(--rule-soft)}
.f-name:focus{outline:none;border-color:var(--ink);background:var(--sheet)}
.f-name.blank{border-color:#E8B9C2;background:#FCF2F4}
.sel{font:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--rule);border-radius:2px;background:var(--sheet);color:var(--ink);cursor:pointer}
.sel:focus{outline:none;border-color:var(--ink)}
.f-del{font:inherit;font-size:16px;line-height:1;padding:3px 7px;border:1px solid transparent;border-radius:2px;background:none;color:var(--ink-soft);cursor:pointer}
.f-del:hover{background:#FCF2F4;color:var(--stamp)}
.f-grip{flex:none;cursor:grab;color:var(--ink-soft);font-size:14px;line-height:1;padding:5px 3px;border-radius:2px;user-select:none;-webkit-user-select:none;touch-action:none}
.f-grip:hover{background:var(--rule-soft);color:var(--ink)}
.f-grip:active{cursor:grabbing}
.f-grip.dragging{opacity:.5}
.fcard.dragging-src{border-color:var(--slot);box-shadow:0 0 0 1px var(--slot)}
.f-body{padding:0 8px 8px;display:flex;flex-direction:column;gap:6px}
.f-body:empty{display:none}
.f-hint{font-size:11.5px;color:var(--ink-soft)}

.opts{display:flex;flex-direction:column;gap:4px}
.opt{display:flex;gap:6px;align-items:center}
.opt input{flex:1;font:inherit;font-size:12.5px;padding:4px 7px;border:1px solid var(--rule);border-radius:2px;background:var(--sheet);color:var(--ink)}
.opt input:focus{outline:none;border-color:var(--ink)}
.opt button{font:inherit;font-size:14px;line-height:1;padding:2px 6px;border:0;background:none;color:var(--ink-soft);cursor:pointer;border-radius:2px}
.opt button:hover{background:#FCF2F4;color:var(--stamp)}

.ftools{display:flex;gap:6px;align-items:center}
.ftools .sel{font-size:11.5px;padding:3px 4px}
.ftools .spacer{margin-left:auto}
.f-code{width:100%;resize:none;overflow:hidden;font-family:var(--mono);font-size:12.5px;line-height:1.6;padding:7px 9px;border:1px solid var(--calc);border-radius:2px;background:var(--calc-soft);color:var(--ink);min-height:32px}
.f-code:focus{outline:none;border-color:var(--ink);background:var(--sheet)}
.f-out{font-size:12.5px;padding:1px 2px;display:flex;gap:6px;align-items:baseline}
.f-out i{font-family:var(--mono);font-style:normal;color:var(--ink-soft);flex:none}
.f-out span{word-break:break-word}
.f-out.void span{color:var(--ink-soft);font-style:italic}
.f-out.err{color:var(--stamp)}
.f-out.err i{color:var(--stamp)}
.empty-state{text-align:center;padding:36px 20px;color:var(--ink-soft);font-size:13px}

/* cheatsheet */
.cheat{border-top:1px solid var(--rule);background:var(--sheet);flex:none}
.cheat summary{padding:8px 16px;cursor:pointer;font-size:12px;color:var(--ink-soft);list-style:none;user-select:none}
.cheat summary::-webkit-details-marker{display:none}
.cheat summary::before{content:'▸ ';font-size:9px}
.cheat[open] summary::before{content:'▾ '}
.cheat summary:hover{color:var(--ink)}
.cheat-body{padding:0 16px 16px;max-height:300px;overflow:auto}
.cheat-body h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin:14px 0 5px}
.cheat-body h4:first-child{margin-top:0}
.cheat-body p{font-size:12px;color:var(--ink-soft);margin-bottom:8px}
.cheat-body table{border-collapse:collapse;width:100%;font-size:12px}
.cheat-body td{padding:3px 10px 3px 0;vertical-align:top;border-bottom:1px solid var(--rule-soft)}
.cheat-body td:first-child{font-family:var(--mono);white-space:nowrap;width:1%}
.cheat-body td:last-child{color:var(--ink-soft)}

/* ============================================================
   6. Fill screen  (#s-fill)
   Inputs on the left, live document preview on the right.
   ============================================================ */
#s-fill{min-height:0}
/* previewing a FORM: no document pane, just the fields, centred */
#s-fill.is-form .pane-out{display:none}
#s-fill.is-form .pane-fields{width:auto;flex:1;border-right:0;background:var(--paper)}
#s-fill.is-form .fields{max-width:620px;margin:0 auto;width:100%}
#s-fill.is-form .pane-head{max-width:620px;margin:0 auto;width:100%;border-bottom:0}
.pane-fields{width:400px;flex:none;background:var(--sheet);border-right:1px solid var(--rule);display:flex;flex-direction:column;min-height:0}
.pane-head{padding:16px 20px;border-bottom:1px solid var(--rule-soft);flex:none}
.pane-head h2{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.pane-head .count{font-size:12px;color:var(--ink-soft);margin-top:4px}
.pane-head .count b{color:var(--stamp);font-weight:500}
.fields{flex:1;overflow:auto;padding:8px 20px 20px}
.field{padding:10px 0;border-bottom:1px solid var(--rule-soft)}
.field:last-child{border-bottom:0}
.field label{display:flex;gap:6px;align-items:baseline;font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-bottom:5px}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:1px 5px;border-radius:2px;background:var(--calc-soft);border:1px solid var(--calc);color:var(--ink-soft)}
.field-in{width:100%;font:inherit;font-size:13.5px;padding:7px 9px;border:1px solid var(--rule);border-radius:2px;background:var(--sheet);color:var(--ink)}
textarea.field-in{resize:vertical;min-height:64px;line-height:1.5}
/* a text field: one line to start, grows with the paragraph */
textarea.field-in.grow{min-height:0;resize:none;overflow:hidden;line-height:1.45}
.field-in:focus{outline:none;border-color:var(--ink);background:var(--slot-soft)}
.field.lit .field-in{border-color:var(--ink);background:var(--slot-soft)}
.checks{display:flex;flex-direction:column;gap:7px;padding:2px 0}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;user-select:none}
.chk input{margin:0;cursor:pointer;width:16px;height:16px}
.field-row{display:flex;gap:6px}
.field-row .field-in{flex:1}
.fmt{font:inherit;font-size:11px;font-family:var(--mono);border:1px solid var(--rule);border-radius:2px;background:var(--sheet);color:var(--ink-soft);padding:0 4px;flex:none}
.readout{padding:7px 9px;border:1px solid var(--calc);border-radius:2px;background:var(--calc-soft);font-size:13.5px;min-height:34px}
.readout.void{color:var(--ink-soft);font-style:italic}
.readout.err{background:#FCF2F4;border-color:#E8B9C2;color:var(--stamp);font-size:12.5px}
.formula{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-top:4px;word-break:break-word}

.pane-out{flex:1;min-width:0;display:flex;flex-direction:column;padding:20px;gap:12px;min-height:0}
.out-head{display:flex;align-items:center;gap:10px;flex:none}
.out-head h2{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:400;margin-right:auto}
#preview{flex:1;overflow:auto;background:var(--sheet);border:1px solid var(--rule);border-radius:3px;padding:40px 48px;font-family:var(--serif);font-size:15px;line-height:1.7;white-space:pre-wrap;word-wrap:break-word}
.slot{background:var(--slot-soft);border-bottom:1px solid var(--slot);border-radius:1px;padding:0 2px;cursor:pointer}
.slot.done{background:var(--slot);border-bottom-color:#E0C43A}
.slot.calc{background:var(--calc-soft);border-bottom-color:var(--calc)}
.slot.calc.done{background:#CDE6F8;border-bottom-color:#6FA8D4}
.slot.blank{font-family:var(--mono);font-size:.8em;color:var(--ink-soft);letter-spacing:.05em}
.slot.bad{background:#FCF2F4;border-bottom-color:var(--stamp);color:var(--stamp)}
.slot:hover{outline:1px solid var(--ink)}

#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);background:var(--ink);color:var(--sheet);padding:9px 18px;border-radius:2px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:50;max-width:560px;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.bad{background:var(--stamp)}

/* ============================================================
   7. Responsive & print
   ============================================================ */
@media (max-width:980px){
  .split{flex-direction:column}
  .col+.col{border-left:0;border-top:1px solid var(--rule)}
  .col-defs{flex:1 1 auto}
  #s-fill{flex-direction:column}
  .pane-fields{width:auto;border-right:0;border-bottom:1px solid var(--rule);max-height:45%}
  #preview{padding:24px}
}
@media print{
  .bar,.pane-fields,.out-head,#toast{display:none!important}
  body,.app,main{height:auto;background:#fff}
  .stage{position:static}
  .pane-out{padding:0}
  #preview{border:0;overflow:visible;padding:0;font-size:11pt}
  .slot{background:none;border:0}
}

/* ---- form builder: canvas tabs, document pane, field states ---- */
.b-tabs{display:flex;gap:4px;padding:9px 16px;flex:none;background:#fff;border-bottom:1px solid #C6D0DB}
.b-tabs button{font:inherit;font-size:12px;padding:6px 14px;border:1px solid var(--rule);border-radius:3px;background:var(--sheet);color:var(--ink-soft);cursor:pointer}
.b-tabs button.on{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.b-tabs button[hidden]{display:none}
.doc-pane{display:flex;flex-direction:column;min-height:0;flex:1;background:var(--sheet);overflow:hidden}
.doc-pane[hidden]{display:none}
.doc-pane #editor{flex:1;min-height:280px;width:100%;resize:none;font-family:var(--mono);font-size:12.5px;line-height:1.75;padding:14px 16px;border:0;background:var(--sheet);color:var(--ink)}
.doc-pane #editor:focus{outline:none}
.doc-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--rule-soft);font-size:11.5px}
.doc-chips:empty{display:none}
.doc-chips .mut{color:var(--ink-soft);margin-right:2px}
.chip{font-size:11.5px;padding:3px 8px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);cursor:grab;user-select:none}
.chip:active{cursor:grabbing}
.doc-foot{padding:8px 14px;border-top:1px solid var(--rule-soft)}

.b-el.b-off{opacity:.55}
.b-el.b-bad{border-color:#E8B9C2}
.b-off-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.b-err{color:var(--stamp);font-size:12px;margin-top:5px}

/* ---- submissions table ---- */
.subs-tbl-wrap{overflow:auto;background:var(--sheet);border:1px solid var(--rule-soft);border-radius:3px;max-height:70vh}
.subs-tbl{border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.subs-tbl th,.subs-tbl td{padding:7px 12px;border-bottom:1px solid var(--rule-soft);text-align:left;vertical-align:top}
.subs-tbl th{position:sticky;top:0;background:var(--sheet);font-weight:500;color:var(--ink-soft);font-size:11px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--rule);z-index:1}
.subs-tbl tbody tr:hover{background:var(--rule-soft)}
.subs-tbl td.when{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.subs-tbl td.wrap{white-space:normal;max-width:320px}

/* grouped field palette */
.pal-g{width:100%;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:8px 0 2px}
.pal-g:first-child{margin-top:0}

/* ---- drag and drop on the canvas ---- */
.b-el[draggable="true"]{cursor:grab}
.b-el.dragging{opacity:.4}
.b-el.drop-before::before{content:'';position:absolute;left:0;right:0;top:-5px;height:3px;background:var(--ink);border-radius:2px}
.drop-end::after{content:'';display:block;height:3px;background:var(--ink);border-radius:2px;margin-top:8px}
.palette [draggable="true"]{cursor:grab}
.palette [draggable="true"]:active{cursor:grabbing}
/* the canvas is a preview: clicks select the block instead of working the control */
.b-el input,.b-el select,.b-el textarea,.b-el button,.b-el a{pointer-events:none}
.b-el .b-tools,.b-el .b-tools button{pointer-events:auto}

/* ---- emoji picker ---- */
.icon-btn{font-size:20px;line-height:1;padding:4px 9px;border:1px solid var(--rule);border-radius:3px;background:var(--sheet);cursor:pointer}
.icon-btn:hover{border-color:var(--ink)}
.emo-panel{max-height:300px;overflow:auto;margin:0 12px 8px;border:1px solid var(--rule-soft);border-radius:4px}
.emo-panel[hidden]{display:none}
.emo-g{position:sticky;top:0;background:var(--sheet);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:6px 9px;border-bottom:1px solid var(--rule-soft)}
.emo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:2px;padding:6px}
.emo{font-size:18px;line-height:1.2;padding:4px 0;border:1px solid transparent;border-radius:3px;background:none;cursor:pointer}
.emo:hover{background:var(--rule-soft)}
.emo.on{border-color:var(--ink);background:var(--rule-soft)}

.emo-search{position:sticky;top:0;z-index:2;background:var(--sheet);padding:7px;border-bottom:1px solid var(--rule-soft)}
.emo-search input{width:100%;font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--rule);border-radius:3px;background:var(--sheet);color:var(--ink)}
.emo-search input:focus{outline:none;border-color:var(--ink)}
.emo-none{padding:18px 12px;text-align:center;font-size:12.5px;color:var(--ink-soft)}

/* the look panel while a form follows its app: readable, plainly not editable */
.look.is-off{opacity:.5}
.look.is-off *{cursor:not-allowed}

/* ══ 9. SIGN-IN GATE ══════════════════════════════════════════════════
   Covers the dashboard until there is a session. Only index.html has one —
   the kiosk is anonymous on purpose. */
.gate{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
      background:var(--paper);padding:24px}
.gate[hidden]{display:none}
.gate-card{width:100%;max-width:360px;background:var(--sheet);border:1px solid var(--rule);
           border-radius:var(--radius,12px);padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.gate-card h1{font-size:26px;font-weight:600;margin:0}
.gate-sub{margin:0;color:var(--ink-soft);font-size:13.5px}
.gate-f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-soft)}
.gate-f input{font:inherit;font-size:14px;padding:10px 11px;border:1px solid var(--rule);
              border-radius:5px;background:var(--sheet);color:var(--ink)}
.gate-f input:focus{outline:none;border-color:var(--ink)}
.gate-go{width:100%;justify-content:center;padding:11px}
.gate-swap{align-self:center}
.gate-err{margin:0;font-size:12.5px;color:#b42318;background:#fef3f2;border:1px solid #fecdca;
          border-radius:5px;padding:8px 10px}
.gate-err[hidden]{display:none}
.gate-google{width:100%;justify-content:center;gap:9px;padding:11px;
             border:1px solid var(--rule);background:var(--sheet);color:var(--ink)}
.gate-google:hover{border-color:var(--ink)}
.g-mark{font-weight:700;font-family:var(--sans);color:#4285f4}
.gate-or{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:12px}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--rule-soft)}
/* who is signed in, in the top bar */
.who{font-size:12.5px;color:var(--ink-soft);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who[hidden]{display:none}

/* ══ 10. FORM SETTINGS TAB ════════════════════════════════════════════ */
.set-pane{padding:0 20px 24px;overflow:auto}
.set-group{max-width:520px;margin-top:6px}
.set-group h3{font-size:13px;font-weight:600;margin:0 0 10px;color:var(--ink)}
.set-row{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-soft)}
.set-row input{font:inherit;font-size:14px;padding:10px 11px;border:1px solid var(--rule);
               border-radius:5px;background:var(--sheet);color:var(--ink)}
.set-row input:focus{outline:none;border-color:var(--ink)}
.set-note{margin:8px 0 0;font-size:12px;color:var(--ink-soft);line-height:1.5}
.set-note.bad{color:#b42318}

/* per-row actions in the submissions table */
.subs-tbl .row-act{width:1%;white-space:nowrap;text-align:right}

/* one row per notification address */
#set-notify-list{display:flex;flex-direction:column;gap:7px}
.set-mail{display:flex;gap:7px;align-items:center}
.set-mail input{flex:1;font:inherit;font-size:14px;padding:10px 11px;border:1px solid var(--rule);
                border-radius:5px;background:var(--sheet);color:var(--ink)}
.set-mail input:focus{outline:none;border-color:var(--ink)}
.set-mail [data-mail-del]{flex:none;font-size:16px;line-height:1;padding:6px 10px}
.set-mail [data-mail-del][hidden]{display:none}
#btn-add-mail{align-self:flex-start;margin-top:9px}

/* ══ 11. QR CODE ══════════════════════════════════════════════════════
   The tablet link, for pointing a camera at instead of typing a uuid. */
.qr-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
          background:rgba(0,0,0,.45);padding:24px}
.qr-modal[hidden]{display:none}
.qr-card{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius,12px);
         padding:26px;max-width:400px;width:100%;text-align:center}
.qr-card h2{font-size:17px;font-weight:600;margin:0 0 16px}
.qr-box{display:flex;justify-content:center}
/* the canvas is drawn far larger than shown, so it stays sharp when printed */
.qr-box canvas{width:260px;height:260px;image-rendering:pixelated;
               border:1px solid var(--rule-soft);border-radius:6px}
.qr-url{display:block;margin:14px 0 18px;font-size:11px;color:var(--ink-soft);word-break:break-all}
.qr-acts{display:flex;gap:8px;justify-content:center}
.qr-tip{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--ink-soft)}

/* ══ 12. OPTION CALCULATION VALUES ════════════════════════════════════ */
.ov-block{padding:2px 0 4px}
.ov-list{display:flex;flex-direction:column;gap:6px}
.ov-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ov-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.ov-row input{width:118px;flex:none;font:inherit;font-size:13px;padding:6px 8px;
              border:1px solid var(--rule);border-radius:5px;background:var(--sheet);color:var(--ink)}
.ov-row input:focus{outline:none;border-color:var(--ink)}