/* site.css — single clean stylesheet for jaysonlennon.dev
   No framework dependencies. Colors/palette live in colorschemes/one.css.
   Loaded via base.html <link>. terminal.css is conditionally injected. */

/* === 1. Reset === */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{min-height:100vh}
img,svg,video,canvas,audio,iframe{max-width:100%;height:auto;display:block;vertical-align:middle}
button{cursor:pointer;background:none;border:0;font:inherit;color:inherit}
input,textarea,select{font:inherit}

/* === 2. Tokens (structural only — colors in one.css) === */
:root{
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --space:1rem;
  --radius:4px;
  --transition:.2s ease-in-out;
  --container-width:73ch;
}

/* === 3. Base === */
html{font-size:100%;line-height:1.5}
@media(1024px<=width<=3072px){html{font-size:118.75%}}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--color-selection)}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* === 4. Typography === */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.125;margin-bottom:var(--space)}
h1{font-size:2rem;color:var(--color-h1,var(--color-text))}
h2{font-size:1.75rem}
h3{font-size:1.5rem}
h4{font-size:1.25rem}
h5{font-size:1.125rem}
h6{font-size:1rem}
p,dl,ol,pre,table,ul{margin-bottom:var(--space)}
figcaption,small{font-size:87.5%;color:var(--color-muted)}
hr{border:0;border-top:1px solid var(--color-muted-border);margin-bottom:calc(var(--space) + .5rem)}
ul,ol{padding-left:1.5rem}
li{margin-bottom:calc(var(--space) * .25)}
del{color:var(--color-muted)}

/* === 5. Code === */
code,kbd,pre,samp{font-family:var(--font-mono);font-size:.875em}
code,kbd,pre{background:var(--color-code-bg);color:var(--color-code-text);border-radius:var(--radius);font-weight:400}
code,kbd{display:inline-block;padding:.375rem;overflow-wrap:anywhere}
pre{padding:var(--space);overflow-x:auto}
pre code,pre kbd,pre samp{background:none;border:0;border-radius:0;color:inherit;display:block;padding:0}
pre.marmite-code{padding:0;margin-left:calc(-1 * var(--space));margin-right:calc(-1 * var(--space));border-radius:0;overflow:visible}
.marmite-code .marmite-code-inner:not(.language-mermaid){display:block;padding:1rem 0 1rem 1rem;overflow-x:auto;background:var(--color-code-bg)}
pre.marmite-code[data-lang]::before{content:attr(data-lang);display:block;font-family:var(--font-mono);font-size:.75rem;color:var(--color-code-text);background:var(--color-code-bg);text-transform:uppercase;letter-spacing:.05em;padding:.5rem 1rem;border-bottom:1px solid var(--color-bg)}

/* === 6. Tables === */
table{width:100%;border-collapse:collapse}
td,th{padding:calc(var(--space)/2) var(--space);border:1px solid var(--color-muted-border);text-align:start;vertical-align:middle}
thead td,thead th,tfoot td,tfoot th{font-weight:600}
tfoot td,tfoot th{border-top:2px solid var(--color-muted-border);border-bottom:0}

/* === 7. Blockquote === */
blockquote{background:var(--color-card-bg);border-left:4px solid var(--color-primary);margin:1rem 0;padding:.5rem 1rem;border-radius:0 var(--radius) var(--radius) 0}
blockquote>:first-child{margin-top:0}
blockquote>:last-child{margin-bottom:0}

/* === 8. Details === */
details summary{cursor:pointer;border-radius:var(--radius);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"\25B6";display:inline-block;transition:transform var(--transition);margin-left:.5rem;font-size:.7em}
details[open]>summary::after{transform:rotate(90deg)}

dd{margin:0 0 1rem 1rem}

/* === 9. Nav === */
nav ul{list-style:none;display:flex;align-items:center;gap:.5rem;margin:0;padding:0}

/* === 10. Forms === */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{display:block;width:100%;padding:.75rem 1rem;border:1px solid var(--color-muted-border);border-radius:var(--radius);background:var(--color-card-bg);color:var(--color-text)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;box-shadow:0 0 0 .125rem var(--color-primary)}
label{display:block;margin-bottom:.375rem;font-weight:600}

