/* The open to-do: a lifted white card in place of the row (piece: detail). */

.content.dim { background: var(--bg-dim); }
.content.dim .toolbar { background: var(--bg-dim); }

/* The card spans the list column and overhangs it by the same ~14px on both sides, as in Things,
   so its edges line up under the heading rule and the ... button at any column width. */
.todo-list li.editing {
  margin: 19px -26px 25px -26px;
  padding: 12px 12px 18px;
  z-index: 1;
}
.todo-list li.editing .card {
  display: block;
  position: relative;
  background: #fff;
  border-radius: 4px;
  padding: 15.5px 16px 14px 14px;
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .07),
    0 .5px 1.5px rgba(0, 0, 0, .08),
    0 1.5px 5px rgba(0, 0, 0, .085);
  animation: card-in .16s ease-out;
}
@keyframes card-in { from { opacity: .4; transform: scale(.985); } to { opacity: 1; transform: none; } }

.card-head { display: flex; align-items: center; min-height: 22px; }
.todo-list li.editing .card-toggle { border-color: #b6b8bb; }
.card-head .edit {
  flex: 1;
  min-width: 0;
  height: 22px;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: .15px;
  color: #030405;
}
.card-head .edit::placeholder { color: #b9bcc1; }

.card-body { padding-left: 21px; }
.card-notes {
  display: block;
  width: 100%;
  min-height: 18px;
  margin-top: 8.5px;
  /* a text view's trailing inset: a word never butts against the card's right margin */
  padding-right: 5px;
  font-size: 14px;
  line-height: 18px;
  color: #202124;
  overflow: hidden;
  /* a readable measure (about 65 characters) when the card is wide, so a short paragraph wraps
     into two full lines instead of one long line and a stray word or two */
  max-width: 32em;
}
.card-notes::placeholder { color: #b9bcc1; }

/* checklist */
.card-checklist { display: none; margin-top: 13.5px; border-top: 1px solid #eaeaea; }
.card-checklist.has-items { display: block; }
.cl-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 27px;
  border-bottom: 1px solid #eaeaea;
}
/* the item being typed in sits in a soft grey well that covers the rules above and below it */
.cl-item::before {
  content: "";
  position: absolute;
  left: -6px; right: -1px; top: -1px; bottom: -1px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  pointer-events: none;
}
.cl-item:focus-within::before { background: #f5f5f6; border-color: #ebebed; }
.cl-check {
  position: relative;
  flex: none;
  width: 10px; height: 10px;
  margin: 0 8.5px 0 1.5px;
  border-radius: 50%;
  color: #1457bd;
  /* an inset ring rather than a border, so the stroke keeps its fractional weight at any zoom */
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.cl-check::after { content: ""; position: absolute; inset: -7px; }
.cl-item.done .cl-check { background: currentColor url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.6 5.2l1.6 1.6 3.2-3.5' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.cl-input {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 26px;
  font-size: 14px;
  color: #202124;
}
.cl-item.done .cl-input { color: #a2a5aa; }
.cl-handle { position: relative; flex: none; width: 14px; margin: 0 5px 0 6px; color: #c8c9cb; opacity: 0; }
.cl-handle svg { width: 14px; height: 9px; }
.cl-item:focus-within .cl-handle, .cl-item:hover .cl-handle { opacity: 1; }

/* the insertion point: Things' 2px accent-blue bar (detail.js places it; the native caret is hidden) */
li.editing .card.has-caret :is(.edit, .card-notes, .cl-input) { caret-color: transparent; }
.card-caret {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
  pointer-events: none;
  visibility: hidden;
}
.card-caret.on { visibility: visible; animation: card-caret-blink 1.1s step-end .5s infinite; }
@keyframes card-caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .card-caret.on { animation: none; } }
.card-caret-mirror { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; overflow-wrap: break-word; }

/* tags */
.card-tags { display: none; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.card-tags.has-items { display: flex; }
.card-tag {
  height: 19px;
  padding: 0 8px;
  border-radius: 10px;
  background: #e9eaec;
  color: #55595e;
  font-size: 12px;
  font-weight: 500;
}
.card-tag:hover { background: #dfe0e3; }

/* bottom row: chips left, action icons right */
.card-foot { display: flex; align-items: center; justify-content: space-between; min-height: 26px; margin-top: 17.5px; }
.card-chips { display: flex; align-items: center; gap: 14px; min-width: 0; margin-left: -1px; }
.chip-wrap { display: inline-flex; align-items: center; position: relative; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px;
  padding: 0 5px 0 2px;
  margin-left: -2px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #2d2f33;
  white-space: nowrap;
}
.chip:hover { background: #f2f3f5; }
.chip svg { width: 15px; height: 15px; }
.chip-when .ico[viewBox="0 0 16 16"] { width: 14px; height: 14px; }
.chip-deadline { font-weight: 500; color: #55595e; }
.chip-deadline svg { width: 11px; height: 13px; color: #8d9197; }
.chip-deadline.due, .chip-deadline.due svg { color: var(--red); }
.chip-clear {
  width: 16px; height: 16px; margin-left: 1px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: #a0a4a9;
  opacity: 0;
}
.chip-clear svg { width: 7px; height: 7px; }
.chip-wrap:hover .chip-clear { opacity: 1; }
.chip-clear:hover { background: #eceef0; color: #55595e; }

/* the repeat marker: the rule in words beside the date, in the deadline chip's quieter voice */
.chip-repeat {
  font-weight: 500; color: #55595e; gap: 5px;
  /* a rule too long for the card wraps under itself (glyph on the first line) rather than hiding its end */
  height: auto; min-height: 24px; padding-top: 3px; padding-bottom: 3px;
  line-height: 18px; white-space: normal; text-align: left; align-items: flex-start;
}
.chip-repeat .repeat-ico { flex: none; width: 16px; height: 14px; margin-top: 2px; color: #72767c; overflow: visible; }
.chip-wrap-repeat:focus-within .chip-clear { opacity: 1; }
/* With a rule beside the date the chips may not fit next to the action icons. Then the chips and the
   icons flow as one wrapping row (icons kept at its right end), so a long rule takes a line of its
   own instead of running under the icons. */
.card-foot:has(.chip-wrap-repeat) { flex-wrap: wrap; column-gap: 14px; row-gap: 2px; }
.card-foot:has(.chip-wrap-repeat) .card-chips { display: contents; }
.card-foot:has(.chip-wrap-repeat) .card-chips > :first-child { margin-left: -1px; }
.chip-wrap-repeat, .chip-repeat { min-width: 0; max-width: 100%; }
/* The rule belongs to the date, so it sits closer to it than the deadline does: the date's clear
   button floats in the gap between them instead of holding its own space. */
@media (min-width: 700px) {
  .chip-wrap:has(+ .chip-wrap-repeat) > .chip-clear { position: absolute; left: 100%; top: 50%; margin: -8px 0 0 2px; }
  .chip-wrap + .chip-wrap-repeat { margin-left: 6px; }
}

.card-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: -6px; }
.card-act {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 5px;
  color: #a4a6a9;
}
.card-act svg { width: 16px; height: 16px; }
.card-act:hover { color: #6b6f75; background: #f2f3f5; }
/* the open card's own glyphs (detail.js) are drawn on an 18-unit grid */
li.editing .card-actions { margin-right: -3px; }
li.editing .card-act { color: #9a9c9f; }
li.editing .card-act .card-ico { width: 17px; height: 17px; }
li.editing .card-act:hover { color: #6b6f75; }

/* phone action bar under an open card */
.detail-bar { display: none; }

/* ---------- phone ---------- */
@media (max-width: 699px) {
  .todo-list li.editing {
    margin: 18px calc(-1 * var(--col-pad-r) - var(--safe-r)) 26px calc(-1 * var(--col-pad-l) - var(--safe-l));
    padding: 0;
  }
  .content.dim { background: #f8f8fa; }
  .todo-list li.editing .card {
    border-radius: 4px;
    /* 12px in: at 4/3 scale, 3 CSS px are 4 device px, so the checkbox's edges land on whole pixels */
    padding: 15.5px calc(16.5px + var(--safe-r)) 10.5px calc(12px + var(--safe-l));
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .03), 0 3px 15px rgba(0, 0, 0, .16);
  }
  .card-head { min-height: 30px; }
  .card-head .card-toggle { width: 18px; height: 18px; margin-right: 8.5px; }
  /* The title's checkbox holds its own beside the 20pt title: a firm 1.5px ring (2 device px),
     drawn as an inset shadow because browsers floor a 1.5px border to 1 device px at 4/3 scale,
     with a slightly heavier lower edge and a hairline of shade under it, as on iOS. */
  .todo-list li.editing .card-toggle {
    border: 0;
    border-radius: 4.5px;
    box-shadow:
      inset 0 0 0 1.5px #bdbec1,
      inset 0 -2.25px 0 rgba(0, 0, 0, .1),
      0 .75px 0 rgba(0, 0, 0, .09);
    transition: background-color .12s, box-shadow .12s;
  }
  .todo-list li.editing .card-toggle:hover { box-shadow: inset 0 0 0 1.5px #a9adb3, inset 0 -2.25px 0 rgba(0, 0, 0, .1), 0 .75px 0 rgba(0, 0, 0, .09); }
  .todo-list li.editing .card-toggle:checked { box-shadow: inset 0 0 0 1.5px var(--check); }
  .card-head .edit { height: 30px; font-size: 20.5px; line-height: 24px; letter-spacing: 0; color: #020203; }
  .card-body { padding-left: 27px; }
  .card-notes { margin-top: 10px; padding-right: 0; font-size: 17px; line-height: 19.5px; color: #1a1a1c; }
  .card-checklist { margin-top: 22px; border-top-color: #edecef; }
  .cl-item { height: 45px; border-bottom-color: #edecef; }
  .cl-check { width: 14.5px; height: 14.5px; margin: 0 9px 0 .5px; color: var(--blue); box-shadow: inset 0 0 0 2.05px currentColor; }
  .cl-input { height: 44px; font-size: 17px; color: #1a1a1c; }
  .cl-handle { opacity: 1; width: 14px; margin: 0 -1px 0 6px; color: #d5d5d8; }
  .cl-handle svg { width: 14px; height: 9px; }
  .card-tag { height: 26px; font-size: 15px; border-radius: 13px; padding: 0 11px; }
  .card-foot { margin-top: 25px; min-height: 34px; }
  .chip { font-size: 17px; height: 32px; gap: 7px; }
  .chip svg { width: 19px; height: 19px; }
  .chip-clear { opacity: 1; width: 22px; height: 22px; }
  .chip-repeat { gap: 7px; height: auto; min-height: 32px; padding-top: 5.5px; padding-bottom: 5.5px; line-height: 21px; }
  .chip-repeat .repeat-ico { width: 17px; height: 14.875px; margin-top: 3px; }
  /* the rule gets the line under the date, which keeps the action icons level with the date */
  .chip-wrap-repeat:not(:first-child) { order: 2; flex-basis: 100%; }
  .card-foot:has(.chip-wrap-repeat) .card-actions { order: 1; }
  .card-foot:has(.chip-wrap-repeat) .card-chips > .chip-wrap-repeat ~ .chip-wrap { order: 3; }
  .card-actions { gap: 12px; margin-right: -4px; }
  .card-act { width: 30px; height: 30px; color: #a3a5a8; }
  .card-act svg { width: 21px; height: 21px; }
  /* the icons sit on the foot's lower half, level with where iOS sets them */
  li.editing .card-actions { position: relative; top: .75px; margin-right: -4.75px; }
  li.editing .card-act { color: #abacaf; }
  li.editing .card-act .card-ico { width: 21px; height: 21px; }
  /* at 21px a one-unit hairline reads faint next to 17pt text; iOS draws these a touch heavier */
  li.editing .card-act .card-ico [stroke] { stroke-width: 1.2; }
  li.editing .card-act .card-ico g rect { transform-box: fill-box; transform-origin: center; transform: scaleX(1.35); }
  .content.editing .todo-list > li:not(.editing) .view,
  .content.editing .list-header,
  .content.editing #area-projects,
  .content.editing .group-head { opacity: .28; transition: opacity .2s; }

  .detail-bar {
    display: flex;
    align-items: center;
    position: fixed;
    left: 50%;
    bottom: calc(14px + var(--safe-b));
    transform: translateX(-50%);
    height: 44px;
    padding: 0 6px;
    border-radius: 10px;
    background: #272d37;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    z-index: 20;
    animation: fade .15s ease-out;
  }
  .detail-bar button {
    display: flex; align-items: center; gap: 8px;
    height: 44px;
    padding: 0 18px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
  }
  .detail-bar button svg { width: 22px; height: 22px; }
  .detail-bar [data-bar="more"] svg { width: 20px; height: 6px; }
}