/*



  style.css ? WhiskyWaters.win

  ===========================



  IMPORTANT (KEEP THIS CONFIG):



  - Bullets/punctuation becoming "?" is almost always CHARSET/ENCODING, not CSS.

  - Do NOT "fix" bullets by hardcoding "?" into HTML.

  - Use real lists (<ul><li>) and style them to match the site's small monospace panel text.

  - This file intentionally defines panel text rules for BOTH <p> and <ul>/<ol> so

    future edits don't accidentally revert to browser-default huge list text.



  SALES NOTE:

  - Sales styles MUST exist only once. Do not duplicate .saleitem/.saletitle/etc.

    Duplicates cause "weird" layouts due to CSS override order.



*/



:root{

  --paper:  #efe7d2;

  --paper2: #f6f1e3;

  --paper3: #e7dcc2;



  --ink:   #151515;

  --muted: #4a4a4a;



  --accent:  #6b3fa0; /* purple dot */

  --accent2: #0b7a6e; /* teal utility */



  --shadow: rgba(0,0,0,.25);

  --bevelLight: rgba(255,255,255,.65);

  --bevelDark:  rgba(0,0,0,.18);



  --link:      #2a4db7;

  --linkHover: #b03060;



  --radius: 4px;



  /* Keep these consistent: the ?original size? of sidebar/body panel text */

  --panelFont: "Courier New", monospace;

  --panelSize: 12px;

  --panelLine: 1.45;

}



*{ box-sizing: border-box; }

html, body{ height: 100%; }



body{

  margin: 0;

  color: var(--ink);

  background: var(--paper2);

  font-family: Georgia, "Times New Roman", serif;

  overflow-x: hidden;

}



/* Subtle paper noise + faint dot grid */

body::before{

  content:"";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: -2;

  background: radial-gradient(circle at 1px 1px, rgba(0,0,0,.06) 1px, transparent 1px);

  background-size: 34px 34px;

  opacity: .28;

}

body::after{

  content:"";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: -1;

  background:

    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 30%),

    repeating-linear-gradient(

      90deg,

      rgba(0,0,0,.012),

      rgba(0,0,0,.012) 1px,

      transparent 1px,

      transparent 9px

    );

  opacity: .22;

  mix-blend-mode: multiply;

}



.page{

  width: min(980px, 94vw);

  margin: 32px auto 70px;

}



.frame{

  background: linear-gradient(180deg, var(--paper), var(--paper3));

  border: 1px solid rgba(0,0,0,.55);

  box-shadow: 0 18px 50px var(--shadow);

  border-radius: var(--radius);

  overflow: hidden;

}



header{

  padding: 14px 16px 10px;

  border-bottom: 1px solid rgba(0,0,0,.35);

  background: rgba(255,255,255,.35);

}



.topbar{

  display: flex;

  gap: 14px;

  align-items: flex-start;

  justify-content: space-between;

  flex-wrap: wrap;

}



.brand{

  display: flex;

  gap: 12px;

  align-items: flex-start;

  min-width: 0;

  flex: 1 1 520px;

}



.badge{

  width: 56px;

  height: 56px;

  flex: 0 0 auto;

  background: rgba(255,255,255,.55);

  border: 1px solid rgba(0,0,0,.45);

  box-shadow:

    inset 1px 1px 0 var(--bevelLight),

    inset -1px -1px 0 var(--bevelDark);

  display: grid;

  place-items: center;

  border-radius: 3px;

  overflow: hidden;

}

.badge img{

  width: 56px;

  height: 56px;

  object-fit: cover;

  image-rendering: pixelated;

  image-rendering: crisp-edges;

}



.brandtext{ min-width: 0; }



.brandtext h1{

  margin: 0;

  font-size: clamp(34px, 5vw, 62px);

  line-height: .9;

  letter-spacing: .6px;

  white-space: normal;



  /* Keep title safe on small screens (long brand text) */

  overflow-wrap: anywhere;

}

.brandtext .dot{

  color: var(--accent);

  text-shadow: 0 1px 0 rgba(255,255,255,.6);

}

.brandtext p{

  margin: 6px 0 0;

  color: var(--muted);

  font-family: var(--panelFont);

  font-size: var(--panelSize);

}



nav{

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 8px;

  flex: 1 1 420px;

  padding-top: 6px;

}



