/* ==========================================================================
   Open-source catalogue (localhost only, not released)
   Loaded after main.css on the open-source pages only, and built from its tokens: the list, a tool's page,
   a product's "alternatives to" page and the A to Z index.
   Brief (founder, 10 Nov 2026): a dense directory in the manner of openalternative.co,
   not a marketing page. So: the search bar first, a small title, square-ish corners
   (6 to 8px, never pills), flat borders with no shadow or lift, tight spacing, small
   type. Nothing here changes main.css or any other page.
   ========================================================================== */

/* ---------- Top: the search bar, then a small title and one line ---------- */
.os-top { padding: 104px 0 0; }
/* The heading above the search bar. Removing the line from build-page.mjs removes this element and nothing else changes. */
.os-lead { margin: 0 0 14px; font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); font-weight: 620; letter-spacing: -0.032em; line-height: 1.15; text-wrap: balance; }
.os-bar { gap: 0; }
.os-top .field__box { height: 48px; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-3); }
.os-top .field__box:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
.os-top .field__box:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 3px rgba(34, 17, 255, .1); }
.os-top .field__ico { left: 14px; width: 17px; height: 17px; }
.os-top .field input { padding: 0 52px 0 44px; font-size: .98rem; letter-spacing: -0.005em; }
.os-kbd {
  position: absolute; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px;
  font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2);
  pointer-events: none; transition: opacity .2s;
}
.field__box:focus-within .os-kbd { opacity: 0; }

.os-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 14px 0 0; }
.os-intro__t { margin: 0; font-size: 1rem; font-weight: 620; letter-spacing: -0.015em; line-height: 1.5; }
.os-intro p { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--ink-3); }

