/*
 * Mofakiraty — notebook-style stylesheet
 *
 * Priorities, in order:
 *   1. Accessibility: large type, high contrast, visible focus, keyboard-only
 *      friendly, no color-only cues, RTL-aware, respects reduced motion and
 *      dark-mode preferences.
 *   2. Warm "paper notebook" aesthetic: soft cream surfaces, subtle ruled
 *      lines on the note body, serif headings, generous spacing.
 *   3. Works with the existing template classes (.btn, .noteslist, .hero, …)
 *      and progressively enhances — nothing here is required to use the app.
 */

/* ------------------------------------------------------------------ *
 *  Design tokens
 * ------------------------------------------------------------------ */
:root {
  /* Paper palette (light) */
  --bg:            #faf7f1;   /* cream page */
  --surface:       #ffffff;   /* cards / fields */
  --surface-alt:   #f3efe6;   /* hovered / subtle fills */
  --fg:            #1b1a18;   /* ink */
  --fg-muted:      #5b5a55;   /* secondary text */
  --border:        #d9d2c3;   /* warm divider */
  --border-strong: #b8ae97;
  --accent:        #1d4ed8;   /* blue ink */
  --accent-fg:     #ffffff;
  --accent-weak:   #e5edff;
  --danger:        #b1241b;
  --danger-weak:   #fde7e4;
  --success:       #0f6d3a;
  --success-weak:  #def5e6;
  --focus:         #c58100;   /* warm amber, visible on cream */
  --ruled:         rgba(27, 26, 24, .07); /* notebook ruling */

  --radius:      10px;
  --radius-lg:   14px;
  --shadow-1:    0 1px 2px rgba(20, 18, 12, .06), 0 1px 1px rgba(20, 18, 12, .04);
  --shadow-2:    0 4px 12px rgba(20, 18, 12, .08), 0 1px 2px rgba(20, 18, 12, .05);

  --font-body:   "Segoe UI", "Noto Sans Arabic", "Noto Sans", system-ui, -apple-system, sans-serif;
  --font-serif:  "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Amiri", Georgia, serif;
  --font-mono:   "Cascadia Code", "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max-w: 72ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #15130f;   /* aged paper, dimmed */
    --surface:       #1e1b16;
    --surface-alt:   #272218;
    --fg:            #f3ece0;
    --fg-muted:      #bdb39f;
    --border:        #3b342a;
    --border-strong: #5b5142;
    --accent:        #8ab4ff;
    --accent-fg:     #0f1420;
    --accent-weak:   #1e2a48;
    --danger:        #ff8a82;
    --danger-weak:   #3a1815;
    --success:       #7ed9a6;
    --success-weak:  #133021;
    --focus:         #ffc24a;
    --ruled:         rgba(243, 236, 224, .06);
    --shadow-1:    0 1px 2px rgba(0, 0, 0, .6), 0 1px 1px rgba(0, 0, 0, .4);
    --shadow-2:    0 6px 18px rgba(0, 0, 0, .7), 0 2px 4px rgba(0, 0, 0, .4);
  }
}

/* ------------------------------------------------------------------ *
 *  Reset & base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  /* A very soft speckled paper texture using a layered radial gradient.
     It's tiny (no image asset) and decorative only. */
  background-image:
    radial-gradient(1000px 600px at 10% -10%, rgba(255, 245, 214, .35), transparent 60%),
    radial-gradient(900px 500px at 110% 120%, rgba(255, 230, 200, .25), transparent 55%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  margin: 0 0 .5em;
  color: var(--fg);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p  { margin: 0 0 1em; }

a {
  color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* ------------------------------------------------------------------ *
 *  Focus & accessibility helpers
 * ------------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -40px;
  background: var(--accent);
  color: var(--accent-fg);
  padding: .6rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 1000;
  font-weight: 600;
}
.skip:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------------ *
 *  Layout
 * ------------------------------------------------------------------ */
nav[aria-label] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .9rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.brand {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: .02em;
}
.brand:hover { text-decoration: none; color: var(--accent); }

.navlinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  align-items: center;
}
.navlinks a,
.navlinks .linklike {
  display: inline-block;
  padding: .4rem .7rem;
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
}
.navlinks a:hover,
.navlinks .linklike:hover {
  background: var(--surface-alt);
  text-decoration: none;
}
.navlinks .lang { margin-inline-start: auto; color: var(--fg-muted); }
.navlinks .lang a { font-weight: 600; }

