/* ==========================================================================
   bulldogs.zone — field tools page
   Extends site.css; no new tokens, no new fonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 14vh, 168px) var(--gutter) clamp(44px, 6vw, 68px);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.pagehead__body { position: relative; max-width: 62ch; }

.pagehead h1 {
  font-size: clamp(44px, 8vw, 92px);
  line-height: .86;
  letter-spacing: -.02em;
  margin: 6px 0 20px;
}

.pagehead__lede {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 56ch;
}

.nav a.is-current { color: var(--accent); }

/* --------------------------------------------------------------------------
   Fire mission workspace — map beside the solution
   -------------------------------------------------------------------------- */

.mission {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  /* the row must have a floor, otherwise the canvas has no definite height */
  min-height: min(76vh, 660px);
}

.mission__map {
  position: relative;
  background: var(--bg);
  overflow: hidden;
}

.mission__panel {
  position: relative;
  background: var(--bg-2);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

/* readout ------------------------------------------------------------------- */

.calc__status {
  align-self: flex-start;
  padding: 6px 10px;
  border: 1px solid rgba(200, 120, 31, .5);
  color: var(--accent);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.mission__panel.is-out .calc__status { color: #e2564a; border-color: rgba(226, 86, 74, .55); }

.calc__solution { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }

.calc__figure {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(54px, 5.6vw, 82px);
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease-out);
}
.mission__panel.is-out .calc__figure { color: var(--ink-30); }
.calc__figure--sm { font-size: clamp(26px, 2.6vw, 34px); color: var(--ink); }

.calc__unit { color: var(--ink-45); padding-top: 8px; }
.calc__arc { color: var(--ink); padding-top: 4px; }

.calc__secondary { padding-left: 24px; border-left: 1px solid var(--line); }

.calc__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  margin: 0;
  border: 1px solid var(--line);
}
.calc__stats > div { background: var(--bg-2); padding: 12px 13px; }
.calc__stats dt { color: var(--ink-45); }
.calc__stats dd {
  margin: 6px 0 0;
  font: 500 16px/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__stats dd small {
  display: block;
  padding-top: 4px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-30);
}

.calc__note { color: var(--ink-30); line-height: 1.7; }

/* manual entry -------------------------------------------------------------- */

.manual {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.manual > summary {
  cursor: pointer;
  color: var(--ink-45);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color .25s var(--ease-out);
}
.manual > summary::-webkit-details-marker { display: none; }
.manual > summary::before {
  content: '+';
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1;
}
.manual[open] > summary::before { content: '−'; }
.manual > summary:hover { color: var(--accent); }

.calc__modes { display: flex; gap: 6px; margin: 16px 0 14px; }

.calc__mode {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-45);
  font: inherit;
  cursor: pointer;
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out), background .3s var(--ease-out);
}
.calc__mode:hover { border-color: var(--accent); color: var(--accent); }
.calc__mode.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.calc__pane { display: none; }
.calc__pane.is-active { display: block; }

.calc__set {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 0 0 14px;
  padding: 13px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.calc__set--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.calc__set legend {
  padding: 0 9px 0 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field span { color: var(--ink-45); }

.field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(232, 228, 220, .2);
  color: var(--ink);
  padding: 10px;
  font: 500 14px/1 var(--mono);
  outline: none;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
  -moz-appearance: textfield;
}
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input:focus { border-color: var(--accent); background: var(--panel-2); }
.field input::placeholder { color: var(--ink-30); font-size: 13px; }

.calc__hint { color: var(--ink-30); line-height: 1.7; }

/* range gauge --------------------------------------------------------------- */

.gauge { display: flex; flex-direction: column; gap: 9px; padding-bottom: 20px; }

.gauge__labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-30);
}
.gauge__labels span:nth-child(2) { color: var(--ink-45); }

.gauge__track {
  position: relative;
  height: 30px;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, rgba(232, 228, 220, .07) 0 1px, transparent 1px 24px);
}

.gauge__band {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(200, 120, 31, .16);
  border-left: 1px solid rgba(200, 120, 31, .55);
  border-right: 1px solid rgba(200, 120, 31, .55);
  transition: left .4s var(--ease-out), width .4s var(--ease-out);
}

