@import url('https://fonts.googleapis.com/css2?family=Norican&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');

@counter-style doskvol-tier {
    system: fixed 0;
    symbols: "N" "I" "II" "III" "IV" "V" "VI";
    suffix: "";
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

#doskvol-network {
    color-scheme: light dark;
    color: var(--black-ink);
    width: 100cqw;
    height: 100cqh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--paper);
    font-family: "Playfair", serif;
    font-size: 14px;
    font-weight: 430;
    line-height: 21px;
    container: doskvol / size;
    overflow: hidden;
    scrollbar-color: var(--neighbor) var(--paper);
    scrollbar-gutter: stable;
    --paper: light-dark(#eee5cd, #121811);
    --friend: light-dark(#102f55, #6a8bb1);
    --enemy: light-dark(#6c101b, #ba6269);
    --black-ink: light-dark(#211d19, #d2cdc3);
    --neighbor: light-dark(#b89566, #4e6c66);
    --underground: light-dark(#781c2b, #cf9f97);
    --institutions: light-dark(#173e6d, #9aafca);
    --labor: light-dark(#24543a, #a2bfad);
    --fringe: light-dark(#5d2d68, #c8a8ce);
    --citizens: light-dark(#75451f, #a3977b);

    &.theme-light { color-scheme: light; }
    &.theme-dark { color-scheme: dark; }

    a {
        cursor: pointer;
        font-weight: 500;
        text-decoration: none;
        text-underline-offset: 2px;
    }
    a:is(:hover, :focus-visible) {
        text-decoration-line: underline;
        text-decoration-style: dashed;
        text-decoration-thickness: 0.5px;
    }
    :is(h1, h2, h3, h4, h5, h6, p) {
        margin-block: 0;
    }
    h1 {
        font-size: 24px;
        font-weight: 500;
        line-height: 1.25;
    }
    h2 {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.25;
    }
    :is(h3, h4, h5, h6) {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.3;
    }
    th {
        font-weight: 500;
    }
    code:not(pre code) {
        display: inline;
        padding: 1px 6px;
        border-radius: 7.5px;
        corner-shape: superellipse(1.5);
        background: color-mix(in srgb, var(--black-ink) 10%, transparent);
        font-family:
            ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;
        font-size: 0.92em;
        overflow-wrap: anywhere;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        word-break: break-word;
    }
    svg {
        display: block;
        max-width: 100%;
        height: auto;
    }
    small {
        font-size: 12px;
        line-height: 16px;
    }

    .network-layout {
        background-color: var(--paper);
        display: grid;
        grid-template-rows: auto 1fr;
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
                    "graph graph"
                    "selection selection";
        gap: 10px;
        align-items: start;
        width: 100%;
        height: 100%;
    }
    .graph-surface {
        position: relative;
        grid-area: graph;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
    }
    .graph-surface > svg {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-radius: 3px;
        background-color: var(--paper);
        background-image: radial-gradient(#887b651f 0.6px, transparent 0.8px);
        background-size: 7px 9px;
        touch-action: none;
    }
    .relation-label-editor,
    .node-name-editor {
        margin: 0;
        padding: 0 5ex;
        border: 1px solid currentColor;
        border-radius: 17px;
        background: var(--paper);
        box-shadow: 3px 4px 0 color-mix(in srgb, var(--black-ink) 16%, transparent);
        position: absolute;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: flex-end;
        color: var(--black-ink);
        opacity: 0;
        pointer-events: none;
    }
    .relation-label-editor.ally {
        color: var(--friend);
    }
    .relation-label-editor.enemy {
        color: var(--enemy);
    }
    .relation-label-editor.visible,
    .node-name-editor.visible {
        opacity: 1;
        pointer-events: auto;
    }
    .relation-menu,
    .node-menu,
    .draft-category-menu {
        position: absolute;
        inset: 0;
        display: none;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        color: var(--black-ink);
        pointer-events: none;
    }
    .relation-menu.visible,
    .node-menu.visible,
    .draft-category-menu.visible {
        display: flex;
        pointer-events: auto;
    }
    .relation-type-options,
    .node-relation-options,
    .draft-category-options {
        display: flex;
        gap: 4px;
    }
    .relation-type-option {
        display: flex;
        width: auto;
        height: 24px;
        align-items: center;
        gap: 5px;
        border: 1px solid currentColor;
        border-radius: 13px;
        padding: 0 8px;
        background: var(--paper);
        color: var(--black-ink);
        font: 700 11px "Playfair", serif;
        cursor: pointer;
    }
    .relation-type-option > span {
        width: 20px;
        border-top: 2px solid currentColor;
    }
    .relation-type-option.selected {
        border-width: 2px;
    }
    .relation-type-option.ally { color: var(--friend); }
    .relation-type-option.enemy { color: var(--enemy); }
    .relation-type-option.status.positive { color: var(--friend); }
    .relation-type-option.status.negative { color: var(--enemy); }
    .relation-type-option.neighbor { color: var(--neighbor); }
    .relation-type-option.turf > span { border-top-style: dashed; }
    .relation-menu > .clock-edit-control,
    .node-menu > .clock-edit-control,
    .draft-category-menu > .clock-edit-control {
        position: static;
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }
    .relation-label-form,
    .node-name-editor doskvol-edit {
        width: min(12rem, calc(100vw - 4rem));
        color: var(--black-ink);
        font-family: "Norican", cursive;
        text-align: center;
        --doskvol-edit-field-border: 0;
        --doskvol-edit-field-outline: 0;
    }
    .relation-label-form::part(cancel-button),
    .node-name-editor doskvol-edit::part(cancel-button) {
        left: -3ex;
        top: 50%;
        transform: translateY(-50%);
    }
    .relation-label-form::part(confirm-button),
    .node-name-editor doskvol-edit::part(confirm-button) {
        right: -3ex;
        top: 50%;
        transform: translateY(-50%);
    }
    .relation-label-remove {
        display: none;
        position: absolute;
        left: -52px;
        top: 50%;
        width: 22px;
        height: 22px;
        transform: translateY(-50%);
    }
    .relation-label-editor.visible .relation-label-remove { display: block; }
    .history-node text {
        fill: var(--black-ink);
        paint-order: stroke fill;
        stroke: var(--paper);
        stroke-width: max(2px, .25em);
        stroke-linejoin: round;
        font-family: "Norican", cursive;
        font-weight: 400;
        pointer-events: none;
    }
    .history-node .tier-mark {
        font-family: "Playfair", serif;
        font-weight: 900;
        font-stretch: 90%;
        font-optical-sizing: auto;
        stroke-width: max(2px, .25em);
    }
    .history-node.branch .tier-mark {
        font-size: 1.5em;
    }
    .selection {
        display: flex;
        flex-direction: column;
        width: stretch;
        height: stretch;
        margin: 0;
        grid-area: selection;
        font-family: "Playfair", serif;
        overflow-y: auto;
        container-type: inline-size;
    }
    .snapshot-change-summary,
    .starting-description {
        padding: 12px;
    }
    .starting-copy > :first-child {
        margin-top: 0;
    }
    .starting-copy > :last-child {
        margin-bottom: 0;
    }
    .starting-description a {
        color: var(--enemy);
    }

    .starting-copy {
        column-width: 18em;
    }

    .starting-copy > * {
        margin-block-end: 1em;
    }
    .starting-description h1 {
        font-family: "Norican";
        font-weight: 400;
    }
    .starting-quickstart {
        max-width: 24em;
        margin-top: 1.5em;
    }
    .starting-quickstart label {
        display: block;
        margin-bottom: 0.5em;
        font-weight: 800;
    }
    .starting-quickstart-editor {
        position: relative;
        --category-color: var(--black-ink);
    }
    .starting-quickstart .faction-text-input,
    .starting-quickstart-save {
        display: block;
    }
    .starting-quickstart-save {
        right: -9px;
        bottom: -9px;
    }
    .starting-copyright {
        margin-top: auto;
        padding: 2.5em 12px 12px;
        color: color-mix(in srgb, var(--neighbor) 70%, transparent);
        font-size: 12px;
    }
    .starting-copyright :is(p, a) {
        color: inherit;
    }
    .starting-copyright p {
        margin: 0;
    }
    .snapshot-change-summary h2 {
        margin: 0 0 8px;
        font-family: "Norican";
        font-weight: 400;
    }
    .snapshot-change-summary :is(ul, p) {
        margin: 0;
    }
    .snapshot-change-summary ul {
        padding-left: 1.4em;
    }
    .snapshot-change-summary > ul {
        @container (width > 36em) {
            column-count: 2;
            column-gap: 2em;
        }
    }
    .snapshot-change-summary > ul > li {
        margin-bottom: 0.35em;
        break-inside: avoid;
    }
    .snapshot-change-summary li > h5 {
        font-size: 1.2em;
    }
    .snapshot-change-summary a {
        color: var(--category-color, var(--neighbor));
    }
    .snapshot-change-summary a.districts {
        --category-color: var(--neighbor);
    }

    .snapshot-change-summary li > h5::after {
        content: "…";
    }

    .snapshot-change-summary li li::marker {
        content: "…";
    }

    .district-card,
    .faction-card {
        padding: 12px;
    }
    .district-card h3,
    .faction-card h3 {
        margin: 0 0 6px;
        font-family: "Norican";
        color: var(--neighbor);
    }
    .district-card p,
    .faction-card p {
        margin: 0;
    }

    .district-card a {
        color: var(--neighbor);
    }

    .district-stats {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px 18px;
        margin: 10px 0;
        @container (width > 20em) {
            grid-template-columns: 1fr 1fr;
        }
        @container (width > 40em) {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }
    .district-stat {
        position: relative;
        anchor-scope: --district-stat-edit;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid
        color-mix(in srgb, var(--neighbor) 45%, transparent);
    }
    .district-dots {
        color: var(--neighbor);
        letter-spacing: 2px;
        white-space: nowrap;
    }
    .district-rule {
        border-top: 1px solid var(--neighbor);
        padding-top: 8px;
        font-style: italic;
    }
    :is(.district-text-editor, .faction-text-editor, .faction-field-editor) { position: relative; }
    .district-text-value:empty,
    .faction-text-value:empty,
    .faction-field-value:empty {
        min-height: 1.25em;
    }
    .district-text-editor { --doskvol-edit-color: var(--neighbor); }
    .faction-text-editor,
    .faction-field-editor { --doskvol-edit-color: var(--category-color); }
    .district-text-editor::part(content) { min-height: 1.25em; }
    .district-text-editor::part(edit-button),
    .district-text-editor::part(cancel-button),
    .district-text-editor::part(confirm-button) {
        border: 1px solid var(--neighbor);
        color: var(--neighbor);
    }
    .district-summary > :first-child {
        margin-top: 0;
    }
    .district-summary > :last-child {
        margin-bottom: 0;
    }
    .district-summary :is(b, strong) {
        font-weight: 800;
    }
    .district-summary :is(i, em) {
        font-style: italic;
    }
    .district-stat-edit {
        anchor-name: --district-stat-edit;
        right: -9px;
        top: -9px;
        color: var(--neighbor);
        opacity: 0;
        transition: opacity 120ms ease;
    }
    .district-stat:hover .district-stat-edit,
    .district-stat-edit:focus-visible,
    .district-stat.editing-stat .district-stat-edit {
        opacity: 1;
    }
    .district-stat-menu {
        position: fixed;
        position-anchor: --district-stat-edit;
        position-area: right center;
        z-index: 4;
        display: none;
        gap: 4px;
        margin-left: 4px;
        padding: 4px;
        border: 1px solid var(--neighbor);
        border-radius: 17px;
        background: var(--neighbor);
    }
    .district-stat.editing-stat .district-stat-menu {
        display: flex;
    }
    .district-stat-option {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: var(--paper);
        color: var(--neighbor);
        font: 800 10px/1 "Playfair", serif;
        cursor: pointer;
    }
    .faction-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        gap: 14px;
    }

    .underworld { --category-color: var(--underground); }
    .institutions { --category-color: var(--institutions); }
    .labor { --category-color: var(--labor); }
    .fringe { --category-color: var(--fringe); }
    .citizens { --category-color: var(--citizens); }
    .crew { --category-color: var(--black-ink); }

    .faction-rank {
        position: relative;
        color: var(--category-color);
        text-align: center;
    }
    .faction-roman-editor,
    .faction-category-editor {
        position: relative;
    }
    .crew-playbook-editor {
        position: relative;
    }
    .faction-roman {
        font-family: "Playfair", serif;
        font-size: clamp(3.5rem, 16cqw, 6rem);
        line-height: 0.85;
        font-weight: 900;
        font-stretch: 90%;
        font-optical-sizing: auto;
    }
    .faction-category {
        font-variant-caps: all-small-caps;
        letter-spacing: 0.1em;
        font-size: clamp(.7rem, 3.2cqw, 1.2rem);
        font-weight: 900;
    }
    .faction-identity h3 {
        color: var(--black-ink);
        font-family: "Norican", cursive;
        font-weight: 400;
    }
    .faction-text-editor::part(edit-button),
    .faction-text-editor::part(cancel-button),
    .faction-text-editor::part(confirm-button),
    .faction-field-editor::part(edit-button),
    .faction-field-editor::part(cancel-button),
    .faction-field-editor::part(confirm-button) {
        border: 1px solid var(--category-color);
        color: var(--category-color);
    }
    .faction-clocks {
        position: relative;
        display: flex;
        align-items: start;
        justify-content: flex-end;
        gap: 12px;
        min-width: 82px;
        min-height: 82px;
    }
    .crew-card .faction-clocks {
        flex-wrap: wrap;
        max-width: 270px;
    }
    .clock-board {
        display: grid;
        grid-template-columns: repeat(auto-fill, 82px);
        grid-auto-flow: row;
        align-content: start;
        justify-content: start;
        gap: 18px 12px;
        padding: 12px;
    }
    .clock-board-group {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span var(--clock-columns);
        grid-auto-flow: row;
        align-content: start;
        gap: 8px 12px;
    }
    .clock-board-owner {
        grid-column: 1 / -1;
        overflow: hidden;
        color: var(--category-color);
        font-size: .72rem;
        font-weight: 900;
        font-variant-caps: all-small-caps;
        letter-spacing: .08em;
        line-height: 1.1;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .clock-board-owner:hover,
    .clock-board-owner:focus-visible {
        text-decoration: underline;
    }
    doskvol-clock {
        color: var(--category-color);
    }
    doskvol-clock::part(face) {
        --clock-fill: repeating-linear-gradient(315deg, transparent 0 2px, currentColor 2px 3px);
        --clock-preview-fill: repeating-linear-gradient(315deg, transparent 0 3px, currentColor 3px 4px);
    }
    doskvol-clock::part(confirm) {
        background-color: var(--paper);
    }
    doskvol-clock:lang(tr):not(:state(done))::part(action)::after,
    doskvol-clock:lang(tr):not(:state(done))::part(confirm)::after {
        content: "Kaldır" / "Saati kaldır";
    }
    doskvol-clock:lang(tr):state(done):not([repeating])::part(action)::after,
    doskvol-clock:lang(tr):state(done):not([repeating])::part(confirm)::after {
        content: "Bitir" / "Saati bitir";
    }
    doskvol-clock:lang(tr):state(done)[repeating]::part(action)::after,
    doskvol-clock:lang(tr):state(done)[repeating]::part(confirm)::after {
        content: "Tekrarla" / "Saati tekrarla";
    }
    doskvol-clock:lang(en):not(:state(done))::part(action)::after,
    doskvol-clock:lang(en):not(:state(done))::part(confirm)::after {
        content: "Remove" / "Remove clock";
    }
    doskvol-clock:lang(en):state(done):not([repeating])::part(action)::after,
    doskvol-clock:lang(en):state(done):not([repeating])::part(confirm)::after {
        content: "Finish" / "Finish clock";
    }
    doskvol-clock:lang(en):state(done)[repeating]::part(action)::after,
    doskvol-clock:lang(en):state(done)[repeating]::part(confirm)::after {
        content: "Repeat" / "Repeat clock";
    }
    .clock-label {
        position: relative;
        max-inline-size: 100%;
        --doskvol-edit-text-align: center;
    }
    .clock-edit-control {
        position: absolute;
        width: 20px;
        height: 20px;
        padding: 3px;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: var(--paper);
        color: inherit;
        cursor: pointer;
    }
    .clock-edit-control svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }
    .clock-edit-control path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .tier-edit {
        anchor-name: --tier-edit;
        left: -9px;
        top: -9px;
        opacity: 0;
        transition: opacity 120ms ease;
    }
    .faction-roman-editor:hover .tier-edit,
    .tier-edit:focus-visible,
    .faction-rank.editing-tier .tier-edit {
        opacity: 1;
    }
    .tier-menu {
        position: fixed;
        position-anchor: --tier-edit;
        position-area: right center;
        z-index: 4;
        display: none;
        gap: 4px;
        margin-left: 4px;
        padding: 4px;
        border: 1px solid color-mix(in srgb, var(--category-color) 80%, var(--black-ink));
        border-radius: 17px;
        background: var(--category-color);
    }
    .faction-rank.editing-tier .tier-menu {
        display: flex;
    }
    .tier-option {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: var(--paper);
        color: var(--category-color);
        font: 800 10px/1 "Playfair", serif;
        cursor: pointer;
    }
    .category-edit {
        anchor-name: --category-edit;
        left: -9px;
        top: -9px;
        opacity: 0;
        transition: opacity 120ms ease;
    }
    .faction-category-editor:hover .category-edit,
    .category-edit:focus-visible,
    .faction-category-editor.editing-category .category-edit {
        opacity: 1;
    }
    .category-menu {
        position: fixed;
        position-anchor: --category-edit;
        position-area: top center;
        z-index: 4;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-bottom: 4px;
        padding: 4px;
        border: 1px solid var(--black-ink);
        border-radius: 14px;
        background: var(--paper);
    }
    .faction-category-editor.editing-category .category-menu {
        display: flex;
    }
    .category-option {
        padding: 3px 10px;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: var(--paper);
        color: var(--category-color);
        font: 800 11px/1 "Playfair", serif;
        white-space: nowrap;
        cursor: pointer;
    }
    .playbook-edit {
        anchor-name: --playbook-edit;
        left: -9px;
        top: -9px;
        opacity: 0;
        transition: opacity 120ms ease;
    }
    .crew-playbook-editor:hover .playbook-edit,
    .playbook-edit:focus-visible,
    .crew-playbook-editor.editing-category .playbook-edit {
        opacity: 1;
    }
    .playbook-menu {
        position: fixed;
        position-anchor: --playbook-edit;
        position-area: top center;
        z-index: 4;
        display: none;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 4px;
        padding: 4px;
        border: 1px solid var(--black-ink);
        border-radius: 14px;
        background: var(--paper);
    }
    .crew-playbook-editor.editing-category .playbook-menu {
        display: flex;
    }
    .playbook-option {
        padding: 3px 10px;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: var(--paper);
        color: var(--black-ink);
        font: 800 11px/1 "Playfair", serif;
        white-space: nowrap;
        cursor: pointer;
    }
    .clock-add {
        position: absolute;
        anchor-name: --clock-add;
        z-index: 3;
        right: -9px;
        top: -9px;
        width: 22px;
        height: 22px;
        padding: 3px;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: var(--paper);
        color: inherit;
        opacity: 0;
        cursor: pointer;
        transition: opacity 120ms ease;
    }
    .faction-clocks:hover .clock-add,
    .faction-clocks:not(:has(doskvol-clock)) .clock-add,
    .clock-add:focus-visible,
    .faction-clocks.adding-clock .clock-add {
        opacity: 1;
    }
    .faction-clocks.adding-clock .clock-add {
        color: var(--neighbor);
    }
    .clock-add svg {
        display: block;
        width: 100%;
        height: 100%;
        transition: transform 120ms ease;
    }
    .faction-clocks.adding-clock .clock-add svg {
        transform: rotate(45deg);
    }
    .clock-add path {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }
    .clock-size-menu {
        position: fixed;
        position-anchor: --clock-add;
        position-area: left center;
        z-index: 2;
        display: none;
        gap: 4px;
        margin-right: 4px;
        padding: 4px;
        border: 1px solid color-mix(in srgb, var(--neighbor) 80%, var(--black-ink));
        border-radius: 17px;
        background: var(--neighbor);
    }
    .faction-clocks.adding-clock .clock-size-menu {
        display: flex;
    }
    .faction-clocks.repeat-clock .clock-size-menu,
    .faction-clocks.shift-repeat .clock-size-menu {
        background: var(--category-color);
    }
    .clock-size,
    .clock-repeat {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: var(--paper);
        color: var(--neighbor);
        font: 800 10px/1 "Playfair", serif;
        cursor: pointer;
    }
    .clock-repeat {
        color: var(--category-color);
    }
    .clock-repeat svg {
        display: block;
        width: 100%;
        height: 100%;
    }
    .clock-repeat path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .faction-clocks.repeat-clock .clock-repeat,
    .faction-clocks.shift-repeat .clock-repeat {
        background: var(--category-color);
        color: var(--paper);
    }
    .faction-fields {
        display: grid;
        gap: 7px;
        margin-top: 10px;
    }
    .faction-field {
        border-top: 1px solid color-mix(in srgb, var(--neighbor) 45%, transparent);
        padding-top: 6px;
    }
    .faction-field dt {
        font-weight: 800;
    }
    .faction-field dd {
        margin: 2px 0 0;
    }
    .faction-field-value > :first-child {
        margin-top: 0;
    }
    .faction-field-value > :last-child {
        margin-bottom: 0;
    }
    .faction-field-value :is(b, strong) {
        font-weight: 700;
    }
    .faction-field-value :is(i, em) {
        font-style: italic;
    }
    .faction-field-value :is(a) {
        color: var(--category-color);
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    @container doskvol (orientation: landscape) {
        .network-layout {
            grid-template-areas:
                "graph selection"
                "graph selection";
        }
    }
    @container (width < 30em) {
        .faction-identity {
            grid-row: 2;
            grid-column: 1 / -1;
        }
    }
    @container (width < 19em) {
        .clock-board {
            grid-template-columns: 1fr;
        }
        .clock-board-group {
            grid-column: 1 / -1;
            grid-template-columns: repeat(auto-fill, 82px);
        }
    }
    @container (width < 40em) {
        .faction-head:has(doskvol-clock:nth-of-type(3)) .faction-identity{
            grid-row: 2;
            grid-column: 1 / -1;
        }
    }
}

html,
body {
    scrollbar-width: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
}

/* Local history, immutable sharing, and the latest card details. */
#doskvol-network .network-layout {
    position: relative;
}

#doskvol-network .history-controls,
#doskvol-network .share-controls,
#doskvol-network .theme-controls {
    position: absolute;
    z-index: 8;
    top: 10px;
    display: flex;
    gap: 7px;
    @media print {
        display: none;
    }
}

#doskvol-network .history-controls { left: 10px; }
#doskvol-network .share-controls { right: 10px; }
#doskvol-network .theme-controls { right: 59px; }

#doskvol-network :is(.history-controls, .share-controls, .theme-controls) button {
    border: 1.5px solid var(--black-ink);
    background: var(--paper);
    color: var(--black-ink);
    font: 700 .82rem/1.15 "Playfair", serif;
    cursor: pointer;
}

#doskvol-network :is(.history-controls, .share-controls) button:disabled {
    opacity: .28;
    cursor: default;
}

#doskvol-network :is(.history-undo, .history-redo, .history-toggle, .history-delete, .ddd-toggle, .share-toggle, .theme-toggle) {
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 50%;
}

#doskvol-network .ddd-toggle[aria-pressed="true"] {
    background: var(--black-ink);
    color: var(--paper);
}

#doskvol-network :is(.history-controls, .share-controls, .theme-controls) svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#doskvol-network .theme-symbols {
    position: absolute;
    width: 0;
    height: 0;
}

#doskvol-network .theme-controls svg { pointer-events: none; }

#doskvol-network .theme-toggle { anchor-name: --theme-toggle; }
#doskvol-network .theme-toggle .theme-icon { display: none; }
#doskvol-network.theme-light .theme-toggle .theme-icon-light,
#doskvol-network.theme-system .theme-toggle .theme-icon-light,
#doskvol-network.theme-dark .theme-toggle .theme-icon-dark { display: block; }

@media (prefers-color-scheme: dark) {
    #doskvol-network.theme-system .theme-toggle .theme-icon-light { display: none; }
    #doskvol-network.theme-system .theme-toggle .theme-icon-dark { display: block; }
}

#doskvol-network .theme-menu {
    position: fixed;
    position-anchor: --theme-toggle;
    position-area: bottom center;
    display: none;
    gap: 5px;
    margin: 7px 0 0;
    padding: 5px;
    border: 1.5px solid var(--black-ink);
    border-radius: 18px;
    background: var(--paper);
    color: var(--black-ink);
}

#doskvol-network .theme-menu:popover-open { display: flex; }

#doskvol-network .theme-menu .theme-option {
    display: grid;
    width: 56px;
    min-height: 52px;
    padding: 6px;
    place-items: center;
    gap: 2px;
    border-radius: 13px;
    font-size: 11px;
}

#doskvol-network .theme-option .theme-icon {
    width: 25px;
    height: 25px;
}

#doskvol-network .theme-option[aria-pressed="true"] {
    background: var(--black-ink);
    color: var(--paper);
}

