* {
  font-size: 1em;
}

textarea {
  width: 100%;
}

button, input[type=button] {
  background-color: var(--background);
  color: var(--forground);
  border: 1px solid var(--forground);
  padding: 0.25em;
  font-size: 0.8em;
  min-width: 30%;
}

input {
  background-color: var(--background);
  color: var(--forground);
  border: 1px solid var(--forground);
  font-size: 1em;
  margin: 0em;
  width: 100%;
}
input.chart {
  width: 10%;
  font-size: 0.8em;
  padding: 0.5em;
}
div.ticker_div {
width: 100%;
margin: 0px;
padding: 0px;

}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  height: 100%;
}

div.section {
  font-size: 1.2em;
  width: 100%;
}
div.square {
  width: 100%;
}
.post_summary {
  margin-left: 0em;
  margin-right: 0em;
  width: 95%;
  border-left: 0px solid var(--forground);
  border-top: 1px solid var(--forground);
  min-height: auto;
  display: block;
}
div.post_summary_header {
  margin-top: 0;
}

h1 a {
}
main {
  margin-left: 1em;
  margin-right: 1em;
}

.post_details {
  width: 90%;
  border-left: 0px solid var(--forground);
  border-top: 0px solid var(--forground);
  min-height: 0vh;
  margin-left: 0em;
}

.post_detail h1 {
  text-align: left;
}

.post_summary h2 {
  font-size: 1em;
}

h1 {
  font-size: 1.5em;
}
h2 {
  margin: 2em;
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 5fr 0fr 0fr;
  grid-gap: 0px;
  height: 100%;
}

header {
  text-align: center;
  width: 100%;
}

header,
footer {
  grid-column: 1 / -1;
}

.content {
  grid-column: 2 / 3;
}

img#glasses {
  min-width: 30%;
  grid-column: 1 / -1;
  margin-top: -2em;
  margin-right: -8%;
}
 
img#rss {
  max-height: 1.2em;
}

div.burger {
  float: right;
  display: block;
  width: 20%;
  border: none;
}

div.burger svg {
  width: 100%;
}

div.chart{
  margin: 0px;
  padding-bottom: 2em;
  margin-bottom: 2em;
  margin-left: 0%;
  padding: 0px;
  width: 100%;
  padding-top: 2em;
  height: 60vh;
  border: 0px solid red;
}
div.comment {
  padding-left: 0.5em;
}
div.comment hr{
  margin-left: -0.5em;
}

div.dropbtn {
  padding: 0px;
  margin: 0px;
  clear:both;
  font-weight: 900;
  width: 100%;
}
div.dropbtn a#menu {
  float: right;
  border: 0px solid yellow;
}
div.dropbtn a#home {
  float: left;
  border: 0px solid blue;
}

div.subdropbtn {
  padding: 0px;
  margin: 0px;
  clear:both;
  border: 0px;
  width: 100%;
}

div.subdropbtn a {
  font-size: 1em;
  padding-top: 0.2em;
  margin: 0px;
  display: block;
  background-color: var(--background);
}

div.dropbtn a {
  font-size: 1em;
  padding-top: 0.2em;
  margin: 0px;
  display: block;
  background-color: var(--background);
  color: var(--forground);
}
div.subdropbtn a.inverted, div.dropbtn a.inverted {
  background-color: var(--forground);
  color: var(--background);
}

div.rss a{
  text-align: left;
  float:left;
  text-decoration: none;
  font-size: 0.8em;
  padding-left: 0.5em;
}

div.tagcloud_hidden {
  display: none;
}

div.tagcloud {
  position: absolute;
  width: 100%;
  display: block;
  text-align: right;
  border-bottom: 20em solid var(--background);
}
table {
 width: 100%;
}

/* not enough space between h1 link above and this link */
div.url {
  margin-top: 1em;
}
.daily_requests_div { 
  width: 110%;
}


div.main {
  width: 90%;
  float: left;
}
div.ticker {
  border-left: 0px solid white;
}


div.square.nimda-page {
  width: 100%;
  max-width: 100%;
  margin: 1rem 0 3rem 0;
  padding: 0.75rem;
}

.nimda-site-health {
  overflow-x: auto;
}

.nimda-link-grid a {
  font-size: 1.15rem;
  padding: 0.85rem;
}

/* Release 253: Nimda landing admin-area links should follow the same
   compact mobile button language as the primary actions, not full-width
   desktop list rows. Keep primary-action geometry untouched. */
.nimda-landing .nimda-link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: stretch;
}

