:root {
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--page);
  font-synthesis:none;
  /* Light surfaces; stronger ink and contours for shared-screen viewing. */
  --ink:#20332c;
  --muted:#4b5e54;
  --page:#e5ece5;
  --paper:#fff;
  --surface:#e0eadf;
  --axis:#d4e2d6;
  --selection:#cddfd1;
  --line:#94a69a;
  --control:#64776b;
  --grid:#ccd8cf;
  --grid-year:#9daf9f;
  --axis-divider:#a4b6a8;
  --teal:#235344;
  --focus:#98531c;
  --warning:#704717;
  --warning-paper:#fff0cf;
  --danger:#913b2c;
  /* Moderate shared-screen contrast; retain existing category hues. */
  --group:#2c7163;
  --pale:#cee1d2;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,select,textarea {
  font:inherit;
}

button,select {
  cursor:pointer;
}

button {
  border:1px solid var(--control);
  background:#fff;
  border-radius:7px;
  color:var(--ink);
  min-height:38px;
  padding:8px 13px;
  font-size:13px;
  font-weight:550;
  transition:background .12s;
}

button:hover {
  background:var(--surface);
}

button:disabled {
  opacity:1;
  color:var(--muted);
  background:var(--surface);
  border-color:var(--line);
  cursor:default;
}

button.primary {
  background:var(--teal);
  border-color:var(--teal);
  color:white;
}

button.primary:hover {
  background:#174d42;
}

button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px;
}

h1,h2,p {
  margin:0;
}

.sr-only,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link:focus {
  position:fixed;
  z-index:100;
  background:white;
  padding:15px;
}

.app-header {
  height:68px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 36px;
  background:#fbfcf9;
}

.identity {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  letter-spacing:.02em;
}

.logo {
  font-size:18px;
  letter-spacing:-4px;
  background:#244f45;
  border-radius:8px;
  color:#fff;
  width:31px;
  height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-right:4px;
}

.logo span {
  color:#c4df96;
}

.divider {
  height:21px;
  width:1px;
  background:var(--line);
  margin:0 6px;
}

.prototype-label {
  font-size:12px;
  color:var(--muted);
  letter-spacing:0;
}

.prototype-label span {
  color:var(--muted);
}

.session-note {
  font-size:12px;
  color:var(--muted);
}

main {
  max-width:1800px;
  margin:auto;
  padding:29px 36px 18px;
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:26px;
  gap:20px;
}

.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--muted);
  margin-bottom:9px;
}

h1 {
  font-size:29px;
  letter-spacing:-1px;
  font-weight:630;
}

.subtitle {
  font-size:13px;
  margin-top:10px;
  color:var(--muted);
}

.subtitle span {
  color:var(--muted);
}

.page-heading .primary {
  font-size:14px;
  min-height:43px;
  padding-inline:18px;
}

.page-heading .primary span {
  margin-right:8px;
  font-size:19px;
}

.board {
  border:1px solid var(--line);
  border-radius:12px;
  background:white;
  overflow:hidden;
  box-shadow:0 3px 10px #26473605;
}

.toolbar {
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:10px;
  flex-wrap:wrap;
}

.toolbar-group {
  display:flex;
  align-items:center;
  gap:5px;
}

.toolbar button {
  min-height:34px;
  padding:6px 11px;
}

.toolbar select {
  font-size:12px;
  border:0;
  background:#fff;
  padding:6px 12px;
  max-width:160px;
  color:var(--ink);
}

.tool-separator {
  height:19px;
  background:var(--line);
  width:1px;
  margin:0 8px;
}

#zoom-label {
  font-size:12px;
  width:29px;
  text-align:center;
}

.toolbar .subtle {
  border-color:transparent;
  font-size:12px;
}

.board-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  font-size:11px;
  color:var(--muted);
  background:var(--axis);
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}

#timeline-scroll {
  overflow:auto;
  position:relative;
  overscroll-behavior-x:contain;
  scrollbar-color:var(--control) var(--surface);
  min-height:180px;
  max-height:600px;
}

#timeline-canvas {
  position:relative;
  min-width:700px;
  padding-bottom:16px;
  isolation:isolate;
}

