/* TakeOvr: the look of the marketplace.
 * This file is yours. The PHP outputs markup and class names only.
 * Edit freely, it is never overwritten. Change the variables and the site follows.
 */

:root {
  --tko-bg:        #121B42;
  --tko-surface:   #232F66;
  --tko-raised:    #2E3C7C;
  --tko-night:     #06091F;
  --tko-grey:      #262A33;
  --tko-grey-edge: #383D49;
  --tko-grey-field:#1B1E25;

  --tko-ink:    #EDF3FF;
  --tko-muted:  #93A4CE;
  --tko-hair:   #3A4A8E;
  --tko-accent: #3E8EFF;
  --tko-deep:   #1643A2;
  --tko-good:   #5FD1B0;
  --tko-warn:   #FFB454;
  --tko-danger: #FF7A93;

  --tko-radius:    16px;
  --tko-radius-sm: 10px;
  --tko-gap:       18px;
  --tko-font:      'Manrope', system-ui, sans-serif;
  --tko-font-head: 'Sora', system-ui, sans-serif;
}

.tko-board { font-family: var(--tko-font); color: var(--tko-ink); }

.tko-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--tko-gap); }
.tko-split { display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start; }
@media (max-width:820px){ .tko-split { grid-template-columns:1fr; } }
.tko-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tko-right { margin-left:auto; }

.tko-card {
  background: var(--tko-surface);
  border: 1px solid var(--tko-hair);
  border-radius: var(--tko-radius);
  padding: 22px;
}
.tko-card--flush  { padding:0; overflow:hidden; }
.tko-card--accent { border-color: var(--tko-accent); }
.tko-card--danger { border-color: var(--tko-danger); }
.tko-card--warn   { border-color: var(--tko-warn); }

.tko-listing { display:flex; flex-direction:column; gap:9px; text-decoration:none; }
.tko-listing__game {
  font:700 11px/1 var(--tko-font); letter-spacing:.12em;
  text-transform:uppercase; color:var(--tko-muted);
}
.tko-listing__title   { font:700 17px/1.35 var(--tko-font-head); color:var(--tko-ink); }
.tko-listing__excerpt { font:400 13px/1.6 var(--tko-font); color:var(--tko-muted); }
.tko-listing__foot    { display:flex; justify-content:space-between; align-items:flex-end; margin-top:6px; }

.tko-h1 { font:700 30px/1.2 var(--tko-font-head); color:var(--tko-ink); margin:0 0 8px; }
.tko-h2 { font:700 24px/1.25 var(--tko-font-head); color:var(--tko-ink); margin:0 0 12px; }
.tko-h3 { font:700 17px/1.3 var(--tko-font-head); color:var(--tko-ink); margin:0 0 14px; }

.tko-label {
  display:block; font:700 11px/1 var(--tko-font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--tko-muted); margin:0 0 7px;
}
.tko-lede { font:400 15px/1.7 var(--tko-font); color:var(--tko-muted); margin:0 0 16px; }
.tko-note { font:400 12.5px/1.6 var(--tko-font); color:var(--tko-muted); margin:0; }
.tko-body { font:400 15px/1.7 var(--tko-font); color:var(--tko-muted); white-space:pre-wrap; }

.tko-price { font:700 21px/1 var(--tko-font-head); color:var(--tko-accent); }
.tko-price--lg { font-size:30px; }
.tko-payout { color:var(--tko-good); }

.tko-pill {
  font:700 10px/1 var(--tko-font); letter-spacing:.09em; text-transform:uppercase;
  border-radius:999px; padding:5px 11px; border:1px solid currentColor;
}
.tko-pill--open      { color:var(--tko-good); }
.tko-pill--assigned  { color:var(--tko-warn); }
.tko-pill--submitted { color:var(--tko-accent); }
.tko-pill--completed,
.tko-pill--cancelled { color:var(--tko-muted); }
.tko-pill--custom    { color:var(--tko-accent); }

.tko-field {
  width:100%; box-sizing:border-box; background:var(--tko-night);
  border:1px solid var(--tko-hair); color:var(--tko-ink);
  padding:12px 14px; border-radius:8px;
  font:400 15px/1.4 var(--tko-font); margin:0 0 14px; outline:none;
}
.tko-field--inline { width:auto; margin:0; }
.tko-field--grow   { flex:1; }
textarea.tko-field { resize:vertical; min-height:120px; }
textarea.tko-field--tall { min-height:190px; }
.tko-field:focus { border-color:var(--tko-accent); box-shadow:0 0 0 3px rgba(62,142,255,.18); }
.tko-inline { display:flex; gap:10px; }

