/* Copyright © 2026 Olaf Kolkman */
/* SPDX-License-Identifier: GPL-3.0-or-later */

@import url('https://fonts.googleapis.com/css2?family=Asset&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
  --surface-0: #313244;
  --surface-1: #45475a;
  --surface-2: #585b70;
  --text: #cdd6f4;
  --subtext: #a6adc8;
  --muted: #7f849c;
  --mauve: #cba6f7;
  --lavender: #b4befe;
  --blue: #89b4fa;
  --teal: #94e2d5;
  --peach: #fab387;
  --red: #f38ba8;
  --border: rgba(205, 214, 244, 0.12);
  --shadow: 0 18px 50px rgba(17, 17, 27, 0.28);
}

:root[data-theme='plain-day'] {
  --base: #f4f1ea; --mantle: #e8e3d8; --crust: #d7d0c2;
  --surface-0: #fffdf8; --surface-1: #e5ded1; --surface-2: #c8beae;
  --text: #2f2b27; --subtext: #514a42; --muted: #6b6258;
  --mauve: #7a3d6e; --lavender: #5d4b84; --blue: #315c78;
  --teal: #397c72; --peach: #a15d3d; --red: #a44250;
  --border: rgba(47, 43, 39, 0.16); --shadow: 0 18px 50px rgba(47, 43, 39, 0.16);
}

:root[data-theme='plain-night'] {
  --base: #181818; --mantle: #111111; --crust: #090909;
  --surface-0: #262626; --surface-1: #353535; --surface-2: #4b4b4b;
  --text: #eeeeee; --subtext: #c1c1c1; --muted: #929292;
  --mauve: #d59acb; --lavender: #b9b4e8; --blue: #8ebbd8;
  --teal: #8bc9bd; --peach: #e2ae88; --red: #ec929f;
  --border: rgba(238, 238, 238, 0.14); --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

:root[data-theme='latte'] {
  --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8;
  --surface-0: #ccd0da; --surface-1: #bcc0cc; --surface-2: #acb0be;
  --text: #3d4058; --subtext: #51546b; --muted: #65687c;
  --mauve: #7627c7; --lavender: #5946b2; --blue: #1854c7;
  --teal: #179299; --peach: #fe640b; --red: #d20f39;
  --border: rgba(76, 79, 105, 0.16); --shadow: 0 18px 50px rgba(76, 79, 105, 0.16);
}

:root[data-theme='frappe'] {
  --base: #303446; --mantle: #292c3c; --crust: #232634;
  --surface-0: #414559; --surface-1: #51576d; --surface-2: #626880;
  --text: #c6d0f5; --subtext: #b5bfe2; --muted: #838ba7;
  --mauve: #ca9ee6; --lavender: #babbf1; --blue: #8caaee;
  --teal: #81c8be; --peach: #ef9f76; --red: #e78284;
  --border: rgba(198, 208, 245, 0.12); --shadow: 0 18px 50px rgba(35, 38, 52, 0.3);
}

:root[data-theme='macchiato'] {
  --base: #24273a; --mantle: #1e2030; --crust: #181926;
  --surface-0: #363a4f; --surface-1: #494d64; --surface-2: #5b6078;
  --text: #cad3f5; --subtext: #b8c0e0; --muted: #8087a2;
  --mauve: #c6a0f6; --lavender: #b7bdf8; --blue: #8aadf4;
  --teal: #8bd5ca; --peach: #f5a97f; --red: #ed8796;
  --border: rgba(202, 211, 245, 0.12); --shadow: 0 18px 50px rgba(24, 25, 38, 0.34);
}

:root[data-theme='dracula'] {
  --base: #282a36; --mantle: #21222c; --crust: #191a21;
  --surface-0: #44475a; --surface-1: #6272a4; --surface-2: #7886b5;
  --text: #f8f8f2; --subtext: #d6d6d0; --muted: #a7a7a0;
  --mauve: #ff79c6; --lavender: #bd93f9; --blue: #8be9fd;
  --teal: #50fa7b; --peach: #ffb86c; --red: #ff5555;
  --border: rgba(248, 248, 242, 0.14); --shadow: 0 18px 50px rgba(25, 26, 33, 0.35);
}

:root[data-theme='nord'] {
  --base: #2e3440; --mantle: #272c36; --crust: #242933;
  --surface-0: #3b4252; --surface-1: #434c5e; --surface-2: #4c566a;
  --text: #eceff4; --subtext: #d8dee9; --muted: #aeb8c8;
  --mauve: #b48ead; --lavender: #d8dee9; --blue: #88c0d0;
  --teal: #a3be8c; --peach: #d08770; --red: #bf616a;
  --border: rgba(236, 239, 244, 0.14); --shadow: 0 18px 50px rgba(36, 41, 51, 0.35);
}

:root[data-theme='solarized'] {
  --base: #fdf6e3; --mantle: #eee8d5; --crust: #e3ddc9;
  --surface-0: #eee8d5; --surface-1: #ddd6c1; --surface-2: #c9c1aa;
  --text: #073642; --subtext: #586e75; --muted: #657b83;
  --mauve: #6c71c4; --lavender: #268bd2; --blue: #268bd2;
  --teal: #2aa198; --peach: #cb4b16; --red: #dc322f;
  --border: rgba(7, 54, 66, 0.18); --shadow: 0 18px 50px rgba(7, 54, 66, 0.14);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(145deg, rgba(203, 166, 247, 0.06), transparent 36%),
    var(--base);
  color: var(--text);
  font-family: 'DM Sans', 'Avenir Next', sans-serif;
  line-height: 1.5;
}

body::selection {
  background: var(--mauve);
  color: var(--crust);
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}


.site-header {
  position: relative;
  z-index: 20;
  padding: 6px 0 8px;
  background:
    linear-gradient(115deg, var(--mantle), transparent 45%),
    rgba(203, 166, 247, 0.18);
  border-bottom: 1px solid var(--border);
}

.site-header::after {
  position: absolute;
  right: 12%;
  bottom: -52px;
  width: 180px;
  height: 100px;
  border-top: 1px solid rgba(180, 190, 254, 0.28);
  border-radius: 50%;
  content: '';
  transform: rotate(-12deg);
}

.site-header h1,
.link-item h2 {
  font-family: 'Space Grotesk', 'Avenir Next', sans-serif;
  letter-spacing: 0;
}

.site-header h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}

