/* =====================================================================
   verktyg.css — Kött-timerns moduler (vändtimern + recept).
   Laddas EFTER fls.css. Fristående modul: ta bort filen och sidan
   kottskolan.html tillsammans om verktygen någon gång utgår.
   ===================================================================== */
/* ---- kompatibilitetstokens för portade verktyg (vändtimern) ---- */
:root{
  --f-italic:"Bodoni Moda","Times New Roman",serif;
  --copper:#C98545;--blood:#1C3826;
  --soot:#081711;--soot-rgb:8,23,17;
  --forest-rgb:32,68,46;--wine-rgb:15,36,25;
  --surface:var(--char);--surface-2:var(--char-2);--surface-3:var(--char-2);
  --ft-ring:#2F5A3E;--ft-ring-soft:rgba(47,90,62,0.6);
  --label-track:0.16em;--tap-min:44px;
  --shadow-1:0 10px 30px rgba(0,0,0,0.35);--shadow-2:0 20px 60px rgba(0,0,0,0.45);
}
html.light{
  --copper:#9A5F2B;--blood:#E7DEC8;
  --soot:#EAE1CD;--soot-rgb:234,225,205;--wine-rgb:239,231,213;
  --shadow-1:0 1px 2px rgba(45,38,25,0.06),0 10px 26px -14px rgba(45,38,25,0.20);
  --shadow-2:0 6px 16px rgba(45,38,25,0.08),0 26px 60px -24px rgba(45,38,25,0.28);
}

/* ---- sidhero ---- */
.school-hero{padding:calc(var(--header-h) + 72px) 0 56px;border-bottom:1px solid var(--rule);}
.school-hero .eyebrow{margin-bottom:24px;}
.school-hero h1 .it{color:var(--gold);font-weight:400;}
.school-hero .lede{margin-top:26px;}
.school-jump{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}
.school-jump a{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--paper);border:1px solid var(--rule);padding:12px 16px;transition:color .25s,border-color .25s;
}
.school-jump a:hover{color:var(--gold);border-color:var(--gold);}

