/* ==========================================================================
Field Binder — shared design system
Tokens and components translated from the app-v3_1.html prototype.
Every page (landing, SEO pages, app shell) links this file and the
canonical font block below instead of duplicating its own inline styles.
Font block to include in alongside this stylesheet:
========================================================================== */
:root{
--paper:#FAFAF7;--surface:#FFFFFF;--ink:#181818;
--line:#DEDDD4;--line-strong:#C6C4B7;--muted:#66645C;
--navy:#1B3A5C;--navy-bg:#E3EAF0;
--red:#A23A2E;--red-bg:#F5E0DC;
--green:#3F6B3F;--green-bg:#E4EDE1;
--amber:#9A6B1E;--amber-bg:#F3E6C9;
--purple:#5B3A8C;--purple-bg:#EAE3F2;
--display:'Archivo',sans-serif;--body:'Source Sans 3',sans-serif;--mono:'Space Mono',monospace;
}
body.dark{
--paper:#161615;--surface:#1e1e1c;--ink:#F2F1EA;
--line:#38372f;--line-strong:#4b4a40;--muted:#a5a396;
--navy-bg:#1f2c3d;--red-bg:#3a231f;--green-bg:#20301f;--amber-bg:#3a2f16;--purple-bg:#2a2338;
}
/* ── Base resets ─────────────────────────────────────────────────────── */
.fb *{box-sizing:border-box;margin:0;padding:0;}
.fb{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:14px;}
.fb :focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
.fb button{font-family:inherit;font-size:inherit;background:none;border:none;cursor:pointer;color:inherit;}
.fb input,.fb select,.fb textarea{font-family:inherit;}
.fb a{color:inherit;text-decoration:none;}
/* ── Layout shell (app sidebar/topbar) ──────────────────────────────── */
.fb-app{display:flex;height:100vh;}
.fb-sidebar{width:200px;flex-shrink:0;background:var(--surface);border-right:2px solid var(--ink);display:flex;flex-direction:column;padding:0;}
.fb-brand{display:flex;align-items:center;gap:9px;padding:20px 18px;font-family:var(--display);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:0.02em;border-bottom:2px solid var(--ink);}
.fb-brand .mark{width:18px;height:18px;background:var(--ink);flex-shrink:0;}
.fb-nav-list{padding:10px 0;}
.fb-nav-item{display:flex;align-items:center;gap:10px;padding:11px 18px;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);border-left:4px solid transparent;width:100%;text-align:left;}
.fb-nav-item svg{flex-shrink:0;}
.fb-nav-item:hover{background:var(--paper);}
.fb-nav-item.active{color:var(--ink);background:var(--paper);}
.fb-nav-item[data-accent="ink"].active,.fb-nav-item[data-accent="ink"]:hover{border-left-color:var(--ink);}
.fb-nav-item[data-accent="red"].active,.fb-nav-item[data-accent="red"]:hover{border-left-color:var(--red);}
.fb-nav-item[data-accent="purple"].active,.fb-nav-item[data-accent="purple"]:hover{border-left-color:var(--purple);}
.fb-nav-spacer{flex:1;}
.fb-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
.fb-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 30px;border-bottom:2px solid var(--ink);background:var(--surface);flex-shrink:0;}
.fb-workspace-name{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;}
.fb-topbar-right{display:flex;align-items:center;gap:16px;}
.fb-avatar{width:26px;height:26px;border-radius:50%;background:var(--navy-bg);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--mono);}
.fb-view{flex:1;overflow-y:auto;padding:40px 44px;}
.fb-greet{font-family:var(--mono);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;}
.fb-view h1{font-family:var(--display);font-size:30px;font-weight:800;text-transform:uppercase;letter-spacing:0.01em;margin-bottom:24px;}
.fb-hint{font-size:12.5px;color:var(--muted);margin-bottom:28px;}
.fb-label-row{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px;}
/* ── Mode / segmented toggle ─────────────────────────────────────────── */
.fb-mode-toggle{display:flex;border:2px solid var(--ink);font-family:var(--mono);font-size:11px;text-transform:uppercase;}
.fb-mode-btn{padding:7px 14px;color:var(--muted);}
.fb-mode-btn.active{background:var(--ink);color:var(--paper);}
/* ── Search ──────────────────────────────────────────────────────────── */
.fb-search-wrap{position:relative;max-width:560px;margin-bottom:6px;}
.fb-search-box{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);padding:13px 16px;background:var(--surface);}
.fb-search-box input{border:none;outline:none;background:none;flex:1;font-size:14px;font-family:var(--mono);}
.fb-kbd{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line-strong);padding:2px 7px;}
.fb-suggest-box{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:2px solid var(--ink);padding:6px;display:none;z-index:5;}
.fb-suggest-box.show{display:block;}
.fb-suggest-label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;color:var(--muted);padding:6px 10px 2px;}
.fb-suggest-item{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;cursor:pointer;}
.fb-suggest-item:hover{background:var(--paper);}
.fb-suggest-item .t{font-size:13px;font-weight:600;}
.fb-suggest-item .m{font-family:var(--mono);font-size:10.5px;color:var(--muted);}
/* ── Cards & grids ───────────────────────────────────────────────────── */
.fb-pin-grid,.fb-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.fb-card{border:2px solid var(--ink);padding:16px;background:var(--surface);cursor:pointer;}
.fb-card:hover{background:var(--paper);}
.fb-card h4{font-size:14px;font-weight:600;margin:8px 0 8px;}
.fb-mini-tags{display:flex;gap:6px;flex-wrap:wrap;}
.fb-mini-tag{font-family:var(--mono);font-size:10px;padding:2px 7px;background:var(--paper);border:1px solid var(--line-strong);color:var(--muted);}
.fb-lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:820px;}
.fb-lib-card{border:2px solid var(--ink);background:var(--surface);padding:18px;cursor:pointer;position:relative;}
.fb-lib-card:hover{background:var(--paper);}
.fb-lib-card .swatch{width:26px;height:8px;margin-bottom:14px;}
.fb-lib-card h4{font-size:15px;font-weight:600;margin-bottom:6px;}
.fb-lib-card .count{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;}
.fb-lib-card.new{border-style:dashed;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--muted);min-height:96px;}
.fb-lib-card.new:hover{color:var(--ink);border-color:var(--ink);}
.fb-lib-card.new .plus{font-family:var(--display);font-size:22px;font-weight:800;}
@media (max-width:820px){.fb-lib-grid,.fb-grid-3,.fb-pin-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.fb-lib-grid,.fb-grid-3,.fb-pin-grid{grid-template-columns:1fr;}}
.fb-pin-toggle{position:absolute;top:12px;right:12px;color:var(--line-strong);background:none;border:none;cursor:pointer;padding:2px;}
.fb-pin-toggle:hover{color:var(--ink);}
.fb-pin-toggle.active{color:var(--amber);}
.fb-lib-list{display:flex;flex-direction:column;gap:0;max-width:860px;border-top:2px solid var(--ink);}
.fb-lib-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4px;border-bottom:2px solid var(--ink);cursor:pointer;}
.fb-lib-row:hover{background:var(--surface);}
.fb-lib-row-left{display:flex;align-items:center;gap:14px;}
.fb-lib-row h4{font-size:14.5px;font-weight:600;margin-bottom:6px;}
.fb-lib-row .fb-pin-toggle{position:static;margin-left:10px;}
.fb-lib-toolbar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
.fb-tag-filter{border:2px solid var(--ink);padding:6px 14px;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted);cursor:pointer;}
.fb-tag-filter.active{background:var(--ink);color:var(--paper);}
/* ── Chips, tags, and the rubber-stamp approval mark ────────────────── */
.fb-tag-set{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.fb-chip{font-family:var(--mono);font-size:10.5px;padding:3px 9px;}
.fb-chip.client{background:var(--navy-bg);color:var(--navy);}
.fb-chip.category{border:1px solid var(--line-strong);color:var(--muted);}
.fb-chip.expiry{background:var(--amber-bg);color:var(--amber);}
.fb-stamp{
font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
border:2px solid var(--green);color:var(--green);padding:3px 10px;border-radius:3px;transform:rotate(-3deg);
display:inline-block;position:relative;
}
.fb-stamp::before{content:"";position:absolute;inset:2px;border:1px solid var(--green);border-radius:2px;}
.fb-stamp.pending{border-color:var(--red);color:var(--red);}
.fb-stamp.pending::before{border-color:var(--red);}
/* ── Team / roles ────────────────────────────────────────────────────── */
.fb-team-list{display:flex;flex-direction:column;max-width:680px;border-top:2px solid var(--ink);}
.fb-team-row{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:2px solid var(--ink);gap:12px;}
.fb-team-row.disabled{opacity:0.5;}
.fb-team-row-left h4{font-size:14px;font-weight:600;}
.fb-team-row-left .role-note{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;}
.fb-team-row-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.fb-role-pill{font-family:var(--mono);font-size:11px;text-transform:uppercase;padding:4px 10px;background:var(--navy-bg);color:var(--navy);}
.fb-status-pill{font-family:var(--mono);font-size:10px;text-transform:uppercase;padding:3px 8px;background:var(--green-bg);color:var(--green);}
.fb-status-pill.off{background:var(--red-bg);color:var(--red);}
.fb-role-select{border:1px solid var(--line-strong);padding:6px 8px;font-family:var(--mono);font-size:11px;background:var(--surface);}
.fb-revoke-btn{border:2px solid var(--red);color:var(--red);padding:6px 12px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;background:none;}
.fb-revoke-btn.restore{border-color:var(--green);color:var(--green);}
.fb-manage-btn{border:1px solid var(--line-strong);background:none;color:var(--muted);padding:6px 12px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;}
.fb-manage-btn:hover{border-color:var(--ink);color:var(--ink);}
.fb-invite-btn{display:flex;align-items:center;gap:6px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:10px 18px;font-family:var(--mono);font-size:12px;text-transform:uppercase;margin-bottom:20px;}
/* Visibility helper — mirrors the app shell's existing isManager() pattern */
.fb-manager-only{display:none;}
body.fb-manager .fb-manager-only{display:flex;}
body.fb-manager .fb-manager-only.block{display:block;}
/* ── Settings ────────────────────────────────────────────────────────── */
.fb-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;}
.fb-settings-card{border:2px solid var(--ink);padding:20px;background:var(--surface);}
.fb-settings-card h3{font-family:var(--display);font-size:14px;font-weight:700;text-transform:uppercase;margin-bottom:4px;}
.fb-settings-card p{font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.fb-field{margin-bottom:12px;}
.fb-field label{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:5px;}
.fb-field input{width:100%;border:1px solid var(--line-strong);padding:8px 10px;font-size:13px;background:var(--paper);}
.fb-save-btn{border:2px solid var(--ink);padding:8px 16px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;margin-top:4px;}
@media (max-width:860px){.fb-settings-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.fb-settings-grid{grid-template-columns:1fr;}}
.fb-nudge-banner{display:flex;align-items:center;gap:16px;border:2px solid var(--ink);background:var(--surface);padding:16px 20px;max-width:860px;margin-bottom:24px;}
.fb-nudge-icon{font-size:20px;}
.fb-nudge-body{flex:1;}
.fb-nudge-body h4{font-family:var(--display);font-size:13.5px;font-weight:700;text-transform:uppercase;margin-bottom:3px;}
.fb-nudge-body p{font-size:12.5px;color:var(--muted);}
.fb-nudge-cta{border:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:9px 16px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;white-space:nowrap;}
.fb-nudge-close{color:var(--muted);font-size:14px;padding:4px;}
.fb-sec-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line);}
.fb-sec-row h4{font-size:13.5px;font-weight:600;margin-bottom:3px;}
.fb-sec-row p{font-size:12px;color:var(--muted);margin-bottom:0;}
.fb-notif-row-full{padding:12px 0;border-top:1px solid var(--line);}
.fb-notif-row-full:first-of-type{border-top:none;padding-top:0;}
.fb-notif-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;margin-bottom:5px;}
.fb-notif-scope{font-size:11.5px;color:var(--muted);}
/* ── Toggle switch ───────────────────────────────────────────────────── */
.fb-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
.fb-switch input{opacity:0;width:0;height:0;}
.fb-switch .slider{position:absolute;inset:0;background:var(--line-strong);border-radius:22px;cursor:pointer;transition:.15s;}
.fb-switch .slider::before{content:"";position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:var(--surface);border-radius:50%;transition:.15s;}
.fb-switch input:checked + .slider{background:var(--ink);}
.fb-switch input:checked + .slider::before{transform:translateX(16px);}
/* ── Document detail ─────────────────────────────────────────────────── */
.fb-detail-shell{max-width:740px;}
.fb-back{font-family:var(--mono);color:var(--navy);cursor:pointer;font-size:11.5px;text-transform:uppercase;margin-bottom:20px;display:inline-block;}
.fb-doc-eyebrow{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;}
.fb-doc-title{font-family:var(--display);font-size:32px;font-weight:800;text-transform:uppercase;line-height:1.15;margin-bottom:10px;}
.fb-doc-sub{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:22px;}
.fb-label-panel{border:2px solid var(--ink);background:var(--surface);padding:18px 20px;margin-bottom:26px;}
.fb-label-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.fb-label-panel-head span{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}
.fb-add-label{font-family:var(--mono);font-size:11.5px;color:var(--navy);cursor:pointer;}
.fb-doc-step{border-left:3px solid var(--ink);padding:2px 0 24px 22px;position:relative;}
.fb-doc-step:last-child{padding-bottom:0;}
.fb-doc-step::before{content:"";position:absolute;left:-6px;top:2px;width:9px;height:9px;background:var(--ink);}
.fb-doc-step h4{font-family:var(--display);font-size:16px;font-weight:700;margin-bottom:6px;}
.fb-doc-step p{font-size:13.5px;color:var(--muted);line-height:1.65;}
.fb-code-row{margin-top:10px;display:flex;align-items:center;justify-content:space-between;background:var(--paper);border:1px solid var(--line-strong);padding:10px 13px;font-family:var(--mono);font-size:12px;}
.fb-doc-footer{margin-top:28px;padding-top:16px;border-top:2px solid var(--ink);font-family:var(--mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;}
/* ── Upload / forms ──────────────────────────────────────────────────── */
.fb-upload-btn{border:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:9px 16px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;}
.fb-upload-panel{max-width:860px;border:2px dashed var(--line-strong);padding:18px;margin:16px 0 24px;background:var(--surface);display:none;}
.fb-upload-panel.open{display:block;}
.fb-form-panel{max-width:420px;border:2px solid var(--ink);padding:20px;margin:16px 0 24px;background:var(--surface);display:none;}
.fb-form-panel.open{display:block;}
.fb-upload-label{font-size:12.5px;color:var(--muted);margin-bottom:12px;}
.fb-dropzone{display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);padding:22px;cursor:pointer;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;color:var(--muted);text-align:center;}
.fb-dropzone:hover{background:var(--paper);}
/* ── Responsive: collapse sidebar to icon rail ──────────────────────── */
@media (max-width:860px){
.fb-sidebar{width:64px;}
.fb-sidebar .fb-nav-item span,.fb-brand span:not(.mark){display:none;}
.fb-nav-item{justify-content:center;}
.fb-brand{justify-content:center;padding:20px 8px;}
}
@media (max-width:560px){
.fb-view{padding:28px 20px;}
.fb-topbar{padding:12px 16px;}
}
/* ── Marketing-site specific (rounded-free, still Field Binder) ────────
Landing/SEO pages use wider content sections than the app shell —
these classes give them the same sharp-corner/thick-border/stamp
language without needing the app's fixed sidebar layout. ────────── */
.fb-wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
.fb-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);background:var(--navy-bg);padding:5px 12px;display:inline-block;border:1px solid var(--navy);}
.fb-btn-primary{display:inline-block;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:13px 22px;font-family:var(--mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;transition:transform .15s ease,box-shadow .15s ease;}
.fb-btn-secondary{display:inline-block;border:2px solid var(--ink);color:var(--ink);padding:11px 22px;font-family:var(--mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;transition:transform .15s ease,box-shadow .15s ease;}
.fb-btn-primary:hover,.fb-btn-secondary:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink);}
.fb-btn-primary:active,.fb-btn-secondary:active{transform:translate(0,0);box-shadow:none;}
.fb-section{padding:76px 0;border-top:2px solid var(--ink);}
.fb-section-head{max-width:600px;margin:0 auto 44px;text-align:center;}
.fb-section-head h2{font-family:var(--display);font-size:28px;font-weight:800;text-transform:uppercase;letter-spacing:0.01em;margin-top:14px;}
.fb-section-head p{color:var(--muted);font-size:15px;margin-top:12px;}
.fb-price-card{border:2px solid var(--ink);padding:28px;background:var(--surface);position:relative;transition:transform .15s ease,box-shadow .15s ease;}
.fb-price-card.featured{border-width:3px;}
.fb-price-card:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink);}
.fb-price-card h3{font-family:var(--display);font-size:15px;font-weight:700;text-transform:uppercase;margin-bottom:6px;}
.fb-price-card .amt{font-family:var(--display);font-size:32px;font-weight:800;margin:10px 0 2px;}
.fb-price-card .per{font-size:12.5px;color:var(--muted);margin-bottom:20px;}
.fb-price-feat{font-size:13px;color:var(--muted);padding:9px 0;border-top:1px solid var(--line);}
.fb-price-feat:first-of-type{border-top:none;}