:root {
  --paper: #F7F6F2; --surface: #FFFFFF; --ink: #1C1F1E; --inkmuted: #6B6F6C;
  --line: #E3E1DB; --pine: #1F5B4C; --pinedark: #163F35; --pinetint: #E6EEEC;
  --amber: #E8A33D; --amberdark: #C7822A; --ambertint: #FBF0DD; --danger: #B3261E;
}
:root[data-theme="dark"] {
  --paper: #16181A; --surface: #1F2225; --ink: #EEEEEB; --inkmuted: #9BA098;
  --line: #33373A; --pine: #3FA085; --pinedark: #2C7A65; --pinetint: rgba(63,160,133,0.16);
  --amber: #E8A33D; --amberdark: #F0BD6C; --ambertint: rgba(232,163,61,0.14); --danger: #F2836B;
}
body { transition: background-color .15s ease, color .15s ease; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: -apple-system, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }
input[type=text], input[type=email], input[type=password], input[type=datetime-local], textarea, select {
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pine); outline-offset: 1px; }

.app { display: flex; min-height: 100vh; }
.sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid var(--line); padding: 24px 16px; display: flex; flex-direction: column; }
.sidebar h1 { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
.navbtn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 8px; font-size: 14px; color: var(--inkmuted); cursor: pointer; margin-bottom: 2px; }
.navbtn:hover { background: var(--surface); }
.navbtn.active { background: var(--pinetint); color: var(--pine); font-weight: 500; }
.navlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--inkmuted); opacity: .7; margin: 16px 8px 6px; }
.projrow { display: flex; align-items: center; border-radius: 8px; }
.projrow:hover { background: var(--surface); }
.projrow.active { background: var(--pinetint); }
.projrow.hiddencat { opacity: .45; }
.projmain { flex: 1; display: flex; align-items: center; gap: 8px; background: none; border: none; text-align: left; padding: 8px 4px 8px 8px; font-size: 14px; color: var(--inkmuted); cursor: pointer; min-width: 0; }
.projrow.active .projmain { color: var(--pine); font-weight: 500; }
.projmain span.lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.projeye { background: none; border: none; padding: 4px 8px; margin-right: 2px; color: var(--inkmuted); cursor: pointer; border-radius: 6px; flex-shrink: 0; }
.projeye:hover { background: var(--paper); }
.hint { font-size: 11px; color: var(--inkmuted); margin: 4px 8px 8px; line-height: 1.4; }

.main { flex: 1; padding: 32px; max-width: 720px; }
.addrow { display: flex; gap: 8px; margin-bottom: 16px; }
.addrow input[type=text] { flex: 1; height: 38px; }
.plusdot { width: 38px; height: 38px; border-radius: 50%; background: var(--pine); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; cursor: pointer; font-size: 20px; }
.morebtn { height: 38px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--inkmuted); font-size: 12px; font-weight: 500; cursor: pointer; }
.morebtn:hover { border-color: var(--pine); color: var(--pine); }

