/*
 * Colour and type resolve through legal.css's token block, whose values are MBNXT's; the shapes
 * come from the corpus previews named above each block. Nothing here writes a literal.
 *
 * The employee sign-in rail and the reported-content queue: everything below is seen only by a
 * Groupon employee: the footer sign-in and identity line and the notice register at /notices/
 * (the employee tools link from the footer's account line, never the masthead). Split from
 * legal.css to keep both sheets under the repo line cap;
 * index.html links this sheet immediately after legal.css, preserving the original cascade order,
 * so a rule here may override one there. legal.css still owns the shared chrome (tokens, masthead,
 * breadcrumb, footer) and the `body:has(#notices-page)` rule that widens the queue's column.
 */

/* ---------------------------------------------------------------------------
   Employee sign-in and the reported-content queue.

   The only part of this site an employee sees. It sits at the foot of the page
   on purpose: every other reader here is a member of the public reading a legal
   document, and must never be left wondering whether they need an account.

   Everything here paints from the token register, never a literal. A control also
   has to state its own colour, because a <button> does not inherit one: with no
   `color` of its own it falls back to the UA's `buttontext`.
   --------------------------------------------------------------------------- */

/* The last cell of the footer's closing bar, after the lockup and the trademark line, which is
   where the investor site carries the same control (`legal.css`, "Site footer"). `flex: none`
   plus `margin-left: auto` is what pins it to the right end; it used to be `flex: 1 1 100%`,
   which gave it a whole row of its own.

   The pills below are THIS app's button family, not the source's: 32px rather than 28px, because
   MBNXT's button spec is cited by px and the same pill is what `/notices` and `/legal-documents`
   carry. A footer-only button size would be a second button family. */
.footer-account {
  /* `0 1 auto`, not `none`. `flex: none` is `0 0 auto`, which sized this line to its own
     max-content and then refused to shrink, so its `flex-wrap` never had a constrained box to
     wrap inside: signed in, the address plus the tool links plus Sign out measure 789px, and at
     768 that pushed 56px of it off the right edge of the screen and made the whole page scroll
     sideways. Measured in Chromium and in WebKit, both the same. Allowing it to shrink lets the
     wrap it already asks for actually happen; `margin-left: auto` still pins it to the right
     end wherever there is room, and above 900 there is, so nothing there moves. */
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  margin-block: 0;
  font-size: 0.8125rem;
}

/* Button, `tertiary-outline` variant at the SM size: `spec/ui/button.md:57` (white ground, a
   black/15 border, neutral-900 text, hovering to specialDark-300) and `:78` (h-8 32px, px-4 16px,
   text-xs 13, font-bold, pill). Every button in MBNXT is a pill; there is no other option. The
   focus ring is the button family's own black/75 and lives in legal.css beside the masthead CTA. */
.footer-signin,
.footer-signout,
.notice-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  /* `.footer-signout` also dresses the Browser data LINK beside Sign out, which would otherwise
     arrive underlined: same pill, one of them is an <a>. */
  text-decoration: none;
}

.footer-signin:hover,
.footer-signout:hover,
.notice-filter:hover {
  background: #edeff1;             /* MBNXT specialDark-300, the variant's own hover fill */
}

/* neutral-600, not the page's neutral-500 muted ink: this line sits on the footer's neutral-50
   ground, where neutral-500 measures 4.04:1 and misses AA. Same reason as `.footer-note`. */
.footer-account-who {
  color: var(--ink-subtle);
}

/* Button, `default` variant at the SM size: `spec/ui/button.md:52`, green-600 filled with white
   text, hovering to green-700. White on green-600 measures 5.38:1. */
.notice-signin {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--primary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--on-brand);
  cursor: pointer;
}

.notice-signin:hover {
  background: var(--primary-hover);
}

.notice-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0;
}

/* The pressed chip is the `default` button: this is a CTA-shaped selection, not a form control,
   so green is right here where it would be wrong on a checkbox (`spec/anti-patterns.md:23-25`). */
.notice-filter[aria-pressed="true"] {
  border-color: transparent;
  background: var(--primary);
  color: var(--on-brand);
}

