/* Artillery map — a printed topographic sheet in the field manual.
   Only .art-* rules live here; tokens and shared classes come from site.css / chrome.css. */
.art-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.art-head .lede { margin-bottom: .2rem; }
.art-actions { display: flex; gap: .5rem; padding-bottom: .2rem; }
.art-grid { display: grid; grid-template-columns: minmax(560px, 1fr) 300px; gap: .8rem; align-items: start; margin-bottom: 2rem; }
@media (max-width: 1000px) { .art-grid { grid-template-columns: 1fr; } }

/* map board: the sheet sits on a plate inside a ruled frame */
.art-map { background: var(--plate); border: 1px solid var(--ink); }
.art-map canvas { display: block; width: 100%; aspect-ratio: 1 / 1; touch-action: none; cursor: crosshair; outline-offset: -2px; }
.art-map canvas.grab { cursor: grab; }
.art-map canvas.grabbing { cursor: grabbing; }
.art-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem .75rem; border-top: 1px solid var(--ink); background: var(--plate-2); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); min-height: 2.1rem; }
.art-bar .mono { color: var(--ink); letter-spacing: .02em; text-transform: none; }

/* solution panel: an appendix plate with mono readouts */
.art-sol { position: sticky; top: 1rem; padding: 0 .8rem .8rem; }
.art-sol > .hud-head { margin: 0 -.8rem .7rem; }
.art-selectors { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .7rem; }
.art-selector-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.art-k { color: var(--ink); font-weight: 700; }
.art-desc { font-family: var(--serif); font-style: italic; font-size: .78rem; color: var(--ink-3); text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }

/* pickers: ink-outlined chips, the selected one printed in red */
.art-sol .chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0 0; border: 0; }
.art-sol .chip { flex: 0 0 auto; display: inline-block; padding: .32rem .55rem; font-family: var(--mono); font-weight: 700; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; color: var(--ink); background: var(--plate); border: 1px solid var(--ink); cursor: pointer; }
.art-sol .chip:hover { background: var(--ink); color: var(--paper); }
.art-sol .chip.on { background: var(--red); border-color: var(--red); color: #FBF6EA; }
#arty-towers .chip, #arty-rotations .chip { padding: .22rem .45rem; font-size: .64rem; }

/* readouts */
.art-sol .hud-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; margin: 0; }
.art-sol .hud-stats > div { border-top: 1px solid var(--rule-2); padding-top: .3rem; }
.art-sol .hud-stats dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.art-sol .hud-stats dd { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 1.7rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--ink); line-height: 1.15; }
.art-sol .hud-stats dd small { font-size: .8rem; font-weight: 400; color: var(--ink-2); margin-left: .2rem; letter-spacing: .04em; }
.art-sol .hud-stats dd.empty { color: var(--ink-3); font-weight: 400; }
.art-sol .hud-stats dd.pending { font-family: var(--serif); font-style: italic; font-size: .88rem; font-weight: 400; color: var(--ink-2); line-height: 1.3; }
.art-sol .hud-stats dd.sub { font-family: var(--serif); font-style: italic; font-size: .8rem; font-weight: 400; color: var(--ink-2); letter-spacing: 0; margin-top: .05rem; }
.art-sol .hud-stats .wide { grid-column: 1 / -1; }
.art-sol .hud-note { font-family: var(--serif); font-style: italic; font-size: .84rem; line-height: 1.4; color: var(--ink-2); margin: .55rem 0 0; }
.art-sol .hud-note .mono { font-style: normal; color: var(--ink); }
.art-status { display: flex; align-items: baseline; gap: .5rem; margin-top: .6rem; padding: .55rem 0 .1rem; border-top: 1px solid var(--ink); font-family: var(--mono); font-weight: 700; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.art-status i { width: 8px; height: 8px; background: currentColor; flex: none; align-self: center; }
.art-status .art-status-note { margin-left: auto; text-align: right; color: var(--ink-2); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .8rem; letter-spacing: 0; text-transform: none; }
.art-status.good { color: var(--good); }
.art-status.bad { color: var(--bad); }

/* spotter corrections */
.art-corr { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--ink); }
.art-corr-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.art-step-wrap { display: inline-flex; align-items: center; gap: .3rem; }
.art-step-k { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.art-step { width: 4.6rem; padding: .28rem .4rem; background: #fff; color: var(--ink); border: 1px solid var(--ink); font: inherit; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.art-step:focus { border-color: var(--red); outline: none; }
.art-corr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.art-corr-grid .btn { padding: .45rem .4rem; font-size: .7rem; letter-spacing: .03em; }

/* reference below the tool */
#arty .h2 { margin-top: .4rem; }
.art-notes { margin: 0; border-top: 1px solid var(--ink); }
.art-notes > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule-2); }
.art-notes dt { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.art-notes dd { margin: 0; color: var(--ink-2); max-width: 72ch; font-family: var(--serif); }
#arty .fineprint a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
#arty .fineprint a:hover { color: var(--red); }
@media (max-width: 640px) { .art-notes > div { grid-template-columns: 1fr; gap: .2rem; } }

/* coordinate boxes: the game's own X/Y pairs */
.art-coords { margin: 0 0 .7rem; padding-bottom: .7rem; border-bottom: 1px solid var(--ink); }
.art-coord { display: grid; grid-template-columns: 3.2rem 1fr 1fr auto auto; gap: .25rem; align-items: center; margin-bottom: .3rem; }
.art-coord-k { font-family: var(--mono); font-weight: 700; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.art-coord-f { display: flex; align-items: center; min-width: 0; border: 1px solid var(--ink); background: #fff; }
.art-coord-f:focus-within { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.art-coord-f span { padding: 0 .1rem 0 .3rem; font-family: var(--mono); font-size: .64rem; color: var(--ink-3); }
.art-coord-f input { width: 100%; min-width: 0; padding: .28rem .2rem .28rem .1rem; background: transparent; color: var(--ink); border: 0; font: inherit; font-family: var(--mono); font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.art-coord-f input:focus { outline: none; }
.art-mini { padding: .28rem .45rem; background: var(--plate); color: var(--ink); border: 1px solid var(--ink); font-family: var(--mono); font-weight: 700; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; line-height: 1.2; }
.art-mini:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.art-mini:disabled { opacity: .4; cursor: default; }
.art-coords .hud-note { margin-top: .4rem; }

/* the battery: one coordinate row per gun, then every gun's numbers on one plate */
.art-guns { display: flex; flex-direction: column; }
.art-gun-pick { padding: .2rem .2rem .2rem 0; background: none; border: 0; text-align: left; cursor: pointer; }
.art-gun-pick:hover:not(:disabled) { color: var(--red); }
.art-gun-pick.on { color: var(--red); }
.art-gun-pick.on::after { content: " ●"; font-size: .5rem; vertical-align: middle; }
.art-guns-add { display: flex; align-items: baseline; gap: .45rem; margin: .1rem 0 .45rem; }
#arty-add-gun.on { background: var(--red); border-color: var(--red); color: #FBF6EA; }
.art-guns-hint { font-family: var(--serif); font-style: italic; font-size: .78rem; color: var(--ink-3); }

.art-battery { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--ink); }
.art-battery-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.art-battery .table-wrap { border: 0; margin-bottom: 0; }
.art-bat { font-size: .72rem; }
.art-bat th, .art-bat td { padding: .28rem .25rem; }
.art-bat th:first-child, .art-bat td:first-child { padding-left: 0; }
.art-bat th:last-child, .art-bat td:last-child { padding-right: 0; }
.art-bat thead th { font-size: .6rem; letter-spacing: .03em; padding-bottom: .25rem; }
.art-bat tbody th { font-family: var(--mono); font-weight: 700; font-size: .78rem; color: var(--ink); }
.art-bat td.num { font-weight: 700; font-size: .74rem; }
.art-bat-row { cursor: pointer; }
.art-bat-row:hover td, .art-bat-row:hover th { background: var(--plate-2); }
.art-bat-row.on th, .art-bat-row.on td { color: var(--red); }
.art-bat-row.bad td.num { color: var(--bad); }
.art-bat-row:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.art-bat-flag { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .68rem; color: var(--bad); text-transform: none; letter-spacing: 0; }
/* mobile.css bleeds wide reference tables to the page edges under 600 px. The battery table
   sits inside the solution panel, where that negative margin pushes its last column under the
   panel edge, so it keeps its own box and scrolls inside it instead. */
@media (max-width: 600px) {
  .art-battery .table-wrap { margin-left: 0; margin-right: 0; max-width: 100%; }
}