/* Notice bar above the panel */
.demo-notice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 1.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    color: white;
    background: rgb(17 24 39);
}

.demo-notice a {
    color: rgb(110 231 183);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.demo-notice-links {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
}

/* On a phone the links wrap between links, not inside one */
.demo-notice-links a {
    white-space: nowrap;
}

.demo-notice a.demo-notice-buy {
    color: white;
    font-weight: 600;
}

/* Under the top bar on every page: who you are now (big), what they may do, and the "Acting as" switcher.
   Sticky under the sticky top bar, so it never scrolls away. Amber for the head nurse, green for staff. */
.demo-whoami {
    position: sticky;
    top: var(--topbar-height, 4rem);
    z-index: 29;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    padding: 0.625rem 1rem;
    background: rgb(236 253 245);
    border-bottom: 1px solid rgb(167 243 208);
    color: rgb(6 78 59);
}
.demo-whoami.is-manager { background: rgb(255 251 235); border-color: rgb(253 230 138); color: rgb(120 53 15); }
.demo-whoami-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.demo-whoami-label { font-size: 0.875rem; }
.demo-whoami-name { font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; }
.demo-whoami-role { font-size: 1.125rem; font-weight: 600; }
.demo-whoami-can { flex: 1 1 18rem; font-size: 0.875rem; line-height: 1.25rem; }
.dark .demo-whoami { background: rgb(2 44 34); border-color: rgb(6 78 59); color: rgb(167 243 208); }
.dark .demo-whoami.is-manager { background: rgb(55 30 10); border-color: rgb(120 53 15); color: rgb(253 230 138); }

.demo-act-as {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.demo-act-as select {
    max-width: 24rem;
    padding: 0.4rem 2rem 0.4rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219);
    background-color: white;
    font-size: 0.9375rem;
    color: rgb(17 24 39);
}

.dark .demo-act-as select { background-color: rgb(17 24 39); border-color: rgb(55 65 81); color: rgb(243 244 246); }

@media (max-width: 640px) {
    .demo-act-as { width: 100%; }
    .demo-act-as select { flex: 1; min-width: 0; max-width: none; }
}

/* Start page guide */
.demo-guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.demo-guide li { display: flex; gap: 0.75rem; padding: 1rem; border-radius: 0.75rem; outline: 1px solid rgb(3 7 18 / 0.08); }
.dark .demo-guide li { outline-color: rgb(255 255 255 / 0.1); }
/* "My shifts" above the steps: the staff's side of the demo */
.demo-guide-mine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1rem; padding: 1rem; border-radius: 0.75rem; background: rgb(236 253 245); outline: 1px solid rgb(167 243 208); }
.demo-guide-mine > div { flex: 1 1 20rem; }
.demo-guide-mine-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.demo-guide-mine .demo-intro-badge { background: rgb(209 250 229); color: rgb(4 120 87); }
.demo-guide-mine p { margin-top: 0.25rem; font-size: 0.875rem; color: rgb(55 65 81); }
.demo-guide-mine a { font-size: 0.875rem; font-weight: 600; color: var(--primary-600); }
.demo-guide-mine a:hover { text-decoration: underline; }
.demo-guide-mine .demo-guide-switch { margin-left: 0.5rem; white-space: nowrap; }
.dark .demo-guide-mine { background: rgb(6 78 59 / 0.25); outline-color: rgb(6 78 59 / 0.8); }
.dark .demo-guide-mine .demo-intro-badge { background: rgb(6 78 59 / 0.5); color: rgb(110 231 183); }
.dark .demo-guide-mine p { color: rgb(209 213 219); }
.dark .demo-guide-mine a { color: var(--primary-400); }
.demo-guide-heading { margin: 1.5rem 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: rgb(17 24 39); }
.dark .demo-guide-heading { color: rgb(243 244 246); }
.demo-guide-number { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; color: white; background: var(--primary-600); }
.demo-guide p { margin-top: 0.25rem; font-size: 0.875rem; color: rgb(75 85 99); }
.dark .demo-guide p { color: rgb(156 163 175); }
.demo-guide a { display: inline-block; margin-top: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--primary-600); }

.demo-guide-as { display: block; width: fit-content; margin-top: 0.25rem; padding: 0.0625rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; color: rgb(75 85 99); background: rgb(243 244 246); }
.demo-guide-as.is-you { color: rgb(4 120 87); background: rgb(209 250 229); }
.dark .demo-guide-as { color: rgb(209 213 219); background: rgb(255 255 255 / 0.08); }
.dark .demo-guide-as.is-you { color: rgb(110 231 183); background: rgb(6 78 59 / 0.5); }
.demo-guide-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.demo-guide-links form { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.demo-guide-links button { margin-top: 0.5rem; text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--primary-600); cursor: pointer; }
.demo-guide-links a:hover, .demo-guide-links button:hover { text-decoration: underline; }
.dark .demo-guide a, .dark .demo-guide-links button { color: var(--primary-400); }
.demo-guide-switch { font-size: 0.75rem; color: rgb(107 114 128); }

/* The language menu in the notice bar */
.demo-notice-lang select {
    padding: 0.1rem 1.6rem 0.1rem 0.5rem;
    font-size: 0.8125rem;
    color: white;
    background-color: rgb(31 41 55);
    border: 1px solid rgb(75 85 99);
    border-radius: 0.375rem;
}

.demo-notice-lang .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Under the page heading: whose screen it is */
.demo-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    background: white;
    outline: 1px solid rgb(3 7 18 / 0.06);
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgb(55 65 81);
}

.dark .demo-intro { background: rgb(255 255 255 / 0.04); outline-color: rgb(255 255 255 / 0.1); color: rgb(209 213 219); }

.demo-intro-badge {
    display: inline-block;
    padding: 0.0625rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgb(254 243 199);
    color: rgb(180 83 9);
}

.demo-intro-my_shifts .demo-intro-badge { background: rgb(209 250 229); color: rgb(4 120 87); }
.demo-intro-codes .demo-intro-badge { background: rgb(224 242 254); color: rgb(3 105 161); }
.dark .demo-intro-badge { background: rgb(146 64 14 / 0.4); color: rgb(252 211 77); }
.dark .demo-intro-my_shifts .demo-intro-badge { background: rgb(6 78 59 / 0.5); color: rgb(110 231 183); }
.dark .demo-intro-codes .demo-intro-badge { background: rgb(7 89 133 / 0.4); color: rgb(125 211 252); }

.demo-intro-guide { margin-left: auto; font-weight: 600; color: var(--primary-600); white-space: nowrap; }
.dark .demo-intro-guide { color: var(--primary-400); }
.demo-intro-guide:hover { text-decoration: underline; }

/* Japanese headings wrap between phrases, not in the middle of a word (Chrome and Edge; other browsers keep the usual wrap) */
html:lang(ja) :is(h1, h2, h3) {
    word-break: auto-phrase;
}