/* batch2.css: the modules of the second five guides and the laboratory, in the kit. Reads tokens.css and blog.css.
   The one-page guide's drawings, the site-or-Instagram board, the preparation guide's note and outline, the
   responsive guide's captures, the WhatsApp guide's steps, address strip, link builder and QR note, and the
   laboratory page. No per-guide colours: brick decides, blue checks, white grounds carry ink only. */

/* ---- Steps in order (the WhatsApp guide's setup, the preparation guide's three readings): the home's honey circle
   with a brick numeral, brick rules between the steps */
.setup-steps,.extraction-list{list-style:none;padding:0;margin:24px 0;counter-reset:setup}
.setup-steps>li,.extraction-list>li{counter-increment:setup;position:relative;max-width:var(--prose,41.25rem);padding:0 0 28px;margin:0 0 28px;border-bottom:1px solid var(--brick)}
.setup-steps>li:last-child,.extraction-list>li:last-child{margin-bottom:0}
.setup-steps>li::before,.extraction-list>li::before{content:counter(setup);content:counter(setup) / '';display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:50%;background:var(--honey);color:var(--brick);font:600 1rem/1 var(--body)}
.setup-steps h3,.extraction-list h3{font-size:1.5rem;line-height:1.2;margin:0 0 10px}
.setup-steps p+p,.setup-steps code+p{margin-top:12px}
/* phones: the numeral above the step; from 600px beside it, as on the home */
@media(min-width:600px){
  .setup-steps>li,.extraction-list>li{padding-left:64px}
  .setup-steps>li::before,.extraction-list>li::before{position:absolute;left:0;top:2px;margin-bottom:0}
}

/* A whole address in a step gets a strip of its own: SNC Texto 600 on white with a 1px blue rule */
.setup-steps li>code{display:inline-block;max-width:100%;padding:8px 12px;margin:10px 0;font-size:1rem;line-height:1.5;white-space:pre-wrap}

/* ---- The link builder: white ground, 1px blue rule, ink text. What you type is 600, the hint in the field 400. */
.link-workbench{margin:24px 0;padding:24px;background:var(--white);color:var(--ink);border:1px solid var(--blue);border-radius:var(--radius-s)}
.link-workbench .mini-label{color:var(--ink)}
.link-workbench label{display:block;margin-top:20px;font-weight:600;color:var(--ink)}
.link-workbench input,.link-workbench textarea{display:block;width:100%;min-height:48px;margin-top:6px;padding:12px;background:var(--white);color:var(--ink);border:1px solid var(--blue);border-radius:var(--radius-s);font:600 1rem/1.4 var(--body)}
.link-workbench textarea{resize:vertical;min-height:80px}
.link-workbench ::placeholder{color:var(--ink);font-weight:400;opacity:1}
.link-workbench input:focus-visible,.link-workbench textarea:focus-visible{outline-offset:3px}
.link-workbench button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;margin-top:16px;padding:14px 20px;background:var(--brick);color:var(--cream);border:2px solid var(--brick);border-radius:var(--radius-s);font:600 1.125rem/1.35 var(--body);cursor:pointer}
.link-workbench button:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.link-workbench button:disabled{background:var(--grey);color:var(--ink);border:2px dashed var(--ink);cursor:default;text-decoration:none}
.link-workbench [role=status]{min-height:3em;margin-top:14px;font-size:var(--small,1rem)}
.link-workbench small{display:block;margin-top:12px;font-size:var(--small,1rem)}
.link-workbench .mini-label+label{margin-top:12px}

/* QR note: the note style (cream, 3px brick rule on the left) */
.qr-note{max-width:var(--prose,41.25rem);margin-top:20px;padding:4px 0 4px 20px;border-left:3px solid var(--brick)}
.qr-note p+p{margin-top:12px}

@media(min-width:600px){.link-workbench{padding:28px}}
@media(max-width:540px){.link-workbench{padding:20px}.link-workbench button{width:100%}}

/* ---- One page or several (the one-page guide): the two situations as cards with the bubble corner, side by side
   from 760px. Each carries a drawing on a white ground with a blue rule and ink text: one page, its sections
   stacked in one column; or several pages, one small page each. */
