/* =========================================================
   COLOMBIA · DÍA A DÍA
   Nueva identidad — app cívica cálida
   ========================================================= */

:root{
  --navy:#10233f;
  --navy-soft:#183657;

  --paper:#f7f5ef;
  --paper-2:#fbfaf6;
  --white:#ffffff;

  --text:#172131;
  --muted:#697485;
  --muted-2:#85909d;

  --yellow:#f4c542;
  --yellow-soft:#fff3bd;

  --blue-soft:#e8f2f8;
  --rose-soft:#f5ebee;
  --gray-soft:#eef0ef;

  --government:#4d7891;
  --opposition:#876974;
  --state:#697783;

  --border:#e6e2d9;

  --shadow:
    0 12px 34px rgba(25,35,50,.07);

  --shadow-soft:
    0 6px 18px rgba(25,35,50,.05);

  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}


/* RESET */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--text);

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(244,197,66,.11),
      transparent 25rem
    ),
    radial-gradient(
      circle at 100% 18%,
      rgba(77,120,145,.08),
      transparent 28rem
    ),
    var(--paper);

  padding-bottom:90px;
}

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:40;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;

  padding:
    calc(11px + env(safe-area-inset-top))
    16px
    11px;

  background:
    rgba(247,245,239,.92);

  border-bottom:
    1px solid rgba(210,205,195,.65);

  backdrop-filter:
    blur(18px);
}


.brand{
  display:flex;
  align-items:center;
  gap:10px;

  text-decoration:none;
  color:var(--navy);

  min-width:0;
}


.brand-symbol{
  position:relative;

  width:38px;
  height:38px;

  background:var(--navy);

  border-radius:13px;

  flex:0 0 auto;

  box-shadow:
    0 5px 14px rgba(16,35,63,.15);
}


.brand-symbol span{
  position:absolute;
  border-radius:50%;
}

.brand-yellow{
  width:10px;
  height:10px;
  background:var(--yellow);

  left:8px;
  top:8px;
}

.brand-blue{
  width:9px;
  height:9px;
  background:#4aa3df;

  right:8px;
  top:11px;
}

.brand-red{
  width:9px;
  height:9px;
  background:#cf4c5d;

  left:15px;
  bottom:8px;
}


.brand-copy{
  display:grid;
  line-height:1.03;
}

.brand-copy strong{
  font-size:.79rem;
  letter-spacing:.08em;
  font-weight:800;
}

.brand-copy span{
  margin-top:3px;

  font-size:.64rem;
  letter-spacing:.17em;
  font-weight:700;

  color:var(--muted);
}


.top-actions{
  display:flex;
  align-items:center;
  gap:6px;

  flex:0 0 auto;
}


.top-support-btn{
  border:0;

  border-radius:999px;

  padding:9px 12px;

  background:var(--yellow);
  color:var(--navy);

  font-size:.71rem;
  font-weight:800;

  box-shadow:
    0 5px 15px rgba(190,145,15,.15);
}


.round-icon-btn{
  width:39px;
  height:39px;

  border:0;
  border-radius:50%;

  display:grid;
  place-items:center;

  background:
    rgba(255,255,255,.72);

  color:var(--navy);

  font-size:1.25rem;

  border:
    1px solid rgba(210,205,195,.7);
}


/* =========================================================
   MAIN
   ========================================================= */

main{
  width:min(100%,780px);

  margin:0 auto;

  padding:
    18px
    14px
    38px;
}


/* =========================================================
   HERO
   ========================================================= */

.welcome-card{
  position:relative;

  min-height:265px;

  overflow:hidden;

  display:flex;
  align-items:flex-end;

  padding:
    30px
    24px
    25px;

  border-radius:var(--radius-xl);

  background:
    linear-gradient(
      145deg,
      #10233f 0%,
      #173454 58%,
      #21486c 100%
    );

  color:white;

  box-shadow:
    0 18px 44px rgba(16,35,63,.18);
}


