:root {
  
  --bg: #000;
  --panel: #080808;
  --card: #0d0d0d;
  --border: #262626;
  --border-strong: #3d3d3d;
  
  --lift: #141414;

  --text: #fff;
  --text-dim: #8a8a8a;
  --text-mid: #cccccc;

  --accent: #4ADE16;                        
  --accent-dim: rgba(74, 222, 22, 0.15);
  --accent-bright: #6af03c;                 
  
  --accent-deep: #349B0F;
  
  --red: #ff5c4d;
  --amber: #ffa033;

  --on-accent: #000;
  --on-solid: #fff;
  









  --sheet-bg: #000;
  --sheet-cell: #1c1c1e;
  --sheet-line: #38383a;
  

  --sheet-inset: #38383a;
  --gray-ring: #8e8e93;
  --gray-pill: #48484a;
  --gray-trough: #2c2c2e;
  --red-bright: #ff7767;
  --border-loud: #707070;

  --action-icon: 26px;
  
  --frame: 20px;
  
  --fade-out: 110px;
  
  --fade-clear: calc(var(--action-icon) + 4px);
  --icon-gap: 4px;
  --card-line: 23.1px;

  --effort-easy: color-mix(in srgb, var(--accent) 65%, #000);
  --effort-medium: color-mix(in srgb, var(--amber) 65%, #000);
  --effort-hard: color-mix(in srgb, var(--red) 65%, #000);
  
  --p1: var(--red);
  --p2: var(--amber);
  --p3: var(--accent);

  --radius: 10px;
  --radius-sm: 5px;
  --radius-lg: 12px;
  
  --col-w-max: 286px;
  --col-w-min: 240px;
  
  --fit-cols: 4;
  
  --col-w: clamp(
    var(--col-w-min),
    calc((100vw / var(--zoom) - 2 * var(--project-pad-x)) / var(--fit-cols) - var(--col-gap)),
    var(--col-w-max));
  --card-w: 260px;
  
  --col-gap: 8px;
  --project-pad-x: 30px;
  
  --header-h: calc(var(--frame) * 2 + var(--action-icon) + env(safe-area-inset-top, 0px));
  --edge-bottom: env(safe-area-inset-bottom, 0px);
  
  --zoom: 1.08;

  
  --icon-off: rgba(255, 255, 255, .25);

  color-scheme: dark;
}





:root[data-theme="light"] {
  --bg: #ffffff;
  --panel: #f2f2f7;
  --card: #ffffff;
  --border: #d8d8dd;
  --border-strong: #b0b0b8;
  --lift: #ececf0;

  --text: #000000;
  




  --text-dim: #6c6c70;
  --text-mid: #3c3c43;

  --accent: #1c1c1e;
  --accent-dim: rgba(0, 0, 0, 0.07);
  --accent-bright: #3a3a3c;
  --accent-deep: #545458;

  --red: #d70015;
  --amber: #a05a00;

  --on-accent: #ffffff;
  --red-bright: #b00010;
  --border-loud: #a0a0a8;

  --effort-easy: #1f7a33;
  --effort-medium: #a05a00;
  --effort-hard: #d70015;
  --p3: #1f7a33;

  


  --sheet-bg: #ffffff;
  --sheet-cell: #f2f2f7;
  --sheet-line: #c6c6c8;
  

  --sheet-inset: #f2f2f7;
  --gray-ring: #8e8e93;
  --gray-pill: #c7c7cc;
  --gray-trough: #e5e5ea;
  --icon-off: rgba(0, 0, 0, .22);
  color-scheme: light;
}

















@media (min-width: 1500px) { :root { --zoom: 1.2; } }
@media (min-width: 1700px) { :root { --zoom: 1.35; } }
@media (min-width: 1900px) { :root { --zoom: 1.431; } }
@media (min-width: 2300px) { :root { --zoom: 1.512; } }
@media (min-width: 3400px) { :root { --zoom: 1.701; } }

body { zoom: var(--zoom); }

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

h2, h3, h4, p { margin: 0; font-size: inherit; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
hr { margin: 0; border: 0; }

button, input, textarea, select {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; }

select option {
  background-color: var(--lift);
  color: var(--text);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible { outline: none; }




.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s;
}
.button--primary { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) {
  .button--primary:hover { background: var(--accent-bright); }
}
.button--ghost { color: var(--text-dim); border-color: var(--border); }
@media (hover: hover) {
  .button--ghost:hover { background: var(--border); color: var(--text); border-color: var(--border-strong); }
}

.button--danger { background: var(--red); color: var(--on-accent); }
@media (hover: hover) {
  .button--danger:hover { background: var(--red-bright); }
}
.button[disabled] { opacity: .4; cursor: not-allowed; }
@media (hover: hover) {
  .button--primary[disabled], .button--primary[disabled]:hover {
    opacity: 1;
    background: var(--lift);
    border-color: var(--border);
    color: var(--text-dim);
  }
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-top: 8px;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 28px;
  font-weight: 600;
  cursor: pointer;
  transition: color .3s, background-color .3s;
}
@media (hover: hover) {
  .icon-button:hover { background: var(--border); color: var(--text); }
}

.text-input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  line-height: 23.1px;
}
.text-input::placeholder { color: var(--text-dim); }


textarea.text-input {
  height: auto;
  min-height: 32px;
  padding: 5px 8px;
  line-height: 20px;
  resize: vertical;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  margin: 0 8px 0 0;
  border-radius: var(--radius-sm);
  color: var(--text-mid);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.badge--priority {
  padding: 0 8px;
  border-radius: 999px;        
  color: var(--on-accent);
  font-weight: 600;
}
.badge--priority.is-p1 { background: var(--p1); }
.badge--priority.is-p2 { background: var(--p2); }
.badge--priority.is-p3 { background: var(--p3); }

.badge--project {
  padding: 0 7px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 15px;
}

.badge--tags { display: inline-flex; flex-wrap: wrap; gap: 4px; height: auto; }
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-mid);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
}



.badge--date.is-tomorrow,
.badge--date.is-none,
.badge--date.is-future { color: var(--text-dim); }
.badge--date.is-today { color: var(--accent); }
.badge--date.is-overdue { color: var(--red); }

.menu {
  position: absolute;
  z-index: 900;
  min-width: 200px;
  max-width: calc((100vw / var(--zoom)) - 24px);
  padding: 6px 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--lift);
  box-shadow: rgba(0, 0, 0, .12) 0 0 8px;
}

.menu__item {
  display: block;
  width: 100%;
  height: 32px;
  padding: 0 6px;
  font-size: 13px;
  line-height: 32px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
@media (hover: hover) {
  .menu__item:hover { background: var(--border); }
}
.menu__item--danger { color: var(--red); }
.menu__sep { height: 1px; margin: 6px 0; background: var(--border-strong); }

.menu--context {
  position: fixed;
  
  width: 292px;
  max-width: calc((100vw / var(--zoom)) - 24px);
  max-height: calc((100vh / var(--zoom)) - 16px);
  
  max-height: calc((100dvh / var(--zoom)) - 16px);
  overflow-y: auto;
}

.menu__section { padding: 6px 0 10px; }

.menu__section-label { padding: 4px 6px 9px; color: var(--text-mid); font-size: 13px; }

.menu__chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  
  background: var(--border);
  color: var(--text-mid);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s;
}
@media (hover: hover) {
  .chip:hover { background: var(--border-strong); }
}

@media (hover: hover) {
  .chip:not(.chip--flag):hover { color: var(--text); }
}

.chip.is-active {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.menu__date {
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--border);
  color: var(--text-mid);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
@media (hover: hover) {
  .menu__date:hover { background: var(--border-strong); color: var(--text); }
}
.menu__date.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
}
.menu__date::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .75; cursor: pointer; }
@media (hover: hover) {
  .menu__date:hover::-webkit-calendar-picker-indicator { opacity: 1; }
}

.chip--flag { min-width: 28px; padding: 0 4px; font-size: 13px; }
.chip--p1 { color: var(--p1); }
.chip--p2 { color: var(--p2); }
.chip--p3 { color: var(--p3); }

.chip--p4 { color: var(--text-dim); }

.chip--easy { color: var(--accent); }
.chip--medium { color: var(--amber); }
.chip--hard { color: var(--red); }
.chip--effort-none { color: var(--text-dim); }










.chip--p4.is-active,
.chip--effort-none.is-active {
  border-color: transparent;
  background: var(--border);
}

@media (hover: hover) {
  .chip--action:hover { color: var(--accent); }
}

.chip--tag { gap: 6px; padding-right: 4px; cursor: default; }
.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 10px;
  cursor: pointer;
  transition: color .3s, background-color .3s;
}
@media (hover: hover) {
  .chip__remove:hover { background: var(--border-strong); color: var(--text); }
}

