/* Account screens.
 *
 * Deliberately matches the private tracker: monochrome, Times New Roman,
 * 1px black borders. The app this becomes is the same app, and a slick
 * gradient-and-rounded-corners login bolted onto a stark serif tracker would
 * announce that the auth was added by someone else.
 *
 * Inputs are 16px throughout. Anything smaller makes iOS Safari zoom the
 * viewport on focus, which on a phone reads as the page jumping about.
 */

:root {
    --bg: #fafafa;
    --panel-bg: #ffffff;
    --border: #000000;
    --border-light: #cccccc;
    --text: #000000;
    --text-light: #444444;
    --error: #a00000;
}

.auth-screen {
    font-family: 'Times New Roman', Times, Georgia, serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.auth-card {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    padding: 32px 28px;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
}

.auth-card h1 {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: normal;
    text-align: center;
}

/* A heading immediately followed by explanatory text sits tighter to it, so
   the two read as one block rather than two. */
.auth-card h1:has(+ .auth-sub) { margin-bottom: 4px; }

/* Centred to sit under the heading, which is also centred. */
.auth-sub {
    margin: 0 0 24px;
    color: var(--text-light);
    font-size: 15px;
    text-align: center;
}

.auth-field { margin-bottom: 16px; }

.auth-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
}

.auth-field input {
    width: 100%;
    padding: 10px;
    font-size: 16px;              /* keep at 16px: smaller zooms iOS Safari */
    font-family: inherit;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
    box-sizing: border-box;
}

/* Selects need explicit styling or the browser paints its own rounded,
   grey-gradient control -- the one element that would not match the tracker. */
.auth-field select {
    width: 100%;
    padding: 10px;
    font-size: 16px;              /* keep at 16px: smaller zooms iOS Safari */
    font-family: inherit;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    /* A chevron, since removing the appearance also removes the native arrow. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 34px;
}

.auth-field select:focus,
.auth-field input:focus {
    outline: 2px solid var(--border);
    outline-offset: -2px;
}

.auth-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid var(--border);
    background: var(--border);
    color: #fff;
    cursor: pointer;
    margin-top: 8px;
}

.auth-btn:hover:not(:disabled) { background: #333; }

.auth-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.auth-btn-secondary {
    background: var(--panel-bg);
    color: var(--text);
}

.auth-btn-secondary:hover:not(:disabled) { background: #f0f0f0; }

/* Google's brand guidelines require their mark on the button. */
.auth-btn-google,
.auth-btn-apple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-btn-google svg,
.auth-btn-apple svg { width: 18px; height: 18px; }

/* Apple's mark is a solid glyph that inherits currentColor, so it follows the
   button's text colour in both day and night mode without a second asset.
   Their guidelines require the button to be at least as prominent as any other
   provider's -- same size and weight as Google's is what that means here. */
.auth-btn-apple svg { fill: currentColor; }

/* The two provider buttons stack; without this they collide. */
.auth-btn-apple { margin-bottom: 10px; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    color: var(--text-light);
    font-size: 14px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.auth-links {
    margin-top: 20px;
    font-size: 15px;
    text-align: center;
}

.auth-links a {
    color: var(--text);
    text-decoration: underline;
    cursor: pointer;
}

.auth-error,
.auth-notice {
    padding: 10px;
    margin-bottom: 16px;
    font-size: 15px;
    border: 1px solid var(--border);
}

.auth-error { color: var(--error); border-color: var(--error); }

/* Screen-reader announcement without a visual change. */
.auth-sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Buttons stacked in a card need a little separation from the actions below
   them, so switching baby and signing out are not one undifferentiated run. */
.auth-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

/* Offline banner, for the account screens (styles.css covers the tracker). */
.offline-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    padding: 10px 14px;
    background: #111;
    color: #fff;
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 15px;
    text-align: center;
}

.offline-banner.hidden { display: none; }