.tko-btn, .tko-ghost {
  display:inline-block; border-radius:999px; font:700 14px/1 var(--tko-font);
  cursor:pointer; text-decoration:none; text-align:center;
  padding:13px 26px; border:1px solid transparent;
}
.tko-btn   { background:var(--tko-accent); color:var(--tko-night); border:0; }
.tko-ghost { background:transparent; color:var(--tko-ink); border-color:var(--tko-hair); }
.tko-btn--sm, .tko-ghost--sm { padding:9px 16px; font-size:13px; }
.tko-btn--full, .tko-ghost--full { width:100%; }
.tko-ghost--danger { border-color:var(--tko-danger); color:var(--tko-danger); }

.tko-notice {
  border:1px solid var(--tko-good); color:var(--tko-good);
  border-radius:var(--tko-radius-sm); padding:12px 15px; margin:0 0 22px;
  font:400 14px/1.5 var(--tko-font);
}
.tko-notice--err { border-color:var(--tko-danger); color:var(--tko-danger); }

.tko-empty {
  border:1px dashed var(--tko-hair); border-radius:var(--tko-radius);
  padding:48px 20px; text-align:center; color:var(--tko-muted);
  font:400 15px/1.6 var(--tko-font);
}

.tko-strip {
  background:var(--tko-grey);
  border-top:1px solid var(--tko-grey-edge);
  border-bottom:1px solid var(--tko-grey-edge);
  font-family:var(--tko-font);
}
.tko-strip__inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.tko-search { display:flex; gap:9px; align-items:center; padding:14px 0 12px; }
.tko-search input[type="search"] {
  flex:1; min-width:0; background:var(--tko-grey-field);
  border:1px solid #3E4450; color:var(--tko-ink);
  padding:12px 15px; border-radius:999px;
  font:400 14.5px/1.3 var(--tko-font); outline:none;
}
.tko-search input[type="search"]:focus { border-color:var(--tko-accent); }
.tko-tabs { display:flex; gap:4px; flex-wrap:wrap; }
.tko-tab {
  text-decoration:none; font:700 13.5px/1 var(--tko-font);
  padding:13px 16px; color:var(--tko-muted); border-bottom:2px solid transparent;
}
.tko-tab.is-on { color:#FFFFFF; border-bottom-color:var(--tko-accent); }
.tko-tab:hover { color:#FFFFFF; }

.tko-games { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.tko-game {
  text-decoration:none; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:88px; padding:14px; border-radius:12px;
  background:var(--tko-surface); border:1px solid var(--tko-hair);
}
.tko-game.is-on { background:var(--tko-accent); border-color:var(--tko-accent); }
.tko-game__name  { font:700 14px/1.3 var(--tko-font-head); color:var(--tko-ink); }
.tko-game__count { font:400 12px/1 var(--tko-font); color:var(--tko-muted); margin-top:5px; }
.tko-game.is-on .tko-game__name,
.tko-game.is-on .tko-game__count { color:var(--tko-night); }

.tko-chat__log {
  height:290px; overflow-y:auto; padding:16px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.tko-chat__head, .tko-chat__foot {
  padding:13px 18px; display:flex; justify-content:space-between;
  align-items:center; gap:10px;
}
.tko-chat__head { border-bottom:1px solid var(--tko-hair); }
.tko-chat__foot { border-top:1px solid var(--tko-hair); }
.tko-msg { max-width:82%; padding:9px 13px; border-radius:13px; font:400 13.5px/1.5 var(--tko-font); }
.tko-msg--mine  { align-self:flex-end; background:var(--tko-accent); color:var(--tko-night); }
.tko-msg--yours { align-self:flex-start; background:var(--tko-raised); color:var(--tko-ink); border:1px solid var(--tko-hair); }
.tko-msg__who   { font:700 10px/1 var(--tko-font); letter-spacing:.08em; text-transform:uppercase; opacity:.65; margin-bottom:5px; }

.tko-mt    { margin-top:var(--tko-gap); }
.tko-mb    { margin-bottom:var(--tko-gap); }
.tko-mb-lg { margin-bottom:30px; }
.tko-divider { border-top:1px solid var(--tko-hair); padding-top:14px; margin-top:14px; }
.tko-narrow { max-width:560px; }
.tko-wide   { max-width:640px; }