/* ==========================================================================
   Munello - design system
   Notion-calm: system font, warm ink #37352F, warm greys, coral
   primary, hairline borders. Rule that keeps it calm: colour marks
   what needs you. Everything that is fine stays neutral.
   ========================================================================== */

/* The wordmark face: Space Grotesk Bold, served locally. */
@font-face{
	font-family:'Space Grotesk';
	src:url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype');
	font-weight:700;
	font-style:normal;
	font-display:swap;
}

:root{
	--bg:#FFFFFF;
	--panel:#FFFFFF;
	--panel-2:#F7F7F5;
	--panel-3:#F1F1EF;
	--line:#E9E9E7;
	--line-2:#F1F1EF;

	--ink:#37352F;
	--ink-2:#787774;
	--ink-3:#9B9A97;

	--accent:#E8402A;
	--accent-hover:#D63A24;
	--accent-tint:#FDECE8;
	--accent-ink:#FFFFFF;

	--ok:#448361;      --ok-tint:#EDF3EE;
	--warn:#C77D2B;   --warn-tint:#FAF0E5;  --warn-line:#EEDDC5;
	/* Danger stays a deeper crimson, never the brand coral: an
	   uncovered slot must read as alarm, not as Munello. */
	--bad:#C22B45;    --bad-tint:#FBE9ED;   --bad-line:#F2CDD6;

	--rail:#F7F7F5;
	--rail-2:#EFEFED;
	--rail-line:#E9E9E7;
	--rail-ink:#5F5E5B;

	--font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif;
	--disp:var(--font);

	--r-sm:5px; --r:6px; --r-lg:10px; --r-pill:999px;
	--sh-1:0 1px 2px rgba(15,15,15,.04);
	--sh-2:0 1px 2px rgba(15,15,15,.05), 0 9px 24px -12px rgba(15,15,15,.18);
	--sh-3:0 3px 6px rgba(15,15,15,.06), 0 22px 48px -20px rgba(15,15,15,.28);

	--rail-w:214px;
	--speed:.16s;
}

[data-theme="dark"]{
	/* wordmark flips light in dark */
	--bg:#191919;
	--panel:#1F1F1F;
	--panel-2:#242424;
	--panel-3:#2A2A2A;
	--line:#333333;
	--line-2:#2B2B2B;

	--rail:#202020;
	--rail-2:#2A2A2A;
	--rail-line:#2F2F2F;
	--rail-ink:#9B9B9B;

	--ink:#D4D4D4;
	--ink-2:#9B9B9B;
	--ink-3:#6F6F6F;

	--accent:#FF7A5C;
	--accent-hover:#FF9179;
	--accent-tint:#3A1B15;
	--accent-ink:#2A120C;

	--ok:#6DA57F;     --ok-tint:#1F2A23;
	--warn:#CB9463;   --warn-tint:#2A2218;  --warn-line:#453723;
	/* Crimson, not salmon: keeps danger clearly apart from the
	   coral accent in dark mode too. */
	--bad:#E05C7B;    --bad-tint:#331720;   --bad-line:#542334;

	--sh-1:0 1px 2px rgba(0,0,0,.5);
	--sh-2:0 2px 5px rgba(0,0,0,.4), 0 14px 30px -16px rgba(0,0,0,.8);
	--sh-3:0 4px 10px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
	margin:0;background:var(--bg);color:var(--ink);
	font-family:var(--font);font-weight:400;font-size:14px;line-height:1.5;
	-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;line-height:1.2;}
/* One face, two weights. Headline numbers are just the same face, bigger
   and bold, so the interface never shouts at the user. */
