/* ============================================================
   Keeper For Life — ESPN-Fantasy-style design system
   All colors paired with text/icon/shape for color-blind safety.
   ============================================================ */

:root {
  /* Surfaces */
  --k-bg:        #f2f3f5;   /* light gray page canvas */
  --k-surface:   #ffffff;   /* white module cards */
  --k-border:    #e6e8eb;   /* thin card/table borders */
  --k-border-2:  #d6d9de;   /* slightly stronger divider */
  --k-zebra:     #f7f8fa;   /* zebra-stripe row */
  --k-hover:     #eef1f5;   /* row / item hover */

  /* Dark header */
  --k-header:    #16181d;
  --k-header-2:  #1d1e23;
  --k-header-tx: #ffffff;
  --k-header-mut:#b9bcc4;

  /* Text */
  --k-text:      #1d2126;   /* near-black body */
  --k-text-mut:  #5a6069;   /* muted / secondary (AA on white) */
  --k-text-soft: #767c85;   /* softest still-AA-ish for large text */
  --k-link:      #2a6dc2;   /* ESPN-style link blue (AA on white) */

  /* Brand red — used for fills/borders/large bold only (AA-safe pairing) */
  --k-red:       #cc0000;
  --k-red-dk:    #a30000;   /* darker red for small text on white (AA) */
  --k-red-hover: #b00000;

  /* Status (always paired with text + icon) */
  --k-green:     #1c7a3e;
  --k-green-bg:  #e3f3e8;
  --k-green-bd:  #b7ddc3;
  --k-amber:     #8a5a12;
  --k-amber-bg:  #fdf1df;
  --k-amber-bd:  #ecd6ad;
  --k-redtx:     #a30000;
  --k-red-bg:    #fdecea;
  --k-red-bd:    #f3c5bf;

  --k-radius:    4px;
  --k-radius-sm: 3px;
  --k-shadow:    0 1px 2px rgba(20,28,40,.06), 0 1px 3px rgba(20,28,40,.05);
  --k-maxw:      1200px;
  --k-pad-x:     16px;          /* uniform side padding */
  --k-topbar-h:  50px;          /* tier-1 dark bar */
  --k-tabstrip-h:44px;          /* tier-2 section tabs */

  --k-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--k-font);
  background: var(--k-bg);
  color: var(--k-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--k-link); }

/* ============================================================
   Tier 1 — dark global top bar (brand + user)
   Full-bleed dark bar; inner content constrained to --k-maxw.
   ============================================================ */
.k4l-topbar {
  background: var(--k-header);
  color: var(--k-header-tx);
}
.k4l-topbar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--k-maxw);
  margin: 0 auto;
  padding: 0 var(--k-pad-x);
  min-height: var(--k-topbar-h);
}

.k4l-brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--k-header-tx);
  text-decoration: none;
  white-space: nowrap;
}
.k4l-brand .k4l-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--k-red);
  color: #fff;
  font-size: .95rem;
  line-height: 1;
  padding: .28rem .4rem;
  border-radius: var(--k-radius-sm);
}