/* === 11. Layout === */
.container,.container-fluid{width:100%;margin-inline:auto;padding-inline:var(--space)}
.container{max-width:var(--container-width)}
@media(width>=768px){.container{max-width:700px}}
@media(1024px<=width<=3072px){.container{max-width:90ch}}
main.container{padding-inline:0}
body>footer,body>header,body>main{padding-block:var(--space)}
body>main{padding-block:revert}

/* === 12. Article card === */
article{margin-bottom:var(--space);padding:var(--space);border-radius:var(--radius);background:var(--color-card-bg)}

/* === 13. Header === */
.header-content{margin-bottom:calc(var(--space) * 1.5)}
.header-nav{display:flex;justify-content:space-between;align-items:center;position:relative;margin-top:1rem}
.header-name{list-style:none;padding:0;margin:0}
.header-name,.header-name a{color:var(--color-home)}
.header-name h2{font-size:2rem;margin:0}
.header-name p{font-size:1rem;color:var(--color-muted);margin:0}
.header-menu{list-style:none;display:flex;gap:4px;align-items:center;margin:0;padding:0}
.header-menu li{display:inline-block;padding:8px}
.header-menu .menu-item{color:var(--color-secondary);transition:color .3s}
.header-menu .menu-item.selected{color:var(--color-menu-selected);font-weight:600}
.header-menu .menu-item:hover{color:var(--color-menu-selected)}
.header-menu li a:hover{text-decoration:none}

/* === 14. Content: list, title, tags, footer === */
.content-list{margin:0;padding:0;list-style:none}
.content-title-wrapper{position:relative;margin-bottom:10px}
.content-title{margin-bottom:10px}
.content-title h1{margin:0}
.content-pin{position:absolute;top:0;right:0}
.content-excerpt{margin-bottom:var(--space)}
.content-html{margin-bottom:var(--space)}
.data-tags-footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center}
.date-tags-container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px}
.content-date{color:var(--color-home)}
.content-tags{display:flex;flex-direction:row;margin:0;justify-content:flex-start;list-style:none;gap:2px;flex-wrap:wrap}
.content-tags li{border-radius:var(--radius);margin:0;padding:2px;white-space:nowrap;list-style:none;display:inline-block;color:var(--color-tag);border:1px solid transparent}
.content-tags li a{color:var(--color-primary)}
.content-tags li:hover{background:var(--color-card-bg);border:1px solid var(--color-muted-border)}
.content-tags li::before{content:"#";color:var(--color-secondary)}
.content-tags li::marker{content:""}
.content-authors{display:flex;flex-wrap:wrap;gap:8px}
.content-authors ul{display:flex;gap:20px;list-style:none;padding:0;margin:0;align-items:center}
.content-authors li{display:flex;align-items:center;gap:.5rem}
.content-authors img,.avatar{width:40px;height:40px;border-radius:50%}
.content-authors p{margin:0}
.content-authors-full{width:100%}
.content-authors-flex{width:100%;display:flex;flex-direction:column}
.content-toc details>ul{padding:0}
.content-toc ul li{list-style-type:revert}
.content-stream,.content-series,.content-translations{margin-bottom:var(--space)}

