:root {
  --bg-offcolor-rgb: 226, 231, 236; /* #E2E7EC */
  --fg-offcolor-rgb: 28, 38, 53; /* #1C2635 */
}

.ibm-plex-sans-condensed-regular {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}

[data-theme="dark"] {
  --bs-body-bg: #151A21;
  --bs-body: #F1F5F6;
  --bs-body-color: #F1F5F6;
  --bg-offcolor-rgb: 28, 38, 53; /* #1C2635 */
  --fg-offcolor-rgb: 226, 231, 236; /* #E2E7EC */
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: rgba(var(--bg-offcolor-rgb), 1);
  color: var(--bs-body-color);
}

button {
  color: var(--bs-body-color);
}

.list-group-item,
.offcanvas {
  color: var(--bs-body-color);
}

.btn-close {
  background: none;
}

.list-group-item,
.card,
.offcanvas {
  background-color: var(--bs-body-bg);
}

h5.section-heading {
  font-size: 0.9rem;
  text-transform: uppercase;
}

a, .nav-link {
  color: var(--bs-body-color);
}

.nav-link:focus,
.nav-link:hover,
a:hover {
  color: rgba(var(--fg-offcolor-rgb), 1);
}

.clickable-hover-border:hover {
  background-color: rgba(var(--bg-offcolor-rgb), 0.6);
}

.bg-offcolor {
  background-color: rgba(var(--bg-offcolor-rgb), 1);
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-toggler {
    display: inline-block !important;
  }
}

#mainNav.nav li a { font-weight: bold; }

.nav-underline .nav-link.active {
  border-bottom-color: currentcolor;
}

.nav-underline .nav-link {
  border-bottom: 1px solid transparent;
}

.task-group-row {
  border-bottom: 1px solid rgba(var(--bg-offcolor-rgb), 1);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.task-group-section {
  border-left: 1px solid rgba(var(--bg-offcolor-rgb), 1);
}

.hover-clickable:hover {
  background-color: rgba(var(--bg-offcolor-rgb), 1);
}

.dropdown-hide-caret.dropdown-toggle::after {
  display: none;
}

.text-muted-more {
  color: #ccc;
}

.text-bold {
  font-weight: bold;
}

.no-bullets {
  list-style-type: none;
}

/* Right-aligned, fixed-width metric column so the goal icons that follow it
   line up vertically regardless of the value's width. */
.lever-lift {
  display: inline-block;
  min-width: 4rem;
  text-align: right;
}

.text-important-maintain {
  color: rgba(220, 53, 69, 1);
}

.text-important-enjoy {
  color: rgba(255, 193, 7, 1);
}

a.no-link, a.no-link-strict {
  text-decoration: none;
}

a.no-link:hover {
  color: inherit;
  text-decoration: underline;
}

#mainNav.nav li a.subtle-navlink {
  font-weight: normal;
}

.nav-underline .nav-link.bg-secondary.active {
  border-bottom: 2px solid black;
}

a.goal-achieved {
  text-decoration: line-through;
  color: #aaa;
}
a.goal-achieved:hover {
  text-decoration: line-through;
  color: #888;
}

a.goal-selected {
  text-decoration: none;
  font-weight: bold;
}

.goal-status-planning,
a.goal-status-planning {
  color: #bbb;
}
a.goal-status-planning:hover {
  color: #bbb;
}

.goal-status-inprogress,
a.goal-status-inprogress {
  color: #0d6efd;
}
a.goal-status-inprogress:hover {
  color: #0a58ca;
}

.mode-stats {
  font-size: 12px;
}

span.task-count {
  color: #aaa;
}

span.important-count {
  color: rgba(220, 53, 69, 1) !important;
}

span.goal-metric {
  color: #aaa;
  white-space: nowrap;
}

span.goal-metric .goal-metric-current {
  color: var(--bs-body-color);
}

span.goal-lift {
  color: #aaa;
  white-space: nowrap;
}

.goal-metric-detail {
  font-size: 14px;
}

.goal-metric-detail .goal-metric-value {
  font-weight: 500;
}

.goal-metric-detail .goal-metric-source {
  font-size: 12px;
}

.goal-lift-detail {
  font-size: 14px;
}

.goal-lift-detail .goal-lift-value {
  font-weight: 500;
}

.goal-lift-detail .goal-lift-context {
  font-size: 12px;
}

.goal-lift-detail .goal-lift-context-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-orange {
  color: #ff9d00;
}

.task-stats {
  font-size: 10px;
}

.sort-item-drag {
  background-color: #ddd;
  color: #aaa;
}
.sort-target-hover-up {
  border-top: 1px solid #aaa;
}
.sort-target-hover-down {
  border-bottom: 1px solid #aaa;
}

