/* Sell My Games - one stylesheet. Dark, built for a phone first, fine on a big screen. */

:root {
  --bg: #14171c;
  --panel: #1c2128;
  --panel-2: #232a33;
  --line: #313a46;
  --text: #e8edf4;
  --dim: #94a1b2;
  --accent: #f2a93b;      /* price / main action */
  --accent-ink: #2a1c05;
  --danger: #e0644f;
  --radius: 14px;
  --pad: 16px;
}

* { box-sizing: border-box; }

/* Anything the app marks as hidden stays hidden. Without this, every rule below that
   sets `display` quietly switches a hidden thing back on - which is how the red
   "empty this app's storage" banner ended up sitting on the page all the time. */
[hidden] { display: none !important; }

html, body { margin: 0; background: var(--bg); color: var(--text); }

body {
  font: 400 16px/1.45 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding-bottom: 48px;
}

/* ---- header ---- */

.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: var(--pad);
  background: linear-gradient(var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
}

.top h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.2px; }
.top h1 span { color: var(--accent); }
.top-actions { margin-left: auto; display: flex; gap: 8px; }

/* ---- buttons ---- */

button {
  font: inherit; font-weight: 600;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2); color: var(--text);
  cursor: pointer;
}
button:hover { border-color: #46525f; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
button.ghost { background: transparent; }
button.danger { background: transparent; color: var(--danger); border-color: #4a2a26; }
button.wide { width: 100%; }
button:disabled { opacity: .5; cursor: default; }

/* ---- shelf ---- */

main { padding: var(--pad); max-width: 820px; margin: 0 auto; }

.status, .empty { color: var(--dim); margin: 8px 0 16px; }
.status.bad { color: var(--danger); }

.shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.card {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
  padding: 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; text-align: left; width: 100%;
}
.card:hover { background: var(--panel-2); }
.card img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; background: var(--panel-2);
}
.card-name { font-weight: 700; }
.card-sub { color: var(--dim); font-size: 13px; margin-top: 2px; }
.card-price { font-weight: 800; font-size: 18px; color: var(--accent); white-space: nowrap; }
.card-price.none { color: var(--dim); font-weight: 600; font-size: 14px; }

/* ---- dialogs ---- */

.sheet {
  width: min(560px, 100%);
  max-height: 90dvh;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--text);
  display: flex; flex-direction: column;
}
.sheet::backdrop { background: rgba(0, 0, 0, .6); }
.sheet[open] { animation: pop .14s ease-out; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }

.sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--pad); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel);
}
.sheet-head h2 { margin: 0; font-size: 17px; flex: 1; }
.sheet-head button { padding: 6px 10px; }

.sheet-body { padding: var(--pad); overflow: auto; display: grid; gap: 14px; }

.sheet-foot {
  display: flex; gap: 10px; justify-content: space-between;
  padding: 12px var(--pad); border-top: 1px solid var(--line);
}

/* ---- form bits ---- */

.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field legend { font-size: 13px; color: var(--dim); font-weight: 600; padding: 0; }