#doskvol-network .share-toggle { anchor-name: --share-toggle; }

#doskvol-network :is(.tier-menu, .category-menu, .playbook-menu, .district-stat-menu, .clock-size-menu) {
    z-index: 20;
}

#doskvol-network .share-popover {
    position: fixed;
    position-anchor: --share-toggle;
    position-area: bottom left;
    z-index: 12;
    display: none;
    width: min(23rem, calc(100vw - 24px));
    margin: 7px 0 0;
    padding: 14px;
    border: 1.5px solid var(--black-ink);
    border-radius: 16px;
    corner-shape: superellipse(1.35);
    background: color-mix(in srgb, var(--neighbor) 22%, var(--paper));
    color: var(--black-ink);
    box-shadow: 3px 4px 0 color-mix(in srgb, var(--black-ink) 16%, transparent);
}

#doskvol-network .share-controls.open .share-popover {
    display: grid;
    gap: 9px;
}

#doskvol-network .share-popover > button,
#doskvol-network .snapshot-last {
    min-height: 36px;
    border-radius: 999px;
}

#doskvol-network .share-popover > button {
    padding: 7px 10px;
}

#doskvol-network button.snapshot-copy {
    border: none;
    border-left: solid 1px currentColor;
}

#doskvol-network .snapshot-last {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--black-ink);
    background: var(--paper);
}