.chip--add { min-width: 30px; font-size: 15px; }

.chip--suggest { cursor: pointer; font-size: 11px; min-height: 24px; }

.menu__combo { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.menu__suggest { display: flex; flex-wrap: wrap; gap: 4px; }

.menu__tag-input {
  width: 118px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--border);
  color: var(--text);
  font-size: 12px;
}

.menu__back { color: var(--text-dim); }
@media (hover: hover) {
  .menu__back:hover { color: var(--text); }
}

.popover {
  position: absolute;
  z-index: 900;
  width: var(--card-w);
  max-width: calc((100vw / var(--zoom)) - 24px);   
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--lift);
  box-shadow: rgba(0, 0, 0, .12) 0 0 8px;
}
.popover__text { color: var(--text-mid); font-size: 13px; line-height: 18px; }





.popover__field {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  
  letter-spacing: .5px;
}
.popover__field::placeholder { color: var(--text-dim); }



.popover__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.popover__label { flex: 0 0 auto; color: var(--text-mid); font-size: 13px; }
.popover__row .popover__field { flex: 1 1 auto; min-width: 0; }



.popover--confirm:has(.popover__row) { min-width: 296px; }
.popover--confirm .form-actions { height: auto; padding-top: 10px; }
.popover--confirm .form-actions .button { white-space: nowrap; }




.popover__aside {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
}
@media (hover: hover) {
  a.popover__aside:hover { color: var(--accent); }
}



.popover--connect { min-width: 296px; }
.popover--connect .popover__text { margin: 0 0 8px; }
.popover--connect .form-actions { height: auto; padding-top: 10px; }
.sync-form { margin: 0; }

.popover--tool {
  position: fixed;
  z-index: 1002;
  width: auto;
  max-width: min(352px, calc((100vw / var(--zoom)) - 24px));
}

.popover--tool.is-error { border-color: var(--red); }

.popover--message { text-align: center; }
.popover--message .form-actions { justify-content: center; padding-top: 6px; height: auto; }

.section-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--text-mid);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}
.section-heading__count { color: var(--accent); font-weight: 400; }

#project-root { position: relative; height: 100%; overflow: hidden; }





.project { position: relative; display: flex; flex-direction: column; height: 100%; padding-top: var(--header-h); padding-bottom: 8px; }

.project__empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  text-align: center;
  pointer-events: none;
}
.project__empty-line { color: var(--text-dim); font-size: 14px; line-height: 21px; }
.project__empty-demo {
  pointer-events: auto;
  padding: 4px 6px;
  color: var(--text-dim);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .project__empty-demo:hover { color: var(--accent); }
}
.is-single-column .project__empty { display: none; }

.project__window {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 20px 4px;
  text-align: center;
}
.project__window-text { color: var(--text-dim); font-size: 13px; line-height: 20px; }
.project__window-swap {
  padding: 4px 6px;
  color: var(--text-dim);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .project__window-swap:hover { color: var(--text); }
}

.project__columns {
  position: relative;          
  display: flex;
  align-items: flex-start;
  flex: 1;
  
  padding: 2px var(--project-pad-x) 0;

  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 801;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
}



.app-header.is-draggable { cursor: grab; }
body.is-header-dragging, body.is-header-dragging .app-header { cursor: grabbing; }

body.is-header-dragging { user-select: none; }
body.is-header-dragging .project__columns { scroll-behavior: auto; }

.project-actions {
  display: flex;
  align-items: center;
  gap: var(--icon-gap);
  height: 100%;
  padding: 0 var(--frame) 0 40px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width .18s ease-out, opacity .18s, margin-right .18s ease-out;
}




.search:not(.is-open) { margin-left: calc(var(--icon-gap) * -1); }
.search.is-open { width: 156px; margin-right: 4px; opacity: 1; }
.search__input {
  width: 100%;
  height: 30px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.search__input::placeholder { color: var(--text-dim); }
@media (hover: hover) {
  .search__input:hover { border-color: var(--border-strong); }
}

.search__input::-webkit-search-cancel-button { display: none; }
.search__clear {
  position: absolute;
  right: 6px;
  display: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.search.has-text .search__clear { display: block; }
@media (hover: hover) {
  .search__clear:hover { color: var(--text); }
}
#search-button.is-active { color: var(--accent-deep); }

@media (max-width: 700px) {
  .search.is-open { width: 148px; }
}

.project-panel__search { position: relative; display: flex; align-items: center; padding: 2px 4px 8px; }





.project-panel__search > .icon {
  position: absolute;
  left: 13px;
  width: 15px;
  height: 15px;
  color: var(--accent);
  pointer-events: none;
}

.project-panel__find {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding-left: 32px;
  border-color: var(--border);
  background: var(--panel);
  font-size: 13px;
}
@media (hover: hover) {
  .project-panel__find:hover { border-color: var(--border-strong); }
}
.project-panel__find::placeholder { color: var(--text-dim); }
.project-panel__find::-webkit-search-cancel-button { display: none; }

.project-panel__new {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin-left: 6px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  transition: background-color .3s;
}
@media (hover: hover) {
  .project-panel__new:hover { background: var(--border-strong); }
}
.project-panel__new .icon { width: 16px; height: 16px; }
.project-panel__new.is-capped { color: var(--text-dim); }

.project-row--total .project-row__pick { color: var(--text-dim); }
.project-row--total.is-active .project-row__pick { color: var(--accent); }

.project-row.is-dim { opacity: .35; }
.project-row__hits {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg));
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.project-switcher {
  display: flex;
  align-items: center;
  height: 100%;
  
  padding: 0 40px 0 calc(var(--frame) - 11px);
  
  min-width: 0;
}

.project-switcher__button {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s;
}

@media (hover: hover) {
  .project-switcher__button:hover { background: var(--border); }
}
.project-switcher__button.is-open { background: var(--border); border-color: var(--border-strong); }

.project-switcher__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-switcher__chevron { flex: 0 0 14px; width: 14px; height: 14px; color: var(--text-dim); }
@media (hover: hover) {
  .project-switcher__button:hover .project-switcher__chevron { color: var(--text); }
}

.project-switcher__count {
  flex: 0 0 auto;
  margin-left: -2px;         
  font-variant-numeric: tabular-nums;   
}

.count-open { margin: 0 1px; color: var(--accent); }

.project-panel {
  position: fixed;
  z-index: 1002;
  
  width: 320px;
  max-width: calc((100vw / var(--zoom)) - 24px);
  max-height: calc((100vh / var(--zoom)) - 80px);
  max-height: calc((100dvh / var(--zoom)) - 80px);
  padding: 6px 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--lift);
  box-shadow: rgba(0, 0, 0, .12) 0 0 8px;
  overflow-y: auto;
}

.project-row { position: relative; display: flex; align-items: center; height: 34px; padding: 0 6px 0 12px; }
@media (hover: hover) {
  .project-row:hover { background: var(--border); }
}

.project-row__hit { position: absolute; inset: 0; z-index: 0; padding: 0; cursor: pointer; }

.project-row__mark {
  flex: 0 0 16px;
  display: flex;
  align-items: center;
  width: 16px;
  color: var(--accent);
}
.project-row__mark svg { width: 11px; height: 11px; }

.avatar {
  --avatar-tint: var(--text-dim);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--avatar-tint) 20%, transparent);
  color: var(--avatar-tint);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
