/* ============================================================
   SquireUp — Mobile screens · shared chrome
   Faithful to "Dashboard v5" grotesque + light palette.
   Canvas #ECE8DD · ink #1B1714 · accent rust #D8480F · Bricolage Grotesque
   ============================================================ */

:root{
  --cream:#ECE8DD;        /* app canvas / cards */
  --page:#E6E0D2;         /* phone app background (one step under cream) */
  --card:#EFEBE1;         /* elevated card on page */
  --inset:#E0D9C8;        /* inset tile inside a card */
  --inset-2:#E7E1D2;
  --line:#CFC8B7;         /* hairline */
  --line-soft:#DBD4C4;
  --line-strong:#BFB6A2;
  --ink:#1B1714;          /* primary text (warm near-black) */
  --mute:#4B453B;         /* secondary */
  --stone:#6E665A;        /* metadata / captions */
  --faint:#9C927E;        /* tertiary */
  --rust:#D8480F;         /* the single brand accent */
  --rust-bright:#E2511E;
  --rust-deep:#B23A0C;
  --rust-soft:rgba(216,72,15,.10);
  --rust-line:rgba(216,72,15,.28);
  --green:#2f7d4f;
  --green-soft:rgba(47,125,79,.12);
  --amber:#9a6a00;
  --amber-soft:rgba(154,106,0,.12);
  --dark:#16120D;         /* squire deck / dark surfaces */
  --dark-2:#211B14;
  --dark-line:rgba(255,255,255,.12);
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --tabh:84px;
}

*{box-sizing:border-box;}
html,body{margin:0;}

.stage{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:var(--cream);
  padding:0; overflow:hidden;
  font-family:'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---------------- iPhone device ---------------- */
/* Absolutely centred + scaled to fit its container by fit.js — always fully
   visible and centred in any embed, even when the frame is smaller. */
.device{
  position:absolute; top:50%; left:50%;
  width:393px; height:852px;
  transform-origin:center center;
  transform:translate(-50%,-50%);
  background:#0b0b0c;
  border-radius:56px;
  padding:11px;
  box-shadow:
    0 2px 2px rgba(0,0,0,.35) inset,
    0 0 0 2px #2a2a2d,
    0 36px 70px -28px rgba(40,30,18,.55),
    0 12px 28px -16px rgba(40,30,18,.4);
}
.screen{
  position:relative; width:100%; height:100%;
  background:var(--page);
  border-radius:46px;
  overflow:hidden;
  display:flex; flex-direction:column;
  color:var(--ink);
}
.screen.dark{ background:var(--dark); color:#fff; }

/* dynamic island */
.island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:122px; height:34px; border-radius:20px; background:#000; z-index:60;
}

/* status bar */
.statusbar{
  position:relative; z-index:55; flex:none;
  height:54px; padding:16px 30px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.sb-time{ font-weight:650; font-size:16px; letter-spacing:.2px; }
.sb-right{ display:flex; align-items:center; gap:7px; }
.sb-right svg{ display:block; }
.screen.dark .statusbar{ color:#fff; }

/* ---------------- app body ---------------- */
.app{
  flex:1; min-height:0; position:relative;
  overflow:hidden;            /* crops like a real screenshot */
  display:flex; flex-direction:column;
}
.app-scroll{ flex:1; min-height:0; overflow:hidden; padding-bottom:18px; }

/* large iOS-style header */
.lg-head{ padding:6px 60px 10px 22px; }
.eyebrow{
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--stone); margin-bottom:9px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--rust); flex:none; }
.lg-title{
  font-size:34px; line-height:1.02; font-weight:700; letter-spacing:-1.1px; color:var(--ink); margin:0;
}
.lg-title .i{ font-style:italic; }
.lead{ margin:9px 0 0; font-size:15px; line-height:1.45; color:var(--mute); max-width:330px; }

/* ---------------- common atoms ---------------- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px;
}
.inset{ background:var(--inset); border-radius:var(--r-sm); }
.hair{ height:1px; background:var(--line); border:0; margin:0; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--mute);
  background:var(--inset); border:1px solid var(--line);
  padding:6px 11px; border-radius:999px; white-space:nowrap;
}
.chip.rust{ color:var(--rust); background:var(--rust-soft); border-color:var(--rust-line); }
.chip.green{ color:var(--green); background:var(--green-soft); border-color:transparent; }
.chip.amber{ color:var(--amber); background:var(--amber-soft); border-color:transparent; }

.pri{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.pri.high{ color:var(--rust); }
.pri.medium{ color:var(--amber); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-size:13px; font-weight:650; letter-spacing:-.1px;
  border-radius:11px; padding:10px 15px; cursor:pointer; border:1px solid transparent;
}
.btn.solid{ background:var(--ink); color:#fff; }
.btn.rust{ background:var(--rust); color:#fff; }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn.sm{ padding:8px 13px; font-size:12px; border-radius:9px; }

.label-k{ font-size:12px; font-weight:600; color:var(--stone); }
.num-xl{ font-size:40px; font-weight:700; letter-spacing:-1.6px; line-height:1; color:var(--ink); }

/* section caption inside a screen */
.scap{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; color:var(--ink); letter-spacing:-.1px;
  padding:0 22px; margin:18px 0 11px;
}
.scap .ct{
  font-size:11px; font-weight:700; color:var(--rust);
  background:var(--rust-soft); border-radius:999px; padding:1px 8px; min-width:18px; text-align:center;
}
.scap .more{ margin-left:auto; font-size:12px; font-weight:600; color:var(--stone); }

/* ---------------- bottom tab bar ---------------- */
.tabbar{
  position:relative; z-index:40; flex:none;
  height:var(--tabh);
  background:rgba(239,235,225,.86);
  backdrop-filter:saturate(1.4) blur(18px); -webkit-backdrop-filter:saturate(1.4) blur(18px);
  border-top:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-around;
  padding:9px 8px 0;
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--faint); text-decoration:none; padding-top:2px;
}
.tab svg{ width:25px; height:25px; }
.tab span{ font-size:10px; font-weight:600; letter-spacing:-.1px; }
.tab.active{ color:var(--rust); }
.home-ind{
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
  width:136px; height:5px; border-radius:3px; background:var(--ink); opacity:.85;
}
/* dark variant */
.screen.dark .tabbar{
  background:rgba(20,17,12,.82); border-top:1px solid rgba(255,255,255,.10);
}
.screen.dark .tab{ color:rgba(255,255,255,.42); }
.screen.dark .tab.active{ color:var(--rust-bright); }
.screen.dark .home-ind{ background:#fff; opacity:.9; }

/* ---------------- Squire FAB ---------------- */
.fab{
  position:absolute; right:16px; bottom:calc(var(--tabh) + 14px); z-index:50;
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--rust);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -6px rgba(216,72,15,.5), 0 2px 6px rgba(0,0,0,.18);
}
.fab img{ width:30px; height:auto; display:block; }
.fab .ping{
  position:absolute; top:-2px; right:-2px; width:18px; height:18px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--page);
}

/* Squire entry orb — top-right of each light screen header */
.sq-orb{
  position:absolute; top:8px; right:16px; z-index:30;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--rust);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -5px rgba(216,72,15,.55), 0 1px 3px rgba(0,0,0,.12);
}
.sq-orb img{ width:23px; height:auto; display:block; }
.sq-orb .ping{
  position:absolute; top:-3px; right:-3px; width:17px; height:17px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--page);
}

/* seal mascot helper sizing */
.seal{ display:block; }