/* ===== Dog Breed Compass ===== */
:root{
  --cream:#FBF7F1; --paper:#FFFFFF; --paper-2:#F6F1E8;
  --ink:#20302B; --ink-2:#4A5B54; --ink-3:#5F6E66;
  --line:#E8E0D3; --line-2:#D6CCBA;
  --moss:#2F6E57; --moss-2:#3E8A6D; --moss-soft:#E6F0EA;
  --amber:#B9782A; --amber-soft:#FAEEDD;
  --clay:#A9503A; --clay-soft:#F9E8E3;
  --sky:#3C6E8F; --sky-soft:#E6EFF4;
  --r-s:10px; --r-m:16px; --r-l:24px;
  --sh-1:0 1px 2px rgba(32,48,43,.05), 0 4px 14px rgba(32,48,43,.05);
  --sh-2:0 2px 6px rgba(32,48,43,.06), 0 18px 44px rgba(32,48,43,.09);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
/* Sidan hålls dold tills IP-uppslaget avgjort spraket. Klassen sätts av en
   inline-snutt i head och tas bort av assets/geo.js, eller av dess timeout. */
html.lang-pending body{visibility:hidden}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 0}
a{color:var(--moss)}
.wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.hidden{display:none !important}

/* ---- header ---- */
header.site{position:sticky;top:0;z-index:40;background:rgba(251,247,241,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site .wrap{display:flex;align-items:center;gap:22px;height:64px}
.mark{display:flex;align-items:center;gap:10px;font-family:var(--serif);
  font-size:19px;font-weight:600;letter-spacing:-.01em}
.mark svg{width:26px;height:26px;flex:none}
nav.top{margin-left:auto;display:flex;align-items:center;gap:2px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:15px;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease}
.btn-primary{background:var(--moss);color:#fff;box-shadow:0 6px 18px rgba(47,110,87,.26)}
.btn-primary:hover{background:var(--moss-2);transform:translateY(-1px)}
.btn-primary:disabled{background:var(--line);color:var(--ink-2);box-shadow:none;
  transform:none;cursor:not-allowed}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper)}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.btn-sm{padding:9px 17px;font-size:14px}

/* ---- hero ---- */
.hero{padding:78px 0 54px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--moss-soft);
  color:var(--moss);border-radius:999px;padding:6px 15px;font-size:12.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.hero h1{font-size:clamp(40px,6.2vw,68px);letter-spacing:-.025em;margin:22px 0 0;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--moss)}
.hero .lede{font-size:19px;color:var(--ink-2);max-width:56ch;margin:20px 0 32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.stats{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--serif);font-size:32px;line-height:1;letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--ink-3);letter-spacing:.03em}
/* Breed portraits are full-body side profiles. Landscape tiles and a slightly
   high crop point keep the head in frame instead of slicing it off. */
.collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.collage figure{margin:0;border-radius:var(--r-m);overflow:hidden;background:var(--paper-2);
  box-shadow:var(--sh-1);aspect-ratio:4/3}
.collage figure:nth-child(1){border-top-left-radius:80px}
.collage figure:nth-child(4){border-bottom-right-radius:80px}
.collage img{width:100%;height:100%;object-fit:cover;object-position:center 38%}

.popular-wrap{padding:10px 0 46px}
.lang-pick{margin-left:12px;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--paper);font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:.04em}
.lang-pick:hover{border-color:var(--moss);color:var(--moss)}
/* Navigeringen bestar av bade <button> och <a>. De ska vara omojliga att skilja
   at for ogat, annars ser tva av fem poster ut som rana lankar. */
nav.top button,nav.top .statlink{padding:7px 14px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;white-space:nowrap;
  transition:background .15s,color .15s}