.avatar.has-photo { background: var(--border); }
.avatar__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.avatar--all { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.project-row__avatar { margin-right: 8px; pointer-events: none; }
.project-switcher__avatar { display: inline-flex; flex: 0 0 auto; }
.project-switcher__avatar[hidden] { display: none; }
.project-switcher__face { width: 22px; height: 22px; font-size: 12px; }
.sheet-list .row__avatar { width: 28px; height: 28px; margin-right: 12px; font-size: 13px; pointer-events: none; }

.photo-input { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

.cropper-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .72);
}
.cropper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 300px;
  max-width: 100%;
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
}
.cropper:focus, .cropper:focus-visible { outline: none; }
.cropper__title {
  align-self: stretch;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cropper__stage {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  height: 240px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.cropper__stage.has-picture { cursor: grab; }
.cropper__stage.is-dragging { cursor: grabbing; }
.cropper__face { position: absolute; inset: 24px; display: flex; }
.cropper__face .avatar { width: 100%; height: 100%; font-size: 88px; }
.cropper__stage.has-picture .cropper__face { display: none; }
.cropper__img { position: absolute; left: 0; top: 0; display: none; max-width: none; pointer-events: none; }
.cropper__stage.has-picture .cropper__img { display: block; }
.cropper__ring {
  position: absolute;
  inset: 0;
  display: none;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.cropper__stage.has-picture .cropper__ring { display: block; }
.cropper__zoom { width: 240px; margin: 0; accent-color: var(--accent); }
.cropper__zoom:disabled { opacity: .35; }
.cropper__note { min-height: 16px; margin: 0; color: var(--text-dim); font-size: 12px; line-height: 16px; text-align: center; }
.cropper__tools { display: flex; gap: 8px; justify-content: center; }
.cropper__actions { display: flex; align-self: stretch; gap: 8px; justify-content: flex-end; }
.cropper__tools .button, .cropper__actions .button { height: 32px; padding: 0 14px; }
.cropper__remove { color: var(--red); }
@media (max-width: 700px) {
  .cropper__tools .button, .cropper__actions .button { height: 44px; }
  .cropper__actions .button { flex: 1 1 0; }
}

.project-row__pick,
.project-row__counts,
.project-row__mark,
.project-row__hits { pointer-events: none; }

.project-row__action { position: relative; z-index: 1; }

.project-row__pick {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  color: var(--text-mid);
  font-size: 13px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) {
  .project-row:hover .project-row__pick { color: var(--text); }
}

.project-row.is-active .project-row__pick { color: var(--accent); font-weight: 600; }


.project-row__counts {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  min-width: 76px;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  transition: opacity .12s;
}

.project-row__count {
  min-width: 22px;
  text-align: right;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.project-row__count.is-zero { color: var(--text-dim); font-weight: 400; }

.project-row__count--done { min-width: 22px; color: var(--text-dim); font-size: 11px; font-weight: 400; }


.project-row__count--done.is-zero { opacity: .45; }

.project-row__tools {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}

.project-row:hover .project-row__tools,
.project-row:focus-within .project-row__tools { opacity: 1; pointer-events: auto; }

.project-row:hover .project-row__counts,
.project-row:focus-within .project-row__counts { opacity: 0; }


.project-row__action--pin.is-pinned { color: var(--accent); }
@media (hover: hover) {
  .project-row .project-row__action--pin.is-pinned:hover { color: var(--accent-bright); }
}

.project-row__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  transition: color .3s, background-color .3s;
}
@media (hover: hover) {
  .project-row__action:hover { background: var(--border-strong); color: var(--text); }
}

.icon-mask { display: block; background: currentColor; }
.icon-mask--delete {
  width: 13px;
  height: 13px;
  -webkit-mask: url("assets/delete.png") center / contain no-repeat;
  mask: url("assets/delete.png") center / contain no-repeat;
}
.project-row__action--danger { color: var(--red); opacity: .8; }
@media (hover: hover) {
  .project-row .project-row__action--danger:hover { color: var(--red); opacity: 1; }
}

.project-row__action--edit { color: var(--text-dim); }
@media (hover: hover) {
  .project-row .project-row__action--edit:hover { color: var(--text); }
}

.project-row__action svg { width: 13px; height: 13px; }
.project-row__action .icon--solid { width: 14px; height: 14px; opacity: 1; }

.project-panel__ask { padding: 4px 12px 8px; }
p.project-panel__ask { padding-top: 8px; }




.project-panel__ask--hint { padding-bottom: 6px; color: var(--text-dim); }
.project-panel__confirm { margin-bottom: 4px; }
.project-panel__confirm::placeholder { color: var(--text-dim); }
.project-panel__ask.form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding-top: 10px;
  padding-bottom: 12px;
}
.project-panel__ask.form-actions .button { flex: 1 1 0; min-width: 0; }




.project-row .project-panel__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.project-panel__input {
  width: calc(100% - 24px);
  height: 28px;
  margin: 0 12px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}

.action-icon {
  position: relative;          
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: var(--action-icon);
  height: var(--action-icon);
  padding: 0;
  
  color: var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}

@media (hover: hover) {
  .action-icon:hover { color: var(--accent-deep); background: var(--lift); }
}
.action-icon:active { background: var(--border); }





.action-icon .theme-icon { display: none; }
:root[data-theme="light"] .theme-icon--moon { display: block; }
:root:not([data-theme="light"]) .theme-icon--sun { display: block; }

.action-icon[disabled] { color: var(--icon-off); cursor: not-allowed; }

@media (hover: hover) {
  .action-icon[disabled]:hover { color: var(--icon-off); background: none; }
}
.action-icon svg { display: block; width: 13px; height: 13px; }
.action-icon--more { display: none; }

[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--lift);
  color: var(--text-mid);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;        
  
  transition: opacity .15s;
}

@media (hover: hover) {
  [data-tip]:hover::after { opacity: 1; transition-delay: .9s; }
}

[data-tip]:focus-visible::after { opacity: 1; transition-delay: 0s; }

[data-tip].tip-above::after { top: auto; bottom: 100%; margin: 0 0 8px; }

[data-tip].tip-start::after { right: auto; left: 0; }

.column {
  display: flex;
  flex-direction: column;
  
  flex: 0 0 var(--col-w);
  
  min-width: 0;
  height: 100%;
  margin-right: var(--col-gap);
  
  border: 1px solid transparent;
  border-radius: var(--radius);
}






.column__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 44px;
  height: 44px;
  padding: 8px 10px;
  
  border-bottom: 1px solid transparent;
  cursor: grab;
}

.column__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.column__name-row { display: flex; align-items: center; height: 24px; min-width: 0; }

.column__title-button { flex: 0 1 auto; min-width: 0; padding: 0; overflow: hidden; cursor: text; }

.column__title {
  
  margin: 0;
  padding: 0 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  cursor: text;
}

.column__count {
  margin: 13px 0;
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}





.column__desc {
  flex: 0 0 auto;
  margin: -7px 0 8px;
  padding: 0 10px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 16px;
}

.storage-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, var(--bg));
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
}
.storage-warning__text { margin: 0; color: color-mix(in srgb, var(--accent) 85%, var(--bg)); font-weight: 700; }

.storage-warning__dismiss {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  
  color: color-mix(in srgb, var(--accent) 78%, var(--bg));
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
@media (hover: hover) {
  .storage-warning__dismiss:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }
}

.has-storage-warning { --warning-h: 39px; }
.has-storage-warning .app-header { margin-top: var(--warning-h); }
.has-storage-warning .project {
  padding-top: calc(var(--header-h) + var(--warning-h));
  height: calc(100% - var(--warning-h));
}

@media (max-width: 700px) {
  .storage-warning { flex-direction: column; gap: 8px; align-items: flex-start; }
  .has-storage-warning { --warning-h: 92px; }
}

.export-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: -6px -8px;
  width: 344px;
  max-width: calc((100vw / var(--zoom)) - 40px);
}
.export-option {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s;
}
@media (hover: hover) {
  .export-option:hover { background: var(--lift); }
}
.export-option__name {
  flex: 0 0 76px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.export-option__name--primary { color: var(--accent); }
.export-option__note { color: var(--text-dim); font-size: 12px; line-height: 16px; }

.list-form { display: flex; flex-direction: column; gap: 8px; }
.list-form .text-input { border-color: var(--border-strong); background: var(--bg); }
.list-form__desc { min-height: 62px; }
.list-form .form-actions { margin-top: 2px; }
.column__name-row .text-input { height: 24px; padding: 0 4px; font-size: 14px; font-weight: 700; }

.column__actions { display: flex; align-items: center; gap: 4px; padding: 0 4px; }



















.column__task-list {
  flex: 1;
  min-height: 0;
  padding: 0 14px calc(var(--fade-out) + 8px) 10px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-out)),
    transparent calc(100% - var(--fade-clear)));
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-out)),
    transparent calc(100% - var(--fade-clear)));
}
.column__tasks { position: relative; display: flex; flex-direction: column; }
.column__empty { height: 40px; }   
.column__empty-text { display: none; }


.is-single-column .column__empty {
  display: flex;
  align-items: center;
  height: 44px;
  padding-left: 13px;
}
.is-single-column .column__empty-text {
  display: block;
  color: var(--text-dim);
  font-size: 14px;
}




.group-heading {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 22px 2px 6px;
}
.group-heading:first-child { padding-top: 2px; }
.group-heading__label {
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.group-heading__count { color: var(--text-dim); font-size: 12px; }

.is-dragging .group-heading.is-fixed { opacity: .38; }
.is-dragging .group-heading.is-fixed .group-heading__label { text-decoration: line-through; }

.card {
  position: relative;
  display: flex;
  
  width: 100%;
  margin-bottom: 12px;
  




  padding: 10px 10px 10px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: rgba(0, 0, 0, .1) 0 10px 10px;   
  transition: border-color .3s, box-shadow .3s, background-color .3s,
              transform 380ms cubic-bezier(.3, 0, .2, 1);
  cursor: pointer;
}
.card.is-changed {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim), rgba(0, 0, 0, .1) 0 10px 10px;
}









