/* Bemmoly as Jira: Rockit's look on top of Bemmoly's own (coder/bemmoly). Bemmoly has no themes beyond
   colours, so the rest is this stylesheet, linked into its index.html (look.sh). CSS only: elements are
   moved, not rebuilt. The hooks are Bemmoly's own landmarks and labels (aria-label, href, data-*), not
   its utility classes, so a release that restyles a part keeps them. */

:root {
  --jira-bar: 48px;
  --jira-line: #0b120e24;
  --jira-text: #292a2e;
  --jira-subtle: #505258;
  --jira-blue: #1868db;
}

/* ─── Top bar ──────────────────────────────────────────────────────────────────────────────────────
   Jira's bar across the whole window, above the sidebar and the page: the app keeps its height, the
   bar is drawn over the room its padding leaves, and the parts that make it are Bemmoly's own, moved
   there: the workspace's logo and name, the search, Create, the inbox, help, settings, the account. */
[data-sidebar] {
  padding-top: var(--jira-bar);
}
[data-sidebar]::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--jira-bar);
  background: var(--color-canvas, #fff);
  border-bottom: 1px solid var(--jira-line);
  z-index: 40;
}

/* Left, as Jira's (measured): the sidebar's button, the apps (Rockit's own, jira.js: room left for it
   here), then the logo with "Jira" beside it (without "on Bemmoly", nor Bemmoly's workspace menu). */
aside[aria-label="Sidebar"] > div:first-child {
  position: fixed;
  top: 0;
  left: 12px;
  height: var(--jira-bar);
  padding: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0;
}
aside[aria-label="Sidebar"] > div:first-child > div > span:nth-child(2),
aside[aria-label="Sidebar"] > div:first-child > div > span:first-child > div:has(> button[aria-haspopup]) {
  display: none;
}
aside[aria-label="Sidebar"] > div:first-child > span:last-child {
  order: -1;
  display: flex;
}
aside[aria-label="Sidebar"] > div:first-child > img {
  width: 24px;
  height: 24px;
  margin: 0 6px 0 44px;
}
aside[aria-label="Sidebar"] > div:first-child > div > span:first-child button {
  padding: 0;
  font: 600 14px/20px var(--font-ui);
  color: #292a2e;
}
/* The sidebar's button: Jira's, its icon Atlassian's. */
aside[aria-label="Sidebar"] > div:first-child > span:last-child > button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #505258;
}
aside[aria-label="Sidebar"] > div:first-child > span:last-child > button > svg {
  display: none;
}
aside[aria-label="Sidebar"] > div:first-child > span:last-child > button::before {
  content: "";
  width: 16px;
  height: 16px;
  margin: auto;
  background-color: currentColor;
  mask: url("/rockit/icons/sidebar-collapse.svg") center / contain no-repeat;
}
aside[aria-label="Sidebar"] > div:first-child > span:last-child > button[aria-label^="Expand"]::before {
  mask-image: url("/rockit/icons/sidebar-expand.svg");
}

/* The apps (jira.js): Jira's button, its menu of Jira and Confluence under it. */
#rockit-apps {
  position: fixed;
  top: 8px;
  left: 48px;
  z-index: 51;
  display: flex;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #505258;
  cursor: pointer;
}
body:not(:has(aside[aria-label="Sidebar"])) #rockit-apps {
  display: none;
}
#rockit-apps::before {
  content: "";
  width: 16px;
  height: 16px;
  margin: auto;
  background-color: currentColor;
  mask: url("/rockit/icons/app-switcher.svg") center / contain no-repeat;
}
#rockit-apps:hover,
#rockit-apps-menu a:hover {
  background-color: #0515240f;
}
#rockit-apps[aria-expanded="true"] {
  background-color: #e9f2fe;
  color: #1868db;
}
#rockit-apps-menu {
  position: fixed;
  top: 48px;
  left: 48px;
  z-index: 60;
  width: 343px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 12px #1e1f2126, 0 0 1px #1e1f214f;
}
#rockit-apps-menu[hidden] {
  display: none;
}
#rockit-apps-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 8px;
  border-radius: 4px;
  font: 400 14px/20px var(--font-ui);
  color: #292a2e;
  text-decoration: none;
}
#rockit-apps-menu img {
  width: 32px;
  height: 32px;
}

