/* ==========================================================================
   Components
   ========================================================================== */

/* ---- Pixel icons -------------------------------------------------------------
   Generated by scripts/lib/icons.mjs. Each tone is a class so icons can be
   recoloured for dark backgrounds by changing the custom properties. */

.px-icon {
  --px-d: var(--green-dark);
  --px-g: var(--green);
  --px-a: var(--amber);
  --px-b: var(--amber-dark);
  --px-c: var(--cream-raised);
  width: 36px;
  height: 36px;
  flex: none;
}

.px-d { fill: var(--px-d); }
.px-g { fill: var(--px-g); }
.px-a { fill: var(--px-a); }
.px-b { fill: var(--px-b); }
.px-c { fill: var(--px-c); }

.on-dark .px-icon,
.site-footer .px-icon {
  --px-d: var(--cream);
  --px-c: var(--green-dark);
}

/* ---- Text utilities ------------------------------------------------------ */

.text-xs { font-size: var(--text-xs); line-height: var(--leading-xs); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-sm); }
.text-lg { font-size: var(--text-lg); line-height: var(--leading-lg); }
.text-xl { font-size: var(--text-xl); line-height: var(--leading-xl); }
.text-muted { color: var(--color-text-muted); }
.text-mono { font-family: var(--font-mono); }

/* Small uppercase label used above headings sparingly (not on hero). */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: var(--tracking-xs);
  text-transform: uppercase;
  font-weight: var(--weight-heavy);
}

/* The amber carries the accent; the text stays in an AA-passing ink. */
.kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--amber);
  box-shadow: 2px 2px 0 var(--amber-dark);
}

/* ---- Buttons ------------------------------------------------------------------ */

.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--cream);
  --btn-border: var(--green-dark);
  --btn-shadow: var(--shadow-primary);
  --btn-shadow-hover: var(--shadow-primary-hover);
  --btn-shadow-active: var(--shadow-primary-active);
  --btn-bg-hover: var(--green);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
  text-decoration: none;
  transform: translateY(calc(var(--depth-1) * -1));
  box-shadow: var(--btn-shadow-hover);
}

.btn:active {
  transform: translateY(var(--depth-1));
  box-shadow: var(--btn-shadow-active);
}

.btn:focus-visible {
  outline-offset: 4px;
}

.btn--secondary {
  --btn-bg: var(--amber);
  --btn-fg: var(--green-dark);
  --btn-border: var(--amber-dark);
  --btn-bg-hover: var(--amber);
  --btn-shadow: var(--shadow-secondary);
  --btn-shadow-hover: var(--shadow-secondary-hover);
  --btn-shadow-active: var(--shadow-secondary-active);
}

.btn--outline {
  --btn-bg: var(--cream-raised);
  --btn-fg: var(--green-dark);
  --btn-border: var(--green-dark);
  --btn-bg-hover: var(--cream);
}

.btn--dark {
  --btn-bg: var(--green-dark);
  --btn-fg: var(--cream);
  --btn-border: var(--green-dark);
  --btn-bg-hover: var(--green-dark);
  --btn-shadow: 0 var(--depth-2) 0 var(--amber-dark);
  --btn-shadow-hover: 0 var(--depth-3) 0 var(--amber-dark);
  --btn-shadow-active: 0 var(--depth-1) 0 var(--amber-dark);
}

.btn--small {
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  background: var(--cream-sunken);
  color: var(--ink-subtle);
  border-color: var(--ink-subtle);
  border-style: dashed;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

/* Text link with a trailing arrow; used for "see all" style links. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
}

.link-arrow::after {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}

.link-arrow:hover::after {
  transform: translateX(3px) rotate(45deg);
}

/* ---- Status labels ----------------------------------------------------------
   Always text plus a shape, never colour alone. */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2);
  color: var(--ink);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: var(--tracking-xs);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  white-space: nowrap;
  background: var(--cream-raised);
  border: var(--border-thin) solid var(--ink-subtle);
  border-radius: var(--radius-sm);
}

.status::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber-dark);
}

/* Planned: hollow square (scoped, not started). */
.status--planned::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--amber-dark);
}

/* In development: half-filled square. */
.status--progress::before {
  background: transparent;
  box-shadow: inset 4px 0 0 var(--amber-dark), inset 0 0 0 2px var(--amber-dark);
}