.notice-filter[aria-pressed="true"]:hover {
  background: var(--primary-hover);
}

/* The scroll container, never the table itself: see the note on `.legal-doc-table-scroll` in
   legal-admin.css for what `display: block` on a <table> does to its own width. */
.notice-table-scroll {
  overflow-x: auto;
}

.notice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  /* No min-width here on purpose: the per-column floors below already add up to more than any
     narrow screen has (see the arithmetic above them), so the container scrolls exactly when it
     should. A second number here would only be a third place to keep that sum in step. */
}

.notice-table th,
.notice-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.notice-table th {
  font-weight: 600;
  white-space: nowrap;
}

/* Column widths, named on the cells in `NoticeTable.tsx`. Received, Market, Task and State hold
   short fixed values, and at 1440 the table was wrapping every one of them ("Aug 24," / "2026",
   "Open" / "task") to buy room for the address column. They keep their line; What takes the room
   they give back. Below the page's width the table scrolls, as it always has, rather than
   squeezing them again.

   The numbers are measured against the 1216px the page gives them (`--sheet: 76rem` above), not
   guessed: 97 Received + 192 Who + 66 Market + 82 Task + 144 Owner + 196 State = 777, leaving
   What 439 of elastic width against its 288 floor. An earlier round sized Who and What generously
   (15rem/22rem) without checking the total, which is how the last three columns ended up past the
   scroll edge. Widen one of these and re-run the arithmetic against the column, or a reader loses
   a column again without anything looking broken. */
.notice-table .notice-nowrap {
  white-space: nowrap;
}

/* Sized to an email address, which is one token and unreadable split across two lines. */
.notice-table .notice-col-who {
  min-width: 12rem;
}

/* A person's name, on one line. The cell's other states ("Assigned, name unavailable") are
   sentences and may wrap. */
.notice-table .notice-col-owner {
  min-width: 9rem;
}

.notice-table .notice-col-what {
  width: 100%;
  min-width: 18rem;
}

/* The mono face is retired with the old register (one consumer did not justify a second family
   down the wire). A reference number is a run of digits and dashes, so tabular figures keep it
   aligned down the column, which is the only thing the mono was doing here. */
.notice-reference {
  font-size: 0.75rem;              /* text-xxs 12 / 16 */
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  /* The cell keeps its date on one line via nowrap; the reference underneath must be allowed
     to wrap, or its unbroken uuid forces the Received column wide and clips the State pill. */
  white-space: normal;
  max-width: 11rem;
}

.notice-reason {
  min-width: 18rem;
  max-width: 26rem;
}

.notice-urls {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* break-word, never break-all: break-all splits inside a path segment, and every row read as
   "https://www.groupon.com/d" / "eals/...", which looks like corrupted text rather than a wrapped
   address. This breaks a token only when it genuinely cannot fit the column. */
.notice-urls a {
  overflow-wrap: break-word;
}

/* The whole table's links carry their line: this page loads Tailwind's preflight, which resets
   `a { text-decoration: inherit }`, so colour alone was marking "View task" as clickable next to
   the italic "No task" state it sits beside. */
.notice-table a {
  text-decoration-line: underline;
}

.notice-detail,
.notice-email {
  margin: 0.25rem 0 0;
  color: var(--ink-muted);
}

/* The register's muted ink, the same token the row descriptions use, not a lighter grey of its
   own: "Unassigned" is the one word on a queue that says a task still needs somebody, and it was
   the least visible thing in the row. Italic stays: these are system states, not names. */
.notice-anonymous {
  color: var(--ink-muted);
  font-style: italic;
}

/* Badge at the default size: `preview/badges.html:25` h-5 (20px), px-1.5 (6px), text-xs (13),
   bold, pill. The rest state is the `light` variant; the three outcomes take the subtle variants,
   each of which pairs its own wash with its own ink rather than borrowing the page's. */
.notice-state {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  background: #edeff1;             /* MBNXT specialDark-300, the `light` badge */
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.notice-state-open {
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.notice-state-approved {
  background: var(--ok-bg);
  color: var(--primary);
}

.notice-state-denied {
  background: var(--danger-bg);
  color: var(--danger-ink);
}