/* =====================================================================
   LENS sitting-schedule tables : one component, every LENS landing page
   ---------------------------------------------------------------------
   WHY THIS FILE EXISTS. The same table was written twice and then
   diverged. lens-entry-in.php grew a real small-screen treatment; the
   five .com product pages (UCAT, SAT/ACT, IELTS, Law, Cognitive) used a
   different component altogether, table.secs, whose only answer to a
   narrow screen was a horizontal scrollbar. Measured in a 504px viewport
   on lens-cognitive.php: the table was 517px inside a 460px wrapper, so
   57px hung off the side and the last column, the one saying which
   battery a subtest belongs to, was cut in half. A reader on a phone had
   to swipe sideways to find out what they were looking at.

   Both are now this file, so the next fix to this table happens once
   rather than six times.

   WHAT IS DELIBERATE HERE.

   Numbers are right-aligned and tabular. A column of figures is read by
   comparing it down its own length, and that only works when the units
   line up and the glyphs do not change width between 1 and 7.

   Above 820px it is a table. Below that it stops being one: each row
   becomes a block with the section name as its heading and one labelled
   figure per line, the label coming from the cell's data-l attribute.
   That attribute is what lets the header row be hidden without the
   numbers losing their meaning, so every td carrying a figure needs one.

   Between 561px and 820px those blocks sit two to a row. A tablet has
   the width for it, and the Cognitive Profile sitting has eight subtests,
   which is a long scroll as a single column.

   The label grey is set here rather than taken from --mut on purpose.
   Five of the pages linking this file never define --mut, and the ones
   that do still carry the old #8a8275: 3.80:1 on white and 3.44:1 on
   cream, which fails WCAG AA at the size these labels are set. #6E6759
   is the same warm grey at 5.60:1 and 5.08:1.
   ===================================================================== */

/* The chrome the table sits in. Was five copies of the same inline style
   attribute; --shadow only exists on lens-entry-in.php, hence the
   fallback, which is that page's own value. */