.os-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: .82rem; color: var(--ink-4); }
.os-try button {
  height: 26px; padding: 0 10px; border-radius: 4px; font-size: .82rem; color: var(--ink-2);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .15s, color .15s;
}
.os-try button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ---------- Sections: tight, one small heading each ---------- */
.os { padding: 32px 0 48px; }
.os-block + .os-block, .os-home + .os-all { margin-top: 36px; }
.os-home[hidden] + .os-all { margin-top: 0; }
.os-all { scroll-margin-top: 84px; }
.os-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 12px; }
.os-head h2 { margin: 0; display: inline-flex; align-items: baseline; gap: 8px; font-size: 1.04rem; font-weight: 620; letter-spacing: -0.018em; line-height: 1.3; }
.os-head h2 small { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; color: var(--ink-4); }
.os-head__l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.os-note { font-size: .84rem; color: var(--ink-4); }
.os-more { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 540; color: var(--ink-2); }
.os-more svg { width: 14px; height: 14px; transition: transform .2s var(--ease-out); }
.os-more:hover { color: var(--blue); }
.os-more:hover svg { transform: translateX(2px); }
/* "Browse all" is a button that looks like the links beside it. */
button.os-more { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.os-tools { display: flex; align-items: center; gap: 8px; }

/* ---------- Tool cards: name, one line, three facts ---------- */
.os-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.os-item[hidden] { display: none; }
.os-card {
  display: flex; flex-direction: column; height: 100%; padding: 12px 14px;
  border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow .15s;
}
.os-card:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.os-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.os-card h3 { margin: 0; min-width: 0; max-width: 100%; font-size: .98rem; font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-logo {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px;
  font-size: .86rem; font-weight: 650; color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
}
/* A real logo instead of the letter: a white tile with the picture inside. A nearly white logo gets a dark tile. */
.os-logo--img { color: inherit; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.os-logo--img img { display: block; width: 100%; height: 100%; padding: 3px; object-fit: contain; border-radius: inherit; }
.os-logo--dark { background: var(--ink); box-shadow: none; }
.ost-logo.os-logo--img img { padding: 5px; }
/* A picture that fills its square (an avatar, an app-style icon) goes edge to edge, with a hairline so a white one still has an edge. */
.os-logo--bleed img, .ost-logo.os-logo--bleed img { padding: 0; }
.os-tag {
  display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 7px; border-radius: 4px;
  font-size: .7rem; font-weight: 560; letter-spacing: .01em; color: #0B7A40; background: var(--green-soft);
}
.os-tag svg { width: 10px; height: 10px; }
.os-tested { margin-left: auto; }
/* What kind of thing it is, and a warning when the license is not a standard open-source one. */
.os-tags { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.os-tags .os-tested { margin-left: 0; }
.os-tag--kind { color: var(--ink-3); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.os-tag--warn { color: #7A4F00; background: var(--amber-soft); }
.os-card h3 { flex: 0 1 auto; }
.os-card__desc {
  margin: 8px 0 0; font-size: .86rem; line-height: 1.45; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em;
}
.os-card__alt { margin: 4px 0 0; font-size: .78rem; line-height: 1.4; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-meta { margin: auto 0 0; padding-top: 10px; display: grid; gap: 4px; }
.os-meta div { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.os-meta dt { flex: 1; display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ink-3); }
.os-meta dt svg { width: 13px; height: 13px; }
.os-meta dt::after { content: ""; flex: 1; margin-left: 6px; border-bottom: 1px dotted var(--line-3); transform: translateY(2px); }
.os-meta dd { margin: 0; font-family: var(--f-mono); font-size: .76rem; color: var(--ink); }

/* ---------- Popular alternatives to, and the jobs ---------- */
.os-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.os-product {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; text-align: left;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .15s;
}
.os-product:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.os-product__t { flex: 1; min-width: 0; }
.os-product b { display: block; font-size: .9rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-product small { display: block; font-size: .76rem; color: var(--ink-3); line-height: 1.3; }
.os-product > svg { width: 14px; height: 14px; color: var(--ink-4); transition: transform .2s var(--ease-out), color .2s; }
.os-product:hover > svg { color: var(--blue); transform: translateX(2px); }

.os-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.os-cat {
  display: flex; flex-direction: column; width: 100%; height: 100%; padding: 12px 14px; border-radius: 8px; text-align: left;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .15s;
}
.os-cat:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.os-cat[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.os-cat__name { font-size: .9rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
.os-cat__desc { margin-top: 3px; font-size: .78rem; line-height: 1.4; color: var(--ink-3); }
.os-cat small { margin-top: auto; padding-top: 8px; font-family: var(--f-mono); font-size: .7rem; color: var(--ink-4); }

/* ---------- Sort, clear, buttons, empty, ask, sample note ---------- */
.os-sort { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-4); }
.os-sort select {
  height: 32px; padding: 0 30px 0 10px; border: 0; border-radius: 6px; font: inherit; font-size: .84rem; color: var(--ink); cursor: pointer; appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6977' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.os-sort select:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.os-sort select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.os-clear {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px; font-size: .84rem; color: var(--ink-2);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .15s;
}
.os-clear svg { width: 12px; height: 12px; }
.os-clear:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.os-clear[hidden] { display: none; }

.os-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 14px; border-radius: 6px; white-space: nowrap;
  font-size: .86rem; font-weight: 560; letter-spacing: -0.005em; color: #fff; background: var(--ink); transition: background-color .15s;
}
.os-btn:hover { background: var(--blue); }
.os-btn--ghost { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--line-3); }
.os-btn--ghost:hover { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }

.os-empty { padding: 24px 20px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); }
.os-empty[hidden] { display: none; }
.os-empty h3 { margin: 0; font-size: 1.04rem; font-weight: 620; letter-spacing: -0.018em; line-height: 1.3; }
.os-empty p { margin: 6px 0 14px; max-width: 34rem; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }

.os-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 36px; padding: 14px 16px; border-radius: 8px; background: var(--paper-2); }
.os-ask p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.os-ask b { font-weight: 620; color: var(--ink); }

/* The plain note under the lists about where the numbers come from. */
.os-foot { margin: 16px 0 0; padding: 9px 12px; border-radius: 6px; font-size: .8rem; line-height: 1.55; color: var(--ink-3); background: var(--paper-2); }
.os-foot b { font-weight: 620; color: var(--ink-2); }

/* The "Software" row above the results when the search matches a paid product. */
.os-soft:not([hidden]) { margin-bottom: 28px; }
.os-soft[hidden] { display: none; }
/* The jobs behind "Show all jobs". Without scripts there is no button, so they are simply shown. */
.os-cat-extra[hidden] { display: none; }
html:not(.js) .os-cat-extra[hidden] { display: list-item; }
.os-cats-more { margin: 12px 0 0; }
.os-cats-more .os-btn { height: 32px; }
/* "Show more" under the results. */
.os-more-wrap { display: flex; justify-content: center; margin: 18px 0 0; }
.os-more-wrap[hidden], .os-more-wrap:has(button[hidden]) { display: none; }
.os-products li { min-width: 0; }
.os-product { cursor: pointer; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1040px) {
  .os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-products, .os-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .os-top { padding-top: 84px; }
  .os-top .field__box { height: 44px; }
  .os-top .field input { padding-right: 14px; }
  .os-kbd { display: none; }
  .os-intro__t { width: 100%; }
  .os-grid { grid-template-columns: minmax(0, 1fr); }
  .os-card__desc { min-height: 0; }
  .os-products, .os-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* On a phone the names wrap instead of being cut ("Premiere Pro"), and each row on the home page shows four tools, not six. */
  .os-product b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .os-home .os-grid .os-item:nth-child(n+5) { display: none; }
  .os-head { align-items: flex-end; }
  .os-ask .os-btn { width: 100%; }
}
@media (hover: none) { .os-kbd { display: none; } }

/* ==========================================================================
   A tool's page (prototype). Same rules as the list: flat, small corners, tight.
   Two columns on a wide screen (the tool on the left, its numbers and the
   "Run it on Antideploy" box on the right); one column on a phone, with the
   numbers and the box right after the title so the way to deploy is not buried.
   ========================================================================== */
.ost { padding: 96px 0 48px; }
.ost-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; font-size: .8rem; color: var(--ink-4); }
.ost-crumb a:hover { color: var(--ink); }
.ost-crumb span:not(:last-child) { color: var(--line-3); }
.ost-crumb span:last-child { color: var(--ink-2); }

.ost-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; row-gap: 0; align-items: start;
  grid-template-areas: "head side" "main side";
  /* The side column is taller than the head, and spans both rows: give the spare height to the second row, not the first. */
  grid-template-rows: auto 1fr;
}
.ost-headblock { grid-area: head; }
.ost-main { grid-area: main; min-width: 0; }
.ost-side { grid-area: side; display: grid; gap: 12px; }

.ost-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ost-logo { width: 44px; height: 44px; border-radius: 8px; font-size: 1.15rem; }
.ost-head h1 { margin: 0; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); font-weight: 620; letter-spacing: -0.03em; line-height: 1.15; }
.ost-desc { margin: 12px 0 0; max-width: 44rem; font-size: 1.02rem; line-height: 1.55; color: var(--ink-2); }
.ost-desc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.ost-desc a:hover { text-decoration-color: var(--ink); }
.ost-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; font-size: .84rem; color: var(--ink-3); }
.ost-alt > span { margin-right: 4px; }
.ost-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 4px; font-size: .82rem; color: var(--ink-2);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .15s, color .15s;
}
.ost-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.ost-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.os-btn--block { width: 100%; }
button.os-btn { cursor: pointer; border: 0; font-family: inherit; }

