/* Wulfinn Saga layout — reshapes Forgejo's GitHub-like structure into a Nordic one.
 * Loaded after wulfinn-fx.css and wulfinn-nordic.css. Theme-independent (only --color-* variables).
 *
 * Same safety rules as the fx layer:
 *  - no transform / opacity / filter / backdrop-filter on anything that can contain a dropdown
 *    (cards, rows, headers, menus). Hover feedback is color and border only.
 *  - flat: solid fills and 1px lines; no gradients, glows or blurred shadows.
 *  - no overflow:hidden on containers; decorations are pseudo-elements with pointer-events:none.
 *
 * Map:  the deck (navbar) · saga banner (repo/org/user header) · rune tabs · cargo cards (lists)
 *       saga scrolls (issue/PR timeline) · oar menu (settings) · shield (profile) · harbor (footer) */

:root {
  --wf-r: 12px;
  --border-radius: 10px;
  --border-radius-medium: 12px;
  --ws-r-lg: 18px;
  --ws-accent: var(--color-primary);
  --ws-tint: color-mix(in srgb, var(--color-primary) 7%, var(--color-box-body));
  --ws-tint-strong: color-mix(in srgb, var(--color-primary) 14%, var(--color-box-body));
  --ws-line: color-mix(in srgb, var(--color-primary) 30%, var(--color-secondary));
}

/* =========================================================================
   Canvas: a huge, faint Vegvísir watermark behind everything
   ========================================================================= */
body::after {
  content: "";
  position: fixed;
  right: -160px;
  bottom: -160px;
  width: 620px;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background: var(--ws-accent);
  opacity: 0.035;
  -webkit-mask: var(--wn-vegvisir) center / contain no-repeat;
  mask: var(--wn-vegvisir) center / contain no-repeat;
}

/* =========================================================================
   The deck — a floating navbar instead of an edge-to-edge bar
   ========================================================================= */
#navbar {
  margin: 10px 12px 0 !important;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
  background: color-mix(in srgb, var(--color-nav-bg) 92%, var(--ws-accent));
  padding-inline: 6px;
}
#navbar::after { left: 18px; right: 18px; }
#navbar .item { border-radius: 10px; }

/* =========================================================================
   Saga banner — repo / org / user headers become a carved card
   ========================================================================= */
.secondary-nav {
  margin: 14px 12px 22px !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: var(--ws-r-lg);
  background: var(--ws-tint) !important;
  padding-top: 14px;
}
/* faint valknut carved into the right side of the banner */
.secondary-nav::before {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  pointer-events: none;
  background: var(--ws-accent);
  opacity: 0.07;
  -webkit-mask: var(--wn-valknut) center / contain no-repeat;
  mask: var(--wn-valknut) center / contain no-repeat;
}
.secondary-nav::after { top: calc(100% + 6px) !important; left: 30px !important; right: 30px !important; }
.repo-header .flex-item-title { font-size: 30px !important; }
.repo-header .flex-item-leading svg { color: var(--ws-accent); }

/* =========================================================================
   Rune tabs — pill tabs instead of an underline strip (repo tabs, explore, profile, issue filters)
   ========================================================================= */
.ui.secondary.pointing.menu { border-bottom: 0 !important; gap: 4px; padding-block: 6px 10px; }
.ui.secondary.pointing.menu > .item,
.ui.secondary.pointing.menu > .ui.container > .item,
.ui.secondary.pointing.menu .item.item {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  margin: 0 !important;
}
.ui.secondary.pointing.menu .item::after { display: none !important; }
.ui.secondary.pointing.menu .item:hover { background: color-mix(in srgb, var(--ws-accent) 8%, transparent) !important; }
.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover {
  background: color-mix(in srgb, var(--ws-accent) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--ws-accent) 45%, transparent) !important;
  color: var(--color-text) !important;
}
.ui.secondary.pointing.menu .active.item svg { color: var(--ws-accent); }

/* =========================================================================
   Cargo cards — lists become separated cards instead of ruled rows
   (issues, PRs, repos, users, orgs, dashboard feed, notifications …)
   ========================================================================= */
.flex-list { display: flex; flex-direction: column; gap: 8px; }
.flex-list > .flex-item,
.flex-list > .flex-item + .flex-item {
  border: 1px solid var(--color-secondary) !important;
  border-radius: 14px;
  background: var(--color-box-body);
  padding: 14px 16px !important;
}
.flex-list > .flex-item:hover {
  border-color: var(--ws-line) !important;
  background: var(--ws-tint);
}
.flex-item .flex-item-title { font-size: 15px; }
.flex-item .flex-item-title a:not(.label, .muted) { font-weight: 600; }
/* explore + org repo lists: a two-column fleet */
.page-content.explore .flex-list,
.page-content.organization .flex-list,
.page-content.user.profile .flex-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 12px;
}
/* lists that sit inside a box (attached segment) keep a flush look */
.ui.segment > .flex-list > .flex-item { background: transparent; }

/* =========================================================================
   Boxes — softer carved panels with a tinted header
   ========================================================================= */
.ui.segment, .ui.attached.segment, .ui.table { border-color: var(--color-secondary) !important; }
.ui.top.attached.header:not(.file-header) {
  background: var(--ws-tint-strong) !important;
  border-color: var(--color-secondary) !important;
}
.ui.top.attached.header.file-header { background: var(--ws-tint) !important; }
#repo-files-table { border-radius: 14px; }
.repository .file-view, .repository .repo-file-cell { transition: background-color 0.16s ease; }

