/* SNOPPP — Artboard_1_correct_bg, each size property ×1.25 (no zoom) */

:root {
  --bg: #F9F8F6;
  --surface: #F9F8F6;
  --paper: #DFDCD7;
  --ink-header: #000000;
  --ink: #000000;
  --ink-muted: #000000;
  --ink-faint: #000000;
  --ink-done: #000000;
  --accent: #FF8A34;
  --accent-pager: #E99154;
  --done-green: #355735;
  --chip-muted: #FAF6F3;
  --line: #000000;
  --divider: #000000;
  --stroke: 1px;
  --logo-w: 118px;
  --logo-h: 26px;

  --topbar-h: 46.25px;
  --dock-h: 187.5px;
  --dock-h-collapsed: var(--topbar-h);
  --card-w: 276.25px;
  --card-gap: 17.5px;
  --board-pad: 22.5px;
  --head-h: 32.5px;
  --row-h: 18.75px;
  --radius-card: 10px;
  --radius-chip: 7.5px;
  --radius-menu: 7.5px;
  --radius-btn: 5px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(255, 138, 52, .35); }

/* ---------- icons (inline SVG, 1px non-scaling stroke) ---------- */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22.5px;
  height: 22.5px;
  flex: none;
  color: inherit;
  line-height: 0;
}
.icon > svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.i-chevron         { width: 11.25px; height: 11.25px; transform: rotate(90deg); }
.i-plus            { width: 18.75px; height: 18.75px; }
.i-search          { width: 20.625px; height: 20.625px; }
.i-drag            { width: 22.5px; height: 22.5px; }
/* Checkbox frame = same 1px stroke as NOTO card border (--stroke) */
.i-checkbox-empty,
.i-checkbox-checked {
  width: 14px;
  height: 14px;
  border: var(--stroke) solid currentColor;
  border-radius: 1px;
  box-sizing: border-box;
  background: transparent;
  color: #000000;
}
.i-checkbox-checked > svg {
  width: 12px;
  height: 12px;
  display: block;
  margin: -1px 0 0 -1px;
  overflow: visible;
}
.i-check-sq        { width: 18.75px; height: 18.75px; }
.i-share           { width: 18px; height: 18px; }
.i-delete          { width: 18px; height: 18px; }
.i-settings        { width: 18px; height: 18px; }
.i-account         { width: 18px; height: 18px; }
.i-caret           { width: 14px; height: 14px; }
.i-edit            { width: 14px; height: 14px; }
.i-clock           { width: 16px; height: 16px; }

/* ---------- top bar ---------- */

.topbar {
  position: relative;
  z-index: 50;
  height: var(--topbar-h);
  display: block;
  align-items: center;
  padding: 0;
  user-select: none;
  background: var(--bg);
  border-bottom: var(--stroke) solid var(--line);
  box-shadow: none;
  overflow: visible;
}

.topbar-left {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  width: auto;
  padding-left: 22.5px;
}

.logo-full {
  display: block;
  width: var(--logo-w);
  height: var(--logo-h);
  background-color: #FF4DA6;
  -webkit-mask: url("assets/snoppp-logo.png") left center / contain no-repeat;
  mask: url("assets/snoppp-logo.png") left center / contain no-repeat;
  flex: none;
}

/* Shared chrome for header actions */
.topbar-btn,
.topbar-new,
.topbar-group,
.topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  margin: 0;
  border: none;
  border-radius: var(--radius-btn);
  background: #EFECE7;
  color: #000000;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  cursor: pointer;
  box-sizing: border-box;
  flex: none;
}
.topbar-btn:hover,
.topbar-new:hover,
.topbar-group:hover,
.topbar-icon-btn:hover {
  color: #000000;
  background: #DFDCD7;
}
.topbar-btn.is-active,
.topbar-new.is-active,
.topbar-group.is-open,
.topbar-icon-btn.is-open {
  color: var(--accent);
  background: rgba(255, 138, 52, .12);
}

.topbar-mid {
  position: absolute;
  left: calc(var(--board-pad) + var(--logo-w) + var(--board-pad));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-new {
  position: static;
  transform: none;
}

.topbar-viewport {
  position: static;
  transform: none;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px 0 14px;
  box-sizing: border-box;
}
.topbar-viewport .viewport-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.25px;
}
.topbar-viewport .i-caret {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: .7;
}

.viewport-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  margin-left: 2px;
}
.viewport-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 1.5px;
  background: #EFECE7;
  cursor: pointer;
  flex: none;
  appearance: none;
}
.viewport-dot:hover { background: #DFDCD7; }
.viewport-dot.is-active {
  /* Idle current viewport — soft orange */
  background: color-mix(in srgb, var(--accent) 42%, #EFECE7);
}
.viewport-dot.is-active:hover {
  background: color-mix(in srgb, var(--accent) 55%, #EFECE7);
}
.viewport-dot.is-active.is-strong,
.viewport-dot.is-active.is-strong:hover {
  background: var(--accent);
}
.viewport-dot.is-drop-target {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 138, 52, .35);
}
body.dragging-card .viewport-dot {
  cursor: copy;
}

.topbar-right {
  position: absolute;
  top: 0;
  right: 14px;
  height: 43.75px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-right .topbar-group {
  height: 30px;
  padding: 0 12px;
  width: auto;
}
.topbar-right #filterBtn,
.topbar-right #tasksBtn,
.topbar-right #plannerBtn { width: auto; }

.filter-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.filter-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  height: 100%;
  color: var(--accent);
}
.filter-badge-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.filter-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--accent);
}
.filter-badge .icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.filter-badge .i-checkbox-empty,
.filter-badge .i-checkbox-checked {
  border-color: var(--accent);
  color: var(--accent);
}