main {
  max-width: var(--max-w);
  margin: 2rem auto;
  padding: 0 1.25rem 3rem;
}

footer {
  text-align: center;
  color: var(--fg-muted);
  padding: 1.5rem 1rem 2rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

/* ------------------------------------------------------------------ *
 *  Notifications
 * ------------------------------------------------------------------ */
.flash, .err {
  padding: .8rem 1rem;
  border-radius: var(--radius);
  margin: 0 0 1rem;
  border: 1px solid transparent;
}
.flash {
  background: var(--success-weak);
  border-color: var(--success);
  color: var(--fg);
}
.err {
  background: var(--danger-weak);
  border-color: var(--danger);
  color: var(--fg);
}
/* Inline field-level errors */
span.err {
  display: inline-block;
  padding: .15rem .5rem;
  font-size: .9rem;
}

/* ------------------------------------------------------------------ *
 *  Forms
 * ------------------------------------------------------------------ */
form label {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--fg);
}
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=url],
input[type=date],
input[type=number],
select,
textarea {
  width: 100%;
  font: inherit;
  padding: .6rem .75rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .03);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
textarea {
  min-height: 12rem;
  resize: vertical;
  line-height: 1.7;
  font-family: var(--font-body);
  /* Light ruled-paper effect — purely decorative, covered by the text. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.7em - 1px),
    var(--ruled) calc(1.7em - 1px),
    var(--ruled) 1.7em
  );
  background-attachment: local;
}

.hint, .meta, .lead, p.lead {
  color: var(--fg-muted);
}
.lead { font-size: 1.1rem; }
.hint { font-size: .92rem; }

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin: 0 0 1rem;
}
legend { padding: 0 .4rem; color: var(--fg-muted); }

.inline-radios { display: flex; gap: 1rem; flex-wrap: wrap; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.inline { display: inline; }

.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.grid-form .full { grid-column: 1 / -1; }
.grid-form textarea { min-height: 7rem; }

.cycle-calc {
  background: var(--surface-alt);
}

.cycle-calc p:last-child {
  margin-bottom: 0;
}

.cycle-guide {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: .8rem 1rem;
  margin: 0 0 1rem;
}

/* Page-intro: a localized "What does this page mean?" expandable
   block placed at the top of complex pages so screen-reader users
   (and anyone unfamiliar with the layout) can read a plain-language
   description of what the page does and how it is organized before
   they interact with it. Visually muted, but always reachable from
   the heading-navigation order because it follows the <h1>. */
.page-intro {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: .6rem .9rem;
  margin: 0 0 1rem;
}

.page-intro > summary {
  cursor: pointer;
  font-weight: 700;
}

.page-intro > p {
  margin: .6rem 0 0;
  color: var(--fg-muted);
}

.cycle-guide summary {
  cursor: pointer;
  font-weight: 700;
}

.cycle-guide dl {
  margin: .8rem 0 0;
}

.cycle-guide dt {
  font-weight: 700;
}

.cycle-guide dd {
  margin: 0 0 .75rem;
  color: var(--fg-muted);
}

.cycle-readable-list {
  display: grid;
  gap: 1rem;
}

.cycle-readable-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem;
}

.cycle-readable-card > h3 {
  margin-top: 0;
}

.cycle-readable-section,
.cycle-readable-subsection {
  margin-top: 1rem;
}

.cycle-readable-section > h4,
.cycle-readable-subsection > h5 {
  margin-bottom: .55rem;
}

.cycle-readable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .65rem;
}

.cycle-readable-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.cycle-readable-metric {
  border-inline-start: 3px solid var(--border);
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: .65rem .75rem;
}

.cycle-readable-metric.full {
  grid-column: 1 / -1;
}

