/* Shared styles for the Access Governance for Jira user docs (app.citizenkade.com/docs). */
:root { --ink:#172b4d; --muted:#5e6c84; --line:#dfe1e6; --accent:#0c66e4; --bg:#ffffff; --soft:#f4f5f7; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

/* Two-column layout: a sticky left nav rail + the content column. Collapses to a single column with a
   horizontal wrapped nav on narrow viewports (see the media query at the bottom). */
.layout { display:flex; gap:44px; max-width:1080px; margin:0 auto; padding:0 24px; align-items:flex-start; }
.rail { flex:0 0 196px; padding-top:48px; }
.rail-inner { position:sticky; top:28px; }
.rail .masthead { display:block; font-weight:700; color:var(--ink); font-size:16px; line-height:1.25; margin-bottom:18px; }
.rail .masthead:hover { text-decoration:none; }
.rail .masthead span { display:block; font-weight:400; color:var(--muted); font-size:13px; margin-top:2px; }
.content { flex:1 1 auto; min-width:0; max-width:792px; padding:48px 0 80px; }

nav.docnav { display:flex; flex-direction:column; gap:2px; }
nav.docnav a { color:var(--muted); font-size:15px; padding:5px 0 5px 12px; border-left:2px solid transparent; }
nav.docnav a:hover { color:var(--ink); text-decoration:none; }
nav.docnav a.active { color:var(--ink); font-weight:600; border-left-color:var(--accent); }

header.page { border-bottom:2px solid var(--line); padding-bottom:20px; margin-bottom:8px; }
h1 { font-size:30px; margin:0 0 6px; }
.meta { color:var(--muted); font-size:14px; }
h2 { font-size:21px; margin:40px 0 10px; }
h3 { font-size:17px; margin:26px 0 6px; }
p, li { font-size:16px; }
ul, ol { padding-left:22px; } li { margin:6px 0; }
.lead { font-size:18px; color:var(--ink); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.callout { background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:16px 20px; margin:22px 0; }
.callout.safe { background:#eafaf1; border-color:#b8e6cc; }
.callout.warn { background:#fff7e6; border-color:#ffd591; }
.callout h3 { margin-top:0; }

.figure { border:1px solid var(--line); border-radius:8px; padding:16px; margin:22px 0; background:var(--bg); }
.figure .cap { color:var(--muted); font-size:13.5px; margin-top:12px; }
.figure.placeholder { text-align:center; color:var(--muted); font-style:italic; padding:40px 14px; }
/* Screenshots: no border or shadow of their own (either reads as a frame butting the app content, which
   has no padding). The enclosing .figure border + padding is the frame, holding the image + its caption. */
img.shot { display:block; width:100%; height:auto; }

table.tabs { width:100%; border-collapse:collapse; margin:14px 0; }
table.tabs th, table.tabs td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; font-size:15px; }
table.tabs th { color:var(--muted); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.03em; }
table.tabs td:first-child { white-space:nowrap; font-weight:600; }
.pill { display:inline-block; font-size:12px; padding:1px 8px; border-radius:10px; background:var(--soft); border:1px solid var(--line); color:var(--muted); }
footer { margin-top:56px; border-top:1px solid var(--line); padding-top:16px; color:var(--muted); font-size:13px; }
.steps { counter-reset:step; list-style:none; padding-left:0; }
.steps li { counter-increment:step; position:relative; padding-left:38px; margin:12px 0; }
.steps li::before { content:counter(step); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.prevnext { display:flex; justify-content:space-between; gap:16px; margin-top:40px; font-size:15px; }

/* Narrow viewports: drop the rail and revert to the original horizontal wrapped nav at the top. */
@media (max-width: 820px) {
  .layout { flex-direction:column; gap:0; padding:0 20px; }
  .rail { flex:none; width:100%; padding-top:40px; }
  .rail-inner { position:static; }
  .rail .masthead { margin-bottom:12px; }
  nav.docnav { flex-direction:row; flex-wrap:wrap; gap:6px 16px; }
  nav.docnav a { padding:0; border-left:none; }
  nav.docnav a.active { border-left:none; }
  .content { max-width:none; padding:24px 0 64px; }
}