.nimda-landing .nimda-link-grid a,
.nimda-landing .nimda-link-grid a:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-width: 10rem;
  border: 1px solid var(--outline);
  padding: 0.9rem 1.1rem;
  font-size: 1.15rem;
  line-height: 1.25;
  text-align: center;
  background: var(--background);
  color: var(--forground);
  text-decoration: none;
  overflow-wrap: anywhere;
}


main.nimda-main div.square {
  width: 100%;
  max-width: 100%;
  margin: 1rem 0 3rem 0;
  padding: 0.75rem;
}


.post-editor-description-grid {
  display: block;
}

.post-editor-description-input {
  width: 100%;
}

.markdown-help-side,
.markdown-help-side:not([open]) {
  max-width: none;
  width: 100%;
  margin-top: 0.75rem;
}

.markdown-help-side summary::before {
  content: "▲ ";
}

.markdown-help-side:not([open]) summary::before {
  content: "▼ ";
}


.chart-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.chart-controls input.calendar {
  width: 100%;
  min-width: 0;
}


.profile-preference-form input[type="checkbox"],
.chart-color-toggle input[type="checkbox"] {
  width: auto;
}



.stonkys-brand-mark img {
  width: 4.4rem;
  max-width: 32vw;
}

.stonkys-warp-glasses {
  width: min(24rem, 86vw);
  top: 45%;
  animation: stonkys-warp-glasses-mobile 980ms cubic-bezier(.12,.78,.21,1) forwards;
}

body.warp-entering header,
body.warp-entering main {
  animation-name: stonkys-warp-materialize-mobile;
}

@keyframes stonkys-warp-glasses-mobile {
  0% {
    opacity: 0;
    transform: translate(-50%, -64%) scale(1.8);
    filter: invert(1) blur(18px);
  }
  52% {
    opacity: 0.95;
    transform: translate(-50%, -48%) scale(1.05);
    filter: invert(1) blur(2px);
  }
  78% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(1);
    filter: invert(1) blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
    filter: invert(1) blur(4px);
  }
}

@keyframes stonkys-warp-materialize-mobile {
  0% {
    opacity: 0;
    transform: translateY(8vh) scale(1.08);
    filter: blur(14px);
  }
  62% {
    opacity: 1;
    transform: translateY(-1vh) scale(0.99);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}



/* Release 223: compact mobile brand mark; the warp image remains large via
   #stonkys-warp-intro .stonkys-warp-glasses. */
ul#menu {
  justify-content: center;
}

ul#menu .stonkys-brand-mark {
  padding: 0.25rem 0.35rem;
}

ul#menu .stonkys-brand-mark img {
  width: 3.2rem;
  max-height: 1.35rem;
}

#stonkys-warp-intro .stonkys-warp-glasses {
  width: min(24rem, 86vw);
}



/* Release 224: mobile keeps detail text left and keeps chart/cards separated. */
.post_details,
.post_details .section,
.post_details .main,
.post_details .markdown-body,
.post_details .url {
  text-align: left;
}

.post-detail-chart .chart,
.post-detail-chart #ticker_div,
.ticker-detail-chart .ticker-chart,
.ticker-detail-chart #ticker_div {
  min-height: 56vh;
  height: 60vh;
}

.ticker-chart-controls {
  margin-bottom: 2rem;
}

.post_index[data-stonkys-ticker-posts] {
  display: block;
  margin-top: 2rem;
}

.post_index[data-stonkys-ticker-posts] > .post_summary {
  width: 100%;
  margin-bottom: 1.25rem;
}



/* Release 227: ticker story grid collapses cleanly on mobile. */
.ticker-page-grid,
.post_index[data-stonkys-ticker-posts].ticker-page-grid {
  display: block;
  margin-top: 0;
}

.ticker-page-grid > .ticker-chart-card {
  width: 100%;
  margin-bottom: 1.25rem;
}

.ticker-page-grid .ticker-chart-card .ticker-chart {
  height: 58vh;
  min-height: 22rem;
}

.ticker-page-grid .ticker-chart-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ticker-page-grid .ticker-chart-controls input.calendar {
  width: 100%;
}



/* Release 228: mobile ticker card uses its chart area without clipping posts. */
.ticker-page-grid > .ticker-chart-card {
  display: block;
  overflow: visible;
}

.ticker-page-grid .ticker-chart-card .ticker-chart {
  height: 62vh;
  min-height: 24rem;
}

.ticker-page-grid > .post_summary {
  overflow: visible;
  padding-top: 1em;
}

