/* Portal: header, login, pages, answers and hours. The document styles (questions, rules) are in docs.css: */

/* External links open in a new tab and show the Font Awesome Light arrow-up-right-from-square icon: */
a.ext::after {content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .3em; vertical-align: .05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M336%200c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016l121.4%200L212.7%20276.7c-6.2%206.2-6.2%2016.4%200%2022.6s16.4%206.2%2022.6%200L480%2054.6%20480%20176c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-160c0-8.8-7.2-16-16-16L336%200zM64%2032C28.7%2032%200%2060.7%200%2096L0%20448c0%2035.3%2028.7%2064%2064%2064l352%200c35.3%200%2064-28.7%2064-64l0-144c0-8.8-7.2-16-16-16s-16%207.2-16%2016l0%20144c0%2017.7-14.3%2032-32%2032L64%20480c-17.7%200-32-14.3-32-32L32%2096c0-17.7%2014.3-32%2032-32l144%200c8.8%200%2016-7.2%2016-16s-7.2-16-16-16L64%2032z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M336%200c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016l121.4%200L212.7%20276.7c-6.2%206.2-6.2%2016.4%200%2022.6s16.4%206.2%2022.6%200L480%2054.6%20480%20176c0%208.8%207.2%2016%2016%2016s16-7.2%2016-16l0-160c0-8.8-7.2-16-16-16L336%200zM64%2032C28.7%2032%200%2060.7%200%2096L0%20448c0%2035.3%2028.7%2064%2064%2064l352%200c35.3%200%2064-28.7%2064-64l0-144c0-8.8-7.2-16-16-16s-16%207.2-16%2016l0%20144c0%2017.7-14.3%2032-32%2032L64%20480c-17.7%200-32-14.3-32-32L32%2096c0-17.7%2014.3-32%2032-32l144%200c8.8%200%2016-7.2%2016-16s-7.2-16-16-16L64%2032z%22/%3E%3C/svg%3E") center / contain no-repeat;}

/* Header and navigation: */
.top {position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line);}
	.top .in {max-width: 780px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 24px; height: 56px;}
	.top nav {display: flex; gap: 4px; flex: 1; overflow-x: auto;}
		.top nav a {padding: 8px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; white-space: nowrap; cursor: pointer;}
		.top nav a.on {color: var(--text); background: var(--soft);}
	.top .me {color: var(--muted); font-size: 14px; white-space: nowrap;}
		.top .me a {color: inherit; cursor: pointer;}
		.top .me [data-me] {color: var(--text);}

/* Pages, one visible at a time: */
[data-page] {display: none;}
	[data-page].on {display: block;}
.page_h {font-size: 24px; margin: 0 0 20px;}
[data-page="ulevaade"] h2 {font-size: 18px; margin: 0 0 8px;}

/* Login: */
.login {min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;}
	.login form {width: 100%; max-width: 340px; border: 1px solid var(--line); border-radius: 10px; padding: 24px;}
	.login h1 {font-size: 20px; margin: 0 0 16px;}
	.login label {display: block; font-size: 14px; color: var(--muted); margin: 12px 0 4px;}
	.login select, .login input {width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;}
	.login .btn {width: 100%; margin-top: 20px;}
	.login .login_err {color: var(--no); font-size: 14px; margin: 8px 0 0;}
body.in .login {display: none;}
body:not(.in) .top, body:not(.in) .wrap {display: none;}

/* Buttons: */
.btn {font: inherit; border: 1px solid var(--text); background: var(--text); color: var(--bg); border-radius: 6px; padding: 8px 14px; cursor: pointer;}
	.btn.alt {background: var(--bg); color: var(--text); border-color: var(--line);}

/* Small pill, only for a state the client must not miss: */
.pill {display: inline-block; font-size: 12px; font-weight: 400; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; vertical-align: middle;}

/* Overview numbers: */
.stats {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 32px;}
	.stats a {display: block; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; color: inherit; text-decoration: none; cursor: pointer;}
	.stats b {display: block; font-size: 26px;}
	.stats span {color: var(--muted); font-size: 14px;}
/* A link that opens a rule in the modal or a closed question, not a page: dotted underline: */
a[data-rule-open], a[data-q-open] {text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;}

