/* SBVora v3 · brief-label: request composer printed as a 150 × 100 mm thermal label */
.brief{
  --brief-line:rgba(255,255,255,.24);
  --brief-line-strong:rgba(255,255,255,.5);
  --brief-text:#fff;
  --brief-soft:#c7dced;
  --brief-micro:#a9e8ff;
  --brief-panel:rgba(3,16,40,.30);
  --brief-field:rgba(3,16,40,.28);
  --brief-focus:#fff;
  position:relative;margin-top:64px;border:1px solid var(--brief-line);background:var(--brief-panel);color:var(--brief-text)
}
.brief [hidden]{display:none!important}
.brief-bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;padding:16px 28px;border-bottom:1px solid var(--brief-line)}
.brief-code{margin:0;color:var(--brief-micro);font:700 11px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.16em}
.brief-code::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;background:var(--cyan);vertical-align:1px}
.brief-lede{margin:0;color:var(--brief-soft);font-size:14px;line-height:1.5}
.brief-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:0}
.brief-controls{display:grid;align-content:start;gap:26px;padding:28px;border-right:1px solid var(--brief-line);min-width:0}
.brief-preview{display:grid;align-content:start;gap:18px;padding:28px;min-width:0}

/* fieldsets and chips */
.brief-set{margin:0;padding:0;border:0;min-width:0}
.brief-set legend,.brief-field label{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:0;margin:0 0 12px;color:var(--brief-micro);font:700 11px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.brief-num{color:#fff;opacity:.55}
.brief-hint{color:var(--brief-soft);font:400 10px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.08em;opacity:.85}
.brief-chips{display:flex;flex-wrap:wrap;gap:8px}
.brief-chip{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 16px 9px 13px;margin:0;
  border:1px solid var(--brief-line-strong);border-radius:0;background:transparent;color:#fff;
  font:600 14px/1.25 Inter,"Segoe UI",Arial,sans-serif;text-align:left;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease
}
.brief-chip::before{content:"";flex:0 0 auto;width:10px;height:10px;border:1px solid currentColor;transition:background .2s ease,box-shadow .2s ease}
.brief-chip:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.brief-chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--deep)}
.brief-chip[aria-pressed="true"]::before{background:var(--deep);box-shadow:inset 0 0 0 2px #fff}
.brief-chip.is-multi{font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.brief-chip:focus-visible,.brief-btn:focus-visible,.brief-from-x:focus-visible,.brief-addr-copy:focus-visible{outline:2px solid var(--brief-focus);outline-offset:3px}

/* text fields */
.brief-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.brief-field{display:grid;min-width:0}
.brief-field textarea,.brief-field input{
  width:100%;min-height:48px;margin:0;padding:12px 14px;border:1px solid var(--brief-line-strong);border-radius:0;
  background:var(--brief-field);color:#fff;font:400 15px/1.55 Inter,"Segoe UI",Arial,sans-serif
}
.brief-field textarea{min-height:118px;resize:vertical}
.brief-field textarea::placeholder,.brief-field input::placeholder{color:rgba(225,240,250,.6)}
.brief-field textarea:focus,.brief-field input:focus{outline:2px solid var(--brief-focus);outline-offset:2px;border-color:#fff}
.brief-count{justify-self:end;margin-top:6px;color:var(--brief-soft);font:400 10px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}

/* items handed over from other sections */
.brief-from{display:grid;gap:10px;padding-top:20px;border-top:1px dashed var(--brief-line-strong)}
.brief-from-head{margin:0;color:var(--brief-micro);font:700 11px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.brief-from-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.brief-from-item{display:inline-flex;align-items:stretch;max-width:100%;border:1px solid var(--cyan);background:rgba(45,197,248,.12)}
.brief-from-label{display:flex;align-items:center;min-width:0;padding:8px 12px;font:600 13px/1.35 Inter,"Segoe UI",Arial,sans-serif;overflow-wrap:anywhere}
.brief-from-x{display:grid;place-items:center;flex:0 0 44px;width:44px;min-height:44px;margin:0;padding:0;border:0;border-left:1px solid var(--cyan);border-radius:0;background:transparent;color:#fff;font:400 20px/1 Inter,Arial,sans-serif;cursor:pointer}
.brief-from-x:hover{background:rgba(45,197,248,.28)}

/* printer + label */
.brief .printer{position:relative;color:var(--deep)}
.brief .printer-top{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 16px;
  border:1px solid #9fbad0;border-bottom:0;background:linear-gradient(180deg,#fbfdff,#e4eef6);
  font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em
}
.brief .printer-brand{font-family:Michroma,"Arial Narrow",sans-serif;font-size:11px;letter-spacing:.24em}
.brief .printer-status{display:inline-flex;align-items:center;gap:8px;color:#3c5a75}
.brief .printer-led{width:8px;height:8px;background:#21b36b;box-shadow:0 0 0 1px rgba(6,35,90,.25)}
.brief .printer.is-printing .printer-led{background:var(--cyan);animation:briefLed .3s steps(2,end) infinite}
.brief .printer-size{color:#3c5a75}
@keyframes briefLed{50%{opacity:.25}}
.brief .brief-slot{
  position:relative;z-index:2;height:14px;border:1px solid #9fbad0;border-top:1px solid #c8d8e6;
  background:linear-gradient(180deg,#d7e3ee 0,#d7e3ee 4px,#071426 4px,#071426 8px,#c4d4e2 8px)
}
.brief .label-stage{position:relative;z-index:1;padding:0 18px}
.brief .label-feed{position:relative;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08),0 18px 36px rgba(2,12,30,.32)}
.brief .label-feed::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;
  background:linear-gradient(135deg,#fff 33%,transparent 33%) 0 0/8px 5px,linear-gradient(225deg,#fff 33%,transparent 33%) 0 0/8px 5px
}
.brief .label-feed .brief-label{display:block;width:100%;height:auto;aspect-ratio:3/2;background:#fff;color:#000}
.brief .label-head{position:absolute;z-index:3;left:8px;right:8px;top:0;height:1px;background:var(--cyan);box-shadow:0 0 10px 1px rgba(45,197,248,.85);opacity:0;pointer-events:none;will-change:transform}

/* actions */
.brief-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.brief-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;margin:0;padding:10px 14px;
  border:1px solid var(--brief-line-strong);border-radius:0;background:transparent;color:#fff;
  font:700 12px/1.25 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.03em;text-align:center;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease
}
.brief-btn:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.brief-actions .brief-mail{grid-column:1/-1;justify-content:space-between;width:auto;min-width:0;min-height:56px;padding:0 22px;background:#fff;border-color:#fff;color:var(--deep);font-size:13px;box-shadow:none}
.brief-actions .brief-mail i{font-style:normal;font-size:20px;transition:transform .25s ease}
.brief-actions .brief-mail:hover{background:#eaf7ff;transform:none}
.brief-actions .brief-mail:hover i{transform:translateX(4px)}
.brief-btn.is-done{border-color:var(--cyan)}
.brief-btn.is-done::after,.brief-addr-copy.is-done::after{content:"";width:9px;height:5px;margin-left:2px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}

.brief-fallback{display:grid;gap:12px;padding:16px;border:1px dashed var(--brief-line-strong);background:rgba(3,16,40,.25)}
.brief-fallback>p{margin:0;font-size:14px;line-height:1.5}
.brief-fallback-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.brief-manual{display:grid;gap:8px}
.brief-manual:empty{display:none}
.brief-manual-hint{margin:0;color:var(--brief-soft);font-size:13px}
.brief-manual-text{width:100%;padding:10px 12px;border:1px solid var(--brief-line-strong);border-radius:0;background:#fff;color:#071426;font:400 12px/1.5 ui-monospace,Menlo,monospace;resize:vertical}
.brief-manual-text:focus{outline:2px solid var(--brief-focus);outline-offset:2px}
.brief-note-print,.brief-privacy{margin:0;color:var(--brief-soft);font-size:12.5px;line-height:1.55}
.brief-privacy{padding-left:12px;border-left:2px solid var(--cyan)}

/* contact card: mailto + copy */
.brief-contact-mail strong a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;overflow-wrap:anywhere}
.brief-contact-mail strong a:hover{text-decoration-color:#fff}
.brief-addr-copy{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:8px 0 -10px;padding:0 12px;
  border:1px solid rgba(255,255,255,.35);border-radius:0;background:transparent;color:#cfeaff;
  font:700 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer
}
.brief-addr-copy:hover{border-color:#fff;color:#fff}

/* dark mode: housing navy with ice borders,the label stays paper */
html[data-theme="dark"] .brief{--brief-panel:rgba(2,10,24,.42);--brief-field:rgba(2,10,24,.4)}
html[data-theme="dark"] .brief .printer{color:var(--ice)}
html[data-theme="dark"] .brief .printer-top{background:linear-gradient(180deg,#0b2546,#061a36);border-color:#cfdfeb}
html[data-theme="dark"] .brief .printer-status,html[data-theme="dark"] .brief .printer-size{color:#a9c6dc}
html[data-theme="dark"] .brief .brief-slot{border-color:#cfdfeb;background:linear-gradient(180deg,#0d2a4d 0,#0d2a4d 4px,#000 4px,#000 8px,#082040 8px)}
html[data-theme="dark"] .brief .printer-led{box-shadow:0 0 0 1px rgba(207,223,235,.4)}
html[data-theme="dark"] .brief .label-feed{box-shadow:0 0 0 1px rgba(207,223,235,.25),0 20px 40px rgba(0,0,0,.5)}
html[data-theme="dark"] .brief-actions .brief-mail{background:#eaf6ff;border-color:#eaf6ff;color:var(--navy)}

/* layout */
@media (max-width:1120px){
  .brief-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
}
@media (max-width:900px){
  .brief{margin-top:48px}
  .brief-grid{grid-template-columns:minmax(0,1fr)}
  .brief-controls{border-right:0;border-bottom:1px solid var(--brief-line)}
  .brief-preview{max-width:640px;width:100%;justify-self:center}
}
@media (max-width:560px){
  .brief{margin-top:40px;margin-inline:-4px}
  .brief-bar{padding:14px 16px}
  .brief-controls,.brief-preview{padding:20px 16px}
  .brief-controls{gap:22px}
  .brief-chip{font-size:13.5px;padding-inline:11px 13px}
  .brief-actions{grid-template-columns:minmax(0,1fr)}
  .brief-actions .brief-btn{width:100%}
  .brief-fallback-actions{grid-template-columns:minmax(0,1fr)}
  .brief .label-stage{padding:0 8px}
  .brief .printer-top{padding:0 10px;gap:8px;font-size:9px;letter-spacing:.08em}
  .brief .printer-brand{font-size:9.5px;letter-spacing:.16em}
}
@media (max-width:380px){
  .brief .printer-size{display:none}
}

@media (prefers-reduced-motion:reduce){
  .brief .printer.is-printing .printer-led{animation:none}
  .brief .label-head{display:none}
  .brief-chip,.brief-btn,.brief-chip::before,.brief-actions .brief-mail i{transition:none}
}

/* normal page print (Ctrl+P): the composer is interactive only */
@media print{
  html:not(.sbv-print-only) .brief,html:not(.sbv-print-only) .brief-addr-copy{display:none!important}
  html.sbv-print-only .sbv-print-root .brief-label{display:block;width:150mm;height:100mm;overflow:hidden;background:#fff;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}