@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');

:root {
    color-scheme: light dark;
    background-color: var(
        --background,
        var(
            --color-background-primary,
            light-dark(rgb(255 255 255), rgb(24 24 24))
        )
    ) !important;

    /* Agent-facing contract; keep in sync with SKILL.md. */
    --background: var(
        --color-background-primary,
        light-dark(rgb(255 255 255), rgb(24 24 24))
    );
    --foreground: var(
        --color-text-primary,
        light-dark(rgb(26 28 31), rgb(255 255 255))
    );
    --card: color-mix(in oklab, var(--foreground) 5%, var(--background));
    --card-foreground: var(
        --color-text-primary,
        light-dark(rgb(26 28 31), rgb(255 255 255))
    );
    --popover: var(
        --color-background-secondary,
        light-dark(rgb(255 255 255), rgb(45 45 45))
    );
    --popover-foreground: var(
        --color-text-primary,
        light-dark(rgb(26 28 31), rgb(255 255 255))
    );
    --primary: var(
        --color-text-info,
        light-dark(rgb(51 156 255), rgb(131 195 255))
    );
    --primary-foreground: var(
        --color-text-inverse,
        light-dark(rgb(255 255 255), rgb(13 13 13))
    );
    --muted: color-mix(in srgb, var(--foreground) 10%, transparent);
    --muted-foreground: var(
        --color-text-secondary,
        light-dark(rgb(26 28 31 / 49.4%), rgb(255 255 255 / 49.8%))
    );
    --accent: var(
        --color-background-info,
        light-dark(rgb(229 242 255), rgb(13 39 63))
    );
    --destructive: var(
        --color-text-warning,
        light-dark(rgb(226 85 7), rgb(255 133 73))
    );
    --border: var(
        --color-border-secondary,
        light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%))
    );
    --font-size-base: var(--font-text-md-size, 14px);

    /* Internal implementation variables; not part of the agent contract. */
    --font-sans: -apple-system, system-ui, "Segoe UI", sans-serif;
    --font-mono:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    --font-size-normal: max(11px, var(--font-size-base));
    --font-size-tooltip: calc(var(--font-size-base) - 1px);
    --font-size-small: max(11px, calc(var(--font-size-base) - 2px));
    --font-size-h1: calc(var(--font-size-normal) * 1.7142857143);
    --font-size-h2: calc(var(--font-size-normal) * 1.4285714286);
    --font-size-h3: calc(var(--font-size-normal) * 1.2857142857);
    --font-weight-normal: 430;
    --font-weight-medium: 500;
    --line-height-normal: calc(var(--font-size-normal) * 1.5);
    --line-height-tooltip: calc(var(--font-size-tooltip) * 1.4285714286);
    --line-height-small: calc(var(--font-size-small) + 4px);
    --radius: var(--border-radius-lg, 12.5px);
    --radius-sm: calc(var(--radius) * 0.6);
    --radius-lg: var(--radius);
    --radius-2xl: calc(var(--radius) * 1.6);

    /* Legacy aliases; not part of the current agent contract. */
    --viz-text: var(--foreground);
    --viz-accent: var(--primary);
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html > body {
    /* Preserve MCP aliases for older inline renderers without creating :root cycles. */
    --color-background-primary: var(
        --background,
        light-dark(rgb(255 255 255), rgb(24 24 24))
    );
    --color-text-primary: var(
        --foreground,
        light-dark(rgb(26 28 31), rgb(255 255 255))
    );
    --color-border-secondary: var(
        --border,
        light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%))
    );

    margin: 0;
    padding: 5px;
    color: var(--foreground);
    background: transparent !important;
    font-family: var(--font-sans);
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

a {
    color: color-mix(in srgb, var(--viz-accent) 80%, var(--viz-text) 20%);
    cursor: pointer;
    font-weight: var(--font-weight-medium, 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;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-block: 0;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
}

h3,
h4,
h5,
h6 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
}

th {
    font-weight: var(--font-weight-medium);
}

