.ob-nav {
    display: flex;
    height: 68px;
    align-items: center;
    border-bottom: 1px solid #e5e9e2;
    background: #fffefa;
    font-family: "DM Sans", "Inter", sans-serif;
}

.ob-nav-inner {
    display: flex;
    width: min(1440px, 100%);
    align-items: center;
    justify-content: space-between;
    margin: auto;
    padding: 0 44px;
}

.ob-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #172f36;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.ob-brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: #315c4d;
    color: #f9f6e9;
}

.ob-brand-mark svg {
    width: 20px;
    height: 20px;
}

.ob-nav-right {
    display: flex;
    align-items: center;
    gap: 26px;
    color: #526568;
    font-size: 14px;
    font-weight: 650;
}

.ob-nav-right .ob-sign-in {
    border: 1px solid #d4ded8;
    border-radius: 7px;
    background: #fffefa;
    padding: 9px 14px;
    color: #23483c;
    font-size: 14px;
    font-weight: 750;
}

.ob-nav a:hover {
    color: #315c4d;
}

.ob-nav a:focus-visible {
    outline: 3px solid #8eb29b;
    outline-offset: 3px;
}

.ob-page {
    --ob-ink: #172f36;
    --ob-muted: #667a7c;
    --ob-line: #dce5df;
    --ob-paper: #f4f6f1;
    --ob-surface: #fffefa;
    --ob-green: #315c4d;
    --ob-green-deep: #23483c;
    min-height: 100vh;
    background: var(--ob-paper);
    color: var(--ob-ink);
    font-family: "DM Sans", "Inter", -apple-system, sans-serif;
    line-height: 1.45;
}

.ob-page *,
.ob-page *::before,
.ob-page *::after {
    box-sizing: border-box;
}

.ob-content {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 36px 44px 76px;
}

.ob-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #526861;
    font: 600 11px "IBM Plex Mono", monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ob-crumb a {
    text-decoration: none;
}

.ob-crumb a:hover {
    color: var(--ob-green);
    text-decoration: underline;
}

.ob-crumb b {
    color: #bdc7c0;
    font-weight: 400;
}

.ob-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin: 23px 0 27px;
}

.ob-heading h1 {
    margin: 0 0 6px;
    color: #18343a;
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(32px, 3.3vw, 46px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.065em;
}

.ob-heading p {
    max-width: 620px;
    margin: 0;
    color: #475f61;
    font-size: 16px;
    line-height: 1.55;
}

.ob-board-note {
    display: flex;
    flex: none;
    align-items: center;
    gap: 11px;
    border-left: 1px solid #ccd8d0;
    padding: 3px 0 3px 17px;
    color: #435e55;
    font-size: 13px;
}

.ob-note-symbol {
    display: grid;
    width: 28px;
    height: 28px;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: #e6eee7;
    color: var(--ob-green);
    font-size: 15px;
}

.ob-layout {
    display: grid;
    grid-template-columns: 258px minmax(0, 1fr);
    align-items: start;
    gap: 25px;
}

.ob-filters {
    border: 1px solid #dce4dc;
    border-radius: 9px;
    background: var(--ob-surface);
    padding: 19px 18px 17px;
    box-shadow: 0 3px 10px #1c3c3010;
}

.ob-filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.ob-filter-heading h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -.02em;
}

.ob-filter-heading span {
    color: #526861;
    font: 600 10px "IBM Plex Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ob-fields {
    display: grid;
    gap: 13px;
}

.ob-field label {
    display: block;
    margin: 0 0 6px;
    color: #3f6051;
    font: 700 11px "IBM Plex Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ob-field input,
.ob-field select {
    width: 100%;
    height: 44px;
    border: 1px solid #d8e1db;
    border-radius: 5px;
    background: #fff;
    padding: 0 10px;
    color: #294448;
    font: 15px "DM Sans", "Inter", -apple-system, sans-serif;
}

.ob-field input:focus,
.ob-field select:focus {
    border-color: #648b76;
    outline: 0;
    box-shadow: 0 0 0 3px #e5eee7;
}

.ob-field input::placeholder {
    color: #66766d;
}

.ob-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 17px;
}

