/*
VERSION:   1.1.0
BUILT:     2026-10-31 11:25 PM Arizona
AUTHOR:    Claude Code (Delta Vault builder, Opus 5.5) for Dr. Vance Vasile
FILE:      app/static/cmc_vault.css
PURPOSE:   Delta Vault (owner go 2026-10-31; first look v1.1 approved): only .vt-* rules and the dragon's .dg-* inside .vt-dragon.
           1. the partner's pages at vault.<domain> (cmc_vault_base.html: their own frame, never the CMC's header);
           2. the staff pages inside the CMC (Admin › Partners › Delta Vault; the Dashboard card).
           Colours only from the theme's variables (/theme.css: --page, --card, --ink, --mu, --line, --gold..., --black, --on-dark...).
           Type 16 px, nothing under 15 px; taps 44 px; tables keep their headings in view and become cards on a phone.
           The little motion (owner 2026-10-31): the dragon winks every 6 s (eye shuts, brow dips), whiskers drift; none when the
           person asks for less motion.
CHANGELOG: 1.1.0 2026-10-31 11:25 PM Arizona Claude Code: .vt-how (Vault sign-ins: how to give a person the Vault in Delta HQ).
           1.0.0 2026-10-31 6:43 PM Arizona Claude Code: first version.
*/

/* ===== 1. the partner's pages ===== */
.vt-page{margin:0;background:var(--page);color:var(--ink);font:400 16px/1.5 "Figtree","Segoe UI",system-ui,sans-serif}
.vt-page.vt-dark{background:var(--black)}
.vt-page *{box-sizing:border-box}
.vt-page a{color:var(--gold-ink)}
.vt-page h1,.vt-page h2{font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;font-weight:600;line-height:1.2;margin:0}
.vt-page h1{font-size:28px}.vt-page h2{font-size:24px}
.vt-mu{color:var(--mu);margin:2px 0 0}
.vt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vt-head{height:64px;background:var(--black);color:var(--on-dark);display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 24px;border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:20}
.vt-brand{display:flex;align-items:center;gap:12px;color:var(--on-dark);text-decoration:none;min-width:0}
.vt-page .vt-brand{color:var(--on-dark)}
.vt-mark{width:34px;height:34px;flex:none;fill:var(--gold)}
.vt-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:600;white-space:nowrap}
.vt-name b{color:var(--on-dark-acc);font-weight:600}
.vt-user{display:flex;align-items:center;gap:14px;white-space:nowrap;min-width:0}
.vt-user form{margin:0}
.vt-who{color:var(--on-dark-2);overflow:hidden;text-overflow:ellipsis}
.vt-out{min-height:44px;padding:0 16px;border:1px solid var(--on-dark-acc);border-radius:8px;background:transparent;color:var(--on-dark);
  font:600 16px "Figtree",sans-serif;cursor:pointer}
.vt-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:8px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:600 16px/1 "Figtree",sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer}
.vt-page a.vt-btn{color:var(--ink)}
.vt-btn.vt-main,.vt-page a.vt-btn.vt-main{background:var(--foil);color:var(--on-accent);border-color:var(--gold-ink)}
.vt-btn.vt-key{border-color:var(--gold)}
.vt-link{background:none;border:0;padding:0 4px;min-height:44px;color:var(--gold-ink);text-decoration:underline;font:inherit;cursor:pointer}
.vt-page :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vt-flash{border-radius:8px;padding:10px 14px;margin:0 0 14px;border:1px solid var(--line)}
.vt-flash.ok{background:var(--ok-bg);color:var(--ok)}
.vt-flash.err{background:var(--bad-bg);color:var(--bad)}
.vt-pill{display:inline-block;border-radius:999px;padding:1px 10px;font-size:15px;font-weight:600;white-space:nowrap}
.vt-pill.new{background:var(--gold-bg);color:var(--gold-ink);border:1px solid var(--gold)}
.vt-pill.ok{background:var(--ok-bg);color:var(--ok)}

