/* Atelier studio — deliberately unstyled, like a good 1996 page that
   happens to be set well. Serif on white, blue links, thin black rules.
   No cards, no shadows, no radii, no gradients. */

body{
  font-family:Georgia,"Times New Roman",Times,serif;
  background:#fff;color:#000;
  max-width:80rem;margin:1.4rem auto 5rem;padding:0 1.4rem;
  line-height:1.5;
}

h1{font-weight:normal;font-size:1.65rem;letter-spacing:.3em;margin:0}
.sub{margin:.15rem 0 .9rem;font-style:italic}
h2{font-weight:normal;font-variant:small-caps;letter-spacing:.07em;font-size:1.15rem;margin:1.1rem 0 .55rem}
h3{font-weight:normal;font-variant:small-caps;letter-spacing:.06em;font-size:1rem;margin:1.1rem 0 .3rem}
.note{font-variant:normal;font-style:italic;font-size:.85rem;letter-spacing:0}
hr{border:0;border-top:1px solid #000;margin:1.6rem 0 1.2rem}

a,.link{color:#00c;text-decoration:underline;background:none;border:0;padding:0;font:inherit;cursor:pointer}
a:visited{color:#551a8b}
a:hover,.link:hover{color:#e00}

button:not(.link){font:inherit;font-size:.92em;background:#fff;border:1px solid #000;padding:.12rem .7rem;cursor:pointer}
button:not(.link):hover{background:#eee}
button:disabled{color:#888;border-color:#999;cursor:wait}

input,select,textarea{font:inherit;font-size:.92em;color:#000;background:#fff;border:1px solid #767676;padding:.08rem .3rem}
input:focus,select:focus,textarea:focus{outline:1px solid #00c}
input[type=checkbox]{vertical-align:-.12em}
input[type=color]{padding:0;width:3.4rem;height:1.45rem;vertical-align:middle}
input[type=range]{width:9.5rem;vertical-align:middle}
input[type=number]{width:6rem}
textarea{width:100%;box-sizing:border-box;font-family:"Courier New",Courier,monospace;font-size:.82rem;line-height:1.45}

table{border-collapse:collapse;font-family:"Courier New",Courier,monospace;font-size:.8rem}
th,td{border:1px solid #888;padding:.12rem .5rem;text-align:left;white-space:nowrap}
th{background:#f2f2f2}
.scroll{max-height:16rem;overflow:auto;display:inline-block;max-width:100%;border-bottom:1px solid #888}

pre{border:1px solid #888;padding:.6rem .8rem;font-family:"Courier New",Courier,monospace;
    font-size:.8rem;line-height:1.5;overflow:auto;max-height:28rem;white-space:pre-wrap}

/* two flowing columns, separated by nothing fancier than space */
.cols{display:flex;gap:2.4rem;align-items:flex-start;flex-wrap:wrap}
.col-form{flex:0 1 27rem;min-width:21rem}
.col-fig{flex:1 1 32rem;min-width:20rem}
@media(max-width:920px){.cols{display:block}}

.fld{display:block;margin:.4rem 0}
.fld .lab{display:inline-block;min-width:7.4rem}

/* knobs */
#knobGroups details{margin:.3rem 0;border-left:1px solid #000;padding-left:.8rem}
#knobGroups summary{cursor:pointer;font-variant:small-caps;letter-spacing:.05em}
.knob{display:block;margin:.22rem 0;font-size:.92rem}
.knob .lab{display:inline-block;min-width:9.8rem}
.knob.touched .lab{font-weight:bold}
.knob.touched .lab::after{content:" •"}
.knob output{font-family:"Courier New",Courier,monospace;font-size:.85rem;margin-left:.3rem}
.knob .reset{margin-left:.4rem;text-decoration:none;color:#a00}

.hint{font-style:italic;font-size:.86rem;color:#333}
.status{font-family:"Courier New",Courier,monospace;font-size:.84rem}
.ok{color:#060}
.bad{color:#a00}

#figBox img{max-width:100%;height:auto;border:1px solid #000;background:#fff}
.abwrap{display:flex;gap:1.2rem;flex-wrap:wrap}
.abwrap figure{margin:0;max-width:48%}
.abwrap figcaption,#proofBox figcaption{font-style:italic;font-size:.84rem;text-align:center;margin-top:.15rem}

#history img{height:60px;border:1px solid #888;margin:0 .35rem .3rem 0;cursor:pointer;vertical-align:middle}
#history img:hover{border-color:#00c}

#proofBox figure,#galleryBox figure{display:inline-block;margin:.5rem 1rem .4rem 0;text-align:center}
#proofBox img,#galleryBox img{height:150px;border:1px solid #888;cursor:pointer}
#proofBox img:hover,#galleryBox img:hover{border-color:#00c}
#figTabs b,#dsTabs b{letter-spacing:.02em}

#statSummary b{font-family:"Courier New",Courier,monospace;font-size:.9rem}

/* project browser */
#projectList .folder{margin:.6rem 0}
#projectList .folderhead{font-variant:small-caps;letter-spacing:.05em;border-bottom:1px solid #000;margin-bottom:.2rem}
#projectList ul{list-style:none;margin:.2rem 0 .6rem;padding:0}
#projectList li{margin:.18rem 0}
#projectList .openproj{font-size:1rem}
#projectList .delproj{color:#a00;margin-left:.4rem;text-decoration:none}

/* editor project bar */
.projbar{border-bottom:1px solid #000;padding-bottom:.4rem}
.projbar b{font-size:1.05rem}
.savestate{font-style:italic;font-size:.84rem;color:#a60}
.savestate.ok{color:#060}

/* organizer */
#organizer{border-left:1px solid #000;padding:.2rem 0 .4rem .9rem;margin:.4rem 0}
#organizer h3{margin:.9rem 0 .3rem}
#colTable input,#colTable select{font-size:.82rem;padding:.05rem .25rem}
#cohortLabels table{font-family:Georgia,serif}
#cohortLabels input{font-size:.85rem}
.chip{display:inline-block;border:1px solid #888;padding:.05rem .4rem;margin:.1rem .15rem;font-size:.85rem;white-space:nowrap}
.chip input{vertical-align:-.1em}
#pipeText{max-height:14rem}

/* workbook visualizer (Excel-like grid) */
#workbook{border:1px solid #000;padding:.5rem .7rem;margin:.5rem 0}
.wbgrid{max-height:26rem;max-width:100%;overflow:auto;border:1px solid #888;display:block}
#wbTable{border-collapse:collapse;font-family:"Courier New",Courier,monospace;font-size:.78rem;user-select:none;cursor:cell}
#wbTable th,#wbTable td{border:1px solid #ccc;padding:.05rem .35rem;text-align:left;white-space:nowrap;
  max-width:14rem;overflow:hidden;text-overflow:ellipsis}
#wbTable th.colh,#wbTable th.rowh,#wbTable th.corner{background:#eee;color:#555;text-align:center;
  font-weight:normal;position:sticky}
#wbTable th.colh{top:0} #wbTable th.rowh{left:0} #wbTable th.corner{top:0;left:0;z-index:2}
#wbTable td.sel{background:#cfe3ff;outline:1px solid #5b9bff}
#wbSel{font-style:italic}

/* auth */
.authbar{font-size:.8rem;font-variant:normal;letter-spacing:0;margin-left:1rem}
.authbar #authWho{font-style:italic;color:#333}
#authGate{position:fixed;inset:0;background:#fff;display:flex;align-items:center;
  justify-content:center;z-index:1000}
#authGate form{text-align:center;min-width:18rem}
#authGate h1{font-weight:normal;font-size:1.5rem;letter-spacing:.3em}
#authGate .sub{font-style:italic;margin:.1rem 0 1.2rem}
#authGate input{width:16rem;padding:.35rem .5rem;margin:.1rem 0}
#authGate #authMsg{min-height:1.2rem;font-size:.85rem;font-style:italic}

.hidden{display:none}