.ticker-page-grid > .post_summary .post_summary_header {
  display: flow-root;
  min-height: 1.4em;
  margin-bottom: 0.75em;
}



/* === Release 241: mobile menu pinned to the BOTTOM, toggle on the right ===
   The header is position:fixed (pinned to the top) in base.css. On mobile we
   flip that fixed bar to the bottom of the viewport for one-handed/right-thumb
   reach. Because the header is out of normal flow, relocating it does not shift
   document layout; it only moves the overlay. Mobile-only (max-width:480px). */
header {
  position: fixed;
  top: auto;
  bottom: 0;
  z-index: 1000;
  border-top: 1px solid var(--forground);
}

/* Cap and scroll the MENU LIST, not the whole header. The MENU toggle is a
   separate grid item, so it stays visible at the bottom edge while a long
   list (many tags) scrolls internally. */
ul#menu {
  float: none;
  width: 100%;
  box-sizing: border-box;
  max-height: 68vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Reserve space so the last posts clear the fixed bottom bar. This selector
   intentionally beats base.css `.container > * { padding-bottom: 1em; }`. */
.container > main {
  padding-bottom: calc(3.5em + env(safe-area-inset-bottom));
}

/* Toggle ("menu"/"hide") moves to the bottom-right thumb zone.
   base.css left-floats the arrow + label; override to right. */
a#hide_menu {
  display: block;
  clear: both;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;          /* contain the floated children to full width */
}
a#hide_menu svg {
  display: none;
}
a#hide_menu p {
  float: right;
  margin: 0;
}

/* Mobile dropdowns stay inside the scrollable menu list. A positioned popout
   that opens upward can be clipped by ul#menu's overflow, so render submenus
   in normal flow on small screens. */
header .dropdown-content {
  position: static;
  top: auto;
  bottom: auto;
  min-width: 0;
  width: 100%;
}

/* === Release 247: split mobile TAGS and MENU controls into one bottom row ===
   TAGS lives on the left; MENU/HIDE remains on the right. The existing desktop
   tag dropdown stays in ul#menu for wide screens, but is hidden from the mobile
   app menu so tags no longer inflate the MENU panel. No new JavaScript is
   needed; the tag panel uses native details/summary. */
header {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "menu menu menu"
    "tags tickers toggle";
  align-items: stretch;
  overflow: visible;
}

ul#menu {
  grid-area: menu;
}

ul#menu > li.menu-tags-item {
  display: none;
}

.mobile-tags-menu {
  display: block;
  grid-area: tags;
  min-width: 0;
  text-align: left;
}

.mobile-tags-menu > summary {
  box-sizing: border-box;
  color: var(--forground);
  cursor: pointer;
  display: block;
  list-style: none;
  padding: 0.5em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
}

.mobile-tags-menu > summary::-webkit-details-marker {
  display: none;
}

.mobile-tags-menu > summary.tag-selected,
.mobile-tags-menu > summary.inverted {
  background-color: var(--forground);
  color: var(--background);
}

.mobile-tags-panel {
  background-color: var(--background);
  border-top: 1px solid var(--forground);
  box-sizing: border-box;
  display: none;
  left: 0;
  max-height: 68vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 0;
  bottom: calc(2.9em + env(safe-area-inset-bottom));
  text-align: left;
  z-index: 1001;
}

.mobile-tags-menu[open] .mobile-tags-panel {
  display: block;
}

.mobile-tags-panel a {
  color: var(--forground);
  display: inline-block;
  padding: 0.5em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-tags-panel a:hover {
  background-color: var(--forground);
  color: var(--background);
  text-decoration: none;
}

a#hide_menu {
  grid-area: toggle;
  justify-self: stretch;
}

a#hide_menu p#label {
  margin: 0;
}


/* === Release 249: menu wins when TAGS remains open ===
   Keep the active TAGS control inverted when a tag filter is selected, but do
   not let an open native details tag panel cover the app MENU. The existing
   menu toggle hides ul#menu with inline display:none; this CSS-only rule uses
   that state so MENU takes precedence when it is visible. */
ul#menu {
  background-color: var(--background);
  position: relative;
  z-index: 1002;
}

ul#menu:not([style*="display: none"]) ~ .mobile-tags-menu[open] .mobile-tags-panel {
  display: none;
}

.mobile-tags-menu > summary {
  background-color: var(--background);
}

.mobile-tags-menu > summary.tag-selected,
.mobile-tags-menu > summary.inverted {
  background-color: var(--forground);
  color: var(--background);
}

