/* Habits First habit board (web port of the iOS medium widget). Sizes are
   the widget's own CSS px; scale the .hb-widget with transform if needed. */

.hb-widget {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  /* SF Rounded where the platform has it (Safari, iOS, macOS); the system
     UI face elsewhere. The widget itself is all SF Rounded. */
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
  user-select: none;
}

/* iOS 27's liquid glass rim, measured off a 15 Pro: 1px white at 44%
   along the top edge and 37% along the bottom, fading out round the
   corners, gone down the sides. conic-gradient starts at the top and runs
   clockwise (SwiftUI's angular gradient starts at 3 o'clock; the stops
   below are the same ones shifted by 90deg). */
.hb-widget.hb-rim::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 90deg,
    rgba(255,255,255,0) 0deg 28.8deg,
    rgba(255,255,255,0.37) 57.6deg 122.4deg,
    rgba(255,255,255,0) 151.2deg 208.8deg,
    rgba(255,255,255,0.44) 237.6deg 302.4deg,
    rgba(255,255,255,0) 331.2deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.hb-content { position: absolute; }

.hb-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hb-glyph { display: inline-flex; align-items: center; height: 15px; }
.hb-glyph svg { display: block; }
.hb-emoji { font-size: 15px; }
.hb-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-streak {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.hb-spacer { flex: 1 1 4px; min-width: 4px; }
.hb-check {
  width: 78px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
.hb-check svg { display: block; }
.hb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 78px;
  padding: 7px 0;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  flex: 0 0 auto;
}
.hb-pill svg { display: block; }

.hb-grid { display: flex; align-items: flex-start; }
.hb-labels { display: flex; flex-direction: column; }
.hb-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 500;
}
.hb-cols { display: flex; }
.hb-col { display: flex; flex-direction: column; }
.hb-cell { position: relative; box-sizing: border-box; }
.hb-cell .hb-x { position: absolute; inset: 0; display: block; }

.hb-stamp {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- The Android board ('android' chrome): the app's face, in its own font. ---- */

/* Nunito (SIL OFL), the variable file the Android app ships in res/font. */
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: block;
}
.hb-widget.hb-android {
  font-family: "Nunito", system-ui, Roboto, sans-serif;
}
.hb-aglyph { display: inline-flex; align-items: center; justify-content: center; }
.hb-aglyph svg { display: block; }
.hb-aname {
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-astreak {
  box-sizing: border-box;
  height: 17px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  white-space: nowrap;
  text-align: center;
}
.hb-astats {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-apill {
  box-sizing: border-box;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.hb-apill svg, .hb-acheck svg { display: block; }
.hb-acheck { display: inline-flex; }
.hb-alabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.hb-astamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}