input, select, textarea {
  font: inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea { resize: vertical; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.money { display: flex; align-items: center; gap: 8px; }
.money .cur { font-size: 20px; font-weight: 800; color: var(--accent); }

.hint { color: var(--dim); font-size: 13px; margin: 0; }
.hint a { color: var(--accent); }

.filebtn { display: inline-block; }
.filebtn input { display: none; }
.filebtn span {
  display: inline-block; padding: 10px 14px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer;
}
.filebtn span:hover { border-color: #46525f; }

/* ---- the picture in the editor ---- */

.pic-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.pic {
  width: 120px; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; background: var(--panel-2);
}
.pic-actions { display: grid; gap: 8px; justify-items: start; }

/* ---- search results ---- */

.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.results button {
  width: 100%; text-align: left; font-weight: 400;
  background: var(--panel-2); padding: 10px 12px;
}
.results .r-name { font-weight: 700; }
.results .r-desc { color: var(--dim); font-size: 13px; }

.fallback summary { color: var(--dim); font-size: 14px; cursor: pointer; }
.fallback { display: grid; gap: 10px; }

/* ---- expansion checklist ---- */

/* One column that is allowed to be narrower than its contents. Without the minmax a
   grid column sizes itself to the longest game name, and a long one pushes the row off
   the side of a phone screen. */
.exp {
  list-style: none; margin: 0; padding: 0;
  max-height: 220px; overflow: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
}
.exp > li { min-width: 0; }
.exp label { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.exp label:hover { background: var(--panel-2); }
.exp input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.exp .y { color: var(--dim); font-size: 13px; }

@media (max-width: 460px) {
  .two { grid-template-columns: 1fr; }
  .pic-row { grid-template-columns: 96px 1fr; }
  .pic { width: 96px; }
}

/* A dialog is hidden until it is opened. Our own display:flex above would otherwise
   override the browser's built-in hiding and show all three panels at once. */
.sheet:not([open]) { display: none; }

/* The name and the little grey line under it are two separate lines, not one run of text. */
.card-name, .card-sub { display: block; }

/* Windows' default interface font draws the shekel sign much smaller than the digits
   beside it. Arial draws both at the same size. */
.card-price, .money .cur { font-family: Arial, Helvetica, sans-serif; }

/* ---- the post screen ---- */

.wide-sheet { width: min(680px, 100%); }

.exp.tall { max-height: 260px; }

.field.check { flex-direction: row; display: flex; align-items: center; gap: 10px; align-self: end; padding-bottom: 10px; }
.field.check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.field.check span { font-size: 15px; color: var(--text); font-weight: 400; }

/* The finished text. Right-aligned because the body is Hebrew, and in a plain
   typeface so what you see here is what lands in WhatsApp. */
.out {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background: #11151a;
  white-space: pre-wrap;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px;
  min-height: 140px; max-height: 320px; overflow: auto;
  user-select: text;
}
/* The one line a buyer must not miss: the game is not in English. The copied text is
   plain and carries no colour, so this red lives in the app and on the picture. */
.out .warn { color: var(--danger); font-weight: 700; }

/* Kept for the older way of copying, which needs real selectable text. */
.offscreen { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

.pick-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex: none; }
.exp label .grow { flex: 1; }

/* A link that should read as a button - "Look it up on BGG" leaves the app. */
.btnlink {
  display: block; text-align: center; text-decoration: none;
  font-weight: 600; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--text);
}
.btnlink:hover { border-color: #46525f; }

/* Shown only when the app cannot reach its own saved data - the one fault that
   otherwise makes every button look dead. */
.trouble {
  display: grid; gap: 10px; justify-items: start;
  padding: 14px; margin-bottom: 16px;
  border: 1px solid #5a2f28; border-radius: var(--radius);
  background: #241a18;
}
.trouble p { margin: 0; color: var(--danger); }

/* Two choices side by side, drawn as one control. */
.seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg label { flex: 1; cursor: pointer; }
.seg input { display: none; }
.seg span {
  display: block; text-align: center; padding: 10px 12px;
  font-size: 14px; font-weight: 600; color: var(--dim); background: var(--panel-2);
}
.seg label + label span { border-left: 1px solid var(--line); }
.seg input:checked + span { background: var(--accent); color: var(--accent-ink); }

/* ---- the picture ---- */

.pic-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tick { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.tick input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }

/* Shown small, saved full size. No fixed shape: the picture is as wide or as tall as
   the games in it, so the preview has to follow whatever shape the canvas took. */
.picout {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 380px;
  margin: 2px auto 4px;
  border: 1px solid var(--line); border-radius: 12px; background: #11151a;
}

/* Three ways out of the picture, side by side. */
.row { display: flex; gap: 8px; }
.row button { flex: 1; white-space: nowrap; }

/* ---- ticking games on the shelf ---- */

/* A row is a tick box and the game's card side by side. The card is still the whole
   button that opens the game for editing; the tick only chooses it for a post. */
.shelf-row { display: flex; align-items: center; gap: 10px; }
.shelf-row .card { flex: 1; min-width: 0; }
.tickbox { display: flex; align-items: center; padding: 6px; cursor: pointer; }
.tickbox input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); cursor: pointer; }
.shelf-row.picked .card { border-color: var(--accent); background: var(--panel-2); }

/* How many are ticked, and the quickest way on to the post. Addressed by its id, not
   by a class: a ticked shelf row carries the class "picked" too. */
#picked {
  position: sticky; top: 68px; z-index: 4;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: #241f14;
}
#picked span { flex: 1; font-weight: 600; font-family: Arial, Helvetica, sans-serif; }
#picked button { padding: 8px 12px; }

/* Sold games, kept rather than thrown away. */
.sold-head {
  font-size: 13px; font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 26px 0 10px;
}
.shelf-row.is-sold { opacity: .55; }
.shelf-row.is-sold .card-price { color: var(--dim); text-decoration: line-through; }

/* Three buttons do not fit on one line on a phone. */
.sheet-foot { flex-wrap: wrap; }

/* A game in the post list: the tick, and a way straight into its editor. */
.pick-row { display: flex; align-items: center; gap: 6px; }
.pick-row > label { flex: 1; min-width: 0; }
/* A flex item will not shrink below its own text unless it is told it may, which is
   what pushed the Edit button off the side of a phone screen. */
.pick-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row .y { flex: none; }
#post-pick { overflow-x: hidden; }
button.tiny { padding: 5px 10px; font-size: 13px; font-weight: 600; }

/* ---- where to post it ---- */

/* The single column is told to be 1fr and the rows are told they may shrink. Without
   BOTH, a grid column sizes itself to its widest content and a long group name makes
   the whole sheet wider than the phone, carrying the buttons off the right edge. This
   is the third place in this app that trap has appeared - see .exp above. */
.places {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
}
.places > li { min-width: 0; }
.place {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
}
.place .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place a, .place button { flex: none; }
/* Posted already: still readable, clearly behind you. */
.place.done { border-color: var(--accent); }
.place.done .grow { color: var(--dim); }

/* The counter line takes the width; the small button next to it keeps its own size. */
.row .grow { flex: 1; min-width: 0; align-self: center; }
.row .tiny { flex: none; }

/* On a phone the buttons eat the whole row and the name is clipped to three letters,
   which defeats the point of a list you read down while posting. Give the name the
   first line to itself and let the buttons sit underneath it, over on the right. */
@media (max-width: 460px) {
  .place { flex-wrap: wrap; row-gap: 6px; }
  .place .grow { flex: 1 1 120px; }
  .place > a, .place > button { margin-left: auto; }
  .place > a + button { margin-left: 0; }
}

/* On a phone three buttons do not fit on one line, and the main one should not end up
   stranded on the left of a second row. Give it the whole row. */
@media (max-width: 460px) {
  .sheet-foot { gap: 8px; }
  .sheet-foot .primary { flex: 1 1 100%; }
}