:root {
    --tapestry-scope-personal: #667f9d;
    --tapestry-scope-household: #758a68;
    --tapestry-scope-family: #925f67;
}

.page-connection-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: min(100% - 32px, 1380px);
    margin: 12px auto 0;
    padding: 7px 10px;
    border: 1px solid rgba(116, 91, 58, .18);
    border-radius: 12px;
    background: rgba(255, 252, 245, .9);
    box-sizing: border-box;
}

.page-connection-status__label {
    margin-right: auto;
    color: #7d674c;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.page-connection-status__items { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.page-connection-chip {
    appearance: none;
    display: grid;
    grid-template-columns: 8px 22px auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 4px 9px 4px 6px;
    border: 1px solid rgba(91, 72, 49, .18);
    border-radius: 999px;
    background: #fffdf8;
    color: #4b4034;
    text-align: left;
    font: inherit;
}
button.page-connection-chip { cursor: pointer; }
button.page-connection-chip:hover { border-color: rgba(117, 91, 54, .42); background: #fff8e9; }
.page-connection-chip__scope { width: 8px; height: 8px; border-radius: 50%; background: var(--scope-color); }
.page-connection-chip img { width: 22px; height: 26px; object-fit: contain; }
.page-connection-chip > span:last-child { display: grid; line-height: 1.05; }
.page-connection-chip strong { font-size: .75rem; }
.page-connection-chip small { margin-top: 2px; color: #756a5e; font-size: .64rem; white-space: nowrap; }
.page-connection-chip--personal { --scope-color: var(--tapestry-scope-personal); }
.page-connection-chip--household { --scope-color: var(--tapestry-scope-household); }
.page-connection-chip--family { --scope-color: var(--tapestry-scope-family); }

.google-connected-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(35, 31, 26, .55);
}
.google-connected-dialog {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 20px;
    width: min(620px, 100%);
    padding: 24px;
    border: 1px solid rgba(124, 95, 55, .3);
    border-radius: 18px;
    background: #fffaf0;
    box-shadow: 0 24px 70px rgba(35, 28, 20, .3);
    box-sizing: border-box;
}
.google-connected-dialog__close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 1px solid rgba(91,72,49,.2); border-radius: 50%; background: #fff; cursor: pointer; }
.google-connected-dialog__beacon { width: 76px; height: 108px; object-fit: contain; }
.google-connected-dialog__eyebrow { margin: 0 0 4px; color: #6d7e5f; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.google-connected-dialog h2 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 1.7rem; color: #493b2d; }
.google-connected-dialog p { color: #65594d; }
.google-connected-dialog__note { font-size: .82rem; }
.tapestry-scope-chart { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 16px 0; }
.tapestry-scope-chart__item { display: grid; grid-template-columns: 12px auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(91,72,49,.14); border-radius: 10px; background: rgba(255,255,255,.72); }
.tapestry-scope-chart__item i { width: 10px; height: 10px; border-radius: 50%; background: var(--scope-color); }
.tapestry-scope-chart__item span { display: grid; }
.tapestry-scope-chart__item strong { font-size: .78rem; }
.tapestry-scope-chart__item small { color: #776a5d; font-size: .67rem; }
.tapestry-scope-chart__item--personal { --scope-color: var(--tapestry-scope-personal); }
.tapestry-scope-chart__item--household { --scope-color: var(--tapestry-scope-household); }
.tapestry-scope-chart__item--family { --scope-color: var(--tapestry-scope-family); }

@media (max-width: 700px) {
    .page-connection-status { width: calc(100% - 16px); margin-top: 8px; align-items: stretch; flex-direction: column; gap: 5px; }
    .page-connection-status__label { margin: 0; }
    .page-connection-status__items { justify-content: stretch; }
    .page-connection-chip { flex: 1 1 100%; }
    .page-connection-chip small { white-space: normal; }
    .google-connected-dialog { grid-template-columns: 1fr; max-height: calc(100vh - 30px); overflow: auto; }
    .google-connected-dialog__beacon { width: 60px; height: 82px; }
    .tapestry-scope-chart { grid-template-columns: 1fr; }
}