.site-logo {
  display: block;
  width: min(260px, 70vw);
  height: 80px;
  margin-bottom: 12px;
  object-fit: contain;
  object-position: left center;
}

.site-header .site-logo + h1,
.feed-link {
  font-family: 'Asset', 'Space Grotesk', sans-serif;
}

.site-header p {
  max-width: 34rem;
  margin: 14px 0 0;
  color: var(--subtext);
  font-size: 1.05rem;
}

.header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.header-tools {
  display: grid;
  flex: 1 1 auto;
  justify-items: end;
  gap: 8px;
}

.header-tools .toolbar {
  width: min(100%, 560px);
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.header-tools .toolbar label {
  min-width: 0;
  flex: 1 1 110px;
  font-size: 0.68rem;
}

.header-tools .toolbar select {
  min-width: 0;
  padding: 6px 8px;
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  position: relative;
}

.theme-picker {
  width: auto;
  min-width: 132px;
  padding: 8px 10px;
  border: 1px solid var(--surface-2);
  border-radius: 7px;
  background: var(--surface-0);
  color: var(--text);
  font: inherit;
}

.menu-toggle {
  min-width: 0;
  padding: 10px 13px;
  border-color: var(--surface-2);
  background: var(--surface-0);
  color: var(--text);
}

.menu-toggle::before {
  content: '\2630';
  margin-right: 7px;
  font-size: 1.1em;
}

.auth-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  min-width: 190px;
  gap: 4px;
  padding: 8px;
  background: var(--surface-0);
  border: 1px solid var(--surface-1);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.auth-menu a,
.auth-menu button {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
}

.auth-menu a:hover,
.auth-menu button:hover {
  background: var(--surface-1);
  color: var(--lavender);
}

.auth-menu .hidden {
  display: none;
}

.auth-session {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}

.auth-session .user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-button {
  min-width: 0;
  border-color: rgba(243, 139, 168, 0.45);
  background: transparent;
  color: var(--red);
}

.logout-button:hover {
  border-color: var(--red);
  background: rgba(243, 139, 168, 0.12);
  color: var(--red);
}

main.container {
  position: relative;
  z-index: 1;
  padding-top: 28px;
  padding-bottom: 64px;
}

.site-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 24px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
}