.axis {
  height:61px;
  position:sticky;
  top:0;
  background:var(--axis);
  border-bottom:1px solid var(--line);
  z-index:5;
}

.axis-label {
  position:sticky;
  left:0;
  display:flex;
  align-items:center;
  z-index:3;
  width:196px;
  height:60px;
  padding:0 18px;
  background:var(--axis);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}

.axis-month {
  font-weight:550;
  position:absolute;
  top:0;
  height:61px;
  border-left:1px solid var(--axis-divider);
  padding:10px 7px 0;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
}

.axis-year {
  font-weight:650;
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:5px;
}

.axis-day {
  font-weight:550;
  position:absolute;
  top:44px;
  color:var(--muted);
  font-size:9px;
}

.grid-line {
  position:absolute;
  top:61px;
  bottom:0;
  border-left:1px solid var(--grid);
  z-index:-1;
  pointer-events:none;
}

.grid-line.year {
  border-left-color:var(--grid-year);
}

.timeline-row[data-tone="1"] { --group:#576a9c; --pale:#dce4f3; }
.timeline-row[data-tone="2"] { --group:#8b6d36; --pale:#ebdcbd; }

.timeline-row {
  height:59px;
  position:relative;
}

.row-gutter {
  position:sticky;
  left:0;
  width:196px;
  height:100%;
  background:white;
  z-index:3;
  border-right:1px solid var(--control);
  pointer-events:none;
}

.timeline-item {
  position:absolute;
  top:28px;
  height:23px;
  min-width:12px;
  color:var(--group);
}

.item-body {
  position:absolute;
  inset:0;
  border:1px solid var(--group);
  background:var(--pale);
  border-radius:4px;
  color:var(--group);
  height:23px;
  min-height:0;
  padding:0;
  cursor:grab;
  touch-action:none;
  user-select:none;
}

.item-body:hover {
  background:var(--pale);
  filter:brightness(.97);
}

.item-label {
  background:var(--paper);
  position:absolute;
  top:-22px;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  text-align:left;
  color:var(--ink);
  font-size:11px;
  max-width:290px;
  font-weight:600;
  line-height:19px;
}

.item-label .tentative-text {
  font-size:9px;
  font-weight:500;
  color:var(--warning);
  padding:0 5px;
  background:var(--warning-paper);
  border-radius:3px;
}

.timeline-item.approximate .item-body {
  background:repeating-linear-gradient(125deg,transparent,transparent 6px,#ffffff80 6px,#ffffff80 8px),var(--pale);
}

.timeline-item.tentative .item-body {
  border-style:dashed;
}

.timeline-item.selected .item-body {
  box-shadow:0 0 0 3px color-mix(in srgb,var(--group) 20%,transparent);
  border-width:2px;
}

.timeline-item.point .item-body {
  background:var(--group);
  width:12px;
  height:12px;
  top:5px;
  border-radius:50%;
}

.timeline-item.point.milestone .item-body {
  border-radius:2px;
  transform:rotate(45deg);
}

.timeline-item.point.milestone .item-label {
  transform:rotate(-45deg);
  transform-origin:0 0;
  top:-17px;
}

.timeline-item.point .item-label {
  top:-24px;
}

.timeline-item.point.tentative .item-body {
  background:var(--pale);
  border-style:dashed;
}

.timeline-item.event-period .item-body {
  border-radius:13px;
}

.event-symbol {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  pointer-events:none;
}

.resize-handle {
  position:absolute;
  top:0;
  width:14px;
  height:23px;
  min-height:0;
  border:0;
  background:transparent;
  padding:0;
  cursor:ew-resize;
  touch-action:none;
  color:var(--group);
  font-size:12px;
  z-index:2;
  opacity:0;
}

.resize-handle.start {
  left:-3px;
}

.resize-handle.end {
  right:-3px;
}

.timeline-item:hover .resize-handle,.timeline-item.selected .resize-handle,.resize-handle:focus-visible {
  opacity:1;
}

.resize-handle:hover {
  background:#ffffffb0;
}

.timeline-item.dragging {
  z-index:5;
}

.timeline-item.dragging .item-body {
  cursor:grabbing;
  box-shadow:0 3px 12px #25493735;
}

.legend {
  padding:14px 18px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
}

.legend>span {
  display:flex;
  gap:6px;
  align-items:center;
}

.legend i {
  display:inline-block;
  flex:none;
}

.legend-bar {
  width:15px;
  height:7px;
  background:#c6dcca;
  border:1px solid #3c7664;
  border-radius:2px;
}

.legend-dot {
  width:7px;
  height:7px;
  background:#5d7870;
  border-radius:50%;
}

.legend-diamond {
  width:7px;
  height:7px;
  background:#5d7870;
  transform:rotate(45deg);
}

.legend-approx {
  width:16px;
  height:9px;
  background:repeating-linear-gradient(125deg,#ddd, #ddd 2px,white 2px,white 4px);
  border:1px solid #a0afa1;
}

.legend-tentative {
  width:16px;
  height:9px;
  border:1px dashed #8e703d;
  background:#faf5e9;
}

.legend .legend-hint {
  margin-left:auto;
  color:var(--muted);
}

.selection {
  margin-top:15px;
  background:var(--selection);
  border:1px solid var(--line);
  border-radius:9px;
  padding:15px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:91px;
}

.selection-info {
  min-width:200px;
  max-width:650px;
}

.selection-eyebrow {
  font-size:10px;
  color:var(--muted);
  margin-bottom:5px;
}

.selection h2 {
  font-size:14px;
  font-weight:650;
}

.selection-time {
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
}

.selection-description {
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
  overflow-wrap:anywhere;
}

.selection-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  max-width:650px;
}

.selection-actions button {
  font-size:11px;
  min-height:33px;
  padding:7px 9px;
  background:#fcfdfa;
}

.selection-actions .danger {
  color:var(--danger);
}

.selection-actions .edit {
  border-color:var(--control);
}

.selection-actions .move-actions {
  display:flex;
  gap:4px;
  align-items:center;
}

.unit-note {
  font-size:10px;
  white-space:nowrap;
  padding:0 4px;
  color:var(--muted);
}

.unscheduled {
  margin-top:26px;
}

.section-heading {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:12px;
}

.section-heading h2 {
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
}

.section-heading p {
  font-size:12px;
  color:var(--muted);
}

.count {
  font-size:10px;
  font-weight:500;
  padding:3px 7px;
  background:var(--surface);
  color:var(--muted);
  border-radius:5px;
}


footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  font-size:10px;
  color:var(--muted);
  margin-top:23px;
}

.text-button {
  background:none;
  border:0;
  font-size:11px;
  color:var(--muted);
}

.empty-state {
  padding:22px;
  font-size:13px;
  color:var(--muted);
}

#status {
  font-size:12px;
  min-height:18px;
  margin-top:7px;
  color:var(--muted);
}

dialog {
  border:1px solid var(--line);
  border-radius:14px;
  padding:25px;
  width:min(560px,calc(100vw - 30px));
  color:var(--ink);
  box-shadow:0 20px 90px #142e2a40;
  max-height:calc(100dvh - 32px);
  overflow:auto;
}

dialog::backdrop {
  background:#18312f66;
  backdrop-filter:blur(2px);
}

.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:19px;
}

