/* TaskMap Styles */
:root{
  --bg: #0b0b0e;
  --panel: #111218;
  --text: #e7e7ea;
  --muted: #a3a3ac;
  --primary: #7aa2ff;
  --danger: #ff6b6b;
  --ring: #3a3a45;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --tooltip-bg: #2a2a30;
  /* Priority colors */
  --prio-high: #ff6161;
  --prio-med:  #ffc14d;
  --prio-low:  #6fe280;
  /* Typography */
  --font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-xs: 12px; /* labels, meta, small */
  --fs-sm: 13px; /* inputs, buttons */
  --fs-md: 14px; /* base body, node titles */
  --fs-lg: 16px; /* app title */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.25;
  --lh: 1.4;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg: #f0f2f5;
  --panel: #ffffff;
  --text: #1d2129;
  --muted: #606770;
  --primary: #1877f2;
  --danger: #e23a3a;
  --ring: #dce1e8;
  --shadow: 0 8px 24px rgba(29, 33, 41, 0.12);
  --tooltip-bg: var(--bg);
  --prio-high: #e25555;
  --prio-med:  #f0b338;
  --prio-low:  #2fbf71;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: var(--fs-md)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  /* Prevent stray page scrollbars on desktop; canvas handles its own overflow */
  overflow: hidden;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.modal-open{overflow:hidden}
.app-header,.app-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--ring);
  position:sticky; top:0; z-index:5;
}
.app-footer{border-top:1px solid var(--ring); border-bottom:none; bottom:0; top:auto}
.app-footer span{font-size:var(--fs-sm); color: var(--muted)}
.app-header .left,.app-header .center,.app-header .right{display:flex; align-items:center; gap:8px}
.search-with-focus{
  display:flex;
  align-items:center;
  gap:6px;
}
.details-color-wrap{
  flex:0 0 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.row.icon-color-row{
  justify-content:flex-start;
  gap:16px;
}
.row.icon-color-row .details-color-wrap{
  margin-left:auto;
  margin-right:auto;
}
.details-color-wrap input[type="color"]{
  -webkit-appearance:none;
  appearance:none;
  width:52px;
  height:30px;
  padding:0;
  border-radius:8px;
  border:1px solid var(--ring);
  background:transparent;
  overflow:hidden;
  cursor:pointer;
}
.details-color-wrap input[type="color"]::-webkit-color-swatch{
  border:none;
  border-radius:inherit;
  padding:0;
}
.details-color-wrap input[type="color"]::-moz-color-swatch{
  border:none;
  border-radius:inherit;
  padding:0;
}
.filters-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.filters-date-range{
  display:flex;
  align-items:center;
  gap:6px;
  max-height:0;
  max-width:0;
  opacity:0;
  overflow:hidden;
  transform: translateX(-12px);
  pointer-events:none;
  transition:
    max-height .22s ease,
    max-width .22s ease,
    opacity .2s ease,
    transform .2s ease,
    margin-left .22s ease;
}
.filters-date-range.is-visible{
  max-height:52px;
  max-width:360px;
  opacity:1;
  transform: translateX(0);
  pointer-events:auto;
}
.filters-date-label,
.filters-date-separator{
  font-size:var(--fs-xs);
  color:var(--muted);
  white-space:nowrap;
}
.filters-date-range .input{
  min-width:0;
}

@media (min-width: 769px){
  .filters-date-range{
    flex:0 0 auto;
    margin-left:-8px;
  }
  .filters-date-range.is-visible{
    margin-left:0;
  }
}
h1{font-size:var(--fs-lg); font-weight:var(--fw-semibold); margin:0}
.account-area{position:relative}
.account-trigger{min-width:96px}
.account-trigger.authenticated{border-color:var(--primary); color:var(--primary)}
.account-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background:var(--panel);
  border:1px solid var(--ring);
  border-radius:12px;
  padding:12px;
  width:220px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:20;
}
.account-menu.hidden{display:none}
.account-menu-header{display:flex; flex-direction:column; gap:2px}
.account-menu-header span{font-size:var(--fs-sm)}
.account-menu-header span:first-child{font-weight:var(--fw-semibold)}
.account-menu-meta{font-size:var(--fs-xs); color:var(--muted)}
.account-menu-divider{height:1px; background:var(--ring)}
.account-menu-item{
  background:none;
  border:none;
  color:var(--text);
  text-align:left;
  padding:4px 0;
  font-size:var(--fs-sm);
  cursor:pointer;
  border-radius:6px;
}
.account-menu-item:hover{color:var(--primary)}
.account-menu-item:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
.account-menu-item.danger{color:var(--danger)}
.account-menu-item.danger:hover{color:#ff9b9b}
.modal-subtitle{font-size:var(--fs-sm); color:var(--muted); margin:0 0 12px 0}
.account-modal{position:relative; padding-top:32px}
.account-modal .modal-close{
  position:absolute;
  top:12px;
  right:12px;
  padding:4px 10px;
  font-size:var(--fs-xs);
}
.account-toggle{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin-bottom:12px;
}
.account-toggle-btn{
  border:1px solid var(--ring);
  border-radius:10px;
  background:transparent;
  color:var(--text);
  padding:8px 10px;
  font-size:var(--fs-sm);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.account-toggle-btn:focus-visible{outline:2px solid var(--primary); outline-offset:2px}
.account-toggle-btn.active{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}
.account-form{display:flex; flex-direction:column; gap:10px; margin-bottom:8px}
.account-form.hidden{display:none}
.account-error{min-height:18px; font-size:var(--fs-sm); color:var(--danger); margin:4px 0 0 0}
.account-hint{margin:0; font-size:var(--fs-xs); color:var(--muted)}
.account-footnote{margin:12px 0 0 0; font-size:var(--fs-xs); color:var(--muted)}
/* Password reveal (minimal inline adornment) */
.password-field{ position: relative }
.password-field input{ padding-right: 64px; width: 100% }
.password-adorn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted);
  font-size:var(--fs-xs); line-height:1; padding:4px 6px; border-radius:6px; cursor:pointer;
}
.password-adorn:hover{ color: var(--text) }
.password-adorn:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.password-adorn[aria-pressed="true"]{ color: var(--primary) }
/* Busy state hint for forms */
[aria-busy="true"] { opacity: 0.8 }
.btn{
  border:1px solid var(--ring);
  background:transparent;
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition:transform .12s ease, background .2s;
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
}
.btn.icon{ padding:6px; width:34px; height:34px; border-radius:10px; font-size:18px; line-height:1 }
.btn.icon svg{ width: 18px; height: 18px; }
.btn[aria-expanded="true"],
.btn[aria-pressed="true"]{ background: var(--primary); color: white; border-color: transparent }
.btn#addNode{ touch-action: none }
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary); color:white; border-color:transparent}
.btn.danger{background:var(--danger); color:white; border-color:transparent}
.btn.subtle{box-shadow:none}
.input{padding:8px 10px; border-radius:12px; border:1px solid var(--ring); background:transparent; color:var(--text); min-width:220px; font-size:var(--fs-sm)}
main{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 320px;
  height: calc(100vh - 96px);
  min-height: calc(100vh - 96px);
  overflow:hidden;
}
.viewport{
  position:relative; overflow:hidden; background:
    radial-gradient(ellipse at center, rgba(255,255,255,.06) 0 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(var(--panel), var(--panel));
  border-right:1px solid var(--ring);
  /* Allow custom panning/zooming via Pointer Events */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.viewport::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  background-size:24px 24px;
  background-image:
    repeating-linear-gradient(to right, rgba(122,162,255,.18) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(122,162,255,.18) 0 1px, transparent 1px 24px);
  z-index:0;
}
body.snap-enabled .viewport::before{ opacity:.45; }
.viewport.drop-target{ outline:2px dashed var(--primary); outline-offset:-6px }
.edges{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1}
.edges line.edge{ pointer-events: stroke; cursor: pointer }
.edges line.edge-hit{ pointer-events: stroke; cursor: pointer }
.nodes-layer{position:absolute; inset:0; transform-origin:0 0; z-index:2; will-change: transform; pointer-events: none}
.nodes-layer .node{ pointer-events: auto }
.marquee{position:absolute; border:1px dashed var(--primary); background: rgba(122,162,255,.15); pointer-events:none; z-index:2}
.node{
  position:absolute; min-width:200px; max-width:320px; width:max-content; background:var(--panel); border:1px solid var(--ring);
  border-radius:12px; padding:10px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  user-select:none; cursor:grab; transition:box-shadow .2s ease, transform .15s ease, opacity .25s ease;
  background-image: linear-gradient(135deg, rgb(var(--accent-rgb, 122 162 255) / .12), transparent 70%);
  overflow:hidden; /* ensure bottom progress line conforms to radius */
  /* Ensure touch move events are delivered for dragging */
  touch-action: none;
}
.node.press-indicator::after{
  content:'';
  position:absolute;
  inset:4px;
  border-radius:inherit;
  border:2px solid rgba(255,107,107,.6);
  pointer-events:none;
  opacity:.7;
  animation: longpress-ring .65s linear forwards;
}
.node.selected{
  /* Use a softer box-shadow for selection instead of a hard outline */
  box-shadow: 0 0 0 2px var(--primary), 0 10px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.node:active{cursor:grabbing}
.node .row{display:flex; align-items:center; gap:6px}
.node .title{
  font-weight:var(--fw-semibold);
  flex:1;
  min-width:0;
  line-height:var(--lh-tight);
  white-space:normal;
  word-break: break-word;
  overflow-wrap:anywhere;
  font-size:var(--fs-md);
  transition: transform .18s ease;
}
.node:not(.has-tasks) .title{
  transform:translateX(-14px);
}
.node .title > [aria-hidden="true"]{opacity:.4; transition:opacity .2s ease; margin-right:4px}
.node:hover .title > [aria-hidden="true"],
.node.selected .title > [aria-hidden="true"]{opacity:.8}
.node .meta{
  font-size:var(--fs-xs);
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:4px;
  line-height:1.35;
  white-space:normal;
}
.node .meta-tags{
  display:block;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.node .meta-due{
  display:block;
}
/* Priority badge — cleaner, minimal dot with subtle ring */
.badge{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--ring);
}
.badge.high{ background: var(--prio-high) }
.badge.med{  background: var(--prio-med) }
.badge.low{  background: var(--prio-low) }
.badge.due-soon{
  animation: badge-flash 1s ease-in-out infinite;
}
@keyframes badge-flash{
  0%{
    transform:scale(1);
    box-shadow:0 0 0 1px var(--ring);
  }
  50%{
    transform:scale(1.35);
    box-shadow:0 0 0 4px rgba(255,255,255,.28);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 1px var(--ring);
  }
}
.toggle{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid var(--ring);
  display:grid;
  place-items:center;
  font-size:var(--fs-xs);
  line-height:1;
  cursor:pointer;
  user-select:none;
  opacity:1;
  transform:scale(1);
  transition:opacity .18s ease, transform .18s ease;
}
.node:not(.has-tasks) .toggle{
  opacity:0;
  transform:scale(.8);
  pointer-events:none;
}
.toggle .glyph{display:block; transform:translateY(-1px)}
.progress{
  position:absolute; left:-10px; right:-10px; bottom:0; height:2px; background:var(--ring);
  border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; pointer-events:none;
}
.progress .progress-fill{position:absolute; inset:0 auto 0 0; height:100%; width:0; background:var(--primary); transition:width .3s ease; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit}
.hidden{display:none !important}
.mobile-only{display:none}
.desktop-only{display:inline}
.sidebar-mobile-header{display:none; align-items:center; justify-content:space-between; gap:8px}
.sidebar-mobile-header h2{margin:0; font-size:var(--fs-lg)}
.sidebar-mobile-header .btn{flex-shrink:0}
.sidebar{padding:12px; background:var(--panel); overflow-y:auto; max-height:100%}
/* Sidebar scrollbar styling */
.sidebar{
  scrollbar-width: thin;
  scrollbar-color: var(--ring) transparent;
}
.sidebar::-webkit-scrollbar{
  width:8px;
}
.sidebar::-webkit-scrollbar-track{
  background:transparent;
}
.sidebar::-webkit-scrollbar-thumb{
  background-color:rgba(255,255,255,.08);
  border-radius:999px;
}
.sidebar::-webkit-scrollbar-thumb:hover{
  background-color:rgba(255,255,255,.16);
}
.focus-sidebar{
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:260px;
  padding:12px;
  background:var(--panel);
  border-radius:12px;
  border:1px solid var(--ring);
  box-shadow:var(--shadow);
  overflow-y:auto;
  z-index:4;
  transform:translateX(-110%);
  opacity:0;
  pointer-events:none;
  transition:transform .24s ease, opacity .24s ease;
}
.focus-sidebar.is-visible{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
.focus-toggle{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:22px;
  height:52px;
  padding:0;
  border-radius:0 999px 999px 0;
  border:1px solid var(--ring);
  border-left:none;
  background:var(--panel);
  color:var(--text);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow);
}
/* Simpler sidebar panels */
.sidebar .panel{background:transparent; border:none; border-radius:0; padding:8px 0; margin:0 0 12px 0}
.sidebar .panel + .panel{border-top:1px solid var(--ring); padding-top:12px}
.panel h2{margin:0 0 8px 0; font-size:var(--fs-xs); color:var(--muted); font-weight:var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em;}
.panel-title{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px 0; padding: 0;}
.panel-title-main{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.panel-subtitle{
  margin:0;
  font-size:var(--fs-xs);
  color:var(--muted);
  font-weight:var(--fw-regular);
  text-transform:none;
  letter-spacing:0;
}
.panel-divider{
  height:1px;
  width:100%;
  background:var(--ring);
  margin:0 0 8px 0;
}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{background:var(--ring); color:var(--text); border:none; border-radius:12px; padding:4px 8px; font-size:var(--fs-sm); cursor:pointer}
.form-group{display:flex; flex-direction:column; gap:4px; margin-bottom:8px;}
.form-label{font-size:var(--fs-xs); color:var(--muted)}
/* The old label selector is no longer used for the details form, but might be used elsewhere. Keeping it for now. */
label{display:flex; flex-direction:column; gap:4px; margin-bottom:8px; font-size:var(--fs-xs); color:var(--muted)}
textarea,input,select{background:transparent; color:var(--text); border:1px solid var(--ring); border-radius:10px; padding:8px 10px; font-size:var(--fs-sm)}
textarea:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-color: var(--primary);}
textarea:focus, input:focus, select:focus{outline:2px solid var(--primary); outline-offset:2px; border-color: var(--primary);}
.sidebar .btn{box-shadow:none; padding:6px 8px}
.tags-editor{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--ring);
  background:transparent;
  align-items:center;
}
.tags-editor:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 1px rgba(122,162,255,.5);
}
.tags-editor .tags-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tags-editor input{
  border:none;
  padding:2px 0;
  min-width:80px;
  flex:1 1 auto;
  font-size:var(--fs-sm);
  line-height:1.4;
}
.tags-editor input:focus{
  outline:none;
  box-shadow:none;
}
.tags-editor .chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  font-size:var(--fs-xs);
}
.tags-editor .chip-remove{
  font-size:10px;
  opacity:.7;
}
.tags-editor .chip-remove::before{
  content:'✕';
}
.btn-full-width {
  width: 100%;
  margin-top: 8px;
}
.tasks ul, .tasks li{list-style:none; margin:0; padding:0}
.tasks li{display:flex; align-items:center; gap:8px; margin:6px 0}
/* Themed checkboxes */
input[type="checkbox"]{ accent-color: var(--primary) }
.node .tasks{ margin-top:6px; padding-top:10px; box-shadow: inset 0 1px var(--ring) }
.node .tasks ul{ display:flex; flex-direction:column; gap:0 }
.node .tasks li{ gap:6px; margin:3px 0 }
.node .tasks li span{ font-size:var(--fs-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.node .tasks input[type="checkbox"]{ width:14px; height:14px; border-radius:4px }
.node .tasks input[type="checkbox"]:focus-visible{ outline:2px solid var(--primary); outline-offset:2px }
.node .tasks input[type="checkbox"]:checked + span{ color:var(--muted); text-decoration:line-through }
.node .tasks li.more{ color:var(--muted); font-size:var(--fs-xs); padding-left:22px }
.node .tasks{ overflow:hidden; max-height: var(--subHeight, 0); opacity:1; transition: max-height .24s ease, opacity .24s ease, padding-top .24s ease, margin-top .24s ease }
/* Keep the divider present and fade it with opacity for smoother transitions */
.node.collapsed .tasks{ max-height:0; opacity:0; margin-top:0; padding-top:0 }
/* Disable transitions when we intentionally re-render nodes */
.nodes-layer.no-anim .node .tasks{ transition: none !important }
.minimap{height:180px; border:1px solid var(--ring); border-radius:12px; position:relative; overflow:hidden; background:var(--panel)}
.minimap svg{position:absolute; inset:0; display:block}
.ghost-line{position:absolute; pointer-events:none; border-top:2px dashed var(--primary); transform-origin:0 0; z-index:1}
.ghost-node{
  position:absolute;
  width:180px;
  height:60px;
  border-radius:12px;
  border:2px dashed var(--primary);
  background:rgb(var(--accent-rgb, 122 162 255) / .08);
  pointer-events:none;
  z-index:3;
  transform:translate(-50%, -50%);
}
kbd{background:var(--ring); color:var(--text); padding:1px 6px; border-radius:6px; font-size:var(--fs-xs)}
/* Dimming non-matches with a smooth transition */
.dim{opacity:.25; filter:grayscale(.2); transition: opacity .5s ease, filter .5s ease;}
.node.filtered-out{ opacity:0; pointer-events:none; }
.placement-hint{
  position:fixed;
  left:50%;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 12px);
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--ring);
  border-radius:999px;
  padding:10px 16px;
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  box-shadow:var(--shadow);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
body.placing-node .placement-hint{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, 0);
}
@keyframes longpress-ring{
  from{ transform:scale(.96); opacity:.7; }
  to{ transform:scale(1.05); opacity:0; }
}
/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; z-index:50}
.modal{background:var(--panel); border:1px solid var(--ring); border-radius:14px; padding:16px; width:min(420px, 92vw); box-shadow:var(--shadow)}
.modal-actions{display:flex; justify-content:flex-end; gap:8px}
/* Responsive */
@media (max-width: 980px){
  main{grid-template-columns:1fr}
  .sidebar{order:-1}
}