.card__button {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.card__button:focus-visible { outline-offset: -3px; }

.card__inner { display: flex; flex: 1; min-width: 0; }
.card__checkbox { position: relative; z-index: 2; flex: 0 0 28px; }
.card__main { position: relative; flex: 1; min-width: 0; }
.card__details { display: flex; justify-content: flex-start; align-items: stretch; }

.card__content {
  position: relative;
  flex: 1;
  min-width: 0;
  
  overflow: hidden;
}












.card__corner {
  float: right;
  display: flex;
  align-items: center;
  height: var(--card-line);
  gap: 8px;
  margin: 0 0 4px 8px;
}
.card__corner .badge { margin-right: 0; }






.card__title, .card__desc {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .091px;
}
.card__title {
  color: var(--text);
  line-height: var(--card-line);
  overflow-wrap: anywhere;
}

.card__desc {
  line-height: 19px;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.card__meta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 16px;
  margin-top: -4px;            
  padding-top: 7px;
}

.card__meta__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;             
  row-gap: 4px;
  min-width: 0;                
}
.card__meta__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;           
}
.card__meta__right .badge { margin-right: 0; }

.card.is-done { opacity: .55; }
.card.is-done .card__title { text-decoration: line-through; }
.card__steps {
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}
.card__step {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 18px;
}
.card__step-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card__step-box,
.composer__step-box {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--gray-ring);
  border-radius: 4px;
  background: none;
  color: var(--gray-ring);
  cursor: pointer;
}
.card__step-box::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--on-solid);
  border-bottom: 2px solid var(--on-solid);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
  transition: opacity .15s;
}
.card__step-box.is-done {
  border-color: var(--accent);
  background: var(--accent);
}
.card__step-box.is-done::after { opacity: 1; }
.card__step.is-done .card__step-text { text-decoration: line-through; opacity: .55; }










.card__step { pointer-events: none; }
.card__step-box { pointer-events: auto; }
.is-single-column .card__step { pointer-events: auto; }

.card.is-done .card__steps { text-decoration: line-through; }
.card.is-done .card__desc { text-decoration: line-through; }
.card.is-done .badge--priority { background: var(--border-strong); color: var(--text-mid); }
.card.is-done .badge--date { color: var(--text-dim); }

.card__check.effort-easy { color: var(--effort-easy); }
.card__check.effort-medium { color: var(--effort-medium); }
.card__check.effort-hard { color: var(--effort-hard); }
.card__check.effort-easy::before { background: color-mix(in srgb, var(--effort-easy) 15%, transparent); }
.card__check.effort-medium::before { background: color-mix(in srgb, var(--effort-medium) 15%, transparent); }
.card__check.effort-hard::before { background: color-mix(in srgb, var(--effort-hard) 15%, transparent); }

.card__check.is-done::before,
.card.is-done .card__check::before { border-color: var(--accent); background: var(--accent); }
.card__check.is-done::after,
.card.is-done .card__check::after { opacity: 1; color: var(--on-accent); }

.card__check {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  


  height: var(--card-line);
  padding: 0;
  color: var(--gray-ring);
  cursor: pointer;
}
.card__check::before,
.is-single-column .composer__ring::before {
  content: "";
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .3s, border-color .3s;
}
.card__check::after {
  content: "✓";
  grid-area: 1 / 1;
  color: currentColor;
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s cubic-bezier(.4, 0, 1, 1);
}








@media (hover: hover) {
  .card__check:hover::after { opacity: 1; }

  .card__check:hover { color: var(--accent); }
  .card__check:hover::before { border-color: var(--accent); background: var(--accent-dim); }

  .card:hover { border-color: var(--border-strong); }
  .card.is-done:hover { opacity: .8; }
}

.composer {
  width: 100%;                 
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--border-loud);
  border-radius: var(--radius-lg);
  background: var(--lift);
}
.composer .text-input { height: auto; padding: 0; }
.composer__field { position: relative; }
.composer__title { position: relative; z-index: 1; font-size: 14px; line-height: 23.1px; }
.composer__mirror {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  padding: 0;
  color: transparent;
  font-size: 14px;
  line-height: 23.1px;
  white-space: pre;
  pointer-events: none;
}
.composer__mark {
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: color-mix(in srgb, var(--accent) 28%, transparent) 0 0 0 2px;
}
.composer__desc { color: var(--text-mid); font-size: 13px; line-height: 20px; margin-top: 6px; }

.composer__paste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.composer__paste-text { flex: 1 0 100%; color: var(--text-dim); font-size: 12px; }
.composer__paste .button { height: 26px; padding: 0 10px; font-size: 12px; }
.composer__paste-split { color: var(--accent); }

.is-single-column .composer {
  display: grid;
  grid-template-columns: 44px 1fr 34px;
  grid-template-areas: "check title open" ". desc ." "paste paste paste";
  align-items: center;
  margin-bottom: 0;
  padding: 4.5px 2px 4.5px 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.composer__ring { display: none; }
.is-single-column .composer__ring {
  grid-area: check;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: calc((var(--card-line) - 44px) / 2);
  margin-bottom: calc((var(--card-line) - 44px) / 2);
  color: var(--gray-ring);
  pointer-events: none;
}
.is-single-column .composer.is-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4.5px;
  padding: 0 2px 8px 44px;
}
.is-single-column .composer.is-steps::before { content: none; }
.is-single-column .composer.is-steps .composer__desc {
  flex: 1;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  transform: scale(.875);
  transform-origin: 0 0;
}
.is-single-column .composer__field { grid-area: title; }
.composer__open { display: none; }
.is-single-column .composer__open {
  grid-area: open;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 34px;
  height: 44px;
  margin-top: calc((var(--card-line) - 44px) / 2);
  margin-bottom: calc((var(--card-line) - 44px) / 2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--gray-ring);
  cursor: pointer;
}
.is-single-column .composer__open .icon { width: 18px; height: 18px; opacity: 1; }
.is-single-column .composer.is-steps .composer__open { display: none; }
.is-single-column .composer__desc {
  grid-area: desc;
  margin-top: 0;
  line-height: 20px;
  color: var(--text-dim);
  transform: scale(.875);
  transform-origin: 0 50%;
}
.is-single-column .composer__paste { grid-area: paste; }
.is-single-column .composer .text-input {
  padding: 0;
  border: 0;
  background: none;
}
.is-single-column .composer .text-input:focus,
.is-single-column .composer .text-input:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  
  align-items: center;
  padding: 32px;
  background: rgba(0, 0, 0, .72);
}

.modal:focus, .modal:focus-visible { outline: none; }

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 864px;
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
  
  box-shadow: 0 0 0 1px var(--border), 0 24px 48px rgba(0, 0, 0, .6);
}

.modal__body { display: flex; flex: 1; min-height: 0; }
.modal__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.modal__head { flex: 0 0 auto; padding: 16px 16px 0; }
.modal__scroll { flex: 1; min-height: 0; padding: 6px 16px 0; overflow-y: auto; }

.modal__composer {
  display: flex;
  align-items: flex-end;      
  gap: 8px;
  flex: 0 0 auto;
  padding: 11px 16px;         
}










textarea.modal__comment-input {
  flex: 1;
  min-height: 32px;
  max-height: 240px;
  border-color: var(--border);
  border-radius: var(--radius);
}



.modal__composer .button { height: 32px; }
@media (hover: hover) {
  .modal__comment-input:hover { border-color: var(--border-strong); }
}



.modal__sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 260px;
  padding: 16px;
  overflow-y: auto;
  background: var(--card);
}
.modal__sidebar > * { flex: 0 0 auto; }

.modal__title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }






.modal__title-row .card__check { margin-top: calc((28px - 23px) / 2); }

.modal__close { display: none; }
.modal__title { flex: 1; min-width: 0; font-size: 20px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; cursor: text; }



textarea.modal__title-input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  overflow-y: hidden;
  resize: none;
}

.modal__description { margin: 0 0 20px 32px; color: var(--text-mid); font-size: 14px; line-height: 21px; cursor: text; }





textarea.modal__description-input {
  



  display: block;
  min-height: 0;
  margin: 0 0 20px 32px;
  width: calc(100% - 32px);
  padding: 0;
  border: 0;
  color: var(--text-mid);
  line-height: 21px;
  overflow-y: hidden;
  resize: none;
}


.checklist, .subtasks, .comments { margin: 0 0 20px 32px; }







.checklist__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.checklist__check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  



  border: 1px solid var(--text-dim);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s, border-color .3s;
}
.checklist__check::after { content: "✓"; display: block; color: var(--on-accent); font-size: 11px; line-height: 16px; opacity: 0; }

.checklist__check[aria-checked="true"],
.checklist__item.is-done .checklist__check { border-color: var(--accent); background: var(--accent); }
.checklist__check[aria-checked="true"]::after,
.checklist__item.is-done .checklist__check::after { opacity: 1; }
.checklist__item.is-done .checklist__text { color: var(--text-dim); text-decoration: line-through; }

