/* Molrix Task Tracker — R08 "Clean Light" design + "Midnight" dark mode.
   Every color/surface runs through the tokens below; body.dark swaps the palette.
   Selector names are unchanged from the classic skin so app.js and the e2e suite
   keep working — only the visual language changed (Narek-approved mockups). */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font: "Segoe UI", "Noto Sans", "Liberation Sans", Arial, sans-serif;

  /* surfaces */
  --bg: #edeff3;            /* page */
  --card: #ffffff;          /* raised panels */
  --raise: #f7f9fc;         /* subtle header strips inside cards */
  --hover: #f2f6fc;         /* row hover */
  --line: #dde1e9;          /* hairline borders */
  --line-strong: #bfc7d4;

  /* ink */
  --ink: #1c2333;
  --sub: #59626f;
  --faint: #97a0af;

  /* brand + accent (light: navy leads) */
  --navy: #1f3864;
  --navy-soft: #eaeffa;
  --navy-soft-line: #c6d4f2;
  --accent: #1f3864;        /* primary action fill */
  --accent-ink: #ffffff;    /* text on the primary action */
  --focus: #2f6fd6;

  /* semantic */
  --green: #1f9d55;  --green-soft: #e8f6ee;  --green-line: #bfe5cd;
  --orange: #d97706; --orange-soft: #fdf1e0;
  --red: #dc2626;    --red-soft: #fdeaea;
  --blue: #2f6fd6;   --blue-soft: #eef1f8;

  /* marks */
  --pink: #e94f9d;   --pink-soft: #fdeef6;  --pink-line: #f6cde4;
  --yellow: #f2c317; --yellow-soft: #fdf7dd;

  /* roadmap */
  --rm-blue: #3b78e7; --rm-orange: #f59e0b; --rm-red: #e23b3b; --rm-green: #22a75c;
  --rm-axis: #1f3864; --rm-pole: #43506b; --rm-stem: #7c88a1; --purple: #8e24aa;
  --tip-bg: #1c2333; --tip-ink: #ffffff; --tip-muted: #aab3c5;

  /* misc */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .05);
  --shadow-pop: 0 12px 40px rgba(16, 24, 40, .22);
  --logo-chip: transparent;  /* light: the logo sits bare */
  --note-star-bg: #ffd76b; --note-star-ink: #8a6d1a;
  --note-lines-bg: #dbe7fb; --note-lines-ink: #3b5b8f;
}

/* ---------- Midnight (dark mode): cyan leads ---------- */
body.dark {
  --bg: #0e1320;
  --card: #151c2c;
  --raise: #121a2b;
  --hover: #1a2338;
  --line: #2b3752;
  --line-strong: #3d4c70;

  --ink: #e8edf7;
  --sub: #8b96ac;
  --faint: #5f6a82;

  --navy: #9db6e4;
  --navy-soft: rgba(91, 147, 255, .13);
  --navy-soft-line: #35507e;
  --accent: #45e0f0;
  --accent-ink: #082030;
  --focus: #45e0f0;

  --green: #34d17b;  --green-soft: rgba(52, 209, 123, .13);  --green-line: rgba(52, 209, 123, .4);
  --orange: #ffab3d; --orange-soft: rgba(255, 171, 61, .13);
  --red: #ff5d5d;    --red-soft: rgba(255, 93, 93, .14);
  --blue: #5b93ff;   --blue-soft: rgba(91, 147, 255, .13);

  --pink: #ff4fa3;   --pink-soft: rgba(255, 79, 163, .13);  --pink-line: rgba(255, 79, 163, .45);
  --yellow: #ffd23e; --yellow-soft: rgba(255, 210, 62, .12);

  --rm-blue: #5b93ff; --rm-orange: #ffab3d; --rm-red: #ff5d5d; --rm-green: #34d17b;
  --rm-axis: #9db6e4; --rm-pole: #6d7c9c; --rm-stem: #5f6a82;
  --tip-bg: #e8edf7; --tip-ink: #101724; --tip-muted: #55607a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, .4);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, .55);
  --logo-chip: #ffffff;      /* dark: the logo keeps a white chip so it stays legible */
  --note-star-bg: #ffd76b; --note-star-ink: #8a6d1a;
  --note-lines-bg: #dbe7fb; --note-lines-ink: #3b5b8f;
}

html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}

.view { display: none; height: 100vh; flex-direction: column; }
.view.active { display: flex; }
[hidden] { display: none !important; }

/* ---------- shared: buttons ---------- */
.bevel-btn {
  font-family: var(--font); font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--card); color: var(--ink);
  padding: 7px 15px; font-size: clamp(11px, 1.1vw, 13px);
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background .12s ease, border-color .12s ease;
}
.bevel-btn:hover { background: var(--navy-soft); border-color: var(--navy-soft-line); }
.bevel-btn:active { transform: translateY(1px); }
/* the dashboard stack: quiet buttons, with CREATE TASK as the one filled action */
.create-btn { font-weight: 600; }
#create-task-btn {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 700; box-shadow: 0 2px 8px rgba(31, 56, 100, .3);
}
body.dark #create-task-btn { box-shadow: 0 0 18px rgba(69, 224, 240, .3); }
#create-task-btn:hover { filter: brightness(1.08); background: var(--accent); }
.small-bevel { min-width: 90px; }
.cancel-btn { color: var(--red); }
.cancel-btn:hover { background: var(--red-soft); border-color: var(--red); }