.ob-apply,
.ob-reset {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font: 700 14px "DM Sans", "Inter", -apple-system, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.ob-apply {
    flex: 1;
    min-width: 118px;
    border: 1px solid var(--ob-green);
    background: var(--ob-green);
    color: #fff;
}

.ob-apply:hover,
.ob-help:hover {
    background: var(--ob-green-deep);
}

.ob-reset {
    min-width: 70px;
    border: 1px solid #d8e1db;
    background: #fffefa;
    padding: 0 12px;
    color: #536a61;
}

.ob-reset:hover {
    background: #f0f5ef;
}

.ob-privacy {
    display: flex;
    gap: 9px;
    margin-top: 16px;
    border-top: 1px solid #e7ece7;
    padding-top: 13px;
    color: #4f675b;
    font-size: 12px;
    line-height: 1.55;
}

.ob-privacy-icon {
    flex: none;
    color: #8b9c8e;
    font-size: 15px;
}

.ob-table-wrap {
    overflow: hidden;
    border: 1px solid #dbe4dc;
    border-radius: 9px;
    background: var(--ob-surface);
    box-shadow: 0 3px 10px #1c3c3010;
}

.ob-table-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e0e7e1;
    padding: 16px 19px;
}

.ob-list-title {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.ob-list-title h2 {
    margin: 0;
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.ob-list-title > span {
    color: #4b6156;
    font-size: 13px;
}

.ob-board-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4a6655;
    font: 600 10px "IBM Plex Mono", monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ob-board-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #83a282;
}

.ob-board-status:has(+ *) {
    color: #6c8276;
}

.ob-table-head,
.ob-main-row {
    display: grid;
    grid-template-columns: 42px minmax(160px, 1.42fr) minmax(120px, 1fr) 96px 104px 90px 105px 83px;
    align-items: center;
    column-gap: 8px;
}

.ob-table-head {
    min-height: 37px;
    border-bottom: 1px solid #e2e8e1;
    background: #f6f8f4;
    padding: 0 19px;
    color: #4c6456;
    font: 700 10px "IBM Plex Mono", monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ob-table-head span:first-child {
    color: #b1bcb5;
}

.ob-row {
    display: block;
    border-bottom: 1px solid #e6ebe5;
}

.ob-row:last-child {
    border-bottom: 0;
}

.ob-main-row {
    min-height: 76px;
    padding: 0 19px;
    cursor: pointer;
    list-style: none;
    transition: background .16s ease;
}

.ob-main-row::-webkit-details-marker {
    display: none;
}

.ob-main-row::marker {
    content: "";
}

.ob-main-row:hover,
.ob-row[open] > .ob-main-row {
    background: #fbfcf8;
}

.ob-main-row:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid #8eb29b;
    outline-offset: -3px;
}

.ob-index {
    color: #526a60;
    font: 500 11px "IBM Plex Mono", monospace;
}

.ob-place strong {
    display: block;
    color: #244148;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.02em;
}

.ob-service {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #405c4e;
    font-size: 13px;
}

.ob-service-mark {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 2px;
    background: #789582;
}

.ob-service-mark.mark-1 {
    background: #b28a58;
}

.ob-service-mark.mark-2 {
    background: #788c9a;
}

.ob-service-mark.mark-3 {
    background: #80916c;
}

.ob-posted,
.ob-duration,
.ob-schedule {
    color: #405b5a;
    font-size: 13px;
}

.ob-duration {
    color: #34584b;
    font-weight: 650;
}

.ob-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #315b3f;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.ob-status-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: #75a080;
}

.ob-status-dot.is-waiting {
    background: #c69a54;
}

.ob-row-toggle {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 5px;
    color: #285843;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.ob-row-toggle i {
    font-size: 15px;
    font-style: normal;
    line-height: 10px;
    transition: transform .18s ease;
}

.ob-toggle-open {
    display: none;
}

.ob-row[open] .ob-toggle-closed {
    display: none;
}

.ob-row[open] .ob-toggle-open {
    display: inline;
}

.ob-row[open] .ob-row-toggle i {
    transform: rotate(180deg);
}

.ob-expanded {
    display: grid;
    grid-template-columns: minmax(190px, 1.3fr) minmax(170px, .9fr);
    gap: 12px 24px;
    border-top: 1px solid #e9eee8;
    background: #fbfcf8;
    padding: 18px 26px 17px 58px;
}