/* Must beat .popmenu { position:fixed } so dropdown anchors to the button */
.popmenu.filter-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 0;
  width: auto;
  padding: 12px;
  margin: 0;
  z-index: 80;
}
/* Invisible hover bridge so the cursor can travel button → menu */
.popmenu.filter-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.filter-menu-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #000000;
}
.filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 34px;
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: var(--radius-btn);
}
.filter-row:hover {
  background: #EFECE7;
}
.filter-row-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  align-self: stretch;
  flex: none;
  color: #000000;
}
.filter-row-icon .icon {
  width: 18px;
  height: 18px;
}
.filter-toggles {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.filter-toggles button {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-btn);
  padding: 7px 0;
  width: 58px;
  box-sizing: border-box;
  cursor: pointer;
  background: #C8C4BE;
  color: #000000;
  text-align: center;
}
.filter-toggles button:hover { background: #B5B1AB; }
.filter-toggles button.is-on {
  background: var(--accent);
  color: #000000;
}
.filter-toggles button.is-on:hover { background: #e67a28; }

.topbar-icon-btn {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
}
.topbar-icon-btn .icon { width: 16px; height: 16px; }

.account-status {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8FD99A;
  box-shadow: 0 0 0 1.5px #EFECE7;
  pointer-events: none;
}
.account-status[hidden] { display: none !important; }

.viewport-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  flex: none;
}
.popmenu.viewport-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 80;
}
.popmenu.viewport-menu[hidden] {
  display: none !important;
}
.popmenu.viewport-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.viewport-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}
.viewport-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 2px 4px 2px 8px;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.viewport-row:hover { background: #EFECE7; }
.viewport-row.is-active { background: rgba(255, 138, 52, .12); }
.viewport-row-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
  padding: 4px 0;
}
.viewport-row-name.is-editing {
  background: #fff;
  border-radius: 3px;
  padding: 4px 6px;
  box-shadow: inset 0 0 0 1px var(--line);
  text-transform: uppercase;
}
.viewport-row-actions {
  display: flex;
  align-items: center;
  flex: none;
}
.viewport-row-menu {
  flex: none;
  width: 22px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #000000;
  border-radius: var(--radius-btn);
}
.viewport-row-menu:hover { background: #DFDCD7; }
.viewport-row-menu .line-menu-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.viewport-row-menu.is-open { color: var(--accent); }

.viewport-new {
  width: auto;
  height: 30px;
  margin-top: 8px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radius-btn);
  background: #EFECE7;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  text-align: left;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  box-sizing: border-box;
}
.viewport-new:hover {
  background: rgba(255, 138, 52, .12);
  color: var(--accent);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(32, 28, 25, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] { display: none !important; }
.modal-card {
  background: var(--bg);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 28px rgba(32, 28, 25, .28);
  padding: 22px 24px;
  max-width: 420px;
  width: 100%;
}
.modal-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 8px;
}
.modal-body {
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 18px;
  opacity: .85;
}
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-btn {
  height: 32px;
  border: none;
  border-radius: var(--radius-btn);
  background: #5B5853;
  color: #F9F8F6;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 12px;
}
.modal-btn:hover { background: #2A2927; }
.modal-btn.is-danger { background: #C0392B; }
.modal-btn.is-danger:hover { background: #9B2C21; }
.modal-btn.is-muted { background: #8A8680; }
.modal-btn.is-muted:hover { background: #6E6B66; }
.modal-actions-row {
  flex-direction: row;
  gap: 8px;
}
.modal-actions-row .modal-btn { flex: 1; }
.modal-btn.is-ok {
  background: #8FD99A;
  color: #1A3D22;
}
.modal-btn.is-ok:hover { background: #6FCB7E; }
.modal-btn.is-cancel {
  background: #DFDCD7;
  color: #000;
}
.modal-btn.is-cancel:hover { background: #CFCBC5; }

.dock-move-card { max-width: 360px; }
.dock-move-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 4px 0 18px;
}
.dock-move-to {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: #000;
  opacity: .45;
  text-align: center;
}
.dock-move-chip {
  height: 34px;
  border: none;
  border-radius: var(--radius-btn);
  background: #EFECE7;
  color: #000;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  cursor: default;
  padding: 0 14px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.dock-move-chip.is-viewport {
  background: rgba(255, 138, 52, .14);
  color: var(--accent);
}

.modal-move {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-select {
  height: 32px;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-btn);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 0 10px;
}

/* ---------- board ---------- */

.board-wrap {
  position: absolute;
  top: var(--topbar-h);
  bottom: var(--dock-h-collapsed);
  left: 0; right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  background: var(--bg);
}
.board {
  --grid-cols: 20;
  --grid-row: 28px;
  --grid-gap: var(--board-pad);
  --cell-step-x: 40px;
  --cell-step-y: 34px;
  height: max-content;
  min-height: 100%;
  padding: var(--board-pad);
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  grid-auto-rows: var(--grid-row);
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
  align-content: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}
/* Transparent grid overlay while moving / resizing / placing */
body.dragging-card .board,
body.resizing-card .board,
body.placing-noto .board {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .06) 0, rgba(0, 0, 0, .06) var(--stroke), transparent var(--stroke)),
    linear-gradient(to bottom, rgba(0, 0, 0, .06) 0, rgba(0, 0, 0, .06) var(--stroke), transparent var(--stroke));
  background-size: var(--cell-step-x) var(--cell-step-y);
  background-position: var(--board-pad) var(--board-pad);
  background-repeat: repeat;
}
body.placing-noto { cursor: crosshair; }
body.placing-noto .noto { pointer-events: none; }

.board.is-ref {
  display: flex;
  gap: var(--card-gap);
  align-items: flex-start;
  height: 100%;
  background-image: none;
}
.board.is-ref .noto {
  height: auto;
}
.bcol {
  width: var(--card-w);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 100%;
}

.grid-drop-preview {
  position: fixed;
  z-index: 55;
  pointer-events: none;
  border: var(--stroke) dashed var(--accent);
  border-radius: var(--radius-card);
  background: rgba(255, 138, 52, .10);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.grid-drop-preview.is-place {
  background: var(--surface);
  border-style: solid;
  opacity: .92;
}
.grid-drop-preview.is-place.is-blocked {
  border-color: #C0392B;
  opacity: .55;
}
.grid-drop-preview .preview-head {
  flex: none;
  height: var(--head-h);
  background: var(--paper);
  border-bottom: var(--stroke) solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
  color: var(--ink-header);
}
.grid-drop-preview .preview-body { flex: 1; background: var(--surface); }

/* ---------- noto card (paper header + flat body, no border) ---------- */

.noto {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--surface);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}
.noto.is-grid-invalid {
  outline: var(--stroke) dashed #C0392B;
  outline-offset: 1px;
}
.noto.flash { outline: 10px solid var(--accent); outline-offset: 1px; }

.noto-resize {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 6;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  user-select: none;
  touch-action: none;
  transition: opacity .1s;
}
.noto-resize:hover,
.noto-resize.is-active { opacity: 1; }
.noto-resize.se { bottom: 0; right: 0; cursor: nwse-resize; }

.noto-head {
  background: var(--paper);
  color: var(--ink-header);
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 2.5px;
  padding: 0 7.5px;
  flex: none;
  border-bottom: var(--stroke) solid var(--line);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  position: relative;
  z-index: 6; /* keep bottom rule above the custom scrollbar */
}
.noto-head .icon.i-drag { width: 15px; height: 18.75px; color: #000000; opacity: 1; cursor: grab; touch-action: none; }

.noto-title {
  flex: 1;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-header);
  outline: none;
  white-space: nowrap;
  overflow: hidden;
}

.noto-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .10px;
  color: var(--accent);
  border: var(--stroke) solid var(--accent);
  padding: 1.25px 5px;
  border-radius: var(--radius-btn);
}

.noto-tools { display: flex; gap: 2.5px; align-items: center; }
.noto-tools button { background: none; border: none; cursor: pointer; color: #000000; padding: 0; display: flex; }

.noto-body {
  flex: 1;
  padding: 10px 5px 5px 2.5px;
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Native bar hidden — custom 4px rail on the noto edge */
  scrollbar-width: none;
}
.noto-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Custom scrollbar flush to the noto right border (never overlaps header) */
.noto-scrollbar {
  position: absolute;
  top: calc(var(--head-h) - var(--stroke)); /* flush to header bottom rule */
  right: 0;
  bottom: 0;
  width: 5px;
  z-index: 5; /* below .noto-head so the black rule covers the top edge */
  pointer-events: none;
  background: transparent;
  overflow: hidden; /* clip thumb so it can't enter the header */
}
.noto-scrollbar.is-active {
  pointer-events: auto;
}
.noto-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  background: #C8C4BE;
  border-radius: 0; /* square ends */
  pointer-events: auto;
  cursor: default;
  will-change: transform;
}
.noto-scrollbar:not(.is-active) .noto-scrollbar-thumb {
  display: none;
}

/* Fixed card states shown in the master desktop artboard. */
.ref-view .bcol:nth-child(1) .noto,
.ref-view .bcol:nth-child(2) .noto { height: 540px; }
.ref-view .bcol:nth-child(3) .noto:first-child { height: 245px; }
.ref-view .bcol:nth-child(3) .noto:last-child { height: 275px; }
.ref-view .bcol:nth-child(4) .noto { height: 275px; }

/* ---------- line row ---------- */

.line {
  display: flex;
  align-items: flex-start;
  gap: 3.75px;
  min-height: var(--row-h);
  padding: 0 2.5px 0 2.5px;
  /* Test: same vertical rhythm as LIST / bullets for every hard line break */
  margin-top: 4px;
  margin-bottom: 4px;
}
.line + .line {
  margin-top: 2px;
}
.line-handle {
  width: 15px; height: var(--row-h);
  color: #000000;
  cursor: grab;
  touch-action: none;
  flex: none;
  opacity: 1;
  align-self: flex-start;
}
.line:hover .line-handle { opacity: 1; }

/* Dot / LIST markers → left indent + spacing */
.line-bullet.dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 5.75px; /* align with first text line (17.5px) */
  margin-left: 6px;
  margin-right: 6px;
  align-self: flex-start;
  pointer-events: none;
}
.line-list-mark {
  position: relative;
  flex: none;
  width: 25px;
  min-height: var(--row-h);
  margin-left: 6px;
  margin-right: 6px;
  align-self: stretch;
  pointer-events: none;
}
.line-list-h {
  position: absolute;
  left: 0;
  top: calc((17.5px - var(--stroke)) / 2);
  width: 25px;
  height: var(--stroke);
  background: #000000;
}
.line.has-bullet .line-text,
.line.has-list .line-text {
  padding-left: 2px;
}

.line-text {
  flex: 1;
  outline: none;
  font-size: 14.5px;
  line-height: 17.5px;
  min-height: 17.5px;
  color: #000000;
  word-break: break-word;
  white-space: pre-wrap;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
.line-text:empty::before { content: "\200b"; }
.line.is-done .line-text { text-decoration: line-through; color: #000000; }
.line.is-selected .line-text { color: var(--accent); }
.line.is-line-sel {
  background: rgba(255, 138, 52, 0.18);
  border-radius: 2px;
}
.line.is-line-sel .line-text { color: var(--accent); }
.line.is-line-sel .line-handle { opacity: 1; color: var(--accent); }
body.line-drag-selecting {
  cursor: default;
}
body.line-drag-selecting .line-text {
  user-select: none !important;
  -webkit-user-select: none !important;
}
.line.is-dragging { opacity: .22; }

.line-date,
.type-tag {
  font-size: 11.25px;
  color: #000000;
  flex: none;
  line-height: var(--row-h);
  align-self: center;
}
.type-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .75px;
  text-transform: uppercase;
}
.line.is-selected .line-date,
.line.is-selected .type-tag { color: var(--accent); }

/* Right cluster: time icon + checkbox */
.line-aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3.75px;
  flex: none;
  min-height: var(--row-h);
  min-width: 14px;
  align-self: flex-start;
}

.line-widget {
  flex: none;
  width: 14px;
  height: var(--row-h);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: center;
}
.line-widget.is-empty {
  display: none;
}
.line-widget .i-checkbox-empty,
.line-widget .i-checkbox-checked { color: #000000; }

.line-time {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: var(--row-h);
  color: #000000;
  align-self: center;
  cursor: default;
  z-index: 1;
}
.line-time .icon,
.line-time .i-clock {
  width: 16px;
  height: 16px;
  color: inherit;
}
.line.is-selected .line-time { color: var(--accent); }
.line-time-tip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  z-index: 8;
  padding: 4px 7px;
  background: #2A2927;
  color: #F9F8F6;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius-btn);
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(32, 28, 25, .2);
}
.line-time:hover {
  z-index: 8;
}
.line-time:hover .line-time-tip { display: block; }

.line-aside .type-tag,
.line-aside .line-date {
  text-align: right;
}

/* Single-dot submenu trigger (mirror of 6-dot handle, one center point) */
.line-menu {
  flex: none;
  width: 15px;
  height: var(--row-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #000000;
  align-self: flex-start;
}
.line-menu-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.line.is-selected .line-menu { color: var(--accent); }
.line:has(> .line-menu:hover),
.line:has(> .line-handle:hover) {
  background: rgba(32, 28, 25, 0.07);
  border-radius: 2px;
}

.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.dot-white  { background: var(--paper); }
.dot-black  { background: #000000; }
.dot-orange { background: var(--accent); }
.dot-green  { background: var(--done-green); }

.line.is-done .line-time { opacity: 1; }
body.filter-hide-done .line.is-done { display: none; }

/* ---------- drag ---------- */

.insert-marker { position: fixed; z-index: 60; pointer-events: none; background: var(--accent); }
.insert-marker.h { height: 2.5px; }
.insert-marker.v { width: 2.5px; }

.drag-ghost {
  position: fixed; z-index: 61; pointer-events: none; opacity: .92;
  background: var(--surface);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  transform: translate(-7.5px, -50%);
}
.drag-ghost.dock-noto-ghost {
  transform: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(32, 28, 25, .22);
  opacity: .95;
}
.drag-ghost.dock-noto-ghost .noto-head { flex: none; }
.drag-ghost.dock-noto-ghost .noto-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.drag-ghost.dock-noto-ghost .line-handle,
.drag-ghost.dock-noto-ghost .line-menu,
.drag-ghost.dock-noto-ghost .noto-menu,
.drag-ghost.dock-noto-ghost .noto-resize { display: none !important; }
.drag-ghost.line-multi-ghost {
  display: flex;
  flex-direction: column;
  transform: translate(-7.5px, -12px);
  max-height: min(60vh, 320px);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(32, 28, 25, .18);
}
.drag-ghost.line-multi-ghost .line-handle,
.drag-ghost.line-multi-ghost .line-menu { display: none !important; }
.drag-ghost.line-multi-ghost .line.is-line-sel { background: transparent; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none !important; }

.line-text b, .line-text strong { font-weight: 700; }
.line-text i, .line-text em { font-style: italic; }
.line-text u { text-decoration: underline; }

.fmt-menu {
  position: fixed;
  z-index: 72;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--paper);
  border-radius: var(--radius-menu);
  box-shadow: 0 2.5px 6.25px rgba(32, 28, 25, .25);
  user-select: none;
}
.fmt-menu[hidden] { display: none !important; }
.fmt-menu .fmt-btn {
  font-family: inherit;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-btn);
  background: #2A2927;
  color: #F9F8F6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}
.fmt-menu .fmt-btn:hover { background: #000000; }
.fmt-menu .fmt-btn.is-on {
  background: var(--accent);
  color: #000000;
}
.fmt-menu .fmt-b { font-weight: 700; font-size: 13px; line-height: 1; }
.fmt-menu .fmt-i { font-style: italic; font-size: 13px; font-weight: 500; line-height: 1; }
.fmt-menu .fmt-u { font-size: 12px; font-weight: 600; text-decoration: underline; line-height: 1; }
.fmt-menu .fmt-clear {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  height: 26px;
  border: none;
  border-radius: var(--radius-btn);
  padding: 0 10px;
  cursor: pointer;
  background: #C8C4BE;
  color: #2A2927;
  flex: none;
}
.fmt-menu .fmt-clear:hover { background: #B4AFA8; }

/* ---------- line submenu ---------- */

.linemenu {
  position: fixed;
  z-index: 70;
  background: var(--paper);
  border-radius: var(--radius-menu);
  box-shadow: 0 2.5px 6.25px rgba(32, 28, 25, .25);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 148px;
  user-select: none;
  overflow: visible;
}
.linemenu-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linemenu-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: var(--stroke) solid rgba(0, 0, 0, 0.08);
}
.linemenu-actions .linemenu-btn {
  flex: 1;
  width: auto;
  text-align: center;
}
.linemenu-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: #000000;
  line-height: 1;
}
.linemenu-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.linemenu-icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5B5853;
  color: #F9F8F6;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  padding: 0;
}
.linemenu-icon-btn .icon { width: 14px; height: 14px; color: inherit; }
.linemenu-icon-btn:hover { background: #2A2927; }
.linemenu-icon-btn.is-on {
  background: var(--accent);
  color: #000000;
}
.linemenu-btn {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  background: #5B5853;
  color: #F9F8F6;
  text-align: left;
}
.linemenu-btn:hover { background: #2A2927; }
.linemenu-btn.is-on {
  background: var(--accent);
  color: #000000;
}
.linemenu-btn.is-clear {
  background: #8A8680;
  width: 100%;
}
.linemenu-btn.is-clear:hover { background: #6E6B66; }
.linemenu-btn.is-danger {
  background: #E8E5E0;
  color: #2A2927;
  width: 100%;
}
.linemenu-btn.is-danger:hover {
  background: #C0392B;
  color: #F9F8F6;
}
.linemenu-list-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius-btn);
  background: #5B5853;
  cursor: pointer;
}
.linemenu-list-btn:hover { background: #2A2927; }
.linemenu-list-btn.is-on { background: var(--accent); }
.linemenu-list-preview {
  display: block;
  width: 22px;
  height: 10px;
  position: relative;
}
.linemenu-list-h {
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: var(--stroke);
  margin-top: calc(var(--stroke) / -2);
  background: #F9F8F6;
}
.linemenu-list-btn.is-on .linemenu-list-h { background: #000000; }
.linemenu-fmt-btn {
  font-family: inherit;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-btn);
  background: #5B5853;
  color: #F9F8F6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}
.linemenu-fmt-btn:hover { background: #2A2927; }
.linemenu-fmt-btn.is-on {
  background: var(--accent);
  color: #000000;
}
.linemenu-fmt-btn .fmt-b { font-weight: 700; font-size: 13px; line-height: 1; }
.linemenu-fmt-btn .fmt-i { font-style: italic; font-size: 13px; font-weight: 500; line-height: 1; }
.linemenu-fmt-btn .fmt-u { font-size: 12px; font-weight: 600; text-decoration: underline; line-height: 1; }

.confirm-menu {
  position: fixed; z-index: 75;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  background: var(--paper);
  border-radius: var(--radius-menu);
  box-shadow: 0 2.5px 6.25px rgba(32, 28, 25, .25);
  overflow: visible;
  user-select: none;
  padding: 4px;
}
.confirm-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-btn);
}
.confirm-menu-actions button,
.confirm-menu button {
  background: #5B5853; color: #F9F8F6; border: none;
  font-family: inherit; font-size: 10px; font-weight: 600;
  letter-spacing: 1.25px; text-transform: uppercase;
  padding: 0 10px; cursor: pointer; border-radius: 0;
  min-width: 72px; height: 22px; line-height: 22px;
  text-align: left;
}
.confirm-menu-actions button:hover,
.confirm-menu button:hover { background: #2A2927; }
.confirm-menu-actions button[data-act="cancel"],
.confirm-menu button[data-act="cancel"] { background: #8A8680; }
.confirm-menu-actions button[data-act="cancel"]:hover,
.confirm-menu button[data-act="cancel"]:hover { background: #6E6B66; }
.confirm-menu-actions button.is-danger,
.confirm-menu-actions button[data-act="delete"].is-danger,
.confirm-menu button.is-danger,
.confirm-menu button[data-act="delete"].is-danger {
  background: #C0392B;
}
.confirm-menu-actions button.is-danger:hover,
.confirm-menu-actions button[data-act="delete"].is-danger:hover,
.confirm-menu button.is-danger:hover,
.confirm-menu button[data-act="delete"].is-danger:hover {
  background: #9B2C21;
}

.confirm-menu-actions button.is-inactive,
.confirm-menu-actions button:disabled,
.confirm-menu button.is-inactive,
.confirm-menu button:disabled {
  background: #A8A49E;
  color: rgba(249, 248, 246, .32);
  cursor: default;
  pointer-events: none;
}
.confirm-menu-actions button.is-inactive:hover,
.confirm-menu-actions button:disabled:hover,
.confirm-menu button.is-inactive:hover,
.confirm-menu button:disabled:hover {
  background: #A8A49E;
}

.noto-menu {
  flex: none;
  width: 15px;
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #000000;
}
.noto-menu .line-menu-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.noto-menu.is-open { color: var(--accent); }

.linemenu-time {
  position: fixed;
  z-index: 71;
  background: var(--paper);
  border-radius: var(--radius-menu);
  box-shadow: 0 2.5px 6.25px rgba(32, 28, 25, .25);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  box-sizing: border-box;
}
.linemenu-time[hidden] { display: none !important; }
.linemenu-time-sep {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: #000000;
  padding-top: 2px;
}
.linemenu-time-sep.is-muted {
  color: #8A8680;
  font-weight: 500;
}

.linemenu-date-shortcuts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.linemenu-date-shortcuts button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: auto;
  max-width: 100%;
  background: #E8E5E0;
  color: #2A2927;
  border: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  padding: 0 8px;
  cursor: pointer;
  height: 22px;
  line-height: 22px;
  text-align: left;
  border-radius: var(--radius-btn);
}
.linemenu-date-shortcuts button:hover { background: #DFDCD7; }

.linemenu-date-agenda {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-btn);
}
.linemenu-date-agenda button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #E8E5E0;
  color: #2A2927;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 0 10px;
  cursor: pointer;
  height: 24px;
  line-height: 24px;
  text-align: left;
}
.linemenu-date-agenda button:hover { background: #DFDCD7; }
.linemenu-date-agenda button.is-selected {
  background: var(--accent);
  color: #fff;
}
.linemenu-date-agenda .dow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  min-width: 28px;
}
.linemenu-date-agenda .dom {
  font-variant-numeric: tabular-nums;
}

.linemenu-date-custom {
  display: flex;
  gap: 4px;
  align-items: center;
}
.linemenu-date-custom input {
  font-family: inherit;
  font-size: 11px;
  border: var(--stroke) solid #000000;
  background: #fff;
  color: var(--ink);
  padding: 3px 5px;
  border-radius: var(--radius-btn);
  min-width: 0;
  width: 100%;
}
.linemenu-time-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.linemenu-hhmm {
  flex: 1;
  font-family: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  border: var(--stroke) solid #000000;
  background: #fff;
  color: var(--ink);
  padding: 3px 5px;
  border-radius: var(--radius-btn);
  min-width: 0;
  text-align: center;
}
.linemenu-time-to {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: #8A8680;
}
.linemenu-time-tracking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 2px;
}
.linemenu-hours-slider {
  flex: 1;
  min-width: 0;
  height: 18px;
  position: relative;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.linemenu-hours-track {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: var(--stroke);
  margin-top: calc(var(--stroke) / -2);
  background: #C8C4BE;
  border-radius: 1px;
}
.linemenu-hours-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  border-radius: 50%;
  background: #2A2927;
  border: var(--stroke) solid #2A2927;
  box-sizing: border-box;
  pointer-events: none;
}
.linemenu-hours-slider:focus-visible {
  outline: none;
}
.linemenu-hours-slider:focus-visible .linemenu-hours-thumb {
  background: var(--accent);
  border-color: var(--accent);
}
.linemenu-hours-input {
  flex: none;
  width: 36px;
  font-family: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  border: var(--stroke) solid #C8C4BE;
  background: #F7F5F2;
  color: var(--ink);
  padding: 3px 4px;
  border-radius: var(--radius-btn);
  text-align: center;
}
.linemenu-hours-input:focus {
  outline: none;
  border-color: #8A8680;
  background: #fff;
}
.linemenu-time-tracking-unit {
  flex: none;
  font-size: 11px;
  color: #8A8680;
}

.linemenu-date-footer {
  display: flex;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-btn);
}
.linemenu-date-footer button {
  flex: 1;
  background: #5B5853;
  color: #F9F8F6;
  border: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  padding: 0 8px;
  cursor: pointer;
  height: 22px;
  line-height: 22px;
}
.linemenu-date-footer button:hover { background: #2A2927; }
.linemenu-date-footer button.is-muted { background: #8A8680; }
.linemenu-date-footer button.is-muted:hover { background: #6E6B66; }

.linemenu-time-remove {
  background: #8A8680;
  color: #F9F8F6;
  border: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  padding: 0 8px;
  cursor: pointer;
  height: 22px;
  line-height: 22px;
  border-radius: var(--radius-btn);
  width: 100%;
}
.linemenu-time-remove:hover { background: #6E6B66; }
.linemenu-time-remove[hidden] { display: none !important; }

/* ---------- popups ---------- */

.popmenu {
  position: fixed; z-index: 70;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-menu);
  box-shadow: 0 2.5px 6.25px rgba(32, 28, 25, .25);
  padding: 10px; min-width: 225px;
}
.popmenu-row { display: flex; align-items: center; gap: 7.5px; font-size: 12.5px; padding: 5px 2.5px; cursor: pointer; }
.account-menu { min-width: 300px; }
.account-info { font-size: 12.5px; color: #000000; margin-bottom: 7.5px; }
.claim-step { display: flex; gap: 5px; margin-bottom: 6.25px; }
.claim-step input {
  flex: 1; font-family: inherit; font-size: 13.75px; padding: 6.25px 7.5px;
  border: var(--stroke) solid #000000; border-radius: var(--radius-btn); background: #fff; color: var(--ink);
}
.claim-step button, .account-signout {
  background: #2A2927; color: var(--paper); border: none;
  font-family: inherit; font-size: 10px; font-weight: 600;
  letter-spacing: 1.25px; text-transform: uppercase;
  padding: 6.25px 12.5px; cursor: pointer; border-radius: var(--radius-btn);
}
.claim-hint { font-size: 11.25px; color: #000000; }
.account-signout { width: 100%; margin-top: 5px; }

.settings-menu { min-width: 280px; }
.settings-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.settings-hint {
  font-size: 12.5px;
  color: #000000;
  line-height: 1.4;
  opacity: .7;
  margin: 0;
}
.settings-feedback {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.settings-feedback input,
.settings-feedback select,
.settings-feedback textarea {
  font-family: inherit;
  font-size: 13px;
  border: var(--stroke) solid #000000;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
}
.settings-feedback textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.35;
}
.settings-feedback button {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  height: 26px;
  border: none;
  border-radius: var(--radius-btn);
  background: #5B5853;
  color: #F9F8F6;
  cursor: pointer;
}
.settings-feedback button:hover { background: #2A2927; }
.settings-feedback button:disabled { opacity: 0.5; cursor: default; }

/* ---------- TIME organizer ---------- */

.time-view {
  position: absolute;
  top: var(--topbar-h);
  bottom: var(--dock-h-collapsed);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 20;
}
.time-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--board-pad) 8px;
  border-bottom: var(--stroke) solid var(--line);
  background: var(--bg);
}
.time-views {
  display: flex;
  gap: 2px;
}
.time-view-btn {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-btn);
  background: #EFECE7;
  color: #000;
  cursor: pointer;
}
.time-view-btn:hover { background: #DFDCD7; }
.time-view-btn.is-on {
  background: var(--accent);
  color: #000;
}
.time-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.time-nav-btn,
.time-nav-today {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-btn);
  background: #5B5853;
  color: #F9F8F6;
  cursor: pointer;
}
.time-nav-btn { min-width: 28px; padding: 0; font-size: 16px; line-height: 1; }
.time-nav-btn:hover,
.time-nav-today:hover { background: #2A2927; }
.time-nav-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #000;
  margin-left: 8px;
  white-space: nowrap;
}
.time-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Week — all 7 days visible, no horizontal scroll */
.time-week {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 21.25px var(--board-pad) 24px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--board-pad);
  box-sizing: border-box;
}
.time-day-col {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
}
.time-day-col-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--stroke) solid #000000;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-sizing: border-box;
}
.time-day-col.is-weekend .time-day-col-box {
  background: #EFECE7;
}
.time-day-col.is-weekend .time-day-timed,
.time-day-col.is-weekend .time-day-journal {
  background: #E8E4DE;
}
.time-day-col.is-today .time-day-head {
  background: var(--accent);
}
.time-day-head {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: #000000;
  background: #EFECE7;
  min-height: var(--head-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: var(--stroke) solid #000000;
  cursor: pointer;
}
.time-day-head-date {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12.5px;
}
.time-day-timed {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.time-week-grid-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.time-week-grid-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.time-week-grid {
  position: relative;
  /* height set inline: 24 * WEEK_HOUR_PX */
}
.time-week-grid .time-hour-label {
  width: 22px;
  padding: 1px 2px 0 3px;
  font-size: 8px;
  letter-spacing: 0;
}
.time-week-grid .time-now-line {
  left: 22px;
}
.time-week-grid .time-block {
  left: 24px;
  right: 3px;
  padding: 1px 4px;
  font-size: 10px;
  line-height: 1.2;
}
.time-week-grid .time-block.is-compact .time-block-time {
  font-size: 9px;
}
.time-block-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time-event {
  flex: none;
  font-size: 12px;
  line-height: 1.3;
  padding: 6px 8px;
  border-left: 2px solid var(--accent);
  background: rgba(255, 138, 52, 0.12);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}
.time-event-time {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #000;
  opacity: 0.7;
}
.time-event-text {
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time-event.is-now {
  background: var(--accent);
}
.time-day-journal {
  flex: none;
  min-height: 96px;
  max-height: 52%;
  overflow-y: auto;
  border-top: var(--stroke) solid #000000;
  padding: 4px 1px 6px;
  background: var(--surface);
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.time-day-journal::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.time-day-journal-panel {
  flex: none;
  min-height: 120px;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}
.time-day-journal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.time-day-journal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.time-day-journal-body .line {
  padding-left: 0;
  padding-right: 1px;
  gap: 1.5px;
}
.time-journal-starter .line-text {
  min-height: var(--row-h);
}

/* Day detail */
.time-day-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--board-pad) 12px;
  gap: 10px;
}
.time-day-grid-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  position: relative;
  scrollbar-width: none;
}
.time-day-grid-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.time-day-grid {
  position: relative;
  height: calc(24 * 48px); /* 48px per hour */
}
.time-hour-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
}
.time-hour-row.is-now {
  background: rgba(255, 138, 52, 0.14);
}
.time-hour-label {
  flex: none;
  width: 52px;
  padding: 2px 6px 0 8px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(0,0,0,.45);
}
.time-hour-slot { flex: 1; }
.time-now-line {
  position: absolute;
  left: 52px;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 3;
  pointer-events: none;
}
.time-block {
  position: absolute;
  left: 56px;
  right: 8px;
  z-index: 2;
  padding: 4px 8px;
  background: rgba(255, 138, 52, 0.18);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.3;
}
.time-block-time { font-size: 10px; font-weight: 600; opacity: .7; }

/* Month */
.time-month {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px var(--board-pad) 16px;
}
.time-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  max-width: 920px;
  margin: 0 auto;
}
.time-month-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px;
  color: rgba(0,0,0,.5);
}
.time-month-cell {
  aspect-ratio: 1.2;
  border: var(--stroke) solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.time-month-cell.is-muted { opacity: 0.35; }
.time-month-cell.is-weekend { background: #EFECE7; }
.time-month-cell.is-today { outline: 2px solid var(--accent); outline-offset: -1px; }
.time-month-cell-num { font-size: 12px; font-weight: 600; }
.time-month-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Year */
.time-year {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px var(--board-pad) 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--board-pad);
}
.time-year-month {
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 10px;
  cursor: pointer;
}
.time-year-month:hover { background: #EFECE7; }
.time-year-month-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.time-year-mini {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.time-year-mini span {
  aspect-ratio: 1;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.time-year-mini span.is-today { background: var(--accent); font-weight: 600; }
.time-year-mini span.has-entry { box-shadow: inset 0 -2px 0 var(--accent); }
.time-year-mini span.is-out { opacity: 0.25; }

@media (max-width: 900px) {
  .time-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* legacy planner hooks (dnd may still look for .pcol) */
.planner-cols { display: none; }

/* ---------- tasks overview ---------- */

.tasks-view {
  position: absolute;
  top: var(--topbar-h);
  bottom: var(--dock-h-collapsed);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 20;
}
.tasks-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 21.25px var(--board-pad) 24px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--board-pad);
  box-sizing: border-box;
}
.tasks-empty {
  color: rgba(0, 0, 0, 0.45);
  font-size: 13.75px;
  padding: 24px 0;
  flex: none;
}
.tasks-col {
  flex: none;
  /* ~3 columns: side pads + 2 gaps = 4× board-pad (same as left window edge) */
  width: calc((100% - 2 * var(--board-pad)) / 3);
  min-width: calc((100% - 2 * var(--board-pad)) / 3);
  max-width: calc((100% - 2 * var(--board-pad)) / 3);
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
}
.tasks-col-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--stroke) solid #000000;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-sizing: border-box;
}
.tasks-col-head {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: #000000;
  background: #EFECE7;
  min-height: var(--head-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-bottom: var(--stroke) solid #000000;
}
.tasks-col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 10px;
  overscroll-behavior: contain;
  background: var(--surface);
}
.tasks-col-empty {
  color: rgba(0, 0, 0, 0.35);
  font-size: 13px;
  padding: 4px 2px;
}
.tasks-noto {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tasks-noto-title.noto-title,
button.tasks-noto-title {
  flex: none;
  width: 100%;
  max-width: 100%;
  background: none;
  border: none;
  padding: 4px 2px 6px;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-header);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0;
}
button.tasks-noto-title:hover {
  color: var(--accent);
}
.tasks-noto-body {
  padding: 0;
  background: transparent;
}
.tasks-noto-body .line { max-width: 100%; }

/* ---------- dock ---------- */

.bottombar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--dock-h-collapsed);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 var(--board-pad);
  user-select: none;
  background: var(--bg);
  border-top: var(--stroke) solid var(--line);
  overflow: hidden;
  z-index: 40;
  box-sizing: border-box;
  transition: height .28s cubic-bezier(.22, .61, .36, 1);
}
.bottombar:hover,
.bottombar:focus-within,
.bottombar.is-open {
  height: var(--dock-h);
  align-items: stretch;
  padding: 15px 0 20px var(--board-pad);
  gap: 12.5px;
}

.dock-section {
  position: static;
  flex: none;
  width: auto;
  height: 30px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 12px;
  box-sizing: border-box;
  background: #EFECE7;
  border-radius: var(--radius-btn);
  overflow: hidden;
  transition: height .28s cubic-bezier(.22, .61, .36, 1),
              width .28s cubic-bezier(.22, .61, .36, 1),
              padding .28s cubic-bezier(.22, .61, .36, 1);
}
.bottombar:hover .dock-section,
.bottombar:focus-within .dock-section,
.bottombar.is-open .dock-section {
  width: 201.25px;
  height: 152.5px;
  padding: 10px 12px;
}

.dock-list::-webkit-scrollbar { width: 6px; }
.dock-list::-webkit-scrollbar-track { background: transparent; }
.dock-list::-webkit-scrollbar-thumb { background: #000000; }

.dock-title {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.38px;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  white-space: nowrap;
}
.bottombar:hover .dock-title,
.bottombar:focus-within .dock-title,
.bottombar.is-open .dock-title {
  height: auto;
  margin-bottom: 10px;
}

.dock-add { background: none; border: none; cursor: pointer; color: #000000; display: flex; padding: 0; }
.dock-add:hover { color: #000000; }

.dock-search {
  display: none;
  align-items: center;
  gap: 7.5px;
  border-bottom: var(--stroke) solid var(--line);
  padding: 0 0 5px;
  margin-bottom: 10px;
  color: #000000;
  flex: none;
}
.bottombar:hover .dock-search,
.bottombar:focus-within .dock-search,
.bottombar.is-open .dock-search {
  display: flex;
}
.dock-search input {
  flex: 1; background: none; border: none; outline: none;
  color: #000000; font-family: inherit; font-size: 13.75px; line-height: 20px;
}

.dock-list {
  display: none;
  overflow-y: auto;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding-right: 16px;
  flex: 1;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #000000 transparent;
}
.bottombar:hover .dock-list,
.bottombar:focus-within .dock-list,
.bottombar.is-open .dock-list {
  display: flex;
}

.dock-chip {
  background: var(--paper); color: #000000;
  border: none; border-radius: var(--radius-chip);
  display: flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 4px;
  font-family: inherit; font-size: 13.75px; font-weight: 400; line-height: 18px;
  text-align: left; flex: none; min-height: 22px;
  box-sizing: border-box;
}
.dock-chip .icon,
.dock-chip .dock-drag { color: #000000; opacity: 1; width: 16px; height: 16px; flex: none; }
.dock-drag { cursor: grab; display: flex; align-items: center; justify-content: center; }
.dock-chip-hit {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7.5px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.dock-chip.muted {
  background: var(--chip-muted);
  color: #000000;
  border: var(--stroke) solid #000000;
}
.dock-chip.muted .chip-sub { color: #000000; }
.dock-chip.is-trash {
  background: #F3F0EB;
  color: rgba(0, 0, 0, 0.38);
}
.dock-chip.is-trash .dock-drag { color: rgba(0, 0, 0, 0.32); opacity: 1; }
.dock-chip.is-trash .chip-label { color: inherit; }
.dock-chip .chip-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-chip .chip-sub { font-size: 11.25px; color: #000000; font-weight: 400; }

.dock-empty-btn {
  display: none;
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  flex: none;
}
.bottombar:hover .dock-empty-btn,
.bottombar:focus-within .dock-empty-btn,
.bottombar.is-open .dock-empty-btn {
  display: block;
}
.dock-empty-btn:hover:not(:disabled) { color: #000000; }
.dock-empty-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- toast ---------- */

.toast {
  position: fixed; bottom: calc(var(--dock-h-collapsed) + 10px); left: 50%;
  transform: translateX(-50%);
  background: var(--paper); color: #000000;
  font-size: 12.5px; font-weight: 500; padding: 7.5px 15px;
  border-radius: var(--radius-chip);
  box-shadow: 0 5px 17.5px rgba(0,0,0,.4); z-index: 90;
}

.done-toast {
  position: fixed;
  bottom: calc(var(--dock-h-collapsed) + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: #000000;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px 8px 14px;
  border-radius: var(--radius-chip);
  z-index: 91;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.done-toast[hidden] { display: none !important; }
.done-toast-msg { line-height: 1.2; }
.done-toast-undo {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-btn);
  padding: 7px 12px;
  cursor: pointer;
  background: #8A8680;
  color: #F9F8F6;
}
.done-toast-undo:hover { background: #6E6B66; }

/* ---------- share view ---------- */

body.share-view .bottombar,
body.share-view .topbar-right,
body.share-view .topbar-viewport,
body.share-view .topbar-new,
body.share-view .viewport-dots,
body.share-view .topbar-pager { display: none; }
body.share-view .board-wrap { bottom: 0; }
body.share-view .line-handle,
body.share-view .line-menu { visibility: hidden; }

/* ---------- mobile ---------- */

@media (max-width: 950px) {
  :root { --dock-h: 0px; --card-w: 100%; }
  html, body { overflow: auto; font-size: 15px; }
  .bottombar { display: none; }
  .board-wrap { overflow-x: hidden; overflow-y: auto; bottom: 0; }
  .board {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 15px 17.5px;
    gap: 17.5px;
    background-image: none;
  }
  .board .noto {
    height: auto;
    min-height: 220px;
    grid-column: unset !important;
    grid-row: unset !important;
  }
  .bcol { width: 100%; max-height: none; }
  .topbar { padding: 0 12.5px; justify-content: space-between; }
  .topbar-group { margin-right: 15px; font-size: 11.25px; }
  .topbar-viewport, .viewport-dots { display: none; }
  .logo-full { width: 100px; height: 22px; }
}