.welcome-content{
  position:relative;
  z-index:3;

  width:100%;
}


.welcome-kicker{
  margin:0 0 11px;

  font-size:.67rem;

  font-weight:800;
  letter-spacing:.13em;

  color:#dce8f2;
}


.welcome-card h1{
  max-width:600px;

  margin:0;

  font-size:
    clamp(2rem,7vw,3rem);

  line-height:1.05;

  letter-spacing:-.045em;
}


.welcome-date{
  margin:
    11px
    0
    0;

  font-size:1.02rem;
  font-weight:650;

  color:#f5f8fa;
}


.welcome-text{
  margin:
    10px
    0
    20px;

  max-width:440px;

  font-size:.9rem;

  line-height:1.55;

  color:#d8e3ec;
}


.welcome-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:9px;
}


.soft-btn{
  border:
    1px solid rgba(255,255,255,.28);

  border-radius:999px;

  padding:
    10px
    14px;

  background:
    rgba(255,255,255,.09);

  color:white;

  font-size:.73rem;
  font-weight:750;

  backdrop-filter:blur(8px);
}


.verified-note{
  font-size:.7rem;

  color:#d8e5ed;

  padding:
    8px
    0;
}


/* DECORACIONES */

.welcome-decoration{
  position:absolute;

  border-radius:50%;

  pointer-events:none;
}


.decoration-a{
  width:155px;
  height:155px;

  right:-53px;
  top:-52px;

  background:
    rgba(244,197,66,.95);
}


.decoration-b{
  width:103px;
  height:103px;

  right:40px;
  top:-61px;

  border:
    25px solid rgba(74,163,223,.65);
}


.decoration-c{
  width:48px;
  height:48px;

  right:48px;
  top:84px;

  background:
    rgba(207,76,93,.88);
}


/* =========================================================
   COMMON
   ========================================================= */

.section-kicker{
  display:block;

  margin-bottom:6px;

  font-size:.65rem;

  letter-spacing:.13em;

  font-weight:800;

  color:var(--muted);
}

.section-kicker.light{
  color:#c6d8e6;
}


.section-heading{
  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  gap:14px;

  margin-bottom:15px;
}


.section-heading h2{
  margin:0;

  font-size:1.33rem;
  line-height:1.18;

  letter-spacing:-.025em;
}


/* =========================================================
   BRIEF
   ========================================================= */

.brief-card{
  margin-top:15px;

  border-radius:var(--radius-xl);

  padding:22px;

  background:
    linear-gradient(
      135deg,
      #173454,
      #21496d
    );

  color:white;

  box-shadow:
    var(--shadow);
}


.brief-top{
  display:flex;
  align-items:center;
  gap:14px;
}


.brief-icon{
  width:45px;
  height:45px;

  display:grid;
  place-content:center;

  gap:3px;

  flex:0 0 auto;

  border-radius:15px;

  background:
    rgba(255,255,255,.09);
}


.brief-icon span{
  display:block;

  height:3px;

  border-radius:5px;

  background:var(--yellow);
}

.brief-icon span:nth-child(1){
  width:20px;
}

.brief-icon span:nth-child(2){
  width:13px;
}

.brief-icon span:nth-child(3){
  width:17px;
}


.brief-card h2{
  margin:0;

  font-size:1.22rem;

  letter-spacing:-.025em;
}


.brief-card > p{
  margin:
    15px
    0
    18px;

  color:#d5e1ea;

  font-size:.86rem;
  line-height:1.55;
}


.brief-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:12px;
}


.brief-meta > span{
  font-size:.72rem;
  color:#becfdb;
}


.brief-btn{
  border:0;

  padding:
    10px
    13px;

  border-radius:999px;

  background:var(--yellow);

  color:var(--navy);

  font-size:.72rem;
  font-weight:800;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.day-overview{
  margin-top:30px;
}


.day-total{
  padding:
    7px
    10px;

  border-radius:999px;

  background:#ebe8df;

  font-size:.68rem;
  font-weight:700;

  color:var(--muted);
}


.overview-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:9px;
}


