/* 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; }

/* 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;
}