.my-corner { display: none; }
.app-window #maximizeWindow { display: none; }

.app-window[data-app="corner"] {
  top: clamp(58px, 9vh, 110px);
  left: clamp(330px, 30vw, 520px);
  width: min(590px, calc(100vw - 36px));
  height: min(720px, calc(100vh - 110px));
  min-width: 420px;
  min-height: 360px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--taskbar-h) - 12px);
  overflow: hidden;
  resize: both;
  border: 1px solid #57505a;
  background: #100c12;
  box-shadow: none;
}

.app-window[data-app="corner"][data-maximized="true"] {
  position: fixed;
  inset: 8px 8px calc(var(--taskbar-h) + 8px) 8px;
  width: auto !important;
  height: auto !important;
  max-width: none;
  max-height: none;
  resize: none;
}

.app-window[data-app="corner"][data-maximized="true"] .app-window__bar { cursor: default; }
.app-window[data-app="corner"] #maximizeWindow { display: inline-grid; place-items: center; }
.app-window[data-app="corner"] .app-window__content {
  display: block;
  height: calc(100% - 31px);
  min-height: 0;
  padding: 0;
  background: #100c12;
}
.app-window[data-app="corner"] .about-receipt,
.app-window[data-app="corner"] .app-window__stamp,
.app-window[data-app="corner"] .app-window__copy { display: none; }
.app-window[data-app="corner"] .my-corner { display: block; }

.my-corner {
  --corner-surface: #100c12;
  height: 100%;
  color: #e5dfe6;
  background: var(--corner-surface);
  font-family: var(--mono);
}

.my-corner__groups {
  height: 100%;
  padding: 22px 25px 32px;
  overflow: auto;
  scrollbar-color: #514a55 transparent;
  scrollbar-width: thin;
}

.my-corner__group + .my-corner__group { margin-top: 26px; }
.my-corner__group h2 {
  margin: 0 0 9px;
  color: #9f98a4;
  font: 700 9px/1 var(--mono);
  letter-spacing: .15em;
}

.my-corner__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  padding: 2px 5px;
  color: #e5dfe6;
  text-decoration: none;
}
.my-corner__number { color: #b7638e; font: 700 9px/1 var(--mono); }
.my-corner__name { font: 400 12px/1.45 var(--sans); }
a.my-corner__row:hover,
a.my-corner__row:focus-visible { color: #fff; background: #1c171e; outline: 0; }
a.my-corner__row:hover .my-corner__name,
a.my-corner__row:focus-visible .my-corner__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

@media (max-width: 760px) {
  .app-window[data-app="corner"] {
    top: 48px;
    left: 12px !important;
    width: calc(100vw - 24px);
    min-width: 0;
    height: calc(100vh - 104px);
    resize: none;
  }
  .my-corner__groups { padding: 18px; }
  .my-corner__row { grid-template-columns: 34px minmax(0, 1fr); }
}