/* Selfnotes - one stylesheet, no build step.
   Colours live in custom properties so the dark scheme is a re-declaration of
   the same names rather than a second set of rules. */

:root {
  --bg: #f7f6f3;
  --panel: #ffffff;
  --ink: #1e1c19;
  --ink-soft: #6b665e;
  --line: #e2ded6;
  --line-strong: #cfc9be;
  --accent: #2f6f5e;
  --accent-ink: #ffffff;
  --danger: #a33a2c;

  --waiting-bg: #fdf0d5; --waiting-ink: #7a5310; --waiting-edge: #e8c98a;
  --todo-bg:    #e2ecfb; --todo-ink:    #1f4c86; --todo-edge:    #a9c6ec;
  --done-bg:    #e4f0e6; --done-ink:    #2c6238; --done-edge:    #a9cfb2;
  --memory-bg:  #ece7f5; --memory-ink:  #543f80; --memory-edge:  #c2b3de;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(30, 28, 25, .06), 0 1px 8px rgba(30, 28, 25, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1a18;
    --panel: #24221f;
    --ink: #eceae5;
    --ink-soft: #a29b90;
    --line: #35322d;
    --line-strong: #47433c;
    --accent: #57a68e;
    --accent-ink: #10201b;
    --danger: #d97a6a;

    --waiting-bg: #3a2f18; --waiting-ink: #e8c98a; --waiting-edge: #5c4a24;
    --todo-bg:    #1d2b40; --todo-ink:    #a9c6ec; --todo-edge:    #2f4666;
    --done-bg:    #1e3324; --done-ink:    #a9cfb2; --done-edge:    #2f5138;
    --memory-bg:  #2b2440; --memory-ink:  #c2b3de; --memory-edge:  #443861;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* The list is as wide as the window: rows are a date, a line of text and a
   few chips, and every extra centimetre goes into the line of text. The forms
   below opt back out - a text field metres wide is harder to read, not
   easier. */
main {
  padding: 1.25rem 1.5rem 4rem;
}

/* --- top bar --------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

/* --- controls -------------------------------------------------------- */

button, .button, select, input, textarea {
  font: inherit;
  color: var(--ink);
}

input[type="text"], input[type="search"], input[type="datetime-local"],
textarea, select {
  width: 100%;
  padding: .45rem .6rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

textarea { resize: vertical; min-height: 6rem; }

input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, .button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button, .button {
  display: inline-block;
  padding: .45rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

button:hover, .button:hover { border-color: var(--ink-soft); }

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.quiet {
  padding: .3rem .55rem;
  font-size: .875rem;
  color: var(--ink-soft);
  background: transparent;
}

.quiet:hover { color: var(--ink); }
.danger:hover { color: var(--danger); border-color: var(--danger); }

.inline { display: inline; }
.spacer { flex: 1; }

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

/* --- filters --------------------------------------------------------- */

.filters {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .9rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}

.filters label { display: block; }
.filters label > span,
.note-form label > span {
  display: block;
  margin-bottom: .2rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.grow { flex: 1 1 12rem; }

/* Wide enough to read a tag, not so wide it competes with the search box. */
.filters select[name="tag"] { min-width: 10rem; }

.statuses {
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: .75rem;
}

.statuses .legend {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.check {
  display: inline-flex !important;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
}

.check input { width: auto; margin: 0; accent-color: var(--accent); }

/* An unticked status is still readable, just clearly not in play. */
.check input:not(:checked) ~ .pill { opacity: .45; }
.check .count { font-size: .8rem; color: var(--ink-soft); }

/* --- status pills ---------------------------------------------------- */

.pill {
  display: inline-block;
  padding: .1rem .5rem;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pill-waiting { background: var(--waiting-bg); color: var(--waiting-ink); border-color: var(--waiting-edge); }
.pill-todo    { background: var(--todo-bg);    color: var(--todo-ink);    border-color: var(--todo-edge); }
.pill-done    { background: var(--done-bg);    color: var(--done-ink);    border-color: var(--done-edge); }
.pill-memory  { background: var(--memory-bg);  color: var(--memory-ink);  border-color: var(--memory-edge); }

/* --- the list -------------------------------------------------------- */

.result-count {
  margin: 0 0 .6rem;
  font-size: .85rem;
  color: var(--ink-soft);
}

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.note {
  padding: .8rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.note-waiting { border-left-color: var(--waiting-edge); }
.note-todo    { border-left-color: var(--todo-edge); }
.note-done    { border-left-color: var(--done-edge); }
.note-memory  { border-left-color: var(--memory-edge); }

/* Done is archive: present, legible, but not competing with what is live. */
.note-done .note-body { color: var(--ink-soft); }

.note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.note-head time {
  font-size: .82rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.status-form select {
  width: auto;
  padding: .2rem .4rem;
  font-size: .82rem;
  color: var(--ink-soft);
}

.note-body {
  margin: .5rem 0 0;
  white-space: pre-wrap;   /* keeps the line breaks that were typed */
  overflow-wrap: anywhere; /* a pasted URL must not widen the page */
}

/* A note with more to it than its first line. The summary is the row; the
   body underneath appears when it is opened. */
.note-text { margin-top: .5rem; }

.note-text > summary {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  cursor: pointer;
  list-style: none;  /* the default triangle, replaced below */
}

.note-text > summary::-webkit-details-marker { display: none; }

.note-text > summary::before {
  content: "\25B8";
  color: var(--ink-soft);
  font-size: .8em;
  line-height: 1;
  flex: none;
}

.note-text[open] > summary::before { content: "\25BE"; }

/* The whole point of the row: one line, however long the first line is and
   however narrow the window gets. */
.note-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.note-text > summary:hover .note-summary { color: var(--ink); }
.note-text[open] > summary .note-summary { color: var(--ink-soft); }
.note-text .note-body { margin-top: .4rem; }

.waiting-on {
  margin: .5rem 0 0;
  font-size: .9rem;
  color: var(--waiting-ink);
}

.waiting-on span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: .3rem;
}

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }

.chip {
  padding: .1rem .5rem;
  font-size: .8rem;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}

.chip:hover { color: var(--ink); border-color: var(--ink-soft); }
.chip-tag { font-variant: none; }

.empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

/* --- the form -------------------------------------------------------- */

.note-form {
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.2rem 1.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.note-form h1 { margin: 0; font-size: 1.15rem; }

.form-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.form-row > label { flex: 1 1 12rem; }

.stamp { max-width: 22rem; }
.stamp small { display: block; margin-top: .25rem; font-size: .78rem; color: var(--ink-soft); }

.dimmed { opacity: .5; }

.form-actions { display: flex; gap: .6rem; align-items: center; }

/* --- phone ----------------------------------------------------------- */

@media (max-width: 34rem) {
  main { padding: 1rem .75rem 3rem; }
  .filters select[name="tag"] { min-width: 0; }
  .filters { padding: .8rem; }
  .filter-row { gap: .6rem; }
  .filter-row > label { flex: 1 1 100%; }
  .statuses { gap: .5rem .75rem; }
  .statuses .spacer { display: none; }
  /* Thumb-sized targets once the row wraps. */
  .note-head .button, .note-head button { padding: .4rem .6rem; }
}

/* --- sign in, and the messages around it ----------------------------- */

.signin { max-width: 26rem; margin: 2rem auto 0 !important; }
.signin label > small { display: block; margin-top: .25rem; font-size: .78rem; color: var(--ink-soft); }

.alert {
  margin: 0;
  padding: .55rem .75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: .92rem;
}

.alert-error { background: var(--waiting-bg); color: var(--danger); border-color: var(--waiting-edge); }
.alert-warn  { background: var(--waiting-bg); color: var(--waiting-ink); border-color: var(--waiting-edge); }
.alert-ok    { background: var(--done-bg);    color: var(--done-ink);    border-color: var(--done-edge); }

/* The generated-password warning sits under the bar, full width. */
.banner {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: center;
}

.banner a { color: inherit; }

/* --- the note dialog -------------------------------------------------- */

/* The dialog element is only the positioning box: no chrome of its own, so a
   click landing on it is unambiguously a click on the backdrop. Everything
   visible belongs to the panel inside. */
.modal {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(52rem, 100vw - 2rem);
  width: 100%;
  color: var(--ink);
}

.modal::backdrop { background: rgba(20, 18, 15, .55); }

.modal-panel {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: min(80vh, 44rem);
  padding: 1rem 1.15rem 1.15rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(20, 18, 15, .25);
}

.modal-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}

.modal-head time {
  font-size: .85rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* The only part that scrolls: a long note keeps its header and buttons in
   place instead of pushing them off the screen. */
.modal-body {
  overflow-y: auto;
  min-height: 0;
}

.modal-body .note-body { margin-top: 0; }

.modal-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
}

/* The list dims a Done note's body; in the dialog it is the only thing on
   screen and should read normally. */
.modal-body .note-body { color: var(--ink); }

@media (max-width: 34rem) {
  .modal { max-width: calc(100vw - 1rem); }
  .modal-panel { max-height: 88vh; padding: .85rem .9rem 1rem; }
}