.overview-card{
  min-width:0;

  display:grid;

  justify-items:start;

  border:
    1px solid var(--border);

  border-radius:20px;

  padding:
    14px
    12px;

  text-align:left;

  box-shadow:
    var(--shadow-soft);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.overview-card:active{
  transform:
    scale(.975);
}


.government-card{
  background:
    linear-gradient(
      155deg,
      #f9fcfd,
      var(--blue-soft)
    );
}


.opposition-card{
  background:
    linear-gradient(
      155deg,
      #fff,
      var(--rose-soft)
    );
}


.state-card{
  background:
    linear-gradient(
      155deg,
      #fff,
      var(--gray-soft)
    );
}


.overview-symbol{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:10px;

  margin-bottom:16px;

  font-size:.68rem;
  font-weight:800;
}


.government-card .overview-symbol{
  color:#3f718d;
  background:#daeaf3;
}


.opposition-card .overview-symbol{
  color:#7c5965;
  background:#ecdde2;
}


.state-card .overview-symbol{
  color:#5b6772;
  background:#e3e6e7;
}


.overview-name{
  max-width:100%;

  margin-bottom:5px;

  font-size:.69rem;
  font-weight:750;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


.overview-card strong{
  font-size:1.3rem;

  line-height:1;
}


.overview-card small{
  margin-top:3px;

  font-size:.62rem;

  color:var(--muted);
}


/* =========================================================
   ENTIENDE
   ========================================================= */

.understand-strip{
  margin-top:30px;

  border:
    1px solid #e2ddd1;

  border-radius:var(--radius-xl);

  padding:20px;

  background:
    linear-gradient(
      145deg,
      #fffdf6,
      #fff8db
    );
}


.understand-copy h2{
  margin:0 0 6px;

  font-size:1.08rem;
  line-height:1.3;
}


.understand-copy p{
  margin:0;

  color:var(--muted);

  font-size:.8rem;
  line-height:1.5;
}


.term-chips{
  display:flex;
  gap:8px;

  flex-wrap:wrap;

  margin-top:15px;
}


.term-chip{
  border:
    1px solid rgba(185,160,70,.25);

  border-radius:999px;

  padding:
    8px
    10px;

  background:white;

  color:#61583b;

  font-size:.7rem;
  font-weight:700;
}


/* =========================================================
   EVENTOS
   ========================================================= */

.events-section{
  margin-top:34px;
}


.view-all-btn{
  border:0;

  padding:
    7px
    10px;

  border-radius:999px;

  background:#ece9e1;

  color:var(--navy);

  font-size:.67rem;
  font-weight:750;
}


.events-feed{
  display:grid;
  gap:20px;
}


/* GROUP */

.group-block{
  display:grid;
  gap:11px;
}


.group-heading{
  display:flex;
  align-items:center;

  gap:9px;

  padding:
    0
    3px;
}


.group-dot{
  width:9px;
  height:9px;

  border-radius:50%;
}


.group-government .group-dot{
  background:var(--government);
}

.group-opposition .group-dot{
  background:var(--opposition);
}

.group-state .group-dot{
  background:var(--state);
}


.group-heading strong{
  font-size:.71rem;

  letter-spacing:.11em;
}


.group-government .group-heading strong{
  color:var(--government);
}

.group-opposition .group-heading strong{
  color:var(--opposition);
}

.group-state .group-heading strong{
  color:var(--state);
}


.group-count{
  margin-left:auto;

  font-size:.65rem;
  color:var(--muted-2);
}


/* EMPTY */

.empty-group{
  border:
    1px dashed #dad6cc;

  border-radius:18px;

  padding:17px;

  background:
    rgba(255,255,255,.4);

  color:var(--muted);

  font-size:.78rem;
  line-height:1.5;
}


/* EVENT CARD */

.event-card{
  position:relative;

  overflow:hidden;

  border:
    1px solid var(--border);

  border-radius:var(--radius-lg);

  padding:
    17px
    17px
    15px;

  background:
    rgba(255,255,255,.88);

  box-shadow:
    var(--shadow-soft);

  transition:
    transform .18s ease,
    box-shadow .18s ease;

  animation:
    cardIn .3s ease both;
}


.event-card::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:4px;

  background:#d7dadd;
}


.event-card[data-group="government"]::before{
  background:
    var(--government);
}


.event-card[data-group="opposition"]::before{
  background:
    var(--opposition);
}


.event-card[data-group="state"]::before{
  background:
    var(--state);
}


.card-topline{
  display:flex;

  align-items:center;

  gap:7px;

  flex-wrap:wrap;

  margin-bottom:9px;
}


.category-label{
  font-size:.62rem;

  letter-spacing:.08em;

  font-weight:800;

  color:var(--muted);
}


.importance-pill{
  border-radius:999px;

  padding:
    5px
    7px;

  background:
    var(--yellow-soft);

  color:#6e5a14;

  font-size:.57rem;
  font-weight:800;

  letter-spacing:.06em;
}


.status-pill{
  margin-left:auto;

  max-width:55%;

  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;

  border-radius:999px;

  padding:
    5px
    7px;

  background:#eef1f4;

  color:#596678;

  font-size:.57rem;
  font-weight:750;
}


.event-card h3{
  margin:
    0
    0
    9px;

  font-size:1rem;

  line-height:1.35;

  letter-spacing:-.015em;
}


.event-summary{
  margin:0;

  color:#535f6e;

  font-size:.84rem;

  line-height:1.58;
}


.glossary-term{
  border:0;

  padding:0;

  background:transparent;

  color:inherit;

  font:inherit;
  font-weight:650;

  border-bottom:
    1px dotted #6f8290;

  cursor:help;
}


.why-box{
  margin-top:13px;

  border-radius:14px;

  padding:
    11px
    12px;

  background:#f8f4e6;
}


.why-box strong{
  display:block;

  margin-bottom:4px;

  font-size:.65rem;

  color:#6b5c2d;

  letter-spacing:.07em;
}


.why-box p{
  margin:0;

  color:#685f47;

  font-size:.76rem;

  line-height:1.5;
}


.card-actions{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-top:14px;

  padding-top:12px;

  border-top:
    1px solid #ece9e2;
}


.source-link{
  min-width:0;

  overflow:hidden;

  text-overflow:ellipsis;
  white-space:nowrap;

  color:#356d93;

  text-decoration:none;

  font-size:.7rem;
  font-weight:750;
}


.details-btn{
  flex:0 0 auto;

  border:0;

  background:transparent;

  color:var(--navy);

  font-size:.7rem;
  font-weight:800;
}


.details{
  display:none;

  margin-top:13px;

  padding-top:13px;

  border-top:
    1px solid #ece9e2;

  animation:
    detailIn .2s ease;
}


.details.open{
  display:block;
}


.detail-label{
  margin:
    0
    0
    8px;

  font-size:.62rem;

  font-weight:800;
  letter-spacing:.09em;

  color:var(--navy);
}


.details ul{
  margin:0;

  padding-left:18px;

  color:#596575;

  font-size:.75rem;

  line-height:1.55;
}


.secondary-sources{
  display:grid;

  gap:7px;

  margin-top:13px;
}


.secondary-sources a{
  color:#356d93;

  text-decoration:none;

  font-size:.73rem;
  line-height:1.35;
}


.note-box{
  margin-top:12px;

  padding:11px;

  border-radius:12px;

  background:#f4f5f4;

  color:#59636d;

  font-size:.73rem;
  line-height:1.5;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.support-card{
  margin:
    35px
    0
    8px;

  display:grid;

  gap:17px;

  padding:22px;

  border-radius:var(--radius-xl);

  background:
    linear-gradient(
      145deg,
      #fff3b5,
      #fff8d7
    );

  border:
    1px solid #eadc97;
}


.support-card h2{
  margin:
    0
    0
    7px;

  font-size:1.13rem;
}


.support-card p{
  margin:0;

  color:#625b43;

  font-size:.8rem;
  line-height:1.55;
}


.support-btn,
.primary-btn{
  border:0;

  border-radius:14px;

  padding:
    12px
    15px;

  background:var(--navy);

  color:white;

  font-weight:800;
}


.support-btn{
  justify-self:start;

  background:var(--yellow);

  color:var(--navy);
}


/* =========================================================
   BOTTOM NAV
   ========================================================= */

.bottom-nav{
  position:fixed;

  z-index:60;

  left:0;
  right:0;
  bottom:0;

  min-height:72px;

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  padding-bottom:
    env(safe-area-inset-bottom);

  background:
    rgba(252,251,247,.96);

  border-top:
    1px solid #dedad0;

  backdrop-filter:
    blur(15px);
}


.nav-item{
  position:relative;

  border:0;

  background:transparent;

  display:grid;

  place-items:center;
  align-content:center;

  gap:3px;

  color:#858d97;

  font-size:.61rem;
  font-weight:700;
}


.nav-icon{
  font-size:1rem;
}


.nav-item.active{
  color:var(--navy);
}


.nav-item.active::before{
  content:"";

  position:absolute;

  top:0;

  width:26px;
  height:3px;

  border-radius:
    0
    0
    5px
    5px;

  background:var(--yellow);
}


/* =========================================================
   DIALOGS
   ========================================================= */

dialog{
  width:
    min(92vw,540px);

  max-height:90vh;

  border:0;

  padding:0;

  background:transparent;

  overflow:visible;
}


dialog::backdrop{
  background:
    rgba(7,17,29,.48);

  backdrop-filter:
    blur(4px);
}


.dialog-card{
  max-height:88vh;

  overflow:auto;

  padding:20px;

  border-radius:25px;

  background:var(--paper-2);

  box-shadow:
    0 25px 75px rgba(0,0,0,.22);
}


.large-dialog{
  max-height:88vh;
}


.dialog-head{
  display:flex;

  justify-content:space-between;
  align-items:flex-start;

  gap:14px;
}


.dialog-head h3{
  margin:
    0
    0
    16px;

  font-size:1.15rem;

  line-height:1.3;
}


.close-btn{
  border:0;

  background:transparent;

  color:#677381;

  font-size:1.6rem;
}


input[type="search"],
input[type="date"]{
  width:100%;

  border:
    1px solid #d9d5cb;

  border-radius:14px;

  padding:
    13px
    14px;

  background:white;

  color:var(--text);

  outline:none;
}


input:focus{
  border-color:#7fa4be;

  box-shadow:
    0 0 0 3px rgba(77,120,145,.1);
}


.primary-btn{
  width:100%;

  margin-top:12px;
}


.helper{
  color:var(--muted);

  font-size:.71rem;

  line-height:1.5;
}


/* SEARCH */

.search-results,
.glossary-results{
  display:grid;

  gap:8px;

  margin-top:12px;
}


.search-hit,
.glossary-hit{
  width:100%;

  border:
    1px solid #e5e1d7;

  border-radius:14px;

  padding:12px;

  background:white;

  text-align:left;
}


.search-hit strong,
.glossary-hit strong{
  display:block;

  margin-bottom:4px;

  font-size:.82rem;
}


.search-hit span,
.glossary-hit span{
  color:var(--muted);

  font-size:.7rem;
  line-height:1.45;
}


/* BRIEF */

.brief-results{
  display:grid;

  gap:10px;
}


.brief-result{
  display:grid;

  grid-template-columns:
    28px
    1fr;

  gap:11px;

  padding:
    13px
    0;

  border-bottom:
    1px solid #e5e0d6;
}


.brief-number{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:var(--navy);

  color:white;

  font-size:.7rem;
  font-weight:800;
}


.brief-result h4{
  margin:
    0
    0
    5px;

  font-size:.86rem;

  line-height:1.4;
}


.brief-result p{
  margin:0;

  color:var(--muted);

  font-size:.74rem;

  line-height:1.5;
}


/* TERM */

.definition-card{
  border:
    1px solid #eadfa9;

  border-radius:17px;

  padding:15px;

  background:#fff8d9;
}


.definition-label{
  font-size:.62rem;

  letter-spacing:.09em;

  font-weight:800;

  color:#6b5c2d;
}


.definition-card p{
  margin:
    8px
    0
    0;

  color:#5d5642;

  font-size:.82rem;

  line-height:1.6;
}


/* SUPPORT DIALOG */

.support-intro{
  margin:
    0
    0
    15px;

  color:var(--muted);

  font-size:.8rem;

  line-height:1.55;
}


.qr-wrap{
  display:flex;

  justify-content:center;

  margin:
    10px
    0
    14px;

  padding:10px;

  background:white;

  border:
    1px solid #e0ddd4;

  border-radius:18px;
}


.support-qr{
  display:block;

  width:
    min(100%,340px);

  height:auto;

  border-radius:12px;
}


.key-box{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:center;

  gap:
    5px
    12px;

  padding:14px;

  background:white;

  border:
    1px solid #e0ddd4;

  border-radius:15px;
}


.key-label{
  grid-column:1/3;

  font-size:.62rem;

  font-weight:800;

  letter-spacing:.1em;

  color:var(--muted);
}


.key-box strong{
  font-size:1.16rem;

  letter-spacing:.04em;

  color:var(--navy);
}


.copy-key-btn{
  border:0;

  border-radius:10px;

  padding:
    9px
    11px;

  background:var(--navy);

  color:white;

  font-size:.7rem;

  font-weight:800;
}


.copy-status{
  min-height:1.2em;

  margin:
    8px
    2px
    0;

  color:#3b718d;

  font-size:.7rem;

  font-weight:700;
}


/* =========================================================
   HISTORICAL MODE
   ========================================================= */

body.history-mode .welcome-card{
  min-height:220px;

  background:
    linear-gradient(
      145deg,
      #27374d,
      #344b67
    );
}


body.history-mode .brief-card{
  display:none;
}


body.history-mode .day-overview{
  margin-top:22px;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes cardIn{
  from{
    opacity:0;
    transform:translateY(6px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}


@keyframes detailIn{
  from{
    opacity:0;
    transform:translateY(-3px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:430px){

  .topbar{
    padding-left:13px;
    padding-right:10px;
  }

  .brand-copy strong{
    font-size:.72rem;
  }

  .brand-copy span{
    font-size:.57rem;
  }

  .brand-symbol{
    width:35px;
    height:35px;
  }

  .top-support-btn{
    padding:
      8px
      9px;

    font-size:.64rem;
  }

  .round-icon-btn{
    width:36px;
    height:36px;
  }

  main{
    padding-left:12px;
    padding-right:12px;
  }

  .welcome-card{
    padding:
      26px
      20px
      22px;
  }

  .overview-card{
    padding:
      13px
      9px;
  }

  .overview-name{
    font-size:.63rem;
  }

  .overview-card strong{
    font-size:1.15rem;
  }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media(min-width:700px){

  body{
    padding-bottom:0;
  }

  main{
    padding:
      25px
      24px
      40px;
  }

  .topbar{
    padding-left:
      max(20px,calc((100vw - 780px)/2));

    padding-right:
      max(20px,calc((100vw - 780px)/2));
  }

  .welcome-card{
    min-height:310px;

    padding:
      38px
      34px
      31px;
  }

  .brief-card{
    padding:25px;
  }

  .overview-card{
    padding:17px;
  }

  .bottom-nav{
    position:sticky;

    width:min(100%,780px);

    margin:0 auto;

    border-left:
      1px solid #dedad0;

    border-right:
      1px solid #dedad0;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible{
  outline:
    3px solid rgba(77,120,145,.28);

  outline-offset:2px;
}


@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }

}