.cycle-readable-metric h3,
.cycle-readable-metric h4,
.cycle-readable-metric h5,
.cycle-readable-metric h6,
.cycle-readable-metric-title {
  margin: 0 0 .2rem;
  color: var(--fg-muted);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}

.cycle-readable-metric p {
  margin: 0;
  font-weight: 700;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}
.meta-grid > div {
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.meta-grid dt {
  color: var(--fg-muted);
  font-size: .9rem;
}
.meta-grid dd {
  margin: .2rem 0 0;
  font-weight: 700;
}
.muted { color: var(--fg-muted); }
.small { font-size: .9rem; }
.status.warn { color: #8a5a00; font-style: normal; }

.searchbar {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1rem;
}
.searchbar input[type=search],
.searchbar input[type=text] { flex: 1 1 16rem; }

/* ------------------------------------------------------------------ *
 *  Buttons
 * ------------------------------------------------------------------ */
.btn,
button:not(.linklike):not([class]) {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  min-height: 2.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn:hover,
button:not(.linklike):not([class]):hover {
  background: var(--surface-alt);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
/* Disabled buttons should look it and not respond to hover. Used while
 * an AI request is in flight so the user can't double-submit. */
.btn[disabled],
.btn:disabled,
button:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.2);
  pointer-events: none;
}
/* Form-wide busy state set by assistant.js while a request is in flight. */
form.is-busy { cursor: progress; }
form.is-busy * { cursor: progress !important; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.btn.primary:hover {
  background: var(--accent);
  filter: brightness(1.08);
}
.btn.danger {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--surface);
}
.btn.danger:hover { background: var(--danger-weak); }

/* linklike: buttons styled as plain links (used in nav forms) */
.linklike {
  background: none;
  border: 0;
  padding: .25rem .4rem;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.linklike:hover { text-decoration: underline; }

.actions, .cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* ------------------------------------------------------------------ *
 *  Home / setup hero
 * ------------------------------------------------------------------ */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-2);
  margin-bottom: 1.5rem;
}
.hero h1 { margin-bottom: .4rem; }
.features {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.features li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
}

.setup {
  max-width: 40rem;
}
.setup .lead { margin-bottom: 1.5rem; }
.setup form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-2);
}
.setup form p { margin-bottom: .9rem; }

/* ------------------------------------------------------------------ *
 *  Notes list — looks like a notebook index
 * ------------------------------------------------------------------ */
.noteslist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
}
.noteslist > li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  box-shadow: var(--shadow-1);
  transition: box-shadow .15s ease, transform .05s ease;
}
.noteslist > li:hover {
  box-shadow: var(--shadow-2);
}
.noteslist h2, .noteslist h3 {
  margin: 0 0 .2rem;
  font-size: 1.15rem;
}
.noteslist a { color: var(--fg); text-decoration: none; }
.noteslist a:hover { text-decoration: underline; color: var(--accent); }
.noteslist .meta {
  font-size: .9rem;
  color: var(--fg-muted);
  margin-top: .25rem;
}
.noteslist li[data-starred] { border-inline-start-color: #d97706; }
.empty {
  color: var(--fg-muted);
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ *
 *  Note view — one page of the notebook
 * ------------------------------------------------------------------ */
article.note,
main > article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-2);
  /* Ruled paper on the note body */
}
article .meta {
  color: var(--fg-muted);
  font-size: .95rem;
  margin-bottom: 1rem;
}
pre.body,
.note .body {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  background: var(--surface-alt);
  border-radius: var(--radius);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.8em - 1px),
    var(--ruled) calc(1.8em - 1px),
    var(--ruled) 1.8em
  );
}

