/* ==========================================================================
   Windows 3.1 Theme Override for Passo.uno
   Loads after main.css to override all styles with Win 3.1 aesthetics
   ========================================================================== */

/* --- Win 3.1 Color Palette --- */
:root {
  --win31-desktop: #C0C0C0;
  --win31-frame: #C0C0C0;
  --win31-window-bg: #FFFFFF;
  --win31-text: #000000;
  --win31-titlebar-active: #000080;
  --win31-titlebar-active-bg: #000080;
  --win31-titlebar-inactive-bg: #FFFFFF;
  --win31-titlebar-inactive-text: #000000;
  --win31-titlebar-text: #FFFFFF;
  --win31-button-face: #C0C0C0;
  --win31-button-light: #FFFFFF;
  --win31-button-dark: #808080;
  --win31-border: #000000;
  --win31-selection-bg: #000080;
  --win31-selection-text: #FFFFFF;
  --win31-link: #00A866;
  --win31-link-visited: #00A866;
  --win31-blockquote-shadow: #b6bcc1;
  --win31-font-ui: "Microsoft Sans Serif", "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  --win31-font-content: "Fira Sans", "Segoe UI", Tahoma, Arial, sans-serif;
}

html[data-win31-theme="dark"] {
  --win31-desktop: #000000;
  --win31-frame: #9a9a9a;
  --win31-window-bg: #bfbfbf;
  --win31-text: #000000;
  --win31-titlebar-active: #4d2bb8;
  --win31-titlebar-active-bg: repeating-linear-gradient(45deg, #6e49db 0 2px, #4d2bb8 2px 4px);
  --win31-titlebar-inactive-bg: #9a9a9a;
  --win31-titlebar-inactive-text: #000000;
  --win31-titlebar-text: #ffffff;
  --win31-button-face: #c0c0c0;
  --win31-button-light: #ffffff;
  --win31-button-dark: #5a5a5a;
  --win31-border: #000000;
  --win31-selection-bg: #000000;
  --win31-selection-text: #ffffff;
  --win31-link: #003c96;
  --win31-link-visited: #2d2f8f;
  --win31-blockquote-shadow: #4a4a4a;
}

html[data-win31-theme="fun"] {
  --win31-desktop: #fff200;
  --win31-frame: #ff1a00;
  --win31-window-bg: #fff200;
  --win31-text: #000000;
  --win31-titlebar-active: #000000;
  --win31-titlebar-active-bg: #000000;
  --win31-titlebar-inactive-bg: #ff1a00;
  --win31-titlebar-inactive-text: #ffffff;
  --win31-titlebar-text: #ffffff;
  --win31-button-face: #c0c0c0;
  --win31-button-light: #ffffff;
  --win31-button-dark: #808080;
  --win31-border: #000000;
  --win31-selection-bg: #000000;
  --win31-selection-text: #ffffff;
  --win31-link: #b00000;
  --win31-link-visited: #7f0000;
}

/* --- Desktop / Body --- */
html {
  font-size: 18px;
  line-height: 1.6em;
  color: var(--win31-text);
  font-family: var(--win31-font-content);
}

body {
  background-color: var(--win31-desktop);
  background-image: url("/images/win31/chitz.png");
  background-repeat: repeat;
  background-position: left top;
  background-size: auto;
  margin: 8px;
}

::selection {
  background: var(--win31-selection-bg);
  color: var(--win31-selection-text);
}

/* --- Content Container --- */
.content {
  max-width: 840px;
  padding: 0;
}

.win31-app-window {
  margin-top: 1em;
}

/* --- Typography --- */
p {
  font-family: var(--win31-font-content);
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--win31-font-content);
  font-weight: bold;
}

h1 { font-size: 1.2rem; margin-top: 1.5em; margin-bottom: 0.2em; }
h2, h3, h4, h5, h6 { font-size: 1rem; margin-top: 2em; margin-bottom: 0.2em; }
h2 { margin-top: 0.2em; margin-bottom: 0.2em; }

/* Remove the markdown-style # prefixes */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  content: none;
}

/* --- Links --- */
a {
  color: var(--win31-link);
  font-weight: normal;
  text-decoration: underline;
}

a:hover {
  color: var(--win31-link);
  text-decoration: underline;
}

a:visited {
  color: var(--win31-link-visited);
}

