/* MUJIN · shelf objects / observation-driven window. Outer board geometry is unchanged. */
.cl-card.cl-clock.shelf-window-widget {
  display: flex; flex-direction: column; gap: 9px; padding: 13px 14px 11px;
  border: 1px solid #e0e5e4; border-image: none; border-radius: 12px;
  background: linear-gradient(115deg, #fafbf9, #eef1ee 60%, #f9faf8);
  box-shadow: inset 0 1px 0 #fff, 0 3px 7px #213b4210;
  outline: none; overflow: hidden; isolation: isolate;
}
.shelf-window-widget::before,.shelf-window-widget::after { content: none; display: none; }
.shelf-window-widget .cabinet-display {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  flex: 0 0 126px; min-width: 0; min-height: 0; padding: 4px 8px 6px;
  border: 9px solid transparent; border-image: url('/assets/oak-cabinet-frame.png') 160 stretch;
  background: linear-gradient(105deg,#e8e5dc,#f5f4ed 36%,#eeece3);
  box-shadow: inset 0 5px 9px #48351f20,inset 3px 0 5px #715b3620,0 2px 3px #3a352414;
  isolation: isolate;
}
.shelf-window-widget .cl-clock-date {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  align-self: center; flex: 0 0 29px; min-height: 29px; max-width: 100%;
  padding: 3px 10px; border: 1px solid #525e65; border-radius: 5px;
  background: linear-gradient(130deg, #2f3d43, #243037);
  box-shadow: inset 0 1px 2px #152126, 0 1px 0 #fff, 0 2px 3px #273c4012;
  color: #e7f3f2; font: 10px/1.1 var(--font, sans-serif); letter-spacing: .08em;
}
.cabinet-date-year { display: grid; gap: 2px; color: #c6d4d4; font: 9px/1.1 ui-monospace, monospace; letter-spacing: .12em; }
.cabinet-date-year small { color: #8eaaaa; font: 6px/1 ui-monospace, monospace; letter-spacing: .18em; }
.shelf-window-widget #workspace-date { display: flex; align-items: center; }
.cabinet-date-digits { display: flex; align-items: center; gap: 3px; }
.cabinet-date-digit { position: relative; display: block; width: 10px; height: 17px; }
.cabinet-date-segment { position: absolute; background: #b2dcd5; opacity: .07; border-radius: 1px; }
.cabinet-date-segment.is-on { opacity: 1; background: #e4f7ef; box-shadow: 0 0 3px #c5f4da22; }
.cabinet-date-segment[data-segment=a],.cabinet-date-segment[data-segment=g],.cabinet-date-segment[data-segment=d] { width: 7px; height: 2px; left: 1.5px; clip-path: polygon(16% 0,84% 0,100% 50%,84% 100%,16% 100%,0 50%); }
.cabinet-date-segment[data-segment=a] { top: 0; }.cabinet-date-segment[data-segment=g] { top: 7.5px; }.cabinet-date-segment[data-segment=d] { bottom: 0; }
.cabinet-date-segment[data-segment=b],.cabinet-date-segment[data-segment=c],.cabinet-date-segment[data-segment=e],.cabinet-date-segment[data-segment=f] { width: 2px; height: 7px; clip-path: polygon(50% 0,100% 16%,100% 84%,50% 100%,0 84%,0 16%); }
.cabinet-date-segment[data-segment=b] { right: 0; top: 1px; }.cabinet-date-segment[data-segment=c] { right: 0; bottom: 1px; }
.cabinet-date-segment[data-segment=f] { left: 0; top: 1px; }.cabinet-date-segment[data-segment=e] { left: 0; bottom: 1px; }
.cabinet-date-dot { align-self: flex-end; width: 2px; height: 2px; background: #e4f7ef; margin: 0 1px 1px; border-radius: .5px; }
.shelf-window-widget .cl-clock-date #workspace-weekday { color: #d5e2e2; padding-left: 8px; border-left: 1px solid #64767b; font-size: 10px; font-weight: 500; letter-spacing: .03em; white-space: nowrap; }

/* The upper cabinet alone has an oak frame; both original objects sit on its wooden shelf. */
.shelf-window-widget.cl-clock .clock-brand-line {
  position: relative; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  align-items: end; justify-content: stretch; column-gap: 12px;
  flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 1px 3px;
  border: 0; border-radius: 0; background: none; box-shadow: none; isolation: isolate;
}
.shelf-window-widget.cl-clock .clock-brand-line::before {
  content: ''; display: block; position: absolute; left: -7px; right: -7px; top: auto; bottom: -2px;
  height: 10px; border-radius: 1px; clip-path: polygon(3% 0,97% 0,100% 100%,0 100%);
  background: repeating-linear-gradient(2deg,#aa7c4720 0 1px,transparent 1px 4px),linear-gradient(180deg,#b38b5e,#dfc299 70%,#c6a374);
  box-shadow: none; z-index: 0; pointer-events: none;
}
.shelf-window-widget.cl-clock .clock-brand-line::after {
  content: ''; display: block; position: absolute; inset: auto -7px -7px;
  height: 6px; border: 1px solid #a5835c; border-top-color: #e9d0ab; border-radius: 0 0 1px 1px;
  background: repeating-linear-gradient(0deg,#73522e1a 0 1px,transparent 1px 3px),linear-gradient(180deg,#c09b6c,#a47b4e); filter: none;
  box-shadow: 0 5px 6px -3px #4b382f33, 0 1px 1px #ebd9b880 inset; z-index: 2; pointer-events: none;
}
.shelf-window-widget.cl-clock .clock-brand-line #workspace-clock {
  z-index: 1; align-self: end; justify-self: center; width: 100%; max-width: 184px;
  min-width: 0; height: auto; margin: 0; padding: 0; transform: translateY(2px);
  background: none; border: 0; outline: 0; box-shadow: none; border-radius: 0; line-height: 0;
}
.shelf-window-widget .sculpted-clock-readout { filter: drop-shadow(0 2px 1px #3c454526); }
.shelf-window-widget.cl-clock .clock-logo-glint {
  position: relative; z-index: 1; align-self: end; justify-self: center; width: 100%; max-width: 113px;
  min-width: 0; margin-bottom: 0; transform: none; filter: drop-shadow(1px 3px 1px #24354b25);
}
.shelf-window-widget .clock-logo-glint::before { content: ''; display: block; position: absolute; inset: auto 9% -2px; height: 5px; background: #26334840; border-radius: 50%; filter: blur(2px); z-index: -1; }
.shelf-window-widget .clock-logo-face { display: none; }
.shelf-window-widget.cl-clock .clock-brand-logo { display: block; width: 100%; height: auto; max-width: none; margin: 0; object-fit: contain; filter: none; }

/* A view, not a live camera: scene conditions use the same valid KMA observation as the readout. */
.shelf-window-widget.cl-clock .weather-block { display: flex; flex: 1; min-height: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.shelf-window-widget.cl-clock .window-weather { display: flex; flex-direction: column; gap: 7px; width: 100%; height: 100%; min-height: 0; }
.weather-window {
  --sky-top: #85b5d5; --sky-bottom: #e1f1ee; --distant: #99b7ba; --near: #7c9fa6; --window-ink: #234a61; --cloud: #f6fbfc;
  position: relative; display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); grid-template-rows: 26px minmax(0,1fr);
  flex: 1; min-width: 0; min-height: 103px; padding: 7px 9px 4px;
  border: 6px solid #e9eeea; border-top-color: #f7faf6; border-right-color: #dce4de; border-bottom-color: #d1dbd5;
  border-radius: 5px; background: #b6ccd2; box-shadow: 0 0 0 1px #b5c1bd, 0 2px 0 #fff, inset 0 0 7px #1d354226;
  overflow: hidden; isolation: isolate; color: var(--window-ink);
}
.weather-window[data-sky=cloudy] { --sky-top: #8199b1; --sky-bottom: #d5e1e6; --distant: #94a8b5; --near: #6f919c; --cloud: #ecf0f4; }
.weather-window[data-sky=rain] { --sky-top: #506f8a; --sky-bottom: #a4bdcb; --distant: #7e98aa; --near: #617f90; --cloud: #b4c6d5; --window-ink: #173952; }
.weather-window[data-sky=snow] { --sky-top: #8da3b9; --sky-bottom: #e6edf2; --distant: #bdcbd2; --near: #9aafb9; --cloud: #eef2f5; }
.weather-window[data-sky=fog] { --sky-top: #acb5b6; --sky-bottom: #dce2dd; --distant: #b0bfbc; --near: #a1b1b0; --cloud: #e0e5e4; }
.weather-window[data-sky=neutral] { --sky-top: #c5d1d0; --sky-bottom: #e4e9e5; --distant: #c0cdca; --near: #afbeb9; --window-ink: #526a72; }
.weather-window[data-period=night]:not([data-sky=neutral]) { --sky-top: #1c304c; --sky-bottom: #435b74; --distant: #334d63; --near: #203f53; --cloud: #7b8fa8; --window-ink: #f1f7f5; }
.weather-window-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg,var(--sky-top),var(--sky-bottom)); transition: background 1s; }
.window-celestial { position: absolute; right: 18%; top: 12%; width: 26px; height: 26px; border-radius: 50%; background: #fff2bc; box-shadow: 0 0 25px 10px #fff4bf42; }
.weather-window:not([data-sky=sunny]) .window-celestial { display: none; }
.weather-window[data-period=night] .window-celestial { width: 21px; height: 21px; background: #f1f5df; box-shadow: 0 0 20px #dceaf75c; }
.window-stars { position: absolute; inset: 0; display: none; background: radial-gradient(circle at 10% 18%,#e6edf6 0 1px,transparent 1.4px),radial-gradient(circle at 36% 8%,#e6edf6 0 .6px,transparent 1px),radial-gradient(circle at 56% 26%,#e6edf6 0 .8px,transparent 1.3px),radial-gradient(circle at 90% 16%,#e6edf6 0 1px,transparent 1.4px); }
.weather-window[data-sky=sunny][data-period=night] .window-stars { display: block; }
.window-cloud { position: absolute; width: 66%; height: 38%; border-radius: 50%; background: radial-gradient(ellipse at center,var(--cloud),transparent 70%); filter: blur(4px); opacity: .8; animation: window-cloud-drift 24s ease-in-out infinite alternate; }
.window-cloud--one { left: -17%; top: -13%; }.window-cloud--two { right: -17%; top: 10%; opacity: .6; animation-delay: -12s; }
.weather-window[data-sky=sunny] .window-cloud { height: 23%; opacity: .45; }.weather-window[data-sky=neutral] .window-cloud { display: none; }
.window-landscape { position: absolute; width: 100%; height: 55%; left: 0; bottom: -1px; }
.window-landscape .distant { fill: var(--distant); }.window-landscape .near { fill: var(--near); }
.window-landscape .city { fill: var(--near); opacity: .55; }.window-landscape .city-light { fill: #fff1be; opacity: 0; }
.weather-window[data-period=night] .city-light { opacity: .6; }
.weather-window[data-sky=fog] .window-landscape { opacity: .5; filter: blur(2px); }
.window-rain,.window-snow { position: absolute; inset: -30px 0 0; display: none; overflow: hidden; }
.weather-window[data-sky=rain] .window-rain,.weather-window[data-sky=snow] .window-snow { display: block; }
.window-rain i { position: absolute; left: var(--x); top: -30px; width: 1px; height: 18px; border-radius: 1px; background: #f3f8f9a6; transform: rotate(12deg); animation: window-rainfall 1.3s linear infinite; animation-delay: var(--delay); }
.window-snow i { position: absolute; left: var(--x); top: -10px; color: #fff; font-size: 9px; line-height: 1; opacity: .9; animation: window-snowfall 6s linear infinite; animation-delay: var(--delay); }
.weather-window[data-sky=rain] .window-reflection { background: repeating-linear-gradient(103deg,transparent 0 18px,#ffffff0c 19px,transparent 20px 37px),linear-gradient(120deg,#fff2,transparent 48%); }
.window-reflection { position: absolute; inset: 0; z-index: 3; background: linear-gradient(118deg,#ffffff30,transparent 27% 55%,#ffffff12 56%,transparent 78%); pointer-events: none; box-shadow: inset 1px 2px 5px #20354020; }
.window-mullion { position: absolute; top: 0; bottom: 0; left: 61%; width: 5px; z-index: 3; border-left: 1px solid #fff; border-right: 1px solid #a3b5b0; background: linear-gradient(90deg,#f5f9f3,#d4dfd6); box-shadow: 2px 0 3px #1838491c; pointer-events: none; }
.shelf-window-widget .window-weather .weather-v4-top { grid-column: 1; grid-row: 1; align-self: start; min-width: 0; z-index: 4; padding: 0; }
.shelf-window-widget .window-weather .weather-v4-city { display: inline-flex; align-items: center; gap: 3px; width: fit-content; max-width: 100%; color: var(--window-ink); }
.shelf-window-widget .window-weather .weather-v4-city svg { width: 11px; height: 11px; flex: none; }
.shelf-window-widget .window-weather .weather-v4-city select { height: 22px; min-height: 22px; width: 85px; max-width: 100%; padding: 0 1px; border: 0; background: transparent; border-radius: 3px; color: inherit; font: 600 11px/1.3 var(--font,sans-serif); }
.shelf-window-widget .window-weather .weather-v4-city option { background: white; color: #23405c; }
.shelf-window-widget .window-weather .weather-v4-main { position: relative; grid-column: 1; grid-row: 2; z-index: 4; align-self: center; min-width: 0; padding: 0; margin: 0; }
.shelf-window-widget .window-weather .weather-v4-reading { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; }
.shelf-window-widget .window-weather .weather-v4-temperature { color: var(--window-ink); font: 400 31px/1.05 var(--font,sans-serif); letter-spacing: -.06em; text-shadow: 0 1px 4px #ffffff2b; }
.shelf-window-widget .window-weather .weather-v4-temperature small { font-size: 12px; margin-left: 2px; letter-spacing: 0; color: inherit; }
.shelf-window-widget .window-weather .weather-v4-description { display: block; max-width: 100%; font-size: 10px; line-height: 1.35; color: var(--window-ink); overflow-wrap: anywhere; }
.shelf-window-widget .window-weather .weather-v4-character { position: absolute; display: grid; place-items: end center; right: 2px; bottom: 0; width: 36%; height: 87%; max-height: 125px; grid-column: auto; grid-row: auto; z-index: 4; overflow: visible; pointer-events: none; }
.shelf-window-widget .window-weather .weather-v4-character::before,.shelf-window-widget .window-weather .weather-v4-character::after { display: none; content: none; }
.shelf-window-widget .window-weather .weather-v4-character .weather-mujini { display: block; width: 100%; height: auto; max-height: 100%; margin: 0; object-fit: contain; transform: translateY(5%); filter: drop-shadow(1px 3px 2px #2d42512b); }
.shelf-window-widget .window-weather .weather-v4-foot { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; flex-wrap: nowrap; min-height: 24px; padding: 0; border: 0; }
.window-weather-meta { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.shelf-window-widget .window-weather .weather-status { margin: 0; padding: 0; color: #6a7d82; font-size: 8px; line-height: 1.45; max-width: none; overflow-wrap: anywhere; }
.shelf-window-widget .window-weather .cl-greeting { display: block; flex: none; width: 100%; padding: 0; margin: 0; color: #50666e; font-size: 9px; line-height: 1.4; letter-spacing: -.04em; }
.shelf-window-widget .window-weather .weather-v4-actions { display: flex; gap: 3px; align-items: center; flex: none; margin: 0; }
.shelf-window-widget .window-weather .location-button { display: inline-flex; gap: 3px; min-height: 24px; height: 24px; padding: 0 6px; border-radius: 5px; border: 1px solid #cad7d2; background: #fafcf9; color: #536e6c; font-size: 9px; box-shadow: 0 1px 0 #fff; white-space: nowrap; }
.shelf-window-widget .window-weather .location-button svg { width: 12px; height: 12px; }
.shelf-window-widget .window-weather .weather-retry { display: grid; place-items: center; width: 21px; min-width: 21px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #6d8382; box-shadow: none; }
.shelf-window-widget .window-weather .weather-retry svg { width: 13px; height: 13px; }
.shelf-window-widget :is(select,button):focus-visible { outline: 2px solid #3579bb; outline-offset: 2px; }
@keyframes window-cloud-drift { from { transform: translateX(-5%); } to { transform: translateX(12%); } }
@keyframes window-rainfall { to { transform: translate(-35px,240px) rotate(12deg); } }
@keyframes window-snowfall { 50% { transform: translate(9px,115px); } to { transform: translate(-5px,240px); } }
@container (max-width: 250px) {
  .shelf-window-widget .cabinet-display { flex-basis: 110px; border-width: 8px; padding: 3px 5px 4px; }
  .shelf-window-widget.cl-clock .clock-brand-line { column-gap: 9px; }
  .shelf-window-widget.cl-clock .clock-brand-line #workspace-clock { width: 100%; max-width: 150px; }
  .shelf-window-widget.cl-clock .clock-logo-glint { max-width: 94px; }
  .shelf-window-widget .window-weather .weather-v4-temperature { font-size: 28px; }
  .shelf-window-widget .window-weather .weather-v4-character { width: 35%; right: 0; }
  .weather-window { padding: 5px 7px 3px; grid-template-rows: 24px minmax(0,1fr); }
  .shelf-window-widget .window-weather .cl-greeting { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .shelf-window-widget .clock-logo-glint::after,.shelf-window-widget .sculpted-colon-mask { animation: none; }
  .window-cloud,.window-rain i,.window-snow i { animation: none; }
  .window-rain i { top: calc(var(--n) * 9px); transform: rotate(12deg); opacity: .6; }
  .window-snow i { top: calc(var(--n) * 8px); }
}

/* Original wordmark artwork, optically matched to the company lettering and centered in its lane. */
body.authed .topbar .logo .brand-slogans { width: 290px; height: 32px; min-width: 0; display: block; text-align: center; }
body.authed .topbar .logo .brand-slogans img,
body.authed .topbar .logo .brand-slogans img:first-child {
  height: 15.5px; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center;
  left: 50%; top: 50%; transform: translate(-50%,-50%); animation-name: workspace-slogan-centered-v2;
}
@keyframes workspace-slogan-centered-v2 { 0%,26.666% { transform: translate(-50%,-50%); } 33.333% { transform: translate(-50%,-200%); } 33.334%,93.333% { transform: translate(-50%,150%); } 100% { transform: translate(-50%,-50%); } }
@media (max-width: 760px) {
  body.authed .topbar .logo { min-width: 0; gap: 3px; align-items: center; }
  body.authed .topbar .office { min-width: 0; padding-left: 0; }
  body.authed .topbar .logo .brand-slogans { width: clamp(90px,26vw,185px); height: 18px; }
  body.authed .topbar .logo .brand-slogans img,body.authed .topbar .logo .brand-slogans img:first-child { height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body.authed .topbar .logo .brand-slogans img { animation: none; display: none; }
  body.authed .topbar .logo .brand-slogans img:first-child { display: block; }
}