/* ==========================================================================
   Theme refresh (MOCK) — loaded only on the dashboard "all posts" page for now.
   Additive layer on top of style.css; remove the controller's css() line to revert.
   Establishes design tokens and modernizes the navbar, buttons, feed cards,
   search widget, tags and form focus. Nothing here is page-structural.
   ========================================================================== */

:root{
  --brand:        #1f6feb;
  --brand-dark:   #1a5fce;
  --brand-tint:   #eaf1fd;
  --ink:          #1f2329;   /* headings */
  --text:         #3a4047;   /* body copy (passes AA on white) */
  --muted:        #6b727c;   /* meta / secondary */
  --bg:           #f4f6f9;   /* page canvas so white cards lift */
  --surface:      #ffffff;
  --border:       #e4e8ee;
  --radius:       10px;
  --radius-sm:    8px;
  --shadow-sm:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-md:    0 8px 24px rgba(16,24,40,.12);
}

/* ---- Page canvas & base type --------------------------------------------- */
body{ background:var(--bg); color:var(--text); }
p{ color:var(--text); }
a{ transition:color .18s ease; }

/* Tighten the oversized gap under the banner (header had padding-top:68px) and
   sit the content a comfortable distance below the navbar. */
#header{ padding-top:0; }
#blog{ margin-top:32px; }

/* ---- Navbar -------------------------------------------------------------- */
.navbar{
  background:#222d3d;   /* lighter, slate-blue banner (was near-black) */
  box-shadow:0 2px 10px rgba(0,0,0,.16);
}
/* The logo PNG is dark artwork on transparency; render it white so the
   "Kaseidon" wordmark reads clearly on the dark header. */
