/* utono 2.0.1: reader/editor reliability, adjustable media, and responsive controls.
   Applies after Phase 5, with no breaking changes to existing Markdown markers. */

/* Font is requested via CSS link. Offline remains a readable system fallback. */
:root{--utono-font:"Inter Tight",Inter,"Segoe UI Variable",system-ui,sans-serif}
.icon-btn[data-action="star-note"].active{color:var(--utono-action)}
.icon-btn[data-action="star-note"].active svg{fill:currentColor}

/* Editor toolbar must remain available while scrolling content, even when inspector is closed. */
.utono-editor-compose{min-width:0}
.utono-persistent-toolbar{position:sticky;top:0;z-index:19;margin-top:12px!important;min-height:48px;flex-wrap:nowrap;box-shadow:0 5px 13px var(--utono-shadow);background:var(--utono-card);isolation:isolate}
.utono-persistent-toolbar .format-action{flex:none;min-width:36px;min-height:36px}

/* Six-column content flow: 6/6, 3/6, 2/6. Text and links stay full width. */
#document-blocks.document-blocks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 10px;align-items:start;min-width:0}
#document-blocks > *{min-width:0;grid-column:1/-1}
#document-blocks > .utono-sized-embed{position:relative;grid-column:span 6;margin:0!important;min-width:0}
#document-blocks > .utono-sized-embed[data-width="50"]{grid-column:span 3}
#document-blocks > .utono-sized-embed[data-width="33"]{grid-column:span 2}
#document-blocks .doc-embed-card{min-width:0}
#document-blocks .media-card{min-width:0}
#document-blocks .media-display{min-width:0}
#document-blocks .doc-video .utono-video-stage{min-width:0;width:100%;overflow:hidden}
#document-blocks .doc-video[data-width="33"] .utono-video-stage{min-height:110px}
#document-blocks .doc-embed-card img{width:100%;height:auto;object-fit:contain}
#document-blocks .doc-embed .embed-controls{z-index:8}

/* Width/view controls: visible on hover/focus, but don't block the photo. */
.utono-media-layout{position:absolute;left:8px;top:8px;z-index:10;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .12s ease}
.utono-sized-embed:is(:hover,:focus-within) .utono-media-layout{opacity:1}
.utono-media-layout label{display:flex;align-items:center;gap:4px;background:var(--utono-card);border:1px solid var(--utono-border);border-radius:8px;padding:3px 5px;box-shadow:0 3px 8px var(--utono-shadow)}
.utono-media-layout label>span{font-size:10px;color:var(--utono-muted)}
.utono-media-layout select,.utono-media-layout button{background:var(--utono-card);border:1px solid var(--utono-border);border-radius:7px;color:var(--utono-text);font:inherit;font-size:11px;padding:4px;cursor:pointer;min-height:28px}
.utono-media-layout select{border:0;min-width:55px}
.utono-media-layout button{box-shadow:0 3px 8px var(--utono-shadow);padding-inline:8px}
.utono-embed-grip,.utono-block-grip{font-size:14px;opacity:.8;cursor:grab;touch-action:none;user-select:none}
.utono-embed-grip{padding:0 2px;color:var(--utono-muted)}
.utono-v3-block-actions[draggable="true"]{cursor:grab;user-select:none;touch-action:none}
.utono-rich-line.drop-media-target,.doc-embed.drop-media-target{outline:2px solid var(--utono-action)!important;outline-offset:2px}

/* Place the caret before or after an embedded block without a persistent empty paragraph. */
.utono-gutter-insert{position:absolute;z-index:9;width:26px;height:26px;padding:0;display:grid;place-items:center;font-size:16px;line-height:1;border:1px solid var(--utono-border);border-radius:8px;opacity:0;background:var(--utono-card);color:var(--utono-action);cursor:pointer}
.utono-gutter-before{left:0;top:50%;transform:translate(-60%,-50%)}
.utono-gutter-after{right:0;top:50%;transform:translate(60%,-50%)}
.doc-embed:is(:hover,:focus-within)>.utono-gutter-insert{opacity:1}
.utono-gutter-insert:focus-visible{opacity:1}

/* Compact YouTube/Vimeo list view, as in the visual reference. */
#document-blocks .utono-video-compact{display:grid;grid-template-columns:minmax(78px,30%) minmax(0,1fr);grid-template-rows:auto;align-items:center;gap:0 12px;padding:8px!important;min-height:102px;border:1px solid var(--utono-border);background:var(--utono-card);border-radius:16px}
#document-blocks .utono-video-compact .utono-video-stage{grid-column:1;aspect-ratio:16/10;min-height:0!important;margin:0;border-radius:11px}
#document-blocks .utono-video-compact .utono-video-stage .utono-video-play{height:100%;border-radius:11px}
#document-blocks .utono-video-compact .utono-video-details{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding:0!important}
#document-blocks .utono-video-compact .utono-video-details>*{max-width:100%;overflow-wrap:anywhere}
#document-blocks .utono-video-compact .utono-video-stage:has(iframe){grid-column:1/-1;min-height:220px!important}
#document-blocks .utono-video-compact .utono-video-stage:has(iframe)+.utono-video-details{grid-column:1/-1}

