/* ============================================================
   The Visibility Asset Library — shared styles
   On-brand template system: guided structure + brand-voice
   examples + fillable fields. Matches the course worksheets.
   ============================================================ */
:root{
  --white:#FFFFFF;--soft:#F7F7F4;--offwhite:#E5E6E1;--charcoal:#282A2C;
  --terra:#B15F2D;--terra-deep:#9D5226;--sand:#DB9E6D;--blush:#ECC8BD;
  --eucalyptus:#A9B5A4;--oat:#E8DCC9;--ink-60:#6E706B;--ink-40:#8A8C87;
  --hair:#E9EAE5;--hair-2:#CFD0CB;--on-dark-soft:#B9BBB5;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--soft);color:var(--charcoal);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.6;}

/* ---------- top brand bar ---------- */
.vl-nav{display:flex;align-items:center;gap:10px;padding:20px 6vw;background:var(--white);border-bottom:0.5px solid var(--hair);}
.vl-nav .mark{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--charcoal);}
.vl-nav .back{margin-left:auto;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-40);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px;transition:color .16s ease,border-color .16s ease;}
.vl-nav .back:hover{color:var(--terra);border-color:var(--terra);}

/* ---------- asset wrapper ---------- */
.asset{max-width:820px;margin:0 auto;padding:64px 6vw 140px;}
.asset-head{margin-bottom:54px;}
.eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--ink-40);margin-bottom:18px;}
.eyebrow.terra{color:var(--terra);}
.asset-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.4vw,60px);line-height:1.05;}
.asset-head .purpose{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.1vw,23px);color:var(--ink-60);margin-top:18px;line-height:1.5;max-width:60ch;}
.howto{background:var(--offwhite);border-left:3px solid var(--sand);padding:18px 22px;margin-top:30px;border-radius:0 2px 2px 0;}
.howto .arc{display:inline-block;vertical-align:-1px;margin-right:10px;}
.howto p{font-size:14.5px;color:var(--ink-60);line-height:1.6;max-width:64ch;}
.howto strong{font-weight:500;color:var(--charcoal);}

/* ---------- a build block ---------- */
.block{padding:34px 0;border-top:0.5px solid var(--hair);}
.block:first-of-type{border-top:none;}
.block-top{display:flex;align-items:baseline;gap:18px;margin-bottom:6px;}
.block-no{font-family:var(--serif);font-size:30px;color:var(--sand);line-height:1;}
.block h2{font-family:var(--serif);font-weight:300;font-size:27px;line-height:1.1;}
.block .opt{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-40);border:0.5px solid var(--hair);border-radius:2px;padding:3px 8px;margin-left:auto;}
.guide{font-size:15px;color:var(--ink-60);line-height:1.65;margin:10px 0 0 48px;max-width:62ch;}
.guide.nopad{margin-left:0;}

.example{margin:18px 0 0 48px;background:var(--white);border:0.5px solid var(--hair);border-radius:2px;padding:18px 20px;position:relative;}
.example .ex-label{display:inline-block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--sand);margin-bottom:9px;}
.example .ex-body{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--charcoal);}
.example .ex-body em{font-style:italic;}
.example.copy .ex-body{font-style:italic;color:var(--ink-60);}

.field{margin:18px 0 0 48px;}
.field-label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-40);margin-bottom:9px;}
.fill{border:0.5px solid var(--hair-2);border-radius:2px;background:var(--white);padding:14px 16px;font-family:var(--sans);font-weight:300;font-size:0.98rem;line-height:1.6;color:var(--charcoal);outline:none;cursor:text;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;height:auto;min-height:3rem;transition:border-color .14s ease,box-shadow .14s ease;}
.fill.lines{min-height:5.5rem;}
.fill.short{min-height:3rem;}
.fill:focus{border-color:var(--terra);box-shadow:inset 0 0 0 1px rgba(177,95,45,.18);}
.fill:empty:before{content:attr(data-ph);color:var(--ink-40);font-style:italic;font-family:var(--serif);font-size:1.05rem;}

