/* The dashboard and sign-in pages (optional accounts, 14 Oct 2026). Makerfern's tokens from styles.css; a look of its own: the cutting mat as the app's
   frame (the sidebar and the sign-in panel), paper for the work, IBM Plex Mono for keys, codes, counts and dates. Light and dark follow theme.js. */

/* Small grey and green text on these pages meets 4.5:1 (axe, 14 Oct 2026): a darker --ink-3 and --ok in light mode only; dark mode keeps the site's own. */
:root:not([data-theme='dark']) :is(.auth, .dash, .dash-guest, .dash-palette, .site-footer) { --ink-3: #62665e; --ok: #1f6b40; --blade: #b03a1a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) :is(.auth, .dash, .dash-guest, .dash-palette, .site-footer) { --ink-3: #8f8c82; --ok: #62b485; --blade: #f0754e; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 1; }
.small { font-size: 14px; }
.dchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 11px/1.6 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); white-space: nowrap; font-style: normal; }
.dchip.pro { background: var(--mat); border-color: var(--mat); color: var(--mat-ink); }
.dchip.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.dchip.ghost { background: transparent; border-style: dashed; }
.linkish { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.linkish:hover { color: var(--ink); text-decoration-color: currentColor; }
.linkish.danger, .btn.danger { color: var(--blade); }
.btn.small.danger { background: var(--blade); border-color: var(--blade); color: var(--paper); }
.btn.ghost.danger { background: transparent; color: var(--blade); border-color: var(--blade); }
.btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.dash-label { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
kbd { font: 500 11px/1 var(--mono); padding: 3px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--card); color: var(--ink-2); }

/* the cutting mat: a green surface with a fine and a major grid, the site's own motif */
.mat-surface, .dash-side, .auth-aside, .dg-hero, .dash::before, .site-footer::before {
  background-color: var(--mat-deep);
  background-image:
    linear-gradient(var(--mat-line-major) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line-major) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px), linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--mat-ink);
}