/* === Release 250: keep active TAGS control compact ===
   When a tag filter is active, the inverted TAGS summary should indicate state
   without painting a half-width white slab across the bottom bar. Keep the
   details element anchored left and size the summary to its own text/padding. */
.mobile-tags-menu {
  justify-self: start;
  width: auto;
}

.mobile-tags-menu > summary {
  display: inline-block;
  width: auto;
  min-width: 0;
}


/* === Release 251: mobile tag readability and divider rhythm ===
   Keep the TAGS/MENU split, but make selected tag pills readable and compact.
   Also align post-card tag rows with the post header/title inset, and give the
   divider line between posts one em of breathing room above and below. */
.mobile-tags-panel a.tag-selected,
.mobile-tags-panel a.inverted,
.mobile-tags-panel a[data-stonkys-clear-tags].tag-selected,
.mobile-tags-panel a[data-stonkys-clear-tags].inverted {
  background-color: var(--forground) !important;
  color: var(--background) !important;
  display: inline-block;
  width: auto;
  min-width: 0;
  text-decoration: none !important;
}

.mobile-tags-panel a.tag-selected:hover,
.mobile-tags-panel a.inverted:hover,
.mobile-tags-panel a[data-stonkys-clear-tags].tag-selected:hover,
.mobile-tags-panel a[data-stonkys-clear-tags].inverted:hover {
  background-color: var(--forground) !important;
  color: var(--background) !important;
}

