:root {
  /* One shadow language for every raised element of the guide (search field,
     tag cards, page lists). Values match the counter boxes of
     redmine_reporting, so both plugins read as the same surface. */
  --wiki-guide-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 1px 1px rgb(0 0 0 / 5%);
  --wiki-guide-shadow-hover: 0 3px 8px rgb(0 0 0 / 12%), 0 1px 3px rgb(0 0 0 / 8%);
}

.controller-wiki_guide .wiki-search-result li a,
.controller-wiki .wiki-search-result li a {
  font-size: var(--a-font-size-lg) !important;
}

.draft-wrapper {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='102px' width='117px'><text transform='translate(7, 77) rotate(-15)' fill='rgb(68,68,68)' font-size='30' opacity='0.1'>DRAFT</text></svg>");
  background-repeat: space;
}

.wiki-page.details {
  background: var(--a-color-bg-light);
}

.wiki-workflow-container {
  display: flex;
  flex-wrap: wrap;
}

.wiki-workflow-container > .new-line {
  flex-basis: 100%;
  height: 0;
  border: 0;
  margin: 0;
}

.wiki-workflow-container > .direction {
  flex-grow: 1;
  margin: 10px;
  text-align: center;
  line-height: 25px;
  width: 2px;
  align-content: center;
}

.wiki-workflow-container > .direction svg.icon-svg {
  vertical-align: middle;
}

.wiki-workflow-container > .status {
  flex-grow: 3;
  width: 150px;
  padding: 5px;
  font-weight: bold;
  line-height: 25px;
  font-size: var(--a-font-size-xl);
  text-align: center;
  border: 1px solid var(--a-color-muted);
  min-height: 40px;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.wiki-workflow-container > .info {
  flex-grow: 3;
  width: 150px;
  margin: 0 0 10px;
  padding: 5px;
}

.wiki-workflow-container > div.status.passed {
  background-color: var(--a-color-success-bg);
}

.wiki-workflow-container > div.status.pending {
  background-color: var(--a-color-disabled);
  opacity: 0.7;
}

.panel {
  border-style: solid;
  border-width: 1px 1px 1px 4px;
  border-radius: 5px;
  margin: 12px 0;
  padding: 8px;
}

.panel-header {
  font-size: var(--a-font-size-lg);
  font-weight: bold;
  margin-top: 8px;
  margin-bottom: 8px;
}

.panel-info {
  border-color: var(--a-color-default);
  background-color: var(--a-color-info-bg);
}

.panel-tip {
  border-color: var(--a-color-success-border);
  background-color: var(--a-color-success-bg);
}

.panel-note {
  border-color: var(--a-color-warning-border);
  background-color: var(--a-color-warning-bg);
}

.panel-warning {
  border-color: var(--a-color-warning);
  background-color: var(--a-color-alert-bg);
}

/* Tag cards. Flex instead of the former percentage widths (and instead of a
   grid): with wrapping flex every row centres on its own, so a trailing row of
   two cards sits centred under a full row of four rather than clinging to the
   left - and a single card is centred too. The card follows the counter boxes
   of redmine_reporting, but compact: these tiles are wayfinders to a tag, not
   key figures, so they must not dominate the lists below them. */
.wiki-guide-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}

.wiki-guide-button {
  flex: 1 1 200px;
  max-width: 240px;
  overflow: hidden;
  border: 1px solid var(--oc-gray-4);
  border-radius: 6px;
  box-shadow: var(--wiki-guide-shadow);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wiki-guide-button h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  font-size: var(--a-font-size-base);
  font-weight: 600;
}

/* the icon sits in a tinted square, mirroring the counter box head. The
   container class is part of the selector to stay above the workflow icon rule
   in specificity (stylelint no-descending-specificity). */
.wiki-guide-buttons .wiki-guide-button h3 svg.icon-svg {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 5px;
  background: var(--oc-gray-1);
  border-radius: 6px;
  stroke: var(--oc-gray-6);
  transition: background 0.2s ease, stroke 0.2s ease;
}

/* all tiles share the same icon, so hover is what tells them apart on pointer
   devices - the tinted square picks up the link colour */
