@font-face{
font-family:"blur";
src:url("fonts/Blur-Light.woff2") format("woff2");
font-weight:300;
}

:root{
--accent:#37432b;
--dark:#29331f;
--cream:#fffdf8;
--paper:#f5efe5;
--line:#d9d0c2;
--muted:#68705e;
}

body[data-theme="summer"]{
--accent:#0879d1;
--dark:#045a9e;
--cream:#fff7fa;
--paper:#ffeef4;
--line:#ff9abb;
--muted:#36749d;
}

body[data-theme="bear"]{
--accent:#694735;
--dark:#4c3022;
--cream:#fff8f0;
--paper:#f1dfcd;
--line:#d7b79a;
--muted:#876b55;
}

body[data-theme="rainy"]{
--accent:#1b3274;
--dark:#101e48;
--cream:#f8faff;
--paper:#e9efff;
--line:#9badde;
--muted:#5b6c9c;
}

body[data-theme="honeycomb"]{
--accent:#75651d;
--dark:#55490f;
--cream:#fffef0;
--paper:#fff8c5;
--line:#dfd16b;
--muted:#897b31;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
min-height:100vh;
background:
linear-gradient(rgba(20,27,15,.62),rgba(20,27,15,.72)),
url("https://i.pinimg.com/1200x/1b/49/ee/1b49ee1778829fcf2134352d7b1fa0c7.jpg")
center/cover fixed;
font-family:"EB Garamond",serif;
font-size:18px;
color:white;
}

button,input,textarea,select{
font:inherit;
}

button{
cursor:pointer;
}

.hidden{
display:none!important;
}


/* TOP */

.topbar{
position:sticky;
top:0;
z-index:100;
height:64px;
display:flex;
align-items:center;
padding:0 28px;
gap:30px;
background:rgba(22,28,17,.85);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.15);
}

.brand{
border:0;
background:none;
color:white;
font-family:"IM Fell English",serif;
font-size:25px;
padding:0;
}

nav{
display:flex;
gap:24px;
margin:auto;
}

nav button,#themeButton{
border:0;
background:none;
color:white;
padding:8px 4px;
opacity:.75;
}

nav button:hover,#themeButton:hover{
opacity:1;
}

#themeButton{
margin-left:auto;
}


/* THEMES */

.theme-panel{
position:fixed;
right:20px;
top:75px;
z-index:300;
width:230px;
padding:15px;
background:var(--cream);
color:var(--accent);
border-radius:12px;
box-shadow:0 20px 60px rgba(0,0,0,.3);
display:none;
}

.theme-panel.open{
display:block;
}

.theme-panel p{
margin:5px 10px 10px;
font-size:12px;
text-transform:uppercase;
letter-spacing:1px;
opacity:.5;
}

.theme-panel button{
display:block;
width:100%;
padding:12px;
text-align:left;
border:0;
background:none;
color:var(--accent);
border-radius:7px;
}

.theme-panel button:hover{
background:var(--paper);
}


/* PAGES */

.page{
display:none;
}

.page.active{
display:block;
}


/* HERO */

.hero{
max-width:1100px;
margin:auto;
padding:75px 25px 40px;
}

.eyebrow{
font-size:12px;
text-transform:uppercase;
letter-spacing:1.7px;
opacity:.62;
margin:0 0 8px;
}

.hero h1,
.forumHeader h1{
font-family:"IM Fell English",serif;
font-weight:400;
font-size:70px;
margin:0;
color:white;
}

.hero p:last-child{
font-size:21px;
opacity:.75;
}


/* GRID */

.dashboard{
width:min(1100px,calc(100% - 40px));
margin:auto;
display:grid;
grid-template-columns:7fr 5fr;
gap:18px;
padding-bottom:70px;
}

.widget{
background:var(--cream);
color:var(--accent);
border:1px solid var(--line);
border-radius:18px;
padding:27px;
box-shadow:0 12px 40px rgba(0,0,0,.12);
}

.widget h2{
font-family:"blur",sans-serif;
font-size:33px;
font-weight:300;
margin:0 0 8px;
}

.blurb{
color:var(--muted);
margin:5px 0 18px;
line-height:1.4;
}

