@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/SF-Pro-Display-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/SF-Pro-Display-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/SF-Pro-Display-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apple Color Emoji";
  src: url("/fonts/AppleColorEmoji.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2600, U+FE0F, U+1F305, U+1F307, U+1F513;
}

:root {
  --bg: #0b0b0d;
  --text: #f5f5f7;
  --white: #ffffff;
  --muted: #a8adb5;
  --sys: #8c9199;
  --label: #7a8087;
  --stroke: #a8adb5;
  --hair: rgba(255, 255, 255, 0.08);
  --heading: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --body: Inter, "Inter", system-ui, sans-serif;
  --emoji: "Apple Color Emoji", emoji, sans-serif;
  --teal-a: rgba(115, 237, 224, 0.3);
  --teal-b: rgba(51, 209, 196, 0.3);
  --teal-c: rgba(23, 173, 168, 0.3);
  /* Figma 223:6604 / «Градиент, заголовка»: ellipse scale from
     gradientTransform matrix(8.5771 1.5 …) r=10 on a 69×24 glyph box → ~124.3%. */
  --metal: radial-gradient(
    124.3% 124.2% at 50% 50%,
    #d9dfe8 0%,
    #b0b5bb 25%,
    #888a8f 50%,
    #5f6062 75%,
    #4a4b4c 87.5%,
    #363636 100%
  );
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

html,
body {
  background: var(--bg);
  color: var(--white);
  min-height: 100%;
  min-width: 1440px;
}

body {
  font-family: var(--body);
}

.screen {
  width: 100%;
  min-width: 1440px;
  min-height: 2262px;
  background: var(--bg);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  /* Flatten/metadata: sidebar (8,16), day (316,16) — not auto-layout pad 16. */
  padding: 16px 24px 16px 8px;
  position: relative;
}

.edge-fade {
  position: absolute;
  right: 8px;
  left: auto;
  top: 16px;
  width: 1px;
  height: 833px;
  background: linear-gradient(205.16deg, rgba(11, 11, 13, 0) 28.607%, rgb(11, 11, 13) 32.853%);
  pointer-events: none;
}

/* --- Sidebar --- */
.sidebar {
  width: 292px;
  height: 772px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 14px;
  border-radius: 20px;
  border: 1px solid var(--hair);
  box-shadow: 0 22px 40px -4px rgba(0, 0, 0, 0.62);
  position: relative;
  overflow: hidden;
}

.sidebar-fill {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(18% 80% at 50% 1.4%, rgba(46, 48, 54, 0.96) 0%, rgba(23, 23, 26, 0.98) 100%);
  pointer-events: none;
}

.sidebar-inset {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
  pointer-events: none;
  z-index: 2;
}

.sidebar > *:not(.sidebar-fill):not(.sidebar-inset) {
  position: relative;
  z-index: 1;
}

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 4px 0 8px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
}

.avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
}

.profile-name {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  color: var(--text);
  white-space: nowrap;
}

.icon-16 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.icon-20 {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.icon-14 {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

.side-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px 0;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #17171a;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  font-family: inherit;
  text-align: left;
}

.add-task {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(56, 59, 66, 0.21) 0%, rgba(36, 38, 43, 0.21) 100%);
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  font-family: inherit;
  text-align: left;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 264px;
  height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0);
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  color: inherit;
}

.nav span {
  flex: 1 0 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--muted);
}

.nav.is-bright span {
  color: var(--white);
}

.nav.is-active {
  background: linear-gradient(180deg, var(--teal-a) 0%, var(--teal-b) 40%, var(--teal-c) 100%);
}

.nav.is-active span {
  color: var(--white);
}

.nav.is-struck span {
  text-decoration: line-through;
}

.section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: normal;
  color: var(--label);
  white-space: nowrap;
}

/* --- Main column --- */
.day {
  width: 1100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  /* Viewport-center the 1100px column when it won't overlap the sidebar (316px). */
  margin-left: max(0px, calc(50vw - 866px));
}

.day-live {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
}

.day-live[hidden],
.day-stub[hidden] {
  display: none !important;
}

.day-stub {
  width: 100%;
  min-height: 200px;
}

.screen.is-sidebar-collapsed .sidebar {
  display: none;
}

.screen.is-sidebar-collapsed .day {
  margin-left: max(0px, calc(50vw - 550px - 24px));
}

.header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 33px;
  overflow: hidden;
}

.layout-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.title {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--heading);
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
  color: var(--white);
}

.toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(31, 31, 33, 0.2);
  overflow: hidden;
  flex-shrink: 0;
}

.toggle-on {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(191, 255, 245, 0.35);
  box-shadow: 0 6px 14px 0 rgba(31, 184, 173, 0.38);
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-on::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--teal-a) 0%, var(--teal-b) 40%, var(--teal-c) 100%);
  pointer-events: none;
}

.toggle-on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.toggle-on span {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  color: var(--white);
  white-space: nowrap;
}

.toggle-off {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 6px 14px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.toggle-off span {
  position: relative;
  z-index: 1;
}

.toggle-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px 14px;
  flex-shrink: 0;
}

.toggle.is-projects .toggle-on {
  border: 0;
  box-shadow: none;
  background: none;
}

.toggle.is-projects .toggle-on::before,
.toggle.is-projects .toggle-on::after {
  display: none;
}

.toggle.is-projects .toggle-on span {
  font-weight: 400;
  color: var(--muted);
}

.toggle.is-projects .toggle-off {
  position: relative;
  border-radius: 10px;
  border: 1px solid rgba(191, 255, 245, 0.35);
  box-shadow: 0 6px 14px 0 rgba(31, 184, 173, 0.38);
  font-weight: 600;
  color: var(--white);
}

