/* Accepted v0.5 cards within the existing continuous catalogue. */
.catalog-panel {
  container-type: inline-size;
  min-height: calc(100vh - 122px);
  padding: 24px clamp(22px, 3.25vw, 53px) 32px;
  background: var(--paper);
}
.catalog-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 0 2px 18px; border-bottom: 1px solid var(--ink); }
.catalog-intro h1 { margin:0; font:700 14px/1.4 var(--label-font); letter-spacing:.025em; text-transform:uppercase; text-wrap:balance; }
.catalog-subhead { max-width: 610px; margin-top: 7px; color: var(--body); font-size: 14px; line-height: 1.45; }
.catalog-tools { display: flex; align-items: center; gap: 10px; }
.searchbox { display: flex; align-items: center; gap: 11px; width: min(360px, 32vw); min-width: 195px; min-height: 46px; padding: 13px 14px; border: 1px solid var(--ink); border-radius:var(--radius); background: var(--paper); }
.searchbox:focus-within { outline: 3px solid #2b617f; outline-offset: 3px; }
.searchbox svg { width: 17px; height: 17px; }
.searchbox input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 13px; }
.searchbox input:focus-visible { outline: none; }
.catalog-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 14px 2px 16px; }
.filter { min-height: 39px; padding: 9px 13px; border: 1px solid #bcc3c7; border-radius:var(--radius); background: transparent; font: 11px/1.2 var(--label-font); text-transform: uppercase; }
.filter[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.filter:hover { background: var(--accent); color: var(--ink); border-color: var(--ink); }
.catalog-count { margin-left: auto; color: var(--body); font: 11px/1.5 var(--label-font); }
#catalog-results { min-width: 0; margin-top: 10px; }
.catalog-grid, .group-tools { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; }
.toolcard { display: flex; flex-direction: column; position: relative; min-width: 0; min-height: 0; aspect-ratio: 9 / 16; container: toolcard / inline-size; overflow: hidden; border: 1px solid #9aa0a3; border-radius:var(--radius); background: var(--paper); color: var(--ink); transition: transform 180ms var(--ease); }
.toolcard.tone-research { background: var(--lightgray); }
.toolcard.tone-thinking { background: var(--blue); }
.toolcard.tone-modelling { --card-copy: #3c4043; background: var(--medium); }
.toolcard.tone-projects { background: var(--accent); }
.toolcard.tone-creative { background: var(--almost); }
.cardlink { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 21px 19px 20px; border: 0; border-radius:var(--radius) var(--radius) 0 0; background: none; color: inherit; text-align: left; }
.cardlink:focus-visible { outline-offset: -4px; }
.cardtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; color: #353a3d; font: 9px/1.4 var(--label-font); text-transform: uppercase; }
.cardtop > span:last-child { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cardtop .chevron { width: 14px; height: 14px; }
.cardnum { font-size: 12px; }
.cardtitle { display: block; max-width: 100%; margin: 27px 0 13px; font-size: clamp(23px, 2vw, 30px); font-weight: 700; line-height: 1.08; letter-spacing: -.052em; text-transform: lowercase; overflow-wrap: break-word; hyphens: auto; }
.card-identity { display: block; margin-bottom: 10px; color: var(--card-copy, #454b4e); font: 11px/1.4 var(--label-font); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: break-word; }
.cardsub { display: block; color: #353b3d; font-size: 13px; line-height: 1.4; }
.card-description { display: block; margin-top: auto; padding-top: 5px; color: var(--card-copy, #454a4d); font-size: 12px; line-height: 1.48; }
.cardbottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 43px; margin: 0 19px 14px; padding-top: 10px; border-top: 1px solid #777e81; }
.cardbottom .format { min-width: 0; color: var(--card-copy, #444a4d); font: 9px/1.5 var(--label-font); text-transform: uppercase; overflow-wrap: break-word; }
.star { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--ink); border-radius:var(--radius); background: #fffc; color: var(--ink); font: 18px/1 Arial, Helvetica, sans-serif; }
.star.saved, .star[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.star svg { width: 17px; height: 17px; }
.card-line { display: none; }
.empty-result { grid-column: 1 / -1; padding: 58px 30px; border: 1px dashed var(--line); border-radius:var(--radius); text-align: center; line-height: 1.6; }
.empty-result h2, .empty-result h3 { margin-bottom: 9px; font-size: 24px; }
.empty-result p { color: var(--body); }
.library-grid { container-type: inline-size; }
/* A card needs at least 240px for the author's saved type and rhythm. */
@container (min-width: 492px) {
  .catalog-grid, .group-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 744px) {
  .catalog-grid, .group-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 996px) {
  .catalog-grid, .group-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (hover: hover) {
  .toolcard:hover { transform: translateY(-3px); }
  .cardlink:hover .chevron { transform: translateX(2px); }
}
@media (max-width: 760px) {
  .catalog-panel { padding: 20px 18px 28px; }
  .filter { min-height: 44px; }
  .star { width: 44px; height: 44px; }
}
@media (max-width: 650px) {
  .catalog-intro { display: block; }
  .catalog-tools { margin-top: 12px; }
  .searchbox { width: 100%; max-width: none; }
  .catalog-count { width: 100%; margin: 6px 0 0; }
}
@media (max-width: 470px) {
  .catalog-grid, .group-tools { grid-template-columns: minmax(0, 1fr); }
  .empty-result { padding: 36px 20px; }
}

/* 9:16 concept: user task, distinctive method, input and practical result. */
.catalog-grid .toolcard,.group-tools .toolcard{aspect-ratio:9/16;min-height:0;height:auto;overflow:hidden}
.catalog-grid .cardlink,.group-tools .cardlink{padding:20px 18px 10px;min-height:0;overflow:hidden}
.catalog-grid .cardtop,.group-tools .cardtop{min-height:22px;align-items:flex-start;font:10px/1.4 var(--label-font)}
.catalog-grid .cardtop .card-name,.group-tools .cardtop .card-name{display:inline-flex;align-items:flex-start;justify-content:flex-end;min-width:0;gap:4px;font:10px/1.4 var(--label-font);text-align:right;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere}
.catalog-grid .cardtop .card-name .chevron,.group-tools .cardtop .card-name .chevron{flex:none;margin-top:1px;width:12px;height:12px}
.catalog-grid .cardtitle,.group-tools .cardtitle{font-size:clamp(23px,2vw,30px);line-height:1.05;letter-spacing:-.052em;margin:25px 0 12px;hyphens:auto;overflow-wrap:break-word}
.catalog-grid .card-how,.group-tools .card-how{display:block;max-width:100%;font:13px/1.42 Arial,Helvetica,sans-serif;letter-spacing:-.01em;color:#2b3033}
.catalog-grid .card-meta-block,.group-tools .card-meta-block{display:block;margin-top:16px}
.catalog-grid .card-meta-block.first,.group-tools .card-meta-block.first{margin-top:auto;padding-top:14px}
.catalog-grid .card-meta-label,.group-tools .card-meta-label{display:block;font:10px/1.45 var(--label-font);color:#42484d;text-transform:uppercase;letter-spacing:.025em;margin-bottom:5px}
.catalog-grid .card-meta-copy,.group-tools .card-meta-copy{display:block;font:12.5px/1.36 Arial,Helvetica,sans-serif;letter-spacing:-.015em;overflow-wrap:break-word}
.catalog-grid .card-result,.group-tools .card-result{font-weight:600;font-size:13.2px;line-height:1.36}
.catalog-grid .cardbottom,.group-tools .cardbottom{margin:0 18px 13px;padding:8px 0 0;min-height:40px}
.catalog-grid .cardbottom .card-cta,.group-tools .cardbottom .card-cta{display:inline-flex;gap:7px;align-items:center;font:9px/1.4 var(--label-font);text-transform:uppercase;letter-spacing:.03em}
.catalog-grid .cardbottom .card-cta .chevron,.group-tools .cardbottom .card-cta .chevron{width:13px;height:13px}
.catalog-grid .star,.group-tools .star{width:30px;height:30px}
@container toolcard (max-width:719px) {
 .catalog-grid .cardlink,.group-tools .cardlink{padding:17px 15px 9px}
 .catalog-grid .cardbottom,.group-tools .cardbottom{margin:0 15px 12px}
 .catalog-grid .cardtitle,.group-tools .cardtitle{font-size:clamp(21px,3.2vw,29px);margin:19px 0 11px}
 .catalog-grid .card-how,.group-tools .card-how{font-size:12px;line-height:1.35}
 .catalog-grid .card-meta-block,.group-tools .card-meta-block{margin-top:12px}
 .catalog-grid .card-meta-block.first,.group-tools .card-meta-block.first{padding-top:9px}
 .catalog-grid .card-meta-copy,.group-tools .card-meta-copy{font-size:11.6px;line-height:1.3}
 .catalog-grid .card-result,.group-tools .card-result{font-size:12.4px}
}
@container toolcard (max-width:464px) {
 .catalog-grid .cardlink,.group-tools .cardlink{padding:26px 26px 16px}
 .catalog-grid .cardbottom,.group-tools .cardbottom{margin:0 26px 23px}
 .catalog-grid .cardtitle,.group-tools .cardtitle{font-size:clamp(29px,8vw,37px);margin:40px 0 18px}
 .catalog-grid .card-how,.group-tools .card-how{font-size:16px;line-height:1.47}
 .catalog-grid .card-meta-block,.group-tools .card-meta-block{margin-top:25px}
 .catalog-grid .card-meta-label,.group-tools .card-meta-label{font-size:11px;margin-bottom:8px}
 .catalog-grid .card-meta-copy,.group-tools .card-meta-copy{font-size:15px;line-height:1.47}
 .catalog-grid .card-result,.group-tools .card-result{font-size:17px;line-height:1.45}
 .catalog-grid .cardbottom .card-cta,.group-tools .cardbottom .card-cta{font-size:11px}
}

/* Accepted v0.5 hierarchy; values follow the preserved visual reference. */
.catalog-grid .toolcard,.group-tools .toolcard{
 aspect-ratio:9/16;min-height:0;container:toolcard / inline-size;overflow:hidden;
}
.catalog-grid .cardlink,.group-tools .cardlink{
 display:flex;flex-direction:column;flex:1;min-height:0;
 padding:clamp(16px,6.9cqw,25px) clamp(14px,6.5cqw,23px) clamp(7px,2.5cqw,11px);
}
.catalog-grid .cardtop,.group-tools .cardtop{min-height:20px;font-size:clamp(9px,3.8cqw,13px);line-height:1.35}
.catalog-grid .cardnum,.group-tools .cardnum{font-size:clamp(11px,4.4cqw,15px)}
.catalog-grid .cardtop .card-name,.group-tools .cardtop .card-name{font-size:clamp(9px,3.6cqw,12px);text-align:right}
.catalog-grid .cardtitle,.group-tools .cardtitle{
 display:block; flex:none;max-width:100%;overflow-wrap:normal;hyphens:none;
 text-transform:none; /* User decision: human-task titles begin with a capital letter. */
 font-size:clamp(24px,10.5cqw,41px);line-height:1.035;letter-spacing:-.056em;
 margin:clamp(17px,6.4cqw,30px) 0 clamp(7px,3cqw,12px);text-wrap:pretty;
}
.catalog-grid .card-how,.group-tools .card-how{
 display:block;flex:none;max-width:100%;font-size:clamp(12.5px,5.25cqw,18px);line-height:1.36;
 letter-spacing:-.017em;color:#2c3033;
}
.catalog-grid .card-workzone,.group-tools .card-workzone{
 flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
 margin:clamp(9px,3.7cqw,17px) 0 clamp(7px,2.5cqw,13px);
}
.catalog-grid .card-worklabel,.group-tools .card-worklabel{
 display:block;margin-bottom:clamp(6px,2.4cqw,10px);
 font:clamp(9px,3.7cqw,12px)/1.35 var(--label-font);letter-spacing:.025em;color:#444a4e;
}
.catalog-grid .card-featurelist,.group-tools .card-featurelist{
 display:grid;gap:clamp(6px,2.5cqw,11px);border-left:2px solid #20212499;
 padding-left:clamp(10px,3.7cqw,15px);
}
.catalog-grid .card-feature,.group-tools .card-feature{
 display:block;font-size:clamp(12.2px,4.9cqw,17px);font-weight:600;
 line-height:1.27;letter-spacing:-.025em;
}
.catalog-grid .card-bottom-info,.group-tools .card-bottom-info{display:grid;gap:clamp(10px,3.7cqw,19px);flex:none}
.catalog-grid .card-meta-block,.group-tools .card-meta-block{display:block;margin:0;min-width:0}
.catalog-grid .card-meta-label,.group-tools .card-meta-label{
 display:block;font:clamp(9px,3.7cqw,12px)/1.38 var(--label-font);color:#444a4e;
 text-transform:uppercase;letter-spacing:.024em;margin:0 0 clamp(4px,1.5cqw,7px);
}
.catalog-grid .card-meta-copy,.group-tools .card-meta-copy{
 display:block;font-size:clamp(12.1px,4.85cqw,17px);line-height:1.3;
 letter-spacing:-.025em;overflow-wrap:break-word;
}
.catalog-grid .card-result,.group-tools .card-result{
 font-size:clamp(14px,5.6cqw,20px);line-height:1.2;letter-spacing:-.03em;font-weight:700;
}
.catalog-grid .cardbottom,.group-tools .cardbottom{
 flex:none;margin:0 clamp(14px,6.5cqw,23px) clamp(9px,3.7cqw,16px);
 padding:clamp(7px,2.6cqw,11px) 0 0;min-height:clamp(33px,12cqw,45px);
}
.catalog-grid .cardbottom .card-cta,.group-tools .cardbottom .card-cta{
 font-size:clamp(10px,4.2cqw,13px);font-weight:500;white-space:nowrap;
}
.catalog-grid .star,.group-tools .star{width:clamp(31px,12.5cqw,42px);height:clamp(31px,12.5cqw,42px)}
@container toolcard (max-width:249px){
 .catalog-grid .cardtitle,.group-tools .cardtitle{font-size:clamp(22px,10.1cqw,27px);margin-top:14px}
 .catalog-grid .card-how,.group-tools .card-how{font-size:12px;line-height:1.31}
 .catalog-grid .card-feature,.group-tools .card-feature{font-size:12px;line-height:1.23}
 .catalog-grid .card-meta-copy,.group-tools .card-meta-copy{font-size:11.9px;line-height:1.25}
 .catalog-grid .card-result,.group-tools .card-result{font-size:13.6px;line-height:1.18}
 .catalog-grid .card-bottom-info,.group-tools .card-bottom-info{gap:8px}
}


/* Scalable story/advertorial 9:16 rendering of the SAME card data.
   Four-column cards remain compact. Larger cards reveal a concrete example. */
.catalog-grid .card-example,.group-tools .card-example{display:none}
.catalog-grid .card-workmain,.group-tools .card-workmain{display:block;flex:none}
@container toolcard (min-width:490px){
 .catalog-grid .cardlink,.group-tools .cardlink{padding:clamp(31px,6.2cqw,46px) clamp(30px,6.2cqw,46px) 17px}
 .catalog-grid .cardtop,.group-tools .cardtop{min-height:29px;font-size:clamp(13px,2.5cqw,17px)}
 .catalog-grid .cardnum,.group-tools .cardnum{font-size:clamp(15px,2.6cqw,19px)}
 .catalog-grid .cardtop .card-name,.group-tools .cardtop .card-name{font-size:clamp(13px,2.5cqw,17px)}
 .catalog-grid .cardtop .chevron,.group-tools .cardtop .chevron{width:20px;height:20px}
 .catalog-grid .cardtitle,.group-tools .cardtitle{
    font-size:clamp(42px,9cqw,63px);line-height:1.02;letter-spacing:-.06em;
    margin:clamp(36px,7.5cqw,58px) 0 18px;max-width:100%;
 }
 .catalog-grid .card-how,.group-tools .card-how{font-size:clamp(20px,3.8cqw,26px);line-height:1.38;letter-spacing:-.025em}
 .catalog-grid .card-workzone,.group-tools .card-workzone{margin:20px 0 20px;justify-content:space-evenly;gap:25px}
 .catalog-grid .card-worklabel,.group-tools .card-worklabel{font-size:clamp(13px,2.4cqw,16px);margin-bottom:13px}
 .catalog-grid .card-featurelist,.group-tools .card-featurelist{padding-left:24px;gap:15px;border-left-width:3px}
 .catalog-grid .card-feature,.group-tools .card-feature{font-size:clamp(19px,3.6cqw,24px);line-height:1.31}
 .catalog-grid .card-example,.group-tools .card-example{
     display:block;background:rgba(255,255,255,.25);
     border-radius:var(--radius);padding:clamp(17px,3.1cqw,24px);
 }
 .catalog-grid .card-example-label,.group-tools .card-example-label{
     display:block;font:clamp(12px,2.3cqw,15px)/1.4 var(--label-font);
     margin-bottom:10px;color:#41464a
 }
 .catalog-grid .card-example-copy,.group-tools .card-example-copy{
     display:block;font-size:clamp(18px,3.4cqw,23px);
     line-height:1.38;letter-spacing:-.025em
 }
 .catalog-grid .card-bottom-info,.group-tools .card-bottom-info{gap:23px}
 .catalog-grid .card-meta-label,.group-tools .card-meta-label{font-size:clamp(13px,2.35cqw,16px);margin-bottom:8px}
 .catalog-grid .card-meta-copy,.group-tools .card-meta-copy{font-size:clamp(19px,3.5cqw,24px);line-height:1.33}
 .catalog-grid .card-result,.group-tools .card-result{font-size:clamp(24px,4.1cqw,30px);line-height:1.17}
 .catalog-grid .cardbottom,.group-tools .cardbottom{margin:0 clamp(30px,6.2cqw,46px) clamp(25px,4.4cqw,34px);min-height:57px;padding-top:15px}
 .catalog-grid .cardbottom .card-cta,.group-tools .cardbottom .card-cta{font-size:clamp(15px,2.6cqw,19px)}
 .catalog-grid .cardbottom .card-cta .chevron,.group-tools .cardbottom .card-cta .chevron{width:19px;height:19px}
 .catalog-grid .star,.group-tools .star{width:48px;height:48px}
}


/* Author corrections, 15.10.2026. Keep the v0.5 geometry and exact copy. */
.catalog-grid .cardtitle, .group-tools .cardtitle { position:relative; }
.catalog-grid .cardtitle::after, .group-tools .cardtitle::after {
  content:""; position:absolute; left:0; right:0;
  bottom:calc(-.5 * clamp(7px,3cqw,12px)); border-bottom:1px solid #777e81;
}
.catalog-grid .card-worklabel, .group-tools .card-worklabel,
.catalog-grid .card-meta-label, .group-tools .card-meta-label,
.catalog-grid .card-example-label, .group-tools .card-example-label { font-weight:700; color:var(--ink); }
.catalog-grid .card-feature, .group-tools .card-feature,
.catalog-grid .card-result, .group-tools .card-result { font-weight:400; }
/* Shrink the visible control by 30%, retaining its comfortable hit area. */
.catalog-grid .star, .group-tools .star {
  position:relative; isolation:isolate; border:0; border-radius:var(--radius);
  background:transparent; font-size:12.6px;
}
.catalog-grid .star::before, .group-tools .star::before {
  content:""; position:absolute; inset:15%; z-index:-1;
  border:1px solid var(--ink); border-radius:var(--radius); background:#fffc;
}
.catalog-grid .star.saved::before, .group-tools .star.saved::before { background:var(--ink); }

/* Author's saved card 1.1, 15.10.2026: share roles, not positional selectors.
   The original manual edits remain intact and retain their precedence. */
.catalog-grid .card-how, .group-tools .card-how {
  font-size:14.2px; line-height:16px; margin-top:3px;
}
.catalog-grid .card-worklabel, .group-tools .card-worklabel,
.catalog-grid .card-meta-label, .group-tools .card-meta-label { font-size:11px; }
.catalog-grid .card-featurelist, .group-tools .card-featurelist { line-height:23px; }
.catalog-grid .card-feature, .group-tools .card-feature { line-height:13px; }
.catalog-grid .card-use .card-meta-label, .group-tools .card-use .card-meta-label { margin-bottom:6px; }
.catalog-grid .card-use .card-meta-copy, .group-tools .card-use .card-meta-copy {
  line-height:13px; margin-bottom:5px;
}
.catalog-grid .card-result, .group-tools .card-result { line-height:16px; margin-bottom:10px; }
/* Longer copy needs the existing compact-card adaptation; keep 1.1 untouched. */
@container toolcard (max-width:249px) {
  .toolcard:not([data-tool-id="razvedka"]) .card-how { font-size:12.5px; line-height:14px; }
  .toolcard:not([data-tool-id="razvedka"]) .card-workzone { margin:7px 0 5px; }
  .toolcard:not([data-tool-id="razvedka"]) .card-result { margin-bottom:8px; }
}
/* Keep the compact rhythm proportional in the enlarged presentation. */
@container toolcard (min-width:490px) {
  .catalog-grid .card-how, .group-tools .card-how {
    font-size:clamp(20px,3.8cqw,26px); line-height:1.13; margin-top:5px;
  }
  .catalog-grid .card-worklabel, .group-tools .card-worklabel,
  .catalog-grid .card-meta-label, .group-tools .card-meta-label { font-size:clamp(13px,2.4cqw,16px); }
  .catalog-grid .card-feature, .group-tools .card-feature,
  .catalog-grid .card-use .card-meta-copy, .group-tools .card-use .card-meta-copy { line-height:1.1; }
  .catalog-grid .card-use .card-meta-label, .group-tools .card-use .card-meta-label { margin-bottom:9px; }
  .catalog-grid .card-use .card-meta-copy, .group-tools .card-use .card-meta-copy { margin-bottom:8px; }
  .catalog-grid .card-result, .group-tools .card-result { line-height:1.1; margin-bottom:15px; }
}

/* Card template, 07.11.2026: shared type rhythm and an evenly inset action row.
   Scope through the card so the older navigation layer cannot split these roles. */
.catalog-grid .toolcard, .group-tools .toolcard {
  --card-label-size: 14.666667px;
  --card-copy-leading: 17.333333px; /* saved В РАБОТЕ: 13px × 4/3 */
  --card-control-size: 40px;
}
.catalog-grid .toolcard .cardtop, .group-tools .toolcard .cardtop {
  align-items: baseline;
  font-size: clamp(9px, 3.6cqw, 12px);
  line-height: 1.35;
}
.catalog-grid .toolcard .cardnum, .group-tools .toolcard .cardnum,
.catalog-grid .toolcard .card-name, .group-tools .toolcard .card-name {
  font-size: inherit;
  line-height: inherit;
}
.catalog-grid .toolcard .card-name, .group-tools .toolcard .card-name {
  align-items: center;
}
.catalog-grid .toolcard .cardtitle, .group-tools .toolcard .cardtitle {
  /* Reduce the visible interline space by about a third, without glyph overlap. */
  font-size: clamp(24px, 10.5cqw, 41px);
  text-wrap: balance;
  --card-title-leading: .93em;
  line-height: var(--card-title-leading);
  min-height: calc(2 * var(--card-title-leading));
  margin-bottom: calc(var(--card-title-leading) + 7px);
}
.catalog-grid .toolcard .cardtitle::after, .group-tools .toolcard .cardtitle::after {
  /* Include the one-pixel rule, so its top is exactly one line below the title. */
  bottom: calc(-1 * var(--card-title-leading) - 1px);
}
.catalog-grid .toolcard .card-worklabel, .group-tools .toolcard .card-worklabel,
.catalog-grid .toolcard .card-meta-label, .group-tools .toolcard .card-meta-label,
.catalog-grid .toolcard .card-example-label, .group-tools .toolcard .card-example-label {
  font-size: var(--card-label-size);
  line-height: 1.35;
}
.catalog-grid .toolcard .card-how, .group-tools .toolcard .card-how,
.catalog-grid .toolcard .card-feature, .group-tools .toolcard .card-feature,
.catalog-grid .toolcard .card-meta-copy, .group-tools .toolcard .card-meta-copy,
.catalog-grid .toolcard .card-example-copy, .group-tools .toolcard .card-example-copy {
  line-height: var(--card-copy-leading) !important;
}
.catalog-grid .toolcard .cardbottom, .group-tools .toolcard .cardbottom {
  margin: 0;
  padding: var(--card-pad-inline);
  gap: 10px;
}
.catalog-grid .toolcard .card-cta, .group-tools .toolcard .card-cta {
  flex: 1;
  min-width: 0;
  height: var(--card-control-size);
  min-height: var(--card-control-size);
}
.catalog-grid .toolcard .star, .group-tools .toolcard .star {
  width: var(--card-control-size);
  height: var(--card-control-size);
  font-size: 18px;
}
.catalog-grid .toolcard .star::before, .group-tools .toolcard .star::before {
  inset: 0;
}
/* The yellow surface needs the inverse action state to stay visible. */
.toolcard.tone-projects .card-cta:focus-visible,
.toolcard.tone-projects .star:focus-visible::before {
  background: var(--ink);
  color: var(--accent);
}
.toolcard.tone-projects .star:focus-visible { color: var(--accent); }
@media (hover: hover) {
  .toolcard.tone-projects .card-cta:hover,
  .toolcard.tone-projects .star:hover::before {
    background: var(--ink);
    color: var(--accent);
  }
  .toolcard.tone-projects .star:hover { color: var(--accent); }
}

/* Both filter rows at two thirds, retaining the shared one-pixel outline. */
.catalog-panel .catalog-controls { gap: 4.666667px; }
.catalog-controls .filter {
  min-height: 28px;
  padding: 6px 11px;
  font-size: 7.333333px;
}