﻿

/* Tin 2B live note stability: keep latest note height fixed while live updates stream in. */


/* Tin 2B newsfeed scale polish: 125% baseline, social feed rhythm, no 390px overflow. */



/* Tin 2B mobile 125% baseline: keep composer actions within one 390px viewport. */




/* Tin 2B social hierarchy pass: keep secondary text quiet at 125% font scale. */



/* Tin 2B card header pass: Facebook-like compact header, single top-right action. */



/* Final placement guard: older mobile rules made titles span over the action column. */



/* Tin 2B social card polish: balanced dot action, centered avatars, quieter copy. */
@keyframes nfLiveMetaGlow{
  0%,100%{filter:saturate(1);opacity:.92;}
  50%{filter:saturate(1.35) brightness(1.08);opacity:1;}
}
@keyframes nfLiveMetaPulse{
  0%,100%{transform:scale(.9);box-shadow:0 0 0 0 rgba(16,185,129,.32);}
  50%{transform:scale(1.18);box-shadow:0 0 0 5px rgba(16,185,129,.12);}
}



/* Final quiet-pass for composer and BXH secondary copy. */



/* Tin 2B rank update content should read like a normal feed card. */



/* Keep live match metadata visibly live after the final typography overrides. */

/* Match cards: keep meta as one scan line; details live behind card click. */

/* Tin 2B dark final pass: keep feed cards readable after light-mode overrides. */

/* Final rank-update typography: normal prose, only subtle semantic marks. */

