/* ---------- Lists: quick to-dos as sticky notes (Eyal, Oct 20 2026) ------
   One palette for both layouts, defined here once (css/hub-notes.css) (hub-v12 sheets are
   tokens-only, so they read these variables rather than repeat the hex).
   Soft paper colors; text on them is always dark ink. Status chips use words
   ("Overdue", "Due today"), never color alone. */
:root {
  --note-yellow: #FFF4B8;
  --note-pink: #FFDDE6;
  --note-blue: #D9EAFF;
  --note-green: #D9F3DF;
  --note-orange: #FFE3C8;
  --note-purple: #E8E0FF;
  --note-ink: #1F2633;
  --note-edge: rgba(31, 38, 51, .10);
  --note-alert: #C2362B;
  --note-amber-bg: #FFE7A8;
  --note-amber-ink: #7A4D08;
}
.lnote-c-yellow { --note-bg: var(--note-yellow); }
.lnote-c-pink   { --note-bg: var(--note-pink); }
.lnote-c-blue   { --note-bg: var(--note-blue); }
.lnote-c-green  { --note-bg: var(--note-green); }
.lnote-c-orange { --note-bg: var(--note-orange); }
.lnote-c-purple { --note-bg: var(--note-purple); }

.lnotes-lede { margin: .35rem 0 0; font-size: .86rem; max-width: 62ch; }

