/* chat-networks-guide.css - the web chat network guide (js/chat-networks-guide.js).
   CGA colours and the flBullet effects the terminal guide uses: a white
   shimmer across the TheDraw title, a comet running round each card. */

@property --cng-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.cng { color: #AAAAAA; font: 14px/1.45 'Spleen', ui-monospace, monospace; }
.cng-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.cng-title { display: flex; justify-content: center; margin: 4px 0 6px; min-height: 40px; }
.cng-title-art { position: relative; display: inline-block; line-height: 0; overflow: hidden; }
.cng-title-art img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
/* The shimmer: a white band sweeping diagonally every few seconds. Colour
   dodge leaves the black background black and lights only the letters. */
.cng-title-art::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%) no-repeat;
    background-size: 300% 100%; background-position: 150% 0;
    mix-blend-mode: color-dodge;
    animation: cng-shimmer 4.2s ease-in-out infinite 0.8s;
}
@keyframes cng-shimmer { 0% { background-position: 150% 0; } 45%, 100% { background-position: -50% 0; } }
.cng-title-text { font-size: 28px; letter-spacing: .4em; color: #fff; }

.cng-lede { text-align: center; color: #55FFFF; margin: 0 auto 8px; max-width: 62ch; }

.cng-map { display: block; width: 100%; max-width: 640px; margin: 4px auto 10px; font: 13px 'Spleen', ui-monospace, monospace; }
.cng-wire { fill: none; stroke-width: 2; }
.cng-wire.is-off { stroke-dasharray: 2 6; }
.cng-hub rect { stroke: #5555FF; stroke-width: 3; stroke-dasharray: 60 380; animation: cng-hub-comet 3s linear infinite; }
@keyframes cng-hub-comet { to { stroke-dashoffset: -440; } }
.cng-hub-you { font-weight: bold; letter-spacing: .1em; }

.cng-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .cng-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cng-cards { grid-template-columns: 1fr; } }

.cng-card {
    position: relative; background: #000; padding: 12px 10px 10px; text-align: center;
    border: 2px solid var(--net-dark); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
/* The comet: a bright arc running round the border on hover / focus. */
.cng-card::before {
    content: ''; position: absolute; inset: -2px; padding: 2px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--cng-angle), transparent 0 70%, var(--net-bright) 88%, #fff 96%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: cng-comet 2.4s linear infinite; transition: opacity .2s;
}
.cng-card:hover::before, .cng-card:focus-within::before { opacity: 1; }
@keyframes cng-comet { to { --cng-angle: 360deg; } }
.cng-card.is-off { border-color: #555; }

.cng-card-name { position: absolute; top: -.8em; background: #000; padding: 0 6px; color: #fff; font-weight: bold; }
.cng-card.is-off .cng-card-name { color: #AAAAAA; }
.cng-icon { width: 96px; height: 64px; margin: 6px 0 2px; }
.cng-card-tag { color: var(--net-bright); text-transform: uppercase; letter-spacing: .08em; font-weight: bold; }
.cng-card.is-off .cng-card-tag, .cng-card.is-off .cng-card-about { color: #555; }
.cng-card-about { margin: 0 0 6px; font-size: 13px; flex: 1; }
.cng-irc-form { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; font-size: 13px; }
.cng-irc-form label { display: flex; flex-direction: column; gap: 2px; margin: 0; color: #AAAAAA; }
.cng-irc-form small { opacity: .6; }
.cng-irc-form select, .cng-irc-form input {
    background: #0000AA; color: #fff; border: 1px solid var(--net-bright); padding: 3px 5px;
    font: 13px 'Spleen', ui-monospace, monospace; width: 100%;
}
.cng-irc-actions { display: flex; gap: 6px; }
.cng-irc-save, .cng-irc-change { background: var(--net-dark); color: #fff; border: 0; padding: 4px 10px; font: bold 13px 'Spleen', ui-monospace, monospace; cursor: pointer; box-shadow: 3px 3px 0 #555; }
.cng-irc-save:hover, .cng-irc-change:hover { background: var(--net-bright); color: #000; }
.cng-irc-save:active, .cng-irc-change:active { transform: translate(3px, 3px); box-shadow: none; }
.cng-irc-cancel { background: #AAAAAA; color: #000; border: 0; padding: 4px 10px; font: 13px 'Spleen', ui-monospace, monospace; cursor: pointer; box-shadow: 3px 3px 0 #555; }
.cng-irc-cancel:active { transform: translate(3px, 3px); box-shadow: none; }
.cng-irc-msg { min-height: 1em; color: #FF5555; }
.cng-irc-change { margin-bottom: 6px; }
.cng-always { color: #00AAAA; font-weight: bold; letter-spacing: .06em; }

.cng-switch { background: none; border: 0; padding: 0; cursor: pointer; }
.cng-switch-track {
    position: relative; display: inline-flex; align-items: center; width: 74px; height: 24px;
    background: #AA0000; color: #fff; font-weight: bold; transition: background .15s;
}
.cng-switch.is-on .cng-switch-track { background: #00AA00; }
.cng-switch-knob { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; background: #fff; transition: left .15s; }
.cng-switch.is-on .cng-switch-knob { left: 52px; }
.cng-switch-label { width: 100%; text-align: center; padding-left: 18px; }
.cng-switch.is-on .cng-switch-label { padding: 0 18px 0 0; }
.cng-switch:focus-visible .cng-switch-track { outline: 2px solid #fff; outline-offset: 2px; }
.cng-switch:disabled { opacity: .6; cursor: wait; }

.cng-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (max-width: 760px) { .cng-tips { grid-template-columns: 1fr; } }
.cng-tip { border: 1px solid #555; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cng-tip b { color: #fff; }
.cng-key { align-self: flex-start; color: #000; padding: 0 6px; font-weight: bold; }
.cng-foot { margin: 10px 0 0; font-size: 12px; opacity: .7; }
.cng-actions { text-align: center; margin-top: 14px; position: sticky; bottom: -16px; background: #000; padding: 10px 0; border-top: 1px solid #333; }
.cng-done { background: #00AAAA; color: #000; border: 0; padding: 6px 18px; font: bold 14px 'Spleen', ui-monospace, monospace; cursor: pointer; }
.cng-done:hover { background: #55FFFF; }

.cng-overlay {
    position: fixed; inset: 0; z-index: 10020; background: rgba(0,0,0,.78);
    display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 12px;
}
.cng-modal { position: relative; background: #000; border: 2px solid #5555FF; padding: 16px; width: 100%; max-width: 860px; }
.cng-close { position: absolute; top: 4px; right: 8px; background: none; border: 0; color: #AAAAAA; font-size: 22px; cursor: pointer; }
.cng-close:hover { color: #fff; }
@media (max-width: 600px) { .cng-modal { padding-top: 34px; } }

@media (prefers-reduced-motion: reduce) {
    .cng-title-art::after, .cng-card::before, .cng-hub rect { animation: none; }
    .cng-packet { display: none; }
}