#doskvol-network .snapshot-link {
    min-width: 0;
    padding: 8px;
    overflow: hidden;
    color: var(--black-ink);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#doskvol-network .snapshot-copy {
    border: 0;
    border-left: 1px solid var(--black-ink);
    border-radius: 0;
    padding-inline: 10px;
}

#doskvol-network .snapshot-message {
    min-height: 1.2em;
    text-align: center;
    font-size: .78rem;
}

#doskvol-network .turnstile-slot:not(:empty) {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 8px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--neighbor) 65%, var(--black-ink));
    border-radius: 12px;
    background: var(--paper);
}

#doskvol-network .faction-rank[data-hold="false"] .faction-roman { font-weight: 100; }
#doskvol-network .faction-rank[data-hold="true"] .faction-roman { font-weight: 900; }
#doskvol-network .hold-option[aria-pressed="true"] {
    background: var(--category-color);
    color: var(--paper);
}

#doskvol-network .crew-note-adds {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

#doskvol-network .crew-note-add {
    padding: 5px 10px;
    border: 1px solid var(--category-color);
    border-radius: 999px;
    background: transparent;
    color: var(--category-color);
    font: 700 .82rem/1.15 "Playfair", serif;
    cursor: pointer;
}

#doskvol-network .crew-relation-note dt { color: var(--category-color); }
#doskvol-network .crew-relation-status.positive { color: var(--friend); }
#doskvol-network .crew-relation-status.negative { color: var(--enemy); }
#doskvol-network .crew-relation-status.neutral { color: var(--black-ink); }