/* --- Win 3.1 Window Component --- */
.win31-window {
  background: var(--win31-frame);
  border: 1px solid var(--win31-border);
  padding: 3px;
  margin-bottom: 4px;
}

/* --- Title Bar --- */
.win31-titlebar {
  background: var(--win31-titlebar-active-bg);
  color: var(--win31-titlebar-text);
  display: flex;
  align-items: stretch;
  height: 31px;
  border: 1px solid var(--win31-border);
  font-size: 16px;
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeSpeed;
  font-smooth: never;
  user-select: none;
  cursor: default;
}

.win31-sysmenu,
.win31-sysmenu:visited,
.win31-sysmenu:hover,
.win31-sysmenu:active,
.win31-sysmenu:focus {
  display: block;
  flex-shrink: 0;
  width: 28px;
  align-self: stretch;
  background: url("/images/win31/sysmenu-v2.png") center center no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  border: none;
  color: transparent;
  text-decoration: none;
}

.win31-titlebar-text {
  flex-grow: 1;
  text-align: center;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: normal;
}

.win31-titlebar-home,
.win31-titlebar-home:visited,
.win31-titlebar-home:hover,
.win31-titlebar-home:active,
.win31-titlebar-home:focus {
  color: var(--win31-titlebar-text);
  text-decoration: none;
  border: none;
  background: transparent;
  font-weight: normal;
}

.win31-titlebar-buttons {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}

.win31-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  background: var(--win31-button-face);
  border: none;
  border-left: 1px solid var(--win31-border);
  box-shadow:
    inset -1px -1px 0 var(--win31-button-dark),
    inset 1px 1px 0 var(--win31-button-light),
    inset -2px -2px 0 var(--win31-button-dark),
    inset 2px 2px 0 var(--win31-button-light);
  font-family: var(--win31-font-ui);
  color: var(--win31-text);
  padding: 0;
  cursor: default;
  line-height: 1;
  position: relative;
  font-size: 0;
}

.win31-btn[data-btn="min"]::before,
.win31-btn[data-btn="max"]::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.win31-btn[data-btn="min"]::before {
  border-top: 6px solid var(--win31-text);
  border-bottom: 0;
}

.win31-btn[data-btn="max"]::before {
  border-bottom: 6px solid var(--win31-text);
  border-top: 0;
}

.win31-btn:active {
  box-shadow: inset 1px 1px 0 var(--win31-button-dark);
}

/* --- Menu Bar (for header nav) --- */
.win31-menubar {
  background: var(--win31-window-bg);
  border: 1px solid var(--win31-border);
  border-top: none;
  padding: 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  font-size: 16px;
  height: 31px;
  box-sizing: border-box;
}

.win31-menubar a {
  display: flex;
  align-items: center;
  padding: 0 8px;
  white-space: nowrap;
  color: var(--win31-text);
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeSpeed;
  font-smooth: never;
  text-decoration: none;
  font-weight: bold;
  border-bottom: none;
  margin-right: 0;
}

.win31-menubar a u {
  text-decoration: underline;
  text-underline-offset: 1px;
}

.win31-menubar a:hover {
  background: var(--win31-selection-bg);
  color: var(--win31-selection-text);
  text-decoration: none;
}

.win31-menubar a:visited {
  color: var(--win31-text);
}

.win31-menubar a:visited:hover {
  color: var(--win31-selection-text);
}

.win31-menubar-link {
  display: flex;
  align-items: center;
  padding: 0 8px;
  white-space: nowrap;
  color: var(--win31-text);
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeSpeed;
  font-smooth: never;
  text-decoration: none;
  font-weight: bold;
  border-bottom: none;
  margin-right: 0;
}

.win31-menubar-link u {
  text-decoration: underline;
  text-underline-offset: 1px;
}

.win31-menubar a.win31-menubar-link,
.win31-menubar a.win31-menubar-link:visited,
.win31-menubar a.win31-menubar-link:hover,
.win31-menubar a.win31-menubar-link:visited:hover {
  background: transparent;
  color: var(--win31-text);
  text-decoration: none;
}

.win31-menubar a.win31-menubar-link.is-current,
.win31-menubar a.win31-menubar-link.is-current:visited,
.win31-menubar a.win31-menubar-link.is-current:hover,
.win31-menubar a.win31-menubar-link.is-current:visited:hover {
  background: var(--win31-titlebar-active-bg);
  color: var(--win31-titlebar-text);
}

