/* ---------------------------------------------------------------------------
 * Cache-busted by WOOLIE_VERSION (woolie/settings.py). The token is stamped onto
 * this file's URL by woolie/storage.py, so there is no query string to write in
 * the template. If you EDIT this file, BUMP WOOLIE_VERSION - otherwise the URL is
 * byte-identical after the deploy and returning users keep the cached copy.
 * (The rollup bundles are keyed to woolie_frontend/package.json instead.)
 * ------------------------------------------------------------------------ */
/* woolie.css */
/*********************/
/* Woolie CSS        */
/*********************/

/* FONTS */
@font-face {
  font-family: "Cormorant";
  src: url("/static/woolie/assets/Cormorant-VariableFont.woff2") format('woff');
}

@font-face {
  font-family: "Geo";
  src: url("/static/woolie/assets/Geo-Regular.woff") format('woff');
}

@font-face {
  font-family: "PixelifySans-Reg";
  src: url("/static/woolie/assets/PixelifySans-Medium.woff") format('woff');
}

@font-face {
  font-family: "PixelifySans-Bold";
  src: url("/static/woolie/assets/PixelifySans-Bold.woff") format('woff');
  font-weight: bold;
}

@font-face {
  font-family: "SixtyFour";
  src: url("/static/woolie/assets/SixtyFour.woff") format('woff');
}

/*********************/
/* General Styles    */
/*********************/

/* Font tokens. --font-display is for what you read as a title (names, section titles,
   big numerals); --font-ui is for everything you operate. New work should use these
   rather than naming a family. --font-ui is today's body stack: when the site moves to
   Nunito, change it AND the body rule below together (planned in
   woolie-planning/plans/profile-pages-redesign-plan.md, "Future: site-wide typography").
   Fraunces is loaded only where it is used - the profile templates' extra_head - so
   --font-display falls back to Nunito anywhere else. */
:root {
  --font-display: "Fraunces", "Nunito", Georgia, serif;
  --font-ui: "Quicksand", "Nunito", "Verdana", sans-serif;
}

body {
/*
  background-color: #efefef;
  color: #020202;
*/
  font-family: "Quicksand", "Nunito", "Verdana",sans-serif;
  font-weight: 500;
  min-height: 100vh; /* Ensure body is at least viewport height */
  overflow-y: auto; /* Enable body scrolling */
  scroll-behavior: smooth;
  min-width: 375px;
}

/* to create a waiting cursor when some ajax is happening */
body.waiting * {
  cursor: progress;
}

.wool-block {
    display: block;
    overflow: visible; /* CHANGE: Visible to propagate overflow to body; no inner scrollbar */
    min-height: 100vh;
}

li {
 list-style-type: none;
}

[data-src]::before {
  content: '';
  display: block;
  padding-top: 56%;
}

/*********************/
/*  Custom Styles    */
/*********************/
#messagingBadge {
  font-family: "Nunito", "Quicksand", sans-serif;
  font-size: .75rem;
}

.mod-nav-badge {
  font-family: "Nunito", "Quicksand", sans-serif;
  font-size: .75rem;
}

/* Opacity-only pulse: compositor-only animation, no layout/paint cost per frame,
   and doesn't fight the badge's own `translate-middle` transform. */
.mod-badge-pulse {
  animation: mod-badge-pulse 1.8s ease-in-out infinite;
}

@keyframes mod-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .mod-badge-pulse {
    animation: none;
  }
}

.sidebar-left {
  position: fixed;
  top: 80px;
  bottom: 0;
  box-sizing: border-box;
  width: 240px !important;
  padding: 40px 40px 60px 40px;
  border-right: 1px #e5e5e5 solid;
  overflow: auto;
}

.bkgrdImg {
  background-image: url('/static/woolie/assets/pexels-andrebeltrame-1449462.jpg');
  background-size: cover;
}