h1{font-size:20px;font-weight:700;letter-spacing:-.01em;}
h2{font-size:18px;font-weight:700;letter-spacing:-.01em;}
h3{font-size:14.5px;font-weight:700;}
h4{font-size:13px;font-weight:700;}
p{margin:0 0 12px;}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line);}
a:hover{text-decoration-color:var(--ink-3);}
button,input,select,textarea{font:inherit;color:inherit;}
::selection{background:var(--accent);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

.num{font-variant-numeric:tabular-nums;}
.muted{color:var(--ink-2);}
.dim{color:var(--ink-3);}
.small{font-size:12.5px;}
.tiny{font-size:11.5px;}
.b{font-weight:700;}
.right{text-align:right;}
.nowrap{white-space:nowrap;}
.row{display:flex;align-items:center;gap:10px;}
.row.wrap{flex-wrap:wrap;}
.spread{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.grow{flex:1 1 auto;min-width:0;}
.stack{display:flex;flex-direction:column;gap:3px;min-width:0;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.ic{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.ic.sm{width:15px;height:15px;}
.ic.xs{width:13px;height:13px;stroke-width:1.8;}

/* ==========================================================================
   Shell
   ========================================================================== */
.shell{display:flex;min-height:100vh;}

.rail{
	width:var(--rail-w);flex:0 0 var(--rail-w);
	background:var(--rail);color:var(--rail-ink);border-right:1px solid var(--rail-line);
	display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.rail-brand{padding:24px 20px 18px;}
.wordmark{font-family:'Space Grotesk',var(--font);font-weight:700;font-size:22px;color:#1E2338;letter-spacing:-.03em;line-height:1;display:inline-flex;align-items:center;gap:.34em;}
.wordmark em{font-style:normal;color:var(--accent);}
.logomark{width:1.12em;height:1.12em;flex:0 0 auto;display:block;}
.rail-brand .sub{font-size:11px;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;margin-top:6px;}

.rail-tenant{
	margin:0 12px 18px;padding:10px 12px;border-radius:var(--r);
	background:var(--panel);border:1px solid var(--line);
	display:flex;align-items:center;gap:9px;cursor:pointer;
}
.rail-tenant:hover{border-color:var(--ink-3);}
.rail-tenant b{color:var(--ink);font-size:13px;font-weight:700;}
.rail-tenant .ic{color:var(--ink-3);margin-left:auto;}

.rail-label{padding:0 20px 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}

.rail-nav{flex:1 1 auto;overflow-y:auto;padding:0 12px;}
.rail-nav a{
	display:flex;align-items:center;gap:12px;
	padding:11px 12px;margin:2px 0;border-radius:var(--r);
	color:var(--ink-2);font-size:14.5px;text-decoration:none;border:1px solid transparent;
	transition:background var(--speed),color var(--speed);
}
.rail-nav a:hover{background:var(--rail-2);color:var(--ink);}
.rail-nav a.on{background:var(--panel);color:var(--accent);font-weight:700;border-color:var(--line);box-shadow:var(--sh-1);}
.rail-nav a.on .ic{color:var(--accent);}
.rail-nav .tag{
	margin-left:auto;font-size:11.5px;background:var(--panel-3);color:var(--ink-2);
	border-radius:var(--r-pill);padding:1px 8px;font-variant-numeric:tabular-nums;
}
.rail-nav a.on .tag{background:var(--accent-tint);color:var(--accent);}

.rail-foot{padding:14px 12px;border-top:1px solid var(--rail-line);}
.rail-user{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);cursor:pointer;}
.rail-user:hover{background:var(--rail-2);}
.rail-user .av{width:28px;height:28px;border-radius:var(--r-pill);background:var(--panel-3);color:var(--ink-2);display:grid;place-items:center;font-size:11px;font-weight:700;}
.rail-user b{color:var(--ink);font-size:13px;display:block;}
.rail-user .ic{color:var(--ink-3);}

.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}

.topbar{
	position:sticky;top:0;z-index:30;background:var(--bg);
	border-bottom:1px solid var(--line-2);
	padding:0 28px;height:66px;display:flex;align-items:center;gap:14px;
}
.crumb{color:var(--ink-3);font-size:12.5px;}
.search{
	display:flex;align-items:center;gap:8px;background:var(--panel);
	border:1px solid var(--line);border-radius:var(--r);padding:0 11px;height:34px;
	min-width:230px;color:var(--ink-3);transition:border-color var(--speed);
}
.search:focus-within{border-color:var(--ink-3);}
.search input{border:0;background:none;outline:none;width:100%;font-size:13.5px;}
.search kbd{font:inherit;font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:0 5px;}

.page{padding:22px 28px 40px;flex:1 1 auto;}
.page-head{margin-bottom:20px;}
.page-head p{color:var(--ink-2);margin:6px 0 0;max-width:68ch;}

/* ==========================================================================
   Controls
   ========================================================================== */
.btn{
	display:inline-flex;align-items:center;gap:7px;height:35px;padding:0 14px;
	border-radius:var(--r-sm);background:var(--panel);color:var(--ink);
	border:1px solid var(--line);cursor:pointer;font-size:13.5px;white-space:nowrap;
	text-decoration:none;transition:background var(--speed),border-color var(--speed);
}
.btn:hover{border-color:var(--ink-3);text-decoration:none;}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700;}
.btn.pri:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--panel);font-weight:700;}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2);}
.btn.ghost:hover{background:var(--panel-3);color:var(--ink);}
.btn.sm{height:29px;padding:0 11px;font-size:13px;}
.btn.icon{width:35px;padding:0;justify-content:center;}
.btn.icon.sm{width:29px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}

.seg{display:inline-flex;background:var(--panel-3);border-radius:var(--r-sm);padding:2px;gap:2px;}
.seg button{border:0;background:none;cursor:pointer;border-radius:5px;padding:5px 13px;font-size:13px;color:var(--ink-2);transition:background var(--speed),color var(--speed);}
.seg button.on{background:var(--panel);color:var(--ink);font-weight:700;box-shadow:var(--sh-1);}

