*, *::before, *::after {
    all: unset;
}

/* hide head */

head, meta, title, link, style, script {
    display: none;
}

/* enable focus outline for accessibility */

:focus-visible {
    outline-color: var(--focus-outline-color, rgb(0, 119, 204));
    outline-width: var(--focus-outline-width, 1px);
    outline-style: auto;
    outline-offset: var(--focus-outline-offset, 0);
}

*, *::before, *::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    display: flex;
}

#shadow-hud-container {
	display: block;
}

#shadow-hud-container * {
	display: block;
}

pre {
  font-family: monospace, monospace; /* consistent monospace */
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre-wrap;   /* allow wrapping if too long */
  word-break: break-word;  /* prevent overflow */
  background: #f5f5f5;     /* subtle background */
  padding: 0.75rem 1rem;
  border-radius: 6px;
  overflow-x: auto;        /* scroll horizontally if needed */
}

html {
    block-size: 100%;
}

body {
    flex: 1;
    font-family: sans-serif;
    bottom: 300px;
    font-family: "Tomato Grotesk";
    font-weight: 400;
}

#app {  }

#top-bar {
	background: #0c0c0c;
	padding: 8px 16px;
	justify-content: space-between;
	align-items: center;
}

#top-bar h1 {
	color: white;
}

#app>.page {
	padding: 16px;
}

.block {
	display: block;
}

.column {
	flex-direction: column;
	width: 100%;
}

table {
	border-radius: 6px;
	overflow: hidden;
	display: table;
	background: white;
	filter: drop-shadow(0px 1px 10px rgba(0,0,0,0.05));
	margin-bottom: 8px;
	margin-right: 8px;
	width: 100%;
}

table table table {
	filter: none;
}

tr {
	display: table-row;
}

tbody {
	display: table-row-group;
}

thead {
	display: table-header-group;
}

tfoot {
	display: table-footer-group;
}

th, td {
	display: table-cell;
	padding: 4px 8px;
}

th {
	font-weight: 600;
	background: #eee;
	text-align: right;
	align-items: center;
	width: 10ch;
}

.vspace {
	margin-top: 1em;
}


button {
	display: inline-flex;       /* flex enables centering */
  	align-items: center;        /* vertical center */
  	justify-content: center;   
  	border-radius: 8px;
	border: 1px solid #ccc;
	background: #eee;
	padding: 0.5em 0.75em;
	margin: 6px;
	justify-content: space-around;
}

button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

input:hover, select:hover, button:not(:disabled):hover {
	border: 1px solid black;
}

audio {
	min-width: 40ch;
	height: 2em;
	display: block;
}

a {
	color: #4500a6;
}

a:hover {
	text-decoration: underline;
}

a:active {
	transform: translate(1px,1px);
}

input {
	border: 1px solid #ccc;
	height: 100%;
	flex: 1;
	padding: 2px 5px;
}

input[type=number] {
	width: 6ch;
}

input[type=text] {
	width: 100%;
}

button:not(:disabled):active {
	transform: translate(1px,1px);
}

details {
	margin: 0 0;
	width: 100%;
	padding: 0;
	display: inline-flex;
}

details>summary::before {
	border: 1px solid #888;
	border-radius: 4px;
	width: 1.4em;
	height: 1.4em;
	display: inline-block;
	text-align: center;
	content: "▸";
	margin-right: 8px;
	vertical-align: center;
	align-items: center;
}


details[open]>summary>span {
	display: none;
}


details[open]>summary::before {
	content: "▾";
}

details[open]>summary::after {
	content: "";
}

select {
  border: 1px solid #ccc;
  padding: 4px 2rem 4px 6px; /* right padding for arrow space */
  appearance: none;          /* removes native arrow */
  background: white url("data:image/svg+xml;utf8,<svg fill='black' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 0.5rem center;
  background-size: 1rem;
  border-radius: 4px;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}

h1 { font-size: 200% }
h2 { font-size: 150% }
h3 { font-size: 125% }
h4 { font-size: 112% }

.deemph {
	color: #666;
	font-style: italic;
}

.breadcrumbs {
	margin-top: 2em;
	font-size: 125%;
	font-weight: bold;
}

.breadcrumbs *:not(:last-child)::after {
	content: "/";
	color: #ccc;
	margin-left: 0.2em;
	margin-right: 0.2em;
}

.TimePoint tbody {
	display: flex;
	flex-direction: row;
}

.TimePoint th {
	font-size: 85%;
	font-weight: normal;
}

.storage {
	border: 2px dashed #ccc;
	padding: 1em 2em;
	border-radius: 2em;
	background: white;
	align-items: center;
}

.storage.uploading {
	pointer-events: none;
}

.storage.dragging {
	border: 2px dashed black;
	transform: translate(0px -1px);
}

.storage > * {
	justify-content: center;
	align-items: center;
	display: flex;
}

.storage .spinner {
	display: none;
}

.storage.uploading .spinner {
	display: flex;
}

.storage.uploading .asset {
	display: none;
}

.storage.uploading .upload {
	display: none;
}

.storage:hover {
	background: #eee;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.3s;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;       /* Light gray background */
  border-top: 6px solid #3498db; /* Blue top */
  border-radius: 50%;           /* Circle */
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}