/* Blog shell derived from the supplied 25 October design and design-system tokens. */
@font-face{font-family:Montserrat;src:url("/welcome/assets/Montserrat-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url("/welcome/assets/Montserrat-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url("/welcome/assets/Montserrat-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Atlassian Sans";src:url("/blog/AtlassianSans-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{color-scheme:light;--text:#292a2e;--text-secondary:#5e6169;--text-inverse:#ffffff;--surface:#ffffff;--rail:#e9edf2;--shadow-medium:0 4px 10px rgb(0 0 0 / 10%);--panel:#fafbfc;--workspace:#f1f4f8;--primary:#b84230;--primary-hover:#a43828;--primary-pressed:#902f22;--selected:#ecebf0;--focus:#b84230;--hover:#fff0ec;--border:#0b120e24;--backdrop:#050c1f75;--radius-4:4px;--radius-8:8px;--radius-16:16px;--radius-full:9999px;--pressed:#ecebf0;--shadow-large:0 6px 24px rgb(0 0 0 / 10%);--article-wide:1120px;--shadow-small:0 4px 10px rgb(0 0 0 / 5%);--font-ui:Montserrat,ui-sans-serif,system-ui,sans-serif;--font-read:"Atlassian Sans",ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;padding:16px 16px 0;min-height:100vh;background:var(--workspace);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
body:has(dialog[open]){overflow:hidden}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Approved header and button geometry. */
.site-header{max-width:1120px;height:64px;margin:0 auto;padding:0 12px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:var(--radius-16);background:var(--panel);outline:1px solid var(--border);outline-offset:-1px;box-shadow:var(--shadow-small)}
.site-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:16px;line-height:24px;font-weight:600;border-radius:var(--radius-8);padding:4px 6px 4px 4px}
.site-brand img{width:28px;height:28px;display:block}
.btn{height:36px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--radius-8);font:500 14px/20px var(--font-ui);text-decoration:none;white-space:nowrap;cursor:pointer;background:var(--primary);color:var(--text-inverse);transition:background-color 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1)}
.btn:hover{background:var(--primary-hover)}
.btn:active{background:var(--primary-pressed)}
.blog{max-width:1120px;margin:0 auto;padding-top:40px}
.blog-title{margin:0;font:600 36px/44px var(--font-ui);letter-spacing:-.01em}
.blog-lead{margin:8px 0 0;max-width:680px;font:400 18px/28px var(--font-read);color:var(--text-secondary)}
.empty{margin-top:24px;padding:40px 24px;border-radius:var(--radius-16);background:var(--surface);outline:1px solid var(--border);outline-offset:-1px;text-align:center}
.empty-icon{width:48px;height:48px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--selected);color:var(--text-secondary)}
.empty-icon svg{width:22px;height:22px}
.empty-title{margin:0;font:600 18px/26px var(--font-ui)}
/* ---------- Site header (25 Oct 2026) ----------
   Desktop: one 64 px row — brand left; Getting started, Blog, Add to Chrome right. Plate = toolbar plate.
   Phone (≤ 640): two rows — brand + Add to Chrome, then Getting started · Blog. No burger, no scrolling. */
.site-nav{margin-left:auto;display:flex}
.site-nav ul{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:4px}
.site-nav a{height:36px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--radius-8);color:var(--text);text-decoration:none;font:500 14px/20px var(--font-ui);white-space:nowrap;transition:background-color 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1)}
.site-nav a:hover{background:var(--hover);color:var(--primary)}
.site-nav a:active{background:var(--pressed);color:var(--primary)}
.site-nav a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.site-nav a[aria-current="page"]{background:var(--selected);color:var(--primary);font-weight:600}   /* fill + weight + colour */
.site-brand:hover span{color:var(--primary)}

/* ---------- Install dialog (existing message until the store page is live) ---------- */
.install-dialog{width:480px;max-width:calc(100% - 32px);padding:24px;border:0;border-radius:var(--radius-16);background:var(--surface);color:var(--text);box-shadow:var(--shadow-large)}
.install-dialog::backdrop{background:var(--backdrop)}
.install-dialog h2{margin:0;font:600 18px/26px var(--font-ui)}
.install-dialog p{margin:8px 0 0;font:400 15px/24px var(--font-read);color:var(--text-secondary)}
.install-dialog form{margin:20px 0 0;display:flex;justify-content:flex-end}

