/* ============================================================
   Extra CSS for the calculators directory page only
   (/calculators/index.html). Loaded after base.css.
   ============================================================ */
.directory-toolbar{
    display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
    margin-bottom:28px;
  }
  .search-box{
    position:relative; flex:1; min-width:240px; max-width:420px;
  }
  .search-box svg{
    position:absolute; left:16px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-tertiary); pointer-events:none;
  }
  .search-box input{
    width:100%; font-family:var(--font-body); font-size:.95rem; padding:13px 15px 13px 44px; border-radius:var(--radius-pill);
    border:1.5px solid var(--border); background:var(--surface); color:var(--text-primary);
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .search-box input:focus{outline:none; border-color:var(--lean); box-shadow:0 0 0 4px var(--lean-soft);}
  .filter-pills{display:flex; flex-wrap:wrap; gap:8px;}
  .filter-pill{
    font-family:var(--font-body); font-size:.84rem; font-weight:600; padding:9px 16px; border-radius:var(--radius-pill);
    border:1.5px solid var(--border); background:var(--surface); color:var(--text-secondary); cursor:pointer;
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .filter-pill:hover{border-color:var(--border-strong); color:var(--text-primary);}
  .filter-pill[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink);}

  .calc-directory-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
  @media (max-width:900px){ .calc-directory-grid{grid-template-columns:repeat(2, 1fr);} }
  @media (max-width:640px){ .calc-directory-grid{grid-template-columns:1fr;} }

  .calc-card{
    display:flex; flex-direction:column; padding:24px; text-decoration:none;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
    transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .calc-card:hover{transform:translateY(-3px); border-color:var(--border-strong); box-shadow:0 20px 44px -26px hsl(var(--shadow-color)/0.4);}
  .calc-card .icon-badge{margin-bottom:14px;}
  .calc-card h3{font-size:1.02rem; margin-bottom:6px;}
  .calc-card p{font-size:.87rem; margin-bottom:14px; flex:1;}
  .calc-card-tag{
    align-self:flex-start; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-tertiary); background:var(--surface-sunken); padding:4px 10px; border-radius:var(--radius-pill);
  }
  .calc-card mark{background:var(--lean-soft); color:var(--lean-dark); border-radius:3px; padding:0 2px;}

  .directory-empty{
    display:none; text-align:center; padding:60px 20px; color:var(--text-tertiary);
  }
  .directory-empty.is-visible{display:block;}
  .directory-empty svg{width:40px; height:40px; opacity:.5; margin-bottom:14px;}

  .directory-count{font-size:.85rem; color:var(--text-tertiary); margin-bottom:18px;}