/* weldsymbols.org — dark technical reference theme
   No frameworks, no webfonts, no runtime dependencies. */

:root {
  --bg:        #0d1218;
  --bg-raised: #141b24;
  --bg-sunken: #0a0e13;
  --bg-hover:  #1b2530;
  --border:    #253141;
  --border-sf: #1b2430;

  --text:      #e7edf5;
  --text-dim:  #9aa7b8;
  --text-faint:#6b7889;

  --accent:      #ff8a3d;
  --accent-dim:  #c9662a;
  --accent-wash: rgba(255, 138, 61, .12);
  --info:        #58a6ff;
  --good:        #56c98a;

  /* consumed by the inlined symbol drawings */
  --svg-line:   #c8d2e2;
  --svg-accent: #ff8a3d;
  --svg-part:   #2b3542;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --w: 1120px;
  --r: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- typography ---------- */

h1, h2, h3, h4 { line-height: 1.25; font-weight: 650; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); margin-top: 2.2rem; }
h3 { font-size: 1.12rem; margin-top: 1.7rem; }
h4 { font-size: 1rem; margin-top: 1.3rem; color: var(--text-dim); }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.3rem; }
li { margin-bottom: .4rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

code, kbd { font-family: var(--mono); font-size: .9em; background: var(--bg-sunken);
            border: 1px solid var(--border-sf); border-radius: 4px; padding: .1em .35em; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

.lede { font-size: 1.12rem; color: var(--text-dim); margin-bottom: 1.5rem; }

/* ---------- layout ---------- */

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 20px; }

main { padding: 2rem 0 4rem; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

.side { position: sticky; top: 84px; display: grid; gap: 1.25rem; }
@media (max-width: 900px) { .side { position: static; } }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(13, 18, 24, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; height: 62px; }

.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.06rem;
         color: var(--text); letter-spacing: -.02em; flex: none; }
.brand:hover { text-decoration: none; color: var(--accent); }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand .b2 { color: var(--accent); }

.nav { display: flex; gap: 1.15rem; margin-left: auto; font-size: .93rem; }
.nav a { color: var(--text-dim); }
.nav a:hover, .nav a[aria-current="true"] { color: var(--accent); text-decoration: none; }

.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--border);
              color: var(--text); border-radius: 6px; padding: .35rem .6rem; font: inherit; cursor: pointer; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav { position: absolute; top: 62px; left: 0; right: 0; flex-direction: column; gap: 0;
         background: var(--bg-raised); border-bottom: 1px solid var(--border); padding: .5rem 20px 1rem; }
  .nav:not(.open) { display: none; }
  .nav a { padding: .6rem 0; border-bottom: 1px solid var(--border-sf); }
}

/* ---------- search ---------- */

.search { position: relative; margin: 0 0 2.5rem; }
.search-home { max-width: 620px; }

.search input {
  width: 100%; padding: .85rem 1rem .85rem 2.6rem;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); font: inherit;
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

.search::before {
  content: ""; position: absolute; left: .95rem; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%); pointer-events: none; opacity: .55;
  background: currentColor; color: var(--text-dim);
  -webkit-mask: var(--mag) center/contain no-repeat; mask: var(--mag) center/contain no-repeat;
  --mag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.8-3.8"/></svg>');
}
.search.has-focus::before { opacity: 0; }

.results {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(0,0,0,.5); max-height: 60vh; overflow-y: auto; padding: .35rem;
}
.results:empty, .results[hidden] { display: none; }
.results a { display: block; padding: .55rem .7rem; border-radius: 6px; color: var(--text); }
.results a:hover, .results a.sel { background: var(--bg-hover); text-decoration: none; }
.results .r-t { font-weight: 600; }
.results .r-t mark { background: var(--accent-wash); color: var(--accent); border-radius: 3px; padding: 0 1px; }
.results .r-k { font-size: .78rem; color: var(--text-faint); text-transform: uppercase;
                letter-spacing: .06em; margin-left: .5rem; }
.results .r-d { font-size: .85rem; color: var(--text-dim); }
.results .r-none { padding: .7rem; color: var(--text-dim); font-size: .9rem; }

