/* InterDirector's brand (brand/README.md, Website/src/styles/tokens.css): ink, paper and coral,
   Space Grotesk and JetBrains Mono. Coral is the one accent; ink text on it, never white. */
@font-face {
	font-family: 'Space Grotesk';
	src: url('/static/fonts/SpaceGrotesk-latin.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('/static/fonts/JetBrainsMono-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: dark;

	/* Brand */
	--ink:           #0b0b0d;
	--panel:         #131316;
	--panel-raised:  #1b1b1f;
	--paper:         #f6f5f3;
	--coral:         #fa705c;
	--coral-hi:      #ff8a78;
	--line:          rgb(246 245 243 / 0.09);
	--line-strong:   rgb(246 245 243 / 0.18);
	--font-sans:     'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Base palette */
	--bg:            var(--ink);
	--fg:            var(--paper);
	--muted:         rgb(246 245 243 / 0.68);
	--dim:           rgb(246 245 243 / 0.52);
	--link:          var(--coral-hi);

	/* Cards */
	--card-bg:       var(--panel);
	--card-title-bg: var(--panel-raised);
	--card-border:   var(--line);
	--field-bg:      var(--ink);
	--radius:        10px;

	/* Status colours */
	--ok:            #5bd68a;
	--ok-strong:     #1f8a4c;
	--warn:          #ffc04d;
	--err:           #ff6b6b;
	--live:          #e0294f; /* on air, recording, stop: white text on it */

	/* Input ingest badge */
	--ingest-up-bg:   rgb(91 214 138 / 0.16);
	--ingest-up-fg:   var(--ok);
	--ingest-down-bg: rgb(255 107 107 / 0.14);
	--ingest-down-fg: var(--err);

	/* Buttons */
	--btn-bg:        var(--panel-raised);
	--btn-bg-hover:  var(--coral);
	--btn-fg-hover:  var(--ink);
	--btn-border:    var(--line-strong);
	--btn-fg:        var(--paper);
	--btn-shadow:    0 0 10px #00000038;
	--btn-stop-bg:   var(--live);

	--btn2-bg:       var(--panel);
	--btn2-fg:       var(--muted);
	--btn2-border:   var(--line-strong);

	/* An output's colour: its card, its badge on the preview and its row on the status page */
	--out1:          #5e305e;
	--out2:          #2f595f;
	--out3:          #686835;
	--out4:          #3d6934;
	--out5:          #581e1e;
	--out6:          #2a2a31;
	--out1-card:     #2c1a2c;
	--out2-card:     #172b2e;
	--out3-card:     #2e2614;
	--out4-card:     #1a2b17;
	--out5-card:     #2e1616;

	/* Overlays */
	--overlay-bg:    rgb(11 11 13 / 0.88);
	--progress-bg:   var(--panel-raised);
	--progress-fill: var(--coral);

	/* Preview controls */
	--pc-bg:         rgb(11 11 13 / 0.6);
	--pc-border:     var(--line-strong);
	--pc-btn-bg:     var(--panel-raised);
	--pc-btn-hover:  #26262b;
	--pc-btn-border: var(--line-strong);
	--slider-track:  var(--line-strong);
	--slider-thumb:  var(--paper);
	--thumb-border:  var(--ink);
	--preview-bg:    #000000;

	/* Toggle */
	--toggle-bg:     rgb(246 245 243 / 0.22);
	--toggle-knob:   var(--paper);
}

body * {
	transition:
	color 0.25s ease,
	background-color 0.25s ease,
	border-color 0.25s ease,
	box-shadow 0.25s ease,
	filter 0.25s ease,
	opacity 0.25s ease,
	transform 0.25s ease;
}

/* Layout & typography */
body {
	font-family: var(--font-sans);
	margin: 24px;
	color: var(--fg);
	background-color: var(--bg);
	font-size: 14px;
}
h1 { margin-top: 0; font-size: 1em; }
a { color: var(--link); }
code, pre, textarea { font-family: var(--font-mono); }
input[type=radio], input[type=checkbox] { accent-color: var(--coral); }

.grid_main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
/*		margin-bottom: 20px; */
}

.content_wrapper {
	display: flex;
	align-content: flex-start;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}
.block_1 { flex: 0.5; }
.block_2 { flex: 1; }

.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; }
.space-between { justify-content: space-between; padding-top: 4px; }