.gauge__pin {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 0;
  transition: left .4s var(--ease-out);
}
.gauge__pin i {
  position: absolute;
  top: 0; bottom: 0; left: -1px;
  width: 2px;
  background: var(--ink);
}
.gauge__pin b {
  position: absolute;
  bottom: -20px;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--ink);
  font-weight: 500;
}
.mission__panel.is-out .gauge__pin i { background: #e2564a; }
.mission__panel.is-out .gauge__pin b { color: #e2564a; }

/* --------------------------------------------------------------------------
   Tactical map
   -------------------------------------------------------------------------- */

/* absolute so the canvas takes its size FROM the cell instead of defining it —
   width/height:100% on a static canvas in an auto-height parent is circular and
   blows the element up to the 2^24 canvas clamp */
#mapCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
#mapCanvas.is-grabbing { cursor: grabbing; }
#mapCanvas.is-overpin { cursor: move; }

/* the reticle would fight the map's own cursor affordances */
.has-cursor #mapCanvas { cursor: crosshair !important; }
.has-cursor #mapCanvas.is-grabbing { cursor: grabbing !important; }
.has-cursor #mapCanvas.is-overpin { cursor: move !important; }

.mapui {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.mapui--tl { top: 12px; left: 12px; flex-direction: column; align-items: flex-start; }
.mapui--tr { top: 12px; right: 12px; }
.mapui--bl { left: 12px; bottom: 12px; flex-wrap: wrap; max-width: calc(100% - 150px); }
.mapui--br {
  right: 12px; bottom: 12px;
  align-items: center;
  padding: 7px 10px;
  background: rgba(8, 8, 7, .84);
  border: 1px solid var(--line);
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

.maplegend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: rgba(8, 8, 7, .84);
  border: 1px solid var(--line);
  color: var(--ink-60);
}
.maplegend i { width: 11px; height: 11px; flex: none; }
.maplegend__gun { background: var(--accent); border-radius: 50%; }
.maplegend__tgt { border: 1.5px solid var(--ink); border-radius: 50%; }
.maplegend__band { background: rgba(200, 120, 31, .22); border: 1px solid rgba(200, 120, 31, .75); }

.mapbtn {
  min-width: 34px;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  background: rgba(8, 8, 7, .84);
  border: 1px solid var(--line);
  color: var(--ink-60);
  font: inherit;
  cursor: pointer;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out);
}
.mapbtn:hover { border-color: var(--accent); color: var(--accent); }
.mapbtn:active { background: var(--accent); color: var(--bg); }

/* place-mode control -------------------------------------------------------- */

.placemode {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  background: rgba(8, 8, 7, .88);
}

.placebtn {
  padding: 9px 13px;
  /* buttons do not inherit text-transform from .mono in every UA */
  text-transform: uppercase;
  letter-spacing: .16em;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--ink-45);
  font: inherit;
  cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.placebtn:last-child { border-right: 0; }
.placebtn:hover { color: var(--accent); }
.placebtn.is-active { background: var(--accent); color: var(--bg); }

.maphint {
  padding: 6px 9px;
  background: rgba(8, 8, 7, .8);
  border: 1px solid var(--line-soft);
  color: var(--ink-30);
  max-width: 30ch;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   External tool links
   -------------------------------------------------------------------------- */

.links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.linkcard {
  position: relative;
  background: var(--bg);
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  transition: background .35s var(--ease-out);
}
.linkcard:hover { background: var(--panel-2); }
.linkcard:hover .brackets span { border-color: var(--accent); }

.linkcard__host { color: var(--ink-30); }

.linkcard h3 {
  font-size: 19px;
  letter-spacing: .05em;
  line-height: 1.15;
  transition: color .3s var(--ease-out);
}
.linkcard:hover h3 { color: var(--accent); }

.linkcard p { font-size: 14px; line-height: 1.5; color: var(--ink-45); }

.linkcard__go {
  margin-top: auto;
  padding-top: 14px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.linkcard__go i {
  display: block;
  width: 16px; height: 1px;
  background: var(--accent);
  transition: width .35s var(--ease-out);
}
.linkcard:hover .linkcard__go i { width: 30px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .mission { grid-template-columns: 1fr; min-height: 0; }
  .mission__map { aspect-ratio: 16 / 11; }
  .manual { margin-top: 8px; }
}

@media (max-width: 620px) {
  .mission__map { aspect-ratio: 3 / 4; }
  .maplegend { display: none; }
  .maphint { display: none; }
  /* the mode switch would collide with the zoom buttons up top */
  .mapui--tl { top: auto; bottom: 12px; left: 12px; }
  .mapui--br { display: none; }
  .calc__stats { grid-template-columns: 1fr; }
  .calc__set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__set--wide { grid-template-columns: 1fr; }
  .calc__secondary { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   Armoury catalogue
   -------------------------------------------------------------------------- */

.search { display: flex; align-items: center; gap: 12px; }
.search > span { color: var(--ink-45); flex: none; }

.search input {
  width: clamp(180px, 26vw, 300px);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  font: 500 14px/1 var(--mono);
  outline: none;
  transition: border-color .25s var(--ease-out);
}
.search input:focus { border-color: var(--accent); }
.search input::placeholder { color: var(--ink-30); }
.search input::-webkit-search-cancel-button { filter: invert(.7); }

#armouryTabs { padding-bottom: clamp(20px, 2.6vw, 28px); }
#armouryTabs .kit__tab i { font-style: normal; opacity: .55; padding-left: 4px; }

.armoury {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.acard {
  position: relative;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .35s var(--ease-out);
}
.acard:hover { background: var(--panel-2); }
.acard:hover .brackets span { border-color: var(--accent); }

.acard__thumb {
  height: 132px;
  display: grid;
  place-items: center;
  padding: 14px;
  background:
    radial-gradient(120% 90% at 50% 32%, rgba(200, 120, 31, .09), transparent 62%),
    repeating-linear-gradient(115deg, #141412 0 14px, #101010 14px 28px);
  border-bottom: 1px solid var(--line);
}
.acard__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(1.45) contrast(1.02) drop-shadow(0 10px 20px rgba(0, 0, 0, .7));
  transition: transform .45s var(--ease-out);
}
.acard:hover .acard__thumb img { transform: scale(1.07); }

.acard__meta { padding: 13px; display: flex; flex-direction: column; gap: 5px; }
.acard__meta b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.15;
}
.acard__meta span { font-size: 13px; line-height: 1.45; color: var(--ink-45); }
.acard__cat { color: var(--ink-30) !important; font-size: 10px !important; }
.acard__std {
  font-style: normal;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .18em;
}

.armoury__empty { padding: 40px 0; color: var(--ink-30); text-align: center; }

@media (max-width: 620px) {
  .armoury { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
  .acard__thumb { height: 104px; }
  .search { width: 100%; }
  .search input { width: 100%; }
}

/* --------------------------------------------------------------------------
   Servers page
   -------------------------------------------------------------------------- */

.srv {
  position: relative;
  overflow: hidden;
  padding: clamp(120px, 16vh, 190px) var(--gutter) clamp(60px, 8vw, 96px);
  min-height: 88svh;
  display: flex;
  align-items: center;
}
.srv__bg { position: absolute; inset: 0; z-index: -2; }
.srv__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.26) saturate(.35); }
.srv__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,11,10,.95), rgba(11,11,10,.55));
}

.srv__grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: start;
}

.srv__lead { display: flex; flex-direction: column; gap: 18px; }

.srv h1 {
  font-size: clamp(46px, 7.4vw, 88px);
  line-height: .88;
  letter-spacing: -.02em;
}
.srv h1 span { color: var(--accent); }

.srv p { max-width: 50ch; font-size: clamp(15px, 1.4vw, 18px); color: var(--ink-60); }

.srv__honest {
  border-left: 2px solid rgba(200, 120, 31, .5);
  padding: 4px 0 4px 14px;
  color: var(--ink-45);
  line-height: 1.8;
  letter-spacing: .1em;
  max-width: 52ch;
}

.srv__actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px; }

.srv__panel {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(8, 8, 7, .84);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.srv__panel-head { color: var(--ink-45); padding-bottom: 16px; }

.srv__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--ink-60);
}
.srv__row em { font-style: normal; color: var(--ink-30); white-space: nowrap; }
.srv__row--live em { color: var(--accent); }

.srv__connect {
  margin-top: 22px;
  border: 1px dashed rgba(232, 228, 220, .22);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.srv__connect > .mono { color: var(--ink-45); }
.srv__connect code {
  font: 500 14px/1.4 var(--mono);
  color: var(--ink-45);
  letter-spacing: .04em;
}
.srv__connect > span { color: var(--ink-30); }

@media (max-width: 900px) {
  .srv__grid { grid-template-columns: 1fr; }
}