nav.top button:hover,nav.top .statlink:hover{background:var(--paper-2);color:var(--ink)}
nav.top button[aria-current="true"]{background:var(--moss);color:#fff}
nav.top button[aria-current="true"]:hover{background:var(--moss-2);color:#fff}

.breedlinks{padding:8px 0 46px}
.breedlink-list{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:8px}
.breedlink-list a{display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-s);padding:10px 14px;font-size:14.5px;text-decoration:none;
  color:var(--ink-2);transition:border-color .15s,color .15s}
.breedlink-list a:hover{border-color:var(--moss);color:var(--moss)}
.breedlink-more{margin:16px 0 0;font-size:14.5px}
@media (max-width:860px){ .breedlink-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .breedlink-list{grid-template-columns:1fr} }

/* ---- method strip ---- */
.method{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.method h3{font-size:17px;margin-bottom:7px}
.method p{margin:0;font-size:14.5px;color:var(--ink-2)}
.stepnum{font-family:var(--serif);font-size:16px;color:#fff;font-weight:600;
  background:var(--moss);width:32px;height:32px;border-radius:50%;line-height:1;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1}

/* ---- quiz ---- */
.quiz{padding:44px 0 90px}
.progress{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:8px}
.progress i{display:block;height:100%;background:var(--moss);border-radius:999px;transition:width .35s cubic-bezier(.2,.7,.3,1)}
.progress-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);margin-bottom:36px}
.qcard{max-width:880px;margin:0 auto}
.qcard h2{font-size:clamp(27px,3.6vw,37px);letter-spacing:-.02em;margin-bottom:12px}
.qhelp{color:var(--ink-2);font-size:15.5px;margin:0 0 8px}
.qtag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-soft);border-radius:999px;padding:4px 11px;margin-bottom:26px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.opt{display:flex;align-items:flex-start;gap:13px;text-align:left;padding:18px 20px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-m);
  transition:border-color .15s,background .15s,transform .12s,box-shadow .15s}
.opt:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:var(--sh-1)}
.opt[aria-pressed="true"]{border-color:var(--moss);background:var(--moss-soft)}
.opt .tick{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);
  margin-top:2px;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.opt[aria-pressed="true"] .tick{background:var(--moss);border-color:var(--moss)}
.opt .tick svg{width:12px;height:12px;stroke:#fff;opacity:0}
.opt[aria-pressed="true"] .tick svg{opacity:1}
.opt b{display:block;font-weight:600;font-size:15.5px;line-height:1.35}
.opt small{display:block;color:var(--ink-3);font-size:13.5px;margin-top:3px;line-height:1.45}
.qnav{display:flex;gap:12px;margin-top:34px;align-items:center}
.qnav .spacer{flex:1}

/* ---- results ---- */
.results{padding:40px 0 96px}
.res-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.res-head h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.025em}
.res-head p{margin:6px 0 0;color:var(--ink-2)}
.top-card{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-2)}
/* These are full-body breed-standard side profiles. Cropping them to a near-square
   frame cuts the head off, so every frame contains rather than covers. */
.top-card .photo{background:var(--paper-2);border-right:1px solid var(--line);
  padding:22px;display:flex;flex-direction:column;gap:18px}
.top-card .photo img{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:var(--r-s)}
.quickstats{margin-top:auto;display:grid;gap:9px}
.quickstats .trow{margin:0}
.quickstats .lab{font-size:13.5px}
.photo .credit{margin:0;font-size:11px;line-height:1.45}
.top-card .body{padding:34px 36px}
.rank-pill{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--moss);background:var(--moss-soft);padding:5px 12px;border-radius:999px}
.top-card h3{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.02em;margin:14px 0 6px}
.breed-meta{color:var(--ink-3);font-size:14px;margin:0 0 22px}
.matchrow{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .val b{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.02em}
.ring .val span{font-size:10px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.verdict{font-size:15.5px;color:var(--ink-2);margin:0}
.reasons{display:grid;gap:9px;margin:0 0 8px;padding:0;list-style:none}
.reasons li{display:flex;gap:10px;font-size:14.5px;line-height:1.5}
.reasons .ic{flex:none;width:19px;height:19px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin-top:2px}
.reasons .ic svg{width:11px;height:11px}
.reasons.good .ic{background:var(--moss-soft)} .reasons.good .ic svg{stroke:var(--moss)}
.reasons.warn .ic{background:var(--amber-soft)} .reasons.warn .ic svg{stroke:var(--amber)}
.reason-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:20px 0 10px}
.flag.rare{background:var(--amber-soft);color:var(--amber)}
.flag{display:flex;gap:10px;align-items:flex-start;background:var(--clay-soft);color:var(--clay);
  border-radius:var(--r-s);padding:11px 14px;font-size:14px;margin:18px 0 0}

.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;text-align:left;display:flex;flex-direction:column;
  transition:transform .14s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card .ph{position:relative;aspect-ratio:4/3;background:var(--paper-2);
  border-bottom:1px solid var(--line)}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px}