.loft{
grid-column:1/-1;
background:rgba(20,27,15,.78);
color:white;
border-color:rgba(255,255,255,.18);
}

.loft h2{
color:white;
}

.tasks{
grid-column:1;
}

.notes{
grid-column:2;
}

.focus{
grid-column:1;
}

.breaks{
grid-column:2;
}


/* INPUTS */

.row{
display:flex;
gap:8px;
}

input,textarea,select{
width:100%;
padding:11px 13px;
border:1px solid var(--line);
border-radius:8px;
background:var(--paper);
color:var(--accent);
outline:none;
}

textarea{
min-height:220px;
resize:vertical;
line-height:1.5;
}

.row button,
#focusContinue,
#startFocus,
#closeBreak{
border:0;
border-radius:8px;
background:var(--accent);
color:white;
padding:10px 17px;
white-space:nowrap;
}

#notesStatus{
font-size:12px;
opacity:.5;
}


/* TASKS */

#taskList{
list-style:none;
padding:0;
margin:18px 0 0;
}

#taskList li{
display:flex;
align-items:center;
gap:12px;
}

#taskList li span{
flex:1;
text-align:match-parent;
}

#taskList li button{
flex-shrink:0;
}

.task.done span{
text-decoration:line-through;
opacity:.4;
}

.task button{
background:none;
border:0;
color:#000000;
padding:4px 6px;
}


/* FOCUS */

#focusStart,
#focusDuration,
#focusRunning{
display:flex;
flex-direction:column;
gap:12px;
}

.check-row{
display:grid;
grid-template-columns:auto 1fr;
column-gap:9px;
padding:12px;
border-radius:8px;
background:var(--paper);
}

.check-row input{
width:auto;
grid-row:span 2;
}

.check-row small{
opacity:.55;
}

#timer{
font-family:"IM Fell English",serif;
font-size:72px;
text-align:center;
padding:10px;
}

.button-row{
display:flex;
gap:8px;
}

.button-row button{
flex:1;
padding:11px;
border:1px solid var(--accent);
border-radius:8px;
background:transparent;
color:var(--accent);
}

.button-row button:last-child{
background:var(--accent);
color:white;
}


/* CREDITS */

.credits{
display:flex;
flex-direction:column;
margin:15px 0;
}

.credits strong{
font-family:"blur",sans-serif;
font-size:40px;
font-weight:300;
}

.credits span{
font-size:12px;
opacity:.5;
}

.breakOption{
border-top:1px solid var(--line);
padding:13px 0;
}

.breakOption h3{
font-family:"blur",sans-serif;
font-weight:300;
margin:0;
}

.breakOption p{
color:var(--muted);
font-size:14px;
margin:3px 0 8px;
}

.breakOption button{
border:1px solid var(--accent);
background:none;
color:var(--accent);
border-radius:6px;
padding:6px 10px;
}

.breakOption button:disabled{
opacity:.3;
}


/* LOFT */

.video{
width:100%;
aspect-ratio:16/9;
border-radius:12px;
overflow:hidden;
background:#111;
}

.video iframe{
width:100%;
height:100%;
border:0;
}


/* FORUM */

.forumHeader{
width:min(1050px,calc(100% - 40px));
margin:auto;
padding:70px 0 30px;
}

.forumHeader p:last-of-type{
font-size:20px;
opacity:.7;
}

.forumControls{
display:flex;
gap:10px;
margin-top:28px;
}

.forumControls button{
background:var(--cream);
color:var(--accent);
border:0;
border-radius:8px;
padding:10px 17px;
}

.forumControls input{
max-width:350px;
}

.forumFilters{
width:min(1050px,calc(100% - 40px));
margin:auto;
display:flex;
gap:7px;
flex-wrap:wrap;
}

.forumFilters button{
border:1px solid rgba(255,255,255,.35);
background:transparent;
color:white;
border-radius:7px;
padding:7px 12px;
}

.forumFilters button.active,
.forumFilters button:hover{
background:white;
color:var(--accent);
}

.forumFeed{
width:min(1050px,calc(100% - 40px));
margin:15px auto 70px;
display:flex;
flex-direction:column;
gap:10px;
}