.post_summary .post_summary_header span.categories,
.post_summary_compressed .post_summary_header span.categories,
span.categories.categories-left {
  margin-left: 0;
  padding-left: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.post_summary .post_summary_header span.categories a,
.post_summary_compressed .post_summary_header span.categories a,
span.categories.categories-left a {
  display: inline-block;
  width: auto;
  min-width: 0;
}

.post_index[data-stonkys-post-feed] > .post_summary + .post_summary,
.post_index[data-stonkys-ticker-index] > .post_summary + .post_summary,
.post_index[data-stonkys-ticker-posts] > .post_summary + .post_summary {
  margin-top: 1em;
  padding-top: 1em;
}

/* Release 254: mobile cards use the full available width and keep the header
   inside the card border. This complements the base feed-card rhythm fix. */
.post_index[data-stonkys-post-feed] > .post_summary,
.post_index[data-stonkys-ticker-index] > .post_summary,
.post_index[data-stonkys-ticker-posts] > .post_summary {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.post_summary > .post_summary_header {
  margin-top: 0;
}


/* Release 255: keep post-detail metadata visible and wrapped on phones. */
.post_details > .post_summary_header,
.post_details > .post_detail_header {
  margin-top: 0;
  margin-bottom: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
}

.post_details > .post_summary_header span.categories {
  flex-basis: 100%;
  margin-left: 0;
  white-space: normal;
}


/* Release 257/258: keep profile dashboard readable on phone-sized screens.
   Release 258 tightens the profile view so cards cannot overflow the phone
   viewport and the activity controls use space more like the desktop view. */
.profile-page {
  width: 100%;
  max-width: 100%;
  margin: 0.75rem 0 4rem 0;
  overflow-x: clip;
}

.profile-hero,
.profile-card {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem;
}

.profile-hero,
.profile-grid,
.profile-activity-grid,
.profile-preference-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.profile-hero {
  gap: 0.75rem;
}

.profile-identity h1 {
  font-size: 1.45rem;
  line-height: 1.05;
}

.profile-subtitle {
  margin-top: 0.35rem;
  line-height: 1.35;
}

.profile-card-header {
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: flex-start;
}

.profile-card-header a {
  margin-left: 0;
}

.profile-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 0.45rem;
}

.profile-action,
.profile-card-header a,
.profile-row-action {
  max-width: 100%;
  min-width: 0;
  font-size: 0.78rem;
  padding: 0.5rem 0.65rem;
  text-align: center;
}

.profile-action {
  width: 100%;
}

.profile-card h2,
.profile-card-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.profile-facts div {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
}

.profile-facts dt,
.profile-stat-label,
.profile-preference-form > label,
.profile-pill,
.profile-count {
  font-size: 0.68rem;
}

.profile-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.profile-stat {
  min-width: 0;
  padding: 0.65rem;
}

.profile-stat-number {
  font-size: 1.55rem;
}

.profile-control-row,
.profile-control-row-graphs {
  grid-template-columns: minmax(0, 1fr);
}

.profile-control-row {
  display: grid;
  gap: 0.45rem;
}

.profile-control-row select,
.profile-control-row button,
.profile-checkbox {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.profile-control-row button {
  min-width: 0;
}

.profile-checkbox {
  justify-content: center;
}

.profile-checkbox input[type="checkbox"] {
  width: auto;
}

.profile-preference-form .muted {
  font-size: 0.78rem;
  line-height: 1.35;
}

.profile-activity-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
}

.profile-post-row-main,
.profile-activity-title,
.profile-activity-meta {
  min-width: 0;
  max-width: 100%;
}

.profile-activity-title {
  display: block;
}

.profile-activity-meta {
  white-space: normal;
  font-size: 0.78rem;
  line-height: 1.35;
}

.profile-tags {
  justify-content: flex-start;
}

.profile-tags a {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Release 259: profile mobile polish.
   The profile dashboard exposed an older mobile layout bug: main was a grid
   item with horizontal margins, so 100%-wide profile cards could extend past
   the visible phone viewport. Use internal gutters on mobile and keep profile
   borders solid so the right edge remains visible on small dark screens. */
.container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  box-sizing: border-box;
}

.container > main {
  padding-bottom: calc(3.75em + env(safe-area-inset-bottom));
}

header {
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.profile-page {
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto 4rem auto;
  overflow-x: visible;
}

.profile-hero,
.profile-card {
  border: 1px solid var(--forground);
  border-image: none;
  margin-left: 0;
  margin-right: 0;
}

.profile-hero {
  padding: 0.8rem;
}

.profile-card {
  padding: 0.8rem;
  margin-bottom: 0.75rem;
}

.profile-grid,
.profile-activity-grid,
.profile-preference-grid {
  gap: 0.75rem;
}

.profile-actions {
  width: 100%;
}

.profile-subtitle,
.profile-facts dd,
.profile-activity-title,
.profile-activity-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile-facts {
  gap: 0.55rem;
}

.profile-facts div {
  padding-top: 0.45rem;
}

.profile-stats {
  width: 100%;
  max-width: 100%;
  gap: 0.45rem;
}

.profile-stat,
.profile-stat:visited {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.profile-stat-number {
  font-size: clamp(1.3rem, 9vw, 1.55rem);
}

.profile-stat-label {
  letter-spacing: 0.06em;
}

/* Release 260: statistics pages use profile-style solid mobile cards/buttons. */
main.nimda-main div.square.nimda-statistics-home,
main.nimda-main div.square.nimda-statistics-page {
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto 4rem auto;
  padding: 0;
  overflow-x: visible;
}

.nimda-stats-hero,
.nimda-stats-card,
.nimda-stats-subgroup {
  border: 1px solid var(--forground);
  border-image: none;
  padding: 0.8rem;
  margin-left: 0;
  margin-right: 0;
}

.nimda-stats-header-row,
.nimda-stats-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.nimda-stat-button-grid,
.nimda-stat-button-grid-four {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.nimda-stat-button,
.nimda-stat-button:visited,
.nimda-stat-input-button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.58rem 0.65rem;
  text-align: center;
}

.nimda-stats-filter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.nimda-stats-filter-form input.calendar {
  width: 100%;
}

.nimda-statistics-page .chart,
.nimda-statistics-page .chart-box {
  min-height: 260px;
  height: 300px;
}

.nimda-statistics-page .chart-box-large {
  height: 320px;
}

.nimda-statistics-page .chart-box-medium {
  height: 280px;
}

.nimda-stats-kicker {
  font-size: 0.68rem;
}

.nimda-statistics-home h1,
.nimda-statistics-page h1 {
  font-size: 1.45rem;
}

.nimda-statistics-home h2,
.nimda-statistics-page h2 {
  font-size: 1.05rem;
}

/* Release 261: keep mobile post-card tag labels visually aligned with the
   card text while preserving tag button hit-area padding. */
.post_index[data-stonkys-post-feed] > .post_summary > .post_summary_header .categories,
.post_index[data-stonkys-ticker-index] > .post_summary > .post_summary_header .categories,
.post_index[data-stonkys-ticker-posts] > .post_summary > .post_summary_header .categories {
  margin-left: -0.35em;
  max-width: calc(100% + 0.35em);
}

.profile-logout-form {
  display: block;
  width: 100%;
  margin: 0;
}

.profile-logout-form .profile-action {
  width: 100%;
}

/* Release 262 mobile: solid cards and full-width controls for pages/tickers. */
.content-page {
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto 4rem auto;
  padding: 0;
}

.content-page-hero,
.content-page-card {
  border: 1px solid var(--forground);
  border-image: none;
  padding: 0.8rem;
  margin-left: 0;
  margin-right: 0;
}

.content-page h1 {
  font-size: 1.45rem;
}

.footer-page-links {
  display: flex;
  padding: 0 0.75rem;
}

main.nimda-main div.square.nimda-pages-list,
main.nimda-main div.square.nimda-page-editor,
main.nimda-main div.square.nimda-ticker-manager,
main.nimda-main div.square.nimda-ticker-detail {
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto 4rem auto;
  padding: 0;
  overflow-x: visible;
}

.nimda-form-grid,
.nimda-ticker-filter,
.nimda-ticker-stat-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.nimda-check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.nimda-page-body {
  min-height: 18rem;
}

.nimda-table-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.nimda-table-actions .nimda-action-button {
  width: 100%;
}

.nimda-ticker-stat {
  padding: 0.65rem;
}

.nimda-ticker-stat-number {
  font-size: 1.25rem;
}

/* Release 264-267: mobile post-card actions and submission forms. */
.post_summary .post-card-tags,
.post_summary_compressed .post-card-tags,
span.categories.post-card-tags {
  margin-left: -0.5em;
  max-width: calc(100% + 0.5em);
}

.post-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  margin-top: 0.75rem;
  padding-top: 0;
  border-top: 0;
}

.post-card-action,
.post_summary .post-card-actions a,
.post_summary_compressed .post-card-actions a {
  width: auto;
  box-sizing: content-box;
}

.submission-form-grid,
.submission-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.submission-button {
  width: 100%;
  box-sizing: border-box;
}

main.nimda-main div.square.nimda-submissions-list,
main.nimda-main div.square.nimda-submission-detail {
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto 4rem auto;
  padding: 0;
  overflow-x: visible;
}


/* Release 267: keep mobile post-card action text free of separator lines. */
.post_summary > .post-card-actions,
.post_summary_compressed > .post-card-actions,
.post_index[data-stonkys-post-feed] > .post_summary > .post-card-actions,
.post_index[data-stonkys-ticker-index] > .post_summary > .post-card-actions,
.post_index[data-stonkys-ticker-posts] > .post_summary > .post-card-actions {
  border: 0 !important;
  border-top: 0 !important;
  border-image: none !important;
  box-shadow: none !important;
  background-image: none !important;
  padding-top: 0 !important;
}

.post_summary > .post-card-actions::before,
.post_summary_compressed > .post-card-actions::before {
  content: none !important;
  display: none !important;
}

/* Reputation-specific data UI only. The public explainer inherits the
   shared mobile content-article layout. */
.reputation-formula {
  font-size: 0.78rem;
  padding-left: 0.75rem;
}

.reputation-facts-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
}

.reputation-dimension-list > div,
.reputation-concept-list > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  padding: 0.65rem 0;
}

