/* lobod.rocks — brief questionnaires (rendered by scripts/briefs.mjs into a content page, driven by js/brief.js).
   Loaded after site.css and content.css, only on pages with "brief:" in their front matter. Mobile first.
   One step on screen at a time on a paper card, the site's cream ground behind it, blue for anything chosen. */

/* ---------- the page around the form ---------- */
/* the form gets its own sheet, so the page reads as blocks like the home page rather than as an article */
.bsheet{overflow-x:clip}
.bsheet>.cwrap{position:relative;z-index:1}
/* the trencadis ribbon rides the roofline between this block and the one below. It hangs off the lower sheet, not
   the upper one: sheets are stacked in document order, so drawn from the cream sheet it would end up under the wave.
   img/art/trencadis-band.svg carries the same curve at the same 560px period and phase, so the two edges are one edge.
   It is 3360px of shards generated once and never tiled, so no pattern repeats across the width. */
.cafter{position:relative}
.bband{position:absolute;left:0;right:0;top:-64px;height:70px;overflow:hidden;z-index:2;pointer-events:none}
.bband img{display:block;width:4480px;max-width:none;height:70px}

.bwrap{max-width:min(var(--measure),760px);margin:0 auto}

/* ---------- progress ---------- */
.bprog{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.bbar{position:relative;flex:1;height:6px;border-radius:99px;background:rgba(20,23,28,.1)}
.bbar i{position:relative;display:block;height:100%;width:0;min-width:22px;border-radius:99px;background:var(--blue);transition:width .45s var(--ease)}
/* the panot flower rides the head of the bar, the way the home page marks its own progress */
.bbar i::after{content:"";position:absolute;right:-8px;top:50%;width:16px;height:16px;transform:translateY(-50%);background:var(--blue);-webkit-mask:var(--panot) center/contain no-repeat;mask:var(--panot) center/contain no-repeat}
.bpct{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
/* quick or full: the same brief, with or without the optional questions */
.bmode{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 22px}
.bmode:empty{display:none}
.bmode button{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--line-l);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.bmode button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--paper)}

