/*
 * The Sports Deal - prototyping kit.
 * A thin imitation of the shadcn/ui look built only from the variables in
 * tokens.css. It is NOT a design system and is never shipped: the Next.js app
 * uses real shadcn components. Rules: logical properties only (no left/right),
 * no build step, no framework.
 */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  text-align: start;
}

img, svg { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.3; font-weight: 600; text-wrap: balance; }
h1 { font-size: 1.5rem; letter-spacing: -0.01em; }
h2 { font-size: 1.175rem; }
h3 { font-size: 1rem; }
small, .text-sm { font-size: 0.8125rem; }
.text-xs { font-size: 0.75rem; }
.muted { color: var(--muted-foreground); }
/* Latin identifiers (slugs, epic ids, dates) inside Arabic text: plaintext
   takes the run's direction from its first strong character, so "P1-market"
   stays LTR without flipping the alignment of the RTL line it sits on. */
.mono { font-family: var(--font-mono); font-size: 0.8125rem; unicode-bidi: plaintext; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* --- layout ------------------------------------------------------------- */
.container { inline-size: min(100% - 2rem, 76rem); margin-inline: auto; }
.stack > * + * { margin-block-start: var(--gap, 1rem); }
.row { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.spacer { flex: 1 1 auto; }
.pad { padding: 1rem; }
.pad-lg { padding: 1.5rem; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- app shell ---------------------------------------------------------- */
.app-header {
  position: sticky; inset-block-start: 0; z-index: 30;
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--border);
}
.app-header .container { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.75rem; flex-wrap: wrap; }
.brand { font-weight: 600; letter-spacing: -0.01em; }
.app-header .select { inline-size: auto; block-size: 1.875rem; font-size: 0.8125rem; }
.app-main { padding-block: 1.5rem 4rem; }
.app-footer { border-block-start: 1px solid var(--border); padding-block: 1rem; color: var(--muted-foreground); font-size: 0.8125rem; }

/* --- button ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  block-size: 2.25rem; padding-inline: 0.875rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
  background: var(--primary); color: var(--primary-foreground);
}
.btn:hover { opacity: 0.9; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-outline { background: transparent; color: var(--foreground); border-color: var(--border); }
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); opacity: 1; }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); opacity: 1; }
.btn-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.btn-sm { block-size: 1.875rem; padding-inline: 0.625rem; font-size: 0.8125rem; }
.btn-icon { inline-size: 2.25rem; padding-inline: 0; }

/* --- input / select / textarea ------------------------------------------ */
.input, .select, .textarea {
  inline-size: 100%; block-size: 2.25rem; padding-inline: 0.75rem;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem; text-align: start;
}
.textarea { block-size: auto; min-block-size: 5rem; padding-block: 0.5rem; resize: vertical; }
.select { padding-inline-end: 1.75rem; cursor: pointer; }
.input::placeholder, .textarea::placeholder { color: var(--muted-foreground); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--ring); }
.label { display: block; font-size: 0.8125rem; font-weight: 500; margin-block-end: 0.375rem; }
.field { display: block; }

/* --- badge -------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75rem; font-weight: 500; line-height: 1.5; white-space: nowrap;
  background: var(--primary); color: var(--primary-foreground);
}
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-outline { background: transparent; color: var(--foreground); border-color: var(--border); }
.badge-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.badge-free-agent { background: var(--status-free-agent); color: var(--status-free-agent-foreground); }
.badge-open-to-offers { background: var(--status-open-to-offers); color: var(--status-open-to-offers-foreground); }
.badge-available-for-loan { background: var(--status-available-for-loan); color: var(--status-available-for-loan-foreground); }
.badge-contracted { background: var(--status-contracted); color: var(--status-contracted-foreground); }
.badge-unknown { background: var(--status-unknown); color: var(--status-unknown-foreground); }
.badge-tier-low { background: var(--tier-low); color: var(--tier-low-foreground); }
.badge-tier-mid { background: var(--tier-mid); color: var(--tier-mid-foreground); }
.badge-tier-high { background: var(--tier-high); color: var(--tier-high-foreground); }

/* --- card --------------------------------------------------------------- */
.card {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.card-header { padding: 1rem 1rem 0.5rem; }
.card-title { font-size: 0.95rem; font-weight: 600; }
.card-description { font-size: 0.8125rem; color: var(--muted-foreground); }
.card-content { padding: 0.75rem 1rem 1rem; }
.card-footer { padding: 0 1rem 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --- tabs --------------------------------------------------------------- */
.tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--muted); border-radius: calc(var(--radius) - 2px); flex-wrap: wrap; }
.tab {
  appearance: none; border: 0; background: transparent; color: var(--muted-foreground);
  padding: 0.3rem 0.75rem; border-radius: calc(var(--radius) - 4px);
  font-size: 0.8125rem; font-weight: 500; cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--background); color: var(--foreground); }

/* --- chip (removable filter token) -------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.2rem 0.5rem 0.2rem 0.625rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--background); font-size: 0.78rem;
}
.chip button { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--muted-foreground); line-height: 1; padding: 0; }

/* --- table -------------------------------------------------------------- */
.table-wrap { inline-size: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.table { inline-size: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.table th, .table td { padding: 0.625rem 0.75rem; text-align: start; border-block-end: 1px solid var(--border); }
.table th { font-weight: 500; color: var(--muted-foreground); background: color-mix(in oklab, var(--muted) 60%, transparent); }
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover { background: color-mix(in oklab, var(--muted) 45%, transparent); }

/* --- skeleton ----------------------------------------------------------- */
.skeleton {
  background: var(--muted); border-radius: calc(var(--radius) - 4px);
  block-size: 1rem; animation: skeleton-pulse 1.6s ease-in-out infinite;
}
.skeleton-line { block-size: 0.75rem; }
.skeleton-line + .skeleton-line { margin-block-start: 0.5rem; }
@keyframes skeleton-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* --- callout / alert ---------------------------------------------------- */
.callout {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.875rem 1rem; background: var(--card); color: var(--card-foreground);
  border-inline-start-width: 3px;
}
.callout-title { font-weight: 600; font-size: 0.875rem; margin-block-end: 0.2rem; }
.callout-info { border-inline-start-color: var(--ring); }
.callout-warning { border-inline-start-color: var(--status-available-for-loan-foreground); }
.callout-destructive { border-inline-start-color: var(--destructive); color: var(--destructive); }
.callout-destructive .callout-body { color: var(--foreground); }

/* --- empty state -------------------------------------------------------- */
.empty { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted-foreground); }

/* --- sheet (side panel) ------------------------------------------------- */
.sheet-backdrop { position: fixed; inset: 0; background: oklch(0 0 0 / 45%); z-index: 40; }
.sheet {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 50;
  inline-size: min(24rem, 100%);
  background: var(--popover); color: var(--popover-foreground);
  border-inline-start: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.sheet-header, .sheet-footer { padding: 1rem; }
.sheet-header { border-block-end: 1px solid var(--border); }
.sheet-footer { border-block-start: 1px solid var(--border); display: flex; gap: 0.5rem; }
.sheet-body { padding: 1rem; overflow-y: auto; flex: 1 1 auto; }

/* --- dialog ------------------------------------------------------------- */
.dialog-backdrop { position: fixed; inset: 0; background: oklch(0 0 0 / 45%); z-index: 40; display: grid; place-items: center; padding: 1rem; }
.dialog {
  inline-size: min(30rem, 100%);
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 16px 40px oklch(0 0 0 / 22%);
}
.dialog-header { padding: 1.25rem 1.25rem 0.5rem; }
.dialog-body { padding: 0 1.25rem 1rem; }
.dialog-footer { padding: 0 1.25rem 1.25rem; display: flex; gap: 0.5rem; justify-content: flex-end; }

/* --- separator / kbd ---------------------------------------------------- */
.separator { block-size: 1px; background: var(--border); border: 0; margin-block: 1rem; }
kbd {
  font-family: var(--font-mono); font-size: 0.7rem;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 0.05rem 0.3rem; background: var(--muted);
}

/* --- prototype chrome (not part of the product UI) ---------------------- */
.proto-bar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0; font-size: 0.8125rem; color: var(--muted-foreground);
}
.proto-bar .select { inline-size: auto; block-size: 1.875rem; font-size: 0.8125rem; }
.proto-note {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 0.875rem 1rem; background: color-mix(in oklab, var(--muted) 45%, transparent);
  font-size: 0.8125rem;
}
/* States are only hidden once proto.js has run, so a JS-less open still shows
   every state stacked rather than a blank page. */
.proto-js [data-state]:not([data-state-active]) { display: none; }

/* --- small primitives added for P1 -------------------------------------- */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
/* Filter panel beside results. One column until there is room for both; the
   panel is then a fixed measure and the results take the remainder. */
.layout-panel { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 64rem) { .layout-panel { grid-template-columns: 17rem minmax(0, 1fr); } }
/* The same content shown in a panel on a wide screen and in a sheet on a
   narrow one, without duplicating it in two markup trees. */
@media (max-width: 63.99rem) { .hide-narrow { display: none !important; } }
@media (min-width: 64rem) { .hide-wide { display: none !important; } }
/* A sheet carrying a whole profile needs more measure than a filter sheet. */
.sheet-wide { inline-size: min(34rem, 100%); }

/* --- small primitives added for S1: the application shell ---------------- */
/* Navigation beside the screen. One column until there is room for both; the
   rail is then a fixed measure and the screen takes the remainder. Only the
   rail variant reserves the column, so the top-bar variant is full width. */
.layout-shell { display: grid; gap: 1.25rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
/* A grid item's automatic minimum size is its min-content width, and a row of
   fourteen navigation entries has a wide one; without this the rail pushes the
   whole screen sideways on a phone instead of scrolling inside itself. */
.layout-shell > * { min-inline-size: 0; }
@media (min-width: 64rem) {
  html[data-s1-nav="rail"] .layout-shell { grid-template-columns: 14.5rem minmax(0, 1fr); }
}
.nav-rail { background: var(--sidebar); color: var(--sidebar-foreground); border: 1px solid var(--sidebar-border); border-radius: var(--radius); padding: 0.625rem; }
.nav-group + .nav-group { margin-block-start: 0.875rem; }
.nav-group-label { font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); padding-inline: 0.5rem; margin-block-end: 0.3rem; }
.nav-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.nav-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.625rem; border-radius: calc(var(--radius) - 3px);
  font-size: 0.8125rem; text-decoration: none; white-space: nowrap;
}
.nav-item:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.nav-item[aria-current="page"] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 600; }
.nav-item .count { margin-inline-start: auto; font-size: 0.7rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
/* The same list as one scrolling row: the top-bar variant, and every variant
   on a narrow screen, where a column of fourteen entries is not navigation. */
.nav-row { display: flex; gap: 0.25rem; overflow-x: auto; padding-block: 0.375rem; scrollbar-width: thin; }
.nav-row .nav-group { margin: 0; display: contents; }
.nav-row .nav-group-label { display: none; }
.nav-row .nav-list { flex-direction: row; gap: 0.25rem; }
.nav-row .nav-item .count { margin-inline-start: 0.25rem; }
@media (max-width: 63.99rem) {
  .nav-rail { background: transparent; border: 0; border-block-end: 1px solid var(--border); border-radius: 0; padding: 0; }
  .nav-rail .nav-inner { display: flex; gap: 0.25rem; overflow-x: auto; padding-block: 0.375rem; }
  .nav-rail .nav-group { margin: 0; display: contents; }
  .nav-rail .nav-group-label { display: none; }
  .nav-rail .nav-list { flex-direction: row; gap: 0.25rem; }
  .nav-rail .nav-item .count { margin-inline-start: 0.25rem; }
}
/* The unread count on the bell: a number, not a dot, because zero and eleven
   are different facts and the badge is the only place either is stated. */
.bell { position: relative; }
.bell .unread {
  position: absolute; inset-block-start: -0.25rem; inset-inline-end: -0.25rem;
  min-inline-size: 1.1rem; padding-inline: 0.25rem; border-radius: 999px;
  background: var(--destructive); color: var(--destructive-foreground);
  font-size: 0.65rem; line-height: 1.1rem; text-align: center; font-variant-numeric: tabular-nums;
}
/* A value the viewer's tier does not reach. It occupies the field's place and
   names the tier; it never collapses, because a gap reads as "no data". */
.locked {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.1rem 0.5rem; border: 1px dashed var(--border); border-radius: 999px;
  background: color-mix(in oklab, var(--muted) 50%, transparent);
  color: var(--muted-foreground); font-size: 0.75rem;
}
/* Key/value pairs read as a list on a phone and as columns on a desktop. */
.facts { display: grid; gap: 0.75rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.facts dt { font-size: 0.72rem; color: var(--muted-foreground); }
.facts dd { font-size: 0.875rem; }
/* A board column set: the S4 variant, and nothing else uses it. */
.board { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: start; }
.board-col { background: color-mix(in oklab, var(--muted) 45%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.625rem; }
.board-col > h3 { font-size: 0.78rem; color: var(--muted-foreground); margin-block-end: 0.5rem; }
/* A step in a chronology: the marker sits on the inline start in both scripts. */
.thread { list-style: none; padding: 0; border-inline-start: 2px solid var(--border); margin-inline-start: 0.4rem; }
.thread > li { padding-inline-start: 1rem; padding-block: 0 1rem; position: relative; }
.thread > li::before {
  content: ""; position: absolute; inset-inline-start: -0.3rem; inset-block-start: 0.45rem;
  inline-size: 0.5rem; block-size: 0.5rem; border-radius: 999px; background: var(--border);
}
.thread > li[data-now]::before { background: var(--foreground); }
/* A whole card that is one link. An <a> is inline by default, so without this
   the card collapses to its text and the padding lies about its box. */
.card-link { display: block; text-decoration: none; color: inherit; }

/* A menu that opens from the chrome. <details> so it closes on Escape and
   needs no script; the panel is anchored to the inline end in both scripts. */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; inset-block-start: calc(100% + 0.35rem); inset-inline-end: 0; z-index: 40;
  min-inline-size: 14rem; padding: 0.375rem;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 28px oklch(0 0 0 / 16%);
}
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; gap: 0.5rem; inline-size: 100%;
  padding: 0.4rem 0.5rem; border: 0; background: transparent;
  border-radius: calc(var(--radius) - 4px);
  font-size: 0.8125rem; text-align: start; text-decoration: none; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--accent); color: var(--accent-foreground); }