/* Ideas: the top list and the topic groups, each idea's row and menu,
   and the instructions form. */
@layer views {
  /* Ideas: the top list, then the topic groups, in the Feed's centered
     reading column. */
  .ideas-page {
    flex: 1;
    min-height: 0;
    padding: var(--page-top) var(--page-x) 136px;
    overflow: auto;
  }

  .ideas-page > * {
    width: 100%;
    max-width: var(--column);
    margin-left: auto;
    margin-right: auto;
  }

  /* The instructions form, which Todo's add form shares. In the views layer, since thread.css's phone .composer padding
     would beat them from the components layer. */
  .composer.ideas-instructions-composer,
  .composer.focus-add-composer {
    margin: 16px auto 32px;
    padding: 0 0 24px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
  .composer.ideas-instructions-composer { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
    .focus-add-composer .composer-input { display: block; width: 100%; }
    .focus-add-actions { margin-top: 8px; }

  .ideas-top + .ideas-topic,
  .ideas-topic + .ideas-topic { margin-top: 36px; }
  .ideas-topic-title { margin: 0 0 18px; }
  .ideas-item {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin: 0 -12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
  }
  .ideas-item + .ideas-item { margin-top: 2px; }
  .ideas-item:hover,
  .ideas-item:focus-visible,
  .ideas-item:focus-within { background: var(--hover-tint); }
  .ideas-item:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  .ideas-kind-icon { margin-top: 1px; color: var(--ink-soft); }
  .ideas-kind-icon[data-ideas-kind="workflow"] { color: var(--badge-0); }
  .ideas-kind-icon[data-ideas-kind="view"],
  .ideas-kind-icon[data-ideas-kind="app"] { color: var(--badge-1); }
  .ideas-kind-icon[data-ideas-kind="tool"] { color: var(--badge-2); }
  .ideas-kind-icon[data-ideas-kind="skill"] { color: var(--badge-3); }
  .ideas-kind-icon[data-ideas-kind="plugin"] { color: var(--badge-4); }
  .ideas-kind-icon[data-ideas-kind="agent"] { color: var(--badge-5); }
  .ideas-content { min-width: 0; }
  .ideas-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .ideas-text {
    margin-top: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .ideas-item-expanded .ideas-text { display: block; overflow: visible; }
  .ideas-text > :first-child { margin-top: 0; }
  .ideas-text > :last-child { margin-bottom: 0; }
  .ideas-meta {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .ideas-meta a { color: inherit; }
  .ideas-row-buttons {
    display: flex;
    margin: -10px -10px 0 0;
  }
  .ideas-save-toggle,
  .ideas-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
  }
  .ideas-menu-toggle svg { fill: currentColor; stroke: none; }
  .ideas-item:hover .ideas-save-toggle,
  .ideas-item:focus-within .ideas-save-toggle,
  .ideas-save-toggle[aria-pressed="true"],
  .ideas-item:hover .ideas-menu-toggle,
  .ideas-item:focus-within .ideas-menu-toggle,
  .ideas-menu-toggle[aria-expanded="true"] { opacity: 1; }
  .ideas-save-toggle:hover,
  .ideas-menu-toggle:hover { background: var(--hover-tint); color: var(--ink); }
  .ideas-save-toggle:disabled { cursor: default; }
  .ideas-menu {
    top: 48px;
    right: 8px;
    width: 176px;
    z-index: 7;
  }
  .ideas-action { text-align: left; }
  .ideas-action:disabled { cursor: default; opacity: 0.5; }
  .ideas-reason {
    grid-column: 2 / -1;
    margin: 0;
    color: var(--red);
    font-size: 13px;
  }
  @media (hover: none) {
    .ideas-save-toggle,
    .ideas-menu-toggle { opacity: 1; }
  }

  @media (max-width: 719.98px) {
    /* The actions drop under the entry, in their own row below the title and
       text, the way the Feed's actions sit at the foot of each post; the
       title and text then span the card's full width. */
    .ideas-item {
      grid-template-columns: 24px minmax(0, 1fr);
      margin-right: -8px;
      margin-left: -8px;
      padding-right: 8px;
      padding-left: 8px;
    }
    .ideas-row-buttons {
      grid-column: 2 / -1;
      margin: 10px 0 0;
      justify-content: flex-start;
      gap: 4px;
    }
    .ideas-save-toggle,
    .ideas-menu-toggle { opacity: 1; }

    /* The menu drops from the band across the phone's width. It sits here,
       after .ideas-menu above and before the rule below, because the Ideas
       menu carries .app-menu too: these win over its desk rule, and its
       phone rule wins over these. */
    .app-menu {
      position: fixed;
      top: calc(var(--controls-h) + 4px);
      right: 12px;
      left: 12px;
      width: auto;
      max-height: calc(100dvh - 130px);
      overflow: auto;
    }

    /* The menu is already a fixed sheet off the band on a phone (.app-menu
       above), so moving the row that holds its toggle does not move it. */
    .ideas-menu { right: 4px; max-width: calc(100vw - 32px); }
  }
}

@layer views { .ideas-lifecycle { color: var(--ink-soft); } @media (min-width: 720px) { .ideas-menu { width: 224px; } } }