.dialog-heading h2 {
  font-size:22px;
  letter-spacing:-.5px;
}

.dialog-heading .eyebrow {
  margin-bottom:5px;
}

.icon-button {
  border:0;
  font-size:25px;
  padding:0 10px;
  min-height:32px;
}

.form-row {
  display:flex;
  gap:15px;
}

.form-row>div {
  flex:1;
  min-width:0;
}

label:not(.check-label) {
  display:block;
  font-size:12px;
  font-weight:600;
  margin:14px 0 7px;
}

input:not([type="checkbox"]),textarea,form select {
  display:block;
  width:100%;
  border:1px solid var(--control);
  border-radius:6px;
  padding:10px 11px;
  color:var(--ink);
  background:#fff;
  font-size:13px;
}

textarea {
  resize:vertical;
  min-height:75px;
}

.check-label {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:13px;
  margin:19px 0 6px;
  cursor:pointer;
}

input[type="checkbox"] {
  width:17px;
  height:17px;
  accent-color:var(--teal);
  margin:0;
}

.field-help {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  margin-top:6px;
}

.optional {
  font-weight:400;
  color:var(--muted);
  margin-left:5px;
}

#placement-fields {
  border:1px solid var(--line);
  padding:0 14px 12px;
  border-radius:8px;
  margin-top:12px;
  background:var(--surface);
}

