/* ARCIS MONETA brand colors. Change them here and the whole platform follows. */
:root {
  --navy: #0E2347; --navy-deep: #0A1A36; --navy-soft: #1B3560; --navy-line: #2A4370;
  --platinum: #E9ECF0; --silver: #C9CED6; --steel: #9AA6B8; --steel-dark: #6E7A8E;
  --ground: #F4F5F7; --line: #D9DDE3; --quiet: #4A5568; --white: #FFFFFF;
  --online: #176B47; --away: #8A5200; --alert-bg: #FFF3DC; --alert-line: #E8CE9A; --alert-ink: #4A4332; --late: #9A3412;
  --sans: Montserrat, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--navy); color: var(--navy-deep); font: 15px/1.45 var(--sans); }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 30px; line-height: 1.2; font-weight: 600; }
h2 { font-size: 17px; font-weight: 600; }
a { color: var(--navy); }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--steel-dark); border-radius: 2px; background: var(--white); }
:focus-visible { outline: 2px solid var(--steel-dark); outline-offset: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--navy); border-radius: 2px; background: var(--navy); color: var(--white); font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--navy-soft); }
.btn.secondary { background: transparent; color: var(--navy); }
.btn.secondary:hover { background: var(--platinum); }
.btn.light { background: var(--platinum); border-color: var(--platinum); color: var(--navy); }
.btn.ghost { background: transparent; border-color: var(--steel); color: var(--white); }
.btn.ghost:hover { background: var(--navy-soft); }
.link { background: none; border: 0; padding: 0; min-height: 44px; color: var(--navy); text-decoration: underline; cursor: pointer; }

