/* The desktop that is the site (desk.js): the bar's menu buttons, the tiled
   windows and what goes in them. The menus themselves are menus.css. */

/* ----- the panel on the front page, and the whole screen ----- */
/* Wider than the page's measure -- as wide as the screen allows, to 1440 px --
   and tall enough to be a desktop rather than a picture of one. */
#desk {
  display: block; position: relative;
  width: min(100vw - 2.5rem, 1440px); margin: 1rem 0 .75rem;
  margin-left: calc(50% - min(50vw - 1.25rem, 720px));
  height: min(72vh, 720px); min-height: 480px;
  border: 1px solid var(--ink-key); box-shadow: 5px 5px 0 var(--ink-key);
  background: #2b2b24;
}
#desk > img { display: block; width: 100%; height: 100%; object-fit: cover; }
#desk.full {
  position: fixed; inset: 0; z-index: 1000; width: auto; height: auto; min-height: 0;
  margin: 0; border: 0; box-shadow: none;
}
html.desk-full, html.desk-full body { overflow: hidden; }
.desk-scroll { text-align: center; font: 600 1.35rem "Cormorant Garamond", Georgia, serif; color: var(--gold); margin: 2rem 0 0; }
.desk-scroll b { display: block; font-size: 1.6rem; line-height: 1; animation: desk-nudge 1.6s ease-in-out infinite; }
@keyframes desk-nudge { 50% { transform: translateY(6px); } }

