/* Shared styles for IIL public pages: layout primitives, category tags, doc/list
   pages, schedule rows, pagination, and the Play in IIL modal form.
   Consumes design_tokens.css. Team colors are NEVER defined here — they render
   inline from the Team.color DB field. */

/* ===== Layout primitives ===== */
.iil-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.iil-eyebrow {
  font-family: var(--iil-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iil-purple-600);
  margin-bottom: 8px;
}
html[data-theme="dark"] .iil-eyebrow { color: var(--iil-purple-300); }

.iil-section-title {
  font-family: var(--iil-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.01em;
  color: var(--iil-text);
  margin: 0 0 16px;
}

.iil-empty,
.iil-doc-empty {
  padding: 32px;
  border: 1.5px dashed var(--iil-hairline-2);
  border-radius: 14px;
  color: var(--iil-text-mute);
  font-family: var(--iil-font-body);
  text-align: center;
}

/* ===== Buttons ===== */
.iil-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: var(--iil-font-display);
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--iil-ease-out), color 0.2s, border-color 0.2s, transform 0.15s;
}
.iil-btn:hover { transform: translateY(-1px); text-decoration: none; }
.iil-btn-accent { background: var(--iil-accent); color: var(--iil-accent-ink); }
.iil-btn-accent:hover { background: var(--iil-accent-hover); color: var(--iil-accent-ink); }
.iil-btn-ghost { background: transparent; color: var(--iil-hero-text); border-color: rgba(255,255,255,0.35); }
.iil-btn-ghost:hover { border-color: rgba(255,255,255,0.7); color: var(--iil-hero-text); }
.iil-btn-ghost-2 { background: transparent; color: var(--iil-text); border-color: var(--iil-hairline-2); }
.iil-btn-ghost-2:hover { border-color: var(--iil-text-mute); color: var(--iil-text); }
.iil-btn-block { width: 100%; }

