/* Layout redraws. Tokens only, so light and dark share one drawing. */

.cu-silence-dial {
    display: block;
    width: min(100%, 16rem);
    height: auto;
    margin: 0.85rem auto 0.35rem;
    color: var(--cu-cream, #f5f0e6);
}

.cu-shell[data-theme="light"] .cu-silence-dial,
html[data-theme="light"] .cu-silence-dial {
    color: var(--cu-ink, #1c1917);
}

.cu-silence-dial__seg {
    fill: none;
    stroke: currentColor;
    stroke-opacity: 0.28;
    stroke-width: 10;
    stroke-linecap: round;
}

.cu-silence-dial__seg.is-on {
    stroke: var(--cu-teal, #0f766e);
    stroke-opacity: 1;
}

.cu-silence-dial__star {
    fill: var(--cu-teal, #0f766e);
}

.cu-silence-dial__day,
.cu-silence-dial__note {
    fill: currentColor;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.cu-silence-dial__day {
    font-size: 16px;
    font-weight: 700;
}

.cu-silence-dial__note {
    font-size: 13px;
}

.cu-silence-office {
    margin: 0.2rem 0 0;
    text-align: center;
    font-size: 0.82rem;
}

.cu-fec-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    min-width: 0;
}

.cu-fec-stack__bar {
    display: flex;
    width: 100%;
    height: 1.15rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(127, 127, 127, 0.18);
}

.cu-fec-stack__seg {
    display: block;
    height: 100%;
    min-width: 2px;
    background: var(--cu-teal, #0f766e);
}

.cu-fec-stack__seg:nth-child(3n+2) {
    background: var(--cu-ink, #1c1917);
}

.cu-shell:not([data-theme="light"]) .cu-fec-stack__seg:nth-child(3n+2) {
    background: var(--cu-cream, #f5f0e6);
}

.cu-fec-stack__seg:nth-child(3n) {
    background: repeating-linear-gradient(
        135deg,
        var(--cu-teal, #0f766e) 0 4px,
        transparent 4px 8px);
    box-shadow: inset 0 0 0 1px var(--cu-teal, #0f766e);
}

.cu-fec-stack__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: 0.78rem;
}

.cu-roll-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin: 0 0 0.75rem;
}

.cu-roll-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 0.4rem;
    color: inherit;
    text-decoration: none;
}

.cu-roll-square:focus-visible {
    outline: 2px solid var(--cu-teal, #0f766e);
    outline-offset: 2px;
}

.cu-roll-square__mark {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    box-sizing: border-box;
}

.cu-roll-square--yea .cu-roll-square__mark {
    background: var(--cu-teal, #0f766e);
}

.cu-roll-square--nay .cu-roll-square__mark {
    background: var(--cu-ink, #1c1917);
}

.cu-shell:not([data-theme="light"]) .cu-roll-square--nay .cu-roll-square__mark {
    background: var(--cu-cream, #f5f0e6);
}

.cu-roll-square--other .cu-roll-square__mark {
    background: transparent;
    border: 1.5px dashed currentColor;
}

.cu-compare-cell--mirror .cu-meter-bar {
    transform: scaleX(-1);
}

.cu-compare-cell--mirror .cu-compare-track > span {
    margin-left: auto;
}

.cu-compare-board .cu-compare-vote--no {
    background: var(--cu-cream, #f5f0e6);
    color: #1c1917;
}

.cu-own-empty {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 0.5rem 0.35rem;
}

.cu-own-empty__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 5.5rem;
    padding: 0.55rem 0.4rem;
    border: 1.5px dashed currentColor;
    border-radius: 0.65rem;
    color: var(--cu-muted, rgba(245, 240, 230, 0.78));
    font-size: 0.78rem;
    font-weight: 650;
}

.cu-shell[data-theme="light"] .cu-own-empty__node {
    color: var(--cu-ink, #1c1917);
}

.cu-own-graph__owner,
.cu-own-graph__outlets a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cu-access-flow {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.45rem;
    margin: 0.35rem 0 0;
    padding: 0.85rem 0.5rem;
}

.cu-access-flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 5.5rem;
    min-height: 44px;
    padding: 0.45rem 0.55rem;
    border: 1.5px solid rgba(127, 127, 127, 0.45);
    border-radius: 0.65rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.cu-access-flow__step.is-on {
    border-color: var(--cu-teal, #0f766e);
    box-shadow: inset 0 0 0 2px var(--cu-teal, #0f766e);
}

.cu-access-flow__step--locked {
    border-style: dashed;
    opacity: 0.85;
}

.cu-access-flow__soon {
    font-size: 12px;
    font-weight: 650;
}

.cu-access-flow__join {
    width: 1.25rem;
    height: 2px;
    background: var(--cu-teal, #0f766e);
}

.cu-pipe-flow {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    margin: 0;
    padding: 0.9rem 0.55rem;
}

.cu-pipe-flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 5.25rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.cu-pipe-flow__join {
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    opacity: 0.55;
}

.cu-month__dots {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.cu-month__count {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cu-month__day--today .cu-month__num {
    background: transparent;
    color: var(--cu-ink, #1c1917);
    box-shadow: inset 0 0 0 2px var(--cu-teal, #0f766e);
}

.cu-month__day--out.cu-month__day--today .cu-month__num {
    color: #44403c;
}

@media (min-width: 720px) {
    .cu-month__mark,
    .cu-month--full .cu-month__mark {
        display: block;
    }
}

.cu-feed-card__mark .cu-ico {
    align-self: flex-start;
    color: var(--cu-teal-bright, #5eead4);
}

.cu-price-spark {
    display: block;
    width: 100%;
    height: 1.75rem;
    margin: 0.35rem 0 0;
    color: var(--cu-muted, rgba(245, 240, 230, 0.78));
}

.cu-theme-art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-height: 8.5rem;
    padding: 1.25rem 0.75rem;
    color: var(--cu-teal-bright, #5eead4);
}

.cu-shell[data-theme="light"] .cu-theme-art,
html[data-theme="light"] .cu-theme-art {
    color: var(--cu-teal, #0f766e);
}

.cu-light-art:has(.cu-theme-art) {
    background: #121212;
    border-color: rgba(94, 234, 212, 0.28);
}

.cu-shell[data-theme="light"] .cu-light-art:has(.cu-theme-art),
html[data-theme="light"] .cu-light-art:has(.cu-theme-art) {
    background: var(--cu-card-elevated-bg, #fffdf8);
    border-color: rgba(15, 118, 110, 0.28);
}

.cu-evt-rail__month {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.cu-evt-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.cu-evt-empty .cu-ico {
    color: var(--cu-teal, #0f766e);
}

.cu-shell:not([data-theme="light"]) .cu-boards-page .cu-evt-when {
    color: var(--cu-teal-bright, #5eead4);
}

@media (max-width: 480px) {
    .cu-access-flow,
    .cu-pipe-flow {
        flex-direction: column;
        align-items: stretch;
    }

    .cu-access-flow__join,
    .cu-pipe-flow__join {
        width: 2px;
        height: 0.85rem;
        margin-inline: auto;
    }
}