/*
table {
    border-spacing: 1em 1em;
}
*/

/* ------------------ user summary layout ------------------ */

/*
.user-summary .user-avatar-box {
	margin-bottom: 0;
	flex: 0 0 auto;
}

.user-summary .user-avatar {
	width: 128px;
	height: 128px;
	border-radius: 0;       /* rectangular avatar /
	object-fit: cover;
	display: block;
}

.user-summary .user-summary-fields {
	flex: 1 1 auto;
}

.user-summary .user-line {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0.1rem 0;
}
*/

/* override global .label flex nonsense just inside the summary box */
/*
.user-summary .label {
	display: inline-block;
	font-weight: 600;
	min-width: 5rem;        /* keeps values nicely aligned /
	white-space: nowrap;
}

.user-summary .value {
	flex: 1 1 auto;
	min-width: 0;
}
*/

/* ------------------ lebensraum -------------------- */
/* more breathing room in user summary + details */
/*
.user-summary {
	xxxline-height: 1.5;
}

.user-details .userinfo {
	border-collapse: collapse;
	line-height: 1.5;
}

.user-details .userinfo td {
	padding: 0.35em 0.75em 0.35em 0;
}
*/

/* --- user summary layout overrides -------------------------------- */

.user-summary .user-line {
	margin-bottom : 0.5em ;
}

/* row container: avatar left, fields right, same height */
.user-summary .user-summary-layout {
	display: flex;
	align-items: stretch;      /* stretch children to same height */
	zzzgap: 2em;                  /* space between avatar and text */
}

/* stretch avatar column to full height of the layout */
.user-summary .user-avatar-box {
	flex: 0 0 auto;
	align-self: stretch;
	margin-right : 1em ;
}

/* avatar fills its column vertically, keeps aspect ratio */
.user-summary .user-avatar {
	height: 100%;
	width: auto;
	max-width: 160px;          /* safety so it doesn’t get huge on wide screens */
	border-radius: 0;          /* rectangular, no circular crop */
	object-fit: cover;
	display: block;
	margin-right: 1.5rem;
}

/* put the heading at the top, close to avatar top */
/*
.user-summary h2 {
	margin-top: 0;
	margin-bottom: 0.75rem;
}
*/

/* labels + values: more breathing room between lines */
/*
.user-summary .user-line {
	margin: 0.3rem 0;
}
*/

/* keep labels in a neat left column, override global .label flex junk */

.user-summary .label {
	display: inline-block;
	font-weight: 600;
	min-width: 5rem;
	white-space: nowrap;
	margin-right: 0.75rem;
}

/* slightly larger line-height overall in summary box */
/*
.user-summary {
	zzzline-height: 1.6;
}
*/

/* --- global card heading tweak: reduce huge top gap ---------------- */
/*
.card h2:first-child {
	zzzmargin-top: 0.1rem;        /* kill the giant default h2 top margin //
}
*/

/* ------------------ fix toast shit ---------------- */

button.toast-close {
    background: #9cfd;
	margin-left: 0.5em ;
    opacity: 1;
}

.toastify.imgtoast {
	background : #112;
	border : 1px solid #ddd;
}

.imgtoast button.toast-close {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

/* ------------------ fix pico shit ---------------- */

button, button[type] {
	border: revert ;
	xxcolor-scheme: light ;
    border-top: 1px solid #545454;
    border-left: 1px solid #545454;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

button[type=submit]
{
	width : auto ;
}

input[type=number] {
	padding : 0 ;
}

input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=number]), select, textarea 
{
	margin-bottom: unset ;
	padding: 0.2em 1em ;
}

input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=number])
{
	height: unset ;
	background : #ddd ;
	color : black ;
}

label {
	display : inline-block ;
}

[data-tooltip][data-tooltip] {
	--comment: increase specifity with double rule, css assholes;
	border-bottom: revert;
}