#placement-fields[hidden] {
  display:none;
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:22px;
}

.dialog-note {
  font-size:10px;
  text-align:right;
  color:var(--muted);
  margin-top:12px;
}

#form-error {
  font-size:12px;
  color:var(--danger);
  margin-top:12px;
  line-height:1.4;
}

#confirm-reset h2 {
  font-size:21px;
  margin-bottom:12px;
}

#confirm-reset p {
  font-size:13px;
  line-height:1.6;
}

#drag-hint {
  position:fixed;
  z-index:10;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  padding:12px 18px;
  border-radius:8px;
  background:#244e42;
  color:white;
  font-size:13px;
  box-shadow:0 5px 20px #203b3430;
  pointer-events:none;
}

@media(min-width:1500px) {
  main {
    padding-top:37px;
  }
  .timeline-row {
    height:65px;
  }
  .timeline-item {
    top:31px;
  }
  .item-label {
    font-size:12px;
  }
}

@media(max-width:950px) {
  main {
    padding:22px 18px;
  }
  .app-header {
    padding:0 18px;
  }
  .session-note {
    display:none;
  }
  .selection {
    align-items:flex-start;
    flex-direction:column;
  }
  .selection-actions {
    justify-content:flex-start;
    max-width:none;
  }
  .legend .legend-hint {
    display:none;
  }
  .toolbar .tool-separator {
    margin:0 3px;
  }
  .item-label {
    font-size:10px;
  }
  .item-label .tentative-text {
    display:none;
  }
}