#doskvol-network.history-view .network-layout {
    grid-template-areas: "graph graph" "graph graph";
}

#doskvol-network.history-view .selection,
#doskvol-network.history-view :is(.history-undo, .history-redo, .ddd-toggle) {
    display: none;
}

#doskvol-network .history-toggle[aria-pressed="true"] {
    background: var(--black-ink);
    color: var(--paper);
}

#doskvol-network .history-delete { display: none; }

#doskvol-network.history-view .history-delete { display: block; }

#doskvol-network .history-delete[aria-pressed="true"] {
    border-color: var(--enemy);
    background: var(--enemy);
    color: var(--paper);
}

#doskvol-network .history-links path {
    fill: none;
    stroke: color-mix(in srgb, var(--black-ink) 62%, transparent);
    stroke-width: 1.6;
    stroke-linecap: round;
}

#doskvol-network .history-links path.delete-preview {
    stroke: var(--enemy);
    opacity: 1;
}

#doskvol-network .history-link-count {
    fill: var(--black-ink);
    paint-order: stroke fill;
    stroke: var(--paper);
    stroke-width: 5px;
    stroke-linejoin: round;
    font: 700 12px/1 "Playfair", serif;
    pointer-events: none;
}


#doskvol-network .history-link-count.delete-preview {
    fill: var(--enemy);
    font-size: 18px;
}

