/* Seek With What — the Instruments.
   Kept in its own file so the 249 Library pages do not carry stylesheet weight
   for five tools they never render. Loaded only by instrument pages. */

/* ------------------------------------------------------------------- hub --- */

.instrument-grid-wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 48px 24px 0;
}

.instrument-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.instrument-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px 20px 20px;
  border: 1px solid var(--border);
  background: var(--ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

.instrument-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.instrument-card.is-empty { opacity: .45; }
.instrument-card.is-empty:hover { border-color: var(--border); transform: none; }

.instrument-card-name { font-family: var(--serif); font-size: 21px; }
.instrument-card-blurb { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

.instrument-card-state {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
}

.instrument-card.is-empty .instrument-card-state { color: var(--muted); }

/* ------------------------------------------------------------------ tool --- */

.instrument-tool {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 40px 24px 0;
}

.instrument-mount {
  border: 1px solid var(--border);
  background: var(--ink);
  padding: 26px 24px 28px;
}

.instrument-library {
  font-size: 15px;
  color: var(--muted);
  margin-top: 14px;
}

.instrument-library a { color: var(--accent); }

/* ------------------------------------------------------------------ form --- */

.ins-form {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 18px 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.ins-field { display: grid; gap: 6px; }

.ins-field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ins-optional { text-transform: none; letter-spacing: 0; opacity: .7; }

.ins-field input {
  background: var(--night);
  border: 1px solid var(--border);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  padding: 11px 13px;
  width: 100%;
}

.ins-field input:focus {
  outline: none;
  border-color: var(--accent);
}

.ins-switches {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 14.5px;
  color: var(--muted);
}

.ins-switches label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ins-switches b { color: var(--paper); font-weight: 500; }
.ins-switches input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ---------------------------------------------------------------- output --- */

.ins-output { padding-top: 26px; }

.ins-empty { color: var(--muted); font-size: 15px; margin: 0; }

.ins-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

.ins-table th, .ins-table td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: baseline;
}

.ins-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding-bottom: 8px;
}

.ins-table tbody th { font-weight: 400; padding-left: 0; }

.ins-pos-name { display: block; font-family: var(--serif); font-size: 19px; }

.ins-pos-from {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 2px;
}

.ins-num {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--accent);
  display: inline-block;
  line-height: 1.1;
}

.ins-sum {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.ins-verdict {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* The whole point of the instrument is visible here: where the two systems part
   company, the row says so rather than leaving the reader to compare digits. */
.ins-table tr.is-split .ins-verdict { color: var(--accent); }
.ins-table tr.is-split { background: rgba(201, 162, 39, .045); }

/* -------------------------------------------------------------- life path --- */

.ins-lifepath {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--ink-2);
  padding: 20px 22px;
  margin-bottom: 30px;
}

.ins-lifepath h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.ins-note { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; }

/* -------------------------------------------------------------- glossary --- */

.ins-glossary h3, .ins-working h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin: 0 0 14px;
}

.ins-gloss-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
}

.ins-meaning-keys {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: 5px;
}

.ins-meaning p { margin: 0; font-size: 15.5px; line-height: 1.62; }

/* --------------------------------------------------------------- working --- */