@media (max-width: 768px){
  /* Fill the full visual viewport on phones */
  html, body{ height: 100dvh }
  /* Avoid double safe-area spacing: footer already accounts for it */
  body{ overflow:hidden; padding-bottom: 0 }
  .mobile-only{display:inline-flex}
  .desktop-only{display:none}
  /* Hide header Tools on mobile; expose it as a tab instead */
  #toolsArea{ display:none }
  .mobile-only.sidebar-mobile-header{display:flex}
  /* Avoid accidental text selection disrupting long-press gestures on mobile */
  body{ -webkit-user-select: none; user-select: none }
  input, textarea, select{ -webkit-user-select: text; user-select: text }
  /* Mobile header: cleaner one-line with optional collapsible filters */
  .app-header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px}
  .app-header h1{display:block; font-size: var(--fs-md)}
  .btn{padding:6px 10px; border-radius:10px; font-size:var(--fs-sm); line-height:1.1; min-height:30px}
  .input{padding:6px 8px; font-size: var(--fs-sm)}
  .app-header .left{display:flex; align-items:center; gap:6px; flex:1}
  /* Filters row collapsed by default on mobile */
  .app-header .center{display:none; width:100%; gap:6px; align-items:stretch; order:3; margin-top:6px}
  body.filters-open .app-header{ flex-wrap: wrap }
  body.filters-open .app-header .center{
    display:grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows:auto;
    column-gap:6px;
    row-gap:6px;
  }
  .app-header .center .input,
  .app-header .center select,
  .app-header .center button{flex:1 1 100%; min-width:0}
  .app-header .center .search-with-focus{
    grid-row:1;
    grid-column:1;
  }
  .app-header .center .filters-date-range{
    flex:1 1 100%;
    flex-direction:row;
    align-items:center;
  }
  .app-header .center .filters-date-range.is-visible{
    max-height:56px;
  }
  .app-header .center .filters-date-range .input{
    flex:1 1 50%;
  }
  /* Mobile filters layout: left column = inputs, right column = controls */
  .filters-date-range{
    grid-row:2;
    grid-column:1;
  }
  #priorityFilter{
    grid-row:3;
    grid-column:1;
  }
  #dateFiltersToggle{
    grid-row:1;
    grid-column:2;
    justify-self:end;
  }
  .filters-actions{
    grid-row:2 / span 2;
    grid-column:2;
    justify-content:flex-end;
  }
  /* Keep actions minimal: only + Node remains visible to save space */
  .app-header .right{display:flex; gap:6px; align-items:center; justify-content:flex-end}
  .app-header .left .btn,
  .app-header .right .btn{ min-height:30px }
  .app-header .right #exportBtn,
  .app-header .right #importBtn,
  .app-header .right #clearAllBtn{display:none}
  .account-trigger{min-width:0; padding:6px 8px}
  /* Keep the account menu anchored to its trigger on mobile too */
  .account-menu{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    bottom:auto;
    width:min(260px, calc(100vw - 24px));
  }
  .tooltip-container{width:auto; align-items:center}
  .tooltip-container{display:flex}
  .tooltip-container .btn{flex:1 1 auto}
  .tooltip-container .tooltip{display:none}
  .input{min-width:0; width:100%}
  /* Dialogs as bottom sheets on mobile */
  .modal-backdrop{place-items:end center}
  .modal{width:100%; max-width:none; border-radius:12px 12px 0 0}
  main{grid-template-columns:1fr; grid-template-rows:auto; height:auto; min-height:0; overflow:visible; padding:0 10px 0}
  .viewport{
    /* Fit exactly between header and footer via CSS vars */
    min-height: max(320px, calc(100dvh - var(--header-h, 56px) - var(--footer-h, 56px)));
    height: max(320px, calc(100dvh - var(--header-h, 56px) - var(--footer-h, 56px)));
    border-radius:12px;
    margin:0 auto;
    width:100%;
    /* Remove desktop-only divider line on mobile */
    border-right: none;
  }
  /* Hide header + Node on mobile; use floating FAB instead */
  .app-header .tooltip-container{ display: none }
  /* Sidebar as bottom sheet on phones */
  .sidebar{display:block; position:fixed; left:0; right:0; bottom:0; top:auto; height:60vh; max-height:65vh; margin:0; border:1px solid var(--ring); border-bottom:none; border-top-left-radius:12px; border-top-right-radius:12px; padding:12px; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow:var(--shadow); z-index:30; transform:translateY(100%); opacity:0; transition: transform .38s ease, opacity .3s ease; background:var(--panel)}
  body.sidebar-open .sidebar{transform:translateY(0); opacity:1}
  .sidebar-mobile-header{display:flex; margin-bottom:8px}
  /* Make connect control always visible and finger-friendly */
  .node .node-connect{ opacity:1; width:24px; height:24px }
  .mobile-actions{display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; margin-bottom:8px}
  .mobile-actions .btn{width:100%}
  .sidebar-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:25}
  .app-footer{flex-wrap:wrap; gap:8px; text-align:center; justify-content:center; padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  .app-footer span{font-size:var(--fs-sm)}
  .app-footer span.mobile-only{font-size: var(--fs-xs)}
  /* Easier edge tapping on mobile */
  .edges line.edge-hit{ stroke-width: 18 }
  /* Ensure mobile-only tab aligns like others */
  .tabs .tab-link.mobile-only{ justify-content: center; }
}