#doskvol-network .history-node {
    color: var(--black-ink);
    cursor: pointer;
}

#doskvol-network.history-delete-mode .history-node.starting { cursor: not-allowed; }

#doskvol-network .history-node.delete-preview {
    color: var(--enemy);
}

#doskvol-network .history-node.delete-preview :is(.tier-mark, .node-label) {
    fill: var(--enemy);
}

#doskvol-network .history-node > :is(path, circle, rect):not(.history-node-hatch) {
    stroke: currentColor;
    stroke-width: 1.8;
}

#doskvol-network .history-node.active > :is(path, circle, rect):not(.history-node-hatch),
#doskvol-network .history-node:is(:hover, :focus-visible) > :is(path, circle, rect):not(.history-node-hatch) {
    stroke-width: 4;
}

#doskvol-network .history-node:focus-visible {
    outline: none;
}

#doskvol-network .history-node-hatch {
    stroke: currentColor;
    stroke-width: 1.2;
    pointer-events: none;
}

#doskvol-network .history-node .node-label {
    font-family: "Playfair", serif;
    font-size: 12px;
    font-weight: 700;
}

#doskvol-network .history-node.branch .node-label {
    font-family: "Norican", cursive;
    font-size: 18px;
    font-weight: 400;
}

#doskvol-network .history-warning {
    fill: var(--enemy);
    font: 700 12px/1.2 "Playfair", serif;
}

