/*
  Profit calculator (/profit-calculator).

  Built on shell.css tokens throughout — no literal colours except the marketplace
  brand hues and the money-role set below, all of which are declared for light and
  dark. A hardcoded hex here would look fine in one theme and wrong in the other,
  which is the mistake this page most easily invites given how much colour it uses.
*/

:root {
  /* Money roles: colour encodes DIRECTION, so revenue, fee, cost and tax are
     distinguishable without reading the label. */
  --pc-rev:   #1b7a52;
  --pc-fee:   #b4522b;
  --pc-cogs:  #a5741b;
  --pc-ad:    #7c4a9e;
  --pc-tax:   #2a63a8;
  --pc-good:  #1b7a52;
  --pc-bad:   #a33528;
  --pc-good-bg: #e6f3ec;
  --pc-bad-bg:  #f8e9e7;
  /* Marketplace identity — same hues the label-process pills use. */
  --pc-meesho: #c2185b;
  --pc-flipkart: #1a63c4;
  --pc-amazon: #b8620a;
  --pc-snapdeal: #b32a2a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pc-rev:   #5fc294;
    --pc-fee:   #e0916a;
    --pc-cogs:  #d8ac54;
    --pc-ad:    #b98fd6;
    --pc-tax:   #7aa8e0;
    --pc-good:  #5fc294;
    --pc-bad:   #e07c6c;
    --pc-good-bg: #14291f;
    --pc-bad-bg:  #2f1a17;
    --pc-meesho: #f06292;
    --pc-flipkart: #6ba4ee;
    --pc-amazon: #e59a4d;
    --pc-snapdeal: #e8746e;
  }
}
:root[data-theme="dark"] {
  --pc-rev:   #5fc294;
  --pc-fee:   #e0916a;
  --pc-cogs:  #d8ac54;
  --pc-ad:    #b98fd6;
  --pc-tax:   #7aa8e0;
  --pc-good:  #5fc294;
  --pc-bad:   #e07c6c;
  --pc-good-bg: #14291f;
  --pc-bad-bg:  #2f1a17;
  --pc-meesho: #f06292;
  --pc-flipkart: #6ba4ee;
  --pc-amazon: #e59a4d;
  --pc-snapdeal: #e8746e;
}

/* ---------- toolbar: picker + hint + actions on one row ----------
   Reset and Copy sit at the right of the same row as the marketplace picker rather
   than in the page head, so the actions live next to what they act on and the page
   spends one row here instead of two. */
.pc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 18px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex: none; margin-left: auto; }
/* Takes the slack so the buttons are pushed to the right edge, and is the item that
   gives way first when the row runs out of room — the hint is the only thing here
   that can be re-read later, so it is the only thing allowed to wrap or shrink. */
.pc-hint { flex: 1 1 200px; min-width: 0; }
/* Measured: below about this width the pills, the hint and the two buttons stop
   fitting together, and it was the BUTTONS that wrapped — the row split exactly
   where it should not, since the picker and its actions are the pair that belong
   side by side. Dropping the hint onto its own line instead keeps that pair
   together all the way down to a phone. Same breakpoint the grid stacks at. */
@media (max-width: 1120px) {
  .pc-hint { flex: 1 1 100%; order: 3; }
}

/* ---------- marketplace pills ---------- */
.pc-markets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }

/*
  Real brand marks, each on its own light tile.

  The tile is not decoration. The Amazon and Meesho wordmarks are filled #000000, so
  on the dark theme they would sit black-on-near-black and disappear; Flipkart and
  Snapdeal are coloured and would have been fine, which is exactly how this ships
  looking correct to whoever built it in light mode. Giving every logo the same light
  ground keeps the brand colours untouched and the contrast identical in both themes,
  and is how these marks are meant to be reproduced anyway.
*/
.pc-pill {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 6px 10px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--panel-bg);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.pc-pill:hover { border-color: var(--mc); transform: translateY(-1px); }
.pc-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-pill.on { border-color: var(--mc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 18%, transparent); }

.pc-logo {
  display: grid; place-items: center; background: #fff; border-radius: 6px;
  padding: 6px 10px; min-width: 86px; height: 34px;
}
/* Each mark has its own aspect ratio, so height is what is held constant - matching
   widths would print one logo twice the visual weight of another. */
.pc-logo img { height: 17px; width: auto; max-width: 104px; display: block; }

/* Unselected marks step back so the chosen one reads as chosen; the tile stays white
   either way, so nothing changes contrast. */
.pc-pill:not(.on) .pc-logo { filter: grayscale(1); opacity: .62; }
.pc-pill:not(.on):hover .pc-logo { filter: grayscale(.35); opacity: .9; }

.mk-meesho { --mc: var(--pc-meesho); }
.mk-flipkart { --mc: var(--pc-flipkart); }
.mk-amazon { --mc: var(--pc-amazon); }
.mk-snapdeal { --mc: var(--pc-snapdeal); }
.pc-hint { font-size: 12.5px; color: var(--muted); }