.scope-pair{display:grid;gap:20px;margin-top:24px}
.scope-option{min-width:0;padding:22px 20px;border:1px solid var(--brick);border-radius:var(--radius-card)}
.scope-option .mini-label{margin-bottom:6px}
.scope-option h3{font-size:1.5rem;line-height:1.2}
.scope-option>figure+p{margin-top:16px}
@media(min-width:760px){.scope-pair{grid-template-columns:1fr 1fr;gap:24px}.scope-option{padding:26px}.scope-option h3{min-height:2.4em}}
.page-stack{margin-top:16px;padding:16px;background:var(--white);color:var(--ink);border:1px solid var(--blue);border-radius:6px}
.page-stack>p{padding-bottom:10px;border-bottom:1px solid var(--blue);font-weight:600}
.article-body .page-stack :is(ol,ul){display:grid;list-style:none;margin:12px 0 0;padding:0}
.article-body .page-stack li{margin:0;padding:10px 12px;border:1px solid var(--blue);border-radius:4px;font-size:var(--small);line-height:1.35}
.article-body .page-stack li+li{margin-top:0}
/* one page: its sections share one outline, divided by dashed lines */
.article-body .page-stack ol{border:1px solid var(--blue);border-radius:4px}
.article-body .page-stack ol>li{border:0;border-radius:0;border-bottom:1px dashed var(--blue)}
.article-body .page-stack ol>li:last-child{border-bottom:0}
/* several pages: a small page for each, its top edge drawn thicker */
.article-body .page-stack ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,max(7.5em,calc(50% - 4px))),1fr));gap:8px}
.article-body .page-stack ul>li{min-height:76px;border-top-width:5px}
.page-stack figcaption{margin-top:12px;font-size:var(--small);line-height:1.4}

/* ---- Site and Instagram, task by task (the site-or-Instagram guide): each task on its own row under a brick rule;
   the two channels side by side from 600px in matching neutral cards (cream with a blue rule), so neither looks
   like the winner. Then what to do first, in one card with the bubble corner. */
.channel-board{margin-top:24px;border-top:2px solid var(--brick)}
.channel-task{display:grid;gap:12px;padding:20px 0 24px;border-bottom:1px solid var(--brick)}
.channel-task>h3{font-size:1.5rem;line-height:1.2}
.channel-cell{min-width:0;padding:16px 18px;border:1px solid var(--blue);border-radius:var(--radius-s)}
.channel-cell .mini-label{margin-bottom:4px}
.channel-cell p+p{margin-top:6px}
@media(min-width:600px){.channel-task{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:stretch}.channel-task>h3{grid-column:1 / -1}}
.channel-plan{max-width:var(--prose,41.25rem);padding:22px 20px;border:1px solid var(--brick);border-radius:var(--radius-card)}
.channel-plan h3{font-size:1.5rem;line-height:1.2;margin-bottom:8px}
.channel-plan>section+section{margin-top:20px;padding-top:20px;border-top:1px solid var(--brick)}
@media(min-width:600px){.channel-plan{padding:26px 28px}}

/* ---- A written note turned into page parts (the preparation guide). The fictional owner's note is the honey bubble
   of a message received (ink text, the label in brick); the margin note beside it uses the note's brick rule.
   Side by side from 760px. */
.briefing-desk{display:grid;gap:20px;margin-top:24px;align-items:start}
.briefing-paper{padding:22px 24px;background:var(--honey);color:var(--ink);border-radius:var(--bubble-in)}
.briefing-paper .mini-label{color:var(--brick);margin-bottom:8px}
.briefing-paper>p+p{margin-top:0}
.briefing-margin{padding:4px 0 4px 20px;border-left:3px solid var(--brick)}
.briefing-margin .mini-label{margin-bottom:6px}
.briefing-margin>p+p{margin-top:0}
@media(min-width:760px){.briefing-desk{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px}}
/* The outline to copy: a read-only field at reading size, white with a blue rule */
.briefing-checklist{max-width:var(--prose,41.25rem);min-height:calc(10 * 1.7em + 34px);padding:16px 18px;font:400 var(--small)/1.7 var(--body);field-sizing:content}