.win31-menu {
  display: flex;
  align-items: stretch;
}

.win31-menu-label {
  display: flex;
  align-items: center;
  padding: 0 8px;
  white-space: nowrap;
  color: var(--win31-text);
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: none;
  font-weight: bold;
  cursor: default;
  user-select: none;
}

.win31-menu-label u {
  text-decoration: underline;
  text-underline-offset: 1px;
}

.win31-menu.is-open > .win31-menu-label {
  background: var(--win31-titlebar-active-bg);
  color: var(--win31-titlebar-text);
}

.win31-menu-dropdown {
  display: none;
  position: fixed;
  z-index: 100;
  min-width: 160px;
  background: var(--win31-window-bg);
  border: 1px solid var(--win31-border);
  box-shadow: 2px 2px 0 var(--win31-button-dark);
  padding: 4px 0;
  flex-direction: column;
}

.win31-menu.is-open > .win31-menu-dropdown {
  display: flex;
}

.win31-theme-dropdown {
  min-width: 220px;
}

.win31-menu-item,
.win31-menubar a.win31-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 24px 8px 16px;
  background: transparent;
  border: none;
  color: var(--win31-text);
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: none;
  font-size: 16px;
  font-weight: bold;
  cursor: default;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
}

.win31-menu-item u {
  text-decoration: underline;
  text-underline-offset: 1px;
}

.win31-menu-item:hover,
.win31-menu-item.is-hover,
.win31-menu-item:focus,
.win31-menubar a.win31-menu-item:hover,
.win31-menubar a.win31-menu-item.is-hover,
.win31-menubar a.win31-menu-item:focus {
  background: var(--win31-titlebar-active-bg);
  color: var(--win31-titlebar-text);
  outline: none;
}

.win31-menu-separator {
  border: none;
  border-top: 1px solid var(--win31-button-dark);
  margin: 2px 4px;
}

.win31-menu-item.is-current::before {
  content: "\2713  ";
  margin-left: -12px;
}

/* --- Window Body --- */
.win31-window-body {
  background: var(--win31-window-bg);
  border: 1px solid var(--win31-border);
  border-top: none;
  padding: 8px 12px;
  color: var(--win31-text);
}

.win31-app-body {
  padding-left: 32px;
  padding-right: 32px;
  overflow-x: hidden;
}

/* Sunken inset for content areas */
.win31-window-body-sunken {
  background: var(--win31-window-bg);
  box-shadow: inset 1px 1px 0 var(--win31-button-dark), inset -1px -1px 0 var(--win31-button-light);
  border: 1px solid var(--win31-border);
  border-top: none;
  padding: 8px 12px;
  color: var(--win31-text);
}

/* --- Override existing container styles --- */

/* App chrome inside the unified window shell. */
.win31-app-chrome {
  border: none;
  box-shadow: none;
  padding: 0;
  background-color: transparent;
  margin: 0;
  line-height: normal;
  display: block;
  overflow: visible;
}

/* Main content area */
main {
  border: none;
  box-shadow: none;
  padding: 0;
  background-color: transparent;
}

/* Footer */
footer {
  border: none;
  box-shadow: none;
  padding: 0;
  background-color: transparent;
  margin-top: 0;
  display: block;
  font-size: 16px;
}

.footer-info {
  font-family: var(--win31-font-ui);
  font-size: 16px;
  padding: 0;
}

/* Page title box */
.page-title {
  border: none;
  box-shadow: none;
  padding: 6px 8px;
  margin: -8px -32px 12px -32px;
  background: var(--win31-frame);
  border-bottom: 1px solid var(--win31-button-dark);
}

.page-title h1 {
  margin-top: 0;
  margin-bottom: 0.2em;
  font-size: 1rem;
}

.page-title p {
  margin-bottom: 0;
  font-size: 16px;
}

/* Posts container */
.posts {
  border: none;
  box-shadow: none;
  padding: 0;
  background-color: transparent;
}

/* --- Images --- */
img {
  border: 2px solid var(--win31-border);
  box-shadow: inset 1px 1px 0 var(--win31-button-dark), inset -1px -1px 0 var(--win31-button-light);
}

.post-card-thumb {
  border: none;
  box-shadow: none;
}