#doskvol-network .history-delete-confirm {
    overflow: visible;
}

#doskvol-network .history-delete-confirm button {
    width: 48px;
    height: 48px;
    margin: 0 13px;
    padding: 0;
    border: 1.5px solid var(--enemy);
    border-radius: 50%;
    background: var(--paper);
    color: var(--enemy);
    font: 800 11px/1 "Playfair", serif;
    cursor: pointer;
}

#doskvol-network .history-delete-confirm button:focus-visible {
    outline: 2px solid var(--enemy);
    outline-offset: 2px;
}

#doskvol-network .history-delete-confirm button:disabled {
    opacity: .55;
    cursor: wait;
}

/* Node parts render directly; relation values are mirrored into the Shadow SVG. */
#doskvol-network doskvol-graph {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background-color: var(--paper);
    background-image: radial-gradient(#887b651f 0.6px, transparent 0.8px);
    background-size: 7px 9px;
}

#doskvol-network doskvol-graph > :is(doskvol-ally, doskvol-enemy, doskvol-status, doskvol-hq, doskvol-turf, doskvol-neighbor) { display: none; }

#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district) {
    width: 10px;
    height: 10px;
    color: var(--black-ink);
    --node-fill: var(--paper);
    opacity: 1;
}

#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district)::part(shape) {
    border: 1.8px solid currentColor;
    background:
        repeating-linear-gradient(315deg, transparent 0 2px, currentColor 2px 3px), var(--node-fill);
}

