/* Shared styles for the calc tools site. Tool-specific rules live in each tool page. */

body {
  font-family: monospace;
  background: #fff;
  color: #000;
  margin: 0 auto;
  padding: 20px;
  max-width: 600px;
}

a { color: inherit; }

.breadcrumb {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border-bottom: 1px dashed #000;
  padding-bottom: 2px;
  margin-bottom: 12px;
}
.breadcrumb:hover { background: #000; color: #fff; }

h1 {
  text-transform: uppercase;
  margin: 0;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 4px solid #000;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.panel {
  border: 2px solid #000;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 4px 4px 0 #000;
  background: #fff;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-size: 14px;
}

input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 2px solid #000;
  font-family: monospace;
  font-size: 18px;
  margin-bottom: 15px;
  background: #fff;
  color: #000;
  box-shadow: 3px 3px 0 #000;
}
input:focus {
  outline: none;
  background: #f0f0f0;
  box-shadow: none;
  transform: translate(3px, 3px);
}

table { width: 100%; border-collapse: collapse; }
th, td { border: 2px solid #000; padding: 10px; text-align: left; }
th { background: #000; color: #fff; text-transform: uppercase; }

.meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px dashed #000;
  padding: 8px;
  background: #fafafa;
}
.meta b { font-size: 14px; }

button {
  background: #000;
  color: #fff;
  border: 2px solid #000;
  padding: 10px 15px;
  font-family: monospace;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 3px 3px 0 #000;
  white-space: nowrap;
}
button:hover { background: #fff; color: #000; }
button:active { box-shadow: none; transform: translate(3px, 3px); }

.row { display: flex; gap: 10px; align-items: flex-end; }
.row > div { flex: 1; }
.row button { margin-bottom: 15px; }

.error {
  color: #cc0000;
  font-size: 12px;
  margin: -5px 0 10px;
  font-weight: bold;
}

.badge {
  font-size: 11px;
  padding: 4px 8px;
  background: #008000;
  color: #fff;
  letter-spacing: 1px;
}
.badge.stale { background: #cc7700; }
.badge.off { background: #cc0000; }
.badge.loading { background: #666; }

/* Prose block (for explanatory content / SEO copy) */
.prose { font-size: 13px; line-height: 1.55; }
.prose h2 {
  text-transform: uppercase;
  font-size: 14px;
  border-bottom: 2px solid #000;
  padding-bottom: 4px;
  margin: 18px 0 8px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 10px; }
.prose ul { margin: 0 0 10px; padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.prose a { text-decoration: underline; }
.prose .disclaimer { font-size: 11px; color: #555; border-top: 1px dashed #000; padding-top: 8px; margin-top: 12px; }

/* ---------- Responsive ---------- */

/* Tablet / small desktop: soften body padding */
@media (max-width: 640px) {
  body { padding: 16px; }
  .meta { font-size: 11px; flex-wrap: wrap; row-gap: 6px; column-gap: 14px; }
}

/* Phones: stack the input row, let the rate table scroll horizontally */
@media (max-width: 480px) {
  body { padding: 12px; }

  h1 { font-size: 22px; }

  .panel { padding: 12px; box-shadow: 3px 3px 0 #000; }

  label { font-size: 12px; white-space: nowrap; }
  input { font-size: 17px; padding: 10px; box-shadow: 2px 2px 0 #000; }
  input:focus { transform: translate(2px, 2px); }

  /* Input row becomes: [Weight 100%] then [Spot flex:1] + [Refresh] on row two */
  .row { flex-wrap: wrap; gap: 8px; }
  .row > div:first-child { flex: 1 1 100%; }

  button { padding: 8px 12px; font-size: 13px; box-shadow: 2px 2px 0 #000; }
  button:active { transform: translate(2px, 2px); }

  /* Scrollable rate table — prevents horizontal page scroll while keeping all 6 cols readable */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px; /* visually align scrollbar closer to panel edge */
  }
  th, td { padding: 7px 8px; font-size: 13px; }
  .purity { font-size: 10px; }

  .breadcrumb { font-size: 11px; margin-bottom: 10px; }
  .page-head { padding-bottom: 8px; margin-bottom: 14px; }

  .badge { font-size: 10px; padding: 3px 6px; }

  /* Prose: tighter leading + smaller headings */
  .prose { font-size: 12.5px; line-height: 1.55; }
  .prose h2 { font-size: 13px; }
}

/* Very narrow (≤360) — iPhone SE and below */
@media (max-width: 360px) {
  th, td { padding: 6px 6px; font-size: 12px; }
  input { font-size: 16px; }  /* still ≥16px so iOS doesn't zoom on focus */
  h1 { font-size: 20px; }
}

/* Homepage tool list */
.tool-list { list-style: none; padding: 0; margin: 0; }
.tool-list li + li { border-top: 2px solid #000; }
.tool-list a {
  display: block;
  padding: 14px 4px;
  text-decoration: none;
  color: inherit;
}
.tool-list a:hover { background: #f0f0f0; }
.tool-list .tool-name {
  display: block;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tool-list .tool-desc {
  display: block;
  font-size: 12px;
  color: #444;
}