/* assets/css/sheet-add.css
   The house stylesheet, Task 6: the desk control's PLACEMENT only. Option 4
   (Ritu, 2026-10-06: "4, for now"): one line under the paragraph that holds
   the selected words, then the form in the same place, both on the story
   text's own edges. Drawn in mockups/50-house-stylesheet-2026-10-06
   (desk-4-*.png). The form itself is drawn by sheet-form.css, which the
   Storage page shares.

   The line wears the desk's label type (.toggle-label) in the quiet-button
   ink. Words only, no box, no icon. No opening animation.

   Both pieces are children of <body> and sit over the story column by
   measurement (assets/js/sheet-add.js), never inside the saved story. */

.sheet-add-line,
.sheet-add-form {
  position: absolute;
  z-index: 1; /* over the page, under the masthead (30) and the tab bar (40) */
  box-sizing: border-box;
  margin: 0;
}
.sheet-add-line[hidden],
.sheet-add-form[hidden],
.sheet-add-line[data-sheet-away],
.sheet-add-form[data-sheet-away] { display: none !important; }

/* ---------- the line ---------- */
.sheet-add-line {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--btn-ink);
  transform-origin: left center;
  transition: transform var(--press-out) var(--press-ease);
}
.sheet-add-line:active {
  transform: scale(var(--press-light));
  transition: transform var(--press-in) var(--press-ease);
}
.sheet-add-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .sheet-add-line:hover { color: var(--accent); }
}

/* ---------- the form, placed under the paragraph ---------- */
/* Its width is set to the story text's width by sheet-add.js. */
.sheet-add-form { padding: var(--s-3) 0; max-width: none; }