/* Portable journal instruments. All presentation stays inside the sample. */
.at-instrument { --at-spine: 52px; }
.at-instrument .at-instrument-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 1.6rem 0; }
.at-instrument .at-instrument-ledger > div { display: flex; flex-direction: column; border-bottom: 1px solid var(--at-hair); padding-bottom: 1rem; min-width: 0; }
.at-instrument .at-instrument-ledger dt,
.at-instrument .at-instrument-caption { font: 10px/1.6 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.at-instrument .at-instrument-ledger dt { min-height: 3.2em; }
.at-instrument .at-instrument-ledger dt > span { display: block; text-transform: none; letter-spacing: 0; }
.at-instrument .at-instrument-ledger dd,
.at-instrument .at-instrument-value { display: block; margin: .35rem 0 0; padding: 0; color: var(--at-ink); font: 400 clamp(38px, 6vw, 68px)/1.05 "EB Garamond", Georgia, serif; letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; }
.at-instrument .at-instrument-result { margin: 1.5rem 0; }
.at-instrument .at-instrument-controls { margin: 1.5rem 0 1rem; }
.at-instrument [hidden] { display: none !important; }
.at-instrument .at-instrument-query { display: grid; gap: .7rem; font: 11px/1.5 "JetBrains Mono", monospace; }
.at-instrument input[type="text"] { display: block; width: 100%; min-width: 0; min-height: 44px; border: 0; border-bottom: 1px solid var(--at-ink); border-radius: 0; padding: .5rem 0; background: transparent; color: var(--at-ink); font: 24px/1.3 "EB Garamond", Georgia, serif; box-shadow: none; }
.at-instrument .at-instrument-options { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .7rem; }
.at-instrument .at-instrument-options label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; cursor: pointer; font: 11px/1.5 "JetBrains Mono", monospace; }
.at-instrument input[type="checkbox"] { appearance: auto; width: 16px; height: 16px; min-width: 16px; margin: 0; accent-color: var(--at-red); }
.at-instrument .at-instrument-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.at-instrument button { appearance: none; display: inline-block; min-height: 44px; min-width: 94px; margin: 0; border: 1px solid var(--at-hair); border-radius: 0; padding: .65rem 1.15rem; background: transparent; color: var(--at-ink); font: 11px/1.5 "JetBrains Mono", monospace; text-transform: none; letter-spacing: .04em; cursor: pointer; box-shadow: none; }
.at-instrument button:hover { border-color: var(--at-red); }
.at-instrument button:focus-visible,
.at-instrument input:focus-visible { outline: 2px solid var(--at-red); outline-offset: 4px; }
.at-instrument .at-instrument-note { max-width: 62ch; margin: 1rem 0 0; padding-top: .85rem; border-top: 1px solid var(--at-hair); font: 10px/1.65 "JetBrains Mono", monospace; color: var(--at-ink); }
.at-instrument .at-instrument-caption::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 .55rem .15rem 0; background: var(--at-red); }
@media (max-width: 520px) {
  .at-instrument { --at-spine: 32px; padding: 1.4rem 1rem 1.5rem calc(var(--at-spine) + 1rem); }
  .at-instrument .at-instrument-ledger { grid-template-columns: 1fr; gap: .8rem; }
  .at-instrument .at-instrument-ledger > div { flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: .7rem; }
  .at-instrument .at-instrument-ledger dt { min-height: 0; }
  .at-instrument .at-instrument-ledger dd { margin: 0; }
}