.roadmap-verticals-view .roadmap-verticals-scroll {
  overflow-x: auto;
}

.roadmap-verticals-view .roadmap-verticals-table {
  min-width: 100%;
  width: max-content;
}

.roadmap-verticals-view .roadmap-verticals-table a.no-link {
  white-space: nowrap;
  display: inline-block;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

body.markdown-fullscreen-open {
  overflow: hidden;
}

.markdown-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 16px;
  background-color: var(--bs-body-bg);
}

.markdown-fullscreen-header {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(var(--fg-offcolor-rgb), 0.2);
}

.markdown-fullscreen-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.task-recurring-status-red span.task-title,
.task-recurring-status-yellow span.task-title,
.task-recurring-status-green span.task-title {
  padding: 0 5px;
}

.task-recurring-status-red span.task-title {
  background-color: #DC3545;
  color: white;
}

.task-recurring-status-yellow span.task-title {
  background-color: #FFC107;
  color: white;
}

.task-recurring-status-green span.task-title {
  background-color: #198754;
  color: white;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: bold;
  display: inline-block;
}

.status-badge.code-red {
  background-color: #DC3545;
  color: white;
}

.status-badge.code-orange {
  background-color: #FF9800;
  color: white;
}

.status-badge.code-yellow {
  background-color: #FFC107;
  color: #000;
}

.status-badge.green {
  background-color: #198754;
  color: white;
}

.badge.bg-orange {
  background-color: #FF9800;
  color: white;
}

/* Task board: status columns side by side, scrolling horizontally. Cards are
   dragged between columns to change status, and within/between them to set the
   category's single saved ordering. */
.task-board {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.task-board-saving {
  opacity: 0.7;
}

.task-board-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 260px;
  width: 260px;
  min-height: 0;
  max-height: 100%;
  padding: 8px;
  border-radius: 6px;
  background-color: rgba(var(--bg-offcolor-rgb), 0.45);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.task-board-column-over {
  background-color: rgba(var(--bg-offcolor-rgb), 0.95);
}

/* A column the dragged card can't legally land in (its status would be
   overridden by recurrence or due-date logic). */
.task-board-column-blocked {
  opacity: 0.3;
}

.task-board-column-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.task-board-column-count {
  font-weight: 400;
  opacity: 0.6;
}

/* Each column scrolls its own cards; the board itself only scrolls sideways. */
.task-board-column-cards {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  min-height: 48px;
  overflow-y: auto;
}

/* Cards keep their natural height; the column scrolls rather than squashing them. */
.task-board-column-cards > * {
  flex: 0 0 auto;
}

.task-board-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.75rem;
}

.task-card {
  padding: 6px 8px;
  border: 1px solid rgba(var(--fg-offcolor-rgb), 0.15);
  border-radius: 5px;
  background-color: var(--bs-body-bg);
  font-size: 0.85rem;
  cursor: grab;
}

.task-card:hover {
  border-color: rgba(var(--fg-offcolor-rgb), 0.4);
}

/* Recurring cards are ordered by their schedule, not by hand, so they don't
   offer a drag affordance. */
.task-board-column-recurring .task-card {
  cursor: default;
}

.task-card-dragging {
  cursor: grabbing;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: rotate(2deg);
}

.task-card-busy {
  opacity: 0.5;
}

.task-card-important .task-card-title {
  color: #DC3545;
}

.task-card-completed .task-card-title {
  text-decoration: line-through;
  opacity: 0.6;
}

/* A disabled recurring task is parked: it keeps its place in the Recurring
   column but is dimmed, since it raises nothing until it is enabled again. */
.task-card-disabled {
  opacity: 0.55;
}

.task-card-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.task-card-check {
  padding: 0;
  border: 0;
  background: none;
  line-height: 1.3;
}

.task-card-check:disabled {
  opacity: 0.35;
}

.task-card-title {
  flex: 1;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.task-card-title:hover {
  text-decoration: underline;
}

.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-left: 22px;
  font-size: 0.7rem;
  opacity: 0.85;
}

.task-card-meta:empty {
  display: none;
}

.task-card-meta .badge {
  font-size: 0.6rem;
  font-weight: 500;
}

.task-card-action {
  text-decoration: none;
}

/* Updates inbox */

/* A subtle bordered pill, so the filter reads as a control rather than a
   button — the kebab menu the other sections use can't show its own state. */
.updates-filter-btn {
  padding: 2px 8px;
  border: 1px solid rgba(var(--fg-offcolor-rgb), 0.25);
  border-radius: 5px;
  background-color: var(--bs-body-bg);
  /* Bootstrap's .btn hardcodes a dark color, which disappears in dark mode. */
  color: var(--bs-body-color);
  font-size: 0.8rem;
  opacity: 0.75;
}