.checklist__text { flex: 1; min-width: 0; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; cursor: text; }



.checklist__item .text-input { flex: 1; height: 24px; padding: 0; border: 0; line-height: 21px; }
.checklist__delete, .comment__delete { flex: 0 0 24px; width: 24px; height: 24px; opacity: 0; transition: opacity .3s, color .3s, background-color .3s; }
.checklist__item:hover .checklist__delete,
.checklist__delete:focus-visible { opacity: 1; }






.checklist__add { margin-top: 8px; }
.checklist__add,
.subtasks__add { padding-left: calc(18px + 8px - 1px); }

.comment {
  position: relative;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.comment__meta { margin-bottom: 4px; color: var(--text-dim); font-size: 12px; line-height: 16px; }
.comment__body { color: var(--text-mid); font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.comment__delete { position: absolute; top: 6px; right: 6px; }
.comment:hover .comment__delete,
.comment__delete:focus-visible { opacity: 1; }









@media (hover: none) {
  .checklist__delete, .comment__delete { opacity: 1; }
  


  .checklist__delete:active, .comment__delete:active { color: var(--red); background: none; }
}

.modal__description h2, .comment__body h2,
.modal__description h3, .comment__body h3 {
  margin: 14px 0 6px;
  color: var(--text);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}
.modal__description p, .comment__body p { margin: 0 0 10px; }
.modal__description ul, .comment__body ul,
.modal__description ol, .comment__body ol { margin: 0 0 10px; padding-left: 20px; list-style: revert; }
.modal__description li, .comment__body li { margin-bottom: 3px; }
.modal__description hr, .comment__body hr { height: 1px; margin: 14px 0; background: var(--border); }
.modal__description strong, .comment__body strong { color: var(--text); font-weight: 700; }
.modal__description a, .comment__body a { color: var(--accent); }

.modal__description li > ul, .comment__body li > ul,
.modal__description li > ol, .comment__body li > ol { margin: 3px 0 0; }

.modal__description blockquote, .comment__body blockquote {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-dim);
}

.modal__description pre, .comment__body pre {
  margin: 0 0 10px;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--lift);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.modal__description pre code, .comment__body pre code {
  font-size: 12.5px;
  line-height: 19px;
  white-space: pre;
  color: var(--text);
}

.modal__description table, .comment__body table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 10px;
  overflow-x: auto;
  border-collapse: collapse;
}
.modal__description th, .comment__body th,
.modal__description td, .comment__body td {
  padding: 5px 10px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.modal__description th, .comment__body th { color: var(--text); font-weight: 700; }

.modal__description > :last-child, .comment__body > :last-child { margin-bottom: 0; }

.field { padding: 10px 0; }
.field:first-child { padding-top: 0; }

.field-actions { display: flex; gap: 8px; padding-top: 20px; }
.field-actions .button { min-width: 0; }




.field__history {
  margin-top: auto;
  padding-top: 14px;
}
.field__stamp {
  text-align: right;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}
.field-actions .button--primary { flex: 1 1 auto; }
.field-actions .button--danger { flex: 0 0 auto; padding: 0 14px; }
.field-actions .button--primary,
.field-actions .button--danger {
  background: none;
  border-color: var(--border);
}
.field-actions .button--primary { color: var(--accent); }
.field-actions .button--danger { color: var(--red); }
.field-actions .button--primary:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.field-actions .button--danger:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: var(--on-accent);
}
@media (hover: hover) {
  .field-actions .button--primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
  .field-actions .button--danger:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--on-accent);
  }
}
.field__label { margin-bottom: 6px; color: var(--text-dim); font-size: 12px; line-height: 16px; font-weight: 700; }
.field__control { color: var(--text-mid); font-size: 13px; line-height: 18px; }
.field__control select, .field__control input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .3s;
}
@media (hover: hover) {
  .field__control select:hover, .field__control input:hover { border-color: var(--border-strong); }
}




.field__control select,
.popover__row .popover__field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-color: var(--panel);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.field__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.field__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill--editable { gap: 4px; padding-right: 3px; }
.tag-pill__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 9px;
  cursor: pointer;
  transition: color .3s, background-color .3s;
}
@media (hover: hover) {
  .tag-pill__remove:hover { background: var(--border-strong); color: var(--text); }
}

.tag-pill--add {
  padding: 0 9px;
  border-style: dashed;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 15px;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
@media (hover: hover) {
  .tag-pill--add:hover { border-color: var(--accent); color: var(--accent); }
}

.field__suggest { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; margin-top: 6px; }

.field__suggest:empty { display: none; }
.tag-pill--suggest { cursor: pointer; transition: background-color .3s, border-color .3s, color .3s; }
@media (hover: hover) {
  .tag-pill--suggest:hover { border-color: var(--accent); color: var(--accent); }
}

.field__control .tag-input {
  width: auto;
  min-width: 110px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
}

.drag-portal { position: fixed; top: 0; left: 0; z-index: 1001; pointer-events: none; }





@keyframes drag-lift {
  from { transform: rotate(0deg) scale(.97); }
  to   { transform: rotate(2deg) scale(1.03); }
}
.drag-ghost {
  margin: 0;
  transform: rotate(2deg) scale(1.03);
  animation: drag-lift 190ms cubic-bezier(.2, 0, 0, 1);
  box-shadow: rgba(0, 0, 0, .45) 0 12px 28px, rgba(0, 0, 0, .3) 0 2px 6px;
  background: var(--lift);
  cursor: grabbing;
}

.is-drag-source { opacity: 0; }



.card.is-press { transform: scale(.97); }
.column.is-press { transform: scale(.985); }

body.is-dragging { cursor: grabbing; user-select: none; touch-action: none; }
body.is-dragging .project, body.is-dragging .column__task-list { touch-action: none; }












.card, .column__header, .group-heading {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.card input, .card textarea, .card [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}
body.is-dragging .card,
body.is-dragging .column__header { cursor: grabbing; }

.project-tools {
  position: fixed;
  right: var(--frame);
  bottom: calc(var(--frame) + var(--edge-bottom));
  z-index: 800;
  display: flex;
  align-items: center;
  gap: var(--icon-gap);
}





.tool-note {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  transition: opacity .25s ease, max-width .25s ease;
}
.tool-note.is-shown { max-width: 60vw; opacity: 1; }
.tool-note.is-error { color: var(--red); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.undo-button {
  position: fixed;
  left: var(--frame);
  bottom: calc(var(--frame) + var(--edge-bottom));
  z-index: 1002;
}

.undo-button[disabled] { visibility: hidden; }




.undo-button:hover,
.undo-button:focus,
.undo-button:focus-visible,
.undo-button:active { background: none; }







.undo-button::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("assets/undo.png") center / contain no-repeat;
  mask: url("assets/undo.png") center / contain no-repeat;
}

.icon {
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  opacity: .65;
}

.menu__item--icon {
  display: flex;
  align-items: center;
  gap: 9px;
}
.menu__item--icon > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu__item--danger .icon { opacity: .85; }

.menu__section-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-panel {
  position: fixed;
  width: 248px;
  max-width: calc((100vw / var(--zoom)) - 24px);
  max-height: calc((100dvh / var(--zoom)) - 16px);
  padding: 8px 0;
  overflow-y: auto;
}
.view-panel__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  
  padding: 10px 12px 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.view-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
}

.view-panel__row--stacked {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
}
.view-panel__row--stacked .view-panel__label { display: block; margin-bottom: 5px; }
.view-panel__label { color: var(--text-mid); font-size: 13px; }

.view-panel__footer {
  display: flex;
  justify-content: center;
  padding: 10px 12px 4px;
  margin-top: 6px;
}
.view-panel__footer .button { width: 100%; }
.view-panel__row select {
  flex: 0 1 130px;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .3s;
}
@media (hover: hover) {
  .view-panel__row select:hover { border-color: var(--border-strong); }
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background-color .2s;
}
.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-mid);
  transition: transform .2s, background-color .2s;
}
.switch.is-on { background: var(--accent); }
.switch.is-on .switch__knob { background: var(--on-accent); transform: translateX(14px); }

.action-icon.is-active {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

.column__task-list { scrollbar-color: transparent transparent; }
@media (hover: hover) {
  .column:hover .column__task-list { scrollbar-color: var(--border) transparent; }
}

@media (max-width: 1000px) {
  :root { --project-pad-x: 16px; }
}

@media (max-width: 780px) {
  .modal-overlay { padding: 16px; }
  
  .modal__body { flex-direction: column; overflow-y: auto; }
  .modal__main { flex: 0 0 auto; }
  .modal__scroll { flex: 0 0 auto; overflow-y: visible; }
  
  .modal__composer { position: sticky; bottom: 0; z-index: 1; background: var(--panel); }
  
  .modal__sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    flex: 0 0 auto;
    width: 100%;
    overflow: visible;
  }
  .modal__sidebar .field { padding-top: 10px; padding-bottom: 10px; }
  .modal__sidebar .field-actions { grid-column: 1 / -1; }
  
  .modal__sidebar .field__history { grid-column: 1 / -1; margin-top: 4px; }
}










