/* ------------------ РАЗГУЛЯЕВ --------------------*/
.channel-note { margin:30px auto;}
.diagram-card figure {max-width:500px;margin:0 auto}

.tab-item .grid-2{
    margin-bottom:30px;
    &:first-child {margin-bottom:15px}
}


.razgul {
  --green: #236957;
  --green-dark: #174a3e;
  --green-deep: #10382f;
  --black: #161817;
  --muted: #5d6260;
  --line: #d9dcda;
  --paper: #ffffff;
  --soft: #f4f5f4;

    &.grid-2,
    &.grid-3,
    &.grid-4 {
        margin:15px 0 30px;
        justify-content:space-evenly !important;
        gap: 30px;
    }

    article  {
        display:flex;
        flex-flow:column;
        gap:5px;
        padding: 15px 20px;
        border: 1px solid var(--line);
        border-radius: var(--radius-big);
        background: #fff;
        box-shadow: var(--shadow-b);
        overflow: hidden;
        &> :nth-last-child(2){flex-grow:1;}
        strong { display: block;}
        p a {color: var(--tt-link);}

        h3 {
            color:inherit;
            text-align:center;
        }
        span {
            color: var(--muted);
            font-size: .92rem;
        }
        ul {list-style-type:square;
            &.tag-list{
                display:flex;
                flex-flow:row wrap;
                list-style:none;
                li{
                    display:inline-block;
                    padding:2px 10px;
                    margin:5px;
                    font-size:14px;
                    color:white;
                    border-radius:var(--radius-small);
                    background:var(--green-xs);
                    hyphens:none;
                }
           }
        }

        &.featured {
            background: var(--green-dark);
            color:#efe;
            ul.tag-list li{
                color:var(--green-dark);;
                background:var(--soft);
            }
        }
    }

    &.important {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 16px;
        padding: 22px;
        color: var(--black);
        border: 1px solid var(--line);
        border-radius: var(--radius-big);
        background: var(--soft);
        margin: 30px 0;

        .important-mark {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            color: #fff;
            border-radius: 50%;
            background: var(--green);
            font-weight: 900;
        }
    }

    .card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 28px;
    }

    .card-icon {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        color: var(--green);
        border-radius: var(--radius-small);
        background: var(--soft);
        font-weight: 900;
    }
    .card-tag,
    .role-tag,
    .protocol-version {
        display: inline-flex;
        margin-bottom:10px;
        width: fit-content;
        padding: 7px 10px;
        color: var(--green-dark);
        border-radius: 999px;
        background: var(--soft);
        font-size: .8rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

   /* .infra-list,*/
    .dark-list { display: grid; gap: 9px; }

  /*  .infra-item,*/
    .dark-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 12px;
        border-radius: var(--radius-small);
        background: rgba(255, 255, 255, .07);
        font-size: .9rem;
        font-weight: 780;
    }

    .infra-item small,
    .dark-item {
        > * {color: inherit }
	}

  /*  .hub-panel,*/
    .dark-core {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 32px;
        color: var(--green-deep);
        border-radius: var(--radius-big);
        background: #fff;
    }

    article h3,
    .hub-panel h3,
    .dark-core h3 {
        margin: 0 0 12px;
        font-size: clamp(1.8rem, 1vw, 1rem);
        font-weight:700;
        line-height: 1;
        letter-spacing: -.03em;
        hyphens:none;
    }

  /*  .hub-output,*/
    .metric-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .hub-output span,
    .metric,
    .channel-note {
        padding: 10px 8px;
        color: var(--green-dark);
        border-radius: var(--radius-small);
        background: var(--soft);
        text-align: center;
        font-size: .78rem;
        font-weight: 850;
    }/*
    .dark-section .text-link {
        margin-top: 22px;
        color: #fff;
    }*/
/*
    .table-wrap {
        overflow-x: auto;
        border-radius: var(--radius-big);
        box-shadow: 0 28px 75px rgba(0, 0, 0, .18);
        scrollbar-color: #8a918e transparent;
    }*/
}



table.razgul.fine {
    border: 1px solid var(--line);
    width:100%;
    margin:15px auto 50px;
    td {
        padding-left:0;
        padding-right:0;
        sup {
            position:absolute;
            padding-left:2px;
        }
        i {
            &:before{
                display:inline-block;
                font-style:normal;
                font-size:22px;
                width:1.4em;
                border-radius:1em;
                color:white;
            }
            &.yes:before{
                content:'✔';
                background:green;
                color:white;
            }
            &.no:before{
                content:'✘';
                background:#f33;
            }
            &.partial:before{
                content:'✔';
                background:gold;
            }
        }
    }
}


.razgul.steps {
    counter-reset: step;
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-big);
    background: white;
    overflow:hidden;

	.step {
        counter-increment: step;
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 18px;
        align-items: start;
        padding: 22px;
    	overflow:hidden;
        border:none;
        border-radius:0;

        background-color:white;
        &:nth-of-type(2n)  {
            background-color:var(--tt-bg-gray);
        }

        &:before {
            content: counter(step, decimal-leading-zero);
            display: grid;
            place-items: center;
            width: 54px;
            height: 54px;
            color: white;
            background: var(--green);
            border-radius: var(--radius-big);
            font-weight: 900;
        }

        h3 {
            margin: 2px 0 5px;
            font-size: 1.08rem;
            text-align:left;
        }
        p {
            margin: 0;
            color: var(--muted);
        }
    }
}