/* ops: only tokens and components of the ui-kit (static/ui-kit). */

/* The tiles of the front page are links to their section */
a.section-tile { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease; }
a.section-tile:hover { transform: var(--lift); box-shadow: var(--shadow-hover); border-color: var(--line-hover); }
.section-tile .tile-value { font-size: 1.15rem; }
.nowrap { white-space: nowrap; }
/* The figure sets its own height (charts.py): the box follows it, not the kit's 300px */
.chart { width: 100%; height: auto; min-height: 260px; }
.card + .card, .tiles + .card, .card + .grid, .grid + .card { margin-top: 20px; }
/* Inside a grid the cards of a row start at the same height (the rule above is for stacked ones) */
.grid > .card + .card { margin-top: 0; }
/* Wider pages: the tables of events and usage have long rows */
:root { --container: 1440px; }
/* A note under a table or chart takes the width of its card, not the reading measure */
.card > :is(p.hint, p.muted) { max-width: none; }
.card > :is(p.hint, p.muted):not(:first-child) { margin-top: 12px; }
/* Charts that go better wide, one under the other (.stack puts the gap) */
.stack > .card { margin: 0; }
.stack + * { margin-top: 20px; }
.page-head .filters { margin: 0; }
td code { overflow-wrap: anywhere; }

/* Login: the brand, one card and a footer, centered on the page */
.login {
  box-sizing: border-box; width: 100%; max-width: 440px; min-height: 100vh;
  margin: 0 auto; padding: 32px 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.25rem; font-weight: 700; }
.login-mark { width: 30px; height: 30px; fill: none; stroke: var(--ok, currentColor); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.login-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.login-card h1 { margin: 0; font-size: 1.5rem; }
.login-card p { margin: 0; }
.login-button { gap: 10px; min-height: 44px; margin-top: 6px; }
.login-button svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.login-note { font-size: 0.85rem; text-align: center; }
.login-foot { margin: 0; text-align: center; font-size: 0.85rem; }