.pct{position:absolute;top:11px;right:11px;background:rgba(255,255,255,.94);
  border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700;
  font-family:var(--serif);box-shadow:var(--sh-1)}
.pct.hi{background:var(--moss);color:#fff}
.card .txt{padding:15px 17px 18px}
.card h4{font-size:17px;letter-spacing:-.01em}
.card .sub{font-size:12.5px;color:var(--ink-3);margin:3px 0 9px}
.card .mini{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .txt{display:flex;flex-direction:column;flex:1}
.card .bar{margin-top:auto}
.bar{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--moss);border-radius:999px}

.section-title{display:flex;align-items:baseline;gap:14px;margin:56px 0 6px}
.section-title h3{font-size:24px;letter-spacing:-.02em}
.section-title span{font-size:14px;color:var(--ink-3)}

.answers{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:13px;color:var(--ink-2)}
.chip b{color:var(--ink);font-weight:600}

table.full{width:100%;border-collapse:collapse;margin-top:14px;font-size:14.5px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
table.full th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:12px 16px;background:var(--paper-2);border-bottom:1px solid var(--line)}
table.full td{padding:11px 16px;border-bottom:1px solid var(--line)}
table.full tr:last-child td{border-bottom:0}
table.full tr.row:hover{background:var(--paper-2);cursor:pointer}
/* Statistikens rader leder till rassidan. Utan det har sag de inte klickbara ut. */
.statstable tr.row.clickable{cursor:pointer}
.statstable tr.row.clickable:hover{background:var(--moss-soft)}
.statstable tr.row.clickable:hover td:first-child{box-shadow:inset 3px 0 0 var(--moss)}
table.full .n{color:var(--ink-3);width:46px}
table.full .p{font-family:var(--serif);font-weight:600;text-align:right;width:66px}
.scroller{max-height:520px;overflow:auto;border-radius:var(--r-m)}
.hide-sm{display:table-cell}

/* ---- library ---- */
.library{padding:44px 0 90px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:22px 0 26px}
.search{flex:1;min-width:230px;position:relative}
.search input{width:100%;padding:12px 16px 12px 42px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--paper);font-size:15px;color:var(--ink)}
.search input:focus{outline:none;border-color:var(--moss)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--ink-3)}
select.f{padding:11px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-size:14px}
select.f:focus{outline:none;border-color:var(--moss)}

/* ---- modal ---- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(32,48,43,.45);
  backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;
  padding:32px 20px;overflow-y:auto}
.sheet{background:var(--paper);border-radius:var(--r-l);max-width:980px;width:100%;
  box-shadow:var(--sh-2);overflow:hidden;position:relative;margin-bottom:40px}
.sheet .close{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;
  border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;
  justify-content:center;box-shadow:var(--sh-1)}
.sheet .close svg{width:16px;height:16px;stroke:var(--ink)}
.sheet-hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding:22px;
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:26px;align-items:center}
.sheet-hero img{width:100%;height:230px;object-fit:contain}
.sheet-hero .cap{padding:0}
.sheet-hero h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.02em}
.sheet-hero p{margin:6px 0 0;color:var(--ink-3);font-size:14px}
.sheet-hero p b{color:var(--moss)}
.sheet-body{padding:30px 34px 38px}
.facts{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;margin-bottom:30px}
.fact{background:var(--paper);padding:15px 16px}
.fact span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.fact b{display:block;font-family:var(--serif);font-size:18px;margin-top:3px;letter-spacing:-.01em}
/* multi-column packs the five groups tightly; a grid leaves ragged gaps
   because the tallest group sets the row height */
