/* app-cards.css -- ProfilePro card system (Indeed-style).
   A soft grey canvas behind the app, with content sitting on white,
   rounded, hairline-bordered cards (no drop shadows).

   Loaded right after app-shell.css on every signed-in page. Tokens first so
   any page / app (Tova, Storefront, Room, Workspace) can reuse them:
     --canvas      page background behind cards
     --card        card surface
     --card-line   card hairline
     --card-r      card radius
   Helpers:
     .ui-card            a standalone card
     .ui-card-pad        + standard padding
     .app-main-card      turns a page's <main> into ONE card (single-flow pages)
     .ui-cards           <main> that holds several .ui-card children (stack + gap)
*/
:root{
  --canvas:#F3F2F1;
  --card:#FFFFFF;
  --card-line:#E4E2E0;
  --card-r:16px;
  --card-pad:24px;
  --card-gap:16px;
  --feed-gap:3px;   /* space between post cards in the feed -- matches the LinkedIn sample */
}

/* ---- canvas ---- */
body.app-body:not(.room-native-shell):not([data-workspace-board]),
body[data-app-hybrid].pp-authed{background:var(--canvas);}

/* header + sidebar stay white, separated from the canvas by a hairline */
body.app-body .app-nav,
body[data-app-hybrid].pp-authed .app-nav{
  background:#fff;border-bottom:1px solid var(--card-line);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body[data-app-page="home"] .app-nav{border-bottom-color:var(--card-line);}
.app-sidebar{border-right-color:var(--card-line);}

/* ---- the card ---- */
.ui-card{
  background:var(--card);border:1px solid var(--card-line);
  border-radius:var(--card-r);box-shadow:none;min-width:0;
}
.ui-card-pad{padding:var(--card-pad);}
.ui-cards{display:flex;flex-direction:column;gap:var(--card-gap);}

/* ---- a whole page as one card ---- */
body.app-body .app-main.app-main-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--card-r);
  margin:20px auto 32px;padding:24px 28px 32px;
  width:calc(100% - 48px);box-sizing:border-box;
}
/* the page's own big title sits fine inside the card */
.app-main-card .app-welcome{margin-top:0;}

@media (max-width:720px){
  body.app-body .app-main.app-main-card{
    width:calc(100% - 20px);margin:10px auto calc(88px + env(safe-area-inset-bottom));
    padding:18px 16px 24px;border-radius:14px;
  }
}

/* ---- existing card-ish blocks, normalised to the same look ---- */
.settings-nav-group,.settings-item,.settings-legal-list{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--card-r);box-shadow:none;
}
.settings-legal-list{overflow:hidden;}
body[data-app-page="settings"] .app-main{padding-top:24px;}
/* the simple-header strip (mobile) / page head gets the same hairline */
.app-page-head{border-bottom:1px solid var(--card-line);}

/* ================= Dashboard ================= */
body[data-app-page="dashboard"] .hm-layout{gap:var(--card-gap);}
body[data-app-page="dashboard"] .dash-columns{gap:var(--card-gap);}
body[data-app-page="dashboard"] .dash-col{gap:var(--card-gap);}
body[data-app-page="dashboard"] .hm-layout > section,
body[data-app-page="dashboard"] .dash-col > section{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--card-r);
  padding:20px 22px;min-width:0;
}
body[data-app-page="dashboard"] .dash-progress{padding:16px 22px;}
body[data-app-page="dashboard"] .hm2-section-head{margin-top:0;}
@media (max-width:720px){
  body[data-app-page="dashboard"] .hm-layout > section,
  body[data-app-page="dashboard"] .dash-col > section{padding:16px;border-radius:14px;}
}

/* ================= People ================= */
body[data-app-page="people"] .app-main{display:flex;flex-direction:column;gap:var(--card-gap);padding-top:20px;}
body[data-app-page="people"] .app-main > *{margin-top:0;margin-bottom:0;}
.ppl-headcard{padding:22px 24px 0;}
.ppl-headcard .ppl-head{margin-bottom:14px;}
.ppl-headcard .ppl-tabs{margin-bottom:0;border-bottom-width:0;}
.ppl-resultscard{padding:18px 20px 20px;}
.ppl-resultscard .ppl-filters{margin-bottom:16px;}
#pplDiscoverView{display:flex;flex-direction:column;gap:var(--card-gap);}
#pplDiscoverView > .ppl-top{background:var(--card);border:1px solid var(--card-line);border-radius:var(--card-r);padding:18px 20px;box-shadow:none;}
@media (max-width:720px){
  .ppl-headcard{padding:16px 16px 0;border-radius:14px;}
  .ppl-resultscard{padding:14px;border-radius:14px;}
}

/* ================= Messages: two cards side by side (list + conversation) ================= */
@media (min-width:841px){
  body[data-app-page="messages"] .msg-shell{background:transparent;border:none;border-radius:0;overflow:visible;gap:var(--card-gap);}
  body[data-app-page="messages"] .msg-list-pane,
  body[data-app-page="messages"] .msg-thread-pane,
  body[data-app-page="messages"] .msg-thread{
    background:var(--card);border:1px solid var(--card-line);border-radius:var(--card-r);overflow:hidden;
  }
  body[data-app-page="messages"] .msg-list-pane{border-right:1px solid var(--card-line);}
  body.app-body[data-app-page="messages"] .app-main.app-main-msg{padding-top:20px;padding-bottom:20px;height:var(--pp-msg-height, 100dvh);box-sizing:border-box;}
}

/* ================= Profile + company pages, Business hub: same stroke/radius ================= */
body{--bh-stroke:var(--card-line);}
body .mp-card, body .pp-card, body .pp-hero-card, body .pp-rail-card,
body #mpPostsList, body #ppPostsList,
body .bh-card, body .bh-panel, body .bh-stat-card, body .bh-welcome{
  border-color:var(--card-line);box-shadow:none;
}
body .mp-card, body .pp-card, body .pp-hero-card, body .pp-rail-card,
body #mpPostsList, body #ppPostsList,
body .bh-card, body .bh-panel, body .bh-stat-card{border-radius:var(--card-r);}
body .pp-hero, body .pp-tabs, body .pp-tab-panel.active{border-color:var(--card-line);}
body .pp-hero{border-radius:var(--card-r) var(--card-r) 0 0;}
body .pp-tabs{border-radius:0 0 var(--card-r) var(--card-r);}
body .pp-tab-panel.active{border-radius:var(--card-r);}

/* ================= Home feed (stage 2): tab strip + each post as a card ================= */
body[data-app-page="home"] .comm-sticky-top{background:var(--canvas);}
body[data-app-page="home"] .comm-sticky-top-inner{background:var(--card);border-bottom:1px solid var(--card-line);}
body[data-app-page="home"] .comm-tab-panel .comm-post{
  background:var(--card);border:none;border-radius:var(--card-r);
  padding:18px 20px 16px;margin:0 0 var(--feed-gap);box-shadow:none;min-width:0;
}
body[data-app-page="home"] .comm-tab-panel .comm-post:first-child{padding-top:18px;}
body[data-app-page="home"] .comm-tab-panel .comm-post:last-child{border-bottom:none;}
body.app-body[data-app-page="home"] .app-main{padding-top:var(--card-gap);}
@media (min-width:721px){
  /* web: the strip is its own rounded card, sitting on the grey */
  body[data-app-page="home"] .comm-sticky-top{padding-top:16px;}
  /* Posts scroll up underneath this sticky strip. With no canvas below the
     rounded card, the post's straight top edge showed through the two
     rounded bottom corners. A canvas-coloured gap under the card (the same
     --card-gap the first post used to sit at, taken off .app-main) hides
     the post before it reaches the card's curve. */
  body[data-app-page="home"] .comm-sticky-top{padding-bottom:var(--feed-gap);}
  body.app-body[data-app-page="home"] .app-main{padding-top:0;}
  body[data-app-page="home"] .comm-sticky-top{--comm-edge:20px;}
  body[data-app-page="home"] .comm-sticky-top-inner{border:1px solid var(--card-line);border-radius:var(--card-r);overflow:hidden;width:calc(100% - 48px);padding:0;box-sizing:border-box;}
}
@media (max-width:720px){
  /* phone: cards run edge to edge with a grey gap between, so photo bleed (measured to the screen edge) still lines up */
  body.app-body[data-app-page="home"] .app-main{padding-inline:0;}
  body[data-app-page="home"] .comm-tab-panel .comm-post{border-radius:0;border-left:0;border-right:0;padding:16px 16px 14px;margin-bottom:var(--feed-gap);border:none;}
  body[data-app-page="home"] .comm-tab-panel .comm-post:first-child{padding-top:16px;}
  body.app-body[data-app-page="home"] .app-main{padding-top:var(--feed-gap);}
}
/* right rail cards match the same hairline + radius */
.home-rail .hr-card{border-color:var(--card-line);border-radius:var(--card-r);box-shadow:none;}

/* ================= Jobs (stage 2): job cards share the same hairline + radius ================= */
body[data-app-page="jobs"] .job-card{border-color:var(--card-line);border-radius:var(--card-r);}