.ins-working {
  margin-top: 30px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.ins-working summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ins-working summary:hover { color: var(--accent); }

.ins-work-block { padding-top: 20px; }

.ins-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.ins-letter {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 4px 7px;
  display: inline-flex;
  gap: 5px;
}

.ins-letter b { color: var(--paper); font-weight: 500; }

/* ----------------------------------------------------------------- small --- */

@media (max-width: 700px) {
  .ins-form { grid-template-columns: 1fr; }
  .instrument-mount { padding: 20px 16px 22px; }
  .instrument-tool, .instrument-grid-wrap { padding-left: 16px; padding-right: 16px; }

  /* The comparison table is the instrument. Let it scroll rather than wrap into
     something unreadable. */
  .ins-table { display: block; overflow-x: auto; white-space: nowrap; }
  .ins-table th, .ins-table td { white-space: normal; min-width: 118px; }
  .ins-table tbody th { min-width: 150px; }

  .ins-gloss-item { grid-template-columns: 44px 1fr; gap: 12px; }
  .ins-num { font-size: 25px; }
}

/* Life Path, when the two calculation methods disagree. */

.ins-or {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ins-lifepath.is-split { border-left-color: var(--accent); }
.ins-lifepath b { color: var(--paper); font-weight: 500; }

.ins-lp-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

@media (max-width: 700px) {
  .ins-lp-pair { grid-template-columns: 1fr; gap: 18px; }
}

/* ------------------------------------------------------------- i ching --- */

.ins-form-wide { grid-template-columns: 1fr auto; align-items: end; }
.ins-field-full { grid-column: 1; }

.ins-radios { display: grid; gap: 10px; }

.ins-radios label {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px 10px;
  align-items: start;
  cursor: pointer;
  font-size: 15px;
}

.ins-radios input { accent-color: var(--accent); width: 15px; height: 15px; margin-top: 5px; }
.ins-radios b { font-weight: 500; }
.ins-radios span { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 1.5; }

.ins-actions { display: flex; align-items: flex-end; }

.ins-button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 13px 30px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.ins-button:hover { background: var(--accent); color: var(--night); }

/* --- the figure --- */

.hex-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 26px;
}

.hex-arrow { align-self: center; color: var(--muted); font-size: 26px; }

.hex-card {
  border: 1px solid var(--border);
  background: var(--ink-2);
  padding: 20px 20px 22px;
}

.hex-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.hex-figure { display: grid; gap: 7px; margin-bottom: 18px; }

.hex-line {
  display: grid;
  grid-template-columns: 18px 116px 1fr;
  gap: 12px;
  align-items: center;
}

.hex-pos { font-family: var(--mono); font-size: 10px; color: var(--muted); }

.hex-glyph { display: flex; gap: 8px; }

.hex-bar {
  display: block;
  height: 9px;
  flex: 1 1 auto;
  background: var(--paper);
}

.hex-half { flex: 0 0 calc(50% - 4px); }

.hex-line.is-changing .hex-bar { background: var(--accent); }

.hex-val {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.hex-line.is-changing .hex-val { color: var(--accent); }

/* --- identity --- */

.hex-id { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.hex-n { font-family: var(--serif); font-size: 30px; color: var(--accent); }
.hex-cn { font-size: 22px; }
.hex-pinyin { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.hex-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 12px;
}

.hex-literal, .hex-gloss {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--paper);
}

.hex-literal { color: var(--muted); }
.hex-literal b { color: var(--paper); font-weight: 500; }

.hex-trigrams {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.hex-over { opacity: .6; }

.hex-changing-note {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 0 0 30px;
}

.hex-changing-note b { color: var(--paper); font-weight: 500; }

/* --- odds --- */

.odds { border-top: 1px solid var(--border); padding-top: 22px; }

.odds h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 16px;
}

.odds-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }

.odds-table th, .odds-table td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}

.odds-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.odds-table tbody th { font-weight: 400; font-size: 15px; padding-left: 0; }

.odds-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
}

.odds-frac { font-family: var(--mono); font-size: 14px; }
.odds-pct { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: 8px; }

/* The column the reader actually cast with. */
.odds-table td.is-used { background: rgba(201, 162, 39, .06); }
.odds-table td.is-used .odds-frac { color: var(--accent); }

@media (max-width: 780px) {
  .hex-pair { grid-template-columns: 1fr; }
  .hex-arrow { justify-self: center; transform: rotate(90deg); }
  .ins-form-wide { grid-template-columns: 1fr; }
  .ins-actions { justify-content: stretch; }
  .ins-button { width: 100%; }
  .hex-line { grid-template-columns: 16px 92px 1fr; gap: 10px; }
}

/* -------------------------------------------------------- birth chart --- */

.bc-form { grid-template-columns: repeat(3, 1fr); }
.bc-form .ins-switches, .bc-form .ins-actions { grid-column: 1 / -1; }
.bc-form .ins-actions { justify-content: flex-start; }

.ins-field select {
  background: var(--night);
  border: 1px solid var(--border);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  padding: 11px 12px;
  width: 100%;
}

.ins-field select:focus { outline: none; border-color: var(--accent); }

.bc-header { margin-bottom: 22px; }
.bc-header .ins-note b { color: var(--accent); font-weight: 500; }

.bc-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }

.bc-table th, .bc-table td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: baseline;
}

.bc-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.bc-table thead th span {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  opacity: .7;
}

.bc-table tbody th { font-weight: 400; padding-left: 0; }

.bc-glyph { font-size: 18px; color: var(--accent); margin-right: 8px; }
.bc-name { font-size: 15.5px; }