/* Account Tin2B parity */
#s-account,
#s-account .content{
  background:linear-gradient(180deg,#f7fbfd 0%,#edf7fa 52%,#f7fbfd 100%)!important;
  overflow-x:hidden!important;
}
#s-account .content{
  padding:6px 6px calc(86px + var(--sb))!important;
}
#s-account .account-screen{
  width:100%!important;
  min-height:100%!important;
  padding:0!important;
  gap:0!important;
  background:transparent!important;
}
#s-account .account-profile-summary{
  gap:7px!important;
}
#s-account .account-section-title,
.profile-modal .account-section-title{
  min-height:25px;
  padding:2px 2px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#66758a;
  font:700 calc(9.6px * var(--nf-font-scale,1))/1.1 "Roboto Condensed",Roboto,Arial,sans-serif;
  letter-spacing:.28px;
  text-transform:uppercase;
}
#s-account .account-section-title span,
.profile-modal .account-section-title span{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
#s-account .account-section-title i,
.profile-modal .account-section-title i{
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(8,182,213,.08);
  flex:0 0 auto;
}
#s-account .account-section-title.actions i,
.profile-modal .account-section-title.actions i{background:var(--green);}
#s-account .account-section-title.danger i,
.profile-modal .account-section-title.danger i{background:var(--red);}
#s-account .account-section-title em,
.profile-modal .account-section-title em{
  min-width:0;
  max-width:48%;
  color:#94a3b8;
  font-style:normal;
  font-size:calc(8.7px * var(--nf-font-scale,1));
  font-weight:560;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#s-account .profile-main-card,
.profile-modal .profile-main-card{
  border-radius:16px!important;
  border-color:#e1e9f2!important;
  box-shadow:0 8px 22px rgba(15,23,42,.055)!important;
}
#s-account .profile-main-card{
  padding:11px!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:10px!important;
}
#s-account .profile-avatar-lg{
  width:54px!important;
  height:54px!important;
  font-size:16px!important;
}
#s-account .profile-main h2,
.profile-modal .profile-main h2{
  font-size:calc(17px * var(--nf-font-scale,1))!important;
  line-height:1.12!important;
  letter-spacing:0!important;
}
#s-account .profile-main p,
.profile-modal .profile-main p{
  font-size:calc(10px * var(--nf-font-scale,1))!important;
  line-height:1.25!important;
  color:#7d8898!important;
}
#s-account .profile-kicker,
.profile-modal .profile-kicker{
  font-size:calc(8.5px * var(--nf-font-scale,1))!important;
  font-weight:700!important;
  letter-spacing:.28px!important;
}
#s-account .profile-chip-row{
  gap:4px!important;
  margin-top:7px!important;
}
#s-account .profile-chip-row span,
.profile-modal .profile-chip-row span{
  max-width:100%;
  min-height:21px!important;
  padding:2px 7px!important;
  font-size:calc(8.7px * var(--nf-font-scale,1))!important;
  font-weight:650!important;
  line-height:1.1!important;
}
#s-account .profile-actions,
.profile-modal .profile-actions{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
#s-account .profile-action-card,
.profile-modal .profile-action-card{
  min-height:54px!important;
  padding:8px!important;
  border-radius:15px!important;
  gap:8px!important;
}
#s-account .profile-action-card.guide,
.profile-modal .profile-action-card.guide{
  grid-column:1/-1;
}
#s-account .profile-action-card i,
.profile-modal .profile-action-card i,
#s-account .profile-logout-card i,
.profile-modal .profile-logout-card i{
  width:30px!important;
  height:30px!important;
  border-radius:11px!important;
}
#s-account .profile-action-card div,
.profile-modal .profile-action-card div,
#s-account .profile-logout-card div,
.profile-modal .profile-logout-card div{
  font-size:calc(11.2px * var(--nf-font-scale,1))!important;
  line-height:1.14!important;
}
#s-account .profile-action-card span,
.profile-modal .profile-action-card span,
#s-account .profile-logout-card span,
.profile-modal .profile-logout-card span{
  font-size:calc(9.3px * var(--nf-font-scale,1))!important;
  line-height:1.2!important;
  font-weight:500!important;
}
#s-account .profile-info-grid,
.profile-modal .profile-info-grid{
  margin-top:0!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
#s-account .profile-info-item,
.profile-modal .profile-info-item{
  padding:8px 9px!important;
  border-radius:14px!important;
  border-color:#e7edf4!important;
}
#s-account .profile-info-item span,
.profile-modal .profile-info-item span{
  font-size:calc(8.5px * var(--nf-font-scale,1))!important;
  line-height:1.1!important;
  letter-spacing:.18px!important;
}
#s-account .profile-info-item b,
.profile-modal .profile-info-item b{
  margin-top:4px!important;
  font-size:calc(10.8px * var(--nf-font-scale,1))!important;
  line-height:1.22!important;
  font-weight:650!important;
}
#s-account .profile-logout-card,
.profile-modal .profile-logout-card{
  min-height:48px!important;
  padding:9px 10px!important;
  border-radius:15px!important;
}
.profile-modal .profile-sheet{
  width:min(420px,calc(100vw - 8px))!important;
  max-width:calc(100vw - 8px)!important;
}
.profile-modal .profile-sheet.profile-sheet-wide{
  width:min(560px,calc(100vw - 8px))!important;
}
.profile-modal .profile-body{
  padding:9px!important;
}
.profile-modal .profile-form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.profile-modal .account-field.span-2{
  grid-column:span 2!important;
}
.profile-modal .account-field span{
  font-size:calc(8.6px * var(--nf-font-scale,1))!important;
  letter-spacing:.18px!important;
}
.profile-modal .account-field input,
.profile-modal .account-field select,
.profile-modal .account-field textarea{
  min-height:39px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  font-size:calc(11px * var(--nf-font-scale,1))!important;
  font-weight:620!important;
}
.profile-modal .account-field textarea{
  min-height:62px!important;
}
.profile-modal .profile-form-actions{
  position:sticky!important;
  bottom:0!important;
  margin:10px -9px -9px!important;
  padding:9px 9px calc(9px + var(--sb))!important;
  background:rgba(255,255,255,.96)!important;
}
.profile-modal .profile-form-actions .profile-action-btn{
  height:42px!important;
  border-radius:14px!important;
  font-size:calc(12px * var(--nf-font-scale,1))!important;
}
@media(max-width:374px){
  #s-account .content{padding-left:5px!important;padding-right:5px!important;}
  #s-account .profile-actions,
  .profile-modal .profile-actions,
  .profile-modal .profile-form-grid{
    grid-template-columns:1fr!important;
  }
  .profile-modal .account-field.span-2{
    grid-column:span 1!important;
  }
  #s-account .profile-info-grid,
  .profile-modal .profile-info-grid{
    grid-template-columns:1fr!important;
  }
}
html[data-theme="dark"] #s-account,
html[data-theme="dark"] #s-account .content{
  background:linear-gradient(180deg,#0f1723 0%,#101b28 52%,#0f1723 100%)!important;
}
html[data-theme="dark"] #s-account .profile-main-card,
html[data-theme="dark"] #s-account .profile-action-card,
html[data-theme="dark"] #s-account .profile-info-item,
html[data-theme="dark"] #s-account .profile-logout-card,
html[data-theme="dark"] .profile-modal .profile-main-card,
html[data-theme="dark"] .profile-modal .profile-action-card,
html[data-theme="dark"] .profile-modal .profile-info-item{
  background:#182536!important;
  border-color:#314256!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] #s-account .account-section-title,
html[data-theme="dark"] .profile-modal .account-section-title{
  color:#9fb0c4!important;
}
html[data-theme="dark"] #s-account .account-section-title em,
html[data-theme="dark"] .profile-modal .account-section-title em,
html[data-theme="dark"] #s-account .profile-main p,
html[data-theme="dark"] .profile-modal .profile-main p{
  color:#9fb0c4!important;
}

/* History Tin2B parity */


  background:rgba(245,158,11,.14)!important;
  border-color:rgba(245,158,11,.36)!important;
}

/* Mobile font audit: keep long controls visible at every personal font scale. */
@media(max-width:767px){
  #s-settings .settings-row:has(.settings-control-group){
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  #s-settings .settings-row:has(.settings-control-group) .settings-ctrls{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:stretch!important;
    gap:7px!important;
  }
  #s-settings .settings-control-group{
    min-width:0!important;
    max-width:100%!important;
  }
  #s-settings .settings-control-group .settings-input:not(.t2b-input),
  #s-settings .settings-control-group .settings-select:not(.t2b-select){
    width:100%!important;
    max-width:100%!important;
  }
}