/* ------------------------------------------------------------ sign-in page */
.auth { padding: 40px 0 72px; }
.auth-grid { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; align-items: stretch; }
.auth-aside { border-radius: var(--r-lg) 0 0 var(--r-lg); padding: 40px 36px; display: flex; flex-direction: column; gap: 14px; }
.auth-kicker, .dg-kicker { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--mat-ink) 72%, transparent); }
.auth-big { font: 700 clamp(28px, 3.2vw, 38px)/1.08 var(--display); letter-spacing: -0.02em; margin: 0; color: #fff; text-wrap: balance; }
.auth-aside p { margin: 0; }
.auth-adds { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.auth-adds li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 15px; }
.auth-adds svg { margin-top: 2px; color: #b9e3c9; }
.auth-skip { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-decoration-color: rgba(255, 255, 255, 0.4); padding-top: 12px; }
.auth-card { background: var(--card); border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 40px 40px 32px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: clamp(30px, 3.4vw, 40px); }
.auth-card h2 { font-size: 24px; margin-bottom: 6px; }
.auth-optional { margin: 10px 0 22px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 14px; }
.auth-msg { margin: 0 0 16px; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.auth-google:hover { border-color: var(--ink-3); box-shadow: var(--shadow); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--ink-3); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r); background: var(--paper-2); margin-bottom: 16px; }
.auth-tabs button { min-height: 40px; border: 0; border-radius: 7px; background: transparent; font: 600 15px var(--body); color: var(--ink-2); cursor: pointer; }
.auth-tabs button[aria-selected='true'] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.auth-form { display: grid; gap: 14px; }
.auth-form .field { display: grid; gap: 6px; margin: 0; }
.auth-form .field > span { font-size: 14px; font-weight: 600; }
.auth-form .field em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.auth-form input[type='email'], .auth-form input[type='password'], .auth-form input[type='text'], .inline-form input, .dash-search input, .dg-search input {
  font: 400 16px/1.4 var(--body); min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); width: 100%;
}
.auth-form input:focus, .inline-form input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.auth-form input[name='code'] { font-family: var(--mono); letter-spacing: 0.16em; }
.auth-check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--ink-2); }
.auth-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mat); }
.auth-form .btn { min-height: 46px; justify-content: center; }
.auth-link { justify-self: start; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-wide { width: 100%; justify-content: center; margin-top: 14px; }
.auth-device { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.auth-device summary { cursor: pointer; font-weight: 600; font-size: 15px; min-height: 32px; display: flex; align-items: center; }
.auth-device .auth-form { margin-top: 12px; }
.auth-fine { font-size: 13px; color: var(--ink-3); margin: 0; }
@media (max-width: 860px) {
  .auth { padding-top: 16px; }
  .auth-grid { grid-template-columns: 1fr; }
  .auth-card { border-left: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 28px 20px; order: -1; }
  .auth-aside { border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 26px 20px; }
}

/* ------------------------------------------------------------ the signed-out workspace */
html[data-acct='in'] [data-guest] { display: none; }
/* An app page: the site footer keeps only its last line (the full list of tools is one click away in Tools). */
.site-footer .footer-grid { display: none; }
.site-footer .footer-base a { text-decoration: underline; text-decoration-color: currentColor; }
html[data-acct='in'] [data-dash][hidden] { display: grid; }
.dg-hero { padding: 56px 0 52px; }
.dg-hero h1 { color: #fff; font-size: clamp(34px, 5vw, 58px); margin: 10px 0 14px; max-width: 18ch; }
.dg-lede { max-width: 62ch; font-size: 18px; color: color-mix(in srgb, var(--mat-ink) 88%, transparent); margin: 0 0 22px; }
.dg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.ghost.on-mat { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: transparent; }
.btn.ghost.on-mat:hover { border-color: #fff; }
.dg-deleted { margin-top: 18px; max-width: 62ch; }
.dg-body { padding-top: 32px; }
.dg-jump { display: grid; gap: 14px; margin-bottom: 24px; }
.dg-search, .dash-search { position: relative; display: block; max-width: 560px; }
.dg-search svg, .dash-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.dg-search input, .dash-search input { padding-left: 40px; background: var(--card); }
.dg-recent ul, .tiles { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dg-recent a { display: inline-flex; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); text-decoration: none; font-size: 14px; }
.dg-tools { columns: 3 260px; column-gap: 28px; }
.dg-group { break-inside: avoid; margin: 0 0 22px; }
.dg-group h3 { font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.dg-group ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dg-group li a { display: grid; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.dg-group li a strong { font-weight: 600; }
.dg-group li a span { font-size: 13px; color: var(--ink-3); }
.dg-group li a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.dg-h2 { font-size: clamp(24px, 3vw, 32px); margin: 36px 0 16px; }
.dg-adds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.dg-adds li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.dg-adds h3 { margin: 12px 0 6px; display: flex; align-items: center; gap: 8px; }
.dg-adds p { margin: 0; color: var(--ink-2); font-size: 15px; }
.dg-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); }
.dg-fine { margin-top: 22px; color: var(--ink-3); font-size: 14px; }

/* ------------------------------------------------------------ the app */
.dash { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 64px); border-top: 1px solid var(--line); }
.dash-side { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 18px; }
/* The mat runs the full height of the dashboard (lead, 14 Oct): the sidebar itself is sticky and one screen tall, so on a long page its own
   background stopped short of the footer. The column is painted here instead; the sticky sidebar is transparent over it on wide screens. */
.dash { position: relative; }
.dash::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 264px; pointer-events: none; }
@media (min-width: 901px) {
  .dash-side { background: none; z-index: 1; }
  /* The footer of a signed-in dashboard continues the column instead of leaving a band of bare page (owner, 14 Oct): no gap above it, its text
     starts right of the column, and both mat pieces are fixed to the window so their grid lines meet without a seam. */
  .dash::before, body:has(.dash:not([hidden])) .site-footer::before { background-attachment: fixed; }
  body:has(.dash:not([hidden])) .site-footer { margin-top: 0; padding-left: 264px; position: relative; }
  body:has(.dash:not([hidden])) .site-footer::before { content: ''; position: absolute; top: -1px; bottom: 0; left: 0; width: 264px; pointer-events: none; }
}
.dash-side-head { display: flex; justify-content: space-between; align-items: start; padding: 0 8px; }
.dash-who { margin: 0; display: grid; gap: 2px; min-width: 0; }
.dash-who .dash-label { color: color-mix(in srgb, var(--mat-ink) 60%, transparent); }
.dash-who .mono { font-size: 13px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-close { display: none; }
.dash-side nav { display: grid; gap: 18px; }
.dash-navgroup ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.dash-navhead { margin: 0; padding: 0 10px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--mat-ink) 55%, transparent); }
.dash-navgroup a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 9px; color: color-mix(in srgb, var(--mat-ink) 86%, transparent); text-decoration: none; font-weight: 500; font-size: 15px; }
.dash-navgroup a svg { flex: none; opacity: 0.8; }
.dash-navgroup a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.dash-navgroup a[aria-current='page'] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
.dash-navgroup a[aria-current='page'] svg { opacity: 1; color: var(--mat); }
.dash-navgroup .dchip.pro { margin-left: auto; background: rgba(255, 255, 255, 0.12); border-color: transparent; color: #d7f0df; }
.dash-navgroup a[aria-current='page'] .dchip.pro { background: var(--mat); color: var(--mat-ink); }
/* The note under the nav (owner, 14 Oct, accounts-launch): a quiet caption straight under the last page, not a footer pinned to the bottom of the column. */
.dash-optional { margin: -6px 0 0; padding: 0 10px; display: grid; grid-template-columns: 14px 1fr; gap: 8px; font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--mat-ink) 78%, transparent); }
.dash-optional svg { width: 14px; height: 14px; color: #9fd8b4; opacity: 0.85; margin-top: 2px; }
.dash-signout { justify-self: start; background: none; border: 1px solid var(--mat-line-major); color: #fff; border-radius: 8px; padding: 0 12px; min-height: 36px; font: 500 14px var(--body); cursor: pointer; }
.dash-signout:hover { border-color: #fff; }
.dash-signout-top { margin-top: 10px; min-height: 32px; font-size: 13px; background: rgba(255, 255, 255, 0.08); }

.dash-main { padding: 22px clamp(16px, 3vw, 40px) 64px; min-width: 0; }
.dash-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dash-title { font: 700 clamp(26px, 3vw, 34px)/1.08 var(--display); letter-spacing: -0.02em; margin: 0; outline: none; }
.dash-burger { display: none; }
.dash-k { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink-2); font: 500 14px var(--body); cursor: pointer; }
.dash-k:hover { border-color: var(--ink-3); color: var(--ink); }
.dash-flash { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r); background: var(--ok-soft); color: var(--ok); font-weight: 500; }
.dash-flash.warn { background: #fdf1d6; color: #7a5a12; }
.dash-flash.error { background: var(--blade-soft); color: var(--blade); }
.dash-loading { color: var(--ink-3); font-family: var(--mono); font-size: 14px; }
.dash-notice { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border: 1px dashed var(--line-2); border-radius: var(--r); font-size: 15px; color: var(--ink-2); background: var(--card); }
.dash-notice svg { color: var(--ok); margin-top: 2px; }
.dash-intro { max-width: 70ch; color: var(--ink-2); margin: 0 0 18px; }
.dash-h2 { font-size: 22px; margin: 30px 0 12px; }
.dpage { animation: dash-in 0.18s ease-out; }
@keyframes dash-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dpage { animation: none; } }

.dcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; margin: 0 0 16px; min-width: 0; }
.dcard h2 { font-size: 20px; margin: 0 0 10px; letter-spacing: -0.01em; }
.dcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dcard-head h2 { margin: 0; }
.dcard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.muted { color: var(--ink-3); }

.ov-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ov-grid .dcard { margin: 0; }
.ov-plan, .ov-stats { grid-column: span 2; }
.span2 { grid-column: span 2; }
.ov-news, .ov-tips { grid-column: span 2; }
/* The plan card wears the owner's paper-cut fern art (27 Oct 2026: "i dont like the look", the old gradient; the art is
   work/2026-10-27/art/pro-card/pro-card-background-v3-no-grid.png (28 Oct: v2 had a grid), made for a card: the left 60% kept clear for the words). Dark mode tints it down flat.
   Only for people who bought Pro (owner, 28 Oct 2026 ~05:20 UTC: "the design for the pro pass ... is only visible when purchased
   pro"): dashboard.js adds is-pro when me.pro; a free account's plan card is a plain card. */
