/* ======================================================================
   3RD-I · AUTOMATED SAFETY ALERTS
   The companion to 3rd-i Command. Command is what the safety office sees.
   This is what a covered person gets, without lifting a finger: automated,
   location aware safety alerts pushed to their phone.

   Composition: a floating control card straddles the LEFT edge of the phone,
   half on and half off, like a settings panel popped off the device. A small
   fake cursor flips its master switch, the scope rows light up, and the phone
   fills with alerts beneath the card, newest on top.

   Incident data is credited to the reporting partner, sandesk.io. Everything
   here is illustrative.
   ====================================================================== */

.aa-sec { padding: clamp(56px, 7vw, 100px) 0 clamp(20px, 3vw, 40px); }
.aa-head { max-width: 760px; margin-bottom: clamp(28px, 3.6vw, 52px); }
.aa-head h2 { margin: 14px 0 0; }
.aa-head .lede { margin: 16px 0 0; }

.aa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(30px, 5vw, 84px);
  align-items: center;
}

/* ------------------------------------------------------- desktop value column */
.aa-points {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 440px;
}
/* each point is a real card, not bare text on the page ground */
.aa-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}
.aa-point-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--acc-sky);
}
.aa-point-ic svg { width: 20px; height: 20px; }
.aa-point-t b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.aa-point-t span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--dim); }

/* ------------------------------------------------------------------ the stage */
.aa-stage {
  position: relative;
  justify-self: center;
  /* room on the left for the card overhang so nothing spills off the page */
  margin-left: 150px;
}

.aa-phone {
  --s-ink: #070c1a;
  --s-line: rgba(255, 255, 255, 0.12);
  --s-card: rgba(255, 255, 255, 0.085);
  --s-text: #fff;
  --s-muted: rgba(255, 255, 255, 0.64);
  --s-faint: rgba(255, 255, 255, 0.42);
  position: relative;
  width: min(330px, 84vw);
  aspect-ratio: 330 / 744;
  border-radius: 50px;
  padding: 10px;
  background: linear-gradient(160deg, #2c313c, #0c0e13 60%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.09),
    0 44px 96px -34px rgba(10, 16, 40, 0.62),
    0 6px 16px -8px rgba(10, 16, 40, 0.4);
}
.aa-screen {
  position: relative;
  height: 100%;
  border-radius: 41px;
  overflow: hidden;
  /* a calm lock-screen wallpaper: deep navy falling to near-black with one
     quiet brand glow at the top, nothing blotchy */
  background:
    radial-gradient(140% 46% at 50% -10%, rgba(73, 121, 239, 0.34), transparent 60%),
    linear-gradient(196deg, #0b1226 0%, #070c1a 52%, #0b0918 100%);
  color: var(--s-text);
  font-variant-numeric: tabular-nums;
}
.aa-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 26px;
  border-radius: 999px;
  background: #05070d;
  z-index: 6;
}
.aa-lockbar { position: absolute; top: 48px; left: 0; right: 0; text-align: center; }
.aa-lockbar .d { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--s-muted); }
.aa-lockbar .t { margin: 1px 0 0; font-size: 42px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }

/* the notification layer: the WHOLE screen. Cards are absolute at the
   landing line under the clock (--aa-land); a new one starts transformed
   down at the bottom edge and rides up to it, passing BEHIND the control
   card (z-index 1-4 vs the card's 5), then stacks newest-in-front. */
.aa-stack {
  --aa-land: 124px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.aa-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 80%; /* inside the alert band, below the centered floating card */
  text-align: center;
  font-size: 12.5px;
  color: var(--s-faint);
  transition: opacity 0.3s ease;
}
.aa-empty svg { display: block; width: 20px; height: 20px; margin: 0 auto 8px; opacity: 0.7; }
.aa-stack.is-live ~ .aa-empty { opacity: 0; }

/* a single notification: iOS frosted glass, no hard outline. Motion is one
   transform transition: the JS sets the ride (bottom -> landing) and the
   stack offsets (newest in front, older translated down + scaled behind). */
.aa-note {
  position: absolute;
  top: var(--aa-land);
  left: 12px;
  right: 12px;
  display: flex;
  gap: 11px;
  padding: 12px 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5);
  transform-origin: top center;
  transition:
    transform 0.65s cubic-bezier(0.3, 0.8, 0.3, 1),
    opacity 0.3s ease,
    filter 0.3s ease;
}
.aa-note.is-piled { filter: brightness(0.7); }
.aa-note.is-out { opacity: 0; }
/* the real app icon, clipped the way iOS clips it */
.aa-note-ic {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.aa-note-ic img { display: block; width: 100%; height: 100%; }
.aa-note-main { flex: 1; min-width: 0; }
.aa-note-top { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.aa-note-app { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--s-muted); }
.aa-note-time { margin-left: auto; font-size: 11px; color: var(--s-faint); }
.aa-note-title { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--s-text); }
.aa-note-text { margin: 2px 0 0; font-size: 12.5px; line-height: 1.38; color: var(--s-muted); }

/* -------------------------------------- the floating control card, on the edge */
.aa-control {
  position: absolute;
  z-index: 5;
  /* vertically centered on the phone: the card is ~251px tall, so half of
     that off 50% puts its middle on the phone's middle at every width */
  top: calc(50% - 126px);
  left: -150px;
  width: 300px;
  padding: 13px 15px 14px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  box-shadow: 0 30px 60px -22px rgba(6, 10, 26, 0.6), 0 8px 20px -10px rgba(6, 10, 26, 0.45);
}
/* In dark mode --panel is nearly the phone's own ink and the card sinks into
   the screen. Give it a visibly ELEVATED surface: lighter slate, a rim light
   on top, and a deeper drop, so it floats in both themes. */
html:not([data-theme="light"]) .aa-control {
  background: linear-gradient(180deg, #232a3d, #1a2032);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 34px 64px -22px rgba(0, 0, 0, 0.85),
    0 10px 24px -10px rgba(0, 0, 0, 0.6);
}
html:not([data-theme="light"]) .aa-scope.is-on { background: rgba(92, 193, 246, 0.1); }
html:not([data-theme="light"]) .aa-scope-ic { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
html:not([data-theme="light"]) .aa-switch { background: rgba(255, 255, 255, 0.18); }
html:not([data-theme="light"]) .aa-switch[data-on="true"] { background: var(--grad); }
.aa-control-top { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.aa-control-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
}
.aa-control-ic svg { width: 20px; height: 20px; }
.aa-control-label { flex: 1; min-width: 0; }
.aa-control-label b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.aa-control-label span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--dim); }

/* the switch */
.aa-switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: var(--pill);
  background: var(--line-hi);
  cursor: default;
  transition: background 0.28s ease;
}
.aa-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(8, 12, 24, 0.4);
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.aa-switch[data-on="true"] { background: var(--grad); }
.aa-switch[data-on="true"]::after { transform: translateX(19px); }
.aa-switch--sm { width: 40px; height: 24px; }
.aa-switch--sm::after { width: 18px; height: 18px; }
.aa-switch--sm[data-on="true"]::after { transform: translateX(16px); }

/* scope rows */
.aa-scopes {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.aa-scope {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 10px;
  border-radius: 12px;
  opacity: 0.5;
  transition: background 0.25s ease, opacity 0.25s ease;
}
.aa-scope.is-on { opacity: 1; background: var(--row); }
.aa-scope-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--dim);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.aa-scope.is-on .aa-scope-ic {
  color: var(--accent, var(--sky));
  border-color: color-mix(in srgb, var(--accent, var(--sky)) 42%, transparent);
}
.aa-scope-ic svg { width: 16px; height: 16px; }
.aa-scope-n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }

/* the fake cursor, floating over the whole stage */
.aa-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 26px;
  height: 26px;
  pointer-events: none;
  transform: translate(-40px, -40px);
  transition: transform 0.72s cubic-bezier(0.55, 0.06, 0.28, 1);
  filter: drop-shadow(0 4px 6px rgba(8, 12, 24, 0.6));
  will-change: transform;
}
.aa-cursor svg { display: block; width: 100%; height: 100%; }
.aa-cursor::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 121, 239, 0.6), transparent 70%);
  transform: scale(0);
  opacity: 0;
}
.aa-cursor.is-press { transform: translate(var(--px, 0), var(--py, 0)) scale(0.82); transition-duration: 0.12s; }
.aa-cursor.is-press::after { animation: aa-ripple 0.5s ease-out; }
@keyframes aa-ripple {
  0% { transform: scale(0); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* footer credit + caption */
.aa-credit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--dim);
}
.aa-credit svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--acc-sky); }
.aa-credit a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-hi); }
.aa-credit a:hover { border-bottom-color: var(--acc-sky); }

.aa-cap {
  max-width: 1180px;
  margin: clamp(20px, 2.6vw, 30px) auto 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--soft);
}

/* --------------------------------------------------------------- responsive */
/* On narrow screens the card cannot hang off the edge without spilling, so it
   sits fully on the phone, centered, with the alerts below it. Still one
   integrated device. */
@media (max-width: 900px) {
  .aa-layout { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); }
  .aa-stage { order: -1; margin-left: 0; }
  .aa-points { max-width: 520px; margin: 0 auto; }
  /* Keep the half-off effect on phones: shrink the DEVICE so the card can
     straddle its left edge inside the viewport. The stage margin reserves
     the overhang, so the whole composition stays centered and nothing
     causes horizontal scroll. */
  .aa-stage { margin-left: min(84px, 20vw); }
  .aa-phone { width: min(252px, 64vw); }
  /* smaller device: shrink the notch WITH it and keep the clock below the
     notch, or the date renders behind the pill */
  .aa-notch { width: 76px; height: 22px; top: 10px; }
  .aa-lockbar { top: 42px; }
  .aa-lockbar .t { font-size: 32px; }
  .aa-control {
    width: min(262px, 66vw);
    left: calc(-1 * min(84px, 20vw));
    /* below center: the landing zone under the clock must stay visible,
       and the ride passes behind the card on its way up */
    top: calc(50% - 40px);
  }
  .aa-stack { --aa-land: 112px; }
  /* iOS-style truncation keeps a full alert inside the smaller band: the
     title and icon must never clip, the body may */
  .aa-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  /* very narrow: compact the control card (no master description) */
  .aa-control-label > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aa-cursor { display: none; }
  .aa-note { transition: none; transform: none; }
  .aa-scope, .aa-switch, .aa-switch::after { transition: none; }
}