/*
 * vladymir.info — authored workstation compositions.
 *
 * Large screens behave like a real desktop: the chrome occupies one viewport
 * and application bodies scroll internally. Smaller screens recompose into a
 * normal document flow instead of shrinking the workstation beyond use.
 */

.desktop {
  flex: 1 1 auto;
  display: grid;
  gap: var(--window-gap);
  padding: var(--window-gap);
  padding-left: var(--space-7);
  min-height: 0;
}

.dock {
  grid-area: dock;
  width: var(--dockapp-size);
  min-height: 0;
}

/* HOME: two focused application rows + a compact instrument rack. */
.desktop--home {
  grid-template-columns: repeat(12, minmax(0, 1fr)) auto;
  grid-template-rows: minmax(0, 1.18fr) minmax(0, .82fr);
  grid-template-areas:
    "about about about now now now now photo photo photo photo photo dock"
    "writing writing writing writing terminal terminal terminal terminal quote quote quote quote dock";
}
.w-about    { grid-area: about; }
.w-now      { grid-area: now; }
.w-photo    { grid-area: photo; }
.w-writing  { grid-area: writing; }
.w-terminal { grid-area: terminal; }
.w-quote    { grid-area: quote; }
.desktop--home .dock {
  align-self: start;
  justify-content: flex-start;
}
.desktop--home .dockapp {
  flex: 0 0 var(--dockapp-size);
  width: 100%;
  min-height: var(--dockapp-size);
}

/* NOTES */
.desktop--notes {
  grid-template-columns: minmax(240px, .82fr) minmax(0, 1.18fr) auto;
  grid-template-rows: minmax(0, 1.3fr) repeat(2, minmax(0, .85fr));
  grid-template-areas:
    "notes    viewer   dock"
    "reading  viewer   dock"
    "recent   viewer   dock";
}
.w-notes      { grid-area: notes; }
.w-viewer     { grid-area: viewer; }
.w-reading    { grid-area: reading; }
.w-recent     { grid-area: recent; }

/* LAB */
.desktop--lab {
  grid-template-columns: minmax(250px, .68fr) minmax(0, .66fr) minmax(0, .66fr) auto;
  grid-template-rows: 1.5fr 1.5fr 1fr;
  grid-template-areas:
    "experiments exp       exp       dock"
    "machines    exp       exp       dock"
    "technotes   telemetry topo      dock";
}
.w-machines    { grid-area: machines; }
.w-topo        { grid-area: topo; }
.w-experiments { grid-area: experiments; }
.w-exp         { grid-area: exp; }
.w-telemetry   { grid-area: telemetry; }
.w-technotes   { grid-area: technotes; }

/* MISC */
.desktop--misc {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "artifacts links    trivia dock"
    "screens   command  audio  dock"
    "oldcomps  oldcomps audio  dock";
}
.w-artifacts { grid-area: artifacts; }
.w-links     { grid-area: links; }
.w-trivia    { grid-area: trivia; }
.w-screens   { grid-area: screens; }
.w-command   { grid-area: command; }
.w-audio     { grid-area: audio; }
.w-oldcomps  { grid-area: oldcomps; }

/* WRITING */
.desktop--writing {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "index dock";
}
.w-writing-index { grid-area: index; }

.desktop--writing-reader {
  grid-template-columns: minmax(250px, .56fr) minmax(0, 1.44fr) auto;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "explorer reader dock";
}
.w-writing-explorer { grid-area: explorer; }
.w-article-reader   { grid-area: reader; }

/* 404: one centered window */
.desktop--404 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--window-gap);
}
.desktop--404 .window {
  flex: 0 1 640px;
  min-height: 0;
  max-height: 100%;
}

@media (min-width: 1101px) {
  .workstation {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .menubar { flex: 0 0 var(--menubar-height); }
  .desktop { flex: 1 1 0; }
  .front-panel { flex: 0 0 var(--front-panel-height); }
}

@media (min-width: 1920px) {
  .desktop {
    gap: calc(var(--window-gap) * 1.75);
    padding: calc(var(--window-gap) * 1.75);
    padding-left: var(--space-7);
  }
}

@media (max-width: 1100px) {
  .desktop {
    display: flex;
    flex-direction: column;
  }
  .desktop .window {
    flex: 0 0 auto;
    min-height: 180px;
  }
  .desktop--home .w-photo { min-height: 340px; }
  .dock {
    width: auto;
    min-height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    order: 99;
  }
  .desktop--home .dockapp,
  .dockapp {
    flex: 1 1 120px;
    width: auto;
    min-height: var(--dockapp-size);
  }
  .desktop--home .dock { justify-content: flex-start; }
  .menubar {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .front-panel {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@media (max-width: 620px) {
  .menubar__nav { order: 3; width: 100%; overflow-x: auto; }
  .menubar__nav a { padding-inline: var(--space-2); }
  .menubar__menu { margin-left: auto; }
  .desktop {
    padding: var(--window-gap);
  }
  .desktop .window { min-height: 220px; }
  .front-panel__launchers { order: 3; width: 100%; }
  .front-panel__hidden { order: 4; width: 100%; }
}