/* ---------- cards & grids ---------- */

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.card {
  display: block; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.05rem 1.15rem; color: var(--text);
  transition: border-color .12s, transform .12s;
}
a.card:hover { border-color: var(--accent-dim); text-decoration: none; transform: translateY(-1px); }
.card h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
a.card:hover h3 { color: var(--accent); }
.card p { margin: 0; font-size: .9rem; color: var(--text-dim); line-height: 1.55; }
.card .tag { font-family: var(--mono); font-size: .76rem; color: var(--text-faint); }

.card-sym { text-align: center; padding: .9rem; }
.card-sym svg { width: 100%; height: auto; max-height: 96px; margin-bottom: .4rem; }

/* ---------- tables ---------- */

.tw { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--border);
      border-radius: var(--r); -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--border-sf); }
thead th { background: var(--bg-sunken); color: var(--text-dim); font-weight: 600;
           font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-raised); }
td.num, th.num { font-family: var(--mono); white-space: nowrap; }

/* spec table: label / value pairs */
.specs th { width: 38%; color: var(--text-dim); font-weight: 500; text-transform: none;
            letter-spacing: 0; font-size: .93rem; background: transparent; white-space: normal; }
.specs thead th { background: var(--bg-sunken); }

/* comparison table */
.cmp th:first-child { width: 26%; color: var(--text-dim); font-weight: 500; }
.cmp td { vertical-align: top; }
.cmp .col-a { background: rgba(255,138,61,.05); }
.cmp .col-b { background: rgba(88,166,255,.05); }
.cmp thead .col-a { color: var(--accent); }
.cmp thead .col-b { color: var(--info); }

/* ---------- hero / page head ---------- */

.phead { margin-bottom: 1.75rem; }
.phead .kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em;
                 text-transform: uppercase; color: var(--accent); margin-bottom: .45rem; }
.phead h1 { margin-bottom: .6rem; }

.answer {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--r);
  padding: 1rem 1.15rem; margin: 0 0 1.75rem; font-size: 1.05rem;
}
.answer p:last-child { margin: 0; }

.note { background: var(--accent-wash); border: 1px solid rgba(255,138,61,.28);
        border-radius: var(--r); padding: .85rem 1.05rem; margin: 0 0 1.5rem; font-size: .95rem; }
.note p:last-child { margin: 0; }
.note strong { color: var(--accent); }

/* ---------- chips / pills ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.chip { display: inline-block; font-family: var(--mono); font-size: .8rem;
        background: var(--bg-raised); border: 1px solid var(--border);
        border-radius: 100px; padding: .2rem .65rem; color: var(--text-dim); margin: 0; }
.chip strong { color: var(--text); font-weight: 600; }
.chip-accent { border-color: var(--accent-dim); color: var(--accent); }

/* ---------- breadcrumbs ---------- */

.crumbs { font-size: .85rem; color: var(--text-faint); margin: 0 0 1rem; padding: 0; list-style: none;
          display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--border); }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--accent); }

/* ---------- symbol figures ---------- */

.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.75rem; }
@media (max-width: 620px) { .figs { grid-template-columns: 1fr; } }

figure { margin: 0; background: var(--bg-raised); border: 1px solid var(--border);
         border-radius: var(--r); padding: 1rem; }
figure svg { width: 100%; height: auto; display: block; }
figcaption { margin-top: .6rem; font-size: .85rem; color: var(--text-dim); text-align: center; }

/* ---------- faq ---------- */

.faq { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 1.5rem; }
.faq details { border-bottom: 1px solid var(--border-sf); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: .85rem 1.05rem; font-weight: 600; list-style: none;
               display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 1.2rem; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--bg-raised); color: var(--accent); }
.faq .a { padding: 0 1.05rem 1rem; color: var(--text-dim); }
.faq .a p:last-child { margin: 0; }

/* ---------- side panels ---------- */

.panel { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.1rem; }
.panel h2, .panel h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
                       color: var(--text-faint); margin: 0 0 .7rem; }
.panel ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.panel li { margin-bottom: .45rem; }
.panel li:last-child { margin-bottom: 0; }

