/* Homepage demo, the Protocol scene (10-08). The founder: the app's notebook entry looks far
   better than the invented numbered-step widget, "it should make sense". In the app a saved
   protocol is a notebook entry in the block editor, so this is the entry page as the product
   page's walkthrough draws it (EntryLayout: heading row with actions, properties, the editing
   toolbar, then blocks): a heading, a numbered list of steps, a todo list of materials. Fewer
   controls than the app, nothing the app does not have. */
.view--doc { padding: 0; justify-content: flex-start; align-items: stretch; overflow: hidden; }
.hent { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 13px; color: var(--ink); }
.hent svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hent__head { padding: 16px 22px 12px; border-bottom: 1px solid var(--rule); }
.hent__row { display: flex; align-items: center; gap: 12px; }
.hent__title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.hent__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #EFEFFB; color: var(--purple); }
.hent__icon svg { width: 18px; height: 18px; }
.hent__title h3 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.hent__row { align-items: flex-start; }
.hent__acts { margin-top: 4px; }
.hent__acts { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11.5px; }
.hent__acts > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px; border-radius: 4px; white-space: nowrap; }
.hent__acts .hent__saved { color: var(--ink-2); margin-right: 4px; }
/* Linked and Comments keep their labels only when the title still fits, as the app does at narrow widths. */
.hent__lab { font-style: normal; }
@media (max-width: 1320px) { .hent__lab { display: none; } }
.hent__acts .hent__share { padding: 4px 8px; border: 1px solid var(--rule); border-radius: 5px; color: var(--ink); }
.hent__props { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 11px; }
.hent__prop { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 5px; font-size: 11.5px; white-space: nowrap; }
.hent__prop svg { width: 13px; height: 13px; color: var(--muted); }
.hent__prop em { font-style: normal; color: var(--muted); }
.hent__prop--status { border-color: transparent; background: #EFEFFB; color: var(--purple); }
.hent__prop--status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hent__prop--add { color: var(--muted); border-style: dashed; }
.hent__bar { display: flex; align-items: center; gap: 3px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--rule); color: var(--muted); white-space: nowrap; overflow: hidden; }
.hent__tool { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 26px; font-size: 12px; font-weight: 600; }
.hent__tool--i { font-style: italic; font-weight: 500; font-family: Georgia, serif; }
.hent__tool--u { text-decoration: underline; font-weight: 500; }
.hent__sep { width: 1px; height: 17px; margin: 0 3px; background: var(--rule); }
.hent__style { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 11.5px; color: var(--ink); }
.hent__style svg { width: 11px; height: 11px; }
.hent__ask { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding-left: 8px; font-size: 11.5px; color: var(--purple); }
.hent__body { position: relative; flex: 1; min-height: 0; padding: 14px 28px 0 34px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; line-height: 1.55; }
/* The entry scrolls inside the frame, as the app's editor does; a soft fade marks the bottom edge. */
.hent__body::after { content: ''; position: sticky; display: block; margin-top: -56px; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper)); pointer-events: none; }
.hent__lead { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.hent__meta { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.hent__meta strong { font-weight: 600; color: var(--ink-2); }
.hent__dt { display: inline-block; margin: 0 6px 0 2px; padding: 1px 7px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); vertical-align: 1px; white-space: nowrap; }
.hent__table { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: 12.5px; }
.hent__table th { padding: 5px 8px; border-bottom: 1px solid var(--ink); text-align: left; font-weight: 600; color: var(--ink); }
.hent__table td { padding: 5px 8px; border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: top; }
.hent__table td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hent__list { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.hent__list li { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-2); }
.hent__list b { font-weight: 600; color: var(--ink); }
.hent__foot { margin: 6px 0 24px; font-size: 12px; font-style: italic; color: var(--muted); }
.hent__body h5 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.hent__body h5 + * { margin-top: 0; }
.hent__steps { margin: 0 0 16px; padding-left: 22px; }
.hent__steps li { margin: 0 0 6px; padding-left: 4px; font-size: 12.5px; color: var(--ink-2); }
.hent__steps li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.hent__steps b { font-weight: 600; color: var(--ink); }
.hent__todo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.hent__todo li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
.hent__todo i { width: 14px; height: 14px; border: 1.5px solid #B9BAC2; border-radius: 3px; }
.hent__mention { color: var(--purple); background: #EFEFFB; border-radius: 4px; padding: 1px 4px; white-space: nowrap; }
@media (max-width: 1180px) {
  .hent__acts > span:not(.hent__share) { display: none; }
  .hent__body { padding: 16px 20px 0; }
}

/* Hero demo, the Verification scene (10-08): the Sanger alignment figure inside the app frame. */
.view--verify { padding: 24px 28px; justify-content: center; align-items: stretch; }
.view--verify .vf__win { width: 100%; }
.view--verify .vf__head { font-size: 12.5px; }
.view--verify .vf__aln { font-size: 12.5px; }
.view--verify .vf__sum li { font-size: 12px; padding: 7px 16px; }