@media(max-width:430px){
  #s-settings .settings-row:has(.settings-control-group) .settings-ctrls{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:767px){
  #s-settings .settings-row{
    grid-template-columns:minmax(0,1fr) minmax(150px,180px)!important;
  }
  #s-settings .settings-select:not(.t2b-select){
    width:100%!important;
    max-width:180px!important;
  }
}

#s-team .bnr.team-member-card:not(.t2b-player-row):not(:has(.team-actions-menu)),
#s-team .team-member-card:not(.t2b-player-row):not(:has(.team-actions-menu)){
  grid-template-columns:18px 38px minmax(0,1fr)!important;
}
#s-account .account-beer-tags{
  min-width:0!important;
}
#s-account .account-beer-tags small{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#s-account .account-beer-tags .code{
  max-width:min(100%,150px)!important;
}
#s-account .account-beer-row{
  grid-template-columns:auto minmax(0,1fr) auto!important;
}
#s-account .account-beer-main,
#s-account .account-beer-row > span{
  min-width:0!important;
}
@media(max-width:390px){
  .beer-pay-qr-layout{
    grid-template-columns:124px minmax(0,1fr)!important;
  }
  .beer-pay-qr-box{
    width:124px!important;
    height:124px!important;
  }
  .beer-pay-qr-box img{
    width:110px!important;
    height:110px!important;
  }
  .beer-pay-save{
    width:124px!important;
  }
  .beer-pay-info b{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #s-account .account-beer-row{
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:8px!important;
  }
  #s-account .account-beer-row button{
    grid-column:2!important;
    justify-self:start!important;
    min-height:34px!important;
    padding:0 12px!important;
    font-size:12px!important;
  }
}
html[data-theme="dark"] #s-account .profile-chip-row span,
html[data-theme="dark"] .profile-modal .profile-chip-row span{
  background:#203047!important;
  border-color:#35485d!important;
  color:#cbd7e6!important;
}
html[data-theme="dark"] .profile-modal .profile-form-actions{
  background:rgba(16,24,32,.96)!important;
  border-top:1px solid #2c3c4f!important;
}