/* Real waveform heights are computed from saved audio samples when supported. */
.utono-audio-player{display:flex;align-items:center;gap:13px;padding:13px!important;background:var(--utono-card);border:1px solid var(--utono-border);border-radius:17px;min-height:93px}
.utono-audio-player>audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.utono-audio-play{display:grid;place-items:center;border:0;border-radius:50%;height:45px;width:45px;min-width:45px;flex:none;background:var(--utono-action);color:var(--utono-action-ink);font-size:20px;cursor:pointer}
.utono-audio-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.utono-audio-title-line{display:flex;align-items:center;justify-content:space-between;gap:6px}
.utono-audio-title{background:transparent;border:0;color:var(--utono-text);font-size:13px;font-weight:650;padding:3px 2px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;cursor:pointer}
.utono-audio-speed{flex:none;border:1px solid var(--utono-border);border-radius:999px;background:var(--utono-selected);color:var(--utono-text);font-size:11px;min-width:46px;height:28px;cursor:pointer}
.utono-audio-wave{position:relative;height:24px;min-height:24px}
.utono-wave-peaks{display:flex;align-items:center;justify-content:space-between;gap:1px;height:100%;width:100%;color:var(--utono-action);pointer-events:none}
.utono-wave-peaks i{flex:1;max-width:5px;min-width:1px;border-radius:3px;background:var(--utono-action);opacity:.68}
.utono-wave-peaks:empty{height:3px;background:var(--utono-border);border-radius:4px;position:absolute;top:45%}
.utono-audio-seek{position:absolute;inset:0;width:100%;height:100%;opacity:.10;cursor:pointer;margin:0;accent-color:var(--utono-action)}
.utono-audio-seek:focus-visible{opacity:.9}
.utono-audio-time{display:flex;justify-content:space-between;color:var(--utono-muted);font-size:10px;font-variant-numeric:tabular-nums}
.utono-recovery-alert{padding:36px;max-width:640px;margin:8vh auto;border:1px solid var(--utono-border);border-radius:17px;background:var(--utono-card)}
.utono-recovery-alert p{color:var(--utono-muted);line-height:1.65;margin:18px 0}
.utono-recovery-alert button{margin:4px}

/* Search must fit the actual available viewport, including desktop zoom. */
#v2-search-root .v2-search-sheet{top:max(14px,env(safe-area-inset-top));max-height:calc(100dvh - 28px);height:min(740px,calc(100dvh - 28px));overflow:hidden}
#v2-search-root .v2-search-sheet header{flex:0 0 auto;min-height:68px}
#v2-search-root .v2-search-categories{flex:0 0 auto;min-height:58px}
#v2-search-root .v2-search-results{flex:1;min-height:0;overflow-y:auto}
#v2-search-root .v2-search-sheet footer{flex:0 0 auto}
@media (hover:none){.utono-media-layout{opacity:1;position:relative;top:auto;left:auto;margin:4px 0;justify-content:flex-start}.utono-media-layout label>span{display:none}.doc-embed>.utono-gutter-insert{opacity:.65}.utono-gutter-before{left:1px;transform:translateY(-50%)}.utono-gutter-after{right:1px;transform:translateY(-50%)}}
@media(max-width:720px){
  .utono-persistent-toolbar{top:0;min-height:46px;margin-top:10px!important;padding:4px;z-index:24}
  .utono-persistent-toolbar .format-action{min-height:36px;min-width:34px}
  #v2-search-root .v2-search-sheet{height:100dvh;max-height:100dvh;top:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  #document-blocks.document-blocks{gap:0 6px}
  #document-blocks .utono-sized-embed[data-width="33"] .media-meta{font-size:9px}
  .utono-audio-player{padding:8px!important;gap:7px;min-height:70px}
  .utono-audio-play{height:37px;width:37px;min-width:37px}
  .utono-audio-title{font-size:11px}
  .utono-media-layout select{min-height:32px}
  #document-blocks .utono-video-compact{grid-template-columns:minmax(70px,36%) minmax(0,1fr);gap:6px;min-height:90px}
}
@media(max-width:380px){.utono-audio-play{height:31px;width:31px;min-width:31px}.utono-audio-player{gap:5px}.utono-audio-title{font-size:10px}.utono-audio-speed{min-width:38px}.utono-media-layout{flex-wrap:wrap}}
/* Keep audio's own controls clickable when the outer media action overlay appears. */
#document-blocks .doc-embed:has(.utono-audio-player) .embed-controls{top:-28px;right:0}
#document-blocks .doc-embed:has(.utono-audio-player) .utono-media-layout{top:-28px;left:0}
#document-blocks .utono-audio-player{position:relative;z-index:4}
#document-blocks .utono-audio-speed,#document-blocks .utono-audio-play{position:relative;z-index:6}
/* Structural empty text slots between adjacent media must not interrupt a 2- or 3-column row.
   Accessible Insert-before/after buttons remain on each media block. */
#document-blocks > .utono-between-media{display:none}
/* Stars are filled wherever a note is already favorited, not just in the editor. */
.card-star.is-starred .ico,.utono-rail-star .ico{fill:currentColor;stroke:currentColor;color:var(--utono-action)}