.updates-filter-btn:hover {
  border-color: rgba(var(--fg-offcolor-rgb), 0.5);
  opacity: 1;
}

.updates-row {
  padding: 8px 4px;
  border-bottom: 1px solid rgba(var(--fg-offcolor-rgb), 0.15);
  font-size: 0.9rem;
}

.updates-row-busy {
  opacity: 0.5;
}

.updates-row-done .updates-row-title {
  opacity: 0.6;
}

.updates-row-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* Unread marker. Read rows keep the dot's width so titles stay aligned.
   Pinned to the top of the row so it tracks the first line when a long title
   wraps, rather than drifting to the middle of the block. */
.updates-row-dot {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background-color: #0D6EFD;
}

.updates-row-dot-read {
  background-color: transparent;
}

/* Now that the title sits on its own line, the subject has the top row to
   itself and only ellipses when it runs out of real room. */
.updates-row-subject {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.6;
}

.updates-row-subject:hover {
  opacity: 1;
}

.updates-row-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The title on its own line, lined up under the top row past the unread dot. */
.updates-row-title-line {
  padding-left: 13px;
  overflow-wrap: anywhere;
}

/* Snooze and check share the one slot at the end of the row: the check is what
   you normally see, and holding Shift swaps in snooze — the rarer action — for
   as long as the key (or the menu it opened) is down. */
.updates-row-main > .dropdown {
  display: none;
  /* The wrapper is the flex item, not the button, so the top alignment has to
     live here to match the check button it replaces. Flex rather than the
     default block, too: as a block it would lay the button out on a line box
     struck at the row's inherited line-height, and the extra half-leading would
     sit the icon a pixel below the check. */
  align-self: flex-start;
  /* With the title on its own line nothing in the top row grows, so whichever
     button is showing pushes itself to the right edge. */
  margin-left: auto;
}

.updates-row-main-actions > .dropdown {
  display: flex;
}

.updates-row-main-actions > .updates-row-check {
  display: none;
}

.updates-row-actions {
  padding: 0;
  border: 0;
  background: none;
  line-height: 1.3;
  opacity: 0.5;
}

.updates-row-actions:hover,
.updates-row-actions[aria-expanded="true"] {
  opacity: 1;
}

.updates-row-actions.dropdown-toggle::after {
  display: none;
}

/* The note left when an action row was checked off, filed under the row the
   same way its body is. */
.updates-row-done-comment {
  margin-top: 2px;
  padding-left: 13px;
  font-size: 0.85rem;
  opacity: 0.75;
}

.updates-row-snoozed {
  opacity: 0.7;
}

.updates-row-check {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1.3;
  opacity: 0.5;
}

.updates-row-check:hover {
  opacity: 1;
}

/* The outline icon fills in on hover, so the button previews what checking it
   off looks like. */
.updates-row-check-hover {
  display: none;
}

.updates-row-check:hover .updates-row-check-rest {
  display: none;
}

.updates-row-check:hover .updates-row-check-hover {
  display: inline-block;
}

.updates-row-check:disabled {
  opacity: 0.35;
}

.updates-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  /* Line up under the title, past the unread dot. */
  padding-left: 13px;
  font-size: 0.7rem;
  opacity: 0.6;
}

.updates-row-body {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  padding-left: 13px;
  font-size: 0.8rem;
  opacity: 0.8;
}

.updates-row-body-text {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Collapsed bodies read as one line; the toggle beside them opens the rest. */
.updates-row-body-clamped {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.updates-row-body-toggle {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
  opacity: 0.7;
}

.updates-row-body-toggle:hover {
  opacity: 1;
}
/* Typography for rendered markdown (`.markdown` wrappers around
   MarkdownHighlighted). The goal is a clearly readable hierarchy: each heading
   level differs by size *and* weight *and* case *and* colour, so h2/h3/h4 are
   never confusable at a glance. */

:root {
  --md-rule: rgba(var(--fg-offcolor-rgb), 0.16);
  --md-rule-strong: rgba(var(--fg-offcolor-rgb), 0.32);
  --md-muted: rgba(var(--fg-offcolor-rgb), 0.6);
  --md-subtle-bg: rgba(var(--fg-offcolor-rgb), 0.05);
  --md-code-bg: rgba(var(--fg-offcolor-rgb), 0.08);
  --md-accent: #0d6efd;
  --md-code-fg: #d63384;
  --md-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

[data-theme="dark"] {
  --md-rule: rgba(var(--fg-offcolor-rgb), 0.18);
  --md-rule-strong: rgba(var(--fg-offcolor-rgb), 0.34);
  --md-muted: rgba(var(--fg-offcolor-rgb), 0.62);
  --md-subtle-bg: rgba(var(--fg-offcolor-rgb), 0.07);
  --md-code-bg: rgba(var(--fg-offcolor-rgb), 0.12);
  --md-accent: #6ea8fe;
  --md-code-fg: #f78fb8;
}

.markdown {
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* ---------- Headings ---------- */

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  line-height: 1.25;
  scroll-margin-top: 1rem;
}

.markdown h1 {
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.85rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--md-rule-strong);
}

.markdown h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.7rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--md-rule);
}

