/* how-to-practice-putting-at-home: page-only styles (prefix htp-). Needs site.css + article.css. The sections,
   tiles, folds, tip / safety / source lines, key chips, slim quote, stacked table and article foot are
   article.css's TIDY KIT; this file holds only what is particular to this page. */

/* hero photo: a wider crop below the desktop split, so the short answer comes sooner */
@media (max-width:1023px){.gg-arthero__photo{aspect-ratio:16/10}}

/* the short answer opens the body (the mobile TOC sits above it, hidden on desktop) */
.gg-tsec.htp-first{margin-top:0}

/* ---------- the short answer: one dek line and four skill tiles ---------- */
.htp-answer{padding:1.1rem;border-radius:var(--gg-r-xl);background:var(--gg-green-50);border:1px solid var(--gg-green-200)}
@media (min-width:768px){.htp-answer{padding:1.35rem 1.5rem}}
.htp-answer>*+*{margin-top:.85rem}
.htp-answer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media (min-width:1280px){.htp-answer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.htp-answer__grid>li{display:flex;gap:.6rem;align-items:center;padding:.65rem .7rem;border-radius:var(--gg-r-m);background:#fff;border:1px solid var(--gg-line);line-height:1.3}
.htp-answer__grid b{display:block;font:650 .95rem var(--gg-display);color:var(--gg-ink)}
.htp-answer__grid a{font-size:.9rem;font-weight:700}
.htp-answer__ico{display:grid;place-items:center;flex:none;width:2.3rem;height:2.3rem;border-radius:12px;background:var(--gg-green-800);color:#fff}

/* ---------- your kit: two chip groups ---------- */
.htp-kit{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
@media (min-width:640px){.htp-kit{grid-template-columns:1fr 1fr}}
.htp-kit__col{padding:.85rem 1rem .95rem;border-radius:var(--gg-r-l);background:#fff;border:1px solid var(--gg-line)}
.htp-kit__col--opt{background:var(--gg-brass-100);border-color:var(--gg-brass-200)}
.htp-kit__h{display:flex;align-items:center;gap:.4rem;margin-bottom:.55rem;font:650 1rem var(--gg-display);color:var(--gg-ok)}
.htp-kit__col--opt .htp-kit__h{color:var(--gg-brass-700)}
.htp-kit__col--opt .gg-kchips>li{background:#fff}
.htp-kit__col--opt .gg-kchips .gg-ic{color:var(--gg-brass-700)}
.htp-kit .gg-kchips a{display:inline-flex;align-items:center;min-height:28px;margin-block:-.2rem;color:var(--gg-green-800)}

/* ---------- steps: a card per drill (cup number, title, one line, skill), then its drawing and fold ---------- */
.htp-steps{margin-top:0}
@media (min-width:768px){.htp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}}
.htp-steps>li{align-content:start;row-gap:.8rem}
.htp-steps>li>:is(.htp-diagram,.htp-fold){grid-column:1/-1}
.htp-steps h3{font-size:1.1rem}
.htp-steps>li>div>p{font-size:.97rem;line-height:1.5}
.htp-steps .gg-steplist__meta{margin-top:.55rem}
.htp-diagram{margin:0;padding:.6rem .6rem .45rem;border-radius:var(--gg-r-l);background:var(--gg-ground);border:1px solid var(--gg-line)}
.htp-diagram svg{width:100%;height:auto}
.htp-fold>summary{min-height:44px}

/* ---------- step 7: the routine (chart + card) and its foot (note + quote) ---------- */
.htp-routine{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;align-items:center}
@media (min-width:560px){.htp-routine{grid-template-columns:9.5rem minmax(0,1fr);gap:1.1rem}}
/* phones: the card's colour keys carry the split, so the chart waits for a wider screen */
.htp-routine__chart{display:none;margin:0;width:100%}
@media (min-width:560px){.htp-routine__chart{display:block}}
.htp-routine__chart svg{width:100%;height:auto}
.htp-card{padding:1rem 1.05rem .95rem;border-radius:var(--gg-r-xl);background:#fff;border:1.5px dashed var(--gg-brass-200);box-shadow:var(--gg-sh-1)}
.htp-card__head{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center}
.htp-card__ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:14px;background:var(--gg-brass-100);color:var(--gg-brass-700)}
.htp-card__t{font:650 1.05rem/1.25 var(--gg-display);color:var(--gg-ink)}
.htp-card__s{margin-top:.1rem;font-size:.9rem;line-height:1.4;color:var(--gg-ink-2)}
.htp-card__rows{display:grid;margin-top:.7rem}
.htp-card__rows>li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.38rem;border-bottom:1px dashed var(--gg-line);font-size:.95rem;line-height:1.4}
.htp-card__rows>li:last-child{border-bottom:0}
.htp-card__rows>li>span:first-child{display:inline-flex;align-items:baseline;gap:.5rem}
.htp-card__min{flex:none;font:700 .9rem var(--gg-display);color:var(--gg-brass-700)}
.htp-sw{flex:none;width:.7rem;height:.7rem;border-radius:3px}
.htp-sw--1{background:#1d4d36}
.htp-sw--2{background:#2f7350}
.htp-sw--3{background:#d0a44a}
.htp-sw--4{background:#a9cbb2}
.htp-card__week{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.htp-card__week i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:8px;border:1.5px solid var(--gg-line-2);font:700 .8125rem var(--gg-display);font-style:normal;color:var(--gg-muted)}
.htp-routine__foot{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
@media (min-width:768px){.htp-routine__foot{grid-template-columns:1fr 1fr;align-items:start}}

/* ---------- carpet: three ticks + the drawing ---------- */
.htp-split{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;align-items:center;padding:1rem 1.05rem;border-radius:var(--gg-r-xl);background:#fff;border:1px solid var(--gg-line)}
@media (min-width:768px){.htp-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem;padding:1.2rem 1.3rem}}
.htp-split h3{font:650 1.1rem/1.25 var(--gg-display);color:var(--gg-ink)}
.htp-ticks{display:grid;gap:.4rem;margin-top:.6rem}
.htp-ticks li{display:flex;gap:.5rem;align-items:flex-start;font-size:.95rem;line-height:1.45;color:var(--gg-ink)}
.htp-ticks .gg-ic{flex:none;margin-top:.15rem;color:var(--gg-ok)}
.htp-diagram--carpet{background:var(--gg-row)}

/* ---------- putting tips: four habits, each row "avoid" beside "do instead" ---------- */
.htp-swaps{border-radius:var(--gg-r-l);background:#fff;border:1px solid var(--gg-line);overflow:hidden}
.htp-swaps__head{display:none}
.htp-swaps ul{display:grid}
.htp-swaps li{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding:.65rem 1rem}
.htp-swaps li+li{border-top:1px solid var(--gg-line)}
.htp-swaps li>span{display:flex;gap:.5rem;align-items:flex-start;font-size:.94rem;line-height:1.45}
.htp-swaps li .gg-ic{flex:none;margin-top:.15rem}
.htp-swaps__no{color:var(--gg-ink-2)}
.htp-swaps__no .gg-ic{color:var(--gg-bad)}
.htp-swaps__do{font-weight:650;color:var(--gg-ink)}
.htp-swaps__do .gg-ic{color:var(--gg-ok)}
@media (min-width:640px){
  .htp-swaps__head{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;padding:.55rem 1rem;background:linear-gradient(90deg,var(--gg-bad) 0 50%,var(--gg-ok) 50% 100%) top/100% 3px no-repeat;border-bottom:1px solid var(--gg-line);font:650 .95rem var(--gg-display)}
  .htp-swaps__head>span:first-child{color:var(--gg-bad)}
  .htp-swaps__head>span:last-child{color:var(--gg-ok)}
  .htp-swaps li{grid-template-columns:1fr 1fr;gap:1.2rem}
}

/* ---------- safety: the visible line and four tiles; the drawing beside them on wide screens only ---------- */
.htp-safety{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.htp-safety__list{display:grid;gap:.7rem}
.htp-safety__photo{display:none;margin:0}
@media (min-width:900px){
  .htp-safety{grid-template-columns:minmax(0,1fr) 12rem;align-items:start}
  .htp-safety__photo{display:block;position:sticky;top:6rem}
}
.htp-safety__photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--gg-r-l);background:var(--gg-green-100)}
.htp-safety__photo figcaption{margin-top:.45rem;font-size:.8125rem;line-height:1.4;color:var(--gg-muted)}
/* phones: each tile is a row (icon left), so the notes stay short */
@media (max-width:639px){
  .htp-tiles{grid-template-columns:minmax(0,1fr)}
  .htp-tiles>.gg-ktile{grid-template-columns:auto minmax(0,1fr);column-gap:.8rem;row-gap:.15rem}
  .htp-tiles>.gg-ktile>.gg-ktile__ico{grid-row:span 2}
}
.htp-tiles a{font-weight:700}

/* ---------- care table: the kit's stacked rows under 640 px; the maker row in brand green ---------- */
@media (max-width:639px){
  .htp-care tbody th{background:var(--gg-green-800)!important;color:#fff}
  .htp-care td{display:grid;grid-template-columns:5.25rem minmax(0,1fr);gap:.6rem;padding-block:.5rem}
  .htp-care td+td{border-top:1px solid var(--gg-line)!important}
  .htp-care td::before{margin:0;line-height:1.5}
}

/* ---------- stimp scale ---------- */
.htp-scale{margin:0;padding:1rem 1.05rem;border-radius:var(--gg-r-l);background:#fff;border:1px solid var(--gg-line)}
.htp-scale__bar{position:relative;padding-top:2.9rem;font-size:.8125rem}
.htp-scale__band{position:absolute;height:1rem;border-radius:999px;left:calc(1.25em + (100% - 2.5em) * var(--a) / 9);width:calc((100% - 2.5em) * (var(--b) - var(--a)) / 9)}
.htp-scale__band--slow,.htp-scale__band--fast{top:.35rem;background:var(--gg-green-700)}
.htp-scale__band--slow{opacity:.6}
.htp-scale__band--fast{border-radius:999px 0 0 999px}
.htp-scale__band--mat{top:1.6rem;background:var(--gg-brass-400)}
.htp-scale__ticks{display:flex;justify-content:space-between;padding-top:.35rem;border-top:2px solid var(--gg-line-2)}
.htp-scale__ticks i{width:2.5em;text-align:center;font:700 .8125rem/1 var(--gg-display);font-style:normal;color:var(--gg-ink-2)}
.htp-scale__key{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;margin-top:.9rem}
@media (min-width:640px){.htp-scale__key{grid-template-columns:repeat(3,minmax(0,1fr))}}
.htp-scale__key>li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;line-height:1.4;color:var(--gg-ink-2)}
.htp-scale__key b{display:block;color:var(--gg-ink);font-weight:750}
.htp-scale__sw{flex:none;width:1.4rem;height:.8rem;margin-top:.3rem;border-radius:999px}
.htp-scale__sw--slow,.htp-scale__sw--fast{background:var(--gg-green-700)}
.htp-scale__sw--slow{opacity:.6}
.htp-scale__sw--mat{background:var(--gg-brass-400)}
.htp-scale figcaption{margin-top:.6rem;font-size:.8125rem;color:var(--gg-muted)}

/* ---------- FAQ ---------- */
.htp-faq .gg-faq{max-width:46rem}

/* ---------- article foot: the method in one line between the byline and the links ---------- */
.htp-artfoot__line{flex:1 1 16rem;font-size:.9rem;line-height:1.45}

/* ---------- aside: next read ---------- */
.htp-next{position:relative;display:grid;grid-template-columns:4.25rem 1fr;gap:.75rem;align-items:center;padding:.75rem;border-radius:var(--gg-r-l);background:#fff;border:1px solid var(--gg-line)}
.htp-next img{width:4.25rem;height:4.25rem;border-radius:12px;object-fit:cover}
.htp-next__t{margin-top:.15rem;font:650 .95rem/1.3 var(--gg-display)}
.htp-next__t a{color:var(--gg-ink);text-decoration:none}
.htp-next__t a::after{content:"";position:absolute;inset:0}
.htp-next:hover .htp-next__t a{color:var(--gg-green-800)}