:root {
  --display-scale: 1;
  --reading-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --app-bg: var(--palette-f7f6fa);
  --app-surface: var(--surface, #fff);
  --app-raised: var(--surface-raised, var(--palette-faf9fd));
  --app-soft: var(--palette-eee9fa);
  --app-ink: var(--palette-211638);
  --app-muted: var(--palette-777185);
  --app-border: var(--palette-e9e5ef);
  --app-accent: var(--palette-5737b3);
  --app-accent-hover: color-mix(in srgb, var(--app-accent), #000 12%);
  --app-marker: var(--palette-ea123c);
  --app-error: var(--palette-c31945, #9c4f36);
  --app-error-bg: var(--palette-fce7ed, #fff0ec);
  --app-on-accent: #fff;
  --green: var(--app-accent);
  --border: var(--app-border);
  --muted: var(--app-muted);
  color-scheme: light;
}
html[data-appearance='dark'] {
  color-scheme: dark;
}
html[data-display-font='luciole'] {
  --reading-font: Luciole, Arial, sans-serif;
}
html[data-display-font='opendyslexic'] {
  --reading-font: OpenDyslexic, Arial, sans-serif;
}
@font-face {
  font-family: Luciole;
  src: url('/assets/fonts/luciole-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Luciole;
  src: url('/assets/fonts/luciole-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Luciole;
  src: url('/assets/fonts/luciole-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Luciole;
  src: url('/assets/fonts/luciole-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: OpenDyslexic;
  src: url('/assets/fonts/opendyslexic-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: OpenDyslexic;
  src: url('/assets/fonts/opendyslexic-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: OpenDyslexic;
  src: url('/assets/fonts/opendyslexic-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: OpenDyslexic;
  src: url('/assets/fonts/opendyslexic-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
html[data-display-spacing='airy'] body {
  letter-spacing: 0.035em;
  word-spacing: 0.12em;
  line-height: 1.7;
}
html[data-display-spacing='airy'] .bar-label,
html[data-display-spacing='airy'] textarea {
  line-height: 1.6;
}
html[data-display-motion='reduced'] *,
html[data-display-motion='reduced'] *:before,
html[data-display-motion='reduced'] *:after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-display-contrast='strong'] button,
html[data-display-contrast='strong'] input,
html[data-display-contrast='strong'] select,
html[data-display-contrast='strong'] textarea {
  border-color: var(--app-ink);
}
html[data-display-contrast='strong'] .bar {
  border: 1px solid currentColor;
}
html[data-display-contrast='strong'] .bar.done {
  opacity: 1;
}
html[data-display-contrast='strong'] * {
  text-shadow: none !important;
  box-shadow: none !important;
}
.topbar {
  position: relative;
  z-index: 20;
  gap: 12px;
}
.top-right {
  gap: 9px;
}
.preference-control {
  position: relative;
}
.icon-control {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 6px;
}
.icon-control svg,
.access-control svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}
.access-control {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: calc(11px * var(--display-scale));
  height: 36px;
  padding: 6px 10px;
}
.preference-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  padding: 7px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface);
  box-shadow: 0 12px 40px #0003;
  z-index: 60;
}
.preference-menu[hidden] {
  display: none;
}
.preference-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  font-size: calc(12px * var(--display-scale));
  background: transparent;
}
.preference-menu button[aria-checked='true'] {
  background: var(--app-soft);
  font-weight: 650;
}
.theme-duo {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--duo-a) 50%, var(--duo-b) 50%);
  flex-shrink: 0;
}
.theme-duo[data-duo='shining-red'] {
  --duo-a: #ea123c;
  --duo-b: #5737b3;
}
.theme-duo[data-duo='medical-care'] {
  --duo-a: #2467a5;
  --duo-b: #16858c;
}
.theme-duo[data-duo='zen-garden'] {
  --duo-a: #85613d;
  --duo-b: #e7d9c4;
}
.theme-duo[data-duo='cyber-punk'] {
  --duo-a: #c8ff44;
  --duo-b: #071009;
}
.theme-duo[data-duo='gotham-night'] {
  --duo-a: #ffd21f;
  --duo-b: #16171b;
}
.theme-duo[data-duo='comic-heroes'] {
  --duo-a: #e3161d;
  --duo-b: #1d47a3;
}
.theme-duo[data-duo='desert-lab'] {
  --duo-a: #2fb35c;
  --duo-b: #e8cf8a;
}
#display-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1100px, calc(100vw - 48px));
  max-width: none;
  height: calc(100dvh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 16px 24px;
  border-radius: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--app-surface);
  box-shadow: 0 25px 100px #18251f25;
}
#display-dialog::backdrop {
  background: #17212d66;
  backdrop-filter: blur(3px);
}
#display-dialog .dialog-head {
  margin-bottom: 8px;
}
#display-dialog .dialog-head h2 {
  font-size: calc(20px * var(--display-scale));
}
#display-dialog .preferences-intro {
  margin: 0 0 12px;
}
#display-dialog .dialog-actions {
  margin-top: 10px;
  padding-top: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.locale-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-size: calc(12px * var(--display-scale));
  font-weight: 600;
}
/* Same height as the reset button: the row must not grow the dialog. */
.locale-control select {
  padding-block: 9px;
}
#display-dialog .font-credit {
  margin: 8px 0 0;
}
#display-feedback:empty {
  display: none;
}
.preferences-intro,
.font-credit {
  font-size: calc(11px * var(--display-scale));
  color: var(--app-muted);
  line-height: 1.7;
}
.display-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.display-setting {
  border: 1px solid var(--app-border);
  border-radius: 9px;
  padding: 7px;
  min-width: 0;
  margin: 0;
}
.display-setting legend {
  padding: 0 5px;
  font-weight: 650;
  font-size: calc(12px * var(--display-scale));
}
.display-options {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.display-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(11px * var(--display-scale));
  padding: 5px 7px;
  border: 1px solid var(--app-border);
  border-radius: 6px;
  cursor: pointer;
}
.display-options label:has(:checked) {
  background: var(--app-soft);
  border-color: var(--app-accent);
}
.display-options input {
  accent-color: var(--app-accent);
  margin: 0;
}
#display-feedback {
  font-size: calc(11px * var(--display-scale));
  color: var(--app-accent);
}
#display-tooltip {
  position: fixed;
  z-index: 90;
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-ink);
  color: var(--app-surface);
  font-size: calc(12px * var(--display-scale));
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 20px #0003;
  pointer-events: auto;
}
#display-tooltip[hidden] {
  display: none;
}
.gantt-head .project-label {
  height: var(--calendar-height, calc(72px * var(--display-scale)));
}
.axis-row {
  height: calc(18px * var(--display-scale));
}
.bar .bar-label {
  width: 100%;
  max-height: 100%;
  padding: 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}
