/* lieslese — library UI on top of weltsein.css tokens */

@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');


/*gradients - 62% is golden rat - based on JTB style guide form ben */
:root { /*Pushka.com CSS*/
--grey-gradient: linear-gradient(90deg, #323232 0%, #787878 62%, #B7B7B7 100%);
--grey-flat-gradient-dark: linear-gradient(90deg, #323232 0%, #606060 62%, #6D6D6D 100%);
--grey-flat-gradient: linear-gradient(90deg, #787878 0%, #8D8D8D 62%, #B7B7B7 100%);
--grey-gradient-transp: linear-gradient(90deg, #323232aa 0%, #787878aa 62%, #B7B7B7aa 100%);
--silver-gradient: linear-gradient(90deg, #A9A9A9 0%, #CBCBCB 62%, #D2D2D2 100%);
--light-silver-gradient: linear-gradient(90deg, #CBCBCB 0%, #E5E5E5 62%, #EFEFEF 100%);
--light-silver-flat-gradient: linear-gradient(90deg, #E5E5E5 0%, #E8E8E8 62%, #EFEFEF 100%);
--light-silver-flat-gradient-lighter: linear-gradient(90deg, #E5E5E5 0%, #E8E8E8 62%, #EFEFEF33 100%);
--brown-gradient: linear-gradient(90deg, #6e2814 0%, #a04614 62%, #dc8200 100%);
--pushka-gradient:    linear-gradient(90deg, #FFC107 0%, #FF9800 62%, #FF5722 100%) ; 
--pushka-gradient-hover:   linear-gradient(90deg, #D7CCC8 0%, #FFA726 62%, #FF5722 100%) ; 
--url-hover-gradient:   linear-gradient(90deg, #bd2c00 0%, #EF6C00 62%, #FFC107 100%) ; 

--green-gradient: linear-gradient(90deg, #284632 0%, #197d46 65%, #81AF07 100%);
--green-gradient-baseball: linear-gradient(90deg, #123631 0%, #197d46 65%, #81AF07 100%);
--green-gradient-transp: linear-gradient(90deg, #284632aa 0%, #197d46aa 65%, #81AF07aa 100%);
--light-green-gradient: linear-gradient(90deg, #5a6446 0%, #8cbe1e 65%, #dcdc00 100%); 
--light-bright-green-gradient: linear-gradient(90deg, #0c9c1d 0%, #8cbe1e 65%, #dcdc00 100%);
--green-flat-gradient: linear-gradient(90deg, #197d46 0%, #3C8E31 65%, #81AF07 100%);
--small-green-gradient: linear-gradient(90deg, #197d46 0%,  #81AF07 100%);
--pink-gradient: linear-gradient(90deg, #D21E32 0%, #DC6464 65%, #E38A89 100%);
--pink-flat-gradient: linear-gradient(90deg, #D21E32 0%, #D94D53 65%, #DC6464 100%);
--yellow-gradient: linear-gradient(90deg, #FF6400 0%, #FFA500 60%, #FFC100 100%);
--blue-gradient: linear-gradient(90deg, #001C7B 0%, #005AC8 60%, #009FDF 100%);
--blue-gradient-transp: linear-gradient(90deg, #001C7Baa 0%, #005AC8aa 60%, #009FDFaa 100%);
--blue-flat-gradient: linear-gradient(90deg, #005AC8 0%, #0071D0 60%, #0090DA 100%);
--blue-flat-gradient-lighter: linear-gradient(90deg, #005AC8 0%, #0071D0 60%, #0090DA99 100%);
--teal-gradient: linear-gradient(90deg, #005064 0%, #0082a0 60%, #36C1CD 100%);
--teal-flat-gradient: linear-gradient(90deg, #0082a0 0%, #0C90AA 60%, #2AB3C3 100%);
--silver-gradient: linear-gradient(90deg, #A9A9A9 0%, #CBCBCB 65%, #E5E5E5 100%);
--orange-gradient: linear-gradient(90deg, #cc0000 0%, #eb5514 60%, #FBA504 100%);
--orange-gradient-transp: linear-gradient(90deg, #da3306dd 0%, #eb6514aa 60%, #FBA50433 100%);
--yellow-gradient: linear-gradient(90deg, #ff6400 0%, #ffa500 60%, #FFB800 100%);
--yellow-gradient-reverse: linear-gradient(90deg, #FFB800 0%, #ffa500 60%, #ff6400 100%);
--light-silver-gradient: linear-gradient(90deg, #CBCBCB 0%, #E5E5E5 65%, #EFEFEF 100%);
--light-silver-flat-gradient: linear-gradient(90deg, #E5E5E5 0%, #E8E8E8 65%, #EFEFEF 100%);
--light-silver-flat-gradient-lighter: linear-gradient(90deg, #E5E5E5 0%, #E8E8E8 65%, #EFEFEF33 100%);
--green-brown-gradient: linear-gradient(90deg, #644600 0%, #8c6400 65%, #d2a000 100%);
--orange-gradient-40: linear-gradient(90deg, #cc0000dd 0%, #eb5514aa 60%, #FBA504cc 100%);
--blue-gradient-40: linear-gradient(90deg, #001C7Bdd 0%, #005AC8aa 60%, #009FDFcc 100%);
--purple-gradient: linear-gradient(90deg, #462864 0%, #7832a0 65%, #c878be 100%);
/*darken the lightest colour https://meyerweb.com/eric/tools/color-blend/
old --url-hover-gradient: linear-gradient(90deg, #2196F3 0%, #1E59D3 62%, #29B6F6 100%); 
*/

  --ghd-bg-gradient: linear-gradient(90deg, #2A1200 0%, #4e2203 65%, #813905 100%);
    
  /* Australian Tartan: Original Stripe Layout + Dark Open Field Squares */
  --ghd-aus-tartan:  
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3C!-- Large Diagonal Stitch Pattern --%3E%3Cpattern id='stitch' width='8' height='8' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cline x1='0' y1='0' x2='0' y2='8' stroke='%23FFF' stroke-width='2' stroke-dasharray='3,3' stroke-opacity='0.25'/%3E%3C/pattern%3E%3C/defs%3E%3C!-- Background Stitch Overlay --%3E%3Crect width='240' height='240' fill='url(%23stitch)'/%3E%3Cg fill-opacity='0.28'%3E%3C!-- VERTICAL STRIPE CLUSTER --%3E%3C!-- Extended Under-band (Adjusted to 80% expansion level) --%3E%3Crect fill='%23FFF' x='36' y='0' width='168' height='240' fill-opacity='0.15'/%3E%3C!-- Outer Double Guard Stripes --%3E%3Crect fill='%23FFF' x='72' y='0' width='3' height='240'/%3E%3Crect fill='%23FFF' x='78' y='0' width='3' height='240'/%3E%3C!-- Yellow Accent Line --%3E%3Crect fill='%23FFF' x='86' y='0' width='4' height='240' fill-opacity='0.45'/%3E%3C!-- Inner Guard Stripes --%3E%3Crect fill='%23000' x='94' y='0' width='3' height='240'/%3E%3Crect fill='%23FFF' x='100' y='0' width='3' height='240'/%3E%3C!-- SEPARATED INNER TWIN RED STRIPES --%3E%3Crect fill='%23FFF' x='110' y='0' width='4' height='240' fill-opacity='0.6'/%3E%3Crect fill='%23FFF' x='126' y='0' width='4' height='240' fill-opacity='0.6'/%3E%3C!-- Inner Guard Stripes (Right) --%3E%3Crect fill='%23FFF' x='137' y='0' width='3' height='240'/%3E%3Crect fill='%23000' x='143' y='0' width='3' height='240'/%3E%3C!-- Yellow Accent Line (Right) --%3E%3Crect fill='%23FFF' x='150' y='0' width='4' height='240' fill-opacity='0.45'/%3E%3C!-- Outer Double Guard Stripes (Right) --%3E%3Crect fill='%23FFF' x='159' y='0' width='3' height='240'/%3E%3Crect fill='%23FFF' x='165' y='0' width='3' height='240'/%3E%3C!-- HORIZONTAL STRIPE CLUSTER --%3E%3C!-- Extended Under-band (Adjusted to 80% expansion level) --%3E%3Crect fill='%23FFF' x='0' y='36' width='240' height='168' fill-opacity='0.15'/%3E%3C!-- Outer Double Guard Stripes --%3E%3Crect fill='%23FFF' x='0' y='72' width='240' height='3'/%3E%3Crect fill='%23FFF' x='0' y='78' width='240' height='3'/%3E%3C!-- Yellow Accent Line --%3E%3Crect fill='%23FFF' x='0' y='86' width='240' height='4' fill-opacity='0.45'/%3E%3C!-- Inner Guard Stripes --%3E%3Crect fill='%23000' x='0' y='94' width='240' height='3'/%3E%3Crect fill='%23FFF' x='0' y='100' width='240' height='3'/%3E%3C!-- SEPARATED INNER TWIN RED STRIPES --%3E%3Crect fill='%23FFF' x='0' y='110' width='240' height='4' fill-opacity='0.6'/%3E%3Crect fill='%23FFF' x='0' y='126' width='240' height='4' fill-opacity='0.6'/%3E%3C!-- Inner Guard Stripes (Bottom) --%3E%3Crect fill='%23FFF' x='0' y='137' width='240' height='3'/%3E%3Crect fill='%23000' x='0' y='143' width='240' height='3'/%3E%3C!-- Yellow Accent Line (Bottom) --%3E%3Crect fill='%23FFF' x='0' y='150' width='240' height='4' fill-opacity='0.45'/%3E%3C!-- Outer Double Guard Stripes (Bottom) --%3E%3Crect fill='%23FFF' x='0' y='159' width='240' height='3'/%3E%3Crect fill='%23FFF' x='0' y='165' width='240' height='3'/%3E%3C/g%3E%3C/svg%3E");

} /*end root::*/



html body  

{
  /* Layer 1: Tartan Vector | Layer 2: Linear Gradient */
  background-image: var(--ghd-aus-tartan), var(--ghd-bg-gradient) !important;
  
  /* Infinite seamless tiling */
  background-repeat: repeat, no-repeat !important ; 
  
      /* CHANGE THIS NUMBER TO RESIZE THE TARTAN */
  background-size: 222px 222px, cover  !important ; 
    
  /* Softly weaves the stripes into the underlying brown colors */
  background-blend-mode: overlay !important ;
  
  min-height: 100vh;
  margin: 0;
    
    background-color: #463930 !important;
}


textarea, html body textarea,html body,html,html body p,html body span,input,div, html body div,  html body   span,  html body   applet,  html body   object,  html body   iframe,  html body   h1,  html body   h2,  html body   h3,  html body   h4,  html body   h5,  html body   h6,  html body   p,  html body   blockquote,  html body   pre,  html body   a,  html body   abbr,  html body   acronym,  html body   address,  html body   big,  html body   cite,  html body   code,  html body   del,  html body   dfn,  html body   em,  html body   img,  html body   ins,  html body   kbd,  html body   q,  html body   s,  html body   samp,  html body   small,  html body   strike,  html body   strong,  html body   sub,  html body   sup,  html body   tt,  html body   var,  html body   b,  html body   u,  html body   i,  html body   center,  html body   dl,  html body   dt,  html body   dd,  html body   ol,  html body   ul,  html body   li,  html body   fieldset,  html body   form,  html body   label,  html body   legend,  html body   table,  html body   caption,  html body   tbody,  html body   tfoot,  html body   thead,  html body   tr,  html body   th,  html body   td,  html body   article,  html body   aside,  html body   canvas,  html body   details,  html body   embed,  html body   figure,  html body   figcaption,  html body   footer,  html body   header,  html body   hgroup,  html body   menu,  html body   nav,  html body   output,  html body   ruby,  html body   section,  html body   summary,  html body   time,  html body   mark,  html body   audio,  html body   video, html #readability-page-1

.pt-mono-regular {
  font-family: "PT Mono", "Aptos Mono" , monospace  !important ; 
}



 
html main { 
  max-width: 90%; 
}html .hero p {
  max-width: 80%;
}

html a{
  color: #965707; 
}html a:hover{
  color: #ec5d17; 
}

#theme-toggle{display:none;} 

html  .modal { 
  background: rgba(255, 211, 179, 0.44); 
}
 
html .btn-primary {
  background: #8b5b00;
  border-color: #d73b3b;
  color: #fff;
}



a:hover img {
  filter: saturate(2)hue-rotate(190deg);
}
.btn-primary:hover {
  background: #ec5d17  !important ;
  border-color: #f25d5d  !important ;
  color: #fff;
}

.muted { color: var(--text-muted); }
.small { font-size: 0.82rem; }
.mt { margin-top: 1.4rem; }
main { padding-bottom: 4rem; }



.btn { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
  padding: 0.45rem 0.8rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-sm { font-size: 0.72rem; padding: 0.3rem 0.6rem; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-light); border-color: var(--brand-light); color: #fff; }
.btn-danger:hover { border-color: #b3453a; color: #b3453a; }

.header-controls { display: flex; gap: 0.4rem; align-items: center; }
.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 4px; width: 34px; height: 34px;
  cursor: pointer; color: var(--text); font-size: 1rem; }
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }

/* hero */
.hero { text-align: center; padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.hero h1 { font-family: 'JetBrains Mono', monospace; margin: 0 0 0.6rem; }
.hero p { max-width: 42ch; margin: 0 auto 1.4rem; }
.open-actions { display: flex; justify-content: center; gap: 0.6rem; }

.lib-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.filter-bar { display: flex; gap: 0.4rem; }
.filter-bar input[type=search], .filter-bar select, #custom-css, .form-group input, .form-group textarea, textarea {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg);
  color: var(--text); font-family: inherit; font-size: 0.9rem; }
.filter-bar input[type=search] { min-width: 220px; }

/* book grid */
.book-grid { display: grid; gap: 1.6rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.book-cell { display: flex; flex-direction: column; }
.book-cover-link { position: relative; display: block; aspect-ratio: 2/3; background: var(--bg-secondary);
  border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.book-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.progress-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,0.15); }
.progress-bar > span { display: block; height: 100%; background: var(--brand); }
.book-title-btn { text-align: left; background: none; border: none; padding: 0; margin-top: 0.5rem; cursor: pointer;
  font-size: 0.82rem; color: var(--text); line-height: 1.25; font-family: inherit;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-title-btn:hover { color: var(--brand); }
.book-author { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }
.empty { text-align: center; padding: 3rem 1rem; }

/* drag & drop hint */
.drop-hint { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 12%, var(--bg)); border: 3px dashed var(--brand);
  font-family: 'JetBrains Mono', monospace; color: var(--brand); font-size: 1.2rem; }
.drop-hint.show { display: flex; }

/* modals */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.45); display: flex;
  align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1.6rem;
  max-width: 640px; width: 100%; }
.modal-card h2 { margin-top: 0; }
.modal-close { margin-top: 1.4rem; }

/* detail */
.detail-head { display: flex; gap: 1.4rem; }
.detail-cover { width: 130px; border-radius: 4px; border: 1px solid var(--border); align-self: flex-start; }
.detail-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.editor-tools { display: flex; gap: 0.6rem; align-items: center; margin: 0.8rem 0; }
.form-group { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0; }
.form-group label { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }
.form-group input { width: 100%; }
.form-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.form-row .form-group { flex: 1; }

.notebook-head { display: flex; justify-content: space-between; align-items: baseline; }
.export-links { font-size: 0.78rem; display: flex; gap: 0.6rem; }
.anno-list { list-style: none; padding: 0; margin: 1rem 0; }
.anno-item { border-left: 3px solid var(--anno-color, var(--border)); padding: 0.3rem 0 0.3rem 0.9rem; margin-bottom: 0.9rem; }
.anno-quote { font-style: italic; }
.anno-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.3rem; }

/* settings */
.theme-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.theme-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); }
.swatch-weltsein { background: #4a7a3f; } .swatch-weltsein-blau { background: #3f6a7a; }
#custom-css { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; }

/* toast */
#toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(2rem);
  background: var(--text); color: var(--bg); padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem;
  opacity: 0; pointer-events: none; transition: 0.2s; z-index: 70; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.site-footer { text-align: center; }
.site-footer a { color: var(--brand); }

@media (max-width: 600px) {
  .filter-bar input[type=search] { min-width: 130px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .detail-head { flex-direction: column; }
}