/*
    Settings → Notifications (Client.Shared/Pages/NotificationSettings.razor).

    A sibling of account.css rather than a section of it: the page is built
    from the account primitives (.acct-page, .acct-header, .acct-card,
    .acct-note, .acct-echo, .acct-band, .acct-planstrip, the button skins) and
    this file adds only what is new on it, under the nfy- prefix. Tokens
    (--stone-*, --ink-*, --amber-*, --surface-*) come from timeline.css :root.

    Same contrast rules as account.css §17: informational text is --ink-muted,
    never --ink-faint (about 3.4:1 on cream, fails AA), and a control's edge is
    --stone-500 or darker, never --stone-300 (fails the 3:1 of WCAG 1.4.11).

    Structure:
      1.  This device     — status badge, headline, the one action, steps
      2.  Setting rows    — icon tile, copy, trailing switch or value link
      3.  Switch          — native checkbox with role="switch"
      4.  Preview         — the heads-up as it arrives
      5.  Quiet hours     — the read-only strip that links to Profile
      6.  Promise         — the closing "how it keeps calm" list
      7.  Skeleton
      8.  Responsive
*/

/* ═══ 1. This device ══════════════════════════════════════════════ */

.nfy-device {
    gap: 0.9rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 70%),
        var(--surface-base);
}

.nfy-device-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem 1rem;
}

/* The state at a glance, never by colour alone: the bell gains a slash when
   notifications aren't reaching this device, and the headline says it. */
.nfy-device-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 15px;
    border: 1px solid var(--stone-200);
    background: linear-gradient(180deg, var(--stone-50), var(--stone-100));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: var(--stone-600);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.nfy-device-badge svg {
    width: 1.5rem;
    height: 1.5rem;
}

.nfy-device.is-on .nfy-device-badge {
    border-color: var(--stone-700);
    background: linear-gradient(180deg, var(--stone-600), var(--stone-700));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 4px 12px rgba(74, 62, 46, 0.22);
    color: var(--surface-base);
}

.nfy-device.is-attention .nfy-device-badge {
    border-color: rgba(200, 152, 72, 0.45);
    background: rgba(200, 152, 72, 0.15);
    color: var(--amber-600);
}

.nfy-device.is-blocked .nfy-device-badge {
    border-color: rgba(160, 84, 74, 0.32);
    background: rgba(160, 84, 74, 0.08);
    color: #8a3e34;
}

.nfy-device-copy {
    flex: 1 1 15rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* The card's h2, set as an eyebrow: the headline under it is what people read. */
.nfy-device-label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.nfy-device-state {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--ink-primary);
}

.nfy-device-text {
    margin: 0.15rem 0 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: 38rem;
}

.nfy-device-action.mud-button-root {
    flex: 0 0 auto;
    min-width: 7.5rem;
}

/* Numbered steps (iPhone/iPad Safari: Add to Home Screen first). */
.nfy-steps {
    list-style: none;
    counter-reset: nfy-step;
    margin: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--stone-200);
    background: rgba(237, 229, 214, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.nfy-steps li {
    counter-increment: nfy-step;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-primary);
}

.nfy-steps li::before {
    content: counter(nfy-step);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    border: 1px solid var(--stone-500);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--stone-700);
    transform: translateY(-0.05rem);
}

/* ═══ 2. Setting rows ═════════════════════════════════════════════ */

.nfy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Icon, words, control: the control sits level with the title, so a long
   description wraps under the words without pushing the switch around. */
.nfy-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.85rem;
    padding: 1rem 0;
    border-top: 1px solid var(--stone-100);
}

.nfy-item:first-child {
    border-top: none;
    padding-top: 0.1rem;
}

.nfy-item:last-child { padding-bottom: 0; }

/* A setting that belongs to the row above it (calendar events under
   heads-ups): no rule between them, and a tinted panel indented to the
   parent's words so it reads as part of that row. */
.nfy-item.is-nested {
    grid-template-columns: minmax(0, 1fr) auto;
    margin: -0.35rem 0 0.15rem calc(2.3rem + 0.85rem);
    padding: 0.75rem 0.85rem;
    border-top: none;
    border-radius: 12px;
    background: rgba(237, 229, 214, 0.5);
}

.nfy-item.is-nested + .nfy-item { border-top: 1px solid var(--stone-100); }

.nfy-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 11px;
    border: 1px solid var(--stone-200);
    background: linear-gradient(180deg, var(--stone-50), var(--stone-100));
    color: var(--stone-700);
}

.nfy-item-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.nfy-item-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding-top: 0.12rem;
}

.nfy-item-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink-primary);
}

/* The title is the switch's <label>, so it toggles it too. */
label.nfy-item-title { cursor: pointer; }

.nfy-item-desc {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: 40rem;
}

.nfy-item-note,
.nfy-item-echo { margin-top: 0.4rem; }

/* acct-echo is a one-line readout; this one carries a link and may wrap. */
.nfy-item-echo { align-items: flex-start; }
.nfy-item-echo .acct-echo-icon { margin-top: 0.12rem; }

/* A value that opens where it is set (the heads-up default, on Profile). */
.nfy-value {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.2rem;
    padding: 0.32rem 0.4rem 0.32rem 0.65rem;
    border-radius: 9px;
    border: 1px solid var(--stone-200);
    background: rgba(237, 229, 214, 0.6);
    /* app.css paints every <a> violet, so the colour has to be stated. */
    color: var(--stone-700);
    font-size: 0.84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none;
    transition: background 130ms ease, border-color 130ms ease;
}

.nfy-value svg {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 130ms ease;
}

.nfy-value:hover {
    border-color: var(--stone-400);
    background: var(--stone-100);
}

.nfy-value:hover svg { transform: translateX(2px); }

.nfy-value:focus-visible {
    outline: 2px solid var(--stone-500);
    outline-offset: 2px;
}

/* An inline link in a note or readout. Underlined, because it sits in text. */
.nfy-link {
    color: var(--stone-700);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.nfy-link:hover { color: var(--ink-primary); }

.nfy-link:focus-visible {
    outline: 2px solid var(--stone-500);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ═══ 3. Switch ═══════════════════════════════════════════════════ */

/* A native checkbox with role="switch": the label, keyboard (Space), focus and
   screen-reader "switch, on/off" all come from the platform. MudSwitch is not
   used here because its label is part of the control, and these rows put the
   words on the left and the control on the right.

   On and off differ in three ways, not only in colour: the thumb moves, it
   grows, and it gains a tick. The off track's edge is --stone-500 (about
   4.4:1 on cream) so the control itself clears 3:1. */
.nfy-switch {
    --nfy-sw-w: 2.9rem;
    --nfy-sw-h: 1.75rem;
    --nfy-sw-border: 2px;
    --nfy-sw-thumb-off: 0.85rem;
    --nfy-sw-thumb-on: 1.2rem;
    --nfy-sw-inner-w: calc(var(--nfy-sw-w) - 2 * var(--nfy-sw-border));
    --nfy-sw-inner-h: calc(var(--nfy-sw-h) - 2 * var(--nfy-sw-border));

    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--nfy-sw-w);
    height: var(--nfy-sw-h);
    margin: 0.05rem 0 0;
    border: var(--nfy-sw-border) solid var(--stone-500);
    border-radius: 999px;
    background: var(--surface-base);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.nfy-switch::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--nfy-sw-thumb-off);
    height: var(--nfy-sw-thumb-off);
    border-radius: 999px;
    background-color: var(--stone-500);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.75rem;
    transform: translate(calc((var(--nfy-sw-inner-h) - var(--nfy-sw-thumb-off)) / 2), -50%);
    transition:
        transform 200ms cubic-bezier(0.3, 0.7, 0.4, 1),
        width 200ms ease,
        height 200ms ease,
        background-color 180ms ease;
}

.nfy-switch:checked {
    border-color: var(--stone-700);
    background: var(--stone-700);
}