.feed {list-style: none; margin: 0 0 32px; padding: 0;}
	.feed:empty {display: none;}
	[data-closed-empty] {margin: 0 0 32px;}
	.feed li {padding: 10px 0; border-bottom: 1px solid var(--line);}
	.feed li:last-child {border-bottom: 0;}
	.feed .when {color: var(--muted); font-size: 14px; display: block;}
	.feed li.commit {display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline;}
		.feed li.commit .ago {color: var(--muted); font-size: 13px; white-space: nowrap;}
	.feed a, .wrap p > a {color: inherit; cursor: pointer;}
	.feed li.code a {color: var(--code);}
[data-page="commitid"] h2 {font-size: 16px; margin: 24px 0 4px;}
	[data-page="commitid"] h2 .count {font-weight: 400; color: var(--muted);}

/* Chart colours, one per series: */
:root {--c_commits: #4a7fc1; --c_hours: #e07b39; --c_questions: #8e5bb5; --c_answers: #d6457a; --c_rules: #1f9bb3;}

/* One chart on the overview: commits as soft columns, hours as a smooth area, questions, answers and rules as lines, values on hover: */
.chart {position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 20px 20px 16px; margin: 0 0 32px;}
	.chart svg {display: block; width: 100%; height: auto; overflow: visible;}
	.chart .grid {stroke: var(--line); stroke-width: 1;}
	.chart rect.s0 {fill: var(--c_commits); opacity: .35;}
	.chart .area {fill: url(#area);}
	.chart path.s1 {fill: none; stroke: var(--c_hours); stroke-width: 2.5;}
	.chart path.s2 {fill: none; stroke: var(--c_questions); stroke-width: 2; stroke-dasharray: 5 4;}
	.chart path.s3 {fill: none; stroke: var(--c_answers); stroke-width: 2;}
	.chart path.s4 {fill: none; stroke: var(--c_rules); stroke-width: 3; stroke-dasharray: 1 6; stroke-linecap: round;}
	.chart circle.s1 {fill: var(--bg); stroke: var(--c_hours); stroke-width: 2.5;}
	.chart circle.s2 {fill: var(--c_questions);}
	.chart circle.s3 {fill: var(--c_answers);}
	.chart circle.s4 {fill: var(--c_rules);}
	.chart text.d {font-size: 12px; text-anchor: middle; fill: var(--muted);}
	.chart rect.hit {fill: transparent; cursor: default;}
	.chart rect.hit:hover {fill: var(--text); opacity: .04;}
	.chart .tip {position: absolute; pointer-events: none; background: var(--text); color: var(--bg); font-size: 13px; line-height: 1.5; border-radius: 8px; padding: 8px 12px; white-space: nowrap; transform: translateX(-50%); z-index: 1;}
		.chart .tip b {display: block;}
	.chart .key {display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 12px 0 0;}
		.chart .key span::before {content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: -1px;}
		.chart .key .s0::before {background: var(--c_commits); opacity: .45; border-radius: 3px;}
		.chart .key .s1::before {height: 0; border-top: 3px solid var(--c_hours); vertical-align: 3px;}
		.chart .key .s2::before {height: 0; border-top: 2px dashed var(--c_questions); vertical-align: 3px;}
		.chart .key .s3::before {height: 0; border-top: 2px solid var(--c_answers); vertical-align: 3px;}
		.chart .key .s4::before {height: 0; border-top: 3px dotted var(--c_rules); vertical-align: 3px;}

/* Modal that shows one rule: */
.modal {position: fixed; inset: 0; z-index: 5; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto;}
	.modal[hidden] {display: none;}
	.modal .box {position: relative; width: 100%; max-width: 760px; background: var(--bg); border-radius: 10px; overflow: hidden;}
	.modal .close {position: absolute; top: 12px; right: 12px; font: inherit; font-size: 22px; line-height: 1; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 8px;}
	.modal .head {display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; background: var(--soft); padding: 16px 56px 16px 20px;}
	.modal .body {padding: 16px 20px 20px;}

/* Filter tabs on the questions and rules pages: */
.tabs {display: inline-flex; gap: 4px; padding: 4px; background: var(--soft); border-radius: 8px; margin: 0 0 24px;}
	.tabs button {font: inherit; font-size: 15px; border: 0; background: none; color: var(--muted); padding: 6px 14px; border-radius: 6px; cursor: pointer;}
	.tabs button.on {background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);}

/* Rules: the era tabs on the left, the switch that hides confirmed rules on the right: */
.filters {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 24px;}
	.filters .tabs {margin: 0;}
.switch {display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); cursor: pointer; user-select: none;}
	.switch input {position: absolute; opacity: 0; pointer-events: none;}
	.switch span {position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--line); transition: background .15s;}
	.switch span::after {content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: transform .15s;}
	.switch input:checked + span {background: var(--text);}
	.switch input:checked + span::after {transform: translateX(16px);}
	.switch input:focus-visible + span {outline: 2px solid var(--text); outline-offset: 2px;}
	.switch:has(input:checked) {color: var(--text);}

