/* Phone illustrations (screens/ui.njk). Simple, symbolic depictions of a moment,
   not screen replicas. Inside .ph everything is in em, and 1em is 16pt on a
   390pt-wide iPhone, so a phone scales as one object at any width. */

.phone {
    --chrome-ink: var(--chrome);
    --ti-1: #c5beb3;
    --ti-2: #a89f91;
    --ti-3: #8a8174;
    --ti-highlight: #ece6db;
    --bezel: 0.9cqi;      /* black glass border */
    --band: 1.3cqi;       /* titanium */
    --screen-radius: 13.9cqi;
    position: relative;
    width: 100%;
    aspect-ratio: 390 / 844;
    container-type: inline-size;
}

/* Thin natural titanium (the ramp from the retired phone.css) around black glass. */
.phone::before {
    content: "";
    position: absolute;
    inset: calc((var(--bezel) + var(--band)) * -1);
    border-radius: calc(var(--screen-radius) + var(--bezel) + var(--band));
    background: linear-gradient(135deg,
        var(--ti-2) 0%, var(--ti-1) 15%, var(--ti-3) 30%,
        var(--ti-2) 45%, var(--ti-highlight) 55%, var(--ti-2) 65%,
        var(--ti-3) 80%, var(--ti-1) 100%);
    box-shadow:
        inset 0 0 0 0.5px rgb(255 255 255 / 55%),
        0 0 0 0.5px rgb(0 0 0 / 22%),
        0 1.5cqi 4cqi rgb(27 31 61 / 10%),
        0 10cqi 24cqi -6cqi rgb(27 31 61 / 26%);
}

.ph {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--screen-radius);
    box-shadow: 0 0 0 var(--bezel) #07070a;
    font-size: 4.1026cqi;
    color: #1d1d1f;
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 60%, #f5f3ef 100%);
}

.ph .icon { width: 1em; height: 1em; stroke-width: 16; }

.ph-island {
    position: absolute;
    top: 0.7em;
    left: 50%;
    width: 7.4em;
    height: 2.15em;
    transform: translateX(-50%);
    border-radius: 2em;
    background: #07070a;
    z-index: 3;
}
.ph-home {
    position: absolute;
    bottom: 0.55em;
    left: 50%;
    width: 8.5em;
    height: 0.32em;
    transform: translateX(-50%);
    border-radius: 1em;
    background: #1d1d1f;
    opacity: 0.85;
    z-index: 3;
}

/* ---- Layout of a moment ---- */

.ph-body {
    position: absolute;
    inset: 5em 2.25em 2.6em;
    display: flex;
    flex-direction: column;
}
.ph-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6em;
}
.ph-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1em;
}

/* ---- Text stand-ins ---- */

