/* Per-type color dots: bg-* classes from design/components.css.
   now=green, note=grey, lesson=yellow, activity=orange, tried=grey-2, hobby=red */
.status-marker { vertical-align: -0.25em; }

/* Type icon legend under the dashboard "Latest" heading */
.type-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin-bottom: var(--line-height);
}
.type-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}

/* Unlock + admin login gates */
.gate {
  max-width: 40ch;
  margin: calc(var(--line-height) * 4) auto;
  text-align: center;
}
.gate h1, .gate p, .gate label, .gate button { text-align: left; }
.gate button { width: 100%; }

/* "now" status card on the dashboard */
.now-card {
  border: var(--border-thickness) solid var(--text-color);
  padding: var(--space-3) var(--space-2) var(--space-2);
  margin-bottom: var(--line-height);
}
.now-card h2 { margin-bottom: 0; }
.now-card-clamp {
  max-height: calc(var(--line-height) * 6);
  overflow: hidden;
}
.linkish {
  background: none;
  border: none;
  padding: 0;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}
.linkish:hover {
  color: var(--link-hover);
  background: none;
  border: none;
}

/* List rows */
.draft-row { color: var(--text-color-alt); }
.tried-verb { color: var(--text-color-alt); }

/* Image thumbnail strips (post gallery + editor) */
.image-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
}
.image-strip img {
  width: 12ch;
  height: 12ch;
  object-fit: cover;
  border: var(--border-thickness) solid var(--text-color);
  display: block;
}
.image-strip figure { margin-top: 0; }
.image-strip figcaption { margin-top: 0.5ch; }

/* Editor: file input styled as a button */
.upload-button { cursor: pointer; }
.upload-button input[type="file"] { display: none; }

/* Editor redesign */
.editor-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2ch;
}
.editor-header h2 { margin: 0; }
.editor-header-actions {
  display: flex;
  align-items: baseline;
  gap: 1ch;
}
.editor-header-actions > * { margin-top: 0; }
.saved-note { margin: 0; }
.editor-fields > * { margin-top: 0; }
.editor-fields label { width: auto; }
.editor-fields input[type="checkbox"] { width: 2ch; }
.editor-field {
  display: flex;
  flex-direction: column;
}
.editor-field small { line-height: 1.3; }
/* Secret field gets two columns' width so the placeholder fits */
.editor-fields > .editor-field-secret { flex: 1 1 auto; }
/* Pinned + Published stack in their own narrow cell */
.editor-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.5ch;
  flex: 0 0 auto;
  justify-content: center;
}
.editor-toggles > * { margin-top: 0; }
/* Compact toggle cells: checkbox beside the word, hint beside it.
   The solid-square tick when checked comes from the base design system. */
.check-field {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  width: auto;
  flex: 0 0 auto;
}
/* Kill the shared 1ch input padding so the tick fills the box */
input[type="checkbox"] { padding: 0; }
/* Keep the clear-secret checkbox beside its label, not spread apart */
.remove-secret { justify-content: flex-start; gap: 0.5ch; }
/* Align editor selects with checkbox toggles on the shared baseline */
.editor-fields {
  align-items: flex-start;
}
.editor-fields select {
  margin-bottom: 0;
  cursor: pointer;
}
/* Hint sits right under its input */
.editor-field small { margin-top: 0.25em; }
/* Filters on the admin listing are clickable controls */
.admin-filter-row input[type="checkbox"] { cursor: pointer; }
/* Title (3/4) + Type (1/4) must sum to one row */
.editor-title-row > .col-3-4 { flex: 0 0 calc(75% - 1ch); }
.editor-title-row > :last-child { flex: 0 0 calc(25% - 1ch); }
.field-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}
.editor-body-bar { justify-content: space-between; }
/* Inline captioned image inside markdown: block span wrapping img + caption */
.md .md-figure {
  display: block;
  margin: 0 0 var(--line-height);
}
.md .md-figure img { display: block; }
.md .md-figcaption {
  display: block;
  margin-top: 0.25ch;
  font-size: 0.8rem;
  color: var(--text-color-alt);
}
.editor-body textarea { min-height: 60vh; width: 100%; display: block; }
.editor-preview {
  border: var(--border-thickness) solid var(--text-color);
  padding: var(--space-2);
  min-height: 60vh;
}
.segmented { display: inline-flex; }
.segmented button { margin-right: 0; }
.segmented button + button { margin-left: calc(-1 * var(--border-thickness)); }
.segmented button.on {
  background: var(--text-color);
  color: var(--background-color);
}
.btn-add-image {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  width: auto;
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) / 2 - var(--border-thickness)) calc(1ch - var(--border-thickness));
  height: calc(var(--line-height) * 2);
  font-weight: var(--font-weight-medium);
}
.btn-add-image:hover { background: var(--button-background-hover); color: var(--button-text-hover); }
.image-strip figcaption { margin-top: 0.5ch; }
.image-caption { width: 100%; height: auto; font-size: 0.8rem; }

