/*
 * Jack & Jack Stand Size Calculator -- tokens and layout, scoped to .jks-app.
 *
 * The tool is a dark panel inside the theme's light article column, so every rule
 * is scoped under .jks-app. The theme styles .tg-content h2/h3/ul/li/a/img/table
 * for the article prose; those rules would otherwise leak into the tool (list
 * bullets, red underlined links, 24px image margins). `.jks-app .x` beats
 * `.tg-content x` on specificity, which is what keeps the two apart. Do not
 * "simplify" the prefixes away.
 *
 * Layout answers to the width of the column, not the viewport: the post sits in a
 * ~720px column beside a 320px sidebar on desktop and goes full width on a phone,
 * so the breakpoints are container queries on .jks-app.
 *
 * The palette, fonts and 2px radius are the 33gears theme's. No url() anywhere in
 * this file: an optimiser that moves stylesheets would break relative paths.
 */

.jks-app {
  --jks-red: #e11d2a;
  --jks-red-dark: #b91320;
  --jks-bg: #0a0a0b;
  --jks-bg-2: #0f0f12;
  --jks-surface: #141417;
  --jks-surface-2: #1b1b21;
  --jks-surface-3: #23232a;
  --jks-line: rgba(255, 255, 255, .08);
  --jks-line-strong: rgba(255, 255, 255, .16);
  --jks-text: #f4f1ec;
  --jks-dim: #c1c1c7;
  --jks-muted: #8a8a90;
  --jks-faint: #6a6a72;
  --jks-warn: #f5a524;
  --jks-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --jks-font-body: "Spectral", Georgia, "Times New Roman", serif;
  --jks-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --jks-radius: 2px;

  container-type: inline-size;
  container-name: jks;
  display: block;
  margin: 32px 0;
  padding: 24px;
  background: var(--jks-bg);
  color: var(--jks-text);
  border-top: 3px solid var(--jks-red);
  border-radius: var(--jks-radius);
  font-family: var(--jks-font-body);
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
  letter-spacing: normal;
}
.jks-app *, .jks-app *::before, .jks-app *::after { box-sizing: border-box; }
.jks-app p { margin: 0; }
.jks-app ul { list-style: none; margin: 0; padding: 0; }
.jks-app li { margin: 0; }
.jks-app img { display: block; margin: 0; border-radius: 0; max-width: 100%; height: auto; }
.jks-app a { color: var(--jks-text); text-decoration-color: var(--jks-red); text-underline-offset: 3px; }
.jks-app a:hover { color: var(--jks-red); }
.jks-app button, .jks-app input, .jks-app select { font-family: var(--jks-font-ui); }

.jks-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- inputs ---------- */
.jks-app .jks-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jks-app .jks-card { background: var(--jks-surface); border: 1px solid var(--jks-line); border-radius: var(--jks-radius); padding: 20px; min-width: 0; }
.jks-app .jks-card-title { font-family: var(--jks-font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 18px; line-height: 1.2; color: var(--jks-text); margin: 0 0 14px; }
.jks-app .jks-field { display: block; margin: 0 0 12px; }
.jks-app .jks-label { display: block; font-family: var(--jks-font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--jks-muted); margin: 0 0 5px; padding: 0; }
.jks-app .jks-input, .jks-app .jks-select {
  display: block; width: 100%; margin: 0; font-size: 16px; line-height: 1.3;
  color: var(--jks-text); background-color: var(--jks-surface-2); border: 1px solid var(--jks-line-strong);
  border-radius: var(--jks-radius); padding: 10px 12px; min-height: 44px;
}
.jks-app .jks-input:focus, .jks-app .jks-select:focus,
.jks-app .jks-btn:focus-visible, .jks-app .jks-showbtn:focus-visible,
.jks-app .jks-hit:focus-visible, .jks-app .jks-pick-link:focus-visible,
.jks-app .jks-answer:focus-visible {
  outline: 2px solid var(--jks-red); outline-offset: 2px;
}
.jks-app .jks-answer:focus:not(:focus-visible) { outline: 0; }
.jks-app .jks-hint { font-family: var(--jks-font-ui); font-size: 13px; color: var(--jks-muted); margin: 6px 0 14px; line-height: 1.45; }
.jks-app .jks-minirow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jks-app .jks-fieldset { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.jks-app .jks-fieldset legend { padding: 0; }
.jks-app .jks-radio, .jks-app .jks-toggle { display: flex; align-items: center; gap: 10px; font-family: var(--jks-font-ui); font-size: 15px; color: var(--jks-dim); min-height: 40px; cursor: pointer; margin: 0; }
.jks-app .jks-toggle { margin: 8px 0 16px; }
.jks-app .jks-radio input, .jks-app .jks-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--jks-red); flex: none; }
.jks-app .jks-searchbox { position: relative; }
.jks-app .jks-hits {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--jks-surface-3);
  border: 1px solid var(--jks-line-strong); border-radius: var(--jks-radius); max-height: 320px; overflow: auto;
}
.jks-app .jks-hits[hidden] { display: none; }
.jks-app .jks-hit { display: flex; width: 100%; justify-content: space-between; gap: 12px; text-align: left; font-size: 15px; color: var(--jks-text); background: none; border: 0; border-bottom: 1px solid var(--jks-line); border-radius: 0; padding: 11px 12px; min-height: 44px; cursor: pointer; }
.jks-app .jks-hit:hover { background: var(--jks-surface-2); }
.jks-app .jks-hit-meta { color: var(--jks-muted); font-size: .88em; white-space: nowrap; }
.jks-app .jks-lookup-empty, .jks-app .jks-lookup-note { font-family: var(--jks-font-ui); font-size: 13px; color: var(--jks-muted); padding: 10px 12px; margin: 0; }