.navbar-brand img{
  -webkit-filter:brightness(0) invert(1);
  filter:brightness(0) invert(1);
}
.navbar-inverse .navbar-nav > li > a{
  color:#cdd4df;
  border-radius:6px;
  transition:background-color .18s ease, color .18s ease;
}
.navbar-inverse .navbar-nav > li > a:hover{
  background-color:rgba(31,111,235,.18);
  color:#fff;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus{
  background-color:var(--brand);
  color:#fff;
}
.navbar-inverse .navbar-nav .dropdown-menu{
  border-radius:10px;
  box-shadow:var(--shadow-md);
  overflow:hidden;
  margin-top:6px;
}
.navbar-inverse .navbar-nav .dropdown-menu > li:hover > a,
.navbar-inverse .navbar-nav .dropdown-menu > li:focus > a,
.navbar-inverse .navbar-nav .dropdown-menu > li.active > a{
  background-color:var(--brand);
  color:#fff;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn-primary,
.btn-primary.search-btn{
  background:var(--brand);
  border:1px solid var(--brand);
  border-radius:var(--radius-sm);
  padding:8px 18px;
  font-family:'glacial_indifferencebold';
  box-shadow:var(--shadow-sm);
  transition:background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.search-btn:hover{
  background:var(--brand-dark);
  border-color:var(--brand-dark);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}
/* Give the "Search" and "Add Post" buttons one shared width so they match
   (both edges line up) regardless of their differing label lengths. */
.btn-primary.search-btn{ min-width:120px; text-align:center; }

/* ---- Inputs / selects ---------------------------------------------------- */
.form-control{
  border-radius:var(--radius-sm);
  border-color:var(--border);
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(31,111,235,.15);
}

/* ---- Search widget ------------------------------------------------------- */
.widget.search{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:20px;
  margin-bottom:24px;
  overflow:hidden;          /* clip inner controls to the rounded corners so the top edge isn't cut */
}
/* Nudge the "Search" button toward the navbar "Add Post" button without letting
   it hug the card's right edge: drop the extra 12px margin and trim the column
   gutter to a small, balanced gap. */
.srch_btn{ margin-right:0; padding-right:8px; }

/* ---- Feed cards ---------------------------------------------------------- */
.blog .blog-item .blog-content{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  /* bottom padding reserves space for the absolutely-positioned footer
     (.bottom-box) so it never overlaps the labels above it */
  padding:20px 22px 52px;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.blog .blog-item .blog-content:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
  border-color:#d7deea;
}
/* breathing room between the labels and the footer bar */
.blog-content .tag-list{ margin-bottom:4px; }

/* footer bar (Helpful / Followers / View) — match the card's rounded bottom */
.blog-content .bottom-box{
  background:#f7f9fc;
  border-top:1px solid var(--border);
  border-radius:0 0 var(--radius) var(--radius);
  padding:10px 14px;
}
.blog-content h3{ width:auto; padding-right:60px; }
.blog-content h3 a{
  color:var(--ink) !important;
  font-size:1.3em !important;
  line-height:1.3;
}
.blog-content:hover h3 a{ color:var(--brand) !important; }
.blog-content > p{ color:var(--text); line-height:1.6; }
.post-user p, .post-user span, .post-user a{ color:var(--muted); }
.post-user span i{ color:var(--brand); }

/* Unread/updated accents: a clean left rule instead of a full color wash */
.blog-content.update{ background:var(--surface) !important; border-left:3px solid #e5484d; }
.blog-content.notify{ background:var(--surface) !important; border-left:3px solid var(--brand); }

/* Post id chip */
.serial_no.big{
  background:var(--brand-tint);
  color:var(--brand);
  border-radius:8px;
  padding:0 8px;
}

/* ---- Tag pills ----------------------------------------------------------- */
.tag-list ul li a{
  background:var(--brand-tint);
  color:var(--brand);
  border-radius:999px;
  padding:4px 12px;
  font-size:12px;
  transition:background-color .15s ease, color .15s ease;
}
.tag-list ul li a:hover{
  background:var(--brand);
  color:#fff;
}

/* ---- Right-column widgets ------------------------------------------------ */
.widget h3{
  color:var(--ink);
  font-size:16px;
  letter-spacing:.2px;
}

/* ===== Site-wide component polish ========================================= */

/* Secondary / danger buttons share the same shape language as primary */
.btn-default{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--ink);
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-default:hover,
.btn-default:focus{
  background:#f3f5f8;
  border-color:#cfd6e0;
  color:var(--ink);
}
.btn-danger{
  background:#e5484d;
  border:1px solid #e5484d;
  border-radius:var(--radius-sm);
  transition:background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn-danger:hover,
.btn-danger:focus{
  background:#cf3a3f;
  border-color:#cf3a3f;
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}

/* Modals */
.modal-content{
  border:0;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(16,24,40,.22);
  overflow:hidden;
}
.modal-header{ border-bottom:1px solid var(--border); padding:16px 20px; }
.modal-header .modal-title{ color:var(--ink); }
.modal-body{ padding:20px; }
.modal-footer{ border-top:1px solid var(--border); padding:14px 20px; }

/* Tables (incl. DataTables) */
.table{ color:var(--text); }
.table > thead > tr > th{
  border-bottom:2px solid var(--border);
  color:var(--ink);
  font-family:'glacial_indifferencebold';
}
.table > tbody > tr > td{ border-top:1px solid var(--border); }
.table-hover > tbody > tr:hover{ background:var(--brand-tint); }

/* Panels */
.panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.panel-heading{ background:#f7f9fc; border-bottom:1px solid var(--border); }

/* "Leave this post" — a clear, cautionary outline button (red on white) that
   stands out among the muted action-bar buttons without being as alarming as a
   delete. Lives in the post's bottom action bar. */
.kd-leave-btn{
  background:#fff;
  color:#c0392b;
  border:1px solid #e2b6af;
  border-radius:8px;
  font-weight:600;
  padding:6px 14px;
  margin-left:6px;
  vertical-align:middle;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.kd-leave-btn:hover,
.kd-leave-btn:focus{
  background:#c0392b;
  color:#fff;
  border-color:#c0392b;
  box-shadow:0 2px 8px rgba(192,57,43,.28);
}
.kd-leave-btn .fa{ margin-right:6px; }

/* ---- Sidebar: compact contribution stat strip --------------------------- */
/* Replaces the three oversized bare circles (getPvhScore) with a tidy,
   contained card that links to My Scoreboard. */
.kd-statstrip{
  position:relative;
  display:flex;            /* column flex so the stat row can stretch to fill the taller card */
  flex-direction:column;
  text-decoration:none;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  /* Vertical alignment with the left column on the dashboard:
     - min-height grows the card so its bottom lines up with the "Sort by" box.
     - margin-bottom is the gap that puts the Labels box top level with the
       first post card. Nudge these two values if the alignment drifts. */
  min-height:140px;
  margin-bottom:24px;
  overflow:hidden;
  transition:box-shadow .18s ease;
}
.kd-statstrip:hover,
.kd-statstrip:focus{ box-shadow:var(--shadow-md); text-decoration:none; }
/* Quiet "this card is clickable" cue, in place of a redundant footer link. */
.kd-statstrip::after{
  content:'\203A';
  position:absolute;
  top:5px;
  right:11px;
  font-size:16px;
  line-height:1;
  color:var(--muted);
  transition:color .18s ease;
}
.kd-statstrip:hover::after{ color:var(--brand); }
.kd-statstrip .kd-stat-row{ display:flex; flex:1 1 auto; } /* fill the card height so cells + dividers stretch */
.kd-statstrip .kd-stat{
  flex:1;
  display:flex;                 /* center the number + label vertically in the taller cell */
  flex-direction:column;
  justify-content:center;
  text-align:center;
  padding:14px 6px;
  border-right:1px solid var(--border);
}
.kd-statstrip .kd-stat:last-child{ border-right:0; }
.kd-statstrip .kd-stat-n{
  display:block;
  font-size:24px;
  font-weight:800;
  color:var(--brand);
  line-height:1;
}
.kd-statstrip .kd-stat-t{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:5px;
}
/* Freshness nudge footer on the stat strip (only when posts are due review). */
.kd-statstrip .kd-stat-review{
  display:block;
  text-align:center;
  padding:7px 8px;
  background:#fff4e5;
  border-top:1px solid #ffd9a8;
  color:#b45309;
  font-size:12px;
  font-weight:600;
}
.kd-statstrip:hover .kd-stat-review{ background:#ffe9cc; }

/* ---- Sidebar: Labels box polish ----------------------------------------- */
/* The "Expand all labels" control was a loud green button clashing with the
   blue toolbar -- make it a quiet outline button. */
.click_all_label,
.click_all_label.btn-success{
  background:#fff !important;
  color:var(--brand) !important;
  border:1px solid var(--border) !important;
  font-weight:600;
  box-shadow:none !important;
}
.click_all_label:hover,
.click_all_label.btn-success:hover{
  background:var(--brand-tint) !important;
  border-color:#cfd6e0 !important;
  color:var(--brand-dark) !important;
}
/* Compact, scannable label rows -- lighter and denser so more labels show,
   with a calm hover (arrow/badge positions left intact). */
.cd-accordion-menu label,
.cd-accordion-menu a{
  background:#f7f9fc;
  border-color:var(--border);
  border-radius:6px;
  font-weight:600;
  font-size:14px;
  padding-top:7px;
  padding-bottom:7px;
  margin-bottom:4px;
}
.no-touch .cd-accordion-menu label:hover,
.no-touch .cd-accordion-menu a:hover{
  background:var(--brand-tint);
  color:var(--ink);
}
/* Per-row "filter by label" magnifier: calm grey, and on desktop it stays out
   of the way until you hover the row (kept visible on touch, which has no hover). */
.label-search-icon{ color:#9aa3af; }
.label-title:hover .label-search-icon{ color:var(--brand); }
.no-touch .label-search-icon{ opacity:0; transition:opacity .15s ease; }
.no-touch .label-title:hover .label-search-icon{ opacity:1; }
/* Child-label count: a quiet muted pill, not a red alert badge. */
.label-title .badge{
  background-color:#e4e8ee !important;
  color:var(--muted) !important;
  font-weight:600;
}

/* ---- Labels widget: clean header (icon toolbar) + persistent filter ----- */
.widget.tags .kd-lbl-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.widget.tags .kd-lbl-head h3{ margin:0; }
.kd-lbl-tools{ display:flex; align-items:center; gap:2px; }
.kd-lbl-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:6px;
  color:var(--brand);
  font-size:15px;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.kd-lbl-icon:hover,
.kd-lbl-icon:focus{
  background:var(--brand-tint);
  color:var(--brand-dark);
  text-decoration:none;
}
.kd-lbl-search{ margin-bottom:10px; }
.kd-lbl-search .form-control{ height:34px; }

/* ---- Per-post review cadence control (post detail) ----------------------- */
.kd-postinterval{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:10px 0; padding:10px 12px;
  background:#f7f9fc; border:1px solid var(--border); border-radius:8px;
  font-size:13px; color:var(--muted);
}
.kd-postinterval input[type=number]{
  width:72px; padding:4px 8px; border:1px solid var(--border);
  border-radius:6px; font-weight:600; color:var(--ink);
}
.kd-postinterval button{
  padding:4px 12px; border-radius:6px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:600;
}
.kd-postinterval button:hover{ background:var(--brand-dark); }
.kd-postinterval-hint{ color:var(--muted); font-style:italic; }

/* ---- User menu dropdown ---------------------------------------------------
   Make the toggle and the menu the same width, left-aligned, so they line up
   as a clean column (the bare .drop-mini sized to the name and clipped the
   longer labels like "Change Password"). */
.navbar-inverse .navbar-nav li.user-menu > .dropdown-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  width:190px;
}
.navbar-inverse .navbar-nav li.user-menu > .dropdown-toggle .user-menu-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.navbar-inverse .navbar-nav li.user-menu > .dropdown-toggle > .fa-angle-down{ margin-left:auto; }
.navbar-inverse .navbar-nav .dropdown-menu.drop-user{
  left:0 !important;
  right:auto;
  width:190px;
  min-width:190px !important;
}
.dropdown-menu.drop-user > li > a{ white-space:nowrap; }
/* uniform icon column so the labels line up under one another */
.dropdown-menu.drop-user .fa{ width:16px; text-align:center; margin-right:6px; }
.user-avatar-mini{
  width:16px; height:16px;
  vertical-align:middle;
  margin-right:2px;
  filter: brightness(0);
}

/* ---- Auth card (Change Password) ----------------------------------------- */
/* Replaces the dated .login-form horizontal layout with a centered surface
   card that matches the theme tokens used across the site. */
.kd-authcard{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:32px 34px 30px;
  margin:56px 0 90px;
}
.kd-authcard-head{ text-align:center; margin-bottom:24px; }
.kd-authcard-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin-bottom:14px;
  border-radius:50%;
  background:var(--brand-tint);
  color:var(--brand);
  font-size:22px;
}
.kd-authcard-head h2{
  margin:0 0 6px;
  color:var(--ink);
  font-size:24px;
}
.kd-authcard-head p{ margin:0; color:var(--muted); font-size:14px; }

/* Stack the fields with clear labels (vertical, not the old col-sm-4 split). */
.kd-authform .kd-field{ margin-bottom:18px; }
.kd-authform .kd-field label{
  display:block;
  margin-bottom:6px;
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
}
.kd-authform .form-control{ height:42px; }
.kd-field-hint{ margin:6px 0 0; color:var(--muted); font-size:12px; }

/* Show/hide password eye sits inside the input. */
.kd-input-wrap{ position:relative; }
.kd-input-wrap .form-control{ padding-right:42px; }
.kd-pw-toggle{
  position:absolute;
  top:0;
  right:0;
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:15px;
  cursor:pointer;
  transition:color .15s ease;
}
.kd-pw-toggle:hover,
.kd-pw-toggle:focus{ color:var(--brand); outline:none; }

/* Actions row: Cancel (quiet) + Change Password (primary), right-aligned. */
.kd-authform-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.kd-authform-actions .btn{ padding:9px 22px; }

@media (max-width:480px){
  .kd-authcard{ padding:24px 20px; margin:32px 0 60px; }
  .kd-authform-actions{ flex-direction:column-reverse; }
  .kd-authform-actions .btn{ width:100%; }
}

/* ---- Login page ------------------------------------------------------------
   Reuses the .kd-authcard system above instead of the old .login-form /
   bg1.png cartoon-ocean layout, so sign-in matches the rest of the refresh. */
.kd-login-page{
  min-height:100vh;
  margin:0;
  position:relative;
  display:flex;
  flex-direction:column;
}
/* Fixed full-viewport layer so the gradient is one continuous paint behind
   the card and footer, instead of being recomputed per flex box (which was
   producing a visible seam at the wrap/footer boundary in some browsers). */
.kd-login-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 15%, rgba(255,193,102,.35) 0%, rgba(255,193,102,0) 40%),
    radial-gradient(circle at 88% 85%, rgba(84,226,209,.35) 0%, rgba(84,226,209,0) 45%),
    linear-gradient(135deg, #2f7ff5 0%, var(--brand) 45%, #123a91 100%);
}
.kd-login-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 0 auto;
  padding:40px 20px;
  box-sizing:border-box;
}
/* Card + footer travel together as one balanced unit so the footer stays
   close to the card instead of drifting to the bottom of the viewport.
   No Bootstrap grid wrapper anymore -- flexbox alone centers the card,
   which is simpler and avoids the old col-md-6/offset-3 math drifting out
   of sync with the card's own width as its size changed. */
.kd-login-center{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:24px;
}
/* Crest above the card: sized to actually be seen (not a faint watermark),
   in normal flow so it takes its own place above the fields. */
.kd-login-seal{
  width:220px;
  height:220px;
  flex:0 0 auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
@media (max-width:600px){
  .kd-login-seal{ width:160px; height:160px; }
}
/* Page-level notice (wrong domain), sits above the card as its own strip
   instead of living inside the sign-in form and inflating its height. */
.kd-domain-banner{
  position:relative;
  background:var(--brand-tint);
  color:var(--ink);
  text-align:center;
  font-size:14px;
  line-height:1.5;
  padding:12px 20px;
  border-bottom:1px solid rgba(16,24,40,.08);
}
.kd-domain-banner strong{ font-weight:700; }
.kd-domain-banner a{ color:var(--brand-dark); font-weight:600; text-decoration:underline; }
/* Wide, short "window" proportions (~1.6:1 width:height, golden-ratio
   landscape) instead of the tall single-column stack. Putting the two
   fields side by side is what makes the card land in that range without
   leaving a single wide input looking empty. */
/* No card -- the fields sit directly on the gradient as frosted-glass
   inputs instead of inside an opaque white box. */
.kd-login-card{
  width:100%;
  max-width:640px;
  margin:0 auto;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.kd-login-fields-row{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:18px;
}
.kd-login-fields-row .kd-field{ flex:none; width:100%; min-width:0; margin-bottom:0; }
.kd-login-card .kd-field label{ font-size:14px; margin-bottom:6px; }
/* Recessed/embedded look: a dark tint plus inset shadows (dark on the top
   edge, a thin light rim on the bottom edge) so the field reads as a groove
   carved into the background instead of a raised glass panel floating on
   top of it. */
.kd-login-card .form-control{
  height:64px;
  font-size:18px;
  padding-left:26px;
  border-radius:32px;
  background:rgba(2,8,24,.42);
  border:1px solid transparent;
  border-top-color:rgba(0,0,0,.5);
  border-left-color:rgba(0,0,0,.4);
  border-right-color:rgba(255,255,255,.2);
  border-bottom-color:rgba(255,255,255,.3);
  color:#fff;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.65),
    inset 0 6px 12px rgba(0,0,0,.45),
    inset 0 -2px 0 rgba(255,255,255,.18);
}
.kd-login-card .form-control::placeholder{ color:rgba(255,255,255,.55); }
.kd-login-card .form-control:focus{
  background:rgba(2,8,24,.5);
  border-color:rgba(255,255,255,.5);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.65),
    inset 0 6px 12px rgba(0,0,0,.45),
    inset 0 -2px 0 rgba(255,255,255,.18),
    0 0 0 3px rgba(255,255,255,.2);
}
.kd-login-card .kd-pw-toggle{ width:50px; height:50px; font-size:16px; color:rgba(255,255,255,.8); }
.kd-login-card .kd-pw-toggle:hover,
.kd-login-card .kd-pw-toggle:focus{ color:#fff; }
.kd-login-card .kd-pw-toggle{ width:64px; height:64px; font-size:18px; }
.kd-login-card .kd-input-wrap .form-control{ padding-right:60px; }
.kd-login-card .kd-field-hint{ font-size:12px; color:#ffe1e1; }
/* Full-width bar beneath both stacked fields -- white so it pops against
   the glass fields and the gradient instead of disappearing as blue-on-blue. */
.kd-login-go{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:14px;
  width:100%;
  height:64px;
  border:none;
  border-radius:32px;
  background:#fff;
  color:var(--brand);
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(8,20,50,.2);
  opacity:0;
  transition:opacity .2s ease, background-color .15s ease, color .15s ease;
}
.kd-login-go:hover, .kd-login-go:focus{ background:#eaf1fd; color:var(--brand-dark); outline:none; }
/* Hidden until the user reaches for it: hover anywhere near the fields
   (desktop), tap into a field (mobile -- tapping an input focuses it, which
   is the natural first touch interaction), or tab to the button itself. */
.kd-login-fields-row:hover .kd-login-go,
.kd-login-fields-row:focus-within .kd-login-go,
.kd-login-go:hover,
.kd-login-go:focus{
  opacity:1;
}
.kd-login-footer{
  background:transparent;
  color:transparent;
  font-size:12px;
  text-align:center;
  margin:0;
  padding:0;
}
.kd-login-footer a{ color:transparent; }
/* Default browser selection highlight is a blue tint that would nearly
   vanish against this gradient -- make selecting the copyright text still
   visibly show a highlight. */
.kd-login-footer::selection,
.kd-login-footer *::selection{ background:#fff; color:var(--brand-dark); }
.kd-login-footer::-moz-selection,
.kd-login-footer *::-moz-selection{ background:#fff; color:var(--brand-dark); }