/*
 * App skins for phone mock-ups: real design languages instead of generic
 * "rows of cards". Apply on the screen: <div class="scr skin-noir"> or
 * <div class="scr skin-editorial">. Components below are skin-aware.
 *
 *  skin-noir       CRED-inspired: black canvas, lowercase serif titles, tiny
 *                  tracked caps labels, square buttons, ONE bold colour block.
 *  skin-editorial  Flighty / Gentler Streak-inspired: white editorial page,
 *                  giant numerals, coloured status lines, journey timelines,
 *                  square yellow tags, segmented status bars, capsule tab bar.
 */

/* ---------- shared atoms ---------- */
.ap-cap { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ap-num { font-weight: 800; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.ap-num small { font-size: .36em; font-weight: 700; letter-spacing: -.01em; margin-left: 3px; }
.ap-row { display: flex; align-items: center; gap: 8px; }
.ap-sp { flex: 1; }
.ap-strike { text-decoration: line-through; opacity: .55; }
.ap-hr { height: 1px; margin: 2px 0; }

/* ---------- NOIR (CRED-like) ---------- */
.scr.skin-noir { background: #0b0b0c; color: #f5f5f4; font-family: "Inter", -apple-system, system-ui, sans-serif; }
.skin-noir .sbar { color: #f5f5f4; }
.skin-noir .home-ind { background: rgba(255, 255, 255, .55); }
.skin-noir .view { background: #0b0b0c; padding: 50px 16px 20px; gap: 12px; }
.skin-noir .ap-title { font-family: "Instrument Serif", Georgia, serif; font-size: 27px; line-height: 1.02; letter-spacing: -.01em; text-transform: lowercase; font-weight: 400; }
.skin-noir .ap-title i { font-style: italic; color: #fbbf24; }
.skin-noir .ap-cap { color: #8a8a8e; }
.skin-noir .ap-hr { background: rgba(255, 255, 255, .09); }
.skin-noir .ap-muted { color: #8a8a8e; font-size: 11px; }
/* the one colour block: a card with a split, like CRED's bill card */
.nb-card { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; min-height: 118px; overflow: hidden; border-radius: 3px; }
.nb-card .l { padding: 11px 12px; color: #fff; background: radial-gradient(120% 90% at 0% 0%, #f472b6, transparent 60%), linear-gradient(135deg, #be185d, #7e1d4f); position: relative; }
.nb-card .l::after { content: ""; position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.nb-card .r { background: #f5f5f4; color: #0b0b0c; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.nb-card.alt .l { background: radial-gradient(120% 90% at 0% 0%, #fdba74, transparent 60%), linear-gradient(135deg, #ea580c, #9a3412); }
.nb-card.cool .l { background: radial-gradient(120% 90% at 0% 0%, #93c5fd, transparent 60%), linear-gradient(135deg, #2563eb, #312e81); }
.nb-tag { align-self: flex-start; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0b0b0c; background: #fb923c; padding: 3px 6px; }
.nb-btn { display: block; text-align: center; font-size: 11.5px; font-weight: 700; padding: 10px 12px; letter-spacing: .01em; color: #0b0b0c; background: #fff; border-radius: 0; box-shadow: 3px 3px 0 #fb923c; }
.nb-btn.ghost { background: transparent; color: #f5f5f4; border: 1px solid rgba(255, 255, 255, .6); box-shadow: none; }
.nb-btn.dark { background: #0b0b0c; color: #fff; box-shadow: 3px 3px 0 #fb923c; }
.nb-tile { border: 1px solid rgba(255, 255, 255, .12); background: #141416; padding: 10px 11px; }
.nb-tile b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.nb-list { display: grid; gap: 0; }
.nb-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 12px; }
.nb-item .t { flex: 1; min-width: 0; } .nb-item .t span { display: block; color: #8a8a8e; font-size: 10.5px; margin-top: 1px; }
.nb-check { width: 20px; height: 20px; border: 1.5px solid rgba(255, 255, 255, .45); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.nb-check.on { background: #fb923c; border-color: #fb923c; color: #0b0b0c; }
.nb-well { width: 46px; height: 46px; border-radius: 50%; background: #18181b; border: 1px solid rgba(255, 255, 255, .08); display: grid; place-items: center; font-size: 18px; color: #e7e5e4; position: relative; }
.nb-well.on { border-color: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); color: #34d399; }
.nb-wells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; text-align: center; font-size: 10px; color: #a8a29e; }
.nb-wells > div { display: grid; justify-items: center; gap: 6px; }
.nb-orb { position: absolute; left: 50%; bottom: 16px; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%; z-index: 9;
  background: radial-gradient(circle at 35% 30%, #fde68a, #b45309 55%, #292524 75%); box-shadow: 0 0 0 5px #0b0b0c, 0 0 0 6px rgba(255, 255, 255, .35), 0 8px 30px rgba(251, 191, 36, .45); }
.skin-noir .toast { background: #f5f5f4; color: #0b0b0c; border-radius: 2px; box-shadow: 4px 4px 0 #fb923c; }
.skin-noir .toast .tk { background: #0b0b0c; color: #fb923c; }
.skin-noir .sheet { background: #141416; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px 18px 0 0; left: 0; right: 0; bottom: 0; color: #f5f5f4; backdrop-filter: none; box-shadow: 0 -20px 40px rgba(0, 0, 0, .6); }
.skin-noir .sheet::before { background: rgba(255, 255, 255, .25); }
.skin-noir .scrim { background: rgba(0, 0, 0, .55); }

/* ---------- EDITORIAL (Flighty / Gentler Streak-like) ---------- */
.scr.skin-editorial { background: #fbfaf8; color: #111; font-family: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif; }
.skin-editorial .view { background: #fbfaf8; padding: 50px 16px 20px; gap: 11px; }
.skin-editorial .ap-kick { font-size: 11px; color: #8e8e93; font-weight: 500; }
.skin-editorial .ap-h { font-size: 25px; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.skin-editorial .ap-h span { color: #b8b8bd; }
.skin-editorial .ap-cap { color: #8e8e93; }
.skin-editorial .ap-hr { background: #ececef; }
.ed-good { color: #16a34a; } .ed-late { color: #dc2626; } .ed-warn { color: #d97706; }
.ed-status { font-size: 12.5px; font-weight: 600; padding: 9px 11px; border-radius: 12px; background: #eefbf1; color: #15803d; }
.ed-status.warn { background: #fff4e5; color: #b45309; } .ed-status.bad { background: #fdecec; color: #b91c1c; }
.ed-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 3px 6px; border-radius: 5px; background: #facc15; color: #111; font-variant-numeric: tabular-nums; }
.ed-tag.green { background: #4ade80; } .ed-tag.dark { background: #111; color: #facc15; }
/* vertical journey (Flighty) */
.ed-jr { position: relative; display: grid; gap: 12px; padding-left: 22px; }
.ed-jr::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: repeating-linear-gradient(#d4d4d8 0 4px, transparent 4px 7px); }
.ed-jr .fill { position: absolute; left: 6px; top: 6px; width: 2px; height: 0; background: #16a34a; }
.ed-st { position: relative; }
.ed-st::before { content: ""; position: absolute; left: -21px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #d4d4d8; }
.ed-st.done::before { background: #16a34a; border-color: #16a34a; }
.ed-st.now::before { background: #fff; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
.ed-st .k { font-size: 10.5px; color: #8e8e93; font-weight: 600; }
.ed-st .v { font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ed-st .s { font-size: 10.5px; color: #8e8e93; }
.ed-plane { position: absolute; left: -2px; width: 18px; height: 18px; border-radius: 50%; background: #2563eb; color: #fff; display: grid; place-items: center; font-size: 10px; z-index: 2; box-shadow: 0 3px 10px rgba(37, 99, 235, .5); }
/* segmented bar (Gentler Streak) */
.ed-seg { display: flex; gap: 3px; height: 14px; align-items: stretch; }
.ed-seg i { display: block; border-radius: 99px; background: #e5e5ea; }
.ed-seg i.g { background: linear-gradient(90deg, #22c55e, #16a34a); } .ed-seg i.o { background: linear-gradient(90deg, #fb923c, #f97316); } .ed-seg i.r { background: #ef4444; }
/* full-bleed colour block with illustration */
.ed-block { margin: 0 -16px; padding: 14px 16px; color: #111; position: relative; overflow: hidden; }
.ed-block.pink { background: #ff8fa3; } .ed-block.sun { background: #ffd166; } .ed-block.mint { background: #9be7c4; } .ed-block.sky { background: #a5d8ff; }
.ed-block .ap-cap { color: rgba(0, 0, 0, .55); }
/* sparkline / area chart */
.ed-spark { width: 100%; height: 54px; display: block; }
/* floating capsule tab bar */
.ed-tabbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 99px; z-index: 9;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8); border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .25); }
.ed-tabbar span { font-size: 9.5px; font-weight: 600; color: #6b7280; padding: 6px 11px; border-radius: 99px; display: grid; justify-items: center; gap: 2px; }
.ed-tabbar span.on { background: #fff4ea; color: #ea580c; }
.ed-btn { display: block; text-align: center; font-size: 13px; font-weight: 700; padding: 12px; border-radius: 99px; background: #111; color: #fff; }
.ed-btn.orange { background: linear-gradient(180deg, #fb923c, #f97316); box-shadow: 0 10px 20px -10px rgba(249, 115, 22, .8); }
.ed-btn.green { background: #16a34a; }
.skin-editorial .toast { background: #111; border-radius: 16px; }
.skin-editorial .sheet { background: #fff; border-radius: 26px 26px 0 0; left: 0; right: 0; bottom: 0; backdrop-filter: none; border: 0; box-shadow: 0 -20px 40px rgba(0, 0, 0, .18); }