.post{
background:var(--cream);
color:var(--accent);
padding:25px;
border-radius:14px;
border:1px solid var(--line);
cursor:pointer;
}

.post h2{
font-family:"blur",sans-serif;
font-weight:300;
font-size:30px;
margin:7px 0;
}

.post p{
color:var(--muted);
line-height:1.5;
}

.meta{
font-size:12px;
opacity:.5;
}


/* MODALS */

.modal{
position:fixed;
inset:0;
z-index:500;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(10,15,8,.72);
backdrop-filter:blur(8px);
}

.modalBox{
width:min(500px,100%);
background:var(--cream);
color:var(--accent);
border-radius:16px;
padding:32px;
box-shadow:0 25px 80px rgba(0,0,0,.35);
}

.modalBox h2{
font-family:"blur",sans-serif;
font-weight:300;
font-size:34px;
margin:0 0 8px;
}

.modalBox textarea{
margin-top:10px;
}

.breakBox{
text-align:center;
}

.breakBox h2{
font-family:"IM Fell English",serif;
font-size:70px;
}


/* LOCKDOWN */

body.lockdown-active .topbar,
body.lockdown-active .hero{
display:none;
}

body.lockdown-active .tasks,
body.lockdown-active .notes,
body.lockdown-active .breaks,
body.lockdown-active .loft{
display:none;
}

body.lockdown-active .dashboard{
display:block;
max-width:650px;
padding-top:12vh;
}


/* FOOTER */

footer{
text-align:center;
padding:30px;
opacity:.45;
font-size:13px;
}


/* MOBILE */

@media(max-width:800px){

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

.tasks,
.notes,
.focus,
.breaks,
.loft{
grid-column:1;
}

.topbar{
gap:12px;
padding:0 15px;
}

nav{
gap:10px;
overflow:auto;
}

.hero h1,
.forumHeader h1{
font-size:52px;
}

}

@media(max-width:550px){

.dashboard{
width:calc(100% - 24px);
}

.hero{
padding-left:15px;
padding-right:15px;
}

.row,
.forumControls{
flex-direction:column;
}

.forumControls input{
max-width:none;
}

}
#taskList{
margin:22px 0 0;
padding:0;
list-style:none;
}

#taskList li{
display:flex;
align-items:center;
min-height:48px;
padding:10px 4px;
margin:0;
border-bottom:1px solid rgba(255,255,255,.1);
gap:14px;
}

#taskList li:last-child{
border-bottom:none;
}

#taskList li input[type="checkbox"]{
width:15px;
height:15px;
margin:0 3px 0 0;
flex:0 0 15px;
}

#taskList li span{
flex:1;
min-width:0;
margin:0;
padding:0;
text-align:left;
font-size:16px;
line-height:1.2;
color:rgba(255,255,255,.9);
}

#taskList li button{
flex:0 0 auto;
padding:5px 10px;
margin:0;
font-size:12px;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.06);
border-radius:6px;
}

#taskList li button:hover{
background:rgba(255,255,255,.12);
}

#taskList li.done span{
text-decoration:line-through;
opacity:.4;
}
#taskList li{
border-bottom:1px solid #222 !important;
}

#taskList li span{
color:#111 !important;
}

#taskList li button{
color:#111 !important;
border-color:#222 !important;
background:transparent !important;
}

#taskList li button:hover{
background:rgba(0,0,0,.06) !important;
}
/* LOFT STREAMS */

.loft-stream{
width:100%;
aspect-ratio:16/9;
overflow:hidden;
border-radius:12px;
background:#111;
}

.loft-stream iframe{
width:100%;
height:100%;
border:0;
display:block;
}

.loft-streams{
display:flex;
gap:8px;
margin-top:12px;
}

.loftStreamButton{
padding:8px 14px;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.05);
border-radius:7px;
color:inherit;
cursor:pointer;
transition:.2s ease;
}

.loftStreamButton:hover{
background:rgba(255,255,255,.1);
}

.loftStreamButton.active{
background:rgba(255,255,255,.15);
}

.loft-now-playing{
margin-top:10px;
font-size:12px;
opacity:.55;
}