@media (max-height: 700px) {
  .modal-overlay { padding: 12px; }
  .modal__sidebar .field { padding-top: 6px; padding-bottom: 6px; }
  .modal__sidebar .field:first-child { padding-top: 0; }
  .modal__sidebar .field__label { margin-bottom: 4px; }
  .modal__sidebar .field-actions { padding-top: 12px; }
  .modal__sidebar .field__history { padding-top: 8px; }
}




.is-single-column .project__columns {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.is-single-column .column {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
  margin-right: 0;
  padding: 0 var(--project-pad-x);
}
.is-single-column .column + .column {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}
.is-single-column .column__task-list {
  flex: none;
  overflow: visible;
}
.is-single-column .column.is-collapsed .column__task-list,
.is-single-column .column.is-collapsed .column__desc { display: none; }

.is-single-column .card,
.is-single-column .column__add { touch-action: pan-y; }

.is-single-column .card {
  margin-bottom: 0;
  padding: 4.5px 2px 0 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}
@media (hover: hover) {
  .is-single-column .card:hover { border-color: transparent; }
}
.is-single-column .card__title { font-size: 16px; }
.is-single-column .card__desc { font-size: 14px; line-height: 20px; }
.is-single-column .card__step { font-size: 14px; line-height: 20px; }



.card__edit-open { display: none; }





.card--child {
  --card-indent: 22px;
  margin-left: var(--card-indent);
  width: calc(100% - var(--card-indent));
}







.card__folds {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-start;
}
.card__fold {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 0 0 8px;
  border: 0;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
}
.card__fold .icon { width: 15px; height: 15px; transition: transform .2s; }
.card__fold.is-folded .icon { transform: rotate(-90deg); }
.card__fold-count { font-size: 12px; font-variant-numeric: tabular-nums; }

.subtasks__list { margin: 0; padding: 0; list-style: none; }




button.subtasks__open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.subtasks__item.is-done .subtasks__open { color: var(--text-dim); text-decoration: line-through; }











.modal__location,
input.modal__location-input {
  display: block;
  width: calc(100% - 13px);
  margin: 0 0 20px 13px;
  padding: 0 0 0 19px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") left 1px top 3.5px / 14px 14px no-repeat;
  color: var(--text-mid);
  font-family: inherit;
  font-size: 14px;
  line-height: 21px;
  cursor: text;
}
input.modal__location-input { color: var(--text); }


.card.is-nest-target { outline: 2px solid var(--accent); outline-offset: -2px; }
.is-drag-hidden { display: none; }




.sheet-list .row--when .row__switch {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  padding: 0 0 0 12px;
  border: 0;
  background: none;
  cursor: pointer;
}
.sheet-list .row--when .row__switch .switch { pointer-events: auto; }



.sheet-list .row__stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sheet-list .row__stack .row__label { flex: none; }
.sheet-list .row__sub {
  color: var(--accent);
  font-size: 13px;
  line-height: 17px;
}


.sheet-list .cal { padding-top: 4px; }
.cal__head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.cal__month {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}
.cal__step {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.cal__step .icon { width: 17px; height: 17px; }
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}
.cal__dow {
  padding-bottom: 4px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.cal__blank { height: 38px; }



.cal__day {
  width: 38px;
  margin: 0 auto;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.cal__day.is-today { color: var(--accent); font-weight: 700; }
.cal__day.is-picked {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}








.sheet-list .row--stack.wheel {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding-top: 2px;
}
.wheel__col {
  height: 152px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.wheel__col::-webkit-scrollbar { display: none; }

.wheel__col::before,
.wheel__col::after { content: ""; display: block; height: 57px; }
.wheel__hours { width: 62px; }
.wheel__mins { width: 62px; }
.wheel__half { width: 70px; }
.wheel__cell {
  display: block;
  width: 100%;
  height: 38px;
  scroll-snap-align: center;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.wheel__cell.is-picked { color: var(--text); font-weight: 600; }







.field__when { display: flex; gap: 6px; }
.field__when input { flex: 1 1 0; min-width: 0; }

.project-row__filed {
  flex: 0 0 auto;
  margin-left: 6px;
  color: var(--text-dim);
  font-size: 11px;
}
.project-panel__filed {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.project-panel__filed .icon { width: 14px; height: 14px; }
.project-panel__filed.is-on { color: var(--text-mid); }




.project-panel__sort {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 8px;
}


.project-panel__sort-label {
  margin-right: 2px;
  color: var(--text-dim);
  font-size: 11px;
}
.project-panel__sort .project-panel__chip {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
@media (hover: hover) {
  .project-panel__sort .project-panel__chip:hover { color: var(--text-mid); }
}
.project-panel__sort .project-panel__chip.is-on {
  border-color: var(--accent);
  color: var(--accent);
}




.project-row.is-draggable { cursor: grab; }
.project-panel.is-reordering .project-row.is-draggable { cursor: grabbing; }







.project-row.is-dragging {
  position: relative;
  z-index: 5;
  background: var(--lift);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
  scale: 1.02;
  opacity: .97;
}

.project-panel.is-reordering .project-row.is-draggable:not(.is-dragging) {
  transition: transform .15s ease;
}


.project-panel.is-reordering { user-select: none; }





.is-single-column textarea.card__title-input {
  display: block;
  width: 100%;
  height: auto;
  

  min-height: 23.1px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 23.1px;
  resize: none;
  overflow: hidden;
}
.is-single-column .card__step-input {
  flex: 1;
  min-width: 0;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
}
.is-single-column .card__desc { position: relative; z-index: 2; cursor: text; }
.is-single-column textarea.card__desc-input {
  display: block;
  width: 100%;
  height: auto;
  min-height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  resize: none;
  overflow: hidden;
}
.card__desc--hint { position: relative; z-index: 2; cursor: text; }
.is-single-column .card__fold {
  height: 44px;
  margin: -11px 0;
}
.is-single-column .card__fold-count { font-size: 14px; }


.is-single-column .card__folds--pair .card__fold { margin: 0; }

.is-single-column .card__edit-open {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-start;
  width: 34px;
  height: 44px;
  margin: -11px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
}
.is-single-column .card__edit-open .icon { width: 22px; height: 22px; }
.is-single-column .card__step-text { cursor: text; }
.is-single-column .card__main { padding-bottom: 4.5px; }
.is-single-column .card.is-changed {
  border: 0;
  background: var(--accent-dim);
  box-shadow: none;
}
.is-single-column .card__title { font-weight: 400; }
.is-single-column .card__desc { -webkit-line-clamp: 2; }

.is-single-column .card__meta { margin-top: 4px; }
.is-single-column .badge--priority {
  padding: 0;
  background: none;
  font-weight: 700;
}
.is-single-column .badge--priority.is-p1 { color: var(--p1); }
.is-single-column .badge--priority.is-p2 { color: var(--p2); }
.is-single-column .badge--priority.is-p3 { color: var(--p3); }
.is-single-column .card.is-done .badge--priority { background: none; color: var(--text-dim); }

.is-single-column .column__title-button,
.is-single-column .column__count { display: none; }



.column__hero { display: none; }
.is-single-column .column__hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.is-single-column .column__hero-name {
  overflow: hidden;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 44px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-single-column .column__hero-count {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 600;
  line-height: 44px;
}
.is-single-column .column__hero .icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--text-dim);
  transition: transform .2s;
}
.is-single-column .column__hero.is-folded .icon { transform: rotate(-90deg); }











.is-single-column .column__name-row:has(.text-input) .column__hero { display: none; }
.is-single-column .column__name-row .text-input {
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: 20px !important;
  font-weight: 700;
  letter-spacing: -.2px;
}
.is-single-column .column__name-row .text-input:focus { outline: none; }

.column__tasks.has-swipe { position: relative; }

.swipe-action {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 2px 0 10px;
  background: none;
}
.swipe-action__details,
.swipe-action__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 9px;
  white-space: nowrap;
  border: 0;
  border-radius: 13px;
  background: var(--red);
  color: var(--on-solid);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.swipe-action__details { background: var(--gray-pill); color: var(--text); }
.swipe-action svg { width: 15px; height: 15px; flex: 0 0 15px; }
.swipe-action--solo .swipe-action__delete { flex: 0 0 auto; min-width: 93px; }



.card.is-swiping,
.composer.is-swiping {
  position: relative;
  background: var(--bg);
  border-radius: 0;
}
.card.is-swiping > *,
.composer.is-swiping > * {
  position: relative;
  z-index: 1;
}
.card.is-swiping::after,
.composer.is-swiping::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 20px;
  background: var(--gray-pill);
}
.card.is-swiping-slim::after,
.composer.is-swiping-slim::after {
  top: 50%;
  bottom: auto;
  height: 26px;
  margin-top: -13px;
  border-radius: 13px;
}



.swipe-action--tall {
  gap: 8px;
  padding: 0 2px 0 12px;
}
.swipe-action--tall .swipe-action__details,
.swipe-action--tall .swipe-action__delete {
  flex-direction: column;
  gap: 6px;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 400;
}
.swipe-action--tall svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  padding: 12px;
  border-radius: 50%;
  background: var(--gray-pill);
  color: var(--text);
}
.swipe-action--tall .swipe-action__delete svg {
  background: var(--red);
  color: var(--on-solid);
}



.column.is-archived { opacity: .55; }
.column.is-archived .column__title::after {
  content: "Archived";
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}



@keyframes card-leaves { 0%, 66% { opacity: 1; } 100% { opacity: 0; } }
.card.is-leaving { animation: card-leaves 900ms ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .card.is-leaving { animation: none; }
}

.column__add { display: none; }




.is-single-column .column__task-list {
  -webkit-mask-image: none;
  mask-image: none;
  


  padding-bottom: 0;
}














.is-single-column .column__add {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 44px;
  


  padding: 4.5px 0 0 13px;
  border: 0;
  background: none;
  cursor: pointer;
}
.is-single-column .column__add-mark {
  display: block;
  width: 18px;
  height: 18px;
  

  margin-top: calc((var(--card-line) - 18px) / 2);
  border: 1.5px dotted var(--gray-ring);
  border-radius: 50%;
  opacity: .55;
}
.is-single-column .column__add:active .column__add-mark { border-color: var(--accent); opacity: 1; }

.is-single-column .column__tasks:has(.column__add) + .column__empty { display: none; }

@media (max-width: 700px) {
  





  input:not(.line-edit), textarea:not(.line-edit), select { font-size: 16px !important; }

  :root { --zoom: 1; }
  :root { --project-pad-x: 10px; }

  


  :root { --rail: 6px; }
  .column__task-list { padding: 0 var(--rail); }

  :root { --frame: 4px; --action-icon: 44px; --icon-gap: 0px; }
  .project-actions { padding-left: 16px; }
  .project-switcher { padding-right: 16px; }

  .action-icon svg { width: 20px; height: 20px; }

  

  
  .checklist__check { position: relative; }
  .checklist__check::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .composer__mirror { font-size: 16px; }

  .column__name-row .text-input,
  .checklist__item .text-input { height: 32px; }

  .composer { padding: 14px; }
  .composer__desc { margin-top: 12px; }
  .composer .form-actions { height: auto; padding-top: 14px; }
  .composer__paste { margin-top: 12px; }
  .composer__paste .button { height: 36px; padding: 0 12px; font-size: 13px; }

  .button { height: 44px; padding: 0 16px; font-size: 14px; }
  .icon-button { width: 44px; height: 44px; }

  .project-switcher { padding-left: 7px; }
  .column__header { padding: 0 0 0 var(--rail); }

  .view-panel,
  .project-panel,
  .popover--tool {
    left: 12px !important;
    right: 12px;
    width: auto !important;
    max-width: none;
  }

  .menu {
    left: 12px !important;
    right: 12px;
    width: auto;
    min-width: 0;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .menu__item { height: 44px; padding: 0 10px; font-size: 14px; line-height: 44px; }
  .menu__section-label { padding: 8px 10px 4px; }

  .project-row { height: 44px; }
  .view-panel__row { min-height: 40px; }
  .view-panel__row select { height: 34px; flex-basis: 150px; }
  .chip { min-height: 34px; padding: 0 12px; }
  

  .chip { position: relative; }
  .chip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
  }
  .chip--flag { min-width: 34px; }

  .search { position: absolute; left: 0; right: 0; z-index: 2; background: var(--bg); }
  .search.is-open { width: auto; margin-right: 0; padding: 0 8px; }
  .search__input { height: 40px; font-size: 16px; }

  .popover--tool input:not(.visually-hidden) { height: 44px; }
  .popover--tool { padding: 14px 16px; }

  


  .tool-note {
    position: fixed;
    left: var(--frame);
    right: var(--frame);
    bottom: calc(var(--frame) + var(--action-icon) + 10px + var(--edge-bottom));
    z-index: 900;
    max-width: none;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    overflow: visible;
    white-space: normal;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .tool-note.is-shown { max-width: none; transform: none; }
  .tool-note.is-error { border-color: color-mix(in srgb, var(--red) 45%, transparent); }

  .project-tools { display: none; }
  .undo-button::after { content: none; }
  .undo-button::before { width: 17px; height: 17px; }

  










  .undo-button {
    position: static;
    z-index: auto;
  }
  .project-switcher { display: none; }

  #add-task-button,
  #add-column-button,
  #search-button,
  #view-button { display: none; }
  .action-icon--more { display: flex; }
  .project-actions { padding-left: 0; }
  .app-header { justify-content: flex-end; }

  .column__hero { min-height: 44px; }

  .column__actions { display: none; }
  .column__header { flex: 0 0 44px; height: 44px; align-items: center; padding: 0 0 0 var(--rail); }

  .app-header { background: none; pointer-events: none; }
  .project-actions { pointer-events: auto; }
  .project__columns { padding-top: 0; }
  


  .project { padding-top: calc(var(--header-h) + 2px); }

  .card__checkbox { flex: 0 0 44px; }
  .card__check {
    flex: 0 0 44px;
    width: 44px;
    height: 31px;
    margin-top: calc((var(--card-line) - 31px) / 2);
    margin-bottom: calc((var(--card-line) - 31px) / 2);
  }
}





.sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .45);
}



.sheet-panel {
  width: 100%;
  border-top: 1px solid var(--border);
  max-height: calc(100dvh / var(--zoom));
  padding: 10px 16px calc(16px + var(--edge-bottom));
  overflow-y: auto;
  border-radius: 14px 14px 0 0;
  background: var(--sheet-bg);
}

.sheet-list button.row,
.sheet-list .row--tap {
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.sheet-list button.row:active { background: var(--lift); }
.sheet-list .row--red .row__label { color: var(--red); }
.sheet-list .row--red .row__icon { color: var(--red); }
.sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 12px;
}



.sheet-overlay:has(.sheet--push) { z-index: 1001; }




.sheet-panel.sheet--push { height: calc(100dvh / var(--zoom)); }
























.sheet-panel.is-full {
  height: 100%;
  max-height: 100%;
  border-top: 0;
  border-radius: 0;
}





.sheet__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sheet-list .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 74px;
  padding: 12px 4px;
  border: 0;
  border-radius: 12px;
  background: var(--sheet-cell);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}
.sheet-list .tile:active { background: var(--sheet-line); }
.sheet-list .tile .icon { width: 22px; height: 22px; color: var(--text-mid); }
.sheet-list .tile__label { font-size: 12px; line-height: 15px; text-align: center; }



.sheet__head-spacer { flex: 0 0 52px; }

.sheet-panel > .sheet__head {
  padding-right: 0;
  padding-left: 0;
}
.sheet__heading {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}




.sheet__head .modal__close,
.sheet__head .sheet__done {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: filter .15s;
}
.sheet__head .modal__close { background: var(--sheet-cell); color: var(--text-mid); font-size: 0; }
.sheet__head .sheet__done { background: var(--accent); color: var(--on-accent); }


















:root[data-theme="light"] .sheet__head .sheet__done {
  background: #4ADE16;
  color: var(--text);
}
.sheet__head .modal__close:active,
.sheet__head .sheet__done:active { filter: brightness(.85); }
.sheet__head .modal__close .icon { width: 23px; height: 23px; }
.sheet__head .sheet__done .icon { width: 26px; height: 26px; stroke-width: 3; }

.sheet__note {
  padding: 6px 4px 0;
  color: var(--gray-ring);
  font-size: 13px;
  line-height: 18px;
}

.sheet-list .row--accent .row__label { color: var(--accent); }
.sheet-list .row--accent .row__icon { color: var(--accent); }




.sheet-list .row__counts {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.sheet-list .row__count { color: var(--text); font-size: 16px; }
.sheet-list .row__count.is-zero { color: var(--gray-ring); }
.sheet-list .row__count--done { color: var(--gray-ring); font-size: 13px; }
.sheet-list .row__count--done.is-zero { opacity: .45; }
.sheet-list .row__hits { flex: 0 0 auto; color: var(--accent); font-size: 13px; }

.sheet-list .sheet__field-label {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 16px;
  line-height: 21px;
}
.sheet-list .row--stack .field__chips { gap: 8px; }

.sheet-list .row__hit {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}
.sheet-list .row--tap:active { background: var(--lift); }




.sheet-list .row--tap:has(.switch):active { background: none; }







.sheet-list .row .switch { pointer-events: none; }
.sheet-list .row__trail,
.sheet-list .row__more { position: relative; z-index: 1; }

.sheet-list .row__trail {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.sheet-list .row__more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0 -6px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gray-ring);
  cursor: pointer;
}
.sheet-list .row__more .icon { width: 20px; height: 20px; stroke-width: 3; }







.sheet-list .row__grip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0 -6px 0 0;
  color: var(--text-dim);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.sheet-list .row__grip .icon { width: 20px; height: 20px; }
.sheet-list.is-reordering .row__grip { cursor: grabbing; }



.sheet-list .row[data-project-id].is-dragging {
  position: relative;
  z-index: 5;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
  scale: 1.02;
  opacity: .97;
}
.sheet-list.is-reordering .row[data-project-id]:not(.is-dragging) {
  transition: transform .15s ease;
}

.sheet-list.is-reordering { user-select: none; }



.project-sheet__sort .chip.is-active { color: var(--accent); }
.sheet-list .row__more:active { background: var(--sheet-line); }





.sheet-list .row__more { position: relative; }
.sheet-list .row__more::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.sheet-list .row--cancel:disabled { color: var(--gray-ring); cursor: default; }

.sheet-list .row--field { padding: 4px 10px 4px 14px; }
.sheet-list .row--field input,
.sheet-list .row--field textarea {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  line-height: 22px;
}
.sheet-list .row--field input:focus,
.sheet-list .row--field textarea:focus { outline: none; }

.sheet-list .row--cancel {
  justify-content: center;
  padding: 6px 16px;
  font-weight: 600;
}





.sheet-list .sheet__section { margin-top: 22px; }

.sheet-list .sheet__section:first-child { margin-top: 2px; }







.sheet-list .sheet__label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 7px 4px;
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 600;
}

.sheet-list .group {
  border-radius: 12px;
  background: var(--sheet-cell);
  overflow: hidden;
}

.sheet-list .group--text { padding: 14px 16px; }

.sheet-list .comment {
  border-color: transparent;
  background: var(--sheet-inset);
}
.sheet-list .comment__body { color: var(--text); }


.sheet-list .comment__meta { color: var(--text-mid); }

.sheet-list .row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 16px 6px 14px;
}

