/* ============================================================================
   Tier List Maker — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels,
   tables, header, footer, focus rings. This file adds the accent and only
   what is unique to this tool.

   Accent — red-orange, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #ef7461  6.61:1 on --bg   6.10:1 on --surface   6.84:1 on --bg-sunk
     light #961b08  8.19:1 on --bg   8.55:1 on --surface   7.51:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.

   NOTE: the tier ROW colours (S=red, A=orange, B=yellow, C=green, D=blue,
   F=grey) are their own functional palette, unrelated to this brand accent —
   they exist so a tier list reads at a glance, the same way every other
   tier-list convention does. They are set inline per row (background-color)
   because they are user-editable data, not fixed chrome.
   ========================================================================= */
:root { --accent: #ef7461; --accent-dim: rgba(239, 116, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #961b08; --accent-dim: rgba(150, 27, 8, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* base has no visually-hidden helper; the file-upload input and the live
   status region need one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Toolbar — add tiles, board-level actions
   ========================================================================= */

.tlm-toolbar {
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  margin-bottom: 1rem;
}

.tlm-addrow { display: flex; gap: 0.5rem; }
.tlm-addrow input[type="text"] { flex: 1 1 auto; }

.tlm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

/* the file input is visually-hidden; its <label> is the styled control, so
   keyboard and screen-reader users get the native picker via a real label
   association instead of a synthetic click() proxy */
.tlm-file-label { cursor: pointer; }

/* ============================================================================
   Board
   ========================================================================= */

.tlm-board { margin-bottom: 0.75rem; }

.tier-row, .tray-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.tier-head {
  flex: 0 0 clamp(4.75rem, 20vw, 7.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.6rem 0.4rem;
  position: relative;
  /* background-color set inline per row from tier.color (user data) */
}

.tray-row .tier-head {
  background: var(--surface-2);
  color: var(--text-dim);
}

.tier-label-input {
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.3rem;
  /* colour set inline (per-row, computed for contrast against tier.color) */
}
.tier-label-input:hover { border-color: rgba(0, 0, 0, 0.25); }
.tier-label-input:focus-visible {
  outline: none;
  border-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.tier-row-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.tier-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1;
  color: inherit;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tier-btn:hover { background: rgba(255, 255, 255, 0.38); }
.tier-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tier-swatch-btn {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  /* background-color set inline = the tier's own colour, so the swatch IS
     the current colour, not a separate icon */
}

.tlm-palette {
  display: none;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
  padding-top: 0.4rem;
  max-width: 9rem;
}
.tlm-palette.is-open { display: flex; }

.tlm-swatch {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  cursor: pointer;
  padding: 0;
}
.tlm-swatch:hover, .tlm-swatch:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.tier-tiles, .tray-tiles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5rem;
  padding: 0.65rem;
  background: var(--bg-sunk);
}

.tlm-empty-hint {
  font-size: 0.8125rem;
  color: var(--text-faint);
  align-self: center;
}

/* ------------------------------------------------------------------ tiles */

.tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  max-width: 12rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  overflow-wrap: anywhere;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}
.tile:hover { border-color: var(--accent); }

.tile[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.tile-image { padding: 0.25rem; }
.tile-image .tile-img {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 4px;
  pointer-events: none;
}

/* while a tile is picked up, every drop target gets an inviting dashed
   outline, and highlights further on hover — pure CSS, no per-element JS */
.tlm-board.is-picking [data-drop-list] {
  outline: 2px dashed var(--line-strong);
  outline-offset: -2px;
}
.tlm-board.is-picking [data-drop-list]:hover {
  outline-color: var(--accent);
  background: var(--accent-dim);
}
.tlm-board.is-picking .tile:not([aria-pressed="true"]) {
  cursor: pointer;
}

/* ============================================================================
   Instructions / status
   ========================================================================= */

.tlm-instructions { margin-bottom: 1rem; }
.tlm-status-line {
  min-height: 1.3em;
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  color: var(--accent);
}

@media (max-width: 26rem) {
  .tier-head { flex-basis: 4.25rem; padding: 0.5rem 0.3rem; }
  .tier-label-input { font-size: 0.9rem; }
}

/* ============================================================================
   Article furniture shared by the rich content below the tool
   ========================================================================= */

.section { max-width: 74ch; }
.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}