/* Solace — app-specific extensions layer.
   solace.css (+ tokens.css) is the generic design system; this file
   covers everything Solace needs that the generic system doesn't know
   about — the rich-text editor, the tag/location/color pickers, maps,
   and a handful of small app-only utilities. Every value still comes
   from tokens.css's variables, same as solace.css itself; nothing here
   hard-codes a color, font or spacing value the tokens already carry,
   except where a control (the color picker's saturation/hue surfaces)
   is itself rendering color as its actual function. */
@import url("tokens.4857e7d0ac9a.css");

/* ── Small utilities ─────────────────────────────────────────────── */
.inline-form { display: inline; }
/* Added by static/js/tag_select.js only while a dropdown panel is open,
   removed the moment it closes — guarantees real, scrollable room below
   the panel (which can run up to 18rem tall) without permanently adding
   a large empty gap to every page that happens to use the tag picker. */
.page--tag-panel-open { padding-bottom: 20rem; }

/* ── Meter (Tile Cache settings page usage bar) ──────────────────── */
.meter { background: var(--neutral-100); border: 1px solid var(--border); border-radius: var(--radius-sm); height: 0.9rem; overflow: hidden; }
.meter-fill { height: 100%; background: var(--success); transition: width 0.2s ease; }
.meter-fill--warn { background: var(--warn); }
.meter-fill--full { background: var(--danger); }

/* ── Journal prose extras (base .prose from solace.css covers the
   font/size/blockquote/code; these fill in what a real journal entry's
   rich text also needs: lists, headings, links) ───────────────────── */
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1em; }
.prose h1, .prose h2, .prose h3 { margin-top: 1.2em; }
.prose a { color: var(--accent-strong); }

.places-list { list-style: none; margin: 0; padding: 0; }
.places-list li { padding: var(--space-1) 0; border-bottom: 1px solid var(--border); font-size: var(--text-md); line-height: var(--leading-md); }
.places-list li:last-child { border-bottom: none; }
.places-list .place-note { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }

/* ── Entry hero (entry detail page header — page-head's reading-width
   sibling: same anatomy, but the title carries a rating dial inline) ── */
.entry-hero { margin-bottom: var(--space-5); }
.entry-hero__date { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-muted); letter-spacing: 0.02em; }
.entry-hero__title { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-0-5) 0 var(--space-1); }
.entry-hero__meta { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }
.entry-hero__actions { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-3); }

/* ── Entry form / rich-text editor ───────────────────────────────── */
.editor-field label { margin-bottom: var(--space-1); }
.editor-toolbar {
  display: flex; gap: 2px; flex-wrap: wrap; padding: var(--space-0-5);
  background: var(--surface); border: 1px solid var(--border-strong); border-bottom: none;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.editor-toolbar button {
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs);
  width: 32px; height: 32px; cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-sm);
  color: var(--text-muted); font-family: var(--font-sans);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.editor-toolbar button:hover { background: var(--surface-raised); color: var(--text); }
.editor-toolbar button.is-active { background: var(--accent-wash); color: var(--accent-strong); }

.editor-surface {
  border: 1px solid var(--border-strong); border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  padding: var(--space-4); min-height: 320px; background: var(--surface-raised);
  font-family: var(--font-serif); font-size: var(--text-prose); line-height: var(--leading-prose);
  display: flex; flex-direction: column; cursor: text;
}
.editor-surface:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-2); }
.editor-surface .ProseMirror { outline: none; flex: 1; }
.editor-surface p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); color: var(--text-faint); float: left; height: 0; pointer-events: none;
  font-family: var(--font-serif); font-style: italic;
}

/* ── Location search / confirm ───────────────────────────────────── */
.location-picker { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--surface); }
.location-confirm { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--success-700); font-weight: var(--weight-medium); margin-top: var(--space-0-5); display: block; }
.location-error { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--danger-text); margin-top: var(--space-0-5); display: block; }
.location-map-picker { height: 220px; border-radius: var(--radius-xs); margin: var(--space-1-5) 0; border: 1px solid var(--border); overflow: hidden; }

.location-autocomplete { position: relative; }
.location-autocomplete__suggestions {
  position: absolute; top: calc(100% + var(--space-0-5)); left: 0; right: 0; z-index: 1100;
  list-style: none; margin: 0; padding: var(--space-0-5);
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 14rem; overflow-y: auto;
}
.location-autocomplete__suggestion { display: flex; flex-direction: column; padding: var(--space-1) var(--space-1-5); border-radius: var(--radius-xs); cursor: pointer; }
.location-autocomplete__suggestion:hover { background: var(--surface); }
.location-autocomplete__suggestion-name { font-size: var(--text-md); line-height: var(--leading-md); color: var(--text); font-weight: var(--weight-medium); }
.location-autocomplete__suggestion-address { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-faint); }

