/* What the portal mockups do not draw, and nothing else. Everything visual
   comes from portal.css, which is docs/mockups/portal/_portal.css copied at
   build time. This file is for the parts that exist only because the page is
   real: a real Turnstile widget, a real textarea, a real hidden state. */

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
}

.screen {
  min-height: 100vh;
}

[hidden] {
  display: none !important;
}

/* Cloudflare draws its own Turnstile box; this only holds its place. */
.ts {
  min-height: 65px;
  margin: 14px 0 4px;
}

/* The mockup's composer is a drawing of a textarea. This is the textarea. */
.comp textarea.ta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  resize: vertical;
  font: inherit;
  font-family: var(--ins);
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy);
}

.comp textarea.ta::placeholder {
  color: var(--mute);
}

.ctools button:disabled {
  opacity: 0.5;
}

/* The canvas back control, as a button. */
.cbar .backbtn {
  border: 0;
  background: none;
  padding: 0;
  margin-right: 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--slate);
}

.cbar .backbtn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "Pinned to" on a note, which is a link back to the thing it is about. */
.n button.on {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.n button.on:hover {
  text-decoration: underline;
}

/* Resolve and reopen. A resolved_at column needs somebody to write it. */
.n .rv {
  display: inline-block;
  margin-top: 6px;
  margin-left: 8px;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--ins);
  font-size: 10.5px;
  color: var(--mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.n .rv:hover {
  color: var(--navy);
}

.empty {
  margin: 14px;
  font-family: var(--ins);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mute);
  max-width: 48ch;
}

.allnotes {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 14px;
}

.frow {
  cursor: default;
}

.frow[tabindex] {
  cursor: pointer;
}

.frow.sel {
  outline: 2px solid var(--plum);
  outline-offset: -2px;
}

.frow a.dl {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.drop.over {
  outline: 2px dashed var(--lagoon);
  outline-offset: -6px;
}

.drop b[role='button'] {
  cursor: pointer;
}

.chip.cb {
  border-color: var(--coral);
  background: var(--coral-050);
  color: var(--coral);
}

/* Arriving in the workspace after P-03. */
.ws.arrive {
  animation: studio-arrive 0.45s ease-out;
}

@keyframes studio-arrive {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws.arrive {
    animation: none;
  }
}

/* The logo master, shown at its own size on Logo files and never scaled up. */
.fboard img.master {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 18px;
  background: #fff;
  box-shadow: var(--sh-s);
}

/* Admin only: opening a sign-in lock, on a Files-style row. */
.frow .unlock {
  border: 0;
  background: none;
  padding: 4px;
  font-family: var(--ins);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--lagoon);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.frow .unlock:disabled {
  opacity: 0.5;
}

.rail button[hidden] {
  display: none !important;
}

/* The portal CSS gives .mt a top margin and .fn an ellipsis, and both only
   work on stacked blocks, but the markup is two spans, which run together on
   one line. Stacked here, for Files and for Sign-in locks alike. */
.frow .fn,
.frow .mt {
  display: block;
}