/* steamcommunity.report - CS2 match-sync wizard (settings.js, #set-match card
   inside the "Privacy & data" modal) + its paused / success / sign-in states.
   "Classic Steam client" look: bevelled olive panels, sunken wells, raised
   buttons, Tahoma/Verdana, square corners only. Every palette token carries a
   literal fallback because not every page defines the classic tokens.
   Everything is scoped under .sync-ui (added to the card and the sign-in block)
   so page-level rules such as `.home-classic a` can't recolour the buttons.
   No emoji. */

/* ---- card-level bits ------------------------------------------------------ */
.sync-card .set-card__h:focus { outline: none; }
.sync-card--flash { animation: sync-flash 1.4s ease-out 1; }
@keyframes sync-flash {
  0%   { box-shadow: 0 0 0 2px #C4B550; }
  100% { box-shadow: 0 0 0 2px rgba(196, 181, 80, 0); }
}

.sync-ui .sync,
.sync-ui .sync-paused,
.sync-ui .sync-done,
.sync-ui.sync-signin {
  font-family: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  font-size: 13px; line-height: 1.5;
  color: var(--tx, #D8DED3);
}
.sync-ui .sync *, .sync-ui .sync *::before, .sync-ui .sync *::after { box-sizing: border-box; min-width: 0; }
.sync-ui .sync b, .sync-ui .sync-paused b, .sync-ui .sync-done b { color: var(--tx-hi, #F2F5EE); }
.sync-ui .sync a:not(.sync-btn) { color: var(--gold-hi, #D6C866); }

/* ---- raised wizard panel ---------------------------------------------------- */
.sync-ui .sync {
  margin: 4px 0 14px; padding: 12px 14px 10px;
  background: var(--win-dk, #3E4637);
  border: 1px solid; border-radius: 0;
  border-color: var(--hi, #8C9284) var(--lo, #282E22) var(--lo, #282E22) var(--hi, #8C9284);
}
.sync-ui .sync__why { margin: 0 0 8px; }
.sync-ui .sync__safe {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 4px; padding: 7px 10px;
  background: var(--well, #22271C);
  border: 1px solid; border-radius: 0;
  border-color: var(--lo, #282E22) var(--hi, #8C9284) var(--hi, #8C9284) var(--lo, #282E22);
  color: var(--tx-2, #B7C0AC); font-size: 12px;
}
.sync-ui .sync-ico-lock { flex: none; margin-top: 2px; color: #9fdba0; }

/* ---- numbered steps --------------------------------------------------------- */
.sync-ui .sync-steps { list-style: none; margin: 0; padding: 0; }
.sync-ui .sync-step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px;
  padding: 12px 0;
}
/* etched separator between steps (dark line + light line under it) */
.sync-ui .sync-step + .sync-step {
  border-top: 1px solid var(--lo, #282E22);
  box-shadow: inset 0 1px 0 var(--etch, #66705B);
}
.sync-ui .sync-step__num {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-top: 1px;
  font: bold 12px Verdana, Tahoma, Geneva, sans-serif;
  color: var(--gold-hi, #D6C866);
  background: var(--win, #4C5844);
  border: 1px solid; border-radius: 0;
  border-color: var(--hi, #8C9284) var(--lo, #282E22) var(--lo, #282E22) var(--hi, #8C9284);
}
.sync-ui .sync-step.is-done .sync-step__num {
  color: #1d2016; background: #9fdba0;
  border-color: #d4f2d4 #4d7a4e #4d7a4e #d4f2d4;
}
.sync-ui .sync-step__h {
  margin: 3px 0 8px; font-size: 13px; font-weight: bold;
  color: var(--tx-hi, #F2F5EE); letter-spacing: 0;
}
.sync-ui .sync-step__h label { cursor: pointer; }
.sync-ui .sync-step__d { margin: 7px 0 0; font-size: 12px; color: var(--tx-2, #B7C0AC); }
.sync-ui .sync-step__d--top { margin: 0 0 8px; }

/* ---- buttons ---------------------------------------------------------------- */
.sync-ui .sync-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 6px 16px; max-width: 100%;
  font: bold 13px Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  text-align: center; text-decoration: none; white-space: normal;
  cursor: pointer; border-radius: 0;
  color: var(--tx-hi, #F2F5EE);
  background: var(--win, #4C5844);
  border: 1px solid;
  border-color: var(--hi, #8C9284) var(--lo, #282E22) var(--lo, #282E22) var(--hi, #8C9284);
  box-shadow: 0 0 0 1px var(--edge, #171B13);
}
.sync-ui .sync-btn:hover { background: #56634d; color: var(--tx-hi, #F2F5EE); text-decoration: none; }
.sync-ui .sync-btn:active {
  border-color: var(--lo, #282E22) var(--hi, #8C9284) var(--hi, #8C9284) var(--lo, #282E22);
}
.sync-ui .sync-btn:focus-visible { outline: 1px dotted currentColor; outline-offset: -5px; }
.sync-ui .sync-btn--big { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.sync-ui .sync-ico-ext { flex: none; }

.sync-ui .sync-btn--primary {
  color: #1d2016; background: #C4B550;
  border-color: #E6DC96 #6E6524 #6E6524 #E6DC96;
}
.sync-ui .sync-btn--primary:hover { color: #1d2016; background: #D6C866; }
.sync-ui .sync-btn--primary:active { border-color: #6E6524 #E6DC96 #E6DC96 #6E6524; }
.sync-ui .sync-btn:disabled,
.sync-ui .sync-btn:disabled:hover {
  cursor: not-allowed; color: #8f9585; background: #555b49;
  border-color: #767c6b #3a3f31 #3a3f31 #767c6b;
}
.sync-ui .sync-btn[aria-busy="true"] { cursor: progress; }

/* text-style toggle ("Type them manually instead") */
.sync-ui .sync-link {
  display: inline-block; min-height: 28px; margin: 8px 0 0; padding: 4px 0;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  font: 12px Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  color: var(--gold-hi, #D6C866); text-decoration: underline;
}
.sync-ui .sync-link:hover { color: #E6DC96; }
.sync-ui .sync-link:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }

/* ---- paste box + manual fields (sunken wells) ------------------------------- */
.sync-ui .sync-paste,
.sync-ui .sync-input {
  display: block; width: 100%; margin: 0;
  padding: 7px 9px; border-radius: 0;
  font: 12px "Lucida Console", Consolas, "Courier New", monospace;
  color: var(--tx-hi, #F2F5EE);
  background: var(--well, #22271C);
  border: 1px solid;
  border-color: var(--lo, #282E22) var(--hi, #8C9284) var(--hi, #8C9284) var(--lo, #282E22);
  box-shadow: inset 1px 1px 0 #000;
}
.sync-ui .sync-paste { min-height: 64px; resize: vertical; }
.sync-ui .sync-input { min-height: 34px; }
.sync-ui .sync-paste::placeholder,
.sync-ui .sync-input::placeholder { color: var(--tx-3, #A0AA95); opacity: .8; }
.sync-ui .sync-paste:focus,
.sync-ui .sync-input:focus { outline: 1px solid #C4B550; outline-offset: 0; }
.sync-ui .sync-input.is-ok { color: #9fdba0; }
.sync-ui .sync-input.is-bad { outline: 1px solid #e6796a; outline-offset: 0; }
.sync-ui .sync-paste-hint { margin: 6px 0 0; font-size: 12px; color: #e6c46a; }

.sync-ui .sync-manual { margin: 6px 0 0; display: grid; gap: 8px; }
.sync-ui .sync-manual[hidden] { display: none; }
.sync-ui .sync-field { display: block; }
.sync-ui .sync-field__l { display: block; margin: 0 0 3px; font-size: 12px; color: var(--tx-2, #B7C0AC); }

/* ---- detected chips --------------------------------------------------------- */
.sync-ui .sync-chips { display: grid; gap: 4px; margin: 8px 0 0; }
/* two rows: [tick] label ........ STATE / code value under the label */
.sync-ui .sync-chip {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto;
  grid-template-areas: "ico label state" ". val val";
  align-items: center; column-gap: 8px; row-gap: 2px;
  min-height: 36px; padding: 5px 9px;
  background: var(--well, #22271C);
  border: 1px solid; border-radius: 0;
  border-color: var(--lo, #282E22) var(--hi, #8C9284) var(--hi, #8C9284) var(--lo, #282E22);
  font-size: 12px;
}
.sync-ui .sync-chip__l { grid-area: label; color: var(--tx-2, #B7C0AC); }
.sync-ui .sync-chip__v {
  grid-area: val;
  font: 12px "Lucida Console", Consolas, "Courier New", monospace;
  color: var(--tx-3, #A0AA95); overflow-wrap: anywhere; word-break: break-all;
}
.sync-ui .sync-chip__s {
  grid-area: state;
  font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tx-3, #A0AA95);
}
/* status square: grey sunken box (pending), green with a drawn tick (ok), red (err) */
.sync-ui .sync-chip__ico {
  grid-area: ico;
  position: relative; width: 14px; height: 14px;
  background: #2c3226; border: 1px solid; border-radius: 0;
  border-color: var(--lo, #282E22) var(--hi, #8C9284) var(--hi, #8C9284) var(--lo, #282E22);
}
.sync-ui .sync-chip.is-ok .sync-chip__ico { background: #9fdba0; border-color: #d4f2d4 #4d7a4e #4d7a4e #d4f2d4; }
.sync-ui .sync-chip.is-ok .sync-chip__ico::after,
.sync-ui .sync-tick::after {
  content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px;
  border: solid #1d2016; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sync-ui .sync-chip.is-ok .sync-chip__v { color: #9fdba0; }
.sync-ui .sync-chip.is-ok .sync-chip__s { color: #9fdba0; }
.sync-ui .sync-chip.is-err { box-shadow: inset 3px 0 0 #e6796a; }
.sync-ui .sync-chip.is-err .sync-chip__ico { background: #e6796a; border-color: #f4b3a9 #7e3a30 #7e3a30 #f4b3a9; }
.sync-ui .sync-chip.is-err .sync-chip__v,
.sync-ui .sync-chip.is-err .sync-chip__s { color: #e6796a; }

/* ---- submit area ------------------------------------------------------------ */
.sync-ui .sync-ready { margin: 7px 0 0; font-size: 12px; color: var(--tx-3, #A0AA95); }
.sync-ui .sync-alert {
  margin: 8px 0 0; padding: 7px 10px;
  background: #2a1a16; color: #e6796a; font-size: 12px;
  border: 1px solid; border-radius: 0;
  border-color: #3a1f1a #8a4b40 #8a4b40 #3a1f1a;
  box-shadow: inset 3px 0 0 #e6796a;
}
.sync-ui .sync-alert[hidden] { display: none; }
/* classic block-marching progress bar under the busy button */
.sync-ui .sync-progress {
  position: relative; overflow: hidden;
  width: 220px; max-width: 100%; height: 12px; margin: 8px 0 0; padding: 1px;
  background: var(--well, #22271C);
  border: 1px solid; border-radius: 0;
  border-color: var(--lo, #282E22) var(--hi, #8C9284) var(--hi, #8C9284) var(--lo, #282E22);
}
.sync-ui .sync-progress[hidden] { display: none; }
.sync-ui .sync-progress span {
  position: absolute; top: 1px; bottom: 1px; left: -40%; width: 40%;
  background: repeating-linear-gradient(90deg, #C4B550 0 8px, transparent 8px 10px);
  animation: sync-march 1.1s linear infinite;
}
@keyframes sync-march { from { left: -40%; } to { left: 100%; } }

/* ---- FAQ ---------------------------------------------------------------------- */
.sync-ui .sync-faq {
  margin: 4px 0 2px; border-top: 1px solid var(--lo, #282E22);
  box-shadow: inset 0 1px 0 var(--etch, #66705B);
}
.sync-ui .sync-faq__sum {
  display: flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 0 0; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: bold; color: var(--gold-hi, #D6C866);
}
.sync-ui .sync-faq__sum::-webkit-details-marker { display: none; }
.sync-ui .sync-faq__sum::before {
  content: "+"; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  font: bold 11px/1 Verdana, Tahoma, sans-serif; color: var(--tx-hi, #F2F5EE);
  background: var(--win, #4C5844); border: 1px solid;
  border-color: var(--hi, #8C9284) var(--lo, #282E22) var(--lo, #282E22) var(--hi, #8C9284);
}
.sync-ui .sync-faq[open] > .sync-faq__sum::before { content: "-"; }
.sync-ui .sync-faq__sum:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }
.sync-ui .sync-faq__list {
  margin: 4px 0 6px; padding: 8px 10px;
  background: var(--well, #22271C);
  border: 1px solid; border-radius: 0;
  border-color: var(--lo, #282E22) var(--hi, #8C9284) var(--hi, #8C9284) var(--lo, #282E22);
}
.sync-ui .sync-faq__list dt { margin: 0; font-size: 12px; font-weight: bold; color: var(--tx-hi, #F2F5EE); }
.sync-ui .sync-faq__list dd { margin: 2px 0 9px; font-size: 12px; color: var(--tx-2, #B7C0AC); }
.sync-ui .sync-faq__list dd:last-child { margin-bottom: 0; }

/* ---- paused + success banners -------------------------------------------------- */
.sync-ui .sync-paused,
.sync-ui .sync-done {
  margin: 4px 0 10px; padding: 9px 12px;
  background: var(--well, #22271C);
  border: 1px solid; border-radius: 0;
  border-color: var(--lo, #282E22) var(--hi, #8C9284) var(--hi, #8C9284) var(--lo, #282E22);
}
.sync-ui .sync-paused { box-shadow: inset 3px 0 0 #e6c46a; }
.sync-ui .sync-done   { box-shadow: inset 3px 0 0 #9fdba0; }
.sync-ui .sync-done:focus { outline: none; }
.sync-ui .sync-paused__h,
.sync-ui .sync-done__h {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 4px; font-size: 13px; font-weight: bold;
}
.sync-ui .sync-paused__h { color: #e6c46a; }
.sync-ui .sync-done__h   { color: #9fdba0; }
.sync-ui .sync-paused__d,
.sync-ui .sync-done__d { margin: 0 0 4px; font-size: 12px; color: var(--tx-2, #B7C0AC); }
.sync-ui .sync-paused__d:last-child,
.sync-ui .sync-done__d:last-child { margin-bottom: 0; }
.sync-ui .sync-tick {
  position: relative; flex: none; width: 14px; height: 14px;
  background: #9fdba0; border: 1px solid; border-color: #d4f2d4 #4d7a4e #4d7a4e #d4f2d4;
}

/* ---- signed-out prompt ---------------------------------------------------------- */
.sync-ui.sync-signin { margin: 8px 0 4px; }

/* ---- phones ------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* give the settings modal more room on small screens */
  #settings-modal { padding: 8px; }
  #settings-modal .legal-modal__panel { padding: 0; max-height: 92vh; }   /* padding lives on the body; the title band spans the window */
  #settings-modal .set-card { padding: 12px 10px; }

  .sync-ui .sync { padding: 10px 10px 8px; }
  .sync-ui .sync-step { grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; }
  .sync-ui .sync-step__num { width: 22px; height: 22px; }
  .sync-ui .sync-btn { display: flex; width: 100%; min-height: 40px; }
  .sync-ui .sync-link { min-height: 36px; }
  /* 16px stops iOS from zooming the page when a field is focused */
  .sync-ui .sync-paste,
  .sync-ui .sync-input { font-size: 16px; min-height: 40px; }
  .sync-ui .sync-paste { min-height: 72px; }
  .sync-ui .sync-chip { grid-template-areas: "ico label state" "val val val"; row-gap: 3px; }
  .sync-ui .sync-progress { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sync-card--flash, .sync-ui .sync-progress span { animation: none; }
  .sync-ui .sync-progress span { left: 0; width: 100%; opacity: .6; }
}

/* Profile empty state: the gold "Sync my matches" call to action (mystats.js emptyBody). */
.ms-empty__cta{ margin:10px 0 4px; }
.ms-sync-cta{ height:30px; padding:0 18px; cursor:pointer; border-radius:0; font:700 13px var(--ui, Tahoma, Verdana, sans-serif);
  background:#C4B550; color:#1d2016; border:1px solid; border-color:#E6DC96 #6E6524 #6E6524 #E6DC96; box-shadow:0 0 0 1px var(--edge, #171B13); }
.ms-sync-cta:hover{ background:#D6C866; }
.ms-sync-cta:active{ border-color:#6E6524 #E6DC96 #E6DC96 #6E6524; }
.ms-sync-cta:focus-visible{ outline:1px dotted #F2F5EE; outline-offset:-4px; }