/* ── Maps ─────────────────────────────────────────────────────────── */
/* Base .map-container (height, radius, border) comes from solace.css —
   this file only adds the size variant and modifier solace.css doesn't
   define. A duplicate base rule used to live here too, with a stale
   420px height left over from before the mockup redesign (solace.css
   uses 360px, sized for the entry-layout two-column sidebar); because
   this file loads AFTER solace.css in base.html, that stale rule was
   silently winning the cascade and overriding the real one. Removed,
   not just corrected, so this can't quietly drift out of sync again. */
.map-container--sm { height: 240px; }
.leaflet-container { font-family: var(--font-sans) !important; }

/* ── Tag management page (full-size rows — this list IS the page's
   content, so it gets real type and a visible swatch, not the compact
   inline .badge--tag chip used to reference tags elsewhere) ─────────── */
.tag-manage-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.tag-manage-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-0-5); border-bottom: 1px solid var(--border); transition: background-color var(--duration) var(--ease); }
.tag-manage-row:hover { background: var(--surface); }
.tag-manage-row__swatch { display: inline-block; width: 18px; height: 18px; border-radius: var(--radius-full); flex-shrink: 0; border: 1px solid rgba(46, 43, 37, 0.15); }
.tag-manage-row__name { flex: 1; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-medium); color: var(--text); }
.tag-manage-row__actions { display: flex; gap: var(--space-1); flex-shrink: 0; }

/* New-tag disclosure (entry form) */
details.disclosure > summary {
  cursor: pointer; list-style: none; color: var(--accent-strong); font-size: var(--text-sm); line-height: var(--leading-sm);
  font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap: var(--space-0-5); margin-top: var(--space-2);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: "+"; font-family: var(--font-mono); }
details.disclosure[open] > summary::before { content: "\2212"; }
details.disclosure[open] > summary { margin-bottom: var(--space-2); }
.inline-tag-form { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.inline-tag-form .input { width: 12rem; }

/* ── Tag multi-select (search + click-to-toggle) ─────────────────── */
.tag-select { position: relative; max-width: 26rem; }
.tag-select__control {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); width: 100%;
  min-height: 36px; padding: var(--space-0-5) var(--space-1-5); background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs); cursor: pointer; font: inherit; text-align: left;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.tag-select__control:hover { border-color: var(--neutral-500); }
.tag-select__control[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-2); }

.tag-select__chips { display: flex; flex-wrap: wrap; gap: var(--space-0-5); flex: 1; min-width: 0; }
.tag-select__placeholder { color: var(--text-faint); font-size: var(--text-md); line-height: var(--leading-md); }
.tag-select__chip { display: inline-flex; align-items: center; background: var(--accent-wash); color: var(--accent-strong); border-radius: var(--radius-full); padding: 2px var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); }
.tag-select__caret { color: var(--text-faint); flex-shrink: 0; font-size: var(--text-xs); }

.tag-select__panel {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 20;
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: var(--space-1-5); max-height: 18rem; display: flex; flex-direction: column;
}
.tag-select__search { margin-bottom: var(--space-1); flex-shrink: 0; }
.tag-select__options { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.tag-select__option { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-xs); cursor: pointer; font-size: var(--text-md); line-height: var(--leading-md); transition: background-color var(--duration) var(--ease); }
.tag-select__option:hover { background: var(--surface); }
.tag-select__option.is-hidden { display: none; }
.tag-select__option.is-selected { background: var(--accent-wash); }
.tag-select__option-swatch { display: inline-block; width: 14px; height: 14px; border-radius: var(--radius-full); flex-shrink: 0; border: 1px solid rgba(46, 43, 37, 0.15); }
.tag-select__option-label { flex: 1; color: var(--text); }
.tag-select__option-check { opacity: 0; color: var(--accent-strong); font-size: var(--text-sm); }
.tag-select__option.is-selected .tag-select__option-check { opacity: 1; }
.tag-select__empty { padding: var(--space-1); color: var(--text-faint); font-size: var(--text-sm); line-height: var(--leading-sm); }

/* ── Color picker — a real 2D saturation/value picker + hue slider.
   The SV surface and hue strip are gradient CONTROLS, not decorative
   fills, so their #fff/#000/hue-stop colors are intentionally outside
   the token system — they render color itself, not app chrome. ────── */
.color-picker { position: relative; display: inline-block; }
.color-picker__trigger {
  width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px var(--surface-raised);
  transition: box-shadow var(--duration) var(--ease);
}
.color-picker__trigger:hover { box-shadow: inset 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--accent-wash-2); }
.color-picker__panel {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 20;
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: var(--space-2); width: 15.5rem;
}
.color-picker__pickers { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); }