/* --- Code blocks --- */
code {
  background-color: var(--win31-window-bg);
  padding: .1em .2em;
  font-family: "Fixedsys", "Courier New", monospace;
  font-size: 13px;
}

pre {
  background-color: var(--win31-window-bg);
  border: 2px solid var(--win31-border);
  box-shadow: inset 1px 1px 0 var(--win31-button-dark), inset -1px -1px 0 var(--win31-button-light);
  padding: 8px;
  line-height: 1.4;
}

pre code {
  font-size: 13px;
}

.highlight {
  font-family: "Fixedsys", "Courier New", monospace;
  font-size: 13px;
}

/* --- Blockquote --- */
blockquote {
  border: 1px solid var(--win31-border);
  color: var(--win31-text);
  background-color: #fff9cc;
  padding: 18px 22px;
  margin: 0.9em 0 calc(0.9em + 18px) 0;
  box-shadow: 10px 10px 0 var(--win31-blockquote-shadow);
}

blockquote p {
  margin: 0;
}

blockquote p + p {
  margin-top: 0.7em;
}

/* --- Horizontal rule --- */
hr {
  border: 0;
  border-top: 1px solid var(--win31-button-dark);
  border-bottom: 1px solid var(--win31-button-light);
  margin: 0.75em 0;
}

/* --- Lists --- */
ul > li::before {
  content: '\25AA ';
  font-weight: normal;
}

ul li, ol li {
  font-family: var(--win31-font-content);
  font-size: 0.9rem;
}

/* --- Tables --- */
table th {
  background: var(--win31-frame);
  border: 1px solid var(--win31-border);
  box-shadow: inset -1px -1px 0 var(--win31-button-dark), inset 1px 1px 0 var(--win31-button-light);
  font-size: inherit;
}

table td {
  border: 1px solid var(--win31-button-dark);
}

/* --- Header main title --- */
.main {
  font-size: 1rem;
  padding-left: 0;
}

.main a {
  text-decoration: none;
  color: var(--win31-text);
}

/* --- Nav overrides --- */
nav {
  text-align: left;
  margin: 0;
  padding: 0;
}

nav a {
  margin-right: 0;
}

/* --- SVG icons --- */
svg {
  max-height: 15px;
}

/* --- Post metadata --- */
.meta {
  font-family: var(--win31-font-content);
  font-size: 16px;
  font-style: normal;
  color: var(--win31-text);
}

time {
  font-family: var(--win31-font-content);
  font-size: 16px;
  font-style: normal;
  color: var(--win31-text);
}

/* --- Title sections --- */
.title h1 {
  margin-top: 0.75em;
  font-size: 1.3rem;
  margin-bottom: 0.2em;
}

article .title {
  font-size: 1.3rem;
  margin-bottom: 0.2em;
}

/* --- TOC --- */
.toc {
  background: var(--win31-frame);
  border: 2px solid var(--win31-border);
  box-shadow: inset -1px -1px 0 var(--win31-button-dark), inset 1px 1px 0 var(--win31-button-light);
  padding: 8px;
  border-radius: 0;
  color: var(--win31-text);
}

/* --- tl;dr --- */
.tldr {
  background: var(--win31-frame);
  border: 2px solid var(--win31-border);
  box-shadow: inset -1px -1px 0 var(--win31-button-dark), inset 1px 1px 0 var(--win31-button-light);
  padding: 8px;
  margin-bottom: 1em;
}

/* --- File Manager Lists --- */
.win31-fileman {
  margin: -8px -32px -8px -32px;
  border: 1px solid var(--win31-border);
  background: var(--win31-frame);
}

.win31-fileman-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--win31-border);
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 16px;
  background: var(--win31-frame);
}

.win31-fileman-pane {
  padding: 0;
  border: none;
}

.win31-fileman-drives {
  flex: 0 0 auto;
  width: min(195px, 100%);
  aspect-ratio: 390 / 64;
  background: url("/drives.png") left center / contain no-repeat;
  image-rendering: pixelated;
}

.win31-fileman-path {
  margin-left: auto;
  white-space: nowrap;
  font-weight: bold;
}

.win31-fileman-list {
  max-height: 70vh;
  overflow: auto;
  background: var(--win31-window-bg);
}

.win31-fileman-row,
.win31-fileman-row:visited {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) 92px 96px 112px 72px;
  align-items: center;
  gap: 14px;
  padding: 4px 10px;
  color: var(--win31-text);
  text-decoration: none;
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 16px;
}