.cover-image {
  background-image: url('/static/images/woolie_title_splash_web.jpg');
  background-size: cover;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

/* `color: inherit` is load-bearing - do not delete it as dead.

   This rule used to read `color: rgba(var(--bs-body-color),1)`, which looks broken and
   half is: --bs-body-color is a colour (#212529 / #dee2e6), not the RGB triplet rgba()
   wants. But a var() that fails only fails at COMPUTED-VALUE time, and such a
   declaration is not dropped from the cascade - it wins normally, then computes as if
   `unset` were specified. `color` is inherited, so it resolved to the inherited value:
   the body colour, which is what nav links are supposed to be.

   Deleting it therefore did not do nothing. It handed the cascade to Bootstrap's
   `.nav-link { color: var(--bs-nav-link-color) }`, and every nav item turned link-blue
   in dark mode. `inherit` states the same computed result the old line arrived at by
   accident. Active items are unaffected either way: `.nav-pills .nav-link.active`
   outranks this selector. */
.nav a, .nav button {
  color: inherit;
  font-size: 1.3rem;
}

svg.sidebar-logo-button > circle {
  stroke: var(--bs-body-color);
}

svg.sidebar-logo-button > path, svg.sidebar-logo > path {
  stroke: var(--bs-body-color);
  fill: var(--bs-body-color);
}

svg.sidebar-logo {
  width: 7rem;
  padding-left: .2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Main nav (templates/woolie/main_nav.html)

   The same markup serves three layouts:
     >= 1299px   full sidebar                            (this file)
     992-1298px  icon rail, labels visually hidden       (sidebars.css)
     < 992px     Bootstrap offcanvas menu, full labels   (this file + the touch block below)

   Approved from reviews/main-nav-preview.html (2026-09-12). Text, borders and hover
   derive from Bootstrap's variables. The accent is CARAMEL, taken from the post cards'
   own action/menu colour (#c4a882, post_card_shell.css) so the nav belongs to the warm
   card palette - the first pass used --bs-bluesky and it clashed with the brown cards
   in dark mode. Each mode has its own pair because one caramel can't be readable text
   on both a near-white and a near-black page. Ratios are WCAG, measured against the
   tint over the page (#faf8f5 light, #030303 dark).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Site accent tokens. Defined at the root so other pages can share the nav's caramel
   (the notifications page does - static/woolie/css/notifications.css) instead of
   copying hex values that would drift. */
:root,
[data-bs-theme="light"] {
  --wool-accent: #8a5a2b;                             /* 5.1:1 on the tint */
  --wool-accent-tint: rgba(196, 168, 130, 0.12);      /* #c4a882, the card accent */
  --wool-cta-bg: #259cda;                             /* white label: 3.1:1 - below AA, chosen by eye: reads better than the 5.8:1 dark label */
  --wool-cta-bg-hover: #1f86bc;                       /* darkens so the white label gains contrast */
  --wool-cta-fg: #fff;
  --wool-cta-glow: rgba(37, 156, 218, 0.28);
}

[data-bs-theme="dark"] {
  --wool-accent: #dcb888;                             /* 8.6:1 on the tint */
  --wool-accent-tint: rgba(196, 168, 130, 0.18);
  --wool-cta-bg: #259cda;                             /* same blue and white label in both modes */
  --wool-cta-bg-hover: #1f86bc;
  --wool-cta-fg: #fff;
  --wool-cta-glow: rgba(37, 156, 218, 0.22);
}

.vertical-main-nav {
  --nav-accent: var(--wool-accent);
  --nav-tint: var(--wool-accent-tint);
  --nav-hover: rgba(var(--bs-body-color-rgb), 0.06);
  --nav-muted: rgba(var(--bs-body-color-rgb), 0.72);
  --nav-group: rgba(var(--bs-body-color-rgb), 0.65);  /* 4.9:1 - small caps still need AA */
  --nav-cta-bg: var(--wool-cta-bg);
  --nav-cta-bg-hover: var(--wool-cta-bg-hover);
  --nav-cta-fg: var(--wool-cta-fg);
  --nav-cta-glow: var(--wool-cta-glow);
}

[data-bs-theme="dark"] .vertical-main-nav {
  --nav-hover: rgba(255, 255, 255, 0.07);
}

.vertical-main-nav .nav {
  gap: 0.125rem;
}

/* A link is a flex row: icon slot, then label.

   white-space:nowrap - without it a multi-word label ("Craft Alongs") gives the leftbar a
   min-content width of its longest single WORD, so a page with a wide main column
   squeezes the sidebar to that and the second word wraps (see flex-shrink on
   .wool-leftbar in sidebars.css).

   display:flex - whitespace-only text between flex items is not rendered, so template
   line breaks between icon and label never add a stray space; the label's ms-2 is the
   one gap.

   font-size beats the global `.nav a, .nav button { font-size: 1.3rem }` above. */
.vertical-main-nav .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--nav-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Explicit pointer cue on everything in the nav that does something. Anchors get it
   from the browser and buttons from Bootstrap's reboot, but stated here it survives a
   future <a> without href or a reset. The group labels are not interactive. */
.vertical-main-nav .nav-link,
.vertical-main-nav .navbar-brand {
  cursor: pointer;
}

.vertical-main-nav .nav-group-label {
  cursor: default;
}

.vertical-main-nav button.nav-link {
  width: 100%;
}

/* Every icon gets the same fixed-width slot and centres in it, so icons read as one
   column and every label starts at the same x. */
.vertical-main-nav .nav-link > .wicon {
  display: flex;
  flex: 0 0 1.75rem;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  transition: transform 0.15s ease;
}

.vertical-main-nav .wicon > svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* The Craft Alongs mitten (Font Awesome, the one non-Bootstrap icon). FA draws a glyph
   heavier than a Bootstrap Icon at the same size, so it runs a touch smaller. */
.vertical-main-nav .wicon > .fa-solid {
  font-size: 1.15rem;
}

/* Outline at rest, filled where you are. Icons without a pair carry neither class. */
.vertical-main-nav .wicon > .i-f,
.vertical-main-nav .nav-link.active .wicon > .i-o {
  display: none;
}

.vertical-main-nav .nav-link.active .wicon > .i-f {
  display: block;
}

.vertical-main-nav .nav-link:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px;
  box-shadow: none;
  color: var(--bs-emphasis-color);
}

/* Hover only where there is a real pointer: on touch, :hover sticks after a tap and
   would leave a tinted row behind as the next page loads. */
@media (hover: hover) {
  .vertical-main-nav .nav-link:hover {
    color: var(--bs-emphasis-color);
    background-color: var(--nav-hover);
  }

  .vertical-main-nav .nav-link:hover > .wicon {
    transform: translateX(2px);
  }
}

/* Active: a tint of the brand blue, accent text and a 3px bar - replaces Bootstrap's solid
   .nav-pills pill. The extra .nav outranks `.nav-pills .nav-link.active` and the hover
   rule without leaning on stylesheet order. */
.vertical-main-nav .nav .nav-link.active,
.vertical-main-nav .nav .nav-link.active:hover {
  font-weight: 600;
  color: var(--nav-accent);
  background-color: var(--nav-tint);
}

.vertical-main-nav .nav .nav-link.active::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: var(--nav-accent);
}

/* Unread badges: a ring in the page colour so they sit inset on the icon. */
.vertical-main-nav .badge {
  box-shadow: 0 0 0 2px var(--bs-body-bg);
}

/* Group labels (Discover / Community / You). */
.vertical-main-nav .nav-group-label {
  padding: 1rem 0.75rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-group);
}

.vertical-main-nav .nav-group-label.is-first {
  padding-top: 0.25rem;
}

/* Logout sits apart: spacing plus a short, faint rule instead of a full-width <hr>. */
.vertical-main-nav .nav-logout {
  position: relative;
  margin-top: 1rem;
  padding-top: 0.75rem;
}

.vertical-main-nav .nav-logout::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0.75rem;
  left: 0.75rem;
  border-top: 1px solid var(--bs-border-color);
}