/* Make Snap buttons look like other header buttons even if marked subtle */
/* Hide Snap buttons for now */
#snapToggle, #snapToggleMobile { display: none !important }

/* Mobile circular + button */
@media (max-width: 768px){
  /* Floating Add (+) button inside the canvas */
  #fabAddNode.fab-add{
    position: absolute;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px;
    border-radius: 999px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 28px;
    box-shadow: var(--shadow);
    z-index: 5;
  }
  /* Floating Open Panel (↑) button — only when a node is selected */
  #fabOpenPanel.fab-open{
    position: absolute;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px;
    border-radius: 999px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 28px;
    box-shadow: var(--shadow);
    z-index: 5;
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important}
}

/* Sidebar tweaks */
#tasksList li input[type="text"].input{flex:1; min-width:0}
.tasks li button.btn{padding:6px 8px}
.panel .row > #deleteNode{width:100%; flex:1; margin-top:5px}
#tasksList{list-style:none; margin:0; padding:12px; border: 1px solid var(--ring); border-radius: 12px;}
#tasksList li{display:flex; align-items:center; gap:8px; margin:6px 0; font-size: var(--fs-sm); transition: transform 0.3s ease, opacity 0.3s ease;}
#tasksList li .drag-handle{cursor:grab; color:var(--muted); margin-right:4px; touch-action: none;}
#tasksList li.dragging{opacity:.5}
/* Shift items during drag via a parent class for better performance */
#tasksList.is-dragging > li:not(.dragging) { transition: transform 0.2s ease-out; }
/* Achievements list */
#achievementsList{
  list-style:none;
  margin:0;
  padding:8px 0 0 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#achievementsUnlockedList,
