/* Dark theme for the support pages, matching the service site (design draft). Loaded after style.css. */
:root { --green: #86d6a6; --green-dark: #eef7f1; --paper: #050706; --ink: #e6ece8; --muted: #a3ada8; --line: rgba(255, 255, 255, .1); }
body { background: radial-gradient(70% 420px at 50% 0, rgba(63, 157, 107, .16), transparent 75%) no-repeat, var(--paper); -webkit-font-smoothing: antialiased; }
main { padding-top: 40px; }
main.guide { padding-top: 26px; }

/* top bar, as on the service site */
.topbar { position: sticky; top: 0; z-index: 20; height: 52px; background: rgba(5, 7, 6, .8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.tb-wrap { max-width: 1040px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 22px; }
.tb-logo { display: flex; align-items: center; gap: 9px; margin-right: auto; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; }
.tb-logo img { width: 26px; height: 26px; border-radius: 7px; }
.tb-links { display: flex; gap: 22px; font-size: 13px; }
.tb-links a { color: var(--muted); text-decoration: none; }
.tb-links a:hover, .tb-links a[aria-current] { color: var(--ink); }
.tb-lang { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tb-lang:hover { color: var(--ink); border-color: rgba(255, 255, 255, .3); }
.tb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--ink); color: #050706; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (max-width: 720px) { .tb-links { display: none; } .tb-wrap { gap: 10px; padding: 0 16px; } }

/* text */
a { color: var(--green); }
h1, main.guide h1 { color: #fff; }
h2 { color: var(--green); }
main.guide h2 { color: #fff; }
hr { border-top-color: var(--line); }

/* boxes */
.toc { background: rgba(255, 255, 255, .04); border-color: var(--line); }
.quick { background: rgba(255, 255, 255, .035); border: 1px solid rgba(134, 214, 166, .35); }
.quick-title { color: #fff; }
.tip { background: rgba(134, 214, 166, .09); color: var(--ink); }
.note { background: rgba(229, 180, 74, .12); color: var(--ink); }

/* tabs stay just under the top bar */
.tabs { top: 52px; background: var(--paper); box-shadow: 0 -12px 0 var(--paper); }
.tabs button:hover { color: var(--green); }
.tabs button[aria-selected="true"] { background: rgba(134, 214, 166, .14); color: #fff; border-bottom-color: var(--green); }
main.guide h2, main.guide h3, main.guide .quick { scroll-margin-top: 122px; }

/* screenshots */
figure.phone img { border-color: #2a2f2d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 14px 30px rgba(0, 0, 0, .5); }
figure.watch img { border-color: #2c3032; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 14px 30px rgba(0, 0, 0, .5); }
figcaption .ok { color: #86d6a6; }
figcaption .ng { color: #e5b44a; }

/* the tempo diagram was drawn for a light page */
.diagram [stroke="#dce9de"] { stroke: rgba(255, 255, 255, .14); }
.diagram [fill="#56645e"] { fill: #a3ada8; }
.diagram [fill="#13231d"] { fill: #e6ece8; }
.diagram [fill="#24523f"] { fill: #3f9d6b; }

/* Wide screens: the page uses more of the width; pictures grow with it and the contents list goes to two columns */
@media (min-width: 1024px) {
  main { max-width: 1000px; padding-left: 32px; padding-right: 32px; }
  main.guide { font-size: 17.5px; }
  .toc { columns: 2; column-gap: 48px; }
  .toc li { break-inside: avoid; }
  figure.phone { width: 240px; }
  figure.watch { width: 180px; }
  .shots { gap: 28px; }
  .shots.trio > figure:first-child .pinbox { width: 180px; }
}

/* Swing tempo diagram (start → top → impact, 3 : 1): spans the full width, so the short downswing part has room for its label */
.tdiag { --dot: 36px; padding: 0 calc(var(--dot) / 2); margin: 14px 0 22px; }
.td-labels { position: relative; height: 34px; }
.td-labels span { position: absolute; bottom: 8px; white-space: nowrap; font-size: 15px; color: var(--muted); transform: translateX(-50%); }
.td-labels b { color: var(--ink); font-weight: 700; margin-right: 2px; }
.td-back { left: 37.5%; }
.td-down { left: 87.5%; }
.td-rail { position: relative; height: var(--dot); }
.td-rail i { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 5px; }
.td-b { left: 0; width: 75%; background: #3f7a5a; }
.td-d { left: 75%; width: 25%; background: #8fd6aa; }
.td-dot { position: absolute; top: 0; width: var(--dot); height: var(--dot); margin-left: calc(var(--dot) / -2); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #3f9d6b; color: #fff; font-size: 16px; font-weight: 800; }
.td-names { position: relative; height: 30px; margin-top: 8px; }
.td-names span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: 17px; font-weight: 700; color: var(--ink); }
.td-names .first { transform: none; margin-left: calc(var(--dot) / -2); }
.td-names .last { transform: translateX(-100%); margin-left: calc(var(--dot) / 2); }
/* phones: smaller, each label on two lines, centred over its part of the line */
@media (max-width: 560px) {
  .tdiag { --dot: 28px; }
  .td-labels { height: 44px; }
  .td-labels span { font-size: 12.5px; line-height: 1.35; text-align: center; }
  .td-labels b { display: block; margin: 0; font-size: 13px; }
  .td-dot { font-size: 13px; }
  .td-names span { font-size: 12.5px; }
}
/* the narrowest phones (320 px): a little smaller still, so トップ and インパクト don't touch */
@media (max-width: 360px) { .td-names span { font-size: 11.5px; } }

/* Contact form (contact.html, contact-en.html) and the page after sending */
.cform { display: grid; gap: 20px; max-width: 640px; margin-top: 18px; }
.cform fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.cform label, .cform legend { display: block; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.cform .req, .cform .opt { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.cform .req { color: var(--green); border: 1px solid rgba(134, 214, 166, .5); }
.cform .opt { color: var(--muted); border: 1px solid var(--line); }
.cform input, .cform textarea { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .05); color: var(--ink); font: inherit; font-size: 16px; }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--green); }
.cform input::placeholder, .cform textarea::placeholder { color: #6f7a75; }
.cform textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.cform .kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.cform .kinds label { position: relative; margin: 0; font-weight: 400; }
.cform .kinds input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.cform .kinds span { display: inline-block; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; font-size: 14px; color: var(--muted); }
.cform .kinds input:checked + span { border-color: var(--green); background: rgba(134, 214, 166, .14); color: var(--ink); font-weight: 700; }
.cform .kinds input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.cform .fine { margin: -6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.cform .send { height: 54px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #3f9d6b, #2a6d4b); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.cform .trap { position: absolute; left: -9999px; }
/* "Open the contact form" on the support page */
a.go { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #3f9d6b, #2a6d4b); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
@media (min-width: 721px) { a.go { display: inline-flex; padding: 0 28px; } }
main.done { text-align: center; padding-top: 56px; }
main.done .ok { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: rgba(134, 214, 166, .15); display: flex; align-items: center; justify-content: center; }
main.done p { color: var(--muted); }
main.done a.back { color: var(--green); }