/* ---------- layout ----------
   Two columns on wide screens: the form is a fixed comfortable width and the result
   takes the rest, because the result is what gets read repeatedly while only a few
   inputs change. */
.pc-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1120px) { .pc-grid { grid-template-columns: 1fr; } }

.pc-form { padding: 0; overflow: hidden; }
.pc-group { padding: 16px 18px; border-bottom: 1px solid var(--border-soft); }
.pc-group:last-child { border-bottom: none; }
.pc-group h3 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-ink); display: flex; align-items: center; gap: 8px;
}
.pc-group h3 i { font-size: 11px; opacity: .8; }

/* Two fields per row where there is room — the form is the tall part of this page,
   and halving its height keeps the result visible while you type. */
.pc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 560px) { .pc-fields { grid-template-columns: 1fr; } }
.pc-fld-wide { grid-column: 1 / -1; }
.pc-fld-wide input[type=number] { max-width: 180px; }

.pc-fld label {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12.5px; font-weight: 600; margin-bottom: 5px;
}
.pc-u {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.pc-fld input[type=number] {
  width: 100%; font: inherit; font-family: var(--font-mono); font-size: 13.5px; text-align: right;
  padding: 7px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--page-bg); color: var(--text);
}
.pc-fld input[type=number]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.pc-help { font-size: 11px; line-height: 1.45; color: var(--muted); margin: 4px 0 0; }

.pc-modes { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.pc-mode {
  font: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer; padding: 2px 8px;
  border: none; background: transparent; color: var(--muted);
}
.pc-mode:hover { color: var(--accent-ink); }
.pc-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pc-mode.on { background: var(--accent); color: #fff; }

.pc-check { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.pc-check input { width: 16px; height: 16px; flex: none; }

/* ---------- result ---------- */
.pc-result { display: flex; flex-direction: column; gap: 14px; }
.pc-block { padding: 16px 18px; }
.pc-block h3 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}

.pc-headline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start;
  padding: 18px 20px; border-left: 4px solid var(--pc-good);
}
.pc-headline.bad { border-left-color: var(--pc-bad); }
.pc-hl-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.pc-hl-label span { text-transform: none; letter-spacing: 0; color: var(--muted); opacity: .75; margin-left: 5px; }
.pc-hl-value {
  font-family: var(--font-mono); font-size: 34px; font-weight: 700; line-height: 1.12;
  font-variant-numeric: tabular-nums; color: var(--pc-good);
}
.pc-headline.bad .pc-hl-value, .pc-headline.bad .pc-hl-value2 { color: var(--pc-bad); }
.pc-hl-value2 {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--pc-good);
}
.pc-hl-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pc-hl-unit { text-align: right; padding-left: 20px; border-left: 1px solid var(--border-soft); }
@media (max-width: 560px) {
  .pc-headline { grid-template-columns: 1fr; gap: 14px; }
  .pc-hl-unit { text-align: left; padding-left: 0; padding-top: 14px; border-left: none; border-top: 1px solid var(--border-soft); }
}

.pc-bars { display: flex; height: 26px; border-radius: var(--radius-sm); overflow: hidden; background: var(--page-bg); }
.pc-bars span { display: block; height: 100%; }
.pc-barkey { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.pc-barkey .k { display: inline-flex; align-items: center; gap: 6px; }
.pc-barkey i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.pc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pc-table td { padding: 6px 0; border: none; vertical-align: top; }
.pc-table td span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.pc-table td.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-table td.neg { color: var(--pc-fee); }
.pc-table td.pos { color: var(--pc-tax); }
.pc-table tr.sep td { border-top: 1px solid var(--border-soft); padding-top: 10px; }
.pc-table tr.strong td { font-weight: 700; }

/* ---------- summary ---------- */
.pc-story { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 0 0 14px; font-size: 13px; }
.pc-story dt { font-weight: 700; color: var(--muted); white-space: nowrap; }
.pc-story dd { margin: 0; }
.pc-story dd b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pc-story .g { color: var(--pc-rev); }
.pc-story .f { color: var(--pc-fee); }
.pc-story .r { color: var(--pc-bad); }
.pc-verdict {
  padding: 12px 15px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5;
  background: var(--pc-good-bg); border-left: 3px solid var(--pc-good);
}
.pc-verdict.bad { background: var(--pc-bad-bg); border-left-color: var(--pc-bad); }
.pc-verdict b { font-family: var(--font-mono); }
.pc-summary h4 {
  margin: 16px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.pc-summary ul { margin: 0; padding-left: 18px; }
.pc-summary li { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-bottom: 6px; }
.pc-summary li b { color: var(--text); }
.pc-acts li { color: var(--text); }
.pc-acts li::marker { color: var(--accent-ink); }

.pc-foot { font-size: 12px; color: var(--muted); margin: 18px 0 0; max-width: 80ch; }

/* The "do these numbers match your settlement file?" prompt that used to be styled
   here is now the shared .fb-prompt component in feedback.css — it goes on a dozen
   pages, and a per-page copy of it would have been a second design within a day. */