/* OsteoMove UI v2 · Bevel-language design tokens + shared components
   Reference: Bevel app (5 screenshots analysed 13 Aug 2026).
   Shared by all four mockups via <link>; each mockup stays openable from file://. */

:root{
  /* ground */
  --bg:#F3F4F7;            /* cool near-white */
  --card:#FFFFFF;
  --tile:#F6F7F9;          /* nested inner tile */
  --line:#ECEDF1;

  /* ink */
  --ink:#111216;
  --sub:#8A8F98;
  --sub-2:#B6BAC2;

  /* accents (candy-on-white, semantic) */
  --blue:#5B8DEF;  --blue-deep:#3D6FE0;  --blue-tint:#EAF0FE;   /* programme 1 code / primary */
  --green:#7BC94C; --green-deep:#5FAE33; --green-tint:#EFF7E7;  /* done / good */
  --orange:#FF8A3D;--orange-deep:#F07318;--orange-tint:#FFF1E7; /* active days / pain high */
  --yellow:#F5C242;--yellow-tint:#FBF3DC;
  --red:#E85D4A;   --red-tint:#FAE9E6;

  --dark:#17181A;          /* pill CTA */
  --r-card:20px; --r-tile:14px; --r-pill:100px;

  --shadow-card:0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.06);
  --shadow-soft:0 1px 2px rgba(16,24,40,.05);
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{
  font-family:"Sofia Sans",sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* top gradient wash, per-programme colour */
.wash{position:absolute;inset:0 0 auto 0;height:340px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, var(--wash-c, #E7EDFC) 0%, rgba(243,244,247,0) 100%)}
.stage{position:relative;z-index:1}

.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
.col-app{max-width:1072px;margin:0 auto;padding:0 24px}

/* cards */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:22px}
.tile{background:var(--tile);border-radius:var(--r-tile);padding:14px 16px}

/* type helpers */
.micro{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sub)}
.big-num{font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sec-title{font-size:1.06rem;font-weight:800;letter-spacing:-.01em;margin:26px 0 12px}

/* pills + buttons */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--card);border-radius:var(--r-pill);
  padding:9px 16px;font-size:.9rem;font-weight:600;box-shadow:var(--shadow-soft)}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;background:var(--dark);color:#fff;
  border:none;border-radius:var(--r-pill);padding:16px 28px;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;text-decoration:none}
.btn-light{display:inline-flex;align-items:center;justify-content:center;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:15px 26px;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;text-decoration:none}

/* icon chip (Bevel list-row leading chip) */
.chip-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}

/* status chip */
.chip{display:inline-block;font-size:.76rem;font-weight:700;padding:4px 12px;border-radius:var(--r-pill)}
.chip.blue{background:var(--blue-tint);color:var(--blue-deep)}
.chip.green{background:var(--green-tint);color:var(--green-deep)}
.chip.orange{background:var(--orange-tint);color:var(--orange-deep)}
.chip.gray{background:var(--tile);color:var(--sub)}

/* coaching strip */
.coach{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:18px 22px}
.coach .micro{margin-bottom:6px;display:block}
.coach p{font-size:.98rem;color:var(--ink)}

/* ── The navigation contract ───────────────────────────────────────────────
   ONE header. Its LEFT side is decided by the zone you are in, its RIGHT side
   by whether you are signed in. That is the whole rule.

     zone MARKETING (/, /programi, /polzi/*, /biblioteka, /za-nas, /faq)
       left  : Програми · Ползи ▾ · Библиотека · За Анна
       right : logged out -> [Вход] [Започни безплатно]
               logged in  -> [Към програмите ми] + avatar      <- the door back
     zone APP (/nachalo, /progres, /profil, /kupuvane, /programa owned)
       left  : Начало · Прогрес · Профил
       right : avatar
     zone LESSON (/den/[id])
       no nav at all

   A signed-in reader of a condition article keeps the marketing nav, because
   that is the page they are on, but never sees „Вход" and always has one
   click back into the platform. That single swap is what stops the two halves
   of the site feeling like two products.                                     */

/* marketing header */
.pubnav{position:relative;z-index:40}
.pubnav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.pubnav .links{display:flex;gap:2px;align-items:center}
.pubnav .links > a,.pubnav .drop > a{color:var(--sub);text-decoration:none;font-weight:600;font-size:.92rem;padding:9px 14px;border-radius:var(--r-pill);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pubnav .links > a:hover,.pubnav .drop:hover > a{color:var(--ink);background:rgba(255,255,255,.7)}
.pubnav .links > a.on{color:var(--ink);background:var(--card);box-shadow:var(--shadow-soft)}
.pubnav .cta{display:flex;align-items:center;gap:8px}
.pubnav .cta .ghost{color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;padding:10px 16px;border-radius:var(--r-pill)}
.pubnav .cta .solid{background:var(--dark);color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;padding:11px 20px;border-radius:var(--r-pill)}
.pubnav .cta .backto{display:inline-flex;align-items:center;gap:8px;background:var(--card);box-shadow:var(--shadow-soft);
  color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;padding:10px 16px;border-radius:var(--r-pill)}

/* Ползи dropdown: the condition pages, which is where search traffic lands */
.drop{position:relative}
.drop .panel{position:absolute;top:calc(100% + 6px);left:0;background:var(--card);border-radius:18px;
  box-shadow:0 2px 6px rgba(16,24,40,.06),0 18px 44px rgba(16,24,40,.14);padding:12px;
  display:none;grid-template-columns:1fr 1fr;gap:2px;width:520px}
.drop:hover .panel,.drop:focus-within .panel{display:grid}
.drop .panel a{display:block;padding:10px 12px;border-radius:11px;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:600}
.drop .panel a span{display:block;font-size:.78rem;color:var(--sub);font-weight:500;margin-top:1px}
.drop .panel a:hover{background:var(--tile)}
.drop .panel .all{grid-column:1 / -1;margin-top:6px;border-top:1px solid var(--line);padding-top:12px;color:var(--blue-deep)}

/* Three chrome modes, deliberately distinct, so the user always knows which
   surface they are on:
     PUBLIC  .pubnav  transparent over the wash, text links + dark CTA
     APP     .appbar  solid white bar + hairline, pill tabs + avatar
     LESSON  (02-den) dark, no global nav, exit + level progress only        */

/* app top bar (desktop) */
.appbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);max-width:none;padding:0}
.appbar > .appbar-in{max-width:1072px;margin:0 auto;padding:0 24px}
.appbar-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:1.12rem;letter-spacing:-.01em}
.logo span{color:var(--blue-deep)}

/* Anna's real wordmark (keyed to ink, from from-anna/osteomove.png).
   assets/ must travel with these files; they are linked, not embedded. */
.brand{display:block;height:44px;width:auto}
.brand-lg{height:68px}
.portrait-img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.appnav{display:flex;gap:8px}
.appnav a{color:var(--sub);text-decoration:none;font-weight:600;font-size:.92rem;padding:8px 16px;border-radius:var(--r-pill)}
.appnav a.on{color:var(--ink);background:var(--card);box-shadow:var(--shadow-soft)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--blue-tint);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}

/* bottom pill nav (mobile only) */
.bottomnav{display:none}
@media (max-width:700px){
  .appnav{display:none}
  .bottomnav{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:50;
    background:var(--card);border-radius:var(--r-pill);box-shadow:0 6px 24px rgba(16,24,40,.14);
    padding:8px 10px;gap:4px}
  .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;
    color:var(--sub);font-size:.68rem;font-weight:700;padding:6px 16px;border-radius:var(--r-pill)}
  .bottomnav a.on{color:var(--ink);background:var(--tile)}
  .bottomnav svg{display:block}
  body{padding-bottom:86px}
}