/* ---- The same page, rigid and flexible (the responsive guide): each capture on a white ground with a blue rule
   and ink captions; side by side from 541px, the wider capture below */
.responsive-proof{display:grid;gap:20px;margin-top:24px}
.device-capture,.desktop-capture{min-width:0;margin:0;padding:16px;background:var(--white);color:var(--ink);border:1px solid var(--blue);border-radius:6px}
.device-capture img,.desktop-capture img{display:block;width:100%;margin-inline:auto;border:1px solid var(--blue);border-radius:4px}
.device-capture img{max-width:320px}
.desktop-capture img{max-width:760px}
.device-capture figcaption,.desktop-capture figcaption{margin-top:12px;font-size:var(--small);line-height:1.45}
.device-capture figcaption strong{display:block}
.desktop-capture{margin-top:24px}
@media(min-width:541px){.responsive-proof{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- The laboratory (/blog/lab-responsivo/): one fictional page in two modes. With ?modo=rigido the page keeps a
   fixed width of 760px on purpose, so a narrow screen has to scroll sideways; the flexible mode fits any width. */
.responsive-lab{background:var(--cream);color:var(--ink)}
.lab-banner{padding:10px var(--gutter);background:var(--ink);color:var(--cream);font:600 1rem/1.4 var(--body)}
/* In the flexible layout the banner's words start where the page's column starts. */
.responsive-lab[data-mode=flexivel] .lab-banner{padding-inline:max(var(--gutter),calc((100% - 1040px) / 2 + var(--gutter)))}
.demo-page{max-width:1040px;margin:0 auto;padding:24px var(--gutter) 48px}
.demo-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-bottom:16px;border-bottom:1px solid var(--brick)}
.demo-header strong{font:700 1.5rem/1.2 var(--display);letter-spacing:var(--track);color:var(--brick)}
.demo-header nav{display:flex;flex-wrap:wrap;gap:0 24px}
.demo-header a{display:inline-flex;align-items:center;min-height:var(--target);font-size:1rem;font-weight:600;color:var(--brick)}
.demo-hero{padding:36px 0}
.demo-hero h1{max-width:18ch;margin:10px 0 16px;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08}
.demo-hero>p:not(.mini-label){max-width:48ch}
.demo-button{display:inline-flex;align-items:center;min-height:52px;margin-top:20px;padding:12px 20px;background:var(--brick);color:var(--cream);border:2px solid var(--brick);border-radius:var(--radius-s);font-weight:600;text-decoration:none}
.demo-button:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.demo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.demo-cards>div{min-width:0;padding:20px;border:1px solid var(--brick);border-radius:var(--radius-card)}
.demo-cards h2{font-size:1.5rem;line-height:1.2;margin-bottom:10px}
.demo-consulta{padding:36px 0 24px}
.demo-consulta h2{font-size:1.75rem;line-height:1.15;margin-bottom:18px}
.demo-consulta label{display:block;font-weight:600}
.demo-consulta select{display:block;width:100%;max-width:340px;min-height:48px;margin:8px 0 16px;padding:10px 12px;background:var(--white);color:var(--ink);border:1px solid var(--blue);border-radius:var(--radius-s);font:600 1rem/1.4 var(--body)}
.demo-consulta select:focus-visible{outline-offset:3px}
.lab-return a{display:inline-flex;align-items:center;min-height:var(--target);font-weight:600;color:var(--brick)}
.responsive-lab[data-mode=rigido] .demo-page{width:760px;max-width:none;margin-left:0}
.responsive-lab[data-mode=rigido] .demo-hero h1{font-size:3.4rem}
@media(max-width:600px){
  .responsive-lab[data-mode=flexivel] .demo-hero{padding:28px 0}
  .responsive-lab[data-mode=flexivel] .demo-cards{grid-template-columns:minmax(0,1fr)}
}

@media print{.link-workbench button{display:none}.scope-option,.channel-task,.device-capture,.desktop-capture,.briefing-paper{break-inside:avoid}}