/* ---------- the Show results bar ---------- */
.jks-app .jks-actionbar { display: flex; align-items: center; gap: 18px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--jks-line); }
.jks-app .jks-showbtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; margin: 0; cursor: pointer;
  font-family: var(--jks-font-display); font-weight: 600; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: #fff; background: var(--jks-red); border: 0; border-radius: var(--jks-radius);
  box-shadow: 0 6px 18px rgba(225, 29, 42, .28);
}
.jks-app .jks-showbtn:hover { background: var(--jks-red-dark); }
.jks-app .jks-showbtn:active { transform: translateY(1px); }
.jks-app .jks-showbtn-arrow { animation: jks-nudge 1.8s ease-in-out infinite; }
.jks-app .jks-status { font-family: var(--jks-font-ui); font-size: 15px; line-height: 1.4; color: var(--jks-dim); min-width: 0; border-left: 3px solid var(--jks-line-strong); padding: 6px 0 6px 14px; }
.jks-app .jks-status.is-warn { color: var(--jks-warn); border-left-color: var(--jks-warn); }
.jks-app .jks-status.is-updated { animation: jks-status-flash 1.4s ease-out 1; }
@keyframes jks-nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
@keyframes jks-status-flash { 0% { color: #fff; border-left-color: var(--jks-red); background: rgba(225, 29, 42, .22); } 100% { background: rgba(225, 29, 42, 0); } }

/* ---------- the result ---------- */
.jks-app .jks-resultbox {
  margin: 18px 0 0; padding: 22px; background: var(--jks-bg-2); border: 1px solid var(--jks-line); border-radius: var(--jks-radius);
  scroll-margin-top: 16px;
}
.jks-app .jks-resultbox.is-flash { animation: jks-box-flash 1.5s ease-out 1; }
@keyframes jks-box-flash { 0% { box-shadow: 0 0 0 0 rgba(225, 29, 42, .75); border-color: var(--jks-red); } 100% { box-shadow: 0 0 0 16px rgba(225, 29, 42, 0); } }
.jks-app .jks-answer-label { font-family: var(--jks-font-ui); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--jks-muted); margin: 0 0 6px; min-height: 1.5em; }
.jks-app .jks-answer {
  font-family: var(--jks-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; color: var(--jks-text);
  font-size: clamp(28px, 7cqi, 46px); margin: 0 0 10px;
}
.jks-app .jks-answer-plus { color: var(--jks-red); }
.jks-app .jks-result--empty .jks-answer { color: var(--jks-dim); font-size: clamp(24px, 5.5cqi, 36px); }
.jks-app .jks-answer-sub { color: var(--jks-dim); margin: 0 0 22px; max-width: 44em; }
.jks-app .jks-result--empty .jks-answer-sub { margin-bottom: 0; }
.jks-app .jks-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jks-app .jks-tile { background: var(--jks-surface); border: 1px solid var(--jks-line); border-top: 2px solid var(--jks-red); border-radius: var(--jks-radius); padding: 16px; min-width: 0; }
.jks-app .jks-tile-title { font-family: var(--jks-font-ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--jks-muted); margin: 0 0 6px; font-weight: 400; }
.jks-app .jks-tile-big { font-family: var(--jks-font-display); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--jks-text); margin: 0 0 8px; }
.jks-app .jks-tile-note { font-family: var(--jks-font-ui); font-size: 14px; color: var(--jks-dim); margin: 0; line-height: 1.5; }
.jks-app .jks-flaglist { margin: 16px 0 0; }
.jks-app .jks-flag { font-family: var(--jks-font-ui); font-size: 14px; color: var(--jks-text); background: var(--jks-surface); border-left: 3px solid var(--jks-warn); padding: 10px 14px; margin: 0 0 8px; line-height: 1.5; }

/* ---------- picks ---------- */
.jks-app .jks-picks { margin: 0; padding: 0; }
.jks-app .jks-summary { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--jks-line); }
.jks-app .jks-picks-title { font-family: var(--jks-font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 22px; line-height: 1.2; color: var(--jks-text); margin: 0 0 8px; }
.jks-app .jks-picks-disclosure { font-family: var(--jks-font-ui); font-size: 13px; color: var(--jks-dim); margin: 0 0 14px; line-height: 1.5; }
.jks-app .jks-picklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jks-app .jks-pick { min-width: 0; }
.jks-app .jks-pick-link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--jks-text);
  background: var(--jks-surface); border: 1px solid var(--jks-line); border-radius: var(--jks-radius); overflow: hidden;
}
.jks-app .jks-pick-link:hover { border-color: var(--jks-red); color: var(--jks-text); }
.jks-app .jks-pick-img { display: block; background: radial-gradient(ellipse at 50% 35%, var(--jks-surface-3), var(--jks-surface-2) 70%); border-bottom: 1px solid var(--jks-line); aspect-ratio: 4 / 3; }
.jks-app .jks-pick-img img { width: 100%; height: 100%; object-fit: contain; }
.jks-app .jks-pick-label { display: block; font-family: var(--jks-font-ui); font-weight: 600; font-size: 15px; line-height: 1.3; padding: 12px 14px 0; }
.jks-app .jks-pick-why { display: block; font-family: var(--jks-font-ui); font-size: 13px; color: var(--jks-muted); margin: 4px 0 0; padding: 0 14px; line-height: 1.4; }
.jks-app .jks-pick-cta { display: block; margin-top: auto; padding: 12px 14px 14px; font-family: var(--jks-font-ui); font-size: 13px; font-weight: 600; color: var(--jks-red); }
.jks-app .jks-pick-cta::after { content: " \2192"; }
.jks-app .jks-pick-link:hover .jks-pick-cta { color: var(--jks-text); }
.jks-app .jks-picks-note { font-family: var(--jks-font-ui); font-size: 12px; color: var(--jks-faint); margin: 12px 0 0; }