.ost-actions .os-btn svg { width: 13px; height: 13px; margin-left: 7px; }
.ost-actions .os-btn { gap: 0; }
.ost-head .os-tag { height: 22px; font-size: .74rem; }

.ost-body { margin-top: 24px; max-width: 46rem; font-size: .96rem; line-height: 1.7; color: var(--ink-2); }
.ost-body > h2:first-child { margin-top: 0; }
.ost-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.ost-body a:hover { text-decoration-color: var(--ink); }
.ost-body p { margin: 0 0 14px; }
.ost-body h2 { margin: 24px 0 8px; font-size: 1.05rem; font-weight: 620; letter-spacing: -0.018em; line-height: 1.3; color: var(--ink); }
.ost-body ul { margin: 0 0 14px; padding-left: 20px; }
.ost-body li { margin: 4px 0; padding-left: 2px; }
.ost-body li::marker { color: var(--ink-4); }

.ost-note { margin-top: 20px; padding: 12px 14px; border-radius: 8px; font-size: .88rem; line-height: 1.55; color: var(--ink-2); background: var(--paper-2); }
.ost-note b { font-weight: 620; color: var(--ink); }
.ost-note--ok { background: var(--green-soft); color: #0B5C31; }
.ost-note--ok b { color: #0B5C31; }

.ost-meta2 { display: grid; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.ost-meta2 p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: .84rem; color: var(--ink-3); }
.ost-meta2 p > span:first-child { width: 78px; flex: none; }
.ost-meta2--first { margin-top: 24px; padding-top: 0; border-top: 0; }
.ost-plainchip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 4px; font-size: .82rem; color: var(--ink-2); background: var(--paper-2); }
.ost-tags { display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; flex: 1; }
.ost-hash { font-size: .82rem; color: var(--ink-3); }
.ost-hash::before { content: "#"; margin-right: 2px; color: var(--ink-4); }

.ost-card { padding: 14px 16px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); }
.ost-card h2 { margin: 0 0 10px; font-size: .96rem; font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; }
.ost-stars { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ost-stars svg { align-self: center; width: 15px; height: 15px; color: var(--ink-3); }
.ost-stars b { font-size: 1.25rem; font-weight: 620; letter-spacing: -0.02em; }
.ost-stars small { font-size: .8rem; color: var(--ink-4); }
.ost-sub { margin: 8px 0 0; text-align: right; font-size: .72rem; color: var(--ink-4); }
.ost-rows { margin: 10px 0 0; }
.ost-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .84rem; }
.ost-rows dt { margin: 0; color: var(--ink-3); }
.ost-rows dd { margin: 0; font-family: var(--f-mono); font-size: .78rem; color: var(--ink); text-align: right; }

