/* =========================================================
   QR-kodstudion. Hämtad ur frontness.se/assets/css/verktyg.css
   utan ändringar, så de två versionerna ser identiska ut. Bygger
   på base.css (tokens, .vt-panel, .field, .ctrl).
   ========================================================= */

/* ========================= QR-studion ============================= */
.qr-sect{ padding-top:2.5rem }
@media (min-width:1024px){ .qr-sect{ padding-top:3.5rem } }

.qr-studio{ display:grid; gap:1rem; align-items:start }
@media (min-width:1024px){
  .qr-studio{ grid-template-columns:minmax(0,1fr) 27rem; gap:1.25rem }
  .qr-out{ position:sticky; top:1.5rem }
}
.qr-controls{ display:flex; flex-direction:column; gap:1rem; min-width:0 }

.qr-h{ font-size:1rem; font-weight:600; letter-spacing:-.01em; margin-bottom:1.125rem;
  display:flex; align-items:baseline; gap:.5rem }
.qr-h i{ font-style:normal; font-size:.75rem; font-weight:400; color:var(--vt-faint) }
.qr-hint{ margin-top:.875rem; font-size:.8125rem; line-height:1.65; color:var(--vt-faint) }

/* --------------------- segmenterad kontroll ---------------------- */
.qr-seg{ display:flex; flex-wrap:wrap; gap:.25rem; padding:.25rem;
  background:var(--vt-inset); border:1px solid var(--vt-hair); border-radius:var(--radius-pill) }
.qr-seg__b{ flex:1 1 auto; padding:.5rem .75rem; border-radius:var(--radius-pill);
  font-size:.8125rem; font-weight:500; color:var(--vt-muted); white-space:nowrap;
  transition:color .2s, background .2s }
.qr-seg__b:hover{ color:var(--foreground) }
.qr-seg__b.is-on{ background:var(--ink); color:#fff }
.qr-seg--ec .qr-seg__b{ font-variant-numeric:tabular-nums }

/* ------------------------- innehållsfält ------------------------- */
.qr-pane{ display:none }
.qr-pane.is-on{ display:grid; gap:.875rem; margin-top:1.25rem }
.qr-row2{ display:grid; gap:.875rem }
@media (min-width:520px){ .qr-row2{ grid-template-columns:1fr 1fr } }
.field > span i{ font-style:normal; text-transform:none; letter-spacing:0; font-weight:400; color:var(--vt-faint) }
/* Egen pil: webbläsarens egen bryter mot fältens ram och radie. */
select.ctrl{ appearance:none; cursor:pointer; padding-right:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,rgba(17,17,17,.45) 50%),
                   linear-gradient(135deg,rgba(17,17,17,.45) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) center, calc(100% - .85rem) center;
  background-size:.3rem .3rem, .3rem .3rem; background-repeat:no-repeat }

/* ---------------------------- färger ----------------------------- */
.qr-color{ display:flex; gap:.5rem; align-items:center }
.qr-color__sw{ position:relative; flex:none; width:2.875rem; height:2.875rem; cursor:pointer;
  border:1px solid var(--vt-hair); border-radius:var(--radius-control); background:var(--sw);
  overflow:hidden; transition:border-color .2s }
.qr-color__sw:hover{ border-color:var(--subtle) }
.qr-color__sw input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0 }
.qr-color__hex{ text-transform:uppercase; font-variant-numeric:tabular-nums; letter-spacing:.04em }
.is-off{ opacity:.4; pointer-events:none }

.qr-presets{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem }
.qr-preset{ display:inline-flex; align-items:center; gap:.45rem; font-size:.8125rem; color:var(--vt-muted);
  border:1px solid var(--vt-hair); border-radius:var(--radius-pill); padding:.4rem .75rem;
  transition:color .2s, border-color .2s }
.qr-preset:hover{ color:var(--foreground); border-color:var(--subtle) }
/* Provkarta: ringen är bakgrunden, pricken är kodens färg. */
.qr-preset i{ position:relative; flex:none; width:.875rem; height:.875rem; border-radius:50%;
  background:var(--bg); border:1px solid var(--vt-hair) }
.qr-preset i::after{ content:''; position:absolute; inset:.1875rem; border-radius:50%; background:var(--fg) }

/* ---------------------------- reglaget ---------------------------- */
.qr-switch{ display:flex; align-items:center; gap:1rem; margin-top:1.25rem;
  padding-top:1.25rem; border-top:1px solid var(--vt-hair) }
.qr-switch label{ flex:1; font-size:.875rem; font-weight:500; cursor:pointer }
.qr-switch em{ display:block; font-style:normal; font-size:.8125rem; font-weight:400;
  color:var(--vt-faint); margin-top:.15rem }
.qr-switch input{ appearance:none; flex:none; width:2.75rem; height:1.5rem; cursor:pointer;
  border-radius:var(--radius-pill); background:var(--vt-hair); position:relative; transition:background .2s }
.qr-switch input::after{ content:''; position:absolute; top:.1875rem; left:.1875rem;
  width:1.125rem; height:1.125rem; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(17,17,17,.25); transition:transform .2s }
.qr-switch input:checked{ background:var(--ink) }
.qr-switch input:checked::after{ transform:translateX(1.25rem) }

