/* edge-dash. A separate file because the CSP allows no inline style. */
:root { color-scheme: light dark; --muted: #777; --ok: #2e7d32; --warn: #b26a00; --bad: #c62828; }
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; padding: 0 1rem 2rem; max-width: 48rem; margin-inline: auto; }
header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #8884; }
.narrow { max-width: 28rem; margin: 4rem auto; text-align: center; }
.button, button { font: inherit; padding: .35rem .8rem; border-radius: .4rem; border: 1px solid #8888; background: transparent; cursor: pointer; color: inherit; text-decoration: none; }
.banner { background: #fff3cd; color: #664d03; border: 1px solid #e6c46a; padding: .5rem .75rem; border-radius: .4rem; font-weight: 600; }
.status { font-weight: 600; }
.status-ok { color: var(--ok); } .status-warn { color: var(--warn); } .status-down { color: var(--bad); }
.action { margin: .75rem 0; }
.action-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.action-form input, .action-form select, .action-form textarea { font: inherit; padding: .3rem; }
.message.ok { color: var(--ok); } .message.error { color: var(--bad); }
.muted { color: var(--muted); }
#updates { padding-left: 1.2rem; }
.level { font-size: .8em; text-transform: uppercase; color: var(--muted); }
.level-warn .level { color: var(--warn); } .level-error .level { color: var(--bad); } .level-ok .level { color: var(--ok); }
.brand { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0 .5rem; border-bottom: 2px solid #c9a227; }
.brand > a { font-weight: 700; letter-spacing: .02em; color: inherit; text-decoration: none; }
.brand-end { display: flex; align-items: center; gap: .75rem; }
.brand-name { font-size: .85em; color: var(--muted); }
/* Account menu: the pawn in the top right. */
.account { position: relative; }
.account-button { list-style: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid #8888; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
.account-button::-webkit-details-marker { display: none; }
.account-button::marker { content: ""; }
.account-button:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }
.account[open] > .account-button { background: #8882; }
.account-menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; min-width: 14rem; max-width: min(20rem, calc(100vw - 2rem)); padding: .75rem; border: 1px solid #8886; border-radius: .5rem; background: Canvas; color: CanvasText; box-shadow: 0 6px 20px #0003; overflow-wrap: anywhere; }
.account-menu p { margin: 0; }
.account-name { font-weight: 700; }
.account-email, .account-provider { font-size: .85em; }
.account-menu .account-provider { margin-bottom: .5rem; }
.account-badge { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: .3rem; font-size: .75em; font-weight: 600; background: #c9a227; color: #000; vertical-align: middle; }
.account-links { display: flex; flex-direction: column; gap: .2rem; padding: .5rem 0; border-top: 1px solid #8884; }
.account-links a { color: inherit; }
.account-signout { margin: 0; padding-top: .5rem; border-top: 1px solid #8884; }
.account-signout button { width: 100%; }
/* The gear before the pawn: this page's manage-access screen, for its managers. */
.manage-gear { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; box-sizing: border-box; border-radius: 50%; border: 1px solid #8888; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.manage-gear:hover { background: #8882; }
.manage-gear:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }
.brand-end .manage-gear + .account { margin-left: -.25rem; }
/* Manage-access screen. */
.acl-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.acl-table th { text-align: left; font-size: .85em; color: var(--muted); font-weight: 600; }
.acl-table th, .acl-table td { padding: .5rem; border-bottom: 1px solid #8883; vertical-align: middle; }
.acl-table th:first-child, .acl-table td:first-child { padding-left: 0; }
.acl-who { overflow-wrap: anywhere; }
.acl-table select, .acl-add-form select, .acl-add-form input { font: inherit; padding: .3rem; }
.acl-add-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; }
.acl-add-form label { font-weight: 600; }
.acl-add-form input[type="email"] { flex: 1 1 14rem; min-width: 0; }
.acl-hint { font-size: .85em; }
.acl-save { margin-top: 1.5rem; }
.admin-footer { margin-top: 2.5rem; padding-top: .5rem; border-top: 1px solid #8884; font-size: .8em; text-align: right; }
.admin-footer a { color: var(--muted); }
.access-day h2 { font-size: 1.05rem; margin: 1.5rem 0 .25rem; }
.access-people { list-style: none; padding: 0; margin: 0; }
.access-people li { padding: .5rem 0; border-bottom: 1px solid #8883; overflow-wrap: anywhere; }
.access-meta, .access-last { font-size: .85em; }
/* Sign-in pills: one per configured provider, sized for a thumb. */
.signin-pills { display: flex; flex-direction: column; gap: .75rem; max-width: 20rem; margin: 1.5rem auto; }
.signin-pill { display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 48px; box-sizing: border-box; padding: .6rem 1.5rem; border-radius: 999px; border: 1px solid #8888; background: #8881; color: inherit; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.signin-pill:hover { background: #8883; border-color: #c9a227; }
.signin-pill:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }
.signin-pill svg { width: 1.25rem; height: 1.25rem; flex: none; }
header .signin-pills { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; max-width: none; margin: 0 0 0 auto; }
header .signin-pill { min-height: 44px; padding: .5rem 1rem; font-size: .9em; }
.access-flag { color: var(--warn); font-size: .85em; font-weight: 600; }
/* Home page: the pages this person may open, with the ACL levels they hold on each. */
.dash-index { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.dash-index th { text-align: left; font-size: .85em; color: var(--muted); font-weight: 600; }
.dash-index th, .dash-index td { padding: .5rem .5rem; border-bottom: 1px solid #8883; vertical-align: middle; }
.dash-index th:first-child, .dash-index td:first-child { padding-left: 0; }
.dash-name { overflow-wrap: anywhere; }
.dash-access { white-space: nowrap; }
.perm-icon { display: inline-flex; vertical-align: middle; margin-right: .25rem; }
.perm-icon svg { width: 1.25rem; height: 1.25rem; flex: none; }
.perm-read { color: #1e88e5; } .perm-act { color: #c9a227; } .perm-edit { color: #2e7d32; } .perm-manage { color: #8e24aa; }
.perm-off { opacity: .25; filter: grayscale(1); }
.dash-index-note { font-size: .85em; margin: -.5rem 0 1rem; }
.dash-index-legend { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .85em; color: var(--muted); }
.dash-index-legend li { display: inline-flex; align-items: center; }