/* Todo: the board from the data root, its horizon tabs and cards, the
   Later fold, and Instructions and Scans in the gear's panel. */
@layer views {
  /* Todo's Scans, below Instructions in the gear's panel. */
  /* Curation is a switch row and the scans a card of the grouped list
     (components.css), each scan its name, schedule, and last run. */
  .focus-scans { margin: 16px 0 24px; }
  .focus-curation-state,
  .focus-curation-reason,
  .focus-schedules-note {
    margin: 6px var(--row-inset) 0;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .focus-curation-reason { color: var(--red); }
  .focus-schedules { margin-top: 12px; }
  .focus-schedule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2px 12px;
    padding: 12px var(--row-inset);
    font-size: 14px;
  }
  .focus-schedule-name { font-weight: 500; }
  .focus-schedule-text,
  .focus-schedule-run {
    min-width: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
  }
  .focus-schedule-run { text-align: right; }

  /* Focus: the board from the data root, its horizon tabs under the page
     heading (the Feed's tabs), Refresh at the tabs row's right end, and its
     sections in the Feed's centered column. */
  .focus-board {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }
  /* The row holds the tablist; the row keeps the border so the tablist can
     stay the shared .pane-tabs (components.css). */
  .focus-tabs-row {
    display: flex;
    flex: none;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }
  .focus-tabs-row .focus-tabs {
    flex: 1;
    min-width: 0;
    border-bottom: none;
  }
  .focus-page {
    flex: 1;
    min-height: 0;
    padding: var(--page-top) var(--page-x) 96px;
    overflow: auto;
  }
  .focus-page > * {
    width: 100%;
    max-width: var(--column);
    margin-left: auto;
    margin-right: auto;
  }
  .focus-tab-drop {
    border-bottom-color: var(--green);
    color: var(--green);
  }
  .focus-heading {
    margin: 32px 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .focus-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .focus-card {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px 8px 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
  }
  /* The add form uses the routine cadence select and the card's date
     field, alongside its actions, wrapping into rows on a phone. */
  .focus-add-actions { flex-wrap: wrap; }
  .focus-add-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
  .focus-add-field .form-input { width: auto; min-width: 0; }
  .focus-dismiss-confirm { grid-column: 1 / -1; margin-top: 4px; }
  .focus-card[draggable="true"] { cursor: grab; }
  .focus-card-dragging { opacity: 0.35; }
  .focus-card-done { opacity: 0.55; }
  :root[data-theme="dark"] .focus-card-done { opacity: 0.8; }
  .focus-card-collapsed { padding-top: 8px; padding-bottom: 8px; align-items: center; }
  .focus-check {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    padding: 0;
    border: 1.5px solid var(--faint);
    border-radius: 50%;
    background: none;
    color: var(--on-accent);
    cursor: pointer;
  }
  .focus-check svg { opacity: 0; }
  .focus-check:hover { border-color: var(--green); }
  .focus-check[aria-pressed="true"] { border-color: var(--green); background: var(--green); }
  .focus-check[aria-pressed="true"] svg { opacity: 1; }
  .focus-card-collapsed .focus-check { margin-top: 0; }
  .focus-card-body { min-width: 0; }
  .focus-card-done .focus-card-body { cursor: pointer; }
  .focus-card-body:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
  .focus-title {
    display: block;
    margin: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  a.focus-title:hover { text-decoration: underline; text-decoration-color: var(--faint); }
  .focus-title[data-editable] { cursor: text; }
  .focus-card-done .focus-title { text-decoration: line-through; }
  .focus-card-collapsed .focus-title { font-size: 15px; }
  .focus-meta {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .focus-source-icon { flex: none; color: var(--faint); }
  .focus-meta .focus-source-icon { display: inline-block; margin-right: 6px; vertical-align: -2px; }
  .focus-note {
    margin: 8px 0 0;
    padding-left: 10px;
    border-left: 2px solid var(--rule);
    color: var(--ink-soft);
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .focus-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* A cut note is the toggle that opens it, as the Feed's takeaway line:
     plain text with a chevron at its end that flips once it is open. */
  button.focus-note {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    appearance: none;
    background: none;
    font: inherit;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
  }
  button.focus-note .focus-note-text { flex: 1 1 auto; min-width: 0; }
  button.focus-note:hover, button.focus-note:focus-visible, button.focus-note[aria-expanded="true"] { color: var(--ink); }
  .focus-note-icon { flex: none; align-self: flex-start; margin-top: calc((1.5em - 16px) / 2); transition: transform 120ms ease; transform: rotate(-90deg); }
  .focus-note-toggle[aria-expanded="true"] .focus-note-icon { transform: rotate(0deg); }
  .focus-note-open .focus-note-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .focus-edit,
  .focus-note-edit,
  .focus-due-edit {
    display: block;
    width: 100%;
    border: 1px solid var(--green);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
  }
  .focus-edit { margin: -3px 0; padding: 2px 6px; font-size: 16px; font-weight: 500; line-height: 1.4; }
  .focus-note-edit { min-height: 54px; margin-top: 8px; padding: 6px 8px; font-size: 13px; line-height: 1.5; resize: vertical; }
  .focus-due-edit { width: auto; margin-top: 8px; padding: 4px 8px; font-size: var(--field-font); line-height: 1.4; }
  .focus-edit:focus,
  .focus-note-edit:focus,
  .focus-due-edit:focus { outline: none; }
  .focus-card-collapsed .row-menu-wrap { margin: -12px 0; }
  .focus-card:hover .row-more,
  .focus-card:focus-within .row-more { opacity: 1; }
  .focus-empty-row { list-style: none; }
  .focus-empty { margin: 0; padding: 10px 2px; color: var(--muted); }
  .focus-drawer-count { margin-left: 8px; color: var(--faint); font-weight: 400; letter-spacing: 0; }
  .focus-later > .focus-list { margin-top: 10px; }
  /* On the Later tab the list is the lead, with no fold around it. */
  .focus-later.focus-later-flat { margin-top: 0; padding-top: 0; border-top: 0; }
  .focus-later.focus-later-flat > summary { display: none; }
  .focus-later.focus-later-flat > .focus-list { margin-top: 0; }
  .focus-later.focus-later-flat + .drawer { margin-top: 32px; }
  .focus-row-dismissed .drawer-row-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
  .focus-candidate { align-items: flex-start; }
  .focus-candidate .focus-source-icon { margin-top: 4px; }
  .focus-candidate-group {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }
  .focus-candidate-text { flex: 1; min-width: 0; }
  .focus-candidate-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .focus-candidate-meta {
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .focus-candidate .focus-edit { font-size: 14px; font-weight: 400; }
  .focus-verdict { flex: none; padding-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; }

  /* Todo's and the brief's instructions forms. In the views
     layer, since thread.css's phone .composer padding would beat it from
     the components layer. */
  .composer.instructions-composer {
    margin: 16px 0 0;
    padding: 0;
    border-top: 0;
  }

  @media (max-width: 719.98px) {
    .focus-schedule {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "name run"
        "text text";
    }
    .focus-schedule-name { grid-area: name; }
    .focus-schedule-run { grid-area: run; }
    .focus-schedule-text { grid-area: text; }
    .focus-card { padding-left: 12px; gap: 10px; }
    /* A row menu keeps inside a phone's width. */
    .row-menu { right: 0; max-width: calc(100vw - 32px); }
  }
}