/* ==============================
   Read Time Machine — Presets v2
   ============================== */

.rtm-read-time{
  /* You can change these to match your brand */
  --rtm-accent: #243C7F;
  --rtm-accent-2: #FFCA08;

  --rtm-text: #1a1a1a;
  --rtm-muted: rgba(26,26,26,.72);

  --rtm-soft: rgba(36,60,127,.10);
  --rtm-border: rgba(36,60,127,.22);

  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.5;
}

.rtm-read-time .rtm-num{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* ---- MINIMAL: clean + accent bar + subtle fade ---- */
.rtm-read-time.rtm-style--minimal{
  display:flex;
  align-items:center;
  gap:.55em;

  padding: .22em .55em .22em 12px;
  border-left: 3px solid var(--rtm-accent);
  border-radius: 10px;

  color: var(--rtm-muted);
  background: linear-gradient(90deg, var(--rtm-soft), transparent 60%);
}

.rtm-read-time.rtm-style--minimal .rtm-num{
  color: var(--rtm-accent);
}

/* ---- INLINE: blends inside text (no block look) ---- */
.rtm-read-time.rtm-style--inline{
  display:inline;
  margin:0;
  padding:0;

  color: var(--rtm-muted);
  font-size: .95em;

  border-bottom: 1px dotted var(--rtm-border);
}

/* ---- BADGE: “tag” look (squared + solid + strong) ---- */
.rtm-read-time.rtm-style--badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.45em;

  padding:.28em .65em;
  border-radius: 8px;

  background: var(--rtm-accent);
  color:#fff;

  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 25px rgba(36,60,127,.22);
}

/* small dot like a tag punch */
.rtm-read-time.rtm-style--badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.75);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}

.rtm-read-time.rtm-style--badge .rtm-num{
  background: rgba(255,255,255,.16);
  padding: .05em .38em;
  border-radius: 6px;
}

/* ---- PILL: modern gradient + shine + softer look ---- */
.rtm-read-time.rtm-style--pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5em;

  padding:.36em .92em;
  border-radius: 999px;

  background: linear-gradient(90deg, #FFF1BD, var(--rtm-accent-2));
  color: var(--rtm-text);

  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(255,202,8,.22);
  overflow:hidden;
}

/* shine */
.rtm-read-time.rtm-style--pill::after{
  content:"";
  position:absolute;
  inset:-40% -10%;
  background: radial-gradient(circle at 18% 25%, rgba(255,255,255,.55), transparent 55%);
  transform: rotate(8deg);
  pointer-events:none;
}

.rtm-read-time.rtm-style--pill .rtm-num{
  color:#362871;
}



/* ---- MARKER: highlight lower half ---- */
.rtm-read-time.rtm-style--marker{
  background: linear-gradient(transparent 55%, var(--rtm-accent-2) 55%);
  border-radius: 2px;
}

/* ---- UNDERLINE: modern underline band ---- */
.rtm-read-time.rtm-style--underline{
  background-image: linear-gradient(var(--rtm-accent-2), var(--rtm-accent-2));
  background-size: 100% 4px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  padding-bottom: calc(.36em + 2px);
  border-radius: 0;
}

/* ---- OUTLINE: bordered style ---- */
.rtm-read-time.rtm-style--outline{
  background: transparent;
  border: 2px solid var(--rtm-accent-2);
}

/* ---- BAR: left accent bar ---- */
.rtm-read-time.rtm-style--bar{
  background: transparent;
  border-left: 6px solid var(--rtm-accent);
  padding-left: calc(.92em + 6px);
  border-radius: 0;
}

/* ---- GRADIENT: strong gradient box ---- */
.rtm-read-time.rtm-style--gradient{
  background: linear-gradient(90deg, var(--rtm-accent), var(--rtm-accent-2));
  color: var(--rtm-text);
}

/* ---- Mobile tweaks ---- */
@media (max-width: 600px){
  .rtm-read-time.rtm-style--badge,
  .rtm-read-time.rtm-style--pill{
    padding:.26em .65em;
  }
  .rtm-read-time.rtm-style--minimal{
    padding-left:10px;
  }
}

/* ---- Optional dark mode ---- */
@media (prefers-color-scheme: dark){
  .rtm-read-time{
    --rtm-text:#f3f4f6;
    --rtm-muted:rgba(243,244,246,.78);
    --rtm-soft: rgba(255,255,255,.08);
    --rtm-border: rgba(255,255,255,.22);
  }
  .rtm-read-time.rtm-style--badge{
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
  }
  .rtm-read-time.rtm-style--pill{
    border-color: rgba(255,255,255,.10);
  }
}