/* ============================================
   ORI CLAW — Custom Icon System
   Golden line icons, hand-crafted SVGs
   ============================================ */

.icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-bottom: 1.2rem;
}

/* ── Stories / Book ── */
.icon-stories {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8c0-1.1.9-2 2-2h8a2 2 0 012 2v24a2 2 0 01-2 2H8a2 2 0 01-2-2V8z'/%3E%3Cpath d='M18 10h8a2 2 0 012 2v20a2 2 0 01-2 2h-8' opacity='.5'/%3E%3Cpath d='M28 12h4a2 2 0 012 2v16a2 2 0 01-2 2h-4' opacity='.25'/%3E%3Cline x1='10' y1='12' x2='14' y2='12' opacity='.6'/%3E%3Cline x1='10' y1='16' x2='14' y2='16' opacity='.6'/%3E%3Cline x1='10' y1='20' x2='13' y2='20' opacity='.6'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Weave / DNA ── */
.icon-weave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 4c0 8 16 8 16 16s-16 8-16 16'/%3E%3Cpath d='M28 4c0 8-16 8-16 16s16 8 16 16'/%3E%3Ccircle cx='20' cy='4' r='2' fill='%23d4a853' stroke='none' opacity='.6'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23d4a853' stroke='none' opacity='.6'/%3E%3Ccircle cx='20' cy='36' r='2' fill='%23d4a853' stroke='none' opacity='.6'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Film / Shorts ── */
.icon-film {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='8' width='28' height='24' rx='3'/%3E%3Cpath d='M16 16l10 6-10 6V16z' fill='%23d4a853' fill-opacity='.2'/%3E%3Cline x1='6' y1='14' x2='34' y2='14' opacity='.3'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Lightbulb / Philosophy ── */
.icon-light {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4a10 10 0 00-6 18v4h12v-4A10 10 0 0020 4z'/%3E%3Cline x1='16' y1='30' x2='24' y2='30'/%3E%3Cline x1='17' y1='34' x2='23' y2='34'/%3E%3Cpath d='M20 4v0' opacity='.4'/%3E%3Ccircle cx='20' cy='14' r='2' fill='%23d4a853' fill-opacity='.3' stroke='none'/%3E%3Cline x1='20' y1='16' x2='20' y2='22' opacity='.3'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Hammer / Build ── */
.icon-build {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 6l6 6-4 4 4 4-8 8-4-4-4 4-6-6 4-4-4-4 8-8 4 4z'/%3E%3Cpath d='M16 16l8 8' opacity='.3'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Candle / Readings ── */
.icon-candle {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='15' y='18' width='10' height='16' rx='1'/%3E%3Cline x1='20' y1='18' x2='20' y2='12'/%3E%3Cellipse cx='20' cy='9' rx='3' ry='4' fill='%23d4a853' fill-opacity='.2'/%3E%3Ccircle cx='20' cy='8' r='1.5' fill='%23d4a853' fill-opacity='.5' stroke='none'/%3E%3Cline x1='13' y1='34' x2='27' y2='34'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Identity / Shield ── */
.icon-identity {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4L6 10v10c0 9.4 6 16.3 14 20 8-3.7 14-10.6 14-20V10L20 4z' fill='%23d4a853' fill-opacity='.05'/%3E%3Ccircle cx='20' cy='16' r='4'/%3E%3Cpath d='M13 28c0-4 3.1-7 7-7s7 3 7 7' opacity='.5'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Guide / Compass ── */
.icon-guide {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='14'/%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3Cpolygon points='20,6 22,18 20,20 18,18' fill='%23d4a853' fill-opacity='.4'/%3E%3Cpolygon points='20,34 18,22 20,20 22,22' fill='%23d4a853' fill-opacity='.15'/%3E%3Cline x1='20' y1='2' x2='20' y2='4' opacity='.4'/%3E%3Cline x1='20' y1='36' x2='20' y2='38' opacity='.4'/%3E%3Cline x1='2' y1='20' x2='4' y2='20' opacity='.4'/%3E%3Cline x1='36' y1='20' x2='38' y2='20' opacity='.4'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Shield / Email Shield ── */
.icon-shield {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4L6 10v10c0 9.4 6 16.3 14 20 8-3.7 14-10.6 14-20V10L20 4z' fill='%23d4a853' fill-opacity='.05'/%3E%3Crect x='15' y='16' width='10' height='10' rx='2'/%3E%3Cpath d='M18 16v-2a2 2 0 014 0v2' opacity='.7'/%3E%3Ccircle cx='20' cy='21' r='1.5' fill='%23d4a853' fill-opacity='.4' stroke='none'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Voice / TTS ── */
.icon-voice {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16v8a2 2 0 002 2h2l8 6V10l-8 6h-2a2 2 0 00-2 0z' fill='%23d4a853' fill-opacity='.05'/%3E%3Cpath d='M24 14c2 2 2 10 0 12' opacity='.7'/%3E%3Cpath d='M28 10c4 4 4 16 0 20' opacity='.4'/%3E%3Cpath d='M32 6c6 6 6 22 0 28' opacity='.2'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Brain / Deep Thought ── */
.icon-brain {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 36V20'/%3E%3Cpath d='M20 20c0-8-8-12-8-8s4 4 0 8-6 6-2 10' fill='%23d4a853' fill-opacity='.05'/%3E%3Cpath d='M20 20c0-8 8-12 8-8s-4 4 0 8 6 6 2 10' fill='%23d4a853' fill-opacity='.05'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%23d4a853' fill-opacity='.3' stroke='none'/%3E%3Ccircle cx='26' cy='14' r='2' fill='%23d4a853' fill-opacity='.3' stroke='none'/%3E%3Ccircle cx='20' cy='8' r='2' fill='%23d4a853' fill-opacity='.2' stroke='none'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Search / Memory Search ── */
.icon-search {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='17' r='10'/%3E%3Cline x1='25' y1='25' x2='34' y2='34'/%3E%3Cpath d='M17 10l1 3 3-1' opacity='.5'/%3E%3Ccircle cx='22' cy='10' r='1' fill='%23d4a853' fill-opacity='.4' stroke='none'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Mail / Gmail ── */
.icon-mail {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='32' height='20' rx='3' fill='%23d4a853' fill-opacity='.05'/%3E%3Cpath d='M4 13l16 10 16-10'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Loop / SiteLoop ── */
.icon-loop {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 14A10 10 0 0010 14' /%3E%3Cpath d='M10 26A10 10 0 0030 26' /%3E%3Cpath d='M30 14l-4-3'/%3E%3Cpath d='M30 14l-4 3'/%3E%3Cpath d='M10 26l4-3'/%3E%3Cpath d='M10 26l4 3'/%3E%3C/svg%3E") no-repeat center;
}

/* ── PDF / Markdown to PDF ── */
.icon-pdf {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4h14l8 8v24a2 2 0 01-2 2H10a2 2 0 01-2-2V6a2 2 0 012-2z' fill='%23d4a853' fill-opacity='.05'/%3E%3Cpath d='M24 4v8h8'/%3E%3Cpath d='M20 22v8' opacity='.6'/%3E%3Cpath d='M17 27l3 3 3-3' opacity='.6'/%3E%3Cline x1='14' y1='16' x2='22' y2='16' opacity='.3'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Scan / Secret Sweep ── */
.icon-scan {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='14'/%3E%3Ccircle cx='20' cy='20' r='8' opacity='.4'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23d4a853' fill-opacity='.4' stroke='none'/%3E%3Cline x1='20' y1='20' x2='20' y2='6'/%3E%3Cline x1='20' y1='20' x2='30' y2='12' opacity='.5'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Link / Add Session ── */
.icon-link {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 23l6-6'/%3E%3Cpath d='M22 27l3-3a5 5 0 0 0-7.07-7.07l-3 3'/%3E%3Cpath d='M18 13l-3 3a5 5 0 0 0 7.07 7.07l3-3'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Calendar / Google Calendar ── */
.icon-calendar {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='8' width='28' height='26' rx='3' fill='%23d4a853' fill-opacity='.05'/%3E%3Cline x1='6' y1='16' x2='34' y2='16'/%3E%3Cline x1='14' y1='4' x2='14' y2='12'/%3E%3Cline x1='26' y1='4' x2='26' y2='12'/%3E%3Cline x1='14' y1='16' x2='14' y2='34' opacity='.15'/%3E%3Cline x1='26' y1='16' x2='26' y2='34' opacity='.15'/%3E%3Cline x1='6' y1='24' x2='34' y2='24' opacity='.15'/%3E%3Ccircle cx='20' cy='26' r='2' fill='%23d4a853' fill-opacity='.4' stroke='none'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Large icons (skill detail pages) ── */
.icon-lg {
  width: 64px;
  height: 64px;
}

/* ── Watchdog / Chrome Watchdog ── */
.icon-watchdog {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='10' fill='%23d4a853' fill-opacity='.05'/%3E%3Ccircle cx='20' cy='20' r='4' /%3E%3Cline x1='20' y1='4' x2='20' y2='12' /%3E%3Cline x1='20' y1='28' x2='20' y2='36' /%3E%3Cline x1='4' y1='20' x2='12' y2='20' /%3E%3Cline x1='28' y1='20' x2='36' y2='20' /%3E%3Cpath d='M15 15l-3-3' opacity='.4'/%3E%3Cpath d='M25 15l3-3' opacity='.4'/%3E%3Cpath d='M15 25l-3 3' opacity='.4'/%3E%3Cpath d='M25 25l3 3' opacity='.4'/%3E%3C/svg%3E") no-repeat center;
}

/* ── DNA / Darwinian Evolver ── */
.icon-dna {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 4c0 8 16 8 16 16s-16 8-16 16'/%3E%3Cpath d='M28 4c0 8-16 8-16 16s16 8 16 16'/%3E%3Cline x1='13' y1='10' x2='27' y2='10' opacity='.4'/%3E%3Cline x1='12' y1='16' x2='28' y2='16' opacity='.4'/%3E%3Cline x1='12' y1='24' x2='28' y2='24' opacity='.4'/%3E%3Cline x1='13' y1='30' x2='27' y2='30' opacity='.4'/%3E%3C/svg%3E") no-repeat center;
}

/* ── Gate / Cron Gate ── */
.icon-gate {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6v28' /%3E%3Cpath d='M32 6v28' /%3E%3Cpath d='M8 6h24' /%3E%3Cpath d='M8 20h10' opacity='.4' /%3E%3Cpath d='M22 20h10' opacity='.4' /%3E%3Crect x='16' y='14' width='8' height='12' rx='1.5' fill='%23d4a853' fill-opacity='.08' /%3E%3Cpath d='M20 17v6' /%3E%3Cpath d='M18 20h4' /%3E%3Ccircle cx='20' cy='30' r='2' fill='%23d4a853' fill-opacity='.3' stroke='none' /%3E%3Cpath d='M14 34h12' opacity='.3' /%3E%3C/svg%3E") no-repeat center;
}

/* ── Mission Control / Dashboard ── */
.icon-dashboard {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23d4a853' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='34' height='26' rx='3' fill='%23d4a853' fill-opacity='.05'/%3E%3Cline x1='3' y1='10' x2='37' y2='10'/%3E%3Ccircle cx='6.5' cy='7' r='1' fill='%23d4a853' stroke='none'/%3E%3Ccircle cx='10' cy='7' r='1' fill='%23d4a853' stroke='none'/%3E%3Ccircle cx='13.5' cy='7' r='1' fill='%23d4a853' stroke='none'/%3E%3Crect x='6' y='13' width='12' height='6' rx='1' fill='%23d4a853' fill-opacity='.08'/%3E%3Crect x='22' y='13' width='12' height='6' rx='1' fill='%23d4a853' fill-opacity='.08'/%3E%3Crect x='6' y='22' width='28' height='4' rx='1' fill='%23d4a853' fill-opacity='.08'/%3E%3Cline x1='14' y1='34' x2='26' y2='34'/%3E%3Cline x1='17' y1='30' x2='17' y2='34'/%3E%3Cline x1='23' y1='30' x2='23' y2='34'/%3E%3C/svg%3E") no-repeat center;
}