.access-shell { min-height: 100svh; padding: 1rem; color: var(--ink, #3f4740); background: radial-gradient(circle at 100% 0%, rgb(203 221 225 / 58%), transparent 26rem), var(--cream, #fbf7ef); }
.access-nav, .access-header, .access-tabs, .access-role-layout, .access-tags-area, .access-page-alert, .access-shell > .access-success { width: min(100%, 84rem); margin-right: auto; margin-left: auto; }
.access-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; gap: .8rem; }
.access-nav strong { display: block; margin-top: .15rem; color: var(--sage-deep, #586c56); font: 1.2rem Georgia, serif; }
.access-eyebrow { color: var(--sage-deep, #586c56); font-size: .68rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.access-secondary-button, .access-primary-button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .65rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 700; text-decoration: none; }
.access-secondary-button { border: 1px solid #bcc1bd; color: var(--ink, #3f4740); background: rgb(255 253 249 / 75%); }
.access-primary-button { border: 1px solid var(--sage-deep, #586c56); color: #fff; background: var(--sage-deep, #586c56); }
.access-secondary-button:hover, .access-secondary-button:focus-visible { border-color: var(--sage-deep, #586c56); color: var(--sage-deep, #586c56); background: #fff; }
.access-primary-button:hover, .access-primary-button:focus-visible { color: #fff; background: #485c47; }
.access-primary-button:disabled { cursor: wait; opacity: .6; }
.access-header { display: grid; margin-bottom: 1rem; padding: 1.35rem; border: 1px solid rgb(183 185 184 / 65%); border-radius: 1.2rem; background: var(--warm-white, #fffdf9); box-shadow: 0 1rem 3rem rgb(63 71 64 / 7%); gap: 1rem; }
.access-header h1 { margin: .5rem 0 0; color: var(--sage-deep, #586c56); font: 400 clamp(2.2rem, 10vw, 3.8rem)/1 Georgia, serif; letter-spacing: -.045em; }
.access-header p { margin: 0; padding-top: 1rem; border-top: 1px solid #e2e4e2; color: #69746c; line-height: 1.6; }
.access-success { margin-bottom: 1rem; border-color: rgb(135 155 130 / 45%); color: var(--sage-deep, #586c56); background: rgb(135 155 130 / 15%); }
.access-page-alert { margin-bottom: 1rem; }
.access-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; padding: .3rem; border: 1px solid #d7dad7; border-radius: .85rem; background: rgb(255 253 249 / 72%); gap: .3rem; }
.access-tabs button { min-height: 3rem; padding: .55rem; border: 0; border-radius: .62rem; color: #657068; background: transparent; font-size: .78rem; font-weight: 750; }
.access-tabs button.is-active { color: var(--sage-deep, #586c56); background: #fff; box-shadow: 0 .25rem .8rem rgb(63 71 64 / 9%); }
.access-role-layout, .access-tag-top-grid, .access-tags-area, .access-member-list, .access-tag-list, .access-guest-list { display: grid; gap: 1rem; }
.access-panel { padding: 1.2rem; border: 1px solid rgb(183 185 184 / 65%); border-radius: 1.15rem; background: var(--warm-white, #fffdf9); box-shadow: 0 1rem 3rem rgb(63 71 64 / 7%); }
.access-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.access-section-heading h2 { margin: .28rem 0 0; color: var(--sage-deep, #586c56); font: 400 clamp(1.4rem, 7vw, 1.9rem) Georgia, serif; }
.access-count { display: inline-grid; min-width: 2.25rem; min-height: 2.25rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #536a70; background: rgb(203 221 225 / 48%); font-size: .72rem; font-weight: 800; }
.access-member-filters, .access-guest-filters { display: grid; margin: 1rem 0; gap: .65rem; }
.access-member-filters label, .access-guest-filters label, .access-panel .form-label, .access-color-fields legend { display: block; margin-bottom: .35rem; color: #515b53; font-size: .75rem; font-weight: 750; }
.access-search-field input, .access-panel .form-control, .access-panel .form-select { width: 100%; min-height: 2.8rem; padding: .55rem .75rem; border: 1px solid #c9cdca; border-radius: .68rem; color: var(--ink, #3f4740); background-color: #fffefa; font-size: .84rem; }
.access-member-list, .access-tag-list { margin-top: 1rem; gap: .7rem; }
.access-member-card { display: grid; grid-template-columns: 2.65rem minmax(0, 1fr) auto; align-items: center; padding: .85rem; border: 1px solid #dfe2df; border-radius: .85rem; background: #fffefa; gap: .65rem; }
.access-member-card.is-editing, .access-tag-card.is-editing { border-color: var(--sage, #879b82); box-shadow: 0 0 0 3px rgb(135 155 130 / 10%); }
.access-member-avatar { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: 50%; color: var(--sage-deep, #586c56); background: rgb(203 221 225 / 48%); font: 1.2rem Georgia, serif; }
.access-member-copy { min-width: 0; }
.access-member-copy h3, .access-tag-card h3, .access-guest-card h3 { margin: 0; overflow: hidden; color: var(--sage-deep, #586c56); font: 400 1.15rem Georgia, serif; text-overflow: ellipsis; }
.access-member-copy > p, .access-tag-card p, .access-guest-heading p { margin: .1rem 0 .4rem; overflow: hidden; color: #778079; font-size: .72rem; text-overflow: ellipsis; }
.access-member-copy > div { display: flex; flex-wrap: wrap; gap: .35rem; }
.access-member-copy > div span, .access-guest-heading > span { padding: .24rem .45rem; border-radius: 999px; color: #5c7075; background: rgb(203 221 225 / 42%); font-size: .62rem; font-weight: 750; }
.access-member-copy > div .is-active { color: #50684e; background: rgb(135 155 130 / 16%); }
.access-member-copy > div .is-inactive { color: #835d57; background: rgb(166 119 111 / 12%); }
.access-text-button { min-height: 2.35rem; padding: .35rem; border: 0; border-radius: .3rem; color: var(--sage-deep, #586c56); background: transparent; font-size: .72rem; font-weight: 700; text-decoration: underline; text-underline-offset: .18rem; }
.access-text-button.is-danger { color: #945f5a; }
.access-text-button:disabled { cursor: not-allowed; opacity: .45; }
.access-member-editor { align-self: start; }
.access-editor-placeholder { padding: 2.5rem .5rem; color: #778079; text-align: center; }
.access-editor-placeholder span { display: block; color: var(--ice-blue-deep, #7999a1); font-size: 1.5rem; }
.access-editor-placeholder p { margin: .65rem auto 0; font-size: .8rem; line-height: 1.5; }
.access-editor-email { margin: .45rem 0 1rem; color: #747e76; font-size: .75rem; }
.access-role-description { display: block; margin-top: .35rem; color: #79827b; font-size: .7rem; line-height: 1.4; }
.access-active-toggle, .access-required-toggle { display: flex; min-height: 3.4rem; align-items: flex-start; padding: .7rem; border: 1px solid #dfe2df; border-radius: .75rem; cursor: pointer; background: #fcfbf7; gap: .6rem; }
.access-active-toggle input { flex: 0 0 auto; margin-top: .18rem; }
.access-active-toggle strong, .access-active-toggle small { display: block; }
.access-active-toggle strong { color: #4f5951; font-size: .8rem; }
.access-active-toggle small { color: #7b837d; font-size: .68rem; }
.access-admin-note { margin: 1rem 0; padding: .85rem; border: 1px solid rgb(121 153 161 / 36%); border-radius: .75rem; color: #53666a; background: rgb(203 221 225 / 28%); }
.access-admin-note p { margin: .2rem 0 0; font-size: .75rem; }
.access-permissions { margin-top: 1.2rem; }
.access-permissions-intro h3 { margin: 0; color: var(--sage-deep, #586c56); font: 400 1.15rem Georgia, serif; }
.access-permissions-intro p { margin: .2rem 0 1rem; color: #78817a; font-size: .72rem; }
.access-permissions > section + section { margin-top: 1.1rem; }
.access-permissions > section > h4 { margin: 0 0 .5rem; color: #667168; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.access-permissions > section > div { display: grid; gap: .55rem; }
.access-permission-card { min-width: 0; margin: 0; padding: .75rem; border: 1px solid #e0e3e0; border-radius: .75rem; background: #fcfbf7; }
.access-permission-card legend { float: none; width: auto; margin: 0; color: #4d5850; font-size: .8rem; font-weight: 750; }
.access-permission-card > p { margin: .2rem 0 .45rem; color: #7a827c; font-size: .67rem; line-height: 1.4; }
.access-role-default { display: inline-block; margin-bottom: .55rem; padding: .2rem .4rem; border-radius: 999px; color: #717a73; background: #eceeec; font-size: .6rem; font-weight: 700; }
.access-role-default.is-included { color: #52684f; background: rgb(135 155 130 / 15%); }
.access-override-options { display: grid; gap: .35rem; }
.access-override-options label { display: flex; min-height: 2.65rem; align-items: center; padding: .5rem .6rem; border: 1px solid #e0e3e0; border-radius: .6rem; cursor: pointer; background: #fffefa; gap: .55rem; }
.access-override-options label:has(input:checked) { border-color: rgb(135 155 130 / 60%); color: var(--sage-deep, #586c56); background: rgb(135 155 130 / 10%); }
.access-override-options input { flex: 0 0 auto; margin: 0; }
.access-override-options span { font-size: .72rem; font-weight: 650; }
.access-member-editor .access-primary-button, .access-tag-editor .access-primary-button { width: 100%; margin-top: 1rem; }
.access-tag-top-grid { margin-bottom: 1rem; }
.access-tag-card { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: start; padding: .8rem; border: 1px solid #dfe2df; border-radius: .8rem; background: #fffefa; gap: .65rem; }
.access-color-dot { display: inline-block; width: .85rem; height: .85rem; flex: 0 0 auto; margin-top: .2rem; border: 1px solid rgb(63 71 64 / 15%); border-radius: 50%; }
.access-tag-card small { display: block; color: #8a6964; font-size: .65rem; line-height: 1.35; }
.access-tag-card > div:last-child { display: flex; flex-direction: column; align-items: flex-end; }
.access-color-fields { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 2.8rem; align-items: start; margin: 0; padding: 0; border: 0; gap: .5rem; }
.access-color-fields legend { grid-column: 1 / -1; float: none; width: auto; margin: 0; }
.access-color-fields input[type="color"] { width: 3rem; height: 2.8rem; padding: .2rem; border: 1px solid #c9cdca; border-radius: .65rem; background: #fffefa; }
.access-color-preview { width: 2.8rem; height: 2.8rem; border: 1px solid #c9cdca; border-radius: .65rem; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%); }
.access-guests-panel { min-width: 0; }
.access-guest-list { margin-top: 1rem; }
.access-guest-card { padding: .9rem; border: 1px solid #dfe2df; border-radius: .85rem; background: #fffefa; }
.access-guest-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.access-tag-checkboxes { display: flex; min-width: 0; flex-wrap: wrap; margin: .75rem 0; padding: 0; border: 0; gap: .4rem; }
.access-tag-checkboxes legend { float: none; width: 100%; margin-bottom: .2rem; color: #69736b; font-size: .7rem; font-weight: 700; }
.access-tag-checkboxes label { display: inline-flex; min-height: 2.75rem; align-items: center; padding: .5rem .65rem; border: 1px solid #dfe2df; border-radius: 999px; cursor: pointer; background: #fcfbf7; gap: .4rem; }
.access-tag-checkboxes label:has(input:checked) { border-color: rgb(135 155 130 / 60%); background: rgb(135 155 130 / 10%); }
.access-tag-checkboxes input { margin: 0; }
.access-tag-checkboxes label > span:last-child { font-size: .72rem; font-weight: 650; }
.access-guest-card > .access-primary-button { width: 100%; }
.access-no-tags { margin: .7rem 0; color: #7c847e; font-size: .72rem; }
.access-field-error { margin-top: .35rem; color: #b02a37; font-size: .75rem; }
.access-field-error p { margin: .15rem 0; }
.access-empty { padding: 2.8rem 1rem 2rem; color: #747d76; text-align: center; }
.access-empty > span { display: inline-grid; width: 3.25rem; height: 3.25rem; place-items: center; border-radius: 50%; color: var(--ice-blue-deep, #7999a1); background: rgb(203 221 225 / 42%); font-size: 1.4rem; }
.access-empty h3 { margin: .9rem 0 .3rem; color: var(--sage-deep, #586c56); font: 400 1.25rem Georgia, serif; }
.access-empty p { max-width: 26rem; margin: 0 auto; font-size: .78rem; line-height: 1.5; }
.access-empty.is-compact { padding: 1.6rem .5rem; }
.access-empty.is-compact h3 { margin-top: 0; }
.access-tabs button:focus-visible, .access-search-field input:focus, .access-panel .form-control:focus, .access-panel .form-select:focus, .access-text-button:focus-visible, .access-primary-button:focus-visible, .access-secondary-button:focus-visible, .access-active-toggle:focus-within, .access-override-options label:focus-within, .access-tag-checkboxes label:focus-within, .access-color-fields input[type="color"]:focus-visible, #member-editor-title:focus-visible, #tag-editor-title:focus-visible { border-color: var(--ice-blue-deep, #7999a1); outline: 3px solid rgb(121 153 161 / 28%); outline-offset: 2px; box-shadow: none; }
.access-panel .form-check-input:checked { border-color: var(--sage-deep, #586c56); background-color: var(--sage-deep, #586c56); }
@media (min-width: 576px) { .access-shell { padding: 1.5rem; } .access-header, .access-panel { padding: 1.55rem; } .access-member-filters { grid-template-columns: minmax(0, 1.5fr) minmax(8rem, .7fr) minmax(7rem, .6fr); align-items: end; } .access-guest-filters { grid-template-columns: minmax(0, 1.5fr) minmax(10rem, .7fr); align-items: end; } .access-override-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } .access-override-options label { align-items: flex-start; } .access-guest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .access-header { grid-template-columns: minmax(0, 1fr) minmax(17rem, .75fr); align-items: center; gap: 2rem; } .access-header p { padding: 0 0 0 2rem; border-top: 0; border-left: 1px solid #e2e4e2; } .access-tag-top-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, .65fr); align-items: start; } }
@media (min-width: 992px) { .access-shell { padding: 2.5rem; } .access-nav { margin-bottom: 2rem; } .access-role-layout { grid-template-columns: minmax(22rem, .8fr) minmax(31rem, 1.2fr); align-items: start; gap: 1.5rem; } .access-member-editor { position: sticky; top: 2rem; max-height: calc(100svh - 4rem); overflow-y: auto; } .access-guest-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .access-shell *, .access-shell *::before, .access-shell *::after { scroll-behavior: auto !important; transition: none !important; } }