/*  > FONTS  */

/*  ...  */


/*  > VARIABLES  */

:root {
	
	/*  >> Colors  */
	
	--input-shadow-color: hsla(0, 0%, 4%, 0.1);
	
	--sidebar-background: hsl(0, 0%, 90%);
	
	
	/*  >>> Theme */
	
	--theme-color-primary:    highlight;
	
	--theme-color-background: canvas;
	--theme-color-text:       canvastext;
	
	
	/*  >> Sizing */
	
	--sidebar-width-min: 20ex;
	--sidebar-width-max: 15vw;
	--sidebar-padding: 1.25vw;
	
	--border-radius:   0.25em;
	
	--label-padding:   0.33em;
	
}


/*  > BASICS  */

body {
	
	display:     flex;
	
	min-height:  100vh;
	
	background-color: var(--theme-color-background);
	
	font-family: sans-serif;
	line-height: 1.33;
	
	box-sizing:  border-box;
	
}

:first-child { margin-block-start: 0; }
:last-child  { margin-block-end:   0; }

aside,
main { flex: 1; }

p     { margin: 0; }
p + p { margin-block-start: 0.75em; }

fieldset {
	
	/* * ↓ fixes bug where browser sets odd defaults  */
	/* *   affects `fieldset legend` using `text-overflow: ellipsis` */
	/* *   see: https://stackoverflow.com/a/29499408 */
	min-width: 0;

	background-color: var(--theme-color-background);

}

legend {
	
	position:          relative;
	
	padding:           var(--label-padding);
	padding-block-end: calc(var(--label-padding) * 0.66); /* * fixes bottom padding extending the container further than is expected */
	
	background-color:  var(--theme-color-primary);
	
	line-height:       1;
	color:             white;
	
	z-index:           1;
	
}


fieldset legend {
	
	/* * TEMP: unset from `reset.css` to allow `text-overflow` */
	display:       inline;
	
	max-width:     100%;
	
	overflow:      hidden;
	
	white-space:   nowrap;
	text-overflow: ellipsis;
	
	box-sizing:    border-box;

}

label,
legend { user-select: none; }

label {
	
	display: inline-flex;
	align-items: center;
	
}

[type="range"] {
	
	--range-offset: 0.25ex;
	--range-width:  calc(100% + var(--range-offset) * 2);
	--range-margin: calc(var(--range-offset) * -1);
	
	width:          var(--range-width);
	
	margin-inline-start: var(--range-margin);
	
}

input,
fieldset,
legend,
label {

	/* * TEMP: override `reset.css` styles */
	border-radius: var(--border-radius) !important;

}

svg {
	
	/* * explicit sizing prevents layout jumps on adjacent content */
	width:  100%;
	height: 100%;

}


/*  > SIDEBAR  */

aside {
	
	display:        flex;
	flex-direction: column;
	align-items:    center;
	flex:           0 1 20%;
	
	min-width:      var(--sidebar-width-min);
	max-width:      var(--sidebar-width-max);
	
	padding:        var(--sidebar-padding);
	
	background-color: var(--sidebar-background);
	
	overflow-x:     hidden;
	
	box-sizing:     border-box;
	
}

aside article           { width: 100%; }
aside article + article { margin-block-start: var(--base-spacing); }

aside .separator {
	
	flex: 1;
	
	height: 1px;
	
	margin: 0 0.5em;
	
	background-color: grey;
	
}


/*  >> Label  */

aside label span::after {
	
	content:  "";
	
	position: absolute;
	top:      0;
	left:     0;
	
	width:    100%;
	height:   100%;
	
	background-color: var(--theme-color-primary);
	
	border-radius: var(--border-radius);
	
	z-index: -1;
	
	opacity:  0;
	
}

aside label:hover           span::after { opacity:  0.25; }

aside label input:checked + span::after { opacity:     1; }
aside label input:checked + span        { color: white; }


/*  >> Fieldset  */

aside fieldset >      * + * { margin-block-start: var(--base-spacing); }
aside fieldset > legend + * { margin-block-start: 0; }

aside fieldset label {
	
	display:     flex;
	justify-content: center;
	
	position:    relative;
	
	padding:     var(--label-padding);
	
	line-height: 1;
	
	z-index:     1;

}