nav a{

  text-decoration: none;

  color: var(--ink);

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  padding: 5px 10px;

  border: 1px solid rgba(0,0,0,.45);

  background: rgba(255,255,255,.55);

  box-shadow:

    inset 1px 1px 0 rgba(255,255,255,.75),

    inset -1px -1px 0 rgba(0,0,0,.15);

  border-radius: 2px;

  white-space: nowrap;

}

nav a:hover{

  background: rgba(255,255,255,.85);

  border-color: rgba(0,0,0,.65);

}

nav a.active{

  background: rgba(255,255,255,.92);

  border-color: rgba(0,0,0,.75);

  position: relative;

}

nav a.active::after{

  content:"";

  position: absolute;

  left: 8px;

  right: 8px;

  bottom: 3px;

  height: 1px;

  background: rgba(107,63,160,.55);

}



@media (max-width: 980px){

  nav{ flex-basis: 100%; justify-content: flex-start; }

}



.sysstrip{

  margin-top: 10px;

  padding: 8px 10px;

  border: 1px dashed rgba(0,0,0,.45);

  background: rgba(255,255,255,.35);

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  color: var(--muted);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  flex-wrap: wrap;

  border-radius: 2px;

}

.sysstrip strong{ color: var(--ink); font-weight: 700; }



main{ padding: 16px; }



.grid{

  display: grid;

  grid-template-columns: 1.25fr .75fr;

  gap: 14px;

}

@media (max-width: 860px){

  .grid{ grid-template-columns: 1fr; }

}



.panel{

  border: 1px solid rgba(0,0,0,.45);

  background: rgba(255,255,255,.45);

  box-shadow:

    inset 1px 1px 0 rgba(255,255,255,.7),

    inset -1px -1px 0 rgba(0,0,0,.12);

  border-radius: var(--radius);

  padding: 12px;

}



.panel h2, .panel h3{

  margin: 0 0 8px;

  letter-spacing: .2px;

}

.panel h2{ font-size: 22px; }

.panel h3{

  font-size: 16px;

  font-family: var(--panelFont);

  font-weight: 700;

}



/* Panel text defaults ? KEEP THIS:

   This ensures <p> and <ul>/<ol> match the original small monospace sizing. */

.panel p{

  margin: 0 0 10px;

  color: var(--muted);

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  line-height: var(--panelLine);

}



/* CRITICAL: lists must be styled too, otherwise browser defaults = huge text */

.panel ul,

.panel ol{

  margin: 0 0 10px;

  padding-left: 18px;

  color: var(--muted);

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  line-height: var(--panelLine);

}

.panel li{ margin: 2px 0; }



/* Directory list (real bullets, same size as panel text) */

.dirlist{

  /*

    KEEP THIS:

    - real list markup = real bullets

    - if bullets become "?", investigate charset/encoding

  */

  margin: 6px 0 0;

  padding-left: 18px;

  list-style: disc;

}



/* Keep list links consistent */

.panel ul a,

.panel ol a{

  font-size: inherit;

  font-family: inherit;

}



.hr{

  height: 1px;

  background: rgba(0,0,0,.25);

  margin: 12px 0;

}



a.inline{

  color: var(--link);

  text-decoration: underline;

}

a.inline:hover{ color: var(--linkHover); }



.pillrow{

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 8px;

}

.pill{

  font-family: var(--panelFont);

  font-size: 11px;

  color: rgba(0,0,0,.7);

  border: 1px dashed rgba(0,0,0,.35);

  padding: 4px 8px;

  border-radius: 999px;

  background: rgba(255,255,255,.4);

  white-space: nowrap;

}



.btn{

  display: inline-block;

  text-decoration: none;

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  padding: 6px 10px;

  border: 1px solid rgba(0,0,0,.45);

  background: rgba(255,255,255,.65);

  color: var(--ink);

  border-radius: 2px;

  box-shadow:

    inset 1px 1px 0 rgba(255,255,255,.75),

    inset -1px -1px 0 rgba(0,0,0,.12);

}

.btn:hover{

  background: rgba(255,255,255,.9);

  border-color: rgba(0,0,0,.65);

}



/* Footer */

footer{

  padding: 12px 16px;

  border-top: 1px solid rgba(0,0,0,.35);

  background: rgba(255,255,255,.25);

  color: var(--muted);

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 8px;

}



/* Collapsible (used on projects/sales pages too) */

.project-details{

  margin-top: 8px;

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  color: var(--muted);

}

.project-details summary{

  cursor: pointer;

  color: var(--ink);

  margin-bottom: 6px;

}