.qr-warn{ margin-top:1rem; padding:.75rem 1rem; font-size:.8125rem; line-height:1.6; color:var(--vt-muted);
  background:var(--vt-inset); border:1px solid var(--vt-hair); border-left:3px solid var(--st-warn);
  border-radius:0 var(--radius-control) var(--radius-control) 0 }

/* ---------------------------- logotyp ----------------------------- */
.qr-drop{ position:relative; display:grid; place-items:center; gap:.35rem; text-align:center; cursor:pointer;
  padding:1.75rem 1.25rem; border:1px dashed var(--vt-hair); border-radius:var(--radius-card-sm);
  background:var(--background); transition:border-color .2s, background .2s }
.qr-drop:hover,.qr-drop.is-over{ border-color:var(--accent); background:rgba(177,95,44,.04) }
.qr-drop input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.qr-drop__ico{ color:var(--subtle); line-height:0 }
.qr-drop__ico svg{ width:2rem; height:2rem }
.qr-drop__img{ width:3.5rem; height:3.5rem; object-fit:contain; border-radius:.5rem }
.qr-drop__t{ font-size:.9375rem; font-weight:500 }
.qr-drop__s{ font-size:.8125rem; color:var(--vt-faint) }
.qr-drop.has-logo .qr-drop__ico{ display:none }

.qr-logo{ margin-top:1rem; display:grid; gap:1rem; justify-items:start }
.qr-slider{ display:flex; align-items:center; gap:.875rem; width:100% }
.qr-slider label{ font-size:.8125rem; color:var(--vt-faint); flex:none }
.qr-slider output{ font-size:.8125rem; font-variant-numeric:tabular-nums; color:var(--vt-muted);
  width:2.75rem; text-align:right; flex:none }
.qr-slider input[type=range]{ appearance:none; flex:1; height:.25rem; border-radius:var(--radius-pill);
  background:var(--vt-hair); cursor:pointer }
.qr-slider input[type=range]::-webkit-slider-thumb{ appearance:none; width:1.05rem; height:1.05rem;
  border-radius:50%; background:var(--ink); border:2px solid #fff; box-shadow:0 1px 4px rgba(17,17,17,.3) }
.qr-slider input[type=range]::-moz-range-thumb{ width:1.05rem; height:1.05rem; border-radius:50%;
  background:var(--ink); border:2px solid #fff; box-shadow:0 1px 4px rgba(17,17,17,.3) }

.qr-textbtn{ font-size:.8125rem; font-weight:500; color:var(--vt-muted); background:var(--background);
  border:1px solid var(--vt-hair); border-radius:var(--radius-pill); padding:.5rem 1rem;
  transition:color .2s, border-color .2s }
.qr-textbtn:hover:not(:disabled){ color:var(--accent); border-color:rgba(177,95,44,.4) }
.qr-textbtn:disabled{ opacity:.45; cursor:not-allowed }

/* ---------------------------- resultatet -------------------------- */
.qr-outpanel{ display:grid; gap:1.25rem; padding:1.25rem }
.qr-stage{ position:relative; display:grid; place-items:center; aspect-ratio:1;
  padding:1rem; background:var(--vt-inset); border:1px solid var(--vt-hair);
  border-radius:var(--radius-card-sm); overflow:hidden }
/* Rutmönstret visar att bakgrunden faktiskt är genomskinlig, inte vit. */
.qr-stage.is-transparent{
  background-color:#fff;
  background-image:conic-gradient(var(--vt-inset) 25%, transparent 0 50%, var(--vt-inset) 0 75%, transparent 0);
  background-size:1.25rem 1.25rem }
.qr-stage canvas{ width:100%; height:auto; max-width:19rem; display:block }
.qr-empty{ display:grid; place-items:center; gap:.875rem; text-align:center; color:var(--vt-faint); padding:1rem }
.qr-empty p{ font-size:.875rem; line-height:1.6; max-width:22ch }
.qr-empty svg{ opacity:.5 }

.qr-dl{ display:grid; gap:.75rem }
.qr-dl__head{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem }
.qr-dl__head span{ font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vt-faint) }
.qr-dl__head b{ font-size:.75rem; font-weight:400; color:var(--vt-faint); text-align:right;
  font-variant-numeric:tabular-nums }
.qr-dl__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem }
.qr-dl__b{ display:grid; gap:.15rem; padding:.75rem .5rem; text-align:center;
  border:1px solid var(--vt-hair); border-radius:var(--radius-control); background:var(--background);
  transition:border-color .2s, box-shadow .2s }
.qr-dl__b b{ font-size:.875rem; font-weight:600 }
.qr-dl__b span{ font-size:.75rem; color:var(--vt-faint); font-variant-numeric:tabular-nums }
.qr-dl__b:hover:not(:disabled){ border-color:var(--subtle); box-shadow:var(--vt-lift) }
.qr-dl__b:disabled{ opacity:.45; cursor:not-allowed }
.qr-copy{ width:100%; text-align:center }

.qr-foot{ margin-top:1rem; padding:0 .25rem; font-size:.8125rem; line-height:1.65; color:var(--vt-faint) }