.link-btn {
  font-family: var(--font); background: none; border: none;
  color: var(--sub); font-weight: 600; text-decoration: none;
  font-size: clamp(11px, 1.1vw, 13px); cursor: pointer; margin-right: 14px;
}
.link-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.watcher-del {
  font-family: var(--font); font-weight: 700; border: 1px solid var(--red);
  background: var(--red-soft); color: var(--red); border-radius: 7px;
  font-size: 12px; padding: 4px 9px; cursor: pointer;
}
.watcher-del:hover { background: var(--red); color: #fff; }

/* ---------- login ---------- */
#view-login { align-items: center; justify-content: center; }
.login-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px 40px; width: 430px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.login-logo { text-align: center; margin-bottom: 18px; background: var(--logo-chip); border-radius: 12px; padding: 6px; }
.login-logo img { width: 290px; }
.login-label { font-weight: 700; margin: 10px 0 5px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); }
.login-input {
  font-family: var(--font); font-size: 16px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--card); color: var(--ink);
}
.login-input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.login-btn { margin-top: 22px; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.login-error { color: var(--red); min-height: 20px; font-size: 13.5px; margin-top: 8px; }

/* ---------- dashboard header ---------- */
.dash-header {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding: 12px 24px 10px; background: var(--card); border-bottom: 1px solid var(--line);
}
.logo-box { background: var(--logo-chip); border-radius: 10px; padding: 2px 6px; text-align: center; }
.logo-box img { width: clamp(120px, 13vw, 175px); display: block; margin: 0 auto; }
.logo-caption {
  font-weight: 600; font-size: clamp(9px, 1vw, 11px); margin-top: 1px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sub); text-align: left; padding-left: 2px;
}
body.dark .logo-box .logo-caption, body.dark .logo-caption { color: var(--sub); }
.logged-in { flex: 0 0 auto; }
.li-label { font-weight: 600; font-size: clamp(12px, 1.3vw, 15px); color: var(--sub); }
.li-name { font-weight: 700; font-size: clamp(13px, 1.5vw, 18px); }

/* name + position + menu (layout per Narek; skin per the approved mockup) */
.hdr-user { flex: 0 0 auto; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 2px; }
.hu-name { font-weight: 700; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.15; color: var(--ink); }
.hu-pos { font-weight: 400; font-size: clamp(11px, 1.1vw, 13px); color: var(--sub); line-height: 1.2; }
.menu-wrap { position: relative; margin-top: 6px; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  font: 600 12.5px var(--font); padding: 5px 12px; border-radius: 8px;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.menu-btn:hover { background: var(--navy-soft); border-color: var(--navy-soft-line); }
.menu-btn svg { width: 14px; height: 14px; }
.menu-btn::after { content: "Menu"; }
.menu-drop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 210px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font-family: var(--font); font-weight: 600;
  letter-spacing: .04em; font-size: 12.5px; padding: 11px 16px; background: none; border: none;
  border-bottom: 1px solid var(--line); cursor: pointer; color: var(--ink);
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--navy-soft); }
/* the DARK MODE row shows its state as a small dot */
.mi-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
body.dark .mi-dot { background: var(--accent); box-shadow: 0 0 6px rgba(69, 224, 240, .6); }

.search-wrap { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 9px; }
.search-wrap[hidden] { display: none; }
.search-label { display: none; } /* the pill carries its own icon now */
.search-pill {
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 13px;
  display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm);
}
.search-pill:focus-within { outline: 2px solid var(--focus); }
.search-pill input {
  border: none; outline: none; font-family: var(--font); color: var(--ink);
  font-size: clamp(12px, 1.2vw, 13.5px); width: clamp(120px, 17vw, 250px); background: transparent;
}
.search-icon { width: 15px; height: 15px; }

/* ---------- filter bar (toolbar) + table ---------- */
.table-frame {
  margin: 0 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  box-shadow: var(--shadow-md); overflow: hidden; margin-top: 12px;
}
.filter-bar {
  background: var(--raise); border-bottom: 1px solid var(--line);
  display: flex; justify-content: flex-end; align-items: center;
  gap: clamp(4px, .7vw, 8px); padding: 8px 12px; flex-wrap: wrap;
}
.filter {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 600;
  font-size: clamp(10px, 1vw, 12px); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px;
  color: var(--sub); background: var(--card);
}
.filter:has(input:checked) { background: var(--navy-soft); border-color: var(--navy-soft-line); color: var(--navy); }
.filter input {
  appearance: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong); cursor: pointer; flex: 0 0 auto; border: none;
}
.filter input:checked { background: var(--navy); }
body.dark .filter:has(input:checked) input:checked { background: var(--accent); }

.table-scroll { overflow-y: auto; flex: 1; min-height: 0; }
.task-table { width: 100%; border-collapse: collapse; }
.task-table th {
  background: var(--raise); color: var(--sub); font-size: clamp(10px, 1vw, 11.5px);
  letter-spacing: .08em; text-transform: uppercase; text-align: left; font-weight: 700;
  padding: 10px 14px; border: none; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
.task-table td {
  padding: 9px 14px; text-align: left; font-size: clamp(12px, 1.2vw, 13.5px);
  border: none; border-bottom: 1px solid var(--line);
  background: var(--card); color: var(--ink);
}
.task-table tbody tr:hover td { background: var(--hover); }
.col-name-cell { font-weight: 600; overflow-wrap: anywhere; }
.dl-overdue { color: var(--red) !important; font-weight: 700; }
.dl-soon { color: var(--orange) !important; font-weight: 700; }
.dl-sub { display: block; font-size: 10.5px; font-weight: 600; color: inherit; opacity: .85; }
.task-table .status-chip { font-size: 11.5px; padding: 3px 11px; }
.edit-btn {
  font-family: var(--font); font-weight: 600; font-size: 12px;
  border: 1px solid var(--line-strong); background: var(--card);
  color: var(--navy); padding: 5px 15px; cursor: pointer; border-radius: 8px; box-shadow: var(--shadow-sm);
}
.edit-btn:hover { background: var(--navy-soft); border-color: var(--navy-soft-line); }
.no-tasks { text-align: center; padding: 40px; font-size: 16px; color: var(--sub); }

/* priority cell decorations (R08) */
.pri-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--faint); }
.pri-Low { background: var(--faint); }
.pri-Medium { background: var(--orange); }
.pri-High { background: var(--red); }
.rm-cell-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--pink);
  background: var(--pink-soft); border: 1px solid var(--pink-line); padding: 2px 9px; border-radius: 999px;
}

