/* ============================================================
   Paperflip — elements.css

   The page ELEMENTS (heading, text, card, button, ...) as they
   appear to whoever is filling the form in. Loaded by BOTH the
   kiosk and the dashboard, because the builder canvas renders the
   very same markup from the very same registry (ELEMENTS in
   paperflip-core.js). One stylesheet, so the canvas cannot drift
   from the tablet.

   Everything here reads theme variables, so scoping a theme to any
   container (applyTheme(t, el)) restyles the elements inside it.
   ============================================================ */

.card{width:100%;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius,12px);padding:18px 22px;text-align:left;font:inherit;cursor:pointer;display:flex;flex-direction:row;align-items:center;gap:18px;transition:border-color .12s,transform .05s}
.card:hover{border-color:var(--ink)}
.card:active{transform:scale(.99)}
.card-ic{width:66px;height:66px;border-radius:var(--radius,12px);display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;flex:none}
.card b{font-size:20px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.page{display:flex;flex-direction:column;gap:var(--gap,18px)}
.page:empty{display:none}
.el{min-width:0}
.el-h{font-family:var(--sans);font-weight:600;font-size:24px;line-height:1.25}
.el-t{font-size:17px;line-height:1.55;white-space:pre-wrap}
.el-list{padding-left:22px;font-size:17px;line-height:1.6}
.el-img{max-width:100%;height:auto;display:block;border-radius:var(--radius,10px)}
.el-video{position:relative;padding-top:56.25%;border-radius:var(--radius,10px);overflow:hidden}
.el-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.el-btn{font:inherit;font-size:18px;font-weight:600;padding:15px 22px;border:0;border-radius:var(--radius,10px);background:var(--go);color:#fff;cursor:pointer;width:100%}
.el-link{font-size:17px;color:var(--go);text-decoration:underline;word-break:break-word}
.el-hr{border:0;border-top:1px solid var(--rule)}
.el-missing{color:var(--ink-soft);font-style:italic;font-size:15px}