/* Journal page (B17-Journals, «مِحْوَر»). Components come from the shared lifeos.css (W0, verbatim); this file only
   lays out the page under .jr-ui on the design tokens (light/dark follow .lo[data-theme]). Original text keeps its
   line breaks; one column under 1024px; 44px actions and 16px inputs on phones. */
.jr-ui { display: flex; flex-direction: column; gap: 32px; min-inline-size: 0; overflow-wrap: anywhere; }
.jr-ui *, .jr-ui *::before, .jr-ui *::after { box-sizing: border-box; }
.jr-ui [hidden] { display: none !important; }
.jr-ui p, .jr-ui h2, .jr-ui h3, .jr-ui h4 { margin: 0; }

/* icons inside buttons: the .ic-<name> class sets --i; the mask is drawn here so each label stays its only text */
.jr-ui .w3-ic::before { content: ""; inline-size: 16px; block-size: 16px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* header and day navigation */
.jr-ui .jr-daynav { justify-content: flex-end; }
.jr-ui .jr-daynav .seg .jr-day-label { display: inline-flex; align-items: center; min-block-size: 32px; padding: 0 12px; border-radius: 7px; font-size: 13.5px; white-space: nowrap; }
.jr-ui .jr-date { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.jr-ui .jr-date .input { inline-size: auto; min-block-size: 38px; direction: ltr; text-align: end; }

/* main | aside (B17: entries beside a 420px aside) */
.jr-ui .jr-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; }
.jr-ui .jr-dayhead .cnt { color: var(--ink-3); font-weight: 500; font-size: 14px; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }

/* entries */
.jr-ui .jr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.jr-ui .jr-entry { min-inline-size: 0; }
.jr-ui .jr-card { gap: 10px; }
.jr-ui .jr-card .panel-h .btn[aria-label] { inline-size: 32px; padding: 0; }
.jr-ui .jr-entry.is-wrapup .jr-card { border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.jr-ui .jr-entry-text { font-size: 17px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.jr-ui .jr-entry-acts { align-items: center; }
.jr-ui .jr-entry-acts .grow { flex: 1 1 8px; }
.jr-ui .jr-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jr-ui .jr-links li { display: inline-flex; align-items: center; gap: 4px; max-inline-size: 100%; }
.jr-ui .jr-link { height: auto; min-block-size: 26px; white-space: normal; line-height: 1.4; padding-block: 3px; }
.jr-ui .jr-link-type { color: inherit; opacity: .8; }

/* archive (reversible, never deleted) */
.jr-ui .jr-archive { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.jr-ui .jr-archive > summary, .jr-ui details > summary { display: flex; align-items: center; gap: 8px; min-block-size: 32px; cursor: pointer; list-style: none; }
.jr-ui details > summary::-webkit-details-marker { display: none; }
.jr-ui details > summary::after { content: ""; margin-inline-start: auto; inline-size: 8px; block-size: 8px; border-inline-end: 1.75px solid currentColor; border-block-end: 1.75px solid currentColor; transform: rotate(45deg); transition: transform var(--dur, 160ms) var(--ease, ease); flex: none; }
.jr-ui details[open] > summary::after { transform: rotate(-135deg); }
.jr-ui .jr-archive > summary { font-size: 13px; color: var(--ink-3); }
.jr-ui .jr-archive[open] > summary { margin-block-end: 8px; }
.jr-ui .jr-archive .jr-list { gap: 0; }
.jr-ui .jr-archived-text { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }

/* convert an idea into a task (explicit title; a picked sentence is the person's own choice) */
.jr-ui .jr-convert { display: flex; flex-direction: column; gap: 10px; }
.jr-ui .jr-convert .label { font-size: 13.5px; }
.jr-ui .jr-sentence { inline-size: 100%; text-align: start; padding: 8px 10px; font-size: 14px; border-radius: 9px; border: 1px solid var(--line); margin: 0; }
.jr-ui .jr-sentence:hover { margin: 0; padding-inline: 10px; }
.jr-ui .jr-sentence::before { inline-size: 14px; block-size: 14px; color: var(--ink-3); }

/* the editor and its save line (refreshed in place while typing) */
.jr-ui .jr-editor .textarea.big { font-size: 16px; line-height: 1.75; }
.jr-ui .jr-save-state { font-size: 12.5px; color: var(--ink-3); }
.jr-ui .jr-save-state[data-state="saving"] { color: var(--ink-2); }
.jr-ui .jr-save-state[data-state="saved"] { color: var(--ok-ink); }
.jr-ui .jr-save-state[data-state="unknown"], .jr-ui .jr-save-state[data-state="scope_changed"] { color: var(--warn-ink); }
.jr-ui .jr-save-state[data-state="failed"], .jr-ui .jr-save-state[data-state="conflict"] { color: var(--danger-ink); }
.lo[data-theme="dark"] .jr-ui .jr-save-state[data-state="saved"] { color: var(--ok); }
.lo[data-theme="dark"] .jr-ui .jr-save-state[data-state="unknown"], .lo[data-theme="dark"] .jr-ui .jr-save-state[data-state="scope_changed"] { color: var(--warn); }
.lo[data-theme="dark"] .jr-ui .jr-save-state[data-state="failed"], .lo[data-theme="dark"] .jr-ui .jr-save-state[data-state="conflict"] { color: var(--danger); }
.jr-ui .jr-compare-text, .jr-ui .jr-draft-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.jr-ui .jr-draft-text { max-block-size: 9em; overflow: auto; color: var(--ink); }
.jr-ui .jr-conflict .cmp { color: var(--ink); }

/* close / reopen */
.jr-ui .jr-wrapup { border-block-start: 1px solid var(--line); padding-block-start: 8px; }
.jr-ui .jr-wrapup > summary { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.jr-ui .jr-wrapup[open] > summary { margin-block-end: 10px; }
.jr-ui .jr-errors { display: block; margin: 0; padding-inline-start: 28px; }
.jr-ui .jr-command .note { align-self: stretch; }
.jr-ui details.panel { display: block; }
.jr-ui details.panel > * + * { margin-block-start: 12px; }
.jr-ui .jr-history > summary { font-weight: 600; font-size: 14.5px; }
.jr-ui .jr-prev .btn { justify-content: flex-start; }
.jr-ui .quiet .spin, .jr-ui .state .spin { inline-size: 12px; block-size: 12px; }

/* detail-only explanations */
[data-mode="light"] .jr-ui .w3-det { display: none; }

@media (max-width: 1023px) {
  .jr-ui { gap: 24px; }
  .jr-ui .jr-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .jr-ui .jr-daynav { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .jr-ui { gap: 20px; }
  .jr-ui .jr-entry-text { font-size: 16px; }
  .jr-ui .jr-daynav .seg { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .jr-ui .btn, .jr-ui .seg button, .jr-ui details > summary { min-block-size: 44px; }
  .jr-ui .jr-card .panel-h .btn[aria-label] { inline-size: 44px; }
  .jr-ui .btn-row > .btn { flex: 1 1 auto; }
  .jr-ui .input, .jr-ui .textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .jr-ui details > summary::after { transition: none; } }