/* Goals: the list of rows, their drag and drop, a goal's card with its
   details form and Activity, and the closed goals' drawer. Rows take Ideas' shape (ideas.css): flat on the
   page, a rounded tint on hover and focus, the ⋯ shown with them. */
@layer views {
  /* Goals: one flat list of rows (title, why, date), each row with the
     shared row menu (.row-menu) and drag, a details form under an open
     row, and the done and dropped goals in a drawer at the foot. */

  #view-goals > * {
    width: 100%;
    max-width: var(--column);
    margin-left: auto;
    margin-right: auto;
  }

  .goal-section { padding-bottom: 10px; }
  /* The list's top edge, where a goal dropped goes first. */
  .goal-top { height: 8px; }
  .goal-top-drop { background: linear-gradient(var(--green), var(--green)) center / 100% 2px no-repeat; }

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

  .goal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: start;
    margin: 0 -12px;
    padding: 12px;
    border-radius: 10px;
  }
  .goal-row + .goal-row { margin-top: 2px; }
  .goal-row:hover,
  .goal-row:focus-within { background: var(--hover-tint); }
  .goal-row[draggable="true"] { cursor: grab; }
  .goal-row-dragging { opacity: 0.35; }
  .goal-row:hover .row-more,
  .goal-row:focus-within .row-more { opacity: 1; }
  .goal-row .row-menu-wrap { margin: -10px -10px 0 0; }
  @media (hover: none) {
    .goal-row .row-more { opacity: 1; }
  }

  .goal-row-body {
    display: grid;
    gap: 2px;
    min-width: 0;
    cursor: pointer;
  }
  .goal-row-body:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

  .goal-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .goal-why {
    margin-top: 4px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .goal-due {
    justify-self: start;
    margin-top: 4px;
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
  }

  .goal-menu { width: 180px; }

  .goal-empty-row { list-style: none; }
  .goal-empty { margin: 0; padding: 12px 0; color: var(--muted); font-size: 15px; }

  .goal-form {
    grid-column: 1 / -1;
    margin: 4px 0 8px;
  }
  /* Add goal's form, set off from the list by a hairline as Ideas' is. */
  #goals-cards > .goal-form {
    margin: 0 0 24px;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--line);
  }
  .goal-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .goal-date-row .form-input { flex: 1; }
  .goal-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .goal-reason { margin: 0; }

  /* A goal's card, in place of the list, as an open artifact is: its head
     (.open-head in components.css: Back, the title, the ⋯ or Reopen), the
     why, the date, the links, and Edit, or the details form in their
     place, then Activity by day. */
  .goal-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .goal-open-reopen { flex: none; margin-top: 6px; }
  .goal-open-body {
    display: grid;
    gap: 10px;
    justify-items: start;
    min-width: 0;
  }
  .goal-open-body > .goal-form { justify-self: stretch; margin: 0; }
  .goal-open-why {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .goal-open-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }
  .goal-open-meta > span + span::before {
    content: "\00b7";
    margin-right: 8px;
  }
  .goal-open-links {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .goal-open-links a { color: var(--green); }

  .goal-activity { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
  .goal-activity-heading { margin: 0; }
  .goal-activity-day {
    margin: 16px 0 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
  }
  .goal-activity-lines {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .goal-activity-line { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  .goal-activity-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
  }
  .goal-activity-link:hover { color: var(--green); text-decoration-color: currentColor; }
  .goal-activity-empty { margin: 8px 0 0; color: var(--muted); font-size: 15px; }

  /* The drawer (a .drawer-heading, components.css) has its rows read as
     the live rows. */
  .goals-closed .drawer-rows { gap: 2px; margin-top: 8px; }
  .goal-closed-row {
    margin: 0 -12px;
    padding: 12px;
    border-radius: 10px;
  }
  .goal-closed-row { cursor: pointer; }
  .goal-closed-row:hover,
  .goal-closed-row:focus-within { background: var(--hover-tint); }
  .goals-closed .drawer-row-title { color: var(--ink); }
  .goals-closed .drawer-row-title:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
  .goal-closed-state { flex: none; color: var(--muted); font-size: 13px; white-space: nowrap; }

  @media (max-width: 719.98px) {
    .goal-row,
    .goal-closed-row {
      margin-right: -8px;
      margin-left: -8px;
      padding-right: 8px;
      padding-left: 8px;
    }
  }
}