/* ---------- Site footer (25 Oct 2026) ---------- */
.site-footer{display:block;max-width:var(--article-wide);margin:56px auto 0;padding:32px 0 32px;border-top:1px solid var(--border);font:400 12px/18px var(--font-ui);color:var(--text-secondary)}
.footer-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px 48px}
.site-footer .footer-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:600 16px/24px var(--font-ui);border-radius:var(--radius-8)}
.footer-brand img{width:24px;height:24px;display:block}
.site-footer .footer-brand:hover{color:var(--primary)}
.footer-desc{margin:8px 0 0;font:400 14px/22px var(--font-ui);color:var(--text-secondary)}
.footer-links{margin:-6px -10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px}  /* text edges line up with the brand and the container */
.site-footer .footer-links a{height:36px;padding:0 10px;display:inline-flex;align-items:center;border-radius:var(--radius-8);color:var(--text);text-decoration:none;font:500 14px/20px var(--font-ui);white-space:nowrap;transition:background-color 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1)}
.site-footer .footer-links a:hover{background:var(--hover);color:var(--primary)}
.footer-links a:focus-visible,.footer-brand:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.footer-copy{margin:24px 0 0;font:400 13px/18px var(--font-ui);color:var(--text-secondary)}

@media(max-width:960px){.blog{padding-top:32px}.blog-title{font-size:30px;line-height:38px}}
@media (max-width:640px){
  .site-header{margin:-8px -8px 0}
  .site-footer{margin-inline:-8px}
  .site-header{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand cta" "nav nav";align-items:center;column-gap:8px;row-gap:0;padding:8px 8px 4px 10px}
  .site-brand{grid-area:brand;font-size:15px;min-width:0;white-space:nowrap}
  .site-brand img{width:24px;height:24px}
  .site-header>.btn{grid-area:cta}
  .site-nav{grid-area:nav;margin:8px 0 0;padding-top:4px;border-top:1px solid var(--border)}
  .site-nav a{height:40px}
  .site-footer{margin-top:40px;padding:28px 8px 28px}
  .footer-row{flex-direction:column;gap:16px}
  .footer-links{display:grid;grid-template-columns:repeat(2,max-content);gap:4px 8px;margin:0 0 0 -10px}
}
@media (max-width:360px){.site-header>.btn{padding:0 10px}.site-brand{gap:8px}}
@media(max-width:380px){.empty{padding:32px 16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* Published article cards from the blog design. */
.grid{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* ---------- Card: the whole card is one link (title link stretched) ---------- */
.card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--radius-16);background:var(--surface);outline:1px solid var(--border);outline-offset:-1px;overflow:hidden;transition:box-shadow 160ms cubic-bezier(.2,0,0,1)}
.card-img{aspect-ratio:16/9;background:var(--rail);overflow:hidden;border-bottom:1px solid var(--border)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 240ms cubic-bezier(.2,0,0,1)}
.card-img.is-empty{display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}
.card-img.is-empty svg{width:40px;height:40px;opacity:.7}
.card-body{flex:1;display:flex;flex-direction:column;padding:16px 20px 18px}
.card-tags{display:flex;flex-wrap:wrap;gap:4px 8px;font:500 12px/18px var(--font-ui)}
.card-format{color:var(--primary);font-weight:600}
.card-cat{color:var(--text-secondary)}
.card-tags .card-cat::before{content:"·";margin-right:8px;color:var(--text-secondary)}
.card-title{margin:8px 0 0;font:600 18px/26px var(--font-ui);color:var(--text)}
.card-title a{color:inherit;text-decoration:none}
.card-title a::after{content:"";position:absolute;inset:0;border-radius:var(--radius-16);z-index:1}
.card-desc{margin:8px 0 0;font:400 15px/24px var(--font-read);color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin:auto 0 0;padding-top:14px;display:flex;flex-wrap:wrap;gap:4px 8px;font:400 13px/18px var(--font-ui);color:var(--text-secondary)}
.card-meta>*+*::before{content:"·";margin-right:8px}
.card:hover,.card.is-hover{box-shadow:var(--shadow-medium)}
.card:hover .card-title,.card.is-hover .card-title{color:var(--primary)}
.card:hover .card-img img,.card.is-hover .card-img img{transform:scale(1.02)}
.card:focus-within,.card.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.card-title a:focus-visible{outline:none}


@media(max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid{grid-template-columns:minmax(0,1fr)}}

/* Approved catalogue controls, without category filters. */
:root{--field-border:#8c8f97;--disabled-text:#080f214a;--disabled-surface:#0515240f}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* ---------- Search + count ---------- */
.blog-tools{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px}
.search{position:relative;max-width:560px}
.search svg.lead-icon{position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--text-secondary);pointer-events:none}
.search input{width:100%;height:44px;padding:0 44px 0 44px;border:1px solid var(--field-border);border-radius:var(--radius-8);background:var(--surface);color:var(--text);font:400 15px/20px var(--font-ui);transition:border-color 120ms}
.search input::placeholder{color:var(--text-secondary)}
.search input:hover{border-color:var(--text-secondary)}
.search input:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--field-border)}
.search input::-webkit-search-cancel-button{display:none}
.search-clear{position:absolute;right:6px;top:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-full);background:transparent;color:var(--text-secondary);cursor:pointer}
.search-clear svg{width:18px;height:18px}
.search-clear:hover{background:var(--hover);color:var(--primary)}
.search-clear:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.search-clear[hidden]{display:none}
.result-count{margin:0;font:500 14px/20px var(--font-ui);color:var(--text-secondary);white-space:nowrap}
.result-count b{color:var(--text);font-weight:600}