.ph-lines { display: flex; flex-direction: column; align-items: center; gap: 0.7em; width: 100%; }
.ph-line {
    display: block;
    width: 58%;
    height: 0.8em;
    border-radius: 1em;
    background: #e9e7ee;
}
.ph-line--title { width: 72%; height: 1.2em; background: #dcdae4; }
.ph-line--short { width: 40%; }

/* ---- Glyph: one symbol in a tinted disc ---- */

.ph-glyph {
    display: grid;
    place-items: center;
    width: 7.5em;
    height: 7.5em;
    border-radius: 50%;
    color: var(--tint);
    background: color-mix(in srgb, var(--tint) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 14%, transparent);
}
.ph-glyph .icon { width: 3.6em; height: 3.6em; stroke-width: 13; }
.ph-tint-chrome { --tint: #9466c7; }
.ph-tint-green { --tint: #30b050; }
.ph-tint-grey { --tint: #8e8e93; }
.ph-tint-red { --tint: #e5484d; }

/* ---- Nearby ---- */

.ph-halo {
    position: relative;
    display: grid;
    place-items: center;
    width: 7.5em;
    height: 7.5em;
    border-radius: 50%;
    color: #8e8e93;
    background: #f1f0f4;
}
.ph-halo.is-active { color: var(--chrome-ink); background: color-mix(in srgb, #9466c7 12%, #fff); }
.ph-halo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, #9466c7 40%, transparent);
    opacity: 0;
}
.ph-halo.is-active::after { animation: ph-ring 1.8s ease-out infinite; }
@keyframes ph-ring {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(1.6); opacity: 0; }
}

.ph-nearby {
    width: 4em;
    height: 4em;
    fill: none;
    stroke: currentColor;
    stroke-width: 13;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ph-nearby.is-searching .wave { animation: ph-wave 1.6s ease-in-out infinite; }
.ph-nearby.is-searching .wave-2 { animation-delay: 0.25s; }
@keyframes ph-wave {
    0%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

/* ---- Progress: Connect · Sign · Added ---- */

.ph-progress { display: flex; align-items: center; }
.ph-dot {
    position: relative;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: #dcdae4;
    transition: background-color 0.3s;
}
.ph-dot.is-done, .ph-dot.is-current { background: var(--chrome-ink); }
.ph-dot.is-current::after {
    content: "";
    position: absolute;
    inset: -0.3em;
    border-radius: 50%;
    border: 1.5px solid var(--chrome-ink);
}
.ph-join { width: 2.6em; height: 2px; margin: 0 0.5em; border-radius: 1px; background: #dcdae4; }
.ph-join.is-done { background: var(--chrome-ink); }

/* ---- Capsules ---- */

.ph-capsule {
    display: grid;
    place-items: center;
    width: 100%;
    height: 3.4em;
    border-radius: 2em;
    color: #fff;
}
.ph-capsule .icon { width: 1.4em; height: 1.4em; stroke-width: 18; }
.ph-capsule--prominent {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 24%), rgb(255 255 255 / 0%) 55%),
        var(--chrome-ink);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 0.4em 1.1em -0.35em rgb(148 102 199 / 65%);
}
.ph-capsule--glass {
    color: #1d1d1f;
    background: rgb(255 255 255 / 80%);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(0 0 0 / 7%), 0 0.3em 0.9em rgb(0 0 0 / 7%);
}
.ph-capsule--quiet {
    width: 38%;
    height: 0.8em;
    background: color-mix(in srgb, #9466c7 38%, #fff);
}

/* ---- The code ---- */

.ph-code-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2em;
    width: 100%;
    padding: 2.2em 1em;
    border-radius: 1.6em;
    background: #f3f1f7;
}
.ph-digits {
    font-family: var(--font-body);
    font-size: 3.35em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    word-spacing: 0.12em;
    color: var(--chrome-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- Consent ---- */

.ph-avatar {
    display: grid;
    place-items: center;
    width: 2.8em;
    height: 2.8em;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.6em;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(145deg, #f2a36b, #c9607a);
}
.ph-avatar--large { font-size: 2.6em; }

/* Real words, used sparingly: who's asking, and the finished autograph. */
.ph-words { display: flex; flex-direction: column; align-items: center; gap: 0.35em; text-align: center; }
.ph-text {
    display: block;
    max-width: 100%;
    font-family: var(--font-body);
    font-size: 1.3em;
    line-height: 1.3;
    color: #6e6e73;
}
.ph-text--title {
    font-family: var(--font-display);
    font-size: 2.3em;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

/* Signing: a photo and a voice note join the signature. */
.ph-touches { display: flex; gap: 0.8em; }
.ph-touches i {
    display: grid;
    place-items: center;
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    color: var(--chrome-ink);
    background: color-mix(in srgb, #9466c7 12%, #fff);
}
.ph-touches .icon { width: 1.5em; height: 1.5em; stroke-width: 18; }

/* My iPhone: the phone is locked to signing. */
.ph-lock {
    display: grid;
    place-items: center;
    width: 2.6em;
    height: 2.6em;
    margin-bottom: -0.4em;
    border-radius: 50%;
    color: var(--chrome-ink);
    background: color-mix(in srgb, #9466c7 12%, #fff);
}
.ph-lock .icon { width: 1.3em; height: 1.3em; stroke-width: 18; }

/* ---- Signing ---- */

.ph-canvas {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1.05;
    border-radius: 1.6em;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%), 0 0.4em 1.4em rgb(27 31 61 / 6%);
}
.ph-canvas .ph-sig { width: 88%; height: auto; aspect-ratio: 3; }
.ph-baseline { position: absolute; left: 10%; right: 10%; bottom: 30%; height: 1.5px; background: #e3e1ea; }
.ph-swatches { display: flex; gap: 0.9em; }
.ph-swatches i { width: 1.9em; height: 1.9em; border-radius: 50%; background: #1d1d1f; box-shadow: 0 0 0 0.22em #fff, 0 0 0 calc(0.22em + 1px) rgb(0 0 0 / 10%); }
.ph-swatches i:first-child { box-shadow: 0 0 0 0.22em #fff, 0 0 0 calc(0.22em + 2px) var(--chrome-ink); }
.ph-swatches i:nth-child(2) { background: #2f5fd0; }
.ph-swatches i:nth-child(3) { background: #d45d9a; }
.ph-swatches i:nth-child(4) { background: #e5673a; }

.ph-sig { display: block; color: #1d1d1f; }

/* Stroke draw: the signature path declares pathLength="100". */
.ph-draw { stroke-dasharray: 100; stroke-dashoffset: 0; }
@keyframes sig-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---- Keepsake ---- */

.ph-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    width: 100%;
    padding: 2em 1.2em 1.8em;
    border-radius: 1.6em;
    background: linear-gradient(170deg, #fff 0%, #faf6ef 100%);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 5%), 0 0.6em 1.8em rgb(27 31 61 / 9%);
}
.ph-card .ph-sig { width: 88%; height: auto; aspect-ratio: 3; }
.ph-new { position: absolute; top: 1em; right: 1em; width: 3em; height: 1.4em; border-radius: 1em; background: var(--chrome-ink); }
.ph-seal {
    display: flex;
    align-items: center;
    gap: 0.8em;
    width: 100%;
    padding: 0.9em 1em;
    border-radius: 1.2em;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 5%);
}
.ph-seal .icon { flex: none; width: 2.4em; height: 2.4em; padding: 0.45em; border-radius: 50%; stroke-width: 18; }
.ph-seal .ph-line { width: auto; flex: 1; }
.ph-seal--original .icon { color: #248a3d; background: rgb(52 199 89 / 14%); }
.ph-seal--tampered .icon { color: #d70015; background: rgb(255 59 48 / 12%); }

/* ---- Book spread (tile illustration, not a phone) ---- */

.ph-book {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    overflow: hidden;
    border-radius: 0.8em;
    background: #f7f1e6;
    box-shadow: inset 0 0 0 1px rgb(120 90 40 / 12%), 0 1em 2.4em -1em rgb(27 31 61 / 25%);
}
.ph-book-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    padding: 1.4em;
    background: linear-gradient(90deg, #fbf7ef 78%, #ece2cf 100%);
}
.ph-book-page--right { background: linear-gradient(90deg, #e9dfcb 0%, #fbf7ef 22%); }
.ph-book-page .ph-sig { width: 90%; height: auto; aspect-ratio: 3; }
.ph-book-page .ph-line { background: #e6dccb; }
.ph-book-page .ph-line--title { background: #ddd0ba; width: 55%; }
/* A print on the page: white border, a slight turn. */
.ph-book-photo {
    display: block;
    width: 78%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 0.45em solid #fff;
    border-radius: 0.2em;
    background: #e9e5df;
    box-shadow: 0 0.3em 0.8em rgb(0 0 0 / 15%);
    transform: rotate(-2deg);
}

@media (prefers-reduced-motion: reduce) {
    .ph-nearby.is-searching .wave { animation: none; opacity: 1; }
    .ph-halo.is-active::after { animation: none; }
}