/* Knitting and crochet calculators (stitch, crochet, gauge, yarn). Scoped to [data-knitcalc]. */
[data-knitcalc] { user-select: text; -webkit-user-select: text; }
[data-knitcalc] .kc-block { display: flex; flex-direction: column; gap: 12px; }
[data-knitcalc] .kc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
[data-knitcalc] .kc-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-knitcalc] .kc-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-knitcalc] .kc-grid .inp { font-size: 20px; font-weight: 600; min-height: 52px; font-variant-numeric: tabular-nums; }
[data-knitcalc] .kc-grid .inp::placeholder, [data-knitcalc] .kc-piece .inp::placeholder { color: var(--mute); font-weight: 400; font-size: 15px; }
[data-knitcalc] .kc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
[data-knitcalc] .kc-modes { align-self: flex-start; }
[data-knitcalc] .kc-h { font-size: 15px; margin: 6px 0 0; }
[data-knitcalc] .kc-out { display: flex; flex-direction: column; gap: 8px; min-height: 64px; }
[data-knitcalc] .kc-out p { margin: 0; }
[data-knitcalc] .kc-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
[data-knitcalc] .kc-big .big { font-size: clamp(48px, 12vw, 88px); }
[data-knitcalc] .kc-big span { font-weight: 600; font-size: 18px; color: var(--body); }
[data-knitcalc] .kc-line { font-size: 17px; font-weight: 500; }
[data-knitcalc] .kc-pattern { font-size: clamp(18px, 3.4vw, 24px); font-weight: 700; line-height: 1.35; }
[data-knitcalc] .kc-steps { margin: 0; padding-left: 24px; font-size: 17px; }
[data-knitcalc] .kc-steps li { margin: 2px 0; }
[data-knitcalc] .kc-note { font-size: 14px; }
[data-knitcalc] .kc-msg { color: var(--body); font-weight: 500; }
[data-knitcalc] .kc-table td:last-child { text-align: left; }
[data-knitcalc] .kc-pieces { display: flex; flex-direction: column; gap: 8px; }
[data-knitcalc] .kc-piece, [data-knitcalc] .kc-piece-h { display: grid; grid-template-columns: 24px repeat(2, minmax(0, 1fr)) minmax(0, .7fr); gap: 8px; align-items: center; }
[data-knitcalc] .kc-piece-h { font-size: 13px; font-weight: 600; color: var(--body); }
[data-knitcalc] .kc-pnum { font-weight: 700; color: var(--body); text-align: center; }
[data-knitcalc] .kc-piece .inp { font-size: 18px; font-weight: 600; min-height: 48px; }
body.is-focus [data-knitcalc] .stage { gap: 16px; }
@media (max-width: 720px) {
  [data-knitcalc] .kc-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-knitcalc] .kc-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  [data-knitcalc] .kc-grid .inp { font-size: 18px; }
  [data-knitcalc] .seg button { padding: 8px 10px; font-size: 14px; }
}