/* ================= Job detail (stage 2): header, each section and the side panel are cards ================= */
body[data-app-page="job"] .jd-main{display:flex;flex-direction:column;gap:4px;}  /* close to the feed's 3px post gap */
body[data-app-page="job"] .jd-top,
body[data-app-page="job"] .jd-sec{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--card-r);
  padding:20px 22px;margin:0;box-shadow:none;min-width:0;
}
body[data-app-page="job"] .jd-top{padding-top:20px;}
body[data-app-page="job"] .jd-sec[hidden]{display:none;}
body[data-app-page="job"] .jd-side{border-color:var(--card-line);border-radius:var(--card-r);}
body[data-app-page="job"] .jd-grid{gap:4px 24px;}
body[data-app-page="job"] .jd-page{padding-top:8px;}
@media (min-width:841px){
  body[data-app-page="job"] .jd-top{padding-top:20px;}
}
@media (max-width:720px){
  /* phone: edge-to-edge white blocks with a grey gap between */
  body[data-app-page="job"] .jd-wrap{padding:0;}
  body[data-app-page="job"] .jd-main{gap:4px;}
  body[data-app-page="job"] .jd-top,
  body[data-app-page="job"] .jd-sec{border-radius:0;border-left:0;border-right:0;padding:16px 20px;}
  body[data-app-page="job"] .jd-page{padding-top:4px;}
}

/* ======================================================================
   MOBILE FULL-BLEED CARDS (<=720px) -- every page-level card runs edge to
   edge, like the profile cards: no side borders, no rounded corners,
   a small grey gap between cards. .app-main has 16px of side padding on
   phones, so each card pulls out by exactly -16px on both sides.
   Only top-level page cards are listed -- cards nested inside another
   card (stats, rows, sheets, menus, inputs) keep their own look.
   ====================================================================== */
@media (max-width:720px){
  /* whole page as ONE card (earnings, billing, contracts, interviews, reports, analytics, manage-*, help...) */
  body.app-body .app-main.app-main-card{
    width:100%;max-width:none;margin:10px 0 calc(88px + env(safe-area-inset-bottom));
    border-left:0;border-right:0;border-radius:0;box-sizing:border-box;
  }

  /* pages whose cards sit directly in .app-main (16px side padding) */
  body.app-body[data-app-page="dashboard"] .hm-layout > section,
  body.app-body[data-app-page="dashboard"] .dash-col > section,
  body.app-body .ppl-headcard,
  body.app-body .ppl-resultscard,
  body.app-body #pplDiscoverView > .ppl-top,
  body.app-body .settings-nav-group,
  body.app-body .settings-item,
  body.app-body .settings-legal-list,
  body.app-body .pj-card,
  body.app-body[data-app-page^="business"] .bh-content > .bh-panel,
  body.app-body[data-app-page^="business"] .bh-content > .bh-card,
  body.app-body[data-app-page^="business"] .bh-content > .bh-welcome,
  body.app-body .bae-list-card,
  body.app-body .bs-card,
  body.app-body .in-section,
  body.app-body .in-hero,
  body.app-body .ep-panel,
  body.app-body .ui-card{
    margin-left:-16px;margin-right:-16px;
    border-left:0;border-right:0;border-radius:0;
    width:auto;max-width:none;box-sizing:border-box;
  }
  /* keep the grey gap between stacked cards that used to rely on the radius/borders */
  body.app-body[data-app-page="dashboard"] .hm-layout,
  body.app-body[data-app-page="dashboard"] .dash-col,
  body.app-body #pplDiscoverView,
  body.app-body .bh-content{gap:8px;}
  body.app-body .pj-card{margin-bottom:8px;}
  /* a card that is already inside another card must not pull out twice */
  body.app-body .app-main-card .ui-card,
  body.app-body .app-main-card .in-section,
  body.app-body .app-main-card .in-hero,
  body.app-body .app-main-card .bs-card,
  body.app-body .app-main-card .settings-item{
    margin-left:0;margin-right:0;
  }

}

/* Home: the header and the tab strip carry no divider line (phone); the feed cards have no outline */
body[data-app-page="home"] .app-nav{border-bottom-color:transparent;}
@media (max-width:720px){
  body[data-app-page="home"] .comm-sticky-top-inner{border-bottom:none;}
  body[data-app-page="home"] .comm-tabs-row{border-bottom:none;}
}

/* ================= People on a phone: sections sit as close as feed posts ================= */
/* The grey between the page sections (header card, Top Matches, Suggested / Saved / My People ...) is the same
   --feed-gap the feed leaves between posts. It used to be 20px above, 16px under the tabs and 36px under Top Matches. */
@media (max-width:720px){
  body.app-body[data-app-page="people"] .app-main{gap:var(--feed-gap);padding-top:var(--feed-gap);}
  body.app-body[data-app-page="people"] #pplDiscoverView{gap:var(--feed-gap);}
  body.app-body[data-app-page="people"] #pplDiscoverView > .ppl-top{margin-bottom:0;}
}