/* ----- the cues: what to do, until something is done ----- */
.desk-cues { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; transition: opacity .3s; }
.desk-cues.on { opacity: 1; }
.desk-cues .cue {
  position: absolute; display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 5px 6px; border-radius: 16px; background: rgba(18,18,18,.78);
  color: #f4c27c; font: 600 21px/1.15 "Cormorant Garamond", Georgia, serif; white-space: nowrap;
}
.desk-cues .cue[hidden] { display: none; }
.desk-cues .cue svg { width: 44px; height: 22px; flex: none; }
.desk-cues .cue.full { flex-direction: column; align-items: flex-end; gap: 0; padding: 2px 10px 5px; }
.desk-cues .cue.full svg { width: 22px; height: 34px; }
.desk .sim-bar .grow.hint { color: #f4c27c; }
/* The bar's two menu buttons glow until one is used. */
.desk .sim-bar .desk-menu.pulse { animation: desk-glow 1.8s ease-in-out infinite; }
@keyframes desk-glow { 50% { background: #5a4520; color: #fff2d0; box-shadow: 0 0 10px 2px rgba(233,184,106,.55); } }
@media (prefers-reduced-motion: reduce) {
  .desk .sim-bar .desk-menu.pulse, .desk-scroll b { animation: none; }
  .desk .sim-bar .desk-menu.pulse { background: #5a4520; }
}

.desk .sim-bar .desk-menu {
  all: unset; cursor: pointer; padding: 0 7px; color: var(--bar-hot); font-size: 15px; line-height: 26px;
}
.desk .sim-bar .desk-menu.keys { font: 700 12px/26px "JetBrains Mono", monospace; }
/* One line, centred: two glyphs in a narrow button wrapped on a phone and
   were drawn above the bar. */
.desk .sim-bar .desk-menu { display: grid; place-items: center; height: 26px; white-space: nowrap; }
/* The buttons and workspaces keep their size; only the title gives way. */
.desk .sim-bar > button, .desk .sim-bar .sim-ws, .desk .sim-bar .time { flex: none; }
.desk .sim-bar .grow { min-width: 0; text-overflow: ellipsis; }
.desk .sim-bar .desk-menu:hover, .desk .sim-bar .desk-menu:focus-visible { background: #2a2a2a; }
/* A workspace with windows on it is marked, as Hyprland's bar marks it. */
.desk .sim-ws span.used:not(.on) { color: #d9cfb6; }
.desk .sim-ws span.used::after { content: "·"; margin-left: 1px; }
@media (max-width: 640px) { .desk .sim-bar .stat { display: none; } }

/* ----- tiles: a workspace, split between its windows ----- */
.desk-tiles { position: absolute; inset: 26px 0 0 0; z-index: 2; pointer-events: none; }
.desk-ws { position: absolute; inset: 0; display: flex; gap: 8px; padding: 8px; }
.desk-ws[hidden] { display: none; }
@media (max-width: 759px) { .desk-ws { padding: 4px; } }

.desk-win {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; pointer-events: auto;
  background: #181818; border: 2px solid #3a3a3a; border-radius: 8px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
/* The welcome window at a first visit: two-thirds of the width, so the
   wallpaper and the clock are in sight beside it. A second window on its
   workspace takes the class away (desk.js), and a phone keeps it full. */
@media (min-width: 760px) { .desk-win.intro { flex: 0 1 min(64%, 940px); } }
/* Hyprland's active border: the theme's gold on the window with focus. */
.desk-win.focus { border-color: var(--bar-hot); }
.desk-head {
  flex: none; height: 30px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 12px;
  background: #121212; color: #d9cfb6; font: 12px/30px "JetBrains Mono", monospace;
}
.desk-head .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-head .shut {
  all: unset; cursor: pointer; width: 24px; height: 22px; text-align: center; line-height: 22px;
  border-radius: 4px; color: #a79f8a; font-size: 16px;
}
.desk-head .shut:hover, .desk-head .shut:focus-visible { background: #3a2a1a; color: var(--bar-hot); }
.desk-body { flex: 1; min-height: 0; position: relative; }

/* A page of the site, as it is. */
.desk-win.page .desk-body { background: #f2e3c0; }
.desk-win.page iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* A program: its picture beside its Terminal Guide entry, and the examples
   and See also across the width beneath both. */
.desk-win.app .desk-body {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px 22px;
  padding: 18px; overflow: auto; background: #181818; color: #e8e1cf;
  user-select: text; cursor: auto;
}
.desk-win.app.pictured .desk-body { grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); }
.desk-win.app.pictured .desk-more { grid-column: 1 / -1; }
.desk-pic {
  min-width: 0; aspect-ratio: 16 / 10;
  background: #0d0d0d center / contain no-repeat; border: 1px solid #333;
}
.desk-txt { min-width: 0; max-width: 60rem; font: 14px/1.6 "JetBrains Mono", monospace; }
.desk-txt h2 {
  margin: 0 0 .5rem; padding: 0; border: 0; font: 600 30px/1.1 "Cormorant Garamond", Georgia, serif;
  color: #f4c27c; text-transform: none; letter-spacing: 0;
}
.desk-txt h3 {
  margin: 1.1rem 0 .4rem; font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em;
  text-transform: uppercase; color: #8e8778;
}
.desk-txt p { margin: 0 0 .8rem; }
.desk-txt .lede { font-size: 15px; color: #f2e3c0; }
.desk-txt .cmd { color: var(--bar-hot); }
.desk-txt .why { color: #cfc6b0; border-left: 2px solid #87704f; padding-left: .8rem; }
.desk-txt .thin { color: #8e8778; }
.desk-txt .see { color: #8e8778; margin-top: 1rem; }
.desk-txt code { color: #f4c27c; background: #242424; padding: 0 .25em; border-radius: 3px; }
.desk-txt a { color: #fccf8a; }
.desk-txt a code {
  background: #242424; color: #f4c27c; border: 0;
  text-decoration: underline; text-decoration-color: #87704f;
}
/* As the guide sets them: each line as written -- a command, or a key the
   program answers to -- with its comment dimmed. */
.desk-txt pre.ex {
  margin: 0; padding: .7rem .8rem; background: #0f0f0f; color: #efe6d2; box-shadow: none;
  border: 1px solid #2c2c2c; border-radius: 4px;
  font: 13px/1.6 "JetBrains Mono", monospace; overflow-x: auto; white-space: pre;
  scrollbar-color: #4a4a4a #0f0f0f;
}
.desk-txt pre.ex .run { color: #efe6d2; }
.desk-txt pre.ex .note { color: #8e8778; }

/* A program's details say how they go. */
.desk-head .tip { flex: none; color: #8e8778; font-size: 11px; font-style: italic; }
@media (max-width: 900px) { .desk-head .tip { display: none; } }
.desk-win.app { cursor: pointer; }
.desk-win.app .desk-txt, .desk-win.app pre { cursor: auto; }

/* The title bar's links: the full entry, the man page, the project's home. */
.desk-head .links { display: flex; gap: 4px; flex: none; }
.desk-head .links a {
  color: #fccf8a; text-decoration: none; padding: 0 8px; line-height: 20px;
  border: 1px solid #5a4a30; border-radius: 10px; font-size: 11px;
}
.desk-head .links a:hover, .desk-head .links a:focus-visible { background: #fccf8a; color: #121212; }
@media (max-width: 640px) { .desk-head .links a:nth-child(n+3) { display: none; } }

/* A terminal program: its entry set in a foot window, as it would be read. */
.desk-win.foot .desk-body { background: #151515; }
.desk-win.foot .desk-txt h2 { font: 700 15px/1.4 "JetBrains Mono", monospace; color: #e9b86a; }
.desk-win.foot .desk-txt h2::before { content: "── "; color: #5a4a30; }

/* Narrow: the picture above the words. */
@container (max-width: 640px) { .desk-win.app.pictured .desk-body { grid-template-columns: minmax(0, 1fr); } }
.desk-win.app { container-type: inline-size; }

/* The keyboard's place, always visible: a window with focus, a bar button. */
.desk-win:focus { outline: none; }
.desk-win:focus-visible { border-color: var(--bar-hot); box-shadow: 0 0 0 2px rgba(233,184,106,.45); }
.desk .sim-ws span:focus-visible, .desk-head .shut:focus-visible { outline: 2px solid var(--bar-hot); outline-offset: -2px; }


/* The line of help under the panel. */
.desk-note { font-size: .8rem; color: var(--ink-dim); margin: 0 0 2rem; }
.desk-note kbd {
  font: .72rem "JetBrains Mono", monospace; padding: 0 .3rem;
  border: 1px solid var(--ink-key); border-radius: 3px; background: var(--paper-raised);
}