.lnote-add {
  margin: 1rem 0 .5rem;
  padding: .75rem;
  border: 1px solid var(--line, #e3e7ee);
  border-radius: 12px;
  background: var(--hub-surface, #fff);
}
.lnote-add > input { width: 100%; font-size: 1rem; }
.lnote-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-top: .6rem;
}
.lnote-add-row > button { margin-left: auto; }
.lnote-msg { margin: .4rem 0 0; font-size: .82rem; color: var(--muted-ink, #5b6576); min-height: 0; }
.lnote-msg:empty { display: none; }

.lnote-swatches { display: inline-flex; gap: 6px; align-items: center; }
.lnote-swatch { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.lnote-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lnote-swatch span {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--note-bg);
  border: 1px solid var(--note-edge);
  box-sizing: border-box;
}
.lnote-swatch input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hub-action, #2563EB); }
.lnote-swatch input:focus-visible + span { outline: 2px solid var(--hub-action, #2563EB); outline-offset: 3px; }

.lnote-due-in { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .85rem; color: var(--muted-ink, #5b6576); }
.lnote-due-in input { width: auto; padding: 5px 6px; font-size: .85rem; }
.lnote-due-in input[type="time"] { width: 7.2rem; }
.lnote-who-in { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted-ink, #5b6576); min-width: 11rem; }
.lnote-who-in > div { flex: 1; min-width: 9rem; }

.lnote-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: .9rem 0 .6rem; font-size: .85rem;
}
.lnote-bar button {
  margin: 0;
  padding: 4px 10px;
  font-size: .82rem;
  font-weight: 600;
  background: var(--hub-surface, #fff);
  color: var(--hub-action, #2563EB);
  border: 1px solid var(--hub-action-line, #BFD3F8);
  border-radius: 8px;
  cursor: pointer;
}
.lnote-overdue-count { color: var(--note-alert); }
.lnote-empty { margin: 1rem 0; }
.lnote-done-h { margin: 1.4rem 0 .6rem; font-size: .95rem; color: var(--muted-ink, #5b6576); }

.lnote-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 210px));
  gap: 16px;
  align-items: start;
}
.lnote {
  position: relative;
  min-height: 180px;
  padding: 10px 12px 12px;
  background: var(--note-bg, var(--note-yellow));
  color: var(--note-ink);
  border: 1px solid var(--note-edge);
  border-radius: 4px 4px 14px 4px;
  box-shadow: 0 1px 2px rgba(31, 38, 51, .08), 0 6px 14px rgba(31, 38, 51, .07);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: transform .12s ease, box-shadow .12s ease;
}
.lnote:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(31, 38, 51, .10), 0 10px 20px rgba(31, 38, 51, .10); }
.lnote:focus-visible { outline: 2px solid var(--hub-action, #2563EB); outline-offset: 2px; }
.lnote-top { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.lnote-check { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; cursor: pointer; }
.lnote-text { font-size: .98rem; line-height: 1.3; font-weight: 550; white-space: pre-wrap; }
.lnote-sub { font-size: .8rem; line-height: 1.3; opacity: .78; }
.lnote-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.lnote-who {
  font-size: .72rem; font-weight: 650;
  padding: 1px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--note-edge);
}
.lnote.is-done { opacity: .6; }
.lnote.is-done .lnote-text { text-decoration: line-through; }

.lnote-due {
  display: inline-block;
  margin-left: auto;
  font-size: .7rem; font-weight: 700; line-height: 1.5;
  padding: 0 7px; border-radius: 999px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255, 255, 255, .72); color: var(--note-ink); border: 1px solid var(--note-edge);
}
.lnote-due.is-overdue { background: var(--note-alert); color: #fff; border-color: var(--note-alert); }
.lnote-due.is-today { background: var(--note-amber-bg); color: var(--note-amber-ink); border-color: transparent; }

/* The header To-do panel / rail: a color dot and the same due chip. */
.hub-todo-dot {
  width: 10px; height: 10px; flex: 0 0 10px;
  border-radius: 50%;
  background: var(--note-bg);
  border: 1px solid var(--note-edge);
}
.hub-todo-row .lnote-due { flex: none; margin-left: 0; max-width: 9rem; }
.hub-todo-row .lnote-due:not(.is-overdue):not(.is-today) { background: #f3f5f8; }

@media (max-width: 640px) {
  .lnote-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lnote { min-height: 140px; padding: 8px 10px 10px; }
  .lnote-text { font-size: .92rem; }
  .lnote-due { white-space: normal; text-align: right; }
  .lnote-add-row { gap: .55rem .75rem; }
  .lnote-add-row > button { margin-left: 0; width: 100%; }
  .lnote-who-in { flex: 1 1 100%; }
  .lnote-due-in { flex: 1 1 100%; }
  .lnote-due-in input[type="date"] { flex: 1; }
}

/* A more "real" sticky note (Eyal, Oct 20 2026): a strip of tape, a slight
   tilt that alternates, a lifted corner shadow, square corners, and a
   handwritten-style face where the system has one. Hover straightens it. */
.lnote {
  border: 0;
  border-radius: 2px;
  padding-top: 20px;
  box-shadow: 0 1px 1px rgba(31, 38, 51, .10), 0 12px 18px -10px rgba(31, 38, 51, .35);
  transform: rotate(-1.2deg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%);
}
.lnote-board .lnote:nth-child(2n) { transform: rotate(1deg); }
.lnote-board .lnote:nth-child(3n) { transform: rotate(-0.4deg); }
.lnote-board .lnote:nth-child(5n) { transform: rotate(1.6deg); }
.lnote::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 72px;
  height: 20px;
  margin-left: -36px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(31, 38, 51, .08);
  box-shadow: 0 1px 2px rgba(31, 38, 51, .08);
  transform: rotate(-3deg);
}
.lnote::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .04) 50%, rgba(255, 255, 255, .5) 51%);
  pointer-events: none;
}
.lnote:hover,
.lnote-board .lnote:hover { transform: rotate(0deg) scale(1.03); z-index: 1; box-shadow: 0 2px 3px rgba(31, 38, 51, .12), 0 18px 26px -12px rgba(31, 38, 51, .40); }
.lnote-text {
  font-family: "Segoe Print", "Bradley Hand", "Marker Felt", "Chalkboard SE", "Comic Neue", "Comic Sans MS", cursive, var(--font, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}
.lnote.is-done { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lnote, .lnote-board .lnote:nth-child(n) { transform: none; transition: none; }
}