.ob-expanded-label {
    color: #496457;
    font: 700 11px "IBM Plex Mono", monospace;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ob-expanded-copy h3 {
    margin: 6px 0 5px;
    color: #254448;
    font-family: "Manrope", "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    letter-spacing: -.035em;
}

.ob-expanded-copy p {
    max-width: 460px;
    margin: 0;
    color: #455e56;
    font-size: 14px;
    line-height: 1.6;
}

.ob-extra {
    display: grid;
    align-content: center;
    gap: 10px;
}

.ob-extra > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #405b4d;
    font-size: 13px;
    line-height: 1.45;
}

.ob-extra-icon {
    color: #83978a;
}

.ob-extra b {
    display: block;
    margin-bottom: 2px;
    color: #496457;
    font: 700 10px "IBM Plex Mono", monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ob-disclosure {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #e1e9e1;
    border-radius: 5px;
    background: #f4f7f2;
    padding: 9px 11px;
    color: #4d6557;
    font-size: 12px;
    line-height: 1.5;
}

.ob-disclosure > span:first-child {
    color: #79927e;
}

.ob-row-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 9px;
}

.ob-help,
.ob-detail-link,
.ob-share > summary {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font: 700 13px "DM Sans", "Inter", -apple-system, sans-serif;
    text-decoration: none;
}

.ob-help {
    gap: 10px;
    border: 1px solid var(--ob-green);
    background: var(--ob-green);
    padding: 0 13px;
    color: #fff;
}

.ob-help:hover {
    color: #fff;
}

.ob-detail-link,
.ob-share > summary {
    border: 1px solid #d4dfd6;
    background: #fffefa;
    padding: 0 12px;
    color: #456b58;
}

.ob-detail-link:hover,
.ob-share > summary:hover {
    background: #f0f5ef;
}

.ob-share {
    position: relative;
}

.ob-share > summary {
    gap: 5px;
    cursor: pointer;
    list-style: none;
}

.ob-share > summary::-webkit-details-marker {
    display: none;
}

.ob-share-menu {
    position: absolute;
    z-index: 3;
    top: 39px;
    left: 0;
    display: grid;
    width: 168px;
    gap: 2px;
    border: 1px solid #dbe4dc;
    border-radius: 6px;
    background: #fffefa;
    padding: 5px;
    box-shadow: 0 8px 18px #263e301a;
}

.ob-share-menu a,
.ob-share-menu button {
    display: block;
    border: 0;
    border-radius: 4px;
    background: transparent;
    padding: 8px;
    color: #4f6960;
    font: 13px "DM Sans", "Inter", -apple-system, sans-serif;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ob-share-menu a:hover,
.ob-share-menu button:hover {
    background: #f0f5ef;
}

.ob-share :focus-visible,
.ob-row-actions a:focus-visible,
.ob-share-menu button:focus-visible,
.ob-share-menu a:focus-visible {
    outline: 3px solid #8eb29b;
    outline-offset: 2px;
}

.ob-feedback {
    color: #55785f;
    font-size: 12px;
}

.ob-empty,
.ob-error {
    padding: 45px 22px;
    text-align: center;
}

.ob-empty-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #edf2ea;
    color: #718b76;
    font-size: 19px;
}

.ob-error .ob-empty-icon {
    background: #f8eee9;
    color: #9b5541;
}

.ob-empty h3,
.ob-error h3 {
    margin: 0 0 6px;
    color: #244148;
    font-size: 16px;
    letter-spacing: -.035em;
}

.ob-empty p,
.ob-error p {
    margin: 0 0 16px;
    color: #72817a;
    font-size: 12px;
}