.reputation-tier-table {
  width: 100%;
}

.comment-reputation-scores {
  gap: 0.2rem 0.55rem;
}

.comment-rating-dimension {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
}

.comment-rating-values {
  gap: 0.45rem;
}

.reputation-rating-value,
.reputation-rating-clear {
  width: auto;
  box-sizing: content-box;
}

.profile-reputation-primary {
  width: 100%;
}

.profile-reputation-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
}

/* Release 274: continuous public articles and shared submission Markdown
   editor layout on phone-sized screens. */
.content-article-page {
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto 4rem auto;
  padding: 0;
}

.content-article-header {
  margin-bottom: 1.15rem;
  padding: 0 0 0.85rem 0;
}

.content-article-body {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.submission-markdown-editor {
  display: block;
}

.submission-markdown-editor .post-editor-description-input,
.submission-markdown-editor .markdown-help-side,
.submission-markdown-editor .markdown-help-side:not([open]) {
  width: 100%;
  max-width: 100%;
  flex-basis: auto;
}

.public-submit-form [data-markdown-source],
.nimda-submission-detail [data-markdown-source] {
  min-height: 14rem;
}

/* Release 289: public-profile field controls collapse within existing mobile profile layout. */
@media (max-width: 480px) {
  .public-profile-identity-row,
  .profile-public-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-avatar-large {
    width: 5.5rem;
    height: 5.5rem;
    flex-basis: 5.5rem;
  }

  .profile-public-form input,
  .profile-public-form select,
  .profile-public-form textarea,
  .profile-public-form button,
  .profile-avatar-editor input,
  .profile-avatar-editor button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}


/* Release 303: desktop first-class ticker filter strip is hidden on mobile. */
.ticker-filter-bar {
  display: none !important;
}

/* Release 308: desktop-only first-class filter/Nimda/settings rows. */
header#header > .tag-filter-bar,
header#header > .ticker-filter-bar,
header#header > .sort-filter-bar,
header#header > .nimda-menu-bar,
header#header > .settings-filter-bar {
  display: none !important;
}

