/* Docusign 2024 brand design tokens
   Source: brand.docusign.com (April 2024 rebrand)
   Inkwell #130032 replaces old navy; Cobalt #4C00FF is new primary.
*/
:root {
  /* ── Brand palette ── */
  --cobalt:       #4C00FF;
  --cobalt-hover: #3A00CC;
  --cobalt-light: #EDE8FF;
  --inkwell:      #130032;
  --deep-violet:  #26065D;
  --mist:         #CBC2FF;
  --ecru:         #F8F3F0;
  --poppy:        #FF5252;
  --poppy-bg:     #FFF0F0;
  --slate:        #6B5F8A;

  /* ── Semantic colours ── */
  --success:      #027A48;
  --success-bg:   #ECFDF3;
  --warning:      #92400E;
  --warning-bg:   #FFFBEB;
  --warning-amber:#FFAB00;
  --error:        var(--poppy);
  --error-bg:     var(--poppy-bg);

  /* ── Nav ── */
  --nav-bg:           var(--inkwell);
  --nav-hover:        var(--deep-violet);
  --nav-active-bg:    rgba(76,0,255,0.22);
  --nav-active-border:var(--cobalt);
  --nav-text:         #A899CC;
  --nav-text-active:  #FFFFFF;
  --nav-width:        228px;

  /* ── Layout ── */
  --topbar-h:     56px;
  --page-bg:      var(--ecru);
  --card-bg:      #FFFFFF;
  --border:       #E2DDF0;
  --text:         var(--inkwell);
  --text-muted:   var(--slate);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(19,0,50,0.08), 0 1px 2px rgba(19,0,50,0.04);
  --shadow-md: 0 4px 16px rgba(19,0,50,0.14);

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  /* ── Border radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 20px;

  /* ── Typography ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-size-xs:  11px;
  --font-size-sm:  12px;
  --font-size-base:13px;
  --font-size-md:  14px;
  --font-size-lg:  16px;
  --font-size-xl:  20px;
}

*{box-sizing:border-box}body{font:14px var(--font);background:var(--page-bg);color:var(--text);margin:0}a{color:var(--cobalt)}[hidden]{display:none!important}
#app-nav{width:228px;background:var(--inkwell);height:100vh;position:fixed;left:0;top:0;display:flex;flex-direction:column;color:#fff;z-index:10}
#nav-logo{padding:24px 20px;border-bottom:1px solid #ffffff16}#nav-logo svg{display:block;width:148px;height:auto}.nav-logo-sub{font-size:11px;color:var(--nav-text);margin-top:12px;line-height:1.5}.nav-section-label{font-size:10px;letter-spacing:.08em;color:#a899cc;padding:20px 20px 8px;margin:0}.side-tools{display:flex;flex-direction:column}.side-tools button{font:inherit;border:0;border-left:3px solid transparent;border-radius:0;background:transparent;color:#a899cc;text-align:left;padding:14px 20px;margin:0;cursor:pointer}.side-tools button:hover{background:var(--deep-violet);color:#fff}.side-tools button[aria-selected="true"]{color:#fff;background:rgba(76,0,255,.22);border-left-color:var(--cobalt)}.nav-footer{margin-top:auto;border-top:1px solid #ffffff16;padding:20px;color:#a899cc;font-size:11px}
#app-body{margin-left:228px;min-height:100vh}.topbar{height:64px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-weight:600}.admin-badge{color:var(--slate);font-size:12px;font-weight:400}main{max-width:1320px;padding:28px 32px;margin:auto}h2{font-size:24px;margin:0 0 10px;color:var(--inkwell)}p{line-height:1.6;color:var(--slate)}#field-tool,#metadata-tool{background:#fff;border:1px solid var(--border);border-radius:8px;padding:28px;box-shadow:var(--shadow-sm)}label{display:block;font-size:13px;font-weight:500;margin:18px 0}input,select,button{font:inherit;border-radius:4px}input:not([type=checkbox]),select{display:block;padding:10px 12px;border:1px solid #bfb6d2;background:white;color:var(--text);margin:7px 0;max-width:100%;width:100%}input[type=file]{background:#faf9fc!important}input[type=checkbox]{margin-right:8px}button{padding:10px 16px;margin:6px 8px 6px 0;background:var(--cobalt);color:white;border:1px solid var(--cobalt);cursor:pointer;font-weight:600}button:hover{background:var(--cobalt-hover)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mist);outline-offset:3px}.account-bar{display:flex;align-items:center;gap:20px;margin-bottom:24px}.account-bar label{flex:1;margin:0}.account-bar button{margin-top:22px;background:white;color:var(--cobalt)}.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;margin-top:22px}td,th{padding:13px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}th{background:#f7f5fb;color:var(--slate);font-size:12px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 var(--font-mono);padding:16px;background:#f7f5fb;border-radius:6px}pre:empty{display:none}#apply-area,#meta-apply-area{margin-top:24px;padding:20px;background:var(--cobalt-light);border-radius:6px}#meta-mappings{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:20px}#status:not(:empty){padding:14px 18px;background:#fff;border:1px solid var(--border);border-radius:6px}#identity{font-size:13px}
@media(max-width:760px){#app-nav{position:relative;width:100%;height:auto}#nav-logo{padding:16px 20px}.side-tools{flex-direction:row}.side-tools button{flex:1;border-left:0;border-bottom:3px solid transparent}.side-tools button[aria-selected="true"]{border-bottom-color:var(--cobalt)}.nav-section-label,.nav-footer{display:none}#app-body{margin-left:0}.topbar{padding:0 20px}.admin-badge{display:none}main{padding:20px}.account-bar{flex-wrap:wrap}#field-tool,#metadata-tool{padding:20px}}

.file-control{position:relative;margin:18px 0}.file-control label{margin-bottom:8px}.file-control .file-input{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.file-control span{font-size:13px;color:var(--slate);margin-left:8px;overflow-wrap:anywhere}