/* Middle: the search as Jira's box, and Create beside it. */
aside[aria-label="Sidebar"] > div:nth-child(2) {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 46vw);
  padding: 0;
  z-index: 50;
  display: flex;
  gap: 8px;
}
aside[aria-label="Sidebar"] > div:nth-child(2) > button {
  flex: 1;
  height: 32px;
  border: 1px solid #8c8f97;
  border-radius: 6px;
  background: var(--color-canvas, #fff);
  box-shadow: none;
}
aside[aria-label="Sidebar"] > div:nth-child(2) > button kbd,
aside[aria-label="Sidebar"] > div:nth-child(2) > button [class*="kbd"] {
  display: none;
}

/* Create: Jira's blue "+ Create", Bemmoly's "New issue" with its label; its menu of other things to
   create stays out of the bar. */
aside[aria-label="Sidebar"] > div:nth-child(2) button[aria-label="New issue"] {
  width: auto;
  height: 32px;
  padding: 0 12px 0 10px;
  gap: 6px;
  border-radius: 6px;
  background: var(--jira-blue);
  color: #fff;
  font: 500 14px/20px var(--font-sans, inherit);
}
aside[aria-label="Sidebar"] > div:nth-child(2) button[aria-label="New issue"]::after {
  content: "Create";
}
aside[aria-label="Sidebar"] > div:nth-child(2) button[aria-label="More to create"] {
  display: none;
}

/* Right: notifications (the inbox), help, settings and the account's avatar, as Jira's icons. */
aside[aria-label="Sidebar"] a[href="/inbox"],
aside[aria-label="Sidebar"] > div:nth-child(6) > a[href="/settings"],
aside[aria-label="Sidebar"] > div:nth-child(6) > button,
aside[aria-label="Sidebar"] button[aria-label^="Account"] {
  position: fixed;
  top: 8px;
  z-index: 50;
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
  font-size: 0;
  border-radius: 6px;
}
aside[aria-label="Sidebar"] a[href="/inbox"] { right: 124px; }
aside[aria-label="Sidebar"] > div:nth-child(6) > button { right: 88px; }
aside[aria-label="Sidebar"] > div:nth-child(6) > a[href="/settings"] { right: 52px; }
aside[aria-label="Sidebar"] button[aria-label^="Account"] { right: 12px; }
aside[aria-label="Sidebar"] button[aria-label^="Account"] > :not([role="img"]) {
  display: none;
}
aside[aria-label="Sidebar"] button[aria-label^="Account"] [role="img"] {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
/* Bemmoly's own: its version and what's new, and the light/dark switch (Jira has it under the avatar). */
aside[aria-label="Sidebar"] a[href*="bemmoly.com"],
aside[aria-label="Sidebar"] button[aria-label="Appearance"] {
  display: none;
}

/* ─── Sidebar ──────────────────────────────────────────────────────────────────────────────────────
   Jira's: plain rows, the spaces listed by name, their pages as tabs on the page (not in the
   sidebar). */
aside[aria-label="Sidebar"] {
  background: var(--color-canvas, #fff);
  border-color: var(--jira-line);
  padding-top: 12px;
}
aside[aria-label="Sidebar"] section[aria-label="Work"] {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
aside[aria-label="Sidebar"] section[aria-label="Work"] > :first-child {
  display: none;
}
aside[aria-label="Sidebar"] a[href="/work/roadmap"],
aside[aria-label="Sidebar"] a[href="/work/initiatives"],
aside[aria-label="Sidebar"] a[href^="/work/"]:has(> span.absolute) {
  display: none;
}
aside[aria-label="Sidebar"] > hr {
  display: none;
}

/* ─── The project's page head ──────────────────────────────────────────────────────────────────────
   Jira's: "Spaces" above, the space's name large, its pages as tabs on the line below. */
main header:has(> nav[aria-label="Views"]) {
  flex-wrap: wrap;
  height: auto;
  padding-top: 14px;
  border-color: var(--jira-line);
  row-gap: 4px;
}
main header:has(> nav[aria-label="Views"]) nav[aria-label="Breadcrumb"] button {
  font-size: 20px;
  line-height: 24px;
  font-weight: 653;
  color: var(--jira-text);
}
main header nav[aria-label="Views"] {
  order: 3;
  flex-basis: 100%;
  margin: 0;
  gap: 20px;
}
main header nav[aria-label="Views"] a {
  border-radius: 0;
  background: none;
  padding: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--jira-subtle);
}
main header nav[aria-label="Views"] a[aria-current="page"] {
  color: var(--jira-blue);
  box-shadow: inset 0 -2px 0 var(--jira-blue);
}
/* Jira's order (Backlog before Board) and only Jira's pages: no Pairing, Dashboards or Quarter. */
main header nav[aria-label="Views"] > span:has(a[href^="/work/backlog/"]) { order: -1; }
main header nav[aria-label="Views"] > span:has(a[href^="/work/pairing/"]),
main header nav[aria-label="Views"] > span:has(a[href^="/work/dashboards/"]),
main header nav[aria-label="Views"] > span:has(a[href^="/work/quarter/"]) {
  display: none;
}

/* ─── Board ────────────────────────────────────────────────────────────────────────────────────────
   Jira's columns: grey panels, the header on top of the cards; no lane row ("All issues") when the
   board has no grouping. */
div:has(> svg[role="img"][aria-label]):not(:has(> svg ~ svg)):not([data-issue-key] *):not(:is(aside, dialog) *) {
  background: #f8f8f8;
  border-radius: 8px 8px 0 0;
}
section > button:has(+ div > [role="group"]) {
  display: none;
}
[role="group"]:has([data-issue-key]),
[role="group"][aria-label$=", All issues"] {
  background: #f8f8f8;
  border-radius: 0 0 8px 8px;
  padding: 4px 4px 8px;
  min-height: 48px;
  align-self: start; /* as tall as its cards, as Jira's columns, not the tallest one's height */
}
[data-issue-key] > div {
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 1px 1px #1e1f2140, 0 0 1px #1e1f214f;
}

/* ─── Pass 3: details against Jira's board ─────────────────────────────────────────────────────── */

/* Create's own wrapper keeps the button's width. */
aside[aria-label="Sidebar"] > div:nth-child(2) > span,
aside[aria-label="Sidebar"] > div:nth-child(2) > span > span {
  width: auto;
  flex: none;
}
aside[aria-label="Sidebar"] > div:nth-child(2) button[aria-label="New issue"] {
  min-width: 84px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
}

/* Jira's page is white; its columns and the sidebar's selection are the grey. */
main,
main .bg-canvas {
  background: #fff;
}

/* "Spaces" above the space's name. */
main header:has(> nav[aria-label="Views"]) nav[aria-label="Breadcrumb"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
main header:has(> nav[aria-label="Views"]) nav[aria-label="Breadcrumb"]::before {
  content: "Spaces";
  font-size: 14px;
  line-height: 20px;
  color: var(--jira-subtle);
}
main header:has(> nav[aria-label="Views"]) nav[aria-label="Breadcrumb"] button > svg {
  display: none;
}

/* The board's toolbar as Jira's: its search, Filter, and the view's settings; Bemmoly's quick filters,
   query and saved filters stay out. */
[role="toolbar"][aria-label="Filters"] button[aria-pressed],
[role="toolbar"][aria-label="Filters"] button:not([aria-pressed]):not([aria-haspopup]) {
  display: none;
}

/* Columns of Jira's width, their header in its small grey type, without Bemmoly's status icon. */
div:has(> svg[role="img"][aria-label]):not(:has(> svg ~ svg)):not([data-issue-key] *):not(:is(aside, dialog) *) > svg {
  display: none;
}
div:has(> svg[role="img"][aria-label]):not(:has(> svg ~ svg)):not([data-issue-key] *):not(:is(aside, dialog) *) {
  font-size: 12px;
  color: var(--jira-subtle);
}

/* "Spaces" in the sidebar as Confluence's "Starred spaces" (measured): a small heading over the spaces,
   12px on 16px, bold, its lighter grey, a little in from the rows' edge; no row or icon of its own.
   (Jira calls its projects spaces too.) */
aside[aria-label="Sidebar"] section:is([aria-label="Work"], [aria-label="Docs"]) > div:not(:has(*)) {
  display: block;
  height: auto;
  margin: 18px 0 7px; /* with the rows' own 2px: Confluence's 20px above it, 9px to the first space */
  padding-left: 6px;
  font-size: 0;
}
aside[aria-label="Sidebar"] section:is([aria-label="Work"], [aria-label="Docs"]) > div:not(:has(*))::after {
  content: "Spaces";
  font-size: 12px;
  line-height: 16px;
  font-weight: 653;
  color: #6b6e76;
}
/* A space under it stands on its own: no fold of its pages (its pages are the tabs on its page). */
[data-sidebar]:has([data-module="work"]) aside[aria-label="Sidebar"] section[aria-label="Work"] div > a[href^="/work/board/"]:first-child > svg:last-child {
  display: none;
}

/* Jira's columns are of a set width, side by side from the left: the header row and each lane's
   row are grids of the same columns. */
div:has(> div > svg[role="img"][aria-label]):not([data-issue-key] *):not(:is(aside, dialog) *),
div:has(> [role="group"][aria-label$=", All issues"]) {
  grid-template-columns: none !important; /* over Bemmoly's inline equal columns */
  grid-auto-flow: column;
  grid-auto-columns: 270px;
  justify-content: start;
  column-gap: 8px;
}
/* The board's ground is the page's white, as Jira's; only its columns are grey. */
[data-module="work"] .bg-sunken:has([role="group"]) {
  background: #fff;
}

/* ─── An issue opened from the board ───────────────────────────────────────────────────────────────
   Jira's: a window over the dimmed board, not a panel at its side; the issue's text and activity on
   the left, its status and details on the right (as Bemmoly's own full page has them). That is
   Bemmoly's panel docked beside the board, from 1200px wide (an <aside>); below that it shows a sheet
   at the right edge (a <dialog>), which stays as it is. */
aside[aria-label$=" details"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1046px, calc(100vw - 64px)) !important;
  max-width: none !important;
  height: min(680px, calc(100vh - 64px));
  z-index: 60;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 100vmax rgb(5 21 36 / 0.45), 0 8px 12px #1e1f2126, 0 0 1px #1e1f214f;
}
aside[aria-label$=" details"] > [aria-label="Resize panel"] {
  display: none;
}
/* The head row (the key, the buttons) of the window and of the sheet: the row above the issue. As high
   above its buttons as below: Bemmoly made it for a docked panel, with room above it already. In the
   window it has a ground of its own, so it is rounded as the window's top. */
:is(aside, dialog)[aria-label$=" details"] > div:has(+ div):not([role="separator"]) {
  padding-top: 12px;
  padding-bottom: 12px;
}
aside[aria-label$=" details"] > div:has(+ div):not([role="separator"]) {
  border-radius: 8px 8px 0 0;
}
aside[aria-label$=" details"] div:has(> section[aria-label="Activity"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-auto-flow: row dense;
  column-gap: 32px;
  align-items: start;
  padding-inline: 24px;
}
aside[aria-label$=" details"] div:has(> section[aria-label="Activity"]) > * {
  grid-column: 1;
}
aside[aria-label$=" details"] div:has(> section[aria-label="Activity"]) > :nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 12;
}
aside[aria-label$=" details"] div:has(> section[aria-label="Activity"]) > :first-child :is(h1, h2, textarea) {
  font-size: 24px;
  line-height: 28px;
  font-weight: 653;
}

/* ─── Backlog ──────────────────────────────────────────────────────────────────────────────────────
   Jira's: each sprint and the backlog a grey box of white rows, one below the other; epics are not a
   panel beside it (Jira keeps them closed). */
aside[aria-label="Epics"] {
  display: none;
}
[data-container-id] > section {
  margin: 8px 24px 16px;
  padding: 0 8px 4px;
  background: #f8f8f8;
  border: 0;
  border-radius: 8px;
}
[data-container-id] > section > :first-child,
[data-container-id] > section > :first-child > * {
  background: transparent;
  border: 0;
}
[data-container-id] [role="gridcell"] > div {
  background: #fff;
  border: 1px solid var(--jira-line);
  margin-top: -1px;
}

/* Each column one grey panel, header and cards together, as Jira's: the header row (sticky, so it
   needs a ground) is the page's white, not a grey band across the board, and the lane's row starts
   right under it, without Bemmoly's gap between the two. */
div:has(> div > svg[role="img"][aria-label]):not([data-issue-key] *):not(:is(aside, dialog) *) {
  background: #fff;
  padding-top: 0;
}
[data-module="work"] section:has(> div > [role="group"]) {
  margin-top: 0;
}

/* No divider between the board's search and its Filter, as Jira's toolbar. */
[role="toolbar"][aria-label="Filters"] span[aria-hidden="true"]:empty {
  display: none;
}
/* A column's title and its cards a little further from the panel's edge. */
div:has(> svg[role="img"][aria-label]):not(:has(> svg ~ svg)):not([data-issue-key] *):not(:is(aside, dialog) *) {
  padding-inline: 12px;
}
[data-issue-key] > div {
  padding-inline: 14px;
}
/* The cards further in from the column's edge too, and their text from theirs. */
[role="group"][aria-label$=", All issues"] {
  padding-inline: 8px;
}
[data-issue-key] > div {
  padding-inline: 16px;
}
/* No line under the board's toolbar: Jira's columns start right below its filters. */
[role="toolbar"][aria-label="Filters"] {
  border-bottom: 0;
}

/* ─── Alignment ────────────────────────────────────────────────────────────────────────────────────
   One left edge for the page: "Spaces", the space's name, the tabs, the sprint, the toolbar and the
   columns all start at the header's padding, as in Jira. */
main header:has(> nav[aria-label="Views"]) nav[aria-label="Breadcrumb"] button {
  padding-left: 0;
}
main header nav[aria-label="Views"] {
  border-left: 0;
  padding-left: 0;
}
/* The board's search as Jira's "Search board": a box of its own, its edge on the page's. */
[role="toolbar"][aria-label="Filters"] label:has(input[type="search"]) {
  height: 32px;
  border: 1px solid #b7b9be;
  border-radius: 6px;
}
/* One left edge in the sidebar: the space rows line up with Home and My issues, and "Spaces" with
   their icons. */
aside[aria-label="Sidebar"] section[aria-label="Work"] {
  padding-inline: 4px;
}

/* ─── Spacing, measured on Jira's board ────────────────────────────────────────────────────────────
   The tabs: 12px below the space's name, the text 4px from their top and 10px from the line under
   them (where the current one's blue bar is). The toolbar: Jira has 20px above its controls and
   about 24px between them and the columns; Bemmoly's row is a tight 46px. */
main header nav[aria-label="Views"] {
  margin-top: 8px;
}
main header nav[aria-label="Views"] a {
  padding: 4px 0 10px;
}
[role="toolbar"][aria-label="Filters"] {
  height: auto;
  padding-top: 16px;
  padding-bottom: 20px;
}
/* The sprint's bar above the toolbar: room above and below, not Bemmoly's tight 56px. */
[data-module="work"] div:has(+ [role="toolbar"][aria-label="Filters"]) {
  height: auto;
  padding-block: 14px;
}
/* The bar's icons centred in their hover square: their label is gone, not just shrunk (an empty label
   and the gap before it pushed the icon to the square's left edge). */
aside[aria-label="Sidebar"] a[href="/inbox"] > :not(svg),
aside[aria-label="Sidebar"] > div:nth-child(6) > a[href="/settings"] > :not(svg),
aside[aria-label="Sidebar"] > div:nth-child(6) > button > :not(svg) {
  display: none;
}
aside[aria-label="Sidebar"] a[href="/inbox"],
aside[aria-label="Sidebar"] > div:nth-child(6) > a[href="/settings"],
aside[aria-label="Sidebar"] > div:nth-child(6) > button,
aside[aria-label="Sidebar"] button[aria-label^="Account"] {
  gap: 0;
}

/* ─── Sidebar rows, as Jira's (measured) ───────────────────────────────────────────────────────────
   32px rows in its grey text; hovered, a faint grey; the current one light blue with blue text and a
   2×12px blue bar at its left edge. The space is current on any of its pages: Bemmoly marks the page's
   own row (hidden here), so the space's row is the one in that group. */
aside[aria-label="Sidebar"] nav a,
aside[aria-label="Sidebar"] section[aria-label="Work"] a {
  height: 32px;
  color: var(--jira-subtle);
  box-shadow: none;
  border: 0;
}
aside[aria-label="Sidebar"] nav a:hover,
aside[aria-label="Sidebar"] section[aria-label="Work"] a:hover {
  background: #0515240f;
}
aside[aria-label="Sidebar"] a[aria-current="page"],
aside[aria-label="Sidebar"] div:has(> a[aria-current="page"]) > a:first-child {
  position: relative;
  background: #e9f2fe;
  color: var(--jira-blue);
  font-weight: 500;
}
aside[aria-label="Sidebar"] a[aria-current="page"]:hover,
aside[aria-label="Sidebar"] div:has(> a[aria-current="page"]) > a:first-child:hover {
  background: #cfe1fd;
}
aside[aria-label="Sidebar"] a[aria-current="page"]::before,
aside[aria-label="Sidebar"] div:has(> a[aria-current="page"]) > a:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 12px;
  margin-top: -6px;
  background: var(--jira-blue);
}
/* No shortcut in a button ("+ New page N"), as Jira's and Confluence's buttons show none. Its chip took
   the page's white from the rule above, under the button's white text: a blank block. */
main button kbd {
  display: none;
}

/* ─── One app per page: Jira or Confluence ─────────────────────────────────────────────────────────
   Bemmoly's Work and Docs share one sidebar; Rockit shows them as two apps, Jira and Confluence, each
   in its own tab. A page says whose it is (data-module), and the sidebar shows only that app's part:
   on Jira's pages no Docs, on Confluence's no Work, and Confluence named and marked as itself. */
/* The other app is one row in the sidebar, as Atlassian's apps link each other: on Jira's pages
   "Confluence" (Docs home), on Confluence's "Jira" (the space's board), below the app's own spaces. */
[data-sidebar]:has([data-module="work"]) aside[aria-label="Sidebar"] section[aria-label="Docs"] > :not(a[href="/docs"]),
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] section[aria-label="Work"] > :not(div:has(> a[href^="/work/board/"])),
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] section[aria-label="Work"] a:not(:first-child),
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] :is(a[href="/"], a[href="/work/my-issues"]) {
  display: none;
}
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] div:has(> section[aria-label="Work"]) {
  display: flex;
  flex-direction: column;
}
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] section[aria-label="Work"] {
  order: 1;
}
/* The row: the app's mark and name, in place of what the link shows in Bemmoly. */
:is([data-sidebar]:has([data-module="work"]) aside[aria-label="Sidebar"] section[aria-label="Docs"] > a[href="/docs"], [data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] section[aria-label="Work"] a[href^="/work/board/"]:first-child) {
  position: relative;
  margin-top: 2px; /* with the sidebar's own 10px between its parts: Atlassian's 12px from the last row above it */
  background-image: url("/rockit/icons/link-external.svg") !important;
  background-position: right 8px center !important;
  background-size: 12px 12px !important;
  background-repeat: no-repeat !important;
  padding-left: 36px;
  background: none;
  font-weight: 400;
  color: var(--jira-subtle);
}
:is([data-sidebar]:has([data-module="work"]) aside[aria-label="Sidebar"] section[aria-label="Docs"] > a[href="/docs"], [data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] section[aria-label="Work"] a[href^="/work/board/"]:first-child) > * {
  display: none;
}
:is([data-sidebar]:has([data-module="work"]) aside[aria-label="Sidebar"] section[aria-label="Docs"] > a[href="/docs"], [data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] section[aria-label="Work"] a[href^="/work/board/"]:first-child)::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
[data-sidebar]:has([data-module="work"]) aside[aria-label="Sidebar"] section[aria-label="Docs"] > a[href="/docs"]::before {
  background-image: url("/rockit/confluence-logo.svg");
}
[data-sidebar]:has([data-module="work"]) aside[aria-label="Sidebar"] section[aria-label="Docs"] > a[href="/docs"]::after {
  content: "Confluence";
}
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] section[aria-label="Work"] a[href^="/work/board/"]:first-child::before {
  background-image: url("/rockit/jira-logo.svg");
}
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] section[aria-label="Work"] a[href^="/work/board/"]:first-child::after {
  content: "Jira";
}
/* Confluence's sidebar as Jira's is here: plain rows, no Docs panel of its own above its spaces. */
aside[aria-label="Sidebar"] section[aria-label="Docs"] {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0 4px;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] > :first-child {
  display: none;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] a {
  height: 32px;
  color: var(--jira-subtle);
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] a:hover {
  background: #0515240f;
}
/* Its name and mark in the bar: Confluence's. */
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] > div:first-child > img {
  content: url("/rockit/confluence-logo.svg");
}
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] > div:first-child > div > span:first-child button > span {
  font-size: 0;
}
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] > div:first-child > div > span:first-child button > span::after {
  content: "Confluence";
  font-size: 14px;
}

