/* BriefNepal Tools — shared styling for the /tools section.
   Reuses the global chrome (header/footer/nav) from style.css; this only
   styles the tool hub grid + the calculator cards/forms/results. */

.tools-wrap { max-width: 920px; margin: 0 auto; padding: 8px 0 48px; }
.tools-crumbs { font-size: .8rem; color: #777; margin: 4px 0 14px; }
.tools-crumbs a { color: #034ea2; text-decoration: none; }

.tools-head h1 {
  font-family: Merriweather, Georgia, serif;
  font-size: 2rem; line-height: 1.2; margin: 4px 0 6px; color: #111;
}
.tools-head p { color: #555; line-height: 1.6; margin: 0 0 8px; max-width: 70ch; }

/* Hub grid of tool cards */
.tools-grid {
  display: grid; gap: 14px; margin-top: 22px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.tool-card {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid #e6e8ec; border-radius: 12px;
  padding: 16px 16px 18px; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tool-card:hover { border-color: #034ea2; box-shadow: 0 6px 20px rgba(3,78,162,.10); transform: translateY(-2px); }
.tool-card__emoji { font-size: 1.6rem; }
.tool-card__name { font-weight: 700; color: #111; font-size: 1.02rem; }
.tool-card__desc { color: #666; font-size: .86rem; line-height: 1.5; }
.tools-section-title {
  font-size: 1.05rem; font-weight: 700; color: #111; margin: 28px 0 2px;
  padding-bottom: 6px; border-bottom: 2px solid #f0f0f0;
}

/* Calculator card */
.calc {
  background: #fff; border: 1px solid #e6e8ec; border-radius: 14px;
  padding: 22px; margin-top: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.calc__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .82rem; font-weight: 600; color: #333; }
.field .hint { font-size: .72rem; color: #999; font-weight: 400; }
.field input, .field select {
  font: inherit; padding: 11px 12px; border: 1px solid #d7dbe0; border-radius: 9px;
  background: #fbfcfd; color: #111; width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid #034ea2; outline-offset: 0; border-color: #034ea2; }

.calc__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn {
  font: inherit; font-weight: 600; cursor: pointer; border: none; border-radius: 9px;
  padding: 11px 20px; background: #034ea2; color: #fff; transition: background .15s;
}
.btn:hover { background: #023d80; }
.btn--ghost { background: #f0f3f7; color: #034ea2; }
.btn--ghost:hover { background: #e3e9f1; }

/* Results */
.result { margin-top: 22px; border-top: 1px solid #eef0f3; padding-top: 18px; }
.result__main {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(135deg, #f3f8ff, #eef4fb);
  border: 1px solid #dbe7f7; border-radius: 12px; padding: 16px 18px;
}
.result__label { font-size: .85rem; color: #4a5568; }
.result__value { font-family: Merriweather, Georgia, serif; font-size: 1.9rem; font-weight: 700; color: #034ea2; }
.result__sub { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; }
.result__sub div { font-size: .9rem; color: #333; }
.result__sub strong { color: #111; }

table.calc-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .86rem; }
table.calc-table th, table.calc-table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: right; }
table.calc-table th:first-child, table.calc-table td:first-child { text-align: left; }
table.calc-table thead th { background: #f7f9fb; color: #444; font-weight: 600; position: sticky; top: 0; }
.calc-table-wrap { max-height: 360px; overflow: auto; border: 1px solid #eee; border-radius: 10px; margin-top: 16px; }

.tool-prose { margin-top: 30px; color: #333; line-height: 1.7; }
.tool-prose h2 { font-size: 1.2rem; color: #111; margin: 24px 0 8px; }
.tool-prose p { margin: 0 0 12px; }
.tool-note { font-size: .8rem; color: #888; margin-top: 14px; }

/* Nepali calendar grid */
.npcal { margin-top: 18px; }
.npcal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.npcal__title { font-family: Merriweather, Georgia, serif; font-size: 1.3rem; color: #111; }
.npcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.npcal__dow { text-align: center; font-size: .72rem; font-weight: 700; color: #888; padding: 4px 0; }
.npcal__cell { aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #eef0f3; border-radius: 8px; }
.npcal__cell--empty { border: none; }
.npcal__bs { font-weight: 700; color: #111; }
.npcal__ad { font-size: .62rem; color: #aaa; }
.npcal__cell--today { background: #034ea2; border-color: #034ea2; }
.npcal__cell--today .npcal__bs { color: #fff; }
.npcal__cell--today .npcal__ad { color: #cfe0f5; }
.npcal__cell--sat .npcal__bs { color: #e8453c; }

@media (max-width: 560px) {
  .tools-head h1 { font-size: 1.6rem; }
  .result__value { font-size: 1.5rem; }
}