/*
  The plugin's palette, verbatim.

  Every value here is lifted from UI/PluginUI.Theme.cs in the PfPresets repo rather than picked
  to look similar. The point of the redesign is that somebody who has the plugin open on one
  monitor and the site on the other should not be able to tell they were designed apart, and
  "close enough" greys are exactly what breaks that.

  Two things carry most of the resemblance, and neither is a colour:
    - Nothing is rounded. The plugin draws at FrameRounding 0 almost everywhere.
    - Section headings are small tracked caps, the web equivalent of DrawTrackedCaps.
*/

:root {
  --ground: #171614;        /* window background */
  --panel: #1b1a17;         /* header, rail, footer */
  --field: #211f1d;         /* inputs, cards */
  --raised: #262421;        /* hover fill */
  --rule-strong: #34312e;   /* 2px section dividers */
  --rule-hair: #2b2926;     /* 1px row dividers */
  --border: #4a4642;        /* input / outline borders */

  --ink: #f4f1ee;           /* primary text */
  --dim: #a09b95;           /* secondary text */
  --faint: #6f6a65;         /* help text, placeholders */

  --accent: #9b6dff;        /* the plugin's default accent */
  --accent-hover: #ad86ff;
  --on-accent: #171614;

  --positive: #4ea36b;
  --negative: #d6584a;
  --yellow: #e0a53c;
  --kofi: #e8503c;

  /* Role colours, from the same block in PluginUI.Theme.cs. Data colours: they say what a slot
     is, so unlike the accent they never change. */
  --role-tank: #3752d8;
  --role-healer: #2e8b57;
  --role-dps: #c43333;
  --role-free: #6f6a65;

  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Numbers only. The plugin sets its one large figure in Roboto for the same reason: at 34px
     the face stops being invisible, and proportional digits make a live counter jitter. */
  --font-num: "Roboto Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Tracked caps ──────────────────────────────────────────────────────────
   The plugin's section label: small, wide, muted, and never bold. Bold caps
   read as shouting; tracked caps read as a label. */
.caps {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--field);
  border: 1px solid var(--rule-hair);
  padding: 14px 16px;
}

.card:hover { border-color: var(--rule-strong); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 38px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 90ms linear;
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }

.btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--dim);
  font-weight: 500;
}
.btn-secondary:hover { background: var(--raised); border-color: var(--border); color: var(--ink); }

/* ── Nav strip ─────────────────────────────────────────────────────────────
   The plugin's tab strip: an accent underline on the active one, nothing else.
   No pill, no fill - the underline is the whole affordance. */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule-hair);
}

.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 16px;
  color: var(--faint);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
}
.tab:hover { color: var(--dim); background: var(--raised); }
.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
  background: none;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}