.toggle.is-projects .toggle-off::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--teal-a) 0%, var(--teal-b) 40%, var(--teal-c) 100%);
  pointer-events: none;
}

.toggle.is-projects .toggle-off::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.metal {
  font-family: var(--heading);
  font-weight: 500;
  background-image: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: normal;
}

.lock-20 {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.date {
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.time {
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  color: var(--sys);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Period headers */
.period {
  position: relative;
  width: 1044px;
  height: 64px;
  flex-shrink: 0;
}

.period-line {
  position: absolute;
  left: 0;
  top: 28.5px;
  width: 1047px;
  height: 3px;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.period-chips {
  position: absolute;
  top: 0;
  left: 284px;
  width: 477px;
  height: 64px;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 10px;
  z-index: 1;
}

.period-chips.evening {
  left: 289px;
  width: 467px;
  gap: 10px;
}

/* Owner glass + Figma chip chrome. Knockout underlay hides the period rule
   inside the chip; hairline is painted on top so it is not covered. No 6px
   outer halo — Figma’s divider meets the chip edge. */
.glass {
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  min-width: 0;
  height: 44px;
  position: relative;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0);
  border: 0;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg);
  z-index: 0;
  pointer-events: none;
}

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(74, 74, 76);
  z-index: 2;
  pointer-events: none;
}

.glass > * {
  position: relative;
  z-index: 1;
}

.glass-time {
  flex: 0 0 auto;
  width: 146px;
}

.glass-time.evening-time {
  width: 145px;
}

.glass-name.evening-name {
  flex: 0 0 auto;
  width: 225px;
}

.glass-lock {
  flex: 0 0 auto;
  width: 57px;
  height: 44px;
  padding: 10px;
}

.chip-text {
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  height: 24px;
  text-align: center;
  white-space: nowrap;
}

.chip-emoji {
  width: 20px;
  height: 20px;
  font-family: var(--emoji);
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  font-synthesis: none;
}

.lock-chip {
  width: 57px;
  height: 44px;
  display: block;
  flex-shrink: 0;
}

/* Task tree — 518×488, positions from Figma 224:8683 */
.tree {
  position: relative;
  width: 518px;
  height: 488px;
  flex-shrink: 0;
}

.row {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-l1 {
  gap: 15px;
  padding: 10px;
  height: 44px;
}

.row-l2 {
  gap: 7px;
  width: 330px;
  height: 46px;
  padding: 11px 10px;
}

.row-l3 {
  gap: 7px;
  height: 46px;
  padding: 11px 10px;
}

.row-l3.wide {
  width: 363px;
}

.row-l3.std {
  width: 330px;
}

.row-done-wrap {
  position: absolute;
  left: 0;
  top: 443px;
  width: 330px;
  height: 45px;
}

.row-done {
  position: absolute;
  left: 0;
  top: 0;
  width: 330px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 10px;
}

.strike {
  position: absolute;
  left: 53px;
  top: 24px;
  width: 257px;
  height: 1px;
  display: block;
  pointer-events: none;
}

.check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  border: 1.5px solid var(--stroke);
  cursor: pointer;
}

.check.square {
  border-radius: 6px;
}

.check.circle {
  border-radius: 12px;
}

.check.hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.check.checked {
  border-color: rgba(191, 255, 245, 0.45);
  box-shadow:
    0 3px 4px rgba(31, 184, 173, 0.35),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(115, 237, 224, 0.2) 0%, rgba(51, 209, 196, 0.2) 40%, rgba(23, 173, 168, 0.2) 100%);
}

.task {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  white-space: pre;
}

.row-active .task,
.row-active .mins {
  color: var(--white);
}

.row-muted .task,
.row-muted .mins,
.row-done .task,
.row-done .mins {
  color: var(--sys);
}

.mins {
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.chev {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}

.chev img {
  width: 20px;
  height: 20px;
  display: block;
}

.tree-line {
  position: absolute;
  pointer-events: none;
  display: block;
}

.v104 {
  left: 31.25px;
  top: 43.25px;
  width: 1.5px;
  height: 105.5px;
}

.v251 {
  left: 31.25px;
  top: 191.25px;
  width: 1.5px;
  height: 252.5px;
}

.v60 {
  left: 102.25px;
  top: 284.25px;
  width: 1.5px;
  height: 61.5px;
}

.elbow {
  width: 53.5px;
  height: 20.5px;
}

.e-p1-a {
  left: 31.25px;
  top: 43.25px;
}
.e-p1-b {
  left: 31.25px;
  top: 89.25px;
}
.e-p2-a {
  left: 31.25px;
  top: 191.25px;
}
.e-p2-b {
  left: 31.25px;
  top: 242.25px;
}
.e-p2-c {
  left: 31.25px;
  top: 385.25px;
}
.e-n-a {
  left: 102.25px;
  top: 285.25px;
}
.e-n-b {
  left: 102.25px;
  top: 333.25px;
}

.pos-p1 {
  left: 11px;
  top: 0;
}
.pos-p2 {
  left: 11.5px;
  top: 148px;
}
.pos-s1 {
  left: 84px;
  top: 40px;
}
.pos-s2 {
  left: 84px;
  top: 86px;
}
.pos-s3 {
  left: 84px;
  top: 188px;
}
.pos-s4 {
  left: 84px;
  top: 239px;
}
.pos-s5 {
  left: 84px;
  top: 382px;
}
.pos-n1 {
  left: 155px;
  top: 282px;
}
.pos-n2 {
  left: 155px;
  top: 330px;
}

.tree.is-collapsed-p1 .branch-p1 {
  display: none;
}
.tree.is-collapsed-p2 .branch-p2 {
  display: none;
}
.tree.is-collapsed-n .branch-n {
  display: none;
}