/* The sign-in splash's styles (src/welcome.html). In a file under src/public,
   which staticwebapp.config.json serves to anonymous visitors, because the
   Content-Security-Policy allows no inline <style> (WP11 seam 1) and
   styles.css itself sits behind the sign-in. The tokens are the brand's. */

:root{
  --tbs-red:     #EE3124;
  --tbs-black:   #323232;
  --tbs-silver:  #A0A2A0;
  --tbs-darkred: #841618;
  --ink:         #323232;
  --ink-muted:   #6E706E;
  --ground:      #FFFFFF;
  --ground-alt:  #F5F5F4;
  --rule:        #A0A2A0;
  --radius: 4px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; height:100%; }

body{
  font-family: Arial, Helvetica, sans-serif;
  font-size:15px; line-height:1.5;
  color: var(--ink);
  background: var(--ground-alt);
  display:flex; flex-direction:column;
  -webkit-text-size-adjust:100%;
}

.masthead{ background: var(--tbs-black); border-bottom:3px solid var(--tbs-red); }
.masthead-inner{
  max-width:1180px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; gap:12px;
}
.welcome-logo{ height:60px; width:auto; display:block; }
.brand-mark{
  color:#FFFFFF; font-size:22px; font-weight:bold; letter-spacing:.06em;
}
.brand-mark-accent{ color: var(--tbs-red); }
.brand-sub{ color: var(--tbs-silver); font-size:14px; letter-spacing:.04em; }

main{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
}

.card{
  background: var(--ground);
  border:1px solid var(--rule);
  border-top:3px solid var(--tbs-red);
  border-radius: var(--radius);
  max-width:520px; width:100%;
  padding:32px 34px 34px;
}

h1{
  margin:0 0 6px; font-size:24px; line-height:1.2; color: var(--tbs-red);
}
.lede{ margin:0 0 22px; color: var(--ink-muted); }

p{ margin:0 0 14px; }
p:last-of-type{ margin-bottom:0; }

.btn{
  display:inline-block; font-family:inherit; font-size:15px; font-weight:bold;
  padding:12px 22px; border:1px solid var(--tbs-red); border-radius: var(--radius);
  background: var(--tbs-red); color:#FFFFFF; text-decoration:none; cursor:pointer;
}
.btn:hover{ background: var(--tbs-darkred); border-color: var(--tbs-darkred); }
.btn:focus-visible{ outline:2px solid var(--tbs-black); outline-offset:2px; }

.actions{ margin:24px 0 0; }

.rule{ border:0; border-top:1px solid var(--rule); margin:26px 0 18px; }

.fine{ font-size:13px; color: var(--ink-muted); margin:0 0 10px; }
.fine:last-child{ margin-bottom:0; }
.fine strong{ color: var(--ink); }

.signedout{
  border-left:3px solid var(--tbs-silver);
  background: var(--ground-alt);
  padding:12px 14px; margin:0 0 20px; font-size:14px;
}
.signedout[hidden]{ display:none; }

.foot{
  max-width:1180px; margin:0 auto; padding:16px 24px 26px;
  font-size:12px; color: var(--tbs-silver);
}

@media (max-width:560px){
  .card{ padding:24px 20px 26px; }
  h1{ font-size:21px; }
}