/* Replaces the old Bootstrap + sass build with plain modern CSS.
   No build step, no bundling: the container serves this file as-is. */

:root {
  --ink: #1c1e21;
  --muted: #6b7280;
  --line: #e3e5e8;
  --accent: #1a5fb4;
  --accent-ink: #fff;
  --danger-bg: #fdecec;
  --danger-ink: #a02020;
  --danger-line: #f0c0c0;
  --ok-bg: #eaf5ea;
  --ok-ink: #1e6b2e;
  --page: #fff;
  --shell: #fafbfc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e7e9;
    --muted: #9aa1ab;
    --line: #2e3238;
    --accent: #6ea8fe;
    --accent-ink: #10131a;
    --danger-bg: #3a2020;
    --danger-ink: #f2b8b8;
    --danger-line: #5a2c2c;
    --ok-bg: #1e2f22;
    --ok-ink: #a6dfb4;
    --page: #16181c;
    --shell: #101216;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1rem 4rem;
  background: var(--shell);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

main {
  max-width: 60rem;
  margin: 0 auto;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem;
}

/* 60rem suits the checkout pages, which are a column of form fields. The
   activations table is ten columns wide and does not fit in it: at 60rem the
   nowrap columns alone claim nearly the whole width, leaving the user agent a
   dozen characters and a row seven lines tall. Widening the card for this one
   page is a smaller change than dropping columns, and costs nothing below the
   breakpoint - max-width only ever caps. */
main.wide { max-width: 76rem; }

/* Logo left, sign-out in the top right corner of the card. The control belongs
   to the page rather than to the list heading: it is the only thing on the page
   that is not about one particular activation, and the corner is where a signed
   -in user looks for it. */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.logo { display: block; height: auto; max-width: 257px; }

h1 { font-size: 1.6rem; margin: 0 0 .75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; margin: 0 0 1rem; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; }

a { color: var(--accent); }

.muted { color: var(--muted); font-size: .92rem; }

label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .92rem; }

input[type="text"], input[type="email"] {
  width: 100%;
  max-width: 26rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
}

input:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field { margin-bottom: 1.1rem; }

button {
  font: inherit;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

button:disabled { opacity: .55; cursor: not-allowed; }

button.link {
  background: none;
  border-color: var(--line);
  color: var(--accent);
  padding: .3rem .7rem;
  font-size: .88rem;
}

.alert {
  padding: .7rem .9rem;
  border-radius: 6px;
  margin-bottom: 1.2rem;
  background: var(--danger-bg);
  color: var(--danger-ink);
  border: 1px solid var(--danger-line);
}

.alert.ok {
  background: var(--ok-bg);
  color: var(--ok-ink);
  border-color: transparent;
}

.table-scroll { overflow-x: auto; margin-bottom: 1rem; }

table { border-collapse: collapse; width: 100%; font-size: .9rem; }

/* The activations table carries two client-supplied strings of unbounded
   length - the user agent and the machine name. Ellipsising them kept the table
   one line tall but still left it wider than the card, so the row scrolled and
   Unregister sat off-screen. Letting those two wrap costs vertical space, which
   the page has, and buys the whole table fitting without a scrollbar.

   overflow-wrap:anywhere rather than break-word: a user agent is one long
   unbroken token, and break-word only breaks where a break opportunity already
   exists - which for "Mozilla/5.0(Windows NT 10.0; Win64; x64)" is nowhere near
   often enough. */
td.wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* overflow-wrap:anywhere drops these columns' minimum content width to a
   single character, so the auto table algorithm - which hands every other
   column its nowrap minimum first - is free to crush them to nothing, and does.
   A min-width puts the floor back. Percentages do not work here: they are
   scaled down along with everything else once the demands exceed the table. */
td:nth-child(5) { min-width: 22ch; }
td:nth-child(7) { min-width: 13ch; }

/* Wrapping alone is not enough: ten columns do not fit a phone whatever they
   do with their text, so below roughly 970px the table scrolls again and
   Unregister is the last of them. Pinning the actions column to the right edge
   of the scroller keeps the only control on the page reachable at any width,
   while the data columns scroll under it. var(--page) so the pinned cell is
   opaque in both colour schemes. */
th:last-child,
td:last-child {
  position: sticky;
  right: 0;
  /* z-index is not optional here: a sticky cell without one is painted in
     document order, so the scrolling machine-name column renders straight
     through it and the button becomes unreadable. */
  z-index: 1;
  background: var(--page);
  border-left: 1px solid var(--line);
}

th, td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* The columns left out here hold a short, atomic value - a date, an address, a
   count - that reads wrong broken across lines. Product is not among them: it
   wraps, because "SeoTools for Excel 10" held on one line claims 140px that the
   user agent needs more. Headers are excluded throughout on purpose: "First
   activated" wrapping to two lines costs a few pixels of height once and saves
   ~40px of width on every row. */
td:nth-child(1), td:nth-child(3), td:nth-child(4),
td:nth-child(6), td:nth-child(8), td:nth-child(9), td:last-child {
  white-space: nowrap;
}

th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--shell) 55%, transparent); }

/* The stripe above is deliberately translucent, which is fine for a cell that
   scrolls with the table - and wrong for the pinned one, which has to hide the
   columns passing beneath it. Same colour, composited against --page instead of
   transparent, so it is opaque. Specificity matches the stripe rule so it wins
   without !important. */
tbody tr:nth-child(odd) td:last-child {
  background: color-mix(in srgb, var(--shell) 55%, var(--page));
}

/* The footer reads as a caption under the card, so its text has to start on the
   card's text - not on the card's outer edge. It matched neither before: same
   max-width as main but none of main's padding, which put it 2rem to the left on
   every page, and 8rem to the right on the wide one, where main outgrew it.
   The +1px is main's border, which sits inside the box and pushes its content
   over by exactly that much. */
footer {
  max-width: 60rem;
  margin: 1.5rem auto 0;
  padding: 0 calc(2rem + 1px);
  color: var(--muted);
  font-size: .85rem;
}

main.wide + footer { max-width: 76rem; }

[hidden] { display: none !important; }