/* The Crystal Planner's own rules. The page borrows everything else: the Farm Planner's
   header and ally-code bar (journey-guide.css, farming.css) and the Account Overview's form
   — its two-column layout, field rows and source marks (account-overview.css) — so the two
   pages that work out crystals look like the same tool. What is here is the answer panel. */

/* Income above expenditure, in the column beside the form. */
.cp-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.cp-result {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 18px 20px 16px; min-width: 0;
}

/* The figure the page exists to give, first and largest. */
.cp-headline {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border-soft);
}
.cp-k {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--label);
}
.cp-v {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 46px; font-weight: 800; line-height: 1.1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.cp-v img { width: 34px; height: 34px; object-fit: contain; }

.cp-sub { font-family: var(--mono); font-size: 14px; color: var(--text-muted); }
.cp-sub b { color: var(--text); font-weight: 700; }

/* Where they come from, behind a collapsible: the figure above is the answer, this is the
   working, and it is there when wanted rather than in the way when not. The summary is drawn
   the way the site's other collapsibles are — mono, uppercase, a caret that turns. */
.cp-breakdown { margin-top: 10px; }
.cp-breakdown > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); padding: 4px 0;
}
.cp-breakdown > summary::-webkit-details-marker { display: none; }
.cp-breakdown > summary::before {
  content: "\25B8"; display: inline-block; transition: transform 0.15s ease;
}
.cp-breakdown[open] > summary::before { transform: rotate(90deg); }
.cp-breakdown > summary:hover { color: var(--text); }
.cp-breakdown[open] > .cp-table { margin-top: 6px; }

/* Where they come from: one row per source, its working, and what it is worth a day. */
.cp-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 14px; }
.cp-table th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--label); font-weight: 600; padding: 10px 8px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.cp-table td { padding: 8px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.cp-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-table td.n { color: var(--gold); font-weight: 700; }
.cp-from { color: var(--text-muted); font-size: 13px; }
/* A source the form says nothing about still has a row — it is the answer to "why is this
   lower than I expected?" — but it reads as absent rather than as a zero someone earned. */
.cp-zero td { opacity: 0.6; }
.cp-zero td.n { color: var(--text-muted); }
.cp-blank { font-style: italic; }
/* A figure with working behind it: underlined like a link would be, without being one, and
   focusable so the tooltip reaches a keyboard as well as a mouse. */
.cp-explain {
  cursor: help; text-decoration: underline dotted; text-underline-offset: 3px;
  text-decoration-color: var(--text-muted);
}
.cp-explain:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.cp-table tfoot td {
  border-bottom: 0; border-top: 1px solid var(--border-soft);
  font-weight: 800; padding-top: 10px;
}
.cp-table tfoot td.n { font-size: 16px; }

/* The expenditure's choices: one tile per energy across the panel — icon and name on top,
   how many refreshes a day below, and what they cost under that. */
/* The energies' heading sits under the panel's headline, like the sections below it. */
.cp-sub-title { margin-top: 14px; }
.cp-energies {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
}
.cp-energy {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 10px 6px; border: 1px solid var(--border-soft); border-radius: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--text);
}
.cp-energy img { width: 40px; height: 40px; object-fit: contain; }
.cp-energy-name { line-height: 1.25; }
.cp-energy 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%; max-width: 5.5em;
}
.cp-energy select:focus { outline: none; border-color: var(--gold); }
.cp-energy-cost { font-size: 12px; color: var(--text-muted); }
.cp-energy-cost .cp-explain { color: var(--gold); font-weight: 700; font-size: 14px; }
/* An energy left at 0 reads as unused, but its dropdown stays fully legible to change. */
.cp-energy.cp-zero > img, .cp-energy.cp-zero > .cp-energy-name { opacity: 0.6; }
/* Conquest's marker: counted at half, with the reason in its tooltip. */
.cp-energy-cost .cp-half { color: var(--gold); font-size: 14px; font-weight: 700; margin-right: 1px; }

/* Era Marquee Strategy: under the energies, a line above it — the journey's portrait beside
   its choices, the future eras' targets when counted, and the daily average. */
.cp-mq { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.cp-mq-title {
  margin: 0 0 10px; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--label);
}
/* A foldable section's heading: a caret that turns, as on the Breakdown. */
.cp-fold > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
}
.cp-fold > summary::-webkit-details-marker { display: none; }
.cp-fold > summary::before {
  content: "\25B8"; display: inline-block; transition: transform 0.15s ease;
}
.cp-fold[open] > summary::before { transform: rotate(90deg); }
.cp-fold:not([open]) > summary { margin-bottom: 0; }
.cp-fold > summary:hover { color: var(--text); }
.cp-mq-controls { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.cp-mq-field {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--text);
}
.cp-mq-field 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;
}
.cp-mq-field select:focus { outline: none; border-color: var(--gold); }
.cp-mq-head { display: flex; align-items: center; gap: 14px; }
.cp-mq-journey {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid var(--border-soft);
}
.cp-mq-toggle input { accent-color: var(--gold); width: 15px; height: 15px; margin: 0; cursor: pointer; }
/* This era marquee by marquee: one tile each, portrait, name, its stars and their cost. */
.cp-mq-marquees {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px; margin-top: 12px;
}
.cp-mq-marquee {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 10px 6px; border: 1px solid var(--border-soft); border-radius: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--text);
}
.cp-mq-marquee img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cp-mq-marquee select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--mono); font-size: 13px; padding: 2px 5px; border-radius: 6px; max-width: 100%;
}
.cp-mq-cost { font-size: 14px; color: var(--gold); font-weight: 700; }
.cp-mq-marquee.cp-zero > img, .cp-mq-marquee.cp-zero > .cp-mq-name { opacity: 0.6; }
.cp-mq-marquee.cp-zero .cp-mq-cost { color: var(--text-muted); font-weight: 400; }
.cp-mq-field select:disabled { opacity: 0.5; cursor: not-allowed; }
/* The future eras' targets, set in a little from the choices above them. */
.cp-mq-future {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px;
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px;
}
.cp-mq-sum { margin: 12px 0 0; font-family: var(--mono); font-size: 13px; color: var(--text-muted); }
.cp-mq-sum b { color: var(--gold); }