/* The sidebar's type as Jira's and Confluence's (measured): 14px on 20px, medium, its grey; the rows
   4px further in, so the text starts where theirs does. */
aside[aria-label="Sidebar"] {
  padding-left: 12px;
  padding-right: 12px;
}
aside[aria-label="Sidebar"] :is(nav, section) a,
aside[aria-label="Sidebar"] :is(nav, section) a span,
aside[aria-label="Sidebar"] :is(nav, section) a::after {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* Jira's type: Inter (Google Fonts, linked in index.html by look.sh), the nearest to Atlassian Sans,
   in place of the Inter Tight that Bemmoly's own "inter" is. */
:root[data-font] {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ─── Jira's own icons (look/icons: Atlassian's @atlaskit/icon, Apache-2.0) ─────────────────────────
   In place of Bemmoly's where Jira shows its own: each one a mask in the text's colour, so a hover's
   or a current row's colour is the icon's too. */
aside[aria-label="Sidebar"] :is(a[href="/inbox"], a[href="/settings"], a[href="/"], > div:nth-child(6) > button, > div:nth-child(2) > button, button[aria-label="New issue"]) > svg {
  display: none;
}
aside[aria-label="Sidebar"] :is(a[href="/inbox"], a[href="/settings"], a[href="/"], > div:nth-child(6) > button, > div:nth-child(2) > button, button[aria-label="New issue"])::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: center / contain no-repeat;
}
aside[aria-label="Sidebar"] a[href="/inbox"]::before { mask-image: url("/rockit/icons/notification.svg"); }
aside[aria-label="Sidebar"] > div:nth-child(6) > button::before { mask-image: url("/rockit/icons/question-circle.svg"); }
aside[aria-label="Sidebar"] a[href="/settings"]::before { mask-image: url("/rockit/icons/settings.svg"); }
aside[aria-label="Sidebar"] > div:nth-child(2) > button::before { mask-image: url("/rockit/icons/search.svg"); }
aside[aria-label="Sidebar"] button[aria-label="New issue"]::before { mask-image: url("/rockit/icons/add.svg"); }
aside[aria-label="Sidebar"] a[href="/"]::before { mask-image: url("/rockit/icons/person-avatar.svg"); }
/* Bemmoly's Home is the person's own page, as Jira's For you is: under Jira's name. */
aside[aria-label="Sidebar"] a[href="/"] > span {
  font-size: 0;
}
aside[aria-label="Sidebar"] a[href="/"] > span::after {
  content: "For you";
  font-size: 14px;
}
/* The other app's row hovers as every row does (its own rule above takes Bemmoly's ground away). */
[data-sidebar]:has([data-module="work"]) aside[aria-label="Sidebar"] section[aria-label="Docs"] > a[href="/docs"]:hover,
[data-sidebar]:has([data-module="docs"]) aside[aria-label="Sidebar"] section[aria-label="Work"] a[href^="/work/board/"]:first-child:hover {
  background-color: #0515240f;
}