@media(max-width:640px){.guide,.example,.field{margin-left:0;}}

/* ---------- the pattern unblocker ---------- */
.unblock{margin-top:30px;background:var(--white);border:0.5px solid var(--hair);border-left:3px solid var(--sand);border-radius:0 2px 2px 0;padding:22px 26px;}
.unblock .ub-label{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--charcoal);margin-bottom:11px;}
.unblock .ub-label svg{color:var(--sand);flex:none;}
.unblock p{font-size:15px;color:var(--ink-60);line-height:1.62;max-width:64ch;}
.unblock p strong{color:var(--charcoal);font-weight:500;}

/* ---------- AI prompt pack ---------- */
.prompt-pack{margin-top:56px;background:var(--charcoal);border-radius:3px;padding:40px 42px 46px;color:var(--offwhite);}
.prompt-pack .pp-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.prompt-pack .pp-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--sand);}
.prompt-pack h2{font-family:var(--serif);font-weight:300;font-size:30px;color:var(--offwhite);line-height:1.1;}
.prompt-pack .pp-intro{font-size:14.5px;color:var(--on-dark-soft);line-height:1.62;max-width:62ch;margin-top:10px;}
.prompt-pack .pp-intro .ph{color:var(--sand);}
.prompt{position:relative;background:rgba(255,255,255,.045);border:0.5px solid rgba(229,230,225,.16);border-radius:2px;padding:20px 22px 22px;margin-top:22px;}
.prompt .pr-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sand);margin-bottom:13px;padding-right:74px;}
.prompt .pr-body{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13.5px;line-height:1.7;color:#dfe0db;white-space:pre-wrap;word-break:break-word;}
.prompt .pr-body .ph{color:var(--sand);}
.copy-btn{position:absolute;top:16px;right:16px;font-family:var(--sans);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;background:var(--terra);color:#fff;border:none;border-radius:2px;padding:7px 12px;cursor:pointer;transition:background .15s ease;}
.copy-btn:hover{background:var(--terra-deep);}
.copy-btn.done{background:#1F8A5B;}

/* ---------- save / print bar ---------- */
.vl-bar{position:fixed;right:20px;bottom:20px;z-index:500;display:flex;gap:10px;align-items:center;background:#fff;border:0.5px solid var(--hair);padding:9px 11px 9px 14px;font-family:var(--sans);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;box-shadow:0 2px 10px rgba(40,42,44,.10);}
.vl-bar .dot{width:7px;height:7px;border-radius:50%;background:#1F8A5B;flex:none;}
.vl-bar .saved{color:var(--ink-60);}
.vl-bar button{font-family:var(--sans);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border:none;background:var(--charcoal);color:#fff;padding:8px 13px;cursor:pointer;}
.vl-bar button:hover{background:var(--terra-deep);}
.vl-bar button.ghost{background:transparent;color:var(--charcoal);border:0.5px solid var(--hair-2);}
.vl-bar button.ghost:hover{background:var(--soft);color:var(--charcoal);}

@media print{
  .vl-nav,.vl-bar{display:none!important;}
  body{background:#fff;}
  .asset{max-width:none;padding:0 0 20px;}
  .fill{border:none;border-bottom:1px solid #bdbdbd;border-radius:0;padding:6px 0;}
  .fill:focus{box-shadow:none;}
  .fill:empty:before{content:'';}
  .example{break-inside:avoid;}
  .block{break-inside:avoid;border-top:0.5px solid #ddd;}
  .unblock{break-inside:avoid;background:#fff;}
  .prompt-pack{background:#fff!important;color:#282A2C!important;border:1px solid #282A2C;break-inside:avoid;}
  .prompt-pack h2,.prompt-pack .pp-intro{color:#282A2C!important;}
  .prompt{background:#f7f7f4!important;border:0.5px solid #ddd;}
  .prompt .pr-body{color:#282A2C!important;}
  .copy-btn{display:none!important;}
}