/* ---- delade reglage-stilar (reglage + stekgradsskala) ---- */
  /* ---------- KALK ---------- */
  .kalk{position:relative;padding:32px 0 80px;overflow:hidden;}
  .seg{display:inline-flex;border:1px solid var(--rule);}
  .seg button{
    background:transparent;border:0;color:var(--bone);cursor:pointer;
    font-family:var(--f-mono);font-size:12px;letter-spacing:var(--label-track);text-transform:uppercase;
    padding:12px 16px;min-height:var(--tap-min);border-right:1px solid var(--rule);transition:background .25s, color .25s;
  }
  .seg button:last-child{border-right:0;}
  .seg button.active{background:var(--bone);color:var(--coal);}
  .seg button:not(.active):hover{color:var(--gold);}

  input[type=range].kalk-range{
    -webkit-appearance:none;appearance:none;width:100%;height:2px;
    background:linear-gradient(90deg, var(--ember) 0%, var(--ember) var(--p,50%), var(--rule) var(--p,50%), var(--rule) 100%);
    outline:none;cursor:pointer;
  }
  input[type=range].kalk-range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:22px;height:22px;border-radius:50%;
    background:var(--bone);border:2px solid var(--ember);
    box-shadow:0 0 0 4px rgba(var(--ember-rgb),0.18), 0 4px 12px rgba(0,0,0,0.4);
    cursor:grab;transition:transform .2s;
  }
  input[type=range].kalk-range::-webkit-slider-thumb:active{transform:scale(1.1);}
  input[type=range].kalk-range::-moz-range-thumb{
    width:22px;height:22px;border-radius:50%;
    background:var(--bone);border:2px solid var(--ember);
    box-shadow:0 0 0 4px rgba(var(--ember-rgb),0.18);cursor:grab;
  }
  .check{position:relative;width:44px;height:24px;border:1px solid var(--rule);cursor:pointer;flex-shrink:0;}
  .check input{position:absolute;opacity:0;inset:0;cursor:pointer;width:100%;height:100%;}
  .check::after{
    content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--ash);
    transition:left .25s, background .25s;
  }
  .check:has(input:checked){border-color:var(--ember);background:rgba(var(--ember-rgb),0.18);}
  .check:has(input:checked)::after{left:22px;background:var(--ember);}

  .kalk-don{display:flex;flex-direction:column;gap:14px;}
  .kalk-don-track{position:relative;}
  .kalk-don-bar{position:relative;height:3px;margin:0 11px;background:linear-gradient(90deg, #16241e, #1f3228, #2a3d32, #324a3c, #283830);border:0;z-index:1;}
  .kalk-don-stops{position:relative;height:24px;margin:8px 11px 0;}
  .kalk-don-stop{
    position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
    background:transparent;border:0;color:var(--ash);cursor:pointer;
    font-family:var(--f-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
    padding:6px 4px;transition:color .25s;min-height:32px;
  }
  .kalk-don-stop.active{color:var(--bone);}
  .kalk-don-stop:hover{color:var(--gold);}
  input[type=range].kalk-don-range{
    -webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;outline:none;cursor:pointer;
    margin-top:-17px;padding:0;display:block;position:relative;z-index:2;
  }
  input[type=range].kalk-don-range::-webkit-slider-runnable-track{background:transparent;height:32px;border:0;}
  input[type=range].kalk-don-range::-moz-range-track{background:transparent;height:32px;border:0;}
  input[type=range].kalk-don-range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:24px;height:24px;border-radius:50%;
    background:var(--bone);border:2px solid var(--ember);
    box-shadow:0 0 0 4px rgba(var(--coal-rgb),0.9), 0 0 0 5px rgba(var(--ember-rgb),0.25), 0 4px 12px rgba(0,0,0,0.5);
    cursor:grab;margin-top:4px;
  }
  input[type=range].kalk-don-range::-moz-range-thumb{
    width:24px;height:24px;border-radius:50%;background:var(--bone);border:2px solid var(--ember);
    box-shadow:0 0 0 4px rgba(var(--coal-rgb),0.9), 0 0 0 5px rgba(var(--ember-rgb),0.25), 0 4px 12px rgba(0,0,0,0.5);
  }
  .kalk-don-meta{
    display:flex;flex-direction:column;gap:4px;
    border-top:1px solid var(--rule);padding-top:14px;
  }
  .kalk-don-meta .lbl{font-family:var(--f-display);font-size:22px;font-weight:600;color:var(--bone);}
  .kalk-don-meta .dsc{font-family:var(--f-italic);font-style:italic;font-size:15px;color:var(--ash);}
  .btn-ghost{
    display:inline-flex;align-items:center;gap:12px;padding:14px 20px;min-height:var(--tap-min);
    background:transparent;color:var(--bone);border:1px solid var(--rule-strong);
    font-family:var(--f-mono);font-size:12px;letter-spacing:var(--label-track);text-transform:uppercase;
    cursor:pointer;transition:background .3s, color .3s, border-color .3s;
  }
  .btn-ghost:hover{background:var(--bone);color:var(--coal);border-color:var(--bone);}
  .btn-ghost .arrow{display:inline-block;transition:transform .3s;}
  .btn-ghost:hover .arrow{transform:translateX(4px);}

  /* ----- Footer ----- */
  .kapp-foot{
    border-top:1px solid var(--rule);padding:30px 0;
    font-family:var(--f-mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ash);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  }
  .kapp-foot a{color:var(--ash);transition:color .2s;}
  .kapp-foot a:hover{color:var(--gold);}

  /* ----- Mobile ----- */
  @media(max-width:1100px){
    .kalk-shell{grid-template-columns:1fr;}
    .kalk-left{border-right:0;border-bottom:1px solid var(--rule);}
  }
  @media(max-width:780px){
    .wrap{width:min(1320px,94vw);}
    .kapp-hero{padding:36px 0 20px;}
    .kapp-brand .l{display:none;}
  }
  @media(max-width:520px){
    .kalk-don-stop{font-size:9px;letter-spacing:0.14em;}
  }

/* ---- portad vändtimer-CSS ---- */
  /* ---- Flip Timer ---- */
  .flip-timer{
    display:grid;grid-template-columns:1.2fr 1fr;gap:0;
    border:1px solid var(--rule);margin-bottom:48px;
    background:
      radial-gradient(600px 300px at 100% 0%, rgba(var(--ember-rgb),0.12), transparent 60%),
      linear-gradient(135deg, rgba(var(--wine-rgb),0.35), rgba(var(--soot-rgb),0.4));
    position:relative;overflow:hidden;
  }
  .flip-timer.alarming{
    animation:ftFlash 0.6s ease-in-out 3;
  }
  @keyframes ftFlash{
    0%,100%{box-shadow:inset 0 0 0 0 rgba(var(--ember-rgb),0);}
    50%{box-shadow:inset 0 0 80px 0 rgba(var(--ember-rgb),0.5);}
  }
  .ft-left{padding:40px 44px;display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--rule);}
  .ft-left .ft-eyebrow{
    font-family:var(--f-mono);font-size:11px;letter-spacing:0.34em;text-transform:uppercase;color:var(--gold);
    display:flex;align-items:center;gap:14px;
  }
  .ft-left .ft-eyebrow::before{content:"";width:24px;height:1px;background:var(--gold);opacity:0.6;}
  .ft-left h3{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,2.6vw,38px);line-height:1.05;}
  .ft-left h3 em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--gold);}
  .ft-left p{color:var(--paper);opacity:0.8;font-size:15px;max-width:42ch;}
  .ft-section{display:flex;flex-direction:column;gap:8px;}
  .ft-section-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
  .ft-section-h .l{font-family:var(--f-mono);font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;}
  .ft-section-h .l::before{content:"";width:16px;height:1px;background:var(--gold);opacity:0.6;}
  .ft-section-h .r{font-family:var(--f-italic);font-style:italic;font-size:14px;color:var(--ash);}
  .ft-section-h .v{font-family:var(--f-display);font-weight:500;font-size:17px;color:var(--bone);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
  .ft-section-h .v small{font-family:var(--f-mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold);margin-left:4px;}

  .ft-cut-groups{display:flex;flex-direction:column;gap:14px;}
  .ft-cut-group__h{
    display:block;margin-bottom:8px;font-family:var(--f-mono);font-size:10px;
    letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);opacity:0.85;
  }
  .ft-cut-tip{
    font-family:var(--f-italic);font-style:italic;font-size:14px;color:var(--gold);
    opacity:0.9;margin-top:2px;
  }
  .ft-pork-note{
    font-family:var(--f-italic);font-style:italic;font-size:13.5px;color:var(--ash);
    margin-top:10px;max-width:46ch;
  }
  .ft-cuts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .ft-cut{
    background:transparent;border:1px solid var(--rule);color:var(--bone);cursor:pointer;
    padding:14px 16px;min-height:var(--tap-min);display:flex;flex-direction:column;gap:6px;text-align:left;
    transition:border-color .25s, background .25s;font-family:inherit;
  }
  .ft-cut:hover{border-color:var(--gold);}
  .ft-cut__name{font-family:var(--f-display);font-size:16px;font-weight:500;line-height:1;}
  .ft-cut__d{font-family:var(--f-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--copper);}
  .ft-cut.active{background:rgba(212,165,116,0.08);border-color:var(--gold);}
  .ft-cut.active .ft-cut__d{color:var(--gold);}

  .ft-seg{align-self:flex-start;flex-wrap:wrap;}
  @media(max-width:640px){
    .ft-cuts{grid-template-columns:repeat(2,1fr);gap:8px;}
    .ft-cut{padding:11px 12px;gap:4px;}
    .ft-cut__name{font-size:15px;}
    .ft-cut__d{font-size:10px;letter-spacing:0.14em;}
  }
  .ft-controls{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap;}
  .ft-controls button{
    font-family:var(--f-mono);font-size:12px;letter-spacing:var(--label-track);text-transform:uppercase;
    padding:14px 22px;min-height:var(--tap-min);cursor:pointer;display:inline-flex;align-items:center;gap:10px;
    transition:all .25s;
  }
  #ftStart{background:var(--ember);border:1px solid var(--ember);color:var(--gold);}
  #ftStart:hover{box-shadow:0 0 0 1px rgba(212,165,116,0.35) inset,0 8px 30px -8px rgba(var(--ember-rgb),0.45);}
  #ftStart.running{background:transparent;color:var(--bone);border-color:var(--rule-strong);}
  #ftReset{background:transparent;border:1px solid var(--rule-strong);color:var(--bone);}
  #ftReset:hover{border-color:var(--bone);}

  .ft-right{
    position:relative;display:grid;place-items:center;padding:40px;
    background:radial-gradient(circle at 50% 60%, rgba(var(--forest-rgb),0.14), transparent 72%);
    min-height:340px;
  }
  .ft-ring{width:min(280px,80%);aspect-ratio:1;display:block;}
  .ft-ring circle{fill:none;}
  .ft-ring .track{stroke:var(--ft-ring-soft);stroke-width:2;}
  .ft-ring .prog{
    stroke:var(--ft-ring);stroke-width:2;stroke-linecap:round;
    transition:stroke-dashoffset 0.95s linear, opacity .35s ease;
    filter:drop-shadow(0 0 8px rgba(var(--forest-rgb),0.35));
  }
  .ft-ring .prog.is-full{opacity:0;}
  .ft-center{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;
  }
  .ft-time{
    font-family:var(--f-display);font-weight:500;font-variant-numeric:tabular-nums;
    font-size:clamp(48px,5.6vw,72px);line-height:1;color:var(--bone);letter-spacing:-0.02em;
  }
  .ft-side{
    font-family:var(--f-mono);font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--ash);
    text-align:center;
  }
  .ft-side b{color:var(--gold);font-weight:500;}
  .flip-timer.done .ft-time{color:var(--ember);animation:ftPulse 1s ease-in-out infinite;}
  .flip-timer.done .ft-side{color:var(--ember);}
  .flip-timer.done .ft-prompt{display:flex;}
  @keyframes ftPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
  .ft-prompt{
    display:none;align-items:center;justify-content:center;gap:10px;
    margin-top:12px;
    font-family:var(--f-italic);font-style:italic;font-size:24px;color:var(--ember);
  }
  .ft-prompt::before,.ft-prompt::after{content:"—";color:var(--gold);font-style:normal;font-family:var(--f-mono);}
  @media(max-width:900px){
    .flip-timer{grid-template-columns:1fr;}
    .ft-left{border-right:0;border-bottom:1px solid var(--rule);padding:32px;}
    .ft-right{padding:32px;min-height:300px;}
  }

  /* ----- Timer section wrapper ----- */
  .timer-sec{
    background:var(--surface);position:relative;overflow:hidden;
  }
  .timer-sec::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(900px 600px at 90% 10%, rgba(var(--ember-rgb),0.10), transparent 60%),
      radial-gradient(700px 500px at 5% 80%, rgba(var(--forest-rgb),0.12), transparent 60%);
  }
  .timer-sec .wrap{position:relative;z-index:1;}
  .note-link{
    display:inline-flex;align-items:center;gap:8px;margin-top:8px;
    font-family:var(--f-mono);font-size:13px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--gold);font-style:normal;
    border-bottom:1px solid rgba(212,165,116,0.35);padding-bottom:4px;
    transition:color .25s, border-color .25s;
  }
  .note-link span{transition:transform .25s;}
  .note-link:hover{color:var(--bone);border-color:var(--bone);}
  .note-link:hover span{transform:translate(4px,-2px);}

  .ft-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .ft-don-wrap .kalk-don-meta .lbl{font-size:22px;}
  .ft-don-wrap .kalk-don-meta .dsc{font-size:15px;}

  .ft-right{position:relative;}
  .ft-target{
    position:absolute;left:0;right:0;bottom:24px;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    pointer-events:none;text-align:center;
  }
  .ft-target-l{
    font-family:var(--f-mono);font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--ash);
  }
  .ft-target-v{
    font-family:var(--f-display);font-weight:600;font-size:32px;color:var(--gold);
    line-height:1;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;
  }
  .ft-target-r{
    font-family:var(--f-italic);font-style:italic;font-size:13px;color:var(--ash);
  }
  .recipe{
    border:1px solid var(--rule);background:var(--soot);
    display:flex;flex-direction:column;
    transition:transform .5s, border-color .5s, background .5s;
  }
  .recipe:hover{transform:translateY(-4px);border-color:var(--gold);background:var(--surface-3);box-shadow:var(--shadow-2);}
  .recipe-img{aspect-ratio:5/4;position:relative;overflow:hidden;}
  .recipe-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease;}
  .recipe:hover .recipe-img img{transform:scale(1.05);}
  .recipe-img.placeholder{
    background:
      repeating-linear-gradient(45deg, rgba(212,165,116,0.06) 0 10px, rgba(212,165,116,0) 10px 20px),
      linear-gradient(180deg, var(--surface-3), var(--char));
    display:grid;place-items:center;
  }
  .recipe-img.placeholder span{font-family:var(--f-mono);font-size:11px;letter-spacing:0.28em;color:var(--ash);}
  .recipe-body{padding:28px;display:flex;flex-direction:column;gap:14px;flex:1;}
  .recipe-tag{
    align-self:flex-start;
    font-family:var(--f-mono);font-size:11px;letter-spacing:0.3em;text-transform:uppercase;
    color:var(--gold);border:1px solid var(--rule);padding:4px 10px;
  }
  .recipe h3{font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.1;}
  .recipe p{font-size:15px;color:var(--paper);opacity:0.8;}
  .recipe-meta{
    margin-top:auto;display:flex;justify-content:space-between;align-items:center;
    border-top:1px solid var(--rule);padding-top:16px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--ash);
  }
  .recipe-meta .read{color:var(--bone);display:flex;align-items:center;gap:8px;}

html.light #ftStart{color:#F2E6C8;}
html.light #ftStart.running{color:var(--bone);}

/* ---- receptvariant utan foto: stämpelkort ---- */
.recipe--stamp .rbody{padding-top:26px;}
.recipe--stamp .big-stamp{
  font-family:var(--f-mono);text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(var(--gold-rgb),0.4);align-self:flex-start;
  padding:7px 11px;font-size:10px;letter-spacing:0.22em;transform:rotate(-1.4deg);margin-bottom:6px;
}
.recipes-page{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:1080px){.recipes-page{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.recipes-page{grid-template-columns:1fr;}}