.win31-fileman-row:hover,
.win31-fileman-row:focus,
.win31-fileman-row.is-current {
  background: var(--win31-selection-bg);
  color: var(--win31-selection-text);
  text-decoration: none;
  outline: none;
}

.win31-fileman-row:hover .draft-label,
.win31-fileman-row:focus .draft-label,
.win31-fileman-row.is-current .draft-label {
  background: var(--win31-selection-text);
  color: var(--win31-selection-bg);
}

.win31-fileman-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: normal;
}

.win31-fileman-name-text,
.win31-fileman-date,
.win31-fileman-time,
.win31-fileman-size,
.win31-fileman-type {
  min-width: 0;
}

.win31-fileman-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win31-fileman-size,
.win31-fileman-date,
.win31-fileman-time {
  text-align: right;
}

.win31-fileman-type {
  text-transform: lowercase;
}

.win31-fileman-icon {
  flex: 0 0 21px;
  width: 21px;
  height: 22px;
  background: url("/file.png") left top / 21px 22px no-repeat;
  image-rendering: pixelated;
}

.win31-fileman-status {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-top: 1px solid var(--win31-border);
  background: var(--win31-frame);
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 14px;
}

.win31-fileman-status-pane {
  flex: 1 1 0;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--win31-border);
  box-shadow: inset 1px 1px 0 var(--win31-button-dark), inset -1px -1px 0 var(--win31-button-light);
}

/* --- Post hero image --- */
.post-hero {
  position: relative;
  margin: -8px -32px 12px -32px !important;
  aspect-ratio: 1200 / 627;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--win31-border);
}

.post-hero-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 1rem 0.75rem 1rem !important;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 100%) !important;
}

.post-hero-title h1.title {
  font-family: var(--win31-font-content) !important;
  color: #fff !important;
  font-size: 1.3rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-shadow: 1px 1px 0 #000 !important;
}

.post-hero-title h1.title::before {
  content: none !important;
}

.post-hero-title .meta-eyebrow {
  color: rgba(255,255,255,0.9) !important;
  margin-top: 0.3rem;
}

.post-hero-title .meta-eyebrow time,
.post-hero-title .meta-eyebrow span,
.post-hero-title .meta-eyebrow a {
  color: inherit !important;
}

