/* portal.css — FirstTry Trust Center | F100 Trust Portal v4.4.2 */
:root {
  --brand:        #0052cc;
  --brand-dark:   #003d99;
  --brand-light:  #e3f0ff;
  --text:         #172b4d;
  --muted:        #5e6c84;
  --bg:           #f4f5f7;
  --white:        #ffffff;
  --border:       #dfe1e6;
  --success:      #00875a;
  --warn:         #ff8b00;
  --code-bg:      #1e1e1e;
  --code-text:    #d4d4d4;
  --sidebar-w:    260px;
  --meta-w:       240px;
  --topbar-h:     52px;
  --sans:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:         "JetBrains Mono", "Fira Code", Consolas, monospace;
  --radius:       6px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.10);
  --shadow-md:    0 4px 12px rgba(0,0,0,.13);
  --transition:   0.16s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.65}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;color:var(--brand-dark)}

/* Layout */
#layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr var(--meta-w);grid-template-areas:"sidebar main meta";min-height:100vh}

/* Sidebar */
#sidebar-nav{grid-area:sidebar;background:var(--white);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;z-index:100}
.sidebar-header{padding:16px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.portal-home-link{font-weight:700;font-size:.88rem;color:var(--brand);line-height:1.4;display:block}
.sidebar-search{padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-search input{width:100%;padding:6px 10px;font-size:.82rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-family:var(--sans);outline:none;transition:border-color var(--transition)}
.sidebar-search input:focus{border-color:var(--brand)}
.sidebar-groups{list-style:none;flex:1;overflow-y:auto;padding:8px 0 16px}
.sidebar-group{margin-bottom:4px}
.sidebar-group-label{display:block;padding:8px 14px 4px;font-size:.69rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sidebar-items{list-style:none}
.sidebar-item a{display:block;padding:5px 14px 5px 18px;font-size:.82rem;color:var(--text);border-left:3px solid transparent;transition:background var(--transition),color var(--transition),border-color var(--transition);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-item a:hover{background:var(--brand-light);color:var(--brand);text-decoration:none;border-left-color:var(--brand-light)}
.sidebar-item.active a{background:var(--brand-light);color:var(--brand);font-weight:600;border-left-color:var(--brand)}
.sidebar-item.search-hidden{display:none}

/* Main wrapper */
#main-wrapper{grid-area:main;display:flex;flex-direction:column;min-height:100vh;min-width:0}

/* Top bar */
#top-bar{height:var(--topbar-h);background:var(--brand);color:white;display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;position:sticky;top:0;z-index:99;box-shadow:var(--shadow-sm)}
#sidebar-toggle{display:none;background:none;border:none;color:white;font-size:1.2rem;cursor:pointer;padding:4px 6px}
.portal-title-bar{font-weight:600;font-size:.95rem;flex:1}
.version-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:2px 10px;font-size:.72rem;font-weight:600;letter-spacing:.04em}

/* Breadcrumbs */
.breadcrumbs{padding:10px 24px;font-size:.78rem;color:var(--muted);border-bottom:1px solid var(--border);background:var(--white)}
.breadcrumbs a{color:var(--brand)}
.breadcrumbs span{margin:0 5px}
.bc-current{color:var(--text);font-weight:500}

/* Content */
#content{flex:1;padding:28px 32px 40px;background:var(--white);max-width:900px}
.doc-content{line-height:1.72}
.doc-content h1{font-size:1.6rem;margin-bottom:8px;color:var(--brand-dark)}
.doc-content h2{font-size:1.22rem;margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);color:var(--text)}
.doc-content h3{font-size:1.04rem;margin:22px 0 8px;color:var(--text)}
.doc-content h4{font-size:.95rem;margin:16px 0 6px;font-weight:700}
.doc-content h5,.doc-content h6{font-size:.9rem;margin:12px 0 4px}
.doc-content p{margin:10px 0}
.doc-content ul,.doc-content ol{margin:8px 0 8px 22px}
.doc-content li{margin:4px 0}
.doc-content li>ul,.doc-content li>ol{margin-top:4px}
.doc-content strong{font-weight:700}
.doc-content em{font-style:italic}
.doc-content code{font-family:var(--mono);font-size:.83em;background:rgba(9,30,66,.08);border-radius:3px;padding:1px 5px;color:#c0392b}
.doc-content pre{background:var(--code-bg);border-radius:var(--radius);padding:16px 20px;overflow-x:auto;margin:16px 0;box-shadow:var(--shadow-sm)}
.doc-content pre code{background:none;color:var(--code-text);font-size:.82rem;padding:0;border-radius:0}
.doc-content table{border-collapse:collapse;width:100%;margin:16px 0;font-size:.88rem;box-shadow:var(--shadow-sm);border-radius:var(--radius);overflow:hidden}
.doc-content th{background:var(--brand);color:white;font-weight:600;padding:10px 12px;text-align:left}
.doc-content td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.doc-content tr:last-child td{border-bottom:none}
.doc-content tr:nth-child(even) td{background:#f8f9fb}
.doc-content blockquote{border-left:4px solid var(--brand);background:var(--brand-light);margin:14px 0;padding:10px 16px;border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--muted)}
.doc-content hr{border:none;border-top:1px solid var(--border);margin:24px 0}
.doc-content a{color:var(--brand)}
.doc-content a:hover{text-decoration:underline}
.note{background:#e3f0ff;border-left:4px solid #4c9aff;padding:10px 14px;border-radius:0 var(--radius) var(--radius) 0;margin:14px 0}
.warn{background:#fff3cd;border-left:4px solid #ffc400;padding:10px 14px;border-radius:0 var(--radius) var(--radius) 0;margin:14px 0}
.verified{background:#e3fcef;border-left:4px solid #00875a;padding:10px 14px;border-radius:0 var(--radius) var(--radius) 0;margin:14px 0}

/* Meta panel */
#meta-panel{grid-area:meta;background:var(--white);border-left:1px solid var(--border);padding:80px 16px 20px;position:sticky;top:0;height:100vh;overflow-y:auto;font-size:.82rem}
#meta-panel h4{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.meta-dl dt{font-size:.69rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:10px;font-weight:600}
.meta-dl dd{color:var(--text);margin-left:0;font-size:.82rem}
.meta-dl dd code{font-size:.79rem}
.meta-actions{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.btn-raw,.btn-print{display:inline-block;padding:7px 12px;border-radius:var(--radius);font-size:.8rem;font-weight:500;cursor:pointer;text-align:center;font-family:var(--sans);transition:background var(--transition)}
.btn-raw{background:var(--bg);border:1px solid var(--border);color:var(--brand);text-decoration:none}
.btn-raw:hover{background:var(--brand-light);text-decoration:none}
.btn-print{background:var(--bg);border:1px solid var(--border);color:var(--text)}
.btn-print:hover{background:#ebebeb}

/* Search overlay */
#search-overlay{display:none;position:fixed;top:var(--topbar-h);left:var(--sidebar-w);right:var(--meta-w);background:white;border:1px solid var(--border);border-top:none;box-shadow:var(--shadow-md);max-height:420px;overflow-y:auto;z-index:200;padding:8px 0}
#search-overlay.visible{display:block}
.sr-item{padding:10px 20px;cursor:pointer;border-bottom:1px solid var(--border);font-size:.88rem}
.sr-item:hover{background:var(--brand-light)}
.sr-title{font-weight:600;color:var(--brand)}
.sr-group{font-size:.72rem;color:var(--muted)}
.sr-excerpt{font-size:.79rem;color:var(--muted);margin-top:2px}

/* Footer */
#page-footer{border-top:1px solid var(--border);padding:14px 32px;font-size:.76rem;color:var(--muted);background:var(--white)}

/* Mobile ≤1100px: hide meta panel */
@media(max-width:1100px){
  #layout{grid-template-columns:var(--sidebar-w) 1fr;grid-template-areas:"sidebar main"}
  #meta-panel{display:none}
  #search-overlay{right:0}
}
/* Mobile ≤768px: off-canvas sidebar */
@media(max-width:768px){
  #layout{grid-template-columns:1fr;grid-template-areas:"main"}
  #sidebar-nav{position:fixed;left:-100%;top:0;width:82vw;max-width:300px;transition:left var(--transition);z-index:1000;box-shadow:var(--shadow-md)}
  #sidebar-nav.open{left:0}
  #sidebar-toggle{display:block}
  #search-overlay{left:0;right:0}
  #content{padding:16px}
}
/* Print */
@media print{
  #sidebar-nav,#meta-panel,#top-bar,.breadcrumbs,#page-footer,.meta-actions,#sidebar-toggle,#search-overlay{display:none!important}
  #layout{display:block}
  #main-wrapper{min-height:unset}
  #content{padding:0;max-width:100%;box-shadow:none}
  .doc-content a{color:var(--text);text-decoration:underline}
  .doc-content pre{border:1px solid #ccc;page-break-inside:avoid}
  .doc-content table{page-break-inside:avoid}
  body{font-size:11pt}
  .doc-content h1{font-size:18pt}
  .doc-content h2{font-size:14pt}
  .doc-content h3{font-size:12pt}
}

/* Index page overrides */
.index-hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:white;padding:56px 40px;text-align:center}
.index-hero h1{font-size:2rem;font-weight:800;margin-bottom:10px}
.index-hero p{font-size:1.05rem;opacity:.9;max-width:640px;margin:0 auto}
.index-body{max-width:1040px;margin:0 auto;padding:36px 24px}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.badge{background:var(--brand-light);border:1px solid #b2d0ff;border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:600;color:var(--brand-dark)}
.badge.green{background:#e3fcef;border-color:#79e2b2;color:#006644}
.badge.amber{background:#fffae6;border-color:#ffe380;color:#7a5900}
.quick-links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:20px 0}
.quick-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),border-color var(--transition);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text)}
.quick-card:hover{box-shadow:var(--shadow-md);border-color:var(--brand);text-decoration:none}
.quick-card .ci{font-size:1.7rem}
.quick-card .ct{font-size:.84rem;font-weight:600}
.quick-card .cd{font-size:.7rem;color:var(--muted)}
.nav-section{margin:32px 0}
.nav-section h2{font-size:1.12rem;color:var(--brand);margin-bottom:14px;border-bottom:2px solid var(--brand-light);padding-bottom:6px}
.doc-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.doc-grid li a{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;font-size:.87rem;color:var(--text);transition:border-color var(--transition),box-shadow var(--transition)}
.doc-grid li a:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);text-decoration:none}
.doc-grid li a .di{font-size:.69rem;color:var(--muted);margin-bottom:2px}
.doc-grid li a .dt{font-weight:500}
.contact-block{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin:20px 0;box-shadow:var(--shadow-sm)}
.contact-block h3{margin-bottom:10px;font-size:1rem}
.contact-block ul{list-style:none;margin:0}
.contact-block li{padding:4px 0;font-size:.9rem}
.disclaimer-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.disclaimer-list li{font-size:.88rem;color:var(--muted);padding-left:14px;position:relative}
.disclaimer-list li::before{content:"\2014";position:absolute;left:0;color:var(--muted)}

/* Document meta-card (replaces raw bold metadata lines) */
.doc-meta-card{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:var(--bg);border:1px solid var(--border);border-top:3px solid var(--brand);border-radius:0 0 var(--radius) var(--radius);padding:10px 16px;margin:0 0 20px;font-size:.81rem}
.dmc-badge{border-radius:20px;padding:3px 10px;font-size:.74rem;font-weight:700;white-space:nowrap}
.dmc-pack{background:#e3fcef;border:1px solid #79e2b2;color:#006644}
.dmc-badge:not(.dmc-pack){background:var(--brand-light);border:1px solid #b2d0ff;color:var(--brand-dark)}
.dmc-sep{width:1px;height:16px;background:var(--border);flex-shrink:0}
.dmc-field{display:inline-flex;align-items:center;gap:5px}
.dmc-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.dmc-val{color:var(--text)}
.dmc-val code{font-size:.79rem}

/* Table hover rows */
.doc-content tr:hover td{background:var(--brand-light)!important;transition:background var(--transition)}

/* Heading anchor links */
.doc-content h2,.doc-content h3{position:relative}
.anchor-link{margin-left:6px;opacity:0;font-size:.75em;color:var(--muted);text-decoration:none;transition:opacity var(--transition)}
.doc-content h2:hover .anchor-link,.doc-content h3:hover .anchor-link{opacity:1}
.anchor-link:hover{color:var(--brand);text-decoration:none}

/* Pack version label in meta panel */
.pack-version-label{font-size:.72rem;font-weight:700;color:var(--brand-dark);background:var(--brand-light);border-radius:var(--radius);padding:3px 8px;margin-bottom:8px;display:inline-block}

/* Download pack CTA on homepage */
.pack-cta{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:white;border-radius:var(--radius);padding:10px 20px;font-weight:600;font-size:.9rem;margin:12px 0;text-decoration:none;transition:background var(--transition),box-shadow var(--transition);box-shadow:var(--shadow-sm)}
.pack-cta:hover{background:var(--brand-dark);text-decoration:none;box-shadow:var(--shadow-md);color:white}
.pack-cta-outline{background:var(--white);color:var(--brand);border:1px solid var(--brand)}
.pack-cta-outline:hover{background:var(--brand-light);color:var(--brand-dark)}