.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:12.5px;color:var(--ink-2);}
.input,select.input{
	height:35px;padding:0 11px;border-radius:var(--r-sm);border:1px solid var(--line);
	background:var(--panel);outline:none;font-size:13.5px;width:100%;transition:border-color var(--speed);
}
.input:focus{border-color:var(--ink);}
select.input{appearance:none;padding-right:26px;
	background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
	background-position:calc(100% - 14px) 16px,calc(100% - 9px) 16px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}

/* ==========================================================================
   Surfaces
   ========================================================================== */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);}
.card-head{padding:15px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:12px;}
.card-body{padding:18px;}
.card-foot{padding:13px 18px;border-top:1px solid var(--line-2);}

/* inline summary, no boxes */
.summary{display:flex;align-items:flex-end;gap:30px;flex-wrap:wrap;padding:4px 2px 20px;}
.sm-item .v{font-family:var(--font);font-weight:700;font-size:32px;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;}
.sm-item .k{font-size:12.5px;color:var(--ink-2);margin-top:5px;}
.sm-item.alert .v{color:var(--bad);}

.badge{
	display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;
	border-radius:var(--r-pill);font-size:11.5px;font-weight:700;
	background:var(--panel-3);color:var(--ink-2);border:1px solid transparent;
}
.badge.ok{background:var(--ok-tint);color:var(--ok);}
.badge.warn{background:var(--warn-tint);color:var(--warn);}
.badge.bad{background:var(--bad-tint);color:var(--bad);}
.badge.plain{background:transparent;border-color:var(--line);color:var(--ink-2);}

.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--ink-3);}
.dot.ok{background:var(--ok);} .dot.warn{background:var(--warn);} .dot.bad{background:var(--bad);}

.av{width:30px;height:30px;border-radius:var(--r-pill);flex:0 0 auto;display:grid;place-items:center;
	font-size:11.5px;font-weight:700;background:var(--panel-3);color:var(--ink-2);}
.av.sm{width:25px;height:25px;font-size:10px;}
.av.lg{width:54px;height:54px;font-size:18px;}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;}
.tbl input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}
.tbl.people td{padding:14px 18px;}
.tbl.people b{font-weight:700;}
.tbl.people .btn{margin-left:6px;}
.tbl th{text-align:left;font-weight:700;font-size:12px;color:var(--ink-3);padding:10px 18px;border-bottom:1px solid var(--line);white-space:nowrap;}
.tbl td{padding:12px 18px;border-bottom:1px solid var(--line-2);}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover{background:var(--panel-2);}

.empty{text-align:center;padding:34px 18px;color:var(--ink-2);}
.empty .ic{width:24px;height:24px;color:var(--ink-3);margin-bottom:8px;}
.empty b{display:block;color:var(--ink);margin-bottom:3px;}

#toasts{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;gap:9px;align-items:flex-end;}
.toast{
	display:flex;align-items:center;gap:11px;max-width:400px;background:var(--ink);color:var(--panel);
	border-radius:var(--r);box-shadow:var(--sh-3);padding:12px 15px;font-size:13.5px;
	animation:toastin .2s cubic-bezier(.2,.7,.3,1);
}
.toast .ic{color:var(--accent);}
.toast button{background:none;border:0;color:var(--accent);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
@keyframes toastin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.scrim{position:fixed;inset:0;background:rgba(26,26,26,.4);z-index:80;opacity:0;pointer-events:none;transition:opacity var(--speed);}
.scrim.on{opacity:1;pointer-events:auto;}
.drawer{
	position:fixed;top:0;right:0;height:100vh;width:410px;max-width:92vw;z-index:90;
	background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--sh-3);
	transform:translateX(100%);transition:transform .2s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;
}
.drawer.on{transform:none;}
.drawer-head{padding:18px;border-bottom:1px solid var(--line-2);display:flex;align-items:flex-start;gap:12px;}
.drawer-body{padding:18px;overflow-y:auto;flex:1 1 auto;}

/* filter tabs */
.ftabs{display:inline-flex;background:var(--panel-3);border-radius:var(--r);padding:3px;gap:2px;}
.ftabs button{
	border:0;background:none;cursor:pointer;border-radius:var(--r-sm);
	padding:6px 14px;font-size:13.5px;color:var(--ink-2);
	transition:background var(--speed),color var(--speed);
}
.ftabs button:hover{color:var(--ink);}
.ftabs button.on{background:var(--panel);color:var(--ink);font-weight:700;box-shadow:var(--sh-1);}

/* pagination */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px 0;}
.pager .count{font-size:13.5px;color:var(--ink-2);}
.pager .count b{color:var(--ink);}

