/* =============================================================================
   Page layout — the two halves of subgrid.org
   desktop : show-off | shell, split 50/50, panels touching (no paper margin)
   mobile  : show-off above, shell below; the show-off collapses upward until
             only the brand lockup remains, as a bar under the top edge.
   ========================================================================== */

.frame {
  position: fixed;
  inset: 0;
  padding: var(--frame);
  background: var(--paper);
}

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  height: 100%;
  background: var(--paper);
}

/* ------------------------------------------------------------------ show off */
/* The left pane: what was opened. Its canvas is its tone — orange when the
   shell holds focus, charcoal when the pane itself does (see tokens.css). */
.showoff {
  position: relative;
  overflow: hidden;
  background: var(--pane-bg);
  color: var(--pane-fg);
  display: flex;
  flex-direction: column;
}

/* The brand lockup: wordmark + mark, bottom aligned, exactly as in the guide. */
.brand {
  position: absolute;
  z-index: 1;
  left: var(--brand-inset-x);
  bottom: var(--brand-inset-y);
  width: var(--brand-w);
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  transform-origin: left bottom;
  transition: opacity 240ms var(--ease);
  /* The lockup follows the canvas tone (white on the orange field, signal on
     the charcoal one), and stays that way even when the visitor runs a
     forced-colours / high-contrast theme. */
  forced-color-adjust: none;
  color: var(--brand-ink);
}

.brand__lockup {
  display: flex;
  align-items: flex-end;
  gap: 0.14em;
}

.brand__lockup svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--brand-ink);
}

.brand__lockup svg path {
  fill: var(--brand-ink);
}

.brand__tag {
  color: var(--brand-ink);
}

.showoff[data-open="true"] .brand {
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------- the open-with tabs */
/* One symbol per open object plus the chat, pinned to the top of the panel, so
   anything can be brought back to the front without retyping a command. The
   strip wears the pane's canvas — charcoal in both tones (see tokens.css) — so
   a focused pane stays one field instead of being cut by an orange band; the
   hairline below it is what separates the strip from the view underneath. */
.tabs {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--strip-bg);
  color: var(--strip-fg);
  border-bottom: var(--hair) solid var(--strip-rule);
}

