/*
 * Tools page styles (Solo Calculator, Best Share, Hashrate Converter).
 * Ported from github.com/Turtlecute33/solo-calculator and scoped under
 * .tools-page so its CSS variables don't bleed into the rest of the GUI.
 */

.tools-page {
  --tools-bg: #262626;
  --tools-layer-01: #161616;
  --tools-field: #393939;
  --tools-field-hover: #474747;
  --tools-border-subtle: #393939;
  --tools-border-strong: #525252;
  --tools-text-primary: #ffffff;
  --tools-text-secondary: #a8a8a8;
  --tools-text-helper: #6f6f6f;
  --tools-brand: #6b50ff;
  --tools-link: #8b7cff;
  --tools-link-hover: #a69dff;
  --tools-highlight: #281661;
  --tools-support-success: #34c06a;
  --tools-accent: var(--tools-brand);
  --tools-font-sans: 'Braiins Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tools-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tools-duration-fast-02: 110ms;
  --tools-ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  background: var(--tools-bg);
  color: var(--tools-text-primary);
  font-family: var(--tools-font-sans);
}

.tools-page main.tools-main {
  max-width: 768px;
  /* Without min-width: 0, Chrome lets a descendant's intrinsic min-content
   * (notably <input type="number">) push `main` past the viewport, and the
   * page-level overflow-x: hidden then clips visible content. */
  min-width: 0;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

.tools-page header.page-head { margin-bottom: 32px; }
.tools-page header.page-head .sub {
  display: block;
  font: 400 11px/1.33 var(--tools-font-mono);
  letter-spacing: .32px;
  text-transform: uppercase;
  color: var(--tools-text-helper);
  margin-bottom: 8px;
}
.tools-page header.page-head h1 {
  font: 700 28px/1.21 var(--tools-font-sans);
  letter-spacing: .3px;
  color: var(--tools-text-primary);
  margin-bottom: 8px;
}
.tools-page .tagline {
  color: var(--tools-text-secondary);
  font: 400 14px/1.5 var(--tools-font-sans);
  margin: 0;
}

/* Coin tabs (content switcher) */
.tools-page .coin-tabs {
  display: inline-flex;
  gap: 0;
  margin-bottom: 24px;
  border: 1px solid var(--tools-border-strong);
}
.tools-page .coin-tab {
  font: 400 14px/1 var(--tools-font-sans);
  letter-spacing: .16px;
  padding: 0 24px;
  height: 40px;
  background: transparent;
  color: var(--tools-text-secondary);
  border: 0;
  border-right: 1px solid var(--tools-border-strong);
  cursor: pointer;
  transition: background var(--tools-duration-fast-02) var(--tools-ease-productive),
              color var(--tools-duration-fast-02) var(--tools-ease-productive);
}
.tools-page .coin-tab:last-child { border-right: 0; }
.tools-page .coin-tab:hover { background: var(--tools-field); color: var(--tools-text-primary); }
.tools-page .coin-tab:focus-visible { outline: 2px solid var(--tools-text-primary); outline-offset: -2px; }
.tools-page .coin-tab.active { background: var(--tools-text-primary); color: #000; font-weight: 600; }

/* Input section */
.tools-page #input-section {
  background: var(--tools-layer-01);
  padding: 24px;
  border: 1px solid var(--tools-border-subtle);
  margin-bottom: 1px;
}
.tools-page .input-label {
  display: block;
  font: 400 12px/1.33 var(--tools-font-sans);
  letter-spacing: .32px;
  color: var(--tools-text-secondary);
  margin-bottom: 8px;
}
.tools-page .input-group { display: flex; gap: 1px; }
.tools-page .input-group input[type="number"] {
  flex: 1;
  font: 600 32px/1.2 var(--tools-font-sans);
  letter-spacing: .16px;
  height: 64px;
  padding: 0 16px;
  background: var(--tools-field);
  color: var(--tools-text-primary);
  border: 0;
  box-shadow: inset 0 -1px 0 0 var(--tools-border-strong);
  outline: none;
  min-width: 0;
  transition: background var(--tools-duration-fast-02) var(--tools-ease-productive);
}
.tools-page .input-group input[type="number"]:hover { background: var(--tools-field-hover); }
.tools-page .input-group input[type="number"]:focus { outline: 2px solid var(--tools-brand); outline-offset: -2px; }
.tools-page .input-group input[type="number"]::-webkit-outer-spin-button,
.tools-page .input-group input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tools-page .input-group input[type="number"] { -moz-appearance: textfield; }
.tools-page .input-group input[type="number"]::placeholder { color: var(--tools-text-helper); }
.tools-page .input-group select {
  font: 400 14px/1 var(--tools-font-sans);
  letter-spacing: .16px;
  height: 64px;
  padding: 0 44px 0 16px;
  background: var(--tools-field);
  color: var(--tools-text-primary);
  border: 0;
  box-shadow: inset 0 -1px 0 0 var(--tools-border-strong);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tools-text-primary) 50%),
                    linear-gradient(135deg, var(--tools-text-primary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 28px, calc(100% - 12px) 28px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  min-width: 96px;
  transition: background-color var(--tools-duration-fast-02) var(--tools-ease-productive);
}
.tools-page .input-group select:hover { background-color: var(--tools-field-hover); }
.tools-page .input-group select:focus { outline: 2px solid var(--tools-brand); outline-offset: -2px; }

/* Primary result */
.tools-page .primary-result {
  background: var(--tools-layer-01);
  border: 1px solid var(--tools-border-subtle);
  border-left: 4px solid var(--tools-accent);
  padding: 24px;
  margin-bottom: 32px;
  text-align: left;
  transition: border-color .3s;
}
.tools-page .primary-result .result-label {
  font: 400 11px/1.33 var(--tools-font-mono);
  letter-spacing: .32px;
  color: var(--tools-text-secondary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tools-page .primary-result .odds {
  font: 700 36px/1.25 var(--tools-font-sans);
  letter-spacing: .3px;
  color: var(--tools-text-primary);
  margin-bottom: 8px;
  word-break: break-word;
}
.tools-page .primary-result .expected-time {
  font: 400 13px/1.43 var(--tools-font-mono);
  letter-spacing: .32px;
  color: var(--tools-text-secondary);
}

/* Section heading */
.tools-page section { margin-bottom: 32px; }
.tools-page section h2 {
  font: 600 14px/1.43 var(--tools-font-sans);
  letter-spacing: .16px;
  color: var(--tools-text-primary);
  margin-bottom: 12px;
  text-transform: none;
}

/* Card grid (probability tiles, share analysis) */
.tools-page .card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--tools-border-subtle);
  border: 1px solid var(--tools-border-subtle);
}
.tools-page .card {
  background: var(--tools-layer-01);
  padding: 16px;
  transition: background-color var(--tools-duration-fast-02) var(--tools-ease-productive);
}
.tools-page .card:hover { background: var(--tools-field); }
.tools-page .card .label {
  display: block;
  font: 400 11px/1.33 var(--tools-font-mono);
  letter-spacing: .32px;
  color: var(--tools-text-secondary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tools-page .card .value {
  display: block;
  font: 600 24px/1.25 var(--tools-font-sans);
  letter-spacing: .16px;
  color: var(--tools-text-primary);
}
.tools-page .card .value.accent { color: var(--tools-accent); }

/* Result block (best-share verdict) */
.tools-page .result-block {
  background: var(--tools-layer-01);
  border: 1px solid var(--tools-border-subtle);
  border-left: 4px solid var(--tools-accent);
  padding: 24px;
  margin-bottom: 32px;
  text-align: left;
  transition: border-color .3s;
}
.tools-page .result-block.found { border-left-color: var(--tools-support-success); }
.tools-page .result-verdict {
  font: 700 22px/1.27 var(--tools-font-sans);
  letter-spacing: .16px;
  color: var(--tools-text-primary);
  margin-bottom: 8px;
}
.tools-page .result-verdict.yes { color: var(--tools-support-success); }
.tools-page .result-verdict.no { color: var(--tools-text-primary); }
.tools-page .result-pct {
  font: 700 36px/1.25 var(--tools-font-sans);
  letter-spacing: .3px;
  color: var(--tools-accent);
  margin-bottom: 4px;
  word-break: break-word;
}
.tools-page .result-block .result-label {
  font: 400 11px/1.33 var(--tools-font-mono);
  letter-spacing: .32px;
  color: var(--tools-text-secondary);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tools-page .progress-track {
  height: 6px;
  background: var(--tools-field);
  overflow: hidden;
  margin-bottom: 8px;
}
.tools-page .progress-fill {
  height: 100%;
  background: var(--tools-accent);
  transition: width .4s ease;
}
.tools-page .progress-fill.high { background: var(--tools-support-success); }
.tools-page .progress-labels {
  display: flex;
  justify-content: space-between;
  font: 400 11px/1 var(--tools-font-mono);
  letter-spacing: .32px;
  color: var(--tools-text-helper);
}

/* Network info */
.tools-page .network-info {
  background: var(--tools-layer-01);
  border: 1px solid var(--tools-border-subtle);
  padding: 24px;
}
.tools-page .net-heading {
  font: 600 14px/1.43 var(--tools-font-sans);
  letter-spacing: .16px;
  color: var(--tools-text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tools-page .status-note {
  font: 400 12px/1.33 var(--tools-font-mono);
  letter-spacing: .32px;
  color: var(--tools-text-helper);
  margin: 0 0 16px;
}
.tools-page .net-list { margin: 0; border-top: 1px solid var(--tools-border-subtle); }
.tools-page .net-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--tools-border-subtle);
  gap: 16px;
}
.tools-page .net-row:last-child { border-bottom: 0; }
.tools-page .net-row dt {
  font: 400 14px/1.43 var(--tools-font-sans);
  letter-spacing: .16px;
  color: var(--tools-text-secondary);
}
.tools-page .net-row dd {
  font: 400 14px/1.43 var(--tools-font-mono);
  letter-spacing: .32px;
  color: var(--tools-text-primary);
  margin: 0;
  text-align: right;
  word-break: break-all;
}
.tools-page .net-row.highlight dd { color: var(--tools-accent); font-weight: 600; }
.tools-page #refresh-indicator {
  width: 8px;
  height: 8px;
  background: var(--tools-support-success);
  display: inline-block;
  border-radius: 50%;
  font-size: 0;
  color: transparent;
}
@keyframes tools-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.tools-page .pulse { animation: tools-pulse 2s ease-in-out infinite; }

/* Conversion list (hashrate converter) */
.tools-page .conversion-list {
  display: flex;
  flex-direction: column;
  background: var(--tools-layer-01);
  border: 1px solid var(--tools-border-subtle);
}
.tools-page .conversion-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: baseline;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tools-border-subtle);
  gap: 16px;
}
.tools-page .conversion-row:last-child { border-bottom: 0; }
.tools-page .conversion-row.common { background: rgba(107, 80, 255, 0.06); }
.tools-page .conversion-row .unit-label {
  font: 600 14px/1 var(--tools-font-sans);
  color: var(--tools-text-primary);
  letter-spacing: .16px;
}
.tools-page .conversion-row .unit-value {
  font: 400 14px/1.43 var(--tools-font-mono);
  letter-spacing: .32px;
  color: var(--tools-text-primary);
  word-break: break-all;
}
.tools-page .conversion-row .unit-help {
  font: 400 11px/1.33 var(--tools-font-mono);
  letter-spacing: .32px;
  color: var(--tools-text-helper);
  text-align: right;
}

/* SEO content */
.tools-page .seo-content {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--tools-border-subtle);
}
.tools-page .seo-content h2 {
  font: 700 22px/1.27 var(--tools-font-sans);
  letter-spacing: .16px;
  margin: 32px 0 12px;
  color: var(--tools-text-primary);
}
.tools-page .seo-content h3 {
  font: 600 16px/1.5 var(--tools-font-sans);
  margin: 24px 0 8px;
  color: var(--tools-text-primary);
}
.tools-page .seo-content p {
  font: 400 14px/1.57 var(--tools-font-sans);
  color: var(--tools-text-secondary);
  margin-bottom: 12px;
}
.tools-page .seo-content a {
  color: var(--tools-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--tools-duration-fast-02) var(--tools-ease-productive);
}
.tools-page .seo-content a:hover { color: var(--tools-link-hover); }

