/* File: static/css/style.css */
/* Location: /ordl-site/static/css/style.css */
/* Main stylesheet with research form styling and enhanced data entry display */

:root{
--ink:#000;
--void:#111;
--mono:"IBM Plex Mono JP",monospace;
--text-brightness:1;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--ink);
color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
font-family:var(--mono);
font-size:14px;
line-height:1.6;
overflow-x:hidden;
}
body::before{
content:"";
position:fixed;
inset:0;
background:repeating-linear-gradient(0deg,var(--ink) 0 1px,var(--void) 1px 2px),repeating-linear-gradient(90deg,var(--ink) 0 1px,var(--void) 1px 2px);
opacity:.3;
pointer-events:none;
z-index:-1;
}

/* Legal Navigation - Horizontal sticky top nav for left 60% of screen */
.legal-nav {
    position: fixed;
    top: 1rem;
    left: 4.5rem;
    width: 60%;
    z-index: 20;
}

.legal-nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

.legal-nav a {
    color: color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
    text-decoration: none;
    font-size: 0.75em;
    letter-spacing: 0.1em;
    transition: color 0.3s;
    white-space: nowrap;
}

.legal-nav a:hover {
    color: #007f7f;
}


/* Brightness Control - moved down 50px, labels on left/right sides */
.brightness-control{
position:fixed;
bottom:1rem;
left:30px;
z-index:15;
display:flex;
flex-direction:row;
align-items:center;
gap:0.5rem;
}
.brightness-slider{
width:120px;
height:15px;
-webkit-appearance:none;
background:var(--ink);
border:1px solid color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
cursor:pointer;
}
.brightness-slider::-webkit-slider-thumb{
-webkit-appearance:none;
width:15px;
height:13px;
background:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
cursor:pointer;
}
.brightness-slider::-moz-range-thumb{
width:15px;
height:13px;
background:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
cursor:pointer;
border:none;
}
.brightness-label{
font-size:0.6em;
color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
letter-spacing:0.1em;
writing-mode:vertical-rl;
text-orientation:upright;
}

/* Auth form - positioned below ASCII logo - moved down 10px */
.auth-form{
position:fixed;
top:calc(60% + 10px);
right:1rem;
width:280px;
padding:1.5rem;
border:2px solid color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
background:var(--ink);
z-index:10;
}
.auth-form label{
display:block;
margin-bottom:0.5rem;
color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
font-size:0.8em;
letter-spacing:0.1em;
}
.auth-form input{
width:100%;
padding:0.4rem;
margin-bottom:1rem;
background:var(--ink);
border:1px solid color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
font-family:var(--mono);
font-size:0.8em;
}
.auth-form input:focus{
outline:none;
border-color:#007f7f;
}
.auth-form input[type="submit"]{
background:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
color:var(--ink);
cursor:pointer;
transition:background 0.3s, color 0.3s;
}
.auth-form input[type="submit"]:hover{
background:#007f7f;
color:var(--void);
}

/* Auth navigation - moved up 80px from ASCII logo */
.auth-nav{
position:fixed;
top:calc(45% - 80px);
right:1rem;
z-index:10;
}
.auth-nav ul{
list-style:none;
display:flex;
flex-direction:row;
gap:0.5rem;
align-items:center;
}
.auth-nav a, .auth-nav span{
color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
text-decoration:none;
font-size:0.7em;
letter-spacing:0.1em;
background:var(--ink);
padding:0.3em 0.6em;
border:1px solid color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
transition:color 0.3s, border-color 0.3s;
border-radius:2px;
}
.auth-nav a:hover{
color:#007f7f;
border-color:#007f7f;
}

/* ASCII banner docked right */
.ascii-banner{
position:fixed;
top:50%;
right:1rem;
transform:translateY(-50%);
z-index:5;
}
.ascii-brand{
display:flex;
align-items:center;
gap:0.9rem;
}
.ascii-banner pre{
font-family:var(--mono);
font-size:clamp(8px,1vw,10px);
line-height:1;
letter-spacing:0;
white-space:pre;
color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
background:transparent;
}
.ascii-wordmark{
font-family:var(--mono);
font-size:clamp(20px,2vw,28px);
letter-spacing:0.22em;
color:color-mix(in srgb, var(--void), white calc(20% * var(--text-brightness)));
text-decoration:none;
text-transform:uppercase;
writing-mode:vertical-rl;
text-orientation:upright;
padding:0.2rem 0;
border-left:1px solid color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
}
.ascii-wordmark:hover{
color:#00a3a3;
border-left-color:#00a3a3;
}