/* ==========================================================================
   Today board
   ========================================================================== */
.board{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start;}
@media(max-width:1180px){.board{grid-template-columns:1fr;}}

.datenav{display:flex;align-items:center;gap:8px;}
.datenav b{font-size:15px;min-width:130px;text-align:center;}

.board-cols,.sch{display:grid;grid-template-columns:minmax(180px,1fr) 1fr 1fr;gap:12px;}
.board-cols{padding:12px 20px;border-bottom:1px solid var(--line);}
.board-cols span{font-size:12px;color:var(--ink-3);}
.sch{padding:11px 20px;border-bottom:1px solid var(--line-2);align-items:center;}
.sch:last-of-type{border-bottom:0;}
.sch-name b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sch-name span{font-size:12px;color:var(--ink-3);}

/* Neutral is the default. Colour only appears where something needs doing. */
.cell{
	min-height:56px;border-radius:var(--r);padding:9px 11px;display:flex;align-items:center;gap:9px;
	border:1px solid var(--line-2);background:var(--panel-2);cursor:pointer;
	transition:border-color var(--speed),background var(--speed);
}
.cell .ph{font-size:13px;color:var(--ink-3);}
.cell:hover{border-color:var(--ink-3);}
.cell.sel{border-color:var(--ink);background:var(--panel);}
.cell.over{border-color:var(--accent);background:var(--accent-tint);}
.cell[data-state="open"]{border-style:dashed;border-color:var(--bad-line);background:var(--bad-tint);}
.cell[data-state="open"] .ph{color:var(--bad);font-weight:700;}
.cell[data-state="pencil"]{border-color:var(--warn-line);background:var(--warn-tint);}
.cell[data-state="problem"]{border-color:var(--bad-line);background:var(--bad-tint);}
.cell[data-state="confirmed"]{background:var(--panel);border-color:var(--line);}
.cell[data-state="confirmed"] .av{background:var(--ok-tint);color:var(--ok);}
.cell[data-state="na"]{background:transparent;border-color:transparent;cursor:default;}
.cell .who{min-width:0;flex:1 1 auto;}
.cell .who b,.cell .who span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cell .who b{font-size:13.5px;font-weight:400;}
.cell .who span{font-size:11.5px;color:var(--ink-2);}
.cell .acts{display:flex;gap:6px;flex:0 0 auto;}
/* Actions stay visible where something needs doing. A booked slot needs
   nothing, so its cancel button waits for hover rather than adding noise. */
.cell[data-state="confirmed"] .acts{opacity:0;transition:opacity var(--speed);}
.cell[data-state="confirmed"]:hover .acts{opacity:1;}

.cell .acts button{
	height:28px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--line);
	background:var(--panel);cursor:pointer;display:inline-flex;align-items:center;gap:5px;
	color:var(--ink-2);font-size:12.5px;white-space:nowrap;
}
.cell .acts button:hover{border-color:var(--ink-3);color:var(--ink);}
.cell .acts button.go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.cell .tick{color:var(--ok);flex:0 0 auto;}

.pool{position:sticky;top:70px;}
.pool-list{max-height:calc(100vh - 230px);overflow-y:auto;}
.cand{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line-2);cursor:grab;transition:background var(--speed);}
.cand:hover{background:var(--panel-2);}
.cand:active{cursor:grabbing;}
.cand.dragging{opacity:.4;}
.cand.gone{display:none;}
.cand b{display:block;font-size:13.5px;font-weight:400;}
.cand span{font-size:12px;color:var(--ink-3);}
.cand .rate{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ==========================================================================
   Pipeline
   ========================================================================== */
.kan{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start;}
.col{flex:0 0 250px;background:var(--panel-3);border-radius:var(--r-lg);border:1px solid transparent;transition:border-color var(--speed),background var(--speed);}
.col.over{border-color:var(--accent);background:var(--accent-tint);}
.col-head{display:flex;align-items:center;gap:8px;padding:12px 14px 10px;}
.col-head b{font-size:13px;}
.col-head .n{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.col-list{padding:0 9px 10px;display:flex;flex-direction:column;gap:8px;min-height:56px;}
.pc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;cursor:grab;transition:border-color var(--speed),box-shadow var(--speed);}
.pc:hover{border-color:var(--ink-3);box-shadow:var(--sh-1);}
.pc.dragging{opacity:.45;}
.pc .t{display:flex;align-items:center;gap:9px;}
.pc .t b{font-size:13.5px;font-weight:400;}
.pc .sub{font-size:12px;color:var(--ink-3);margin-top:3px;}
.pc .f{margin-top:9px;}

/* ==========================================================================
   Profile
   ========================================================================== */
.prof{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start;}
@media(max-width:1080px){.prof{grid-template-columns:1fr;}}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tabs button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:10px 14px;font-size:14px;white-space:nowrap;flex:0 0 auto;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--speed),border-color var(--speed);}
.tabs button:hover{color:var(--ink);}
.tabs button.on{color:var(--ink);font-weight:700;border-bottom-color:var(--ink);}
.tabpane{display:none;}
.tabpane.on{display:block;animation:fade .16s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}