#achievementsLockedList{
  list-style:none;
  margin:0;
  padding:4px 0 0 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.achievement-group{
  margin-top:6px;
}
.achievement-group-title{
  font-size:var(--fs-xs);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:4px;
}
.achievement-empty{
  font-size:var(--fs-xs);
  color:var(--muted);
  margin:4px 0 8px 0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.achievement-empty strong{
  color:var(--text);
}
.achievement-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--ring);
  font-size:var(--fs-sm);
  flex-wrap:wrap;
  background:rgba(0,0,0,.12);
}
.achievement-row-unlocked{
  border-color:var(--primary);
  background:linear-gradient(135deg, rgba(122,162,255,.18), transparent 65%);
}
.achievement-emoji{
  font-size:18px;
  line-height:1;
}
.achievement-main{
  flex:1;
  min-width:0;
}
.achievement-title{
  font-weight:var(--fw-medium);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.achievement-meta{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-size:var(--fs-xs);
  color:var(--muted);
}
.achievement-meta span{
  white-space:nowrap;
}
.achievement-status-badge{
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--ring);
}
.achievement-status-badge.unlocked{
  border-color:var(--primary);
  color:var(--primary);
}
.achievement-actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
}
.achievement-toggle,
.achievement-edit,
.achievement-delete{
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  padding:2px 4px;
  border-radius:6px;
}
.achievement-toggle:hover,
.achievement-edit:hover,
.achievement-delete:hover{
  color:var(--danger);
}
.achievement-toggle{
  font-size:10px;
}
.achievement-edit{
  font-size:var(--fs-xs);
}
.achievement-editor{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--ring);
}
.achievement-selection{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:180px;
  overflow-y:auto;
  border-radius:10px;
  border:1px solid var(--ring);
  padding:6px 8px;
}
.achievement-node{
  border-radius:8px;
  padding:4px 6px;
}
.achievement-node-header{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-sm);
}
.achievement-node-header span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.achievement-node-tasks{
  margin:4px 0 0 20px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  font-size:var(--fs-xs);
}
.achievement-node-tasks label{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--ring);
  cursor:pointer;
}
.achievement-node-tasks label input[type="checkbox"]{
  display:none;
}
.achievement-node-tasks label.selected{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}
.achievement-node-tasks.disabled{
  opacity:.45;
  pointer-events:none;
}
.achievement-criteria{
  width:100%;
  margin-top:4px;
  padding-top:4px;
  border-top:1px dashed var(--ring);
  font-size:var(--fs-xs);
  color:var(--muted);
}
.achievement-criteria-item{
  margin:2px 0;
  cursor:pointer;
  border-radius:6px;
  padding:3px 6px;
}
.achievement-criteria-item:hover{
  background:rgba(255,255,255,.04);
}
.achievement-summary{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:4px 0 10px 0;
  font-size:var(--fs-xs);
}
.achievement-summary-count{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
}
.achievement-summary-divider{
  opacity:.7;
}
.achievement-summary-bar{
  position:relative;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.achievement-summary-fill{
  position:absolute;
  inset:0;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--primary), #a5b8ff);
  transition:width .25s ease-out;
}
/* Generic row utility for flex layouts */
.row{display:flex; align-items:center; gap:8px}
.row.space-between{justify-content:space-between}