.facts-2{margin-top:-18px;margin-bottom:26px}
.facts-2 .fact b{font-size:16px}
.popnote{margin:-12px 0 22px;font-size:14px;color:var(--ink-2);line-height:1.55}
.block{margin:0 0 26px}
.block h4{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--moss);font-weight:700;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip-ail{background:var(--clay-soft);color:#7E3627;border-radius:999px;padding:5px 13px;font-size:13px}
.traits{columns:2;column-gap:46px;margin-bottom:22px}
.tgroup{break-inside:avoid;margin-bottom:26px}
.tgroup h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  font-family:var(--sans);font-weight:700;margin-bottom:13px}
.trow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:9px}
.trow .lab{font-size:14px;color:var(--ink-2)}
.dots{display:flex;gap:4px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--moss)}
.dots.amber i.on{background:var(--amber)}
.prose{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 40px}
.prose section h4{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--moss);font-weight:700;margin-bottom:6px}
.prose section p{margin:0;font-size:14.8px;color:var(--ink-2);line-height:1.62}
.prose .wide{grid-column:1/-1}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.pane{border-radius:var(--r-m);padding:16px 18px;font-size:14.5px;line-height:1.55}
.pane.good{background:var(--moss-soft);color:#1E4C3B}
.pane.bad{background:var(--clay-soft);color:#7E3627}
.pane b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;opacity:.8}

.credit{margin:22px 0 0;font-size:12px;color:var(--ink-3)}
footer.site{border-top:1px solid var(--line);padding:34px 0 54px;color:var(--ink-3);font-size:13.5px}
footer.site p{margin:0 0 8px;max-width:74ch}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .collage{max-width:460px}
  .method-grid{grid-template-columns:repeat(2,1fr);gap:26px}
  /* on a phone the breed name must follow the photo directly, so the quick
     profile and the credit move below the body instead of between them */
  .top-card{display:flex;flex-direction:column}
  .top-card .photo{display:contents}
  .top-card .photo img{order:1;padding:18px 18px 0;background:var(--paper-2);aspect-ratio:auto;max-height:280px}
  .top-card .body{order:2;padding:22px}
  .top-card .quickstats{order:3;background:var(--paper-2);border-top:1px solid var(--line);
    padding:18px 22px;margin:0}
  .top-card .photo .credit{order:4;background:var(--paper-2);padding:0 22px 18px}
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts-2{margin-top:-10px}
  .traits{columns:1}
  .prose{grid-template-columns:1fr}
  .sheet-body{padding:24px 22px 32px}
  .sheet-hero{grid-template-columns:1fr;gap:14px;padding:18px 22px}
  .sheet-hero img{height:190px}
}
@media (max-width:640px){
  .hide-sm{display:none}
  .mark .wordmark{font-size:16px}
  .site .wrap{gap:10px}
  .res-head{gap:12px}
  .res-head h2{font-size:26px}
  .hero{padding:48px 0 36px}
  .opts{grid-template-columns:1fr}
  .grid-cards{grid-template-columns:1fr 1fr;gap:12px}
  .card .txt{padding:12px 13px 15px}
  .card .mini{display:none}
  .stats{gap:22px}
  .split{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr}
  nav.top button{padding:7px 11px;font-size:13px}
  .top-card .body{padding:24px 22px}
}

@media (max-width:560px){
}
@media (max-width:430px){
  .mark .wordmark{display:none}          /* the compass glyph carries the brand on a phone */
  footer.site p{font-size:13px}
}