.dash-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px 12px; }

/* R07: Caps Lock warning under password fields */
.caps-warn { color: var(--red); font-size: 12px; font-weight: 600; min-height: 0; }
.caps-warn:empty { display: none; }

/* R06: the circled ? help button; R08: the theme toggle sits next to it */
.help-circle {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card);
  color: var(--sub); font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer;
  margin-right: 10px; padding: 0; box-shadow: var(--shadow-sm); vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center;
}
.help-circle:hover { background: var(--navy-soft); color: var(--navy); border-color: var(--navy-soft-line); }
.theme-btn svg { width: 14px; height: 14px; }
.theme-btn .ic-sun { display: none; }
body.dark .theme-btn .ic-sun { display: block; }
body.dark .theme-btn .ic-moon { display: none; }

/* ---------- Help window ---------- */
.help-overlay {
  position: fixed; inset: 0; background: rgba(10, 14, 24, .5); z-index: 60;
  display: flex; align-items: center; justify-content: center;
}
.help-pop {
  width: min(880px, 92vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.help-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--accent); color: var(--accent-ink); padding: 11px 18px;
}
.help-title { font-weight: 700; letter-spacing: .06em; font-size: clamp(13px, 1.5vw, 16px); }
.help-head .bevel-btn { box-shadow: none; }
.help-scroll { overflow-y: auto; padding: 14px 20px 20px; }
.help-warning {
  border: 1px solid #e7bb4a; background: #fdf3d7; color: #4a3a10; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px;
}
body.dark .help-warning { background: rgba(255, 210, 62, .1); border-color: rgba(255, 210, 62, .45); color: #f4e3ae; }
.hw-title { font-weight: 800; color: var(--red); letter-spacing: .05em; margin-bottom: 4px; }
.help-warning p { margin: 0; line-height: 1.5; }
.help-sec { margin-bottom: 16px; }
.hs-title {
  font-weight: 700; letter-spacing: .07em; color: var(--navy); border-bottom: 1px solid var(--line-strong);
  margin-bottom: 6px; font-size: 13px; padding-bottom: 3px;
}
.help-body p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }

/* ---------- the form views (create task / task view / delegate / roadmap tabs) ---------- */
.dark-view { background: var(--bg); color: var(--ink); padding: 18px 26px; overflow-y: auto; display: none; }
.dark-view.active { display: block; }

.ct-top {
  display: flex; align-items: baseline; gap: 26px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px; box-shadow: var(--shadow-sm); margin-bottom: 10px;
}
.ct-assigner { font-size: 15px; font-weight: 700; flex: 0 0 auto; }
.ct-assigner, .dg-title { line-height: 1.2; }
.ct-taskname-wrap { flex: 1; max-width: 620px; margin: 0 auto; }
.ct-taskname {
  width: 100%; font-family: var(--font); font-size: 22px; font-weight: 700; text-align: center;
  padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink);
}
.ct-taskname:focus { outline: 2px solid var(--focus); border-color: transparent; }
.ct-count { text-align: right; font-size: 12px; color: var(--sub); margin-top: 3px; }

.ct-grid { display: flex; gap: 40px; margin-top: 18px; }
.ct-left { flex: 0 0 460px; }
.ct-field { display: flex; align-items: center; margin-bottom: 13px; }
.ct-label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sub); width: 120px; flex: 0 0 auto; }
.ct-select {
  flex: 1; font-family: var(--font); font-size: 15px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--ink);
}
.ct-deadline-wrap { flex: 1; position: relative; display: flex; }
.ct-deadline { cursor: pointer; }
.cal-icon {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; cursor: pointer;
  filter: none;
}
body.dark .cal-icon { filter: invert(.85) hue-rotate(180deg); }

.ct-right { flex: 1; }
.watcher-btn { font-size: clamp(11px, 1.1vw, 13px); }
.no-watchers { margin-left: 16px; font-size: 14px; font-style: italic; color: var(--sub); }
.watcher-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin-top: 14px; max-width: 720px; }
.watcher-row { display: flex; align-items: center; gap: 8px; }
.watcher-row select {
  flex: 1; font-family: var(--font); font-size: 14px; padding: 7px 8px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--ink);
}

