/* My Space Search. The palette it uses lives in the authoritative tokens.css, which is loaded
   before this sheet; the rules below are presentation only. */

.my-space-search{display:grid;gap:.65rem;padding:.1rem 0 calc(.5rem + env(safe-area-inset-bottom,0px));color:var(--ms-text)}
.my-space-search-header h2{margin:.1rem 0 .2rem;font-size:1.15rem;color:var(--ms-green-800)}
.my-space-search-form{margin:0}
.my-space-search-field{position:relative;display:flex;align-items:center;background:var(--ms-surface);border:1px solid var(--ms-line-strong);border-radius:var(--ms-radius-md)}
.my-space-search-icon{position:absolute;left:.7rem;color:var(--ms-text-muted);font-size:1rem;line-height:1;pointer-events:none}
.my-space-search input[type=search]{width:100%;min-height:48px;padding:.55rem 3rem .55rem 2.2rem;border:0;border-radius:inherit;background:transparent;color:var(--ms-text);font-size:1rem;line-height:1.3}
.my-space-search input[type=search]::placeholder{color:var(--ms-text-muted)}
.my-space-search input[type=search]::-webkit-search-cancel-button{display:none}
.my-space-search input[type=search]:focus{outline:none}
.my-space-search-field:focus-within{border-color:var(--ms-green-700);box-shadow:0 0 0 3px var(--ms-sage-200)}
.my-space-search-clear{position:absolute;right:.15rem;display:grid;width:44px;height:44px;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ms-text-muted);font-size:1.05rem;line-height:1}
.my-space-search-clear[hidden]{display:none}
.my-space-search-clear:hover{background:var(--ms-surface-sunken)}
.my-space-search-clear:focus-visible{outline:3px solid var(--ms-gold);outline-offset:2px}
.my-space-search-status{margin:0;min-height:1.2rem;color:var(--ms-text-muted);font-size:.82rem}
.my-space-search-status[data-state=error]{color:var(--ms-danger)}
/* Mixed results are grouped into labelled sections, in a fixed order. */
.my-space-search-results{display:grid;gap:.85rem}
.my-space-search-section{display:grid;gap:.35rem}
.my-space-search-section h3{margin:0;color:var(--ms-green-800);font-size:.82rem;letter-spacing:.01em;text-transform:uppercase}
.my-space-search-section-rows{display:grid;gap:.4rem}
.my-space-search-section-note{margin:0;color:var(--ms-text-muted);font-size:.82rem}
.my-space-search-result{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65rem;width:100%;min-height:56px;padding:.55rem .7rem;border:1px solid var(--ms-line);border-radius:var(--ms-radius-md);background:var(--ms-surface);text-align:left;color:inherit}
.my-space-search-result:hover{background:var(--ms-sage-100);border-color:var(--ms-sage-200)}
.my-space-search-result:active{background:var(--ms-sage-200)}
.my-space-search-result:focus-visible{outline:3px solid var(--ms-gold);outline-offset:2px}
/* One fixed leading cell for every row type. Its children share the same cell, so a fallback that
   is currently hidden can never take a column of its own and shove the text across the card. */
.my-space-search-lead{display:grid;width:40px;height:40px;place-items:center}
.my-space-search-lead>*{grid-area:1/1}
.my-space-search-avatar{display:grid;width:40px;height:40px;place-items:center;overflow:hidden;border-radius:50%;background:var(--ms-sage-200);color:var(--ms-green-800);font-weight:800;object-fit:cover}
.my-space-search-lead .page-avatar{width:40px;height:40px}
/* The copy is clamped rather than left to grow: a long title, a long author line or a long article
   body can never push a card out of shape or wrap under the row's controls. */
.my-space-search-copy{display:grid;min-width:0;gap:.1rem}
.my-space-search-copy strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--ms-text);font-size:.95rem;overflow-wrap:anywhere}
.my-space-search-copy small{overflow:hidden;color:var(--ms-green-700);font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}
.my-space-search-copy em{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--ms-text-muted);font-size:.8rem;font-style:normal}
/* The row states its own type, and a post with media carries its picture or play mark above that
   label: a result never loads a video, and never loads a stored original picture. */
.my-space-search-badges{display:grid;align-content:center;justify-items:end;gap:.375rem;justify-self:end}
.my-space-search-media{display:grid;width:56px;height:56px;place-items:center;overflow:hidden;border-radius:.6rem;background:var(--ms-surface-sunken);color:var(--ms-green-800);font-size:1rem;line-height:1}
.my-space-search-media-glyph{display:grid;place-items:center}
.my-space-search-thumb{display:block;width:100%;height:100%;object-fit:cover}
/* Everything this screen hides with the `hidden` attribute really is hidden: a class that sets
   `display` would otherwise win over it and leave a decorative element on the card. */
.my-space-search [hidden]{display:none!important}
/* The result type is the shared chip; only its narrow-screen density is local. */
/* The retry control is the shared primary button. */

@media(min-width:48rem){
  .my-space-search{gap:.75rem}
  .my-space-search-section-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:30rem){
  .my-space-search-result{gap:.5rem;padding:.5rem .55rem}
  .my-space-search-media{width:48px;height:48px}
  .my-space-search-type{padding:.15rem .4rem;font-size:.66rem}
}

/* The focused post sheet, opened from a Posts result. It reuses the existing comments-sheet
   frame and the shared post card, so only the two controls it adds are styled here. */
.my-space-post-sheet-body{display:grid;align-content:start;gap:.7rem;overflow:auto}
.my-space-post-sheet .my-space-post{margin:0}
.my-space-post-sheet-actions{display:flex;justify-content:flex-end}
.my-space-post-sheet-actions button,.my-space-post-sheet-fallback{min-height:44px;padding:.5rem 1.1rem;border:0;border-radius:999px;background:var(--ms-green-700);color:var(--ms-text-inverse);font:inherit;font-weight:700}
.my-space-post-sheet-actions button:focus-visible,.my-space-post-sheet-fallback:focus-visible{outline:3px solid var(--ms-gold);outline-offset:2px}