/* ONE BIT data layout mapped to the CloverOS panorama composition. */

#funds.onebit-live-board {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.onebit-clover-snapshot-panel,
.onebit-clover-business-panel {
    min-width: 0;
    border: 1px solid #d8ddd9;
    border-radius: 16px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 5px 18px rgba(26, 72, 49, .035);
}

.onebit-clover-panel-heading {
    display: flex;
    min-height: 68px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.onebit-clover-panel-heading > div:first-child {
    min-width: 0;
}

.onebit-clover-panel-heading span,
.onebit-clover-panel-heading h2,
.onebit-clover-panel-heading p {
    display: block;
    margin: 0;
}

.onebit-clover-panel-heading span {
    color: #9a6814;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}

.onebit-clover-panel-heading h2 {
    margin-top: 6px;
    color: #18201c;
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.onebit-clover-panel-heading p {
    margin-top: 5px;
    color: #737c77;
    font-size: 10px;
    line-height: 1.55;
}

.onebit-clover-panel-heading > a,
.onebit-clover-summary > a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #d9c99f;
    border-radius: 9px;
    color: #7c5610;
    background: #fffaf0;
    padding: 0 13px;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
}

.onebit-clover-panel-heading > a:hover,
.onebit-clover-summary > a:hover {
    border-color: #c59b43;
    background: #fff5df;
}

.onebit-clover-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.onebit-clover-snapshot-grid article {
    position: relative;
    min-width: 0;
    min-height: 132px;
    border: 1px solid #dfe3df;
    border-radius: 11px;
    background: #fbfcfb;
    padding: 14px;
}

.onebit-clover-snapshot-grid article > span,
.onebit-clover-snapshot-grid article > strong,
.onebit-clover-snapshot-grid article > p,
.onebit-clover-snapshot-grid article > em {
    display: block;
    margin: 0;
}

.onebit-clover-snapshot-grid article > span {
    color: #5e6862;
    font-size: 10px;
    font-weight: 750;
}

.onebit-clover-snapshot-grid article > strong {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    margin-top: 12px;
    color: #1d2721;
    line-height: 1;
}

.onebit-clover-snapshot-grid article > strong b {
    min-width: 0;
    font-size: clamp(24px, 2.25vw, 31px);
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}

.onebit-clover-snapshot-grid article > strong small {
    color: #9a6c1d;
    font-size: 11px;
    font-weight: 850;
}

.onebit-clover-snapshot-grid article > strong.is-block b {
    font-size: clamp(21px, 2vw, 28px);
}

.onebit-clover-snapshot-grid article > p {
    margin-top: 9px;
    color: #78817c;
    font-size: 9px;
    line-height: 1.45;
}

.onebit-clover-snapshot-grid article > em {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 1px solid #cfe4d6;
    border-radius: 999px;
    color: #22714a;
    background: #eff8f2;
    padding: 4px 7px;
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
}

.onebit-clover-business-panel {
    padding: 18px;
}

.onebit-clover-business-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 294px;
    gap: 10px;
    align-items: start;
}

.onebit-clover-paths-scroll {
    min-width: 0;
    overflow: hidden;
}

.onebit-clover-column-heads {
    display: grid;
    grid-template-columns: 150px repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 10px;
}

.onebit-clover-column-heads b {
    min-width: 0;
    border-radius: 8px;
    color: #fff;
    background: #19231e;
    padding: 10px 8px;
    font-size: 11px;
    text-align: center;
}

.onebit-clover-business-row {
    display: grid;
    grid-template-columns: 150px repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e4d7b9;
    border-radius: 12px;
    background: #fffaf0;
    padding: 10px;
}

.onebit-clover-business-row + .onebit-clover-business-row {
    margin-top: 10px;
}

.onebit-clover-business-row.is-market-maker {
    border-color: #cfe2db;
    background: #f4faf7;
}

.onebit-clover-business-row > header {
    display: flex;
    min-width: 0;
    min-height: 148px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e8d8b7;
    padding: 12px 14px 12px 4px;
    text-align: center;
}

.onebit-clover-business-row.is-market-maker > header {
    border-right-color: #cfe2db;
}

.onebit-clover-business-row > header i {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #9c6a12;
    background: #fff1d0;
    font-size: 18px;
}

.onebit-clover-business-row.is-market-maker > header i {
    color: #12705b;
    background: #def3eb;
}

.onebit-clover-business-row > header h3 {
    margin: 12px 0 0;
    color: #2a302d;
    font-size: 17px;
}

.onebit-clover-business-row > header p {
    margin: 5px 0 0;
    color: #777f7a;
    font-size: 8px;
    line-height: 1.45;
}

.onebit-clover-flow-cell {
    min-width: 0;
    min-height: 148px;
    border: 1px solid #e6e1d8;
    border-radius: 10px;
    background: #fff;
    padding: 13px;
    box-shadow: 0 4px 12px rgba(50, 44, 30, .035);
}

.onebit-clover-flow-cell > span,
.onebit-clover-flow-cell > strong,
.onebit-clover-flow-cell > p {
    display: block;
    margin: 0;
}

.onebit-clover-flow-cell > span {
    min-height: 28px;
    color: #59645e;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
}

.onebit-clover-flow-cell > strong {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 4px;
    margin-top: 14px;
    color: #28302b;
}

.onebit-clover-flow-cell > strong b {
    min-width: 0;
    font-size: clamp(20px, 1.75vw, 27px);
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.onebit-clover-flow-cell > strong small {
    color: #9b6c18;
    font-size: 9px;
    font-weight: 850;
}

.onebit-clover-business-row.is-market-maker .onebit-clover-flow-cell > strong small {
    color: #17715f;
}

.onebit-clover-flow-cell > p {
    margin-top: 12px;
    color: #78817c;
    font-size: 8px;
    line-height: 1.5;
}

.onebit-clover-flow-cell.is-detail > span {
    min-height: 20px;
}

.onebit-clover-flow-cell.is-detail > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid #eeeae2;
    padding: 7px 0;
}

.onebit-clover-flow-cell.is-detail > div:first-of-type {
    margin-top: 4px;
}

.onebit-clover-flow-cell.is-detail b,
.onebit-clover-flow-cell.is-detail em {
    min-width: 0;
    font-size: 8px;
    font-style: normal;
}

.onebit-clover-flow-cell.is-detail b {
    color: #555f59;
}

.onebit-clover-flow-cell.is-detail em {
    color: #8a6219;
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

.onebit-clover-business-row.is-market-maker .onebit-clover-flow-cell.is-detail em {
    color: #176f5e;
}

.onebit-clover-summary {
    min-width: 0;
    border: 1px solid #dce1dd;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
}

.onebit-clover-summary > span,
.onebit-clover-summary > h3,
.onebit-clover-summary > time {
    display: block;
    margin: 0;
}

.onebit-clover-summary > span {
    color: #76807a;
    font-size: 9px;
    font-weight: 800;
}

.onebit-clover-summary > h3 {
    margin-top: 7px;
    color: #a06c11;
    font-size: 21px;
}

.onebit-clover-summary > time {
    margin-top: 5px;
    color: #7c847f;
    font-size: 9px;
}

.onebit-clover-summary-tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
    border-top: 1px solid #e6e9e7;
    padding-top: 12px;
}

.onebit-clover-summary-tags b {
    border: 1px solid #dfd8ca;
    border-radius: 8px;
    color: #6f592f;
    background: #fffaf0;
    padding: 9px 5px;
    font-size: 9px;
    text-align: center;
}

.onebit-clover-summary-tags b:last-child {
    border-color: #cfe2da;
    color: #176d5b;
    background: #f1f9f6;
}

.onebit-clover-summary section {
    margin-top: 15px;
}

.onebit-clover-summary h4 {
    margin: 0;
    color: #3b4540;
    font-size: 11px;
}

.onebit-clover-summary p {
    margin: 8px 0 0;
    color: #69736d;
    font-size: 9px;
    line-height: 1.65;
}

.onebit-clover-summary dl {
    margin: 8px 0 0;
    border: 1px solid #e2e6e3;
    border-radius: 9px;
    background: #fafcfb;
    padding: 6px 10px;
}

.onebit-clover-summary dl div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #e7eae8;
    padding: 8px 0;
}

