/* Partoit — styles (mobile d'abord). */
:root {
	--bg: #faf5ee; --card: #fffdf9; --ink: #2a1f1a; --muted: #75655b; --line: #e7dccf;
	--brand: #b4472c; --brand-ink: #fff; --brand-soft: #f6e3d6;
	--urgent: #c0261c; --urgent-bg: #fde8e4; --important: #b45f06; --important-bg: #fcefd9;
	--normal: #1f5f8b; --normal-bg: #e3f0f8; --info: #5d6470; --info-bg: #eceef1; --ok: #2f6b3c;
	--radius: 14px; --shadow: 0 1px 2px rgba(42, 31, 26, .06), 0 6px 20px rgba(42, 31, 26, .05);
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1b1512; --card: #251d19; --ink: #f3e9df; --muted: #b3a295; --line: #3b2f28;
		--brand: #e2714f; --brand-ink: #1b1512; --brand-soft: #3a2620;
		--urgent: #ff8a7d; --urgent-bg: #45201c; --important: #f2b25a; --important-bg: #40301a;
		--normal: #86c1e8; --normal-bg: #1d3444; --info: #b5bcc7; --info-bg: #2e3238; --ok: #86c995;
		--shadow: none;
	}
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--bg); color: var(--ink);
	font: 16px/1.5 ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
h1, h2, h3, p, ul { margin: 0; }
h1 { font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; }
h3 { font-size: 1.05rem; line-height: 1.3; }
ul { padding: 0; list-style: none; }
a { color: var(--brand); }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .center { text-align: center; }
.boot { padding: 3rem 1rem; text-align: center; color: var(--muted); }

.logo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--brand); }
.logo .mark { width: 1.7rem; height: 1.7rem; display: block; } .logo svg { width: 100%; height: 100%; display: block; }

.gate { max-width: 26rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; display: grid; gap: 1.5rem; }
.gate-head { text-align: center; display: grid; gap: .35rem; } .gate-head .logo { font-size: 1.9rem; justify-self: center; }
.gate-head .logo .mark { width: 2.6rem; height: 2.6rem; }
.tagline { color: var(--muted); }

.top {
	position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem;
	padding: .65rem 1rem; padding-top: calc(.65rem + env(safe-area-inset-top));
	background: var(--card); border-bottom: 1px solid var(--line);
}
.top .spacer { flex: 1; } .hname { font-weight: 600; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch { max-width: 11rem; }
.tabs { display: flex; gap: .25rem; padding: .5rem 1rem 0; max-width: 44rem; margin: 0 auto; }
.tabs button {
	flex: 1; padding: .7rem .5rem; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600;
	border-bottom: 3px solid transparent; cursor: pointer; display: inline-flex; gap: .4rem; justify-content: center; align-items: center;
}
.tabs button.on { color: var(--brand); border-color: var(--brand); }
.dot { background: var(--urgent); color: #fff; border-radius: 99px; font-size: .75rem; min-width: 1.3rem; padding: 0 .35rem; line-height: 1.3rem; }

.page { max-width: 44rem; margin: 0 auto; padding: 1rem 1rem calc(3rem + env(safe-area-inset-bottom)); display: grid; gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); display: grid; gap: .8rem; }
.card.notice { border-color: var(--brand); background: var(--brand-soft); }
.card.soon { box-shadow: none; background: none; border-style: dashed; color: var(--muted); }
.card.soon ul { display: grid; gap: .25rem; padding-left: 1.1rem; list-style: disc; font-size: .925rem; }

.form { display: grid; gap: .8rem; }
.field { display: grid; gap: .3rem; } .field > span { font-size: .875rem; font-weight: 600; } .field small, .hint { color: var(--muted); font-size: .8rem; }
input, textarea, select {
	width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
	border-radius: 10px; padding: .65rem .75rem; min-height: 2.75rem;
}
textarea { resize: vertical; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.btn {
	font: inherit; font-weight: 650; min-height: 2.75rem; padding: .6rem 1.1rem; border-radius: 10px; cursor: pointer;
	border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.ghost { background: none; color: var(--muted); } .btn.danger { color: var(--urgent); }
.btn.small { min-height: 2.4rem; padding: .35rem .8rem; font-size: .9rem; }
.btn.armed, .link.armed { background: var(--urgent); border-color: var(--urgent); color: #fff; }
.link.armed { padding: .1rem .4rem; border-radius: 6px; text-decoration: none; }
.btn:disabled { opacity: .55; cursor: default; }
.link { font: inherit; background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; }
.top .link { color: var(--muted); font-size: .875rem; white-space: nowrap; }
.error { color: var(--urgent); font-weight: 600; }

.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { font: inherit; font-size: .875rem; font-weight: 600; border: 0; background: none; color: var(--muted); padding: .4rem .75rem; border-radius: 8px; cursor: pointer; min-height: 2.2rem; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.gate .seg { display: flex; } .gate .seg button { flex: 1; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font: inherit; font-size: .9rem; font-weight: 650; padding: .4rem .85rem; min-height: 2.4rem; border-radius: 99px; border: 1.5px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.chip.on.lv-urgent, .badge.lv-urgent { background: var(--urgent-bg); color: var(--urgent); border-color: var(--urgent); }
.chip.on.lv-important, .badge.lv-important { background: var(--important-bg); color: var(--important); border-color: var(--important); }
.chip.on.lv-normal, .badge.lv-normal { background: var(--normal-bg); color: var(--normal); border-color: var(--normal); }
.chip.on.lv-info, .badge.lv-info { background: var(--info-bg); color: var(--info); border-color: var(--info); }

.feed-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .5rem; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.msg { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--info); border-radius: var(--radius); padding: 1rem; display: grid; gap: .55rem; box-shadow: var(--shadow); }
.msg.lv-urgent { border-left-color: var(--urgent); } .msg.lv-important { border-left-color: var(--important); } .msg.lv-normal { border-left-color: var(--normal); }
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.badge { font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .55rem; border-radius: 99px; border: 1px solid; }
.new { font-size: .75rem; font-weight: 750; color: var(--brand); }
.meta { font-size: .8rem; color: var(--muted); } .msg-head .meta { margin-left: auto; }
.body, .reply p { white-space: pre-wrap; overflow-wrap: anywhere; }
.waiting { font-size: .85rem; color: var(--muted); } .waiting.hot { color: var(--urgent); font-weight: 650; } .waiting.ok { color: var(--ok); }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.thread { border-top: 1px solid var(--line); padding-top: .75rem; display: grid; gap: .6rem; }
.reply { background: var(--bg); border-radius: 10px; padding: .55rem .75rem; } .reply.mine { background: var(--brand-soft); }

.people { display: grid; } .people li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.people li:first-child { border-top: 0; padding-top: 0; } .people li > div:first-child { display: grid; min-width: 0; } .people small { color: var(--muted); overflow-wrap: anywhere; }
.copy { display: flex; gap: .5rem; } .copy input { min-width: 0; font-size: .85rem; }

.toast {
	position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
	background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; border-radius: 99px; font-weight: 600; font-size: .9rem; max-width: calc(100vw - 2rem); text-align: center;
}
.toast.bad { background: var(--urgent); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: rise .2s ease-out; } @keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } } }