/* ============================================================================
   Feed, Skin B (linked from pages/feed.html only).

   The feed keeps its classic renderer and every interaction; this file only
   repaints what js/pages/feed.js emits (.fcard, .fch, .rrow, .mbody ...) in the
   layout-b language, and styles the new top block (#fb-top, #fb-filters,
   js/pages/feed-b.js). Everything is scoped to html[data-skin="b"].

   The polish layer (css/tokens.css) and a few render templates set card
   borders with !important or inline, so the overrides here need !important.
   ========================================================================= */

/* ----------------------------------------------------------- the top */
html[data-skin="b"] #feed-mode-tabs,
html[data-skin="b"] .ffilters,
html[data-skin="b"] #feed-composer.collapsed{display:none!important;}
@media(max-width:768px){html[data-skin="b"] .feed-layout{padding-left:12px;padding-right:12px;}}
html[data-skin="b"] .feed-centre{min-width:0;}

#fb-mode{margin-bottom:12px;}
.fb-compose{padding:18px!important;}
.fb-cmp-row{display:flex;align-items:center;gap:14px;cursor:text;margin-bottom:16px;border-radius:18px;}
.fb-cmp-row:focus-visible{outline:2px solid #111214;outline-offset:4px;}
.fb-cmp-row .b-av{width:46px;height:46px;flex-shrink:0;}
.fb-cmp-row h2{font-size:24px!important;margin:0 0 3px!important;}
.fb-cmp-row p{margin:0!important;font-size:13px!important;}
.fb-cmp-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.fb-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:66px;border:0;border-radius:18px;background:rgba(0,0,0,.1);color:inherit;font:700 12px var(--font-body);letter-spacing:.2px;cursor:pointer;padding:8px 4px;}
.fb-act:active{transform:scale(.97);}
.fb-act svg{width:21px;height:21px;}
#fb-filters{margin:4px 0 6px;}

/* Stories: no box of their own, they sit on the page like the chips do. */
html[data-skin="b"] .stories-bar{background:transparent!important;border:0!important;border-radius:0!important;margin-bottom:6px!important;}
html[data-skin="b"] .stories-track{padding:4px 2px 10px!important;}
/* Your story is always first, even when nobody else has one: it is the way
   into the story camera (the composer's avatar "+" is hidden in this skin).
   tokens.css hides an empty tray on phones; not here. */
html[data-skin="b"] .stories-bar.no-stories{display:block!important;}
html[data-skin="b"] .sar{position:relative;border:0;background:var(--c-surface-3);}
html[data-skin="b"] .sar-av{display:flex;width:100%;height:100%;border-radius:50%;overflow:hidden;align-items:center;justify-content:center;font:900 20px var(--font-display);color:var(--c-text-primary);}
html[data-skin="b"] .sar-plus{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--c-yellow);border:2px solid var(--sk-bg,var(--c-black));font-size:0;display:flex;align-items:center;justify-content:center;}
html[data-skin="b"] .sar-plus::before{content:"";width:10px;height:2px;background:#111;position:absolute;border-radius:1px;}
html[data-skin="b"] .sar-plus::after{content:"";width:2px;height:10px;background:#111;position:absolute;border-radius:1px;}

/* The expanded composer keeps its classic panels, on a layout-b card. */
html[data-skin="b"] #feed-composer:not(.collapsed){border-radius:28px!important;margin-bottom:14px;}

/* Live banners above the feed read as blocks, not tinted strips. */
html[data-skin="b"] #feed-training-banner,
html[data-skin="b"] #feed-live-games{border-radius:24px!important;}

/* ------------------------------------------------------------- cards */
html[data-skin="b"] .fcard{
  background:var(--c-surface-2)!important;border:1px solid var(--c-border)!important;
  border-radius:28px!important;box-shadow:none!important;margin-bottom:14px;
}
/* Live matches keep their red edge; every other type drops the coloured
   left border and shows its type as a colour block inside the card. */
html[data-skin="b"] .fcard:has(.livehdr){border-color:rgba(232,67,74,.45)!important;}
html[data-skin="b"] .fcard:hover{box-shadow:none;}

html[data-skin="b"] .fch{padding:18px 18px 12px;gap:12px;}
html[data-skin="b"] .fch .avatar{width:42px!important;height:42px!important;border-radius:50%!important;flex-shrink:0;}
html[data-skin="b"] .fcn{font-family:var(--font-body);font-size:14.5px;font-weight:700;letter-spacing:0;line-height:1.25;}
html[data-skin="b"] .fca{font-size:13.5px;font-weight:500;}
html[data-skin="b"] .fct{font-size:10.5px;margin-top:3px;}
html[data-skin="b"] .fcbadge{border:0!important;padding:5px 11px;font-size:10px;font-weight:700;letter-spacing:1.2px;}
html[data-skin="b"] .bwin{background:var(--sk-green-soft,#D8F7E6)!important;color:var(--sk-green-ink,#0A5233)!important;}
html[data-skin="b"] .bloss{background:var(--sk-red-soft,#FBDEDF)!important;color:var(--sk-red-ink,#7C1D21)!important;}
html[data-skin="b"] .bhere{background:var(--sk-blue-soft,#D6ECFF)!important;color:var(--sk-blue-ink,#0B3A5C)!important;}
html[data-skin="b"] .bachiev{background:var(--sk-yellow-fill,#FCD00F)!important;color:var(--sk-on-yellow,#111214)!important;}

html[data-skin="b"] .tbody{padding:0 18px 14px;font-size:14.5px;line-height:1.55;}
html[data-skin="b"] .pimg{margin:0 14px 14px;border-radius:20px;border:0;}
html[data-skin="b"] .pimg img{border-radius:20px!important;}

/* News-bot cards: already a themed block; tighten it to the card. */
html[data-skin="b"] .tbody > .nc{border-radius:22px!important;padding:24px 20px!important;}
html[data-skin="b"] .tbody:has(> .nc){padding:0 14px 14px;}

/* --------------------------------------------- type blocks inside a card */
html[data-skin="b"] .mbody,
html[data-skin="b"] .cibody,
html[data-skin="b"] .chbody,
html[data-skin="b"] .acbody,
html[data-skin="b"] .rubody{
  margin:0 14px 14px;border:0!important;border-radius:22px;padding:18px;
}
/* match: green for a win, red for a loss, like the score pills */
html[data-skin="b"] .mbody{background:var(--c-surface-3);}
html[data-skin="b"] .fcard:has(.bwin) .mbody{background:var(--sk-green-soft,#D8F7E6);color:var(--sk-green-ink,#0A5233);}
html[data-skin="b"] .fcard:has(.bloss) .mbody{background:var(--sk-red-soft,#FBDEDF);color:var(--sk-red-ink,#7C1D21);}
html[data-skin="b"] .fcard:has(.bwin) .mbody :is(.mname,.mscore,.msport,.mvenue),
html[data-skin="b"] .fcard:has(.bloss) .mbody :is(.mname,.mscore,.msport,.mvenue){color:inherit!important;}
html[data-skin="b"] .mbody :is(.msport,.mvenue){opacity:.7;}
html[data-skin="b"] .mscore{font-size:44px;}
html[data-skin="b"] .mfoot{padding:0 18px 12px;}
/* check-in: blue */
html[data-skin="b"] .cibody{background:var(--sk-blue-soft,#D6ECFF);color:var(--sk-blue-ink,#0B3A5C);}
html[data-skin="b"] .cibody :is(.ciname,.cimeta){color:inherit!important;}
html[data-skin="b"] .cibody .cimeta{opacity:.75;}
html[data-skin="b"] .ciopen{background:rgba(0,0,0,.1)!important;color:inherit!important;border:0!important;}
/* challenge: the yellow block, with the black pill as its action */
html[data-skin="b"] .chbody{background:var(--sk-yellow-fill,#FCD00F);color:var(--sk-on-yellow,#111214);}
html[data-skin="b"] .chbody :is(.chplayer,.chvslbl,.chdetails){color:inherit!important;}
html[data-skin="b"] .chbody .chdetails{opacity:.75;}
html[data-skin="b"] .chacc{background:#111214!important;color:#fff!important;border-radius:999px!important;min-height:46px;}
html[data-skin="b"] .chdec{background:transparent!important;color:inherit!important;border:1.5px solid currentColor!important;border-radius:999px!important;min-height:46px;}
/* achievement + rank-up: a plain recessed block, the badge carries the colour */
html[data-skin="b"] .acbody,html[data-skin="b"] .rubody{background:var(--c-surface-3);}

/* polls: b-bar style options */
html[data-skin="b"] .polbody{border-top:0;padding:4px 18px 16px;}
html[data-skin="b"] .polopt{border-radius:999px;border:1px solid var(--c-border);background:var(--c-surface-3);min-height:48px;padding:0 18px;}
html[data-skin="b"] .polopt.voted{border-color:var(--c-border);}
html[data-skin="b"] .polfill{background:var(--sk-yellow-fill,#FCD00F);opacity:.35;}
html[data-skin="b"] .polopt.voted .polpct{color:var(--c-text-primary);}

/* ------------------------------------------------ reactions + actions */
html[data-skin="b"] .rsummary{padding:0 18px 10px;}
html[data-skin="b"] .rchip{min-height:30px;padding:0 10px;}
html[data-skin="b"] .rrow{border-top:0;padding:4px 14px 16px;gap:6px;flex-wrap:nowrap;}
/* On a phone the words go and the icons stay, so the five actions fit on one line. */
@media (max-width:430px){
  html[data-skin="b"] .rrow .rlbl{display:none;}
  html[data-skin="b"] .rrow .rbtn{padding:0 11px;min-width:40px;}
}
html[data-skin="b"] .rrow .rbtn,
html[data-skin="b"] .rrow .post-menu-btn{
  min-height:40px;padding:0 12px;border-radius:999px;background:var(--c-surface-3);
  border:1px solid var(--c-border);color:var(--c-text-secondary);font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
html[data-skin="b"] .rrow .post-menu-btn{width:40px;padding:0;font-size:18px;}
html[data-skin="b"] .rrow .post-menu-wrap{margin-left:auto;}
html[data-skin="b"] .rrow .rbtn.reacted{background:var(--sk-yellow-fill,#FCD00F);border-color:transparent;color:var(--sk-on-yellow,#111214);}
html[data-skin="b"] .epanel,html[data-skin="b"] .post-menu{border-radius:20px;}
html[data-skin="b"] .cmt-preview{padding:0 18px 4px;}
html[data-skin="b"] .cmt-view-all{padding:2px 18px 16px;}

/* News bot cards carry their colours inline. The summary was a 45% tint of
   the ink on a pastel card, too faint to read; darken it and the two small
   lines under it. Positions follow api/news-bot.js buildNewsCard(). */
html[data-skin="b"] .nc > div:nth-child(2) > div:nth-child(3){color:rgba(20,16,8,.78)!important;}
html[data-skin="b"] .nc > div:nth-child(2) > div:nth-child(4) > span{color:rgba(20,16,8,.55)!important;}
html[data-skin="b"] .nc > div:nth-child(2) > div:nth-child(5){color:rgba(20,16,8,.6)!important;}

/* ======================================================= the composer, Skin B
   Classic markup and handlers (js/pages/feed.js) are untouched: every id,
   name and onclick is the classic one, restyled. js/pages/feed-b.js moves
   #media-prev beside the "+ Photo" tile, grows the text area, and locks the
   page while the sheet is open; feed.html adds the .b-only header. On a phone
   the open composer is a full-screen sheet; on desktop it stays an in-page
   card with the same inside. */

/* header: close, you, where it goes */
.fbc-head{display:flex;align-items:center;gap:12px;margin:0 0 16px;}
.fbc-head .b-av{width:42px;height:42px;}
.fbc-who{min-width:0;flex:1;}
.fbc-who b{display:block;font-size:15px;font-weight:700;color:var(--c-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fbc-who span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.6px;color:var(--c-text-muted);margin-top:2px;}
html[data-skin="b"] #feed-composer .ccollapse{display:none!important;}

/* type switch: chips */
html[data-skin="b"] #feed-composer .ctabs{background:none;padding:0 2px 4px;gap:8px;margin:0 -2px 14px;border-radius:0;}
html[data-skin="b"] #feed-composer .ctab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid var(--c-border);background:var(--c-surface-3);color:var(--c-text-secondary);border-radius:999px;font:600 13px var(--font-body);letter-spacing:0;text-transform:none;}
html[data-skin="b"] #feed-composer .ctab span{font-size:13px!important;letter-spacing:0!important;text-transform:none!important;}
html[data-skin="b"] #feed-composer .ctab.on{background:var(--sk-yellow-fill,var(--c-yellow));border-color:transparent;color:var(--sk-on-yellow,#111214);font-weight:700;}

/* post: a big borderless text area, the prompt as placeholder */
html[data-skin="b"] #cp-post .crow{display:block;margin:0 0 14px;}
html[data-skin="b"] #cp-post .crow > .avatar,
html[data-skin="b"] #cp-post .story-plus,
html[data-skin="b"] #cp-post .cquick{display:none!important;}
html[data-skin="b"] #post-txt{display:block;width:100%;min-height:140px!important;max-height:none!important;padding:4px 2px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:18px!important;line-height:1.5!important;color:var(--c-text-primary);resize:none;}
html[data-skin="b"] #post-txt::placeholder{color:var(--c-text-muted);}

/* attachments: square tiles, the dashed "+ Photo" after them */
html[data-skin="b"] #cp-post .cactions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
html[data-skin="b"] #cp-post .cactions > label.cabtn{width:88px;height:88px;flex-direction:column;justify-content:center;gap:4px;padding:0;border:2px dashed var(--c-border-strong,var(--c-border-md));background:transparent;border-radius:18px;color:var(--c-text-secondary);font:600 12px var(--font-body);}
html[data-skin="b"] #cp-post .cactions > label.cabtn > svg{display:none;}
html[data-skin="b"] #cp-post .cactions > label.cabtn::before{content:"+";font:700 26px/1 var(--font-body);color:var(--c-text-primary);}
html[data-skin="b"] #cp-post .cactions #media-prev{display:contents;}
html[data-skin="b"] #media-prev > div{display:block!important;width:88px;height:88px;margin:0!important;border-radius:18px;overflow:hidden;}
html[data-skin="b"] #media-prev img,html[data-skin="b"] #media-prev video{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover;border-radius:0!important;display:block;}
html[data-skin="b"] #media-prev button{width:26px!important;height:26px!important;top:6px!important;right:6px!important;font-size:13px!important;}
.fbc-break{flex-basis:100%;height:0;}
html[data-skin="b"] #cp-post .cactions > .cabtn:not(label){min-height:40px;padding:0 14px;border-radius:999px;font-size:13px;}

/* visibility: one pill with two halves */
html[data-skin="b"] #feed-composer .vis-toggle{flex:1 0 100%;display:flex;gap:4px;margin:6px 0 0;padding:4px;background:var(--c-surface-3);border-radius:999px;}
html[data-skin="b"] #feed-composer .vis-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;font:600 13px var(--font-body);letter-spacing:0;color:var(--c-text-secondary);background:transparent;}
html[data-skin="b"] #feed-composer .vis-opt.on{background:var(--sk-yellow-fill,var(--c-yellow));color:var(--sk-on-yellow,#111214);}

/* the one action: Post / Start training / Post poll / Share result */
html[data-skin="b"] #feed-composer .postbtn{display:flex;align-items:center;justify-content:center;flex:1 0 100%;width:100%;min-height:56px;margin:14px 0 0!important;padding:0 20px;border:0;border-radius:28px;background:var(--sk-yellow-fill,var(--c-yellow));color:var(--sk-on-yellow,#111214);font:900 16px var(--font-display);letter-spacing:1.4px;text-transform:uppercase;}
html[data-skin="b"] #feed-composer .postbtn:disabled{opacity:.45;cursor:default;}

/* training: activity tiles, pill inputs, a list of friends */
html[data-skin="b"] #feed-composer .tr-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
html[data-skin="b"] #feed-composer .tr-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:86px;padding:12px 6px;border-radius:18px;border:1px solid var(--c-border);background:var(--c-surface-2);}
html[data-skin="b"] #feed-composer .tr-opt-icon{font-size:26px;margin:0;}
html[data-skin="b"] #feed-composer .tr-opt-lbl{font:600 12px var(--font-body);letter-spacing:0;color:var(--c-text-secondary);}
html[data-skin="b"] #feed-composer .tr-opt.on{background:var(--sk-yellow-fill,var(--c-yellow));border-color:transparent;}
html[data-skin="b"] #feed-composer .tr-opt.on .tr-opt-lbl{color:var(--sk-on-yellow,#111214);font-weight:700;}
html[data-skin="b"] #tr-note,html[data-skin="b"] #tr-companion-input{height:48px;padding:0 18px!important;border-radius:999px!important;border:1px solid var(--c-border)!important;background:var(--c-surface-2)!important;font-size:16px!important;}
html[data-skin="b"] #tr-companion-chips > span{padding:5px 8px 5px 5px!important;background:var(--sk-yellow-fill,var(--c-yellow))!important;border-color:transparent!important;color:var(--sk-on-yellow,#111214)!important;font-size:13px!important;font-weight:600;}
html[data-skin="b"] #tr-companion-chips > span button{color:inherit!important;font-size:16px!important;}
html[data-skin="b"] #tr-friend-list{background:var(--c-surface-2)!important;border:1px solid var(--c-border)!important;border-radius:22px!important;padding:0!important;max-height:280px!important;}
html[data-skin="b"] #feed-composer .tr-friend-row{min-height:56px;padding:10px 16px;gap:12px;border-radius:0;border-bottom:1px solid var(--c-border);}
html[data-skin="b"] #feed-composer .tr-friend-row:last-child{border-bottom:0;}
html[data-skin="b"] #feed-composer .tr-friend-row .tr-fr-name{font-size:14.5px;font-weight:600;}
html[data-skin="b"] #feed-composer .tr-friend-row input[type="checkbox"]{order:3;width:22px;height:22px;}
html[data-skin="b"] #feed-composer .tr-friend-row img,html[data-skin="b"] #feed-composer .tr-friend-row .avatar{width:34px!important;height:34px!important;}

/* poll: rounded fields, the question bigger */
html[data-skin="b"] #feed-composer .pollin{height:52px;padding:0 18px;margin-bottom:10px;border-radius:18px!important;border:1px solid var(--c-border)!important;background:var(--c-surface-2)!important;font-size:16px;}
html[data-skin="b"] #pq{height:58px;font-size:18px;font-weight:600;}
html[data-skin="b"] #poll-dur{min-height:44px;padding:0 16px!important;border-radius:999px!important;font-size:14px!important;}

/* result: two big score fields either side of a dash */
html[data-skin="b"] #rs-my-score,html[data-skin="b"] #rs-opp-score{width:78px!important;height:78px;padding:0!important;border-radius:22px!important;border:1px solid var(--c-border)!important;background:var(--c-surface-2)!important;font-size:40px!important;-moz-appearance:textfield;appearance:textfield;}
html[data-skin="b"] #rs-my-score::-webkit-inner-spin-button,html[data-skin="b"] #rs-opp-score::-webkit-inner-spin-button,
html[data-skin="b"] #rs-my-score::-webkit-outer-spin-button,html[data-skin="b"] #rs-opp-score::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
html[data-skin="b"] #rs-my-score + span{font-size:0!important;}
html[data-skin="b"] #rs-my-score + span::after{content:"\2013";font:900 36px var(--font-display);color:var(--c-text-muted);}
html[data-skin="b"] #rs-opponent,html[data-skin="b"] #rs-sport,html[data-skin="b"] #rs-venue{min-height:52px;padding:0 18px!important;border-radius:18px!important;border:1px solid var(--c-border)!important;background:var(--c-surface-2)!important;font-size:16px!important;}

/* phone: the open composer is a full-screen sheet */
@media (max-width:900px){
  html[data-skin="b"] #feed-composer:not(.collapsed){
    position:fixed;inset:0;z-index:1150;margin:0!important;max-width:none;
    border:0;border-radius:0!important;background:var(--sk-bg,var(--c-black));
    padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 100px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    animation:fbc-in .22s ease-out;
  }
  /* the action rides at the bottom of the sheet, above the home bar */
  html[data-skin="b"] #feed-composer:not(.collapsed) .cpanel.on .postbtn{
    position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
    width:auto;z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.28);
  }
  html.fbc-open,html.fbc-open body{overflow:hidden;}
}
@keyframes fbc-in{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

/* Four types must all show: on a phone the row becomes four equal columns
   (as a scroller, "Result" sat half off screen once selected). */
@media (max-width:900px){
  html[data-skin="b"] #feed-composer .ctabs{display:grid!important;grid-template-columns:repeat(4,1fr);overflow:visible;-webkit-mask-image:none!important;mask-image:none!important;}
  html[data-skin="b"] #feed-composer .ctab{padding:0 6px;justify-content:center;gap:5px;font-size:12.5px;min-width:0;}
}
/* Score digits: the condensed display face draws 0 as a thin capsule. */
html[data-skin="b"] #rs-my-score,html[data-skin="b"] #rs-opp-score{font-family:var(--font-body)!important;font-weight:800!important;font-variant-numeric:tabular-nums;text-align:center;}

/* Poll options 4-6 (+ Add option, remove x) in the composer sheet. */
html[data-skin="b"] #feed-composer .poll-xrow .pollin{padding-right:52px;}
html[data-skin="b"] #feed-composer .poll-x{right:12px;top:26px;width:32px;height:32px;background:var(--c-surface-3);color:var(--c-text-secondary);}
html[data-skin="b"] #feed-composer .poll-add{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px dashed var(--c-border-md);font-size:13.5px;margin:0 0 12px;}
html[data-skin="b"] #feed-composer .poll-add:hover{border-color:var(--sk-yellow-fill,#FCD00F);}

/* Pages / Players to Follow: the Follow button as the Skin B pill. */
html[data-skin="b"] .sug-row{padding:10px 0;}
html[data-skin="b"] .sug-nm{font-size:13.5px;}
html[data-skin="b"] .sug-follow{min-height:36px;padding:0 16px;background:var(--sk-yellow-fill,#FCD00F);color:var(--sk-on-yellow,#111214);font-size:12px;}
html[data-skin="b"] .sug-follow.on{background:var(--sk-green-soft,#D8F7E6);color:var(--sk-green-ink,#0A5233);border:0;}