@layer framework, base, components, layout, utilities;

@import url('https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css') layer(framework);

@layer base {
  :root {
    --pico-primary: #b5651d;
    --pico-primary: oklch(0.55 0.15 45);
    --pico-primary-hover: #9a5518;
    --pico-primary-hover: oklch(0.48 0.15 45);
    --pico-primary-focus: rgb(181 101 29 / 25%);
    --pico-primary-focus: oklch(0.55 0.15 45 / 0.25);
    --pico-primary-inverse: #fff;
    --pico-background-color: #faf8f5;
    --pico-card-background-color: #fff;
    --pico-card-sectioning-background-color: #f5f0ea;
    --pico-font-family: system-ui, sans-serif;
    --pico-color: #3d3529;
    --pico-muted-color: #8a7e6e;
    --pico-muted-border-color: #e8e0d4;
    --pico-del-color: #c2553a;
    --pico-ins-color: #5a8a4a;
    --pico-color-green-550: #5a8a4a;
    --pico-color-green-800: #3d6b30;
    --pico-color-red-600: #c2553a;
    --pico-color-red-700: #a8432e;
    --pico-color-red-900: #6e2a1a;
    --pico-color-red-100: #fdf0ec;
    --pico-border-radius: 0.5rem;
    --pico-form-element-spacing-vertical: 0.25rem;
    --pico-form-element-spacing-horizontal: 0.5rem;
    --shadow-card: 0 1px 3px rgb(60 45 20 / 8%);
    --shadow-card-hover: 0 4px 12px rgb(60 45 20 / 12%);
    --color-success: #5a8a4a;
    --color-danger: #c2553a;
    --color-warning: #c49a3c;
  }

  body {
    background: var(--pico-background-color);
    color: var(--pico-color);
  }

  h1 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    text-wrap: balance;
  }

  h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  label {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }

  input,
  select,
  textarea {
    padding: 0.4rem 0.6rem;
    font-size: 0.95rem;
  }

  @media (hover: none) and (pointer: coarse) {
    input,
    select,
    textarea {
      font-size: 16px;
    }
  }

  button,
  [role='button'] {
    padding: 0.4rem 0.8rem;
    font-size: 0.95rem;
  }

  table {
    font-size: 0.95rem;
  }

  td,
  th {
    padding: 0.4rem 0.5rem;
    line-height: 1.3;
  }

  article {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }

  section {
    margin-bottom: 1rem;
  }

  fieldset {
    padding: 0;
    margin-bottom: 0.5rem;
  }

  main.container {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }
}

