/* ===========================================================================
   widgets.css — shared pieces rendered by js/widgets.js on more than one
   page: tech marks, live-status chips, related projects, the changelog
   timeline and emoji reactions. Tokens only; both themes inherit.
   =========================================================================== */

/* .ibtn (components.css) loads after layout.css and re-declares display,
   which un-hid the burger on desktop. Restate the rule at a specificity the
   cascade can't reorder. */
.nav .nav-burger { display: none; }
@media (max-width: 900px) { .nav .nav-burger { display: inline-grid; } }

/* ---------------------------------------------------------------------------
   Tech marks — one shape, one weight, one colour (Design 8)
   --------------------------------------------------------------------------- */

.tmark {
    --tm: 28px;
    --tm-fs: .38;
    display: inline-grid; place-items: center;
    flex: none;
    width: var(--tm); height: var(--tm);
    border-radius: calc(var(--tm) * .3);
    border: 1px solid var(--line-strong);
    background: var(--paper-raised);
    color: var(--ink-70);
    font-family: var(--font-mono);
    font-size: calc(var(--tm) * var(--tm-fs));
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-ligatures: none;
    user-select: none;
    transition: color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out),
                background var(--d-2) var(--e-out), transform var(--d-3) var(--e-spring);
}
.tmark:hover, .tmark:focus-visible,
.tmark-host:hover .tmark, .tmark-host:focus-visible .tmark {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.tmark-host:hover .tmark { transform: rotate(-6deg) scale(1.06); }

/* ---------------------------------------------------------------------------
   Live status chip
   --------------------------------------------------------------------------- */

.schip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 21px; padding: 0 8px;
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: var(--t-2xs);
    font-weight: 500;
    white-space: nowrap;
    flex: none;
}
.schip i {
    position: relative;
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.schip--up { background: var(--pine-soft); color: var(--pine); }
.schip--up i::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%; background: currentColor;
    animation: ping 2.4s var(--e-out) infinite;
}
.schip--down { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .schip--down { color: var(--accent-lift); }

/* ---------------------------------------------------------------------------
   Related projects
   --------------------------------------------------------------------------- */

.related { display: grid; gap: 10px; }
@media (min-width: 760px) {
    .related { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.rel-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--paper-raised);
    text-align: left;
    color: inherit;
    transition: border-color var(--d-2) var(--e-out), box-shadow var(--d-3) var(--e-expo),
                transform var(--d-3) var(--e-expo);
}
.rel-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}
.rel-plaque {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: linear-gradient(140deg, var(--tone-a), var(--tone-b));
    color: #fff;
    box-shadow: 0 6px 14px -7px var(--tone-a);
    transition: transform var(--d-4) var(--e-spring);
}
[data-theme="dark"] .rel-plaque { color: #131110; }
.rel-card:hover .rel-plaque { transform: rotate(-7deg) scale(1.06); }
.rel-plaque svg { width: 18px; height: 18px; }

.rel-text { display: grid; gap: 2px; min-width: 0; }
.rel-text b {
    font-size: var(--t-sm); font-weight: 500; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rel-text small {
    font-family: var(--font-mono); font-size: var(--t-2xs);
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-35);
}
.rel-text em {
    font-style: normal; font-size: var(--t-xs); color: var(--ink-50);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rel-go {
    display: grid; place-items: center;
    color: var(--ink-35);
    transition: transform var(--d-3) var(--e-expo), color var(--d-2) var(--e-out);
}
.rel-card:hover .rel-go { color: var(--accent); transform: translateX(3px); }
.rel-go svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------------------
   Changelog timeline
   --------------------------------------------------------------------------- */

.clog-kind {
    order: 2;
    padding: 2px 7px;
    border-radius: var(--r-xs);
    background: var(--paper-sunk);
    color: var(--ink-35);
    letter-spacing: .08em;
}
.clog { position: relative; display: grid; gap: 0; margin-bottom: 26px; }
.clog::before {
    content: "";
    position: absolute; left: 5px; top: 10px; bottom: 10px;
    width: 1px;
    background: var(--line);
}
.clog-item {
    position: relative;
    display: grid; grid-template-columns: 11px minmax(0, 1fr);
    gap: 16px;
    padding: 9px 0;
    animation: clog-in var(--d-4) var(--e-expo) both;
    animation-delay: calc(var(--i, 0) * 60ms);
}
.clog-dot {
    position: relative; z-index: 1;
    width: 11px; height: 11px; margin-top: 5px;
    border-radius: 50%;
    border: 2px solid var(--paper-raised);
    background: var(--ink-20);
    box-shadow: 0 0 0 1px var(--line-strong);
    transition: background var(--d-2) var(--e-out);
}
.clog-item:first-child .clog-dot { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.clog-item:hover .clog-dot { background: var(--accent); }
.clog-body { min-width: 0; display: grid; gap: 3px; }
.clog-body > a, .clog-body > span {
    font-size: var(--t-sm); color: var(--ink-70);
    overflow-wrap: anywhere;
    transition: color var(--d-2) var(--e-out);
}
.clog-body > a:hover { color: var(--accent); }
.clog-body small {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-family: var(--font-mono); font-size: var(--t-2xs);
    color: var(--ink-35);
}
.clog-body code {
    font-family: var(--font-mono);
    padding: 0 5px;
    border-radius: 4px;
    background: var(--paper-sunk);
    border: 1px solid var(--line-soft);
}

.clog-loading { display: flex; gap: 6px; padding: 8px 0 22px; }
.clog-loading span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ink-20);
    animation: clog-blink 1.1s var(--e-inout) infinite;
}
.clog-loading span:nth-child(2) { animation-delay: .15s; }
.clog-loading span:nth-child(3) { animation-delay: .3s; }

@keyframes clog-in { from { opacity: 0; transform: translateX(-8px); } }
@keyframes clog-blink { 50% { opacity: .25; } }

/* ---------------------------------------------------------------------------
   Reactions
   --------------------------------------------------------------------------- */

.reacts { margin: 4px 0 26px; }
.reacts-row { display: flex; flex-wrap: wrap; gap: 8px; }

.react {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; min-width: 52px; padding: 0 14px;
    border-radius: var(--r-full);
    border: 1px solid var(--line);
    background: var(--paper-raised);
    color: var(--ink-50);
    font-size: var(--t-sm);
    transition: border-color var(--d-2) var(--e-out), background var(--d-2) var(--e-out),
                color var(--d-2) var(--e-out), transform var(--d-2) var(--e-spring);
}
.react:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.react:active { transform: scale(.94); }
.react-glyph {
    display: inline-block;
    font-size: 1.05rem; line-height: 1;
    transition: transform var(--d-3) var(--e-spring);
}
.react:hover .react-glyph { transform: scale(1.18) rotate(-8deg); }
.react b {
    font-family: var(--font-mono); font-size: var(--t-2xs);
    font-weight: 500; color: inherit;
    font-variant-numeric: tabular-nums;
}
.react b:empty { display: none; }
.react.is-on {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.react--ghost {
    width: 64px; padding: 0;
    background: linear-gradient(100deg, var(--paper-sunk) 30%, var(--paper-raised) 50%, var(--paper-sunk) 70%);
    background-size: 240% 100%;
    animation: shimmer 1.6s var(--e-inout) infinite;
}

/* Particles from a fresh reaction — fixed so they escape any overflow. */
.react-bit {
    position: fixed;
    z-index: var(--z-toast);
    pointer-events: none;
    font-size: 1rem;
    translate: -50% -50%;
    animation: react-fly .85s var(--e-out) forwards;
}
@keyframes react-fly {
    0%   { transform: translate(0, 0) scale(.4) rotate(0); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .schip--up i::after, .clog-loading span, .react--ghost { animation: none !important; }
    .clog-item { animation: none; }
}