[data-tooltip]:not(button):after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" height="2em" width="2em" fill="%23ddd"><path d="M511.83-256.83Q524-269 524-286.67q0-17.66-12.17-29.83-12.16-12.17-29.83-12.17-17.67 0-29.83 12.17Q440-304.33 440-286.67q0 17.67 12.17 29.84 12.16 12.16 29.83 12.16 17.67 0 29.83-12.16Zm-65.16-136.5h64q0-28.34 6.83-49 6.83-20.67 41.17-50.34 29.33-26 43-50.5 13.66-24.5 13.66-55.5 0-54-36.66-85.33-36.67-31.33-93.34-31.33-51.66 0-88.5 26.33Q360-662.67 344-620l57.33 22q9-24.67 29.5-42t52.5-17.33q33.34 0 52.67 18.16 19.33 18.17 19.33 44.5 0 21.34-12.66 40.17-12.67 18.83-35.34 37.83-34.66 30.34-47.66 54-13 23.67-13 69.34ZM480-80q-82.33 0-155.33-31.5-73-31.5-127.34-85.83Q143-251.67 111.5-324.67T80-480q0-83 31.5-156t85.83-127q54.34-54 127.34-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82.33-31.5 155.33-31.5 73-85.5 127.34Q709-143 636-111.5T480-80Zm0-66.67q139.33 0 236.33-97.33t97-236q0-139.33-97-236.33t-236.33-97q-138.67 0-236 97-97.33 97-97.33 236.33 0 138.67 97.33 236 97.33 97.33 236 97.33ZM480-480Z"/></svg>');
    opacity: 1;
    position: revert;
    display: inline;
    border: 0;
    margin-left: 0.5em;
    font-size: 1em;
    --width: 1em doesnt matter svg ignores;
    --height: 1em doesnt matter svg ignores;
    vertical-align: middle;
}

details summary:not([role]) ,
details summary:focus:not([role]) ,
details[open]>summary:not([role]):not(:focus)
{
    color: unset ;
}

/* ------------------------------------------------- */

:root {
	--bg: #0b1020;
	--bg-card: #161b2b;
	--accent: #4cc9f0;
	--accent-soft: rgba(76, 201, 240, 0.15);
	--accent-strong: #f72585;
	--text: #edf2ff;
	--text-soft: #ddd;
	--OLDtext-soft: #adb5bd;
	--border: #343a40;
	--error: #ff6b6b;
	--radius: 12px;
	--shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
	--space: 1rem;
	--space-sm: 0.5rem;
	--space-xs: 0.25rem;
	--transition-fast: 0.15s ease-out;
}+


*,
*::before,
*::after {
	box-sizing: border-box;
}

main {
	position : relative ;
}

/* ---------------------- new styles { ---------------------- */

html, body.dark, main.page {
	background: #003 ;
	color : #eee ;
}

.hidden { display : none }

.dark h1,
.dark h2,
.dark h3,
.dark h4 {
    color: #fd6e;
    color: #db4;
}

h1 svg {
	--comment : for icons in page title ;
    height: 1em;
    width: 1em;
    vertical-align: top;
}

img.banner	{
	height : 30vh;
	margin-bottom : 2em ;
}

button ,
[type=button] ,
[type=submit] 
{
    border-radius: 0.5em;
    font-size: large;
	font-weight : bold ;

	margin-right : 0.5em;
	margin-bottom: 0.5em;
    padding: 0.3em 1em;
	xxpadding: 0.1em 0.4em;
	vertical-align: top ;

    background: #348;
    background: #339;
    background: #35a;
}

#site-controls {
    position: absolute;
    right: 0.5em;
    top: 0;
	z-index: 999;
	height : 2.3em ;
}

#site-controls a {
	text-decoration: none;  /* remove floating underline artifacts */
}

#site-controls button {
	height : 100% ;
}

button.login , button.upload {
    background: lightskyblue;
    font-weight: bold;
	color : black;
}

.actions button {
    margin-bottom: 1em;
    margin-right: 1em;
}

button.logout {
    background: #800;
}

button.cancel {
    background: #faa;
	color : black ;
	margin-left : 1em ;
}

button.save {
    background: #6d6;
	color : black ;
}
.save.disabled {
    opacity: 0.5;
	background: #999;
    pointer-events: none; 
}

button.icon {
	height : 1.8em ;
	padding : 0.1em 0.3em ;
	vertical-align : baseline ;
}

button.icon svg
{
    fill: #ddd;
    height: 100%;
	vertical-align : top ;
}

button.text ,
button.both {
	color : #ddd ;
}

