/*
 * Family panel styles.
 *
 * Ordinary sizes on purpose: what comes in here is a relative, not the elderly person.
 * The 80dp touch target and the AAA contrast are requirements of the phone app, and
 * applying them here too would blur that distinction.
 *
 * The system theme is honoured because a panel opened at night on a phone has no
 * business dazzling anybody.
 */

:root {
    --ink: #11161c;
    --paper: #fafaf7;
    --sunken: #ececE6;
    --border: #c9c9c2;
    --blue: #0b4f9e;
    --red: #9c1111;
    --green: #14622f;
    --muted: #5a6470;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #eceff3;
        --paper: #14181d;
        --sunken: #1e242b;
        --border: #333b45;
        --blue: #6fa8e8;
        --red: #e88a8a;
        --green: #7fc79a;
        --muted: #9aa5b1;
    }
}

* { box-sizing: border-box; }

/*
 * `hidden` has to win over the rules below.
 *
 * The browser implements the attribute as `display: none` in its own stylesheet, which
 * any author `display` rule outranks. Without this, `.modal { display: flex }` kept the
 * crop dialog on screen with `hidden` set, covering the form underneath it.
 */
[hidden] { display: none !important; }

body {
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
    max-width: 34rem;
    font: 16px/1.5 system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--paper);
}

header { border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
header h1 { margin: 0; font-size: 1.5rem; }
header p { margin: .25rem 0 1rem; color: var(--muted); font-size: .9rem; }

h2 { font-size: 1.1rem; margin: 2rem 0 .25rem; }

.hint { color: var(--muted); font-size: .85rem; margin: .25rem 0 .75rem; }
.optional { color: var(--muted); font-weight: normal; }

label { display: block; margin-bottom: .75rem; font-size: .9rem; }

input {
    display: block;
    width: 100%;
    margin-top: .25rem;
    padding: .6rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
}

input[type="range"] { padding: 0; }

button {
    padding: .6rem 1rem;
    font: inherit;
    color: var(--ink);
    background: var(--sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

button:hover { border-color: var(--muted); }
button.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
button.icon { padding: .3rem .5rem; background: none; border: none; font-size: 1rem; }
button.icon:disabled { opacity: .3; cursor: default; }

.list { list-style: none; margin: 0; padding: 0; }

.list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
}

.list .name { flex: 1; }
.list .limit { width: 4.5rem; margin-top: 0; text-align: right; }

h3 { font-size: 1rem; margin: 1.5rem 0 .25rem; }

/* Navigation, and anything that reads as a link but has to be a button for the
   keyboard and for the accessibility tree. */
nav { display: flex; gap: 1rem; margin: .5rem 0 1rem; }

button.link {
    padding: 0;
    background: none;
    border: none;
    color: var(--blue);
    text-decoration: underline;
    font-size: .9rem;
}

button.link:hover { border: none; }

select {
    padding: .6rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* A provisioning code is read out loud or typed by hand into the phone, so it is set
   apart: monospaced, spaced out, and impossible to mistake for a name. */
.code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .15em;
    padding: .1rem .4rem;
    background: var(--sunken);
    border-radius: 4px;
}
.list .secondary { color: var(--muted); font-size: .85rem; }

.add-row { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; }
.add-row input { margin-top: 0; }

.footer { margin-top: 2rem; display: flex; gap: 1rem; align-items: center; }
.status { margin: 0; font-size: .85rem; color: var(--muted); }
.status.ok { color: var(--green); }
.error { color: var(--red); font-size: .9rem; }

details { margin-top: 2rem; }
summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
details .list, details p, details button { margin-top: .75rem; }

/* --- photo crop modal --- */

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .6);
    z-index: 10;
}

.modal-box {
    width: 100%;
    max-width: 24rem;
    max-height: 100%;
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.modal-box h2 { margin-top: 0; }

/* The canvas is square and the circle sits on top of it, so it is visible which part
   of the photo will end up inside the phone's round avatar. */
.crop {
    position: relative;
    width: 320px;
    max-width: 100%;
    margin: .75rem auto;
    aspect-ratio: 1;
}

.crop canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--sunken);
    border-radius: 6px;
    cursor: grab;
    touch-action: none;
}

.crop-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.modal-buttons {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Contact thumbnail in the list */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blue);
    flex: none;
}

.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .8rem;
}