pre.token {
  display: block;
  padding: .75rem 1rem;
  background: var(--surface-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 1rem;
  user-select: all;
  overflow-x: auto;
}

/* ------------------------------------------------------------------ *
 *  Tables (tokens, admin users)
 * ------------------------------------------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1rem 0;
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
}
.table-wrap table {
  min-width: 42rem;
}
th, td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border);
  text-align: start;
  vertical-align: middle;
}
thead th {
  background: var(--surface-alt);
  font-family: var(--font-serif);
  color: var(--fg);
}
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-alt); }

/* ------------------------------------------------------------------ *
 *  Admin dashboard
 * ------------------------------------------------------------------ */
.admin-main {
  max-width: 1180px;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.admin-header h1 { margin-bottom: .25rem; }
.admin-jump,
.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.25rem;
}
.admin-stats > div,
.admin-panel,
.admin-user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.admin-stats > div {
  padding: .85rem 1rem;
}
.admin-stats span,
.admin-card-meta {
  display: block;
  color: var(--fg-muted);
  font-size: .9rem;
}
.admin-stats strong {
  display: block;
  font-size: 1.7rem;
  line-height: 1.2;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.admin-panel {
  padding: 1rem;
  margin: 0 0 1rem;
}
.admin-user-list {
  display: grid;
  gap: .75rem;
}
.admin-user-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1rem;
}
.admin-user-card h3 {
  margin-bottom: .1rem;
  font-size: 1.1rem;
}
.admin-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin: .25rem 0 0;
}
.admin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: .1rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accent-weak);
  color: var(--fg);
  font-size: .9rem;
  font-weight: 700;
}
.admin-compact-table {
  font-size: .95rem;
}
.admin-user-main {
  max-width: 1180px;
}
.admin-note-preview-list {
  display: grid;
  gap: .75rem;
}
.admin-note-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: .85rem 1rem;
}
.admin-note-preview h3 {
  font-size: 1.05rem;
  margin-bottom: .15rem;
}
.admin-note-preview p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .admin-header,
  .admin-user-card {
    display: block;
  }
  .admin-jump,
  .admin-card-actions {
    margin-top: .75rem;
  }
}

/* ------------------------------------------------------------------ *
 *  Lang switcher on setup
 * ------------------------------------------------------------------ */
.lang-switch {
  margin-top: 1rem;
  color: var(--fg-muted);
}
.lang-switch a { margin: 0 .25rem; }

/* ------------------------------------------------------------------ *
 *  RTL tweaks
 * ------------------------------------------------------------------ */
[dir="rtl"] .skip { inset-inline-start: auto; inset-inline-end: 1rem; }
[dir="rtl"] body {
  font-family: "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  font-family: "Amiri", "Noto Naskh Arabic", var(--font-serif);
}

/* ------------------------------------------------------------------ *
 *  High-contrast preference — strip decorative textures
 * ------------------------------------------------------------------ */