code:not(pre code) {
    display: inline;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    corner-shape: superellipse(1.5);
    background: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.92em;
    overflow-wrap: anywhere;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    word-break: break-word;
}

#widget {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0;
    background: transparent !important;
}

.card {
    min-width: 0;
    padding: 12px;
    overflow: hidden;
    overflow-wrap: break-word;
    border-radius: var(--radius-2xl);
    corner-shape: superellipse(1.5);
    color: var(--card-foreground);
    background: var(--card);
}

#widget > :not(.card) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tooltip {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: max-content;
    max-width: min(
        20rem,
        var(--tooltip-available-width, calc(100vw - 10px)),
        calc(100vw - 10px)
    );
    max-height: min(
        var(--tooltip-available-height, calc(100vh - 10px)),
        calc(100vh - 10px)
    );
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    corner-shape: superellipse(1.5);
    color: var(--popover-foreground);
    background: var(--popover);
    box-shadow: none;
    font-size: var(--font-size-tooltip);
    line-height: var(--line-height-tooltip);
    overflow-wrap: break-word;
    white-space: normal;
    pointer-events: none;
    user-select: none;
}

small,
.text-small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

.text-muted {
    color: var(--muted-foreground);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[data-lucide] {
    stroke-width: 1.6;
}

svg {
    display: block;
    max-width: 100%;
    height: auto;
}

#widget > svg {
    width: 100%;
}

/* Model-authored chart rules can otherwise stretch icons after these styles load. */
svg.lucide {
    display: block;
    width: 16px !important;
    height: 16px !important;
    flex: none;
    margin: 0 !important;
    stroke-width: 1.6;
}

.text-warning,
.text-destructive {
    color: var(--destructive);
}