label { display: block; font-weight: 600; margin: 6px 0 4px; }
input[type=text], input[type=password], input[type=file] {
    width: 100%;
    padding: 8px;
    color: var(--fg);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--field-bg);
    font-family: inherit;
}

input[type=file] {
	width: initial;
    flex: 1;
}

.grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	align-items: start;
}

.muted { color: var(--muted); font-size: 0.95em; }

/* Cards */
.card {
border: 1px solid var(--card-border);
    background-color: var(--card-bg);
    border-radius: var(--radius);
    /* padding: 16px; */
    display: flex;
    /* gap: 6px; */
    flex-direction: column;	
}
.card.out_1 { background-color: var(--out1-card); border-color: var(--out1); }
.card.out_2 { background-color: var(--out2-card); border-color: var(--out2); }
.card.out_3 { background-color: var(--out3-card); border-color: var(--out3); }
.card.out_4 { background-color: var(--out4-card); border-color: var(--out4); }
.card.out_5 { background-color: var(--out5-card); border-color: var(--out5); }

.card.out_1, .card.out_2, .card.out_3, .card.out_4, .card.out_5 {
	filter: grayscale(0.5);
}
.card.active {
	filter: grayscale(0) !important;
	/* border: 1px solid var(--btn-bg-hover); */
}

/* Service status text */
/* .status_wrap { margin-bottom: 10px; } */
.status { font-weight: 600; }
.status.inactive   { color: var(--muted); }
.status.connecting { color: var(--warn); }
.status.active_ok,
.status.active     { color: var(--ok); }

/* Input ingest badge */
.badge { display:inline-block; padding:4px 8px; border-radius: 999px; font-weight:600; }
.up   { background: var(--ingest-up-bg);   color: var(--ingest-up-fg); }
.down { background: var(--ingest-down-bg); color: var(--ingest-down-fg); }

/* Buttons */
.btn {
	padding: 6px 12px;
	border: 1px solid var(--btn-border);
	border-radius: 6px;
	background: var(--btn-bg);
	cursor: pointer;
	font-weight: 600;
	font-family: inherit;
	color: var(--btn-fg);
	box-shadow: var(--btn-shadow);
}
.btn:hover { 
	background: var(--btn-bg-hover);
    color: var(--btn-fg-hover);
    border-color: var(--btn-bg-hover);
}
.btn.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	filter: grayscale(35%);
	background: var(--btn-bg) !important;
	pointer-events: none;
}
.btn_secondary {
	background: var(--btn2-bg);
	color: var(--btn2-fg);
	border: 1px solid var(--btn2-border);
	font-size: 90%;
	font-weight: normal;
}
.btn.btn-stop {
	background: var(--btn-stop-bg);
	border-color: var(--btn-stop-bg);
}
.btn.btn_primary {
	background: var(--coral);
	border-color: var(--coral);
	color: var(--ink);
}
.btn.btn_primary:hover { background: var(--coral-hi); border-color: var(--coral-hi); }
.btn.btn-start {
	/* background: var(--btn-start-bg); */
}	

.small { font-size: 0.9em; }
.checkbox-row { display:flex; align-items:center; gap:6px; }
.section-title { margin-bottom:6px; }
.btn-link { text-decoration:none; display:inline-block; }

/* Notice toast */
/* Notice toast (now a blocking overlay like others) */
.notice {
	position: fixed;
	bottom: 0 !important;
	left: 15%;
	right: 15%;
	height: auto;
	border-radius: 10px 10px 0px 0px;
	/* box-shadow: 0px 0px 30px #3a3a3a; */ 
	/* inset: 0; */
	background: var(--overlay-bg);
	color: var(--fg);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	flex-direction: column;
	font-size: 1.25em;
	text-align: center;
	gap: 12px;
	padding: 24px;
	border: 4px solid var(--bg);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--fg);
	text-decoration: none;
	margin-bottom: 6px;
}
.brand img { width: 30px; height: 30px; }
.brand .wordmark { font-size: 22px; letter-spacing: -0.01em; line-height: 1; }
.brand .wordmark .light { font-weight: 300; }
.brand .wordmark .bold { font-weight: 700; }
.brand .wordmark .product { font-weight: 500; color: var(--coral-hi); }
/* A phone's top bar keeps the product's own name: the time left and the buttons need the room. */
@media (max-width: 520px) { .brand .wordmark .maker { display: none; } }