@layer components {
  small.muted {
    opacity: 0.7;
  }

  td form {
    margin-bottom: 0;
  }

  [role='alert'] {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    border-left: 4px solid var(--pico-primary);
    border-radius: var(--pico-border-radius);
    background: color-mix(in srgb, var(--pico-primary) 7%, var(--pico-card-background-color));
    box-shadow: var(--shadow-card);
  }

  .toast-container {
    position: fixed;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2000;
    display: grid;
    gap: 0.45rem;
    width: min(92vw, 24rem);
    pointer-events: none;
  }

  .toast {
    margin: 0;
    border-left-width: 5px;
    border-left-style: solid;
    border-radius: 0.45rem;
    box-shadow: 0 10px 24px rgb(0 0 0 / 22%);
    background: var(--pico-background-color);
    color: var(--pico-color);
    pointer-events: auto;
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .toast--error {
    border-left-color: var(--pico-color-red-600);
    background: color-mix(in srgb, var(--pico-color-red-100) 50%, var(--pico-background-color));
    color: var(--pico-color-red-900);
  }

  .toast.is-leaving {
    opacity: 0;
    transform: translateY(-0.35rem);
  }

  .markdown-upload-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
  }

  .markdown-upload-toolbar .btn-upload-image,
  .markdown-upload-toolbar .btn-paste-url {
    font-size: 0.85rem;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
    width: auto;
  }

  .markdown-upload-toolbar .input-manual-url {
    flex: 1;
    min-width: 12rem;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    margin: 0;
  }

  .markdown-rendered img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out;
  }

  .markdown-rendered img:hover {
    opacity: 0.85;
  }

  @media (max-width: 640px) {
    .toast-container {
      right: 0.6rem;
      left: 0.6rem;
      width: auto;
    }
  }

  .btn-group {
    border: none;
    padding: 0;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .btn-group label {
    cursor: pointer;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--pico-primary);
    color: var(--pico-primary);
    background: transparent;
    transition: background 0.15s, color 0.15s;
    font-size: 0.85rem;
    border-radius: 0.35rem;
  }

  .btn-group input:checked + label {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
  }

  .btn-group input:disabled:checked + label {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    cursor: not-allowed;
  }

  .btn-group input:focus-visible + label,
  .btn-group label:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pico-primary) 45%, transparent);
    outline-offset: 1px;
  }

  .picker-scroll {
    max-height: 12rem;
    overflow-y: auto;
    margin-top: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.35rem;
  }

  .picker-scroll .btn-group {
    margin-bottom: 0;
  }

  body > main.container > article {
    max-width: 30rem;
    margin: 2.5rem auto 0;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-card-hover);
    background: var(--pico-card-background-color);
    padding: 1.35rem 1.4rem;
  }

  .member-picker input[type='search'],
  .member-picker input[type='search'][aria-invalid],
  .member-picker input[type='search'][aria-invalid='false'],
  .member-picker input[type='search'][aria-invalid='true'] {
    -webkit-appearance: textfield !important;
    appearance: textfield !important;
    --pico-icon-search: none !important;
    background-image: none !important;
    background-position: initial !important;
    background-size: initial !important;
    padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
  }

  .member-picker input[type='search']::-webkit-search-decoration,
  .member-picker input[type='search']::-webkit-search-cancel-button,
  .member-picker input[type='search']::-webkit-search-results-button,
  .member-picker input[type='search']::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .member-picker input[type='search']::-ms-clear,
  .member-picker input[type='search']::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
  }

  table[data-compact] [data-task-status] {
    display: none;
  }

  .flatpickr-calendar {
    font-size: 0.9rem;
  }

  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover {
    background: var(--pico-primary) !important;
    border-color: var(--pico-primary) !important;
  }

  .flatpickr-weekwrapper .flatpickr-weeks .flatpickr-day {
    color: var(--pico-muted-color);
  }

  .app-brand-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .app-brand-link svg {
    color: var(--pico-primary);
  }

  .user-menu-link {
    display: block;
    padding: 0.4rem 0.75rem;
    text-decoration: none;
    color: inherit;
  }

  .user-menu-form {
    margin: 0;
  }

  .user-menu-link--button {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
  }

  #topbar-notifications,
  #user-menu-toggle,
  #hamburger-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    line-height: 1;
    cursor: pointer;
  }

  #topbar-notifications {
    position: relative;
    padding: 0.15rem;
    border-radius: 0.45rem;
  }

  #user-menu-toggle {
    padding: 0.15rem;
    border-radius: 0.45rem;
  }

  #hamburger-btn {
    padding: 0.15rem 0.4rem;
    font-size: 1.4rem;
    border-radius: 0.45rem;
  }

  #topbar-notifications:focus-visible,
  #user-menu-toggle:focus-visible,
  #hamburger-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pico-primary) 45%, transparent);
    outline-offset: 1px;
  }

  .sidebar-area-link {
    font-size: 0.8rem;
    opacity: 0.55;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    display: block;
  }

  .sidebar-area-link.is-active {
    opacity: 0.8;
  }

  .sidebar-main-link {
    opacity: 0.5;
  }

  .sidebar-context-label {
    display: block;
    opacity: 0.6;
    font-size: 0.82rem;
    font-weight: 600;
  }

  .sidebar-project-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.45rem;
    opacity: 0.85;
    text-decoration: none;
    color: inherit;
    border-radius: 0.45rem;
    transition: background-color 0.16s ease, opacity 0.16s ease;
  }

  .sidebar-project-link:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--pico-primary) 7%, transparent);
  }

  .sidebar-project-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pico-primary) 45%, transparent);
    outline-offset: 1px;
  }

  .sidebar-project-link--nested {
    padding-left: 0.65rem;
  }

  .sidebar-project-link.is-active {
    font-weight: 600;
    opacity: 1;
    background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
  }

  .sidebar-project-dot,
  .project-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    background: var(--project-color, var(--pico-primary));
  }

  .sidebar-archive-link {
    opacity: 0.5;
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.15rem 0.45rem;
    display: block;
    text-decoration: none;
    border-radius: 0.45rem;
  }

  .sidebar-archive-link:hover {
    opacity: 0.9;
    background: color-mix(in srgb, var(--pico-primary) 7%, transparent);
  }

  .sidebar-nav-link {
    display: block;
    padding: 0.24rem 0.45rem;
    border-radius: 0.45rem;
    opacity: 0.8;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.16s ease, opacity 0.16s ease;
  }

  .sidebar-nav-link[href='/l'] {
    margin-top: 0.55rem;
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 82%, #fff);
  }

  .sidebar-nav-link:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--pico-primary) 8%, transparent);
  }

  .sidebar-nav-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pico-primary) 45%, transparent);
    outline-offset: 1px;
  }

  .sidebar-nav-link.is-active {
    font-weight: 600;
    opacity: 1;
    background: color-mix(in srgb, var(--pico-primary) 13%, transparent);
  }

  .breadcrumb-home-link {
    text-decoration: none;
  }

  .project-dot {
    vertical-align: middle;
  }

  .link-add {
    font-size: 0.9rem;
    color: var(--color-success);
    font-weight: 400;
  }

  .link-add-soft {
    font-size: 0.8rem;
    color: var(--color-success);
  }

  .project-grid-link {
    text-decoration: none;
    color: inherit;
    flex: 0 0 calc(33.333% - 0.5rem);
    min-width: 200px;
    transition: transform 0.18s ease;
  }

  .project-grid-link article {
    border-radius: 0.7rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }

  .project-grid-link:hover {
    transform: translateY(-2px);
  }

  .project-grid-link:hover article {
    box-shadow: var(--shadow-card-hover);
  }

  .project-grid-link article > small:first-of-type {
    margin-left: 0.35rem;
    padding: 0.08rem 0.46rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pico-primary) 12%, #fff);
    color: color-mix(in srgb, var(--pico-primary) 70%, #fff);
    font-weight: 700;
    font-size: 0.72rem;
  }

  .project-grid-link article > br + small {
    color: var(--pico-muted-color);
  }

  .journal-project-toggle {
    border: 0;
    background: none;
    padding: 0.05rem 0.28rem;
    margin: 0 0 0 0.25rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    border-radius: 0.35rem;
    transition: background-color 0.16s ease, color 0.16s ease;
  }

  .journal-project-toggle:hover,
  .journal-project-toggle[aria-expanded='true'] {
    color: var(--pico-primary);
    background: color-mix(in srgb, var(--pico-primary) 11%, transparent);
  }

  .journal-project-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pico-primary) 45%, transparent);
    outline-offset: 1px;
  }

  a.u-margin-left-30px {
    font-size: 0.78rem;
    color: var(--pico-muted-color);
    text-decoration: none;
    border-bottom: 1px dotted color-mix(in srgb, var(--pico-muted-color) 65%, transparent);
  }

  a.u-margin-left-30px:hover {
    color: var(--pico-primary);
    border-bottom-color: currentColor;
  }

  .journal-date-chip {
    padding: 0.2rem 0.45rem;
    margin: 0;
    font-size: 0.8rem;
  }

  #journal-add-form input[name='content'] {
    padding: 0.3rem 0.5rem;
    margin-bottom: 0;
    flex: 1;
  }

  #journal-add-form > button[type='submit'] {
    width: auto;
    padding: 0.3rem 0.65rem;
    margin-bottom: 0;
  }

  .journal-delete-link {
    font-size: 0.8rem;
    opacity: 0.5;
    text-decoration: none;
  }

  .horizon-link {
    font-weight: 600;
    text-decoration: none;
  }

  .request-log-status {
    color: var(--pico-del-color);
  }

  #journal-tasks-todo .task-item {
    border-bottom: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 72%, transparent);
  }

  #journal-tasks-todo .task-item:last-child {
    border-bottom: 0;
  }

  #journal-entries [data-journal-day-label] {
    display: inline-block;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pico-primary) 10%, #fff);
    color: color-mix(in srgb, var(--pico-primary) 72%, #fff);
  }

  #journal-entries [data-journal-row] {
    border-bottom: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 66%, transparent);
  }

  #journal-entries [data-journal-day-entries] [data-journal-row]:last-child {
    border-bottom: 0;
  }

  body .u-color-green {
    color: var(--color-success);
  }

  .task-link-done,
  .is-task-done {
    text-decoration: line-through;
    opacity: 0.6;
    color: color-mix(in srgb, var(--pico-muted-color) 90%, var(--pico-color));
    text-decoration-color: color-mix(in srgb, var(--pico-muted-color) 80%, transparent);
  }

  .task-list-done-header.is-hidden,
  .is-hidden,
  [hidden] {
    display: none !important;
  }

  .task-item-fade {
    transition: opacity 0.3s;
  }

  .task-item-fade.is-fading {
    opacity: 0.3;
  }

  .task-item-meta {
    flex: 0 0 auto;
  }

  .task-item-has-description {
    flex-wrap: wrap;
  }

  .task-description-toggle {
    all: unset;
    cursor: pointer;
    color: var(--pico-muted-color);
    font-size: 0.78rem;
    line-height: 1;
  }

  .task-description-toggle:hover,
  .task-description-toggle:focus-visible {
    text-decoration: underline;
  }

  .task-item-description {
    flex: 0 0 100%;
    margin: 0.2rem 0 0 1.5rem;
    color: var(--pico-muted-color);
    line-height: 1.35;
  }

  .task-item-description > :first-child {
    margin-top: 0;
  }

  .task-item-description > :last-child {
    margin-bottom: 0;
  }

  .task-item-comments {
    display: grid;
    gap: 0.35rem;
    color: inherit;
    line-height: normal;
  }

  .task-item-comments .task-comment-item {
    margin: 0;
  }

  .task-item-date {
    display: inline-block;
    min-width: 16ch;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .date-tooltip-trigger {
    position: relative;
    cursor: pointer;
  }

  .date-tooltip-trigger::before,
  .date-tooltip-trigger::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
  }

  .date-tooltip-trigger::before {
    content: '';
    position: absolute;
    right: 0.6rem;
    bottom: calc(100% + 0.05rem);
    border-width: 0.3rem 0.3rem 0;
    border-style: solid;
    border-color: var(--pico-contrast-background) transparent transparent;
    transform: translateY(0.2rem);
    z-index: 29;
  }

  .date-tooltip-trigger::after {
    content: attr(data-date-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.35rem);
    min-width: 11rem;
    max-width: min(72vw, 18rem);
    padding: 0.35rem 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid var(--pico-muted-border-color);
    background: var(--pico-contrast-background);
    color: var(--pico-contrast-inverse);
    white-space: pre-line;
    text-align: left;
    line-height: 1.3;
    font-size: 0.75rem;
    transform: translateY(0.2rem);
    z-index: 30;
  }

  .date-tooltip-trigger:hover::before,
  .date-tooltip-trigger:hover::after,
  .date-tooltip-trigger:focus-visible::before,
  .date-tooltip-trigger:focus-visible::after,
  .date-tooltip-trigger.is-open::before,
  .date-tooltip-trigger.is-open::after {
    opacity: 1;
    transform: translateY(0);
  }

  .date-tooltip-trigger:focus-visible {
    outline: 1px dashed var(--pico-primary);
    outline-offset: 2px;
    border-radius: 0.2rem;
  }

  @media (max-width: 768px) {
    .task-item-date {
      min-width: 12ch;
    }
  }

  .task-status-btn {
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid var(--pico-primary);
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    cursor: pointer;
    margin: 0;
    width: auto;
    transition: filter 0.14s ease, box-shadow 0.14s ease;
  }

  .task-status-btn:hover {
    filter: brightness(0.96);
  }

  .task-status-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pico-primary) 45%, transparent);
    outline-offset: 1px;
  }

  .task-status-btn[aria-busy='true'] {
    cursor: progress;
    opacity: 0.85;
  }

  .task-status-btn.is-loading {
    position: relative;
    padding-right: 1.6rem;
  }

  .task-status-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.55rem;
    width: 0.65rem;
    height: 0.65rem;
    margin-top: -0.325rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: task-status-spin 0.7s linear infinite;
  }

  .task-status-btn.is-active {
    background: var(--pico-primary-hover);
    border-color: var(--pico-primary-hover);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pico-primary) 16%, transparent);
  }

  @keyframes task-status-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .task-comment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    max-width: 600px;
  }

  .task-comment-form > textarea {
    min-width: 0;
  }

  .task-comment-form > button[type='submit'] {
    flex-shrink: 0;
  }

  .task-comment-form > .markdown-upload-toolbar {
    flex: 1 0 100%;
    margin-top: 0;
  }

  .task-comment-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    margin: 0.6rem 0;
    background: color-mix(in srgb, var(--pico-card-sectioning-background-color) 62%, #fff);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.4rem;
    box-shadow: var(--shadow-card);
  }

  .task-comment-content {
    min-width: 0;
    line-height: 1.35;
  }

  .task-comment-content > :first-child {
    margin-top: 0;
  }

  .task-comment-content > :last-child {
    margin-bottom: 0;
  }

  .task-comment-meta {
    width: 9.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    margin-top: 0.05rem;
  }

  .task-comment-date {
    color: var(--pico-muted-color);
    white-space: nowrap;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .task-comment-author-link {
    text-decoration: none;
    color: var(--pico-muted-color);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .task-comment-author-link:hover,
  .task-comment-author-link:focus-visible {
    color: var(--pico-primary);
    text-decoration: underline;
  }

  .task-comment-meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .comment-delete-form {
    display: inline;
    margin: 0;
    padding: 0;
  }

  .comment-delete-btn {
    background: none;
    border: none;
    color: var(--pico-muted-color);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.15rem;
    margin: 0;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
  }

  .comment-delete-btn:hover {
    opacity: 1;
    color: var(--pico-del-color, #c62828);
  }

  @media (max-width: 640px) {
    .task-comment-item {
      grid-template-columns: 1fr;
      gap: 0.45rem;
    }

    .task-comment-meta {
      width: 100%;
      align-items: flex-end;
      margin-top: 0;
    }
  }

  h1.u-margin-0 + a.u-font-size-0-8rem,
  h1.u-margin-bottom-0 + a.u-font-size-0-8rem {
    display: inline-flex;
    margin-top: 0.15rem;
    color: var(--pico-muted-color);
    text-decoration: none;
  }

  h1.u-margin-0 + a.u-font-size-0-8rem:hover,
  h1.u-margin-bottom-0 + a.u-font-size-0-8rem:hover {
    color: var(--pico-primary);
    text-decoration: underline;
  }

  h1.u-margin-0,
  h1.u-margin-bottom-0 {
    display: inline-flex;
    margin-right: 0.45rem;
    vertical-align: middle;
  }

  .task-meta,
  .task-recurrence {
    margin-bottom: 0.35rem;
  }

  .task-meta small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
    gap: 0.25rem 0.75rem;
  }

  .task-recurrence small {
    display: inline-flex;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pico-primary) 11%, #fff);
    color: color-mix(in srgb, var(--pico-primary) 72%, #fff);
  }

  .task-people a,
  .person-relations a,
  p.u-font-size-0-8em.u-opacity-0-6.u-margin-0-5rem-0 a {
    display: inline-flex;
    align-items: center;
    padding: 0.03rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pico-primary) 8%, #fff);
    text-decoration: none;
  }

  .task-people a:hover,
  .person-relations a:hover,
  p.u-font-size-0-8em.u-opacity-0-6.u-margin-0-5rem-0 a:hover {
    background: color-mix(in srgb, var(--pico-primary) 14%, #fff);
  }

  .task-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: start;
  }

  .task-form-col-1 {
    grid-column: span 1;
  }

  .task-form-col-2 {
    grid-column: span 2;
  }

  .task-form-grid > label,
  .task-form-grid > div,
  .task-form-grid > details,
  .task-form-grid > button {
    margin: 0;
  }

  .task-form-grid > label {
    color: color-mix(in srgb, var(--pico-color) 86%, var(--pico-muted-color));
  }

  .task-form-section-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
  }

  .task-form-reminders .btn-group label {
    padding: 0.125rem 0.3rem;
  }

  .task-form-description textarea {
    min-height: 6rem;
  }

  .task-form-details {
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
  }

  .task-form-details[open] {
    padding-bottom: 0.5rem;
  }

  .task-form-details > summary {
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
  }

  .task-form-submit {
    width: auto;
    min-width: 7rem;
    justify-self: start;
  }

  .task-form-rec-wrap {
    margin-top: 0.5rem;
  }

  .task-form-custom-interval {
    width: 4rem;
    margin: 0;
    padding: 0.2rem 0.4rem;
  }

  .project-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: start;
  }

  .project-form-col-1 {
    grid-column: span 1;
  }

  .project-form-col-2 {
    grid-column: span 2;
  }

  .project-form-col-3 {
    grid-column: 1 / -1;
  }

  .project-form-grid > label,
  .project-form-grid > div,
  .project-form-grid > button {
    margin: 0;
  }

  .project-form-submit {
    width: auto;
    min-width: 7rem;
    justify-self: start;
  }

  .project-form-archive-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .project-archive-link {
    font-size: 0.8rem;
    color: var(--pico-primary);
    text-decoration: underline;
    cursor: pointer;
  }

  .project-form-archive-toggle--spaced {
    margin-top: 0.6rem;
  }

  .project-quick-add {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    max-width: 400px;
    margin-right: 15px;
    padding: 0.18rem;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--pico-card-sectioning-background-color) 72%, #fff);
    border: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 82%, #fff);
  }

  .notifications-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: flex-end;
    margin-bottom: 0.55rem;
  }

  .notifications-filters label {
    margin: 0;
    min-width: 9rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--pico-muted-border-color);
  }

  .notification-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    padding: 0.26rem 10px;
    margin: 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
  }

  .notifications-list .notification-row:nth-child(odd) {
    background: color-mix(in srgb, var(--pico-primary) 6%, #fff);
  }

  .notifications-list .notification-row:nth-child(even) {
    background: transparent;
  }

  .notification-row.is-unread {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pico-primary) 70%, transparent);
  }

  .notification-row__content {
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.18;
    word-break: break-word;
  }

  .notification-row__content.is-read {
    color: var(--pico-muted-color);
  }

  .notification-row__content a {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px dotted color-mix(in srgb, currentColor 55%, transparent);
  }

  .notification-row__content a:hover {
    border-bottom-color: currentColor;
  }

  .notification-row__read-form {
    margin: 0;
  }

  .notification-row__meta {
    display: grid;
    grid-template-columns: auto 1.2rem;
    align-items: center;
    gap: 0.28rem;
    justify-items: end;
    white-space: nowrap;
  }

  .notification-row__time {
    font-size: 0.74rem;
    color: var(--pico-muted-color);
  }

  .notification-row__read-slot {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
  }

  .notification-read-button {
    width: 1.2rem;
    height: 1.2rem;
    min-width: 1.2rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 80%, transparent);
    background: transparent;
    color: var(--pico-muted-color);
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .notification-read-button:hover {
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary);
    background: var(--pico-primary);
  }

  .notification-read-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pico-primary) 50%, transparent);
    outline-offset: 1px;
  }

  @media (max-width: 900px) {
    .notification-row {
      column-gap: 0.35rem;
      padding-left: 10px;
      padding-right: 10px;
    }

    .notification-row__content {
      font-size: 0.79rem;
      line-height: 1.16;
    }

    .notification-row__time {
      font-size: 0.7rem;
    }
  }

  .stats-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  .stats-filter-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .stats-filter-inline .btn-group {
    margin-bottom: 0;
  }

  .stats-leaderboard {
    margin-bottom: 1.25rem;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .stats-card {
    margin-bottom: 0;
    padding: 0.65rem;
    background: color-mix(in srgb, var(--pico-card-sectioning-background-color) 68%, #fff);
    border: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 78%, #fff);
    box-shadow: var(--shadow-card);
  }

  .stats-card > header {
    margin-bottom: 0.45rem;
  }

  .stats-top-list {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.4rem;
  }

  .stats-top-row {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
    justify-content: space-between;
  }

  .stats-top-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stats-bar-track {
    display: block;
    width: 100%;
    height: 0.32rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pico-muted-border-color) 65%, transparent);
    overflow: hidden;
  }

  .stats-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--pico-primary) 85%, #fff) 0%,
      color-mix(in srgb, var(--color-warning) 80%, #fff) 100%
    );
  }

  .stats-trend {
    margin-bottom: 0.4rem;
  }

  .stats-trend-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    opacity: 0.8;
  }

  .stats-sparkline {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    border: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 70%, transparent);
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--pico-card-background-color) 86%, #f7f1e8);
    padding: 0.35rem;
  }

  .stats-sparkline path {
    fill: none;
    stroke: color-mix(in srgb, var(--pico-primary) 82%, var(--color-warning));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .stats-leaderboard tbody td:first-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .stats-change-positive {
    color: var(--pico-color-green-800);
    font-weight: 600;
  }

  .stats-change-negative {
    color: var(--pico-color-red-700);
    font-weight: 600;
  }

  @media (max-width: 900px) {
    .stats-filters {
      align-items: flex-start;
    }

    .stats-filter-inline {
      flex-wrap: wrap;
    }
  }

  .people-table td:nth-child(3),
  .people-table td:nth-child(4) {
    font-variant-numeric: tabular-nums;
  }

  .people-table tbody tr:hover {
    background: var(--pico-card-sectioning-background-color);
  }

  .wiki-index-table td:nth-child(2) small {
    display: block;
    max-width: 44ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wiki-index-table td:first-child small a {
    display: inline-flex;
    padding: 0.03rem 0.38rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pico-primary) 10%, #fff);
    text-decoration: none;
  }

  .u-display-inline {
    display: inline;
  }

  .u-max-width-400px {
    max-width: 400px;
  }

  .u-width-6rem {
    width: 6rem;
  }

  .u-vertical-align-middle {
    vertical-align: middle;
  }

  .u-text-decoration-none {
    text-decoration: none;
  }

  .u-padding-0-1rem-0-4rem {
    padding: 0.1rem 0.4rem;
  }

  .u-margin-left-0-5rem {
    margin-left: 0.5rem;
  }

  .u-margin-left-30px {
    margin-left: 30px;
  }

  .u-margin-0-25rem-0-0-1rem {
    margin: 0.25rem 0 0 1rem;
  }

  .u-max-width-560px {
    max-width: 560px;
  }

  .u-opacity-0-65 {
    opacity: 0.65;
  }

  .u-opacity-0-75 {
    opacity: 0.75;
  }
}