/* Opening logo presentation */
#splash { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 4vh, 36px); padding: 16px; background: var(--navy); cursor: pointer; transition: opacity .5s ease; }
#splash.leaving { opacity: 0; }
#splash .logo { width: min(520px, 86vw); height: auto; overflow: visible; }
#splash .leg, #splash .g path, #splash .g circle { stroke: var(--platinum); }
#splash .arch { stroke: var(--steel); }
#splash .small path, #splash .small circle { stroke: var(--silver); }
.tagline { color: var(--silver); font-size: clamp(11px, 1.6vw, 14px); font-weight: 500; letter-spacing: .42em; text-indent: .42em; text-align: center; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#splash .leg, #splash .arch, #splash .g path, #splash .g circle { stroke-dasharray: 1 1; animation: draw var(--d, .8s) cubic-bezier(.65, 0, .35, 1) var(--t, 0s) both; }
#splash .leg { --d: 1.1s; --t: .25s; }
#splash .arch { --d: .85s; --t: 1.15s; animation-timing-function: cubic-bezier(.33, 0, .15, 1); }
#splash .big path { --d: .7s; --t: calc(1.7s + var(--i) * .13s); }
#splash .small path, #splash .small circle { --d: .5s; --t: calc(2.55s + var(--i) * .07s); }
#splash .tagline { animation: rise .7s ease-out 3.15s both; }
@media (prefers-reduced-motion: reduce) {
  #splash .leg, #splash .arch, #splash .g path, #splash .g circle, #splash .tagline { animation: none; }
}

/* Sign-in */
.signin { min-height: 100vh; padding: 32px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: var(--navy); }
.signin img { display: block; width: 280px; max-width: 80vw; height: auto; }
.signin .brand { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.signin form { width: 100%; max-width: 400px; padding: 32px; border-radius: 4px; background: var(--white); display: flex; flex-direction: column; gap: 18px; }
.signin h1 { font-size: 18px; text-align: center; }
.signin .hint { color: var(--quiet); font-size: 14px; text-align: center; }
label.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.error { color: var(--late); font-weight: 500; }

/* Layout */
.shell { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--ground); }
.nav { flex: 1 1 240px; padding: 24px 16px; background: var(--navy); display: flex; flex-direction: column; gap: 28px; }
.nav > img { display: block; width: 150px; height: auto; margin: 0 auto; }
.nav-links { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.nav-links a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: 2px; color: var(--silver); text-decoration: none; }
.nav-links a:hover { color: var(--white); }
.nav-links a.on { background: var(--navy-soft); color: var(--white); font-weight: 600; }
.badge { min-width: 22px; padding: 0 6px; text-align: center; border-radius: 11px; background: var(--silver); color: var(--navy); font-size: 12px; font-weight: 600; }
.nav-me { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--navy-line); color: var(--white); }
.nav-me .who { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; font-weight: 500; }
.nav-me .who span { color: var(--silver); font-size: 13px; font-weight: 400; }
.nav-me .account { flex: 1 1 100%; display: flex; justify-content: space-between; }
.nav-me button { background: none; border: 0; padding: 8px 0; color: var(--silver); font-size: 13px; text-decoration: underline; cursor: pointer; }
.view { flex: 999 1 560px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.view-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sub { color: var(--quiet); }
.columns { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.col-2 { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.col-1 { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.card { padding: 20px; border-radius: 4px; background: var(--white); border: 1px solid var(--line); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.row + .row { border-top: 1px solid var(--platinum); }
.row.plain + .row.plain { border-top: 0; }
.nowrap { white-space: nowrap; }
.late { color: var(--late); font-weight: 500; }
.empty { color: var(--quiet); padding: 8px 0; }
.alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-radius: 4px; background: var(--alert-bg); border: 1px solid var(--alert-line); }
.alert p { color: var(--alert-ink); }
.alert > div { flex: 1 1 320px; }
.status-online { color: var(--online); font-weight: 500; white-space: nowrap; }
.status-away { color: var(--away); font-weight: 500; white-space: nowrap; }
.status-offline { color: var(--quiet); white-space: nowrap; }
.avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 19px; background: var(--platinum); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.nav-me .avatar { background: var(--silver); }
.track { height: 6px; margin: 6px 0; border-radius: 3px; background: var(--platinum); overflow: hidden; }
.fill { height: 100%; background: var(--navy); }

/* Chat */
.chat { flex: 999 1 560px; min-width: 0; display: flex; flex-wrap: wrap; align-items: stretch; }
.convos { flex: 1 1 260px; padding: 24px 12px; background: var(--white); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.convos h2 { margin: 16px 0 6px; padding: 0 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
.convos h2:first-child { margin-top: 0; }
.convo { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 2px; background: transparent; text-align: left; cursor: pointer; }
.convo:hover { background: var(--ground); }
.convo.on { background: var(--platinum); font-weight: 600; }
.convo small { font-size: 13px; font-weight: 400; }
.thread { flex: 3 1 420px; min-width: 0; height: 100vh; min-height: 480px; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.thread header { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.thread h1 { font-size: 22px; }
.messages { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.message { display: flex; gap: 12px; }
.message > div { min-width: 0; }
.message b { font-weight: 600; }
.message time { color: var(--quiet); font-size: 13px; margin-left: 6px; }
.message p { white-space: pre-wrap; overflow-wrap: anywhere; }
.composer { display: flex; gap: 10px; }
.composer input { flex-grow: 1; min-width: 0; }

/* Tasks */
.board { flex: 3 1 480px; min-width: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.lane { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lane h2 { font-size: 15px; }
.lane h2 span { color: var(--quiet); font-weight: 500; }
.task { width: 100%; padding: 14px; border-radius: 4px; background: var(--white); border: 1px solid var(--line); text-align: left; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.task:hover { border-color: var(--steel-dark); }
.task.need { background: var(--alert-bg); border-color: var(--alert-line); }
.task b { font-weight: 500; }
.task .meta { display: flex; justify-content: space-between; gap: 8px; color: var(--quiet); font-size: 14px; }
.handover { flex: 1 1 300px; min-width: 0; padding: 20px; border-radius: 4px; background: var(--white); border: 1px solid var(--alert-line); display: flex; flex-direction: column; gap: 14px; }
.quote { padding: 12px; border-radius: 4px; background: var(--alert-bg); color: var(--alert-ink); overflow-wrap: anywhere; }
.pick { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--silver); border-radius: 2px; background: var(--white); text-align: left; cursor: pointer; }
.pick.on { border: 2px solid var(--navy); background: var(--platinum); }
.pick span:first-child { font-weight: 500; }
.pick span:last-child { color: var(--quiet); font-size: 14px; white-space: nowrap; }
.filter { display: flex; align-items: center; gap: 10px; }
.filter select { width: auto; }
.goals { display: flex; flex-wrap: wrap; gap: 24px; }
.goal { flex: 1 1 280px; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.goal b { font-weight: 500; }
.goal .meta { display: flex; justify-content: space-between; gap: 12px; color: var(--quiet); font-size: 14px; }

/* Projects and team */
.feature { padding: 24px; border-radius: 4px; background: var(--navy); color: var(--white); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.feature > div:first-child { flex: 1 1 320px; }
.feature h2 { font-size: 22px; margin-bottom: 6px; }
.feature p { color: var(--silver); }
.feature .facts { margin-top: 12px; color: var(--platinum); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.grid { display: flex; flex-wrap: wrap; gap: 16px; }
.grid .card { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.grid .card .actions { margin-top: auto; }
.table-box { overflow-x: auto; border-radius: 4px; background: var(--white); border: 1px solid var(--line); }
table { width: 100%; min-width: 820px; border-collapse: collapse; text-align: left; }
th, td { padding: 12px 20px; }
thead th { color: var(--quiet); font-size: 14px; font-weight: 600; }
tbody tr { border-top: 1px solid var(--platinum); }
tbody th { font-weight: 500; }
tr.inactive { color: var(--quiet); }

/* Dialogs and notices */
dialog { width: min(480px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 4px; color: var(--navy-deep); }
dialog::backdrop { background: rgba(10, 26, 54, .6); }
dialog form { display: flex; flex-direction: column; gap: 16px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.dialog-actions .left { margin-right: auto; }
.secret { padding: 12px; border-radius: 4px; background: var(--platinum); font-weight: 600; overflow-wrap: anywhere; user-select: all; }
#toasts { position: fixed; right: 16px; top: 16px; z-index: 40; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { padding: 14px 16px; border-radius: 4px; background: var(--navy); color: var(--white); border: 1px solid var(--navy-line); }

@media (max-width: 800px) {
  .view { padding: 20px 16px; }
  .thread { height: 80vh; padding: 16px; }
  .convos { border-right: 0; border-bottom: 1px solid var(--line); }
  .nav { gap: 16px; }
}