/* Colour Code Converter (#827).
 *
 * One column, one action. The swatch is the biggest thing on the page on
 * purpose: the numbers are exact either way, but the only way to judge whether
 * a colour is the one you meant is to look at a decent-sized area of it.
 *
 * The page chrome is deliberately near-neutral. Any saturated UI colour sits
 * next to the swatch and shifts how it reads (simultaneous contrast), which
 * would make this tool lie about the one thing it exists to show. */

:root {
  --ink: #1b1f24;
  --ink-soft: #5b6673;
  --line: #dfe3e8;
  --bg: #f6f7f9;
  --card: #ffffff;
  --accent: #2f6fb0;
  --bad: #b3261e;
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 44rem; margin: 0 auto; }

/* -- header -------------------------------------------------------------- */

.head { margin-bottom: 1.5rem; }
h1 { margin: 0 0 .35rem; font-size: 1.6rem; letter-spacing: -.01em; }
.lede { margin: 0; color: var(--ink-soft); }

/* -- the form ------------------------------------------------------------ */

.form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.label {
  display: block;
  margin-bottom: .5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.row { display: flex; gap: .6rem; }

.input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .7rem .85rem;
  font: 1.05rem/1.3 var(--mono);
  color: var(--ink);
  background: #fff;
  border: 1px solid #c6ccd4;
  border-radius: 8px;
}
.input:focus {
  outline: 3px solid rgba(47, 111, 176, .28);
  outline-offset: 1px;
  border-color: var(--accent);
}
.input-bad { border-color: var(--bad); }

.go {
  flex: 0 0 auto;
  padding: .7rem 1.15rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}
.go:hover { background: #285f97; }
.go:focus-visible { outline: 3px solid rgba(47, 111, 176, .4); outline-offset: 2px; }

.error {
  margin: .7rem 0 0;
  padding: .6rem .75rem;
  color: var(--bad);
  background: #fdf1f0;
  border: 1px solid #f3cfcc;
  border-radius: 8px;
  font-size: .93rem;
}

.examples { margin: .9rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.example {
  display: inline-block;
  margin: .15rem .1rem;
  padding: .12rem .45rem;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--accent);
  text-decoration: none;
  background: #eef3f9;
  border: 1px solid #dbe5f0;
  border-radius: 6px;
}
.example:hover { background: #e2ebf5; text-decoration: underline; }

/* -- the result ---------------------------------------------------------- */

.result {
  margin-top: 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  padding: 1.5rem;
  /* The checkerboard shows through nothing here (there is no alpha channel in
   * this tool), but the inner ring keeps a near-white swatch from dissolving
   * into the card behind it. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.swatch-hex { font: 700 1.9rem/1.1 var(--mono); letter-spacing: .02em; }
.swatch-rgb { font: .95rem/1.3 var(--mono); opacity: .82; }

.pair { display: flex; flex-wrap: wrap; gap: 1px; margin: 0; background: var(--line); }
.field { flex: 1 1 14rem; padding: 1rem 1.25rem; background: var(--card); }
.field dt {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field dd { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 0; }
.value { font: 600 1.15rem var(--mono); }
.alt { flex-basis: 100%; font: .85rem var(--mono); color: var(--ink-soft); }

.copy {
  padding: .2rem .55rem;
  font-size: .78rem;
  color: var(--ink-soft);
  background: #f1f3f6;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.copy:hover { background: #e7eaef; color: var(--ink); }
.copy[data-copied] { color: #1d7a44; border-color: #b6dcc4; background: #eef8f2; }

.channels { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.channels caption {
  padding: .8rem 1.25rem .2rem;
  font-size: .8rem;
  color: var(--ink-soft);
  text-align: left;
}
.channels th, .channels td {
  padding: .5rem 1.25rem;
  text-align: left;
  border-top: 1px solid #eef0f3;
  font-variant-numeric: tabular-nums;
}
.channels thead th {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.channels tbody th { font-weight: 500; }
.channels code { font-family: var(--mono); }

.dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin-right: .5rem;
  border-radius: 50%;
  vertical-align: baseline;
}
.dot-red { background: #d64545; }
.dot-green { background: #3d9a50; }
.dot-blue { background: #3b74c4; }

.notes {
  margin: 0;
  padding: .75rem 1.25rem .9rem 2.4rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--ink-soft);
  background: #fbfcfd;
}

/* -- footer -------------------------------------------------------------- */

.foot { margin-top: 1.5rem; font-size: .85rem; color: var(--ink-soft); }
.foot code { font-family: var(--mono); font-size: .95em; }

@media (max-width: 30rem) {
  .row { flex-wrap: wrap; }
  .go { width: 100%; }
  .swatch-hex { font-size: 1.5rem; }
}