/* The Armarium — #/character-sheet/armarium
 *
 * Ported from the locked design reference (docs/design/armarium-kolme-vaihtoehtoa.html).
 * Every rule is scoped under .arm-view, and the layout is sized by CONTAINER width, not by
 * the window: the game frame is far narrower than the viewport, so a viewport media query
 * would pick the wrong number of columns inside the shell.
 */

/* The scene paints a backdrop image (z-index 1) and a vignette (z-index 2), so a static
   character tab bar lands underneath both and disappears — the same trap the Achievements
   scene documents. The bar keeps its shared width and position; only stacking and order are
   set here, and order:-1 keeps it above the in-flow phone banner. */
.arm-view .arm-scene { display: flex; flex-direction: column; min-height: 0; }
.arm-view .char-tabs-wrap { position: relative; z-index: 3; flex: none; width: 100%; order: -1; }

/* Same density as the Achievements screen: no top padding under the tab bar (the bar's own
   4 px is the gap), and the side inset matches the bar so their edges line up. */
.arm-view .arm-stack {
  position: relative;
  z-index: 3;
  container-type: inline-size;
  container-name: armarium;
  max-width: 1600px;
  margin: 0 auto 16px;
  padding: 0 20px;
}

.arm-view .arm-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  /* The seal and its counts sit centred against the title block, not on its baseline. */
  align-items: center;
  padding: 14px 18px;
  background: #1b150f;
  border: 1px solid var(--arm-line, rgba(201, 151, 68, .25));
  box-shadow: inset 0 1px rgba(237, 208, 151, .06), 0 18px 50px rgba(0, 0, 0, .52);
}
.arm-view .arm-eyebrow { margin: 0 0 4px; color: #d3a95e; font: 700 12px/1.2 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .14em; text-transform: uppercase; }
.arm-view .arm-head h2 { margin: 0; color: #f4e5c6; font: 500 clamp(24px, 3vw, 38px)/1 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .08em; text-transform: uppercase; }
.arm-view .arm-head p { max-width: 720px; margin: 6px 0 0; color: #c1b298; font-size: 16px; line-height: 1.45; }
.arm-view .arm-totals { display: flex; align-items: center; gap: 16px; }
.arm-view .arm-seal { position: relative; display: grid; place-items: center; width: 124px; height: 124px; }
.arm-view .arm-seal::before { content: ''; position: absolute; z-index: 1; inset: 0; background: url('/assets/frames/laurel.png') center / contain no-repeat; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .48)); }
.arm-view .arm-seal::after { content: ''; position: absolute; inset: 28px 27px 25px; background: #24180d; border: 1px solid #b58943; border-radius: 50%; box-shadow: inset 0 0 14px rgba(0, 0, 0, .72); }
.arm-view .arm-seal span { position: relative; z-index: 2; display: grid; place-items: center; width: 64px; margin-top: -3px; color: #fff0c9; text-align: center; text-shadow: 0 1px #241507; }
.arm-view .arm-seal b { display: block; font: 700 21px/.9 var(--font-display, Cinzel, Georgia, serif); }
.arm-view .arm-seal em { display: block; margin-top: 2px; color: #dfbe7c; font: 700 12px/1 var(--font-display, Cinzel, Georgia, serif); font-style: normal; }
.arm-view .arm-seal small { display: block; margin-top: 1px; color: #edddb9; font: 700 12px/1.1 var(--font-body, inherit); letter-spacing: .02em; }
.arm-view .arm-green { padding-right: 16px; text-align: right; border-right: 1px solid rgba(201, 151, 68, .25); }
.arm-view .arm-green b { display: block; color: #a9c879; font: 700 20px/1 var(--font-display, Cinzel, Georgia, serif); }
.arm-view .arm-green span, .arm-view .arm-empty span { color: #b4a58d; font-size: 12px; text-transform: uppercase; }
.arm-view .arm-empty { text-align: right; }
.arm-view .arm-empty b { display: block; color: #d66a5d; font: 700 22px/1 var(--font-display, Cinzel, Georgia, serif); }
/* The whole log as one bar under the introduction; the seal beside it carries the count. */
.arm-view .arm-head-progress { display: grid; grid-template-columns: minmax(0, 420px) auto; align-items: center; gap: 10px; margin-top: 10px; }
.arm-view .arm-head-progress .arm-meter { height: 8px; }
.arm-view .arm-head-progress b { color: #d3a95e; font: 700 15px/1 var(--font-display, Cinzel, Georgia, serif); font-variant-numeric: tabular-nums; }

.arm-view .arm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  min-height: 560px;
  margin-top: 10px;
  overflow: hidden;
  background: #0c0907;
  border: 1px solid rgba(201, 151, 68, .55);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .52);
}

.arm-view .arm-picker { display: none; gap: 10px; padding: 12px; background: rgba(6, 9, 9, .91); border-bottom: 1px solid rgba(201, 151, 68, .55); }
.arm-view .arm-pick { display: grid; gap: 4px; min-width: 0; }
.arm-view .arm-pick > span { color: #b9a786; font: 700 12px/1.2 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; }
.arm-view .arm-pick select { width: 100%; min-height: 44px; padding: 0 10px; color: #eaddc3; background: #0d0a07; border: 1px solid rgba(201, 151, 68, .38); }
.arm-view .arm-pick select:focus-visible { outline: 2px solid #e1b966; outline-offset: -3px; }

.arm-view .arm-sections { display: flex; gap: 0; overflow-x: auto; background: rgba(6, 9, 9, .91); border-bottom: 1px solid rgba(201, 151, 68, .55); scrollbar-width: thin; }
.arm-view .arm-section-tab { flex: 0 0 auto; min-height: 48px; padding: 10px 18px; color: #b0a087; background: transparent; border: 0; border-right: 1px solid rgba(201, 151, 68, .25); border-bottom: 2px solid transparent; cursor: pointer; font: 700 14px/1 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .035em; text-transform: uppercase; }
.arm-view .arm-section-tab[aria-selected="true"] { color: #ecd298; background: #21170f; border-bottom-color: #c99744; }
.arm-view .arm-section-tab:focus-visible { outline: 2px solid #e1b966; outline-offset: -3px; }

.arm-view .arm-rail { overflow-y: auto; padding: 14px; background: linear-gradient(180deg, rgba(10, 13, 13, .94), rgba(14, 9, 7, .91)); border-bottom: 1px solid rgba(201, 151, 68, .25); }
.arm-view .arm-rail-label { display: block; margin: 2px 6px 12px; color: #b9a786; font: 700 12px/1.2 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; }
.arm-view .arm-sources { display: grid; gap: 8px; }
.arm-view .arm-source {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 92px;
  overflow: hidden;
  padding: 9px 12px 9px 9px;
  color: #b2a287;
  text-align: left;
  background: #17120d;
  border: 1px solid rgba(145, 108, 55, .46);
  cursor: pointer;
}
.arm-view .arm-source-art { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; background: #0c0a07; border: 1px solid rgba(201, 151, 68, .28); box-shadow: inset 0 0 14px rgba(0, 0, 0, .64); }
.arm-view .arm-source-art img { width: 62px; height: 62px; object-fit: contain; opacity: .94; filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .68)); }
.arm-view .arm-source.is-scene .arm-source-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.05); }
.arm-view .arm-source-copy { display: grid; gap: 6px; min-width: 0; }
.arm-view .arm-source-name { min-width: 0; overflow-wrap: break-word; color: #e0cda9; font: 700 15px/1.2 var(--font-display, Cinzel, Georgia, serif); }
.arm-view .arm-source-count { color: #baa68a; font: 600 13px/1.2 var(--font-body, inherit); font-variant-numeric: tabular-nums; }
.arm-view .arm-meter { display: block; height: 5px; overflow: hidden; background: #211a12; border: 1px solid rgba(201, 151, 68, .18); }
.arm-view .arm-meter i { display: block; height: 100%; background: linear-gradient(90deg, #8b5f2c, #c09249); }
.arm-view .arm-source.is-green .arm-source-name, .arm-view .arm-source.is-green .arm-source-count { color: #b7cc92; }
.arm-view .arm-source.is-green .arm-meter i { background: linear-gradient(90deg, #667b4a, #a4c276); }
.arm-view .arm-source-check { position: absolute; top: 8px; left: 52px; display: none; place-items: center; width: 20px; height: 20px; color: #10160c; background: #9fbc70; border: 1px solid #cadba8; border-radius: 50%; font: 800 12px/1 var(--font-body, inherit); }
.arm-view .arm-source.is-green .arm-source-check { display: grid; }
.arm-view .arm-source[aria-pressed="true"] { color: #f0d59d; background: #24190f; border-color: #a98242; border-left: 4px solid #b94b40; padding-left: 6px; }
.arm-view .arm-source[aria-pressed="true"] .arm-source-name { color: #f0d59d; }
.arm-view .arm-source:focus-visible { outline: 2px solid #e1b966; outline-offset: -3px; }
.arm-view .arm-source[data-section="bosses"] { grid-template-columns: 80px minmax(0, 1fr); min-height: 104px; }
.arm-view .arm-source[data-section="bosses"] .arm-source-art { width: 80px; height: 80px; }
.arm-view .arm-source[data-section="bosses"] .arm-source-art img { width: 78px; height: 78px; }
.arm-view .arm-source[data-section="bosses"] .arm-source-check { left: 68px; }

.arm-view .arm-stage { min-width: 0; padding: 14px; background: #17110c; }
.arm-view .arm-page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; margin-bottom: 10px; padding: 2px 3px 10px; border-bottom: 1px solid rgba(201, 151, 68, .25); }
.arm-view .arm-page-head h3 { margin: 4px 0 0; color: #eee0c3; font: 500 20px/1.1 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .06em; text-transform: uppercase; }
.arm-view .arm-page-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.arm-view .arm-stat { min-width: 96px; padding: 7px 8px; color: #a99a81; background: #0e0b08; border: 1px solid rgba(201, 151, 68, .25); font-size: 12px; text-align: right; text-transform: uppercase; }
.arm-view .arm-stat b { display: block; margin-bottom: 4px; color: #e1cfab; font: 700 15px/1 var(--font-display, Cinzel, Georgia, serif); }
.arm-view .arm-stat.is-green b { color: #a9c879; }

.arm-view .arm-toolbar { display: grid; grid-template-columns: minmax(160px, 1fr) auto auto; gap: 8px; margin-bottom: 10px; }
.arm-view .arm-search { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; color: #b9a989; background: #0d0a07; border: 1px solid rgba(201, 151, 68, .25); }
.arm-view .arm-search > span { padding-right: 10px; border-right: 1px solid rgba(201, 151, 68, .25); font: 700 12px/1 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .08em; text-transform: uppercase; }
.arm-view .arm-search input { width: 100%; min-height: 40px; color: #eaddc3; background: transparent; border: 0; outline: 0; }
.arm-view .arm-toggle { min-height: 44px; padding: 8px 12px; color: #a99a80; background: rgba(12, 9, 7, .72); border: 1px solid rgba(201, 151, 68, .25); cursor: pointer; }
.arm-view .arm-toggle[aria-pressed="true"] { color: #f0d6a1; background: rgba(133, 47, 42, .22); border-color: rgba(185, 75, 64, .6); }
.arm-view .arm-count { align-self: center; color: #b5a68c; font-size: 14px; text-align: right; }

.arm-view .arm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 10px; align-content: start; }
.arm-view .arm-slot {
  position: relative;
  display: grid;
  grid-template-rows: 126px auto;
  min-width: 0;
  min-height: 198px;
  overflow: hidden;
  padding: 0;
  color: #d8c9ab;
  text-align: left;
  background: #21180f;
  border: 1px solid rgba(119, 91, 49, .62);
  cursor: pointer;
}
.arm-view .arm-slot-art { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 58%, rgba(201, 151, 68, .17), transparent 50%), #0d0a08; border-bottom: 1px solid rgba(201, 151, 68, .25); }
.arm-view .arm-slot-art img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .65)); }
.arm-view .arm-slot-copy { display: block; min-width: 0; padding: 12px; }
.arm-view .arm-slot-copy b { display: block; overflow: hidden; color: #f0dfbf; font: 700 14px/1.3 var(--font-display, Cinzel, Georgia, serif); text-overflow: ellipsis; white-space: nowrap; }
.arm-view .arm-slot-copy small { display: block; margin-top: 6px; overflow: hidden; color: #b0a087; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.arm-view .arm-slot-logged { display: block; margin-top: 6px; overflow: hidden; color: #b8ad98; font: 600 12px/1.3 var(--font-body, inherit); text-overflow: ellipsis; white-space: nowrap; }
.arm-view .arm-slot-state { position: absolute; top: 8px; right: 8px; padding: 4px 6px; color: #c7d8a6; background: #1c2616; border: 1px solid #64764b; font: 700 12px/1 var(--font-display, Cinzel, Georgia, serif); text-transform: uppercase; }
/* The rate badge and the copies chip share the top edge, so the badge is capped: the same
   rate is spelled out in full in the slot subtitle and in the detail panel. */
.arm-view .arm-slot-rate { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 74px); padding: 4px 6px; overflow: hidden; color: #d0bb91; background: rgba(8, 6, 5, .9); border: 1px solid rgba(201, 151, 68, .34); font: 700 12px/1.2 var(--font-body, inherit); text-overflow: ellipsis; white-space: nowrap; }
.arm-view .arm-slot.is-selected { border-color: #e1b966; box-shadow: inset 0 0 0 2px rgba(225, 185, 102, .14); }
.arm-view .arm-slot:focus-visible { outline: 2px solid #e1b966; outline-offset: -3px; }
.arm-view .arm-slot.is-missing { border-color: rgba(133, 47, 42, .66); background: #100b09; }
.arm-view .arm-slot.is-missing .arm-slot-art { background: radial-gradient(circle at 50% 58%, rgba(160, 151, 135, .11), transparent 54%), #090807; }
.arm-view .arm-slot.is-missing .arm-slot-art img { opacity: .58; filter: grayscale(1) brightness(.68) contrast(1.08); }
.arm-view .arm-slot.is-missing .arm-slot-copy b { color: #c7a19a; }
.arm-view .arm-slot.is-missing .arm-slot-state { color: #e0786c; background: #2a1110; border-color: #70322d; }
.arm-view .arm-slot[hidden] { display: none; }

.arm-view .arm-detail { min-width: 0; padding: 16px; background: #0e0c09; border-top: 1px solid rgba(201, 151, 68, .25); }
.arm-view .arm-detail-kicker { color: #c99744; font: 700 12px/1.2 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; }
.arm-view .arm-detail-art { display: grid; place-items: center; height: 148px; margin: 11px 0; background: radial-gradient(circle, rgba(201, 151, 68, .14), transparent 58%); border-top: 1px solid rgba(201, 151, 68, .25); border-bottom: 1px solid rgba(201, 151, 68, .25); }
.arm-view .arm-detail-art img { width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 11px 15px #000); }
.arm-view .arm-detail.is-missing .arm-detail-art img { opacity: .54; filter: grayscale(1) brightness(.7) contrast(1.06); }
.arm-view .arm-detail h4 { margin: 0; color: #f2dfb8; font: 500 20px/1.2 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .04em; text-transform: uppercase; }
.arm-view .arm-detail-status { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; padding-bottom: 12px; color: #94ab6b; border-bottom: 1px solid rgba(201, 151, 68, .25); font: 700 16px/1 var(--font-display, Cinzel, Georgia, serif); }
.arm-view .arm-detail.is-missing .arm-detail-status { color: #e06b5f; }
.arm-view .arm-detail-lore { margin: 13px 0; color: #c3b397; font-family: Georgia, serif; font-size: 15px; font-style: italic; line-height: 1.55; }
/* One line per fact, label and value side by side and left-aligned so a long value wraps
   under itself instead of hugging the right edge. */
.arm-view .arm-facts { display: grid; gap: 8px; margin: 12px 0 0; }
.arm-view .arm-facts div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.35; }
.arm-view .arm-facts dt { color: #aa9b82; }
.arm-view .arm-facts dd { min-width: 0; margin: 0; color: #d9cbad; font-weight: 600; overflow-wrap: break-word; }
/* A treasure's stats (itemStatsHtml): the reason to chase the record. */
.arm-view .arm-item { margin: 12px 0 0; padding: 10px 12px; background: #15100b; border: 1px solid rgba(201, 151, 68, .25); }
.arm-view .arm-item-meta { margin: 0 0 6px; color: #d3a95e; font: 700 12px/1.3 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .06em; text-transform: uppercase; }
.arm-view .arm-item-meta.rarity-unique { color: var(--rarity-unique, #3ec9a7); }
.arm-view .arm-item-meta.rarity-legendary { color: var(--rarity-legendary, #d98c2b); }
.arm-view .arm-item-lines { display: grid; gap: 3px; margin: 0; padding: 0; color: #eadcc0; font-size: 14px; font-weight: 600; line-height: 1.35; list-style: none; }
.arm-view .arm-item-rolled { margin: 6px 0 0; color: #aa9b82; font-size: 13px; line-height: 1.35; }
.arm-view .arm-item-effect { margin: 8px 0 0; color: #d9cbad; font-size: 13px; line-height: 1.45; }
.arm-view .arm-item-effect b { color: #e1b966; }
.arm-view .arm-empty-state { padding: 24px 12px; color: #b0a087; text-align: center; }

/* Progress, the landing page: the whole log area by area, the collections closest to green and
   the latest dated finds (owner review 2026-09-16). It is one column of content at every width,
   so the section log's rail / stage / detail columns and its fixed height stand down. */
.arm-view .arm-layout.is-progress { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; height: auto; min-height: 0; }
.arm-view .arm-progress { display: grid; gap: 14px; min-width: 0; padding: 14px; background: #17110c; }
.arm-view .arm-areas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.arm-view .arm-area {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px 10px 10px;
  color: #b2a287;
  text-align: left;
  background: #17120d;
  border: 1px solid rgba(145, 108, 55, .46);
  cursor: pointer;
}
.arm-view .arm-area:hover, .arm-view .arm-goal:hover { background: #1e160e; border-color: #a98242; }
.arm-view .arm-area:focus-visible, .arm-view .arm-goal:focus-visible { outline: 2px solid #e1b966; outline-offset: -3px; }
.arm-view .arm-area-art, .arm-view .arm-goal-art { display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 58%, rgba(201, 151, 68, .14), transparent 60%), #0c0a07; border: 1px solid rgba(201, 151, 68, .28); box-shadow: inset 0 0 14px rgba(0, 0, 0, .64); }
.arm-view .arm-area-art { width: 56px; height: 56px; }
.arm-view .arm-goal-art { width: 44px; height: 44px; }
.arm-view .arm-area-art img, .arm-view .arm-goal-art img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .6)); }
.arm-view .arm-area-art.is-scene img, .arm-view .arm-goal-art.is-scene img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.05); }
.arm-view .arm-area-copy { display: grid; gap: 6px; min-width: 0; }
/* The percentage drops under the name on a very narrow card rather than breaking the name. */
.arm-view .arm-area-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; min-width: 0; }
.arm-view .arm-area-name { min-width: 0; color: #e0cda9; font: 700 15px/1.2 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: break-word; }
.arm-view .arm-area-pct { flex: none; color: #d3a95e; font: 700 15px/1 var(--font-display, Cinzel, Georgia, serif); font-variant-numeric: tabular-nums; }
.arm-view .arm-area-count { color: #a99a81; font-size: 13px; }
.arm-view .arm-area-count b { color: #eee0c3; font: 700 16px/1 var(--font-display, Cinzel, Georgia, serif); font-variant-numeric: tabular-nums; }
.arm-view .arm-area-foot { color: #a99a81; font-size: 12px; line-height: 1.3; }
.arm-view .arm-area.is-green .arm-area-name, .arm-view .arm-area.is-green .arm-area-pct { color: #b7cc92; }
.arm-view .arm-strip { display: flex; gap: 2px; height: 8px; }
.arm-view .arm-strip i { flex: 1 1 0; min-width: 3px; overflow: hidden; background: #211a12; border: 1px solid rgba(201, 151, 68, .18); }
.arm-view .arm-strip b { display: block; height: 100%; background: linear-gradient(90deg, #8b5f2c, #c09249); }
.arm-view .arm-strip i.is-green b { background: linear-gradient(90deg, #667b4a, #a4c276); }

.arm-view .arm-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.arm-view .arm-list { min-width: 0; padding: 12px; background: #0e0c09; border: 1px solid rgba(201, 151, 68, .25); }
.arm-view .arm-list-title { margin: 0 0 10px; color: #d3a95e; font: 700 12px/1.2 var(--font-display, Cinzel, Georgia, serif); letter-spacing: .14em; text-transform: uppercase; }
.arm-view .arm-list ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.arm-view .arm-list-empty { margin: 0; padding: 8px 2px; color: #b0a087; font-size: 14px; line-height: 1.45; }
.arm-view .arm-goal { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 6px 10px 6px 6px; color: #b2a287; text-align: left; background: #17120d; border: 1px solid rgba(145, 108, 55, .36); cursor: pointer; }
.arm-view .arm-goal-copy { display: grid; gap: 4px; min-width: 0; }
.arm-view .arm-goal-copy b { color: #f0dfbf; font: 700 14px/1.25 var(--font-display, Cinzel, Georgia, serif); overflow-wrap: break-word; }
.arm-view .arm-goal-copy small { color: #b0a087; font-size: 12px; }
.arm-view .arm-goal-side { display: grid; justify-items: end; gap: 2px; color: #a99a81; font-size: 12px; text-transform: uppercase; }
.arm-view .arm-goal-side b { color: #e1b966; font: 700 18px/1 var(--font-display, Cinzel, Georgia, serif); }
.arm-view .arm-goal-date { color: #b8ad98; font: 600 12px/1.3 var(--font-body, inherit); white-space: nowrap; }

/* Two columns: the rail moves beside the stage, the detail panel stays in the flow. */
@container armarium (min-width: 700px) {
  .arm-view .arm-layout { grid-template-columns: 244px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .arm-view .arm-sections { grid-column: 1 / -1; }
  .arm-view .arm-rail { grid-column: 1; grid-row: 2; border-right: 1px solid rgba(201, 151, 68, .25); border-bottom: 0; }
  .arm-view .arm-stage { grid-column: 2; grid-row: 2; }
  /* Explicit placement on purpose: an item with a definite row but an automatic column is
     placed before the auto-flow items, which would drop the detail panel into column one. */
  /* align-content: start keeps the rows at their own height: on a wide screen the panel is as
     tall as the stage, and stretched rows opened a gap above the fact list (owner review). */
  .arm-view .arm-detail { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 190px minmax(0, 1fr); align-content: start; gap: 0 20px; }
  .arm-view .arm-detail-art { grid-row: 1 / span 4; margin: 0; }
  .arm-view .arm-detail-kicker, .arm-view .arm-detail-heading, .arm-view .arm-detail-body { grid-column: 2; }
  .arm-view .arm-progress { grid-column: 1 / -1; padding: 16px; }
  .arm-view .arm-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .arm-view .arm-area { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .arm-view .arm-area-art { width: 72px; height: 72px; }
  .arm-view .arm-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Three columns and a viewport-bound stage: only the entry grid scrolls. */
@container armarium (min-width: 980px) {
  .arm-view .arm-layout { grid-template-columns: 244px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); height: clamp(620px, calc(100vh - 320px), 820px); min-height: 0; }
  .arm-view .arm-rail { grid-column: 1; grid-row: 2; min-height: 0; }
  .arm-view .arm-stage { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; overflow: hidden; }
  .arm-view .arm-grid { min-height: 0; padding-right: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .arm-view .arm-detail { grid-column: 3; grid-row: 2; grid-template-columns: none; height: 100%; overflow-y: auto; border-top: 0; border-left: 1px solid rgba(201, 151, 68, .25); }
  .arm-view .arm-detail-art { grid-row: auto; margin: 11px 0; }
  .arm-view .arm-detail-kicker, .arm-view .arm-detail-heading, .arm-view .arm-detail-body { grid-column: auto; }
}

@container armarium (min-width: 1100px) {
  .arm-view .arm-layout { grid-template-columns: 292px minmax(0, 1fr) 330px; }
  .arm-view .arm-source { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; min-height: 108px; }
  .arm-view .arm-source-art { width: 88px; height: 88px; }
  .arm-view .arm-source-art img { width: 86px; height: 86px; }
  .arm-view .arm-source-name { font-size: 17px; }
  .arm-view .arm-source-check { left: 76px; width: 23px; height: 23px; }
  .arm-view .arm-source[data-section="bosses"] { grid-template-columns: 104px minmax(0, 1fr); min-height: 124px; }
  .arm-view .arm-source[data-section="bosses"] .arm-source-art { width: 104px; height: 104px; }
  .arm-view .arm-source[data-section="bosses"] .arm-source-art img { width: 102px; height: 102px; }
  .arm-view .arm-source[data-section="bosses"] .arm-source-check { left: 92px; }
  .arm-view .arm-page-head h3 { font-size: 22px; }
  /* Four areas a row, each a small banner: the art across the top, the numbers below. */
  .arm-view .arm-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .arm-view .arm-area { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: 10px; padding: 0 0 12px; }
  .arm-view .arm-area-art { width: 100%; height: 96px; border-width: 0 0 1px; }
  .arm-view .arm-area-copy { padding: 0 12px; }
}

/* Phone: the source list becomes a horizontal shelf above a two-column grid. */
@container armarium (max-width: 699px) {
  /* No horizontal scrollers on a phone: the section tab row and the source shelf are both
     replaced by two selects, which cost one row of height instead of two scrollers. */
  .arm-view .arm-picker { display: grid; }
  .arm-view .arm-sections, .arm-view .arm-rail { display: none; }
  .arm-view .arm-head { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .arm-view .arm-head h2 { font-size: 26px; }
  .arm-view .arm-head p { font-size: 14px; line-height: 1.45; }
  .arm-view .arm-totals { justify-content: space-between; gap: 10px; }
  .arm-view .arm-seal { width: 112px; height: 112px; }
  .arm-view .arm-seal::after { inset: 25px 24px 22px; }
  .arm-view .arm-seal span { width: 58px; }
  .arm-view .arm-seal b { font-size: 19px; }
  .arm-view .arm-green b, .arm-view .arm-empty b { font-size: 17px; }
  .arm-view .arm-page-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .arm-view .arm-page-meta { justify-content: flex-start; }
  .arm-view .arm-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .arm-view .arm-count { grid-column: 1 / -1; text-align: left; }
  .arm-view .arm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arm-view .arm-slot { grid-template-rows: 108px auto; min-height: 186px; }
  .arm-view .arm-slot-copy b { white-space: normal; }
}

@container armarium (max-width: 460px) {
  /* Two stats, two columns: three would squeeze "greenlogged" out of its chip. */
  .arm-view .arm-page-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .arm-view .arm-stat { min-width: 0; text-align: left; }
  .arm-view .arm-search > span { display: none; }
  .arm-view .arm-toolbar { grid-template-columns: minmax(0, 1fr); }
  .arm-view .arm-toggle { width: 100%; }
  /* A recent find's date moves under its name, which then keeps the row's full width. */
  .arm-view .arm-goal--recent { grid-template-columns: 44px minmax(0, 1fr); row-gap: 2px; }
  .arm-view .arm-goal--recent .arm-goal-art { grid-row: span 2; }
  .arm-view .arm-goal--recent .arm-goal-date { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .arm-view * { transition: none !important; animation: none !important; }
}