/* Preview badges */
.bades_wrapper {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	gap: 10px;
	z-index: 10;
	flex-wrap: wrap;
}
.status-badge {
	padding: 4px 8px;
	font-size: 0.9em;
	font-weight: bold;
	color: var(--paper);
	border-radius: 4px;
	pointer-events: none;
	border: 1px solid var(--ink);
}
.status-badge.out_1 { background-color: var(--out1); }
.status-badge.out_2 { background-color: var(--out2); }
.status-badge.out_3 { background-color: var(--out3); }
.status-badge.out_4 { background-color: var(--out4); }
.status-badge.out_5 { background-color: var(--out5); }
.status-badge.out_6 { background-color: var(--out6); }
.status-badge.connecting { opacity: 0.6; }

/* Upload overlay & progress */
.upload-overlay {
	position: fixed; inset: 0;
	background: var(--overlay-bg);
	color: var(--fg);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	flex-direction: column;
	font-size: 1.25em;
	text-align: center;
	gap: 12px;
	background-image: url(/static/spinner.svg);
	background-position: center 35%;
	background-repeat: no-repeat;
	background-size: 120px;		
}
.upload-overlay .progress-bar {
	width: 80%;
	max-width: 600px;
	background: var(--progress-bg);
	border-radius: 6px;
	overflow: hidden;
	height: 24px;
}
.upload-overlay .progress-bar-inner {
	width: 0;
	height: 100%;
	background: var(--progress-fill);
	transition: width 0.2s;
}

.col-s { flex: 1; }
textarea { width: 100%; overflow: auto; height: 100px; }

/* Minimal preview controls */
.preview-controls {
	display: flex;
	gap: 8px;
	align-items: center;
	background: var(--pc-bg);
	border: 0 solid var(--pc-border);
	border-radius: 6px;
	padding: 6px 8px;
	z-index: 20;
	backdrop-filter: blur(2px);
}
.preview-controls .btn {
	padding: 4px 8px;
	font-weight: 600;
	border-radius: 6px;
	background: var(--pc-btn-bg);
	border: 1px solid var(--pc-btn-border);
	color: var(--fg);
	box-shadow: none;
}
.preview-controls .btn:hover { background: var(--pc-btn-hover); color: var(--fg); border-color: var(--pc-btn-border); }

.preview-controls input[type="range"] {
	appearance: none;
	-webkit-appearance: none;
	background: var(--slider-track);
	width: 120px;
	height: 4px;
	border-radius: 999px;
	outline: none;
}
.preview-controls input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--slider-thumb);
	border: 1px solid var(--thumb-border);
	margin-top: -2px;
}
.preview-controls input[type="range"]::-moz-range-thumb {
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--slider-thumb);
	border: 1px solid var(--thumb-border);
}

.preview-controls .icon { font-size: 14px; line-height: 1; }

video {
	box-shadow: var(--btn-shadow);
}

input[type="radio"] {
	vertical-align: middle;
	position: relative;
	top: -2px;
}

#previewVideo {
	background-image: url("/static/no-signal.svg");
	background-size: 30%;
	background-position: center center;
	background-repeat: no-repeat;
}
#previewVideo.input_ok {
	background-image: url("/static/spinner.svg");
	background-size: 30%;
	background-position: center center;
	background-repeat: no-repeat;
}
.blur_me.blurred {
	filter: blur(3px);
	user-select: none;
	pointer-events: none;
}

.top-bar {
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 12px;	
}
.top-buttons, .top-buttons button {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-content: center;
	align-items: center;
	font-size: 14px !important;
	line-height: 1 !important;
}
label.radio_selected {
	font-weight: 600;
	color: var(--ok);        /* bright for dark UI */
}