.kv{display:grid;grid-template-columns:130px 1fr;gap:11px 16px;font-size:13.5px;}
.kv dt{color:var(--ink-3);font-size:13px;}
.kv dd{margin:0;}

.compliance-item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-2);}
.compliance-item:last-child{border-bottom:0;}
.compliance-item .stack{flex:1 1 auto;}
.compliance-item b{font-size:13.5px;font-weight:400;}
.compliance-item span{font-size:12px;color:var(--ink-3);}

.availstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.day{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 3px;text-align:center;cursor:pointer;background:var(--panel-2);transition:border-color var(--speed);}
.day:hover{border-color:var(--ink-3);}
.day .dow{font-size:11px;color:var(--ink-3);}
.day .dt{font-size:15px;font-variant-numeric:tabular-nums;}
.day .st{font-size:11px;margin-top:3px;color:var(--ink-3);}
.day[data-a="free"]{background:var(--ok-tint);border-color:transparent;} .day[data-a="free"] .st{color:var(--ok);}
.day[data-a="booked"]{background:var(--panel-3);border-color:transparent;} .day[data-a="booked"] .st{color:var(--ink-2);}

.tl{position:relative;padding-left:20px;}
.tl::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line);}
.tl-item{position:relative;padding:0 0 16px;}
.tl-item::before{content:"";position:absolute;left:-20px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--panel);border:1px solid var(--ink-3);}
.tl-item.ok::before{background:var(--ok);border-color:var(--ok);}
.tl-item b{font-size:13.5px;font-weight:700;}
.tl-item .when{font-size:12px;color:var(--ink-3);}
.tl-item p{margin:4px 0 0;font-size:13.5px;color:var(--ink-2);}

.hint{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--panel-3);font-size:13px;}
.hint .ic{color:var(--ink-2);margin-top:1px;}
.hint.warn{background:var(--warn-tint);}
.hint.warn .ic{color:var(--warn);}

/* ==========================================================================
   Style guide
   ========================================================================== */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.sw{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);}