.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer a:active {
  color: var(--lavender);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px;
  padding: 16px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.site-header .toolbar {
  margin-top: 18px;
  margin-bottom: 0;
}

.toolbar label,
.settings-panel label {
  display: grid;
  gap: 7px;
  color: var(--subtext);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 9px !important;
  text-transform: none !important;
}

.checkbox-label input {
  width: auto;
  min-width: 0;
}

.toolbar label {
  flex: 1 1 220px;
}

select,
input,
textarea,
button {
  max-width: 100%;
  min-width: 180px;
  padding: 2px 2px;
  border: 1px solid var(--surface-1);
  border-radius: 8px;
  background: var(--surface-0);
  color: var(--text);
  font: inherit;
}

select:focus,
input:focus,
textarea:focus,
button:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 2px;
  border-color: var(--lavender);
}

::placeholder {
  color: var(--muted);
}

.settings-panel form {
  display: grid;
  gap: 16px;
  max-width: 560px;
}

.theme-options {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.theme-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.email-address-list {
  display: grid;
  gap: 8px;
}

.email-address-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.email-address-row button {
  min-width: 0;
  padding: 5px 9px;
  font-size: 0.82rem;
}

.settings-panel textarea {
  min-height: 110px;
  resize: vertical;
}

.readonly-value {
  display: block;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--mantle);
  color: var(--lavender);
  font-weight: 600;
}

.profile-avatar-preview {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 2px solid var(--mauve);
  border-radius: 50%;
}

button {
  width: fit-content;
  border-color: var(--mauve);
  background: var(--mauve);
  color: var(--crust);
  cursor: pointer;
  font-weight: 700;
  transition: filter 160ms ease, transform 160ms ease;
}

button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

button:disabled {
  cursor: wait;
  opacity: 0.6;
  transform: none;
}

.status {
  min-height: 1.25em;
  margin: 0;
  color: var(--teal);
}

.hidden {
  display: none;
}

.auth-notice {
  margin: 0 0 20px;
  color: var(--subtext);
}

.auth-notice a,
.link-item a {
  color: var(--lavender);
}

.auth-notice a:hover,
.link-item a:hover {
  color: var(--mauve);
}

.plugin-list,
.feed {
  display: grid;
  gap: 8px;
}

.plugin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.plugin-row:last-child {
  border-bottom: 0;
}

.plugin-row button {
  min-width: 0;
  padding: 5px 5px;
  background: var(--surface-1);
  border-color: var(--surface-2);
  color: var(--text);
}

.user-admin-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--subtext);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.user-admin-toggle input {
  width: auto;
  min-width: 0;
}

.danger-button {
  border-color: rgba(243, 139, 168, 0.45) !important;
  background: transparent !important;
  color: var(--red) !important;
}

.edit-button {
  min-width: 0;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--surface-1);
  border-color: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
}

.entry-actions {
  display: flex;
  float: right;
  gap: 8px;
  margin: 0 0 8px 16px;
}

.delete-button {
  min-width: 0;
  padding: 5px 9px;
  border-radius: 6px;
  border-color: rgba(243, 139, 168, 0.45);
  background: transparent;
  color: var(--red);
  font-size: 0.82rem;
}

.mastodon-button {
  clear: right;
  float: right;
  margin: 0 0 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--surface-1);
  border-color: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
}

.mastodon-button.posted {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--crust);
}

.mastodon-button img {
  width: 15px;
  height: 15px;
}

.edit-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.edit-tags {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.edit-tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.edit-tag-options label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--subtext);
  font-size: 0.85rem;
}

.edit-tag-options input {
  width: auto;
  min-width: 0;
}

.edit-tag-status {
  min-height: 1.25em;
  margin: 0;
  color: var(--red);
  font-size: 0.82rem;
}

.feed {
  padding-bottom: 40px;
}

.link-item {
  padding: 11px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.about-content {
  display: grid;
  gap: 14px;
}

.link-item h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
}

.link-header {
  display: inline-flex;
  align-items: center;
  float: right;
  gap: 12px;
  margin: 0 0 2px 8px;
}

.user-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 2px solid rgba(203, 166, 247, 0.5);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--mauve);
  font-weight: 700;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.user-name {
  color: var(--lavender);
  font-weight: 700;
}

.link-item a {
  text-decoration: none;
  overflow-wrap: anywhere;
}

