/* ==========================================================================
   EROAD AU / Obligations table.  Namespace .au-obl

   A real table when the module has room, one stacked card per obligation when
   it does not.  The switch reads the module's own inline size rather than the
   viewport, because a HubSpot dnd wrapper can hand this module anything from
   the full 1288px wrap down to a half width column.

   Separate namespace on purpose.  .au-table is the product comparison table
   and is redefined in three blocks in eroad-au.css that published pages rely
   on.  Nothing here touches it, and .au-obl collides with nothing.

   Tokens all come from :root in eroad-au.css.  No new colours, no border
   radius anywhere.
   ========================================================================== */

.au-obl__box {
  /* Named so a container declared by a wrapper cannot capture the query. */
  container: auobl / inline-size;
  margin-top: var(--s-7);
}

.au-obl__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}

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

.au-obl__table thead th {
  padding: var(--s-3) var(--s-4);
  vertical-align: bottom;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--n-600);
  /* The 2px rule sits on thead, not on the container: a container cannot be
     restyled by its own container query, and on thead it disappears by itself
     when the stacked form hides the header. */
  border-top: 2px solid var(--er-dark);
  border-bottom: var(--line);
}

/* Plain percentage, not a math function: a percentage inside calc() is not
   honoured for cell widths under the fixed table layout algorithm. */
.au-obl__table thead th:first-child,
.au-obl__table tbody th { width: 24%; }

/* ---- body ------------------------------------------------------------- */

.au-obl__table tbody th,
.au-obl__table tbody td {
  padding: var(--s-4);
  vertical-align: top;
  border-bottom: var(--line);
  border-right: var(--line);
  overflow-wrap: break-word;
}

.au-obl__table tbody th:last-child,
.au-obl__table tbody td:last-child { border-right: 0; }

/* The obligation itself, the column a reader runs their eye down. */
.au-obl__table tbody th {
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--er-dark);
  text-wrap: pretty;
}

.au-obl__table tbody th a {
  color: var(--er-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--er-red);
  padding-bottom: 1px;
}

.au-obl__table tbody th a:hover { color: var(--er-red); }

.au-obl__v {
  display: block;
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--n-800);
  text-wrap: pretty;
}

/* Per cell column label.  Real text, never generated content, so it is read
   from the document rather than depending on attr() being announced.  Hidden
   here because thead already carries it, shown once thead is gone. */
.au-obl__k { display: none; }

/* Even row tint rather than a row hover bleed.  The cells carry their own
   padding, so a tint on the cell can never touch the text: the earlier version
   tinted the row itself with zero left padding, which put the obligation name
   hard against the edge of the tint. */
.au-obl__table tbody tr:nth-child(even) th,
.au-obl__table tbody tr:nth-child(even) td { background: var(--n-50); }

.au-obl__footnote {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--er-muted);
}

.au-obl__footnote > :last-child { margin-bottom: 0; }

/* Tracking one row across 1288px is the real difficulty at full width, so the
   hover tint is scoped to the table form only.  Decoration, so losing it in an
   older browser costs nothing. */
@container auobl (min-width: 700px) {
  @media (hover: hover) {
    .au-obl__table tbody tr:hover th,
    .au-obl__table tbody tr:hover td { background: var(--n-100); }
  }
}

/* ---- stacked form ----------------------------------------------------- */
/* 700px is where a 14 word sentence in a quarter column runs past four lines.
   A container query condition cannot read a custom property, so this is a
   literal.  Change it here and in this comment together. */

@container auobl (max-width: 699px) {

  /* display: block only.  flex or grid on a th still drops the header role in
     Firefox, and display: contents breaks everywhere. */
  .au-obl__table,
  .au-obl__table tbody,
  .au-obl__table tr,
  .au-obl__table tbody th,
  .au-obl__table tbody td { display: block; }

  .au-obl__table { width: auto; }

  /* Removed from the accessibility tree deliberately: .au-obl__k becomes the
     single source of every column label, so none is announced twice. */
  .au-obl__table thead { display: none; }

  .au-obl__table tr {
    border: var(--line);
    background: var(--er-white);
  }

  .au-obl__table tr + tr { margin-top: var(--s-4); }

  .au-obl__table tbody th {
    width: auto;
    padding: var(--s-3) var(--s-4);
    font-size: var(--t-body);
    background: var(--n-50);
    border-right: 0;
    border-bottom: var(--line);
  }

  .au-obl__table tbody td {
    padding: var(--s-4);
    border-right: 0;
    border-bottom: var(--line);
  }

  /* Undo the desktop even row tint on cells.  The label band keeps the tint on
     every card, so the two agree and nothing flickers between widths. */
  .au-obl__table tbody tr:nth-child(even) td { background: var(--er-white); }

  .au-obl__table tbody tr td:last-child { border-bottom: 0; }

  .au-obl__k {
    display: block;
    margin-bottom: var(--s-1);
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n-600);
  }
}

/* Browsers with no container query support never reflow, so give them a
   scrolling table rather than a crushed one. */
@supports not (container-type: inline-size) {
  .au-obl__box { overflow-x: auto; }
  .au-obl__table { min-width: 700px; }
}


/* ==========================================================================
   Visual treatment, 28 Aug synthesis. The records column, the reason the
   table exists, carries a 2px red left rule, a canvas ground and a red
   heading. The obligation column steps up to 17px 800. The "where you see
   it" cell is now the product link itself: screen name on a 2px red
   baseline with an arrow, context line beneath.
   ========================================================================== */

.au-obl__table thead th:nth-child(3) { color: var(--er-red-d); }

.au-obl__table thead th:nth-child(3),
.au-obl__table tbody td:nth-child(3) {
  border-left: 2px solid var(--er-red);
  background: var(--bg-canvas);
}

.au-obl__table tbody th {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.au-obl__see { display: inline-block; text-decoration: none; }
.au-obl__see:focus-visible { outline: 3px solid var(--er-red); outline-offset: 2px; }

.au-obl__screen {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.35;
  color: var(--er-dark);
  border-bottom: 2px solid var(--er-red);
  padding-bottom: 2px;
  transition: color .2s ease;
}
.au-obl__screen::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  transition: transform var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .au-obl__see:hover .au-obl__screen { color: var(--er-red-d); }
  .au-obl__see:hover .au-obl__screen::after { transform: translateX(4px); }
}

.au-obl__where {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--er-muted);
}

/* stacked cards: the desktop column framing does not apply */
@container auobl (max-width: 699px) {
  .au-obl__table tbody td:nth-child(3) { border-left: 0; background: transparent; }
}