.ov-plan.is-pro { background: #dce9ce url('/assets/pro-card-ferns.webp') right bottom / cover no-repeat; border-color: #c4d6b4; --ink: #1d211c; --ink-2: #3d4a38; --ink-3: #4f5d49; --line-2: #9fb48f; color: var(--ink); }
.ov-plan.is-pro .btn.ghost { background: rgba(255, 255, 255, 0.55); }
.ov-plan.is-pro .ov-plan-title, .ov-plan.is-pro .muted { max-width: 66%; }
@media (max-width: 640px) { .ov-plan.is-pro .ov-plan-title, .ov-plan.is-pro .muted { max-width: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ov-plan.is-pro { background: linear-gradient(rgba(12, 20, 14, 0.66), rgba(12, 20, 14, 0.66)), #1f2e22 url('/assets/pro-card-ferns.webp') right bottom / cover no-repeat; border-color: #34503b; --ink: #eef1e6; --ink-2: #d3dccb; --ink-3: #b3c0aa; --line-2: #5d7a62; } :root:not([data-theme='light']) .ov-plan.is-pro .btn.ghost { background: rgba(0, 0, 0, 0.3); } }
:root[data-theme='dark'] .ov-plan.is-pro { background: linear-gradient(rgba(12, 20, 14, 0.66), rgba(12, 20, 14, 0.66)), #1f2e22 url('/assets/pro-card-ferns.webp') right bottom / cover no-repeat; border-color: #34503b; --ink: #eef1e6; --ink-2: #d3dccb; --ink-3: #b3c0aa; --line-2: #5d7a62; }
:root[data-theme='dark'] .ov-plan.is-pro .btn.ghost { background: rgba(0, 0, 0, 0.3); }
.ov-plan-title { font-size: 28px !important; margin: 6px 0 6px !important; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 10px 0 0; }
.stats > div { padding: 12px 0; border-top: 1px solid var(--line); }
.stats > div:nth-child(odd) { padding-right: 12px; }
.stats dt { font-size: 13px; color: var(--ink-3); }
.stats dd { margin: 2px 0 0; display: grid; }
.stats .num { font: 500 30px/1.1 var(--mono); color: var(--ink); }
.stats .sub { font-size: 12px; color: var(--ink-3); }
.tiles { margin-top: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tile { position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); text-decoration: none; min-height: 72px; transition: border-color 0.15s, transform 0.15s; }
.tile:hover { border-color: var(--mat); transform: translateY(-1px); }
.tile-name { font-weight: 600; line-height: 1.25; }
.tile-note { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.tile-meta { font: 500 11px var(--mono); color: var(--ink-3); margin-top: 4px; }
.tile-star { position: absolute; top: 8px; right: 10px; color: #c99a1d; }
.news { list-style: none; margin: 0 0 10px; padding: 0; }
.news li { padding: 10px 0; border-top: 1px solid var(--line); }
.news p { margin: 0; }
.news-date { font-size: 12px; color: var(--ink-3); }
.news-title { font-weight: 600; margin: 2px 0 !important; }
.news .muted { font-size: 14px; }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tips a { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r); background: var(--paper); text-decoration: none; border: 1px solid transparent; }
.tips a:hover { border-color: var(--line-2); }
.tips span { font-size: 14px; color: var(--ink-2); }

.tools-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; }
.tools-bar .dash-search { flex: 1 1 280px; }
.dseg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--paper-2); gap: 2px; flex-wrap: wrap; }
.dseg-btn { border: 0; background: transparent; min-height: 38px; padding: 0 12px; border-radius: 8px; font: 500 14px var(--body); color: var(--ink-2); cursor: pointer; }
.dseg-btn[aria-pressed='true'] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.tgroup { margin-top: 22px; }
.tgroup-title { font: 500 12px/1.4 var(--mono) !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; display: flex; gap: 8px; }
.trows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 8px; }
.trow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 6px 12px 6px 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.trow a { display: grid; text-decoration: none; min-width: 0; padding: 4px 0; }
.trow a strong { font-weight: 600; }
.trow a span { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.trow-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: end; }
.star { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--line-2); }
.star svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.star:hover { color: var(--ink-3); background: var(--paper-2); }
.star[aria-pressed='true'] { color: #c99a1d; }
.star[aria-pressed='true'] svg { fill: currentColor; }
.empty { padding: 28px 20px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-2); }
.empty p { margin: 0 0 6px; }

.meter { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin: 6px 0 8px; border: 1px solid var(--line); }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--mat), var(--ok)); border-radius: inherit; }
.meter.big { height: 14px; }
.mono.big { font-size: 28px; }
.presets-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.file-btn { position: relative; cursor: pointer; }
.pgroup { margin-bottom: 18px; }
.pgroup-title { font-size: 17px !important; margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.pgroup-title .mono { font-size: 12px; color: var(--ink-3); }
.ptable { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 15px; }
.ptable th { text-align: left; font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px; background: var(--paper-2); }
.ptable td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.pname { font-weight: 600; word-break: break-word; }
.pacts { text-align: right; white-space: nowrap; }
.pacts > * + * { margin-left: 12px; }

.locked { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(135deg, var(--card), var(--paper-2)); }
.locked > svg { width: 44px; height: 44px; color: var(--mat); }
.locked h2 { margin: 0 0 8px; font-size: 24px; }
.locked p { max-width: 64ch; }
.wf-top { display: flex; gap: 16px; align-items: start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.wf-top .dash-intro { flex: 1 1 380px; }
.wf-examples, .wf-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.wf-ex, .wf-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 8px; align-content: start; }
.wf-ex-head, .wf-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wf-ex h3, .wf-item h3 { margin: 0; font-size: 17px; }
.wf-ex p { margin: 0; }
.wf-item-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }

/* ------------------------------------------------------------ workflows drawn as blocks (workflow-builder.js) */
/* Block families: a colour for the stripe, the icon and the ports only; text stays in the ink colours. */
.cat-cut { --c: #1d7a5f; }
.cat-print { --c: #2f62b0; }
.cat-photo { --c: #7d4fa8; }
.cat-color { --c: #b8641a; }
.cat-laser { --c: #b8432c; }
.cat-other { --c: #74786f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .cat-cut { --c: #5cc4a2; }
  :root:not([data-theme='light']) .cat-print { --c: #7fa8ef; }
  :root:not([data-theme='light']) .cat-photo { --c: #bb98e4; }
  :root:not([data-theme='light']) .cat-color { --c: #e8a663; }
  :root:not([data-theme='light']) .cat-laser { --c: #f08a72; }
  :root:not([data-theme='light']) .cat-other { --c: #8f8c82; }
}
:root[data-theme='dark'] .cat-cut { --c: #5cc4a2; }
:root[data-theme='dark'] .cat-print { --c: #7fa8ef; }
:root[data-theme='dark'] .cat-photo { --c: #bb98e4; }
:root[data-theme='dark'] .cat-color { --c: #e8a663; }
:root[data-theme='dark'] .cat-laser { --c: #f08a72; }
:root[data-theme='dark'] .cat-other { --c: #8f8c82; }

/* a saved workflow, small: blocks joined by what travels between them */
.wfmini { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.wfmini-b { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--c); min-width: 0; }
.wfmini-ico { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, var(--card)); color: var(--c); }
.wfmini-ico svg { width: 15px; height: 15px; }
.wfmini-txt { display: grid; line-height: 1.25; font-size: 14px; font-weight: 600; min-width: 0; }
.wfmini-txt a { text-decoration: none; }
.wfmini-txt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wfmini-txt em { font: 500 11px/1.4 var(--mono); font-style: normal; color: var(--ok); }
.wfmini-link { display: inline-flex; align-items: center; color: var(--line-2); padding: 0 2px; }
.wfmini-link::before { content: ''; width: 8px; height: 2px; background: currentColor; }
.wfmini-link::after { content: ''; border: 4px solid transparent; border-left: 6px solid currentColor; border-right: 0; }
.wfmini-link span { font: 500 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 3px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.wfmini-link.bad span { color: var(--blade); border-color: var(--blade); }

/* the builder */
.wfb { position: relative; }
.wfb-top { display: grid; gap: 6px; margin-bottom: 16px; }
.wfb-back { justify-self: start; text-decoration: none; padding-left: 0; }
.wfb-titlebar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.wfb-name-wrap { flex: 1 1 300px; min-width: 0; display: grid; gap: 2px; }
.wfb-name-l { font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
/* the list: a workflow's name is a button that turns into a field (inline rename) */
.wf-name { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: text; text-align: left; border-bottom: 1px dashed transparent; }
.wf-name:hover, .wf-name:focus-visible { border-bottom-color: var(--ink-3); outline: none; }
.wf-rename-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 auto; }
.wf-rename-form input { flex: 1 1 180px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); color: var(--ink); font: 600 16px var(--body); }
.wfb-name { width: 100%; font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--display); letter-spacing: -0.015em; color: var(--ink); background: transparent; border: 1px dashed transparent; border-radius: var(--r-sm); padding: 4px 10px; margin-left: -11px; }
.wfb-name:hover { border-color: var(--line-2); }
.wfb-name:focus { outline: 2px solid var(--focus); outline-offset: 1px; background: var(--card); border-color: transparent; }
.wfb-name::placeholder { color: var(--ink-3); }
.wfb-status { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font: 500 12px var(--mono); letter-spacing: 0.04em; white-space: nowrap; }
.wfb-status.ok { background: var(--ok-soft); color: var(--ok); }
.wfb-status.bad { background: var(--blade-soft); color: var(--blade); }
.wfb-acts { display: flex; gap: 8px; margin-left: auto; }
.wfb-body { display: grid; grid-template-columns: 276px minmax(0, 1fr); gap: 18px; align-items: start; }

/* the library */
.wfb-lib { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; align-content: start; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.wfb-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wfb-lib-title { margin: 0; font-size: 18px; }
.wfb-lib-close { display: none; }
.wfb-at { margin: 0; display: grid; grid-template-columns: 16px 1fr; gap: 6px; align-items: start; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--focus) 9%, var(--card)); color: var(--ink-2); font-size: 13px; line-height: 1.35; }
.wfb-at svg { color: var(--focus); margin-top: 1px; }
.wfb-search { position: relative; display: block; }
.wfb-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.wfb-search input { width: 100%; min-height: 40px; padding: 8px 10px 8px 34px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--paper); color: var(--ink); font: 400 15px var(--body); }
.wfb-search input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.wfb-seg { display: flex; }
.wfb-seg .dseg-btn { flex: 1; min-height: 34px; font-size: 13px; }
.wfb-lib-list { display: grid; gap: 4px; }
.wfb-lgroup h3 { display: flex; align-items: center; gap: 7px; margin: 8px 0 6px; font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.wfb-lgroup h3::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.wfb-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wfb-tile { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 7px 8px 7px 7px; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 10px; background: var(--paper); color: var(--ink); text-align: left; font: inherit; cursor: grab; user-select: none; -webkit-user-select: none; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.wfb-tile:hover { border-color: var(--c); border-left-color: var(--c); transform: translateX(2px); box-shadow: var(--shadow); }
.wfb-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wfb-tile:disabled { cursor: not-allowed; opacity: 0.6; transform: none; box-shadow: none; }
.wfb-tile strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.wfb-tile-io { display: block; font: 500 11px/1.45 var(--mono); color: var(--ink-3); }
.wfb-tile-add { color: var(--ink-3); display: grid; place-items: center; }
.wfb-tile.is-off { background: transparent; border-style: dashed; border-left-style: solid; }
.wfb-tile.is-off strong { color: var(--ink-2); }
.wfb-none { margin: 6px 0; font-size: 14px; color: var(--ink-2); }
.wfb-lib-tip { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.wfb-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, var(--card)); color: var(--c); }
.wfb-ico.sm { width: 30px; height: 30px; border-radius: 8px; }
.wfb-ico.sm svg { width: 17px; height: 17px; }

/* the canvas: a dotted board, Start at the top, Finish at the bottom */
.wfb-canvas { position: relative; min-height: 440px; padding: 26px clamp(12px, 3vw, 36px) 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background-color: var(--paper-2); background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-3) 38%, transparent) 1px, transparent 1.5px); background-size: 18px 18px; }
.wfb-flow { max-width: 580px; margin: 0 auto; display: grid; }
.wfb-canvas-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }
.wfb-term { justify-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 14px; color: var(--ink-2); position: relative; z-index: 1; }
.wfb-term b { color: var(--ink); }
.wfb-term-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mat); color: var(--mat-ink); }
.wfb-term.end .wfb-term-dot { background: var(--ink); color: var(--paper); }

/* a connector: a wire, what travels on it, a + to add a block there */
.wfb-gap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 66px; padding: 8px 0; }
.wfb-wire { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: repeating-linear-gradient(to bottom, var(--wire, var(--line-2)) 0 6px, transparent 6px 11px); animation: wfb-flow 0.9s linear infinite; }
@keyframes wfb-flow { from { background-position: 0 0; } to { background-position: 0 11px; } }
.wfb-pill { grid-column: 2; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); color: var(--ink-2); font: 500 11px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.wfb-pill.bad { color: var(--blade); border-color: var(--blade); }
.wfb-at-tag { grid-column: 1; justify-self: end; margin-right: 10px; font-size: 12px; color: var(--ink-3); text-align: right; }
.wfb-plus { grid-column: 3; justify-self: start; margin-left: 10px; position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--line-2); background: var(--card); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity 0.15s, border-color 0.15s, color 0.15s; }
.wfb-plus::after { content: ''; position: absolute; inset: -7px; }
.wfb-gap:hover .wfb-plus, .wfb-plus:focus-visible, .wfb-gap.is-at .wfb-plus { opacity: 1; }
.wfb-plus:hover { border-style: solid; border-color: var(--focus); color: var(--focus); }
.wfb-plus:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wfb-plus:disabled { display: none; }
.wfb-gap.is-at .wfb-plus { border-style: solid; border-color: var(--focus); color: var(--focus); }
.wfb-gap.is-at .wfb-pill { border-color: var(--focus); }
@media (hover: none) { .wfb-plus { opacity: 1; } }
.wfb-gap.is-bad { --wire: var(--blade); }
.wfb-gap.is-bad .wfb-wire { animation: none; }
.wfb-why { grid-column: 1 / -1; position: relative; z-index: 1; justify-self: center; max-width: 46ch; margin: 8px 0 0; padding: 7px 12px; border-radius: 9px; background: var(--card); border: 1px solid color-mix(in srgb, var(--blade) 45%, var(--line)); color: var(--blade); font-size: 13px; line-height: 1.4; text-align: center; }
.wfb-drop { display: none; }
.wfb.is-dragging .wfb-plus, .wfb.is-dragging .wfb-at-tag { opacity: 0; }
.wfb.is-dragging .wfb-gap.is-target .wfb-drop { display: grid; place-items: center; position: absolute; inset: 6px 0; z-index: 3; border: 2px dashed var(--ok); border-radius: var(--r); background: color-mix(in srgb, var(--ok-soft) 88%, transparent); color: var(--ok); font: 600 13px var(--body); }
.wfb.is-dragging .wfb-gap.is-target.nofit .wfb-drop { border-color: var(--blade); background: color-mix(in srgb, var(--blade-soft) 88%, transparent); color: var(--blade); }

/* the empty canvas */
.wfb-gap.is-empty { grid-template-columns: minmax(0, 1fr); padding: 16px 0; }
.wfb-empty { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 26px 20px 22px; text-align: center; border: 2px dashed var(--line-2); border-radius: var(--r-lg); background: color-mix(in srgb, var(--card) 88%, transparent); }
.wfb-empty p { margin: 0; }
.wfb-empty-ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.wfb-empty-title { font: 700 20px/1.2 var(--display); }
.wfb-empty-text { max-width: 44ch; color: var(--ink-2); font-size: 15px; }
.wfb-empty .btn { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.wfb-ex { margin-top: 10px; display: grid; gap: 6px; justify-items: center; }
.wfb-ex-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wfb-ex-chip { min-height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font: 500 13px var(--body); cursor: pointer; }
.wfb-ex-chip:hover { border-color: var(--ink-3); }

/* a block: the handle, the family icon, what it is, what goes in and out, its settings; ports top and bottom meet the wires */
.wfb-block { position: relative; z-index: 1; display: grid; grid-template-columns: 26px 44px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 14px 10px 14px 6px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.wfb-block::before, .wfb-block::after { content: ''; position: absolute; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--card); border: 2px solid var(--c); }
.wfb-block::before { top: -7px; }
.wfb-block::after { bottom: -7px; }
.wfb-block.is-new { animation: wfb-pop 0.32s ease-out; }
@keyframes wfb-pop { from { transform: scale(0.97); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent); } to { transform: none; } }
.wfb-block.is-lifted { opacity: 0.35; }
.wfb-handle { align-self: stretch; width: 26px; min-height: 44px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.wfb-handle:hover { background: var(--paper-2); color: var(--ink); }
.wfb-handle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wfb-main { min-width: 0; display: grid; gap: 2px; }
.wfb-kicker { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.wfb-title { margin: 0; font-size: 18px; letter-spacing: -0.01em; line-height: 1.25; }
.wfb-note { margin: 0; font-size: 14px; color: var(--ink-3); }
.wfb-ports { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wfb-port { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 8px; border-radius: 6px; background: var(--paper-2); color: var(--ink-3); font: 500 11px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.wfb-port b { color: var(--ink); font-weight: 500; }
.wfb-port-arrow { color: var(--ink-3); }
.wfb-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; color: var(--ink-2); }
.wfb-set svg { color: var(--ink-3); }
.wfb-set-l { font-size: 13px; font-weight: 600; }
.wfb-set select { flex: 1 1 180px; max-width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); color: var(--ink); font: 500 14px var(--body); }
.wfb-set select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.wfb-make { font-size: 13px; color: var(--ink-2); white-space: nowrap; text-underline-offset: 3px; }
.wfb-make:hover { color: var(--ink); }
.wfb-tools { display: flex; flex-direction: column; gap: 2px; }
.wfb-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; text-decoration: none; }
.wfb-icon:hover { background: var(--paper-2); border-color: var(--line); color: var(--ink); }
.wfb-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wfb-icon:disabled { opacity: 0.3; cursor: default; background: none; border-color: transparent; }
.wfb-icon.danger:hover { color: var(--blade); }

/* the block that follows the pointer while dragging */
.wfb-ghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; display: flex; align-items: center; gap: 10px; margin: -22px 0 0 -26px; padding: 7px 16px 7px 7px; border-radius: 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line-2); border-left: 4px solid var(--c); box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.4); font: 600 15px var(--body); white-space: nowrap; }
body.wfb-grabbing, body.wfb-grabbing * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }

.wfb-fab, .wfb-scrim { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wfb-wire, .wfb-block.is-new { animation: none; }
  .wfb-tile, .wfb-plus { transition: none; }
}

/* under 1000 px the library is a sheet that slides up from the + buttons and the "Add a block" button */
@media (max-width: 999px) {
  .wfb-body { grid-template-columns: minmax(0, 1fr); }
  .wfb-lib { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 90; max-height: 80vh; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, 0.45); transform: translateY(102%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; }
  .wfb-lib.is-open { transform: none; visibility: visible; transition: transform 0.22s ease; }
  .wfb-lib-close { display: inline-flex; }
  .wfb-scrim { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(20, 22, 18, 0.45); }
  .wfb-scrim[hidden] { display: none; }
  .wfb-fab { display: flex; width: fit-content; gap: 6px; position: sticky; bottom: 16px; margin: 14px auto 0; z-index: 5; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45); }
  .wfb-acts { margin-left: 0; }
}
@media (max-width: 560px) {
  .wfb-canvas { padding: 18px 10px 14px; }
  .wfb-block { grid-template-columns: 24px 36px minmax(0, 1fr); padding: 12px 10px 10px 4px; }
  .wfb-ico { width: 36px; height: 36px; border-radius: 10px; }
  .wfb-tools { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .wfb-icon { width: 40px; height: 40px; }
  .wfb-title { font-size: 17px; }
  .wfb-at-tag { display: none; }
  .wfb-term { font-size: 13px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 999px) { .wfb-lib, .wfb-lib.is-open { transition: none; } }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 14px; }
.inline-form .field { flex: 1 1 260px; display: grid; gap: 6px; margin: 0; }
.inline-form .field > span { font-size: 14px; font-weight: 600; }
.inline-form p { flex-basis: 100%; margin: 0; }
.code-big { font-size: clamp(30px, 5vw, 44px); letter-spacing: 0.12em; margin: 12px 0 6px; padding: 14px 18px; border-radius: var(--r); background: var(--paper-2); display: inline-block; }
.sessions { list-style: none; margin: 0; padding: 0; }
.sessions li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sessions p { margin: 0; }
.sess-label { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kv { display: grid; gap: 8px; margin: 0; }
.kv > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; word-break: break-all; }
.methods { list-style: none; margin: 0 0 12px; padding: 0; }
.methods li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
.danger-zone { border-color: color-mix(in srgb, var(--blade) 40%, var(--line)); }
.key-once { padding: 10px 12px; background: var(--paper-2); border-radius: var(--r-sm); word-break: break-all; margin: 6px 0; }

.dash-palette { width: min(620px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--card); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45); margin-top: 12vh; }
.dash-palette::backdrop { background: rgba(20, 22, 18, 0.45); backdrop-filter: blur(2px); }
.dp-form { margin: 0; }
.dp-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.dp-search svg { color: var(--ink-3); }
.dp-search input { flex: 1; min-height: 56px; border: 0; background: transparent; font: 400 18px var(--body); color: var(--ink); outline: none; }
.dp-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.dp-list li a { display: grid; padding: 9px 12px; border-radius: 9px; text-decoration: none; }
.dp-list li a span { font-size: 13px; color: var(--ink-3); }
.dp-list li[aria-selected='true'] a, .dp-list li a:hover { background: var(--paper-2); }
.dp-list li[aria-selected='true'] a { box-shadow: inset 3px 0 0 var(--mat); }
.dp-none { padding: 14px; color: var(--ink-3); }
.dp-hint { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* phones and tablets: the sidebar becomes a drawer */
.dash-scrim { position: fixed; inset: 0; background: rgba(20, 22, 18, 0.45); z-index: 60; }
@media (max-width: 900px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash::before { display: none; }
  .dash-side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100%; z-index: 70; transform: translateX(-104%); transition: transform 0.2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, 0.3); }
  .dash-side.open { transform: none; }
  .dash-close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--mat-line-major); background: transparent; color: #fff; border-radius: 8px; cursor: pointer; }
  .dash-burger { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: 10px; cursor: pointer; flex: none; }
  .dash-k span, .dash-k kbd { display: none; }
  .dash-k { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-grid > .dcard { grid-column: auto; }
  .dash-main { padding-top: 14px; }
}
@media (max-width: 560px) {
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .ptable td { border: 0; padding: 4px 12px; }
  .pacts { text-align: left; white-space: normal; display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center; }
  .trow { grid-template-columns: 40px minmax(0, 1fr); }
  .trow-chips { grid-column: 2; justify-content: start; }
  .locked { grid-template-columns: 1fr; }
  .kv > div { grid-template-columns: 1fr; gap: 0; }
  .dg-tools { columns: 1; }
  .stats .num { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .dash-side, .tile { transition: none; } }

/* The workflow run page (workflow-runner.js, v2 15 Oct 2026): one card per step, the final file prominent, every other download optional. */
.wfr { display: grid; gap: 14px; min-width: 0; }
.wfr-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: start; justify-content: space-between; }
.wfr-head h2 { margin: 2px 0 4px; font-size: clamp(22px, 2.6vw, 28px); overflow-wrap: anywhere; }
.wfr-head p { margin: 0; }
.wfr-head-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wfr-drop { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 28px 16px; border: 2px dashed var(--line-2); border-radius: var(--r-lg); background: var(--paper); cursor: pointer; }
.wfr-drop:hover, .wfr-drop.dragging, .wfr-drop:focus-within { border-color: var(--ink); }
.wfr-drop.is-ready { cursor: default; gap: 10px; }
.wfr-progress { margin: 0; font-weight: 600; }
.wfr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: wfr; }
.wfr-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 10px; min-width: 0; }
.wfr-step.is-running { border-color: var(--ink-3); }
.wfr-step.is-failed { border-color: var(--blade); }
.wfr-step.is-waiting .wfr-step-title, .wfr-step.is-skipped .wfr-step-title, .wfr-step.is-cancelled .wfr-step-title { opacity: 0.7; }
.wfr-step-head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.wfr-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--mono); border: 1px solid var(--line-2); color: var(--ink-2); }
.wfr-step.is-done .wfr-num { background: var(--ok); border-color: var(--ok); color: var(--card); }
.wfr-step.is-running .wfr-num { background: var(--ink); border-color: var(--ink); color: var(--card); }
.wfr-step-title { flex: 1 1 auto; min-width: 0; }
.wfr-step-title h3 { margin: 0; font-size: 16px; }
.wfr-step-title p { margin: 2px 0 0; overflow-wrap: anywhere; }
.wfr-status { flex: none; font: 500 11px/1.6 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.wfr-status[data-status='done'] { color: var(--ok); border-color: currentColor; }
.wfr-status[data-status='failed'] { color: var(--blade); border-color: currentColor; }
.wfr-phase { margin: 0; color: var(--ink-2); font-size: 14px; }
.wfr-bar { height: 4px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.wfr-bar span { display: block; width: 30%; height: 100%; background: var(--ink-2); border-radius: 4px; animation: wfr-slide 1.4s ease-in-out infinite; }
@keyframes wfr-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .wfr-bar span { animation: none; width: 100%; opacity: 0.4; } }
.wfr-error { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--blade) 8%, var(--card)); }
.wfr-error p { margin: 0; overflow-wrap: anywhere; }
.wfr-out { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 14px; align-items: start; }
.wfr-prev { width: 100%; max-height: 160px; object-fit: contain; border-radius: var(--r-sm); border: 1px solid var(--line); background: repeating-conic-gradient(var(--paper-2) 0 25%, var(--card) 0 50%) 0 0 / 14px 14px; }
.wfr-prev.is-svg { background-color: #fff; }
.wfr-icon { display: grid; place-items: center; gap: 4px; padding: 22px 0; color: var(--ink-2); font: 600 12px var(--mono); }
.wfr-out-body { display: grid; gap: 8px; min-width: 0; }
.wfr-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font: 500 13px/1.5 var(--mono); color: var(--ink-2); }
.wfr-report { margin: 0; font-weight: 600; }
.wfr-note { margin: 0; font-size: 13px; color: var(--ink-2); }
.wfr-notes summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.wfr-notes ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.wfr-acts { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.wfr-acts .btn { gap: 6px; max-width: 100%; }
.wfr-acts .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfr-final { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 18px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--line-2); }
.wfr-final h3 { margin: 2px 0 6px; font-size: 18px; overflow-wrap: anywhere; }
.wfr-final .btn:first-child { min-height: 44px; font-size: 15px; }
@media (max-width: 640px) {
  .wfr-out { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 10px; }
  .wfr-prev { max-height: 120px; }
  .wfr-step { padding: 12px; }
  .wfr-status { font-size: 10px; padding: 1px 6px; }
  .wfr-final .wfr-acts { width: 100%; }
  .wfr-final .btn:first-child { width: 100%; justify-content: center; }
}
.wfr-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wfr-drop { position: relative; }
.wfr-drop:focus-within { outline: 2px solid var(--focus, var(--ink)); outline-offset: 2px; }
.wfr-keep { display: block; font-weight: 400; margin-top: 2px; }
.wfr h2[tabindex], .wfr h3[tabindex] { outline: none; }