/* A space's pages in the sidebar (Confluence's page tree: its items, each holding its link) as every
   row: 32px, grey on hover, the current one light blue with blue text and the blue bar at its left;
   not Bemmoly's white card. */
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"] {
  position: relative;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: var(--jira-subtle);
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"] a {
  color: inherit;
  font-weight: inherit;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"]:hover {
  background: #0515240f;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-current="page"] {
  background: #e9f2fe;
  color: var(--jira-blue);
  font-weight: 500;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-current="page"]:hover {
  background: #cfe1fd;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 12px;
  margin-top: -6px;
  background: var(--jira-blue);
}
/* The link inside a page's item has no ground of its own on hover: the item's is the row's. */
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"] a:hover {
  background: none;
}
/* Its link only as high as its text: the item (a flex row) centres it. The 32px of the other rows'
   links made it a block with the text at its top. */
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"] a {
  height: auto;
}
/* The page tree indented as Confluence's (measured): each level's row itself moves in, its hover and
   current ground with it (a level 1 page's row at 12px in from the space's, each level 16px more),
   and inside a row its title 58px from its start. Bemmoly indents inside the row (an inline
   padding per level), so the ground always began at the sidebar's edge. */
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"] {
  padding-left: 13px !important;
  font-weight: 500;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-level="1"] { margin-left: 12px; }
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-level="2"] { margin-left: 28px; }
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-level="3"] { margin-left: 44px; }
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-level="4"] { margin-left: 60px; }
/* Its "+" and "…" float over the row's right end on hover, as Confluence's: they take no room from
   the title, which shows whole. */
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"] > span:last-child {
  position: absolute;
  right: 4px;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"] > a {
  flex: 1;
  min-width: 0;
}
/* The ground begins just before the page's icon: a page without pages under it has no empty fold
   slot in front of it, and the row starts 8px before its icon (the title stays at 82px, as
   Confluence's). Each level 16px further in. */
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"] > span:first-child:not(:has(*)) {
  display: none;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"]:has(> span:first-child:empty) {
  padding-left: 8px !important;
}
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-level="1"]:has(> span:first-child:empty) { margin-left: 41px; }
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-level="2"]:has(> span:first-child:empty) { margin-left: 57px; }
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-level="3"]:has(> span:first-child:empty) { margin-left: 73px; }
aside[aria-label="Sidebar"] section[aria-label="Docs"] [role="treeitem"][aria-level="4"]:has(> span:first-child:empty) { margin-left: 89px; }

/* A handbook page as Confluence shows it to a reader: without Bemmoly's line over it that they may only
   read it ("You can read this page. Ask an editor…"). Its warnings (offline, in the trash) are amber and
   stay; so does a line with a button in it. */
[data-page-id] div[role="status"]:not([aria-label]):not([class*="amber"]):not(:has(button)) {
  display: none;
}

/* Docs home as a reader's: without making pages (New page, Import, Templates). A student reads the
   handbook; they write in no space. */
main#main > div > header:has(> nav[aria-label="Breadcrumb"]) > div > span:has(> button + button + button) {
  display: none;
}