/*
 * Music Calculators (/tools/calculators/). Loaded after site.css; uses its tokens.
 * Mobile first: one column of calculators; two columns from 1100 px.
 */

/* ------------------------------------------------------------------ jump list */
.calc-nav { margin-bottom: var(--s-5); }
.calc-nav-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .calc-nav-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .calc-nav-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.calc-nav-list a {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 6px 14px;
  border: 2px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
  color: var(--text); font-weight: 650; text-decoration: none; line-height: 1.25;
}
.calc-nav-list a:hover { background: var(--surface-2); }
.calc-num {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--indigo); color: var(--indigo-ink); font-family: var(--font-num); font-weight: 750; font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ calculators */
.calc-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
/* Round 5 (width only): three calculators to a row on wide screens, and the six jump links in one row. */
@media (min-width: 1800px) { .calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .calc-nav-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.calc { min-width: 0; scroll-margin-top: var(--s-4); outline: none; }
.calc h2 { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); font-size: var(--step-1); }
.calc h2 .calc-num { width: 32px; height: 32px; font-family: var(--font-num); }
.calc-intro { margin: 0 0 var(--s-4); max-width: 46em; }
.calc-h3 { margin: var(--s-5) 0 var(--s-2); font-size: 1.125rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

.calc-fields { display: grid; gap: var(--s-3) var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); align-items: start; }
.calc-fields.three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .calc-fields.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); } }
.calc-fields input[type="text"], .calc-fields select { width: 100%; font-variant-numeric: tabular-nums; }
.calc-fields input[aria-invalid="true"] { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.field-error { margin: 0; color: var(--rose); font-weight: 600; font-size: var(--step--1); line-height: 1.4; }
.calc-fields .hint { margin: 0; }
.calc .field label .hint { font-weight: 400; }

.l-ts legend { font-weight: 600; margin-bottom: 6px; }
.ts-pair { display: flex; align-items: center; gap: var(--s-2); }
.ts-pair select { flex: 1 1 0; min-width: 0; }
.ts-slash { font-size: 1.5rem; font-weight: 700; color: var(--muted); }

.calc-out { margin-top: var(--s-4); }
.calc-big { margin: var(--s-3) 0 var(--s-1); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--step-2); font-weight: 750; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); }
.calc-big-sub { font-size: var(--step--1); font-weight: 600; color: var(--muted); font-family: var(--font-body); }
.calc-answer { margin: var(--s-3) 0 0; }
.calc-answer p { margin: 0 0 var(--s-1); }
p.calc-answer strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.is-empty, .calc-empty { color: var(--muted); font-style: italic; }
.calc-empty { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border: 2px dashed var(--line-strong); border-radius: var(--r-sm); }
.calc-explain { margin: var(--s-4) 0 0; max-width: 46em; color: var(--text); }
.calc-trad { margin-top: var(--s-2) !important; padding: var(--s-2) var(--s-3); border-left: 4px solid var(--saffron-edge); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.star { color: var(--saffron-text); font-weight: 750; margin-left: 2px; }

.calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.calc-copy { min-height: 44px; padding: 6px 18px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); }
.copy-msg { margin: 0; font-weight: 600; color: var(--teal); }
.copy-msg.is-error { color: var(--rose); }
.copy-buffer { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------------ tables */
.table-box { margin-top: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: var(--r-sm); }
.calc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; line-height: 1.3; }
.calc-table caption { caption-side: top; text-align: left; padding: var(--s-2) var(--s-3); font-size: var(--step--1); font-weight: 650; color: var(--text); background: var(--surface-2); }
.calc-table th, .calc-table td { padding: 6px 8px; text-align: right; vertical-align: top; border-top: 1px solid var(--line); }
.calc-table thead th { border-top: 0; font-size: .8125rem; font-weight: 700; color: var(--muted); white-space: nowrap; background: var(--surface-2); }
.calc-table th[scope="row"], .calc-table thead th:first-child { text-align: left; font-weight: 650; }
.calc-table td > span, .calc-table th > span { display: block; white-space: nowrap; }
.calc-table small { display: block; font-size: .78rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
@media (max-width: 420px) {
  .calc-table { font-size: .875rem; }
  .calc-table th, .calc-table td { padding: 5px 5px; }
  .calc-table small { font-size: .74rem; }
}

.table-cap { margin: var(--s-4) 0 0; font-size: var(--step--1); font-weight: 650; }
.table-cap + .table-box { margin-top: var(--s-2); }
.calc-table th[scope="row"] > span, .calc-table th[scope="row"] small { white-space: normal; }
.calc-table thead small { font-weight: 600; white-space: normal; }

/* Interval table: the swara line only with Indian terms on */
.iv-table .only-indian { display: none; }
.iv-table.show-swara .only-indian { display: block; color: var(--saffron-text); font-weight: 650; }

/* Swara table: the Carnatic column only with Indian terms on (Devanagari is added to the name cell) */
.sw-table .col-carnatic { display: none; text-align: left; }
.sw-table.is-indian .col-carnatic { display: none; }
.sw-carn-inline { color: var(--saffron-text) !important; font-weight: 650 !important; }
@media (min-width: 700px) {
  .sw-table.is-indian .col-carnatic { display: table-cell; }
  .sw-carn-inline { display: none !important; }
}
.sw-table td.col-carnatic > span, .sw-table td.col-carnatic small { white-space: normal; }
.sw-table td.col-carnatic small { min-width: 6.5rem; }
.sw-deva { font-size: 1.0625rem; font-weight: 600; }
.sw-mode { margin: 0 0 var(--s-4); }
@media (max-width: 420px) { .sw-mode .seg span { padding: 8px 10px; } }

@media print { .calc-actions, .calc-nav { display: none; } }