/* Forge & Form base: reset, top bar, buttons, toast. Shared by every page. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; color-scheme: dark; }
button, select, input { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--amber); color: var(--amber-ink); }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: 30px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 #000; }
.topbar::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 168px; height: 2px; background: linear-gradient(90deg, var(--amber), var(--copper) 70%, transparent); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.mark-anvil { fill: var(--amber); } .mark-flame { fill: var(--copper); } .mark-flame-core { fill: var(--amber); }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.brand-name i { font-style: normal; color: var(--amber); padding: 0 .08em; }
.topnav { display: flex; gap: 2px; flex: 1; }
.topnav a { position: relative; padding: 8px 14px; color: #c9c4b8; text-decoration: none; font-family: var(--font-head); font-size: 15px; letter-spacing: .09em; text-transform: uppercase; }
.topnav a:hover { color: var(--amber); }
.topnav a:hover::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--amber); }
.topact { display: flex; gap: 8px; }

/* ---------- buttons (chamfered corners) ---------- */
.btn { --cut: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 0; background: var(--surface-2); color: var(--text); font-family: var(--font-head); font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; white-space: nowrap; clip-path: var(--chamfer); transition: background .12s, color .12s; }
.btn:active { transform: translateY(1px); }
.btn-amber { background: var(--amber); color: var(--amber-ink); }
.btn-amber:hover { background: #ffb840; }
.btn-amber:disabled { background: #5a4a26; color: #2a2113; cursor: not-allowed; }
.btn-copper { background: var(--copper); color: #1d0f08; }
.btn-copper:hover { background: #cb835b; }
.btn-ghost { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { background: #3d4147; color: var(--amber); }
.btn-quiet { background: transparent; color: #c9c4b8; }
.btn-quiet:hover { color: var(--amber); }
.btn-lg { padding: 13px 24px; font-size: 17px; --cut: 11px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn:focus-visible { box-shadow: inset 0 0 0 3px #fff; }
.tab:focus-visible, .seg button:focus-visible, .vp-hud button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }


/* ---------- toast, hidden ---------- */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 100; padding: 10px 16px; background: var(--surface-3); color: var(--text); border-left: 3px solid var(--amber); font-family: var(--font-mono); font-size: 12.5px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.toast[hidden] { display: none; }
[hidden] { display: none !important; }

/* ---------- header additions: breadcrumb (tool pages), small header buttons ---------- */
ff-header { display: flex; }
.btn-head { padding: 8px 14px; font-size: 14px; }
.topact .btn-quiet { gap: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.crumbs { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-family: var(--font-head); font-size: 15px; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.crumbs a { color: #c9c4b8; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.crumbs a:hover { color: var(--amber); }
.crumb-back { padding: 5px 10px 5px 6px; box-shadow: inset 0 0 0 1px var(--line); }
.crumb-sep { color: var(--faint); }
.crumb-here { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.crumbs a:focus-visible, .brand:focus-visible, .btn-head:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 960px) {
  .crumbs .crumb-cat, .crumbs .crumb-cat + .crumb-sep, .crumbs .crumb-here, .crumbs .crumb-back + .crumb-sep { display: none; }
  .crumbs { justify-content: flex-start; }
  .btn-head span:not(.sr-only) { display: none; }
  .btn-head { padding: 8px 10px; }
  .brand-name { font-size: 20px; }
}
@media (max-width: 420px) { ff-header[data-tool] .brand-name { display: none; } }

/* ---------- brand lockup + store link (Forge & Form by Soro Designs) ---------- */
.brand-lockup { display: flex; flex-direction: column; gap: 3px; }
.brand-by { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.brand:hover .brand-by { color: var(--copper); }
.btn-shop { gap: 6px; }
.btn-shop .shop-short { display: none; }
.topact { align-items: center; }
@media (max-width: 960px) {
  .btn-shop .shop-long { display: none; }
  .btn-shop span.shop-short { display: inline; }
  .brand-by { font-size: 9px; }
}
@media (max-width: 420px) { ff-header[data-tool] .brand-lockup { display: none; } .brand-by { letter-spacing: .1em; } }