.color-picker__sv {
  position: relative; flex: 1; height: 150px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong);
  cursor: crosshair; touch-action: none; overflow: hidden;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(20, 100%, 50%);
}
.color-picker__sv-cursor {
  position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: var(--radius-full);
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%); pointer-events: none;
}
.color-picker__hue {
  position: relative; width: 20px; height: 150px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong);
  cursor: pointer; touch-action: none;
  background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.color-picker__hue-thumb {
  position: absolute; top: 0; left: -3px; right: -3px; height: 6px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); border-radius: 2px; transform: translateY(-50%); pointer-events: none;
}
.color-picker__preview-row { display: flex; align-items: center; gap: var(--space-1); }
.color-picker__preview { width: 28px; height: 28px; border-radius: var(--radius-full); border: 1px solid rgba(46, 43, 37, 0.15); flex-shrink: 0; }
.color-picker__custom { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-sm); text-transform: uppercase; }

/* ── Auth pages (login, signup, password, settings sub-pages) ───────
   Not covered by the generic system's component set — a centered
   panel using the same .panel/.field/.btn components everything else
   uses, at a width tuned for a short, single-purpose form. */
.auth-page { max-width: 24rem; margin: var(--space-6) auto; }
.auth-page h1 { margin-bottom: var(--space-3); }
.auth-page .panel { padding: var(--space-4); }
.auth-page__footer { margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-muted); text-align: center; }

/* ── Info tooltip (Tile Cache settings page) ─────────────────────────
   A small "i" icon next to a label that reveals an explanation on
   hover/focus. aria-label carries the same text as data-tip so screen
   reader users get it announced on focus, since the visible bubble
   itself is a CSS-only :hover/:focus-visible reveal, not something a
   screen reader would otherwise pick up. */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: var(--space-0-5);
  border-radius: var(--radius-full);
  background: var(--neutral-300);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  cursor: help;
  vertical-align: middle;
}
.info-tip::before { content: "i"; }
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  transform: none;
  width: max-content;
  max-width: 16rem;
  padding: var(--space-1) var(--space-1-5);
  background: var(--neutral-950);
  color: var(--neutral-50);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-style: normal;
  font-family: var(--font-sans);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease);
  z-index: 30;
  pointer-events: none;
  text-align: left;
}
.info-tip:hover::after, .info-tip:focus-visible::after { opacity: 1; visibility: visible; }

/* ── Entry detail's compact "On this day" panel (facts sidebar) ──────
   Every row shares the same month/day by definition (that's the whole
   point), so the year is the only thing worth showing per row — no
   need to repeat "Jan 1" alongside every single one. */
.otd-mini-list { display: flex; flex-direction: column; gap: var(--space-0-5); }
.otd-mini-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-1);
  padding: var(--space-0-5) 0; text-decoration: none; color: var(--text);
  font-size: var(--text-md); line-height: var(--leading-md);
  border-bottom: 1px dotted var(--border);
}
.otd-mini-item:last-child { border-bottom: none; }
.otd-mini-item:hover .otd-mini-item__year { text-decoration: underline; }
.otd-mini-item__year { font-family: var(--font-mono); }
.otd-mini-expand { margin-top: var(--space-0-5); }
.otd-mini-expand > summary {
  cursor: pointer; color: var(--accent-strong); font-size: var(--text-sm); line-height: var(--leading-sm);
  font-weight: var(--weight-medium); list-style: none;
}
.otd-mini-expand > summary::-webkit-details-marker { display: none; }
.otd-mini-expand > summary::before { content: "+ "; }
.otd-mini-expand[open] > summary::before { content: "\2212 "; }
.otd-mini-expand[open] > summary { margin-bottom: var(--space-0-5); }

/* The "+ New tag" disclosure next to the tag chip input (entry form)
   uses a real .btn as its <summary> rather than the "+"/"−" prefixed
   link style details.disclosure > summary gets elsewhere — so it needs
   its own native marker suppressed instead of reusing that class. */
.tags-field summary.btn { list-style: none; }
.tags-field summary.btn::-webkit-details-marker { display: none; }

/* ── Responsive: app-specific components only — solace.css's own
   media query already handles header/nav/page/buttons/inputs. ──────── */
@media (max-width: 760px) {
  .entry-hero__title { flex-wrap: wrap; }
  .prose { font-size: 17px; line-height: 28px; }
  .map-container { height: 300px; }
  .editor-surface { padding: var(--space-2); min-height: 240px; }
}