.tabs[hidden] {
  display: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabwrap {
  display: flex;
  align-items: stretch;
  border-right: var(--hair) solid var(--strip-rule);
}

.tabwrap--active {
  background: var(--strip-active-bg);
}

.tab {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: var(--strip-fg);
  display: flex;
  align-items: center;
  gap: 0.7ch;
  padding: 0.5em 0.3em 0.5em 0.9em;
  cursor: pointer;
  white-space: nowrap;
  max-width: 24ch;
}

.tab__sym {
  color: var(--strip-accent);
  font-size: 0.92em;
}

.tab__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabwrap--active .tab,
.tabwrap--active .tab__sym {
  color: var(--strip-active-fg);
  font-weight: 600;
}

.tab__x {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  line-height: 1;
  padding: 0 0.6em;
  color: var(--strip-x);
  cursor: pointer;
}

.tab__x:hover,
.tab__x:focus-visible {
  color: var(--strip-accent);
  outline: none;
}

.tabwrap--active .tab__x {
  color: color-mix(in srgb, var(--strip-active-fg) 55%, transparent);
}

.tabwrap--active .tab__x:hover,
.tabwrap--active .tab__x:focus-visible {
  color: var(--strip-active-fg);
}

/* Every open thing lives here, one at a time. */
.views {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: rise 220ms var(--ease);
}

.view[hidden] {
  display: none;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Project / news / file view: 400x300 show-off image + name + description + link */
.showcase {
  display: flex;
  flex-direction: column;
  padding: 6% 7% 6%;
  gap: 1.2em;
  background: var(--pane-bg);
  color: var(--pane-fg);
  animation: rise 260ms var(--ease);
}

.showcase__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}

.showcase__kind {
  color: var(--pane-dim);
}

.showcase__close {
  appearance: none;
  background: none;
  border: var(--hair) solid color-mix(in srgb, var(--pane-fg) 35%, transparent);
  color: inherit;
  font: inherit;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 0.7em;
  cursor: pointer;
}

.showcase__close:hover,
.showcase__close:focus-visible {
  background: var(--pane-fg);
  color: var(--pane-bg);
  outline: none;
}

.showcase__media {
  align-self: flex-start;
  width: min(100%, 400px);
  aspect-ratio: 4 / 3;
  border: var(--hair) solid color-mix(in srgb, var(--pane-fg) 45%, transparent);
  background: var(--pane-fg);
  overflow: hidden;
}

.showcase__media img,
.showcase__media svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase__title {
  margin: 0;
  font-size: clamp(20px, 2.5vw, 34px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.showcase__body {
  margin: 0;
  max-width: 46ch;
  font-size: 1.02em;
  line-height: 1.5;
  color: var(--ink-80);
}

.showcase__foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1em;
  border-top: var(--hair) solid var(--pane-rule);
  padding-top: 0.9em;
}

.showcase__meta {
  margin-right: auto;
  color: var(--ink-60);
}

/* ------------------------------------------------------- file / od / chat */

/* a plain text file opened from the shell */
.view__pre {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: var(--shell-leading);
  color: var(--pane-fg);
}

.view__label {
  color: var(--pane-dim);
}

/* a rule that keeps the discussion board readable */
.view__replies {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  margin-top: 0.2em;
}

.od__reply {
  border-left: var(--hair) solid var(--pane-rule);
  padding-left: 1em;
}

.view__row {
  display: flex;
  align-items: baseline;
  gap: 1.4ch;
}

.view__row .spacer {
  margin-left: auto;
}

.view__actions {
  display: flex;
  align-items: baseline;
  gap: 1.6ch;
}

.view__titlebar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.4em;
}

.view__reply-form {
  display: flex;
  align-items: baseline;
  gap: 0.7ch;
  border-top: var(--hair) solid var(--pane-rule);
  padding-top: 0.9em;
  margin-top: auto;
}

.view__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: color-mix(in srgb, var(--pane-fg) 8%, transparent);
  color: var(--pane-fg);
  font: inherit;
  padding: 0.35em 0.6em;
  outline: none;
}

.view__input::placeholder {
  color: color-mix(in srgb, var(--pane-fg) 45%, transparent);
}

/* the chat: a view like any other, wearing the pane's tone — charcoal when
   the pane holds focus (which opening the chat gives it), orange when the
   visitor clicks back into the shell */
.view--chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pane-bg);
  color: var(--pane-fg);
  animation: rise 220ms var(--ease);
}

.view--chat .pane__body {
  flex: 1 1 auto;
  min-height: 0;
}

/* The "open" button: flat accent-on-pane, right aligned, uppercase. */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: var(--hair) solid var(--pane-fg);
  background: var(--pane-fg);
  color: var(--pane-bg);
  font: inherit;
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.55em 0.95em;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  background: transparent;
  color: var(--pane-fg);
  outline: none;
}

.btn--ghost {
  background: transparent;
  color: var(--pane-fg);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--pane-fg);
  color: var(--pane-bg);
}

/* file transfer bar: minimizable progress bar at the top of the window.
   Cross-pane furniture: it rides with the shell's tone (see applyFocusTheme,
   which keeps #layout in the shell's tone for exactly this). */
.transfer-bar {
  position: fixed;
  top: 0;
  left: var(--frame);
  right: var(--frame);
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch;
  padding: 0.4em 0.8em;
  background: var(--pane-bg);
  color: var(--accent);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  border-bottom: var(--hair) solid var(--accent);
  transition: transform 200ms var(--ease);
}
.transfer-bar.hidden {
  transform: translateY(-100%);
}
.transfer-item {
  display: flex;
  align-items: center;
  gap: 1ch;
  background: color-mix(in srgb, var(--accent) 15%, var(--pane-bg));
  border: var(--hair) solid var(--accent);
  padding: 0.3em 0.6em;
  white-space: nowrap;
}
.transfer-item__name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16ch;
}
.transfer-item__progress {
  width: 8ch;
  height: 0.8em;
  background: var(--pane-bg);
  border: var(--hair) solid var(--accent);
  overflow: hidden;
}
.transfer-item__bar {
  height: 100%;
  background: var(--accent);
  transition: width 150ms linear;
}
.transfer-item__status {
  font-size: 0.8em;
  min-width: 6ch;
}
.transfer-item__retry {
  appearance: none;
  background: none;
  border: var(--hair) solid var(--accent);
  color: var(--accent);
  font: inherit;
  font-size: 0.75em;
  padding: 0.1em 0.4em;
  cursor: pointer;
}
.transfer-item__retry:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.transfer-item__close {
  appearance: none;
  background: none;
  border: 0;
  color: var(--accent-dim);
  font: inherit;
  cursor: pointer;
  padding: 0 0.3em;
}
.transfer-item__close:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------------- shell */
.shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--pane-bg);
  color: var(--pane-fg);
}