#s-create{
  --nf-font-scale:var(--app-font-scale,1);
}
#s-create.create-mode-live .create-date-row{
  grid-template-columns:minmax(0,1.1fr) minmax(70px,.9fr) minmax(70px,.9fr)!important;
}
#s-create #ls-log{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#s-create #livescore-panel{
  min-height:0!important;
}
#s-create .ls-board-head{
  grid-template-columns:minmax(0,1fr) 40px 40px!important;
}
#s-create #ls-level-summary{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:8px!important;
  gap:3px!important;
}

.beer-pay-head > div{
  min-width:0!important;
}
.beer-pay-head h2,
.beer-pay-head p{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.beer-pay-head h2{
  white-space:nowrap!important;
}
.beer-pay-head p{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

.club-card.feed-status .club-head{
  grid-template-columns:40px minmax(0,1fr) minmax(0,auto)!important;
}
.club-card.feed-status .club-pill{
  max-width:min(96px,28vw)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.club-card.feed-status .club-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.club-card.feed-status .club-actions button{
  width:100%!important;
  padding:0 7px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.club-card.feed-status .club-actions button.chat{
  margin-left:0!important;
}
.club-chat-title b,
.club-card.feed-status .club-title b{
  font-size:calc(14px * var(--nf-font-scale,1))!important;
}
.club-chat-title span,
.club-card.feed-status .club-title span{
  font-size:calc(10.2px * var(--nf-font-scale,1))!important;
}
.club-bubble,
.club-card.feed-status .club-message{
  font-size:calc(12.2px * var(--nf-font-scale,1))!important;
}
html[data-theme="dark"] .club-form,
html[data-theme="dark"] .club-memo-tools,
html[data-theme="dark"] .club-mention-pop{
  background:#172332!important;
  border-color:#314256!important;
  color:#cbd7e6!important;
}

@media(max-width:430px){
  .finance-row{
    grid-template-columns:38px minmax(0,1fr) minmax(64px,82px)!important;
    gap:8px!important;
  }
  .finance-row-amount{
    min-width:0!important;
    max-width:82px!important;
  }
  .finance-row-amount b,
  .finance-row-amount span{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

#s-team .team-level-stats{
  max-width:100%!important;
  overflow:visible!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  padding-right:0!important;
  scrollbar-width:none!important;
  touch-action:pan-y!important;
  height:auto!important;
  max-height:none!important;
  min-height:56px!important;
  margin:8px 0 10px!important;
}
#s-team .team-level-stats::-webkit-scrollbar{
  display:none!important;
}
#s-team .team-level-stat:not(.t2b-chip){
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:25px!important;
  min-height:25px!important;
}
#s-team .team-tools-row:not(.t2b-team-tools){
  margin-top:0!important;
}

/* Cross-screen Tin2B audit pass 2026-05-18. Keep mobile controls compact and readable. */
@media(max-width:767px){

    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    white-space:normal!important;
  }

  #s-team .team-member-card:not(.t2b-player-row):not(:has(.team-actions-menu)){
    grid-template-columns:18px 38px minmax(0,1fr)!important;
  }
  #s-team .team-name-row,
  #s-team .team-nick:not(.t2b-player-name){
    min-width:0!important;
  }
  #s-team .team-nick:not(.t2b-player-name){
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #s-team .role-chip,
  #s-team .team-me-chip{
    flex:0 0 auto!important;
  }

  #s-account .account-beer-tags .code,
  .beer-pay-list span{
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #s-account .account-beer-row{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  #s-account .account-beer-row .account-beer-action{
    grid-column:2!important;
    justify-self:start!important;
    min-height:30px!important;
    height:30px!important;
    padding:0 12px!important;
  }
  .beer-pay-main{
    grid-template-columns:124px minmax(0,1fr)!important;
  }
  .beer-pay-info b,
  .beer-pay-head p{
    min-width:0!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    overflow-wrap:anywhere!important;
  }

  #s-create #score-a,
  #s-create #score-b{
    font-size:calc(24px * var(--nf-font-scale,1))!important;
  }
  #s-create .sdash{
    font-size:calc(26px * var(--nf-font-scale,1))!important;
  }
  #s-create #ls-finish-alert span,
  #s-create .ls-log-row span{
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