.tools-page ::selection { background: var(--tools-highlight); color: var(--tools-text-primary); }

@media (max-width: 720px) {
  .tools-page main.tools-main { padding: 24px 16px 48px; }
  .tools-page header.page-head h1 { font-size: 22px; line-height: 1.27; }
  .tools-page .card-grid { grid-template-columns: repeat(2, 1fr); }
  .tools-page .input-group { flex-direction: column; gap: 1px; }
  /* width: 100% — Chrome ignores `min-width: 0` on number inputs inside a
   * column-flex container (size=20 intrinsic min ~280px) and pushes the
   * layout past the viewport edge. Explicit width pins it to the column. */
  .tools-page .input-group input[type="number"] { font-size: 24px; height: 56px; width: 100%; }
  .tools-page .input-group select {
    height: 48px;
    background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
    width: 100%;
  }
  .tools-page .primary-result .odds { font-size: 28px; }
  .tools-page .coin-tab { padding: 0 16px; }
  .tools-page .conversion-row {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
  }
  .tools-page .conversion-row .unit-help { grid-column: 1 / -1; text-align: left; }

  /* Allow grid/flex cells to shrink below their content min-width so long
   * numeric values (odds, probabilities, hashrate conversions) wrap inside
   * their cell instead of pushing the layout past the viewport edge. */
  .tools-page .card { min-width: 0; }
  .tools-page .card .value { overflow-wrap: anywhere; word-break: break-word; }
  .tools-page .conversion-row > * { min-width: 0; }
  .tools-page .conversion-row .unit-value { overflow-wrap: anywhere; }
  .tools-page .net-row dd { min-width: 0; }
}

/* Phones — reduce padding/fonts so the layout fits within ~360 px width.
 * Without this the primary-result/result-block padding plus large odds
 * font (36 px) pushes content past the viewport on small devices. */
@media (max-width: 480px) {
  .tools-page main.tools-main { padding: 16px 12px 32px; }
  .tools-page header.page-head { margin-bottom: 24px; }
  .tools-page header.page-head h1 { font-size: 20px; }
  .tools-page #input-section,
  .tools-page .primary-result,
  .tools-page .result-block,
  .tools-page .network-info { padding: 16px; }
  .tools-page .primary-result .odds,
  .tools-page .result-pct { font-size: 24px; }
  .tools-page .card { padding: 12px; }
  .tools-page .card .value { font-size: 18px; }
  .tools-page .conversion-row { padding: 12px; }
}