/* Kit Refined: the shared production design for web, desktop and mobile panes. */
html[data-kit-brand="refined"] {
  --d-paper:#f5f3ed; --d-paper2:#edeae2; --d-surface:#fffefa;
  --d-ink:#282d2b; --d-muted:#626960; --d-soft:#73786e; --d-line:#dedfd6;
  --d-brand:#9d4829; --d-hover:#823b23; --d-wash:#eee7da;
  --d-side:#eeeee6; --d-side-ink:#353c34; --d-side-rgb:53,60,52;
  --d-ink-rgb:40,45,43; --d-brand-rgb:157,72,41; --d-radius:12px;
  --d-heading:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --d-shadow:0 2px 6px #26312505; --d-row:12px; --d-content:1060px;
}


/* One palette feeds the board, the shared shell modules, and Mattermost's
   supported CSS theme variables. No preference API writes are involved. */
html[data-kit-brand="refined"], html[data-kit-brand="refined"] body {
  --paper:var(--d-paper); --paper-2:var(--d-paper2); --surface:var(--d-surface);
  --ink:var(--d-ink); --ink-2:var(--d-muted); --ink-3:var(--d-soft);
  --line:var(--d-line); --brand:var(--d-brand); --brand-hi:var(--d-hover);
  --wash:var(--d-wash); --wash-2:var(--d-paper2); --r-sm:10px; --r-md:var(--d-radius);
  --shadow:var(--d-shadow); --shadow-lg:0 14px 50px -20px #182c3955;
  --serif:var(--d-heading); --sidebar-w:210px;
  --kit-paper:var(--d-paper); --kit-paper-2:var(--d-paper2); --kit-surface:var(--d-surface);
  --kit-ink:var(--d-ink); --kit-ink-2:var(--d-muted); --kit-ink-3:var(--d-soft);
  --kit-line:var(--d-line); --kit-brand:var(--d-brand); --kit-brand-hi:var(--d-hover);
  --kit-brand-dk:var(--d-hover); --kit-wash:var(--d-wash); --kit-serif:var(--d-heading);
  --kit-r-md:var(--d-radius); --kit-shadow:var(--d-shadow);
  --center-channel-bg:var(--d-surface) !important;
  --center-channel-color:var(--d-ink) !important;
  --center-channel-color-rgb:var(--d-ink-rgb) !important;
  --sidebar-bg:var(--d-side) !important; --sidebar-text:var(--d-side-ink) !important;
  --sidebar-text-rgb:var(--d-side-rgb) !important;
  --sidebar-header-bg:var(--d-side) !important; --sidebar-header-text-color:var(--d-side-ink) !important;
  --sidebar-header-text-color-rgb:var(--d-side-rgb) !important;
  --sidebar-unread-text:var(--d-side-ink) !important;
  --sidebar-text-hover-bg:rgba(var(--d-side-rgb),.08) !important;
  --sidebar-text-active-border:var(--d-brand) !important;
  --sidebar-text-active-color:var(--d-side-ink) !important;
  --button-bg:var(--d-brand) !important; --button-bg-rgb:var(--d-brand-rgb) !important;
  --link-color:var(--d-brand) !important; --link-color-rgb:var(--d-brand-rgb) !important;
}
html[data-kit-brand="refined"] body { background:var(--d-paper) !important; color:var(--d-ink); }
html[data-kit-brand="refined"] :is(.topbar,#global-header) {
  background:var(--d-paper) !important; border-bottom:1px solid var(--d-line) !important;
  --kit-search-bg:var(--d-surface); --kit-search-line:var(--d-line);
  --kit-search-fg:var(--d-muted); --kit-search-fg-hi:var(--d-ink);
  --kit-nav-fg:var(--d-muted); --kit-nav-fg-hi:var(--d-ink);
}
html[data-kit-brand="refined"] :is(.kit-search,.kit-search-pop,.kit-search-host) {
  --kit-pop-bg:var(--d-surface); --kit-pop-fg:var(--d-ink); --kit-pop-fg-2:var(--d-muted);
  --kit-pop-line:var(--d-line); --kit-pop-hover:var(--d-wash);
}
html[data-kit-brand="refined"] :is(:is(.sidebar--left,#SidebarContainer),.SidebarContainer,.SidebarHeader) {
  background:var(--d-side) !important; color:var(--d-side-ink) !important;
}
html[data-kit-brand="refined"] :is(.sidebar--left,#SidebarContainer) :is(.SidebarChannelLinkLabel,.SidebarHeader__teamname,.SidebarChannelGroupHeader_text) { color:var(--d-side-ink) !important; }
html[data-kit-brand="refined"] :is(.sidebar--left,#SidebarContainer) .SidebarChannel { margin:2px 8px; border-radius:9px; }
html[data-kit-brand="refined"] :is(.sidebar--left,#SidebarContainer) .SidebarChannel.active { background:rgba(var(--d-side-rgb),.12) !important; }
html[data-kit-brand="refined"] :is(.sidebar--left,#SidebarContainer) #kit-nav-sidebar { padding:8px 0 14px; }
html[data-kit-brand="refined"] .kit-board .sidebar { background:var(--d-paper2); padding:20px 14px; }
html[data-kit-brand="refined"] .kit-board .sidebar .nav-item { min-height:42px; }
/* Kit mode (body.kit-chat): the board's sidebar is the one left column, on
   the old chat sidebar's ground — kit-theme.json's sidebarBg / sidebarText,
   the same --d-side tokens the Mattermost rules above use — with the active
   row's brand edge. The production board beside the chat app keeps paper. */
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar { background:var(--d-side); color:var(--d-side-ink); border-right-color:var(--d-line); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar :is(.nav-item,.section-label,.kit-nav-heading) { color:var(--d-side-ink); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar :is(.section-label,.kit-nav-heading) { color:rgba(var(--d-side-rgb),.64); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .kit-nav-heading:hover { color:var(--d-side-ink); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .nav-item:hover { background:rgba(var(--d-side-rgb),.08); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .nav-item.active { background:rgba(var(--d-side-rgb),.12); box-shadow:inset 3px 0 0 var(--d-brand); color:var(--d-side-ink); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .nav-item .count { color:rgba(var(--d-side-rgb),.6); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .sidebar-foot a { color:rgba(var(--d-side-rgb),.64); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .sidebar-foot a:hover { color:var(--d-brand); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar.chat-sidebar { padding-bottom:14px; }
html[data-kit-brand="refined"] .kit-board .main { background:var(--d-paper); }
html[data-kit-brand="refined"] .kit-board .view { max-width:var(--d-content); padding:32px 32px 80px; }
html[data-kit-brand="refined"] .kit-board .view-head { padding-bottom:24px; gap:14px; }
html[data-kit-brand="refined"] .kit-board .view-head h1 { font-family:var(--d-heading); font-size:30px; font-weight:550; letter-spacing:-.035em; }
html[data-kit-brand="refined"] .kit-board .group-head { background:transparent; padding:10px 8px; color:var(--d-muted); }
html[data-kit-brand="refined"] .kit-board .card { box-shadow:var(--d-shadow); }
html[data-kit-brand="refined"] .kit-board .row { padding:var(--d-row) 18px; min-height:54px; gap:12px; }
html[data-kit-brand="refined"] .kit-board .row .title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.5; font-size:14px; }
html[data-kit-brand="refined"] .kit-board .row .meta { gap:12px; }
html[data-kit-brand="refined"] .kit-board .row .ref { color:var(--d-soft); font-size:10px; }
html[data-kit-brand="refined"] .kit-board .row .due { font-variant-numeric:tabular-nums; font-size:12px; }
html[data-kit-brand="refined"] .kit-board .row .due.today { background:var(--d-wash); color:var(--d-brand); padding:4px 8px; border-radius:20px; }
html[data-kit-brand="refined"] .kit-board .status-btn { min-width:32px; min-height:32px; }
html[data-kit-brand="refined"] .kit-board .project-grid { gap:18px; }
html[data-kit-brand="refined"] .kit-board .project-card { padding:24px; min-height:165px; }
html[data-kit-brand="refined"] .kit-board .project-card h3 { font-size:21px; letter-spacing:-.02em; }
html[data-kit-brand="refined"] :is(.btn,.chip,.project-card,.nav-item,.row,.kit-sr) { transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease; }
html[data-kit-brand="refined"] :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--d-brand); outline-offset:3px; }
html[data-kit-brand="refined"] .kit-board .panel-head { padding:18px 24px; }
html[data-kit-brand="refined"] .kit-board .panel-body { padding:24px; gap:20px; }
html[data-kit-brand="refined"] :is(.channel-view,.channel-header,.post-list__table,.post-list__dynamic,.app__content) { background-color:var(--d-surface) !important; }
html[data-kit-brand="refined"] :is(.channel-header,.sidebar--right) { border-color:var(--d-line) !important; }
html[data-kit-brand="refined"] .post-message__text { line-height:1.7 !important; }
html[data-kit-brand="refined"] .post { padding-top:8px; padding-bottom:8px; }
html[data-kit-brand="refined"] :is(.post--highlight,.post--hovered) { background-color:var(--d-paper2) !important; }
html[data-kit-brand="refined"] :is(.post-create__container,.AdvancedTextEditor__body) { background:var(--d-surface) !important; border-color:var(--d-line) !important; }
html[data-kit-brand="refined"] :is(.AdvancedTextEditor,.attachment) { border-radius:var(--d-radius) !important; }
/* Refined: an airy, precise workspace with understated familiar structure. */
html[data-kit-brand="refined"] .kit-board .card { border-radius:10px; }
html[data-kit-brand="refined"] .kit-board .view-head h1 { font-size:27px; font-weight:600; }
html[data-kit-brand="refined"] .kit-board .project-card h3 { font-family:var(--sans); font-size:18px; }
/* The approved original fox, at its native 1254px resolution. Existing loading
   controllers still dismiss immediately. No animation event is intercepted. */
html[data-kit-brand="refined"] :is(.wordmark img,#global-header img[alt="Kit"],a[href$="/messages/@kit"] img,img[alt="kit profile image"]) { content:url('/board/brand/sleeping-fox.png'); object-fit:contain; }
html[data-kit-brand="refined"] .wordmark img { width:32px; height:32px; }
html[data-kit-brand="refined"] .LoadingScreen { background:var(--d-paper) !important; }
html[data-kit-brand="refined"] .LoadingAnimation>svg { visibility:hidden; animation:none !important; position:absolute; }
html[data-kit-brand="refined"] .LoadingAnimation::before { content:''; width:112px; height:112px; background:url('/board/brand/sleeping-fox.png') center/contain no-repeat; animation:kit-fox-arrive 4.2s cubic-bezier(.16,1,.3,1) both; }
html[data-kit-brand="refined"] .KitSplash__word { color:var(--d-ink); font:28px var(--d-heading); }
html[data-kit-brand="refined"] .boot>img { content:url('/board/brand/sleeping-fox.png'); width:88px; height:88px; animation:kit-fox-arrive 4.2s cubic-bezier(.16,1,.3,1) both; }
html[data-kit-brand="refined"] .kit-board .empty::before { content:''; display:block; width:68px; height:68px; background:url('/board/brand/sleeping-fox.png') center/contain no-repeat; margin:0 auto 20px; }
html[data-kit-brand="refined"] .kit-board .empty { border-style:solid; padding:42px 24px; background:var(--d-surface); }
html[data-kit-brand="refined"] .login-body-message.custom-branding::before { background:url('/board/brand/sleeping-fox.png') left center/100px auto no-repeat; height:112px; }
html[data-kit-brand="refined"] .header-footer-route { background:radial-gradient(ellipse at 18% 25%,var(--d-wash),transparent 55%),var(--d-paper) !important; }
html[data-kit-brand="refined"] .footer-copyright::after { content:'Kit · More room to be human.'; }
@keyframes kit-fox-arrive { from { transform:rotate(-720deg); } to { transform:rotate(0deg); } }
@media(max-width:900px) {
  html[data-kit-brand="refined"] .kit-board .view { padding:24px 18px 84px; }
  html[data-kit-brand="refined"] .kit-board .row { padding:12px; }
  html[data-kit-brand="refined"] .kit-board .row .meta { gap:6px; }
  html[data-kit-brand="refined"] .kit-board .view-head h1 { font-size:27px; }
  html[data-kit-brand="refined"] .kit-board .panel-body { padding:18px; }
}
@media(max-width:600px) {
  html[data-kit-brand="refined"] .kit-board .view { padding:20px 12px 90px; }
  html[data-kit-brand="refined"] .kit-board .view-head { padding-bottom:18px; }
  html[data-kit-brand="refined"] .kit-board .row .title { font-size:14px; -webkit-line-clamp:3; }
  html[data-kit-brand="refined"] .kit-board .status-btn { min-width:40px; min-height:40px; }
  html[data-kit-brand="refined"] .kit-board .project-card { padding:20px; min-height:145px; }
  html[data-kit-brand="refined"] .kit-board .panel-head { padding:14px 16px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-kit-brand="refined"] *,html[data-kit-brand="refined"] *::before,html[data-kit-brand="refined"] *::after { scroll-behavior:auto !important; transition:none !important; }
  html[data-kit-brand="refined"] .LoadingAnimation::before,html[data-kit-brand="refined"] .boot>img,html[data-kit-brand="refined"] .msg-typing::before { animation:none !important; transform:none !important; }
  html[data-kit-brand="refined"] :is(.panel,.toast,.overlay) { animation:none !important; }
}
html[data-kit-brand="refined"] #global-header svg[aria-label="Kit"] { background:url('/board/brand/sleeping-fox.png') center/contain no-repeat; width:26px; height:26px; }
html[data-kit-brand="refined"] #global-header svg[aria-label="Kit"] path { opacity:0; }
/* Keep global header controls in the page ink color. */
html[data-kit-brand="refined"] #global-header { --sidebar-text-rgb:var(--d-ink-rgb) !important; --sidebar-header-text-color-rgb:var(--d-ink-rgb) !important; color:var(--d-ink); }
@media(max-width:768px) {
  html[data-kit-brand="refined"] #navbar { background:var(--d-side) !important; color:var(--d-side-ink) !important; border-color:var(--d-line) !important; --sidebar-header-text-color-rgb:var(--d-side-rgb) !important; }
  html[data-kit-brand="refined"] #navbar :is(button,a,.navbar-toggle) { color:var(--d-side-ink) !important; }
  html[data-kit-brand="refined"] #navbar svg { fill:var(--d-side-ink); }
  /* The host already reserves the mobile navbar above the pane. */
  html[data-kit-brand="refined"] .KitPane.app__content { padding-top:0 !important; }
}
/* Calendars, schedules and tools deliberately ask for a wider working
   surface than a task list. Preserve that current-app layout contract. */
html[data-kit-brand="refined"] .kit-board .view.wide { max-width:1440px; }

/* Chat fills its canvas; board row spacing must never inset the host layout. */
html[data-kit-brand="refined"] :is(#channel_view,#app-content,.main-wrapper) { border-radius:0 !important; }
html[data-kit-brand="refined"] .main-wrapper { margin:0 !important; }

/* Approved splash motion: body-centered, three turns with a gentle swell.
   Loaded in the document head so refreshes use this before app JavaScript.
   Keep aligned with infra/mm-webapp/patches/0004-kit-splash-moon.patch. */
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art { position: relative; --kitsune-splash-duration: 3200ms; --kitsune-moon-duration: var(--kitsune-splash-duration); }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__fox { display: block; position: relative; top: -5.28px; transform-origin: 50% 54%; width: 132px; height: 132px; object-fit: contain; animation: kit-splash-body-spin var(--kitsune-splash-duration) cubic-bezier(.3,0,.7,1) both, kit-splash-body-swell var(--kitsune-splash-duration) ease-in-out both; }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon { position: absolute; top: -14px; right: -32px; width: 26px; height: 26px; border-radius: 50%; box-shadow: -7px 3px 0 #c7b984; transform: rotate(-24deg); animation: kit-splash-moon-glow var(--kitsune-moon-duration) ease-in-out both; }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon::before { content: ''; position: absolute; inset: -24px; border-radius: 50%; background: radial-gradient(circle, #e3ca8b55 0%, #e9d6a32b 32%, #eddfba10 52%, transparent 72%); opacity: .2; transform: scale(.9); animation: kit-splash-moon-halo var(--kitsune-moon-duration) ease-in-out both; }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon::after { content: ''; position: absolute; top: -8px; right: -10px; width: 9px; height: 9px; background: radial-gradient(circle, #e0ca91 0%, #bdab78 55%, #bdab7800 100%); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: kit-splash-moon-twinkle var(--kitsune-moon-duration) ease-in-out both; }
@keyframes kit-splash-body-spin { from { transform: rotate(-1080deg); } to { transform: rotate(0deg); } }
@keyframes kit-splash-body-swell {
    0%, 100% { scale: 1; }
    50% { scale: 1.08; }
}
@keyframes kit-splash-moon-glow {
    0%, 100% { filter: drop-shadow(0 0 2px #d5bd7e22); transform: rotate(-24deg) scale(1); }
    45%, 55% { filter: drop-shadow(0 0 8px #d5bd7e66); transform: rotate(-24deg) scale(1.035); }
}
@keyframes kit-splash-moon-halo {
    0%, 100% { opacity: .2; transform: scale(.9); }
    45%, 55% { opacity: .7; transform: scale(1.08); }
}
@keyframes kit-splash-moon-twinkle {
    0%, 100% { opacity: 0; transform: scale(.9); }
    45%, 55% { opacity: .65; transform: scale(1.05); }
}
/* brand.js reveals the decoded image, preventing partially downloaded ears
   from spinning on slow connections. Keep the layout and moon visible. */
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__fox { visibility: hidden; }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__fox,
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__moon,
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__moon::before,
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__moon::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
    html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__fox,
    html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon,
    html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon::before,
    html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon::after { animation: none; }
}