@media (prefers-contrast: more) {
  body { background-image: none; }
  textarea,
  pre.body,
  .note .body { background-image: none; }
  .noteslist > li { border-inline-start-width: 6px; }
  :root {
    --border: #000;
    --border-strong: #000;
    --fg-muted: #000;
  }
  @media (prefers-color-scheme: dark) {
    :root { --border: #fff; --border-strong: #fff; --fg-muted: #fff; }
  }
}

/* ------------------------------------------------------------------ *
 *  Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 560px) {
  body { font-size: 17px; }
  nav[aria-label] { padding: .7rem .9rem; }
  main { margin: 1rem auto; padding: 0 .9rem 2rem; }
  article.note { padding: 1.1rem 1rem; }
}

/* Print: clean, linear, ink-saving */
@media print {
  body { background: #fff; color: #000; }
  nav, footer, .actions, .cta, .btn { display: none !important; }
  main { margin: 0; max-width: none; }
  article.note, .hero, .noteslist > li {
    box-shadow: none; border: 1px solid #aaa;
  }
}


/* ------------------------------------------------------------------ *
 *  Assistant page (/assistant)
 *
 *  Three-tab interface: Ask, Summarize, Mood. Citations render as
 *  small superscripts; sources appear in a numbered list with a score
 *  bar. Score bars use the same accent color as buttons so a single
 *  hue conveys "AI confidence" consistently across the page. RTL is
 *  handled by inheriting the document direction - flex rows reorder
 *  automatically.
 * ------------------------------------------------------------------ */

.assistant-page h2 { margin-top: 1.4rem; }
.assistant-page .muted.small { color: var(--muted, #666); font-size: 0.92em; margin-top: -0.4rem; }

.tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border, #d8cdb8);
  margin: 1rem 0 1.25rem;
  flex-wrap: wrap;
}
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.6rem 1rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.tab-btn:hover { background: var(--surface-2, #f1ead7); }
.tab-btn:focus-visible { outline: 3px solid var(--accent, #b87333); outline-offset: 2px; }
.tab-btn.active {
  border-bottom-color: var(--accent, #b87333);
  font-weight: 600;
}

.assistant-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.assistant-form label { font-weight: 500; }
.assistant-form textarea,
.assistant-form select,
.assistant-form input[type=number],
.assistant-form input[type=date] {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border, #c9bea8);
  border-radius: 6px;
  background: var(--surface, #fffdf6);
  width: 100%;
  max-width: 36rem;
  box-sizing: border-box;
}
.assistant-form .row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.assistant-form .custom-range {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.assistant-form .custom-range label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 400;
}
.assistant-form .hint {
  margin: 0.25rem 0 0;
  font-size: 0.85em;
  line-height: 1.5;
}
.assistant-form input[type=number] {
  max-width: 6rem;
  display: inline-block;
}

.status {
  min-height: 1.5rem;
  font-style: italic;
  color: var(--muted, #555);
}
.status[data-kind=err]  { color: #b00020; font-style: normal; font-weight: 500; }
.status[data-kind=warn] { color: #8a5a00; font-style: normal; }
.status[data-kind=ok]   { color: #1f6f3a; font-style: normal; font-weight: 500; }

.assistant-result {
  background: var(--surface-2, #fffaef);
  border: 1px solid var(--border, #d8cdb8);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-top: 0.5rem;
}
.assistant-result .meta {
  font-size: 0.9em;
  color: var(--muted, #666);
  margin-top: 0;
}
.assistant-result .answer-block p { margin: 0.5rem 0; line-height: 1.65; }
.assistant-result sup.cite {
  color: var(--accent, #b87333);
  font-weight: 600;
  margin: 0 0.1rem;
}

details.sources { margin-top: 1rem; }
details.sources summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.3rem 0;
}
ol.source-list {
  margin: 0.5rem 0 0;
  padding-inline-start: 1.4rem;
}
ol.source-list .source {
  margin: 0.4rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
ol.source-list .source a { font-weight: 500; }
.score-bar {
  display: inline-block;
  width: 7rem;
  height: 0.55rem;
  background: var(--surface, #efe7d2);
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
}
.score-fill {
  display: block;
  height: 100%;
  background: var(--accent, #b87333);
}

@media (prefers-reduced-motion: no-preference) {
  .score-fill { transition: width 250ms ease; }
}


/* ------------------------------------------------------------------ *
 *  Assistant - typographic polish for rendered AI output.
 *
 *  The model is constrained to a strict subset (### headings, **bold**,
 *  - bullets, [n] citations) which the JS renderer turns into proper
 *  DOM. These rules style that DOM so the result reads like a tidy
 *  card instead of raw markdown text. Avoid global selectors so we
 *  don't disturb other pages.
 * ------------------------------------------------------------------ */

.assistant-result .answer-block { font-size: 1.02rem; line-height: 1.7; }
.assistant-result .answer-block > :first-child { margin-top: 0; }
.assistant-result .answer-block > :last-child  { margin-bottom: 0; }

.assistant-result .answer-block h2,
.assistant-result .answer-block h3,
.assistant-result .answer-block h4 {
  font-family: inherit;
  margin: 1.1rem 0 0.4rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--border, #d8cdb8);
  color: var(--accent-dark, #7a4a14);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.assistant-result .answer-block h2 { font-size: 1.18rem; }
.assistant-result .answer-block h3 { font-size: 1.08rem; }
.assistant-result .answer-block h4 { font-size: 1.02rem; border-bottom: none; }

.assistant-result .answer-block p { margin: 0.5rem 0; }

.assistant-result .answer-block ul.answer-list,
.assistant-result .answer-block ol.answer-list {
  margin: 0.4rem 0 0.8rem;
  padding-inline-start: 1.5rem;
}
.assistant-result .answer-block ul.answer-list li,
.assistant-result .answer-block ol.answer-list li {
  margin: 0.3rem 0;
  line-height: 1.6;
}
.assistant-result .answer-block ul.answer-list li::marker { color: var(--accent, #b87333); }

.assistant-result .answer-block strong {
  font-weight: 700;
  color: var(--accent-dark, #7a4a14);
}
.assistant-result .answer-block code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  background: var(--surface, #efe7d2);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}

/* Mood "label-only" first line: the renderer puts <strong> alone in
 * a paragraph after the heading. Style it as a pill chip so it pops
 * without needing extra markup. */
.assistant-result .answer-block h3 + p > strong:first-child:last-child,
.assistant-result .answer-block h2 + p > strong:first-child:last-child {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  background: var(--accent, #b87333);
  color: #fff;
  font-size: 0.95em;
  margin: 0.1rem 0 0.25rem;
}

/* Citations inline - slightly smaller, accent-tinted, no underline. */
.assistant-result .answer-block sup.cite {
  color: var(--accent, #b87333);
  font-weight: 700;
  margin: 0 0.15rem;
  font-size: 0.78em;
  text-decoration: none;
}
.assistant-result .answer-block sup.cite a {
  color: inherit;
  text-decoration: none;
  padding: 0 0.25em;
  border-radius: 4px;
  background: rgba(184, 115, 51, 0.10);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.assistant-result .answer-block sup.cite a:hover,
.assistant-result .answer-block sup.cite a:focus {
  background: var(--accent, #b87333);
  color: #fff;
  outline: none;
}

/* Highlight the source list item momentarily after a citation jump. */
ol.source-list .source.flash {
  background: rgba(184, 115, 51, 0.18);
  border-radius: 6px;
  padding: 0.25rem 0.4rem;
  margin: 0.35rem -0.4rem;
}
@media (prefers-reduced-motion: no-preference) {
  ol.source-list .source { transition: background-color 250ms ease; }
}

.profile-questions {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #d8cdb8);
}
.profile-questions h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--accent-dark, #7a4a14);
}
.profile-question {
  margin: 0 0 1rem;
  padding: 0.85rem;
  border: 1px solid var(--border, #d8cdb8);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
}
.profile-question .question-text {
  margin: 0 0 0.55rem;
  font-weight: 700;
}
.profile-question textarea {
  min-height: 5.5rem;
}

.nav-greet { margin: 0 0.6rem; color: var(--accent-dark, #7a4a14); font-weight: 600; }
.nav-greet:before { content: ''; }

.people-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 1rem;
}
.person-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--fg);
  font-size: 0.92rem;
  text-decoration: none;
}
.person-chip:hover { color: var(--accent); text-decoration: none; }

.person-header,
.person-insight,
.timeline-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-1);
}
.person-header { margin-bottom: 1rem; }
.person-insight { margin: 1rem 0 1.25rem; }
.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.timeline-item {
  border-inline-start: 4px solid var(--accent);
}
.timeline-item h3 {
  font-family: inherit;
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}
.timeline-item p:last-child { margin-bottom: 0; }

.memory-thread {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.memory-thread h2 {
  font-family: inherit;
  font-size: 1.1rem;
}
.memory-thread-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.memory-thread-item {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.memory-thread-item h3 {
  font-family: inherit;
  font-size: 1rem;
  margin: 0 0 0.25rem;
}
.memory-thread-item p:last-child { margin-bottom: 0; }
.memory-thread-reason {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.ai-live-panel {
  margin: 0.85rem 0 1rem;
  padding: 0.9rem 1rem;
  background: var(--accent-weak);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.ai-live-panel h3 {
  font-family: inherit;
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}
.ai-live-panel p {
  margin-bottom: 0.45rem;
}
.ai-live-panel ul {
  margin: 0.45rem 0 0;
  padding-inline-start: 1.25rem;
}
.ai-live-panel li {
  margin: 0.2rem 0;
}

[aria-invalid="true"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px var(--danger-weak);
}

[hidden] {
  display: none !important;
}

.not-found-page {
  max-width: 62ch;
}
.not-found-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-1);
}
.not-found-code {
  margin: 0 0 0.25rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
}
.not-found-suggestions {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}