/* Library v1.0.5: native metadata is NEVER made into a bookmark container.
   The bookmark is a sibling and cannot participate in metadata flex layout. */
body.single-post .ttl-bookmark-row,
body.ctt-category-reader .ttl-bookmark-row {
  display:flex!important;
  width:100%!important;
  min-height:24px!important;
  align-items:center!important;
  justify-content:center!important;
  margin:4px auto -8px!important;
  padding:0!important;
  float:none!important;
  clear:both!important;
  border:0!important;
  box-sizing:border-box!important;
}
.ttl-bookmark-row::before,.ttl-bookmark-row::after { content:none!important; display:none!important; }
.ttl-bookmark-row .ttl-bookmark { position:static!important; transform:none!important; margin:0!important; float:none!important; }
.ttl-bookmark,.ttl-launch { display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:#111; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ttl-bookmark { width:26px; height:26px; line-height:1; }
.ttl-bookmark svg { width:16px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; transition: fill .15s ease,stroke .15s ease; }
.ttl-bookmark[aria-pressed="true"] svg { fill:#228b22; stroke:#228b22; }
.ttl-bookmark:focus-visible,.ttl-launch:focus-visible,.ttl-close:focus-visible { outline:2px solid #228b22; outline-offset:3px; }
/* Library menu button matches Three Times Search rather than changing masthead sizing. */
.ctt-masthead-panel > button.ttl-launch { appearance:none!important; -webkit-appearance:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; align-self:center!important; flex:0 0 16px!important; width:16px!important; height:16px!important; min-width:16px!important; min-height:0!important; padding:0!important; margin:0!important; line-height:1!important; border:0!important; box-shadow:none!important; background:transparent!important; color:#555!important; vertical-align:middle!important; transform:translateY(-1px)!important; }

.ttl-launch svg { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.ttl-overlay[hidden] { display:none!important; }
.ttl-overlay { position:fixed; z-index:2147483000; inset:0; background:#fff; color:#111; overflow:auto; padding:max(24px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); box-sizing:border-box; }
.ttl-overlay * { box-sizing:border-box; }
.ttl-inner { max-width:760px; margin:0 auto; }
.ttl-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:45px; }
.ttl-heading { font-size:17px; font-weight:500; letter-spacing:.08em; margin:0; }
.ttl-close { appearance:none; border:0; background:none; font-size:28px; font-weight:300; line-height:1; width:44px; height:44px; cursor:pointer; color:inherit; }
.ttl-empty { font-size:14px; color:#777; padding:24px 0; line-height:1.6; }
.ttl-entry { border-bottom:1px solid #e5e5e5; padding:19px 0; display:flex; gap:12px; justify-content:space-between; align-items:center; }
.ttl-entry a { text-decoration:none!important; color:inherit!important; font-size:19px; line-height:1.35; display:block; }
.ttl-entry a:hover { text-decoration:underline!important; }
.ttl-entry small { color:#777; font-size:11px; margin-top:7px; display:block; letter-spacing:.03em; }
.ttl-remove { border:0; background:transparent; color:#777; font-size:12px; cursor:pointer; flex:none; padding:10px; }
.ttl-remove:hover { color:#111; }
body.ttl-open { overflow:hidden!important; }
@media (prefers-reduced-motion:reduce) { .ttl-bookmark svg { transition:none; } }



/* v1.0.6: editorial interaction row only on individual/loaded stories. */
body.single-post .ttl-bookmark-row.ttl-actions,
body.ctt-category-reader .ttl-bookmark-row.ttl-actions {
  display:flex!important;justify-content:center!important;align-items:center!important;
  width:100%!important;gap:32px!important;min-height:32px!important;
  margin:9px auto 8px!important; padding:0!important;
}
.ttl-actions button {appearance:none!important;border:0!important;background:none!important;box-shadow:none!important;padding:4px!important;margin:0!important;cursor:pointer;color:#111!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;font-size:11px!important;line-height:1.2!important;font-family:inherit!important;}
.ttl-actions .ttl-action-like svg,.ttl-actions .ttl-action-comment svg {width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.ttl-actions .ttl-action-like.is-liked svg {fill:#cf2634;stroke:#cf2634;}
.ttl-actions .ttl-bookmark svg {width:16px;height:19px;}
/* Preserve native engagement view counts and original script state, but move
   the visible like affordance to the interaction row. */
body.single-post .ctt-single-meta .ctt-engagement .ctt-like-button,
body.single-post .ctt-endless-post__meta .ctt-engagement .ctt-like-button,
body.ctt-category-reader .ctt-endless-post__meta .ctt-engagement .ctt-like-button {display:none!important;}
/* Avoid the now-empty engagement wrapper's leading separator. */
body.single-post .ctt-single-meta .ctt-engagement::before,
body.single-post .ctt-endless-post__meta .ctt-engagement::before,
body.ctt-category-reader .ctt-endless-post__meta .ctt-engagement::before {content:none!important;display:none!important;}


/* v1.0.7: one separator between the date and view count after moving likes
   into the separate action row. Keep the theme's view-count separator. */
body.single-post .qodef-blog.qodef--single .ctt-single-meta.ttl-meta .ctt-engagement::before,
body.single-post .ctt-endless-post__meta.ttl-meta .ctt-engagement::before,
body.ctt-category-reader .ctt-endless-post__meta.ttl-meta .ctt-engagement::before {
  content:none!important;
  display:none!important;
}

/* Equal breathing room around the action row, with a rule that inherits the
   existing article card's border color and the same content inset. */
body.single-post .ttl-bookmark-row.ttl-actions,
body.ctt-category-reader .ttl-bookmark-row.ttl-actions {
  position:relative!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-height:0!important;
  margin:12px auto 0!important;
  padding:0 0 16px!important;
  border:0!important;
}
body.single-post .ttl-bookmark-row.ttl-actions::after,
body.ctt-category-reader .ttl-bookmark-row.ttl-actions::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:34px!important;
  right:34px!important;
  bottom:0!important;
  height:0!important;
  border-bottom:1px solid var(--ctt-rule,#e5e5e5)!important;
  pointer-events:none!important;
}
@media(max-width:900px){
  body.single-post .ttl-bookmark-row.ttl-actions::after,
  body.ctt-category-reader .ttl-bookmark-row.ttl-actions::after {
    left:18px!important;
    right:18px!important;
  }
}

/* v1.0.8: Divider reaches the full width of the interaction row. */
body.single-post .ttl-bookmark-row.ttl-actions::after,
body.ctt-category-reader .ttl-bookmark-row.ttl-actions::after {
  left:0!important;
  right:0!important;
}
@media (max-width:900px) {
  body.single-post .ttl-bookmark-row.ttl-actions::after,
  body.ctt-category-reader .ttl-bookmark-row.ttl-actions::after {
    left:0!important;
    right:0!important;
  }
}

/* v1.0.9: Divider spans the card width, not just the inner content area.
   Regular posts nest the interaction row inside a padded text container;
   endless articles place it directly inside the card. */
body.single-post .ttl-bookmark-row.ttl-actions.ttl-actions--single::after {
  left:-34px!important;
  right:-34px!important;
}
body.single-post .ttl-bookmark-row.ttl-actions.ttl-actions--endless::after,
body.ctt-category-reader .ttl-bookmark-row.ttl-actions.ttl-actions--endless::after {
  left:0!important;
  right:0!important;
}
@media(max-width:900px){
  body.single-post .ttl-bookmark-row.ttl-actions.ttl-actions--single::after {
    left:-18px!important;
    right:-18px!important;
  }
}
/* Match the bookmark's immediate visual response, with a brief tap cue. */
.ttl-actions .ttl-action-like svg {
  transition:fill .15s ease,stroke .15s ease,transform .15s ease;
  transform-origin:center;
}
.ttl-actions .ttl-action-like.ttl-just-liked svg {transform:scale(1.13)}
@media(prefers-reduced-motion:reduce){.ttl-actions .ttl-action-like svg{transition:none!important}}

/* v1.0.11: consistent quick heart feedback, including the unliked state. */
.ttl-actions .ttl-action-like svg {transform-origin:50% 50%;transition:fill .12s ease,stroke .12s ease;}
.ttl-actions .ttl-action-like.ttl-just-liked svg {animation:ttl-heart-tap .23s ease-out both;}
@keyframes ttl-heart-tap {
  0% {transform:scale(1)}
  40% {transform:scale(1.16)}
  100% {transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
 .ttl-actions .ttl-action-like.ttl-just-liked svg {animation:none!important;}
}

/* v1.1.0: quiet reading-history tabs and inline progress (no popups). */
.ttl-tabs{display:flex;gap:25px;border-bottom:1px solid #e5e5e5;margin:-15px 0 18px;}
.ttl-tabs button{appearance:none;border:0;border-bottom:2px solid transparent;background:none;color:#777;font:inherit;font-size:11px;letter-spacing:.06em;padding:13px 0;cursor:pointer;white-space:nowrap;}
.ttl-tabs button.is-active{color:#111;border-bottom-color:#111;}
.ttl-tabs button:focus-visible{outline:2px solid #111;outline-offset:2px;}
.ttl-history-info{min-width:0;flex:1;}
.ttl-progress{height:3px;background:#e8e8e8;border-radius:2px;overflow:hidden;margin-top:12px;max-width:300px;}
.ttl-progress span{display:block;height:100%;background:#111;}
@media(max-width:420px){.ttl-tabs{gap:18px}.ttl-tabs button{font-size:10px}.ttl-heading{font-size:15px}}