.k4l-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .85rem;
  color: var(--k-header-mut);
  white-space: nowrap;
}
.k4l-user .k4l-username { color: #fff; font-weight: 700; }
.k4l-user a { color: var(--k-header-mut); text-decoration: none; font-weight: 600; }
.k4l-user a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   Tier 2 — ESPN-style section tab strip (sticky under top bar)
   Full-bleed white strip; tabs constrained to --k-maxw.
   ============================================================ */
.k4l-tabstrip {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--k-surface);
  border-bottom: 1px solid var(--k-border-2);
  box-shadow: 0 1px 2px rgba(20,28,40,.05);
}
.k4l-tabstrip-inner {
  display: flex;
  align-items: stretch;
  max-width: var(--k-maxw);
  margin: 0 auto;
  padding: 0 var(--k-pad-x);
  min-height: var(--k-tabstrip-h);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.k4l-tabstrip-inner::-webkit-scrollbar { display: none; }
.k4l-tab {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  color: var(--k-text-mut);
  text-decoration: none;
  font-weight: 700;
  font-size: .80rem;            /* ~12.8px */
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .12s ease;
}
.k4l-tab:hover { color: var(--k-text); }
.k4l-tab.is-active {
  color: var(--k-text);          /* darker text (not color-only) */
  font-weight: 800;              /* + heavier weight */
  border-bottom-color: var(--k-red);  /* + 3px red underline = shape cue */
}

/* ============================================================
   Main content column — wide, ESPN-style
   ============================================================ */
.k4l-main {
  max-width: var(--k-maxw);
  margin: 0 auto;
  padding: 1.25rem var(--k-pad-x) 3rem;
}

/* ============================================================
   Page header (title + optional subtitle + eyebrow)
   ============================================================ */
.k4l-page-head { margin: .15rem 0 1rem; }
.k4l-page-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.k4l-eyebrow {
  display: block;
  font-size: .70rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--k-red-dk);
  margin-bottom: .25rem;
}
.k4l-page-head h1 {
  margin: 0;
  font-size: 1.45rem;            /* ~23px */
  font-weight: 800;
  letter-spacing: -.01em;
}
.k4l-page-head .k4l-sub {
  margin: .3rem 0 0;
  color: var(--k-text-mut);
  font-size: .9rem;
}

/* ============================================================
   Flash messages (color + icon + text — color-blind safe)
   ============================================================ */
.k4l-flashes { max-width: var(--k-maxw); margin: 1rem auto 0; padding: 0 var(--k-pad-x); }
.k4l-flash {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .65rem .85rem;
  border-radius: var(--k-radius);
  margin-bottom: .5rem;
  font-size: .9rem;
  border: 1px solid var(--k-border-2);
  background: var(--k-surface);
}
.k4l-flash::before { font-weight: 800; flex: none; }
.k4l-flash-success { background: var(--k-green-bg); color: var(--k-green); border-color: var(--k-green-bd); }
.k4l-flash-success::before { content: "\2713  Success:"; }
.k4l-flash-error   { background: var(--k-red-bg);   color: var(--k-redtx);  border-color: var(--k-red-bd); }
.k4l-flash-error::before { content: "\26A0  Error:"; }
.k4l-flash-info    { background: #e8f0fb; color: #15448a; border-color: #c4d8f3; }
.k4l-flash-info::before { content: "\2139  "; }

/* ============================================================
   Cards / modules
   ============================================================ */
.k4l-card {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow);
  margin-bottom: .85rem;
}
.k4l-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .7rem;          /* tight header strip */
  border-bottom: 1px solid var(--k-border);
  background: #fafbfc;
  border-radius: var(--k-radius) var(--k-radius) 0 0;
}
.k4l-card-head h2,
.k4l-card-head h3 {
  margin: 0;
  font-size: .78rem;             /* small UPPERCASE bold title */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--k-text);
}
.k4l-card-body { padding: .8rem; }

/* ============================================================
   Buttons
   ============================================================ */