/* Release 317: keep the tag cloud expressive but readable on narrow screens. */
@media screen and (max-width: 480px) {
  .tag-cloud-page {
    width: calc(100% - 1rem);
    margin: 1rem auto 4rem;
  }

  .tag-cloud {
    gap: 0.3rem 0.55rem;
    padding: 1rem 0.75rem;
  }

  .tag-cloud-weight-6 { font-size: 1.7rem; }
  .tag-cloud-weight-7 { font-size: 2.15rem; }

  .settings-page .profile-preference-grid {
    grid-template-columns: 1fr;
  }
}


/* Release 332: TICKERS is a first-class compact mobile control immediately to
   the right of TAGS. Theme switching now lives inside the main menu. */
.mobile-tickers-menu {
  display: block;
  grid-area: tickers;
  justify-self: start;
  width: auto;
  min-width: 0;
  text-align: left;
}

.mobile-tickers-menu > summary {
  box-sizing: border-box;
  background-color: var(--background);
  color: var(--forground);
  cursor: pointer;
  display: inline-block;
  list-style: none;
  min-width: 0;
  padding: 0.5em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
  width: auto;
}

.mobile-tickers-menu > summary::-webkit-details-marker { display: none; }
.mobile-tickers-menu > summary.ticker-selected,
.mobile-tickers-menu > summary.inverted {
  background-color: var(--forground);
  color: var(--background);
}

.mobile-tickers-panel {
  background-color: var(--background);
  border-top: 1px solid var(--forground);
  box-sizing: border-box;
  display: none;
  left: 0;
  max-height: 68vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 0;
  bottom: calc(2.9em + env(safe-area-inset-bottom));
  text-align: left;
  z-index: 1001;
}
.mobile-tickers-menu[open] .mobile-tickers-panel { display: block; }
.mobile-tickers-panel a {
  color: var(--forground);
  display: inline-block;
  padding: 0.5em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}
.mobile-tickers-panel a:hover,
.mobile-tickers-panel a.ticker-selected,
.mobile-tickers-panel a.inverted {
  background-color: var(--forground);
  color: var(--background);
  text-decoration: none;
}
ul#menu:not([style*="display: none"]) ~ .mobile-tickers-menu[open] .mobile-tickers-panel { display: none; }


/* Release 365: SORT is a first-class mobile feed filter.  The panel exposes
   the two orders and links to the actual ranking-parameter sliders. */
.mobile-sort-menu {
  display: block;
  grid-area: sort;
  justify-self: start;
  min-width: 0;
  text-align: left;
  width: auto;
}

.mobile-sort-menu > summary {
  box-sizing: border-box;
  background-color: var(--background);
  color: var(--forground);
  cursor: pointer;
  display: inline-block;
  list-style: none;
  min-width: 0;
  padding: 0.5em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
  width: auto;
}

.mobile-sort-menu > summary::-webkit-details-marker { display: none; }
.mobile-sort-panel {
  background-color: var(--background);
  border-top: 1px solid var(--forground);
  box-sizing: border-box;
  display: none;
  left: 0;
  max-height: 68vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 0;
  bottom: calc(2.9em + env(safe-area-inset-bottom));
  text-align: left;
  z-index: 1001;
}

.mobile-sort-menu[open] .mobile-sort-panel { display: block; }
.mobile-sort-panel a,
.mobile-sort-panel .link-button {
  background: var(--background);
  border: 0;
  border-radius: 0;
  color: var(--forground);
  display: inline-block;
  font: inherit;
  min-width: 0;
  padding: 0.5em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  width: auto;
}
.mobile-sort-panel a:hover,
.mobile-sort-panel .link-button:hover {
  background-color: var(--forground);
  color: var(--background);
  text-decoration: none;
}