.ct-rt-label { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--navy); margin: 16px 0 6px; }
.rt-toolbar { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.rt-toolbar button {
  font-family: var(--font); font-size: 13px; min-width: 32px; padding: 4px 8px;
  border: 1px solid var(--line-strong); background: var(--card); cursor: pointer; color: var(--ink); border-radius: 7px;
}
.rt-toolbar button:hover { background: var(--navy-soft); }
.rt-save { margin-left: 12px; font-weight: 700; }
.rt-area {
  background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 16px;
  min-height: 150px; font-size: 15px; outline: none; overflow-y: auto; max-height: 300px;
  font-family: var(--font);
}
.rt-area:focus { outline: 2px solid var(--focus); }
.rt-area ul { margin-left: 22px; }
.rt-comment { min-height: 80px; }

.ct-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 14px 0 6px; }
.ct-error { color: var(--red); font-size: 14px; margin-right: auto; min-height: 20px; font-weight: 600; }
.upload-btn { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.upload-icon { width: 14px; height: 14px; }

/* ---------- attachments ---------- */
.tv-attachments { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.att-row {
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px;
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
}
.att-name { font-weight: 600; color: var(--focus); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; overflow-wrap: anywhere; }
.att-name:hover { opacity: .8; }
.att-meta { color: var(--sub); font-size: 12px; margin-left: auto; white-space: nowrap; }
.att-del { flex: 0 0 auto; }
.att-empty { color: var(--sub); font-style: italic; font-size: 13.5px; }

.ct-attach-queue { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ct-queued {
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
}
.ct-queued em { color: var(--sub); font-style: normal; font-size: 12px; }

/* ---------- date-picker popup ---------- */
.calendar-pop {
  position: absolute; z-index: 50; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 270px;
  box-shadow: var(--shadow-pop); font-family: var(--font);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-head button {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; font-size: 13px;
  width: 26px; height: 24px; border-radius: 6px;
}
.cal-head button:hover { background: var(--navy-soft); }
.cal-title { font-weight: 700; font-size: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-dow { font-size: 10.5px; font-weight: 700; color: var(--sub); padding: 2px 0; }
.cal-day { padding: 4px 0; font-size: 13px; cursor: pointer; border-radius: 6px; }
.cal-day:hover { background: var(--navy-soft); }
.cal-day.other { color: var(--faint); }
.cal-day.disabled { color: var(--faint); cursor: not-allowed; text-decoration: line-through; opacity: .55; }
.cal-day.disabled:hover { background: none; }
.cal-day.today { outline: 1px solid var(--focus); }
.cal-day.selected { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* ---------- task view ---------- */
.tv-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.tv-id { font-size: 13px; color: var(--sub); letter-spacing: .03em; }
.tv-name { font-size: 24px; font-weight: 700; margin-top: 4px; }
.tv-status-wrap { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.tv-status-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); }
.status-chip {
  padding: 4px 14px; border-radius: 999px; font-weight: 700; font-size: 13px;
  background: var(--blue-soft); color: var(--ink); border: none;
}
.status-Pending { background: var(--blue-soft); color: var(--blue); }
.status-Complete { background: var(--green-soft); color: var(--green); }
.status-Accepted { background: var(--green-soft); color: var(--green); outline: 1px solid var(--green-line); }
.status-Closed { background: var(--line); color: var(--sub); }
.tv-meta {
  display: flex; flex-wrap: wrap; gap: 8px 34px; margin-top: 14px; font-size: 14.5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px;
}
.tv-k { font-weight: 700; color: var(--sub); }
.tv-watchers { flex-basis: 100%; }
.tv-actions { margin-top: 16px; display: flex; gap: 14px; }
.tv-actions .bevel-btn { font-size: 14px; }
.tv-instr { min-height: 100px; }
.tv-comments { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.comment {
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-size: 14px;
}
.comment .c-head { font-size: 11.5px; color: var(--sub); margin-bottom: 3px; }
.comment.system { background: var(--raise); font-size: 13px; color: var(--sub); }
.tv-quest-note { font-size: 13px; font-style: italic; color: var(--sub); align-self: center; }

/* ---------- outbox ---------- */
.outbox-table th, .outbox-table td { font-size: 13px; text-align: left; }
.outbox-table td { vertical-align: top; }

/* ---------- view controls ---------- */
.view-select-wrap { margin-right: auto; display: flex; align-items: center; gap: 6px; }
.bar-label { font-weight: 700; font-size: clamp(9px, .9vw, 10.5px); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
#view-mode, #project-filter {
  font-family: var(--font); font-weight: 600; font-size: clamp(10px, 1vw, 12px);
  padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm);
  max-width: clamp(105px, 12vw, 165px);
}

/* ---------- tile view ---------- */
.tile-view { display: flex; gap: 0; flex: 1; min-height: 0; overflow: auto; background: var(--card); }
.tile-col { flex: 1 1 0; min-width: 190px; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 100%; }
.tile-col:last-child { border-right: none; }
.tile-col-head {
  background: var(--raise); color: var(--sub); font-weight: 700; font-size: clamp(10.5px, 1.1vw, 12.5px);
  letter-spacing: .07em; text-transform: uppercase;
  text-align: center; padding: 8px 5px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
.tile-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.tile {
  border: 1px solid var(--line); border-left-width: 5px; border-radius: 10px;
  padding: 8px 10px; cursor: pointer; box-shadow: var(--shadow-sm);
  position: relative; background: var(--card);
}
.tile .attach-badge { position: absolute; top: 5px; right: 5px; }
.tile:hover { box-shadow: var(--shadow-md); }
.tile-id { font-size: 10.5px; color: var(--sub); }
.tile-deadline { font-size: 12.5px; font-weight: 700; color: var(--navy); margin: 2px 0; }
.tile-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.tile-empty { color: var(--sub); font-style: italic; text-align: center; padding: 14px 0; }

/* ---------- calendar view ---------- */
.calendar-view { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--card); }
.cal-nav {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--raise); border-bottom: 1px solid var(--line);
}
.cal-nav-btn { font-size: clamp(10px, 1vw, 12px); padding: 3px 12px; }
.cal-view-title { font-size: clamp(13px, 1.5vw, 16px); font-weight: 700; margin-left: 10px; }
.cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow-head {
  background: var(--raise); color: var(--sub); font-weight: 700; font-size: clamp(9.5px, 1vw, 11.5px);
  letter-spacing: .06em; text-transform: uppercase;
  text-align: center; padding: 5px 0; border-bottom: 1px solid var(--line);
}
.cal-month-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(96px, 1fr); flex: 1; min-height: 0; overflow-y: auto;
}
.cal-cell { border: 1px solid var(--line); border-top: none; border-left: none; padding: 3px; display: flex; flex-direction: column; min-height: 0; background: var(--card); }
.cal-cell.other { background: var(--raise); }
.cal-cell.other .cal-cell-day { color: var(--faint); }
.cal-cell.today { outline: 2px solid var(--focus); outline-offset: -2px; }
.cal-cell.has-tasks { background: var(--card); }
.cal-cell-day { font-size: 12px; font-weight: 700; text-align: right; padding: 1px 4px; color: var(--sub); }
.cal-cell-tasks { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.task-chip {
  border-radius: 6px; border: 1px solid var(--line); border-left-width: 4px; padding: 1px 5px 2px;
  cursor: pointer; font-size: 11px; line-height: 1.25; position: relative; background: var(--card);
}
.task-chip:hover { box-shadow: var(--shadow-sm); filter: brightness(1.02); }
.chip-meta { display: flex; justify-content: space-between; gap: 6px; font-weight: 700; color: var(--ink); text-shadow: none; }
.chip-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-name {
  display: block; text-align: left; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: none;
}
.task-chip .attach-badge { position: absolute; bottom: 1px; right: 2px; width: 15px; height: 15px; }
.task-chip .attach-badge svg { width: 9px; height: 9px; }

/* ---------- attachment badge ---------- */
.attach-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 1px solid #7a8194;
  box-shadow: var(--shadow-sm); vertical-align: middle; margin-right: 5px; flex: 0 0 auto;
}
.attach-badge svg { width: 11px; height: 11px; }

/* Urgency language (tiles + calendar chips): soft tints + a saturated left edge.
   uc-* remains the single source of the color scheme (Narek 2026-08-16, retuned R08). */
.uc-pending  { background: #eef0ff; border-left-color: #8f93f5 !important; }
.uc-soon     { background: #fff1dd; border-left-color: var(--orange) !important; }
.uc-overdue  { background: #ffe5de; border-left-color: var(--red) !important; }
.uc-complete { background: #e7f6df; border-left-color: var(--green) !important; }
.uc-closed   { background: var(--line); border-left-color: var(--faint) !important; color: var(--sub); }
body.dark .uc-pending  { background: rgba(143, 147, 245, .16); }
body.dark .uc-soon     { background: rgba(255, 171, 61, .14); }
body.dark .uc-overdue  { background: rgba(255, 93, 93, .15); }
body.dark .uc-complete { background: rgba(52, 209, 123, .14); }
body.dark .uc-closed   { background: rgba(139, 150, 172, .15); }

/* ---------- task info pop-up ---------- */
.task-pop-overlay { position: fixed; inset: 0; background: rgba(10, 14, 24, .3); z-index: 60; }
.task-pop {
  position: fixed; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 24px; width: 520px; max-width: 92vw;
  box-shadow: var(--shadow-pop);
  transform: scale(.12); opacity: 0;
  transition: transform .18s ease-out, opacity .15s ease-out;
}
.task-pop.pop-open { transform: scale(1); opacity: 1; }
.task-pop.tp-uc-pending  { border-top: 4px solid #8f93f5; }
.task-pop.tp-uc-soon     { border-top: 4px solid var(--orange); }
.task-pop.tp-uc-overdue  { border-top: 4px solid var(--red); }
.task-pop.tp-uc-complete { border-top: 4px solid var(--green); }
.task-pop.tp-uc-closed   { border-top: 4px solid var(--faint); }
.tp-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; overflow-wrap: anywhere; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 24px; font-size: 14px; }
.tp-k { font-weight: 700; color: var(--sub); }
.tp-status-row { display: flex; align-items: center; gap: 8px; }
.tp-grid .status-chip { font-size: 12.5px; padding: 3px 12px; }
.tp-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 16px; }

/* ---------- admin window ---------- */
.admin-subnav { display: flex; gap: 6px; align-items: center; margin-left: 10px; flex-wrap: wrap; }
.admin-nav-btn { border-radius: 999px; }
.admin-nav-btn.admin-nav-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.admin-nav-btn.admin-nav-active:hover { background: var(--accent); }
.admin-frame { overflow-y: auto; padding: 10px 14px; gap: 6px; }
.admin-sec h3.ap-h {
  font-size: clamp(12px, 1.2vw, 14px); margin: 12px 0 7px; color: var(--navy);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; letter-spacing: .05em; text-transform: uppercase;
}
.admin-table { width: 100%; }
.admin-table th { font-size: clamp(10px, 1vw, 11.5px); padding: 7px 10px; }
.admin-table td { font-size: clamp(11px, 1.1vw, 13px); padding: 6px 10px; }
.ap-left { text-align: left !important; }
.ap-access { max-width: 420px; }
.ap-check { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; font-size: 12.5px; white-space: nowrap; }
.ap-check input { accent-color: var(--navy); }
body.dark .ap-check input { accent-color: var(--accent); }
.ap-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.ap-form .ap-note { flex-basis: 100%; margin-top: 2px; } /* R10: notes sit on their own line, never mid-row */
.ap-input {
  font-family: var(--font); font-size: 13px; padding: 6px 9px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--ink); max-width: 190px;
}
.ap-input:focus { outline: 2px solid var(--focus); border-color: transparent; }
.ap-lbl { font-weight: 700; font-size: 12px; color: var(--sub); }
.ap-note { font-size: 12px; color: var(--sub); max-width: 720px; }
.ap-pw { white-space: nowrap; }
.ap-newpw { font-family: var(--font); font-size: 12px; padding: 3px 7px; border: 1px solid var(--line-strong); border-radius: 6px; width: 110px; background: var(--card); color: var(--ink); }
.ap-danger { border: 1px solid var(--red); border-radius: 10px; padding: 9px 11px; background: var(--red-soft); }
.admin-msg { font-size: 13px; font-weight: 700; color: var(--green); }
.admin-msg-err { color: var(--red); }
.chpw-pop { display: flex; flex-direction: column; width: 400px; }
.chpw-pop .login-label { margin-top: 8px; }
.ma-projects { display: flex; flex-wrap: wrap; gap: 8px 16px; max-width: 950px; margin-bottom: 8px; }

/* archived: striped gray, admins only */
.uc-archived { background: repeating-linear-gradient(45deg, var(--line) 0 8px, var(--line-strong) 8px 16px); }
.task-pop.tp-uc-archived { border-top: 4px solid var(--faint); }
.arch-striped { background: repeating-linear-gradient(45deg, var(--line) 0 8px, var(--line-strong) 8px 16px) !important; }

/* ---------- confirmation pop-up + Manage Account footer ---------- */
.confirm-pop { display: flex; flex-direction: column; width: 430px; }
.confirm-msg { font-size: 14.5px; line-height: 1.5; }
.confirm-type-row { margin-top: 10px; }
.confirm-type-row .ap-input { max-width: 220px; }
#confirm-yes.confirm-danger { background: var(--red); border-color: var(--red); color: #fff; }
#admin-account:not([hidden]) { display: flex; flex-direction: column; min-height: 100%; }
.ma-footer {
  margin-top: auto; position: sticky; bottom: 0;
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  padding: 10px 4px 6px; background: var(--bg);
}
.ma-footer .login-error { margin-right: auto; margin-top: 0; }

/* ---------- Delegate + management window ---------- */
.dash-btn-stack { display: flex; gap: 9px; align-items: center; }
.dg-title { font-weight: 700; font-size: clamp(14px, 1.5vw, 17px); letter-spacing: .05em; color: var(--navy); text-transform: uppercase; }
.dg-table-wrap { flex: 1; min-height: 0; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; box-shadow: var(--shadow-sm); }
.dg-table th { font-size: clamp(10px, 1vw, 11.5px); padding: 8px 6px; text-align: center; }
.dg-table th.col-date { width: 172px; min-width: 172px; }
.dg-table td { padding: 6px; font-size: 12.5px; color: var(--ink); text-align: center; }
.dg-table td.ap-left { text-align: left; }
.dg-table .rc-wide { text-align: left; }
.dg-name { width: 15ch; font-family: var(--font); font-size: 12.5px; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--card); color: var(--ink); }
.dg-table select { font-family: var(--font); font-size: 12px; padding: 3px 5px; max-width: 150px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--card); color: var(--ink); }
.dg-mini { min-width: 64px; font-size: 11px; padding: 4px 9px; }
.dg-plus { min-width: 44px; font-size: 15px; font-weight: 700; }
.dg-plus-row td { text-align: left; }
/* the round red ✕ that depopulates a staged row */
.rc-xhead { width: 42px; }
.rc-xcell { text-align: center; }
.rc-x {
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: var(--red); color: #fff; font-weight: 700; font-size: 11px; line-height: 1;
  cursor: pointer; padding: 0; box-shadow: var(--shadow-sm);
}
.rc-x:hover { filter: brightness(1.15); }
.rc-x:active { transform: translateY(1px); }
.dg-deadline-cell { white-space: nowrap; }
.dg-deadline-txt { display: inline-block; min-width: 78px; }
.dg-deadline-cell .date-chip { min-width: 132px; }
.dg-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.dg-footer-left { display: flex; align-items: center; gap: 8px; }
.dg-footer-right { display: flex; align-items: center; gap: 10px; }
.dg-note { font-size: 12px; color: var(--sub); }
.dgw-pop { display: flex; flex-direction: column; width: 430px; }
.dgw-list { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 40vh; overflow-y: auto; }
.dgi-pop { display: flex; flex-direction: column; width: min(640px, 92vw); }
.dgi-area { min-height: 160px; }
.addproj-pop { display: flex; flex-direction: column; width: 400px; }
#dg-calendar-pop { z-index: 70; }
.ap-powner { max-width: 170px; font-size: 12px; }
.pj-rename-input { max-width: 200px; }

/* ---------- roadmaps ---------- */
.rm-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; margin-right: 4px; background: var(--card); box-shadow: var(--shadow-sm); }
.tgl-btn {
  font-family: var(--font); font-weight: 700; font-size: clamp(10px, 1vw, 12px);
  padding: 3px 10px; border: none; background: var(--card); cursor: pointer; color: var(--sub);
}
.tgl-btn + .tgl-btn { border-left: 1px solid var(--line); }
.tgl-btn.tgl-active { background: var(--accent); color: var(--accent-ink); }

/* legend (chips) */
.rm-legend { display: flex; align-items: center; gap: 7px; font-size: clamp(9.5px, 1vw, 11.5px); font-weight: 600; flex-wrap: wrap; color: var(--sub); }
.lg-item {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--card); border-radius: 999px; padding: 3px 9px;
}
.lg-flag { width: 10px; height: 10px; display: inline-block; border: none; border-radius: 3px; }
.lg-open { background: var(--rm-blue); }
.lg-soon { background: var(--rm-orange); }
.lg-overdue { background: var(--rm-red); }
.lg-complete { background: var(--rm-green); }
.lg-fin {
  width: 12px; height: 10px; display: inline-block; border: 1px solid var(--ink); border-radius: 2px; background: var(--card);
  background-image: linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
                    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
  background-size: 6px 6px; background-position: 0 0, 3px 3px;
}
.lg-today { width: 3px; height: 11px; display: inline-block; background: var(--purple); border-radius: 2px; }

/* the roadmap graphic */
.roadmap-view { flex: 1; min-height: 0; overflow: auto; padding: 10px 16px 14px; background: var(--card); }
.rm-block { position: relative; }
.rm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rm-title {
  text-align: center; font-size: clamp(17px, 2vw, 24px); font-weight: 800;
  letter-spacing: .04em; color: var(--navy); text-transform: uppercase; margin-top: -6px;
}
.rm-meta { font-size: 12.5px; color: var(--sub); }
.rm-meta b { color: var(--ink); }
.rm-canvas { position: relative; height: 320px; margin-top: 2px; }
.rm-axis { position: absolute; left: 0.5%; right: 2.8%; top: 50%; height: 4px; background: var(--rm-axis); border-radius: 4px; }
.rm-startcap { position: absolute; left: 0.5%; top: calc(50% - 6px); width: 4px; height: 16px; background: var(--rm-axis); border-radius: 3px; }
.rm-endcap { position: absolute; right: 0.4%; top: calc(50% - 47px); }
.rm-endcap .rm-flag { width: 40px; height: 52px; }
/* recolor the checkered-flag SVG through the theme: the pole follows the ink,
   the checker squares stay dark so the flag reads in both modes */
.rm-finflag line { stroke: var(--ink); }
.rm-finflag g { stroke: #1c2333; }
.rm-finflag rect[fill="#16294a"] { fill: #1c2333; }
.rm-fin-pin {
  top: -24px; left: -4px;
  background: var(--accent); color: var(--accent-ink); text-shadow: none;
  padding: 3px 10px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.rm-endcap-tall { top: calc(50% - 99px); }
.rm-finpole { width: 3px; margin-left: 4.2px; height: 52px; background: var(--ink); border-radius: 2px; }
.rm-endcap .rm-tip { bottom: calc(100% + 6px); left: auto; right: -4px; }
.rm-endcap:hover .rm-tip { display: block; }
.rm-today {
  position: absolute; top: calc(50% - 15px); width: 3px; height: 34px; background: var(--purple);
  transform: translateX(-1.5px); z-index: 2; border-radius: 3px; box-shadow: 0 0 6px rgba(142, 36, 170, .5);
}
.rm-today::after {
  content: "TODAY"; position: absolute; bottom: calc(100% + 4px); left: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; color: var(--purple);
  background: var(--card); border: 1px solid var(--purple); padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.rm-ms {
  position: absolute; bottom: calc(50% + 2px); transform: translateX(-1px);
  display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; z-index: 3;
}
/* R08: the flag is a rounded tag on a straight pole (approved mockup) */
.rm-flagtag {
  min-width: 34px; text-align: center; white-space: nowrap;
  padding: 4px 9px; border-radius: 7px 9px 9px 2px; color: #fff; font-weight: 800; font-size: 12.5px;
  letter-spacing: .03em; box-shadow: var(--shadow-sm);
}
.rm-pole { width: 2.5px; height: 30px; margin-left: 4px; background: var(--rm-pole); border-radius: 2px; }
.rm-poleext { width: 2.5px; margin-left: 4px; background: var(--rm-pole); }
.rm-ms-open .rm-flagtag { background: var(--rm-blue); }
.rm-ms-soon .rm-flagtag { background: var(--rm-orange); }
.rm-ms-overdue .rm-flagtag { background: var(--rm-red); }
.rm-ms-complete .rm-flagtag { background: var(--rm-green); }
.rm-ms:hover .rm-flagtag { filter: brightness(1.1); box-shadow: var(--shadow-md); }
.rm-ms-pin {
  position: absolute; bottom: calc(100% + 5px); left: -4px; top: auto; font-size: 11.5px; font-weight: 800;
  color: var(--navy); pointer-events: none; text-shadow: none;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 9px;
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.rm-tip {
  position: absolute; display: none; left: -8px; white-space: nowrap;
  background: var(--tip-bg); border: none; border-radius: 9px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--tip-ink); z-index: 6; pointer-events: none;
  box-shadow: var(--shadow-pop);
}
.rm-ms:hover .rm-tip { display: block; }
.rm-tip.tip-right { left: auto; right: -8px; }
.rm-qstem {
  position: absolute; top: calc(50% + 4px); width: 2px; background: var(--rm-stem); opacity: .9;
  transform: translateX(-1px); pointer-events: none;
}
.rm-quest { position: absolute; width: 13px; height: 13px; transform: translateX(-6.5px); cursor: pointer; z-index: 3; }
.rm-qd { width: 100%; height: 100%; transform: rotate(45deg); border: none; border-radius: 3px; box-shadow: var(--shadow-sm); }
.rm-quest:hover .rm-qd { filter: brightness(1.12); box-shadow: var(--shadow-md); }
.rm-quest .rm-tip { bottom: calc(100% + 8px); left: -8px; }
.rm-quest:hover .rm-tip { display: block; }
.qd-open .rm-qd { background: var(--rm-blue); }
.qd-soon .rm-qd { background: var(--rm-orange); }
.qd-overdue .rm-qd { background: var(--rm-red); }
.qd-done .rm-qd { background: var(--rm-green); }
.rm-sep { border-top: 2px dashed var(--line-strong); margin: 10px 0 14px; }

/* sticky comments */
.rm-note { position: absolute; width: 17px; height: 17px; cursor: pointer; z-index: 4; }
.rm-note svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(16, 24, 40, .3)); }
.rm-note:hover svg { filter: drop-shadow(0 0 5px rgba(47, 111, 214, .55)); }
.rm-note-ms { top: -40px; }
.rm-note-q { top: calc(100% + 5px); }
.rm-note-bubble {
  position: absolute; z-index: 8; width: 280px; max-width: 60vw;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 9px 13px; box-shadow: var(--shadow-pop); font-size: 13px; color: var(--ink);
  animation: rnb-pop .18s ease-out;
}
@keyframes rnb-pop { from { transform: scale(.12); opacity: .35; } to { transform: scale(1); opacity: 1; } }
.rm-note-bubble::after { content: ''; position: absolute; left: var(--tailx, 24px); border: 10px solid transparent; }
.rnb-tail-up::after { top: -20px; border-bottom-color: var(--line-strong); }
.rnb-tail-down::after { bottom: -20px; border-top-color: var(--line-strong); }
.rnb-head { font-size: 11px; font-weight: 700; color: var(--sub); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.rnb-del { margin-left: auto; }
.rnb-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-compose { margin-top: 8px; }
.ms-note-text {
  width: 100%; min-height: 64px; font-family: var(--font); font-size: 13px;
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; background: var(--card); color: var(--ink); resize: vertical;
}
.ms-addnote { margin-right: auto; }

/* quest / delegated marks in the task views (kept from R05, retuned) */
#task-rows tr.quest-mark td:first-child { border-left: 4px solid var(--pink); box-shadow: none; }
.tile.quest-mark { border-left: 5px solid var(--pink) !important; box-shadow: var(--shadow-sm); }
.task-chip.quest-mark { border-left: 4px solid var(--pink) !important; box-shadow: none; }
#task-rows tr.delegated-mark td:first-child { border-left: 4px solid var(--yellow); box-shadow: none; }
.tile.delegated-mark { border-left: 5px solid var(--yellow) !important; box-shadow: var(--shadow-sm); }
.task-chip.delegated-mark { border-left: 4px solid var(--yellow) !important; box-shadow: none; }

/* roadmap tabs (New / Edit Roadmap) */
.rc-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px; box-shadow: var(--shadow-sm);
}
/* each LABEL + control reads as one group, with clear air between groups */
.rc-head .ct-label { width: auto; }
.rc-head .ct-label:not(:first-child) { margin-left: 26px; }
.rc-name { max-width: 300px; font-size: 14px; }
.rc-due-wrap, .date-chip {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 5px 9px; min-width: 150px; cursor: pointer; box-shadow: var(--shadow-sm);
}
.rc-due-wrap .cal-icon, .date-chip .cal-icon { position: static; transform: none; width: 18px; height: 18px; flex: 0 0 auto; }
.rc-due-wrap .dg-deadline-txt, .date-chip .dg-deadline-txt { font-weight: 600; text-align: left; }
.dg-deadline-txt:empty::before { content: "Select date"; color: var(--faint); font-weight: 500; }
.rc-table-wrap { max-height: 30vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-top: 4px; box-shadow: var(--shadow-sm); }
.rc-review-wrap { max-height: 22vh; }
.rc-idcol { width: 110px; }
.rc-wide { width: 95%; min-width: 200px; }
.rc-note { font-size: 11.5px; font-style: italic; color: var(--sub); letter-spacing: 0; text-transform: none; }

/* milestone pop-up */
.ms-pop { display: flex; flex-direction: column; width: min(560px, 92vw); background: var(--card); }
.ms-comments-row { grid-column: 1 / -1; }
.ms-q-label { color: var(--navy); margin-top: 10px; }
.ms-quests { max-height: 36vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ms-q-row { display: flex; align-items: center; gap: 8px; font-size: 13px; border-bottom: 1px solid var(--line); padding: 4px 2px; }
.ms-q-id { font-family: var(--font); font-size: 11.5px; color: var(--sub); min-width: 118px; }
.ms-q-name { flex: 1; font-weight: 600; }
.ms-q-who { min-width: 70px; color: var(--sub); }
.ms-q-wl { font-weight: 700; color: var(--navy); }
.ms-q-chip { font-size: 11px; padding: 2px 8px; }

/* toasts */
#toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast {
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 9px 14px; font-size: 13px; box-shadow: var(--shadow-pop);
}
.toast b { display: block; font-size: 13.5px; margin-bottom: 1px; }

/* ================= V0.3 — the online round ================= */

/* login additions (5.1/5.3): keep-me-signed-in + the lockout warning line */
.login-keep {
  display: flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--sub); cursor: pointer;
}
.login-keep input { accent-color: var(--navy); width: 14px; height: 14px; margin: 0; flex: 0 0 auto; }
body.dark .login-keep input { accent-color: var(--accent); }
.login-warning { color: var(--orange); font-weight: 700; font-size: 13.5px; margin-top: 8px; }
.login-warning:empty { display: none; }

/* forced password change (5.2) */
.fp-msg { font-size: 13.5px; line-height: 1.5; color: var(--sub); margin-bottom: 6px; }
.fp-cancel { margin: 14px auto 0; }

/* ---------- Resources viewer (8): label-less name/body + the two exact headers ---------- */
.res-scroll { padding: 14px 22px 22px; }
.res-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 20px 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); max-width: 1050px;
}
.res-title { font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 6px; overflow-wrap: anywhere; }
.res-body { font-size: 14px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.res-body ul { margin-left: 22px; }
.res-subhead {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sub); border-bottom: 1px solid var(--line); padding-bottom: 3px; margin: 14px 0 7px;
}
.res-links { display: flex; flex-direction: column; gap: 5px; }
.res-link a { font-weight: 600; color: var(--focus); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.res-link a:hover { opacity: .8; }
.res-files { display: flex; flex-direction: column; gap: 6px; }
.res-empty { color: var(--sub); font-style: italic; padding: 30px; text-align: center; font-size: 15px; }

/* ---------- Resources authoring + HR tab (management window) ---------- */
.ra-editor { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 14px; background: var(--card); margin-bottom: 14px; max-width: 1050px; }
.ra-name { max-width: 340px; }
.ra-body { min-height: 110px; max-height: 220px; }
.hr-locked {
  border: 1px solid var(--orange); background: var(--orange-soft); color: var(--ink);
  border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 600; max-width: 720px;
}
.hr-open-btn { min-width: 74px; }
.hr-sec-note { font-size: 12px; color: var(--sub); margin: -2px 0 8px; }
.hr-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 420px)); gap: 10px 30px; margin: 6px 0 10px; }
.hr-field { display: flex; align-items: center; gap: 10px; }
.hr-field .ap-lbl { width: 150px; flex: 0 0 auto; }
.hr-field .ap-input { flex: 1; max-width: none; }
.hr-notes-row { grid-column: 1 / -1; max-width: none; }
.hr-file-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; background: var(--card); margin: 2px 4px 2px 0;
}
.hr-file-chip a { color: var(--focus); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hr-file-x {
  border: none; background: none; color: var(--red); font-weight: 800; cursor: pointer; font-size: 12px; padding: 0 2px;
}
.hr-cat-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 9px; color: var(--sub); white-space: nowrap;
}
.hr-back-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 10px 0 4px; }
.hr-text-cell { text-align: left !important; overflow-wrap: anywhere; min-width: 220px; }
.ma-secnote { font-size: 12px; color: var(--sub); }