/* ---- mobilnavigering ---- */
@media (max-width:700px){
  /* Sex menypunkter i 44 px wrappar till tre rader, alltsa 136 px. Sitter den
     fast ater den en sjundedel av en telefonskarm under hela besoket. Pa mobil
     far den rulla med sidan i stallet. */
  header.site{position:static}
  .mark{min-height:44px;align-items:center}
  .site .wrap{flex-wrap:wrap;height:auto;padding-top:9px;padding-bottom:7px;gap:6px 12px}
  /* Radbrytning, inte rullning. En vagratt remsa utan synlig kant gomde
     sprakknappen helt utanfor skarmen, och pa en tvasprakig sajt finns det da
     ingen vag att byta sprak alls. Wrappning visar allt utan affordansproblem. */
  nav.top{order:2;width:100%;margin-left:0;flex-wrap:wrap;gap:2px 4px;overflow:visible}
  nav.top > *{flex:0 0 auto}
  /* 44 px ar minsta traffyta som gar att sikta pa med en tumme. */
  nav.top button,nav.top .statlink,nav.top .lang-pick{
    min-height:44px;display:inline-flex;align-items:center;font-size:14px;padding:0 12px}
  /* Sprakknappen sist, avskild fran vyerna sa den inte blandas ihop med dem. */
  nav.top .lang-pick{margin-left:auto;border:1px solid var(--line-2);border-radius:999px}
}

/* Klickytor som var for sma for en tumme */
@media (max-width:700px){
  .hero .btn,.res-actions .btn,.bp-cta .btn{min-height:48px;width:100%}
  .breedlink-more a,.lib-more a{display:inline-flex;align-items:center;min-height:44px}
  /* Lankarna lag 33 px hoga kant i kant, och den ena ar integritetspolicyn.
     Feltryck dar ar sarskilt dumt. */
  footer.site p a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  footer.site p{display:flex;flex-wrap:wrap;gap:0 14px;line-height:1.5}
  nav.crumbs a{display:inline-flex;align-items:center;min-height:40px}
}

/* iOS zoomar in nar ett falt med mindre an 16 px text far fokus, och kastar da
   om hela layouten. Galler alla inmatningsfalt, aven rullgardiner. */
@media (max-width:700px){
  input,select,textarea,.lib-controls input,.lib-controls select{
    font-size:16px !important;min-height:44px}
}

/* Statistiktabellerna kapade sina talkolumner i hogerkant pa sma skarmar, sa
   prisspannet lastes som "13 000-18". Mindre padding, och talen far brytas. */
@media (max-width:420px){
  table.statstable th,table.statstable td{padding-left:8px;padding-right:8px}
}
@media (max-width:360px){
  table.statstable th,table.statstable td{padding-left:6px;padding-right:6px}
  table.statstable .tnum{white-space:normal}
}

/* ---- mobil: knappar dar tummen faktiskt ar ---- */
@media (max-width:700px){
  /* Nasta-knappen hamnade under skarmkanten pa i princip varje fraga, sa man
     fick rulla ner efter varje val. Femton ganger. Nu ligger den kvar i botten. */
  .qnav{position:sticky;bottom:0;z-index:5;margin-top:26px;
    padding:12px 0 calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(to bottom,rgba(251,247,241,0),var(--cream) 34%)}
  .qnav .btn{min-height:48px}
  .qnav .btn-primary{flex:1 1 auto}
  .qnav .btn-sm{min-height:48px;padding:0 18px}

  /* Modalens stangknapp rullade ur bild direkt. Modalen ar fyra skarmar hog,
     sa under det mesta av rullningen fanns ingen synlig vag ut. */
  .sheet .close{position:sticky;top:12px;margin-left:auto;margin-right:12px;
    width:44px;height:44px;flex:none;
    box-shadow:0 2px 10px rgba(32,48,43,.16)}

  /* Ovriga sma knappar */
  .res-actions .btn,.btn-sm{min-height:44px}

  /* Tal ska inte brytas mitt i tusentalen. "20 000-30" pa en rad och "000 kr"
     pa nasta gar att lasa fel. */
  /* Talen bar hardmellanslag, sa nowrap behovs inte och skulle dessutom
     stoppa vanlig text som "Kanada / Storbritannien" fran att radbryta. */
  .sheet .fact b{white-space:nowrap}

  /* Langa rasnamn klipptes mitt i ordet i rutnatet, utan ellips. */
  .card .txt h4{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
}