:root {
    --code-bgc: #e9ecef;
    --primary: #667eea;
    --success: #28a745;
    --error: #e53e3e;
    --neutral: #f8f9fa;
    --border: #e0e0e0;
}

p {
    margin-bottom: 1rem;
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    padding: 1rem;
}

body copy-button {
        border: none;
        position: relative;
        bottom: 1rem;
    }

:is(:is(body copy-button) button):not(:disabled):hover {
                    box-shadow: none;
                }

:is(body copy-button) button {

            position: relative;
            right: 1rem;
        }

:is(:is(body copy-button) button) .copy-wrapper,:is(:is(body copy-button) button) .success-wrapper {
                width: 1rem;
                height: 1rem;
                display: inline-block;
                fill: black;
            }

ol {
    padding: 0;
}

h1 { font-size: 2.5rem; }
h2 {
    font-size: 1.5em;
    border-bottom: 2px solid;
    margin-bottom: 1rem;
}
h3 { margin-bottom: 1rem; }

.subtitle {
    margin-bottom: 2rem;
    font-size: 1.1em;
}

/* Two-column layout */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

.left-column,
.right-column {
    min-width: 0;  /* Prevent grid overflow */
}

code {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.85em;
    word-break: break-all;
}

.info-box {
    background: var(--neutral);
    border-left: 4px solid var(--primary);
    padding: 15px;
    margin-bottom: 2rem;
}

.info-box .label-controls {
        display: flex;
        justify-content: space-between;
    }

:is(.info-box .label-controls) h3 {
            margin-bottom: 0.4rem;
        }

.info-box code {
        display: inline-block;
        min-width: 100%;
        min-height: 3.6rem;
        background: var(--code-bgc);
        padding: 2px 0.5rem;
        font-size: 0.9em;
    }

.controls,
.protocol-steps,
.signing-section {
    padding: 1.25rem;
    margin-bottom: 2rem;
}

:is(.controls,.protocol-steps,.signing-section) ol {
        margin-bottom: 1.5rem;
    }

.controls {
    background: #f5f5f5;
}

.controls h2 {
        margin-top: 0;
    }

.protocol-steps {
    background: #e7f3ff;
}

.protocol-steps h2 {
        margin-top: 0;
        margin-bottom: 15px;
    }

.protocol-steps ol { margin-left: 20px; }

.protocol-steps li { margin-bottom: 8px; }

.signing-section {
    background: var(--neutral);
    min-height: 100vh;
}

.signing-section h2 {
        margin-top: 0;
    }

.signing-section.disabled * {
            opacity: 0.6;
        }

.error {
    background: #fff5f5;
    border-left: 4px solid var(--error);
    padding: 15px;
    color: #c53030;
    margin: 20px 0;
}

/* Forms */
label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    display: block;
}

.input-group {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
        display: block;
        margin-bottom: 0.5rem;
    }

input[type="number"],
textarea,
select {
    padding: 0.75rem;
    font-size: 1rem;
    border: 2px solid #ddd;
    transition: border-color 0.3s;
    font-family: inherit;
}

:is(input[type="number"],textarea,select):focus {
        outline: none;
        border-color: var(--primary);
    }

input[type="number"] {
    min-width: 5rem;
    padding: 1rem;
    font-size: 1.2rem;
}

textarea {
    width: 100%;
    resize: vertical;
    min-height: 80px;
}

select {
    width: 100%;
    cursor: pointer;
}

.radio-group {
    display: flex;
    justify-content: space-between;
}

.radio-group .radio-label {
        --form-control-color: #4281CB;

        align-items: center;
        font-weight: 400;
        margin-right: 1rem;
        cursor: pointer;
        font-size: 1.5rem;
        display: flex;
        grid-template-columns: 1em auto;
        gap: 0.5em;
    }

:is(.radio-group .radio-label) span {
            font-size: 1.2rem;
        }

:is(.radio-group .radio-label) input {
            cursor: pointer;
        }

:is(.radio-group .radio-label) input[type="radio"] {
            appearance: none;
            /* For iOS < 15 to remove gradient background */
            background-color: #fff;
            margin: 0;
            font: inherit;
            color: currentcolor;
            width: 1.15em;
            height: 1.15em;
            border: 0.15em solid currentcolor;
            border-radius: 50%;
            display: grid;
            place-content: center;
        }

:is(:is(.radio-group .radio-label) input[type="radio"])::before {
                content: "";
                width: 0.65em;
                height: 0.65em;
                border-radius: 50%;
                transform: scale(0);
                transition: 120ms transform ease-in-out;
                box-shadow: inset 1em 1em var(--form-control-color);
            }

:is(:is(.radio-group .radio-label) input[type="radio"]):checked::before {
                appearance: initial;
                transform: scale(1);
            }

.signing-controls {
    margin-bottom: 2rem;
}

button {
    border-radius: 0;
    background-color: transparent;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

button:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 10px rgba(60, 60, 60, 0.4);
    }

button:active { transform: translateY(0); }

button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.sign-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    margin-left: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Machine boxes */
.machine-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.machine-box {
    background: white;
    border: 2px solid var(--border);
    padding: 1rem;
    transition: border-color 0.3s, background-color 0.3s;
}

.machine-box.generated {
        border-color: var(--success);
        background-color: #f0fff4;
    }

.machine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.machine-header h3 {
        margin: 0;
        font-size: 1.1rem;
    }

.shard-display {
    background: var(--code-bgc);
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.shard-display h4 {
        margin: 0 0 0.5rem 0;
        font-size: 0.85rem;
        color: #555;
    }

.shard-display .shard-value {
        min-height: 3.4rem;
        display: block;
        word-break: break-all;
        font-size: 0.75rem;
        line-height: 1.4;
    }

.status-badge {
    background: var(--success);
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 4px;
}

.generate-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 2px solid black;
    outline: 2px solid transparent;
}

.generate-btn:hover:not(:disabled) {
        outline: 2px solid;
        transform: translateY(-2px);
    }

.generate-btn:disabled {
        background: #ccc;
        border-color: #ccc;
    }

.verification-controls {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f0f8ff;
    border: 2px solid var(--primary);
}

.verification-controls h2 {
        margin-top: 0;
        margin-bottom: 1rem;
    }

.verification-controls button {
        width: 100%;
        margin-bottom: 1rem;
    }

:is(.verification-controls button):last-child {
            margin-bottom: 0;
        }

.verify-btn {
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid var(--primary);
    background: white;
    color: var(--primary);
}

.verify-btn:hover:not(:disabled) {
        background: var(--primary);
        color: white;
    }

.verify-btn:disabled {
        background: #e0e0e0;
        border-color: #ccc;
        color: #666;
        cursor: not-allowed;
    }

.verify-btn.complete-btn {
        background: var(--success);
        border-color: var(--success);
        color: white;
        font-weight: 700;
    }

.verify-btn.complete-btn:hover:not(:disabled) {
            background: #208537;
            border-color: #208537;
        }

.loading-message {
    text-align: center;
    padding: 1rem;
    margin-top: 1rem;
    background: #fff3cd;
    border: 2px solid #ffc107;
    color: #856404;
    font-weight: 600;
}

/* Participants */
.participant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.participant-card {
    background: white;
    border: 2px solid var(--border);
    padding: 0.75rem;
    transition: border-color 0.2s, background-color 0.2s;
}

.participant-card.selected {
        border-color: var(--success);
        background-color: #f0fff4;
    }

.participant-card label {
        cursor: pointer;
    }

.participant-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
}

.participant-label input[type="checkbox"] {
        cursor: pointer;
        width: 18px;
        height: 18px;
    }

.participant-name {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Signing */
.info-text {
    color: #555;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.selection-info {
    font-size: 0.95rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}

.signature-result {
    background: white;
    padding: 1.5rem;
    border: 2px solid;
    margin-top: 2rem;
}

.signature-result div.h3 {
        display: flex;
        justify-content: space-between;
    }

.signature-result h3 {
        margin-top: 0;
    }

.signature-box {
    background: var(--code-bgc);
    padding: 1rem;
    margin: 1rem 0;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

.verification-result {
    padding: 1rem;
    margin: 1rem 0 0 0;
    font-weight: 600;
    text-align: center;
    border: 2px solid;
}

.verification-result.valid {
        background: #d4edda;
        color: #155724;
        border-color: var(--success);
    }

.verification-result.invalid {
        background: #f8d7da;
        color: #721c24;
        border-color: #dc3545;
    }

@media (max-width: 900px) {
    .two-column-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .participant-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

@media (max-width: 768px) {
    h1 { font-size: 2em; }

    .participant-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}
/*
see https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* 1. Box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* 3. Enable keyword animations */
    interpolate-size: allow-keywords;
}


* {
    /* 2. Remove default margin */
    margin: 0;

    /*
        3. Add accessible line-height 
        see https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/
    */
    line-height: calc(2px + 2ex + 2px);
}

body {
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}

/* 7. Avoid text overflows */
p {
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 8. Improve line wrapping */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    overflow-wrap: break-word;
}


/*
  9. Create a root stacking context

  __OPTIONAL__

  see https://www.joshwcomeau.com/css/custom-css-reset/#nine-root-stacking-context-10
  see https://www.joshwcomeau.com/css/stacking-contexts/
*/
#root {
    isolation: isolate;
}

/* see https://gomakethings.com/how-to-animate-scrolling-to-anchor-links-with-one-line-of-css/#accessibility-concerns */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
/**
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
/* 
 * Utility class to hide content visually while keeping it
 * screen reader-accessible.
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html 
 */
.visually-hidden:not(:focus, :active) {
    clip-path: inset(100%); 
    height: 1px; 
    overflow: hidden; 
    position: absolute; 
    white-space: nowrap; 
    width: 1px; 
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTtBQUNGO0NBQ0M7RUFDQyxxQkFBcUI7Q0FDdEI7QUFDRDtBQUNBOzs7O0VBSUU7QUFDRjtJQUNJLHNCQUFzQjtJQUN0QixXQUFXO0lBQ1gsZ0JBQWdCO0lBQ2hCLGtCQUFrQjtJQUNsQixtQkFBbUI7SUFDbkIsVUFBVTtBQUNkIiwiZmlsZSI6ImluZGV4LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRGlzYWJsZSBzbW9vdGggc2Nyb2xsaW5nIHdoZW4gdXNlcnMgaGF2ZSBwcmVmZXJzLXJlZHVjZWQtbW90aW9uIGVuYWJsZWRcbiAqL1xuQG1lZGlhIHNjcmVlbiBhbmQgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuXHRodG1sIHtcblx0XHRzY3JvbGwtYmVoYXZpb3I6IGF1dG87XG5cdH1cbn1cbi8qIFxuICogVXRpbGl0eSBjbGFzcyB0byBoaWRlIGNvbnRlbnQgdmlzdWFsbHkgd2hpbGUga2VlcGluZyBpdFxuICogc2NyZWVuIHJlYWRlci1hY2Nlc3NpYmxlLlxuICogU291cmNlOiBodHRwczovL3d3dy5zY290dG9oYXJhLm1lL2Jsb2cvMjAxNy8wNC8xNC9pbmNsdXNpdmVseS1oaWRkZW4uaHRtbCBcbiAqL1xuLnZpc3VhbGx5LWhpZGRlbjpub3QoOmZvY3VzLCA6YWN0aXZlKSB7XG4gICAgY2xpcC1wYXRoOiBpbnNldCgxMDAlKTsgXG4gICAgaGVpZ2h0OiAxcHg7IFxuICAgIG92ZXJmbG93OiBoaWRkZW47IFxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsgXG4gICAgd2hpdGUtc3BhY2U6IG5vd3JhcDsgXG4gICAgd2lkdGg6IDFweDsgXG59XG4iXX0= */:root {
    --copy-button-success: green;
}

copy-button {
    width: 1rem;
    height: 1rem;
    background: none;
    padding: 0.3rem 0.1rem;
    color: black;
}

copy-button .copy-wrapper {
        fill: var(--copy-button, black);
    }

copy-button button {
        border: none;
        background-color: transparent;
        position: relative;
        top: 2px;
    }

copy-button .success-svg {
        fill: var(--copy-button-success, black);
    }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9zdHlsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7SUFDSSw0QkFBNEI7QUFDaEM7O0FBRUE7SUFDSSxXQUFXO0lBQ1gsWUFBWTtJQUNaLGdCQUFnQjtJQUNoQixzQkFBc0I7SUFDdEIsWUFBWTtBQWdCaEI7O0FBZEk7UUFDSSwrQkFBK0I7SUFDbkM7O0FBRUE7UUFDSSxZQUFZO1FBQ1osNkJBQTZCO1FBQzdCLGtCQUFrQjtRQUNsQixRQUFRO0lBQ1o7O0FBRUE7UUFDSSx1Q0FBdUM7SUFDM0MiLCJmaWxlIjoic3R5bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOnJvb3Qge1xuICAgIC0tY29weS1idXR0b24tc3VjY2VzczogZ3JlZW47XG59XG5cbmNvcHktYnV0dG9uIHtcbiAgICB3aWR0aDogMXJlbTtcbiAgICBoZWlnaHQ6IDFyZW07XG4gICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICBwYWRkaW5nOiAwLjNyZW0gMC4xcmVtO1xuICAgIGNvbG9yOiBibGFjaztcblxuICAgICYgLmNvcHktd3JhcHBlciB7XG4gICAgICAgIGZpbGw6IHZhcigtLWNvcHktYnV0dG9uLCBibGFjayk7XG4gICAgfVxuXG4gICAgJiBidXR0b24ge1xuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgIHRvcDogMnB4O1xuICAgIH1cblxuICAgICYgLnN1Y2Nlc3Mtc3ZnIHtcbiAgICAgICAgZmlsbDogdmFyKC0tY29weS1idXR0b24tc3VjY2VzcywgYmxhY2spO1xuICAgIH1cbn1cbiJdfQ== */