.k4l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid transparent;
  cursor: pointer;
  padding: .5rem .9rem;
  border-radius: var(--k-radius);
  font-weight: 700;
  font-size: .85rem;
  font-family: inherit;
  text-decoration: none;
  line-height: 1.1;
}
.k4l-btn-primary { background: var(--k-red); color: #fff; }
.k4l-btn-primary:hover { background: var(--k-red-hover); }
.k4l-btn-secondary {
  background: #fff; color: var(--k-text); border-color: var(--k-border-2);
}
.k4l-btn-secondary:hover { background: var(--k-hover); }
.k4l-btn-sm { padding: .32rem .65rem; font-size: .8rem; }
.k4l-btn-approve { background: var(--k-green); color: #fff; }
.k4l-btn-approve:hover { filter: brightness(.94); }
.k4l-btn-deny { background: #fff; color: var(--k-redtx); border-color: var(--k-red-bd); }
.k4l-btn-deny:hover { background: var(--k-red-bg); }

/* Google sign-in button */
.k4l-btn-google {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.3rem;
  padding: .7rem 1.3rem;
  background: var(--k-red);
  color: #fff;
  text-decoration: none;
  border-radius: var(--k-radius);
  font-weight: 700;
}
.k4l-btn-google:hover { background: var(--k-red-hover); }

/* ============================================================
   Centered card pages (login / pending / denied)
   ============================================================ */
.k4l-card-page {
  max-width: 460px;
  margin: 3.5rem auto;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-top: 4px solid var(--k-red);
  border-radius: var(--k-radius);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--k-shadow);
}
.k4l-card-page h1 { margin: .2rem 0 .6rem; font-size: 1.5rem; font-weight: 800; }
.k4l-card-page p { color: var(--k-text-mut); margin: .4rem 0; }
.k4l-card-page .k4l-card-link { font-weight: 700; }

/* ============================================================
   Generic tables (admin members)
   ============================================================ */
.k4l-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  box-shadow: var(--k-shadow);
}
.k4l-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--k-surface);
  font-size: 13px;               /* dense body text */
}
.k4l-table th,
.k4l-table td {
  text-align: left;
  border-bottom: 1px solid var(--k-border);
  white-space: nowrap;
}
.k4l-table td {
  padding: 5px 8px;              /* compact ~30px row height */
  line-height: 1.35;
}
.k4l-table thead th {
  position: sticky;
  top: var(--k-tabstrip-h);      /* clear the sticky tab strip */
  background: #f4f5f7;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--k-text-mut);
  border-bottom: 2px solid var(--k-border-2);
}
.k4l-table tbody tr:nth-child(even) { background: var(--k-zebra); }
.k4l-table tbody tr:hover { background: var(--k-hover); }
.k4l-table .num,
.k4l-table .col-num {
  text-align: center;            /* narrow numeric columns, centered */
  font-variant-numeric: tabular-nums;
  width: 1%;
  white-space: nowrap;
}
.k4l-table thead th.col-num { text-align: center; }
.k4l-table .actions { white-space: nowrap; }
.k4l-table .actions form + form { margin-left: .35rem; }

/* Status badges — icon + text + color (color-blind safe) */
.k4l-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .12rem .45rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.k4l-badge::before { font-weight: 900; }
.k4l-badge.approved { background: var(--k-green-bg); color: var(--k-green); border-color: var(--k-green-bd); }
.k4l-badge.approved::before { content: "\2713"; }
.k4l-badge.pending  { background: var(--k-amber-bg); color: var(--k-amber); border-color: var(--k-amber-bd); }
.k4l-badge.pending::before { content: "\2026"; }   /* … */
.k4l-badge.denied   { background: var(--k-red-bg); color: var(--k-redtx); border-color: var(--k-red-bd); }
.k4l-badge.denied::before { content: "\2715"; }
.k4l-badge.admin    { background: #1d2126; color: #fff; }
.k4l-badge.admin::before { content: "\2605"; }      /* star */

.inline { display: inline; }

/* ============================================================
   Home hero
   ============================================================ */
.k4l-hero {
  background: linear-gradient(180deg, var(--k-header) 0%, var(--k-header-2) 100%);
  color: #fff;
  border-radius: var(--k-radius);
  border: 1px solid #000;
  padding: 1.75rem 1.25rem;
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.k4l-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--k-red);
}
.k4l-hero .k4l-hero-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--k-red);
  padding: .25rem .55rem;
  border-radius: var(--k-radius-sm);
  margin-bottom: .9rem;
}
.k4l-hero h1 { margin: 0 0 .3rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; }
.k4l-hero p { margin: 0; color: var(--k-header-mut); font-size: .95rem; }

/* Home quick-link tiles */
.k4l-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .85rem;
}
.k4l-tile {
  display: block;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-left: 4px solid var(--k-red);
  border-radius: var(--k-radius);
  padding: .85rem 1rem;
  text-decoration: none;
  color: var(--k-text);
  box-shadow: var(--k-shadow);
}
.k4l-tile:hover { background: #fff; border-color: var(--k-border-2); box-shadow: 0 2px 10px rgba(20,28,40,.1); }
.k4l-tile .k4l-tile-label {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--k-red-dk);
  margin-bottom: .25rem;
}
.k4l-tile h3 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 800; }
.k4l-tile p { margin: 0; color: var(--k-text-mut); font-size: .88rem; }

