/* ChronoDesk component styles — hand-written plain CSS.
   Pairs with the Tailwind CSS CDN script (utilities) used on every page.
   These classes cover the calculator widgets, which are reused across all
   65 tool pages and are easier to maintain as named components than as
   long inline utility strings repeated everywhere. */

:root {
  --ink: #1E2422;
  --muted: #5B645C;
  --paper: #FFFFFF;
  --panel: #FFFFFF;
  --panelalt: #F3F4F1;
  --line: #E2E5DE;
  --brass: #A9762E;
  --brass-dark: #8A5F23;
  --teal: #2B6F63;
  --teal-dark: #1E5449;
}

[data-lucide] { display: inline-block; }

/* ---- Calculator widget primitives ---- */
.calc-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem;
  box-shadow: 0 1px 0 rgba(30,36,34,0.04), 0 8px 24px -16px rgba(30,36,34,0.25);
  padding: 1.25rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 768px) {
  .calc-panel { padding: 1.75rem; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; }
}
.calc-inputs { display: flex; flex-direction: column; gap: 0.875rem; }
.field-row { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 0.375rem; flex: 1; min-width: 90px; }
.field label { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.field input, .field select {
  font-family: inherit; font-size: 15px; padding: 0.5rem 0.625rem;
  border: 1px solid var(--line); border-radius: 0.375rem; background: var(--paper);
  color: var(--ink); width: 100%; box-sizing: border-box;
}
.field input:focus, .field select:focus {
  background: var(--panel); outline: none; box-shadow: 0 0 0 3px rgba(169,118,46,0.25);
}
.field input:disabled { opacity: 0.6; }

.op-toggle { display: flex; border: 1px solid var(--line); border-radius: 0.375rem; overflow: hidden; width: fit-content; }
.op-toggle label { margin: 0; }
.op-toggle input { display: none; }
.op-toggle span { display: block; padding: 0.5rem 1rem; font-size: 0.875rem; cursor: pointer; color: var(--muted); }
.op-toggle input:checked + span { background: var(--brass); color: #fff; }

.readout {
  background: var(--panelalt); border-radius: 0.5rem; padding: 1.25rem 1.5rem;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border: 1px solid var(--line);
}
.readout .value { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 28px; color: var(--teal-dark); font-weight: 500; line-height: 1.1; word-break: break-word; }
@media (min-width: 768px) { .readout .value { font-size: 38px; } }
.readout .sub { margin-top: 0.625rem; color: var(--muted); font-size: 13.5px; font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.btn {
  font-family: inherit; font-weight: 600; font-size: 14.5px;
  padding: 0.625rem 1.25rem; border-radius: 999px; border: none; cursor: pointer;
  background: var(--ink); color: #fff; transition: background-color .15s;
}
.btn:hover { background: var(--teal-dark); }
.btn-outline { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-outline:hover { background: var(--panelalt); }
.btn-row { display: flex; gap: 0.625rem; margin-top: 0.25rem; flex-wrap: wrap; }
.preset-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.preset-btn {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; padding: 0.375rem 0.875rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; color: var(--ink);
}
.preset-btn:hover { border-color: var(--brass); }

.row-block { border: 1px dashed var(--line); border-radius: 0.375rem; padding: 0.75rem; }
.row-block + .row-block { margin-top: 0.5rem; }
.add-row-btn { align-self: flex-start; font-size: 13px; color: var(--brass-dark); background: none; border: none; cursor: pointer; padding: 0; font-weight: 600; }

.wc-row { display: flex; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid var(--line); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; }
.wc-row:last-child { border-bottom: none; }
.wc-city { color: var(--muted); font-family: 'IBM Plex Sans', sans-serif; }
.lap-row { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; padding: 0.25rem 0; color: var(--muted); }

/* ---- Content components ---- */
.faq-item { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }

.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-grid a { display: block; padding: 0.75rem 0.875rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.375rem; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.related-grid a:hover { border-color: var(--teal); }

.cat-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem; padding: 1.25rem; text-decoration: none; color: var(--ink); }
.cat-card:hover { border-color: var(--brass); }