/* Crystal Packs: one line per pack bought — its picture, the search, how many, per what,
   and what that comes to a day — and a button for another line. */
.cp-pack-lines { display: flex; flex-direction: column; gap: 8px; }
.cp-pack-line {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto auto 28px;
  align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border-soft); border-radius: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--text);
}
/* The store's card for the pack, whole: tall, so the line is as tall as the card. */
.cp-pack-line img, .cp-pack-blank { width: 72px; height: auto; border-radius: 6px; display: block; }
.cp-pack-blank { aspect-ratio: 144 / 237; }
.cp-pack-blank { border: 1px dashed var(--border); border-radius: 6px; }
.cp-pack-pick { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-pack-line input, .cp-pack-line select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--mono); font-size: 13px; padding: 3px 7px; border-radius: 6px; min-width: 0;
}
.cp-pack-line input:focus, .cp-pack-line select:focus { outline: none; border-color: var(--gold); }
.cp-pack-pick input { width: 100%; }
.cp-pack-price { font-size: 11.5px; color: var(--text-muted); }
.cp-pack-qty, .cp-pack-per { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.cp-pack-qty input { width: 4.5em; }
.cp-pack-cost { font-size: 12px; color: var(--text-muted); white-space: nowrap; text-align: right; }
.cp-pack-cost .cp-explain { color: var(--gold); font-weight: 700; font-size: 14px; }
.cp-pack-line.cp-zero > .cp-pack-blank { opacity: 0.6; }
.cp-pack-remove, .cp-pack-add {
  background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer;
  font-family: var(--mono); border-radius: 6px;
}
.cp-pack-remove { width: 28px; height: 28px; font-size: 16px; line-height: 1; }
.cp-pack-add { margin-top: 10px; padding: 5px 12px; font-size: 13px; }
.cp-pack-remove:hover, .cp-pack-add:hover { color: var(--text); border-color: var(--gold); }
/* Narrow: the search takes its own row, the rest wrap beneath it. */
@media (max-width: 720px) {
  .cp-pack-line { grid-template-columns: 72px minmax(0, 1fr) 28px; }
  .cp-pack-line > img, .cp-pack-line > .cp-pack-blank { grid-row: span 4; align-self: start; }
  .cp-pack-qty, .cp-pack-per, .cp-pack-cost { grid-column: 2 / 3; }
}

/* Net Crystal Income: the difference first, then the two numbers it is, then its options
   and, when asked for, the projection. Green when crystals are gained, red when they are
   lost — and always with its sign, so the colour is never the only thing saying which. */
.cp-v-unit { font-size: 15px; font-weight: 600; color: var(--text-muted); margin-left: 4px; align-self: flex-end; padding-bottom: 8px; }
.cp-v--short { color: #E4695C; }
.cp-v--gain { color: #4ade80; }
.cp-short { color: #E4695C; }
.cp-net-options { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.cp-net-opt {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--text);
}
.cp-net-opt input[type="checkbox"] { accent-color: var(--gold); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.cp-net-opt input[type="number"] {
  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: 9em;
}
.cp-net-opt input[type="number"]:focus { outline: none; border-color: var(--gold); }

/* The projection: one gold line on recessive hairline gridlines, a crosshair on hover. */
.cp-chart { position: relative; margin: 14px 0 0; }
.cp-chart-cap {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--label); margin-bottom: 6px;
}
.cp-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cp-grid { stroke: var(--border-soft); stroke-width: 1; }
.cp-grid--zero { stroke: var(--border); }
.cp-axis { fill: var(--text-muted); font-family: var(--mono); font-size: 11px; }
.cp-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cp-end { fill: var(--gold); stroke: var(--surface-2); stroke-width: 2; }
.cp-crosshair { stroke: var(--text-muted); stroke-width: 1; }
.cp-hover-dot { fill: var(--gold); stroke: var(--surface-2); stroke-width: 2; }
.cp-hover[hidden] { display: none; }
.cp-hit { fill: transparent; cursor: crosshair; }
.cp-hit:focus { outline: none; }
.cp-hit:focus-visible { stroke: var(--gold); stroke-width: 1; }
.cp-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 9px; font-family: var(--mono); white-space: nowrap;
}
.cp-tip[hidden] { display: none; }
.cp-tip-v { color: var(--text); font-size: 14px; }
.cp-tip-k { color: var(--text-muted); font-size: 11px; }
.cp-chart-sum { margin: 8px 0 0; font-family: var(--mono); font-size: 13px; color: var(--text-muted); }
.cp-chart-sum b { color: var(--text); }
.cp-chart-sum b.cp-short { color: #E4695C; }

@media (max-width: 560px) {
  .cp-v { font-size: 38px; }
  .cp-from { font-size: 12px; }
}