/* ============================================================
   Draft hub list
   ============================================================ */
.k4l-list { list-style: none; padding: 0; margin: 0; }
.k4l-list li { border-bottom: 1px solid var(--k-border); }
.k4l-list li:last-child { border-bottom: none; }
.k4l-list-row {
  display: block;
  padding: .55rem .7rem;
  text-decoration: none;
  color: var(--k-text);
}
.k4l-list-row:hover { background: var(--k-hover); }
.k4l-list-row .k4l-list-title { font-weight: 700; font-size: .92rem; color: var(--k-link); }
.k4l-list-row:hover .k4l-list-title { text-decoration: underline; }
.k4l-list-row .k4l-list-desc { display: block; color: var(--k-text-mut); font-size: .82rem; margin-top: .1rem; }

.k4l-empty {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--k-text-mut);
  font-size: .92rem;
}
.k4l-soon {
  flex: none;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--k-amber);
  background: var(--k-amber-bg);
  border: 1px solid var(--k-amber-bd);
  border-radius: 999px;
  padding: .1rem .5rem;
}

/* ============================================================
   Keepers — per-team ESPN-style tables
   ============================================================ */
.k4l-keeper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1rem;
  align-items: start;
}
.k4l-keeper-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 0 0 1.1rem;
  font-size: .82rem;
  color: var(--k-text-mut);
}
.k4l-keeper-legend .leg { display: inline-flex; align-items: center; gap: .35rem; }

/* keeper cost chip in table */
.k4l-cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.55rem;
  padding: 0 .35rem;
  font-weight: 800;
  font-size: .82rem;
  border-radius: var(--k-radius-sm);
  font-variant-numeric: tabular-nums;
  background: #eef2f7;
  color: #1d2126;
  border: 1px solid #d8dee6;
}
.k4l-cost.is-out {       /* value 0 = cannot be kept */
  background: var(--k-red-bg);
  color: var(--k-redtx);
  border-color: var(--k-red-bd);
}
.k4l-cost.is-unknown {   /* value none = unknown */
  background: #f1f2f4;
  color: var(--k-text-mut);
  border-style: dashed;
  border-color: var(--k-border-2);
}

.k4l-keeper-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.k4l-keeper-table thead th {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--k-text-mut);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--k-border-2);
  background: #fafbfc;
}
.k4l-keeper-table thead th.col-cost { text-align: center; width: 1px; white-space: nowrap; }
.k4l-keeper-table thead th.col-tag  { text-align: right; }
.k4l-keeper-table tbody td {
  padding: 5px 8px;
  line-height: 1.35;
  border-bottom: 1px solid var(--k-border);
  vertical-align: middle;
}
.k4l-keeper-table tbody tr:last-child td { border-bottom: none; }
.k4l-keeper-table tbody tr:nth-child(even) { background: var(--k-zebra); }
.k4l-keeper-table tbody tr:hover { background: var(--k-hover); }
.k4l-keeper-table td.col-cost { text-align: center; white-space: nowrap; }
.k4l-keeper-table td.col-tag  { text-align: right; white-space: nowrap; }

.k4l-player { color: var(--k-text); font-weight: 600; text-decoration: none; }
.k4l-player:hover { text-decoration: underline; }
.k4l-pos {
  margin-left: .35rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--k-text-mut);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.k4l-row-out .k4l-player { text-decoration: line-through; color: var(--k-text-soft); font-weight: 500; }