/* Live: solid green square. For future use when tools launch. */
.status--live::before {
  background: var(--green);
  box-shadow: inset 0 0 0 1px var(--green-dark);
}

/* ---- Callouts ------------------------------------------------------------------- */

.callout {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--cream-raised);
  border: var(--border-thin) solid var(--line);
  border-left: 6px solid var(--amber);
  border-radius: var(--radius-sm);
}

.callout__title {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-bold);
}

.callout--note {
  border-left-color: var(--green);
}

.callout > p:not(.callout__title) {
  color: var(--color-text-muted);
}

/* ---- Breadcrumbs ------------------------------------------------------------ */

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-text-muted);
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--amber-dark);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration-color: var(--line);
}

.breadcrumbs a:hover {
  color: var(--ink);
  text-decoration-color: var(--amber-dark);
}

.breadcrumbs [aria-current='page'] {
  color: var(--ink);
  font-weight: var(--weight-bold);
}

/* ---- Form controls (for future tools) ---------------------------------------- */

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--weight-bold);
}

.field__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.field__error {
  display: flex;
  gap: var(--space-2);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.field__error::before {
  content: '!';
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  background: var(--amber-dark);
  color: var(--cream);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  background: var(--cream-raised);
  color: var(--ink);
  font-size: var(--text-base);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 var(--depth-1) 0 rgb(40 54 24 / 0.08);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.input--mono {
  font-family: var(--font-mono);
}

.input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.input:hover:not(:disabled) {
  border-color: var(--green-dark);
}

.input:focus-visible {
  border-color: var(--green-dark);
  outline-offset: 2px;
}

.input[aria-invalid='true'] {
  border-color: var(--amber-dark);
  border-width: 3px;
}

.input:disabled {
  background: var(--cream-sunken);
  color: var(--ink-subtle);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.input-row .input {
  flex: 1 1 14rem;
  width: auto;
}

/* ---- Empty and error states ----------------------------------------------- */

.state {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--cream-raised);
  border: var(--border-width) dashed var(--ink-subtle);
  border-radius: var(--radius-md);
}

.state__title {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
}

.state__text {
  color: var(--color-text-muted);
  max-width: 36rem;
}

.state--error {
  border-style: solid;
  border-color: var(--amber-dark);
  box-shadow: var(--shadow-panel-warm);
}

/* ---- Panel ----------------------------------------------------------------------
   A bordered surface with a hard offset shadow. Use for one focal element per
   view, not as a default wrapper. */

.panel {
  background: var(--cream-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--green-dark);
}

.panel__title {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-bold);
}

.panel__body {
  padding: var(--space-5) var(--space-4);
}

@media (min-width: 30em) {
  .panel__bar,
  .panel__body {
    padding-inline: var(--space-5);
  }
}

/* ---- Category slots ("hotbar") -------------------------------------------------
   Category navigation modelled loosely on an inventory row. */

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64em) {
  .slots {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--green-dark);
    border-radius: var(--radius-md);
  }
}

.slot {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  background: var(--cream-raised);
  color: var(--ink);
  text-decoration: none;
  border: var(--border-width) solid var(--green-dark);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 calc(var(--depth-1) * -2) 0 var(--cream-sunken);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.slot:hover {
  color: var(--ink);
  border-color: var(--amber-dark);
  box-shadow:
    inset 0 0 0 2px var(--amber),
    inset 0 calc(var(--depth-1) * -3) 0 var(--amber);
  transform: translateY(-2px);
}

.slot:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 2px var(--amber);
}

.slot:focus-visible {
  outline-color: var(--amber);
  outline-offset: 2px;
}

.slot__label {
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

.slot__hint {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.35;
  font-weight: var(--weight-regular);
}

/* Phones: one compact row per category, icon beside the text. */
@media (max-width: 39.99em) {
  .slots {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .slot {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    row-gap: 0;
    align-items: center;
    padding: var(--space-3) var(--space-4);
  }

  .slot .px-icon {
    grid-row: 1 / 3;
  }
}

@media (min-width: 64em) {
  .slot {
    padding: var(--space-4) var(--space-3);
    border-color: var(--cream-raised);
  }

  .slot:focus-visible {
    outline-offset: -6px;
    outline-color: var(--amber-dark);
  }
}

/* ---- Tool rows ------------------------------------------------------------------
   Directory-style list of tools; used on the homepage and the tools overview. */

.tool-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width) solid var(--green-dark);
}

.tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'name status'
    'desc desc';
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border-thin) solid var(--line);
}