.ost-steps { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 7px; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.ost-steps li { position: relative; padding-left: 26px; counter-increment: s; }
.ost-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px;
  font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
.ost-steps b { font-weight: 600; color: var(--ink); }
.ost-cmd { margin: 0 0 10px; padding: 9px 10px; border-radius: 6px; font-family: var(--f-mono); font-size: .72rem; line-height: 1.5; color: var(--ink-2); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); word-break: break-word; }
.ost-fine { margin: 8px 0 0; font-size: .76rem; line-height: 1.5; color: var(--ink-4); }
.ost-plain { margin: 0 0 12px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.ost-lic p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--ink-3); }

.ost-similar { margin-top: 40px; }

/* ==========================================================================
   "Open source alternatives to X" and the A to Z index of products.
   ========================================================================== */
.osa-head { margin: 0 0 28px; }
.osa-head .ost-alt { margin-top: 14px; }
.osa-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.osa-jump a {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 4px; font-size: .82rem; color: var(--ink-2);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .15s, color .15s;
}
.osa-jump a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.osa-az { scroll-margin-top: 84px; }
.osa-az + .osa-az { margin-top: 26px; }
.osa-names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.osa-names a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.osa-names a:hover b { color: var(--blue); }
.osa-names b { font-weight: 560; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osa-names small { flex: none; font-family: var(--f-mono); font-size: .7rem; color: var(--ink-4); }
.osa-list + .os-block { margin-top: 36px; }

/* The A to Z list of every tool: a plain row each, in two columns. */
.osa-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.osa-tools a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.osa-tools a:hover b { color: var(--blue); }
.osa-tools b { min-width: 0; font-size: .9rem; font-weight: 580; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osa-tools small { font-family: var(--f-mono); font-size: .7rem; color: var(--ink-4); }
.osa-tools span:last-child { grid-column: 2 / 4; min-width: 0; font-size: .8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osa-tools .os-logo { grid-row: 1 / 3; align-self: start; margin-top: 2px; }
/* A small tile for rows like these. */
.os-logo--sm { width: 24px; height: 24px; border-radius: 5px; font-size: .72rem; }
.os-logo--sm.os-logo--img img { padding: 2px; }
.os-logo--sm.os-logo--bleed img { padding: 0; }

@media (max-width: 1040px) {
  .osa-names { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .osa-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ost-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "main"; grid-template-rows: none; row-gap: 20px; }
}
@media (max-width: 680px) {
  .ost { padding-top: 80px; }
  /* The main action takes the whole width; the others sit two to a row. */
  .ost-actions .os-btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .ost-actions .os-btn:first-child { flex-basis: 100%; }
  .osa-names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
}