@layer layout {
  #app-topbar,
  #app-shell {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  #app-topbar {
    background: var(--pico-card-sectioning-background-color);
    border-bottom: 0 !important;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--pico-muted-border-color) 95%, #fff);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  #app-sidebar {
    background: var(--pico-card-sectioning-background-color);
  }

  #app-main {
    background: var(--pico-card-background-color);
  }

  #sidebar-overlay {
    display: none;
  }

  @media (max-width: 900px) {
    .task-form-grid {
      grid-template-columns: 1fr;
    }

    .task-form-col-1,
    .task-form-col-2 {
      grid-column: 1 / -1;
    }

    .project-form-grid {
      grid-template-columns: 1fr;
    }

    .project-form-col-1,
    .project-form-col-2,
    .project-form-col-3 {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 768px) {
    table[data-compact] th:nth-child(3),
    table[data-compact] td:nth-child(3) {
      display: none;
    }

    table[data-compact] [data-task-status] {
      display: inline;
    }

    #hamburger-btn {
      display: block !important;
    }

    #app-sidebar {
      position: fixed;
      top: 0;
      left: -182px;
      width: 182px !important;
      height: 100vh;
      z-index: 200;
      background: var(--pico-card-sectioning-background-color);
      border-right: 1px solid var(--pico-muted-border-color);
      padding: 1rem 0.75rem;
      transition: left 0.2s ease;
      overflow-y: auto;
      font-size: 1rem !important;
    }

    #app-sidebar.open {
      left: 0;
    }

    #sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 199;
    }

    #sidebar-overlay.open {
      display: block;
    }

    #app-main {
      max-width: 100% !important;
      padding: 1rem !important;
    }

    #app-shell {
      min-height: auto !important;
    }
  }
}