/* Post: the one action, so it is a button rather than a destination. */
.vertical-main-nav .nav-post {
  margin-bottom: 0.75rem;
}

.vertical-main-nav .nav-post .nav-link,
.vertical-main-nav .nav .nav-post .nav-link.active {
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--nav-cta-fg);
  background-color: var(--nav-cta-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px var(--nav-cta-glow);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.vertical-main-nav .nav .nav-post .nav-link.active::before {
  content: none;
}

.vertical-main-nav .nav-post .nav-link > .wicon {
  flex-basis: auto;
  width: auto;
}

@media (hover: hover) {
  .vertical-main-nav .nav .nav-post .nav-link:hover {
    color: var(--nav-cta-fg);
    background-color: var(--nav-cta-bg-hover);
    transform: translateY(-1px);
  }

  .vertical-main-nav .nav-post .nav-link:hover > .wicon {
    transform: none;
  }
}

/* Offcanvas menu (< 992px, touch-first): rows grow to a 44px target and labels step up
   a little for reading at arm's length. Group labels and the Post button come along
   unchanged. */
@media (max-width: 991.98px) {
  .vertical-main-nav .nav-link {
    min-height: 2.75rem;
    padding-block: 0.625rem;
    font-size: 1.0625rem;
  }

  .vertical-main-nav .nav-post .nav-link {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vertical-main-nav .nav-link,
  .vertical-main-nav .nav-link > .wicon {
    transition: none;
  }

  .vertical-main-nav .nav-link:hover > .wicon,
  .vertical-main-nav .nav .nav-post .nav-link:hover {
    transform: none;
  }
}

.page-header {
  /* font-family: "Cormorant"; */
  font-weight: normal;
}

button.content-tab-title {
  font-size: .9em;
  font-weight: normal;
}

button.nav-link.content-tab-title.active {
  color: var(--bs-bluesky);
}

div.vpostcards {
  /* border: .05rem solid var(--bs-border-color);
  border-radius: 12px; */
  position:relative;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100% !important;
}

div.vpostcards.svelte {
  height: 100vh;
}

.postcards-list-wrapper {
    position: relative;
    /* height:100%; */ /* <- use this if using svelte-virtual-list internal scrollbar */
    height: auto;
    width: 100%;
    /* overflow: hidden; */
    overflow-y: visible;
    z-index: 1010;
}

.feed-content-wrapper {
  /* position: relative; */
  scroll-behavior: smooth;
}

.single-post-wrapper {
  display: none;
  width: 0;
  height: 0;
}

.single-post-wrapper.is-visible {
  visibility: visible;
  background-color: var(--bs-body-bg);
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 4rem;
  z-index: 1025;
}

.single-post-wrapper .card {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.post-div {
  overflow-y:visible;
  overflow-x:hidden;
  position: relative;
}

/* .carousel-item {
  position: aboslute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
} */

.carousel-item img {
  height: 100%;
  /* object-fit: cover; */
  object-fit: contain;
}

.author_bar a, .sender_bar a {
  text-decoration: none;
}

div.vpostcards .card {
  /* border-radius: 0px;
  border: none; */
  border: .1rem solid var(--bs-border-color);
  touch-action: manipulation;
  font-size: .95rem;
  z-index: inherit;
  margin-bottom: 1rem;
}

div.vpostcards .card .author_bar {
  padding-bottom: .75rem;
}

div.vpostcards img.card-img {
  margin: auto;
  touch-action: manipulation;
  object-fit: contain;
  /* border-radius: 30px; */
  border-radius: 0px;
  /* background: rgba(128, 128, 128, 1); */
}

div.vpostcards .card-header {
  border: none;
}

div.vpostcards .card .details, div.notifications .details, .card .details {
  font-size: .85rem;
  color: rgba(126, 126, 126, 1);
}

/* Event specific styles */
/* .event-grid owns no CSS layout: the virtualizer sets its height inline and absolutely
   positions each row, with the column count computed in JS (calculateColumns()). */

 /* .event-card {
    min-width: 20rem !important;
    height: 22rem;
  } */

.event-card {
    display: flex;
    flex-direction: column;
    min-width: 20rem !important;
    height: 22rem;
    overflow: hidden; /* Ensure no internal overflow pushes elements */
}

.event-card .position-relative {
    height: 10.5rem;
    overflow: hidden;
    flex: 0 0 auto; /* Fixed height, no grow/shrink */
}

.event-card .card-title {
  /* font-family: "Cormorant", serif; */
  font-weight: 700;
  color: rgba(var(--bs-body-color-rgb), 0.8);
}

/* .event-card .card-body {
  padding-top: 2rem !important;
} */

.event-card a.post-menu {
  text-decoration: none;
}

/* .event-card .event-img {
    max-height: 11rem;
    object-fit: cover;
    border-radius: 0;
} */

.event-card .event-img {
    max-height: 11rem;
    object-fit: cover;
    border-radius: 0;
    width: 100%;
}

/* .event-card .card-body .card-text {
  overflow: hidden;
} */

.event-card .card-body {
    flex: 1 1 auto; /* Grow to fill remaining space */
    overflow: hidden; /* Prevent body overflow */
    display: flex;
    flex-direction: column;
    padding: 1rem; /* Adjust if needed for consistency with px-3 */
}

/* .event-card .card-body .card-text.details {
  padding-bottom: 10px;
} */

.event-card .card-body .card-text.details {
    flex: 1 1 auto; /* Allow it to grow but constrain with max-height */
    max-height: 6rem; /* Approximate max; Shave will enforce this precisely */
    overflow: hidden;
    font-size: 0.9rem; /* Slightly smaller for better fit */
}

.event-card .card-footer {
    flex: 0 0 auto; /* Fixed, no grow */
    padding: 0.75rem 1rem;
}

/* Warm Linen theme for event cards — light mode only */
[data-bs-theme="light"] .event-card {
    background-color: #faf8f5;
}

[data-bs-theme="light"] .event-card .card-footer {
    background-color: #f5f1ec;
    border-top: 1px solid #ede8e1;
}

[data-bs-theme="light"] .event-card .card-body .border {
    border-color: #c9b99a !important;
}

.more-link {
    color: var(--bs-blue);
    cursor: pointer;
    text-decoration: underline;
}

/* div.author_bar > span.comment-user-name, div.author_bar > span.comment-timestamp,
div.sender_bar > span.username, div.sender_bar > span.timestamp {
  font-size: .9em;
}

div.author_bar > span.comment-timestamp, div.sender_bar > span.timestamp {
  color: rgba(var(--bs-body-color-rgb),.5);
} */

.search-result.user a {
  text-decoration: none;
}

div.edit-profile div {
  margin: 1rem auto;
}

h3.display-77 {
  font-size: 1.9em;
  font-weight: 100;
}

img.profile_pic {
  /* max-width: 3em;
  max-height: 3em; */
  width: 3em;
  max-height: 3em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--bs-body-bg);
  border-radius: 6px;
  /* -webkit-mask-image:  url('/static/woolie/assets/rect-mask.svg');
  mask-image: url('/static/woolie/assets/rect-mask.svg'); */
  /* mask-size: contain; */
  mask-repeat: no-repeat;
  /* mask-position: 50% 50%; */
}

img.profile_pic > a {
  border-color: var(--bs-body-bg);
}

.user-profile p.user-pic img {
  width: 8rem;
  /* width: 50%; */
  /* -webkit-mask-image:  url('/static/woolie/assets/test-mask.svg');
  mask-image: url('/static/woolie/assets/test-mask.svg');
  mask-size: contain;
  mask-position: 50% 50%;
  mask-repeat: no-repeat; */
  border-radius: 50%;
  border-width: 2px;
  border-color: rgba(var(--bs-link-color-rgb), 1);
}

.user-profile a.gray-link {
  text-decoration: none;
  font-size: .9em;
}

.profile-title {
  font-weight: bold;
  line-height: 1.4rem;
  white-space: pre-line;
}

.profile-detail {
  font-weight: normal;
}

/**********************************/
/* Public Profile Page (Svelte)   */
/**********************************/

/* U2 · Author column now: see profile-editorial.css, "Regular profile"
   (profile-pages-redesign-plan.md, Phase 4). */


/**********************************/
/* Friend Toggle Button           */
/* (public + designer profiles)   */
/**********************************/

/* A single button that reads "Friends" at rest and reveals the
   "Unfriend" action on hover / keyboard focus. The button carries
   .btn-outline-danger so the hover, focus and active treatments come
   straight from the theme; only the resting colours are neutralised. */
.friend-toggle {
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-border-color: var(--bs-border-color);
  display: inline-grid;
  align-items: center;
  justify-items: center;
}

/* Both labels share one grid cell so the button keeps a constant
   width and nothing shifts as the label swaps. */
.friend-toggle .friend-toggle-label {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: opacity 0.12s ease-in-out;
}

.friend-toggle .friend-toggle-label-action {
  opacity: 0;
  visibility: hidden;
}

@media (hover: hover) {
  .friend-toggle:hover .friend-toggle-label-state {
    opacity: 0;
    visibility: hidden;
  }

  .friend-toggle:hover .friend-toggle-label-action {
    opacity: 1;
    visibility: visible;
  }
}

.friend-toggle:focus-visible .friend-toggle-label-state {
  opacity: 0;
  visibility: hidden;
}

.friend-toggle:focus-visible .friend-toggle-label-action {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .friend-toggle .friend-toggle-label {
    transition: none;
  }
}


/**********************************/
/* Designer Profile Page          */
/**********************************/

/* The header is the editorial kit's H4 · Cover story now: see profile-editorial.css,
   "Designer header" (profile-pages-redesign-plan.md, Phase 2). The chapters below it
   (DesignerProfileChapters.svelte, Phase 3) are styled there too, under "Designer
   chapters". */


/**********************************/
/* Craft Circle Page              */
/**********************************/

.cc-avatar {
  object-fit: cover;
}

.cc-user {
  min-width: 0;
}

.cc-username {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 260px;
}

.cc-actions .btn {
  white-space: nowrap;
}

/* ── Suspended-friendship tombstone ──
   Dashed and muted so it reads as an absence rather than a person, matching
   .ub-card in UnavailableBookmark.svelte. The row carries no avatar or name, so
   it deliberately does not use the .cc-user / .cc-avatar layout above. */
.cc-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-style: dashed;
  background: transparent;
  color: var(--bs-secondary-color, #6c757d);
}

.cc-unavailable-icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  opacity: 0.6;
}

.cc-unavailable-text {
  min-width: 0;
}

.cc-unavailable-title {
  margin-bottom: 0.15rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.cc-unavailable-note {
  margin-bottom: 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  /* Bootstrap's align-items-center / justify-content-between utilities on
     these elements ship with !important, so the stacked mobile layout must
     override with !important too or it silently loses the cascade. */
  .cc-list-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem;
  }

  .cc-user {
    width: 100%;
  }

  .cc-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .cc-username {
    max-width: none;
    flex: 1 1 auto;
  }

  .cc-actions {
    width: 100%;
  }

  .cc-actions > form,
  .cc-actions > .btn {
    flex: 1 1 0;
  }

  .cc-actions .btn {
    width: 100%;
  }
}


/* ── Edit Profile page: label & meta typography ─────────────────────── */
.ep-label {
  font-family: "Raleway", "Nunito", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: 0.35rem;
}

.ep-meta-label {
  font-family: "Raleway", "Nunito", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: 0.2rem;
}

.ep-hint {
  font-family: "Nunito", "Quicksand", sans-serif;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

/* The Edit Profile page's own layout lives in css/edit-profile.css, loaded by that
   page alone. Only .ep-label / .ep-meta-label / .ep-hint stay here, because
   templates/account/password_change.html and two Svelte forms share them. */

.post-actions .woolie-icon {
  width: 1em;
  padding-right: .5em;
  padding-bottom: .5em;
  padding-top: .5em;
}

.fa-bookmark.woolie-icon {
  font-size: 1.3rem;
}

.woolie-icon.blue {
  color: #37BEF7;
}

.wicon {
  /* border: none; */
  text-align: center;
}

svg.bi.med {
  height: 1.2em;
  width: 1.2em;
}

.nav svg.wicon, img.wicon {
  /* color: rgba(var(--bs-body-color), 1); */
  height: 1.2em;
  width: 1.2em;
  margin: auto;
  vertical-align: text-top;
}

.woolie-circle {
  width: 50%;
  border-radius: 5%;
  -webkit-mask-image:  url('/static/woolie/assets/test-mask.svg');
  mask-image: url('/static/woolie/assets/test-mask.svg');
  mask-size: contain;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
}

/* customize dropdown toggle to an ellipsis in the post-menu instead of a caret */
.post-menu.dropdown-toggle::before {
  content: "\22EF";
  font-size: 1.6em;
  border: none;
  height: auto;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.post-menu {
  cursor: pointer;
  display: inline-flex;
  /* background-color: rgba(255, 255, 255, 0.5); */
  transition: all 300ms ease-in-out;
  margin-left: 0;
  margin-right: auto;
  /* line-height: 0; */
}

@media (max-width: 991.98px) {

  div.wool-main.border-start {
    border-left: none !important;
    border-right: none !important;
  }
  div.wool-content.border-end {
    border-right: none !important;
  }

}

.feed-content-wrapper .nav-tabs {
  border: none;
  min-width: 275px;
  /* width: 100%; */
}

.feed-content-wrapper .tab-content {
  padding-top: 60px;
}

@media (min-width: 992px){
  .feed-content-wrapper .tab-content{
    padding-top: 0px;
  }
}

/* Medium-small: the left sidebar has given way to the fixed 60px top navbar, but the
   right sidebar is still showing. .wool-content already pads itself 60px clear of that
   navbar below lg (sidebars.css), and the feed tab bar sticks directly under it, so the
   60px above stacked a second navbar-sized gap between the bar and the posts. Spaced as
   on desktop instead, the layout this band most resembles. Below 768px the phone rule
   further down sets its own value. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .feed-content-wrapper .tab-content {
    padding-top: 0;
  }
}

@media (min-width: 768px) {
  .post-menu {
    float:right;
    padding-right: calc(1rem * .25);
  }
}

@media (max-width: 767px) {
  /* Menu-bar icons were briefly centre-aligned at this width
     (.nav a { text-align: center }). Kept as a note rather than as an empty rule. */

  #content-tabs {
    /* position: fixed; */
    top: 60px; /* used when top menu navbar is used in small displays */
    z-index: 1025;
    /* width: 100%; */
  }

  .feed-content-wrapper .tab-content {
    /* position:relative; */
    padding-top: 1.8rem;
  }

  .post-menu {
    float:right;
    padding-right: 0;
  }
}

.post-menu > .bullet {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid rgb(58, 58, 58);
  color: darkgrey;
}

.post-menu:hover, .post-menu:focus {
  & > .bullet {
    border: 2px solid rgb(90, 143, 203);
    color: rgb(69, 102, 220);
    /* background-color: rgba(45, 143, 218, 0.5); */
  }
}

/*-- Alerts --*/
.wool-alert {
  z-index: 1090;
}

/*-- Action Icons --*/
.woolie-button-icon {
  border: none;
}

.like-icon {
  background-image: url('/static/woolie/assets/heart-icon-red-outline.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
}

.unlike-icon {
  background-image: url('/static/woolie/assets/heart-icon-red.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
}

.bookmarked-icon {
  background-image: url('/static/woolie/assets/bookmark-icon-blue.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
}

.bookmark-icon {
  background-image: url('/static/woolie/assets/bookmark-icon-black-outline.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
}

@media (min-width: 768px) {
  .post-actions {
    border: none;
    /* width: 22%; */
    /* clear: top; */
  }
}

.post-actions {
  color: rgba(var(--bs-body-color-rgb),.5);
}

/* .vpostcards .post-actions {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
} */

.post-actions a:hover, .post-actions span:hover, .post-actions i:hover, .post-actions button:hover {
  cursor: pointer;
}

.post-actions a, .post-actions button {
  text-decoration: none;
  color: inherit;
}

.post-actions a:hover, .post-actions button:hover {
  color: rgba(var(--bs-link-color-rgb), 1);
}

.post-actions .red {
  color: rgba(201, 23, 69, 1);
}

.post-actions .icon-greyout {
  color: rgba(126, 126, 126, 0.5);
}

.post-actions .woolie-icon:hover {
  color: rgba(var(--bs-link-color-rgb), 1);
}

.post-actions .woolie-icon.fa-heart:hover {
 color: red;
}

.post-actions .woolie-icon.fa-comment:hover {
 color: #00a00d;
}

.post-actions .woolie-icon.fa-bookmark:hover {
 color: rgb(30, 144, 255);
}

.btn.round-btn {
  border-radius: 25%;
}

.disclaimers_copyright {
  font-size: .8rem;
  color: rgb(138, 138, 138);
}

/*************************/
/*-- Comments Sections --*/
/*************************/
.comments .wicon {
  color: rgba(var(--bs-body-color-rgb), 0.5);
}

.user-comment {
  font-size: .9em;
  padding-bottom: 1.2rem;
}

.user-comment .author_bar {
margin-bottom: 0rem;
}

.user-comment .wicon:hover {
  color: #3093ea;
}

.user-comment.level-2 {
  margin-left: 1.5rem;
}

.user-comment.level-capped, .user-comment.level-3 {
  margin-left: 2.5rem;
}

.user-comment .italicize {
  font-style: italic;
}

.user-comment.deleted-comment {
  /* border: 1px solid;
  border-radius: 6px; */
  margin-bottom: .5em;
}

.user-comment.deleted-comment .deleted-comment-body {
  padding: .5em;
}

.user-comment.deleted-comment .deleted-comment-body.alert-info {
  margin-bottom: 0em;
}

/* The thread connector drawn above a reply's author bar (child_comment.html,
   child_comment_modal.html, Comments.svelte, EventComments.svelte). Bootstrap's .vr is
   an inline-block, so as the only thing on its line it dragged a whole line box - about
   1.5em of leading for a 1em mark - between a comment and its first reply, on top of
   that comment's own padding-bottom. Block-level with an explicit height keeps the tick
   and drops the leading. min-height is reset because Bootstrap's 1em floor would
   otherwise beat the height set here. */
.user-comment .vr {
  display: block;
  width: var(--bs-border-width);
  min-height: 0;
  height: .85rem;
  margin: 0 0 .2rem .2em;
}

/* A reply belongs to the comment above it, so it sits closer than the 1.2rem that
   separates one top-level thread from the next. The tree is flat in the DOM - every
   comment is a sibling, nesting is the level-N indent - so "is followed by a reply" is
   "the next comment is not level-1". :has() is already load-bearing elsewhere in the
   project's CSS (entrance.css). */
.user-comment:has(+ .user-comment:not(.level-1)) {
  padding-bottom: .3rem;
}

/* Staff-only breakdown beside a thread's comment count
   (post/templates/post/_staff_comment_counts.html). Deliberately quiet: it is an
   accounting note for a moderator, not a status the thread is about. The Svelte threads
   render the same thing from their own components; keep the three in step. */
.staff-comment-counts {
  font-size: .8rem;
  font-weight: 400;
  opacity: .75;
}

/* Quarantined comment notice, server-rendered threads (post/comments_section.html,
   child_comment.html and the two modal variants). Only the comment's OWN author and
   staff are ever sent one of these rows - CommentQuerySet.visible() decides that - so
   this is an explanation for the person who can do something about it, not a public
   marker. The Svelte thread renders the same badge and the same sentence from
   Comments.svelte; keep the two in step. */
.user-comment .comment-quarantine-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .35rem;
}

.user-comment .comment-quarantine-notice .quarantine-explainer {
  font-size: .8rem;
  opacity: .8;
}

div.comment-container img {
  width: 2rem;
}

div.comment-container .comment-body {
  font-size: .9em;
}

.comment-header a, .comment-header span {
  font-size: .9em;
}

.comment-header > .details {
  font-size: .8em;
  color: rgb(126,126,126);
}

.parent-comment-username {
  text-decoration: none !important;
}

/********************/
/* Search Page      */
/********************/
.filter-params {
  font-size: .8em;
}


/********************/
/* Notifications    */
/********************/
/* The notifications page's styles live in notifications.css (loaded by that page only). */

/********************/
/* Misc.            */
/********************/
.version-tag {
  font-family: "Geo";
  /* font-family: "PixelifySans-Reg"; */
  /* font-family: "SixtyFour"; */
  font-size: 1.2em;
  text-shadow: 0px 0px;
}

.actionable {
  cursor: pointer;
}

/********************/
/*-- Errors       --*/
/********************/
ul.errorlist {
  text-align: center;
}

/********************/
/*-- AllAuth --*/
/********************/

@media (max-width: 767px) {
  div.entrance-card {
    width: 100%;
  }
}

/* @media (min-width: 768px) {
  div.entrance-card {
    width: 55%;
  }
} */

div.entrance-card h1 {
  font-size: calc(1.3rem + .6vw);
}

span.helptext::before {
  content: "\A";
  white-space: pre;
}

/* Scoped to .entrance-card (the login/signup/reset layout) on purpose: these target Django's
   auto-generated ids, which are identical on any page rendering a username/email/password
   field. Unscoped, they stripped the borders and hid the labels on the edit-profile form. */

/* Hide the allauth input label */
.entrance-card label[for="id_login"], .entrance-card label[for="id_username"],
.entrance-card label[for="id_email"], .entrance-card label[for="id_email2"],
.entrance-card label[for="id_password"], .entrance-card label[for="id_password1"],
.entrance-card label[for="id_password2"] {
  display: none;
}

.entrance-card input[id="id_login"], .entrance-card input[id="id_password"],
.entrance-card input[id="id_username"], .entrance-card input[id="id_email"],
.entrance-card input[id="id_email2"], .entrance-card input[id="id_password1"],
.entrance-card input[id="id_password2"] {
  padding: .5rem;
  border-color: transparent;
  border-radius: 12px;
  width: 100%;
}

.entrance-card input[id="id_password"] {
  margin-bottom: .5rem;
}


/********************/
/*-- Font Awesome --*/
/********************/
.fa-size-med {
  font-size: 1.5rem;
}

/***********/
/*-- DEV --*/
/***********/

.montezumas-revenge {
  color: yellow;
}

.grover {
  color: blue;
}