.onebit-clover-summary dl div:last-child {
    border-bottom: 0;
}

.onebit-clover-summary dt,
.onebit-clover-summary dd {
    margin: 0;
    font-size: 8px;
}

.onebit-clover-summary dt {
    color: #747d78;
}

.onebit-clover-summary dd {
    color: #296a49;
    font-weight: 850;
    text-align: right;
}

.onebit-clover-summary > a {
    width: 100%;
    margin-top: 14px;
}

#funds .onebit-network-strip,
#funds .onebit-board-footer {
    display: none;
}

#funds .onebit-treasury-panel {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .onebit-clover-business-layout {
        grid-template-columns: 1fr;
    }

    .onebit-clover-summary {
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr) minmax(250px, .8fr);
        gap: 10px 18px;
        align-items: start;
    }

    .onebit-clover-summary-tags {
        grid-column: 1;
    }

    .onebit-clover-summary section {
        margin-top: 0;
    }

    .onebit-clover-summary > a {
        grid-column: 1;
    }
}

@media (max-width: 860px) {
    .onebit-clover-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .onebit-clover-column-heads {
        display: none;
    }

    .onebit-clover-business-row {
        grid-template-columns: 126px repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "identity scale participation"
            "identity detail funds";
    }

    .onebit-clover-business-row > header {
        grid-area: identity;
    }

    .onebit-clover-business-row > .onebit-clover-flow-cell:nth-of-type(1) { grid-area: scale; }
    .onebit-clover-business-row > .onebit-clover-flow-cell:nth-of-type(2) { grid-area: participation; }
    .onebit-clover-business-row > .onebit-clover-flow-cell:nth-of-type(3) { grid-area: detail; }
    .onebit-clover-business-row > .onebit-clover-flow-cell:nth-of-type(4) { grid-area: funds; }

    .onebit-clover-summary {
        grid-template-columns: 1fr 1fr;
    }

    .onebit-clover-summary > span,
    .onebit-clover-summary > h3,
    .onebit-clover-summary > time,
    .onebit-clover-summary-tags,
    .onebit-clover-summary > a {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .onebit-clover-snapshot-panel,
    .onebit-clover-business-panel {
        border-radius: 14px;
        padding: 13px;
    }

    .onebit-clover-panel-heading {
        min-height: 0;
        flex-direction: column;
        gap: 10px;
    }

    .onebit-clover-panel-heading h2 {
        font-size: 22px;
    }

    .onebit-clover-snapshot-grid {
        grid-template-columns: 1fr;
    }

    .onebit-clover-snapshot-grid article {
        min-height: 118px;
    }

    .onebit-clover-business-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "scale"
            "participation"
            "detail"
            "funds";
    }

    .onebit-clover-business-row > header {
        min-height: 112px;
        border-right: 0;
        border-bottom: 1px solid #e8d8b7;
        padding: 10px;
    }

    .onebit-clover-business-row.is-market-maker > header {
        border-right: 0;
        border-bottom-color: #cfe2db;
    }

    .onebit-clover-flow-cell {
        min-height: 128px;
    }

    .onebit-clover-summary {
        display: block;
    }

    .onebit-clover-summary section {
        margin-top: 15px;
    }
}