aside fieldset legend label {

	display: inline-flex;

	padding: 0;

}

aside fieldset legend label input { position: static; }

aside label input {
	
	position: absolute;
	left:     var(--label-padding);
	
}


/*  >> List  */

aside ul {
	
	list-style: none;
	
	padding-inline-start: 0;
	
}


/*  >> Widgets  */

aside .widgets {

	display: flex;
	justify-content: center;

}

aside .widgets fieldset legend {

    display:    inline-flex;
    column-gap: 0.5em;
    flex-wrap:  wrap;

}

aside .widget {

	width: clamp(15ex, 10vw, calc(var(--sidebar-width-max) - var(--sidebar-padding) * 2));

}


/*  >> Tabs  */

aside .tab {

	--tab-padding: 1em;
	
	display: flex;

}

aside .tab label {
	
	position:    relative;
	
	flex:        1;

	padding: 1.25em 0;
	padding-inline-start: clamp(var(--tab-padding), 5vw, 30%);
	
	z-index:     1;
	
}

/* * reset `color` from using one that contrasts with theme-colored background */
aside .tab label input:checked + span { color: initial; }

aside .tab label span::after {
	
	--tab-backgrould-width: calc(100% + var(--sidebar-padding));
	
	width: var(--tab-backgrould-width);
	
	background-color: white;
	
	border-top-right-radius:    0;
	border-bottom-right-radius: 0;
	
	/* *     ↓ same color as `reset.css` `--base-border` */
	/* TODO: include the color into a unified color scheme / post-reset stylesheet */
	box-shadow: 0 0 0.25em hsl(0, 0%, 80%);
	
}

aside .tab input { left: clamp(var(--tab-padding), 2.5vw, 30%); }


/*  > MAIN  */

main {
	
    height:     100vh;
	
	padding:    5%;
	
    overflow:   auto;

    box-sizing: border-box;

}


/*  >> Categories  */

main article           { max-width:         75ch; }
main article + article { margin-block-start: 3em; }

main article h1 {
	
	font-size:        3.5em;
	
	margin:           0;
	margin-block-end: 0.25em;
	
}


/*  >> Subcategories  */

main section { max-width: 75ch; }

main article h1 ~ section,
main section + section { margin-block-start: 2.5em; }

main section h2 {
	
	margin-block-end: 0.5em;
	
	font-size:        2.5em;
	
}


/*  >>> Components  */

main section .component {
	
	--component-internal-padding: 1em;
	--component-internal-margin: calc(var(--component-internal-padding) * -1);
	
	width:   100%;
	
	border:  1px solid transparent;
	
	padding: var(--component-internal-padding);
	margin:  var(--component-internal-margin);
	
}
main section .component:first-child { margin-inline-start: 0; }
main section .component:last-child  { margin-inline-end:   0; }

main section .component:hover {
	
	background-color: canvas;
	
	border-color: grey;
	
	box-shadow: 0 0 12px hsl(0, 0%, 50%, 0.25);
	
}

main section .component + .component { margin-block-start: 1em; }

main section .component > * + * { margin-block-start: 0.75em; }

main section .component .component {
	
	margin: 0.75em -1.5em 0 1.5em;
	
}


/*  >>>> Component Details  */

[type="text"] {
	
	box-shadow: inset 0 0.0625em 0.125em var(--input-shadow-color);
	
	transition: box-shadow 0.5s;

	box-sizing: border-box;
	
}

[type="text"]:focus-within,
[type="text"]:not(:placeholder-shown) { box-shadow: none; }

label input + span,
      input + label { margin-inline-start: 0.75ex; }

label,
[type="radio"],
[type="checkbox"] { cursor: pointer; }

[type="range"] { cursor: e-resize; }

[disabled] { cursor: not-allowed; }

.component .title span,
.component  label span span {

	margin-inline-start: 0.5em;
	
	font-weight: normal;
	
	opacity: 0.75;

}

.component               label,
[component-type="text"] .title { font-weight: bold; }

[component-type="toggle"] > .title ~ * { margin-inline-start: 2ex; }

[component-type="range"] .title {
	
	display: flex;
	align-items: center;
	
}

[component-type="range"] .state { margin-inline-start: auto; }

[component-type="radio"] fieldset {
	
	display: flex;
	justify-content: space-around;
	
}