.wiki-guide-button:hover h3 svg.icon-svg {
  background: var(--oc-blue-0);
  stroke: var(--oc-blue-7);
}

/* A long tag name may wrap once; from the third line on it is truncated. Cards
   of a row stretch to the tallest one, so unlimited wrapping would let a single
   long name inflate the whole row. overflow-wrap keeps a single very long word
   inside the card instead of letting it run past the edge. */
.wiki-guide-button h3 .icon-label {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wiki-search input#search.ajax-loading {
  background-image: url("/assets/loading-5fb375e6.gif");
}

.wiki-guide-button:hover {
  text-decoration: none;
  box-shadow: var(--wiki-guide-shadow-hover);
  transform: translateY(-1px);
}

.wiki-search input#search {
  /* full width incl. padding, so the field lines up with the cards and lists */
  box-sizing: border-box;
  width: 100%;
  background: url("/assets/plugin_assets/additionals/search-43e82249.svg") no-repeat 6px 50%;
  padding-left: 25px !important;
  border-radius: 6px;
  box-shadow: var(--wiki-guide-shadow);
  font-size: var(--a-font-size-lg);
  height: 35px;
  margin-bottom: 15px;
}

.wiki-search {
  margin-bottom: 15px;
}

.wiki-search-result {
  margin-bottom: 20px;
}

.wiki-search-result ul {
  padding-left: 0;
}

.wiki-search-result ul li {
  padding: 10px;
  display: block;
  border-bottom: 1px solid var(--a-color-border-light);
}

.wiki-search-result ul li:hover {
  background: var(--a-color-even);
}

.wiki-search-result .second-line,
.wiki-search-result .second-line a:link,
.wiki-search-result .second-line a:visited {
  color: var(--a-color-info);
}

button.wiki-voting {
  padding-right: 5px;
  text-shadow: 0 2px 0 #efefef;
  margin-right: 3px;
  align-items: center;
  cursor: pointer;
}

.wiki-voting-readonly {
  align-items: center;
}

.wiki-voting-readonly .voting {
  padding-left: 5px;
}

button.wiki-voting.upvote.active {
  background-color: var(--a-color-success-bg);
}

button.wiki-voting.downvote.active {
  background-color: var(--a-color-warning-bg);
}

.wiki-voting span.voting-value {
  padding-left: 3px;
}

/* Vote count of the popular pages as a chip: thumb and number are two sibling
   elements, so each carries one half of the pill. margin-right: 0 removes the
   default icon gap - otherwise the two halves show a 4px seam. */
.wiki-page-lists svg.icon-svg.voting {
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  margin-right: 0;
  margin-left: 6px;
  padding: 3px 0 3px 6px;
  vertical-align: middle;
  background: var(--oc-gray-1);
  border-radius: 999px 0 0 999px;
  stroke: var(--oc-gray-6);
}

.wiki-page-lists svg.icon-svg.voting + .icon-label {
  display: inline-block;
  margin-left: 0;
  padding: 3px 8px 3px 4px;
  font-size: var(--a-font-size-sm);
  font-weight: 600;
  line-height: 14px;
  color: var(--oc-gray-7);
  text-decoration: none;
  vertical-align: middle;
  background: var(--oc-gray-1);
  border-radius: 0 999px 999px 0;
}

p.nodata.success {
  background-color: var(--a-color-success-bg);
}

.wiki-page-lists {
  display: block;

  /* full content width so the lists line up with the search field and the cards
     above; the former fixed 95% left them indented by a few pixels. The gap
     sets them apart from the cards now that they carry no box of their own. */
  width: auto;
  margin: 28px 0 0;
}

/* Page lists are grouped by heading and whitespace, not by a box: the former
   grey block with a 60px icon in the left margin dominated the page although it
   only carries links. Keeping the cards above as the only framed elements makes
   them read as what they are - the navigation of this page. */
.wiki-page-lists .list {
  position: relative;
  margin-bottom: 28px;
}

/* 600 instead of the browser's bold: at this size bold reads as heavy, while
   500 would not separate the heading from the links below it. */