.nfy-switch:checked::before {
    width: var(--nfy-sw-thumb-on);
    height: var(--nfy-sw-thumb-on);
    background-color: var(--surface-base);
    /* A tick in --stone-700. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.6 6.2 2.2 2.2 4.6-4.8' fill='none' stroke='%234A3E2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    box-shadow: 0 1px 3px rgba(20, 14, 10, 0.3);
    transform: translate(
        calc(var(--nfy-sw-inner-w) - var(--nfy-sw-thumb-on) - (var(--nfy-sw-inner-h) - var(--nfy-sw-thumb-on)) / 2),
        -50%);
}

.nfy-switch:hover:not(:disabled) { background: var(--stone-100); }
.nfy-switch:checked:hover:not(:disabled) { background: var(--stone-800); border-color: var(--stone-800); }

.nfy-switch:focus-visible {
    outline: 2px solid var(--stone-500);
    outline-offset: 3px;
}

.nfy-switch:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Windows high contrast: the track and thumb are painted, so give them system colours. */
@media (forced-colors: active) {
    .nfy-switch { border-color: CanvasText; background: Canvas; }
    .nfy-switch::before { background-color: CanvasText; }
    .nfy-switch:checked { border-color: Highlight; background: Highlight; }
    .nfy-switch:checked::before { background-color: HighlightText; background-image: none; }
}

/* ═══ 4. Preview ══════════════════════════════════════════════════ */

/* The heads-up as it arrives, on a stand-in wallpaper, so "Show task names"
   is something people can see rather than imagine. The card is the operating
   system's surface, not ours, which is why it is near-white. */
.nfy-preview {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nfy-preview-caption {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.nfy-preview-stage {
    padding: 1.1rem;
    border-radius: 16px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(217, 176, 106, 0.35), rgba(217, 176, 106, 0) 55%),
        linear-gradient(145deg, #3b3127 0%, var(--stone-600) 55%, var(--stone-500) 100%);
    box-shadow: inset 0 0 0 1px rgba(36, 31, 27, 0.25);
}

.nfy-preview-card {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: 23rem;
    padding: 0.75rem 0.85rem 0.8rem 0.75rem;
    border-radius: 18px;
    background: rgba(251, 249, 244, 0.92);
    box-shadow:
        0 10px 28px rgba(20, 14, 10, 0.28),
        0 1px 2px rgba(20, 14, 10, 0.18);
    color: #1f1d1a;
}

.nfy-preview-icon {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.5rem;
}

.nfy-preview-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.nfy-preview-head {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #57524a;
}

.nfy-preview-app {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.nfy-preview-title {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    animation: acct-reveal 180ms ease-out;
}

.nfy-preview-body {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.4;
}

/* ═══ 5. Quiet hours ══════════════════════════════════════════════ */

/* The shared plan-strip label is --ink-faint; here it names the value, so it
   steps up to --ink-muted like the account eyebrow does. */
.nfy-strip .acct-planstrip-label { color: var(--ink-muted); }

/* ═══ 6. Promise ══════════════════════════════════════════════════ */

.nfy-promise {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.35rem 0.15rem 0;
}

.nfy-promise-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.nfy-promise-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.6rem;
}

.nfy-promise-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-radius: 13px;
    border: 1px solid var(--stone-200);
    background: rgba(245, 240, 232, 0.55);
}

.nfy-promise-item p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.nfy-promise-item strong {
    display: block;
    margin-bottom: 0.05rem;
    font-weight: 700;
    color: var(--ink-primary);
}

.nfy-promise-icon {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 0.1rem;
    color: var(--stone-600);
}

.nfy-promise-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* ═══ 7. Skeleton ═════════════════════════════════════════════════ */

.nfy-skel-badge {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 15px;
    flex: 0 0 auto;
}

/* ═══ 8. Responsive ═══════════════════════════════════════════════ */

@media (max-width: 520px) {
    /* The words wrap to several lines here, so the badge sits beside the
       first of them rather than floating halfway down the paragraph. */
    .nfy-device-row { align-items: flex-start; }

    /* The action drops under the words and takes the full width, the easy
       thumb target on a phone. */
    .nfy-device-action.mud-button-root { flex: 1 1 100%; }

    .nfy-item { column-gap: 0.7rem; }

    .nfy-item.is-nested { margin-left: calc(2.3rem + 0.7rem); }

    /* The heads-up value moves under its words rather than squeezing them. */
    .nfy-item.has-value { grid-template-columns: auto minmax(0, 1fr); }
    .nfy-item.has-value .nfy-value {
        grid-column: 2;
        justify-self: start;
        margin-top: 0.5rem;
    }

    .nfy-preview-stage { padding: 0.85rem; }

    /* The strip keeps its chevron and border, which already say "opens
       something"; the words would crowd the window's times onto two lines.
       Hidden visually only, so the link's name still says where it goes. */
    .nfy-strip-cta-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}