button.both svg {
    height: 1.5em;
    vertical-align: top;
    margin-left: 0.5em;
}

button.town-add {
    XXXXposition: absolute;
    bottom: 0.8em;
    right: 0.5em;
}

button#pwtoggle {
    height: revert;
	background : #444;
    width: 3em;
    margin-bottom: 0;
    margin-right: 0;
}

a.team ,
a.team:visited
{
    color: #dd8;
    border-bottom: 1px dashed;
}

.town-item .team
{
	margin-left : 1em ;
}

/*
.town-team a ,
.town-team a:visited {
	--com : settings to make team labels look clickable ;
    background: #339;
    color: #dd8;
    padding: 0.5em;
    border-radius: 10px;
    font-weight: bold;
    margin-left: 0.5em;
}
*/

#pwchange-dialog {
}

#toggle-debug {
	position : relative ;
	bottom : 1em ;
	left : 90vw ;
	border : none ;
	background : #348e ;
}

#debug-log {
    background: #ccc;
    padding: 1em;
    max-width: 90vw;
    border-radius: 0.5em;
    width: fit-content;
    min-width: 40em;
    margin: auto;
}
#debug-log * {
    color: black;
    background: #ccc;
}

/* actions hold buttons.  leave more space above */
.actions {
    padding-top: 1em;
}

#login.page {
	max-width : 40em ;
	margin: 2rem auto;
}

#login-card #login-discord {
    xxxposition: absolute;
    right: 1em;
    bottom: 1em;
}

/* ----- password strength ----- */

.strength-row {
	display     : flex;
	align-items : center;
	gap         : 0.5em;
	margin-top  : 4px;
}
/*
.strength-bar {
	flex          : 1;
	height        : 6px;
	border-radius : 3px;
	background    : #333;
	transition    : background 0.3s, width 0.3s;
	width         : 0%;
}
*/

.strength-wrap {
	flex       : 1;
	background : #333;
	height     : 6px;
	border-radius : 3px;
}

.strength-bar {
	height        : 6px;
	border-radius : 3px;
	background    : #333;
	transition    : background 0.3s, width 0.3s;
	width         : 0%;
}

.strength-text {
    margin-top : 1em;
	color      : #888;
}