@media(max-width:600px) {
  .app-header {
    height:57px;
  }
  .prototype-label {
    font-size:10px;
  }
  .identity {
    gap:8px;
  }
  .page-heading {
    align-items:flex-start;
    gap:10px;
  }
  h1 {
    font-size:23px;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:.08em;
  }
  .subtitle {
    font-size:11px;
    line-height:1.7;
  }
  .subtitle span {
    display:block;
  }
  .page-heading .primary {
    font-size:12px;
    padding:8px 10px;
    white-space:nowrap;
  }
  .toolbar {
    padding:10px;
    gap:10px;
  }
  .toolbar-group {
    gap:3px;
  }
  .toolbar-group button {
    font-size:11px;
  }
  .toolbar select {
    font-size:11px;
  }
  .section-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .legend {
    gap:10px;
    font-size:9px;
  }
  .unscheduled-card {
    max-width:none;
  }
  .form-row {
    gap:10px;
  }
  footer {
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  dialog {
    padding:20px;
  }
  .selection-actions {
    gap:8px;
  }
  #drag-hint {
    width:90%;
    text-align:center;
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

/* Overview and workshop controls: semantics are encoded by position, pattern and text. */
.view-switch { display:flex; gap:3px; }
.view-switch button[aria-pressed="true"] { background:var(--selection); border-color:var(--teal); color:var(--ink); box-shadow:inset 0 -2px var(--teal); }
.toolbar-group { flex-wrap:wrap; }
.history-bar { display:flex; gap:8px; padding:9px 18px; border-bottom:1px solid var(--line); }
.history-bar button { flex:1; min-width:0; text-align:left; white-space:normal; overflow-wrap:anywhere; font-size:11px; min-height:33px; line-height:1.4; }
.overview-note { padding:10px 18px 0; color:var(--muted); font-size:12px; }
.attention-bar { display:flex; flex-wrap:wrap; gap:8px; padding:7px 18px; border-bottom:1px solid var(--line); }
.attention-bar button { font-size:11px; }
#outside-items { color:var(--warning); background:var(--warning-paper); border-color:var(--warning); }
.timeline-item.clipped-start::before,.timeline-item.clipped-end::after { position:absolute; top:-14px; color:var(--warning); font-size:10px; pointer-events:none; }
.timeline-item.clipped-start::before { content:'◂ fortsätter'; left:0; }
.timeline-item.clipped-end::after { content:'fortsätter ▸'; right:0; }
.unscheduled-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.unscheduled-tools label { font-size:12px; margin:0; }
.unscheduled-tools input { flex:1; min-width:190px; width:auto; }
.unscheduled-tools button { font-size:11px; }
#unscheduled-items { display:block; max-height:300px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:white; }
.unscheduled-group { border-bottom:1px solid var(--line); }
.unscheduled-group:last-child { border-bottom:0; }
.unscheduled-group summary { cursor:pointer; padding:10px 14px; font-size:12px; font-weight:600; background:var(--surface); }
.unscheduled-list { list-style:none; margin:0; padding:0; }
.unscheduled-row { width:100%; border:0; border-radius:0; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:space-between; padding:9px 18px; font-size:12px; text-align:left; background:white; }
.unscheduled-row small { font-size:10px; color:var(--muted); white-space:nowrap; }
.unscheduled-row.selected { background:var(--selection); }
.wide-dialog { width:min(780px,calc(100vw - 30px)); max-width:780px; }
#groups-list { max-height:48vh; overflow:auto; }
.group-edit-row { display:grid; grid-template-columns:minmax(100px,1fr) auto auto auto auto; gap:6px; align-items:center; margin:8px 0; }
.group-edit-row input { margin:0; font-size:12px; }
.group-edit-row button { padding:7px 10px; font-size:11px; }
.inline-form { display:flex; gap:8px; align-items:center; }
.inline-form input { margin:0; }
.new-group-form { margin-top:18px; }
.form-error { color:var(--danger); font-size:12px; }
.inspect-list { max-height:60vh; overflow:auto; }
.inspect-item { display:block; width:100%; text-align:left; white-space:normal; margin:8px 0; padding:12px; }
.inspect-item strong,.inspect-item span { display:block; font-size:12px; line-height:1.5; }
.inspect-item span { color:var(--muted); font-size:11px; }
.inspect-item .outside-label { color:var(--warning); }
[hidden] { display:none !important; }
@media(max-width:700px) {
  .history-bar { flex-direction:column; }
  .group-edit-row { grid-template-columns:1fr auto auto auto; }
  .group-edit-row input { grid-column:1/-1; }
  .unscheduled-row { flex-direction:column; gap:4px; }
  .board-caption { flex-wrap:wrap; gap:5px; }
  .toolbar { gap:10px; }
  .unscheduled-tools input { flex-basis:100%; }
}

/* Explicit placeholder contrast; native defaults vary between browsers. */
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
.toolbar select { box-shadow:inset 0 0 0 1px var(--control); }

.document-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.document-tools .field-help { flex-basis:100%; margin:0; }
.document-tools a { color:var(--ink); text-underline-offset:3px; margin-left:6px; }

/* Both views share item rows and date geometry; only labels are indented. */
.timeline-row { border-bottom:1px solid var(--line); height:64px; }
.row-gutter { display:flex; align-items:center; padding:3px 5px; pointer-events:auto; }
.row-title { flex:1; min-width:0; padding:4px 2px; border:0; background:transparent; text-align:left; color:var(--ink); font-size:12px; line-height:16px; font-weight:550; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.row-title.selected { background:var(--surface); text-decoration:underline; }
.parent-row .row-title { font-weight:650; }
.parent-toggle { font-size:11px; padding:5px 7px; min-height:32px; }
.disclosure { flex:0 0 24px; padding:0; border:0; background:transparent; font-size:16px; }
.disclosure-space { flex:0 0 24px; }
.child-row .row-gutter { padding-left:21px; }
.placement-note { color:var(--warning); margin-left:6px; }
.hierarchy-context { font-size:12px; line-height:1.5; margin:6px 0 0; }
.undated-hierarchy { position:absolute; top:17px; left:208px; margin:0; font-size:12px; min-height:32px; max-width:calc(100% - 225px); text-align:left; }
.compact-view .timeline-row { height:54px; }
.compact-view .row-title { -webkit-line-clamp:2; }
.compact-view .timeline-item { top:25px; height:20px; }
.compact-view .item-body,.compact-view .resize-handle { height:20px; }
.compact-view .timeline-item.point .item-body { height:12px; }
.compact-view .undated-hierarchy { top:11px; }

/* Project metadata is a fixed summary, never a third activity level. */
.project-row { position:relative; height:54px; border-bottom:2px solid var(--control); background:var(--surface); }
.project-row .row-gutter { background:var(--surface); }
.project-title { font-weight:700; padding-left:12px; }
.project-extent { position:absolute; top:27px; height:1px; background:var(--control); pointer-events:none; }

.coverage-segment { position:absolute; top:19px; height:17px; border:1px solid var(--teal); border-radius:3px; background:var(--selection); }
.coverage-segment.approximate,.event-overview.approximate { background:repeating-linear-gradient(125deg,var(--selection),var(--selection) 6px,white 6px,white 8px); }
.coverage-segment.tentative,.event-overview.tentative { border-style:dashed; border-width:2px; }
.events-row { position:relative; height:52px; border-bottom:1px solid var(--line); }
.events-row .row-title { padding-left:12px; }
.event-overview { position:absolute; top:9px; height:32px; min-height:32px; padding:0 3px; border:1px solid var(--teal); border-radius:13px; background:var(--paper); color:var(--ink); font-size:12px; white-space:nowrap; }
.event-overview.exact-event { border-radius:4px; }
.event-overview.selected { outline:2px solid var(--teal); outline-offset:2px; }
.events-empty { position:absolute; top:17px; left:208px; font-size:11px; color:var(--muted); }
.completed-mark { color:var(--ink); font-size:13px; font-weight:700; }
.completion-info { font-size:12px; font-weight:600; }

/* Presentation is a view of the same document, never a second document. */
.heading-actions { display:flex; gap:10px; align-items:center; }
.presentation-only { display:none; }
.presenting .presentation-only { display:flex; }
.presenting .app-header, .presenting .eyebrow, .presenting #present, .presenting #add-item,
.presenting .document-tools, .presenting #file-error, .presenting #empty-timeline,
.presenting .working-tools, .presenting .history-bar, .presenting #compact-help,
.presenting #selection, .presenting .unscheduled, .presenting footer, .presenting #item-count { display:none; }
.presenting main { max-width:none; padding:18px 24px; margin:0; }
.presenting .page-heading { margin:0 0 12px; gap:20px; }
.presenting h1 { font-size:28px; }
.presenting .subtitle { margin:6px 0 0; font-size:16px; }
.presenting .board { margin:0; }
.presenting .toolbar { padding:8px 14px; }
.presenting #timeline-scroll { max-height:calc(100dvh - 280px); min-height:220px; }
.presenting .axis-label, .presenting .row-gutter { width:300px; }
.presenting .axis-month { font-size:16px; }
.presenting .row-title { font-size:16px; line-height:21px; -webkit-line-clamp:3; }
.presenting .compact-view .timeline-row { height:74px; }
.presenting .compact-view .timeline-item { top:36px; height:24px; }
.presenting .compact-view .item-body { height:24px; cursor:pointer; touch-action:auto; }
.presenting .disclosure { flex-basis:32px; min-height:44px; font-size:22px; }
.presenting .events-row { height:68px; }
.presenting .event-overview { top:8px; height:50px; font-size:15px; line-height:20px; white-space:pre-line; }
.presenting .exact-event { font-size:19px; }
.presenting .undated-hierarchy, .presenting .events-empty { left:312px; font-size:15px; }
.presenting .undated-hierarchy { top:22px; }
.presenting .completed-mark { font-size:17px; }
.presenting .legend { font-size:14px; padding:10px 16px; gap:12px; }
.presenting .legend .legend-hint { font-size:14px; }
.presentation-summary { align-items:center; gap:20px; padding:10px 0; font-size:14px; flex-wrap:wrap; }
.presenting #presentation-info p { font-size:16px; line-height:1.5; }
.presenting #presentation-info .parent-toggle { font-size:16px; margin-top:12px; }
.presenting .inspect-item { font-size:16px; }
@media (max-width:800px) {
  .presenting main { padding:10px; }
  .presenting .page-heading { flex-wrap:wrap; }
  .presenting #timeline-scroll { max-height:65vh; }
}

/* Long project names wrap without changing the stored name. */
.page-heading > div:first-child { min-width:0; flex:1; }
#page-title { overflow-wrap:anywhere; }
.heading-actions { flex-shrink:0; }
.visibility-tools { padding:6px 16px; border-bottom:1px solid var(--line); }
.visibility-tools .check-label { margin:0; font-size:14px; }
.unscheduled-group summary { overflow-wrap:anywhere; }

.row-heading { flex:1; min-width:0; }
.row-heading .row-title { width:100%; }
.untimed-count { display:block; font-size:11px; line-height:14px; padding-left:2px; color:var(--muted); }
.compact-view .undated-parent-context { height:68px; }
.compact-view .undated-parent-context .row-title { -webkit-line-clamp:3; }
.presenting .untimed-count { font-size:14px; line-height:17px; }
.presenting .compact-view .undated-parent-context { height:84px; }

/* Experimental event rows stay on the existing time axis. */
.expanded-events-heading { position:sticky; top:61px; z-index:4; background:var(--paper); }
.event-visibility { position:absolute; top:12px; display:flex; align-items:center; gap:7px; font-size:13px; margin:0; white-space:nowrap; }
.event-visibility input { width:18px; height:18px; margin:0; }
.compact-view .expanded-event { height:64px; }
.expanded-event .row-gutter { padding-left:6px; }
.expanded-event .disclosure-space { display:none; }
.expanded-event .row-title { -webkit-line-clamp:2; min-height:0; padding-block:0; white-space:normal; overflow-wrap:anywhere; }
.event-status { display:block; padding:0 2px; font-size:11px; line-height:14px; color:var(--muted); }
.compact-view .expanded-event .timeline-item { top:37px; }
.event-date { color:var(--ink); background:var(--paper); font-size:11px; }
.unscheduled-events-heading { position:sticky; left:0; width:max-content; max-width:100%; margin:0; padding:8px 12px; font-size:13px; background:var(--surface); }
.events-list-empty { position:sticky; left:0; width:max-content; margin:0; padding:10px 12px; font-size:13px; }
.presenting .compact-view .expanded-event { height:74px; }
.presenting .event-status { font-size:13px; line-height:17px; }
.presenting .event-date { font-size:14px; }
.presenting .event-visibility { font-size:15px; top:22px; }
.presenting .compact-view .expanded-event .timeline-item { top:44px; }

/* UX-1: presentation first; administration is a separate in-memory route. */
.heading-actions a { color:var(--ink); font-weight:600; padding:10px 0; }
.history-bar { display:flex; flex-direction:row; gap:4px; padding:0; border:0; }
.history-bar button { flex:none; width:40px; min-width:40px; min-height:40px; text-align:center; font-size:23px; line-height:1; }
.legend-hint { display:none; }
.presenting #empty-timeline:not([hidden]) { display:block; }
.presenting footer { display:block; padding:20px 0 4px; text-align:right; }
.presenting footer a { color:var(--muted); font-size:13px; }
#fullscreen-message:empty { display:none; }
.presenting #timeline-scroll { max-height:calc(100dvh - 230px); }
@media (max-width:700px) {
  .toolbar-group { flex-wrap:wrap; }
  .heading-actions { flex-wrap:wrap; }
  .presenting #timeline-scroll { max-height:65vh; }
}
@media (max-width:700px) {
  .page-heading { flex-wrap:wrap; }
  .page-heading > div:first-child { flex-basis:100%; }
  .page-heading .heading-actions { width:100%; justify-content:space-between; }
}

/* Fixed two-level overview. Coincident dates are intentionally not displaced. */
.holdpoint-overview { overflow:clip; position:relative; height:56px; border-bottom:1px solid var(--line); background:var(--paper); }
.holdpoint-overview .row-gutter { height:100%; }
.holdpoint-mark { position:absolute; z-index:3; width:28px; min-width:28px; height:28px; min-height:28px; padding:0; border:0; border-radius:2px; background:transparent; color:var(--teal); font-size:14px; line-height:28px; }
.holdpoint-mark:focus-visible { z-index:5; outline:2px solid var(--ink); outline-offset:-2px; background:var(--paper); }
.holdpoint-label { position:absolute; left:28px; top:0; height:28px; font-size:12px; font-weight:600; line-height:28px; text-align:left; white-space:nowrap; width:max-content; color:var(--ink); }
.holdpoint-tooltip { position:fixed; z-index:100; max-width:min(480px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; padding:8px 12px; border:1px solid var(--ink); background:var(--paper); color:var(--ink); font-size:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 2px 8px #0002; }

/* Holdpoint fill encodes completion only; keep outlines solid and high contrast. */
.timeline-item.point .item-body { background:var(--paper); border:2px solid var(--teal); }
.timeline-item.point.completed .item-body { background:var(--teal); }
.holdpoint-symbol,.event-symbol,.status-symbol { color:var(--teal); font-size:18px; font-weight:700; }

.agenda-list { list-style:none; padding:0; margin:0; }
.agenda-list li { padding:10px 0; border-bottom:1px solid var(--line); }
.agenda-list p { margin:4px 0 0; }
#agenda-dialog h3 { margin:20px 0 8px; }

/* Pilot: loading/authentication and explicit server save, independent of view. */
body.loading > :not(#access-dialog):not(#storage-bar) { visibility: hidden; }
#storage-bar { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; padding:.6rem 1rem; background:#fff; border-bottom:1px solid #ddd; }
#storage-status { flex:1; }
#access-dialog input { width:100%; }

/* Full titles belong to this optional list, not to the two-lane marker zone. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.holdpoint-list { border-top:1px solid var(--line); padding:0 16px; }
.holdpoint-list summary { width:fit-content; cursor:pointer; padding:10px 0; font-weight:600; }
.holdpoint-list summary:focus-visible, .holdpoint-list-scroll:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; }
.holdpoint-list .field-help { margin:0 0 8px; }
.holdpoint-list-scroll { margin-bottom:12px; }
.holdpoint-list table { width:100%; table-layout:fixed; border-collapse:collapse; text-align:left; font-size:14px; }
.holdpoint-list th, .holdpoint-list td { padding:8px; vertical-align:top; border-bottom:1px solid var(--line); white-space:normal; overflow-wrap:anywhere; }
.holdpoint-list th { position:sticky; top:0; background:var(--paper); z-index:1; }
.holdpoint-list th:first-child { width:24%; }
.holdpoint-list th:last-child { width:20%; }

.holdpoint-group { border:1px solid var(--teal); border-radius:4px; background:var(--paper); font-weight:700; }
.holdpoint-highlight { background:var(--axis); }
.holdpoint-highlight td:first-child { box-shadow:inset 3px 0 var(--teal); }
#holdpoint-group-note:empty { display:none; }

/* Selection uses a dashed frame/text; keyboard focus keeps its solid outline. */
.holdpoint-mark.holdpoint-chosen { box-shadow:inset 0 0 0 1px var(--paper); border:2px dashed var(--teal); background:var(--axis); line-height:24px; }
.holdpoint-row-select { display:block; width:100%; text-align:left; white-space:normal; overflow-wrap:anywhere; border:0; background:transparent; padding:2px; color:inherit; font:inherit; }
.holdpoint-row-select:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.holdpoint-choice { display:inline-block; font-weight:700; margin-right:8px; }
.holdpoint-choice:empty { display:none; }
.holdpoint-row-info { font-size:12px; padding:2px 6px; min-height:24px; }
.event-overview.holdpoint-chosen, .timeline-item.holdpoint-chosen { outline:2px dashed var(--teal); outline-offset:2px; }

.holdpoint-list th button { font:inherit; font-weight:700; text-align:left; padding:2px; border:0; background:transparent; color:inherit; white-space:normal; }
.holdpoint-list th button:focus-visible, .holdpoint-row-show:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.holdpoint-row-show { margin-left:6px; white-space:normal; }

.holdpoint-item-tooltip { max-width:min(360px,calc(100vw - 16px)); }
.holdpoint-tip-title { display:block; font-size:15px; line-height:1.35; }
.holdpoint-tip-meta { color:var(--ink); font-size:13px; margin-top:4px; }
.holdpoint-tip-status { margin-top:6px; }

/* Only the presentation's untimed list grows with the document. */
#presentation-unscheduled-panel { display:block; padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:14px; }
#presentation-unscheduled-panel[hidden], body:not(.presenting) #presentation-unscheduled-panel { display:none; }
#presentation-unscheduled-panel .inspect-item { overflow-wrap:anywhere; }

#presentation-unscheduled-panel .unscheduled-type + .unscheduled-type { margin-top:24px; }