/* Release 388: selected sort modes stay theme-neutral on mobile too. */
.mobile-sort-panel .sort-selected {
  background: var(--background);
  color: var(--forground);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
ul#menu:not([style*="display: none"]) ~ .mobile-sort-menu[open] .mobile-sort-panel { display: none; }

/* Release 332: admin mobile bottom navigation is TAGS / TICKERS / NIMDA / MENU.
   NIMDA is a compact native details panel and is rendered only for admins. */
header {
  grid-template-columns: auto auto auto auto 1fr;
  grid-template-areas:
    "menu menu menu menu menu"
    "tags tickers sort nimda toggle";
}

.mobile-nimda-menu {
  display: block;
  grid-area: nimda;
  justify-self: start;
  min-width: 0;
  text-align: left;
  width: auto;
}

.mobile-nimda-menu > summary {
  box-sizing: border-box;
  background-color: var(--background);
  color: var(--forground);
  cursor: pointer;
  display: inline-block;
  list-style: none;
  min-width: 0;
  padding: 0.5em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none;
  width: auto;
}

.mobile-nimda-menu > summary::-webkit-details-marker { display: none; }

.mobile-nimda-panel {
  background-color: var(--background);
  border-top: 1px solid var(--forground);
  box-sizing: border-box;
  display: none;
  left: 0;
  max-height: 68vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 0;
  bottom: calc(2.9em + env(safe-area-inset-bottom));
  text-align: left;
  z-index: 1001;
}

.mobile-nimda-menu[open] .mobile-nimda-panel { display: block; }

.mobile-nimda-panel a {
  color: var(--forground);
  display: inline-block;
  padding: 0.5em;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-nimda-panel a:hover {
  background-color: var(--forground);
  color: var(--background);
  text-decoration: none;
}

ul#menu:not([style*="display: none"]) ~ .mobile-nimda-menu[open] .mobile-nimda-panel {
  display: none;
}


/* Release 361: stack post-detail media cleanly on narrow screens. */
.post_details .post-detail-content {
  display: block;
}

.post_details .post-detail-image {
  float: none;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 65vh;
  height: auto;
  object-fit: contain;
  margin: 0 auto 1rem;
}

/* Release 373: touch uses the same voting model in a compact bottom drawer. */
.post-card-rating {
  margin-left: auto;
}

.post-card-rating-popover {
  position: fixed;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  width: auto;
  max-height: min(76vh, 38rem);
  overflow-y: auto;
  z-index: 140;
}

.post-card-rating:hover > .post-card-rating-popover {
  display: none;
}

.post-card-rating:focus-within > .post-card-rating-popover,
.post-card-rating.is-open > .post-card-rating-popover {
  display: block;
}

.post-card-rating-value {
  width: 2rem;
  height: 2rem;
}

/* Release 374: mobile keeps SORT in its existing drawer, but PARAMETERS now
   expands the actual sliders in place instead of leaving the current page. */
header#header > .ranking-parameter-panel {
  display: none !important;
}

.mobile-ranking-parameter-panel {
  border-top: 1px solid var(--forground);
  box-sizing: border-box;
  display: block;
  padding: 0.65rem;
  width: 100%;
}

.mobile-ranking-parameter-panel[hidden] { display: none !important; }

.mobile-ranking-parameter-panel .ranking-inline-form {
  display: grid;
  gap: 0.55rem;
}

.mobile-ranking-parameter-panel .ranking-inline-slider {
  grid-template-columns: 1fr;
}

.mobile-ranking-parameter-panel .ranking-inline-control {
  grid-template-columns: minmax(7rem, 1fr) minmax(5.3rem, auto);
}

.mobile-ranking-parameter-panel .ranking-inline-actions button,
.mobile-ranking-parameter-panel .ranking-inline-actions a {
  border: 1px solid var(--forground);
  margin: 0 -1px -1px 0;
  width: auto;
}

/* Release 375: keep RANKED and its PARAMETERS control together, then visibly
   separate the independent LATEST order. */
.mobile-sort-panel .sort-filter-divider {
  align-items: center;
  color: var(--forground);
  display: inline-flex;
  min-height: 2.15em;
  padding: 0 0.2em;
  user-select: none;
}

/* Release 385: mobile keeps authentication obvious without embedding the
   full credential forms in the compact bottom drawer. */
.post-card-rating-auth-inline,
.post-card-rating-auth-tabs {
  display: none;
}

.post-card-rating-auth-mobile-links {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.post-card-rating-auth-prompt {
  padding: 0.7rem;
}

/* Release 395: μ2¢ opens as a compact mobile bottom drawer. Credentials stay
   on the full auth pages; desktop alone embeds the forms in the post box. */
.post-card-micro-support-popover {
  bottom: var(--mobile-toolbar-height, 3.2rem);
  left: 0;
  max-height: 70vh;
  min-width: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: auto;
  width: 100%;
  z-index: 2600;
}

.micro-support-auth-inline,
.micro-support-auth-tabs { display: none; }
.micro-support-auth-mobile-links { display: flex; }
.micro-support-balance-grid { grid-template-columns: 1fr; }