html > body {
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0;
    background: #eee5cd;
    width: 100%;
    min-height: 100%;
}
#doskvol-network {
    color: #282119;
    width: 100cqw;
    height: 100cqh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #eee5cd;
    font-family: "Playfair", serif;
    container: doskvol / size;
    overflow: hidden;
    scrollbar-color: var(--neighbor) var(--paper);
    scrollbar-gutter: stable;
    --paper: #eee5cd;
    --friend: #102f55;
    --enemy: #6c101b;
    --black-ink: #211d19;
    --neighbor: #b89566;
    --underground: #781c2b;
    --institutions: #173e6d;
    --labor: #24543a;
    --fringe: #5d2d68;
    --citizens: #75451f;

    .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;
    }
    .link {
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        opacity: 0.42;
        filter: url(#ink-wobble);
        pointer-events: none;
    }
    .link.ally {
        stroke: var(--friend);
    }
    .link.enemy {
        stroke: var(--enemy);
    }
    .link.status.positive,
    .status-stack.positive .status-inner {
        stroke: var(--friend);
    }
    .link.status.negative,
    .status-stack.negative .status-inner {
        stroke: var(--enemy);
    }
    .link.status.neutral,
    .status-stack.neutral .status-inner {
        stroke: var(--black-ink);
    }
    .link.status-2 { stroke-width: 5px; }
    .link.status-3 { stroke-width: 8px; }
    .status-stack {
        opacity: 0.42;
        pointer-events: none;
    }
    .status-stack use { filter: url(#ink-wobble); }
    &.has-selection .status-stack:not(.dim) { opacity: 0.72; }
    .status-stack .status-gap {
        fill: none;
        stroke: var(--paper);
        stroke-width: 2px;
    }
    .status-stack.status-3 .status-gap { stroke-width: 5px; }
    .status-stack .status-inner {
        fill: none;
        stroke-width: 1.6px;
        stroke-linecap: round;
    }
    .link.neighbor {
        stroke: var(--neighbor);
        stroke-dasharray: none;
    }
    .link.hq {
        stroke: var(--black-ink);
        stroke-width: 1.25;
    }
    .link.turf {
        stroke: var(--black-ink);
        stroke-width: 1.1;
        stroke-dasharray: 5 5;
        opacity: 0 !important;
        pointer-events: none;
    }
    .link.turf.visible {
        opacity: 0.72 !important;
    }
    .link.hovered {
        stroke-width: 3px;
    }
    .link.status-2.hovered { stroke-width: 7px; }
    .link.status-3.hovered { stroke-width: 10px; }
    .link-hit {
        fill: none;
        stroke: transparent;
        stroke-width: 12px;
        pointer-events: none;
    }
    &.has-selection .link:not(.dim, .turf) {
        opacity: 0.72;
    }
    &.snapshot-changes .link:not(.dim, .turf),
    &.snapshot-changes .status-stack:not(.dim) {
        opacity: 0.72;
    }
    .link-hit.editable {
        pointer-events: stroke;
        cursor: pointer;
    }
    .link-label {
        opacity: 0;
        fill: var(--black-ink);
        stroke: var(--paper);
        stroke-width: 2px;
        paint-order: stroke fill;
        font-family: "Norican", cursive;
        font-size: 85%;
        pointer-events: none;
    }
    .link-label.enemy {
        fill: var(--enemy);
    }
    .link-label.ally {
        fill: var(--friend);
    }
    .link-label.status.positive { fill: var(--friend); }
    .link-label.status.negative { fill: var(--enemy); }
    .link-label.visible {
        opacity: 1;
        pointer-events: visiblePainted;
        cursor: text;
    }
    .relation-label-anchor {
        overflow: visible;
        pointer-events: none;
    }
    .link-label.edit-target {
        cursor: text;
    }
    .relation-label-editor,
    .node-name-editor {
        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-form {
        display: none;
        align-items: center;
        gap: 4px;
        padding: 4px;
        border: 1px solid currentColor;
        border-radius: 17px;
        background: var(--paper);
    }
    .relation-label-editor.editing .relation-label-form,
    .node-name-editor.editing .node-name-form {
        display: flex;
    }
    .relation-label-form .clock-edit-control,
    .node-name-form .clock-edit-control {
        position: static;
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
    }
    .relation-label-input,
    .node-name-input {
        width: 12rem;
        border: 0;
        border-bottom: 1px solid currentColor;
        padding: 2px 4px;
        outline: 0;
        background: var(--paper);
        color: var(--black-ink);
        font-family: "Norican", cursive;
        text-align: center;
    }
    .node circle,
    .node rect,
    .node > path {
        stroke: var(--black-ink);
        stroke-width: 1.25;
        filter: url(#ink-wobble);
    }
    .node .node-hatch,
    .node .district-hatch {
        stroke: none !important;
        filter: none;
        pointer-events: none;
    }
    .node.source > circle {
        stroke: var(--black-ink);
        stroke-width: 1.8;
    }
    :is(.node, .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;
    }
    :is(.node, .history-node) .tier-mark {
        font-family: "Playfair", serif;
        font-weight: 900;
        font-stretch: 90%;
        font-optical-sizing: auto;
        stroke-width: max(2px, .25em);
        .branch & {
            font-size: 1.5em;
        }
    }
    &.adding-relation .node {
        opacity: 0.12 !important;
    }
    &.adding-relation .node.relation-source,
    &.adding-relation .node.relation-target {
        opacity: 1 !important;
    }
    &.adding-relation .link:not(.turf),
    &.adding-relation .link.turf.visible,
    &.adding-relation .status-stack,
    &.adding-relation .link-label {
        opacity: 0.12 !important;
    }
    &.adding-relation .node.relation-source {
        cursor: not-allowed !important;
    }
    &.adding-relation .node.relation-target-hover circle,
    &.adding-relation .node.relation-target-hover rect,
    &.adding-relation .node.relation-target-hover > path:not(.node-hatch) {
        stroke-width: 4px;
    }
    .relation-draft-link,
    .relation-draft-node {
        display: none;
        pointer-events: none;
    }
    .relation-draft-link.visible,
    .relation-draft-node.visible {
        display: block;
    }
    .relation-draft-link {
        fill: none;
        stroke: var(--black-ink);
        stroke-width: 1.5px;
    }
    .relation-draft-link.ally { stroke: var(--friend); }
    .relation-draft-link.enemy { stroke: var(--enemy); }
    .relation-draft-link.status { stroke: var(--black-ink); }
    .relation-draft-link.neighbor { stroke: var(--neighbor); }
    .relation-draft-link.turf { stroke-dasharray: 5 5; }
    .relation-draft-node {
        fill: var(--paper);
        stroke: var(--black-ink);
        stroke-width: 1.5px;
        stroke-dasharray: 3 3;
    }
    .relation-draft-node.over-target {
        display: none;
    }
    .relation-draft-cancel {
        display: none;
        fill: var(--enemy);
        stroke: var(--paper);
        stroke-width: 1px;
        paint-order: stroke fill;
        font-family: "Playfair", serif;
        font-size: 24px;
        font-weight: 900;
        pointer-events: none;
    }
    .relation-draft-cancel.visible {
        display: block;
    }
    .node.districts rect {
        stroke: var(--neighbor);
    }
    .node.districts text {
        fill: var(--neighbor);
    }
    .dim {
        opacity: 0.1 !important;
    }
    .focus circle,
    .focus rect,
    .focus > path:not(.node-hatch) {
        stroke-width: 4;
    }
    .selection {
        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;
    }
    .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;
    }
    .district-text-editor {
        position: relative;
    }
    .district-text-value:empty,
    .faction-text-value:empty,
    .faction-field-value:empty {
        min-height: 1.25em;
    }
    .district-text-input,
    .district-text-cancel,
    .district-text-save {
        display: none;
    }
    .district-text-input {
        box-sizing: border-box;
        width: 100%;
        border: 1px solid var(--neighbor);
        border-radius: 2px;
        padding: 5px 24px;
        background: var(--paper);
        color: var(--black-ink);
        font: inherit;
    }
    textarea.district-text-input {
        min-height: 6em;
        resize: vertical;
    }
    .district-text-editor[data-field="name"] .district-text-input {
        color: var(--neighbor);
        font-weight: 800;
    }
    .district-text-edit,
    .district-text-cancel {
        left: -9px;
        top: -9px;
    }
    .district-text-edit {
        opacity: 0;
        transition: opacity 120ms ease;
    }
    .district-text-save {
        right: -9px;
        bottom: -9px;
    }
    .district-text-editor:hover .district-text-edit,
    .district-text-edit:focus-visible {
        opacity: 1;
    }
    .district-text-editor.editing .district-text-value,
    .district-text-editor.editing .district-text-edit {
        display: none;
    }
    .district-text-editor.editing .district-text-input,
    .district-text-editor.editing .district-text-cancel,
    .district-text-editor.editing .district-text-save {
        display: block;
    }
    .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 {
        position: relative;
    }
    .faction-text-input,
    .faction-text-cancel,
    .faction-text-save {
        display: none;
    }
    .faction-text-input {
        box-sizing: border-box;
        width: 100%;
        border: 1px solid var(--category-color);
        border-radius: 2px;
        padding: 5px 24px;
        background: var(--paper);
        color: var(--black-ink);
        font: inherit;
    }
    textarea.faction-text-input {
        min-height: 6em;
        resize: vertical;
    }
    .faction-text-editor[data-field="name"] .faction-text-input {
        font-family: "Norican", cursive;
        font-size: inherit;
    }
    .faction-text-edit,
    .faction-text-cancel {
        left: -9px;
        top: -9px;
    }
    .faction-text-edit {
        opacity: 0;
        transition: opacity 120ms ease;
    }
    .faction-text-save {
        right: -9px;
        bottom: -9px;
    }
    .faction-text-editor:hover .faction-text-edit,
    .faction-text-edit:focus-visible {
        opacity: 1;
    }
    .faction-text-editor.editing .faction-text-value,
    .faction-text-editor.editing .faction-text-edit {
        display: none;
    }
    .faction-text-editor.editing .faction-text-input,
    .faction-text-editor.editing .faction-text-cancel,
    .faction-text-editor.editing .faction-text-save {
        display: block;
    }
    .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;
    }
    .faction-clock {
        color: var(--category-color);
        text-align: center;
        line-height: normal;
        max-inline-size: min-content;
    }
    .clock-face {
        position: relative;
        width: 82px;
        height: 82px;
        margin: 0 auto 4px;
    }
    .clock-face > svg {
        display: block;
        width: 82px;
        height: 82px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        touch-action: auto;
    }
    .faction-clock circle,
    .faction-clock line {
        fill: none;
        stroke: var(--black-ink);
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
    }
    .clock-segment {
        stroke: none;
        cursor: pointer;
    }
    .clock-hatch {
        stroke: currentColor;
        stroke-width: 1.5;
    }
    .clock-hatch-preview {
        stroke: currentColor;
        stroke-width: 0.65;
    }
    .clock-action {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 28px;
        height: 28px;
        padding: 3px;
        transform: translate(-50%, -50%);
        border: 0;
        background: transparent;
        color: inherit;
        opacity: 0;
        cursor: pointer;
        transition: opacity 120ms ease;
    }
    .clock-face:hover .clock-action,
    .clock-action:focus-visible {
        opacity: 0.22;
    }
    .faction-clock[data-complete="true"] .clock-action {
        opacity: 0.55;
    }
    .faction-clock[data-complete="true"] .clock-face:hover .clock-action,
    .faction-clock[data-complete="true"] .clock-action:focus-visible {
        opacity: 1;
    }
    .clock-action svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        border: 0;
        background: none;
    }
    .clock-action path {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .clock-action-complete,
    .faction-clock[data-complete="true"] .clock-action-incomplete {
        display: none;
    }
    .faction-clock[data-complete="true"] .clock-action-complete {
        display: block;
    }
    .faction-clock[data-repeating="true"]:not([data-complete="true"]) .clock-action {
        opacity: 0.22;
    }
    .faction-clock[data-repeating="true"]:not([data-complete="true"]) .clock-action-incomplete {
        display: none;
    }
    .faction-clock[data-repeating="true"]:not([data-complete="true"]) .clock-action-complete {
        display: block;
    }
    .faction-clock[data-repeating="true"]:not([data-complete="true"]) .clock-face:hover .clock-action-incomplete,
    .faction-clock[data-repeating="true"]:not([data-complete="true"]) .clock-action:focus-visible .clock-action-incomplete,
    .faction-clock[data-repeating="true"]:not([data-complete="true"]).confirm-remove .clock-action-incomplete {
        display: block;
    }
    .faction-clock[data-repeating="true"]:not([data-complete="true"]) .clock-face:hover .clock-action-complete,
    .faction-clock[data-repeating="true"]:not([data-complete="true"]) .clock-action:focus-visible .clock-action-complete,
    .faction-clock[data-repeating="true"]:not([data-complete="true"]).confirm-remove .clock-action-complete {
        display: none;
    }
    .clock-action-label {
        display: none;
    }
    .faction-clock.confirm-remove .clock-action {
        inset: 9px;
        width: auto;
        height: auto;
        padding: 10px;
        transform: none;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        background: var(--paper);
        opacity: 1;
    }
    .faction-clock[data-repeating="true"]:not([data-complete="true"]).confirm-remove .clock-action {
        background: var(--paper);
        opacity: 1;
    }
    .faction-clock.confirm-remove .clock-action svg {
        width: 25px;
        height: 25px;
        margin: 0 auto;
    }
    .faction-clock.confirm-remove .clock-action-label {
        display: block;
        margin-top: 1px;
        font-family: "Playfair", serif;
        font-size: 10px;
        font-weight: 800;
    }
    .clock-label {
        position: relative;
    }
    .clock-label-input {
        display: none;
        box-sizing: border-box;
        width: 124px;
        border: 1px solid currentColor;
        border-radius: 2px;
        padding: 4px 22px;
        background: var(--paper);
        color: var(--black-ink);
        font: inherit;
        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-edit {
        left: -9px;
        top: -9px;
        opacity: 0;
        transition: opacity 120ms ease;
    }
    .clock-label:hover .clock-edit,
    .clock-edit:focus-visible {
        opacity: 1;
    }
    .clock-edit-cancel,
    .clock-edit-save {
        display: none;
    }
    .clock-edit-cancel {
        left: -9px;
        top: -9px;
    }
    .clock-edit-save {
        right: -9px;
        bottom: -9px;
    }
    .clock-label.editing .clock-label-text,
    .clock-label.editing .clock-edit {
        display: none;
    }
    .clock-label.editing .clock-label-input,
    .clock-label.editing .clock-edit-cancel,
    .clock-label.editing .clock-edit-save {
        display: block;
    }
    .draft-clock .clock-face {
        pointer-events: none;
        opacity: 0.55;
    }
    .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(.faction-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-clock:focus-within .clock-face > svg {
        outline: 1px dashed currentColor;
        outline-offset: 2px;
    }
    .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-editor {
        position: relative;
    }
    .faction-field-input,
    .faction-field-cancel,
    .faction-field-save {
        display: none;
    }
    .faction-field-input {
        box-sizing: border-box;
        width: 100%;
        min-height: 7em;
        border: 1px solid var(--category-color);
        border-radius: 2px;
        padding: 5px 24px;
        background: var(--paper);
        color: var(--black-ink);
        font: inherit;
        resize: vertical;
    }
    .faction-field-edit,
    .faction-field-cancel {
        left: -9px;
        top: -9px;
    }
    .faction-field-edit {
        opacity: 0;
        transition: opacity 120ms ease;
    }
    .faction-field-save {
        right: -9px;
        bottom: -9px;
    }
    .faction-field-editor:hover .faction-field-edit,
    .faction-field-edit:focus-visible {
        opacity: 1;
    }
    .faction-field-editor.editing .faction-field-value,
    .faction-field-editor.editing .faction-field-edit {
        display: none;
    }
    .faction-field-editor.editing .faction-field-input,
    .faction-field-editor.editing .faction-field-cancel,
    .faction-field-editor.editing .faction-field-save {
        display: block;
    }
    .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 < 40em) {
        .faction-head:has(.faction-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 {
    position: absolute;
    z-index: 8;
    top: 10px;
    display: flex;
    gap: 7px;
}

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

#doskvol-network :is(.history-controls, .share-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, .ddd-toggle, .share-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 .ddd-extensions,
#doskvol-network .ddd-impression {
    opacity: 0;
    pointer-events: none;
}

#doskvol-network.ddd-view :is(.ddd-extensions, .ddd-impression) { opacity: 1; }
#doskvol-network.ddd-view :is(.link, .status-stack, .link-label) { opacity: 0 !important; }
#doskvol-network.ddd-view .link.turf.visible { opacity: 0 !important; }

#doskvol-network .ddd-extension {
    fill: none;
    stroke-linecap: round;
    opacity: .28;
    filter: url(#ink-wobble);

    &.positive { stroke: var(--friend); }
    &.negative { stroke: var(--enemy); }
    &.neutral { stroke: var(--black-ink); }
    &.strength-0 { stroke-width: 2px; }
    &.strength-1 { stroke-width: 3px; }
    &.strength-2 { stroke-width: 5px; }
    &.strength-3 { stroke-width: 8px; }
}


#doskvol-network .ddd-impression {
    .friendly { fill: oklch(from var(--friend) calc(l * 1.5) c h); }
    .hostile { fill: oklch(from var(--enemy) calc(l * 1.5) c h); }
    circle { stroke: none; }
}

#doskvol-network :is(.history-controls, .share-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 .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.has-selection .link.secondary:not(.turf),
#doskvol-network.has-selection .status-stack.secondary {
    opacity: .34;
}

#doskvol-network .node:is(.underworld, .institutions, .labor, .fringe, .citizens) > circle:first-of-type {
    stroke: var(--category-color);
}

#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-links path {
    fill: none;
    stroke: color-mix(in srgb, var(--black-ink) 62%, transparent);
    stroke-width: 1.6;
    stroke-linecap: round;
    filter: url(#ink-wobble);
}

#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-node {
    color: var(--black-ink);
    cursor: pointer;
}

#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;
}