#doskvol-network doskvol-district::part(shape) {
    background:
        repeating-linear-gradient(45deg, transparent 0 2px, currentColor 2px 3px), var(--node-fill);
}

#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district)::part(tier) {
    color: currentColor;
    font-family: "Playfair", serif;
    font-size: 48cqi;
    font-weight: 900;
    font-stretch: 90%;
    font-optical-sizing: auto;
    list-style-type: doskvol-tier;
    -webkit-text-stroke: 3px var(--node-fill);
    paint-order: stroke fill;
}

#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district)::part(label) {

    font-family: "Norican", cursive;
    font-size: 11px;
    font-weight: 400;
    -webkit-text-stroke: 3px var(--node-fill);
    paint-order: stroke fill;
}

#doskvol-network doskvol-graph[ddd] :is(doskvol-crew, doskvol-faction, doskvol-district)::part(ddd-dot) {
    visibility: visible;
    box-shadow: 0 0 0 1px var(--paper);
}

#doskvol-network doskvol-graph[ddd] :is(doskvol-crew, doskvol-faction, doskvol-district)::part(ddd-dot):state(ally) {
    background-color: var(--friend);
}

#doskvol-network doskvol-graph[ddd] :is(doskvol-crew, doskvol-faction, doskvol-district)::part(ddd-dot):state(enemy) {
    background-color: var(--enemy);
}

#doskvol-network doskvol-crew { width: 42px; height: 42px; }
#doskvol-network doskvol-district { color: var(--neighbor); }
#doskvol-network doskvol-district::part(label) { color: currentColor; }
#doskvol-network doskvol-faction[tier="1"] { width: 14.4px; height: 14.4px; }
#doskvol-network doskvol-faction[tier="2"] { width: 18.8px; height: 18.8px; }
#doskvol-network doskvol-faction[tier="3"] { width: 23.2px; height: 23.2px; }
#doskvol-network doskvol-faction[tier="4"] { width: 27.6px; height: 27.6px; }
#doskvol-network doskvol-faction[tier="5"] { width: 32px; height: 32px; }
#doskvol-network doskvol-faction[tier="6"] { width: 36.4px; height: 36.4px; }
#doskvol-network doskvol-district[wealth="0"] { width: 14px; height: 14px; }
#doskvol-network doskvol-district[wealth="1"] { width: 19px; height: 19px; }
#doskvol-network doskvol-district[wealth="2"] { width: 24px; height: 24px; }
#doskvol-network doskvol-district[wealth="3"] { width: 29px; height: 29px; }
#doskvol-network doskvol-district[wealth="4"] { width: 34px; height: 34px; }
#doskvol-network doskvol-faction[category="underworld"] { color: var(--underground); }
#doskvol-network doskvol-faction[category="institutions"] { color: var(--institutions); }
#doskvol-network doskvol-faction[category="labor"] { color: var(--labor); }
#doskvol-network doskvol-faction[category="fringe"] { color: var(--fringe); }
#doskvol-network doskvol-faction[category="citizens"] { color: var(--citizens); }