pre.cmd{

  margin: 8px 0;

  padding: 10px 12px;

  border: 1px dashed rgba(0,0,0,.35);

  background: rgba(255,255,255,.4);

  border-radius: 6px;

  overflow-x: auto;

  font-family: var(--panelFont);

  font-size: 11px;

  line-height: 1.45;

  color: rgba(0,0,0,.8);

}



code{

  font-family: var(--panelFont);

  font-size: 11px;

}



/* =========================================================

   SALES PAGE (CANONICAL) ? KEEP SINGLE SOURCE OF TRUTH

   Layout: [Image] [Title+Sub] [Price + View]

   ========================================================= */



/* If your sales page uses #listings, this will handle it. */

#listings{

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));

  gap: 12px;

  margin-top: 10px;

}



@media (max-width: 520px){

  #listings{ grid-template-columns: 1fr; }

}



/* Listing card */

.saleitem{

  display: grid;

  grid-template-columns: 140px minmax(0, 1fr) auto;

  gap: 12px;

  padding: 10px;



  border: 1px dashed rgba(0,0,0,.35);

  background: rgba(255,255,255,.35);

  border-radius: 8px;

  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6);



  align-items: start;

}



/* Image wrap (link) */

.saleimgwrap{

  display: block;

  width: 140px;

  height: 110px;

  overflow: hidden;

  border-radius: 10px;

  border: 1px solid rgba(0,0,0,.35);

  background: rgba(255,255,255,.55);

  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6);

}



.saleimgwrap--empty{

  background: repeating-linear-gradient(

    45deg,

    rgba(0,0,0,.05),

    rgba(0,0,0,.05) 6px,

    rgba(0,0,0,0) 6px,

    rgba(0,0,0,0) 12px

  );

}



.saleimg{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* Content middle */

.salecontent{ min-width: 0; }



.saletop{

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 10px;

}



/* Title: ensure NORMAL wrapping (no ?one word per line?) */

.saletitle{

  display: inline-block;

  color: var(--link);

  text-decoration: underline;

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  line-height: 1.35;



  white-space: normal;

  word-break: normal;        /* important */

  overflow-wrap: break-word; /* breaks only long tokens */

}

.saletitle:hover{ color: var(--linkHover); }



.salesub{

  margin-top: 6px;

  font-family: var(--panelFont);

  font-size: 11px;

  color: var(--muted);



  white-space: normal;

  word-break: normal;

  overflow-wrap: break-word;

}



/* Right column actions */

.saleactions{

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;

  min-width: 92px;

}



.saleprice{

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  color: rgba(0,0,0,.85);

  white-space: nowrap;



  border: 1px solid rgba(0,0,0,.35);

  background: rgba(255,255,255,.55);

  border-radius: 10px;

  padding: 4px 8px;

  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6);

}



@media (max-width: 520px){

  .saleitem{

    grid-template-columns: 140px minmax(0, 1fr);

  }

  .saleactions{

    grid-column: 1 / -1;

    flex-direction: row;

    justify-content: space-between;

    align-items: center;

    min-width: 0;

  }

}



/* Empty state */

.salesempty{

  border: 1px dashed rgba(0,0,0,.35);

  background: rgba(255,255,255,.25);

  border-radius: 8px;

  padding: 10px;

  font-family: var(--panelFont);

  font-size: var(--panelSize);

  color: var(--muted);

}



.mutedline{ margin: 0 0 10px; }



/* =========================================================

   ACTIVATE WINDOWS OVERLAY (FINAL LOCK ? DO NOT TOUCH)

   This defeats any global "white-space: pre-line" rules.

   ========================================================= */



.activate-windows,

.activate-windows *{

  white-space: normal !important;  /* kills pre-line/pre-wrap/break-spaces */

}



.activate-windows{

  position: fixed !important;

  right: 28px !important;

  bottom: 22px !important;

  z-index: 9999 !important;

  pointer-events: none !important;

  user-select: none !important;



  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;

  text-shadow: 0 1px 1px rgba(0,0,0,0.35) !important;



  margin: 0 !important;

  padding: 0 !important;

}



.activate-windows .aw1{

  display: block !important;

  margin: 0 !important;

  padding: 0 !important;

  font-size: 16px !important;

  line-height: 1.05 !important;

  color: rgba(255,255,255,0.55) !important;

}



.activate-windows .aw2{

  display: block !important;

  margin: 0 !important;

  padding: 0 !important;

  font-size: 13px !important;

  line-height: 1.05 !important;

  color: rgba(255,255,255,0.45) !important;

}