.sheet-list .row + .row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 54px;
  right: 0;
  height: 1px;
  background: var(--sheet-line);
}

.sheet-list .row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: var(--text-mid);
}

.sheet-list .row__icon .icon { width: 19px; height: 19px; }

.sheet-list .row__icon--green {
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.sheet-list .row__icon--green .icon { width: 16px; height: 16px; }

.sheet-list .row__label {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 21px;
}

.sheet-list .row__value {
  min-width: 0;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 21px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-list .row__chevron {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--gray-ring);
}

.sheet-list .row--sub { padding-left: 54px; }

.sheet-list .row__native {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: transparent;
  font-size: 16px;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
}

.sheet-list .row--stack { display: block; padding: 12px 16px; }
  



  .sheet-list .field__tags { flex-wrap: wrap; margin: 0; }

  




  .sheet-list .field__suggest:not(:empty) { display: contents; }

  
  .sheet-list .tag-pill {
    padding: 0 10px;
    font-size: 13px;
    line-height: 22px;
  }
  .sheet-list .tag-pill--add { padding: 0 11px; font-size: 15px; }
  .sheet-list .tag-pill--editable { padding-right: 5px; }
  .sheet-list .tag-pill__remove { width: 18px; height: 18px; font-size: 11px; }

  




  .sheet-list .tag-input {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    min-width: 96px;
    max-width: 100%;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: none;
    color: var(--text);
    line-height: 22px;
  }
  
  .sheet-list .tag-input:focus,
  .sheet-list .tag-input:focus-visible { outline: none; border-color: var(--text-dim); }

  

  .sheet-list .sheet__stamps { padding-top: 2px; }
  .sheet-list .sheet__stamps .field__history { margin: 0; padding-top: 0; }
  .sheet-list .sheet__stamps .field__stamp { text-align: center; }

.sheet-list .row--stack .section-heading { margin: 0 0 8px; }
.sheet-list .row--stack .form-actions { height: auto; padding-top: 14px; }
.sheet-list .row--stack .popover__field {
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 16px;
}


a.popover__aside { position: relative; }
a.popover__aside::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}

