/*
   Feature 16.6/16.7 - the two doors into the patient workspace.

   Deliberately the same palette as maeve-demo.css (the role selector) and the
   workspace itself, so choosing a patient or finding one never looks like
   leaving the product. Element selectors are scoped under .maeve-entry: these
   pages also load Tailwind for the shared banners, and this file must not
   restyle them.
*/

.maeve-entry {
    margin: 0;
    min-height: 100vh;
    color: #e5e7eb;
    background: #030712 radial-gradient(ellipse at 50% 0, #312e8138, transparent 62%);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.maeve-entry .entry-shell {
    display: flex;
    justify-content: center;
    padding: 40px 16px 56px;
}

/* Wider than the old max-w-md: a clinician's patient list is a list, and the
   old card wrapped "Born Jan 1, 2023" onto its own line on a laptop. */
.maeve-entry .entry-main { width: 100%; max-width: 34rem; }

.maeve-entry .entry-brand { text-align: center; margin-bottom: 26px; }

.maeve-entry .entry-brand h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.035em;
    background: linear-gradient(90deg, #818cf8, #c084fc, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.maeve-entry .entry-brand p { margin: 6px 0 0; font-size: 13px; color: #9ca3af; }

.maeve-entry .entry-card {
    background: #111827bd;
    border: 1px solid #37375e;
    border-radius: 22px;
    padding: 28px;
}

@media (max-width: 480px) { .maeve-entry .entry-card { padding: 22px 18px; } }

.maeve-entry .entry-footnote,
.maeve-entry .entry-main > p:last-child {
    margin: 22px 0 0;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
}

/* -- Content written by the two pages ------------------------------------ */

.maeve-entry .entry-title { margin: 0 0 6px; font-size: 21px; font-weight: 650; letter-spacing: -.02em; color: #f9fafb; }
.maeve-entry .entry-lede { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: #aeb7c6; }
.maeve-entry .entry-hint { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: #9ca3af; }
.maeve-entry .entry-section { margin: 28px 0 8px; font-size: 13px; font-weight: 650; color: #e5e7eb; }

.maeve-entry .entry-note {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #374151;
    border-radius: 14px;
    background: #111827;
    font-size: 13.5px;
    line-height: 1.6;
    color: #cbd5f5;
}

.maeve-entry .entry-note.is-warning { border-color: #78350f; background: #451a034d; color: #fde68a; }
.maeve-entry .entry-note.is-empty { text-align: center; }
.maeve-entry .entry-note strong { color: #f9fafb; font-weight: 600; }

/* The whole row is the target: a switcher used on a phone between appointments
   should not need an accurate tap on a small link. */
.maeve-entry .entry-list { list-style: none; margin: 0 0 6px; padding: 0; border: 1px solid #37375e; border-radius: 16px; overflow: hidden; }
.maeve-entry .entry-list > li + li { border-top: 1px solid #263049; }

.maeve-entry .entry-row {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    min-height: 64px;
    text-decoration: none;
    transition: background .18s ease;
}

.maeve-entry a.entry-row:hover { background: #6366f114; }
.maeve-entry .entry-row-name { display: block; font-size: 14.5px; font-weight: 600; color: #f9fafb; }
.maeve-entry .entry-row-meta { display: block; margin-top: 3px; font-size: 12.5px; color: #9ca3af; }
.maeve-entry .entry-row-go { flex-shrink: 0; color: #a5b4fc; font-size: 17px; }

.maeve-entry .entry-status { flex-shrink: 0; font-size: 12px; font-weight: 600; }
.maeve-entry .entry-status.is-approved { color: #6ee7b7; }
.maeve-entry .entry-status.is-denied { color: #9ca3af; }
.maeve-entry .entry-status.is-pending { color: #fcd34d; }

/* A labelled radio option styled as a selectable card, for choices like
   Signup's "what kind of account is this" - the light layout used Tailwind's
   has-[:checked] utility, which this file (plain CSS, no Tailwind config) does
   with :has() directly. */
.maeve-entry .entry-choice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 8px;
    border: 1px solid #37375e;
    border-radius: 14px;
    cursor: pointer;
}

.maeve-entry .entry-choice:has(:checked) { border-color: #818cf8; background: #6366f114; }
.maeve-entry .entry-choice input { margin-top: 3px; accent-color: #818cf8; }
.maeve-entry .entry-choice-title { display: block; font-size: 14px; font-weight: 600; color: #f9fafb; }
.maeve-entry .entry-choice-desc { display: block; margin-top: 2px; font-size: 12.5px; color: #9ca3af; }

.maeve-entry .entry-field { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #e5e7eb; }

.maeve-entry .entry-input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    font: inherit;
    font-size: 14px;
    color: #f9fafb;
    background: #0b1120;
    border: 1px solid #37375e;
    border-radius: 10px;
}

.maeve-entry .entry-input::placeholder { color: #6b7280; }
.maeve-entry .entry-input:focus { outline: 2px solid #818cf8; outline-offset: 1px; border-color: #818cf8; }
.maeve-entry .entry-input.is-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }

.maeve-entry .entry-form { display: grid; gap: 14px; margin: 0 0 8px; }
.maeve-entry .entry-form.is-inline { grid-template-columns: 1fr auto; align-items: start; }

.maeve-entry .entry-button {
    min-height: 46px;
    padding: 12px 20px;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    color: #030712;
    background: #a5b4fc;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.maeve-entry .entry-button:hover { filter: brightness(1.1); }
.maeve-entry .entry-button.is-quiet { color: #c7d2fe; background: transparent; border: 1px solid #37375e; }
.maeve-entry .entry-button.is-link { min-height: 0; padding: 0; color: #a5b4fc; background: none; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

.maeve-entry .entry-request { display: grid; gap: 9px; padding: 14px 18px; }
.maeve-entry .entry-request p { margin: 0; font-size: 14px; font-weight: 600; color: #f9fafb; }

.maeve-entry .entry-exit { margin: 22px 0 0; text-align: center; font-size: 13px; }
.maeve-entry .entry-exit a,
.maeve-entry .entry-exit-button { color: #a5b4fc; font-weight: 600; }
/* Sign out has to POST, and a button that ends a session should still read as
   the quiet link it replaced rather than a second primary action. */
.maeve-entry .entry-exit-button {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer;
}
.maeve-entry .entry-exit-button:hover { text-decoration: underline; }

/* The shared language toggle and session banner are Tailwind partials written for
   the light layout. Recolour them here rather than forking the partials, so the
   signed-in pages that still use _AuthLayout keep theirs unchanged. */
.maeve-entry .text-slate-400 { color: #9ca3af; }
.maeve-entry .text-slate-600 { color: #e5e7eb; }
.maeve-entry .text-blue-600 { color: #a5b4fc; }

.maeve-entry a:focus-visible,
.maeve-entry button:focus-visible { outline: 3px solid #e0e7ff; outline-offset: 3px; }

@media (max-width: 480px) {
    .maeve-entry .entry-form.is-inline { grid-template-columns: 1fr; }
}