.toc a { color: var(--text-dim); }
.toc a:hover { color: var(--accent); }

/* ---------- ads & affiliate ---------- */

/* AdSense units.

   Nothing is drawn until Google fills the slot. An <ins> that has not been
   processed yet, or that Google declined to fill, contains nothing and has no
   reserved height, so it collapses instead of leaving an empty placeholder box.
   Google sets data-ad-status="unfilled" on declined units, which is hidden
   outright; margin is applied only to a filled unit so collapsed slots leave no
   gap between sections either. */

ins.adsbygoogle { display: block; width: 100%; margin: 0; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
ins.adsbygoogle[data-ad-status="filled"] { margin: 2rem 0; }

.aff { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.1rem; }
.aff h3 { margin-top: 0; }
.aff ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.aff li { margin-bottom: .5rem; padding-left: 1rem; position: relative; }
.aff li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent); }
.aff .disc { font-size: .78rem; color: var(--text-faint); margin: .8rem 0 0; }

/* ---------- home ---------- */

.hero { padding: 2.5rem 0 1rem; }
.hero h1 { max-width: 20ch; }
.hero .lede { max-width: 62ch; }

.stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.stats li { margin: 0; }
.stats .n { display: block; font-family: var(--mono); font-size: 1.5rem; color: var(--accent); line-height: 1.1; }
.stats .l { font-size: .82rem; color: var(--text-dim); }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 2.6rem; }
.sec-head h2 { margin: 0 0 1rem; }
.sec-head a { font-size: .88rem; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--border); background: var(--bg-sunken);
               padding: 2.5rem 0 2rem; font-size: .9rem; color: var(--text-dim); margin-top: 3rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.75rem; }
.site-footer h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
                  color: var(--text-faint); margin: 0 0 .6rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .35rem; }
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--accent); }
.foot-bottom { border-top: 1px solid var(--border-sf); margin-top: 2rem; padding-top: 1.25rem;
               display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
               font-size: .84rem; color: var(--text-faint); }

/* ---------- misc ---------- */

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 20px; top: 10px; z-index: 100; background: var(--accent); color: #000;
              padding: .5rem .9rem; border-radius: 6px; }

.muted { color: var(--text-dim); }
.small { font-size: .88rem; }
.mono { font-family: var(--mono); }
.center { text-align: center; }

.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.pill-list li { margin: 0; }
.pill-list a { display: inline-block; font-family: var(--mono); font-size: .88rem;
               background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px;
               padding: .35rem .75rem; color: var(--text); }
.pill-list a:hover { border-color: var(--accent-dim); color: var(--accent); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .side, ins.adsbygoogle, .search { display: none; }
  body { background: #fff; color: #000; }
  .layout { grid-template-columns: 1fr; }
}

/* ---------- inlined symbol drawings ----------
   The standalone .svg files in /symbols/ carry these same rules in their own
   <style> block; the generator strips that block when inlining so the rules
   live here instead. Scoped under svg so nothing leaks into the page. */

svg .ln   { fill: none; stroke: var(--svg-line); stroke-width: 2.4;
            stroke-linecap: round; stroke-linejoin: round; }
svg .head { fill: var(--svg-line); stroke: none; }
svg .sym  { fill: none; stroke: var(--svg-accent); stroke-width: 3;
            stroke-linecap: round; stroke-linejoin: round; }
svg .symf { fill: var(--svg-accent); stroke: none; }
svg .bar  { fill: none; stroke: var(--svg-accent); stroke-width: 5.5; stroke-linecap: round; }
svg .part { fill: var(--svg-part); stroke: var(--svg-line); stroke-width: 2; stroke-linejoin: round; }
svg .weld { fill: var(--svg-accent); stroke: var(--svg-accent); stroke-width: 1.5;
            stroke-linejoin: round; fill-opacity: .85; }
svg .hair { fill: none; stroke: var(--svg-line); stroke-width: 1.2;
            stroke-dasharray: 5 4; opacity: .6; }
svg .lbl  { fill: var(--svg-line); font: 500 12px var(--sans); }