.sheet-list .row--stack .popover__aside {
  display: block;
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
}
.sheet-list .row--stack .form-actions .button { flex: 1; height: 44px; }

.sheet-list .row--stack .field__tags { gap: 8px; }
.sheet-list .row--stack .checklist,
.sheet-list .row--stack .subtasks,
.sheet-list .row--stack .comments { margin: 0; }




.sheet-list button.row--danger,
.sheet-list .row--danger {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border: 0;
  background: none;
  color: var(--red);
  font-family: inherit;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.sheet-list .row--danger:active { background: var(--lift); }

.sheet-list .switch--lg { width: 51px; height: 31px; }

.sheet-list .switch--lg .switch__knob {
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: #fff;
}

.sheet-list .switch--lg.is-on .switch__knob { transform: translateX(20px); background: #fff; }

@media (max-width: 560px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  


  .modal {
    max-width: 100%;
    height: 100%;
    






    border-radius: 0;
    background: var(--sheet-bg);
    box-shadow: none;
  }

  .modal__body { padding-bottom: 0; }
  .modal__main { display: contents; }
  .modal__head { order: -2; padding: 0; }
  .modal__sidebar { display: none; }
  .modal__composer { display: none; }
  .modal__scroll {
    order: 0;
    padding: 0 16px calc(28px + var(--edge-bottom));
  }







  .sheet__comment {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-top: 2px;
  }
  .sheet__comment .modal__comment-input {
    flex: 1;
    min-width: 0;
    min-height: 30px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 16px;
    line-height: 22px;
  }


  .sheet__title {
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    overflow-wrap: anywhere;
  }
  textarea.sheet__title-input {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    resize: none;
  }
  .group--text .modal__description {
    margin: 5px 0 0;
    padding: 0;
    font-size: 16px;
    line-height: 22px;
  }
  



  .group--text .modal__location,
  .group--text input.modal__location-input {
    width: 100%;
    margin: 5px 0 0;
    background-position: left 1px top 4px;
    font-size: 16px;
    line-height: 22px;
  }
  .group--text textarea.modal__description-input {
    width: 100%;
    


    min-height: 22px;
    margin: 5px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 16px;
    line-height: 22px;
  }


  .sheet__section .field__history {
    margin: 0;
    padding: 0 4px;
    text-align: center;
  }

  .field__chips, .field__tags { gap: 8px; }
  .field__control select, .field__control input { width: 100%; }
  textarea.modal__description-input { width: 100%; }
}


.popover__key {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--lift);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: .5px;
  user-select: all;
  overflow-wrap: anywhere;
}

.action-icon.is-stale { color: var(--text-dim); opacity: .55; }




.sync-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  opacity: .5;
  transition: background-color .2s, opacity .2s, box-shadow .2s;
}
@media (hover: hover) {
  .action-icon:hover .sync-dot { opacity: .9; }
}




#sync-button.is-active { background: none; }

.action-icon.is-active .sync-dot {
  background: var(--accent);
  opacity: 1;
  animation: sync-pulse 2s ease-in-out infinite;
}






@keyframes sync-pulse {
  0%, 100% {
    opacity: .72;
    box-shadow: 0 0 3px var(--accent), 0 0 7px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 7px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 85%, transparent);
  }
}



.action-icon.is-active.is-stale .sync-dot { animation: none; box-shadow: none; opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .action-icon.is-active .sync-dot { animation: none; box-shadow: 0 0 4px var(--accent); }
  

  .card.is-press, .column.is-press { transform: none; }
  .drag-ghost { animation: none; }
}








.checklist__item {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.checklist__list:not(.is-reordering) .checklist__text {
  -webkit-user-select: text;
  user-select: text;
}
.checklist__list.is-reordering .checklist__item { cursor: grabbing; }
.checklist__item .checklist__check,
.checklist__item .checklist__delete,
.checklist__item .checklist__text { cursor: pointer; }








.checklist__item.is-dragging {
  position: relative;
  z-index: 5;
  background: var(--lift);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
  scale: 1.02;
  opacity: .97;
}

.checklist__list.is-reordering .checklist__item:not(.is-dragging) {
  transition: transform .15s ease;
}





.checklist.is-dropping,
.subtasks.is-dropping {
  border-radius: 10px;
  outline: 1px dashed var(--accent);
  outline-offset: 6px;
  background: var(--accent-dim);
}


.checklist__list.is-reordering { user-select: none; }