.link-item::after {
  display: table;
  clear: both;
  content: '';
}

.comment,
.profile-summary p {
  margin: 12px 0 0;
  color: var(--subtext);
  line-height: 1.65;
}

.meta {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}

.entry-tags {
  color: var(--mauve);
  font-size: 0.85rem;
  font-weight: 600;
}

.entry-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  clear: both;
  gap: 16px;
  margin-top: 14px;
}

/* Entry form styling */
.entry-form {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.entry-form.hidden,
#auth-required.hidden {
  display: none;
}

#auth-required {
  max-width: 600px;
  margin: 40px auto;
  padding: 16px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-left: 4px solid var(--red);
}

#auth-required p {
  margin: 0;
  color: var(--text);
}

#auth-required a {
  color: var(--lavender);
  text-decoration: underline;
}

#auth-required a:hover {
  color: var(--mauve);
}

.form-section {
  display: grid;
  gap: 8px;
}

.form-section label {
  display: grid;
  gap: 6px;
}

.form-section > legend {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  margin: 0;
  padding: 0;
}

.form-section input[type='url'],
.form-section input[type='text'],
.form-section textarea {
  padding: 10px 12px;
  background: var(--mantle);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
}

.form-section textarea {
  resize: vertical;
  min-height: 100px;
}

.form-section input[type='url']:focus,
.form-section input[type='text']:focus,
.form-section textarea:focus {
  outline: none;
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px rgba(180, 190, 254, 0.1);
}

.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 12px;
  background: var(--mantle);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.tag-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--subtext);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}

.tag-checkbox input {
  cursor: pointer;
}

.form-section fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 0;
}

.form-section fieldset legend {
  margin: 0;
  padding: 0 6px;
}

.form-section fieldset label {
  gap: 6px;
}

.form-section fieldset input[type='text'] {
  width: 100%;
}

.form-section fieldset input[type='checkbox'] {
  width: auto;
  margin-right: 6px;
  cursor: pointer;
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.form-actions button,
.form-actions a {
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-actions button[type='submit'],
#scrape-button:not(:disabled) {
  background: var(--mauve);
  border: 1px solid var(--mauve);
  color: var(--crust);
}

.form-actions button[type='submit']:hover:not(:disabled) {
  background: var(--lavender);
  border-color: var(--lavender);
}

.form-actions button[type='submit']:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#scrape-button {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text);
}

#scrape-button:not(:disabled):hover {
  background: var(--surface-2);
  border-color: var(--text);
}

#scrape-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-actions a {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text);
}

.form-actions a:hover {
  background: var(--surface-2);
  border-color: var(--text);
}

.status {
  padding: 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.status.success {
  background: rgba(131, 165, 152, 0.2);
  border: 1px solid var(--teal);
  color: var(--teal);
}

.status.error {
  background: rgba(243, 139, 168, 0.2);
  border: 1px solid var(--red);
  color: var(--red);
}

.status.hidden {
  display: none;
}

@media (max-width: 600px) {
  .container {
    padding: 0 14px;
  }

  .site-header {
    padding: 38px 0 34px;
  }

  .site-header h1 {
    font-size: 2.35rem;
  }

  .site-logo {
    width: min(220px, 68vw);
    height: 48px;
  }

  .header-row {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .header-tools {
    order: 3;
    flex-basis: 100%;
    justify-items: stretch;
  }

  .header-tools .header-actions {
    justify-content: flex-end;
  }

  .header-actions {
    align-items: flex-end;
  }

  .auth-session {
    align-items: flex-start;
  }

  .menu-toggle {
    padding: 8px 11px;
    font-size: 0.9rem;
  }

  .logout-button {
    font-size: 0.9rem;
  }

  main.container {
    padding-top: 18px;
  }

  .site-footer {
    padding: 0 14px 18px;
  }

  .toolbar {
    gap: 12px;
    padding: 14px;
  }

  .entry-meta {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .meta {
    margin-left: auto;
  }

  .toolbar label,
  select,
  input,
  textarea,
  .settings-panel button {
    width: 100%;
    min-width: 0;
  }

  .link-item {
    padding: 16px;
    border-radius: 10px;
  }

  .link-header {
    margin-left: 14px;
  }

  .plugin-row {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .plugin-row button {
    align-self: flex-start;
  }
}