/* OBSCURA OS: Today (today.html, today.js).
 *
 * An application window like Books': a slim bar, then the day in two
 * columns of plain lists ruled top and bottom. A row is a line of a list,
 * not a card: the time or date in a fixed column of tabular figures, what
 * it is, and which application it comes from, with a short bar in the
 * source's own colour at its start. The site's bar and footer are out of
 * the way while it is open; the back arrow goes to the Workspace. */

body.td-app { margin: 0; background: var(--paper); color: var(--ink); font: var(--text-sm)/var(--leading-ui) var(--font-sans); }
body.td-app .os-topbar, body.td-app .os-footer, body.td-app .os-toolnav { display: none !important; }
.td *, .td *::before, .td *::after { box-sizing: border-box; }
.td svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.td { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }

/* ---------------------------------------------------------------- the bar */

.td-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.td-home { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); }
.td-home:hover { background: var(--paper-inset); }
.td-home img { display: block; width: 24px; height: 24px; }
.td-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.td-brand { margin: 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.td-date { margin: 0 0 0 var(--space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.td-grow { flex: 1; }
.td-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.td-link:hover { background: var(--paper-inset); color: var(--ink); }
.td-home:focus-visible, .td-link:focus-visible, .td-row:focus-visible, .td-more:focus-visible, .td-empty a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---------------------------------------------------------------- the page */

.td-main { min-width: 0; }
.td-page { padding: var(--space-5) max(var(--space-5), calc((100% - 1180px) / 2)) var(--space-7); }
.td-boot { margin: var(--space-6) 0; color: var(--ink-soft); }
.td-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.td-col { min-width: 0; }

.td-sec { margin: 0 0 var(--space-6); }
.td-sechead { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-2); }
.td-sechead h2 { margin: 0; font-size: var(--text-md); font-weight: 650; }
.td-count { color: var(--ink-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.td-more { margin-left: auto; display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; color: var(--accent-strong); font-weight: 600; font-size: var(--text-xs); text-decoration: none; border-radius: var(--radius-sm); }
.td-more:hover { text-decoration: underline; }

.td-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.td-list > li { border-bottom: 1px solid var(--rule); }
.td-day { padding: 14px 2px 4px; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 650; }
.td-list > .td-day { border-bottom: 0; }
.td-row { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); min-height: 44px; padding: 10px 6px 10px 14px; color: var(--ink); text-decoration: none; }
.td-row::before { content: ""; position: absolute; left: 2px; top: 12px; bottom: 12px; width: 3px; border-radius: var(--radius-sm); background: var(--mk, transparent); }
.td-row:hover { background: var(--paper-inset); }
.td-when { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-what { min-width: 0; display: flex; flex-direction: column; }
.td-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.td-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: var(--text-xs); }
.td-app-name { color: var(--ink-faint); font-size: var(--text-xs); white-space: nowrap; }
.td-row.is-late .td-when { color: var(--danger); }
.td-row.is-declined .td-title { text-decoration: line-through; color: var(--ink-soft); }
.td-empty { margin: 0; padding: 12px 2px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.td-empty a { color: var(--accent-strong); font-weight: 600; }

@media (max-width: 860px) {
  .td-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
  .td-page { padding: var(--space-4) var(--space-4) var(--space-6); }
  .td-hide-sm { display: none; }
  .td-date { font-size: var(--text-xs); }
  .td-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when app" "what what"; row-gap: 2px; padding-right: 2px; }
  .td-when { grid-area: when; font-size: var(--text-xs); }
  .td-what { grid-area: what; }
  .td-app-name { grid-area: app; }
}
@media print {
  .td-top { position: static; }
  .td-home, .td-link, .td-more { display: none; }
}