/* Note blips: date headline, no big title */
.post-blip h2 { font-weight: var(--font-weight-medium); }

/* Stack editor columns on small screens; base .grid is row-only */
@media (max-width: 649px) {
  .grid.stack-mobile { flex-direction: column; }
  .grid.stack-mobile > * { flex-basis: auto; width: 100%; }
}
/* Editor textarea fills its column (superseded by .editor-body rules) */
/* Markdown task lists render read-only */
.md input[type=checkbox] { pointer-events: none; }
/* Nav row; buttons sit on the same baseline as the links */
nav.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2ch; margin-bottom: var(--line-height); }
nav.top > * { margin-top: 0; }
/* Admin listing: filters, drafts toggle and New share one baseline row */
.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1ch;
  margin-bottom: var(--line-height);
}
.admin-filter-row > * { margin-top: 0; }
.admin-filter-row label { margin: 0; }
.admin-filter-row select { width: auto; min-width: 16ch; }
.admin-drafts {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  width: auto;
}
.admin-drafts input { width: auto; flex: none; }

/* Small button variant: nav rows, table actions */
.btn-sm {
  height: calc(var(--line-height) * 1.5);
  padding: 0 calc(1ch - var(--border-thickness));
  font-size: 0.8rem;
  line-height: calc(var(--line-height) * 1.5 - var(--border-thickness) * 2);
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  text-decoration: none;
  color: var(--text-color);
}
.btn-sm:hover { color: var(--button-text-hover); }
.btn-danger {
  color: var(--text-failure);
  border-color: var(--text-failure);
}
.btn-danger:hover {
  background: var(--text-failure);
  color: var(--background-color);
}
.admin-filter-row select { cursor: pointer; }
.admin-drafts { cursor: pointer; }
.admin-actions { white-space: nowrap; }
.admin-actions > * + * { margin-left: 1ch; }
/* New button sits just above the table's top-right corner */
.admin-new-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
}
.admin-new-row button {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}

/* Site header: single flex row, border-bottom only.
   Margins offset base .theme-toggle float so it stays inline. */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: var(--border-thickness) solid var(--text-color);
  padding-bottom: calc(var(--line-height) - 0.5em);
  margin-bottom: var(--line-height);
}
.site-header h1 {
  display: inline;
  font-size: inherit;
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.site-header-right {
  display: flex;
  align-items: baseline;
  gap: 1ch;
}
.site-header-right .theme-toggle {
  float: none;
  margin: 0;
}

/* Dashboard redesign */

/* Full-width bordered panels (hero row, latest cards). Border + padding
   only: colours come from theme vars so cream and dark both work. */
.dash-panel {
  border: var(--border-thickness) solid var(--text-color);
  padding: var(--space-3) var(--space-2) var(--space-2);
}
.dash-panel h1 { margin-top: 0; }

/* The NowCard is reused inside the hero panel: drop its own border. */
.dash-now .now-card {
  border: none;
  padding: 0;
  margin-bottom: 0;
}

/* Stat tile strip: full type-coloured background, big count + label with
   icon in the highlight font colour for contrast (mirrors .bg-*). */
.stat-tile {
  display: flex;
  flex-direction: column;
  border: var(--border-thickness) solid var(--text-color);
  padding: var(--space-2) 0.5ch;
  text-decoration: none;
  background-color: var(--tile-color, var(--text-color));
  color: var(--highlight-font-color);
}
/* Tiles stretch so the strip spans the full row width */
.grid > .stat-tile { flex-grow: 1; }
.stat-tile:hover {
  background-color: color-mix(in srgb, var(--tile-color, var(--text-color)) 88%, black);
}
.stat-tile-count {
  font-size: calc(var(--line-height) * 1.8);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.stat-tile-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-size: 0.8rem;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-tile-label svg { flex: none; }
.t-now { --tile-color: var(--success); }
.t-note { --tile-color: var(--disabled); }
.t-lesson { --tile-color: var(--warning); }
.t-activity { --tile-color: var(--danger); }
.t-tried { --tile-color: var(--disabled); }
.t-hobby { --tile-color: var(--failure); }

/* Latest post cards: 2-per-row grid (1 on mobile) so titles and meta
   never fight for width inside narrow columns. */
.latest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--line-height) 1ch;
}
@media (max-width: 649px) {
  .latest-grid { grid-template-columns: 1fr; }
}
.dash-card {
  position: relative;
  border: var(--border-thickness) solid var(--text-color);
  padding: var(--space-2);
}
.dash-card-pin {
  position: absolute;
  top: calc(var(--space-2) + 0.1em);
  right: var(--space-2);
  color: var(--text-color);
}
.dash-card-meta {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin-top: 0;
  height: var(--line-height);
}
.dash-card-meta svg { flex: none; }
.dash-card-type { text-transform: uppercase; }
.dash-card h3 { margin-top: 0; }
.dash-card h3 a { text-decoration: none; }
.dash-card h3 a:hover { text-decoration: underline; }
.dash-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Markdown task lists render read-only */
.md input[type=checkbox] { pointer-events: none; }
/* Nav row */
nav.top { display: flex; flex-wrap: wrap; gap: 2ch; margin-bottom: var(--line-height); }
nav.top > * { margin-top: 0; }

