/* Content Studio global Apple system layer.
   SF Pro is self-hosted in /assets/fonts and SF Symbols render through cb-sficons.js. */
@import url('/assets/fonts.css');

:root{
  --font:'SF Pro Text','SF Pro Display';
  --disp:'SF Pro Display','SF Pro Text';
  --mono:'SF Pro Text','SF Pro Display';
  --cb-canvas-max:1600px;
  --cb-page-pad:20px;
  --cb-page-pad-mobile:14px;
  --cb-page-title-size:clamp(19px,1.6vw,23px);
  --cb-page-subtitle-size:13px;
  --cb-eyebrow-size:10px;
  --cb-control-height:36px;
  --cb-control-radius:11px;
  --cb-control-gap:7px;
  --cb-accent:#0a84ff;
  --cb-text:#10131a;
  --cb-muted:#69768d;
  --cb-line:rgba(16,40,90,.12);
}

html,body,input,button,select,textarea{
  font-family:var(--font)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

html,body{
  background:#fff!important;
  background-image:none!important;
}

h1,h2,h3,h4,h5,h6,.display,.title,.gh-cr-cur,.rail-tt .t{
  font-family:var(--disp)!important;
}

.mono,code,kbd,pre{
  font-family:var(--mono)!important;
}

svg[data-sf]{
  fill:currentColor!important;
  stroke:none!important;
  stroke-width:0!important;
}

svg[data-sf]:not([data-built]){
  visibility:hidden;
}

/* Canonical page grammar. Apps keep their business-specific content, while
   these shared primitives lock typography, rhythm, controls, and view modes. */
.cb-page,.wrap{
  width:100%;
  max-width:var(--cb-canvas-max);
  margin-inline:auto;
  padding-inline:var(--cb-page-pad);
}

.cb-pagehead,.hero,.board-head,.template-head{
  color:var(--cb-text);
}

.cb-eyebrow,.hero .crumb,.board-heading .eyebrow,.template-head .eyebrow{
  display:block;
  margin:0 0 8px;
  color:var(--cb-accent)!important;
  font:600 var(--cb-eyebrow-size)/1 var(--disp)!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
}

.cb-page-title,.hero h1,.board-heading h1,.template-head h1{
  margin:0;
  color:var(--cb-text)!important;
  font:600 var(--cb-page-title-size)/1.12 var(--disp)!important;
  letter-spacing:-.022em!important;
}

.cb-page-subtitle,.hero .sub,.board-heading p,.template-head p{
  margin:6px 0 0;
  color:var(--cb-muted)!important;
  font:400 var(--cb-page-subtitle-size)/1.5 var(--font)!important;
}

.cb-toolbar,.filterbar{
  display:flex;
  align-items:center;
  gap:var(--cb-control-gap);
  width:100%;
  min-width:0;
  overflow-x:auto;
  padding:1px 0 3px;
  scrollbar-width:none;
}
.cb-toolbar::-webkit-scrollbar,.filterbar::-webkit-scrollbar{display:none}

.cb-toolbar-control,.filterbar .pcount,.filterbar .btn,.filterbar .tsearch{
  height:var(--cb-control-height)!important;
  border-radius:var(--cb-control-radius)!important;
}

.cb-viewtoggle{
  display:inline-flex;
  flex:0 0 auto;
  gap:3px;
  padding:3px!important;
  border:1px solid var(--cb-line);
  border-radius:var(--cb-control-radius)!important;
  background:rgba(16,40,90,.05);
}
.cb-viewtoggle button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:28px!important;
  padding:0 11px!important;
  border-radius:8px!important;
  color:var(--cb-muted);
  font:500 11.5px/1 var(--disp)!important;
  white-space:nowrap;
}
.cb-viewtoggle button.on{
  color:#fff;
  background:linear-gradient(180deg,#3a9bff,#0a84ff);
  box-shadow:0 6px 14px -7px rgba(10,132,255,.55);
}

@media(max-width:760px){
  .cb-page,.wrap{padding-inline:var(--cb-page-pad-mobile)}
}