/* The Account Overview's own rules. Everything around the picture is the Farm
   Planner's: its header, ally-code bar, collapsible panels and mono labels
   come from journey-guide.css and farming.css, loaded before this. What is
   here is the two-column layout, the field rows those panels do not have a
   shape for, and the picture itself — which is swgoh_graphic's picture and
   keeps swgoh_graphic's colours.

   Type is written at the scale journey-guide.css is built to (FONT_SCALE in
   scripts/build_journey_guides.py), as farming.css does. */

/* ---- layout: the form, then the picture beside it ----
   The form first, in the source as well as on the page: it is what you come
   here to fill in, and the picture is what comes out. Stacked on a narrow
   screen the same order holds, which is also the order you work in. */

.ao-layout {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 24px;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 16px 24px 32px;
  align-items: start;
}
@media (max-width: 1000px) {
  .ao-layout { grid-template-columns: 1fr; }
}

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

.ao-form {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 12px 14px 14px;
}
.ao-form-head { margin-bottom: 4px; }
/* Whether the form is kept for next time — above everything it governs, and in
   the same text-then-tick order as the Farm Planner's switches. */
.ao-remember {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; font-family: var(--mono); font-size: 13px; color: var(--label);
  cursor: pointer;
}
.ao-remember input { accent-color: var(--group-ships); margin: 0; }
.ao-form .jg-privacy { margin: 6px 0 0; }

/* The panels are .jg-account, which farming.css already strips of its footer
   spacing; the rows inside are .jg-income, stacked one to a line. */
.ao-panel { margin-top: 10px; }
.ao-panel[open] > summary { margin-bottom: 4px; }
.ao-rows { display: flex; flex-direction: column; gap: 4px; }

/* A grid rather than the flex row .jg-income is, so that every field starts at
   the same place down the whole form. Flexing put each input wherever its own
   label left off, and a column of boxes that do not line up reads as a column
   of different things. Three tracks: the label, the field, and the little
   source word. All three are fixed but the label: the last one is sized rather
   than left to its contents because Coliseum rank and Days between raids have
   no source word at all, and a track that collapsed on those two rows would
   push their inputs out of line with the rest — the very thing this is for. */
.ao-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 40px;
  align-items: center;
  margin-top: 4px;
  gap: 6px 10px;
}
.ao-row .jg-income-label { min-width: 0; }
/* The first of the two relic-tier battles, which are a different question from
   the seven challenge tiers above them: a rule, and room to see it. */
.ao-row--apart {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.ao-row input, .ao-row select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--mono); font-size: 14px; padding: 3px 7px; border-radius: 6px;
  width: 100%; min-width: 0;
}
/* The source word sits tight against its field — the row's gap would put it
   nearer the next label than the input it describes. */
.ao-row .ao-source { margin-left: -4px; }
.ao-row input:focus, .ao-row select:focus { outline: none; border-color: var(--gold); }
.ao-row input::placeholder { color: var(--text-muted); opacity: .55; }
/* A field the game filled: the blue the Farm Planner uses for something the
   tool worked out, rather than something you typed. */
.ao-row input.is-game, .ao-row select.is-game { border-color: var(--group-ships); }

.ao-source {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); opacity: .8; white-space: nowrap;
  flex: 0 0 auto; line-height: 1;
}
.ao-source--game { color: var(--group-ships); opacity: 1; }
/* Your own value in a field the game could fill: gold, the colour a pinned
   date gets on the Farm Planner for the same reason — it is yours, and the
   tool will not touch it. */
.ao-source--typed { color: var(--gold); opacity: 1; }

.ao-check { margin-top: 6px; font-family: var(--mono); font-size: 14px; color: var(--text-muted); }
.ao-check input { accent-color: var(--group-ships); }

/* ---- the picture ----
   A 9:5 box, everything inside placed in percentages of it and sized in
   container-query units, so it is the same picture at any width — and the
   same picture the export draws at 2700x1500. */

.ao-picture { min-width: 0; }
.ao-canvas {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 2700 / 1500;
  width: 100%;
  background: #001a33 center / cover no-repeat;
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ao-canvas h2, .ao-canvas h3 { margin: 0; font-weight: 800; }
.ao-canvas .ao-title {
  position: absolute; top: 1.6%; left: 0; right: 0;
  text-align: center; font-size: 2.6cqw; font-weight: 800; color: #fff;
}

/* The statistics panel: x 40..1115 of 2700, y 120..1202 of 1500. */
.ao-stats {
  position: absolute; left: 1.48%; top: 8%; width: 39.8%; height: 72.1%;
  background: rgba(10, 25, 50, .71); border: .07cqw solid #4c6a92; border-radius: .74cqw;
  padding: 1.1cqw 1.5cqw 0; box-sizing: border-box; overflow: hidden;
}
.ao-stats h3 { text-align: center; font-size: 1.48cqw; margin-bottom: 1cqw; }
.ao-stat-group { margin-bottom: 1.3cqw; }
.ao-stat-head {
  font-size: 1.1cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #9fb4ff; padding-bottom: .35cqw; margin-bottom: .5cqw;
  border-bottom: .07cqw solid rgba(159, 180, 255, .35);
}
.ao-stat-row { display: flex; font-size: 1.07cqw; line-height: 1.35; padding: .55cqw 0; }
.ao-stat-label { flex: 0 0 50%; }
.ao-stat-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ao-delta { font-size: .8cqw; margin-left: .3cqw; }
.ao-up { color: #00ff66; }
.ao-down { color: #ff4d4d; }

/* The currencies, under the panel. */
.ao-currencies {
  position: absolute; left: 1.48%; top: 81.5%; width: 39.8%; height: 14.5%;
  display: flex; align-items: flex-start;
}
.ao-currency {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4cqw;
  font-size: 1.07cqw; white-space: nowrap;
}
.ao-currency img { height: 4.6cqw; width: auto; max-width: 90%; object-fit: contain; }

/* The assault battles: x from 1155 (42.8%), 5 columns of 297 (11%), rows of 460 (30.7%). */
/* Ten half-width columns rather than five: the second row has four cards and
   sits half a cell to the right, which is exactly what the export does with
   its row_offset_x, and what ten columns give for free by starting the sixth
   card on column 2. */
.ao-battles {
  position: absolute; left: 42.8%; top: 8%; width: 55%; height: 61.3%;
  display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: 1fr 1fr;
}
.ao-battle { grid-column: span 2; }
.ao-battle:nth-child(6) { grid-column: 2 / span 2; }
.ao-battle {
  display: flex; flex-direction: column; align-items: center; min-width: 0;
  padding: .4cqw .3cqw 0;
}
.ao-battle-name { font-size: 1.04cqw; white-space: nowrap; margin-bottom: .3cqw; }
.ao-battle img { height: 9.9cqw; width: auto; max-width: 95%; object-fit: contain; }
.ao-bar {
  width: 60%; height: .67cqw; margin-top: .3cqw;
  background: #233447; border: .04cqw solid #fff; box-sizing: border-box;
}
.ao-bar-fill { height: 100%; background: #00ff66; }
.ao-tier { font-size: 1.48cqw; font-weight: 800; margin-top: .2cqw; }

/* The Galactic Legends, under the grid. */
.ao-legends {
  position: absolute; left: 45.7%; top: 72%; width: 49.8%; height: 24%;
  display: flex; align-items: center; justify-content: space-around; gap: 1cqw;
}
.ao-legend { max-height: 100%; max-width: 30%; object-fit: contain; border-radius: .3cqw; }