/* ============================================================
   Pipezoom - css/todaytiles.css, the figures over Your Numbers on Today.

   The 4 tiles, each on its own ground with white ink and last week's
   figure as the quiet line under the number, then the registry strip:
   4 figures with their words in 1 box. The 4 grounds are the tiles' own
   colors, the --tdt- tokens, with a lighter step for 2 of them on the
   dark themes; each keeps white ink at 6:1 or more.
   Defines the --tdt- tokens and the classes .tdt and .rgy.
   Notes: docs/notes/app.pipezoom.com/css/todaytiles.css.md
   ============================================================ */

.tdt-cap{
  margin:22px 0 8px;
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);
}
.tdt{
  --tdt-doors:#3b7fba;
  --tdt-talks:var(--hue-green);
  --tdt-meets:var(--hue-purple);
  --tdt-signed:var(--accent-strong);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
/* The dark theme is the html tag with no data-theme, and black is dark with a black page. */
html:not([data-theme]) .tdt,
html[data-theme="dark"] .tdt,
html[data-theme="black"] .tdt{
  --tdt-doors:#355F8A;
  --tdt-meets:#5A4A8C;
}
@media (min-width:900px){
  .tdt{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.tdt-tile{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  padding:14px 16px;
  border-radius:var(--radius);
  background:var(--tdt-c);
  color:var(--ink-inverse);
}
.tdt-doors{--tdt-c:var(--tdt-doors);}
.tdt-talks{--tdt-c:var(--tdt-talks);}
.tdt-meets{--tdt-c:var(--tdt-meets);}
.tdt-signed{--tdt-c:var(--tdt-signed);}
.tdt-l{display:flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;}
.tdt-n{font-size:2.1rem;font-weight:700;line-height:1.1;letter-spacing:-.5px;}
/* The quiet line: the softer step of the white on a filled ground (base.css). */
.tdt-p{font-size:.8rem;line-height:1.35;color:var(--on-accent-soft);}
.tdt-err{margin-top:18px;}

/* The registry strip */
.rgy{
  list-style:none;margin:12px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
@media (min-width:900px){
  .rgy{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.rgy-cell{display:flex;flex-direction:column;gap:1px;min-width:0;padding:12px 16px;}
.rgy-n{font-size:1.35rem;font-weight:700;line-height:1.15;color:var(--ink);}
.rgy-l{font-size:.8rem;line-height:1.35;color:var(--ink-soft);}
.rgy-err{margin-top:12px;}