/* Connect mode visuals */
#connectToggle[aria-pressed="true"],
.btn[aria-pressed="true"]{ background: var(--primary); color: white; border-color: transparent }
.connect-mode .node{ cursor: crosshair }
.connect-mode .node:active{ cursor: crosshair }

/* Read-only canvas state */
body.locked .node{ cursor: default }
body.locked .node .node-connect{ opacity:.35; pointer-events:none }
body.locked .viewport.drop-target{ outline: none }

/* Inline connect control on nodes */
.node .node-connect{
  border:1px solid var(--ring);
  background:transparent;
  color:var(--muted);
  width:20px; height:20px; border-radius:6px; padding:0;
  display:grid; place-items:center; cursor:pointer;
  opacity:0; transition: opacity .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  font-size:12px; line-height:1;
}
.node:hover .node-connect, .node.selected .node-connect{ opacity:1 }
.node .node-connect:hover{ background:var(--primary); color:white; border-color:transparent }

/* Tabbed interface styles */
.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  column-gap:4px;
  border-bottom: 1px solid var(--ring);
  margin-bottom: 12px;
}
.tab-link {
  padding: 8px 12px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tab-link.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}
.tab-link[disabled]{
  opacity:.5;
  pointer-events:none;
  cursor:not-allowed;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

@media (min-width: 769px){
  .tabs{
    display:flex;
    flex-wrap:nowrap;
  }
  .tab-link{
    flex:1 1 0;
    white-space:nowrap;
  }
}

/* Focus tracker panel */
.tracker-empty{
  font-size:var(--fs-xs);
  color:var(--muted);
  margin:4px 0 8px 0;
}
.tracker-summary{
  font-size:var(--fs-xs);
  color:var(--muted);
  margin:4px 0 8px 0;
}
.tracker-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tracker-node{
  border:1px solid var(--ring);
  border-radius:10px;
  padding:6px 8px;
  background:rgba(0,0,0,.12);
}
.tracker-node-header{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  border:none;
  background:transparent;
  color:inherit;
  padding:0;
  text-align:left;
  cursor:pointer;
}
.tracker-node-title{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:var(--fs-sm);
}
.tracker-node-meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-xs);
  color:var(--muted);
}
.tracker-node-tasks{
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid var(--ring);
}
.tracker-node-tasks ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tracker-node-tasks li{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-xs);
}
.tracker-node-tasks li span{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tracker-node-tasks li.done span{
  text-decoration:line-through;
  color:var(--muted);
}

/* Workspace tab action layout */
.workspace-actions{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.workspace-actions .btn{ width: 100% }

/* Make workspace Tools cleaner on mobile */
@media (max-width: 768px){
  /* Two columns: [Export, Import] on first row; [Help, Lock] on second; Clear spans full width */
  .workspace-actions{ grid-template-columns: repeat(2, 1fr); }
  #toolsExportMobile{ order:1; }
  #toolsImportMobile{ order:2; }
  #toolsHelpMobile{ order:3; }
  #toolsLockMobile{ order:4; }
  #toolsClearMobile{ order:5; grid-column: 1 / -1; }
}

/* Tooltip for Add Node button */
.tooltip-container {
  position: relative;
  display: inline-flex; /* Use inline-flex to keep alignment with other buttons */
}
.tooltip {
  position: absolute;
  top: calc(100% + 8px); /* Position below the button */
  left: 50%;
  background: var(--tooltip-bg);
  border: 1px solid var(--ring);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateX(-50%) translateY(-4px); /* Start slightly up */
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; /* So it doesn't interfere with drag */
}
.tooltip-container:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

/* Emoji Picker styles */
.emoji-picker {
  background: var(--bg);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 8px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.emoji-picker button {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 4px;
  font-size: 20px;
  cursor: pointer;
  transition: background .2s;
}
.emoji-picker button:hover {
  background: var(--ring);
}

/* Toast (undo/redo feedback) */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--ring);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.toast-achievement{
  left: 16px;
  top: calc(var(--header-h, 56px) + 12px);
  bottom: auto;
  transform: translate(0, -8px);
  padding: 12px 18px;
  font-size: var(--fs-md);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  background: radial-gradient(circle at top left, rgba(122,162,255,.22), transparent 55%), var(--panel);
  border-color: rgba(122,162,255,.65);
}
.toast.toast-achievement.show{
  transform: translate(0, 0);
}

/* Achievement celebration particles */
.achievement-confetti{
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 65;
}
.achievement-confetti-piece{
  position:absolute;
  width:7px;
  height:14px;
  border-radius:3px;
  opacity:0;
  animation: achievement-confetti-fall 800ms ease-out forwards;
}
@keyframes achievement-confetti-fall{
  0%{
    transform: translate3d(0,0,0) rotateZ(0deg);
    opacity:0;
  }
  15%{
    opacity:1;
  }
  100%{
    transform: translate3d(var(--dx, 40px), var(--dy, 120px), 0) rotateZ(360deg);
    opacity:0;
  }
}