/* ---------- the explanation, below the results ---------- */
.jks-app .jks-explain { margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--jks-line); }
.jks-app .jks-explain-title { font-family: var(--jks-font-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--jks-muted); margin: 0 0 10px; }
.jks-app .jks-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.jks-app .jks-chip { font-family: var(--jks-font-ui); font-size: 12px; color: var(--jks-dim); border: 1px solid var(--jks-line-strong); border-radius: 999px; padding: 4px 11px; }
.jks-app .jks-chip--assumed { color: var(--jks-warn); border-color: rgba(245, 165, 36, .5); }
.jks-app .jks-explain-note { font-family: var(--jks-font-ui); font-size: 14px; color: var(--jks-dim); line-height: 1.55; margin: 0 0 6px; }

.jks-app .jks-btnrow { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; }
.jks-app .jks-btn { font-size: 14px; color: var(--jks-text); background: var(--jks-surface-2); border: 1px solid var(--jks-line-strong); border-radius: var(--jks-radius); padding: 10px 16px; min-height: 44px; margin: 0; cursor: pointer; }
.jks-app .jks-btn:hover { border-color: var(--jks-red); }
.jks-app .jks-copied { font-family: var(--jks-font-ui); font-size: 13px; color: var(--jks-muted); opacity: 0; }
.jks-app .jks-copied.is-on { opacity: 1; }

/* ---------- the column is narrow: stack ---------- */
@container jks (max-width: 780px) {
  .jks-app .jks-minirow { grid-template-columns: 1fr; }
}
@container jks (max-width: 600px) {
  .jks-app .jks-inputs { grid-template-columns: 1fr; }
  .jks-app .jks-tiles { grid-template-columns: 1fr; }
  .jks-app .jks-picklist { grid-template-columns: repeat(2, 1fr); }
  .jks-app .jks-actionbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .jks-app .jks-showbtn { width: 100%; }
}
@container jks (max-width: 400px) {
  .jks-app .jks-minirow { grid-template-columns: 1fr; }
  .jks-app .jks-pick-label { padding: 10px 10px 0; font-size: 14px; }
  .jks-app .jks-pick-why { padding: 0 10px; }
  .jks-app .jks-pick-cta { padding: 10px 10px 12px; }
}
@media (max-width: 560px) {
  .jks-app { padding: 16px; margin-left: -4px; margin-right: -4px; }
  .jks-app .jks-card { padding: 16px; }
  .jks-app .jks-resultbox { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .jks-app, .jks-app *, .jks-app *::before, .jks-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}