/* the door */
.vt-doorway{min-height:calc(100vh - 67px);position:relative;display:flex;align-items:center;justify-content:center;padding:96px 16px 40px;overflow:hidden}
.vt-door-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.vt-card{position:relative;width:100%;max-width:440px;background:var(--card);border:1px solid var(--gold);border-radius:14px;padding:28px 28px 22px}
.vt-doorway .vt-card::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);border-radius:10px;pointer-events:none}
.vt-card-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.vt-door{width:56px;height:56px;flex:none;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round}
.vt-door .vt-door-in{stroke-width:1.2;stroke:var(--gold-lt)}
.vt-door .vt-dial-hub{fill:var(--gold)}
.vt-steps{display:flex;gap:8px;margin:0 0 14px;padding:0;list-style:none;font-size:15px;flex-wrap:wrap}
.vt-steps li{padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mu)}
.vt-steps li.on{border-color:var(--gold);background:var(--gold-bg);color:var(--gold-ink);font-weight:600}
.vt-steps li.done{color:var(--ok);border-color:var(--ok)}
.vt-foot{margin:14px 0 0;text-align:center;font-size:15px;color:var(--mu)}
.vt-foot-row{display:flex;justify-content:center;align-items:center;gap:6px}
.vt-foot-row form{margin:0}

/* forms: the label line (24 px, one line, "* (required)" on it), the box (44 px), the helper under the box */
.vt-f{margin:0}
.vt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:14px;align-items:start}
.vt-fld{display:grid;grid-template-rows:24px auto auto;row-gap:6px;margin:0 0 14px;min-width:0}
.vt-grid .vt-fld{margin:0}
.vt-wide{grid-column:1/-1}
.vt-l{font-weight:600;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-page .req,.vt-file .req{color:var(--gold-ink);font-weight:700;margin-left:4px}
.vt-fld input,.vt-fld select,.vt-fld textarea{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--ink);font:16px "Figtree",sans-serif;padding:8px 12px}
.vt-fld textarea{min-height:88px;resize:vertical}
.vt-fld input::placeholder{color:var(--mu);opacity:1}
.vt-s{color:var(--mu);font-size:15px;line-height:1.4}
.vt-code input{letter-spacing:.5em;font-size:20px;text-align:center;font-weight:600}
.vt-main{width:auto}
.vt-card .vt-f .vt-main{width:100%;margin-top:4px}
.vt-drop{border:2px dashed var(--gold);border-radius:10px;background:var(--gold-bg);min-height:120px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;min-width:0;overflow:hidden}
.vt-drop input[type=file]{border:0;background:transparent;padding:0;width:100%;max-width:340px;min-height:44px}
.vt-drop input[type=file]::file-selector-button{min-height:44px;padding:0 18px;margin-right:12px;border:1px solid var(--gold);border-radius:8px;
  background:var(--card);color:var(--ink);font:600 16px "Figtree",sans-serif;cursor:pointer}
.vt-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.vt-form{max-width:none}

/* the vault */
.vt-wrap{max-width:1180px;margin:0 auto;padding:24px}
.vt-crumb{margin:0 0 6px;font-size:15px;color:var(--mu);text-wrap:pretty}
.vt-h1{margin-bottom:16px}
.vt-band{background:var(--black);color:var(--on-dark);border-radius:12px;padding:18px 22px;display:flex;align-items:center;gap:18px;margin-bottom:22px;
  border-bottom:3px solid var(--gold);overflow:hidden}
