/*
  Magic WishList — shared styling for the MAUI Blazor Hybrid host and the web app.

  ── The idea ──────────────────────────────────────────────────────────────────────────────────
  Every screen sits on one side of a secret. Your own list is open: there is nothing on it you do
  not already know. Someone else's list is where the secrets live — suggestions they will never see,
  claims they will never hear about.

  So the GROUND COLOUR says whose knowledge you are in. Light means open. Deep plum means you are
  holding something back from someone, and is a standing reminder not to hand your phone over.

  The only ornament is the gift tag on a wish (see .tag): an empty outline is unclaimed, a filled
  brass tag with initials is spoken for. Your own list shows no tag at all, because there is nothing
  there for you to know.
*/

:root {
    color-scheme: light;

    /* Open surfaces — your own things. */
    --bone: #F4F2F7;
    --card: #FFFFFF;
    --line: #E2DEEA;
    --text: #1F1830;
    --muted: #6C6383;

    /* Secret surfaces — someone else's list, your shopping list, writing a suggestion. */
    --ink: #2A1B3D;
    --ink-raise: #3B2857;
    --ink-line: #4A3568;
    --ink-text: #F3EFF8;
    --ink-muted: #A99CC0;

    /* The ribbon. Two weights: one that passes on white, one that passes on plum. */
    --brass: #8F5F14;
    --brass-lit: #F2BC6B;

    --sage: #2F6B50;
    --sage-lit: #86D0A9;
    --rose: #B23A55;
    --rose-lit: #FF9DAE;

    --r-sm: 8px;
    --r: 13px;
    --r-lg: 20px;
    --gap: 0.75rem;
    --tab-h: 4.5rem;

    /* Type: one family. A CDN webfont cannot work in an offline-first app and bundling binaries is
       not worth the weight, so the personality comes from a rounded system face where one exists
       and a clean fallback where it does not. */
    --sans: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Varela Round",
            system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bone);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Shell ─────────────────────────────────────────────────────────────────────────────────── */

.app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bone);
    transition: background-color .35s ease;
}

/* The whole point: a screen where you are holding a secret is a different place. */
.app.secret {
    background: var(--ink);
    color: var(--ink-text);
    --card: var(--ink-raise);
    --line: var(--ink-line);
    --text: var(--ink-text);
    --muted: var(--ink-muted);
    --brass: var(--brass-lit);
    --sage: var(--sage-lit);
    --rose: var(--rose-lit);
}

.app-bar {
    display: flex;
    align-items: baseline;
    gap: var(--gap);
    padding: max(0.9rem, env(safe-area-inset-top)) 1.1rem 0.7rem;
    position: sticky;
    top: 0;
    z-index: 5;
    background: inherit;
}

.app-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.app-bar .whose {
    font-size: 0.82rem;
    color: var(--muted);
}

.app-body {
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0.5rem 1.1rem calc(var(--tab-h) + 2rem);
}

/* ── Tab bar ───────────────────────────────────────────────────────────────────────────────── */

.tab-bar {
    position: fixed;
    inset: auto 0 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--card);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 10;
}

.tab-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: var(--tab-h);
    padding: 0.55rem 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

.tab-bar a i {
    font-style: normal;
    font-size: 1.35rem;
    line-height: 1;
    opacity: .75;
}

.tab-bar a.active { color: var(--text); }
.tab-bar a.active i { opacity: 1; }

.tab-bar a { position: relative; }

/* A hairline above the live tab rather than a pill or a filled block — the quietest way to say
   "you are here" without competing with the tag. */
.tab-bar a.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.7rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--brass);
}

/* ── Type ──────────────────────────────────────────────────────────────────────────────────── */

h1 {
    font-size: 1.6rem;
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0.4rem 0 0.15rem;
}

h2 { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; margin: 1.9rem 0 0.6rem; }
h3 { font-size: 0.94rem; font-weight: 700; margin: 1.3rem 0 0.5rem; }

p { margin: 0 0 0.6rem; }
.app-body p { max-width: 62ch; }

.lede { color: var(--muted); margin: 0 0 1.2rem; }
.muted { color: var(--muted); }
.small { font-size: 0.83rem; }
.centered { text-align: center; }
.error { color: var(--rose); }

.price {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text);
}

.clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

a { color: var(--brass); text-underline-offset: 2px; }

.page-head {
    display: flex;
    align-items: flex-end;
    gap: var(--gap);
    margin-bottom: 1rem;
}

.page-head h1 { margin: 0; }
.page-head > :last-child { margin-left: auto; flex: none; }

/* Section headings inside a page. A rule that stops at the text, not a tracked-out label. */
.group > h2 {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
    margin-top: 0;
}

.group > h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.group + .group { margin-top: 1.6rem; }

/* ── Notices ───────────────────────────────────────────────────────────────────────────────── */

.notice {
    border-left: 3px solid var(--brass);
    padding: 0.6rem 0 0.6rem 0.8rem;
    font-size: 0.88rem;
    color: var(--muted);
    margin: 0 0 1.1rem;
}

.notice strong { color: var(--text); }
.notice.warning { border-left-color: var(--rose); }

/* ── Forms ─────────────────────────────────────────────────────────────────────────────────── */

label { display: block; margin-bottom: 1rem; font-size: 0.84rem; font-weight: 600; color: var(--muted); }
label.inline { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; }
label em { font-style: normal; font-weight: 400; }

input, textarea, select {
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.65rem 0.75rem;
    font: inherit;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

input::placeholder { color: var(--muted); opacity: .7; }
label.inline input, label.check input { width: auto; margin: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

/* The router moves focus to the heading after navigation; that is for screen readers, not a
   visible ring. */
h1:focus, h1:focus-visible { outline: none; }

button {
    font: inherit;
    font-weight: 650;
    padding: 0.65rem 1.05rem;
    min-height: 46px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}

/* Primary inverts with the ground, which keeps the two worlds coherent: plum on paper, brass on plum. */
button.primary { background: var(--ink); border-color: var(--ink); color: #FFF; }
.app.secret button.primary { background: var(--brass-lit); border-color: var(--brass-lit); color: var(--ink); }

button.danger { color: var(--rose); border-color: color-mix(in srgb, var(--rose) 45%, transparent); background: transparent; }
button.linkish { border: none; background: none; color: var(--brass); padding: 0.3rem; min-height: 0; font-weight: 600; }
button.linkish.danger { color: var(--rose); }
button.block { width: 100%; }
button:disabled { opacity: .42; cursor: default; }

.actions { display: flex; flex-wrap: wrap; gap: var(--gap); margin: 1.4rem 0; }
.invite-row { display: flex; gap: var(--gap); align-items: flex-start; }
.invite-row input { margin-top: 0; }

/* ── Auth ──────────────────────────────────────────────────────────────────────────────────── */

.auth-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bone);
}

.auth-card {
    width: min(400px, 100%);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2rem 1.75rem;
}

.auth-card h1 { margin: 0 0 0.15rem; font-size: 1.45rem; }

/* The tag introduces itself on the way in: the first thing you see is the object the whole app is
   built around, empty and waiting for a name. */
.auth-card > .tag { margin-bottom: 1.4rem; }


/* ── Wish rows ─────────────────────────────────────────────────────────────────────────────── */

.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap); }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.card.row { display: flex; align-items: center; gap: var(--gap); padding: 0.85rem; }
.card.tappable { cursor: pointer; }
.card.done { opacity: .55; }

.card-body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }
.card.row .card-body, .wish .card-body { padding: 0; }
.card-body p { margin: 0; font-size: 0.9rem; }
.card-body strong { font-size: 1.02rem; letter-spacing: -0.01em; }

.card-title { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }

/* A wish is laid out around its tag: the tag first, then the item it is hanging from. */
.wish { display: flex; gap: 0.9rem; padding: 0.9rem; align-items: flex-start; }

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
    font-size: 0.83rem;
    color: var(--muted);
}

.card-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.55rem; }
.check { display: flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--text); font-size: 0.87rem; font-weight: 500; }


/* ── The gift tag ──────────────────────────────────────────────────────────────────────────────
   The one ornament, and it carries the information the whole app exists for. An outline is
   unclaimed; a filled tag names who is buying it. Never shown on the owner's own list. */

.tag {
    flex: none;
    position: relative;
    display: inline-block;
    width: 2.9rem;
    height: 3.7rem;
    color: var(--muted);
}

.tag svg { display: block; width: 100%; height: 100%; }

.tag path { fill: currentColor; stroke: none; }

.tag.empty path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    opacity: .5;
}

.tag.claimed { color: var(--brass); }
.tag.mine { color: var(--sage); }

/* The initials sit below the punched hole, in the ground colour so they read as ink on the tag. */
.tag .face {
    position: absolute;
    inset: 34% 0 0;
    display: grid;
    place-items: center;
    font-size: 0.73rem;
    font-weight: 750;
    color: var(--card);
}

.app.secret .tag .face { color: var(--ink); }


/* ── Pills ─────────────────────────────────────────────────────────────────────────────────── */

.flag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--muted);
}

.flag::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: currentColor;
}

.flag.given { color: var(--sage); }
.flag.claimed { color: var(--brass); }
.flag.suggested { color: var(--muted); font-weight: 600; }
.flag.suggested::before { display: none; }

/* ── Photos & avatars ──────────────────────────────────────────────────────────────────────── */

.photo-strip { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; margin: 0.2rem 0; }

.photo-strip img {
    height: 88px;
    width: auto;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--line);
}

.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--line);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--muted);
}

.family-hero { display: flex; align-items: center; gap: var(--gap); margin-bottom: 1.3rem; }
.family-hero h1 { margin: 0; }
.family-hero .avatar { width: 62px; height: 62px; font-size: 1.2rem; }
.family-hero > :last-child { margin-left: auto; }

.profile-photo { display: flex; align-items: center; gap: var(--gap); margin-bottom: 1.3rem; }
.profile-photo .avatar { width: 70px; height: 70px; font-size: 1.35rem; }

/* ── Empty states ──────────────────────────────────────────────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
}

.empty-state strong { color: var(--text); font-size: 1.05rem; }
.empty-mark { font-size: 2.2rem; line-height: 1; margin-bottom: 0.6rem; }
.empty-state p { margin: 0; max-width: 34ch; }

/* The empty tag as the empty-state mark: the same object the list is made of, waiting. */
.empty-state .tag { margin-bottom: 0.9rem; width: 3.4rem; height: 4.3rem; }

.boot { padding: 3rem; color: var(--muted); }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    padding: 0.85rem 1.2rem;
    background: var(--rose);
    color: #FFF;
    z-index: 100;
}