/* source tags */
.k4l-tag {
  display: inline-block;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--k-text-mut);
  background: #f0f1f4;
  border: 1px solid var(--k-border-2);
  border-radius: var(--k-radius-sm);
  padding: .08rem .38rem;
}
.k4l-tag-trade { color: #15448a; background: #e8f0fb; border-color: #c4d8f3; }

/* ============================================================
   Constitution — clean document card
   ============================================================ */
.k4l-doc {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-top: 4px solid var(--k-red);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow);
  padding: 1.75rem clamp(1.1rem, 4vw, 2.25rem);
  max-width: 860px;
  margin: 0 auto;
}
.k4l-doc .const-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-align: center;
  margin: 0 0 .25rem;
}
.k4l-doc .const-rule {
  height: 3px;
  width: 56px;
  margin: .6rem auto 1.75rem;
  background: var(--k-red);
  border-radius: 2px;
}
.k4l-doc h2 {
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--k-text);
  margin: 1.9rem 0 .65rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--k-border);
}
.k4l-doc p { margin: .6rem 0; line-height: 1.65; }
.k4l-doc .const-note { color: var(--k-text-mut); font-style: italic; }
.k4l-doc .const-li { padding-left: 1.5rem; text-indent: -1.05rem; }
.k4l-doc .const-li::before { content: "\25AA"; color: var(--k-red-dk); margin-right: .65rem; font-size: .8em; }

/* ============================================================
   Footer
   ============================================================ */
.k4l-footer {
  background: var(--k-header);
  color: var(--k-header-mut);
  border-top: 3px solid var(--k-red);
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: .82rem;
}
.k4l-footer strong { color: #fff; }
.k4l-footer .k4l-footer-links { margin-top: .4rem; }
.k4l-footer a { color: var(--k-header-mut); text-decoration: none; margin: 0 .5rem; }
.k4l-footer a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  :root { --k-pad-x: 12px; }

  /* Tier 1: keep brand + user on one line, smaller */
  .k4l-topbar-inner { min-height: 48px; gap: .6rem; }
  .k4l-brand { font-size: .98rem; }
  .k4l-brand .k4l-brand-mark { font-size: .85rem; }
  .k4l-user { gap: .6rem; font-size: .8rem; }

  /* Tier 2: tabs become a horizontally-scrollable row (ESPN-like) */
  .k4l-tabstrip-inner { min-height: 42px; }
  .k4l-tab { padding: 0 13px; font-size: .76rem; }

  .k4l-main { padding: 1rem var(--k-pad-x) 2.5rem; }
  .k4l-hero h1 { font-size: 1.45rem; }
  .k4l-page-head h1 { font-size: 1.3rem; }
  .k4l-keeper-grid { grid-template-columns: 1fr; }

  /* On mobile, sticky table headers sit just under the tab strip */
  .k4l-table thead th { top: 42px; }
}

/* ===================================================================
   Additions: sticky-header fix, draft grid, player popup, parchment
   =================================================================== */

/* Sticky thead overlapped the first row inside the horizontally-scrolling
   table wraps (overflow-x makes the wrap a vertical scroll context too). Make
   table headers static — these tables are short enough not to need sticky. */
.k4l-table thead th,
.k4l-keeper-table thead th { position: static !important; top: auto !important; }

/* ---- Draft board grid: columns = teams, rows = rounds ---- */
.k4l-draft-grid td,
.k4l-draft-grid th { white-space: nowrap; vertical-align: top; }
.k4l-draft-grid td { font-size: 12px; }
.k4l-draft-grid .col-rd {
  position: sticky; left: 0; z-index: 2;
  text-align: center; font-weight: 800; background: #fff;
}
.k4l-draft-grid thead .col-rd { background: var(--k-canvas, #f2f3f5); z-index: 3; }
.k4l-draft-grid tbody tr:nth-child(even) .col-rd { background: var(--k-zebra, #f7f8fa); }

/* ---- ESPN-style player popup ---- */
.k4l-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.k4l-modal.is-open { display: block; }
.k4l-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.k4l-modal-card {
  position: relative; width: calc(100% - 32px); max-width: 460px;
  margin: 7vh auto 0; max-height: 84vh; overflow: auto;
  background: #fff; border-radius: 6px; box-shadow: 0 16px 48px rgba(0,0,0,.4);
}
.k4l-modal-close {
  position: absolute; top: 8px; right: 8px; z-index: 3; padding: 0;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.10); color: #111;
  font-size: 26px; line-height: 44px; text-align: center; cursor: pointer;
}
.k4l-modal-close:hover { background: rgba(0,0,0,.2); }
/* Tap anywhere on the dimmed backdrop also closes (handled in JS). */
.k4l-modal-backdrop { cursor: pointer; }
.k4l-modal-body { padding: 16px 18px 18px; }
.k4l-modal-loading { padding: 28px; text-align: center; color: var(--k-text-mut, #6b7280); }

/* ---- Player card (used in popup + on the full page) ---- */
.k4l-pcard-head { border-bottom: 3px solid var(--k-red, #cc0000); padding-bottom: 8px; margin-bottom: 12px; }
.k4l-pcard-head h2 { margin: 2px 0 0; font-size: 1.3rem; }
.k4l-pcard-keeper { margin: 6px 0 0; font-size: .85rem; color: var(--k-text-mut, #6b7280); }
.k4l-pcard-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--k-text-mut, #6b7280); margin: 0 0 4px; }
.k4l-pcard-table { width: 100%; }
.k4l-pcard-page { max-width: 560px; }

/* ---- Constitution: restore the old parchment / paper feel ---- */
.k4l-doc {
  background-color: #f5ecd7;
  background-image:
    radial-gradient(rgba(120,90,40,.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2));
  background-size: 4px 4px, 100% 100%;
  color: #3b2f1d;
  font-family: "IM Fell English", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  border: 1px solid #d8c39a;
  border-radius: 3px;
  box-shadow: inset 0 0 70px rgba(120,90,40,.12), 0 2px 8px rgba(60,40,10,.15);
  line-height: 1.75;
}
.k4l-doc .const-title {
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  text-align: center; color: #3b2f1d; letter-spacing: .02em;
}
.k4l-doc .const-rule { border: 0; border-bottom: 2px solid #b9a06f; max-width: 140px; margin: .4rem auto 1.4rem; }
.k4l-doc h2 {
  font-family: "IM Fell English SC", "IM Fell English", Georgia, serif;
  color: #5a3e1b; border-bottom: 1px solid #cdb78a;
}
.k4l-doc .const-note { color: #7a6747; }
.k4l-doc .const-li::before { color: #8a6a2e; }
.k4l-doc a { color: #7a4a12; }

/* Admin team dropdown */
.k4l-select { padding: 4px 6px; border: 1px solid var(--k-border, #d3d4d8); border-radius: 4px; background: #fff; font-size: 13px; max-width: 140px; }

/* ===== Fantasy Poké-Edit ===== */
/* Color-blind safety: every status is also a TEXT label; color only supplements. */
.fpe-stats { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fpe-stat { background: #fff; border: 1px solid var(--k-border); border-radius: 8px; padding: .7rem .9rem; }
.fpe-stat-val { font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fpe-stat-lbl { font-size: .78rem; color: var(--k-text-mut); text-transform: uppercase; letter-spacing: .02em; }

.fpe-editor-links { display: flex; gap: .6rem; flex-wrap: wrap; }
.fpe-admin-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.fpe-h3 { margin: .2rem 0 .6rem; font-size: 1.05rem; font-weight: 800; }

.fpe-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }

/* Status pills — each carries literal text (Modified / Vanilla / Needs combined effect / Gym / Warning). */
.fpe-pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .45rem;
  border-radius: 4px; border: 1px solid var(--k-border-2); white-space: nowrap; margin-left: .25rem; }
.fpe-pill-mod { background: var(--k-amber-bg); color: var(--k-amber); border-color: var(--k-amber-bd); }
.fpe-pill-mod::before { content: "● "; }
.fpe-pill-plain { background: #eef1f5; color: var(--k-text-mut); }
.fpe-pill-warn { background: var(--k-red-bg); color: var(--k-redtx); border-color: var(--k-red-bd); }
.fpe-pill-warn::before { content: "⚠ "; }
.fpe-pill-gym { background: #e8f0fb; color: #15448a; border-color: #c4d8f3; }

.fpe-player { font-weight: 700; }
.fpe-vanilla { color: var(--k-text-mut); font-size: .85rem; }

/* Forms */
.fpe-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: .4rem; }
.fpe-grid-stats { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.fpe-field { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--k-text-mut); }
.fpe-field span { font-weight: 600; }
.fpe-field.fpe-check { flex-direction: row; align-items: center; gap: .4rem; }
.fpe-input { width: 100%; padding: .4rem .5rem; font-size: 14px; border: 1px solid var(--k-border-2);
  border-radius: 6px; background: #fff; color: var(--k-text); }
.fpe-input[readonly] { background: #f3f4f6; color: var(--k-text-mut); }
.fpe-filter { width: auto; min-width: 132px; padding: .45rem .5rem; font-size: 14px; border: 1px solid var(--k-border-2); border-radius: 8px; background: #fff; }
.fpe-multi { min-height: 16rem; }
.fpe-bst { float: right; font-size: .85rem; font-weight: 700; color: var(--k-text-mut); }
.fpe-bst #fpe-bst-total { color: var(--k-text); font-size: 1.05rem; }
.fpe-save-bar { display: flex; gap: .6rem; margin: 1rem 0 2rem; align-items: center; }

/* Auto-save status — TEXT is the primary signal (color-blind safe); the color
   modifiers (fpe-saving / fpe-ok / fpe-err) only supplement the text label. */
.fpe-save-status { font-size: .85rem; font-weight: 700; color: var(--k-text-mut); }
.fpe-save-status.fpe-saving { color: var(--k-text-mut); }
.fpe-save-status.fpe-ok { color: var(--k-green); }
.fpe-save-status.fpe-err { color: var(--k-redtx); }

/* Errors block — text-labelled, not color-only. */
.fpe-errors { max-width: var(--k-maxw); margin: 0 auto 1rem; background: var(--k-red-bg);
  border: 1px solid var(--k-red-bd); color: var(--k-redtx); border-radius: 8px; padding: .7rem .9rem; }
.fpe-errors ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* Moves inline table */
.fpe-in-num { max-width: 5rem; }
.fpe-in-sm { max-width: 9rem; }
.fpe-row-msg { font-size: .78rem; font-weight: 700; margin-left: .4rem; }
.fpe-row-msg.fpe-ok { color: var(--k-green); }
.fpe-row-msg.fpe-err { color: var(--k-redtx); }

/* Learnset table */
.fpe-ls-table td { padding: .3rem; }

/* Trainers list */
.fpe-trainers { width: 100%; border-collapse: collapse; }
.fpe-trainer-head td { padding: .8rem .4rem .3rem; border-top: 2px solid var(--k-border-2); }
.fpe-trainer-link { font-weight: 800; font-size: 1.05rem; }
.fpe-loc { color: var(--k-text-mut); font-size: .85rem; margin-left: .5rem; }
.fpe-mechanic { color: var(--k-text-mut); font-size: .85rem; margin-top: .2rem; white-space: pre-line; }
.fpe-party-row td { padding: .25rem .4rem; font-size: .9rem; border-bottom: 1px solid var(--k-border); }
.fpe-slot { color: var(--k-text-mut); width: 3rem; }
.fpe-note { max-width: var(--k-maxw); margin: 0 auto 1rem; background: #e8f0fb; border: 1px solid #c4d8f3;
  color: #15448a; border-radius: 8px; padding: .6rem .9rem; font-size: .9rem; }

/* Trainer editor party slots */
.fpe-party-slot { border: 1px solid var(--k-border-2); border-radius: 8px; padding: .7rem; margin-bottom: .8rem; }
.fpe-slot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }

/* ============================================================
   NBA news left rail + 2-column layout
   The top bar + tabstrip stay full-width above this grid; only the
   page body splits into a sticky rail (~270px) + the main column (1fr).
   ============================================================ */
.k4l-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 1.1rem;
  /* Full-width so the news rail HUGS the screen's left edge at any size, instead
     of drifting inward with a centered max-width container. */
  padding: 0 var(--k-pad-x);
  align-items: start;
}
/* The main column inside the grid drops its own max-width/centering/side
   padding (the grid wrapper supplies those) so existing pages just flow
   narrower in the 1fr column. */
.k4l-main-grid {
  max-width: var(--k-maxw);  /* keep content readable; left-aligned next to the rail */
  margin: 0;
  padding: 1.25rem 0 3rem;
  min-width: 0;        /* lets wide tables/grids shrink instead of overflowing */
}

.k4l-rail {
  position: sticky;
  top: calc(var(--k-tabstrip-h) + 1.25rem);
  margin-top: 1.25rem;
  margin-bottom: 0;
  max-height: calc(100vh - var(--k-tabstrip-h) - 2rem);
  display: flex;
  flex-direction: column;
}
.k4l-rail .k4l-card-head { flex: none; }
.k4l-rail-body {
  overflow-y: auto;
  padding: .6rem;
}
.k4l-rail-x {
  border: none;
  background: transparent;
  color: var(--k-text-mut);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .15rem;
  border-radius: var(--k-radius-sm);
}
.k4l-rail-x:hover { color: var(--k-text); background: var(--k-hover); }

/* One news story */
.k4l-news-item {
  padding: .55rem 0;
  border-bottom: 1px solid var(--k-border);
}
.k4l-news-item:first-child { padding-top: .1rem; }
.k4l-news-item:last-child { border-bottom: none; }
.k4l-news-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .25rem;
}
/* Kind badge — TEXT label is the key (color-blind safe); color is decorative. */
.k4l-news-kind {
  flex: none;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: .12rem .5rem;
  border: 1px solid var(--k-border-2);
  background: var(--k-zebra);
  color: var(--k-text);
}
.k4l-news-kind-draft_pick { background: var(--k-green-bg); border-color: var(--k-green-bd); color: var(--k-green); }
.k4l-news-kind-trade      { background: #eaf1fb; border-color: #c4d8f3; color: var(--k-link); }
.k4l-news-kind-signing    { background: var(--k-amber-bg); border-color: var(--k-amber-bd); color: var(--k-amber); }
.k4l-news-kind-waive_release { background: var(--k-red-bg); border-color: var(--k-red-bd); color: var(--k-redtx); }
.k4l-news-time {
  flex: none;
  font-size: .68rem;
  color: var(--k-text-soft);
  white-space: nowrap;
}
.k4l-news-headline {
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--k-text);
}
.k4l-news-facts {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
}
.k4l-news-facts li {
  position: relative;
  font-size: .78rem;
  color: var(--k-text-mut);
  line-height: 1.35;
  padding-left: .8rem;
  margin-top: .15rem;
}
.k4l-news-facts li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--k-text-soft);
}
.k4l-news-src {
  margin-top: .3rem;
  font-size: .72rem;
  color: var(--k-text-soft);
}
.k4l-news-src a { font-weight: 700; }

/* Floating pill to bring the rail back after dismiss */
.k4l-news-pill {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 60;
  border: 1px solid var(--k-border-2);
  background: var(--k-surface);
  color: var(--k-text);
  font-family: inherit;
  font-weight: 700;
  font-size: .8rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  box-shadow: var(--k-shadow);
  cursor: pointer;
}
.k4l-news-pill:hover { background: var(--k-hover); }
.k4l-news-pill[hidden] { display: none; }
.k4l-rail[hidden] { display: none; }

/* ---- Responsive: collapse to a single column on narrow screens ----
   The rail un-sticks and stacks BELOW the page content so mobile isn't
   broken; the "Show NBA news" pill still works to toggle it. */
@media (max-width: 900px) {
  .k4l-layout {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .k4l-main-grid {
    order: -1;             /* page content first, news rail under it */
    padding: 1.25rem var(--k-pad-x) 1rem;
  }
  .k4l-rail {
    position: static;
    max-height: none;
    margin: 0 var(--k-pad-x) 1rem;
  }
  .k4l-rail-body { max-height: 60vh; }
}