/* ===== Announcement category tags ===== */
.iil-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--iil-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.iil-tag--general,
.iil-tag--schedule { background: var(--iil-purple-100); color: var(--iil-purple-700); }
.iil-tag--roster { background: #E1F5EE; color: #0F6E56; }
.iil-tag--facility { background: #FDF1DA; color: #854F0B; }
.iil-tag--playoffs { background: var(--iil-accent-soft); color: var(--iil-accent-ink); }

/* ===== Team color dot + HOME badge (homepage + schedule) ===== */
.iil-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  flex: none;
  vertical-align: baseline;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.iil-badge-home {
  font-family: var(--iil-font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--iil-purple-100);
  color: var(--iil-purple-700);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 8px;
  flex: none;
}
html[data-theme="dark"] .iil-badge-home { background: rgba(127,119,221,0.22); color: var(--iil-purple-300); }

/* ===== Long-form document pages (rules, article detail) ===== */
.iil-doc-page,
.iil-list-page {
  padding: 24px 0 72px;
  font-family: var(--iil-font-body);
}
.iil-doc-title {
  font-family: var(--iil-font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  letter-spacing: -0.01em;
  color: var(--iil-text);
  margin: 0 0 20px;
}
/* Spans the shared page container, same as the announcements list page. */
.iil-doc-body {
  color: var(--iil-text-2);
  line-height: 1.65;
}
.iil-doc-body h1, .iil-doc-body h2, .iil-doc-body h3,
.iil-doc-body h4, .iil-doc-body h5, .iil-doc-body h6 {
  font-family: var(--iil-font-display);
  color: var(--iil-text);
  margin: 1.4em 0 0.5em;
}
.iil-doc-body a { color: var(--iil-purple-600); }
html[data-theme="dark"] .iil-doc-body a { color: var(--iil-purple-300); }
/* The SMS consent language on /privacy/, set off as a quotation. This is the public
   Call to Action a carrier reviewer reads, so it wants to be findable on the page
   rather than buried in body copy. */
.iil-consent-quote {
  margin: 1em 0;
  padding: 14px 18px;
  border-left: 3px solid var(--iil-purple-600);
  background: rgba(83, 74, 183, 0.06);   /* --iil-purple-600 */
  border-radius: 6px;
}
.iil-consent-quote p { margin: 0 0 .5em; }
.iil-consent-quote p:last-child { margin-bottom: 0; }
html[data-theme="dark"] .iil-consent-quote {
  border-left-color: var(--iil-purple-300);
  background: rgba(175, 169, 236, 0.10);  /* --iil-purple-300 */
}
.iil-doc-body img { max-width: 100%; height: auto; }
.iil-doc-meta {
  margin-top: 28px;
  color: var(--iil-text-mute);
  font-size: 0.9rem;
}
.iil-doc-byline {
  color: var(--iil-text-mute);
  font-size: 0.92rem;
  margin-bottom: 24px;
}

/* ===== List / archive pages ===== */
.iil-list-item {
  background: var(--iil-bg-2);
  border: 1px solid var(--iil-hairline);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
.iil-list-title {
  font-family: var(--iil-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--iil-text);
  margin: 10px 0 6px;
}
.iil-list-body { color: var(--iil-text-2); line-height: 1.6; margin: 0 0 8px; }
.iil-list-date { color: var(--iil-text-dim); font-size: 0.85rem; }

/* Article archive cards */
.iil-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.iil-article-card {
  background: var(--iil-bg-2);
  border: 1px solid var(--iil-hairline);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.iil-article-card .iil-list-body { flex: 1; }
.iil-pinned-badge {
  font-family: var(--iil-font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--iil-accent-soft);
  color: var(--iil-accent-ink);
  border-radius: 6px;
  padding: 2px 8px;
}
.iil-read-more {
  font-family: var(--iil-font-display);
  font-weight: 600;
  color: var(--iil-purple-600);
  text-decoration: none;
  margin-top: 10px;
}
.iil-read-more:hover { text-decoration: underline; }
html[data-theme="dark"] .iil-read-more { color: var(--iil-purple-300); }

.iil-related { margin-top: 48px; }

/* Pagination */
.iil-pagination {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  font-family: var(--iil-font-body);
}
.iil-page-link {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--iil-hairline-2);
  color: var(--iil-text);
  text-decoration: none;
  font-family: var(--iil-font-display);
  font-weight: 600;
  font-size: 0.9rem;
}
.iil-page-link:hover { background: var(--iil-card-hover); color: var(--iil-text); }
.iil-page-current { color: var(--iil-text-mute); font-size: 0.9rem; }

/* ===== Public schedule page ===== */
.iil-week { margin-bottom: 36px; }
.iil-week-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--iil-hairline-2);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.iil-week-title {
  font-family: var(--iil-font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--iil-text);
  margin: 0;
}
.iil-week-date { color: var(--iil-text-mute); font-size: 0.9rem; }
.iil-playoff-tag {
  font-family: var(--iil-font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--iil-accent-soft);
  color: var(--iil-accent-ink);
  border-radius: 6px;
  padding: 2px 8px;
}
.iil-sched-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--iil-bg-2);
  border: 1px solid var(--iil-hairline);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-family: var(--iil-font-body);
}
.iil-sched-time {
  font-family: var(--iil-font-display);
  font-weight: 600;
  color: var(--iil-text);
  min-width: 84px;
}
.iil-sched-teams { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--iil-text); font-weight: 600; }
.iil-sched-vs {
  color: var(--iil-text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.iil-bye-callout {
  border: 1.5px dashed var(--iil-hairline-2);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  color: var(--iil-text-mute);
  font-family: var(--iil-font-body);
}
.iil-tbd-row { color: var(--iil-text-mute); font-style: italic; }

/* ===== Play in IIL modal + form ===== */
.iil-modal-content {
  background: var(--iil-bg-2);
  color: var(--iil-text);
  border: 1px solid var(--iil-hairline);
  border-radius: 16px;
  font-family: var(--iil-font-body);
}
.iil-modal-header { border-bottom: 1px solid var(--iil-hairline); align-items: flex-start; }
.iil-modal-title {
  font-family: var(--iil-font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--iil-text);
  margin: 0;
}
html[data-theme="dark"] .iil-modal-title { color: var(--iil-text) !important; }
.iil-modal-sub { margin: 4px 0 0; color: var(--iil-text-mute); font-size: 0.92rem; }
html[data-theme="dark"] .iil-modal-content .btn-close { filter: invert(1) grayscale(100%); }

.iil-form-row { display: flex; gap: 14px; }
.iil-form-row .iil-form-field { flex: 1; }
.iil-form-field { margin-bottom: 14px; }
.iil-form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 4px;
  color: var(--iil-text-2);
}
.iil-form-field input,
.iil-form-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--iil-hairline-2);
  background: var(--iil-bg);
  color: var(--iil-text);
  font-family: var(--iil-font-body);
  font-size: 0.95rem;
}
.iil-form-field input:focus,
.iil-form-field select:focus {
  outline: 2px solid var(--iil-purple-500);
  outline-offset: 1px;
  border-color: var(--iil-purple-500);
}
.iil-req { color: #b3261e; }
html[data-theme="dark"] .iil-req { color: #ff8a80; }
.iil-optional { color: var(--iil-text-dim); font-weight: 400; }
.iil-form-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; }
/* A checkbox sharing a row with a labelled control (the roster preference beside the NTRP
   select). Centred rather than bottom-aligned: the checkbox cell has no label above it and
   no error slot below it, so aligning either edge would push it off the select it pairs
   with, and its own label wraps to two or three lines at half width. */
.iil-form-row--controls { align-items: center; }
.iil-form-field--check .iil-form-check { margin: 0; }
.iil-form-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--iil-purple-600); flex: none; }
.iil-form-check label { font-size: 0.92rem; color: var(--iil-text-2); }
/* SMS consent block. Wraps rather than sitting on one line, because it carries the
   full CTIA disclosure and both legal links, not a one-line label. */