@media(min-width:361px) and (max-width:430px){

#s-settings .settings-ctrls .sgv{
  display:block!important;
  max-width:150px!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html[data-theme="dark"] #s-create.create-mode-live .create-date-row select,
html[data-theme="dark"] #s-create.create-mode-live .create-date-row #match-set-format,
html[data-theme="dark"] #s-create.create-mode-live .create-date-row #match-matchpoint,
html[data-theme="dark"] .club-form input,
html[data-theme="dark"] .club-form textarea,
html[data-theme="dark"] .club-memo-tools button{
  background:#111c28!important;
  border-color:#314256!important;
  color:#e6eef8!important;
}
html[data-theme="dark"] #s-account .profile-chip-row span,
html[data-theme="dark"] .profile-modal .profile-chip-row span,
html[data-theme="dark"] .profile-modal .profile-form-actions{
  background:#111c28!important;
  border-color:#314256!important;
  color:#dbeafe!important;
}

/* Tin2B final polish: compact read-only Settings values and pair-ranking badges. */
#s-settings .settings-ctrls .sgv{
  width:max-content!important;
  max-width:136px!important;
  min-height:28px!important;
  padding:6px 9px!important;
  border:1px solid rgba(0,180,216,.16)!important;
  border-radius:999px!important;
  background:rgba(236,253,255,.72)!important;
  font-family:'Roboto Condensed',sans-serif!important;
  font-size:calc(11.2px * var(--nf-font-scale,1))!important;
  font-weight:900!important;
  line-height:1.05!important;
  text-align:right!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}



html[data-theme="dark"] #s-settings .settings-ctrls .sgv{
  background:#111c28!important;
  border-color:#314256!important;
}

/* Team screen final pass: keep six level badges on one clean row and separate avatars from names. */
#s-team .team-level-stats{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:5px!important;
  width:100%!important;
  max-width:100%!important;
  min-height:28px!important;
  height:28px!important;
  max-height:28px!important;
  margin:8px 0 8px!important;
  padding:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x!important;
}
#s-team .team-level-stats::-webkit-scrollbar{
  display:none!important;
}
#s-team .team-level-row{
  display:contents!important;
}
#s-team .team-level-stat:not(.t2b-chip){
  flex:0 0 auto!important;
  width:auto!important;
  min-width:40px!important;
  max-width:none!important;
  height:26px!important;
  min-height:26px!important;
  padding:0 6px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  line-height:1!important;
}
#s-team .team-level-stat:not(.t2b-chip) span,
#s-team .team-level-stat:not(.t2b-chip) b{
  display:inline-flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:100%!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#s-team .team-level-stat:not(.t2b-chip) span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#s-team .team-member-card:not(.t2b-player-row),
#s-team .bnr.team-member-card:not(.t2b-player-row){
  column-gap:11px!important;
}
#s-team .team-member-card:not(.t2b-player-row):has(.team-actions-menu),
#s-team .bnr.team-member-card:not(.t2b-player-row):has(.team-actions-menu){
  grid-template-columns:18px 42px minmax(0,1fr) 34px!important;
}
#s-team .team-member-card:not(.t2b-player-row):not(:has(.team-actions-menu)),
#s-team .bnr.team-member-card:not(.t2b-player-row):not(:has(.team-actions-menu)){
  grid-template-columns:18px 42px minmax(0,1fr)!important;
}
#s-team .team-avatar-wrap:not(.t2b-player-media),
#s-team .team-avatar-wrap:not(.t2b-player-media) .av{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
}
#s-team .team-member-main:not(.t2b-player-main){
  min-width:0!important;
  padding-left:1px!important;
}
#s-team .team-name-row{
  gap:7px!important;
  min-width:0!important;
}
#s-team .team-nick:not(.t2b-player-name){
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}