.height-preview > span {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: center;
}
.height-handle:after {
  background: var(--app-ink);
  color: var(--app-surface);
  font-family: var(--reading-font);
  font-size: calc(11px * var(--display-scale));
}
.font-credit a {
  color: var(--app-accent);
}
@media (max-width: 720px) {
  .topbar {
    height: auto;
    min-height: 64px;
    padding: 10px 14px;
    flex-wrap: wrap;
  }
  .top-right {
    margin-left: auto;
  }
  .top-right .personal {
    display: none;
  }
  .access-control span {
    display: none;
  }
  .access-control {
    padding: 6px;
    width: 36px;
  }
  .preference-menu {
    position: fixed;
    top: 170px;
    right: 12px;
    max-width: calc(100vw - 24px);
  }
  .display-grid {
    grid-template-columns: 1fr;
  }
  #display-dialog {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 18px;
  }
  .display-setting {
    padding: 12px;
  }
}
@media print {
  .preference-control,
  .access-control,
  #display-tooltip {
    display: none !important;
  }
}

dialog {
  background: var(--app-surface);
  color: var(--app-ink);
}
html[data-display-spacing='airy'] .bar .bar-label {
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Match ArbitrIA's theme picker while keeping EasyMap's semantic palette. */
#theme-button {
  border: 0;
  box-shadow: none;
  background: transparent;
  min-height: 36px;
}
#theme-button,
#theme-menu button {
  caret-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