/* === 15. Footer === */
.footer-content{display:grid;grid-template-columns:1fr;gap:var(--space);text-align:center}
.footer-content div{text-align:center}
@media(width>=768px){.footer-content{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}

/* === 16. Grid === */
.grid{display:grid;grid-template-columns:1fr;gap:var(--space)}
@media(width>=768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}

/* === 17. Markdown alerts === */
.markdown-alert{padding:1rem;margin:1rem 0;border-left:4px solid;border-radius:var(--radius);box-shadow:0 2px 4px rgba(0,0,0,.1)}
.markdown-alert-title{font-weight:700;margin-bottom:.5rem;font-size:1.1rem}
.markdown-alert-tip{background:var(--alert-tip-bg);border-color:var(--alert-tip-border);color:var(--alert-tip-color)}
.markdown-alert-note{background:var(--alert-note-bg);border-color:var(--alert-note-border);color:var(--alert-note-color)}
.markdown-alert-important{background:var(--alert-important-bg);border-color:var(--alert-important-border);color:var(--alert-important-color)}
.markdown-alert-warning{background:var(--alert-warning-bg);border-color:var(--alert-warning-border);color:var(--alert-warning-color)}
.markdown-alert-caution{background:var(--alert-caution-bg);border-color:var(--alert-caution-border);color:var(--alert-caution-color)}

/* === 18. Chat turns === */
.chat-turn{margin:1rem 0;padding:.75rem 1rem;border-left:3px solid var(--color-secondary);background:var(--color-card-bg);border-radius:0 var(--radius) var(--radius) 0}
.chat-turn>:first-child{margin-top:0}
.chat-turn>:last-child{margin-bottom:0}
.chat-label{display:block;font-weight:700;margin-bottom:.3rem;font-size:.9rem}
.chat-turn--user .chat-label{color:var(--color-primary)}
.chat-turn--assistant .chat-label{color:#0a7c3a}
.chat-turn--reasoning{border-left-style:dashed;font-style:italic;opacity:.9}
.chat-turn--reasoning .chat-label{color:var(--color-muted)}

/* === 19. Image grid, lightbox === */
.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.image-grid .grid-item{overflow:hidden;border-radius:var(--radius);border:1px solid var(--color-muted-border)}
.image-grid img{width:100%;height:100%;max-height:200px;object-fit:cover;display:block}
.lightbox{display:flex;justify-content:center}
.lightbox>img{max-width:100%}
@media(width>=768px){.lightbox{justify-content:flex-start}}

/* === 20. Spoiler === */
.spoiler,.spoiler>*{transition:color .5s,opacity .5s}
.spoiler:not(:hover){color:transparent;background:var(--color-code-text)}
.spoiler:not(:hover)>*{opacity:0}

/* === 21. Hero / author pages === */
.hero{display:block;width:100%;justify-content:flex-start;align-items:flex-start}
.author-hero .h-card{display:flex;flex-direction:column;gap:20px}
.author-hero-profile{display:flex;flex-direction:column;gap:20px}
.author-hero-flex{display:flex;gap:20px}
.author-hero-image .avatar{width:150px;border-radius:50%;object-fit:cover}
.author-hero-info{display:flex;flex-direction:column}
.author-hero-info h1{margin:0}
.author-hero-info p{color:var(--color-home);margin:0}
.author-hero-links ul{display:flex;gap:15px;list-style:none;padding:0}
.author-hero-links a{color:var(--color-primary)}

/* === 22. Sidebar layout === */
.content-list-with-sidebar{display:flex;gap:var(--space)}
.content-list-with-sidebar .left{flex:1}
.content-list-with-sidebar .right li{list-style:none}

/* === 23. Pagination === */
.pagination nav{display:flex;justify-content:space-between;align-items:center}
.pagination nav ul{list-style:none;display:flex;gap:.5rem}
.pagination nav li a{font-size:1.5rem}

/* === 24. Mobile hamburger (pure-CSS checkbox hack) === */
.menu-toggle-checkbox{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.hamburger{font-size:30px;background:none;border:none;cursor:pointer;display:none;color:var(--color-primary);position:relative;user-select:none;padding:0;line-height:1}
@media(width<=1025px){
  .hamburger{display:block}
  .header-content{padding-inline:var(--space)}
  .header-menu{display:none;flex-direction:column;gap:10px;position:absolute;top:100%;right:0;background:var(--color-card-bg);padding:15px;border-radius:var(--radius);z-index:100;box-shadow:0 4px 4px rgba(0,0,0,.1)}
  #menu-toggle:checked~.header-menu{display:flex}
  .header-menu li{display:block;padding:0}
  .header-menu li .menu-item{display:block;padding:.75rem 1rem}
}

/* === 25. Listing compact rules === */
.content-list-item .content-title{font-size:1.3rem}
.content-list-item .content-excerpt>a.secondary{display:none}
.content-list-item .data-tags-footer{display:none}
.content-list-item .content-excerpt{margin-bottom:0}

/* === 26. Group pages (tags/archive/streams) === */
.group-details{padding:var(--space)}
.group-details details{margin-bottom:var(--space)}
.group-details ul{list-style:none;padding:0}

/* === 27. Accessibility === */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:.75rem 1rem;background:var(--color-bg);color:var(--color-primary);border-radius:var(--radius)}
.skip-link:focus{left:1rem;top:1rem;outline:2px solid var(--color-primary)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}