.empty-text{margin:6px auto 0;max-width:520px;font:400 15px/24px var(--font-read);color:var(--text-secondary)}
.empty-actions{margin-top:16px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.btn-ghost{background:transparent;color:var(--text);outline:1px solid var(--border);outline-offset:-1px}
.btn-ghost:hover,.btn-ghost.is-hover{background:var(--hover);color:var(--primary)}
.btn-ghost:active{background:var(--pressed);color:var(--primary)}
.btn-ghost:focus-visible,.btn-ghost.is-focus{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Pagination ---------- */
.pager{margin:32px 0 0;display:flex;justify-content:center}
.pager[hidden]{display:none}
.pager ul{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:4px}
.pg{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--radius-8);background:transparent;color:var(--text);font:500 14px/20px var(--font-ui);font-variant-numeric:tabular-nums;cursor:pointer;text-decoration:none}
.pg svg{width:18px;height:18px}
.pg:hover:not([aria-disabled="true"]),.pg.is-hover{background:var(--hover);color:var(--primary)}
.pg:focus-visible,.pg.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.pg[aria-current="page"]{background:var(--selected);color:var(--primary);font-weight:600;box-shadow:inset 0 -2px 0 var(--primary)}  /* fill + underline + weight */
.pg[aria-disabled="true"]{color:var(--disabled-text);cursor:default}
.pg-edge{outline:1px solid var(--border);outline-offset:-1px}
.pg-edge[aria-disabled="true"]{outline-color:var(--disabled-surface)}


/* Queries and page numbers must wrap rather than widen the viewport. */
.blog-tools{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
.search{min-width:0;margin:0}
.result-count{white-space:normal;overflow-wrap:anywhere;text-align:right}
.empty-title,.empty-text{overflow-wrap:anywhere}
.pager ul{flex-wrap:wrap;justify-content:center}
.blog [hidden]{display:none}
@media(max-width:960px){.blog-tools{grid-template-columns:minmax(0,1fr)}.search{max-width:none}.result-count{text-align:left}.grid{gap:20px}}
@media(prefers-reduced-motion:reduce){.card:hover .card-img img{transform:none}}