/* A rule confirmed, flagged as a problem, or with a new decision to act on: */
details.rule .pill {margin-left: 6px;}
	details.rule .pill.confirmed {color: var(--yes); border-color: var(--yes);}
	details.rule .pill.flag {color: var(--no); border-color: var(--no);}
	details.rule .pill.changed {color: var(--code); border-color: var(--code);}
details.rule .answer {margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line);}

/* The decision of a closed question: */
[data-q] .decision {border: 2px solid var(--code); border-radius: 8px; padding: 12px 16px; margin: 0 0 20px;}
	[data-q] .decision p {margin: 0 0 4px;}
	[data-q] .decision p:last-child {margin: 0;}

/* Choosing an option in a question: */
[data-q] .opt {cursor: pointer;}
	[data-q] .opt.rec {border: 1px solid var(--line);}
	[data-q] .opt.picked {outline: 2px solid var(--code); outline-offset: 3px;}
	[data-q] .opt .pill {margin-left: 6px;}
[data-q].decided .opt {cursor: default;}

/* Answers under a question: */
.answer {margin: 0 0 20px;}
	.thread {list-style: none; margin: 0 0 12px; padding: 0;}
		.thread li {padding: 10px 0; border-bottom: 1px solid var(--line);}
		.thread .who {font-weight: 600;}
		.thread .when {color: var(--muted); font-size: 13px; margin-left: 6px;}
		.thread .chosen {color: var(--muted); font-size: 14px; margin-left: 6px;}
		.thread .mark {font-size: 13px; color: var(--muted); margin-left: 8px; cursor: pointer; text-decoration: underline;}
		.thread li.is_decision {border: 2px solid var(--code); border-radius: 8px; padding: 10px 12px; margin: 4px 0;}
	.answer textarea {width: 100%; min-height: 64px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 0 0 8px; resize: vertical;}
	.answer .acts {display: flex; gap: 8px; flex-wrap: wrap;}
[data-q].decided .answer .form {display: none;}

/* Hours: */
.hours_top {display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin: 0 0 24px;}
	.hours_top b {display: block; font-size: 32px;}
	.hours_top span {color: var(--muted); font-size: 14px;}
	.hours_top .pill {color: var(--muted);}
.ses_head {display: grid; grid-template-columns: 1fr 72px 16px; gap: 16px; color: var(--muted); font-size: 14px; padding: 0 0 6px; border-bottom: 1px solid var(--line);}
	.ses_head span + span {text-align: right;}
details.session {border-bottom: 1px solid var(--line);}
	details.session > summary {cursor: pointer; list-style: none; padding: 14px 0; display: grid; grid-template-columns: 1fr 72px 16px; gap: 16px; align-items: baseline;}
	details.session > summary::-webkit-details-marker {display: none;}
	details.session > summary::after {content: "+"; color: var(--muted);}
	details.session[open] > summary::after {content: "\2212";}
	details.session[open] {border: 1px solid var(--text); border-radius: 10px; padding: 0 20px; margin: 12px 0;}
	details.session[open] > summary {background: var(--soft); margin: 0 -20px 16px; padding: 14px 20px; border-radius: 9px 9px 0 0;}
	details.session .h {white-space: nowrap; font-weight: 600; text-align: right;}
	details.session th.num {text-align: right; white-space: nowrap;}
	details.session td.num {text-align: right; white-space: nowrap;}
	details.session table {margin: 0 0 16px;}
details.session:has(+ details.session[open]) {border-bottom: 0;}

@media (max-width: 640px) {
	.top .in {gap: 12px;}
	.stats {grid-template-columns: repeat(2, 1fr);}
	.ses_head, details.session > summary {grid-template-columns: 1fr 60px 16px; gap: 8px;}
}

/* Topics: the new topic form, and the opening text above a topic's thread: */
.new_topic {border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin: 0 0 24px;}
	.new_topic label {display: block; font-size: 14px; color: var(--muted); margin: 0 0 4px;}
	.new_topic input, .new_topic select, .new_topic textarea {display: block; width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 0 0 14px;}
	.new_topic textarea {min-height: 140px; resize: vertical;}
	.new_topic .acts {display: flex; gap: 8px;}
details.topic .post {margin: 0;}