/* vertical bilingual nav - increased font sizes by 3-4px */
main{display:grid;grid-template-columns:max-content 1fr;min-height:100vh}
nav{position:sticky;top:0;height:100vh;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;border-right:2px solid color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));background:var(--ink);padding:.5rem 1rem;z-index:10}
nav ul{list-style:none;display:flex;flex-direction:column;gap:2rem}
nav a{color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));text-decoration:none;font-size:1.2em;letter-spacing:.15em;transition:color .3s;display:flex;flex-direction:column;align-items:center;line-height:1.2}
nav a:hover{color:#007f7f}
nav a .en{font-size:.8em;opacity:.7;margin-top:.1em}

/* upright English only in vertical mode */
@media (min-width:601px){
nav a .en{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:.75em;
  margin-top:0;
  margin-left:.2em;
}
}

article{padding:2.5rem 4rem 2.5rem 2.5rem;max-width:70ch}
header{margin:2rem 0 3rem;text-align:center}
h1{font-size:1.2rem;font-weight:400;letter-spacing:.3em;color:color-mix(in srgb, var(--void), white calc(25% * var(--text-brightness)));text-shadow:0 0 8px color-mix(in srgb, var(--void), white calc(10% * var(--text-brightness)))}

/* planet ring with persistent rotation */
.planet{--size:260px;position:relative;width:var(--size);height:var(--size);margin:3rem auto;border:1px solid var(--ink);border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness))),0 0 0 3px var(--ink),inset 0 0 20px var(--ink);animation:spin 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(var(--r)) translate(calc(var(--size)/2.2)) rotate(calc(-1*var(--r)));font-size:11px;letter-spacing:.1em;color:var(--ink);background:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));padding:2px 4px;border-radius:2px;cursor:pointer;transition:background 0.3s, color 0.3s}
.orbit:hover{background:#007f7f;color:var(--void)}

section{margin-bottom:3rem}
section h2{font-size:1rem;color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));margin-bottom:.5rem;letter-spacing:.1em}
section h3{font-size:0.9rem;color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));margin-bottom:.3rem;letter-spacing:.1em}
code{background:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));color:var(--ink);padding:.1em .3em;border-radius:1px}
.jp{display:block;color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)))}
.en{opacity:.7;margin-top:.2em;color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)))}

/* Research Data Entry Styles */
.data-entry{
margin:1rem 0;
padding:1rem;
border:1px solid color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
cursor:pointer;
transition:border-color 0.3s, background 0.3s;
}
.data-entry:hover{
border-color:#007f7f;
background:color-mix(in srgb, var(--ink), white calc(2% * var(--text-brightness)));
}
.data-entry h3{
color:#007f7f;
margin-bottom:0.5rem;
}
.entry-brief{
margin-top:0.5rem;
}
.entry-brief p{
margin-bottom:0.3rem;
font-size:0.85em;
}

/* Research Form Styles */
.research-form{
max-width:100%;
margin:2rem 0;
}
.form-group{
margin-bottom:1.5rem;
}
.research-form label{
display:block;
margin-bottom:0.5rem;
color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
font-size:0.9em;
letter-spacing:0.1em;
}
.research-form input, .research-form textarea{
width:100%;
padding:0.5rem;
background:var(--ink);
border:1px solid color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
color:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
font-family:var(--mono);
font-size:0.8em;
resize:vertical;
}
.research-form input:focus, .research-form textarea:focus{
outline:none;
border-color:#007f7f;
}
.submit-btn{
background:color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)));
color:var(--ink);
cursor:pointer;
transition:background 0.3s, color 0.3s;
padding:0.8rem 2rem;
font-size:0.9em;
letter-spacing:0.1em;
}
.submit-btn:hover{
background:#007f7f;
color:var(--void);
}

/* Research View Styles */
.content-block{
background:color-mix(in srgb, var(--ink), white calc(2% * var(--text-brightness)));
padding:1rem;
margin:0.5rem 0;
border-left:3px solid #007f7f;
}
.content-block p{
margin-bottom:0.5rem;
white-space:pre-wrap;
}

@media (prefers-reduced-motion:reduce){*{animation:none;transition:none}}
@media(max-width:600px){
main{grid-template-columns:1fr}
nav{position:static;writing-mode:horizontal-tb;height:auto;border-right:none;border-bottom:2px solid color-mix(in srgb, var(--void), white calc(15% * var(--text-brightness)))}
nav ul{flex-direction:row;justify-content:center;gap:1rem}
.ascii-banner{display:none}
.auth-nav{position:static;margin:1rem auto;width:fit-content}
.auth-form{position:static;margin:1rem;width:auto}
.brightness-control{display:none}
.legal-nav{position:static;margin:1rem auto;width:fit-content}
article{padding:1rem;max-width:100%}
.research-form{padding:1rem 0}
}