.meta-eyebrow {
  font-family: var(--win31-font-content) !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.meta-eyebrow time {
  font-family: inherit !important;
  font-size: inherit !important;
}

/* --- Social share buttons (override inline styles) --- */
.social-share {
  margin: 1rem 0 !important;
  gap: 4px !important;
}

.linkedin-button {
  background-color: var(--win31-button-face) !important;
  color: var(--win31-text) !important;
  border: 1px solid var(--win31-border) !important;
  border-radius: 2.5px !important;
  box-shadow:
    inset -1px -1px 0 var(--win31-button-dark),
    inset 1px 1px 0 var(--win31-button-light),
    inset -2px -2px 0 var(--win31-button-dark),
    inset 2px 2px 0 var(--win31-button-light) !important;
  transition: none !important;
  font-family: var(--win31-font-ui) !important;
  font-size: 16px !important;
  font-weight: normal !important;
  height: 32px !important;
  min-width: 70px !important;
  padding: 0 8px !important;
  gap: 4px !important;
}

.linkedin-button:hover {
  background-color: var(--win31-button-face) !important;
  transform: none !important;
  box-shadow:
    inset -1px -1px 0 var(--win31-button-dark),
    inset 1px 1px 0 var(--win31-button-light),
    inset -2px -2px 0 var(--win31-button-dark),
    inset 2px 2px 0 var(--win31-button-light) !important;
  color: var(--win31-text) !important;
}

.linkedin-button:active {
  box-shadow:
    inset 1px 1px 0 var(--win31-border),
    inset -1px -1px 0 var(--win31-border),
    inset 2px 2px 0 var(--win31-button-dark) !important;
}

.linkedin-button svg path {
  fill: var(--win31-text) !important;
}

.share-button,
.hn-button,
.bluesky-button,
.mastodon-button,
.x-button,
.email-button,
.whatsapp-button {
  background-color: var(--win31-button-face) !important;
  border: 1px solid var(--win31-border) !important;
  border-radius: 2.5px !important;
  box-shadow:
    inset -1px -1px 0 var(--win31-button-dark),
    inset 1px 1px 0 var(--win31-button-light),
    inset -2px -2px 0 var(--win31-button-dark),
    inset 2px 2px 0 var(--win31-button-light) !important;
  transition: none !important;
  width: 32px !important;
  height: 32px !important;
}

.share-button:hover,
.hn-button:hover,
.bluesky-button:hover,
.mastodon-button:hover,
.x-button:hover,
.email-button:hover,
.whatsapp-button:hover {
  background-color: var(--win31-button-face) !important;
  transform: none !important;
}

.share-button:active,
.hn-button:active,
.bluesky-button:active,
.mastodon-button:active,
.x-button:active,
.email-button:active,
.whatsapp-button:active {
  box-shadow:
    inset 1px 1px 0 var(--win31-border),
    inset -1px -1px 0 var(--win31-border),
    inset 2px 2px 0 var(--win31-button-dark) !important;
}

.share-button svg path {
  fill: var(--win31-text) !important;
}

/* --- Callout box --- */
.callout {
  border: 2px solid var(--win31-border);
  border-style: solid;
  background: var(--win31-frame);
  box-shadow: inset -1px -1px 0 var(--win31-button-dark), inset 1px 1px 0 var(--win31-button-light);
  font-size: 14px;
}

/* --- 404 Dialog --- */
.win31-404-page {
  background: #ffffff;
  padding: 20px 24px 24px;
  margin: 0;
}

.win31-404-page h1 {
  margin: 0 0 16px;
  font-family: var(--win31-font-ui);
  font-size: 1.25rem;
  line-height: 1.2;
}

.win31-404-page p {
  margin: 0;
  font-family: var(--win31-font-content);
}

.win31-404-page p + p,
.win31-404-page ul {
  margin-top: 16px;
}

.win31-404-page ul {
  margin-bottom: 0;
}

.win31-404-page li + li {
  margin-top: 4px;
}

.win31-status-window {
  border: 4px solid var(--win31-titlebar-active);
  padding: 0;
}

.win31-status-window .win31-titlebar {
  border: 1px solid var(--win31-window-bg);
  border-bottom: 1px solid var(--win31-border);
}

.win31-dialog {
  background: var(--win31-frame);
  border: 4px solid var(--win31-titlebar-active);
  padding: 0;
  max-width: 400px;
  margin: 4em auto;
}

.win31-dialog .win31-titlebar {
  border: 1px solid var(--win31-window-bg);
  border-bottom: 1px solid var(--win31-border);
}

.win31-dialog-body {
  padding: 20px;
  text-align: center;
  background: var(--win31-frame);
}

.win31-dialog-body p {
  margin: 0 0 16px 0;
}

.win31-dialog-btn {
  display: inline-block;
  background: var(--win31-button-face);
  border: 1px solid var(--win31-border);
  border-radius: 2.5px;
  box-shadow:
    inset -1px -1px 0 var(--win31-button-dark),
    inset 1px 1px 0 var(--win31-button-light),
    inset -2px -2px 0 var(--win31-button-dark),
    inset 2px 2px 0 var(--win31-button-light);
  min-width: 70px;
  padding: 3px 16px;
  font-family: var(--win31-font-ui);
  font-size: 16px;
  color: var(--win31-text);
  text-decoration: none;
  cursor: default;
}

.win31-dialog-btn:hover {
  color: var(--win31-text);
  text-decoration: none;
}

.win31-dialog-btn:active {
  box-shadow:
    inset 1px 1px 0 var(--win31-border),
    inset -1px -1px 0 var(--win31-border),
    inset 2px 2px 0 var(--win31-button-dark);
}

/* --- Site description --- */
.site-description {
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--win31-button-dark);
}

.site-description p {
  margin: 0;
  font-size: 16px;
}

/* --- Paginator --- */
.list-item {
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}

.home-list .list-item:first-child .title {
  margin-top: 0.75em;
}

.list-item .title a {
  text-decoration: none;
}

.list-item .title a:hover {
  text-decoration: underline;
}

.readmore {
  font-size: 16px;
}