.vt-band h1{color:var(--on-dark)}
.vt-band p{margin:2px 0 0;color:var(--on-dark-2)}
.vt-sec{margin-bottom:24px}
.vt-sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.vt-count{font:500 16px "Figtree",sans-serif;color:var(--mu);margin-left:6px}
.vt-empty{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;color:var(--mu);margin:0}
.vt-tbox{max-height:70vh;overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.vt-t{width:100%;border-collapse:separate;border-spacing:0}
.vt-t th{position:sticky;top:0;z-index:2;background:var(--black);color:var(--on-dark);text-align:left;font-weight:600;padding:10px 12px;white-space:nowrap}
.vt-t td{padding:10px 12px;border-top:1px solid var(--line-2);vertical-align:middle}
.vt-t tr.vt-new td{background:var(--gold-bg)}
.vt-t td[data-l="Put in"],.vt-t td[data-l="Ends"],.vt-t td[data-l="Sent"],.vt-t td[data-l="Sent by"],.vt-t td[data-l="Status"]{white-space:nowrap}
.vt-t td.vt-first{min-width:220px}
.vt-acts{white-space:nowrap;text-align:right}
.vt-acts .vt-btn{margin-left:6px}
.vt-ext{display:inline-block;min-width:44px;text-align:center;border:1px solid var(--gold);color:var(--gold-ink);border-radius:4px;font-size:15px;
  font-weight:700;margin-right:8px;padding:0 4px}
.vt-fname{font-weight:600;overflow-wrap:anywhere}
@media (min-width:761px) and (max-width:1200px){.vt-t td.vt-acts{white-space:normal;width:1%}.vt-t td.vt-acts .vt-btn{display:flex;width:100%;margin:4px 0}}

/* the dragon */
.vt-dragon{height:auto;pointer-events:none}
.vt-dragon.vt-peek{position:absolute;left:50%;top:-62px;transform:translateX(-50%);width:210px}
.vt-dragon.vt-side{margin-left:auto;width:150px;flex:none}
.vt-dragon .dg-head{fill:var(--gold);stroke:var(--gold-ink);stroke-width:1.5;stroke-linejoin:round}
.vt-dragon .dg-shade{fill:var(--gold-ink);fill-opacity:.45}
.vt-dragon .dg-lit{stroke:var(--gold-bg);stroke-width:1.2;stroke-linecap:round;stroke-opacity:.9}
.vt-dragon .dg-snout{fill:var(--gold-lt);stroke:var(--gold-ink);stroke-width:1.3}
.vt-dragon .dg-mane{fill:color-mix(in srgb,var(--gold) 55%,var(--gold-ink));stroke:var(--gold-ink);stroke-width:1.3}
.vt-dragon .dg-antler{stroke:color-mix(in srgb,var(--gold) 70%,var(--gold-ink));stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.vt-dragon .dg-whisker{stroke:var(--gold-ink);stroke-width:1.6;stroke-linecap:round}
.vt-dragon .dg-eye{fill:var(--card);stroke:var(--ink);stroke-width:1.3}
.vt-dragon .dg-pupil{fill:var(--ink)}
.vt-dragon .dg-glint{fill:var(--card)}
.vt-dragon .dg-brow{stroke:var(--ink);stroke-width:2.8;stroke-linecap:round}
.vt-dragon .dg-scale{stroke:var(--gold-ink);stroke-width:1.2;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  @keyframes vt-wink{0%,84%,94%,100%{transform:scaleY(1)}87%,90%{transform:scaleY(.08)}}
  @keyframes vt-brow{0%,84%,94%,100%{transform:translateY(0) rotate(0)}87%,90%{transform:translateY(4px) rotate(-6deg)}}
  @keyframes vt-drift{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
  @keyframes vt-turn{0%,80%{transform:rotate(0)}90%{transform:rotate(90deg)}100%{transform:rotate(0)}}
  .vt-dragon .dg-blink{transform-box:fill-box;transform-origin:center;animation:vt-wink 6s ease-in-out 1.5s infinite}
  .vt-dragon .dg-wbrow{transform-box:fill-box;transform-origin:100% 100%;animation:vt-brow 6s ease-in-out 1.5s infinite}
  .vt-dragon .dg-drift{transform-box:fill-box;transform-origin:0 50%;animation:vt-drift 6s ease-in-out infinite}
  .vt-door .vt-dial{transform-box:fill-box;transform-origin:center;animation:vt-turn 9s ease-in-out infinite}
}

@media (max-width:760px){
  .vt-head{height:55px;padding:0 16px}.vt-name{font-size:20px}.vt-mark{width:28px;height:28px}
  .vt-who{max-width:120px}
  .vt-wrap{padding:16px}
  .vt-doorway{padding-top:84px}.vt-card{padding:24px 18px 20px}.vt-dragon.vt-peek{width:180px;top:-53px}
  .vt-band{padding:14px 16px}.vt-dragon.vt-side{width:96px}
  .vt-grid{grid-template-columns:1fr}
  .vt-actions .vt-btn{flex:1 1 auto}
  .vt-tbox{max-height:none;border:0;background:transparent;overflow:visible}
  .vt-t thead{display:none}
  .vt-t,.vt-t tbody,.vt-t tr,.vt-t td{display:block;width:100%}
  .vt-t tr{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:6px 0}
  .vt-t td{border:0;padding:4px 14px;display:flex;gap:10px;justify-content:space-between;text-align:right}
  .vt-t td::before{content:attr(data-l);color:var(--mu);font-weight:600;text-align:left;flex:none}
  .vt-t td.vt-first{display:block;text-align:left;min-width:0}.vt-t td.vt-first::before{display:none}
  .vt-t td.vt-acts{justify-content:flex-start;flex-wrap:wrap;gap:8px;padding-top:8px}
  .vt-t td.vt-acts::before{display:none}.vt-t td.vt-acts .vt-btn{margin:0;flex:1 1 auto}
  .vt-t tr.vt-new{border-color:var(--gold);border-left:4px solid var(--gold)}
  .vt-t tr.vt-new td{background:transparent}
}

/* ===== 2. the staff pages (inside the CMC frame) ===== */
.vt-crumb a{color:var(--gold-ink)}
.vt-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.vt-tabs a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--line);border-radius:8px;text-decoration:none;
  color:var(--ink);background:var(--card)}
.vt-tabs a[aria-current="page"]{border-color:var(--gold);background:var(--gold-bg);font-weight:600;color:var(--gold-ink)}
.vt-note{background:var(--gold-bg);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;padding:10px 14px;margin:0 0 16px}
.vt-table td.vt-first{min-width:220px}
.vt-table tr.vt-new td{background:var(--gold-bg)}
.vt-table td.vt-acts{white-space:nowrap;text-align:right}
.vt-table td.vt-acts .btn,.vt-inline{margin:2px 0 2px 6px}
.vt-inline{display:inline-block;vertical-align:middle}
.vt-nowrap{white-space:nowrap}
.vt-table .vt-ext{display:inline-block;min-width:44px;text-align:center;border:1px solid var(--gold);color:var(--gold-ink);border-radius:4px;font-size:15px;font-weight:700;padding:0 4px}
.vt-file{display:grid;row-gap:6px;margin:0 0 14px}
.vt-file .vt-drop{min-height:96px}
form.f .vt-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;max-width:900px}
form.f .fgrid.vt-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,320px));column-gap:16px}
.vt-check{display:flex;align-items:center;gap:10px;min-height:44px;margin:8px 0 0}
.vt-check input{width:22px;height:22px;flex:none}
.vt-archive{margin-top:16px}
.vt-dash-a,a.vault-dash-a{font-weight:600}
@media (max-width:1100px){form.f .vt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vt-table td.vt-acts{white-space:normal}}
@media (max-width:540px){form.f .vt-grid,form.f .fgrid.vt-grid2{grid-template-columns:1fr}}
form.f label.vt-file{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;align-items:start}
form.f label.vt-file .vt-drop{max-width:560px}
@media (max-width:760px){
  .vt-table{max-height:none;border:0;background:transparent;overflow:visible}
  .vt-table thead{display:none}
  .vt-table table,.vt-table tbody,.vt-table tr,.vt-table td{display:block;width:100%;min-width:0}
  .vt-table tr{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:6px 0}
  .vt-table td{border:0;padding:4px 14px;display:flex;gap:10px;justify-content:space-between;text-align:right}
  .vt-table td::before{content:attr(data-l);color:var(--mu);font-weight:600;text-align:left;flex:none}
  .vt-table td.vt-first{display:block;text-align:left;min-width:0}.vt-table td.vt-first::before{display:none}
  .vt-table td.vt-acts{justify-content:flex-start;flex-wrap:wrap;gap:8px;text-align:left;white-space:normal}.vt-table td.vt-acts::before{display:none}
  .vt-table td.vt-acts .btn,.vt-table td.vt-acts .vt-inline{margin:0}
  .vt-table tr.vt-new{border-left:4px solid var(--gold)}.vt-table tr.vt-new td{background:transparent}
}
.vt-table .pill{white-space:nowrap}
.vt-table td[data-l="Status"]{white-space:nowrap}
.vt-table details.vt-inline{display:inline-block;position:relative}
.vt-soon{color:var(--warn);font-weight:600}
.vt-foot a,.vt-foot .vt-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.vt-acts-in{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.vt-acts-in .vt-inline,.vt-acts-in .btn{margin:0}
.vt-form{margin-top:24px}
.vt-how{margin:0 0 12px;padding-left:22px;line-height:1.6}           /* 1.1.0: Vault sign-ins: how to give a person the Vault in Delta HQ */
.vt-how li{margin:0 0 6px}
.vt-how a{display:inline-block;padding:12px 0;margin:-12px 0}          /* 44 px to tap, the lines stay even */
.vt-form-h{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:600;margin:0 0 12px;text-transform:none;letter-spacing:0}
.vt-table td,.vt-table th{vertical-align:middle}
@media (max-width:760px){.vt-acts-in{justify-content:flex-start}.vt-table td.num{text-align:right}}
.vt-t td[data-l="Customer"]{white-space:nowrap}
.tablewrap.vt-table.vt-short{max-height:none;overflow:visible}
.tablewrap.vt-table.vt-short th{position:static}
.vt-t .vt-first .vt-pill.new{margin-left:4px}
@media (min-width:1201px){.vt-acts-in .btn{white-space:nowrap}}