/* Your presets on the Tools page, and a tool used inside the dashboard (dash-tool.js; 15 Oct 2026, work/2026-10-15/fix/account-tasks). */
.dpre { margin: 14px 0 18px; }
.dpre .dcard-head { justify-content: start; }
.dpre .dcard-head .linkish { margin-left: auto; }
.dpre-group { margin-top: 14px; }
.dpre-group h3 { font: 500 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; display: flex; gap: 8px; }
.dpre-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dpre-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.dpre-name { font-weight: 600; overflow-wrap: anywhere; }
.dpre-when { color: var(--ink-3); }
.dpre > .linkish { margin-top: 10px; }
.trow a.trow-full { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; color: var(--ink-2); text-decoration: none; }
.trow a.trow-full:hover { border-color: var(--ink-3); color: var(--ink); }
.dtool { display: grid; gap: 10px; min-width: 0; }
.dtool-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dtool-back { gap: 6px; }
.dtool-title { margin: 0; flex: 1 1 160px; min-width: 0; font-size: 20px; letter-spacing: -0.01em; outline: none; }
.dtool-full { font-size: 14px; color: var(--ink-2); text-underline-offset: 3px; }
.dtool-status { margin: 0; font-size: 14px; color: var(--ink-3); }
.dtool-status.is-error { color: var(--blade); }
.dtool-stage { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); min-width: 0; }
.dtool-frame { display: block; width: 100%; height: calc(100vh - 255px); height: calc(100dvh - 255px); min-height: 520px; border: 0; background: var(--paper); }
@media (max-width: 560px) {
  .dpre-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .dpre-when { grid-column: 1; grid-row: 2; }
  .dpre-list li .btn { grid-column: 2; grid-row: 1 / span 2; }
  .dtool-frame { height: calc(100dvh - 150px); min-height: 460px; }
}