.sched-card{
  border: var(--bw, 3px) solid var(--ink, #16130D);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow, 6px 6px 0 var(--ink, #16130D));
  background: var(--w, #FFFFFF);
}

table.sched{
  --lt-surface: var(--w, #FFFFFF);
  --lt-band:    var(--cream, #FBF3E2);
  --lt-rule:    var(--line, #E4D9BF);
  --lt-ink:     var(--ink, #16130D);
  --lt-label:   #6E6759;
  /* Header type sits on the ink bar, so it takes the cream rather than
     the label grey, which would be 2.96:1 on that fill and unreadable. */
  --lt-head-text: var(--cream, #FBF3E2);

  width: 100%;
  border-collapse: collapse;
  background: var(--lt-surface);
  table-layout: fixed;
  color: var(--lt-ink);
}

table.sched th,
table.sched td{
  border-bottom: 1px solid var(--lt-rule);
  padding: 11px 12px;
  text-align: left;
  font-size: .95rem;
  vertical-align: top;
}

/* THE HEADER IS A SOLID BAR, carried over from the .com product pages,
   which is the one thing that component did better: the bar states where
   the table begins, so the eye does not have to work it out from a rule
   that looks like every other rule in the body. It reads as the top edge
   of the card because .sched-card clips it to the same 14px radius.

   Cream on ink is 16.79:1, so the smallest type in the component sits on
   the highest contrast in it. */
table.sched thead th{
  background: var(--lt-ink);
  color: var(--lt-head-text);
  border-bottom: none;
}

/* .75rem is 12px. A column heading is what tells a reader what the number
   under it means, so it cannot be the smallest type on the page. */
table.sched th{
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lt-label);
}

/* Figures, right-aligned so the column can be read down its own length.
   nowrap is why "20 min" stays on one line rather than breaking after the
   number and leaving the unit stranded on the next.

   The heading gets the alignment but NOT the nowrap, and that distinction
   is load-bearing: "Seconds per question" held on one line is about 180px
   of unbreakable text in a 152px column, which pushed the four-column
   India tables 86px past their own card at 821px and let the card's
   overflow:hidden clip the result. Headings wrap. Figures do not. */
table.sched th.n,
table.sched td.n{
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.sched td.n{ white-space: nowrap; }

/* The fifth column is prose (what a section plays, what tool it allows,
   how it is marked), so it stays left-aligned and is allowed to wrap. */
table.sched td.note{ white-space: normal; }

table.sched tbody tr:last-child td{ border-bottom: none; }
table.sched tr.tot td{ background: var(--lt-band); font-weight: 700; }
table.sched tfoot td{ border-bottom: none; }

/* A sentence about the whole table spans the whole table. Putting it in
   the last cell of the total row is what once forced that column to
   654px and squeezed the section names onto two lines. */
table.sched td.wall{
  background: var(--lt-band);
  border-bottom: none;
  border-top: 1px solid var(--lt-rule);
  font-size: .9rem;
  color: var(--lt-label);
  font-weight: 400;
  text-align: left;
}

/* Column widths, pinned to what the contents actually need so the slack
   lands on the section-name column, which is the one place it is useful.
   c-n / c-t / c-b are the names lens-entry-in.php already ships; the
   c-q / c-time / c-pace aliases read better in new markup. */
table.sched col.c-n,    table.sched col.c-q   { width: 118px; }
table.sched col.c-t,    table.sched col.c-time{ width: 112px; }
table.sched col.c-b,    table.sched col.c-pace{ width: 152px; }
table.sched col.c-note                        { width: 23%;   }

/* ---------------------------------------------------------------------
   821px to 1024px. Still a table, but a landscape tablet does not have
   the room the desktop widths assume, and a five-column sitting like
   IELTS or UCAT is the one that runs out of it first.
   --------------------------------------------------------------------- */
@media (min-width: 821px) and (max-width: 1024px){
  table.sched th,
  table.sched td{ padding: 10px 9px; font-size: .9rem; }
  table.sched col.c-n,  table.sched col.c-q   { width: 100px; }
  table.sched col.c-t,  table.sched col.c-time{ width: 94px;  }
  /* 140px, not 128px, and the twelve pixels are the whole point: "SECONDS
     PER" measures 113px and the cell carries 18px of padding, so 128px
     left it three pixels short and the heading broke into three lines.
     That made the header bar 83px tall against 30px rows, which the ink
     fill turned from a slight awkwardness into the loudest thing on the
     page. Measured with the actual computed font, not estimated. */
  table.sched col.c-b,  table.sched col.c-pace{ width: 140px; }
  table.sched col.c-note                      { width: 21%;   }
}

/* ---------------------------------------------------------------------
   820px and below: the table stops being a table.
   Five columns cannot fit a phone without either a sideways swipe or type
   nobody can read, and the sideways swipe is what this file exists to
   delete.
   --------------------------------------------------------------------- */
@media (max-width: 820px){
  table.sched{ table-layout: auto; display: block; }
  table.sched colgroup,
  table.sched thead{ display: none; }
  table.sched tbody{ display: block; }
  table.sched tfoot{ display: block; }

  table.sched tr{
    display: block;
    border-bottom: 1px solid var(--lt-rule);
    padding: 12px 0;
  }

  table.sched td{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    border: none;
    padding: 4px 14px;
    text-align: right;
  }

  /* 12px, and by here this pseudo-element IS the column header: the table
     has stopped being a table, so every value depends on it to say what
     it is. It is the one label on the page that must not be the smallest
     thing on it. */
  table.sched td:before{
    content: attr(data-l);
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lt-label);
    text-align: left;
    flex: 0 0 auto;
  }

  table.sched td:empty{ display: none; }

  /* The section name is the card's heading, not a labelled figure. */
  table.sched td:first-child{
    display: block;
    text-align: left;
    padding: 0 14px 8px;
    font-size: 1rem;
  }
  table.sched td:first-child:before{ content: none; }

  /* Prose in the fifth column wraps under its label rather than fighting
     it for the same line. */
  table.sched td.note{
    display: block;
    text-align: left;
    padding: 4px 14px;
  }
  table.sched td.note:before{ display: block; margin-bottom: 2px; }

  table.sched tr.tot{ background: var(--lt-band); }
  table.sched tr.tot td{ background: none; }

  table.sched td.wall{
    display: block;
    text-align: left;
    padding: 12px 14px;
    border-top: 1px solid var(--lt-rule);
  }
  table.sched td.wall:before{ content: none; }
}

/* ---------------------------------------------------------------------
   561px to 820px: two blocks to a row. Eight subtests in one column is a
   long scroll on a device that has the width for two.
   --------------------------------------------------------------------- */
@media (min-width: 561px) and (max-width: 820px){
  table.sched tbody{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  table.sched tbody tr{ border-right: 1px solid var(--lt-rule); }
  table.sched tbody tr:nth-child(2n){ border-right: none; }

  /* The total is about every row above it, so it spans them. */
  table.sched tbody tr.tot{ grid-column: 1 / -1; border-right: none; }

  /* An odd number of sections would otherwise leave a bordered hole beside
     the last one, which reads as a row whose data failed to load. IELTS has
     three sections, so it is the one that shows it. Two selectors because
     the last row is the total on these tables and the last section on a
     table that has no total. */
  table.sched tbody tr:last-child:nth-child(odd),
  table.sched tbody tr:nth-last-child(2):nth-child(odd){
    grid-column: 1 / -1;
    border-right: none;
  }
}

@media (max-width: 820px){
  table.sched tbody tr:last-child{ border-bottom: none; }
}