/* repo summary bar (commits / branches / tags / size) → rune chips */
.repository-summary .segment.repository-menu,
.repository-summary .ui.segment.repository-menu {
  display: flex;
  gap: 8px;
  padding: 8px !important;
  background: transparent !important;
  border: 0 !important;
}
.repository .repository-summary.ui.segments { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.repository-summary .repository-menu .item {
  flex: 1;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--ws-line);
  background: var(--ws-tint);
  padding: 8px 12px !important;
}
.repository-summary .repository-menu .item:hover { border-color: var(--ws-line); background: var(--ws-tint); }
.repository-summary .language-stats { border-radius: 999px; margin-top: 6px; height: 6px !important; }

/* =========================================================================
   Saga scrolls — issue / PR timeline
   ========================================================================= */
.repository.view.issue .comment-list .timeline::before {
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--ws-line) 0 6px, transparent 6px 12px) !important;
}
.repository.view.issue .comment-list .timeline-item .badge,
.repository.view.issue .comment-list .timeline-item > .badge {
  border-radius: 50% !important;
  border: 1px solid var(--ws-line) !important;
  background: var(--color-box-body) !important;
  color: var(--ws-accent) !important;
  box-shadow: 0 0 0 4px var(--color-body);
}
.repository .comment-list .comment .comment-container,
.repository .comment-list .comment > .content > .ui.segment,
.repository .comment-list .comment .content .ui.attached.segment {
  border-radius: 0 0 14px 14px;
}
.repository .comment-list .comment .comment-header {
  border-radius: 14px 14px 0 0;
  background: var(--ws-tint-strong) !important;
  border-color: var(--color-secondary) !important;
}
.repository .comment-list .comment .comment-header::before,
.repository .comment-list .comment .comment-header::after { display: none; } /* drop the speech-bubble arrow */
.issue-title-header .issue-title h1, .issue-title h1 { font-size: 34px !important; line-height: 1.15; }
.issue-content-right .ui.divider { border-color: var(--color-secondary) !important; opacity: 0.6; }

/* =========================================================================
   Oar menu — settings side navigation
   ========================================================================= */
.ui.fluid.vertical.menu {
  border-radius: 16px !important;
  padding: 8px !important;
  background: var(--color-box-body) !important;
  border: 1px solid var(--color-secondary) !important;
}
.ui.fluid.vertical.menu > .header.item { font-family: var(--wn-display); font-size: 20px; letter-spacing: 0.03em; }
.ui.fluid.vertical.menu .item {
  border-radius: 10px !important;
  margin: 1px 0 !important;
  border: 0 !important;
}
.ui.fluid.vertical.menu .item::before { display: none !important; }
.ui.fluid.vertical.menu .active.item,
.ui.fluid.vertical.menu .active.item:hover {
  background: color-mix(in srgb, var(--ws-accent) 15%, transparent) !important;
  color: var(--color-text) !important;
  font-weight: 600;
}
.ui.fluid.vertical.menu .active.item::after {
  content: "ᛟ";
  font-family: "Wulfinn Runic", sans-serif;
  color: var(--ws-accent);
  margin-inline-start: auto;
  padding-inline-start: 8px;
}

/* =========================================================================
   Shield — profile card
   ========================================================================= */
#profile-avatar-card { border-radius: 20px !important; overflow: visible; background: var(--color-box-body) !important; }
#profile-avatar { justify-content: center; padding-top: 22px !important; }
#profile-avatar img.avatar {
  width: 200px !important;
  height: 200px !important;
  box-shadow: 0 0 0 4px var(--color-box-body), 0 0 0 6px var(--ws-accent) !important;
}
#profile-avatar .image { position: relative; display: inline-block; }
#profile-avatar .image::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--ws-accent) 40%, transparent);
  animation: ws-turn 40s linear infinite;
}
.profile-avatar-name { text-align: center; }

/* =========================================================================
   Dashboard — heatmap and feed as panels
   ========================================================================= */
.page-content.dashboard #user-heatmap {
  border: 1px solid var(--color-secondary);
  border-radius: 16px;
  background: var(--color-box-body);
  padding: 12px 14px 4px;
  margin-bottom: 14px;
}
.page-content.dashboard .flex-container-nav,
.page-content.dashboard .dashboard-navbar {
  border-radius: 14px;
}

/* =========================================================================
   Forms — new repo / migrate / settings forms as a single carved card
   ========================================================================= */
.page-content.repository.new .ui.form,
.page-content.organization.new .ui.form {
  border-radius: var(--ws-r-lg);
}
.ui.form input:not([type="checkbox"], [type="radio"]), .ui.form textarea, .ui.selection.dropdown, .ui.input > input { border-radius: 10px !important; }
.ui.button { border-radius: 10px; }
.ui.buttons > .button:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.ui.buttons > .button:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* =========================================================================
   Harbor — footer as a rounded dock
   ========================================================================= */
.page-footer {
  margin: 24px 12px 0;
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--color-secondary);
  border-bottom: 0;
  background: var(--color-footer) !important;
}
.page-footer::before { left: 30px !important; right: 30px !important; }

@keyframes ws-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #profile-avatar .image::after { animation: none; } }
@media (max-width: 767.98px) {
  #navbar { margin: 6px 6px 0; border-radius: 12px; }
  .secondary-nav { margin: 10px 6px 18px !important; }
  .secondary-nav::before { display: none; }

}