/* -------------------------------------------------------------- mobile ---- */
@media (max-width: 780px) {
  :root {
    --frame: 0px;
    --gutter: 0px;
    --brand-w: 62%;
    --brand-inset-x: 7%;
    --brand-inset-y: 6.5%;
  }

  /* keep the panels clear of any notch */
  .frame {
    padding-top: max(var(--frame), env(safe-area-inset-top));
    padding-bottom: max(var(--frame), env(safe-area-inset-bottom));
  }

  .layout {
    grid-template-columns: none;
    grid-template-rows: minmax(0, var(--showoff-h, 34vh)) minmax(0, 1fr);
    row-gap: var(--gutter);
    transition: grid-template-rows 320ms var(--ease);
  }

  /* collapsed: only the tab strip / brand lockup is left, as a bar */
  .layout[data-collapsed="true"] {
    --showoff-h: var(--bar-h, 88px);
  }
}

/* Short landscape screens: treat like mobile stack. */
@media (max-width: 780px) and (orientation: landscape) {
  .layout {
    grid-template-rows: minmax(0, var(--showoff-h, 26vh)) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------- mail view */

.view--mail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--signal);
  color: var(--charcoal);
  animation: rise 220ms var(--ease);
}

.view--mail .view__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7em 1.2em;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--charcoal) 20%, transparent);
}

.mail__split {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
}

.mail__sidebar {
  width: 28ch;
  min-width: 22ch;
  max-width: 35ch;
  border-right: var(--hair) solid var(--pane-rule);
  overflow-y: auto;
  padding: 0.7em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.mail__content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.mail__item {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.5em 0.6em;
  border: var(--hair) solid transparent;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  transition: background 100ms, border-color 100ms;
}

.mail__item:hover,
.mail__item:focus-visible {
  background: color-mix(in srgb, var(--pane-fg) 8%, transparent);
  border-color: var(--pane-rule);
  outline: none;
}

.mail__from {
  font-weight: 600;
  color: var(--accent);
}

.mail__subject {
  color: var(--pane-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail__time {
  font-size: 0.85em;
}

.mail__unread {
  font-size: 0.7em;
}

.mail__header {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding-bottom: 0.7em;
  border-bottom: var(--hair) solid var(--pane-rule);
}

.mail__row {
  display: flex;
  align-items: baseline;
  gap: 1.4ch;
}

.mail__row .label {
  color: var(--pane-dim);
}

.mail__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  max-width: 64ch;
  color: var(--pane-fg);
}

.mail__actions {
  display: flex;
  gap: 1ch;
}

.mail__compose-form {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}

.mail__field {
  display: flex;
  align-items: center;
  gap: 1ch;
}

.mail__field .label {
  min-width: 7ch;
}

.mail__field input,
.mail__field textarea {
  flex: 1 1 auto;
  background: color-mix(in srgb, var(--pane-fg) 6%, transparent);
  border: var(--hair) solid var(--pane-rule);
  color: var(--pane-fg);
  font: inherit;
  padding: 0.4em 0.6em;
  outline: none;
}

.mail__field input:focus,
.mail__field textarea:focus {
  border-color: var(--accent);
}

.mail__compose-form textarea {
  min-height: 20ch;
  resize: vertical;
}

.mail__compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1ch;
  margin-top: 0.5em;
}