label.disabled.radio_selected {
	opacity: 0.9;       /* still visible even if disabled */
}
.radio[checked] {
	position: relative;
	height:1em;
	width: 1em;
	box-sizing: border-box;
	margin: 0;
		&:after {
		position: absolute;
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: var(--coral);
	}
}
.switcher_journal {
    width: 100%;
    background: var(--ink);
    border: 1px solid var(--line);
    padding: 1em;
    font-size: 0.85em;
    color: var(--muted);
    box-sizing: border-box;
    border-radius: 6px;
    white-space: pre-wrap;
    font-family: var(--font-mono);
    line-height: 1.35;
    max-height: 400px;
    overflow-y: scroll;
}
.hideme {
opacity: 0 !important;
display: none;
}
#INSTAGRAM_LAYOUT_PHOTO {
	height: 335px;
	width: auto;
}
#ingest-badge {
    font-size: 0.8em;
}
.loop-preview {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover;
	border-radius: 10px;
}
span.green {
	color: var(--ok);
}
span.orange {
	color: var(--warn);
}
span.red {
	color: var(--btn-stop-bg);
}
.card-title {
    background: var(--card-title-bg);
    padding: 10px;
    width: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
    border-radius: var(--radius) var(--radius) 0px 0px;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.card-inner {
	padding: 16px;
    display: flex;
    gap: 6px;
    flex-direction: column;
}
.portrait-cards-wrap {
	grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 20px;
}
.rotate-settings-wrap {
    display: flex;
    flex-direction: column;
}
.portrait-cards-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.alternate_header {
    grid-column: 1 / -1;
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    font-weight: bold;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 10px;
    border-radius: var(--radius);
}
.toggle-wrap {
	display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 12px;
}
button.toggle {
    display: block;
    height: 30px;
    width: 60px;
    border-radius: 100px;
    background: var(--toggle-bg);
    border: 0;
    position: relative;
    transition: 300ms;
}
button.toggle:hover {
	cursor: pointer;
}
.toggle .toggle-inner {
    display: inline-block;
    height: 22px;
    width: 28px;
    background: var(--toggle-knob);
    border-radius: 100px;
    position: absolute;
    left: 4px;
    top: 4px;
    transition: 300ms;
}
button.toggle.optimistic {
	opacity: 0.5;
	pointer-events: none;
    animation: optimisticPulse 0.6s ease-in-out infinite;
}

/* Pulse between 0.5 → 0.9 → 0.5 */
@keyframes optimisticPulse {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.5;
    }
}
button.toggle.enabled {
	background: var(--ok-strong);
}
.toggle.enabled .toggle-inner, .toggle.optimistic .toggle-inner {
	left: calc(50% - 2px);
}
.on-air-badge {
    border-radius: 4px;
    content: "ON AIR ●";
    padding: 4px 8px;
    border: 2px solid var(--line-strong);
    color: var(--dim);
    background: var(--panel-raised);
    font-size: 0.8em;
    font-weight: 900;
    transition: 500ms;
}
.card.active .on-air-badge {
    border: 2px solid var(--live);
    color: var(--paper);
    background: var(--live);
}
.loop-preview-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
}
.loop-preview-details {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 4px;
    background: var(--overlay-bg);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
	border-radius: 10px;
}
.login-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

body.mobile_page {
	display: flex;
    flex-direction: column;
    align-items: center;
}

.main_mobile_wrap {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 1.1em;
}

.main_mobile_wrap .statuses_wrapper {
	display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    gap: 0.8em;
    width: 100%;
    margin-top: 2em;
}

.statuses_wrapper .status {
	width: 100%;
    padding: 8px 12px;
    background: var(--ink);
    border-radius: 6px;
    text-align: center;
    filter: grayscale(1);
    border: 1px solid transparent;
    transition: 800ms;
    box-sizing: border-box;
}

.statuses_wrapper .status.enabled {
	filter: grayscale(0);
	border: 1px solid var(--ok);
    box-shadow: 0px 0px 20px rgb(91 214 138 / 0.45);
}

.status.input {
	background: var(--ok);
	color: var(--ink);
}

.status.out1 {
	background: var(--out1);
}

.status.out2 {
    background: var(--out2);
}

.status.out3 {
    background: var(--out3);
}

.status.out4 {
    background: var(--out4);
}

.status.out5 {
    background: var(--out5);
}

.status.out6 {
    background: var(--out6);
}

.system_stats_wrapper {
	margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.8em;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 8px;
    border-radius: 6px;
}

@media (max-width: 992px) {
	.hide_on_mobile {
		display: none !important;
	}
}
/* Elements the pages style by these classes instead of inline colours */
.preview-video { width: 100%; background-color: var(--preview-bg); aspect-ratio: 16 / 9; border-radius: 6px; }
.rec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); border: 1px solid var(--ink); box-shadow: var(--btn-shadow); }
.rec-dot.recording { background: var(--live); }
.login-error { color: var(--err); margin-bottom: 8px; }
.recording-row { justify-content: space-between; border-bottom: 1px solid var(--line); padding: 4px 0; }
.recording-row a { color: var(--fg); text-decoration: underline; }

/* The time left on the switcher's hours, beside the version; coral in its last half hour. */
.time-left { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-left.near { color: var(--coral-hi); }