/*  >>> TEMP: Derived  */

.effort,
.controls { margin-block-start: 3em; }

.effort {

	font-size: 1.25em;
	
}

.hours {
	
	font-size: 2.5em;
	
	margin: 0.33em 0;
	margin-inline-end: 0.0625em;
	
}
.hours::before {

	content: "⏱";

	margin-inline-end: 0.125em;

	font-size: 0.75em;

}

.controls { display: flex; }

.controls [function] { border-radius: var(--border-radius); }
.controls [function="start"] {

	flex: 1;

	background-color: var(--theme-color-primary);
	
	color: var(--theme-color-background);
}


/*  >>> Special Component Styles  */

time {

	display: table;
	
	/* TODO: center within `fieldset` using flex */
	margin: 0 auto;
	
}
time::after {
	
	content: attr(datetime);
	
	font-size:   2em;
	font-weight: bold;
	color:       hsl(0, 0%, 20%);
	
}

.random {
	
	height: auto;
	
	background: none;
	
	border: none;
	
	padding: 0;
	
	cursor: pointer;
	
	float: right;
	
}
.random::after { content: "\1f3b2"; } /* * ← gaming die */

.prequisites {
	
	list-style: none;
	
	padding-inline-start: 0;
	
}


/*  > VIEWS  */

[view] { display: none; }

[display="overview"] [view="overview"],
[display="planner"]  [view="planner"],
[display="project"]  [view="project"] {

	display: initial;

}


/*  > PROJECTS  */

main section {

	--project-padding: var(--base-fieldset__padding);
	--icon-size:       1em;

}
main div:empty::after {

	/* * rough sizing according to the computed size of a `.project` */
	--min-height: calc( var(--icon-size) + var(--project-padding) * 2 + ( (var(--label-padding) * 2) + 1em ) );

	content: "No projects yet";

	display: flex;
	justify-content: center;
	align-items: center;

	min-height: var(--min-height);

	color: grey;



}

.project {

	display: flex;
	flex-direction: column;
    justify-content: space-between;
    align-items: center;

}

.project .panel {

	display: flex;
	justify-content: stretch;
	
	width: 100%;
	min-height: var(--icon-size);

	margin-block-start: 0.5em;
	margin-block-end:  -0.5em;

}

.project .panel .button {

	border-radius: var(--border-radius);

	padding: 0.5em 0.66em;

	background-color: var(--panel-button-theme);
	color: var(--theme-color-background);

	fill: var(--theme-color-background);

	cursor: pointer;

}
.project .panel .button + .button { margin-inline-start: 0.25em; }
.project .panel .button + [control="abandon"] { margin-inline-start: auto; }

.project .panel .button > span {

	display: flex;
	align-items: center;

}

.project .panel .button svg {
	
	width:  var(--icon-size);
	height: var(--icon-size);

	margin-inline-end: 0.5em;

	box-sizing: border-box;

	vertical-align: text-top;

}

.project .panel [control="abandon"] svg {

	margin-inline-end: 0;
	margin-inline-start: 0.5em;

}

.project                .panel [control="pause"] .pause  { display: initial; }
.project                .panel [control="pause"] .resume { display: none;    }

.project.paused         .panel [control="pause"] .pause  { display: none;    }
.project.paused         .panel [control="pause"] .resume { display: initial; }

.project:not(.finished) .panel [control="publish"]       { display: none;    }

.project.finished       .panel [control="pause"]         { display: none;    }
.project.finished       .panel [control="publish"]       { display: initial; }
.project.finished       .panel [control="abandon"]       { display: none;    }

.project.published      .panel [control="publish"]       { display: none;    }

.project.abandoned      .panel [control="pause"]         { display: none;    }
.project.abandoned      .panel [control="abandon"]       { display: none;    }

/* TODO: store type colors globally */
[control="pause"]   { --panel-button-theme: hsl(  0,   0%, 68%); }
[control="publish"] { --panel-button-theme: hsl(120, 100%, 15%); }
[control="abandon"] { --panel-button-theme: hsl(  0, 100%, 25%); }

.project .timespan { font-size: 1.5em; }

.project .timespan .separator {

	margin: 0 0.25em;

	font-size: 0.75em;
	color: darkgray;

}