/* The /templates/ pages (README.md): only what hub.css does not draw already, in its tokens. Served as /templates/templates.css. */

/* The line under the buttons: where it runs in Minda, and that Minda for Windows is coming soon. */
.hb-tpl .tp-soon { max-width: 34em; line-height: 1.5; text-wrap: pretty; }
.hb-band .tp-soon { margin-inline: auto; }

/* The group and the apps under the buttons. */
.tp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: var(--hb-t-lbl); line-height: 1.2; color: var(--hb-mut-2); box-shadow: inset 0 0 0 1px var(--hb-line); }
.tp-chip img { width: 16px; height: 16px; padding: 1px; border-radius: 4px; background: var(--hb-fg); }
a.tp-chip { color: var(--hb-fg); transition: background-color .2s var(--hb-ease), box-shadow .2s var(--hb-ease); }
a.tp-chip:hover { background: var(--hb-card-2); box-shadow: inset 0 0 0 1px var(--hb-line-2); }

/* Benefits, who it is for and a task's rules: a bold lead on its own line over its sentence. */
.tp-notes strong { display: block; margin-bottom: 6px; font-size: var(--hb-t-body); }

/* What it does: the facts strip under its heading, not at the hero's distance. */
.hb-tpl .tp-facts { margin-top: 48px; }
.tp-facts dd, .tp-steps p { overflow-wrap: anywhere; }

/* How it works: the rule on one rail, as Minda draws a saved one (src/renderer/styles/flow.css, FlowView.tsx), in the site's
   tokens. Nodes are cards with an icon tile, the trigger's solid; one rail joins tile to tile (each step draws the part over its
   own card, so a later card never paints over it); a rule with conditions splits into "If yes" and "If no" lanes, side by side
   where the rail has room. A task's numbered steps sit beside it on a wide screen, under it on a narrow one. */
.tp-flow { max-width: 760px; margin-top: 40px; }
.tp-how { display: grid; gap: 32px; align-items: start; margin-top: 40px; }
.tp-how .tp-flow { margin-top: 0; }
@media (min-width: 1000px) { .tp-how { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.flow { container: flow / inline-size; --flow-tile: 36px; --flow-pad: 12px; --flow-rail: calc(var(--flow-pad) + var(--flow-tile) / 2 - 1px); --flow-gap: 6px; }
.flow-line { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.flow-line > .flow-step { position: relative; }
.flow-line > .flow-step + .flow-step { margin-top: var(--flow-gap); }
.flow-line > .flow-step:not(:last-child)::after, .flow-line > .flow-step + .flow-step::before, .flow-lane > .flow-line > .flow-step:first-child::before { content: ''; position: absolute; left: var(--flow-rail); width: 2px; background: var(--hb-line-2); }
.flow-line > .flow-step:not(:last-child)::after { top: calc(var(--flow-pad) + var(--flow-tile)); bottom: calc(-1 * var(--flow-gap)); }
.flow-line > .flow-step + .flow-step::before { top: 0; height: var(--flow-pad); }
.flow-lane > .flow-line > .flow-step:first-child::before { top: -8px; height: calc(8px + var(--flow-pad)); }
.flow-step > .flow-end { display: block; padding: 8px 0 0 calc(var(--flow-pad) * 2 + var(--flow-tile)); }
.flow-node { display: flex; align-items: flex-start; gap: 12px; padding: var(--flow-pad); border-radius: 16px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.flow-tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--flow-tile); height: var(--flow-tile); border-radius: 10px; background: var(--hb-card-2); box-shadow: inset 0 0 0 1px var(--hb-line); color: var(--hb-fg); }
.flow-node.is-start .flow-tile { background: var(--hb-fg); box-shadow: none; color: var(--hb-bg); }
.flow-node-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.flow-caption { color: var(--hb-mut); font-size: var(--hb-t-lbl); font-weight: 500; line-height: 1.3; }
.flow-title { color: var(--hb-fg); font-size: var(--hb-t-body); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.flow-text { color: var(--hb-mut-2); font-size: var(--hb-t-sm); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.flow-var, .flow-chip { display: inline-block; max-width: 100%; padding: 0 8px; border-radius: 999px; font-size: var(--hb-t-lbl); font-weight: 500; line-height: 1.7; color: var(--hb-fg); box-shadow: inset 0 0 0 1px var(--hb-line-2); overflow-wrap: anywhere; }
.flow-chip.is-locked { color: var(--hb-mut-2); }
.flow-lanes { position: relative; display: grid; margin-left: var(--flow-rail); }
.flow-lane { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 8px 0 8px 12px; border-left: 2px solid var(--hb-line-2); }
.flow-lane > .flow-line { align-self: stretch; }
.flow-lane-label { position: relative; }
.flow-lane-label::before { content: ''; position: absolute; top: calc(50% - 1px); right: 100%; width: 12px; height: 2px; background: var(--hb-line-2); }
.flow-end { color: var(--hb-mut); font-size: var(--hb-t-sm); }
@container flow (min-width: 520px) {
  .flow-lanes { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .flow-lanes::before { content: ''; position: absolute; top: 0; left: 0; width: calc(50% + 8px); height: 2px; background: var(--hb-line-2); }
  .flow-lane { padding-top: 16px; }
}
.flow-foot { margin: 12px 0 0; color: var(--hb-mut); font-size: var(--hb-t-lbl); line-height: 1.45; }

/* A task's steps in the card, numbered. */
.hb-pc-rows.tp-steps { counter-reset: tp; }
.hb-pc-rows.tp-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px; }
.hb-pc-rows.tp-steps li::before { counter-increment: tp; content: counter(tp) '.'; color: var(--hb-mut); font-variant-numeric: tabular-nums; }

/* A task's whole prompt, as plain text. */
.tp-prompt { margin-top: 48px; max-width: 48em; padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); font-size: var(--hb-t-body); line-height: 1.7; color: var(--hb-mut-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* The hubs: the link beside the tasks' lead. */
.hb-tpl-hub .hb-lead .hb-link { margin-top: 12px; }

@media (max-width: 860px) {
  .hb-tpl .tp-facts, .tp-prompt, .tp-flow, .tp-how { margin-top: 32px; }
  .tp-how .tp-flow { margin-top: 0; }
  .flow { --flow-tile: 32px; --flow-pad: 10px; }
}