.bc-vedic {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.bc-vedic.bc-absent { opacity: .5; font-style: italic; }

.bc-sign { display: block; font-size: 15px; }
.bc-deg { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.bc-house { font-family: var(--mono); font-size: 14px; color: var(--muted); }

.bc-verdict {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* Where the two zodiacs land in different signs — which is most rows, and is
   the entire point of putting them next to each other. */
.bc-table tr.is-split { background: rgba(201, 162, 39, .05); }
.bc-table tr.is-split .bc-verdict { color: var(--accent); }

.bc-angle-row th .bc-name { font-family: var(--serif); font-size: 17px; }

.bc-nakshatra, .bc-housenote, .bc-traditions {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-bottom: 26px;
}

.bc-nakshatra h3, .bc-housenote h3, .bc-traditions h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  margin: 0 0 12px;
}

.bc-nak-name { color: var(--accent); }

.bc-nak-pada {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: none;
}

.bc-trad {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.bc-trad-label { font-size: 14.5px; color: var(--paper); }
.bc-trad-list { font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.bc-housenote .ins-note b { color: var(--paper); font-weight: 500; }

@media (max-width: 860px) {
  .bc-form { grid-template-columns: 1fr 1fr; }
  .bc-trad { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 700px) {
  .bc-form { grid-template-columns: 1fr; }
  .bc-form .ins-actions .ins-button { width: 100%; }
  .bc-table { display: block; overflow-x: auto; }
  .bc-table th, .bc-table td { min-width: 108px; }
  .bc-table tbody th { min-width: 140px; }
}

/* -------------------------------------------------------- sky tonight --- */

.st-stamp { margin-bottom: 22px; }

.st-moon-block {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 26px;
  align-items: start;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.st-moon { width: 128px; height: 128px; }
.st-moon-dark { fill: var(--night); }
.st-moon-lit { fill: var(--paper); }
.st-moon-rim { fill: none; stroke: var(--border); stroke-width: 1.5; }

.st-moon-text h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  margin: 0 0 10px;
}

.st-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 16px;
}

.st-figures b { color: var(--accent); font-weight: 500; font-size: 14px; }

.st-moon-text .ins-note b { color: var(--paper); font-weight: 500; }

.st-table tr.is-retro { background: rgba(201, 162, 39, .05); }
.st-table tr.is-retro .bc-verdict { color: var(--accent); }

.st-retro, .st-wheel {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-bottom: 26px;
}

.st-retro h3, .st-wheel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 12px;
}

.st-retro .ins-note b, .st-wheel .ins-note b { color: var(--paper); font-weight: 500; }

.st-controls { margin-top: 8px; }

@media (max-width: 700px) {
  .st-moon-block { grid-template-columns: 96px 1fr; gap: 18px; }
  .st-moon { width: 96px; height: 96px; }
  .st-moon-text h3 { font-size: 21px; }
  .st-controls .ins-button { width: 100%; }
}

/* -------------------------------------------------------- tarot draw --- */

.tc-form { grid-template-columns: 260px 1fr auto; align-items: end; }
.tc-form .ins-switches { grid-column: auto; align-items: center; }

.tc-spread-note { margin-bottom: 22px; }

.tc-spread-note h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  margin: 0 0 8px;
}

.tarot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}

.tarot-card {
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  background: var(--ink-2);
  padding: 18px 18px 16px;
}

.tarot-card.is-reversed { border-top-style: dashed; }

.tc-position {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.tc-reversed {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--accent);
  padding: 2px 7px;
  margin-bottom: 10px;
}

.tc-names {
  border-top: 1px solid var(--border);
  margin-bottom: 14px;
}

.tc-name-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 4px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.tc-deck {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.tc-title { font-family: var(--serif); font-size: 18px; }

.tc-name-note {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent);
}

.tc-attr, .tc-gloss {
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--muted);
}

.tc-attr b { color: var(--paper); font-weight: 500; }
.tc-gloss { color: var(--paper); }

.tc-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.tc-flag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border);
  padding: 3px 7px;
}

.tc-footnote { margin-bottom: 26px; }
.tc-footnote b { color: var(--paper); font-weight: 500; }

.tc-decks { border-top: 1px solid var(--border); padding-top: 20px; }

.tc-decks h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 14px;
}

.tc-deck-block { padding: 14px 0; border-top: 1px solid var(--border); }

.tc-deck-name { font-family: var(--serif); font-size: 18px; margin-right: 10px; }

.tc-deck-dates {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.tc-deck-block .ins-note { margin-top: 8px; margin-bottom: 0; }

@media (max-width: 700px) {
  .tc-form { grid-template-columns: 1fr; }
  .tc-form .ins-actions .ins-button { width: 100%; }
  .tarot-grid { grid-template-columns: 1fr; }
  .tc-name-row { grid-template-columns: 72px 1fr; }
}