.wiki-page-lists .list h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 8px;
  padding-bottom: 8px;
  font-size: var(--a-font-size-base);
  font-weight: 600;
  border-bottom: 1px solid var(--oc-gray-3);
}

.wiki-page-lists ul.dashboard-list {
  margin-left: 0;
  padding-left: 20px;
  border-left: 0;
}

svg.s60 {
  width: 60px;
  height: 60px;
}

/* the list icon repeats the tinted square of the tag cards, so both blocks
   read as the same family (overrides the s60 size class above) */
svg.wiki-page-list-icon {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 5px;
  background: var(--oc-gray-1);
  border-radius: 6px;
  stroke: var(--oc-gray-6);
}

.controller-wiki_links #context-menu ul {
  width: 200px;
}

span.default-value {
  margin-left: 5px;
}

/* Attribute list of the wiki_custom_fields macro. Unlike the sidebar this sits in
   the content area, where Redmine styles lists with bullets and indent - both are
   unwanted for a list of attributes. The label follows the sidebar look. */
.wiki-custom-fields {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.wiki-custom-fields span.label {
  margin-right: 3px;
  font-weight: bold;
}

/* Sidebar blocks carry their heading as first child, where Redmine resets the top
   margin of a heading. Without a margin on the block itself it would stick to the
   block above. Same value Redmine gives a sidebar heading. */
#sidebar .wiki-page-hierarchy,
#sidebar .recently-updated {
  margin-top: 14px;
}

/* Redmine flattens every list in the sidebar, which is right for a list of links but
   drops what a page tree is about: the nesting is the information here. The indentation
   comes from the expander column of the entry above (see below), which is close to the
   step Redmine uses for tree structures (tr.idnt-*); adding one of its own on top would
   push every level 34px to the right, far too much for a sidebar. */
#sidebar .wiki-page-hierarchy ul ul {
  padding-inline-start: 0;
}

/* Every entry leaves room for the expander, so pages with and without subpages start
   at the same position - otherwise the titles would jump by the width of the icon. */
#sidebar .wiki-page-hierarchy li {
  position: relative;
  padding-inline-start: 18px;   /* width of the icon: the title starts right behind it */
}

/* Out of the text flow on purpose: themes are free to give the link display: block
   (the flow theme does), and next to an inline button that would push every title to
   the next line. Positioned it works either way. */
#sidebar .wiki-page-hierarchy button.expander {
  position: absolute;
  inset-inline-start: 0;
  display: flex;
  width: 18px;

  /* Exactly one line of the entry, offset by its padding, so the icon sits in the middle
     of the first line. Line height and padding repeat the values of the rule above
     instead of inheriting them: the button is a sibling of the link, not a child, so
     whatever a theme gives the link never reaches it. The values themselves are the ones
     Redmine uses for a selected sidebar entry (#sidebar a.selected). */
  inset-block-start: 1px;
  height: 1lh;
  line-height: 1.7em;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;

  /* A button brings its own font size from the browser, and 1lh above is measured
     against it. */
  font-size: inherit;
}

#sidebar .wiki-page-hierarchy button.expander svg {
  stroke: var(--oc-gray-6);
}

#sidebar .wiki-page-hierarchy button.expander:hover svg {
  stroke: var(--oc-gray-9);
}

/* Every entry reaches back over the icon column, so the box and the marker Redmine
   draws for the selected page (#sidebar a.selected) enclose icon and title instead of
   starting between them - there the marker would sit right against the icon, a green bar
   in the flow theme. The title still starts right behind the icon, the 0px Redmine uses
   for its own expanders in the filter box and in group rows.
   The selector carries the list class so these values also hold in a theme that gives
   the links a padding of its own; a designer can still override them with more weight. */
#sidebar .wiki-page-hierarchy .pages-hierarchy a {
  padding-block: 1px 2px;
  padding-inline-start: 18px;
  margin-inline-start: -18px;
  line-height: 1.7em;
}

#sidebar .wiki-page-hierarchy ul.collapsed {
  display: none;
}

/* Once the cards stack one per row, the 240px cap only leaves them looking
   narrow next to the full-width search field - so drop it on small screens. */
@media only screen and (max-width: 600px) {
  .wiki-guide-button {
    max-width: none;
  }
}