/* Cybersec's quiet stroke icons, adapted to the existing compact personal-site cards.
   Shared tiles also cover the project catalog's dynamically cloned icons. */
:root {
  --cyber-icon-tile: #f3f5f3;
  --cyber-icon-hover: #e9ecea;
  --cyber-icon-ink: #0b0d0c;
  --cyber-icon-muted: #545d59;
}
:root[data-theme="dark"] {
  --cyber-icon-tile: #1b1e20;
  --cyber-icon-hover: #23272a;
  --cyber-icon-ink: #f1f3f2;
  --cyber-icon-muted: #9fa7a3;
}
body .glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body #project-grid .ico,
body #project-stack .mini-icon,
body #project-directory .mini-icon,
body #about .about-icon,
body .now-card .now-sticker {
  background: var(--cyber-icon-tile);
  color: var(--cyber-icon-ink);
  border: 0;
  box-shadow: none;
  transform: none;
  border-radius: 14px;
}
body .reference-projects .ico .glyph { width: 24px; height: 24px; }
body .now-card .now-play { gap: 10px; }
body .now-card .now-sticker { width: 44px; height: 44px; }
body .now-card .now-sticker .glyph { width: 24px; height: 24px; }
body .now-card:hover .now-sticker,
body .top-cta:hover .top-contact-icon,
body .top-cta .top-contact-icon,
body .link-card:hover .about-icon { transform: none; }
body .now-lines .mini-dot { background: var(--cyber-icon-muted); box-shadow: none; }
body .reference-projects .bots .row .mini-icon { border-radius: 11px; }
body .reference-projects .bots .row .glyph { width: 21px; height: 21px; }
body .project-directory .mini-icon { border-radius: 14px; }
body .project-directory .mini-icon .glyph { width: 24px; height: 24px; }
body #about .about-icon { border-radius: 11px; }
body #about .about-icon .glyph { width: 20px; height: 20px; }
body .social-link-label .glyph { color: var(--cyber-icon-ink); }
body .hero-side .top-contact-icon,
body .hero-tools .lang-btn,
body .hero-tools .icon-btn,
body .reference-projects .more,
body .reference-projects .external,
body #about .link-card .topline > .link-arrow,
body .case-dialog .case-close {
  background: var(--cyber-icon-tile);
  color: var(--cyber-icon-muted);
  border: 0;
}
body .hero-tools .icon-btn svg { width: 18px; height: 18px; }
/* Exact 14px expansion path from cybersec's .expand controls. */
body .reference-projects .more::before {
  width: 14px;
  height: 14px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M8.5 1.5h4v4M5.5 12.5h-4v-4M12.5 1.5 8 6M1.5 12.5 6 8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* One diagonal arrow for navigation: the same stroke/caps as reference controls. */
body .reference-projects .external,
body #about .link-card .topline > .link-arrow,
body #contact .socials .link-arrow,
body .project-directory-arrow { position: relative; font-size: 0; }
body .reference-projects .external::before,
body #about .link-arrow::before,
body #contact .link-arrow::before,
body .project-directory-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4 3h7v7' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Exact18px sheet-close path; existing44px hit area remains in refine-dialogs. */
body .case-dialog .case-close::before {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 5 8 8M13 5l-8 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
body #contact .contact-doodle { width: 32px; height: 32px; color: var(--cyber-icon-muted); transform: none; }
@media (hover: hover) and (pointer: fine) {
  body .reference-projects .tap:hover .more,
  body .reference-projects .tap:hover .external {
    background: var(--cyber-icon-hover);
    color: var(--cyber-icon-ink);
    transform: none;
  }
  body .case-dialog .case-close:hover,
  body .hero-tools :is(.icon-btn, .lang-btn):hover,
  body #about .link-card:hover .link-arrow {
    background: var(--cyber-icon-hover);
    color: var(--cyber-icon-ink);
  }
}
@media (max-width: 520px) {
  body .reference-projects .bots .row .mini-icon { border-radius: 9px; }
}
/* Keep compact stack corners consistent despite the older ID-scoped rules. */
body #project-stack .mini-icon { border-radius: 11px; }
@media (max-width: 520px) {
  body #project-stack .mini-icon { border-radius: 9px; }
}
/* CSS masks need explicit system ink when forced colors replace backgrounds. */
@media (forced-colors: active) {
  body .reference-projects .more::before,
  body .reference-projects .external::before,
  body #about .link-arrow::before,
  body #contact .link-arrow::before,
  body .project-directory-arrow::before,
  body .case-dialog .case-close::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
  .case-dialog .case-sheet { outline: 1px solid CanvasText; outline-offset: -1px; }
}

/* Filled Telegram plane shared by the channel and both personal contact icons. */
body .glyph.telegram-glyph { fill: currentColor; stroke: none; }
:root { --telegram-blue: #1767a5; --telegram-soft: #e8f3fc; }
:root[data-theme="dark"] { --telegram-blue: #69baff; --telegram-soft: #162e42; }
body #project-grid .quote-preview .ico,
body .hero-side .top-cta .top-contact-icon {
  background: #2481cc;
  color: #fff;
}
body #contact .social-link-label .telegram-glyph { color: var(--telegram-blue); }
body #project-grid .quote-preview .ico { border-radius: 50%; }
body #project-grid .quote-preview .ico .telegram-glyph { width: 28px; height: 28px; }