.tool-row__name-wrap {
  grid-area: name;
  display: grid;
  gap: 2px;
}

.tool-row__name {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--weight-bold);
}

.tool-row__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.tool-row__desc {
  grid-area: desc;
  color: var(--color-text-muted);
}

.tool-row .status {
  grid-area: status;
  align-self: start;
  margin-top: 3px;
}

@media (min-width: 48em) {
  .tool-row {
    grid-template-columns: 15rem minmax(0, 1fr) auto;
    grid-template-areas: 'name desc status';
    gap: var(--space-5);
  }

  .tool-row__desc {
    padding-top: 2px;
  }
}

/* ---- Numbered points --------------------------------------------------------- */

.points {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: point;
}

.points__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-4);
  counter-increment: point;
}

.points__item::before {
  content: counter(point, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--green);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 0 var(--green-dark);
}

.points__title {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--weight-bold);
}

.points__text {
  color: var(--color-text-muted);
}

/* ---- Facts list (label / value pairs) ------------------------------------- */

.facts {
  display: grid;
  margin: 0;
}

.facts__row {
  display: grid;
  gap: 2px;
  padding-block: var(--space-3);
  border-bottom: var(--border-thin) solid var(--line);
}

.facts__row:last-child {
  border-bottom: 0;
}

.facts dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.facts dd {
  margin: 0;
  font-weight: var(--weight-bold);
}

/* ---- Tick list ----------------------------------------------------------------- */

.ticks {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-3);
}

.ticks li::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-top: 0.55em;
  justify-self: center;
  background: var(--amber);
  box-shadow: 2px 2px 0 var(--amber-dark);
}

/* ---- Discord / community block --------------------------------------------- */

.community {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  background: var(--amber);
  color: var(--green-dark);
  border: var(--border-width) solid var(--amber-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel-warm);
}

.community h2 {
  color: var(--green-dark);
}

.community__text {
  max-width: 38rem;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.community a:not(.btn) {
  color: var(--green-dark);
  text-decoration-color: var(--green-dark);
}

.community :focus-visible {
  outline-color: var(--green-dark);
}

@media (min-width: 48em) {
  .community {
    padding: var(--space-7);
  }
}

@media (min-width: 64em) {
  .community {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-8);
  }
}

.discord-status {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.discord-status__text {
  font-weight: var(--weight-medium);
}

/* ---- Reference tables ----------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border-top: var(--border-width) solid var(--green-dark);
}

.table-wrap:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.ref-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

/* Tables with a long description column: on phones, where they scroll anyway, keep the
   columns readable instead of squeezing them. Wider screens fit them in the column. */
@media (max-width: 47.99em) {
  .ref-table--wide {
    min-width: 52rem;
  }
}

/* Long setting and game rule names may wrap, so tables fit the column on wider screens. */
.ref-table code {
  overflow-wrap: anywhere;
}

.ref-table th,
.ref-table td {
  padding: var(--space-3) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--border-thin) solid var(--line);
}

.ref-table thead th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-xs);
  text-transform: uppercase;
  font-weight: var(--weight-heavy);
}

.ref-table tbody th {
  font-weight: var(--weight-bold);
}

/* ---- Related lists (tool pages and content pages) ------------------------------ */

.related {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.related .tool-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'name status'
    'desc desc';
  gap: var(--space-1) var(--space-4);
}

.related .tool-row__name {
  font-size: var(--text-base);
}

/* ---- Section titles inside panels, rails and results -------------------------- */

.section-title {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  letter-spacing: 0;
}

.section-title + * {
  margin-top: var(--space-3);
}

/* ---- Code blocks in running text ------------------------------------------------ */
/* Same look as the tools' code output. */

.prose pre {
  margin: 0;
  overflow: auto;
  padding: var(--space-4);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  white-space: pre;
  background: var(--cream-raised);
  border: var(--border-thin) solid var(--ink-subtle);
  border-radius: var(--radius-sm);
}

.prose pre:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.prose pre code {
  font-size: inherit;
}

/* Long setting names and values wrap on narrow screens instead of widening the page. */
.prose :is(p, li) > code {
  overflow-wrap: anywhere;
}

/* Beside a rail, text keeps its reading width but tables may use the whole column. */
.with-rail > .prose {
  max-width: none;
}

.with-rail > .prose > :not(.table-wrap) {
  max-width: var(--container-narrow);
}