.markdown h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.6rem 0 0.5rem;
}

/* h4 and below drop out of the "title" register entirely — small, uppercase,
   letterspaced labels — so they can't be mistaken for an h3. */
.markdown h4 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 1.4rem 0 0.4rem;
}

.markdown h5 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--md-muted);
  margin: 1.25rem 0 0.35rem;
}

.markdown h6 {
  font-size: 0.8rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--md-muted);
  margin: 1.2rem 0 0.35rem;
}

.markdown > *:first-child,
.markdown > *:first-child > *:first-child {
  margin-top: 0;
}

/* ---------- Body copy ---------- */

.markdown p {
  margin: 0 0 0.9rem;
}

.markdown strong {
  font-weight: 700;
}

.markdown a {
  color: var(--md-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(13, 110, 253, 0.4);
}

.markdown a:hover {
  color: var(--md-accent);
  text-decoration-color: currentcolor;
}

[data-theme="dark"] .markdown a {
  text-decoration-color: rgba(110, 168, 254, 0.45);
}

/* ---------- Lists ---------- */

.markdown ul,
.markdown ol {
  margin: 0 0 0.9rem;
  padding-left: 1.4rem;
}

.markdown li {
  margin-bottom: 0.25rem;
}

.markdown li > ul,
.markdown li > ol {
  margin-top: 0.25rem;
  margin-bottom: 0.35rem;
}

.markdown li::marker {
  color: var(--md-muted);
}

/* GFM task lists: no bullet, checkbox pulled into the margin. */
.markdown li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.15rem;
}

.markdown li > input[type="checkbox"] {
  margin-right: 0.45rem;
  vertical-align: -0.1em;
  accent-color: var(--md-accent);
}

.markdown li:has(> input[type="checkbox"]:checked) {
  color: var(--md-muted);
}

/* ---------- Blockquote / rule ---------- */

.markdown blockquote {
  margin: 1.1rem 0;
  padding: 0.35rem 0 0.35rem 1rem;
  border-left: 3px solid var(--md-rule-strong);
  color: var(--md-muted);
}

.markdown blockquote > *:last-child {
  margin-bottom: 0;
}

.markdown hr {
  height: 1px;
  margin: 1.8rem 0;
  border: 0;
  background-color: var(--md-rule-strong);
  opacity: 1;
}

/* ---------- Code ---------- */

.markdown code {
  font-family: var(--md-mono);
  font-size: 0.85em;
  padding: 0.12em 0.35em;
  border-radius: 4px;
  color: var(--md-code-fg);
  background-color: var(--md-code-bg);
}

.markdown pre {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  background-color: var(--md-code-bg);
}

.markdown pre code {
  padding: 0;
  font-size: 0.85rem;
  color: inherit;
  background: none;
}

/* Wrapper emitted by react-syntax-highlighter (PreTag="div"). */
.markdown .markdown-code-block {
  margin: 0 0 1rem !important;
  padding: 0.85rem 1rem !important;
  border-radius: 6px;
  font-size: 0.85rem !important;
}

/* ---------- Tables ---------- */

.markdown .markdown-table-wrap {
  margin-bottom: 1rem;
  overflow-x: auto;
}

.markdown table {
  border-collapse: collapse;
  margin-bottom: 0;
  font-size: 0.95em;
}

.markdown th,
.markdown td {
  border: 1px solid var(--md-rule);
  padding: 0.4rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.markdown th {
  background-color: var(--md-subtle-bg);
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.markdown tbody tr:nth-child(even) {
  background-color: var(--md-subtle-bg);
}

/* ---------- Media ---------- */

.markdown img {
  max-width: 100%;
  border-radius: 6px;
}

/* ---------- Fullscreen reading view ---------- */

/* Constrain the line length so long-form articles stay readable full-bleed. */
.markdown-measure {
  max-width: 78ch;
  margin: 0 auto;
}

.markdown-fullscreen-body .markdown-measure {
  font-size: 1.05rem;
  padding-bottom: 3rem;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */