:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", sans-serif;
}

body {
    display: grid;
    min-height: 100vh;
    margin: 0;
    place-items: center;
    background: #f5f7fa;
    color: #172b4d;
}

main {
    width: min(38rem, calc(100% - 3rem));
    padding: 2.5rem;
    border: 1px solid #dfe5ee;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1rem 3rem #172b4d12;
}

.brand {
    margin: 0;
    color: #155eef;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
}

h1 {
    margin: .75rem 0;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
}

p {
    color: #475467;
    line-height: 1.6;
}

.state {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: .55rem .8rem;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: .9rem;
    font-weight: 600;
}

.state::before {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.auth-card h1 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
}

.auth-card form {
    display: grid;
    gap: .75rem;
    margin-top: 1.5rem;
}

.auth-card label {
    color: #344054;
    font-size: .95rem;
    font-weight: 600;
}

.auth-card input:not([type="radio"]) {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.8rem;
    padding: .65rem .75rem;
    border: 1px solid #cfd7e3;
    border-radius: .5rem;
    font: inherit;
}

.auth-card input:focus-visible,
.auth-card button:focus-visible,
.auth-card a:focus-visible {
    outline: 3px solid #84adff;
    outline-offset: 2px;
}

.auth-card button {
    min-height: 2.8rem;
    margin-top: .5rem;
    border: 0;
    border-radius: .5rem;
    background: #155eef;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.auth-card button:hover {
    background: #004eeb;
}

.auth-card .error {
    padding: .75rem;
    border: 1px solid #fecdca;
    border-radius: .5rem;
    background: #fef3f2;
    color: #b42318;
}

.auth-card .secret {
    overflow-wrap: anywhere;
    padding: .75rem;
    border-radius: .5rem;
    background: #f2f4f7;
    color: #101828;
    font-weight: 700;
}

main.wide {
    width: min(76rem, calc(100% - 2rem));
    box-sizing: border-box;
    padding: clamp(1rem, 3vw, 2.5rem);
}

.calendar-admin > p {
    max-width: 72ch;
}

.calendar-admin button,
.calendar-admin input {
    font: inherit;
}

.calendar-admin button {
    min-height: 2.65rem;
    padding: .55rem .85rem;
    border: 0;
    border-radius: .5rem;
    background: #155eef;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.calendar-admin button:hover:not(:disabled) {
    background: #004eeb;
}

.calendar-admin button:disabled {
    background: #98a2b3;
    cursor: not-allowed;
}

.calendar-admin input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 2.65rem;
    padding: .5rem .65rem;
    border: 1px solid #cfd7e3;
    border-radius: .5rem;
    background: #fff;
    color: #172b4d;
}

.calendar-admin :is(input, button, a, summary):focus-visible {
    outline: 3px solid #84adff;
    outline-offset: 2px;
}

.calendar-admin .notice,
.calendar-admin .error {
    padding: .75rem .9rem;
    border: 1px solid #a6f4c5;
    border-radius: .5rem;
    background: #ecfdf3;
    color: #067647;
}

.calendar-admin .error {
    border-color: #fecdca;
    background: #fef3f2;
    color: #b42318;
}

.calendar-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.calendar-sidebar,
.calendar-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #dfe5ee;
    border-radius: .75rem;
    background: #fff;
}

.calendar-sidebar h2,
.calendar-panel h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.calendar-list,
.calendar-exception-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendar-item {
    display: grid;
    gap: .3rem;
    padding: .75rem;
    border: 1px solid #dfe5ee;
    border-radius: .6rem;
    color: #344054;
    text-decoration: none;
}

.calendar-item span,
.calendar-exception-list span {
    color: #667085;
    font-size: .88rem;
}

.calendar-item-selected {
    border-color: #84adff;
    background: #eff4ff;
}

.calendar-create {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid #eaecf0;
}

.calendar-create summary,
.calendar-panel summary {
    color: #155eef;
    cursor: pointer;
    font-weight: 700;
}

.calendar-content {
    display: grid;
    gap: 1rem;
}

.calendar-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.calendar-heading p {
    margin: .3rem 0;
}

.calendar-panel details:not(.calendar-create) {
    margin-top: .85rem;
}

.request-form {
    display: grid;
    gap: .55rem;
    margin-top: .85rem;
}

.request-form label {
    color: #344054;
    font-size: .92rem;
    font-weight: 600;
}

.calendar-week {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.calendar-day {
    min-width: 0;
    padding: .8rem;
    border: 1px solid #dfe5ee;
    border-radius: .65rem;
}

.calendar-day legend {
    padding: 0 .3rem;
    color: #344054;
    font-weight: 700;
}

.calendar-period {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    align-items: center;
    gap: .35rem .6rem;
    padding: .5rem 0;
    border-bottom: 1px solid #eaecf0;
}

.calendar-period:last-child {
    border-bottom: 0;
}

.calendar-period label {
    font-size: .8rem !important;
}

.calendar-exception-list {
    margin: .75rem 0 1.25rem;
}

.calendar-exception-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem;
    border: 1px solid #eaecf0;
    border-radius: .55rem;
}

.calendar-exception-list li > div {
    display: grid;
    gap: .25rem;
}

.calendar-admin .secondary-button {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
}

.calendar-admin .secondary-button:hover:not(:disabled) {
    background: #f2f4f7;
}

.calendar-admin .hint {
    color: #667085;
    font-size: .9rem;
}

.calendar-admin .checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.calendar-admin input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
}

.year-filter {
    display: flex;
    align-items: end;
    gap: .5rem;
}

.year-filter label {
    display: grid;
    gap: .25rem;
    color: #344054;
    font-size: .9rem;
    font-weight: 600;
}

@media (max-width: 760px) {
    .calendar-layout {
        grid-template-columns: 1fr;
    }

    .calendar-week {
        grid-template-columns: 1fr;
    }

    .calendar-heading,
    .calendar-exception-list li {
        flex-direction: column;
        align-items: stretch;
    }

    .year-filter {
        align-items: end;
    }
}

.process-sla-admin > p {
    max-width: 78ch;
}

.process-sla-admin .notice,
.process-sla-admin .error {
    padding: .75rem .9rem;
    border: 1px solid #a6f4c5;
    border-radius: .5rem;
    background: #ecfdf3;
    color: #067647;
}

.process-sla-admin .error {
    border-color: #fecdca;
    background: #fef3f2;
    color: #b42318;
}

.process-selector,
.sla-panel {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #dfe5ee;
    border-radius: .75rem;
    background: #fff;
}

.process-selector h2,
.sla-panel h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

.process-selector ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-selector-link {
    display: grid;
    gap: .3rem;
    height: 100%;
    box-sizing: border-box;
    padding: .8rem;
    border: 1px solid #dfe5ee;
    border-radius: .6rem;
    color: #344054;
    text-decoration: none;
}

.process-selector-link span,
.stage-sla-heading span {
    color: #667085;
    font-size: .9rem;
}

.process-selector-link-selected {
    border-color: #84adff;
    background: #eff4ff;
}

.stage-sla-list {
    display: grid;
    gap: .75rem;
}

.stage-sla-card {
    padding: 1rem;
    border: 1px solid #dfe5ee;
    border-radius: .65rem;
}

.stage-sla-heading h3 {
    margin: 0 0 .2rem;
    font-size: 1.05rem;
}

.stage-sla-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: .5rem .8rem;
    margin-top: .8rem;
}

.stage-sla-form label {
    color: #344054;
    font-size: .92rem;
    font-weight: 600;
}

.process-sla-admin :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 2.65rem;
    padding: .5rem .65rem;
    border: 1px solid #cfd7e3;
    border-radius: .5rem;
    background: #fff;
    color: #172b4d;
    font: inherit;
}

.process-sla-admin textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.process-sla-admin button {
    min-height: 2.65rem;
    padding: .55rem .85rem;
    border: 0;
    border-radius: .5rem;
    background: #155eef;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.stage-sla-form button,
.stage-sla-form .hint {
    grid-column: 1 / -1;
}

.process-sla-admin :is(input, select, textarea, button, a):focus-visible {
    outline: 3px solid #84adff;
    outline-offset: 2px;
}

.process-sla-admin .hint {
    color: #667085;
    font-size: .9rem;
}

@media (max-width: 600px) {
    .stage-sla-form {
        grid-template-columns: 1fr;
    }
}

.tenant-choice {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid #dfe5ee;
    border-radius: .5rem;
    cursor: pointer;
}

.tenant-choice input {
    width: 1.1rem;
    height: 1.1rem;
}

.primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    margin-top: 1rem;
    padding: 0 1rem;
    border-radius: .5rem;
    background: #155eef;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.primary-link:hover {
    background: #004eeb;
}

.process-list {
    display: grid;
    gap: .75rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.process-card {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe5ee;
    border-radius: .75rem;
    background: #fff;
}

.process-title {
    margin: 0;
    color: #172b4d;
    font-size: 1.1rem;
}

.process-card p {
    margin: .55rem 0 0;
}

.process-state {
    color: #067647;
    font-weight: 600;
}

.process-state-muted {
    color: #667085;
    font-weight: 500;
}

.request-form {
    display: grid;
    gap: .7rem;
    margin-top: 1.5rem;
}

.request-form label {
    color: #344054;
    font-size: .95rem;
    font-weight: 600;
}

.request-form select {
    width: 100%;
    min-height: 2.8rem;
    padding: .55rem .7rem;
    border: 1px solid #cfd7e3;
    border-radius: .5rem;
    background: #fff;
    color: #172b4d;
    font: inherit;
}

.field-control {
    display: grid;
    gap: .5rem;
    margin: .25rem 0;
    padding: .85rem;
    border: 1px solid #dfe5ee;
    border-radius: .65rem;
    background: #fff;
}

.field-control label,
.field-label {
    margin: 0;
    color: #344054;
    font-weight: 600;
}

.field-control input,
.field-control textarea,
.field-control select {
    width: 100%;
    min-height: 2.8rem;
    padding: .55rem .7rem;
    border: 1px solid #cfd7e3;
    border-radius: .5rem;
    background: #fff;
    color: #172b4d;
    font: inherit;
}

.field-control textarea {
    min-height: 7rem;
    resize: vertical;
}

.field-control select[multiple] {
    min-height: 8rem;
}

.field-control :is(input, textarea, select):focus-visible {
    outline: 3px solid #84adff;
    outline-offset: 2px;
}

.request-form select:focus-visible,
.request-form button:focus-visible {
    outline: 3px solid #84adff;
    outline-offset: 2px;
}

.request-form button {
    min-height: 2.8rem;
    margin-top: .5rem;
    border: 0;
    border-radius: .5rem;
    background: #155eef;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.form-error {
    padding: .75rem;
    border: 1px solid #fecdca;
    border-radius: .5rem;
    background: #fef3f2;
    color: #b42318;
}

.request-protocol {
    overflow-wrap: anywhere;
    color: #155eef;
}

.request-list,
.execution-list {
    display: grid;
    gap: .85rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.request-card,
.execution-card,
.empty-state {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe5ee;
    border-radius: .75rem;
    background: #fff;
}

.request-card p,
.execution-card p {
    margin: .5rem 0;
}

.request-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.request-card-header h2,
.request-card-header h3 {
    margin: 0;
    color: #172b4d;
}

.request-state {
    flex: 0 0 auto;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #eff4ff;
    color: #3538cd;
    font-size: .85rem;
    font-weight: 700;
}

.request-state-completed {
    background: #ecfdf3;
    color: #067647;
}

.request-state-cancelled {
    background: #fef3f2;
    color: #b42318;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 1rem 0;
}

.history-section {
    margin: 2rem 0;
}

.field-edit-section {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe5ee;
    border-radius: .75rem;
    background: #f8faff;
}

.field-edit-section button {
    min-height: 2.8rem;
    padding: 0 .9rem;
    border: 0;
    border-radius: .5rem;
    background: #155eef;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.field-edit-section button:hover {
    background: #004eeb;
}

.field-edit-section .secondary-button {
    border: 1px solid #cfd7e3;
    background: #fff;
    color: #344054;
}

.field-edit-section .secondary-button:hover {
    background: #f2f4f7;
}

.field-edit-form {
    margin-top: 1rem;
}

.field-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .75rem;
}

.field-edit-actions form {
    margin: 0;
}

.field-edit-section .field-readonly {
    display: grid;
    gap: .3rem;
    margin: .65rem 0;
    padding: .75rem .85rem;
    border: 1px solid #dfe5ee;
    border-radius: .6rem;
    background: #fff;
}

.field-edit-section output {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.field-edit-section .checkbox-field {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 500;
}

.field-edit-section .checkbox-field input {
    width: 1.15rem;
    min-height: 1.15rem;
    margin: 0;
}

.execution-fields {
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid #dfe5ee;
}

.execution-fields h4 {
    margin: 0 0 .5rem;
    color: #344054;
}

.field-history-list {
    display: grid;
    gap: .55rem;
    margin: .75rem 0 0;
}

.field-history-list div {
    display: grid;
    gap: .2rem;
    padding: .65rem .75rem;
    border-radius: .5rem;
    background: #f8faff;
}

.field-history-list dt {
    color: #344054;
    font-weight: 600;
}

.field-history-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.form-success {
    padding: .75rem;
    border: 1px solid #abefc6;
    border-radius: .5rem;
    background: #ecfdf3;
    color: #067647;
}

.history-section h2 {
    color: #172b4d;
}

.transition-section {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe5ee;
    border-radius: .75rem;
    background: #f8faff;
}

.transition-section form {
    display: grid;
    gap: .7rem;
    margin: 1rem 0;
}

.transition-section label {
    color: #344054;
    font-weight: 600;
}

.transition-section select,
.transition-section textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #cfd7e3;
    border-radius: .5rem;
    background: #fff;
    color: #172b4d;
    font: inherit;
}

.transition-section textarea {
    resize: vertical;
}

.transition-section select:focus-visible,
.transition-section textarea:focus-visible,
.transition-section button:focus-visible {
    outline: 3px solid #84adff;
    outline-offset: 2px;
}

.transition-section button {
    min-height: 2.8rem;
    border: 0;
    border-radius: .5rem;
    background: #155eef;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.transition-section button:disabled {
    background: #98a2b3;
    cursor: not-allowed;
}

.form-hint {
    margin: 0;
    color: #667085;
    font-size: .9rem;
}

.blocked-transition-list {
    display: grid;
    gap: .6rem;
    padding-left: 1.2rem;
}

.blocked-transition-list li span {
    display: block;
    margin-top: .2rem;
    color: #667085;
}

.workflow-builder {
    display: grid;
    gap: 1rem;
}

.builder-panel,
.builder-heading,
.builder-item,
.builder-add {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe5ee;
    border-radius: .75rem;
    background: #fff;
}

.builder-panel h2,
.builder-heading h2 {
    margin-top: 0;
    color: #172b4d;
}

.builder-process-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.builder-process-list a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem;
    border: 1px solid #dfe5ee;
    border-radius: .5rem;
    color: #155eef;
    text-decoration: none;
}

.builder-process-list a.is-selected {
    border-color: #84adff;
    background: #eff4ff;
}

.builder-process-list span,
.builder-hint {
    color: #667085;
}

.builder-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.builder-heading p {
    margin-bottom: 0;
}

.builder-form {
    display: grid;
    gap: .75rem;
}

.builder-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    align-items: end;
}

.builder-form label,
.builder-form legend {
    color: #344054;
    font-weight: 600;
}

.builder-form input:not([type="checkbox"]),
.builder-form select,
.builder-form textarea {
    width: 100%;
    min-height: 2.7rem;
    padding: .6rem .7rem;
    border: 1px solid #cfd7e3;
    border-radius: .5rem;
    background: #fff;
    color: #172b4d;
    font: inherit;
}

.builder-form select[multiple] {
    min-height: 7rem;
}

.builder-form textarea {
    min-height: 6rem;
    resize: vertical;
}

.builder-form button,
.builder-item > form button {
    min-height: 2.7rem;
    padding: .55rem .85rem;
    border: 0;
    border-radius: .5rem;
    background: #155eef;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.builder-form button:focus-visible,
.builder-item > form button:focus-visible,
.builder-add summary:focus-visible {
    outline: 3px solid #84adff;
    outline-offset: 2px;
}

.builder-full {
    grid-column: 1 / -1;
    min-width: 0;
    padding: .8rem;
    border: 1px solid #dfe5ee;
    border-radius: .5rem;
}

.builder-full .builder-grid {
    display: grid;
    grid-template-columns: minmax(8rem, .4fr) minmax(12rem, 1fr);
    align-items: start;
}

.builder-check,
.builder-checks label {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.builder-check input,
.builder-checks input {
    width: 1.1rem;
    height: 1.1rem;
}

.builder-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: .5rem 0;
}

.builder-hint {
    margin-bottom: 0;
    font-size: .9rem;
}

.builder-item {
    display: grid;
    gap: .75rem;
    margin: .75rem 0;
    background: #f8faff;
}

.builder-item > form:not(.builder-form) {
    justify-self: end;
}

.builder-item > form .button-danger {
    background: #b42318;
}

.builder-add {
    margin-top: .75rem;
    background: #f8faff;
}

.builder-add summary {
    color: #155eef;
    cursor: pointer;
    font-weight: 700;
}

.builder-add[open] summary {
    margin-bottom: 1rem;
}

.builder-publish {
    border-color: #84adff;
    background: #f4f8ff;
}

.builder-limitations {
    color: #475467;
    background: #f8faff;
}

@media (max-width: 620px) {
    .builder-process-list a,
    .builder-heading {
        flex-direction: column;
    }

    .builder-full .builder-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .request-card-header {
        flex-direction: column;
    }

    .pagination {
        flex-wrap: wrap;
    }
}