/* ---------- the card ---------- */
.bform{position:relative}
.bstep{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line-l);border-radius:22px;padding:32px 20px 22px;box-shadow:0 1px 0 rgba(20,23,28,.04),0 26px 60px -40px rgba(20,23,28,.55)}
/* a trencadis band along the top edge: uneven shards of the site's four colours, drawn rather than loaded */
.bstep::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,var(--blue) 0 14%,var(--terra) 14% 23%,var(--sun) 23% 31%,var(--blue-deep) 31% 44%,var(--lime) 44% 51%,var(--terra) 51% 62%,var(--blue) 62% 79%,var(--sun) 79% 87%,var(--blue-deep) 87% 100%)}
@media(min-width:721px){.bstep{padding:40px 34px 28px;border-radius:26px}}
.bstep-h{margin-bottom:26px}
.bnum{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink);background:var(--blue-tint);border-radius:99px;padding:5px 12px 5px 10px;margin-bottom:14px}
.bnum::before{content:"";width:11px;height:11px;flex:none;background:currentColor;-webkit-mask:var(--panot) center/contain no-repeat;mask:var(--panot) center/contain no-repeat}
.bstep-h h2{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 48;font-size:clamp(23px,3.4vw,31px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
html[lang="uk"] .bstep-h h2,html[lang="ru"] .bstep-h h2{font-family:var(--display-cyr);font-weight:800}
.bhint{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}

/* ---------- one question ---------- */
.bq{padding:18px 0;border-top:1px solid var(--line-l)}
.bq:first-of-type{border-top:0;padding-top:0}
.bq-l{display:block;font-size:16.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.bq-l i{font-style:normal;color:var(--terra);margin-left:.28em}
.bq-h{margin-top:6px;font-size:14px;line-height:1.5;color:var(--mute)}
.bq-i{display:block;width:100%;margin-top:12px;font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--ink);background:var(--ground);border:1px solid var(--line-l);border-radius:14px;padding:13px 15px;transition:border-color .18s,background .18s,box-shadow .18s;-webkit-appearance:none;appearance:none}
.bq-i::placeholder{color:var(--mute)}
.bq-i:focus{outline:0;background:var(--paper);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.bq-t{resize:vertical;min-height:104px}
.bq-other{margin-top:10px}
.bq.missing .bq-l{color:var(--terra)}
.bq.missing .bq-i,.bq.missing .bq-opts{border-color:var(--terra)}
.bq.missing .bq-opts{border-style:dashed;border-width:1px;border-radius:16px;padding:8px;margin-left:-8px;margin-right:-8px}

/* ---------- choices ---------- */
.bq-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;border:1px solid transparent}
.bopt{font-family:var(--sans);font-size:14.5px;line-height:1.3;color:var(--ink);background:var(--ground);border:1px solid var(--line-l);border-radius:99px;padding:10px 15px;cursor:pointer;text-align:left;transition:background .16s,border-color .16s,color .16s}
.bopt:hover{border-color:var(--ink-2)}
.bopt.on{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.bopt.on::before{content:"";display:inline-block;width:.72em;height:.72em;margin-right:.5em;vertical-align:-.02em;background:var(--paper);-webkit-mask:var(--panot) center/contain no-repeat;mask:var(--panot) center/contain no-repeat}
.bopt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- navigation ---------- */
.bnav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line-l)}
.bbtn{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;color:var(--paper);background:var(--blue);border:1px solid var(--blue);border-radius:99px;padding:14px 22px;cursor:pointer;text-decoration:none;transition:background .16s,border-color .16s,color .16s,opacity .16s}
.bbtn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.bbtn:disabled{opacity:.55;cursor:default}
.bbtn.ghost{color:var(--ink);background:transparent;border-color:var(--line-l)}
.bbtn.ghost:hover{border-color:var(--ink);background:transparent}
.bbtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.bnav .bbtn:not(.ghost){order:2}
.bsaved{order:3;margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
@media(max-width:520px){.bnav .bbtn{flex:1 1 auto;text-align:center}.bsaved{order:4;flex-basis:100%;margin-left:0;text-align:center}}
.blink{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--blue-ink);background:none;border:0;border-bottom:1px solid rgba(27,47,217,.35);padding:0 0 1px;cursor:pointer;transition:border-color .18s}
.blink:hover{border-color:currentColor}

/* ---------- review ---------- */
.brev{padding:20px 0;border-top:1px solid var(--line-l)}
.brev:first-of-type{border-top:0;padding-top:0}
.brev-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.brev-h h3{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 32;font-size:19px;line-height:1.2;letter-spacing:-.02em}
html[lang="uk"] .brev-h h3,html[lang="ru"] .brev-h h3{font-family:var(--display-cyr);font-weight:700}
.brev dl{display:grid;gap:10px}
.brev dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);line-height:1.4}
.brev dd{font-size:15.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;margin-top:3px}
.brev dd.empty{color:var(--chalk-2)}
.bsend{margin-top:8px}
.bside{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px}
.bnote{margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.bnote.bad{color:var(--terra)}
.bnote a{color:var(--blue-ink)}

/* ---------- sent ---------- */
.bdone{background:var(--dark);border-color:var(--dark);color:var(--chalk);text-align:center;padding:44px 22px 40px}
.bdone .bnum{color:var(--dark);background:var(--lime)}
.bdone h2{font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 60;font-size:clamp(26px,4vw,38px);line-height:1.08;letter-spacing:-.03em;color:var(--chalk)}
html[lang="uk"] .bdone h2,html[lang="ru"] .bdone h2{font-family:var(--display-cyr);font-weight:900}
.bdone-in{max-width:44ch;margin:0 auto}
.bdone p{margin-top:14px;font-size:16px;line-height:1.55;color:var(--chalk-2)}
.bdone .bnav{justify-content:center;border-top-color:var(--line-d)}
.bdone .bbtn.ghost{color:var(--chalk);border-color:var(--line-d)}
.bdone .bbtn.ghost:hover{border-color:var(--chalk)}
.bdone .bnote{color:var(--chalk-2)}
.bdone .bnote a{color:var(--lime)}

@media(prefers-reduced-motion:reduce){.bbar i{transition:none}}