: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;
  }
}


.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;
}


.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;
}

/* Undo toast. Closing or snoozing an inbox row takes it out of the list
   immediately, so this is the only handle left on the action for a few
   seconds — bottom centre, above everything, one at a time. */
.undo-toast-container {
  z-index: 1090;
}

.undo-toast {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid rgba(var(--fg-offcolor-rgb), 0.2);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.undo-toast .toast-body {
  padding-right: 0;
  font-size: 0.85rem;
}

.undo-toast-undo {
  margin-left: auto;
  padding: 0 0.75rem;
  border: 0;
  background: none;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.undo-toast-undo:disabled {
  opacity: 0.5;
}

/* LINKS — a fixed icon box whether or not the favicon has arrived yet, so a
   list doesn't reflow as icons stream in behind it. */
.link-favicon,
.link-favicon-fallback {
  display: inline-block;
  object-fit: contain;
  vertical-align: -2px;
  line-height: 1;
  flex: 0 0 auto;
}

.link-favorite {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.25rem 0.6rem;
  border: 1px solid #ddd;
  border-radius: 999px;
}

/* The left nav is the page's left edge, so the shell wrapper gives up its own
   gutter on that side. */
body > .container-fluid {
  padding-left: 0;
}

/* LEFT NAV — a collapsible sidebar holding the whole organization nav: logo,
   org selector, sections, search and the account links. It always loads
   collapsed (icons only); expanding it is per-view state, never persisted.
   Sticky rather than fixed so it sits under the flash/dev banners. */
.org-shell {
  display: flex;
  align-items: flex-start;
}

.org-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  flex: 0 0 auto;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 1rem;
  border-right: 1px solid rgba(var(--bg-offcolor-rgb), 1);
  overflow-x: hidden;
  overflow-y: auto;
}

.org-nav-collapsed .org-sidebar {
  width: 52px;
}

.org-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 1rem;
}

.org-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.org-nav-collapsed .org-sidebar-head {
  flex-direction: column;
}

.org-sidebar-logo img {
  width: 24px;
  height: 24px;
}

.org-nav-toggle {
  border: 0;
  background: none;
  padding: 0.25rem 0.4rem;
  line-height: 1;
  opacity: 0.6;
}

.org-nav-toggle:hover {
  opacity: 1;
}

.org-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.org-sidebar-foot {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(var(--bg-offcolor-rgb), 1);
}

.org-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: 0;
  border-radius: 0.25rem;
  background: none;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.org-nav-link.subtle-navlink {
  font-weight: normal;
}

.org-nav-link:hover {
  background-color: rgba(var(--bg-offcolor-rgb), 0.6);
}

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

/* Fixed-width icon column so the labels line up, and so the icons stay put
   horizontally as the nav collapses. */
.org-nav-icon {
  flex: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.org-sidebar-email {
  padding: 0 0.4rem 0.35rem;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-nav-search {
  padding: 0.3rem 0.4rem;
}

.org-nav-collapsed .org-nav-label {
  display: none;
}

/* Collapsed, the label is gone and the padding alone leaves a squat target, so
   each row becomes a square the width of the rail with the icon centred in it. */
.org-nav-collapsed .org-nav-link {
  aspect-ratio: 1;
  justify-content: center;
  padding: 0;
}

/* MAINTAIN/ENJOY mode switch — a labelled toggle at the right end of a board's
   title row. Bootstrap's form-check gutter holds a label that here sits on the
   other side of the input, so it goes. */
.me-mode-switch {
  min-height: 0;
  margin: 0;
  padding-left: 0;
}

.me-mode-switch .form-check-input {
  float: none;
  margin: 0;
  cursor: pointer;
}

.me-mode-switch .form-check-label {
  cursor: pointer;
  white-space: nowrap;
}

/* Categories nested under Tasks. They only ever render with the nav expanded,
   so they indent to the labels above them rather than to the icon rail. */
.org-nav-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.org-nav-link.org-nav-sublink {
  padding-left: 2.15rem;
  font-size: 0.9rem;
}

.org-nav-sublink .org-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 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.
 *


 */