.iil-consent-check { flex-wrap: wrap; }
.iil-consent-check label { flex: 1; min-width: 0; font-size: 0.86rem; line-height: 1.45; }
.iil-consent-check input:disabled { opacity: .45; cursor: not-allowed; }
/* Greyed with the control, so "not available yet" reads as one state rather than an
   enabled-looking paragraph beside a dead checkbox. */
.iil-consent-check:has(input:disabled) label,
.iil-consent-check:has(input:disabled) .iil-consent-note { opacity: .7; }
.iil-consent-note {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--iil-text-2);
}
/* Centred, and the last thing before the submit button — the two legal links read as a
   footer to the form rather than as a continuation of the consent paragraph above them. */
.iil-consent-links { flex-basis: 100%; margin-top: 10px; font-size: 0.82rem; text-align: center; }
.iil-consent-links a { color: var(--iil-purple-600); }
html[data-theme="dark"] .iil-consent-links a { color: var(--iil-purple-300); }
.iil-field-error { color: #b3261e; font-size: 0.82rem; min-height: 1em; margin-top: 3px; }
html[data-theme="dark"] .iil-field-error { color: #ff8a80; }
.iil-form-error {
  background: rgba(179,38,30,0.08);
  border: 1px solid rgba(179,38,30,0.35);
  color: #b3261e;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
html[data-theme="dark"] .iil-form-error {
  color: #ff8a80;
  border-color: rgba(255,138,128,0.4);
  background: rgba(255,138,128,0.08);
}
.iil-success-msg { font-size: 1rem; color: var(--iil-text-2); line-height: 1.6; margin: 8px 0 18px; }

/* Honeypot: moved off-screen (NOT display:none, so naive bots still fill it) */
.iil-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 860px) {
  .iil-article-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .iil-container { padding: 0 18px; }
  .iil-article-grid { grid-template-columns: 1fr; }
  .iil-form-row { flex-direction: column; gap: 0; }
}