/* Dashboard polish (owner, 27 Oct 2026 ~20:05 UTC; work/2026-10-27/feat/visual-final): what is new since the last visit, a side panel beside a tool in use,
   tool cards that keep their names whole, and workflow steps drawn top to bottom with what passes between them. */
.ov-new { margin: 0 0 18px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--ok-soft) 55%, var(--card)); }
.ov-new-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.ov-new-head h2 { margin: 0; font-size: 17px; }
.ov-new-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ov-new-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--ok) 22%, var(--line)); }
.ov-new-list li:first-child { border-top: 0; }
.ov-new-list .dchip { justify-self: start; }
.ov-new-txt p { margin: 0; }
.ov-new-title { font-weight: 600; }
@media (max-width: 640px) {
  .ov-new-list li { grid-template-columns: minmax(0, 1fr); }
  .ov-new-list .btn { justify-self: start; }
}
.dash-navgroup a.has-new::after { content: ''; flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--blade); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blade) 25%, transparent); }

.dtool-wrap { display: grid; gap: 16px; align-items: start; min-width: 0; }
@media (min-width: 1240px) {
  .dtool-wrap { grid-template-columns: minmax(0, 1fr) 270px; }
  .dtool-side { position: sticky; top: 88px; margin-top: 50px; }
}
.dtool-side { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); align-content: start; min-width: 0; }
.dtool-side section + section { border-top: 1px solid var(--line); padding-top: 14px; }
.dtool-side p { margin: 0; }
.dtool-side .dash-label { margin: 0 0 8px; }
.dtool-side .dash-label .mono { color: var(--ink-3); margin-left: 4px; }
.dtool-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px !important; }
.dtool-presets, .dtool-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dtool-presets li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.dtool-presets li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtool-next a { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); text-decoration: none; }
.dtool-next a:hover { border-color: var(--ink-3); }
.dtool-next strong { font-size: 14px; }
.dtool-next span { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.dtool .dtool-title:focus, .dtool .dtool-title:focus-visible { outline: none; box-shadow: none; }

.trow { grid-template-columns: 40px minmax(0, 1fr); padding-bottom: 10px; }
.trow-chips { grid-column: 2; justify-content: start; }

.wf-ex .wfmini, .wf-item .wfmini { flex-direction: column; align-items: stretch; row-gap: 0; }
.wf-ex .wfmini-link, .wf-item .wfmini-link { position: relative; height: 30px; padding: 0 0 0 34px; color: color-mix(in srgb, var(--ink-3) 70%, transparent); }
.wf-ex .wfmini-link::before, .wf-item .wfmini-link::before { position: absolute; left: 19px; top: 0; bottom: 6px; width: 2px; height: auto; }
.wf-ex .wfmini-link::after, .wf-item .wfmini-link::after { position: absolute; left: 15px; bottom: 0; border-style: solid; border-width: 6px 5px 0; border-color: currentColor transparent transparent; }
.wf-ex .wfmini-link span, .wf-item .wfmini-link span { padding: 2px 6px; }

/* ---------------------------------------------------------------- Partner (30 Oct 2026; owner's pick, direction C "Your link takes shape")
   The link is on screen from the first step as a dashed slot; once Whop lists the partner, the code types in, the outline turns solid and the numbers rise in. */
.pt-intro { max-width: 70ch; color: var(--ink-2); margin: 0 0 18px; }
.pc-hero { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px 18px; margin: 0 0 16px; }
.pc-hero .dcard-head { margin: 0; }
.pc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pc-url { font: 500 clamp(18px, 4.2vw, 30px)/1.25 var(--mono); color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 8px 0 14px; min-width: 0; overflow-wrap: anywhere; }
.pc-row .pc-url { margin: 6px 0; }
.pc-host { color: var(--ink-2); }
.pc-slot { display: inline-block; min-width: 9ch; min-height: 1.3em; padding: 0 8px; border: 2px dashed var(--line-2); border-radius: 8px; color: var(--ink-3); }
.pc-slot.typing { border-color: var(--ok); color: var(--ok); }
.pc-slot.typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--ok); vertical-align: -0.12em; animation: pc-caret 1s steps(1) infinite; }
.pc-slot.cut { border-style: solid; border-color: var(--ok); color: var(--ok); }
.pc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.pc-steps li { display: flex; gap: 6px; align-items: flex-start; padding: 10px 0 0; border-top: 3px solid var(--line); font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pc-steps li svg { flex: none; }
.pc-steps li.done { color: var(--ok); border-top-color: var(--ok); }
.pc-steps li.now { color: var(--ink); border-top-color: var(--ink); }
.pc-step { max-width: 760px; }
.pc-step h2:focus { outline: none; }
.pt-terms { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pt-terms li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--ink-2); line-height: 1.5; }
.pt-terms li svg { color: var(--ok); margin-top: 3px; }
.pt-check { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-weight: 600; }
.pt-check input { width: 18px; height: 18px; accent-color: var(--ok); }
.pt-q { display: block; margin: 16px 0 6px; font-weight: 600; }
.pt-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.pt-fs legend { padding: 0; }
.pt-where { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pt-where label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); font-size: 14px; cursor: pointer; }
.pt-where label:has(input:checked) { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); color: var(--ink); }
.pt-where input { accent-color: var(--ok); }
.pt-input { display: flex; align-items: center; max-width: 420px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); font: 15px var(--mono); }
.pt-input span { color: var(--ink-3); white-space: nowrap; }
.pt-input input { flex: 1; min-width: 0; min-height: 42px; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; }
.pt-input input:focus { outline: none; }
.pt-input:focus-within { outline: 2px solid var(--ok); outline-offset: 1px; }
.pt-fine { color: var(--ink-3); font-size: 13px; margin: 8px 0 0; }
.pt-error { color: var(--blade); font-weight: 600; margin: 14px 0 0; }
.pt-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pt-grid > div { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pt-grid .dcard { margin: 0; }
.pt-grid .kv > div { grid-template-columns: 120px minmax(0, 1fr); }
.pt-grid .kv dd { word-break: normal; overflow-wrap: anywhere; }
.pt-grid.pc-rise > div { animation: pc-rise .7s .15s ease-out both; }
.pt-grid.pc-rise > div + div { animation-delay: .3s; }
.pt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 0; }
.pt-stats > div { border-top: 3px solid var(--ok); padding-top: 8px; }
.pt-stats dt { color: var(--ink-3); font-size: 13px; }
.pt-stats dd { margin: 2px 0 0; font: 500 30px/1.1 var(--mono); }
.pt-stats dd.pt-all { font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-3); }
.pt-tools { margin: 10px 0 0; padding: 0; list-style: none; }
.pt-tools li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pt-tools li > span { display: grid; gap: 2px; min-width: 0; }
.pt-tools code { font: 13px var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
@keyframes pc-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes pc-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pt-grid.pc-rise > div, .pc-slot.typing::after { animation: none; } }
@media (max-width: 760px) {
  .pt-grid, .pt-stats { grid-template-columns: 1fr; }
  .pc-hero { padding: 18px 16px 16px; }
  .pc-steps li { font-size: 11px; letter-spacing: .04em; }
}