.sw .chipc{height:56px;}
.sw .lb{padding:9px 11px;font-size:12px;}
.sw .lb b{display:block;font-size:12.5px;}
.spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px;}
.demo{padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);}
.demo h4{margin-bottom:12px;color:var(--ink-3);font-size:12px;font-weight:400;}
.principle{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2);}
.principle:last-child{border-bottom:0;}
.principle .n{font-size:12.5px;color:var(--ink-3);width:20px;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.principle b{display:block;font-size:14px;}
.principle p{margin:3px 0 0;font-size:13.5px;color:var(--ink-2);}

#burger{display:none;}
@media(max-width:980px){
	.rail{position:fixed;left:0;top:0;transform:translateX(-100%);z-index:100;transition:transform var(--speed);box-shadow:var(--sh-3);}
	.rail.on{transform:none;}
	#burger{display:inline-flex;}
	.page{padding:6px 16px 28px;}
	.topbar{padding:0 16px;}
	.search{min-width:0;}
	h1{font-size:22px;}
}

/* ==========================================================================
   Munello additions
   ========================================================================== */

/* slide/appear */
.slidein{animation:slidein .3s cubic-bezier(.2,.7,.3,1);}
@keyframes slidein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.sch.new{animation:rowin .5s ease;}
@keyframes rowin{from{opacity:0;background:var(--bad-tint);}to{opacity:1;}}

/* 7am shortlist */
.shortlist .cand{cursor:default;}
.shortlist .cand:active{cursor:default;}
.reason{font-size:12px;color:var(--ink-2);}
.offstate{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap;}
.offstate.ok{color:var(--ok);font-weight:700;}

/* staged progress (payroll run) */
.stages{padding:4px 0;}
.stage{display:flex;gap:12px;padding:10px 0;align-items:flex-start;opacity:.4;transition:opacity var(--speed);}
.stage.doing,.stage.done{opacity:1;}
.stage .sdot{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;background:var(--panel);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.stage.done .sdot{background:var(--ok);border-color:var(--ok);color:#FFFFFF;}
.stage.doing .sdot{border-color:var(--ink);color:var(--ink);}
.stage b{font-size:13.5px;font-weight:700;display:block;}
.stage span{font-size:12.5px;color:var(--ink-2);}
.spin{display:inline-block;width:11px;height:11px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* toggle switch */
.tog{position:relative;width:36px;height:20px;border-radius:999px;background:var(--panel-3);border:1px solid var(--line);cursor:pointer;transition:background var(--speed),border-color var(--speed);flex:0 0 auto;padding:0;}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--panel);border:1px solid var(--line);transition:left var(--speed);}
.tog.on{background:var(--accent);border-color:var(--accent);}
.tog.on::after{left:17px;background:#fff;border-color:#fff;}
[data-theme="dark"] .tog.on::after{background:#17181D;border-color:#17181D;}

/* branded social job card */
.socard{background:#1C1D22;color:#FFFFFF;border-radius:var(--r-lg);padding:24px;max-width:340px;box-shadow:var(--sh-2);}
.socard .sc-brand{font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:-.01em;}
.socard .sc-brand em{font-style:normal;color:#F4633A;}
.socard .sc-role{font-family:var(--font);font-weight:700;font-size:26px;letter-spacing:-.01em;line-height:1.15;margin:16px 0 8px;}
.socard .sc-meta{font-size:12.5px;color:#B9B9B9;line-height:1.6;}
.socard .sc-tag{display:inline-block;background:#F4633A;color:#FFFFFF;font-weight:700;border-radius:999px;padding:3px 11px;font-size:12px;margin-top:14px;}

/* sliders */
input[type=range]{width:100%;accent-color:var(--accent);height:22px;cursor:pointer;}

/* charts (inline SVG) */
.chart svg{width:100%;height:auto;display:block;}
.cb{fill:var(--ink-3);opacity:.55;}
.cb.hi{fill:var(--accent);opacity:1;}
.ct{fill:var(--ink-2);font-size:10.5px;font-family:var(--font);}
.ct.b{font-weight:700;fill:var(--ink);}
.cgrid{stroke:var(--line-2);stroke-width:1;}
.cline{stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cdot{fill:var(--accent);}
.carea{fill:var(--accent-tint);opacity:.6;}

/* map placeholder */
.mapbox{position:relative;background:var(--panel-3);border-radius:var(--r);min-height:230px;overflow:hidden;}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%;}
.maplbl{position:absolute;left:12px;bottom:10px;font-size:11.5px;color:var(--ink-3);}

/* worker phone (showpiece device frame) */
.phone-bg{background:#101115;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:30px 14px 54px;}
.phone-bg .pageback{color:#8F9199;font-size:13px;text-decoration:none;margin-bottom:22px;}
.phone-bg .pageback:hover{color:#ECEDEF;}
.device{width:min(390px,94vw);height:min(844px,calc(100vh - 190px));min-height:640px;background:#050507;border-radius:54px;padding:9px;position:relative;flex:0 0 auto;
	box-shadow:0 0 0 2px #2E2F36, 0 0 0 3px #0A0A0C, 0 44px 90px -22px rgba(0,0,0,.9), 0 12px 30px rgba(0,0,0,.55);}
.device .side{position:absolute;right:-4px;top:190px;width:3px;height:64px;border-radius:2px;background:#2E2F36;}
.device .side.l1{left:-4px;right:auto;top:150px;height:30px;}
.device .side.l2{left:-4px;right:auto;top:192px;height:52px;}
.screen{background:var(--bg);border-radius:46px;height:100%;overflow:hidden;display:flex;flex-direction:column;position:relative;}
.island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:110px;height:28px;border-radius:999px;background:#050507;z-index:30;}
.statusbar{display:flex;align-items:center;justify-content:space-between;padding:16px 30px 2px;font-size:14px;font-weight:700;color:var(--ink);flex:0 0 auto;}
.statusbar .num{letter-spacing:.01em;}
.statusbar svg{display:block;fill:var(--ink);}
.appbar{display:flex;align-items:center;gap:10px;padding:12px 20px 8px;flex:0 0 auto;}
.appbody{flex:1 1 auto;overflow-y:auto;padding:12px 16px 18px;}
.ptabs{display:flex;border-top:1px solid var(--line-2);background:var(--panel);flex:0 0 auto;}
.ptabs button{flex:1;border:0;background:none;cursor:pointer;padding:11px 0 9px;min-height:48px;font-size:10.5px;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:4px;}
.ptabs button .ic{width:21px;height:21px;}
.ptabs button.on{color:var(--ink);font-weight:700;}
.ptabs button.on .ic{color:var(--accent);}
.homebar{height:20px;display:grid;place-items:center;flex:0 0 auto;background:var(--panel);}
.homebar i{width:124px;height:5px;border-radius:999px;background:var(--ink);opacity:.9;display:block;}
.notif{position:absolute;left:10px;right:10px;top:54px;z-index:40;background:#1C1D22;color:#fff;border-radius:18px;padding:12px 14px;display:flex;gap:11px;align-items:flex-start;cursor:pointer;
	box-shadow:0 18px 44px -12px rgba(0,0,0,.6);animation:notifin .5s cubic-bezier(.2,.7,.3,1);}
@keyframes notifin{from{opacity:0;transform:translateY(-22px);}to{opacity:1;transform:none;}}
.notif.bye{transition:opacity .25s,transform .25s;opacity:0;transform:translateY(-22px);}
.notif .nico{width:32px;height:32px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;flex:0 0 auto;}
.notif b{display:block;font-size:13px;}
.notif span{font-size:12px;color:#B9BBC2;}
.notif .nwhen{margin-left:auto;font-size:11px;color:#8F9199;flex:0 0 auto;}
.offer{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:18px;box-shadow:var(--sh-2);}
.offer .o-role{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2;}
.offer .o-amt{font-size:30px;font-weight:700;letter-spacing:-.01em;}
.shift{border:1px solid var(--line);border-radius:20px;padding:18px;background:var(--panel);}
.shift .sc-when{font-weight:700;font-size:26px;letter-spacing:-.01em;}
.minimap{height:108px;border-radius:14px;background:var(--panel-3);position:relative;overflow:hidden;margin:12px 0;}
.minimap svg{position:absolute;inset:0;width:100%;height:100%;}
.availstrip.big .day{padding:13px 2px;min-height:66px;border-radius:10px;}
.availstrip.big .day .dt{font-size:16px;}
.payrow{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line-2);cursor:pointer;min-height:52px;}
.payrow:last-child{border-bottom:0;}
.payrow .net{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;}
.phone-cap{color:#8F9199;font-size:13px;margin-top:20px;text-align:center;}
.hintrow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center;}
.hintrow button{background:#1A1B21;border:1px solid #2A2B33;color:#C9CBD2;border-radius:999px;padding:8px 15px;min-height:34px;font-size:12.5px;cursor:pointer;transition:border-color .16s,color .16s;}
.hintrow button:hover{border-color:#8F9199;color:#fff;}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 10px;font-size:11.5px;color:var(--ink-2);background:var(--panel);}
.chip.ok{border-color:transparent;background:var(--ok-tint);color:var(--ok);font-weight:700;}
.chip.warn{border-color:transparent;background:var(--warn-tint);color:var(--warn);font-weight:700;}

/* worker app shell: mobile-first, bottom tab bar, thumb-sized targets */
.wshell{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);}
.wtop{display:flex;align-items:center;gap:10px;padding:14px 16px 6px;flex:0 0 auto;}
.wbody{flex:1 1 auto;padding:8px 16px calc(86px + env(safe-area-inset-bottom));}
.wtabs{position:fixed;bottom:0;left:0;right:0;z-index:50;border-top:1px solid var(--line-2);background:var(--panel);padding-bottom:env(safe-area-inset-bottom);}
.wtabs-in{max-width:520px;margin:0 auto;display:flex;}
.wtabs a{flex:1;text-decoration:none;padding:9px 0 8px;min-height:54px;font-size:10.5px;color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:3px;}
.wtabs a .ic{width:20px;height:20px;}
.wtabs a.on{color:var(--ink);font-weight:700;}
.wtabs a.on .ic{color:var(--accent);}

/* school portal */
.portal{max-width:620px;margin:0 auto;padding:26px 18px 70px;}
.portal-brand{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;}
.btn.xl{height:52px;font-size:15px;border-radius:var(--r);}
.btn.wide{width:100%;justify-content:center;}
.approve-row{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line-2);}
.approve-row:last-child{border-bottom:0;}
.approve-row .btn{height:44px;padding:0 18px;font-size:14px;}

/* payslip */
.payslip{max-width:660px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.payslip-head{background:#1C1D22;color:#fff;padding:22px 26px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.payslip-head .sc-brand{font-family:var(--font);font-weight:700;font-size:17px;letter-spacing:-.01em;}
.payslip-head .sc-brand em{font-style:normal;color:#F4633A;}
.pay-net{font-family:var(--font);font-weight:700;font-size:38px;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;}
.pline{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;}
.pline:last-child{border-bottom:0;}
.pline.total{font-weight:700;border-top:1px solid var(--line);margin-top:2px;}

/* start page */
.start{max-width:1060px;margin:0 auto;padding:60px 24px 80px;}
.start .wordmark{font-size:44px;}
.startgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.startlink{display:block;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-decoration:none;background:var(--panel);transition:border-color var(--speed),box-shadow var(--speed);}
.startlink:hover{border-color:var(--ink-3);box-shadow:var(--sh-1);text-decoration:none;}
.startlink b{display:block;font-size:14px;}
.startlink span{font-size:12.5px;color:var(--ink-2);}
.startlink.hero{background:var(--accent-tint);border-color:transparent;}
.startlink.hero b{color:var(--accent);}

/* login */
.login-bg{min-height:100vh;display:grid;place-items:center;background:var(--rail);padding:20px;}
.login-card{width:100%;max-width:390px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:34px 32px 30px;}

/* channel rows */
.chan{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);}
.chan:last-child{border-bottom:0;}
.chan .stack{flex:1 1 auto;}
.chan b{font-size:13.5px;font-weight:400;}
.chan span{font-size:12px;color:var(--ink-3);}

/* calculator */
.calcnum{font-family:var(--font);font-weight:700;font-size:34px;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.vs .box{border:1px solid var(--line);border-radius:var(--r);padding:16px;}
.vs .box.win{background:var(--ok-tint);border-color:transparent;}

/* two-column helper */
.duo{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start;}
@media(max-width:1100px){.duo{grid-template-columns:1fr;}}
.duo.even{grid-template-columns:1fr 1fr;}

/* Two-column job form: the writing left, the facts right. The main
   form spans both columns via display:contents, so the lifecycle
   buttons and social panel (their own forms) can share the right
   column without ever nesting inside it. */
.jobgrid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start;grid-auto-flow:row;}
.jobgrid>form{display:contents;}
.jg-left{grid-column:1;grid-row:1/span 4;min-width:0;}
.jg-status,.jg-right,.jg-social{grid-column:2;min-width:0;}
@media(max-width:900px){
	.jobgrid{display:block;}
	.jg-left,.jg-right,.jg-status,.jg-social{margin-bottom:18px;}
}
@media(max-width:1100px){.duo.even{grid-template-columns:1fr;}}

[data-theme="dark"] .wordmark{color:#E8EAF2;}

/* Brand kit + social cards */
.logobox{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--paper,#fff);}
.logobox img{max-height:56px;max-width:220px;display:block;}
.socthumb{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:var(--line-2);}
.socthumb.story{aspect-ratio:9/16;}
.socthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.socdraft{padding:14px 0;border-bottom:1px solid var(--line-2);}
.socdraft:first-of-type{padding-top:4px;}
.socdraft:last-of-type{border-bottom:0;}

/* ---------- toasts: tones and the mark ---------- */
.toast .tmark{color:var(--accent);font-weight:700;}
.toast.warn .tmark{color:var(--warn);}

/* ---------- drag and drop ---------- */
.cand[draggable="true"]{cursor:grab;}
.cell.dropping{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-tint);}
.col.dropping{outline:2px dashed var(--accent);outline-offset:-2px;border-radius:var(--r-sm);}

/* ---------- week view ---------- */
.wk-grid{display:grid;}
.wk-head{padding:10px 14px;font-size:12px;font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--line);text-align:center;}
.wk-head:first-child{text-align:left;}
.wk-head.today{color:var(--accent);}
.wk-client{padding:10px 14px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line-2);}
.wk-cell{display:flex;gap:5px;align-items:center;justify-content:center;border:0;background:none;cursor:pointer;border-bottom:1px solid var(--line-2);border-left:1px solid var(--line-2);padding:8px 6px;font:inherit;}
.wk-cell:hover{background:var(--panel-2);}
.wk-dot{display:inline-flex;min-width:20px;height:20px;padding:0 6px;align-items:center;justify-content:center;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;color:#fff;}
.wk-dot.bad{background:var(--bad);}
.wk-dot.warn{background:var(--warn);color:var(--ink);}
.wk-dot.ok{background:var(--ok);}

/* ---------- topbar quick results ---------- */
.qs-drop{position:absolute;top:calc(100% + 6px);right:0;width:360px;max-height:440px;overflow:auto;z-index:120;padding:4px 0 0;box-shadow:var(--sh-3);}
.qs-group{padding:9px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.qs-item{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 14px;text-decoration:none;color:inherit;font-size:13px;}
.qs-item.on,.qs-item:hover{background:var(--panel-2);}
.qs-item .dim{font-size:12px;white-space:nowrap;}
.qs-foot{padding:8px 14px;border-top:1px solid var(--line);}

/* ---------- contextual help slide-over ---------- */
.help-scrim{position:fixed;inset:0;background:rgba(15,18,28,.35);z-index:180;opacity:0;transition:opacity .18s;}
.help-scrim.open{opacity:1;}
.helpover{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--sh-3);z-index:181;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .22s ease;}
.helpover.open{transform:none;}
.help-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);}
.help-head b{display:inline-flex;align-items:center;gap:8px;}
.help-body{padding:16px 18px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:8px;}
.help-sub{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;}
.help-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;}
.help-link{display:block;font-size:13.5px;padding:3px 0;}
.help-foot{padding:14px 18px;border-top:1px solid var(--line);}