.strength-bar.very-weak   { background : #e74c3c ; width : 20%  }
.strength-bar.weak        { background : #e67e22 ; width : 40%  }
.strength-bar.fair        { background : #f1c40f ; width : 60%  }
.strength-bar.strong      { background : #2ecc71 ; width : 80%  }
.strength-bar.very-strong { background : #27ae60 ; width : 100% }

.strength-text.very-weak   { color : #e74c3c }
.strength-text.weak        { color : #e67e22 }
.strength-text.fair        { color : #f1c40f }
.strength-text.strong      { color : #2ecc71 }
.strength-text.very-strong { color : #27ae60 }

.length-box {
	display     : flex;
	align-items : center;
	gap         : 0.25em;
	white-space : nowrap;
	color       : #888;
	height      : 1em ;
}

.length-box .len-icon {
	width  : 2em;
	height : 2em;
}

.length-box .len-icon.ok   { fill : #2ecc71 }
.length-box .len-icon.fail { fill : #e74c3c }

/* ---------------------------------------------------------- */

nav.tabs {
	border-bottom: 1px solid #ddd;
	margin-bottom: 1em;
}

nav.tabs li {
	border : 1px solid #ddd;
    border-radius: 5px;
    margin-left: 1em;
	opacity : 0.8 ;
	padding : 0.5em 1em ;
    position: relative;
    bottom: -1px;
}

nav.tabs li.active {
    border-bottom: none;
    background: #131828;
    position: relative;
    bottom: -2px;
	opacity : 1 ;
}

.card.newuser .showexisting  { display : none ; }
.card.existing .shownew      { display : none ; }

details.expand  {
    margin: 2em 0;
}

details.expand summary {
    font-size: xx-large;
    color: #db4 !important ;
    line-height: 150%;
}

/* ---------------------- new styles } ---------------------- */

body {
	color: var(--text);
}

a {
	color: dodgerblue;
    text-decoration: none;
}
a:visited { color: #c6c; }

table th {
	text-align : left ;
}

table.duration-table {
    border-collapse: separate;
    border-spacing: 1em;
}

.page {
	max-width: 90vw ;
	min-width: 40vw ;
	width: fit-content ;
	margin: 2rem auto;
	padding: 0 1rem 2rem;
}

.page-header {
	text-align: left;
	margin-bottom: 1.5rem;
}

.page-header h1 {
	margin: 0 0 0.5rem 0;
	font-size: 1.9rem;
}

.page-header p {
	margin: 0;
	color: var(--text-soft);
}

.subtitle {
	color: var(--text-soft);
	margin-top: 0.25rem;
}

.card {
	xxxxbackground: linear-gradient(135deg, rgba(22, 27, 43, 0.98), rgba(12, 16, 30, 0.98));
	background: #131828 ;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1rem 1.5rem;
	margin-bottom: 1.5rem;
	border: 1px solid rgba(148, 163, 184, 0.25);
	position: relative ;
}

.form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-row {
	display: flex;
	flex-direction: row;
	gap: 0.8rem;
}

.form-row-actions {
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

.label {
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.label-note {
	font-weight: 400;
	color: var(--text-soft);
}

.input {
	XXXwidth: 100%;
	padding: 0.5rem 0.6rem;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: rgba(15, 23, 42, 0.9);
	color: var(--text);
	font-size: 0.95rem;
	outline: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.35);
	XXbackground: rgba(15, 23, 42, 1);
}

.input.error {
	border-color: var(--error);
}

input {
    background: #ddd;
    border-radius: 10px;
    padding: 0.5em;
    letter-spacing: 1px;
}

.hint {
	color: var(--text-soft);
}

.error-message {
	color: var(--error);
	min-height: 1em;
}

.status-text {
	color: var(--text-soft);
}

button.login {
	border: none;
	border-radius: 1em;
	padding: 0.45rem 1.2rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.button.primary {
	background: skyblue;
	color: #black;
	box-shadow: 0 10px 30px rgba(76, 201, 240, 0.35);
	font-weight: 600 ;
}

.button.primary:hover {
	background: #5ad3f6;
	transform: translateY(-1px);
	box-shadow: 0 14px 32px rgba(76, 201, 240, 0.5);
}

.button.secondary {
	background: midnightblue;
	border: 1px solid var(--border);
	color: var(--text-soft);
}

.button.secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.button:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
	box-shadow: none;
	background : #ccc;
}

/* suggestions */

.suggestions {
	margin-top: 0.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.suggestion-pill {
	border-radius: 0.7em;
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	background: rgba(15, 23, 42, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.5);
	color: var(--text-soft);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.suggestion-pill:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
}

/* ----------------- upload page ------------------------ */

.card.upload {
    width: min(40em, 98vw);
}

/* file list */

.file-list {
	color: var(--text-soft);
	margin-top: 0.25rem;
}

.file-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 6px;
	padding: 0.25rem 0.5rem;
	background: rgba(15, 23, 42, 0.7);
	margin-bottom: 0.1rem;
}

#upload-town-list {
    font-size: large;
    font-weight: bold;
    background: #0006;
    padding: 1em 0.5em;
    border-radius: 0.6em;
}

.upload-town-option {
    display: block;
}

/* fucking invisible ass chrome radio buttons */
.hivis {
    width: fit-content;
    border-bottom: 1px dashed;
    border-right: 1px dashed;
	border-radius: 0.4em;
	padding: 0.5em ;
    padding-right: 0.5em;
    background: #236e;
	font-weight: bold ;
    margin-bottom: 0.5em;
	color : #eee;
}

.hivis:has(input[type='radio']:checked) {
    xxxbackground: #0d58;
    background: #060;
    border: 3px solid palegreen;
}

/* ---------------------- job status --------------------- */

.job-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	color: var(--text-soft);
}

.job-status {
	border-radius: 10px;
	padding: 0.75rem;
	background: rgba(15, 23, 42, 0.9);
	border: 1px solid var(--border);
	margin-bottom: 0.5rem;
}

.job-status-row {
	display: flex;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.job-status-label {
	color: var(--text-soft);
	min-width: 60px;
}

.job-state-value {
	font-weight: 600;
}

.job-status-extra {
	color: var(--text-soft);
	margin-top: 0.35rem;
}

/* --------------------- card editor ----------------------- */

#cards-section {
	padding-bottom: 3.5em;  /* save space for bottom save button */
}

/*
#cards-section #cards-save-top {
    position: absolute;
    top: 0.8em;
    right: 0.5em;
}
#cards-section #cards-save-bottom {
    position: absolute;
    bottom: 0.8em;
    right: 0.5em;
}
*/

#cards-editor {
  width: fit-content;
}

.cards-editor {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sep {
	margin-right : 2em ;
}

label.town-choice {
    margin-right: 1em;
}

#town-picker-body {
    font-size: large;
    font-weight: bold;
}

.card-set {
	border-radius: 10px;
	border: 1px solid rgba(148, 163, 184, 0.4);
	background: rgba(15, 23, 42, 0.8);
	padding: 0.75rem;
}

.card-set-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.5rem;
}

.card-set-name {
	font-weight: 900;
	font-size: 1.5em;
}

/* card set counts */

.card-set-meta {
	color: var(--text-soft);
    font-weight: 600;
	XXXfont-size: 0.75rem;
}

/*
	------------------- cardset colors -------------------
	these change with every release.  not fixed by number.
	add setnames (lowercase) because set numbers aren't fixed.
*/

.cardset1   { background: #900 ; }   /* red */
.cardset2   { background: #00b ; }   /* blue */
.cardset3   { background: #070 ; }   /* green */
.cardset4   { background: #088 ; }   /* teal */
.cardset5   { background: #00b ; }   /* blue */
.cardset6   { background: #508 ; }   /* purple */
.cardset7   { background: #070 ; }   /* green */
.cardset8   { background: #b60 ; }   /* orange */
.cardset9   { background: #808 ; }   /* orchid */
.cardset10  { background: #900 ; }   /* red */
.cardset11  { background: #b60 ; }   /* orange */
.cardset12  { background: #088 ; }   /* teal */
.cardset13  { background: #00b ; }   /* blue */
.cardset14  { background: #070 ; }   /* green */
.cardset15  { background: #508 ; }   /* purple */

/* spring set 2026-03 */

.flowers    { background: #070e ; }   /* green */
.wildlife   { background: #088e ; }   /* teal */
.sweets     { background: #508e ; }   /* purple */
.hiking     { background: #070e ; }   /* green */
.cleaning   { background: #808e ; }   /* orchid */
.gardening  { background: #088e ; }   /* teal */
.critters   { background: #900e ; }   /* red */
.spring     { background: #070e ; }   /* green */
.romance    { background: #808e ; }   /* orchid */
.wardrobe   { background: #00be ; }   /* blue */
.festival   { background: #b60e ; }   /* orange */
.spa        { background: #508e ; }   /* purple */
.backyard   { background: #00be ; }   /* blue */
.easter     { background: #900e ; }   /* red */
.hobbies    { background: #088e ; }   /* teal */

.cards-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1em;
}

.card-cell {
	width : 8em ;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.5em ;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.8);
	background: #112d ;
	border: 1px solid rgba(148, 163, 184, 0.4);
	min-width: 120px;
}

.card-cell.gold {
    xxxborder-top: 5px solid gold;
    xxxborder-bottom: 5px solid gold;
	background: gold ;
}

.gold .card-name {
    color: black;
}

.card-name {
	color: var(--text-soft);
	text-wrap: nowrap;
}

.grid label {
	display : inline-block ;
    margin-right: 1em;
    font-weight: bold;
}

input.card-input ,
input.sends-input ,
input.coll-input {
	xxxxpadding: 0.3rem 0.4rem;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: #020617;
	color: var(--text);
	outline: none;

	width: 5ch;
	text-align: center;
    border-radius: 10px;
    xxheight: 2em;
    height: auto ;
    padding: 0.2em 0 ;
	margin-bottom : unset ;
}

.card-input:focus ,
.coll-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.35);
}

.cards-summary {
	XXfont-size: 0.9rem;
	color: var(--text-soft);
	margin-top: 0.35rem;
	line-height: 200%;
	border-radius: 10px;
	padding: 0.5em 1em ;
	font-weight: bold;
	background: #22aa;
}

/* NEW { */
.card-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem;
}

OLD.card-badge {
	font-size: 0.75rem;
	padding: 0.15rem 0.4rem;
	border-radius: 0.7em;
	background: rgba(15, 23, 42, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.5);
	color: var(--text-soft);
}
.card-badge {
	font-size: 0.9rem;
	padding: 0.15rem 0.5rem;
	border-radius: 0.7em;
	border: 1px solid #000;          /* solid, no washed-out border */
	background: #111827;             /* solid dark base */
	color: #f9fafb;                  /* clear, bright text */
}

/*
	----- old style card badges with text -----
*/

.card-badge img {
    width: 100% ;
	max-height: 2em ;
	height: 2em ;
}

.need img {
    width: 75% ;
}

/*
	----- old style card badges with text -----
*/
/*
.card-badge.have {
	background: green ;
}

.card-badge.need {
	background: #555 ;
}
*/

.card-badge.extra {
	/* example */
	background: yellow !important;
	color: black;
	font-weight: bold;
}

.card-badge.error {
	/* tune however you like */
	background: #800 ;
}

/* NEW } */

/* status feedback images */

#state-cont {
	max-height : 30vh ;
	width  : auto ;
	margin : 1rem 0 ;
}

img.job-state {
	/* just setting height 100% doesn't work idk fml */
    max-height: 100%;
    min-height: 100%;
    max-width: 100%;
}

.job-state.finished { content : url("/static/images/homer-confetti.jpg") ; }
.job-state.pushcards{ content : url("/static/images/marge-waiting.gif") ; }
.job-state.failed   { content : url("/static/images/homer-cooking-fail.gif") ; }

.feedback.success     { content : url("/static/images/homer-confetti.jpg") ; }
.feedback.failed      { content : url("/static/images/homer-cooking-fail.gif") ; }
.feedback.processing  { content : url("/static/images/marge-waiting.gif") ; }

/* misc */

.info-box {
	margin-top: 1rem;
	color: var(--text-soft);
	border-radius: 8px;
	border: 1px dashed rgba(148, 163, 184, 0.6);
	padding: 0.75rem 0.85rem;
	background: rgba(15, 23, 42, 0.6);
}

.hidden {
	display: none;
}

@media (max-width: 640px) {
	.page {
		margin-top: 1rem;
	}

	.card {
		padding: 1.1rem;
	}

	.job-meta {
		flex-direction: column;
	}
}

/* --------------------- userhome settings ------------------- */

tr.key ,
tr.discord ,
tr.dirname ,
tr.avatar_url ,
tr.towns ,
tr.END
{
	display : none ;
}

.aside {
    font-style: italic;
    font-size: small;
    margin-left: 1em;
    color: #777;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

.dialog {
    background: #24ae ;
	border-color: aliceblue;
}

.dialog h1 ,
.dialog h2 ,
.dialog h3 ,
.dialog h4 ,
.dialog h5 ,
dummy
{
    margin: 0.5em 0;
}

#my-towns li 	{
	margin-bottom : 0.8em ;
	list-style : none ;
}

ul.town-list {
    padding-left: 0;
}

.actions-list button {
	margin-right : 1em ;
}

/* --------------------- townedit settings ------------------- */

/* town edit form: label left, input right, nice spacing */

#town-edit #town-form {
	max-width: 32rem;
}

.field {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

/* labels in left column */
.field label {
	flex: 0 0 auto;
	min-width: 8rem;
	white-space: nowrap;
}

/* inputs in right column, expand to fill */
/*
.field input {
	flex: 1 1 auto;
	min-width: 0;
}
*/

/* actions row: button + status with a bit of air */
form .actions {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}


/* ------------------- Trade Page ------------------- */


#trade-selectors .section-header {
    width: 100%;
}

#trade-selectors .form-rows {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.town-select {
    padding: 0.4em;
    background: #3699;
    color: #ffae;
    font-weight: bold;
    border-radius: 0.5em;
    font-size: large;
}

/* ------------------- Notifications ------------------- */

.toast-close {
    padding-left: 1em;
}

.toastify.on {
    border-radius: 0.5em;
    font-weight: bold;
}