.sectitle { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.sectitle .sub { font-size: 12px; color: var(--inkmuted); font-weight: 400; }
.rightnow { background: rgba(251,240,221,.6); border: 1px solid rgba(232,163,61,.35); border-radius: 14px; padding: 8px; margin-bottom: 28px; }
.tasksection { margin-bottom: 28px; }
.taskrow { position: relative; display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(107,111,108,.4); flex-shrink: 0; margin-top: 1px; cursor: pointer; background: none; padding: 0; }
.check:hover { border-color: var(--pine); background: var(--pinetint); }
.tcontent { flex: 1; min-width: 0; padding-right: 92px; }
.kcolumn .tcontent { padding-right: 100px; }
.ttitle { font-size: 14px; font-weight: 500; overflow-wrap: break-word; }
.tnote { font-size: 12px; color: var(--inkmuted); margin-top: 3px; }
.steplabel { font-size: 12px; color: var(--inkmuted); margin-top: 4px; }
.steptrail { display: flex; gap: 4px; margin-top: 6px; }
.steptrail span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.tactions {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 4px;
  background: var(--surface); border-radius: 6px; padding: 2px;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.taskrow:hover .tactions, .taskrow:focus-within .tactions { opacity: 1; pointer-events: auto; }
.iconbtn { width: 28px; height: 28px; border: none; background: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--inkmuted); cursor: pointer; font-size: 14px; }
.iconbtn:hover { background: var(--paper); }
.iconbtn.starred { color: var(--amberdark); }
.empty { font-size: 13px; color: var(--inkmuted); text-align: center; padding: 32px 0; }

.centered { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.authcard { width: 100%; max-width: 360px; }
.authcard h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.authcard p.sub { color: var(--inkmuted); font-size: 14px; margin: 0 0 20px; }
.authcard input { width: 100%; margin-bottom: 10px; }
.authcard button.primary { width: 100%; height: 40px; border: none; border-radius: 6px; background: var(--pine); color: #fff; font-weight: 500; cursor: pointer; }
.authcard button.primary:hover { background: var(--pinedark); }
.error-text { color: var(--danger); font-size: 12px; margin: -4px 0 10px; }
.switch-link { font-size: 12px; color: var(--pine); background: none; border: none; cursor: pointer; padding: 0; margin-top: 12px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(28,31,30,.35); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal-overlay.open { display: flex; }
.modal-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: 14px; padding: 22px; max-height: 85vh; overflow-y: auto; }
.modal-card h2 { font-size: 17px; font-weight: 600; margin: 0 0 16px; display: flex; justify-content: space-between; align-items: center; }
.modal-card input, .modal-card textarea, .modal-card select { width: 100%; margin-bottom: 10px; }
.fieldblock { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.fieldblock label.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.fieldblock p.hint2 { font-size: 11px; color: var(--inkmuted); margin: 2px 0 6px; }
.steprow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.steprow input { margin-bottom: 0; flex: 1; }
.addstepbtn { font-size: 12px; color: var(--pine); background: none; border: none; cursor: pointer; padding: 2px 0; }
.submitbtn { width: 100%; height: 40px; border: none; border-radius: 6px; background: var(--pine); color: #fff; font-weight: 500; cursor: pointer; margin-top: 4px; }
.submitbtn:hover { background: var(--pinedark); }
.closebtn { background: none; border: none; color: var(--inkmuted); cursor: pointer; font-size: 16px; }

.statgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.statcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.statcard.amber { background: rgba(251,240,221,.6); border-color: rgba(232,163,61,.35); }
.statnum { font-size: 24px; font-weight: 600; }
.statnum.amber { color: var(--amberdark); }
.statlbl { font-size: 11px; color: var(--inkmuted); margin-top: 3px; }

/* ---- Step expand/collapse + add-step ---- */
.steptools { display: flex; gap: 10px; margin-top: 5px; }
.steplink { font-size: 11px; color: var(--pine); background: none; border: none; cursor: pointer; padding: 0; }
.steplink:hover { text-decoration: underline; }
.stepfull { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.stepfullrow { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.stepfullrow .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; cursor: default; padding: 0; background: none; }
.stepfullrow .dot.done { background: var(--pine); border-color: var(--pine); }
.stepfullrow .dot.active { border-color: var(--pine); cursor: pointer; }
.stepfullrow .dot.active:hover { background: var(--pinetint); }
.stepfullrow.done span.label { color: var(--inkmuted); text-decoration: line-through; }
.stepfullrow.future span.label { color: var(--inkmuted); opacity: .6; }

/* ---- History view ---- */
.histgroup { margin-bottom: 20px; }
.histdate { font-size: 12px; font-weight: 600; color: var(--inkmuted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.histrow { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; }
.histrow .ttitle { text-decoration: line-through; color: var(--inkmuted); font-size: 14px; }
.histrow .histtime { margin-left: auto; font-size: 11px; color: var(--inkmuted); flex-shrink: 0; }

/* ---- Account management ---- */
.usertable { width: 100%; border-collapse: collapse; font-size: 13px; }
.usertable th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--inkmuted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.usertable td { padding: 8px; border-bottom: 1px solid var(--line); }
.badge-admin { font-size: 10px; background: var(--pinetint); color: var(--pine); padding: 2px 6px; border-radius: 10px; margin-left: 6px; }
.smallbtn { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--inkmuted); }
.smallbtn:hover { border-color: var(--pine); color: var(--pine); }
.smallbtn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* ---- Sharing dialog ---- */
.sharelist { list-style: none; padding: 0; margin: 8px 0; }
.sharelist li { display: flex; align-items: center; justify-content: between; gap: 8px; font-size: 13px; padding: 4px 0; }
.sharelist li span { flex: 1; }

/* ---- Theme toggle ---- */
.themebtn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 8px; font-size: 13px; color: var(--inkmuted); cursor: pointer; }
.themebtn:hover { background: var(--surface); }

/* ---- Columns (Kanban-style) view ---- */
.main.main-wide { max-width: none; }
.kcolumns { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kcolumn {
  flex: 0 0 auto; width: 300px; min-width: 260px; max-width: 640px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  resize: horizontal; overflow: auto;
}
.kcolhead { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 12px; padding: 0 2px; }
.kcoltasks { display: flex; flex-direction: column; gap: 10px; min-height: 20px; }
.kcoladd { width: 100%; margin-top: 12px; }

/* ---- Drag and drop (Task view) ---- */
.taskrow.draggable-row { cursor: default; }
.draghandle {
  cursor: grab; color: var(--inkmuted); font-size: 13px; line-height: 1;
  padding: 2px 2px; margin-top: 2px; user-select: none; flex-shrink: 0;
  opacity: 0; transition: opacity .12s;
}
.taskrow.draggable-row:hover .draghandle { opacity: 1; }
.draghandle:active { cursor: grabbing; }
.taskrow.dragging { opacity: 0.4; }
.kcoltasks { transition: background-color .1s; }
.kcolumn .taskrow { padding: 10px 10px 10px 8px; margin-bottom: 0; }

/* ---- Status board lane header ---- */
.stlanename { cursor: pointer; flex: 1; }
.stlanename:hover { text-decoration: underline; }

/* ---- Collapsible sidebar ---- */
.sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sidebar-top h1 { margin: 0; }
.collapse-btn { background: none; border: none; color: var(--inkmuted); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; }
.collapse-btn:hover { background: var(--surface); color: var(--ink); }
.sidebar.collapsed { display: none; }
.sidebar-expand-btn {
  position: fixed; top: 16px; left: 16px; z-index: 40;
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--inkmuted); cursor: pointer; font-size: 16px;
}
.sidebar-expand-btn:hover { color: var(--pine); border-color: var(--pine); }

/* ---- Sidebar project row drag handle ---- */
.sidebar-draghandle { opacity: 0; }
.projrow:hover .sidebar-draghandle { opacity: 1; }

/* ---- Task view column drag handle (project reordering) ---- */
.colgriphandle {
  cursor: grab; color: var(--inkmuted); font-size: 13px; line-height: 1;
  margin-right: 2px; user-select: none; opacity: 0; transition: opacity .12s;
}
.kcolumn:hover .colgriphandle { opacity: 1; }
.colgriphandle:active { cursor: grabbing; }
.kcolumn.dragging-col { opacity: 0.4; }
.projrow.dragging-col { opacity: 0.4; }

/* =====================================================================
   Mobile layer. Everything above is the desktop layout and is unchanged;
   this block only applies on narrow screens / touch.
   ===================================================================== */

/* Elements that only exist for mobile stay hidden on desktop. */
.mobile-topbar, .moretoggle, .mobile-backdrop { display: none; }

/* Touch screens have no hover, so the drag grips can't be hover-revealed. */
@media (hover: none) {
  .draghandle, .sidebar-draghandle, .colgriphandle { opacity: .55; }
}

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  button, .check, .iconbtn { touch-action: manipulation; }
  /* 16px stops mobile browsers zooming the page when an input is focused */
  input[type=text], input[type=email], input[type=password], input[type=datetime-local], textarea, select { font-size: 16px; }

  .app { flex-direction: column; }

  /* ---- top bar + slide-out menu ---- */
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 30;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  }
  .mobile-topbar h1 { font-size: 17px; font-weight: 600; margin: 0; }
  .mobile-menu-btn {
    width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--ink); font-size: 20px; cursor: pointer;
  }
  .sidebar-expand-btn, .collapse-btn { display: none !important; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 290px; max-width: 86vw; background: var(--paper);
    overflow-y: auto; border-right: 1px solid var(--line);
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .sidebar.collapsed { display: flex; } /* the desktop "collapsed" state means nothing here */
  .sidebar.mobile-open {
    transform: none; visibility: visible; box-shadow: 0 0 30px rgba(0,0,0,.25);
    transition: transform .2s ease;
  }
  .mobile-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(28,31,30,.35);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .mobile-backdrop.open { opacity: 1; pointer-events: auto; }

  .navbtn, .themebtn { padding: 12px 10px; font-size: 15px; }
  .projmain { padding: 12px 4px 12px 8px; font-size: 15px; }
  .projeye { padding: 8px 10px; }
  .hint { font-size: 12px; }

  .main, .main.main-wide { padding: 12px; max-width: none; width: 100%; min-width: 0; }
  .addrow input[type=text] { min-width: 0; }

  /* ---- task rows ---- */
  .taskrow { flex-wrap: wrap; gap: 8px 10px; padding: 12px; }
  .kcolumn .taskrow { padding: 12px; }
  .check { width: 26px; height: 26px; margin-top: 0; }
  .tcontent, .kcolumn .tcontent { padding-right: 0; flex: 1 1 0; min-width: 0; }
  .ttitle { font-size: 15px; }

  /* The hover-revealed action icons become a row that opens under the task via the ⋯ button. */
  .moretoggle {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; margin: -6px -6px 0 0; border: none; background: none;
    border-radius: 8px; color: var(--inkmuted); font-size: 20px; cursor: pointer;
  }
  .tactions {
    position: static; display: none; opacity: 1; pointer-events: auto;
    flex: 0 0 100%; justify-content: flex-end; gap: 6px;
    background: none; padding: 8px 0 0; border-top: 1px solid var(--line); border-radius: 0;
  }
  .taskrow.show-actions .tactions { display: flex; }
  .iconbtn { width: 40px; height: 40px; font-size: 18px; }

  /* ---- steps ---- */
  .steplink { font-size: 13px; padding: 6px 2px; }
  .steptools { gap: 0 14px; flex-wrap: wrap; }
  .stepfullrow { font-size: 14px; gap: 10px; padding: 2px 0; }
  .stepfullrow .dot { width: 22px; height: 22px; }
  .stepfullrow .steplink { padding: 8px; }
  .steplabel { font-size: 13px; }
  .tnote { font-size: 13px; }

  /* ---- Task view / Status board: swipe between lanes ---- */
  .kcolumns {
    gap: 12px; margin: 0 -12px; padding: 0 12px 12px; scroll-padding-left: 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .kcolumn {
    width: 86vw !important; min-width: 0 !important; max-width: none !important;
    resize: none; scroll-snap-align: start; padding: 12px;
  }
  .kcolhead { font-size: 14px; }

  /* ---- modals become bottom sheets ---- */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-card {
    max-width: none; border-radius: 16px 16px 0 0;
    max-height: 92vh; max-height: 92dvh;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .closebtn { padding: 8px; font-size: 18px; }
  .submitbtn { height: 44px; }

  /* ---- misc views ---- */
  .statgrid { gap: 8px; }
  .statnum { font-size: 20px; }
  .histrow { flex-wrap: wrap; }
  .usertable { display: block; overflow-x: auto; }
  .smallbtn { padding: 8px 12px; }
  .authcard input { font-size: 16px; }
}