:root{
  --ink:#1f252c;--navy:#081669;--blue:#153a9b;--paper:#f2f1ef;--card:#fff;--muted:#666b71;
  --line:#d9d9d9;--danger:#9f1d20;--radius:18px;--shadow:0 10px 30px rgba(0,0,0,.08);
  --max:1460px;--article:820px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}.app-shell{min-height:100vh}a{color:inherit}.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}.mast{padding:34px 0 18px;display:flex;align-items:end;justify-content:space-between;gap:20px}.brand-kicker{letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;font-weight:800;color:var(--blue)}.mast h1,.article-hero h1{font-family:"Arial Narrow",Impact,Haettenschweiler,sans-serif;font-stretch:condensed;margin:.15rem 0;font-weight:900;letter-spacing:.01em}.mast h1{font-size:clamp(2.2rem,5vw,4.7rem);line-height:.95}.mast p{margin:.4rem 0 0;color:var(--muted);max-width:720px}.member-link{white-space:nowrap;border:1px solid #c8c8c8;border-radius:999px;padding:10px 16px;text-decoration:none;background:#fff;font-weight:750;font-size:.92rem}.member-link:hover{border-color:var(--blue);color:var(--blue)}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 48px;padding:22px 0 54px}.blog-card{text-decoration:none;display:block}.blog-card:hover .card-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.cover-wrap{aspect-ratio:16/9;overflow:hidden;background:#d8d8d8}.cover-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.blog-card:hover .cover-wrap img{transform:scale(1.015)}.category{display:block;margin-top:18px;text-transform:uppercase;letter-spacing:.035em;font-size:.9rem;color:#575b61}.card-title{font-family:"Arial Narrow",Impact,Haettenschweiler,sans-serif;font-size:clamp(1.55rem,2.4vw,2.15rem);line-height:1.04;margin:12px 0 9px}.card-excerpt{margin:0;color:#4e5359;font-size:1rem;line-height:1.55}.card-meta{margin-top:13px;color:#7a7d80;font-size:.86rem}
.empty-state{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px;text-align:center;margin:30px 0}.article-hero{background:var(--ink);color:#fff;padding:54px 20px 52px}.article-hero-inner{max-width:1050px;margin:auto;text-align:center}.article-hero .eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;font-weight:800;opacity:.72}.article-hero h1{font-size:clamp(2.35rem,5vw,4.8rem);line-height:1.02;max-width:980px;margin:12px auto 14px}.article-meta{font-size:.98rem;color:#d8dbe0}.article-cover{width:min(1180px,calc(100% - 36px));margin:-1px auto 0}.article-cover img{display:block;width:100%;max-height:690px;object-fit:cover}.article-wrap{background:#fff}.article-body{width:min(var(--article),calc(100% - 38px));margin:0 auto;padding:48px 0 58px;font-size:1.08rem;line-height:1.82}.article-body p{margin:0 0 1.35em}.article-body h2,.article-body h3{font-family:"Arial Narrow",Impact,Haettenschweiler,sans-serif;line-height:1.1;margin:2.2rem 0 .8rem}.article-body h2{font-size:2rem}.article-body h3{font-size:1.55rem}.article-body blockquote{border-left:5px solid var(--blue);margin:2rem 0;padding:.2rem 0 .2rem 1.3rem;font-size:1.2rem;font-weight:650;color:#3d434a}.article-body ul,.article-body ol{padding-left:1.4rem;margin:1rem 0 1.5rem}.article-body a{color:var(--blue);font-weight:650}.ql-align-center{text-align:center}.ql-align-right{text-align:right}.ql-align-justify{text-align:justify}.article-section{padding:50px 0}.article-section h2.section-title{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:clamp(2.25rem,5vw,4rem);margin:0 0 30px}.gallery{width:min(1480px,calc(100% - 40px));margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.gallery a{display:block;aspect-ratio:1/1;overflow:hidden;background:#ddd}.gallery img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .25s}.gallery a:hover img{transform:scale(1.025)}.social-section{background:#ecebea}.social-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.social-button{min-width:190px;text-align:center;padding:14px 22px;border-radius:9px;text-decoration:none;font-weight:800;background:var(--navy);color:#fff}.social-button:hover{filter:brightness(1.15)}.back-row{width:min(var(--article),calc(100% - 38px));margin:auto;padding:24px 0}.back-row a{text-decoration:none;font-weight:750;color:var(--blue)}
.auth-page,.dashboard-page{background:#eef0f3}.auth-card,.panel{width:min(760px,calc(100% - 32px));margin:45px auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}.panel.wide{width:min(1180px,calc(100% - 32px))}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.panel h1,.panel h2,.auth-card h1{font-family:"Arial Narrow",Impact,sans-serif;line-height:1.05}.top-actions{display:flex;flex-wrap:wrap;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:11px 16px;background:var(--navy);color:#fff;text-decoration:none;font:inherit;font-weight:800;cursor:pointer}.btn.secondary{background:#e9ebef;color:#222}.btn.danger{background:var(--danger)}.btn.small{padding:8px 11px;font-size:.86rem}.field{margin:0 0 17px}.field label{display:block;font-weight:800;margin-bottom:6px}.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=url],.field select,.field textarea{width:100%;border:1px solid #cfd3d8;border-radius:9px;padding:12px 13px;font:inherit;background:#fff}.field textarea{min-height:110px;resize:vertical}.help{font-size:.85rem;color:#74777b;margin-top:5px}.flash{border-radius:10px;padding:12px 14px;margin:0 0 18px}.flash.error{background:#fff0f0;color:#7d1515;border:1px solid #edc6c6}.flash.success{background:#edf9ef;color:#155d26;border:1px solid #b9e0c0}.dashboard-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.stat{background:#f5f6f8;border-radius:12px;padding:18px}.stat strong{display:block;font-size:2rem;line-height:1}.post-list{width:100%;border-collapse:collapse}.post-list th,.post-list td{padding:12px 10px;border-bottom:1px solid #e4e6e8;text-align:left;vertical-align:top}.post-list th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#70757a}.actions{display:flex;gap:7px;flex-wrap:wrap}.status{display:inline-block;border-radius:999px;padding:4px 9px;background:#e7e9ed;font-size:.78rem;font-weight:800;text-transform:capitalize}.status.published{background:#dff3e4;color:#1a662c}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.span-2{grid-column:1/-1}.editor-wrap{background:#fff}.ql-toolbar.ql-snow{border-color:#cfd3d8;border-radius:9px 9px 0 0}.ql-container.ql-snow{border-color:#cfd3d8;border-radius:0 0 9px 9px;font-family:inherit;font-size:1rem}.ql-editor{min-height:380px;line-height:1.75}.media-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.media-item{position:relative;background:#f1f1f1;border-radius:10px;overflow:hidden}.media-item img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.media-item label{display:block;padding:8px;font-size:.8rem}.checkrow{display:flex;align-items:center;gap:8px}.footer-login{text-align:center;padding:18px 0 34px;color:#7b7f84;font-size:.84rem}.footer-login a{color:inherit}.install-note{background:#fff7d6;border:1px solid #ead88c;border-radius:10px;padding:12px 14px}
@media(max-width:850px){.container{width:min(100% - 24px,var(--max))}.mast{padding-top:22px;align-items:flex-start}.mast h1{font-size:2.65rem}.mast p{font-size:.94rem}.member-link{font-size:0;padding:9px 12px}.member-link:after{content:'Sign in';font-size:.84rem}.blog-grid{grid-template-columns:1fr;gap:34px;padding-top:14px}.gallery{grid-template-columns:repeat(2,1fr);gap:8px;width:calc(100% - 16px)}.article-body{font-size:1rem;padding-top:34px}.article-hero{padding:38px 16px 40px}.article-cover{width:100%}.article-cover img{max-height:440px}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.dashboard-cards{grid-template-columns:1fr}.post-list thead{display:none}.post-list,.post-list tbody,.post-list tr,.post-list td{display:block;width:100%}.post-list tr{padding:14px 0;border-bottom:1px solid #ddd}.post-list td{border:0;padding:5px 0}.post-list td:before{content:attr(data-label);display:block;font-size:.72rem;text-transform:uppercase;color:#777;font-weight:800}.media-preview{grid-template-columns:repeat(2,1fr)}.panel-head{align-items:flex-start;flex-direction:column}}

/* --------------------------------------------------------------------------
   Members Blog login — intentionally matched to the Phoenix 99 Members Only
   login page so both apps feel like one platform.
   -------------------------------------------------------------------------- */
.auth-page{
  min-height:100vh;
  margin:0;
  background:
    linear-gradient(
      180deg,
      #222425 0%,
      #21324a 18%,
      #1e416c 36%,
      #1c508f 56%,
      #1960b8 78%,
      #176add 100%
    );
  background-attachment:fixed;
  color:#10264f;
}

.auth-page .app-shell{min-height:100vh;}

.auth-page .auth-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:34px 16px;
}

.auth-page .auth-card.p99-login-card{
  width:min(520px,95vw);
  margin:0;
  padding:32px;
  text-align:left;
  background:#fff;
  border:1px solid #d7e3f6;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.p99-login-logo{
  margin:0 auto 12px;
  width:130px;
  height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.p99-login-logo img{
  display:block;
  width:120px;
  height:110px;
  object-fit:contain;
}

.auth-page .auth-card h1{
  margin:.1em 0 4px;
  text-align:center;
  color:#173b8a;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:2rem;
  font-weight:700;
  line-height:1.2;
}

.auth-page .auth-card > .muted{
  margin:0 0 22px;
  text-align:center;
  color:#3762c6;
}

.auth-page .stack{
  display:grid;
  gap:18px;
}

.auth-page .stack label{
  display:block;
  color:#173b8a;
  font-weight:650;
}

.auth-page .stack input{
  width:100%;
  margin-top:7px;
  border:1px solid #bcd0fa;
  border-radius:9px;
  padding:12px 13px;
  font:inherit;
  background:#fff;
  color:#10264f;
  outline:none;
}

.auth-page .stack input:focus{
  border-color:#1f58df;
  box-shadow:0 0 0 3px rgba(31,88,223,.12);
}

.auth-page .btn.primary{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #1f58df;
  border-radius:9px;
  padding:11px 18px;
  background:#1f58df;
  color:#fff;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}

.auth-page .btn.primary:hover{filter:brightness(1.04);}

.auth-page .auth-links{
  margin:18px 0 0;
  text-align:center;
}

.auth-page .auth-links a{
  color:#1555ff;
  text-decoration:none;
}

.auth-page .auth-links a:hover{text-decoration:underline;}

.p99-login-note{
  margin:8px 0 0;
  text-align:center;
  color:#6b7b98;
  font-size:.82rem;
}

.auth-page .flash.error{
  margin:12px 0 18px;
  padding:12px 14px;
  border:0;
  border-radius:9px;
  background:#fff0f0;
  color:#a61e1e;
}

@media(max-width:520px){
  .auth-page{background-attachment:scroll;}
  .auth-page .auth-wrap{padding:22px 10px;}
  .auth-page .auth-card.p99-login-card{padding:28px 22px;}
  .p99-login-logo{width:112px;height:102px;}
  .p99-login-logo img{width:104px;height:96px;}
  .auth-page .auth-card h1{font-size:1.75rem;}
}


/* ========================================================================== 
   99 CHRONICLES BRANDING — v7
   Kept out of the login page. These rules style the public blog and logged-in
   blog pages only.
   ========================================================================== */
.chronicles-banner{
  background:#20272d;
  color:#fff;
  width:100%;
  padding:34px 0 30px;
}
.chronicles-banner-inner{
  min-height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.chronicles-brand-block{
  text-align:center;
}
.chronicles-title{
  font-family:"Lobster","Brush Script MT","Segoe Script",cursive !important;
  font-size:clamp(3.6rem,7vw,5.8rem) !important;
  font-weight:400 !important;
  line-height:.98 !important;
  letter-spacing:.01em;
  color:#fff !important;
  margin:0 !important;
}
.chronicles-subtitle{
  margin-top:8px;
  color:#fff;
  font-family:"Arial Narrow",Impact,Haettenschweiler,sans-serif;
  font-size:1.25rem;
  font-weight:800;
  line-height:1;
}
.chronicles-action{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  color:#20272d;
  border-color:#fff;
}
.chronicles-action:hover{
  color:#081669;
  border-color:#fff;
}
.chronicles-intro{
  padding:28px 0 8px;
}
.chronicles-intro p{
  margin:.35rem 0 0;
  color:var(--muted);
  font-size:1.04rem;
}
.dashboard-page{
  background:#eef0f3;
}
.dashboard-banner{
  margin:0 0 34px;
  padding:28px 0 26px;
}
.dashboard-banner .chronicles-banner-inner{
  min-height:112px;
}
.dashboard-banner .chronicles-title{
  font-size:clamp(3.4rem,6vw,5rem) !important;
}
.dashboard-panel,
.editor-panel{
  margin-top:0;
}
.article-hero{
  background:#20272d !important;
  padding-top:34px !important;
}
.article-chronicles-title{
  font-size:clamp(3rem,5.5vw,4.7rem) !important;
}
.article-chronicles-subtitle{
  margin-bottom:22px;
}
.article-hero .eyebrow{
  margin-top:22px;
}

@media(max-width:850px){
  .chronicles-banner{padding:24px 0 22px}
  .chronicles-banner-inner{
    min-height:118px;
    display:block;
  }
  .chronicles-title{
    font-size:3.65rem !important;
  }
  .chronicles-subtitle{
    font-size:1.05rem;
  }
  .chronicles-action{
    position:static;
    display:table;
    transform:none;
    margin:18px auto 0;
    font-size:.85rem !important;
  }
  .chronicles-action:after{content:none !important}
  .dashboard-banner{margin-bottom:18px}
  .dashboard-banner .chronicles-banner-inner{min-height:auto}
  .panel.wide{width:min(100% - 20px,1180px)}
}


/* ==========================================================================
   Multiple social links editor — v9
   ========================================================================== */
.social-help{
  margin:4px 0 14px;
  color:#6b7280;
}

.social-link-editor{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.social-link-group{
  min-width:0;
  background:#f7f8fa;
  border:1px solid #e2e5e9;
  border-radius:14px;
  padding:14px;
}

.social-link-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.social-link-group-head strong{
  font-size:1rem;
  color:#1f252c;
}

.social-add{
  flex:0 0 34px;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#081669;
  color:#fff;
  font:700 1.25rem/1 Inter,system-ui,sans-serif;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 7px rgba(8,22,105,.18);
}

.social-add:hover{
  background:#153a9b;
}

.social-link-list{
  display:grid;
  gap:9px;
}

.social-link-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  gap:8px;
  align-items:center;
}

.field .social-link-row input[type=url]{
  min-width:0;
  width:100%;
  height:46px;
  margin:0;
  padding:10px 12px;
  border:1px solid #cfd3d8;
  border-radius:9px;
  background:#fff;
}

.field .social-link-row input[type=url]:focus{
  outline:none;
  border-color:#153a9b;
  box-shadow:0 0 0 3px rgba(21,58,155,.10);
}

.social-remove{
  width:38px;
  height:38px;
  padding:0;
  border:1px solid #d8dadd;
  border-radius:9px;
  background:#fff;
  color:#72767c;
  font:600 1.15rem/1 Inter,system-ui,sans-serif;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.social-remove:hover{
  background:#fff0f0;
  color:#9f1d20;
  border-color:#e5bcbc;
}

@media(max-width:850px){
  .social-link-editor{
    grid-template-columns:1fr;
    gap:12px;
  }

  .social-link-group{
    padding:13px;
  }

  .social-link-row{
    grid-template-columns:minmax(0,1fr) 40px;
  }

  .social-remove{
    width:40px;
    height:40px;
  }
}

/* Editor fallback / visible editor surface — v10 */
.editor-wrap{
  min-height:380px;
}
.editor-fallback{
  min-height:380px;
  padding:14px 16px;
  border:1px solid #cfd3d8;
  border-radius:9px;
  background:#fff;
  outline:none;
}
.editor-fallback:focus{
  border-color:#153a9b;
  box-shadow:0 0 0 3px rgba(21,58,155,.10);
}


/* Blog editor spacing — v11 */
.blog-content-field{
  margin-bottom:34px;
  padding-bottom:6px;
  min-width:0;
}

.blog-content-field .ql-toolbar.ql-snow{
  margin-top:7px;
}

.blog-content-field .ql-container.ql-snow{
  min-height:380px;
}

.blog-content-field .ql-editor{
  min-height:380px;
}

.blog-content-field > .help{
  display:block;
  clear:both;
  margin:12px 0 0;
  padding:0 2px;
  line-height:1.5;
}

.editor-panel .form-grid{
  row-gap:26px;
}

@media(max-width:850px){
  .blog-content-field{
    margin-bottom:26px;
  }

  .editor-panel .form-grid{
    row-gap:22px;
  }
}


/* Blog editor layout correction — v12
   Quill ships with height:100% on .ql-container, which can make the editor
   overflow its CSS-grid row. Give the editor an explicit height so everything
   below starts after the help text rather than underneath it. */
.blog-content-field{
  display:block !important;
  margin:0 0 42px !important;
  padding:0 0 12px !important;
  overflow:visible !important;
}

.blog-content-field .ql-toolbar.ql-snow{
  display:block;
  margin-top:8px;
}

.blog-content-field .ql-container.ql-snow{
  display:block;
  height:380px !important;
  min-height:380px !important;
  overflow:hidden;
}

.blog-content-field .ql-editor{
  height:100%;
  min-height:0 !important;
  overflow-y:auto;
}

.blog-content-field > .help{
  position:static !important;
  display:block !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  line-height:1.55;
}

/* Ensure the next grid row cannot ride up underneath the editor. */
.blog-content-field + .field{
  margin-top:0 !important;
}

@media(max-width:850px){
  .blog-content-field{
    margin-bottom:34px !important;
  }
  .blog-content-field .ql-container.ql-snow{
    height:320px !important;
    min-height:320px !important;
  }
}


/* Social + button alignment — v13 */
.social-link-group-head{
  align-items:flex-start;
}

.social-add{
  align-self:flex-start;
  margin-top:-3px;
  line-height:1 !important;
}

.social-add > span{
  display:block;
  transform:translateY(-1px);
}


/* Social add-button position — v14
   Pin the whole button to the top-right of each card and draw the + ourselves,
   so browser font metrics cannot push it down. */
.social-link-group{
  position:relative;
}

.social-link-group-head{
  display:block;
  min-height:34px;
  padding-right:48px;
  margin-bottom:10px;
}

.social-add{
  position:absolute !important;
  top:8px !important;
  right:14px !important;
  margin:0 !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border-radius:50% !important;
  font-size:0 !important;
  line-height:1 !important;
}

.social-add::before{
  content:'+';
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-57%);
  font:700 24px/1 Arial,sans-serif;
  color:#fff;
}

@media(max-width:850px){
  .social-add{
    top:8px !important;
    right:12px !important;
  }
}


/* Social add-button alignment — v15
   Keep the button in the heading row, small and genuinely vertically centred. */
.social-link-group{
  position:static !important;
}

.social-link-group-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-height:0 !important;
  padding-right:0 !important;
  margin-bottom:10px !important;
}

.social-link-group-head strong{
  display:block;
  line-height:1.2;
}

.social-add{
  position:static !important;
  inset:auto !important;
  align-self:center !important;
  flex:0 0 32px !important;
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#081669 !important;
  color:#fff !important;
  box-shadow:0 2px 6px rgba(8,22,105,.18) !important;
  font-size:0 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.social-add::before{
  content:none !important;
}

.social-plus-symbol{
  display:block;
  font:700 20px/1 Arial,sans-serif;
  color:#fff;
  transform:translateY(-1px);
}

@media(max-width:850px){
  .social-add{
    position:static !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
  }
}


/* Social + button — definitive alignment fix v16 */
.social-link-group-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}

.social-add{
  position:static !important;
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#081669 !important;
  color:#fff !important;
  box-shadow:0 2px 6px rgba(8,22,105,.18) !important;
  font-size:initial !important;
  line-height:normal !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.social-add::before{
  content:none !important;
  display:none !important;
}

.social-plus-symbol{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-family:Arial,sans-serif !important;
  font-size:21px !important;
  font-weight:700 !important;
  line-height:1 !important;
  transform:translateY(-1px) !important;
}