#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district):state(hovered)::part(shape) { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--black-ink); }
#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district):state(hovered) { opacity: 1; }
#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district):state(selected)::part(shape) { box-shadow: 0 0 0 1px var(--paper), 0 0 0 4px currentColor; }
#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district):state(dimmed)::part(shape),
#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district):state(dimmed)::part(label) { opacity: .13; }
#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district):state(draft-target)::part(shape) { border-color: var(--friend); border-width: 3px; }
#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district):state(draft-hover)::part(shape) { border-width: 5px; }
#doskvol-network :is(doskvol-crew, doskvol-faction, doskvol-district):state(draft-hover) { opacity: 1; }
#doskvol-network doskvol-graph[pending] :is(doskvol-crew, doskvol-faction, doskvol-district)::part(shape) { pointer-events: none; }

@supports not (border-shape: shape(from 50% 0%, line to 100% 100%, line to 0% 100%, close)) {
    #doskvol-network doskvol-crew::part(shape) { border-color: transparent; }
}

#doskvol-network :is(doskvol-ally, doskvol-enemy, doskvol-status, doskvol-hq, doskvol-turf, doskvol-neighbor) {
    stroke: var(--black-ink);
    stroke-width: 1.6px;
    stroke-dasharray: none;
    color: var(--black-ink);
    font-family: "Norican", cursive;
    font-size: 11px;
    opacity: .42;
}

#doskvol-network doskvol-ally { stroke: var(--friend); color: var(--friend); }
#doskvol-network doskvol-enemy { stroke: var(--enemy); color: var(--enemy); }
#doskvol-network doskvol-status[value^="-"] { stroke: var(--enemy); color: var(--enemy); }
#doskvol-network doskvol-status:not([value^="-"]):not([value="0"]) { stroke: var(--friend); color: var(--friend); }
#doskvol-network doskvol-hq { stroke-width: 1.25px; }
#doskvol-network doskvol-turf { visibility: hidden; stroke-width: 1.1px; stroke-dasharray: 5px 5px; }
#doskvol-network doskvol-neighbor { stroke: var(--neighbor); color: var(--neighbor); }
#doskvol-network :is(doskvol-ally, doskvol-enemy, doskvol-status, doskvol-hq, doskvol-turf, doskvol-neighbor):is(:state(hovered), :state(menu-context)) { stroke-width: 3px; opacity: 1; }
#doskvol-network :is(doskvol-ally, doskvol-enemy, doskvol-status, doskvol-hq, doskvol-turf, doskvol-neighbor):state(dimmed) { opacity: .05; }
#doskvol-network :is(doskvol-ally, doskvol-enemy, doskvol-status, doskvol-hq, doskvol-turf, doskvol-neighbor):state(secondary) { opacity: .18; }
#doskvol-network doskvol-turf:state(selection-related) { visibility: visible; opacity: .72; }
#doskvol-network doskvol-graph[highlight-changes] doskvol-turf[changed] { visibility: visible; opacity: .72; }

#doskvol-network .graph-surface > .history-surface { display: none; }
#doskvol-network.history-view doskvol-graph { display: none; }
#doskvol-network.history-view .graph-surface > .history-surface { display: block; }

#doskvol-network :is(.relation-label-editor, .relation-menu, .node-menu, .node-name-editor, .draft-category-menu) {
    position: fixed;
    inset: auto;
    z-index: 30;
    width: max-content;
    height: auto;
    max-width: calc(100vw - 16px);
}

#doskvol-network :is(.relation-label-form, .node-name-editor doskvol-edit) {
    width: min(12rem, calc(100vw - 4rem));
}

#doskvol-network .context-menu-anchor {
    position: fixed;
    display: block;
    pointer-events: none;
    anchor-name: --context-menu;
}

#doskvol-network :is(.node-menu, .relation-menu) {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    border: 1px solid var(--black-ink);
    border-radius: 18px;
    padding: 6px;
    background: var(--paper);
    box-shadow: 2px 3px 0 color-mix(in srgb, var(--black-ink) 25%, transparent);
}

#doskvol-network :is(.node-menu .node-relation-options, .relation-menu .relation-type-options) {
    display: contents;
}

@supports (position-anchor: --context-menu) {
    #doskvol-network :is(.node-menu, .relation-menu) {
        position-anchor: --context-menu;
        position-area: right center;
        position-try-fallbacks: flip-inline, flip-block, flip-start;
        margin-inline-start: 8px;
        left: auto !important;
        top: auto !important;
    }
    #doskvol-network .node-name-editor {
        position-anchor: --context-menu;
        position-area: top center;
        position-try-fallbacks: flip-block, flip-inline, flip-start;
        margin-block-end: 12px;
        left: auto !important;
        top: auto !important;
    }
}