.readmore-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.win31-readmore-btn {
  display: inline-block;
  background: var(--win31-button-face);
  border: 1px solid var(--win31-border);
  box-shadow:
    inset -1px -1px 0 var(--win31-button-dark),
    inset 1px 1px 0 var(--win31-button-light),
    inset -2px -2px 0 var(--win31-button-dark),
    inset 2px 2px 0 var(--win31-button-light);
  color: var(--win31-text) !important;
  text-decoration: none !important;
  font-weight: normal;
  padding: 2px 10px;
  margin-top: 2px;
}

.win31-readmore-btn:hover {
  color: var(--win31-text) !important;
  text-decoration: none !important;
}

.win31-readmore-btn:active {
  box-shadow:
    inset 1px 1px 0 var(--win31-border),
    inset -1px -1px 0 var(--win31-border),
    inset 2px 2px 0 var(--win31-button-dark);
}

.win31-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--win31-button-dark);
  padding-top: 0.5em;
  margin-top: 0.5em;
}

.win31-page-btn {
  display: inline-block;
  background: var(--win31-button-face);
  border: 1px solid var(--win31-border);
  box-shadow:
    inset -1px -1px 0 var(--win31-button-dark),
    inset 1px 1px 0 var(--win31-button-light),
    inset -2px -2px 0 var(--win31-button-dark),
    inset 2px 2px 0 var(--win31-button-light);
  color: var(--win31-text) !important;
  text-decoration: none !important;
  font-weight: normal;
  padding: 2px 9px;
}

.win31-page-btn:hover {
  color: var(--win31-text) !important;
  text-decoration: none !important;
}

.win31-page-btn:active {
  box-shadow:
    inset 1px 1px 0 var(--win31-border),
    inset -1px -1px 0 var(--win31-border),
    inset 2px 2px 0 var(--win31-button-dark);
}

/* --- Draft label --- */
.draft-label {
  background: var(--win31-titlebar-active-bg);
  color: var(--win31-titlebar-text);
  padding: 0 4px;
  font-size: 14px;
  font-weight: bold;
}

/* --- Scrollbars (Webkit) --- */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: var(--win31-frame);
}

::-webkit-scrollbar-track {
  background: var(--win31-frame);
  border: 1px solid var(--win31-border);
}

::-webkit-scrollbar-thumb {
  background: var(--win31-button-face);
  border: 1px solid var(--win31-border);
  box-shadow: inset -1px -1px 0 var(--win31-button-dark), inset 1px 1px 0 var(--win31-button-light);
}

::-webkit-scrollbar-button {
  background: var(--win31-button-face);
  border: 1px solid var(--win31-border);
  box-shadow: inset -1px -1px 0 var(--win31-button-dark), inset 1px 1px 0 var(--win31-button-light);
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-corner {
  background: var(--win31-frame);
}

/* Firefox scrollbar */
* {
  scrollbar-color: var(--win31-button-face) var(--win31-frame);
  scrollbar-width: auto;
}

/* --- Responsive --- */
@media only screen and (max-width: 600px) {
  .win31-fileman-row {
    grid-template-columns: minmax(0, 1fr) 80px 86px;
    gap: 8px;
  }

  .win31-fileman-row span:nth-child(4) {
    display: none;
  }

  .win31-fileman-row span:nth-child(5) {
    display: none;
  }

  .win31-fileman-list {
    max-height: none;
  }

  .win31-fileman-status {
    flex-direction: column;
  }

  .win31-window-body:not(.win31-app-body) {
    padding: 6px 8px;
  }

  .win31-app-body {
    padding-left: 32px;
    padding-right: 32px;
  }

  .content {
    padding: 0;
  }

  body {
    margin: 4px;
  }
}

@media only screen and (max-width: 400px) {
  .win31-menubar a {
    font-size: 14px;
    padding: 0 5px;
  }

  .win31-fileman-toolbar {
    padding: 4px 6px;
    font-size: 14px;
  }

  .win31-fileman-row {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  .win31-fileman-row span:nth-child(3) {
    display: none;
  }

  .win31-fileman-drives {
    width: 100%;
  }

  .win31-app-window {
    margin-top: 4px;
  }
}

@media only screen and (max-width: 896px) {
  h1, h2, h3, h4, h5, h6 {
    font-size: 1rem;
  }

  h1 {
    font-size: 1.05rem;
  }

  .title h1 {
    font-size: 1rem;
  }

  article .title {
    font-size: 1rem;
  }

  time {
    font-size: 16px;
  }

  .meta {
    font-size: 16px;
  }

  .main {
    padding-left: 0;
  }
}