#theme-menu {
  top: calc(100% + 9px);
  width: 230px;
  max-width: calc(100vw - 24px);
  border-radius: 12px;
  box-shadow: 0 12px 30px #21163826;
}
#theme-menu button {
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  font-weight: 400;
}
#theme-menu button[aria-checked='true'] {
  background: transparent;
  font-weight: 400;
}
#theme-menu button:hover,
#theme-menu button:focus-visible {
  background: var(--app-bg);
  outline: 2px solid var(--app-accent);
  outline-offset: -2px;
}
#theme-menu button[aria-checked='true']:after {
  content: '✓';
  margin-left: auto;
  color: var(--app-accent);
  font-weight: 700;
}

/* Task progress stays within the calendar block; dates still set its width. */
.bar.task-mode-fill,
.bar.task-mode-rail,
.bar.task-mode-ring,
.task-presentation-preview {
  isolation: isolate;
}
.bar .bar-content,
.task-presentation-preview .bar-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 1px calc(26px + var(--task-icon-growth, 0px));
  overflow: hidden;
  pointer-events: none;
}
.bar.has-status .bar-content .bar-label,
.task-presentation-preview .bar-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  flex-shrink: 1;
  max-height: 3.6em;
  min-height: 0;
  padding: 0;
  font-size: calc(11px * var(--display-scale, 1) * var(--task-text-scale, 1));
  line-height: 1.2;
  white-space: pre-wrap;
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.bar .bar-metrics,
.task-presentation-preview .bar-metrics {
  display: block;
  flex-shrink: 0;
  padding: 0;
  font-size: calc(9px * var(--display-scale, 1) * var(--task-text-scale, 1));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar .task-progress-fill,
.task-presentation-preview .task-progress-fill {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: var(--task-progress);
  padding: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
}
.bar .task-progress-rail,
.task-presentation-preview .task-progress-rail {
  position: absolute;
  z-index: 0;
  inset: auto 10px 3px;
  height: 3px;
  padding: 0;
  border-radius: 3px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  overflow: hidden;
  pointer-events: none;
}
.bar .task-progress-rail > span,
.task-presentation-preview .task-progress-rail > span {
  display: block;
  width: var(--task-progress);
  height: 100%;
  padding: 0;
  background: currentColor;
  border-radius: inherit;
}
.bar.task-mode-rail .bar-content {
  padding-bottom: 5px;
}
.bar .task-progress-ring,
.task-presentation-preview .task-progress-ring {
  position: absolute;
  z-index: 1;
  right: calc(32px + var(--task-icon-growth, 0px));
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: min(40px, calc(100% - 4px));
  padding: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.task-progress-ring svg {
  position: absolute;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}
.task-ring-track {
  opacity: 0.17;
}
.task-ring-value {
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-linecap: butt;
}
.bar .task-progress-ring > span,
.task-presentation-preview .task-progress-ring > span {
  padding: 0;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
}
.bar.task-mode-ring .bar-content {
  padding-right: calc(78px + var(--task-icon-growth, 0px));
}
.bar .task-status,
.bar .task-type-icon,
.bar .handle,
.bar .height-handle {
  z-index: 2;
}
/* Small blocks keep both numeric values when the ring no longer fits. */
.bar .bar-progress-text {
  padding: 0;
}
.bar.task-mode-ring .bar-progress-text {
  display: none;
}
@container (max-width: 180px) {
  .bar.task-mode-ring .bar-content {
    padding-inline: 8px 42px;
  }
  .bar .task-progress-ring {
    right: 7px;
    top: calc(50% + 6px);
    width: 28px;
    height: 28px;
  }
  .bar .task-progress-ring > span {
    font-size: 6px;
  }
  .bar.task-mode-ring .task-type-icon,
  .bar.task-mode-ring .task-status {
    top: 5px;
    width: min(calc(10px + var(--task-icon-growth)), 20px, max(4px, calc(50cqw - 8px)));
    height: min(calc(10px + var(--task-icon-growth)), 20px, max(4px, calc(50cqw - 8px)));
    transform: none;
  }
  .bar.task-mode-ring .task-type-icon {
    left: 7px;
  }
  .bar.task-mode-ring .task-status {
    right: 7px;
  }
}
@container (max-width: 90px) {
  .bar.task-mode-ring .bar-content {
    padding-inline: 18px;
  }
  .bar .task-progress-ring {
    display: none;
  }
  .bar.task-mode-ring .bar-progress-text {
    display: inline;
  }
}
@container (max-width: 56px) {
  .bar .bar-content {
    visibility: hidden;
  }
}
.task-presentation-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
}
.task-presentation-options legend {
  padding-inline: 6px;
  font-weight: 650;
}
.task-presentation-option {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border: 2px solid var(--app-border);
  border-radius: 10px;
  cursor: pointer;
  background: var(--app-surface);
}
.task-presentation-option:has(input:checked) {
  border-color: var(--app-accent);
  background: var(--app-soft);
}
.task-presentation-option input {
  margin-top: 3px;
  accent-color: var(--app-accent);
}
.task-presentation-option:focus-within {
  outline: 2px solid var(--app-accent);
  outline-offset: 3px;
}
.task-presentation-choice {
  display: grid;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.task-presentation-choice > span:not(.task-presentation-preview),
.task-presentation-note {
  font-size: 12px;
  color: var(--app-muted);
  line-height: 1.5;
}
.task-presentation-preview {
  position: relative;
  display: flex;
  height: 64px;
  border-radius: 6px;
  background: var(--app-accent);
  color: var(--app-on-accent);
}
.task-presentation-preview .bar-content {
  padding-inline: 6px;
}
.task-presentation-preview.task-mode-ring .bar-content {
  padding-right: 48px;
}
.task-presentation-preview .task-progress-ring {
  right: 5px;
}
.task-presentation-preview:not(.task-mode-fill) .task-progress-fill,
.task-presentation-preview:not(.task-mode-rail) .task-progress-rail,
.task-presentation-preview:not(.task-mode-ring) .task-progress-ring {
  display: none;
}
@media (max-width: 800px) {
  .task-presentation-options {
    grid-template-columns: 1fr;
  }
}

.roadmap-text-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 4px 0;
  border-right: 1px solid var(--app-border);
  text-align: center;
}
.roadmap-text-size label {
  font-size: 11px;
  color: var(--app-muted);
}
.roadmap-text-size output {
  font-size: 14px;
  font-weight: 700;
  color: var(--app-ink);
}
.roadmap-text-size input[type='range'] {
  flex: 1;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 32px;
  min-height: 120px;
  padding: 0;
  accent-color: var(--app-accent);
  cursor: pointer;
}
.task-text-large {
  font-size: 22px;
  line-height: 1;
}
.task-text-small {
  font-size: 11px;
  line-height: 1;
}

@media (min-width: 721px) and (max-height: 760px) {
  #display-dialog {
    padding-block: 12px;
  }
  #display-dialog .preferences-intro {
    margin-bottom: 8px;
  }
  #display-dialog .display-grid {
    margin-block: 8px;
    gap: 8px;
  }
  #display-dialog .dialog-actions {
    margin-top: 8px;
    padding-top: 8px;
  }
}