/* Site header: single flex row, border-bottom only.
   Margins offset base .theme-toggle float so it stays inline. */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: var(--border-thickness) solid var(--text-color);
  padding-bottom: calc(var(--line-height) - 0.5em);
  margin-bottom: var(--line-height);
}
.site-header h1 {
  display: inline;
  font-size: inherit;
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.site-header-right {
  display: flex;
  align-items: baseline;
  gap: 1ch;
}
.site-header-right .theme-toggle {
  float: none;
  margin: 0;
}

/* "older" disclosure: border on the details, not doubled by the table */
.older-details > summary {
  color: var(--text-color-alt);
  cursor: pointer;
}
.older-details[open] > summary {
  margin-bottom: var(--line-height);
}

/* Header theme toggle: inverted against the current theme; hover flips
   it back to the theme colours for visible feedback. */
.site-header .theme-toggle {
  background: var(--button-background-hover);
  color: var(--button-text-hover);
  border: var(--border-thickness) solid var(--text-color);
}
.site-header .theme-toggle:hover,
.site-header .theme-toggle:active {
  background: var(--background-color);
  color: var(--text-color);
}

/* The design system owl (* + * margin-top) leaks stray top margins into
   flex/grid children; these containers space themselves with gap. */
.type-legend > *, .latest-grid > *, .dash-card-meta > *,
.site-header > *, .site-header-right > *, .image-strip > *,
.grid > .dash-panel {
  margin-top: 0;
}

/* Detail tables: type + flag icons sit centred in their cells */
td.type-cell, td.flag-cell {
  vertical-align: middle;
  text-align: center;
}
td.type-cell svg, td.flag-cell svg { margin: 0 auto; }

/* Type list page heading: icon sits inline with the text */
.type-heading {
  display: flex;
  align-items: center;
  gap: 1ch;
}

/* Primary button: filled + inverted so it stands apart from inputs.
   Hover flips it, same as the theme toggle. */
.btn-primary {
  background: var(--text-color);
  color: var(--background-color);
  border-color: var(--text-color);
  font-weight: var(--font-weight-bold);
}
.btn-primary:hover,
.btn-primary:active {
  background: var(--background-color);
  color: var(--text-color);
}
.gate form button[type="submit"] {
  width: 100%;
}

/* Icon + word flags (locked / pinned): glyph and label on one baseline. */
.icon-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  white-space: nowrap;
}

/* Help hint: small ? badge, tooltip on hover/focus */
.help-hint {
  position: relative;
  display: inline-flex;
  cursor: help;
}
.help-hint-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border: var(--border-thickness) solid var(--text-color-alt);
  border-radius: 50%;
  font-size: 0.75em;
  font-weight: var(--font-weight-bold);
  color: var(--text-color-alt);
}
.help-hint-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.5ch);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: max-content;
  max-width: 40ch;
  padding: 0.5ch 1ch;
  background: var(--text-color);
  color: var(--background-color);
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
}
.help-hint:hover .help-hint-tip,
.help-hint:focus-visible .help-hint-tip {
  display: block;
}