.ob-empty-link {
    display: inline-block;
    border: 0;
    background: transparent;
    color: #3f7059;
    font-size: 11px;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ob-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.ob-pagination a,
.ob-pagination span {
    border: 1px solid #d4dfd6;
    border-radius: 5px;
    background: var(--ob-surface);
    padding: 8px 12px;
    color: #456b58;
    font-size: 13px;
    text-decoration: none;
}

.ob-pagination .current {
    border-color: var(--ob-green);
    background: var(--ob-green);
    color: #fff;
}

.ob-pagination .disabled {
    color: #98a29b;
}

.ob-pagination a:focus-visible,
.ob-apply:focus-visible,
.ob-reset:focus-visible,
.ob-empty-link:focus-visible {
    outline: 3px solid #8eb29b;
    outline-offset: 2px;
}

.ob-footnote {
    margin: 12px 0 0;
    color: #52675c;
    font-size: 12px;
}

.ob-mobile-label,
.ob-service-mobile {
    display: none;
}

@media (min-width: 901px) {
    .ob-table-wrap:has(.ob-share[open]) {
        overflow: visible;
    }
}

@media (max-width: 1300px) {
    .ob-nav-inner {
        padding: 0 28px;
    }

    .ob-content {
        padding: 30px 28px 60px;
    }

    .ob-layout {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .ob-filters {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0 20px;
    }

    .ob-filter-heading,
    .ob-privacy {
        grid-column: 1 / -1;
    }

    .ob-fields {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ob-filter-actions {
        align-items: end;
        margin: 0;
    }
}

@media (max-width: 900px) {
    .ob-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ob-board-note {
        border-top: 1px solid #ccd8d0;
        border-left: 0;
        padding: 10px 0 0;
    }

    .ob-table-wrap {
        overflow: visible;
    }

    .ob-table-head {
        display: none;
    }

    .ob-row {
        min-width: 0;
    }

    .ob-main-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 20px;
        min-height: 0;
        padding: 18px 20px;
    }

    .ob-index,
    .ob-service {
        display: none;
    }

    .ob-place strong {
        font-size: 16px;
    }

    .ob-mobile-label {
        display: block;
        margin-bottom: 4px;
        color: #456052;
        font: 700 11px "IBM Plex Mono", monospace;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .ob-service-mobile {
        display: block;
        margin-top: 4px;
        color: #445d52;
        font-size: 13px;
    }

    .ob-status {
        justify-self: start;
        align-self: end;
    }

    .ob-row-toggle {
        align-self: end;
    }

    .ob-expanded {
        grid-template-columns: 1fr;
        padding: 18px 20px;
    }

    .ob-extra {
        grid-template-columns: 1fr 1fr;
    }

    .ob-disclosure,
    .ob-row-actions {
        grid-column: 1;
    }

    .ob-row-actions {
        flex-wrap: wrap;
    }

    .ob-feedback {
        flex-basis: 100%;
    }

    .ob-share-menu {
        position: static;
        margin-top: 6px;
    }
}

@media (max-width: 600px) {
    .ob-nav {
        height: 60px;
    }

    .ob-nav-inner {
        padding: 0 17px;
    }

    .ob-brand {
        gap: 8px;
        font-size: 15px;
    }

    .ob-nav-right {
        gap: 12px;
    }

    .ob-nav-right > a:not(.ob-sign-in) {
        display: none;
    }

    .ob-nav-right .ob-sign-in {
        padding: 8px 10px;
    }

    .ob-content {
        padding: 24px 15px 48px;
    }

    .ob-crumb {
        flex-wrap: wrap;
        gap: 5px 8px;
    }

    .ob-heading {
        gap: 14px;
        margin: 19px 0 21px;
    }

    .ob-heading h1 {
        font-size: 34px;
    }

    .ob-heading p {
        font-size: 15px;
    }

    .ob-board-note {
        font-size: 13px;
    }

    .ob-layout {
        gap: 14px;
    }

    .ob-filters {
        display: block;
        padding: 15px;
    }

    .ob-filter-heading {
        margin-bottom: 14px;
    }

    .ob-fields {
        grid-template-columns: 1fr 1fr;
        gap: 11px;
    }

    .ob-filter-actions {
        margin-top: 13px;
    }

    .ob-privacy {
        font-size: 12px;
    }

    .ob-table-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 13px 14px;
    }

    .ob-list-title {
        flex-wrap: wrap;
    }

    .ob-list-title h2 {
        font-size: 18px;
    }

    .ob-list-title > span {
        font-size: 12px;
    }

    .ob-board-status {
        font-size: 10px;
    }

    .ob-main-row {
        gap: 14px 13px;
        padding: 17px 14px;
    }

    .ob-place strong {
        font-size: 16px;
    }

    .ob-service-mobile {
        font-size: 13px;
    }

    .ob-expanded {
        padding: 14px;
    }

    .ob-share-menu {
        right: 0;
        left: auto;
    }
}

@media (max-width: 380px) {
    .ob-brand {
        font-size: 13px;
    }

    .ob-nav-right .ob-sign-in {
        padding: 7px;
        font-size: 12px;
    }

    .ob-crumb {
        font-size: 10px;
    }

    .ob-fields {
        grid-template-columns: 1fr;
    }

    .ob-board-status {
        white-space: normal;
    }

    .ob-extra {
        grid-template-columns: 1fr;
    }
}